@charset "UTF-8";
/* erb30 */

html, body {margin:0 0 50px 0; padding: 0; background: #FFF; font-family:Arial, Helvetica, "Microsoft JhengHei",Heiti,sans-serif; color:#716558; font-size:16px; letter-spacing: 0.05em; line-height:23px; text-align:justify; }

a:link { text-decoration: none; color: #716558; font-weight: bold;}
a:visited { text-decoration: none; color:#716558; font-weight: bold; }
a:hover { text-decoration: none; color: #00aa9d; font-weight: bold; }
a:active { text-decoration: none; color: #00aa9d; font-weight: bold; }

h1 { color: #00AA9D; font-size: 40px;}
h2 { color: #00AA9D; font-size: 40px; margin-bottom: 15px; }
h3 { color: #F27333; font-size: 22px; margin: 0 0 5px 0; }
h4 { color: #00AA9D; font-size: 22px; margin: 0 0 5px 0; }
h5 { color: #F27333; font-size: 30px; margin: 0 0 10px 0; }

hr { height: 30px; border: 0; box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.3); margin: 0 0 15px 0;}


hr.style2 {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    margin: 40px 0;
}

.to-top{ position:fixed; right:60px; bottom:100px; width:30px; height:30px; background:url(../images/totop.png) no-repeat; cursor:pointer; z-index:900; }

#wrapper { margin: 0 auto; width: 1280px; min-height: 500px; background: url("../images/bg1.png") top no-repeat; background-size: 1280px 500px; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;}

#header {width:1120px; height: 190px; padding: 40px 80px 0 80px;}

#logo {width:210px; height: 160px; background:url("../images/logo.png") no-repeat; background-size: 210px 160px; float: left;}
#logo a {width:210px; height: 160px; display:block;}

#erb30logo {width: 250px; height:250px; box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; float:left; position: relative; background-color: #FFF; background: url("../images/erb30logo.png") no-repeat; background-size: 250px 250px; border-radius: 15px;}
#erb30logo-txt {width: 700px; float:right; position: relative; }


#nav{ height: 160px; float: right; font-size: 20px; color: #FFF;}
#nav ul {list-style: none; }
#nav ul li {position: relative; float: left; padding-left: 25px;}
#nav ul li a {text-decoration: none; color: #FFF;}


#content {width:980px; min-height: 280px; padding: 25px 150px 10px 150px;}
#home-banner{width:980px; height: 400px; margin: 40px 0 60px 0; box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; position:relative; }

#bottom-bg { width: 1280px; height: 150px; background: url("../images/bg2.png") top no-repeat; background-size: 1280px 150px; }

#footer { background: #231F20; color:#FFF; text-align: center; padding: 5px; font-size: 14px;}


#icon {width: 980px; height: 40px; display: flex; justify-content: center; letter-spacing: 0; margin: 10px 0 30px 0; position:relative;}
#icon ul { list-style:none; padding: 0; margin: 0; }
#icon ul li { float: left; padding: 0 0 0 48px; line-height: 40px;}
#icon ul li a {text-decoration: none; color:#716558; font-weight: normal;}
#icon ul li a:hover {color:#F27333; }
.icon-erb {background: url("../images/icon-erb.png")no-repeat; width: 40px; height: 40px; background-size: 40px 40px; width:105px;}
.icon-fb {background: url("../images/icon-fb.png")no-repeat; width: 40px; height: 40px; background-size: 40px 40px; width:100px;}
.icon-yt {background: url("../images/icon-yt.png")no-repeat; width: 40px; height: 40px; background-size: 40px 40px; width:160px; }
.icon-ig {background: url("../images/icon-ig.png")no-repeat; width: 40px; height: 40px; background-size: 40px 40px; width:160px; }

/* milestone */
#year {width:980px; }
#year ul {list-style: none; padding:0; margin: 0;}
#year ul li {float: left; padding:5px 10px; border-radius: 20px; width:150px; text-align: center; margin-right: 15px; font-size:18px;}
#year ul li a {color:#FFF; display: block;}
.color1 {background: #F27333; }
.color2 {background: #00AA9D; }

.year-box1, .year-box2 {width:980px; box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; display:flex; border-radius: 15px; margin: 30px 0; }
.year-orange, .year-green {width:210px; padding:20px 27px; font-size: 35px; font-weight: bold; text-align: left; vertical-align: top; margin: 20px 0; letter-spacing: normal;}
.year-orange-txt {width: 650px; border-left:#F27333 solid 6px; padding:10px 30px; display:inline-block; vertical-align: top; margin: 20px 0;}
.year-green-txt {width: 650px; border-left:#00AA9D solid 6px; padding:10px 30px; display:inline-block; vertical-align: top; margin: 20px 0;}
.year-orange {color: #F27333;}
.year-green { color: #00AA9D;}
.year-orange-txt ul, .year-green-txt ul { padding:0; margin: 0 0 0 22px; }


/* activities */
.activity-box {width: 980px; display:flex; margin: 20px 0 30px 0;}
.activity-txt {width: 520px; display:inline-block; vertical-align: top; padding-right: 40px; }
.activity-txt2 {width: 980px; display:inline-block; vertical-align: top;}
.activity-img {width: 400px; height: 238px; display:inline-block; vertical-align: top; box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; border: 5px solid #FFF;}
.activity-img img { width: 400px; height: 238px;}


.clickBtn{
	background: #F27333;
	border-radius:20px;
	display:inline-block;
	cursor:pointer;
	color:#FFF !important;
	font-size:18px;
	padding:8px 45px;
	text-decoration:none;
}
.clickBtn:hover {
	background:#D8672E;
}
.clickBtn:active {
	position:relative;
	top:1px;
}