section hgroup {
  margin-bottom: auto; }

section.header, div._main {
  display: none; }

#banner-sect {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  background: #eee; }
  #banner-sect > ol {
    width: 100%;
    height: 100%;
    position: relative; }
    #banner-sect > ol li {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      color: #fff; }
    #banner-sect > ol li {
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center bottom;
      transition: all 0.5s;
      opacity: 0;
      z-index: 20; }
      #banner-sect > ol li div {
        width: 96rem;
        height: 100%;
        margin: auto;
        box-sizing: border-box;
        padding: 14.0625% 0 0 20.3125%;
        text-shadow: 0 0 2px rgba(0, 0, 0, 0.25); }
        @media (max-width: 1152px) {
          #banner-sect > ol li div {
            width: 100%; } }
        #banner-sect > ol li div h1 {
          line-height: rem1; }
          #banner-sect > ol li div h1 span {
            font-family: 'archiveregular';
            font-size: 2rem;
            line-height: 2.75rem;
            display: block; }
          #banner-sect > ol li div h1 strong {
            font-size: 2.5rem;
            font-weight: 200;
            line-height: 3.25rem;
            margin-top: 0.75rem;
            display: block; }
        #banner-sect > ol li div p {
          margin-top: 0.5rem; }
          #banner-sect > ol li div p span {
            display: block;
            margin-top: 1rem; }
          #banner-sect > ol li div p a {
            display: inline-block;
            float: left;
            color: #fff;
            border: 1px solid #fff;
            border-radius: 3rem;
            padding: 0.25rem 1.5rem;
            box-sizing: border-box;
            line-height: 1.25;
            background: rgba(255, 255, 255, 0.15); }
            #banner-sect > ol li div p a:hover, #banner-sect > ol li div p a:active {
              color: #333;
              background: rgba(255, 255, 255, 0.7); }
      #banner-sect > ol li.current {
        opacity: 1;
        z-index: 30; }
      #banner-sect > ol li div h1 span {
        transition: all 0.7s ease-out;
        transform: translateX(85rem);
        opacity: 0; }
      #banner-sect > ol li.current div h1 span {
        transition: all 0.7s ease-in;
        transform: translateX(0);
        opacity: 1; }
      #banner-sect > ol li div h1 strong {
        transition: all 0.7s ease-out;
        transform: translateX(-60rem);
        opacity: 0; }
      #banner-sect > ol li.current div h1 strong {
        transition: all 0.7s ease-in;
        transform: translateX(0);
        opacity: 1; }
      #banner-sect > ol li div p {
        transition: all 0.7s ease-out;
        transform: translateY(60rem);
        opacity: 0; }
      #banner-sect > ol li.current p {
        transition: all 0.7s ease-in;
        transform: translateY(0);
        opacity: 1; }

#banner-1 {
  background-color: #81b8b3;
  background-image: url(../image/banner1.jpg); }

#banner-2 {
  background-color: #dcc193;
  background-image: url(../image/banner2.jpg); }

#banner-3 {
  background-color: #9e9e9e;
  background-image: url(../image/banner3.jpg); }

#banner-4 {
  background-color: #cb6b38;
  background-image: url(../image/banner4.jpg); }

#banner-5 {
  background-color: #436485;
  background-image: url(../image/banner5.jpg); }

#banner-6 {
  background-color: #4d8d47;
  background-image: url(../image/banner6.jpg); }

#banner-10 {
  background-color: #1287e7;
  background-image: url(../image/banner10.jpg); }

#banner-11 {
  color: #333 !important;
  background-color: #678fa3;
  background-image: url(../image/banner11.jpg); }

#banner-sect .aside {
  width: 13.5rem;
  padding: 1rem 0 1rem 2rem;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -17rem;
  overflow: hidden;
  transition: all 0.3s;
  transform: translateX(12.5rem);
  z-index: 50; }
  #banner-sect .aside:hover {
    transform: translateX(0); }
  #banner-sect .aside ul {
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    cursor: pointer; }
    #banner-sect .aside ul * {
      transition: all 0.3s; }
  #banner-sect .aside li {
    width: 100%;
    height: 5rem;
    position: relative;
    border-bottom: 1px solid #fff; }
    #banner-sect .aside li:before {
      content: "";
      display: block;
      width: 12.5rem;
      height: 5rem;
      position: absolute;
      right: 0;
      top: 0;
      background-color: #f7f7f7;
      z-index: 10;
      transform: translateX(0);
      transition: all 0.5s ease-out; }
    #banner-sect .aside li span {
      position: absolute;
      z-index: 20;
      display: block;
      width: 10rem;
      right: 0;
      top: 0;
      text-align: left;
      line-height: 5rem;
      color: #333; }
  #banner-sect .aside li:hover:before {
    transform: translateX(13rem); }
  #banner-sect .aside li:hover span {
    color: #fff; }
  #banner-sect .aside #er-1 {
    background: #81b8b3; }
  #banner-sect .aside #er-2 {
    background: #dcc193; }
  #banner-sect .aside #er-3 {
    background: #9e9e9e; }
  #banner-sect .aside #er-4 {
    background: #cb6b38; }
  #banner-sect .aside #er-5 {
    background: #436485; }
  #banner-sect .aside #er-6 {
    background: #4d8d47; }

#banner-sect .dot {
  height: 5.5rem;
  width: 100%;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  bottom: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  background-color: #F6D265;
  padding-right: 7rem;
  z-index: 50; }
  #banner-sect .dot:before {
    content: "";
    display: block;
    width: 26.5rem;
    height: 5.5rem;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #fff; }
  #banner-sect .dot .prev, #banner-sect .dot .next {
    display: block;
    width: 1.5rem;
    height: 3rem;
    font-size: 1px;
    text-indent: -9999px;
    transition: all 0.15s linear;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: auto 0.75rem; }
  #banner-sect .dot .prev {
    background-image: url(../image/arrow_l.png);
    background-position: left center;
    margin-left: 1.5rem;
    margin-right: 2rem; }
  #banner-sect .dot .next {
    background-image: url(../image/arrow_r.png);
    background-position: right center;
    margin-right: 1.5rem; }
  #banner-sect .dot .prev:hover {
    width: 3rem;
    margin-left: 0rem; }
  #banner-sect .dot .next:hover {
    width: 3rem;
    margin-right: 0rem; }
  @media (max-width: 600px), (max-height: 600px) {
    #banner-sect .dot {
      height: 4rem; }
      #banner-sect .dot:before {
        width: 20rem;
        height: 4rem; } }

#banner-sect #down {
  position: absolute;
  width: 6rem;
  height: 7rem;
  background-color: #F6D265;
  display: block;
  left: 11rem;
  bottom: 2.5rem;
  text-align: center;
  z-index: 50; }
@keyframes downimg {
  from {
    opacity: 0.3; }
  to {
    transform: translateY(0.5rem);
    opacity: 1; } }
  #banner-sect #down img {
    display: block;
    height: 3rem;
    margin: auto;
    margin-top: 2rem;
    animation-duration: 0.7s;
    animation-name: downimg;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease; }
  @media (max-width: 480px), (max-height: 480px) {
    #banner-sect #down {
      width: 6rem;
      height: 7rem;
      left: 5rem;
      bottom: 1rem;
      transform: scale(0.8); } }

@media (orientation: portrait) {
  #banner-sect {
    height: 0;
    padding-bottom: 90%; }
    #banner-sect > ol > li {
      padding-bottom: 90%; } }
@media (orientation: portrait) and (max-width: 600px), (orientation: landscape) and (max-height: 600px) {
  #banner-sect .aside {
    display: none; } }
section hgroup {
  color: #333; }
  section hgroup h1 {
    font-size: 1rem;
    letter-spacing: 0.25rem; }
    section hgroup h1:before {
      content: "";
      font-size: 3.5rem;
      font-family: 'archiveregular'; }
    section hgroup h1 span {
      font-family: 'archiveregular';
      font-size: 2rem;
      line-height: 2.75rem;
      display: block; }
      section hgroup h1 span:after {
        content: '';
        display: block;
        width: 2.25rem;
        height: 0.25rem;
        background-color: #333;
        margin: 1rem auto 1rem 0; }
    section hgroup h1 strong {
      font-weight: lighter;
      font-size: 1.5rem;
      display: inline-block;
      z-index: 5; }
      section hgroup h1 strong:before {
        content: '';
        display: block;
        width: 100%;
        padding: 0 0.5em;
        height: 1em;
        margin-top: 1rem;
        margin-bottom: -2.5rem;
        margin-left: -0.5em;
        background-color: #cce2ff;
        left: -0.5em; }

#eco-sect {
  background-color: #999;
  position: relative; }
  #eco-sect hgroup {
    position: absolute;
    left: 50%;
    top: 8rem;
    color: #fff;
    margin-left: -23rem;
    z-index: 50;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.2); }
    #eco-sect hgroup h1:before {
      content: "01.";
      position: absolute;
      left: -7rem;
      top: -1.3rem; }
    #eco-sect hgroup span:after {
      background-color: #fff; }
    #eco-sect hgroup strong:before {
      background-color: rgba(204, 226, 255, 0.25); }
  #eco-sect ol {
    width: 100%;
    height: 50rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    background-color: #004199; }
    #eco-sect ol li {
      -webkit-box-flex: 1;
      -webkit-flex: 1 1 33.3333333333%;
      -moz-box-flex: 1;
      -moz-flex: 1 1 33.3333333333%;
      -ms-flex: 1 1 33.3333333333%;
      flex: 1 1 33.3333333333%;
      position: relative;
      overflow: hidden; }
      #eco-sect ol li:before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        transition: all 0.8s linear;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center; }
      #eco-sect ol li:after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 3;
        background: rgba(0, 0, 0, 0.3);
        transition: all 0.8s linear; }
    #eco-sect ol li.i1 {
      background-color: #b79e95; }
      #eco-sect ol li.i1:before {
        background-image: url(../image/eco1.jpg); }
    #eco-sect ol li.i2 {
      background-color: #147aa7; }
      #eco-sect ol li.i2:before {
        background-image: url(../image/eco2.jpg); }
    #eco-sect ol li.i3 {
      background-color: #b86239; }
      #eco-sect ol li.i3:before {
        background-image: url(../image/eco3.jpg); }
    #eco-sect ol li div {
      color: white;
      text-align: left;
      position: absolute;
      left: 50%;
      top: 80%;
      margin-left: -15rem;
      z-index: 5;
      text-shadow: 0 0 3px rgba(0, 0, 0, 0.75);
      font-size: 1.5rem; }
      #eco-sect ol li div:before {
        content: '';
        font-size: 1rem;
        font-family: 'archiveregular';
        color: #fff;
        display: block;
        position: absolute;
        top: -2rem;
        left: 0; }
    #eco-sect ol li.i1 div:before {
      content: '01'; }
    #eco-sect ol li.i2 div:before {
      content: '02'; }
    #eco-sect ol li.i3 div:before {
      content: '03'; }
    #eco-sect ol li:hover:before {
      transform: scale(1.1); }
    #eco-sect ol li:hover:after {
      background: rgba(0, 0, 0, 0); }
  @media (max-width: 1150px) {
    #eco-sect hgroup {
      left: 40rem; }
    #eco-sect ol {
      height: 40rem; }
      #eco-sect ol li div {
        font-size: 1rem;
        margin-left: -9rem; } }
  @media (max-width: 750px) {
    #eco-sect hgroup {
      left: 1rem;
      top: 10%;
      margin-left: 2rem; }
      #eco-sect hgroup h1:before {
        position: static; }
    #eco-sect ol {
      -webkit-flex-wrap: wrap;
      -moz-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      height: 60rem; }
      #eco-sect ol li {
        width: 50%;
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 50%;
        -moz-box-flex: 1;
        -moz-flex: 1 1 50%;
        -ms-flex: 1 1 50%;
        flex: 1 1 50%; }
        #eco-sect ol li div {
          font-size: 1rem; }
      #eco-sect ol li:first-child {
        margin-left: 50%; } }
  @media (max-width: 500px) {
    #eco-sect hgroup {
      top: 1rem;
      margin-left: 0.5rem; } }
  @media (max-width: 500px) and (max-width: 360px) {
    #eco-sect hgroup h1 {
      letter-spacing: 1px; } }
  @media (max-width: 500px) {
    #eco-sect ol {
      display: block;
      height: auto;
      padding-top: 18rem; }
      #eco-sect ol li {
        width: 100%;
        height: 13rem; }
        #eco-sect ol li:before {
          background-position: 50% 30%; }
        #eco-sect ol li div {
          left: 3rem;
          top: auto;
          bottom: 2rem;
          margin-left: 0; }
      #eco-sect ol li:first-child {
        margin-left: 0; } }

#tech-sect {
  position: relative;
  background-image: url(../image/tech_bg.jpg);
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  padding-top: 8rem; }
  #tech-sect hgroup {
    position: absolute;
    left: 50%;
    margin-left: -2rem;
    top: 35rem;
    z-index: 50; }
    #tech-sect hgroup h1:before {
      content: "02.";
      position: absolute;
      left: -7rem;
      top: -1.3rem; }
  #tech-sect:before {
    content: '';
    display: block;
    width: 100%;
    height: 24.5rem;
    background-image: url(../image/tech_head.jpg);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat; }
  #tech-sect div.em24y {
    position: absolute;
    left: 50%;
    top: -8rem;
    color: #fff;
    font-size: 4em;
    margin-left: -5rem;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.25); }
  #tech-sect div.text {
    background-color: #F8F8F8;
    width: 100%;
    height: 19.5rem;
    margin: auto;
    position: relative; }
    #tech-sect div.text p {
      position: absolute;
      width: 13rem;
      line-height: 1.75;
      left: 50%;
      top: 2.5rem;
      margin-left: 17.5rem;
      transition: all 0.5s; }
      #tech-sect div.text p:before {
        content: '';
        width: 18rem;
        height: 25rem;
        display: block;
        position: absolute;
        top: -13rem;
        left: -47.5rem;
        box-shadow: 1.3475177305rem 1.3475177305rem 3.5rem rgba(81, 81, 81, 0.2);
        transition: all 0.5s;
        background-color: #bfd38b;
        background-image: url(../image/head_pic.jpg);
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-position: 0 center; }
      #tech-sect div.text p:hover {
        transition: all 0.5s; }
@keyframes picloop {
  from {
    background-position: 0% center; }
  50% {
    background-position: 100% center; }
  to {
    background-position: 0% center; } }
        #tech-sect div.text p:hover:before {
          transition: all 0.5s;
          animation-duration: 40s;
          animation-name: picloop;
          animation-iteration-count: infinite;
          animation-timing-function: linear; }
  @media (max-width: 780px) {
    #tech-sect hgroup {
      margin-left: 6rem; }
    #tech-sect div.em24y {
      top: -6rem;
      font-size: 3em;
      margin-left: -0rem; }
    #tech-sect div.text {
      height: 28rem; }
      #tech-sect div.text P {
        width: 30rem;
        margin-left: -15rem;
        left: 50%;
        padding-top: 15rem; }
      #tech-sect div.text p:before {
        left: 50%;
        margin-left: -21rem; } }
  @media (max-width: 540px) {
    #tech-sect hgroup {
      margin-left: -5.5rem; }
    #tech-sect div.em24y {
      top: -8rem;
      font-size: 3em;
      margin-left: -12rem; }
    #tech-sect div.text {
      height: 24rem; }
      #tech-sect div.text P {
        width: 90%;
        position: static;
        margin: auto; }
      #tech-sect div.text p:before {
        display: none; } }

#product-sect {
  position: relative;
  background-color: #004199;
  padding: 5rem 0;
  height: 40rem;
  overflow: hidden;
  z-index: 10; }
  #product-sect:before {
    content: "";
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 50%;
    z-index: 1;
    background-color: #fff;
    background-image: url(../image/proc_bg.jpg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100%; }
  #product-sect hgroup {
    position: absolute;
    left: 50%;
    margin-left: -42rem;
    top: 16rem;
    z-index: 5; }
    #product-sect hgroup h1:before {
      content: "03."; }
  #product-sect .proc_list {
    padding: 3.5rem 0 3.5rem 20rem;
    box-sizing: border-box;
    position: absolute;
    z-index: 10;
    left: 50%;
    top: 5rem;
    margin-left: -32rem;
    overflow: hidden; }
    #product-sect .proc_list ol {
      white-space: nowrap;
      transition: transform 0.5s;
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex; }
    #product-sect .proc_list li {
      width: 22.5rem;
      height: 33rem;
      margin-right: 2rem;
      background: #fff;
      text-align: center;
      box-shadow: 0.5319148936rem 0.5319148936rem 2.15rem 0.301rem rgba(70, 83, 91, 0.2);
      transition: opacity 0.3s; }
      #product-sect .proc_list li img {
        width: 22.5rem;
        height: 19rem; }
      #product-sect .proc_list li h2 {
        font-size: 1.5rem;
        font-weight: normal;
        letter-spacing: 0.1rem;
        margin-top: 2.5rem;
        line-height: 1; }
      #product-sect .proc_list li p {
        color: #999;
        margin-top: 1.5rem;
        font-weight: lighter;
        line-height: 1; }
      #product-sect .proc_list li span {
        display: inline-block;
        margin-top: 2rem;
        line-height: 1;
        position: relative;
        border-radius: 5rem;
        overflow: hidden; }
        #product-sect .proc_list li span a {
          color: #333;
          display: block;
          padding: 0.75rem 4rem 0.75rem 2rem;
          position: relative;
          z-index: 10;
          border: 1px solid #333;
          border-radius: 5rem;
          background-image: url(../image/more.png);
          background-repeat: no-repeat;
          background-position: right center;
          background-size: auto 0.75rem;
          background-position: 80% center; }
        #product-sect .proc_list li span:after {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          background: #eaf3ff;
          z-index: 5;
          border-radius: 5rem;
          left: 0;
          top: 0;
          transition: all 0.3s;
          transform: translateX(-100%); }
      #product-sect .proc_list li span:hover:after {
        transform: translateX(0); }
    #product-sect .proc_list li.past {
      opacity: 0; }
    #product-sect .proc_list li.more {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      justify-content: center;
      background-image: url(../image/allproc.jpg);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      background-position: center center; }
      #product-sect .proc_list li.more span a {
        padding: 1.25rem 4rem 1rem 2rem;
        background-position: 75% center;
        background-color: rgba(255, 255, 255, 0.8); }
  #product-sect .nav {
    margin-top: 1.5rem; }
    #product-sect .nav .prev, #product-sect .nav .next {
      display: inline-block;
      width: 1.5rem;
      height: 2rem;
      font-size: 1px;
      text-indent: -9999px;
      transition: all 0.15s linear;
      cursor: pointer;
      opacity: 0.5;
      margin-right: 1.5rem;
      background-repeat: no-repeat;
      background-size: auto 0.75rem; }
      #product-sect .nav .prev:hover, #product-sect .nav .next:hover {
        width: 3rem;
        opacity: 1; }
    #product-sect .nav .prev {
      background-image: url(../image/arrow_l.png);
      background-position: left center; }
    #product-sect .nav .next {
      background-image: url(../image/arrow_r.png);
      background-position: right center; }
    #product-sect .nav .prev:hover {
      margin-left: 0rem; }
    #product-sect .nav .next:hover {
      margin-right: 0rem; }
  @media (max-width: 1150px) {
    #product-sect:before {
      width: 480px;
      height: 100%;
      top: 0;
      right: auto;
      left: 0; }
    #product-sect hgroup {
      left: 2rem;
      margin-left: 0; }
    #product-sect .proc_list {
      left: 480px; } }
  @media (max-width: 750px) {
    #product-sect {
      height: 49rem; }
      #product-sect:before {
        width: 450px;
        right: auto;
        left: 0; }
      #product-sect hgroup {
        left: 10rem;
        top: 4rem; }
        #product-sect hgroup h1:before {
          position: absolute;
          left: -7rem;
          top: -1.3rem; }
      #product-sect .proc_list {
        left: 265px;
        top: 16rem; } }
  @media (max-width: 500px) {
    #product-sect {
      height: 49rem; }
      #product-sect:before {
        width: 100%;
        right: auto;
        left: 0; }
      #product-sect hgroup {
        left: 7.5rem;
        top: 3.5rem; }
      #product-sect .proc_list {
        left: 170px;
        top: 16rem; } }
  @media (max-width: 380px) {
    #product-sect h1 {
      letter-spacing: 1px; } }
  @media (max-width: 350px) {
    #product-sect h1 {
      letter-spacing: 0px; } }

#number-sect {
  position: relative;
  overflow: hidden;
  padding: 4rem;
  box-shadow: 0 0 2rem -0.5rem rgba(70, 83, 91, 0.15);
  z-index: 20;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center; }
  #number-sect hgroup {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -moz-order: 2;
    -ms-flex-order: 2;
    order: 2;
    text-align: right;
    z-index: 5;
    margin-left: 8rem; }
    #number-sect hgroup h1:before {
      content: "04."; }
    #number-sect hgroup h1 span:after {
      margin: 1rem 0.25rem 1rem auto; }
  #number-sect ol {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -moz-order: 1;
    -ms-flex-order: 1;
    order: 1; }
    #number-sect ol li {
      display: inline-block;
      border-right: 2px solid #f2f2f2;
      padding: 1.5rem 2.5rem;
      text-align: center; }
      #number-sect ol li:last-child {
        border-right: 0; }
      #number-sect ol li strong {
        font-weight: normal;
        display: block;
        line-height: 1; }
        #number-sect ol li strong em {
          font-family: 'archiveregular';
          font-style: normal;
          font-size: 4rem;
          letter-spacing: -0.15rem;
          margin-right: 0.25rem; }
  @media (max-width: 920px) {
    #number-sect {
      padding: 4rem 0; }
      #number-sect hgroup {
        margin-left: 4rem; }
      #number-sect ol li {
        padding: 1.5rem; } }
  @media (max-width: 720px) {
    #number-sect {
      display: block;
      text-algn: center; }
      #number-sect hgroup {
        text-align: center;
        position: relative;
        left: -2rem;
        margin-bottom: 2rem; }
        #number-sect hgroup h1 span:after {
          margin-left: auto;
          margin-right: auto; }
      #number-sect ol {
        width: 40rem;
        margin: auto;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        -moz-justify-content: space-between;
        justify-content: space-between; }
      #number-sect ol li {
        display: block;
        padding: 1rem 1rem;
        border: 0; } }
  @media (max-width: 500px) {
    #number-sect ol {
      -webkit-flex-wrap: wrap;
      -moz-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      width: 100%; }
    #number-sect ol li {
      width: 50%;
      padding: 1rem 0; } }

#service-sect {
  position: relative;
  z-index: 10;
  padding-top: 50%; }
  #service-sect hgroup {
    position: absolute;
    right: 50%;
    top: 5rem;
    margin-right: 15rem; }
    #service-sect hgroup h1:before {
      content: "05."; }
  #service-sect:after {
    content: "";
    position: absolute;
    width: 50%;
    height: 100%;
    left: 50%;
    top: 0;
    z-index: 1;
    background-image: url(../image/service_img.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% auto; }
  #service-sect:before {
    content: "";
    position: absolute;
    width: 50%;
    height: 100%;
    left: 0;
    bottom: 0;
    z-index: 1;
    background-image: url(../image/service_img-02.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% auto; }
  #service-sect > div {
    width: 25%;
    padding-bottom: 25%;
    position: relative;
    margin: 0 0 0 25%;
    text-align: center;
    z-index: 10;
    background: #fff; }
    #service-sect > div div {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0; }
    #service-sect > div:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      left: 100%;
      top: 0;
      background-image: url(../image/service_img-03.jpg);
      background-repeat: no-repeat;
      background-position: left top;
      background-size: 100% auto; }
    #service-sect > div:after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      left: 200%;
      top: 0;
      background-image: url(../image/service_img-05.jpg);
      background-repeat: no-repeat;
      background-position: left bottom;
      background-size: 100% auto; }
    #service-sect > div h2 {
      font-weight: lighter;
      font-size: 1.5rem;
      display: inline-block;
      margin-top: 6rem; }
      #service-sect > div h2:before {
        content: '';
        display: block;
        width: 100%;
        padding: 0 0.5em;
        height: 1em;
        margin-top: 1rem;
        margin-bottom: -2.5rem;
        margin-left: -0.5em;
        background-color: #cce2ff;
        left: -0.5em; }
    #service-sect > div p {
      color: #666;
      margin-top: 1.5rem; }
      #service-sect > div p span {
        display: block;
        margin: 0 auto;
        line-height: 2; }
        #service-sect > div p span:after {
          display: none; }
    #service-sect > div span {
      display: inline-block;
      margin-top: 2rem;
      line-height: 1;
      position: relative;
      border-radius: 5rem;
      overflow: hidden; }
      #service-sect > div span a {
        color: #333;
        display: block;
        padding: 0.75rem 4rem 0.75rem 2rem;
        position: relative;
        z-index: 10;
        border: 1px solid #333;
        border-radius: 5rem;
        background-image: url(../image/more.png);
        background-repeat: no-repeat;
        background-position: right center;
        background-size: auto 0.75rem;
        background-position: 70% center; }
      #service-sect > div span:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: #eaf3ff;
        z-index: 5;
        border-radius: 5rem;
        left: 0;
        top: 0;
        transition: all 0.3s;
        transform: translateX(-100%); }
    #service-sect > div span:hover:after {
      transform: translateX(0); }
  @media (max-width: 1150px) {
    #service-sect {
      padding-bottom: 24rem;
      overflow: hidden; }
      #service-sect > div {
        width: 24rem;
        height: 24rem;
        margin: 0;
        padding: 0;
        position: absolute;
        left: 50%;
        margin-left: -24rem; } }
  @media (max-width: 860px) {
    #service-sect hgroup {
      right: auto;
      left: 3rem;
      margin-right: 0; }
    #service-sect > div {
      width: 50%;
      height: 24rem;
      left: 50%;
      margin-left: 0; }
      #service-sect > div:after, #service-sect > div:before {
        display: none; } }
  @media (max-width: 600px) {
    #service-sect {
      padding-top: 18rem;
      padding-bottom: 0; }
      #service-sect:before {
        width: 100%;
        height: 20rem;
        background-position: center center;
        background-size: cover; }
      #service-sect:after {
        display: none; }
      #service-sect hgroup {
        right: auto;
        left: 9.5rem;
        margin-right: 0; }
        #service-sect hgroup h1:before {
          position: absolute;
          left: -7rem;
          top: -1.3rem; }
      #service-sect > div {
        position: relative;
        width: 100%;
        height: 20rem;
        text-align: right;
        padding-right: 4rem;
        box-sizing: border-box;
        left: 0;
        margin-left: 0;
        background: transparent;
        background: rgba(255, 255, 255, 0.72); }
        #service-sect > div div {
          position: static; }
          #service-sect > div div h2 {
            margin-top: 3rem; }
          #service-sect > div div p {
            margin-right: -1rem; }
        #service-sect > div:after, #service-sect > div:before {
          display: none; } }

#news-sect {
  position: relative;
  z-index: 10; }
  #news-sect hgroup {
    position: absolute;
    left: 50%;
    margin-left: -4rem;
    top: 4rem;
    z-index: 50; }
    #news-sect hgroup h1:before {
      content: "05.";
      position: absolute;
      left: -7rem;
      top: -1.3rem; }
  #news-sect > div {
    max-width: 72rem;
    margin: auto;
    padding-top: 15rem;
    padding-bottom: 5rem;
    text-align: center; }
    #news-sect > div ul {
      margin-bottom: 3rem; }
    #news-sect > div li {
      /*display: inline-block;*/
      display: table-cell;
      vertical-align: top;
      width: 33.3333333333%;
      box-sizing: border-box;
      padding: 0 2rem;
      text-align: left; }
      #news-sect > div li img {
        width: 100%; }
      #news-sect > div li span {
        font-size: 1.25rem;
        display: block;
        margin-top: 1rem;
        margin-bottom: 1rem; }
    #news-sect > div > span {
      display: inline-block;
      line-height: 1;
      position: relative;
      border-radius: 5rem;
      overflow: hidden; }
      #news-sect > div > span a {
        color: #333;
        display: block;
        padding: 0.75rem 4rem 0.75rem 2rem;
        position: relative;
        z-index: 10;
        border: 1px solid #333;
        border-radius: 5rem;
        background-image: url(../image/more.png);
        background-repeat: no-repeat;
        background-position: right center;
        background-size: auto 0.75rem;
        background-position: 80% center; }
      #news-sect > div > span:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: #eaf3ff;
        z-index: 5;
        border-radius: 5rem;
        left: 0;
        top: 0;
        transition: all 0.3s;
        transform: translateX(-100%); }
    #news-sect > div span:hover:after {
      transform: translateX(0); }
  @media (max-width: 600px) {
    #news-sect ul {
      margin: auto; }
    #news-sect > div li {
      display: block;
      width: 320px;
      margin: auto;
      margin-bottom: 2em; } }

/*# sourceMappingURL=index.css.map */