/* CSS Document */

@font-face {
$font-family-sans-serif:
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
}
body { margin:0; padding:0; font-family:"微軟正黑體"; 
text-align: justify;
text-justify:inter-ideograph;
}
img{ border:0;
vertical-align: middle;}
.clear{ clear:both;}
.clear{ clear:both;}

.content{
	font-size: 17px;
	line-height: 26px;
	color: #626262;
	text-align: justify;
　text-justify: inter-ideograph;
　-ms-text-justify: inter-ideograph; /IE9/
　-moz-text-align-last:justify; /Firefox/
　-webkit-text-align-last:justify; /Chrome/
}
.title{
	font-size: 16px;
	line-height: 26px;
	color: #825b4b;
}
.price{
	font-size: 14px;
	line-height: 36px;
	color: #434343;
}

.price2{
	font-size: 14px;
	line-height: 36px;
	color: #ffffff;
}
.price3{
	font-size: 14px;
	line-height: 36px;
	color: #eebff4;
}
.red{
	font-size: 18px;
	line-height: 30px;
	color: #e60012;
	font-weight: 500;
}
.yellow{
	font-size: 18px;
	line-height: 30px;
	color: #ffe101;
	font-weight: 500;
	text-shadow:3px 2px 3px #000000;
}
.yellow1{
	font-size: 18px;
	line-height: 30px;
	color: #ffe101;
	font-weight: 500;
}
.title1{
	font-size: 22px;
	line-height: 32px;
	color: #e60012;
	font-weight: 500;
}

.title2{
	font-size: 20px;
	line-height: 30px;
	color: #0075c2;
	font-weight: 500;
	background-color: #FFFFFF;
	border-radius: 10px;
	padding:4px;
}
.title3{
	font-size: 16px;
	line-height: 24px;
	color: #974e00;
	font-weight: 500;
}
.name1{
	font-size: 17px;
	line-height: 28px;
	color: #ffffff;
	font-weight: 700;
}
.name2{
	font-size: 17px;
	line-height: 28px;
	color: #732200;
	font-weight: 700;
}

.name3{
	font-size: 17px;
	line-height: 28px;
	color: #eebff4;
	font-weight: 700;
	text-shadow:3px 2px 3px #000000;
}

.top{ 
background: url("../images/bg_top.jpg")repeat top;
background-color: #f7c8d6;
}

.year{
	padding: 0 0 0px 0;
	background: url("../images/bg_answer.jpg")repeat top;
	background-size:cover;
}

.yearblock{ 
margin-right: auto;
margin-left: auto;
background-color: #7a3a83;
padding:10px;
border-radius: 25px;
}

.blackblock{ 
margin-right: auto;
margin-left: auto;
background-color: #000000;
padding:2px;
border-radius: 2px;
opacity: 0.7;
}

.answer{ 
padding: 0 0 0px 0;
background: url("../images/bg_answer.jpg")repeat top;
}

.answerblock{ 
margin-right: auto;
margin-left: auto;
background-color: #f7edf9;
padding:5px;
border-radius: 5px;
}

.best{ 
padding: 0 0 0px 0;
background-color: #191047;
}

.kid{ 
padding: 0 0 0px 0;
background: url("../images/bg_answer.jpg")repeat top;
}

.game{ 
padding: 0 0 0px 0;
background: url("../images/bg_game.jpg")repeat top;
}

.gameblock{ 
margin-right: auto;
margin-left: auto;
background-color: #c7232a;
padding:10px;
border-radius: 25px;
}

.gamepic1{ 
margin-right: auto;
margin-left: auto;
background-color: #fed9d9;
border-width:6px;
border-style:solid;
border-color: #c7232a;
border-radius: 15px;
}
.gamepic2{ 
margin-right: auto;
margin-left: auto;
background-color: #f2777c;
border-width:6px;
border-style:solid;
border-color: #c7232a;
border-radius: 15px;
}
.rule{
padding: 0 0 0px 0;
background: url("../images/bg_game.jpg")repeat top;
}

.footer{ 
padding:0; 
margin:0; 
color: #ffffff;
text-align:center; 
width:100%;
background-color: #1d030b;
}


.newbg{
	background-color: #fffdea;
	border:#1d99ce 3px dotted;
	border-radius: 25px;
}
.color{
background:url(../images/bg2.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
border:#6c2b2f 3px solid;
}
.color1{
background:url(../images/bg2.png)top center no-repeat;
background-size: cover;
}
@media (max-width: 992px) {
	.color1{
		background:url(../images/bg2.jpg);
		background-size: cover;
		border:#6c2b2f 2px solid;
		}
}
.color2{
width:auto;
height:auto;
padding-bottom:56.82%;
background-image:url(../images/bg2.png);
background-size:cover;
}
.colorbook{
	background-color: #ffffff;
	border:#baa468 3px dotted;
	border-radius: 25px;
}
.line{
	margin-top: 20px;
	padding-bottom:20px;
	font-size: 14px;
	color: #8e614a;
}

header.banner img{
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
	}
header.banner{
	padding-top: 0rem;
	padding-right: 0rem;
	padding-left: 0rem;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 0rem;
	height: auto;
	background: url(../images/bg3.jpg) repeat top;
	}

#animation_container{
	height: 100%;	
}
.intro-height{
	padding: 3rem 0;
}

header.top{
	padding-top: 3.2rem;
	padding-right: 0rem;
	padding-left: 0rem;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 0rem;
	height: auto;
	}

header.top img{
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
}

#bg1{	
	background: url("../images/bg1.jpg") top center repeat;
	height:auto;
	}

.banner{
	padding-top: 0rem;
	padding-right: 0rem;
	padding-left: 0rem;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 0rem;
	height: auto;
	background-color: #f7c8d6;
	}

#wrapper{
	padding:0; 
	margin:0;
	text-align:center;
	overflow: hidden;
}

div.justify {
　text-align: justify;
　text-justify: inter-ideograph;
　-ms-text-justify: inter-ideograph; /IE9/
　-moz-text-align-last:justify; /Firefox/
　-webkit-text-align-last:justify; /Chrome/
}
div.justify:after {
　content: ”;
　display: inline-block;
　width: 100%;
}
/*
#close{
   display:none;
}
*/