/* baseElements.start. */
	body {font-family: 'Microsoft JhengHei',Arial,Helvetica,'sans-serif';background: #F3EEE9;color: #666}
    .revert ul li {
        list-style-type: disc;
     }
     .revert ol li {
        list-style-type: decimal;
     }
     .revert ul {
        padding-left: 40px;
     }
    #wrapper {
        table-layout: fixed;
        -ms-word-wrap: break-word;
        word-wrap: break-word;
        -ms-word-break: normal;
        word-break:normal;
        margin-top:87px;       
    }
    #wrapper-account {
        margin-top: 55px;
        background: #F3EEE9;
        color: #666;
    }
    header { padding-top:15px;background:#FFF; }
    main.container { overflow:hidden }
    #wrapper-account main.container { padding-bottom: 70px;}
    section { margin-top: 10px;margin-bottom:10px; padding-bottom:0; }
    footer { background:#fff; padding-top:15px;padding-bottom: 70px; }
    /*.skyBanner, skyBnDis { margin-bottom:10px; }
    .mb-0 {margin-bottom:0; }*/
    h1 { font-size:28px; }
    h2 { font-size:18px; }
    h1,h2,h3 {font-weight: 700;}
    ul,li {list-style: none;padding-left: 0;}
    a,a:hover,a:focus,a:visited  { text-decoration:none; color: #679d2a }
    button {outline: 0;}
    .through {text-decoration: line-through;margin-right: 10px;}
    .more {
        position: relative;
        text-align: right;
        margin: 0 10px;
        font-size: 13px;
        padding-right: 3px;
    }
    .more a {
        color: #ED541E;
    }
    .more a:hover {
        text-decoration: underline;
    }
    .more span {
        position: absolute;
        right: 0;
        top: 5px;
        color: #ED541E;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 4px 0 4px 4px;
        border-color: transparent transparent transparent #ed551e;
    }
    .reset-padding {
        padding: 0;
    }
    .reset-margin {
        margin: 0;
    }
    .price-s1,.price-s2,.price-s3,.price-s4 {
        color: #f00000;
        font-weight: 700;
    }
    .price-s1 {
        font-size: 20px;
    }
    .price-s2 {
        font-size: 18px;
    }
    .price-s3 {
        font-size: 28px;
        margin: 0 5px;
    }
    .price-s4 {
        font-size: 15px;
    }
    
    .btn-basic {
        border: 1px solid #679D2A;
        border-radius: 0;
    }
    .btn-basic:hover {
        border-color: #518517;
        color: #518517;
    }
    .btn-cart {
        width: 34px;
        height: 34px;
        background: url(../images/img_sprite.png) no-repeat;
        background-position: -70px 0;
        border: none;
        white-space: nowrap;
        text-indent: 300%;
        overflow: hidden;
    }
    a.btn-primary, 
    a.btn-primary:hover,
    a.btn-primary:focus,
    a.btn-primary:active,
    a.btn-primary:active:focus,
    a.btn-primary:active:hover {
        background: #679d2a;
        border-color: #679d2a;
        color: #fff;
    }
    @-moz-document url-prefix() { 
      .btn-cart {
         text-indent: -9999px;
      }
    }

    .btn-cart:hover {
        -webkit-filter:brightness(.8);
    }
    .btn-cart.active,
    .btn-cart:active, .btn-cart.dropdown-toggle {
        background: url(../images/img_sprite.png) -104px 0 no-repeat;
    }
    .btn-cart.active:hover,
    .btn-cart:active:hover, .btn-cart.dropdown-toggle:hover {
        -webkit-filter:brightness(1);
    }
    .btn-preview {
        padding: 6px 2px;
    }
    .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { vertical-align:middle;background: #fff; }
    .table > thead > tr > td.hide-r-line, .table > tbody > tr > td.hide-r-line, .table > tfoot > tr > td.hide-r-line {border-right:1px solid #FFF;}
    /*.btn-second {
        min-width:136px;
        border-color: #679d2a;
        color: #679d2a;
    }
    .btn-main {     
        min-width:136px;        
        color: #ffffff;
        background:#679d2a;
    }*/
    .form-control:focus {
        border-color: #CCC;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0), 0 0 8px rgba(102, 175, 233, 0.0);
        box-shadow: inset 0 1px 1px rgba(0,0,0,0), 0 0 8px rgba(102, 175, 233, 0.0);
    }
    form .form-group label {
        color: #999;
    }
    form .form-group .form-check-input {
        font-size: 120%;
        margin-right: 5px;
    }
    form .form-control {
        border-radius: 2px;
        -webkit-border-radius:: 2px;
    }
    form .has-warning .form-control,form .has-warning .form-control:focus,
    form input.has-warning,form input.has-warning:focus {
        border-color: #d9534f;
    }
    form select.has-warning,form select.has-warning:focus {
        border-bottom: 1px solid #d9534f;

    }
    form .has-warning .form-control:focus {
        box-shadow: 0 0 3px rgba(217,83,79,.5);
    }
    form .has-warning small,form small.has-warning {color: #d9534f}
    form .has-warning small .material-icons,form small.has-warning .material-icons {vertical-align: middle;}
    .affix-top .btnTop, .affix-top .btnSubscribe {display:none;}
    .affix .btnTop, .affix .btnSubscribe {display:block;}
    .btnTop {display:none;position:fixed;right: 20px;bottom: 97px;}
    .btnCart {position: fixed;right: 20px;bottom: 50px;}
    .btnSubscribe {display: none;position: fixed;right: 10px;bottom: 80px;}
    .btn:focus,.btn:active {
       outline: none !important;
    }
    mark,.mark {color: #999;}
    .text-primary {color: #679d2a}
    .text-red {color: #f00000}
    /*firefox select*/
    @-moz-document url-prefix() {
      select.form-control {
        padding-right: 25px;
        background-image: url("data:image/svg+xml,\
          <svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='14px'\
               height='14px' viewBox='0 0 1200 1000' fill='rgb(51,51,51)'>\
            <path d='M1100 411l-198 -199l-353 353l-353 -353l-197 199l551 551z'/>\
          </svg>");
        background-repeat: no-repeat;
        background-position: calc(100% - 5px) 50%;
        -moz-appearance: none;
        appearance: none;
      }
    }
    .dropdown-backdrop {
        display: none;
    }
    .btn-normal {
        padding: 9px;
        margin: 0 auto;
        display: block;
        max-width: 300px;
    }
    .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
        background-color: #679d2a;
        border-color: #679d2a;
    }
    .pagination>li>a, .pagination>li>span {
        color: #333;
    }
    .pagination>li>a:focus,
    .pagination>li>a:hover,
    .pagination>li>span:focus,
    .pagination>li>span:hover {
        color: #679d2a;
    }
    .pagination>.active>a,
    .pagination>.active>a:focus,
    .pagination>.active>a:hover,
    .pagination>.active>span,
    .pagination>.active>span:focus,
    .pagination>.active>span:hover {
        background-color: #679d2a;
        border-color: #679d2a
    }
/* baseElements.end. */

/* header.start. */
    header.affix { box-shadow:0 0 7px 2px rgba(0,0,0,0.175); }
    .logo {max-height:36px;padding-top: 4px;}
    #wrapper-account .logo {margin-bottom: 10px;}
    .goTop,.btnCart,.btnHelp {
    	width: 35px;
    	height: 35px;
    	background-color: #679d2a;
    	font-size: 36px;
    	text-align: center;
    	line-height: 30px;
    	opacity: 0.8;
    	color: #fff;
    }
    a.btnCart {
        background-color: #E44C15;
        color: #fff;!important
    }
    a.btnCart .badge {
        position:absolute;
        top:-6px;
        right:-6px;
        padding:3px 5px;
        background:#9D2A48;
        z-index:10;
    }
    .btnSubscribe {
        font-size: 16px;
        width: 50px;
        height: 50px;
        background: #E44C15;
        text-align: center;
        opacity: 0.8;
        color: #fff;
        padding: 4px 5px;
        line-height: 20px;
    }
    .btnSubscribe:hover,.btnSubscribe:focus,.btnSubscribe:active {
        color: #fff;
        background: #d43800;
    }
    .btnHelp:hover,.btnHelp:focus,.btnHelp:active {
        background: #679d2a;
        color: #fff;
    }
    .search {margin:12px 0 0 0;}
    .search .input-group-btn>.btn {font-size: 15px;}
    .search .form-group {
        display: inline-block;
        float: left;
        margin-right: 8px;
        margin-bottom: 0;
    }
    .search .form-group .form-control {
        height: 46px;
        border-color: #eee9e0;
    }
    .bookPackageSearch .input-group,
    .search .input-group,.search-sm .input-group {
        border:#eee9e0 1px solid;
        border-radius:3px;
        background: #fff;
    }
    .bookPackageSearch input,
    .search input,
    .search-sm input {border:0;box-shadow:none;font-size: 14px;}
    .search input {height: 44px;}
    .search-filter {
        background: #f5f5f5;
        position: absolute;
        width: 100%;
        top: 29px;
        left: 0;
        padding: 6px;
        font-size: 13px;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, .3);
        border-radius: 0;
        z-index: 5;
    }
    .search-filter.dropdown-menu {
        border: none;
    }
    .search-filter p {
        color: #666;
        margin: 10px 0 0;
    }
    .search-filter .search-list {
        margin-bottom: 25px;
        font-size: 14px;
        line-height: 2;
    }
    .search-filter .search-list .search-clear {
        color: #999;
        text-decoration: underline;
    }
    .search-sm .form-group {
        display: inline-block;
        float: left;
        margin-right: 8px;
        margin-bottom: 0;
    }
    .search-sm .form-group .form-control {
        height: 32px;
        border-color: #eee;
        border-radius: 3px;
     }
    /*header tablet part*/
    
    /*20210526 seo*/
    .text-seo {
        color: #d2d2d2;
        float: right;
        font-size: 12px;
    }
    
    @media (min-width:768px) and (max-width:991px) {
        header .container {
            width: auto;
        }
        /*header.affix {
            box-shadow: 0 0 7px 2px rgba(0,0,0,0.175);
        }*/
        header .visible-xs {
            display: block!important;
        }
        header .hidden-xs {
            display: none!important;
        }
        header .nav a {
            margin: 10px auto;
        }
        header .nav .dropdown {
            display: block;
            margin-right: 0;
        }
        header .nav .dropdown > a {
            padding: 0 8px;
        }
        .navbar-toggle {
            display: block;
        }
        .navbar-collapse.collapse {
            overflow: auto !important;
        }
        main.container {
            margin-top: 88px;
            padding: 0;
        }
    }
    @media (max-width: 991px) {
        .navbar-header {
            float: none;
        }
        .navbar-left,.navbar-right {
            float: none !important;
        }
        .navbar-toggle {
            display: block;
        }
        .navbar-collapse {
            border-top: 1px solid transparent;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
        }
        .navbar-fixed-top {
            top: 0;
            border-width: 0 0 1px;
        }
        .navbar-collapse.collapse {
            display: none!important;
        }
        .navbar-nav {
            float: none!important;
            margin-top: 7.5px;
        }
        .navbar-nav>li {
            float: none;
        }
        .navbar-nav>li>a {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .collapse.in{
            display:block !important;
        }
    }
/* header.end. */

/*線上書櫃 header start*/
.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
    height: auto;
    max-height: inherit;
}
.subnav.collapse.in {
    background: #fff;
    overflow-y: scroll;
    z-index: 990;
}
/*線上書櫃 header end*/

/* nav.start. */
header .container nav {padding-right: 0;}
header .container nav .caret {margin: 0 auto;}
.nav a {
    display:block;
    margin:10px auto ;
    font-size:14px;
    color:#676b6c;
}
.nav .active a,
.subnav li li.active a {
    color:#679d2a;
}
.nav .col-xs-3 {
    padding-left:0;
    padding-right:0;
    width: 20%;
}
.subnav {
    padding:0;
    margin-top:79px;
}
.subnav ul {
    padding:0;
}
.subnav li {
    list-style:none;        
}

.subnav li a, .subnav .open > a {
    font-size:16px;
    line-height:44px;
    display:block;
    background: #fff;
    color:#666;
    padding:0px 8px;  
    margin: 0;
    border-bottom: 1px solid #efefef;     
}
.subnav li li a{
    font-size:14px;
    line-height:30px;
    display:block;
    background:#e7e7e7;
    color:#000;
    padding:2px 22px;
    position: relative;
}

.subnav li li li a {
    margin-left: 1em;
    border-bottom: 1px solid #efefef;
    font-weight: normal;
    line-height: 44px;
    color: #808080;
    font-size: 14px;
}
.subnav li li ul,.subnav li li ul li,.subnav li li li a  {
    background: #f8f7f4;
    position: relative;
    z-index: 10;
}

.subnav li a .caret {
    float: right;
    position: absolute;
    right: 8px;
    top: 50%;
    margin-top: -2px;
}
.subnav li .dropdown-menu li a .caret {
    float: inherit;
    position: relative;
    left: 4px;
}
.subnav li  a:hover,.subnav li li li a:hover {
    background: #f8f7f4;
}
.subnav li li a:hover {
    color: #679d2a;
    background: #e7e7e7;
}

.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
    max-height: 250px;
}
.subnav .open > .dropdown-menu {
    width: 100%;
}
.subnav .open > a, .subnav .open > a:hover, .subnav .open > a:focus, .subnav li > a:focus {
    color: #666;
    background: #fff;
    border-color: #efefef;
}
.subnav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background:#f8f7f4;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
    /*20200504 mobile subnav*/
    .subnav1 {
        margin: 0;
        padding-left: 0 ;
        padding-right: 1px;
    }
    .subnav1 li {
        border-bottom: 1px solid #ddd;
    }
    .subnav1 li a {
        margin: 0;
    }
    @media (max-width: 991px) and (min-width: 768px) {
        .navbar-collapse.collapse {
            padding-right: 1px;
        }
    }
/* nav.end. */

/* tool.member.start. */
    .tool .btn, .btn-hamburger {
        position:relative;
        width:35px;
        height:35px;
        margin: 0 0 0 3px; 
        padding:0;
        background:#F4F3EE;
        color:#a0a9aa;
        background:#F4F3EE;
        border: 1px solid #efefef;
    }
    .tool .btn i.material-icons, .btn-hamburger i.material-icons {
        line-height: 35px;
    }
    .tool .btn .badge {
        position:absolute;
        top:-6px;
        right:-6px;
        padding:3px 5px;
        background:#ee6e4a;
        z-index:10;
     }
    .tool li a {
        color:#676b6c;
        font-size:15px;
        line-height:24px;
        overflow: hidden;
        white-space: nowrap;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }
    .tool li.active a {
        background-color: transparent;
        color: #679d2a;
    }
    .tool li.active a:hover {
        background: #f7f7f7;
        color: #679d2a 
    }
    .tool li a.img-rounded {
        display: inline-block;
        padding: 0;
        margin:3px 15px ;
        width: 38px;
        height: 38px;
    }
    .tool li a.img-rounded img {
        width: 100%;
    }
    .tool li.login-way {
        padding-left: 20px;
        font-size: 12px;
    }
    .open > .dropdown-menu {
        min-width: 200px;
        max-width: 100%
    }
    .tool .member-face {
        overflow: hidden;
    }
    .tool .login-face {
        width: 35px;
        height: 35px;
        border-radius: 3px;
    }
    .tool .logout-face {
        width: 35px;
        height: 35px;
        padding: 0;
        background: #F4F3EE;
        line-height: 35px;
        border: 1px solid #efefef;
        color: #a0a9aa;
        margin: 3px 10px;
        border-radius: 3px;
        text-align: center;
    }
    .tool .logout-face img {
        width: 100%;
        display: block;
    }
    .tool .btn-logout {
        background:#FFF;
        font-size:15px;
        color:#679d2a;
        border:#679d2a 1px solid;
        border-radius:0;
        padding:2px 8px;
        margin:8px 10px;
    }
    .tool .btn-logout:hover {
        border-color: #476b1d;
        color: #476b1d;
    }
    .tool.col-md-2 {
        padding-right: 0;
    }
    .tool .icon-gift {
        background: url(../images/img_sprite.png) -216px -35px no-repeat;
        width: 19px;
        height: 21px;
        margin-top: 7px;
    }
    .tool .icon-bookshelf {
        background: url(../images/img_sprite.png) -213px -83px no-repeat;
        width: 24px;
        height: 20px;
        margin-top: 7px;
    }
    .tool .icon-bookshelf.active {
        background-position: -237px -83px;
    }
    .btn-hamburger {
        margin: 0 6px 0 0;
    }
    .btn-hamburger:hover {
        color: #A0A9B0;
    }
    @media only screen and (max-height: 420px) {
        ul.member {
            height: 270px;
            overflow-y: scroll;
        }
    }
/* tool.member.end. */

/* footer.start. */
    footer img {
        margin:0 auto;
    }
    footer .footer-img {
        margin:10px auto;
        padding: 0;     
    }
    footer .app-dl {
        margin: 0 auto;
        text-align: center;
    }
    footer .btn-app {
        padding: 5px;
        float: inherit;
        display: inline-block;
    }
    footer .footer-info {
        height: auto;
        margin: 0 auto;
        padding: 30px 0 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
    }
    footer .footer-info .info {
        position: relative;
        overflow: hidden;
    }
    footer .footer-info .info .info_list {
        border-bottom: 1px #ccc solid;
        padding: 10px 0;
        cursor: pointer;
    }
    footer .footer-info .info .info_list .info_title {
        height: 36px;
        line-height: 36px;
        font-size: 18px;
        font-weight: bold;
        color: #333;
        
    }
    footer .footer-info .info .info_list .info_title_close {
        background-image: url(../images/ic_clear_black_24dp_1x.png);
        background-position: right 7px;
        background-repeat: no-repeat;
        
    }
    footer .footer-info .info .info_list .info_title_open {
        background-image: url(../images/ic_add_black_24dp_1x.png);
        background-position: right 7px;
        background-repeat: no-repeat;
    }
    footer .footer-info .info .info_list ul {
        display: none
    }
    footer .footer-info .info .info_list ul li {
        width: 100%;
        line-height: 42px;
        font-size: 15px
    }
    footer .footer-info .info .info_list ul li a {
        display: block;
        color: #999;
    }
    footer .footer-info .info .info_list ul li a:hover {
        color: #679d2a;
    }
    /*copyright*/
    footer .copy {
        margin-top: 10px;
    }
    /* footer.end. */

    /* main.start. */
    /*h1.title { color:#679d2a; padding:0; margin:0 0 20px 0;   }*/
    .marquee {
        width:auto;
        background:#f3eee9;       
        padding:3px;
        font-size: 13px;
        height: 26px;
        line-height: 20px;
        overflow: hidden;
    }
    .marquee marquee a { 
        color:#666; 
        margin: 0 100px;
        white-space: nowrap; overflow: hidden;
        overflow-x:-webkit-marquee;
        -webkit-marquee-direction: backwards;
        -webkit-marquee-style: alternate;
        -webkit-marquee-speed: normal;
        -webkit-marquee-increment: small;
        -webkit-marquee-repetition: 4;
    }
    .fbLike {
        margin-bottom:10px;
        padding:8px 0;
        display: inline-block;
        /*margin: 0 8px;*/
    }
    .breadcrumb {
      padding: 8px 0px;
      margin-bottom: 0;
      list-style: none;
      background-color: transparent;
      border-radius: 0;
      color:#676b6c;
      font-size: 14px;
    }
    .breadcrumb > li + li:before {
        color:#ccc;
    }
    .icon { display:inline-block; }
    .appIcon,.panel-group { margin-bottom:10px; }
    .loadMore { margin:10px 0 20px 0; }    
    .loadMore .btn { border:1px #eb552b solid; color:#eb552b; }
    /* main.end. */

    /*section title*/
    .section-title-group h2 {
        border-left: 5px solid #679d2a;
        background: url("../images/img_sprite.png") 5px -65px no-repeat;
        font-size: 18px;
        text-indent: 0.5em;
        display: inline-block;
        margin-top: 10px;
    }
    section .more {float: right;margin-top: 10px;}
    .section-title-group {padding: 0 5px;}
    
    /*label*/
    .label-end {
        width: 50px;
        height: 50px;
        background: url("../images/img_sprite.png") -155px -34px no-repeat;
        position:absolute;
        bottom:0;
        right:0;
        white-space: nowrap;
        text-indent: 100%;
        overflow: hidden;
    }
    .label-spec {
        position: absolute;
        top: -3px;
        right: -5px;
        z-index: 5;
    }
    .label-spec-inner,
    .label-spec .label-spec-body,
    .label-spec .label-spec-head,
    .label-spec .label-spec-foot {
        position: relative;
        display: inline-block;
    }
    .label-spec .label-spec-body {
        background-color: #f7d022;
        color: #333;
        height: 17px;
        line-height: 18px;
        padding: 0 4px;
        margin: 0 -5px;
        font-size: 12px;
    }
    .label-spec .label-spec-head {
        background: url("../images/img_sprite.png") -139px -44px no-repeat;
        width: 4px;
        height: 23px;
        top: 5px;
    }
    .label-spec .label-spec-foot {
        background: url("../images/img_sprite.png") -138px -67px no-repeat;
        width: 6px;
        height: 19px;
        top: 5px;
    }
    /*icons*/
    .play-icon {
        font-size: 4em;
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -28px;
        margin-left: -28px;
        opacity: 0.8;
    }
    /*modal*/ 
    .modal-backdrop.in {
        filter: alpha(opacity=7);
        opacity: 0.7;
    }
    .modal-content-reset {
        background: none;
        border: 0;
        -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
        -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
    }
    .modal-body {
        padding: 10px;
        overflow: hidden;
    }
    .modal-header .modal-title {
        color: #666;
        margin-bottom: 5px;
    }
    .modal-content {
        border-radius: 0;
    }
    .modal-header p {
        color: #999
    }
    .modal-header-reset {
        padding: 10px 15px 0;
        text-align: left;
    }
    .modal-header-reset, .modal-footer-reset {
        border: 0;
    }
    .modal-header .close {
        float: right;
        margin: 0;
        font-size: 36px;
        color: #679d2a;
        font-weight: 300;
        text-shadow: none;
        opacity: 1;
    }
    /* side-menu.start. */
    .side-menu.panel-group .panel + .panel{ margin-top:-1px; }
    .side-menu.panel-group .panel { border-radius:0; }
    .side-menu li { list-style:none; line-height:20px; margin:12px 0;}
    .side-menu a { position:relative;color:#666; }
    .side-menu a.active, .side-menu a:hover,.side-event:hover { color:#679d2a; }
    /*.side-menu .caret {
        position:absolute;
        top:9px;
        right:0px;
    }*/
    .side-menu .caret {margin-top: 10px;}
    .side-menu .panel-default {
        border-color: #f7f7f7;
        font-size: 15px;
    }
    .side-menu .panel-default > .panel-heading,
    .side-event {
        background: #f7f7f7;
        padding: 0;
        margin-top: 1px;
    }
    .side-menu .panel-default > .panel-heading a,
    .side-event {padding: 10px; font-weight: 700;}
    .side-menu .panel-default > .panel-heading a:focus {
        text-decoration: none;
    }
    .side-menu .panel-default > .panel-collapse ul {
        margin: 0 15px;
    }
    .side-event {
        display: block;
        margin-bottom: 10px;
    }
    .side-event .label-hot {
        width: 19px;
        height: 19px;
        background: url(../images/img_sprite.png) -165px 0px no-repeat;
        vertical-align: middle;
        margin-bottom: 5px;
        display: inline-block;
        margin-left: 7px;
    }
    /*scroll bar*/
    .side-container::-webkit-scrollbar-track {
        /*-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);*/
        background-color: #F5F5F5;
    }
    .side-container::-webkit-scrollbar {
        width: 6px;
        background-color: #F5F5F5;
    }
    .side-container::-webkit-scrollbar-thumb {
        background-color: #b3b3b3;
    }
    /*leftRecord.start.*/
    .side-container {
        padding:0 10px 0 0;
        position:relative;
        display:block;
        max-height:300px;
        width:100%;
        overflow-y:scroll;
    }
    .side-recorded ul { padding-left:0; }
    .side-recorded li { 
        border-bottom: 1px solid #ddd;
        overflow: hidden;
        padding: 5px;
    }
    .side-recorded .side-container .book-cover {
        float: left;
        margin-right: 8px;
        width: 52px;
        height:68px;
        line-height: 64px;
        background: #fbfbfb;
        overflow: hidden;
        text-align: center;
    }
    .side-recorded .side-container .book-cover img {
        max-width: 100%;
        max-height: 68px;
        margin: 0 auto;
        text-align: center;
    }
    .side-recorded h3 {
        font-size: 13px;
        height: 1.4em;
        overflow: hidden;
        text-overflow : ellipsis;
        white-space : nowrap;
        margin: 0;
    }
    .side-recorded .side-container p {font-size: 12px;margin-bottom: 4px;}
    .side-recorded .side-container p .price-s1 {font-size: 12px;}

    /*套書底*/
    .item .book-cover-series {
        background: url(../images/bookPackage.png) center center no-repeat;
        background-size: initial;
    }
    .item .new-book-list-inner .book-cover-series img {
        max-height: 200px;
    }

    /*btn_more*/
    a.btn_more {
        width: 32px;
        height: 32px;
        line-height: 32px;
        color: #666;
        font-size: 20px;
        text-align: center;
        border: 1px solid #666;
        text-decoration: none;
        position: relative;
        display: block;
        float: right;
        cursor: pointer;
     }
     a.btn_more:hover, a.btn_more:focus {
        color: #666;
     }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
    .tabs li {
        display: inline-block;
        margin-right: 8px;
    }
    .tabs li a {
        padding: 6px 10px;
        color: #6a6a6a;
        border: 1px solid #6a6a6a;
        border-radius: 50px;
        text-decoration: none;
        display: block;
    }
    .tabs li.active a {
        background: #679d2a;
        border-color: #679d2a;
        color: #fff;
    }
    /*table begin*/
    .table-div {
        width: 100%;
        background: #fff;
        display: table;
        border-collapse: collapse;
        color: #666;
    }
    .table-div .table-tr {
        display: table-row;
        border-top: 1px solid #ddd;
    }
    .table-div .table-tr > div {
        display: table-cell;
        padding: 10px;
    }
    .table-div .table-th > div {
        font-size: 16px;
    }
    /*table end*/


    /*promotion page*/
    .promotion {
        margin-top: 0;
    }
    .card-border {
        border: 1px solid #ddd;
    }
    .card-shadow {
        position: relative;
        overflow: hidden;
        background: #fff;
        -moz-box-shadow:0 0 4px 0 rgba(0%,0%,0%,0.15);
        -webkit-box-shadow:0 0 4px 0 rgba(0%,0%,0%,0.15);
        box-shadow:0 0 4px 0 rgba(0%,0%,0%,0.15);
        margin: 4px;
        padding: 8px;
    }

    /*tabs begin*/
    .tabs-wrapper > .tab-pane {
        display: none;
    }
    .tabs-wrapper > .active {
        display: block;
    }
    /*tabs end*/

	/* 18禁頁面 */
	.adult {text-align: center;}
	.maCenter {margin-right: auto; margin-left: auto;}
	.marD30 { margin-bottom: 30px;}
	.marU50 {margin-top: 50px;}
	.teCenter {text-align: center;}
	.cont0 {width: 100%;}
	.cont7 {width: 70%;}
	a.checkBtn { margin: 0 13px; padding: 0 85px;}
	a.Mid { display: inline-block; min-height: 42px; text-align: center;}
	.wWRadius { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
	.redBtn { background-color: #f20843; color: #FFFFFF; border: #f20843 1px solid;}
	.blueBtn { background-color: #009eff; color: #FFFFFF; border: #009eff 1px solid;}
	.adult .limitImage{display:inline-block; width:160px; height:160px; background:url(../../images/adult_@2X.png) no-repeat; background-size:160px 160px;}
	.adult a.Mid {font: normal normal bold 17px/20px "微軟正黑體";}
	.adult .checkBtn {padding: 8px 0px; width: 180px;}
	.adult .cancelBtn {padding: 8px 33px; }
	.adult i.ico_18{display:inline-block; background: url('../../images/common.png') no-repeat -172px -263px; background-size: 600px 400px; width: 42px; height: 42px;}
	
    .btn-disabled {
        pointer-events: none;
        cursor: default;
        background-color: #ccc;
        border-color: #ccc;
    }

    small.subscribed-label {
        margin-left: 8px;
        padding: 2px 4px;
        border: 1px solid #679d2a;
        color: #679d2a;
        font-weight: normal;
    }

    .failure-icon {
        font-size: 36px;
        background: url(../images/ic_failure.png) 0 0 no-repeat;
        -webkit-background-size: 111px 111px;
        background-size: 111px 111px;
        width: 111px;
        height: 111px;
        /*overflow: hidden; 會導致小網畫面不置中*/
        text-indent: 100%;
        white-space: nowrap;
        margin: 0 auto;
    } 

    /*error-page*/
    .error-page {
        margin-bottom: 50px;
        min-height: 400px;
    }
    .error-page img {
        margin: 0 auto;
    }
    .error-page .error-title {
        font-size: 90px;
        color: #679d2a;
        line-height: 1;
        text-align: center;
    }
    .error-page h3 {
        line-height: 1.2;
        margin-bottom: 20px;
    }

    /*about page*/
    .list-square li {
        list-style-type: square;
        margin-left: 1em;
    }

    /*terms page*/
    .terms-subs {
        margin-left: 2em;
    }
    .terms-subs li {
        list-style-type: disc;
        margin-left: 1em;
    }
    .terms-subs li li {
        list-style-type: decimal;
    }
    /*nav 文章icon*/
    .ic-free {
        width: 22px;
        margin-right: 2px;
    }
    /*cookie*/
    body div.cookiewarning {
        display: none;
    }
    body.cookiewarning div.cookiewarning {
        padding: 8px 4px;   
        display: block;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1040;
        background-color: rgba(0,0,0,.85);

    }
    body.cookiewarning div.cookiewarning .container div {
        color: #fff;
        line-height: 20px;
        font-size: 15px;
        margin-bottom: 8px;
    }
    body.cookiewarning div.cookiewarning .container div a {
        text-decoration: underline;
        
    }
    body.cookiewarning div.cookiewarning .container .btn-basic {
        color: #679D2A;
    }
    body .removecookie {
        display: inline-block;
    }
    body.cookiewarning .removecookie {
        display: none;
    }
    /*header-app*/
    .header-app {
        background:#fff;
        height:60px;
        width:100%;
        position:fixed;
        z-index:1040;
        top: 0;
        padding:0 4px;
        /*filter: drop-shadow(0px 4px 4px rgba(0,0,0,.3));*/
    } 
    .header-app .glyphicon-remove {
        margin:21px 8px 0 0;
        float:left;
        font-size:18px;
        color:#666;
        cursor: pointer;
    }
    .header-app img {
        position:relative;
        margin:5px 0 0 5px;
        width:50px;
        height:50px;
        float: left;
    }
    .header-app p {
        float:left;
        position:relative;
        margin:0 0 0 8px;
        font-size:14px;
        line-height:60px;
        
    }
    .header-app .stars {
        margin:0;
        height:14px;
        width:88px
    }
    .header-app .btn {
        float:right;
        margin:14px 0 0 0;
        padding:6px 12px;
        font-size:13px
    }

    .btn-primary {
        background-color: #ffcc00;
        border-color: #ffcc00;
        color:#000;
        font-weight: bold; 
    }
    .btn-primary:hover {
        color:#000;
        background-color: #fbe731;
        border-color: #fbe731;
    }
    @media screen and (max-width: 767px) {
        .visible-xs {
            display: block !important;
        }
    }

 /* ______________________________________________________
 phone <400
 ______________________________________________________ */
@media screen and (min-width: 320px) and (max-width: 400px) {
    .item .new-book-list-inner .book-cover-series {
        background-size: 100% 90%;
    }
}
 /* ______________________________________________________
 phone <539
 ______________________________________________________ */
@media screen and (min-width: 320px) and (max-width: 539px) {
    .midBanner .item .banner {
        height: 0;
        padding-bottom: 43.025%;
    }
}
 /* ______________________________________________________
 phone >480
 ______________________________________________________ */
 @media (min-width: 480px) {
    /* nav */
    .nav a {
        font-size: 15px;
    }
}
 /* ______________________________________________________
 phone >640
 ______________________________________________________ */
 @media (min-width: 640px) {
    /* nav */
    header .container nav .caret {display: inline-block;margin-top: -3px;margin-left: 5px;}
    
 }
 /* ______________________________________________________
 tablet >768
 ______________________________________________________ */
 @media (min-width: 768px) {
	/* baseLayout.start. */
    body,#wrapper,#wrapper-account {background: #fff;}
    #wrapper-account main.container { margin-top: 72px;}
    section {margin-top: 20px;margin-bottom: 20px;}
    .section-title-group {padding: 0;}
    footer { padding:20px 0; margin-top:50px;background: #f5f5f5;}
    /* baseLayout.end. */

    
    .keyWordList p {
        overflow : hidden;
        text-overflow : ellipsis;
        white-space : nowrap;
        font-size:12px;
        padding:5px 0;
        text-align: left;
    }
    .breadcrumb {font-size: 16px;}
    /* header.end. */

     /* tool.member.start. */
    /*.tool li a {
        color:#676b6c;
        font-size:12px;
        line-height:16px;
    }*/
    /* tool.member.end. */

    /*header*/


    /* nav.start. */
    header .container nav .caret {display: inline-block;}
    .nav a {
        margin:0;
    }
    .nav .dropdown {
        display:inline-block;
        width:auto;
        /*margin-left:8px;*/
        margin-right:8px;
    }
    .nav .dropdown > a {
        display:block;
        padding: 15px 5px 3px;
    }
    .nav .dropdown.open>a {
        background:none; 
        color:#679d2a;
    }
    
    
     /* nav.end. */
    

    /* main.start. */
    .marquee {
        width:690px;
        height: 26px;
        display: inline-block;
        margin-bottom: 12px;
        overflow: inherit;
    }
    h1.title { color:#679d2a; padding:0; margin:0 0 20px 0;   }
    /* main.end. */

    /* footer.start. */
    footer .left {
        margin:auto 0;
    }
    footer .btn-app {
        float: left;
    }
    footer .footer-info {
        padding: 0;
    }
    footer .footer-info .info .info_list {
        width: 25%;
        min-width: 90px;
        height: auto;
        float: left;
        border-bottom: 0;
        margin-left: 30px;
        cursor: inherit;
    }
    footer .footer-info .info .info_list .info_title_open {
        background: none;
    }
    footer .footer-info .info .info_list ul {
        display: block;
    }
    footer .footer-info .info .info_list ul li {
        line-height: 30px;
    }
    /* footer.end. */
     .hidden-md {
        display: none;
    }
    .card-shadow {
        padding: 16px;
    }
    /*error-page*/
    
    .error-page .error-title {
        text-align: left;
    }
    .error-page h3 span {
        display: block;
    }
    .btn-normal {
        margin: inherit;
    }
    /*nav 文章icon*/
    .ic-free {
        width: 25px;
    }
    /*cookie*/
    body.cookiewarning div.cookiewarning {padding: 12px;}
    body.cookiewarning div.cookiewarning .container div {line-height: 34px;}
}


 /* ______________________________________________________
 desktop >992
 ______________________________________________________ */
 @media (min-width: 992px) {
    /* baseLayout.start. */
    main.container { margin-top: 120px; padding: 0; }
    /* header.start. */
    .logo {max-height:42px;}
    .search-sm {margin:0 0 0 0;}
    .tool .btn {
        width:40px;
        height:40px;
        padding:0;
        text-align:center;
        color:#a0a9aa;
        background:#fafafa;
    }
    .tool .btn i.material-icons {
        font-size:26px;
        line-height:38px;
    }
    .tool .login-face {
        width: 38px;
        height: 38px;
    }
    .tool .icon-bookshelf {margin-top: 9px;}
    /* nav.start. */
    /*.nav .dropdown-menu {
        width: 420px;
        height: auto;
        padding: 0;
        margin-top: 0;
        background: #f5f3ee;
        overflow: hidden;
    }
    .nav .dropdown-menu.caret-none { width: 210px;}
    .nav .dropdown-menu a {
        display: block;
        text-decoration: none;
        line-height: 24px;
    }
    .nav .dropdown-menu ul {
        list-style: none;
        padding-left: 0;
        margin: 0;
    }
    .nav .dropdown-menu>ul>li {width:auto;float:none;}
    .nav .dropdown-menu > ul > li > a {
        position: relative;
        padding-left: 20px;
        width: 210px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        color: #666;
        background: #FFF;
        border-bottom: 1px #efefef solid;
    }
    .nav .dropdown-menu > ul > li > a:hover {color: #679d2a;}
    .nav .dropdown-menu > ul > li > a:not(.caret-none):after {
        position: absolute;
        display: inline-block;
        content: ' ';
        border-bottom: 5px solid transparent;
        border-top: 5px solid transparent;
        border-left: 5px solid;
        height: 0;
        left: 92%;
        vertical-align: top;
        width: 0;
        margin-top: 16px;
    }
    .nav .dropdown-menu.caret-none > ul > li > a:after {display: none;}
    .nav .dropdown-menu > ul > li:last-child > a {border-bottom: 0px;}
    .nav .dropdown-menu ul ul {
        display: none;
        position: absolute;
        top: 0px;
        left: 210px;
        background: #f5f3ee;
        width: 208px;
        height: 160%;
    }
    .nav .dropdown-menu ul li:hover ul {display: block;}
    .nav .dropdown-menu > ul > li > ul > li > a {
        padding-left: 20px;
        width: 210px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        color: #666;
    }
    .nav .dropdown-menu > ul > li > ul > li > a:hover {color: #679d2a;} 
    .dropdown .dropdown-menu {
        visibility: hidden;
    }
    .dropdown:hover .dropdown-menu {
        visibility: visible;
    }
    .dropdown:hover .dropdown-menu {
        display: block;
    }
    .navbar-collapse {
        width: auto;
        border-top: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }*/
    
    /*20200504 menu*/
    /* .mainmenu .collapse ul ---------- 主場館
       .mainmenu .collapse ul ul ------- 第一層
       .mainmenu .collapse ul ul ul ---- 第二層
       .mainmenu .collapse ul ul ul ul - 第三層 */
    .mainmenu .collapse ul li:hover> ul{display:block}
    .mainmenu .collapse ul ul ul{position:absolute;top:-1px;left:100%;display:none;box-sizing: border-box;}
    .mainmenu .collapse ul ul ul ul{position:absolute;top:-1px;left:100%;display:none;z-index:1;background: #f5f3ee;}
    .mainmenu .collapse ul li,
    .mainmenu .collapse ul ul li,
    .mainmenu .collapse ul ul ul li {
        position: relative;
     }
    .mainmenu .collapse ul li a {cursor: pointer;}
    .mainmenu .collapse ul li ul li a:hover {
        color: #679d2a
    }
    /*第一層*/
        .mainmenu .collapse ul ul {
            margin-top: 0;
            padding: 0;
            border: 1px solid rgba(0,0,0,.15);
            border-radius: 4px;
            box-shadow: 0 6px 12px rgba(0,0,0,.175);
        }
        .mainmenu .collapse ul ul li a {
            /*position: relative;*/
            padding-left: 20px;
            padding-top: 0;
            padding-bottom: 0;
            width: 210px;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            color: #666;
            background: #FFF;
            border-bottom: 1px #efefef solid;     
        }
        .mainmenu .collapse ul ul li a:not(.caret-none):after {
            position: absolute;
            display: inline-block;
            content: ' ';
            border-bottom: 5px solid transparent;
            border-top: 5px solid transparent;
            border-left: 5px solid;
            height: 0;
            left: 92%;
            vertical-align: top;
            width: 0;
            margin-top: 15px;
        }
    /*第三層*/
        .mainmenu .collapse ul ul ul ul > li a:not(.caret-none):after {
            display: none
        }
        .mainmenu .collapse ul ul ul ul li a {
            background: transparent;
            border: none;
        }   
        
    
    footer .footer-info .info .info_list {
        width: 26%;
        margin-left: 26px;
    }
    .marquee {
        margin: 0 8px 12px 15px;
        width: 885px;
    }

    footer .btn-app,
    footer .app-dl {
         margin-top: 20px;
    }
    .marquee-subindex {
        padding: 0;
    }
    /*side-menu*/
    .side-recorded .side-container p .price-s1 {font-size: 16px;}
    .side-recorded .side-container .book-cover {
        margin-right: 10px;
        width: 60px;
        height:78px;
        line-height: 74px;

    }
    .side-recorded .side-container .book-cover img {
        max-height: 78px;
    }
}
  /* ______________________________________________________
 desktop >1200
 ______________________________________________________ */
 @media (min-width: 1200px) {
    .nav .dropdown > a {
        font-size: 18px;
    }
    header .tool {
        padding-left: 0;
    }
    .marquee {
        width: 1085px;
    }
}