@charset "utf-8";
@import url("reset.css");

body {
	font-family:微軟正黑體, Arial, Helvetica, sans-serif;
	background:url(img/bbg.png) center top;
	font-weight:bold;
}
#gotop{
	width:41px;
	height:41px;
	background:url(img/gotop.png);
	text-indent:-9999px;
    display: none;
    position: fixed;
    right: 20px;
    bottom: 20px;       
}
#gotop:hover{
	background-position:bottom;
	}
.CLEAR{ clear:both; height:0; font-size:1; line-height:0px;}

/*-----------------版頭開始---------------------*/
#wrapper{
	width:890px;
	margin:0 auto;
	background:#ffffff;
	}
#header{
	height:600px;
	position:relative;
	background:url(img/index-headerbg.jpg) no-repeat center bottom;
	z-index:500;
	}
#logo{
	width:236px;
	height:165dx;
	position:absolute;
	left:327px;
	top:35px;
	}
#intro{
	position:absolute;
	width:380px;
	height:200px;
	left:485px;
	top:440px;
	}
#blog{
	width:44px;
	height:16px;
	position:absolute;
	right:10px;
	top:70px;
	background:url(img/blog.gif);
	}
#blog:hover{
	background-position:bottom;
	}
#linewrap{
	width:16px;
	height:330px;
	bottom:-90px;
	position:absolute;
	left:437px;
	top:365px;
	overflow:hidden;
	z-index: 9999;
	}
#line{
	background:url(img/line.png) center top repeat-y;
	width:16px;
	height:16px;
	position:absolute;
	padding-top:314px;
	left:0;
	top:-330px;
	z-index:9999;
	}
	
/*-----------------版尾開始---------------------*/
#footer{
	height:40px;
	position:relative;
	}
#footer a{
	display:block;
	position:absolute;
	width:86px;
	height:21px;
	right:10px;
	top:10px;}
#footer span{
	display:block;
	position:absolute;
	background:url(img/copyright.gif);
	width:491px;
	height:13px;
	right:100px;
	top:15px;
	text-align:right;
	font-weight:normal;}
/*-----------------主選單開始---------------------*/
#menu{
	display:block;
	width:114px;
	position:absolute;
	left:179px;
	top:385px;
	}
#menu li{
	display:block;
	width:114px;
	margin:15px 0;
	}
#menu li a{
	display:block;
	width:114px;
	height:20px;
	text-indent:-9999px;
	}
#menu #m1 a{background:url(img/menu-b1.png);}
#menu #m2 a{background:url(img/menu-b2.png);}
#menu #m3 a{background:url(img/menu-b3.png);}
#menu #m4 a{background:url(img/menu-b4.png);}

#menu #m1 a:hover,#menu #m2 a:hover,#menu #m3 a:hover,#menu #m4 a:hover{background-position:bottom;}

/*-----------------主內容開始---------------------*/
#main{
	background:url(img/mainbg.jpg) no-repeat left top;
	padding:85px 80px 50px 80px;
	position:relative;
	z-index:5;
}
#index_left{
	width:185px;
	float:left;
	margin-left:25px;
	padding-top:85px;}
#index_left img{
	margin-bottom:40px;}
#index_right{
	width:435px;
	float:right;
	margin-right:25px;
	}
#index_right p{
	text-align:center;}
#banner{
	width:435px;
	height:300px;
	overflow:hidden;
	position: relative;
	margin-bottom:20px;
	z-index:3;
	}
#banner li{/* 讓圖片疊在一起 */
	position: absolute;
	left:0;
	top:0;
	z-index:-1;
}
.indext{
	display:block;
	padding:0 0 10px 0;}

/*-----------------頁籤效果開始---------------------*/

.coda-slider-wrapper { padding: 20px 0; }
.coda-slider-no-js .coda-slider { height: 200px; overflow: auto !important; padding-right: 20px }
	
/* Change the width of the entire slider (without dynamic arrows) */
.coda-slider, .coda-slider .panel { width: 730px;  } 
/* Tab nav */
.coda-nav ul li a.current { background-position:bottom;}
/* Panel padding */
.coda-slider .panel-wrapper { padding: 20px; }
/* Preloader */
.coda-slider p.loading { padding: 20px; text-align: center }
/* Tabbed nav */
.coda-nav ul{ padding:0 0 0 115px}
.coda-nav ul li{ float:left;}
.coda-nav ul li a {display: block; width:100px; height:70px; border-right:#F3E7E0 solid 1px;}
.coda-nav ul li.tab5 a{ border-right:none;}
.coda-nav ul li.tabp1 a ,.coda-nav ul li.tabp2 a{ width:140px;}
.coda-nav ul li.tabp4 a{ width:125px; border-right:none;}
/* Miscellaneous */
.coda-slider-wrapper { clear: both; overflow: auto }
.coda-slider { float: left; overflow: hidden; position: relative }
.coda-slider .panel { display: block; float: left }
.coda-slider .panel-container { position: relative }

/*-----------------汝心思開始---------------------*/
#charge{
	display:block;
	background:url(img/about-p1.gif);
	width:117px;
	height:25px;
	text-indent:-9999px;
	margin-top:20px;
	}
#charge:hover{
	background-position:bottom;}
#mask{
	width:100%;
	background:url(img/maskbg.png);
	position:absolute;
	z-index:9999;
	visibility:hidden;
	left:0;
	top:0
	}
#charge_con{
	width:500px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-250px;
	background: #FFF;
	text-align:center;
	padding:8px;}
#close{
	width:13px;
	height:15px;
	background:url(img/close.png);
	position:absolute;
	right:15px;
	top:15px;
	cursor:pointer;}
#charge_con img{
	border:#F3E7E0 1px solid;
	}
.img_pb{
	padding-bottom:15px;}
	
/*-----------------心思相通開始---------------------*/
.rbg{
	width:271px;
	height:641px;
	position:absolute;
	top:140px;
	right:28px;
}
#dialog_box{
	display:block;
	width:495px;
	padding-left:15px;
	}
#dialog_box li{
	display:block; 
	width:438px;
	margin-bottom:10px;
	position:relative;
	padding-top:15px;
}
#dialog_box p{
	padding:0 20px 40px 95px;
	min-height:40px;
	}

.date{
	width:53px;
	height:46px;
	text-align:center;
	font-size:17px;
	line-height:20px;
	padding:7px 0 0 2px;
	position:absolute;
	left:25px;
	top:21px;
	font-weight:normal;
	letter-spacing:1px;
	font-family: 'Rokkitt',sans-serif; }
.name{
	display:block;
	font-size:15px;
	font-weight:normal;
	padding-left:95px;}
	
.even{background: url(img/reflection-p1.jpg) no-repeat #FBF4EA;}
.even p{ background:url(img/reflection-p2.jpg) no-repeat left bottom;}
.even .name{ color:#c38e6f;}
.even .date{
	color:#c38e6f;
	border:#D9B7A0 1px solid;}
	
.odd{background: url(img/reflection-p3.jpg) no-repeat #E8F3EF; margin-left:42px;}
.odd p{ background:url(img/reflection-p4.jpg) no-repeat left bottom;}
.odd .name{ color:#6a9b8b;}
.odd .date{
	color:#6a9b8b;
	border:#99BBB0 1px solid;
	}
#page{
	margin-left:15px;
	width:495px;
	text-align:center;
	font-family: 'Rokkitt',sans-serif;
	font-size:15px;
	font-weight: normal;}
#page a{
	text-decoration:none;
	color:#3E3A39;
}
#page a:hover{
	text-decoration:none;
	color:#CA8961;
}
#notice_menu{
	display:block;
	width:610px;
	height:45px;
	margin:0 0 15px 7px;
	background-color:#F7F7F7;
	padding-left:65px;}
#notice_menu li{
	display:block;
	width:134px;
	height:45px;
	float:left;
	margin-right:69px;}
#notice_menu li a{
	display:block;
	width:134px;
	height:45px;
	text-indent:-9999px;
	}
#notice_menu li a.n1{background:url(img/professional-p8.gif);}
#notice_menu li a.n2{background:url(img/professional-p9.gif);}
#notice_menu li a.n3{background:url(img/professional-p10.gif);}
#notice_menu li a:hover{
	background-position:bottom;}
#noticeshow{
	width:682px;
	height:600px;
	overflow:hidden;
	position:relative;}
#noticeall{
	position:absolute;
	width:682px;
	height:1800px;
	left:0;
	top:0;
	}
#notice1,#notice2,#notice3{
	display:block;
	padding-left:7px;
	clear:both;
}
#notice1 li,#notice2 li,#notice3 li{
	float:left;
	display:block;
	width:225px;
	height:200px;
}
#notice1 li span,#notice2 li span{
	display:block;
	width:187px;
	height:140px;
	padding:60px 18px 0 20px;
	}
#notice3 li span{
	display:block;
	width:187px;
	height:170px;
	padding:30px 18px 0 20px;
	}
.odd_notice1{ background:url(img/professional-p2.jpg);}
.even_notice1{ background:url(img/professional-p1.jpg);}
.odd_notice2{ background:url(img/professional-p12.jpg);}
.even_notice2{ background:url(img/professional-p11.jpg);}
.odd_notice3{ background:url(img/professional-p14.jpg);}
.even_notice3{ background:url(img/professional-p13.jpg);}

#case{
	display:block;
	padding-left:7px;
	background:url(img/professional-p5.gif) repeat-y 185px 45px;
}
#case li{
	display:block;
	width:165px;
	height:215px;
	float:left;
	margin:35px 30px;
	}
#case img{
	width:110px;
	height:75px;
	padding:0 0 15px 27px;}
#case a{
	letter-spacing:1px;
	line-height:23px;
	color:#6F6562;
	}
#case a:hover{
	text-decoration:none;}
.cdate{
	font-family: 'Rokkitt',sans-serif;
	font-size:14px;
	text-align:right;
	letter-spacing:2px;
	font-weight:normal;
	padding-right:27px;
	color:#6F6562;
	}
.ctitle{
	font-family: 'Rokkitt-Light',sans-serif;
	letter-spacing:2px;
	font-size:48px;
	font-weight:normal;
	color:#6F6562;
	padding:6px 0 0 72px;
	margin:0 0 5px 27px;
	background:url(img/professional-p6.gif) no-repeat left bottom;
	}
#pagec{
	width:690px;
	text-align:center;
	font-family: 'Rokkitt',sans-serif;
	font-size:15px;
	font-weight: normal;}
#pagec a{
	text-decoration:none;
	color:#3E3A39;
}
#pagec a:hover{
	text-decoration:none;
	color:#CA8961;
}
#caseleft{
	width:505px;
	float:left;
	margin-left:20px;}
.caseimg{
	padding:4px;
	margin:15px 15px 15px 0;
	border:#CCC 1px solid;
}
#caseright{
	width:150px;
	height:139px;
	float:right;
	margin-right:20px;
	padding:4px 4px 0 4px;
	background:url(img/professional-p7.gif) no-repeat;}
#caseright p{
	text-align:center;
	padding:7px 0;
	letter-spacing:2px;
	}
#casef{
	width:505px;
	text-align:center;
	margin:15px 0 0 20px;
	font-family: 'Rokkitt',sans-serif;
	font-size:15px;
	font-weight: normal;
	padding-top:15px;
	border-top:1px dashed #AEA6A4;
	}
#casef a{
	text-decoration:none;
	color:#3E3A39;
}
#casef a:hover{
	text-decoration:none;
	color:#CA8961;
}
#cintitle{
	font-family: 'Rokkitt-Light',sans-serif;
	letter-spacing:2px;
	font-size:48px;
	font-weight:normal;
	color:#6F6562;
	padding:0 0 0 72px;
	margin:0 0 5px 0;
	background:url(img/professional-p6.gif) no-repeat left bottom;
	}
#cindate{
	display:block;
	width:505px;
	font-family: 'Rokkitt',sans-serif;
	font-size:15px;
	text-align:right;
	letter-spacing:2px;
	font-weight:normal;
	color:#6F6562;
	padding-bottom:10px;
	margin-bottom:10px;
	border-bottom:1px dashed #AEA6A4;
	}

	
/*-----------------美美學開始---------------------*/
#certificate{
	display:block;
	height:527px;
	padding-top:160px;
	background:url(img/professional-p15.jpg) no-repeat 40px top;}
#certificate li{
	display:block;
	padding:6px 0;
	text-align:center;}
#environment{
	width:690px;
	height:580px;
	background:url(img/professional-p16.jpg) no-repeat;
	position:relative;
	margin-bottom:90px;
	}
#realshow{
	position:absolute;
	width:221px;
	height:221px;
	left:-19px;
	bottom:-72px;
	z-index:9000;
	background:url(img/professional-p17.jpg) left top;
}
#realname{
	position:absolute;
	width:480px;
	height:220px;
	right:0;
	bottom:-209px;
	z-index:9999;
	}
.o1,.o2,.o3,.o4,.o5{
	position:absolute;
	background:#FFF;
	cursor:pointer;
	text-indent:-9999px;}
.o1{
	width:115px;
	height:106px;
	background:url(img/professional-p19.jpg);
	left: 259px;
	top: 123px;
	}
.o2{
	width:366px;
	height:200px;
	background:url(img/professional-p21.jpg);
	left: 172px;
	top: 322px;
	z-index:300;
	}
.o3{
	width:159px;
	height:150px;
	background:url(img/professional-p20.png);
	left: 258px;
	top: 403px;
	z-index:500;
	}
.o4{
	width:119px;
	height:248px;
	background:url(img/professional-p18.jpg);
	left: 25px;
	top: 113px;
	}
.o5{
	width:78px;
	height:150px;
	background:url(img/professional-p21.png);
	left: 49px;
	top: 267px;
	}
.nameall{ display:none;}
/*-----------------Keep in touch開始---------------------*/
.ad{
	font-family: 'Rokkitt-Light',sans-serif;
	line-height:23px;
	font-size:14px;
	padding-left:5px;
	color:#725954;
	letter-spacing:1px;
	}
	
/*-----------------字型開始---------------------*/
/* Designed by Vernon Adams */
/* FontFace Generated by FontPro */

@font-face {
  font-family: 'Rokkitt';
  src: url('Rokkitt-Regular.eot');
  src: url('Rokkitt-Regular.eot?#iefix') format('embedded-opentype'),
       url('Rokkitt-Regular.woff') format('woff'),
       url('Rokkitt-Regular.ttf') format('truetype'),
       url('Rokkitt-Regular.svg#Rokkitt') format('svg');
}
@font-face {
  font-family: 'Rokkitt-Light';
  src: url('Rokkitt-Light.eot');
  src: url('Rokkitt-Light.eot?#iefix') format('embedded-opentype'),
       url('Rokkitt-Light.woff') format('woff'),
       url('Rokkitt-Light.ttf') format('truetype'),
       url('Rokkitt-Light.svg#Rokkitt-Light') format('svg');
}

.space1{ letter-spacing:1px;}
.h25{ line-height:25px;}
.word11{ font-size:11px;}
.word13{ font-size:13px;}

.color1{ color:#999999;}
.color2{ color:#4F3F39;}
.color3{ color:#CA8961;}
.color4{ color:#6F6763;}
.color5{ color:#666666;}
.color6{ color:#7D635E;}

.h1 {color:#888888; text-decoration:none;}
.h1:hover {color:#EAC03C;}
.h2 {color:#725954; text-decoration:none;}
.h2:hover {color:#53423E; text-decoration:underline}