﻿@charset "utf-8";
/* CSS Document */

/*基本*/
body{ margin:0; padding:0;  }

	@media screen and (max-width:767px){
	body { font-size:14px;}
	}
#edm{line-height:0}
#footer{display:none}
.AreaTitlemo{display:none}

/*隱鑶*/
.for_pc {}
.for_phone { display:none !important;}
	@media screen and (max-width:767px){
		.for_pc { display:none !important;}
		.for_phone { display: inherit !important;}
	}


/*全BOX版面*/
.WRAPPER { position: relative; display:block; margin: 0 auto; padding: 0; width:100%; min-width:1220px; font-family:"微軟正黑體","Microsoft JhengHei",Helvetica; overflow:hidden; }
.WRAPPER img { border:0px; vertical-align:top }
.WRAPPER a { text-decoration:none }
		@media screen and (max-width:767px){
		.WRAPPER {  position:relative; display:inline-block; margin:0; padding:0; width:100%; min-width: inherit }
		.WRAPPER img {  width:100%;  height:auto;}
	}
	
/*背景*/
.bg { z-index:-3; position: absolute; top:0; left:0; width:100%; height:100%; background: url(bg0815.jpg) no-repeat center top #e6dfe1; pointer-events:none;}
.bg_top { z-index:-3; position: absolute; top:0px; left:0; width:100%; height:100%; background: url(bg_top0815.jpg) no-repeat center top ; pointer-events:none; }
@media screen and (max-width:767px){
	.bg { background:none #e6dfe1;}
	.bg_top { background: url(bg_top_m.jpg) no-repeat center top; background-size: 100%; }
	}



/*區塊_all*/
.Area { z-index:1; position: relative; margin:0 auto; padding:0; border-radius:0; text-align:center }
.Area a { position:relative; display:inline-block;} 
.Area1220 { margin:0 auto; width:1220px;}
.Area960 { margin:0 auto; width:960px;}

	@media screen and (max-width:767px){
		.Area1220 { width:100%;}
		.Area960 { margin:0 auto; width:100%;}		
	}


/*Area_top*/
.Area_top { height:674px; }
.Area_top .catch { z-index: 0; position:absolute; left:-390px; top:0px; width:2000px; height: auto;}
.Area_top .catch .title { z-index: 0; position:absolute; left:742px; top:106px; animation-delay:0.5s;}
.Area_top .catch .point1 { z-index: 0; position:absolute; left:1058px; top:104px; animation-delay:0.6s;}
.Area_top .catch .point2 { z-index: 0; position:absolute; left:1034px; top:117px; animation-delay:0.7s;}
.Area_top .catch .point3 { z-index: 0; position:absolute; left:1010px; top:129px; animation-delay:0.8s;}
.Area_top .catch .house { z-index: 0; position:absolute; left:754px; top:264px; animation-delay:0.5s;}
@media screen and (max-width:767px){
	/*Area_top*/
	.Area_top { height: 94vw }
	.Area_top .catch { display:none;}
}

/*Area_mid*/
.Area_mid {z-index: 0; width:424px; margin:46px auto;}
@media screen and (max-width:767px){
	.Area_mid { display:none; width:70%;margin:1vw 15%; }
}



/*關鍵字*/
.HashtagBOX { }
.HashtagArea {position:relative; display:block; margin:0 auto; padding:20px; 0; width:1220px; overflow:hidden; z-index:1;  font-size: 14px; line-height: 20px; font-family:"微軟正黑體","Microsoft JhengHei",Helvetica; text-align:left;}
.HashtagArea dt { float:left; display:inline-block; margin:0; padding:10px; }
.HashtagArea dd { margin-left:100px; }
.HashtagArea dd strong { float:left; display: inline-block; margin:0 10px 10px 0; font-weight: normal;}
.HashtagArea dd a { display:block; padding:8px 10px; border-radius:4px;  background-color:rgba(255,255,255,0.7); box-shadow: 0 0 0 1px rgba(100,100,100,0.2); text-decoration: none;}
.HashtagArea dd a:hover,
.HashtagArea dd a:active { background-color:#fff; box-shadow: 0 0 0 1px rgba(100,100,100,0.2), 0 4px 0 rgba(0,0,0,0.4); transform:translateY(-2px);}
.HashtagArea dd span { color: #000; }
.HashtagArea dd span:before {content: "#";}

@media screen and (max-width: 736px) {
      .HashtagBOX {  position:relative; display:block; margin:0; padding:0; width:100%;  }
      .HashtagArea { position:relative; display:block; margin:0 auto; padding:10px 0 10px; width:94%; max-width:640px; overflow:hidden; z-index:1; font-size: 12px; line-height: 20px; font-family:"微軟正黑體","Microsoft JhengHei",Helvetica; text-align:left;}
      .HashtagArea dt { float:none; margin:0; padding:8px 0; color:#fff; display:block; }
      .HashtagArea dd { margin:0; padding:0; }
      .HashtagArea dd strong { float:left; display: inline-block; margin:0 8px 8px 0; font-weight: normal;}
      .HashtagArea dd a { display:block; padding:6px; border-radius:4px;  background-color:rgba(255,255,255,0.7);  box-shadow: 0 0 0 1px rgba(100,100,100,0.2); text-decoration: none; }
      .HashtagArea dd a:hover,
      .HashtagArea dd a:active { background-color:#fff; box-shadow: 0 0 0 1px rgba(100,100,100,0.2), 0 4px 0 rgba(0,0,0,0.4); transform:translateY(-2px);}
      .HashtagArea dd span { color: #000; }
      .HashtagArea dd span:before {content: "#";}
}


/*hover*/
.hover0 {transition-duration: 0.3s;}
.hover0:hover { 
animation: ease-in-out;
-webkit-transform: scale(1.02);filter:brightness(115%);
-moz-transform: scale(1.02);filter:brightness(115%);
-ms-transform: scale(1.02);filter:brightness(115%);
-o-transform: scale(1.02);filter:brightness(115%);
transform: scale(1.02);filter:brightness(115%);
}

/*hover1*/
.hover1 {transition-duration: 0.3s;}
.hover1:hover { 
animation: ease-in-out;
-webkit-transform: scale(1);filter:brightness(120%);
-moz-transform: scale(1);filter:brightness(120%);
-ms-transform: scale(1);filter:brightness(120%);
-o-transform: scale(1);filter:brightness(120%);
transform: scale(1);filter:brightness(120%);
}

/*hover2*/
.hover2 {transition-duration: 0.3s;}
.hover2:hover { 
animation: ease-in-out;
-webkit-transform: translateY(-5px); scale(1);filter:brightness(115%);
-moz-transform: translateY(-5px); scale(1);filter:brightness(115%);
-ms-transform: translateY(-5px); scale(1);filter:brightness(115%);
-o-transform: translateY(-5px); scale(1);filter:brightness(115%);
transform: translateY(-5px); scale(1);filter:brightness(115%);
}


/*錨點*/
.menu {position: relative; width:1220px; height:auto; left:0; margin:0 auto 20px; text-align: center; overflow:hidden;}
.menu ul { display:inline-block; margin: 0px; padding: 0px; list-style: none outside none;}
.menu ul li a img { animation-delay:0.3s;}
.menu ul li { margin:10px 5px; transition-duration: 0.3s; float:left;}
.menu ul li:hover { 
animation: ease-in-out;
-webkit-transform: scale(0.95);filter:brightness(115%);
-moz-transform: scale(0.95);filter:brightness(115%);
-ms-transform: scale(0.95);filter:brightness(115%);
-o-transform: scale(0.95);filter:brightness(115%);
transform: scale(0.95);filter:brightness(115%);
}
@media screen and (max-width: 736px) {
.menu {width:100%; height:auto; left:0; margin:0 auto 2vw; }
.menu ul { display:inline-block; margin: 0px; padding: 0px; list-style: none outside none; width:84%;}
.menu ul li a img { animation-delay:0.3s;}
.menu ul li { margin:2vw 1.5%; transition-duration: 0.3s; float:left; width:22%;}
}

