html {
    width: 100%;
    overflow-x: hidden;
}

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 center;
    background-size: cover;
}

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

a {
    text-decoration: none;
}


/*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: 40px;
    right: 40px;
    width: 145.3px;
    height: 100px;
    background-image: url(images/TOP_39.png);
    z-index: 99;


}

#gotop:hover {
    background-image: url(images/TOP_40.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/banner_2.png);
    width: 1200px;
    height: 900px;
    position: relative;
}

/* 跳至各區塊的按鈕start */
.button_1 {
    background-image: url(images/button_5.png);
    width: 221px;
    height: 180px;
    position: absolute;
    bottom: 153px;
    left: 255px;
}

.button_1:hover {
    background-image: url(images/button_8.png);
    transform: scale(1.05);
    transition: all 2ms ease-out 0.1s;

}

.button_2 {
    background-image: url(images/button_6.png);
    width: 221px;
    height: 180px;
    position: absolute;
    bottom: 153px;
    left: 515px;
}

.button_2:hover {
    background-image: url(images/button_9.png);
    transform: scale(1.05);
    transition: all 2ms ease-out 0.1s;

}

.button_3 {
    background-image: url(images/button_7.png);
    width: 221px;
    height: 180px;
    position: absolute;
    bottom: 153px;
    left: 777px;
}

.button_3:hover {
    background-image: url(images/button_10.png);
    transform: scale(1.05);
    transition: all 2ms ease-out 0.1s;

}

/* 跳至各區塊的按鈕end */



/* .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 0;
    font-size: 12px;
    font-style: normal;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    color: #fff;
    background-color: #000;
    min-width: 1200px;
}



* {
    margin: 0;
    padding: 0;
}

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

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

    margin: auto;
    width: 1200px;
    max-width: 2000px;
}

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

/* 區塊 */
.section_1,
.section_2,
.section_3 {
    width: 100%;
    text-align: center;
    /* border-radius: 50px; */
    margin: 0 0 60px 0;
    padding: 40px 0;
    margin: auto;
    background-position: center 0;
    position: relative;
}

.section_1 {
    background-image: url(images/BG_4.png);
    background-repeat:no-repeat;
    position: relative;
    height: 3740px;
    min-width: 1200px;
}

.section_2 {
    background-image: url(images/BG_22.png);
    background-repeat:no-repeat;
    /* background: #000; */
    position: relative;
    height: 2900px;
    min-width: 1200px;

}

.section_3 {
    /* background-color: white; */
    background-image: url(images/BG_23.png);
    background-repeat:no-repeat;
    height: 700px;
    min-width: 1200px;
}


/* 大標 */

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

.catch {
    width: 1200px;
    height: 100px;
    display: flex;
    justify-content: center;
    display: block;
    top: 0px;
    left: 0px;
}

.catch {
    background-image: url(images/catch_14.png);
}

/* .catch_1:hover{
    background-image: url(images/catch_34.png);
}
.catch_2{
    background-image: url(images/catch_17.png);
}
.catch_3{
    background-image: url(images/catch_18.png);
}
.catch_4{
    background-image: url(images/catch_19.png);
}
.catch_5{
    background-image: url(images/catch_20.png);
} */
/* 副標 */

/* 類別超連結 */
.handline {
    position: relative;
}

.subcatch {
    position: absolute;

    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-top: 50px; */
    animation: heart 1.3s ease-in-out infinite alternate;
}
@keyframes heart{
    from{transform: translate(0,-5px);}
    to{transform: translate(0,5px);} /*下浮動高度*/
}
.frame_1, .frame_2, .frame_3{
    background-image: url(images/fearm_41.png);
    width: 1200px;
    height: 1011px;
    position: absolute;
    left: auto;
    z-index: -999;
}
.frame_4, .frame_6{
    background-image: url(images/fearm_42.png);
    width: 1200px;
    height: 503.8px;
    position: absolute;
    left: auto;
    z-index: -999;
}
.frame_5, .frame_7{
    background-image: url(images/fearm_43.png);
    width: 1200px;
    height: 503.8px;
    position: absolute;
    left: auto;
    z-index: -999;
}
.frame_8{
    background-image: url(images/fearm_44.png);
    width: 1200px;
    height: 500.56px;
    position: absolute;
    left: auto;
    z-index: -999;
    top: 290px;
}
.frame_1{
    top: 360px;
}
.frame_2{
    top: 1550px;
}
.frame_3{
    top: 2820px;
}
.frame_4{
    top: 370px;
}
.frame_5{
    top: 1080px;
}
.frame_6{
    top: 1770px;
}
.frame_7{
    top: 2480px;
}

.subcatch_1 {
    left: 0px;
    top: 66px;
    background-image: url(images/subcatch_15.png);
    width: 581px;
    height: 128px;
}
.subcatch_1:hover{
    background-image: url(images/subcatch_29.png);
}
.subcatch1_1{
    position: absolute;
    right: 0px;
    top: 105px;
    background-image: url(images/subcatch_45.png);
    width: 516px;
    height: 54px;
    z-index: -999;
}
.subcatch_2 {
    left: 0px;
    top: 104px;
    background-image: url(images/subcatch_16.png);
    width: 426px;
    height: 121px;
}
.subcatch_2:hover{
    background-image: url(images/subcatch_30.png);
}
.subcatch2_1{
    position: absolute;
    right: 0px;
    top: 135px;
    background-image: url(images/subcatch_46.png);
    width: 719px;
    height: 54px;
    z-index: -999;
}
.subcatch_3 {
    left: 0px;
    top: 120px;
    background-image: url(images/subcatch_17.png);
    width: 532px;
    height: 179px;
}
.subcatch_3:hover{
    background-image: url(images/subcatch_31.png);
}
.subcatch3_1{
    position: absolute;
    right: 0px;
    top: 165px;
    background-image: url(images/subcatch_47.png);
    width: 414.8px;
    height: 107px;
    z-index: -999;
}
.subcatch_4 {
    left: 0px;
    top: 70px;
    background-image: url(images/subcatch_18.png);
    width: 426px;
    height: 121px;
}
.subcatch_4:hover{
    background-image: url(images/subcatch_32.png);
}
.subcatch4_1{
    position: absolute;
    right: 0px;
    top: 95px;
    background-image: url(images/subcatch_48.png);
    width: 747px;
    height: 54px;
    z-index: -999;
}
.subcatch_5 {
    left: 0px;
    top: 120px;
    background-image: url(images/subcatch_19.png);
    width: 426px;
    height: 121px;
}
.subcatch_5:hover{
    background-image: url(images/subcatch_33.png);
}
.subcatch5_1{
    position: absolute;
    right: 0px;
    top: 145px;
    background-image: url(images/subcatch_49.png);
    width: 696.4px;
    height: 54px;
    z-index: -999;
}
.subcatch_6 {
    left: 0px;
    top: 120px;
    background-image: url(images/subcatch_20.png);
    width: 581px;
    height: 128px;
}
.subcatch_6:hover{
    background-image: url(images/subcatch_34.png);
}
.subcatch6_1{
    position: absolute;
    right: 0px;
    top: 165px;
    background-image: url(images/subcatch_50.png);
    width: 443.4px;
    height: 54px;
    z-index: -999;
}
.subcatch_7 {
    left: 0px;
    top: 120px;
    background-image: url(images/subcatch_21.png);
    width: 571px;
    height: 128px;
}
.subcatch_7:hover{
    background-image: url(images/subcatch_35.png);
}
.subcatch7_1{
    position: absolute;
    right: 0px;
    top: 155px;
    background-image: url(images/subcatch_51.png);
    width: 601.8px;
    height: 54px;
    z-index: -999;
}


.space {
    margin-top: 260px;
}
.space_2 {
    margin-top: 140px;
}
.space_3 {
    margin-top: 360px;
}
.space_4 {
    margin-top: 305px;
}
.space_5 {
    margin-top: 160px;
}
/* .space_6 {
    margin-bottom: 40px;
} */
.up{
    margin-top: 32px;
    position: relative;
}
/* 上下類別 */
/* .type_2 {
    display: inline-block;
    color: white;
    background-color: rgb(255, 40, 40);
    padding: 10px 12px;
    width: 340px;
    border-radius: 20px;
    font-size: 18.8px;
    font-weight: bold;
    margin-top: 24px;
    box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 5px;
} */
.type_1{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 445px;
    height: 98px;
    background-image: url(images/subcatch_24.png);
}
.type_1:hover{
    background-image: url(images/subcatch_36.png);
}
.type_2{
    position: absolute;
    top: 0px;
    left: 460px;
    width: 524px;
    height: 98px;
    background-image: url(images/subcatch_25.png);
}
.type_2:hover{
    background-image: url(images/subcatch_37.png);
}
.type_3{
    position: absolute;
    top: 0px;
    left: 1000px;
    width: 199px;
    height: 91px;
    background-image: url(images/subcatch_26.png);
}
.type_3:hover{
    background-image: url(images/subcatch_38.png);
}

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

.book {
    /* width: 260px; */
    /* height: 440px; */
    /* min-width: 200px; */
    /* background-color: white; */
    border-radius: 20px;
    margin: 24px;
}

.book:hover {
    transform: scale(0.97);
    transition: all 2ms ease-out 0.1s;
}
/* 
.book_2 {
    width: 300px;
    background-color: white;
    border-radius: 20px;
    margin: 24px;
    padding: 24px;
    box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 5px;
} */



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


.book p {
    color: black;
    /* font-size: 16px; */
    font-weight: bold;
    /* margin: 0 16px; */
    text-align: center;
    /* text-decoration: underline; */
}
/* 書本說明 */
.bodypoint {
    /* color: #E7544A; */
    background-color: #00C9ED;
    color: white;
    font-size: 17px;
    font-weight: bold;
    display: inline-block;
    padding: 8px 12px;
    margin: 12px auto;
}

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

/* 試閱 */
.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 {
    background-image: url(images/button_27.png);
    width: 900px;
    height: 150px;
    display: flex;
    justify-content: center;
    margin: 60px auto;
    max-width: 1200px;
}

.goindex:hover {
    background-image: url(images/button_28.png);
    transform: scale(0.95);
    transition: all 4ms ease-out 0.1s;
}