@charset "utf-8";
* {
  padding: 0;
  margin: 0;
}
ol,
ul {
  list-style: none;
}
div,
table,
img {
  border: 0;
  margin: 0;
  padding: 0;
}
form,
select,
option,
ul,
li,
p,
dd,
dl,
dt,
label,
legend {
  padding: 0;
  margin: 0;
}
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  display: inline-block;
}
a {
  color: #3498db;
  text-decoration: none;
  cursor: pointer;
}
a:hover {
  color: #ff7800;
  text-decoration: underline;
}
.basic {
  width: 980px;
  background: url("http://www.ehanlin.com.tw/images/body_bg.jpg") repeat;
  color: #898989;
  font-size: 12px;
  text-align: center;
  margin: 0 auto;
  padding: 0;
  font-family: "微軟正黑體", Arial, sans-serif;
}
.container:after {
  content: " ";
  display: table;
  clear: both;
}
.box {
  background: #fff;
  box-shadow: 1px 1px 4px 1px #ccc;
  width: 100%;
  margin-bottom: 12px;
  border-radius: 6px;
  padding: 8px 0;
  display: inline-block;
  text-align: left;
  font-family: "微軟正黑體", Arial, sans-serif;
}
.box.right {
  display: block;
  width: auto;
  margin-left: 220px;
}
.box .box-title {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 42px;
  background: url("../lib/ehanlin-basicss/src/images/mainwBoxTitleBk.gif") no-repeat 0 25px;
}
.box .box-title .content {
  display: inline-block;
  font-size: 1.3em;
  color: #3c3c3f;
  font-weight: bold;
  padding: 8px 0 14px 15px;
}
.box .box-title .content span {
  color: #37b0df;
}
.box .box-title .tag {
  color: #fff;
  position: relative;
  width: auto;
  height: 19px;
  float: left;
  margin-left: -1px;
  padding: 3px 10px;
  top: 7px;
  font-weight: bold;
  z-index: 12;
}
.box .box-title .tag p {
  position: relative;
  z-index: 10;
}
.box .box-title .tag:after {
  content: " ";
  position: absolute;
  top: 0;
  right: -15px;
  z-index: 9;
  display: inline-block;
  width: 36px;
  height: 25px;
}
.box .box-title .tag.blue {
  background: url("../lib/ehanlin-basicss/src/images/wBTitleTag_bk.png") no-repeat 0 0;
}
.box .box-title .tag.blue:after {
  background: url("../lib/ehanlin-basicss/src/images/wBTitleTagBlue_end.jpg") no-repeat 0 0;
}
.box .box-title .tag.purple {
  background: url("../lib/ehanlin-basicss/src/images/wBTitleTag_bk.png") no-repeat 0px -26px;
}
.box .box-title .tag.purple:after {
  background: url("../lib/ehanlin-basicss/src/images/wBTitleTagBlue_end.jpg") no-repeat 0px -26px;
}
.box .box-title .tag.green {
  background: url("../lib/ehanlin-basicss/src/images/wBTitleTag_bk.png") no-repeat 0px -52px;
}
.box .box-title .tag.green:after {
  background: url("../lib/ehanlin-basicss/src/images/wBTitleTagBlue_end.jpg") no-repeat 0px -52px;
}
.box .box-title .tag.red {
  background: url("../lib/ehanlin-basicss/src/images/wBTitleTag_bk.png") no-repeat 0px -78px;
}
.box .box-title .tag.red:after {
  background: url("../lib/ehanlin-basicss/src/images/wBTitleTagBlue_end.jpg") no-repeat 0px -78px;
}
.box .h-line {
  display: block;
  width: 95%;
  margin: 10px 0;
  border: none;
  height: 1px;
  background: #ccc;
}
.box .h-line:before {
  display: block;
  content: " ";
  width: 10%;
  height: 1px;
  background: linear-gradient(90deg, white, #ccc);
  float: left;
}
.box .h-line:after {
  display: block;
  content: " ";
  width: 10%;
  height: 1px;
  background: linear-gradient(90deg, #ccc, white);
  float: right;
}
.ehanlin-header {
  margin: 0 auto 10px auto;
  padding: 10px 5px 0 5px;
  text-align: right;
  line-height: 1.6em;
}
.ehanlin-header .header-menu li {
  display: inline-block;
}
.ehanlin-header .header-menu li + li:before {
  content: "|";
  margin: 0 5px;
}
.ehanlin-header .logo {
  float: left;
  display: inline-block;
  width: 304px;
  height: 35px;
  background: url("http://www.ehanlin.com.tw/images/ehanlin_logo.png");
}
.nav {
  background: #009ac9;
  font-family: "微軟正黑體", Arial, sans-serif;
  margin: 10px auto;
  border: solid 3px #FFF;
  border-radius: 6px;
  box-shadow: 1px 1px 4px 1px #CCC;
}
.nav a {
  color: #ecf0f1;
}
.nav li {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 10px;
  font-size: 18px;
  color: #ecf0f1;
  width: 165px;
  cursor: pointer;
}
.nav li :hover {
  color: #ffffff;
}
.nav li :hover a {
  color: #ffffff;
}
.nav li + li {
  border-left: #ffffff dashed 1px;
}
.menu {
  background: #009ac9;
  box-shadow: 1px 1px 4px 1px #CCC, inset 0 0 0 3px #FFF;
  float: left;
  text-align: left;
  margin-right: 10px;
  border-radius: 5px;
  padding: 15px;
  display: inline-block;
  font-size: 1.2em;
}
.menu a {
  padding: 8px 0;
  display: inline-block;
  color: white;
  border-bottom: 1px #1a507d dotted;
  font-weight: bold;
  width: 100%;
}
.menu a:hover,
.menu a.select {
  background: linear-gradient(to right, #0b243b 0%, #009ac9 100%);
  text-decoration: none;
}
.menu a:before {
  content: " ";
  display: inline-block;
  width: 10px;
  height: 10px;
  background: url("../lib/ehanlin-basicss/src/images/l_icons.png") no-repeat -132px -3px;
}
.menu a.none {
  background: none !important;
  cursor: default;
}
.menu li a {
  width: 180px;
  padding-left: 0px;
}
.menu li li a {
  width: 150px;
  padding-left: 30px;
}
.menu li li li a {
  width: 120px;
  padding-left: 60px;
}
.btn {
  box-shadow: 2px 2px 4px -1px #ccc;
  display: inline-block;
  width: auto;
  padding: 10px 40px;
  border: 1px solid white;
  background: #3498db;
  color: white;
  border-radius: 4px;
  position: relative;
  font-size: 1.2em;
}
.btn:hover {
  color: white;
  background: #217dbb;
  text-shadow: white 0 0 8px;
  text-decoration: none;
}
.btn.big {
  padding: 10px 55px 15px;
  font-size: 1.5em;
  text-shadow: #222 1px 1px 6px;
}
.btn.disable {
  cursor: default;
  background: lightgray;
  text-shadow: none;
}
.btn.form {
  margin-right: 5px;
  padding: 6px 16px;
  box-shadow: 0 1px 2px -1px #b1b1b1, inset 0px 0px 0px 1px #fff;
  background: #e8e8e8;
  border: 1px #e1e1e1 solid;
  color: #000;
  text-decoration: none;
  border-radius: 4px;
}
.btn.form:hover {
  z-index: 10;
  position: relative;
  color: #000;
  box-shadow: 0 0 4px 0 #3498db, inset 0 0 0 1px #fff;
  border: #3498db 1px solid;
  background: linear-gradient(to bottom, #d3d3d3 0%, #ededed 100%);
}
.btn.green {
  background: #6bae35;
}
.btn.green:hover {
  background: #538729;
}
.btn.gradient-green {
  background: linear-gradient(to bottom, #6bae35 0%, #588f2b 49%, #456f22 50%, #588f2b 100%);
}
.btn.gradient-green:hover {
  box-shadow: 1px 1px 4px 1px #CCC, inset 0 0 5px 2px #315018;
  background: linear-gradient(to bottom, #6bae35 0%, #5d972e 49%, #497724 50%, #5d972e 100%);
}
.btn.orange {
  background: #ff8a00;
}
.btn.orange:hover {
  background: #cc6e00;
}
.btn.gradient-orange {
  background: linear-gradient(to bottom, #ff8a00 0%, #d67400 49%, #ad5e00 50%, #d67400 100%);
}
.btn.gradient-orange:hover {
  box-shadow: 1px 1px 4px 1px #CCC, inset 0 0 5px 2px #854800;
  background: linear-gradient(to bottom, #ff8a00 0%, #e07900 49%, #b86300 50%, #e07900 100%);
}
.btn.purple {
  background: #fd479c;
}
.btn.purple:hover {
  background: #fc1581;
}
.btn.gradient-purple {
  background: linear-gradient(to bottom, #fd479c 0%, #fd1f86 49%, #f00371 50%, #fd1f86 100%);
}
.btn.gradient-purple:hover {
  box-shadow: 1px 1px 4px 1px #CCC, inset 0 0 5px 2px #c7025e;
  background: linear-gradient(to bottom, #fd479c 0%, #fd298c 49%, #fa0376 50%, #fd298c 100%);
}
.btn.red {
  background: red;
}
.btn.red:hover {
  background: #cc0000;
}
.btn.gradient-red {
  background: linear-gradient(to bottom, red 0%, #d60000 49%, #ad0000 50%, #d60000 100%);
}
.btn.gradient-red:hover {
  box-shadow: 1px 1px 4px 1px #CCC, inset 0 0 5px 2px #850000;
  background: linear-gradient(to bottom, red 0%, #e00000 49%, #b80000 50%, #e00000 100%);
}
.btn.pink {
  background: #f951ac;
}
.btn.pink:hover {
  background: #f72094;
}
.btn.gradient-pink {
  background: linear-gradient(to bottom, #f951ac 0%, #f82a99 49%, #f00886 50%, #f82a99 100%);
}
.btn.gradient-pink:hover {
  box-shadow: 1px 1px 4px 1px #CCC, inset 0 0 5px 2px #c90770;
  background: linear-gradient(to bottom, #f951ac 0%, #f8339e 49%, #f70c8b 50%, #f8339e 100%);
}
.ehanlin-footer {
  margin: 10px auto;
  border-top: 1px solid #cacaca;
  padding: 10px 5px;
  color: #797979;
  line-height: 2em;
  text-align: right;
}
.ehanlin-footer .footer-left {
  float: left;
  text-align: left;
}
.ehanlin-footer .footer-menu li {
  display: inline;
  margin-left: 10px;
}
.ehanlin-footer .browser {
  display: inline-block;
}
.ehanlin-footer .browser li {
  display: inline-block;
  margin-left: 5px;
}
.ehanlin-footer .browser li a {
  color: #797979;
}
.ehanlin-footer .browser li span {
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url("http://www.ehanlin.com.tw/images/l_icons.png") no-repeat 0 0;
  margin: 0 2px -3px 0;
}
.ehanlin-footer .browser .ie {
  background-position: -500px 0;
}
.ehanlin-footer .browser .firefox {
  background-position: -525px 0;
}
.ehanlin-footer .browser .safari {
  background-position: -550px 0;
}
.ehanlin-footer .browser .chrome {
  background-position: -575px 0;
}
.ehanlin-footer .browser a:hover .ie {
  background-position: -500px -27px;
}
.ehanlin-footer .browser a:hover .firefox {
  background-position: -525px -27px;
}
.ehanlin-footer .browser a:hover .safari {
  background-position: -550px -27px;
}
.ehanlin-footer .browser a:hover .chrome {
  background-position: -575px -27px;
}
.hide {
  display: none;
}
.left-side {
  float: left;
  width: 215px;
}
img.banner {
  display: block;
  margin: auto;
  width: 98%;
}
.unblock {
  font-weight: bold;
  font-size: 18px;
  position: absolute;
  right: 5px;
  top: 3px;
}
.policy {
  margin: 20px;
  border-bottom: 1px #ccc dashed;
}
.policy p {
  line-height: 1.5em;
  font-size: 1.2em;
  color: #555;
  text-align: left;
  padding: 0 40px;
  width: 92%;
}
.policy h3 {
  color: #000;
  font-size: 1.3em;
  padding: 10px;
  width: 95%;
}
.policy ul {
  margin: 10px 0;
}
.policy ul li {
  line-height: 1.5em;
  font-size: 1.2em;
  color: #767676;
  padding: 5px 40px;
}
.policy ul li:before {
  content: " ";
  background-color: deepskyblue;
  display: inline-block;
  width: 8px;
  height: 8px;
  vertical-align: middle;
  border-radius: 100%;
  margin: 5px;
}