@charset "UTF-8";
@import url(reset.css);
/*margin.padding*/
.p_20 {
  padding: 20px 0;
}

.m_l20 {
  margin-left: 25px;
}

.p_t60 {
  padding-top: 60px;
}

.p_23 {
  padding-top: 23px;
}

.p_t70 {
  padding-top: 70px;
}

/*font*/
.t25_blue {
  width: 205px;
  text-align: center;
  position: absolute;
  bottom: 0px;
  right: 0px;
  font-size: 25px;
  color: #00a0e9;
  font-style: normal;
  font-weight: bold;
}

.t25 {
  width: 205px;
  text-align: center;
  position: absolute;
  bottom: 0px;
  right: 0px;
  font-size: 25px;
  color: #231815;
  font-style: normal;
  font-weight: bold;
}

.t25_pink {
  width: 180px;
  position: absolute;
  bottom: 0px;
  right: 0px;
  font-size: 25px;
  color: #ec7a9b;
  font-style: normal;
  font-weight: bold;
}

/*body*/
body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: Arial, '微軟正黑體', 'Microsoft JhengHei', sans-serif;
}

.bg {
  background: url("../images/bg.jpg") top center no-repeat #654208;
}

.clearfix {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.left {
  float: left;
}

.right {
  float: right;
}

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.center {
  width: 100%;
  text-align: center;
}

/*index*/
.bg1 {
  background: url("../images/top_bg.jpg") top left repeat-x;
}

.bg2 {
  background: url("../images/bg.jpg") top left repeat;
}

.wrapper {
  width: 1000px;
  margin: 0 auto;
  position: relative;
}

.main {
  height: 500px;
  position: relative;
}
.main header {
  width: 100%;
  position: relative;
  z-index: 10;
  padding: 20px;
}
.main header .logo {
  width: 160px;
  height: 29px;
}
.main .tit {
  position: absolute;
  top: 82px;
  left: 105px;
  z-index: 10;
}
.main .txt01 {
  position: absolute;
  top: 270px;
  left: 20px;
  z-index: 10;
}
.main .pen {
  position: absolute;
  top: 305px;
  left: 301px;
  z-index: 9;
}
.main .txt02 {
  position: absolute;
  top: 273px;
  right: 25px;
  z-index: 10;
}
.main .txt03 {
  position: absolute;
  bottom: 50px;
  right: 0px;
  z-index: 10;
}
.main .p_bg {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 1;
}

.product {
  padding: 50px 67px;
  position: relative;
  width: 935px;
  border-radius: 10px;
  background: #fff;
  border: 4px solid #666666;
  margin: 0 auto;
}
.product ul.list {
  width: 800px;
  list-style: none;
  font-size: 45px;
  font-style: italic;
}
.product ul.list li {
  float: left;
  width: 243px;
  height: 250px;
  margin-right: 23px;
  position: relative;
  cursor: pointer;
}
.product ul.list li.list_01 {
  color: #00a0e9;
  background: url("../images/p_01.jpg") top left no-repeat;
}
.product ul.list li.list_02 {
  color: #231815;
  background: url("../images/p_02.jpg") top left no-repeat;
}
.product ul.list li.list_03 {
  height: 280px;
  color: #ec7a9b;
  background: url("../images/p_03.jpg") top left no-repeat;
  text-align: left;
}
.product ul.list .b_bg {
  width: 205px;
  height: 205px;
  background: url("../images/bg_login.png") top left repeat;
  border-radius: 50%;
  text-align: center;
}
.product .j_tit {
  width: 400px;
  margin: 15px auto 35px auto;
}
.product .j_tit img {
  vertical-align: middle;
}
.product .j_tit .org {
  margin-left: 10px;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  margin-top: -10px;
}

a.backtop {
  position: fixed;
  display: block;
  z-index: 10;
  bottom: 100px;
  right: 50px;
}

footer {
  text-align: right;
  width: 935px;
  margin: 0px auto;
  padding: 20px 0;
}