@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Caveat");
@import url("https://fonts.googleapis.com/css?family=Asap");
html,
body {
  width: 100%;
  min-height: 100%;
  height: auto;
  padding: 0px;
  margin: 0px;
  text-align: left;
  overflow: visible;
  font-size: 16px;
  color: #0f0f0f;
  background-color: #ffffff;
  line-height: 2;
  font-family: 'Asap' , '微軟正黑體' , sans-serif;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  .pace:after {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 120, 212, 0.8);
    z-index: 99999;
    display: block; }

.pace-inactive {
  display: none; }

.pace .pace-progress {
  background: #0078D4;
  position: fixed;
  z-index: 200000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 3px; }

/*共用屬性*/
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

* {
  -webkit-overflow-scrolling: touch; }

a {
  text-decoration: none;
  color: inherit; }

a:active, a:hover {
  outline: none; }

img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto; }

input[type="text"] {
  -webkit-appearance: none;
  border-radius: 0; }

/*泛用表格*/
.t {
  display: table; }
  .t > .t-row {
    display: table-row; }
    .t > .t-row > .t-cell {
      display: table-cell;
      vertical-align: middle;
      border-collapse: collapse;
      margin: 0;
      padding: 0; }

/*定義區塊*/
.container {
  margin: auto;
  position: relative;
  z-index: 100;
  width: 1180px;
  max-width: 100%;
  padding-left: 10px;
  padding-right: 10px; }

.row {
  margin-left: -10px;
  margin-right: -10px; }

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  position: relative;
  min-height: 1px;
  float: left;
  padding-left: 10px;
  padding-right: 10px; }

.col-12 {
  width: 100%; }

.col-11 {
  width: 91.66666667%; }

.col-10 {
  width: 83.33333333%; }

.col-9 {
  width: 75%; }

.col-8 {
  width: 66.66666667%; }

.col-7 {
  width: 58.33333333%; }

.col-6 {
  width: 50%; }

.col-5 {
  width: 41.66666667%; }

.col-4 {
  width: 33.33333333%; }

.col-3 {
  width: 25%; }

.col-2 {
  width: 16.66666667%; }

.col-1 {
  width: 8.33333333%; }

.pic {
  position: relative;
  font-size: 0;
  width: 100%;
  height: 0;
  display: block; }
  .pic > span {
    width: 100%;
    height: 100%;
    position: absolute;
    text-align: center;
    top: 0;
    left: 0; }
    .pic > span:before {
      content: ' ';
      display: inline-block;
      height: 100%;
      width: 0;
      vertical-align: middle; }
    .pic > span > img, .pic > span > iframe {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      display: inline-block;
      vertical-align: middle; }
    .pic > span > iframe {
      width: 100%;
      height: 100%; }

.cf:after,
.row:after,
dl:after {
  display: block;
  height: 0;
  clear: both;
  content: "";
  visibility: hidden; }

.bg_img {
  background-position: 50% 50%;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat; }

.editor {
  word-break: break-all;
  /* Begin bidirectionality settings (do not change) */ }
  .editor i {
    font-style: italic; }
  .editor em, .editor b, .editor strong {
    font-weight: bold; }
  .editor img {
    height: auto !important; }
  .editor html, .editor address, .editor blockquote, .editor body, .editor dd, .editor div, .editor dl, .editor dt, .editor fieldset, .editor form,
  .editor frame, .editor frameset, .editor h1, .editor h2, .editor h3, .editor h4, .editor h5, .editor h6, .editor noframes, .editor ol, .editor p, .editor ul, .editor center,
  .editor dir, .editor hr, .editor menu, .editor pre {
    display: block; }
  .editor li {
    display: list-item; }
  .editor head {
    display: none; }
  .editor table {
    display: table; }
  .editor tr {
    display: table-row; }
  .editor thead {
    display: table-header-group; }
  .editor tbody {
    display: table-row-group; }
  .editor tfoot {
    display: table-footer-group; }
  .editor col {
    display: table-column; }
  .editor colgroup {
    display: table-column-group; }
  .editor td, .editor th {
    display: table-cell; }
  .editor caption {
    display: table-caption; }
  .editor th {
    font-weight: bolder;
    text-align: center; }
  .editor caption {
    text-align: center; }
  .editor body {
    margin: 8px; }
  .editor h1 {
    font-size: 2em;
    margin: .67em 0; }
  .editor h2 {
    font-size: 1.5em;
    margin: .75em 0; }
  .editor h3 {
    font-size: 1.17em;
    margin: .83em 0; }
  .editor h4, .editor p, .editor blockquote, .editor ul, .editor fieldset, .editor form, .editor ol, .editor dl, .editor dir, .editor menu {
    margin: 1.12em 0; }
  .editor h5 {
    font-size: .83em;
    margin: 1.5em 0; }
  .editor h6 {
    font-size: .75em;
    margin: 1.67em 0; }
  .editor h1, .editor h2, .editor h3, .editor h4, .editor h5, .editor h6, .editor b, .editor strong {
    font-weight: bolder; }
  .editor blockquote {
    margin-left: 40px;
    margin-right: 40px; }
  .editor i, .editor cite, .editor em, .editor var, .editor address {
    font-style: italic; }
  .editor pre, .editor tt, .editor code, .editor kbd, .editor samp {
    font-family: monospace; }
  .editor pre {
    white-space: pre; }
  .editor button, .editor textarea, .editor input, .editor select {
    display: inline-block; }
  .editor big {
    font-size: 1.17em; }
  .editor small, .editor sub, .editor sup {
    font-size: .83em; }
  .editor sub {
    vertical-align: sub; }
  .editor sup {
    vertical-align: super; }
  .editor table {
    border-spacing: 2px; }
  .editor thead, .editor tbody, .editor tfoot {
    vertical-align: middle; }
  .editor td, .editor th {
    vertical-align: inherit; }
  .editor s, .editor strike, .editor del {
    text-decoration: line-through; }
  .editor hr {
    border: 1px inset; }
  .editor ol, .editor ul, .editor dir, .editor menu, .editor dd {
    margin-left: 40px; }
  .editor ol {
    list-style-type: decimal; }
  .editor ol ul, .editor ul ol, .editor ul ul, .editor ol ol {
    margin-top: 0;
    margin-bottom: 0; }
  .editor u, .editor ins {
    text-decoration: underline; }
  .editor br:before {
    content: "\A"; }
  .editor :before, .editor :after {
    white-space: pre-line; }
  .editor center {
    text-align: center; }
  .editor :link, .editor :visited {
    text-decoration: underline; }
  .editor :focus {
    outline: thin dotted invert; }
  .editor BDO[DIR="ltr"] {
    direction: ltr;
    unicode-bidi: bidi-override; }
  .editor BDO[DIR="rtl"] {
    direction: rtl;
    unicode-bidi: bidi-override; }
  .editor *[DIR="ltr"] {
    direction: ltr;
    unicode-bidi: embed; }
  .editor *[DIR="rtl"] {
    direction: rtl;
    unicode-bidi: embed; }
  @media print {
    .editor h1 {
      page-break-before: always; }
    .editor h1, .editor h2, .editor h3, .editor h4, .editor h5, .editor h6 {
      page-break-after: avoid; }
    .editor ul, .editor ol, .editor dl {
      page-break-before: avoid; } }

header {
  position: absolute;
  z-index: 999;
  width: 100%; }
  header .header_container {
    width: 100%;
    padding: 30px 30px 0 0;
    position: relative;
    z-index: 999; }
  header .logo {
    float: left;
    width: 180px;
    display: block;
    padding-left: 40px; }
  header .menu {
    float: right;
    width: calc(100% - 180px);
    display: block;
    text-align: right; }
    header .menu li {
      display: inline-block;
      vertical-align: top;
      padding: 0 20px; }
      header .menu li a {
        width: 130px;
        height: 130px;
        display: block;
        vertical-align: middle;
        border: 3px #fff transparent;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0);
        text-align: center;
        padding-top: 20px; }
        header .menu li a:hover {
          border: 3px #fff solid;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.2); }
    header .menu .active a {
      width: 130px;
      height: 130px;
      display: block;
      vertical-align: middle;
      border-radius: 50%;
      text-align: center;
      padding-top: 20px;
      border: 3px #fff solid;
      background: rgba(255, 255, 255, 0.2); }
  header:after {
    display: block;
    height: 0;
    clear: both;
    content: "";
    visibility: hidden; }

.button {
  clear: both; }
  .button span {
    display: inline-block; }
  .button a {
    display: block;
    border: 1px #0078D4 solid;
    border-radius: 20px;
    color: #0078D4;
    background: #fff;
    padding: 5px 30px;
    -webkit-box-shadow: 0px 5px #0078D4;
    box-shadow: 0px 5px #0078D4;
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear; }
    .button a:hover {
      -webkit-box-shadow: 0px 0px #0078D4;
      box-shadow: 0px 0px #0078D4;
      -webkit-transition: all .2s linear;
      -o-transition: all .2s linear;
      transition: all .2s linear; }

@font-face {
  font-family: 'mamelon';
  font-style: normal;
  src: url("../webfonts/Mamelon.otf"); }

.pagination {
  text-align: center;
  padding-bottom: 100px; }
  .pagination li {
    display: inline-block;
    color: #0078D4;
    width: 28px;
    height: 28px;
    line-height: 1.5rem; }
  .pagination .active {
    border: 1px solid #0078D4;
    border-radius: 50%; }

#gotop {
  position: fixed;
  right: 10px;
  bottom: 5rem;
  padding: 1rem;
  cursor: pointer;
  z-index: 998;
  -webkit-transition: .3s ease;
  -o-transition: .3s ease;
  transition: .3s ease; }
  #gotop.show {
    opacity: 1;
    visibility: visible;
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease; }

.display_mobile {
  display: none; }

.display_pc {
  display: block; }

footer {
  clear: both;
  background: url("../_img/layout/footer_bg.jpg") no-repeat;
  background-size: cover;
  color: #fff; }
  footer .col-5 {
    text-align: right;
    padding: 50px 100px 0 0; }
  footer .footer_infor_wrapper {
    padding: 1rem 0 5rem; }
    footer .footer_infor_wrapper figure {
      display: inline-block; }
    footer .footer_infor_wrapper .footer_infor {
      display: inline-block;
      background: url("../_img/layout/footer_rainbow.png") right top no-repeat;
      padding: 50px 50px 0 0; }
    footer .footer_infor_wrapper .footer_tel {
      font-family: 'Caveat', cursive;
      font-size: 50px;
      line-height: 3.5rem; }
      footer .footer_infor_wrapper .footer_tel i {
        font-size: 30px; }
    footer .footer_infor_wrapper .p_padding {
      padding-left: 30px;
      line-height: 2rem; }
  footer .copyright {
    color: #0078D4;
    display: block;
    background: #FFC1C1;
    text-align: center;
    padding: .5rem 0;
    font-size: 14px; }
  footer a:hover {
    opacity: .7; }

#index #banner {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1; }
  #index #banner .bg_img {
    padding-bottom: 56%;
    height: 0;
    display: block;
    background-size: cover; }
  #index #banner .slider {
    width: 100%;
    height: 100%;
    z-index: 1; }
  #index #banner .slick-slider {
    margin: 0; }
  #index #banner .slick-dots {
    bottom: 30px; }
    #index #banner .slick-dots li {
      margin: 0 30px; }
      #index #banner .slick-dots li button:before {
        content: '';
        display: inline-block;
        width: 50px;
        height: 10px;
        border-radius: 10px;
        border: 2px #fff solid;
        opacity: 1; }
    #index #banner .slick-dots .slick-active button:before {
      content: '';
      background: #fff;
      display: inline-block;
      width: 50px;
      height: 10px;
      border-radius: 10px;
      border: 2px #fff solid;
      opacity: 1; }

#index #index_photo_album_wrapper {
  background: url("../_img/index/index_bg.jpg") center top no-repeat;
  text-align: center;
  padding: 1rem 0 2rem; }
  #index #index_photo_album_wrapper .index_photo_album {
    margin: auto;
    position: relative;
    z-index: 100;
    width: 80%;
    max-width: 100%;
    padding-bottom: 30px; }
    #index #index_photo_album_wrapper .index_photo_album li a {
      display: block;
      position: relative;
      width: 270px; }
      #index #index_photo_album_wrapper .index_photo_album li a .mask {
        position: absolute;
        background: rgba(255, 193, 193, 0.9);
        border-radius: 50%;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        color: #0078D4;
        padding: 80px 30px;
        opacity: 0; }
        #index #index_photo_album_wrapper .index_photo_album li a .mask:hover {
          opacity: 1; }
      #index #index_photo_album_wrapper .index_photo_album li a .photo_img {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1; }
    #index #index_photo_album_wrapper .index_photo_album li img {
      border: 7px #FFC1C1 solid;
      border-radius: 50%; }
    #index #index_photo_album_wrapper .index_photo_album .slick-prev, #index #index_photo_album_wrapper .index_photo_album .slick-next {
      width: 50px;
      height: 50px;
      opacity: 1;
      z-index: 500;
      top: 48%; }
      #index #index_photo_album_wrapper .index_photo_album .slick-prev:before, #index #index_photo_album_wrapper .index_photo_album .slick-next:before {
        font-family: 'Font Awesome 5 Pro';
        width: 50px;
        height: 50px;
        border-radius: 50%;
        font-size: 16px;
        line-height: 2rem;
        display: block;
        z-index: 500;
        color: #fff; }
    #index #index_photo_album_wrapper .index_photo_album .slick-prev {
      left: -5%; }
      #index #index_photo_album_wrapper .index_photo_album .slick-prev:before {
        content: '';
        background: url("../_img/index/arrow_prev.png") center top no-repeat; }
    #index #index_photo_album_wrapper .index_photo_album .slick-next {
      right: -5%; }
      #index #index_photo_album_wrapper .index_photo_album .slick-next:before {
        content: '';
        background: url("../_img/index/arrow_next.png") center top no-repeat; }
    #index #index_photo_album_wrapper .index_photo_album:after {
      display: block;
      height: 0;
      clear: both;
      content: "";
      visibility: hidden; }

#index #index_news {
  background: #F6F6F6;
  padding: 3rem 0; }
  #index #index_news figure {
    padding-bottom: 1rem; }
  #index #index_news .index_news_title {
    text-align: center;
    padding-top: 50px; }
  #index #index_news .index_news_wrapper {
    background: url("../_img/index/new_bg.png") center top no-repeat;
    padding: 50px 190px;
    min-height: 400px; }
    #index #index_news .index_news_wrapper h6 {
      color: #0078D4;
      text-align: center;
      padding-bottom: 1rem; }

#page_banner {
  padding: 3rem 0;
  min-height: 700px; }
  #page_banner .page_title {
    width: 90%;
    margin: auto; }
    #page_banner .page_title span {
      display: inline-block; }
  #page_banner h2 {
    color: #FFEE00;
    font-family: 'mamelon';
    font-size: 93px;
    padding-top: 300px; }
  #page_banner h3 {
    font-family: 'Asap';
    font-size: 46px;
    color: #fff;
    line-height: 1rem;
    text-align: center; }

.about_banner {
  background: url(../_img/about/banner.jpg) top center no-repeat;
  background-size: cover; }

.news_banner {
  background: url(../_img/news/banner.jpg) top center no-repeat;
  background-size: cover; }

.environment_banner {
  background: url(../_img/environment/banner.jpg) top center no-repeat;
  background-size: cover; }

.photos_banner {
  background: url(../_img/sidelights/banner.jpg) top center no-repeat;
  background-size: cover; }

.intro_banner {
  background: url(../_img/intro/banner.jpg) top center no-repeat;
  background-size: cover; }

.contact_banner {
  background: url(../_img/contact/banner.jpg) top center no-repeat;
  background-size: cover; }

#about .intro1 {
  background: url("../_img/about/bg01.jpg") #F6F6F6 center top no-repeat;
  text-align: center;
  padding: 10rem 0;
  font-size: 20px; }

#about .intro2 {
  background: url("../_img/about/bg02.jpg") center top no-repeat;
  text-align: center;
  padding: 5rem 0 10rem; }
  #about .intro2 .about_img li {
    display: inline-block; }
  #about .intro2 .about_infor {
    font-size: 0;
    margin-top: 3rem; }
    #about .intro2 .about_infor li {
      font-size: 22px;
      display: inline-block;
      vertical-align: middle;
      width: 50%;
      text-align: left;
      margin-bottom: 3rem; }
      #about .intro2 .about_infor li i {
        border-radius: 50%;
        width: 48px;
        height: 48px;
        text-align: center;
        vertical-align: middle;
        line-height: 3rem;
        margin-right: 1rem; }

.i_pink {
  color: #FF5CB3;
  border: 1px solid #FF5CB3; }

.i_green {
  color: #71D890;
  border: 1px solid #71D890; }

.i_red {
  color: #D1283D;
  border: 1px solid #D1283D; }

.i_orange {
  color: #FEC27E;
  border: 1px solid #FEC27E; }

#news .news_bg {
  background: url("../_img/news/bg.jpg") center top; }

#news .news_detail_bg {
  background: url("../_img/news/bg_repeat.jpg") center top;
  padding: 80px 0; }
  #news .news_detail_bg .eidtor {
    padding-bottom: 50px; }

#news .news_title {
  padding: 80px 0;
  font-size: 0; }
  #news .news_title li {
    width: 20%;
    display: inline-block;
    opacity: .3; }
    #news .news_title li:hover {
      opacity: 1; }
  #news .news_title .active {
    opacity: 1; }

#news .news_list {
  font-size: 0; }
  #news .news_list ul {
    font-size: 1rem;
    width: calc(100% / 3);
    display: inline-block;
    vertical-align: top;
    color: #0078D4;
    padding: 0 10px 130px; }
    #news .news_list ul .news_img {
      border: 7px solid #D3DDFF; }

#news .news_detail_title {
  color: #0078D4; }

#environment h4 {
  font-size: 32px;
  font-family: 'mamelon';
  background: #FFC1C1; }

#environment .environment1 {
  background: url(../_img/layout/bg_grid.png) top center;
  text-align: center;
  padding: 3rem 0; }

#environment .environment2 {
  width: 80%;
  margin: auto;
  padding-bottom: 3rem; }

#environment .environment3 {
  background: url(../_img/environment/bg_gray.jpg) top center;
  text-align: center; }
  #environment .environment3 ul {
    padding: 3rem 0; }
    #environment .environment3 ul li {
      padding: 1rem 0; }

#environment .environment4, #environment .environment5 {
  display: none; }

#photos .photo_bg {
  background: url("../_img/layout/bg_grid.png") center top; }

#photos .photo_detail_bg {
  background: url("../_img/sidelights/bg2.jpg") center top;
  background-size: cover; }

#photos .photo_title {
  padding: 80px 0;
  font-size: 0;
  text-align: center; }
  #photos .photo_title li {
    width: calc(100% / 3);
    display: inline-block;
    opacity: .3; }
    #photos .photo_title li:hover {
      opacity: 1; }
  #photos .photo_title .active {
    opacity: 1; }

#photos .photo_album_wrapper {
  width: 80%;
  margin: auto; }
  #photos .photo_album_wrapper .photo_item {
    text-align: center;
    padding: 0 0 3rem 0;
    font-size: 0; }
    #photos .photo_album_wrapper .photo_item li {
      display: inline-block;
      font-size: 1rem;
      margin: 1rem;
      opacity: .3; }
      #photos .photo_album_wrapper .photo_item li a {
        display: block;
        border: 1px #0078D4 solid;
        border-radius: 20px;
        color: #0078D4;
        background: #fff;
        padding: 5px 30px;
        -webkit-box-shadow: 0px 5px #0078D4;
        box-shadow: 0px 5px #0078D4;
        -webkit-transition: all .2s linear;
        -o-transition: all .2s linear;
        transition: all .2s linear; }
      #photos .photo_album_wrapper .photo_item li:hover {
        opacity: 1; }
    #photos .photo_album_wrapper .photo_item .active {
      opacity: 1; }
  #photos .photo_album_wrapper .photo_album {
    position: relative;
    z-index: 100;
    padding-bottom: 30px;
    font-size: 0;
    background: url("../_img/sidelights/bg.png") center top; }
    #photos .photo_album_wrapper .photo_album li {
      width: 20%;
      display: inline-block;
      font-size: 1rem;
      margin-bottom: 2rem;
      text-align: center; }
      #photos .photo_album_wrapper .photo_album li a {
        display: block;
        position: relative;
        width: 270px; }
        #photos .photo_album_wrapper .photo_album li a .mask {
          position: absolute;
          background: rgba(255, 193, 193, 0.9);
          border-radius: 50%;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 1000;
          color: #0078D4;
          padding: 80px 30px;
          opacity: 0; }
          #photos .photo_album_wrapper .photo_album li a .mask:hover {
            opacity: 1; }
        #photos .photo_album_wrapper .photo_album li a .photo_img {
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          z-index: 1; }
      #photos .photo_album_wrapper .photo_album li img {
        border: 7px #FFC1C1 solid;
        border-radius: 50%; }
  #photos .photo_album_wrapper .photo_album_title {
    color: #0078D4;
    padding: 3rem 1rem;
    font-size: 0; }
    #photos .photo_album_wrapper .photo_album_title .teacher {
      display: block;
      border: 1px #0078D4 solid;
      border-radius: 20px;
      color: #0078D4;
      text-align: center;
      background: #fff;
      padding: 5px 30px;
      -webkit-box-shadow: 0px 5px #0078D4;
      box-shadow: 0px 5px #0078D4;
      -webkit-transition: all .2s linear;
      -o-transition: all .2s linear;
      transition: all .2s linear; }
    #photos .photo_album_wrapper .photo_album_title .title_left {
      width: 180px;
      display: inline-block;
      vertical-align: middle;
      font-size: 1rem; }
    #photos .photo_album_wrapper .photo_album_title .title_right {
      width: calc(100% - 180px);
      display: inline-block;
      vertical-align: middle;
      font-size: 1rem;
      padding-left: 20px; }
  #photos .photo_album_wrapper .photo_detail {
    font-size: 0; }
    #photos .photo_album_wrapper .photo_detail li {
      width: calc( 100% / 3);
      display: inline-block;
      font-size: 1rem;
      padding: 1rem 1rem  3rem; }
      #photos .photo_album_wrapper .photo_detail li img {
        border: 5px solid #D3DDFF; }

#intro h4 {
  font-size: 32px;
  font-family: 'mamelon';
  background: #FFC1C1; }

#intro .intro1 {
  background: url(../_img/layout/bg_grid.png) top center;
  text-align: center;
  padding: 3rem 0; }
  #intro .intro1 img {
    padding: 2rem 0; }

#intro .intro2 {
  padding: 3rem 0;
  background: url(../_img/environment/bg_gray.jpg) top center;
  text-align: center; }
  #intro .intro2 ul {
    width: 86%;
    margin: auto; }
    #intro .intro2 ul li {
      vertical-align: middle; }
    #intro .intro2 ul .pdtop {
      padding-top: 7rem; }

#intro .intro3 {
  display: none; }

#contact .contact_container {
  background: url(../_img/layout/bg_grid.png) top center;
  padding: 7rem 0 2rem; }
  #contact .contact_container .contact_form {
    color: #0078D4;
    border: 1px #0078D4 solid;
    border-radius: 10px;
    background: rgba(248, 248, 248, 0.6);
    padding: 2rem 3rem;
    positon: relative; }
    #contact .contact_container .contact_form:before {
      content: '';
      width: 167px;
      height: 85px;
      position: absolute;
      right: 50px;
      top: -50px;
      display: block;
      background: url(../_img/contact/img2.png) top center; }
    #contact .contact_container .contact_form:after {
      content: '';
      width: 88px;
      height: 120px;
      position: absolute;
      bottom: 0;
      left: -20px;
      display: block;
      background: url(../_img/contact/img3.png) top center no-repeat;
      background-size: contain; }
    #contact .contact_container .contact_form .form_figure {
      positon: relative; }
      #contact .contact_container .contact_form .form_figure:after {
        content: '';
        width: 163px;
        height: 228px;
        position: absolute;
        bottom: 0;
        right: -100px;
        display: block;
        background: url(../_img/contact/img4.png) top center no-repeat;
        background-size: contain; }
    #contact .contact_container .contact_form li {
      padding: 1rem 0;
      font-size: 0; }
      #contact .contact_container .contact_form li label {
        font-size: 1rem;
        display: inline-block;
        vertical-align: top;
        width: 26%;
        font-family: 'mamelon'; }
      #contact .contact_container .contact_form li input, #contact .contact_container .contact_form li textarea {
        width: 74%;
        font-size: 1rem;
        color: #0078D4;
        border: 1px #0078D4 solid;
        padding: 10px 30px;
        border-radius: 50px;
        display: inline-block;
        vertical-align: middle; }
      #contact .contact_container .contact_form li textarea {
        border-radius: 10px;
        height: 165px; }
      #contact .contact_container .contact_form li p {
        font-size: 1rem;
        text-align: right; }
      #contact .contact_container .contact_form li ::-webkit-input-placeholder {
        color: #98C8ED;
        font-size: 14px; }
      #contact .contact_container .contact_form li :-ms-input-placeholder {
        color: #98C8ED;
        font-size: 14px; }
      #contact .contact_container .contact_form li ::-ms-input-placeholder {
        color: #98C8ED;
        font-size: 14px; }
      #contact .contact_container .contact_form li ::placeholder {
        color: #98C8ED;
        font-size: 14px; }
  #contact .contact_container .google_map iframe {
    height: 560px; }
  #contact .contact_container .google_map:before {
    content: '';
    width: 97px;
    height: 97px;
    position: absolute;
    top: -80px;
    left: -80px;
    display: block;
    background: url(../_img/contact/img1.png) top center; }

#contact .contact_infor {
  padding: 5rem 0 0; }
  #contact .contact_infor li {
    display: inline-block; }
    #contact .contact_infor li i {
      border-radius: 50%;
      width: 48px;
      height: 48px;
      text-align: center;
      vertical-align: middle;
      line-height: 3rem;
      margin-right: 1rem; }
    #contact .contact_infor li img {
      vertical-align: middle; }
  #contact .contact_infor .i_blue {
    color: #7195D8;
    border: 1px solid #7195D8; }
  #contact .contact_infor .padleft {
    padding-left: 3rem; }

@media only screen and (max-width: 1024px) {
  header {
    /*nav*/ }
    header .header_container {
      z-index: 9999;
      width: 96%; }
    header #logo {
      width: 100%;
      display: block; }
    header nav {
      width: 100%;
      height: 0;
      top: 0;
      left: 0;
      padding: 0;
      z-index: 9999;
      visibility: hidden;
      overflow: hidden;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-transform: translate3D(0, -100%, 0);
      -ms-transform: translate3D(0, -100%, 0);
      transform: translate3D(0, -100%, 0);
      -webkit-transition: visibility 0s, -webkit-transform 0.5s;
      transition: visibility 0s, -webkit-transform 0.5s;
      -o-transition: transform 0.5s, visibility 0s;
      transition: transform 0.5s, visibility 0s;
      transition: transform 0.5s, visibility 0s, -webkit-transform 0.5s;
      color: #fff; }
      header nav .menu {
        width: 100%;
        position: absolute;
        top: 20vh;
        font-size: 0;
        padding-left: 40px; }
        header nav .menu li {
          width: calc(100% / 3);
          margin-bottom: 3rem; }
      header nav.active {
        position: fixed;
        visibility: visible;
        height: 100%;
        z-index: 9999;
        background: #0078D4;
        -webkit-transform: translate3D(0, 0, 0);
        -ms-transform: translate3D(0, 0, 0);
        transform: translate3D(0, 0, 0);
        -webkit-transition: -webkit-transform 0.5s;
        transition: -webkit-transform 0.5s;
        -o-transition: transform 0.5s;
        transition: transform 0.5s;
        transition: transform 0.5s, -webkit-transform 0.5s; }
  #phone_icon .button {
    display: block;
    position: fixed;
    top: 34px;
    right: 33px;
    width: 35px;
    height: 30px;
    border-bottom: 3px solid #fff;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    z-index: 99999;
    cursor: pointer; }
    #phone_icon .button:before, #phone_icon .button:after {
      content: "";
      position: absolute;
      top: 20%;
      width: 100%;
      height: 3px;
      background: #fff none repeat scroll 0% 0%; }
    #phone_icon .button:after {
      content: "";
      top: 60%; }
    #phone_icon .button.action {
      display: block;
      width: 30px;
      height: 20px;
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      border-bottom: medium none !important;
      -webkit-transition: all 0.5s ease 0s;
      -o-transition: all 0.5s ease 0s;
      transition: all 0.5s ease 0s; }
      #phone_icon .button.action:before {
        top: 50%;
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
        background: #fff; }
      #phone_icon .button.action:after {
        top: 50%;
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -webkit-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
        background: #fff; }
  #phone_icon:after {
    content: '';
    background: #0078D4;
    width: 60px;
    height: 60px;
    display: block;
    position: fixed;
    top: 20px;
    right: 20px;
    border-radius: 6px; } }

/*----------------max-width:1680------------------*/
@media screen and (max-width: 1680px) {
  #index #index_photo_album_wrapper .index_photo_album {
    width: 90%; }
    #index #index_photo_album_wrapper .index_photo_album .slick-prev {
      left: -3%; }
    #index #index_photo_album_wrapper .index_photo_album .slick-next {
      right: -3%; }
  /*index*/
  #photos .photo_album_wrapper {
    width: 90%;
    margin: auto; }
  /*photos*/ }

/* 1680 END */
/*----------------max-width:1440------------------*/
@media screen and (max-width: 1440px) {
  #index #index_photo_album_wrapper .index_photo_album li a {
    margin-left: 20px; }
  /*index*/
  #photos .photo_album_wrapper .photo_album li {
    width: calc(25% - 20px);
    padding: 0 10px; }
    #photos .photo_album_wrapper .photo_album li a {
      width: 100%; }
  /*photos*/
  #intro .intro1 {
    padding: 0 5%; }
  #intro .intro2 ul {
    width: 100%;
    padding: 0 5%; }
  /*intro*/ }

/* 1680 END */
/*----------------max-width:1366------------------*/
@media screen and (max-width: 1366px) {
  #environment .environment1 {
    padding: 3rem 5%; }
  #environment .environment3 {
    padding: 0 5%; }
  #contact .contact_container .contact_form .form_figure:after {
    content: '';
    width: 120px;
    height: 200px;
    right: -50px; }
  /*contact*/ }

/*1366*/
/*----------------max-width:1024------------------*/
@media screen and (max-width: 1024px) {
  #index #index_photo_album_wrapper .index_photo_album li a {
    margin-left: 0;
    text-align: center;
    margin: auto; }
  #index #index_news .col-2, #index #index_news .col-10 {
    float: none;
    width: 100%; }
  #index #index_news .index_news_title {
    padding-top: 0;
    padding-bottom: 30px; }
  /*index*/
  .display_mobile {
    display: block; }
  .display_pc {
    display: none; }
  #environment .environment1 {
    padding: 3rem 3%; }
  #environment .environment2 {
    width: 100%;
    padding: 0 3%; }
  #environment .environment3 {
    padding: 0 3%; }
  /*environment*/
  #photos .photo_album_wrapper .photo_album {
    text-align: center; }
    #photos .photo_album_wrapper .photo_album li {
      width: calc(100% / 3 - 20px);
      padding: 0 10px; }
      #photos .photo_album_wrapper .photo_album li a {
        width: 100%; }
  /*photos*/
  #intro .intro2 .col-7, #intro .intro2 .col-5 {
    width: 50%; }
  #intro .intro2 ul .pdtop {
    padding-top: 0; }
  /*intro*/
  #contact .contact_container .col-7, #contact .contact_container .col-5 {
    width: 50%; }
  #contact .contact_container .contact_form .form_figure:after {
    content: '';
    width: 120px;
    height: 200px;
    right: 0px; }
  #contact .contact_infor li {
    width: 49%;
    margin-bottom: 2rem; }
  #contact .contact_infor .padleft {
    padding-left: 0; }
  .container {
    width: 96%; }
  footer .col-5 {
    width: 30%;
    padding: 50px 10px 0 0; }
  footer .col-7 {
    width: 70%; } }

/* 1024 END */
/*----------------max-width:768-------------------*/
@media screen and (max-width: 768px) {
  #index #index_news .container {
    width: 100%;
    padding: 0 2%; }
  #index #index_news .index_news_wrapper {
    padding: 50px; }
  /*index*/
  #page_banner {
    padding: 3rem 0;
    min-height: 400px; }
    #page_banner h2 {
      font-size: 70px;
      padding-top: 200px; }
    #page_banner h3 {
      font-size: 30px; }
  /*page_banner*/
  #about .intro2 .about_img li {
    width: 8%; }
  #about .intro2 .about_infor li {
    width: 100%;
    display: block; }
  /*about*/
  #environment .environment1 .word1 {
    background: url(../_img/environment/intro1_bg.png) top center no-repeat;
    background-size: contain;
    padding: 6rem 3% 0;
    min-height: 380px;
    font-size: 20px; }
  #environment .environment2 .col-6 {
    width: 100%;
    display: block; }
  #environment .environment3 {
    padding: 0 3%; }
    #environment .environment3 .word2 {
      background: url(../_img/environment/intro2_bg.png) top center no-repeat;
      background-size: contain;
      padding: 6rem 3% 0;
      min-height: 380px;
      font-size: 20px; }
  /*environment*/
  #photos .photo_album_wrapper .photo_album {
    text-align: center; }
    #photos .photo_album_wrapper .photo_album li {
      width: calc(100% / 2 - 20px);
      padding: 0 10px; }
      #photos .photo_album_wrapper .photo_album li a {
        width: 100%; }
  #photos .photo_album_wrapper .photo_detail li {
    width: calc( 100% / 2);
    display: inline-block;
    font-size: 1rem;
    padding: 1rem 1rem 3rem; }
  /*photos*/
  #intro .intro1 .word1 {
    background: url(../_img/intro/intro_bg.png) top center no-repeat;
    background-size: contain;
    padding: 6rem 3% 0;
    min-height: 380px;
    font-size: 20px;
    margin-top: 2rem; }
  #intro .intro2 .col-7, #intro .intro2 .col-5 {
    width: 100%;
    display: block; }
  /*intro*/
  #contact .contact_container {
    padding: 3rem 0 2rem; }
    #contact .contact_container .col-7, #contact .contact_container .col-5 {
      width: 100%;
      display: block; }
    #contact .contact_container .contact_form .form_figure:after {
      content: '';
      display: none; }
    #contact .contact_container .google_map {
      margin-bottom: 2rem; }
      #contact .contact_container .google_map iframe {
        height: 300px; }
      #contact .contact_container .google_map:before {
        content: '';
        display: none; } }

/* 768 END */
/*----------------max-width:667-------------------*/
@media screen and (max-width: 667px) {
  header .header_container {
    padding: 20px 30px 0 0; }
  header .logo {
    width: 30%;
    padding-left: 20px; }
  header nav .menu {
    top: 15vh;
    padding-left: 0; }
    header nav .menu li {
      width: calc(100% / 2); }
  #page_banner {
    padding: 3rem 0;
    min-height: 300px; }
    #page_banner h2 {
      font-size: 50px;
      padding-top: 100px; }
  #index #banner .slick-dots {
    bottom: 5px; }
    #index #banner .slick-dots li {
      margin: 0 20px; }
      #index #banner .slick-dots li button:before {
        content: '';
        width: 40px; }
    #index #banner .slick-dots .slick-active button:before {
      content: '';
      width: 40px; }
  #index #index_news .col-6 {
    width: 100%;
    display: block; }
  #index #index_news figure {
    text-align: center;
    padding-bottom: 1rem; }
  #index #index_news .index_news_wrapper {
    background: url("../_img/index/new_bg.png") center top no-repeat;
    background-size: cover;
    padding: 3rem;
    min-height: 400px; }
    #index #index_news .index_news_wrapper .button {
      text-align: center; }
  /*index*/
  #about .intro1 {
    background-size: cover;
    padding: 6rem 0;
    font-size: 20px; }
  #about .intro2 .about_img li {
    width: 25%; }
  #about .intro2 .about_img li:nth-child(1), #about .intro2 .about_img li:nth-child(2), #about .intro2 .about_img li:nth-child(3), #about .intro2 .about_img li:nth-child(4), #about .intro2 .about_img li:nth-child(5) {
    width: 18%; }
  #about .intro2 .about_infor li {
    font-size: 1rem; }
  /*about*/
  #news .news_title {
    padding: 20px 0; }
    #news .news_title li {
      width: 50%; }
  #news .news_list ul {
    width: 100%;
    display: block;
    padding: 0 10px 30px; }
    #news .news_list ul .news_img {
      border: 7px solid #D3DDFF; }
  #news .news_detail_bg {
    padding: 20px 0; }
  #news .news_detail_title .col-10 {
    width: 100%;
    display: block; }
  #news .news_detail_title .col-2 {
    display: none; }
  /*news*/
  #environment .environment1 {
    padding: 3rem 0; }
    #environment .environment1 .word1 {
      background: url(../_img/environment/intro1_bg.png) top center no-repeat;
      background-size: cover;
      padding: 6rem 3% 0;
      min-height: 380px;
      font-size: 20px; }
  #environment .environment2, #environment .environment3 {
    display: none; }
  #environment .environment4 {
    padding: 1rem 0;
    display: block; }
    #environment .environment4 p {
      text-align: center;
      margin-bottom: 1rem; }
    #environment .environment4 img {
      padding: 1rem 1rem 0; }
    #environment .environment4 .word2 {
      background: url(../_img/environment/intro2_bg.png) top center no-repeat;
      background-size: cover;
      padding: 6rem 0 0;
      min-height: 380px;
      font-size: 20px; }
  #environment .environment5 {
    display: block;
    padding: 0 1rem; }
    #environment .environment5 li p {
      text-align: center;
      margin-bottom: 1rem; }
  /*environment*/
  #photos .photo_album_wrapper .photo_album li {
    width: calc(100% - 20px); }
    #photos .photo_album_wrapper .photo_album li a .mask {
      opacity: 1; }
      #photos .photo_album_wrapper .photo_album li a .mask:hover {
        opacity: 0; }
  #photos .photo_album_wrapper .photo_album_title {
    padding: 1rem; }
    #photos .photo_album_wrapper .photo_album_title .title_right {
      width: 100%;
      display: block;
      padding-top: 20px; }
  #photos .photo_album_wrapper .photo_detail {
    text-align: center; }
    #photos .photo_album_wrapper .photo_detail li {
      width: calc( 100% / 2 - 10px);
      padding: 10px 5px; }
  /*photos*/
  #intro .intro1 {
    padding: 0; }
    #intro .intro1 .word1 {
      background-size: cover; }
    #intro .intro1 img {
      padding: 1rem; }
  #intro .intro2 {
    display: none; }
  #intro .intro3 {
    display: block;
    padding: 1rem; }
    #intro .intro3 ul {
      padding: 1rem; }
      #intro .intro3 ul li {
        font-size: 22px; }
  /*intro*/
  #contact .contact_container .contact_form li label {
    display: block;
    width: 100%; }
  #contact .contact_container .contact_form li input, #contact .contact_container .contact_form li textarea {
    display: block;
    width: 100%; }
  #contact .contact_container .contact_form li p {
    text-align: center; }
  #contact .contact_infor li {
    width: 100%;
    display: block; }
  /*contact*/
  footer .col-5, footer .col-7 {
    width: 100%;
    display: block; }
  footer .col-5 {
    text-align: center;
    padding: 0; }
  footer .footer_infor_wrapper {
    padding: 2rem 0; }
    footer .footer_infor_wrapper figure {
      display: none; }
    footer .footer_infor_wrapper .footer_infor {
      display: block;
      background: none;
      padding: 1rem; } }

/* 667 END */
/*----------------max-width:480-------------------*/
/* 480 END */
/*----------------max-width:320-------------------*/
/*320 END */