/* -- Universal Setting
--------------------------------------------------*/
body {
	font-family:"Raleway","Helvetica Neue",Helvetica,Arial,sans-serif,"Apple LiGothic","微軟正黑體","Microsoft JhengHei";
	font-weight: normal;
	margin: 0;
	padding: 0;
}

h1,h2,h3,h4,h5,h6{
	font-weight: normal;
}

:focus { outline:none !important;}

.clear-both{
	clear: both;
}

.center{
	text-align: center;
}

ul li{
	list-style-type: none;
}

ul{
	margin: 0px; 
	padding: 0px;
}

.center-1024{
	width: 1140px;
	margin: 0px auto;
	overflow: hidden;
}

.content-wrapper .center-1024{
	padding-bottom: 30px;
	padding-top: 30px;
}

.bread{
	margin-bottom: 10px;
	background: #eee;
	color: #1a1a1a;
	font-size: 18px;
	line-height: 3;
}

.bread a{
	color: #1a1a1a;
	text-decoration: none;
}

.bread a:hover{
	color: #ff8800;
}

.bread div{
	width: 1140px;
	margin: 0px auto;
}

.en-feeling{
	font-weight: 200;
	line-height: 1.5;
}

.section-div{
	width: 100%;
	height: 30px;
}


.f-left{ float: left;}
.f-right{ float: right;}

.left-col{
	width: 18%;
	float: left;
}

.right-col{
	width: 74%;
	margin: 0px 0px 0px 8%;
	float: left;
}

.left-col a,
.right-col a{
	color: #ff8a00;
	text-decoration: none;
}

.left-col a:hover,
.right-col a:hover{
	color: #1a1a1a;
}

input, textarea{
	border-radius: 0px !important;
	border: none !important;
	box-shadow: none !important;
	background: #dedede !important;
	width: 100% !important;
	padding: 8px 12px !important;
}

.ajax-hide{
	display: none;
}

.orange-btn{
	width: 120px;
	background: #ff8a00;
	color: #ffffff;
	box-shadow: none !important;
	border: none !important;
	padding: 8px 15px;
	margin: 0px auto;
	text-align: center;
	display: block;
}

.orange-btn:hover{
	color: #ffffff;
	text-decoration: none;
}


/* -- TextColor 
----------------------------------------*/
.light-bg{ background-color: #fffbee;}
.light-orange{ color:#ffd060;}
.orange{ color:#ff8a00;}

.light-g{ color: #999;}

.black{ color:#1a1a1a;}

/* -- FontFace 
----------------------------------------*/
.entypo {
	font-family: 'entypo';
	font-size: 30px;
}



/* -- Layout Header
----------------------------------------*/
.site-loading {
	width: 100%;
	height: auto;
	padding: 20px 0;
	box-sizing: border-box;
	background: #1a1a1a;
	position: absolute;
	top: 110px;
	left: 0;
	text-align: center;
	display: none;
	color: #ffffff;
	font-size: 16px;
}

.site-loading.show {
	display: block;
}

header{
	background: #fff;
	height: 110px;
}

.header-wrapper{
	height: 100px;
}

.header-wrapper .logo-wrapper{ float:left;}
.header-wrapper .navi-wrapper{ 
	float:right;
	font-size: 16px;
	color:#000000;
	padding-top: 45px;
}

.header-wrapper .navi-wrapper ul li{
	float: left;
	margin-right: 35px;
}

.header-wrapper .navi-wrapper ul li:last-child{
	margin-right: 0px;
}

.header-wrapper .navi-wrapper ul li a{
	color:#000000;
	display: block;
	text-decoration: none;
}

.header-wrapper .navi-wrapper ul li a:hover{
	color:#999999;
}

.header-wrapper .navi-wrapper ul li.active a{ 
	color:#ff8800;
}


/* -- Layout Banner
----------------------------------------*/
.banner-wrapper{
	width: 100%;
	height: 480px;
	overflow: hidden;
	background-color: #fff6df;
	background-image: url(../images/slider-bg.jpg);
	background-position: 50% 50%;
}

.banner-wrapper .banner-protrait{
	float: left;
}

.banner-wrapper .banner-name{
	float: right;
	margin-right: 200px;
	margin-top: 160px;
}


/* -- Layout Content
----------------------------------------*/
.content-wrapper{
	width: 100%;
	overflow: hidden;
	margin-bottom: 50px;
}

.content-wrapper.inner{
	margin-bottom: 120px;
}

.content-inner{
	border-top: #eeeeee 3px solid;
}

.content-section{
	padding: 40px 0px;
	width: 100%;
	overflow: hidden;
	clear: both;
}

.content-section:last-child{
	padding-bottom: 100px;
}

.content-section .sec-intro{
	text-align: center;
	width: 360px;
	margin: 0px auto;
}

.sec-intro .category{
	font-weight: 800;
	font-size: 60px;
	line-height: 1.5;
}

.sec-intro .en-feeling{
	font-size: 18px;
}

.project-wrap{
	width: 300px;
	height: 170px;
	margin: 0px 25px;
	display: inline-block;
	vertical-align: top;
	position: relative;
	cursor: pointer;
}

.project-wrap .color-wrap,
.project-wrap .black-wrap{
	position: absolute;
	top: 0px;
	left: 0px;
}

.project-wrap .black-wrap{
	z-index: 1;
}

.project-wrap .color-wrap{
	z-index: 2;
	width: 0px;
	overflow: hidden;
/*transition: width .5s;
-moz-transition: width .5s;
-webkit-transition: width .5s;
-o-transition: width .5s;*/
}

.project-wrap .color-wrap img{
	width: 300px;
	max-width: 300px;
	height: auto;
	max-height: auto;
}

.project-wrap:hover .color-wrap{
	width: 300px;
	/*border-right: #fff 1px solid;*/
transition: width .8s;
-moz-transition: width .8s;
-webkit-transition: width .8s;
-o-transition: width .8s;
}


/* -- Layout Diary
----------------------------------------*/

.content-diary{
	text-align: center;
}

.content-diary .title{
	width: 180px;
	font-size: 18px;
	padding-bottom:8px;
	border-bottom: #000 2px solid;
	margin: 0px auto;
}

.content-diary .diary-title{
	width: 90%;
	margin: 30px auto 0px auto;
	color: #888;
	font-size: 18px;
	line-height: 2;
	letter-spacing: 2px;
	font-family: '標楷體','BiauKai','DFKai-sb';
	display: block;
	cursor: pointer;
}

.diary-title .quote{
	display: inline-block;
	width: 20px;
	height: 20px;
}

.diary-title .quote-l{
	background-image: url(../images/quote-l.png);
}

.diary-title .quote-r{
	background-image: url(../images/quote-r.png);
}


/* -- Footer
----------------------------------------*/
footer{
	margin-top: -48px;
	width: 100%;
	height: 80px;
	background: #1a1a1a;
	text-align: center;
	position: relative;
}

.footer-wrapper{
	position: absolute;
	bottom:0px;
	width: 270px;
	left: 40%;
}

footer.footer-fixed{
	position: absolute;
	bottom:0px;
	left:0px;
}


/* -- Video
----------------------------------------*/
.video .video-wrap{
	width: 640px;
	float: left;
}

.player-wrap {
	width: 640px;
	height: 360px;
	overflow: hidden;
	position: relative;
}

.player{
	position: absolute;
	top: 0px;
	left:0px;
	z-index: 1;
}

.player iframe{
	position: absolute;
	top: 0px;
	left:0px;
	background: #eee;
	z-index: 1;
}

.player .video-not-found{
	position: absolute;
	top: 0px;
	left:0px;
	background: #eee;
	text-align: center;
	width: 640px;
	height: 200px;
	padding-top: 160px;
	z-index: 2;
	font-size: 14px;
	letter-spacing: 1px;
	color: #666666;
	display: none;
}

.video-control{
	width: 100%;
	overflow: hidden;
	margin-top: 10px;
	display: none;
}

.video-control img{
	margin-right:5px;
	cursor: pointer;
	display: none;
}

.video .video-intro{
	float: right;
	width: 360px;
	height: 100px;
}

.video .video-intro hr{
	border: none;
	border-bottom: #ddd 1px solid;
}

.video-info{
	color: #888;
	font-size: 13px;
}

.video-info ul {
	margin: 20px 0 10px 20px;
}

.video-info ul li{
	margin-bottom: 4px;
	list-style-type: disc;
}

.video-info ul li a{
	color: #1a1a1a;
}


/*
.video-info table{
	width: 100%;
}

.video-info table tr td{
	padding: 3px 5px 3px 8px;
}

.video-info table tr:nth-child(odd){
	background: #eee;
}*/

/* -- Resume
----------------------------------------*/
.resume .photo-wrapper{
	/*width: 25%;*/
	/*float: left;*/
}

.resume-wrapper{
	line-height: 1.8;
	/*width: 70%;
	float: right;*/
}

.resume-wrapper .year{
	/*padding-right: 20px;*/
	/*text-align: right;*/
}

.resume-wrapper table tr td{
	padding: 0px 30px 0px 0px;
}

/* -- Profolio
----------------------------------------*/
.type-wrapper{
	width: 100%;
	overflow: hidden;
}

.type-name-wrapper{
	text-align: left;
	width: 260px;
	overflow: hidden;
	float: left;
	font-size: 16px;
}

.type-title{
	color:#ffd060;
	font-weight: 800;
	font-size: 40px;
	line-height: 1.2;
}

.type-videos{
	width: 840px;
	float: right;
	overflow: hidden;
}

.portfolio .project-wrap{
	width: 240px;
	height: 180px;
	margin: 0px 0px 30px 30px;
	overflow: hidden;
}

.portfolio .project-wrap .color-wrap img{
	width: 240px;
	max-width: 240px;
	height: auto;
	max-height: auto;
}

.portfolio .project-wrap:hover .color-wrap{
	width: 240px;
}

 .project-wrap .caption-wrap{
 	width: 100%;
 	height: 38px;
 	overflow: hidden;
 	color: #1a1a1a;
 	line-height: 1.4;
 	text-align: left;
 	position: absolute;
 	bottom: 0px;
 	left:0px;
 }


/* -- Diary
----------------------------------------*/
.diary .content-diary-inner{
	text-align: left;
	margin-bottom: 30px;
	clear: both;
	overflow: hidden;
}

.diary .content-diary-inner .title{
	/*width: 16%;
	float: left;*/
	padding: 0px;
	border-bottom: none;
	font-size: 16px;
	/*border-top: #eeeeee 2px solid;
	padding-top: 8px;*/
}

.diary .content-diary-inner a{
	display: block;
}

.diary .content-diary-inner a:hover{
	text-decoration: underline !important;
}

.diary .content-diary-inner .diary-date{
	width: 12%;
	padding: 8px 0px;
}

.diary .content-diary-inner .diary-title,
.diary .content-diary-inner .diary-content{
	width: 82%;
	margin: 0px 0px 0px 2%;
	/*float: left;*/
	padding: 4px 2%;
	color: #666666;
	font-size: 14px;
	line-height: 31px;
	letter-spacing: 1px;
	font-family: inherit;
	background-image: url(../images/diary-content-bg.png);
	background-color: #f9f9f9;
	background-position: 0px 4px;
	border-radius: 3px;
}

#add-diary{
	width: 120px;
	background: #ff8a00;
	color: #ffffff;
	box-shadow: none !important;
	border: none !important;
	padding: 8px 0px;
	margin: 0px;
}

/* -- Contact
----------------------------------------*/
.contact .left-col{
	line-height: 1.5;
	color: #666666;
}

.contact .right-col table tr{
	vertical-align: top;
}

.contact #add-message{
	width: 120px;
	background: #ff8a00;
	color: #ffffff;
	box-shadow: none !important;
	border: none !important;
	padding: 8px 0px;
	float: right;
	margin: 0px;
}

.contact #guestbook tr td{
	padding: 10px 8px;
}

.contact #guestbook tr:nth-child(odd){
	background: #eee;
}