p, div, html, body, img, h1, h2, ul, li, h3, h4, dl, dt, dd, ol, input{margin:0; padding:0; font-family:Microsoft JhengHei;}
body { overflow-y:scroll;}
img{border:0;}
ol, ul { list-style: none; }

#all_wrapper{ width:100%; min-width:1000px; }
#topbtn{width:770px; margin: 0 auto; padding: 35px 0 0 0px;}
#topbtn_in{ float:left; width:256px; height:68px; }
#all_container{ position: relative; width:1000px;  margin: 0 auto; z-index:800;}
.container_profile{ height:1100px;}
.container_photo{ min-height:1000px;}

/* --- PROFILE --- */
.bg_profile {background:url("../images/02_bg.jpg") center top repeat;}
.bg_profilein{ background:url("../images/02_bg02.gif") center top repeat;}
#bgtop_profile{ width:100%; height:152px; background:url("../images/02_bgtop.gif") center top no-repeat;}
#bgfooter_profile { width:100%; height:584px; background:url("../images/02_footer.gif") center top no-repeat; }

#profile_ob01 { position: absolute; top :10px; left:118px; width:770px; height:1068px; background:url("../images/02_ob01.gif") center top no-repeat; z-index:500;}
#profile_ob01s { position: absolute; top :10px; left:118px; width:770px; height:1068px; background:url("../images/02_ob01s.png") center top no-repeat; z-index:300;}
#profile_ob02 { position: absolute; top :54px; left:813px; width:70px;  z-index:600;}
#profile_ob02 img { margin: 5px 0 0 0}
#profile_ob03 { position:absolute; top:566px; left:440px; width:290px; height:190px; z-index:600; }
#profile_ob03_title { float:left; width:290px; margin: 0 0 10px 0;}
#profile_ob03_main { float:left; width:290px; margin: 7px 0;}
#profile_ob03_type { float:left; width:80px;}
#profile_ob03_bar { float:right; width:210px;}
.profile_ob03_font_title{font: bold 16px Arial, Helvetica, sans-serif; color: #452009;}
.profile_ob03_font_main{font: bold 13px Arial, Helvetica, sans-serif; color: #452009; margin: 1px 0 0 0;}
#profile_ob04 { position:absolute; top:768px; left:442px; width:368px; height:280px; z-index:600; }
#profile_ob05 { position:absolute; top:447px; left:493px; width:380px; height:36px; z-index:650; }
#profile_ob05_facebook {float:left; margin: 9px 0 0 25px; width:90px; z-index:700;}
#profile_ob05_google {float:left; margin: 6px 0 0 30px; width:90px; z-index:700;}
#profile_ob05_renren {float:left; margin: 7px 0 0 20px; width:120px; z-index:700;}
#profile_ob06 { position:absolute; top:1090px; left:240px; width:161px; height:456px; z-index:600; }
#profile_ob07 { position:absolute; top:30px; left:166px; width:607px; height:319px; z-index:490; }
#profile_ob08 { position: absolute; top :865px; left:160px; width:620px ; z-index:650;}
.profile_ob08_in01 { float:left; width:295px; margin: 0 10px 0 0;}
.profile_ob08_in02 { float:left; width:291px; margin: 0 0 10px 0;}
.profile_ob08_in03 { float:left; width:285px; margin: 0 0 0 10px;}
.profile_ob08_in03 img { float:left; margin: 0 0 5px 0;}

/* --responsiveSlides--*/
.rslides { position: relative; list-style: none;  overflow: hidden;  width: 100%;  padding: 0;  margin: 0;}
.rslides li {  -webkit-backface-visibility: hidden;  position: absolute; display: none;  width: 100%;  left: 0;  top: 0; }
.rslides li:first-child {  position: relative;  display: block;  float: left;}
.rslides img {  display: block;  height: auto;  float: left;  width: 100%;  border: 0; }

/* -- legend --*/
#diagram { position:absolute; top:375px; left:96px; z-index: 600; width:300px; height:300px; opacity:0.6;}
.legend {float:left;width:250px;}
.skills {float:left;clear:both;width:100%;}
.skills ul,.skills li {display:block;list-style:none;margin:0;padding:0;}
.skills li {float:right;clear:both;padding:0 15px;height:35px;line-height:35px;color:#fff;margin-bottom:1px;font-size:18px;}
.skills .jq {background:#97BE0D; }
.skills .css {background:#D84F5F;}
.skills .html {background:#88B8E6;}
.skills .php {background:#BEDBE9;}
.skills .sql {background:#EDEBEE;}
.get {display:none;}

/* ---PHOTO--- */
.bg_photo{ background:url("../images/03_bg01.jpg") center top repeat; min-width:1000px;}
.bg_photoin{ background:url("../images/03_bg02.gif") center top repeat;}
#bgtop_photo{ width:100%; height:255px; background:url("../images/03_topbar.gif") center top no-repeat;}
#bgfooter_photo { position:relative;  width:100%; height:532px; z-index:100;}
#bgfooter_photo_p { position: absolute;  width:100%; height:532px; top:0; background:url("../images/03_footer.gif") center bottom no-repeat; z-index:100;}

/*--Stapel--*/
.container { position: relative; width:780px; left:25px; margin: 15px 0 0 0;}
.clr {clear: both;padding: 0;height: 0;margin: 0;}
.container > header,.main {	width: 780px; margin: 0 auto; padding: 0;}
.container > header {padding: 30px 25px 50px 25px;}
/* -tp-*/
.tp-grid {list-style-type: none; position: relative; display: block; left:-1px;}
.tp-grid li {position: absolute;cursor: pointer; border: 5px solid #fff; box-shadow: 0 2px 3px rgba(0,0,0,0.2); display: none;	overflow: hidden;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden;	backface-visibility: hidden;}
.no-js .tp-grid li {position: relative;	display: inline-block;}
.tp-grid li a {	display: block;	outline: none;}
.tp-grid li img {display: block;border: none;}
.tp-info,.tp-title { position: absolute; background: #fff; line-height: 20px; color: #333; top: 40%; width: 75%; padding: 10px; font-weight: 700; text-align: right; left: -100%; box-shadow: 1px 1px 1px rgba(0,0,0,0.1),5px 0 5px -3px rgba(0,0,0,0.4),inset 0 0 5px rgba(0,0,0,0.04);}
.touch .tp-info {left: 0px;}
.no-touch .tp-info {-webkit-transition: all 0.3s ease-in-out;	-moz-transition: all 0.3s ease-in-out;	-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.no-touch .tp-grid li:hover .tp-info {-webkit-transition-delay: 150ms;-moz-transition-delay: 150ms;	-o-transition-delay: 150ms;	-ms-transition-delay: 150ms;	transition-delay: 150ms;}
.no-touch .tp-open li:hover .tp-info {left: 0px;}
.tp-title {	padding: 10px 40px 10px 0;left: 0px;}
.tp-title span:nth-child(2){color: #aaa;padding: 0 5px;	background: #F7F7F7;right: 0px;	height: 100%;	line-height: 40px;	top: 0px;	position: absolute;	display: block;}
/* -Custom elements style- */
.wrapper {position: relative;padding: 0 0 50px 0;}
.topbar {position: relative; height:46px;  padding: 0 0;margin: 0 0 20px 0; background:url("../images/03_topbar.png") center top no-repeat;}
.topbar h2{	display: inline-block; font-weight: 500; width: 70%; font:18px Arial, Helvetica, sans-serif;  color: #333; padding:11px 0 0 24px;}
.back {	width: 757px;height: 46px;position: absolute;left: 0; top: 0; padding: 13px 0 0 0; text-align: right;	cursor: pointer;display: none;	-webkit-touch-callout: none; -webkit-user-select: none;	-khtml-user-select: none; -moz-user-select: none;	-ms-user-select: none;	user-select: none; font:14px Arial, Helvetica, sans-serif;  color: #777;}
.no-touch .back:hover {color: #333;	}
/* -Loader- */
.loader {left: 50%;	position: absolute;	margin-left: -120px;}
.loader i {	display: inline-block;	width: 40px;	height: 40px;	-webkit-animation: loading 1s linear infinite forwards;	-moz-animation: loading 1s linear infinite forwards;	-o-animation: loading 1s linear infinite forwards;	-ms-animation: loading 1s linear infinite forwards;	animation: loading 1s linear infinite forwards;}
.cssanimations .loader span {display: none;}
.no-cssanimations .loader i {display: none;}
.loader i:nth-child(2){	-webkit-animation-delay: 0.1s;	-moz-animation-delay: 0.1s;	-o-animation-delay: 0.1s;	-ms-animation-delay: 0.1s;	animation-delay: 0.1s;}
.loader i:nth-child(3){	-webkit-animation-delay: 0.2s;	-moz-animation-delay: 0.2s;	-o-animation-delay: 0.2s;	-ms-animation-delay: 0.2s;	animation-delay: 0.2s;}
.loader i:nth-child(4){	-webkit-animation-delay: 0.3s;	-moz-animation-delay: 0.3s;	-o-animation-delay: 0.3s;	-ms-animation-delay: 0.3s;	animation-delay: 0.3s;}
.loader i:nth-child(5){	-webkit-animation-delay: 0.4s;	-moz-animation-delay: 0.4s;	-o-animation-delay: 0.4s;	-ms-animation-delay: 0.4s;	animation-delay: 0.4s;}
.loader i:nth-child(6){	-webkit-animation-delay: 0.5s;	-moz-animation-delay: 0.5s;	-o-animation-delay: 0.5s;	-ms-animation-delay: 0.5s;	animation-delay: 0.5s;}
@-webkit-keyframes loading{
0%{	opacity: 0;	background-color: rgba(255,255,255,0.9);}
100%{opacity: 1;-webkit-transform: scale(0.25) rotate(75deg);background-color: rgba(155,155,155,0.9);}
}
@-moz-keyframes loading{
0%{	opacity: 0;	background-color: rgba(255,255,255,0.9);}
100%{opacity: 1;-moz-transform: scale(0.25) rotate(75deg);	background-color: rgba(155,155,155,0.9);}
}
@-o-keyframes loading{
0%{opacity: 0;background-color: rgba(255,255,255,0.9);}
100%{opacity: 1;-o-transform: scale(0.25) rotate(75deg);background-color: rgba(155,155,155,0.9);}
}
@-ms-keyframes loading{
0%{opacity: 0;background-color: rgba(255,255,255,0.9);}
100%{opacity: 1;-ms-transform: scale(0.25) rotate(75deg);background-color: rgba(155,155,155,0.9);}
}
@keyframes loading{
0%{	opacity: 0;	background-color: rgba(255,255,255,0.9);}
100%{opacity: 1;transform: scale(0.25) rotate(75deg);background-color: rgba(155,155,155,0.9);}
}
@media screen and (max-width: 680px){
.topbar h2, .topbar h3 { text-align: left; padding: 0; display: block;}
.back { left: auto; right: 0px; margin-left: 0px;}
}

/* --- DESIGN --- */
.bg_design {background:url("../images/04_bg01.jpg") center top repeat; padding: 0 0 80px 0; min-width:1000px;}
.bg_designin{ background:url("../images/04_bg02.gif") center top repeat;}
#bgtop_design{ position:relative; width:100%; height:152px; background:url("../images/04_bgtop.gif") center top no-repeat; z-index:800;}
#bgfooter_design { position:relative;  width:100%; height:302px; z-index:100;}
#bgfooter_design_p { position: absolute;  width:100%; height:402px; top:0px; background:url("../images/04_footer.gif") center bottom no-repeat; z-index:100;}

#design_ob01 { position:relative; width:760px; height:139px; background:url("../images/04_ob01.gif") center top no-repeat; margin: 00px 0 0 120px; z-index:200;}
#design_ob02 { position:relative; width:760px; height:41px; background:url("../images/04_ob02.gif") center top no-repeat; margin: 00px 0 0 120px; z-index:200;}
#design_ob03 { position:relative;width:760px; background:url("../images/04_ob03.gif") center top repeat-y; margin: 0 0 0 120px; z-index:200;}
.design_ob03_web { height:1320px;}
.design_ob03_ecard { height:370px;}
.design_ob03_graphic { height:1000px;}
#design_ob03_in { float:left; margin:15px 0 0 35px;}
#design_ob04 { width:760px; height:41px; background:url("../images/04_ob04.gif") center top no-repeat; margin: 0 0 0 120px;z-index:200;}
#design_ob05 { width:760px; height:41px; background:url("../images/04_ob05.gif") center top no-repeat; margin: 0 0 0 120px;z-index:200;}
#design_ob06 { width:760px; height:144px; background:url("../images/04_ob06.gif") center top no-repeat; margin: 0 0 0 120px;z-index:200;}

#design_box { float:left; width:350px; margin: 10px 0 0 0;}
#design_box_pic { float:left; width:350px; margin: 0 0 5px 0;}
#design_box_type {float:left; width:350px; height:42px; text-align:center; }
#design_box_type h3 {font: 14px/20px Arial, Helvetica, sans-serif; color: #333; }


/* --fancybox-- */
.fancybox-custom .fancybox-skin {box-shadow: 0 0 50px #222;}

/*! fancyBox v2.1.4 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,.fancybox-skin,.fancybox-outer,.fancybox-inner,.fancybox-image,.fancybox-wrap iframe,.fancybox-wrap object,.fancybox-nav,.fancybox-nav span,.fancybox-tmp{padding: 0; margin: 0;	border: 0; outline: none; vertical-align: top;}
.fancybox-wrap {position: absolute;	top: 0;	left: 0; z-index: 8020;}
.fancybox-skin {position: relative; background: #f9f9f9; color: #444; text-shadow: none;-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
.fancybox-opened {z-index: 8030;}
.fancybox-opened .fancybox-skin {-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);   -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);}
.fancybox-outer, .fancybox-inner {position: relative;}
.fancybox-inner {overflow: hidden;}
.fancybox-type-iframe .fancybox-inner {	-webkit-overflow-scrolling: touch;}
.fancybox-error {color: #444; font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;	margin: 0;	padding: 15px;	white-space: nowrap;}
.fancybox-image, .fancybox-iframe {	display: block;	width: 100%;height: 100%;}
.fancybox-image {max-width: 100%;	max-height: 100%;}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url('../images/fancybox_sprite.png');}
#fancybox-loading {	position: fixed;top: 50%; left: 50%; margin-top: -22px;	margin-left: -22px;	background-position: 0 -108px;	opacity: 0.8; cursor: pointer; z-index: 8060;}
#fancybox-loading div {	width: 44px; height: 44px;	background: url('../images/fancybox_loading.gif') center center no-repeat;}
.fancybox-close { position: absolute; top: -18px; right: -18px;	width: 36px; height: 36px; cursor: pointer;	z-index: 8040;}
.fancybox-nav {	position: absolute;	top: 0;	width: 40%;	height: 100%;	cursor: pointer; text-decoration: none;	background: transparent url('../images/blank.gif'); /* helps IE */	-webkit-tap-highlight-color: rgba(0,0,0,0);	z-index: 8040;}
.fancybox-prev {left: 0;}
.fancybox-next {right: 0;}
.fancybox-nav span {position: absolute;	top: 50%;width: 36px; height: 34px;	margin-top: -18px;	cursor: pointer;z-index: 8040; visibility: hidden;}
.fancybox-prev span {left: 10px; background-position: 0 -36px;}
.fancybox-next span { right: 10px;	background-position: 0 -72px;}
.fancybox-nav:hover span { visibility: visible;}
.fancybox-tmp {	position: absolute;	top: -99999px;	left: -99999px;	visibility: hidden;	max-width: 99999px;	max-height: 99999px;	overflow: visible !important;}
/* Overlay helper */
.fancybox-lock { overflow: hidden;}
.fancybox-overlay {	position: absolute;	top: 0;	left: 0; overflow: hidden;	display: none; z-index: 8010; background: url('../images/fancybox_overlay.png');}
.fancybox-overlay-fixed { position: fixed; bottom: 0; right: 0;}
.fancybox-lock .fancybox-overlay { overflow: auto; overflow-y: scroll;}
/* Title helper */
.fancybox-title { visibility: hidden; font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; position: relative; text-shadow: none; z-index: 8050;}
.fancybox-opened .fancybox-title { visibility: visible;}
.fancybox-title-float-wrap { position: absolute; bottom: 0;	right: 50%;	margin-bottom: -35px; z-index: 8050; text-align: center;}
.fancybox-title-float-wrap .child {	display: inline-block;	margin-right: -100%;padding: 2px 20px;background: transparent; background: rgba(0, 0, 0, 0.8);	-webkit-border-radius: 15px;  -moz-border-radius: 15px; border-radius: 15px;	text-shadow: 0 1px 2px #222;	color: #FFF;	font-weight: bold;	line-height: 24px;	white-space: nowrap;}
.fancybox-title-outside-wrap { position: relative;	margin-top: 10px;color: #fff;}
.fancybox-title-inside-wrap { padding-top: 10px;}
.fancybox-title-over-wrap {	position: absolute;	bottom: 0;	left: 0; color: #fff; padding: 10px; background: #000; background: rgba(0, 0, 0, .8);}

/*font*/
p {font:12px/20px Arial, Helvetica, sans-serif; color: #333; text-align:justify;}
h1 {font:bold 22px/25px Arial, Helvetica, sans-serif; color: #333;}
h2 {font:bold 16px Arial, Helvetica, sans-serif; color: #333;}
h3 {font:bold 14px Arial, Helvetica, sans-serif; color: #333; margin: 0 0 8px 0;}
h4 {font:bold 13px Arial, Helvetica, sans-serif; color: #333; }
h5 {font:11px Arial, Helvetica, sans-serif; color: #333;}