:root {
  --font-pri: "Montserrat", serif;
  --font-sec: "Be Vietnam Pro", sans-serif;
  --font-third: "Inter", sans-serif;
  --size-hd: 10rem;
  --heightTop: 5.6rem;
  --heightSP: 6.4rem; }

/*------------------------------------------------------------
	Clearfix
------------------------------------------------------------*/
/*------------------------------------------------------------
	Font
------------------------------------------------------------*/
/*------------------------------------------------------------
	Media
------------------------------------------------------------*/
/*------------------------------------------------------------
	Flex Box
------------------------------------------------------------*/
.commit {
  padding: 3rem 1.5rem 4rem 1.5rem; }
  @media screen and (max-width: 768px) {
    .commit {
      padding: 3rem 1.5rem; } }
  .commit-card {
    column-gap: 8rem;
    display: flex;
    justify-content: center; }
    @media screen and (max-width: 1200px) {
      .commit-card {
        column-gap: 4rem; } }
    @media screen and (max-width: 768px) {
      .commit-card {
        gap: 1rem;
        flex-wrap: wrap; } }
  .commit-list {
    max-width: 28.5rem;
    position: relative; }
    @media screen and (max-width: 768px) {
      .commit-list {
        max-width: none;
        width: calc(100% / 3); } }
    @media screen and (max-width: 720px) {
      .commit-list {
        width: 100%; } }
    .commit-list:not(:last-child)::after {
      content: "";
      top: -1rem;
      right: -4rem;
      width: 0.3rem;
      height: 10rem;
      position: absolute;
      background: rgba(51, 51, 51, 0.05); }
      @media screen and (max-width: 1200px) {
        .commit-list:not(:last-child)::after {
          right: -1rem; } }
      @media screen and (max-width: 768px) {
        .commit-list:not(:last-child)::after {
          display: none; } }
  .commit-item {
    padding: 1.2rem;
    margin: -1.2rem;
    column-gap: 1rem;
    border-radius: 2.4rem;
    width: calc(100% + 2.4rem);
    transition: 0.4s ease-in-out;
    display: flex;
    align-items: center; }
    @media screen and (min-width: 1201px) {
      .commit-item:hover {
        box-shadow: 0 0.2rem 0.9rem 0 rgba(0, 0, 0, 0.14); } }
    @media screen and (max-width: 1200px) {
      .commit-item {
        gap: 1rem; } }
    @media screen and (max-width: 768px) {
      .commit-item {
        margin: 0;
        width: 100%;
        flex-direction: column;
        border: 0.1rem solid #2a3d77;
        box-shadow: 0 0.2rem 0.9rem 0 rgba(0, 0, 0, 0.14); } }
  .commit-img {
    width: 7.2rem;
    height: 7.2rem;
    flex-shrink: 0;
    position: relative; }
    @media screen and (max-width: 768px) {
      .commit-img {
        width: 6rem;
        height: 6rem; } }
    .commit-img img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain; }
  @media screen and (max-width: 768px) {
    .commit-content {
      text-align: center; } }
  .commit-content strong {
    font-weight: 700;
    color: #2a3d77; }
  .commit-content p {
    font-weight: 300;
    color: #333;
    line-height: 1.8;
    font-size: 1.4rem; }
    .commit-content p:first-child {
      font-weight: 700;
      color: #2a3d77; }

.article-item_wrapper {
  border-radius: 2.4rem 2.4rem 4rem 4rem;
  background: #fff;
  box-shadow: 0rem 0.1rem 1rem 0rem rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.5s; }
  .article-item_wrapper:hover {
    transform: translateY(-0.8rem); }
  @media screen and (max-width: 575.98px) {
    .article-item_wrapper {
      border-radius: 2.4rem; } }

.article-item_wrapper:hover .article-item_img img {
  transform: scale(1.05); }

.article-item_wrapper:hover .article-item_title {
  color: #2a3d77; }

.article-item_img {
  aspect-ratio: 48.4/30.6;
  overflow: hidden;
  border-radius: 2.4rem 2.4rem 0rem 0rem; }
  @media screen and (max-width: 600px) {
    .article-item_img {
      aspect-ratio: 1.5; } }

.article-item_img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s; }

.article-item_content {
  padding: 2.4rem 2rem 2.4rem 2rem;
  flex: 1;
  display: flex;
  flex-direction: column; }

.article-item_date {
  color: #333;
  font-size: 1.4rem;
  font-weight: 300; }

.article-item_title {
  flex: 1;
  color: #333;
  font-size: 2rem;
  font-weight: 600;
  line-height: normal;
  margin-block: 1.6rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  transition: color 0.3s; }
  @media only screen and (max-width: 1200px) {
    .article-item_title {
      font-size: 1.8rem; } }
  @media only screen and (max-width: 800px) {
    .article-item_title {
      font-size: 1.6rem; } }

.article-item_act {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: #ebc13b;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: normal;
  position: relative; }
  .article-item_act::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0.1rem;
    background-color: currentColor;
    transition: width 0.3s; }
  .article-item_act:hover::after {
    width: calc(100% - 3.2rem); }
  .article-item_act img {
    display: block;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%; }

.latest-news {
  margin-top: 12rem; }
  @media screen and (max-width: 1000px) {
    .latest-news {
      margin-top: 8rem; } }
  .latest-news .boat {
    text-align: center; }
    .latest-news .boat-img {
      position: relative;
      display: inline-block; }
      .latest-news .boat-img::before {
        content: "";
        position: absolute;
        top: 50%;
        left: -9.4rem;
        transform: translateY(-50%);
        width: 7.8rem;
        height: 0.1rem;
        background-color: #2a3d77; }
      .latest-news .boat-img::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -9.4rem;
        transform: translateY(-50%);
        width: 7.8rem;
        height: 0.1rem;
        background-color: #2a3d77; }
  .latest-news_wrapper {
    position: relative; }
  .latest-news_title {
    color: #2a3d77;
    font-size: 3rem;
    font-weight: 700;
    line-height: 130%;
    text-align: center;
    margin-block: 1.6rem;
    text-transform: uppercase; }
    @media only screen and (max-width: 1200px) {
      .latest-news_title {
        font-size: 2.7rem; } }
    @media only screen and (max-width: 800px) {
      .latest-news_title {
        font-size: 2.4rem; } }
    @media screen and (max-width: 575.98px) {
      .latest-news_title {
        font-size: 2.4rem; } }
  .latest-news .swiper {
    padding: 2.4rem 0.2rem;
    padding-bottom: 6rem; }
    .latest-news .swiper-pagination {
      bottom: 0; }
    .latest-news .swiper-pagination-bullet {
      width: 1.2rem;
      height: 1.2rem;
      background: rgba(42, 61, 119, 0.5);
      transition: width 0.5s; }
      @media screen and (max-width: 600px) {
        .latest-news .swiper-pagination-bullet {
          width: 0.8rem;
          height: 0.8rem; } }
    .latest-news .swiper-pagination-bullet-active {
      width: 6.4rem;
      border-radius: 2.4rem;
      background: #2a3d77; }
      @media screen and (max-width: 600px) {
        .latest-news .swiper-pagination-bullet-active {
          width: 4.8rem; } }

.download {
  overflow: hidden;
  padding-top: 12rem; }
  @media screen and (max-width: 1200px) {
    .download {
      padding-top: 6rem; } }
  .download-wrap {
    position: relative; }
  .download-block {
    padding: 6.7rem;
    position: relative;
    border-radius: 2.4rem;
    background: #ebc13b; }
    @media screen and (max-width: 1200px) {
      .download-block {
        padding: 6rem 4rem; } }
    @media screen and (max-width: 767px) {
      .download-block {
        padding: 4rem 1.5rem;
        overflow: hidden;
        background: #2a3d77; } }
    @media screen and (max-width: 575.98px) {
      .download-block .app-item {
        width: 12.939rem;
        height: 5.6rem; } }
  @media screen and (max-width: 767px) {
    .download .col-4 {
      display: none; } }
  @media screen and (max-width: 767px) {
    .download .col-8 {
      width: 100%; } }
  .download-skew {
    top: 0;
    right: 0;
    width: 80%;
    height: 100%;
    position: absolute; }
    @media screen and (max-width: 767px) {
      .download-skew {
        display: none; } }
    .download-skew img {
      height: 100%;
      width: 100%;
      display: block; }
  .download-img {
    left: 0;
    bottom: -5.4rem;
    position: absolute; }
    @media screen and (max-width: 1097px) {
      .download-img {
        left: -5rem; } }
    .download-img img {
      width: 23.8rem;
      height: 34.1rem;
      object-fit: cover; }
      @media screen and (max-width: 1097px) {
        .download-img img {
          width: 40rem;
          height: 40rem;
          object-fit: contain; } }
  .download-info {
    gap: 1rem;
    display: flex;
    justify-content: space-between; }
    @media screen and (max-width: 1150px) {
      .download-info {
        gap: 2rem;
        flex-wrap: wrap;
        justify-content: center; } }
    .download-info-box .title {
      color: white;
      font-weight: 600;
      text-align: center;
      font-size: 1.8rem; }
      @media only screen and (max-width: 1200px) {
        .download-info-box .title {
          font-size: 1.6rem; } }
      @media only screen and (max-width: 800px) {
        .download-info-box .title {
          font-size: 1.5rem; } }
    .download-info .install {
      margin-bottom: 0;
      justify-content: center; }
      @media screen and (max-width: 1200px) {
        .download-info .install-link {
          padding: 0.8rem 1.6rem; } }
    .download-info .app {
      margin-bottom: 0;
      justify-content: center; }
      .download-info .app-link img {
        height: 5.2rem;
        display: block; }

.faq {
  overflow: hidden;
  padding-top: 8rem; }
  @media screen and (max-width: 767.98px) {
    .faq {
      padding-top: 6rem; } }

.faq-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 -1.2rem;
  row-gap: 3rem; }
  .faq-wrap .policy-heading {
    width: calc(4 / 12 * 100%);
    padding: 0 1.2rem; }
  @media screen and (max-width: 767.98px) {
    .faq-wrap {
      margin: 0; }
      .faq-wrap .policy-heading {
        width: 100%;
        padding: 0; } }

.faq-list {
  padding: 0 1.2rem; }
  @media screen and (max-width: 767.98px) {
    .faq-list {
      padding: 0; } }

.faq-list {
  flex: 1; }

.faq-item:not(:first-child) {
  margin-top: 1.5rem; }

.faq-item.is-active .faq-heading img {
  transform: rotate(-180deg); }

.faq-heading {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  column-gap: 1.6rem;
  border-radius: 8px;
  background: #eef4ff;
  padding: 1.6rem 3.2rem;
  align-items: center;
  cursor: pointer; }
  .faq-heading img {
    width: 2.4rem;
    height: 2.4rem;
    transition: 0.3s ease-in-out; }
  @media screen and (max-width: 991.98px) {
    .faq-heading {
      padding: 1.6rem; } }

.faq-content {
  margin: 1.5rem 2.3rem 0;
  color: #333;
  font-size: 1.4rem;
  line-height: 171.429%; }

.faq-title {
  flex: 1; }

.faq-img {
  margin-top: 3.2rem;
  max-width: 33.8rem; }
  .faq-img img {
    width: 100%;
    height: auto; }
  @media screen and (max-width: 575.98px) {
    .faq-img {
      display: none; } }

.policy {
  min-height: 52.8rem;
  padding: 7.2rem 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
  background-image: url("../images/policy/policy.jpg"); }

.policy-wrap {
  max-width: 102.6rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  justify-content: space-between;
  display: flex;
  flex-wrap: wrap;
  row-gap: 3rem; }

.policy-heading {
  width: 40%; }
  .policy-heading .boat-img {
    display: flex;
    align-items: center;
    column-gap: 1.6rem; }
    .policy-heading .boat-img::before {
      position: relative;
      left: unset;
      transform: unset;
      display: block; }
    .policy-heading .boat-img::after {
      content: unset; }
  .policy-heading .latest-news_title {
    text-align: left; }
  @media screen and (max-width: 767.98px) {
    .policy-heading {
      width: 100%; } }

.policy-list {
  width: 48%; }
  @media screen and (max-width: 767.98px) {
    .policy-list {
      width: 100%; } }

.policy-item {
  display: flex;
  align-items: center;
  border-radius: 1.6rem;
  overflow: hidden;
  transition: 0.3s ease-in-out; }
  .policy-item:not(:first-child) {
    margin-top: 1.6rem; }
  .policy-item:hover {
    box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
    transform: translateX(10px); }
    .policy-item:hover .policy-link img {
      transform: translateX(5px); }

.policy-group {
  padding: 1.6rem 3.2rem;
  display: flex;
  align-items: center;
  background: #2a3d77;
  column-gap: 1.6rem;
  width: 84%;
  min-height: 6.4rem;
  transition: 0.3s ease-in-out; }
  .policy-group img {
    width: 3.2rem;
    height: 3.2rem; }
  @media screen and (max-width: 575.98px) {
    .policy-group {
      padding: 1.4rem; } }

.policy-link {
  height: 100%;
  transition: 0.3s ease-in-out;
  padding: 1.65rem 2.2rem;
  background: #ebc13b;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 6.4rem; }
  .policy-link img {
    width: 3.4rem;
    transition: 0.3s ease-in-out; }
  @media screen and (max-width: 575.98px) {
    .policy-link {
      padding: 1.4rem; } }

.policy-text {
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700; }
  @media only screen and (max-width: 1200px) {
    .policy-text {
      font-size: 1.6rem; } }
  @media only screen and (max-width: 800px) {
    .policy-text {
      font-size: 1.5rem; } }

.policy-download.download {
  overflow: hidden;
  position: relative; }
  .policy-download.download .download-block {
    position: relative; }
  @media screen and (max-width: 1400px) {
    .policy-download.download {
      padding-top: 21rem; } }
  @media screen and (max-width: 767.98px) {
    .policy-download.download {
      padding-top: 8rem; } }

.policy-download .download-block {
  border-radius: 0; }

.policy-download .download-skew {
  width: 74%; }

@media screen and (max-width: 1200px) {
  .policy-download .download-img {
    bottom: -4.7rem; } }

@media screen and (max-width: 1095px) {
  .policy-download .download-img {
    bottom: -5rem; } }

@media screen and (max-width: 767.98px) {
  .policy-download .download-skew {
    width: 85%; } }

@-webkit-keyframes paper-plane-scoping {
  0% {
    -webkit-transform: translate(0px, -5rem);
    -moz-transform: translate(0px, -5rem);
    transform: translate(0px, -5rem); }
  100% {
    -webkit-transform: translate(5rem, 0);
    -moz-transform: translate(5rem, 0);
    transform: translate(5rem, 0); } }