Webslide by 20160524 kiki.chan */
 /*html,body {
    -moz-font-family: 微軟正黑體,"Open Sans",sans-serif;
}*/

 a {
   -moz-font-family: 微軟正黑體, "Open Sans", sans-serif;
 }

 a {
   -o-transition: color .2s linear, background .2s linear;
   -moz-transition: color .2s linear, background .2s linear;
   -webkit-transition: color .2s linear, background .2s linear;
   transition: color .2s linear, background .2s linear;
 }

 a:hover {
   color: #f4a13f;
   text-decoration: none;
 }

 html,
 body,
 iframe,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   margin: 0px;
   padding: 0px;
   border: 0px;
   font: inherit;
   vertical-align: baseline;
   font-weight: normal;
   font-size: 12px;
   line-height: 18px;
   font-family: 微軟正黑體, "Open Sans", sans-serif;
   -moz-font-family: 微軟正黑體, "Open Sans", sans-serif;
 }

 .cl {
   clear: both;
 }

 ul,
 ol {
   margin-top: 0px;
   margin-right: 0px;
   margin-left: 0px;
   margin-bottom: 0px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: 0px;
   list-style: none;
 }

 li {
   margin: 0px;
   padding: 0px;
 }

 textarea {
   min-height: 60px;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   padding: 5px 0px 5px 0px;
 }

 input[type="text"],
 input[type="password"],
 input[type="email"],
 textarea,
 select {
   padding: 2px 2px;
   outline: none;
   display: inline-block;
   background: #fff;
   text-indent: 1px;
   color: #2c2c2c;
   border: solid 1px #b9b9b9;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
 }

 input[type="text"]:focus,
 input[type="password"]:focus,
 input[type="email"]:focus,
 textarea:focus {
   -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .2);
   -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .2);
   box-shadow: 0 0 3px rgba(0, 0, 0, .2);
 }

 .button,
 input[type="submit"],
 input[type="reset"],
 input[type="button"] {
   cursor: pointer;
   padding: 2px 5px;
 }

 button::-moz-focus-inner,
 input::-moz-focus-inner {
   border: 0;
   padding: 0;
 }

 img,
 object,
 embed,
 video {
   border: 0 none;
   max-width: 100%;
 }

 a:focus {
   outline: none !important;
 }

 em#totalpage {
   padding: 0 5px;
 }

 .btn.disabled,
 .btn[disabled],
 fieldset[disabled] .btn {
   cursor: not-allowed;
   pointer-events: none;
   opacity: 0.45;
   background-color: rgba(102, 102, 102, 0.23);
   filter: alpha(opacity=45);
   -webkit-box-shadow: none;
   box-shadow: none;
 }

 .col-xs-1,
 .col-sm-1,
 .col-md-1,
 .col-lg-1,
 .col-xs-2,
 .col-sm-2,
 .col-md-2,
 .col-lg-2,
 .col-xs-3,
 .col-sm-3,
 .col-md-3,
 .col-lg-3,
 .col-xs-4,
 .col-sm-4,
 .col-md-4,
 .col-lg-4,
 .col-xs-5,
 .col-sm-5,
 .col-md-5,
 .col-lg-5,
 .col-xs-6,
 .col-sm-6,
 .col-md-6,
 .col-lg-6,
 .col-xs-7,
 .col-sm-7,
 .col-md-7,
 .col-lg-7,
 .col-xs-8,
 .col-sm-8,
 .col-md-8,
 .col-lg-8,
 .col-xs-9,
 .col-sm-9,
 .col-md-9,
 .col-lg-9,
 .col-xs-10,
 .col-sm-10,
 .col-md-10,
 .col-lg-10,
 .col-xs-11,
 .col-sm-11,
 .col-md-11,
 .col-lg-11,
 .col-xs-12,
 .col-sm-12,
 .col-md-12,
 .col-lg-12 {
   position: relative;
   min-height: 1px;
   padding-right: 3px;
   padding-left: 6px;
 }

 span.icon {
   padding-right: 2px;
 }

 @media screen and (min-width: 768px) {
   .col-five {
     width: 20% !important;
   }
 }

 .main_content {
   padding-top: 0px;
   min-height: 600px;
 }

 .main_content-H {
   /*padding-top: 70px;*/
   /*    min-height: 600px;*/
 }

 @media (max-width: 768px) and (min-width: 320px) {
   .main_content {
     padding-top: 53px;
     margin-right: auto;
     margin-left: auto;
     /*    padding-left: 15px;
    padding-right: 15px;*/
   }
 }

 .container {
   margin-right: auto;
   margin-left: auto;
   padding-left: 15px;
   padding-right: 15px;
   position: relative;
 }

 .btn-lg,
 .btn-group-lg>.btn {
   padding: 10px 16px;
   font-size: 18px;
   line-height: 1.33;
   border-radius: 0px;
 }

 .btn-orange {
   color: #ffffff;
   background-color: #f4a13f;
   border-color: #f4a13f;
 }

 .btn-pink {
   color: #ffffff;
   background-color: #E4007F;
   border-color: #E4007F;
 }

 .btn-CCC {
   color: #ffffff;
   background-color: #CCC;
   border-color: #CCC;
 }

 .btn-orange:hover {
   background-color: #ccc;
 }

 .btn {
   display: inline-block;
   margin: 3px;
   font-weight: normal;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
   background-image: none;

   white-space: nowrap;
   padding: 6px 15px;
   font-size: 15px;
   line-height: 1.42857143;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }

 .smiocn {
   margin: 0px 0px 10px 15px;
   border: 1px solid transform;
   width: 90%;
   display: block;
   position: absolute;
   float: left;
   bottom: 5px;
   /*text-indent: -9999px;*/
 }

 .smiocn ul {
   display: inline-block;
   position: static;
   text-align: left;
   width: 100%;
   background-color: rgba(0, 0, 0, 0);
   z-index: 1;
 }

 .smiocn ul li {
   color: #f4a13f;
   */ font-size: 14px;
   padding: 2px 4px 0px;
   display: inline-block;
   vertical-align: middle;
   background-color: rgba(255, 255, 255, 0.7);
   border-radius: 4px;
 }

 /*.smiocn .voice {
    width: 33px;
    height: 33px;
    background: url(../images/btn_voice.png) 0 0 no-repeat;
    position: absolute;
    bottom: 0;

    margin: 7px;
    text-indent: -9999px;
    cursor: pointer;
    opacity: 1;
}
.smiocn .av {
    width: 33px;
    height: 33px;
    background: url(../images/btn_av.png) 0 0 no-repeat;
    position: absolute;
    bottom: 0;

    margin: 7px;
    text-indent: -9999px;
    cursor: pointer;
    opacity: 1;
}*/
 @media (min-width: 569px) and (max-width: 1023px) {
   .smiocn ul {
     display: inline-block;
     position: static;
     text-align: left;
     width: 60%;
     background-color: rgba(0, 0, 0, 0);
     z-index: 1;
   }

   /*.smiocn .voice {
    width: 33px;
    height: 33px;
    background: url(../images/btn_voice.png) 0 0 no-repeat;
    position: absolute;
    bottom: 0;
    left: 19%;
    margin: 7px;
    text-indent: -9999px;
    cursor: pointer;
    opacity: 1;
}*/
   /*.smiocn .av {
    width: 33px;
    height: 33px;
    background: url(../images/btn_av.png) 0 0 no-repeat;
    position: absolute;
    bottom: 0;
    left: 19%;
    margin: 7px;
    text-indent: -9999px;
    cursor: pointer;
    opacity: 1;
}*/
 }

 @media (min-width: 320px) and (max-width: 568px) {
   .smiocn ul {
     display: inline-block;
     position: static;
     text-align: left;
     /*width: 60%;*/
     background-color: rgba(0, 0, 0, 0);
     z-index: 1;
   }

   /*.smiocn .voice {
    width: 33px;
    height: 33px;
    background: url(../images/btn_voice.png) 0 0 no-repeat;
    position: absolute;
    bottom: 0;
    left: 18%;
    margin: 7px;
    text-indent: -9999px;
    cursor: pointer;
    opacity: 1;
}
.smiocn .av {
    width: 33px;
    height: 33px;
    background: url(../images/btn_av.png) 0 0 no-repeat;
    position: absolute;
    bottom: 0;
    left: 18%;
    margin: 7px;
    text-indent: -9999px;
    cursor: pointer;
    opacity: 1;
}*/
 }

 /*.smiocn .voice {
    width: 33px;
    height: 33px;
    background: url(../images/btn_voice.png) 0 0 no-repeat;
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 10px;
    text-indent: -9999px;
    cursor: pointer;
    opacity: 1;
}*/
 /*.smiocn .course {
    width: 33px;
    height: 33px;
    background: url(../images/btn_course.png) 0 0 no-repeat;
    position: absolute;
    bottom: 0;
    margin: 10px;
    text-indent: -9999px;
    cursor: pointer;
    opacity: 1;
}
.smiocn .av {
    width: 33px;
    height: 33px;
    background: url(../images/btn_av.png) 0 0 no-repeat;
    position: absolute;
    bottom: 0;

    margin: 7px;
    text-indent: -9999px;
    cursor: pointer;
    opacity: 1;
}

.smiocn .voice {
    width: 33px;
    height: 33px;
    background: url(../images/btn_voice.png) 0 0 no-repeat;
    position: absolute;
    bottom: 0;

    margin: 7px;
    text-indent: -9999px;
    cursor: pointer;
    opacity: 1;
}*/

 /*=================================Pop UP=================================*/
 .close {
   float: right;
   font-size: 60px;
   font-weight: bold;
   line-height: 1;
   color: #FFF;
   text-shadow: 0 1px 0 #333;
   opacity: 1;
   filter: alpha(opacity=20);
 }

 .close:hover,
 .close:focus {
   color: #CCC;
   text-decoration: none;
   cursor: pointer;
   opacity: 0.5;
   filter: alpha(opacity=50);
 }

 button.close {
   padding: 0;
   cursor: pointer;
   background: transparent;
   border: 0;
   -webkit-appearance: none;
 }

 .modal-open {
   overflow: hidden;
 }

 .modal {
   display: none;
   overflow: hidden;
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1050;
   -webkit-overflow-scrolling: touch;
   outline: 0;
 }

 .modal.fade .modal-dialog {
   -webkit-transform: translate3d(0, -25%, 0);
   transform: translate3d(0, -25%, 0);
   -webkit-transition: -webkit-transform 0.3s ease-out;
   -moz-transition: -moz-transform 0.3s ease-out;
   -o-transition: -o-transform 0.3s ease-out;
   transition: transform 0.3s ease-out;
 }

 .modal.in .modal-dialog {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 }

 .modal-open .modal {
   overflow-x: hidden;
   overflow-y: auto;
 }

 .modal-dialog {
   position: relative;
   width: auto;
   margin: 10px;
 }

 .modal-content {
   position: relative;
   background-color: #ffffff;
   border: 2px solid #333;
   border-radius: 20px;
   -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
   box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
   background-clip: padding-box;
   outline: 0;
 }

 .modal-content h3 {
   font-weight: bold;
 }

 .modal-content small {
   color: red
 }

 .modal-content ins {
   color: blue
 }

 .sr-only01 {
   width: 10px;
   height: 50px;
   padding: 0;
   color: #333;
   cursor: pointer;
 }

 .sr-only01:hover,
 .sr-only01:active {
   color: #ccc;
 }

 .sr-only01 .icon-times {
   font-size: 24px;
   display: inline-block;
 }

 .popupmodal .lightBOX {
   font-size: 16px;
   line-height: 24px;
   margin: 10px;
 }

 .popupmodal .th {
   background-color: #EEEEEE;
   padding: 5px;
 }

 .popupmodal .td {
   background-color: #FFF;
   padding: 10px;
   overflow: hidden;
   border: 1px solid #EEE;
 }

 .popupmodal stong {
   color: #E4007F
 }

 .popupmodal .padding {
   padding: 0;
 }

 .modal-backdrop {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1040;
   background-color: #000000;
 }

 .modal-backdrop.fade {
   opacity: 0;
   filter: alpha(opacity=0);
 }

 .modal-backdrop.in {
   opacity: 0.5;
   filter: alpha(opacity=50);
 }

 .modal-header {
   padding: 15px;
   border-bottom: 1px solid #e5e5e5;
   min-height: 16.42857143px;
   border-bottom: 0;
 }

 .modal-header .close {
   margin-top: -35px;
   margin-right: -63px;
 }

 .modal-title {
   margin: 0;
   line-height: 1.42857143;
   font-size: 20px;
   text-align: center;
 }

 .popupmodal p {
   font-size: 16px;
 }

 .popupmodal .btn-00a0e9 {
   background-color: #00a0e9;
   color: #FFF;
   border-radius: 5px;
   padding: 10px;
 }

 .popupmodal .btn-949494 {
   background-color: #949494;
   color: #FFF;
   border-radius: 5px;
   padding: 10px;
 }

 .popupmodal .btn-949494:hover,
 .popupmodal .btn-00a0e9:hover {
   background-color: #333
 }

 .modal-body {
   position: relative;
   padding: 15px;
 }

 .modal-footer {
   padding: 15px;
   text-align: right;
   border-top: 1px solid #e5e5e5;
 }

 .modal-footer .btn+.btn {
   margin-left: 5px;
   margin-bottom: 0;
 }

 .modal-footer .btn-group .btn+.btn {
   margin-left: -1px;
 }

 .modal-footer .btn-block+.btn-block {
   margin-left: 0;
 }

 .modal-scrollbar-measure {
   position: absolute;
   top: -9999px;
   width: 50px;
   height: 50px;
   overflow: scroll;
 }

 /*==========================================================================*/
 /*==========================min-width: 768px================================*/
 /*==========================================================================*/
 @media (min-width: 768px) {
   .modal-dialog {
     width: 600px;
     margin: 30px auto;
   }

   .modal-content {
     -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
   }

   .modal-sm {
     width: 300px;
   }
 }

 /*==========================================================================*/
 /*==========================min-width: 992px================================*/
 /*==========================================================================*/
 @media (min-width: 992px) {
   .modal-lg {
     width: 900px;
   }
 }

 .tooltip {
   position: absolute;
   z-index: 1070;
   display: block;
   visibility: visible;
   font-size: 12px;
   line-height: 1.4;
   opacity: 0;
   filter: alpha(opacity=0);
 }

 .tooltip.in {
   opacity: 0.9;
   filter: alpha(opacity=90);
 }

 .tooltip.top {
   margin-top: -3px;
   padding: 5px 0;
 }

 .tooltip.right {
   margin-left: 3px;
   padding: 0 5px;
 }

 .tooltip.bottom {
   margin-top: 3px;
   padding: 5px 0;
 }

 .tooltip.left {
   margin-left: -3px;
   padding: 0 5px;
 }

 .tooltip-inner {
   max-width: 250px;
   padding: 3px 8px;
   color: #ffffff;
   text-align: left;
   text-decoration: none;
   white-space: pre;
   background-color: #000000;
   border-radius: 4px;
 }

 .tooltip-arrow {
   position: absolute;
   width: 0;
   height: 0;
   border-color: transparent;
   border-style: solid;
 }

 .tooltip.top .tooltip-arrow {
   bottom: 0;
   left: 50%;
   margin-left: -5px;
   border-width: 5px 5px 0;
   border-top-color: #000000;
 }

 .tooltip.top-left .tooltip-arrow {
   bottom: 0;
   left: 5px;
   border-width: 5px 5px 0;
   border-top-color: #000000;
 }

 .tooltip.top-right .tooltip-arrow {
   bottom: 0;
   right: 5px;
   border-width: 5px 5px 0;
   border-top-color: #000000;
 }

 .tooltip.right .tooltip-arrow {
   top: 50%;
   left: 0;
   margin-top: -5px;
   border-width: 5px 5px 5px 0;
   border-right-color: #000000;
 }

 .tooltip.left .tooltip-arrow {
   top: 50%;
   right: 0;
   margin-top: -5px;
   border-width: 5px 0 5px 5px;
   border-left-color: #000000;
 }

 .tooltip.bottom .tooltip-arrow {
   top: 0;
   left: 50%;
   margin-left: -5px;
   border-width: 0 5px 5px;
   border-bottom-color: #000000;
 }

 .tooltip.bottom-left .tooltip-arrow {
   top: 0;
   left: 5px;
   border-width: 0 5px 5px;
   border-bottom-color: #000000;
 }

 .tooltip.bottom-right .tooltip-arrow {
   top: 0;
   right: 5px;
   border-width: 0 5px 5px;
   border-bottom-color: #000000;
 }

 .popover {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1060;
   display: none;
   max-width: 276px;
   padding: 1px;
   text-align: left;
   background-color: #ffffff;
   background-clip: padding-box;
   border: 1px solid #cccccc;
   border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 6px;
   -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
   white-space: normal;
 }

 .popover.top {
   margin-top: -10px;
 }

 .popover.right {
   margin-left: 10px;
 }

 .popover.bottom {
   margin-top: 10px;
 }

 .popover.left {
   margin-left: -10px;
 }

 .popover-title {
   margin: 0;
   padding: 8px 14px;
   font-size: 14px;
   font-weight: normal;
   line-height: 18px;
   background-color: #f7f7f7;
   border-bottom: 1px solid #ebebeb;
   border-radius: 5px 5px 0 0;
 }

 .popover-content {
   padding: 9px 14px;
 }

 .popover>.arrow,
 .popover>.arrow:after {
   position: absolute;
   display: block;
   width: 0;
   height: 0;
   border-color: transparent;
   border-style: solid;
 }

 .popover>.arrow {
   border-width: 11px;
 }

 .popover>.arrow:after {
   border-width: 10px;
   content: "";
 }

 .popover.top>.arrow {
   left: 50%;
   margin-left: -11px;
   border-bottom-width: 0;
   border-top-color: #999999;
   border-top-color: rgba(0, 0, 0, 0.25);
   bottom: -11px;
 }

 .popover.top>.arrow:after {
   content: " ";
   bottom: 1px;
   margin-left: -10px;
   border-bottom-width: 0;
   border-top-color: #ffffff;
 }

 .popover.right>.arrow {
   top: 50%;
   left: -11px;
   margin-top: -11px;
   border-left-width: 0;
   border-right-color: #999999;
   border-right-color: rgba(0, 0, 0, 0.25);
 }

 .popover.right>.arrow:after {
   content: " ";
   left: 1px;
   bottom: -10px;
   border-left-width: 0;
   border-right-color: #ffffff;
 }

 .popover.bottom>.arrow {
   left: 50%;
   margin-left: -11px;
   border-top-width: 0;
   border-bottom-color: #999999;
   border-bottom-color: rgba(0, 0, 0, 0.25);
   top: -11px;
 }

 .popover.bottom>.arrow:after {
   content: " ";
   top: 1px;
   margin-left: -10px;
   border-top-width: 0;
   border-bottom-color: #ffffff;
 }

 .popover.left>.arrow {
   top: 50%;
   right: -11px;
   margin-top: -11px;
   border-right-width: 0;
   border-left-color: #999999;
   border-left-color: rgba(0, 0, 0, 0.25);
 }

 .popover.left>.arrow:after {
   content: " ";
   right: 1px;
   border-right-width: 0;
   border-left-color: #ffffff;
   bottom: -10px;
 }

 /*==========================================================================*/
 /*==========================min-width: 768px================================*/
 /*==========================================================================*/
 /*=================================Page View=================================*/

 .pagination {
   font-size: 17px;
   color: #6d6d6d;
   padding: 10px 0px;
   border-top: 1px solid #CCC;
   border-bottom: 1px solid #CCC;
   margin: 20px auto;
   width: 100%;
 }

 .pagination .list-inline {
   padding-left: 0;
   list-style: none;
   margin-left: -5px;
 }

 .pagination .list-inline>li,
 .pagination .list-inline>li>span,
 .pagination .list-inline>li>span>li {
   display: inline;
   padding-right: 0px !important;
   padding-left: 0px !important;
 }

 .pagination .list-inline>li>a,
 .pagination .list-inline>li>span {
   position: relative;
   float: left;
   padding: 1px 7px;
   margin: auto 4px;
   line-height: 1.42857143;
   text-decoration: none;
   color: #6d6d6d;
 }

 /* for mobile*/
 .btn-secondary {
   background-color: #FFF;
   border-color: rgba(0, 0, 0, 0.15);
   border-radius: 3px;
   border-style: solid;
   border-width: 1px;
   display: inline-block;
   font-family: inherit;
   font-size: 23px;
   height: 31px;
   text-align: center;
   user-select: none;
   white-space: nowrap;
   -webkit-tap-highlight-color: transparent;
   -webkit-appearance: none;
 }

 /* for moble*/

 .pagination .list-inline>li>.number>a,
 .pagination .list-inline>li>span {
   position: relative;
   float: left;
   padding: 6px 12px;
   margin: auto 5px;
   line-height: 1.42857143;
   text-decoration: none;
   color: #6d6d6d;
   border: #999 1px solid;
   background-color: #ffffff;
 }


 /* 分頁數字有框 */

 .number>li>a {
   border: #999 1px solid;
   color: #FFF;
 }

 .number>li>a:hover,
 .number>li>span:hover,
 .number>li>a:focus,
 .number>li>span:focus {
   color: #FFF;
   background-color: #f4a13f;
   border: #f4a13f 1px solid;
 }

 .list-inline>li>a:hover,
 .list-inline>li>span:hover,
 .list-inline>li>a:focus,
 .list-inline>li>span:focus {
   color: #ccc;
 }

 .pagination .list-inline>.active>a,
 .pagination .list-inline>.active>span,
 .pagination .list-inline>.active>a:hover,
 .pagination .list-inline>.active>span:hover,
 .pagination .list-inline>.active>a:focus,
 .pagination .list-inline>.active>span:focus {
   z-index: 2;
   color: #ffffff;
   background-color: #9A9A9A;
   border-color: #9A9A9A;
   cursor: default;
 }

 .pagination .list-inline>.disabled>span,
 .pagination .list-inline>.disabled>span:hover,
 .pagination .list-inline>.disabled>span:focus,
 .pagination .list-inline>.disabled>a,
 .pagination .list-inline>.disabled>a:hover,
 .pagination .list-inline>.disabled>a:focus {
   display: none;
 }

 .pagination-lg .list-inline>li>a,
 .pagination-lg .list-inline>li>span {
   padding: 10px 16px;
   font-size: 18px;
 }

 .pagination-sm .list-inline>li>a,
 .pagination-sm .list-inline>li>span {
   padding: 5px 10px;
   font-size: 12px;
 }

 /*================================= footer-forTT =================================*/
 .Footer {
   clear: both;
   background: #e9e9e9;
   font-size: 11px !important;
   color: #272727 !important;
   min-width: 980px;
   font-family: Arial;
   padding: 5px 10px;
   position: relative;
 }

 .Footer:before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 6px;
   background: #5c5c5c;
   border-bottom: 1px solid #a7a7a7;
 }

 .Footer a:hover {
   color: #0066d3;
   text-decoration: underline;
   cursor: pointer
 }

 .Footer .footerBlk {
   margin: 0 auto;
   width: 980px;
 }

 .Footer .footerBlk .Blk01 {
   background: url(../images/public/line_v.gif) repeat-x bottom left;
   overflow: hidden;
 }

 .Footer .footerBlk .L_Col {
   float: left;
   width: 595px;
   background: url(../images/public/line_h.gif) right center repeat-y;
   margin: 15px 0 20px 0;
 }

 .Footer .footerBlk .Blk01 .L_Col .infoblk {
   margin-top: 7px;
 }

 .Footer .footerBlk .Blk01 .L_Col .infoListItem:first-child {
   margin-bottom: 10px;
 }

 .Footer .footerBlk .Blk01 .L_Col .infoListItem.icon01 {
   background-position: left -720px;
 }

 .Footer .footerBlk .Blk01 .L_Col .infoListItem {
   clear: both;
   background: url(../images/public/symbol_01.png) no-repeat;
   padding-left: 38px;
   height: 30px;
 }

 .Footer .footerBlk .Blk01 .L_Col .infoListItem span {
   display: table-cell;
   vertical-align: middle;
   height: 30px;
 }

 .Footer .footerBlk .Blk01 .L_Col .infoListItem.icon02 {
   background-position: left -760px;
 }

 .Footer .footerBlk .infoblk a {
   color: #0066d3;
 }

 .Footer .footerBlk .Blk01 .R_Col {}

 .Footer .footerBlk .R_Col {
   float: right;
   margin: 15px 20px 20px 0;
 }

 .Footer .footerBlk .Blk01 .R_Col .otherLink:first-child {
   margin-left: 0;
 }

 .Footer .footerBlk .Blk01 .R_Col .otherLink {
   display: inline-block;
   margin-left: 35px;
 }

 .Footer .footerBlk .Blk01 .R_Col .otherLink .title11 {
   padding-bottom: 25px;
 }

 .Footer .footerBlk .Blk01 .R_Col .otherLink .icon.Facebook {
   background-position: -3px -483px;
 }

 .Footer .footerBlk .Blk01 .R_Col .otherLink .icon {
   display: inline-block;
   margin-right: 5px;
   background: url(../images/public/symbol_01.png) left top no-repeat;
   width: 24px;
   height: 24px;
 }

 .Footer .footerBlk .Blk01 .R_Col .otherLink .icon.google {
   background-position: -3px -1553px;
 }

 .Footer .footerBlk .Blk01 .R_Col .otherLink .icon {
   display: inline-block;
   margin-right: 5px;
   background: url(../images/public/symbol_01.png) left top no-repeat;
   width: 24px;
   height: 24px;
 }

 .Footer .footerBlk .Blk01 .R_Col .otherLink .icon.Twitter {
   background-position: -3px -523px;
 }

 .Footer .footerBlk .Blk01 .R_Col .otherLink .icon {
   display: inline-block;
   margin-right: 5px;
   background: url(../images/public/symbol_01.png) left top no-repeat;
   width: 24px;
   height: 24px;
 }

 .Footer .footerBlk .Blk01 .R_Col .otherLink .icon.Youtube {
   background-position: -3px -563px;
 }

 .Footer .footerBlk .Blk01 .R_Col .otherLink .icon {
   display: inline-block;
   margin-right: 5px;
   background: url(../images/public/symbol_01.png) left top no-repeat;
   width: 24px;
   height: 24px;
 }

 .Footer .footerBlk .Blk01 .R_Col .otherLink .icon.In {
   background-position: -3px -603px;
 }

 .Footer .footerBlk .Blk01 .R_Col .otherLink .icon {
   display: inline-block;
   margin-right: 5px;
   background: url(../images/public/symbol_01.png) left top no-repeat;
   width: 24px;
   height: 24px;
 }

 .Footer .footerBlk .Blk01 .R_Col .otherLink {
   display: inline-block;
   margin-left: 35px;
 }

 .Footer .footerBlk .Blk01 .R_Col .otherLink .title11 {
   padding-bottom: 25px;
 }

 .Footer .footerBlk .Blk01 .R_Col .otherLink .icon.Apple {
   background-position: -3px -643px;
 }

 .Footer .footerBlk .Blk01 .R_Col .otherLink .icon {
   display: inline-block;
   margin-right: 5px;
   background: url(../images/public/symbol_01.png) left top no-repeat;
   width: 24px;
   height: 24px;
 }

 .Footer .footerBlk .Blk01 .R_Col .otherLink .icon.Android:hover,
 .Footer .footerBlk .Blk01 .R_Col .otherLink .icon.Android:hover,
 .Footer .footerBlk .Blk01 .R_Col .otherLink .icon.Facebook:hover,
 .Footer .footerBlk .Blk01 .R_Col .otherLink .icon.google:hover,
 .Footer .footerBlk .Blk01 .R_Col .otherLink .icon.Twitter:hover,
 .Footer .footerBlk .Blk01 .R_Col .otherLink .icon.Youtube:hover,
 .Footer .footerBlk .Blk01 .R_Col .otherLink .icon.In:hover,
 .Footer .footerBlk .Blk01 .R_Col .otherLink .icon.Apple:hover {
   opacity: 0.7;
 }

 .Footer .footerBlk .Blk01 .R_Col .otherLink .icon.Apple {
   background-position: -3px -643px;
 }

 .Footer .footerBlk .Blk01 .R_Col .otherLink .icon.Android {
   background-position: -3px -683px;
 }

 .Footer .footerBlk .Blk01 .R_Col .otherLink .icon {
   display: inline-block;
   margin-right: 5px;
   background: url(../images/public/symbol_01.png) left top no-repeat;
   width: 24px;
   height: 24px;
 }

 .Footer .footerBlk .Blk02 {
   overflow: hidden;
 }

 .Footer .footerBlk .L_Col {
   float: left;
   width: 595px;
   background: url(../images/public/line_h.gif) right center repeat-y;
   margin: 15px 0 20px 0;
 }

 .Footer .footerBlk .R_Col {
   float: right;
   margin: 15px 20px 20px 0;
 }

 .Footer .footerBlk .Blk02 .R_Col .logoLink {
   position: relative;
 }

 .Footer .footerBlk .Blk02 .R_Col .logoLink a {
   margin: 0 0 0 25px;
 }

 .Footer .footerBlk .copyrightBlk {
   margin: 0;
   text-align: center;
 }

 .Footer .footerBlk .copyrightBlk p {
   margin: 0 0 0px;
 }

 .Footer .footerBlk .copyrightBlk a,
 .Footer .footerBlk .copyrightBlk a:link {
   outline: 0;
   text-decoration: none;
   color: #333;
   cursor: pointer;
 }

 .Footer .footerBlk .copyrightBlk a:hover {
   color: #0066d3;
   text-decoration: underline;
   cursor: pointer;
 }

 .Footer .footerBlk .copyrightBlk ul {
   margin-bottom: 10px;
 }

 .Footer .footerBlk .copyrightBlk li:first-child {
   border: 0;
 }

 .Footer .footerBlk .copyrightBlk li {
   display: inline-block;
   padding: 0 7px 0 10px;
   border-left: 1px solid #333;
   line-height: 10px;
 }


 @media screen and (max-width: 768px) {
   .Footer {
     clear: both;
     background: #e9e9e9;
     font-size: 11px !important;
     color: #272727;
     min-width: 300px !important;
     width: 100% !important;
     padding: 5px 0 !important;
     margin-top: 10px;
     position: relative;
   }

   .Footer:before {
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 6px;
     background: #5c5c5c;
     border-bottom: 1px solid #a7a7a7;
   }

   .Footer .footerBlk {
     margin: 0 auto;
     width: 100% !important;
   }

   .Footer .footerBlk .Blk01 {
     background: 0;
     overflow: hidden;
   }

   .Footer .footerBlk .Blk01 .L_Col {
     float: none;
     width: auto;
     background: 0;
     margin: 15px 10px 10px 10px !important;
   }

   .Footer .footerBlk .Blk01 .R_Col {
     float: left;
     margin: 10px 10px 5px 10px;
   }

   .Footer .footerBlk .Blk01 .L_Col .infoblk {
     margin-top: 7px;
   }

   .Footer .footerBlk .Blk01 .L_Col .infoListItem:first-child {
     margin-bottom: 10px;
   }

   .Footer .footerBlk .Blk01 .L_Col .infoListItem {
     clear: both;
     background: none !important;
     padding-left: 0 !important;
     height: auto !important;
   }

   .Footer .footerBlk .Blk01 .L_Col .icon02 {
     padding-top: 4px;
   }

   .Footer .footerBlk .Blk01 .L_Col .infoListItem.icon02:before {
     content: "";
     height: 45px;
     width: 35px;
     background: url(../images/public/symbol_01.png) no-repeat;
     background-position: left -754px;
     display: inline-block;
     float: left;
   }

   .Footer .footerBlk .Blk01 .L_Col .infoListItem.icon01:before {
     content: "";
     height: 55px;
     width: 35px;
     background: url(../images/public/symbol_01.png) no-repeat;
     background-position: left -707px;
     display: inline-block;
     float: left;
   }

   .Footer .footerBlk .Blk01 .L_Col .infoListItem.icon01:before {
     content: "";
     height: 55px;
     width: 35px;
     background: url(../images/public/symbol_01.png) no-repeat;
     background-position: left -707px;
     display: inline-block;
     float: left;
   }

   .Footer .footerBlk .Blk01 .L_Col .infoListItem span {
     display: table-cell;
     vertical-align: top;
     height: 30px !important;
   }

   .Footer .footerBlk .infoblk a {
     color: #0066d3;
   }

   .Footer .footerBlk .Blk01 .L_Col .infoListItem {
     clear: both;
     background: none !important;
     padding-left: 0 !important;
     height: auto !important;
   }

   .Footer .footerBlk .Blk02 {
     display: none;
   }

   .Footer .footerBlk .Blk01 .R_Col .otherLink:nth-child(3) {
     display: none;
   }

   .Footer .footerBlk .Blk01 .R_Col .otherLink {
     display: inline-block;
     margin-left: 35px;
   }

   .Footer .footerBlk .Blk01 .L_Col .icon02 {
     padding-top: 4px;
   }

   .Footer .footerBlk .Blk01 .R_Col .otherLink .title11 {
     padding-bottom: 5px !important;
   }

   .Footer .footerBlk .Blk01 .R_Col {
     float: left;
     margin: 10px 10px 5px 10px;
   }

   .Footer .footerBlk .Blk01 .R_Col .otherLink {
     display: inline-block;
     margin-left: 35px;
   }

   .Footer .footerBlk .Blk01 .R_Col .otherLink:first-child {
     margin-left: 0;
   }

   .Footer .footerBlk .Blk01 .R_Col .otherLink {
     display: inline-block;
     margin-left: 35px;
   }

   .Footer .footerBlk .Blk01 .R_Col {
     float: left;
     margin: 10px 10px 5px 10px;
   }

 }

 .copyright {
   color: #434343;
   font-size: 13px;
   font-weight: bold;
   padding-top: 6px;
   padding-bottom: 1px;
   margin: 0;
   /*border-top: 1px solid #3f3f3f;*/
   background-color: #b9b9b9;
 }

 .footer-forTT .list-inline {
   padding-left: 0;
   margin-left: -7px;
   /*margin-top: 10px;*/
   list-style: none;
 }

 .footer-forTT .list-inline .qrcode {
   margin-top: 2px;
   text-align: center;
   background-repeat: no-repeat;

 }

 @media only screen and (min-width: 400px) {
   .footer-forTT .list-inline .qrcode {
     margin-top: 2px;
     text-align: center;
   }
 }

 .footerLanguege {
   padding: 6px 0;
   display: block;
   width: 100%;
   border-top: 1px solid;
   background-color: #dadada;
   color: #777;
 }

 .footerLanguege .select {
   font-size: 17px;
   font-family: sans-serif;
   width: 50%;
   border: none;
   border-radius: 4px;
   -webkit-background-color: #CCC;
   background-color: #CCC;
 }


 /*================================= Footer =================================*/
 .footer {
   background-color: #E5E5E5;
   /*border-top: 0px solid #1b1b1b;*/
   font-family: 微軟正黑體, "Open Sans", sans-serif;
   margin-top: 40px;
   color: #000;
 }

 .footer .footer-block {
   padding: 20px 0px 10px 0;
   margin: 0;
   font-size: 15px;
 }

 .footer p {
   margin-top: 0px;
   line-height: 24px;
   font-size: 13px;
 }

 .footer .footer-block ul {
   margin-right: 10px;
   font-size: 14px;
   line-height: 24px;
   float: left;
 }

 .footer .footer-block ul a {
   font-size: 13px;
   text-decoration:
     blink;
   color: #707070;

 }

 .footer .footer-block ul a:hover {
   color: #f4a13f
 }

 @media screen and (min-width: 1024px) {
   .footer .footer-block .footerR {
     border-left: 1px solid #FFF;
     padding-left: 18px;
   }
 }

 .footer .footer-block .footerR {
   /* padding-left: 18px; */
   margin-top: 10px;
   padding-top: 10px;
 }

 .copyright {
   color: #434343;
   font-size: 13px;
   font-weight: bold;
   padding-top: 6px;
   padding-bottom: 1px;
   margin: 0;
   /*border-top: 1px solid #3f3f3f;*/
   background-color: #b9b9b9;
 }

 .footer .list-inline {
   padding-left: 0;
   margin-left: -7px;
   /*margin-top: 10px;*/
   list-style: none;
 }

 .footer .list-inline .qrcode {
   margin-top: 2px;
   text-align: center;
   background-repeat: no-repeat;

 }

 @media only screen and (min-width: 400px) {
   .footer .list-inline .qrcode {
     margin-top: 2px;
     text-align: center;
   }
 }

 .footerLanguege {
   padding: 6px 0;
   display: block;
   width: 100%;
   border-top: 1px solid;
   background-color: #dadada;
   color: #777;
 }

 .footerLanguege .select {
   font-size: 17px;
   font-family: sans-serif;
   width: 50%;
   border: none;
   border-radius: 4px;
   -webkit-background-color: #CCC;
   background-color: #CCC;
 }

 /*================================= Menu =================================*/
 .wsmenu .megamenu .test {
   background-color: #acd598;
   color: #333;
   padding: 10px;
   margin: 5px;

 }

 .wsmenu .megamenu .test a,
 .wsmenu .megamenu .Audiobook a {
   text-decoration: none;
   color: #333;
 }

 .wsmenu .megamenu .test:hover,
 .wsmenu .megamenu .Audiobook:hover {
   background-color: #CCC;

 }

 .wsmenu .megamenu .Audiobook {
   background-color: #f19ec2;
   color: #333;
   padding: 15px;
   margin: 5px;

 }

 .wsmenu .megamenu .test h4,
 .wsmenu .megamenu .Audiobook h4 {
   font-size: 18px;
   line-height: 28px;
   font-weight: bold;
 }

 .wsmenu .megamenu .test p,
 .wsmenu .megamenu .Audiobook p {
   font-size: 14px;
   line-height: 20px;
 }

 .wsmenu-list span.icon.icon-android-menu {
   font-size: 29px;
   color: #FFF;
   vertical-align: middle;
 }

 /*===================== MENU FOR Hmenu (Yello bar)===========================*/
 /**********(".class"-"H")**********/
 .header-H {
   border-top-color: #303030;
   border-top-style: solid;
   border-top-width: 3px;
 }

 .logo-H {
   max-width: 1237px;
   margin: 0 auto;
   /* z-index: 100; */
   position: relative;
 }

 .logo-H .idxlink {
   /* width: 336px; */
   /* background-size: 100%; */
   height: 80px;
   display: block;
   /* background: url(../images/logo.png) no-repeat; */
 }

 .toplinkBar2 {
   position: absolute;
   right: 0;
   top: 15px;
   margin-right: 50px;
   z-index: 1;
 }

 /**********(wsmenu-H)**********/


 .wsmenu-H {
   font-family: "微軟正黑體", "Open Sans", sans-serif;
   color: #fff;
   font-size: 13px;
   padding: 0px;
   margin-bottom: 10px;
   background-color: #f7f7f7;
   /*top: 70px;*/
   position: static;
   float: right;
 }

 .wsmenu-H {
   font-family: "微軟正黑體", "Open Sans", sans-serif;
   color: #fff;
   font-size: 13px;
   padding: 0px;
   margin-bottom: 10px;
   background-color: #f7f7f7;
   /*top: 70px;*/
   position: static;
   float: right;
 }

 .wsmenu-H-list {
   /*text-align:left;*/
   margin: 0 auto 0 auto;
   display: table;
   padding: 0px;

 }

 .wsmenu-H-list>li {
   text-align: center;
   display: table-cell;
   padding-left: 10px;
 }


 .wsmenu-H-list li:first-child a {}

 .wsmenu-H-list li:last-child a {}

 .wsmenu-H-list>li>a .fa {
   display: inline-block;
   font-size: 14px;
   line-height: inherit;
   margin-right: 4px;
 }

 .wsmenu-H-list li ul li a .fa.fa-angle-double-right {
   font-size: 12px;
   margin: 0 3px 0 -4px;
 }

 .wsmenu-H-list li a .arrow:after {
   border-left: 4px solid rgba(0, 0, 0, 0);
   border-right: 4px solid rgba(0, 0, 0, 0);
   border-top: 4px solid #b3b3b3;
   content: "";
   float: right;
   height: 0;
   margin: 0 0 0 9px;
   position: absolute;
   text-align: right;
   top: 22px;
   width: 0;
 }

 /* 書籍分類 item  Main MENU */

 /* scrolling-nav.css */
 @media screen and (max-device-width: 1024px) {
   .wsmenu-H-list>li>a {
     font-size: 17px !important;
     padding: 10px 8px 10px 2px !important;
   }
 }

 .wsmenu-H-list>li>a {
   display: block;
   color: #555;
   font-size: 18px;
   font-family: "微軟正黑體", "Open Sans", sans-serif;
   font-weight: bold;
   padding: 10px 14px;
   line-height: 48px;
   text-decoration: none;
   position: relative;
   /*background-color: rgba(244,161,63,1) !important;*/
 }

 .wsmenu-H-list li a:hover .arrow:after {
   border-top-color: #b3b3b3
 }

 .wsmenu-H-list li a.active .arrow:after {
   border-top-color: #b3b3b3
 }

 .wsmenu-H-list li:hover>a .arrow:after {
   border-top-color: #b3b3b3
 }


 /*For megamenu desktop */
 .wsmenu-H-list li:hover .megamenu {
   opacity: 1;
 }

 /*950*/
 .wsmenu-H-list .ad-style {
   width: 28%;
   float: right;
 }

 .wsmenu-H-list .ad-style a {
   border: none !important;
   padding: 0px !important;
   margin: 0px !important;
   line-height: normal !important;
   background-image: none !important;
 }

 .mobile-sub .megamenu .ad-style a:hover {
   background-color: transparent !important;
 }

 .wsmenu-H-list .megamenu li:hover>a {
   background: transparent !important;
 }

 .wsmenu-H-list .megamenu li a:hover {
   background: #eee !important;
   text-decoration: none;
 }

 .wsmenu-H-list .megamenu li .fa {
   margin-right: 5px;
   text-align: center;
   width: 18px;
 }

 /*Animation*/
 .wsmenu-H-list li>.wsmenu-H-submenu {
   transform-style: preserve-3d;
   -o-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
   transform: rotateX(-75deg);
   -o-transform: rotateX(-75deg);
   -moz-transform: rotateX(-75deg);
   -webkit-transform: rotateX(-75deg);
   visibility: hidden;
 }

 .wsmenu-H-list li:hover>.wsmenu-H-submenu {
   transform: rotateX(0deg);
   -o-transform: rotateX(0deg);
   -moz-transform: rotateX(0deg);
   -webkit-transform: rotateX(0deg);
   opacity: 1;
   visibility: visible;
 }

 .wsmenu-H-submenu li>.wsmenu-H-submenu-sub {
   transform-style: preserve-3d;
   -o-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
   transform: rotateX(-75deg);
   -o-transform: rotateX(-75deg);
   -moz-transform: rotateX(-75deg);
   -webkit-transform: rotateX(-75deg);
   visibility: hidden;
 }

 .wsmenu-H-submenu li:hover>.wsmenu-H-submenu-sub {
   transform: rotateX(0deg);
   -o-transform: rotateX(0deg);
   -moz-transform: rotateX(0deg);
   -webkit-transform: rotateX(0deg);
   opacity: 1;
   visibility: visible;
 }

 .wsmenu-H-submenu-sub li>.wsmenu-H-submenu-sub-sub {
   transform-style: preserve-3d;
   -o-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
   transform: rotateX(-75deg);
   -o-transform: rotateX(-75deg);
   -moz-transform: rotateX(-75deg);
   -webkit-transform: rotateX(-75deg);
   visibility: hidden;
 }

 .wsmenu-H-submenu-sub li:hover>.wsmenu-H-submenu-sub-sub {
   transform: rotateX(0deg);
   -o-transform: rotateX(0deg);
   -moz-transform: rotateX(0deg);
   -webkit-transform: rotateX(0deg);
   opacity: 1;
   visibility: visible;
 }


 .wsmenu-H-list li>.megamenu {
   transform-style: preserve-3d;
   -o-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
   transform: rotateX(-75deg);
   -o-transform: rotateX(-75deg);
   -moz-transform: rotateX(-75deg);
   -webkit-transform: rotateX(-75deg);
   visibility: hidden;
 }

 .wsmenu-H-list li:hover>.megamenu {
   transform: rotateX(0deg);
   -o-transform: rotateX(0deg);
   -moz-transform: rotateX(0deg);
   -webkit-transform: rotateX(0deg);
   opacity: 1;
   visibility: visible;
 }


 /* Submenu CSS */
 .wsmenu-H-submenu {
   position: absolute;
   /*top: 110px;
  原版60*/
   /*min-width: 120px;*/
   z-index: 1000;
   margin: 0px;
   padding: 2px;
   border-bottom: solid 3px #B9B9B9;
   background-color: #fff;
   opacity: 0;
   -o-transform-origin: 0% 0%;
   -ms-transform-origin: 0% 0%;
   -moz-transform-origin: 0% 0%;
   -webkit-transform-origin: 0% 0%;
   -o-transition: -o-transform 0.3s, opacity 0.3s;
   -ms-transition: -ms-transform 0.3s, opacity 0.3s;
   -moz-transition: -moz-transform 0.3s, opacity 0.3s;
   -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
 }

 .wsmenu-H-submenu li a {
   background: #fff !important;
   background-image: none !important;
   color: #666666 !important;
   border-right: 0 none !important;
   text-align: left;
   display: block;
   line-height: 22px;
   padding: 6px 12px;
   text-transform: none;
   font-size: 15px;
   letter-spacing: normal;
   border-right: 0px solid;
 }

 .wsmenu-H-submenu li {
   position: relative;
   margin: 0px;
   padding: 0px;
 }

 .wsmenuexpandermain {
   display: none;
 }

 .wsmenu-H-list li:hover .wsmenu-H-submenu {
   display: block;
 }

 .wsmenu-H-list .wwsmenu-H-submenu .wsmenu-H-submenu-sub {
   min-width: 220px;
   position: absolute;
   left: 90%;
   top: 0;
   margin: 0px;
   padding: 0px;
   opacity: 0;
   -o-transform-origin: 0% 0%;
   -ms-transform-origin: 0% 0%;
   -moz-transform-origin: 0% 0%;
   -webkit-transform-origin: 0% 0%;
   -o-transition: -o-transform 0.4s, opacity 0.4s;
   -ms-transition: -ms-transform 0.4s, opacity 0.4s;
   -moz-transition: -moz-transform 0.4s, opacity 0.4s;
   -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
 }

 .wsmenu-H-list .wsmenu-H-submenu li:hover .wsmenu-H-submenu-sub {
   opacity: 1;
   list-style: none;
   padding: 2px;
   border: solid 1px #eeeeee;
   background-color: #fff;
 }

 .wsmenu-H-list .wsmenu-H-submenu li:hover .wsmenu-H-submenu-sub {
   display: block;
 }

 .wsmenu-H-list .wsmenu-H-submenu .wsmenu-H-submenu-sub .wsmenu-H-submenu-sub-sub {
   min-width: 220px;
   position: absolute;
   left: 90%;
   top: 0;
   margin: 0px;
   padding: 0px;
   opacity: 0;
   -o-transform-origin: 0% 0%;
   -ms-transform-origin: 0% 0%;
   -moz-transform-origin: 0% 0%;
   -webkit-transform-origin: 0% 0%;
   -o-transition: -o-transform 0.4s, opacity 0.4s;
   -ms-transition: -ms-transform 0.4s, opacity 0.4s;
   -moz-transition: -moz-transform 0.4s, opacity 0.4s;
   -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
 }

 .wsmenu-H-list .wsmenu-H-submenu .wsmenu-H-submenu-sub li:hover .wsmenu-H-submenu-sub-sub {
   opacity: 1;
   list-style: none;
   padding: 2px;
   border: solid 1px #eeeeee;
   background-color: #fff;
 }

 .wsmenu-H-submenu li {
   position: relative;
   padding: 0px;
   margin: 0px;
   display: block;
 }

 .wsmenu-H-click {
   display: none;
 }

 .wsmenu-H-click02 {
   display: none;
 }

 /* Default Theme 10/20調整 */
 .wsmenu-H-list li:hover>a {
   background-color: rgba(119, 119, 119, 0.14) !important;
   text-decoration: none;
 }

 .wsmenu-H-list>li>a:hover {
   background-color: rgba(119, 119, 119, 0.14) !important;
   text-decoration: none;
 }

 .wsmenu-H-list>li>a.active {
   background-color: #777 !important;
   text-decoration: none;
 }

 .wsmenu-H-submenu>li>a:hover {
   background-color: #e7e7e7 !important;
   border-radius: 0px !important;
   text-decoration: none;
   text-decoration: none;
 }

 .typography-text {
   padding: 0px 0px;
   font-size: 15px;
 }

 .typography-text p {
   text-align: justify;
   line-height: 24px;
   color: #656565;
 }

 .typography-text ul li {
   display: block;
   padding: 2px 0px;
   line-height: 22px;
 }

 .typography-text ul li a {
   color: #656565;
 }

 .hometext {
   display: none;
 }

 .wsmenu-H-submenu .fa {
   /*margin-right:7px;*/
 }


 @media only screen and (min-width:780px) and (max-width:1023px) {
   .wsmenu-H-list>li>a>.fa {
     display: none !important;
   }

   .hometext {
     display: block !important;
   }

   .wsmenu-H {
     /*width:100%;*/
     font-size: 13px !important;
     /*position:relative*/
     ;
   }

   .bigmegamenu {
     position: static !important;
   }

   .wsmenu-H-list li a {
     white-space: nowrap !important;
     padding-left: 4px !important;
     padding-right: 10px !important;
   }

   .megacollink {
     width: 48%;
     margin: 1% 1%;
   }

   .typographylinks {
     width: 48%;
     margin: 1% 1%;
   }


 }




 @media only screen and (min-width: 781px) {

   .wsmenu-H-list li:hover>.wsmenu-H-submenu {
     display: block !important;
   }

   .wsmenu-H-submenu li:hover>.wsmenu-H-submenu-sub {
     display: block !important;
   }

   .wsmenu-H-submenu-sub li:hover>.wsmenu-H-submenu-sub-sub {
     display: block !important;
   }

   .wsmenu-H-list li:hover>.megamenu {
     display: block !important;
   }

   .wsmenu-H-list li:hover>.megamenu2 {
     display: none !important;
   }

 }


 /*------------------------------------ Mobile CSS ---------------------------------------------*/
 @media only screen and (max-width: 780px) {
   .wsoffcanvasopener .wsmenu-H {
     right: 0px;
     -webkit-transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
     -o-transition: all 0.4s ease-in-out;
     -ms-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
   }

   .wsmenu-Hcontainer.wsoffcanvasopener {
     display: block;
     margin-right: 240px;
   }

   .wsmobileheader {
     display: block !important;
     position: relative;
     top: 0;
     right: 0;
     left: 0;
     -webkit-transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
     -o-transition: all 0.4s ease-in-out;
     -ms-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;

   }


   .wsmenu-H-list>li:hover>a {
     background-color: rgba(0, 0, 0, 0.08) !important;
     text-decoration: none;
   }

   .hometext {
     display: inline-block !important;
   }

   .megacollink {
     width: 96% !important;
     margin: 0% 2% !important;
   }

   .megacolimage {
     width: 90% !important;
     margin: 0% 5% !important;
   }

   .typographylinks {
     width: 98% !important;
     margin: 0% 1% !important;
   }

   .typographydiv {
     width: 86% !important;
     margin: 0% 7% !important;
   }

   .mainmapdiv {
     width: 90% !important;
     margin: 0% 5% !important;
   }

   .overlapblackbg {
     left: 0;
     z-index: 102;
     width: 100%;
     height: 100%;
     position: fixed;
     top: 0;
     display: none;
     background-color: rgba(0, 0, 0, 0.45);
     cursor: pointer;
   }

   .wsoffcanvasopener .overlapblackbg {
     display: block !important;
   }

   /* Default Theme */
   .wsmenu-H-submenu>li:hover>a {
     background-color: #7b7b7b;
     color: #666666;
   }

   .wsmenu-H>.wsmenu-H-list>li>a.active {
     color: #666666;
     background-color: rgba(0, 0, 0, 0.08);
   }

   .wsmenu-H>.wsmenu-H-list>li>a:hover {
     color: #666666;
     background-color: rgba(0, 0, 0, 0.08);
   }

   .wsmenu-H-list li:hover .wsmenu-H-submenu {
     display: none;
   }

   .wsmenu-H-list li:hover .wsmenu-H-submenu .wsmenu-H-submenu-sub {
     display: none;
   }

   .wsmenu-H-list .wsmenu-H-submenu .wsmenu-H-submenu-sub li:hover .wsmenu-H-submenu-sub-sub {
     display: none;
     list-style: none;
     padding: 2px;
     border: solid 1px #eeeeee;
     background-color: #fff;
   }

   .wsmenu-H-list li:first-child a {
     -webkit-border-radius: 0px 0px 0px 0px;
     -moz-border-radius: 0px 0px 0px 0px;
     border-radius: 0px 0px 0px 0px;
   }

   .wsmenu-H-list li:last-child a {
     -webkit-border-radius: 0px 4px 0px 0px;
     -moz-border-radius: 0px 0px 0px 0px;
     border-radius: 0px 0px 0px 0px;
     border-right: 0px solid;
   }

   .innerpnd {
     padding: 0px !important;
   }

   .typography-text {
     padding: 10px 0px;
   }

   .wsmenu-Hcontainer {
     overflow: hidden;
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -ms-backface-visibility: hidden;
     /*min-height:800px;*/
     -webkit-transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
     -o-transition: all 0.4s ease-in-out;
     -ms-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
   }



   /* Mobile click to drop arrow */
   .wsmenu-H-click {
     height: 43px;
     position: absolute;
     top: 0;
     right: 0;
     display: block;
     cursor: pointer;
     width: 100%;
   }

   .wsmenu-H-click i {
     display: block;
     height: 23px;
     width: 25px;
     margin-top: 11px;
     margin-right: 8px;
     background-size: 25px;
     font-size: 21px;
     color: rgba(0, 0, 0, 0.25);
     float: right;
   }


   .wsmenu-H-click02 {
     height: 43px;
     position: absolute;
     top: 0;
     right: 0;
     display: block;
     cursor: pointer;
     width: 100%;
   }

   .wsmenu-H-click02 i {
     display: block;
     height: 23px;
     width: 25px;
     margin-top: 11px;
     margin-right: 8px;
     background-size: 25px;
     font-size: 21px;
     color: rgba(0, 0, 0, 0.25);
     float: right;
   }

   .ws-activearrow>i {
     transform: rotate(180deg);
   }

   .wsmenu-H-rotate {
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
     -ms-transform: rotate(180deg);
     -o-transform: rotate(180deg);
     transform: rotate(180deg);
   }

   /*2nd UL Style*/
   .wsmenu-H-submenu-sub {
     width: 100% !important;
     position: static !important;
     left: 100% !important;
     top: 0 !important;
     display: none;
     margin: 0px !important;
     padding: 0px !important;
     border: solid 0px !important;
     transform: none !important;
     opacity: 1 !important;
     visibility: visible !important;
   }

   .wsmenu-H-submenu-sub li {
     margin: 0px 0px 0px 0px !important;
     padding: 0px;
     position: relative;
   }

   .wsmenu-H-submenu-sub a {
     display: block;
     padding: 10px 25px 10px 25px;
     border-bottom: solid 1px #ccc;
     font-weight: normal;
   }

   .wsmenu-H-submenu-sub li a.active {
     color: #000 !important;
   }

   .wsmenu-H-submenu-sub li:hover>a {
     background-color: #333333 !important;
     color: #fff;
   }

   .wsmenu-H-list>li>a .fa {
     margin-right: 6px;
   }

   .wsmenu-H-submenu-sub-sub {
     width: 100% !important;
     position: static !important;
     left: 100% !important;
     top: 0 !important;
     display: none;
     margin: 0px !important;
     padding: 0px !important;
     border: solid 0px !important;
     transform: none !important;
     opacity: 1 !important;
     visibility: visible !important;
   }

   .wsmenu-H-submenu-sub-sub li {
     margin: 0px 0px 0px 0px !important;
   }

   .wsmenu-H-submenu-sub-sub a {
     display: block;
     color: #000;
     padding: 10px 25px;
     background: #000 !important;
     border-bottom: solid 1px #ccc;
     font-weight: normal;
   }

   .wsmenu-H-submenu-sub-sub li a.active {
     color: #000 !important;
   }

   .wsmenu-H-submenu-sub-sub li:hover>a {
     background-color: #606060 !important;
     color: #fff;
   }

   .wsmenu-H {
     position: relative;
   }

   .wsmenu-H .wsmenu-H-list {
     height: 100%;
     overflow-y: auto;
     display: block !important;
     background-color: #363636;
   }

   span.icon {
     padding-right: 5px;
   }

   .wsmenu-H .wsmenu-H-list>li {
     width: 100%;
     display: block;
     float: none;
     border-right: none;
     background-color: #363636;
     position: relative;
     white-space: inherit;
   }

   .wsmenu-H>.wsmenu-H-list>li>a {
     padding: 9px 32px 9px 17px;
     font-size: 18px;
     text-align: left;
     border-right: solid 0px;
     background-color: transparent;
     color: #FFF;
     line-height: 33px;
     border-bottom: 1px solid;
     border-bottom-color: rgba(0, 0, 0, 0.13);
     position: static;
   }

   .wsmenu-H>.wsmenu-H-list>li>a>.fa {
     font-size: 16px;
     color: #bfbfbf;
   }

   .wsmenu-H .wsmenu-H-list li a .arrow:after {
     display: none !important;
   }

   .wsmenu-H .wsmenu-H-list li ul li a .fa.fa-caret-right {
     font-size: 12px !important;
     color: #8E8E8E;
   }

   .mobile-sub .wsmenu-H-submenu {
     transform: none !important;
     opacity: 1 !important;
     display: none;
     position: relative !important;
     top: 0px;
     background-color: #fff;
     border: solid 1px #ccc;
     padding: 0px;
     visibility: visible !important;
   }

   .mobile-sub .wsmenu-H-submenu li a {
     line-height: 20px;
     height: 36px;
     background-color: #e7e7e7 !important;
     font-size: 13px !important;
     padding: 8px 0px 8px 18px;
     color: #8E8E8E;
   }

   .mobile-sub .wsmenu-H-submenu li a:hover {
     background-color: #e7e7e7 !important;
     color: #666666;
     text-decoration: underline;
   }

   .mobile-sub .wsmenu-H-submenu li:hover>a {
     background-color: #e7e7e7 !important;
     color: #666666;
   }

   .mobile-sub .wsmenu-H-submenu li .wsmenu-H-submenu-sub li a {
     line-height: 20px;
     height: 36px;
     background-color: #e7e7e7 !important;
     border-bottom: none;
     padding-left: 28px;
   }

   .mobile-sub .wsmenu-H-submenu li .wsmenu-H-submenu-sub li .wsmenu-H-submenu-sub-sub li a {
     line-height: 20px;
     height: 36px;
     background-color: #e7e7e7 !important;
     border-bottom: none !important;
     padding-left: 38px;
     color: #8e8e8e;
   }



   .wsmenu-H-list .megamenu {
     background-color: #e7e7e7;
     color: #666666;
     display: none;
     position: relative !important;
     top: 0px;
     padding: 0px;
     border: solid 0px;
     transform: none !important;
     opacity: 1 !important;
     visibility: visible !important;
   }

   .wsmenu-H-list li:hover .megamenu {
     display: none;
     position: relative !important;
     top: 0px;
   }

   .megamenu .title {
     color: #666666;
     font-size: 15px !important;
     padding: 10px 8px 10px 0px;
   }

   .halfdiv .title {
     padding-left: 15px;
   }

   .megamenu>ul {
     width: 100% !important;
     margin: 0px;
     padding: 0px;
     font-size: 13px !important;
   }

   .megamenu>ul>li>a {
     padding: 9px 14px !important;
     line-height: normal !important;
     font-size: 13px !important;
     background-color: #FFF !important;
     color: #666666;
   }

   .megamenu>ul>li>a:hover {
     background-color: #000000 !important;
   }

   .ad-style {
     width: 100% !important;
   }

   .megamenu ul li.title a {
     border-bottom: 0px solid #CCC;
   }

   .megamenu ul li.title {
     line-height: 26px;
     color: #666666;
     margin: 0px;
     font-size: 15px;
     padding: 7px 13px !important;
     border-bottom: 1px solid #ccc;
     background-color: transparent !important;
   }

   .halfdiv {
     width: 100%;
     display: block;
   }

   .halfmenu {
     width: 100%;
     display: block;
   }

   .menu_form {
     padding: 10px 10px 63px 10px;
     background-color: #e7e7e7;
   }

   .menu_form input[type="button"] {
     width: 46%;
   }

   .menu_form input[type="submit"] {
     width: 46%;
   }

   .menu_form textarea {
     min-height: 100px;
   }

   .wsmenu-H {
     width: 240px;
     right: -240px;
     height: 100%;
     position: fixed;
     top: 0;
     margin: 0;
     background-color: #fff;
     border-radius: 0px;
     z-index: 1103;
     -webkit-transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
     -o-transition: all 0.4s ease-in-out;
     -ms-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
     border: none !important;
     background-color: #fff !important;
   }

   .wsoffcanvasopener .wsmenu-H {
     margin-top: 0px !important;
     width: 240px;
     -webkit-transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
     -o-transition: all 0.4s ease-in-out;
     -ms-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
   }

   .wsmenu-H.menuclose {
     -webkit-transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
     -o-transition: all 0.4s ease-in-out;
     -ms-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
   }



   /* Navigation arrow Animation */
   .animated-arrow {
     position: fixed;
     right: 0;
     top: 0;
     z-index: 102;
     -webkit-transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
     -o-transition: all 0.4s ease-in-out;
     -ms-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
   }

   .callusicon {
     color: #c9c9c9;
     font-size: 25px;
     height: 25px;
     position: fixed;
     left: 15px;
     top: 13px;
     transition: all 0.4s ease-in-out 0s;
     width: 25px;
     z-index: 102;
     -webkit-transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
     -o-transition: all 0.4s ease-in-out;
     -ms-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
   }

   .callusicon:focus,
   callusicon:hover {
     color: #fff !important;
   }

   .wsoffcanvasopener .callusicon {
     display: none !important;
   }



   .wsoffcanvasopener .animated-arrow {
     right: 240px;
   }


   .animated-arrow {
     cursor: pointer;
     padding: 13px 35px 16px 0px;
     margin: 10px 10px 0 0px;
   }

   .animated-arrow span,
   .animated-arrow span:before,
   .animated-arrow span:after {
     cursor: pointer;
     height: 3px;
     width: 23px;
     background: #c9c9c9;
     position: absolute;
     display: block;
     content: '';
   }

   .animated-arrow span:before {
     top: -7px;
   }

   .animated-arrow span:after {
     bottom: -7px;
   }

   .animated-arrow span,
   .animated-arrow span:before,
   .animated-arrow span:after {
     transition: all 500ms ease-in-out;
   }

   .wsoffcanvasopener .animated-arrow span {
     background-color: transparent;
   }

   .wsoffcanvasopener .animated-arrow span:before,
   .animated-arrow.active span:after {
     top: 7px;
   }

   .wsoffcanvasopener .animated-arrow span:before {
     transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     -webkit-transform: rotate(45deg);
     bottom: 0px;
   }

   .wsoffcanvasopener .animated-arrow span:after {
     transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
     -webkit-transform: rotate(-45deg);
   }


   /*Animation None */
   .wsmenu-H-list li>.wsmenu-H-submenu {
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     visibility: visible !important;
   }

   .wsmenu-list li:hover>.wsmenu-submenu {
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     visibility: visible !important;
   }

   .wsmenu-H-submenu li>.wsmenu-H-submenu-sub {
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     visibility: visible !important;
   }

   .wsmenu-H-submenu li:hover>.wsmenu-H-submenu-sub {
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     visibility: visible !important;
     opacity: 1 !important;
   }

   .wsmenu-H-submenu-sub li>.wsmenu-H-submenu-sub-sub {
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     visibility: visible !important;
     opacity: 1 !important;
   }

   .wsmenu-H-submenu-sub li:hover>.wsmenu-H-submenu-sub-sub {
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     visibility: visible !important;
     opacity: 1 !important;
   }


   .wsmenu-H-list li>.megamenu {
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     visibility: visible !important;
     opacity: 1 !important;
   }

   .wsmenu-Hu-list li:hover>.megamenu {
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     visibility: visible !important;
     opacity: 1 !important;
   }
 }

 /*================================= Menu =================================*/
 .wsmobileheader {
   display: none;
 }

 .overlapblackbg {
   display: none;
 }

 .bigmegamenu {
   position: relative;
 }

 .wsmenu {
   font-family: sans-serif, 微軟正黑體;
   color: #fff;
   font-size: 13px;
   padding: 0px;
   width: 200px;
   float: right;
   -webkit-border-radius: 2px 2px 2px 2px;
   -moz-border-radius: 2px 2px 2px 2px;
   border-radius: 2px 2px 2px 2px;
 }

 .Hmenu {
   font-family: sans-serif, 微軟正黑體;
   color: #fff;
   font-size: 13px;
   padding: 0px;

   float: right;
   -webkit-border-radius: 2px 2px 2px 2px;
   -moz-border-radius: 2px 2px 2px 2px;
   border-radius: 2px 2px 2px 2px;
 }

 .wsmenu-list {
   text-align: left;
   margin: 0 auto 0 auto;
   width: 100%;
   display: table;
   padding: 0px;
 }

 .wsmenu-list>li {
   text-align: center;
   display: table-cell;
 }

 .wsmenu-list li:first-child a {}

 .wsmenu-list li:last-child a {}

 .wsmenu-list>li>a .fa {
   display: inline-block;
   font-size: 14px;
   line-height: inherit;
   margin-right: 4px;
 }

 .wsmenu-list li ul li a .fa.fa-angle-double-right {
   font-size: 12px;
   margin: 0 3px 0 -4px;
 }

 .wsmenu-list li a .arrow:after {
   border-left: 4px solid rgba(0, 0, 0, 0);
   border-right: 4px solid rgba(0, 0, 0, 0);
   border-top: 4px solid #b3b3b3;
   content: "";
   float: right;
   height: 0;
   margin: 0 0 0 9px;
   position: absolute;
   text-align: right;
   top: 22px;
   width: 0;
 }

 /* 書籍分類 item  Main MENU */

 .wsmenu-list>li>a {
   display: block;
   color: #FFF;
   font-size: 16px;
   padding: 10px 14px;
   line-height: 48px;
   text-decoration: none;
   position: relative;
   background-color: rgba(244, 161, 63, 1) !important;
 }

 .wsmenu-list li a:hover .arrow:after {
   border-top-color: #b3b3b3
 }

 .wsmenu-list li a.active .arrow:after {
   border-top-color: #b3b3b3
 }

 .wsmenu-list li:hover>a .arrow:after {
   border-top-color: #b3b3b3
 }

 .megamenu iframe {
   width: 100%;
   margin-top: 10px;
   min-height: 200px;
 }

 .megamenu video {
   width: 100%;
   margin-top: 10px;
   min-height: 200px;
 }

 /*For megamenu desktop */
 .wsmenu-list li:hover .megamenu {
   opacity: 1;
 }

 /* For magazine ex. MENU*/
 .w100 {
   width: 100%;
   left: 0;
 }

 .magazine {
   padding: 5px !important;
 }

 .magazine .title a {
   border-bottom: 2px solid transparent !important;
   padding: 6px !important;
   font-size: 15px;
 }

 .magazine li {
   position: relative;
   padding: 0px !important;
   margin: 0px;
   height: inherit !important;
   display: block;
 }

 /* For magazine ex. MENU*/

 .megamenu {
   /*  width:100%;
  left:0px;*/
   position: absolute;
   /*top:110px;*/
   /*10/20調整，原69*/
   color: #000;
   z-index: 1000;
   margin: 0px;
   text-align: left;
   padding: 14px;
   font-size: 15px;
   border-bottom: solid 3px #b9b9b9;
   background-color: #fff;
   opacity: 0;
   -o-transform-origin: 0% 0%;
   -ms-transform-origin: 0% 0%;
   -moz-transform-origin: 0% 0%;
   -webkit-transform-origin: 0% 0%;
   -o-transition: -o-transform 0.3s, opacity 0.3s;
   -ms-transition: -ms-transform 0.3s, opacity 0.3s;
   -moz-transition: -moz-transform 0.3s, opacity 0.3s;
   -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
 }

 .megamenu .title {
   font-size: 14px;
   padding: 9px 5px 9px 0px;
   font-size: 17px;
   color: #424242;
   margin-bottom: 7px;
   text-align: left;
   height: 39px;
 }

 i.icon.icon-chevron-right {
   margin-left: -15px;
 }

 .megamenu .title a {
   border-bottom: 1px solid #CCC;
 }

 .megamenu .title a:hover {}

 .link-list li {
   display: block;
   text-align: center;
   white-space: pre-wrap;
   text-align: left;
 }

 .link-list li a {
   line-height: 18px;
   border-right: none;
   text-align: left;
   padding: 3px 0px;
   padding-left: 15px;
   /* 補足 項目齊左的空間*/
   /*background:#fff !important;*/
   background-image: none !important;
   color: #666666 !important;
   border-right: 0 none !important;
   display: block;
   border-right: 1px solid #e7e7e7;
   color: #424242;
 }

 .link-list .fa {
   font-size: 11px;
 }

 .megacollink {
   width: 23%;
   float: left;
   margin: 0% 1%;
 }

 .megacollink li {
   display: block;
   text-align: center;
   white-space: nowrap;
   text-align: left;
 }

 .megacollink li a {
   line-height: 18px;
   border-right: none;
   text-align: left;
   padding: 8px 0px;
   background: #fff !important;
   background-image: none !important;
   color: #666666 !important;
   border-right: 0 none !important;
   display: block;
   border-right: 1px solid #e7e7e7;
   background-color: #fff;
   color: #424242;
 }

 .megacollink .fa {
   font-size: 11px;
 }

 .megacolimage {
   width: 31.33%;
   float: left;
   margin: 0% 1%;
 }

 .typographydiv {
   width: 100%;
   margin: 0% 0%;
 }

 .typographylinks {
   width: 25%;
   float: left;
   margin: 0% 0%;
 }

 .mainmapdiv {
   width: 100%;
   display: block;
   margin: 0% 0%;
 }

 .wsmenu-list .ad-style {
   width: 28%;
   float: right;
 }

 .wsmenu-list .ad-style a {
   border: none !important;
   padding: 0px !important;
   margin: 0px !important;
   line-height: normal !important;
   background-image: none !important;
 }

 .mobile-sub .megamenu .ad-style a:hover {
   background-color: transparent !important;
 }

 .wsmenu-list .megamenu li:hover>a {
   background: transparent !important;
 }

 .wsmenu-list .megamenu li a:hover {
   background: #eee !important;
   text-decoration: none;
 }

 .wsmenu-list .megamenu li .fa {
   margin-right: 5px;
   text-align: center;
   width: 18px;
 }

 .mrgtop {
   margin-top: 15px;
 }

 .show-grid div {
   padding-bottom: 10px;
   padding-top: 10px;
   background-color: #dbdbdb;
   border: 1px solid #e7e7e7;
   color: #6a6a6a;
   margin: 2px 0px;
 }

 /*For halfmenu */
 .halfmenu {
   width: 40%;
   right: auto !important;
   left: auto !important;
 }

 .halfmenu .megacollink {
   width: 48%;
   float: left;
   margin: 0% 1%;
 }

 /*For halfmenu */

 /*Form for desktop */
 .halfdiv {
   width: 35%;
   right: 0px !important;
   left: auto;
 }

 .menu_form {
   width: 100%;
   display: block;
 }

 .menu_form input[type="text"] {
   width: 100%;
   border: 1px solid #e2e2e2;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   color: #000;
   font-size: 13px;
   padding: 8px 5px;
   margin-bottom: 8px;
 }

 .menu_form textarea {
   width: 100%;
   border: 1px solid #e2e2e2;
   border-radius: 5px;
   color: #000;
   font-size: 13px;
   padding: 8px 5px;
   margin-bottom: 8px;
   min-height: 122px;
 }

 .menu_form input[type="submit"] {
   width: 25%;
   display: block;
   height: 28px;
   float: right;
   border: solid 1px #ccc;
   margin-right: 15px;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
 }

 .menu_form input[type="button"] {
   width: 25%;
   display: block;
   height: 28px;
   float: right;
   border: solid 1px #ccc;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
 }

 .megamenu .left.carousel-control {
   padding-top: 20%;
 }

 .megamenu .right.carousel-control {
   padding-top: 20%;
 }

 .carousel-inner .item img {
   width: 100%;
 }

 .megamenu .carousel-caption {
   bottom: 0px;
   background-color: rgba(0, 0, 0, 0.7);
   font-size: 13px;
   height: 31px;
   left: 0;
   padding: 7px 0;
   right: 0;
   width: 100%;
 }

 /*Animation*/
 .wsmenu-list li>.wsmenu-submenu {
   transform-style: preserve-3d;
   -o-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
   transform: rotateX(-75deg);
   -o-transform: rotateX(-75deg);
   -moz-transform: rotateX(-75deg);
   -webkit-transform: rotateX(-75deg);
   visibility: hidden;
 }

 .wsmenu-list li:hover>.wsmenu-submenu {
   transform: rotateX(0deg);
   -o-transform: rotateX(0deg);
   -moz-transform: rotateX(0deg);
   -webkit-transform: rotateX(0deg);
   opacity: 1;
   visibility: visible;
 }

 .wsmenu-submenu li>.wsmenu-submenu-sub {
   transform-style: preserve-3d;
   -o-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
   transform: rotateX(-75deg);
   -o-transform: rotateX(-75deg);
   -moz-transform: rotateX(-75deg);
   -webkit-transform: rotateX(-75deg);
   visibility: hidden;
 }

 .wsmenu-submenu li:hover>.wsmenu-submenu-sub {
   transform: rotateX(0deg);
   -o-transform: rotateX(0deg);
   -moz-transform: rotateX(0deg);
   -webkit-transform: rotateX(0deg);
   opacity: 1;
   visibility: visible;
 }

 .wsmenu-submenu-sub li>.wsmenu-submenu-sub-sub {
   transform-style: preserve-3d;
   -o-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
   transform: rotateX(-75deg);
   -o-transform: rotateX(-75deg);
   -moz-transform: rotateX(-75deg);
   -webkit-transform: rotateX(-75deg);
   visibility: hidden;
 }

 .wsmenu-submenu-sub li:hover>.wsmenu-submenu-sub-sub {
   transform: rotateX(0deg);
   -o-transform: rotateX(0deg);
   -moz-transform: rotateX(0deg);
   -webkit-transform: rotateX(0deg);
   opacity: 1;
   visibility: visible;
 }


 .wsmenu-list li>.megamenu {
   transform-style: preserve-3d;
   -o-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
   transform: rotateX(-75deg);
   -o-transform: rotateX(-75deg);
   -moz-transform: rotateX(-75deg);
   -webkit-transform: rotateX(-75deg);
   visibility: hidden;
 }

 .wsmenu-list li:hover>.megamenu {
   transform: rotateX(0deg);
   -o-transform: rotateX(0deg);
   -moz-transform: rotateX(0deg);
   -webkit-transform: rotateX(0deg);
   opacity: 1;
   visibility: visible;
 }


 /* Submenu CSS */
 .wsmenu-submenu {
   position: absolute;
   top: 48px;
   z-index: 1000;
   margin: 0px;
   padding: 2px;
   border: solid 1px #eeeeee;
   background-color: #fff;
   opacity: 0;
   -o-transform-origin: 0% 0%;
   -ms-transform-origin: 0% 0%;
   -moz-transform-origin: 0% 0%;
   -webkit-transform-origin: 0% 0%;
   -o-transition: -o-transform 0.3s, opacity 0.3s;
   -ms-transition: -ms-transform 0.3s, opacity 0.3s;
   -moz-transition: -moz-transform 0.3s, opacity 0.3s;
   -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
 }

 .wsmenu-submenu li a {
   background: #fff !important;
   background-image: none !important;
   color: #666666 !important;
   border-right: 0 none !important;
   text-align: left;
   display: block;
   line-height: 22px;
   padding: 6px 12px;
   text-transform: none;
   font-size: 13px;
   letter-spacing: normal;
   border-right: 0px solid;
 }

 .wsmenu-submenu li {
   position: relative;
   margin: 0px;
   padding: 0px;
 }

 .wsmenuexpandermain {
   display: none;
 }

 .wsmenu-list li:hover .wsmenu-submenu {
   display: block;
 }

 .wsmenu-list .wsmenu-submenu .wsmenu-submenu-sub {
   min-width: 220px;
   position: absolute;
   left: 90%;
   top: 0;
   margin: 0px;
   padding: 0px;
   opacity: 0;
   -o-transform-origin: 0% 0%;
   -ms-transform-origin: 0% 0%;
   -moz-transform-origin: 0% 0%;
   -webkit-transform-origin: 0% 0%;
   -o-transition: -o-transform 0.4s, opacity 0.4s;
   -ms-transition: -ms-transform 0.4s, opacity 0.4s;
   -moz-transition: -moz-transform 0.4s, opacity 0.4s;
   -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
 }

 .wsmenu-list .wsmenu-submenu li:hover .wsmenu-submenu-sub {
   opacity: 1;
   list-style: none;
   padding: 2px;
   border: solid 1px #eeeeee;
   background-color: #fff;
 }

 .wsmenu-list .wsmenu-submenu li:hover .wsmenu-submenu-sub {
   display: block;
 }

 .wsmenu-list .wsmenu-submenu .wsmenu-submenu-sub .wsmenu-submenu-sub-sub {
   min-width: 220px;
   position: absolute;
   left: 90%;
   top: 0;
   margin: 0px;
   padding: 0px;
   opacity: 0;
   -o-transform-origin: 0% 0%;
   -ms-transform-origin: 0% 0%;
   -moz-transform-origin: 0% 0%;
   -webkit-transform-origin: 0% 0%;
   -o-transition: -o-transform 0.4s, opacity 0.4s;
   -ms-transition: -ms-transform 0.4s, opacity 0.4s;
   -moz-transition: -moz-transform 0.4s, opacity 0.4s;
   -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
 }

 .wsmenu-list .wsmenu-submenu .wsmenu-submenu-sub li:hover .wsmenu-submenu-sub-sub {
   opacity: 1;
   list-style: none;
   padding: 2px;
   border: solid 1px #eeeeee;
   background-color: #fff;
 }

 .wsmenu-submenu li {
   position: relative;
   padding: 0px;
   margin: 0px;
   display: block;
 }

 .wsmenu-click {
   display: none;
 }

 .wsmenu-click02 {
   display: none;
 }

 /* Default Theme 調整 */
 .wsmenu-list li:hover>a {
   background-color: rgba(244, 161, 63, 1) !important;
   text-decoration: none;
 }

 .wsmenu-list>li>a:hover {
   background-color: rgba(244, 161, 63, 1) !important;
   text-decoration: none;
 }

 .wsmenu-list>li>a.active {
   background-color: rgba(244, 161, 63, 1) !important;
   text-decoration: none;
 }

 .wsmenu-submenu>li>a:hover {
   background-color: rgba(244, 161, 63, 1) !important;
   border-radius: 0px !important;
   text-decoration: none;
   text-decoration: none;
 }

 .typography-text {
   padding: 0px 0px;
   font-size: 15px;
 }

 .typography-text p {
   text-align: justify;
   line-height: 24px;
   color: #656565;
 }

 .typography-text ul li {
   display: block;
   padding: 2px 0px;
   line-height: 22px;
 }

 .typography-text ul li a {
   color: #656565;
 }

 .hometext {
   display: none;
 }

 .wsmenu-submenu .fa {
   margin-right: 7px;
 }


 @media only screen and (min-width:780px) and (max-width:1023px) {
   .wsmenu-list>li>a>.fa {
     display: none !important;
   }

   .hometext {
     display: block !important;
   }

   .wsmenu {
     width: 100%;
     font-size: 13px !important;
     position: relative;
   }

   .bigmegamenu {
     position: static !important;
   }

   .wsmenu-list li a {
     white-space: nowrap !important;
     padding-left: 4px !important;
     padding-right: 10px !important;
   }

   .megacollink {
     width: 48%;
     margin: 1% 1%;
   }

   .typographylinks {
     width: 48%;
     margin: 1% 1%;
   }


 }




 @media only screen and (min-width: 781px) {

   .wsmenu-list li:hover>.wsmenu-submenu {
     display: block !important;
   }

   .wsmenu-submenu li:hover>.wsmenu-submenu-sub {
     display: block !important;
   }

   .wsmenu-submenu-sub li:hover>.wsmenu-submenu-sub-sub {
     display: block !important;
   }

   .wsmenu-list li:hover>.megamenu {
     display: block !important;
   }

   .wsmenu-list li:hover>.megamenu2 {
     display: none !important;
   }

 }


 /*------------------------------------ Mobile CSS ---------------------------------------------*/
 @media only screen and (max-width: 780px) {
   .wsoffcanvasopener .wsmenu {
     right: 0px;
     -webkit-transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
     -o-transition: all 0.4s ease-in-out;
     -ms-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
   }

   .wsmenucontainer.wsoffcanvasopener {
     display: block;
     margin-right: 240px;
   }

   .wsmobileheader {
     display: block !important;
     position: relative;
     top: 0;
     right: 0;
     left: 0;
     -webkit-transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
     -o-transition: all 0.4s ease-in-out;
     -ms-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;

   }


   .wsmenu-list>li:hover>a {
     background-color: rgba(0, 0, 0, 0.08) !important;
     text-decoration: none;
   }

   .hometext {
     display: inline-block !important;
   }

   .megacollink {
     width: 96% !important;
     margin: 0% 2% !important;
   }

   .megacolimage {
     width: 90% !important;
     margin: 0% 5% !important;
   }

   .typographylinks {
     width: 98% !important;
     margin: 0% 1% !important;
   }

   .typographydiv {
     width: 86% !important;
     margin: 0% 7% !important;
   }

   .mainmapdiv {
     width: 90% !important;
     margin: 0% 5% !important;
   }

   .overlapblackbg {
     left: 0;
     z-index: 1102;
     width: 100%;
     height: 100%;
     position: fixed;
     top: 0;
     display: none;
     background-color: rgba(0, 0, 0, 0.45);
     cursor: pointer;
   }

   .wsoffcanvasopener .overlapblackbg {
     display: block !important;
   }

   /* Default Theme */
   .wsmenu-submenu>li:hover>a {
     background-color: #7b7b7b;
     color: #666666;
   }

   .wsmenu>.wsmenu-list>li>a.active {
     color: #666666;
     background-color: rgba(0, 0, 0, 0.08);
   }

   .wsmenu>.wsmenu-list>li>a:hover {
     color: #666666;
     background-color: rgba(0, 0, 0, 0.08);
   }

   .wsmenu-list li:hover .wsmenu-submenu {
     display: none;
   }

   .wsmenu-list li:hover .wsmenu-submenu .wsmenu-submenu-sub {
     display: none;
   }

   .wsmenu-list .wsmenu-submenu .wsmenu-submenu-sub li:hover .wsmenu-submenu-sub-sub {
     display: none;
     list-style: none;
     padding: 2px;
     border: solid 1px #eeeeee;
     background-color: #fff;
   }

   .wsmenu-list li:first-child a {
     -webkit-border-radius: 0px 0px 0px 0px;
     -moz-border-radius: 0px 0px 0px 0px;
     border-radius: 0px 0px 0px 0px;
   }

   .wsmenu-list li:last-child a {
     -webkit-border-radius: 0px 4px 0px 0px;
     -moz-border-radius: 0px 0px 0px 0px;
     border-radius: 0px 0px 0px 0px;
     border-right: 0px solid;
   }

   .innerpnd {
     padding: 0px !important;
   }

   .typography-text {
     padding: 10px 0px;
   }

   .wsmenucontainer {
     overflow: hidden;
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -ms-backface-visibility: hidden;
     /*min-height:800px;*/
     -webkit-transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
     -o-transition: all 0.4s ease-in-out;
     -ms-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
   }



   /* Mobile click to drop arrow */
   .wsmenu-click {
     height: 43px;
     position: absolute;
     top: 0;
     right: 0;
     display: block;
     cursor: pointer;
     width: 100%;
   }

   .wsmenu-click i {
     display: block;
     height: 23px;
     width: 25px;
     margin-top: 11px;
     margin-right: 8px;
     background-size: 25px;
     font-size: 21px;
     color: rgba(0, 0, 0, 0.25);
     float: right;
   }


   .wsmenu-click02 {
     height: 43px;
     position: absolute;
     top: 0;
     right: 0;
     display: block;
     cursor: pointer;
     width: 100%;
   }

   .wsmenu-click02 i {
     display: block;
     height: 23px;
     width: 25px;
     margin-top: 11px;
     margin-right: 8px;
     background-size: 25px;
     font-size: 21px;
     color: rgba(0, 0, 0, 0.25);
     float: right;
   }

   .ws-activearrow>i {
     transform: rotate(180deg);
   }

   .wsmenu-rotate {
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
     -ms-transform: rotate(180deg);
     -o-transform: rotate(180deg);
     transform: rotate(180deg);
   }

   /*2nd UL Style*/
   .wsmenu-submenu-sub {
     width: 100% !important;
     position: static !important;
     left: 100% !important;
     top: 0 !important;
     display: none;
     margin: 0px !important;
     padding: 0px !important;
     border: solid 0px !important;
     transform: none !important;
     opacity: 1 !important;
     visibility: visible !important;
   }

   .wsmenu-submenu-sub li {
     margin: 0px 0px 0px 0px !important;
     padding: 0px;
     position: relative;
   }

   .wsmenu-submenu-sub a {
     display: block;
     padding: 10px 25px 10px 25px;
     border-bottom: solid 1px #ccc;
     font-weight: normal;
   }

   .wsmenu-submenu-sub li a.active {
     color: #000 !important;
   }

   .wsmenu-submenu-sub li:hover>a {
     background-color: #333333 !important;
     color: #fff;
   }

   .wsmenu-list>li>a .fa {
     margin-right: 6px;
   }

   .wsmenu-submenu-sub-sub {
     width: 100% !important;
     position: static !important;
     left: 100% !important;
     top: 0 !important;
     display: none;
     margin: 0px !important;
     padding: 0px !important;
     border: solid 0px !important;
     transform: none !important;
     opacity: 1 !important;
     visibility: visible !important;
   }

   .wsmenu-submenu-sub-sub li {
     margin: 0px 0px 0px 0px !important;
   }

   .wsmenu-submenu-sub-sub a {
     display: block;
     color: #000;
     padding: 10px 25px;
     background: #000 !important;
     border-bottom: solid 1px #ccc;
     font-weight: normal;
   }

   .wsmenu-submenu-sub-sub li a.active {
     color: #000 !important;
   }

   .wsmenu-submenu-sub-sub li:hover>a {
     background-color: #606060 !important;
     color: #fff;
   }

   .wsmenu {
     position: relative;
   }

   .wsmenu .wsmenu-list {
     height: 100%;
     overflow-y: auto;
     display: block !important;
   }

   span.icon {
     padding-right: 5px;
   }

   .wsmenu .wsmenu-list>li {
     width: 100%;
     display: block;
     float: none;
     border-right: none;
     background-color: #999;
     position: relative;
     white-space: inherit;
   }

   .wsmenu>.wsmenu-list>li>a {
     padding: 9px 32px 9px 17px;
     font-size: 18px;
     text-align: left;
     border-right: solid 0px;
     background-color: transparent;
     color: #FFF;
     line-height: 33px;
     border-bottom: 1px solid;
     border-bottom-color: rgba(0, 0, 0, 0.13);
     position: static;
   }

   .wsmenu>.wsmenu-list>li>a>.fa {
     font-size: 16px;
     color: #bfbfbf;
   }

   .wsmenu .wsmenu-list li a .arrow:after {
     display: none !important;
   }

   .wsmenu .wsmenu-list li ul li a .fa.fa-caret-right {
     font-size: 12px !important;
     color: #8E8E8E;
   }

   .mobile-sub .wsmenu-submenu {
     transform: none !important;
     opacity: 1 !important;
     display: none;
     position: relative !important;
     top: 0px;
     background-color: #fff;
     border: solid 1px #ccc;
     padding: 0px;
     visibility: visible !important;
   }

   .mobile-sub .wsmenu-submenu li a {
     line-height: 20px;
     height: 36px;
     background-color: #e7e7e7 !important;
     font-size: 13px !important;
     padding: 8px 0px 8px 18px;
     color: #8E8E8E;
   }

   .mobile-sub .wsmenu-submenu li a:hover {
     background-color: #e7e7e7 !important;
     color: #666666;
     text-decoration: underline;
   }

   .mobile-sub .wsmenu-submenu li:hover>a {
     background-color: #e7e7e7 !important;
     color: #666666;
   }

   .mobile-sub .wsmenu-submenu li .wsmenu-submenu-sub li a {
     line-height: 20px;
     height: 36px;
     background-color: #e7e7e7 !important;
     border-bottom: none;
     padding-left: 28px;
   }

   .mobile-sub .wsmenu-submenu li .wsmenu-submenu-sub li .wsmenu-submenu-sub-sub li a {
     line-height: 20px;
     height: 36px;
     background-color: #e7e7e7 !important;
     border-bottom: none !important;
     padding-left: 38px;
     color: #8e8e8e;
   }



   .wsmenu-list .megamenu {
     background-color: #e7e7e7;
     color: #666666;
     display: none;
     position: relative !important;
     top: 0px;
     padding: 0px;
     border: solid 0px;
     transform: none !important;
     opacity: 1 !important;
     visibility: visible !important;
   }

   .wsmenu-list li:hover .megamenu {
     display: none;
     position: relative !important;
     top: 0px;
   }

   .megamenu .title {
     color: #666666;
     font-size: 15px !important;
     padding: 10px 8px 10px 0px;
   }

   .halfdiv .title {
     padding-left: 15px;
   }

   .megamenu>ul {
     width: 100% !important;
     margin: 0px;
     padding: 0px;
     font-size: 13px !important;
   }

   .megamenu>ul>li>a {
     padding: 9px 14px !important;
     line-height: normal !important;
     font-size: 13px !important;
     background-color: #FFF !important;
     color: #666666;
   }

   .megamenu>ul>li>a:hover {
     background-color: #000000 !important;
   }

   .ad-style {
     width: 100% !important;
   }

   .megamenu ul li.title a {
     border-bottom: 0px solid #CCC;
   }

   .megamenu ul li.title {
     line-height: 26px;
     color: #666666;
     margin: 0px;
     margin-left: 4px;
     font-size: 15px;
     padding: 7px 13px 0px 14px !important;
     background-color: transparent !important;
   }

   .halfdiv {
     width: 100%;
     display: block;
   }

   .halfmenu {
     width: 100%;
     display: block;
   }

   .menu_form {
     padding: 10px 10px 63px 10px;
     background-color: #e7e7e7;
   }

   .menu_form input[type="button"] {
     width: 46%;
   }

   .menu_form input[type="submit"] {
     width: 46%;
   }

   .menu_form textarea {
     min-height: 100px;
   }

   .wsmenu {
     width: 240px;
     right: -240px;
     height: 100%;
     position: fixed;
     top: 0;
     margin: 0;
     background-color: #fff;
     border-radius: 0px;
     z-index: 103;
     -webkit-transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
     -o-transition: all 0.4s ease-in-out;
     -ms-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
     border: none !important;
     background-color: #fff !important;
   }

   .wsoffcanvasopener .wsmenu {
     width: 240px;
     -webkit-transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
     -o-transition: all 0.4s ease-in-out;
     -ms-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
   }

   .wsmenu.menuclose {
     -webkit-transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
     -o-transition: all 0.4s ease-in-out;
     -ms-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
   }



   /* Navigation arrow Animation */
   .animated-arrow {
     position: fixed;
     right: 0;
     top: 0;
     z-index: 102;
     -webkit-transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
     -o-transition: all 0.4s ease-in-out;
     -ms-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
   }

   .callusicon {
     color: #666;
     font-size: 25px;
     height: 25px;
     position: fixed;
     left: 15px;
     top: 13px;
     transition: all 0.4s ease-in-out 0s;
     width: 25px;
     z-index: 102;
     -webkit-transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
     -o-transition: all 0.4s ease-in-out;
     -ms-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
   }

   .callusicon:focus,
   callusicon:hover {
     color: #fff !important;
   }

   .wsoffcanvasopener .callusicon {
     display: none !important;
   }

   .smallogo {
     width: 100%;
     display: block;
     text-align: center;
     padding-top: 5px;
     position: fixed;
     z-index: 101;
     width: 100%;
     height: 55px;
     background: #fff;
     border-bottom: 1px solid #ebebeb;
     /*  background: -moz-linear-gradient(top, #F4A13F 0, #1c1c1c 50%, #F4A13F 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F4A13F), color-stop(50%, #1c1c1c), color-stop(100%, #F4A13F));
  background: -webkit-linear-gradient(top, #F4A13F 0, #1c1c1c 50%, #F4A13F 100%);
  background: -o-linear-gradient(top, #F4A13F 0, #1c1c1c 50%, #F4A13F 100%);
  background: -ms-linear-gradient(top, #F4A13F 0, #1c1c1c 50%, #F4A13F 100%);
  background: linear-gradient(to bottom, #F4A13F 0, #1c1c1c 50%, #F4A13F 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F4A13F', endColorstr='#F4A13F', GradientType=0);
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.5);*/
   }

   .smallogo-H {
     width: 100%;
     display: block;
     text-align: center;
     padding-top: 9px;
     position: fixed;
     z-index: 101;
     width: 100%;
     height: 52px;
     background: #F4A13F;
     /*background: -moz-linear-gradient(top, #F4A13F 0, #1c1c1c 50%, #F4A13F 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F4A13F), color-stop(50%, #1c1c1c), color-stop(100%, #F4A13F));
  background: -webkit-linear-gradient(top, #F4A13F 0, #1c1c1c 50%, #F4A13F 100%);
  background: -o-linear-gradient(top, #F4A13F 0, #1c1c1c 50%, #F4A13F 100%);
  background: -ms-linear-gradient(top, #F4A13F 0, #1c1c1c 50%, #F4A13F 100%);
  background: linear-gradient(to bottom, #F4A13F 0, #1c1c1c 50%, #F4A13F 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F4A13F', endColorstr='#F4A13F', GradientType=0);
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.5);*/
   }

   .wsoffcanvasopener .animated-arrow {
     right: 240px;
   }


   .animated-arrow {
     cursor: pointer;
     padding: 13px 35px 16px 0px;
     margin: 10px 10px 0 0px;
   }

   .animated-arrow span,
   .animated-arrow span:before,
   .animated-arrow span:after {
     cursor: pointer;
     height: 3px;
     width: 23px;
     background: #666;
     position: absolute;
     display: block;
     content: '';
   }

   .animated-arrow span:before {
     top: -7px;
   }

   .animated-arrow span:after {
     bottom: -7px;
   }

   .animated-arrow span,
   .animated-arrow span:before,
   .animated-arrow span:after {
     transition: all 500ms ease-in-out;
   }

   .wsoffcanvasopener .animated-arrow span {
     background-color: transparent;
   }

   .wsoffcanvasopener .animated-arrow span:before,
   .animated-arrow.active span:after {
     top: 7px;
   }

   .wsoffcanvasopener .animated-arrow span:before {
     transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     -webkit-transform: rotate(45deg);
     bottom: 0px;
   }

   .wsoffcanvasopener .animated-arrow span:after {
     transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
     -webkit-transform: rotate(-45deg);
   }


   /*Animation None */
   .wsmenu-list li>.wsmenu-submenu {
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     visibility: visible !important;
   }

   .wsmenu-list li:hover>.wsmenu-submenu {
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     visibility: visible !important;
   }

   .wsmenu-submenu li>.wsmenu-submenu-sub {
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     visibility: visible !important;
   }

   .wsmenu-submenu li:hover>.wsmenu-submenu-sub {
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     visibility: visible !important;
     opacity: 1 !important;
   }

   .wsmenu-submenu-sub li>.wsmenu-submenu-sub-sub {
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     visibility: visible !important;
     opacity: 1 !important;
   }

   .wsmenu-submenu-sub li:hover>.wsmenu-submenu-sub-sub {
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     visibility: visible !important;
     opacity: 1 !important;
   }


   .wsmenu-list li>.megamenu {
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     visibility: visible !important;
     opacity: 1 !important;
   }

   .wsmenu-list li:hover>.megamenu {
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     transform: none !important;
     -o-transform: none !important;
     -moz-transform: none !important;
     -webkit-transform: none !important;
     visibility: visible !important;
     opacity: 1 !important;
   }



 }

 /*================================= Header =================================*/
 .H-menu {}

 .header {
   background: url(../images/header_bg.png) repeat-x 0 0 rgba(255, 255, 255, 0);
   /*  background-color: #f7f7f7;
  border-bottom: 2px solid #b9b9b9;*/
   /* fixed top 可用*/
 }

 /* css style form the deffault.css */

 .nav {
   margin-bottom: 0;
   padding-left: 0;
   list-style: none;
 }

 .nav>li {
   position: relative;
   display: block;
 }

 .nav>li>a {
   position: relative;
   display: block;
   padding: 10px 15px;
   color: #FFF;
   padding-bottom: 7px;
 }

 .nav>li>a:hover,
 .nav>li>a:focus {
   text-decoration: none;
   /*background-color: #eeeeee; */
 }

 .nav>li.disabled>a {
   color: #777777;
 }

 .nav>li.disabled>a:hover,
 .nav>li.disabled>a:focus {
   color: #777777;
   text-decoration: none;
   background-color: transparent;
   cursor: not-allowed;
 }

 .nav .open>a,
 .nav .open>a:hover,
 .nav .open>a:focus {
   background-color: #eeeeee;
   border-color: #428bca;
 }

 .nav .nav-divider {
   height: 1px;
   margin: 9px 0;
   overflow: hidden;
   background-color: #e5e5e5;
 }

 .nav>li>a>img {
   max-width: none;
 }

 .nav-tabs {
   /*border-bottom: 1px solid #dddddd;*/
 }

 .nav-tabs>li {
   float: left;
   margin-bottom: -1px;
   text-align: center;
   width: 33.3%;

 }

 .nav-tabs>li>a {
   margin-right: 2px;
   line-height: 1.42857143;
   background-color: #aaa;
   border: 1px solid transparent;
   /*  border-radius: 4px 4px 0 0;*/
 }

 .nav-tabs>li>a:hover {
   border-color: #eeeeee;
 }

 .nav-tabs>li.active>a,
 .nav-tabs>li.active>a:hover,
 .nav-tabs>li.active>a:focus {
   color: #FFF;
   background-color: #d95454;
   border-bottom-color: transparent;
   cursor: default;
 }

 .nav-tabs.nav-justified {
   width: 100%;
   border-bottom: 0;
 }

 .nav-tabs.nav-justified>li {
   float: none;
 }

 .nav-tabs.nav-justified>li>a {
   text-align: center;
   margin-bottom: 5px;
 }

 .nav-tabs.nav-justified>.dropdown .dropdown-menu {
   top: auto;
   left: auto;
 }

 @media (min-width: 768px) {
   .nav-tabs.nav-justified>li {
     display: table-cell;
     width: 1%;
   }

   .nav-tabs.nav-justified>li>a {
     margin-bottom: 0;
   }
 }

 .nav-tabs.nav-justified>li>a {
   margin-right: 0;
   border-radius: 4px;
 }

 .nav-tabs.nav-justified>.active>a,
 .nav-tabs.nav-justified>.active>a:hover,
 .nav-tabs.nav-justified>.active>a:focus {
   border: 1px solid #dddddd;
 }

 @media (min-width: 768px) {
   .nav-tabs.nav-justified>li>a {
     border-bottom: 1px solid #dddddd;
     border-radius: 4px 4px 0 0;
   }

   .nav-tabs.nav-justified>.active>a,
   .nav-tabs.nav-justified>.active>a:hover,
   .nav-tabs.nav-justified>.active>a:focus {
     border-bottom-color: #ffffff;
   }
 }

 .nav-pills>li {
   float: left;
 }

 .nav-pills>li>a {
   border-radius: 4px;
 }

 .nav-pills>li+li {
   margin-left: 2px;
 }

 .nav-pills>li.active>a,
 .nav-pills>li.active>a:hover,
 .nav-pills>li.active>a:focus {
   color: #ffffff;
   background-color: #428bca;
 }

 .nav-stacked>li {
   float: none;
 }

 .nav-stacked>li+li {
   margin-top: 2px;
   margin-left: 0;
 }

 .nav-justified {
   width: 100%;
 }

 .nav-justified>li {
   float: none;
 }

 .nav-justified>li>a {
   text-align: center;
   margin-bottom: 5px;
 }

 .nav-justified>.dropdown .dropdown-menu {
   top: auto;
   left: auto;
 }

 @media (min-width: 768px) {
   .nav-justified>li {
     display: table-cell;
     width: 1%;
   }

   .nav-justified>li>a {
     margin-bottom: 0;
   }
 }

 .nav-tabs-justified {
   border-bottom: 0;
 }

 .nav-tabs-justified>li>a {
   margin-right: 0;
   border-radius: 4px;
 }

 .nav-tabs-justified>.active>a,
 .nav-tabs-justified>.active>a:hover,
 .nav-tabs-justified>.active>a:focus {
   border: 1px solid #dddddd;
 }

 @media (min-width: 768px) {
   .nav-tabs-justified>li>a {
     border-bottom: 1px solid #dddddd;
     border-radius: 4px 4px 0 0;
   }

   .nav-tabs-justified>.active>a,
   .nav-tabs-justified>.active>a:hover,
   .nav-tabs-justified>.active>a:focus {
     border-bottom-color: #ffffff;
   }
 }

 .nav-tabs .dropdown-menu {
   margin-top: -1px;
   border-top-right-radius: 0;
   border-top-left-radius: 0;
 }

 .navbar {
   position: relative;
   min-height: 50px;
   margin-bottom: 0px;
   border: 1px solid transparent;
 }

 @media (min-width: 768px) {
   .navbar {
     border-radius: 0px;
   }
 }

 @media (min-width: 768px) {
   .navbar-header {
     float: left;
   }
 }

 .navbar-collapse {
   overflow-x: visible;
   padding-right: 15px;
   padding-left: 15px;
   border-top: 1px solid transparent;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
   -webkit-overflow-scrolling: touch;
 }

 .navbar-collapse.in {
   overflow-y: auto;
 }

 @media (min-width: 768px) {
   .navbar-collapse {
     width: auto;
     border-top: 0;
     box-shadow: none;
   }

   .navbar-collapse.collapse {
     display: block !important;
     height: auto !important;
     padding-bottom: 0;
     overflow: visible !important;
   }

   .navbar-collapse.in {
     overflow-y: visible;
   }

   .navbar-fixed-top .navbar-collapse,
   .navbar-static-top .navbar-collapse,
   .navbar-fixed-bottom .navbar-collapse {
     padding-left: 0;
     padding-right: 0;
   }
 }

 .navbar-fixed-top .navbar-collapse,
 .navbar-fixed-bottom .navbar-collapse {
   max-height: 200px;
 }

 @media (max-width: 480px) and (orientation: landscape) {
   /*上方選單區塊*/
 }

 .navbar-fixed-top .navbar-collapse,
 .navbar-fixed-bottom .navbar-collapse {
   max-height: 100px;
 }


 .login-fbbtn a img {
   width: 100%;
   height: 100%
 }
 }



 .container>.navbar-header,
 .container-fluid>.navbar-header,
 .container>.navbar-collapse,
 .container-fluid>.navbar-collapse {
   margin-right: -15px;
   margin-left: -15px;
 }

 @media (min-width: 768px) {

   .container>.navbar-header,
   .container-fluid>.navbar-header,
   .container>.navbar-collapse,
   .container-fluid>.navbar-collapse {
     margin-right: 0;
     margin-left: 0;
   }
 }

 .navbar-static-top {
   z-index: 1000;
   border-width: 0 0 1px;
 }






 .navbar-fixed-top,
 .navbar-fixed-bottom {
   position: fixed;
   right: 0;
   left: 0;
   z-index: 1030;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 }

 @media (min-width: 768px) {

   .navbar-static-top {
     border-radius: 0;
   }

   .navbar-fixed-top,
   .navbar-fixed-bottom {
     border-radius: 0;
   }

   .navbar-fixed-top {
     top: 0;
     border-width: 0 0 1px;
   }

 }


 .navbar-fixed-bottom {
   bottom: 0;
   margin-bottom: 0;
   border-width: 1px 0 0;
 }

 .navbar-brand {
   /*---上方LOGO---*/
   float: left;
   padding: 0px 15px;
   font-size: 18px;
   height: auto;
 }

 .navbar-brand:hover,
 .navbar-brand:focus {
   text-decoration: none;
 }

 @media (min-width: 768px) {

   .navbar>.container .navbar-brand,
   .navbar>.container-fluid .navbar-brand {
     margin-left: -15px;
   }
 }

 .navbar-toggle {
   position: relative;
   float: right;
   margin-right: 15px;
   padding: 9px 10px;
   margin-top: 8px;
   margin-bottom: 8px;
   background-color: transparent;
   background-image: none;
   border: 1px solid transparent;
   border-radius: 4px;
 }

 .navbar-toggle:focus {
   outline: 0;
 }

 .navbar-toggle .icon-bar {
   display: block;
   width: 22px;
   height: 2px;
   border-radius: 1px;
 }

 .navbar-toggle .icon-bar+.icon-bar {
   margin-top: 4px;
 }

 @media (min-width: 768px) {
   .navbar-toggle {
     display: none;
   }
 }

 .navbar-nav {
   margin: 7.5px -15px;
 }

 .navbar-nav>li>a {
   padding-top: 10px;
   padding-bottom: 10px;
   line-height: 20px;
 }

 @media (max-width: 767px) {
   .navbar-nav .open .dropdown-menu {
     position: static;
     float: none;
     width: auto;
     margin-top: 0;
     background-color: transparent;
     border: 0;
     box-shadow: none;
   }

   .navbar-nav .open .dropdown-menu>li>a,
   .navbar-nav .open .dropdown-menu .dropdown-header {
     padding: 5px 15px 5px 25px;
   }

   .navbar-nav .open .dropdown-menu>li>a {
     line-height: 20px;
   }

   .navbar-nav .open .dropdown-menu>li>a:hover,
   .navbar-nav .open .dropdown-menu>li>a:focus {
     background-image: none;
   }

   .hidden-xs {
     display: none !important;
   }

 }

 @media (min-width: 768px) {
   .hidden-md {
     display: none !important;
   }

   .navbar-nav {
     float: left;
     margin: 0;
   }

   .navbar-nav>li {
     float: left;
   }

   .navbar-nav>li>a {
     padding-top: 15px;
     padding-bottom: 15px;
   }

   .navbar-nav.navbar-right:last-child {
     margin-right: -15px;
   }
 }

 @media (max-width: 1280px) and (min-width: 780px) {
   .hidden-1024 {
     display: none !important;
   }

   .toplinkBar [class="item"] span.icon {
     font-size: 16px;
     border: 1px rgba(8, 8, 8, 0.38) solid;
     padding: 6px 8px 3px 8px;
     border-radius: 5px;
     background-color: #191919;
   }

   .toplinkBar2 [class="item"] span.icon {
     font-size: 16px;
     /* border: 1px rgba(8, 8, 8, 0.38) solid; */
     padding: 6px 8px 3px 8px;
     /* border-radius: 5px; */
     /* background-color: #191919; */
   }
 }

 @media (min-width: 768px) {
   .navbar-left {
     float: left !important;
   }

   .navbar-right {
     float: right !important;
   }

 }

 .navbar-form {
   margin-left: -15px;
   margin-right: -15px;
   padding: 10px 15px;
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;
   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
   margin-top: 8px;
   margin-bottom: 8px;
 }

 @media (min-width: 768px) {
   .navbar-form .form-group {
     display: inline-block;
     margin-bottom: 0;
     vertical-align: middle;
   }

   .navbar-form .form-control {
     display: inline-block;
     width: auto;
     vertical-align: middle;
   }

   .navbar-form .input-group {
     display: inline-table;
     vertical-align: middle;
   }

   .navbar-form .input-group .input-group-addon,
   .navbar-form .input-group .input-group-btn,
   .navbar-form .input-group .form-control {
     width: auto;
   }

   .navbar-form .input-group>.form-control {
     width: 100%;
   }

   .navbar-form .control-label {
     margin-bottom: 0;
     vertical-align: middle;
   }

   .navbar-form .radio,
   .navbar-form .checkbox {
     display: inline-block;
     margin-top: 0;
     margin-bottom: 0;
     vertical-align: middle;
   }

   .navbar-form .radio label,
   .navbar-form .checkbox label {
     padding-left: 0;
   }

   .navbar-form .radio input[type="radio"],
   .navbar-form .checkbox input[type="checkbox"] {
     position: relative;
     margin-left: 0;
   }

   .navbar-form .has-feedback .form-control-feedback {
     top: 0;
   }
 }

 @media (max-width: 767px) {
   .navbar-form .form-group {
     margin-bottom: 5px;
   }
 }

 @media (min-width: 768px) {
   .navbar-form {
     width: auto;
     border: 0;
     margin-left: 0;
     margin-right: 0;
     padding-top: 0;
     padding-bottom: 0;
     -webkit-box-shadow: none;
     box-shadow: none;
   }

   .navbar-form.navbar-right:last-child {
     margin-right: -15px;
   }
 }

 .navbar-nav>li>.dropdown-menu {
   margin-top: 0;
   border-top-right-radius: 0;
   border-top-left-radius: 0;
 }

 .navbar-fixed-bottom .navbar-nav>li>.dropdown-menu {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }

 .navbar-btn {
   margin-top: 8px;
   margin-bottom: 8px;
 }

 .navbar-btn.btn-sm {
   margin-top: 10px;
   margin-bottom: 10px;
 }

 .navbar-btn.btn-xs {
   margin-top: 14px;
   margin-bottom: 14px;
 }

 .navbar-text {
   margin-top: 15px;
   margin-bottom: 15px;
 }

 @media (min-width: 768px) {
   .navbar-text {
     float: left;
     margin-left: 15px;
     margin-right: 15px;
   }

   .navbar-text.navbar-right:last-child {
     margin-right: 0;
   }

 }

 .navbar-default {
   /*--上方Menu --背景*/
   background-color: #333;
   border-bottom: 10px solid #f7f7f7;
   /*background-image: url("../images/menu_bg.gif");
  background-repeat: repeat-X;*/
 }

 .navbar-default .navbar-brand {
   color: #777777;
 }

 .navbar-default .navbar-brand:hover,
 .navbar-default .navbar-brand:focus {
   color: #5e5e5e;
   background-color: transparent;
 }

 .navbar-default .navbar-text {
   color: #777777;
 }

 .navbar-default .navbar-nav>li>a {
   color: #777777;
 }

 .navbar-default .navbar-nav>li>a:hover,
 .navbar-default .navbar-nav>li>a:focus {
   color: #333333;
   background-color: transparent;
 }

 .navbar-default .navbar-nav>.active>a,
 .navbar-default .navbar-nav>.active>a:hover,
 .navbar-default .navbar-nav>.active>a:focus {
   color: #555555;
   background-color: #e7e7e7;
 }

 .navbar-default .navbar-nav>.disabled>a,
 .navbar-default .navbar-nav>.disabled>a:hover,
 .navbar-default .navbar-nav>.disabled>a:focus {
   color: #cccccc;
   background-color: transparent;
 }

 .navbar-default .navbar-toggle {
   border-color: #dddddd;
 }

 .navbar-default .navbar-toggle:hover,
 .navbar-default .navbar-toggle:focus {
   background-color: #dddddd;
 }

 .navbar-default .navbar-toggle .icon-bar {
   background-color: #888888;
 }

 .navbar-default .navbar-collapse,
 .navbar-default .navbar-form {
   border-color: #e7e7e7;
 }

 .navbar-default .navbar-nav>.open>a,
 .navbar-default .navbar-nav>.open>a:hover,
 .navbar-default .navbar-nav>.open>a:focus {
   background-color: #e7e7e7;
   color: #555555;
 }

 @media (max-width: 767px) {
   .navbar-default .navbar-nav .open .dropdown-menu>li>a {
     color: #777777;
   }

   .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus {
     color: #333333;
     background-color: transparent;
   }

   .navbar-default .navbar-nav .open .dropdown-menu>.active>a,
   .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus {
     color: #555555;
     background-color: #e7e7e7;
   }

   .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,
   .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus {
     color: #cccccc;
     background-color: transparent;
   }
 }

 .navbar-default .navbar-link {
   color: #777777;
 }

 .navbar-default .navbar-link:hover {
   color: #333333;
 }

 .navbar-default .btn-link {
   color: #777777;
 }

 .navbar-default .btn-link:hover,
 .navbar-default .btn-link:focus {
   color: #333333;
 }

 .navbar-default .btn-link[disabled]:hover,
 fieldset[disabled] .navbar-default .btn-link:hover,
 .navbar-default .btn-link[disabled]:focus,
 fieldset[disabled] .navbar-default .btn-link:focus {
   color: #cccccc;
 }

 .navbar-inverse {
   background-color: #f7f7f7;
   border-color: #080808;
 }

 .header.navbar.navbar-inverse.navbar-fixed-top.top-nav-collapse {
   background-color: rgba(247, 247, 247, 0.97);
 }

 .navbar-inverse .navbar-brand {
   color: #777777;
 }

 .navbar-inverse .navbar-brand:hover,
 .navbar-inverse .navbar-brand:focus {
   color: #ffffff;
   background-color: transparent;
 }

 .navbar-inverse .navbar-text {
   color: #777777;
 }

 .navbar-inverse .navbar-nav>li>a {
   color: #777777;
 }

 .navbar-inverse .navbar-nav>li>a:hover,
 .navbar-inverse .navbar-nav>li>a:focus {
   color: #ffffff;
   background-color: transparent;
 }

 .navbar-inverse .navbar-nav>.active>a,
 .navbar-inverse .navbar-nav>.active>a:hover,
 .navbar-inverse .navbar-nav>.active>a:focus {
   color: #ffffff;
   background-color: #080808;
 }

 .navbar-inverse .navbar-nav>.disabled>a,
 .navbar-inverse .navbar-nav>.disabled>a:hover,
 .navbar-inverse .navbar-nav>.disabled>a:focus {
   color: #444444;
   background-color: transparent;
 }

 .navbar-inverse .navbar-toggle {
   border-color: #333333;
 }

 .navbar-inverse .navbar-toggle:hover,
 .navbar-inverse .navbar-toggle:focus {
   background-color: #333333;
 }

 .navbar-inverse .navbar-toggle .icon-bar {
   background-color: #ffffff;
 }

 .navbar-inverse .navbar-collapse,
 .navbar-inverse .navbar-form {
   border-color: #101010;
 }

 .navbar-inverse .navbar-nav>.open>a,
 .navbar-inverse .navbar-nav>.open>a:hover,
 .navbar-inverse .navbar-nav>.open>a:focus {
   background-color: #080808;
   color: #ffffff;
 }

 @media (max-width: 767px) {
   .navbar-inverse .navbar-nav .open .dropdown-menu>.dropdown-header {
     border-color: #080808;
   }

   .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
     background-color: #080808;
   }

   .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
     color: #777777;
   }

   .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover,
   .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus {
     color: #ffffff;
     background-color: transparent;
   }

   .navbar-inverse .navbar-nav .open .dropdown-menu>.active>a,
   .navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover,
   .navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus {
     color: #ffffff;
     background-color: #080808;
   }

   .navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a,
   .navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:hover,
   .navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:focus {
     color: #444444;
     background-color: transparent;
   }
 }

 .navbar-inverse .navbar-link {
   color: #777777;
 }

 .navbar-inverse .navbar-link:hover {
   color: #ffffff;
 }

 .navbar-inverse .btn-link {
   color: #777777;
 }

 .navbar-inverse .btn-link:hover,
 .navbar-inverse .btn-link:focus {
   color: #ffffff;
 }

 .navbar-inverse .btn-link[disabled]:hover,
 fieldset[disabled] .navbar-inverse .btn-link:hover,
 .navbar-inverse .btn-link[disabled]:focus,
 fieldset[disabled] .navbar-inverse .btn-link:focus {
   color: #444444;
 }


 /*================================= newslist =================================*/
 .list {
   font-size: 16px;
   font-family: 微軟正黑體, "Open Sans", sans-serif;
   border-style: solid;
   border-color: #f4a13f;
   border-width: 1px;
   margin: 10px auto 40px;
   padding: 10px;
   background-color: #FFF;
 }

 .panel-body h3 {
   font-size: 20px;
   padding: 15px 0;
 }

 .panel-body h3.app {
   font-size: 24px;
   padding: 15px 0;
   padding-left: 20px;
   border-radius: 10px;
   margin-left: -10px;
   color: #ffffff;
   font-family: 微軟正黑體, arial;
   background-color: #f4a13f;
 }

 .faq {
   font-family: 微軟正黑體;
 }

 .faq h3 {
   font-size: 20px;
   padding: 15px 0;
   color: #ED9836;
   font-weight: bold;
 }

 .faq h4 {
   font-size: 18px;
   color: #555;
   line-height: 30px;
   margin: 0 0 0 40px;
   font-weight: bold;
 }

 .faq p {
   font-size: 16px;
   margin: 0 0 20px 58px;
   color: #666666;
   line-height: 22px;
   letter-spacing: 1px;
   padding: 5px 0 15px 0;
 }

 #pagetop {
   position: absolute;
   z-index: 50;
 }

 #pagetop .page-top {
   text-align: center;
   position: fixed;
   top: 90%;
   right: 10.45%;
   margin: 5px 0;
   z-index: 99;
 }


 .page-top a {
   background: url(../images/top.png) 10px 4px no-repeat #b0abab;
   color: #FFF;
   display: block;
   font-size: 12px;
   text-indent: -9999em;
   width: 45px;
   /*border-radius: 50px;*/
   height: 20px;
   border-bottom: 2px solid #b0abab;
 }

 .page-top a:hover {
   background-color: #a0a0a0;
   border-bottom: 2px solid #E76F1A;
 }



 .faq img {
   padding: 5px;
   margin: 15px 0;
   border: 1px solid #999;
   background-color: #FFF;
 }

 .explain {
   margin-top: -34px;
   float: right;
 }

 .explain a {
   font-size: 15px;
   text-decoration: none;
   /* float: right; */
   padding-right: 20px;
   /* margin-top: -36px; */
   color: #FFF;
 }

 .explain a:hover {
   color: #333
 }

 .app-SUB {
   font-size: 20px;
   line-height: 75px;
   font-family: Arial, 微軟正黑體;
 }

 @media (min-width: 320px) and (max-width: 767px) {
   .app-SUB {
     font-size: 18px;
     line-height: 75px;
     font-family: Arial, 微軟正黑體;
   }
 }


 .app img {
   margin: 10px 0 10px 0px;
   max-width: 80%;
 }

 .CC {
   background-color: #000000;
   border-radius: 50%;
   padding: 2px 9px;
   color: #FFF;
   font-size: 22px;
   margin-right: 5px;
 }

 .IOS {

   padding: 5px;
   margin: 34px 0px;
   border-radius: \ 0 0 10px;
   border-bottom: 2px #000 solid;
 }

 .IOS img {
   background-color: #000;
   padding: 6px;
   margin: -7px -5px;
   width: 138px;
   border-radius: 10px 10px 0 0;
 }

 .Hyread3 {
   background-color: #ffffff;
   width: 174px;
   color: #f4a13f;
   font-size: 19px;
   padding: 12px;
   text-align: center;
   border-radius: 10px;
   border: 2px #f4a13f solid;
   margin-bottom: 10px;
 }

 .panel.panel-danger .panel-body p {
   white-space: nowrap;
 }

 .panel-body p {
   font-size: 16px;
   line-height: 26px;
   /*white-space: nowrap;*/
   overflow: hidden;
   text-overflow: ellipsis;
   /*bestarticle.html 熱門文章*/
 }

 .faq h2,
 .newslist-title h2 {
   font-size: 24px;
   font-weight: bold;
   margin-bottom: 10px;
   margin-left: 4px;
 }

 .list .panel-dete {
   color: #00a0e9;
   font-weight: bold;
 }

 .list .news-danger p a {
   text-decoration: none;
   color: #333;
   white-space: normal;
 }

 .list .news-danger p a:hover {
   color: #00a0e9
 }

 .newslist-title {
   margin: 30px 0;
 }

 /*================================= search-block =================================*/
 .search-block {
   padding: 20px 30px;
   font-family: 微軟正黑體, "Open Sans", sans-serif;
 }

 .search-block .login-title h2 {
   font-size: 16px;
   font-weight: bold;
   margin-bottom: 10px;
   text-align: center;
 }

 .search-block .search-title .form-horizontal,
 .search-block .search-title {
   font-weight: bold;
   margin-bottom: 10px;
 }

 .search-block input[type="radio"],
 input[type="checkbox"] {
   margin: 4px 9px 0;
   margin-top: 1px \9;
   line-height: normal;
 }

 /*================================= login-block =================================*/
 .login-block {
   padding: 20px 30px;
 }

 .login-block .login-title h2 {
   font-size: 26px;
   font-weight: bold;
   margin-bottom: 40px;
   text-align: center;
 }

 .login-block fieldset {
   border: navajowhite;
 }

 .title {
   font-size: 16px;
   line-height: 28px;
   color: #333;
   margin-bottom: 20px;
 }

 .search-block .form-w10 {
   width: 10%;
 }

 .search-block .form-w40 {
   width: 40%;
 }

 .search-block .form-w30 {
   width: 30%;
 }

 .search-block .form-w10 {
   width: 10%;
 }

 .search-block .form-control {
   display: inline-block;
   /*width: 30%;*/
   height: 34px;
   margin: 10px 0;
   padding: 4px 12px;
   font-size: 16px;
   /*line-height: 1.42857143;*/
   color: #555;
   background-color: #fff;
   background-image: none;
   border: 1px solid #7f7f7f;
   border-radius: 0px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
   -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
   -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
   transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 }

 .login-block .form-control {
   display: block;
   width: 100%;
   height: 34px;
   margin: 10px 0;
   padding: 6px 12px;
   font-size: 16px;
   line-height: 1.42857143;
   color: #555;
   background-color: #fff;
   background-image: none;
   border: 1px solid #7f7f7f;
   border-radius: 0px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
   -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
   -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
   transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 }

 select[class=form-control-M] {
   width: auto
 }

 input[class=form-control-S] {
   width: 50%;
   margin: 10px 0;
   padding: auto 5px;
   font-size: 16px;
   line-height: 1.42857143;
   color: #555;
   background-color: #fff;
   border: 1px solid #7f7f7f;
   border-radius: 0px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
   -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
   -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
   transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 }

 select[name=op],
 input[class=form-control-M],
 .form-control-M {
   width: 100%;
   margin: 10px 0;
   padding: auto 5px;
   font-size: 16px;
   line-height: 1.42857143;
   color: #555;
   background-color: #fff;
   border: 1px solid #7f7f7f;
   border-radius: 0px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
   -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
   -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
   transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 }

 .login-block .login-btn {
   background-color: #f4a13f;
   width: 100%;
   text-align: center;
   padding: 20px;
   color: #FFF;
   font-size: 20px;
   margin: 15px 0;
 }

 /* 修改密碼*/
 .login-block .login-btn.repw {
   width: 45%;
   display: inline-block;
   margin-right: 2px;
 }


 .search-block .login-btn {
   background-color: #f4a13f;
   cursor: pointer;
   text-align: center;
   padding: 20px;
   color: #FFF;
   font-size: 20px;
   margin: 15px 0;
 }

 .search-block .login-btn:hover,
 .login-block .login-btn:hover {
   background-color: #CCC
 }

 .search-block a,
 .login-block a {
   text-align: center;
   text-decoration: none;
 }

 .search-block .form-horizontal p,
 .login-block .form-horizontal p {
   font-size: 13px;
 }

 /*================================= MENBER BLOCK ================================*/

 .menber-block {
   margin-top: 0px;
   font-size: 15px;
   text-align: center;
 }

 .menber-block .information {}

 .form-control {
   width: 70%
 }

 .menber-block .information .infor {
   color: #818181
 }

 .menber-block .item a {
   color: #FFF;
   text-decoration: none;
 }

 .menber-block .leftmenu.active {
   background-color: #f4a13f;
   border-bottom: 6px solid #d7d7d7;
   padding: 20px;
   font-size: 18px;
   margin: 5px;
 }

 .menber-block .leftmenu {
   background-color: #767676;
   border-bottom: 6px solid #d7d7d7;
   padding: 20px;
   font-size: 18px;
   margin: 5px;
 }

 .menber-block .leftmenu:hover {
   background-color: #CCC;
   border-bottom: 6px solid #d7d7d7;
   padding: 20px;
   font-size: 18px;
   margin: 5px;
 }

 .menber-block .list {
   border: 3px solid #f4a13f;
   font-size: 16px;
   font-family: 微軟正黑體, "Open Sans", sans-serif;
   ;
   margin: 5px auto 40px -35px;
   padding: 10px;
   background-color: #FFF;
   min-height: 550px;
 }

 .menber-block .infor-list {
   display: table;
   border: 1px solid #afafaf;
   padding: 15px 15px;
   background-color: #f5f5f5;
   margin: 10px;
   width: 98%;
   height: 300px;
 }

 .menber-block .detail .house {
   border: 1px solid #00a0ea;
   background-color: #00a0ea;
   text-decoration: none;
   display: inline-block;
   width: auto;
   margin: 7px 0 4px;
   padding: 0 3px;
   color: #FFF;
 }


 /* == Checkbox == */
 .toolbarblock input[type="checkbox"] {
   display: none;
 }

 .toolbarblock input[type="checkbox"]+label {
   color: #ffffff;
   font-family: Arial, sans-serif;
   font-size: 14px;
   cursor: pointer;
 }

 .toolbarblock input[type="checkbox"]+label span {
   display: inline-block;
   width: 19px;
   height: 19px;
   margin: -1px 4px 0 0;
   vertical-align: middle;
   border: 1px solid #666;
   background-color: #ffffff;
 }

 .toolbarblock input[type="checkbox"]:checked+label span {
   background-color: #ffffff;
   color: #000000;
   border: 1px solid #ccc;
 }

 .toolbarblock input[type="checkbox"]+label span,
 input[type="checkbox"]:checked+label span {
   -webkit-transition: color 0.4s linear;
   -o-transition: color 0.4s linear;
   -moz-transition: color 0.4s linear;
   transition: color 0.4s linear;
 }

 /*================================= ecourse ================================*/
 .menber-block .ecourse {
   margin: 12px 0;
   background-color: #ececec;
   padding: 15px 10px;
 }

 .ecourse .toolbar {
   margin-top: -5px;
 }

 .ecourse .deta {
   font-size: 12px;
   display: inline-block;
   text-align: left;
 }

 .ecourse mark {
   background: #ff0;
   color: #000;
   padding: 0px;
   margin-left: 4px;
 }

 .menber-block .detail {
   text-align: left;
   margin-left: -5px;
 }

 .menber-block .detail .title {
   font-size: 20px;
   font-weight: 600;
   max-height: 53px;
   overflow: hidden;
   margin-bottom: 10px;
 }

 .hot {
   color: red;
 }

 .menber-block .detail .deta {
   line-height: 28px;
   font-size: 15px;
   display: block;
 }

 .menber-block .infor-list .cover {
   border: 1px solid #a6a6a6;
   margin: 5px 5px 0px 5px;
 }

 @media (min-width: 320px) and (max-width: 767px) {
   .menber-block .infor-list .cover img {
     max-height: none !important;
   }

   .menber-block .infor-list {
     display: table;
     border: 1px solid #afafaf;
     padding: 10px;
     background-color: #f5f5f5;
     margin: 2px 0;
     width: 100%;
     height: 300px;
   }
 }

 .menber-block .infor-list .cover img {
   padding: 3px;
   width: 100%;
   overflow: hidden;
   max-height: 170px;
 }

 .menber-block .infor-list .cover {
   /*    max-height: 195px;
    min-height: 195px;*/
   overflow: hidden;
 }

 .subscribe {
   position: absolute;
   bottom: 0px;
   top: 2px;
   right: -12px;
 }

 .icon.icon-times-circle.subscribe {
   color: #666 !important;
   font-size: 31px;
   height: 30px;
   text-align: center;
   padding-right: 7px;
   vertical-align: middle;
 }

 .title2 {
   background-color: #f4a13f;
   line-height: 28px;
   color: #FFF;
   font-size: 17px;
   padding: 5px 0;
   margin: 10px;
 }

 .infor strong {
   color: #e62e2e;
 }

 .rentalbook {
   display: inline;
   text-align: left;
 }

 .point_buttens {
   text-align: left;
   margin: 0 15px 20px 15px;
 }

 .lend-record {
   display: inline-block;
   padding: 10px 20px;
   float: right;
   margin-top: -53px;
   font-size: 18px;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   outline: none;
   color: #fff;
   background-color: #f4a13f;
   border: none;
   border-radius: 10px;
   box-shadow: 0 5px #635b5b;
 }

 .lend-record:hover {
   background-color: #f4a13f
 }

 .lend-record:active {
   background-color: #FF5722;
   box-shadow: 0 5px #666;
   transform: translateY(4px);
 }

 @media screen and (max-device-width: 480px) {
   .point_buttens img {
     float: none !important;
     margin: 10px 0px !important;
   }
 }

 .point_buttens img {
   float: right;
   margin: -50px;
   margin-right: 15px;
 }

 .toolbar {
   display: inline-block;
 }

 .infor {
   padding: 20px;
 }

 .infor span {
   color: #818181;
   line-height: 1.5;
 }

 .infor p {
   padding: 9px;
   margin: 7px 0 7px -4px;
   color: #767676;
   font-weight: bold;
   display: table;
   background-color: #f3f3f3;
   /* border: 1px solid #f4a13F; */
   border-radius: 5px;
 }

 /* 20220321 新增 */
 .infor h2 {
   padding: 9px;
   margin: 7px 0 7px -4px;
   color: #ffffff;
   font-weight: bold;
   font-size: 1.7rem;
   display: table;
   background-color:crimson;
   /* border: 1px solid #f4a13F; */
   border-radius: 5px;
 }

  .infor h3{
    font-size: 2rem;
    line-height: 1.5;
    color: crimson;
  }
  .infor h4 {
    font-size: 1.5rem;
    line-height: 1.5;
    color:initial;
    display: inline-block;
    padding: 1rem 0;
  }
  .infor .link{
    background-color: #ffedd7;
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid #f4a13f;
    width: fit-content;
  }
  .infor table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }

  .infor td,
  .infor th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
  }
  .infor .btn{
    width: fit-content;
    margin: 3vh 0;
  }

 .infor span.red {
   color: #f4a13f;
 }

 .menber-block .ecourse .toolbarblock {
   float: none !important;
 }

 .menber-block .list .toolbarblock {
   display: inline-block;
   float: left;
 }

 .menber-block .icon-exclamation-circle {
   display: inline-block;
   vertical-align: middle;
   font-size: 28px;
   color: #333;
 }

 .menber-block .icon-exclamation-circle:hover {
   color: #949494
 }

 /*線上閱讀*/
 .toolbar .btn-green:hover,
 .toolbar .btn-green:focus,
 .toolbar .btn-green:active {
   border-color: #009944;
   background-color: #FFF;
   border-width: 2px;
 }

 /*試閱*/
 .toolbar .btn-brwond:hover,
 .toolbar .btn-brwond:focus,
 .toolbar .btn-brwond:active {
   border-color: #a54b00;
   background-color: #FFF;
   border-width: 2px;
 }

 /*借閱*/
 .toolbar .deblue:hover,
 .toolbar .deblue:focus,
 .toolbar .deblue:active {
   border-color: #14227f;
   background-color: #FFF;
   border-width: 2px;
 }

 /*最愛*/
 .toolbar .btn-red:hover,
 .toolbar .btn-red:focus,
 .toolbar .btn-red:active {
   border-color: #b2006e;
   background-color: #FFF;
   border-width: 2px;
 }

 /*預約*/
 .toolbar .btn-yellow:hover,
 .toolbar .btn-yellow:focus,
 .toolbar .btn-yellow:active {
   border-color: #ffed19;
   background-color: #FFF;
   border-width: 2px;
 }

 /*續借*/
 .toolbar .btn-pink1:hover,
 .toolbar .btn-pink1:focus,
 .toolbar .btn-pink1:active {
   border-color: #ea68a2;
   background-color: #FFF;
   border-width: 2px;
 }

 /*歸還*/
 .toolbar .btn-orange-1:hover,
 .toolbar .btn-orange-1:focus,
 .toolbar .btn-orange-1:active {
   border-color: #F4A13F;
   background-color: #FFF;
   border-width: 2px;
 }

 /*題庫測驗*/
 .toolbar .btn-d1d400:hover,
 .toolbar .btn-d1d400:focus,
 .toolbar .btn-d1d400:active {
   border-color: #d1d400;
   background-color: #FFF;
   border-width: 2px;
 }

 /*評量紀錄*/
 .toolbar .btn-c86f00:hover,
 .toolbar .btn-c86f00:focus,
 .toolbar .btn-c86f00:active {
   border-color: #c86f00;
   background-color: #FFF;
   border-width: 2px;
 }

 /*附件下載*/
 .toolbar .btn-blue:hover,
 .toolbar .btn-blue:focus,
 .toolbar .btn-blue:active {
   border-color: #00B7EE;
   background-color: #FFF;
   border-width: 2px;
 }

 .infor-list .icon {
   color: #666 !important;
   font-size: 20px;
   text-align: center;
   padding-right: 7px;
   vertical-align: middle;
 }

 .btn-default {
   padding: 2px 5px 0px 5px;
   margin-top: 5px;
   margin-bottom: 5px;
   border-width: 2px;
 }

 @media (min-width: 320px) and (max-width: 768px) {
   .menber-block .list {
     margin: 10px auto;
   }
 }

 /*================================= LOGIN BLOCK =================================*/


 body {
   background-color: #f7f7f7;
 }


 /*網站公告1*/

 .news {
   /*  border-color: #b9b9b9;
    border-width: 3px;
    border-style: solid;*/
   background-color: #FFF;
   font-size: 16px;
   font-family: 微軟正黑體, "Open Sans", sans-serif;
   margin-bottom: 15px;
 }

 .news .news-list {
   overflow: hidden;
 }

 .news .news-list ul {
   margin: 5px;
   color: #6d6d6d;
   /*    list-style-type: square;
    list-style-position: inside;*/
 }

 .news .news-list ul .s {
   list-style-type: square;
 }

 .news .news-list ul a {
   text-overflow: ellipsis;
   overflow: hidden;
   font-size: 15px;
   color: #7c7c7c;
   -moz-margin-left: 0px;
   -webkit-margin-left: -8px;
   margin-left: 0px;
   -o-transition: color .2s linear, background .2s linear;
   -moz-transition: color .2s linear, background .2s linear;
   -webkit-transition: color .2s linear, background .2s linear;
   transition: color .2s linear, background .2s linear;
 }

 .news .news-list ul a:hover {
   color: #f4a13f;
   text-decoration: none;
 }

 .news .news-list ul li {
   white-space: pre;
   border-bottom: #DDD 1px dotted;
   line-height: 2.1em;
   width: 100%;
   padding-left: 5px;
   text-overflow: ellipsis;
   overflow: hidden;
 }

 .news .news-list ul li:last-child {
   border-bottom: 0;
 }

 .news-heading {
   font-size: 17px;
   color: #6d6d6d;
   background-color: #ededed;
   border-bottom: 2px solid #e1e1e1;
   padding: 7px 9px;
 }

 .news-heading span.more {
   float: right;
 }

 .news-heading span.more a {
   color: #333;
   font-size: 15px;
 }


 @media (max-width: 767px) {
   .news {
     /*  border-color: #b9b9b9;
    border-width: 3px;
    border-style: solid;*/
     background-color: #FFF;
     font-size: 16px;
     font-family: 微軟正黑體, "Open Sans", sans-serif;
     margin-bottom: 15px;
     display: none;
   }
 }

 /*網站公告2*/

 @media (min-width: 767px) {
   .news2 {
     /*  border-color: #b9b9b9;
    border-width: 3px;
    border-style: solid;*/
     background-color: #FFF;
     font-size: 16px;
     font-family: 微軟正黑體, "Open Sans", sans-serif;
     margin-bottom: 15px;
     display: none;
   }
 }

 .news2 .news-list {
   overflow: hidden;
 }

 .news2 .news-list ul {
   margin: 5px;
   color: #6d6d6d;
   /*    list-style-type: square;
    list-style-position: inside;*/
 }

 .news2 .news-list ul .s {
   list-style-type: square;
 }

 .news2 .news-list ul a {
   text-overflow: ellipsis;
   overflow: hidden;
   font-size: 15px;
   color: #7c7c7c;
   -moz-margin-left: 0px;
   -webkit-margin-left: -8px;
   margin-left: 0px;
   -o-transition: color .2s linear, background .2s linear;
   -moz-transition: color .2s linear, background .2s linear;
   -webkit-transition: color .2s linear, background .2s linear;
   transition: color .2s linear, background .2s linear;
 }

 .news2 .news-list ul a:hover {
   color: #f4a13f;
   text-decoration: none;
 }

 .news2 .news-list ul li {
   white-space: pre;
   border-bottom: #DDD 1px dotted;
   line-height: 2.1em;
   width: 100%;
   padding-left: 5px;
   text-overflow: ellipsis;
   overflow: hidden;
 }

 .news2 .news-list ul li:last-child {
   border-bottom: 0;
 }

 .news2 .news-heading {
   font-size: 17px;
   color: #6d6d6d;
   background-color: #ededed;
   border-bottom: 2px solid #e1e1e1;
   padding: 7px 9px;
 }

 .news2 .news-heading span.more {
   float: right;
 }

 .news2 .news-heading span.more a {
   color: #333;
   font-size: 15px;
 }

 @media (max-width: 768px) {
   .news2 {
     /*  border-color: #b9b9b9;
    border-width: 3px;
    border-style: solid;*/
     background-color: #FFF;
     font-size: 16px;
     font-family: 微軟正黑體, "Open Sans", sans-serif;
     margin-bottom: 15px;
   }
 }

 /*隨機推薦 BESTBOOK STAR*/
 .bestbook {
   margin: 30px 0;
 }

 .bestbook .bestbook-heading {
   border-bottom: 3px solid #333;
   font-size: 20px;
   padding-bottom: 5px;
 }

 .bestbook .bestbook-heading .more {
   float: right;
   color: #337ab7;
   font-size: 12px;
 }

 .bestbook .bestbook-heading .more:hover {
   text-decoration: none;
   color: #333;
 }

 @media screen and (max-width: 320px) {
   .bestbook .bestbook-heading .more {
     margin-top: 6px;
   }
 }

 /* hover */
 .booklistblock {
   display: block;
   overflow: hidden;
   text-align: center;
   margin-bottom: 10px;
 }

 .magazineblock {
   display: block;
   overflow: hidden;
   text-align: center;
   margin-bottom: 20px;
   background-color: #eeeeee;
   padding: 8px;
 }


 #booklist {
   padding: 0px 0px 15px;
   padding: 10px;
   margin-top: 20px;
   font-family: "微軟正黑體", "Open Sans", sans-serif;
 }

 .booklist .bestbook-heading {
   border-bottom: 3px solid #333;
   font-size: 20px;
   margin: 10px 0;
   padding-bottom: 5px;
 }

 .booklist .bestbook-heading .more {
   float: right;
   color: #337ab7;
   font-size: 12px;
 }

 .booklist .bestbook-heading .more:hover {
   text-decoration: none;
   color: #333;
 }

 @media (max-width: 736px) and (min-width: 415px) {

   .AVlistblock,
   .magazineblock,
   .booklistblock {
     display: block;
     overflow: hidden;
     text-align: center;
     margin-bottom: 20px;
     width: 65%;
     margin: 0 auto;
   }

   .booklist .item {
     /*height: 290px;*/
     height: auto;
   }

   .AVlistblock section .block,
   .magazineblock section .block,
   .booklistblock section .block {
     height: 180px;
   }
 }

 @media (width: 435px) {

   .AVlistblock,
   .magazineblock,
   .booklistblock {
     display: block;
     overflow: hidden;
     text-align: center;
     margin-bottom: 20px;
     width: 95%;
     margin: 0 auto;
   }
 }


 @media (max-width: 1024px) and (min-width: 768px) {
   .booklist .item {
     padding-left: 5px;
     padding-right: 5px;
   }

   .magazineblock section .block,
   .booklistblock section .block {
     height: 147px !important;
     line-height: 147px !important;
   }

   .AVlistblock section .block {
     height: 90px !important;
   }

   .bookDetail section .block {
     height: 200px !important;
     margin: 10px !important;
     background: white !important;
   }

 }

 @media (max-width: 767px) and (min-width: 320px) {

   .magazineblock section .block,
   .booklistblock section .block {
     height: 198x !important;
     line-height: 198px !important;
     margin: 5px !important;
     margin-bottom: 0px !important;
     /*background-color: transparent!important;*/
     border: none !important;
     box-shadow: none !important;
     background-image: none !important;
   }

   .AVlistblock section .block {
     height: 105px !important;
     margin: 5px 0 !important;
   }
 }

 @media (max-width: 767px) and (min-width: 320px) {
   .bookDetail section .block {
     height: 160px !important;
     margin: 10px !important;
     background: white !important;
   }
 }

 @media (max-width: 1024px) and (min-width: 320px) {

   .AVlistblock section .text,
   .AVlistblock section .txt-black,
   .AVlistblock .icon {
     /*display:none*/
   }

   .AVlistblock section .text {
     display: none !important;
   }

   .booklistblock section .text,
   .booklistblock section .txt-black,
   .booklistblock .icon {}

   .magazineblock section .text,
   .magazineblock section .txt-black,
   .magazineblock .icon {
     display: none
   }
 }

 .AVlistblock section:active,
 .AVlistblock section:hover,
 .magazineblock section:active,
 .magazineblock section:hover,
 .booklistblock section:active,
 .booklistblock section:hover {
   /*height: 250px;*/
   margin-top: 0px;
 }

 /*.booklistblock section .blocklist{
    border: 1px solid #999;
    box-shadow: 0px 2px 1px #ccc;
    margin: 5px;
}*/
 .magazineblock section .block {
   height: 192px;
   /*垂直置中*/
   line-height: 191px;
   max-width: 100%;
   display: block;
   /*垂直置中*/
   background-color: #EEE;
   #border: 2px solid #fff;
   /* border-bottom: 2px solid #EEE; */
   overflow: hidden;
   /* border: 1px solid #999; */
   box-shadow: 0px 1px 1px #999;
   margin: 5px;
   #background-image: url(../images/block_bg.gif);
 }

 .AVlistblock section .block {
   height: 120px;
   background-color: #EEE;
   /* border: 1px solid #fff; */
   /* border-bottom: 2px solid #EEE; */
   overflow: hidden;
   /* border: 1px solid #999; */
   box-shadow: 0px 1px 1px #999;
   margin: 5px;
   background-image: url(../images/block_bg.gif);
 }

 .panel-choice .booklistblock section .block {
   height: 230px;
   /*首頁書封高度*/
   /*垂直置中*/
   line-height: 230px;
   max-width: 100%;
   display: block;
   /*垂直置中*/
   background-color: #EEE;
   /* border: 1px solid #fff; */
   /* border-bottom: 2px solid #EEE; */
   overflow: hidden;
   /* border: 1px solid #999; */
   box-shadow: 0px 1px 1px #999;
   margin: 10px;
   #background-image: url(../images/block_bg.gif);
 }

 .booklistblock section .block {
   height: 195px;
   /*首頁書封高度*/
   /*垂直置中*/
   line-height: 195px;
   max-width: 100%;
   display: block;
   /*垂直置中*/
   background-color: #EEE;
   /* border: 1px solid #fff; */
   /* border-bottom: 2px solid #EEE; */
   overflow: hidden;
   /* border: 1px solid #999; */
   box-shadow: 0px 1px 1px #999;
   margin: 10px;
   #background-image: url(../images/block_bg.gif);
 }

 .booklistblock section .publisherBlock {
   height: 235px;
   /*首頁書封高度*/
   /*垂直置中*/
   line-height: 235px;
   max-width: 85%;
   display: block;
   /*垂直置中*/
   background-color: #EEE;
   /* border: 1px solid #fff; */
   /* border-bottom: 2px solid #EEE; */
   overflow: hidden;
   /* border: 1px solid #999; */
   box-shadow: 0px 1px 1px #999;
   margin: 10px;
   #background-image: url(../images/block_bg.gif);
 }

 .AVlistblock section img,
 .magazineblock section img,
 .booklistblock section img {
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -ms-transition: all .3s;
   -o-transition: all .3s;
   transition: all .3s;
   left: -10%;
   /*padding: 2px;*/

 }

 .AVlistblock section,
 .magazineblock section,
 .booklistblock section {
   position: relative;
   -webkit-box-shadow: 0px 0px 0px 0px rgba(201, 201, 201, 1);
   -moz-box-shadow: 0px 0px 0px 0px rgba(201, 201, 201, 1);
   -ms-box-shadow: 0px 0px 0px 0px rgba(201, 201, 201, 1);
   -o-box-shadow: 0px 0px 0px 0px rgba(201, 201, 201, 1);
   box-shadow: 0px 0px 0px 0px rgba(201, 201, 201, 1);
   /*float:left;*/
   text-align: center;
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -ms-transition: all .3s;
   -o-transition: all .3s;
   transition: all .3s;
   overflow: hidden;
 }

 .AVlistblock section:hover img,
 .magazineblock section:hover img,
 .booklistblock section:hover img {
   opacity: 0.3;
   /* IE 8 */
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
   /* IE 5-7 */
   filter: alpha(opacity=50);
 }

 .AVlistblock section .text,
 .magazineblock section .text,
 .booklistblock section .text {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   display: table;
   /*margin-left: -250px;*/
 }

 .AVlistblock section:active .text,
 .AVlistblock section:hover .text,
 .magazineblock section:active .text,
 .magazineblock section:hover .text,
 .booklistblock section:active .text,
 .booklistblock section:hover .text {
   margin-left: 0px;
 }

 .AVlistblock section span,
 .magazineblock section span,
 .booklistblock section span {
   width: 200px;
   padding-top: 4px;
   display: table-cell;
   vertical-align: middle;
   color: black;
   opacity: 0;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   /* IE 5-7 */
   filter: alpha(opacity=0);
   /*text-shadow: 1px 1px 0px rgba(255,255,255,0.3);*/
 }

 .AVlistblock section:active span,
 .AVlistblock section:hover span,
 .magazineblock section:active span,
 .magazineblock section:hover span,
 .booklistblock section:active span,
 .booklistblock section:hover span {
   opacity: 1;

   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

   /* IE 5-7 */
   filter: alpha(opacity=100);
 }

 .AVlistblock section:active img,
 .AVlistblock section:hover img,
 .magazineblock section:active img,
 .magazineblock section:hover img,
 .booklistblock section:active img,
 .booklistblock section:hover img {
   -webkit-filter: blur(0.5px);
   filter: blur(0.5px);
   opacity: 0.5;

   /* IE 8 */
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

   /* IE 5-7 */
   filter: alpha(opacity=50);
 }

 .AVlistblock section span a.button,
 .magazineblock section span a.button,
 .booklistblock section span a.button {
   display: table;
   text-align: center;
   color: #FFF;
   height: 20px;
   width: 115px;
   text-decoration: none;
   font-size: 13px;
   font-family: 微軟正黑體, "Open Sans", sans-serif;
   font-weight: normal;
   padding: 5px;
   margin: 3px auto;
   border: 1px solid #333;
   border-radius: 9px;
   background: #333;
   /* Old browsers */
 }

 .hearted {
   background: #777 !important;
   border: 1px solid #777 !important;
 }

 /* == Checkbox == */

 /*input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] + label {
  color: rgb(41, 43, 42);
  font-family: Arial, sans-serif;
  font-size: 14px;
  cursor:pointer;
}
input[type="checkbox"] + label span {
  display: inline-block;
  width: 38px;
  height: 34px;
  margin: -1px 4px 0 0;
  vertical-align: middle;

  background: url(../images/favor.png) no-repeat;
}
input[type="checkbox"]:checked + label span {

  background: url(../images/favor-1.png) no-repeat;
}
input[type="checkbox"] + label span, input[type="checkbox"]:checked + label span {
  -webkit-transition: background 0.4s linear;
  -o-transition: background 0.4s linear;
  -moz-transition: background 0.4s linear;
  transition: background 0.4s linear;
*/
 /* == Checkbox == */

 .favorite {
   font-size: 30px;
   clear: both;
   margin-left: 32px;
   bottom: 12%;
   position: absolute;
 }

 span.button.favor:hover,
 span.button.favor:visited {
   background-position: 50% 0 !important;
 }

 span.button.favor {
   background: url(../images/favor.png) 50% 100% no-repeat;
   width: 35px;
   height: 35px;
   text-indent: -9999px;
   display: block;
   cursor: pointer;
 }

 span.button.favorend {
   background: url(../images/favor.png) 50% 0 no-repeat;
   width: 35px;
   height: 35px;
   text-indent: -9999px;
   display: block;
   cursor: pointer;
 }

 /*span.button.favor{
      content: "\39";
    font-family: "untitled-font-1" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
span.button.favor:before{
    content: "\39";
    font-family: "untitled-font-1" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}*/


 /*span.button.favor:hover {
    text-decoration: none;
    content: "\38";
    font-family: "untitled-font-1" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}*/
 /* 書封Hover 效果Icon*/
 .txt-black p {
   margin: 10% 0;
 }

 .AVlistblock .txt-black p {
   margin: 5% 0;
 }

 .smiocn .icon {
   margin: 0px;
   color: rgba(57, 57, 57, 0.7) !important;
   overflow: hidden;
   float: left;
   font-size: 20px;
   text-align: left;
   border-radius: 5px;
   margin: 0 2px 0 4px;
 }

 /* 書封Hover 效果Icon*/
 .AVlistblock .button .icon,
 .magazineblock .button .icon,
 .booklistblock .button .icon {
   margin: 0px;
   color: #FFF !important;
   overflow: hidden;
   float: left;
   font-size: 20px;
   text-align: left;
   border-radius: 5px;
   margin: 0 2px 0 4px;
 }

 .AVlistblock .button .icon:active,
 .AVlistblock .button .icon:hover,
 .magazineblock .button .icon:active,
 .magazineblock .button .icon:hover,
 .booklistblock .button .icon:active,
 .booklistblock .button .icon:hover {
   background-color: #777;
 }

 .AVlistblock a.button:active,
 .AVlistblock a.button:hover,
 .magazineblock a.button:active,
 .magazineblock a.button:hover,
 .booklistblock a.button:active,
 .booklistblock a.button:hover {
   background-color: #777;
 }

 @media (max-width: 1280px) and (min-width: 320px) {

   /* 書封Hover 效果Icon*/
   .AVlistblock .icon,
   .magazineblock .icon,
   .booklistblock .icon {
     margin: 0px;
     color: #393939 !important;
     overflow: hidden;
     float: left;
     font-size: 20px;
     text-align: left;
     border-radius: 5px;
     margin: 0 2px 0 4px;
   }

   .AVlistblock .button .icon:active,
   .AVlistblock .button .icon:hover,
   .magazineblock .button .icon:active,
   .magazineblock .button .icon:hover,
   .booklistblock .button .icon:active,
   .booklistblock .button .icon:hover {
     background-color: #777;
   }

   /* 20170505*/
   .AVlistblock .caption,
   .magazineblock .caption,
   .booklistblock .caption {
     margin-top: 0px !important;
   }

   /* 20170505*/
 }

 .AVlistblock .caption,
 .magazineblock .caption,
 .booklistblock .caption {
   margin: 5px;
   /* height: 100px; */
   max-height: 95px;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 h6.owl-title {
   min-height: 58px;
   max-height: 58px;
   /*雜誌頁 雜誌類型被蓋掉*/
   overflow: hidden;
   text-align: left;
   /*首頁手機板會跑版*/
 }

 /* 2021/6/18首頁新增的雜誌區塊 */
 #randomBooksDiv h6.owl-title {
   white-space: nowrap;
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;

 }

 .AVlistblock .caption h6.owl-title {
   min-height: none !important;
   max-height: none !important;
   overflow: hidden;
   text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

 .AVlistblock .caption p,
 .magazineblock .caption p,
 .booklistblock .caption p {
   height: 42px;
   font-size: 13px;
 }


 .magazineblock .caption h6 a {
   font-size: 15px;
   color: #333;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 .booklistblock .caption h6 a {
   font-size: 15px;
   color: #333;
 }

 .booklistblock .caption h6 a:hover,
 .AVlistblock .caption h6 a:hover {
   color: #f4a13f;

 }

 .AVlistblock .caption h6 a {
   font-size: 15px;
   color: #333;
   max-height: 50px;
 }

 /* hover */

 .panel-choice {
   /*margin-top: 20px;*/
   display: block;
   position: relative;
   margin-bottom: 10px;
 }

 .panel-choice #choice {
   margin-top: 0px;
   padding: 0px;
   background-color: #BED5DB;
 }

 .panel-choice.panel-danger {
   margin-top: 0px;
 }

 .panel-choice #choice.author {
   background-color: #f7f7f7;
 }

 #choice.author .item {
   margin: -3px 10px;
   /*padding: 0px 15px;*/
 }

 /*.panel-choice #choice.author .owl-block{width: 150px;max-height: 210px;}*/

 .panel-choice #choice .item .caption {
   margin-top: 5px
 }

 .panel-choice .panel-heading {
   padding: 10px;
   color: #333333;
   font-size: 18px;
   border-bottom: solid 2px #a1c1ca;
   background-color: #ffffff;
 }

 .panel-choice .panel-heading.bluebg {
   background-color: #00A0EA;
   color: #FFF;
 }

 @media (max-width: 667px) and (min-width: 320px) {
   .panel-choice .panel-heading.bluebg {
     text-align: center !important;
     background-color: #00A0EA;
     height: 60px;
     margin: 0 auto;
   }

   .panel-choice .panel-heading.bluebg span {
     text-align: center !important;
     margin: 0 auto !important;
     float: none !important;
   }
 }

 .panel-choice .panel-heading.bluebg span {
   float: right;
   font-size: 14px;
 }

 .panel-choice .panel-heading .more {
   float: right;
   color: #337ab7;
   font-size: 12px;
 }

 .panel-choice .panel-heading .more:hover {
   text-decoration: none;
   color: #333
 }

 .index-board {
   background-color: #FFF;
   border-style: solid;
   border-width: 0px;
   border-color: #f4a13f;
   padding: 25px 25px 25px 25px;
   /*margin-bottom: 15px;*/
   margin-top: 15px;
   margin-right: 1px;
   font-family: 微軟正黑體;
 }

 .index-board .board-tilte {
   font-size: 20px;
   text-align: center;
   font-weight: 600;
 }

 .index-board p {
   text-align: center;
 }

 .index-board img {
   width: 90%;
   padding: 4px;
   margin: 10px;
   border-width: 1px;
   border-style: solid;
   border-color: #999;
 }

 .index-board ul {
   margin: 10px 0px 10px -3px;
 }

 .index-board li {
   list-style-type: none;
   line-height: 23px;
   counter-increment: title1;
   font-size: 15px;
   margin-left: 8px;
   border-bottom: #FFF 11px solid;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

 .index-board li:hover {
   background-color: #F7F7F7;
 }

 .index-board li a {
   color: #7c7c7c
 }

 .index-board li a:hover {
   color: #F4A13F;
   text-decoration: none;
 }

 .index-board li .cup::before {
   background-color: #333;
   display: block;
 }

 .index-board li::before {
   content: counter(title1);
   font-size: 18px;
   color: #ffffff;
   background-color: #ccc;
   margin-right: 5px;
   padding: 4px 8px;

   font: normal 14px "Times New Roman", Times, serif;
 }



 li.cup::before {
   display: none;
 }

 .no01 {
   position: absolute;
   width: 36px;
   height: 35px;
   font-size: 26px;
   font-family: serif;
   line-height: 33px;
   padding-left: 11px;
   color: #FFF;
   background-color: #F4A13F;
   top: 79px;
   float: left;
   left: 39px;
 }

 /*=================================ROW NO Padding=================================*/

 @media all and (transform-3d),
 (-webkit-transform-3d) {

   /*=================================Carousel Slider=================================*/
   .carousel-inner>.item {
     -webkit-transition: -webkit-transform 0.6s ease-in-out;
     -moz-transition: -moz-transform 0.6s ease-in-out;
     -o-transition: -o-transform 0.6s ease-in-out;
     transition: transform 0.6s ease-in-out;
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     backface-visibility: hidden;
     -webkit-perspective: 1000;
     -moz-perspective: 1000;
     perspective: 1000;
   }

   .carousel-inner>.item.next,
   .carousel-inner>.item.active.right {
     -webkit-transform: translate3d(100%, 0, 0);
     transform: translate3d(100%, 0, 0);
     left: 0;
   }

   .carousel-inner>.item.prev,
   .carousel-inner>.item.active.left {
     -webkit-transform: translate3d(-100%, 0, 0);
     transform: translate3d(-100%, 0, 0);
     left: 0;
   }

   .carousel-inner>.item.next.left,
   .carousel-inner>.item.prev.right,
   .carousel-inner>.item.active {
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
     left: 0;
   }
 }

 .carousel-inner>.active,
 .carousel-inner>.next,
 .carousel-inner>.prev {
   display: block;
 }

 .carousel-inner>.active {
   left: 0;
 }

 .carousel-inner>.next,
 .carousel-inner>.prev {
   position: absolute;
   top: 0;
   width: 100%;
 }

 .carousel-inner>.next {
   left: 100%;
 }

 .carousel-inner>.prev {
   left: -100%;
 }

 .carousel-inner>.next.left,
 .carousel-inner>.prev.right {
   left: 0;
 }

 .carousel-inner>.active.left {
   left: -100%;
 }

 .carousel-inner>.active.right {
   left: 100%;
 }

 .carousel-control {
   /* 左右控制*/
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   font-size: 60px;
   color: #ffffff;
   text-align: center;
   background-image: none;
 }

 .carousel {
   position: relative;
   margin-bottom: 10px;

   overflow: hidden;
   clear: both;
 }

 .carousel-control.left {
   right: auto;
   left: 0;
   background-image: none;
 }

 .carousel-control.right {
   left: auto;
   right: 0;
   background-image: none;
 }

 .carousel-control:hover,
 .carousel-control:focus {
   outline: 0;
   color: #ffffff;
   text-decoration: none;
   opacity: 0.9;
   filter: alpha(opacity=90);
 }

 .carousel-control .fa {
   position: absolute;
   top: 50%;
   z-index: 5;
   padding: 1em;
   font-size: 24px;
   background-color: rgba(0, 0, 0, 0.1);
   -webkit-transition: all 0.35s ease-in-out;
   -moz-transition: all 0.35s ease-in-out;
   -o-transition: all 0.35s ease-in-out;
   transition: all 0.35s ease-in-out;
 }

 .carousel-control .fa:hover {
   background-color: rgba(0, 0, 0, 0.5);
 }

 .carousel-control .fa-angle-left {
   background: url(../images/left.png) no-repeat center rgba(255, 255, 255, 0);
   left: 0;
 }

 .carousel-control .fa-angle-right {
   background: url(../images/right.png) no-repeat center rgba(255, 255, 255, 0);
   right: 0;
 }

 .carousel-control .fa-angle-left,
 .carousel-control .fa-angle-right {
   -webkit-transform: translate(0, -50%);
   -ms-transform: translate(0, -50%);
   -o-transform: translate(0, -50%);
   transform: translate(0, -50%);
 }


 /*=================================Carousel Slider DOT=================================*/

 .carousel-indicators {
   /*display: none;*/

 }


 .carousel-indicators .active {
   background-color: #FFF;
   border: 3px solid #fff;
   margin: 1px 6px;
 }

 .carousel-caption {
   display: none;
 }

 /*====================================search-ebook==============================*/

 .categorynav,
 .searchnav {
   background-color: #E5E5E5;
   font-size: 15px;
   color: #6d6d6d;
   padding: 8px;
   margin: 1px -2px 15px;
   width: 100%;
   line-height: 32px;
   display: inline-table;
 }

 .searchview {
   position: relative;
   display: inline-block;
   float: right;
   text-decoration: none;
 }

 .EBOOKhover a:hover,
 .EBOOKhover a:active {
   color: #00a0e9;
   text-decoration: none;
 }

 .searchview {
   position: relative;
   display: inline-block;
   float: right;
 }

 .searchview .icon-th {
   display: inline;
   color: #6d6d6d
 }

 .searchview .active {
   display: inline;
   color: #00a0e9
 }

 .searchnav stong {
   color: #00a0e9
 }

 .ebookcategory .header-s {
   background-color: #f4a13f;
   font-size: 16px;
   color: #FFF;
   line-height: 40px;
   padding-left: 15px;
 }

 /**/
 .ebookcategory .radio-custom {
   position: relative;
   padding-left: 15px;
   font-size: 15px;
   font-weight: normal;
 }

 .clear {
   margin: 10px;
 }

 label {
   display: inline-block;
 }

 /* for 手機板*/
 @media screen and (max-device-width: 480px) {
   label {
     display: inline-block;
     background-color: #f4a13f;
     width: 32%;
     margin: 0;
   }

   .ebookcategory .radio-custom a {
     color: white !important
   }

   .ebookcategory .content {
     background-color: #f7f7f7 !important;
     padding: 5px 0;
     border: 1px rgb(247, 247, 247) solid !important;
   }

   .content.mCustomScrollbar.nested div {
     text-align: center;
   }

   .content.mCustomScrollbar.nested {
     margin: 5px 0 10px;
     padding: 0 0;
   }

   .ebookcategory .radio-custom {
     position: relative;
     border-radius: 10px;
     padding: 4px 15px;
     font-size: 15px;
     height: 30px;
   }
 }

 /* for 手機板*/

 .checkbox-label:before,
 .radio-label:before {
   display: inline-block;
   height: 16px;
   position: relative;
   vertical-align: middle;
   width: 16px;
 }

 .checkbox-custom .checkbox,
 .checkbox-custom .radio,
 .radio-custom .checkbox,
 .radio-custom .radio {
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
   opacity: 0;
   margin-right: 0;
   position: absolute;
   left: 0;
   top: 1px;
 }

 .radio-custom *:checked+.radio-label:before {
   background: #f4a13f;
   border-color: #adaeaa;
   box-shadow: inset 0 1px 4px -1px #F5F5F1, inset 0 0 0 3px #FFF;
 }

 .checkbox-custom .checkbox-label:hover:before,
 .checkbox-custom .radio-label:hover:before,
 .radio-custom .checkbox-label:hover:before,
 .radio-custom .radio-label:hover:before {
   border-color: #adaeaa;
 }

 .radio-custom .radio-label:before {
   border-radius: 50%;
   height: 18px;
   width: 18px;
 }

 .checkbox-custom .checkbox-label:before,
 .checkbox-custom .radio-label:before,
 .radio-custom .checkbox-label:before,
 .radio-custom .radio-label:before {
   border-radius: 3px;
   /* background-image: -webkit-linear-gradient(top, #FFF 20%, #F5F5F1); */
   background-image: -moz-linear-gradient(top, #FFF 20%, #F5F5F1);
   background-image: -o-linear-gradient(top, #FFF 20%, #F5F5F1);
   background-image: linear-gradient(top, #FFF 20%, #F5F5F1);
   background: #FFF;
   border: 1px solid #CBCCC9;
   box-shadow: 0 1px 3px #F5F5F1 inset;
   content: '';
   position: absolute;
   left: 0;
   top: 1px;
 }

 .checkbox-label:before,
 .radio-label:before {
   display: inline-block;
   height: 16px;
   position: relative;
   vertical-align: middle;
   width: 16px;
 }


 .ebookcategory .content .list-ul {
   list-style-type: none;
   padding-left: 15px;
   /*
    width: 174px;
	*/
   font-size: 15px;
   line-height: 28px;
   margin-right: 5px;
 }

 .ebookcategory .radio-custom a,
 .ebookcategory .content .list-ul .links {
   color: #00a0e9;
   display: inline;
   white-space: pre-wrap;
 }

 .ebookcategory .radio-custom a:hover,
 .ebookcategory .content .list-ul .links:hover {
   color: #7c7c7c;
 }



 @media (max-width: 767px) and (min-width: 320px) {
   .ebookcategory .header {
     background-color: #F4A13F;
     font-size: 15px;
     color: #FFF;
     line-height: 3em;
     padding-left: 0px;
     text-align: center;
     border-top-width: 0;
   }
 }


 @media (min-width: 769px) {
   .categorylist .panel-title-more {
     font-size: 14px;
     border-right: 1px #333;
     display: none;
   }
 }

 @media (max-width: 780px) and (min-width: 768px) {

   /*ipad 直式  更多分類*/
   .categorylist .panel-title-more {
     background: #f4f4f4;
     font-size: 14px;
     padding: 2px 0px 0px;
     margin: 6px auto;
     text-align: center;
     border-top: 1px solid #e5e5e5;
     /* border-radius: 10px; */
     border-bottom: 1px solid #e5e5e5;
   }

   /*ipad 直式  更多分類*/
   .ebookcategory {
     border-bottom: 1px solid #e8e8e8
   }

   .ebookcategory .content {
     background-color: transparent !important;
     padding: 5px 0;
   }

   .ebookcategory .header-s {
     background-color: transparent;
     font-size: 15px;
     color: #000;
     line-height: 20px;
     padding-left: 1px;
     text-align: left;
     margin: 13px 0;
     float: left;
   }

   .ebookcategory .content .list-ul {
     list-style-type: none;
     padding-left: 15px;
     width: 100%;
     font-size: 15px;
     line-height: 28px;
   }

   .ebookcategory li {
     background-color: #f0f0f0;
     border: 1px solid #f0f0f0;
     border-radius: 5px;
     margin: 2px 2px;
     padding: 0 7px;
     font-size: 14px;
     font-weight: normal;
     display: -webkit-inline-box;
   }

   .ebookcategory .radio-custom {
     background-color: #f0f0f0;
     border: 1px solid #f0f0f0;
     border-radius: 5px;
     margin: 6px 0px;
     padding: 4px 10px;
     font-size: 14px;
     font-weight: normal;
     display: -webkit-inline-box;
   }


 }






 .ebookcategory .content {
   background-color: #FFF;
   padding: 5px 0;
 }

 .searchbook {}

 #searchbooklist {
   padding: 0px 0px 15px;
   padding: 10px;
   margin-top: 0px;
   /*display: initial;*/
 }

 .searchbook form {
   display: inline-block;
 }

 .searchbook form input {
   display: inline-block;
 }


 #searchbooklist .booklistblock .caption2 {
   margin: 5px;
   height: 57px;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 .booklistblock .btn {
   text-align: center;
 }

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

 .book_tab li {
   display: inline-block;
   folat: left;
   height: 28px;
   padding: 2px 15px 0;
   margin: -10px 0 0 0;
   border-top: 0px;
   background: #f3e7d9;
   text-align: center;
 }

 .book_tab li a {
   color: #474747;
   display: inline-block;
   font-family: "微軟正黑體";
   font-size: 18px;
   line-height: 24px;
   padding: 0 15px 0 10px;
   font-weight: bold;
 }

 .book_tab .here {
   background: #F4A13F;
   margin: 0px 0 0 0;
 }

 .book_tab .here a {
   color: #FFF;
   text-decoration: none;
 }

 .book_tab li a:hover,
 .book_tab .here a:hover {
   color: #FFF;
   text-decoration: none;
 }

 .book_tab .here .arrow {
   border-left: 8px solid transparent;
   border-right: 8px solid transparent;
   border-top: 8px solid #F4A13F;
   margin: 0 auto;
   width: 0;
   height: 0;
 }

 .book_tab .arrow {
   border-left: 8px solid transparent;
   border-right: 8px solid transparent;
   border-top: 8px solid #f3e7d9;
   margin: 0 auto;
   width: 0;
   height: 0;
 }

 .booktab-select {
   font-size: 15px;
   width: 100%
 }

 .booklistblock .btnblue {
   display: inline-block;
   margin: 3px;
   font-weight: normal;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
   color: #ffffff;
   background-color: #00a0e9;
   border-color: #00a0e9;
   white-space: nowrap;
   padding: 6px 15px;
   font-size: 13px;
   line-height: 1.42857143;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }

 /* for 手機板 */
 /*@media screen and (max-device-width: 480px){
.book_tab {
    width: 100%;
    height: 40px;
}
.book_tab .here {
    background: #f7f7f7!important;
    border-bottom: 2px solid #F4A13F;
    margin: 0px 0 0 0;
}
.book_tab li {
    display: inline-block;
    folat: left;
    height: 28px;
    padding: 2px 15px 0;
    margin: -10px 0 0 0;
    border-top: 0px;
    background: rgba(243, 231, 217, 0)!important;
    border-bottom: 1px solid #e2e2e2;
    text-align: center;
}
.book_tab li a {
    color: #474747;
    display: inline-block;
    font-family: "微軟正黑體";
    font-size: 18px;
    line-height: 24px;
    padding: 0 15px 0 10px;
    font-weight: bold;
}

.book_tab li a:hover, 
.book_tab .here a:hover {
    color: #f4a13f!important;
    text-decoration: none;
}
.book_tab .here a {
    color: #f4a13f!important;
    text-decoration: none;
}
.book_tab .here .arrow {
    border-bottom:2px solid #F4A13F!important;
    border-left: none!important;
    border-right: none!important;
    border-top: none!important;
    margin: 0 auto;
    width: 0;
    height: 0;
}
.book_tab .arrow {
    border-bottom:2px solid #F4A13F!important;
    border-left: none!important;
    border-right: none!important;
    border-top: none!important;
    margin: 0 auto;
    width: 100%;
    height: 0;
}

}*/
 /* for 手機板 */

 /*====================================ebook.html==============================*/
 .searchbook .book-viewlist h5 a {
   font-size: 20px;
 }

 .searchbook .book-viewlist {
   font-size: 16px;
   line-height: 24px;
 }

 [class|="tag"] {
   background: yellow;
 }

 .searchbook .book-viewlist .note {
   color: #888
 }

 .searchbook .book-viewlist .date {
   line-height: 40px;
   font-size: 14px;
 }

 .searchbook .book-viewlist .date a {
   text-decoration: none;
   ;
   color: #00a0e9;
 }

 .magazinebook a.btnblue.icon-bell:hover,
 .magazinebook a.btnblue.icon-bell:link,
 .magazinebook a.btnblue.icon-bell:active {
   text-decoration: none;
   background-color: #00a0e9;
   color: #FFF;
 }

 .magazinebook .btnblue.disabled {
	text-decoration: none;
	padding: 4px 5px;
	border-radius: 5px;
	margin: 0;
	width: 100%;
	background-color: #a5a5a5;
	border: 1px solid #a5a5a5;
	color: rgba(255, 255, 255, 0.49);
	cursor: default;
 }

 .magazinebook .btnblue {
   display: inline-block;
   margin: 0px;
   font-weight: normal;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
   color: #333333;
   border: 1px solid;
   border-radius: 5px;
   background-color: #ffffff;
   border-color: #00a0e9;
   white-space: nowrap;
   padding: 4px 5px;
   width: 100%;
   font-size: 13px;
   line-height: 1.42857143;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }

 .searchbook .btnblue {
   display: inline-block;
   margin: 3px;
   font-weight: normal;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
   color: #ffffff;
   background-color: #00a0e9;
   border-color: #00a0e9;
   white-space: nowrap;
   padding: 6px 15px;
   font-size: 13px;
   line-height: 1.42857143;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }

 .searchbook .bookcollapse.panel-default span,
 .searchbook .bookcollapse.panel-default .panel-body {
   padding: 10px;
   font-size: 15px;
   line-height: 24px;
 }

 .searchbook .booksummary {
   /*max-height: 140px;*/
   overflow: hidden;
   margin-bottom: 20px;
 }

 .S-collapse {
   display: block;
   border: 0px #333 solid;
   padding-top: 5px;
 }

 /*====================================Magazine List==============================*/
 .magazinebook {}

 #magazinebooklist {
   padding: 0px 0px 15px;
   padding: 10px;
   margin-top: 0px;
   /*display: initial;*/
 }

 /*=====================================Popup Block==================================*/
 .popupmodal {
   margin: 10px 20px;
   color: #444;
 }

 .popupmodal h4 {
   font-size: 150%;
   margin: 13px auto;
   padding: 5px;
   background-color: #6dd1ff;
   color: #FFF;
   text-align: center;
 }

 .popupmodal span,
 .popupmodal p {
   font-size: 120%;
   line-height: 150%
 }

 .popupmodal span {}

 .popupmodal strong {
   background-color: #d53505;
   border-radius: 15px;
   font-size: 100%;
   padding: 0px 7px 1px;
   color: #FFF;
 }

 .popupmodal label {
   font-size: 90%
 }

 .popupmodal select {}

 .popupmodal form li {
   list-style-type: none;
 }

 .popupmodal form ul {
   text-align: left;
   margin-left: -39px;
 }

 .popupmodal input,
 .popupmodal button,
 .popupmodal select,
 .popupmodal textarea {
   font-family: inherit;
   font-size: inherit;
   line-height: 24px;
   margin: 5px;
 }

 /*====================================TreeMenu==============================*/
 #treeMenu .treeMenu {
   padding: 10px;
 }

 #treeMenu {
   margin-top: 20px;
   width: 90%;
   margin-left: 2px;
 }

 .treeMenu li {
   border-bottom: 1px dotted #d4d4d4;
   font-size: 15px;
   color: #333333;
   padding: 10px 10px 10px 15px;
   line-height: 25px;
 }

 .treeMenu ul {
   background-color: #FFF;
 }

 .treemenu-item {
   border-bottom: 2px solid #d5d5d5;
   font-size: 17px;
   color: #333;
   margin: 14px 0px 0px 0px;
   padding-bottom: 13px;
   cursor: pointer;
 }

 .treemenu-item:hover {
   border-bottom: 2px solid #00a0e9;
   color: #00a0e9;
 }

 /*====================================Book Detail==============================*/
 .detailbuy .menudiv {
   /* border-bottom: 2px #CCC solid; */
   margin-bottom: 10px;
   /* padding-bottom: 10px; */
 }

 .menudivp:nth-last-child(1) {
   border-bottom: 2px #f7f7f7 solid;
   background: red;
   margin-bottom: 10px;
 }

 .detailbuy {
   border-radius: 10px;
   padding: 10px 0;
   display: block;
   margin: 10px auto 10px;
   background-color: #f4f4f4;
   border: 2px #D2D2D2 solid;
   width: 85%;
 }

 .detailbuy div#Collection,
 .detailbuy div#cntSite,
 .detailbuy div#times,
 .detailbuy div#rentalSite,
 .detailbuy div#combineSite0,
 .detailbuy div#Rental {
   font-size: 15px;
   line-height: 1.9em;
   color: #333;
   padding: 10px 10px 0;
 }

 .detailbuy em {
   color: red;
 }

 .detailbuy .btn-detail:hover {
   background-color: #00a0e9;
 }

 .btn-download {
   display: inline-block;
   margin: 0px;
   font-weight: normal;
   text-align: center;
   vertical-align: inherit;
   cursor: pointer;
   border: 1px solid transparent;
   border-radius: 10px;
   white-space: nowrap;
   background-color: #00A0E9;
   padding: 7px 8px 0px 9px;
   font-size: 23px;
   line-height: 1.42857143;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }

 /*-20170626 新增-*/
 @media (max-width: 480px) {
   .btn-download {
     padding: 7px 4px 0px 4px !important;
   }
 }

 /* for index*/
 .btn-detail-more {
   display: inline-block;
   margin: 5px 1px;
   font-weight: normal;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
   border-radius: 8px;
   white-space: nowrap;
   padding: 10px;
   width: 100%;
   font-size: 18px;
   background-color: #f4a13f;
   color: #FFF;
   border: 2px solid transparent;
   line-height: 1.42857143;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }

 .btn-detail-more span {
   cursor: pointer;
   display: inline-block;
   position: relative;
   transition: 0.5s;
 }

 .btn-detail-more span:after {
   content: '»';
   position: absolute;
   opacity: 0;
   top: 0;
   right: -20px;
   transition: 0.5s;
 }

 .btn-detail-more:hover {
   background-color: white;
   color: #f4a13f;
   border: 2px solid #f4a13f;
 }

 .btn-detail-more:hover span {
   padding-right: 25px;
 }

 .btn-detail-more:hover span:after {
   opacity: 1;
   right: 0;
 }

 /* for index END*/


 /* for book-detail.htm*/
 input.btn-detail.btn-borrow.btnlg {
   border: none;
   padding: 10px;
   width: 87%;
   margin: 0 5px 2px 10px;
 }

 .btn-detail {
   display: inline-block;
   margin: 5px 1px;
   font-weight: normal;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
   /*border: 1px solid transparent;*/
   border-radius: 8px;
   /* white-space: nowrap; */
   padding: 10px;
   width: 87%;
   /* index */
   font-size: 18px;
   line-height: 1.42857143;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   border: 0px;
 }

 .btn-detail .icon {
   color: #FFF !important;
   font-size: 25px;
   line-height: 25px;
   text-align: center;
   padding-right: 10px;
   vertical-align: middle;
 }

 .btn-BL.font20 {
   font-size: 20px !important;
 }

 /*-20170626 新增-
20190801修改*/
 @media (max-width: 480px) {
   .btn-BL.font20 {
     font-size: 12px !important;
   }
 }

 .btn-redear:hover,
 .btn-redear:focus,
 .btn-redear.focus,
 .btn-redear:active,
 .btn-redear.active,
 .btn-BL:hover,
 .btn-BL:focus,
 .btn-BL.focus,
 .btn-BL:active,
 .btn-BL.active,
 .btn-collect:hover,
 .btn-collect:focus,
 .btn-collect.focus,
 .btn-collect:active,
 .btn-collect.active,
 .btn-borrow:hover,
 .btn-borrow:focus,
 .btn-borrow.focus,
 .btn-borrow:active,
 .btn-borrow.active,
 .btn-QRcode:hover,
 .btn-QRcode:focus,
 .btn-QRcode.focus,
 .btn-QRcode:active,
 .btn-QRcode.active {
   color: #fff;
   background-color: #CCC;
   text-decoration: none;
 }

 .btn-redear {
   color: #fff;
   background-color: #e24845;
   width: 100%;
 }

 .btn-orange-buybook {
   color: #fff;
   background-color: #f4a13f;
   width: 100%;
 }

 i.icon-suitcase {
   padding-right: 13px;
 }



 .btn-QRcode {
   color: #fff;
   background-color: #00a0e9;
 }

 .btn-BL {
   color: #777;
   border: 2px #adadad;
   border-style: solid;
   background-color: #f7f7f7;
   font-size: 15px;
   height: 40px;
   width: auto;
   line-height: 21px;
   display: inline-block;
 }

 .btn-borrow {
   color: #fff;
   background-color: #f4a13f;
 }

 .btn-note {
   color: #a3a4a5;
   background-color: #f7f7f7;
   border: 1px #9e9e9e;
   border-style: dotted;
   width: 87%;
   margin: 0 auto;
   padding: 5px 10px;
   font-size: 13px;
   /* border-radius: 8px; */
 }

 .btn-collect {
   color: #FFF;
   background-color: #73ae5e;
   width: 100%;
 }

 .iconcollect {
   color: #f4a13f !important;
   font-size: 26px;
   line-height: 30px;
   text-align: center;
   padding-right: 10px;
   vertical-align: middle;
 }

 .book-cover {
   display: block;
   margin: 10px 20px 10px;
   /*min-height: 200px;*/
   border: 1px solid #444;
   /*padding: 0 15px 0 15px;*/
   line-height: 1.42857143;
   background-color: #ffffff;
   -webkit-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
 }

 .book-cover>img,
 .book-cover a>img {
   margin-left: auto;
   margin-right: auto;
   /*max-width: 210px;*/
   width: 100%;
   padding: 4px;
   /*border: 1px solid #444;*/
 }

 a.book-cover:hover,
 a.book-cover:focus,
 a.book-cover.active {
   opacity: 0.7;
   filter: alpha(opacity=70);
   /* For IE8 and earlier */
 }

 .book-cover .caption {
   padding: 9px;
   color: #333333;
 }

 .book-detail {
   display: block;
   padding: 0px;
   margin-top: 5px;
   margin-bottom: 20px;
   margin-left: 13px;
   padding-top: 3px;
   line-height: 1.42857143;
   font-family: "微軟正黑體";
   min-height: 245px;
 }

 .book-detail .icon-volume-up {
   padding-right: 3px;
 }

 .book-viewlist>img,
 .book-viewlist a>img,
 .book-detail>img,
 .book-detail a>img {
   margin-left: auto;
   margin-right: auto;
   max-width: 210px;
   height: auto;
 }

 a.book-viewlist:hover,
 a.book-viewlist:focus,
 a.book-viewlist.active,
 a.book-detail:hover,
 a.book-detail:focus,
 a.book-detail.active {
   border-color: #d53505;
 }

 .book-viewlist .caption,
 .book-detail .caption {
   padding: 9px;
   color: #333333;
 }

 .book-detail>.date {
   font-size: 13px;
   line-height: 24px;
   color: #999;
   border: 1px solid #999;
   margin: 3px 3px 3px 2px;
   padding: 3px;
   width: 100%;

 }

 .magazinebook_detail {
   font-size: 16px;
   line-height: 32px;
   color: #73ae5e;
   width: 100%;
   /* margin: 10px 10px; */
   padding: 24px;
   margin: 0px 3px;
   background-color: #FFF;
   border: 1px #73ae5e solid;
   /* border-radius: 10px; */
 }

 .magazinebook_detail::before {
   content: "";
   position: absolute;
   bottom: 0;
   right: 0;
   border-width: 20px;
   border-style: solid;
   border-color: #73ae5e #f7f7f7 #f7f7f7 #73ae5e;
 }

 .book-detail>.note {
   font-size: 16px;
   line-height: 24px;
   color: #6d6d6d;
   width: 100%;
 }

 .book-viewlist>.date a,
 .book-viewlist>.note a,
 .book-detail>.date a,
 .book-detail>.note a {
   color: #6d6d6d;
   display: inline-block;
   vertical-align: middle;
 }

 .book-viewlist>.date a:hover,
 .book-viewlist>.note a:hover,
 .book-detail>.date a:hover,
 .book-detail>.note a:hover {
   color: #00a0e9;
 }

 .book-detail h3 {
   font-size: 24px;
   color: #444;
   margin: 0px auto 10px;
   font-weight: 500;
   line-height: 36px;
 }

 .book-detail h4 {
   color: #d53505;
   font-weight: 600;
   font-size: 0.88em;
   padding: 5px auto;
   margin: 5px auto;
 }

 .book-viewlist h5,
 .book-viewlist h5 a,
 .book-detail h5,
 .book-detail h5 a {
   color: #444;
   font-weight: 600;
   font-size: 1em;
   padding: 5px auto;
   margin: 5px auto;
   overflow: visible;
   white-space: pre-line;
 }

 .book-detail p {
   color: #6d6d6d;
   font-size: 0.81em;
   line-height: 28px;
   margin-bottom: 2px;
 }

 .book-detail p img {
   margin-top: 10px;
   vertical-align: bottom;
 }

 .recommend {
   border: 2px #f4a13f solid;
   background-color: #FFF;
   padding: 20px;
   margin: 0px 10px 10px 10px;
 }

 .recommend h3 {
   color: #f4a13f;
   font-size: 20px;
   text-align: center;
 }

 .recommend .bookcover {
   padding: 10px;
   text-align: center;
   margin: 0 10px;
 }

 .recommend .bookcover img {
   margin: 10px;
 }

 .bookcollapse.panel-group {
   margin-bottom: 20px;
 }

 .bookcollapse.panel-group .panel {
   margin-bottom: 0;
   border-radius: 4px;
   background-color: #f7f7f7;
 }

 .bookcollapse.panel-default {
   border-color: transparent;
 }

 .bookcollapse.panel-default>.panel-heading {
   color: #444444;
   background-color: rgb(236, 236, 236);
   border-bottom: 3px #00a0e9 solid;
   border-radius: 0px;
 }

 .bookcollapse.panel-default span,
 .bookcollapse.panel-default .panel-body {
   padding: 20px;
   font-size: 18px;
   line-height: 32px;


 }

 .bookcollapse.bookcollapse .panel-item {
   margin-top: -40px;
   margin-bottom: 0;
   margin-right: 10px;
   font-size: 15px;
   line-height: 1.25em;
   padding: 7px 0px;
   color: #9e9e9e;
   float: right;
   text-align: center;
   /* white-space: pre; */
   overflow: hidden;
 }

 .panel-default>.panel-heading+.panel-collapse>.panel-body {
   border-top: 0px solid #ddd;
   /*white-space: pre-wrap;*/
 }

 .bookcollapse.bookcollapse .panel-item>a {
   color: #9e9e9e;
   font-size: 28px;
   text-align: center;
   margin: 10px 0px;
   line-height: 25px;
   /*border: #FFF solid 1px;*/
   /*background-color: #FFF;*/
   text-decoration: none;
 }

 .bookcollapse.bookcollapse .panel-item>a:hover {
   text-decoration: none;
   color: #f4a13f;
 }

 .bookcollapse .bookcollapse .collapsed:before {
   content: "\$";
   font-family: "untitled-font-1" !important;
   display: inline-block;
   font-size: 1.0em;
   line-height: .99em;
   color: #444;
 }

 .bookcollapse .bookcollapse .collapsed .icon-chevron-up {
   display: none;

 }

 .bookcollapse .bookcollapse .panel-item>a {
   color: inherit;
   text-align: center;
   margin: 10px 0px;
   line-height: 25px;
 }


 /*====================================policy Detail ==============================*/

 #table3 {
   width: 100%;
   text-align: center;
   border-collapse: collapse;
   border-spacing: 0;
   font-size: 15px;
   border: 1px solid #eee;
   margin-bottom: 10px;
 }

 #table3 caption {
   font-size: 18px;
   text-align: left;
   padding: 10px;
 }

 #table3 td {
   border: 1px solid #eee;
 }

 #table3 th {
   color: #6d6d6d;
 }

 #table3 td,
 #table3 th {
   padding: 10px;
   margin: 0;
 }

 #table3 thead {
   background-color: #f5f5f5;
   color: #fff;
   font-weight: 800;
 }

 #table3 tbody tr td {
   border-bottom: 1px solid #eee;
   background-color: #FFF;
 }

 #table3 tbody tr:hover td {
   background-color: #eee;
 }



 .all-btn {
   background-color: transparent;
   cursor: pointer;
   float: left;
   text-align: center;
   color: #333;
   font-size: 25px;
   font-weight: bold;
   padding-bottom: 15px;
   width: auto;
   margin: 15px 5px;
 }

 .all-btn a {
   color: #333;
   text-decoration: none;
   border-bottom: 2px transparent solid;
 }

 .all-btn a:hover,
 .all-btn .active {
   color: #00a0e9;
   border-bottom: 2px #00a0e9 solid;
 }

 /*====================================SubjectAD For 影音館==============================*/
 .SubjectAD {
   margin: 5px auto;
 }

 .SubjectAD img:hover {
   border: 1px solid #777;
   -webkit-filter: grayscale(70%);
   filter: grayscale(70%);
 }

 .SubjectAD img {
   margin: 0 auto;
   border: 1px solid #ccc;
   -webkit-transition-duration: 0.4s;
   /* Safari */
   transition-duration: 0.4s;
 }

 /*====================================index hero ==============================*/
 /* override flexslider default style 輪播廣告*/
 /* general style */
 #hero .preview {
   width: 50px;
   height: 50px;
   position: absolute;
   top: 0;
   /*left:-90px;*/
   z-index: 100;
   -webkit-transition: all 0.3s ease-out;
   -moz-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
   opacity: 0;
 }

 #hero .preview img {
   position: absolute;
   /*left:90px;*/
   top: 0;
   width: 90px;
 }

 #hero .preview .alt {
   position: absolute;
   left: 180px;
   top: 0;
   background: #fff;
   width: 0px;
   height: 0px;
   color: #000;
   text-indent: 0;
   text-transform: uppercase;
   text-align: center;
   font-size: 16px;
   line-height: 90px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -o-box-sizing: border-box;
 }


 /* next button */
 #hero .flex-next .preview {
   right: -50px;
   left: auto;
 }

 #hero .flex-next .preview .alt {
   left: 0;
 }


 /*=================================index- Articel=================================*/
 /*首頁新增的三大區塊*/
 .articelBG {
   background-color: #e2e1d9;
   margin: 20px 10px 10px;
   padding: 5px 0 10px 40px;
   width: 100%;
 }

 .articelBlock {
   margin: 20px 0px;
   width: 80%;
 }

 .articelBlock>.panel-heading {
   color: #FFF;
   padding: 5px 15px;
   background-color: #c45bb6;
 }

 .articelBlock>.panel-heading-B {
   color: #FFF;
   padding: 5px 15px;
   background-color: #337aac;
 }

 .articelBlock>.panel-heading-C {
   color: #FFF;
   padding: 5px 15px;
   background-color: #7ebe66;
 }

 .articelBlock .cover {
   text-align: center;
   background-image: url("../images/articelBlock_bg.gif");
   background-repeat: repeat;
 }

 .articelBlock .bookcover {
   position: absolute;
   bottom: 41%;
   margin-left: 20px;
   /*right: 51%;*/
 }

 .articelBlock .bookblock {
   width: 100%;
 }

 .articelBlock .bookcover img {
   width: 110px;
   height: auto;
 }

 .articelBlock .cover>.coverimg {
   height: 230px;
   width: 100%;
 }

 .articelBlock .panel-tag {}

 .articelBlock .panel-contect>.panel-tag a {
   border: 1px solid #e56a1a;
   color: #e56a1a;
   text-decoration: none;
   display: inline-block;
   width: auto;
   margin-top: 1px;
   margin-right: 4px;
   padding: 0 3px;
 }

 .articelBlock .panel-contect>.panel-tag a:hover {
   border: 1px solid #e56a1a;
   color: #FFF;
   background-color: #e56a1a;
 }

 .articelBlock .panel-contect {
   background-color: #FFF;
   padding: 15px;
   height: 180px;
   overflow: hidden;
 }

 .aire {
   height: 36px;
   overflow: hidden;
   color: #727272;
   font-size: 14px;
 }

 .articelBlock .panel-contect>.panel-title a {
   margin: 10px auto;
   font-size: 16px;
   color: #38383a;
   text-overflow: ellipsis;
 }

 .articelBlock .panel-contect>.panel-title a:hover {
   color: #de5656;
   text-decoration: none;
 }

 .articelBlock .panel-contect>.panel-dete {
   display: table;
 }

 .articelBlock .panel-contect>.panel-dete,
 .articelBlock .panel-contect>p {
   color: #727272;
   font-size: 14px;
 }

 /*================================Article================================*/
 .article-content>.tab-pane {
   display: none;
 }

 .article-content>.tab-pane .tab-box {
   margin-top: 2px;
   border: 2px solid #CB0E0E;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
   min-height: 215px;
 }

 .article {
   padding: 10px 7px;
   margin: 10px 0px;
   background-color: #f7f7f7;
 }

 .articleBG {
   background-color: transparent;
   padding-bottom: 5px;
 }

 .article .articlebg {
   background-color: transparent;
 }

 .article p {
   font-size: 1.40em;
   line-height: 1.55em;
   color: #7c7c7c;
   text-overflow: ellipsis;
 }

 .article ul {
   font-size: 1.2em;
   line-height: 1.6em;
   margin-left: 0px;
   overflow: hidden;
 }

 .article-list {
   border-bottom: 1px #616161 dotted;
   border-top: 1px #616161 dotted;
 }

 .article li {
   text-overflow: ellipsis;
   display: inline-block;
   white-space: nowrap;
   list-style-type: square;
   margin-right: 5px;
   /*width:70%;*/
 }

 .article li a {
   color: #337ab7;
   text-overflow: ellipsis;
   width: 100%;
   line-height: 0.94em;
 }

 .article li a:hover {
   color: #444;
   text-decoration: none;
 }

 .article .dete {
   display: inline-block;

   white-space: nowrap;
 }

 .article .tab-title span {
   font-size: 18px;
   border: 1px #f4a13f solid;
   color: #ffffff;
   line-height: 23px;
   margin-right: 5px;
   padding: 5px 7px;
   background-color: #f4a13f;
 }

 .article .tab-title {
   padding-top: 4px;
   margin-bottom: 10px;
   color: inherit;
   white-space: pre;
   overflow: hidden;
 }

 .article .tab-title>a {
   color: #303030;
   outline: none;
   font-size: 20px;
   font-weight: 600;
   margin: 5px auto;
   -o-transition: color .3s linear, background .3s linear;
   -moz-transition: color .3s linear, background .3s linear;
   -webkit-transition: color .3s linear, background .3s linear;
   transition: color .3s linear, background .3s linear;
 }

 .article .tab-title>a:hover {
   color: #1190BF
 }

 .article .tab-dete {
   font-size: 0.69em;
   color: #959595;
   white-space: pre;
   overflow: hidden;
 }

 .article .tab-img {
   width: 100%;
   display: block;
   height: auto;
   padding: 4px;
   margin: 0px 5px 8px;
 }

 .article .thumbnail {
   display: block;
   padding: 0;
   line-height: 1.42857143;
   background-color: transparent;
   border: none;
   border-radius: 0px;
   -webkit-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
   padding-top: 100%;
   border-radius: 50%;
   background-size: cover;
   background-position: center;
 }

 .article .thumbnail>img {
   border-radius: 50%;
   width: 150px;
   height: 150px;
 }

 .article .thumbnail>img,
 .article .thumbnail a>img {
   margin-left: auto;
   margin-right: auto;
 }

 .article .tab-more {
   padding: 0px 0px;
   float: left;
 }

 .article .tab-more .btn-default {
   margin-right: 2px;
 }

 .article-content>.active {
   display: block;
 }

 /*================================bookDetail.html============================*/
 .bookDetail {
   margin: auto 30px;
 }

 #magazing,
 #recommend,
 #borrow {
   background-color: transparent;
 }

 .bookDetail .item {
   margin: 0 10px;
 }

 .bookDetail .panel-heading {
   background-color: #f3f3f3;
 }

 /*================================article news============================*/
 .panel-danger {
   border-color: #333;
   margin-bottom: 20px;
   /*background-color: #fff;*/
   border: 2px dotted #a6a6a6;
   border-radius: 4px;
   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
   box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
 }

 .panel-danger>.panel-heading {
   color: #333;
   background-color: transparent;
   border-color: transparent;
 }

 .panel-danger .panel-img {
   float: left;
   padding: 0px 5px 8px;
   max-width: 100%;
   height: auto;
 }

 .panel-heading {
   padding: 10px 15px;
   font-size: 18px;
 }

 .panel-title {
   font-size: 16px !important;
   font-weight: 600;
 }

 .panel {
   margin: 20px 0;
   background-color: #fff;
   /*border: 2px dotted #a6a6a6;*/
   border-radius: 4px;
   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
   box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
 }

 .panel-body {
   padding: 10px;
   font-size: 15px;
   line-height: 18px;
 }

 /*-20170626 新增-*/
 .panel-body img {
   max-width: 100%;
 }

 .QR-Code {}

 .QR-Code img {
   margin-bottom: 20px;
   max-width: 100%;
   height: auto;
   border: 1px solid #f59a00;
 }

 .app-text {
   font-size: 20px;
   line-height: 35px;
   display: block;
   margin: 5px 0;
 }

 @media (max-width: 480px) {
   .QR-Code {
     display: none;
   }
 }





 .panel-img {
   float: left;
   padding: 0px 5px 8px;
   max-width: 100%;
   height: auto;
 }

 .panel-title>a {
   color: #00a0e9;
 }

 /*bestarticle.html 熱門文章*/
 h6.panel-title {
   margin-top: 0;
   margin-bottom: 0;
   font-size: 16px;
   color: inherit;
 }

 .panel-body .panel-dete {
   color: #939393
 }

 .article-panel-danger {
   /*border-color: #cb0e0e;*/
 }

 .article-img img {
   margin-bottom: 18px;
 }


 .article-panel-danger>.panel-heading+.panel-collapse>.panel-body {
   border-top-color: #ebccd1;
 }

 .article-panel-danger>.panel-heading .badge {
   color: #f2dede;
   background-color: #a94442;
 }

 .article-panel-danger>.panel-footer+.panel-collapse>.panel-body {
   border-bottom-color: #ebccd1;
 }



 .articlepanel .panel-body .list-group .panel-article .list-group {
   border-bottom: #DDD 1px solid;
   line-height: 1.6em;
 }


 .articlepanel .panel-body .list-group a {
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

 .articlepanel .panel-body .list-group span {
   color: #d53505;
   font-weight: 600;
 }

 .articlepanel .panel-body .list-group span::after {
   content: "|";
   padding-right: 5px;
   padding-left: 5px;
   color: #777;
 }


 .CTBC-breadcrumb {
   padding: 0 20px;
   list-style: none;
   margin-bottom: 0;
   margin: 0 auto;
   background-color: rgba(237, 234, 234, 0.3);
 }

 .breadcrumb {
   padding: 0px 0px;
   margin-top: 10px;
   margin-bottom: 10px;
   list-style: none;
   background-color: transparent;
   border-radius: 4px;
   display: inline-block;
 }


 /*================================author list============================*/
 .author-list {
   margin: 20px auto;
 }

 /*FB Google*/
 .fbblock-article {
   margin-top: 5px;
   display: block;
   margin-top: 5px;
   float: left;
   position: relative;
   top: 9px;
   /* right: -5%; */
   margin-bottom: 6px;
   margin-top: 0px;
 }

 .htmedit .fbblock-article,
 .article-list-danger .fbblock-article {
   display: block;
   margin-top: 5px;
   float: left;
   position: relative;
   /* top: 6px; */
   /* right: -5%; */
   /* margin-bottom: 5px; */
   margin-top: 0px;
   height: 40px;
 }

 .htmedit .google {
   margin-top: -2px;
   padding-left: 5px;
   display: block;
   float: right;
 }

 .fbblock-article .google {

   padding-left: 5px;
   margin-left: 3px;
   display: block;
   float: right;
 }

 .htmedit .google {
   margin-top: 11px;
   padding-left: 5px;
   display: block;
   float: right;
 }

 @media screen and (min-width: 768px) {

   .line,
   .icon-line {
     display: none !important;
   }
 }

 @media (min-width: 768px) and (max-width: 1024px) {

   .htmedit .line {
     margin-top: 0px !important;
     margin-left: -20px !important;
     padding-left: 0px;
     display: block;
     float: right;
   }

   .fbblock-article .gg {
     height: 30px !important;
   }

   .fbblock-article {
     top: 0px !important;
   }

   /*.iframe-g {
    margin-top: -15px!important;
}*/
 }

 .htmedit .line {
   margin-top: -10px;
   margin-left: -28px;
   padding-left: 0px;
   display: block;
   float: right;
 }

 .author-list .author-heading {
   border-bottom: 2px solid #818076;
   color: #818076;
   font-weight: 600;
   font-size: 20px;
   margin-bottom: 10px;
 }

 .author {}

 .author-img {
   height: 200px;
 }

 .author-list .author-caption {
   /*display: none; */
   position: absolute;
   height: auto;
   width: 71%;
   bottom: 12px;
   right: 7px;
   left: 6px;
   z-index: 10;
   padding: 10px;
   margin: auto;
   color: #ffffff;
   text-align: center;
   background-color: rgba(120, 120, 120, 0.4);
 }

 .author-list .author-caption>p {
   font-size: 16px;
   text-overflow: ellipsis;
   white-space: pre;
   overflow: hidden;
 }

 .article-list-danger .panel-heading {
   background-color: #00A0EA;
   color: #FFF;
   margin: 10px auto -10px;
 }

 .author-list .authoritem .author-img img {
   display: block;
   padding: 0px;
   border: 1px solid #EEE;
   background-color: #FFF;
   width: 230px;
   height: 170px;
   -webkit-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
 }

 /*作家專欄文章總攬列表*/
 .article-list-danger .panel-body p,
 .article-panel-danger .panel-body p {
   font-size: 1em;
   line-height: 1.7em;
   color: #383841;
   white-space: normal;
   ;
   text-overflow: ellipsis;
   margin-top: 5px;
 }

 .author-list .authoritem .author-img>img,
 .author-list .authoritem .author-img a>img {
   margin-left: auto;
   margin-right: auto;
 }

 .author-article .navs {
   margin-bottom: -8px;
   margin-top: 10px;
   text-align: center;
   width: auto;
   color: #FFF;
   line-height: 1.42857143;
   background-color: #de5656;
   padding: 10px;
   text-decoration: none;
 }

 /*==============================Htmedit==================================*/
 .htmedit {
   font-size: 140%;
   line-height: 200%;
   margin-top: 20px;
 }

 .htmedit h6 {
   font-size: 110%;
   font-weight: 600
 }

 .htmedit h5 {
   font-size: 130%;
   font-weight: 600
 }

 .htmedit h4 {
   font-size: 150%;
   font-weight: 600
 }

 .htmedit h3 {
   font-size: 180%;
   font-weight: 600;
   color: #d53505;
   border-bottom: 2px #CCC solid;
   padding-bottom: 10px;
   line-height: 150%
 }

 .Views,
 .htmeditdete {
   font-size: 14px;
   color: #777;
   line-height: 1.19em;
   padding-right: 20px;
 }

 .htmedit p {
   color: #444;
   line-height: 180%
 }

 .htmedit em {}

 .htmedit strong {
   font-weight: 600
 }

 .htmedit b {}

 .htmedit i {}

 .htmedit p a {
   font-size: 16px;
   color: #d53505;
   display: initial;
 }

 .htmedit img {
   padding: 10px;
 }

 .htmedit p img {
   display: block;
   max-width: 100%;
   height: auto;
 }

 .nextpage {
   background-color: #e6e6e6;
   font-size: 16px;
   color: #444;
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   padding: 20px 10px;
 }

 /*================================bestarticle============================*/

 .bestarticle {
   padding: 10px 5px;
   margin: 0px 6px;
   background-color: #f3f3f3;
 }

 .bestarticle .tabtitle {
   margin-top: 0;
   margin-bottom: 0;
   width: 100%;
   color: inherit;
   word-wrap: break-word;
   display: inline-block;
 }

 .bestarticle .tabtitle>a {
   outline: none;
   font-size: 14px;
   font-weight: 600;
   margin: 3px auto;
   padding: 0 8px;
   -o-transition: color .3s linear, background .3s linear;
   -moz-transition: color .3s linear, background .3s linear;
   -webkit-transition: color .3s linear, background .3s linear;
   transition: color .3s linear, background .3s linear;
 }

 .bestarticle .tab-title>a:hover {
   color: #444
 }

 .bestarticle .tab-img {
   max-width: 100%;
   display: block;
   height: auto;
   padding: 4px;
   margin: 5px 5px 8px;
 }

 .bestarticle .thumbnail {
   display: block;
   padding: 4px;
   line-height: 1.42857143;
   background-color: #FFF;
   border: 1px solid #FFF;
   border-radius: 0px;
   -webkit-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
 }

 .bestarticle .thumbnail>img {
   width: 100%;
   height: 120px;
 }
 }

 .bestarticle.thumbnail>img,
 .bestarticle .thumbnail a>img {
   margin-left: auto;
   margin-right: auto;
 }

 /*==============================Bestarticle list==========================*/

 .bestarticle-danger .panel-body {
   padding: 8px 0px;
   margin-top: 8px;
 }

 .bestarticlebg-1 {
   background-color: #f7f7f7;
   border: 5px #FFF solid;
   border-top: 0px;
   height: auto;
   margin-left: -5px;
   margin-right: -4px;
   padding-top: 10px;
   padding-left: 15px;
 }

 .bestarticlebanner {
   text-align: right;
   width: 100%
 }

 .bestarticlebg {
   background-color: #f7f7f7;
   border: 5px #FFF solid;
   height: auto;
   margin-left: -5px;
   margin-right: -4px;
 }

 .bestarticlebook .bestarticlebook-title a {
   word-wrap: break-word;
   padding-top: 0px;
   margin-top: -3px;
   font-size: 15px;
 }

 .bestarticlebook .book-cover {
   display: block;
   margin: 0px auto 0px;
   line-height: 1.42857143;

   -webkit-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
 }

 .bestbook-danger .panel-body,
 .bestarticlebook,
 .bestarticle-danger .panel-body {
   padding: 10px 10px 0px;
   margin-top: 8px;
   margin-left: 1px;
 }

 .bestarticlelist {
   margin-left: 5px;
   /*margin-bottom: -40px;*/
 }

 .bestarticlelist li {
   display: inline-block;
   font-size: 16px;
   padding: 10px;
   margin: 5px auto 0px;
   color: #FFF;
   border: 1px #00A0EA solid;
 }

 .bestarticlelist li a {
   color: #00A0EA;
   text-decoration: none;
 }

 .bestarticlelist .list a {
   color: #FFF;
   text-decoration: none;
 }

 .bestarticlelist .list {
   background-color: #00A0EA;
   color: #FFF;
 }

 .bestarticlelist .list:hover {
   background-color: #FFF;
   color: #00A0EA
 }

 .bestarticlelist .list a {}

 .bestarticlelist .list a:hover {
   text-decoration: none;
   color: #00A0EA;
 }

 .bestbook-danger>.panel-heading,
 .bestarticle-danger>.panel-heading {
   color: #FFF;
   background-color: #00A0EA;
 }

 .bestarticle-danger .panel-body .article-img img {
   /*max-width: 245px;*/
   height: auto;
   width: 100%;
   /*max-height: 160px;*/
 }

 .note,
 .bestarticle-danger .panel-body .panel-dete {
   font-size: 14px;
   line-height: 1.5em;
   color: #959595;
   white-space: normal;
   /* magazine-more.html */
   overflow: hidden;
   display: block;
 }

 .bestarticle-danger .panel-body p {
   font-size: 14px;
   line-height: 1.5em;
   color: #383841;
   text-overflow: ellipsis;
   margin-top: 5px;
 }


 .bestbook-danger .panel-body .panel-title {
   margin-top: 0;
   margin-bottom: 0;
   font-size: 15px;
   line-height: 0.94em;
   font-weight: 600;
   width: 100%;
   color: #cb0e0e;
   /*white-space:pre;*/
   overflow: hidden;
 }

 .bestarticle-danger .panel-body .panel-title {
   margin-top: 0;
   margin-bottom: 0;
   font-size: 15px;
   line-height: 1.94em;
   font-weight: 600;
   /*width: 60%;*/
   color: #cb0e0e;
   /*white-space:pre;*/
   overflow: hidden;
 }

 .bestbook-danger .panel-body .panel-title a {
   font-size: 16px;
   padding-top: 1px;
   color: #444;
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

 .bestarticle-danger .panel-body .panel-title a {
   font-size: 16px;
   padding-top: 1px;
   color: #444;
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

 .bestbook-danger .panel-body .panel-title a:hover,
 .bestarticle-danger .panel-body .panel-title a:hover {
   color: #D53505
 }

 .bestarticle-danger .panel-body .panel-bestarticle a {
   border: 1px solid #00a0ea;
   text-decoration: none;
   display: inline-block;
   width: auto;
   margin: 1px 0 4px;
   padding: 0 3px;
   color: #00a0ea;
 }

 .bestbook-danger .panel-body .panel-bestarticle a:hover,
 .bestarticle-danger .panel-body .panel-bestarticle a:hover {
   color: #FFF;
   background-color: #00a0ea;
 }

 /*===========================article FB ========================*/
 .bestbook-danger .fbblock-article,
 .bestarticle-danger .fbblock-article {
   display: block;
   float: left;
   position: relative;
   top: -5px;
   margin-bottom: 5px;
 }

 .fb-share-button.fb_iframe_widget.fb_iframe_widget_fluid {
   top: -5px
 }

 .bestbook-danger .fbblock-article {
   display: block;
   float: left;
   position: relative;
   top: -5px;
   padding-top: 5px;
   padding-bottom: 5px;
   margin-bottom: 5px;
 }

 .article-list-danger .fbblock-article {
   display: block;
   float: right;
   position: relative;
   top: -5px;
   /*right: -5%;*/
   margin-bottom: 5px;
 }

 .bestbook-danger .fb-like-button,
 .bestarticle-danger .fb-like-button,
 .article-list-danger .fb-like-button {
   padding-bottom: 20px;
   vertical-align: bottom;
   width: auto;
   height: 26px;
 }

 .bestbook-danger .fbshare-article,
 .bestarticle-danger .fbshare-article,
 .article-list-danger .fbshare-article {
   display: inline-block;
   padding-top: 5px;
 }

 @media (min-width: 768px) and (max-width: 1024px) {

   .bestbook-danger .fbshare-article,
   .bestarticle-danger .fbshare-article,
   .article-list-danger .fbshare-article {
     display: inline-block;
     padding-top: 5px;
   }

   .bestbook-danger .fb-like-button,
   .bestarticle-danger .fb-like-button,
   .article-list-danger .fb-like-button {
     padding-bottom: 20px;
     vertical-align: bottom;
     width: auto;
     height: 26px;
     top: -5px;
   }
 }

 /*===========================LOADING (Loading.js)========================*/
 .pace {
   -webkit-pointer-events: none;
   pointer-events: none;

   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;

   z-index: 2000;
   position: fixed;
   margin: auto;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   height: 5px;
   width: 200px;
   background: #fff;
   border: 1px solid #29d;

   overflow: hidden;
 }

 .pace .pace-progress {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   -o-box-sizing: border-box;
   box-sizing: border-box;

   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   -o-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);

   max-width: 200px;
   position: fixed;
   z-index: 2000;
   display: block;
   position: absolute;
   top: 0;
   right: 100%;
   height: 100%;
   width: 100%;
   background: #29d;
 }

 .pace.pace-inactive {
   display: none;
 }

 /*===========================LOADING (Loading.js) END========================*/
 /*===========================借閱規則========================*/
 p.policy-p {
   font-size: 15px;
   line-height: normal;
   margin: 10px 0;
 }

 #demo-switch {
   margin: 0px 0px 10px 0px;
   padding: 0px;
 }

 #demo-switch li {
   display: inline-block;
   border: #aaa 1px solid;
   color: #aaa;
   letter-spacing: 1px;
   cursor: pointer;
   padding: 3px 8px;
   margin: 10px 0px 0px 0px;
   font-size: 14px;
   background-color: #ffffff;
 }

 #demo-switch li.active {
   border: #1a1a1a 1px solid;
   background-color: #1a1a1a;
   color: #ffffff;
 }

 .demo-intro {
   margin-bottom: 30px;
   border: #1a1a1a 1px solid;
   background-color: #ffffff;
   padding: 10px 15px;
 }

 .demo-intro div {
   display: none;
 }


 #demo-table,
 .css-table {
   width: 99.9%;
   background-color: #ffffff;
   border-collapse: collapse;
   margin-bottom: 20px;
   font-size: 16px;
 }

 #demo-table td,
 #demo-table th,
 .css-table .td,
 .css-table .th {
   padding: 5px;
 }

 #demo-table td,
 .css-table .td {
   color: #666666;
   border: #ddd 1px solid;
   text-align: center;
 }

 #demo-table th,
 .css-table .th {
   background-color: #d7d7d7;
   color: #1c1c1c;
   border: #b4b4b4 1px solid;
   text-align: center;
 }


 .css-table {
   display: table;
   display: none;
 }

 .css-table .thead {
   display: table-header-group;
 }

 .css-table .tbody {
   display: table-row-group;
 }

 .css-table .tr {
   display: table-row;
 }

 .css-table .th,
 .css-table .td {
   display: table-cell;
 }


 @media only screen and (max-width: 960px) {
   .hide-column .large {
     display: none;
   }

   .css-table {
     background-color: transparent;
   }

   .css-table .thead {
     display: none;
   }

   .css-table .tr {
     display: block;
     border: #ddd 1px solid;
     margin-bottom: 5px;
     background: #ffffff;
   }

   .css-table .th,
   .css-table .td {
     display: inline-block;
     width: 48%;
     border: none;
   }
 }

 @media only screen and (max-width: 720px) {
   .hide-column .mobile {
     display: none;
   }

   .scroll-left:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
   }

   .scroll-left thead:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
   }

   .scroll-left {
     width: 100%;
     border-collapse: collapse;
     border-spacing: 0;
   }

   .scroll-left th,
   .scroll-left td {
     margin: 0;
     vertical-align: top;
   }

   .scroll-left th {
     text-align: left;
   }

   .scroll-left {
     display: block !important;
     position: relative;
     width: 100%;
   }

   .scroll-left thead {
     display: block;
     float: left;
   }

   .scroll-left tbody {
     display: block;
     width: auto;
     position: relative;
     overflow-x: auto;
     white-space: nowrap;
   }

   .scroll-left thead tr {
     display: block;
   }

   .scroll-left th {
     display: block;
     text-align: right;
   }

   .scroll-left tbody tr {
     display: inline-block;
     vertical-align: top;
     margin: 0px -2px;
   }

   .scroll-left td {
     display: block;
     min-height: 1.25em;
     text-align: left;
   }

   /* sort out borders */
   .scroll-left th {
     border-bottom: 0;
     border-left: 0;
   }

   .scroll-left td {
     border-left: 0;
     border-right: 0;
     border-bottom: 0;
   }

   .scroll-left tbody tr {
     /*border-left: 1px solid #babcbf;*/
   }

   .scroll-left th:last-child,
   .scroll-left td:last-child {
     border-bottom: 1px solid #babcbf;
   }


   /* Force table to not be like tables anymore */
   .break-table {
     background-color: transparent !important;
   }

   .break-table,
   .break-table thead,
   .break-table tbody,
   .break-table th,
   .break-table td,
   .break-table tr {
     display: block;
   }

   /* Hide table headers (but not display: none;, for accessibility) */
   .break-table thead tr {
     position: absolute;
     top: -9999px;
     left: -9999px;
   }

   .break-table tr {
     border: 1px solid #ccc;
     margin-bottom: 10px;
     background-color: #ffffff;
   }

   .break-table td {
     /* Behave  like a "row" */
     border: none !important;
     border-bottom: 1px solid #eee !important;
     position: relative;
     padding-left: 35% !important;
     white-space: normal;
     text-align: left;
   }

   .break-table td:before {
     /* Now like a table header */
     position: absolute;
     /* Top/left values mimic padding */
     top: 6px;
     left: 6px;
     width: 30%;
     padding-right: 10px;
     white-space: nowrap;
     text-align: left;
     font-weight: bold;
     color: #1a1a1a;
   }

   .break-table td:before {
     content: attr(data-title);
   }

   .css-table .th,
   .css-table .td {
     display: block;
     width: 100%;
   }
 }

 @media only screen and (max-width: 480px) {
   .hide-column .small {
     display: none;
   }
 }

 /*===========================借閱規則 END========================*/

 /*================================ publisher.html =============================*/
 .inner {
   margin: 20px 10px;
 }

 .meta {
   font-size: 16px;
   line-height: 24px;
 }

 .thumb-box:hover .nobooks {
   opacity: 1;
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -ms-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;
   -webkit-box-shadow: 0px 0px 0px 0px rgba(201, 201, 201, 1);
   -moz-box-shadow: 0px 0px 0px 0px rgba(201, 201, 201, 1);
   -ms-box-shadow: 0px 0px 0px 0px rgba(201, 201, 201, 1);
   -o-box-shadow: 0px 0px 0px 0px rgba(201, 201, 201, 1);
   box-shadow: 0px 0px 0px 0px rgba(201, 201, 201, 1);

 }

 /*.pickup-img:hover{
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 1;
}*/
 /* 書封上顯示幾本書*/
 .thumb-box .nobooks {
   opacity: 0;
   float: right;
   display: block;
   right: 13px;
   top: 40%;
   color: #FFF;
   /*border: 1px #FFF solid;*/
   border-right: none;
   background-color: #333;
   padding: 5px;
   border-radius: 4px 0 0 4px;
   position: absolute;
   text-indent: 1;
 }

 .nobooks strong {
   font-weight: bold;
   font-size: 20px;
 }

 .yel {
   color: #fde611
 }

 h3.ttl {
   max-height: 55px;
   line-height: 19px;
   overflow: hidden;
 }

 font.h2 {
   line-height: 40px;
 }

 .publisher {
   margin-top: 5px;
   /*margin-bottom: 20px;*/
 }

 #publisher {
   margin: 0px auto;
 }

 #publisher .publisher_ul {
   font-size: 15px;

   display: table;
   margin: 20px 0;
   width: 100%;
   padding: 0 10px;
   border-collapse: separate;
   border-spacing: 3px 0;
 }

 #publisher .publisher_ul li {
   width: auto;
   text-align: center;
   vertical-align: middle;
   display: table-cell;
 }

 #publisher .publisher_ul .activer,
 #publisher .publisher_ul li a:hover {
   background: #FFF;
   border: 1px solid #f4a13f;
   color: #f4a13f;
   border-radius: 4px;
   padding: 9px 9px;
   height: auto;
   display: list-item;
   vertical-align: middle;
 }

 #publisher .publisher_ul li a {
   background: #f4a13f;
   /*border: 1px solid #000;*/
   color: #FFF;
   border-radius: 4px;
   padding: 10px 10px;
   height: auto;
   display: list-item;
   vertical-align: middle;
 }

 .about_subject {
   line-height: 24px;
   text-align: left;
   font-size: 16px;
   font-weight: bold;
   padding: 23px;
   margin: 0px 4px;
   background-color: #e9e7e7;
 }

 .text-box {
   font-size: 14px;
   color: #333;
   background: white;
   padding: 5px 10px;
   text-align: left;
   height: 110px;
   overflow: hidden;
 }

 img.pickup-img {
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -ms-transition: all .3s;
   -o-transition: all .3s;
   transition: all .3s;
   left: -10%;
   box-shadow: 0px 1px 1px #fff;
   border: 0 none;
   width: 100%;
   /* height: 160px;*/
   /* padding: 2px; */
 }

 /*----------------------------------*/
 /*[收合]*/
 .case {
   display: block;
   text-align: right;
 }

 .case .sildeCtrl {
   font-size: 15px;
 }

 .case .sildeCtrl span {
   cursor: pointer;
   color: #fff;
   text-align: center;
   width: 110px;
   display: inline-block;
   font-weight: bold;
   padding: 8px 5px 10px 30px;
   background-color: #333;
   background-image: url(../images/arrow-up-01-16.png);
   background-repeat: no-repeat;
   background-position: 17px 12px;
 }

 .case .sildeCtrl span:hover {
   text-decoration: none;
   cursor: pointer;
 }

 .case .sildeCtrl.close {
   padding: 0;
 }

 .case .sildeCtrl.close span {
   background-position: 17px -40px;

 }

 .grecaptcha-badge {
   visibility: hidden;
 }
 
 .cover_view {
	font-size: 1.2em;
	text-align: center;
	padding: 10px 0;
}

 .cover_view span {
	padding: 2px 6px;
	border: 1px solid #bcd3dd;
	border-radius: 5px;
	background-color: #fafafa;
	margin: 0 0px;
}