@charset "UTF-8";
@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  src: url("../../fonts/Pretendard/Pretendard-ExtraBold.woff2") format("woff2"), url("../../fonts/Pretendard/Pretendard-ExtraBold.woff") format("woff"), url("../../fonts/Pretendard/Pretendard-ExtraBold.otf") format("opentype");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  src: url("../../fonts/Pretendard/Pretendard-Bold.woff2") format("woff2"), url("../../fonts/Pretendard/Pretendard-Bold.woff") format("woff"), url("../../fonts/Pretendard/Pretendard-Bold.otf") format("opentype");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  src: url("../../fonts/Pretendard/Pretendard-SemiBold.otf") format("woff2"), url("../../fonts/Pretendard/Pretendard-SemiBold.woff") format("woff"), url("../../fonts/Pretendard/Pretendard-SemiBold.otf") format("opentype");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  src: url("../../fonts/Pretendard/Pretendard-Medium.woff2") format("woff2"), url("../../fonts/Pretendard/Pretendard-Medium.woff") format("woff"), url("../../fonts/Pretendard/Pretendard-Medium.otf") format("opentype");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  src: url("../../fonts/Pretendard/Pretendard-Regular.woff2") format("woff2"), url("../../fonts/Pretendard/Pretendard-Regular.woff") format("woff"), url("../../fonts/Pretendard/Pretendard-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 300;
  src: url("../../fonts/Pretendard/Pretendard-Light.woff2") format("woff2"), url("../../fonts/Pretendard/Pretendard-Light.woff") format("woff"), url("../../fonts/Pretendard/Pretendard-Light.otf") format("opentype");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 200;
  src: url("../../fonts/Pretendard/Pretendard-ExtraLight.woff2") format("woff2"), url("../../fonts/Pretendard/Pretendard-ExtraLight.woff") format("woff"), url("../../fonts/Pretendard/Pretendard-ExtraLight.otf") format("opentype");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 100;
  src: url("../../fonts/Pretendard/Pretendard-Thin.woff2") format("woff2"), url("../../fonts/Pretendard/Pretendard-Thin.woff") format("woff"), url("../../fonts/Pretendard/Pretendard-Thin.otf") format("opentype");
}
/********************************
reset
********************************/
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
ol,
ul,
dl,
dd,
button {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Pretendard", "돋움", sans-serif;
  font-size: 16px;
  color: #333;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  margin: 0;
  padding: 0;
}

em {
  font-style: normal;
}

ul,
li {
  list-style: none;
}

img {
  border: 0;
  vertical-align: middle;
  max-width: 100%;
}

a {
  font-family: "Pretendard";
  text-decoration: none;
  color: #333;
}

address {
  font-style: normal;
}

ol,
article,
aside,
footer,
header,
nav,
section,
summary,
menu {
  display: block;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

input {
  margin: 0;
  padding: 0;
}

input,
select {
  background: #fff;
  border: 1px solid #c4cdda;
  vertical-align: middle;
}

input[type=file] {
  border: 0;
}

input[type=text]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

input[type=password]::-ms-reveal {
  display: none;
}

textarea {
  width: 100%;
  background: #fff;
  font-family: "Pretendard", "돋움", sans-serif;
  border: 0;
  margin: 0;
  padding: 0;
  resize: none;
  -webkit-border-radius: 0;
  -webkit-appearance: none;
  -moz-border-radius: 0;
  word-break: break-all;
  /*    outline: none;*/
}

a,
input,
textarea,
keygen,
select,
button {
  font-family: "Pretendard", "돋움", sans-serif;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

label {
  cursor: pointer;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: none;
  color: #333;
}

button[disabled=disabled] {
  opacity: 0.5;
  cursor: inherit;
}

button > span,
button > .fa {
  position: relative;
}

input,
textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}

input[readonly],
input[readonly=readonly] {
  background: #f5f5f5;
}

legend,
.hidden, .blind {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
}

ol,
ul,
li {
  list-style: none;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=checkbox] {
  -webkit-appearance: checkbox;
}

input[type=radio] {
  -webkit-appearance: radio;
}

*, a, button, input, textarea, label {
  -webkit-tap-highlight-color: transparent;
}

.pc-hidden {
  display: none;
}

.mobile-hidden {
  display: block;
}

#wrap .pc-hidden {
  display: none;
}

#wrap .mobile-hidden {
  display: block;
}

#wrap .mobile-hidden.inline {
  display: inline;
}

#wrap .footer .mobile-hidden {
  display: inline-block;
}

@media screen and (max-width: 768px) {
  #wrap .pc-hidden {
    display: block;
  }
  #wrap .mobile-hidden {
    display: none;
  }
  #wrap .mobile-hidden.inline {
    display: none;
  }
  #wrap .footer .mobile-hidden {
    display: none;
  }
}
body::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

body::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.thin {
  font-weight: 100;
}

.header {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 5.625rem;
  padding: 0 3.75rem;
  background-color: #fff;
  transition: all ease 0.5s;
}
@media screen and (max-width: 1270px) {
  .header {
    height: 3.75rem;
    padding: 0 1.25rem 0 1.5625rem;
  }
  .header .logo img {
    width: 6.5625rem;
  }
}
.header.up {
  transform: translateY(-100%);
}
.header-inner {
  display: flex;
  width: 100%;
  height: 100%;
  max-width: 93.75rem;
  margin: 0 auto;
  background-color: #fff;
  align-items: center;
  justify-content: space-between;
}
.header-tel-box {
  display: flex;
  align-items: center;
}
.header-tel-box .btn-tel {
  margin-right: 20px;
  font-size: 18px;
  font-weight: 700;
}
.header-tel-box .btn-tel img {
  margin-right: 4px;
}
@media screen and (max-width: 1270px) {
  .header-tel-box {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 52px;
  }
  .header-tel-box .btn-tel {
    font-size: 16px;
    margin-right: 8px;
  }
  .header-tel-box img {
    margin-right: 2px;
    width: 20px;
    height: 20px;
  }
}
.header .contact-us-box {
  display: flex;
  overflow: hidden;
  width: 8.125rem;
  height: 2.3125rem;
  border-radius: 1.25rem;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 1270px) {
  .header .contact-us-box {
    display: none;
  }
}
.header .contact-us-box .contact-us {
  display: flex;
  position: relative;
  width: 8.125rem;
  height: 2.3125rem;
  border: 0.125rem solid #333;
  border-radius: 1.25rem;
}
.header .contact-us-box .contact-us > .contact-us-text {
  display: flex;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  font-size: 1.125rem;
  color: #333;
  transition: all ease 0.3s;
  align-items: center;
  justify-content: center;
}
.header .contact-us-box .contact-us:after {
  content: "";
  display: block;
  overflow: hidden;
  position: absolute;
  top: -0.125rem;
  right: -0.125rem;
  z-index: 0;
  width: 0;
  height: 2.3125rem;
  border-radius: 1.25rem;
  background-color: #FFCD00;
  transition: all ease 0.5s;
}
.header .contact-us-box .contact-us:hover {
  border: 0.125rem solid #56B289;
  transition: all ease 0.6s;
}
.header .contact-us-box .contact-us:hover:after {
  right: auto;
  left: -0.1875rem;
  width: 104%;
}
.header .contact-us-box .contact-us:hover > .contact-us-text {
  color: #fff;
}

@media screen and (max-width: 1270px) {
  .menu.on .menu-button {
    position: fixed;
    top: 1.375rem;
    right: 1.75rem;
    z-index: 1;
    width: 1.0625rem;
    height: 1.0625rem;
    background: url(../../images/mobile/menu-close.svg) no-repeat;
  }
  .menu.on .gnb {
    display: flex;
    top: 0;
    z-index: -1;
    opacity: 1;
    visibility: initial;
    transition-delay: 0s;
  }
}
.menu-button,
.mobile-menu {
  display: none;
}

@media screen and (max-width: 1270px) {
  .mobile-menu {
    display: flex;
    margin-top: 5.625rem;
    flex-direction: column;
  }
  .mobile-menu > .link {
    margin-bottom: 1.25rem;
    font-weight: 500;
    font-size: 1.125rem;
    color: #666;
  }
  .mobile-menu > .link > img {
    margin-left: 0.5rem;
  }
}
.menu-button {
  width: 2rem;
  height: 2rem;
  background: url(../../images/mobile/menu.svg) no-repeat;
  background-position: center center;
  pointer-events: auto;
}
@media screen and (max-width: 1270px) {
  .menu-button {
    display: block;
  }
}

.gnb {
  display: flex;
}
@media screen and (max-width: 1270px) {
  .gnb {
    display: flex;
    position: fixed;
    top: -100%;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    padding: 8rem 1.5625rem;
    background-color: #fff;
    transition: all ease 1s;
    flex-direction: column;
    visibility: hidden;
  }
}
.gnb > .link {
  display: flex;
  position: relative;
  margin-left: 3.5625rem;
  padding: 0 1rem;
  font-size: 1.25rem;
  letter-spacing: -0.03rem;
  align-items: center;
}
@media screen and (min-width: 1271px) {
  .gnb > .link:hover:after {
    width: 100%;
  }
}
@media screen and (max-width: 1270px) {
  .gnb > .link {
    margin: 0 0 2.1875rem 0;
    padding: 0;
    font-weight: 700;
    font-size: 1.75rem;
    color: #333;
    letter-spacing: -0.03rem;
    align-items: flex-start;
  }
  .gnb > .link:last-of-type {
    margin-bottom: 0;
  }
}
.gnb > .link:first-child {
  margin-left: 0;
}
.gnb > .link:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -0.9375rem;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #FFCD00;
  transition: all ease 0.3s;
}
.gnb > .link > .blog-arrow-box {
  display: flex;
  overflow: hidden;
  position: relative;
  width: 0.8125rem;
  height: 0.8125rem;
}
@media screen and (max-width: 1270px) {
  .gnb > .link > .blog-arrow-box {
    margin: 0.5rem 0 0 0.375rem;
  }
}
.gnb > .link .blog-arrow {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  transition: all ease 0.2s;
}
@media screen and (max-width: 1270px) {
  .gnb > .link .blog-arrow {
    width: 1.125rem;
    opacity: 1;
  }
}
.gnb > .link.blog:hover .blog-arrow, .gnb > .link.blog:focus .blog-arrow {
  opacity: 1;
}

.contents {
  overflow: hidden;
}

.contact {
  display: flex;
  width: 100%;
  max-width: 101.25rem;
  margin: 0 auto;
  padding: 0 3.75rem 13.1875rem;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .contact {
    width: 100%;
    padding: 10rem 1.5625rem 14.6875rem;
    flex-direction: column;
  }
}
.contact.section {
  padding-top: 2.8125rem;
}
.contact .column {
  display: flex;
  width: 50%;
  flex-direction: column;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .contact .column {
    width: 100%;
  }
  .contact .column:first-child {
    margin-bottom: 21.333vw;
  }
}
.contact .column .inquire-text {
  margin-top: 1.875rem;
  font-weight: 500;
  font-size: 1.3125rem;
  line-height: 2rem;
}
@media screen and (max-width: 1919px) {
  .contact .column .inquire-text {
    margin-top: 1.56vw;
    font-size: 1.093vw;
    line-height: 1.666vw;
  }
}
@media screen and (max-width: 768px) {
  .contact .column .inquire-text {
    margin-top: 1.875rem;
    font-size: 4.8vw;
    line-height: 5.8666vw;
    letter-spacing: -0.01em;
  }
}
.contact .column .inquire-link-box {
  display: flex;
  overflow: hidden;
  position: relative;
  width: 14.375rem;
  height: 3.75rem;
  margin-top: 5rem;
  border-radius: 2.5rem;
}
@media screen and (max-width: 1919px) {
  .contact .column .inquire-link-box {
    width: 11.979vw;
    height: 3.125vw;
    margin-top: 4.1666vw;
    border-radius: 2.0833vw;
  }
}
@media screen and (max-width: 768px) {
  .contact .column .inquire-link-box {
    width: 53.333vw;
    height: 13.333vw;
    margin-top: 6.666vw;
  }
}
.contact .column .inquire-link-box .inquire-link {
  display: flex;
  width: 14.375rem;
  height: 3.75rem;
  border: 0.1875rem solid #333;
  border-radius: 2.5rem;
  font-weight: 500;
  font-size: 1.3125rem;
  opacity: 0;
  align-items: center;
  justify-content: center;
  transform: translateY(100%);
  transition: all ease 0.8s;
}
@media screen and (max-width: 1919px) {
  .contact .column .inquire-link-box .inquire-link {
    width: 11.979vw;
    height: 3.125vw;
    border: 0.156vw solid #333;
    border-radius: 2.083vw;
    font-size: 1.093vw;
  }
}
@media screen and (max-width: 768px) {
  .contact .column .inquire-link-box .inquire-link {
    width: 100%;
    height: 100%;
    border: 0.0625rem solid #333;
    border-radius: 10.666vw;
    font-size: 4vw;
  }
}
.contact .column .inquire-link-box .inquire-link.js-on {
  opacity: 1;
  transform: translateY(0);
}
.contact .column .inquire-link-box .inquire-link:after {
  content: "";
  display: block;
  overflow: hidden;
  position: absolute;
  top: -0.125rem;
  right: -0.125rem;
  z-index: 0;
  width: 0;
  height: 3.875rem;
  border-radius: 2.5rem;
  background-color: #FFCD00;
  transition: all ease 0.5s;
}
.contact .column .inquire-link-box .inquire-link:hover {
  border: 0.1875rem solid #FFCD00;
  color: #fff;
  transition: all ease 0.6s;
}
@media screen and (max-width: 1270px) {
  .contact .column .inquire-link-box .inquire-link:hover {
    border: 0.0625rem solid #333;
    color: #333;
    transition: none;
  }
}
.contact .column .inquire-link-box .inquire-link:hover:after {
  right: auto;
  left: -0.125rem;
  width: 103%;
}
@media screen and (max-width: 1270px) {
  .contact .column .inquire-link-box .inquire-link:hover:after {
    left: auto;
    width: 0;
  }
}
.contact .column .inquire-link-box .inquire-link-text {
  position: relative;
  z-index: 1;
  transition: all ease none;
}
.contact .consult-banner {
  width: 100%;
  margin-top: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2962ff;
  padding: 23px 15px;
  gap: 10px;
  border-radius: 8px;
  word-break: keep-all;
}
@media only screen and (max-width: 950px) {
  .contact .consult-banner {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}
@media screen and (max-width: 768px) {
  .contact .consult-banner {
    margin-top: 21.333vw;
  }
}
.contact .consult-banner .badge {
  border-radius: 4px;
  background: #fdec00;
  font-size: 23px;
  font-weight: 700;
  padding: 10px;
}
@media only screen and (max-width: 1550px) {
  .contact .consult-banner .badge {
    font-size: 15px;
    padding: 4px 10px;
  }
}
.contact .consult-banner .text span {
  font-size: 32px;
  font-weight: 800;
  -webkit-text-stroke: 1.5px #000;
  line-height: 1.3;
}
@media only screen and (max-width: 1550px) {
  .contact .consult-banner .text span {
    font-size: 18px;
    -webkit-text-stroke: 1px #000;
  }
}
.contact .consult-banner .text span.yellow {
  color: #fdec00;
}
.contact .consult-banner .text span.white {
  color: #fff;
}
.contact .consult-banner .text span.white .link-icon {
  display: inline-block;
  width: 36px;
  height: 36px;
  background: url(../../images/pc/arrow-consult.svg) no-repeat center center/cover;
  vertical-align: top;
  transform: translateY(3px);
}
@media only screen and (max-width: 1550px) {
  .contact .consult-banner .text span.white .link-icon {
    width: 18px;
    height: 18px;
  }
}

.footer {
  display: flex;
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 3.6875rem;
  border-top: 0.0625rem solid #000;
  flex-direction: column;
}
@media screen and (max-width: 786px) {
  .footer {
    padding-bottom: 9.0625rem;
  }
}
.footer .footer-top {
  display: flex;
  max-width: 101.25rem;
  width: 100%;
  margin: 0 auto;
  padding: 3.75rem 3.75rem 0;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 1919px) {
  .footer .footer-top {
    padding: 3.125vw 3.125vw 0;
  }
}
@media screen and (max-width: 768px) {
  .footer .footer-top {
    padding: 16vw 6.666vw 0;
  }
}
.footer .footer-top > .column {
  display: flex;
}
.footer .footer-top > .column .footer-logo {
  width: 200px;
}
@media screen and (max-width: 1919px) {
  .footer .footer-top > .column .footer-logo {
    width: 9.01vw;
  }
}
@media screen and (max-width: 768px) {
  .footer .footer-top > .column .footer-logo {
    width: 43vw;
  }
}
.footer .footer-top > .column > .tel {
  display: flex;
  margin-right: 1.25rem;
  font-weight: 600;
  font-size: 1.1875rem;
  align-items: center;
}
@media screen and (max-width: 1919px) {
  .footer .footer-top > .column > .tel {
    padding: 3.125vw 3.125vw 0;
  }
}
.footer .footer-top > .column > .tel > .num {
  display: inline-block;
  margin-left: 0.625rem;
  font-size: 2rem;
}
.footer .footer-top > .column .fnb {
  display: flex;
  align-items: center;
}
.footer .footer-top > .column .fnb-list {
  position: relative;
  margin-right: 4.75rem;
}
.footer .footer-top > .column .fnb-list:last-child {
  margin-right: 3.125rem;
}
.footer .footer-top > .column .fnb-list:last-child:after {
  display: none;
}
.footer .footer-top > .column .fnb-list:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: -2.375rem;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background-color: #333;
  opacity: 0.6;
  transform: translateY(-50%);
}
.footer .footer-top > .column .fnb-list > .fnb-link {
  font-weight: 600;
  font-size: 1.1875rem;
  transition: all ease 0.3s;
}
.footer .footer-top > .column .fnb-list > .fnb-link:hover {
  color: #56B289;
}
.footer .footer-top .dropdown {
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .footer .footer-top .dropdown {
    position: absolute;
    bottom: 4.0625rem;
    left: 6.666vw;
  }
}
.footer .footer-top .dropdown .family-site {
  display: flex;
  width: 10rem;
  height: 2.5rem;
  padding: 0 1rem;
  border: 0.0625rem solid #333;
  font-size: 1.125rem;
  align-items: center;
  justify-content: space-between;
}
.footer .footer-top .dropdown img {
  transition: all ease 0.3s;
}
.footer .footer-top .dropdown.on .dropdown-menu {
  display: block;
}
.footer .footer-top .dropdown.on img {
  transform: rotate(45deg);
}
.footer .footer-top .dropdown .dropdown-menu {
  display: none;
  overflow: hidden;
  overflow-y: auto;
  position: absolute;
  bottom: 2.4375rem;
  left: 0;
  width: 10rem;
  height: 13.125rem;
  border: 0.0625rem solid #333;
  background-color: #fff;
}
.footer .footer-top .dropdown .dropdown-menu::-webkit-scrollbar {
  width: 19px;
  margin: 0 0.5rem;
  background-color: transparent;
}
.footer .footer-top .dropdown .dropdown-menu::-webkit-scrollbar-thumb {
  border: 8px solid transparent;
  border-radius: 1.25rem;
  background-clip: padding-box;
  background-color: #e5e5e5;
}
.footer .footer-top .dropdown .dropdown-menu::-webkit-scrollbar {
  background-color: transparent;
}
.footer .footer-top .dropdown .dropdown-menu-list {
  display: flex;
  position: relative;
  width: 100%;
  height: 1.625rem;
  align-items: center;
  justify-content: flex-start;
}
.footer .footer-top .dropdown .dropdown-menu-link {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 10rem;
  height: 100%;
  padding: 0.3125rem 0 0.3125rem 0.5rem;
  font-size: 0.875rem;
  letter-spacing: -0.03rem;
}
.footer .footer-top .dropdown .dropdown-menu-link:hover {
  background-color: rgba(255, 210, 48, 0.3);
}
.footer .footer-info {
  display: flex;
  position: relative;
  max-width: 101.25rem;
  width: 100%;
  margin: 4.6875rem auto 0;
  padding: 0 3.75rem 5.4375rem;
  justify-content: space-between;
}
@media screen and (max-width: 1919px) {
  .footer .footer-info {
    margin: 3.906vw auto 0;
    padding: 0 3.125vw 4.531vw;
  }
}
@media screen and (max-width: 768px) {
  .footer .footer-info {
    margin-top: 9.333vw;
    padding: 0 6.666vw;
    flex-direction: column;
  }
}
@media screen and (max-width: 768px) {
  .footer .footer-info > .column:nth-of-type(2) {
    display: flex;
    flex-direction: column-reverse;
  }
}
.footer .footer-info > .column .address {
  font-weight: 500;
  font-size: 0.8333vw;
  line-height: 1.6875rem;
}
@media screen and (max-width: 1919px) {
  .footer .footer-info > .column .address {
    line-height: 1.406vw;
  }
}
@media screen and (max-width: 768px) {
  .footer .footer-info > .column .address {
    font-size: 3.7333vw;
    line-height: 5.333vw;
  }
}
.footer .footer-info > .column .reserved {
  margin-top: 1.6875rem;
  font-weight: 500;
  font-size: 1rem;
}
@media screen and (max-width: 1919px) {
  .footer .footer-info > .column .reserved {
    margin-top: 1.406vw;
    font-size: 0.8333vw;
  }
}
@media screen and (max-width: 768px) {
  .footer .footer-info > .column .reserved {
    margin-top: 5.333vw;
    font-size: 3.7333vw;
  }
}
.footer .footer-info > .column .copyright {
  color: #666;
  line-height: 1.6875rem;
  text-align: right;
}
@media screen and (max-width: 1919px) {
  .footer .footer-info > .column .copyright {
    font-size: 0.8333vw;
    line-height: 1.406vw;
  }
}
@media screen and (max-width: 768px) {
  .footer .footer-info > .column .copyright {
    margin-top: 3.4666vw;
    font-size: 3.7333vw;
    line-height: 5.333vw;
    text-align: left;
  }
}
.footer .footer-info > .column .footer-link-area {
  margin-top: 1.625rem;
  text-align: right;
}
@media screen and (max-width: 1919px) {
  .footer .footer-info > .column .footer-link-area {
    margin-top: 1.354vw;
  }
}
@media screen and (max-width: 768px) {
  .footer .footer-info > .column .footer-link-area {
    text-align: left;
  }
}
.footer .footer-info > .column .footer-link-area > .footer-link {
  display: inline-block;
  position: relative;
  margin-right: 60px;
  font-size: 1.125rem;
  color: #666;
}
@media screen and (max-width: 1919px) {
  .footer .footer-info > .column .footer-link-area > .footer-link {
    margin-right: 3.125vw;
    font-size: 0.936vw;
  }
}
@media screen and (max-width: 768px) {
  .footer .footer-info > .column .footer-link-area > .footer-link {
    margin-right: 8vw;
    font-size: 4vw;
    letter-spacing: -0.128vw;
  }
}
.footer .footer-info > .column .footer-link-area > .footer-link:last-child {
  margin-right: 0;
}
.footer .footer-info > .column .footer-link-area > .footer-link:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: -2.25rem;
  width: 0.125rem;
  height: 1.125rem;
  background-color: #666;
  transform: translateY(-50%);
}
@media screen and (max-width: 1919px) {
  .footer .footer-info > .column .footer-link-area > .footer-link:after {
    right: -1.875vw;
    height: 0.937vw;
  }
}
@media screen and (max-width: 768px) {
  .footer .footer-info > .column .footer-link-area > .footer-link:after {
    right: -4.8vw;
    height: 3.2vw;
  }
}
.footer .footer-info > .column .footer-link-area > .footer-link:last-child:after {
  display: none;
}
.footer .top-button {
  display: flex;
  position: absolute;
  right: 3.75rem;
  bottom: 0;
  margin-top: 3.125rem;
  text-align: center;
  flex-direction: column;
  align-self: flex-end;
  align-items: center;
}
@media screen and (max-width: 1919px) {
  .footer .top-button {
    right: 3.125vw;
  }
}
@media screen and (max-width: 786px) {
  .footer .top-button {
    right: 6.666vw;
    bottom: -4.6875rem;
  }
}
.footer .top-button-icon {
  margin-bottom: 0.25rem;
}
@media screen and (max-width: 1270px) {
  .footer .top-button-icon {
    margin-bottom: 0;
  }
}

.section {
  position: relative;
}
.section .up-box {
  overflow: hidden;
}
.section-title {
  font-size: 4.625rem;
  line-height: 5.5625rem;
  letter-spacing: -0.03rem;
}
@media screen and (max-width: 1919px) {
  .section-title {
    font-size: 3.854vw;
    line-height: 4.635vw;
    letter-spacing: -0.03em;
  }
}
@media screen and (max-width: 768px) {
  .section-title {
    font-size: 7.8vw;
    line-height: 9.6vw;
  }
}
.section-title .letter {
  display: block;
}
.section-title .letter.white {
  color: #fff;
}
.section-inner {
  width: 100%;
  max-width: 101.25rem;
  margin: 0 auto;
  padding: 0 3.75rem;
}
@media screen and (max-width: 768px) {
  .section-inner {
    padding: 0 1.5625rem;
  }
}
.section .up {
  opacity: 0;
  transform: translateY(100%);
  transition: all ease 1.6s;
  transition-delay: 0.2s;
}
.section .up.js-on {
  opacity: 1;
  transform: translateY(0);
}
.section .up-box:nth-child(1) .up {
  transition: all ease 700ms;
  transition-delay: 0.2s;
}
.section .swiper-slide.up-box:nth-child(1) .up {
  transition: all ease 200ms;
  transition-delay: 0.2s;
}
.section .column .up-box:nth-child(1) .up {
  transition: all ease 400ms;
  transition-delay: 0.2s;
}
.section .up-box:nth-child(2) .up {
  transition: all ease 1400ms;
  transition-delay: 0.2s;
}
.section .swiper-slide.up-box:nth-child(2) .up {
  transition: all ease 400ms;
  transition-delay: 0.2s;
}
.section .column .up-box:nth-child(2) .up {
  transition: all ease 800ms;
  transition-delay: 0.2s;
}
.section .up-box:nth-child(3) .up {
  transition: all ease 2100ms;
  transition-delay: 0.2s;
}
.section .swiper-slide.up-box:nth-child(3) .up {
  transition: all ease 600ms;
  transition-delay: 0.2s;
}
.section .column .up-box:nth-child(3) .up {
  transition: all ease 1200ms;
  transition-delay: 0.2s;
}
.section .up-box:nth-child(4) .up {
  transition: all ease 2800ms;
  transition-delay: 0.2s;
}
.section .swiper-slide.up-box:nth-child(4) .up {
  transition: all ease 800ms;
  transition-delay: 0.2s;
}
.section .column .up-box:nth-child(4) .up {
  transition: all ease 1600ms;
  transition-delay: 0.2s;
}
.section .up-box:nth-child(5) .up {
  transition: all ease 3500ms;
  transition-delay: 0.2s;
}
.section .swiper-slide.up-box:nth-child(5) .up {
  transition: all ease 1000ms;
  transition-delay: 0.2s;
}
.section .column .up-box:nth-child(5) .up {
  transition: all ease 2000ms;
  transition-delay: 0.2s;
}
.section .up-box:nth-child(6) .up {
  transition: all ease 4200ms;
  transition-delay: 0.2s;
}
.section .swiper-slide.up-box:nth-child(6) .up {
  transition: all ease 1200ms;
  transition-delay: 0.2s;
}
.section .column .up-box:nth-child(6) .up {
  transition: all ease 2400ms;
  transition-delay: 0.2s;
}
.section .up-box:nth-child(7) .up {
  transition: all ease 4900ms;
  transition-delay: 0.2s;
}
.section .swiper-slide.up-box:nth-child(7) .up {
  transition: all ease 1400ms;
  transition-delay: 0.2s;
}
.section .column .up-box:nth-child(7) .up {
  transition: all ease 2800ms;
  transition-delay: 0.2s;
}
.section .up-box:nth-child(8) .up {
  transition: all ease 5600ms;
  transition-delay: 0.2s;
}
.section .swiper-slide.up-box:nth-child(8) .up {
  transition: all ease 1600ms;
  transition-delay: 0.2s;
}
.section .column .up-box:nth-child(8) .up {
  transition: all ease 3200ms;
  transition-delay: 0.2s;
}
.section .up-box:nth-child(9) .up {
  transition: all ease 6300ms;
  transition-delay: 0.2s;
}
.section .swiper-slide.up-box:nth-child(9) .up {
  transition: all ease 1800ms;
  transition-delay: 0.2s;
}
.section .column .up-box:nth-child(9) .up {
  transition: all ease 3600ms;
  transition-delay: 0.2s;
}
.section .up-box:nth-child(10) .up {
  transition: all ease 7000ms;
  transition-delay: 0.2s;
}
.section .swiper-slide.up-box:nth-child(10) .up {
  transition: all ease 2000ms;
  transition-delay: 0.2s;
}
.section .column .up-box:nth-child(10) .up {
  transition: all ease 4000ms;
  transition-delay: 0.2s;
}
.section .up-box:nth-child(11) .up {
  transition: all ease 7700ms;
  transition-delay: 0.2s;
}
.section .swiper-slide.up-box:nth-child(11) .up {
  transition: all ease 2200ms;
  transition-delay: 0.2s;
}
.section .column .up-box:nth-child(11) .up {
  transition: all ease 4400ms;
  transition-delay: 0.2s;
}
.section .up-box:nth-child(12) .up {
  transition: all ease 8400ms;
  transition-delay: 0.2s;
}
.section .swiper-slide.up-box:nth-child(12) .up {
  transition: all ease 2400ms;
  transition-delay: 0.2s;
}
.section .column .up-box:nth-child(12) .up {
  transition: all ease 4800ms;
  transition-delay: 0.2s;
}
.section .up-box:nth-child(13) .up {
  transition: all ease 9100ms;
  transition-delay: 0.2s;
}
.section .swiper-slide.up-box:nth-child(13) .up {
  transition: all ease 2600ms;
  transition-delay: 0.2s;
}
.section .column .up-box:nth-child(13) .up {
  transition: all ease 5200ms;
  transition-delay: 0.2s;
}
.section .up-box:nth-child(14) .up {
  transition: all ease 9800ms;
  transition-delay: 0.2s;
}
.section .swiper-slide.up-box:nth-child(14) .up {
  transition: all ease 2800ms;
  transition-delay: 0.2s;
}
.section .column .up-box:nth-child(14) .up {
  transition: all ease 5600ms;
  transition-delay: 0.2s;
}
.section .up-box:nth-child(15) .up {
  transition: all ease 10500ms;
  transition-delay: 0.2s;
}
.section .swiper-slide.up-box:nth-child(15) .up {
  transition: all ease 3000ms;
  transition-delay: 0.2s;
}
.section .column .up-box:nth-child(15) .up {
  transition: all ease 6000ms;
  transition-delay: 0.2s;
}
.section .up-box:nth-child(16) .up {
  transition: all ease 11200ms;
  transition-delay: 0.2s;
}
.section .swiper-slide.up-box:nth-child(16) .up {
  transition: all ease 3200ms;
  transition-delay: 0.2s;
}
.section .column .up-box:nth-child(16) .up {
  transition: all ease 6400ms;
  transition-delay: 0.2s;
}
.section .up-box:nth-child(17) .up {
  transition: all ease 11900ms;
  transition-delay: 0.2s;
}
.section .swiper-slide.up-box:nth-child(17) .up {
  transition: all ease 3400ms;
  transition-delay: 0.2s;
}
.section .column .up-box:nth-child(17) .up {
  transition: all ease 6800ms;
  transition-delay: 0.2s;
}
.section .up-box:nth-child(18) .up {
  transition: all ease 12600ms;
  transition-delay: 0.2s;
}
.section .swiper-slide.up-box:nth-child(18) .up {
  transition: all ease 3600ms;
  transition-delay: 0.2s;
}
.section .column .up-box:nth-child(18) .up {
  transition: all ease 7200ms;
  transition-delay: 0.2s;
}
.section .up-box:nth-child(19) .up {
  transition: all ease 13300ms;
  transition-delay: 0.2s;
}
.section .swiper-slide.up-box:nth-child(19) .up {
  transition: all ease 3800ms;
  transition-delay: 0.2s;
}
.section .column .up-box:nth-child(19) .up {
  transition: all ease 7600ms;
  transition-delay: 0.2s;
}
.section .up-box:nth-child(20) .up {
  transition: all ease 14000ms;
  transition-delay: 0.2s;
}
.section .swiper-slide.up-box:nth-child(20) .up {
  transition: all ease 4000ms;
  transition-delay: 0.2s;
}
.section .column .up-box:nth-child(20) .up {
  transition: all ease 8000ms;
  transition-delay: 0.2s;
}
.section .up-box:nth-child(21) .up {
  transition: all ease 14700ms;
  transition-delay: 0.2s;
}
.section .swiper-slide.up-box:nth-child(21) .up {
  transition: all ease 4200ms;
  transition-delay: 0.2s;
}
.section .column .up-box:nth-child(21) .up {
  transition: all ease 8400ms;
  transition-delay: 0.2s;
}
.section .up-box:nth-child(22) .up {
  transition: all ease 15400ms;
  transition-delay: 0.2s;
}
.section .swiper-slide.up-box:nth-child(22) .up {
  transition: all ease 4400ms;
  transition-delay: 0.2s;
}
.section .column .up-box:nth-child(22) .up {
  transition: all ease 8800ms;
  transition-delay: 0.2s;
}
.section .up-box:nth-child(23) .up {
  transition: all ease 16100ms;
  transition-delay: 0.2s;
}
.section .swiper-slide.up-box:nth-child(23) .up {
  transition: all ease 4600ms;
  transition-delay: 0.2s;
}
.section .column .up-box:nth-child(23) .up {
  transition: all ease 9200ms;
  transition-delay: 0.2s;
}
.section .up-box:nth-child(24) .up {
  transition: all ease 16800ms;
  transition-delay: 0.2s;
}
.section .swiper-slide.up-box:nth-child(24) .up {
  transition: all ease 4800ms;
  transition-delay: 0.2s;
}
.section .column .up-box:nth-child(24) .up {
  transition: all ease 9600ms;
  transition-delay: 0.2s;
}
.section .up-box:nth-child(25) .up {
  transition: all ease 17500ms;
  transition-delay: 0.2s;
}
.section .swiper-slide.up-box:nth-child(25) .up {
  transition: all ease 5000ms;
  transition-delay: 0.2s;
}
.section .column .up-box:nth-child(25) .up {
  transition: all ease 10000ms;
  transition-delay: 0.2s;
}
.section .up-box:nth-child(26) .up {
  transition: all ease 18200ms;
  transition-delay: 0.2s;
}
.section .swiper-slide.up-box:nth-child(26) .up {
  transition: all ease 5200ms;
  transition-delay: 0.2s;
}
.section .column .up-box:nth-child(26) .up {
  transition: all ease 10400ms;
  transition-delay: 0.2s;
}
.section .up-box:nth-child(27) .up {
  transition: all ease 18900ms;
  transition-delay: 0.2s;
}
.section .swiper-slide.up-box:nth-child(27) .up {
  transition: all ease 5400ms;
  transition-delay: 0.2s;
}
.section .column .up-box:nth-child(27) .up {
  transition: all ease 10800ms;
  transition-delay: 0.2s;
}
.section .up-box:nth-child(28) .up {
  transition: all ease 19600ms;
  transition-delay: 0.2s;
}
.section .swiper-slide.up-box:nth-child(28) .up {
  transition: all ease 5600ms;
  transition-delay: 0.2s;
}
.section .column .up-box:nth-child(28) .up {
  transition: all ease 11200ms;
  transition-delay: 0.2s;
}
.section .up-box:nth-child(29) .up {
  transition: all ease 20300ms;
  transition-delay: 0.2s;
}
.section .swiper-slide.up-box:nth-child(29) .up {
  transition: all ease 5800ms;
  transition-delay: 0.2s;
}
.section .column .up-box:nth-child(29) .up {
  transition: all ease 11600ms;
  transition-delay: 0.2s;
}
.section .up-box:nth-child(30) .up {
  transition: all ease 21000ms;
  transition-delay: 0.2s;
}
.section .swiper-slide.up-box:nth-child(30) .up {
  transition: all ease 6000ms;
  transition-delay: 0.2s;
}
.section .column .up-box:nth-child(30) .up {
  transition: all ease 12000ms;
  transition-delay: 0.2s;
}
.section-sub-title {
  font-weight: 400;
  font-size: 2rem;
  line-height: 2.75rem;
  letter-spacing: 0.01rem;
}
@media screen and (max-width: 1919px) {
  .section-sub-title {
    font-size: 1.666vw;
    line-height: 1.875vw;
  }
}
@media screen and (max-width: 768px) {
  .section-sub-title {
    font-size: 4.5vw;
    line-height: 5.866vw;
  }
}
.section-description {
  font-size: 1.125rem;
  line-height: 1.875rem;
}
@media screen and (max-width: 1919px) {
  .section-description {
    font-size: 0.937vw;
    line-height: 1.562vw;
  }
}
@media screen and (max-width: 768px) {
  .section-description {
    font-size: 3.733vw;
    line-height: 4.533vw;
  }
}

.popup {
  display: flex;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: 100%;
  height: 100vh;
  padding-top: 5.3125rem;
  background-color: #E8FAEE;
  align-items: center;
  flex-direction: column;
  transform: translate(-50%, -50%);
  transition: all ease 3s;
}
.popup.hide {
  opacity: 0;
}
.popup > img:nth-of-type(1) {
  margin-top: 5.3125rem;
}
.popup > img:nth-of-type(2) {
  margin-top: -2.1875rem;
}

.section1 {
  display: flex;
  height: calc(100vh - 9.375rem);
  min-height: 50.75rem;
  padding: 14.5rem 0;
  align-items: flex-start;
}
@media screen and (max-width: 1919px) {
  .section1 {
    height: calc(100vh - 7.8125vw);
    padding: 12.083vw 0;
  }
}
@media screen and (max-width: 768px) {
  .section1 {
    height: auto;
    min-height: auto;
    padding: 10rem 0 17.8125rem;
  }
}
.section1 .section-title {
  position: relative;
}
.section1 .star-box {
  position: absolute;
  bottom: 0.625rem;
  right: 23.125rem;
}
@media screen and (max-width: 1919px) {
  .section1 .star-box {
    bottom: 0.52vw;
    right: 19.27vw;
  }
}
@media screen and (max-width: 768px) {
  .section1 .star-box {
    bottom: -18.666vw;
    right: 0;
  }
}
.section1 .star {
  position: relative;
  width: 4.375rem;
  height: 4.375rem;
  margin-left: 1.25rem;
  opacity: 0;
  transition: all ease 0.5s;
}
@media screen and (max-width: 768px) {
  .section1 .star {
    width: 13.333vw;
    height: 13.333vw;
  }
}
.section1 .star.show {
  opacity: 1;
}
.section1 .star-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.25rem;
  height: 4.375rem;
  background-color: #FFCD00;
  margin: -50% 0 0 -15%;
  transition: all ease 0.5s;
}
@media screen and (max-width: 768px) {
  .section1 .star-line {
    width: 3.733vw;
    height: 13.333vw;
  }
}
.section1 .star.on .star-line:nth-child(1) {
  transform: rotate(360deg);
}
.section1 .star.on .star-line:nth-child(2) {
  transform: rotate(120deg);
}
.section1 .star.on .star-line:nth-child(3) {
  transform: rotate(60deg);
}

.section2 {
  display: flex;
  align-items: center;
  padding-bottom: 4rem;
}
@media screen and (max-width: 1919px) {
  .section2 {
    padding-bottom: 3.333vw;
  }
}
@media screen and (max-width: 768px) {
  .section2 {
    padding-top: 42.666vw;
    align-items: flex-start;
  }
}
.section2 > .img-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
  transform: translateX(-50%);
  transition: all ease 0.5s;
}
.section2 > .img-wrap .img-box {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translateX(-50%);
}
.section2 > .img-wrap .img-box > .img {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50vw;
  max-width: 100%;
  padding-bottom: 47.91%;
  background-image: url(../../images/pc/main_img_1920.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  .section2 > .img-wrap .img-box > .img {
    padding-bottom: 181.33%;
    background-image: url(../../images/mobile/section2-img.png);
  }
}
.section2 > .section-title {
  position: relative;
  z-index: 1;
}

.section3 {
  padding: 12.5rem 0;
}
@media screen and (max-width: 1919px) {
  .section3 {
    padding: 10.41vw 0;
  }
}
@media screen and (max-width: 768px) {
  .section3 {
    padding: 53vw 0 36vw;
  }
}
.section3 .smartbiz-service {
  display: flex;
  width: 100%;
  margin-top: 10.75rem;
  justify-content: space-between;
}
@media screen and (max-width: 1919px) {
  .section3 .smartbiz-service {
    margin-top: 8.958vw;
  }
}
@media screen and (max-width: 768px) {
  .section3 .smartbiz-service {
    margin-top: 7.5rem;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
}
@media screen and (max-width: 768px) {
  .section3 .smartbiz-service .list {
    margin-top: 4.0625rem;
  }
  .section3 .smartbiz-service .list:first-of-type {
    margin-top: 0;
  }
}
.section3 .smartbiz-service .list .number {
  font-weight: 600;
  font-size: 1.4375rem;
}
@media screen and (max-width: 119.9375rem) {
  .section3 .smartbiz-service .list .number {
    font-size: 1.197vw;
  }
}
@media screen and (max-width: 768px) {
  .section3 .smartbiz-service .list .number {
    font-size: 4.266vw;
  }
}
.section3 .smartbiz-service .list .title {
  margin-top: 0.9375rem;
  font-size: 2.625rem;
  letter-spacing: -0.03rem;
}
@media screen and (max-width: 119.9375rem) {
  .section3 .smartbiz-service .list .title {
    margin-top: 0.781vw;
    font-size: 2.1875vw;
  }
}
@media screen and (max-width: 768px) {
  .section3 .smartbiz-service .list .title {
    margin-top: 4vw;
    font-size: 6.4vw;
  }
}
.section3 .smartbiz-service .list .description {
  margin-top: 2.6875rem;
  font-size: 1.3125rem;
  line-height: 2rem;
}
@media screen and (max-width: 1919px) {
  .section3 .smartbiz-service .list .description {
    margin-top: 2.239vw;
    font-size: 1.093vw;
    line-height: 1.666vw;
  }
}
@media screen and (max-width: 768px) {
  .section3 .smartbiz-service .list .description {
    margin-top: 8vw;
    font-size: 4.8vw;
    line-height: 5.866vw;
  }
}

.section4 {
  padding: 9.375rem 0 14.375rem;
}
@media screen and (max-width: 768px) {
  .section4 {
    background-color: #FAFAFA;
  }
}
.section4 .section-inner {
  display: flex;
  position: relative;
  justify-content: space-between;
}
@media screen and (max-width: 1599px) {
  .section4 .section-inner {
    flex-direction: column;
  }
}
.section4 .box {
  margin-top: 6.375rem;
}
@media screen and (max-width: 1599px) {
  .section4 .box {
    margin-top: 0;
    margin-bottom: 5.5625rem;
  }
}
@media screen and (max-width: 768px) {
  .section4 .box {
    margin-top: 0;
  }
}
.section4 .box .section-sub-title {
  margin-top: 2.1875rem;
}
@media screen and (max-width: 1919px) {
  .section4 .box .section-sub-title {
    margin-top: 1.823vw;
  }
}
@media screen and (max-width: 768px) {
  .section4 .box .section-sub-title {
    margin-top: 8vw;
  }
}
.section4 .box .section-description {
  margin-top: 1.875rem;
}
@media screen and (max-width: 1919px) {
  .section4 .box .section-description {
    margin-top: 1.5625vw;
  }
}
@media screen and (max-width: 768px) {
  .section4 .box .section-description {
    margin-top: 4vw;
  }
}
.section4 .line {
  position: absolute;
  top: 50%;
  left: 31.25rem;
  width: 0;
  height: 0.125rem;
  background-color: #333;
  transition: all ease 1s;
  transition-delay: 1.3s;
}
@media screen and (max-width: 1599px) {
  .section4 .line {
    display: none;
  }
}
.section4 .box.js-on + .line {
  width: 17vw;
  max-width: 20rem;
}
.section4 .smartoffice-data-storage {
  display: flex;
  position: relative;
  width: 43.75rem;
  height: 43.75rem;
  opacity: 0;
  transition: all ease 2s;
  transition-delay: 1.8s;
}
@media screen and (max-width: 1599px) {
  .section4 .smartoffice-data-storage {
    width: 20.125rem;
    height: 20.125rem;
    margin: 15.625vw auto 0;
    transition-delay: 2.1s;
  }
}
.section4 .smartoffice-data-storage:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0rem;
  height: 0rem;
  border-radius: 50%;
  background-color: #F8F8F8;
  transform: translate(-50%, -50%);
  transition: all ease 0.7s;
  transition-delay: 2s;
}
.section4 .smartoffice-data-storage > .center {
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 11.3125rem;
  height: 11.3125rem;
  border-radius: 50%;
  background-color: #000;
  transform: translate(-50%, -50%);
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .section4 .smartoffice-data-storage > .center {
    width: 5.1875rem;
    height: 5.1875rem;
  }
}
@media screen and (max-width: 768px) {
  .section4 .smartoffice-data-storage > .center > img {
    display: none;
  }
}
.section4 .smartoffice-data-storage > .center:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 12.25rem;
  height: 12.25rem;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%);
}
.section4 .smartoffice-data-storage > .center:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 13.375rem;
  height: 13.375rem;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  transform: translate(-50%, -50%);
}
.section4 .smartoffice-data-storage > .center:hover .title {
  animation: 1s center-title;
}
.section4 .smartoffice-data-storage > .center > .title-box {
  overflow: hidden;
  margin-top: 1.125rem;
}
@media screen and (max-width: 768px) {
  .section4 .smartoffice-data-storage > .center > .title-box {
    margin-top: 0;
  }
}
.section4 .smartoffice-data-storage > .center > .title-box > .title {
  font-weight: 700;
  font-size: 1.0625rem;
  color: #fff;
  line-height: 1.375rem;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .section4 .smartoffice-data-storage > .center > .title-box > .title {
    font-size: 0.75rem;
    line-height: 0.975rem;
  }
}
@keyframes center-title {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-100%);
  }
  30% {
    opacity: 0;
  }
  40% {
    transform: translateY(100%);
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(0);
  }
}
.section4 .smartoffice-data-storage .company {
  z-index: 1;
}
.section4 .smartoffice-data-storage .company-list {
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7.5rem;
  height: 7.5rem;
  border: 0.0625rem solid #000;
  border-radius: 50%;
  background-color: #fff;
  font-size: 0.9375rem;
  color: #000;
  line-height: 1.1875rem;
  text-align: center;
  transform: translate(-50%, -50%);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all ease 0.7s;
  transition-delay: 2.5s;
  font-weight: 600;
}
.section4 .smartoffice-data-storage .company-list > a {
  padding: 0.5vw;
}
.section4 .smartoffice-data-storage .company-list > a:hover {
  text-decoration: underline;
}
@media screen and (max-width: 768px) {
  .section4 .smartoffice-data-storage .company-list {
    width: 3.4375rem;
    height: 3.4375rem;
    font-size: 0.625rem;
    line-height: 0.8125rem;
  }
}
.section4 .smartoffice-data-storage .company-list:before {
  content: "";
  display: block;
  position: absolute;
  width: 0.0625rem;
  height: 8.625rem;
  border: 0.0625rem dashed #ccc;
  opacity: 0;
  transition: all ease 0.7s;
  transition-delay: 2.7s;
}
@media screen and (max-width: 768px) {
  .section4 .smartoffice-data-storage .company-list:before {
    height: 5.625rem;
  }
}
.section4 .smartoffice-data-storage .company-list:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  width: 1.125rem;
  height: 1.125rem;
  background: url(../../images/pc/double-arrow.svg) no-repeat;
  background-size: cover;
  opacity: 0;
  transition: all ease 0.3s;
}
.section4 .box.js-on ~ .smartoffice-data-storage {
  opacity: 1;
}
.section4 .box.js-on ~ .smartoffice-data-storage:after {
  width: 36.25rem;
  height: 36.25rem;
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage:after {
    width: 20.125rem;
    height: 20.125rem;
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage > .center:before {
  animation: centerAni1 1.6s infinite;
}
@keyframes centerAni1 {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  91% {
    opacity: 0.9;
  }
  92% {
    opacity: 0.8;
  }
  93% {
    opacity: 0.7;
  }
  94% {
    opacity: 0.6;
  }
  95% {
    opacity: 0.5;
  }
  96% {
    opacity: 0.4;
  }
  97% {
    opacity: 0.3;
  }
  98% {
    opacity: 0.2;
  }
  99% {
    opacity: 0.1;
  }
  100% {
    width: 12.25rem;
    height: 12.25rem;
    opacity: 0;
  }
}
@media screen and (max-width: 768px) {
  @keyframes centerAni1 {
    0% {
      width: 0;
      height: 0;
      opacity: 1;
    }
    91% {
      opacity: 0.9;
    }
    92% {
      opacity: 0.8;
    }
    93% {
      opacity: 0.7;
    }
    94% {
      opacity: 0.6;
    }
    95% {
      opacity: 0.5;
    }
    96% {
      opacity: 0.4;
    }
    97% {
      opacity: 0.3;
    }
    98% {
      opacity: 0.2;
    }
    99% {
      opacity: 0.1;
    }
    100% {
      width: 5.625rem;
      height: 5.625rem;
      opacity: 0;
    }
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage > .center:after {
  animation: centerAni2 1.6s infinite;
}
@keyframes centerAni2 {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  91% {
    opacity: 0.9;
  }
  92% {
    opacity: 0.8;
  }
  93% {
    opacity: 0.7;
  }
  94% {
    opacity: 0.6;
  }
  95% {
    opacity: 0.5;
  }
  96% {
    opacity: 0.4;
  }
  97% {
    opacity: 0.3;
  }
  98% {
    opacity: 0.2;
  }
  99% {
    opacity: 0.1;
  }
  100% {
    width: 13.375rem;
    height: 13.375rem;
    opacity: 0;
  }
}
@media screen and (max-width: 768px) {
  @keyframes centerAni2 {
    0% {
      width: 0;
      height: 0;
      opacity: 1;
    }
    91% {
      opacity: 0.9;
    }
    92% {
      opacity: 0.8;
    }
    93% {
      opacity: 0.7;
    }
    94% {
      opacity: 0.6;
    }
    95% {
      opacity: 0.5;
    }
    96% {
      opacity: 0.4;
    }
    97% {
      opacity: 0.3;
    }
    98% {
      opacity: 0.2;
    }
    99% {
      opacity: 0.1;
    }
    100% {
      width: 6.25rem;
      height: 6.25rem;
      opacity: 0;
    }
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:before, .section4 .box.js-on ~ .smartoffice-data-storage .company-list:after {
  opacity: 1;
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(1) {
  margin-top: calc(-8.625rem + -9.375rem);
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(1) {
    margin-top: calc(-3.9375rem + -4.3125rem);
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(1):before {
  top: 7.625rem;
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(1):before {
    top: 3.4375rem;
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(1):after {
  animation-name: ani1;
  animation-duration: 2s;
  animation-delay: 3.5s;
  animation-iteration-count: infinite;
  transform: rotate(0deg);
}
@keyframes ani1 {
  from {
    top: 7.5rem;
    left: auto;
  }
  to {
    top: 15rem;
    left: auto;
  }
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(1):after {
    animation-name: ani1;
    animation-duration: 2s;
    animation-delay: 3.5s;
    animation-iteration-count: infinite;
    transform: rotate(0deg);
  }
  @keyframes ani1 {
    from {
      top: 3.25rem;
      left: auto;
    }
    to {
      top: 6.5rem;
      left: auto;
    }
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(2) {
  margin-top: calc(-6.0625rem + -9.375rem);
  margin-left: 9rem;
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(2) {
    margin-top: calc(-2.8125rem + -4.3125rem);
    margin-left: calc(-0.25rem + 4.3125rem);
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(2):before {
  top: 6.375rem;
  right: 7.875rem;
  transform: rotate(30deg);
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(2):before {
    top: 3rem;
    right: 3.5625rem;
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(2):after {
  animation-name: ani2;
  animation-duration: 2s;
  animation-delay: 3.5s;
  animation-iteration-count: infinite;
  transform: rotate(30deg);
}
@keyframes ani2 {
  from {
    top: 6.625rem;
    left: 0.875rem;
  }
  to {
    top: 13.25rem;
    left: -2.875rem;
  }
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(2):after {
    animation-name: ani2;
    animation-duration: 2s;
    animation-delay: 3.5s;
    animation-iteration-count: infinite;
    transform: rotate(30deg);
  }
  @keyframes ani2 {
    from {
      top: 3.25rem;
      left: 0.25rem;
    }
    to {
      top: 5.8125rem;
      left: -1.1875rem;
    }
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(3) {
  margin-top: calc(0.5rem + -9.375rem);
  margin-left: 15.625rem;
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(3) {
    margin-top: calc(0.125rem + -4.3125rem);
    margin-left: calc(2.875rem + 4.3125rem);
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(3):before {
  top: 3.125rem;
  right: 10.9375rem;
  transform: rotate(60deg);
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(3):before {
    top: 1.375rem;
    right: 5.5rem;
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(3):after {
  animation-name: ani3;
  animation-duration: 2s;
  animation-delay: 3.5s;
  animation-iteration-count: infinite;
  transform: rotate(60deg);
}
@keyframes ani3 {
  from {
    top: 4.75rem;
    left: -0.625rem;
  }
  to {
    top: 8.75rem;
    left: -7.5rem;
  }
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(3):after {
    animation-name: ani3;
    animation-duration: 2s;
    animation-delay: 3.5s;
    animation-iteration-count: infinite;
    transform: rotate(60deg);
  }
  @keyframes ani3 {
    from {
      top: 2.375rem;
      left: -0.625rem;
    }
    to {
      top: 4.0625rem;
      left: -3.5rem;
    }
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(4) {
  margin-left: calc(8.625rem + 9.375rem);
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(4) {
    margin-left: calc(3.9375rem + 4.3125rem);
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(4):before {
  right: 11.75rem;
  transform: rotate(90deg);
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(4):before {
    right: 6.25rem;
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(4):after {
  animation-name: ani4;
  animation-duration: 2s;
  animation-delay: 3.5s;
  animation-iteration-count: infinite;
  transform: rotate(90deg);
}
@keyframes ani4 {
  from {
    top: 3.125rem;
    left: -0.875rem;
  }
  to {
    top: 3.125rem;
    left: -8.75rem;
  }
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(4):after {
    animation-name: ani4;
    animation-duration: 2s;
    animation-delay: 3.5s;
    animation-iteration-count: infinite;
    transform: rotate(90deg);
  }
  @keyframes ani4 {
    from {
      top: 1.125rem;
      left: -1rem;
    }
    to {
      top: 1.125rem;
      left: -4.25rem;
    }
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(5) {
  margin-top: calc(-0.5rem + 9.375rem);
  margin-left: calc(6.0625rem + 9.375rem);
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(5) {
    margin-top: calc(0.125rem + 4.3125rem);
    margin-left: calc(2.875rem + 4.3125rem);
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(5):before {
  top: -4.375rem;
  right: 10.9375rem;
  transform: rotate(120deg);
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(5):before {
    top: -3.625rem;
    right: 5.5rem;
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(5):after {
  animation-name: ani5;
  animation-duration: 2s;
  animation-delay: 3.5s;
  animation-iteration-count: infinite;
  transform: rotate(120deg);
}
@keyframes ani5 {
  from {
    top: 1.375rem;
    left: -0.625rem;
  }
  to {
    top: -2.4375rem;
    left: -7.25rem;
  }
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(5):after {
    animation-name: ani5;
    animation-duration: 2s;
    animation-delay: 3.5s;
    animation-iteration-count: infinite;
    transform: rotate(120deg);
  }
  @keyframes ani5 {
    from {
      top: 0rem;
      left: -0.5rem;
    }
    to {
      top: -1.875rem;
      left: -3.625rem;
    }
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(6) {
  margin-top: calc(6.0625rem + 9.375rem);
  margin-left: 9rem;
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(6) {
    margin-top: calc(2.8125rem + 4.3125rem);
    margin-left: calc(-0.25rem + 4.3125rem);
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(6):before {
  top: -7.5rem;
  right: 7.875rem;
  transform: rotate(150deg);
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(6):before {
    top: -5.25rem;
    right: 3.875rem;
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(6):after {
  animation-name: ani6;
  animation-duration: 2s;
  animation-delay: 3.5s;
  animation-iteration-count: infinite;
  transform: rotate(150deg);
}
@keyframes ani6 {
  from {
    top: -0.375rem;
    left: 0.875rem;
  }
  to {
    top: -6.875rem;
    left: -2.875rem;
  }
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(6):after {
    animation-name: ani6;
    animation-duration: 2s;
    animation-delay: 3.5s;
    animation-iteration-count: infinite;
    transform: rotate(150deg);
  }
  @keyframes ani6 {
    from {
      top: -0.75rem;
      left: 0.125rem;
    }
    to {
      top: -3.5rem;
      left: -1.5rem;
    }
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(7) {
  margin-top: calc(8.625rem + 9.375rem);
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(7) {
    margin-top: calc(3.9375rem + 4.3125rem);
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(7):before {
  top: -8.75rem;
  transform: rotate(180deg);
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(7):before {
    top: -5.75rem;
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(7):after {
  animation-name: ani7;
  animation-duration: 2s;
  animation-delay: 3.5s;
  animation-iteration-count: infinite;
  transform: rotate(180deg);
}
@keyframes ani7 {
  from {
    top: -1.125rem;
    left: auto;
  }
  to {
    top: -8.75rem;
    left: auto;
  }
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(7):after {
    animation-name: ani7;
    animation-duration: 2s;
    animation-delay: 3.5s;
    animation-iteration-count: infinite;
    transform: rotate(180deg);
  }
  @keyframes ani7 {
    from {
      top: -1.125rem;
      left: auto;
    }
    to {
      top: -4.25rem;
      left: auto;
    }
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(8) {
  margin-top: calc(6.0625rem + 9.375rem);
  margin-left: -9rem;
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(8) {
    margin-top: calc(2.8125rem + 4.3125rem);
    margin-left: calc(0.25rem + -4.3125rem);
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(8):before {
  top: -7.5rem;
  left: 7.875rem;
  transform: rotate(210deg);
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(8):before {
    top: -5.25rem;
    left: 3.875rem;
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(8):after {
  animation-name: ani8;
  animation-duration: 2s;
  animation-delay: 3.5s;
  animation-iteration-count: infinite;
  transform: rotate(210deg);
}
@keyframes ani8 {
  from {
    top: -0.375rem;
    left: 5.5rem;
  }
  to {
    top: -7rem;
    left: 9.25rem;
  }
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(8):after {
    animation-name: ani8;
    animation-duration: 2s;
    animation-delay: 3.5s;
    animation-iteration-count: infinite;
    transform: rotate(210deg);
  }
  @keyframes ani8 {
    from {
      top: -0.625rem;
      left: 2rem;
    }
    to {
      top: -3.375rem;
      left: 3.625rem;
    }
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(9) {
  margin-top: calc(-0.5rem + 9.375rem);
  margin-left: calc(-6.0625rem + -9.375rem);
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(9) {
    margin-top: calc(0.125rem + 4.3125rem);
    margin-left: calc(-2.875rem + -4.3125rem);
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(9):before {
  top: -4.375rem;
  left: 10.9375rem;
  transform: rotate(240deg);
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(9):before {
    top: -3.4375rem;
    left: 5.5rem;
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(9):after {
  animation-name: ani9;
  animation-duration: 2s;
  animation-delay: 3.5s;
  animation-iteration-count: infinite;
  transform: rotate(240deg);
}
@keyframes ani9 {
  from {
    top: 1.25rem;
    left: 7.25rem;
  }
  to {
    top: -2.375rem;
    left: 13.5rem;
  }
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(9):after {
    animation-name: ani9;
    animation-duration: 2s;
    animation-delay: 3.5s;
    animation-iteration-count: infinite;
    transform: rotate(240deg);
  }
  @keyframes ani9 {
    from {
      top: 0.125rem;
      left: 2.8125rem;
    }
    to {
      top: -1.625rem;
      left: 5.75rem;
    }
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(10) {
  margin-left: calc(-8.625rem + -9.375rem);
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(10) {
    margin-left: calc(-3.9375rem + -4.3125rem);
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(10):before {
  left: 11.75rem;
  transform: rotate(270deg);
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(10):before {
    left: 6.25rem;
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(10):after {
  animation-name: ani10;
  animation-duration: 2s;
  animation-delay: 3.5s;
  animation-iteration-count: infinite;
  transform: rotate(270deg);
}
@keyframes ani10 {
  from {
    top: 3.125rem;
    left: 7.25rem;
  }
  to {
    top: 3.125rem;
    left: 15.0625rem;
  }
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(10):after {
    animation-name: ani10;
    animation-duration: 2s;
    animation-delay: 3.5s;
    animation-iteration-count: infinite;
    transform: rotate(270deg);
  }
  @keyframes ani10 {
    from {
      top: 1.0625rem;
      left: 3.125rem;
    }
    to {
      top: 1.0625rem;
      left: 6.375rem;
    }
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(11) {
  margin-top: calc(0.5rem + -9.375rem);
  margin-left: -15.625rem;
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(11) {
    margin-top: calc(0.125rem + -4.3125rem);
    margin-left: calc(-2.875rem + -4.3125rem);
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(11):before {
  top: 3.125rem;
  left: 10.9375rem;
  transform: rotate(300deg);
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(11):before {
    top: 1.375rem;
    left: 5.5rem;
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(11):after {
  animation-name: ani11;
  animation-duration: 2s;
  animation-delay: 3.5s;
  animation-iteration-count: infinite;
  transform: rotate(300deg);
}
@keyframes ani11 {
  from {
    top: 5.0625rem;
    left: 7.25rem;
  }
  to {
    top: 8.75rem;
    left: 13.75rem;
  }
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(11):after {
    animation-name: ani11;
    animation-duration: 2s;
    animation-delay: 3.5s;
    animation-iteration-count: infinite;
    transform: rotate(300deg);
  }
  @keyframes ani11 {
    from {
      top: 2.25rem;
      left: 2.75rem;
    }
    to {
      top: 4rem;
      left: 5.5rem;
    }
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(12) {
  margin-top: calc(-6.0625rem + -9.375rem);
  margin-left: -9rem;
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(12) {
    margin-top: calc(-2.8125rem + -4.3125rem);
    margin-left: calc(0.25rem + -4.3125rem);
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(12):before {
  top: 6.375rem;
  left: 7.875rem;
  transform: rotate(330deg);
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(12):before {
    top: 3rem;
    left: 3.5625rem;
  }
}
.section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(12):after {
  animation-name: ani12;
  animation-duration: 2s;
  animation-delay: 3.5s;
  animation-iteration-count: infinite;
  transform: rotate(330deg);
}
@keyframes ani12 {
  from {
    top: 6.5rem;
    left: 5.25rem;
  }
  to {
    top: 13.25rem;
    left: 9.125rem;
  }
}
@media screen and (max-width: 768px) {
  .section4 .box.js-on ~ .smartoffice-data-storage .company-list:nth-child(12):after {
    animation-name: ani12;
    animation-duration: 2s;
    animation-delay: 3.5s;
    animation-iteration-count: infinite;
    transform: rotate(330deg);
  }
  @keyframes ani12 {
    from {
      top: 3rem;
      left: 1.75rem;
    }
    to {
      top: 5.875rem;
      left: 3.375rem;
    }
  }
}

.section5 {
  padding: 10.625rem 0;
  background-color: #E8FAEE;
  transition: all ease 0.5s;
}
@media screen and (max-width: 1919px) {
  .section5 {
    padding: 8.854vw 0;
  }
}
@media screen and (max-width: 768px) {
  .section5 {
    padding: 29.333vw 0 13.6vw;
  }
}
.section5 .section-inner {
  position: relative;
}
.section5.purple {
  background-color: #F6F3FF;
}
.section5.gray {
  background-color: #fafafa;
}
.section5.white {
  background-color: #fff;
}
.section5 .container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
@media screen and (max-width: 1024px) {
  .section5 .container {
    flex-direction: column;
  }
}
@media screen and (max-width: 1024px) {
  .section5 .container .box {
    transform: translateY(0) !important;
  }
}
.section5 .container .box.fixed {
  position: fixed;
  top: 10.75rem;
}
@media screen and (max-width: 1024px) {
  .section5 .container .box.fixed {
    position: relative;
    top: auto;
  }
}
.section5 .container .section-sub-title {
  margin-top: 2.5rem;
}
.section5 .container .card {
  display: flex;
  width: 41.875rem;
  margin-top: 4.0625rem;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media screen and (max-width: 1919px) {
  .section5 .container .card {
    width: 34.895vw;
    margin-top: 3.385vw;
  }
}
@media screen and (max-width: 1024px) {
  .section5 .container .card {
    width: 34.895vw;
    margin-top: 12vw;
  }
}
@media screen and (max-width: 768px) {
  .section5 .container .card {
    width: 100%;
    margin-top: 32vw;
  }
}
.section5 .container .card-list {
  display: flex;
  position: relative;
  width: 20rem;
  height: 22.5rem;
  margin-bottom: 1.875rem;
  border-radius: 0 0 3.125rem 0;
  background-color: #fff;
  opacity: 0;
  transform: translateY(9.375rem);
  transition: all ease 1s;
  transition-delay: 0.3s;
}
@media screen and (max-width: 1919px) {
  .section5 .container .card-list {
    width: 16.666vw;
    height: 18.75vw;
    margin-bottom: 1.5625vw;
    border-radius: 0 0 2.604vw 0;
  }
}
@media screen and (max-width: 768px) {
  .section5 .container .card-list {
    width: calc(50vw - 1.875rem);
    height: 55vw;
    margin-bottom: 4vw;
    min-height: 12.5rem;
    border-radius: 0 0 13.333vw 0;
    transition-delay: 0s;
  }
}
.section5 .container .card-list:nth-child(2n-1) {
  margin-top: -4.0625rem;
}
@media screen and (max-width: 768px) {
  .section5 .container .card-list:nth-child(2n-1) {
    margin-top: -8vw;
  }
}
.section5 .container .card-list:last-child {
  margin-bottom: 0;
}
.section5 .container .card-list:hover:before {
  opacity: 1;
}
.section5 .container .card-list.js-on {
  opacity: 1;
  transform: translateY(0);
}
.section5 .container .card-list > .card-link {
  display: flex;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 4.375rem 1.5rem 1.875rem;
  border-radius: inherit;
  flex-direction: column;
  align-items: center;
}
@media screen and (max-width: 1919px) {
  .section5 .container .card-list > .card-link {
    padding: 3.6875vw 1.25vw 1.5625vw;
    justify-content: center;
  }
}
@media screen and (max-width: 1024px) {
  .section5 .container .card-list > .card-link {
    padding: 1.5625vw 1.25vw;
  }
}
@media screen and (max-width: 768px) {
  .section5 .container .card-list > .card-link {
    width: 100%;
    height: 100%;
    padding: 12vw 4.8vw 8vw;
    justify-content: center;
  }
}
.section5 .container .card-list > .card-link[href="#"] {
  pointer-events: none;
}
.section5 .container .card-list > .card-link .card-logo {
  width: 11.5625rem;
  height: 3rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media screen and (max-width: 1919px) {
  .section5 .container .card-list > .card-link .card-logo {
    width: 12vw;
    height: 3vw;
  }
}
@media screen and (max-width: 768px) {
  .section5 .container .card-list > .card-link .card-logo {
    width: 28vw;
    height: 7vw;
    margin-top: -1.875rem;
  }
}
.section5 .container .card-list > .card-link .card-hover-box {
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s;
}
@media screen and (max-width: 499px) {
  .section5 .container .card-list > .card-link .card-hover-box {
    display: none !important;
  }
}
.section5 .container .card-list > .card-link .card-hover-box .logo-wh {
  width: 12.5rem;
  height: 1.875rem;
  margin-bottom: 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media screen and (max-width: 1919px) {
  .section5 .container .card-list > .card-link .card-hover-box .logo-wh {
    width: 10vw;
    height: 2vw;
    margin-bottom: 1.2vw;
  }
}
@media screen and (max-width: 768px) {
  .section5 .container .card-list > .card-link .card-hover-box .logo-wh {
    width: 30vw;
    height: 6vw;
  }
}
.section5 .container .card-list > .card-link .card-hover-box .desc {
  color: #fff;
  opacity: 0.8;
  font-size: 1.0625rem;
  font-weight: 600;
  text-align: center;
}
@media screen and (max-width: 1919px) {
  .section5 .container .card-list > .card-link .card-hover-box .desc {
    font-size: 1.1vw;
  }
}
@media screen and (max-width: 768px) {
  .section5 .container .card-list > .card-link .card-hover-box .desc {
    font-size: 0.8125rem;
  }
}
.section5 .container .card-list > .card-link .card-hover-box .arrow-box {
  position: absolute;
  right: 32px;
  bottom: 32px;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}
@media screen and (max-width: 1919px) and (min-width: 769px) {
  .section5 .container .card-list > .card-link .card-hover-box .arrow-box {
    right: 15px;
    bottom: 15px;
    width: 3vw;
    height: 3vw;
  }
}
.section5 .container .card-list > .card-link .card-hover-box .arrow-box .arrow {
  position: absolute;
  width: inherit;
  height: inherit;
  background: url(../../images/pc/arrow-right-w.svg) no-repeat center/40%;
  transition: 0.5s;
}
.section5 .container .card-list > .card-link .card-hover-box .arrow-box .arrow.first {
  left: -100%;
}
.section5 .container .card-list > .card-link .card-hover-box .arrow-box .arrow.second {
  left: 0;
}
.section5 .container .card-list > .card-link:hover .card-hover-box {
  opacity: 1;
}
.section5 .container .card-list > .card-link:hover .card-hover-box .arrow-box .arrow.first {
  left: 0;
}
.section5 .container .card-list > .card-link:hover .card-hover-box .arrow-box .arrow.second {
  left: 100%;
}
.section5 .container .card-list > .card-link.erp > .card-logo {
  width: 16.0625rem;
  background-image: url(../../images/pc/bizbee-erp-gs.svg);
}
@media screen and (max-width: 1919px) {
  .section5 .container .card-list > .card-link.erp > .card-logo {
    width: 14vw;
  }
}
@media screen and (max-width: 768px) {
  .section5 .container .card-list > .card-link.erp > .card-logo {
    width: 36vw;
  }
}
.section5 .container .card-list > .card-link.erp > .card-hover-box {
  background-color: #2E90FA;
}
.section5 .container .card-list > .card-link.erp > .card-hover-box .logo-wh {
  background-image: url(../../images/pc/logo-erp-w.svg);
}
.section5 .container .card-list > .card-link.tax > .card-logo {
  background-image: url(../../images/pc/bizbee-tax.svg);
  background-size: contain;
  border-radius: 0;
}
.section5 .container .card-list > .card-link.tax > .card-hover-box {
  background-color: #9B8AFB;
}
.section5 .container .card-list > .card-link.tax > .card-hover-box .logo-wh {
  background-image: url(../../images/pc/logo-tax-w.svg);
}
.section5 .container .card-list > .card-link.cfo .card-logo {
  background-image: url(../../images/pc/bizbee-cfo.svg);
}
.section5 .container .card-list > .card-link.cfo > .card-hover-box {
  background-color: #528BFF;
}
.section5 .container .card-list > .card-link.cfo > .card-hover-box .logo-wh {
  background-image: url(../../images/pc/logo-cfo-w.svg);
}
.section5 .container .card-list > .card-link.taxdata > .card-logo {
  background-image: url(../../images/pc/bizbee-taxdata.svg);
}
.section5 .container .card-list > .card-link.taxdata > .card-hover-box {
  background-color: #2961FF;
}
.section5 .container .card-list > .card-link.taxdata > .card-hover-box .logo-wh {
  background-image: url(../../images/pc/logo-taxdata-w.svg);
}
.section5 .container .card-list > .card-link.talk > .card-logo {
  background-image: url(../../images/pc/bizbee-talk.svg);
}
.section5 .container .card-list > .card-link.talk > .card-hover-box {
  background-color: #2CE;
}
.section5 .container .card-list > .card-link.talk > .card-hover-box .logo-wh {
  background-image: url(../../images/pc/logo-talk-w.svg);
}
.section5 .container .card-list > .card-link.taxbill > .card-logo {
  width: 14.0625rem;
  background-image: url(../../images/pc/bizbee-taxbill.svg);
}
@media screen and (max-width: 1919px) {
  .section5 .container .card-list > .card-link.taxbill > .card-logo {
    width: 14vw;
    height: 2.5vw;
  }
}
@media screen and (max-width: 768px) {
  .section5 .container .card-list > .card-link.taxbill > .card-logo {
    width: 32vw;
    height: 7vw;
  }
}
.section5 .container .card-list > .card-link.taxbill > .card-hover-box {
  background-color: #06AED4;
}
.section5 .container .card-list > .card-link.taxbill > .card-hover-box .logo-wh {
  width: 13.75rem;
  background-image: url(../../images/pc/logo-taxbill-w.svg);
}
@media screen and (max-width: 1919px) {
  .section5 .container .card-list > .card-link.taxbill > .card-hover-box .logo-wh {
    width: 13vw;
    height: 2vw;
  }
}
@media screen and (max-width: 768px) {
  .section5 .container .card-list > .card-link.taxbill > .card-hover-box .logo-wh {
    width: 36vw;
    height: 6vw;
  }
}
.section5 .container .card-list > .card-link.esign > .card-logo {
  width: 13.4375rem;
  background-image: url(../../images/pc/bizbee-esign.svg);
}
@media screen and (max-width: 1919px) {
  .section5 .container .card-list > .card-link.esign > .card-logo {
    width: 14vw;
    height: 2.5vw;
  }
}
@media screen and (max-width: 768px) {
  .section5 .container .card-list > .card-link.esign > .card-logo {
    width: 32vw;
    height: 7vw;
  }
}
.section5 .container .card-list > .card-link.esign > .card-hover-box {
  background-color: #FD853A;
}
.section5 .container .card-list > .card-link.esign > .card-hover-box .logo-wh {
  width: 13.75rem;
  height: 2.25rem;
  background-image: url(../../images/pc/logo-esign-w.svg);
}
@media screen and (max-width: 1919px) {
  .section5 .container .card-list > .card-link.esign > .card-hover-box .logo-wh {
    width: 13vw;
    height: 2vw;
  }
}
@media screen and (max-width: 768px) {
  .section5 .container .card-list > .card-link.esign > .card-hover-box .logo-wh {
    width: 36vw;
    height: 6vw;
  }
}
.section5 .container .card-list > .card-link.works > .card-logo {
  width: 16.0625rem;
  background-image: url(../../images/pc/bizbee-works.svg);
}
@media screen and (max-width: 1919px) {
  .section5 .container .card-list > .card-link.works > .card-logo {
    width: 14vw;
  }
}
@media screen and (max-width: 768px) {
  .section5 .container .card-list > .card-link.works > .card-logo {
    width: 36vw;
  }
}
.section5 .container .card-list > .card-link.works > .card-hover-box {
  background-color: #32D583;
}
.section5 .container .card-list > .card-link.works > .card-hover-box .logo-wh {
  width: 15.625rem;
  height: 2.25rem;
  background-image: url(../../images/pc/logo-works-w.svg);
}
@media screen and (max-width: 1919px) {
  .section5 .container .card-list > .card-link.works > .card-hover-box .logo-wh {
    width: 13vw;
    height: 2vw;
  }
}
@media screen and (max-width: 768px) {
  .section5 .container .card-list > .card-link.works > .card-hover-box .logo-wh {
    width: 36vw;
    height: 6vw;
  }
}
.section5 .container .card-list > .card-link.tax-love > .card-logo {
  width: 10.625rem;
  background-image: url(../../images/pc/bizbee-taxlove.svg);
}
@media screen and (max-width: 1919px) {
  .section5 .container .card-list > .card-link.tax-love > .card-logo {
    width: 10vw;
  }
}
@media screen and (max-width: 768px) {
  .section5 .container .card-list > .card-link.tax-love > .card-logo {
    width: 27vw;
  }
}
.section5 .container .card-list > .card-link.tax-love > .card-hover-box {
  background-color: #5651FF;
}
.section5 .container .card-list > .card-link.tax-love > .card-hover-box .logo-wh {
  width: 9.75rem;
  height: 2.25rem;
  background-image: url(../../images/pc/logo-taxlove-w.svg);
}
@media screen and (max-width: 1919px) {
  .section5 .container .card-list > .card-link.tax-love > .card-hover-box .logo-wh {
    width: 13vw;
    height: 2vw;
  }
}
@media screen and (max-width: 768px) {
  .section5 .container .card-list > .card-link.tax-love > .card-hover-box .logo-wh {
    width: 27vw;
    height: 6vw;
  }
}
.section5 .container .card-list > .card-link.stay > .card-logo {
  width: 12.5rem;
  background-image: url(../../images/pc/bizbee-stay.svg);
}
@media screen and (max-width: 1919px) {
  .section5 .container .card-list > .card-link.stay > .card-logo {
    width: 13vw;
    height: 2.5vw;
  }
}
@media screen and (max-width: 768px) {
  .section5 .container .card-list > .card-link.stay > .card-logo {
    width: 32vw;
    height: 7vw;
  }
}
.section5 .container .card-list > .card-link.stay > .card-hover-box {
  background-color: #A987EF;
}
.section5 .container .card-list > .card-link.stay > .card-hover-box .logo-wh {
  width: 13.75rem;
  height: 2.25rem;
  background-image: url(../../images/pc/logo-stay-w.svg);
}
@media screen and (max-width: 1919px) {
  .section5 .container .card-list > .card-link.stay > .card-hover-box .logo-wh {
    width: 13vw;
    height: 2vw;
  }
}
@media screen and (max-width: 768px) {
  .section5 .container .card-list > .card-link.stay > .card-hover-box .logo-wh {
    width: 36vw;
    height: 6vw;
  }
}
.section5 .container .card-list > .card-link.erp-lite > .card-logo {
  width: 14.0625rem;
  background-image: url(../../images/pc/bizbee-lite.svg);
}
@media screen and (max-width: 1919px) {
  .section5 .container .card-list > .card-link.erp-lite > .card-logo {
    width: 14vw;
    height: 2.5vw;
  }
}
@media screen and (max-width: 768px) {
  .section5 .container .card-list > .card-link.erp-lite > .card-logo {
    width: 34vw;
    height: 7vw;
  }
}
.section5 .container .card-list > .card-link.erp-lite > .card-hover-box {
  background-color: #36BFFA;
}
.section5 .container .card-list > .card-link.erp-lite > .card-hover-box .logo-wh {
  width: 15rem;
  height: 2.75rem;
  background-image: url(../../images/pc/logo-lite-w.svg);
}
@media screen and (max-width: 1919px) {
  .section5 .container .card-list > .card-link.erp-lite > .card-hover-box .logo-wh {
    width: 17vw;
    height: 2.5vw;
  }
}
@media screen and (max-width: 768px) {
  .section5 .container .card-list > .card-link.erp-lite > .card-hover-box .logo-wh {
    width: 38vw;
    height: 7vw;
  }
}
.section5 .container .card-list > .card-link.space > .card-logo {
  width: 14.0625rem;
  background-image: url(../../images/pc/bizbee-space.svg);
}
@media screen and (max-width: 1919px) {
  .section5 .container .card-list > .card-link.space > .card-logo {
    width: 14vw;
    height: 2.5vw;
  }
}
@media screen and (max-width: 768px) {
  .section5 .container .card-list > .card-link.space > .card-logo {
    width: 32vw;
    height: 7vw;
  }
}
.section5 .container .card-list > .card-link.space > .card-hover-box {
  background-color: #0BA5EC;
}
.section5 .container .card-list > .card-link.space > .card-hover-box .logo-wh {
  width: 13.75rem;
  height: 2.25rem;
  background-image: url(../../images/pc/logo-space-w.svg);
}
@media screen and (max-width: 1919px) {
  .section5 .container .card-list > .card-link.space > .card-hover-box .logo-wh {
    width: 13vw;
    height: 2vw;
  }
}
@media screen and (max-width: 768px) {
  .section5 .container .card-list > .card-link.space > .card-hover-box .logo-wh {
    width: 36vw;
    height: 6vw;
  }
}
.section5 .container .card-list > .card-link.bizcard > .card-logo {
  width: 14.6875rem;
  background-image: url(../../images/pc/smartBizcard.svg);
}
@media screen and (max-width: 1919px) {
  .section5 .container .card-list > .card-link.bizcard > .card-logo {
    width: 14vw;
    height: 2.5vw;
  }
}
@media screen and (max-width: 768px) {
  .section5 .container .card-list > .card-link.bizcard > .card-logo {
    width: 34vw;
    height: 7vw;
  }
}
.section5 .container .card-list > .card-link.bizcard > .card-hover-box {
  background-color: #D5D1FF;
}
.section5 .container .card-list > .card-link.bizcard > .card-hover-box .logo-wh {
  width: 14.375rem;
  height: 2.625rem;
  background-image: url(../../images/pc/smartBizcard.svg);
}
@media screen and (max-width: 1919px) {
  .section5 .container .card-list > .card-link.bizcard > .card-hover-box .logo-wh {
    width: 14vw;
    height: 2.5vw;
  }
}
@media screen and (max-width: 768px) {
  .section5 .container .card-list > .card-link.bizcard > .card-hover-box .logo-wh {
    width: 38vw;
    height: 7vw;
  }
}
.section5 .container .card-list > .card-link.bizcard > .card-hover-box .desc {
  color: rgba(107, 96, 216, 0.8);
}
.section5 .container .card-list > .card-link.bizcard > .card-hover-box .arrow-box {
  background-color: rgba(107, 96, 216, 0.2);
}
.section5 .container .card-list > .card-link.edu > .card-logo {
  background-image: url(../../images/pc/smartEdu.svg);
}
.section5 .container .card-list > .card-link.edu > .card-hover-box {
  background-color: #FFEDBF;
}
.section5 .container .card-list > .card-link.edu > .card-hover-box .logo-wh {
  width: 14.375rem;
  height: 2.625rem;
  background-image: url(../../images/pc/smartEdu.svg);
}
@media screen and (max-width: 1919px) {
  .section5 .container .card-list > .card-link.edu > .card-hover-box .logo-wh {
    width: 13vw;
    height: 2.5vw;
  }
}
@media screen and (max-width: 768px) {
  .section5 .container .card-list > .card-link.edu > .card-hover-box .logo-wh {
    width: 38vw;
    height: 7vw;
  }
}
.section5 .container .card-list > .card-link.edu > .card-hover-box .desc {
  color: rgba(255, 152, 0, 0.8);
}
.section5 .container .card-list > .card-link.edu > .card-hover-box .arrow-box {
  background-color: rgba(255, 152, 0, 0.2);
}
.section5 .container .card-list > .card-link.wel > .card-logo {
  background-image: url(../../images/pc/smartWel.svg);
}
.section5 .container .card-list > .card-link.wel > .card-hover-box {
  background-color: #FFD7D5;
}
.section5 .container .card-list > .card-link.wel > .card-hover-box .logo-wh {
  width: 14.375rem;
  height: 2.625rem;
  background-image: url(../../images/pc/smartWel.svg);
}
@media screen and (max-width: 1919px) {
  .section5 .container .card-list > .card-link.wel > .card-hover-box .logo-wh {
    width: 13vw;
    height: 2.5vw;
  }
}
@media screen and (max-width: 768px) {
  .section5 .container .card-list > .card-link.wel > .card-hover-box .logo-wh {
    width: 38vw;
    height: 7vw;
  }
}
.section5 .container .card-list > .card-link.wel > .card-hover-box .desc {
  color: rgba(244, 67, 54, 0.8);
}
.section5 .container .card-list > .card-link.wel > .card-hover-box .arrow-box {
  background-color: rgba(244, 67, 54, 0.2);
}
.section5 .container .card-list > .card-link.correction > .card-logo {
  background-image: url(../../images/pc/bizbee-refund.svg);
}
.section5 .container .card-list > .card-link.correction > .card-hover-box {
  background-color: #E3D7FF;
}
.section5 .container .card-list > .card-link.correction > .card-hover-box .logo-wh {
  background-image: url(../../images/pc/bizbee-refund.svg);
}
.section5 .container .card-list > .card-link.correction > .card-hover-box .desc {
  color: rgba(139, 92, 246, 0.8);
}
.section5 .container .card-list > .card-link.correction > .card-hover-box .arrow-box {
  background-color: rgba(139, 92, 246, 0.2);
}
.section5 .container .card-list > .card-link.booking > .card-logo {
  width: 14.3125rem;
  height: 2.6875rem;
  background-image: url(../../images/pc/smartBooking.svg);
}
@media screen and (max-width: 1919px) {
  .section5 .container .card-list > .card-link.booking > .card-logo {
    width: 13.281vw;
    height: 2.5vw;
  }
}
@media screen and (max-width: 768px) {
  .section5 .container .card-list > .card-link.booking > .card-logo {
    width: 38.933vw;
    height: 7.199vw;
    background-image: url(../../images/mobile/smartBooking.svg);
  }
}
.section5 .container .card-list > .card-link.corp > .card-logo {
  width: 13.25rem;
  height: 2.0625rem;
  background-image: url(../../images/pc/smartERPCorp.svg);
}
@media screen and (max-width: 768px) {
  .section5 .container .card-list > .card-link.corp > .card-logo {
    width: 29.866vw;
    height: 10.666vw;
    background-image: url(../../images/mobile/smartERPCorp.svg);
  }
}
.section5 .container .card-list > .card-link.sales > .card-logo {
  width: 11.9375rem;
  height: 2.25rem;
  background-image: url(../../images/pc/smartSales.svg);
}
@media screen and (max-width: 1919px) {
  .section5 .container .card-list > .card-link.sales > .card-logo {
    width: 9.6vw;
    height: 2vw;
  }
}
@media screen and (max-width: 768px) {
  .section5 .container .card-list > .card-link.sales > .card-logo {
    width: 32.533vw;
    height: 6.4vw;
    background-image: url(../../images/mobile/smartSales.svg);
  }
}
.section5 .container .card-list .sub-title {
  margin-top: 2.5rem;
  font-weight: 600;
  font-size: 1.3125rem;
  letter-spacing: -0.03rem;
  text-align: center;
  word-break: keep-all;
}
@media screen and (max-width: 1919px) {
  .section5 .container .card-list .sub-title {
    margin-top: 2.76vw;
    font-size: 1.093vw;
    letter-spacing: -0.025vw;
  }
}
@media screen and (max-width: 768px) {
  .section5 .container .card-list .sub-title {
    margin-top: 2.46875rem;
    font-weight: 500;
    font-size: 3.73333vw;
    line-height: 4.2vw;
  }
  .section5 .container .card-list .sub-title > .pc-hidden {
    display: inline !important;
  }
}
.section5 .container .card-list .description {
  width: 14.375rem;
  margin-top: 1.25rem;
  font-size: 1.125rem;
  color: #333;
  line-height: 1.375rem;
  text-align: center;
}
@media screen and (max-width: 1919px) {
  .section5 .container .card-list .description {
    width: 11.979vw;
    margin-top: 0.52vw;
    font-size: 0.9375vw;
    line-height: 1.145vw;
  }
}
@media screen and (max-width: 1024px) {
  .section5 .container .card-list .description {
    display: none;
  }
}

.section6 {
  padding: 10.9375rem 0;
}
@media screen and (max-width: 768px) {
  .section6 {
    padding: 8.4375rem 0 5rem;
  }
}
.section6 .slider {
  overflow: hidden;
  position: relative;
  padding-top: 8.125rem;
  flex-direction: column;
  align-items: center;
  transform: translateY(-5rem);
}
.section6 .swiper-slide {
  width: 29.375rem;
}
@media screen and (max-width: 768px) {
  .section6 .swiper-slide {
    width: calc(100% - 2.75rem);
    max-width: 29.375rem;
  }
}
.section6 .swiper-slide .img-box {
  overflow: hidden;
  border-radius: 0 0 3.125rem 0;
  isolation: isolate;
  width: 100%;
}
.section6 .swiper-slide img {
  width: 100%;
  transition: all ease 0.7s;
}
.section6 .swiper-slide:hover img {
  transform: scale(1.1);
}
.section6 .swiper-link {
  display: block;
}
.section6 .swiper-link:hover .title:before {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .section6 .swiper-link:hover .title:before {
    width: 0;
  }
}
.section6 .blog-category {
  display: block;
  margin-top: 1.875rem;
  font-size: 1.125rem;
  color: #7d8998;
  letter-spacing: -0.03rem;
}
.section6 .title {
  display: inline-block;
  position: relative;
  max-width: 100%;
  margin-top: 0.625rem;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.03rem;
}
.section6 .title .text {
  display: inline-block;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.section6 .title:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0.125rem;
  background-color: #333;
  transition: all ease 0.3s;
}
.section6 .hash-tag-box {
  margin-top: 1.5625rem;
  font-weight: 500;
  font-size: 1.125rem;
  color: #999;
  letter-spacing: -0.03rem;
}
.section6 .blog-link-box {
  display: flex;
  overflow: hidden;
  position: absolute;
  top: 0.375rem;
  right: 0;
  width: 12.5rem;
  height: 3.75rem;
  border-radius: 2.5rem;
}
.section6 .blog-link {
  display: flex;
  width: 12.5rem;
  height: 3.75rem;
  border: 0.1875rem solid #333;
  border-radius: 2.5rem;
  font-weight: 500;
  font-size: 1.3125rem;
  align-items: center;
  justify-content: center;
}
.section6 .blog-link:after {
  content: "";
  display: block;
  overflow: hidden;
  position: absolute;
  top: -0.125rem;
  right: -0.125rem;
  z-index: 0;
  width: 0;
  height: 3.75rem;
  border-radius: 2.5rem;
  background-color: #FFCD00;
  transition: all ease 0.5s;
}
.section6 .blog-link:hover {
  border: 0.1875rem solid #56B289;
  transition: all ease 0.6s;
}
.section6 .blog-link:hover .blog-link-text {
  color: #fff;
}
.section6 .blog-link:hover:after {
  right: auto;
  left: -0.125rem;
  width: 102%;
}
.section6 .blog-link-text {
  position: relative;
  z-index: 1;
}
.section6 .swiper-button-area {
  position: absolute;
  top: -1.4375rem;
  right: 0;
}
.section6 .swiper-button-prev-box {
  position: absolute;
  top: 1.875rem;
  right: 17.8125rem;
  left: auto;
  width: 3.75rem;
  height: 3.75rem;
}
.section6 .swiper-button-prev {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: 3.75rem;
  height: 3.75rem;
  margin: 0;
  background-image: url(../../images/pc/arrow-left.svg);
  background-repeat: no-repeat;
  background-position: center center;
}
.section6 .swiper-button-prev:hover {
  background-image: url(../../images/pc/arrow-left-green.svg);
}
.section6 .swiper-button-next-box {
  position: absolute;
  top: 1.875rem;
  right: 14.0625rem;
  width: 3.75rem;
  height: 3.75rem;
}
.section6 .swiper-button-next {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: 3.75rem;
  height: 3.75rem;
  margin: 0;
  background-image: url(../../images/pc/arrow-right.svg);
  background-repeat: no-repeat;
  background-position: center center;
}
.section6 .swiper-button-next:hover {
  background-image: url(../../images/pc/arrow-right-green.svg);
}

.section7 {
  display: flex;
  padding: 16.1875rem 0 13.125rem;
}
.section7 > .column {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.main_popup {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 950px;
  z-index: 11;
  color: #262626;
  display: none;
}
.main_popup .only_mo {
  display: none;
}
@media all and (max-width: 1024px) {
  .main_popup .only_mo {
    display: block;
  }
}
@media all and (max-width: 1024px) {
  .main_popup {
    width: 90%;
    max-width: 950px;
  }
}
.main_popup.on {
  display: block;
}
.main_popup .main_popup_wrap {
  width: 100%;
  height: 630px;
  overflow: auto;
  position: relative;
}
@media all and (max-width: 1024px) {
  .main_popup .main_popup_wrap {
    height: calc(100vh - 70px);
    height: calc(100dvh - 70px);
    max-height: 630px;
  }
}
.main_popup .main_popup_wrap::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.main_popup .main_popup_wrap::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
.main_popup_top {
  width: 100%;
  height: 630px;
  background: #FFCD00 url(../../images/pc/main-popup-bg.png);
  padding: 50px 86px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
@media all and (max-width: 1024px) {
  .main_popup_top {
    padding: 30px 50px;
  }
}
@media all and (max-width: 1024px) and (max-width: 650px) {
  .main_popup_top {
    padding: 30px 20px;
  }
}
.main_popup_top > h3 {
  width: 123px;
  height: 40px;
  border-radius: 22px;
  border: 2px solid #262626;
  font-size: 20px;
  font-weight: 600;
  line-height: 100%;
  /* 20px */
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}
@media all and (max-width: 1024px) {
  .main_popup_top > h3 {
    font-size: 18px;
  }
}
.main_popup_top > h2 {
  margin-top: 30px;
  font-size: 38px;
  text-align: center;
  display: flex;
  padding-left: 50px;
  font-weight: 700;
  line-height: 140%;
  position: relative;
}
@media all and (max-width: 1024px) {
  .main_popup_top > h2 {
    margin-top: 0;
    padding-left: 0;
    justify-content: center;
  }
}
@media all and (max-width: 1024px) and (max-width: 768px) {
  .main_popup_top > h2 {
    font-size: 5vw;
  }
}
.main_popup_top > h2::after {
  content: "";
  display: block;
  position: absolute;
  right: -50px;
  top: -70%;
  width: 270px;
  height: 241px;
  background: url(../../images/pc/popup-symbol.svg) no-repeat center;
  background-size: cover;
}
@media all and (max-width: 1024px) {
  .main_popup_top > h2::after {
    display: none;
  }
}
.main_popup_top > p {
  margin: 0;
  margin-top: 70px;
  color: #262626;
  font-size: 20px;
  font-weight: 600;
  line-height: 120%;
  /* 24px */
  font-family: "Pretendard", "돋움";
}
@media all and (max-width: 1024px) {
  .main_popup_top > p {
    margin-top: 0;
    word-break: keep-all;
    font-size: 2vw;
  }
}
@media all and (max-width: 1024px) and (max-width: 650px) {
  .main_popup_top > p {
    font-size: 13px;
  }
}
.main_popup_top .logo {
  margin-top: 25px;
  align-self: center;
  width: 130px;
}
.main_popup_bottom {
  width: 100%;
  background: #F0F2F9;
  padding: 30px 25px;
}
.main_popup_bottom table {
  font-size: 18px;
  font-weight: 600;
}
@media all and (max-width: 768px) {
  .main_popup_bottom table {
    font-size: 13px;
  }
}
.main_popup_bottom table:not(:first-of-type) {
  margin-top: 50px;
}
.main_popup_bottom table th,
.main_popup_bottom table td {
  border: 1px solid #CDD3DD;
}
.main_popup_bottom table th {
  font-weight: 600;
  background-color: #EEF1F6;
  border-top: 1px solid #354150;
  height: 36px;
}
.main_popup_bottom table.border-none th,
.main_popup_bottom table.border-none td {
  border: none;
  line-height: 1.4;
}
.main_popup_bottom table td {
  padding: 10px;
}
@media all and (max-width: 768px) {
  .main_popup_bottom table td {
    padding: 5px;
    word-break: keep-all;
  }
}
.main_popup_bottom table td > p {
  display: flex;
  align-items: center;
}
.main_popup_bottom table td > p img {
  margin-left: 10px;
}
.main_popup_bottom table td > p:nth-of-type(2) {
  margin-top: 25px;
}
@media all and (max-width: 768px) {
  .main_popup_bottom table td > p {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .main_popup_bottom table td > p img {
    width: 80px;
    margin-left: 0px;
  }
}
.main_popup_bottom table colgroup col {
  width: 50%;
}
.main_popup_bottom caption {
  text-align: left;
  padding-bottom: 10px;
}
@media all and (max-width: 1024px) {
  .main_popup_bottom {
    padding: 15px 10px;
  }
}
.main_popup_bottom > div {
  padding: 50px 65px;
  border-radius: 22px;
  background: #fff;
}
@media all and (max-width: 1024px) {
  .main_popup_bottom > div {
    padding: 20px 30px;
    border-radius: 10px;
  }
}
@media all and (max-width: 1024px) and (max-width: 768px) {
  .main_popup_bottom > div {
    padding: 10px 15px;
  }
}
.main_popup .btn_wrap {
  width: 100%;
  display: flex;
  background-color: #fff;
  border-radius: 0px 0px 22px 22px;
  border: 1px solid #E0E0E0;
}
.main_popup .btn_wrap button {
  width: 50%;
  padding: 21px 0;
  color: #262626;
  font-size: 18px;
  font-weight: 400;
  line-height: 100%;
  /* 23px */
}
.main_popup .btn_wrap button:first-of-type {
  border-right: 1px solid #E0E0E0;
}
@media all and (max-width: 1024px) {
  .main_popup .btn_wrap button {
    padding: 17px 0;
    font-size: 14px;
  }
}