@import url(Pe-icon-7-filled.css);
@import url(Pe-icon-7-stroke.css);
/**
 * Main.scss
 ================================================== */
/* --- */
body {
  background: #fff;
  font-size: 14px;
  line-height: 25px;
  font-family: "Roboto", sans-serif;
  color: #222; }

/**
 * Header
 * -------------------------------------------------- */
.header-global {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 80px;
  overflow: hidden;
  background-color: #fff; }
  .header-global h1 {
    margin: 0;
    position: absolute;
    top: 10px;
    left: 20px; }
  .header-global .logo {
    display: block;
    height: 60px;
    padding-left: 70px;
    background-image: url(../img/logo.png);
    background-size: 60px 60px;
    background-repeat: no-repeat;
    background-position: 0 0; }
    .header-global .logo .name {
      display: block;
      padding-top: 9px;
      white-space: nowrap;
      line-height: 20px;
      font-size: 11px;
      color: #222; }
      .header-global .logo .name strong {
        font-size: 16px; }
  .header-global .nav-global {
    position: absolute;
    top: 0px;
    right: 20px; }
    .header-global .nav-global li {
      display: inline-block; }
      .header-global .nav-global li a {
        display: block;
        box-sizing: border-box;
        height: 80px;
        padding: 25px 10px 0 10px;
        line-height: 30px;
        font-size: 13px;
        color: #555;
        border-bottom: 0px #1C2C71 solid;
        transition: border-bottom-width 0.2s linear; }
        .header-global .nav-global li a:hover {
          border-bottom: 5px #1C2C71 solid;
          color: #222; }
    @media screen and (max-width: 799px) {
      .header-global .nav-global {
        display: none; } }
  .header-global.spy {
    background-color: rgba(229, 229, 229, 0.4);
    box-shadow: 0 0 15px transparent;
    transition: box-shadow,background-color 0.2s linear; }
    .header-global.spy:hover {
      background-color: white;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); }
  @media screen and (max-width: 1200px) {
    .header-global {
      position: absolute; } }

/**
 * Footer
 * -------------------------------------------------- */
.footer-global {
  padding: 30px 0;
  background-color: #1C2C71;
  color: #fff; }
  .footer-global .copyright {
    text-align: center;
    font-size: 11px; }

/**
 * Common : Drawer menu
 * -------------------------------------------------- */
.drawer-toggle {
  position: fixed;
  top: 15px;
  right: 20px;
  z-index: 200;
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 25px;
  opacity: 0;
  transform: translateY(-50px);
  transition: all .2s ease;
  text-align: center;
  cursor: pointer; }
  .drawer-toggle .pe-7f-menu {
    font-size: 32px;
    line-height: 50px;
    color: #fff; }
  .drawer-toggle.on {
    opacity: 1;
    transform: translateY(0); }
  @media screen and (min-width: 1199px) {
    .drawer-toggle {
      display: none; } }
  @media screen and (max-width: 799px) {
    .drawer-toggle {
      opacity: 1;
      transform: none; } }

.drawer-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 210;
  width: 100%;
  width: 100vw;
  height: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6); }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 220;
  width: 260px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #333;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateX(280px);
  transition: all .2s ease; }
  .drawer.on {
    opacity: 1;
    transform: translateX(0); }
  .drawer .close {
    height: 50px;
    padding-right: 5px;
    background: #3a3a3a;
    text-align: right;
    color: #ccc;
    cursor: pointer; }
    .drawer .close:hover {
      background: #3f3f3f; }
    .drawer .close .pe-7s-close {
      font-size: 42px;
      line-height: 50px; }
  .drawer > ul > li {
    border-bottom: 1px #3a3a3a solid; }
    .drawer > ul > li > a {
      display: block;
      box-sizing: border-box;
      height: 50px;
      padding: 10px 15px 10px 15px;
      line-height: 30px;
      font-size: 13px;
      font-weight: 700;
      color: #fff; }
      .drawer > ul > li > a:hover {
        color: #ccc; }

.back-pagetop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 200;
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 25px;
  transition: all .2s ease;
  opacity: 0;
  transform: translateY(50px);
  text-align: center; }
  .back-pagetop .pe-7s-angle-up {
    font-size: 50px;
    line-height: 50px;
    color: #fff; }
  .back-pagetop.on {
    opacity: 1;
    transform: translateY(0); }
  @media screen and (max-width: 799px) {
    .back-pagetop {
      opacity: 1;
      transform: none; } }

/**
 * Top page
 * -------------------------------------------------- */
.home-firstview {
  margin-top: 80px;
  width: 100%;
  background-image: url(../img/home-mv-bg.png);
  background-size: 100% 100%; }
  .home-firstview .mv {
    margin: 0 auto;
    width: 100%;
    max-width: 1200px; }
    .home-firstview .mv img {
      width: 100%; }

.home-content {
  padding: 50px 0; }
  .home-content h2 {
    text-align: center;
    margin-bottom: 40px;
    line-height: 36px;
    font-size: 30px;
    font-weight: 700;
    color: #1C2C71; }
  .home-content .read {
    margin-top: -5px;
    margin-bottom: 50px;
    text-align: center;
    font-size: 16px;
    line-height: 32px; }

.home-business .item .inner {
  margin: 30px 20px; }
  .home-business .item .inner h3 {
    text-align: center; }
  .home-business .item .inner p {
    text-align: justify; }
.home-business .item .thumb {
  margin: 0 1px; }
  .home-business .item .thumb img {
    width: 100%; }

.home-news {
  background-color: #f6f6f6; }
  .home-news .widget-outer {
    width: 450px;
    margin: 0 auto; }
    .home-news .widget-outer .fb {
      width: 100%;
      height: 400px; }
      .home-news .widget-outer .fb.fbsp {
        display: none; }
    @media screen and (max-width: 480px) {
      .home-news .widget-outer {
        width: 300px; }
        .home-news .widget-outer .fb {
          display: none; }
          .home-news .widget-outer .fb.fbsp {
            display: block; } }

.home-aboutus table.officer th {
  vertical-align: top; }

.home-membership {
  background-color: #f6f6f6; }
  .home-membership .btn {
    background-color: #1C2C71; }
    .home-membership .btn:hover {
      background-color: rgba(28, 44, 113, 0.85); }

/*






























*/