@charset "utf-8";
/* CSS Document */
*{ 
	box-sizing: border-box;
	border:0;
	font: 15px Arial, Helvetica, sans-serif, 微軟正黑體;
	margin:0;
	padding:0;
	outline:0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {display: block;}
header, section, footer { overflow:hidden; margin:0 auto;}
a{transition: all 0.3s ease-in-out 0s; color:inherit;}

address,caption,cite,code,dfn,em,th,var {font-weight: normal;font-style: normal;}
a,a:hover,img,div,input,background,li{text-decoration: none;outline: none; list-style:none; /* for Firefox */border:none;
hlbr:expression(this.onFocus=this.blur()); /* for IE */}

img { max-width:100%; width:100%; height:auto;}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*------------------------------------------------------------*/
.btn-box {
	position: fixed;
    bottom: 40px;
    right: 20px;
    width: 55px;
    height: auto;
    z-index: 1100;
    cursor: pointer;
}
/*header .menu { position:absolute; top:0; right:10px; display:block; padding:5px 10px; background:#999; color:#FFF; border-radius:0 0 3px 3px; z-index:10;}
header .menu:hover { background:#e9104e; box-shadow:0px 0px 10px #000;}*/
.btn-box img {background: #999; padding: 5px; opacity: 0.5;}
.btn-box img:hover { opacity:1;}
section { text-align:center; }
h2 { font-size:40px; font-weight:bold; color:#e9104e; line-height:120px;}
h3 { font-size:20px; font-weight:bold; color:#f39700; line-height:40px; display:inline-block; vertical-align:top;margin: 20px;}
h3:before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left-color: #f39700;
    float: left;
    margin-top: 14px;
}
strong { font-size:medium;}

#aaa iframe { display:none;}
#bbb article { clear:both;}
#bbb article pre { font-size:40px; font-weight:bold; color:#FFF; line-height:80px;}
#bbb article ul {
	position:relative; 
	top:-500px; 
	margin:0 auto;
	-webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
#bbb article ul li { color:#FFF; line-height:24px;}
#bbb article div {
	position:relative;
	overflow:hidden;
	clear:both;
	display:inline-block;
	width:calc(80% / 2);
	height:250px;
	padding:40px;
	margin:10px;
	cursor:pointer;
}
#bbb article .a01 {
	background:url(../images/p01.jpg) center top no-repeat;
	background-size:cover;
}
#bbb article .a02 {
	background:url(../images/p02.jpg) center top no-repeat;
	background-size:cover;
}
#bbb article .a03 {
	background:url(../images/p03.jpg) center top no-repeat;
	background-size:cover;
}
#bbb article .a04 {
	background:url(../images/p04.jpg) center top no-repeat;
	background-size:cover;
}
#bbb article .a01:hover ul, #bbb article .a02:hover ul, #bbb article .a03:hover ul, #bbb article .a04:hover ul { top:0px;}
#bbb article .a01:hover { background:#0e1c6a;}
#bbb article .a02:hover { background:#125a6a;}
#bbb article .a03:hover { background:#0c5b42;}
#bbb article .a04:hover { background:#552711;}


#bbb img { max-width:500px;}
#aaa div { height:326px; padding: 40px 60px; text-align:left;
	-webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;}
#aaa div:hover {
	-moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
	opacity:1;
}
#aaa div pre { font-size:30px; font-weight:bold; color:#FFF; line-height:65px;}
#aaa div p { margin-bottom:5px; padding-bottom:5px; max-width: 500px;}

#aaa .b01 {background:url(../images/b01.png) left bottom no-repeat;background-size: contain; padding-left: 45%;}
#aaa .b02 {background:url(../images/b02.png) right bottom no-repeat;background-size: contain; padding-right: 45%;}
#aaa .b03 {background:url(../images/b03.png) left bottom no-repeat;background-size: contain; padding-left: 45%;}
#aaa .b04 {background:url(../images/b04.png) right bottom no-repeat;background-size: contain; padding-right: 45%;}
#sidebar iframe {width: 100%; height: 200px;}

/**/
#sidebar {
		width: 320px;
		float:right;
		padding:10px;
		background:#ddd;
		text-align:center;
		padding-bottom: 100%;
	}
#sidebar h2 {    font-size: 24px; color: #167ac6; line-height:inherit;    margin: 22px 0;}
#sidebar #inquiry_form { text-align:left; }
#sidebar #inquiry_form p { display:block;}
#sidebar #inquiry_form p, #ccc #inquiry_form p label, #ccc #inquiry_form p span { color:#167ac6;line-height: 45px;}
#sidebar #inquiry_form p input {padding: 5px;margin: 0 5px;}
#sidebar #inquiry_form p .txt { width:246px;}
#sidebar #inquiry_form .check-box { border-top:1px dotted #ccc;    font-size: medium;}
#sidebar #inquiry_form p .check {
	display: inline-block;
    color: #666;
    border-bottom: 2px solid #aaa;
    font-style: oblique;
	margin: 0 5px;
}
#sidebar #inquiry_form p .check:hover { font-style:normal;    color: #FFF; background-color:#f39700; border-radius:3px; border-bottom:none; padding:0 1px;}
#sidebar button { background:none;}
#sidebar button a {
    padding: 10px;
    width: 100%;
    border-radius: 5px;
    display: block;
    font-weight: bold;
	border: 2px solid #B5D3E4;
    color: #FFF;
	background: -webkit-linear-gradient(left top,#BAE7F9,#167ac6);
    background: -o-linear-gradient(bottom right,#BAE7F9,#167ac6);
    background: -moz-linear-gradient(bottom right,#BAE7F9,#167ac6);
    background: linear-gradient(to bottom right,#BAE7F9,#167ac6);
}
#sidebar button a:hover { background:#33ACDC;}
#sidebar pre { float:left; /*color:#F29634;*/ font-weight:bold;    margin-top: 10px;    font-size: large;}
/**/
.sidebar {
		width: 320px;
		float:right;
		padding:10px;
		background:#ddd;
		text-align:center;
		padding-bottom: 100%;
		display:none;
	}
.sidebar h2 {    font-size: 24px; color: #167ac6; line-height:inherit;    margin: 22px 0;}
.sidebar #inquiry_form { text-align:left; }
.sidebar #inquiry_form p { display:block;}
.sidebar #inquiry_form p, #ccc #inquiry_form p label, #ccc #inquiry_form p span { color:#167ac6;line-height: 45px;}
.sidebar #inquiry_form p input {padding: 5px;margin: 0 5px;}
.sidebar #inquiry_form p .txt { width:246px;}
.sidebar #inquiry_form .check-box { border-top:1px dotted #ccc;    font-size: medium;}
.sidebar #inquiry_form p .check {
	display: inline-block;
    color: #666;
    border-bottom: 2px solid #aaa;
    font-style: oblique;
	margin: 0 5px;
}
.sidebar #inquiry_form p .check:hover { font-style:normal;    color: #FFF; background-color:#f39700; border-radius:3px; border-bottom:none; padding:0 1px;}
.sidebar button { background:none;}
.sidebar button a {
    padding: 10px;
    width: 100%;
    border-radius: 5px;
    display: block;
    font-weight: bold;
	border: 2px solid #B5D3E4;
    color: #FFF;
	background: -webkit-linear-gradient(left top,#BAE7F9,#167ac6);
    background: -o-linear-gradient(bottom right,#BAE7F9,#167ac6);
    background: -moz-linear-gradient(bottom right,#BAE7F9,#167ac6);
    background: linear-gradient(to bottom right,#BAE7F9,#167ac6);
}
.sidebar button a:hover { background:#33ACDC;}
.sidebar pre { float:left; /*color:#F29634;*/ font-weight:bold;    margin-top: 10px;    font-size: large;}
/**/
footer { clear:both; margin:0 auto; text-align:center; background:#000; padding:10px; color:#999;}

/**/
#logo { margin:0 auto; text-align:center; background:#999; padding-top:10px;}
#logo img { width:300px;}

#policy { clear: both; padding: 5% 2%;}
#policy p, #policy ul { text-align:left;}
#policy p { margin:10px 0;}
#policy p span { color:#F00;}

#policy > ul > li {list-style-type: cjk-ideographic;  margin: 10px 0 0 24px; line-height: 30px;}
#policy > ul > li > ul > li {list-style-type: decimal; margin-left: 20px;}
#policy > ul > li > ul > li > ul > li {list-style-type: inherit; margin-left: 22px;}
#policy .ps { color:#F00;}
#policy .ps:before {
	content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left-color: #F00;
    float: left;
    margin-top: 5px;
}
#policy .ps a { font-weight:bold; margin:0 5px;}



@media screen and (max-width: 960px){
	#bbb article div { padding:20px;}
}
@media screen and (max-width: 927px){
	#no {
	width: 320px;
    float: right;
    padding: 10px;
    background: #ddd;
    text-align: center;
    padding-bottom: 100%;}
}

@media screen and (max-width: 760px){
	#sidebar { display:none;}
	.sidebar {
	width: 100%;
	padding:0 5px 0 0;
    position: relative !important;
    display: block;
	overflow:hidden;
	}
	.sidebar h2 { margin:0 0 10px 0; cursor:pointer;}
	.sidebar h2:before, #sidebar h2:after {content:"▼"; display:inline-block;  margin: 0 10px;}
	.sidebar #inquiry_form { padding:0 10px;}
	.sidebar #inquiry_form p, #ccc #inquiry_form p label, #ccc #inquiry_form p span {text-align: left; float: left;    line-height: 35px;}
	.sidebar #inquiry_form p .txt { width: 120px; margin-right: 10px;}
	.sidebar #inquiry_form .check-box { width:100%;}
	.sidebar button { display: block; clear: both;}
	.sidebar button a { padding: 4px;}
	.sidebar pre {margin-right: 30px;}
	
	#aaa { clear:both;}
	#aaa iframe { display:block; width:100%;}
	#no { display:none;}
}

@media screen and (max-width: 560px){
	header .menu {padding: 3px 8px;    font-size: smaller;}
	#aaa { padding:2%;}
	h2, #bbb article pre { font-size: x-large;line-height:inherit;}
	.sidebar { padding:5px; height:inherit;}
	iframe { width:100%; height:200px; float:none; padding:0;} 
	.sidebar h2 { font-size: 20px;}
	h3 { margin:0;}
	#bbb article div {    width: 100%;    margin: 10px 0;}
	#aaa div { height: 400px;}
	#aaa .b01, #aaa .b02, #aaa .b03, #aaa .b04 { padding: 40px 60px;}
}

@media screen and (max-width: 360px){
	.sidebar #inquiry_form p .txt {  width: 105px;}
}