@charset "big5";

/* CSS Document */
body{ font-family:'·L³n¥¿¶ÂÅé'; font-size:16px; line-height:180%; background:url(https://gkids.cwgv.com.tw/newbook/BKL163Y/img/bg.jpg) center top no-repeat; margin:0 auto; min-width:1000px; background-attachment:fixed;}
#wapper{ min-width:1000px; overflow-x: hidden;}

#header{font-family:'·L³n¥¿¶ÂÅé'; font-size:12px; background-color:#424242; padding:0; margin:0; color:#fff; width:100%; height:35px;}
#header a{ color:#fff; text-decoration:none}
#header a:hover{ text-decoration:underline;}
#footer{  padding:0 0 20px 0;}
#footer{ width:1000px; height:auto; margin:0 auto; color:#4b4b4b; font-size:12px; line-height:140%; padding: 0 10px 15px 10px; text-align:center;}
#footer a{ color:#4b4b4b; text-decoration:underline;}
#footer a:hover{  text-decoration:none}

img{ border:0; vertical-align:middle;}
.img-row{ width:1000px; margin:0; padding:0;}
.img-row img{ display:inline-block; line-height: 0; margin:0; padding:0; border:none;}

.scrollup {position: fixed; bottom: 20px; right: 20px; display: none; text-indent: -9999px;	width: 100px; height: 100px; background: url(top.png) no-repeat; z-index: 999999}

#kv{ background:url(https://gkids.cwgv.com.tw/newbook/BKL163Y/img/kv.png) center top no-repeat; min-width:1000px; height: 730px;}

#rdlist .bg{ background: url(../img/rdlist_03.png); width:860px; margin:0; padding:15px 70px 0 70px;}
#rdlist .bg2{ background: url(../img/rdlist_04.png) bottom center; height: 360px; width:800px; margin:0; padding:0 0 0 200px;}

#master .master_02{ background: url(../img/master_02.png); width:1000px; margin:0; padding:100px 0 30px 0;}

#recommend .recommend_02{ background: url(../img/recommend_02.png) bottom center no-repeat; height: 470px; width:860px; margin:0; padding:0 70px;}
#magazine .magazine_02{ background: url(https://gkids.cwgv.com.tw/newbook/BKL163Y/img/magazine_02.png) bottom center; width:1000px; margin:0; padding:0 0 100px 0;}


.container{ width:1000px; margin:0 auto; padding:0;}

.more{ display:block; overflow-y:scroll; overflow-x:hidden; padding: 0 10px; width:750px; height:260px; margin: 0 auto;}
.more strong{ font-weight: bold; color: #0076b3;}

/*KV*/
#book{ position: relative; left: 580px; top: 250px; z-index: 8;}
#bookinfo{ position: relative; left: 165px; top: 480px; z-index: 10; color: #fff; font-size: 18px; color: #FFFFFF;}
#bookinfo strong{ font-weight: bold; color: #F8FF00; font-size: 24px; margin: 0 5px;}
#nav{ position: relative; left: 10px; top: 130px; z-index: 9;}
.navA, .navB, .navC{ background:url(../img/nav.gif) 0 0 no-repeat; width:195px; height:115px; display:inline-block; cursor:pointer;}
.navA{ background-position:0px 0px;}
.navA:hover{ background-position:0px -115px;}
.navB{ background-position:-200px 0;}
.navB:hover{ background-position:-200px -115px;}
.navC{ background-position:-400px 0;}
.navC:hover{ background-position:-400px -115px;}

a.btn_club, a.btn_buy{ border-radius:30px; display:inline-block; margin:5px 15px 5px 0; padding:3px 30px; line-height:160%; font-size:15px; text-decoration:none; text-align:center; cursor:pointer;}
a.btn_buy{ background-color:#feda24; color:#000;}
a.btn_buy:hover{ background-color:#988316; color:#FFF;}
a.btn_club{ background-color:#6eaade; color:#000;}
a.btn_club:hover{ background-color:#426685; color:#FFF;}

/* flip */
.phone{ display: none;}
.pc { display: block;}
@media (max-width: 1000px) {
.phone{ display: block;}
.pc { display: none;}
}

.phone h1{ font-size: 20px; font-weight: bold; color: #2d747d; margin: 0; text-align: center;}
.phone h5{ font-size: 13px; font-weight: none; color: #5dbdc9; margin: 0; text-align: center;}
.phone p{ line-height: 160%; font-size: 15px; padding: 0 15px; margin: 10px 0 30px 0;}

.flip-container{display:inline-block;perspective:1000px}
.flip-container:hover .flipper,.flip-container.hover .flipper{transform:rotateY(180deg)}
.flip-container,.front,.back{width:210px;height:285px}
.flipper{transition:.6s;transform-style:preserve-3d;position:relative}
.front,.back{backface-visibility:hidden;position:absolute;top:0;left:0}
.front{z-index:2}
.back{transform:rotateY(180deg)}


/*BTN*/
a.btnA, a.btnB, a.btnC{ background:url(../img/btn.gif) 0 0 no-repeat; width:180px; height:74px; display:block; cursor:pointer; margin:0 auto;}
a.btnA{ background-position:0 0px;}
a.btnA:hover{ background-position:0 -74px; margin:0 auto;}
a.btnB{ background-position:-180px 0px;}
a.btnB:hover{ background-position:-180px -74px; margin:0 auto;}
a.btnC{ background-position:-360px 0px;}
a.btnC:hover{ background-position:-360px -74px; margin:0 auto;}