@import url("reset.css");
*{
	margin:0;
	padding:0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
	font-family:'Noto Sans TC','微軟正黑體','Microsoft JhengHei',sans-serif;
}

h1,h2,h3,h4,h5,h6,span,p,a,input,button,div{
	font-family:'Noto Sans TC','微軟正黑體','Microsoft JhengHei',sans-serif;
	text-decoration: none;
	font-weight:400;
	letter-spacing:1px;
	color:#000;
}

img{
    display: block; border:0;
}
html,body{
    width: 100%;
	  height:100%;
	  background: url('../images/bg_04.jpg') center center no-repeat fixed;
    background-size: cover;
}



/*------------------------------layout組版開始------------------------------*/

#layout{ width: 100%; margin:0 auto; padding:0}

/*------------------------------ navbar ------------------------------*/
nav {display:block; width: 100%; height:auto; overflow:hidden; margin: 0 auto;}
nav > #menubar{ display: block; width:100%; height:75px; overflow:hidden; position:fixed; top:0px; margin:0 auto; padding:0; text-align:center; z-index:9999;}
nav > #menubar > .menubg{ width: 100%; height:75px; position: relative; margin: 0 auto; padding: 0;}

/*-----------------nav menu_wave動態-------------------------*/
@keyframes menu_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(1)
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1)
    }
}
.waveWrapper { 
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 75px;
}
.waveWrapperInner {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 100%;
    /*bottom: -1px;*/
}
.bgBottom {
    z-index: 5;
}
.wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom;
}
.waveBottom {
    background-size: 50% 100px;
}
.waveAnimation .waveBottom {
    animation: menu_wave 150s linear infinite;
}

/*-----------------menubar內容-------------------------*/

.bar { width:790px; position: absolute;top: 0; left: 0; right: 0; bottom: 0; margin:auto; padding:0; text-align:center; z-index: 999;}
.bar > .menu ul li { float:left;}
.menu ul li a{ display:block; margin:0 auto; padding:0; text-indent: -9999px;}
.menu ul li a.m1{ width:250px; height:50px; background:url(../images/mu_01.png) no-repeat center center;}
.menu ul li a.m2{ width:180px; height:50px; background:url(../images/mu_02.png) no-repeat center center;}
.menu ul li a.m3{ width:180px; height:50px; background:url(../images/mu_03.png) no-repeat center center;}
.menu ul li a.m4{ width:160px; height:50px; background:url(../images/mu_04.png) no-repeat center center;}
.menu ul li a.m1:hover{ background:url(../images/mu2_01.png) no-repeat center center;}
.menu ul li a.m2:hover{ background:url(../images/mu2_02.png) no-repeat center center;}
.menu ul li a.m3:hover{ background:url(../images/mu2_03.png) no-repeat center center;}
.menu ul li a.m4:hover{ background:url(../images/mu2_04.png) no-repeat center center;}


/*-----------------右側浮動-------------------------*/

#right { width:90px; height:425px; position: fixed; right: 0.75em; bottom: 2.2em; z-index: 700;}
.right-1 a {display:block; width:90px; height:98px; background:url('../images/right2_01.png') no-repeat; text-indent:-9999px;}
.right-1 a:hover { background:url('../images/right_01.png') no-repeat;}
.right-2 a {display:block; width:90px; height:98px; background:url('../images/right2_02.png') no-repeat; text-indent:-9999px;}
.right-2 a:hover { background:url('../images/right_02.png') no-repeat;}
.right-3 a {display:block; width:90px; height:98px; background:url('../images/right_03.png') no-repeat; text-indent:-9999px;}
.right-3 a:hover { background:url('../images/right2_03.png') no-repeat;}
.right-4 a {display:block; width:90px; height:98px; background:url('../images/right2_04.png') no-repeat; text-indent:-9999px;}
.right-4 a:hover { background:url('../images/right_04.png') no-repeat;}
.right-5 a {display:block; width:90px; height:33px; background:url('../images/right_05.png') no-repeat; text-indent:-9999px;}

/*------------------------------ header ------------------------------*/

header {display:block; width:100%; height:800px; background: #017c9b url(../images/bg_01.gif) top center repeat-x; overflow: hidden; position: relative;}
header > .curve1 {display: block; width: 100%; height: 110px; position: absolute; left: 0; bottom: 0; background: url('../images/curve_01.png'); z-index: 20;}
header > .kv { display:block; width:1200px; height:100%; margin:0 auto; padding:0; position:relative;}
.earth {display:block; position: absolute; top:456px; left:271px; z-index:4;}
.father {display:block; position: absolute; top:144px; left:50px; z-index:3;}
.peo1 {display:block; position: absolute; top:341px; left:406px; z-index:5;}
.peo2 {display:block; position: absolute; top:341px; left:406px; z-index:6;}
.peo3 {display:block; position: absolute; top:341px; left:406px; z-index:7;}
.title1 {display:block; position: absolute; top:109px; left:286px; z-index:8;}
.title2 {display:block; position: absolute; top:202px; left:415px; z-index:8;}
.rocket {display:block; position: absolute; top:102px; right:58px; z-index:9;}
 
/*------------------------------ article ------------------------------*/

article { width: 100%; height:auto; margin: 0 auto; padding:0;}

/*------------------------------ p1最美的第一本人生書 ------------------------------*/
 
article > #part1 {display:block; width:100%; height: auto; background-color:#e7fcff; margin:0 auto; padding:0; z-index:20;}
.introbox {display:block; width:1100px; height:550px; margin:0 auto; padding:0; position:relative;}
.cover1 {display:block; position: absolute; top:-230px; right:50px; z-index:999;}
.p1_price {display:block; position: absolute; top:275px; right:40px;}
.buy1 a{display:block; position: absolute; top: 480px; right: 120px; width:273px; height:52px; background: url('../images/buy_01.png'); -webkit-transition: transform 0.3s; -moz-transition: transform 0.3s; transition: transform 0.3s;}
.buy1 a:hover { background: url('../images/buy_01s.png'); transform: translateY(5px); -webkit-transform: translateY(5px); -moz-transform: translateY(5px); -ms-transform: translateY(5px);}
.p1_container {display: block; width:565px; height: auto; position: absolute; top: 35px; left: 35px;}
.txt01 {display:block; text-align:left; color:#000; font-size:19px; line-height:34px; letter-spacing:0.25px; text-align: justify; text-justify: inter-ideograph; -ms-text-justify: inter-ideograph;
 -moz-text-align-last:justify;  -webkit-text-align-last:justify;}
.p1_film {width:950px; height:534px; display:block; margin:0 auto; padding-top:25px;} 
.people {display: block; width: 100%; height: 448px; margin: 0 auto; padding:0; background: url('../images/bg_02.png') top center no-repeat;}

/*----------------------------- p2父親的話 ------------------------------*/

article > #author {display:block; width:100%; height:auto; margin:0 auto; padding-top: 35px; background-color: #fff; z-index:18;}
.part2 {display: block; width: 100%; height: 970px;}
.authorbox {display:block; width:1100px; height:300px; margin: 0 auto 5px auto; padding:0; position:relative;}
.p2_icon {display:block; position: absolute; top: 0px; left: -130px;z-index:3;}
.p2_title{display:block; position: absolute; top: 13px; left: 96px;z-index:4;}
.p2_2 {display:block; position: absolute; top: 86px; left: 148px; z-index:4;}
.p2_author{display:block; position: absolute; top: -30px; right: 0px;z-index:8;}
.txt02 {display:block; width: 935px; height: auto; margin: 0 auto; text-align:left; color:#000; font-size:20px; line-height:45px; letter-spacing:0.25px; text-align: justify; text-justify: inter-ideograph; -ms-text-justify: inter-ideograph;
 -moz-text-align-last:justify;  -webkit-text-align-last:justify;}
.txt03 { display:block; width:345px; height:auto; margin: 0 auto; text-align:left; color:#000; font-size:17px; font-weight: 350; line-height:34px; letter-spacing:-0.25px; text-align: justify; text-justify: inter-ideograph; -ms-text-justify: inter-ideograph;
 -moz-text-align-last:justify;  -webkit-text-align-last:justify;}
.p2_film {display: block; width: 929px; height: 344px; background: url('../images/p2_film.png'); margin:40px auto 75px auto; padding-top: 40px;}

/*----------------------------- p3專文導讀 -----------------------------*/
 
article > #guide {display:block; width:100%; height:auto; margin:0 auto; z-index:19;}
.part3 {display: block; width: 100%; height: auto; background-color: #fff;}
.p3box {display: block; width: 1200px; height: 558px; margin: 0 auto; position: relative;}
.p3_icon {display:block; position: absolute; top: 38px; left:88px;z-index:3;}
.p3_1 {display:block; width: 933px; height: auto; position: absolute; top: 120px; left: 130px; text-align:left; color:#000; font-size:19px; line-height:35px; letter-spacing:0.5px; text-align: justify; text-justify: inter-ideograph; -ms-text-justify: inter-ideograph;
 -moz-text-align-last:justify;  -webkit-text-align-last:justify;}
.p3_2 {display:block; width: 407px; height: auto; position: absolute; top: 245px; left: 130px; text-align:left; color:#000; font-size:19px; line-height:35px; letter-spacing:0.5px; text-align: justify; text-justify: inter-ideograph; -ms-text-justify: inter-ideograph;
 -moz-text-align-last:justify;  -webkit-text-align-last:justify;}
.pic1 {display:block; position:absolute; top: 210px; right:10px; z-index: 8;}

.review{display: block; width: 1200px; height: 260px; margin: 0 auto;}
.review ul li {float: left; padding:5px 2px;}

/* 點圖放大 */
.img_show {
    display: none;
    z-index: 50000;
    overflow-y: auto;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    padding: 40px 80px
}

.img_show .major_img { margin:0 auto 30px auto;}

.img_show .btn_close {
    cursor: pointer;
    width: 30px;
    height: 30px;
    background: url('../images/img_btn_close.png') center top no-repeat;
    background-size: 100%,auto;
    position: absolute;
    top: 20px;
    right: 20px;
}


/*----------------------------- 圓弧區 -----------------------------*/
.curve2 {display: block; width: 100%; height: 150px; background: url('../images/bg_03.png') top center no-repeat; background-size: contain;}

/*----------------------------- p4享讀人生 -----------------------------*/

article > #reading {display:block; width:100%; height:auto; margin:0 auto;}
.part4 {display: block; width: 100%; height: auto; margin-bottom: 35px;}
.p4_icon {display: block; width: 315px; height: 70px; margin:5px auto 0 auto; padding:0; z-index: 60;}
.booksale {display: block; width: 1100px; height: 573px; margin:32px auto 10px auto; background: url('../images/p4_1.png'); position: relative;}
.salecover {display: block; position: absolute; top:198px; left: 48px;z-index: 10; -webkit-transition: transform 0.3s; -moz-transition: transform 0.3s; transition: transform 0.3s;}
.salecover a:hover {transform: translateY(-2px); -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px);}

.buy2 a{display:block; position: absolute; top: 475px; right: 87px; width:273px; height:52px; background: url('../images/buy_02.png'); z-index: 55;-webkit-transition: transform 0.3s; -moz-transition: transform 0.3s; transition: transform 0.3s;}
.buy2 a:hover { transform: translateY(3px); -webkit-transform: translateY(3px); -moz-transform: translateY(3px); -ms-transform: translateY(3px);}

.buy3 a{display:block; width:226px; height:43px; background: url('../images/buy_03.png'); z-index: 50;-webkit-transition: transform 0.3s; -moz-transition: transform 0.3s; transition: transform 0.3s;}
.buy3 a:hover { transform: translateY(3px); -webkit-transform: translateY(3px); -moz-transform: translateY(3px); -ms-transform: translateY(3px);}

.book {display: block; width: 1100px; height: 489px; margin:0 auto;}
.book ul li {float: left;}
.book1 { display: block; width: 548px; height: 489px; margin-right: 8px; background: url('../images/p4_2.png'); position: relative;}
.cover2 {display: block; position: absolute; top:100px; left: 45px; z-index: 40; -webkit-transition: transform 0.3s; -moz-transition: transform 0.3s; transition: transform 0.3s;}
.cover2 a:hover {transform: translateY(-2px); -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px);}
.btn2 {display: block; position: absolute; bottom: 32px; left: 160px; z-index: 42;}

.book2 {display: block; width: 544px; height: 489px; background: url('../images/p4_3.png'); position: relative;}
.cover3 {display: block; position: absolute; top:105px; left: 36px; z-index: 40; -webkit-transition: transform 0.3s; -moz-transition: transform 0.3s; transition: transform 0.3s;}
.cover3 a:hover {transform: translateY(-2px); -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px);}
.btn3 {display: block; position: absolute; bottom: 32px; left: 159px; z-index: 42;}


/*----------------------------- Footer -----------------------------*/