@charset "utf-8";

body{overflow: auto; font-size: 14px; font-family:font-family: "Droid Sans", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif,"微軟正黑體","Microsoft JhengHei", "宋体","SimSun"; background: #dcdcdc;  width: fit-content; min-width: 100%;}
#wrap{width:100%;}
a:hover{text-decoration: none;}
#container{display: block; margin: auto; float: none;}
#container .flipbook-viewport{display: block; margin: auto;}
#container .flipbook-viewport .container{position: static; margin: auto; overflow: hidden;}
#container .flipbook-viewport .flipbook{position: static !important; margin: auto !important; /*max-height: 100vh;*/}
.flipbook > div{text-align: center;}

/**header**/
#header{margin-bottom: 3em; max-width: 100%;}
#s_menu{padding: 0; box-shadow: rgb(0, 104, 216) 0px 1px 5px;}
#menu{max-width: 1360px; }
#menu > div{height: 45px; box-sizing: border-box; line-height: 45px; font-size: 1.15em; float: left; margin-right: 15px;}
#menu div a{font-weight: bold; }
#menu .logo_syf{display: block; width: initial;}
#menu .logo_syf a{height: 35px; width: auto; }
#menu .logo_syf  img{vertical-align: inherit;}
#menu #h_find{border: thin solid #fff; text-align: center; padding: 2.5px 5px; height: 35px; margin: 5px; background: #6ac8f2; float: right;}
#h_find .box_b{text-align: center; margin: auto; display: block; line-height:25px; border: thin solid #fff; padding: 0 5px;}
#h_find a{color: #fff;}
#h_find a:hover{text-decoration: none;}
#h_find .box_b:after{content: ""; display:inline-block; width: 22px; height: 15px; background: url("/images/icon/mail_icon.png");}
/**電子書功能bar**/
#menu .tool_bar{margin-left: 7px;}
#menu .tool_bar li{display: flex; height: 45px;}
#menu .tool_bar li img{display: block; margin: auto;}
#menu .tool_bar li:hover{cursor: pointer;}
#menu .tool_bar .page_val{margin: 0 5px;}
#menu .tool_bar li > .box_b{width: 5em; height: 35px; margin: auto; margin-top: 6px; display: flex; padding: 2px 3px; background: #b4b5b5;}
.page_val input{width: 100%; margin: auto; height: 30px; text-align: center; background: #eeefef;}
/**container**/
#main{/*width: 1360px; */min-height: 95vh; }
#aside{width: 200px; height: 700px; background: #f90;}
#article{width: inherit;}
.flipbook-viewport .container .row{position: relative;}
.flipbook-viewport .shadow{box-shadow:0 10px 20px #666}
.flipbook-viewport .container .row > div{cursor: pointer;}
.page-wrapper img{width: 100%; height: 100%;}

.page_btn{display: block; width:680px; position: absolute; top: 0; background:none;  z-index: 9;}
.container .previous-button{left:calc(50% - 680px);}
.container .next-button{right:calc(50% - 680px);}
.btn_shadow{position: absolute; z-index: 2; width: 45px; height: 45px; display: block; top: calc(50% - 22.5px); left: calc(50% - 22.5px); border-radius: 50%;} 
.previous-button:hover .btn_shadow{background: rgba(0,0,0,.1);}
.next-button:hover  .btn_shadow{background: rgba(0,0,0,.1);}
.previous-button:active  .btn_shadow{background: rgba(0,0,0,.25);}
.next-button:active  .btn_shadow{background: rgba(0,0,0,.25);}
.page_btn span{position: absolute; width: 60px; height: 60px; display: flex; top: 49%;  border-radius:50%; }
.page_btn span img{position: relative; z-index: 1;}
.previous-button span{left: 0;}
.next-button span{right: 0;}
.page_btn span p{margin: auto;}
.container .title_text{width: 0 !important; height: 0 !important; overflow: hidden !important;}
#f_menu{display: none;}
/**footer**/
#footer{display: block; width: 100%; background: #000; height: 1.5em; margin-top: 1em;}
#footer p{line-height: 1.5em; text-align: center;}
#footer em{color: #adddf3; margin-right: 5px;}

@media only screen and (max-width: 1360px){
    .t-index{display: none;}
}
@media only screen and (max-width: 1300px){
    .tlink-n{display: none;}
}
@media only screen and (max-width: 1280px){
    .tlink-i, .tlink-c, .tlink-s{display: none;}
}
@media only screen and (max-width: 960px){
    #header{margin-bottom: 1em;}
    #s_menu{display:block;}
    #s_menu .tool_bar{display: none;}
    #menu{display: flex; justify-content: space-between;}
    #menu > div{margin: 0 5px;}
    /*.container > .row{display: none;}*/
    .page_btn span{display: none};
    #container{margin-bottom: 4em;}
    #container .flipbook-viewport .flipbook{position: relative !important; top: 0; left: 0;}
    #article{margin-bottom: 55px;}
    #footer{position: fixed; bottom: 0;}
    .tlink-n, .tlink-i, .tlink-c, .tlink-s{display: block;}
    .page_btn{width: 100% !important;}
    /******手機板功能bar******/
    #f_menu{display: block; width: 100%; position: fixed; bottom: 0; left: 0; background: #fff; z-index: 999999;}
    #f_menu .tool_bar > ul{display: flex; align-content: space-between; justify-content:center; /*margin: 0 10px;*/}
    #f_menu .tool_bar li{display: flex; height: 45px; margin: 0 1.5px; background: url(/images/ebook_ui/btn_bg.png) center/contain repeat; width: 16.5%; width: calc(100%/6); border-radius: 3px;}
    #f_menu .tool_bar li img{display: block; margin: auto;}
    #f_menu .tool_bar li:hover{cursor: pointer;}
    #f_menu .tool_bar .go_to_page{color: #fff; font-size: 0.5e; display: flex;}
     .go_to_page p{margin: auto;}
    #f_menu .tool_bar .page_val{background: none; width: 55px;}
    #f_menu .tool_bar li > .box_b{width: 5em; height: 35px; margin: auto; margin-top: 6px; display: flex; padding: 2px 3px; background: #b4b5b5;}
    .zoom-in, .zoom-out, .no-zoom{display: none !important;}
}
@media only screen and (max-width: 550px){
     .tlink-n, .tlink-i, .tlink-c, .tlink-s{display: none;}
     /*#f_menu .tool_bar li img{width: 100%;}*/
}