@charset "UTF-8";

@import url("pic/unifont_jp-15.1.05.otf");

/* clearfix */
.cf { zoom: 1; }
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }

img
{
	max-width:100%;
}



html
{
	height:100%;
}

/* background-color:#31452a; */
body
{
	font-family: Unifont-JP, "Noto Sans TC", sans-serif;

	margin: auto;
	background-color:#ffffff; 

		width:100%;
		max-width:1024px;


	min-height:100%;
	display:flex;
	flex-direction:column;

	text-align:center;


}

#div_show2{


height:800px;
	text-align:center;
	background-image: url("../pic/frame4.png");
	background-repeat: no-repeat; /* Do not repeat the image */

}

#div_content,  #div_content_m, #div_content_normal, #div_content_normal2{
display:flex;


	text-align:center;

background-color:#426480;
}
 #div_content_normal2{

	background-color:red;
	position:relative;

 }


#spang_title, #div_mobile_show, #div_colllect_mobile,#div_collect_page2{

display:none;
}

#div_content_top{

	display:none;
	background-color:#426480;
}


.div_img, .div_img2, .div_img3, .div_img_m, .div_img_normal{

text-align:center;
margin:auto;

color:#9eeac6;
}
.div_img img,.div_img2 img, .div_img3 img, .div_img_normal img{

	width:20px;
	margin-left:50px;
	text-align: left;
	margin:5px;

}

.main_menu{

	min-width:150px;
	background-color:#285464;
	padding-top:10px;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:10px;

	
	background-repeat: no-repeat; /* Do not repeat the image background-image: url("../pic/item_frame.png");*/

	color:white;
	border-radius:10px;
}

.social_item{
	min-width:150px;

	padding-top:10px;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:10px;

	
	background-repeat: no-repeat; /* Do not repeat the image background-image: url("../pic/item_frame.png");*/

	color:#436b8d;
	border-radius:10px;


}

.div_about{
	text-align:center;
	margin:auto;

	padding:10px;
}
.div_about_txt{
width:45%;padding:10px;line-height:25px;
float:left;margin-left:20px;

}

.div_about_txt2{

width:45%;padding:10px;line-height:25px;
float:left;margin-left:20px;

text-align:left;


}

#div_footer{

top:100%;
}
#div_msgbox{
z-index:99; border-width:3px;border-style:solid;top: 25%;left:30%; border-color:gray;background-color:#f2f2f2;height:auto;position:absolute;max-width:95%;

}


/* Social */

	ul.social {
		list-style: none;
		padding-left: 0;
		overflow: hidden;
		cursor: default;
		margin: 0 0 0 0;
	}

	ul.social li a img{

		width:70px;
	}

		ul.social li {
			display: inline-block;
			padding-left: 0;
			margin-left: 0em;
		}


			ul.social li a {
				display: inline-block;
				width: 3em;
				height: 3em;
				text-align: left;
				border-radius: 5px;
				background: #fff;
				-moz-transition: background-color .25s ease-in-out;
				-webkit-transition: background-color .25s ease-in-out;
				-ms-transition: background-color .25s ease-in-out;
				transition: background-color .25s ease-in-out;
			}



				ul.social li a.fa-facebook {
					background: #3c5a98;
				}

					ul.social li a.fa-facebook:hover {
						background: #4c6aa8;
					}

				ul.social li a.fa-twitter {
					background: #2daae4;
				}

					ul.social li a.fa-twitter:hover {
						background: #3dbaf4;
					}

				ul.social li a.fa-dribbble {
					background: #c4376b;
				}

					ul.social li a.fa-dribbble:hover {
						background: #d4477b;
					}

				ul.social li a.fa-linkedin {
					background: #006599;
				}

					ul.social li a.fa-linkedin:hover {
						background: #1075a9;
					}

				ul.social li a.fa-tumblr {
					background: #2b4661;
				}

					ul.social li a.fa-tumblr:hover {
						background: #3b5671;
					}

				ul.social li a.fa-google-plus {
					background: #da2713;
				}

					ul.social li a.fa-google-plus:hover {
						background: #ea3723;
					}

/* Icons */

	.icon {
		text-decoration: none;
		position: relative;
		text-decoration: none;
	}




		.icon > .label {
			display: none;
		}

		.icon.featured {
			position: relative;
			display: inline-block;
			background-color: #d52349;
			width: 9em;
			padding: 0em 0 0em 0;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			margin: 0 0 0em 0;
			cursor: default;
		}

			.icon.featured:before {
				font-size: 4.5em;
				line-height: 1em;
				color: #fff;
			}

			.icon.featured:after {
				content: '';
				position: absolute;
				bottom: -1.95em;
				left: 0;
				border-top: solid 2em #d52349;
				border-left: solid 4.5em transparent;
				border-right: solid 4.5em transparent;
			}

			.icon.featured.alt {
				background-color: #252122;
			}

				.icon.featured.alt:after {
					border-top-color: #252122;
				}

			.icon.featured.alt2 {
				background-color: #827a7c;
			}

				.icon.featured.alt2:after {
					border-top-color: #827a7c;
				}


.div_bar img{

	display:none;
}
/* Contact */

	ul.contact {
		list-style: none;
		padding-left: 0;
		margin-top: 20px;
	}

		ul.contact li {
			position: relative;
			border-top: solid 1px #ddd;
			padding: 1.3em 0 1.3em 7em;
		}

			ul.contact li h3 {
				position: absolute;
				left: 0;
				top: 0em;
				font-size: 1.1em;
			}

			ul.contact li p {
				margin-top: 0;
			}

			ul.contact li:first-child {
				padding-top: 0;
				border-top: 0;
			}

			ul.contact li p a{
							display: inline-block;
				word-break: break-word;
			}



.bq_m{display:none;}

#div_collect_right{
width:75%;float:right;text-align:center;

}

#hamburger{
font-size:12px;color:white;width:100px;float:right;margin-top:40px;


}
#div_collect_mobile_pics, #div_bt_switch{
	display:none;

}
	#div_collect_text{



		width:33%;
		margin:0px;
	}

.showcollect_td{

	background-color:white;

}
#div_show{
	background-image: url("../pic/frame3.png");
	background-repeat: no-repeat; /* Do not repeat the image */


}
/* 手機 */
@media only screen and (max-width:768px) 
{
	
	
	.div_img, #div_show, #img_title, #div_content_normal2{
		display:none;
	}
	
	#div_content{

		display:none;

	}
	
	#spang_title{

		display:inline;
		font-size:16px;
		float:left;
		margin:20px;
		margin-left:25px;
		
	}

	.div_img2 img, .div_img_m img{

		width:20px;
		margin-left:50px;
		text-align: left;
		margin:5px;

	}

	#div_show2{


		display:inline;

	text-align:center;
	background-image: url("../pic/frame5.png");
	background-repeat: no-repeat; /* Do not repeat the image */
	background-position:center;

	min-width:500px;
	}

	.div_about{
		
		max-width:480px;
		text-align:center;
	}
	.div_about_txt{

		width:90%;

		padding:0px;

		margin-top:50px;

	/*background-image: url("../pic/frame5.png");
	background-repeat: no-repeat; /* Do not repeat the image */
	background-position:center;

	float:left;

		}

.div_about_txt2{

width:105%;
min-height:800px;

	float:left;

background-image: url("../pic/frame5.png");
	background-repeat: no-repeat; /* Do not repeat the image */
	background-position:center;

margin-top:150px;
margin-left:-5px;

}





		.div_bar{

			color:white;
			
			text-align:center;
			padding:5px;

			margin-top:0px;

		}

		.div_img3{

padding:0px;

		}

		.div_bar img{

			display:inline;
			width:20px;
		}



		ul.contact li h3 {

		margin-left: 10px;
	}


		#div_msgbox{
		z-index:99; border-width:3px;border-style:solid;top: 25%;left:25px; border-color:gray;background-color:#ffffff;height:auto;position:absolute;width:90%;

		}


		
	.bq_m{

		
		max-width:100%;
		display:initial;

	}

	.bq_hide{display:none;}

	#div_colllect_mobile{

		display:inline;
		width:100%;

	float:left;

	height:300px;

	}

	#div_collect_left{

		display:none;
	}

	#div_collect_right{
	width:100%;


	}


	#hamburger{
		margin-top:10px;


	}


	#div_collect_img{

		display:none;
	}

	#div_collect_text{



		width:100%;
	}

	 #div_bt_switch, #div_collect_page2{

	display:inline;
	}

	#div_collect_mobile_pics{

display:flex;
	}

	ul.social {
margin-top:100px;

margin-left:50px;
margin-right:20px;


	
	}

		ul.social li {
			float:left;
			width:15%;

		}

		ul.contact{
		
margin-left:45px;margin-right:20px;
		}



	
	.social_item{
		min-width:150px;
		background-color:#285464;
		padding-top:10px;
		padding-left:10px;
		padding-right:10px;
		padding-bottom:10px;

		
		background-repeat: no-repeat; /* Do not repeat the image background-image: url("../pic/item_frame.png");*/

		color:white;
		border-radius:10px;


	}

	.pennant{
margin-right:30px;

	}
	

	#div_footer{

	 display:none;
	}
}