@charset "UTF-8";
/* Post 50 */

html, body { margin:0 0 20px 0; padding:0; font-family: Helvetica, Arial, "Microsoft JhengHei", "Noto Sans TC",  sans-serif; font-size:16px; color:#333; letter-spacing: 0.05em; line-height:23px; text-align:justify; background:#F2F2F2;}

a:link { text-decoration: none; color: #333; }
a:visited { text-decoration: none; color: #333; }
a:hover { text-decoration: none; color: #C60; font-weight: bold; }
a:active { text-decoration: none; color: #333;  }

p { padding:0; margin: 0 0 16px 0;}
h1 { color:#f54336; margin:0 0 30px 0; font-weight:bolder; font-size:30px; background:url(../images/head-bg.png) no-repeat #FFF; height:55px; line-height:55px; padding-left: 60px; padding-right: 25px; display:inline-block; box-shadow: 5px 5px 20px -2px #bcbcbc; }
h2 { color:#639; margin:0 0 15px 0; font-weight:bold; font-size:25px; }
h3 { color:#C93; margin:0 0 10px 0; font-weight:bold; font-size:20px; letter-spacing:2px; }
.main-head-bg { width: 100%; height: 55px; display:block; background:url(../images/line.png) repeat-x; margin-bottom: 40px }

.hr-line { width:100%; margin: 35px 0; height: 8px; border: 0; box-shadow: inset 0 8px 8px -8px rgba(0, 0, 0, 0.2); }
.to-top{ position:fixed; right:60px; bottom:100px; width:30px; height:30px; background:url(../images/totop.png) no-repeat; cursor:pointer; z-index:5000; }
.fixed { position:fixed; top: 0; z-index:100; float:none !important; background:#FFF; padding:0 0 0 0; border-bottom:#CCC 1px solid; z-index:100; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);}

img.style-shadow {     
-webkit-box-shadow: 0px 1px 5px 0px #777;
-moz-box-shadow: 0px 1px 5px 0px #777;
box-shadow: 0px 1px 5px 0px #777;
}

#main-wrapper { 
margin:0 auto; width:1100px; 
-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, .2);
-moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, .2);
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, .2);
background:#FFF; }

#top-header { width:1000px; position:relative; height:110px; padding:30px 50px 25px 50px;  }

#main-content { padding:50px 80px; min-height:100px; text-align:justify; }
#main-content ul { padding:0; margin:0 0 20px 25px;}

#footer { width:100%; height:50px; color:#FFF; font-size:13px; text-align:center; padding:30px 0; 
background:url(../images/bg.png) repeat-x #333; }

#erb-logo { width: 210px; height: 110px; position:relative; float:left; background:url(../images/erblogo.png) no-repeat; background-size: 210px 110px; padding-right:25px; border-right: 1px solid #E2E2E2; }
#erb-logo a { width: 210px; height: 110px; display:block; }

#post50-logo { width: 230px; height: 110px; position:relative; float:left; background:url(../images/post50.png) no-repeat;  background-size: 230px 110px; margin-left:25px; }
#post50-logo a { width: 230px; height: 110px; display:block; }


/* main menu */
#nav-wrapper { width:940px; height:45px; padding:0 80px; background:#f54336; }
#nav-wrapper li li { width:100%; }

.nav { height: 45px; list-style:none; padding:0; margin:0; line-height:45px; }
.nav li { position:relative; float:left; font-size: 16px; line-height:45px; border-left: #F66 2px solid; }
.nav li a { text-decoration: none; display:block; text-align:center; color:#FFF; white-space:nowrap; padding:0 22px; font-weight: normal !important;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.nav li:last-child { border-right: #F66 2px solid;}
.nav li:hover > a, .nav li:focus > a { background:#930; color: #FFF; }


/* dropdown menu */
li.dropdown { background:url(../images/drop-arrow.png) 5px no-repeat; }
.dropdown ul { position:absolute; z-index:100; left:0; top:45px; list-style:none; padding:0; margin:0; border-top:none; }
.dropdown ul li { border:none !important; }
.dropdown ul li:last-child > a { }
.dropdown ul li a { 
background: #f6921e;  text-align: left; display:block; font-weight:normal; color:#FFF;
line-height:45px; height:45px;
-webkit-box-shadow: inset 0px 6px 10px -8px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 6px 10px -8px rgba(0,0,0,0.5);
box-shadow: inset 0px 6px 10px -8px rgba(0,0,0,0.5); }
.dropdown li a:hover { background:#930; color: #FFF; }
.dropdown li a:focus { background:#930; color: #FFF; }

/* home button */
#sub-nav-wrapper { width:300px; position:relative; float:right; text-align:right; margin:50px 20px 0 0; }
#sub-nav-wrapper img, #sub-nav-wrapper img a { border: none;}


.main-btn {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.main-btn:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #930;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.main-btn:hover, .main-btn:focus, .main-btn:active {
  color: white;
}
.main-btn:hover:before, .main-btn:focus:before, .main-btn:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}


a.detail-btn {
	width: 90px;
	letter-spacing:3px;
	position: relative;
    color: #000;
    text-decoration: none;
    background: #FC3;
    font-weight: bold;
    font-size: 18px;
    display: block;
    padding: 8px 10px;
	border: 3px solid #000;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 3px 3px #CCC, 0px 3px 3px #CCC;
    -moz-box-shadow: 0px 3px 3px #CCC, 0px 3px 3px #CCC;
    box-shadow: 0px 3px 3px #CCC, 0px 3px 3px #CCC;
	text-align: center;	
	-webkit-transition: all .1s ease;
	-moz-transition: all .1s ease;
	-ms-transition: all .1s ease;
	-o-transition: all .1s ease;
	transition: all .1s ease;
}

a.detail-btn:active, a.detail-btn:hover {
    -webkit-box-shadow: 0px 2px 0px #CCC, 0px 3px 3px #CCC;
    -moz-box-shadow: 0px 2px 0px #CCC, 0px 3px 3px #CCC;
    box-shadow: 0px 2px 0px #CCC, 0px 3px 3px #CCC;
    position: relative;
    top: 4px;
}


.SO-Logo-wrapper { width:300px; position:relative; float:left; margin:5px; border: #CCC solid 1px;}
.SO-Logo-img { width: 300px; height:160px; }
.SO-Logo-txt { width:290px; height:40px; text-align:center; font-size:14px; line-height:40px; border-top: #CCC solid 1px; padding:5px; background:#E9E9E9; }
.SO-Logo-txt2 { width:290px; height:40px; text-align:center; font-size:14px; line-height:19px; border-top: #CCC solid 1px; padding:5px; background:#E9E9E9; }


#main-slider {
	background: #FFF;
	width:940px;
	height:320px;
	position:relative; 
}