@charset "UTF-8";
html,
body {
  padding: 0;
  margin: 0;
}

.g-main div,
.g-main span,
.g-main applet,
.g-main object,
.g-main iframe,
.g-main h1,
.g-main h2,
.g-main h3,
.g-main h4,
.g-main h5,
.g-main h6,
.g-main p,
.g-main blockquote,
.g-main pre,
.g-main a,
.g-main abbr,
.g-main acronym,
.g-main address,
.g-main big,
.g-main cite,
.g-main code,
.g-main del,
.g-main dfn,
.g-main em,
.g-main img,
.g-main ins,
.g-main kbd,
.g-main q,
.g-main s,
.g-main samp,
.g-main small,
.g-main strike,
.g-main strong,
.g-main sub,
.g-main sup,
.g-main tt,
.g-main var,
.g-main b,
.g-main u,
.g-main i,
.g-main center,
.g-main dl,
.g-main dt,
.g-main dd,
.g-main ol,
.g-main ul,
.g-main li,
.g-main fieldset,
.g-main form,
.g-main label,
.g-main legend,
.g-main table,
.g-main caption,
.g-main tbody,
.g-main tfoot,
.g-main thead,
.g-main tr,
.g-main th,
.g-main td,
.g-main article,
.g-main aside,
.g-main canvas,
.g-main details,
.g-main embed,
.g-main figure,
.g-main figcaption,
.g-main footer,
.g-main header,
.g-main hgroup,
.g-main menu,
.g-main nav,
.g-main output,
.g-main ruby,
.g-main section,
.g-main summary,
.g-main time,
.g-main mark,
.g-main audio,
.g-main video,
.g-header div,
.g-header span,
.g-header applet,
.g-header object,
.g-header iframe,
.g-header h1,
.g-header h2,
.g-header h3,
.g-header h4,
.g-header h5,
.g-header h6,
.g-header p,
.g-header blockquote,
.g-header pre,
.g-header a,
.g-header abbr,
.g-header acronym,
.g-header address,
.g-header big,
.g-header cite,
.g-header code,
.g-header del,
.g-header dfn,
.g-header em,
.g-header img,
.g-header ins,
.g-header kbd,
.g-header q,
.g-header s,
.g-header samp,
.g-header small,
.g-header strike,
.g-header strong,
.g-header sub,
.g-header sup,
.g-header tt,
.g-header var,
.g-header b,
.g-header u,
.g-header i,
.g-header center,
.g-header dl,
.g-header dt,
.g-header dd,
.g-header ol,
.g-header ul,
.g-header li,
.g-header fieldset,
.g-header form,
.g-header label,
.g-header legend,
.g-header table,
.g-header caption,
.g-header tbody,
.g-header tfoot,
.g-header thead,
.g-header tr,
.g-header th,
.g-header td,
.g-header article,
.g-header aside,
.g-header canvas,
.g-header details,
.g-header embed,
.g-header figure,
.g-header figcaption,
.g-header footer,
.g-header header,
.g-header hgroup,
.g-header menu,
.g-header nav,
.g-header output,
.g-header ruby,
.g-header section,
.g-header summary,
.g-header time,
.g-header mark,
.g-header audio,
.g-header video,
.g-footer div,
.g-footer span,
.g-footer applet,
.g-footer object,
.g-footer iframe,
.g-footer h1,
.g-footer h2,
.g-footer h3,
.g-footer h4,
.g-footer h5,
.g-footer h6,
.g-footer p,
.g-footer blockquote,
.g-footer pre,
.g-footer a,
.g-footer abbr,
.g-footer acronym,
.g-footer address,
.g-footer big,
.g-footer cite,
.g-footer code,
.g-footer del,
.g-footer dfn,
.g-footer em,
.g-footer img,
.g-footer ins,
.g-footer kbd,
.g-footer q,
.g-footer s,
.g-footer samp,
.g-footer small,
.g-footer strike,
.g-footer strong,
.g-footer sub,
.g-footer sup,
.g-footer tt,
.g-footer var,
.g-footer b,
.g-footer u,
.g-footer i,
.g-footer center,
.g-footer dl,
.g-footer dt,
.g-footer dd,
.g-footer ol,
.g-footer ul,
.g-footer li,
.g-footer fieldset,
.g-footer form,
.g-footer label,
.g-footer legend,
.g-footer table,
.g-footer caption,
.g-footer tbody,
.g-footer tfoot,
.g-footer thead,
.g-footer tr,
.g-footer th,
.g-footer td,
.g-footer article,
.g-footer aside,
.g-footer canvas,
.g-footer details,
.g-footer embed,
.g-footer figure,
.g-footer figcaption,
.g-footer footer,
.g-footer header,
.g-footer hgroup,
.g-footer menu,
.g-footer nav,
.g-footer output,
.g-footer ruby,
.g-footer section,
.g-footer summary,
.g-footer time,
.g-footer mark,
.g-footer audio,
.g-footer video {
  font-weight: normal;
  margin: 0;
  padding: 0;
  border: 0;
}
.g-main article,
.g-main aside,
.g-main details,
.g-main figcaption,
.g-main figure,
.g-main footer,
.g-main header,
.g-main hgroup,
.g-main menu,
.g-main nav,
.g-main section,
.g-header article,
.g-header aside,
.g-header details,
.g-header figcaption,
.g-header figure,
.g-header footer,
.g-header header,
.g-header hgroup,
.g-header menu,
.g-header nav,
.g-header section,
.g-footer article,
.g-footer aside,
.g-footer details,
.g-footer figcaption,
.g-footer figure,
.g-footer footer,
.g-footer header,
.g-footer hgroup,
.g-footer menu,
.g-footer nav,
.g-footer section {
  display: block;
}
.g-main ol,
.g-main ul,
.g-header ol,
.g-header ul,
.g-footer ol,
.g-footer ul {
  list-style: none;
}
.g-main blockquote,
.g-main q,
.g-header blockquote,
.g-header q,
.g-footer blockquote,
.g-footer q {
  quotes: none;
}
.g-main blockquote:before,
.g-main blockquote:after,
.g-main q:before,
.g-main q:after,
.g-header blockquote:before,
.g-header blockquote:after,
.g-header q:before,
.g-header q:after,
.g-footer blockquote:before,
.g-footer blockquote:after,
.g-footer q:before,
.g-footer q:after {
  content: "";
  content: none;
}
.g-main table,
.g-header table,
.g-footer table {
  border-collapse: collapse;
  border-spacing: 0;
}

.fill-fix {
  overflow: hidden;
}

.g-all-btn *,
.g-header * {
  transition: none !important;
}

.g-header .g-container nav .g-menu > .g-dropdown:hover a::after {
  transition: 0.3s !important;
}
@media only screen and (min-width: 1231px) {
  .g-header .g-container nav .g-menu > .g-dropdown:hover > ul {
    transition: 0.2s !important;
  }
}
.g-header .g-container nav .g-menu > .g-dropdown > ul {
  transition: 0.1s !important;
}
@media only screen and (max-width: 1230px) {
  .g-header .g-container nav {
    transition: 0.3s !important;
  }
  .g-header .g-container nav .g-menu ul.active {
    transition: 0.2s !important;
  }
  .g-header .g-container nav .g-menu .class-dropdown ul.active {
    transition: 0.5s !important;
  }
  .g-header .g-container nav .g-community {
    transition: 0.1s !important;
  }
  .g-header .g-container .btn-menu,
  .g-header .g-container .menu-toggle:checked ~ .btn-menu {
    transition: 0.2s !important;
  }
  .g-header .g-container .menu-toggle:checked ~ nav > .g-community {
    transition: 0.3s !important;
  }
}

.g-body {
  width: 100%;
  overflow-x: hidden;
}
.g-body main.g-main {
  min-height: calc(100vh - 400.5px);
  display: flex;
  flex-direction: column;
  padding-top: 55px;
}
@media only screen and (max-width: 320px) {
  .g-body main.g-main {
    max-width: 320px;
  }
}
.g-body main.g-main section {
  background-color: #fff;
}
.g-body.nav-scroll, .g-body.popup-scroll {
  overflow: hidden;
}
.g-body.lg-on {
  overflow: hidden;
}
.g-body.lg-on #lg-counter {
  font-size: 1.375rem;
  margin-left: calc(50% - 38px);
}
.g-body.lg-on .lg-outer .lg-thumb-outer {
  background-color: rgba(0, 0, 0, 0.8);
}
.g-body .g-main select,
.g-body .g-main input[type=text],
.g-body .g-main textarea {
  font-size: 1rem;
  width: 100%;
  border: 0;
  border-radius: 0;
  border-bottom: 1px #dedede solid;
  background-color: #fff;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main select,
  .g-body .g-main input[type=text],
  .g-body .g-main textarea {
    font-size: 4.5vw;
  }
}
.g-body .g-main input[type=text] {
  height: 42px;
  padding: 9px 2px 8px;
}
.g-body .g-main textarea {
  border-radius: 5px;
  border: 1px #dedede solid;
  padding: 10px;
  margin-top: 10px;
}
.g-body .g-main select {
  height: 42px;
  padding: 6px 0;
  cursor: pointer;
}
.g-body .g-main select.select-soild {
  width: 250px;
}
.g-body .g-main select:focus {
  outline: none;
}
.g-body .g-main input[type=checkbox] {
  accent-color: #7D64AB;
  cursor: pointer;
  width: 20px;
  height: 20px;
  margin: 0;
  margin-right: 5px;
}
.g-body .g-main label {
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
}
.g-body .g-main label.label-group {
  width: 100%;
  flex-wrap: wrap;
}
.g-body .g-main label.label-group span:not(:last-child) {
  margin-right: 10px;
}
.g-body .g-main .btn-normal,
.g-body .g-main .btn-table {
  color: #fff;
  font-size: 1.1rem;
  border-radius: 50px;
  padding: 10px 20px 6px;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  display: flex;
  min-width: 150px;
  border: 0;
}
.g-body .g-main .btn-normal:hover,
.g-body .g-main .btn-table:hover {
  cursor: pointer;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .btn-normal,
  .g-body .g-main .btn-table {
    width: 55vw;
    min-width: auto;
    font-size: 5vw;
    padding: 10px 0 7px;
  }
}
.g-body .g-main .btn-normal,
.g-body .g-main .btn-table {
  background-color: #7D64AB;
}
.g-body .g-main .btn-normal.btn-normal,
.g-body .g-main .btn-table.btn-normal {
  border-radius: 5px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .btn-normal.btn-normal,
  .g-body .g-main .btn-table.btn-normal {
    font-size: 5vw;
    min-width: 42vw;
  }
}
.g-body .g-main .btn-normal:hover,
.g-body .g-main .btn-table:hover {
  background-color: #AB91DD;
}
.g-body .g-main .btn-search {
  color: #fff;
  font-size: 1.1rem;
  border-radius: 50px;
  padding: 10px 20px 6px;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  display: flex;
  min-width: 150px;
  border: 0;
}
.g-body .g-main .btn-search:hover {
  cursor: pointer;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .btn-search {
    width: 55vw;
    min-width: auto;
    font-size: 5vw;
    padding: 10px 0 7px;
  }
}
.g-body .g-main .btn-search {
  width: 155px;
  background-color: #4B2F80;
}
.g-body .g-main .btn-search:hover {
  background-color: #7D64AB;
}
.g-body .g-main .btn-search::before {
  content: "";
  width: 17px;
  height: 17px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  margin-right: 7px;
  position: relative;
  display: table;
  top: -2px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .btn-search::before {
    width: 4.5vw;
    height: 4.5vw;
  }
}
.g-body .g-main .btn-search::before {
  background-image: url(../images/i-search.svg);
}
.g-body .g-main .btn-start {
  color: #fff;
  font-size: 1.1rem;
  border-radius: 50px;
  padding: 10px 20px 6px;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  display: flex;
  min-width: 150px;
  border: 0;
}
.g-body .g-main .btn-start:hover {
  cursor: pointer;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .btn-start {
    width: 55vw;
    min-width: auto;
    font-size: 5vw;
    padding: 10px 0 7px;
  }
}
.g-body .g-main .btn-start {
  color: #fff;
  width: 200px;
  margin: auto;
  background-color: #4B2F80;
}
.g-body .g-main .btn-start:hover {
  background-color: #7D64AB;
}
.g-body .g-main .input-list {
  display: grid;
  gap: 20px 25px;
}
.g-body .g-main .input-list li {
  display: flex;
  gap: 20px 25px;
}
.g-body .g-main .input-list .d-flex {
  display: flex;
  gap: 10px;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main .input-list {
    gap: 5px;
  }
  .g-body .g-main .input-list li {
    display: grid;
    gap: 5px;
  }
  .g-body .g-main .input-list .li-one,
  .g-body .g-main .input-list .d-flex {
    display: flex;
    gap: 5px;
  }
  .g-body .g-main .input-list li.li-one {
    margin-top: 10px;
  }
  .g-body .g-main .input-list li.li-one .btn-refresh {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
  .g-body .g-main .input-list li.li-one input[type=text] {
    padding: 5px 2px;
    letter-spacing: 0;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .input-list input[placeholder="請輸入驗證碼(不分大小寫)"] {
    font-size: 4.2vw;
  }
}
.g-body .g-main .btn-refresh {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  border-radius: 42px;
  width: 42px;
  height: 42px;
  min-width: 42px;
  background-color: #4B2F80;
  display: table;
  cursor: pointer;
  background-image: url(../images/i-refresh.svg);
  background-size: auto 50%;
}
.g-body .g-main .btn-refresh:hover {
  background-color: #7D64AB;
}
.g-body .g-main section h1 {
  display: block;
}
.g-body .g-main img[src=""],
.g-body .g-main img:not([src]) {
  visibility: hidden;
}
.g-body .g-main b,
.g-body .g-main strong {
  font-weight: bold;
}
.g-body .g-main b span,
.g-body .g-main strong span {
  font-weight: bold;
}
.g-body .g-main .focus-BG {
  background-color: #EEEEEE !important;
  background: #EEEEEE !important;
}
.g-body .g-main .focus-BG2 {
  background-color: linear-gradient(to right, #f2f2f2, #fff, #f2f2f2) !important;
  background: linear-gradient(to right, #f2f2f2, #fff, #f2f2f2) !important;
}
.g-body .g-main .center {
  text-align: center;
}
.g-body .g-main .image-container,
.g-body .g-main .video-container {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  background: #d4d4d4;
  display: block;
  position: relative;
}
.g-body .g-main .image-container.video-container,
.g-body .g-main .video-container.video-container {
  background: #000;
}
.g-body .g-main .image-container img,
.g-body .g-main .video-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.g-body .g-main .image-container iframe,
.g-body .g-main .image-container object,
.g-body .g-main .image-container embed,
.g-body .g-main .video-container iframe,
.g-body .g-main .video-container object,
.g-body .g-main .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  width: 100%;
  height: 100%;
}
.g-body .g-main table {
  width: 100%;
}
.g-body .g-main table th,
.g-body .g-main table td {
  padding: 10px 15px;
}
.g-body .g-main table thead th {
  white-space: nowrap;
}
.g-body .g-main table.table-article thead th {
  color: #fff;
  background-color: #7D64AB;
}
.g-body .g-main table.table-article thead td {
  background-color: #F6F1FF;
}
.g-body .g-main table.table-article tbody th {
  color: #fff;
  background-color: #7D64AB;
}
.g-body .g-main table.table-article tbody td {
  background-color: #fff;
}
.g-body .g-main table.table-article th,
.g-body .g-main table.table-article td {
  border: 1px #dedede solid;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main table.table-article th,
  .g-body .g-main table.table-article td {
    font-size: 4.5vw;
    padding: 3vw 5vw;
  }
}
.g-body .g-main .box-scroll {
  width: 100%;
  overflow: auto;
}
.g-body .g-main .owl-carousel {
  display: block;
  position: relative;
}
.g-body .g-main .owl-carousel a {
  display: table;
}
.g-body .g-main .owl-carousel .owl-nav span {
  font-size: 1.5rem;
  line-height: 0.8;
}
.g-body .g-main .owl-carousel .owl-prev,
.g-body .g-main .owl-carousel .owl-next {
  position: absolute;
}
.g-body .g-main .owl-carousel .owl-dots {
  width: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.g-body .g-main .owl-carousel .owl-dots span {
  width: 8px;
  height: 8px;
  border-radius: 8px;
  display: block;
  background-color: #cccccc;
}
.g-body .g-main .owl-carousel .owl-dots .active span {
  background-color: #4B2F80;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main .owl-carousel .owl-nav {
    display: none;
  }
}
.g-body .g-main time {
  color: #FF7A00;
  font-size: 1.1rem;
}
.g-body .g-main time::before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  width: 17px;
  height: 17px;
  background-image: url(../images/i-time.svg);
  margin-right: 6px;
  position: relative;
  top: 2px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main time {
    font-size: 5vw;
  }
  .g-body .g-main time::before {
    width: 5vw;
    height: 5vw;
    margin-right: 2vw;
    top: 0.75vw;
  }
}
.g-body .g-main .inlineflex-20 {
  display: inline-flex;
  gap: 20px;
}
.g-body .g-main .d-none {
  display: none !important;
}
.g-body .g-main .d-flex {
  display: flex;
}
.g-body .g-main .w-min {
  width: 1px;
}
.g-body .g-main .fixed {
  position: fixed;
  top: 105px;
}
.g-body .g-main .loading-data {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F5F5F5;
  padding: 15px;
  margin-top: 25px;
  line-height: 1;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .loading-data {
    margin-top: 5vw;
  }
}
.g-body .g-main .loading-data::before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  background: url(../images/i-loading.svg) no-repeat top left/auto 100%;
  animation: rotate 2s infinite linear;
  position: relative;
  top: -1px;
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.g-body .g-main .pagination {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  gap: 20px;
}
.g-body .g-main .pagination li a {
  font-size: 1.1rem;
  color: #333333;
  width: 20px;
  text-align: center;
  display: table;
}
.g-body .g-main .pagination li a:hover {
  cursor: pointer;
}
.g-body .g-main .pagination li.active a {
  color: #7D64AB;
}
.g-body .g-main .pagination li.active a::after {
  content: "";
  display: table;
  width: 20px;
  height: 2px;
  background-color: #7D64AB;
}
.g-body .g-main .pagination li.active a:hover {
  cursor: default;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .pagination {
    margin-top: 10vw;
    gap: 4vw;
  }
  .g-body .g-main .pagination li a {
    font-size: 5.2vw;
    width: 5.2vw;
  }
  .g-body .g-main .pagination li.active a::after {
    width: 5.2vw;
  }
}
.g-body .g-main .btn-line {
  color: #fff;
  font-size: 1.1rem;
  border-radius: 50px;
  padding: 10px 20px 6px;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  display: flex;
  min-width: 150px;
  border: 0;
}
.g-body .g-main .btn-line:hover {
  cursor: pointer;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .btn-line {
    width: 55vw;
    min-width: auto;
    font-size: 5vw;
    padding: 10px 0 7px;
  }
}
.g-body .g-main .btn-line {
  max-width: 280px;
  margin: 50px auto 0;
  background-color: #08a862;
}
.g-body .g-main .btn-line img {
  width: 32px;
  margin: 0 5px;
  position: relative;
  top: -1px;
}
.g-body .g-main .btn-line:hover {
  background-color: #1acd7f;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .btn-line {
    width: 75vw;
  }
}
.g-body .g-popup {
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  top: 0;
  left: 0;
  z-index: 100;
  display: none;
}
.g-body .g-popup.show {
  display: block !important;
}
.g-body .g-popup.hide {
  display: none;
}
.g-body .g-popup .popup-mask {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  justify-content: center;
}
.g-body .g-popup .popup-mask .popup-box {
  width: 100%;
  max-width: 1200px;
  border-radius: 5px;
  background-color: #ffffff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}
.g-body .g-popup .popup-mask .popup-box .popup-title {
  border-radius: 5px 5px 0 0;
}
@media only screen and (max-width: 768px) {
  .g-body .g-popup .popup-mask .popup-box {
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
  }
  .g-body .g-popup .popup-mask .popup-box .popup-title {
    border-radius: 0;
  }
}
.g-body .g-popup .popup-mask .popup-box {
  max-height: 85vh;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.g-body .g-popup .popup-mask .popup-box .popup-title {
  border-radius: 5px 5px 0 0;
  color: #fff;
  background-color: #4B2F80;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  line-height: 2.5;
  position: sticky;
  top: 0;
}
@media only screen and (max-width: 768px) {
  .g-body .g-popup .popup-mask .popup-box .popup-title {
    border-radius: 0 0 0 0;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-popup .popup-mask .popup-box .popup-title {
    font-size: 7vw;
  }
}
.g-body .g-popup .popup-mask .popup-box .popup-title .statusMsg {
  font-weight: bold;
  animation: flash 2s infinite linear;
}
@keyframes flash {
  0% {
    color: #FFE666;
  }
  70% {
    color: #FFE666;
  }
  85% {
    color: #4B2F80;
  }
  100% {
    color: #FFE666;
  }
}
.g-body .g-popup .popup-mask .popup-box iframe {
  width: 100%;
  height: 85vh;
  overflow-x: hidden;
}
.g-body .g-popup .close-popup {
  cursor: pointer;
  position: absolute;
  right: 15px;
  top: 20px;
  width: 20px;
  height: 20px;
  background: url(../images/i-menu-close-w.svg) no-repeat center center/100% auto;
  z-index: 3;
}
@media only screen and (max-width: 320px) {
  .g-body .g-popup .close-popup {
    right: 4vw;
    top: 5vw;
    width: 6vw;
    height: 6vw;
  }
}
.g-body .g-popup.popup-S .popup-mask .popup-box {
  max-width: 450px;
}
.g-body .g-popup.popup-M .popup-mask .popup-box {
  max-width: 680px;
}
.g-body .g-popup.popup-L .popup-mask .popup-box {
  max-width: 1200px;
}
.g-body .g-popup iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.g-body.g-iframe .close-popup {
  cursor: pointer;
  position: absolute;
  right: 15px;
  top: 20px;
  width: 20px;
  height: 20px;
  background: url(../images/i-menu-close-w.svg) no-repeat center center/100% auto;
  z-index: 3;
}
@media only screen and (max-width: 320px) {
  .g-body.g-iframe .close-popup {
    right: 4vw;
    top: 5vw;
    width: 6vw;
    height: 6vw;
  }
}
.g-body.g-iframe .popup-main {
  width: 100%;
  max-width: 1200px;
  border-radius: 5px;
  background-color: #ffffff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}
.g-body.g-iframe .popup-main .popup-title {
  border-radius: 5px 5px 0 0;
}
@media only screen and (max-width: 768px) {
  .g-body.g-iframe .popup-main {
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
  }
  .g-body.g-iframe .popup-main .popup-title {
    border-radius: 0;
  }
}
.g-body.g-iframe .popup-main {
  margin: 50px auto 20px;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .g-body.g-iframe .popup-main {
    max-width: 100%;
    margin: 0 auto 0;
  }
}
.g-body.g-iframe .popup-main .popup-title {
  border-radius: 5px 5px 0 0;
  color: #fff;
  background-color: #4B2F80;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  line-height: 2.5;
  position: sticky;
  top: 0;
}
@media only screen and (max-width: 768px) {
  .g-body.g-iframe .popup-main .popup-title {
    border-radius: 0 0 0 0;
  }
}
@media only screen and (max-width: 450px) {
  .g-body.g-iframe .popup-main .popup-title {
    font-size: 7vw;
  }
}
.g-body.g-iframe .popup-main h1 {
  font-weight: bold;
}
@media only screen and (max-width: 450px) {
  .g-body.g-iframe .popup-main h1 {
    font-size: 6.7vw;
  }
}
.g-body.g-iframe .popup-main .icon-ok {
  display: flex;
  align-items: center;
  color: #7D64AB;
  font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: 30px;
}
.g-body.g-iframe .popup-main .icon-ok::before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  background: url(../images/i-circle-check.svg) no-repeat center top/90% auto;
  width: 30px;
  height: 34px;
  margin-right: 8px;
  top: 2px;
  position: relative;
}
@media only screen and (max-width: 450px) {
  .g-body.g-iframe .popup-main .icon-ok {
    font-size: 6vw;
  }
  .g-body.g-iframe .popup-main .icon-ok::before {
    width: 8vw;
    height: 8vw;
    margin-right: 2vw;
    top: -0.2vw;
  }
}
.g-body.g-iframe .popup-main .popup-container {
  width: 90%;
  margin: auto;
  padding: 30px 0 75px;
  box-sizing: border-box;
}
.g-body.g-iframe .popup-main .popup-container .btn-normal {
  margin: auto;
  margin-top: 25px;
}
.g-body.g-iframe .popup-main .popup-container .from-confirm,
.g-body.g-iframe .popup-main .popup-container .input-list {
  margin: 25px 0;
}
.g-body.g-iframe .popup-main .popup-container .from-confirm {
  width: 100%;
}
.g-body.g-iframe .popup-main .popup-container .from-confirm tr {
  border: 1px #dedede solid;
}
.g-body.g-iframe .popup-main .popup-container .from-confirm thead th {
  text-align: center;
  background-color: #EEEEEE;
}
.g-body.g-iframe .popup-main .popup-container .from-confirm tbody th,
.g-body.g-iframe .popup-main .popup-container .from-confirm tbody td {
  vertical-align: top;
}
.g-body.g-iframe .popup-main .popup-container .from-confirm tbody th {
  width: 1px;
  white-space: nowrap;
  color: #7D64AB;
  text-align: right;
  font-weight: bold;
}
.g-body.g-iframe .popup-main .popup-container .g-iAgree {
  margin-bottom: 15px;
}
.g-body.g-iframe .popup-main .popup-container .g-iAgree > span {
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 650px) {
  .g-body.g-iframe .popup-main .popup-container .community-list {
    display: grid;
    gap: 10px;
    justify-content: flex-start;
  }
  .g-body.g-iframe .popup-main .popup-container .community-list a {
    width: 100%;
  }
  .g-body.g-iframe .popup-main .popup-container .from-confirm tr {
    display: grid;
  }
  .g-body.g-iframe .popup-main .popup-container .from-confirm tr:not(:last-child) {
    border-bottom: 0;
  }
  .g-body.g-iframe .popup-main .popup-container .from-confirm thead tr {
    border-bottom: 0;
  }
  .g-body.g-iframe .popup-main .popup-container .from-confirm tbody th {
    text-align: left;
    padding-bottom: 0;
  }
  .g-body.g-iframe .popup-main .popup-container .from-confirm tbody td {
    padding-top: 5px;
  }
}
.g-body.g-iframe .popup-main .input-email {
  margin: 20px 0;
}
.g-body.g-iframe .popup-main .input-email input[type=text] {
  border: 1px #dedede solid;
  padding: 10px;
}
.g-body.g-iframe.popup-L .popup-main {
  max-width: 1200px;
}
.g-body.g-iframe.popup-M .popup-main {
  max-width: 680px;
}
.g-body.g-iframe.popup-S .popup-main {
  max-width: 450px;
}
.g-body.g-iframe.popup-center {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}
.g-body.g-iframe.popup-center .popup-main {
  height: auto;
  margin: auto;
  border-radius: 10px;
}
@media only screen and (max-width: 768px) {
  .g-body.g-iframe.popup-center .popup-main {
    min-height: auto;
    border-radius: 10px;
  }
}

.g-main,
.g-header,
.g-footer {
  color: #333333;
  font-size: 16px;
}
.g-main *,
.g-header *,
.g-footer * {
  line-height: 1.5;
  font-family: Arial, "微軟正黑體";
  letter-spacing: 1px;
  box-sizing: border-box;
}
.g-main :focus,
.g-header :focus,
.g-footer :focus {
  outline: none;
}
.g-main img,
.g-header img,
.g-footer img {
  display: block;
  width: 100%;
  height: auto;
}
.g-main a,
.g-header a,
.g-footer a {
  list-style: none;
  text-decoration: none;
}
.g-main a:link, .g-main a:visited,
.g-header a:link,
.g-header a:visited,
.g-footer a:link,
.g-footer a:visited {
  list-style: none;
  text-decoration: none;
}
.g-main .g-container,
.g-header .g-container,
.g-footer .g-container {
  width: 90%;
  margin: auto;
}
@media only screen and (max-width: 1440px) {
  .g-main,
  .g-header,
  .g-footer {
    font-size: 15px;
  }
  .g-main .g-container,
  .g-header .g-container,
  .g-footer .g-container {
    width: 95%;
  }
}
@media only screen and (max-width: 1024px) {
  .g-main,
  .g-header,
  .g-footer {
    font-size: 16px;
  }
}
@media only screen and (max-width: 450px) {
  .g-main,
  .g-header,
  .g-footer {
    font-size: 4.5vw;
  }
  .g-main .g-container,
  .g-header .g-container,
  .g-footer .g-container {
    width: 98%;
  }
}

.g-header {
  width: 100%;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  position: fixed;
  z-index: 99;
  top: 0;
}
.g-header .header-gift {
  display: none;
}
@media only screen and (max-width: 1300px) {
  .g-header .header-gift {
    display: block;
    width: 45px;
    position: absolute;
    left: 7px;
    top: 2px;
  }
}
@media only screen and (max-width: 450px) {
  .g-header .header-gift {
    width: 12.5vw;
    max-width: 45px;
    left: 2vw;
    top: calc(22.5px - 6vw);
  }
}
.g-header .g-logo {
  margin-right: 50px;
  width: 205px;
}
@media only screen and (max-width: 1600px) {
  .g-header .g-logo {
    width: 160px;
    margin-right: 20px;
  }
}
@media only screen and (max-width: 1300px) {
  .g-header .g-logo {
    margin-right: 8px;
  }
}
@media only screen and (max-width: 320px) {
  .g-header .g-logo {
    width: 50vw;
  }
}
.g-header .g-container {
  display: flex;
  align-items: center;
  height: 55px;
}
@media only screen and (max-width: 1300px) {
  .g-header .g-container {
    justify-content: center;
  }
}
.g-header nav {
  display: flex;
  align-items: center;
  width: calc(100% - 255px);
}
@media only screen and (max-width: 1600px) {
  .g-header nav {
    width: calc(100% - 180px);
  }
}
@media only screen and (max-width: 1600px) and (max-width: 1300px) {
  .g-header nav {
    width: 100%;
    min-height: 0%;
    max-height: 0%;
    top: 55px;
    left: 0;
    transition: 0.3s;
    padding: 0px 20px;
    background-color: #EEEEEE;
    flex-direction: column;
    overflow: auto;
    position: fixed;
  }
  .g-header nav * {
    font-size: 1.1rem;
  }
}
.g-header nav .g-menu {
  width: 100%;
  display: flex;
}
@media only screen and (max-width: 1300px) {
  .g-header nav .g-menu {
    order: 2;
    flex-direction: column;
  }
  .g-header nav .g-menu > li {
    border-bottom: 1px #dedede solid;
  }
  .g-header nav .g-menu ul.active {
    border-top: 1px #dedede solid;
    max-height: 1000px !important;
    transition: 0.2s;
  }
  .g-header nav .g-menu .g-dropdown > a::after {
    content: "";
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    width: 20px;
    height: 20px;
    transform: rotate(-90deg);
    background: url(../images/arrow.svg) no-repeat center center/50% auto;
  }
}
.g-header nav .g-menu a {
  cursor: pointer;
  display: flex;
}
@media only screen and (max-width: 1300px) {
  .g-header nav .g-menu a.active::after {
    transform: rotate(0deg) !important;
  }
}
.g-header nav .g-menu > li > a {
  color: #333333;
  padding: 16px 15px 15px;
}
@media only screen and (max-width: 1600px) {
  .g-header nav .g-menu > li > a {
    padding: 16px 10px 15px;
  }
}
@media only screen and (max-width: 1300px) {
  .g-header nav .g-menu > li > a {
    padding: 20px 0 10px;
    color: #4B2F80;
  }
}
.g-header nav .g-menu > li > a:hover {
  color: #4B2F80;
}
@media only screen and (max-width: 1300px) {
  .g-header nav .g-menu > .g-dropdown a {
    justify-content: space-between !important;
  }
}
.g-header nav .g-menu > .g-dropdown > a::after {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  width: 20px;
  height: 20px;
  background: url(../images/arrow.svg) no-repeat center center/50% auto;
}
.g-header nav .g-menu > .g-dropdown:hover a::after {
  transform: rotate(-90deg);
  transition: 0.3s;
}
@media only screen and (min-width: 1301px) {
  .g-header nav .g-menu > .g-dropdown:hover > ul {
    padding: 20px 0;
    max-height: 1000px;
    transition: 0.2S;
  }
}
.g-header nav .g-menu > .g-dropdown > ul {
  width: 100%;
  max-height: 0;
  padding: 0;
  left: 0;
  background-color: #4B2F80;
  transition: 0.1S;
  display: flex;
  position: absolute;
  overflow: hidden;
}
.g-header nav .g-menu > .g-dropdown > ul > li {
  border-right: 1px #8a6ac5 solid;
}
.g-header nav .g-menu > .g-dropdown > ul a {
  color: #fff;
  padding: 5px 30px;
}
.g-header nav .g-menu > .g-dropdown > ul a:hover {
  color: #FFE666;
}
@media only screen and (max-width: 1600px) {
  .g-header nav .g-menu > .g-dropdown > ul a {
    padding: 5px 15px;
  }
}
@media only screen and (max-width: 1300px) {
  .g-header nav .g-menu > .g-dropdown > ul {
    flex-direction: column;
    background-color: transparent;
    position: static;
  }
  .g-header nav .g-menu > .g-dropdown > ul a {
    color: #333333 !important;
    padding: 12px 0px 10px 20px !important;
    text-decoration: none !important;
  }
  .g-header nav .g-menu > .g-dropdown > ul li {
    border-right: 0;
  }
  .g-header nav .g-menu > .g-dropdown > ul li:not(:last-child),
  .g-header nav .g-menu > .g-dropdown > ul .item-link a:not(:last-child) {
    border-bottom: 1px #dedede solid;
  }
}
.g-header nav .g-menu > .g-dropdown:nth-child(1) > ul {
  padding-left: calc(5% + 240px);
}
@media only screen and (max-width: 1600px) {
  .g-header nav .g-menu > .g-dropdown:nth-child(1) > ul {
    padding-left: calc(2.5% + 197px);
  }
}
@media only screen and (max-width: 1440px) {
  .g-header nav .g-menu > .g-dropdown:nth-child(1) > ul {
    padding-left: calc(2.5% + 160px);
  }
}
.g-header nav .g-menu > .g-dropdown:nth-child(4) > ul {
  padding-left: calc(5% + 555px);
}
@media only screen and (max-width: 1600px) {
  .g-header nav .g-menu > .g-dropdown:nth-child(4) > ul {
    padding-left: calc(2.5% + 495px);
  }
}
@media only screen and (max-width: 1440px) {
  .g-header nav .g-menu > .g-dropdown:nth-child(4) > ul {
    padding-left: calc(2.5% + 447px);
  }
}
.g-header nav .g-menu > .g-dropdown:nth-child(6) > ul {
  padding-left: calc(5% + 770px);
}
@media only screen and (max-width: 1600px) {
  .g-header nav .g-menu > .g-dropdown:nth-child(6) > ul {
    padding-left: calc(2.5% + 692px);
  }
}
@media only screen and (max-width: 1440px) {
  .g-header nav .g-menu > .g-dropdown:nth-child(6) > ul {
    padding-left: calc(2.5% + 635px);
  }
}
@media only screen and (max-width: 1230px) {
  .g-header nav .g-menu > .g-dropdown:nth-child(-n+9) > ul {
    padding-left: 0;
  }
}
.g-header nav .g-menu .class-dropdown .item-link > a,
.g-header nav .g-menu .class-dropdown .g-dropdown a {
  padding: 6px 30px;
}
@media only screen and (max-width: 1300px) {
  .g-header nav .g-menu .class-dropdown .item-link > a,
  .g-header nav .g-menu .class-dropdown .g-dropdown a {
    padding: 8px 15px;
  }
}
.g-header nav .g-menu .class-dropdown .item-link > a:hover,
.g-header nav .g-menu .class-dropdown .g-dropdown a:hover {
  color: #FFE666;
}
.g-header nav .g-menu .class-dropdown .item-link > a:nth-of-type(-n+2) {
  text-decoration: underline;
  color: #FFE666;
}
.g-header nav .g-menu .class-dropdown .g-dropdown > a {
  cursor: default;
  color: #FFE666;
}
.g-header nav .g-menu .class-dropdown .g-dropdown ul a {
  color: #fff;
}
.g-header nav .g-menu .class-dropdown .g-dropdown ul a:hover {
  color: #FFE666;
}
.g-header nav .g-menu .class-dropdown .g-dropdown:nth-child(3) > ul {
  padding: 0 20px;
  display: grid;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 15px;
}
@media only screen and (max-width: 1300px) {
  .g-header nav .g-menu .class-dropdown .g-dropdown:nth-child(3) > ul {
    display: grid;
    grid-template-columns: 1fr;
    padding: 0 5px;
    gap: 0;
  }
}
.g-header nav .g-menu .class-dropdown .g-dropdown:nth-child(3) > ul a {
  padding: 6px 10px;
}
@media only screen and (max-width: 1300px) {
  .g-header nav .g-menu .class-dropdown ul.active {
    border-top: 0 !important;
    transition: 0.5s !important;
  }
  .g-header nav .g-menu .class-dropdown .g-dropdown ul {
    max-height: 0;
    overflow: hidden;
    transition: 0.1s;
  }
  .g-header nav .g-menu .class-dropdown .g-dropdown ul li:first-child {
    padding-top: 5px;
  }
  .g-header nav .g-menu .class-dropdown .g-dropdown ul li:last-child {
    padding-bottom: 5px;
  }
  .g-header nav .g-menu .class-dropdown .g-dropdown ul {
    border-radius: 5px;
    background-color: #ffffff;
  }
  .g-header nav .g-menu .class-dropdown .g-dropdown ul a {
    padding: 10px 40px 6px !important;
  }
}
.g-header nav .btn-member,
.g-header nav .btn-Recruiting {
  color: #333333;
  cursor: pointer;
  display: flex;
  margin-right: 25px;
  white-space: nowrap;
}
@media only screen and (max-width: 1300px) {
  .g-header nav .btn-member,
  .g-header nav .btn-Recruiting {
    margin-right: 20px;
  }
}
.g-header nav .btn-member:hover,
.g-header nav .btn-Recruiting:hover {
  color: #4B2F80;
}
@media only screen and (max-width: 1300px) {
  .g-header nav .btn-member.btn-member,
  .g-header nav .btn-Recruiting.btn-member {
    order: 1;
    width: 100%;
    padding: 15px 10px 12px;
    color: #fff;
    background-color: #4B2F80;
    justify-content: center;
    border-radius: 5px;
    margin-right: 0;
  }
  .g-header nav .btn-member.btn-member:hover,
  .g-header nav .btn-Recruiting.btn-member:hover {
    color: #fff !important;
  }
}
.g-header nav .btn-member.btn-member::before,
.g-header nav .btn-Recruiting.btn-member::before {
  margin-right: 3px;
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  width: 20px;
  height: 20px;
  background: url(../images/i-member.svg) no-repeat top 3px center/auto 14px;
}
@media only screen and (max-width: 1300px) {
  .g-header nav .btn-member.btn-member::before,
  .g-header nav .btn-Recruiting.btn-member::before {
    background: url(../images/i-member-w.svg) no-repeat top 3px center/auto 17px;
  }
}
@media only screen and (max-width: 1300px) {
  .g-header nav .btn-member.btn-Recruiting,
  .g-header nav .btn-Recruiting.btn-Recruiting {
    order: 3;
    width: 100%;
    padding: 20px 0 10px;
    color: #4B2F80;
    border-bottom: 1px #dedede solid;
    margin-right: 0;
  }
  .g-header nav .btn-member.btn-Recruiting::before,
  .g-header nav .btn-Recruiting.btn-Recruiting::before {
    display: none;
  }
}
.g-header nav .g-community {
  display: flex;
  gap: 10px;
}
@media only screen and (max-width: 1300px) {
  .g-header nav .g-community {
    gap: 5px;
    order: 4;
    width: 100%;
    height: 0;
    bottom: 0;
    left: 0;
    background-color: #4B2F80;
    transition: 0.1S;
    position: fixed;
  }
  .g-header nav .g-community * {
    font-size: 0.75rem;
  }
}
.g-header nav .g-community a {
  cursor: pointer;
  width: 20px;
  height: 20px;
}
@media only screen and (max-width: 1300px) {
  .g-header nav .g-community a {
    width: 25% !important;
    height: 100%;
    text-align: center;
  }
}
.g-header nav .g-community a span {
  display: none;
}
@media only screen and (max-width: 1300px) {
  .g-header nav .g-community a span {
    width: 100%;
    color: #fff;
    margin-top: 35px;
    display: table;
  }
}
.g-header nav .g-community a.Facebook {
  width: 15px;
  background: url(../images/i-facebook.svg) no-repeat center center/auto 18px;
}
@media only screen and (max-width: 1300px) {
  .g-header nav .g-community a.Facebook {
    background: url(../images/i-facebook-w.svg) no-repeat top 10px center/auto 21px;
  }
}
.g-header nav .g-community a.Line {
  background: url(../images/i-Line.svg) no-repeat center center/auto 18px;
}
@media only screen and (max-width: 1300px) {
  .g-header nav .g-community a.Line {
    background: url(../images/i-Line-w.svg) no-repeat top 10px center/auto 20px;
  }
}
.g-header nav .g-community a.YouTube {
  background: url(../images/i-YouTube.svg) no-repeat center center/auto 14px;
}
@media only screen and (max-width: 1300px) {
  .g-header nav .g-community a.YouTube {
    background: url(../images/i-YouTube-w.svg) no-repeat top 9px center/auto 22px;
  }
}
.g-header nav .g-community a.Instagram {
  background: url(../images/i-Instagram.svg) no-repeat center center/auto 18px;
}
@media only screen and (max-width: 1300px) {
  .g-header nav .g-community a.Instagram {
    background: url(../images/i-Instagram-w.svg) no-repeat top 10px center/auto 20px;
  }
}
.g-header .menu-toggle {
  display: none;
}
@media only screen and (max-width: 1300px) {
  .g-header .menu-toggle:checked ~ .btn-menu {
    background: url(../images/i-menu-close.svg) no-repeat center center/80% auto;
    transition: 0.2s;
  }
  .g-header .menu-toggle:checked ~ nav {
    max-height: 100%;
    min-height: 100%;
    padding: 15px 20px 165px;
    border-top: 1px #dedede solid;
    transition: 0.5s;
  }
  .g-header .menu-toggle:checked ~ nav > .g-community {
    height: 60px;
    transition: 0.3S;
  }
}
@media only screen and (max-width: 1300px) {
  .g-header .btn-menu {
    position: absolute;
    right: 2.5%;
    cursor: pointer;
    width: 25px;
    height: 25px;
    background: url(../images/i-menu-Toggle.svg) no-repeat center center/100% auto;
    transition: 0.2s;
  }
}
@media only screen and (max-width: 1300px) and (max-width: 320px) {
  .g-header .btn-menu {
    width: 8vw;
    height: 8vw;
  }
}

.g-footer {
  position: relative;
  z-index: 2;
}
.g-footer .g-events-links {
  width: 100%;
  padding: 15px;
  background-color: #4B2F80;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
@media only screen and (max-width: 768px) {
  .g-footer .g-events-links {
    display: grid;
  }
}
@media only screen and (max-width: 450px) {
  .g-footer .g-events-links {
    padding: 5vw 1vw;
  }
  .g-footer .g-events-links a,
  .g-footer .g-events-links a span {
    font-size: 4.5vw;
  }
}
.g-footer .g-events-links li:not(:last-child) a {
  border-right: 1px #8a6ac5 solid;
}
.g-footer .g-events-links a {
  font-size: 1.1rem;
  cursor: pointer;
  color: #fff;
  padding: 0 25px;
  margin: 5px 0;
  display: table;
}
.g-footer .g-events-links a span {
  color: #FFE666;
}
.g-footer .g-events-links a:hover {
  color: #FF7A00;
}
.g-footer .g-events-links a:hover span {
  color: #FF7A00;
}
@media only screen and (max-width: 1440px) {
  .g-footer .g-events-links a {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 768px) {
  .g-footer .g-events-links a {
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    border-right: 0 !important;
  }
  .g-footer .g-events-links a::before {
    content: "◆";
    margin-right: 5px;
  }
}
@media only screen and (max-width: 450px) {
  .g-footer .g-events-links a {
    padding: 0 2vw 0 3vw;
  }
}
.g-footer .g-links-box {
  background-color: #333333;
}
.g-footer .g-links-box a {
  color: #fff;
  display: table;
}
.g-footer .g-links-box .g-container {
  display: grid;
  gap: 2.5%;
  grid-template-columns: 1fr 380px;
  padding: 50px 0;
}
@media only screen and (max-width: 1440px) {
  .g-footer .g-links-box .g-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px 0 55px;
  }
}
@media only screen and (max-width: 768px) {
  .g-footer .g-links-box .g-container {
    padding: 20px 0 100px;
  }
  .g-footer .g-links-box .g-container a.active {
    color: #FF7A00;
  }
  .g-footer .g-links-box .g-container a.active::after {
    transform: rotate(0deg) !important;
  }
  .g-footer .g-links-box .g-container ul.active {
    max-height: 1000px !important;
    transition: 0.3s;
  }
}
@media only screen and (max-width: 450px) {
  .g-footer .g-links-box .g-container {
    width: 90%;
  }
}
.g-footer .g-links-box .g-container > ul {
  display: flex;
  justify-content: space-between;
  border-right: 1px #dedede solid;
  padding-right: 3%;
}
@media only screen and (max-width: 1440px) {
  .g-footer .g-links-box .g-container > ul {
    padding-right: 0;
    border-right: 0;
  }
}
@media only screen and (max-width: 768px) {
  .g-footer .g-links-box .g-container > ul {
    flex-direction: column;
    transition: 0.3s;
  }
}
@media only screen and (max-width: 768px) {
  .g-footer .g-links-box .g-container > ul > li {
    border-bottom: 1px #555555 solid;
  }
}
.g-footer .g-links-box .g-container > ul > li > a {
  font-size: 1rem;
  color: #FF7A00;
  padding-bottom: 10px;
}
@media only screen and (max-width: 768px) {
  .g-footer .g-links-box .g-container > ul > li > a {
    color: #fff;
    padding-top: 12px;
    width: 100%;
  }
  .g-footer .g-links-box .g-container > ul > li > a::after {
    content: "";
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    background: url(../images/arrow-w.svg) no-repeat center center/50% auto;
    width: 20px;
    height: 20px;
    float: right;
    transform: rotate(-90deg);
  }
}
@media only screen and (max-width: 768px) {
  .g-footer .g-links-box .g-container > ul ul {
    max-height: 0;
    overflow: hidden;
  }
}
.g-footer .g-links-box .g-container > ul ul a {
  cursor: pointer;
  font-size: 0.95rem;
  padding: 3px 0;
}
@media only screen and (max-width: 1024px) {
  .g-footer .g-links-box .g-container > ul ul a {
    font-size: 0.9rem !important;
  }
}
@media only screen and (max-width: 768px) {
  .g-footer .g-links-box .g-container > ul ul a {
    padding-top: 0;
    padding-bottom: 14px;
  }
}
.g-footer .g-links-box .g-container > ul ul a:hover {
  color: #FFE666;
}
@media only screen and (max-width: 768px) {
  .g-footer .g-links-box .g-container > ul ul a:hover {
    color: #fff;
  }
}
.g-footer .g-links-box .g-information p {
  margin-top: 20px;
}
.g-footer .g-links-box .g-information p span {
  display: block;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #aaaaaa;
}
.g-footer .g-links-box .g-information .btn-contact {
  cursor: pointer;
  margin-top: 15px;
  display: table;
  padding: 7px 10px 5px;
  border: 1px #dedede solid;
}
.g-footer .g-links-box .g-information .btn-contact:hover {
  background-color: #4B2F80;
}
@media only screen and (max-width: 1440px) {
  .g-footer .g-links-box .g-information {
    display: flex;
    align-items: center;
    border-top: 1px #dedede solid;
    padding-top: 20px;
  }
}
@media only screen and (max-width: 768px) {
  .g-footer .g-links-box .g-information {
    border-top: 0;
    flex-direction: column;
  }
}
@media only screen and (max-width: 450px) {
  .g-footer .g-links-box .g-information span {
    letter-spacing: 0;
  }
}
.g-footer .g-links-box .g-logo-footer {
  width: 150px;
  height: 30px;
}
@media only screen and (max-width: 768px) {
  .g-footer .g-links-box .g-logo-footer {
    margin: auto;
    margin-bottom: 20px;
  }
}
@media only screen and (max-width: 320px) {
  .g-footer .g-links-box .g-logo-footer {
    width: 30vw;
    height: 6vw;
  }
}
.g-footer .g-links-box address {
  font-style: normal;
}
@media only screen and (max-width: 1440px) {
  .g-footer .g-links-box address {
    width: 100%;
    text-align: right;
  }
  .g-footer .g-links-box address p {
    margin-top: 5px;
  }
  .g-footer .g-links-box address p span {
    display: inline;
    margin-left: 20px;
  }
  .g-footer .g-links-box address .btn-contact {
    margin-top: 10px;
    float: right;
  }
}
@media only screen and (max-width: 768px) {
  .g-footer .g-links-box address {
    text-align: center;
  }
  .g-footer .g-links-box address p span {
    display: block;
    margin-left: 0;
  }
  .g-footer .g-links-box address .btn-contact {
    float: none;
    margin: auto;
    margin-top: 15px;
  }
}

.g-body .g-all-btn {
  display: flex;
  align-items: center;
  width: 310px;
  gap: 10px;
  bottom: 10px;
  right: 0;
  z-index: 89;
  position: fixed;
}
@media only screen and (max-width: 768px) {
  .g-body .g-all-btn {
    width: 100%;
    height: 50px;
    gap: 0;
    bottom: 0;
    right: 0;
    background-color: #4B2F80;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  }
}
@media only screen and (max-width: 768px) and (max-width: 320px) {
  .g-body .g-all-btn {
    width: 100%;
    height: 45px;
    gap: 0;
    bottom: 0;
    right: 0;
    background-color: #4B2F80;
  }
}
.g-body .g-all-btn .g-ontalk,
.g-body .g-all-btn .g-free {
  cursor: pointer;
  color: #fff;
  padding: 6px 16px 5px;
  border-radius: 50px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
  text-align: center;
}
@media only screen and (max-width: 320px) {
  .g-body .g-all-btn .g-ontalk,
  .g-body .g-all-btn .g-free {
    font-size: 4.5vw;
    width: 44%;
  }
}
.g-body .g-all-btn .g-ontalk::before,
.g-body .g-all-btn .g-free::before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  height: 15px;
  margin-right: 7px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-all-btn .g-ontalk::before,
  .g-body .g-all-btn .g-free::before {
    position: relative;
    top: 1px;
  }
}
@media only screen and (max-width: 320px) {
  .g-body .g-all-btn .g-ontalk::before,
  .g-body .g-all-btn .g-free::before {
    margin-right: 2vw;
  }
}
.g-body .g-all-btn .g-ontalk:hover,
.g-body .g-all-btn .g-free:hover {
  color: #fff;
}
.g-body .g-all-btn .g-ontalk {
  background-color: #4B2F80;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .g-body .g-all-btn .g-ontalk {
    width: calc(50% - 10px);
    padding: 0;
    border-radius: 0;
    box-shadow: 0 0 0;
    border-right: 1px #8a6ac5 solid;
    line-height: 2;
  }
}
.g-body .g-all-btn .g-ontalk:before {
  width: 18px;
  background-image: url(../images/i-ontalk.svg);
}
@media only screen and (max-width: 320px) {
  .g-body .g-all-btn .g-ontalk:before {
    width: 6.5vw;
  }
}
.g-body .g-all-btn .g-ontalk .alert {
  color: #fff;
  background-color: #ff2e0e;
  font-size: 0.75rem;
  line-height: 1.5;
  right: 0;
  top: -8px;
  width: 18px;
  height: 18px;
  border-radius: 15px;
  display: table;
  position: absolute;
}
@media only screen and (max-width: 768px) {
  .g-body .g-all-btn .g-ontalk .alert {
    position: relative;
    display: inline-block;
    top: -2px;
    margin-left: 2%;
  }
}
@media only screen and (max-width: 320px) {
  .g-body .g-all-btn .g-ontalk .alert {
    font-size: 3.5vw;
    top: -1vw;
    width: 6vw;
    height: 6vw;
  }
}
.g-body .g-all-btn .g-free {
  background-color: #FF7A00;
}
@media only screen and (max-width: 768px) {
  .g-body .g-all-btn .g-free {
    width: calc(50% - 48px);
    padding: 0;
    margin-left: 8px;
    box-shadow: 0 0 0;
    line-height: 2;
  }
}
@media only screen and (max-width: 768px) and (max-width: 320px) {
  .g-body .g-all-btn .g-free {
    width: 42.5%;
    margin-left: 3vw;
  }
}
.g-body .g-all-btn .g-free:before {
  width: 11px;
  background-image: url(../images/i-free.svg);
}
@media only screen and (max-width: 320px) {
  .g-body .g-all-btn .g-free:before {
    width: 4vw;
  }
}
.g-body .g-all-btn .gotop {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  display: none;
  cursor: pointer;
  width: 35px;
  height: 35px;
  border-radius: 50px;
  background-color: #4B2F80;
  background-image: url(../images/gotop.svg);
  background-size: 70% auto;
}
@media only screen and (max-width: 768px) {
  .g-body .g-all-btn .gotop {
    width: 48px;
  }
}
@media only screen and (max-width: 320px) {
  .g-body .g-all-btn .gotop {
    width: 12%;
  }
}
.g-body .ontalk-popup .popup-mask .popup-box {
  background-color: #f6f6f6;
}
.g-body .ontalk-popup .popup-mask .popup-box iframe {
  height: calc(85vh - 60px);
}
.g-body.g-free {
  position: relative;
}
.g-body.g-free .popup-title {
  position: absolute;
  top: 0;
  left: 0;
  padding-left: 30px;
  height: 60px;
  z-index: 1;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 450px) {
  .g-body.g-free .popup-title {
    padding-left: 5vw;
  }
  .g-body.g-free .popup-title .close-popup {
    top: calc(30px - 3vw);
  }
}
.g-body.g-free .popup-title .g-logo {
  display: block;
  width: 40%;
  max-width: 160px;
  filter: brightness(10);
}
.g-body.g-free .popup-main {
  max-width: 650px;
}
.g-body.g-free .popup-main .icon-ok {
  margin-bottom: 15px;
}
.g-body.g-free .popup-main .popup-container {
  padding: 40px 0 70px;
}
@media only screen and (max-width: 450px) {
  .g-body.g-free .popup-main .popup-container {
    padding: 8vw 0 14vw;
  }
}
.g-body.g-free .popup-main .popup-container .input-list {
  margin: 25px 0;
}
@media only screen and (max-width: 450px) {
  .g-body.g-free .popup-main .popup-container .input-list {
    margin: 3vw 0;
  }
}
.g-body.g-free .popup-main .box {
  border-radius: 10px;
  overflow: hidden;
  background-color: #F5F5F5;
  padding-bottom: 10px;
}
@media only screen and (max-width: 450px) {
  .g-body.g-free .popup-main .box {
    padding-bottom: 5vw;
  }
}
.g-body.g-free .popup-main .box ul {
  padding: 0 10px;
}
.g-body.g-free .popup-main .image-container {
  padding-bottom: 30%;
}
@media only screen and (max-width: 450px) {
  .g-body.g-free .popup-main .image-container {
    padding-bottom: 38%;
  }
}
.g-body.g-free .popup-main input[type=text],
.g-body.g-free .popup-main select {
  border-bottom: 0;
  border-radius: 4px;
  padding-left: 10px;
}
@media only screen and (max-width: 450px) {
  .g-body.g-free .popup-main input[type=text],
  .g-body.g-free .popup-main select {
    padding: 0 3vw;
  }
}
.g-body.g-free .popup-main input[type=text] {
  color: #7D64AB;
  padding-left: 15px;
}
@media only screen and (max-width: 450px) {
  .g-body.g-free .popup-main input[type=text] {
    padding: 0 4vw;
  }
}
.g-body.g-free .popup-main select[name=prizeList] {
  color: #FF7A00;
  font-size: 1.1rem;
  font-weight: bold;
}
@media only screen and (max-width: 450px) {
  .g-body.g-free .popup-main select[name=prizeList] {
    font-size: 5vw;
  }
}
.g-body.g-free .popup-main .g-iAgree {
  padding-left: 10px;
}

@media only screen and (max-width: 768px) {
  .g-body.g-share .g-main {
    border-radius: 10px;
    min-height: auto;
  }
}
@media only screen and (max-width: 450px) {
  .g-body.g-share .g-main .popup-container {
    padding: 15px 0 75px;
  }
}
.g-body.g-share .g-main.g-popup-regular .h3-title, .g-body.g-share .g-main.g-popup-video .h3-title {
  color: #4B2F80;
  font-weight: bold;
  font-size: 1.42rem;
  line-height: 1.5;
  margin-bottom: 10px;
  display: block;
}
@media only screen and (max-width: 450px) {
  .g-body.g-share .g-main.g-popup-regular .h3-title, .g-body.g-share .g-main.g-popup-video .h3-title {
    font-size: 6.5vw;
    margin-bottom: 2vw;
  }
}
.g-body.g-share .g-main.g-popup-regular article, .g-body.g-share .g-main.g-popup-video article {
  font-size: 1.125rem;
  margin-top: 30px;
}
.g-body.g-share .g-main.g-popup-regular article *, .g-body.g-share .g-main.g-popup-video article * {
  line-height: 1.7;
}
@media only screen and (max-width: 450px) {
  .g-body.g-share .g-main.g-popup-regular article, .g-body.g-share .g-main.g-popup-video article {
    font-size: 5vw;
    margin-top: 5vw;
  }
}
.g-body.g-share .g-main.g-popup-regular .popup-top {
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background-color: #F5F5F5;
  display: flex;
}
@media only screen and (max-width: 550px) {
  .g-body.g-share .g-main.g-popup-regular .popup-top {
    flex-direction: column;
  }
}
.g-body.g-share .g-main.g-popup-regular .popup-top .image-container {
  width: 200px;
  padding-bottom: 180px;
}
@media only screen and (max-width: 550px) {
  .g-body.g-share .g-main.g-popup-regular .popup-top .image-container {
    width: 100%;
    padding-bottom: 85%;
  }
}
.g-body.g-share .g-main.g-popup-regular .popup-top .box {
  width: calc(100% - 200px);
  padding: 20px;
}
@media only screen and (max-width: 550px) {
  .g-body.g-share .g-main.g-popup-regular .popup-top .box {
    width: 100%;
  }
}
@media only screen and (max-width: 450px) {
  .g-body.g-share .g-main.g-popup-regular .popup-top .box {
    padding: 5vw 3vw 8vw 4.5vw;
  }
}
.g-body.g-share .g-main.g-popup-video .video-container {
  height: auto;
  text-align: center;
  padding-bottom: 0;
}
@media only screen and (max-width: 450px) {
  .g-body.g-share .g-main.g-popup-video .video-container {
    border-radius: 10px 10px 0 0;
  }
}
.g-body.g-share .g-main.g-popup-video .video-container::before {
  content: "";
  display: table;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(7px);
  position: absolute;
  z-index: 1;
}
.g-body.g-share .g-main.g-popup-video .fb-video {
  max-width: 350px;
  z-index: 1;
}
@media only screen and (max-width: 450px) {
  .g-body.g-share .g-main.g-popup-video .fb-video {
    max-width: 100%;
  }
}
.g-body.g-share .g-main.g-popup-video .h3-title {
  margin-top: 30px;
}
@media only screen and (max-width: 450px) {
  .g-body.g-share .g-main.g-popup-video .h3-title {
    margin-top: 5vw;
  }
}
.g-body .course-popup .close-popup {
  cursor: pointer;
  position: absolute;
  right: 15px;
  top: 20px;
  width: 20px;
  height: 20px;
  background: url(../images/i-menu-close-w.svg) no-repeat center center/100% auto;
  z-index: 3;
}
@media only screen and (max-width: 320px) {
  .g-body .course-popup .close-popup {
    right: 4vw;
    top: 5vw;
    width: 6vw;
    height: 6vw;
  }
}
.g-body .course-popup .close-popup {
  background-image: url(../images/i-menu-close.svg);
}
@media only screen and (max-width: 768px) {
  .g-body .course-popup .close-popup {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background-color: rgba(75, 47, 128, 0.2);
    background-size: 70% auto;
    top: 10px;
    right: 10px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .course-popup .close-popup {
    width: 8vw;
    height: 8vw;
    margin-left: calc(100% - 10.5vw);
    top: 1vw;
    right: 1vw;
  }
}
.g-body .course-popup .close-popup {
  right: 10px;
  top: 10px;
}
@media only screen and (max-width: 768px) {
  .g-body .course-popup .close-popup {
    right: 5px;
    top: 5px;
  }
}
.g-body .course-popup .popup-container {
  padding-top: 65px !important;
}
@media only screen and (max-width: 450px) {
  .g-body .course-popup .popup-container {
    padding-top: 12vw !important;
  }
}
.g-body .course-popup .popup-container h1 {
  display: block;
}
.g-body .course-popup .m-title {
  border-radius: 15px 15px 0 0;
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  background-color: #555555;
  text-align: center;
  padding: 10px;
  margin-bottom: 25px;
}
@media only screen and (max-width: 450px) {
  .g-body .course-popup .m-title {
    font-size: 5.5vw;
  }
}
.g-body .course-popup .s-title {
  color: #333333;
  font-size: 1.25rem;
  padding: 5px;
  background-color: #F6F1FF;
  text-align: center;
  margin-bottom: 15px;
}
@media only screen and (max-width: 450px) {
  .g-body .course-popup .s-title {
    font-size: 5vw;
    padding: 2vw;
    margin-bottom: 3vw;
  }
}
.g-body .course-popup .ul-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
  margin-bottom: 50px;
}
@media only screen and (max-width: 768px) {
  .g-body .course-popup .ul-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .course-popup .ul-list {
    gap: 10vw;
    margin-bottom: 10vw;
  }
}
.g-body .course-popup .ul-list ol,
.g-body .course-popup .ul-list ul {
  font-size: 1.125rem;
  display: grid;
  gap: 10px;
  margin-left: 30px;
}
@media only screen and (max-width: 450px) {
  .g-body .course-popup .ul-list ol,
  .g-body .course-popup .ul-list ul {
    font-size: 4.5vw;
    gap: 2vw;
    margin-left: 6vw;
  }
}
.g-body .course-popup .ul-list p {
  font-size: 1.125rem;
  line-height: 1.8;
}
@media only screen and (max-width: 450px) {
  .g-body .course-popup .ul-list p {
    font-size: 4.5vw;
  }
}
.g-body .course-popup .ul-list ol {
  list-style: decimal;
}
.g-body .course-popup .ul-list ul {
  list-style: disc;
}
.g-body .course-popup strong {
  font-size: 1.125rem;
}
@media only screen and (max-width: 450px) {
  .g-body .course-popup strong {
    font-size: 6vw;
  }
}
.g-body .course-popup .menu-box {
  border-radius: 10px;
  overflow: hidden;
  background-color: #F5F5F5;
  padding: 20px 30px;
  margin-bottom: 50px;
}
@media only screen and (max-width: 650px) {
  .g-body .course-popup .menu-box {
    padding: 5vw 3vw;
    margin-bottom: 5vw;
  }
}
.g-body .course-popup .menu-box > div {
  color: #7D64AB;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 10px;
}
.g-body .course-popup .menu-box .box-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 10px;
}
@media only screen and (max-width: 1024px) {
  .g-body .course-popup .menu-box .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .g-body .course-popup .menu-box .box-list .image-container {
    display: none;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 650px) {
  .g-body .course-popup .menu-box .box-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    margin-top: 3vw;
  }
}
.g-body .course-popup .menu-box .box-list li {
  cursor: pointer;
}
@media only screen and (min-width: 1025px) {
  .g-body .course-popup .menu-box .box-list li {
    position: relative;
  }
  .g-body .course-popup .menu-box .box-list li .info,
  .g-body .course-popup .menu-box .box-list li > h3,
  .g-body .course-popup .menu-box .box-list li > .h3 {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
    background-color: rgba(41, 41, 41, 0.7);
    text-shadow: 3px 3px 10px #000;
  }
  .g-body .course-popup .menu-box .box-list li .info:hover,
  .g-body .course-popup .menu-box .box-list li > h3:hover,
  .g-body .course-popup .menu-box .box-list li > .h3:hover {
    background-color: rgba(41, 41, 41, 0.2);
  }
  .g-body .course-popup .menu-box .box-list li img {
    transition: 0.3s;
  }
  .g-body .course-popup .menu-box .box-list li:hover img {
    transition: 0.3s;
    transform: scale(1.1);
  }
  .g-body .course-popup .menu-box .box-list li h3,
  .g-body .course-popup .menu-box .box-list li .h3 {
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
  }
}
@media only screen and (min-width: 1025px) and (max-width: 450px) {
  .g-body .course-popup .menu-box .box-list li h3,
  .g-body .course-popup .menu-box .box-list li .h3 {
    font-size: 6vw;
  }
}
@media only screen and (min-width: 1025px) {
  .g-body .course-popup .menu-box .box-list li span {
    font-size: 1rem;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px 10px 4px;
    background-color: #7D64AB;
  }
}
@media only screen and (min-width: 1025px) and (max-width: 450px) {
  .g-body .course-popup .menu-box .box-list li span {
    font-size: 4.8vw;
    padding: 1.2vw 3vw 1.4vw;
  }
}
@media only screen and (min-width: 1025px) {
  .g-body .course-popup .menu-box .box-list li > h3,
  .g-body .course-popup .menu-box .box-list li .h3 {
    display: flex;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .course-popup .menu-box .box-list li {
    border-radius: 10px;
    overflow: hidden;
    border-radius: 10px;
    overflow: hidden;
    border: 1px #dedede solid;
    background-color: #fff;
  }
  .g-body .course-popup .menu-box .box-list li img {
    transition: 0.3s;
  }
  .g-body .course-popup .menu-box .box-list li:hover img {
    transition: 0.3s;
    transform: scale(1.1);
  }
  .g-body .course-popup .menu-box .box-list li > h3,
  .g-body .course-popup .menu-box .box-list li > .h3,
  .g-body .course-popup .menu-box .box-list li .info {
    display: flex;
    align-items: center;
    padding: 20px 20px 0;
    margin-bottom: 20px;
  }
  .g-body .course-popup .menu-box .box-list li > h3 span,
  .g-body .course-popup .menu-box .box-list li > .h3 span,
  .g-body .course-popup .menu-box .box-list li .info span {
    display: inline-block;
    color: #fff;
    background-color: #7D64AB;
    padding: 5px 10px;
    border-radius: 4px;
    margin-right: 10px;
    white-space: nowrap;
  }
  .g-body .course-popup .menu-box .box-list li {
    border: 0;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .course-popup .menu-box .box-list li > h3,
  .g-body .course-popup .menu-box .box-list li > .h3,
  .g-body .course-popup .menu-box .box-list li .info {
    font-size: 5vw;
    padding: 3vw 3vw 0;
    margin-bottom: 3vw;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .course-popup .menu-box .box-list li h3,
  .g-body .course-popup .menu-box .box-list li .h3 {
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    color: #333333;
    font-size: 1.125rem;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .course-popup .menu-box .box-list li h3,
  .g-body .course-popup .menu-box .box-list li .h3 {
    font-size: 5vw;
  }
}
.g-body .course-popup .menu-box .box-list li.active {
  border: 1px solid #FFC700;
}
@media only screen and (min-width: 1025px) {
  .g-body .course-popup .menu-box .box-list li.active .info,
  .g-body .course-popup .menu-box .box-list li.active > h3,
  .g-body .course-popup .menu-box .box-list li.active > .h3 {
    background-color: rgba(41, 41, 41, 0.2);
  }
}
.g-body .course-popup table {
  margin-bottom: 50px;
}
.g-body .course-popup table td,
.g-body .course-popup table th {
  border: 1px #dedede solid;
  text-align: center;
}
.g-body .course-popup table td ol,
.g-body .course-popup table th ol {
  list-style: decimal;
  padding-left: 25px;
  display: grid;
  gap: 5px;
}
.g-body .course-popup table thead {
  color: #fff;
  background-color: #7D64AB;
}
.g-body .course-popup table tbody th {
  color: #7D64AB;
  font-weight: bold;
  white-space: nowrap;
}
@media only screen and (max-width: 450px) {
  .g-body .course-popup table {
    margin-bottom: 10vw;
  }
  .g-body .course-popup table th,
  .g-body .course-popup table td {
    padding: 3vw;
  }
  .g-body .course-popup table th ol,
  .g-body .course-popup table td ol {
    padding-left: 8vw;
  }
  .g-body .course-popup table td {
    text-align: left;
  }
}
.g-body .course-popup table span {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 2px;
  background-color: #F6F1FF;
  margin: 12px 0 5px;
}
@media only screen and (max-width: 450px) {
  .g-body .course-popup .content-title {
    letter-spacing: 2px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .course-popup .tool-list .btn {
    width: 43vw !important;
  }
}
.g-body.japanese-course table td {
  text-align: left;
}
.g-body.japanese-course .box-list li .info span {
  background-color: #091b59;
}
@media only screen and (max-width: 768px) {
  .g-body.japanese-course [class^=course-1-] table td,
  .g-body.japanese-course [class^=course-3-] table td,
  .g-body.japanese-course [class^=course-4-] table td,
  .g-body.japanese-course [class*=course-2-]:not(.course-2-4) table td {
    text-align: left;
  }
  .g-body.japanese-course [class^=course-1-] table thead,
  .g-body.japanese-course [class^=course-3-] table thead,
  .g-body.japanese-course [class^=course-4-] table thead,
  .g-body.japanese-course [class*=course-2-]:not(.course-2-4) table thead {
    display: none;
  }
  .g-body.japanese-course [class^=course-1-] table tbody,
  .g-body.japanese-course [class^=course-3-] table tbody,
  .g-body.japanese-course [class^=course-4-] table tbody,
  .g-body.japanese-course [class*=course-2-]:not(.course-2-4) table tbody {
    border-bottom: 1px #dedede solid;
  }
  .g-body.japanese-course [class^=course-1-] table tbody tr,
  .g-body.japanese-course [class^=course-3-] table tbody tr,
  .g-body.japanese-course [class^=course-4-] table tbody tr,
  .g-body.japanese-course [class*=course-2-]:not(.course-2-4) table tbody tr {
    display: block;
    border: 1px #dedede solid;
    border-bottom: 0;
  }
  .g-body.japanese-course [class^=course-1-] table tbody td,
  .g-body.japanese-course [class^=course-1-] table tbody th,
  .g-body.japanese-course [class^=course-3-] table tbody td,
  .g-body.japanese-course [class^=course-3-] table tbody th,
  .g-body.japanese-course [class^=course-4-] table tbody td,
  .g-body.japanese-course [class^=course-4-] table tbody th,
  .g-body.japanese-course [class*=course-2-]:not(.course-2-4) table tbody td,
  .g-body.japanese-course [class*=course-2-]:not(.course-2-4) table tbody th {
    display: block;
    text-align: left;
    border: 0;
  }
  .g-body.japanese-course [class^=course-1-] table tbody td,
  .g-body.japanese-course [class^=course-3-] table tbody td,
  .g-body.japanese-course [class^=course-4-] table tbody td,
  .g-body.japanese-course [class*=course-2-]:not(.course-2-4) table tbody td {
    padding: 3px 15px 3px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body.japanese-course [class^=course-1-] table tbody td,
  .g-body.japanese-course [class^=course-3-] table tbody td,
  .g-body.japanese-course [class^=course-4-] table tbody td,
  .g-body.japanese-course [class*=course-2-]:not(.course-2-4) table tbody td {
    padding: 1vw 3vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body.japanese-course [class^=course-1-] table tbody td:nth-of-type(1),
  .g-body.japanese-course [class^=course-3-] table tbody td:nth-of-type(1),
  .g-body.japanese-course [class^=course-4-] table tbody td:nth-of-type(1),
  .g-body.japanese-course [class*=course-2-]:not(.course-2-4) table tbody td:nth-of-type(1) {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body.japanese-course [class^=course-1-] table tbody td:nth-of-type(1),
  .g-body.japanese-course [class^=course-3-] table tbody td:nth-of-type(1),
  .g-body.japanese-course [class^=course-4-] table tbody td:nth-of-type(1),
  .g-body.japanese-course [class*=course-2-]:not(.course-2-4) table tbody td:nth-of-type(1) {
    padding-top: 5vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body.japanese-course [class^=course-1-] table tbody td:nth-last-of-type(1),
  .g-body.japanese-course [class^=course-3-] table tbody td:nth-last-of-type(1),
  .g-body.japanese-course [class^=course-4-] table tbody td:nth-last-of-type(1),
  .g-body.japanese-course [class*=course-2-]:not(.course-2-4) table tbody td:nth-last-of-type(1) {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body.japanese-course [class^=course-1-] table tbody td:nth-last-of-type(1),
  .g-body.japanese-course [class^=course-3-] table tbody td:nth-last-of-type(1),
  .g-body.japanese-course [class^=course-4-] table tbody td:nth-last-of-type(1),
  .g-body.japanese-course [class*=course-2-]:not(.course-2-4) table tbody td:nth-last-of-type(1) {
    padding-bottom: 5vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body.japanese-course [class^=course-1-] table tbody th,
  .g-body.japanese-course [class^=course-3-] table tbody th,
  .g-body.japanese-course [class^=course-4-] table tbody th,
  .g-body.japanese-course [class*=course-2-]:not(.course-2-4) table tbody th {
    text-align: center;
    background-color: #F6F1FF;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body.japanese-course [class^=course-1-] table tbody th,
  .g-body.japanese-course [class^=course-3-] table tbody th,
  .g-body.japanese-course [class^=course-4-] table tbody th,
  .g-body.japanese-course [class*=course-2-]:not(.course-2-4) table tbody th {
    font-size: 5vw;
    padding: 2vw 2vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body.japanese-course .course-1-2 .s-title,
  .g-body.japanese-course .course-1-3 .s-title,
  .g-body.japanese-course .course-2-4 .s-title,
  .g-body.japanese-course .course-3-1 .s-title,
  .g-body.japanese-course .course-3-4 .s-title,
  .g-body.japanese-course .course-4-2 .s-title,
  .g-body.japanese-course .course-4-3 .s-title {
    background-color: #F5F5F5;
  }
}
@media only screen and (max-width: 768px) {
  .g-body.japanese-course .course-3-2 table thead {
    display: block;
  }
  .g-body.japanese-course .course-3-2 table thead th:not(:first-of-type) {
    display: none;
  }
  .g-body.japanese-course .course-3-2 table thead th:first-of-type {
    border: 0;
  }
  .g-body.japanese-course .course-3-2 table tbody th::after {
    content: "月";
  }
  .g-body.japanese-course .course-3-2 table tbody td:nth-of-type(1)::before {
    content: "日文名稱：";
  }
  .g-body.japanese-course .course-3-2 table tbody td:nth-of-type(2)::before {
    content: "中文名稱：";
  }
}
.g-body.japanese-course .course-3-3 .ul-list,
.g-body.japanese-course .course-3-4 .ul-list,
.g-body.japanese-course .course-4-2 .ul-list {
  display: grid;
  grid-template-columns: 1fr;
}
@media only screen and (max-width: 768px) {
  .g-body.business-english .course-2 td,
  .g-body.business-english .course-3 td,
  .g-body.business-english .course-8 td {
    text-align: left;
  }
  .g-body.business-english .course-2 thead,
  .g-body.business-english .course-3 thead,
  .g-body.business-english .course-8 thead {
    display: none;
  }
  .g-body.business-english .course-2 tbody,
  .g-body.business-english .course-3 tbody,
  .g-body.business-english .course-8 tbody {
    border-bottom: 1px #dedede solid;
  }
  .g-body.business-english .course-2 tbody tr,
  .g-body.business-english .course-3 tbody tr,
  .g-body.business-english .course-8 tbody tr {
    display: block;
    border: 1px #dedede solid;
    border-bottom: 0;
  }
  .g-body.business-english .course-2 tbody td,
  .g-body.business-english .course-2 tbody th,
  .g-body.business-english .course-3 tbody td,
  .g-body.business-english .course-3 tbody th,
  .g-body.business-english .course-8 tbody td,
  .g-body.business-english .course-8 tbody th {
    display: block;
    text-align: left;
    border: 0;
  }
  .g-body.business-english .course-2 tbody td,
  .g-body.business-english .course-3 tbody td,
  .g-body.business-english .course-8 tbody td {
    padding: 3px 15px 3px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body.business-english .course-2 tbody td,
  .g-body.business-english .course-3 tbody td,
  .g-body.business-english .course-8 tbody td {
    padding: 1vw 3vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body.business-english .course-2 tbody td:nth-of-type(1),
  .g-body.business-english .course-3 tbody td:nth-of-type(1),
  .g-body.business-english .course-8 tbody td:nth-of-type(1) {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body.business-english .course-2 tbody td:nth-of-type(1),
  .g-body.business-english .course-3 tbody td:nth-of-type(1),
  .g-body.business-english .course-8 tbody td:nth-of-type(1) {
    padding-top: 5vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body.business-english .course-2 tbody td:nth-last-of-type(1),
  .g-body.business-english .course-3 tbody td:nth-last-of-type(1),
  .g-body.business-english .course-8 tbody td:nth-last-of-type(1) {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body.business-english .course-2 tbody td:nth-last-of-type(1),
  .g-body.business-english .course-3 tbody td:nth-last-of-type(1),
  .g-body.business-english .course-8 tbody td:nth-last-of-type(1) {
    padding-bottom: 5vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body.business-english .course-2 tbody th,
  .g-body.business-english .course-3 tbody th,
  .g-body.business-english .course-8 tbody th {
    text-align: center;
    background-color: #F6F1FF;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body.business-english .course-2 tbody th,
  .g-body.business-english .course-3 tbody th,
  .g-body.business-english .course-8 tbody th {
    font-size: 5vw;
    padding: 2vw 2vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body.business-english .course-2 .s-title,
  .g-body.business-english .course-3 .s-title,
  .g-body.business-english .course-8 .s-title {
    background-color: #F5F5F5;
  }
}
.g-body.business-english .course-4 th[rowspan],
.g-body.business-english .course-5 th[rowspan],
.g-body.business-english .course-6 th[rowspan],
.g-body.business-english .course-7 th[rowspan] {
  white-space: normal;
}
@media only screen and (max-width: 650px) {
  .g-body.business-english .course-4 thead,
  .g-body.business-english .course-5 thead,
  .g-body.business-english .course-6 thead,
  .g-body.business-english .course-7 thead {
    display: none;
  }
  .g-body.business-english .course-4 tbody,
  .g-body.business-english .course-5 tbody,
  .g-body.business-english .course-6 tbody,
  .g-body.business-english .course-7 tbody {
    border: 1px #dedede solid;
    border-top: 0;
  }
  .g-body.business-english .course-4 tbody tr,
  .g-body.business-english .course-5 tbody tr,
  .g-body.business-english .course-6 tbody tr,
  .g-body.business-english .course-7 tbody tr {
    display: flex;
    flex-wrap: wrap;
  }
  .g-body.business-english .course-4 tbody tr:first-child th[rowspan],
  .g-body.business-english .course-5 tbody tr:first-child th[rowspan],
  .g-body.business-english .course-6 tbody tr:first-child th[rowspan],
  .g-body.business-english .course-7 tbody tr:first-child th[rowspan] {
    margin-top: 0;
  }
  .g-body.business-english .course-4 tbody tr:last-child td,
  .g-body.business-english .course-5 tbody tr:last-child td,
  .g-body.business-english .course-6 tbody tr:last-child td,
  .g-body.business-english .course-7 tbody tr:last-child td {
    padding-bottom: 20px;
  }
  .g-body.business-english .course-4 tbody tr th,
  .g-body.business-english .course-4 tbody tr td,
  .g-body.business-english .course-5 tbody tr th,
  .g-body.business-english .course-5 tbody tr td,
  .g-body.business-english .course-6 tbody tr th,
  .g-body.business-english .course-6 tbody tr td,
  .g-body.business-english .course-7 tbody tr th,
  .g-body.business-english .course-7 tbody tr td {
    border: 0;
    padding: 5px;
  }
  .g-body.business-english .course-4 tbody tr th,
  .g-body.business-english .course-5 tbody tr th,
  .g-body.business-english .course-6 tbody tr th,
  .g-body.business-english .course-7 tbody tr th {
    width: 12%;
  }
  .g-body.business-english .course-4 tbody tr td,
  .g-body.business-english .course-5 tbody tr td,
  .g-body.business-english .course-6 tbody tr td,
  .g-body.business-english .course-7 tbody tr td {
    width: 88%;
    text-align: left;
  }
  .g-body.business-english .course-4 tbody tr th[rowspan],
  .g-body.business-english .course-5 tbody tr th[rowspan],
  .g-body.business-english .course-6 tbody tr th[rowspan],
  .g-body.business-english .course-7 tbody tr th[rowspan] {
    width: 100%;
    border-top: 1px #dedede solid;
    padding-top: 30px;
    margin: 20px 0 10px 0;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body.business-english .course-4 tbody tr th[rowspan],
  .g-body.business-english .course-5 tbody tr th[rowspan],
  .g-body.business-english .course-6 tbody tr th[rowspan],
  .g-body.business-english .course-7 tbody tr th[rowspan] {
    font-size: 5.2vw;
    padding-top: 10vw;
    margin: 5vw 0 3vw 0;
  }
}
@media only screen and (max-width: 650px) {
  .g-body.business-english .course-4 th[rowspan],
  .g-body.business-english .course-5 th[rowspan],
  .g-body.business-english .course-6 th[rowspan],
  .g-body.business-english .course-7 th[rowspan] {
    background-color: #F6F1FF;
    padding-top: 3vw !important;
  }
  .g-body.business-english .course-4 .popup-container table tbody td:nth-of-type(1),
  .g-body.business-english .course-5 .popup-container table tbody td:nth-of-type(1),
  .g-body.business-english .course-6 .popup-container table tbody td:nth-of-type(1),
  .g-body.business-english .course-7 .popup-container table tbody td:nth-of-type(1) {
    padding-bottom: 0;
  }
  .g-body.business-english .course-4 .popup-container table tbody td:nth-of-type(2),
  .g-body.business-english .course-5 .popup-container table tbody td:nth-of-type(2),
  .g-body.business-english .course-6 .popup-container table tbody td:nth-of-type(2),
  .g-body.business-english .course-7 .popup-container table tbody td:nth-of-type(2) {
    padding-left: 11.5vw;
    padding-top: 0;
  }
  .g-body.business-english .course-4 .popup-container table tbody tr:last-child td:nth-of-type(1),
  .g-body.business-english .course-5 .popup-container table tbody tr:last-child td:nth-of-type(1),
  .g-body.business-english .course-6 .popup-container table tbody tr:last-child td:nth-of-type(1),
  .g-body.business-english .course-7 .popup-container table tbody tr:last-child td:nth-of-type(1) {
    padding-bottom: 5px;
  }
}
.g-body.life-english .course-popup th[rowspan] {
  white-space: normal;
}
@media only screen and (max-width: 650px) {
  .g-body.life-english .course-popup thead {
    display: none;
  }
  .g-body.life-english .course-popup tbody {
    border: 1px #dedede solid;
    border-top: 0;
  }
  .g-body.life-english .course-popup tbody tr {
    display: flex;
    flex-wrap: wrap;
  }
  .g-body.life-english .course-popup tbody tr:first-child th[rowspan] {
    margin-top: 0;
  }
  .g-body.life-english .course-popup tbody tr:last-child td {
    padding-bottom: 20px;
  }
  .g-body.life-english .course-popup tbody tr th,
  .g-body.life-english .course-popup tbody tr td {
    border: 0;
    padding: 5px;
  }
  .g-body.life-english .course-popup tbody tr th {
    width: 12%;
  }
  .g-body.life-english .course-popup tbody tr td {
    width: 88%;
    text-align: left;
  }
  .g-body.life-english .course-popup tbody tr th[rowspan] {
    width: 100%;
    border-top: 1px #dedede solid;
    padding-top: 30px;
    margin: 20px 0 10px 0;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body.life-english .course-popup tbody tr th[rowspan] {
    font-size: 5.2vw;
    padding-top: 10vw;
    margin: 5vw 0 3vw 0;
  }
}
@media only screen and (max-width: 650px) {
  .g-body.life-english .course-popup th[rowspan] {
    background-color: #F6F1FF;
    padding-top: 3vw !important;
  }
  .g-body.life-english .course-popup .popup-container table tbody td:nth-of-type(1) {
    padding-bottom: 0;
  }
  .g-body.life-english .course-popup .popup-container table tbody td:nth-of-type(2) {
    padding-left: 11.5vw;
    padding-top: 0;
  }
  .g-body.life-english .course-popup .popup-container table tbody tr:last-child td:nth-of-type(1) {
    padding-bottom: 5px;
  }
}
@media only screen and (max-width: 768px) {
  .g-body.ielts .course-2 td,
  .g-body.ielts .course-3 td {
    text-align: left;
  }
  .g-body.ielts .course-2 thead,
  .g-body.ielts .course-3 thead {
    display: none;
  }
  .g-body.ielts .course-2 tbody,
  .g-body.ielts .course-3 tbody {
    border-bottom: 1px #dedede solid;
  }
  .g-body.ielts .course-2 tbody tr,
  .g-body.ielts .course-3 tbody tr {
    display: block;
    border: 1px #dedede solid;
    border-bottom: 0;
  }
  .g-body.ielts .course-2 tbody td,
  .g-body.ielts .course-2 tbody th,
  .g-body.ielts .course-3 tbody td,
  .g-body.ielts .course-3 tbody th {
    display: block;
    text-align: left;
    border: 0;
  }
  .g-body.ielts .course-2 tbody td,
  .g-body.ielts .course-3 tbody td {
    padding: 3px 15px 3px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body.ielts .course-2 tbody td,
  .g-body.ielts .course-3 tbody td {
    padding: 1vw 3vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body.ielts .course-2 tbody td:nth-of-type(1),
  .g-body.ielts .course-3 tbody td:nth-of-type(1) {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body.ielts .course-2 tbody td:nth-of-type(1),
  .g-body.ielts .course-3 tbody td:nth-of-type(1) {
    padding-top: 5vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body.ielts .course-2 tbody td:nth-last-of-type(1),
  .g-body.ielts .course-3 tbody td:nth-last-of-type(1) {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body.ielts .course-2 tbody td:nth-last-of-type(1),
  .g-body.ielts .course-3 tbody td:nth-last-of-type(1) {
    padding-bottom: 5vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body.ielts .course-2 tbody th,
  .g-body.ielts .course-3 tbody th {
    text-align: center;
    background-color: #F6F1FF;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body.ielts .course-2 tbody th,
  .g-body.ielts .course-3 tbody th {
    font-size: 5vw;
    padding: 2vw 2vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body.ielts .course-2 .s-title,
  .g-body.ielts .course-3 .s-title {
    background-color: #F5F5F5;
  }
}
@media only screen and (max-width: 768px) {
  .g-body.gept .course-3 td {
    text-align: left;
  }
  .g-body.gept .course-3 thead {
    display: none;
  }
  .g-body.gept .course-3 tbody {
    border-bottom: 1px #dedede solid;
  }
  .g-body.gept .course-3 tbody tr {
    display: block;
    border: 1px #dedede solid;
    border-bottom: 0;
  }
  .g-body.gept .course-3 tbody td,
  .g-body.gept .course-3 tbody th {
    display: block;
    text-align: left;
    border: 0;
  }
  .g-body.gept .course-3 tbody td {
    padding: 3px 15px 3px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body.gept .course-3 tbody td {
    padding: 1vw 3vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body.gept .course-3 tbody td:nth-of-type(1) {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body.gept .course-3 tbody td:nth-of-type(1) {
    padding-top: 5vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body.gept .course-3 tbody td:nth-last-of-type(1) {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body.gept .course-3 tbody td:nth-last-of-type(1) {
    padding-bottom: 5vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body.gept .course-3 tbody th {
    text-align: center;
    background-color: #F6F1FF;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body.gept .course-3 tbody th {
    font-size: 5vw;
    padding: 2vw 2vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body.gept .course-3 .s-title {
    background-color: #F5F5F5;
  }
}
@media only screen and (max-width: 768px) {
  .g-body.ted .course-popup td, .g-body.basic-listening .course-popup td, .g-body.cnn .course-popup td {
    text-align: left;
  }
  .g-body.ted .course-popup thead, .g-body.basic-listening .course-popup thead, .g-body.cnn .course-popup thead {
    display: none;
  }
  .g-body.ted .course-popup tbody, .g-body.basic-listening .course-popup tbody, .g-body.cnn .course-popup tbody {
    border-bottom: 1px #dedede solid;
  }
  .g-body.ted .course-popup tbody tr, .g-body.basic-listening .course-popup tbody tr, .g-body.cnn .course-popup tbody tr {
    display: block;
    border: 1px #dedede solid;
    border-bottom: 0;
  }
  .g-body.ted .course-popup tbody td,
  .g-body.ted .course-popup tbody th, .g-body.basic-listening .course-popup tbody td,
  .g-body.basic-listening .course-popup tbody th, .g-body.cnn .course-popup tbody td,
  .g-body.cnn .course-popup tbody th {
    display: block;
    text-align: left;
    border: 0;
  }
  .g-body.ted .course-popup tbody td, .g-body.basic-listening .course-popup tbody td, .g-body.cnn .course-popup tbody td {
    padding: 3px 15px 3px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body.ted .course-popup tbody td, .g-body.basic-listening .course-popup tbody td, .g-body.cnn .course-popup tbody td {
    padding: 1vw 3vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body.ted .course-popup tbody td:nth-of-type(1), .g-body.basic-listening .course-popup tbody td:nth-of-type(1), .g-body.cnn .course-popup tbody td:nth-of-type(1) {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body.ted .course-popup tbody td:nth-of-type(1), .g-body.basic-listening .course-popup tbody td:nth-of-type(1), .g-body.cnn .course-popup tbody td:nth-of-type(1) {
    padding-top: 5vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body.ted .course-popup tbody td:nth-last-of-type(1), .g-body.basic-listening .course-popup tbody td:nth-last-of-type(1), .g-body.cnn .course-popup tbody td:nth-last-of-type(1) {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body.ted .course-popup tbody td:nth-last-of-type(1), .g-body.basic-listening .course-popup tbody td:nth-last-of-type(1), .g-body.cnn .course-popup tbody td:nth-last-of-type(1) {
    padding-bottom: 5vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body.ted .course-popup tbody th, .g-body.basic-listening .course-popup tbody th, .g-body.cnn .course-popup tbody th {
    text-align: center;
    background-color: #F6F1FF;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body.ted .course-popup tbody th, .g-body.basic-listening .course-popup tbody th, .g-body.cnn .course-popup tbody th {
    font-size: 5vw;
    padding: 2vw 2vw;
  }
}
.g-body.alive .popup-container .ul-list {
  display: grid;
  grid-template-columns: 1fr;
}
.g-body.alive .course-popup th[rowspan] {
  white-space: normal;
}
@media only screen and (max-width: 650px) {
  .g-body.alive .course-popup thead {
    display: none;
  }
  .g-body.alive .course-popup tbody {
    border: 1px #dedede solid;
    border-top: 0;
  }
  .g-body.alive .course-popup tbody tr {
    display: flex;
    flex-wrap: wrap;
  }
  .g-body.alive .course-popup tbody tr:first-child th[rowspan] {
    margin-top: 0;
  }
  .g-body.alive .course-popup tbody tr:last-child td {
    padding-bottom: 20px;
  }
  .g-body.alive .course-popup tbody tr th,
  .g-body.alive .course-popup tbody tr td {
    border: 0;
    padding: 5px;
  }
  .g-body.alive .course-popup tbody tr th {
    width: 12%;
  }
  .g-body.alive .course-popup tbody tr td {
    width: 88%;
    text-align: left;
  }
  .g-body.alive .course-popup tbody tr th[rowspan] {
    width: 100%;
    border-top: 1px #dedede solid;
    padding-top: 30px;
    margin: 20px 0 10px 0;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body.alive .course-popup tbody tr th[rowspan] {
    font-size: 5.2vw;
    padding-top: 10vw;
    margin: 5vw 0 3vw 0;
  }
}
@media only screen and (max-width: 650px) {
  .g-body.alive .course-popup th[rowspan] {
    background-color: #F6F1FF;
    padding-top: 3vw !important;
  }
  .g-body.alive .course-popup .popup-container table tbody td:nth-of-type(1) {
    padding-bottom: 0;
  }
  .g-body.alive .course-popup .popup-container table tbody td:nth-of-type(2) {
    padding-left: 11.5vw;
    padding-top: 0;
  }
  .g-body.alive .course-popup .popup-container table tbody tr:last-child td:nth-of-type(1) {
    padding-bottom: 5px;
  }
}
@media only screen and (max-width: 768px) {
  .g-body.english-writing-course .course-popup td {
    text-align: left;
  }
  .g-body.english-writing-course .course-popup thead {
    display: none;
  }
  .g-body.english-writing-course .course-popup tbody {
    border-bottom: 1px #dedede solid;
  }
  .g-body.english-writing-course .course-popup tbody tr {
    display: block;
    border: 1px #dedede solid;
    border-bottom: 0;
  }
  .g-body.english-writing-course .course-popup tbody td,
  .g-body.english-writing-course .course-popup tbody th {
    display: block;
    text-align: left;
    border: 0;
  }
  .g-body.english-writing-course .course-popup tbody td {
    padding: 3px 15px 3px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body.english-writing-course .course-popup tbody td {
    padding: 1vw 3vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body.english-writing-course .course-popup tbody td:nth-of-type(1) {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body.english-writing-course .course-popup tbody td:nth-of-type(1) {
    padding-top: 5vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body.english-writing-course .course-popup tbody td:nth-last-of-type(1) {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body.english-writing-course .course-popup tbody td:nth-last-of-type(1) {
    padding-bottom: 5vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body.english-writing-course .course-popup tbody th {
    text-align: center;
    background-color: #F6F1FF;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body.english-writing-course .course-popup tbody th {
    font-size: 5vw;
    padding: 2vw 2vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body.english-writing-course .course-popup tbody tr th[rowspan]:nth-of-type(1) {
    padding-bottom: 0;
  }
  .g-body.english-writing-course .course-popup tbody tr th[rowspan]:nth-of-type(2) {
    padding-top: 0;
  }
}
.g-body.g-iframe.g-share, .g-body.g-iframe.course {
  background: url(../courses/images/bg-iframe.webp) center center/cover no-repeat fixed;
}
.g-body.g-iframe.g-share .iframe-header, .g-body.g-iframe.course .iframe-header {
  position: sticky;
  top: 0;
  z-index: 2;
}
.g-body.g-iframe.g-share .iframe-header .close-popup, .g-body.g-iframe.course .iframe-header .close-popup {
  cursor: pointer;
  position: absolute;
  right: 15px;
  top: 20px;
  width: 20px;
  height: 20px;
  background: url(../images/i-menu-close-w.svg) no-repeat center center/100% auto;
  z-index: 3;
}
@media only screen and (max-width: 320px) {
  .g-body.g-iframe.g-share .iframe-header .close-popup, .g-body.g-iframe.course .iframe-header .close-popup {
    right: 4vw;
    top: 5vw;
    width: 6vw;
    height: 6vw;
  }
}
.g-body.g-iframe.g-share .iframe-header .popup-title, .g-body.g-iframe.course .iframe-header .popup-title {
  width: 100%;
  padding-left: 30px;
  height: 60px;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 450px) {
  .g-body.g-iframe.g-share .iframe-header .popup-title, .g-body.g-iframe.course .iframe-header .popup-title {
    padding-left: 5vw;
  }
  .g-body.g-iframe.g-share .iframe-header .popup-title .close-popup, .g-body.g-iframe.course .iframe-header .popup-title .close-popup {
    top: calc(30px - 3vw);
  }
}
.g-body.g-iframe.g-share .iframe-header .popup-title .g-logo, .g-body.g-iframe.course .iframe-header .popup-title .g-logo {
  display: block;
  width: 40%;
  max-width: 160px;
  filter: brightness(10);
}
.g-body .level-main .close-popup {
  cursor: pointer;
  position: absolute;
  right: 15px;
  top: 20px;
  width: 20px;
  height: 20px;
  background: url(../images/i-menu-close-w.svg) no-repeat center center/100% auto;
  z-index: 3;
}
@media only screen and (max-width: 320px) {
  .g-body .level-main .close-popup {
    right: 4vw;
    top: 5vw;
    width: 6vw;
    height: 6vw;
  }
}
.g-body .level-main .close-popup {
  background-image: url(../images/i-menu-close.svg);
}
@media only screen and (max-width: 768px) {
  .g-body .level-main .close-popup {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background-color: rgba(75, 47, 128, 0.2);
    background-size: 70% auto;
    top: 10px;
    right: 10px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .level-main .close-popup {
    width: 8vw;
    height: 8vw;
    margin-left: calc(100% - 10.5vw);
    top: 1vw;
    right: 1vw;
  }
}
.g-body .level-main .content-title span {
  font-weight: bold;
  color: #7D64AB;
}
.g-body .level-main .popup-container {
  padding: 50px 0 75px;
}
.g-body .level-main ul {
  border-top: 1px #dedede solid;
  margin-bottom: 60px;
}
.g-body .level-main ul li {
  border-bottom: 1px #dedede solid;
  border-right: 1px #dedede solid;
  padding: 20px;
}
.g-body .level-main ul li:nth-child(1) {
  border-left: 5px solid #cccccc;
}
.g-body .level-main ul li:nth-child(1) i {
  background-color: #cccccc;
}
.g-body .level-main ul li:nth-child(2) {
  border-left: 5px solid #FFC700;
}
.g-body .level-main ul li:nth-child(2) i {
  background-color: #FFC700;
}
.g-body .level-main ul li:nth-child(3) {
  border-left: 5px solid #C4D40A;
}
.g-body .level-main ul li:nth-child(3) i {
  background-color: #C4D40A;
}
.g-body .level-main ul li:nth-child(4) {
  border-left: 5px solid #36A2EB;
}
.g-body .level-main ul li:nth-child(4) i {
  background-color: #36A2EB;
}
.g-body .level-main ul li:nth-child(5) {
  border-left: 5px solid #7D64AB;
}
.g-body .level-main ul li:nth-child(5) i {
  background-color: #7D64AB;
}
.g-body .level-main ul li:nth-child(6) {
  border-left: 5px solid #FF6384;
}
.g-body .level-main ul li:nth-child(6) i {
  background-color: #FF6384;
}
.g-body .level-main ul li:nth-child(7) {
  border-left: 5px solid #FF9F40;
}
.g-body .level-main ul li:nth-child(7) i {
  background-color: #FF9F40;
}
.g-body .level-main ul div {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 15px 12px;
  margin-bottom: 20px;
}
.g-body .level-main ul i {
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  width: 35px;
  height: 35px;
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
}
.g-body .level-main ul h3 {
  font-size: 1.875rem;
  line-height: 1;
}
.g-body .level-main ul span {
  font-size: 1.25rem;
  padding-left: 10px;
  border-left: 1px #dedede solid;
  height: 1.3rem;
  margin-bottom: 7px;
}
@media only screen and (max-width: 768px) {
  .g-body .level-main ul span {
    height: auto;
    margin-bottom: -2px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .level-main ul span {
    width: 100%;
    font-size: 5vw;
    padding: 0 0 10px;
    border-left: 0;
    border-bottom: 1px #dedede solid;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .level-main ul {
    border-top: 1px #dedede solid;
    display: grid;
    gap: 5vw;
  }
  .g-body .level-main ul li {
    padding: 5vw 3vw;
    border: 1px #dedede solid;
  }
  .g-body .level-main ul div {
    gap: 5vw 2vw;
    margin-bottom: 5vw;
  }
  .g-body .level-main ul i {
    width: 8vw;
    height: 8vw;
    font-size: 6vw;
  }
  .g-body .level-main ul h3 {
    font-size: 7vw;
  }
}
.g-body .level-main table {
  display: flex;
  border-bottom: 1px #dedede solid;
  border-right: 1px #dedede solid;
}
.g-body .level-main table td,
.g-body .level-main table th {
  display: flex;
  align-items: center;
  border-top: 1px #dedede solid;
  border-left: 1px #dedede solid;
  height: 65px;
}
.g-body .level-main table thead th {
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1;
}
.g-body .level-main table thead th span {
  width: 100%;
  font-size: 1rem;
}
.g-body .level-main table thead th:nth-child(1) {
  background-color: #EEEEEE;
}
.g-body .level-main table thead th:nth-child(5) {
  display: block;
}
.g-body .level-main table tbody {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  width: 100%;
}
.g-body .level-main table tbody th {
  color: #fff;
}
.g-body .level-main table tbody th div {
  text-align: left;
  display: flex;
  align-items: flex-end;
}
.g-body .level-main table tbody th span {
  font-size: 3rem;
  line-height: 1;
  margin-right: 5px;
  margin-bottom: -3px;
}
@media only screen and (max-width: 450px) {
  .g-body .level-main table tbody th span {
    font-size: 14vw;
    margin-right: 1vw;
  }
}
.g-body .level-main table tbody tr:nth-child(1) th {
  background-color: #FFC700;
}
.g-body .level-main table tbody tr:nth-child(2) th {
  background-color: #C4D40A;
}
.g-body .level-main table tbody tr:nth-child(3) th {
  background-color: #36A2EB;
}
.g-body .level-main table tbody tr:nth-child(4) th {
  background-color: #7D64AB;
}
.g-body .level-main table tbody tr:nth-child(5) th {
  background-color: #FF6384;
}
.g-body .level-main table tbody tr:nth-child(6) th {
  background-color: #FF9F40;
}
.g-body .level-main table tbody tr td {
  font-size: 1.125rem;
}
@media only screen and (max-width: 1150px) {
  .g-body .level-main table thead {
    display: none;
  }
  .g-body .level-main table tbody {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .g-body .level-main table tbody tr td {
    font-size: 1.125rem;
  }
  .g-body .level-main table tbody tr td::before {
    letter-spacing: 0;
    width: 100px;
    margin-right: 20px;
    font-weight: bold;
  }
  .g-body .level-main table tbody tr td:nth-child(2)::before {
    content: "CEFR";
  }
  .g-body .level-main table tbody tr td:nth-child(3)::before {
    content: "TOEIC";
  }
  .g-body .level-main table tbody tr td:nth-child(4)::before {
    content: "IELTS";
  }
  .g-body .level-main table tbody tr td:nth-child(5)::before {
    content: "TOEFL\a(CBT/iBT)";
  }
  .g-body .level-main table tbody tr td:nth-child(6)::before {
    content: "GEPT";
  }
}
@media only screen and (max-width: 768px) {
  .g-body .level-main table td,
  .g-body .level-main table th {
    padding: 0 5px;
    height: 50px;
  }
  .g-body .level-main table tbody tr td {
    font-size: 1rem;
  }
  .g-body .level-main table tbody tr td::before {
    width: 80px;
    margin-right: 20px;
  }
  .g-body .level-main table tbody tr td:nth-child(5) {
    height: 70px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .level-main table td {
    padding: 0 1.5vw;
    height: 14vw;
  }
  .g-body .level-main table th {
    padding: 0 2.5vw;
    height: 17vw;
  }
  .g-body .level-main table th div {
    line-height: 1.2;
  }
  .g-body .level-main table tbody tr td {
    font-size: 4vw;
    letter-spacing: 0;
  }
  .g-body .level-main table tbody tr td::before {
    font-size: 4vw;
    width: 21vw;
    margin-right: 0;
  }
  .g-body .level-main table tbody tr td:nth-child(5) {
    height: 15vw;
  }
}

.g-body .g-main.course .breadcrumbs li .home {
  background: url(../images/i-home.svg) no-repeat top 4.5px center/auto 16px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .breadcrumbs li .home {
    background: url(../images/i-home.svg) no-repeat top 1.7vw center/auto 4.5vw;
  }
}
.g-body .g-main.course section h2 span {
  letter-spacing: 4px;
  font-weight: bold;
}
.g-body .g-main.course section .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course section .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main.course section .g-container {
  font-size: 1.125rem;
}
.g-body .g-main.course section .g-container p {
  font-size: 1.125rem;
  line-height: 1.8;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course section .g-container p {
    font-size: 4.5vw;
  }
}
.g-body .g-main.course section .g-container p a {
  color: #7D64AB;
  text-decoration: underline;
}
.g-body .g-main.course section .g-container p a:hover {
  color: #FF7A00;
}
.g-body .g-main.course section .g-container p:not(:last-of-type) {
  margin-bottom: 10px;
}
.g-body .g-main.course section .g-container p b {
  color: #000;
  font-size: 1.25rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course section .g-container p b {
    font-size: 4.8vw;
  }
}
.g-body .g-main.course section .g-container i.fa-solid {
  font-weight: 900;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course section .g-container > p {
    padding: 0 3vw;
  }
}
.g-body .g-main.course section .g-search {
  margin-top: 30px;
}
.g-body .g-main.course section .g-search .search-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.course section .g-search .search-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
.g-body .g-main.course section .ol-point {
  margin-bottom: 35px;
}
.g-body .g-main.course section .ol-point li {
  color: #333333;
  position: relative;
  padding-left: 20px;
}
.g-body .g-main.course section .ol-point li::before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background-color: #FF9F40;
  left: 0;
  top: 6px;
  position: absolute;
}
.g-body .g-main.course section .ol-point li:not(:last-child) {
  margin-bottom: 15px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course section .ol-point li {
    font-size: 4.8vw;
    padding-left: 7.5vw;
  }
  .g-body .g-main.course section .ol-point li::before {
    width: 4vw;
    height: 4vw;
    border-radius: 4vw;
    top: 1.2vw;
    left: 1.5vw;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course section .ol-point {
    margin-bottom: 10vw;
  }
}
.g-body .g-main.course section .table-article {
  margin: 15px 0 35px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course section .table-article td {
    padding: 3vw 2vw;
  }
}
.g-body .g-main.course section .table-color td {
  padding: 20px 15px;
}
.g-body .g-main.course section .table-color td:nth-child(1) {
  width: 20px;
}
.g-body .g-main.course section .table-date th {
  white-space: normal;
}
.g-body .g-main.course section .table-date tbody td {
  padding: 20px 15px;
  text-align: center;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course section .table-date tbody td:nth-child(2) {
    padding-top: 5vw;
  }
}
.g-body .g-main.course section .table-date tbody td[rowspan] {
  font-size: 1.125em;
  font-weight: bold;
  color: #7D64AB;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course section .table-date tbody td[rowspan] {
    font-size: 5vw;
    color: #fff;
    text-align: center;
    background-color: #7D64AB;
    padding: 3vw 0 2.2vw !important;
  }
}
.g-body .g-main.course section .table-date tbody td[colspan] {
  text-align: left;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course section .table-date tbody td[colspan] {
    background-color: #F6F1FF;
    margin-bottom: 5vw;
    border-bottom: 1px #dedede solid;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course section .table-date td {
    text-align: left;
  }
  .g-body .g-main.course section .table-date thead {
    display: none;
  }
  .g-body .g-main.course section .table-date tbody {
    border-bottom: 1px #dedede solid;
  }
  .g-body .g-main.course section .table-date tbody tr {
    display: block;
    border: 1px #dedede solid;
    border-bottom: 0;
  }
  .g-body .g-main.course section .table-date tbody td,
  .g-body .g-main.course section .table-date tbody th {
    display: block;
    text-align: left;
    border: 0;
  }
  .g-body .g-main.course section .table-date tbody td {
    padding: 3px 15px 3px;
  }
  .g-body .g-main.course section .table-date {
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.course section .table-date tbody td {
    padding: 1vw 3vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course section .table-date tbody td:nth-of-type(1) {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.course section .table-date tbody td:nth-of-type(1) {
    padding-top: 5vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course section .table-date tbody td:nth-last-of-type(1) {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.course section .table-date tbody td:nth-last-of-type(1) {
    padding-bottom: 5vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course section .table-date thead {
    display: none;
  }
  .g-body .g-main.course section .table-date tbody {
    border-bottom: 0;
  }
  .g-body .g-main.course section .table-date tbody tr:nth-last-of-type(1) td[colspan] {
    margin-bottom: 0;
  }
}
.g-body .g-main.course .visual {
  position: relative;
}
.g-body .g-main.course .visual .owl-carousel {
  max-height: 320px;
  overflow: hidden;
  position: absolute;
  top: 0;
}
.g-body .g-main.course .visual .owl-carousel .image-container {
  padding-bottom: 320px;
}
.g-body .g-main.course .visual .owl-carousel .image-container::after {
  content: "";
  width: 100%;
  height: 100%;
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(20, 0, 30, 0.75), rgba(20, 0, 30, 0.6), rgba(20, 0, 30, 0.7), rgba(20, 0, 30, 0.8));
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.course .visual .owl-carousel .image-container {
    padding-bottom: 210px;
  }
}
.g-body .g-main.course .visual .g-container {
  height: 260px;
  padding: 0 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.course .visual .g-container {
    height: 150px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .visual .g-container p {
    font-size: 4.2vw;
  }
}
.g-body .g-main.course .visual .visual-text {
  text-shadow: 2px 2px 5px #000;
}
.g-body .g-main.course .video {
  background: url(../images/bg-video.webp) no-repeat center center/cover;
}
.g-body .g-main.course .video .g-container {
  max-width: 90%;
  color: #fff;
}
.g-body .g-main.course .video h3 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #d4bdff;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .video h3 {
    font-size: 5.5vw;
    padding: 0 3vw;
  }
}
.g-body .g-main.course .video p {
  margin-bottom: 20px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.course .video p {
    margin-bottom: 10px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .video p {
    padding: 0 3vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.course .video .table-box:nth-child(1) {
    margin-bottom: 50px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.course .video .table-box:nth-child(1) {
    margin-bottom: 12vw;
  }
}
.g-body .g-main.course .video .video-from {
  display: grid;
  grid-template-columns: 1fr 450px;
}
@media only screen and (max-width: 1680px) {
  .g-body .g-main.course .video .video-from {
    grid-template-columns: 1fr 32%;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.course .video .video-from {
    grid-template-columns: 1fr;
  }
}
.g-body .g-main.course .video .video-from .freecourse_VideoForm {
  padding: 30px 10%;
  color: #333333;
  background: url(../courses/images/img-form.webp) no-repeat center bottom/cover;
}
@media only screen and (max-width: 1680px) {
  .g-body .g-main.course .video .video-from .freecourse_VideoForm {
    padding: 0 8%;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.course .video .video-from .freecourse_VideoForm {
    background: rgba(255, 255, 255, 0.3);
  }
}
.g-body .g-main.course .video .video-from .form-title {
  color: #4B2F80;
  font-size: 1.7rem;
  font-weight: 700;
  text-align: center;
  margin-top: 10%;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.course .video .video-from .form-title {
    margin-top: 5%;
    font-size: 1.375rem;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.course .video .video-from .form-title {
    display: none;
  }
}
.g-body .g-main.course .video .video-from ul {
  margin: 30px auto 20px;
  display: grid;
  gap: 7px;
}
@media only screen and (max-width: 1680px) {
  .g-body .g-main.course .video .video-from ul {
    margin: 1vw auto;
    gap: 0.4vw;
  }
}
@media only screen and (max-width: 1680px) and (max-width: 1024px) {
  .g-body .g-main.course .video .video-from ul {
    display: none;
  }
}
.g-body .g-main.course .video .video-from ul input[type=text],
.g-body .g-main.course .video .video-from ul select {
  padding: 0;
  font-size: 1rem;
  border: 0;
  height: 45px;
  background-color: transparent;
}
@media only screen and (max-width: 1680px) {
  .g-body .g-main.course .video .video-from ul input[type=text],
  .g-body .g-main.course .video .video-from ul select {
    height: 2.5vw;
  }
}
@media only screen and (max-width: 1680px) and (max-width: 1440px) {
  .g-body .g-main.course .video .video-from ul input[type=text],
  .g-body .g-main.course .video .video-from ul select {
    font-size: 0.9rem;
  }
}
.g-body .g-main.course .video .video-from ul li {
  position: relative;
  padding: 0 8px 0 20px;
  border-radius: 100px;
  border: 1px #dedede solid;
  background-color: #fff;
}
@media only screen and (max-width: 1680px) {
  .g-body .g-main.course .video .video-from ul li {
    padding: 0 0.5vw 0 1vw;
  }
}
.g-body .g-main.course .video .video-from ul li .word-alert {
  position: absolute;
  font-size: 1rem;
  top: 4px;
  right: 27px;
}
@media only screen and (max-width: 1680px) {
  .g-body .g-main.course .video .video-from ul li .word-alert {
    top: 2%;
    right: 1.7vw;
  }
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.course .video .video-from ul li .word-alert {
    top: 0;
    font-size: 1.1vw;
  }
}
.g-body .g-main.course .video .video-from ul li:nth-of-type(2) .word-alert, .g-body .g-main.course .video .video-from ul li:nth-of-type(3) .word-alert {
  right: 17px;
}
@media only screen and (max-width: 1680px) {
  .g-body .g-main.course .video .video-from ul li:nth-of-type(2) .word-alert, .g-body .g-main.course .video .video-from ul li:nth-of-type(3) .word-alert {
    right: 1vw;
  }
}
.g-body .g-main.course .video .video-from .g-iAgree {
  font-size: 1rem;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.course .video .video-from .g-iAgree {
    font-size: 0.9rem;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.course .video .video-from .g-iAgree {
    display: none;
  }
}
.g-body .g-main.course .video .video-from .btn-normal {
  color: #fff;
  font-size: 1.1rem;
  border-radius: 50px;
  padding: 10px 20px 6px;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  display: flex;
  min-width: 150px;
  border: 0;
}
.g-body .g-main.course .video .video-from .btn-normal:hover {
  cursor: pointer;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .video .video-from .btn-normal {
    width: 55vw;
    min-width: auto;
    font-size: 5vw;
    padding: 10px 0 7px;
  }
}
.g-body .g-main.course .video .video-from .btn-normal {
  background-color: #4B2F80;
  margin: 30px auto 0;
  width: 180px;
}
@media only screen and (max-width: 1680px) {
  .g-body .g-main.course .video .video-from .btn-normal {
    margin: 2vw auto 0;
  }
}
@media only screen and (max-width: 1680px) and (max-width: 1440px) {
  .g-body .g-main.course .video .video-from .btn-normal {
    margin: 1vw auto 0;
  }
}
.g-body .g-main.course .video .video-from .btn-normal:hover {
  background-color: #7D64AB;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.course .video .video-from .btn-normal.btn-from {
    display: none;
  }
}
.g-body .g-main.course .video .video-from .btn-normal.go-from {
  text-align: center;
  display: none;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.course .video .video-from .btn-normal.go-from {
    margin: 2vw auto;
    display: block;
    background-color: #FF7A00;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.course .video .video-from .btn-normal.go-from {
    margin: 3vw auto;
  }
}
.g-body .g-main.course .content-title br {
  display: none;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.course .content-title br {
    display: block;
  }
}
.g-body .g-main.course .content-title div {
  font-weight: bold;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .content-title div {
    font-size: 6vw;
    letter-spacing: 1px;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.course .content-title span {
    display: none;
  }
}
.g-body .g-main.course .feature .g-container > p {
  text-align: center;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .feature .g-container > p {
    text-align: left;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .feature .content-title,
  .g-body .g-main.course .feature .content-title span {
    letter-spacing: 1px;
  }
}
.g-body .g-main.course .feature .box-list ul,
.g-body .g-main.course .feature ul.box-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 25px;
  margin-top: 20px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.course .feature .box-list ul,
  .g-body .g-main.course .feature ul.box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.course .feature .box-list ul,
  .g-body .g-main.course .feature ul.box-list {
    gap: 15px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .feature .box-list ul,
  .g-body .g-main.course .feature ul.box-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
  }
}
.g-body .g-main.course .feature .box-list ul li,
.g-body .g-main.course .feature ul.box-list li {
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}
.g-body .g-main.course .feature .box-content {
  display: grid;
  grid-template-columns: 35% 1fr;
  background-color: #fff;
}
.g-body .g-main.course .feature .box-content .image-container {
  padding-bottom: 35%;
  height: 100%;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.course .feature .box-content {
    display: grid;
    grid-template-columns: 1fr;
  }
  .g-body .g-main.course .feature .box-content .image-container {
    padding-bottom: 52%;
    height: 0;
  }
}
.g-body .g-main.course .feature .box {
  padding: 30px 20px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.course .feature .box {
    padding: 15px 15px 15px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .feature .box {
    padding: 3vw 3vw 5vw;
  }
}
.g-body .g-main.course .feature .box h3,
.g-body .g-main.course .feature .box h4 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #7D64AB;
  margin-bottom: 10px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.course .feature .box h3,
  .g-body .g-main.course .feature .box h4 {
    font-size: 1.375rem;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .feature .box h3,
  .g-body .g-main.course .feature .box h4 {
    font-size: 6vw;
  }
}
.g-body .g-main.course .intro .g-container > p {
  text-align: center;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .intro .g-container > p {
    text-align: left;
  }
}
.g-body .g-main.course .intro .g-container > .box-list,
.g-body .g-main.course .intro .intro-box .box-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px 25px;
  margin-top: 30px;
}
@media only screen and (max-width: 1680px) {
  .g-body .g-main.course .intro .g-container > .box-list,
  .g-body .g-main.course .intro .intro-box .box-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
}
@media only screen and (max-width: 1680px) and (max-width: 1440px) {
  .g-body .g-main.course .intro .g-container > .box-list,
  .g-body .g-main.course .intro .intro-box .box-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 1680px) and (max-width: 1024px) {
  .g-body .g-main.course .intro .g-container > .box-list,
  .g-body .g-main.course .intro .intro-box .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 1680px) and (max-width: 768px) {
  .g-body .g-main.course .intro .g-container > .box-list,
  .g-body .g-main.course .intro .intro-box .box-list {
    gap: 15px;
  }
}
@media only screen and (max-width: 1680px) and (max-width: 450px) {
  .g-body .g-main.course .intro .g-container > .box-list,
  .g-body .g-main.course .intro .intro-box .box-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
  }
}
.g-body .g-main.course .intro .g-container > .box-list li,
.g-body .g-main.course .intro .g-container > .box-list > a,
.g-body .g-main.course .intro .intro-box .box-list li,
.g-body .g-main.course .intro .intro-box .box-list > a {
  position: relative;
}
.g-body .g-main.course .intro .g-container > .box-list li .info,
.g-body .g-main.course .intro .g-container > .box-list li > h3,
.g-body .g-main.course .intro .g-container > .box-list li > .h3,
.g-body .g-main.course .intro .g-container > .box-list > a .info,
.g-body .g-main.course .intro .g-container > .box-list > a > h3,
.g-body .g-main.course .intro .g-container > .box-list > a > .h3,
.g-body .g-main.course .intro .intro-box .box-list li .info,
.g-body .g-main.course .intro .intro-box .box-list li > h3,
.g-body .g-main.course .intro .intro-box .box-list li > .h3,
.g-body .g-main.course .intro .intro-box .box-list > a .info,
.g-body .g-main.course .intro .intro-box .box-list > a > h3,
.g-body .g-main.course .intro .intro-box .box-list > a > .h3 {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
  background-color: rgba(41, 41, 41, 0.7);
  text-shadow: 3px 3px 10px #000;
}
.g-body .g-main.course .intro .g-container > .box-list li .info:hover,
.g-body .g-main.course .intro .g-container > .box-list li > h3:hover,
.g-body .g-main.course .intro .g-container > .box-list li > .h3:hover,
.g-body .g-main.course .intro .g-container > .box-list > a .info:hover,
.g-body .g-main.course .intro .g-container > .box-list > a > h3:hover,
.g-body .g-main.course .intro .g-container > .box-list > a > .h3:hover,
.g-body .g-main.course .intro .intro-box .box-list li .info:hover,
.g-body .g-main.course .intro .intro-box .box-list li > h3:hover,
.g-body .g-main.course .intro .intro-box .box-list li > .h3:hover,
.g-body .g-main.course .intro .intro-box .box-list > a .info:hover,
.g-body .g-main.course .intro .intro-box .box-list > a > h3:hover,
.g-body .g-main.course .intro .intro-box .box-list > a > .h3:hover {
  background-color: rgba(41, 41, 41, 0.2);
}
.g-body .g-main.course .intro .g-container > .box-list li img,
.g-body .g-main.course .intro .g-container > .box-list > a img,
.g-body .g-main.course .intro .intro-box .box-list li img,
.g-body .g-main.course .intro .intro-box .box-list > a img {
  transition: 0.3s;
}
.g-body .g-main.course .intro .g-container > .box-list li:hover img,
.g-body .g-main.course .intro .g-container > .box-list > a:hover img,
.g-body .g-main.course .intro .intro-box .box-list li:hover img,
.g-body .g-main.course .intro .intro-box .box-list > a:hover img {
  transition: 0.3s;
  transform: scale(1.1);
}
.g-body .g-main.course .intro .g-container > .box-list li h3,
.g-body .g-main.course .intro .g-container > .box-list li .h3,
.g-body .g-main.course .intro .g-container > .box-list > a h3,
.g-body .g-main.course .intro .g-container > .box-list > a .h3,
.g-body .g-main.course .intro .intro-box .box-list li h3,
.g-body .g-main.course .intro .intro-box .box-list li .h3,
.g-body .g-main.course .intro .intro-box .box-list > a h3,
.g-body .g-main.course .intro .intro-box .box-list > a .h3 {
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .intro .g-container > .box-list li h3,
  .g-body .g-main.course .intro .g-container > .box-list li .h3,
  .g-body .g-main.course .intro .g-container > .box-list > a h3,
  .g-body .g-main.course .intro .g-container > .box-list > a .h3,
  .g-body .g-main.course .intro .intro-box .box-list li h3,
  .g-body .g-main.course .intro .intro-box .box-list li .h3,
  .g-body .g-main.course .intro .intro-box .box-list > a h3,
  .g-body .g-main.course .intro .intro-box .box-list > a .h3 {
    font-size: 6vw;
  }
}
.g-body .g-main.course .intro .g-container > .box-list li span,
.g-body .g-main.course .intro .g-container > .box-list > a span,
.g-body .g-main.course .intro .intro-box .box-list li span,
.g-body .g-main.course .intro .intro-box .box-list > a span {
  font-size: 1rem;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px 10px 4px;
  background-color: #7D64AB;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .intro .g-container > .box-list li span,
  .g-body .g-main.course .intro .g-container > .box-list > a span,
  .g-body .g-main.course .intro .intro-box .box-list li span,
  .g-body .g-main.course .intro .intro-box .box-list > a span {
    font-size: 4.8vw;
    padding: 1.2vw 3vw 1.4vw;
  }
}
.g-body .g-main.course .intro .g-container > .box-list li,
.g-body .g-main.course .intro .g-container > .box-list > a,
.g-body .g-main.course .intro .intro-box .box-list li,
.g-body .g-main.course .intro .intro-box .box-list > a {
  position: relative;
  cursor: pointer;
}
.g-body .g-main.course .intro .g-container > .box-list .info h3,
.g-body .g-main.course .intro .g-container > .box-list .info .h3,
.g-body .g-main.course .intro .intro-box .box-list .info h3,
.g-body .g-main.course .intro .intro-box .box-list .info .h3 {
  padding-top: 10px;
}
.g-body .g-main.course .intro .g-container > .box-list .image-container,
.g-body .g-main.course .intro .intro-box .box-list .image-container {
  padding-bottom: 0;
  height: 150px;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.course .intro .g-container > .box-list .image-container,
  .g-body .g-main.course .intro .intro-box .box-list .image-container {
    height: 150px !important;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.course .intro .g-container > .box-list .image-container,
  .g-body .g-main.course .intro .intro-box .box-list .image-container {
    height: 150px !important;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .intro .g-container > .box-list .image-container,
  .g-body .g-main.course .intro .intro-box .box-list .image-container {
    padding-bottom: 35% !important;
    height: 0 !important;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .intro .content-title,
  .g-body .g-main.course .intro .content-title span {
    letter-spacing: 1px;
  }
}
.g-body .g-main.course .intro .ul-list ol,
.g-body .g-main.course .intro .ul-list ul {
  font-size: 1.125rem;
  display: grid;
  gap: 10px;
  margin-left: 30px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .intro .ul-list ol,
  .g-body .g-main.course .intro .ul-list ul {
    font-size: 4.5vw;
    gap: 2vw;
    margin-left: 6vw;
  }
}
.g-body .g-main.course .intro .ul-list p {
  font-size: 1.125rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .intro .ul-list p {
    font-size: 4.5vw;
  }
}
.g-body .g-main.course .intro .ul-list ol {
  list-style: decimal;
}
.g-body .g-main.course .intro .ul-list ul {
  list-style: disc;
}
.g-body .g-main.course .intro.focus-BG .box-list li {
  border: 0;
}
.g-body .g-main.course .intro .g-iframe table {
  margin-bottom: 50px;
}
.g-body .g-main.course .intro .g-iframe table td,
.g-body .g-main.course .intro .g-iframe table th {
  border: 1px #dedede solid;
  text-align: center;
}
.g-body .g-main.course .intro .g-iframe table td ol,
.g-body .g-main.course .intro .g-iframe table th ol {
  list-style: decimal;
  padding-left: 25px;
  display: grid;
  gap: 5px;
}
.g-body .g-main.course .intro .g-iframe table thead {
  color: #fff;
  background-color: #7D64AB;
}
.g-body .g-main.course .intro .g-iframe table tbody th {
  color: #7D64AB;
  font-weight: bold;
  white-space: nowrap;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .intro .g-iframe table {
    margin-bottom: 10vw;
  }
  .g-body .g-main.course .intro .g-iframe table th,
  .g-body .g-main.course .intro .g-iframe table td {
    padding: 3vw;
  }
  .g-body .g-main.course .intro .g-iframe table th ol,
  .g-body .g-main.course .intro .g-iframe table td ol {
    padding-left: 8vw;
  }
  .g-body .g-main.course .intro .g-iframe table td {
    text-align: left;
  }
}
.g-body .g-main.course .intro .g-iframe table span {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 2px;
  background-color: #F6F1FF;
  margin: 12px 0 5px;
}
.g-body .g-main.course .intro_depiction .box-list > li {
  background-color: #F5F5F5;
}
.g-body .g-main.course .intro_depiction .box-list p {
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  padding: 10px 5px 0 10px;
  margin-bottom: 10px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .intro_depiction .box-list p {
    font-size: 4.5vw;
    padding: 3vw 3vw 0;
    margin-bottom: 3vw;
  }
}
.g-body .g-main.course .g-popup .popup-center {
  padding: 50px 10px 20px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.course .g-popup .popup-center {
    padding: 0;
  }
  .g-body .g-main.course .g-popup .popup-center .popup-main {
    border-radius: 0;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .g-popup .popup-center .popup-container {
    padding-top: 7vw;
  }
}
.g-body .g-main.course .g-popup .close-popup {
  cursor: pointer;
  position: absolute;
  right: 15px;
  top: 20px;
  width: 20px;
  height: 20px;
  background: url(../images/i-menu-close-w.svg) no-repeat center center/100% auto;
  z-index: 3;
}
@media only screen and (max-width: 320px) {
  .g-body .g-main.course .g-popup .close-popup {
    right: 4vw;
    top: 5vw;
    width: 6vw;
    height: 6vw;
  }
}
.g-body .g-main.course .g-popup .close-popup {
  background: url(../images/i-menu-close.svg) no-repeat center center/100% auto;
  margin-top: 15px;
  margin-left: calc(100% - 30px);
  position: sticky;
  top: -35px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.course .g-popup .close-popup {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background-color: rgba(75, 47, 128, 0.2);
    background-size: 70% auto;
    margin-left: calc(100% - 35px);
    margin-top: 0;
    top: 5px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .g-popup .close-popup {
    width: 8vw;
    height: 8vw;
    margin-left: calc(100% - 9.5vw);
    top: 1.5vw;
  }
}
.g-body .g-main.course .g-popup .m-title {
  border-radius: 15px 15px 0 0;
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  background-color: #555555;
  text-align: center;
  padding: 10px;
  margin-bottom: 25px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .g-popup .m-title {
    font-size: 5.5vw;
  }
}
.g-body .g-main.course .g-popup .s-title {
  color: #333333;
  font-size: 1.25rem;
  padding: 5px;
  background-color: #F6F1FF;
  text-align: center;
  margin-bottom: 15px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .g-popup .s-title {
    font-size: 5vw;
    padding: 2vw;
    margin-bottom: 3vw;
  }
}
.g-body .g-main.course .g-popup .ul-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
  margin-bottom: 50px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.course .g-popup .ul-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .g-popup .ul-list {
    gap: 10vw;
    margin-bottom: 10vw;
  }
}
.g-body .g-main.course .g-popup strong {
  font-size: 1.125rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .g-popup strong {
    font-size: 6vw;
  }
}
.g-body .g-main.course .g-popup .menu-box {
  border-radius: 10px;
  overflow: hidden;
  background-color: #F5F5F5;
  padding: 20px 30px;
  margin-bottom: 50px;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course .g-popup .menu-box {
    padding: 5vw 3vw;
    margin-bottom: 5vw;
  }
}
.g-body .g-main.course .g-popup .menu-box > div {
  color: #7D64AB;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 10px;
}
.g-body .g-main.course .g-popup .menu-box .box-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 10px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.course .g-popup .menu-box .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .g-body .g-main.course .g-popup .menu-box .box-list .image-container {
    display: none;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 650px) {
  .g-body .g-main.course .g-popup .menu-box .box-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    margin-top: 3vw;
  }
}
.g-body .g-main.course .g-popup .menu-box .box-list li {
  cursor: pointer;
}
@media only screen and (min-width: 1025px) {
  .g-body .g-main.course .g-popup .menu-box .box-list li {
    position: relative;
  }
  .g-body .g-main.course .g-popup .menu-box .box-list li .info,
  .g-body .g-main.course .g-popup .menu-box .box-list li > h3,
  .g-body .g-main.course .g-popup .menu-box .box-list li > .h3 {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
    background-color: rgba(41, 41, 41, 0.7);
    text-shadow: 3px 3px 10px #000;
  }
  .g-body .g-main.course .g-popup .menu-box .box-list li .info:hover,
  .g-body .g-main.course .g-popup .menu-box .box-list li > h3:hover,
  .g-body .g-main.course .g-popup .menu-box .box-list li > .h3:hover {
    background-color: rgba(41, 41, 41, 0.2);
  }
  .g-body .g-main.course .g-popup .menu-box .box-list li img {
    transition: 0.3s;
  }
  .g-body .g-main.course .g-popup .menu-box .box-list li:hover img {
    transition: 0.3s;
    transform: scale(1.1);
  }
  .g-body .g-main.course .g-popup .menu-box .box-list li h3,
  .g-body .g-main.course .g-popup .menu-box .box-list li .h3 {
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
  }
}
@media only screen and (min-width: 1025px) and (max-width: 450px) {
  .g-body .g-main.course .g-popup .menu-box .box-list li h3,
  .g-body .g-main.course .g-popup .menu-box .box-list li .h3 {
    font-size: 6vw;
  }
}
@media only screen and (min-width: 1025px) {
  .g-body .g-main.course .g-popup .menu-box .box-list li span {
    font-size: 1rem;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px 10px 4px;
    background-color: #7D64AB;
  }
}
@media only screen and (min-width: 1025px) and (max-width: 450px) {
  .g-body .g-main.course .g-popup .menu-box .box-list li span {
    font-size: 4.8vw;
    padding: 1.2vw 3vw 1.4vw;
  }
}
@media only screen and (min-width: 1025px) {
  .g-body .g-main.course .g-popup .menu-box .box-list li > h3,
  .g-body .g-main.course .g-popup .menu-box .box-list li .h3 {
    display: flex;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.course .g-popup .menu-box .box-list li {
    border-radius: 10px;
    overflow: hidden;
    border-radius: 10px;
    overflow: hidden;
    border: 1px #dedede solid;
    background-color: #fff;
  }
  .g-body .g-main.course .g-popup .menu-box .box-list li img {
    transition: 0.3s;
  }
  .g-body .g-main.course .g-popup .menu-box .box-list li:hover img {
    transition: 0.3s;
    transform: scale(1.1);
  }
  .g-body .g-main.course .g-popup .menu-box .box-list li > h3,
  .g-body .g-main.course .g-popup .menu-box .box-list li > .h3,
  .g-body .g-main.course .g-popup .menu-box .box-list li .info {
    display: flex;
    align-items: center;
    padding: 20px 20px 0;
    margin-bottom: 20px;
  }
  .g-body .g-main.course .g-popup .menu-box .box-list li > h3 span,
  .g-body .g-main.course .g-popup .menu-box .box-list li > .h3 span,
  .g-body .g-main.course .g-popup .menu-box .box-list li .info span {
    display: inline-block;
    color: #fff;
    background-color: #7D64AB;
    padding: 5px 10px;
    border-radius: 4px;
    margin-right: 10px;
    white-space: nowrap;
  }
  .g-body .g-main.course .g-popup .menu-box .box-list li {
    border: 0;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main.course .g-popup .menu-box .box-list li > h3,
  .g-body .g-main.course .g-popup .menu-box .box-list li > .h3,
  .g-body .g-main.course .g-popup .menu-box .box-list li .info {
    font-size: 5vw;
    padding: 3vw 3vw 0;
    margin-bottom: 3vw;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.course .g-popup .menu-box .box-list li h3,
  .g-body .g-main.course .g-popup .menu-box .box-list li .h3 {
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    color: #333333;
    font-size: 1.125rem;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main.course .g-popup .menu-box .box-list li h3,
  .g-body .g-main.course .g-popup .menu-box .box-list li .h3 {
    font-size: 5vw;
  }
}
.g-body .g-main.course .g-popup .menu-box .box-list li.active {
  border: 1px solid #FFC700;
}
@media only screen and (min-width: 1025px) {
  .g-body .g-main.course .g-popup .menu-box .box-list li.active .info,
  .g-body .g-main.course .g-popup .menu-box .box-list li.active > h3,
  .g-body .g-main.course .g-popup .menu-box .box-list li.active > .h3 {
    background-color: rgba(41, 41, 41, 0.2);
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .g-popup .content-title {
    letter-spacing: 2px;
  }
}
.g-body .g-main.course ul.qa {
  list-style: decimal;
  font-size: 1.25rem;
  padding-left: 60px;
  display: grid;
  gap: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course ul.qa {
    font-size: 5vw;
    padding-left: 14vw;
    gap: 5vw;
  }
}
.g-body .g-main.course ul.qa li::marker {
  font-weight: bold;
}
.g-body .g-main.course ul.qa li::before {
  content: "Q";
  margin-left: -45px;
  margin-right: 20px;
  font-weight: bold;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course ul.qa li::before {
    margin-left: -11.5vw;
    margin-right: 6vw;
  }
}
.g-body .g-main.course ul.qa li span {
  font-weight: bold;
}
.g-body .g-main.course .content-title-word {
  font-size: 1.75rem;
  margin-bottom: 35px;
  text-align: center;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .content-title-word {
    font-size: 6vw;
    padding: 0 5vw;
    margin-bottom: 5vw;
  }
}
.g-body .g-main.course .g-search .search-box select {
  text-align: center;
}
.g-body .g-main.course .map {
  background: linear-gradient(to right, #f2f2f2, #fff, #f2f2f2);
}
.g-body .g-main.course .map .g-container h2 span {
  letter-spacing: 4px;
  font-weight: bold;
}
.g-body .g-main.course .map .g-container .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .map .g-container .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main.course .map .g-container .g-container {
  font-size: 1.125rem;
}
.g-body .g-main.course .map .g-container .g-container p {
  font-size: 1.125rem;
  line-height: 1.8;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .map .g-container .g-container p {
    font-size: 4.5vw;
  }
}
.g-body .g-main.course .map .g-container .g-container p a {
  color: #7D64AB;
  text-decoration: underline;
}
.g-body .g-main.course .map .g-container .g-container p a:hover {
  color: #FF7A00;
}
.g-body .g-main.course .map .g-container .g-container p:not(:last-of-type) {
  margin-bottom: 10px;
}
.g-body .g-main.course .map .g-container .g-container p b {
  color: #000;
  font-size: 1.25rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .map .g-container .g-container p b {
    font-size: 4.8vw;
  }
}
.g-body .g-main.course .map .g-container .g-container i.fa-solid {
  font-weight: 900;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .map .g-container .g-container > p {
    padding: 0 3vw;
  }
}
.g-body .g-main.course .map .g-container .g-search {
  margin-top: 30px;
}
.g-body .g-main.course .map .g-container .g-search .search-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.course .map .g-container .g-search .search-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
.g-body .g-main.course .map .g-container .ol-point {
  margin-bottom: 35px;
}
.g-body .g-main.course .map .g-container .ol-point li {
  color: #333333;
  position: relative;
  padding-left: 20px;
}
.g-body .g-main.course .map .g-container .ol-point li::before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background-color: #FF9F40;
  left: 0;
  top: 6px;
  position: absolute;
}
.g-body .g-main.course .map .g-container .ol-point li:not(:last-child) {
  margin-bottom: 15px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .map .g-container .ol-point li {
    font-size: 4.8vw;
    padding-left: 7.5vw;
  }
  .g-body .g-main.course .map .g-container .ol-point li::before {
    width: 4vw;
    height: 4vw;
    border-radius: 4vw;
    top: 1.2vw;
    left: 1.5vw;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .map .g-container .ol-point {
    margin-bottom: 10vw;
  }
}
.g-body .g-main.course .map .g-container .table-article {
  margin: 15px 0 35px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .map .g-container .table-article td {
    padding: 3vw 2vw;
  }
}
.g-body .g-main.course .map .g-container .table-color td {
  padding: 20px 15px;
}
.g-body .g-main.course .map .g-container .table-color td:nth-child(1) {
  width: 20px;
}
.g-body .g-main.course .map .g-container .table-date th {
  white-space: normal;
}
.g-body .g-main.course .map .g-container .table-date tbody td {
  padding: 20px 15px;
  text-align: center;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course .map .g-container .table-date tbody td:nth-child(2) {
    padding-top: 5vw;
  }
}
.g-body .g-main.course .map .g-container .table-date tbody td[rowspan] {
  font-size: 1.125em;
  font-weight: bold;
  color: #7D64AB;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course .map .g-container .table-date tbody td[rowspan] {
    font-size: 5vw;
    color: #fff;
    text-align: center;
    background-color: #7D64AB;
    padding: 3vw 0 2.2vw !important;
  }
}
.g-body .g-main.course .map .g-container .table-date tbody td[colspan] {
  text-align: left;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course .map .g-container .table-date tbody td[colspan] {
    background-color: #F6F1FF;
    margin-bottom: 5vw;
    border-bottom: 1px #dedede solid;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course .map .g-container .table-date td {
    text-align: left;
  }
  .g-body .g-main.course .map .g-container .table-date thead {
    display: none;
  }
  .g-body .g-main.course .map .g-container .table-date tbody {
    border-bottom: 1px #dedede solid;
  }
  .g-body .g-main.course .map .g-container .table-date tbody tr {
    display: block;
    border: 1px #dedede solid;
    border-bottom: 0;
  }
  .g-body .g-main.course .map .g-container .table-date tbody td,
  .g-body .g-main.course .map .g-container .table-date tbody th {
    display: block;
    text-align: left;
    border: 0;
  }
  .g-body .g-main.course .map .g-container .table-date tbody td {
    padding: 3px 15px 3px;
  }
  .g-body .g-main.course .map .g-container .table-date {
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.course .map .g-container .table-date tbody td {
    padding: 1vw 3vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course .map .g-container .table-date tbody td:nth-of-type(1) {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.course .map .g-container .table-date tbody td:nth-of-type(1) {
    padding-top: 5vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course .map .g-container .table-date tbody td:nth-last-of-type(1) {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.course .map .g-container .table-date tbody td:nth-last-of-type(1) {
    padding-bottom: 5vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course .map .g-container .table-date thead {
    display: none;
  }
  .g-body .g-main.course .map .g-container .table-date tbody {
    border-bottom: 0;
  }
  .g-body .g-main.course .map .g-container .table-date tbody tr:nth-last-of-type(1) td[colspan] {
    margin-bottom: 0;
  }
}
.g-body .g-main.course .map p {
  color: #091b59;
  text-align: center;
  font-size: 1.375rem;
  font-weight: bold;
  margin-bottom: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .map p {
    font-size: 5vw;
    margin-bottom: 2vw;
  }
}
.g-body .g-main.course .map .map-text {
  display: none;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.course .map .map-text {
    font-style: italic;
    display: block;
    margin-bottom: 5px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .map .map-text {
    padding: 0 2vw;
    font-size: 4.5vw;
  }
}
.g-body .g-main.course .map table {
  background-color: #fff;
  text-align: center;
  display: block;
  overflow-x: auto;
}
.g-body .g-main.course .map table tbody {
  display: table;
  width: 100%;
}
.g-body .g-main.course .map table tr th {
  background-color: #494949;
  border-top: 1px #ffffff solid;
}
.g-body .g-main.course .map table tr th div {
  color: #fff;
}
.g-body .g-main.course .map table tr:nth-child(1) th:nth-child(1) {
  background-color: #553871;
}
.g-body .g-main.course .map table tr:nth-child(1) th:nth-child(2) {
  background-color: #666;
}
.g-body .g-main.course .map table tr:nth-child(1) th:nth-child(2) div {
  background-color: #FFC700;
}
.g-body .g-main.course .map table tr:nth-child(1) th:nth-child(3) {
  background-color: #555;
}
.g-body .g-main.course .map table tr:nth-child(1) th:nth-child(3) div {
  background-color: #C4D40A;
}
.g-body .g-main.course .map table tr:nth-child(1) th:nth-child(4) {
  background-color: #444;
}
.g-body .g-main.course .map table tr:nth-child(1) th:nth-child(4) div {
  background-color: #36A2EB;
}
.g-body .g-main.course .map table tr:nth-child(1) th:nth-child(5) {
  background-color: #333;
}
.g-body .g-main.course .map table tr:nth-child(1) th:nth-child(5) div {
  background-color: #7D64AB;
}
.g-body .g-main.course .map table tr:nth-child(1) th:nth-child(6) {
  background-color: #222;
}
.g-body .g-main.course .map table tr:nth-child(1) th:nth-child(6) div {
  background-color: #FF6384;
}
.g-body .g-main.course .map table tr:nth-child(1) th:nth-child(7) {
  background-color: #151515;
}
.g-body .g-main.course .map table tr:nth-child(1) th:nth-child(7) div {
  background-color: #FF9F40;
}
.g-body .g-main.course .map table tr.color-1 {
  background-color: #f7f7f7;
}
.g-body .g-main.course .map table tr.color-2 {
  background-color: #eee;
}
.g-body .g-main.course .map table tr.color-3 {
  background-color: #ddd;
}
.g-body .g-main.course .map table tr.color-4 {
  background-color: #ccc;
}
.g-body .g-main.course .map table tr.color-5 {
  background-color: #bbb;
}
.g-body .g-main.course .map table tr.color-6 {
  background-color: #aaa;
}
.g-body .g-main.course .map table th {
  font-weight: bold;
  font-size: 1.5rem;
  color: #fff;
  padding: 20px 15px;
  white-space: nowrap;
}
.g-body .g-main.course .map table th div {
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333333;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background-color: #fff;
  margin: auto;
  margin-bottom: 10px;
}
.g-body .g-main.course .map table th span {
  font-size: 1rem;
  display: block;
  white-space: nowrap;
  margin-bottom: 10px;
}
.g-body .g-main.course .map table td {
  color: #000;
  padding: 10px 15px 7px;
  border: 1px #ffffff solid;
  white-space: nowrap;
}
.g-body .g-main.course .map table td.bg-f {
  background-color: #fff;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .map table th {
    font-size: 4.5vw;
    padding: 20px 15px;
  }
  .g-body .g-main.course .map table th div {
    font-size: 4.5vw;
    width: 10vw;
    height: 10vw;
    margin-bottom: 3vw;
  }
  .g-body .g-main.course .map table th span {
    font-size: 4vw;
    letter-spacing: 0;
    margin-bottom: 1vw;
  }
  .g-body .g-main.course .map table th {
    padding: 5vw 2vw 5vw;
  }
  .g-body .g-main.course .map table tr:first-child th {
    padding-bottom: 2vw;
  }
  .g-body .g-main.course .map table td {
    font-size: 4vw;
    letter-spacing: 0;
    padding: 2vw 1vw 1vw;
  }
}
.g-body .g-main.course .learning-map {
  background: linear-gradient(to right, #f2f2f2, #fff, #f2f2f2);
}
.g-body .g-main.course .learning-map .g-container h2 span {
  letter-spacing: 4px;
  font-weight: bold;
}
.g-body .g-main.course .learning-map .g-container .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .learning-map .g-container .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main.course .learning-map .g-container .g-container {
  font-size: 1.125rem;
}
.g-body .g-main.course .learning-map .g-container .g-container p {
  font-size: 1.125rem;
  line-height: 1.8;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .learning-map .g-container .g-container p {
    font-size: 4.5vw;
  }
}
.g-body .g-main.course .learning-map .g-container .g-container p a {
  color: #7D64AB;
  text-decoration: underline;
}
.g-body .g-main.course .learning-map .g-container .g-container p a:hover {
  color: #FF7A00;
}
.g-body .g-main.course .learning-map .g-container .g-container p:not(:last-of-type) {
  margin-bottom: 10px;
}
.g-body .g-main.course .learning-map .g-container .g-container p b {
  color: #000;
  font-size: 1.25rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .learning-map .g-container .g-container p b {
    font-size: 4.8vw;
  }
}
.g-body .g-main.course .learning-map .g-container .g-container i.fa-solid {
  font-weight: 900;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .learning-map .g-container .g-container > p {
    padding: 0 3vw;
  }
}
.g-body .g-main.course .learning-map .g-container .g-search {
  margin-top: 30px;
}
.g-body .g-main.course .learning-map .g-container .g-search .search-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.course .learning-map .g-container .g-search .search-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
.g-body .g-main.course .learning-map .g-container .ol-point {
  margin-bottom: 35px;
}
.g-body .g-main.course .learning-map .g-container .ol-point li {
  color: #333333;
  position: relative;
  padding-left: 20px;
}
.g-body .g-main.course .learning-map .g-container .ol-point li::before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background-color: #FF9F40;
  left: 0;
  top: 6px;
  position: absolute;
}
.g-body .g-main.course .learning-map .g-container .ol-point li:not(:last-child) {
  margin-bottom: 15px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .learning-map .g-container .ol-point li {
    font-size: 4.8vw;
    padding-left: 7.5vw;
  }
  .g-body .g-main.course .learning-map .g-container .ol-point li::before {
    width: 4vw;
    height: 4vw;
    border-radius: 4vw;
    top: 1.2vw;
    left: 1.5vw;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .learning-map .g-container .ol-point {
    margin-bottom: 10vw;
  }
}
.g-body .g-main.course .learning-map .g-container .table-article {
  margin: 15px 0 35px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .learning-map .g-container .table-article td {
    padding: 3vw 2vw;
  }
}
.g-body .g-main.course .learning-map .g-container .table-color td {
  padding: 20px 15px;
}
.g-body .g-main.course .learning-map .g-container .table-color td:nth-child(1) {
  width: 20px;
}
.g-body .g-main.course .learning-map .g-container .table-date th {
  white-space: normal;
}
.g-body .g-main.course .learning-map .g-container .table-date tbody td {
  padding: 20px 15px;
  text-align: center;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course .learning-map .g-container .table-date tbody td:nth-child(2) {
    padding-top: 5vw;
  }
}
.g-body .g-main.course .learning-map .g-container .table-date tbody td[rowspan] {
  font-size: 1.125em;
  font-weight: bold;
  color: #7D64AB;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course .learning-map .g-container .table-date tbody td[rowspan] {
    font-size: 5vw;
    color: #fff;
    text-align: center;
    background-color: #7D64AB;
    padding: 3vw 0 2.2vw !important;
  }
}
.g-body .g-main.course .learning-map .g-container .table-date tbody td[colspan] {
  text-align: left;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course .learning-map .g-container .table-date tbody td[colspan] {
    background-color: #F6F1FF;
    margin-bottom: 5vw;
    border-bottom: 1px #dedede solid;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course .learning-map .g-container .table-date td {
    text-align: left;
  }
  .g-body .g-main.course .learning-map .g-container .table-date thead {
    display: none;
  }
  .g-body .g-main.course .learning-map .g-container .table-date tbody {
    border-bottom: 1px #dedede solid;
  }
  .g-body .g-main.course .learning-map .g-container .table-date tbody tr {
    display: block;
    border: 1px #dedede solid;
    border-bottom: 0;
  }
  .g-body .g-main.course .learning-map .g-container .table-date tbody td,
  .g-body .g-main.course .learning-map .g-container .table-date tbody th {
    display: block;
    text-align: left;
    border: 0;
  }
  .g-body .g-main.course .learning-map .g-container .table-date tbody td {
    padding: 3px 15px 3px;
  }
  .g-body .g-main.course .learning-map .g-container .table-date {
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.course .learning-map .g-container .table-date tbody td {
    padding: 1vw 3vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course .learning-map .g-container .table-date tbody td:nth-of-type(1) {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.course .learning-map .g-container .table-date tbody td:nth-of-type(1) {
    padding-top: 5vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course .learning-map .g-container .table-date tbody td:nth-last-of-type(1) {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.course .learning-map .g-container .table-date tbody td:nth-last-of-type(1) {
    padding-bottom: 5vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course .learning-map .g-container .table-date thead {
    display: none;
  }
  .g-body .g-main.course .learning-map .g-container .table-date tbody {
    border-bottom: 0;
  }
  .g-body .g-main.course .learning-map .g-container .table-date tbody tr:nth-last-of-type(1) td[colspan] {
    margin-bottom: 0;
  }
}
.g-body .g-main.course .learning-map .g-container .table-article {
  text-align: center;
  display: block;
  overflow-x: auto;
  margin-bottom: 0;
}
.g-body .g-main.course .learning-map .g-container .table-article tbody {
  display: table;
  width: 100%;
}
.g-body .g-main.course .learning-map .g-container .table-article tr:nth-of-type(1) th:nth-of-type(2) {
  background-color: #f7f7f7;
}
.g-body .g-main.course .learning-map .g-container .table-article tr:nth-of-type(1) th:nth-of-type(2) span {
  background-color: #FFC700;
}
.g-body .g-main.course .learning-map .g-container .table-article tr:nth-of-type(1) th:nth-of-type(3) {
  background-color: #ececec;
}
.g-body .g-main.course .learning-map .g-container .table-article tr:nth-of-type(1) th:nth-of-type(3) span {
  background-color: #C4D40A;
}
.g-body .g-main.course .learning-map .g-container .table-article tr:nth-of-type(1) th:nth-of-type(4) {
  background-color: #dcdcdc;
}
.g-body .g-main.course .learning-map .g-container .table-article tr:nth-of-type(1) th:nth-of-type(4) span {
  background-color: #36A2EB;
}
.g-body .g-main.course .learning-map .g-container .table-article tr:nth-of-type(1) th:nth-of-type(5) {
  background-color: #d1d1d1;
}
.g-body .g-main.course .learning-map .g-container .table-article tr:nth-of-type(1) th:nth-of-type(5) span {
  background-color: #7D64AB;
}
.g-body .g-main.course .learning-map .g-container .table-article tr:nth-of-type(1) th:nth-of-type(6) {
  background-color: #bebebe;
}
.g-body .g-main.course .learning-map .g-container .table-article tr:nth-of-type(1) th:nth-of-type(6) span {
  background-color: #FF6384;
}
.g-body .g-main.course .learning-map .g-container .table-article tr:nth-of-type(1) th:nth-of-type(7) {
  background-color: #a9a9a9;
}
.g-body .g-main.course .learning-map .g-container .table-article tr:nth-of-type(1) th:nth-of-type(7) span {
  background-color: #FF9F40;
}
.g-body .g-main.course .learning-map .g-container .table-article td,
.g-body .g-main.course .learning-map .g-container .table-article th {
  color: #333333;
  background-color: #fff;
}
.g-body .g-main.course .learning-map .g-container .table-article th {
  font-size: 1.25rem;
  font-weight: bold;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .learning-map .g-container .table-article th {
    font-size: 4.5vw;
    letter-spacing: 0;
  }
}
.g-body .g-main.course .learning-map .g-container .table-article span {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  margin: auto;
}
.g-body .g-main.course .learning-map .g-container .table-article .th-class {
  background-color: #dff2f5;
}
.g-body .g-main.course .learning-map .map-text {
  display: none;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.course .learning-map .map-text {
    font-style: italic;
    display: block;
    margin-bottom: 5px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .learning-map .map-text {
    padding: 0 2vw;
    font-size: 4.5vw;
  }
}
.g-body .g-main.course .blogs .btn-more {
  color: #fff;
  font-size: 1.1rem;
  border-radius: 50px;
  padding: 10px 20px 6px;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  display: flex;
  min-width: 150px;
  border: 0;
}
.g-body .g-main.course .blogs .btn-more:hover {
  cursor: pointer;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .blogs .btn-more {
    width: 55vw;
    min-width: auto;
    font-size: 5vw;
    padding: 10px 0 7px;
  }
}
.g-body .g-main.course .blogs .btn-more {
  color: #4B2F80;
  width: 155px;
  background-color: #F6F1FF;
  margin: 50px auto 0;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .blogs .btn-more {
    margin: 10vw auto 0;
  }
}
.g-body .g-main.course .blogs .btn-more::before {
  content: "";
  width: 17px;
  height: 17px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  margin-right: 7px;
  position: relative;
  display: table;
  top: -2px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .blogs .btn-more::before {
    width: 4.5vw;
    height: 4.5vw;
  }
}
.g-body .g-main.course .blogs .btn-more::before {
  background-image: url(../images/i-plus.svg);
}
.g-body .g-main.course .blogs .btn-more:hover {
  color: #fff;
  background-color: #4B2F80;
}
.g-body .g-main.course .blogs .btn-more:hover::before {
  background-image: url(../images/i-plus-w.svg);
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.course .blogs .blog-list .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
.g-body .g-main.course .blogs.focus-BG .blog-list a {
  border: 0;
}
.g-body .g-main.course .teachers-2 {
  background: url(../images/bg-teachers-list2.webp) no-repeat center bottom/cover !important;
}
.g-body .g-main.course .teachers-2 .g-container {
  max-width: 1100px;
  position: relative;
  padding-bottom: 0;
}
.g-body .g-main.course .teachers-2 .caption,
.g-body .g-main.course .teachers-2 .menu-box {
  z-index: 2;
}
@media only screen and (min-width: 1201px) {
  .g-body .g-main.course .teachers-2 .caption,
  .g-body .g-main.course .teachers-2 .menu-box {
    position: absolute;
    width: 55%;
    right: 0;
  }
}
@media only screen and (max-width: 1200px) {
  .g-body .g-main.course .teachers-2 .caption,
  .g-body .g-main.course .teachers-2 .menu-box {
    width: 90%;
    margin: auto;
  }
}
.g-body .g-main.course .teachers-2 .content-title {
  letter-spacing: 1px;
  text-align: left;
  margin-bottom: 20px;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course .teachers-2 .content-title {
    text-align: center;
    margin-top: 0;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.course .teachers-2 .content-title {
    margin-bottom: 5vw;
  }
}
.g-body .g-main.course .teachers-2 .content-title span {
  color: #333333;
  letter-spacing: 1px;
  font-size: 2rem;
  transform: skew(-8deg);
  display: inline-block;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course .teachers-2 .content-title span {
    font-size: 6vw;
    letter-spacing: 0;
  }
}
.g-body .g-main.course .teachers-2 .menu-box {
  bottom: 70px;
  border-radius: 100px;
  background-color: #fff;
  padding: 10px 70px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
@media only screen and (max-width: 1200px) {
  .g-body .g-main.course .teachers-2 .menu-box {
    width: 55%;
    position: absolute;
    bottom: 80px;
    right: 0;
  }
}
@media only screen and (max-width: 1200px) and (max-width: 650px) {
  .g-body .g-main.course .teachers-2 .menu-box {
    padding: 1.5vw 8vw 1vw;
    width: 95%;
    bottom: 10vw;
    right: 2.5%;
  }
}
.g-body .g-main.course .teachers-2 .menu-box .image-container {
  padding-bottom: 100%;
  border-radius: 100%;
  background-color: #F5F5F5;
}
.g-body .g-main.course .teachers-2 .menu-box .image-container img {
  height: 180%;
  opacity: 0.6;
}
.g-body .g-main.course .teachers-2 .menu-box .menu {
  position: relative;
  max-width: 450px;
  margin: auto;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.course .teachers-2 .menu-box .menu {
    max-width: 100%;
  }
}
.g-body .g-main.course .teachers-2 .menu-box .menu .owl-item.center .image-container, .g-body .g-main.course .teachers-2 .menu-box .menu .owl-item.owl-item.center + .owl-item + .owl-item + .owl-item + .owl-item + .owl-item + .owl-item + .owl-item + .owl-item .image-container,
.g-body .g-main.course .teachers-2 .menu-box .menu .owl-item.Selected.center .image-container,
.g-body .g-main.course .teachers-2 .menu-box .menu .owl-item.Selected.owl-item.center + .owl-item + .owl-item + .owl-item + .owl-item + .owl-item + .owl-item + .owl-item + .owl-item .image-container {
  background-color: #ded7f5;
}
.g-body .g-main.course .teachers-2 .menu-box .menu .owl-item.center .image-container img, .g-body .g-main.course .teachers-2 .menu-box .menu .owl-item.owl-item.center + .owl-item + .owl-item + .owl-item + .owl-item + .owl-item + .owl-item + .owl-item + .owl-item .image-container img,
.g-body .g-main.course .teachers-2 .menu-box .menu .owl-item.Selected.center .image-container img,
.g-body .g-main.course .teachers-2 .menu-box .menu .owl-item.Selected.owl-item.center + .owl-item + .owl-item + .owl-item + .owl-item + .owl-item + .owl-item + .owl-item + .owl-item .image-container img {
  opacity: 1;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.course .teachers-2 .menu-box .owl-nav {
    display: block;
  }
}
.g-body .g-main.course .teachers-2 .menu-box .owl-nav .owl-prev,
.g-body .g-main.course .teachers-2 .menu-box .owl-nav .owl-next {
  top: calc(50% - 15px);
  z-index: 1;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course .teachers-2 .menu-box .owl-nav .owl-prev,
  .g-body .g-main.course .teachers-2 .menu-box .owl-nav .owl-next {
    top: 15%;
  }
}
.g-body .g-main.course .teachers-2 .menu-box .owl-nav .owl-prev span,
.g-body .g-main.course .teachers-2 .menu-box .owl-nav .owl-next span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-size: 2rem;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course .teachers-2 .menu-box .owl-nav .owl-prev span,
  .g-body .g-main.course .teachers-2 .menu-box .owl-nav .owl-next span {
    width: 8vw;
    height: 8vw;
    font-size: 7vw;
  }
}
.g-body .g-main.course .teachers-2 .menu-box .owl-nav .owl-prev.disabled,
.g-body .g-main.course .teachers-2 .menu-box .owl-nav .owl-next.disabled {
  display: none;
}
.g-body .g-main.course .teachers-2 .menu-box .owl-nav .owl-prev {
  left: -40px;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course .teachers-2 .menu-box .owl-nav .owl-prev {
    left: -7vw;
  }
}
.g-body .g-main.course .teachers-2 .menu-box .owl-nav .owl-next {
  right: -40px;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course .teachers-2 .menu-box .owl-nav .owl-next {
    right: -7vw;
  }
}
.g-body .g-main.course .teachers-2 .show-box {
  width: 100%;
}
@media only screen and (max-width: 1200px) {
  .g-body .g-main.course .teachers-2 .show-box {
    width: 90%;
    margin: auto;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course .teachers-2 .show-box {
    width: 100%;
  }
}
.g-body .g-main.course .teachers-2 .show {
  width: 100%;
}
.g-body .g-main.course .teachers-2 .show .item {
  display: grid;
  grid-template-columns: 40% 55%;
  align-items: flex-end;
  gap: 5%;
}
@media only screen and (max-width: 1200px) {
  .g-body .g-main.course .teachers-2 .show .item {
    align-items: flex-end;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course .teachers-2 .show .item {
    grid-template-columns: 45% 55%;
    gap: 0%;
    margin-bottom: 20vw;
  }
}
.g-body .g-main.course .teachers-2 .show .image-container {
  aspect-ratio: 3/4;
  height: auto;
  padding-bottom: 0;
  background-color: transparent;
}
.g-body .g-main.course .teachers-2 .show .info {
  padding-left: 50px;
  text-align: left;
  margin-bottom: 200px;
}
@media only screen and (max-width: 1200px) {
  .g-body .g-main.course .teachers-2 .show .info {
    padding-left: 30px;
    margin-bottom: calc(10vw + 100px);
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course .teachers-2 .show .info {
    padding-left: 0;
    margin-bottom: 17vw;
  }
}
.g-body .g-main.course .teachers-2 .show .bg-move {
  top: -15px;
}
.g-body .g-main.course .teachers-2 .show .name {
  color: #4B2F80;
  font-size: 2.5rem;
  font-weight: 900;
  position: relative;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course .teachers-2 .show .name {
    font-size: 6.5vw;
    letter-spacing: 0;
  }
}
.g-body .g-main.course .teachers-2 .show .Certificates {
  margin-top: 15px;
  position: relative;
  z-index: 1;
}
.g-body .g-main.course .teachers-2 .btn-more {
  color: #fff;
  font-size: 1.1rem;
  border-radius: 50px;
  padding: 10px 20px 6px;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  display: flex;
  min-width: 150px;
  border: 0;
}
.g-body .g-main.course .teachers-2 .btn-more:hover {
  cursor: pointer;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .teachers-2 .btn-more {
    width: 55vw;
    min-width: auto;
    font-size: 5vw;
    padding: 10px 0 7px;
  }
}
.g-body .g-main.course .teachers-2 .btn-more {
  color: #4B2F80;
  width: 155px;
  border: 2px solid #4B2F80;
  margin: 50px auto 0;
  background-color: #fff;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .teachers-2 .btn-more {
    margin: 10vw auto 0;
  }
}
.g-body .g-main.course .teachers-2 .btn-more::before {
  content: "";
  width: 17px;
  height: 17px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  margin-right: 7px;
  position: relative;
  display: table;
  top: -2px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .teachers-2 .btn-more::before {
    width: 4.5vw;
    height: 4.5vw;
  }
}
.g-body .g-main.course .teachers-2 .btn-more::before {
  background-image: url(../images/i-plus.svg);
}
.g-body .g-main.course .teachers-2 .btn-more:hover {
  color: #fff;
  background-color: #4B2F80;
}
.g-body .g-main.course .teachers-2 .btn-more:hover::before {
  background-image: url(../images/i-plus-w.svg);
}
.g-body .g-main.course .teachers-2 .btn-more {
  border: 0;
  margin-right: 0;
  margin-top: 30px;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.course .teachers-2 .btn-more {
    margin-top: 5vw;
  }
}
.g-body .g-main.course .teachers .box-list a:nth-child(n+7) {
  display: none;
}
.g-body .g-main.course .teachers .btn-more {
  color: #fff;
  font-size: 1.1rem;
  border-radius: 50px;
  padding: 10px 20px 6px;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  display: flex;
  min-width: 150px;
  border: 0;
}
.g-body .g-main.course .teachers .btn-more:hover {
  cursor: pointer;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .teachers .btn-more {
    width: 55vw;
    min-width: auto;
    font-size: 5vw;
    padding: 10px 0 7px;
  }
}
.g-body .g-main.course .teachers .btn-more {
  color: #4B2F80;
  width: 155px;
  background-color: #F6F1FF;
  margin: 50px auto 0;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .teachers .btn-more {
    margin: 10vw auto 0;
  }
}
.g-body .g-main.course .teachers .btn-more::before {
  content: "";
  width: 17px;
  height: 17px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  margin-right: 7px;
  position: relative;
  display: table;
  top: -2px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .teachers .btn-more::before {
    width: 4.5vw;
    height: 4.5vw;
  }
}
.g-body .g-main.course .teachers .btn-more::before {
  background-image: url(../images/i-plus.svg);
}
.g-body .g-main.course .teachers .btn-more:hover {
  color: #fff;
  background-color: #4B2F80;
}
.g-body .g-main.course .teachers .btn-more:hover::before {
  background-image: url(../images/i-plus-w.svg);
}
.g-body .g-main.course .teachers .little-title {
  margin-top: 25px;
}
.g-body .g-main.course .teachers.focus-BG .teacher-list .box-list a {
  border: 0;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .students .content-title,
  .g-body .g-main.course .students .content-title span {
    letter-spacing: 2px;
  }
}
.g-body .g-main.course .students .story-list .box-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 25px;
}
@media only screen and (max-width: 1900px) {
  .g-body .g-main.course .students .story-list .box-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
}
@media only screen and (max-width: 1150px) {
  .g-body .g-main.course .students .story-list .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.course .students .story-list .box-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .students .story-list .box-list {
    gap: 5px;
  }
}
.g-body .g-main.course .students .story-list .box-list a {
  border-radius: 10px;
  overflow: hidden;
  background-color: #F5F5F5;
  display: grid;
  grid-template-columns: 150px auto;
  position: relative;
  top: 0;
  transition: 0.3s;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .students .story-list .box-list a {
    grid-template-columns: 30vw auto;
    position: static;
  }
}
.g-body .g-main.course .students .story-list .box-list a:hover {
  top: -8px;
  transition: 0.3s;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.12);
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .students .story-list .box-list a:hover {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.12);
  }
}
.g-body .g-main.course .students .story-list .box-list a .image-container {
  padding-bottom: 90%;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .students .story-list .box-list a .image-container {
    padding-bottom: 90%;
    height: 100%;
  }
}
.g-body .g-main.course .students .story-list .box-list a h3,
.g-body .g-main.course .students .story-list .box-list a .h3 {
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  color: #4B2F80;
  font-size: 1.25rem;
  font-weight: bold;
  margin: 10px 0;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .students .story-list .box-list a h3,
  .g-body .g-main.course .students .story-list .box-list a .h3 {
    font-weight: normal;
    font-size: 5vw;
    margin: 0 0 1vw;
    letter-spacing: 0;
  }
}
.g-body .g-main.course .students .story-list .box-list a .box {
  padding: 10px 10px 0 15px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .students .story-list .box-list a .box {
    padding: 3vw 2vw 3.5vw 3vw;
  }
}
.g-body .g-main.course .students .story-list .box-list a .name {
  color: #555555;
  font-size: 1rem;
  display: block;
  margin-bottom: 5px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .students .story-list .box-list a .name {
    font-size: 4.5vw;
    margin-bottom: 1vw;
  }
}
.g-body .g-main.course .students .story-list .box-list a .site {
  border: 0;
  font-size: 0.95rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .students .story-list .box-list a .site {
    font-size: 4.2vw;
  }
}
.g-body .g-main.course .students .story-list .box-list a p,
.g-body .g-main.course .students .story-list .box-list a .p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #333333;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
}
@media only screen and (max-width: 1900px) {
  .g-body .g-main.course .students .story-list .box-list a:nth-child(n+7) {
    display: none;
  }
}
.g-body .g-main.course .students .btn-more {
  color: #fff;
  font-size: 1.1rem;
  border-radius: 50px;
  padding: 10px 20px 6px;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  display: flex;
  min-width: 150px;
  border: 0;
}
.g-body .g-main.course .students .btn-more:hover {
  cursor: pointer;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .students .btn-more {
    width: 55vw;
    min-width: auto;
    font-size: 5vw;
    padding: 10px 0 7px;
  }
}
.g-body .g-main.course .students .btn-more {
  color: #4B2F80;
  width: 155px;
  background-color: #F6F1FF;
  margin: 50px auto 0;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .students .btn-more {
    margin: 10vw auto 0;
  }
}
.g-body .g-main.course .students .btn-more::before {
  content: "";
  width: 17px;
  height: 17px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  margin-right: 7px;
  position: relative;
  display: table;
  top: -2px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .students .btn-more::before {
    width: 4.5vw;
    height: 4.5vw;
  }
}
.g-body .g-main.course .students .btn-more::before {
  background-image: url(../images/i-plus.svg);
}
.g-body .g-main.course .students .btn-more:hover {
  color: #fff;
  background-color: #4B2F80;
}
.g-body .g-main.course .students .btn-more:hover::before {
  background-image: url(../images/i-plus-w.svg);
}
.g-body .g-main.course .reasons .p,
.g-body .g-main.course .advantages .p {
  margin-bottom: 25px;
}
.g-body .g-main.course .reasons .box-list,
.g-body .g-main.course .advantages .box-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 25px;
}
.g-body .g-main.course .reasons .box-list li,
.g-body .g-main.course .advantages .box-list li {
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  display: flex;
  background-color: #fff;
  padding: 25px 20px;
  border: 1px #dedede solid;
}
.g-body .g-main.course .reasons .box-list i,
.g-body .g-main.course .advantages .box-list i {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 3rem;
  justify-content: center;
  width: 95px;
  height: 95px;
  border-radius: 95px;
  margin-right: 25px;
  background-color: #7D64AB;
}
.g-body .g-main.course .reasons .box-list div,
.g-body .g-main.course .advantages .box-list div {
  width: calc(100% - 120px);
}
.g-body .g-main.course .reasons .box-list h3,
.g-body .g-main.course .advantages .box-list h3 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #4B2F80;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .reasons .box-list h3,
  .g-body .g-main.course .advantages .box-list h3 {
    font-size: 6vw;
  }
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.course .reasons .box-list,
  .g-body .g-main.course .advantages .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.course .reasons .box-list,
  .g-body .g-main.course .advantages .box-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.course .reasons .box-list,
  .g-body .g-main.course .advantages .box-list {
    gap: 15px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .reasons .box-list,
  .g-body .g-main.course .advantages .box-list {
    gap: 5px;
  }
  .g-body .g-main.course .reasons .box-list li,
  .g-body .g-main.course .advantages .box-list li {
    padding: 5vw 3vw;
  }
  .g-body .g-main.course .reasons .box-list i,
  .g-body .g-main.course .advantages .box-list i {
    font-size: 10vw;
    width: 20vw;
    height: 20vw;
    margin-right: 3vw;
  }
  .g-body .g-main.course .reasons .box-list div,
  .g-body .g-main.course .advantages .box-list div {
    width: calc(100% - 23vw);
  }
  .g-body .g-main.course .reasons .box-list p,
  .g-body .g-main.course .advantages .box-list p {
    font-size: 4.5vw;
    letter-spacing: 0.1vw;
    line-height: 1.6;
  }
}
.g-body .g-main.course .reasons.focus-BG .box-list li,
.g-body .g-main.course .advantages.focus-BG .box-list li {
  border: 0;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .reasons .content-title,
  .g-body .g-main.course .advantages .content-title {
    font-size: 7vw;
    letter-spacing: 1px;
  }
}
.g-body .g-main.course .courses .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .courses .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main.course .courses.focus-BG .course-box .box-list a {
  border: 0;
}
.g-body .g-main.course .wippea {
  background-color: #fff;
}
@media only screen and (max-width: 1200px) {
  .g-body .g-main.course .wippea .p-focus {
    color: #7D64AB;
  }
}
.g-body .g-main.course .wippea .content-title span {
  font-weight: bold;
  display: inline-block;
  letter-spacing: 1px;
}
.g-body .g-main.course .wippea .wippea-list {
  max-width: 1500px;
  padding-top: 30px;
  display: grid;
  align-items: center;
  grid-template-columns: 550px auto;
  gap: 4%;
  margin: auto;
}
@media only screen and (max-width: 1680px) {
  .g-body .g-main.course .wippea .wippea-list {
    grid-template-columns: 38% auto;
  }
}
@media only screen and (max-width: 1680px) and (max-width: 1024px) {
  .g-body .g-main.course .wippea .wippea-list {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
@media only screen and (max-width: 1680px) and (max-width: 450px) {
  .g-body .g-main.course .wippea .wippea-list {
    padding-top: 5vw;
    gap: 8vw;
    margin-bottom: 10vw;
  }
}
.g-body .g-main.course .wippea .wippea-list .image-container {
  padding-bottom: 0;
  height: auto;
  aspect-ratio: 570/516;
  background-color: transparent;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.course .wippea .wippea-list .image-container {
    max-width: 570px;
    margin: auto;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .wippea .wippea-list .image-container {
    width: 95%;
  }
}
.g-body .g-main.course .wippea .wippea-list ul {
  gap: 20px 25px;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.course .wippea .wippea-list ul {
    gap: 15px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.course .wippea .wippea-list ul {
    gap: 5px;
  }
}
.g-body .g-main.course .wippea .wippea-list ul li {
  border-radius: 10px;
  overflow: hidden;
  background: #EEEEEE;
  text-align: center;
  padding: 30px 15px 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .wippea .wippea-list ul li {
    padding: 5vw 0 3vw;
  }
}
.g-body .g-main.course .wippea .wippea-list ul li.active, .g-body .g-main.course .wippea .wippea-list ul li:hover {
  background: #4B2F80;
  cursor: pointer;
}
.g-body .g-main.course .wippea .wippea-list ul li.active h3,
.g-body .g-main.course .wippea .wippea-list ul li.active .h3,
.g-body .g-main.course .wippea .wippea-list ul li.active i, .g-body .g-main.course .wippea .wippea-list ul li:hover h3,
.g-body .g-main.course .wippea .wippea-list ul li:hover .h3,
.g-body .g-main.course .wippea .wippea-list ul li:hover i {
  color: #fff;
}
.g-body .g-main.course .wippea .wippea-list ul li.active h3 span,
.g-body .g-main.course .wippea .wippea-list ul li.active .h3 span, .g-body .g-main.course .wippea .wippea-list ul li:hover h3 span,
.g-body .g-main.course .wippea .wippea-list ul li:hover .h3 span {
  color: #FFC700;
}
.g-body .g-main.course .wippea .wippea-list ul li.active p {
  display: block;
}
.g-body .g-main.course .wippea .wippea-list ul i {
  font-size: 2rem;
  color: #4B2F80;
  margin-bottom: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .wippea .wippea-list ul i {
    font-size: 8vw;
    margin-bottom: 3.5vw;
  }
}
.g-body .g-main.course .wippea .wippea-list ul h3,
.g-body .g-main.course .wippea .wippea-list ul .h3 {
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: 0;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .wippea .wippea-list ul h3,
  .g-body .g-main.course .wippea .wippea-list ul .h3 {
    font-size: 4.2vw;
  }
}
.g-body .g-main.course .wippea .wippea-list ul h3 span,
.g-body .g-main.course .wippea .wippea-list ul .h3 span {
  color: #4B2F80;
  font-size: 1.5rem;
  font-weight: bold;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .wippea .wippea-list ul h3 span,
  .g-body .g-main.course .wippea .wippea-list ul .h3 span {
    font-size: 4.5vw;
  }
}
.g-body .g-main.course .wippea .wippea-list ul h3 div,
.g-body .g-main.course .wippea .wippea-list ul .h3 div {
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1.4;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .wippea .wippea-list ul h3 div,
  .g-body .g-main.course .wippea .wippea-list ul .h3 div {
    font-size: 5vw;
  }
}
.g-body .g-main.course .wippea .wippea-list ul p {
  cursor: default;
  width: 100%;
  position: absolute;
  line-height: 1.5;
  left: 0;
  display: none;
}
.g-body .g-main.course .wippea .wippea-list ul p::before {
  content: "⌵";
  display: block;
  margin-bottom: 7px;
}
.g-body .g-main.course .wippea .wippea-list ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-bottom: 60px;
}
@media only screen and (max-width: 1240px) and (min-width: 1025px) {
  .g-body .g-main.course .wippea .wippea-list ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.course .wippea .wippea-list ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 95%;
    margin: auto;
    padding-bottom: 100px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .wippea .wippea-list ul {
    padding-bottom: 22vw;
  }
}
.g-body .g-main.course .wippea .wippea-list p {
  top: 360px;
}
@media only screen and (max-width: 1240px) and (min-width: 1025px) {
  .g-body .g-main.course .wippea .wippea-list p {
    top: 550px;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.course .wippea .wippea-list p {
    top: 545px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .wippea .wippea-list p {
    top: 105vw;
  }
}
.g-body .g-main.course .FAQ-list {
  scroll-margin-top: 105px;
  margin-bottom: 0;
}
.g-body .g-main.course .FAQ-list > ol {
  width: 100%;
  max-width: 100%;
  list-style-type: decimal;
  list-style-position: inside;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .FAQ-list > ol {
    font-size: 4.5vw;
  }
}
.g-body .g-main.course .FAQ-list > ol ol {
  list-style-type: decimal;
  padding-inline-start: 30px;
  margin: 5px 0 25px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding-inline-start: 55px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .FAQ-list > ol ol {
    padding-inline-start: 8vw;
    margin: 2vw 0 6vw 0;
    gap: 2vw;
  }
}
.g-body .g-main.course .FAQ-list > ol ol li::before {
  content: "";
}
.g-body .g-main.course .FAQ-list > ol li {
  font-size: 1.1rem;
  line-height: 1.7;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .FAQ-list > ol li {
    font-size: 4.5vw;
  }
}
.g-body .g-main.course .FAQ-list > ol > li {
  margin-left: 20px;
  padding: 12px 40px 10px 27px;
  border-bottom: 1px dotted #cccccc;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.course .FAQ-list > ol > li {
    padding: 12px 0 10px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .FAQ-list > ol > li {
    margin-left: 0;
    padding: 5vw 2vw 5vw 6vw;
  }
}
.g-body .g-main.course .FAQ-list > ol > li:first-of-type {
  border-top: 1px dotted #cccccc;
}
.g-body .g-main.course .FAQ-list > ol > li::before, .g-body .g-main.course .FAQ-list > ol > li::marker {
  font-size: 1.25rem;
  font-weight: bold;
  color: #4B2F80;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .FAQ-list > ol > li::before, .g-body .g-main.course .FAQ-list > ol > li::marker {
    font-size: 5vw;
  }
}
.g-body .g-main.course .FAQ-list > ol > li::before {
  content: "Q";
  position: absolute;
  left: 10px;
  top: 12px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.course .FAQ-list > ol > li::before {
    left: -18px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .FAQ-list > ol > li::before {
    left: 1vw;
    top: 5vw;
  }
}
.g-body .g-main.course .FAQ-list > ol > li h3,
.g-body .g-main.course .FAQ-list > ol > li .Q {
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: bold;
  display: inline;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .FAQ-list > ol > li h3,
  .g-body .g-main.course .FAQ-list > ol > li .Q {
    font-size: 4.8vw;
  }
}
.g-body .g-main.course .FAQ-list > ol > li b {
  font-size: 1.25rem;
  line-height: 1.7;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .FAQ-list > ol > li b {
    font-size: 4.8vw;
  }
}
.g-body .g-main.course .FAQ-list > ol > li p {
  line-height: 1.7;
  margin: 15px 0 20px 25px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.course .FAQ-list > ol > li p {
    margin: 15px 0 25px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .FAQ-list > ol > li p {
    margin: 3vw 0 5vw 0;
  }
}
.g-body .g-main.course .FAQ-list > ol > li p a {
  color: #0070ff;
}
.g-body .g-main.course .FAQ-list > ol > li p a:hover,
.g-body .g-main.course .FAQ-list > ol > li p a span:hover {
  color: #FF7A00;
}
.g-body .g-main.course .FAQ-list > ol table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
  margin: 15px 0 20px 25px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.course .FAQ-list > ol table {
    max-width: 90vw;
    margin: 15px 0 20px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.course .FAQ-list > ol table {
    max-width: 92vw;
    margin-left: 0;
    margin-bottom: 8vw;
  }
}
.g-body .g-main.course .FAQ-list > ol table tbody {
  display: table;
  width: 100%;
  background-color: #fff;
}
.g-body .g-main.course .FAQ-list > ol table tbody td,
.g-body .g-main.course .FAQ-list > ol table tbody th {
  text-align: center;
  border: 1px #dedede solid;
  font-size: 1rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .FAQ-list > ol table tbody td,
  .g-body .g-main.course .FAQ-list > ol table tbody th {
    font-size: 4.5vw;
  }
}
.g-body .g-main.course .FAQ-list > ol table tbody th {
  background-color: #EEEEEE;
  white-space: nowrap;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.course .FAQ-list .content-title,
  .g-body .g-main.course .FAQ-list .content-title span {
    letter-spacing: 2px;
  }
  .g-body .g-main.course .FAQ-list > ol table {
    width: 94vw;
    max-width: 94vw;
    margin-left: -4vw;
  }
  .g-body .g-main.course .FAQ-list > ol > li p {
    margin-left: -2vw;
  }
  .g-body .g-main.course .FAQ-list > ol ol {
    margin-left: -3vw;
  }
}
@media only screen and (min-width: 451px) {
  .g-body .g-main.courses-list .content-title-word br {
    display: none;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.courses-list .content-title-word {
    color: #4B2F80;
    font-size: 4.8vw;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0;
    padding: 0 0 0 2vw;
    line-height: 1.8;
  }
}
.g-body .g-main.courses-list .info-life-english h2 span,
.g-body .g-main.courses-list .ability h2 span,
.g-body .g-main.courses-list .info-business-english h2 span,
.g-body .g-main.courses-list .char h2 span,
.g-body .g-main.courses-list .proficiency-course h2 span,
.g-body .g-main.courses-list .training h2 span,
.g-body .g-main.courses-list .abconline h2 span {
  letter-spacing: 4px;
  font-weight: bold;
}
.g-body .g-main.courses-list .info-life-english .g-container,
.g-body .g-main.courses-list .ability .g-container,
.g-body .g-main.courses-list .info-business-english .g-container,
.g-body .g-main.courses-list .char .g-container,
.g-body .g-main.courses-list .proficiency-course .g-container,
.g-body .g-main.courses-list .training .g-container,
.g-body .g-main.courses-list .abconline .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.courses-list .info-life-english .g-container,
  .g-body .g-main.courses-list .ability .g-container,
  .g-body .g-main.courses-list .info-business-english .g-container,
  .g-body .g-main.courses-list .char .g-container,
  .g-body .g-main.courses-list .proficiency-course .g-container,
  .g-body .g-main.courses-list .training .g-container,
  .g-body .g-main.courses-list .abconline .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main.courses-list .info-life-english .g-container,
.g-body .g-main.courses-list .ability .g-container,
.g-body .g-main.courses-list .info-business-english .g-container,
.g-body .g-main.courses-list .char .g-container,
.g-body .g-main.courses-list .proficiency-course .g-container,
.g-body .g-main.courses-list .training .g-container,
.g-body .g-main.courses-list .abconline .g-container {
  font-size: 1.125rem;
}
.g-body .g-main.courses-list .info-life-english .g-container p,
.g-body .g-main.courses-list .ability .g-container p,
.g-body .g-main.courses-list .info-business-english .g-container p,
.g-body .g-main.courses-list .char .g-container p,
.g-body .g-main.courses-list .proficiency-course .g-container p,
.g-body .g-main.courses-list .training .g-container p,
.g-body .g-main.courses-list .abconline .g-container p {
  font-size: 1.125rem;
  line-height: 1.8;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.courses-list .info-life-english .g-container p,
  .g-body .g-main.courses-list .ability .g-container p,
  .g-body .g-main.courses-list .info-business-english .g-container p,
  .g-body .g-main.courses-list .char .g-container p,
  .g-body .g-main.courses-list .proficiency-course .g-container p,
  .g-body .g-main.courses-list .training .g-container p,
  .g-body .g-main.courses-list .abconline .g-container p {
    font-size: 4.5vw;
  }
}
.g-body .g-main.courses-list .info-life-english .g-container p a,
.g-body .g-main.courses-list .ability .g-container p a,
.g-body .g-main.courses-list .info-business-english .g-container p a,
.g-body .g-main.courses-list .char .g-container p a,
.g-body .g-main.courses-list .proficiency-course .g-container p a,
.g-body .g-main.courses-list .training .g-container p a,
.g-body .g-main.courses-list .abconline .g-container p a {
  color: #7D64AB;
  text-decoration: underline;
}
.g-body .g-main.courses-list .info-life-english .g-container p a:hover,
.g-body .g-main.courses-list .ability .g-container p a:hover,
.g-body .g-main.courses-list .info-business-english .g-container p a:hover,
.g-body .g-main.courses-list .char .g-container p a:hover,
.g-body .g-main.courses-list .proficiency-course .g-container p a:hover,
.g-body .g-main.courses-list .training .g-container p a:hover,
.g-body .g-main.courses-list .abconline .g-container p a:hover {
  color: #FF7A00;
}
.g-body .g-main.courses-list .info-life-english .g-container p:not(:last-of-type),
.g-body .g-main.courses-list .ability .g-container p:not(:last-of-type),
.g-body .g-main.courses-list .info-business-english .g-container p:not(:last-of-type),
.g-body .g-main.courses-list .char .g-container p:not(:last-of-type),
.g-body .g-main.courses-list .proficiency-course .g-container p:not(:last-of-type),
.g-body .g-main.courses-list .training .g-container p:not(:last-of-type),
.g-body .g-main.courses-list .abconline .g-container p:not(:last-of-type) {
  margin-bottom: 10px;
}
.g-body .g-main.courses-list .info-life-english .g-container p b,
.g-body .g-main.courses-list .ability .g-container p b,
.g-body .g-main.courses-list .info-business-english .g-container p b,
.g-body .g-main.courses-list .char .g-container p b,
.g-body .g-main.courses-list .proficiency-course .g-container p b,
.g-body .g-main.courses-list .training .g-container p b,
.g-body .g-main.courses-list .abconline .g-container p b {
  color: #000;
  font-size: 1.25rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.courses-list .info-life-english .g-container p b,
  .g-body .g-main.courses-list .ability .g-container p b,
  .g-body .g-main.courses-list .info-business-english .g-container p b,
  .g-body .g-main.courses-list .char .g-container p b,
  .g-body .g-main.courses-list .proficiency-course .g-container p b,
  .g-body .g-main.courses-list .training .g-container p b,
  .g-body .g-main.courses-list .abconline .g-container p b {
    font-size: 4.8vw;
  }
}
.g-body .g-main.courses-list .info-life-english .g-container i.fa-solid,
.g-body .g-main.courses-list .ability .g-container i.fa-solid,
.g-body .g-main.courses-list .info-business-english .g-container i.fa-solid,
.g-body .g-main.courses-list .char .g-container i.fa-solid,
.g-body .g-main.courses-list .proficiency-course .g-container i.fa-solid,
.g-body .g-main.courses-list .training .g-container i.fa-solid,
.g-body .g-main.courses-list .abconline .g-container i.fa-solid {
  font-weight: 900;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.courses-list .info-life-english .g-container > p,
  .g-body .g-main.courses-list .ability .g-container > p,
  .g-body .g-main.courses-list .info-business-english .g-container > p,
  .g-body .g-main.courses-list .char .g-container > p,
  .g-body .g-main.courses-list .proficiency-course .g-container > p,
  .g-body .g-main.courses-list .training .g-container > p,
  .g-body .g-main.courses-list .abconline .g-container > p {
    padding: 0 3vw;
  }
}
.g-body .g-main.courses-list .info-life-english .g-search,
.g-body .g-main.courses-list .ability .g-search,
.g-body .g-main.courses-list .info-business-english .g-search,
.g-body .g-main.courses-list .char .g-search,
.g-body .g-main.courses-list .proficiency-course .g-search,
.g-body .g-main.courses-list .training .g-search,
.g-body .g-main.courses-list .abconline .g-search {
  margin-top: 30px;
}
.g-body .g-main.courses-list .info-life-english .g-search .search-box,
.g-body .g-main.courses-list .ability .g-search .search-box,
.g-body .g-main.courses-list .info-business-english .g-search .search-box,
.g-body .g-main.courses-list .char .g-search .search-box,
.g-body .g-main.courses-list .proficiency-course .g-search .search-box,
.g-body .g-main.courses-list .training .g-search .search-box,
.g-body .g-main.courses-list .abconline .g-search .search-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.courses-list .info-life-english .g-search .search-box,
  .g-body .g-main.courses-list .ability .g-search .search-box,
  .g-body .g-main.courses-list .info-business-english .g-search .search-box,
  .g-body .g-main.courses-list .char .g-search .search-box,
  .g-body .g-main.courses-list .proficiency-course .g-search .search-box,
  .g-body .g-main.courses-list .training .g-search .search-box,
  .g-body .g-main.courses-list .abconline .g-search .search-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
.g-body .g-main.courses-list .info-life-english .ol-point,
.g-body .g-main.courses-list .ability .ol-point,
.g-body .g-main.courses-list .info-business-english .ol-point,
.g-body .g-main.courses-list .char .ol-point,
.g-body .g-main.courses-list .proficiency-course .ol-point,
.g-body .g-main.courses-list .training .ol-point,
.g-body .g-main.courses-list .abconline .ol-point {
  margin-bottom: 35px;
}
.g-body .g-main.courses-list .info-life-english .ol-point li,
.g-body .g-main.courses-list .ability .ol-point li,
.g-body .g-main.courses-list .info-business-english .ol-point li,
.g-body .g-main.courses-list .char .ol-point li,
.g-body .g-main.courses-list .proficiency-course .ol-point li,
.g-body .g-main.courses-list .training .ol-point li,
.g-body .g-main.courses-list .abconline .ol-point li {
  color: #333333;
  position: relative;
  padding-left: 20px;
}
.g-body .g-main.courses-list .info-life-english .ol-point li::before,
.g-body .g-main.courses-list .ability .ol-point li::before,
.g-body .g-main.courses-list .info-business-english .ol-point li::before,
.g-body .g-main.courses-list .char .ol-point li::before,
.g-body .g-main.courses-list .proficiency-course .ol-point li::before,
.g-body .g-main.courses-list .training .ol-point li::before,
.g-body .g-main.courses-list .abconline .ol-point li::before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background-color: #FF9F40;
  left: 0;
  top: 6px;
  position: absolute;
}
.g-body .g-main.courses-list .info-life-english .ol-point li:not(:last-child),
.g-body .g-main.courses-list .ability .ol-point li:not(:last-child),
.g-body .g-main.courses-list .info-business-english .ol-point li:not(:last-child),
.g-body .g-main.courses-list .char .ol-point li:not(:last-child),
.g-body .g-main.courses-list .proficiency-course .ol-point li:not(:last-child),
.g-body .g-main.courses-list .training .ol-point li:not(:last-child),
.g-body .g-main.courses-list .abconline .ol-point li:not(:last-child) {
  margin-bottom: 15px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.courses-list .info-life-english .ol-point li,
  .g-body .g-main.courses-list .ability .ol-point li,
  .g-body .g-main.courses-list .info-business-english .ol-point li,
  .g-body .g-main.courses-list .char .ol-point li,
  .g-body .g-main.courses-list .proficiency-course .ol-point li,
  .g-body .g-main.courses-list .training .ol-point li,
  .g-body .g-main.courses-list .abconline .ol-point li {
    font-size: 4.8vw;
    padding-left: 7.5vw;
  }
  .g-body .g-main.courses-list .info-life-english .ol-point li::before,
  .g-body .g-main.courses-list .ability .ol-point li::before,
  .g-body .g-main.courses-list .info-business-english .ol-point li::before,
  .g-body .g-main.courses-list .char .ol-point li::before,
  .g-body .g-main.courses-list .proficiency-course .ol-point li::before,
  .g-body .g-main.courses-list .training .ol-point li::before,
  .g-body .g-main.courses-list .abconline .ol-point li::before {
    width: 4vw;
    height: 4vw;
    border-radius: 4vw;
    top: 1.2vw;
    left: 1.5vw;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.courses-list .info-life-english .ol-point,
  .g-body .g-main.courses-list .ability .ol-point,
  .g-body .g-main.courses-list .info-business-english .ol-point,
  .g-body .g-main.courses-list .char .ol-point,
  .g-body .g-main.courses-list .proficiency-course .ol-point,
  .g-body .g-main.courses-list .training .ol-point,
  .g-body .g-main.courses-list .abconline .ol-point {
    margin-bottom: 10vw;
  }
}
.g-body .g-main.courses-list .info-life-english .table-article,
.g-body .g-main.courses-list .ability .table-article,
.g-body .g-main.courses-list .info-business-english .table-article,
.g-body .g-main.courses-list .char .table-article,
.g-body .g-main.courses-list .proficiency-course .table-article,
.g-body .g-main.courses-list .training .table-article,
.g-body .g-main.courses-list .abconline .table-article {
  margin: 15px 0 35px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.courses-list .info-life-english .table-article td,
  .g-body .g-main.courses-list .ability .table-article td,
  .g-body .g-main.courses-list .info-business-english .table-article td,
  .g-body .g-main.courses-list .char .table-article td,
  .g-body .g-main.courses-list .proficiency-course .table-article td,
  .g-body .g-main.courses-list .training .table-article td,
  .g-body .g-main.courses-list .abconline .table-article td {
    padding: 3vw 2vw;
  }
}
.g-body .g-main.courses-list .info-life-english .table-color td,
.g-body .g-main.courses-list .ability .table-color td,
.g-body .g-main.courses-list .info-business-english .table-color td,
.g-body .g-main.courses-list .char .table-color td,
.g-body .g-main.courses-list .proficiency-course .table-color td,
.g-body .g-main.courses-list .training .table-color td,
.g-body .g-main.courses-list .abconline .table-color td {
  padding: 20px 15px;
}
.g-body .g-main.courses-list .info-life-english .table-color td:nth-child(1),
.g-body .g-main.courses-list .ability .table-color td:nth-child(1),
.g-body .g-main.courses-list .info-business-english .table-color td:nth-child(1),
.g-body .g-main.courses-list .char .table-color td:nth-child(1),
.g-body .g-main.courses-list .proficiency-course .table-color td:nth-child(1),
.g-body .g-main.courses-list .training .table-color td:nth-child(1),
.g-body .g-main.courses-list .abconline .table-color td:nth-child(1) {
  width: 20px;
}
.g-body .g-main.courses-list .info-life-english .table-date th,
.g-body .g-main.courses-list .ability .table-date th,
.g-body .g-main.courses-list .info-business-english .table-date th,
.g-body .g-main.courses-list .char .table-date th,
.g-body .g-main.courses-list .proficiency-course .table-date th,
.g-body .g-main.courses-list .training .table-date th,
.g-body .g-main.courses-list .abconline .table-date th {
  white-space: normal;
}
.g-body .g-main.courses-list .info-life-english .table-date tbody td,
.g-body .g-main.courses-list .ability .table-date tbody td,
.g-body .g-main.courses-list .info-business-english .table-date tbody td,
.g-body .g-main.courses-list .char .table-date tbody td,
.g-body .g-main.courses-list .proficiency-course .table-date tbody td,
.g-body .g-main.courses-list .training .table-date tbody td,
.g-body .g-main.courses-list .abconline .table-date tbody td {
  padding: 20px 15px;
  text-align: center;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.courses-list .info-life-english .table-date tbody td:nth-child(2),
  .g-body .g-main.courses-list .ability .table-date tbody td:nth-child(2),
  .g-body .g-main.courses-list .info-business-english .table-date tbody td:nth-child(2),
  .g-body .g-main.courses-list .char .table-date tbody td:nth-child(2),
  .g-body .g-main.courses-list .proficiency-course .table-date tbody td:nth-child(2),
  .g-body .g-main.courses-list .training .table-date tbody td:nth-child(2),
  .g-body .g-main.courses-list .abconline .table-date tbody td:nth-child(2) {
    padding-top: 5vw;
  }
}
.g-body .g-main.courses-list .info-life-english .table-date tbody td[rowspan],
.g-body .g-main.courses-list .ability .table-date tbody td[rowspan],
.g-body .g-main.courses-list .info-business-english .table-date tbody td[rowspan],
.g-body .g-main.courses-list .char .table-date tbody td[rowspan],
.g-body .g-main.courses-list .proficiency-course .table-date tbody td[rowspan],
.g-body .g-main.courses-list .training .table-date tbody td[rowspan],
.g-body .g-main.courses-list .abconline .table-date tbody td[rowspan] {
  font-size: 1.125em;
  font-weight: bold;
  color: #7D64AB;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.courses-list .info-life-english .table-date tbody td[rowspan],
  .g-body .g-main.courses-list .ability .table-date tbody td[rowspan],
  .g-body .g-main.courses-list .info-business-english .table-date tbody td[rowspan],
  .g-body .g-main.courses-list .char .table-date tbody td[rowspan],
  .g-body .g-main.courses-list .proficiency-course .table-date tbody td[rowspan],
  .g-body .g-main.courses-list .training .table-date tbody td[rowspan],
  .g-body .g-main.courses-list .abconline .table-date tbody td[rowspan] {
    font-size: 5vw;
    color: #fff;
    text-align: center;
    background-color: #7D64AB;
    padding: 3vw 0 2.2vw !important;
  }
}
.g-body .g-main.courses-list .info-life-english .table-date tbody td[colspan],
.g-body .g-main.courses-list .ability .table-date tbody td[colspan],
.g-body .g-main.courses-list .info-business-english .table-date tbody td[colspan],
.g-body .g-main.courses-list .char .table-date tbody td[colspan],
.g-body .g-main.courses-list .proficiency-course .table-date tbody td[colspan],
.g-body .g-main.courses-list .training .table-date tbody td[colspan],
.g-body .g-main.courses-list .abconline .table-date tbody td[colspan] {
  text-align: left;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.courses-list .info-life-english .table-date tbody td[colspan],
  .g-body .g-main.courses-list .ability .table-date tbody td[colspan],
  .g-body .g-main.courses-list .info-business-english .table-date tbody td[colspan],
  .g-body .g-main.courses-list .char .table-date tbody td[colspan],
  .g-body .g-main.courses-list .proficiency-course .table-date tbody td[colspan],
  .g-body .g-main.courses-list .training .table-date tbody td[colspan],
  .g-body .g-main.courses-list .abconline .table-date tbody td[colspan] {
    background-color: #F6F1FF;
    margin-bottom: 5vw;
    border-bottom: 1px #dedede solid;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.courses-list .info-life-english .table-date td,
  .g-body .g-main.courses-list .ability .table-date td,
  .g-body .g-main.courses-list .info-business-english .table-date td,
  .g-body .g-main.courses-list .char .table-date td,
  .g-body .g-main.courses-list .proficiency-course .table-date td,
  .g-body .g-main.courses-list .training .table-date td,
  .g-body .g-main.courses-list .abconline .table-date td {
    text-align: left;
  }
  .g-body .g-main.courses-list .info-life-english .table-date thead,
  .g-body .g-main.courses-list .ability .table-date thead,
  .g-body .g-main.courses-list .info-business-english .table-date thead,
  .g-body .g-main.courses-list .char .table-date thead,
  .g-body .g-main.courses-list .proficiency-course .table-date thead,
  .g-body .g-main.courses-list .training .table-date thead,
  .g-body .g-main.courses-list .abconline .table-date thead {
    display: none;
  }
  .g-body .g-main.courses-list .info-life-english .table-date tbody,
  .g-body .g-main.courses-list .ability .table-date tbody,
  .g-body .g-main.courses-list .info-business-english .table-date tbody,
  .g-body .g-main.courses-list .char .table-date tbody,
  .g-body .g-main.courses-list .proficiency-course .table-date tbody,
  .g-body .g-main.courses-list .training .table-date tbody,
  .g-body .g-main.courses-list .abconline .table-date tbody {
    border-bottom: 1px #dedede solid;
  }
  .g-body .g-main.courses-list .info-life-english .table-date tbody tr,
  .g-body .g-main.courses-list .ability .table-date tbody tr,
  .g-body .g-main.courses-list .info-business-english .table-date tbody tr,
  .g-body .g-main.courses-list .char .table-date tbody tr,
  .g-body .g-main.courses-list .proficiency-course .table-date tbody tr,
  .g-body .g-main.courses-list .training .table-date tbody tr,
  .g-body .g-main.courses-list .abconline .table-date tbody tr {
    display: block;
    border: 1px #dedede solid;
    border-bottom: 0;
  }
  .g-body .g-main.courses-list .info-life-english .table-date tbody td,
  .g-body .g-main.courses-list .info-life-english .table-date tbody th,
  .g-body .g-main.courses-list .ability .table-date tbody td,
  .g-body .g-main.courses-list .ability .table-date tbody th,
  .g-body .g-main.courses-list .info-business-english .table-date tbody td,
  .g-body .g-main.courses-list .info-business-english .table-date tbody th,
  .g-body .g-main.courses-list .char .table-date tbody td,
  .g-body .g-main.courses-list .char .table-date tbody th,
  .g-body .g-main.courses-list .proficiency-course .table-date tbody td,
  .g-body .g-main.courses-list .proficiency-course .table-date tbody th,
  .g-body .g-main.courses-list .training .table-date tbody td,
  .g-body .g-main.courses-list .training .table-date tbody th,
  .g-body .g-main.courses-list .abconline .table-date tbody td,
  .g-body .g-main.courses-list .abconline .table-date tbody th {
    display: block;
    text-align: left;
    border: 0;
  }
  .g-body .g-main.courses-list .info-life-english .table-date tbody td,
  .g-body .g-main.courses-list .ability .table-date tbody td,
  .g-body .g-main.courses-list .info-business-english .table-date tbody td,
  .g-body .g-main.courses-list .char .table-date tbody td,
  .g-body .g-main.courses-list .proficiency-course .table-date tbody td,
  .g-body .g-main.courses-list .training .table-date tbody td,
  .g-body .g-main.courses-list .abconline .table-date tbody td {
    padding: 3px 15px 3px;
  }
  .g-body .g-main.courses-list .info-life-english .table-date,
  .g-body .g-main.courses-list .ability .table-date,
  .g-body .g-main.courses-list .info-business-english .table-date,
  .g-body .g-main.courses-list .char .table-date,
  .g-body .g-main.courses-list .proficiency-course .table-date,
  .g-body .g-main.courses-list .training .table-date,
  .g-body .g-main.courses-list .abconline .table-date {
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.courses-list .info-life-english .table-date tbody td,
  .g-body .g-main.courses-list .ability .table-date tbody td,
  .g-body .g-main.courses-list .info-business-english .table-date tbody td,
  .g-body .g-main.courses-list .char .table-date tbody td,
  .g-body .g-main.courses-list .proficiency-course .table-date tbody td,
  .g-body .g-main.courses-list .training .table-date tbody td,
  .g-body .g-main.courses-list .abconline .table-date tbody td {
    padding: 1vw 3vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.courses-list .info-life-english .table-date tbody td:nth-of-type(1),
  .g-body .g-main.courses-list .ability .table-date tbody td:nth-of-type(1),
  .g-body .g-main.courses-list .info-business-english .table-date tbody td:nth-of-type(1),
  .g-body .g-main.courses-list .char .table-date tbody td:nth-of-type(1),
  .g-body .g-main.courses-list .proficiency-course .table-date tbody td:nth-of-type(1),
  .g-body .g-main.courses-list .training .table-date tbody td:nth-of-type(1),
  .g-body .g-main.courses-list .abconline .table-date tbody td:nth-of-type(1) {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.courses-list .info-life-english .table-date tbody td:nth-of-type(1),
  .g-body .g-main.courses-list .ability .table-date tbody td:nth-of-type(1),
  .g-body .g-main.courses-list .info-business-english .table-date tbody td:nth-of-type(1),
  .g-body .g-main.courses-list .char .table-date tbody td:nth-of-type(1),
  .g-body .g-main.courses-list .proficiency-course .table-date tbody td:nth-of-type(1),
  .g-body .g-main.courses-list .training .table-date tbody td:nth-of-type(1),
  .g-body .g-main.courses-list .abconline .table-date tbody td:nth-of-type(1) {
    padding-top: 5vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.courses-list .info-life-english .table-date tbody td:nth-last-of-type(1),
  .g-body .g-main.courses-list .ability .table-date tbody td:nth-last-of-type(1),
  .g-body .g-main.courses-list .info-business-english .table-date tbody td:nth-last-of-type(1),
  .g-body .g-main.courses-list .char .table-date tbody td:nth-last-of-type(1),
  .g-body .g-main.courses-list .proficiency-course .table-date tbody td:nth-last-of-type(1),
  .g-body .g-main.courses-list .training .table-date tbody td:nth-last-of-type(1),
  .g-body .g-main.courses-list .abconline .table-date tbody td:nth-last-of-type(1) {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.courses-list .info-life-english .table-date tbody td:nth-last-of-type(1),
  .g-body .g-main.courses-list .ability .table-date tbody td:nth-last-of-type(1),
  .g-body .g-main.courses-list .info-business-english .table-date tbody td:nth-last-of-type(1),
  .g-body .g-main.courses-list .char .table-date tbody td:nth-last-of-type(1),
  .g-body .g-main.courses-list .proficiency-course .table-date tbody td:nth-last-of-type(1),
  .g-body .g-main.courses-list .training .table-date tbody td:nth-last-of-type(1),
  .g-body .g-main.courses-list .abconline .table-date tbody td:nth-last-of-type(1) {
    padding-bottom: 5vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.courses-list .info-life-english .table-date thead,
  .g-body .g-main.courses-list .ability .table-date thead,
  .g-body .g-main.courses-list .info-business-english .table-date thead,
  .g-body .g-main.courses-list .char .table-date thead,
  .g-body .g-main.courses-list .proficiency-course .table-date thead,
  .g-body .g-main.courses-list .training .table-date thead,
  .g-body .g-main.courses-list .abconline .table-date thead {
    display: none;
  }
  .g-body .g-main.courses-list .info-life-english .table-date tbody,
  .g-body .g-main.courses-list .ability .table-date tbody,
  .g-body .g-main.courses-list .info-business-english .table-date tbody,
  .g-body .g-main.courses-list .char .table-date tbody,
  .g-body .g-main.courses-list .proficiency-course .table-date tbody,
  .g-body .g-main.courses-list .training .table-date tbody,
  .g-body .g-main.courses-list .abconline .table-date tbody {
    border-bottom: 0;
  }
  .g-body .g-main.courses-list .info-life-english .table-date tbody tr:nth-last-of-type(1) td[colspan],
  .g-body .g-main.courses-list .ability .table-date tbody tr:nth-last-of-type(1) td[colspan],
  .g-body .g-main.courses-list .info-business-english .table-date tbody tr:nth-last-of-type(1) td[colspan],
  .g-body .g-main.courses-list .char .table-date tbody tr:nth-last-of-type(1) td[colspan],
  .g-body .g-main.courses-list .proficiency-course .table-date tbody tr:nth-last-of-type(1) td[colspan],
  .g-body .g-main.courses-list .training .table-date tbody tr:nth-last-of-type(1) td[colspan],
  .g-body .g-main.courses-list .abconline .table-date tbody tr:nth-last-of-type(1) td[colspan] {
    margin-bottom: 0;
  }
}
.g-body .g-main.courses-list .info-life-english p,
.g-body .g-main.courses-list .info-business-english p {
  text-align: center;
  margin-bottom: 50px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.courses-list .info-life-english p,
  .g-body .g-main.courses-list .info-business-english p {
    text-align: left;
    margin-bottom: 8vw;
  }
}
.g-body .g-main.courses-list .info-life-english .box,
.g-body .g-main.courses-list .info-business-english .box {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  transition: 0.3s;
  top: 0;
}
.g-body .g-main.courses-list .info-life-english .box:hover,
.g-body .g-main.courses-list .info-business-english .box:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.12);
  transition: 0.3s;
  top: -5px;
}
.g-body .g-main.courses-list .info-life-english .box,
.g-body .g-main.courses-list .info-business-english .box {
  border: 1px #dedede solid;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.courses-list .info-life-english .box,
  .g-body .g-main.courses-list .info-business-english .box {
    grid-template-columns: auto 480px;
  }
}
@media only screen and (max-width: 1440px) and (max-width: 1024px) {
  .g-body .g-main.courses-list .info-life-english .box,
  .g-body .g-main.courses-list .info-business-english .box {
    grid-template-columns: auto 350px;
  }
}
@media only screen and (max-width: 1440px) and (max-width: 768px) {
  .g-body .g-main.courses-list .info-life-english .box,
  .g-body .g-main.courses-list .info-business-english .box {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.g-body .g-main.courses-list .info-life-english .box .image-container,
.g-body .g-main.courses-list .info-business-english .box .image-container {
  padding-bottom: 0;
  height: 100%;
  min-height: 350px;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.courses-list .info-life-english .box .image-container,
  .g-body .g-main.courses-list .info-business-english .box .image-container {
    min-height: 300px;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.courses-list .info-life-english .box .image-container,
  .g-body .g-main.courses-list .info-business-english .box .image-container {
    min-height: 250px;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.courses-list .info-life-english .box .image-container,
  .g-body .g-main.courses-list .info-business-english .box .image-container {
    padding-bottom: 50%;
    height: 0;
    min-height: 0;
  }
}
.g-body .g-main.courses-list .info-life-english .box .box-content,
.g-body .g-main.courses-list .info-business-english .box .box-content {
  margin: auto;
  padding: 30px 50px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.courses-list .info-life-english .box .box-content,
  .g-body .g-main.courses-list .info-business-english .box .box-content {
    padding: 20px 35px;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.courses-list .info-life-english .box .box-content,
  .g-body .g-main.courses-list .info-business-english .box .box-content {
    width: 100%;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.courses-list .info-life-english .box .box-content,
  .g-body .g-main.courses-list .info-business-english .box .box-content {
    padding: 5vw 3vw;
  }
}
.g-body .g-main.courses-list .info-life-english .box .info,
.g-body .g-main.courses-list .info-business-english .box .info {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px #dedede solid;
  margin-bottom: 20px;
  padding: 0 0 20px 0;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.courses-list .info-life-english .box .info,
  .g-body .g-main.courses-list .info-business-english .box .info {
    margin-bottom: 5vw;
    padding: 0 0 5vw 0;
    gap: 3vw;
  }
}
.g-body .g-main.courses-list .info-life-english .box .info span,
.g-body .g-main.courses-list .info-business-english .box .info span {
  background-color: #7D64AB;
  color: #fff;
  font-size: 1.25rem;
  text-align: center;
  border-radius: 4px;
  padding: 5px 10px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.courses-list .info-life-english .box .info span,
  .g-body .g-main.courses-list .info-business-english .box .info span {
    font-size: 5vw;
    padding: 1vw 2vw;
  }
}
.g-body .g-main.courses-list .info-life-english .box .info h3,
.g-body .g-main.courses-list .info-business-english .box .info h3 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333333;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.courses-list .info-life-english .box .info h3,
  .g-body .g-main.courses-list .info-business-english .box .info h3 {
    font-weight: normal;
    font-size: 6vw;
  }
}
.g-body .g-main.courses-list .info-life-english .box ul,
.g-body .g-main.courses-list .info-business-english .box ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  gap: 0 25px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.courses-list .info-life-english .box ul,
  .g-body .g-main.courses-list .info-business-english .box ul {
    gap: 0 5px;
  }
  .g-body .g-main.courses-list .info-life-english .box ul li:not(:last-child),
  .g-body .g-main.courses-list .info-business-english .box ul li:not(:last-child) {
    margin-bottom: 10px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.courses-list .info-life-english .box ul,
  .g-body .g-main.courses-list .info-business-english .box ul {
    gap: 0 1vw;
  }
  .g-body .g-main.courses-list .info-life-english .box ul li:not(:last-child),
  .g-body .g-main.courses-list .info-business-english .box ul li:not(:last-child) {
    margin-bottom: 3vw;
  }
}
.g-body .g-main.courses-list .info-life-english .box ul li,
.g-body .g-main.courses-list .info-business-english .box ul li {
  color: #333333;
  position: relative;
  padding-left: 20px;
}
.g-body .g-main.courses-list .info-life-english .box ul li::before,
.g-body .g-main.courses-list .info-business-english .box ul li::before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background-color: #FF9F40;
  left: 0;
  top: 6px;
  position: absolute;
}
.g-body .g-main.courses-list .info-life-english .box ul li:not(:last-child),
.g-body .g-main.courses-list .info-business-english .box ul li:not(:last-child) {
  margin-bottom: 15px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.courses-list .info-life-english .box ul li,
  .g-body .g-main.courses-list .info-business-english .box ul li {
    font-size: 4.8vw;
    padding-left: 7.5vw;
  }
  .g-body .g-main.courses-list .info-life-english .box ul li::before,
  .g-body .g-main.courses-list .info-business-english .box ul li::before {
    width: 4vw;
    height: 4vw;
    border-radius: 4vw;
    top: 1.2vw;
    left: 1.5vw;
  }
}
.g-body .g-main.courses-list .info-life-english.info-life-english .box,
.g-body .g-main.courses-list .info-business-english.info-life-english .box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media only screen and (max-width: 1225px) {
  .g-body .g-main.courses-list .info-life-english.info-life-english .box,
  .g-body .g-main.courses-list .info-business-english.info-life-english .box {
    grid-template-columns: auto 450px;
  }
}
@media only screen and (max-width: 1000px) {
  .g-body .g-main.courses-list .info-life-english.info-life-english .box,
  .g-body .g-main.courses-list .info-business-english.info-life-english .box {
    grid-template-columns: auto 390px;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.courses-list .info-life-english.info-life-english .box,
  .g-body .g-main.courses-list .info-business-english.info-life-english .box {
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 1760px) {
  .g-body .g-main.courses-list .info-life-english.info-life-english .box ul,
  .g-body .g-main.courses-list .info-business-english.info-life-english .box ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 1290px) {
  .g-body .g-main.courses-list .info-life-english.info-life-english .box ul,
  .g-body .g-main.courses-list .info-business-english.info-life-english .box ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
.g-body .g-main.courses-list .info-life-english.info-business-english .box,
.g-body .g-main.courses-list .info-business-english.info-business-english .box {
  display: grid;
  grid-template-columns: 45% 55%;
}
@media only screen and (max-width: 915px) {
  .g-body .g-main.courses-list .info-life-english.info-business-english .box,
  .g-body .g-main.courses-list .info-business-english.info-business-english .box {
    grid-template-columns: auto 480px;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.courses-list .info-life-english.info-business-english .box,
  .g-body .g-main.courses-list .info-business-english.info-business-english .box {
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 1900px) {
  .g-body .g-main.courses-list .info-life-english.info-business-english .box ul,
  .g-body .g-main.courses-list .info-business-english.info-business-english .box ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 1470px) {
  .g-body .g-main.courses-list .info-life-english.info-business-english .box ul,
  .g-body .g-main.courses-list .info-business-english.info-business-english .box ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 500px) {
  .g-body .g-main.courses-list .info-life-english.info-business-english .box ul,
  .g-body .g-main.courses-list .info-business-english.info-business-english .box ul {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 500px) {
  .g-body .g-main.courses-list .info-life-english.info-business-english .box ul,
  .g-body .g-main.courses-list .info-business-english.info-business-english .box ul {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.g-body .g-main.courses-list .ability .box-list,
.g-body .g-main.courses-list .char .box-list,
.g-body .g-main.courses-list .proficiency-course .box-list,
.g-body .g-main.courses-list .training .box-list,
.g-body .g-main.courses-list .abconline .box-list {
  gap: 20px 25px;
}
.g-body .g-main.courses-list .ability .box-list a,
.g-body .g-main.courses-list .char .box-list a,
.g-body .g-main.courses-list .proficiency-course .box-list a,
.g-body .g-main.courses-list .training .box-list a,
.g-body .g-main.courses-list .abconline .box-list a {
  cursor: pointer;
  display: block;
  height: 100%;
  width: 100%;
  position: relative;
}
.g-body .g-main.courses-list .ability .box-list a .info,
.g-body .g-main.courses-list .ability .box-list a > h3,
.g-body .g-main.courses-list .ability .box-list a > .h3,
.g-body .g-main.courses-list .char .box-list a .info,
.g-body .g-main.courses-list .char .box-list a > h3,
.g-body .g-main.courses-list .char .box-list a > .h3,
.g-body .g-main.courses-list .proficiency-course .box-list a .info,
.g-body .g-main.courses-list .proficiency-course .box-list a > h3,
.g-body .g-main.courses-list .proficiency-course .box-list a > .h3,
.g-body .g-main.courses-list .training .box-list a .info,
.g-body .g-main.courses-list .training .box-list a > h3,
.g-body .g-main.courses-list .training .box-list a > .h3,
.g-body .g-main.courses-list .abconline .box-list a .info,
.g-body .g-main.courses-list .abconline .box-list a > h3,
.g-body .g-main.courses-list .abconline .box-list a > .h3 {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
  background-color: rgba(41, 41, 41, 0.7);
  text-shadow: 3px 3px 10px #000;
}
.g-body .g-main.courses-list .ability .box-list a .info:hover,
.g-body .g-main.courses-list .ability .box-list a > h3:hover,
.g-body .g-main.courses-list .ability .box-list a > .h3:hover,
.g-body .g-main.courses-list .char .box-list a .info:hover,
.g-body .g-main.courses-list .char .box-list a > h3:hover,
.g-body .g-main.courses-list .char .box-list a > .h3:hover,
.g-body .g-main.courses-list .proficiency-course .box-list a .info:hover,
.g-body .g-main.courses-list .proficiency-course .box-list a > h3:hover,
.g-body .g-main.courses-list .proficiency-course .box-list a > .h3:hover,
.g-body .g-main.courses-list .training .box-list a .info:hover,
.g-body .g-main.courses-list .training .box-list a > h3:hover,
.g-body .g-main.courses-list .training .box-list a > .h3:hover,
.g-body .g-main.courses-list .abconline .box-list a .info:hover,
.g-body .g-main.courses-list .abconline .box-list a > h3:hover,
.g-body .g-main.courses-list .abconline .box-list a > .h3:hover {
  background-color: rgba(41, 41, 41, 0.2);
}
.g-body .g-main.courses-list .ability .box-list a img,
.g-body .g-main.courses-list .char .box-list a img,
.g-body .g-main.courses-list .proficiency-course .box-list a img,
.g-body .g-main.courses-list .training .box-list a img,
.g-body .g-main.courses-list .abconline .box-list a img {
  transition: 0.3s;
}
.g-body .g-main.courses-list .ability .box-list a:hover img,
.g-body .g-main.courses-list .char .box-list a:hover img,
.g-body .g-main.courses-list .proficiency-course .box-list a:hover img,
.g-body .g-main.courses-list .training .box-list a:hover img,
.g-body .g-main.courses-list .abconline .box-list a:hover img {
  transition: 0.3s;
  transform: scale(1.1);
}
.g-body .g-main.courses-list .ability .box-list a h3,
.g-body .g-main.courses-list .ability .box-list a .h3,
.g-body .g-main.courses-list .char .box-list a h3,
.g-body .g-main.courses-list .char .box-list a .h3,
.g-body .g-main.courses-list .proficiency-course .box-list a h3,
.g-body .g-main.courses-list .proficiency-course .box-list a .h3,
.g-body .g-main.courses-list .training .box-list a h3,
.g-body .g-main.courses-list .training .box-list a .h3,
.g-body .g-main.courses-list .abconline .box-list a h3,
.g-body .g-main.courses-list .abconline .box-list a .h3 {
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.courses-list .ability .box-list a h3,
  .g-body .g-main.courses-list .ability .box-list a .h3,
  .g-body .g-main.courses-list .char .box-list a h3,
  .g-body .g-main.courses-list .char .box-list a .h3,
  .g-body .g-main.courses-list .proficiency-course .box-list a h3,
  .g-body .g-main.courses-list .proficiency-course .box-list a .h3,
  .g-body .g-main.courses-list .training .box-list a h3,
  .g-body .g-main.courses-list .training .box-list a .h3,
  .g-body .g-main.courses-list .abconline .box-list a h3,
  .g-body .g-main.courses-list .abconline .box-list a .h3 {
    font-size: 6vw;
  }
}
.g-body .g-main.courses-list .ability .box-list a span,
.g-body .g-main.courses-list .char .box-list a span,
.g-body .g-main.courses-list .proficiency-course .box-list a span,
.g-body .g-main.courses-list .training .box-list a span,
.g-body .g-main.courses-list .abconline .box-list a span {
  font-size: 1rem;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px 10px 4px;
  background-color: #7D64AB;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.courses-list .ability .box-list a span,
  .g-body .g-main.courses-list .char .box-list a span,
  .g-body .g-main.courses-list .proficiency-course .box-list a span,
  .g-body .g-main.courses-list .training .box-list a span,
  .g-body .g-main.courses-list .abconline .box-list a span {
    font-size: 4.8vw;
    padding: 1.2vw 3vw 1.4vw;
  }
}
.g-body .g-main.courses-list .ability .box-list a,
.g-body .g-main.courses-list .char .box-list a,
.g-body .g-main.courses-list .proficiency-course .box-list a,
.g-body .g-main.courses-list .training .box-list a,
.g-body .g-main.courses-list .abconline .box-list a {
  position: relative;
  border: 0;
}
.g-body .g-main.courses-list .ability .g-container > .box-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
@media only screen and (max-width: 1680px) {
  .g-body .g-main.courses-list .ability .g-container > .box-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.courses-list .ability .g-container > .box-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.courses-list .ability .g-container > .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.courses-list .ability .g-container > .box-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.g-body .g-main.courses-list .proficiency-course .g-container > .box-list,
.g-body .g-main.courses-list .char .g-container > .box-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.courses-list .proficiency-course .g-container > .box-list,
  .g-body .g-main.courses-list .char .g-container > .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.courses-list .proficiency-course .g-container > .box-list,
  .g-body .g-main.courses-list .char .g-container > .box-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.g-body .g-main.courses-list .proficiency-course .g-container > .box-list > a h3,
.g-body .g-main.courses-list .char .g-container > .box-list > a h3 {
  display: flex;
}
.g-body .g-main.courses-list .abconline .g-container > .box-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.courses-list .abconline .g-container > .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.courses-list .abconline .g-container > .box-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.g-body .g-main.courses-list .abconline .g-container > .box-list .image-container {
  height: 200px;
}
.g-body .g-main.courses-list .training .g-container > .box-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.courses-list .training .g-container > .box-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.g-body .g-main.courses-list .training .g-container > .box-list .image-container {
  height: 250px;
}
.g-body .g-main.courses-list .suitable .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.courses-list .suitable .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main.courses-list .suitable .box-list {
  margin: 50px 0 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px 25px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.courses-list .suitable .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 25px;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.courses-list .suitable .box-list {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 470px;
    margin: 50px auto 20px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.courses-list .suitable .box-list {
    margin: 10vw 0 3vw 3vw;
    gap: 10vw;
  }
}
.g-body .g-main.courses-list .suitable .box-list li {
  display: flex;
  align-items: center;
}
.g-body .g-main.courses-list .suitable .box-list .image-container {
  width: 80px;
  padding-bottom: 85px;
  background-color: #fff;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.courses-list .suitable .box-list .image-container {
    width: 23vw;
    padding-bottom: 25vw;
  }
}
.g-body .g-main.courses-list .suitable .box-list .info {
  width: calc(100% - 100px);
  padding-left: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.courses-list .suitable .box-list .info {
    width: calc(100% - 28vw);
    padding-left: 5vw;
  }
}
.g-body .g-main.courses-list .suitable .box-list h3 {
  color: #4B2F80;
  font-size: 1.375rem;
  font-weight: bold;
  line-height: 1.7;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.courses-list .suitable .box-list h3 {
    font-size: 6vw;
  }
}
@media only screen and (max-width: 1200px) {
  .g-body .g-main.courses-list .nav-page {
    overflow-x: auto;
    justify-content: flex-start;
  }
}
.g-body .g-main.japanese-course .g-popup .m-title {
  background-color: #091b59;
}
.g-body .g-main.japanese-course .advantages.g-container {
  padding-top: 0;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.japanese-course .advantages .content-title {
    width: 90%;
    margin-left: 5%;
  }
}
.g-body .g-main.japanese-course .advantages .box-list i {
  background-color: #091b59;
}
.g-body .g-main.japanese-course .advantages .box-list h3 {
  width: calc(100% - 120px);
  color: #091b59;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.japanese-course .advantages .box-list h3 {
    font-size: 4.6vw;
    width: calc(100% - 22vw);
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.japanese-course .advantages .little-title.long {
    display: block;
  }
  .g-body .g-main.japanese-course .advantages .little-title.long::before, .g-body .g-main.japanese-course .advantages .little-title.long::after {
    display: none;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.japanese-course .visual .g-container {
    height: 300px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.japanese-course .visual .g-container {
    height: 70vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.japanese-course .visual .owl-carousel {
    max-height: 360px;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.japanese-course .visual .owl-carousel .image-container {
    padding-bottom: 360px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.japanese-course .visual .owl-carousel .image-container {
    padding-bottom: calc(70vw + 60px);
  }
}
.g-body .g-main.japanese-course .visual .page-title {
  height: 70px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.japanese-course .visual .page-title {
    font-size: 1.8rem;
    letter-spacing: 0.25rem;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.japanese-course .visual .page-title {
    font-size: 7vw;
    letter-spacing: 0.15vw;
    height: 20vw;
  }
}
.g-body .g-main.japanese-course .visual p {
  max-width: 930px;
  line-height: 1.8;
  margin: auto;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.japanese-course .visual p {
    width: 90%;
  }
}
.g-body .g-main.japanese-course .content-title span {
  display: none;
}
.g-body .g-main.japanese-course .intro .g-container > p {
  text-align: left;
  font-size: 1.25rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.japanese-course .intro .g-container > p {
    font-size: 4.5vw;
  }
}
.g-body .g-main.japanese-course .intro .box-list li .info span {
  background-color: #091b59 !important;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.japanese-course .intro-0 h2 {
    font-size: 6.6vw;
    letter-spacing: 0.15vw;
  }
}
.g-body .g-main.japanese-course .intro-1 .g-container > .box-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.g-body .g-main.japanese-course .intro-1 .g-container > .box-list .image-container {
  height: 250px;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.japanese-course .intro-1 .g-container > .box-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.g-body .g-main.japanese-course .intro-2 .g-container > .box-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
@media only screen and (max-width: 1680px) {
  .g-body .g-main.japanese-course .intro-2 .g-container > .box-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.japanese-course .intro-2 .g-container > .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.japanese-course .intro-2 .g-container > .box-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.g-body .g-main.japanese-course .intro-3 .g-container > .box-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.japanese-course .intro-3 .g-container > .box-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.japanese-course .intro-3 .g-container > .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.japanese-course .intro-3 .g-container > .box-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.g-body .g-main.japanese-course .intro-4 .g-container > .box-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.g-body .g-main.japanese-course .intro-4 .g-container > .box-list .image-container {
  height: 250px;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.japanese-course .intro-4 .g-container > .box-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.japanese-course .intro-4 .g-container > .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.japanese-course .intro-4 .g-container > .box-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.g-body .g-main.japanese-course .intro-4 .ul-list {
  display: grid;
  grid-template-columns: 1fr;
}
.g-body .g-main.japanese-course .btn-search {
  background-color: #091b59;
}
.g-body .g-main.japanese-course .btn-search:hover {
  background-color: #364475;
}
.g-body .g-main.japanese-course .teacher-list .box-list .image-container img {
  height: 100%;
}
.g-body .g-main.japanese-course .students .story-list .box-list a .image-container {
  padding-bottom: 100%;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.japanese-course .students .content-title {
    font-size: 6.5vw;
    letter-spacing: 0.1vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.japanese-course .nav-page {
    overflow-x: auto;
    justify-content: flex-start;
  }
}
.g-body .g-main.japanese-course .intro .box-list li .info span {
  background-color: #091b59 !important;
}
.g-body .g-main.japanese-course .intro .g-iframe table thead {
  background-color: #555555;
}
.g-body .g-main.japanese-course .intro .g-iframe table td {
  text-align: left;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.japanese-course .intro-1 .course-1-2 .box-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.japanese-course .intro-1 .course-1-2 .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.japanese-course .intro-1 .course-1-2 .box-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.g-body .g-main.japanese-course .intro-1 .course-1-3 .ul-list {
  display: grid;
  grid-template-columns: 1fr;
}
.g-body .g-main.japanese-course .intro-2 .course-2-4 .box-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.japanese-course .intro-2 .course-2-4 .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.japanese-course .intro-2 .course-2-4 .box-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.g-body .g-main.japanese-course .intro-3 .course-3-1 .box-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 1200px) and (min-width: 1025px) {
  .g-body .g-main.japanese-course .intro-3 .course-3-1 .box-list li .h3 {
    font-size: 1.3rem;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.japanese-course .intro-3 .course-3-1 .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.japanese-course .intro-3 .course-3-1 .box-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.japanese-course .intro-3 .course-3-2 table tbody th::after {
    content: "月";
  }
  .g-body .g-main.japanese-course .intro-3 .course-3-2 table tbody td:nth-of-type(1)::before {
    content: "日文名稱：";
  }
  .g-body .g-main.japanese-course .intro-3 .course-3-2 table tbody td:nth-of-type(2)::before {
    content: "中文名稱：";
  }
}
.g-body .g-main.japanese-course .intro-3 .course-3-3 .ul-list,
.g-body .g-main.japanese-course .intro-3 .course-3-4 .ul-list {
  display: grid;
  grid-template-columns: 1fr;
}
.g-body .g-main.japanese-course .intro-4 .g-container > .box-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.g-body .g-main.japanese-course .intro-4 .g-container > .box-list .image-container {
  height: 250px;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.japanese-course .intro-4 .g-container > .box-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.japanese-course .intro-4 .g-container > .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.japanese-course .intro-4 .g-container > .box-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.g-body .g-main.japanese-course .intro-4 .ul-list {
  display: grid;
  grid-template-columns: 1fr;
}
.g-body .g-main.japanese-course .intro-4 .course-4-2 .box-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 1200px) and (min-width: 1025px) {
  .g-body .g-main.japanese-course .intro-4 .course-4-2 .box-list li .h3 {
    font-size: 1.3rem;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.japanese-course .intro-4 .course-4-2 .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.japanese-course .intro-4 .course-4-2 .box-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.g-body .g-main.japanese-course .intro-4 .course-4-3 .box-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.g-body .g-main.japanese-course .intro-4 .course-4-3 .box-list .image-container {
  height: 120px;
}
@media only screen and (min-width: 1025px) {
  .g-body .g-main.japanese-course .intro-4 .course-4-3 .box-list li .h3 {
    font-size: 1.2rem;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.japanese-course .intro-4 .course-4-3 .box-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 850px) {
  .g-body .g-main.japanese-course .intro-4 .course-4-3 .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.japanese-course .intro-4 .course-4-3 .box-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.japanese-course .intro-1 .g-iframe table td,
  .g-body .g-main.japanese-course .course-2-1 .g-iframe table td,
  .g-body .g-main.japanese-course .course-2-2 .g-iframe table td,
  .g-body .g-main.japanese-course .course-2-3 .g-iframe table td,
  .g-body .g-main.japanese-course .course-2-5 .g-iframe table td,
  .g-body .g-main.japanese-course .course-2-7 .g-iframe table td,
  .g-body .g-main.japanese-course .intro-3 .g-iframe table td,
  .g-body .g-main.japanese-course .intro-4 .g-iframe table td {
    text-align: left;
  }
  .g-body .g-main.japanese-course .intro-1 .g-iframe table thead,
  .g-body .g-main.japanese-course .course-2-1 .g-iframe table thead,
  .g-body .g-main.japanese-course .course-2-2 .g-iframe table thead,
  .g-body .g-main.japanese-course .course-2-3 .g-iframe table thead,
  .g-body .g-main.japanese-course .course-2-5 .g-iframe table thead,
  .g-body .g-main.japanese-course .course-2-7 .g-iframe table thead,
  .g-body .g-main.japanese-course .intro-3 .g-iframe table thead,
  .g-body .g-main.japanese-course .intro-4 .g-iframe table thead {
    display: none;
  }
  .g-body .g-main.japanese-course .intro-1 .g-iframe table tbody,
  .g-body .g-main.japanese-course .course-2-1 .g-iframe table tbody,
  .g-body .g-main.japanese-course .course-2-2 .g-iframe table tbody,
  .g-body .g-main.japanese-course .course-2-3 .g-iframe table tbody,
  .g-body .g-main.japanese-course .course-2-5 .g-iframe table tbody,
  .g-body .g-main.japanese-course .course-2-7 .g-iframe table tbody,
  .g-body .g-main.japanese-course .intro-3 .g-iframe table tbody,
  .g-body .g-main.japanese-course .intro-4 .g-iframe table tbody {
    border-bottom: 1px #dedede solid;
  }
  .g-body .g-main.japanese-course .intro-1 .g-iframe table tbody tr,
  .g-body .g-main.japanese-course .course-2-1 .g-iframe table tbody tr,
  .g-body .g-main.japanese-course .course-2-2 .g-iframe table tbody tr,
  .g-body .g-main.japanese-course .course-2-3 .g-iframe table tbody tr,
  .g-body .g-main.japanese-course .course-2-5 .g-iframe table tbody tr,
  .g-body .g-main.japanese-course .course-2-7 .g-iframe table tbody tr,
  .g-body .g-main.japanese-course .intro-3 .g-iframe table tbody tr,
  .g-body .g-main.japanese-course .intro-4 .g-iframe table tbody tr {
    display: block;
    border: 1px #dedede solid;
    border-bottom: 0;
  }
  .g-body .g-main.japanese-course .intro-1 .g-iframe table tbody td,
  .g-body .g-main.japanese-course .intro-1 .g-iframe table tbody th,
  .g-body .g-main.japanese-course .course-2-1 .g-iframe table tbody td,
  .g-body .g-main.japanese-course .course-2-1 .g-iframe table tbody th,
  .g-body .g-main.japanese-course .course-2-2 .g-iframe table tbody td,
  .g-body .g-main.japanese-course .course-2-2 .g-iframe table tbody th,
  .g-body .g-main.japanese-course .course-2-3 .g-iframe table tbody td,
  .g-body .g-main.japanese-course .course-2-3 .g-iframe table tbody th,
  .g-body .g-main.japanese-course .course-2-5 .g-iframe table tbody td,
  .g-body .g-main.japanese-course .course-2-5 .g-iframe table tbody th,
  .g-body .g-main.japanese-course .course-2-7 .g-iframe table tbody td,
  .g-body .g-main.japanese-course .course-2-7 .g-iframe table tbody th,
  .g-body .g-main.japanese-course .intro-3 .g-iframe table tbody td,
  .g-body .g-main.japanese-course .intro-3 .g-iframe table tbody th,
  .g-body .g-main.japanese-course .intro-4 .g-iframe table tbody td,
  .g-body .g-main.japanese-course .intro-4 .g-iframe table tbody th {
    display: block;
    text-align: left;
    border: 0;
  }
  .g-body .g-main.japanese-course .intro-1 .g-iframe table tbody td,
  .g-body .g-main.japanese-course .course-2-1 .g-iframe table tbody td,
  .g-body .g-main.japanese-course .course-2-2 .g-iframe table tbody td,
  .g-body .g-main.japanese-course .course-2-3 .g-iframe table tbody td,
  .g-body .g-main.japanese-course .course-2-5 .g-iframe table tbody td,
  .g-body .g-main.japanese-course .course-2-7 .g-iframe table tbody td,
  .g-body .g-main.japanese-course .intro-3 .g-iframe table tbody td,
  .g-body .g-main.japanese-course .intro-4 .g-iframe table tbody td {
    padding: 3px 15px 3px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.japanese-course .intro-1 .g-iframe table tbody td,
  .g-body .g-main.japanese-course .course-2-1 .g-iframe table tbody td,
  .g-body .g-main.japanese-course .course-2-2 .g-iframe table tbody td,
  .g-body .g-main.japanese-course .course-2-3 .g-iframe table tbody td,
  .g-body .g-main.japanese-course .course-2-5 .g-iframe table tbody td,
  .g-body .g-main.japanese-course .course-2-7 .g-iframe table tbody td,
  .g-body .g-main.japanese-course .intro-3 .g-iframe table tbody td,
  .g-body .g-main.japanese-course .intro-4 .g-iframe table tbody td {
    padding: 1vw 3vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.japanese-course .intro-1 .g-iframe table tbody td:nth-of-type(1),
  .g-body .g-main.japanese-course .course-2-1 .g-iframe table tbody td:nth-of-type(1),
  .g-body .g-main.japanese-course .course-2-2 .g-iframe table tbody td:nth-of-type(1),
  .g-body .g-main.japanese-course .course-2-3 .g-iframe table tbody td:nth-of-type(1),
  .g-body .g-main.japanese-course .course-2-5 .g-iframe table tbody td:nth-of-type(1),
  .g-body .g-main.japanese-course .course-2-7 .g-iframe table tbody td:nth-of-type(1),
  .g-body .g-main.japanese-course .intro-3 .g-iframe table tbody td:nth-of-type(1),
  .g-body .g-main.japanese-course .intro-4 .g-iframe table tbody td:nth-of-type(1) {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.japanese-course .intro-1 .g-iframe table tbody td:nth-of-type(1),
  .g-body .g-main.japanese-course .course-2-1 .g-iframe table tbody td:nth-of-type(1),
  .g-body .g-main.japanese-course .course-2-2 .g-iframe table tbody td:nth-of-type(1),
  .g-body .g-main.japanese-course .course-2-3 .g-iframe table tbody td:nth-of-type(1),
  .g-body .g-main.japanese-course .course-2-5 .g-iframe table tbody td:nth-of-type(1),
  .g-body .g-main.japanese-course .course-2-7 .g-iframe table tbody td:nth-of-type(1),
  .g-body .g-main.japanese-course .intro-3 .g-iframe table tbody td:nth-of-type(1),
  .g-body .g-main.japanese-course .intro-4 .g-iframe table tbody td:nth-of-type(1) {
    padding-top: 5vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.japanese-course .intro-1 .g-iframe table tbody td:nth-last-of-type(1),
  .g-body .g-main.japanese-course .course-2-1 .g-iframe table tbody td:nth-last-of-type(1),
  .g-body .g-main.japanese-course .course-2-2 .g-iframe table tbody td:nth-last-of-type(1),
  .g-body .g-main.japanese-course .course-2-3 .g-iframe table tbody td:nth-last-of-type(1),
  .g-body .g-main.japanese-course .course-2-5 .g-iframe table tbody td:nth-last-of-type(1),
  .g-body .g-main.japanese-course .course-2-7 .g-iframe table tbody td:nth-last-of-type(1),
  .g-body .g-main.japanese-course .intro-3 .g-iframe table tbody td:nth-last-of-type(1),
  .g-body .g-main.japanese-course .intro-4 .g-iframe table tbody td:nth-last-of-type(1) {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.japanese-course .intro-1 .g-iframe table tbody td:nth-last-of-type(1),
  .g-body .g-main.japanese-course .course-2-1 .g-iframe table tbody td:nth-last-of-type(1),
  .g-body .g-main.japanese-course .course-2-2 .g-iframe table tbody td:nth-last-of-type(1),
  .g-body .g-main.japanese-course .course-2-3 .g-iframe table tbody td:nth-last-of-type(1),
  .g-body .g-main.japanese-course .course-2-5 .g-iframe table tbody td:nth-last-of-type(1),
  .g-body .g-main.japanese-course .course-2-7 .g-iframe table tbody td:nth-last-of-type(1),
  .g-body .g-main.japanese-course .intro-3 .g-iframe table tbody td:nth-last-of-type(1),
  .g-body .g-main.japanese-course .intro-4 .g-iframe table tbody td:nth-last-of-type(1) {
    padding-bottom: 5vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.japanese-course .intro-1 .g-iframe table td,
  .g-body .g-main.japanese-course .course-2-1 .g-iframe table td,
  .g-body .g-main.japanese-course .course-2-2 .g-iframe table td,
  .g-body .g-main.japanese-course .course-2-3 .g-iframe table td,
  .g-body .g-main.japanese-course .course-2-5 .g-iframe table td,
  .g-body .g-main.japanese-course .course-2-7 .g-iframe table td,
  .g-body .g-main.japanese-course .intro-3 .g-iframe table td,
  .g-body .g-main.japanese-course .intro-4 .g-iframe table td {
    padding-top: 0 !important;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.japanese-course .course-3-2 .g-iframe table thead {
    display: block;
  }
  .g-body .g-main.japanese-course .course-3-2 .g-iframe table thead th:not(:first-of-type) {
    display: none;
  }
  .g-body .g-main.japanese-course .course-3-2 .g-iframe table thead th:first-of-type {
    border: 0;
  }
}
@media only screen and (min-width: 451px) and (max-width: 768px) {
  .g-body .g-main.life-english .visual .page-title {
    font-size: 1.75rem;
    line-height: 2.5;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.life-english .visual .page-title {
    font-size: 6.5vw;
    letter-spacing: 0.3rem;
  }
}
.g-body .g-main.life-english .skill h2 span {
  letter-spacing: 4px;
  font-weight: bold;
}
.g-body .g-main.life-english .skill .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.life-english .skill .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main.life-english .skill .g-container {
  font-size: 1.125rem;
}
.g-body .g-main.life-english .skill .g-container p {
  font-size: 1.125rem;
  line-height: 1.8;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.life-english .skill .g-container p {
    font-size: 4.5vw;
  }
}
.g-body .g-main.life-english .skill .g-container p a {
  color: #7D64AB;
  text-decoration: underline;
}
.g-body .g-main.life-english .skill .g-container p a:hover {
  color: #FF7A00;
}
.g-body .g-main.life-english .skill .g-container p:not(:last-of-type) {
  margin-bottom: 10px;
}
.g-body .g-main.life-english .skill .g-container p b {
  color: #000;
  font-size: 1.25rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.life-english .skill .g-container p b {
    font-size: 4.8vw;
  }
}
.g-body .g-main.life-english .skill .g-container i.fa-solid {
  font-weight: 900;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.life-english .skill .g-container > p {
    padding: 0 3vw;
  }
}
.g-body .g-main.life-english .skill .g-search {
  margin-top: 30px;
}
.g-body .g-main.life-english .skill .g-search .search-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.life-english .skill .g-search .search-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
.g-body .g-main.life-english .skill .ol-point {
  margin-bottom: 35px;
}
.g-body .g-main.life-english .skill .ol-point li {
  color: #333333;
  position: relative;
  padding-left: 20px;
}
.g-body .g-main.life-english .skill .ol-point li::before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background-color: #FF9F40;
  left: 0;
  top: 6px;
  position: absolute;
}
.g-body .g-main.life-english .skill .ol-point li:not(:last-child) {
  margin-bottom: 15px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.life-english .skill .ol-point li {
    font-size: 4.8vw;
    padding-left: 7.5vw;
  }
  .g-body .g-main.life-english .skill .ol-point li::before {
    width: 4vw;
    height: 4vw;
    border-radius: 4vw;
    top: 1.2vw;
    left: 1.5vw;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.life-english .skill .ol-point {
    margin-bottom: 10vw;
  }
}
.g-body .g-main.life-english .skill .table-article {
  margin: 15px 0 35px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.life-english .skill .table-article td {
    padding: 3vw 2vw;
  }
}
.g-body .g-main.life-english .skill .table-color td {
  padding: 20px 15px;
}
.g-body .g-main.life-english .skill .table-color td:nth-child(1) {
  width: 20px;
}
.g-body .g-main.life-english .skill .table-date th {
  white-space: normal;
}
.g-body .g-main.life-english .skill .table-date tbody td {
  padding: 20px 15px;
  text-align: center;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.life-english .skill .table-date tbody td:nth-child(2) {
    padding-top: 5vw;
  }
}
.g-body .g-main.life-english .skill .table-date tbody td[rowspan] {
  font-size: 1.125em;
  font-weight: bold;
  color: #7D64AB;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.life-english .skill .table-date tbody td[rowspan] {
    font-size: 5vw;
    color: #fff;
    text-align: center;
    background-color: #7D64AB;
    padding: 3vw 0 2.2vw !important;
  }
}
.g-body .g-main.life-english .skill .table-date tbody td[colspan] {
  text-align: left;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.life-english .skill .table-date tbody td[colspan] {
    background-color: #F6F1FF;
    margin-bottom: 5vw;
    border-bottom: 1px #dedede solid;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.life-english .skill .table-date td {
    text-align: left;
  }
  .g-body .g-main.life-english .skill .table-date thead {
    display: none;
  }
  .g-body .g-main.life-english .skill .table-date tbody {
    border-bottom: 1px #dedede solid;
  }
  .g-body .g-main.life-english .skill .table-date tbody tr {
    display: block;
    border: 1px #dedede solid;
    border-bottom: 0;
  }
  .g-body .g-main.life-english .skill .table-date tbody td,
  .g-body .g-main.life-english .skill .table-date tbody th {
    display: block;
    text-align: left;
    border: 0;
  }
  .g-body .g-main.life-english .skill .table-date tbody td {
    padding: 3px 15px 3px;
  }
  .g-body .g-main.life-english .skill .table-date {
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.life-english .skill .table-date tbody td {
    padding: 1vw 3vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.life-english .skill .table-date tbody td:nth-of-type(1) {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.life-english .skill .table-date tbody td:nth-of-type(1) {
    padding-top: 5vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.life-english .skill .table-date tbody td:nth-last-of-type(1) {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.life-english .skill .table-date tbody td:nth-last-of-type(1) {
    padding-bottom: 5vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.life-english .skill .table-date thead {
    display: none;
  }
  .g-body .g-main.life-english .skill .table-date tbody {
    border-bottom: 0;
  }
  .g-body .g-main.life-english .skill .table-date tbody tr:nth-last-of-type(1) td[colspan] {
    margin-bottom: 0;
  }
}
.g-body .g-main.life-english .skill .g-container > p {
  text-align: center;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.life-english .skill .g-container > p {
    text-align: left;
  }
}
.g-body .g-main.life-english .skill ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 25px;
  margin-top: 30px;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.life-english .skill ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.life-english .skill ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.life-english .skill ul {
    gap: 5px;
  }
}
.g-body .g-main.life-english .skill ul li {
  border-radius: 10px;
  overflow: hidden;
  background-color: #F6F1FF;
  padding: 25px 30px;
}
.g-body .g-main.life-english .skill ul li i {
  width: 45px;
  font-size: 2.2rem;
}
.g-body .g-main.life-english .skill ul li h3 {
  font-size: 2rem;
  font-weight: bold;
}
.g-body .g-main.life-english .skill ul li div {
  display: flex;
  align-items: center;
  color: #7D64AB;
  gap: 15px;
  margin-bottom: 10px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.life-english .skill ul li {
    padding: 5vw;
  }
  .g-body .g-main.life-english .skill ul li i {
    font-size: 8vw;
    width: 9vw;
  }
  .g-body .g-main.life-english .skill ul li h3 {
    font-size: 6.5vw;
  }
  .g-body .g-main.life-english .skill ul li p {
    font-size: 4.3vw;
    letter-spacing: 0;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.life-english .skill .content-title {
    font-size: 6.3vw;
    letter-spacing: 1px;
  }
}
.g-body .g-main.life-english .feature .box h3 {
  font-size: 1.45rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.life-english .feature .box h3 {
    font-size: 5.5vw;
  }
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.life-english .feature ul.box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.life-english .feature ul.box-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.g-body .g-main.life-english .intro .g-container > .box-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.g-body .g-main.life-english .intro .g-container > .box-list .image-container {
  height: 200px;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.life-english .intro .g-container > .box-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.life-english .intro .g-container > .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.life-english .intro .g-container > .box-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.life-english .video .content-title {
    font-size: 7.2vw;
    letter-spacing: 1px;
  }
}
.g-body .g-main.business-english h1 span {
  display: none;
}
.g-body .g-main.business-english .feature .g-container > p {
  text-align: left;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.business-english .feature .content-title span,
  .g-body .g-main.business-english .intro .content-title span {
    display: none;
  }
}
.g-body .g-main.business-english .intro .g-container > .box-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.business-english .intro .g-container > .box-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.business-english .intro .g-container > .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.business-english .intro .g-container > .box-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.g-body .g-main.business-english .Suitable .g-container {
  padding-top: 0;
}
.g-body .g-main.business-english .Suitable p {
  text-align: center !important;
}
.g-body .g-main.business-english .Suitable ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 25px;
  margin-top: 50px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.business-english .Suitable ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.business-english .Suitable ul {
    margin-top: 7vw;
    gap: 5px;
  }
}
.g-body .g-main.business-english .Suitable li {
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  padding: 30px 25px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.business-english .Suitable li {
    padding: 6vw;
  }
}
.g-body .g-main.business-english .Suitable i {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 3rem;
  background: linear-gradient(25deg, #107ee5, #7D64AB);
  width: 100px;
  height: 100px;
  border-radius: 100px;
  margin: auto;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.business-english .Suitable i {
    font-size: 10vw;
    width: 24vw;
    height: 24vw;
  }
}
.g-body .g-main.business-english .Suitable h3 {
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  margin-top: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.business-english .Suitable h3 {
    font-size: 6vw;
    margin-top: 5vw;
  }
}
.g-body .g-main.business-english .map .color-TOEIC td,
.g-body .g-main.business-english .map .color-TOEIC th {
  color: #fff;
  background-color: #4B2F80;
}
@media only screen and (max-width: 1680px) {
  .g-body .g-main.toeic .intro .g-container > .box-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.toeic .intro .g-container > .box-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.toeic .intro .g-container > .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toeic .intro .g-container > .box-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.g-body .g-main.toeic .listening-reading .g-container > P:nth-of-type(2) {
  margin-bottom: 35px;
}
.g-body .g-main.toeic .listening-reading .ul-advantage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 25px;
  margin-bottom: 35px;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.toeic .listening-reading .ul-advantage {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.toeic .listening-reading .ul-advantage {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toeic .listening-reading .ul-advantage {
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 5vw;
  }
}
.g-body .g-main.toeic .listening-reading .ul-advantage li {
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 25px;
  background-color: #fff;
  padding: 10px;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.toeic .listening-reading .ul-advantage li {
    flex-direction: column;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toeic .listening-reading .ul-advantage li {
    gap: 5vw;
    padding: 3.5vw 3.3vw;
  }
}
.g-body .g-main.toeic .listening-reading .ul-advantage .image-container {
  width: 170px;
  padding-bottom: 170px;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.toeic .listening-reading .ul-advantage .image-container {
    width: 100%;
    padding-bottom: 100%;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toeic .listening-reading .ul-advantage .image-container {
    max-width: 65%;
    padding-bottom: 65%;
  }
}
.g-body .g-main.toeic .listening-reading .ul-advantage .info {
  width: calc(100% - 195px);
}
.g-body .g-main.toeic .listening-reading .ul-advantage .info h4 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 5px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toeic .listening-reading .ul-advantage .info h4 {
    font-size: 7vw;
    text-align: center;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.toeic .listening-reading .ul-advantage .info {
    width: 100%;
  }
}
.g-body .g-main.toeic .listening-reading .ul-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 25px;
  margin: 35px 0;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.toeic .listening-reading .ul-content {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.g-body .g-main.toeic .listening-reading .ul-content li {
  display: grid;
  grid-template-columns: 50px 190px 1fr;
  padding-bottom: 10px;
  border-bottom: 1px dotted #ccc;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.toeic .listening-reading .ul-content li {
    grid-template-columns: 50px 1fr;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toeic .listening-reading .ul-content li {
    grid-template-columns: 15vw 1fr;
  }
}
.g-body .g-main.toeic .listening-reading .ul-content i {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  display: flex;
  align-items: center;
  font-size: 1.375rem;
  color: #fff;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background-color: #7D64AB;
  margin-top: -3px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.toeic .listening-reading .ul-content i {
    margin-top: -5px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toeic .listening-reading .ul-content i {
    font-size: 5vw;
    width: 10vw;
    height: 10vw;
    margin-top: -1.5vw;
    margin-left: 2vw;
  }
}
.g-body .g-main.toeic .listening-reading .ul-content h4 {
  color: #7D64AB;
  font-size: 1.5rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toeic .listening-reading .ul-content h4 {
    font-size: 6vw;
  }
}
.g-body .g-main.toeic .listening-reading .ul-content p {
  margin-top: 2px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.toeic .listening-reading .ul-content p {
    grid-column-start: 1;
    grid-column-end: 3;
    padding-left: 5px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toeic .listening-reading .ul-content p {
    padding: 3px 3vw 0;
  }
}
.g-body .g-main.toeic .listening-reading p span {
  color: #4B2F80;
  font-size: 1.25rem;
  font-weight: bold;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.toeic .listening-reading p span {
    display: block;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toeic .listening-reading p span {
    font-size: 5vw;
  }
}
.g-body .g-main.toeic .listening-reading .table-list {
  margin-bottom: 15px;
}
.g-body .g-main.toeic .listening-reading .table-color td:nth-child(1) {
  width: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toeic .listening-reading .table-color td:nth-child(1) {
    width: 3.5vw;
    padding: 0;
  }
}
.g-body .g-main.toeic .listening-reading .table-color td:nth-child(2),
.g-body .g-main.toeic .listening-reading .table-color td:nth-child(3) {
  padding: 20px 35px;
  font-size: 1.25rem;
  font-weight: bold;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.toeic .listening-reading .table-color td:nth-child(2),
  .g-body .g-main.toeic .listening-reading .table-color td:nth-child(3) {
    padding: 20px 15px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toeic .listening-reading .table-color td:nth-child(2),
  .g-body .g-main.toeic .listening-reading .table-color td:nth-child(3) {
    font-size: 5vw;
    padding: 5vw 1vw 5vw 2vw;
  }
}
.g-body .g-main.toeic .listening-reading .table-color td:nth-child(2) {
  white-space: nowrap;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.toeic .listening-reading .table-color td:nth-child(2) {
    white-space: normal;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toeic .listening-reading .table-color td:nth-child(4) {
    font-size: 4vw;
    padding: 3vw 2vw;
  }
}
.g-body .g-main.toeic .listening-reading .table-color tr:nth-child(1) td:nth-child(1) {
  background-color: #D5B14D;
}
.g-body .g-main.toeic .listening-reading .table-color tr:nth-child(2) td:nth-child(1) {
  background-color: #82a4d6;
}
.g-body .g-main.toeic .listening-reading .table-color tr:nth-child(3) td:nth-child(1) {
  background-color: #74a57e;
}
.g-body .g-main.toeic .listening-reading .table-color tr:nth-child(4) td:nth-child(1) {
  background-color: #b08055;
}
.g-body .g-main.toeic .listening-reading .table-color tr:nth-child(5) td:nth-child(1) {
  background-color: #ff7648;
}
.g-body .g-main.toeic .listening-reading .table-date {
  margin-bottom: 0;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.toeic .listening-reading .table-date tbody td:nth-child(1)::before {
    content: "多益考試日期：";
  }
  .g-body .g-main.toeic .listening-reading .table-date tbody td:nth-child(2)::before {
    content: "多益報名時間：";
  }
  .g-body .g-main.toeic .listening-reading .table-date tbody td:nth-child(3)::before {
    content: "應考資訊查詢日：";
  }
  .g-body .g-main.toeic .listening-reading .table-date tbody td:nth-child(4)::before {
    content: "網路查詢成績日：";
  }
  .g-body .g-main.toeic .listening-reading .table-date tbody td:nth-child(5)::before {
    content: "成績單預寄日：";
  }
}
.g-body .g-main.toeic .toeic-bridge h2 span {
  letter-spacing: 4px;
  font-weight: bold;
}
.g-body .g-main.toeic .toeic-bridge .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toeic .toeic-bridge .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main.toeic .toeic-bridge .g-container {
  font-size: 1.125rem;
}
.g-body .g-main.toeic .toeic-bridge .g-container p {
  font-size: 1.125rem;
  line-height: 1.8;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toeic .toeic-bridge .g-container p {
    font-size: 4.5vw;
  }
}
.g-body .g-main.toeic .toeic-bridge .g-container p a {
  color: #7D64AB;
  text-decoration: underline;
}
.g-body .g-main.toeic .toeic-bridge .g-container p a:hover {
  color: #FF7A00;
}
.g-body .g-main.toeic .toeic-bridge .g-container p:not(:last-of-type) {
  margin-bottom: 10px;
}
.g-body .g-main.toeic .toeic-bridge .g-container p b {
  color: #000;
  font-size: 1.25rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toeic .toeic-bridge .g-container p b {
    font-size: 4.8vw;
  }
}
.g-body .g-main.toeic .toeic-bridge .g-container i.fa-solid {
  font-weight: 900;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toeic .toeic-bridge .g-container > p {
    padding: 0 3vw;
  }
}
.g-body .g-main.toeic .toeic-bridge .g-search {
  margin-top: 30px;
}
.g-body .g-main.toeic .toeic-bridge .g-search .search-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.toeic .toeic-bridge .g-search .search-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
.g-body .g-main.toeic .toeic-bridge .ol-point {
  margin-bottom: 35px;
}
.g-body .g-main.toeic .toeic-bridge .ol-point li {
  color: #333333;
  position: relative;
  padding-left: 20px;
}
.g-body .g-main.toeic .toeic-bridge .ol-point li::before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background-color: #FF9F40;
  left: 0;
  top: 6px;
  position: absolute;
}
.g-body .g-main.toeic .toeic-bridge .ol-point li:not(:last-child) {
  margin-bottom: 15px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toeic .toeic-bridge .ol-point li {
    font-size: 4.8vw;
    padding-left: 7.5vw;
  }
  .g-body .g-main.toeic .toeic-bridge .ol-point li::before {
    width: 4vw;
    height: 4vw;
    border-radius: 4vw;
    top: 1.2vw;
    left: 1.5vw;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toeic .toeic-bridge .ol-point {
    margin-bottom: 10vw;
  }
}
.g-body .g-main.toeic .toeic-bridge .table-article {
  margin: 15px 0 35px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toeic .toeic-bridge .table-article td {
    padding: 3vw 2vw;
  }
}
.g-body .g-main.toeic .toeic-bridge .table-color td {
  padding: 20px 15px;
}
.g-body .g-main.toeic .toeic-bridge .table-color td:nth-child(1) {
  width: 20px;
}
.g-body .g-main.toeic .toeic-bridge .table-date th {
  white-space: normal;
}
.g-body .g-main.toeic .toeic-bridge .table-date tbody td {
  padding: 20px 15px;
  text-align: center;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.toeic .toeic-bridge .table-date tbody td:nth-child(2) {
    padding-top: 5vw;
  }
}
.g-body .g-main.toeic .toeic-bridge .table-date tbody td[rowspan] {
  font-size: 1.125em;
  font-weight: bold;
  color: #7D64AB;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.toeic .toeic-bridge .table-date tbody td[rowspan] {
    font-size: 5vw;
    color: #fff;
    text-align: center;
    background-color: #7D64AB;
    padding: 3vw 0 2.2vw !important;
  }
}
.g-body .g-main.toeic .toeic-bridge .table-date tbody td[colspan] {
  text-align: left;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.toeic .toeic-bridge .table-date tbody td[colspan] {
    background-color: #F6F1FF;
    margin-bottom: 5vw;
    border-bottom: 1px #dedede solid;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.toeic .toeic-bridge .table-date td {
    text-align: left;
  }
  .g-body .g-main.toeic .toeic-bridge .table-date thead {
    display: none;
  }
  .g-body .g-main.toeic .toeic-bridge .table-date tbody {
    border-bottom: 1px #dedede solid;
  }
  .g-body .g-main.toeic .toeic-bridge .table-date tbody tr {
    display: block;
    border: 1px #dedede solid;
    border-bottom: 0;
  }
  .g-body .g-main.toeic .toeic-bridge .table-date tbody td,
  .g-body .g-main.toeic .toeic-bridge .table-date tbody th {
    display: block;
    text-align: left;
    border: 0;
  }
  .g-body .g-main.toeic .toeic-bridge .table-date tbody td {
    padding: 3px 15px 3px;
  }
  .g-body .g-main.toeic .toeic-bridge .table-date {
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.toeic .toeic-bridge .table-date tbody td {
    padding: 1vw 3vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.toeic .toeic-bridge .table-date tbody td:nth-of-type(1) {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.toeic .toeic-bridge .table-date tbody td:nth-of-type(1) {
    padding-top: 5vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.toeic .toeic-bridge .table-date tbody td:nth-last-of-type(1) {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.toeic .toeic-bridge .table-date tbody td:nth-last-of-type(1) {
    padding-bottom: 5vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.toeic .toeic-bridge .table-date thead {
    display: none;
  }
  .g-body .g-main.toeic .toeic-bridge .table-date tbody {
    border-bottom: 0;
  }
  .g-body .g-main.toeic .toeic-bridge .table-date tbody tr:nth-last-of-type(1) td[colspan] {
    margin-bottom: 0;
  }
}
.g-body .g-main.toeic .toeic-bridge > .g-container > p:nth-of-type(1), .g-body .g-main.toeic .toeic-bridge > .g-container > p:nth-of-type(3) {
  margin-bottom: 50px;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.toeic .toeic-bridge > .g-container > p:nth-of-type(1), .g-body .g-main.toeic .toeic-bridge > .g-container > p:nth-of-type(3) {
    margin-bottom: 10vw;
  }
}
.g-body .g-main.toeic .toeic-bridge .table-list:nth-of-type(2) {
  margin-top: 60px;
  margin-bottom: 25px;
}
.g-body .g-main.toeic .toeic-bridge .table-list:nth-of-type(3) {
  margin-top: 0px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.toeic .toeic-bridge .table-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main.toeic .toeic-bridge .table-list {
    gap: 2vw;
  }
}
.g-body .g-main.toeic .toeic-bridge .focus-BG .table-list {
  margin-top: 0;
}
.g-body .g-main.toeic .toeic-bridge .table-article {
  text-align: center;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.toeic .toeic-bridge .table-article.small td,
  .g-body .g-main.toeic .toeic-bridge .table-article.small th {
    font-size: 1rem;
    padding: 10px 5px;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.toeic .toeic-bridge .table-article.small td,
  .g-body .g-main.toeic .toeic-bridge .table-article.small th {
    font-size: 4.2vw;
    padding: 3vw 1vw;
  }
}
.g-body .g-main.toeic .toeic-bridge .table-list table:not(.diff) {
  height: 245px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.toeic .toeic-bridge .table-list table:not(.diff) {
    height: auto;
  }
}
.g-body .g-main.toeic .toeic-bridge .table-color tr:nth-child(1) td:nth-child(1) {
  background-color: #b08055;
}
.g-body .g-main.toeic .toeic-bridge .table-color tr:nth-child(2) td:nth-child(1) {
  background-color: #b8b8b8;
}
.g-body .g-main.toeic .toeic-bridge .table-color tr:nth-child(3) td:nth-child(1) {
  background-color: #D5B14D;
}
.g-body .g-main.toeic .toeic-bridge .table-color td:nth-child(2) {
  font-weight: bold;
  width: 200px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toeic .toeic-bridge .table-color td:nth-child(2) {
    font-size: 5vw;
    width: 30vw;
  }
}
.g-body .g-main.toeic .toeic-bridge .diff {
  height: 590px;
  margin-bottom: 0;
}
.g-body .g-main.toeic .toeic-bridge .diff tbody td:nth-child(1) {
  white-space: nowrap;
  background-color: #F6F1FF;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.toeic .toeic-bridge .diff tbody td:nth-child(1) {
    padding: 3vw !important;
  }
}
.g-body .g-main.toeic .toeic-bridge .diff tbody td:nth-child(2) {
  text-align: left;
}
@media only screen and (max-width: 1680px) {
  .g-body .g-main.toeic .toeic-bridge .diff {
    height: 625px;
  }
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.toeic .toeic-bridge .diff {
    height: 720px;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.toeic .toeic-bridge .diff {
    height: auto;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.toeic .toeic-bridge .diff td {
    text-align: left;
  }
  .g-body .g-main.toeic .toeic-bridge .diff thead {
    display: none;
  }
  .g-body .g-main.toeic .toeic-bridge .diff tbody {
    border-bottom: 1px #dedede solid;
  }
  .g-body .g-main.toeic .toeic-bridge .diff tbody tr {
    display: block;
    border: 1px #dedede solid;
    border-bottom: 0;
  }
  .g-body .g-main.toeic .toeic-bridge .diff tbody td,
  .g-body .g-main.toeic .toeic-bridge .diff tbody th {
    display: block;
    text-align: left;
    border: 0;
  }
  .g-body .g-main.toeic .toeic-bridge .diff tbody td {
    padding: 3px 15px 3px;
  }
  .g-body .g-main.toeic .toeic-bridge .diff {
    border: 1px #dedede solid;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.toeic .toeic-bridge .diff tbody td {
    padding: 1vw 3vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.toeic .toeic-bridge .diff tbody td:nth-of-type(1) {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.toeic .toeic-bridge .diff tbody td:nth-of-type(1) {
    padding-top: 5vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.toeic .toeic-bridge .diff tbody td:nth-last-of-type(1) {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.toeic .toeic-bridge .diff tbody td:nth-last-of-type(1) {
    padding-bottom: 5vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.toeic .toeic-bridge .diff thead {
    display: grid;
    gap: 1px;
  }
  .g-body .g-main.toeic .toeic-bridge .diff thead tr {
    display: grid;
  }
  .g-body .g-main.toeic .toeic-bridge .diff tr,
  .g-body .g-main.toeic .toeic-bridge .diff td,
  .g-body .g-main.toeic .toeic-bridge .diff th {
    border: 0 !important;
  }
}
.g-body .g-main.toeic .toeic-video .box-list a:nth-child(n+5) {
  display: none;
}
.g-body .g-main.toeic .toeic-video .btn-more {
  color: #fff;
  font-size: 1.1rem;
  border-radius: 50px;
  padding: 10px 20px 6px;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  display: flex;
  min-width: 150px;
  border: 0;
}
.g-body .g-main.toeic .toeic-video .btn-more:hover {
  cursor: pointer;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toeic .toeic-video .btn-more {
    width: 55vw;
    min-width: auto;
    font-size: 5vw;
    padding: 10px 0 7px;
  }
}
.g-body .g-main.toeic .toeic-video .btn-more {
  color: #4B2F80;
  width: 155px;
  background-color: #F6F1FF;
  margin: 50px auto 0;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toeic .toeic-video .btn-more {
    margin: 10vw auto 0;
  }
}
.g-body .g-main.toeic .toeic-video .btn-more::before {
  content: "";
  width: 17px;
  height: 17px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  margin-right: 7px;
  position: relative;
  display: table;
  top: -2px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toeic .toeic-video .btn-more::before {
    width: 4.5vw;
    height: 4.5vw;
  }
}
.g-body .g-main.toeic .toeic-video .btn-more::before {
  background-image: url(../images/i-plus.svg);
}
.g-body .g-main.toeic .toeic-video .btn-more:hover {
  color: #fff;
  background-color: #4B2F80;
}
.g-body .g-main.toeic .toeic-video .btn-more:hover::before {
  background-image: url(../images/i-plus-w.svg);
}
.g-body .g-main.toeic .free-test .content-title {
  letter-spacing: 1px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toeic .free-test .content-title {
    width: 90%;
    margin: 0 auto 8vw;
  }
}
.g-body .g-main.toeic .free-test .g-container > p {
  text-align: center;
}
.g-body .g-main.toeic .free-test ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 35px;
  gap: 20px 25px;
}
@media only screen and (max-width: 1100px) {
  .g-body .g-main.toeic .free-test ul {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 1100px) and (max-width: 768px) {
  .g-body .g-main.toeic .free-test ul {
    gap: 15px;
  }
}
@media only screen and (max-width: 1100px) and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.toeic .free-test ul {
    margin-top: 8vw;
    gap: 5px;
  }
}
.g-body .g-main.toeic .free-test ul li {
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 180px auto;
  align-items: center;
  gap: 30px;
  background-color: #fff;
  border: 1px #dedede solid;
  padding: 25px 30px;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.toeic .free-test ul li {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toeic .free-test ul li {
    padding: 8vw 5vw;
    gap: 8vw;
  }
}
.g-body .g-main.toeic .free-test .item-title {
  color: #4B2F80;
  font-size: 2rem;
  line-height: 1.2;
  font-weight: bold;
  margin-bottom: 30px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.toeic .free-test .item-title {
    text-align: center;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.toeic .free-test .item-title {
    font-size: 8vw;
    margin-bottom: 5vw;
  }
}
.g-body .g-main.toeic .free-test .image-container {
  padding-bottom: 100%;
  border-radius: 200px;
  background-color: #F5F5F5;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.toeic .free-test .image-container {
    width: 300px;
    padding-bottom: 300px;
    margin: auto;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.toeic .free-test .image-container {
    width: 50%;
    padding-bottom: 50%;
  }
}
.g-body .g-main.toeic .free-test .image-container img {
  width: 55%;
  height: 55%;
  left: 22.5%;
  top: 22.5%;
}
.g-body .g-main.toeic .learning-map tbody {
  min-width: 1350px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toeic .learning-map tbody {
    min-width: 1100px;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.toeic .nav-page {
    overflow-x: auto;
    justify-content: flex-start;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toeic .students .story-list .box-list a {
    grid-template-columns: 40vw auto;
  }
  .g-body .g-main.toeic .students .story-list .box-list a .h3 {
    font-size: 6vw;
    font-weight: bold;
    margin-bottom: 3vw;
  }
}
.g-body .g-main.ielts .feature .g-container p {
  text-align: left;
}
.g-body .g-main.ielts .feature .g-container p b {
  color: #e14141;
  font-size: 1.375rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .feature .g-container p b {
    font-size: 6vw;
  }
}
.g-body .g-main.ielts .feature .box h3 {
  color: #e14141;
}
.g-body .g-main.ielts .table-article thead th {
  background-color: #e14141;
}
.g-body .g-main.ielts .table-article tbody th {
  font-weight: bold;
  color: #333333;
  background-color: #F5F5F5;
}
.g-body .g-main.ielts .intro .g-container > .box-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .intro .g-container > .box-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.g-body .g-main.ielts .intro .g-container > .box-list .image-container {
  height: 200px;
}
.g-body .g-main.ielts .intro .g-container > .box-list li .info span {
  background-color: #e14141;
}
.g-body .g-main.ielts .intro .g-container > p {
  text-align: left;
}
.g-body .g-main.ielts .intro .h3-title {
  color: #e14141;
  font-size: 1.5rem;
  font-weight: bold;
  margin: 30px 0 5px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .intro .h3-title {
    font-size: 6vw;
    padding: 0 3vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.ielts .intro .table-article td {
    text-align: left;
  }
  .g-body .g-main.ielts .intro .table-article thead {
    display: none;
  }
  .g-body .g-main.ielts .intro .table-article tbody {
    border-bottom: 1px #dedede solid;
  }
  .g-body .g-main.ielts .intro .table-article tbody tr {
    display: block;
    border: 1px #dedede solid;
    border-bottom: 0;
  }
  .g-body .g-main.ielts .intro .table-article tbody td,
  .g-body .g-main.ielts .intro .table-article tbody th {
    display: block;
    text-align: left;
    border: 0;
  }
  .g-body .g-main.ielts .intro .table-article tbody td {
    padding: 3px 15px 3px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.ielts .intro .table-article tbody td {
    padding: 1vw 3vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.ielts .intro .table-article tbody td:nth-of-type(1) {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.ielts .intro .table-article tbody td:nth-of-type(1) {
    padding-top: 5vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.ielts .intro .table-article tbody td:nth-last-of-type(1) {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.ielts .intro .table-article tbody td:nth-last-of-type(1) {
    padding-bottom: 5vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.ielts .intro .table-article td:nth-of-type(1)::before {
    content: "課程特色：";
  }
  .g-body .g-main.ielts .intro .table-article td:nth-of-type(2)::before {
    content: "口說：";
  }
  .g-body .g-main.ielts .intro .table-article td:nth-of-type(3)::before {
    content: "聽力：";
  }
  .g-body .g-main.ielts .intro .table-article td:nth-of-type(4)::before {
    content: "閱讀：";
  }
  .g-body .g-main.ielts .intro .table-article td:nth-of-type(5)::before {
    content: "寫作：";
  }
}
.g-body .g-main.ielts .tool .tool-box {
  display: grid;
  grid-template-columns: 600px 1fr;
  align-items: center;
  gap: 20px 25px;
  background-color: #fff;
  padding: 20px;
}
@media only screen and (max-width: 1180px) {
  .g-body .g-main.ielts .tool .tool-box {
    grid-template-columns: 1fr;
    background-color: transparent;
    padding: 0;
  }
}
.g-body .g-main.ielts .tool .tool-title {
  color: #e14141;
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 30px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .tool .tool-title {
    padding-left: 3vw;
    font-size: 6.2vw;
    margin-bottom: 5vw;
  }
}
.g-body .g-main.ielts .tool .book-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 25px;
}
@media only screen and (max-width: 680px) {
  .g-body .g-main.ielts .tool .book-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
  }
}
@media only screen and (max-width: 680px) and (max-width: 450px) {
  .g-body .g-main.ielts .tool .book-list {
    gap: 5px;
  }
}
.g-body .g-main.ielts .tool .book-list li {
  background-color: #fff;
  position: relative;
}
@media only screen and (max-width: 1180px) {
  .g-body .g-main.ielts .tool .book-list li {
    display: grid;
    grid-template-columns: 40% auto;
    align-items: center;
  }
}
.g-body .g-main.ielts .tool .book-list li .image-container {
  padding-bottom: 129%;
}
.g-body .g-main.ielts .tool .book-list li h3 {
  color: #fff;
  font-weight: bold;
  font-size: 1rem;
}
@media only screen and (max-width: 1180px) {
  .g-body .g-main.ielts .tool .book-list li h3 {
    font-size: 1.375rem;
    color: #333333;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .tool .book-list li h3 {
    font-size: 5.5vw;
  }
}
.g-body .g-main.ielts .tool .book-list li .info {
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: rgba(225, 65, 65, 0.8);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 90px;
}
@media only screen and (max-width: 1180px) {
  .g-body .g-main.ielts .tool .book-list li .info {
    position: static;
    background-color: #fff;
    height: auto;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .tool .book-list li .info {
    padding: 3vw 5vw 5vw 3vw;
  }
}
.g-body .g-main.ielts .tool .book-list li .btn-table {
  background-color: #e14141;
  max-width: 150px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .tool .book-list li .btn-table {
    width: 45vw;
    min-width: auto;
  }
}
.g-body .g-main.ielts .tool .ol-point {
  margin-bottom: 0;
}
.g-body .g-main.ielts .listening-reading h1 span {
  letter-spacing: 4px;
  font-weight: bold;
}
.g-body .g-main.ielts .listening-reading .table-list {
  margin-top: 0;
  margin-bottom: 35px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.ielts .listening-reading .table-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .g-body .g-main.ielts .listening-reading .table-list .table-article {
    margin: 0;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .listening-reading .table-list .table-article thead th:nth-of-type(2) {
    white-space: normal;
  }
}
.g-body .g-main.ielts .listening-reading .sheet {
  max-width: 1400px;
  display: grid;
  margin: 50px auto 0;
  gap: 15px;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .listening-reading .sheet {
    gap: 3vw;
    margin: 5vw auto 0;
  }
}
.g-body .g-main.ielts .listening-reading .sheet .box {
  width: 50%;
  color: #fff;
  text-align: center;
  padding: 10px;
}
.g-body .g-main.ielts .listening-reading .sheet .box span {
  font-size: 1.375rem;
  margin-right: 10px;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .listening-reading .sheet .box {
    font-size: 4.5vw;
    padding: 3vw 1vw;
  }
  .g-body .g-main.ielts .listening-reading .sheet .box span {
    font-size: 6vw;
  }
}
.g-body .g-main.ielts .listening-reading .sheet .box.color-1 {
  background-color: #e14141;
}
.g-body .g-main.ielts .listening-reading .sheet .box.color-2 {
  color: #333333;
  font-weight: bold;
}
.g-body .g-main.ielts .listening-reading .sheet .box.color-3 {
  background-color: #AB91DD;
}
.g-body .g-main.ielts .listening-reading .sheet .box.color-4 {
  background-color: #FF9F40;
}
.g-body .g-main.ielts .listening-reading .sheet > div {
  display: flex;
  justify-content: center;
  gap: 50px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.ielts .listening-reading .sheet > div {
    gap: 20px;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .listening-reading .sheet > div {
    gap: 3vw;
  }
  .g-body .g-main.ielts .listening-reading .sheet > div span {
    display: block;
  }
}
.g-body .g-main.ielts .listening-reading .sheet > div .arrow {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  width: 55px;
  height: 40px;
  background-image: url(../courses/images/ielts-arrow.svg);
  position: relative;
}
.g-body .g-main.ielts .listening-reading .sheet > div .arrow.scale {
  background-image: url(../courses/images/ielts-arrow-2.svg);
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .listening-reading .sheet > div .arrow {
    width: 15vw;
    height: 10vw;
  }
}
.g-body .g-main.ielts .listening-reading .sheet > div:nth-of-type(1) .arrow {
  transform: rotate(90deg);
  bottom: -30px;
}
.g-body .g-main.ielts .listening-reading .sheet > div:nth-of-type(1) .arrow.scale {
  transform: rotate(-90deg);
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .listening-reading .sheet > div:nth-of-type(1) .arrow {
    bottom: -12vw;
  }
}
.g-body .g-main.ielts .listening-reading .sheet > div:nth-of-type(1) .box {
  width: 40%;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .listening-reading .sheet > div:nth-of-type(1) .box {
    width: 50%;
  }
}
.g-body .g-main.ielts .listening-reading .sheet > div:nth-of-type(2) {
  margin-top: 20px;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .listening-reading .sheet > div:nth-of-type(2) {
    margin-top: 0;
  }
  .g-body .g-main.ielts .listening-reading .sheet > div:nth-of-type(2) .box {
    letter-spacing: 0;
    padding-bottom: 0;
  }
}
.g-body .g-main.ielts .listening-reading .sheet > div:nth-of-type(5) .box {
  margin-top: 10px;
  width: 40%;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .listening-reading .sheet > div:nth-of-type(5) .box {
    width: 50%;
  }
}
.g-body .g-main.ielts .listening-reading .sheet > div:nth-of-type(5) .arrow {
  top: 15px;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .listening-reading .sheet > div:nth-of-type(5) .arrow {
    top: 8vw;
  }
}
.g-body .g-main.ielts .listening-reading .area {
  background: linear-gradient(45deg, #d80d2b, #4B2F80);
}
.g-body .g-main.ielts .listening-reading .area *,
.g-body .g-main.ielts .listening-reading .area .ol-point li {
  color: #fff;
}
.g-body .g-main.ielts .listening-reading .area .little-title {
  color: #FFC700;
}
.g-body .g-main.ielts .listening-reading .area .logo-box {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 100px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.ielts .listening-reading .area .logo-box {
    grid-template-columns: 30% 70%;
    gap: 5%;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.ielts .listening-reading .area .logo-box {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.g-body .g-main.ielts .listening-reading .area .image-container {
  background-color: transparent;
  padding-bottom: 84.65%;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.ielts .listening-reading .area .image-container {
    width: 300px;
    padding-bottom: 254px;
    margin: auto;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .listening-reading .area .image-container {
    width: 60%;
    padding-bottom: 45%;
  }
}
.g-body .g-main.ielts .listening-reading .area .ol-point {
  margin-top: 80px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.ielts .listening-reading .area .ol-point {
    margin-top: 0;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .listening-reading .area .ol-point {
    margin-top: 2vw;
  }
  .g-body .g-main.ielts .listening-reading .area .ol-point li {
    font-size: 4.5vw;
    letter-spacing: 0;
  }
  .g-body .g-main.ielts .listening-reading .area .ol-point li:not(:last-child) {
    margin-bottom: 1vw;
  }
}
.g-body .g-main.ielts .listening-reading .area .box-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 25px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.ielts .listening-reading .area .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.ielts .listening-reading .area .box-list {
    gap: 15px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .listening-reading .area .box-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
  }
}
.g-body .g-main.ielts .listening-reading .area .box-list li {
  border-radius: 10px;
  overflow: hidden;
  border: 1px #dedede solid;
  padding: 30px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .listening-reading .area .box-list li {
    padding: 5vw 10vw;
  }
}
.g-body .g-main.ielts .listening-reading .area .box-list h4 {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 10px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .listening-reading .area .box-list h4 {
    font-size: 6.5vw;
  }
}
.g-body .g-main.ielts .listening-reading .area .box-list .g-address .tel::before {
  background: url(../images/i-phone-y.svg) no-repeat top center/auto 85%;
}
.g-body .g-main.ielts .listening-reading .area .box-list .g-address .address::before {
  background: url(../images/i-position-y.svg) no-repeat top center/auto 100%;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .listening-reading .area .box-list .g-address {
    font-size: 4.8vw;
  }
  .g-body .g-main.ielts .listening-reading .area .box-list .g-address .tel::before,
  .g-body .g-main.ielts .listening-reading .area .box-list .g-address .address::before {
    width: 6vw;
    height: 6vw;
  }
}
.g-body .g-main.ielts .exam-content h2 span {
  letter-spacing: 4px;
  font-weight: bold;
}
.g-body .g-main.ielts .exam-content .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .exam-content .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main.ielts .exam-content .g-container {
  font-size: 1.125rem;
}
.g-body .g-main.ielts .exam-content .g-container p {
  font-size: 1.125rem;
  line-height: 1.8;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .exam-content .g-container p {
    font-size: 4.5vw;
  }
}
.g-body .g-main.ielts .exam-content .g-container p a {
  color: #7D64AB;
  text-decoration: underline;
}
.g-body .g-main.ielts .exam-content .g-container p a:hover {
  color: #FF7A00;
}
.g-body .g-main.ielts .exam-content .g-container p:not(:last-of-type) {
  margin-bottom: 10px;
}
.g-body .g-main.ielts .exam-content .g-container p b {
  color: #000;
  font-size: 1.25rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .exam-content .g-container p b {
    font-size: 4.8vw;
  }
}
.g-body .g-main.ielts .exam-content .g-container i.fa-solid {
  font-weight: 900;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .exam-content .g-container > p {
    padding: 0 3vw;
  }
}
.g-body .g-main.ielts .exam-content .g-search {
  margin-top: 30px;
}
.g-body .g-main.ielts .exam-content .g-search .search-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.ielts .exam-content .g-search .search-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
.g-body .g-main.ielts .exam-content .ol-point {
  margin-bottom: 35px;
}
.g-body .g-main.ielts .exam-content .ol-point li {
  color: #333333;
  position: relative;
  padding-left: 20px;
}
.g-body .g-main.ielts .exam-content .ol-point li::before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background-color: #FF9F40;
  left: 0;
  top: 6px;
  position: absolute;
}
.g-body .g-main.ielts .exam-content .ol-point li:not(:last-child) {
  margin-bottom: 15px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .exam-content .ol-point li {
    font-size: 4.8vw;
    padding-left: 7.5vw;
  }
  .g-body .g-main.ielts .exam-content .ol-point li::before {
    width: 4vw;
    height: 4vw;
    border-radius: 4vw;
    top: 1.2vw;
    left: 1.5vw;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .exam-content .ol-point {
    margin-bottom: 10vw;
  }
}
.g-body .g-main.ielts .exam-content .table-article {
  margin: 15px 0 35px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .exam-content .table-article td {
    padding: 3vw 2vw;
  }
}
.g-body .g-main.ielts .exam-content .table-color td {
  padding: 20px 15px;
}
.g-body .g-main.ielts .exam-content .table-color td:nth-child(1) {
  width: 20px;
}
.g-body .g-main.ielts .exam-content .table-date th {
  white-space: normal;
}
.g-body .g-main.ielts .exam-content .table-date tbody td {
  padding: 20px 15px;
  text-align: center;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .exam-content .table-date tbody td:nth-child(2) {
    padding-top: 5vw;
  }
}
.g-body .g-main.ielts .exam-content .table-date tbody td[rowspan] {
  font-size: 1.125em;
  font-weight: bold;
  color: #7D64AB;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .exam-content .table-date tbody td[rowspan] {
    font-size: 5vw;
    color: #fff;
    text-align: center;
    background-color: #7D64AB;
    padding: 3vw 0 2.2vw !important;
  }
}
.g-body .g-main.ielts .exam-content .table-date tbody td[colspan] {
  text-align: left;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .exam-content .table-date tbody td[colspan] {
    background-color: #F6F1FF;
    margin-bottom: 5vw;
    border-bottom: 1px #dedede solid;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .exam-content .table-date td {
    text-align: left;
  }
  .g-body .g-main.ielts .exam-content .table-date thead {
    display: none;
  }
  .g-body .g-main.ielts .exam-content .table-date tbody {
    border-bottom: 1px #dedede solid;
  }
  .g-body .g-main.ielts .exam-content .table-date tbody tr {
    display: block;
    border: 1px #dedede solid;
    border-bottom: 0;
  }
  .g-body .g-main.ielts .exam-content .table-date tbody td,
  .g-body .g-main.ielts .exam-content .table-date tbody th {
    display: block;
    text-align: left;
    border: 0;
  }
  .g-body .g-main.ielts .exam-content .table-date tbody td {
    padding: 3px 15px 3px;
  }
  .g-body .g-main.ielts .exam-content .table-date {
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.ielts .exam-content .table-date tbody td {
    padding: 1vw 3vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .exam-content .table-date tbody td:nth-of-type(1) {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.ielts .exam-content .table-date tbody td:nth-of-type(1) {
    padding-top: 5vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .exam-content .table-date tbody td:nth-last-of-type(1) {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.ielts .exam-content .table-date tbody td:nth-last-of-type(1) {
    padding-bottom: 5vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .exam-content .table-date thead {
    display: none;
  }
  .g-body .g-main.ielts .exam-content .table-date tbody {
    border-bottom: 0;
  }
  .g-body .g-main.ielts .exam-content .table-date tbody tr:nth-last-of-type(1) td[colspan] {
    margin-bottom: 0;
  }
}
.g-body .g-main.ielts .exam-content .box-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 25px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.ielts .exam-content .box-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
  }
}
.g-body .g-main.ielts .exam-content .box-list h3 {
  color: #4B2F80;
  font-size: 1.75rem;
  font-weight: bold;
  margin-bottom: 20px;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.ielts .exam-content .box-list h3 {
    text-align: center;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .exam-content .box-list h3 {
    font-size: 7vw;
    margin-bottom: 5vw;
  }
}
.g-body .g-main.ielts .exam-content .box-list > li {
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  background-color: #fff;
  gap: 30px;
  padding: 30px;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.ielts .exam-content .box-list > li {
    display: block;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .exam-content .box-list > li {
    padding: 5vw 3vw 7vw;
  }
}
.g-body .g-main.ielts .exam-content .box-list .image-container {
  width: 40%;
  background-color: transparent;
  padding-bottom: 30%;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.ielts .exam-content .box-list .image-container {
    margin: auto;
    width: 70%;
    padding-bottom: 54%;
    margin-bottom: 30px;
  }
}
.g-body .g-main.ielts .exam-content .box-list .info {
  width: 60%;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.ielts .exam-content .box-list .info {
    width: 100%;
  }
}
.g-body .g-main.ielts .exam-content .box-list .ol-point {
  margin-bottom: 0;
}
.g-body .g-main.ielts .exam-content .howtoprepare {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 25px;
  margin-top: 50px;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.ielts .exam-content .howtoprepare {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.ielts .exam-content .howtoprepare {
    gap: 15px;
  }
}
.g-body .g-main.ielts .exam-content .howtoprepare li {
  display: flex;
  align-items: center;
  border-radius: 10px;
  overflow: hidden;
  gap: 20px;
  background-color: #fff;
  padding: 30px;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .exam-content .howtoprepare li {
    flex-direction: column;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .exam-content .howtoprepare li {
    gap: 5vw;
    padding: 10vw 1vw 10px 3.5vw;
  }
}
.g-body .g-main.ielts .exam-content .howtoprepare li .info {
  width: calc(100% - 140px - 20px);
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .exam-content .howtoprepare li .info {
    width: 100%;
  }
}
.g-body .g-main.ielts .exam-content .howtoprepare li i {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 4.5rem;
  justify-content: center;
  width: 140px;
  height: 140px;
  background-color: #e14141;
  border-radius: 140px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .exam-content .howtoprepare li i {
    font-size: 22vw;
    width: 40vw;
    height: 40vw;
  }
}
.g-body .g-main.ielts .exam-content .howtoprepare li h3 {
  color: #4B2F80;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 10px;
}
.g-body .g-main.ielts .exam-content .howtoprepare li h3 span {
  color: #333333;
  margin-left: 15px;
  font-weight: bold;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .exam-content .howtoprepare li h3 {
    font-size: 7vw;
    text-align: center;
  }
  .g-body .g-main.ielts .exam-content .howtoprepare li h3 span {
    font-size: 5.5vw;
    text-align: center;
    display: block;
    margin-left: 0;
    line-height: 2;
  }
}
.g-body .g-main.ielts .scoring h2 span {
  letter-spacing: 4px;
  font-weight: bold;
}
.g-body .g-main.ielts .scoring .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .scoring .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main.ielts .scoring .g-container {
  font-size: 1.125rem;
}
.g-body .g-main.ielts .scoring .g-container p {
  font-size: 1.125rem;
  line-height: 1.8;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .scoring .g-container p {
    font-size: 4.5vw;
  }
}
.g-body .g-main.ielts .scoring .g-container p a {
  color: #7D64AB;
  text-decoration: underline;
}
.g-body .g-main.ielts .scoring .g-container p a:hover {
  color: #FF7A00;
}
.g-body .g-main.ielts .scoring .g-container p:not(:last-of-type) {
  margin-bottom: 10px;
}
.g-body .g-main.ielts .scoring .g-container p b {
  color: #000;
  font-size: 1.25rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .scoring .g-container p b {
    font-size: 4.8vw;
  }
}
.g-body .g-main.ielts .scoring .g-container i.fa-solid {
  font-weight: 900;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .scoring .g-container > p {
    padding: 0 3vw;
  }
}
.g-body .g-main.ielts .scoring .g-search {
  margin-top: 30px;
}
.g-body .g-main.ielts .scoring .g-search .search-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.ielts .scoring .g-search .search-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
.g-body .g-main.ielts .scoring .ol-point {
  margin-bottom: 35px;
}
.g-body .g-main.ielts .scoring .ol-point li {
  color: #333333;
  position: relative;
  padding-left: 20px;
}
.g-body .g-main.ielts .scoring .ol-point li::before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background-color: #FF9F40;
  left: 0;
  top: 6px;
  position: absolute;
}
.g-body .g-main.ielts .scoring .ol-point li:not(:last-child) {
  margin-bottom: 15px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .scoring .ol-point li {
    font-size: 4.8vw;
    padding-left: 7.5vw;
  }
  .g-body .g-main.ielts .scoring .ol-point li::before {
    width: 4vw;
    height: 4vw;
    border-radius: 4vw;
    top: 1.2vw;
    left: 1.5vw;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .scoring .ol-point {
    margin-bottom: 10vw;
  }
}
.g-body .g-main.ielts .scoring .table-article {
  margin: 15px 0 35px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .scoring .table-article td {
    padding: 3vw 2vw;
  }
}
.g-body .g-main.ielts .scoring .table-color td {
  padding: 20px 15px;
}
.g-body .g-main.ielts .scoring .table-color td:nth-child(1) {
  width: 20px;
}
.g-body .g-main.ielts .scoring .table-date th {
  white-space: normal;
}
.g-body .g-main.ielts .scoring .table-date tbody td {
  padding: 20px 15px;
  text-align: center;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .scoring .table-date tbody td:nth-child(2) {
    padding-top: 5vw;
  }
}
.g-body .g-main.ielts .scoring .table-date tbody td[rowspan] {
  font-size: 1.125em;
  font-weight: bold;
  color: #7D64AB;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .scoring .table-date tbody td[rowspan] {
    font-size: 5vw;
    color: #fff;
    text-align: center;
    background-color: #7D64AB;
    padding: 3vw 0 2.2vw !important;
  }
}
.g-body .g-main.ielts .scoring .table-date tbody td[colspan] {
  text-align: left;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .scoring .table-date tbody td[colspan] {
    background-color: #F6F1FF;
    margin-bottom: 5vw;
    border-bottom: 1px #dedede solid;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .scoring .table-date td {
    text-align: left;
  }
  .g-body .g-main.ielts .scoring .table-date thead {
    display: none;
  }
  .g-body .g-main.ielts .scoring .table-date tbody {
    border-bottom: 1px #dedede solid;
  }
  .g-body .g-main.ielts .scoring .table-date tbody tr {
    display: block;
    border: 1px #dedede solid;
    border-bottom: 0;
  }
  .g-body .g-main.ielts .scoring .table-date tbody td,
  .g-body .g-main.ielts .scoring .table-date tbody th {
    display: block;
    text-align: left;
    border: 0;
  }
  .g-body .g-main.ielts .scoring .table-date tbody td {
    padding: 3px 15px 3px;
  }
  .g-body .g-main.ielts .scoring .table-date {
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.ielts .scoring .table-date tbody td {
    padding: 1vw 3vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .scoring .table-date tbody td:nth-of-type(1) {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.ielts .scoring .table-date tbody td:nth-of-type(1) {
    padding-top: 5vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .scoring .table-date tbody td:nth-last-of-type(1) {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.ielts .scoring .table-date tbody td:nth-last-of-type(1) {
    padding-bottom: 5vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .scoring .table-date thead {
    display: none;
  }
  .g-body .g-main.ielts .scoring .table-date tbody {
    border-bottom: 0;
  }
  .g-body .g-main.ielts .scoring .table-date tbody tr:nth-last-of-type(1) td[colspan] {
    margin-bottom: 0;
  }
}
.g-body .g-main.ielts .scoring p.focus {
  font-size: 1.25rem;
  margin-bottom: 35px !important;
  font-weight: bold;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .scoring p.focus {
    font-size: 5vw;
    font-weight: normal;
    margin-bottom: 3vw !important;
  }
}
.g-body .g-main.ielts .scoring .g-container > p {
  margin-bottom: 35px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .scoring .g-container > p {
    padding: 0 1vw 0 3vw;
  }
}
.g-body .g-main.ielts .scoring .table-merge {
  display: grid;
  grid-template-columns: 75% 25%;
  margin-bottom: 50px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.ielts .scoring .table-merge {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.g-body .g-main.ielts .scoring .table-merge table td,
.g-body .g-main.ielts .scoring .table-merge table th {
  font-size: 1rem;
  border: 1px #dedede solid;
}
.g-body .g-main.ielts .scoring .table-merge table thead th {
  color: #fff;
}
.g-body .g-main.ielts .scoring .table-merge table.table-1 thead {
  background-color: #e14141;
}
.g-body .g-main.ielts .scoring .table-merge table.table-1 tbody th {
  font-weight: bold;
  color: #e14141;
}
.g-body .g-main.ielts .scoring .table-merge table.table-1 tbody td,
.g-body .g-main.ielts .scoring .table-merge table.table-1 tbody th {
  height: 80px;
}
.g-body .g-main.ielts .scoring .table-merge table.table-1 tbody tr td:nth-of-type(1) {
  text-align: center;
}
.g-body .g-main.ielts .scoring .table-merge table.table-1 tbody tr:nth-child(-n+3) {
  background-color: #FFEDED;
}
.g-body .g-main.ielts .scoring .table-merge table.table-1 tbody td:nth-of-type(3) {
  display: none;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.ielts .scoring .table-merge table.table-1 thead {
    display: none;
  }
  .g-body .g-main.ielts .scoring .table-merge table.table-1 td {
    text-align: left;
  }
  .g-body .g-main.ielts .scoring .table-merge table.table-1 thead {
    display: none;
  }
  .g-body .g-main.ielts .scoring .table-merge table.table-1 tbody {
    border-bottom: 1px #dedede solid;
  }
  .g-body .g-main.ielts .scoring .table-merge table.table-1 tbody tr {
    display: block;
    border: 1px #dedede solid;
    border-bottom: 0;
  }
  .g-body .g-main.ielts .scoring .table-merge table.table-1 tbody td,
  .g-body .g-main.ielts .scoring .table-merge table.table-1 tbody th {
    display: block;
    text-align: left;
    border: 0;
  }
  .g-body .g-main.ielts .scoring .table-merge table.table-1 tbody td {
    padding: 3px 15px 3px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main.ielts .scoring .table-merge table.table-1 tbody td {
    padding: 1vw 3vw;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.ielts .scoring .table-merge table.table-1 tbody td:nth-of-type(1) {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main.ielts .scoring .table-merge table.table-1 tbody td:nth-of-type(1) {
    padding-top: 5vw;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.ielts .scoring .table-merge table.table-1 tbody td:nth-last-of-type(1) {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main.ielts .scoring .table-merge table.table-1 tbody td:nth-last-of-type(1) {
    padding-bottom: 5vw;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.ielts .scoring .table-merge table.table-1 tbody tr {
    padding: 10px;
  }
  .g-body .g-main.ielts .scoring .table-merge table.table-1 tbody th {
    margin-right: 10px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main.ielts .scoring .table-merge table.table-1 tbody th {
    margin-right: 2vw;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.ielts .scoring .table-merge table.table-1 tbody th,
  .g-body .g-main.ielts .scoring .table-merge table.table-1 tbody td {
    padding: 0;
    height: auto;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main.ielts .scoring .table-merge table.table-1 tbody th,
  .g-body .g-main.ielts .scoring .table-merge table.table-1 tbody td {
    font-size: 4.5vw;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.ielts .scoring .table-merge table.table-1 tbody th,
  .g-body .g-main.ielts .scoring .table-merge table.table-1 tbody td:nth-of-type(1) {
    font-size: 1.1rem;
    font-weight: bold;
    color: #e14141;
    display: inline;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main.ielts .scoring .table-merge table.table-1 tbody th,
  .g-body .g-main.ielts .scoring .table-merge table.table-1 tbody td:nth-of-type(1) {
    font-size: 5.5vw;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.ielts .scoring .table-merge table.table-1 tbody td:nth-of-type(3) {
    color: #7D64AB;
    font-weight: bold;
    display: block;
    margin-top: 10px;
    padding-bottom: 0;
  }
}
.g-body .g-main.ielts .scoring .table-merge table.table-2 td,
.g-body .g-main.ielts .scoring .table-merge table.table-2 th {
  border-left: 0;
}
.g-body .g-main.ielts .scoring .table-merge table.table-2 thead th {
  background-color: #7D64AB;
}
.g-body .g-main.ielts .scoring .table-merge table.table-2 tbody td {
  text-align: center;
  background-color: #F6F1FF;
}
.g-body .g-main.ielts .scoring .table-merge table.table-2 tbody tr:nth-child(1) td {
  height: 160px;
}
.g-body .g-main.ielts .scoring .table-merge table.table-2 tbody tr:nth-child(2) td,
.g-body .g-main.ielts .scoring .table-merge table.table-2 tbody tr:nth-child(3) td,
.g-body .g-main.ielts .scoring .table-merge table.table-2 tbody tr:nth-child(4) td,
.g-body .g-main.ielts .scoring .table-merge table.table-2 tbody tr:nth-child(6) td {
  height: 120px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.ielts .scoring .table-merge table.table-2 {
    display: none;
  }
}
.g-body .g-main.ielts .scoring .map {
  background: url(../courses/images/ielts-map.svg) no-repeat center center/100% auto;
  width: 1200px;
  height: 0;
  padding-bottom: 920px;
  margin: auto;
  position: relative;
  margin-top: 50px;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.ielts .scoring .map {
    width: 75vw;
    margin-left: 5vw;
    padding-bottom: 58vw;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.ielts .scoring .map {
    background: url(../courses/images/ielts-map-m.svg) no-repeat top center/100% auto;
    width: 100%;
    height: auto;
    margin-left: 0;
    padding-bottom: 0;
    padding-top: 50vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.ielts .scoring .map {
    margin-top: 5vw;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.ielts .scoring .map .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.ielts .scoring .map .box-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .scoring .map .box-list {
    gap: 5px;
  }
}
.g-body .g-main.ielts .scoring .map .box-list li {
  width: 350px;
  position: absolute;
  line-height: 1.7;
}
.g-body .g-main.ielts .scoring .map .box-list li::before {
  font-size: 1.75rem;
  content: "\f3c5";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: -30px;
  top: -12px;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.ielts .scoring .map .box-list li::before {
    font-size: 2.5vw;
    left: -2.5vw;
    top: -1.1vw;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.ielts .scoring .map .box-list li::before {
    font-size: 1.75rem;
    left: 10px;
    top: 7px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .scoring .map .box-list li::before {
    font-size: 6vw;
    left: 1.5vw;
    top: 3.2vw;
  }
}
.g-body .g-main.ielts .scoring .map .box-list li:nth-child(1) {
  top: 13.5%;
  left: 3.45%;
}
.g-body .g-main.ielts .scoring .map .box-list li:nth-child(1)::before {
  color: #36A2EB;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.ielts .scoring .map .box-list li:nth-child(1) {
    top: 12%;
    left: 3.8%;
  }
}
.g-body .g-main.ielts .scoring .map .box-list li:nth-child(2) {
  top: -2.8%;
  left: 37.15%;
}
.g-body .g-main.ielts .scoring .map .box-list li:nth-child(2)::before {
  color: #C4D40A;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.ielts .scoring .map .box-list li:nth-child(2) {
    top: -4%;
    left: 37.6%;
  }
}
.g-body .g-main.ielts .scoring .map .box-list li:nth-child(3) {
  top: 24.6%;
  left: 44.1%;
}
.g-body .g-main.ielts .scoring .map .box-list li:nth-child(3)::before {
  color: #7D64AB;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.ielts .scoring .map .box-list li:nth-child(3) {
    top: 23%;
    left: 44.5%;
  }
}
.g-body .g-main.ielts .scoring .map .box-list li:nth-child(4) {
  top: 1.5%;
  left: 80.6%;
}
.g-body .g-main.ielts .scoring .map .box-list li:nth-child(4)::before {
  color: #FF6384;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.ielts .scoring .map .box-list li:nth-child(4) {
    top: 0.75%;
    left: 81.05%;
  }
}
.g-body .g-main.ielts .scoring .map .box-list li:nth-child(5) {
  top: 8%;
  left: 83.5%;
}
.g-body .g-main.ielts .scoring .map .box-list li:nth-child(5)::before {
  color: #FF9F40;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.ielts .scoring .map .box-list li:nth-child(5) {
    top: 7%;
    left: 84%;
  }
}
.g-body .g-main.ielts .scoring .map .box-list li:nth-child(6) {
  top: 30.6%;
  left: 86.4%;
}
.g-body .g-main.ielts .scoring .map .box-list li:nth-child(6)::before {
  color: #FFC700;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.ielts .scoring .map .box-list li:nth-child(6) {
    top: 29.2%;
    left: 86.8%;
  }
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.ielts .scoring .map .box-list li {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.ielts .scoring .map .box-list li {
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    border: 1px #dedede solid;
    padding: 20px 10px 20px 40px;
  }
  .g-body .g-main.ielts .scoring .map .box-list li:nth-child(1), .g-body .g-main.ielts .scoring .map .box-list li:nth-child(2), .g-body .g-main.ielts .scoring .map .box-list li:nth-child(3), .g-body .g-main.ielts .scoring .map .box-list li:nth-child(4), .g-body .g-main.ielts .scoring .map .box-list li:nth-child(5), .g-body .g-main.ielts .scoring .map .box-list li:nth-child(6) {
    top: 0;
    left: 0;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .scoring .map .box-list li {
    font-size: 4.5vw;
    padding: 5vw 2vw 5vw 8vw;
  }
}
.g-body .g-main.ielts .scoring .map .box-list h4 {
  font-size: 1.125rem;
  font-weight: bold;
  margin-right: 10px;
  display: inline;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .scoring .map .box-list h4 {
    font-size: 5vw;
    margin-right: 2vw;
  }
}
.g-body .g-main.ielts .exam-tips h2 span {
  letter-spacing: 4px;
  font-weight: bold;
}
.g-body .g-main.ielts .exam-tips .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .exam-tips .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main.ielts .exam-tips .g-container {
  font-size: 1.125rem;
}
.g-body .g-main.ielts .exam-tips .g-container p {
  font-size: 1.125rem;
  line-height: 1.8;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .exam-tips .g-container p {
    font-size: 4.5vw;
  }
}
.g-body .g-main.ielts .exam-tips .g-container p a {
  color: #7D64AB;
  text-decoration: underline;
}
.g-body .g-main.ielts .exam-tips .g-container p a:hover {
  color: #FF7A00;
}
.g-body .g-main.ielts .exam-tips .g-container p:not(:last-of-type) {
  margin-bottom: 10px;
}
.g-body .g-main.ielts .exam-tips .g-container p b {
  color: #000;
  font-size: 1.25rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .exam-tips .g-container p b {
    font-size: 4.8vw;
  }
}
.g-body .g-main.ielts .exam-tips .g-container i.fa-solid {
  font-weight: 900;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .exam-tips .g-container > p {
    padding: 0 3vw;
  }
}
.g-body .g-main.ielts .exam-tips .g-search {
  margin-top: 30px;
}
.g-body .g-main.ielts .exam-tips .g-search .search-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.ielts .exam-tips .g-search .search-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
.g-body .g-main.ielts .exam-tips .ol-point {
  margin-bottom: 35px;
}
.g-body .g-main.ielts .exam-tips .ol-point li {
  color: #333333;
  position: relative;
  padding-left: 20px;
}
.g-body .g-main.ielts .exam-tips .ol-point li::before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background-color: #FF9F40;
  left: 0;
  top: 6px;
  position: absolute;
}
.g-body .g-main.ielts .exam-tips .ol-point li:not(:last-child) {
  margin-bottom: 15px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .exam-tips .ol-point li {
    font-size: 4.8vw;
    padding-left: 7.5vw;
  }
  .g-body .g-main.ielts .exam-tips .ol-point li::before {
    width: 4vw;
    height: 4vw;
    border-radius: 4vw;
    top: 1.2vw;
    left: 1.5vw;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .exam-tips .ol-point {
    margin-bottom: 10vw;
  }
}
.g-body .g-main.ielts .exam-tips .table-article {
  margin: 15px 0 35px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .exam-tips .table-article td {
    padding: 3vw 2vw;
  }
}
.g-body .g-main.ielts .exam-tips .table-color td {
  padding: 20px 15px;
}
.g-body .g-main.ielts .exam-tips .table-color td:nth-child(1) {
  width: 20px;
}
.g-body .g-main.ielts .exam-tips .table-date th {
  white-space: normal;
}
.g-body .g-main.ielts .exam-tips .table-date tbody td {
  padding: 20px 15px;
  text-align: center;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .exam-tips .table-date tbody td:nth-child(2) {
    padding-top: 5vw;
  }
}
.g-body .g-main.ielts .exam-tips .table-date tbody td[rowspan] {
  font-size: 1.125em;
  font-weight: bold;
  color: #7D64AB;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .exam-tips .table-date tbody td[rowspan] {
    font-size: 5vw;
    color: #fff;
    text-align: center;
    background-color: #7D64AB;
    padding: 3vw 0 2.2vw !important;
  }
}
.g-body .g-main.ielts .exam-tips .table-date tbody td[colspan] {
  text-align: left;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .exam-tips .table-date tbody td[colspan] {
    background-color: #F6F1FF;
    margin-bottom: 5vw;
    border-bottom: 1px #dedede solid;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .exam-tips .table-date td {
    text-align: left;
  }
  .g-body .g-main.ielts .exam-tips .table-date thead {
    display: none;
  }
  .g-body .g-main.ielts .exam-tips .table-date tbody {
    border-bottom: 1px #dedede solid;
  }
  .g-body .g-main.ielts .exam-tips .table-date tbody tr {
    display: block;
    border: 1px #dedede solid;
    border-bottom: 0;
  }
  .g-body .g-main.ielts .exam-tips .table-date tbody td,
  .g-body .g-main.ielts .exam-tips .table-date tbody th {
    display: block;
    text-align: left;
    border: 0;
  }
  .g-body .g-main.ielts .exam-tips .table-date tbody td {
    padding: 3px 15px 3px;
  }
  .g-body .g-main.ielts .exam-tips .table-date {
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.ielts .exam-tips .table-date tbody td {
    padding: 1vw 3vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .exam-tips .table-date tbody td:nth-of-type(1) {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.ielts .exam-tips .table-date tbody td:nth-of-type(1) {
    padding-top: 5vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .exam-tips .table-date tbody td:nth-last-of-type(1) {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.ielts .exam-tips .table-date tbody td:nth-last-of-type(1) {
    padding-bottom: 5vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .exam-tips .table-date thead {
    display: none;
  }
  .g-body .g-main.ielts .exam-tips .table-date tbody {
    border-bottom: 0;
  }
  .g-body .g-main.ielts .exam-tips .table-date tbody tr:nth-last-of-type(1) td[colspan] {
    margin-bottom: 0;
  }
}
.g-body .g-main.ielts .exam-tips ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 25px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.ielts .exam-tips ul {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.ielts .exam-tips ul {
    gap: 15px;
  }
}
.g-body .g-main.ielts .exam-tips ul li {
  display: flex;
  align-items: center;
  border-radius: 10px;
  overflow: hidden;
  gap: 20px;
  background-color: #fff;
  padding: 30px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .exam-tips ul li {
    gap: 3vw;
    padding: 5vw 2vw;
  }
}
.g-body .g-main.ielts .exam-tips ul li .info {
  width: calc(100% - 140px - 20px);
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .exam-tips ul li .info {
    width: calc(100% - 20vw);
  }
}
.g-body .g-main.ielts .exam-tips ul li i {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 4.5rem;
  justify-content: center;
  width: 140px;
  height: 140px;
  background-color: #e14141;
  border-radius: 140px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .exam-tips ul li i {
    font-size: 10vw;
    width: 20vw;
    height: 20vw;
  }
}
.g-body .g-main.ielts .exam-tips ul li h3 {
  color: #e14141;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 10px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .exam-tips ul li h3 {
    font-size: 6vw;
    margin-bottom: 1vw;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .exam-tips .g-container p {
    line-height: 1.5;
  }
}
.g-body .g-main.ielts .students .content-title span {
  display: none;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .students .content-title {
    font-size: 6vw;
    letter-spacing: 1px;
  }
}
.g-body .g-main.ielts #listening-reading,
.g-body .g-main.ielts #scoring {
  scroll-margin-top: 105px;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ielts .nav-page {
    overflow-x: auto;
    justify-content: flex-start;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .students .story-list .box-list a {
    grid-template-columns: 40vw auto;
  }
  .g-body .g-main.ielts .students .story-list .box-list a .h3 {
    font-size: 6vw;
    font-weight: bold;
    margin-bottom: 3vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.ielts .intro .table-article td {
    text-align: left;
  }
  .g-body .g-main.ielts .intro .table-article thead {
    display: none;
  }
  .g-body .g-main.ielts .intro .table-article tbody {
    border-bottom: 1px #dedede solid;
  }
  .g-body .g-main.ielts .intro .table-article tbody tr {
    display: block;
    border: 1px #dedede solid;
    border-bottom: 0;
  }
  .g-body .g-main.ielts .intro .table-article tbody td,
  .g-body .g-main.ielts .intro .table-article tbody th {
    display: block;
    text-align: left;
    border: 0;
  }
  .g-body .g-main.ielts .intro .table-article tbody td {
    padding: 3px 15px 3px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.ielts .intro .table-article tbody td {
    padding: 1vw 3vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.ielts .intro .table-article tbody td:nth-of-type(1) {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.ielts .intro .table-article tbody td:nth-of-type(1) {
    padding-top: 5vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.ielts .intro .table-article tbody td:nth-last-of-type(1) {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.ielts .intro .table-article tbody td:nth-last-of-type(1) {
    padding-bottom: 5vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.ielts .intro .table-article td:nth-of-type(1)::before {
    content: "課程特色：";
  }
  .g-body .g-main.ielts .intro .table-article td:nth-of-type(2)::before {
    content: "口說：";
  }
  .g-body .g-main.ielts .intro .table-article td:nth-of-type(3)::before {
    content: "聽力：";
  }
  .g-body .g-main.ielts .intro .table-article td:nth-of-type(4)::before {
    content: "閱讀：";
  }
  .g-body .g-main.ielts .intro .table-article td:nth-of-type(5)::before {
    content: "寫作：";
  }
}
.g-body .g-main.ielts .intro .course-1 .box-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.ielts .intro .course-1 .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ielts .intro .course-1 .box-list .h3 {
    font-size: 4.6vw;
  }
}
.g-body .g-main.ielts .intro .m-title {
  margin-bottom: 0;
}
.g-body .g-main.gept .intro .g-container > .box-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.gept .intro .g-container > .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.gept .intro .g-container > .box-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.g-body .g-main.gept .intro .g-container > .box-list .image-container {
  height: 180px;
}
.g-body .g-main.gept .listening-reading .g-container > p:nth-of-type(n+1),
.g-body .g-main.gept .listening-reading .ol-point:nth-of-type(n+1) {
  margin-bottom: 35px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gept .listening-reading .g-container > p:nth-of-type(n+1),
  .g-body .g-main.gept .listening-reading .ol-point:nth-of-type(n+1) {
    margin-bottom: 10vw;
  }
}
.g-body .g-main.gept .listening-reading .g-container > p a,
.g-body .g-main.gept .listening-reading .ol-point a {
  color: #7D64AB;
}
.g-body .g-main.gept .listening-reading .g-container > p a:hover,
.g-body .g-main.gept .listening-reading .ol-point a:hover {
  color: #FF7A00;
}
.g-body .g-main.gept .listening-reading .g-container > p span,
.g-body .g-main.gept .listening-reading .ol-point span {
  color: #7D64AB;
}
.g-body .g-main.gept .listening-reading .box-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px 25px;
  padding: 20px;
  margin-bottom: 50px;
  background-color: #F6F1FF;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.gept .listening-reading .box-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: transparent;
  }
}
@media only screen and (max-width: 1440px) and (max-width: 768px) {
  .g-body .g-main.gept .listening-reading .box-list {
    gap: 15px;
  }
}
@media only screen and (max-width: 1440px) and (max-width: 450px) {
  .g-body .g-main.gept .listening-reading .box-list {
    gap: 5px;
    margin-bottom: 10vw;
    background-color: #F6F1FF;
  }
}
.g-body .g-main.gept .listening-reading .box-list li {
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  padding: 15px 20px 25px;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.gept .listening-reading .box-list li {
    width: calc((100% - 50px) / 3);
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.gept .listening-reading .box-list li {
    width: calc((100% - 15px) / 2);
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gept .listening-reading .box-list li {
    width: 100%;
    padding: 10vw 3vw;
  }
}
.g-body .g-main.gept .listening-reading .box-list .image-container {
  padding-bottom: 80%;
  margin-bottom: 35px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gept .listening-reading .box-list .image-container {
    width: 80%;
    margin: 0 auto 6vw;
    padding-bottom: 75%;
  }
}
.g-body .g-main.gept .listening-reading .box-list h4 {
  color: #4B2F80;
  font-size: 1.375rem;
  font-weight: bold;
  margin-bottom: 10px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gept .listening-reading .box-list h4 {
    font-size: 7vw;
    letter-spacing: 1vw;
    text-align: center;
    margin-bottom: 3vw;
  }
}
.g-body .g-main.gept .listening-reading .qa {
  margin-bottom: 35px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gept .listening-reading .qa {
    margin-bottom: 10vw;
  }
}
.g-body .g-main.gept .listening-reading h4 {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 10px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gept .listening-reading h4 {
    padding: 0 2vw;
    font-size: 5.5vw;
  }
}
.g-body .g-main.gept .listening-reading .table-article th span {
  color: #fff;
}
.g-body .g-main.gept .listening-reading .table-article span {
  color: #7D64AB;
}
.g-body .g-main.gept .listening-reading .g-container > .table-article td:not(:nth-of-type(2)) {
  text-align: center;
  width: 15%;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.gept .listening-reading .g-container > .table-article th {
    white-space: normal;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gept .listening-reading .g-container > .table-article td,
  .g-body .g-main.gept .listening-reading .g-container > .table-article th {
    padding: 5vw 2vw 5vw 3vw;
  }
  .g-body .g-main.gept .listening-reading .g-container > .table-article td:not(:nth-of-type(2)) {
    width: 1px;
    white-space: nowrap;
  }
}
.g-body .g-main.gept .listening-reading .table-list {
  grid-template-columns: 62% 38%;
  gap: 0;
  margin-top: 0;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.gept .listening-reading .table-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.g-body .g-main.gept .listening-reading .table-list table {
  margin-top: 0;
}
.g-body .g-main.gept .listening-reading .table-list table td {
  width: 20%;
  text-align: center;
  white-space: nowrap;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.gept .listening-reading .table-list table td {
    width: auto;
    white-space: normal;
  }
  .g-body .g-main.gept .listening-reading .table-list table td[colspan] {
    text-align: left;
  }
}
.g-body .g-main.gept .listening-reading .table-list table td div {
  display: inline-block;
  text-align: left;
  margin: auto;
  height: 135px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.gept .listening-reading .table-list table td div {
    height: auto;
  }
}
.g-body .g-main.gept .listening-reading .table-list table:nth-of-type(2) td:nth-of-type(1),
.g-body .g-main.gept .listening-reading .table-list table:nth-of-type(2) th:nth-of-type(1) {
  display: none;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.gept .listening-reading .table-list table:nth-of-type(2) td:nth-of-type(1),
  .g-body .g-main.gept .listening-reading .table-list table:nth-of-type(2) th:nth-of-type(1) {
    display: table-cell;
  }
}
.g-body .g-main.gept .listening-reading .table-list table:nth-of-type(2) td:nth-of-type(2),
.g-body .g-main.gept .listening-reading .table-list table:nth-of-type(2) th:nth-of-type(2) {
  border-left: 0;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gept .listening-reading .table-list table:nth-of-type(2) th {
    padding: 3vw 3vw;
  }
}
.g-body .g-main.gept .listening-reading .btn-normal {
  color: #fff;
  font-size: 1.1rem;
  border-radius: 50px;
  padding: 10px 20px 6px;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  display: flex;
  min-width: 150px;
  border: 0;
}
.g-body .g-main.gept .listening-reading .btn-normal:hover {
  cursor: pointer;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gept .listening-reading .btn-normal {
    width: 55vw;
    min-width: auto;
    font-size: 5vw;
    padding: 10px 0 7px;
  }
}
.g-body .g-main.gept .listening-reading .btn-normal {
  background-color: #4B2F80;
  width: 250px;
  margin: 0 auto 50px;
}
.g-body .g-main.gept .listening-reading .btn-normal:hover {
  background-color: #7D64AB;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gept .listening-reading .btn-normal {
    margin: 0 auto 10vw;
  }
}
.g-body .g-main.gept .prepare h2 span {
  letter-spacing: 4px;
  font-weight: bold;
}
.g-body .g-main.gept .prepare .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gept .prepare .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main.gept .prepare .g-container {
  font-size: 1.125rem;
}
.g-body .g-main.gept .prepare .g-container p {
  font-size: 1.125rem;
  line-height: 1.8;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gept .prepare .g-container p {
    font-size: 4.5vw;
  }
}
.g-body .g-main.gept .prepare .g-container p a {
  color: #7D64AB;
  text-decoration: underline;
}
.g-body .g-main.gept .prepare .g-container p a:hover {
  color: #FF7A00;
}
.g-body .g-main.gept .prepare .g-container p:not(:last-of-type) {
  margin-bottom: 10px;
}
.g-body .g-main.gept .prepare .g-container p b {
  color: #000;
  font-size: 1.25rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gept .prepare .g-container p b {
    font-size: 4.8vw;
  }
}
.g-body .g-main.gept .prepare .g-container i.fa-solid {
  font-weight: 900;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gept .prepare .g-container > p {
    padding: 0 3vw;
  }
}
.g-body .g-main.gept .prepare .g-search {
  margin-top: 30px;
}
.g-body .g-main.gept .prepare .g-search .search-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.gept .prepare .g-search .search-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
.g-body .g-main.gept .prepare .ol-point {
  margin-bottom: 35px;
}
.g-body .g-main.gept .prepare .ol-point li {
  color: #333333;
  position: relative;
  padding-left: 20px;
}
.g-body .g-main.gept .prepare .ol-point li::before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background-color: #FF9F40;
  left: 0;
  top: 6px;
  position: absolute;
}
.g-body .g-main.gept .prepare .ol-point li:not(:last-child) {
  margin-bottom: 15px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gept .prepare .ol-point li {
    font-size: 4.8vw;
    padding-left: 7.5vw;
  }
  .g-body .g-main.gept .prepare .ol-point li::before {
    width: 4vw;
    height: 4vw;
    border-radius: 4vw;
    top: 1.2vw;
    left: 1.5vw;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gept .prepare .ol-point {
    margin-bottom: 10vw;
  }
}
.g-body .g-main.gept .prepare .table-article {
  margin: 15px 0 35px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gept .prepare .table-article td {
    padding: 3vw 2vw;
  }
}
.g-body .g-main.gept .prepare .table-color td {
  padding: 20px 15px;
}
.g-body .g-main.gept .prepare .table-color td:nth-child(1) {
  width: 20px;
}
.g-body .g-main.gept .prepare .table-date th {
  white-space: normal;
}
.g-body .g-main.gept .prepare .table-date tbody td {
  padding: 20px 15px;
  text-align: center;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.gept .prepare .table-date tbody td:nth-child(2) {
    padding-top: 5vw;
  }
}
.g-body .g-main.gept .prepare .table-date tbody td[rowspan] {
  font-size: 1.125em;
  font-weight: bold;
  color: #7D64AB;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.gept .prepare .table-date tbody td[rowspan] {
    font-size: 5vw;
    color: #fff;
    text-align: center;
    background-color: #7D64AB;
    padding: 3vw 0 2.2vw !important;
  }
}
.g-body .g-main.gept .prepare .table-date tbody td[colspan] {
  text-align: left;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.gept .prepare .table-date tbody td[colspan] {
    background-color: #F6F1FF;
    margin-bottom: 5vw;
    border-bottom: 1px #dedede solid;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.gept .prepare .table-date td {
    text-align: left;
  }
  .g-body .g-main.gept .prepare .table-date thead {
    display: none;
  }
  .g-body .g-main.gept .prepare .table-date tbody {
    border-bottom: 1px #dedede solid;
  }
  .g-body .g-main.gept .prepare .table-date tbody tr {
    display: block;
    border: 1px #dedede solid;
    border-bottom: 0;
  }
  .g-body .g-main.gept .prepare .table-date tbody td,
  .g-body .g-main.gept .prepare .table-date tbody th {
    display: block;
    text-align: left;
    border: 0;
  }
  .g-body .g-main.gept .prepare .table-date tbody td {
    padding: 3px 15px 3px;
  }
  .g-body .g-main.gept .prepare .table-date {
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.gept .prepare .table-date tbody td {
    padding: 1vw 3vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.gept .prepare .table-date tbody td:nth-of-type(1) {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.gept .prepare .table-date tbody td:nth-of-type(1) {
    padding-top: 5vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.gept .prepare .table-date tbody td:nth-last-of-type(1) {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.gept .prepare .table-date tbody td:nth-last-of-type(1) {
    padding-bottom: 5vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.gept .prepare .table-date thead {
    display: none;
  }
  .g-body .g-main.gept .prepare .table-date tbody {
    border-bottom: 0;
  }
  .g-body .g-main.gept .prepare .table-date tbody tr:nth-last-of-type(1) td[colspan] {
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 650px) {
  .g-body .g-main.gept .prepare .content-title br {
    display: none;
  }
}
.g-body .g-main.gept .prepare .table-article tbody th {
  color: #333333;
  background-color: #fff;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.gept .prepare .table-article tbody th {
    padding: 15px 15px 3px 15px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gept .prepare .table-article tbody th {
    padding: 5vw 3vw 1vw 3vw;
  }
}
.g-body .g-main.gept .prepare .table-article td {
  text-align: center;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.gept .prepare .table-article td {
    text-align: left;
  }
  .g-body .g-main.gept .prepare .table-article thead {
    display: none;
  }
  .g-body .g-main.gept .prepare .table-article tbody {
    border-bottom: 1px #dedede solid;
  }
  .g-body .g-main.gept .prepare .table-article tbody tr {
    display: block;
    border: 1px #dedede solid;
    border-bottom: 0;
  }
  .g-body .g-main.gept .prepare .table-article tbody td,
  .g-body .g-main.gept .prepare .table-article tbody th {
    display: block;
    text-align: left;
    border: 0;
  }
  .g-body .g-main.gept .prepare .table-article tbody td {
    padding: 3px 15px 3px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main.gept .prepare .table-article tbody td {
    padding: 1vw 3vw;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.gept .prepare .table-article tbody td:nth-of-type(1) {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main.gept .prepare .table-article tbody td:nth-of-type(1) {
    padding-top: 5vw;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.gept .prepare .table-article tbody td:nth-last-of-type(1) {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main.gept .prepare .table-article tbody td:nth-last-of-type(1) {
    padding-bottom: 5vw;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.gept .prepare .table-article tr:not(:nth-of-type(1)) th[rowspan] {
    margin-top: 25px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main.gept .prepare .table-article tr:not(:nth-of-type(1)) th[rowspan] {
    margin-top: 6vw;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.gept .prepare .table-article th[rowspan] {
    color: #fff;
    background-color: #7D64AB;
    text-align: center;
    padding: 10px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main.gept .prepare .table-article th[rowspan] {
    padding: 3vw;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.gept .prepare .table-article td:nth-of-type(1)::before {
    content: "項目：";
  }
  .g-body .g-main.gept .prepare .table-article td:nth-of-type(2)::before {
    content: "測驗日期：";
  }
  .g-body .g-main.gept .prepare .table-article td:nth-of-type(3)::before {
    content: "報名期間：";
  }
  .g-body .g-main.gept .prepare .table-article td:nth-of-type(4)::before {
    content: "考試通知：";
  }
  .g-body .g-main.gept .prepare .table-article td:nth-of-type(5)::before {
    content: "成績公布：";
  }
}
.g-body .g-main.gept .prepare .box-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px 25px;
  margin-top: 30px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.gept .prepare .box-list {
    gap: 15px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gept .prepare .box-list {
    gap: 5px;
  }
}
.g-body .g-main.gept .prepare .box-list li {
  display: flex;
  align-items: center;
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  padding: 25px;
  gap: 30px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.gept .prepare .box-list li {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gept .prepare .box-list li {
    gap: 10vw;
    padding: 5vw 3vw;
  }
}
.g-body .g-main.gept .prepare .box-list .image-container {
  width: 400px;
  padding-bottom: 300px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.gept .prepare .box-list .image-container {
    margin: auto;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gept .prepare .box-list .image-container {
    width: 100%;
    padding-bottom: 75%;
  }
}
.g-body .g-main.gept .prepare .box-list .info {
  width: calc(100% - 400px);
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.gept .prepare .box-list .info {
    width: 100%;
  }
}
.g-body .g-main.gept .prepare .box-list h3 {
  color: #4B2F80;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gept .prepare .box-list h3 {
    font-size: 6vw;
    margin-bottom: 4vw;
  }
}
.g-body .g-main.gept .prepare .box-list span {
  color: #7D64AB;
}
.g-body .g-main.gept #listening-reading,
.g-body .g-main.gept #prepare {
  scroll-margin-top: 105px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.gept .nav-page {
    overflow-x: auto;
    justify-content: flex-start;
  }
}
.g-body .g-main.toefl .feature .g-container > p {
  text-align: left;
}
.g-body .g-main.toefl .core-list .g-container > p {
  text-align: center;
}
.g-body .g-main.toefl .core-list ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 25px;
  margin: 35px 0 0 0;
}
@media only screen and (max-width: 1320px) {
  .g-body .g-main.toefl .core-list ul {
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 1320px) and (max-width: 768px) {
  .g-body .g-main.toefl .core-list ul {
    gap: 15px;
  }
}
@media only screen and (max-width: 1320px) and (max-width: 450px) {
  .g-body .g-main.toefl .core-list ul {
    gap: 5px;
    margin: 6vw 0 0 0;
  }
}
.g-body .g-main.toefl .core-list ul p {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}
.g-body .g-main.toefl .core-list li {
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 125px auto;
  grid-template-rows: 110px auto;
  background-color: #FFF3E7;
  padding: 25px 30px;
  gap: 10px 0;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toefl .core-list li {
    grid-template-columns: 28vw auto;
    grid-template-rows: 25vw auto;
    padding: 5vw 3vw;
    gap: 2vw 0;
  }
}
.g-body .g-main.toefl .core-list li:nth-of-type(1) i {
  font-size: 3.5rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toefl .core-list li:nth-of-type(1) i {
    font-size: 12vw;
  }
}
.g-body .g-main.toefl .core-list li:nth-of-type(2) i {
  font-size: 3.5rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toefl .core-list li:nth-of-type(2) i {
    font-size: 12vw;
  }
}
.g-body .g-main.toefl .core-list li:nth-of-type(3) i {
  font-size: 3rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toefl .core-list li:nth-of-type(3) i {
    font-size: 10vw;
  }
}
.g-body .g-main.toefl .core-list i {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #FFC700;
  height: 100px;
  width: 100px;
  border-radius: 100px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toefl .core-list i {
    height: 22vw;
    width: 22vw;
  }
}
.g-body .g-main.toefl .core-list h3,
.g-body .g-main.toefl .core-list h4 {
  font-size: 1.75rem;
  font-weight: bold;
  margin-top: 10px;
}
@media only screen and (min-width: 651px) and (max-width: 1320px) {
  .g-body .g-main.toefl .core-list h3,
  .g-body .g-main.toefl .core-list h4 {
    margin-top: 30px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toefl .core-list h3,
  .g-body .g-main.toefl .core-list h4 {
    font-size: 6.5vw;
    margin-top: 2vw;
  }
}
@media only screen and (min-width: 651px) and (max-width: 1320px) {
  .g-body .g-main.toefl .core-list h3 br,
  .g-body .g-main.toefl .core-list h4 br {
    display: none;
  }
}
.g-body .g-main.toefl .reason {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 25px;
  margin-top: 30px;
}
@media only screen and (max-width: 1200px) {
  .g-body .g-main.toefl .reason {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 1200px) and (max-width: 768px) {
  .g-body .g-main.toefl .reason {
    gap: 15px;
  }
}
@media only screen and (max-width: 1200px) and (max-width: 650px) {
  .g-body .g-main.toefl .reason {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
  }
}
@media only screen and (max-width: 1200px) and (max-width: 450px) {
  .g-body .g-main.toefl .reason {
    margin-top: 5vw;
  }
}
.g-body .g-main.toefl .reason li {
  border-radius: 10px;
  overflow: hidden;
  background-color: #EEEEEE;
  padding: 25px 30px;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.toefl .reason li {
    display: flex;
    gap: 15px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toefl .reason li {
    padding: 5vw 3vw;
    gap: 3vw;
  }
}
.g-body .g-main.toefl .reason .image-container {
  width: 150px;
  padding-bottom: 150px;
  border-radius: 150px;
  margin: auto;
  background: linear-gradient(125deg, #ffcf31, #ff9872);
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.toefl .reason .image-container {
    width: 25vw;
    padding-bottom: 25vw;
  }
}
.g-body .g-main.toefl .reason .image-container img {
  width: 70%;
  height: 70%;
  top: 15%;
  left: 15%;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.toefl .reason .info {
    width: calc(100% - 30vw);
  }
}
.g-body .g-main.toefl .reason h3,
.g-body .g-main.toefl .reason h4 {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 20px 0 10px;
  text-align: center;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.toefl .reason h3,
  .g-body .g-main.toefl .reason h4 {
    text-align: left;
    margin: 0;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toefl .reason h3,
  .g-body .g-main.toefl .reason h4 {
    font-size: 6vw;
  }
}
.g-body .g-main.toefl .intro .g-container > .box-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.toefl .intro .g-container > .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.toefl .intro .g-container > .box-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.g-body .g-main.toefl .intro .g-container > .box-list .image-container {
  height: 180px;
}
.g-body .g-main.toefl .schedule .g-container > p {
  text-align: center;
}
.g-body .g-main.toefl .schedule ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 25px;
  margin-top: 50px;
}
@media only screen and (max-width: 1150px) {
  .g-body .g-main.toefl .schedule ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 1150px) and (max-width: 768px) {
  .g-body .g-main.toefl .schedule ul {
    gap: 15px;
  }
}
@media only screen and (max-width: 1150px) and (max-width: 600px) {
  .g-body .g-main.toefl .schedule ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    margin-top: 5vw;
  }
}
.g-body .g-main.toefl .schedule ul > li {
  border-radius: 10px;
  overflow: hidden;
  padding: 20px 25px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #fff;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toefl .schedule ul > li {
    padding: 3vw 3vw 10vw 3vw;
  }
}
.g-body .g-main.toefl .schedule ul .progress {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  position: relative;
  margin: auto;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toefl .schedule ul .progress {
    width: 60vw;
    height: 60vw;
  }
}
.g-body .g-main.toefl .schedule ul .progress svg {
  width: 100%;
  height: 100%;
}
.g-body .g-main.toefl .schedule ul .progress .bg {
  fill: none;
  stroke: #eee;
  stroke-width: 12;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toefl .schedule ul .progress .bg {
    stroke-width: 2.5vw;
  }
}
.g-body .g-main.toefl .schedule ul .progress .bar {
  fill: none;
  stroke: #FFC700;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 314;
  stroke-dashoffset: 314;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 1.2s ease;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toefl .schedule ul .progress .bar {
    stroke-width: 3vw;
  }
}
.g-body .g-main.toefl .schedule ul .progress .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  font-weight: bold;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toefl .schedule ul .progress .text {
    font-size: 10vw;
  }
}
.g-body .g-main.toefl .schedule ul h3,
.g-body .g-main.toefl .schedule ul h4 {
  font-size: 1.75rem;
  font-weight: bold;
  text-align: center;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toefl .schedule ul h3,
  .g-body .g-main.toefl .schedule ul h4 {
    font-size: 8vw;
  }
}
.g-body .g-main.toefl .schedule ul .subtitle {
  color: #FF7A00;
  font-weight: bold;
  margin-top: 25px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toefl .schedule ul .subtitle {
    margin-top: 5vw;
    font-size: 4.5vw;
  }
}
.g-body .g-main.toefl .schedule ul ol {
  margin-top: 10px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toefl .schedule ul ol {
    font-size: 4.5vw;
    margin-top: 3vw;
  }
}
.g-body .g-main.toefl .schedule ul ol li {
  position: relative;
  padding-left: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toefl .schedule ul ol li {
    padding-left: 5vw;
  }
}
.g-body .g-main.toefl .schedule ul ol li::before {
  content: "◆";
  color: #FFC700;
  position: absolute;
  left: 0px;
}
.g-body .g-main.toefl .schedule ul ol li:not(:last-child) {
  margin-bottom: 8px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toefl .schedule ul ol li:not(:last-child) {
    margin-bottom: 2vw;
  }
}
.g-body .g-main.toefl .table-toefl {
  margin-bottom: 0 !important;
}
.g-body .g-main.toefl .table-toefl tbody td {
  text-align: center;
}
.g-body .g-main.toefl .table-toefl tbody td:nth-of-type(1) {
  font-size: 1.25rem;
  font-weight: bold;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toefl .table-toefl tbody td:nth-of-type(1) {
    font-size: 5.5vw;
  }
}
.g-body .g-main.toefl .table-toefl tr:nth-child(3) td,
.g-body .g-main.toefl .table-toefl tr:nth-child(6) td {
  background-color: #F6F1FF;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.toefl .table-toefl tr:nth-child(3) td,
  .g-body .g-main.toefl .table-toefl tr:nth-child(6) td {
    text-align: center;
  }
}
.g-body .g-main.toefl .table-toefl ol {
  text-align: left;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.toefl .table-toefl ol {
    margin: 0 0 0 5px;
  }
}
.g-body .g-main.toefl .table-toefl ol li {
  position: relative;
  padding-left: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toefl .table-toefl ol li {
    padding-left: 5vw;
  }
}
.g-body .g-main.toefl .table-toefl ol li::before {
  content: "◆";
  color: #FFC700;
  position: absolute;
  left: 0px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.toefl .table-toefl td {
    text-align: left;
  }
  .g-body .g-main.toefl .table-toefl thead {
    display: none;
  }
  .g-body .g-main.toefl .table-toefl tbody {
    border-bottom: 1px #dedede solid;
  }
  .g-body .g-main.toefl .table-toefl tbody tr {
    display: block;
    border: 1px #dedede solid;
    border-bottom: 0;
  }
  .g-body .g-main.toefl .table-toefl tbody td,
  .g-body .g-main.toefl .table-toefl tbody th {
    display: block;
    text-align: left;
    border: 0;
  }
  .g-body .g-main.toefl .table-toefl tbody td {
    padding: 3px 15px 3px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.toefl .table-toefl tbody td {
    padding: 1vw 3vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.toefl .table-toefl tbody td:nth-of-type(1) {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.toefl .table-toefl tbody td:nth-of-type(1) {
    padding-top: 5vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.toefl .table-toefl tbody td:nth-last-of-type(1) {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.toefl .table-toefl tbody td:nth-last-of-type(1) {
    padding-bottom: 5vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.toefl .table-toefl td:nth-child(2)::before {
    content: "托福(2026年版)：\a";
    white-space: pre-line;
  }
  .g-body .g-main.toefl .table-toefl td:nth-child(3)::before {
    content: "題數：";
  }
  .g-body .g-main.toefl .table-toefl td:nth-child(4)::before {
    content: "時間：";
  }
}
.g-body .g-main.toefl .listening-reading .ol-point {
  margin-bottom: 0;
}
.g-body .g-main.toefl .listening-reading .ol-point li {
  color: #333333;
  position: relative;
  padding-left: 20px;
}
.g-body .g-main.toefl .listening-reading .ol-point li::before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background-color: #FF9F40;
  left: 0;
  top: 6px;
  position: absolute;
}
.g-body .g-main.toefl .listening-reading .ol-point li:not(:last-child) {
  margin-bottom: 15px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toefl .listening-reading .ol-point li {
    font-size: 4.8vw;
    padding-left: 7.5vw;
  }
  .g-body .g-main.toefl .listening-reading .ol-point li::before {
    width: 4vw;
    height: 4vw;
    border-radius: 4vw;
    top: 1.2vw;
    left: 1.5vw;
  }
}
.g-body .g-main.toefl .listening-reading.first .little-title:nth-of-type(2) {
  margin-top: 35px;
}
.g-body .g-main.toefl .Compare {
  background: url(../courses/images/toefl-bg.webp) center center/cover no-repeat fixed;
}
.g-body .g-main.toefl .Compare .vs td {
  text-align: center;
}
@media only screen and (max-width: 800px) {
  .g-body .g-main.toefl .Compare .vs td {
    text-align: left;
  }
  .g-body .g-main.toefl .Compare .vs thead {
    display: none;
  }
  .g-body .g-main.toefl .Compare .vs tbody {
    border-bottom: 1px #dedede solid;
  }
  .g-body .g-main.toefl .Compare .vs tbody tr {
    display: block;
    border: 1px #dedede solid;
    border-bottom: 0;
  }
  .g-body .g-main.toefl .Compare .vs tbody td,
  .g-body .g-main.toefl .Compare .vs tbody th {
    display: block;
    text-align: left;
    border: 0;
  }
  .g-body .g-main.toefl .Compare .vs tbody td {
    padding: 3px 15px 3px;
  }
}
@media only screen and (max-width: 800px) and (max-width: 450px) {
  .g-body .g-main.toefl .Compare .vs tbody td {
    padding: 1vw 3vw;
  }
}
@media only screen and (max-width: 800px) {
  .g-body .g-main.toefl .Compare .vs tbody td:nth-of-type(1) {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 800px) and (max-width: 450px) {
  .g-body .g-main.toefl .Compare .vs tbody td:nth-of-type(1) {
    padding-top: 5vw;
  }
}
@media only screen and (max-width: 800px) {
  .g-body .g-main.toefl .Compare .vs tbody td:nth-last-of-type(1) {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 800px) and (max-width: 450px) {
  .g-body .g-main.toefl .Compare .vs tbody td:nth-last-of-type(1) {
    padding-bottom: 5vw;
  }
}
@media only screen and (max-width: 800px) {
  .g-body .g-main.toefl .Compare .vs td:nth-of-type(1) {
    font-weight: bold;
    font-size: 5vw;
  }
  .g-body .g-main.toefl .Compare .vs td:nth-of-type(1)::before {
    content: "托福新制分數：";
  }
  .g-body .g-main.toefl .Compare .vs td:nth-of-type(2)::before {
    content: "舊制分數：";
  }
  .g-body .g-main.toefl .Compare .vs td:nth-of-type(3)::before {
    content: "CEFR對應等級：";
  }
  .g-body .g-main.toefl .Compare .vs td:nth-of-type(4)::before {
    content: "能力描述：";
  }
}
.g-body .g-main.toefl .Compare .iBT {
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .g-body .g-main.toefl .Compare .iBT th br {
    display: none;
  }
}
.g-body .g-main.toefl .Compare .iBT td {
  text-align: center !important;
}
.g-body .g-main.toefl .Compare .iBT div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.g-body .g-main.toefl .Compare .iBT div span {
  font-size: 1.2rem;
  font-weight: bold;
  width: 90px;
  text-align: left;
}
.g-body .g-main.toefl .Compare .iBT i {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #fff;
  width: 90px;
  height: 90px;
  border-radius: 90px;
  background: linear-gradient(125deg, #ffae0b, #ff745c);
  position: relative;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toefl .Compare .iBT i {
    font-size: 10vw;
    width: 20vw;
    height: 20vw;
  }
}
.g-body .g-main.toefl .Compare .iBT i::after {
  content: "";
  display: block;
  width: 75px;
  height: 75px;
  border-radius: 75px;
  border: 2px solid #fff;
  position: absolute;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.toefl .Compare .iBT i::after {
    width: 0;
    height: 0;
    border: 0;
  }
}
@media only screen and (max-width: 850px) {
  .g-body .g-main.toefl .Compare .iBT td {
    text-align: left;
  }
  .g-body .g-main.toefl .Compare .iBT thead {
    display: none;
  }
  .g-body .g-main.toefl .Compare .iBT tbody {
    border-bottom: 1px #dedede solid;
  }
  .g-body .g-main.toefl .Compare .iBT tbody tr {
    display: block;
    border: 1px #dedede solid;
    border-bottom: 0;
  }
  .g-body .g-main.toefl .Compare .iBT tbody td,
  .g-body .g-main.toefl .Compare .iBT tbody th {
    display: block;
    text-align: left;
    border: 0;
  }
  .g-body .g-main.toefl .Compare .iBT tbody td {
    padding: 3px 15px 3px;
  }
}
@media only screen and (max-width: 850px) and (max-width: 450px) {
  .g-body .g-main.toefl .Compare .iBT tbody td {
    padding: 1vw 3vw;
  }
}
@media only screen and (max-width: 850px) {
  .g-body .g-main.toefl .Compare .iBT tbody td:nth-of-type(1) {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 850px) and (max-width: 450px) {
  .g-body .g-main.toefl .Compare .iBT tbody td:nth-of-type(1) {
    padding-top: 5vw;
  }
}
@media only screen and (max-width: 850px) {
  .g-body .g-main.toefl .Compare .iBT tbody td:nth-last-of-type(1) {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 850px) and (max-width: 450px) {
  .g-body .g-main.toefl .Compare .iBT tbody td:nth-last-of-type(1) {
    padding-bottom: 5vw;
  }
}
@media only screen and (max-width: 850px) {
  .g-body .g-main.toefl .Compare .iBT div {
    flex-direction: column;
  }
}
@media only screen and (max-width: 850px) and (max-width: 450px) {
  .g-body .g-main.toefl .Compare .iBT div {
    gap: 2vw;
  }
}
@media only screen and (max-width: 850px) {
  .g-body .g-main.toefl .Compare .iBT div span {
    text-align: center;
  }
}
@media only screen and (max-width: 850px) and (max-width: 450px) {
  .g-body .g-main.toefl .Compare .iBT div span {
    color: #4B2F80;
    font-size: 5vw;
  }
}
@media only screen and (max-width: 850px) {
  .g-body .g-main.toefl .Compare .iBT td {
    padding-bottom: 10px !important;
  }
}
@media only screen and (max-width: 850px) and (max-width: 450px) {
  .g-body .g-main.toefl .Compare .iBT td {
    padding-bottom: 3vw !important;
  }
}
@media only screen and (max-width: 850px) {
  .g-body .g-main.toefl .Compare .iBT td::before {
    font-weight: bold;
    display: block;
    background-color: #EEEEEE;
    padding: 5px 0;
    margin-bottom: 10px;
  }
}
@media only screen and (max-width: 850px) and (max-width: 450px) {
  .g-body .g-main.toefl .Compare .iBT td::before {
    padding: 1.5vw 0;
    margin-bottom: 3vw;
  }
}
@media only screen and (max-width: 850px) {
  .g-body .g-main.toefl .Compare .iBT td:nth-of-type(2)::before {
    content: "舊制托福：";
  }
  .g-body .g-main.toefl .Compare .iBT td:nth-of-type(3)::before {
    content: "新制托福（2026/1/21起）：";
  }
}
.g-body .g-main.phonics .intro .intro-box, .g-body .g-main.travel-english .intro .intro-box, .g-body .g-main.english-word .intro .intro-box, .g-body .g-main.english-reading .intro .intro-box, .g-body .g-main.news-english .intro .intro-box, .g-body .g-main.cnn .intro .intro-box {
  display: grid;
  grid-template-columns: 30% auto;
  gap: 20px 25px;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.phonics .intro .intro-box, .g-body .g-main.travel-english .intro .intro-box, .g-body .g-main.english-word .intro .intro-box, .g-body .g-main.english-reading .intro .intro-box, .g-body .g-main.news-english .intro .intro-box, .g-body .g-main.cnn .intro .intro-box {
    grid-template-columns: 40% auto;
  }
}
@media only screen and (max-width: 1440px) and (max-width: 1024px) {
  .g-body .g-main.phonics .intro .intro-box, .g-body .g-main.travel-english .intro .intro-box, .g-body .g-main.english-word .intro .intro-box, .g-body .g-main.english-reading .intro .intro-box, .g-body .g-main.news-english .intro .intro-box, .g-body .g-main.cnn .intro .intro-box {
    grid-template-columns: 1fr;
  }
}
.g-body .g-main.phonics .intro .intro-box > .box-list, .g-body .g-main.travel-english .intro .intro-box > .box-list, .g-body .g-main.english-word .intro .intro-box > .box-list, .g-body .g-main.english-reading .intro .intro-box > .box-list, .g-body .g-main.news-english .intro .intro-box > .box-list, .g-body .g-main.cnn .intro .intro-box > .box-list {
  grid-template-columns: 1fr;
  margin-top: 0;
}
.g-body .g-main.phonics .intro .intro-box > .box-list .image-container, .g-body .g-main.travel-english .intro .intro-box > .box-list .image-container, .g-body .g-main.english-word .intro .intro-box > .box-list .image-container, .g-body .g-main.english-reading .intro .intro-box > .box-list .image-container, .g-body .g-main.news-english .intro .intro-box > .box-list .image-container, .g-body .g-main.cnn .intro .intro-box > .box-list .image-container {
  height: 100% !important;
}
@media only screen and (min-width: 1025px) {
  .g-body .g-main.phonics .intro .intro-box > .box-list .image-container, .g-body .g-main.travel-english .intro .intro-box > .box-list .image-container, .g-body .g-main.english-word .intro .intro-box > .box-list .image-container, .g-body .g-main.english-reading .intro .intro-box > .box-list .image-container, .g-body .g-main.news-english .intro .intro-box > .box-list .image-container, .g-body .g-main.cnn .intro .intro-box > .box-list .image-container {
    min-height: 250px;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.phonics .intro .intro-box > .box-list .image-container, .g-body .g-main.travel-english .intro .intro-box > .box-list .image-container, .g-body .g-main.english-word .intro .intro-box > .box-list .image-container, .g-body .g-main.english-reading .intro .intro-box > .box-list .image-container, .g-body .g-main.news-english .intro .intro-box > .box-list .image-container, .g-body .g-main.cnn .intro .intro-box > .box-list .image-container {
    height: 200px !important;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.phonics .intro .intro-box > .box-list .image-container, .g-body .g-main.travel-english .intro .intro-box > .box-list .image-container, .g-body .g-main.english-word .intro .intro-box > .box-list .image-container, .g-body .g-main.english-reading .intro .intro-box > .box-list .image-container, .g-body .g-main.news-english .intro .intro-box > .box-list .image-container, .g-body .g-main.cnn .intro .intro-box > .box-list .image-container {
    height: 40vw !important;
  }
}
.g-body .g-main.phonics .intro .intro-info ul, .g-body .g-main.travel-english .intro .intro-info ul, .g-body .g-main.english-word .intro .intro-info ul, .g-body .g-main.english-reading .intro .intro-info ul, .g-body .g-main.news-english .intro .intro-info ul, .g-body .g-main.cnn .intro .intro-info ul {
  gap: 20px 25px;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.phonics .intro .intro-info ul, .g-body .g-main.travel-english .intro .intro-info ul, .g-body .g-main.english-word .intro .intro-info ul, .g-body .g-main.english-reading .intro .intro-info ul, .g-body .g-main.news-english .intro .intro-info ul, .g-body .g-main.cnn .intro .intro-info ul {
    gap: 15px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.phonics .intro .intro-info ul, .g-body .g-main.travel-english .intro .intro-info ul, .g-body .g-main.english-word .intro .intro-info ul, .g-body .g-main.english-reading .intro .intro-info ul, .g-body .g-main.news-english .intro .intro-info ul, .g-body .g-main.cnn .intro .intro-info ul {
    gap: 5px;
  }
}
.g-body .g-main.phonics .intro .intro-info ul li, .g-body .g-main.travel-english .intro .intro-info ul li, .g-body .g-main.english-word .intro .intro-info ul li, .g-body .g-main.english-reading .intro .intro-info ul li, .g-body .g-main.news-english .intro .intro-info ul li, .g-body .g-main.cnn .intro .intro-info ul li {
  border-radius: 10px;
  overflow: hidden;
  background: #EEEEEE;
  text-align: center;
  padding: 30px 15px 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.phonics .intro .intro-info ul li, .g-body .g-main.travel-english .intro .intro-info ul li, .g-body .g-main.english-word .intro .intro-info ul li, .g-body .g-main.english-reading .intro .intro-info ul li, .g-body .g-main.news-english .intro .intro-info ul li, .g-body .g-main.cnn .intro .intro-info ul li {
    padding: 5vw 0 3vw;
  }
}
.g-body .g-main.phonics .intro .intro-info ul li.active, .g-body .g-main.phonics .intro .intro-info ul li:hover, .g-body .g-main.travel-english .intro .intro-info ul li.active, .g-body .g-main.travel-english .intro .intro-info ul li:hover, .g-body .g-main.english-word .intro .intro-info ul li.active, .g-body .g-main.english-word .intro .intro-info ul li:hover, .g-body .g-main.english-reading .intro .intro-info ul li.active, .g-body .g-main.english-reading .intro .intro-info ul li:hover, .g-body .g-main.news-english .intro .intro-info ul li.active, .g-body .g-main.news-english .intro .intro-info ul li:hover, .g-body .g-main.cnn .intro .intro-info ul li.active, .g-body .g-main.cnn .intro .intro-info ul li:hover {
  background: #4B2F80;
  cursor: pointer;
}
.g-body .g-main.phonics .intro .intro-info ul li.active h3,
.g-body .g-main.phonics .intro .intro-info ul li.active .h3,
.g-body .g-main.phonics .intro .intro-info ul li.active i, .g-body .g-main.phonics .intro .intro-info ul li:hover h3,
.g-body .g-main.phonics .intro .intro-info ul li:hover .h3,
.g-body .g-main.phonics .intro .intro-info ul li:hover i, .g-body .g-main.travel-english .intro .intro-info ul li.active h3,
.g-body .g-main.travel-english .intro .intro-info ul li.active .h3,
.g-body .g-main.travel-english .intro .intro-info ul li.active i, .g-body .g-main.travel-english .intro .intro-info ul li:hover h3,
.g-body .g-main.travel-english .intro .intro-info ul li:hover .h3,
.g-body .g-main.travel-english .intro .intro-info ul li:hover i, .g-body .g-main.english-word .intro .intro-info ul li.active h3,
.g-body .g-main.english-word .intro .intro-info ul li.active .h3,
.g-body .g-main.english-word .intro .intro-info ul li.active i, .g-body .g-main.english-word .intro .intro-info ul li:hover h3,
.g-body .g-main.english-word .intro .intro-info ul li:hover .h3,
.g-body .g-main.english-word .intro .intro-info ul li:hover i, .g-body .g-main.english-reading .intro .intro-info ul li.active h3,
.g-body .g-main.english-reading .intro .intro-info ul li.active .h3,
.g-body .g-main.english-reading .intro .intro-info ul li.active i, .g-body .g-main.english-reading .intro .intro-info ul li:hover h3,
.g-body .g-main.english-reading .intro .intro-info ul li:hover .h3,
.g-body .g-main.english-reading .intro .intro-info ul li:hover i, .g-body .g-main.news-english .intro .intro-info ul li.active h3,
.g-body .g-main.news-english .intro .intro-info ul li.active .h3,
.g-body .g-main.news-english .intro .intro-info ul li.active i, .g-body .g-main.news-english .intro .intro-info ul li:hover h3,
.g-body .g-main.news-english .intro .intro-info ul li:hover .h3,
.g-body .g-main.news-english .intro .intro-info ul li:hover i, .g-body .g-main.cnn .intro .intro-info ul li.active h3,
.g-body .g-main.cnn .intro .intro-info ul li.active .h3,
.g-body .g-main.cnn .intro .intro-info ul li.active i, .g-body .g-main.cnn .intro .intro-info ul li:hover h3,
.g-body .g-main.cnn .intro .intro-info ul li:hover .h3,
.g-body .g-main.cnn .intro .intro-info ul li:hover i {
  color: #fff;
}
.g-body .g-main.phonics .intro .intro-info ul li.active h3 span,
.g-body .g-main.phonics .intro .intro-info ul li.active .h3 span, .g-body .g-main.phonics .intro .intro-info ul li:hover h3 span,
.g-body .g-main.phonics .intro .intro-info ul li:hover .h3 span, .g-body .g-main.travel-english .intro .intro-info ul li.active h3 span,
.g-body .g-main.travel-english .intro .intro-info ul li.active .h3 span, .g-body .g-main.travel-english .intro .intro-info ul li:hover h3 span,
.g-body .g-main.travel-english .intro .intro-info ul li:hover .h3 span, .g-body .g-main.english-word .intro .intro-info ul li.active h3 span,
.g-body .g-main.english-word .intro .intro-info ul li.active .h3 span, .g-body .g-main.english-word .intro .intro-info ul li:hover h3 span,
.g-body .g-main.english-word .intro .intro-info ul li:hover .h3 span, .g-body .g-main.english-reading .intro .intro-info ul li.active h3 span,
.g-body .g-main.english-reading .intro .intro-info ul li.active .h3 span, .g-body .g-main.english-reading .intro .intro-info ul li:hover h3 span,
.g-body .g-main.english-reading .intro .intro-info ul li:hover .h3 span, .g-body .g-main.news-english .intro .intro-info ul li.active h3 span,
.g-body .g-main.news-english .intro .intro-info ul li.active .h3 span, .g-body .g-main.news-english .intro .intro-info ul li:hover h3 span,
.g-body .g-main.news-english .intro .intro-info ul li:hover .h3 span, .g-body .g-main.cnn .intro .intro-info ul li.active h3 span,
.g-body .g-main.cnn .intro .intro-info ul li.active .h3 span, .g-body .g-main.cnn .intro .intro-info ul li:hover h3 span,
.g-body .g-main.cnn .intro .intro-info ul li:hover .h3 span {
  color: #FFC700;
}
.g-body .g-main.phonics .intro .intro-info ul li.active p, .g-body .g-main.travel-english .intro .intro-info ul li.active p, .g-body .g-main.english-word .intro .intro-info ul li.active p, .g-body .g-main.english-reading .intro .intro-info ul li.active p, .g-body .g-main.news-english .intro .intro-info ul li.active p, .g-body .g-main.cnn .intro .intro-info ul li.active p {
  display: block;
}
.g-body .g-main.phonics .intro .intro-info ul i, .g-body .g-main.travel-english .intro .intro-info ul i, .g-body .g-main.english-word .intro .intro-info ul i, .g-body .g-main.english-reading .intro .intro-info ul i, .g-body .g-main.news-english .intro .intro-info ul i, .g-body .g-main.cnn .intro .intro-info ul i {
  font-size: 2rem;
  color: #4B2F80;
  margin-bottom: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.phonics .intro .intro-info ul i, .g-body .g-main.travel-english .intro .intro-info ul i, .g-body .g-main.english-word .intro .intro-info ul i, .g-body .g-main.english-reading .intro .intro-info ul i, .g-body .g-main.news-english .intro .intro-info ul i, .g-body .g-main.cnn .intro .intro-info ul i {
    font-size: 8vw;
    margin-bottom: 3.5vw;
  }
}
.g-body .g-main.phonics .intro .intro-info ul h3,
.g-body .g-main.phonics .intro .intro-info ul .h3, .g-body .g-main.travel-english .intro .intro-info ul h3,
.g-body .g-main.travel-english .intro .intro-info ul .h3, .g-body .g-main.english-word .intro .intro-info ul h3,
.g-body .g-main.english-word .intro .intro-info ul .h3, .g-body .g-main.english-reading .intro .intro-info ul h3,
.g-body .g-main.english-reading .intro .intro-info ul .h3, .g-body .g-main.news-english .intro .intro-info ul h3,
.g-body .g-main.news-english .intro .intro-info ul .h3, .g-body .g-main.cnn .intro .intro-info ul h3,
.g-body .g-main.cnn .intro .intro-info ul .h3 {
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: 0;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.phonics .intro .intro-info ul h3,
  .g-body .g-main.phonics .intro .intro-info ul .h3, .g-body .g-main.travel-english .intro .intro-info ul h3,
  .g-body .g-main.travel-english .intro .intro-info ul .h3, .g-body .g-main.english-word .intro .intro-info ul h3,
  .g-body .g-main.english-word .intro .intro-info ul .h3, .g-body .g-main.english-reading .intro .intro-info ul h3,
  .g-body .g-main.english-reading .intro .intro-info ul .h3, .g-body .g-main.news-english .intro .intro-info ul h3,
  .g-body .g-main.news-english .intro .intro-info ul .h3, .g-body .g-main.cnn .intro .intro-info ul h3,
  .g-body .g-main.cnn .intro .intro-info ul .h3 {
    font-size: 4.2vw;
  }
}
.g-body .g-main.phonics .intro .intro-info ul h3 span,
.g-body .g-main.phonics .intro .intro-info ul .h3 span, .g-body .g-main.travel-english .intro .intro-info ul h3 span,
.g-body .g-main.travel-english .intro .intro-info ul .h3 span, .g-body .g-main.english-word .intro .intro-info ul h3 span,
.g-body .g-main.english-word .intro .intro-info ul .h3 span, .g-body .g-main.english-reading .intro .intro-info ul h3 span,
.g-body .g-main.english-reading .intro .intro-info ul .h3 span, .g-body .g-main.news-english .intro .intro-info ul h3 span,
.g-body .g-main.news-english .intro .intro-info ul .h3 span, .g-body .g-main.cnn .intro .intro-info ul h3 span,
.g-body .g-main.cnn .intro .intro-info ul .h3 span {
  color: #4B2F80;
  font-size: 1.5rem;
  font-weight: bold;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.phonics .intro .intro-info ul h3 span,
  .g-body .g-main.phonics .intro .intro-info ul .h3 span, .g-body .g-main.travel-english .intro .intro-info ul h3 span,
  .g-body .g-main.travel-english .intro .intro-info ul .h3 span, .g-body .g-main.english-word .intro .intro-info ul h3 span,
  .g-body .g-main.english-word .intro .intro-info ul .h3 span, .g-body .g-main.english-reading .intro .intro-info ul h3 span,
  .g-body .g-main.english-reading .intro .intro-info ul .h3 span, .g-body .g-main.news-english .intro .intro-info ul h3 span,
  .g-body .g-main.news-english .intro .intro-info ul .h3 span, .g-body .g-main.cnn .intro .intro-info ul h3 span,
  .g-body .g-main.cnn .intro .intro-info ul .h3 span {
    font-size: 4.5vw;
  }
}
.g-body .g-main.phonics .intro .intro-info ul h3 div,
.g-body .g-main.phonics .intro .intro-info ul .h3 div, .g-body .g-main.travel-english .intro .intro-info ul h3 div,
.g-body .g-main.travel-english .intro .intro-info ul .h3 div, .g-body .g-main.english-word .intro .intro-info ul h3 div,
.g-body .g-main.english-word .intro .intro-info ul .h3 div, .g-body .g-main.english-reading .intro .intro-info ul h3 div,
.g-body .g-main.english-reading .intro .intro-info ul .h3 div, .g-body .g-main.news-english .intro .intro-info ul h3 div,
.g-body .g-main.news-english .intro .intro-info ul .h3 div, .g-body .g-main.cnn .intro .intro-info ul h3 div,
.g-body .g-main.cnn .intro .intro-info ul .h3 div {
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1.4;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.phonics .intro .intro-info ul h3 div,
  .g-body .g-main.phonics .intro .intro-info ul .h3 div, .g-body .g-main.travel-english .intro .intro-info ul h3 div,
  .g-body .g-main.travel-english .intro .intro-info ul .h3 div, .g-body .g-main.english-word .intro .intro-info ul h3 div,
  .g-body .g-main.english-word .intro .intro-info ul .h3 div, .g-body .g-main.english-reading .intro .intro-info ul h3 div,
  .g-body .g-main.english-reading .intro .intro-info ul .h3 div, .g-body .g-main.news-english .intro .intro-info ul h3 div,
  .g-body .g-main.news-english .intro .intro-info ul .h3 div, .g-body .g-main.cnn .intro .intro-info ul h3 div,
  .g-body .g-main.cnn .intro .intro-info ul .h3 div {
    font-size: 5vw;
  }
}
.g-body .g-main.phonics .intro .intro-info ul p, .g-body .g-main.travel-english .intro .intro-info ul p, .g-body .g-main.english-word .intro .intro-info ul p, .g-body .g-main.english-reading .intro .intro-info ul p, .g-body .g-main.news-english .intro .intro-info ul p, .g-body .g-main.cnn .intro .intro-info ul p {
  cursor: default;
  width: 100%;
  position: absolute;
  line-height: 1.5;
  left: 0;
  display: none;
}
.g-body .g-main.phonics .intro .intro-info ul p::before, .g-body .g-main.travel-english .intro .intro-info ul p::before, .g-body .g-main.english-word .intro .intro-info ul p::before, .g-body .g-main.english-reading .intro .intro-info ul p::before, .g-body .g-main.news-english .intro .intro-info ul p::before, .g-body .g-main.cnn .intro .intro-info ul p::before {
  content: "⌵";
  display: block;
  margin-bottom: 7px;
}
.g-body .g-main.phonics .intro .intro-info ul, .g-body .g-main.travel-english .intro .intro-info ul, .g-body .g-main.english-word .intro .intro-info ul, .g-body .g-main.english-reading .intro .intro-info ul, .g-body .g-main.news-english .intro .intro-info ul, .g-body .g-main.cnn .intro .intro-info ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-bottom: 85px;
  margin-top: 20px;
}
@media only screen and (max-width: 1600px) {
  .g-body .g-main.phonics .intro .intro-info ul, .g-body .g-main.travel-english .intro .intro-info ul, .g-body .g-main.english-word .intro .intro-info ul, .g-body .g-main.english-reading .intro .intro-info ul, .g-body .g-main.news-english .intro .intro-info ul, .g-body .g-main.cnn .intro .intro-info ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.phonics .intro .intro-info ul, .g-body .g-main.travel-english .intro .intro-info ul, .g-body .g-main.english-word .intro .intro-info ul, .g-body .g-main.english-reading .intro .intro-info ul, .g-body .g-main.news-english .intro .intro-info ul, .g-body .g-main.cnn .intro .intro-info ul {
    margin-top: 5vw;
    padding-bottom: 25vw;
  }
}
.g-body .g-main.phonics .intro .intro-info p, .g-body .g-main.travel-english .intro .intro-info p, .g-body .g-main.english-word .intro .intro-info p, .g-body .g-main.english-reading .intro .intro-info p, .g-body .g-main.news-english .intro .intro-info p, .g-body .g-main.cnn .intro .intro-info p {
  top: 135px;
}
@media only screen and (max-width: 1600px) {
  .g-body .g-main.phonics .intro .intro-info p, .g-body .g-main.travel-english .intro .intro-info p, .g-body .g-main.english-word .intro .intro-info p, .g-body .g-main.english-reading .intro .intro-info p, .g-body .g-main.news-english .intro .intro-info p, .g-body .g-main.cnn .intro .intro-info p {
    top: 290px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.phonics .intro .intro-info p, .g-body .g-main.travel-english .intro .intro-info p, .g-body .g-main.english-word .intro .intro-info p, .g-body .g-main.english-reading .intro .intro-info p, .g-body .g-main.news-english .intro .intro-info p, .g-body .g-main.cnn .intro .intro-info p {
    top: 57vw;
    padding: 0 3vw;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.phonics .intro .intro-info, .g-body .g-main.travel-english .intro .intro-info, .g-body .g-main.english-word .intro .intro-info, .g-body .g-main.english-reading .intro .intro-info, .g-body .g-main.news-english .intro .intro-info, .g-body .g-main.cnn .intro .intro-info {
    font-size: 4.5vw;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.phonics .intro .tool-list .btn, .g-body .g-main.travel-english .intro .tool-list .btn, .g-body .g-main.english-word .intro .tool-list .btn, .g-body .g-main.english-reading .intro .tool-list .btn, .g-body .g-main.news-english .intro .tool-list .btn, .g-body .g-main.cnn .intro .tool-list .btn {
    width: 43vw;
    margin-right: 1vw;
  }
}
.g-body .g-main.phonics .intro .g-container > p:nth-of-type(1) b, .g-body .g-main.travel-english .intro .g-container > p:nth-of-type(1) b, .g-body .g-main.english-word .intro .g-container > p:nth-of-type(1) b, .g-body .g-main.english-reading .intro .g-container > p:nth-of-type(1) b, .g-body .g-main.news-english .intro .g-container > p:nth-of-type(1) b, .g-body .g-main.cnn .intro .g-container > p:nth-of-type(1) b {
  color: #7D64AB;
}
.g-body .g-main.phonics .intro .g-container > p:nth-of-type(1), .g-body .g-main.travel-english .intro .g-container > p:nth-of-type(1), .g-body .g-main.english-word .intro .g-container > p:nth-of-type(1), .g-body .g-main.english-reading .intro .g-container > p:nth-of-type(1), .g-body .g-main.news-english .intro .g-container > p:nth-of-type(1), .g-body .g-main.cnn .intro .g-container > p:nth-of-type(1) {
  margin-bottom: 35px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.phonics .intro .g-container > p:nth-of-type(1), .g-body .g-main.travel-english .intro .g-container > p:nth-of-type(1), .g-body .g-main.english-word .intro .g-container > p:nth-of-type(1), .g-body .g-main.english-reading .intro .g-container > p:nth-of-type(1), .g-body .g-main.news-english .intro .g-container > p:nth-of-type(1), .g-body .g-main.cnn .intro .g-container > p:nth-of-type(1) {
    margin-bottom: 3vw;
  }
}
@media only screen and (min-width: 650px) {
  .g-body .g-main.phonics .content-title-word br, .g-body .g-main.travel-english .content-title-word br, .g-body .g-main.english-word .content-title-word br, .g-body .g-main.english-reading .content-title-word br, .g-body .g-main.news-english .content-title-word br, .g-body .g-main.cnn .content-title-word br {
    display: none;
  }
}
.g-body .g-main.english-word .intro .intro-info ul, .g-body .g-main.english-reading .intro .intro-info ul, .g-body .g-main.news-english .intro .intro-info ul, .g-body .g-main.cnn .intro .intro-info ul {
  padding: 0;
}
@media only screen and (min-width: 1025px) {
  .g-body .g-main.english-word .intro .intro-info ul li, .g-body .g-main.english-reading .intro .intro-info ul li, .g-body .g-main.news-english .intro .intro-info ul li, .g-body .g-main.cnn .intro .intro-info ul li {
    background: #fff;
  }
}
.g-body .g-main.english-word .intro .intro-info ul li.active, .g-body .g-main.english-word .intro .intro-info ul li:hover, .g-body .g-main.english-reading .intro .intro-info ul li.active, .g-body .g-main.english-reading .intro .intro-info ul li:hover, .g-body .g-main.news-english .intro .intro-info ul li.active, .g-body .g-main.news-english .intro .intro-info ul li:hover, .g-body .g-main.cnn .intro .intro-info ul li.active, .g-body .g-main.cnn .intro .intro-info ul li:hover {
  background: #fff;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.english-word .intro .intro-info ul li.active, .g-body .g-main.english-word .intro .intro-info ul li:hover, .g-body .g-main.english-reading .intro .intro-info ul li.active, .g-body .g-main.english-reading .intro .intro-info ul li:hover, .g-body .g-main.news-english .intro .intro-info ul li.active, .g-body .g-main.news-english .intro .intro-info ul li:hover, .g-body .g-main.cnn .intro .intro-info ul li.active, .g-body .g-main.cnn .intro .intro-info ul li:hover {
    background: #EEEEEE;
  }
}
.g-body .g-main.english-word .intro .intro-info ul li.active, .g-body .g-main.english-word .intro .intro-info ul li:hover, .g-body .g-main.english-reading .intro .intro-info ul li.active, .g-body .g-main.english-reading .intro .intro-info ul li:hover, .g-body .g-main.news-english .intro .intro-info ul li.active, .g-body .g-main.news-english .intro .intro-info ul li:hover, .g-body .g-main.cnn .intro .intro-info ul li.active, .g-body .g-main.cnn .intro .intro-info ul li:hover {
  cursor: default;
}
.g-body .g-main.english-word .intro .intro-info ul li.active h3,
.g-body .g-main.english-word .intro .intro-info ul li.active .h3, .g-body .g-main.english-word .intro .intro-info ul li:hover h3,
.g-body .g-main.english-word .intro .intro-info ul li:hover .h3, .g-body .g-main.english-reading .intro .intro-info ul li.active h3,
.g-body .g-main.english-reading .intro .intro-info ul li.active .h3, .g-body .g-main.english-reading .intro .intro-info ul li:hover h3,
.g-body .g-main.english-reading .intro .intro-info ul li:hover .h3, .g-body .g-main.news-english .intro .intro-info ul li.active h3,
.g-body .g-main.news-english .intro .intro-info ul li.active .h3, .g-body .g-main.news-english .intro .intro-info ul li:hover h3,
.g-body .g-main.news-english .intro .intro-info ul li:hover .h3, .g-body .g-main.cnn .intro .intro-info ul li.active h3,
.g-body .g-main.cnn .intro .intro-info ul li.active .h3, .g-body .g-main.cnn .intro .intro-info ul li:hover h3,
.g-body .g-main.cnn .intro .intro-info ul li:hover .h3 {
  color: #333333;
}
.g-body .g-main.english-word .intro .intro-info ul li.active i, .g-body .g-main.english-word .intro .intro-info ul li:hover i, .g-body .g-main.english-reading .intro .intro-info ul li.active i, .g-body .g-main.english-reading .intro .intro-info ul li:hover i, .g-body .g-main.news-english .intro .intro-info ul li.active i, .g-body .g-main.news-english .intro .intro-info ul li:hover i, .g-body .g-main.cnn .intro .intro-info ul li.active i, .g-body .g-main.cnn .intro .intro-info ul li:hover i {
  color: #4B2F80;
}
@media only screen and (min-width: 650px) {
  .g-body .g-main.english-word .intro .intro-box, .g-body .g-main.english-reading .intro .intro-box, .g-body .g-main.news-english .intro .intro-box, .g-body .g-main.cnn .intro .intro-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background-color: #F5F5F5;
  }
  .g-body .g-main.english-word .intro .intro-box .intro-info, .g-body .g-main.english-reading .intro .intro-box .intro-info, .g-body .g-main.news-english .intro .intro-box .intro-info, .g-body .g-main.cnn .intro .intro-box .intro-info {
    padding: 20px 20px 20px 0;
  }
}
.g-body .g-main.alive .intro .g-container > .box-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.alive .intro .g-container > .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 1024px) and (max-width: 650px) {
  .g-body .g-main.alive .intro .g-container > .box-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.g-body .g-main.alive .intro .g-container > .box-list .image-container {
  height: 200px;
}
@media only screen and (min-width: 650px) {
  .g-body .g-main.alive .content-title-word br {
    display: none;
  }
}
.g-body .g-main.basic-listening .intro .g-container > .box-list,
.g-body .g-main.basic-listening .intro .intro-box > .box-list, .g-body .g-main.english-writing-course .intro .g-container > .box-list,
.g-body .g-main.english-writing-course .intro .intro-box > .box-list, .g-body .g-main.ted .intro .g-container > .box-list,
.g-body .g-main.ted .intro .intro-box > .box-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.g-body .g-main.basic-listening .intro .g-container > .box-list .image-container,
.g-body .g-main.basic-listening .intro .intro-box > .box-list .image-container, .g-body .g-main.english-writing-course .intro .g-container > .box-list .image-container,
.g-body .g-main.english-writing-course .intro .intro-box > .box-list .image-container, .g-body .g-main.ted .intro .g-container > .box-list .image-container,
.g-body .g-main.ted .intro .intro-box > .box-list .image-container {
  height: 250px;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.basic-listening .intro .g-container > .box-list,
  .g-body .g-main.basic-listening .intro .intro-box > .box-list, .g-body .g-main.english-writing-course .intro .g-container > .box-list,
  .g-body .g-main.english-writing-course .intro .intro-box > .box-list, .g-body .g-main.ted .intro .g-container > .box-list,
  .g-body .g-main.ted .intro .intro-box > .box-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.basic-listening .visual .image-container img {
    left: -40%;
    width: 140%;
  }
}
.g-body .g-main.basic-listening .intro .g-container > p:nth-of-type(1) {
  margin-bottom: 15px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.basic-listening .intro .g-container > p:nth-of-type(1) {
    margin-bottom: 3vw;
  }
}
.g-body .g-main.basic-listening .intro .g-container > p:nth-of-type(1) b {
  color: #7D64AB;
}
.g-body .g-main.basic-listening .intro .intro-box .intro-info ul {
  gap: 20px 25px;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.basic-listening .intro .intro-box .intro-info ul {
    gap: 15px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.basic-listening .intro .intro-box .intro-info ul {
    gap: 5px;
  }
}
.g-body .g-main.basic-listening .intro .intro-box .intro-info ul li {
  border-radius: 10px;
  overflow: hidden;
  background: #EEEEEE;
  text-align: center;
  padding: 30px 15px 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.basic-listening .intro .intro-box .intro-info ul li {
    padding: 5vw 0 3vw;
  }
}
.g-body .g-main.basic-listening .intro .intro-box .intro-info ul li.active, .g-body .g-main.basic-listening .intro .intro-box .intro-info ul li:hover {
  background: #4B2F80;
  cursor: pointer;
}
.g-body .g-main.basic-listening .intro .intro-box .intro-info ul li.active h3,
.g-body .g-main.basic-listening .intro .intro-box .intro-info ul li.active .h3,
.g-body .g-main.basic-listening .intro .intro-box .intro-info ul li.active i, .g-body .g-main.basic-listening .intro .intro-box .intro-info ul li:hover h3,
.g-body .g-main.basic-listening .intro .intro-box .intro-info ul li:hover .h3,
.g-body .g-main.basic-listening .intro .intro-box .intro-info ul li:hover i {
  color: #fff;
}
.g-body .g-main.basic-listening .intro .intro-box .intro-info ul li.active h3 span,
.g-body .g-main.basic-listening .intro .intro-box .intro-info ul li.active .h3 span, .g-body .g-main.basic-listening .intro .intro-box .intro-info ul li:hover h3 span,
.g-body .g-main.basic-listening .intro .intro-box .intro-info ul li:hover .h3 span {
  color: #FFC700;
}
.g-body .g-main.basic-listening .intro .intro-box .intro-info ul li.active p {
  display: block;
}
.g-body .g-main.basic-listening .intro .intro-box .intro-info ul i {
  font-size: 2rem;
  color: #4B2F80;
  margin-bottom: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.basic-listening .intro .intro-box .intro-info ul i {
    font-size: 8vw;
    margin-bottom: 3.5vw;
  }
}
.g-body .g-main.basic-listening .intro .intro-box .intro-info ul h3,
.g-body .g-main.basic-listening .intro .intro-box .intro-info ul .h3 {
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: 0;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.basic-listening .intro .intro-box .intro-info ul h3,
  .g-body .g-main.basic-listening .intro .intro-box .intro-info ul .h3 {
    font-size: 4.2vw;
  }
}
.g-body .g-main.basic-listening .intro .intro-box .intro-info ul h3 span,
.g-body .g-main.basic-listening .intro .intro-box .intro-info ul .h3 span {
  color: #4B2F80;
  font-size: 1.5rem;
  font-weight: bold;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.basic-listening .intro .intro-box .intro-info ul h3 span,
  .g-body .g-main.basic-listening .intro .intro-box .intro-info ul .h3 span {
    font-size: 4.5vw;
  }
}
.g-body .g-main.basic-listening .intro .intro-box .intro-info ul h3 div,
.g-body .g-main.basic-listening .intro .intro-box .intro-info ul .h3 div {
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1.4;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.basic-listening .intro .intro-box .intro-info ul h3 div,
  .g-body .g-main.basic-listening .intro .intro-box .intro-info ul .h3 div {
    font-size: 5vw;
  }
}
.g-body .g-main.basic-listening .intro .intro-box .intro-info ul p {
  cursor: default;
  width: 100%;
  position: absolute;
  line-height: 1.5;
  left: 0;
  display: none;
}
.g-body .g-main.basic-listening .intro .intro-box .intro-info ul p::before {
  content: "⌵";
  display: block;
  margin-bottom: 7px;
}
.g-body .g-main.basic-listening .intro .intro-box .intro-info ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-bottom: 85px;
  margin-top: 20px;
}
@media only screen and (max-width: 1600px) {
  .g-body .g-main.basic-listening .intro .intro-box .intro-info ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
}
@media only screen and (max-width: 1600px) and (max-width: 1024px) {
  .g-body .g-main.basic-listening .intro .intro-box .intro-info ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-bottom: 120px;
  }
}
@media only screen and (max-width: 1600px) and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main.basic-listening .intro .intro-box .intro-info ul {
    padding-bottom: 25vw;
  }
}
.g-body .g-main.basic-listening .intro .intro-box .intro-info p {
  top: 165px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.basic-listening .intro .intro-box .intro-info p {
    top: 320px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.basic-listening .intro .intro-box .intro-info p {
    top: 62vw;
  }
}
.g-body .g-main.grammar .intro .g-container > .box-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.grammar .intro .g-container > .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.grammar .intro .g-container > .box-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.g-body .g-main.grammar .intro .g-container > .box-list .image-container {
  height: 180px;
}
.g-body .g-main.ecam .intro i {
  margin-right: 8px;
}
.g-body .g-main.ecam .intro h3 {
  font-size: 1.5rem;
  font-weight: bold;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ecam .intro h3 {
    font-size: 5.5vw;
    font-weight: normal;
  }
}
.g-body .g-main.ecam .intro table td {
  padding: 15px;
  text-align: center;
}
.g-body .g-main.ecam .intro table td:nth-child(1) {
  width: 10%;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.ecam .intro table td {
    text-align: left;
  }
  .g-body .g-main.ecam .intro table thead {
    display: none;
  }
  .g-body .g-main.ecam .intro table tbody {
    border-bottom: 1px #dedede solid;
  }
  .g-body .g-main.ecam .intro table tbody tr {
    display: block;
    border: 1px #dedede solid;
    border-bottom: 0;
  }
  .g-body .g-main.ecam .intro table tbody td,
  .g-body .g-main.ecam .intro table tbody th {
    display: block;
    text-align: left;
    border: 0;
  }
  .g-body .g-main.ecam .intro table tbody td {
    padding: 3px 15px 3px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.ecam .intro table tbody td {
    padding: 1vw 3vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.ecam .intro table tbody td:nth-of-type(1) {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.ecam .intro table tbody td:nth-of-type(1) {
    padding-top: 5vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.ecam .intro table tbody td:nth-last-of-type(1) {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.ecam .intro table tbody td:nth-last-of-type(1) {
    padding-bottom: 5vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.ecam .intro table thead,
  .g-body .g-main.ecam .intro table thead tr,
  .g-body .g-main.ecam .intro table thead tr th {
    display: block;
  }
  .g-body .g-main.ecam .intro table tr {
    text-align: center;
    padding-top: 20px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.ecam .intro table tr {
    padding-top: 5vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.ecam .intro table td:nth-child(1), .g-body .g-main.ecam .intro table td:nth-child(2) {
    display: inline;
    font-weight: bold;
    color: #4B2F80;
    padding: 0;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.ecam .intro table td:nth-child(1), .g-body .g-main.ecam .intro table td:nth-child(2) {
    font-size: 4.8vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.ecam .intro table td:nth-child(3) {
    text-align: center;
  }
}
.g-body .g-main.ecam .btn-more {
  color: #fff;
  font-size: 1.1rem;
  border-radius: 50px;
  padding: 10px 20px 6px;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  display: flex;
  min-width: 150px;
  border: 0;
}
.g-body .g-main.ecam .btn-more:hover {
  cursor: pointer;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ecam .btn-more {
    width: 55vw;
    min-width: auto;
    font-size: 5vw;
    padding: 10px 0 7px;
  }
}
.g-body .g-main.ecam .btn-more {
  color: #4B2F80;
  width: 155px;
  background-color: #F6F1FF;
  margin: 50px auto 0;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ecam .btn-more {
    margin: 10vw auto 0;
  }
}
.g-body .g-main.ecam .btn-more::before {
  content: "";
  width: 17px;
  height: 17px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  margin-right: 7px;
  position: relative;
  display: table;
  top: -2px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ecam .btn-more::before {
    width: 4.5vw;
    height: 4.5vw;
  }
}
.g-body .g-main.ecam .btn-more::before {
  background-image: url(../images/i-plus.svg);
}
.g-body .g-main.ecam .btn-more:hover {
  color: #fff;
  background-color: #4B2F80;
}
.g-body .g-main.ecam .btn-more:hover::before {
  background-image: url(../images/i-plus-w.svg);
}
.g-body .g-main.ecam .ecam-list h3 .month {
  width: 150px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.ecam .ecam-list h3 .month {
    width: 32.5vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ecam .visual .page-title {
    font-size: 2rem;
    letter-spacing: 0.2rem;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.ecam .visual .page-title {
    font-size: 7vw;
    letter-spacing: 0.3vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.ecam .intro .content-title,
  .g-body .g-main.ecam .feature .content-title,
  .g-body .g-main.ecam .g-event .content-title {
    letter-spacing: 1px;
  }
}

.g-body .g-main .breadcrumbs {
  display: flex;
  margin: 10px 0 0;
  height: 30px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .breadcrumbs {
    margin: 7px 0 0;
  }
}
.g-body .g-main .breadcrumbs li:not(:first-child)::before {
  color: #fff;
  position: relative;
  display: inline-flex;
  content: "›";
  margin: 0 5px;
  top: -1px;
}
.g-body .g-main .breadcrumbs li a {
  font-size: 1rem;
  color: #fff;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .breadcrumbs li a {
    font-size: 4vw;
  }
}
.g-body .g-main .breadcrumbs li a[href]:hover {
  color: #FFE666;
}
.g-body .g-main .breadcrumbs li .home {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  width: 25px;
  height: 25px;
  background: url(../images/i-home.svg) no-repeat top 3px center/auto 16px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .breadcrumbs li .home {
    width: 5.5vw;
    height: 5.5vw;
    background: url(../images/i-home.svg) no-repeat top 1.5vw center/auto 4.5vw;
  }
}
.g-body .g-main .content-title {
  font-size: 2.5rem;
  text-align: center;
  font-weight: bold;
  letter-spacing: 4px;
  margin-bottom: 35px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main .content-title {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .content-title {
    font-size: 7.5vw;
    margin-bottom: 8vw;
  }
}
.g-body .g-main .big-title {
  font-size: 2.25rem;
  font-weight: bold;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main .big-title {
    font-size: 1.8rem;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main .big-title {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .big-title {
    font-size: 6.9vw;
    margin-bottom: 15px;
  }
}
.g-body .g-main .little-title {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: 1.5rem;
  color: #4B2F80;
  font-weight: bold;
  margin-bottom: 15px;
}
.g-body .g-main .little-title::after {
  content: "";
  width: 100%;
  height: 0.75px;
  display: block;
  background-color: #cccccc;
  margin-left: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .little-title {
    font-size: 5.5vw;
    margin-bottom: 3vw;
  }
  .g-body .g-main .little-title::after {
    margin-left: 5vw;
  }
  .g-body .g-main .little-title::before {
    content: "";
    width: 100%;
    height: 1px;
    display: block;
    background-color: #cccccc;
    margin-right: 5vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main .little-title.long {
    white-space: normal;
    position: relative;
  }
  .g-body .g-main .little-title.long::after {
    width: 0;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .little-title.long {
    max-width: 100%;
    text-align: center;
  }
  .g-body .g-main .little-title.long::after {
    margin-left: 2vw;
  }
  .g-body .g-main .little-title.long::before {
    margin-right: 2vw;
  }
  .g-body .g-main .little-title.long::after, .g-body .g-main .little-title.long::before {
    width: 15%;
  }
}
.g-body .g-main .nav-page {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: -50px;
  background: linear-gradient(to bottom, rgba(75, 45, 130, 0.75) 0%, rgba(75, 45, 130, 0.75) 80%, rgba(65, 40, 115, 0.75) 100%);
  justify-content: center;
  overflow-x: hidden;
  z-index: 3;
  position: sticky;
  top: 55px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .nav-page {
    justify-content: start;
  }
}
.g-body .g-main .nav-page a,
.g-body .g-main .nav-page .page-scroll {
  display: flex;
  align-items: center;
  height: 50px;
  font-size: 1.1rem;
  color: #fff;
  padding: 20px;
  justify-content: center;
  white-space: nowrap;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main .nav-page a,
  .g-body .g-main .nav-page .page-scroll {
    padding: 20px 15px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .nav-page a,
  .g-body .g-main .nav-page .page-scroll {
    font-size: 4.2vw;
    padding: 3vw;
    letter-spacing: 0.2vw;
  }
}
.g-body .g-main .nav-page a:hover,
.g-body .g-main .nav-page .page-scroll:hover {
  cursor: pointer;
}
@media only screen and (min-width: 1400px) {
  .g-body .g-main .nav-page a:hover,
  .g-body .g-main .nav-page .page-scroll:hover {
    color: #FFE666;
    background-color: #4B2F80;
  }
}
.g-body .g-main .nav-page a.active, .g-body .g-main .nav-page a.click,
.g-body .g-main .nav-page .page-scroll.active,
.g-body .g-main .nav-page .page-scroll.click {
  color: #FFE666;
  background-color: #4B2F80;
}
.g-body .g-main .nav-page a.search-courses,
.g-body .g-main .nav-page .page-scroll.search-courses {
  display: flex;
  align-items: center;
}
.g-body .g-main .nav-page a.search-courses::before,
.g-body .g-main .nav-page .page-scroll.search-courses::before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  background: url(../images/i-search.svg);
  background-size: auto 100%;
  margin-bottom: 4px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .nav-page a.search-courses::before,
  .g-body .g-main .nav-page .page-scroll.search-courses::before {
    width: 3.5vw;
    height: 3.5vw;
    margin-right: 2vw;
    margin-bottom: 0.5vw;
  }
}
.g-body .g-main .nav-page a.search-courses:hover::before,
.g-body .g-main .nav-page .page-scroll.search-courses:hover::before {
  background: url(../images/i-search-yellow.svg);
  background-size: auto 100%;
}
.g-body .g-main .page-margin {
  margin-top: -50px;
  background-color: #fff;
  border-radius: 25px 25px 0 0;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main .page-margin {
    border-radius: 0;
    margin-top: 0;
  }
}
.g-body .g-main .main-aside {
  display: grid;
  grid-template-columns: auto 350px;
  gap: 30px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main .main-aside {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
.g-body .g-main .main-aside aside {
  width: 100%;
}
.g-body .g-main .visual {
  background-size: cover;
  background-position: center center;
  padding-bottom: 60px;
}
.g-body .g-main .visual .page-title {
  color: #fff;
  font-size: 2.25rem;
  text-align: center;
  letter-spacing: 0.5rem;
  height: 60px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .visual .page-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8vw;
    letter-spacing: 0.5rem;
  }
}
.g-body .g-main .visual p,
.g-body .g-main .visual .p {
  font-size: 1.1rem;
  color: #fff;
  text-align: center;
  margin-top: 10px;
  padding-bottom: 10px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .visual p,
  .g-body .g-main .visual .p {
    font-size: 4.2vw;
    margin: 0;
    padding-bottom: 0;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main .visual.visual-margin {
    height: auto;
    padding-bottom: 15px;
  }
}
.g-body .g-main.g-tag .visual, .g-body .g-main.g-tag-s .visual {
  height: 200px;
}
.g-body .g-main.g-tag .page-margin .g-container, .g-body .g-main.g-tag-s .page-margin .g-container {
  margin-top: -50px;
}
.g-body .g-main.g-tag .search-input, .g-body .g-main.g-tag-s .search-input {
  justify-content: space-between;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-tag.g-tag .visual, .g-body .g-main.g-tag-s.g-tag .visual {
    height: 210px;
  }
  .g-body .g-main.g-tag.g-tag .page-margin .g-container, .g-body .g-main.g-tag-s.g-tag .page-margin .g-container {
    margin-top: -110px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main.g-tag.g-tag .page-margin .g-container, .g-body .g-main.g-tag-s.g-tag .page-margin .g-container {
    padding-top: 0 !important;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-tag.g-tag-s .visual, .g-body .g-main.g-tag-s.g-tag-s .visual {
    height: 150px;
  }
  .g-body .g-main.g-tag.g-tag-s .page-margin .g-container, .g-body .g-main.g-tag-s.g-tag-s .page-margin .g-container {
    margin-top: -50px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main.g-tag.g-tag-s .tab-box, .g-body .g-main.g-tag-s.g-tag-s .tab-box {
    margin-bottom: 0;
  }
}
.g-body .g-main .search-input {
  display: flex;
  justify-content: flex-end;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main .search-input {
    flex-direction: column-reverse;
    align-items: center;
  }
}
.g-body .g-main .search-input .input-text,
.g-body .g-main .search-input .input-select,
.g-body .g-main .search-input select {
  position: relative;
  color: #333333;
  width: 100%;
  height: 40px;
  border-radius: 50px;
  background-color: #fff;
  border: 1px #dedede solid;
  max-width: 220px;
}
.g-body .g-main .search-input .input-text {
  padding: 7px 40px;
}
.g-body .g-main .search-input .input-text::before {
  position: absolute !important;
  content: "";
  width: 17px;
  height: 17px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  margin-right: 7px;
  position: relative;
  display: table;
  top: -2px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .search-input .input-text::before {
    width: 4.5vw;
    height: 4.5vw;
  }
}
.g-body .g-main .search-input .input-text::before {
  background-image: url(../images/i-search-default.svg);
  left: 10px;
  top: 10px;
}
.g-body .g-main .search-input .input-text:hover {
  cursor: text;
}
.g-body .g-main .search-input .input-select {
  padding: 7px 40px 7px 15px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .search-input .input-select {
    padding: 2.5vw 12vw 2vw 10vw;
    height: 12vw;
  }
}
.g-body .g-main .search-input .input-select::before {
  content: "";
  width: 17px;
  height: 17px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  margin-right: 7px;
  position: relative;
  display: table;
  top: -2px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .search-input .input-select::before {
    width: 4.5vw;
    height: 4.5vw;
  }
}
.g-body .g-main .search-input .input-select::before {
  width: 12px;
  height: 12px;
  position: absolute !important;
  background-image: url(../images/arrow.svg);
  right: 0;
  top: 12px;
  transition: 0.3s;
}
.g-body .g-main .search-input .input-select:hover {
  cursor: pointer;
}
.g-body .g-main .search-input select {
  padding: 7px 10px;
}
.g-body .g-main .search-input .searchgroup-courses {
  position: relative;
  width: 90%;
  max-width: 220px;
}
.g-body .g-main .search-input .searchgroup-courses .search-tagbox {
  border-radius: 10px;
  overflow: hidden;
  width: calc(100% + 460px);
  left: -460px;
  background-color: #fff;
  padding: 15px 20px 25px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  margin-top: 3px;
  position: absolute;
  display: none;
  z-index: 1;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main .search-input .searchgroup-courses .search-tagbox {
    width: 100%;
    left: 0;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main .search-input .searchgroup-courses .search-tagbox {
    padding: 15px 10px 25px;
  }
}
.g-body .g-main .search-input .searchgroup-courses .search-tagbox .title {
  width: 100%;
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 10px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main .search-input .searchgroup-courses {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
  }
  .g-body .g-main .search-input .searchgroup-courses .input-text {
    margin: auto;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .search-input select,
  .g-body .g-main .search-input .input-select {
    text-align: center;
  }
}
.g-body .g-main .tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.g-body .g-main .tag-list a {
  font-size: 1rem;
  color: #7D64AB;
  background-color: #F6F1FF;
  padding: 5px 15px;
  border-radius: 50px;
}
.g-body .g-main .tag-list a:hover {
  cursor: pointer;
}
.g-body .g-main .tab-box {
  display: flex;
  gap: 1px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main .tab-box {
    width: 100%;
    justify-content: center;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main .tab-box {
    margin-bottom: 5vw;
  }
}
.g-body .g-main .tab-box a {
  width: 50%;
  max-width: 200px;
  height: 50px;
  color: #fff;
  font-size: 1.125rem;
  text-align: center;
  background-color: #7D64AB;
  letter-spacing: 3px;
  border: 0;
  padding: 13px 30px 10px;
  border-radius: 10px 10px 0 0;
  white-space: nowrap;
  cursor: pointer;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .tab-box a {
    font-size: 4.8vw;
    padding-left: 0;
    padding-right: 0;
  }
}
.g-body .g-main .tab-box a:hover {
  background-color: #AB91DD;
}
.g-body .g-main .tab-box a.active {
  cursor: default;
  color: #4B2F80;
  background-color: #fff;
}
.g-body .g-main .select-toggle {
  display: none;
  width: 60px;
  height: 60px;
  top: 67px;
  right: 0;
  border-radius: 50px 0 0 50px;
  background-color: #4B2F80;
  z-index: 4;
  position: fixed;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main .select-toggle {
    width: 50px;
    height: 40px;
    top: 55px;
    right: 10px;
    border-radius: 0 0 50px 50px;
    line-height: 1.3;
  }
}
@media only screen and (max-width: 1440px) and (max-width: 1024px) {
  .g-body .g-main .select-toggle {
    right: 0;
  }
}
@media only screen and (max-width: 1440px) and (max-width: 450px) {
  .g-body .g-main .select-toggle {
    width: 14vw;
    height: 10.5vw;
  }
}
.g-body .g-main .select-toggle::after {
  color: #fff;
  content: "文章\a類別\a";
  white-space: pre;
  position: absolute;
  right: 6px;
  top: 7px;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main .select-toggle::after {
    content: "類別";
    right: 8px;
    top: 8px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .select-toggle::after {
    font-size: 4vw;
    right: 2.6vw;
    top: 1.95vw;
  }
}
.g-body .g-main .select-toggle:hover {
  cursor: pointer;
}
.g-body .g-main .select-box {
  width: 100%;
  min-height: 85px;
  margin-top: -50px;
  margin-bottom: 20px;
  padding: 28px 5% 28px 30px;
  background-color: #fff;
  box-shadow: 0 15px 15px rgba(0, 0, 0, 0.15);
  display: none;
  position: sticky;
  z-index: 5;
  top: 55px;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main .select-box {
    padding: 30px 50px 30px 30px;
  }
}
@media only screen and (max-width: 1440px) and (max-width: 1024px) {
  .g-body .g-main .select-box {
    max-height: calc(100vh - 100px);
    padding: 30px 50px 30px 20px;
    margin-top: 0;
    margin-bottom: -20px;
    overflow: auto;
  }
  .g-body .g-main .select-box.fixed {
    top: 55px;
  }
}
@media only screen and (max-width: 1440px) and (max-width: 650px) {
  .g-body .g-main .select-box {
    padding: 38px 10px 25px;
  }
}
@media only screen and (max-width: 1440px) and (max-width: 450px) {
  .g-body .g-main .select-box {
    padding: 10vw 5px 1.5vw;
  }
}
.g-body .g-main .select-box .option-list {
  max-width: 1400px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  gap: 20px 0;
}
.g-body .g-main .select-box .option-list a {
  display: flex;
  align-items: center;
  font-size: 1.1rem;
  color: #333333;
  border-left: 1px #dedede solid;
  padding: 0 18px;
}
.g-body .g-main .select-box .option-list a:hover {
  color: #7D64AB;
  cursor: pointer;
}
.g-body .g-main .select-box .option-list a.active {
  color: #7D64AB;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main .select-box .option-list {
    gap: 10px 2%;
  }
  .g-body .g-main .select-box .option-list a {
    width: 49%;
    padding: 10px;
    border-radius: 4px;
    justify-content: center;
    border: 0;
    background-color: #EEEEEE;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .select-box .option-list {
    gap: 1vw 1%;
  }
  .g-body .g-main .select-box .option-list a {
    width: 49.5%;
    font-size: 5vw;
    padding: 2vw 0;
  }
}
.g-body .g-main .select-box .close-select {
  content: "";
  width: 17px;
  height: 17px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  margin-right: 7px;
  position: relative;
  display: table;
  top: -2px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .select-box .close-select {
    width: 4.5vw;
    height: 4.5vw;
  }
}
.g-body .g-main .select-box .close-select {
  width: 28px;
  height: 28px;
  position: absolute;
  border: 1px #dedede solid;
  border-radius: 50px;
  background-image: url(../images/i-menu-close-w.svg);
  background-size: 70% auto;
  background-color: #4B2F80;
  right: 2%;
  top: 28px;
  cursor: pointer;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main .select-box .close-select {
    right: 5px;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main .select-box .close-select {
    right: 2px;
    top: 5px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .select-box .close-select {
    width: 7.5vw;
    height: 7.5vw;
    right: -0.7vw;
    top: 1.5vw;
  }
}
.g-body .g-main .search-list {
  display: grid;
  gap: 20px 25px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .search-list {
    gap: 15px;
  }
}
.g-body .g-main .search-list .label-list {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 9px 2px 8px;
  flex-wrap: wrap;
  border-bottom: 1px #dedede solid;
  gap: 15px;
}
.g-body .g-main .search-list .label-list span {
  white-space: nowrap;
}
.g-body .g-main .search-list .label-list ul {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px 15px;
}
.g-body .g-main .search-list .label-list ul li {
  display: inline-flex;
  padding: 0;
}
.g-body .g-main .search-list .label-list label {
  display: flex;
  align-items: center;
}
.g-body .g-main .g-address {
  font-style: normal;
  display: grid;
}
.g-body .g-main .g-address .tel,
.g-body .g-main .g-address .address {
  display: inline-flex;
  align-items: start;
}
.g-body .g-main .g-address .tel::before,
.g-body .g-main .g-address .address::before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background: url(../images/i-position.svg) no-repeat center center/auto 100%;
}
.g-body .g-main .g-address .tel {
  color: #FF7A00;
  margin-bottom: 5px;
  z-index: 1;
}
.g-body .g-main .g-address .tel::before {
  background: url(../images/i-phone.svg) no-repeat center center/auto 85%;
}
.g-body .g-main .g-address .tel a {
  color: #FF7A00;
}
.g-body .g-main .g-address .tel a:hover {
  color: #AB91DD;
}
.g-body .g-main .share {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.g-body .g-main .share li {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 40px;
  background-size: 65% auto;
}
.g-body .g-main .share li a {
  cursor: pointer;
  display: block;
  height: 100%;
  width: 100%;
}
.g-body .g-main .share li.line {
  background-image: url(../images/i-Line-w.svg);
  background-color: #08a862;
}
.g-body .g-main .share li.Facebook {
  background-image: url(../images/i-facebook-w.svg);
  background-color: #0760b4;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .share {
    gap: 2vw;
  }
  .g-body .g-main .share li {
    width: 11.5vw;
    height: 11.5vw;
    line-height: 11.5vw;
  }
}
.g-body .g-main .word-alert {
  color: #ff2e0e;
  line-height: 2.5;
  display: none;
}
.g-body .g-main .subscription-box {
  border-radius: 10px;
  overflow: hidden;
  font-size: 1rem;
  background-color: #F6F1FF;
  padding: 30px 20px;
  display: grid;
  gap: 20px;
}
.g-body .g-main .subscription-box input[type=text] {
  border: 1px #dedede solid;
  border-radius: 5px;
  padding: 8px 6px;
}
.g-body .g-main .subscription-box .btn-normal {
  margin: auto;
}
.g-body .g-main .community {
  display: flex;
  align-items: center;
  gap: 8px;
}
.g-body .g-main .community a {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  width: 38px;
  height: 38px;
  border-radius: 5px;
  cursor: pointer;
  background-size: auto 70%;
}
.g-body .g-main .community a.Facebook {
  background-color: #0760b4;
  background-image: url(../images/i-facebook-w.svg);
}
.g-body .g-main .community a.Line {
  background-color: #08a862;
  background-image: url(../images/i-Line-w.svg);
}
.g-body .g-main .community a.Line.branch {
  background-color: #4B2F80;
}
.g-body .g-main .community a.Instagram {
  background-image: url(../images/icon-Instagram.png);
  background-size: auto 100%;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .community {
    margin: 10px 0;
    gap: 3vw;
  }
  .g-body .g-main .community a {
    width: 12vw;
    height: 12vw;
  }
}
.g-body .g-main .Certificates {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .Certificates {
    gap: 1.25vw;
  }
}
.g-body .g-main .Certificates li {
  font-size: 0.825rem;
  width: 60px;
  color: #fff;
  text-align: center;
  background-color: #333333;
  padding: 5px 0 3px;
  border-radius: 4px;
  letter-spacing: 0;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .Certificates li {
    font-size: 4vw;
    width: 16vw;
    padding: 1vw 0 0.75vw;
  }
}
.g-body .g-main .teacher-list .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .teacher-list .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main .teacher-list .box-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px 25px;
  text-align: center;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main .teacher-list .box-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 1440px) and (max-width: 768px) {
  .g-body .g-main .teacher-list .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}
@media only screen and (max-width: 1440px) and (max-width: 450px) {
  .g-body .g-main .teacher-list .box-list {
    gap: 5px;
  }
}
.g-body .g-main .teacher-list .box-list .image-container {
  padding-bottom: 100%;
  border-radius: 100%;
}
.g-body .g-main .teacher-list .box-list .image-container img {
  height: 180%;
  transition: 0.3s;
}
.g-body .g-main .teacher-list .box-list a {
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  padding: 20px;
  position: relative;
  top: 0;
  transition: 0.3s;
  border: 1px #dedede solid;
}
.g-body .g-main .teacher-list .box-list a:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.12);
  top: -10px;
  transition: 0.3s;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .teacher-list .box-list a {
    padding: 3vw;
  }
  .g-body .g-main .teacher-list .box-list a:hover {
    box-shadow: 0;
    top: 0px;
  }
}
.g-body .g-main .teacher-list .box-list a:nth-of-type(7n-6) .image-container {
  background: #66c2ff;
}
.g-body .g-main .teacher-list .box-list a:nth-of-type(7n-5) .image-container {
  background: #ff839e;
}
.g-body .g-main .teacher-list .box-list a:nth-of-type(7n-4) .image-container {
  background: #ffb163;
}
.g-body .g-main .teacher-list .box-list a:nth-of-type(7n-3) .image-container {
  background: #73d2d2;
}
.g-body .g-main .teacher-list .box-list a:nth-of-type(7n-2) .image-container {
  background: #d4bdff;
}
.g-body .g-main .teacher-list .box-list a:nth-of-type(7n-1) .image-container {
  background: #ffdb59;
}
.g-body .g-main .teacher-list .box-list .name {
  font-size: 1.375rem;
  margin-top: 25px;
  line-height: 1.3;
  font-weight: bold;
  color: #4B2F80;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .teacher-list .box-list .name {
    font-size: 5vw;
    line-height: 2.5;
    margin-top: 3vw;
    font-weight: normal;
  }
}
.g-body .g-main .teacher-list.focus-BG .box-list a {
  border: 0;
}
.g-body .g-main .blog-list .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .blog-list .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main .blog-list .box-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 25px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main .blog-list .box-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main .blog-list .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .blog-list .box-list {
    gap: 5px;
  }
}
.g-body .g-main .blog-list .box-list a {
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  border: 1px #dedede solid;
  padding-bottom: 20px;
}
.g-body .g-main .blog-list .box-list a .image-container {
  padding-bottom: 52.3%;
}
.g-body .g-main .blog-list .box-list a .image-container img {
  transition: 0.3s;
}
.g-body .g-main .blog-list .box-list a:hover img {
  transition: 0.3s;
  transform: scale(1.1);
}
.g-body .g-main .blog-list .box-list a h3,
.g-body .g-main .blog-list .box-list a h4 {
  font-size: 1.125rem;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  color: #333333;
  padding: 20px 20px 0 20px;
}
.g-body .g-main .blog-list .box-list a p {
  color: #333333;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  padding: 20px;
  padding-bottom: 0;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .blog-list .box-list a {
    padding-bottom: 5vw;
  }
  .g-body .g-main .blog-list .box-list a h3,
  .g-body .g-main .blog-list .box-list a h4 {
    font-size: 4.5vw;
    padding: 3vw 2vw 0 2vw;
  }
  .g-body .g-main .blog-list .box-list a p {
    font-size: 4.5vw;
    padding: 3vw 2vw 0 2vw;
  }
}
.g-body .g-main .blog-list.focus-BG .box-list a {
  border: 0;
}
.g-body .g-main .video-list-info .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-list-info .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main .video-list-info .box-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 25px;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main .video-list-info .box-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main .video-list-info .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main .video-list-info .box-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
  }
}
.g-body .g-main .video-list-info .box-list a {
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  border: 1px #dedede solid;
}
.g-body .g-main .video-list-info .box-list a .image-container::after {
  content: "";
  width: 100%;
  height: 100%;
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: url("../images/video-play.svg") no-repeat center center/auto 35px;
  background-color: rgba(0, 0, 0, 0.15);
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-list-info .box-list a .image-container::after {
    background: url("../images/video-play.svg") no-repeat center center/auto 9vw;
    background-color: rgba(0, 0, 0, 0.15);
  }
}
.g-body .g-main .video-list-info .box-list a img {
  transition: 0.3s;
}
.g-body .g-main .video-list-info .box-list a:hover img {
  transition: 0.3s;
  transform: scale(1.1);
}
.g-body .g-main .video-list-info .box-list a .video-tab,
.g-body .g-main .video-list-info .box-list a .category,
.g-body .g-main .video-list-info .box-list a h3 {
  display: table;
  margin: 0 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-list-info .box-list a .video-tab,
  .g-body .g-main .video-list-info .box-list a .category,
  .g-body .g-main .video-list-info .box-list a h3 {
    margin: 0 2vw;
  }
}
.g-body .g-main .video-list-info .box-list a .video-tab {
  cursor: pointer;
  font-size: 1rem;
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 5px 10px 2px;
  margin-top: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-list-info .box-list a .video-tab {
    font-size: 4vw;
    padding: 0.75vw 2vw 0;
    margin-top: 3vw;
  }
}
.g-body .g-main .video-list-info .box-list a h3 {
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  color: #4B2F80;
  font-size: 1.25rem;
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-list-info .box-list a h3 {
    color: #333333;
    font-size: 4.5vw;
    font-weight: normal;
    margin-top: 3vw;
    margin-bottom: 3vw;
  }
}
.g-body .g-main .video-list-info .box-list a .category {
  font-size: 1rem;
  color: #333333;
  border: 0;
  background: #f5f5f5;
  border-radius: 4px;
  padding: 5px 10px 2px;
  margin-bottom: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-list-info .box-list a .category {
    font-size: 4vw;
    padding: 0.75vw 2vw 0;
    margin-bottom: 3.5vw;
  }
}
.g-body .g-main .video-list-info .box-list a .info {
  margin: 0 20px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-list-info .box-list a .info {
    margin: 0 3vw 3.5vw;
    gap: 2vw 5vw;
  }
}
.g-body .g-main .video-list-info .box-list a .info .name {
  color: #aaaaaa;
  font-size: 1rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-list-info .box-list a .info .name {
    font-size: 4vw;
  }
}
.g-body .g-main .video-list-info .box-list a .info .category {
  margin: 0;
}
.g-body .g-main .video-list-info.focus-BG .box-list a {
  border: 0;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main .video-list-info.scroll .box-list {
    display: grid;
    grid-template-columns: repeat(999, 1fr);
    overflow: auto;
    gap: 0;
  }
  .g-body .g-main .video-list-info.scroll .box-list a:not(:last-child) {
    margin-right: 20px;
  }
}
@media only screen and (max-width: 1440px) and (max-width: 768px) {
  .g-body .g-main .video-list-info.scroll .box-list a:not(:last-child) {
    margin-right: 15px;
  }
}
@media only screen and (max-width: 1440px) and (max-width: 450px) {
  .g-body .g-main .video-list-info.scroll .box-list a:not(:last-child) {
    margin-right: 5px;
  }
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main .video-list-info.scroll .box-list a {
    width: 27vw;
  }
}
@media only screen and (max-width: 1440px) and (max-width: 1024px) {
  .g-body .g-main .video-list-info.scroll .box-list a {
    width: 42vw;
  }
}
@media only screen and (max-width: 1440px) and (max-width: 650px) {
  .g-body .g-main .video-list-info.scroll .box-list a {
    width: 75vw;
  }
}
.g-body .g-main .video-list .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-list .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main .video-list .box-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 25px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main .video-list .box-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main .video-list .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-list .box-list {
    gap: 5px;
  }
}
.g-body .g-main .video-list .box-list a {
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  border: 1px #dedede solid;
}
.g-body .g-main .video-list .box-list a .image-container::after {
  content: "";
  width: 100%;
  height: 100%;
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: url("../images/video-play.svg") no-repeat center center/auto 35px;
  background-color: rgba(0, 0, 0, 0.15);
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-list .box-list a .image-container::after {
    background: url("../images/video-play.svg") no-repeat center center/auto 9vw;
    background-color: rgba(0, 0, 0, 0.15);
  }
}
.g-body .g-main .video-list .box-list a img {
  transition: 0.3s;
}
.g-body .g-main .video-list .box-list a:hover img {
  transition: 0.3s;
  transform: scale(1.1);
}
.g-body .g-main .video-list .box-list a .video-tab,
.g-body .g-main .video-list .box-list a .category,
.g-body .g-main .video-list .box-list a h3 {
  display: table;
  margin: 0 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-list .box-list a .video-tab,
  .g-body .g-main .video-list .box-list a .category,
  .g-body .g-main .video-list .box-list a h3 {
    margin: 0 2vw;
  }
}
.g-body .g-main .video-list .box-list a .video-tab {
  cursor: pointer;
  font-size: 1rem;
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 5px 10px 2px;
  margin-top: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-list .box-list a .video-tab {
    font-size: 4vw;
    padding: 0.75vw 2vw 0;
    margin-top: 3vw;
  }
}
.g-body .g-main .video-list .box-list a h3 {
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  color: #4B2F80;
  font-size: 1.25rem;
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-list .box-list a h3 {
    color: #333333;
    font-size: 4.5vw;
    font-weight: normal;
    margin-top: 3vw;
    margin-bottom: 3vw;
  }
}
.g-body .g-main .video-list .box-list a .category {
  font-size: 1rem;
  color: #333333;
  border: 0;
  background: #f5f5f5;
  border-radius: 4px;
  padding: 5px 10px 2px;
  margin-bottom: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-list .box-list a .category {
    font-size: 4vw;
    padding: 0.75vw 2vw 0;
    margin-bottom: 3.5vw;
  }
}
.g-body .g-main .video-list .box-list a .info {
  margin: 0 20px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-list .box-list a .info {
    margin: 0 3vw 3.5vw;
    gap: 2vw 5vw;
  }
}
.g-body .g-main .video-list .box-list a .info .name {
  color: #aaaaaa;
  font-size: 1rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-list .box-list a .info .name {
    font-size: 4vw;
  }
}
.g-body .g-main .video-list .box-list a .info .category {
  margin: 0;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-list .box-list a h3 {
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    height: 14vw;
  }
}
.g-body .g-main .video-list.focus-BG .box-list a {
  border: 0;
}
@media only screen and (min-width: 1025px) {
  .g-body .g-main .video-list.scroll .box-list a:nth-child(n+5) {
    display: none;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main .video-list.scroll .box-list {
    display: grid;
    grid-template-columns: repeat(999, 1fr);
    overflow: auto;
    gap: 0;
  }
  .g-body .g-main .video-list.scroll .box-list a:not(:last-child) {
    margin-right: 20px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 768px) {
  .g-body .g-main .video-list.scroll .box-list a:not(:last-child) {
    margin-right: 15px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main .video-list.scroll .box-list a:not(:last-child) {
    margin-right: 5px;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main .video-list.scroll .box-list a {
    width: 27vw;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 768px) {
  .g-body .g-main .video-list.scroll .box-list a {
    width: 42vw;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main .video-list.scroll .box-list a {
    width: 75vw;
  }
}
.g-body .g-main .video-Shorts-list .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-Shorts-list .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main .video-Shorts-list .box-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px 25px;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main .video-Shorts-list .box-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main .video-Shorts-list .box-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main .video-Shorts-list .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
  }
}
.g-body .g-main .video-Shorts-list .box-list a {
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  border: 1px #dedede solid;
}
.g-body .g-main .video-Shorts-list .box-list a .image-container::after {
  content: "";
  width: 100%;
  height: 100%;
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: url("../images/video-play.svg") no-repeat center center/auto 35px;
  background-color: rgba(0, 0, 0, 0.15);
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-Shorts-list .box-list a .image-container::after {
    background: url("../images/video-play.svg") no-repeat center center/auto 9vw;
    background-color: rgba(0, 0, 0, 0.15);
  }
}
.g-body .g-main .video-Shorts-list .box-list a img {
  transition: 0.3s;
}
.g-body .g-main .video-Shorts-list .box-list a:hover img {
  transition: 0.3s;
  transform: scale(1.1);
}
.g-body .g-main .video-Shorts-list .box-list a .video-tab,
.g-body .g-main .video-Shorts-list .box-list a .category,
.g-body .g-main .video-Shorts-list .box-list a h3 {
  display: table;
  margin: 0 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-Shorts-list .box-list a .video-tab,
  .g-body .g-main .video-Shorts-list .box-list a .category,
  .g-body .g-main .video-Shorts-list .box-list a h3 {
    margin: 0 2vw;
  }
}
.g-body .g-main .video-Shorts-list .box-list a .video-tab {
  cursor: pointer;
  font-size: 1rem;
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 5px 10px 2px;
  margin-top: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-Shorts-list .box-list a .video-tab {
    font-size: 4vw;
    padding: 0.75vw 2vw 0;
    margin-top: 3vw;
  }
}
.g-body .g-main .video-Shorts-list .box-list a h3 {
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  color: #4B2F80;
  font-size: 1.25rem;
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-Shorts-list .box-list a h3 {
    color: #333333;
    font-size: 4.5vw;
    font-weight: normal;
    margin-top: 3vw;
    margin-bottom: 3vw;
  }
}
.g-body .g-main .video-Shorts-list .box-list a .category {
  font-size: 1rem;
  color: #333333;
  border: 0;
  background: #f5f5f5;
  border-radius: 4px;
  padding: 5px 10px 2px;
  margin-bottom: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-Shorts-list .box-list a .category {
    font-size: 4vw;
    padding: 0.75vw 2vw 0;
    margin-bottom: 3.5vw;
  }
}
.g-body .g-main .video-Shorts-list .box-list a .info {
  margin: 0 20px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-Shorts-list .box-list a .info {
    margin: 0 3vw 3.5vw;
    gap: 2vw 5vw;
  }
}
.g-body .g-main .video-Shorts-list .box-list a .info .name {
  color: #aaaaaa;
  font-size: 1rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-Shorts-list .box-list a .info .name {
    font-size: 4vw;
  }
}
.g-body .g-main .video-Shorts-list .box-list a .info .category {
  margin: 0;
}
.g-body .g-main .video-Shorts-list .box-list a {
  position: relative;
}
.g-body .g-main .video-Shorts-list .box-list a .image-container {
  padding-bottom: 177%;
}
.g-body .g-main .video-Shorts-list .box-list a .image-container::before {
  content: "";
  width: 100%;
  height: 100%;
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  top: auto;
  bottom: 0;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.6);
  display: none;
}
.g-body .g-main .video-Shorts-list .box-list a h3 {
  color: #fff;
  position: absolute;
  bottom: 15px;
  margin: 0;
  padding: 15px 20px 0;
  text-shadow: 1px 1px 10px #000;
  z-index: 2;
  display: none;
}
.g-body .g-main .video-Shorts-list .box-list a .category {
  color: #fff;
  position: absolute;
  bottom: 50px;
  background-color: rgba(75, 47, 128, 0.6);
}
.g-body .g-main .video-Shorts-list .box-list a:hover .image-container::before {
  background-color: rgba(75, 47, 128, 0.6);
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-Shorts-list .box-list a .image-container::before {
    height: 12vw;
  }
  .g-body .g-main .video-Shorts-list .box-list a h3 {
    bottom: 3vw;
    padding: 0 2vw;
  }
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main .video-Shorts-list.scroll .box-list {
    display: grid;
    grid-template-columns: repeat(999, 1fr);
    overflow: auto;
    gap: 0;
  }
  .g-body .g-main .video-Shorts-list.scroll .box-list a:not(:last-child) {
    margin-right: 20px;
  }
}
@media only screen and (max-width: 1440px) and (max-width: 768px) {
  .g-body .g-main .video-Shorts-list.scroll .box-list a:not(:last-child) {
    margin-right: 15px;
  }
}
@media only screen and (max-width: 1440px) and (max-width: 450px) {
  .g-body .g-main .video-Shorts-list.scroll .box-list a:not(:last-child) {
    margin-right: 5px;
  }
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main .video-Shorts-list.scroll .box-list a {
    width: 20vw;
  }
}
@media only screen and (max-width: 1440px) and (max-width: 1024px) {
  .g-body .g-main .video-Shorts-list.scroll .box-list a {
    width: 27vw;
  }
}
@media only screen and (max-width: 1440px) and (max-width: 650px) {
  .g-body .g-main .video-Shorts-list.scroll .box-list a {
    width: 44vw;
  }
}
.g-body .g-main .video-box.Short .g-container {
  max-width: 420px;
}
.g-body .g-main .video-box.Short .video-container {
  padding-bottom: 177%;
}
.g-body .g-main .video-box .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-box .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main .video-box .g-container {
  max-width: 1400px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main .video-box .g-container {
    padding: 15px 0;
  }
}
.g-body .g-main .video-info .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-info .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main .video-info .video-title {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 30px;
  padding-bottom: 20px;
  gap: 10px;
  border-bottom: 1px dotted #cccccc;
}
.g-body .g-main .video-info .video-title .videoEngTitle,
.g-body .g-main .video-info .video-title .videoTitle {
  font-size: 2rem;
  margin-right: 10px;
  display: inline;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-info .video-title .videoEngTitle,
  .g-body .g-main .video-info .video-title .videoTitle {
    font-size: 6.5vw;
    letter-spacing: 0;
  }
}
.g-body .g-main .video-info .video-title .videoEngTitle {
  font-weight: bold;
  color: #4B2F80;
  letter-spacing: 0;
}
.g-body .g-main .video-info .video-title .videoSubTitle {
  font-size: 1.125rem;
  color: #aaaaaa;
  margin-left: 10px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-info .video-title .videoSubTitle {
    font-size: 4.5vw;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-info .video-title {
    margin-top: -15px;
    padding-bottom: 10px;
    flex-direction: column-reverse;
  }
  .g-body .g-main .video-info .video-title .videoTitle {
    margin-right: 0;
  }
  .g-body .g-main .video-info .video-title .share {
    justify-content: flex-end;
  }
}
.g-body .g-main .video-info article {
  font-size: 1.125rem;
}
.g-body .g-main .video-info article * {
  line-height: 1.7;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .video-info article {
    font-size: 4.5vw;
    max-width: 92vw;
    overflow: hidden;
  }
  .g-body .g-main .video-info article a {
    word-wrap: break-word;
  }
}
.g-body .g-main .table-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 25px;
  margin-top: 35px;
}
.g-body .g-main .table-list .table-box:nth-child(1) h4::before {
  content: "1";
}
.g-body .g-main .table-list .table-box:nth-child(2) h4::before {
  content: "2";
}
.g-body .g-main .table-list .table-box table {
  margin-top: 10px;
  text-align: center;
}
.g-body .g-main .table-list h4 {
  font-size: 1.5rem;
  color: #7D64AB;
  font-weight: bold;
}
.g-body .g-main .table-list h4::before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  width: 34px;
  height: 34px;
  border-radius: 34px;
  color: #fff;
  background-color: #7D64AB;
  text-align: center;
  margin-right: 5px;
}
.g-body .g-main .table-list h4 span {
  font-size: 1.125rem;
  color: #333333;
  margin-left: 20px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main .table-list {
    gap: 15px;
  }
  .g-body .g-main .table-list h4 {
    font-size: 1.25rem;
  }
  .g-body .g-main .table-list h4::before {
    width: 28px;
    height: 28px;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main .table-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .table-list .table-box table {
    margin-top: 1vw;
  }
  .g-body .g-main .table-list h4 {
    padding-left: 3vw;
    font-size: 6vw;
  }
  .g-body .g-main .table-list h4::before {
    width: 8vw;
    height: 8vw;
    margin-right: 2vw;
  }
  .g-body .g-main .table-list h4 span {
    font-size: 4.8vw;
    margin-left: 3vw;
  }
}
.g-body .g-main .photo-list {
  margin-top: 50px;
  border: solid 2px #fff;
  background-color: #fff;
  border-radius: 2px;
  display: flex;
  gap: 1px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main .photo-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .photo-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 10vw;
  }
}
.g-body .g-main .photo-list .image-container img {
  transition: 0.3s;
}
.g-body .g-main .photo-list .image-container:hover::after {
  content: "";
  width: 100%;
  height: 100%;
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: url("../images/i-search.svg") no-repeat center center/auto 20px;
  background-color: rgba(0, 0, 0, 0.45);
}
.g-body .g-main .photo-list .image-container:hover img {
  transition: 0.3s;
  transform: scale(1.1);
}
.g-body .g-main .photo-list .image-container {
  padding-bottom: 200px;
}
.g-body .g-main .photo-list .image-container:nth-child(n+9) {
  display: none;
}
@media only screen and (max-width: 1680px) {
  .g-body .g-main .photo-list .image-container {
    padding-bottom: 150px;
  }
}
@media only screen and (max-width: 1680px) and (max-width: 1024px) {
  .g-body .g-main .photo-list .image-container {
    padding-bottom: 100%;
  }
}
.g-body .g-main .ecam-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .ecam-list {
    gap: 5px;
  }
  .g-body .g-main .ecam-list li {
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff;
  }
}
.g-body .g-main .ecam-list h3 {
  font-size: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  font-weight: bold;
  margin-bottom: 10px;
  line-height: 1.7;
}
.g-body .g-main .ecam-list h3 .month {
  width: 80px;
  background-color: #7D64AB;
  color: #fff;
  font-size: 1.25rem;
  line-height: 2;
  text-align: center;
  border-radius: 4px;
}
.g-body .g-main .ecam-list h3 .en {
  font-size: 1.25rem;
  color: #7D64AB;
  line-height: 1.7;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .ecam-list h3 {
    padding: 5vw 3vw 0;
    font-size: 6vw;
    gap: 1vw 2vw;
    font-weight: normal;
    line-height: 1.6;
    margin-bottom: 1vw;
  }
  .g-body .g-main .ecam-list h3 .month {
    width: 20vw;
    font-size: 5vw;
    line-height: 1.9;
    height: 9vw;
  }
  .g-body .g-main .ecam-list h3 .en {
    font-size: 5vw;
    line-height: 1.6;
  }
}
.g-body .g-main .ecam-list .photo-list {
  border: solid 2px #fff;
  border-radius: 2px;
  display: flex;
  gap: 1px;
  margin-top: 15px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main .ecam-list .photo-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .ecam-list .photo-list {
    margin-top: 2vw;
  }
}
.g-body .g-main .ecam-list .photo-list .image-container img {
  transition: 0.3s;
}
.g-body .g-main .ecam-list .photo-list .image-container:hover::after {
  content: "";
  width: 100%;
  height: 100%;
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: url("../images/i-search.svg") no-repeat center center/auto 20px;
  background-color: rgba(0, 0, 0, 0.45);
}
.g-body .g-main .ecam-list .photo-list .image-container:hover img {
  transition: 0.3s;
  transform: scale(1.1);
}
.g-body .g-main .ecam-list .photo-list .image-container {
  padding-bottom: 250px;
}
@media only screen and (max-width: 1680px) {
  .g-body .g-main .ecam-list .photo-list .image-container {
    padding-bottom: 200px;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main .ecam-list .photo-list .image-container {
    padding-bottom: 150px;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main .ecam-list .photo-list .image-container {
    padding-bottom: 100%;
  }
}
.g-body .g-main .ecam-list .photo-list .image-container:nth-child(n+7) {
  display: none;
}
.g-body .g-main .ecam-list .photo-list .image-container:nth-child(6):not(:last-child)::after {
  content: "";
  width: 100%;
  height: 100%;
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: url("../images/i-plus-w.svg") no-repeat center center/auto 20px;
  background-color: rgba(0, 0, 0, 0.45);
}
.g-body .g-main .tool-list {
  font-size: 1.125rem;
  margin-bottom: 50px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .tool-list {
    margin-bottom: 10vw;
  }
}
.g-body .g-main .tool-list > li {
  display: grid;
  grid-template-columns: 300px 1fr;
  letter-spacing: 0;
  gap: 30px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main .tool-list > li {
    grid-template-columns: 1fr;
  }
}
.g-body .g-main .tool-list .image-container {
  padding-bottom: 130%;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main .tool-list .image-container {
    width: 400px;
    padding-bottom: 500px;
    margin: auto;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .tool-list .image-container {
    width: 85%;
    padding-bottom: 95vw;
  }
}
.g-body .g-main .tool-list .book-title {
  font-size: 1.75rem;
  font-weight: bold;
  margin-bottom: 25px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .tool-list .book-title {
    text-align: center;
    font-size: 5.5vw;
    margin-bottom: 6vw;
  }
}
.g-body .g-main .tool-list ol li {
  color: #333333;
  position: relative;
  padding-left: 20px;
}
.g-body .g-main .tool-list ol li::before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background-color: #FF9F40;
  left: 0;
  top: 6px;
  position: absolute;
}
.g-body .g-main .tool-list ol li:not(:last-child) {
  margin-bottom: 15px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .tool-list ol li {
    font-size: 4.8vw;
    padding-left: 7.5vw;
  }
  .g-body .g-main .tool-list ol li::before {
    width: 4vw;
    height: 4vw;
    border-radius: 4vw;
    top: 1.2vw;
    left: 1.5vw;
  }
}
.g-body .g-main .tool-list .btn {
  color: #fff;
  font-size: 1.1rem;
  border-radius: 50px;
  padding: 10px 20px 6px;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  display: flex;
  min-width: 150px;
  border: 0;
}
.g-body .g-main .tool-list .btn:hover {
  cursor: pointer;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .tool-list .btn {
    width: 55vw;
    min-width: auto;
    font-size: 5vw;
    padding: 10px 0 7px;
  }
}
.g-body .g-main .tool-list .btn {
  display: inline-block;
  text-align: center;
  background-color: #4B2F80;
  margin-top: 10px;
}
.g-body .g-main .tool-list .btn:hover {
  background-color: #7D64AB;
}
.g-body .g-main .tool-list .btn:not(:last-child) {
  margin-right: 10px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .tool-list .btn:not(:last-child) {
    margin-right: 1vw;
  }
}
.g-body .g-main .blog-FAQ-list {
  margin-bottom: 30px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .blog-FAQ-list {
    margin-bottom: 5vw;
  }
}
.g-body .g-main .blog-FAQ-list .little-title::before {
  content: "✧";
  margin-right: 7px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .blog-FAQ-list .little-title::before {
    margin-right: 2vw;
    width: auto;
    height: auto;
    background-color: transparent;
  }
}
.g-body .g-main .blog-FAQ-list ol {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.g-body .g-main .blog-FAQ-list ol li {
  position: relative;
  line-height: 1.7;
}
.g-body .g-main .blog-FAQ-list ol li::before {
  color: #7D64AB;
  content: "◆";
  left: 10px;
  top: 5px;
  position: absolute;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .blog-FAQ-list ol li::before {
    top: 3vw;
  }
}
.g-body .g-main .blog-FAQ-list ol li h3,
.g-body .g-main .blog-FAQ-list ol li h4 {
  color: #333333;
  font-weight: 600;
  background-color: #F5F5F5;
  padding: 5px 10px 5px 30px;
  border-radius: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .blog-FAQ-list ol li h3,
  .g-body .g-main .blog-FAQ-list ol li h4 {
    font-size: 5vw;
    padding: 4vw 5vw 3vw 8vw;
    border-radius: 3vw;
  }
}
.g-body .g-main .blog-FAQ-list p {
  margin: 10px 0 20px 30px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .blog-FAQ-list p {
    margin: 3vw 0 5vw 3vw;
  }
}
.g-body .g-main .course-box .box-list {
  width: 100%;
  display: flex;
  gap: 20px 25px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main .course-box .box-list {
    display: grid;
    grid-template-columns: repeat(999, 1fr);
    overflow: auto;
    gap: 0;
  }
  .g-body .g-main .course-box .box-list a:not(:last-child) {
    margin-right: 20px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 768px) {
  .g-body .g-main .course-box .box-list a:not(:last-child) {
    margin-right: 15px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main .course-box .box-list a:not(:last-child) {
    margin-right: 5px;
  }
}
.g-body .g-main .course-box .box-list a {
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  background-color: #fff;
  border: 1px #dedede solid;
}
@media only screen and (min-width: 1025px) {
  .g-body .g-main .course-box .box-list a:nth-child(n+5) {
    display: none;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main .course-box .box-list a {
    width: 42vw;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main .course-box .box-list a {
    width: 75vw;
  }
}
.g-body .g-main .course-box .box-list a img {
  transition: 0.3s;
}
.g-body .g-main .course-box .box-list a:hover img {
  transition: 0.3s;
  transform: scale(1.1);
}
.g-body .g-main .course-box .box-list a h3,
.g-body .g-main .course-box .box-list a h4,
.g-body .g-main .course-box .box-list a h5 {
  font-size: 1.1rem;
  color: #333333;
  padding: 15px 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .course-box .box-list a h3,
  .g-body .g-main .course-box .box-list a h4,
  .g-body .g-main .course-box .box-list a h5 {
    font-size: 4.5vw;
  }
}
.g-body .g-main .story-info .name {
  color: #555555;
  margin-right: 10px;
}
.g-body .g-main .story-info .site {
  color: #333333;
  background-color: #fff;
  display: inline-block;
  padding: 3px 10px 1px;
  border: 1px #dedede solid;
  border-radius: 4px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .story-info .site {
    font-size: 4vw;
    padding: 1vw 3vw 0.5vw;
    letter-spacing: 0;
  }
  .g-body .g-main .story-info .name {
    font-size: 4.2vw;
    color: #555555;
    margin-right: 1vw;
    letter-spacing: 0;
  }
}
.g-body .g-main .extra-links ul {
  display: grid;
  gap: 10px;
  padding: 20px 20px 20px 25px;
  background-color: #FFF3E7;
  border-left: #FF9F40 5px solid;
}
.g-body .g-main .extra-links ul li {
  position: relative;
  padding-left: 10px;
}
.g-body .g-main .extra-links ul li a {
  color: #333333;
}
.g-body .g-main .extra-links ul li a:hover {
  color: #FF7A00;
}
.g-body .g-main .extra-links ul li::before {
  color: #FF9F40;
  content: "◆";
  position: absolute;
  left: -10px;
}
.g-body .g-main .from-box {
  border: 1px #dedede solid;
  background-color: #fff;
  border-radius: 10px;
  padding: 50px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main .from-box {
    padding: 35px;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main .from-box {
    padding: 20px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .from-box {
    padding: 3vw 3vw 10vw;
  }
}
.g-body .g-main .from-box {
  max-width: 1200px;
  margin: auto;
}
.g-body .g-main .g-iAgree {
  display: flex;
  align-items: center;
}
.g-body .g-main .g-iAgree a {
  color: #7D64AB;
  text-decoration: underline;
}
.g-body .g-main .g-iAgree a:hover {
  color: #FF7A00;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .g-iAgree {
    font-size: 4.5vw;
  }
}
.g-body .g-main .word-focus {
  color: #7D64AB;
}
.g-body .g-main .img-code {
  width: auto;
  max-width: 110px;
  height: 40px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .img-code {
    max-width: 95px;
  }
}
.g-body .g-main .p-focus {
  font-size: 1.5rem !important;
  font-weight: bold;
  text-align: center !important;
  transform: skewX(-10deg);
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .p-focus {
    font-size: 5.5vw !important;
  }
}
.g-body .g-main .collapse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.g-body .g-main .collapse .little-title {
  width: calc(100% - 65px);
  margin-bottom: 0;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .collapse .little-title {
    font-size: 6.5vw;
  }
  .g-body .g-main .collapse .little-title::before {
    display: none;
  }
}
.g-body .g-main .collapse .btn-toggle {
  cursor: pointer;
  padding: 5px 15px 3px;
  border: 1px #dedede solid;
  border-radius: 4px;
}
.g-body .g-main .collapse .btn-toggle::after {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  width: 12px;
  height: 12px;
  background-image: url(../images/arrow.svg);
  transition: 0.3s;
  transform: rotate(180deg);
}
.g-body .g-main .collapse .btn-toggle.active::after {
  transform: rotate(360deg);
  transition: 0.3s;
}
.g-body .g-main .name-box {
  position: relative;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main .name-box {
    margin: auto;
  }
}
.g-body .g-main .name-box .bg-move {
  position: relative;
  top: 5px;
  left: -50px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main .name-box .bg-move {
    top: 25px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 768px) {
  .g-body .g-main .name-box .bg-move {
    top: 10px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main .name-box .bg-move {
    top: 5px;
    left: -50px;
  }
}
.g-body .g-main .name-box .bg-move div {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  border: 3px solid #f5edff;
  animation: 3s infinite ease-in-out;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .name-box .bg-move div {
    width: 3.5vw;
    height: 3.5vw;
    border: 1vw solid #d2d2ff;
  }
}
.g-body .g-main .name-box .bg-move div:nth-of-type(1) {
  animation-name: move1;
}
@keyframes move1 {
  0% {
    top: 50px;
    left: 0;
  }
  30% {
    top: 0;
    left: 25px;
  }
  60% {
    top: 50px;
    left: 50px;
  }
  100% {
    top: 50px;
    left: 0;
  }
}
@media only screen and (max-width: 1024px) {
  @keyframes move1 {
    0% {
      top: 40px;
      left: 0;
    }
    30% {
      top: 0;
      left: 20px;
    }
    60% {
      top: 40px;
      left: 40px;
    }
    100% {
      top: 40px;
      left: 0;
    }
  }
}
@media only screen and (max-width: 450px) {
  @keyframes move1 {
    0% {
      top: 10vw;
      left: 0;
    }
    30% {
      top: 0;
      left: 5vw;
    }
    60% {
      top: 10vw;
      left: 10vw;
    }
    100% {
      top: 10vw;
      left: 0;
    }
  }
}
.g-body .g-main .name-box .bg-move div:nth-of-type(2) {
  animation-name: move2;
}
@keyframes move2 {
  0% {
    top: 0;
    left: 25px;
  }
  30% {
    top: 50px;
    left: 50px;
  }
  60% {
    top: 50px;
    left: 0;
  }
  100% {
    top: 0;
    left: 25px;
  }
}
@media only screen and (max-width: 1024px) {
  @keyframes move2 {
    0% {
      top: 0;
      left: 20px;
    }
    30% {
      top: 40px;
      left: 40px;
    }
    60% {
      top: 40px;
      left: 0;
    }
    100% {
      top: 0;
      left: 20px;
    }
  }
}
@media only screen and (max-width: 450px) {
  @keyframes move2 {
    0% {
      top: 0;
      left: 5vw;
    }
    30% {
      top: 10vw;
      left: 10vw;
    }
    60% {
      top: 10vw;
      left: 0;
    }
    100% {
      top: 0;
      left: 5vw;
    }
  }
}
.g-body .g-main .name-box .bg-move div:nth-of-type(3) {
  animation-name: move3;
}
@keyframes move3 {
  0% {
    top: 50px;
    left: 50px;
  }
  30% {
    top: 50px;
    left: 0;
  }
  60% {
    top: 0;
    left: 25px;
  }
  100% {
    top: 50px;
    left: 50px;
  }
}
@media only screen and (max-width: 1024px) {
  @keyframes move3 {
    0% {
      top: 40px;
      left: 40px;
    }
    30% {
      top: 40px;
      left: 0;
    }
    60% {
      top: 0;
      left: 20px;
    }
    100% {
      top: 40px;
      left: 40px;
    }
  }
}
@media only screen and (max-width: 450px) {
  @keyframes move3 {
    0% {
      top: 10vw;
      left: 10vw;
    }
    30% {
      top: 10vw;
      left: 0;
    }
    60% {
      top: 0;
      left: 5vw;
    }
    100% {
      top: 10vw;
      left: 10vw;
    }
  }
}
.g-body .g-main.g-courses {
  background-color: #EEEEEE;
}
.g-body .g-main.g-courses .visual {
  background-image: linear-gradient(to bottom, rgba(20, 0, 30, 0.75), rgba(20, 0, 30, 0.5), rgba(20, 0, 30, 0.5), rgba(20, 0, 30, 0.7)), url(../images/page-title.webp);
  background-position: bottom 30% center;
}
.g-body .g-main.g-courses .search .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-courses .search .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main.g-courses .search .g-container {
  padding-top: 0;
  display: grid;
  gap: 50px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-courses .search .g-container {
    gap: 20px;
  }
}
.g-body .g-main.g-courses .search .search-list {
  grid-template-columns: 32% auto;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-courses .search .search-list .label-list span {
    width: 100%;
    display: block;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.g-courses .search .search-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-courses .search .search-list .inlineflex-20 {
    flex-direction: column;
  }
}
.g-body .g-main.g-courses .search .online-box {
  min-height: 13.2vh;
}
.g-body .g-main.g-courses .search .btn-search {
  margin: auto;
}
.g-body .g-main.g-courses .course-list .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-courses .course-list .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main.g-courses .course-list .g-container {
  display: grid;
  position: relative;
}
.g-body .g-main.g-courses .course-list .free-list {
  padding-top: 5px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.g-courses .course-list .free-list {
    padding-top: 30px;
  }
}
.g-body .g-main.g-courses .course-list .free-list .table-search {
  width: 100%;
  max-width: 180px;
  position: absolute;
  right: 0;
  top: 0;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.g-courses .course-list .free-list .table-search {
    top: -60px;
    max-width: 100%;
  }
}
.g-body .g-main.g-courses .course-list .free-list .table-search select {
  border: 1px #dedede solid;
  border-radius: 50px;
  padding: 0 20px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.g-courses .course-list .free-list .table-search select {
    text-align: center;
    padding: 0;
    max-width: 100%;
    border: 0;
    border-bottom: 1px #dedede solid;
    border-radius: 0;
  }
}
.g-body .g-main.g-courses .course-list h3 {
  font-size: 1.375rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-courses .course-list h3 {
    font-size: 5.5vw;
    margin-bottom: 5vw;
  }
}
.g-body .g-main.g-courses .course-list h3 span {
  font-weight: bold;
  color: #4B2F80;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-courses .course-list h3 span {
    font-size: 5.5vw;
  }
}
.g-body .g-main.g-courses .course-list table {
  font-size: 1.1rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-courses .course-list table {
    font-size: 4.8vw;
  }
  .g-body .g-main.g-courses .course-list table * {
    letter-spacing: 0;
  }
}
.g-body .g-main.g-courses .course-list table td,
.g-body .g-main.g-courses .course-list table th {
  text-align: center;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-courses .course-list table td,
  .g-body .g-main.g-courses .course-list table th {
    text-align: left;
    padding: 8px 15px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-courses .course-list table td,
  .g-body .g-main.g-courses .course-list table th {
    padding: 0.5vw 3vw;
  }
}
.g-body .g-main.g-courses .course-list table th:not(:last-child) {
  border-right: 1px #ffffff solid;
}
.g-body .g-main.g-courses .course-list table thead {
  color: #fff;
  background-color: #555555;
  white-space: nowrap;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-courses .course-list table thead {
    display: none;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-courses .course-list table tbody {
    display: grid;
    gap: 20px;
  }
}
.g-body .g-main.g-courses .course-list table tbody tr {
  border-top: 2px solid #eee;
  background-color: #fff;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-courses .course-list table tbody tr {
    border-radius: 10px;
    overflow: hidden;
    display: grid;
    padding: 10px 0 20px;
  }
}
.g-body .g-main.g-courses .course-list table tbody tr:last-child {
  border-bottom: 1px #dedede solid;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-courses .course-list table tbody tr:last-child {
    border-bottom: 0;
  }
}
.g-body .g-main.g-courses .course-list table tbody tr.No-information {
  background-color: #FFF3E7;
}
.g-body .g-main.g-courses .course-list table tbody tr.No-information td {
  color: #333333;
  text-align: center;
  display: table-cell;
  line-height: 1.5;
}
.g-body .g-main.g-courses .course-list table tbody td {
  color: #000;
}
.g-body .g-main.g-courses .course-list table tbody td:not(:first-child) {
  white-space: nowrap;
}
.g-body .g-main.g-courses .course-list table tbody td:first-child {
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-height: 2.5;
  text-align: left;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-courses .course-list table tbody td:first-child {
    line-height: 2;
  }
}
.g-body .g-main.g-courses .course-list table tbody td a {
  color: #FF7A00;
}
.g-body .g-main.g-courses .course-list table tbody td a:hover {
  color: #7D64AB;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-courses .course-list table tbody td:not(:last-child)::before {
    content: "";
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    width: 25px;
    height: 25px;
    margin-right: 15px;
    position: relative;
    top: 5px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main.g-courses .course-list table tbody td:not(:last-child)::before {
    width: 5.5vw;
    height: 5.5vw;
    margin-right: 3vw;
    top: 0.7vw;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-courses .course-list table tbody td:nth-child(1)::before {
    background-image: url(../images/i-book.svg);
  }
  .g-body .g-main.g-courses .course-list table tbody td:nth-child(2)::before {
    background-image: url(../images/i-calendar.svg);
  }
  .g-body .g-main.g-courses .course-list table tbody td:nth-child(3)::before {
    background-image: url(../images/i-time2.svg);
  }
  .g-body .g-main.g-courses .course-list table tbody td:nth-child(4)::before {
    background-image: url(../images/i-school2.svg);
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-courses .course-list table .btn-table {
    margin: auto;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-courses .course-list table .btn-table {
    margin-top: 5vw;
  }
}
.g-body .g-main.g-courses .course-list .btn-list {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 50px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-courses .course-list .btn-list {
    flex-direction: column;
    margin-top: 10vw;
  }
}
.g-body .g-main.g-courses .course-list .btn-more {
  color: #fff;
  font-size: 1.1rem;
  border-radius: 50px;
  padding: 10px 20px 6px;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  display: flex;
  min-width: 150px;
  border: 0;
}
.g-body .g-main.g-courses .course-list .btn-more:hover {
  cursor: pointer;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-courses .course-list .btn-more {
    width: 55vw;
    min-width: auto;
    font-size: 5vw;
    padding: 10px 0 7px;
  }
}
.g-body .g-main.g-courses .course-list .btn-more {
  color: #4B2F80;
  width: 155px;
  border: 2px solid #4B2F80;
  margin: 50px auto 0;
  background-color: #fff;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-courses .course-list .btn-more {
    margin: 10vw auto 0;
  }
}
.g-body .g-main.g-courses .course-list .btn-more::before {
  content: "";
  width: 17px;
  height: 17px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  margin-right: 7px;
  position: relative;
  display: table;
  top: -2px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-courses .course-list .btn-more::before {
    width: 4.5vw;
    height: 4.5vw;
  }
}
.g-body .g-main.g-courses .course-list .btn-more::before {
  background-image: url(../images/i-plus.svg);
}
.g-body .g-main.g-courses .course-list .btn-more:hover {
  color: #fff;
  background-color: #4B2F80;
}
.g-body .g-main.g-courses .course-list .btn-more:hover::before {
  background-image: url(../images/i-plus-w.svg);
}
.g-body .g-main.g-courses .course-list .btn-more {
  margin: 0;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-courses .course-list .btn-more {
    margin: 0 auto;
  }
}
.g-body .g-main.g-courses .course-list .btn-online-more {
  color: #fff;
  font-size: 1.1rem;
  border-radius: 50px;
  padding: 10px 20px 6px;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  display: flex;
  min-width: 150px;
  border: 0;
}
.g-body .g-main.g-courses .course-list .btn-online-more:hover {
  cursor: pointer;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-courses .course-list .btn-online-more {
    width: 55vw;
    min-width: auto;
    font-size: 5vw;
    padding: 10px 0 7px;
  }
}
.g-body .g-main.g-courses .course-list .btn-online-more {
  text-align: center;
  background-color: #FF7A00;
  max-width: 155px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-courses .course-list .btn-online-more {
    margin: auto;
    max-width: 55vw;
  }
}
.g-body .g-main.g-courses .course-list .btn-online-more:hover {
  background-color: #FF9F40;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.g-courses .page-margin {
    min-height: 98px;
    background-color: #fff !important;
  }
}
.g-body .g-main.g-branch-school {
  background-color: #EEEEEE;
}
.g-body .g-main.g-branch-school .visual {
  background-image: linear-gradient(to bottom, rgba(20, 0, 30, 0.75), rgba(20, 0, 30, 0.5), rgba(20, 0, 30, 0.5), rgba(20, 0, 30, 0.7)), url(../images/page-title2.webp);
}
.g-body .g-main.g-branch-school .visual h1 {
  display: none;
}
.g-body .g-main.g-branch-school .page-margin .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-branch-school .page-margin .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main.g-branch-school .page-margin .box-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 35px 25px;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.g-branch-school .page-margin .box-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 1440px) and (max-width: 1024px) {
  .g-body .g-main.g-branch-school .page-margin .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 1440px) and (max-width: 650px) {
  .g-body .g-main.g-branch-school .page-margin .box-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.g-body .g-main.g-branch-school .page-margin .box-list li {
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.g-body .g-main.g-branch-school .page-margin .box-list li .g-address {
  padding: 25px 30px 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-branch-school .page-margin .box-list li .g-address {
    padding: 7vw 10vw;
  }
  .g-body .g-main.g-branch-school .page-margin .box-list li .g-address .tel::before,
  .g-body .g-main.g-branch-school .page-margin .box-list li .g-address .address::before {
    width: 5vw;
    height: 5vw;
    margin-right: 3vw;
    top: 1vw;
  }
}
.g-body .g-main.g-branch-school .page-margin .box-list li .g-address h3 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 15px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-branch-school .page-margin .box-list li .g-address h3 {
    font-size: 1.375rem;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-branch-school .page-margin .box-list li .g-address h3 {
    font-weight: normal;
    font-size: 6vw;
    margin-bottom: 2vw;
  }
}
.g-body .g-main.g-branch-school .page-margin .box-list li .icon-list a {
  z-index: 1;
}
.g-body .g-main.g-branch-school .page-margin .icon-list {
  height: 50px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background-color: #AB91DD;
  gap: 1px;
}
.g-body .g-main.g-branch-school .page-margin .icon-list a {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  background-size: auto 50%;
  cursor: pointer;
  background-color: #7D64AB;
}
.g-body .g-main.g-branch-school .page-margin .icon-list a:hover {
  background-color: #FF7A00;
}
.g-body .g-main.g-branch-school .page-margin .icon-list a.btn-search-courses {
  background-image: url(../images/i-search.svg);
}
.g-body .g-main.g-branch-school .page-margin .icon-list a.btn-branch-school {
  background-image: url(../images/i-school.svg);
}
.g-body .g-main.g-branch-school .page-margin .icon-list a.btn-query-courses {
  background-image: url(../images/i-message.svg);
  background-size: auto 55%;
}
.g-body .g-main.g-branch-school .page-margin .icon-list a.btn-map {
  background-image: url(../images/i-map.svg);
}
.g-body .g-main.g-branch-school .registion .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-branch-school .registion .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main.g-branch-school .registion .table-box {
  display: none;
}
.g-body .g-main.g-branch-school .registion .table-article td[rowspan] {
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.g-branch-school .registion .table-article td[rowspan] {
    background-color: #F6F1FF;
    padding: 10px 3px;
    border-bottom: 1px #dedede solid;
  }
}
.g-body .g-main.g-branch-school .registion .table-article td:nth-last-of-type(1),
.g-body .g-main.g-branch-school .registion .table-article td:nth-last-of-type(3),
.g-body .g-main.g-branch-school .registion .table-article td[rowspan] {
  white-space: nowrap;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.g-branch-school .registion .table-article td {
    text-align: left;
  }
  .g-body .g-main.g-branch-school .registion .table-article thead {
    display: none;
  }
  .g-body .g-main.g-branch-school .registion .table-article tbody {
    border-bottom: 1px #dedede solid;
  }
  .g-body .g-main.g-branch-school .registion .table-article tbody tr {
    display: block;
    border: 1px #dedede solid;
    border-bottom: 0;
  }
  .g-body .g-main.g-branch-school .registion .table-article tbody td,
  .g-body .g-main.g-branch-school .registion .table-article tbody th {
    display: block;
    text-align: left;
    border: 0;
  }
  .g-body .g-main.g-branch-school .registion .table-article tbody td {
    padding: 3px 15px 3px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.g-branch-school .registion .table-article tbody td {
    padding: 1vw 3vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.g-branch-school .registion .table-article tbody td:nth-of-type(1) {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.g-branch-school .registion .table-article tbody td:nth-of-type(1) {
    padding-top: 5vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.g-branch-school .registion .table-article tbody td:nth-last-of-type(1) {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.g-branch-school .registion .table-article tbody td:nth-last-of-type(1) {
    padding-bottom: 5vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.g-branch-school .registion .table-article td:nth-last-of-type(3) {
    color: #7D64AB;
    padding-top: 15px;
    font-size: 1.1rem;
    font-weight: bold;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.g-branch-school .registion .table-article td:nth-last-of-type(3) {
    font-size: 5.5vw;
  }
}
.g-body .g-main.g-branch-page .visual {
  background-image: linear-gradient(to bottom, rgba(20, 0, 30, 0.75), rgba(20, 0, 30, 0.5), rgba(20, 0, 30, 0.5), rgba(20, 0, 30, 0.7)), url(../images/page-title2.webp);
  background-position: top 47% center;
}
.g-body .g-main.g-branch-page .fixed {
  position: fixed;
  top: 105px;
}
.g-body .g-main.g-branch-page .google-map360,
.g-body .g-main.g-branch-page #google-map {
  line-height: 0;
}
.g-body .g-main.g-branch-page .google-map360 iframe,
.g-body .g-main.g-branch-page #google-map iframe {
  width: 100%;
  height: 480px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.g-branch-page .google-map360 iframe,
  .g-body .g-main.g-branch-page #google-map iframe {
    height: 400px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-branch-page .google-map360 iframe,
  .g-body .g-main.g-branch-page #google-map iframe {
    height: 300px;
  }
}
.g-body .g-main.g-branch-page .photo {
  position: relative;
}
.g-body .g-main.g-branch-page .photo .image-container {
  padding-bottom: 400px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-branch-page .photo .image-container {
    padding-bottom: 100%;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-branch-page .photo .image-container {
    padding-bottom: 70%;
  }
}
.g-body .g-main.g-branch-page .photo .owl-nav .owl-prev,
.g-body .g-main.g-branch-page .photo .owl-nav .owl-next {
  width: 22px;
  height: 22px;
  border-radius: 22px;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  top: 49%;
}
.g-body .g-main.g-branch-page .photo .owl-nav .owl-prev {
  left: 2.5%;
}
.g-body .g-main.g-branch-page .photo .owl-nav .owl-next {
  right: 2.5%;
}
.g-body .g-main.g-branch-page .photo .owl-dots {
  bottom: 20px;
}
.g-body .g-main.g-branch-page article .school-title {
  display: flex;
  align-items: center;
}
.g-body .g-main.g-branch-page article .school-title .big-title {
  margin-right: 20px;
}
.g-body .g-main.g-branch-page article .school-box {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
}
.g-body .g-main.g-branch-page article .g-address {
  margin: 15px 20px 25px 0;
}
.g-body .g-main.g-branch-page article .btn-box {
  margin: 0 7px 25px 0;
}
.g-body .g-main.g-branch-page article .traffic {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}
.g-body .g-main.g-branch-page article .traffic .How-go {
  line-height: 2;
  width: 70%;
}
.g-body .g-main.g-branch-page article .traffic .map {
  width: 30%;
  max-width: 350px;
}
.g-body .g-main.g-branch-page article .traffic .map .image-container {
  padding-bottom: 100%;
}
@media only screen and (max-width: 1300px) {
  .g-body .g-main.g-branch-page article .traffic .How-go {
    width: 55%;
  }
  .g-body .g-main.g-branch-page article .traffic .map {
    width: 45%;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.g-branch-page article .traffic {
    display: grid;
  }
  .g-body .g-main.g-branch-page article .traffic .How-go {
    width: 100%;
  }
  .g-body .g-main.g-branch-page article .traffic .map {
    width: 100%;
    max-width: 400px;
    margin: auto;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-branch-page article {
    padding: 0 3vw;
  }
  .g-body .g-main.g-branch-page article .school-title {
    flex-direction: column;
  }
  .g-body .g-main.g-branch-page article .school-title .big-title {
    letter-spacing: 0;
    margin: 0;
  }
  .g-body .g-main.g-branch-page article .school-box {
    flex-direction: column;
    align-items: start;
  }
  .g-body .g-main.g-branch-page article .g-address {
    margin: 15px auto 40px;
  }
  .g-body .g-main.g-branch-page article .btn-box {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 0 40px;
  }
  .g-body .g-main.g-branch-page article .btn-search {
    width: 60vw;
  }
}
.g-body .g-main.g-branch-page aside figure {
  position: sticky;
  top: 115px;
}
.g-body .g-main.g-branch-page #main-content,
.g-body .g-main.g-branch-page #inquire,
.g-body .g-main.g-branch-page #google-map {
  scroll-margin-top: 105px;
}
.g-body .g-main.g-branch-page #main-content .g-container,
.g-body .g-main.g-branch-page #inquire .g-container,
.g-body .g-main.g-branch-page #google-map .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-branch-page #main-content .g-container,
  .g-body .g-main.g-branch-page #inquire .g-container,
  .g-body .g-main.g-branch-page #google-map .g-container {
    padding: 12vw 0 15vw;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-branch-page #inquire .content-title {
    font-size: 6.5vw;
    letter-spacing: 1px;
  }
}
.g-body .g-main.g-branch-page #inquire .g-iAgree {
  margin-top: 30px;
}
.g-body .g-main.g-branch-page #inquire .btn-normal {
  margin: auto;
  margin-top: 30px;
}
.g-body .g-main.g-branch-page #google-map {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-branch-page #google-map {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main.g-branch-page #google-map {
  padding-bottom: 0 !important;
}
.g-body .g-main.g-branch-page #google-map iframe {
  border-top: 1px #dedede solid !important;
}
.g-body .g-main.g-blog .visual {
  background-image: linear-gradient(to bottom, rgba(20, 0, 30, 0.75), rgba(20, 0, 30, 0.5), rgba(20, 0, 30, 0.5), rgba(20, 0, 30, 0.7)), url(../images/page-title3.webp);
  background-position: bottom 20% center;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.g-blog .visual {
    background-position: bottom 20% right 5%;
  }
}
.g-body .g-main.g-blog .ad-list,
.g-body .g-main.g-blog .ad-list .g-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.g-body .g-main.g-blog .ad-list a,
.g-body .g-main.g-blog .ad-list .g-container a {
  width: 100%;
  max-width: 310px;
  background-color: #fff;
  border: 1px #dedede solid;
}
@media only screen and (min-width: 600px) {
  .g-body .g-main.g-blog .ad-list a:nth-child(n+3),
  .g-body .g-main.g-blog .ad-list .g-container a:nth-child(n+3) {
    display: none;
  }
}
.g-body .g-main.g-blog .ad-list .image-container,
.g-body .g-main.g-blog .ad-list .g-container .image-container {
  padding-bottom: 112%;
}
.g-body .g-main.g-blog .ad-list span,
.g-body .g-main.g-blog .ad-list .g-container span {
  display: block;
  color: #333333;
  padding: 10px 10px 15px;
  width: 100%;
}
.g-body .g-main.g-blog .ad-list span::after,
.g-body .g-main.g-blog .ad-list .g-container span::after {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  width: 25px;
  height: 25px;
  background-image: url(../images/i-enter.svg);
  position: relative;
  top: 5px;
  left: 5px;
}
.g-body .g-main.g-blog section.ad-list {
  display: none;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-blog section.ad-list {
    display: block;
  }
  .g-body .g-main.g-blog section.ad-list .g-container {
    padding: 80px 0 90px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main.g-blog section.ad-list .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main.g-blog .chief .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-blog .chief .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main.g-blog .chief .main-aside {
  max-width: 1400px;
  grid-template-columns: auto 300px;
}
.g-body .g-main.g-blog .chief .main-aside .ad-list a {
  border: 0;
}
@media only screen and (max-width: 1680px) {
  .g-body .g-main.g-blog .chief .main-aside {
    grid-template-columns: auto 280px;
  }
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.g-blog .chief .main-aside {
    grid-template-columns: auto 260px;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-blog .chief .main-aside {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .g-body .g-main.g-blog .chief .main-aside .ad-list {
    display: none;
  }
}
.g-body .g-main.g-blog .chief .main-top {
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
}
.g-body .g-main.g-blog .chief .main-top:hover .caption h3 {
  color: #7D64AB;
}
.g-body .g-main.g-blog .chief .main-top .image-container {
  padding-bottom: 52.25%;
}
.g-body .g-main.g-blog .chief .main-top .caption {
  padding: 20px 30px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-blog .chief .main-top .caption {
    padding: 5vw 3vw;
  }
}
.g-body .g-main.g-blog .chief .main-top .caption h3 {
  font-size: 1.75rem;
  font-weight: bold;
  color: #333333;
  margin-bottom: 10px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-blog .chief .main-top .caption h3 {
    font-size: 6.2vw;
  }
}
.g-body .g-main.g-blog .chief .main-top .caption span {
  color: #333333;
  background-color: #F5F5F5;
  border-radius: 4px;
  display: inline-block;
  padding: 3px 10px;
  margin-left: 10px;
}
.g-body .g-main.g-blog .chief .main-top .caption p {
  color: #333333;
  font-size: 1.1rem;
  margin-top: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-blog .chief .main-top .caption p {
    font-size: 4.6vw;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-blog .chief .ad-list span {
    font-size: 4.6vw;
    padding: 3vw 5vw;
  }
  .g-body .g-main.g-blog .chief .ad-list span::after {
    width: 7vw;
    height: 7vw;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-blog .hot-list .box-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: auto;
  }
  .g-body .g-main.g-blog .hot-list .box-list a {
    width: 27vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.g-blog .hot-list .box-list a {
    width: 42vw;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-blog .hot-list .box-list a {
    width: 75vw;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-blog .hot-list .box-list {
    display: grid;
    grid-template-columns: repeat(999, 1fr);
    overflow: auto;
    gap: 0;
  }
  .g-body .g-main.g-blog .hot-list .box-list a:not(:last-child) {
    margin-right: 20px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 768px) {
  .g-body .g-main.g-blog .hot-list .box-list a:not(:last-child) {
    margin-right: 15px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main.g-blog .hot-list .box-list a:not(:last-child) {
    margin-right: 5px;
  }
}
@media only screen and (min-width: 1025px) {
  .g-body .g-main.g-blog .hot-list.blog-list .box-list a:nth-child(n+5) {
    display: none;
  }
}
.g-body .g-main.g-blog .blog-page .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-blog .blog-page .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main.g-blog .blog-page .g-container {
  max-width: 1400px;
  font-size: 1.1rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-blog .blog-page .g-container {
    font-size: 5vw;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-blog .blog-page .main-aside {
    padding: 10vw 2vw;
  }
}
.g-body .g-main.g-blog .blog-page .main-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.g-body .g-main.g-blog .blog-page .main-top {
  display: grid;
  gap: 20px;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.g-blog .blog-page .main-top .big-title {
    margin-bottom: 0;
  }
}
.g-body .g-main.g-blog .blog-page .main-top p {
  line-height: 1.7;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-blog .blog-page .main-top p {
    letter-spacing: 0;
    padding-left: 1.5vw;
  }
}
.g-body .g-main.g-blog .blog-page .main-top .detail {
  justify-content: space-between;
  gap: 10px 20px;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.g-blog .blog-page .main-top .detail {
    gap: 10px;
    align-items: flex-end;
  }
}
.g-body .g-main.g-blog .blog-page aside .hot-list {
  margin-top: 30px;
}
.g-body .g-main.g-blog .blog-page .ad-list {
  position: sticky;
  top: 0;
}
.g-body .g-main.g-blog .blog-page .socialmedia-list {
  position: sticky;
  top: 65px;
}
.g-body .g-main.g-blog .blog-page .blog-banner {
  display: grid;
  gap: 10px;
  margin: auto;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-blog .blog-page .blog-banner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 25px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 768px) {
  .g-body .g-main.g-blog .blog-page .blog-banner {
    gap: 15px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main.g-blog .blog-page .blog-banner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
  }
}
.g-body .g-main.g-blog .blog-page .blog-banner .image-container {
  padding-bottom: 29.9%;
}
@media screen and (min-width: 451px) {
  .g-body .g-main.g-blog .blog-page .blog-banner a:nth-child(n+6) {
    display: none;
  }
}
@media screen and (min-width: 451px) and (max-width: 1024px) {
  .g-body .g-main.g-blog .blog-page .blog-banner a:nth-child(n+5) {
    display: none;
  }
}
.g-body .g-main.g-blog .blog-page .hot-list {
  margin-bottom: 30px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-blog .blog-page .hot-list {
    display: grid;
  }
}
.g-body .g-main.g-blog .blog-page .hot-list .box-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px 25px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-blog .blog-page .hot-list .box-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(999, 1fr);
    overflow: auto;
    gap: 0;
  }
  .g-body .g-main.g-blog .blog-page .hot-list .box-list a:not(:last-child) {
    margin-right: 20px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 768px) {
  .g-body .g-main.g-blog .blog-page .hot-list .box-list a:not(:last-child) {
    margin-right: 15px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main.g-blog .blog-page .hot-list .box-list a:not(:last-child) {
    margin-right: 5px;
  }
}
.g-body .g-main.g-blog .blog-page .hot-list .box-list a {
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  border: 1px #dedede solid;
  padding-bottom: 20px;
}
.g-body .g-main.g-blog .blog-page .hot-list .box-list a .image-container {
  padding-bottom: 52.3%;
}
.g-body .g-main.g-blog .blog-page .hot-list .box-list a .image-container img {
  transition: 0.3s;
}
.g-body .g-main.g-blog .blog-page .hot-list .box-list a:hover img {
  transition: 0.3s;
  transform: scale(1.1);
}
.g-body .g-main.g-blog .blog-page .hot-list .box-list a h3,
.g-body .g-main.g-blog .blog-page .hot-list .box-list a h4 {
  font-size: 1.125rem;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  color: #333333;
  padding: 20px 20px 0 20px;
}
.g-body .g-main.g-blog .blog-page .hot-list .box-list a p {
  color: #333333;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  padding: 20px;
  padding-bottom: 0;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-blog .blog-page .hot-list .box-list a {
    padding-bottom: 5vw;
  }
  .g-body .g-main.g-blog .blog-page .hot-list .box-list a h3,
  .g-body .g-main.g-blog .blog-page .hot-list .box-list a h4 {
    font-size: 4.5vw;
    padding: 3vw 2vw 0 2vw;
  }
  .g-body .g-main.g-blog .blog-page .hot-list .box-list a p {
    font-size: 4.5vw;
    padding: 3vw 2vw 0 2vw;
  }
}
.g-body .g-main.g-blog .search-list .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-blog .search-list .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main.g-blog .search-list .box-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 25px;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.g-blog .search-list .box-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 1440px) and (max-width: 768px) {
  .g-body .g-main.g-blog .search-list .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}
@media only screen and (max-width: 1440px) and (max-width: 450px) {
  .g-body .g-main.g-blog .search-list .box-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
  }
}
.g-body .g-main.g-blog .search-list .box-list > li {
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 320px auto;
  border: 1px #dedede solid;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.g-blog .search-list .box-list > li {
    display: flex;
    flex-direction: column;
  }
}
.g-body .g-main.g-blog .search-list .box-list .box {
  padding: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-blog .search-list .box-list .box {
    padding: 5vw 3vw;
  }
}
.g-body .g-main.g-blog .search-list .box-list .image-container {
  padding-bottom: 0;
  height: 100%;
}
.g-body .g-main.g-blog .search-list .box-list .image-container:hover img {
  transition: 0.3s;
  transform: scale(1.1);
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.g-blog .search-list .box-list .image-container {
    padding-bottom: 52.25%;
    height: 0;
  }
}
.g-body .g-main.g-blog .search-list .box-list h3 {
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  color: #333333;
  font-size: 1.5rem;
  font-weight: bold;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.g-blog .search-list .box-list h3 {
    font-size: 1.25rem;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-blog .search-list .box-list h3 {
    font-size: 5.5vw;
  }
}
.g-body .g-main.g-blog .search-list .box-list p {
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  color: #555555;
  height: 45px;
  margin: 15px 0;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-blog .search-list .box-list p {
    height: 13vw;
    margin: 3vw 0;
  }
}
.g-body .g-main.g-blog .search-list .box-list p a {
  color: #555555;
}
.g-body .g-main.g-blog .search-list .box-list .tag {
  gap: 5px 10px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-blog .search-list .box-list .tag {
    gap: 2vw 3vw;
  }
}
.g-body .g-main.g-blog .search-list .search-title,
.g-body .g-main.g-blog .search-list .search-title span {
  text-align: center;
  font-size: 1.75rem;
  font-weight: bold;
  margin-bottom: 25px;
}
.g-body .g-main.g-blog .search-list .search-title span,
.g-body .g-main.g-blog .search-list .search-title span span {
  color: #7D64AB;
  margin-right: 5px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-blog .search-list .search-title,
  .g-body .g-main.g-blog .search-list .search-title span {
    font-size: 5.5vw;
    margin-bottom: 5vw;
  }
}
.g-body .g-main.g-blog .search-list .not-found {
  font-size: 1.1rem;
  background-color: #FFF3E7;
  text-align: center;
  padding: 10px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-blog .search-list .not-found {
    font-size: 4.8vw;
  }
}
.g-body .g-main.g-blog .search-list .search-hot {
  margin-top: 50px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-blog .search-list .search-hot {
    margin-top: 12vw;
    padding: 0 0 0 3vw;
  }
}
.g-body .g-main.g-blog .search-list .search-hot .tag-list {
  margin-top: 15px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-blog .search-list .search-hot .tag-list {
    margin-top: 3vw;
  }
}
.g-body .g-main.g-blog .search-list .search-hot .tag-list a {
  padding: 7px 15px 5px;
}
.g-body .g-main.g-blog .search-list .search-hot .tag-list a:hover {
  color: #FF7A00;
  background-color: #FFF3E7;
}
.g-body .g-main.g-blog .search-list .s-title {
  font-size: 1.375rem;
  font-weight: bold;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-blog .search-list .s-title {
    font-size: 5.5vw;
  }
}
.g-body .g-main.g-blog .detail,
.g-body .g-main.g-blog .detail-box,
.g-body .g-main.g-blog .tag {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.g-body .g-main.g-blog .detail-box {
  gap: 10px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-blog .detail-box {
    gap: 2vw;
  }
}
.g-body .g-main.g-blog .tag {
  gap: 15px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-blog .tag {
    gap: 2vw;
  }
}
.g-body .g-main.g-blog .tag::before {
  content: "｜";
  position: relative;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-blog .tag::before {
    display: none;
  }
}
.g-body .g-main.g-blog .tag li {
  white-space: nowrap;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-blog .tag li {
    font-size: 4.5vw;
  }
}
.g-body .g-main.g-blog .tag li a {
  color: #7D64AB;
}
.g-body .g-main.g-blog .tag li a::before {
  content: "#";
  margin-right: 3px;
}
.g-body .g-main.g-blog .tag li:hover a {
  color: #FF7A00;
}
.g-body .g-main.g-toeic-free-courses .visual {
  background-image: linear-gradient(to bottom, rgba(20, 0, 30, 0.75), rgba(20, 0, 30, 0.5), rgba(20, 0, 30, 0.5), rgba(20, 0, 30, 0.7)), url(../images/page-title6.webp);
  background-position: bottom 42% center;
}
.g-body .g-main.g-toeic-free-courses .visual h2 {
  display: none;
}
.g-body .g-main.g-toeic-free-courses .select-toggle::after {
  content: "影音\a類別\a";
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.g-toeic-free-courses .select-toggle::after {
    content: "類別";
  }
}
.g-body .g-main.g-toeic-free-courses .select-box .option-list {
  justify-content: center;
}
.g-body .g-main.g-toeic-free-courses aside > div:nth-last-of-type(1) {
  position: sticky;
  top: 60px;
}
.g-body .g-main.g-toeic-free-courses .teacher {
  display: flex;
  align-items: center;
  border-radius: 10px;
  overflow: hidden;
  white-space: normal;
  display: grid;
  grid-template-columns: 80px auto;
  gap: 10px;
  background-color: #F6F1FF;
  padding: 20px 17px;
  margin-bottom: 30px;
}
.g-body .g-main.g-toeic-free-courses .teacher .name {
  color: #4B2F80;
  font-size: 1.2rem;
  font-weight: bold;
  position: relative;
}
.g-body .g-main.g-toeic-free-courses .teacher .name::after {
  position: absolute;
  left: 0;
  top: 30px;
  width: 100%;
  height: 18px;
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  background: url(../images/i-star.svg) no-repeat top left/auto 100%;
}
.g-body .g-main.g-toeic-free-courses .teacher .text {
  margin-top: 30px;
  font-size: 0.875rem;
}
.g-body .g-main.g-toeic-free-courses .teacher .image-container {
  padding-bottom: 100%;
  border-radius: 100px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-toeic-free-courses .teacher {
    grid-template-columns: 24vw auto;
    gap: 3vw;
    padding: 5vw 3vw;
    margin-bottom: 10vw;
  }
  .g-body .g-main.g-toeic-free-courses .teacher .name {
    font-size: 6vw;
    font-weight: normal;
  }
  .g-body .g-main.g-toeic-free-courses .teacher .name::after {
    top: 10vw;
    height: 5vw;
  }
  .g-body .g-main.g-toeic-free-courses .teacher .text {
    margin-top: 10vw;
    font-size: 4vw;
  }
}
.g-body .g-main.g-toeic-free-courses .btn-more {
  color: #fff;
  font-size: 1.1rem;
  border-radius: 50px;
  padding: 10px 20px 6px;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  display: flex;
  min-width: 150px;
  border: 0;
}
.g-body .g-main.g-toeic-free-courses .btn-more:hover {
  cursor: pointer;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-toeic-free-courses .btn-more {
    width: 55vw;
    min-width: auto;
    font-size: 5vw;
    padding: 10px 0 7px;
  }
}
.g-body .g-main.g-toeic-free-courses .btn-more {
  color: #4B2F80;
  width: 155px;
  border: 2px solid #4B2F80;
  margin: 50px auto 0;
  background-color: #fff;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-toeic-free-courses .btn-more {
    margin: 10vw auto 0;
  }
}
.g-body .g-main.g-toeic-free-courses .btn-more::before {
  content: "";
  width: 17px;
  height: 17px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  margin-right: 7px;
  position: relative;
  display: table;
  top: -2px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-toeic-free-courses .btn-more::before {
    width: 4.5vw;
    height: 4.5vw;
  }
}
.g-body .g-main.g-toeic-free-courses .btn-more::before {
  background-image: url(../images/i-plus.svg);
}
.g-body .g-main.g-toeic-free-courses .btn-more:hover {
  color: #fff;
  background-color: #4B2F80;
}
.g-body .g-main.g-toeic-free-courses .btn-more:hover::before {
  background-image: url(../images/i-plus-w.svg);
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-toeic-free-courses .main-content {
    padding-left: 3vw;
    padding-right: 3vw;
  }
}
.g-body .g-main.g-video-learning .select-toggle::after {
  content: "影音\a類別\a";
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.g-video-learning .select-toggle::after {
    content: "類別";
  }
}
.g-body .g-main.g-video-learning .video-list .search-input,
.g-body .g-main.g-video-learning .video-Shorts-list .search-input {
  margin-bottom: 20px;
  margin-top: -30px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .video-list .search-input,
  .g-body .g-main.g-video-learning .video-Shorts-list .search-input {
    margin-top: -5px;
  }
}
.g-body .g-main.g-video-learning .visual {
  background-image: linear-gradient(to bottom, rgba(20, 0, 30, 0.75), rgba(20, 0, 30, 0.5), rgba(20, 0, 30, 0.5), rgba(20, 0, 30, 0.7)), url(../images/page-title7.webp);
  background-position: top 35% center;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.g-video-learning .visual {
    background-position: top 35% right 15%;
  }
}
.g-body .g-main.g-video-learning .visual h1 {
  display: none;
}
@media only screen and (min-width: 1441px) {
  .g-body .g-main.g-video-learning .select-box .option-list {
    max-width: calc(97.5% - 25px);
    margin: 0 0 0 calc(2.5% + 25px);
  }
}
.g-body .g-main.g-video-learning .select-box .option-list a {
  min-width: 170px;
}
@media only screen and (max-width: 1560px) {
  .g-body .g-main.g-video-learning .select-box .option-list a {
    min-width: 0;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.g-video-learning .select-box .option-list a {
    width: 32%;
  }
}
@media only screen and (max-width: 500px) {
  .g-body .g-main.g-video-learning .select-box .option-list a {
    width: 49%;
  }
}
.g-body .g-main.g-video-learning .video-new .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .video-new .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main.g-video-learning .video-new .box-list {
  display: grid;
  grid-template-columns: 55% 1fr 1fr;
  gap: 20px 25px;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.g-video-learning .video-new .box-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
}
@media only screen and (max-width: 1440px) and (max-width: 1024px) {
  .g-body .g-main.g-video-learning .video-new .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 1440px) and (max-width: 768px) {
  .g-body .g-main.g-video-learning .video-new .box-list {
    gap: 15px;
  }
}
.g-body .g-main.g-video-learning .video-new .box-list a {
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  border: 1px #dedede solid;
}
.g-body .g-main.g-video-learning .video-new .box-list a .image-container::after {
  content: "";
  width: 100%;
  height: 100%;
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: url("../images/video-play.svg") no-repeat center center/auto 35px;
  background-color: rgba(0, 0, 0, 0.15);
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .video-new .box-list a .image-container::after {
    background: url("../images/video-play.svg") no-repeat center center/auto 9vw;
    background-color: rgba(0, 0, 0, 0.15);
  }
}
.g-body .g-main.g-video-learning .video-new .box-list a img {
  transition: 0.3s;
}
.g-body .g-main.g-video-learning .video-new .box-list a:hover img {
  transition: 0.3s;
  transform: scale(1.1);
}
.g-body .g-main.g-video-learning .video-new .box-list a .video-tab,
.g-body .g-main.g-video-learning .video-new .box-list a .category,
.g-body .g-main.g-video-learning .video-new .box-list a h3 {
  display: table;
  margin: 0 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .video-new .box-list a .video-tab,
  .g-body .g-main.g-video-learning .video-new .box-list a .category,
  .g-body .g-main.g-video-learning .video-new .box-list a h3 {
    margin: 0 2vw;
  }
}
.g-body .g-main.g-video-learning .video-new .box-list a .video-tab {
  cursor: pointer;
  font-size: 1rem;
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 5px 10px 2px;
  margin-top: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .video-new .box-list a .video-tab {
    font-size: 4vw;
    padding: 0.75vw 2vw 0;
    margin-top: 3vw;
  }
}
.g-body .g-main.g-video-learning .video-new .box-list a h3 {
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  color: #4B2F80;
  font-size: 1.25rem;
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .video-new .box-list a h3 {
    color: #333333;
    font-size: 4.5vw;
    font-weight: normal;
    margin-top: 3vw;
    margin-bottom: 3vw;
  }
}
.g-body .g-main.g-video-learning .video-new .box-list a .category {
  font-size: 1rem;
  color: #333333;
  border: 0;
  background: #f5f5f5;
  border-radius: 4px;
  padding: 5px 10px 2px;
  margin-bottom: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .video-new .box-list a .category {
    font-size: 4vw;
    padding: 0.75vw 2vw 0;
    margin-bottom: 3.5vw;
  }
}
.g-body .g-main.g-video-learning .video-new .box-list a .info {
  margin: 0 20px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .video-new .box-list a .info {
    margin: 0 3vw 3.5vw;
    gap: 2vw 5vw;
  }
}
.g-body .g-main.g-video-learning .video-new .box-list a .info .name {
  color: #aaaaaa;
  font-size: 1rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .video-new .box-list a .info .name {
    font-size: 4vw;
  }
}
.g-body .g-main.g-video-learning .video-new .box-list a .info .category {
  margin: 0;
}
.g-body .g-main.g-video-learning .video-new .box-list a {
  border: 0;
}
.g-body .g-main.g-video-learning .video-new .box-list a:nth-child(1) {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 3;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.g-video-learning .video-new .box-list a:nth-child(1) {
    grid-column-end: 5;
  }
}
@media only screen and (max-width: 1440px) and (max-width: 1024px) {
  .g-body .g-main.g-video-learning .video-new .box-list a:nth-child(1) {
    grid-column-end: 3;
  }
}
.g-body .g-main.g-video-learning .video-new .box-list a:nth-child(1) h3 {
  font-size: 2rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .video-new .box-list a:nth-child(1) h3 {
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    font-size: 5.5vw;
    height: auto;
  }
}
.g-body .g-main.g-video-learning .video-new .box-list a:nth-child(1) .image-container::after {
  background: url(../images/video-play.svg) no-repeat center center/auto 70px;
  background-color: rgba(0, 0, 0, 0.15);
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .video-new .box-list a:nth-child(1) .image-container::after {
    background: url(../images/video-play.svg) no-repeat center center/auto 12vw;
    background-color: rgba(0, 0, 0, 0.15);
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .video-new .box-list a h3 {
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    height: 14vw;
  }
}
.g-body .g-main.g-video-learning .main-aside {
  grid-template-columns: auto 450px;
}
.g-body .g-main.g-video-learning .main-aside aside section:nth-of-type(2) {
  position: sticky;
  top: 60px;
}
.g-body .g-main.g-video-learning .video-page {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .video-page {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main.g-video-learning .video-page .search-input {
  margin: -5px 0 15px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-video-learning .video-page .search-input {
    margin: -5px 0 25px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .video-page .search-input {
    margin: 0 0 5vw;
  }
}
.g-body .g-main.g-video-learning .video-page .video-menu-list {
  margin-bottom: 30px;
}
.g-body .g-main.g-video-learning .video-page .video-menu-list .menu-box {
  max-height: calc(47vw - 262px);
  overflow: auto;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.g-video-learning .video-page .video-menu-list .menu-box {
    max-height: calc(52.3vw - 252px);
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-video-learning .video-page .video-menu-list .menu-box {
    max-height: none;
  }
}
.g-body .g-main.g-video-learning .video-page .video-menu-list .box-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-video-learning .video-page .video-menu-list .box-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 25px;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.g-video-learning .video-page .video-menu-list .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .video-page .video-menu-list .box-list {
    gap: 5px;
  }
}
.g-body .g-main.g-video-learning .video-page .video-menu-list .box-list a {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 10px;
  background-color: #fff;
}
.g-body .g-main.g-video-learning .video-page .video-menu-list .box-list a .image-container {
  border-radius: 10px;
  overflow: hidden;
}
.g-body .g-main.g-video-learning .video-page .video-menu-list .box-list a .image-container::after {
  content: "";
  width: 100%;
  height: 100%;
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: url("../images/video-play.svg") no-repeat center center/auto 35px;
  background-color: rgba(0, 0, 0, 0.15);
}
.g-body .g-main.g-video-learning .video-page .video-menu-list .box-list a img {
  transition: 0.3s;
}
.g-body .g-main.g-video-learning .video-page .video-menu-list .box-list a:hover img {
  transition: 0.3s;
  transform: scale(1.1);
}
.g-body .g-main.g-video-learning .video-page .video-menu-list .box-list a h3 {
  font-size: 1.125rem;
  color: #333333;
  font-weight: bold;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  height: 50px;
  padding-right: 10px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-video-learning .video-page .video-menu-list .box-list a {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
    border: 1px #dedede solid;
    gap: 0;
  }
  .g-body .g-main.g-video-learning .video-page .video-menu-list .box-list a .image-container {
    border-radius: 0;
  }
  .g-body .g-main.g-video-learning .video-page .video-menu-list .box-list a h3 {
    color: #4B2F80;
    font-size: 1.25rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    height: auto;
    margin: 15px 20px 20px;
    padding-right: 0;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .video-page .video-menu-list .box-list a h3 {
    color: #333333;
    font-weight: normal;
    font-size: 4.5vw;
    margin: 3vw 2vw;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
  }
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.g-video-learning .video-page.main-aside {
    grid-template-columns: auto 350px;
  }
}
@media only screen and (max-width: 1440px) and (max-width: 1024px) {
  .g-body .g-main.g-video-learning .video-page.main-aside {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.g-body .g-main.g-video-learning .video-info {
  margin-top: 30px;
}
.g-body .g-main.g-video-learning .video-info article ol {
  padding-left: 40px;
}
.g-body .g-main.g-video-learning .subtitle {
  position: sticky;
  padding-bottom: 20px;
  margin-top: -20px;
  margin-bottom: 30px;
  border-bottom: 1px dotted #cccccc;
  display: grid;
  gap: 10px;
  background-color: #fff;
  bottom: -75px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.g-video-learning .subtitle {
    bottom: -50px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .subtitle {
    letter-spacing: 0;
    padding-top: 10px;
  }
}
.g-body .g-main.g-video-learning .subtitle div {
  color: #000;
  font-size: 1.125rem;
  display: flex;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .subtitle div {
    font-size: 4.5vw;
  }
}
.g-body .g-main.g-video-learning .subtitle div i {
  color: #fff;
  font-style: normal;
  cursor: pointer;
}
.g-body .g-main.g-video-learning .subtitle div i::after {
  padding: 10px 0;
  width: 50px;
  height: calc(100% - 20px);
  text-align: center;
  display: block;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .subtitle div i::after {
    padding: 3vw 0;
    width: 10vw;
    height: calc(100% - 6vw);
  }
}
.g-body .g-main.g-video-learning .subtitle div span {
  width: 100%;
  display: block;
  padding: 10px 15px;
  background-color: #f6f6f6;
}
.g-body .g-main.g-video-learning .subtitle div.en i::after {
  content: "英";
  background-color: #4B2F80;
}
.g-body .g-main.g-video-learning .subtitle div.ch i::after {
  content: "中";
  background-color: #36A2EB;
}
.g-body .g-main.g-video-learning .subtitle div.false span {
  display: none;
}
.g-body .g-main.g-video-learning .subtitle div.false i::after {
  background-color: #cccccc;
}
.g-body .g-main.g-video-learning .subtitle ul {
  list-style: disc;
  margin: 20px 0 0 20px;
  display: grid;
  gap: 5px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .subtitle ul {
    font-size: 4vw;
  }
}
.g-body .g-main.g-video-learning .btn-more {
  color: #fff;
  font-size: 1.1rem;
  border-radius: 50px;
  padding: 10px 20px 6px;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  display: flex;
  min-width: 150px;
  border: 0;
}
.g-body .g-main.g-video-learning .btn-more:hover {
  cursor: pointer;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .btn-more {
    width: 55vw;
    min-width: auto;
    font-size: 5vw;
    padding: 10px 0 7px;
  }
}
.g-body .g-main.g-video-learning .btn-more {
  color: #4B2F80;
  width: 155px;
  border: 2px solid #4B2F80;
  margin: 50px auto 0;
  background-color: #fff;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .btn-more {
    margin: 10vw auto 0;
  }
}
.g-body .g-main.g-video-learning .btn-more::before {
  content: "";
  width: 17px;
  height: 17px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  margin-right: 7px;
  position: relative;
  display: table;
  top: -2px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .btn-more::before {
    width: 4.5vw;
    height: 4.5vw;
  }
}
.g-body .g-main.g-video-learning .btn-more::before {
  background-image: url(../images/i-plus.svg);
}
.g-body .g-main.g-video-learning .btn-more:hover {
  color: #fff;
  background-color: #4B2F80;
}
.g-body .g-main.g-video-learning .btn-more:hover::before {
  background-image: url(../images/i-plus-w.svg);
}
.g-body .g-main.g-video-learning .btn-more {
  margin-bottom: 30px;
}
.g-body .g-main.g-video-learning .Short {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .Short {
    padding: 12vw 0 15vw;
  }
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.g-video-learning .Short .video-container {
    padding-bottom: 580px;
  }
}
@media only screen and (max-width: 1440px) and (max-width: 450px) {
  .g-body .g-main.g-video-learning .Short .video-container {
    padding-bottom: 177%;
  }
  .g-body .g-main.g-video-learning .Short .video-container iframe {
    width: 100%;
    height: 100%;
    position: absolute;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-video-learning .Short {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media only screen and (min-width: 1025px) {
  .g-body .g-main.g-video-learning .Short .btn-more {
    width: 50px;
    min-width: 50px;
    height: 50px;
    padding: 0;
    margin: 0 30px 80px;
  }
  .g-body .g-main.g-video-learning .Short .btn-more span {
    display: none;
  }
  .g-body .g-main.g-video-learning .Short .btn-more::before {
    margin-right: 0;
    top: 0;
  }
  .g-body .g-main.g-video-learning .Short .loading-data {
    display: block;
    border-radius: 10px;
    width: 60px;
    height: 240px;
    text-align: center;
    margin-bottom: 78px;
    margin-top: 0;
  }
  .g-body .g-main.g-video-learning .Short .loading-data::before {
    margin: 40px 0 10px;
  }
}
.g-body .g-main.g-video-learning .Short .search-input {
  margin: -5px 0 15px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-video-learning .Short .search-input {
    margin: -5px 0 25px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .Short .search-input {
    margin: 0 0 5vw;
  }
}
.g-body .g-main.g-video-learning .Short .video-menu-list {
  margin-bottom: 30px;
}
.g-body .g-main.g-video-learning .Short .video-menu-list .menu-box {
  display: flex;
  align-items: center;
  overflow: auto;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-video-learning .Short .video-menu-list .menu-box {
    display: block;
  }
}
.g-body .g-main.g-video-learning .Short .video-menu-list .box-list {
  display: grid;
  grid-template-columns: repeat(999, 1fr);
  overflow: auto;
  gap: 0;
}
.g-body .g-main.g-video-learning .Short .video-menu-list .box-list a:not(:last-child) {
  margin-right: 20px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a:not(:last-child) {
    margin-right: 15px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a:not(:last-child) {
    margin-right: 5px;
  }
}
.g-body .g-main.g-video-learning .Short .video-menu-list .box-list {
  overflow: unset;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 25px;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list {
    gap: 5px;
  }
}
.g-body .g-main.g-video-learning .Short .video-menu-list .box-list a {
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  border: 1px #dedede solid;
}
.g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .image-container::after {
  content: "";
  width: 100%;
  height: 100%;
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: url("../images/video-play.svg") no-repeat center center/auto 35px;
  background-color: rgba(0, 0, 0, 0.15);
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .image-container::after {
    background: url("../images/video-play.svg") no-repeat center center/auto 9vw;
    background-color: rgba(0, 0, 0, 0.15);
  }
}
.g-body .g-main.g-video-learning .Short .video-menu-list .box-list a img {
  transition: 0.3s;
}
.g-body .g-main.g-video-learning .Short .video-menu-list .box-list a:hover img {
  transition: 0.3s;
  transform: scale(1.1);
}
.g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .video-tab,
.g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .category,
.g-body .g-main.g-video-learning .Short .video-menu-list .box-list a h3 {
  display: table;
  margin: 0 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .video-tab,
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .category,
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a h3 {
    margin: 0 2vw;
  }
}
.g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .video-tab {
  cursor: pointer;
  font-size: 1rem;
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 5px 10px 2px;
  margin-top: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .video-tab {
    font-size: 4vw;
    padding: 0.75vw 2vw 0;
    margin-top: 3vw;
  }
}
.g-body .g-main.g-video-learning .Short .video-menu-list .box-list a h3 {
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  color: #4B2F80;
  font-size: 1.25rem;
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a h3 {
    color: #333333;
    font-size: 4.5vw;
    font-weight: normal;
    margin-top: 3vw;
    margin-bottom: 3vw;
  }
}
.g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .category {
  font-size: 1rem;
  color: #333333;
  border: 0;
  background: #f5f5f5;
  border-radius: 4px;
  padding: 5px 10px 2px;
  margin-bottom: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .category {
    font-size: 4vw;
    padding: 0.75vw 2vw 0;
    margin-bottom: 3.5vw;
  }
}
.g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .info {
  margin: 0 20px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .info {
    margin: 0 3vw 3.5vw;
    gap: 2vw 5vw;
  }
}
.g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .info .name {
  color: #aaaaaa;
  font-size: 1rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .info .name {
    font-size: 4vw;
  }
}
.g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .info .category {
  margin: 0;
}
.g-body .g-main.g-video-learning .Short .video-menu-list .box-list a {
  display: flex;
  flex-direction: column;
  border: 0;
}
.g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .image-container {
  border-radius: 10px;
  overflow: hidden;
  padding-bottom: 177%;
}
.g-body .g-main.g-video-learning .Short .video-menu-list .box-list a h3 {
  color: #333333;
  font-size: 1rem;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  letter-spacing: 0;
  margin: 10px 0 20px;
  padding-right: 5px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .image-container::before {
    height: 12vw;
  }
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a h3 {
    bottom: 3vw;
    padding: 0 2vw;
  }
}
.g-body .g-main.g-video-learning .Short .video-menu-list .box-list a {
  width: 135px;
  margin-right: 5px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff;
    border: 1px #dedede solid;
  }
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .image-container::after {
    content: "";
    width: 100%;
    height: 100%;
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: url("../images/video-play.svg") no-repeat center center/auto 35px;
    background-color: rgba(0, 0, 0, 0.15);
  }
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a {
    position: relative;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .image-container::after {
    background: url("../images/video-play.svg") no-repeat center center/auto 9vw;
    background-color: rgba(0, 0, 0, 0.15);
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a img {
    transition: 0.3s;
  }
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a:hover img {
    transition: 0.3s;
    transform: scale(1.1);
  }
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .video-tab,
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .category,
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a h3 {
    display: table;
    margin: 0 20px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .video-tab,
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .category,
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a h3 {
    margin: 0 2vw;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .video-tab {
    cursor: pointer;
    font-size: 1rem;
    color: #fff;
    border: 0;
    border-radius: 4px;
    padding: 5px 10px 2px;
    margin-top: 20px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .video-tab {
    font-size: 4vw;
    padding: 0.75vw 2vw 0;
    margin-top: 3vw;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a h3 {
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    color: #4B2F80;
    font-size: 1.25rem;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 20px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a h3 {
    color: #333333;
    font-size: 4.5vw;
    font-weight: normal;
    margin-top: 3vw;
    margin-bottom: 3vw;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .category {
    font-size: 1rem;
    color: #333333;
    border: 0;
    background: #f5f5f5;
    border-radius: 4px;
    padding: 5px 10px 2px;
    margin-bottom: 20px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .category {
    font-size: 4vw;
    padding: 0.75vw 2vw 0;
    margin-bottom: 3.5vw;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .info {
    margin: 0 20px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 20px;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .info {
    margin: 0 3vw 3.5vw;
    gap: 2vw 5vw;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .info .name {
    color: #aaaaaa;
    font-size: 1rem;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .info .name {
    font-size: 4vw;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .info .category {
    margin: 0;
  }
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .image-container {
    padding-bottom: 177%;
  }
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .image-container::before {
    content: "";
    width: 100%;
    height: 100%;
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    top: auto;
    bottom: 0;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.6);
    display: none;
  }
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a h3 {
    color: #fff;
    position: absolute;
    bottom: 15px;
    margin: 0;
    padding: 15px 20px 0;
    text-shadow: 1px 1px 10px #000;
    z-index: 2;
    display: none;
  }
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .category {
    color: #fff;
    position: absolute;
    bottom: 50px;
    background-color: rgba(75, 47, 128, 0.6);
  }
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a:hover .image-container::before {
    background-color: rgba(75, 47, 128, 0.6);
  }
}
@media only screen and (max-width: 1024px) and (max-width: 450px) {
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a .image-container::before {
    height: 12vw;
  }
  .g-body .g-main.g-video-learning .Short .video-menu-list .box-list a h3 {
    bottom: 3vw;
    padding: 0 2vw;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-video-learning .main-content {
    padding-left: 3vw;
    padding-right: 3vw;
  }
}
.g-body .g-main.g-story .visual {
  background-image: linear-gradient(to bottom, rgba(20, 0, 30, 0.75), rgba(20, 0, 30, 0.5), rgba(20, 0, 30, 0.5), rgba(20, 0, 30, 0.7)), url(../images/page-title8.webp);
  background-position: bottom 5% center;
}
.g-body .g-main.g-story .visual .page-title {
  margin-bottom: 15px;
}
.g-body .g-main.g-story .visual .search-input select {
  max-width: 180px;
  text-align: center;
}
.g-body .g-main.g-story .banner {
  background: url(../images/bg-stories.webp) no-repeat center center/cover;
}
.g-body .g-main.g-story .banner .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-story .banner .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main.g-story .banner .g-container {
  padding-bottom: 0;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-story .banner .g-container {
    padding: 4vw 0 0;
  }
}
.g-body .g-main.g-story .banner .item {
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 300px 1fr;
  border: 1px #dedede solid;
  background-color: #fff;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.g-story .banner .item {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-story .banner .item {
    width: 95%;
    margin: auto;
  }
  .g-body .g-main.g-story .banner .item .story-info {
    margin: 3vw 0;
  }
  .g-body .g-main.g-story .banner .item h3 {
    font-size: 5.8vw;
  }
  .g-body .g-main.g-story .banner .item p {
    font-size: 4.5vw;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
  }
}
.g-body .g-main.g-story .banner .image-container {
  padding-bottom: 85%;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.g-story .banner .image-container {
    padding-bottom: 70%;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-story .banner .box {
    padding: 5vw 5vw;
  }
}
.g-body .g-main.g-story .banner h3 {
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  color: #333333;
  font-size: 1.5rem;
  font-weight: bold;
}
.g-body .g-main.g-story .banner .story-info {
  margin: 20px 0 15px;
}
.g-body .g-main.g-story .banner p {
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  font-size: 1.125rem;
  color: #333333;
  line-height: 1.7;
}
.g-body .g-main.g-story .banner .owl-nav .owl-prev,
.g-body .g-main.g-story .banner .owl-nav .owl-next {
  width: 22px;
  height: 22px;
  top: 49%;
}
.g-body .g-main.g-story .banner .owl-nav .owl-prev {
  left: -2.5%;
}
.g-body .g-main.g-story .banner .owl-nav .owl-next {
  right: -2.5%;
}
.g-body .g-main.g-story .banner .owl-dots {
  bottom: -25px;
}
.g-body .g-main.g-story .banner .tab-box {
  margin-top: 80px;
  justify-content: center;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main.g-story .banner .tab-box a {
    font-size: 1rem;
    letter-spacing: 1px;
    padding: 13px 12px 10px;
    border-radius: 10px 10px 0 0;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main.g-story .banner .tab-box a {
    font-size: 4.2vw;
    letter-spacing: 0;
    padding: 13px 2vw 10px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-story .banner .tab-box {
    margin-top: 16vw;
    margin-bottom: 0;
  }
}
.g-body .g-main.g-story .stories-list h2 {
  display: none;
}
.g-body .g-main.g-story .stories-list .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-story .stories-list .g-container {
    padding: 12vw 0 15vw;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-story .stories-list .g-container {
    padding: 5vw 0 10vw;
  }
}
.g-body .g-main.g-story .stories-list .box-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 25px;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main.g-story .stories-list .box-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 1440px) and (max-width: 1024px) {
  .g-body .g-main.g-story .stories-list .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 1440px) and (max-width: 768px) {
  .g-body .g-main.g-story .stories-list .box-list {
    gap: 15px;
  }
}
@media only screen and (max-width: 1440px) and (max-width: 450px) {
  .g-body .g-main.g-story .stories-list .box-list {
    gap: 5px;
  }
}
.g-body .g-main.g-story .stories-list .box-list a {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background-color: #F5F5F5;
  transition: 0.3s;
  top: 0;
}
.g-body .g-main.g-story .stories-list .box-list a:hover {
  top: -10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.12);
  transition: 0.3s;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-story .stories-list .box-list a:hover {
    top: 0;
  }
}
.g-body .g-main.g-story .stories-list .box-list .image-container {
  padding-bottom: 80%;
}
.g-body .g-main.g-story .stories-list .box-list .box {
  padding: 20px 20px 25px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-story .stories-list .box-list .box {
    padding: 3vw 3vw 5vw;
  }
}
.g-body .g-main.g-story .stories-list .box-list .story-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  border-bottom: 1px #dedede solid;
  gap: 10px;
  padding-bottom: 15px;
  margin-bottom: 15px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.g-story .stories-list .box-list .story-info {
    justify-content: center;
    flex-direction: column;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-story .stories-list .box-list .story-info {
    padding-bottom: 3vw;
    margin-bottom: 3vw;
    gap: 1vw;
  }
}
.g-body .g-main.g-story .stories-list .box-list h3 {
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  color: #333333;
  font-size: 1.375rem;
  font-weight: bold;
  margin-bottom: 5px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-story .stories-list .box-list h3 {
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    font-size: 5vw;
    letter-spacing: 0.1vw;
  }
}
.g-body .g-main.g-story .stories-list .box-list .name {
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  font-size: 1.1rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-story .stories-list .box-list .name {
    font-size: 4.5vw;
    margin-bottom: 5px;
  }
}
.g-body .g-main.g-story .stories-list .box-list p {
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  color: #333333;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-story .stories-list .box-list p {
    font-size: 4.2vw;
    letter-spacing: 0;
  }
}
.g-body .g-main.g-story .page-header {
  background: url(../images/bg-stories-header.webp) no-repeat center center/cover;
}
.g-body .g-main.g-story .page-header .g-container {
  padding-top: 0;
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-story .page-header .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main.g-story .page-header .g-container {
  display: grid;
  grid-template-columns: 300px 1fr;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-story .page-header .g-container {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-story .page-header .g-container {
    padding-left: 3.5vw;
    padding-right: 2vw;
  }
}
.g-body .g-main.g-story .page-header .image-container {
  padding-bottom: 100%;
  border-radius: 350px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-story .page-header .image-container {
    width: 350px;
    padding-bottom: 350px;
    margin: auto;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-story .page-header .image-container {
    width: 80%;
    padding-bottom: 80%;
  }
}
.g-body .g-main.g-story .page-header .box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-story .page-header .box {
    padding: 30px 0 0 0;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-story .page-header .box {
    padding: 8vw 0 0 0;
    gap: 3vw;
  }
}
.g-body .g-main.g-story .page-header h1 {
  color: #4B2F80;
  font-size: 2rem;
  font-weight: bold;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-story .page-header h1 {
    font-size: 6.5vw;
  }
}
.g-body .g-main.g-story .page-header p {
  font-size: 1.125rem;
  color: #333333;
  line-height: 1.7;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-story .page-header p {
    font-size: 5vw;
  }
}
.g-body .g-main.g-story .page-content .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-story .page-content .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main.g-story .page-content .g-container {
  max-width: 1400px;
  font-size: 1.1rem;
}
.g-body .g-main.g-story .page-content .g-container * {
  line-height: 2;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-story .page-content .g-container {
    font-size: 5vw;
    padding-left: 3.5vw;
    padding-right: 2vw;
  }
}
.g-body .g-main.g-story .page-content article img {
  margin: 30px auto;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-story .page-content article img {
    margin: 5vw auto;
  }
}
.g-body .g-main.g-story .video-box {
  background: url(../images/bg-stories-header.webp) no-repeat center center/cover;
}
.g-body .g-main.g-story .video-box .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-story .video-box .g-container {
    padding: 12vw 0 15vw;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-story .video-box .g-container {
    padding: 15px 0;
  }
}
.g-body .g-main.g-story .story-list .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-story .story-list .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main.g-story .story-list .box-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 25px;
}
@media only screen and (max-width: 1900px) {
  .g-body .g-main.g-story .story-list .box-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 1900px) and (max-width: 1440px) {
  .g-body .g-main.g-story .story-list .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 1900px) and (max-width: 900px) {
  .g-body .g-main.g-story .story-list .box-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 1900px) and (max-width: 768px) {
  .g-body .g-main.g-story .story-list .box-list {
    gap: 15px;
  }
}
@media only screen and (max-width: 1900px) and (max-width: 450px) {
  .g-body .g-main.g-story .story-list .box-list {
    gap: 5px;
  }
}
.g-body .g-main.g-story .story-list .box-list a {
  border-radius: 10px;
  overflow: hidden;
  border-radius: 10px;
  overflow: hidden;
  border: 1px #ffffff solid;
}
.g-body .g-main.g-story .story-list .box-list a:hover {
  border: 1px #FFE666 solid;
  box-shadow: 0 0 15px rgba(255, 235, 0, 0.3);
}
.g-body .g-main.g-story .story-list .box-list a:hover h3 {
  color: #4B2F80;
}
.g-body .g-main.g-story .story-list .box-list a {
  background-color: #fff;
  display: grid;
  grid-template-columns: 90px 1fr;
  padding: 10px;
  gap: 10px;
  position: relative;
  top: 0;
  transition: 0.3s;
}
.g-body .g-main.g-story .story-list .box-list a:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.12);
  top: -5px;
  transition: 0.3s;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-story .story-list .box-list a:hover {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.12);
  }
}
.g-body .g-main.g-story .story-list .box-list a .image-container {
  padding-bottom: 100%;
  border-radius: 100px;
}
.g-body .g-main.g-story .story-list .box-list a h3 {
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  color: #4B2F80;
  font-size: 1.25rem;
  font-weight: bold;
  margin: 10px 0;
}
.g-body .g-main.g-story .story-list .box-list a .box {
  padding: 0;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-story .story-list .box-list a {
    padding: 4.5vw 1.5vw;
    grid-template-columns: 22vw 1fr;
    gap: 2.5vw;
    position: static;
  }
  .g-body .g-main.g-story .story-list .box-list a h3 {
    font-weight: normal;
    font-size: 5vw;
    margin: 2vw 0;
    letter-spacing: 0;
  }
}
.g-body .g-main.g-story .box {
  padding: 30px;
}
.g-body .g-main.g-story .btn-more {
  color: #fff;
  font-size: 1.1rem;
  border-radius: 50px;
  padding: 10px 20px 6px;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  display: flex;
  min-width: 150px;
  border: 0;
}
.g-body .g-main.g-story .btn-more:hover {
  cursor: pointer;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-story .btn-more {
    width: 55vw;
    min-width: auto;
    font-size: 5vw;
    padding: 10px 0 7px;
  }
}
.g-body .g-main.g-story .btn-more {
  color: #4B2F80;
  width: 155px;
  border: 2px solid #4B2F80;
  margin: 50px auto 0;
  background-color: #fff;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-story .btn-more {
    margin: 10vw auto 0;
  }
}
.g-body .g-main.g-story .btn-more::before {
  content: "";
  width: 17px;
  height: 17px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  margin-right: 7px;
  position: relative;
  display: table;
  top: -2px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-story .btn-more::before {
    width: 4.5vw;
    height: 4.5vw;
  }
}
.g-body .g-main.g-story .btn-more::before {
  background-image: url(../images/i-plus.svg);
}
.g-body .g-main.g-story .btn-more:hover {
  color: #fff;
  background-color: #4B2F80;
}
.g-body .g-main.g-story .btn-more:hover::before {
  background-image: url(../images/i-plus-w.svg);
}
.g-body .g-main.g-share .visual {
  background-image: linear-gradient(to bottom, rgba(20, 0, 30, 0.75), rgba(20, 0, 30, 0.5), rgba(20, 0, 30, 0.5), rgba(20, 0, 30, 0.7)), url(../images/page-title9.webp);
}
.g-body .g-main.g-share .page-margin .g-container {
  padding-bottom: 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-share .page-margin .g-container {
    padding-bottom: 15vw;
  }
}
.g-body .g-main.g-share .page-margin h2 {
  display: none;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-share .page-margin {
    background-color: #EEEEEE;
  }
}
.g-body .g-main.g-share .share-list {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-share .share-list {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main.g-share .share-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-bottom: 0;
  gap: 40px 25px;
}
@media only screen and (max-width: 1680px) {
  .g-body .g-main.g-share .share-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 1680px) and (max-width: 1024px) {
  .g-body .g-main.g-share .share-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
  }
}
@media only screen and (max-width: 1680px) and (max-width: 768px) {
  .g-body .g-main.g-share .share-list {
    gap: 15px;
  }
}
@media only screen and (max-width: 1680px) and (max-width: 450px) {
  .g-body .g-main.g-share .share-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    padding-bottom: 0;
  }
}
.g-body .g-main.g-share .share-list .item {
  border-radius: 10px;
  overflow: hidden;
  background-color: #F5F5F5;
  display: grid;
  grid-template-columns: 170px 1fr;
  position: relative;
  top: 0;
  transition: 0.3s;
  cursor: pointer;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-share .share-list .item {
    display: grid;
    grid-template-columns: 1fr;
    background-color: #fff;
  }
}
.g-body .g-main.g-share .share-list .item > .box .story-info {
  margin-top: 30px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-share .share-list .item > .box .story-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 3vw;
    gap: 1vw;
  }
  .g-body .g-main.g-share .share-list .item > .box .story-info .site {
    border: 0;
    background-color: #F5F5F5;
    margin-top: 1vw;
  }
}
.g-body .g-main.g-share .share-list .item > .box .story-info .name {
  color: #7D64AB;
  font-size: 1.1rem;
  font-weight: bold;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-share .share-list .item > .box .story-info .name {
    font-size: 5vw;
  }
}
.g-body .g-main.g-share .share-list .item:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.12);
  top: -5px;
  transition: 0.3s;
}
.g-body .g-main.g-share .share-list .image-container {
  padding-bottom: 85%;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-share .share-list .image-container {
    padding-bottom: 90%;
  }
}
.g-body .g-main.g-share .share-list h3 {
  color: #333333;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  font-size: 1.25rem;
  font-weight: bold;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-share .share-list h3 {
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    font-size: 4.9vw;
    letter-spacing: 0;
  }
}
.g-body .g-main.g-share .share-list .box {
  padding: 20px 10px 20px 15px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-share .share-list .box {
    padding: 3vw 2vw;
  }
}
.g-body .g-main.g-share .share-list.video .image-container::after {
  content: "";
  width: 100%;
  height: 100%;
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: url("../images/video-play.svg") no-repeat center center/auto 35px;
  background-color: rgba(0, 0, 0, 0.15);
}
.g-body .g-main.g-event .visual {
  background-image: linear-gradient(to bottom, rgba(20, 0, 30, 0.75), rgba(20, 0, 30, 0.5), rgba(20, 0, 30, 0.5), rgba(20, 0, 30, 0.7)), url(../images/page-title10.webp);
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-event .visual {
    background-position: center right 25%;
  }
}
.g-body .g-main.g-event .page-margin .g-container {
  padding-bottom: 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-event .page-margin .g-container {
    padding-bottom: 15vw;
  }
}
.g-body .g-main.g-event .page-margin .tab-box a {
  width: 200px;
  max-width: 50%;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-event .page-margin .tab-box a {
    letter-spacing: 1px;
  }
}
.g-body .g-main.g-event .page-margin .content-title {
  margin-top: 50px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-event .page-margin .content-title {
    margin-top: 10vw;
  }
}
.g-body .g-main.g-event .page-margin .content-title span {
  color: #7D64AB;
  font-weight: bold;
  margin-right: 8px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-event .page-margin .content-title span {
    margin-right: 1vw;
  }
}
.g-body .g-main.g-event .page-margin .content-title.ECAM {
  margin-top: 90px;
}
.g-body .g-main.g-event .page-margin .main-box {
  background-color: #F6F1FF;
  max-width: 1400px;
  margin: auto;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-event .page-margin .main-box {
    margin-bottom: -10vw;
  }
}
.g-body .g-main.g-event .page-margin p {
  font-size: 1.125rem;
  padding: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-event .page-margin p {
    font-size: 5vw;
    padding: 5vw 3vw 5vw 4vw;
  }
}
.g-body .g-main.g-event .main-content .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-event .main-content .g-container {
    padding: 12vw 0 15vw;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-event .main-content .g-container {
    padding-top: 5px;
  }
}
.g-body .g-main.g-event .main-content .box-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 25px;
}
.g-body .g-main.g-event .main-content .box-list figure {
  background-color: #fff;
}
.g-body .g-main.g-event .main-content .box-list figcaption {
  font-size: 1.125rem;
  padding: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-event .main-content .box-list figcaption {
    font-size: 5vw;
    padding: 5vw 3vw 5vw 4.5vw;
  }
}
@media only screen and (max-width: 1680px) {
  .g-body .g-main.g-event .main-content .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.g-event .main-content .box-list {
    gap: 15px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-event .main-content .box-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
  }
}
.g-body .g-main.g-event .main-content .image-container:nth-child(8):not(:last-child)::after {
  content: "";
  width: 100%;
  height: 100%;
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: url("../images/i-plus-w.svg") no-repeat center center/auto 20px;
  background-color: rgba(0, 0, 0, 0.45);
}
.g-body .g-main.g-event .event-list .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-event .event-list .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main.g-event .event-list .box-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 25px;
}
.g-body .g-main.g-event .event-list .box-list a {
  border-radius: 10px;
  overflow: hidden;
  border: 1px #dedede solid;
  background-color: #fff;
}
.g-body .g-main.g-event .event-list .box-list a img {
  transition: 0.3s;
}
.g-body .g-main.g-event .event-list .box-list a:hover img {
  transition: 0.3s;
  transform: scale(1.1);
}
.g-body .g-main.g-event .event-list .box-list a > h3,
.g-body .g-main.g-event .event-list .box-list a > .h3,
.g-body .g-main.g-event .event-list .box-list a .info {
  display: flex;
  align-items: center;
  padding: 20px 20px 0;
  margin-bottom: 20px;
}
.g-body .g-main.g-event .event-list .box-list a > h3 span,
.g-body .g-main.g-event .event-list .box-list a > .h3 span,
.g-body .g-main.g-event .event-list .box-list a .info span {
  display: inline-block;
  color: #fff;
  background-color: #7D64AB;
  padding: 5px 10px;
  border-radius: 4px;
  margin-right: 10px;
  white-space: nowrap;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-event .event-list .box-list a > h3,
  .g-body .g-main.g-event .event-list .box-list a > .h3,
  .g-body .g-main.g-event .event-list .box-list a .info {
    font-size: 5vw;
    padding: 3vw 3vw 0;
    margin-bottom: 3vw;
  }
}
.g-body .g-main.g-event .event-list .box-list a h3,
.g-body .g-main.g-event .event-list .box-list a .h3 {
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  color: #333333;
  font-size: 1.125rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-event .event-list .box-list a h3,
  .g-body .g-main.g-event .event-list .box-list a .h3 {
    font-size: 5vw;
  }
}
@media only screen and (max-width: 1680px) {
  .g-body .g-main.g-event .event-list .box-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-event .event-list .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-event .event-list .box-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-event.g-tag .page-margin {
    background-color: #EEEEEE;
  }
  .g-body .g-main.g-event.g-tag .page-margin .content-title {
    margin-top: 5vw;
    letter-spacing: 1px;
  }
}
.g-body .g-main.g-event .btn-more {
  color: #fff;
  font-size: 1.1rem;
  border-radius: 50px;
  padding: 10px 20px 6px;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  display: flex;
  min-width: 150px;
  border: 0;
}
.g-body .g-main.g-event .btn-more:hover {
  cursor: pointer;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-event .btn-more {
    width: 55vw;
    min-width: auto;
    font-size: 5vw;
    padding: 10px 0 7px;
  }
}
.g-body .g-main.g-event .btn-more {
  color: #4B2F80;
  width: 155px;
  border: 2px solid #4B2F80;
  margin: 50px auto 0;
  background-color: #fff;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-event .btn-more {
    margin: 10vw auto 0;
  }
}
.g-body .g-main.g-event .btn-more::before {
  content: "";
  width: 17px;
  height: 17px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  margin-right: 7px;
  position: relative;
  display: table;
  top: -2px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.g-event .btn-more::before {
    width: 4.5vw;
    height: 4.5vw;
  }
}
.g-body .g-main.g-event .btn-more::before {
  background-image: url(../images/i-plus.svg);
}
.g-body .g-main.g-event .btn-more:hover {
  color: #fff;
  background-color: #4B2F80;
}
.g-body .g-main.g-event .btn-more:hover::before {
  background-image: url(../images/i-plus-w.svg);
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main.g-event .search-input {
    position: relative;
  }
  .g-body .g-main.g-event .search-input select {
    position: absolute;
    margin-bottom: 20px;
    top: 80px;
  }
}
.g-body .g-main.gjun-FAQ .visual {
  background-image: linear-gradient(to bottom, rgba(20, 0, 30, 0.75), rgba(20, 0, 30, 0.5), rgba(20, 0, 30, 0.5), rgba(20, 0, 30, 0.7)), url(../images/page-title12.webp);
}
@media only screen and (max-width: 600px) {
  .g-body .g-main.gjun-FAQ .visual .page-title {
    font-size: 2rem;
    letter-spacing: 0.2rem;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gjun-FAQ .visual .page-title {
    font-size: 6.8vw;
    letter-spacing: 0.2rem;
    letter-spacing: 0.1vw;
  }
}
.g-body .g-main.gjun-FAQ .FAQ .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gjun-FAQ .FAQ .g-container {
    padding: 12vw 0 15vw;
  }
}
.g-body .g-main.gjun-FAQ .FAQ .g-container {
  max-width: 1200px;
}
.g-body .g-main.gjun-FAQ .FAQ .g-container section:last-of-type .FAQ-box:last-of-type {
  margin-bottom: 0;
}
.g-body .g-main.gjun-FAQ .FAQ h2 {
  font-size: 1.75rem;
  font-weight: bold;
  letter-spacing: 4px;
  border-bottom: 5px solid #7D64AB;
  display: table;
  margin: 0 auto 30px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gjun-FAQ .FAQ h2 {
    font-size: 8vw;
    letter-spacing: 1vw;
    border-bottom: 1.5vw solid #7D64AB;
    margin: 0 auto 8vw;
  }
}
.g-body .g-main.gjun-FAQ .FAQ .sort-none h3 {
  display: none;
}
.g-body .g-main.gjun-FAQ .FAQ-box {
  scroll-margin-top: 105px;
  margin-bottom: 0;
}
.g-body .g-main.gjun-FAQ .FAQ-box > ol {
  width: 100%;
  max-width: 100%;
  list-style-type: decimal;
  list-style-position: inside;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gjun-FAQ .FAQ-box > ol {
    font-size: 4.5vw;
  }
}
.g-body .g-main.gjun-FAQ .FAQ-box > ol ol {
  list-style-type: decimal;
  padding-inline-start: 30px;
  margin: 5px 0 25px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding-inline-start: 55px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gjun-FAQ .FAQ-box > ol ol {
    padding-inline-start: 8vw;
    margin: 2vw 0 6vw 0;
    gap: 2vw;
  }
}
.g-body .g-main.gjun-FAQ .FAQ-box > ol ol li::before {
  content: "";
}
.g-body .g-main.gjun-FAQ .FAQ-box > ol li {
  font-size: 1.1rem;
  line-height: 1.7;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gjun-FAQ .FAQ-box > ol li {
    font-size: 4.5vw;
  }
}
.g-body .g-main.gjun-FAQ .FAQ-box > ol > li {
  margin-left: 20px;
  padding: 12px 40px 10px 27px;
  border-bottom: 1px dotted #cccccc;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.gjun-FAQ .FAQ-box > ol > li {
    padding: 12px 0 10px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gjun-FAQ .FAQ-box > ol > li {
    margin-left: 0;
    padding: 5vw 2vw 5vw 6vw;
  }
}
.g-body .g-main.gjun-FAQ .FAQ-box > ol > li:first-of-type {
  border-top: 1px dotted #cccccc;
}
.g-body .g-main.gjun-FAQ .FAQ-box > ol > li::before, .g-body .g-main.gjun-FAQ .FAQ-box > ol > li::marker {
  font-size: 1.25rem;
  font-weight: bold;
  color: #4B2F80;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gjun-FAQ .FAQ-box > ol > li::before, .g-body .g-main.gjun-FAQ .FAQ-box > ol > li::marker {
    font-size: 5vw;
  }
}
.g-body .g-main.gjun-FAQ .FAQ-box > ol > li::before {
  content: "Q";
  position: absolute;
  left: 10px;
  top: 12px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.gjun-FAQ .FAQ-box > ol > li::before {
    left: -18px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gjun-FAQ .FAQ-box > ol > li::before {
    left: 1vw;
    top: 5vw;
  }
}
.g-body .g-main.gjun-FAQ .FAQ-box > ol > li h3,
.g-body .g-main.gjun-FAQ .FAQ-box > ol > li .Q {
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: bold;
  display: inline;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gjun-FAQ .FAQ-box > ol > li h3,
  .g-body .g-main.gjun-FAQ .FAQ-box > ol > li .Q {
    font-size: 4.8vw;
  }
}
.g-body .g-main.gjun-FAQ .FAQ-box > ol > li b {
  font-size: 1.25rem;
  line-height: 1.7;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gjun-FAQ .FAQ-box > ol > li b {
    font-size: 4.8vw;
  }
}
.g-body .g-main.gjun-FAQ .FAQ-box > ol > li p {
  line-height: 1.7;
  margin: 15px 0 20px 25px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.gjun-FAQ .FAQ-box > ol > li p {
    margin: 15px 0 25px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gjun-FAQ .FAQ-box > ol > li p {
    margin: 3vw 0 5vw 0;
  }
}
.g-body .g-main.gjun-FAQ .FAQ-box > ol > li p a {
  color: #0070ff;
}
.g-body .g-main.gjun-FAQ .FAQ-box > ol > li p a:hover,
.g-body .g-main.gjun-FAQ .FAQ-box > ol > li p a span:hover {
  color: #FF7A00;
}
.g-body .g-main.gjun-FAQ .FAQ-box > ol table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
  margin: 15px 0 20px 25px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main.gjun-FAQ .FAQ-box > ol table {
    max-width: 90vw;
    margin: 15px 0 20px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main.gjun-FAQ .FAQ-box > ol table {
    max-width: 92vw;
    margin-left: 0;
    margin-bottom: 8vw;
  }
}
.g-body .g-main.gjun-FAQ .FAQ-box > ol table tbody {
  display: table;
  width: 100%;
  background-color: #fff;
}
.g-body .g-main.gjun-FAQ .FAQ-box > ol table tbody td,
.g-body .g-main.gjun-FAQ .FAQ-box > ol table tbody th {
  text-align: center;
  border: 1px #dedede solid;
  font-size: 1rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gjun-FAQ .FAQ-box > ol table tbody td,
  .g-body .g-main.gjun-FAQ .FAQ-box > ol table tbody th {
    font-size: 4.5vw;
  }
}
.g-body .g-main.gjun-FAQ .FAQ-box > ol table tbody th {
  background-color: #EEEEEE;
  white-space: nowrap;
}
.g-body .g-main.gjun-FAQ .FAQ-box {
  margin: 20px 0 50px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gjun-FAQ .FAQ-box {
    margin: 8vw 0 10vw;
  }
}
.g-body .g-main.gjun-FAQ .FAQ-box h3 {
  color: #4B2F80;
  font-size: 1.375rem;
  font-weight: bold;
  background-color: #F5F5F5;
  padding: 8px 15px 6px;
  border-radius: 5px;
  margin-bottom: 10px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gjun-FAQ .FAQ-box h3 {
    font-size: 6vw;
    padding: 3vw 0 2vw;
    border-radius: 1vw;
    text-align: center;
  }
}
.g-body .g-main.gjun-FAQ ol.gjun-FAQ-list > li {
  padding: 20px 25px 15px 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gjun-FAQ ol.gjun-FAQ-list > li {
    padding: 5vw 2vw 3vw 5vw;
  }
}
.g-body .g-main.gjun-FAQ ol.gjun-FAQ-list > li::before {
  content: "";
}
.g-body .g-main.gjun-FAQ ol.gjun-FAQ-list > li::after {
  position: absolute;
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url(../images/arrow.svg) no-repeat center center/50% auto;
  right: 0;
  top: 23px;
  transform: rotate(-90deg);
  transition: 0.3s;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gjun-FAQ ol.gjun-FAQ-list > li::after {
    top: 5.5vw;
  }
}
.g-body .g-main.gjun-FAQ ol.gjun-FAQ-list > li.active .Q {
  color: #FF7A00;
}
.g-body .g-main.gjun-FAQ ol.gjun-FAQ-list > li.active::after {
  transform: rotate(0deg);
  transition: 0.3s;
}
.g-body .g-main.gjun-FAQ ol.gjun-FAQ-list .Q {
  width: 100%;
  position: relative;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gjun-FAQ ol.gjun-FAQ-list .Q {
    letter-spacing: 0;
  }
}
.g-body .g-main.gjun-FAQ ol.gjun-FAQ-list .Q:hover {
  cursor: pointer;
  color: #FF7A00;
}
.g-body .g-main.gjun-FAQ ol.gjun-FAQ-list .Q::before {
  font-size: 1.25rem;
  color: #7D64AB;
  content: "Q";
  position: absolute;
  top: -4px;
  left: -43px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gjun-FAQ ol.gjun-FAQ-list .Q::before {
    font-size: 4.8vw;
    top: -0.8vw;
    left: -11vw;
  }
}
.g-body .g-main.gjun-FAQ ol.gjun-FAQ-list .A {
  display: none;
  padding: 20px 0;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gjun-FAQ ol.gjun-FAQ-list .A {
    padding: 3vw 0;
    margin-left: -1.5vw;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main.gjun-FAQ .nav-page {
    justify-content: center;
  }
  .g-body .g-main.gjun-FAQ .nav-page .page-scroll {
    width: 35%;
  }
}
.g-body .g-main section.freecourse_form,
.g-body .g-main.course section.freecourse_form {
  background: linear-gradient(to bottom, rgba(20, 0, 30, 0.85), rgba(20, 0, 30, 0.6), rgba(10, 0, 20, 0.6), rgba(10, 0, 20, 0.75)), url(../images/freecourse_form-bg.webp) center center/cover no-repeat fixed;
}
.g-body .g-main section.freecourse_form .g-container,
.g-body .g-main.course section.freecourse_form .g-container {
  padding: 80px 0 90px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.freecourse_form .g-container,
  .g-body .g-main.course section.freecourse_form .g-container {
    padding: 12vw 0 15vw;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.freecourse_form .g-container,
  .g-body .g-main.course section.freecourse_form .g-container {
    width: 94%;
  }
}
.g-body .g-main section.freecourse_form .content-box,
.g-body .g-main.course section.freecourse_form .content-box {
  display: grid;
  grid-template-columns: 45% 50%;
  gap: 5%;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main section.freecourse_form .content-box,
  .g-body .g-main.course section.freecourse_form .content-box {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.freecourse_form .content-box,
  .g-body .g-main.course section.freecourse_form .content-box {
    gap: 10vw;
  }
}
.g-body .g-main section.freecourse_form .info-word .content-title,
.g-body .g-main section.freecourse_form .info-word p,
.g-body .g-main.course section.freecourse_form .info-word .content-title,
.g-body .g-main.course section.freecourse_form .info-word p {
  color: #fff;
  text-align: left;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.freecourse_form .info-word .content-title,
  .g-body .g-main.course section.freecourse_form .info-word .content-title {
    text-align: center;
    letter-spacing: 0.5vw;
  }
}
.g-body .g-main section.freecourse_form .info-word p:nth-of-type(2),
.g-body .g-main.course section.freecourse_form .info-word p:nth-of-type(2) {
  margin-top: 15px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.freecourse_form .info-word p:nth-of-type(2),
  .g-body .g-main.course section.freecourse_form .info-word p:nth-of-type(2) {
    margin-top: 3vw;
  }
}
.g-body .g-main section.freecourse_form .subtitle,
.g-body .g-main.course section.freecourse_form .subtitle {
  color: #fff;
  font-size: 1.375rem;
  font-weight: bold;
  margin-bottom: 15px;
  border-left: 5px solid #AB91DD;
  padding-left: 10px;
  line-height: 1.2;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.freecourse_form .subtitle,
  .g-body .g-main.course section.freecourse_form .subtitle {
    font-size: 6vw;
    margin-bottom: 3vw;
    padding-left: 3vw;
  }
}
.g-body .g-main section.freecourse_form .input-list,
.g-body .g-main.course section.freecourse_form .input-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media only screen and (max-width: 650px) {
  .g-body .g-main section.freecourse_form .input-list,
  .g-body .g-main.course section.freecourse_form .input-list {
    gap: 10px;
  }
}
@media only screen and (max-width: 650px) and (max-width: 450px) {
  .g-body .g-main section.freecourse_form .input-list,
  .g-body .g-main.course section.freecourse_form .input-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
  }
}
@media only screen and (min-width: 451px) {
  .g-body .g-main section.freecourse_form .input-list li:nth-of-type(3),
  .g-body .g-main section.freecourse_form .input-list li:nth-of-type(6),
  .g-body .g-main.course section.freecourse_form .input-list li:nth-of-type(3),
  .g-body .g-main.course section.freecourse_form .input-list li:nth-of-type(6) {
    grid-column-start: 1;
    grid-column-end: 3;
  }
}
.g-body .g-main section.freecourse_form .input-list input[type=text],
.g-body .g-main section.freecourse_form .input-list select,
.g-body .g-main.course section.freecourse_form .input-list input[type=text],
.g-body .g-main.course section.freecourse_form .input-list select {
  color: #333333;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 3px;
}
.g-body .g-main section.freecourse_form .input-list input[type=text]::-moz-placeholder, .g-body .g-main section.freecourse_form .input-list select::-moz-placeholder, .g-body .g-main.course section.freecourse_form .input-list input[type=text]::-moz-placeholder, .g-body .g-main.course section.freecourse_form .input-list select::-moz-placeholder {
  color: #333333;
}
.g-body .g-main section.freecourse_form .input-list input[type=text]::placeholder,
.g-body .g-main section.freecourse_form .input-list select::placeholder,
.g-body .g-main.course section.freecourse_form .input-list input[type=text]::placeholder,
.g-body .g-main.course section.freecourse_form .input-list select::placeholder {
  color: #333333;
}
.g-body .g-main section.freecourse_form .g-iAgree,
.g-body .g-main.course section.freecourse_form .g-iAgree {
  color: #fff;
  margin-top: 30px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.freecourse_form .g-iAgree,
  .g-body .g-main.course section.freecourse_form .g-iAgree {
    margin-top: 5vw;
    justify-content: center;
  }
}
.g-body .g-main section.freecourse_form .g-iAgree .agreeLink,
.g-body .g-main.course section.freecourse_form .g-iAgree .agreeLink {
  color: #AB91DD;
}
.g-body .g-main section.freecourse_form .g-iAgree input[type=checkbox],
.g-body .g-main.course section.freecourse_form .g-iAgree input[type=checkbox] {
  margin-top: -2px;
}
.g-body .g-main section.freecourse_form .btn-normal,
.g-body .g-main.course section.freecourse_form .btn-normal {
  margin-top: 50px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main section.freecourse_form .btn-normal,
  .g-body .g-main.course section.freecourse_form .btn-normal {
    margin: 50px auto 0;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.freecourse_form .btn-normal,
  .g-body .g-main.course section.freecourse_form .btn-normal {
    margin: 10vw auto 0;
  }
}
.g-body .g-main .g-search,
.g-body .g-main.course .g-search {
  display: grid;
  grid-template-columns: auto 155px;
  background-color: #F6F1FF;
  gap: 20px;
  padding: 10px;
}
@media only screen and (max-width: 1200px) {
  .g-body .g-main .g-search,
  .g-body .g-main.course .g-search {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main .g-search,
  .g-body .g-main.course .g-search {
    padding: 5vw 3vw 6vw;
  }
}
.g-body .g-main .g-search .search-box,
.g-body .g-main.course .g-search .search-box {
  display: grid;
  grid-template-columns: repeat(3, 150px) auto;
  gap: 20px;
}
@media only screen and (max-width: 1200px) {
  .g-body .g-main .g-search .search-box,
  .g-body .g-main.course .g-search .search-box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
}
@media only screen and (max-width: 1200px) and (max-width: 768px) {
  .g-body .g-main .g-search .search-box,
  .g-body .g-main.course .g-search .search-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3vw;
  }
}
.g-body .g-main .g-search .search-box select,
.g-body .g-main.course .g-search .search-box select {
  background-color: transparent;
}
.g-body .g-main .g-search .btn-search,
.g-body .g-main.course .g-search .btn-search {
  margin: auto;
}
.g-body .g-main aside .g-search,
.g-body .g-main.course aside .g-search {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 10px;
  overflow: hidden;
  padding: 20px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main aside .g-search,
  .g-body .g-main.course aside .g-search {
    padding: 5vw 3vw 6vw;
  }
}
.g-body .g-main aside .g-search .search-box,
.g-body .g-main.course aside .g-search .search-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main aside .g-search .search-box,
  .g-body .g-main.course aside .g-search .search-box {
    grid-template-columns: 100px 150px 1fr 1fr;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main aside .g-search .search-box,
  .g-body .g-main.course aside .g-search .search-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

.g-body .g-main h1 {
  display: none;
}
.g-body .g-main section .title-box {
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
  margin-bottom: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section .title-box {
    margin-bottom: 10px;
  }
}
.g-body .g-main section .title-box h2 {
  padding-left: 80px;
  color: #4B2F80;
  font-size: 1.5rem;
  font-weight: bold;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main section .title-box h2 {
    padding-left: 0;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section .title-box h2 {
    font-size: 5.5vw;
  }
}
.g-body .g-main section .title-box h2::before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  width: 65px;
  height: 60px;
  left: 0;
  position: absolute;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main section .title-box h2::before {
    display: none;
  }
}
.g-body .g-main section .title-box h2 span {
  color: #4B2F80;
  font-weight: bold;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section .title-box > div {
    padding-left: 2vw;
  }
}
.g-body .g-main section .title-box > div > span {
  color: #555555;
  display: block;
  padding: 3px 0 0 80px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main section .title-box > div > span {
    padding: 3px 0 0 0px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section .title-box > div > span {
    font-size: 4.2vw;
    letter-spacing: 0;
    padding-top: 5px;
  }
}
.g-body .g-main section .title-box .btn-more,
.g-body .g-main section .title-box .btn-more span {
  cursor: pointer;
  color: #4B2F80;
}
.g-body .g-main section .title-box .btn-more:hover,
.g-body .g-main section .title-box .btn-more span:hover {
  color: #FF7A00;
}
.g-body .g-main section .title-box .btn-more:hover span,
.g-body .g-main section .title-box .btn-more span:hover span {
  color: #FF7A00;
}
.g-body .g-main section .title-box .btn-more::after {
  content: "›";
  margin-left: 5px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main section .title-box .btn-more {
    font-size: 0.9rem;
    padding: 7px 10px;
    border-radius: 50px;
    background-color: #E3DBF2;
    white-space: nowrap;
    letter-spacing: 0;
  }
}
@media only screen and (max-width: 768px) and (max-width: 450px) {
  .g-body .g-main section .title-box .btn-more {
    font-size: 4vw;
    padding: 1.5vw 3vw 0.5vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main section .title-box .btn-more span {
    display: none;
  }
}
.g-body .g-main section.g-activity-banner {
  height: 31vw;
  overflow: hidden;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main section.g-activity-banner {
    height: 112vw;
  }
}
.g-body .g-main section.g-activity-banner .image-container {
  padding-bottom: 31.25%;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main section.g-activity-banner .image-container {
    padding-bottom: 112%;
  }
}
.g-body .g-main section.g-activity-banner .owl-nav .owl-prev,
.g-body .g-main section.g-activity-banner .owl-nav .owl-next {
  width: 22px;
  height: 22px;
  border-radius: 22px;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  top: 49%;
}
.g-body .g-main section.g-activity-banner .owl-nav .owl-prev {
  left: 2.5%;
}
.g-body .g-main section.g-activity-banner .owl-nav .owl-next {
  right: 2.5%;
}
.g-body .g-main section.g-activity-banner .owl-dots {
  bottom: 20px;
}
.g-body .g-main section.g-home-search {
  padding: 30px 0 0;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main section.g-home-search {
    padding: 20px 0 0;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main section.g-home-search {
    padding: 30px 0 0;
  }
}
.g-body .g-main section.g-home-search .g-container {
  display: flex;
  gap: 20px;
  max-width: 1000px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main section.g-home-search .g-container {
    display: block;
  }
  .g-body .g-main section.g-home-search .g-container .btn-search {
    margin: auto;
    margin-top: 25px;
  }
}
.g-body .g-main section.g-home-search .g-container .search-box {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 180px) auto;
  gap: 20px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main section.g-home-search .g-container .search-box {
    grid-template-columns: repeat(3, 120px) auto;
    gap: 15px;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main section.g-home-search .g-container .search-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 15px;
  }
}
.g-body .g-main section.g-courses .g-container, .g-body .g-main section.g-free .g-container, .g-body .g-main section.g-video .g-container, .g-body .g-main section.g-blog .g-container, .g-body .g-main section.g-story .g-container {
  padding: 50px 0;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main section.g-courses .g-container, .g-body .g-main section.g-free .g-container, .g-body .g-main section.g-video .g-container, .g-body .g-main section.g-blog .g-container, .g-body .g-main section.g-story .g-container {
    padding: 40px 0;
  }
}
.g-body .g-main section.g-courses h2::before {
  background: url(../images/home-title-courses.svg) no-repeat center center/auto 55px;
}
.g-body .g-main section.g-courses .box-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px 25px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main section.g-courses .box-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main section.g-courses .box-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-courses .box-list {
    gap: 5px;
  }
}
.g-body .g-main section.g-courses .box-list li {
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.g-body .g-main section.g-courses .box-list li h3 {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 1.65rem;
  font-weight: bold;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  justify-content: center;
  text-shadow: 3px 3px 10px #000;
  position: absolute;
  z-index: 2;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main section.g-courses .box-list li h3 {
    font-size: 1.7vw;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main section.g-courses .box-list li h3 {
    font-size: 2.5vw;
  }
}
@media only screen and (max-width: 768px) {
  .g-body .g-main section.g-courses .box-list li h3 {
    font-size: 3.5vw;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-courses .box-list li h3 {
    font-size: 4.5vw;
    font-weight: normal;
  }
}
.g-body .g-main section.g-courses .box-list li img {
  transition: 0.3s;
  opacity: 0.4;
}
.g-body .g-main section.g-courses .box-list li:hover img {
  transition: 0.3s;
  transform: scale(1.1);
}
.g-body .g-main section.g-courses .box-list li:hover .image-container::after {
  background-color: rgba(79, 51, 113, 0.5);
}
.g-body .g-main section.g-courses .image-container {
  padding-bottom: 52%;
  background: #9486b3;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-courses .image-container {
    padding-bottom: 60%;
  }
}
.g-body .g-main section.g-courses .image-container::after {
  content: "";
  width: 100%;
  height: 100%;
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.65);
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-courses .image-container::after {
    background-color: rgba(0, 0, 0, 0.55);
  }
}
.g-body .g-main section.g-free h2::before {
  background: url(../images/home-title-free.svg) no-repeat center center/auto 55px;
}
.g-body .g-main section.g-free .box-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 25px;
}
@media only screen and (max-width: 1680px) {
  .g-body .g-main section.g-free .box-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 1200px) {
  .g-body .g-main section.g-free .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-free .box-list {
    gap: 5px;
  }
}
.g-body .g-main section.g-free li {
  border-radius: 10px;
  overflow: hidden;
  border: 1px #ffffff solid;
}
.g-body .g-main section.g-free li:hover {
  border: 1px #FFE666 solid;
  box-shadow: 0 0 15px rgba(255, 235, 0, 0.3);
}
.g-body .g-main section.g-free li:hover h3 {
  color: #4B2F80;
}
.g-body .g-main section.g-free li {
  cursor: pointer;
  background-color: #fff;
  padding: 12px;
  border: 1px #ffffff solid;
}
@media screen and (min-width: 1201px) and (max-width: 1680px) {
  .g-body .g-main section.g-free li:nth-child(n+7) {
    display: none;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-free li {
    padding: 4vw 2vw 3vw;
    border-radius: 0;
    border-bottom: 1px #dedede solid;
  }
}
.g-body .g-main section.g-free li a {
  cursor: pointer;
  display: block;
  height: 100%;
  width: 100%;
}
.g-body .g-main section.g-free h3 {
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  font-size: 1.1rem;
  color: #333333;
  margin-bottom: 15px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main section.g-free h3 {
    font-size: 1rem;
    margin-bottom: 5px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-free h3 {
    text-align: center;
    font-size: 4.3vw;
    letter-spacing: 0;
    margin-bottom: 3vw;
  }
}
.g-body .g-main section.g-free time {
  color: #FF7A00;
  font-size: 0.975rem;
  line-height: 2;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main section.g-free time {
    font-size: 0.925rem;
    letter-spacing: 0;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-free time {
    width: 85%;
    font-size: 4.5vw;
    letter-spacing: 0.2vw;
    display: block;
    text-align: center;
    margin: auto;
    line-height: 1.6;
  }
}
.g-body .g-main section.g-free time::before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  width: 14px;
  height: 15px;
  background-image: url(../images/i-time.svg);
  margin-right: 0;
  position: relative;
  top: 2px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-free time::before {
    width: 4.5vw;
    height: 4.5vw;
    top: 0.5vw;
  }
}
.g-body .g-main section.g-free .site {
  color: #333333;
  background-color: #FFF3E7;
  font-size: 0.875rem;
  padding: 5px 12px 4px;
  display: table;
  float: right;
  border-radius: 4px;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main section.g-free .site {
    margin-left: 80px;
    margin-top: 10px;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main section.g-free .site {
    margin-left: 30px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-free .site {
    font-size: 4vw;
    margin-top: 1vw;
    margin-left: 0;
    padding: 1.5vw 3vw 1vw;
    display: block;
    width: 100%;
    text-align: center;
    border-radius: 0;
  }
}
.g-body .g-main section.g-event-word {
  background-color: #fafafa;
}
.g-body .g-main section.g-event-word .g-container {
  padding: 25px 0;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main section.g-event-word .g-container {
    padding: 10px 0;
  }
}
.g-body .g-main section.g-event-word .icon {
  width: 60px;
  height: 50px;
  background: url(../images/home-event.svg) no-repeat 3px 3px;
  background-size: auto 43px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-event-word .icon {
    width: 50px;
    height: 45px;
    background: url(../images/home-event.svg) no-repeat 5px 5px;
    background-size: auto 33px;
  }
}
.g-body .g-main section.g-event-word .box {
  display: flex;
}
.g-body .g-main section.g-event-word .box-list {
  width: calc(100% - 65px);
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-event-word .box-list {
    width: calc(100% - 55px);
  }
}
.g-body .g-main section.g-event-word .box-list a {
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  color: #0760b4;
  width: 100%;
  font-size: 1.1rem;
  line-height: 50px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-event-word .box-list a {
    font-size: 4.5vw;
    line-height: 45px;
    letter-spacing: 0;
  }
}
.g-body .g-main section.g-event-word .box-list a::before {
  color: #FF7A00;
  content: "◆";
  margin-right: 3px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-event-word .box-list a::before {
    display: none;
  }
}
.g-body .g-main section.g-event-word .box-list a:hover {
  color: #FF7A00;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-event-word .box-list a {
    font-size: 4.5vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main section.g-event-word .box-list .d-word {
    display: none;
  }
}
.g-body .g-main section.g-event-word .box-list .m-word {
  display: none;
}
@media only screen and (max-width: 650px) {
  .g-body .g-main section.g-event-word .box-list .m-word {
    display: inline;
  }
}
.g-body .g-main section.g-video h2::before {
  background: url(../images/home-title-video.svg) no-repeat center center/auto 55px;
}
.g-body .g-main section.g-video .box-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 25px;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main section.g-video .box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-video .box-list {
    gap: 5px;
  }
}
.g-body .g-main section.g-video .box-list li {
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  border: 1px #dedede solid;
}
.g-body .g-main section.g-video .box-list li .image-container::after {
  content: "";
  width: 100%;
  height: 100%;
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: url("../images/video-play.svg") no-repeat center center/auto 35px;
  background-color: rgba(0, 0, 0, 0.15);
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-video .box-list li .image-container::after {
    background: url("../images/video-play.svg") no-repeat center center/auto 9vw;
    background-color: rgba(0, 0, 0, 0.15);
  }
}
.g-body .g-main section.g-video .box-list li img {
  transition: 0.3s;
}
.g-body .g-main section.g-video .box-list li:hover img {
  transition: 0.3s;
  transform: scale(1.1);
}
.g-body .g-main section.g-video .box-list li .video-tab,
.g-body .g-main section.g-video .box-list li .category,
.g-body .g-main section.g-video .box-list li h3 {
  display: table;
  margin: 0 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-video .box-list li .video-tab,
  .g-body .g-main section.g-video .box-list li .category,
  .g-body .g-main section.g-video .box-list li h3 {
    margin: 0 2vw;
  }
}
.g-body .g-main section.g-video .box-list li .video-tab {
  cursor: pointer;
  font-size: 1rem;
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 5px 10px 2px;
  margin-top: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-video .box-list li .video-tab {
    font-size: 4vw;
    padding: 0.75vw 2vw 0;
    margin-top: 3vw;
  }
}
.g-body .g-main section.g-video .box-list li h3 {
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  color: #4B2F80;
  font-size: 1.25rem;
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-video .box-list li h3 {
    color: #333333;
    font-size: 4.5vw;
    font-weight: normal;
    margin-top: 3vw;
    margin-bottom: 3vw;
  }
}
.g-body .g-main section.g-video .box-list li .category {
  font-size: 1rem;
  color: #333333;
  border: 0;
  background: #f5f5f5;
  border-radius: 4px;
  padding: 5px 10px 2px;
  margin-bottom: 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-video .box-list li .category {
    font-size: 4vw;
    padding: 0.75vw 2vw 0;
    margin-bottom: 3.5vw;
  }
}
.g-body .g-main section.g-video .box-list li .info {
  margin: 0 20px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-video .box-list li .info {
    margin: 0 3vw 3.5vw;
    gap: 2vw 5vw;
  }
}
.g-body .g-main section.g-video .box-list li .info .name {
  color: #aaaaaa;
  font-size: 1rem;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-video .box-list li .info .name {
    font-size: 4vw;
  }
}
.g-body .g-main section.g-video .box-list li .info .category {
  margin: 0;
}
.g-body .g-main section.g-video .box-list li a {
  cursor: pointer;
  display: block;
  height: 100%;
  width: 100%;
}
.g-body .g-main section.g-video .box-list li h3 {
  color: #333333;
  font-weight: normal;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-video .box-list li h3 {
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
  }
}
.g-body .g-main section.g-video .box-list li:nth-child(1) .video-tab {
  background-color: #36A2EB;
}
.g-body .g-main section.g-video .box-list li:nth-child(2) .video-tab {
  background-color: #FF6384;
}
.g-body .g-main section.g-video .box-list li:nth-child(3) .video-tab {
  background-color: #FF9F40;
}
.g-body .g-main section.g-video .box-list li:nth-child(4) .video-tab {
  background-color: #4BC0C0;
}
.g-body .g-main section.g-video .little-title {
  font-size: 1.375rem;
  color: #333333;
  margin-top: 35px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-video .little-title {
    margin-top: 7vw;
    margin-bottom: 2vw;
    font-size: 5.5vw;
  }
}
.g-body .g-main section.g-video .video-Shorts-list .box-list {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}
.g-body .g-main section.g-video .video-Shorts-list .box-list a h3 {
  font-size: 1rem;
  -webkit-line-clamp: 2;
  padding: 0 10px 0;
  bottom: 10px;
  height: 50px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-video .video-Shorts-list .box-list a h3 {
    letter-spacing: 0;
    line-height: 1.3;
    font-size: 4.05vw;
    padding: 0 2vw 0;
    bottom: 2.5vw;
    height: auto;
  }
}
.g-body .g-main section.g-video .video-Shorts-list .box-list a .image-container::before {
  height: 70px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-video .video-Shorts-list .box-list a .image-container::before {
    height: 16vw;
  }
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main section.g-video .video-Shorts-list.scroll .box-list a {
    width: 16vw;
  }
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main section.g-video .video-Shorts-list.scroll .box-list a {
    width: 20.5vw;
  }
}
@media only screen and (max-width: 650px) {
  .g-body .g-main section.g-video .video-Shorts-list.scroll .box-list a {
    width: 26vw;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-video .video-Shorts-list.scroll .box-list a {
    width: 29vw;
  }
}
.g-body .g-main section.g-blog h2::before {
  background: url(../images/home-title-blog.svg) no-repeat center center/auto 55px;
}
.g-body .g-main section.g-blog .item {
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  border: 1px #dedede solid;
  padding-bottom: 20px;
}
.g-body .g-main section.g-blog .item .image-container {
  padding-bottom: 52.3%;
}
.g-body .g-main section.g-blog .item .image-container img {
  transition: 0.3s;
}
.g-body .g-main section.g-blog .item:hover img {
  transition: 0.3s;
  transform: scale(1.1);
}
.g-body .g-main section.g-blog .item h3,
.g-body .g-main section.g-blog .item h4 {
  font-size: 1.125rem;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  color: #333333;
  padding: 20px 20px 0 20px;
}
.g-body .g-main section.g-blog .item p {
  color: #333333;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  padding: 20px;
  padding-bottom: 0;
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-blog .item {
    padding-bottom: 5vw;
  }
  .g-body .g-main section.g-blog .item h3,
  .g-body .g-main section.g-blog .item h4 {
    font-size: 4.5vw;
    padding: 3vw 2vw 0 2vw;
  }
  .g-body .g-main section.g-blog .item p {
    font-size: 4.5vw;
    padding: 3vw 2vw 0 2vw;
  }
}
.g-body .g-main section.g-blog .item {
  border: 0;
  display: block;
}
.g-body .g-main section.g-blog .item h3 {
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  font-weight: bold;
  margin-bottom: -10px;
  display: none;
}
.g-body .g-main section.g-blog .item p {
  height: 70px;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main section.g-blog .item p {
    height: 65px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-blog .item p {
    height: 17vw;
  }
}
.g-body .g-main section.g-blog .owl-nav .owl-prev,
.g-body .g-main section.g-blog .owl-nav .owl-next {
  top: calc(49% - 45px);
}
.g-body .g-main section.g-blog .owl-nav .owl-prev {
  left: -2.5%;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main section.g-blog .owl-nav .owl-prev {
    left: -1.8%;
  }
}
.g-body .g-main section.g-blog .owl-nav .owl-next {
  right: -2.5%;
}
@media only screen and (max-width: 1440px) {
  .g-body .g-main section.g-blog .owl-nav .owl-next {
    right: -1.8%;
  }
}
.g-body .g-main section.g-blog .owl-dots {
  bottom: -25px;
}
.g-body .g-main section.g-story h2::before {
  background: url(../images/home-title-story.svg) no-repeat center center/auto 55px;
}
.g-body .g-main section.g-story div.g-container {
  padding-bottom: 0;
}
.g-body .g-main section.g-story .box-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
@media only screen and (max-width: 768px) {
  .g-body .g-main section.g-story .box-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main section.g-story .box-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
.g-body .g-main section.g-story .box-list li {
  cursor: pointer;
}
.g-body .g-main section.g-story .box-list li h3 {
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  color: #fff;
  text-align: center;
  font-size: 0.937rem;
  font-weight: normal;
  padding: 0 10px;
  line-height: 3.5;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  bottom: -60px;
  left: 0;
  position: absolute;
  z-index: 2;
  transition: 0.3s;
  text-shadow: 1px 1px 8px #000;
}
@media only screen and (max-width: 768px) {
  .g-body .g-main section.g-story .box-list li h3 {
    display: none;
  }
}
.g-body .g-main section.g-story .box-list li:hover h3 {
  bottom: 0;
  transition: 0.3s;
}
.g-body .g-main section.g-story .box-list li:hover .image-container::after {
  background-color: transparent;
}
.g-body .g-main section.g-story .box-list .image-container {
  padding-bottom: 100%;
}
.g-body .g-main section.g-story .box-list .image-container::after {
  content: "";
  width: 100%;
  height: 100%;
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.45);
}
@media only screen and (max-width: 768px) {
  .g-body .g-main section.g-story .box-list .image-container::after {
    background-color: transparent;
  }
}
.g-body .g-home-post h4 {
  width: 100%;
  color: #7D64AB;
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 30px;
  line-height: 1.7;
  text-align: center;
  justify-content: center;
  display: inline-flex;
}
.g-body .g-home-post h5 {
  color: #7D64AB;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 20px;
}
.g-body .g-home-post .home-post {
  font-size: 1.125rem;
  margin-bottom: 20px;
}
.g-body .g-home-post .home-post img {
  margin: auto;
}
.g-body .g-home-post .home-post p {
  color: #333333;
}
.g-body .g-home-post .home-post a {
  color: #4B2F80;
  display: inline;
}
.g-body .g-home-post .home-post a:hover {
  color: #FF7A00;
}
.g-body .g-home-post .owl-nav .owl-prev,
.g-body .g-home-post .owl-nav .owl-next {
  width: 22px;
  height: 22px;
  top: 35%;
}
.g-body .g-home-post .owl-nav .owl-prev {
  left: -28px;
}
.g-body .g-home-post .owl-nav .owl-next {
  right: -28px;
}
.g-body .g-home-post .owl-dots {
  bottom: 0;
}
.g-body .g-home-post .item {
  padding: 0 5px;
  margin-bottom: 30px;
}
@media only screen and (max-width: 450px) {
  .g-body .g-home-post .item {
    margin-bottom: 3vw;
  }
  .g-body .g-home-post .popup-main h4 {
    margin-bottom: 10px;
  }
}

.g-body .g-main .edit {
  font-size: 1.1rem;
}
.g-body .g-main .edit * {
  line-height: 1.7;
}
.g-body .g-main .edit a {
  color: #333333;
}
.g-body .g-main .edit a:hover {
  color: #FF7A00;
}
.g-body .g-main .edit .card {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 50px;
}
.g-body .g-main .edit .card .card-header {
  display: flex;
  align-items: center;
  color: #fff;
  padding: 8px 25px;
  background-color: #7D64AB;
  justify-content: space-between;
}
.g-body .g-main .edit .card .card-header .fa-chevron-circle-up:before {
  content: "";
}
.g-body .g-main .edit .card .card-header.active .blog_icon {
  transform: rotate(0deg);
  transition: 0.3s;
}
.g-body .g-main .edit .card .card-header p {
  margin-bottom: 0px;
}
.g-body .g-main .edit .card .card-header .blog_icon {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  width: 15px;
  height: 15px;
  transform: rotate(-180deg);
  background-image: url(../images/arrow-w.svg);
  transition: 0.3s;
}
.g-body .g-main .edit .card .card-body {
  padding: 20px 25px;
}
.g-body .g-main .edit .card .card-body ul {
  padding-left: 10px;
  margin-bottom: 10px;
}
.g-body .g-main .edit .card .card-body ul > li {
  list-style: disc;
}
.g-body .g-main .edit .card .card-body ul ul {
  padding-left: 37px;
}
.g-body .g-main .edit .card .card-body a {
  color: #333333;
}
.g-body .g-main .edit .card .card-body a:hover {
  color: #FF7A00;
}
.g-body .g-main .edit ol {
  list-style-type: decimal;
  padding-left: 40px;
}
.g-body .g-main .edit ol[type=A] {
  list-style-type: upper-alpha;
}
.g-body .g-main .edit h2 {
  color: #7D64AB;
  font-size: 24px;
}
.g-body .g-main .edit h3 {
  font-size: 21px;
  line-height: 1.4;
}
.g-body .g-main .edit h4,
.g-body .g-main .edit h4 a {
  font-size: 18px;
}
.g-body .g-main .edit h5 {
  font-size: 18px;
}
.g-body .g-main .edit p {
  margin-bottom: 20px;
}
.g-body .g-main .edit p a {
  color: #7D64AB;
  font-weight: bold;
  display: inline;
  border-bottom: 1px #8a6ac5 solid;
}
.g-body .g-main .edit img {
  width: auto;
  max-width: 100%;
  margin-bottom: 20px;
}
.g-body .g-main .edit .import {
  padding: 15px;
  margin-bottom: 20px;
  background-color: #F5F5F5;
  border-left: #7D64AB 5px solid;
}
.g-body .g-main .edit .table-responsive {
  width: 100%;
  overflow-x: auto;
}
.g-body .g-main .edit table {
  display: block;
  overflow-x: auto;
  margin-bottom: 1rem;
  box-sizing: border-box;
}
.g-body .g-main .edit table tbody {
  display: table;
  width: 100%;
}
.g-body .g-main .edit table td,
.g-body .g-main .edit table th {
  border: 1px #555555 solid;
  padding: 5px 10px;
}
.g-body .g-main .edit table th {
  text-align: inherit;
  font-weight: bold;
  vertical-align: top;
}
.g-body .g-main .edit .table-bordered {
  display: table;
}
.g-body .g-main .edit .table-bordered th,
.g-body .g-main .edit .table-bordered td {
  border: 1px solid #dee2e6;
}
.g-body .g-main .edit .videobox {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  margin-bottom: 15px;
}
.g-body .g-main .edit .videobox iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.g-body .g-main .edit .slink {
  font-size: 21px;
  font-weight: bolder;
  background-color: #F5F5F5;
  text-align: center;
  padding: 20px;
  margin-bottom: 30px;
}
.g-body .g-main .edit .slink a {
  color: #000;
  font-weight: bolder;
  border-bottom: #AB91DD 1px solid;
}
.g-body .g-main .edit .slink a i {
  padding-left: 5px;
  color: #AB91DD;
  font-weight: bolder;
}
@media only screen and (max-width: 1024px) {
  .g-body .g-main .edit {
    max-width: 94vw;
    overflow-x: hidden;
  }
  .g-body .g-main .edit h2 {
    font-size: 21px;
  }
  .g-body .g-main .edit .slink {
    font-size: 18px;
  }
}
@media only screen and (max-width: 450px) {
  .g-body .g-main .edit {
    font-size: 5vw;
  }
  .g-body .g-main .edit * {
    letter-spacing: 0;
  }
  .g-body .g-main .edit .card {
    margin-bottom: 35px;
  }
  .g-body .g-main .edit .card .card-body {
    padding: 20px 10px 20px 20px;
  }
  .g-body .g-main .edit .card .card-body ul ul {
    padding-left: 30px;
  }
  .g-body .g-main .edit ol {
    padding-left: 30px;
  }
  .g-body .g-main .edit h2 {
    font-size: 5.7vw;
  }
  .g-body .g-main .edit h3 {
    font-size: 5.5vw;
  }
  .g-body .g-main .edit h4,
  .g-body .g-main .edit h5 {
    font-size: 5vw;
  }
  .g-body .g-main .edit table {
    font-size: 4.4vw;
  }
  .g-body .g-main .edit table td,
  .g-body .g-main .edit table th {
    padding: 5px 6px;
  }
  .g-body .g-main .edit .slink {
    font-size: 5vw;
  }
}
.g-body .g-main .edit * {
  box-sizing: border-box;
}
.g-body .g-main .edit .h1,
.g-body .g-main .edit .h2,
.g-body .g-main .edit .h3,
.g-body .g-main .edit .h4,
.g-body .g-main .edit .h5,
.g-body .g-main .edit .h6,
.g-body .g-main .edit h1,
.g-body .g-main .edit h2,
.g-body .g-main .edit h3,
.g-body .g-main .edit h4,
.g-body .g-main .edit h5,
.g-body .g-main .edit h6 {
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.g-body .g-main .edit .h1 span,
.g-body .g-main .edit .h2 span,
.g-body .g-main .edit .h3 span,
.g-body .g-main .edit .h4 span,
.g-body .g-main .edit .h5 span,
.g-body .g-main .edit .h6 span,
.g-body .g-main .edit h1 span,
.g-body .g-main .edit h2 span,
.g-body .g-main .edit h3 span,
.g-body .g-main .edit h4 span,
.g-body .g-main .edit h5 span,
.g-body .g-main .edit h6 span {
  font-weight: bold;
}
.g-body .g-main .edit b {
  font-weight: bolder;
}
.g-body .g-main .edit .table {
  margin-bottom: 1rem;
}
.g-body .g-main .edit .rounded {
  border-radius: 0.25rem;
}
.g-body .g-main .edit .border {
  border: 1px solid #dee2e6;
}
.g-body .g-main .edit .border-bottom {
  border-bottom: 1px solid rgb(204, 204, 204);
}
.g-body .g-main .edit .border-right {
  border-right: 1px solid #dee2e6;
}
.g-body .g-main .edit .text-center {
  text-align: center;
}
.g-body .g-main .edit .row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
.g-body .g-main .edit .mb-2 {
  margin-bottom: 0.5rem;
}
.g-body .g-main .edit .mb-3 {
  margin-bottom: 1rem;
}
.g-body .g-main .edit .col-2,
.g-body .g-main .edit .col-4,
.g-body .g-main .edit .col-5,
.g-body .g-main .edit .col-7,
.g-body .g-main .edit .col-12,
.g-body .g-main .edit .col-md-4 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.g-body .g-main .edit .col-2 {
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}
.g-body .g-main .edit .col-4 {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}
.g-body .g-main .edit .col-5 {
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}
.g-body .g-main .edit .col-7 {
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}
.g-body .g-main .edit .col-12 {
  -webkit-box-flex: 0;
  max-width: 100%;
}
.g-body .g-main .edit .p-2 {
  padding: 0.5rem;
}
.g-body .g-main .edit .p-3 {
  padding: 1rem;
}
@media only screen and (max-width: 990px) {
  .g-body .g-main .edit .blog-new {
    flex-wrap: wrap;
  }
}
@media only screen and (min-width: 768px) {
  .g-body .g-main .edit .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .g-body .g-main .edit .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}/*# sourceMappingURL=style.css.map */