//var
@images-url: "../images";
@color-body: #DADADA;
@color-header: #959595;
@color-nav: #343434;

//common
.box {
  width: 982px;
  margin: 0 auto;
}
.text-hidden {
  text-indent: -999999px;
}
.background(@color: "", @url, @repeat: no-repeat, @x: 50%, @y: 50%, @size: auto) {
  background-color: @color;
  background-image: url("@{images-url}/@{url}");
  background-position: @x @y;
  background-repeat: @repeat;
  background-size: @size;
}
.clearfix {
  zoom:1;
  &:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
  }
}
.shadow-right {
   box-shadow: 5px 0 10px #D4D4D4; 
}
.font-scale(@size, @scale: 0.75) {
  font-size: @size;
  -webkit-transform:scale(@scale);
}
.hidden {
  display: none;
}
.boxpad20 {
  padding-left: 20px;
  padding-right: 20px;
  width: 942px;
  background: #fff;
}

a {
  color: #404040;
}

//page
#page {
  padding-top: 20px;
  padding-bottom: 20px;
  span {
    display: inline-block;
    .clearfix;
    a {
      display: block;
      float: left;
      font-size: 12px;
      font-family: '宋体';
      background: #E0E0E0;
      text-align: center;
      width: 25px;
      height: 25px;
      line-height: 25px;
      margin-right: 5px;
      color: #2D2D2D;
      border: 1px #B6B6B6 solid;
      &.prev,&.next {
        width: 60px;
      }
      &:hover, &.now_page {
        background: #D1D1D1;
	    color: #47006F;
      }
    }
  }
}

//prenext
.prenext {
  margin-top: 20px;
  text-align: center;
  li {
    display: inline-block;
    font-size: 14px;
    width: 150px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #464646;
    border-radius: 5px;
    color: #fff;
    &:first-child {
      margin-right: 20px;
    }
    &:hover {
      background: #1F1F1F;
    }
    a {
      color: #fff;
      font-size: 16px;
    }
  }
}

//position
.position {
  .box;
  .boxpad20;
  height: 35px;
  line-height: 35px;
  font-size: 12px;
  a {
    margin-left: 5px;
    margin-right: 5px;
    &:first-child {
      margin-left: 30px;
    }
  }
}

//common-title
.common-title {
  .box;
  .boxpad20;
  .background(#fff, 'icon-6.png', no-repeat, 15px, top);
  span {
    display: block;
    font-weight: bold;
    font-size: 16px;
    color: #333333;
    margin-left: 40px;
    padding-top: 5px;
  }
  em {
    display: block;
    font-size: 16px;
    font-family: Verdana;
    color: #333333;
    margin-left: 40px;
  }
}

//slider
.slider {
  float: left;
  width: 180px;
  padding-left: 40px;
  padding-right: 30px;
  .slider_cont {
    >ul {
      >li {
        .background(#262626, 'slider_li_bg.png', no-repeat, right, -3px);
        margin-top: 10px;
        >a {
          display: block;
          height: 16px;
          line-height: 16px;
          font-size: 14px;
          .background('', 'icon-7.png', no-repeat, 5px, -25px);
          color: #CFCFCF;
          padding-left: 25px;
          font-weight: bold;
          &:hover,&.current {
            color: #E60C00;
            background-position: 5px top;
          }
        }
        >ul {
          background: #fff;
          padding-top: 10px;
          >li {
            >a {
              display: block;
              color: #868686;
              font-size: 12px;
              height: 25px;
              line-height: 25px;
              padding-left: 5px;
              &:hover,&.current {
                color: #000000;
              }
            }
          }
        }
      }
    }
  }
}

//body 
body {
  .background(@color-body, 'body-bg.jpg', repeat-x, left, top);
  position: relative;
}

//header
.header {
  .box;
  .clearfix;
  height: 120px;
  overflow: hidden;
  .logo {
    float: left;
    .clearfix;
    height: 100%;
    width: 580px;
    #logo {
      .text-hidden;
      display: block;
      float: left;
      width: 289px;
      height: 100%;
      .background('', 'logo.png', no-repeat, left, 50%);
    }
    .title {
      float: left;
      margin-top: 40px;
      .text-hidden;
      .background('', 'logo-r-txt.jpg', no-repeat, left, 50%);
      width: 285px;
      height: 50px;
      opacity: 0;
    }
  }
  .search {
    float: right;
    strong {
      display: block;
      font-size: 12px;
      color: @color-header;
      text-align: right;
    }
    form {
      margin-top: 50px;
      .clearfix;
      span {
        display: block;
        float: left;
        color: @color-header;
        font-size: 14px;
        margin-left: 5px;
        height: 33px;
        line-height: 33px;
        input[type='text'] {
          height: 18px;
          width: 208px;
          border: 1px @color-header solid;
          background: #000000;
          color: @color-header;
        }
        input[type='submit'] {
          display: block;
          background: none;
          border: none;
          .background('', 'search-go.png', no-repeat, 50%, 50%);
          width: 30px;
          height: 100%;
          cursor: pointer;
        }
      }
    }
  }
}

//nav
.nav {
  .box;
  .clearfix;
  .background('', 'nav_left.png', repeat-x, left, -2px);
  height: 39px;
  position: relative;
  h1 {
    float: left;
    font-size: 16px;
    height: 39px;
    line-height: 42px;
    color: #262626;
    font-weight: normal;
    padding-left: 20px;
  }
  ul {
    float: right;
    .clearfix;
    li {
      float: left;
      .background('', 'nav_left.png', repeat-x, left, -2px);
      a {
        display: block;
        width: 90px;
     	height: 39px;
      	line-height: 39px;
      	text-align: center;
        .background('', 'nav_right.png', repeat-x, left, top);
        color: #333333;
        font-size: 14px;
        font-weight: bold;
        &.current {
          .background('', 'nav_current.png', no-repeat, left, top);
          padding-left: 30px;
          color: #D70A00;
        }
        &.current_prev {
          background: none;
        }
      }
    }
  }
  .lang {
    display: block;
    width: 34px;
    height: 34px;
    .background('', 'lang-tw.png', no-repeat, 50%, 50%);
    position: absolute;
    left: 965px;
    top: -17px;
    z-index: 99;
    .text-hidden;
    &.zh {
      .background('', 'lang-zh.png', no-repeat, 50%, 50%);
    }
  }
}

//nav-middle-banner
.nav-middle-banner {
  .box;
  height: 30px;
  .background(#fff, 'nav-middle-banner.png', repeat-x, left, top);
}

//banner
.banner {
  .box;
  .boxpad20;
  //padding-top: 30px;
  border-bottom: 1px #B9B9B9 solid;
  .background('', 'banner-bottom.png', no-repeat, left, bottom);
  position: relative;
  .banner-arrow {
    display: block;
    width:  24px;
    height: 54px;
    .background('', 'banner-arrow.jpg', no-repeat, 50%, 50%);
    position: absolute;
    left: 165px;
    top: 215px;
    z-index: 99;
    cursor: pointer;
  }
  .banner-box {
      .clearfix;
	  .intro {
	    float: left;
	    width: 177px;
	    height: 290px;
	    overflow: hidden;
	    span {
	      display: block;
	      p,a {
	        color: #979797;
	        font-size: 14px;
	      }
	    }
	    h2 {
	      color: #4E4C4D;
	      font-size: 2em;
	      font-weight: normal;
	      font-family: Verdana;
	      margin-top: 138px;
	      .text-hidden;
	      height: 72px;
	    }
	  }
	  #banner {
	    float: right;
	    width: 765px;
	    height: 290px;
	    overflow: hidden;
	    ul {
	      .clearfix;
	      li {
	        float: left;
	        img {
	          width: 765px;
	          height: 290px;
	        }
	      }
	    }
	  }
  }
  .banner-title {
    padding-top: 10px;
    padding-bottom: 30px;
    .clearfix;
    h2 {
      font-size: 15px;
      font-weight: normal;
      color: #3F3F3F;
      font-family: Verdana;
      float: left;
      .text-hidden;
      width: 372px;
      height: 44px;
    }
    ul {
      float: left;
      .clearfix;
      border-top: 1px #3D3D3D solid;
      margin-top: 30px;
      margin-left: 50px;
      width: 520px;
      li {
        float: left;
        text-align: center;
        margin-top: -30px;
        span {
          display: block;
          text-align: center;
          height: 24px;
          line-height: 24px;
          em {
            display: inline-block;
            width: 10px;
            height: 10px;
            background: #3D3D3D;
            border-radius: 50%;
          }
        }
        &.pad {
          span em {
            margin-top: 24px;
          }
          a {
            margin-top: 15px;
          }
        }
        &:hover,&.current {
          span em {
            height: 24px;
            width: 18px;
            background: none;
            .background('', 'icon-4.png', no-repeat, 50%, top);
            border-radius: 0;
          }
          &.pad span em {
            margin-top: 18px;
          }
        }
        a {
          display: block;
          text-align: center;
          padding-left: 10px;
          padding-right: 10px;
          color: #3D3D3D;
        }
      }
    }
  }
}

//banner-small
.banner-small {
  .box;
  .boxpad20;
  //padding-top: 30px;
  padding-bottom: 5px;
  ul {
    li {
      img {
        width: 940px;
        height: 120px;
      }
    }
  }
}

//index-box1 
.index-box1 {
  .box;
  .background('', 'icon-1.png', repeat-x, left, top);
  height: 254px;
  border-top: 1px #F2F2F2 solid;
  border-bottom: 1px #f2f2f2 solid;
  ul {
    .clearfix;
    .background('', 'title-1.png', no-repeat, 30px, 20px);
    padding-top: 90px;
    li {
      float: left;
      width: 385px;
      margin-left: 70px;
      .intro {
        font-size: 12px;
        color: #525252;
        line-height: 20px;
        padding-top: 10px;
        height: 80px;
        overflow: hidden;
      }
      span {
        display: block;
        .clearfix;
        margin-top: 10px;
        a em {
          display: block;
          float: left;
          width: 40px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          font-size: 12px;
          color: #fff;
          margin-right: 10px;
          background: #B80700;
          border-radius: 50%;
        }
        a + a em {
          background: #000000;
        }
        a + a + a em {
          background: #0F8300;
        }
        .more {
          display: block;
          float: right;
          height: 40px;
          width: 50px;
          .background('', 'more.png', no-repeat, right, 50%);
        }
      }
    }
    li + li {
      span {
        .background('', 'icon-2.png', no-repeat, left, 50%);
      }
    }
  }
}

//index-box2
.index-box2 {
  .box;
  //background: #fff;
  .background(#fff, 'box-1-bg-top.png', repeat-x, left, top);
  border-top: 1px #B9B9B9 solid;
  position: relative;
  dl {
    .background('', 'box-1-bg-bottom.png', repeat-x, left, bottom);
    dt {
      //.background('', 'title-bg.png', no-repeat, left, 10px);
      //padding-top: 13px;
      //padding-left: 65px;
      margin-left: -10px;
      .background('', 'index-box2-title.png', no-repeat, left, 10px);
      height: 62px;
      h2 {
        font-size: 20px;
        font-weight: normal;
        font-family: Verdana;
        color: #fff;
        
        display: none;
      }
      strong {
        display: block;
        font-size: 16px;
        color: #575757;
        
        display: none;
      }
    }
    dd {
      .background('', 'box-1.png', no-repeat, 50%, top);
      margin-top: 35px;
      padding-bottom: 50px;
      ul {
        .clearfix;
        margin-bottom: 50px;
        li {
          float: left;
          width: 400px;
          padding-top: 60px;
          padding-left: 70px;
          background-position: right top;
          background-repeat: no-repeat;
          span {
            display: block;
            width: 260px;
            color: #262626;
            font-size: 12px;
          }
        }
	li + li {
	  padding-left: 50px;
	}
      }
    }
  }
  >.more {
    display: block;
    position: absolute;
    left: 960px;
    top: 0;
    z-index: 999;
    width: 45px;
    padding-top: 70px;
    .background('', 'icon-3.png', no-repeat, 50%, top);
    a {
      color: #9D9D9D;
      display: block;
      width: 15px;
      margin-left: 5px;
      line-height: 100%;
      font-size: 13px;
    }
  }
}

//footer
.footer {
  background: #262626;
  padding-top: 25px;
  padding-bottom: 70px;
  .copyright {
    .box;
    .background('', 'logo-footer.png', no-repeat, left ,top);
    padding-top: 55px;
    padding-left: 40px;
    >p {
      height: 20px;
      line-height: 20px;
      a {
        font-size: 14px;
        color: #A9A9A9;
        display: block;
        .text-hidden;
      }
    }
    table tr {
      td {
        p {
          font-size: 12px;
          color: #A9A9A9;
        }
      }
      td + td {
        padding-top: 20px;
        padding-left: 25px;
      }
      td + td + td {
        padding-left: 165px;
        span {
          display: block;
          height: 15px;
          line-height: 15px;
          margin-bottom: 5px;
          padding-left: 10px;
          padding-right: 20px;
          .background(#D5D5D5, 'footer-arrow.png', no-repeat, right, 50%);
          color: #252525;
          font-family: '宋体';
        }
      }
    }
    
  }
  .fnav {
    .box;
    margin-top: 95px;
    .clearfix;
    ul {
      float: left;
      width: 645px;
      margin-left: 45px;
      height: 50px;
      padding-left: 70px;
      overflow: hidden;
      .background('', 'icon-5.png', no-repeat, left, 50%);
      li {
        float: left;
        margin-right: 20px;
        padding-top: 30px;
        a {
          display: block;
          color: #A9A9A9;
          .background('', 'footer-point.png', no-repeat, left, 50%);
          padding-left: 10px;
        }
        &.current,&:hover {
          .background('', 'icon-4.png', no-repeat, left, top);
          a {
            color: #B80700;
          }
        }
      }
    }
    span {
      float: left;
      display: block;
      color: #145900;
    }
  }
}

//single
.single {
  .box;
  .clearfix;
  .boxpad20;
  padding-bottom: 50px;
  .content {
    width: 690px;
    float: left;
    padding-top: 10px;
    .cont {
    }
  }
}

//single-article
.single-article {
  .cont {
    p {
      line-height: 25px;
      color: #676767;
    }
  }
}

//single-text-piclist
.single-text-piclist {
  .content .cont {
    .text {
      margin-bottom: 40px;
      width: 635px;
    }
    ul {
      .clearfix;
      li {
        float: left;
        margin-right: 5px;
        margin-bottom: 30px;
        .img {
          width: 210px;
          height: 155px;
          text-align: center;
          overflow: hidden;
          img {
            height: 100%;
          }
        }
        .title {
          color: #767676;
          height: 30px;
          line-height: 30px;
          .background('', 'icon-9.png', no-repeat, left, -115px);
          padding-left: 25px;
        }
      }
    }
  }
}

//single-product
.single-product {
  .slider {
    width: 210px;
  }
  .content {
    width: 660px;
    .cont {
      position: relative;
      .fengmian {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 999;
        img {
          //width: 250px;
        }
      }
      >h1 {
        font-size: 18px;
        color: #888888;
        font-weight: normal;
      }
      .intro {
        font-size: 12px;
        color: #686868;
        width: 255px;
        font-family: '宋体';
        margin-top: 5px;
        margin-bottom: 5px;
      }
      dl {
        dt strong {
          color: #848484;
          padding-left: 5px;
          padding-right: 5px;
          height: 25px;
          line-height: 25px;
          display: inline-block;
          font-weight: normal;
          cursor: pointer;
          &:hover,&.current {
            color: #fff;
            background: #E40C00;
          }
        }
        dd {
          display: none;
          color: #000;
          padding-top: 5px;
          padding-bottom: 5px;
        }
      }
      .banner-product {
        height: 55px;
      }
      .arrow {
        .background('', 'product-arrow.jpg', no-repeat, left, 50%);
        padding-left: 15px;
        height: 30px;
        line-height: 30px;
      }
      .arrow_pdf {
        .clearfix;
        >strong {
          float: left;
          display: block;
          height: 30px;
          line-height: 30px;
          font-weight: normal;
        }
        >a {
          float: left;
          display: block;
          margin-left: 5px;
          .background('', 'icon-8.png', no-repeat, left, top);
          width: 30px;
          height: 30px;
          .text-hidden;
        }
        .href {
          display: none;
        }
      }
      .contact {
        .clearfix;
        span {
          display: block;
          float: left;
          margin-right: 25px;
          padding-left: 25px;
          .background('', 'icon-8.png', no-repeat, left, -80px);
        }
        span + span {
          background-position: left -120px;
        }
      }
    }
  }
}

//product-name
.product-name {
  .box;
  .boxpad20;
  .background('', 'product-name-rule.png', no-repeat, 20px, top);
  padding-bottom: 95px;
  .info {
    width: 545px;
    height: 265px;
    padding-left: 100px;
    padding-top: 30px;
    margin-left: 230px;
    .background('', 'product-content-bg.png', no-repeat, 50%, 50%);
    font-family: '宋体';
    color: #3E3E3E;
  }
}

//single-culture
.single-culture {
  .content .cont {
    >.text {
      width: 640px;
    }
    >dl {
      dt {
        margin-top: 30px;
        margin-bottom: 20px;
        span {
          display: inline-block;
          color: #686868;
          padding: 0 2px;
          cursor: pointer;
          &:hover,&.current {
            color: #fff;
            background: #E50C00;
          }
        }
      }
      dd {
        li {
          display: none;
          >span>a {
            font-size: 12px;
            font-family: '宋体';
            color: #686868;
            &:hover,&.current {
              color: #000;
            }
          }
          .pic {
            display: none;
          }
        }
      }
    }
    >.zutu {
      margin-top: 20px;
      ul {
        .clearfix;
        li {
          float: left;
          margin-right: 5px;
          .img {
            width: 210px;
            height: 160px;
            text-align: center;
            img {
              height: 100%;
            }
          }
        }
      }
    }
  }
}

//single-join
.single-join {
  .content .cont {
    dl {
      dt {
        strong {
          display: inline-block;
          padding-right: 25px;
          font-size: 14px;
          .background('', 'icon-9.png', no-repeat, right, -4px);
          color: #229F00;
        }
      }
      dd {
        .mail {
          margin-top: 10px;
          display: block;
          text-align: right;
          padding-right: 20px;
          .background('', 'mail.png', no-repeat, right, 50%);
        }
      }
    }
  }
}

//single-sitemap
.single-sitemap {
  .content {
    dl {
      dt {
        margin-top: 10px;
	    border-bottom: 1px #B1B1B1 dashed;
		&:first-child {
		  margin-top: 0;
		}
	    a {
		  display: block;
	      height: 30px;
		  line-height: 30px;
		  font-size: 14px;
		  padding-left: 10px;
		  color: #1F1F1F;
		}
	  }
	  dd {
	    padding-top: 10px;
		ul {
		  .clearfix;
		  li {
		    float: left;
		    margin-right: 10px;
		    a {
		      display: block;
		      padding: 2px 8px;
		      color: #464646;
		      font-size: 14px;
		      &:hover {
		        background: #C11629;
			    color: #fff;
		      }
		    }
		  }
		}
      }
    }
  }
}

//single-friendlinks
.single-friendlinks {
  .content {
    ul {
      .clearfix;
      li {
        float: left;
	margin-right: 10px;
	margin-top: 20px;
      }
    }
    .links-pic {
      li {
        .img {
	  width: 90px;
	  height: 30px;
	  overflow: hidden;
	  text-align: center;
	  line-height: 30px;
	  border: 1px #f1f1f1 solid;
	  img {
	    width: 100%;
	  }
	}
      }
    }
    .links-text {
      margin-top: 20px;
      li {
        a {
	  font-size: 14px;
	  color: #464646;
	}
      }
    }
  }
}

//single-search
.single-search {
  .content {
    ul {
      li {
        height: 30px;
	line-height: 30px;
	border-bottom: 1px #f1f1f1 dashed;
        a {
	  //color: @color-font-weight;
	  font-size: 14px;
	}
      }
    }
  }
}

//list-news
.list-news {
  .box;
  padding-left: 0;
  padding-right: 0;
  .content {
    .boxpad20;
  }
  .position {
    padding-left: 0;
  }
  .cont ul{
    li {
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      .clearfix;
      border-bottom: 1px #cfcfcf dashed;
      a {
        display: block;
        float: left;
        color: #6E6E6E;
        .background('', 'arrow-list.png', no-repeat, left, 13px);
        padding-left: 15px;
        &:hover {
          color: #CF1E1E;
          background-position: left -22px;
        }
      }
      small {
        display: block;
        float: right;
        margin-right: 15px;
        color: #6E6E6E;
      }
    }
  }
}

//list-photo
.list-photo {
  .cont {
    ul {
	    .clearfix;
	    li {
	      float: left;
	      margin-right: 15px;
	      width: 305px;
	      overflow: hidden;
	      &:first-child {
	        margin-left: 0;
	      }
	      .img {
	        width: 305px;
	        height: 255px;
	        overflow: hidden;
	        text-align: center;
	        //background: @color-font-middle;
	        img {
	          height: 100%;
	        }
	      }
	      strong {
	        display: block;
	        color: #FF1515;
	        margin: 10px 0;
	        font-weight: normal;
	        font-size: 16px;
	      }
	      span {
	        display: block;
	        font-size: 14px;
	        line-height: 20px;
	        color: #666666;
	        height: 60px;
	        overflow: hidden;
	      }
	    }
	  }
  }
}

//article-article
.article-article {
  .cont {
    h1 {
      font-size: 18px;
      font-weight: normal;
      text-align: center;
      height: 40px;
      line-height: 40px;
      border-bottom: 1px #b4b4b4 dashed;
    }
    .body {
      padding: 10px;
      line-height: 25px;
    }
  }
}