@import url("reset.css");
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(https://fonts.googleapis.com/css?family=Lora);


*{
	margin:0;
	padding:0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

img{
    display: block; border:0;
}
html,body{ width: 100%;	background:#fff; -webkit-text-size-adjust: none;}



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

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


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

header {display:block; width:100%; height:790px; background: url(../images/hd_bg.jpg) top center no-repeat; overflow:hidden;}
header > .head { display:block; width:1200px; height:100%; margin:0 auto; padding:0; position:relative;}
.mtitle {display:block; position:absolute; top:27px; left:224px; z-index:8;}
.mtitle2 {display:block; position:absolute; bottom:64px; left:193px; z-index:3;}

.m1{display:block; position:absolute; top:36px; left:113px; z-index:5;}
.m2{display:block; position:absolute; top:296px; right:105px; z-index:5;}
.m3{display:block; position:absolute; top:300px; left:-4px; z-index:5;}
.m4{display:block; position:absolute; top:36px; right:107px; z-index:5;}

.mbg2 > .m9 {display:block; position:absolute; bottom:107px; right:20px; z-index:4;}
.mbg2 > .m10 {display:block; position:absolute; bottom:-57px; left:18px; z-index:10;}

.mbg3 > .m5 {display:block; position:absolute; top:108px; left:-61px; z-index:2;}
.mbg3 > .m6 {display:block; position:absolute; top:329px; left:-223px; z-index:2;}
.mbg3 > .m7 {display:block; position:absolute; top:248px; right:-63px; z-index:2;}
.mbg3 > .m8 {display:block; position:absolute; top:72px; right:-194px; z-index:2;}


/*------------------------------ navbar ------------------------------*/
nav {display:block; width: 100%; height:56px; background:#aa362c url(../images/nav_bg.jpg)top center repeat-y; margin: 0 auto;}
nav > .menu { width:1200px; height:56px; margin:0 auto; padding:0; text-align:center;}
.menu ul{list-style: none;}
.menu ul li{display: block;	float: left;}
.menu ul li a{display: block; background: url(../images/menu.png); text-indent: -9999px; height: 56px;}

.menu ul li a.menu1{width:418px;}
.menu ul li a.menu1:hover{ background-position: 0px -56px; background-position-y: -56px;}
.menu ul li a.menu2{width:313px; background-position: -418px 0px; background-position-x: -418px;}
.menu ul li a.menu2:hover{background-position: -418px -56px; background-position-y: -56px;}
.menu ul li a.menu3{width:165px; background-position: -731px 0px; background-position-x: -731px;}
.menu ul li a.menu3:hover{background-position: -731px -56px; background-position-y: -56px;}
.menu ul li a.menu4{width:304px; background-position: -896px 0px; background-position-x: -896px;}
.menu ul li a.menu4:hover{background-position: -896px -56px;background-position-y: -56px;}

/*----------右側浮動----------*/
#right {display:none; width:129px; height:115px; position: fixed; right:-0.25em; bottom:2em; z-index: 700;}
.r-btn {display:block; width:129px; height:115px; background:url(../images/right.png); text-indent:-9999px;}

/*------------------------------ article ------------------------------*/
article { width: 100%; height:auto; overflow:hidden; margin: 0 auto; padding:0;}

/*----------妖怪圖鑑----------*/
article > #intro2 {display:block; width:100%; height:112px; background:url(../images/intro_bg1.jpg) top center no-repeat; margin:0 auto; padding:0;}
article > #intro {display:block; width:100%; height:541px; background:url(../images/intro_bg2.jpg) top center no-repeat; margin:0 auto; padding:0;}
.intro_1 {display:block; width:1100px; height:100%; margin:0 auto; padding:0;}
.ic_1 {display:block; width:691px; float:left; text-align:right;}
.ic_2 {display:block; width:409px; float:left;}

.clearfix { clear:both;}

/*----------購物車----------*/
.price{font-family:'Noto Sans TC','微軟正黑體','Microsoft JhengHei','Lora',sans-serif;font-size:21px; line-height:40px; font-weight:600; letter-spacing:1px;color:#000;}
.size{font-family:'Noto Sans TC','微軟正黑體','Microsoft JhengHei','Lora',sans-serif;font-size:18px; line-height:34px; font-weight:400; letter-spacing:1px;color:#000;}
.buy {display:block; width:74px; height:74px; background:url(../images/buy.png); -webkit-transition: transform 0.2s; -moz-transition: transform 0.2s; transition: transform 0.2s;}
.buy:hover{background:url(../images/buy2.png);}

/*----------4p----------*/
#intro3{display:block; width:100%; height:539px; background:url(../images/intro_bg3.jpg) top center no-repeat; margin:0 auto; padding:0;}
#intro3 > .intro_3 {display:block; width:1200px; height:auto; margin:0 auto; padding:0; position:relative;} 
.ch4-1 {display:block; width:770px; height:103px; position:absolute; top:89px; left:216px; z-index:2;}
.ch4-2 {display:block; width:694px; height:132px; position:absolute; top:301px; left:216px; z-index:2;}
.ch-m1 {display:block; width:196px; height:305px; position:absolute; top:-28px; left:7px; z-index:6;}
.ch-m2 {display:block; width:174px; height:205px; position:absolute; top:23px; right:7px; z-index:6;}
.ch-m3 {display:block; width:194px; height:182px; position:absolute; top:325px; left:-62px; z-index:6;}

#intro4{display:block; width:100%; height:433px; background:url(../images/intro_bg4.jpg) top center no-repeat; margin:0 auto; padding:0;}
#intro4 > .intro_4 {display:block; width:1200px; height:auto; margin:0 auto; padding:0; position:relative;}
#intro4 > .intro_4 > .ch4-3 {display:block; width:819px; height:auto; position:absolute; top:11px; left:94px; z-index:2;}
#intro4 > .intro_4 > .ch4-4 {display:block; width:821px; height:auto; position:absolute; top:203px; left:94px; z-index:2;}

.txt01{font-family:'Noto Sans TC','微軟正黑體','Microsoft JhengHei',sans-serif; font-size:16px; line-height:29px; font-weight:400; letter-spacing:0.5px;color:#000;text-align: justify;
text-justify: inter-ideograph; -ms-text-justify: inter-ideograph; -webkit-text-align-last:justify;}

.txt02{padding-top:15px;font-family:sans-serif,'Noto Sans TC','微軟正黑體','Microsoft JhengHei'; font-size:17px; line-height:33px; font-weight:410; letter-spacing:0.75px;color:#000;text-align: justify;
text-justify: inter-ideograph; -ms-text-justify: inter-ideograph; -webkit-text-align-last:justify;}

/*----------怪物介紹----------*/
#preview{display:block; width:100%; height:790px; background:url(../images/bg_02.jpg) top center no-repeat; margin:0 auto; padding-top:20px;}
.p3-1{display:block; width:885px; height:120px; background:url(../images/p3-1.png); margin: 0 auto; padding:0;z-index:10;}
.pre1{display:block; width:1200px; height:650px; margin:0 auto; padding:0; position:relative;}
.pre-m1{display:block; width:204px; height:288px; background:url(../images/ani-m1.png); position:absolute; top:15px; left:26px; z-index:5;}
.pre-m2{display:block; width:177px; height:300px; background:url(../images/ani-m2.png); position:absolute; top:61px; left:257px; z-index:6;}
.pre-m3{display:block; width:250px; height:255px; background:url(../images/ani-m3.png); position:absolute; top:0; left:455px; z-index:8;}
.pre-m4{display:block; width:234px; height:196px; background:url(../images/ani-m4.png); position:absolute; top:29px; left:741px; z-index:6;}
.pre-m5{display:block; width:228px; height:319px; background:url(../images/ani-m5.png); position:absolute; top:72px; right:14px; z-index:7;}
.pre-m6{display:block; width:201px; height:206px; background:url(../images/ani-m6.png); position:absolute; top:367px; left:10px; z-index:5;}
.pre-m7{display:block; width:295px; height:215px; background:url(../images/ani-m7.png); position:absolute; top:412px; left:213px; z-index:8;}
.pre-m8{display:block; width:152px; height:287px; background:url(../images/ani-m8.png); position:absolute; top:310px; left:506px; z-index:7;}
.pre-m9{display:block; width:277px; height:200px; background:url(../images/ani-m9.png); position:absolute; top:227px; left:675px; z-index:8;}
.pre-m10{display:block; width:467px; height:205px; background:url(../images/ani-m10.png); position:absolute; top:429px; right:41px; z-index:6;}

/*----------內容試閱----------*/
#preview2{display:block; width:100%; height:610px; background:url(../images/bg_03.jpg) top center no-repeat; margin:0 auto; padding:0;}
.pre2{display:block; width:1100px; height:auto; margin:0 auto; padding:0;}
.pre2-1{display:block;width:410px; height:auto; float:left; padding-top:38px;}
.pre2-1 ul li {margin-bottom:12px;}
.pre2-2{display:block;width:280px; height:auto; float:left; text-align:center; padding-top:20px;}
.pre2-3{display:block;width:410px; height:auto; float:left; padding-top:38px;}
.pre2-3 ul li {margin-bottom:12px;}

/*----------各界力薦----------*/
#resound{display:block; width:100%; height:1326px; background:url(../images/bg_04.jpg) top center no-repeat; margin:0 auto; padding:0; padding-top:77px;}
.res{display:block; width:1144px; height:auto; margin:0 auto; padding:0; text-align:center;}

/*----------作者和譯者----------*/
#author{display:block; width:100%; height:auto; margin:0 auto; padding:0;}
.part4{display:block; width:100%; height:105px; background:url(../images/author_bg2.jpg) top center no-repeat; margin:0 auto; padding:0;}
.author{display:block; width:1100px; height:582px; margin:0 auto; padding:0; position:relative;}
.p5-1{display:block; width:259px; height:566px; background:url(../images/p5-1.png); position:absolute; top:16px; left:10px; z-index:2;}
.aut-1{display:block; width:477px; height:auto; position:absolute; top:37px; left:136px; z-index:5;}
.aut-2{display:block; width:427px; height:auto; position:absolute; top:37px; left:648px; z-index:5;}
.aut-3{display:block; width:765px; height:auto; position:absolute; top:219px; left:308px; z-index:5;}
.aut-4{display:block; width:635px; height:auto; position:absolute; top:418px; left:308px; z-index:5;}

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

footer {width: 100%; height:auto; overflow:hidden; margin:0 auto; padding:0; background-color:#f2e7ca; padding-top:24px;}
.copyright { display:block; width:848px; height:100%; margin:0 auto; padding:0; margin-bottom:24px;}