@charset "utf-8";
/* CSS Document */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, img {
 margin: 0px;
 padding: 0px;
}
ol, ul, dl {
 margin-top: 0;
}
p {
 font-size: 18px;
 line-height: 1.750em;
}
html, body {
 width: 100%;
 height: 100%;
}
body {
 margin: 0px;
 padding: 0px;
 overflow-x: hidden;
 font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "標楷體", DFKai-SB, sans-serif;
 color: #333;
 font-size: 15px;
 line-height: 0px;
}
/*##############*/


.test_bg {
 background-image: url(../images/index.jpg);
 background-position: center 0%;
 background-repeat: no-repeat;
 background-color: #FFFFED;
}
.test_bg .content {
 height: 8549px;
}
/**/

.wrap {
 width: 100%;
 min-width: 1100px;
 overflow: hidden;
}
.content {
 width: 1100px;
 margin-left: auto;
 margin-right: auto;
 position: relative;

}
.content > img {
 /* [disabled]position: absolute;
*/
}
img {
 max-width: 100%;
}
/*############## nav ##############*/

a {
 color: #000000;
 text-decoration: none;
 background-color: transparent;
 -webkit-text-decoration-skip: objects;
}
a:hover {

}
a:not([href]):not([tabindex]) {
 color: inherit;
 text-decoration: none;
}
a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
 color: inherit;
 text-decoration: none;
}
a:not([href]):not([tabindex]):focus {
 outline: 0;
}
.justify-content-center {
 justify-content: center !important;
}
.nav {
 display: flex;
 flex-wrap: wrap;
 padding-left: 0;
 margin-bottom: 0;
 list-style: none;
}
.nav-link {
 padding: 0.5rem 1rem;
 text-decoration: none;
}
.nav-link:hover, .nav-link:focus {
 text-decoration: underline;
 background-color: #824C00;
 border-radius: 20px;
 color: #FFFFFF;
 padding-top: 3px;
 padding-bottom: 3px;
 text-decoration: none;
 font-weight: normal;
}
.nav-link.disabled {
 color: #6c757d;
}
.nav-tabs {
 border-bottom: 1px solid #dee2e6;
}
.nav-tabs .nav-item {
 margin-bottom: -1px;
}
.nav-tabs .nav-link {
 border: 1px solid transparent;
 border-top-left-radius: 0.25rem;
 border-top-right-radius: 0.25rem;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
 border-color: #e9ecef #e9ecef #dee2e6;
}
.nav-tabs .nav-link.disabled {
 color: #6c757d;
 background-color: transparent;
 border-color: transparent;
}
.nav-tabs .nav-link.active,  .nav-tabs .nav-item.show .nav-link {
 color: #495057;
 background-color: white;
 border-color: #dee2e6 #dee2e6 white;
}
.nav-tabs .dropdown-menu {
 margin-top: -1px;
 border-top-left-radius: 0;
 border-top-right-radius: 0;
}
.nav-pills .nav-link {
 border-radius: 0.25rem;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
 color: #fff;
 background-color: #12bbad;
}
.nav-fill .nav-item {
 flex: 1 1 auto;
 text-align: center;
}
.nav-justified .nav-item {
 flex-basis: 0;
 flex-grow: 1;
 text-align: center;
}
.tab-content > .tab-pane {
 display: none;
}
.tab-content > .active {
 display: block;
}
.navbar {
 position: relative;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 padding-right: 1.5rem;
 padding-left: 1.5rem;

}
.navbar > .container,  .navbar > .container-fluid {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 margin-left: auto;
 margin-right: auto;
}
.navbar-brand {
 display: inline-block;
 padding-top: 0.3125rem;
 padding-bottom: 0.3125rem;
 margin-right: 1.5rem;
 font-size: 1.25rem;
 line-height: inherit;
 white-space: nowrap;
}
.navbar-brand:hover, .navbar-brand:focus {
 text-decoration: none;
}
.navbar-nav {
 flex-direction: column;
 padding-left: 0;
 margin-bottom: 0;
 list-style: none;
}
.navbar-nav .nav-link {
 padding-right: 0;
 padding-left: 0;
}
.navbar-nav .dropdown-menu {
 position: static;
 float: none;
}
.navbar-text {
 display: inline-block;
 padding-top: 0.5rem;
 padding-bottom: 0.5rem;
}
.navbar-collapse {
 flex-basis: 100%;
 flex-grow: 1;
 align-items: center;
}
.navbar-toggler {
 padding: 0.25rem 0.75rem;
 font-size: 1.25rem;
 line-height: 1;
 background-color: transparent;
 border: 1px solid transparent;
 border-radius: 0.25rem;
}
.navbar-toggler:hover, .navbar-toggler:focus {
 text-decoration: none;
}
.navbar-toggler:not(:disabled):not(.disabled) {
 cursor: pointer;
}
.navbar-toggler-icon {
 display: inline-block;
 width: 1.5em;
 height: 1.5em;
 vertical-align: middle;
 content: "";
 background: no-repeat center center;
 background-size: 100% 100%;
}


@media (min-width: 1px) {
.navbar-expand-md {
 flex-flow: row nowrap;
 justify-content: flex-start;
}
.navbar-expand-md .navbar-nav {
 flex-direction: row;
}
.navbar-expand-md .navbar-nav .dropdown-menu {
 position: absolute;
}
.navbar-expand-md .navbar-nav .nav-link {
 padding-right: 0.5rem;
 padding-left: 0.5rem;
 font-weight: bold;
}
.navbar-expand-md > .container,  .navbar-expand-md > .container-fluid {
 flex-wrap: nowrap;
}
.navbar-expand-md .navbar-collapse {
 display: flex !important;
 flex-basis: auto;
 white-space: nowrap;
}
}
.navbar-expand-md .navbar-toggler {
 display: none;
}
}



@media (min-width: 992px) {
.navbar-expand-lg {
 flex-flow: row nowrap;
 justify-content: flex-start;
}
.navbar-expand-lg .navbar-nav {
 flex-direction: row;
}
.navbar-expand-lg .navbar-nav .dropdown-menu {
 position: absolute;
}
.navbar-expand-lg .navbar-nav .nav-link {
 padding-right: 0.5rem;
 padding-left: 0.5rem;
}
.navbar-expand-lg > .container,  .navbar-expand-lg > .container-fluid {
 flex-wrap: nowrap;
}
.navbar-expand-lg .navbar-collapse {
 display: flex !important;
 flex-basis: auto;
}
.navbar-expand-lg .navbar-toggler {
 display: none;
}
}

.navbar-dark .navbar-brand {
 color: #fff;
}
.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
 color: #fff;

}
.navbar-nav .nav-link a {
 color: #ffffff;
}
.navbar-nav .nav-link {
 font-size: 20px;
}
.navbar-ontop .navbar-nav .nav-link {
 color: #000000;
}
.shopping {

}


.navbar-ontop .navbar-nav .shopping {

}


.navbar-nav .shopping .nav-link {

}


.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
 color: #FFFFFF;
}
.navbar-dark .navbar-nav .nav-link.disabled {
 color: rgba(255, 255, 255, 0.25);
}
.navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .nav-link.active {
 color: #fff;
}
.navbar-dark .navbar-toggler {
 color: rgba(255, 255, 255, 0.5);
 border-color: rgba(255, 255, 255, 0.1);
}
.navbar-dark .navbar-toggler-icon {
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.navbar-dark .navbar-text {
 color: rgba(255, 255, 255, 0.5);
}
.navbar-dark .navbar-text a {
 color: #fff;
}
.navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus {
 color: #fff;
}
.ml-2, .mx-2 {
 margin-left: 0.75rem !important;
 float: left;
}
.bg-dark {
 background-color: #FF7024 !important;
}
.bg-dark {
 color: #fff;
}
 .bg-dark input::placeholder {
 color: rgba(255, 255, 255, 0.8);
}
.bg-dark .input-group-text {
 color: #fff;
}
.fixed-top {
 position: fixed;
 top: 0;
 right: 0;
 left: 0;
 z-index: 1030;
}
/* Animate state between .navbar and .navbar-ontop */
.navbar {
 transition: background-color .5s ease-out;
  height: 49px;
}
.navbar-ontop {
 background-color: transparent !important;
}
.fas {
 line-height: 0px;
}
/*############## title############## */

.title_bg {
 background-repeat: no-repeat;
 background-image: url(../images/bg_01.jpg);
 overflow: hidden;
 background-position: center 0%;
}
.title_bg .content {
 height: 770px;
}
.title_01 {
 left: 354px;
 top: 112px;
 position: absolute;
 
}
.title_02 {
 top: -73px;
 position: absolute;
 right: 224px;
}
.title_03 {
 left: 442px;
 top: 438px;
 position: absolute;
}
.title_04 {
 top: 377px;
 position: absolute;
 right: 163px;
}
.title_05 {
 top: 271px;
 position: absolute;
 right: 17px;
}
/*Fly*/

.fly {
 position: absolute;
 left: -50%;
 animation-iteration-count: infinite;
 animation-delay: 2s;
 animation-name: fly;
 animation-duration: 15s;
 animation-timing-function: ease-in-out;
 top: 0px;
}
@keyframes fly {
 0% {
 transform: translate3d(0, 0, 0) rotate3d(0, 1, 0, -180deg) rotate(-90deg)
}
 50% {
 transform: translate3d(1000%, 250%, 0) rotate3d(0, 1, 0, 180deg) rotate(90deg)
}
 51% {
 transform: translate3d(1000%, 250%, 0) rotate3d(0, 1, 0, 180deg) rotate(90deg)
}
 100% {
 transform: translate3d(-50%, 500%, 0) rotate3d(0, 1, 0, -180deg) rotate(-90deg)
}
}
/*.fly:hover{
  animation-play-state:paused;
}*/

.showme {
 display: none;
 position: absolute;
 top: 462px;
 left: 817px;
}
.fly:hover + .showme {
 display: block;
}
/*############## 書 ##############*/

.book_bg {
 background-repeat: repeat-y;
 background-position: center center no-repeat;
 background-image: url(../images/bg_02.jpg);
 height: 618px;
 background-size: 100% auto;
}
/*.book_bg:after {
 content: "";
 background-image: url(../images/bg_02.png);
 opacity: 0.5;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 position: absolute;
 z-index: -1;
}*/
.book_bg .content {
 top: -108px;
 height: 618px;
}
.book_01 {
 position: absolute;
 left: 140px;
 top: 0px;
 display: inline-block;
}
.book_02 {
 position: absolute;
 left: 108px;
 top: 499px;
 display: inline-block;
}
.book_03 {
 position: absolute;
 left: 674px;
 top: 627px;
}
 .buy {
 /*transition: all 200ms ease-in-out;*/
 color: #000000;
 font-size: 24px;
 background-color: #FFDD00;
 border-radius: 30px;
 padding-top: 10px;
 padding-bottom: 10px;
 font-weight: bold;
 -webkit-box-shadow: 1px 1px 5px hsla(0,0%,0%,1.00);
 box-shadow: 1px 1px 5px hsla(0,0%,0%,1.00);
 width: 253px;
 display: block;
 height: 30px;
 text-align: center;
 line-height: 30px;
}
.buy:hover {
 color: #0044FF; /*font-size: 30px;
 background-color: #B61A1B;*/
}
/*############## 影片 ############## */

.mov_bg {
 background-position: left top;
 background-image: url(../images/bg_03_1.jpg);
 background-attachment: fixed;
 background-size: auto auto;
}

.mov_bg .content {
 padding-bottom: 50px;
}
.mov_bg .introduce_01 {
}
.mov_bg .video {
 position: absolute;
 width: 369px;
}
.mov_bg .video .pb {
 padding-bottom: 55.94595%;
 position: relative;
 background-color: #f8f8f8;
}
.mov_bg .video .pb iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
.img_cd{
 float: left;
 margin-right: 12px;
 margin-top: -7px;
}
.p1_film {
 width: 850px;
 margin-left: auto;
 margin-right: auto;
 background-color: hsla(0,0%,10%,0.91);
 height: 600px;
 border-radius: 20px;
}
.p1_t {
 width: 750px;
 color: #FFFFFF;
 line-height: 34px;
 font-size: 18px;
 margin-left: auto;
 margin-right: auto;
 padding-top: 20px;
}
.p1_film iframe {
 position: relative;
 left: 55px;
 top: 20px;
}
/*############## 試閱 ##############*/

.preview_bg {
 background-repeat: repeat-y;
 background-image: url(../images/bg_04.jpg);
 background-position: center 0%;
}
.preview_bg .content {
 padding-bottom: 20px;
}

.preview_01 {
 margin-left: auto;
 margin-right: auto;
 display: block;
 margin-bottom: 28px;
}
.pre{
 width: 744px;
 margin-left: auto;
 margin-right: auto;
 
}

/*############## 大家讀 ##############*/

.read_bg {
 background-image: url(../images/bg_05.jpg);
 background-position: center 0%;
 height: 1415px;
}
.read_bg .content {
 padding-top: 20px;
 padding-bottom: 20px;
 position: relative;
}
.read_bg .img_m {
 padding-top: 20px;
 padding-bottom: 20px;
}
.read_01 {
 margin-left: auto;
 margin-right: auto;
 display: block;
 margin-top: 61px;
}
.read_02 {
 position: absolute;
 left: 38px;
 top: 250px;
}
.read_03 {
 position: absolute;
 left: 534px;
 top: 295px;
}
.read_04 {
 position: absolute;
 left: 1px;
 top: 699px;
}
.read_05 {
 position: absolute;
 left: 465px;
 top: 757px;
}
/*############## 加油站 ##############*/
.gas_bg {
  height: 1075px;
  background-position: center top;
 background-image: url(../images/bg_06.jpg);
 background-attachment: fixed;
 background-size: auto auto;
}
/*@media (min-width: 480px) {
.gas_bg {
 background-size: 100% 100%;
}
}*/
.gas_bg .content {
 padding-top: 20px;
 padding-bottom: 20px;
 position: relative;
}
.gas_g01 {
 display: block;
 margin-left: auto;
 margin-right: auto;
}
.gas_bg .img_m {
 padding-top: 20px;
 padding-bottom: 20px;
}
.gas_01 {
 margin-left: auto;
 margin-right: auto;
 display: block;
}
.gas_02 {
 position: absolute;
 left: 0px;
 top: 410px;
}
.gas_03 {
 position: absolute;
 left: 565px;
 top: 398px;

}
/*############## 部落格 ##############*/
.blog_bg {
 background-position: center 0%;
 background-image: url(../images/bg_07.jpg);
 height: 659px;
}
.blog_bg .content {
 padding-top: 20px;
 padding-bottom: 20px;
 position: relative;
}
.blog_title{
 position: absolute;
 left: 292px;
 top: 47px;
}
/*############## 書單推薦 ##############*/
.rec_bg {
 background-position: center 0%;
 background-image: url(../images/bg_08.jpg);
 background-color: #fffee8;
 background-repeat: no-repeat;
}
.rec_bg .content {
 padding-top: 20px;
 padding-bottom: 20px;
}
.rec_g01 {
 height: 665px;
 margin-left: auto;
 margin-right: auto;
 display: block;
}
.rec_01 {
 position: absolute;
 top: 43px;
 left: 407px;
}
.rec_02 {
 position: absolute;
 top: 293px;
 left: 75px;
}
.rec_03 {
 position: absolute;
 top: 581px;
 right: 102px;
}
.rec_bg .img_m {
 padding-top: 20px;
 padding-bottom: 20px;
}