html {
    width: 100%;
    overflow-x: hidden;
    background-color: #3C3700;
}

img {
    border: 0;
    vertical-align: bottom;
}

body {
    margin: 0;
    padding: 0;
    background-image: url(images/BG_3.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top;
    background-size: 100%;

}

a,
p,
span {
    font-family: "微軟正黑體", Verdana, Arial, Helvetica, sans-serif;
}


/*logo	*/
#top {
    min-width: 1200px;
    background-color: #000;
    overflow: hidden;
}

.title-logo {
    padding: 10px;
}

.logo-box {
    display: flex;
    justify-content: space-around;
    padding: 10px;
    width: 150px;
    align-items: center;
}

.logo-box img {
    height: 35px;
    margin-left: 10px;
}

.w1200-h {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

/*logo	*/

/* gotop start */
#gotop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 157px;
    height: 95px;
    background-image: url(images/top_21.png);
    z-index: 99;
}

#gotop:hover {
    background-image: url(images/top_22.png);
}

/* header start */
.w1000 {
    width: 1000px;
    margin: 0 auto;

}

.header {
    /* background-image: url(images/webbanner2.jpg); */
    background-position: top;
    text-align: center;
    background-size: 100%;
}

.banner {
    /* background-image: url(images/banner2_2.png);
    width: 1200px;
    height: 850px; */
    position: relative;
}

/* 動起來 */
.move_text{
    background-image: url(images/move_41.png);
    width: 886px;
    height: 203px;
    position: absolute;
    left: 159px;
    top: 54px;
    animation-name: text ;
    animation-duration: 2s;          /* 動畫持續時間 */
    animation-iteration-count: infinite; /* 動畫播放次數(目前無限) */
    animation-timing-function: linear;   /* 影片加速速率(線性的速率) */ 
    animation-direction: alternate; /* 單數次為正向播放，雙數次為反向播放 */
    
    z-index: -99;
}
@keyframes text{
    0%{transform:rotate(-1.3deg);}
    100%{transform:rotate(1.3deg);}
}
.move_cloud{
    background-image: url(images/move_39.png);
    width: 385px;
    height: 260px;
    position: absolute;
    right: 16px;
    top: 400px;
    animation-name: cloud ;
    animation-duration: 1.5s;          /* 動畫持續時間 */
    animation-iteration-count: infinite; /* 動畫播放次數(目前無限) */
    animation-timing-function: linear;   /* 影片加速速率(線性的速率) */ 
    animation-direction: alternate; /* 單數次為正向播放，雙數次為反向播放 */
    z-index: -99;
}
@keyframes cloud{
    from{transform: translate(0,5px);}
    to{transform: translate(0,-5px);} /*下浮動高度*/
}
/* .move_cloud:hover{
    background-image: url(images/move_40.png);
} */
/* 跳至各區塊的按鈕start */
.greenbg{
    background-color: green;
    padding: 24px 0;
    min-width: 1200px;
}
    .button_1{
        width: 250px;
        height: 80px;
    background-image: url(images/button_30.png);
    }
    .button_1:hover{
        background-image: url(images/button_26.png);
    }
    .button_2{
        width: 250px;
        height: 80px;
    background-image: url(images/button_31.png);
    }
    .button_2:hover{
        background-image: url(images/button_27.png);
    }
    .button_3{
        width: 250px;
        height: 80px;
        background-image: url(images/button_32.png);
    }
    .button_3:hover{
        background-image: url(images/button_28.png);
    }
    .button_4{
        width: 250px;
        height: 80px;
        background-image: url(images/button_33.png);
    }
    .button_4:hover{
        background-image: url(images/button_29.png);
    }
/* .button_1 {
    background-image: url(images/button_5.png);
    width: 160px;
    height: 130px;
    position: absolute;
    bottom: 10px;
    left: 150px;
}

.button_1:hover {
    background-image: url(images/button_10.png);
}

.button_2 {
    background-image: url(images/button_6.png);
    width: 160px;
    height: 130px;
    position: absolute;
    bottom: 10px;
    left: 337px;
}

.button_2:hover {
    background-image: url(images/button_11.png);
}

.button_3 {
    background-image: url(images/button_7.png);
    width: 175px;
    height: 130px;
    position: absolute;
    bottom: 10px;
    left: 524px;
}

.button_3:hover {
    background-image: url(images/button_12.png);
}

.button_4 {
    background-image: url(images/button_8.png);
    width: 160px;
    height: 130px;
    position: absolute;
    bottom: 10px;
    left: 719px;
}

.button_4:hover {
    background-image: url(images/button_13.png);
}

.button_5 {
    background-image: url(images/button_9.png);
    width: 160px;
    height: 130px;
    position: absolute;
    bottom: 10px;
    left: 906px;
}

.button_5:hover {
    background-image: url(images/button_14.png);
} */

/* 跳至各區塊的按鈕end */
/* section1 touch按鈕 */
.touch_1 {
    background-image: url(images/touch_29.png);
    width: 260px;
    height: 138px;
    position: absolute;
    top: 200px;
    left: 150px;
    filter: saturate(20%);
}

.touch_2 {
    background-image: url(images/touch_30.png);
    width: 221px;
    height: 135px;
    position: absolute;
    top: 200px;
    left: 500px;
    filter: saturate(50%);
}

.touch_3 {
    background-image: url(images/touch_31.png);
    width: 201px;
    height: 142px;
    position: absolute;
    top: 200px;
    left: 800px;
    filter: saturate(50%);
}

.touch_4 {
    background-image: url(images/touch_32.png);
    width: 258px;
    height: 135px;
    position: absolute;
    top: 400px;
    left: 250px;
    filter: saturate(50%);
}

.touch_5 {
    background-image: url(images/touch_33.png);
    width: 259px;
    height: 156px;
    position: absolute;
    top: 400px;
    left: 700px;
    filter: saturate(50%);
}

.touch_1:hover,
.touch_2:hover,
.touch_3:hover,
.touch_4:hover,
.touch_5:hover {
    filter: saturate(100%);

}

.w1000 ul {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.w1000 ul li {
    display: block;
    list-style-type: none;
    font-size: 20px;
    color: #fff;
    float: left;
    padding: 15px;
}

.w1000 ul li:hover {
    background-color: #FF8E00;
    color: #fff;
}


.clear {
    clear: both;
}

.style-Bottom {
    display: block;
    padding: 10px;
    font-size: 12px;
    font-style: normal;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    color: #fff;
    background-color: #000;
}



* {
    margin: 0;
    padding: 0;
}

/* 寬度限制 */
.container {
    margin: auto;
    width: 1200px;
    max-width: 2000px;
}

/* 書本排列flex */
.row {
    display: flex;
    justify-content: space-around;
    padding: 0 24px;
}

.row_2 {
    display: flex;
    justify-content: center;
}
.row_3{
    display: flex;
    justify-content: space-around;}

/* 區塊 */
.section_1,
.section_2,
.section_3,
.section_4,
.section_5,
.section_6 {
    width: 100%;
    text-align: center;
    /* border-radius: 50px; */
    margin: 60px 0;
    padding: 40px 0;
    background-color: rgb(255, 255, 255,0.8);
}

.section_1 {
    margin: 0 0;
}

/* .section_2 {
    background-color: white;
}

.section_3 {
    background-color: white;
}

.section_4 {
    background-color: white;
}

.section_5 {
    background-color: white;
}

.section_6 {
    background-color: white;
} */





/* 大標 */
.catch{
    position: relative;
    margin-bottom: 24px;
}
/* 副標 */

/* 類別標籤 */
.label {
    margin: 24px 0;
    display: block;
}

.label img:hover {
    transform: scale(0.97);
    transition: all 2ms ease-out 0.1s;
}
/* more更多 */
.more:hover {
    transform: scale(0.95);
    transition: all 2ms ease-out 0.1s;
}
.more{
    width: 200px;
    height: 110px;
    position: absolute;
    right: 60px;
}

.more_1{
    background-image: url(images/more-25.png);
    top: 20px;
}
.more_2{
    background-image: url(images/more-26.png);
    top: 20px;
}
.more_3{
    background-image: url(images/more-27.png);
    top: 0px;

}
.more_4{
    background-image: url(images/more-28.png);
    top: -10px;

}


/* 書本圖卡 */
.bookpic {
    width: 200px;
    height: 240px;
    margin: 8px 24px;
    object-fit: scale-down;
}

.book {
    max-width: 22%;    
    background-color: white;
    border: 4px black solid;
    border-radius: 20px;
    margin: 12px;
    padding: 12px 0;
    /* box-shadow: rgba(0, 0, 0) 2px 2px 0px ; */
}
.book_2 {
    max-width: 48%;    
    background-color: white;
    border: 4px black solid;
    border-radius: 20px;
    margin: 12px;
    padding: 12px 0;
    /* box-shadow: rgba(0, 0, 0) 2px 2px 0px ; */
}
.book:hover, .book_2:hover{
    transform: scale(0.97);
    transition: all 4ms ease-out 0.1s;
}

a {
    text-decoration: none;
}

/* .book:hover{
    transform: scale(0.95);
    transition: all 4ms ease-out 0.1s;
} */



/* 書本說明 */
.bodypoint {
    /* color: #E7544A; */
    background-color: #534741;
    color: white;
    font-size: 17px;
    font-weight: bold;
    display: block;
    padding: 8px 12px;
    margin: 8px auto;
    display: inline-block;
}
/* .bodypoint_1{
    background-color: #F29600;
}
.bodypoint_2{
    background-color: #009B88;
}
.bodypoint_3{
    background-color: #F7D400;
}
.bodypoint_4{
    background-color: #003454;
}
.bodypoint_5{
    background-color: #FF454D;
} */

/* 書名 */
.bookname {
    /* height: 60px; */
    color: black;
    font-size: 17px;
    font-weight: bold;
    /* margin: 0 16px; */
    text-align: center;
    text-decoration: underline;

    /* 超過兩行... */
    /* line-height: 1.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; */
}
.bookname_2{
    height: 60px;
}
.bookname_3{
    height: 40px;
}


/* 試閱 */
/* .read {
    background-color: #FF8E00;
    color: white;
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
    padding: 12px 32px;
    border-radius: 10px;
    margin: 16px 0;
} */

/* .read:hover{
    background-color: #ffb04f;
    color: black;
    font-weight: bold;
} */

.goindex{
    display: flex;
    justify-content: center;
    margin: 60px 0;
}
.goindex:hover{
    transform: scale(0.95);
    transition: all 4ms ease-out 0.1s;}
/* 其他書展 */
.link{
    /* background-color: #fff; */
    border-radius: 15px;
    margin: 24px;
    /* box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 5px ; */
    border: 4px black solid;
}
.link img{
    width: 520px;
    border-radius: 10px;

}
.link:hover{
    transform: scale(0.95);
    transition: all 4ms ease-out 0.1s;
}

/* 更多關鍵字 */
.word{
    background-color: white;
    color: black;
    font-size: 20px;
    font-weight: bold;
    border: 4px black solid;
    border-radius: 20px;
    margin: 12px;
    padding: 12px; 
}
.word:hover{
    transform: scale(0.95);
    transition: all 4ms ease-out 0.1s; 
}