@charset "UTF-8";

/* sass */
:root { --color-pt1: #03A84E; --color-pt2: #252C41; --color-pt3: #1B2132; --color-pt4: #FDE74C; --color-pt5: #DD7979; --color-pt6: #5EA8A2; --color-pt7: #696969; --color-pt8: #E8E8E8; --color-pt9: #FFFFFF; --color-pt10: #059345; --color-pt11: #6982A5; --color-pt12: #65AACF; --color-pt13: #83CF70; --color-pt14: #588D39; --color-pt15: #E35C6A; --color-pt16: #BE8352; --color-pt17: #B26291; --color-pt18: #FF9E55; --color-pt19: #FFC74D; }

.l-header { position: fixed; z-index: 999; top: 0; left: 0; right: 0; width: 100%; min-width: 1280px; overflow: visible; margin: 0 auto; background-color: var(--color-pt9); box-shadow: 0px 2px 8px rgba(206, 212, 218, 0.35); }

.l-header .wrap-header { display: flex; justify-content: space-between; align-items: center;}

.l-header .logo { display: inline-block; width: 258px; height: auto; }

.l-header .logo a:hover { opacity: 0.8; cursor: pointer; }

.l-header .wrap-menu { display: inline-flex; }

.l-header .wrap-menu > li { position: relative; }

.l-header .wrap-menu > li:after { position: absolute; content: ""; display: block; width: 2px; height: calc(100% - 26px); right: 0; top: 0; bottom: 0; margin: auto; background-color: #E8E8E8; }

.l-header .wrap-menu > li:last-child:after { display: none; }

.l-header .wrap-menu > li a { text-decoration: none; color: var(--color-pt2); text-transform: uppercase; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-weight: 700; font-size: 16px; line-height: 1.222; padding: 8px 24px; text-align: center;}

.l-header .wrap-menu > li a:hover { opacity: 0.8; cursor: pointer; }

.l-header .wrap-menu > li.active { border-bottom: 8px solid #03a84e; }

.l-header .wrap-menu > li.active a { color: var(--color-pt1); }

.l-footer .wrap-small { background-color: var(--color-pt10); }

.l-footer small { display: block; font-style: normal; color: var(--color-pt9); font-weight: 700; font-size: 12px; line-height: 1.25; padding: 22px 0; text-align: center; height: 60px; }

.l-footer .content-footer { padding-top: 60px; padding-bottom: 42px; display: flex; justify-content: space-between; background: #03a84e; }

.l-footer .wrap-info .wrap-img img { height: 80px; }

.l-footer .wrap-info .txt-st { margin-top: 20px; font-weight: 700; font-size: 16px; line-height: 1.25; color: var(--color-pt9); }

.l-footer .wrap-info .txt-st a { color: var(--color-pt9); text-decoration: none; }

.l-footer .wrap-lst-menu { display: flex; }

.l-footer .wrap-lst-menu .wrap-menu-footer > li + li { margin-top: 20px; }

.l-footer .wrap-lst-menu .wrap-menu-footer > li .link { position: relative; display: block; font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--color-pt9); text-decoration: none; padding-left: 1.5em; text-transform: uppercase; }

.l-footer .wrap-lst-menu .wrap-menu-footer > li .link:hover { opacity: 0.8; cursor: pointer; }

.l-footer .wrap-lst-menu .wrap-menu-footer > li .link:before { content: ""; width: 24px; height: 24px; background-image: url(/resource/ga_resource/images/ico-arrow-white.svg); background-repeat: no-repeat; background-size: 24px 24px; position: absolute; top: -2px; left: 0; }

.l-footer .wrap-lst-menu .wrap-menu-footer + .wrap-menu-footer { margin-left: 35px; }

.l-footer .wrap-lst-img { max-width: 184px; }

.l-footer .wrap-lst-img > li + li { margin-top: 8px; }

.pc-view {
  display: block;
}
/*----HiepTT3----*/

@media only screen and (max-width: 600px) {
  .l-header {
    min-width: auto;
  }
  .l-header .wrap-btn-menu {
    display: block;
    position: relative;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
  }
  .l-header .wrap-btn-menu input {
    display: block;
    width: 50px;
    height: 42px;
    position: absolute;
    top: -7px;
    right: 8px;
    cursor: pointer;
    opacity: 0; 
    z-index: 2;
  }
  .l-header .wrap-btn-menu input:checked ~ .wrap-menu {
    transform: none;
    transition: transform 0.3s ease-in-out;
  }
  .l-header .wrap-btn-menu input:checked ~ span:nth-of-type(1) {
    transform: translateY(7px) rotate(45deg);
    top: -6px;
    right: 5px;
  }
  .l-header .wrap-btn-menu input:checked ~ span:nth-of-type(2) {
    display: none;
  }
  .l-header .wrap-btn-menu input:checked ~ span:nth-of-type(3) {
    transform: translateY(7px) rotate(-45deg);
    top: 17px;
    right: 8px;
  }
  .l-header .wrap-btn-menu input:checked ~ p.wrap-all {
    width: 100%;
    position: absolute;
    height: 100vh;
    margin-top: 54px;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
  }
  .l-header .wrap-btn-menu {
    width: 100%;
    position: absolute;
    right: 0;
    height: 28px;
    display: block;
    z-index: 2;
    -webkit-touch-callout: none;
  }
  .l-header .wrap-btn-menu span {
    width: 42px;
    height: 4px;
    border-radius: 5px;
    background-color: var(--color-pt1);
    position: absolute;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: all 0.3s ease-in-out;
    right: 12px;
  }
  .l-header .wrap-btn-menu span:nth-of-type(1) {
    top: 0;
  }
  .l-header .wrap-btn-menu span:nth-of-type(2) {
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .l-header .wrap-btn-menu span:nth-of-type(3) {
    bottom: 0;
  }
  .l-header .wrap-menu {
    display: block;
    margin-top: 54px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    background-color: var(--color-pt1);
    position: absolute;
    width: 100%;
    transform: translateX(105%);
  }
  .l-header .wrap-menu > li.active {
    border-bottom: none;
  }
  .l-header .wrap-menu > li.active a {
    background-color: var(--color-pt9);
    color: var(--color-pt1);
    pointer-events: none;
  }
  .l-header .wrap-menu > li + li {
    border-top: 1px solid var(--color-pt9);
  }
  .l-header .wrap-menu > li a {
    padding: 12px;
    color: var(--color-pt9);
    font-size: 14px;

  }
  .l-header .wrap-menu > li:after {
    content: none;
  }
  .pc-view {
    display: none;
  }
}