@charset "utf-8";
/* CSS Document */
/*-----------button----*/
*:link,
*:visited,
*:hover {
    -webkit-transition: all;
    -o-transition: all;
    -moz-transition: all;
    -ms-transition: all;
    transition: all;
}
.container #wrapper {
    line-height:1;
    font-size: 12px;
}
button {
	outline: none;
}
.buttonsAll button {
	display: block;
	float: left;
	width: 100%;
	height: 50px;
	padding: 0;
	font-size: 20px;
	letter-spacing: 0.15em;
	color: #00a9a9;
	background-color: #fff;
	border: solid 3px #1CBAC2;
	position: relative;
	cursor: pointer;
}
.buttonsAll button span span {
	display: block;
	width: 100%;
	height: 50px;
	line-height: 45px;
	color: #fff;
	background-color: #1CBAC2;
}
.buttonsAll button .bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	overflow: hidden;
}
.button01 {
	width: 880px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 20px;
	padding-top: 45px;
}
.button01 a:hover {
	opacity: 1 !important;
}
/*-----------button end----*/
#blackOverlay {
    display: none;
    position: fixed;
    z-index: 4;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(/images/project/bluehouse/blackOverlay.png);
}
#loading {
	background-image: url(/images/project/bluehouse/loading.gif);
	border: 1px solid #BBBBBB;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 82px;
	height: 82px;
	margin-left: -15px;
	margin-top: -15px;
	z-index: 9;
	box-shadow: 0px 0px 8px rgba(0,0,0,0.40);
	background-color: #FFF;
}
#scrollUp {
	display: none;
	position: fixed;
	z-index: 3;
	bottom: -5px;
	right: 20px;
	width: 85px;
	height: 85px;
	bottom: 0px;
	background-position: -1261px -90px;
}
#scrollUp:hover {
	background-position: -1261px -0px;
}
#social {
	display: block;
	position: absolute;
	width: 100%;
	right: 0;
}
html {
	color: #000;
	text-rendering: optimizelegibility;
}
body {
	margin: 0;
	color: #333;
}
body, button, input, select, textarea {
	font-family: "Microsoft JhengHei UI", "Microsoft JhengHei", "PingFang TC", "HeiTi TC", sans-serif;
	line-height: 150%;
	letter-spacing: 1px;
}
main, summary, img {
	display: block;
}
a {
	text-decoration: none;
}
header{
	-webkit-box-shadow: 0px 0px 8px;
	box-shadow: 0px 0px 8px;
	height: 60px;
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	z-index: 3;
	-webkit-transition: all 400ms ease;
	transition: all 400ms ease;
	background-color: #FDEED1;
	opacity: 1 !important;
	border-bottom: none;
}
.seo {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.wrapper {
	max-width: 960px;
	position: relative;
}
.wrapper, h2 p {
	margin-left: auto;
	margin-right: auto;
}
.Designer_logo, .chapter01, .ch_area, .chapter02, .chapter03, .chapter04, .chapter05, .chapter06, .chapter07, #scrollUp, .ch07_icon01, .ch07_icon02, .ch07_icon03, .close_popUp, .popUp_header span {
	background-image: url(/images/project/bluehouse/pag.png);
}
.Designer_logo {
	width: 73px;
	height: 33px;
	margin: 13px 20px 13px 0;
	background-position: 0 0px;
	position: absolute;
}
.Designer_logo a {
	width: 100%;
	height: 100%;
	display: inline-block;
}
nav {
	height: 40px;
	position: absolute;
	left: 84px;
	top: 10px;
	text-align: right;
	width: 690px;
	margin: 0;
}
nav>a {
	width: 96px;
	line-height: 40px;
	text-align: center;
	display: inline-block;
	position: relative;
	color: #333333;
	margin-right: -2px;
}
nav>a:hover, .menubackround {
	color: #1B8D8D;
	background-color: #fff4e2;
}
nav>a:after {
	content: '';
	position: absolute;
	width: 1px;
	height: 30px;
	background-color: #7FE5E5;
	top: 5px;
	right: -2px;
}
article#kanban {
	background-image: url(/images/project/bluehouse/banner.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-color: #d0fefc;
	margin-top: 60px;
	overflow: inherit;
	position: relative;
}
article#kanban>div {
	height: 480px;
}
/*main chapter01-------------*/
.chapter, .ch_area {
	position: absolute;
}
.chapter {
	width: 120px;
	height: 120px;
}
.chapter01 {
	background-position: 0px -154px;
	top: -32px;
}
.ch_area {
	width: 80px;
	height: 80px;
	background-position: 0px -56px;
	right: 0;
	top: -12px;
}
h2 p {
	border: 5px solid #7FE6E5;
	padding: 10px 0;
	width: 93%;
	text-align: center;
	font-size: 30px;
	color: #004C66;
	letter-spacing: 3px;
	font-weight: 100;
	background-color: #FFF;
}
h2 {
	position: relative;
	width: 960px;
	margin: 50px 0px;
}
h3{
	text-align: center;
	font-size: 20px;
	padding-bottom: 40px;
    padding-top: 10px;
	width: 960px;
	color: #000;
	font-weight: 100;
}
.tabs ul {
	padding: 0;
	width: 960px;
	margin: 20px 5px 20px 5px;
}
.tabs li {
	display: inline-block;
}
.tabs ul li {
	width: 140px;
	padding: 15px 9px 15px 29px;
}
.tabs li a {
	color: #000;
	font-size: 25px;
}
.tabs li a small {
	font-size: 15px;
}
li.tabs01 {
	background: #B7DEE8;
	border: 5px solid #B7DEE8;
}
li.tabs02 {
	background: #92AADE;
	border: 5px solid #92AADE;
}
li.tabs03 {
	background: #33CCCC;
	border: 5px solid #33CCCC;
}
li.tabs04 {
	background: #3399FF;
	border: 5px solid #3399FF;
}
li.tabs05 {
	background: #265996;
	border: 5px solid #265996;
}
li.tabs01:hover, li.tabs02:hover, li.tabs03:hover, li.tabs04:hover, li.tabs05:hover {
	background: #fff;
}
.tabs>div {
	width: 960px;
}
.tabs01_area {
	border: 5px solid #B7DEE8;
}
.tabs02_area {
	border: 5px solid #92AADE;
}
.tabs03_area {
	border: 5px solid #33CCCC;
}
.tabs04_area {
	border: 5px solid #3399FF;
}
.tabs05_area {
	border: 5px solid #265996;
}
.tabs_img {
	width: 60%;
	display: inline-block;
	vertical-align: top;
	padding: 10px;
	border-color: transparent;
}
.tabs_div {
	width: 36%;
	display: inline-block;
}
.tabs_div p a{
	color:#333;
	}
.tabs_div p a:hover{
	border-bottom:1px dashed #333;	
	}
.tabs_div p  {
	font-size: 18px;
	margin-top: 40px;
	line-height: 30px;
}
.tabs01_area01, .tabs01_area02, .tabs01_area03, .tabs01_area04, .tabs01_area05 {
	font-size: 25px;
	line-height: 35px;
	padding: 60px;
	margin-top: 10px;
	color: #fff;
	border:3px solid transparent;
}
.tabs01_area01 {
	background: #B7DEE8;
}
.tabs01_area01:hover, .tabs01_area02:hover, .tabs01_area03:hover, .tabs01_area04:hover, .tabs01_area05:hover{
	background:#FFF;
	}
.tabs01_area01:hover{
	border:3px dashed #B7DEE8;
	color:#B7DEE8;
	}
.tabs01_area02 {
	background: #92AADE;
}
.tabs01_area02:hover{
	border:3px dashed #92AADE;
	color:#92AADE;
	}
.tabs01_area03 {
	background: #33CCCC;
}
.tabs01_area03:hover{
	border:3px dashed #33CCCC;
	color:#33CCCC;
	}
.tabs01_area04 {
	background: #3399FF;
}
.tabs01_area04:hover{
	border:3px dashed #3399FF;
	color:#3399FF;
	}
.tabs01_area05 {
	background: #265996;
}
.tabs01_area05:hover {
	border:3px dashed #265996;
	color:#265996;
}
.section01 article {
	margin-bottom: 50px;
}
/*main chapter 02-------------*/
main .section02 {
	background-image: url(/images/project/bluehouse/background-ch02.png);
	background-repeat: repeat-y;
    height: 1402px;
	display: block;
}
.section02>div {
	height: 1402px;
}
.section02 h2 {
	padding-top: 50px;
	display: inline-block;
    margin-top: 30px;
}
.section02 h3, .section03 h3{
	margin-bottom:20px;
	}
.section02 .ch_area {
	top: 40px;
}
.section02 .chapter {
	top: 20px;
}
.chapter02 {
	background-position: 0px -275px;
}
.section02 article {
	width: 960px;
}
.section02 article>div {
	width: 470px;
	height: 500px;
	background-color: #fff;
	-moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.3);
	float: left;
}
.section02 .ch02_area01, .section02 .ch02_area02, .section02 .ch02_area03, .section02 .ch02_area04 {
	margin: 10px;
	display: inline-block;
}
.section02 .ch02_area01 {
	border: 1px solid #6EEDF3;
	width: 450px;
	height: 480px;
}
.section02 .ch02_area01_img {
	margin-left: 235px;
}
.section02 .ch02_area03_img {
	margin-left: 623px;
}
.section02 .ch02_area02 {
	border: 1px solid #1997EC;
	width: 450px;
	height: 480px;
}
.section02 .ch02_area03 {
	border: 1px solid #1C32A9;
	width: 940px;
	height: 250px;
}
.section02 .ch02_area04 {
	border: 1px dashed #333;
	width: 940px;
	height: 250px;
}
.chapter02-02 {
	margin-left: 20px;
}
.section02 article img{
	position: absolute;
	border-color: transparent;
}
.section01 article img:hover, .section02 article a:hover {
	opacity: 0.7;
}
.section02 .ch02_area01 span, .section02 .ch02_area02 span {
	display: inline-block;
	margin-left: 190px;
	margin-top: 40px;
	font-size: 18px;
	line-height: 30px;
}
.section02 .ch02_area03 span {
	display: inline-block;
	margin-left: 30px;
	margin-top: 163px;
	font-size: 18px;
	line-height: 30px;
}
.section02 hr.ch02_area01_hr {
	border: 2px solid #12DDEC;
}
.section02 hr.ch02_area02_hr {
	border: 2px solid #1997EC;
}
.section02 hr.ch02_area03_hr {
	border: 2px solid #1C32A9;
}
.ch02_area01 img {
	margin-top: 68px;
	margin-left: 15px;
}
.ch02_area02 img {
	margin-top: 68px;
	margin-left: 33px;
}
.section02 .chapter02-03 {
	width: 960px;
	height: 270px;
	margin-top: 20px;
}
.ch02_area03 img {
	margin-left: 315px;
	margin-top: 20px;
}
.ch02_area04 img {
	margin-left: 315px;
	margin-top: 15px;
}
.ch02_area04 p {
	font-size: 25px;
	color: #000;
	margin-left: 30px;
	margin-top: 40px;
}
.ch02_area04 p small {
	font-size: 20px;
	color: #1B8D8D;
	line-height: 30px;
}
/*main chapter 03-------------*/
.section03 article img, .section04 article img {
	position: absolute;
	border-color: transparent;
}
.section03 article div, .section04 article div{
	position:absolute;
	}
.section03 .chapter03 {
	background-position: 0px -396px;
	top:-35px;
}
section.section03 h2 {
    margin-top: 84px;
}
.section03 article a:hover, .section04 article a:hover {
	opacity: 1 !important;
}
article.section03_area01{
	position:relative;
	height: 761px;
	}
article.section03_area02{
	position:relative;
	height: 833px;
	}
div.ch03_area01 p {
    font-size: 15px;
    width: 170px;
    line-height: 22px;
}
.ch03_area01 {
    left: 245px;
    top: 19px;
}
.ch03_area ul {
	display: inline-table;
}
.ch03_area li {
	display: table-cell;
	padding: 15px 10px;
	color: #FFF;
	font-size: 18px;
}
.ch03_area li.ch03_area_li01 {
	background-color: #9AEBEB;
	color: #333;
}
.ch03_area li.ch03_area_li02 {
	background-color: #CED9F0;
	color: #333;
}
.ch03_area02 li, .ch03_area03 li, .ch03_area04 li {
	background-color: #00B2B2;
}
.ch03_area li:hover {
	background-color: #555;
}
.ch03_area li.ch03_area_li01:hover, .ch03_area li.ch03_area_li02:hover {
	background-color: #555;
	color: #FFF;
}
.ch03_area02 {
	left: 625px;
    top: 189px;
}
.ch03_area03 {
	left: 0px;
    top: 465px;
}
.ch03_area04 {
	left: 564px;
    top: 530px;
}
.ch03_area03 p {
	width: 320px;
	margin-left: 18px;
    margin-top: 16px;
}
.ch03_area04 p {
	width: 323px;
	margin-left: 22px;
    margin-top: 13px;
}
section.section03 hr {
	border: 1px dashed #333;
	margin-bottom: 50px;
}
.ch03_area03 p a:hover, .ch03_area04 p a:hover {
	color: #00B2B2 !important;
}
.ch03_area05 li, .ch03_area06 li, .ch03_area07 li, .ch03_area08 li, .ch03_area09 li, .ch03_area10 li {
	background-color: #8BA6DC;
}
.ch03_area03 p a, .ch03_area04 p a, .ch03_area05 p a, .ch03_area06 p a, .ch03_area07 p a, .ch03_area08 p a, .ch03_area09 p a, .ch03_area10 p a {
	font-size: 18px;
	line-height: 30px;
	color: #333;
}
.ch03_area05 p a:hover, .ch03_area06 p a:hover, .ch03_area07 p a:hover, .ch03_area08 p a:hover, .ch03_area09 p a:hover, .ch03_area10 p a:hover {
	color: #8BA6DC !important;
}
.ch03_area05 {
	top: 240px;
}
.ch03_area05 p {
	width: 343px;
	margin-left: 37px;
    margin-top: 14px;
}
.ch03_area06 {
	left: 540px;
    top: 457px;
}
.ch03_area06 p {
	width: 298px;
    margin-left: 100px;
    margin-top: 15px;
}
.ch03_area07 {
	left: 53px;
    top: 484px;
}
.ch03_area07 p {
	width: 183px;
	margin-left: 95px;
    margin-top: 14px;
}
.ch03_area08 {
	left: 523px;
    top: 804px;
}
.ch03_area08 img {
	left: 23px;
    top: -107px;
}
.ch03_area08 p {
	width: 253px;
	margin-left: 131px;
    margin-top: 12px;
}
.ch03_area09 {
	left: 80px;
    top: 1076px;
}
.ch03_area09 img {
	left: 225px;
    top: -107px;
}
.ch03_area09 p {
	width: 283px;
	margin-left: -8px;
    margin-top: 12px;
}
.ch03_area10 {
	left: 534px;
    top: 1186px;
}
.ch03_area10 img {
	left: 25px;
    top: -106px;
}
.ch03_area10 p {
	width: 313px;
	margin-left: 30px;
    margin-top: 17px;
}
/*main chapter 04-------------*/
main .section04 {
	background-image: url(/images/project/bluehouse/background-ch04.png);
	height: 2423px;
}
section.section04 h2 {
    top: 84px;
}
.section04 h3{
	margin-top: 130px;
    margin-bottom: 20px;
	}
.section04 .chapter04 {
	background-position: 0px -517px;
	top:-35px;
}
.section04 article div p strong {
	font-size: 18px;
	font-weight: bold;
}
.section04 article div p span {
	font-size: 16px;
}
.section04 article div p.ch04_p01, .section04 article div p.ch04_p02, .section04 article div p.ch04_p03 {
	font-size: 20px;
	letter-spacing: 2px;
	font-weight: 600;
	position: absolute;
}
.section04 article div p {
	line-height: 27px;
}
.section04 article div p.ch04_p01 {
	color: #D8A300;
	width: 330px;
	left: 99px;
    top: 19px;
}
.section04 article div p.ch04_p02 {
	color: #D86C00;
	width: 226px;
	right: -356px;
	top: 504px;
}
.section04 article div p.ch04_p03 {
	color: #D93600;
	left: 98px;
    top: 1122px;
    width: 500px;
}
.section04 article div p.ch04_strong01 {
	width: 560px;
	margin-top: 105px;
    margin-bottom: 33px;
}
.section04 article div p.ch04_strong02 {
	width: 470px;
	margin-top: 780px;
    margin-bottom: 17px;
}
.section04 article div p.ch04_strong03 {
	width: 440px;
    top: 1210px;
    left: 518px;
    position: relative;
}
.section04 article div p.ch04_strong04 {
	width: 440px;
	top: 1480px;
	position: relative;
	margin-bottom: 50px;
}
.section04 article div p span.ch04_strong03_hr {
	border-bottom: 1px solid #333;
	display: block;
}
.section04 article div.button02 {
	position:relative;
	z-index: 9;
}
.section04 article div.button03 {
	position: relative;
	top: 1225px;
    left: 518px;
}
.section04 article div.button03-1 {
	position: relative;
	top: 1504px;
    left: 0px;
}
.ch04_area02 {
	position:relative;
	border: 1px dashed #333;
	padding: 10px 10px 2px 10px;
	height: 300px;
	width: 960px;
	top:1793px;
}
.ch04_area02 img {
	border: 1px solid #333;
	float: left;
}
.ch04_area02 div {
	float: left;
}
.ch04_area02 p {
	font-size: 20px;
	position: relative;
	left: 20px;
	top: 80px;
	width: 910px;
}
.ch04_area02 .button04 {
	width: 700px;
	margin-left: 21px;
	margin-top: 10px;
}
.ch04_area02 small {
    font-size: 18px;
    line-height: 30px;
}
/*main chapter 05-------------*/
section.section05 h2 {
    top: 85px;
}
section.section05 h3 {
    margin-top: 130px;
    margin-bottom: 10px;
}
.section05 article a:hover {
	opacity: 1;
}
main.section05 {
	background-image: url(/images/project/bluehouse/background-ch05.png);
	height: 830px;
	display: block;
}
article.section05_area {
	height: 516px;
}
.section05 .chapter05 {
	background-position: 0px -638px;
	top: -35px;
}
.section05 h2 {
	margin: 0;
}
.section05 article p, .section05 article div.ch05_video {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.section05 article p img {
	position: relative;
	margin-left: 25px;
	margin-right: auto;
}
.section05 article p.ch05_area01 {
	background-image: url(/images/project/bluehouse/chapter05-01.png);
	background-repeat: no-repeat;
	width: 801px;
	height: 131px;
	display: block;
}
.section05 article p.ch05_area01 span {
	display: inline-block;
	width: 660px;
	margin-top: 28px;
	font-size: 16px;
	color: #15959B;
	line-height:25px;
}
.section05 article div.ch05_video {
	background-image: url(/images/project/bluehouse/chapter05.png);
	width: 562px;
	height: 377px;
	float: initial;
	margin-bottom: 50px;
	margin-left:199px;
	margin-right:199px;
}
.ch05_video .button05 a {
	display: block;
	width: 80px;
	height: 80px;
	background-image: url(/images/project/bluehouse/chapter05_video01.png);
	background-repeat: no-repeat;
	border-radius: 50%;
	border: 4px solid #1CBAC2;
	background-color: #FFF;
	overflow: hidden;
	background-position: center;
}
.ch05_video .button05 a span {
	display: block;
	width: 0%;
	height: 100%;
	background-image: url(/images/project/bluehouse/chapter05_video02.png);
	background-repeat: no-repeat;
	background-color: #1CBAC2;
	-webkit-transition: all 301ms ease;
	transition: all 301ms ease;
	background-position: center;
}
.ch05_video .button05 a:hover span {
	width: 100%;
}
.section05 article .ch05_video p a {
	text-align: center;
	display: inline-block;
	margin-top: 140px;
}
.section05 article span.bg img {
	top: 23px;
	left: 1px;
}
/*main chapter 06-------------*/
section.section06 h2 {
    top: 85px;
}
section.section06 h3 {
    margin-top: 130px;
    margin-bottom: 10px;
}
.section06 .chapter06 {
	background-position: 0px -759px;
	top:-35px;
}
main .section06 {
	background-image: url(/images/project/bluehouse/background-ch06.jpg);
	height:680px;
}
main .section06 h4 {
	text-align: center;
	font-size: 27px;
	color: #333;
	margin: 0;
	width: 960px;
	font-weight: 100;
}
main .section06 h4 span {
	border-bottom: 1px solid #333;
	display: inline-block;
	width: 170px;
	vertical-align: super;
}
.section06 ul {
	border: 1px dashed #000;
	padding: 25px 20px 0px 20px;
	margin-top: 30px;
	background-color: #FFF;
}
.section06 li {
	display: inline-block;
	width: 283px;
	padding-bottom: 20px;
	padding-left: 10px;
	padding-right: 10px;
}
section.section06 .ch06_ul {
	width: 960px;
}
li.ch06_button01 button span span, li.ch06_button02 button span span, li.ch06_button03 button span span, li.ch06_button04 button span span, li.ch06_button06 button span span, li.ch06_button07 button span span, li.ch06_button08 button span span, li.ch06_button09 button span span {
	background-color: #FFF !important;
}
li.ch06_button01 button {
	border: 3px solid #D90000 !important;
	background-color: #D90000 !important;
}
li.ch06_button01 button span span {
	color: #D90000 !important;
}
li.ch06_button02 button {
	border: 3px solid #A84DC4 !important;
	background-color: #A84DC4 !important;
}
li.ch06_button02 button span span {
	color: #A84DC4 !important;
}
li.ch06_button03 button {
	border: 3px solid #FF9326 !important;
	background-color: #FF9326 !important;
}
li.ch06_button03 button span span {
	color: #FF9326 !important;
}
li.ch06_button04 button {
	border: 3px solid #FFFF26 !important;
	background-color: #FFFF26 !important;
}
li.ch06_button04 button span span {
	color: #e0db02 !important;
}
li.ch06_button05 button {
	border: 3px solid #CCC !important;
	background-color: #FFF !important;
}
li.ch06_button05 button span span {
	color: #FFF !important;
	background-color: #CCC !important;
}
li.ch06_button06 button {
	border: 3px solid #00B200 !important;
	background-color: #00B200 !important;
}
li.ch06_button06 button span span {
	color: #00B200 !important;
}
li.ch06_button07 button {
	border: 3px solid #000 !important;
	background-color: #000 !important;
}
li.ch06_button07 button span span {
	color: #000 !important;
}
li.ch06_button08 button {
	border: 3px solid #00B7F0 !important;
	background-color: #00B7F0 !important;
}
li.ch06_button08 button span span {
	color: #00B7F0 !important;
}
li.ch06_button09 button {
	border: 3px solid #FCC0CC !important;
	background-color: #FCC0CC !important;
}
li.ch06_button09 button span span {
	color: #FCC0CC !important;
}
/*main chapter 07-------------*/
section.section07 h2 {
    margin-top: -5px;
    top: 85px;
}
.section07 .chapter07 {
	background-position: 0px -879px;
	top:-35px;
}
section.section07 h3 {
    margin-top: 130px;
    margin-bottom: 10px;
}
main .section07 {
	background-color: #FFFFCE;
	height: 1410px;
	display: block;
}
.section07 h3 {
	text-align: left;
	width: 750px;
	margin-left: auto;
	margin-right: auto;
	line-height: 30px;
}
.section07 .ch07_note01 {
	border: 1px solid #1BBEC6;
	width: 960px;
	padding: 5px;
	text-align: center;
	font-size: 20px;
	color: #1BBEC6;
	background-color: #FFF;
}
.ch07_note02 {
	border: 1px dashed #1BBEC6;
	padding: 20px 0;
	font-weight: 600;
}
span.ch07_icon01, span.ch07_icon02, span.ch07_icon03 {
	width: 65px;
	height: 57px;
	display: inline-block;
}
span.ch07_icon01 {
	background-position: -181px 0px;
}
span.ch07_icon02 {
	background-position: -181px -59px;
}
span.ch07_icon03 {
	background-position: -181px -118px;
}
.section07 article p {
	text-align: left;
}
.section07 article small{
	font-size:18px;
	}
.ch07_area01_L p.ch07_p, .ch07_area01_R02 p.ch07_p {
	font-size: 20px;
	line-height: 25px;
    padding-top: 10px;
}
.ch07_m{
	margin-bottom:64px;
	}
span.ch07_icon {
	border-radius: 50%;
	overflow: hidden;
	background-color: #1CBAC2;
	color: #FFF;
	padding: 13px 10px;
}
.ch07_area01 {
	margin-top: 40px;
	width:960px;
}
.ch07_area01_L {
	float: left;
	width: 460px !important;
	margin-left: 10px;
}
.ch07_area01_R {
	display: block;
	float: left;
	margin-left: 30px;
	margin-top: 20px;
}
.ch07_area01_L02 {
	display: block;
	float:inherit;
	margin-top: 10px;
	width: 483px !important;
	height: 268px;
}
.ch07_area01_R02 {
	float:inherit;
	width: 460px !important;
	margin-left: 500px;
}
.ch07_title01, .ch07_title02, .ch07_title03 {
	vertical-align: super;
	font-size: 35px;
}
.ch07_title01 {
	color: #D90000;
}
.ch07_title02 {
	color: #F97C00;
}
.ch07_title03 {
	color: #FDA828;
}
.section07 div.button05 {
    width: 960px;
}
/*----------footer*/
footer h3{
	text-align: inherit;
	width:100%;
	}
/*----------popUp*/
ol {
    list-style: inherit;
}
article.popUp {
    display: none;
    width: 960px;
    position: fixed;
	padding-bottom:30px;
    top: 50%;
    left: 50%;
    margin-left: -480px;
    margin-top: -295px;
    box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
	background-image:url(/images/project/bluehouse/background-pop.gif);
    background-color: #FFF;
    z-index: 9;
}
.popUp_header {
    height: 100px;
	width:960px;
    background-color: #80E6E5 !important;
    color: #000;
    font-family: "Noto Sans TC", "Microsoft JhengHei UI", "Microsoft JhengHei", "PingFang TC", "HeiTi TC", sans-serif;
    font-size: 25px;
    line-height: 48px;
}
.close_popUp {
    position: absolute;
    display: block;
    width: 50px;
    height: 50px;
    top: 0;
    right: 0;
    background-position: 100px -57px;
    -webkit-transition: all 400ms ease;
    transition: all 400ms ease;
}
.close_popUp:hover{
	background-color:#5EDFDF;
	background-position: 100px -125px;
	}
article.popUp .popUp_note01 {
	width: 60px;
    padding: 5px;
    text-align: center;
    font-size: 20px;
    color: #FFF;
    background-color: #FFF !important;
    margin-top: 14px;
    margin-left: 40px;
	display:inline-block;
	margin-bottom: 15px;
}
.popUp .popUp_note02-01, .popUp .popUp_note02-02, .popUp .popUp_note02-03, .popUp .popUp_note02-04, .popUp .popUp_note02-05, .popUp .popUp_note02-06, .popUp .popUp_note02-07, .popUp .popUp_note02-08, .popUp .popUp_note02-09{
	padding: 6px;
	}
.popUp .popUp_note02-01 {
    background-color: #FF0000 !important;
}
.popUp .popUp_note02-02 {
    background-color: #A84DC4  !important;
}
.popUp .popUp_note02-03 {
    background-color: #FF9326  !important;
}
.popUp .popUp_note02-04 {
    background-color: #FFFF26  !important;
	color:#333;
}
.popUp .popUp_note02-05 {
    background-color: #FFF  !important;
	border:1px solid #333;
	color:#333;
}
.popUp .popUp_note02-06 {
    background-color: #00B200  !important;
	}
.popUp .popUp_note02-07 {
    background-color: #000  !important;
	}
.popUp .popUp_note02-08 {
    background-color: #00B7F0   !important;
	}
.popUp .popUp_note02-09 {
    background-color: #FCC0CC    !important;
	}
.popUp_header p{
	display:inline-block;
	margin-left:20px;
	letter-spacing:3px;
	}
.popUp_header span{
	width: 50px;
    height: 50px;
    background-position: 100px 0px;
	position: absolute;
    right: 70px;
    top: 27px;
	}
article div.popUp_content{
	margin-left: 30px;
    margin-right: 30px;
    width: 900px;
    background-color: #FFF !important;
	display: inline-block;
	}
.popUp_content .popUp_L, .popUp_content .popUp_R{
	float:left;
	}
.popUp_content .popUp_R{
	width: 512px;
    margin-left: 20px;
	margin-bottom:20px;
	}
.popUp_content .popUp_L{
	margin-bottom: 20px;
    margin-top: 10px;
	margin-left: 20px;
	}
.popUp_content .popUp_L p img {
    border: 1px solid #80E6E5;
    padding: 5px;
	margin-bottom:20px;
}
.popUp_content .popUp_L .button06{
	width: 323px;
	}
.popUp_R ol {
    margin-left: 20px;
	margin-top:0;
    
}
.popUp_R p{
font-size: 20px;
    margin: 20px 0 5px 0;
}
.popUp_R ol li{	
display: list-item;
}
.popUp_R ol li, .popUp_R small{	
    width: inherit;
	padding:0;	
	font-size: 16px;
    line-height: 30px;
	 list-style-type:decimal;
}
.popUp_content .popUp_L .button07 {
    width: 258px !important;
}
.popup03_R{
	width: 575px !important;
	}
.pulse:hover{
  -webkit-animation-name: pulse;
  animation-name: pulse;
}	
.ch_FB p{
	margin-top:50px;
	margin-bottom: 50px;
	}
/*FB*/
.subject_contant{ display: block; width:100%; margin: 0 auto; font-size: 12px; color:#000;}
.message{ display: block; width: 100%;  height:auto; padding:30px; box-sizing: border-box;}
.message_box{display: block; width:700px;  margin: 0 auto; padding: 20px 0; background-color: #fff; }
.note{ display:block;  color:#333; text-align:center; font-size:14px; overflow: hidden; line-height: 1.5em; }
.fb_share {
    display: block;
    width: 250px;
    height: auto;
    position: fixed;
    LEFT: 50%;
    top: 25px;
    MARGIN-LEFT: 455px;
}