@import url("reset.css");
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900');

*{
	margin:0;
	padding:0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
	font-family:"Noto Sans TC",sans-serif,"Microsoft JhengHei",'微軟正黑體';
}

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

img{border:0;}
html,body{ 
	width: 100%;
	height:100%; 
	background: url('../images/bg5.jpg') top center fixed repeat-y;
}

/*------layout組版開始------*/
#layout{ width: 100%; margin:0 auto; padding:0;}

.clearfix{clear: both;}

/*------ navbar ------*/
#navbar{width:100%; height: 60px; background: url('../images/nav_bg.png'); overflow:hidden; position:fixed; top:0; margin:0 auto; padding:0; z-index:9999;}
.menu{width: 1200px; height: 100%; margin: 0 auto; padding:0;}
.menu ul li {float:left;}
.menu ul li a{ display:block; height:48px;}
.logo { width:245px; margin:0 55px 0 0;}
.m-btn2, .m-btn3, .m-btn4, .m-btn5, .m-btn6, .m-btn7 {width:150px; text-indent: -9999px; -webkit-animation-delay: 0.2s;-moz-animation-delay: 0.2s; animation-delay: 0.2s;}
.m-btn2 {background: url('../images/nav02.png');}
.m-btn2:hover {background: url('../images/nav02-2.png');}
.m-btn3 {background: url('../images/nav03.png');}
.m-btn3:hover {background: url('../images/nav03-2.png');}
.m-btn4 {background: url('../images/nav04.png');}
.m-btn4:hover {background: url('../images/nav04-2.png');}
.m-btn5 {background: url('../images/nav05.png');}
.m-btn5:hover {background: url('../images/nav05-2.png');}
.m-btn6 {background: url('../images/nav06.png');}
.m-btn6:hover {background: url('../images/nav06-2.png');}
.m-btn7 {background: url('../images/nav07.png');}


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

header{display:block; width:100%; height:auto; overflow: hidden; margin-top: 45px; padding:0;}
#kv {width:1200px; height: 580px; margin:0 auto; /* overflow: hidden; */ position: relative;}

#kv > div > img {display: block;}

#demo-1 {
	position: absolute; /* can either be relative, absolute or fixed. If position is not set (i.e. static), it would be set to "relative" by script */
	overflow: hidden; /* to bound the empty top space created by inner element's top margin */
	width: 750px;
	height: 500px;
	/* min-height: 490px; */
	top: 52px;
	right: 0;
	/* background: url('../images/pic1.jpg') no-repeat;
	background-size: cover;
	opacity: .3;
	filter: alpha(opacity=30); */
	/* background-color: rgba(0, 0, 0, 0.3); */
}

.title1, .title2, .title3, .bird1, .newbook, .newbook2, .kv-pic {display:block;position: absolute;}
.title1{z-index:6;top:38px; left:47px;}
.title2{z-index:8;top:68px; left:184px;}
.title3{z-index:5;top:280px; left:200px;}
.bird1{z-index:4;top:212px; left:10px;}
.newbook{z-index: 7; top: 353px; left: 0;}
.newbook2{z-index: 3; top: 429px; left: 76px;}
.kv-pic{z-index:2; bottom:18px; left:43px;}



/*------ article ------*/
#part2, #bg4, #part3, #author, #download, #bg2, #books{width:100%; height: auto; margin:0 auto; padding:0; overflow:hidden;}
.container{width: 1200px; height: auto; margin:0 auto;position: relative;}
.container > img {display: block;}


/*------ 關於本書 ------*/
#bg4{display:block; height:30px;background: url('../images/bg4.png') top center no-repeat;}
#intro{display:block; width:100%; background-color: #fff; padding-top: 20px; overflow: hidden;}
#intro > .container {height: 710px;}

.intro-t{ width: 220px; margin: 0 auto;}

.cover, .introbox, .buy-btn{position: absolute;}
.cover{z-index: 9; top:83px; left:42px;}
.introbox{width: 1200px; height: 605px; z-index:2; top:76px; left:0;}

.buy-btn{z-index: 8; bottom: 45px; right: 315px; -webkit-transition: transform 0.2s; -moz-transition: transform 0.2s; transition: transform 0.2s;}
.buy-btn:hover { transform: translateY(5px); -webkit-transform: translateY(5px); -moz-transform: translateY(5px); -ms-transform: translateY(5px);}

/*------ part3+4 ------*/
#part3{ height:1303px; background: url('../images/bg3.png') top center no-repeat; padding-top: 65px;}

/*------ 冷知識 ------*/
#about{display:block; width:100%; height: 510px;}
#about > .container { display:block;width:1200px; margin:0 auto; padding-left: 98px;}
#about > .container ul li {float: left; margin-right: 45px;}

/*------ 角落裡的故事 ------*/
#story{display:block;width:100%;height:670px;}
#story > .container {height: 100px; margin-bottom: 10px;}
.story-t{width:497px; margin:0 auto;}

/*5個tab*/
.main {margin: 0 auto;width:100%; text-align: center;}
.content {width:100%; margin-top:5px;}
.content > div {display: none; padding: 10px;}

input {display: none;}
label { 
    width:150px;
    /* height:50px; */
    /* line-height:50px; */
	display: inline-block;
	cursor: pointer;
	text-align: center;
	background-color: #d9c6a4;
}

label:hover {background-color: #a5813f; cursor: pointer;}
input:checked + label { background-color:#a5813f;}
label > img {display: block; margin:12px auto;}


#tab1:checked ~ .content #content1,
#tab2:checked ~ .content #content2,
#tab3:checked ~ .content #content3,
#tab4:checked ~ .content #content4,
#tab5:checked ~ .content #content5 {
  display: block;
}

.storybox{ width:1050px; height: 800px; margin: 0 auto; position: relative;}

.s1-t, .s1, .s1-btn, .mark1-1, .mark1-2 {position: absolute;}
.s1, .s2, .s3, .s4, .s5{ width: 700px; height: 467px; top: 5px; right: 0; z-index: 2; box-shadow:3px 3px 2px rgba(52,36,6,.35)}
.s1 > img {max-width: 100%;}
.s1-t, .s2-t, .s3-t, .s4-t, .s5-t{top: 26px; left:24px; z-index: 1;}
.s1-btn {top: 335px; left:75px; z-index: 3;}
.mark1-1{top: 305px; right: 202px; z-index: 10;}
.mark1-2{bottom: 342px; right: 369px; z-index: 10;}

.s2-t, .s2, .s2-btn, .mark2-1, .mark2-2 {position: absolute;}
.s2 > img {max-width: 100%;}
.s2-btn {top: 305px; left:75px; z-index: 3;}
.mark2-1{top: 6px; left:535px; z-index: 10;}
.mark2-2{top: 127px; right: 221px; z-index: 10;}

.s3-t, .s3, .s3-btn, .mark3-1, .mark3-2 {position: absolute;}
.s3 > img {max-width: 100%;}
.s3-btn {top: 342px; left:75px; z-index: 3;}
.mark3-1{top: 120px; left:452px; z-index: 10;}
.mark3-2{top: 237px; left:382px; z-index: 10;}

.s4-t, .s4, .s4-btn, .mark4-1, .mark4-2 {position: absolute;}
.s4 > img {max-width: 100%;}
.s4-btn {top: 342px; left:75px; z-index: 3;}
.mark4-1{top: 160px; left: 407px; z-index: 10;}
.mark4-2{bottom: 298px; right: 60px; z-index: 10;}

.s5-t, .s5, .s5-btn, .mark5-1, .mark5-2 {position: absolute;}
.s5 > img {max-width: 100%;}
.s5-btn {top: 325px; left:75px; z-index: 3;}
.mark5-1{bottom: 315px; right: 265px; z-index: 10;}
.mark5-2{bottom: 384px; right: 454px; z-index: 10;}


/* Fancybox */
.fancybox-custom .fancybox-skin { box-shadow: 0 0 50px #222;}




#bg2{ display:block; height:40px;background: url('../images/bg2.jpg') top center no-repeat;}

/*------ 作者+下載 ------*/
#author{background-color: #fff;}
#author > .container {height:610px;}
.author-t{width:634px; margin:32px auto 25px auto;}

.a-pic, .a-pic2, .a-box {display:block;position: absolute;}
.a-pic{z-index: 6; top:147px; right:41px;}
.a-pic2{z-index: 5; top:416px; left:-5px;}
.a-box{z-index: 1; top:90px; left:40px;}
.a-ad{width:1100px; margin:10px auto 30px auto;-webkit-transition: transform 0.25s; -moz-transition: transform 0.25s; transition: transform 0.25s;}
.a-ad:hover { transform: translateY(7px); -webkit-transform: translateY(7px); -moz-transform: translateY(7px); -ms-transform: translateY(7px);}


#download{ background-color: #fff; padding-bottom: 15px;}
#download > .container {display:block; width: 1100px; height:568px; margin:30px auto; background: url('../images/bg-download.png');}
.paperbox { display:block; width:944px; height:auto; margin:0 auto; padding-top: 75px;}
.paper {display:block; float:left; width: 216px; height: 384px; margin:0 10px;}
.paper > img { display:block; max-width: 100%;}


/*------ 讀圖時代推薦 ------*/
#books{ background: url('../images/bg1.jpg') top center no-repeat; }
#books > .container {height:590px;}
.books-t{margin:15px auto 32px auto; padding-left: 40px;}

#books > .container > .books-box {float: left; display:block; width:265px; margin:0 15px; text-align: center;}
.books-c{width: 100%; height: 245px; text-align: center; margin-bottom: 28px;}
.buy-btn3{ margin-top: 15px; -webkit-transition: transform 0.2s; -moz-transition: transform 0.2s; transition: transform 0.2s;}
.buy-btn3:hover { transform: translateY(5px); -webkit-transform: translateY(5px); -moz-transform: translateY(5px); -ms-transform: translateY(5px);}




/*----- 動態 -----*/

.animated {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; 
}

.mask { overflow: hidden;}

@-webkit-keyframes mask_showimg {
  from { 
    width: 0%;
    opacity: 0;
	}

  to {
  	width: 100%;
  	opacity: 1;
  }
}

@keyframes mask_showimg {
  from { 
    width: 0%;
    opacity: 0;
	}

  to {
  	width: 100%;
  	opacity: 1;
  }
}

.mask_showimg {
  -webkit-animation-name: mask_showimg;
  animation-name: mask_showimg; 
}

@-webkit-keyframes mask_showimg_Right {
  from { 
    /* width: 0%; */
    opacity: 0;
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
	}

  to {
  	/* width: 100%; */
  	opacity: 1;
  	-webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes mask_showimg_Right {
  from { 
   /*  width: 0%; */
    opacity: 0;
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
	}

  to {
  	/* width: 100%; */
  	opacity: 1;
  	-webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.mask_showimg_Right {
  -webkit-animation-name: mask_showimg_Right;
  animation-name: mask_showimg_Right; 
}


@-webkit-keyframes flybird {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3) translate3d(-300%, 300%, 0);
    transform: scale3d(0.3, 0.3, 0.3) translate3d(-300%, 300%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes flybird {
  from {
    opacity: 0;
    -webkit-transform:scale3d(0.3, 0.3, 0.3) translate3d(-300%, 300%, 0);
    transform:scale3d(0.3, 0.3, 0.3) translate3d(-300%, 300%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.flybird {
  -webkit-animation-name: flybird;
  animation-name: flybird;
}

@-webkit-keyframes pulse {
  from {
  	opacity: 0;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
  	opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
  	opacity: 0;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
  	opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes fadeIn {
  from { opacity: 0;}
  to { opacity: 1;}
}

@keyframes fadeIn {
  from { opacity: 0;}
  to { opacity: 1;}
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}


@-webkit-keyframes zoompics {
  from {
    opacity: 0;
    -webkit-transform: translate3d(40%, 0, 0);
    transform: translate3d(40%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes zoompics {
  from {
    opacity: 0;
    -webkit-transform: translate3d(40%, 0, 0);
    transform: translate3d(40%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.zoompics {
  -webkit-animation-name: zoompics;
  animation-name: zoompics;
}


@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3) translate3d(-500%, 0, 0);
    transform: scale3d(0.3, 0.3, 0.3) translate3d(-500%, 0, 0);
  }

  50%{ opacity: .5;}

  100%{ opacity: 1;}
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3) translate3d(-500%, 0, 0);
    transform: scale3d(0.3, 0.3, 0.3) translate3d(-500%, 0, 0);
  }

  50%{ opacity: .5;}

  100%{ opacity: 1;}
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-25%, 0, 0);
    transform: translate3d(-25%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-25%, 0, 0);
    transform: translate3d(-25%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}


@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 25%, 0);
    transform: translate3d(0, 25%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 25%, 0);
    transform: translate3d(0, 25%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -40%, 0);
    transform: translate3d(0, -40%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -40%, 0);
    transform: translate3d(0, -40%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}