@charset "UTF-8";
/** @format */
@import url("animations.css");
/* 웹폰트 */
@font-face {
  font-family: "Spoqa Han Sans Neo";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/SpoqaHanSansNeo-Regular.eot");
  src: url("../fonts/SpoqaHanSansNeo-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/SpoqaHanSansNeo-Regular.woff2") format("woff2"), url("../fonts/SpoqaHanSansNeo-Regular.woff") format("woff");
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/SpoqaHanSansNeo-Medium.eot");
  src: url("../fonts/SpoqaHanSansNeo-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/SpoqaHanSansNeo-Medium.woff2") format("woff2"), url("../fonts/SpoqaHanSansNeo-Medium.woff") format("woff");
}
@font-face {
  font-family: "Spoqa Han Sans Neo";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/SpoqaHanSansNeo-Bold.eot");
  src: url("../fonts/SpoqaHanSansNeo-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/SpoqaHanSansNeo-Bold.woff2") format("woff2"), url("../fonts/SpoqaHanSansNeo-Bold.woff") format("woff");
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/NunitoSans-Regular.woff") format("woff");
  unicode-range: U+0041-005A, U+0061-007A, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/NunitoSans-SemiBold.woff") format("woff");
  unicode-range: U+0041-005A, U+0061-007A, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/NunitoSans-Bold.woff") format("woff");
  unicode-range: U+0041-005A, U+0061-007A, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}
/* default */
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media (max-width: 1024.98px) {
  * {
    outline: 0;
  }
}

html {
  height: 100%;
}
@media (max-width: 1024.98px) {
  html {
    -webkit-text-size-adjust: none;
    overflow-y: auto;
  }
}

body {
  color: #0F172A;
  font-size: 16px;
  font-family: "Spoqa Han Sans Neo", "Noto Sans KR", "Noto Sans CJK KR", "malgun gothic", sans-serif, Tahoma;
  letter-spacing: -0.02em;
  line-height: 1.5;
  word-wrap: break-word;
  word-break: keep-all;
}
@media (min-width: 1025px) {
  body {
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
  }
}
header,
section,
article,
aside,
footer,
nav {
  display: block;
}

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

pre {
  white-space: pre-wrap;
}

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

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

h1,
h2,
h3,
h4,
h5,
h6,
dd {
  margin: 0;
}

a,
select,
button,
input,
textarea {
  font-family: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input[type=submit] {
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  cursor: pointer;
  background: transparent;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.sr-only {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  margin: 0 !important;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

caption.sr-only {
  position: static;
  width: auto;
  height: 0;
}

strong {
  font-weight: 500;
}

/* 간격 */
.m-0 {
  margin: 0px !important;
}

.m-1 {
  margin: 4px !important;
}

.m-2 {
  margin: 8px !important;
}

.m-3 {
  margin: 12px !important;
}

.m-4 {
  margin: 16px !important;
}

.m-5 {
  margin: 20px !important;
}

.m-6 {
  margin: 24px !important;
}

.m-7 {
  margin: 28px !important;
}

.m-8 {
  margin: 32px !important;
}

.m-9 {
  margin: 36px !important;
}

.m-10 {
  margin: 40px !important;
}

.m-11 {
  margin: 44px !important;
}

.m-12 {
  margin: 48px !important;
}

.m-13 {
  margin: 52px !important;
}

.m-14 {
  margin: 56px !important;
}

.m-15 {
  margin: 60px !important;
}

.m-16 {
  margin: 64px !important;
}

.m-17 {
  margin: 68px !important;
}

.m-18 {
  margin: 72px !important;
}

.m-19 {
  margin: 76px !important;
}

.m-20 {
  margin: 80px !important;
}

.p-0 {
  padding: 0px !important;
}

.p-1 {
  padding: 4px !important;
}

.p-2 {
  padding: 8px !important;
}

.p-3 {
  padding: 12px !important;
}

.p-4 {
  padding: 16px !important;
}

.p-5 {
  padding: 20px !important;
}

.p-6 {
  padding: 24px !important;
}

.p-7 {
  padding: 28px !important;
}

.p-8 {
  padding: 32px !important;
}

.p-9 {
  padding: 36px !important;
}

.p-10 {
  padding: 40px !important;
}

.p-11 {
  padding: 44px !important;
}

.p-12 {
  padding: 48px !important;
}

.p-13 {
  padding: 52px !important;
}

.p-14 {
  padding: 56px !important;
}

.p-15 {
  padding: 60px !important;
}

.p-16 {
  padding: 64px !important;
}

.p-17 {
  padding: 68px !important;
}

.p-18 {
  padding: 72px !important;
}

.p-19 {
  padding: 76px !important;
}

.p-20 {
  padding: 80px !important;
}

.mt-0 {
  margin-top: 0px !important;
}

.mt-1 {
  margin-top: 4px !important;
}

.mt-2 {
  margin-top: 8px !important;
}

.mt-3 {
  margin-top: 12px !important;
}

.mt-4 {
  margin-top: 16px !important;
}

.mt-5 {
  margin-top: 20px !important;
}

.mt-6 {
  margin-top: 24px !important;
}

.mt-7 {
  margin-top: 28px !important;
}

.mt-8 {
  margin-top: 32px !important;
}

.mt-9 {
  margin-top: 36px !important;
}

.mt-10 {
  margin-top: 40px !important;
}

.mt-11 {
  margin-top: 44px !important;
}

.mt-12 {
  margin-top: 48px !important;
}

.mt-13 {
  margin-top: 52px !important;
}

.mt-14 {
  margin-top: 56px !important;
}

.mt-15 {
  margin-top: 60px !important;
}

.mt-16 {
  margin-top: 64px !important;
}

.mt-17 {
  margin-top: 68px !important;
}

.mt-18 {
  margin-top: 72px !important;
}

.mt-19 {
  margin-top: 76px !important;
}

.mt-20 {
  margin-top: 80px !important;
}

.ml-0 {
  margin-left: 0px !important;
}

.ml-1 {
  margin-left: 4px !important;
}

.ml-2 {
  margin-left: 8px !important;
}

.ml-3 {
  margin-left: 12px !important;
}

.ml-4 {
  margin-left: 16px !important;
}

.ml-5 {
  margin-left: 20px !important;
}

.ml-6 {
  margin-left: 24px !important;
}

.ml-7 {
  margin-left: 28px !important;
}

.ml-8 {
  margin-left: 32px !important;
}

.ml-9 {
  margin-left: 36px !important;
}

.ml-10 {
  margin-left: 40px !important;
}

.ml-11 {
  margin-left: 44px !important;
}

.ml-12 {
  margin-left: 48px !important;
}

.ml-13 {
  margin-left: 52px !important;
}

.ml-14 {
  margin-left: 56px !important;
}

.ml-15 {
  margin-left: 60px !important;
}

.ml-16 {
  margin-left: 64px !important;
}

.ml-17 {
  margin-left: 68px !important;
}

.ml-18 {
  margin-left: 72px !important;
}

.ml-19 {
  margin-left: 76px !important;
}

.ml-20 {
  margin-left: 80px !important;
}

.mr-0 {
  margin-right: 0px !important;
}

.mr-1 {
  margin-right: 4px !important;
}

.mr-2 {
  margin-right: 8px !important;
}

.mr-3 {
  margin-right: 12px !important;
}

.mr-4 {
  margin-right: 16px !important;
}

.mr-5 {
  margin-right: 20px !important;
}

.mr-6 {
  margin-right: 24px !important;
}

.mr-7 {
  margin-right: 28px !important;
}

.mr-8 {
  margin-right: 32px !important;
}

.mr-9 {
  margin-right: 36px !important;
}

.mr-10 {
  margin-right: 40px !important;
}

.mr-11 {
  margin-right: 44px !important;
}

.mr-12 {
  margin-right: 48px !important;
}

.mr-13 {
  margin-right: 52px !important;
}

.mr-14 {
  margin-right: 56px !important;
}

.mr-15 {
  margin-right: 60px !important;
}

.mr-16 {
  margin-right: 64px !important;
}

.mr-17 {
  margin-right: 68px !important;
}

.mr-18 {
  margin-right: 72px !important;
}

.mr-19 {
  margin-right: 76px !important;
}

.mr-20 {
  margin-right: 80px !important;
}

.mb-0 {
  margin-bottom: 0px !important;
}

.mb-1 {
  margin-bottom: 4px !important;
}

.mb-2 {
  margin-bottom: 8px !important;
}

.mb-3 {
  margin-bottom: 12px !important;
}

.mb-4 {
  margin-bottom: 16px !important;
}

.mb-5 {
  margin-bottom: 20px !important;
}

.mb-6 {
  margin-bottom: 24px !important;
}

.mb-7 {
  margin-bottom: 28px !important;
}

.mb-8 {
  margin-bottom: 32px !important;
}

.mb-9 {
  margin-bottom: 36px !important;
}

.mb-10 {
  margin-bottom: 40px !important;
}

.mb-11 {
  margin-bottom: 44px !important;
}

.mb-12 {
  margin-bottom: 48px !important;
}

.mb-13 {
  margin-bottom: 52px !important;
}

.mb-14 {
  margin-bottom: 56px !important;
}

.mb-15 {
  margin-bottom: 60px !important;
}

.mb-16 {
  margin-bottom: 64px !important;
}

.mb-17 {
  margin-bottom: 68px !important;
}

.mb-18 {
  margin-bottom: 72px !important;
}

.mb-19 {
  margin-bottom: 76px !important;
}

.mb-20 {
  margin-bottom: 80px !important;
}

.pt-0 {
  padding-top: 0px !important;
}

.pt-1 {
  padding-top: 4px !important;
}

.pt-2 {
  padding-top: 8px !important;
}

.pt-3 {
  padding-top: 12px !important;
}

.pt-4 {
  padding-top: 16px !important;
}

.pt-5 {
  padding-top: 20px !important;
}

.pt-6 {
  padding-top: 24px !important;
}

.pt-7 {
  padding-top: 28px !important;
}

.pt-8 {
  padding-top: 32px !important;
}

.pt-9 {
  padding-top: 36px !important;
}

.pt-10 {
  padding-top: 40px !important;
}

.pt-11 {
  padding-top: 44px !important;
}

.pt-12 {
  padding-top: 48px !important;
}

.pt-13 {
  padding-top: 52px !important;
}

.pt-14 {
  padding-top: 56px !important;
}

.pt-15 {
  padding-top: 60px !important;
}

.pt-16 {
  padding-top: 64px !important;
}

.pt-17 {
  padding-top: 68px !important;
}

.pt-18 {
  padding-top: 72px !important;
}

.pt-19 {
  padding-top: 76px !important;
}

.pt-20 {
  padding-top: 80px !important;
}

.pl-0 {
  padding-left: 0px !important;
}

.pl-1 {
  padding-left: 4px !important;
}

.pl-2 {
  padding-left: 8px !important;
}

.pl-3 {
  padding-left: 12px !important;
}

.pl-4 {
  padding-left: 16px !important;
}

.pl-5 {
  padding-left: 20px !important;
}

.pl-6 {
  padding-left: 24px !important;
}

.pl-7 {
  padding-left: 28px !important;
}

.pl-8 {
  padding-left: 32px !important;
}

.pl-9 {
  padding-left: 36px !important;
}

.pl-10 {
  padding-left: 40px !important;
}

.pl-11 {
  padding-left: 44px !important;
}

.pl-12 {
  padding-left: 48px !important;
}

.pl-13 {
  padding-left: 52px !important;
}

.pl-14 {
  padding-left: 56px !important;
}

.pl-15 {
  padding-left: 60px !important;
}

.pl-16 {
  padding-left: 64px !important;
}

.pl-17 {
  padding-left: 68px !important;
}

.pl-18 {
  padding-left: 72px !important;
}

.pl-19 {
  padding-left: 76px !important;
}

.pl-20 {
  padding-left: 80px !important;
}

.pr-0 {
  padding-right: 0px !important;
}

.pr-1 {
  padding-right: 4px !important;
}

.pr-2 {
  padding-right: 8px !important;
}

.pr-3 {
  padding-right: 12px !important;
}

.pr-4 {
  padding-right: 16px !important;
}

.pr-5 {
  padding-right: 20px !important;
}

.pr-6 {
  padding-right: 24px !important;
}

.pr-7 {
  padding-right: 28px !important;
}

.pr-8 {
  padding-right: 32px !important;
}

.pr-9 {
  padding-right: 36px !important;
}

.pr-10 {
  padding-right: 40px !important;
}

.pr-11 {
  padding-right: 44px !important;
}

.pr-12 {
  padding-right: 48px !important;
}

.pr-13 {
  padding-right: 52px !important;
}

.pr-14 {
  padding-right: 56px !important;
}

.pr-15 {
  padding-right: 60px !important;
}

.pr-16 {
  padding-right: 64px !important;
}

.pr-17 {
  padding-right: 68px !important;
}

.pr-18 {
  padding-right: 72px !important;
}

.pr-19 {
  padding-right: 76px !important;
}

.pr-20 {
  padding-right: 80px !important;
}

.pb-0 {
  padding-bottom: 0px !important;
}

.pb-1 {
  padding-bottom: 4px !important;
}

.pb-2 {
  padding-bottom: 8px !important;
}

.pb-3 {
  padding-bottom: 12px !important;
}

.pb-4 {
  padding-bottom: 16px !important;
}

.pb-5 {
  padding-bottom: 20px !important;
}

.pb-6 {
  padding-bottom: 24px !important;
}

.pb-7 {
  padding-bottom: 28px !important;
}

.pb-8 {
  padding-bottom: 32px !important;
}

.pb-9 {
  padding-bottom: 36px !important;
}

.pb-10 {
  padding-bottom: 40px !important;
}

.pb-11 {
  padding-bottom: 44px !important;
}

.pb-12 {
  padding-bottom: 48px !important;
}

.pb-13 {
  padding-bottom: 52px !important;
}

.pb-14 {
  padding-bottom: 56px !important;
}

.pb-15 {
  padding-bottom: 60px !important;
}

.pb-16 {
  padding-bottom: 64px !important;
}

.pb-17 {
  padding-bottom: 68px !important;
}

.pb-18 {
  padding-bottom: 72px !important;
}

.pb-19 {
  padding-bottom: 76px !important;
}

.pb-20 {
  padding-bottom: 80px !important;
}

@media (min-width: 1025px) {
  .m-lg-0 {
    margin: 0px !important;
  }
  .m-lg-1 {
    margin: 4px !important;
  }
  .m-lg-2 {
    margin: 8px !important;
  }
  .m-lg-3 {
    margin: 12px !important;
  }
  .m-lg-4 {
    margin: 16px !important;
  }
  .m-lg-5 {
    margin: 20px !important;
  }
  .m-lg-6 {
    margin: 24px !important;
  }
  .m-lg-7 {
    margin: 28px !important;
  }
  .m-lg-8 {
    margin: 32px !important;
  }
  .m-lg-9 {
    margin: 36px !important;
  }
  .m-lg-10 {
    margin: 40px !important;
  }
  .m-lg-11 {
    margin: 44px !important;
  }
  .m-lg-12 {
    margin: 48px !important;
  }
  .m-lg-13 {
    margin: 52px !important;
  }
  .m-lg-14 {
    margin: 56px !important;
  }
  .m-lg-15 {
    margin: 60px !important;
  }
  .m-lg-16 {
    margin: 64px !important;
  }
  .m-lg-17 {
    margin: 68px !important;
  }
  .m-lg-18 {
    margin: 72px !important;
  }
  .m-lg-19 {
    margin: 76px !important;
  }
  .m-lg-20 {
    margin: 80px !important;
  }
  .p-lg-0 {
    padding: 0px !important;
  }
  .p-lg-1 {
    padding: 4px !important;
  }
  .p-lg-2 {
    padding: 8px !important;
  }
  .p-lg-3 {
    padding: 12px !important;
  }
  .p-lg-4 {
    padding: 16px !important;
  }
  .p-lg-5 {
    padding: 20px !important;
  }
  .p-lg-6 {
    padding: 24px !important;
  }
  .p-lg-7 {
    padding: 28px !important;
  }
  .p-lg-8 {
    padding: 32px !important;
  }
  .p-lg-9 {
    padding: 36px !important;
  }
  .p-lg-10 {
    padding: 40px !important;
  }
  .p-lg-11 {
    padding: 44px !important;
  }
  .p-lg-12 {
    padding: 48px !important;
  }
  .p-lg-13 {
    padding: 52px !important;
  }
  .p-lg-14 {
    padding: 56px !important;
  }
  .p-lg-15 {
    padding: 60px !important;
  }
  .p-lg-16 {
    padding: 64px !important;
  }
  .p-lg-17 {
    padding: 68px !important;
  }
  .p-lg-18 {
    padding: 72px !important;
  }
  .p-lg-19 {
    padding: 76px !important;
  }
  .p-lg-20 {
    padding: 80px !important;
  }
  .mt-lg-0 {
    margin-top: 0px !important;
  }
  .mt-lg-1 {
    margin-top: 4px !important;
  }
  .mt-lg-2 {
    margin-top: 8px !important;
  }
  .mt-lg-3 {
    margin-top: 12px !important;
  }
  .mt-lg-4 {
    margin-top: 16px !important;
  }
  .mt-lg-5 {
    margin-top: 20px !important;
  }
  .mt-lg-6 {
    margin-top: 24px !important;
  }
  .mt-lg-7 {
    margin-top: 28px !important;
  }
  .mt-lg-8 {
    margin-top: 32px !important;
  }
  .mt-lg-9 {
    margin-top: 36px !important;
  }
  .mt-lg-10 {
    margin-top: 40px !important;
  }
  .mt-lg-11 {
    margin-top: 44px !important;
  }
  .mt-lg-12 {
    margin-top: 48px !important;
  }
  .mt-lg-13 {
    margin-top: 52px !important;
  }
  .mt-lg-14 {
    margin-top: 56px !important;
  }
  .mt-lg-15 {
    margin-top: 60px !important;
  }
  .mt-lg-16 {
    margin-top: 64px !important;
  }
  .mt-lg-17 {
    margin-top: 68px !important;
  }
  .mt-lg-18 {
    margin-top: 72px !important;
  }
  .mt-lg-19 {
    margin-top: 76px !important;
  }
  .mt-lg-20 {
    margin-top: 80px !important;
  }
  .ml-lg-0 {
    margin-left: 0px !important;
  }
  .ml-lg-1 {
    margin-left: 4px !important;
  }
  .ml-lg-2 {
    margin-left: 8px !important;
  }
  .ml-lg-3 {
    margin-left: 12px !important;
  }
  .ml-lg-4 {
    margin-left: 16px !important;
  }
  .ml-lg-5 {
    margin-left: 20px !important;
  }
  .ml-lg-6 {
    margin-left: 24px !important;
  }
  .ml-lg-7 {
    margin-left: 28px !important;
  }
  .ml-lg-8 {
    margin-left: 32px !important;
  }
  .ml-lg-9 {
    margin-left: 36px !important;
  }
  .ml-lg-10 {
    margin-left: 40px !important;
  }
  .ml-lg-11 {
    margin-left: 44px !important;
  }
  .ml-lg-12 {
    margin-left: 48px !important;
  }
  .ml-lg-13 {
    margin-left: 52px !important;
  }
  .ml-lg-14 {
    margin-left: 56px !important;
  }
  .ml-lg-15 {
    margin-left: 60px !important;
  }
  .ml-lg-16 {
    margin-left: 64px !important;
  }
  .ml-lg-17 {
    margin-left: 68px !important;
  }
  .ml-lg-18 {
    margin-left: 72px !important;
  }
  .ml-lg-19 {
    margin-left: 76px !important;
  }
  .ml-lg-20 {
    margin-left: 80px !important;
  }
  .mr-lg-0 {
    margin-right: 0px !important;
  }
  .mr-lg-1 {
    margin-right: 4px !important;
  }
  .mr-lg-2 {
    margin-right: 8px !important;
  }
  .mr-lg-3 {
    margin-right: 12px !important;
  }
  .mr-lg-4 {
    margin-right: 16px !important;
  }
  .mr-lg-5 {
    margin-right: 20px !important;
  }
  .mr-lg-6 {
    margin-right: 24px !important;
  }
  .mr-lg-7 {
    margin-right: 28px !important;
  }
  .mr-lg-8 {
    margin-right: 32px !important;
  }
  .mr-lg-9 {
    margin-right: 36px !important;
  }
  .mr-lg-10 {
    margin-right: 40px !important;
  }
  .mr-lg-11 {
    margin-right: 44px !important;
  }
  .mr-lg-12 {
    margin-right: 48px !important;
  }
  .mr-lg-13 {
    margin-right: 52px !important;
  }
  .mr-lg-14 {
    margin-right: 56px !important;
  }
  .mr-lg-15 {
    margin-right: 60px !important;
  }
  .mr-lg-16 {
    margin-right: 64px !important;
  }
  .mr-lg-17 {
    margin-right: 68px !important;
  }
  .mr-lg-18 {
    margin-right: 72px !important;
  }
  .mr-lg-19 {
    margin-right: 76px !important;
  }
  .mr-lg-20 {
    margin-right: 80px !important;
  }
  .mb-lg-0 {
    margin-bottom: 0px !important;
  }
  .mb-lg-1 {
    margin-bottom: 4px !important;
  }
  .mb-lg-2 {
    margin-bottom: 8px !important;
  }
  .mb-lg-3 {
    margin-bottom: 12px !important;
  }
  .mb-lg-4 {
    margin-bottom: 16px !important;
  }
  .mb-lg-5 {
    margin-bottom: 20px !important;
  }
  .mb-lg-6 {
    margin-bottom: 24px !important;
  }
  .mb-lg-7 {
    margin-bottom: 28px !important;
  }
  .mb-lg-8 {
    margin-bottom: 32px !important;
  }
  .mb-lg-9 {
    margin-bottom: 36px !important;
  }
  .mb-lg-10 {
    margin-bottom: 40px !important;
  }
  .mb-lg-11 {
    margin-bottom: 44px !important;
  }
  .mb-lg-12 {
    margin-bottom: 48px !important;
  }
  .mb-lg-13 {
    margin-bottom: 52px !important;
  }
  .mb-lg-14 {
    margin-bottom: 56px !important;
  }
  .mb-lg-15 {
    margin-bottom: 60px !important;
  }
  .mb-lg-16 {
    margin-bottom: 64px !important;
  }
  .mb-lg-17 {
    margin-bottom: 68px !important;
  }
  .mb-lg-18 {
    margin-bottom: 72px !important;
  }
  .mb-lg-19 {
    margin-bottom: 76px !important;
  }
  .mb-lg-20 {
    margin-bottom: 80px !important;
  }
  .pt-lg-0 {
    padding-top: 0px !important;
  }
  .pt-lg-1 {
    padding-top: 4px !important;
  }
  .pt-lg-2 {
    padding-top: 8px !important;
  }
  .pt-lg-3 {
    padding-top: 12px !important;
  }
  .pt-lg-4 {
    padding-top: 16px !important;
  }
  .pt-lg-5 {
    padding-top: 20px !important;
  }
  .pt-lg-6 {
    padding-top: 24px !important;
  }
  .pt-lg-7 {
    padding-top: 28px !important;
  }
  .pt-lg-8 {
    padding-top: 32px !important;
  }
  .pt-lg-9 {
    padding-top: 36px !important;
  }
  .pt-lg-10 {
    padding-top: 40px !important;
  }
  .pt-lg-11 {
    padding-top: 44px !important;
  }
  .pt-lg-12 {
    padding-top: 48px !important;
  }
  .pt-lg-13 {
    padding-top: 52px !important;
  }
  .pt-lg-14 {
    padding-top: 56px !important;
  }
  .pt-lg-15 {
    padding-top: 60px !important;
  }
  .pt-lg-16 {
    padding-top: 64px !important;
  }
  .pt-lg-17 {
    padding-top: 68px !important;
  }
  .pt-lg-18 {
    padding-top: 72px !important;
  }
  .pt-lg-19 {
    padding-top: 76px !important;
  }
  .pt-lg-20 {
    padding-top: 80px !important;
  }
  .pl-lg-0 {
    padding-left: 0px !important;
  }
  .pl-lg-1 {
    padding-left: 4px !important;
  }
  .pl-lg-2 {
    padding-left: 8px !important;
  }
  .pl-lg-3 {
    padding-left: 12px !important;
  }
  .pl-lg-4 {
    padding-left: 16px !important;
  }
  .pl-lg-5 {
    padding-left: 20px !important;
  }
  .pl-lg-6 {
    padding-left: 24px !important;
  }
  .pl-lg-7 {
    padding-left: 28px !important;
  }
  .pl-lg-8 {
    padding-left: 32px !important;
  }
  .pl-lg-9 {
    padding-left: 36px !important;
  }
  .pl-lg-10 {
    padding-left: 40px !important;
  }
  .pl-lg-11 {
    padding-left: 44px !important;
  }
  .pl-lg-12 {
    padding-left: 48px !important;
  }
  .pl-lg-13 {
    padding-left: 52px !important;
  }
  .pl-lg-14 {
    padding-left: 56px !important;
  }
  .pl-lg-15 {
    padding-left: 60px !important;
  }
  .pl-lg-16 {
    padding-left: 64px !important;
  }
  .pl-lg-17 {
    padding-left: 68px !important;
  }
  .pl-lg-18 {
    padding-left: 72px !important;
  }
  .pl-lg-19 {
    padding-left: 76px !important;
  }
  .pl-lg-20 {
    padding-left: 80px !important;
  }
  .pr-lg-0 {
    padding-right: 0px !important;
  }
  .pr-lg-1 {
    padding-right: 4px !important;
  }
  .pr-lg-2 {
    padding-right: 8px !important;
  }
  .pr-lg-3 {
    padding-right: 12px !important;
  }
  .pr-lg-4 {
    padding-right: 16px !important;
  }
  .pr-lg-5 {
    padding-right: 20px !important;
  }
  .pr-lg-6 {
    padding-right: 24px !important;
  }
  .pr-lg-7 {
    padding-right: 28px !important;
  }
  .pr-lg-8 {
    padding-right: 32px !important;
  }
  .pr-lg-9 {
    padding-right: 36px !important;
  }
  .pr-lg-10 {
    padding-right: 40px !important;
  }
  .pr-lg-11 {
    padding-right: 44px !important;
  }
  .pr-lg-12 {
    padding-right: 48px !important;
  }
  .pr-lg-13 {
    padding-right: 52px !important;
  }
  .pr-lg-14 {
    padding-right: 56px !important;
  }
  .pr-lg-15 {
    padding-right: 60px !important;
  }
  .pr-lg-16 {
    padding-right: 64px !important;
  }
  .pr-lg-17 {
    padding-right: 68px !important;
  }
  .pr-lg-18 {
    padding-right: 72px !important;
  }
  .pr-lg-19 {
    padding-right: 76px !important;
  }
  .pr-lg-20 {
    padding-right: 80px !important;
  }
  .pb-lg-0 {
    padding-bottom: 0px !important;
  }
  .pb-lg-1 {
    padding-bottom: 4px !important;
  }
  .pb-lg-2 {
    padding-bottom: 8px !important;
  }
  .pb-lg-3 {
    padding-bottom: 12px !important;
  }
  .pb-lg-4 {
    padding-bottom: 16px !important;
  }
  .pb-lg-5 {
    padding-bottom: 20px !important;
  }
  .pb-lg-6 {
    padding-bottom: 24px !important;
  }
  .pb-lg-7 {
    padding-bottom: 28px !important;
  }
  .pb-lg-8 {
    padding-bottom: 32px !important;
  }
  .pb-lg-9 {
    padding-bottom: 36px !important;
  }
  .pb-lg-10 {
    padding-bottom: 40px !important;
  }
  .pb-lg-11 {
    padding-bottom: 44px !important;
  }
  .pb-lg-12 {
    padding-bottom: 48px !important;
  }
  .pb-lg-13 {
    padding-bottom: 52px !important;
  }
  .pb-lg-14 {
    padding-bottom: 56px !important;
  }
  .pb-lg-15 {
    padding-bottom: 60px !important;
  }
  .pb-lg-16 {
    padding-bottom: 64px !important;
  }
  .pb-lg-17 {
    padding-bottom: 68px !important;
  }
  .pb-lg-18 {
    padding-bottom: 72px !important;
  }
  .pb-lg-19 {
    padding-bottom: 76px !important;
  }
  .pb-lg-20 {
    padding-bottom: 80px !important;
  }
}
@media (max-width: 1024.98px) {
  .m-md-0 {
    margin: 0px !important;
  }
  .m-md-1 {
    margin: 4px !important;
  }
  .m-md-2 {
    margin: 8px !important;
  }
  .m-md-3 {
    margin: 12px !important;
  }
  .m-md-4 {
    margin: 16px !important;
  }
  .m-md-5 {
    margin: 20px !important;
  }
  .m-md-6 {
    margin: 24px !important;
  }
  .m-md-7 {
    margin: 28px !important;
  }
  .m-md-8 {
    margin: 32px !important;
  }
  .m-md-9 {
    margin: 36px !important;
  }
  .m-md-10 {
    margin: 40px !important;
  }
  .m-md-11 {
    margin: 44px !important;
  }
  .m-md-12 {
    margin: 48px !important;
  }
  .m-md-13 {
    margin: 52px !important;
  }
  .m-md-14 {
    margin: 56px !important;
  }
  .m-md-15 {
    margin: 60px !important;
  }
  .m-md-16 {
    margin: 64px !important;
  }
  .m-md-17 {
    margin: 68px !important;
  }
  .m-md-18 {
    margin: 72px !important;
  }
  .m-md-19 {
    margin: 76px !important;
  }
  .m-md-20 {
    margin: 80px !important;
  }
  .p-md-0 {
    padding: 0px !important;
  }
  .p-md-1 {
    padding: 4px !important;
  }
  .p-md-2 {
    padding: 8px !important;
  }
  .p-md-3 {
    padding: 12px !important;
  }
  .p-md-4 {
    padding: 16px !important;
  }
  .p-md-5 {
    padding: 20px !important;
  }
  .p-md-6 {
    padding: 24px !important;
  }
  .p-md-7 {
    padding: 28px !important;
  }
  .p-md-8 {
    padding: 32px !important;
  }
  .p-md-9 {
    padding: 36px !important;
  }
  .p-md-10 {
    padding: 40px !important;
  }
  .p-md-11 {
    padding: 44px !important;
  }
  .p-md-12 {
    padding: 48px !important;
  }
  .p-md-13 {
    padding: 52px !important;
  }
  .p-md-14 {
    padding: 56px !important;
  }
  .p-md-15 {
    padding: 60px !important;
  }
  .p-md-16 {
    padding: 64px !important;
  }
  .p-md-17 {
    padding: 68px !important;
  }
  .p-md-18 {
    padding: 72px !important;
  }
  .p-md-19 {
    padding: 76px !important;
  }
  .p-md-20 {
    padding: 80px !important;
  }
  .mt-md-0 {
    margin-top: 0px !important;
  }
  .mt-md-1 {
    margin-top: 4px !important;
  }
  .mt-md-2 {
    margin-top: 8px !important;
  }
  .mt-md-3 {
    margin-top: 12px !important;
  }
  .mt-md-4 {
    margin-top: 16px !important;
  }
  .mt-md-5 {
    margin-top: 20px !important;
  }
  .mt-md-6 {
    margin-top: 24px !important;
  }
  .mt-md-7 {
    margin-top: 28px !important;
  }
  .mt-md-8 {
    margin-top: 32px !important;
  }
  .mt-md-9 {
    margin-top: 36px !important;
  }
  .mt-md-10 {
    margin-top: 40px !important;
  }
  .mt-md-11 {
    margin-top: 44px !important;
  }
  .mt-md-12 {
    margin-top: 48px !important;
  }
  .mt-md-13 {
    margin-top: 52px !important;
  }
  .mt-md-14 {
    margin-top: 56px !important;
  }
  .mt-md-15 {
    margin-top: 60px !important;
  }
  .mt-md-16 {
    margin-top: 64px !important;
  }
  .mt-md-17 {
    margin-top: 68px !important;
  }
  .mt-md-18 {
    margin-top: 72px !important;
  }
  .mt-md-19 {
    margin-top: 76px !important;
  }
  .mt-md-20 {
    margin-top: 80px !important;
  }
  .ml-md-0 {
    margin-left: 0px !important;
  }
  .ml-md-1 {
    margin-left: 4px !important;
  }
  .ml-md-2 {
    margin-left: 8px !important;
  }
  .ml-md-3 {
    margin-left: 12px !important;
  }
  .ml-md-4 {
    margin-left: 16px !important;
  }
  .ml-md-5 {
    margin-left: 20px !important;
  }
  .ml-md-6 {
    margin-left: 24px !important;
  }
  .ml-md-7 {
    margin-left: 28px !important;
  }
  .ml-md-8 {
    margin-left: 32px !important;
  }
  .ml-md-9 {
    margin-left: 36px !important;
  }
  .ml-md-10 {
    margin-left: 40px !important;
  }
  .ml-md-11 {
    margin-left: 44px !important;
  }
  .ml-md-12 {
    margin-left: 48px !important;
  }
  .ml-md-13 {
    margin-left: 52px !important;
  }
  .ml-md-14 {
    margin-left: 56px !important;
  }
  .ml-md-15 {
    margin-left: 60px !important;
  }
  .ml-md-16 {
    margin-left: 64px !important;
  }
  .ml-md-17 {
    margin-left: 68px !important;
  }
  .ml-md-18 {
    margin-left: 72px !important;
  }
  .ml-md-19 {
    margin-left: 76px !important;
  }
  .ml-md-20 {
    margin-left: 80px !important;
  }
  .mr-md-0 {
    margin-right: 0px !important;
  }
  .mr-md-1 {
    margin-right: 4px !important;
  }
  .mr-md-2 {
    margin-right: 8px !important;
  }
  .mr-md-3 {
    margin-right: 12px !important;
  }
  .mr-md-4 {
    margin-right: 16px !important;
  }
  .mr-md-5 {
    margin-right: 20px !important;
  }
  .mr-md-6 {
    margin-right: 24px !important;
  }
  .mr-md-7 {
    margin-right: 28px !important;
  }
  .mr-md-8 {
    margin-right: 32px !important;
  }
  .mr-md-9 {
    margin-right: 36px !important;
  }
  .mr-md-10 {
    margin-right: 40px !important;
  }
  .mr-md-11 {
    margin-right: 44px !important;
  }
  .mr-md-12 {
    margin-right: 48px !important;
  }
  .mr-md-13 {
    margin-right: 52px !important;
  }
  .mr-md-14 {
    margin-right: 56px !important;
  }
  .mr-md-15 {
    margin-right: 60px !important;
  }
  .mr-md-16 {
    margin-right: 64px !important;
  }
  .mr-md-17 {
    margin-right: 68px !important;
  }
  .mr-md-18 {
    margin-right: 72px !important;
  }
  .mr-md-19 {
    margin-right: 76px !important;
  }
  .mr-md-20 {
    margin-right: 80px !important;
  }
  .mb-md-0 {
    margin-bottom: 0px !important;
  }
  .mb-md-1 {
    margin-bottom: 4px !important;
  }
  .mb-md-2 {
    margin-bottom: 8px !important;
  }
  .mb-md-3 {
    margin-bottom: 12px !important;
  }
  .mb-md-4 {
    margin-bottom: 16px !important;
  }
  .mb-md-5 {
    margin-bottom: 20px !important;
  }
  .mb-md-6 {
    margin-bottom: 24px !important;
  }
  .mb-md-7 {
    margin-bottom: 28px !important;
  }
  .mb-md-8 {
    margin-bottom: 32px !important;
  }
  .mb-md-9 {
    margin-bottom: 36px !important;
  }
  .mb-md-10 {
    margin-bottom: 40px !important;
  }
  .mb-md-11 {
    margin-bottom: 44px !important;
  }
  .mb-md-12 {
    margin-bottom: 48px !important;
  }
  .mb-md-13 {
    margin-bottom: 52px !important;
  }
  .mb-md-14 {
    margin-bottom: 56px !important;
  }
  .mb-md-15 {
    margin-bottom: 60px !important;
  }
  .mb-md-16 {
    margin-bottom: 64px !important;
  }
  .mb-md-17 {
    margin-bottom: 68px !important;
  }
  .mb-md-18 {
    margin-bottom: 72px !important;
  }
  .mb-md-19 {
    margin-bottom: 76px !important;
  }
  .mb-md-20 {
    margin-bottom: 80px !important;
  }
  .pt-md-0 {
    padding-top: 0px !important;
  }
  .pt-md-1 {
    padding-top: 4px !important;
  }
  .pt-md-2 {
    padding-top: 8px !important;
  }
  .pt-md-3 {
    padding-top: 12px !important;
  }
  .pt-md-4 {
    padding-top: 16px !important;
  }
  .pt-md-5 {
    padding-top: 20px !important;
  }
  .pt-md-6 {
    padding-top: 24px !important;
  }
  .pt-md-7 {
    padding-top: 28px !important;
  }
  .pt-md-8 {
    padding-top: 32px !important;
  }
  .pt-md-9 {
    padding-top: 36px !important;
  }
  .pt-md-10 {
    padding-top: 40px !important;
  }
  .pt-md-11 {
    padding-top: 44px !important;
  }
  .pt-md-12 {
    padding-top: 48px !important;
  }
  .pt-md-13 {
    padding-top: 52px !important;
  }
  .pt-md-14 {
    padding-top: 56px !important;
  }
  .pt-md-15 {
    padding-top: 60px !important;
  }
  .pt-md-16 {
    padding-top: 64px !important;
  }
  .pt-md-17 {
    padding-top: 68px !important;
  }
  .pt-md-18 {
    padding-top: 72px !important;
  }
  .pt-md-19 {
    padding-top: 76px !important;
  }
  .pt-md-20 {
    padding-top: 80px !important;
  }
  .pl-md-0 {
    padding-left: 0px !important;
  }
  .pl-md-1 {
    padding-left: 4px !important;
  }
  .pl-md-2 {
    padding-left: 8px !important;
  }
  .pl-md-3 {
    padding-left: 12px !important;
  }
  .pl-md-4 {
    padding-left: 16px !important;
  }
  .pl-md-5 {
    padding-left: 20px !important;
  }
  .pl-md-6 {
    padding-left: 24px !important;
  }
  .pl-md-7 {
    padding-left: 28px !important;
  }
  .pl-md-8 {
    padding-left: 32px !important;
  }
  .pl-md-9 {
    padding-left: 36px !important;
  }
  .pl-md-10 {
    padding-left: 40px !important;
  }
  .pl-md-11 {
    padding-left: 44px !important;
  }
  .pl-md-12 {
    padding-left: 48px !important;
  }
  .pl-md-13 {
    padding-left: 52px !important;
  }
  .pl-md-14 {
    padding-left: 56px !important;
  }
  .pl-md-15 {
    padding-left: 60px !important;
  }
  .pl-md-16 {
    padding-left: 64px !important;
  }
  .pl-md-17 {
    padding-left: 68px !important;
  }
  .pl-md-18 {
    padding-left: 72px !important;
  }
  .pl-md-19 {
    padding-left: 76px !important;
  }
  .pl-md-20 {
    padding-left: 80px !important;
  }
  .pr-md-0 {
    padding-right: 0px !important;
  }
  .pr-md-1 {
    padding-right: 4px !important;
  }
  .pr-md-2 {
    padding-right: 8px !important;
  }
  .pr-md-3 {
    padding-right: 12px !important;
  }
  .pr-md-4 {
    padding-right: 16px !important;
  }
  .pr-md-5 {
    padding-right: 20px !important;
  }
  .pr-md-6 {
    padding-right: 24px !important;
  }
  .pr-md-7 {
    padding-right: 28px !important;
  }
  .pr-md-8 {
    padding-right: 32px !important;
  }
  .pr-md-9 {
    padding-right: 36px !important;
  }
  .pr-md-10 {
    padding-right: 40px !important;
  }
  .pr-md-11 {
    padding-right: 44px !important;
  }
  .pr-md-12 {
    padding-right: 48px !important;
  }
  .pr-md-13 {
    padding-right: 52px !important;
  }
  .pr-md-14 {
    padding-right: 56px !important;
  }
  .pr-md-15 {
    padding-right: 60px !important;
  }
  .pr-md-16 {
    padding-right: 64px !important;
  }
  .pr-md-17 {
    padding-right: 68px !important;
  }
  .pr-md-18 {
    padding-right: 72px !important;
  }
  .pr-md-19 {
    padding-right: 76px !important;
  }
  .pr-md-20 {
    padding-right: 80px !important;
  }
  .pb-md-0 {
    padding-bottom: 0px !important;
  }
  .pb-md-1 {
    padding-bottom: 4px !important;
  }
  .pb-md-2 {
    padding-bottom: 8px !important;
  }
  .pb-md-3 {
    padding-bottom: 12px !important;
  }
  .pb-md-4 {
    padding-bottom: 16px !important;
  }
  .pb-md-5 {
    padding-bottom: 20px !important;
  }
  .pb-md-6 {
    padding-bottom: 24px !important;
  }
  .pb-md-7 {
    padding-bottom: 28px !important;
  }
  .pb-md-8 {
    padding-bottom: 32px !important;
  }
  .pb-md-9 {
    padding-bottom: 36px !important;
  }
  .pb-md-10 {
    padding-bottom: 40px !important;
  }
  .pb-md-11 {
    padding-bottom: 44px !important;
  }
  .pb-md-12 {
    padding-bottom: 48px !important;
  }
  .pb-md-13 {
    padding-bottom: 52px !important;
  }
  .pb-md-14 {
    padding-bottom: 56px !important;
  }
  .pb-md-15 {
    padding-bottom: 60px !important;
  }
  .pb-md-16 {
    padding-bottom: 64px !important;
  }
  .pb-md-17 {
    padding-bottom: 68px !important;
  }
  .pb-md-18 {
    padding-bottom: 72px !important;
  }
  .pb-md-19 {
    padding-bottom: 76px !important;
  }
  .pb-md-20 {
    padding-bottom: 80px !important;
  }
}
.title1 {
  margin: 30px 0 15px;
}

@media (min-width: 1025px) {
  .title2 {
    margin: 47px 0 22px 18px;
  }
}
@media (max-width: 1024.98px) {
  .title2 {
    margin: 31px 0 26px 16px;
  }
}
@media (min-width: 1025px) {
  .title2 + .indent {
    margin-left: 37px;
  }
  .title2 + .indent > p:first-child,
  .title2 + .indent > .list:first-child {
    margin-top: -5px;
  }
}
@media (max-width: 1024.98px) {
  .title2 + .indent {
    margin-left: 32px;
  }
  .title2 + .indent > p:first-child,
  .title2 + .indent > .list:first-child {
    margin-top: -4px;
  }
}
@media (min-width: 1025px) {
  .title2.ml-0 + .indent {
    margin-left: 20px;
  }
}
@media (max-width: 1024.98px) {
  .title2.ml-0 + .indent {
    margin-left: 16px;
  }
}

.clearfix {
  position: relative;
}
.clearfix:after {
  display: block;
  clear: both;
  content: "";
}

.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

.float-none {
  float: none !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

@media (min-width: 1025px) {
  .text-lg-left {
    text-align: left !important;
  }
  .text-lg-right {
    text-align: right !important;
  }
  .text-lg-center {
    text-align: center !important;
  }
}
@media (max-width: 1024.98px) {
  .text-md-left {
    text-align: left !important;
  }
  .text-md-right {
    text-align: right !important;
  }
  .text-md-center {
    text-align: center !important;
  }
}
@media (max-width: 767.98px) {
  .text-sm-left {
    text-align: left !important;
  }
  .text-sm-right {
    text-align: right !important;
  }
  .text-sm-center {
    text-align: center !important;
  }
}
.vertical-top {
  vertical-align: top !important;
}

.vertical-middle {
  vertical-align: middle !important;
}

.vertical-bottom {
  vertical-align: bottom !important;
}

@media (min-width: 1025px) {
  .content-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .content-row > .col-item + .col-item,
  .content-row > .col-item-fit + .col-item {
    margin-left: 40px;
  }
  .content-row > .col-item + .col-item-fit,
  .content-row > .col-item-fit + .col-item-fit {
    margin-left: 40px;
  }
  .content-row > .col-item {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 50%;
            flex: 1 1 50%;
  }
  .content-row > .col-item-fit {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
  }
}

@media (max-width: 1024.98px) {
  .d-up-lg {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  .d-up-md {
    display: none !important;
  }
}

@media (min-width: 1025px) {
  .d-down-md {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .d-down-sm {
    display: none !important;
  }
}

.text-default {
  color: #0F172A !important;
}

.text-primary {
  color: #F54090 !important;
}

.text-gray {
  color: #374151 !important;
}

.text-lightgray {
  color: #A4ACB7 !important;
}

.text-white {
  color: #fff !important;
}

.text-invalid {
  color: #FF4D6D !important;
}

.bg-primary {
  background-color: #F54090 !important;
  color: #fff;
}

.bg-darkgray {
  background-color: #0F172A !important;
  color: #fff;
}

.bg-black {
  background-color: #000 !important;
  color: #fff;
}

.bg-lightgray {
  background-color: #F7F9FC !important;
}

.bg-gray {
  background-color: #E9EEF4 !important;
}

.bg-white {
  background-color: #fff !important;
}

.text-gradient {
  background: url(../images/main/bg-gradient.jpg) no-repeat;
  background-size: 100% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.text-normal {
  font-weight: normal !important;
}

.text-medium {
  font-weight: 500 !important;
}

.text-bold {
  font-weight: bold !important;
}

@media (min-width: 1025px) {
  .text-title {
    font-family: "Spoqa Han Sans Neo", "Noto Sans KR", "Noto Sans CJK KR", "malgun gothic", sans-serif, Tahoma;
  }
}

.title1,
.title2 {
  position: relative;
  font-weight: bold;
}
.title1:before,
.title2:before {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  content: "";
}

.title1:before {
  position: absolute;
  left: 0;
  width: 6px;
  height: 20px;
  background-color: #F54090;
  border-radius: 3px;
}
@media (min-width: 1025px) {
  .title1 {
    padding-left: 18px;
    font-family: "Spoqa Han Sans Neo", "Noto Sans KR", "Noto Sans CJK KR", "malgun gothic", sans-serif, Tahoma;
    font-size: 24px;
    line-height: 38px;
  }
  .title1:before {
    top: 9px;
    margin-right: 12px;
  }
}
@media (max-width: 1024.98px) {
  .title1 {
    font-size: 20px;
    line-height: 30px;
    padding-left: 16px;
  }
  .title1:before {
    top: 0.29em;
    height: 18px;
    margin-right: 10px;
  }
}

.title2:before {
  position: absolute;
  width: 11px;
  height: 11px;
  border: 3px solid #F54090;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  content: "";
  left: 0;
}
@media (min-width: 1025px) {
  .title2 {
    font-family: "Spoqa Han Sans Neo", "Noto Sans KR", "Noto Sans CJK KR", "malgun gothic", sans-serif, Tahoma;
    font-size: 20px;
    line-height: 34px;
    padding-left: 19px;
  }
  .title2:before {
    top: 0.55em;
    margin-right: 8px;
  }
}
@media (max-width: 1024.98px) {
  .title2 {
    padding-left: 16px;
    font-size: 19px;
    line-height: 29px;
  }
  .title2:before {
    top: 0.46em;
    margin-right: 5px;
  }
}

.link {
  color: #F54090;
  text-decoration: underline;
}

.text-xs {
  font-size: 11px;
  line-height: 16px;
}

.text-sm {
  font-size: 14px;
}

.text-md {
  font-size: 16px;
  line-height: 1.5;
}

.text-lg {
  font-size: 25px;
  line-height: 32px;
}

.text-xl {
  font-size: 37px;
  line-height: 48px;
}

.border {
  border: 1px solid #e6e6e6;
}

.border-left {
  border-left: 1px solid #e6e6e6;
}

.border-right {
  border-right: 1px solid #e6e6e6;
}

.border-top {
  border-top: 1px solid #e6e6e6;
}

.border-bottom {
  border-bottom: 1px solid #e6e6e6;
}

.round {
  border-radius: 10px;
}

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
[dir=rtl] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

.slick-dots {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 32px;
  line-height: 1;
}
.slick-dots button {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  vertical-align: middle;
  overflow: hidden;
  text-indent: -9999px;
  overflow: hidden;
  text-align: left;
  position: relative;
  width: 16px;
  height: 16px;
}
.slick-dots button:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px;
  border-radius: 50%;
  background-color: #E9EEF4;
}
.slick-dots .slick-active button:before {
  background-color: #F54090;
}

.loadingbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 1000;
  -webkit-transition-duration: 1s;
          transition-duration: 1s;
  -webkit-transition-property: opacity, visibility;
  transition-property: opacity, visibility;
  will-change: opacity, visibility;
}
.loadingbar .spinner {
  width: 90px;
  height: 90px;
}
.loadingbar.hide {
  opacity: 0;
  visibility: hidden;
}

.container, .sticky-container {
  max-width: 1328px;
  margin: auto;
}
.container:after, .sticky-container:after {
  display: block;
  clear: both;
  content: "";
}
@media (min-width: 1025px) {
  .container, .sticky-container {
    padding: 0 64px;
  }
}
@media (max-width: 1024.98px) {
  .container, .sticky-container {
    padding: 0 24px;
  }
}

.container-sm {
  max-width: 520px;
  margin: auto;
}
.container-sm:after {
  display: block;
  clear: both;
  content: "";
}

.container-lg {
  max-width: 1600px;
  margin: auto;
}
.container-lg:after {
  display: block;
  clear: both;
  content: "";
}

/** @format */
.ico {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  vertical-align: middle;
  overflow: hidden;
  text-indent: -9999px;
  overflow: hidden;
  text-align: left;
}

.ico-xs-chevron-right {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-xs-chevron-right@2x.png");
}

.ico-xs-chevron-right-white {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-xs-chevron-right-white@2x.png");
}

.ico-xs-chevron-down-gray {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-xs-chevron-down-gray@2x.png");
}

.ico-xs-chevron-up-gray {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-xs-chevron-up-gray@2x.png");
}

.ico-xs-download {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-xs-download@2x.png");
}

.ico-xs-download-darkgray {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-xs-download-darkgray@2x.png");
}

.ico-xs-email {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-xs-email@2x.png");
}

.ico-xs-warning {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-xs-warning@2x.png");
}

.ico-xs-calendar {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-xs-calendar@2x.png");
}

.ico-xs-plus {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-xs-plus@2x.png");
}

.ico-xs-plus {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-xs-plus@2x.png");
}

.ico-xs-android-white {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-xs-android-white@2x.png");
}

.ico-xs-apple-white {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-xs-apple-white@2x.png");
}

.ico-xs-chevron-gray-next {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-xs-chevron-gray-next@2x.png");
}

.ico-xs-bus-white {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-xs-bus-white@2x.png");
}

.ico-xs-incms-logo {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-xs-incms-logo@2x.png");
}

.ico-xs-neibis-logo {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-xs-neibis-logo@2x.png");
}

.ico-xs-inuixframework-logo {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-xs-inuixframework-logo@2x.png");
}

.ico-xs-walking {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-xs-walking@2x.png");
}

.ico-chevron-right-white-xs {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-chevron-right-white-xs@2x.png");
}

.ico-xs-arrow-right-darkgray {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-xs-arrow-right-darkgray@2x.png");
}

.ico-sm-allmenu {
  width: 24px;
  height: 24px;
  line-height: 24px;
  background-image: url("../images/ico-sm-allmenu@2x.png");
}

.ico-sm-close {
  width: 24px;
  height: 24px;
  line-height: 24px;
  background-image: url("../images/ico-sm-close@2x.png");
}

.ico-sm-close-white {
  width: 24px;
  height: 24px;
  line-height: 24px;
  background-image: url("../images/ico-sm-close-white@2x.png");
}

.ico-sm-close-black {
  width: 24px;
  height: 24px;
  line-height: 24px;
  background-image: url("../images/ico-sm-close-black@2x.png");
}

.ico-sm-copy-white {
  width: 24px;
  height: 24px;
  line-height: 24px;
  background-image: url("../images/ico-sm-copy-white@2x.png");
}

.ico-md-git-gray {
  width: 32px;
  height: 32px;
  line-height: 32px;
  background-image: url("../images/ico-md-git-gray@2x.png");
}

.ico-md-kakaotalk-gray {
  width: 32px;
  height: 32px;
  line-height: 32px;
  background-image: url("../images/ico-md-kakaotalk-gray@2x.png");
}

.ico-md-pms-gray {
  width: 32px;
  height: 32px;
  line-height: 32px;
  background-image: url("../images/ico-md-pms-gray@2x.png");
}

.ico-md-chevron-left-gray {
  width: 32px;
  height: 32px;
  line-height: 32px;
  background-image: url("../images/ico-md-chevron-left-gray@2x.png");
}

.ico-md-chevron-right-gray {
  width: 32px;
  height: 32px;
  line-height: 32px;
  background-image: url("../images/ico-md-chevron-right-gray@2x.png");
}

.ico-md-chevron-bottom-gray {
  width: 32px;
  height: 32px;
  line-height: 32px;
  background-image: url("../images/ico-md-chevron-bottom-gray@2x.png");
}

.ico-md-figma {
  width: 32px;
  height: 32px;
  line-height: 32px;
  background-image: url("../images/ico-md-figma@2x.png");
}

.ico-lg-kakao {
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-image: url("../images/ico-lg-kakao@2x.png");
}

.ico-lg-email {
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-image: url("../images/ico-lg-email@2x.png");
}

.ico-lg-email-gray {
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-image: url("../images/ico-lg-email-gray@2x.png");
}

.ico-lg-totop {
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-image: url("../images/ico-lg-totop@2x.png");
}

.ico-externallink-brand-md {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-externallink-brand-md@2x.png");
}

.ico-md-close-gray {
  width: 28px;
  height: 28px;
  line-height: 28px;
  background-image: url("../images/ico-md-close-gray@2x.png");
}

.ico-wand-white-lg {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-wand-white-lg@2x.png");
}

.ico-search-white-md {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-search-white-md@2x.png");
}

.ico-chevron-right-black-sm {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-chevron-right-black-sm@2x.png");
}

.ico-md-arrow-right-white {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-md-arrow-right-white@2x.png");
}

.ico-md-arrow-right-black {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-md-arrow-right-black@2x.png");
}

.ico-chevron-right-lightgray-md {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url("../images/ico-chevron-right-lightgray-md@2x.png");
}

.ico-xs-close-white {
  width: 10px;
  height: 10px;
  line-height: 10px;
  background-image: url("../images/ico-xs-close-white@2x.png");
}

.ico-md-chevron-right-white {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-md-chevron-right-white@2x.png");
}

.ico-ontact {
  width: 36px;
  height: 36px;
  line-height: 36px;
  background-image: url("../images/ico-ontact@2x.png");
}

.ico-nebis {
  width: 36px;
  height: 36px;
  line-height: 36px;
  background-image: url("../images/ico-nebis@2x.png");
}

.ico-cms {
  width: 36px;
  height: 36px;
  line-height: 36px;
  background-image: url("../images/ico-cms@2x.png");
}

.ico-uix {
  width: 36px;
  height: 36px;
  line-height: 36px;
  background-image: url("../images/ico-uix@2x.png");
}

.ico-a11y {
  width: 36px;
  height: 36px;
  line-height: 36px;
  background-image: url("../images/ico-a11y@2x.png");
}

.ico-a11yent {
  width: 36px;
  height: 36px;
  line-height: 36px;
  background-image: url("../images/ico-a11yent@2x.png");
}

.ico-new {
  width: 30px;
  height: 14px;
  line-height: 14px;
  background-image: url("../images/ico-new@2x.png");
}

.ico-beta {
  width: 30px;
  height: 14px;
  line-height: 14px;
  background-image: url("../images/ico-beta@2x.png");
}

.ico-label-gs {
  width: 39px;
  height: 14px;
  line-height: 14px;
  background-image: url("../images/ico-label-gs@2x.png");
}

.ico-xs-newwindow-gray {
  width: 12px;
  height: 12px;
  line-height: 12px;
  background-image: url("../images/ico-xs-newwindow-gray@2x.png");
}

.ico-xs-newwindow-black {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-xs-newwindow-black@2x.png");
}

.ico-xs-newwindow-gray800 {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-xs-newwindow-gray800@2x.png");
}

.ico-nia {
  width: 32px;
  height: 32px;
  line-height: 32px;
  background-image: url("../images/ico-nia@2x.png");
}

.ico-jmeter {
  width: 32px;
  height: 32px;
  line-height: 32px;
  background-image: url("../images/ico-jmeter@2x.png");
}

.ico-public-administration {
  width: 32px;
  height: 32px;
  line-height: 32px;
  background-image: url("../images/ico-public-administration@2x.png");
}

.ico-findbugs {
  width: 32px;
  height: 32px;
  line-height: 32px;
  background-image: url("../images/ico-findbugs@2x.png");
}

.ico-web-accessibility {
  width: 32px;
  height: 32px;
  line-height: 32px;
  background-image: url("../images/ico-web-accessibility@2x.png");
}

.ico-kisa {
  width: 32px;
  height: 32px;
  line-height: 32px;
  background-image: url("../images/ico-kisa@2x.png");
}

.ico-consult {
  width: 56px;
  height: 56.5px;
  line-height: 56.5px;
  background-image: url("../images/ico-consult@2x.png");
}

.ico-mark-gs {
  width: 32px;
  height: 32px;
  line-height: 32px;
  background-image: url("../images/ico-mark-gs@2x.png");
}

.ico-xs-newwindow {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-xs-newwindow@2x.png");
}

.ico-xs-newwindow-white {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-image: url("../images/ico-xs-newwindow-white@2x.png");
}

.ico-a11yservice1-lg {
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-image: url("../images/ico-a11yservice1-lg@2x.png");
}

.ico-a11yservice2-lg {
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-image: url("../images/ico-a11yservice2-lg@2x.png");
}

.ico-a11yservice3-lg {
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-image: url("../images/ico-a11yservice3-lg@2x.png");
}

.ico-a11yservice4-lg {
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-image: url("../images/ico-a11yservice4-lg@2x.png");
}

.ico-lg-arrow-right-white {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url("../images/ico-lg-arrow-right-white@2x.png");
}

.ico-sprout {
  width: 28px;
  height: 28px;
  line-height: 28px;
  background-image: url("../images/ico-sprout@2x.png");
}

.ico-smilepc {
  width: 28px;
  height: 28px;
  line-height: 28px;
  background-image: url("../images/ico-smilepc@2x.png");
}

.ico-sun {
  width: 28px;
  height: 28px;
  line-height: 28px;
  background-image: url("../images/ico-sun@2x.png");
}

.ico-sm-chevron-bottom-gray {
  width: 24px;
  height: 24px;
  line-height: 24px;
  background-image: url("../images/ico-sm-chevron-bottom-gray@2x.png");
}

.ico-md-chevron-left-subgray {
  width: 32px;
  height: 32px;
  line-height: 32px;
  background-image: url("../images/ico-md-chevron-left-subgray@2x.png");
}

.ico-md-chevron-right-subgray {
  width: 32px;
  height: 32px;
  line-height: 32px;
  background-image: url("../images/ico-md-chevron-right-subgray@2x.png");
}

.ico-target {
  width: 56px;
  height: 56px;
  line-height: 56px;
  background-image: url("../images/ico-target@2x.png");
}

.ico-try {
  width: 56px;
  height: 56px;
  line-height: 56px;
  background-image: url("../images/ico-try@2x.png");
}

.ico-conversation {
  width: 56px;
  height: 56px;
  line-height: 56px;
  background-image: url("../images/ico-conversation@2x.png");
}

/* 불릿 및 목록 */
.list > li {
  position: relative;
}
.list > li:after {
  display: block;
  clear: both;
  content: "";
}
.list > li:before {
  content: "";
  position: absolute;
  left: 0;
}
.list > li.none:before {
  display: none;
}
.list > li.bullet-none {
  font-weight: bold;
  padding: 5px 0 0;
}
.list > li.bullet-none:before {
  display: none;
}

.list-dot > li:before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  left: 0;
}
@media (min-width: 1025px) {
  .list-dot > li {
    padding-left: 12px;
  }
  .list-dot > li:before {
    top: 0.7em;
  }
}
@media (max-width: 1024.98px) {
  .list-dot > li {
    padding-left: 9px;
  }
  .list-dot > li:before {
    top: 10px;
  }
}

.list-dot > li:before {
  background-color: #CAD1D8;
}

.list-hyphen > li {
  padding-left: 8px;
}
.list-hyphen > li:before {
  content: "-";
}

.btn {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 4px;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
  -webkit-transition-property: background-color;
  transition-property: background-color;
  cursor: pointer;
}
.btn[disabled=disabled], .btn[disabled] {
  opacity: 0.5;
}

.btn-sm .ico,
.btn-md .ico,
.btn-lg .ico {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

.btn-sm {
  border: 1px solid transparent;
  height: 40px;
  border-radius: 4px;
  font-size: 14px;
  padding: 0 24px;
}

.btn-md {
  border: 1px solid transparent;
  height: 44px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  min-width: 99px;
  padding: 0 16px;
}

.btn-lg {
  border: 1px solid transparent;
  height: 56px;
  padding: 0 24px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
}
@media (min-width: 1025px) {
  .btn-lg + .btn-lg {
    margin-left: 12px;
  }
}
@media (max-width: 1024.98px) {
  .btn-lg {
    padding: 0 24px;
  }
  .btn-lg + .btn-lg {
    margin-left: 4px;
  }
}

.btn-input {
  border: 1px solid transparent;
  min-width: 90px;
  height: 40px;
  padding: 0 24px;
  font-size: 16px;
}

.btn-icon {
  padding: 0 10px;
}
.btn-icon .ico {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.btn-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.btn-round {
  border-radius: 30px !important;
  font-weight: bold;
}

.btn-default {
  color: #0F172A;
  background-color: #E9EEF4;
}
.btn-default:focus, .btn-default:hover {
  background-color: #CAD1D8;
}

.btn-black {
  color: #fff;
  background-color: #000;
}
.btn-black:focus, .btn-black:hover {
  background-color: #0F172A;
}

.btn-white {
  color: #374151;
  background-color: #fff;
}
.btn-white:focus, .btn-white:hover {
  background-color: #E5E7EB !important;
}

.btn-gray {
  color: #374151;
  background-color: #F3F4F6;
}
.btn-gray:focus, .btn-gray:hover {
  background-color: #E5E7EB !important;
}

.btn-outline-default {
  color: #3a3a3a;
  border-color: #CAD1D8;
}
.btn-outline-default:focus, .btn-outline-default:hover {
  background-color: #fff;
}

.btn-primary {
  color: #fff;
  background-color: #F54090;
}
.btn-primary:focus, .btn-primary:hover {
  background-color: #ED237C;
}
.btn-primary:disabled, .btn-primary.disabled {
  opacity: 0.5;
  background-color: #F54090;
}

.btn-text-gray {
  color: #7E8594;
  background-color: transparent;
}
.btn-text-gray:focus, .btn-text-gray:hover {
  color: #374151;
  background-color: #F3F4F6;
}

.btn-text-white {
  color: rgba(255, 255, 255, 0.8);
  background-color: transparent;
}
.btn-text-white:focus, .btn-text-white:hover {
  background: rgba(255, 255, 255, 0.1);
}

.btn-group-default {
  position: relative;
  text-align: center;
}
.btn-group-default .btn + .btn {
  margin-left: 6px;
}

.btn-group-more {
  margin-top: 70px;
  text-align: center;
}

/** @format */
.form-control {
  max-width: 100%;
  height: 40px;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 7px 15px;
  background: #F7F9FC;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  text-align: left;
  font-size: 16px;
  line-height: 24px;
  font-weight: normal;
  color: #0F172A;
  vertical-align: middle;
  outline: 0;
}
.form-control::-ms-clear {
  display: none;
}
.form-control.full {
  width: 100%;
}
.form-control.inline {
  width: auto !important;
}
.form-control:focus {
  position: relative;
  border-color: #0f172a;
}
.form-control::-webkit-input-placeholder {
  color: #A4ACB7;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #A4ACB7;
  opacity: 1;
}
.form-control:disabled {
  color: #A4ACB7;
  background-color: #F7F9FC;
  opacity: 1;
}
.form-control:disabled::-ms-value {
  color: #A4ACB7 !important;
}

select.form-control {
  max-width: 100%;
  line-height: normal;
  padding: 0 40px 0 15px;
  background: #F7F9FC url(../images/ico-xs-chevron-down-gray.png) no-repeat right 16px center;
  background-size: 12px auto;
  color: #A4ACB7;
}
select.form-control option {
  color: #0F172A;
}
select.form-control::-ms-expand {
  display: none;
}

textarea.form-control {
  height: auto;
  padding-top: 12px;
  padding-bottom: 12px;
  line-height: inherit;
  overflow: auto;
  resize: none;
}

.form-radio,
.form-check {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.form-radio + .label,
.form-radio + label,
.form-check + .label,
.form-check + label {
  position: relative;
  height: 16px;
  cursor: pointer;
}
.form-radio + .label .sr-only,
.form-radio + label .sr-only,
.form-check + .label .sr-only,
.form-check + label .sr-only {
  position: static;
  margin-right: -6px !important;
}
.form-radio + .label:before,
.form-radio + label:before,
.form-check + .label:before,
.form-check + label:before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #dedede;
  vertical-align: middle;
  border-radius: 0;
  margin: -2px 8px 0 0;
  border-radius: 2px;
  background-color: #fff;
  content: "";
}
.form-radio:disabled + .label,
.form-radio:disabled + label,
.form-check:disabled + .label,
.form-check:disabled + label {
  color: #959595;
}
.form-radio:disabled + .label:before,
.form-radio:disabled + label:before,
.form-check:disabled + .label:before,
.form-check:disabled + label:before {
  opacity: 0.3;
  border-color: #666;
}

.form-check:checked + .label:before,
.form-check:checked + label:before {
  border-color: transparent;
  background: #F54090 url(../images/ico-checkbox-checked@2x.png) no-repeat center center;
  background-size: 10px auto;
}

.form-radio + .label:before,
.form-radio + label:before {
  border-radius: 50%;
}
.form-radio:checked + .label:before,
.form-radio:checked + label:before {
  border-color: #F54090;
  background: #fff url(../images/ico-radio-checked@2x.png) no-repeat center center;
  background-size: 8px auto;
}

.input-group {
  display: table;
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}
.input-group .datepicker,
.input-group .form-control {
  display: table-cell;
  width: 100% !important;
}
.input-group .input-addon {
  display: table-cell;
  width: 1%;
  padding-left: 10px;
  vertical-align: middle;
}
.input-group .input-addon + .form-control {
  margin-left: 9px;
  border-right: 1px solid #E9EEF4;
}
.input-group .btn-md {
  height: 30px;
  padding: 0 15px;
  line-height: 28px;
}
@media (max-width: 1024.98px) {
  .input-group {
    max-width: none !important;
  }
}

.form-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.form-row .text-item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  padding: 0 10px;
}
.form-row .input-item + .input-item {
  margin-left: 10px;
}
.form-row .input-item .form-control {
  width: 100%;
}
@media (min-width: 1025px) {
  .form-row .input-item {
    display: block;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
  }
}
@media (max-width: 1024.98px) {
  .form-row {
    max-width: none !important;
  }
  .form-row .text-item {
    padding: 0 5px;
  }
  .form-row .input-item {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 10%;
            flex: 1 1 10%;
  }
  .form-row .input-item.md-full {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
    margin: 15px 0 0 !important;
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    width: 100%;
  }
}

.form-file {
  display: none;
}

.file-name {
  color: #0F172A !important;
}
.file-name span {
  display: block;
  overflow: hidden;
  max-width: 100%;
  white-space: nowrap;
  height: 24px;
  max-height: none;
  line-height: 24px;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 400px;
}
@media (max-width: 1024.98px) {
  .file-name {
    max-width: calc(100vw - 192px);
  }
}

/* 탭메뉴 */
.tab-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  word-break: keep-all;
  word-wrap: break-word;
}
.tab-list li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.tab-list li a .ico {
  margin-top: -2px;
}
.tab-list li a span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  max-height: 40px;
  line-height: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.tab-content {
  display: none;
}

.tab-menu1 {
  position: relative;
  font-weight: bold;
  color: #A4ACB7;
}
.tab-menu1 .tab-list {
  margin: -6px -12px;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
.tab-menu1 .tab-list li {
  margin: 6px 12px;
}
.tab-menu1 .tab-list li.on a {
  color: #fff;
  background-color: #F54090;
}
.tab-menu1 .tab-list li a {
  min-width: 96px;
  height: 48px;
  padding: 0 8px;
  border-radius: 16px;
}
@media (max-width: 1024.98px) {
  .tab-menu1 {
    margin: 0 -26px;
    overflow-x: auto;
  }
  .tab-menu1 .tab-list {
    margin: 0;
  }
  .tab-menu1 .tab-list:before, .tab-menu1 .tab-list:after {
    content: "";
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 24px;
  }
  .tab-menu1 .tab-list li {
    margin: 0 2px;
  }
  .tab-menu1 .tab-list li a {
    min-width: 80px;
    height: 40px;
    border-radius: 14px;
  }
}
@media (max-width: 767.98px) {
  .tab-menu1 .tab-list li a {
    min-width: 40px;
    height: 32px;
    border-radius: 10px;
  }
  .tab-menu1 .tab-list li a span {
    font-size: 13px;
  }
}

.tab-menu2 {
  position: relative;
  font-weight: 500;
  color: #A4ACB7;
}
.tab-menu2 .tab-list {
  font-size: 15px;
  border-radius: 20px;
  background-color: #F7F9FC;
}
.tab-menu2 .tab-list input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.tab-menu2 .tab-list .item,
.tab-menu2 .tab-list li {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 33.33333%;
          flex: 1 1 33.33333%;
  width: 33.33333%;
  float: left;
}
.tab-menu2 .tab-list .item :checked + .text, .tab-menu2 .tab-list .item.on a,
.tab-menu2 .tab-list li :checked + .text,
.tab-menu2 .tab-list li.on a {
  color: #fff;
  background-color: #F54090;
}
.tab-menu2 .tab-list .item .text,
.tab-menu2 .tab-list .item a,
.tab-menu2 .tab-list li .text,
.tab-menu2 .tab-list li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 20px;
  height: 40px;
}
@media (min-width: 1025px) {
  .tab-menu2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .tab-menu2 .tab-list .item,
  .tab-menu2 .tab-list li {
    min-width: 136px;
  }
}

.box {
  border: 1px solid #dedede;
  border-radius: 10px;
  padding: 10px 12px;
}

/* 모달 팝업 */
.modal-open {
  overflow: hidden;
  height: 100%;
}

.modal-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.modal-popup.hide {
  opacity: 0;
  visibility: hidden;
}
.modal-popup.hide .popup-inner {
  -webkit-transform: translateY(-100px);
          transform: translateY(-100px);
}
.modal-popup.show {
  opacity: 1;
  visibility: visible;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.modal-popup.show .popup-inner {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.modal-popup .dimed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(72, 78, 87, 0.5);
}
.modal-popup .dimed + .popup-inner {
  border: 0;
}
.modal-popup .popup-inner {
  position: relative;
  z-index: 1100;
  background-color: #fff;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  outline: 0;
}
.modal-popup .popup-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 16px;
  font-weight: bold;
}
.modal-popup .popup-body {
  position: relative;
  padding: 30px;
  max-height: calc(100vh - 240px);
  overflow-y: auto;
}
@media (min-width: 1025px) {
  .modal-popup .popup-body::-webkit-scrollbar {
    width: 15px;
    height: 15px;
    background-color: transparent;
  }
  .modal-popup .popup-body::-webkit-scrollbar-thumb {
    background-color: rgba(164, 172, 183, 0.5);
    border-radius: 7.5px;
    background-clip: padding-box;
    border: 5px solid transparent;
  }
  .modal-popup .popup-body::-webkit-scrollbar-thumb:hover {
    background-color: rgba(150, 159, 172, 0.5);
  }
  .modal-popup .popup-body::-webkit-scrollbar-thumb:active {
    background-color: rgba(136, 146, 160, 0.5);
  }
  .modal-popup .popup-body::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0.4);
  }
  .modal-popup .popup-body::-webkit-scrollbar-corner {
    background-color: rgba(255, 255, 255, 0.4);
  }
}
.modal-popup .btn-close-popup {
  width: 48px;
  height: 48px;
  position: absolute;
  right: 16px;
  top: 4px;
}
.modal-popup.modal-full .popup-inner {
  width: 100%;
  height: 100%;
}
.modal-popup.modal-sm .popup-inner {
  width: 446px;
  border-radius: 24px;
  padding: 24px;
}
.modal-popup.modal-sm .popup-header {
  padding-top: 8px;
  padding-bottom: 24px;
}
.modal-popup.modal-sm .popup-body {
  padding: 0;
}
.modal-popup.modal-sm .popup-footer {
  padding-top: 24px;
}
.modal-popup.modal-md {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.modal-popup.modal-md .popup-header {
  border-bottom: 1px solid #E9EEF4;
}
.modal-popup.modal-md .popup-title {
  height: 55px;
}
.modal-popup.modal-md .popup-inner {
  width: 608px;
  border-radius: 0 0 24px 24px;
}
.modal-popup.modal-md .popup-body {
  padding: 24px;
}
.modal-popup.modal-md .popup-footer {
  margin: 0 24px;
  padding: 24px 24px 32px;
  border-top: 1px solid #E9EEF4;
}
.modal-popup.modal-md .popup-footer .btn + .btn {
  margin-left: 4px;
}
.modal-popup.modal-lg .popup-header {
  border-bottom: 1px solid #E9EEF4;
}
.modal-popup.modal-lg .popup-title {
  height: 55px;
}
.modal-popup.modal-lg .popup-inner {
  width: 1000px;
  border-radius: 20px;
}
.modal-popup.modal-lg .popup-body {
  padding: 40px;
  max-height: calc(100vh - 139px);
}
.modal-popup.modal-lg .popup-footer {
  margin: 0 24px;
  padding: 24px 24px 32px;
  border-top: 1px solid #E9EEF4;
}
@media (max-width: 1024.98px) {
  .modal-popup.modal-lg {
    margin: 12px;
  }
  .modal-popup.modal-lg .popup-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
    height: 100%;
    border-radius: 20px;
  }
  .modal-popup.modal-lg .popup-header,
  .modal-popup.modal-lg .popup-footer {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
  }
  .modal-popup.modal-lg .popup-body {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    max-height: none;
    padding: 24px;
  }
  .modal-popup.modal-md .popup-inner {
    width: 100%;
    height: 100%;
    border-radius: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .modal-popup.modal-md .popup-header,
  .modal-popup.modal-md .popup-footer {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
  }
  .modal-popup.modal-md .popup-body {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    max-height: none;
  }
  .modal-popup.modal-sm {
    padding: 24px;
  }
}

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

.table {
  border-top: 1px solid #E9EEF4;
  overflow: hidden;
}
.table table {
  width: calc(100% + 1px);
  margin-right: -1px;
  table-layout: fixed;
  border-collapse: separate;
  border-bottom: 1px solid #E9EEF4;
}
.table thead {
  word-break: keep-all;
}
.table thead ~ tbody,
.table thead ~ tfoot {
  text-align: center;
}
.table caption + tbody > tr:first-child > th,
.table caption + tbody > tr:first-child > td,
.table colgroup + tbody > tr:first-child > th,
.table colgroup + tbody > tr:first-child > td {
  border-top: 0;
}
.table th,
.table td {
  height: 50px;
  padding: 13px 20px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}
.table th {
  background-color: #F7F9FC;
  font-weight: bold;
}
.table thead {
  text-align: center;
}
.table thead tr:first-child th,
.table thead tr:first-child td {
  border-top: 0;
}
@media (max-width: 1024.98px) {
  .table th,
  .table td {
    height: 40px;
    padding: 7px 10px;
  }
}

@media (min-width: 1025px) {
  .table-row colgroup {
    display: none;
  }
  .table-row tbody th {
    width: 200px;
  }
}

.table-write th {
  text-align: left;
}
@media (min-width: 1025px) {
  .table-write th,
  .table-write td {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .table-write th {
    border-right: 0;
  }
}
@media (max-width: 1024.98px) {
  .table-write > table {
    width: 100%;
    margin-right: 0;
  }
  .table-write > table > colgroup,
  .table-write > table > thead {
    display: none;
  }
  .table-write > table > tbody,
  .table-write > table > tfoot {
    text-align: left !important;
  }
  .table-write > table > thead > tr,
  .table-write > table > tbody > tr {
    display: block;
  }
  .table-write > table > thead > tr:first-child > th,
  .table-write > table > tbody > tr:first-child > th {
    border: 0;
  }
  .table-write > table > thead > tr > th,
  .table-write > table > thead > tr > td,
  .table-write > table > tbody > tr > th,
  .table-write > table > tbody > tr > td {
    display: block;
    height: auto;
    border: 0;
  }
  .table-write > table > thead > tr > th,
  .table-write > table > tbody > tr > th {
    background-color: #fff;
    border-top: 1px solid #fff;
    padding: 12px 0 3px;
  }
  .table-write > table > thead > tr > td,
  .table-write > table > tbody > tr > td {
    padding: 3px 0 15px;
  }
  .table-write .form-control {
    width: 100%;
  }
}

.table-write-white,
.table-write-box {
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
}
.table-write-white table,
.table-write-box table {
  border: 0;
}
.table-write-white th,
.table-write-white td,
.table-write-box th,
.table-write-box td {
  border: 0;
  height: auto;
}
@media (min-width: 1025px) {
  .table-write-white,
  .table-write-box {
    padding: 20px 0;
  }
  .table-write-white table,
  .table-write-box table {
    width: 100%;
    margin-right: 0;
  }
  .table-write-white th,
  .table-write-box th {
    background-color: transparent;
  }
  .table-write-white th,
  .table-write-white td,
  .table-write-box th,
  .table-write-box td {
    padding: 10px 0;
  }
}
@media (max-width: 1024.98px) {
  .table-write-white,
  .table-write-box {
    padding-bottom: 20px;
  }
  .table-write-white th,
  .table-write-box th {
    padding: 20px 0 10px;
    line-height: 1;
  }
  .table-write-white td,
  .table-write-box td {
    padding: 0;
  }
}

@media (min-width: 1025px) {
  .table-write-box {
    border: 1px solid #e6e6e6;
    padding: 20px 30px;
  }
}

@media (max-width: 1024.98px) {
  .table-scroll {
    position: relative;
    overflow: hidden;
  }
  .table-scroll:before, .table-scroll:after {
    content: "";
    position: absolute;
    z-index: 10;
    top: 0;
    bottom: 0;
    width: 23px;
    top: 0;
    bottom: 0;
    -webkit-transition-duration: 0.1s;
            transition-duration: 0.1s;
  }
  .table-scroll:before {
    opacity: 0;
    visibility: hidden;
    left: -23px;
    -webkit-box-shadow: 5px 0 15px rgba(0, 0, 0, 0.25);
            box-shadow: 5px 0 15px rgba(0, 0, 0, 0.25);
  }
  .table-scroll:after {
    right: -23px;
    -webkit-box-shadow: -5px 0 15px rgba(0, 0, 0, 0.25);
            box-shadow: -5px 0 15px rgba(0, 0, 0, 0.25);
  }
  .table-scroll.scroll-ing:before {
    opacity: 1;
    visibility: visible;
  }
  .table-scroll.scroll-end:after {
    opacity: 0;
    visibility: hidden;
  }
  .table-scroll .scroll-container {
    margin-right: -1px;
    overflow-y: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-scroll .scroll-container table {
    position: relative;
  }
  .table-scroll .scroll-container table:after {
    position: absolute;
    width: 1px;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #fff;
    content: "";
  }
}
.table + .text-note {
  margin-top: 9px;
}
@media (max-width: 1024.98px) {
  .table + .text-note {
    margin-top: 13px;
  }
}

p.text-note {
  position: relative;
  color: #FF4D6D;
  font-size: 14px;
  padding-left: 1em;
}
p.text-note:before {
  position: absolute;
  content: "※";
  left: 0;
}

.pagination {
  clear: both;
  text-align: center;
  font-size: 0;
  margin: 40px -5px 0;
}
.pagination a {
  display: block;
  font-size: 16px;
  line-height: 22px;
  padding-top: 1px;
  border-bottom: 2px solid transparent;
}
.pagination li {
  display: inline-block;
  vertical-align: middle;
  min-width: 12px;
  margin: 0 5px;
}
.pagination li.disabled {
  display: none;
}
.pagination li.active a {
  color: #F54090;
  font-weight: bold;
  border-color: #F54090;
}
.pagination .pg-first,
.pagination .pg-last,
.pagination .pg-prev,
.pagination .pg-next {
  margin: 0 2.5px;
}
.pagination .pg-first a,
.pagination .pg-last a,
.pagination .pg-prev a,
.pagination .pg-next a {
  width: 29px;
  height: 29px;
  line-height: 27px;
  border-radius: 50%;
  padding: 0;
  border: 1px solid transparent;
}
.pagination .pg-first,
.pagination .pg-prev {
  -webkit-transform: scale(-1);
          transform: scale(-1);
}
.pagination .pg-prev {
  margin-right: 10px;
}
.pagination .pg-next {
  margin-left: 10px;
}
.pagination .pg-prev a,
.pagination .pg-next a {
  background: #F54090 url(../images/ico-paging-next@2x.png) no-repeat center center;
  background-size: 6px 10px;
}
.pagination .pg-first a,
.pagination .pg-last a {
  border-color: #dadada;
  background: #fff url(../images/ico-paging-last@2x.png) no-repeat center center;
  background-size: 11px 10px;
}
@media (max-width: 1024.98px) {
  .pagination {
    margin: 20px -3px 0;
  }
  .pagination li {
    margin: 0 3px;
  }
  .pagination .pg-prev {
    margin-right: 6px;
  }
  .pagination .pg-next {
    margin-left: 6px;
  }
}

.datepicker {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.datepicker .form-datepicker {
  padding-right: 45px;
}
.datepicker .btn {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 0 12px;
}
@media (max-width: 767.98px) {
  .datepicker {
    display: block;
  }
  .datepicker .form-datepicker {
    width: 100% !important;
  }
}

#inseq-datepicker {
  position: absolute;
  width: 276px;
  padding: 24px 16px 16px;
  font-size: 14px;
  background-color: #fff;
  -webkit-box-shadow: 0px 8px 15px rgba(66, 73, 80, 0.15);
          box-shadow: 0px 8px 15px rgba(66, 73, 80, 0.15);
  border-radius: 4px;
  z-index: 1000;
}
#inseq-datepicker:after {
  display: block;
  height: 16px;
}
#inseq-datepicker caption {
  height: 0;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
#inseq-datepicker table {
  table-layout: auto;
  margin-top: 0;
  width: 100%;
  text-align: center;
  border: 0px solid #0F172A;
  color: #0F172A;
}
#inseq-datepicker table th {
  height: auto;
  background: none;
  border: 0;
  margin: 0;
  padding: 0 0 8px;
  color: #0F172A;
  text-align: center;
  line-height: 16px;
  font-weight: 500;
}
#inseq-datepicker table td {
  margin: 0;
  height: auto;
  text-align: center;
  border: 0;
  line-height: 1;
}
#inseq-datepicker #tableCalendar,
#inseq-datepicker #tableYear,
#inseq-datepicker #tableMonth {
  text-align: center;
}
@media (min-width: 1025px) {
  #inseq-datepicker #tableCalendar a:hover,
  #inseq-datepicker #tableYear a:hover,
  #inseq-datepicker #tableMonth a:hover {
    color: #F54090;
    border-color: transparent;
    background-color: rgba(245, 64, 144, 0.2);
  }
}
#inseq-datepicker #tableCalendar table {
  width: 32px;
}
#inseq-datepicker #tableCalendar td {
  padding: 4px 0;
  height: 32px;
  color: #767676;
}
#inseq-datepicker #tableCalendar a {
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 50%;
  display: block;
  margin: auto;
  color: #0F172A;
  text-decoration: none;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transition-property: background-color;
  transition-property: background-color;
  will-change: background-color;
}
#inseq-datepicker #tableCalendar a.today {
  color: #fff !important;
  background-color: #F54090;
}
#inseq-datepicker #tableCalendarTitle,
#inseq-datepicker #tableYearTitle,
#inseq-datepicker #tableMonthTitle {
  height: 24px;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 16px;
}
#inseq-datepicker #tableCalendar th:first-child,
#inseq-datepicker #tableCalendar td:first-child {
  color: #FF4D6D;
}
#inseq-datepicker #tableCalendar th:first-child a,
#inseq-datepicker #tableCalendar td:first-child a {
  color: inherit;
}
#inseq-datepicker #tableCalendar th:last-child a,
#inseq-datepicker #tableCalendar td:last-child a {
  color: inherit;
}
#inseq-datepicker #tableYear,
#inseq-datepicker #tableMonth {
  margin-top: -6px;
}
#inseq-datepicker #tableYear td,
#inseq-datepicker #tableMonth td {
  padding: 6px 4px !important;
}
#inseq-datepicker #tableYear a,
#inseq-datepicker #tableMonth a {
  display: block;
  border: 1px solid #CAD1D8;
  line-height: 38px;
  border-radius: 4px;
}
#inseq-datepicker .prev,
#inseq-datepicker .next {
  display: block;
  width: 16px;
  height: 16px;
  line-height: 16px;
  border: 0;
  padding: 0;
  background: url(../images/ico-xs-chevron-left-lightgray@2x.png) no-repeat center center;
  background-size: 16px auto;
  text-indent: -9999px;
  text-align: left;
  overflow: hidden;
}
#inseq-datepicker .prev {
  float: left;
  margin-left: 40px;
  background-position: right center;
}
#inseq-datepicker .next {
  float: right;
  margin-right: 40px;
  background-image: url(../images/ico-xs-chevron-right-lightgray@2x.png);
  background-position: left center;
}
#inseq-datepicker .btn-cal-close {
  position: absolute;
  top: 0;
  right: 0;
}
#inseq-datepicker .btn-cal-close a {
  display: block;
  width: 40px;
  height: 40px;
  color: transparent;
  background: url(../images/ico-xs-close-lightgray@2x.png) no-repeat center center;
  background-size: 16px auto;
}

/**
 * /* 견적문의 레이어
 *
 * @format
 */
.form-container-contact .skill-options {
  border-bottom: 1px solid #E9EEF4;
  padding-bottom: 26px;
  margin-bottom: 12px;
}
.form-container-contact .label {
  display: block;
  font-size: 14px;
  line-height: 16px;
  margin-top: 24px;
  margin-bottom: 8px;
  color: #374151;
}
@media (max-width: 1024.98px) {
  .form-container-contact textarea {
    height: 144px;
  }
}

.contact-title {
  width: 100%;
  text-align: center;
  font-weight: normal;
  font-size: 11px;
  color: #374151;
}

.form-colgroup {
  margin: 0 -4px;
}
.form-colgroup .col {
  display: block;
  margin: 0 4px;
}
.form-colgroup .datepicker {
  width: 100%;
}
@media (min-width: 1025px) {
  .form-colgroup {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
  .form-colgroup .col {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    width: calc(50% - 8px);
  }
}

@media (max-width: 1024.98px) {
  #layer-contact .popup-footer .btn-lg {
    padding: 0 32px;
  }
}

.necessary {
  display: inline-block;
  width: 5px;
  height: 5px;
  overflow: hidden;
  -webkit-transform: translate(3px, -8px);
          transform: translate(3px, -8px);
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: #ff4d6d;
  color: #ff4d6d;
}

.form-colgroup.align-top {
  position: relative;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  min-height: 82px;
  margin-bottom: 10px;
}
@media (max-width: 1024.98px) {
  .form-colgroup.align-top .col {
    margin-bottom: 10px;
    min-height: 82px;
  }
}
.form-colgroup.align-mid {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-bottom: 10px;
}
@media (min-width: 1025px) {
  .form-colgroup.align-mid .col {
    min-height: 82px;
  }
  .form-colgroup.align-mid .col + .col {
    padding-top: 24px;
  }
  .form-colgroup.align-mid .col.check-invaild + .col .info-text {
    display: block;
    position: absolute;
    left: 25px;
  }
  .form-colgroup.align-mid .col.check-invaild + .col .form-control {
    border: 1px solid #ff4d6d;
  }
}
@media (max-width: 1024.98px) {
  .form-colgroup.align-mid {
    height: 132px;
  }
  .form-colgroup.align-mid .col {
    min-height: auto;
  }
  .form-colgroup.align-mid .col + .col {
    padding-top: 0;
  }
  .form-colgroup.align-mid .col.check-invaild + .col .info-text {
    display: block;
  }
  .form-colgroup.align-mid .col.check-invaild + .col .form-control {
    border: 1px solid #ff4d6d;
  }
}
.form-colgroup.align-top-type2 {
  position: relative;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  height: 154px;
  margin-bottom: 10px;
}
@media (max-width: 1024.98px) {
  .form-colgroup.align-top-type2 {
    height: 185px;
  }
}
.form-colgroup > div .label {
  margin-top: 0;
}
.form-colgroup > div .form-control {
  padding: 7px 40px 7px 16px;
}
.form-colgroup > div textarea.form-control {
  padding-right: 16px;
}
.form-colgroup > div textarea.form-control::-webkit-input-placeholder {
  word-break: break-all;
  letter-spacing: -0.6px;
}
.form-colgroup > div textarea.form-control::-moz-placeholder {
  word-break: break-all;
  letter-spacing: -0.6px;
}
.form-colgroup > div textarea.form-control:-ms-input-placeholder {
  word-break: break-all;
  letter-spacing: -0.6px;
}
.form-colgroup > div textarea.form-control::-ms-input-placeholder {
  word-break: break-all;
  letter-spacing: -0.6px;
}
.form-colgroup > div textarea.form-control::placeholder {
  word-break: break-all;
  letter-spacing: -0.6px;
}
.form-colgroup > div.check-good {
  position: relative;
}
.form-colgroup > div.check-good::before {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 12px;
  z-index: 200;
  width: 16px;
  height: 16px;
  background: url(../images/ico-check-green-md.png) 0 0 no-repeat;
  background-size: 100%;
}
@media (max-width: 1024.98px) {
  .form-colgroup > div.check-good::before {
    bottom: 30px;
  }
}
.form-colgroup > div.check-invaild .form-control {
  border: 1px solid #ff4d6d;
}
.form-colgroup > div.check-invaild .info-text {
  display: block;
}
.form-colgroup > div.check-bul-invaild {
  position: relative;
}
.form-colgroup > div.check-bul-invaild .form-control {
  border: 1px solid #ff4d6d;
  padding: 7px 40px 7px 16px;
}
.form-colgroup > div.check-bul-invaild::before {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 30px;
  z-index: 200;
  width: 16px;
  height: 16px;
  background: url(../images/ico-error-red-md.png) 0 0 no-repeat;
  background-size: 100%;
}
.form-colgroup > div.check-bul-invaild .info-text {
  display: block;
}
.form-colgroup > div .info-text {
  display: none;
  margin-top: 6px;
  color: #ff4d6d;
  font-weight: 400;
  font-size: 12px;
  line-height: 12px;
}

@media (max-width: 1024.98px) {
  .modal-open .wrapper-main-2023.scroll-fixed {
    position: fixed;
    overflow: hidden;
    -ms-touch-action: none;
        touch-action: none;
    -webkit-overflow-scrolling: none;
    -ms-scroll-chaining: none;
        overscroll-behavior: none;
  }
}
/* 포트폴리오 항목 */
.portfolio-item {
  position: relative;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}
.portfolio-item .link-detail {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.portfolio-item .period,
.portfolio-item .subject,
.portfolio-item .hash-tag-list {
  position: relative;
  z-index: 200;
}
.portfolio-item .period {
  color: #fff;
  margin: 8px 0;
  font-size: 11px;
  font-weight: normal;
  opacity: 0.8;
}
.portfolio-item .period:first-child {
  margin-top: 0;
}
.portfolio-item .subject {
  position: relative;
  z-index: 10;
  color: #fff;
  font-weight: bold;
  font-size: 25px;
  line-height: 32px;
}
.portfolio-item .subject br {
  display: none;
}
.portfolio-item .thumb {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  overflow: hidden;
  -webkit-box-shadow: 0px 8px 15px rgba(66, 73, 80, 0.15);
          box-shadow: 0px 8px 15px rgba(66, 73, 80, 0.15);
}
.portfolio-item .thumb:before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 12px;
  opacity: 1;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.portfolio-item .thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  vertical-align: top;
  border-radius: 12px;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.portfolio-item .hash-tag-list {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  -ms-flex-wrap: wrap-reverse;
      flex-wrap: wrap-reverse;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: reverse;
          flex-direction: reverse;
  padding: 24px;
}
@media (min-width: 1025px) {
  .portfolio-item {
    width: 292px !important;
    height: 384px;
  }
  .portfolio-item .link-detail {
    padding: 24px;
  }
  .portfolio-item .link-detail:focus .thumb {
    -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
            box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
  }
  .portfolio-item .link-detail:focus .thumb:before, .portfolio-item:hover .thumb:before {
    opacity: 0.5;
  }
  .portfolio-item .link-detail:focus img, .portfolio-item:hover img {
    -webkit-filter: blur(0);
            filter: blur(0);
  }
}
@media (max-width: 1024.98px) {
  .portfolio-item {
    width: calc(50% - 36px) !important;
    height: 224px;
  }
  .portfolio-item .link-detail,
  .portfolio-item .hash-tag-list {
    padding: 16px;
  }
  .portfolio-slider .portfolio-item {
    width: 200px !important;
    height: 264px;
  }
  .portfolio-slider .portfolio-item .link-detail {
    padding: 24px 16px 16px;
  }
  .portfolio-slider .portfolio-item .subject {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
  }
}
@media (max-width: 767.98px) {
  .portfolio-item {
    width: calc(100% - 48px) !important;
  }
}

/* 포트폴리오 목록 컨테이너 */
.portfolio-list {
  margin: -24px !important;
  width: calc(100% + 48px) !important;
}
.portfolio-list:not(.portfolio-filter) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: -12px;
}
.portfolio-list:not(.portfolio-filter) .portfolio-item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin: 12px;
}

/* 포트폴리오 슬라이더 컨테이너 */
.portfolio-slider {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 -12px;
  overflow: hidden;
}
.portfolio-slider:before, .portfolio-slider:after {
  content: "";
  position: absolute;
  z-index: 10;
  top: 0;
  bottom: 0;
}
.portfolio-slider:before {
  left: 0;
  background: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.5)));
  background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%);
}
.portfolio-slider:after {
  right: 0;
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.5)));
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%);
}
.portfolio-slider .portfolio-item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin: 0 12px;
}
.portfolio-slider.slick-slider {
  display: block !important;
}
.portfolio-slider .slick-arrow {
  position: absolute;
  z-index: 11;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  top: 50%;
  margin-top: -24px;
  text-indent: -9999px;
  overflow: hidden;
  border: 1px solid #CAD1D8;
  background: #fff url(../images/ico-md-chevron-left-gray@2x.png) no-repeat center center;
  background-size: 32px auto;
}
.portfolio-slider .slick-prev {
  left: 8%;
}
.portfolio-slider .slick-next {
  right: 8%;
  background-image: url(../images/ico-md-chevron-right-gray@2x.png);
}
.portfolio-slider .partners-slider .slick-arrow {
  position: absolute;
  z-index: 11;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  top: 50%;
  margin-top: -24px;
  text-indent: -9999px;
  overflow: hidden;
  border: 1px solid #CAD1D8;
  background: #fff url(../images/ico-md-chevron-left-gray@2x.png) no-repeat center center;
  background-size: 32px auto;
}
@media (min-width: 1025px) {
  .portfolio-slider {
    padding: 48px 0;
  }
  .portfolio-slider:before, .portfolio-slider:after {
    width: 327px;
  }
}
@media (max-width: 1024.98px) {
  .portfolio-slider {
    padding: 32px 0 0;
  }
  .portfolio-slider:before, .portfolio-slider:after {
    width: 80px;
  }
  .portfolio-slider .slick-prev {
    left: 64px;
  }
  .portfolio-slider .slick-next {
    right: 64px;
  }
}

/* 견적상담 */
.consult-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  color: #fff;
}
.consult-area .info-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 52px;
  width: 100%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.consult-area .top-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
}
.consult-area .list-check {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 8px;
}
.consult-area .list-check li {
  position: relative;
  min-height: 32px;
  padding-left: 40px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.24px;
  color: #d1d5db;
}
.consult-area .list-check li::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url(../images/ico-check@2x.png);
  background-position: center center;
  background-size: 32px auto;
}
.consult-area .list-check li span {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 32px;
}
.consult-area .list-check li p {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.14px;
  color: #7e8594;
}
.consult-area .list-dot {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 12px;
}
.consult-area .list-dot li {
  padding-left: 12px;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.14px;
  color: #e5e7eb;
}
.consult-area .list-dot li:before {
  top: 7px;
  background-color: #e5e7eb;
}
.consult-area .list-dot li p {
  margin-top: 2px;
  font-size: 14px;
  color: #a6adb9;
}
.consult-area .guide-area {
  display: none;
  width: 100%;
  height: 100%;
  padding: 24px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 10px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
}
.consult-area .guide-area.show {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.consult-area .guide-title {
  line-height: 1.3;
  color: #fff;
  display: block;
  margin-bottom: 16px;
}
.consult-area .form-area {
  width: 100%;
}
.consult-area .form-container-consult input {
  height: 48px;
  padding: 13.5px 20px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff;
}
.consult-area .form-container-consult input:focus {
  border: 1px solid #F54090;
}
.consult-area .form-container-consult textarea {
  position: relative;
  height: auto;
  min-height: 120px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.15) url(../images/img-textarea@2x.png) no-repeat;
  background-size: 5.5px 5.5px;
  background-position: right 6px bottom 6px;
  border-radius: 8px;
  color: #fff;
}
.consult-area .form-container-consult textarea::-webkit-scrollbar {
  width: 15px;
  height: 15px;
  background-color: transparent;
}
.consult-area .form-container-consult textarea::-webkit-scrollbar-thumb {
  background-color: rgba(164, 172, 183, 0.5);
  border-radius: 7.5px;
  background-clip: padding-box;
  border: 5px solid transparent;
}
.consult-area .form-container-consult textarea::-webkit-scrollbar-thumb:hover {
  background-color: rgba(150, 159, 172, 0.5);
}
.consult-area .form-container-consult textarea::-webkit-scrollbar-thumb:active {
  background-color: rgba(136, 146, 160, 0.5);
}
.consult-area .form-container-consult textarea::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.4);
}
.consult-area .form-container-consult textarea::-webkit-scrollbar-corner {
  background-color: rgba(255, 255, 255, 0.4);
}
.consult-area .form-container-consult textarea::-webkit-scrollbar-track {
  background-color: transparent;
}
.consult-area .form-container-consult textarea:focus {
  border: 1px solid #F54090;
}
.consult-area .form-container-consult .form-control::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
  font-size: 16px;
}
.consult-area .form-container-consult .form-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 32px;
}
.consult-area .form-container-consult .form-control.invalid {
  border: 1px solid #ef4444;
}
.consult-area .form-container-consult .form-check.agree.invalid + label::before {
  border: 1px solid #ef4444;
}
.consult-area .form-container-consult .label {
  font-weight: 500;
  line-height: 1.3;
}
.consult-area .form-container-consult .necessary {
  -webkit-transform: translate(4px, -11px);
          transform: translate(4px, -11px);
  background: #ef4444;
}
.consult-area .form-container-consult .col {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
  width: 100%;
}
.consult-area .form-container-consult .colgroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 20px;
}
.consult-area .form-container-consult .colgroup .row {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
  width: 50%;
}
.consult-area .form-container-consult .colgroup .info-text.text-guide-tooltip {
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.consult-area .form-container-consult .info-text {
  display: none;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  color: #fff;
  letter-spacing: -0.14px;
}
.consult-area .form-container-consult .info-text.text-guide-tooltip {
  position: absolute;
  top: -54px;
  padding: 12px;
  z-index: 10;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  min-width: 160px;
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
  background: #3d3d3d;
  border-radius: 10px;
}
.consult-area .form-container-consult .info-text.text-guide-tooltip.text-invalid:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 16px;
  height: 8px;
  z-index: 0;
  background: url(../images/img-guide-tooltip-arrow@2x.png) no-repeat;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.consult-area .form-container-consult .info-text.text-invalid {
  color: #fff !important;
}
.consult-area .form-container-consult .info-text.text-invalid :before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-top: -2px;
  margin-right: 4px;
  width: 16px;
  height: 16px;
  background: url(../images/ico-exclamationtriangle-md@2x.png) no-repeat;
  background-size: cover;
}
.consult-area .form-container-consult .guide-area {
  width: 100%;
  display: none;
}
.consult-area .form-container-consult .solutions-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 13px 8px;
}
.consult-area .form-container-consult .solutions-group span {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  width: calc(33.3% - 8px);
}
.consult-area .form-container-consult .solutions-group span strong {
  font-size: 16px;
  display: block;
  margin-bottom: 2px;
  font-weight: 500;
}
.consult-area .form-container-consult .solutions-group .form-check + label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 48px;
  padding: 0px 10px 1px 11px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.15);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.24px;
  color: rgba(255, 255, 255, 0.5);
  word-break: keep-all;
}
.consult-area .form-container-consult .solutions-group .form-check + label::before {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 16px;
          flex: 0 0 16px;
  margin: 0;
  background-color: transparent;
  background-image: url(../images/ico-check-sm@2x.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 16px auto;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
}
.consult-area .form-container-consult .solutions-group .form-check:checked + label {
  border: 1px solid #F54090;
  color: #fff;
}
.consult-area .form-container-consult .solutions-group .form-check:checked + label::before {
  background-color: #F54090;
  background-image: url(../images/ico-check-checked-sm@2x.png);
  border-color: #F54090;
}
.consult-area .form-container-consult .solutions-group .form-check:focus + label {
  border: 1px solid #F54090;
  color: #fff;
}
.consult-area .form-container-consult .solutions-group.col {
  gap: 8px 8px;
}
.consult-area .form-container-consult .solutions-group.col span {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  width: 100%;
}
.consult-area .form-container-consult .solutions-group.col .form-check:checked + label .sub-text {
  color: #A4ACB7;
}
.consult-area .form-container-consult .solutions-group.col .form-check + label {
  height: 68px;
}
.consult-area .form-container-consult .solutions-group.col .sub-text {
  display: block;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.3);
}
@media (max-width: 1024.98px) {
  .consult-area .form-container-consult .solutions-group.col .form-check + label {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    height: 65px;
    padding-top: 10px;
  }
  .consult-area .form-container-consult .solutions-group.col .form-check + label strong {
    padding-left: 25px;
  }
  .consult-area .form-container-consult .solutions-group.col .form-check + label .sub-text {
    font-size: 14px;
    padding-left: 24px;
  }
  .consult-area .form-container-consult .solutions-group.col .form-check + label::before {
    position: absolute;
    top: 24px;
    left: 12px;
  }
}
.consult-area .form-container-consult .agree + label {
  height: auto;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.24px;
  color: #fff;
  font-size: 16px;
}
.consult-area .form-container-consult .agree + label::before {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.consult-area .form-container-consult .agree:checked + label::before {
  border: 1px solid #F54090;
  background-color: #F54090;
  background-size: 12px auto;
}
.consult-area .form-container-consult .agree:focus + label::before {
  border: 1px solid #F54090;
}
.consult-area .form-container-consult .ring {
  --uib-size: 16px;
  --uib-speed: 2s;
  --uib-color: #fff;
  width: var(--uib-size);
  height: var(--uib-size);
  margin-left: 4px;
  vertical-align: middle;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-animation: rotate var(--uib-speed) linear infinite;
          animation: rotate var(--uib-speed) linear infinite;
}
.consult-area .form-container-consult .ring circle {
  fill: none;
  stroke: var(--uib-color);
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: stretch calc(var(--uib-speed) * 0.75) ease-in-out infinite;
          animation: stretch calc(var(--uib-speed) * 0.75) ease-in-out infinite;
}
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes stretch {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dashoffset: -124px;
  }
}
@keyframes stretch {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dashoffset: -124px;
  }
}
.consult-area .form-container-consult .btn-primary {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.consult-area .form-container-consult .btn-primary:disabled {
  opacity: 1 !important;
}
@media (min-width: 1025px) {
  .consult-area .title {
    font-size: 36px;
    line-height: 1.2;
    letter-spacing: -0.72px;
  }
  .consult-area .desc {
    font-weight: 700;
    font-size: 24px;
  }
  .consult-area.show .info-area .guide-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .consult-area.show .form-container-consult .guide-area {
    display: none;
  }
}
@media (max-width: 1024.98px) {
  .consult-area {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 40px;
  }
  .consult-area .title {
    font-size: 24px;
    line-height: 1.4;
  }
  .consult-area .desc {
    font-weight: 700;
    font-size: 18px;
  }
  .consult-area .top-info {
    gap: 12px;
  }
  .consult-area .bot-info {
    margin-top: 24px;
  }
  .consult-area .list-check li {
    min-height: 18px;
    padding-left: 20px;
    font-size: 14px;
  }
  .consult-area .list-check li::before {
    top: 1px;
    width: 16px;
    height: 16px;
    background-size: 16px auto;
  }
  .consult-area .list-check li span {
    min-height: 18px;
  }
  .consult-area .list-check li p {
    margin-top: 2px;
    font-size: 12px;
  }
  .consult-area.show .info-area .guide-area {
    display: none;
  }
  .consult-area.show .form-container-consult .guide-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .consult-area .info-area {
    gap: 0;
  }
  .consult-area .form-container-consult .guide-area {
    margin-top: 5px;
  }
  .consult-area .form-container-consult .form-area {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    width: 100%;
    max-width: 640px;
  }
  .consult-area .form-container-consult .solutions-group span {
    width: calc(50% - 8px);
  }
  .consult-area .form-container-consult .solutions-group .form-check + label {
    padding-right: 11px;
    padding-top: 3px;
  }
  .consult-area .form-container-consult .md-col {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 32px;
  }
  .consult-area .form-container-consult .md-col .row {
    width: 100%;
  }
  .consult-area .form-container-consult .agree + label {
    font-size: 14px;
  }
  .consult-area .form-container-consult .btn {
    margin-top: -10px;
  }
}

.section-consult {
  padding-top: 100px;
  padding-bottom: 100px;
  background: #000;
}
@media (min-width: 1025px) {
  .section-consult .consult-area {
    gap: 32px;
  }
  .section-consult .info-area {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    max-width: 437px;
  }
  .section-consult .form-area {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    width: calc(100% - 437px);
    max-width: 640px;
  }
}
@media (max-width: 1024.98px) {
  .section-consult {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.modal-consult .popup-inner {
  background: #000;
}
.modal-consult .popup-body::-webkit-scrollbar-track {
  background-color: transparent;
}
.modal-consult .consult-area .desc {
  font-size: 18px;
}
.modal-consult .consult-area .info-area {
  gap: 44px;
}
.modal-consult .consult-area .form-container-consult .solutions-group .form-check + label {
  word-break: keep-all;
}
.modal-consult .consult-area .form-container-consult .btn-primary {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.modal-consult .consult-area .form-container-consult .btn-primary:disabled {
  opacity: 1 !important;
}
.modal-consult .md-none {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 32px;
  width: 100%;
}
.modal-consult .agree + label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.modal-consult .agree + label .link {
  margin-left: 3px;
}
@media (min-width: 1025px) {
  .modal-consult.modal-lg .popup-body {
    padding: 60px 40px 53px;
  }
  .modal-consult.modal-lg .popup-footer {
    display: none;
  }
  .modal-consult .consult-area {
    gap: 40px;
  }
  .modal-consult .consult-area .title {
    font-size: 28px;
  }
  .modal-consult .consult-area .info-area {
    max-width: 367px;
  }
  .modal-consult .consult-area .guide-area {
    padding: 20px;
  }
  .modal-consult .btn-close-popup {
    top: 13px;
  }
}
@media (max-width: 1024.98px) {
  .modal-consult.modal-lg .popup-inner {
    padding-top: 48px;
  }
  .modal-consult.modal-lg .popup-body {
    padding: 0 24px 32px;
  }
  .modal-consult.modal-lg .popup-footer {
    padding: 24px 0 32px;
    border-color: rgba(255, 255, 255, 0.4);
  }
  .modal-consult.modal-lg .popup-footer .agree.invalid + label::before {
    border: 1px solid #ef4444;
  }
  .modal-consult .consult-area .title {
    font-size: 22px;
  }
  .modal-consult .consult-area .info-area {
    gap: 0;
  }
  .modal-consult .md-none {
    display: none;
  }
  .modal-consult .btn-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 24px;
    width: 100%;
  }
  .modal-consult .btn-group .col {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
  }
  .modal-consult .btn-group .agree + label {
    height: auto;
    font-size: 14px;
    color: #fff;
  }
  .modal-consult .btn-group .agree + label::before {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
  }
  .modal-consult .btn-group .agree:checked + label::before {
    border: 1px solid #F54090;
    background-color: #F54090;
    background-size: 12px auto;
  }
  .modal-consult .btn-group .agree:focus + label::before {
    border: 1px solid #F54090;
  }
  .modal-consult .btn-close-popup {
    right: 8px;
    top: 8px;
  }
}
.modal-consult .ring {
  --uib-size: 16px;
  --uib-speed: 2s;
  --uib-color: #fff;
  width: var(--uib-size);
  height: var(--uib-size);
  margin-left: 4px;
  vertical-align: middle;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-animation: rotate var(--uib-speed) linear infinite;
          animation: rotate var(--uib-speed) linear infinite;
}
.modal-consult .ring circle {
  fill: none;
  stroke: var(--uib-color);
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: stretch calc(var(--uib-speed) * 0.75) ease-in-out infinite;
          animation: stretch calc(var(--uib-speed) * 0.75) ease-in-out infinite;
}
@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes stretch {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dashoffset: -124px;
  }
}

.modal-popup.modal-consult-complete .popup-header {
  padding-bottom: 6px;
  text-align: center;
}
.modal-popup.modal-consult-complete .icon {
  width: 64px;
  height: 64px;
  margin-bottom: 4px;
}
.modal-popup.modal-consult-complete .popup-body p {
  line-height: 1.4;
}

.consult-sm .info-area .list-dot li p {
  font-size: 12px;
}
.consult-sm .form-container-consult input {
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
}
.consult-sm .form-container-consult textarea {
  padding: 16px;
  font-size: 14px;
}
.consult-sm .form-container-consult textarea::-webkit-input-placeholder {
  font-size: 14px;
}
.consult-sm .form-container-consult textarea::-moz-placeholder {
  font-size: 14px;
}
.consult-sm .form-container-consult textarea:-ms-input-placeholder {
  font-size: 14px;
}
.consult-sm .form-container-consult textarea::-ms-input-placeholder {
  font-size: 14px;
}
.consult-sm .form-container-consult textarea::placeholder {
  font-size: 14px;
}
.consult-sm .form-container-consult .form-control::-webkit-input-placeholder {
  font-size: 14px;
}
.consult-sm .form-container-consult .form-group {
  gap: 24px;
}
.consult-sm .form-container-consult .label {
  font-size: 14px;
}
.consult-sm .form-container-consult .solutions-group span strong {
  font-size: 14px;
}
.consult-sm .form-container-consult .solutions-group .form-check + label {
  font-size: 14px;
  height: 40px;
  padding: 12px;
}
.consult-sm .form-container-consult .solutions-group.col .form-check + label {
  height: 62px;
  font-size: 14px;
}
.consult-sm .form-container-consult .solutions-group.col .sub-text {
  font-size: 14px;
}
.consult-sm .form-container-consult .agree + label {
  font-size: 14px;
}
@media (max-width: 1024.98px) {
  .consult-sm .form-container-consult .solutions-group .form-check + label {
    font-size: 16px;
    height: 40px;
  }
}

.modal-consult .consult-sm .form-container-consult .solutions-group .form-check + label {
  font-size: 14px;
}
.modal-consult .md-none {
  gap: 24px;
}
.modal-consult .agree + label .link {
  font-size: 14px;
}

#skip li {
  list-style: none;
}
#skip a {
  display: block;
  position: absolute;
  top: 0;
  margin-bottom: -1px;
  width: 100%;
  height: 1px;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
  overflow: hidden;
  z-index: 600;
}
#skip a:focus, #skip a:active {
  height: 45px;
  line-height: 45px;
  color: #fff;
  background: #666;
}

.wrapper {
  overflow: hidden;
  min-height: 100vh;
}

@media (max-width: 1024.98px) {
  .allmenu-open {
    position: fixed;
    left: 0;
    right: 0;
    height: 100%;
    overflow: hidden;
  }
  .allmenu-open body {
    height: 100%;
  }
}

#header {
  z-index: 1000;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}
#header .container, #header .sticky-container {
  position: relative;
  max-width: 1200px;
  height: 64px;
  padding: 0px 14px 0 0;
}
@media (min-width: 1320px) {
  #header .container .gnb-list, #header .sticky-container .gnb-list {
    gap: 17px;
    left: 148px;
  }
  #header .container .btn-group, #header .sticky-container .btn-group {
    right: 0px;
  }
}
@media (max-width: 1320px) and (min-width: 1025px) {
  #header .container, #header .sticky-container {
    padding: 0 36px;
  }
  #header .container .gnb-list, #header .sticky-container .gnb-list {
    left: 160px;
  }
}
#header #logo {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 20px;
  line-height: 1;
}
#header #logo a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#header #logo img {
  vertical-align: top;
  height: 22px;
}
#header .btn-pms {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 4px;
  padding: 0 10px;
  border: 1px solid #171f30;
  border-radius: 8px;
  height: 44px;
  vertical-align: middle;
}
#header .btn-pms span {
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  display: block;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
#header .btn-pms .ico-xs-newwindow-gray800 {
  background-size: cover;
}
#header .btn-pms:hover {
  background-color: #f3f4f6;
  border-color: #000;
}
#header .btn-pms:hover .ico-xs-newwindow-gray800 {
  background-image: url(../images/ico-xs-newwindow-black@2x.png);
}
#header .btn-pms:hover span {
  color: #000;
}
@media (min-width: 1025px) {
  #header + #sidebar, #header + .section-cms-build, #header + #content {
    margin-top: 64px;
  }
  #header .btn-allmenu-open,
  #header .btn-allmenu-close {
    display: none;
  }
  #header .gnb-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
    height: 100%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: absolute;
    left: 148px;
    font-weight: 700;
    font-size: 16px;
  }
  #header .gnb-list > li {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-top: 1px;
  }
  #header .gnb-list > li > a {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
    padding: 10px 16px;
    font-weight: 700;
    border-radius: 8px;
    height: 100%;
    max-height: 44px;
    line-height: 1;
  }
  #header .gnb-list > li > a:hover {
    color: #F54090;
  }
  #header .gnb-list > li > a .badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 20px);
    font-size: 8px;
    line-height: 11.6px;
    color: #F54090;
    font-style: normal;
    font-weight: 700;
  }
  #header .gnb-list > li.on > a {
    color: #F54090;
  }
  #header .gnb-list > li.on ul .on > a {
    background-color: #f3f4f6;
    border-radius: 12px;
  }
  #header .gnb-list > li.on ul .on > a .solution-text {
    color: #000;
    font-size: 14px;
  }
  #header .gnb-list > li.on ul .on > a:hover {
    background-color: #fff3f8;
  }
  #header .gnb-list > li.on ul .on > a:hover .solution-text {
    color: #000;
  }
  #header .gnb-list > li.on ul .on > a .ico-wrap {
    background-color: #fff;
  }
  #header .gnb-list > li.hover > a {
    color: #000;
    background-color: #f3f4f6;
  }
  #header .gnb-list > li.hover > a:hover {
    color: #000;
  }
  #header .gnb-list > li.hover ul {
    opacity: 1;
    visibility: visible;
  }
  #header .gnb-list > li.on.hover > a {
    color: #F54090;
  }
  #header .gnb-list > li ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    opacity: 0;
    visibility: hidden;
    -webkit-transition-duration: 0.2s;
            transition-duration: 0.2s;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    position: absolute;
    top: 63px;
    width: 192px;
    padding: 16px;
    background: #fff;
    -webkit-box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    border-radius: 20px;
    font-size: 14px;
    line-height: 16px;
    -webkit-transform: translateX(-16px);
            transform: translateX(-16px);
  }
  #header .gnb-list > li ul a {
    display: block;
    padding: 16px;
    font-weight: 500;
  }
  #header .gnb-list > li ul a:focus, #header .gnb-list > li ul a:hover {
    border-radius: 12px;
    background: #fff3f8;
    color: #000;
  }
  #header .gnb-list .solution-list {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 20px;
    width: auto;
    padding: 20px;
    -webkit-transform: translateX(-214px);
            transform: translateX(-214px);
  }
  #header .gnb-list .solution-list li {
    width: 240px;
  }
  #header .gnb-list .solution-list li.on a:hover {
    color: #F54090;
  }
  #header .gnb-list .solution-list dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4px;
  }
  #header .gnb-list .solution-list dt {
    padding: 0 12px;
    color: #4b5563;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.14px;
    margin-bottom: 2px;
  }
  #header .gnb-list .solution-list dd ul {
    position: relative;
    top: auto;
    gap: 0;
    width: 100%;
    border: none;
    -webkit-box-shadow: none;
            box-shadow: none;
    padding: 0;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  #header .gnb-list .solution-list dd a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 240px;
    height: 72px;
    padding: 12px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12px;
    border-radius: 12px;
    font-weight: 700;
    color: #1f2937;
  }
  #header .gnb-list .solution-list dd a.menu-wrap .solution-text {
    display: block;
    position: relative;
  }
  #header .gnb-list .solution-list dd a.menu-wrap .solution-text:hover {
    color: #000;
  }
  #header .gnb-list .solution-list dd a.menu-wrap .solution-text .ico-new, #header .gnb-list .solution-list dd a.menu-wrap .solution-text .ico-beta, #header .gnb-list .solution-list dd a.menu-wrap .solution-text .ico-label-gs, #header .gnb-list .solution-list dd a.menu-wrap .solution-text .ico-xs-newwindow-gray {
    margin-top: -3px;
  }
  #header .gnb-list .solution-list dd a.menu-wrap .solution-text strong {
    font-weight: 700;
    display: inline-block;
    line-height: 1rem;
  }
  #header .gnb-list .solution-list dd a.menu-wrap .solution-text p {
    display: block;
    width: 141px;
    margin-top: 2px;
  }
  #header .gnb-list .solution-list dd a.menu-wrap .solution-text.new-window {
    font-weight: bold;
    position: relative;
  }
  #header .gnb-list .solution-list dd a.menu-wrap .solution-text.new-window .gnb-badge-gray {
    position: absolute;
    top: -2px;
    left: 44px;
    font-size: 10px;
    font-weight: 400;
    background: #e5e7eb;
    padding: 4px;
    color: #374151;
    border-radius: 103.125px;
    letter-spacing: -0.2px;
    height: 14px;
    width: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: absolute;
    top: 2px;
    right: 6px;
  }
  #header .gnb-list .solution-list dd a.menu-wrap .solution-text p {
    font-size: 12px;
    line-height: 130%;
    font-weight: 400;
    color: #4b5563;
  }
  #header .gnb-list .solution-list dd a:hover {
    background-color: #fff3f8;
  }
  #header .gnb-list .solution-list dd a:hover .solution-text {
    color: #1f2937;
  }
  #header .gnb-list .solution-list dd a:hover .solution-text:hover {
    color: #000;
  }
  #header .gnb-list .solution-list dd a:hover .ico-wrap {
    background-color: #fff;
  }
  #header .gnb-list .solution-list .ico-wrap {
    display: inline-block;
    padding: 6px;
    background-color: #f3f4f6;
    border-radius: 10px;
  }
  #header .btn-consultation {
    position: absolute;
    top: 23px;
    right: 64px;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 44px;
    padding: 11.5px 12px 11.5px 24px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 6px;
    border-radius: 8px;
    background: #000;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
  }
  #header .btn-consultation span {
    line-height: 1;
  }
  #header .btn-consultation::after {
    position: absolute;
    top: 23px;
    left: 12px;
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #38d099;
    border-radius: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  #header .btn-consultation:hover {
    background: #1f2937;
    color: #fff;
  }
  #header .btn-group {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
    top: 10px;
    right: 36px;
  }
  #header .btn-group .btn-pms {
    padding: 0 12px;
    height: 44px;
  }
  #header .btn-group .btn-consultation {
    position: relative;
    right: auto;
  }
}
@media (max-width: 1024.98px) {
  #header + #sidebar, #header + .section-cms-build, #header + #content {
    margin-top: 57px;
  }
  #header .container, #header .sticky-container {
    height: 56px;
    padding: 0 12px 0 24px;
    border-bottom: 1px solid #f3f4f6;
  }
  .fixed-header #header .container, .fixed-header #header .sticky-container {
    border-bottom: none;
  }
  #header #logo {
    font-size: 16px;
    margin-left: 0;
  }
  #header #logo img {
    height: 18px;
  }
  #header .btn-allmenu-open,
  #header .btn-allmenu-close {
    position: absolute;
    height: 100%;
    width: 48px;
    height: 48px;
    right: 10px;
    background-color: #fff;
  }
  #header .btn-allmenu-open {
    top: 50%;
    margin-top: -24px;
  }
  #header .btn-allmenu-close {
    top: -142.5px;
  }
  #header #allmenu {
    position: fixed;
    z-index: 1000;
    top: 147px;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    overflow-y: auto;
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
  }
  .allmenu-open #header #allmenu {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    overflow: visible;
  }
  #header #gnb {
    height: 100%;
  }
  #header .gnb-list {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    height: calc(100% - 160px);
    overflow-y: auto;
  }
  #header .gnb-list a {
    position: relative;
    display: block;
    padding: 16px 32px;
  }
  #header .gnb-list > li {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    border-bottom: 1px solid #E9EEF4;
  }
  #header .gnb-list > li > a:hover {
    color: #F54090;
  }
  #header .gnb-list > li.collapse.active {
    color: #F54090;
  }
  #header .gnb-list > li.collapse > a {
    position: relative;
  }
  #header .gnb-list > li.collapse > a:after {
    content: "";
    position: absolute;
    top: calc(50% - 8px);
    right: 32px;
    width: 16px;
    height: 16px;
    background: url(../images/ico-xs-chevron-down-gray@2x.png);
    background-size: cover;
    -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
  }
  #header .gnb-list > li.collapse.on > a {
    color: #F54090;
  }
  #header .gnb-list > li.collapse.on > a:after {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  #header .gnb-list > li.collapse.on > ul:not(.solution-list) a {
    border-radius: 0;
  }
  #header .gnb-list > li.collapse.on ul {
    display: block;
  }
  #header .gnb-list > li.collapse.on ul a {
    padding: 20px 32px;
  }
  #header .gnb-list > li.collapse.on .solution-list a {
    padding: 12px;
  }
  #header .gnb-list > li.collapse.on .solution-list a:hover {
    background-color: #fff3f8;
  }
  #header .gnb-list > li.collapse.on .solution-list a:hover .ico-wrap {
    background-color: #fff;
  }
  #header .gnb-list > li.on {
    background-color: #fff;
  }
  #header .gnb-list > li.on > a {
    color: #F54090;
  }
  #header .gnb-list > li .badge {
    display: inline-block;
    margin-left: 2px;
    font-size: 8px;
    line-height: 11.6px;
    color: #F54090;
    font-style: normal;
    font-weight: 700;
    vertical-align: top;
  }
  #header .gnb-list ul {
    display: none;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
  }
  #header .gnb-list ul a:active {
    background-color: #E9EEF4;
    color: #F54090;
  }
  #header .gnb-list ul li.on > a {
    font-weight: 500;
    color: #F54090;
  }
  #header .gnb-list .solution-list {
    padding: 20px;
  }
  #header .gnb-list .solution-list > li + li {
    margin-top: 20px;
  }
  #header .gnb-list .solution-list dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0px;
  }
  #header .gnb-list .solution-list dt {
    padding: 0 12px 4px;
    color: #4b5563;
  }
  #header .gnb-list .solution-list dd ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12px;
  }
  #header .gnb-list .solution-list dd .on a {
    background-color: #f3f4f6;
  }
  #header .gnb-list .solution-list dd .on a .ico-wrap {
    padding: 6px;
    border-radius: 10px;
    background-color: #fff;
  }
  #header .gnb-list .solution-list dd .on .solution-text {
    color: #000;
  }
  #header .gnb-list .solution-list dd a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
  }
  #header .gnb-list .solution-list dd a .solution-text {
    color: #1f2937;
  }
  #header .gnb-list .solution-list dd a:hover .solution-text {
    color: #000;
  }
  #header .gnb-list .solution-list dd a.menu-wrap p {
    font-size: 12px;
    color: #4b5563;
    font-weight: 400;
    display: block;
    margin-top: 2px;
  }
  #header .gnb-list .solution-list dd a.menu-wrap .solution-text {
    position: relative;
  }
  #header .gnb-list .solution-list dd a.menu-wrap .solution-text .ico-new, #header .gnb-list .solution-list dd a.menu-wrap .solution-text .ico-beta, #header .gnb-list .solution-list dd a.menu-wrap .solution-text .ico-label-gs, #header .gnb-list .solution-list dd a.menu-wrap .solution-text .ico-xs-newwindow-gray {
    margin-top: -3.5px;
    background-size: contain;
  }
  #header .gnb-list .solution-list dd a.menu-wrap .solution-text.new-window {
    font-weight: 500;
    position: relative;
  }
  #header .gnb-list .solution-list dd a.menu-wrap .solution-text.new-window .gnb-badge-gray {
    position: absolute;
    top: -2px;
    left: 44px;
    font-size: 10px;
    font-weight: 400;
    background: #e5e7eb;
    padding: 4px;
    color: #374151;
    border-radius: 103.125px;
    letter-spacing: -0.2px;
    height: 14px;
    width: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: absolute;
    top: 2px;
    right: 6px;
  }
  #header .gnb-list .solution-list dd a.menu-wrap .solution-text.new-window span::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    top: 0;
    right: 0;
    -webkit-transform: translate(120%, 2px);
            transform: translate(120%, 2px);
    background: url(../images/ico-xs-newwindow-gray@2x.png);
    background-size: cover;
  }
  #header .gnb-list .solution-list .ico-wrap {
    padding: 6px;
    border-radius: 10px;
    background-color: #f3f4f6;
  }
  #header .btn-group {
    position: absolute;
    top: 57px;
    left: 0;
    z-index: 100;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 20px 24px;
    background-color: #fff;
    border-bottom: 6px solid #f3f4f6;
    opacity: 0;
    visibility: hidden;
  }
  #header .btn-group .btn {
    width: calc(50% - 4px);
  }
  .allmenu-open #header .btn-group {
    opacity: 1;
    visibility: visible;
  }
  #header .btn-consultation {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 44px;
    padding: 11.5px 12px 11.5px 24px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 6px;
    border-radius: 8px;
    background: #000;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
  }
  #header .btn-consultation span {
    position: relative;
    line-height: 1;
  }
  #header .btn-consultation span::after {
    position: absolute;
    top: 50%;
    left: -12px;
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #38d099;
    border-radius: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  #header .btn-consultation:hover {
    background: #1f2937;
    color: #fff;
  }
}
@media (max-width: 767.98px) {
  #header .container, #header .sticky-container {
    padding: 0 6px 0 14px;
  }
  #header .btn-allmenu-open,
  #header .btn-allmenu-close {
    right: 6px;
  }
}

.fixed-header #header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  border-bottom: 1px solid #e5e7eb;
}

#sidebar, .section-cms-build {
  position: relative;
  overflow: hidden;
}
#sidebar .sidebar-title, .section-cms-build .sidebar-title {
  font-size: 37px;
  font-weight: bold;
  line-height: 48px;
}
#sidebar .menu-info, .section-cms-build .menu-info {
  margin-top: 16px;
}
#sidebar .menu-info .btn-view, .section-cms-build .menu-info .btn-view {
  gap: 6px;
}
#sidebar .desc, .section-cms-build .desc {
  color: #374151;
}
#sidebar .artwork .obj img, .section-cms-build .artwork .obj img {
  width: 100%;
  height: 100%;
}
#sidebar .tag-list, .section-cms-build .tag-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: -4px;
  color: #374151;
}
#sidebar .tag-list li, .section-cms-build .tag-list li {
  margin: 4px;
  padding: 0 8px;
  border-radius: 14px;
  line-height: 28px;
  text-align: center;
  background: #F7F9FC;
  font-size: 11px;
}
#sidebar .tag-list a, .section-cms-build .tag-list a {
  display: block;
}
@media (min-width: 1025px) {
  #sidebar, .section-cms-build {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 488px;
  }
  #sidebar .container, .section-cms-build .container, #sidebar .sticky-container, .section-cms-build .sticky-container {
    width: 1328px;
    padding-right: 408px;
  }
  #sidebar ~ #content, .section-cms-build ~ #content {
    min-height: calc(100vh - 996px);
  }
  #sidebar .sidebar-title, .section-cms-build .sidebar-title,
  #sidebar .menu-info > *,
  .section-cms-build .menu-info > * {
    position: relative;
    z-index: 2;
  }
  #sidebar .artwork, .section-cms-build .artwork {
    position: absolute;
    top: 0;
    left: 50%;
    right: 0;
    bottom: 0;
    z-index: 1 !important;
    width: 1920px;
    margin-left: -960px;
  }
  #sidebar .artwork .obj, .section-cms-build .artwork .obj {
    position: absolute;
  }
  #sidebar .obj-left, .section-cms-build .obj-left {
    left: -139px;
    bottom: 0;
    width: 560px;
    height: 720px;
  }
  #sidebar .obj-visual, .section-cms-build .obj-visual {
    left: 50%;
    top: -64px;
    width: 608px;
    height: 600px;
  }
  #sidebar .obj-right, .section-cms-build .obj-right {
    right: -220px;
    top: 0;
    width: 560px;
    height: 720px;
  }
}
@media (max-width: 1024.98px) {
  #sidebar, .section-cms-build {
    padding: 80px 0;
    text-align: center;
  }
  #sidebar:has(.container.type2, .type2.sticky-container), .section-cms-build:has(.container.type2, .type2.sticky-container) {
    padding: 60px 0;
  }
  #sidebar .container, .section-cms-build .container, #sidebar .sticky-container, .section-cms-build .sticky-container {
    width: 100%;
  }
  #sidebar .container.type2, .section-cms-build .container.type2, #sidebar .type2.sticky-container, .section-cms-build .type2.sticky-container {
    text-align: left;
  }
  #sidebar ~ #content, .section-cms-build ~ #content {
    min-height: calc(100vh - 553px);
  }
  #sidebar .tag-list, .section-cms-build .tag-list {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  #sidebar .obj-left, .section-cms-build .obj-left,
  #sidebar .obj-right,
  .section-cms-build .obj-right {
    display: none;
  }
  #sidebar .obj-visual, .section-cms-build .obj-visual {
    width: 304px;
    margin: 40px auto -40px;
  }
}

#content {
  background-color: #F7F9FC;
  overflow: hidden;
}

.content-header {
  padding-top: 24px;
}
.content-header:has(.tab-menu1) {
  padding-top: 100px;
}
.content-header .content-title {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 50px;
  text-align: center;
}
@media (min-width: 1025px) {
  .content-header {
    min-height: 160px;
  }
}
@media (max-width: 1024.98px) {
  .content-header {
    min-height: 80px;
    padding-bottom: 64px;
  }
  .content-header:has(.tab-menu1) .tab-menu1 .tab-list li a {
    min-width: 95px;
    height: 48px;
  }
  .content-header:has(.tab-menu1) .tab-menu1 .tab-list li a span {
    font-size: 16px;
  }
}
@media (max-width: 767.98px) {
  .content-header {
    min-height: 80px;
  }
  .content-header:has(.tab-menu1) {
    padding-top: 60px;
    padding-bottom: 40px;
  }
}

@media (min-width: 1025px) {
  .content-body {
    padding-bottom: 160px;
  }
}
@media (max-width: 1024.98px) {
  .content-body {
    padding-bottom: 120px;
  }
}

/** @format */
#footer {
  background-color: #171F30;
  color: #a6adb9;
}
#footer .sitemap-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#footer .sitemap-list a:hover, #footer .sitemap-list a:focus {
  color: #fff;
  border-bottom: 1px solid #fff;
}
#footer .sitemap-list > li {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 20%;
          flex: 1 1 20%;
}
#footer .sitemap-list > li > a {
  font-weight: bold;
  font-size: 16px;
  color: #fff;
}
#footer .sitemap-list > li ul {
  margin-top: 20px;
  font-size: 14px;
  line-height: 16px;
}
#footer .sitemap-list > li ul li {
  margin-top: 18px;
}
#footer .logo-bottom {
  height: 32px;
}
@media (max-width: 767.98px) {
  #footer .logo-bottom {
    height: 20px;
  }
}
#footer .wrapper {
  min-height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: self-end;
      -ms-flex-align: self-end;
          align-items: self-end;
}
#footer .wrapper .img-area {
  padding-bottom: 30px;
  width: 373px;
}
#footer .wrapper .img-area .mo-img {
  display: none;
}
@media (max-width: 1440px) {
  #footer .wrapper {
    display: block;
  }
  #footer .wrapper .img-area {
    padding-bottom: 2px;
    margin-top: 20px;
  }
}
@media (max-width: 767.98px) {
  #footer .wrapper .img-area {
    padding-bottom: 0;
  }
  #footer .wrapper .img-area .pc-img {
    display: none;
  }
  #footer .wrapper .img-area .mo-img {
    display: block;
    height: 74px;
  }
}
#footer .address {
  position: relative;
  font-style: normal;
  font-size: 12px;
  line-height: 16px;
}
#footer .company-name {
  font-size: 14px;
  font-weight: bold;
  line-height: 16px;
  margin: 18px 0 8px;
  color: #fff;
}
#footer .policy {
  font-size: 11px;
  color: #fff;
}
#footer .company-info li {
  display: inline;
}
#footer .company-info li + li:before {
  content: "|";
  margin: 0 4px;
}
@media (min-width: 1025px) {
  #footer {
    min-height: 444px;
    padding: 60px 0;
  }
  #footer .container, #footer .sticky-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 80px;
    width: 100%;
  }
  #footer .container:after, #footer .sticky-container:after {
    display: none;
  }
  #footer .sitemap-list {
    gap: 32px;
  }
  #footer .sitemap {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
  }
  #footer .sitemap li.lg_up {
    margin-right: 0;
  }
  #footer .sitemap li.lg_up a {
    height: 16px;
    font-size: 14px;
    line-height: 16px;
    display: block;
    margin-bottom: 16px;
  }
  #footer .sitemap li.lg_up a:last-child {
    margin-bottom: 0;
  }
}
@media (max-width: 1024.98px) {
  #footer {
    min-height: 444px;
    padding: 56px 64px;
    font-size: 14px;
  }
  #footer .container, #footer .sticky-container {
    padding: 0;
  }
  #footer .sitemap {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  #footer .sitemap .sitemap-list > li {
    margin-right: 5px;
    width: 100px;
  }
  #footer .company-name {
    margin-top: 18px;
    width: 80%;
  }
  #footer .address {
    margin-top: 60px;
  }
}
@media (max-width: 767.98px) {
  #footer {
    min-height: 200px;
    padding: 32px 0;
    font-size: 14px;
  }
  #footer .container, #footer .sticky-container {
    padding: 0 24px;
  }
  #footer .sitemap {
    display: none;
  }
  #footer .address {
    margin-top: 0;
  }
  #footer .address .company-info li {
    display: block;
  }
  #footer .address .company-info li + li:before {
    content: none;
  }
}

.floating-menu {
  position: fixed;
  z-index: 100;
  text-align: right;
}
.floating-menu .totop {
  opacity: 0;
  visibility: hidden;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transition-property: opacity, visibility;
  transition-property: opacity, visibility;
}
.floating-menu .totop.show {
  opacity: 1;
  visibility: visible;
}
.floating-menu .btn {
  -webkit-box-shadow: 0px 8px 15px rgba(66, 73, 80, 0.05);
          box-shadow: 0px 8px 15px rgba(66, 73, 80, 0.05);
  background-color: #fff;
  font-weight: bold;
}
.floating-menu .btn .text {
  display: block;
  margin: 0 !important;
  width: 0;
  overflow: hidden;
}
.floating-menu .btn-email {
  gap: 0;
  color: #fff;
  border: 1px solid #cad1d8;
}
.floating-menu .btn-kakao {
  background-color: #fee500;
  color: #3b1e1e;
}
.floating-menu .btn-totop {
  border: 1px solid #cad1d8;
}
@media (min-width: 1025px) {
  .floating-menu {
    left: auto;
    margin-left: auto;
    right: 64px;
    width: 64px;
    bottom: 80px;
  }
  .floating-menu li {
    height: 64px;
  }
  .floating-menu li + li {
    margin-top: 16px;
  }
  .floating-menu .btn {
    width: 64px;
    height: 64px;
    border-radius: 32px;
    font-size: 16px;
    position: absolute;
    right: 0;
    -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
    -webkit-transition-property: width;
    transition-property: width;
  }
  .floating-menu .btn-email:hover,
  .floating-menu .btn-kakao:hover {
    width: 150px;
  }
  .floating-menu .btn-email:hover .ico,
  .floating-menu .btn-kakao:hover .ico {
    margin-right: 4px;
  }
  .floating-menu .btn-email:hover .text,
  .floating-menu .btn-kakao:hover .text {
    width: auto;
    -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
  }
  .floating-menu .btn-email:hover {
    width: 150px;
  }
  .floating-menu .btn-email:hover .ico {
    margin-right: 4px;
  }
  .floating-menu .btn-email:hover .text {
    width: auto;
    -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
    color: #484e57;
  }
}
@media (min-width: 1600px) {
  .floating-menu {
    left: 50%;
    margin-left: 647px;
  }
}
@media (max-width: 1024.98px) {
  .floating-menu {
    right: 48px;
    bottom: 56px;
  }
  .floating-menu li {
    height: 64px;
  }
  .floating-menu .btn {
    width: 64px;
    height: 64px;
    border-radius: 100%;
  }
  .floating-menu .btn .text {
    margin: 0 !important;
  }
}
@media (max-width: 767.98px) {
  .floating-menu {
    right: 12px;
    bottom: 22px;
  }
  .floating-menu li {
    height: 42px;
  }
  .floating-menu .btn {
    width: 44px;
    height: 44px;
  }
  .floating-menu .ico {
    width: 30px;
    height: 30px;
  }
}

.btn.policy {
  margin-top: 20px;
  font-weight: 600;
  color: #e9eef4;
}

.btn-channel {
  display: block;
  width: 80px;
  height: 80px;
  margin-left: -8px;
}
.btn-channel .ico-channel {
  display: inline-block;
  width: 80px;
  height: 80px;
  background: url(../../ko/images/ico-lg-channel@2x.png) 0 0 no-repeat;
  background-size: cover;
}
@media (max-width: 1024.98px) {
  .btn-channel {
    position: absolute;
  }
  .btn-channel .ico-channel {
    display: inline-block;
    background: url(../../ko/images/ico-md-channel@2x.png) 0 0 no-repeat;
    background-size: cover;
  }
}
@media (max-width: 767.98px) {
  .btn-channel {
    width: 56px;
    height: 56px;
  }
  .btn-channel .ico-channel {
    width: 56px;
    height: 56px;
  }
}

/* 화면명1 */
/* UI 컴포넌트 가이드 */
.wrapper-html-guide .content-title {
  padding-top: 50px;
}
.wrapper-html-guide .container, .wrapper-html-guide .sticky-container {
  overflow: hidden;
}
.wrapper-html-guide .badge {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin-top: 0.45em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #FF4D6D;
}
.wrapper-html-guide .row .col {
  display: table-cell;
  width: 1%;
}
.wrapper-html-guide .row .col:after {
  display: block;
  clear: both;
  content: "";
}
.wrapper-html-guide .row.row-auto {
  display: table;
  width: 100%;
}
.wrapper-html-guide .row.row-auto .col {
  width: auto;
}
.wrapper-html-guide .gutter-1 {
  margin-left: -2.5px;
  margin-right: -2.5px;
}
.wrapper-html-guide .gutter-1 .col {
  padding: 0 2.5px;
}
.wrapper-html-guide .gutter-1.row-auto {
  width: calc(100% + 10px);
}
.wrapper-html-guide .gutter-2 {
  margin-left: -5px;
  margin-right: -5px;
}
.wrapper-html-guide .gutter-2 .col {
  padding: 0 5px;
}
.wrapper-html-guide .gutter-2.row-auto {
  width: calc(100% + 20px);
}
.wrapper-html-guide .gutter-3 {
  margin-left: -7.5px;
  margin-right: -7.5px;
}
.wrapper-html-guide .gutter-3 .col {
  padding: 0 7.5px;
}
.wrapper-html-guide .gutter-3.row-auto {
  width: calc(100% + 30px);
}
.wrapper-html-guide .gutter-4 {
  margin-left: -10px;
  margin-right: -10px;
}
.wrapper-html-guide .gutter-4 .col {
  padding: 0 10px;
}
.wrapper-html-guide .gutter-4.row-auto {
  width: calc(100% + 40px);
}
.wrapper-html-guide .gutter-5 {
  margin-left: -12.5px;
  margin-right: -12.5px;
}
.wrapper-html-guide .gutter-5 .col {
  padding: 0 12.5px;
}
.wrapper-html-guide .gutter-5.row-auto {
  width: calc(100% + 50px);
}
.wrapper-html-guide .gutter-6 {
  margin-left: -15px;
  margin-right: -15px;
}
.wrapper-html-guide .gutter-6 .col {
  padding: 0 15px;
}
.wrapper-html-guide .gutter-6.row-auto {
  width: calc(100% + 60px);
}
.wrapper-html-guide .gutter-7 {
  margin-left: -17.5px;
  margin-right: -17.5px;
}
.wrapper-html-guide .gutter-7 .col {
  padding: 0 17.5px;
}
.wrapper-html-guide .gutter-7.row-auto {
  width: calc(100% + 70px);
}
.wrapper-html-guide .gutter-8 {
  margin-left: -20px;
  margin-right: -20px;
}
.wrapper-html-guide .gutter-8 .col {
  padding: 0 20px;
}
.wrapper-html-guide .gutter-8.row-auto {
  width: calc(100% + 80px);
}
.wrapper-html-guide .gutter-9 {
  margin-left: -22.5px;
  margin-right: -22.5px;
}
.wrapper-html-guide .gutter-9 .col {
  padding: 0 22.5px;
}
.wrapper-html-guide .gutter-9.row-auto {
  width: calc(100% + 90px);
}
.wrapper-html-guide .gutter-10 {
  margin-left: -25px;
  margin-right: -25px;
}
.wrapper-html-guide .gutter-10 .col {
  padding: 0 25px;
}
.wrapper-html-guide .gutter-10.row-auto {
  width: calc(100% + 100px);
}
@media (min-width: 1025px) {
  .wrapper-html-guide #content {
    padding: 0 150px;
  }
}

.guide-section {
  margin: 50px 0;
}

#guide-nav {
  position: fixed;
  left: 0;
  padding: 15px;
  top: 0;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.8);
}
#guide-nav .sidebar-title {
  border-bottom: 1px solid #ddd;
  font-size: 20px;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
#guide-nav .nav-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}
#guide-nav .guide-list {
  font-size: 15px;
}
#guide-nav ul {
  border-bottom: 1px solid #ddd;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
#guide-nav li a small {
  opacity: 0.8;
  display: none;
}
#guide-nav li a .ico {
  margin-top: -2px;
}
#guide-nav li.on {
  font-weight: bold;
  color: #F54090;
}
#guide-nav .quick-link {
  font-size: 13px;
}
#guide-nav .quick-link .ico {
  width: 11px;
  height: 11px;
}
@media (max-width: 1024.98px) {
  #guide-nav {
    display: none;
  }
}

.code {
  border: 1px solid rgba(255, 0, 0, 0.2);
  padding: 4px 8px;
  border-radius: 2px;
  background-color: antiquewhite;
  font-family: "Courier New", "malgungothic", Courier;
  font-size: 14px;
}

.title-guide {
  font-size: 28px;
  font-family: "Spoqa Han Sans Neo", "Noto Sans KR", "Noto Sans CJK KR", "malgun gothic", sans-serif, Tahoma;
  letter-spacing: -0.03em;
  color: #222;
  margin-bottom: 30px;
  padding: 10px 0 10px 15px;
  border-top: 2px solid rgba(34, 34, 34, 0.8);
  border-bottom: 1px dashed rgba(34, 34, 34, 0.2);
}
.title-guide small {
  font-size: 20px;
  margin-left: 10px;
  color: #F54090;
}
@media (max-width: 1024.98px) {
  .title-guide {
    font-size: 20px;
  }
}

.box-html-guide {
  margin-top: -20px;
  background-color: #F7F9FC;
  padding: 15px 20px;
}

.box-tbd {
  text-align: center;
  font-size: 0.3rem;
  color: #fff;
  line-height: 1rem;
}
.box-tbd:after {
  content: "디자인 수급예정";
}

.bg-setting {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: -5px;
}
.bg-setting span {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 14px;
  min-width: 120px;
  line-height: 40px;
  border: 1px solid #E9EEF4;
  border-radius: 10px;
  vertical-align: middle;
}

.score-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  margin: 15px 0;
  border: 1px solid #e7e7e7;
  border-radius: 10px;
  padding: 20px 10px 15px;
}
.score-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
}
.score-list strong {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
}
.score-list .chart {
  position: relative;
  width: 60px;
  height: 60px;
  color: #999;
}
.score-list .chart .percent {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  font-size: 18px;
  font-weight: bold;
}

.section {
  overflow: hidden;
}
.section .section-title {
  font-size: 36px;
  font-weight: bold;
  line-height: 1.2;
}
.section .section-desc {
  margin-top: 16px;
  font-size: 16px;
  line-height: 24px;
}

.section-portfolio {
  padding-top: 152px;
  padding-bottom: 144px;
  background: #000;
}
.section-portfolio .section-header {
  text-align: center;
}
.section-portfolio .section-body {
  position: relative;
}
.section-portfolio .portfolio-slider {
  position: static;
}
@media (max-width: 1024.98px) {
  .section-portfolio {
    padding-top: 80px;
  }
  .section-portfolio .section-body {
    padding-top: 88px;
  }
}

.wrapper-main-2023 #content {
  background: #fff;
}

.section-home .visual:after {
  display: none;
}
.section-home .visual .desc {
  margin-top: 12px;
}
.section-home .visual .btn-area {
  margin-top: 32px;
}
.section-home .visual .right {
  text-align: right;
}
.section-home .visual .img-visual {
  width: 430px;
  vertical-align: top;
}
.section-home .our-mission {
  position: relative;
  padding-top: 60px;
  padding-bottom: 60px;
  background: #000;
  color: #fff;
  z-index: 10;
}
.section-home .our-mission .section-title {
  font-weight: 500;
  font-size: 16px;
  opacity: 0.5;
}
.section-home .our-mission .text-mission {
  margin-top: 16px;
  font-size: 28px;
  line-height: 1.4;
  font-weight: 700;
}
@media (min-width: 1025px) {
  .section-home .visual {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding-top: 45px;
    padding-bottom: 45px;
  }
  .section-home .visual .section-title {
    font-size: 40px;
    line-height: 1.2;
  }
}
@media (max-width: 1024.98px) {
  .section-home .visual {
    padding-top: 60px;
  }
  .section-home .visual .section-title {
    font-size: 28px;
    line-height: 1.4;
  }
  .section-home .our-mission .text-mission {
    font-size: 24px;
  }
  .section-home .right {
    margin: 0 -24px;
  }
}

.section-needs {
  padding-top: 100px;
  padding-bottom: 100px;
}
.section-needs .user-needs {
  margin-top: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  line-height: 1.3;
}
.section-needs .user-needs li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 12px;
  width: 100%;
  background: #F7F9FC;
  padding: 20px 16px;
  border-radius: 16px;
}
.section-needs .user-needs .img-needs {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  border-radius: 50%;
}
.section-needs .user-needs .img-needs img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.section-needs .user-needs .text-area {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}
.section-needs .user-needs .needs {
  position: relative;
  display: block;
  font-weight: 700;
  font-size: 14px;
  word-break: break-all;
  color: #1f2937;
}
.section-needs .user-needs .needs::before {
  position: absolute;
  content: '"';
  display: inline-block;
  width: 10px;
  text-indent: -8px;
}
.section-needs .user-needs .speaker {
  margin-top: 12px;
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: #4b5563;
}
.section-needs .section-title {
  text-align: center;
  font-weight: 700;
  line-height: 1.4;
  font-size: 36px;
}
.section-needs .box-inseq {
  margin-top: 20px;
  padding: 40px 24px;
  text-align: center;
  background: #000 url(../images/bg-maskgroup.png);
  border-radius: 20px;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  color: #fff;
}
@media (max-width: 1024.98px) {
  .section-needs {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .section-needs .section-title {
    font-size: 28px;
  }
  .section-needs .user-needs {
    margin-top: 20px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .section-needs .user-needs li {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
  }
  .section-needs .box-inseq {
    font-size: 18px;
  }
}

.section-service {
  padding-top: 100px;
  padding-bottom: 100px;
  background: #F7F9FC;
}
.section-service .section-title {
  text-align: center;
  font-weight: 700;
  line-height: 1.4;
  font-size: 36px;
}
.section-service .service-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 20px;
  max-width: 1120px;
  margin: 40px auto;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  color: #7e8594;
}
.section-service .service-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 calc(50% - 10px);
          flex: 1 1 calc(50% - 10px);
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  overflow: hidden;
}
.section-service .service-list li .tag-soon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 8px 12px;
  min-width: 130px;
  height: 32px;
  margin-bottom: 8px;
  background: #000;
  border-radius: 100px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: #fff;
}
.section-service .service-list li .label {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
  font-size: 13px;
  font-weight: 500;
  color: #1f2937;
}
.section-service .service-list li .artwork {
  margin: 0 -40px;
  text-align: center;
}
.section-service .service-list li .img-artwork {
  margin: 0 -40px -40px;
  vertical-align: top;
  height: 310px;
  -o-object-fit: contain;
     object-fit: contain;
}
.section-service .service-list li .img-badge {
  width: 144px;
  -o-object-fit: contain;
     object-fit: contain;
}
.section-service .service-list li .row .left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.section-service .service-list li .row .right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.section-service .service-list li .row .right .img-badge {
  width: auto;
  max-width: 200px;
  height: 80px;
}
.section-service .service-list li:nth-child(3) .row .right .img-badge {
  height: auto;
}
@media (max-width: 1024.98px) {
  .section-service .service-list li:nth-child(3) .row .right .img-badge {
    max-width: 80px;
  }
}
.section-service .service-list .btn-group {
  margin-top: 24px;
}
@media (min-width: 1025px) {
  .section-service .service-list .title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .section-service .service-list .title .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 10px;
    width: 100%;
  }
  .section-service .service-list .artwork {
    position: relative;
  }
  .section-service .service-list .artwork .img-new {
    position: absolute;
    bottom: -40px;
    right: 0;
    max-width: 108px;
    width: 23.275%;
  }
}
@media (max-width: 1024.98px) {
  .section-service {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .section-service .section-title {
    font-size: 28px;
  }
  .section-service .service-list {
    margin-top: 24px;
    font-size: 16px;
    line-height: 1.3;
  }
  .section-service .service-list .title .row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .section-service .service-list .title .row .right {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 2px;
    width: 100%;
    margin-top: 4px;
  }
  .section-service .service-list .title .row .right .img-badge {
    max-width: 58px;
    height: 32px;
  }
  .section-service .service-list .title .row .right span {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    letter-spacing: -0.04em;
  }
  .section-service .service-list li {
    padding: 20px;
  }
  .section-service .service-list li .label {
    font-size: 10px;
  }
  .section-service .service-list li .artwork {
    position: relative;
    margin: 0 0;
  }
  .section-service .service-list li .artwork .img-new {
    position: absolute;
    bottom: -20px;
    right: -20px;
    min-width: 99px;
    max-width: auto;
    width: 23.275%;
  }
  .section-service .service-list li .artwork.soon::after {
    bottom: -58px;
    height: calc(100% + 38px);
    background-size: 100% auto;
  }
  .section-service .service-list li .img-artwork {
    margin: 20px 0 -20px;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
  }
  .section-service .service-list li .tag-soon {
    min-width: 117px;
    font-size: 14px;
  }
  .section-service .service-list .btn-group {
    margin-top: 20px;
  }
}
@media (max-width: 767.98px) {
  .section-service .service-list li {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

.section-performance {
  padding-top: 100px;
  padding-bottom: 100px;
  text-align: center;
}
.section-performance .performance-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 20px;
}
.section-performance .performance-list .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-width: 200px;
}
.section-performance .performance-list .item .thumb {
  width: 80px;
  height: 80px;
  margin-bottom: 12px;
}
.section-performance .performance-list .item .title {
  font-weight: 700;
}
.section-performance .performance-list .item .desc {
  margin-top: 4px;
  font-weight: 500;
  line-height: 1.3;
  color: #4b5563;
}
@media (min-width: 1025px) {
  .section-performance .section-title {
    font-size: 24px;
  }
  .section-performance .performance-list {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    margin-top: 40px;
  }
  .section-performance .performance-list .item .title {
    font-size: 40px;
    line-height: 1.5;
  }
}
@media (max-width: 1024.98px) {
  .section-performance {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .section-performance .section-title {
    font-size: 18px;
    line-height: 1.4;
  }
  .section-performance .performance-list {
    margin-top: 24px;
  }
  .section-performance .performance-list .item .title {
    font-size: 28px;
    line-height: 1.4;
  }
}
@media (max-width: 767.98px) {
  .section-performance .performance-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.section-projects {
  padding-top: 100px;
  padding-bottom: 100px;
  text-align: center;
  background: #f3f4f6;
}
.section-projects .section-title {
  font-size: 36px;
  line-height: 1.2;
}
.section-projects .projects-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  margin-top: 40px;
}
.section-projects .projects-list .item {
  position: relative;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  width: 33.3%;
  height: 500px;
  border-radius: 20px;
  overflow: hidden;
}
.section-projects .projects-list .item.col-2 {
  width: calc(66.6% - 20px);
}
.section-projects .projects-list .item.indigo .info {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(42, 48, 66, 0)), to(rgba(0, 0, 0, 0.6)));
  background: linear-gradient(180deg, rgba(42, 48, 66, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
}
.section-projects .projects-list .item.violet .info {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(92, 0, 173, 0)), to(rgba(92, 0, 173, 0.6)));
  background: linear-gradient(180deg, rgba(92, 0, 173, 0) 0%, rgba(92, 0, 173, 0.6) 100%);
}
.section-projects .projects-list .item.blue .info {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(5, 60, 140, 0)), to(rgba(5, 60, 140, 0.6)));
  background: linear-gradient(180deg, rgba(5, 60, 140, 0) 0%, rgba(5, 60, 140, 0.6) 100%);
}
.section-projects .projects-list .item.red .info {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(63, 0, 0, 0)), to(rgba(82, 0, 0, 0.6)));
  background: linear-gradient(180deg, rgba(63, 0, 0, 0) 0%, rgba(82, 0, 0, 0.6) 100%);
}
.section-projects .projects-list .thumb {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 20px;
}
.section-projects .projects-list .info {
  position: absolute;
  left: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 4px;
  width: 100%;
  min-height: 166px;
  padding: 40px 32px 32px;
}
.section-projects .projects-list .tag-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
}
.section-projects .projects-list .tag-list .tag {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-width: 46px;
  height: 24px;
  padding: 4px 12px;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  border-radius: 100px;
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  color: #fff;
}
.section-projects .projects-list .title {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  color: #fff;
}
.section-projects .projects-list .proj-company {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
}
.section-projects .projects-list .proj-company .logo {
  width: 28px;
  height: 28px;
  background: #fff;
  border-radius: 50%;
}
.section-projects .projects-list .proj-company span {
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
}
.section-projects .projects-btn {
  margin-top: 40px;
}
.section-projects .projects-btn .btn-more {
  background: #fff;
  color: #374151;
}
@media (max-width: 1024.98px) {
  .section-projects {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .section-projects .section-title {
    font-size: 24px;
    line-height: 1.4;
  }
  .section-projects .projects-list {
    margin-top: 24px;
  }
  .section-projects .projects-list .item {
    width: 100%;
    height: 420px;
  }
  .section-projects .projects-list .item.col-2 {
    width: 100%;
  }
  .section-projects .projects-list .thumb {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 110%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .section-projects .projects-list .info {
    min-height: 133px;
    padding: 28px 20px 20px;
  }
  .section-projects .projects-list .title {
    font-size: 18px;
  }
}

.section-client {
  padding-top: 100px;
  padding-bottom: 100px;
  text-align: center;
}
.section-client .section-title {
  font-size: 36px;
  line-height: 1.2;
}
.section-client .client-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 32px;
  width: 100%;
  margin-top: 40px;
}
.section-client .client-list .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  width: calc(25% - 32px);
  padding: 32px;
  background: #f3f4f6;
  border-radius: 16px;
}
.section-client .client-list .item .title {
  font-size: 14px;
  line-height: 1.3;
  color: #374151;
}
.section-client .client-list .item .title + span {
  margin-top: 4px;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.3;
  color: #4b5563;
}
.section-client .client-list .item:hover .comment {
  color: #4b5563;
}
.section-client .client-list .item:hover strong {
  color: #0F172A;
}
.section-client .client-list .img-client {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  border-radius: 50%;
}
.section-client .client-list .comment {
  margin-top: 20px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  word-break: break-all;
  color: #7e8594;
}
.section-client .client-list .comment strong {
  font-weight: 700;
  color: #1f2937;
}
.section-client .client-list .comment p {
  position: relative;
}
.section-client .client-list .comment p::before {
  position: absolute;
  content: '"';
  display: inline-block;
  width: 10px;
  text-indent: -10px;
  font-family: "Spoqa Han Sans Neo", "Noto Sans KR", "Noto Sans CJK KR", "malgun gothic", sans-serif, Tahoma;
}
.section-client .client-list .comment p::after {
  position: absolute;
  content: '"';
  display: inline-block;
  width: 10px;
  text-indent: 0px;
  font-family: "Spoqa Han Sans Neo", "Noto Sans KR", "Noto Sans CJK KR", "malgun gothic", sans-serif, Tahoma;
}
.section-client .logo-area {
  width: 100%;
  margin: 80px 12.86px 0;
}
.section-client .logo-area .logo-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 40px;
}
.section-client .logo-area .logo-list .slick-list {
  width: 100%;
  height: 40px;
}
.section-client .logo-area .logo-list li {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  max-width: 158px;
  margin: 0 30px;
}
.section-client .logo-area .logo-list li .logo {
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (min-width: 1025px) {
  .section-client .logo-area {
    position: relative;
  }
  .section-client .logo-area:before, .section-client .logo-area:after {
    content: "";
    position: absolute;
    width: 240px;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    background: -webkit-gradient(linear, left top, right top, from(white), to(rgba(255, 255, 255, 0)));
    background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  }
  .section-client .logo-area:before {
    left: -13px;
  }
  .section-client .logo-area:after {
    left: auto;
    right: -13px;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  .section-client .client-list .item {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
    width: calc(50% - 16px);
    min-height: auto;
  }
}
@media (max-width: 1024.98px) {
  .section-client {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .section-client .section-title {
    font-size: 24px;
    line-height: 1.4;
  }
  .section-client .client-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .section-client .client-list .item {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    width: 100%;
  }
  .section-client .logo-area {
    width: calc(100% - 50px);
    margin: 40px 24px 0;
  }
  .section-client .logo-area .logo-list {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: auto;
    gap: 40px 38px;
  }
  .section-client .logo-area .logo-list li {
    max-width: calc(33.3% - 26px);
    width: calc(33.3% - 26px);
    height: 20px;
    margin: 0;
  }
}

.section-process {
  padding-top: 100px;
  padding-bottom: 100px;
  text-align: center;
  background: #f3f4f6;
}
.section-process .section-title {
  font-size: 36px;
  line-height: 1.2;
}
.section-process .process-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 32px;
  width: 100%;
  margin-top: 40px;
}
.section-process .process-list .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  padding: 24px;
  gap: 12px;
  width: calc(33.3% - 32px);
  min-height: 444px;
  background: #fff;
  border-radius: 20px;
}
.section-process .process-list .item.col-2 {
  width: calc(66.6% - 20px);
}
.section-process .process-list .header-title {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-left: 36px;
}
.section-process .process-list .header-title .num {
  position: absolute;
  left: 0;
  width: 28px;
  height: 28px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: 700;
  line-height: 1.3;
  background: #0F172A;
  border-radius: 50%;
  color: #fff;
}
.section-process .process-list .header-title strong {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  color: #1f2937;
}
.section-process .process-list .body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 100%;
  text-align: left;
  word-break: break-all;
  color: #1f2937;
}
.section-process .process-list .num-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
}
.section-process .process-list .num-list li {
  position: relative;
  padding-left: 28px;
  line-height: 1.3;
}
.section-process .process-list .num-list .num {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  background: #e5e7eb;
  border-radius: 6px;
  color: #1f2937;
}
.section-process .process-list .dot-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6px;
}
.section-process .process-list .dot-list li {
  position: relative;
  padding-left: 12px;
  line-height: 1.3;
}
.section-process .process-list .dot-list li::before {
  position: absolute;
  top: 8.5px;
  left: 0;
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  background: #a6adb9;
  border-radius: 50%;
}
.section-process .process-list .cont-wrap .dot-list {
  margin-top: 8px;
}
.section-process .process-list .img-process {
  margin-top: 20px;
}
@media (max-width: 1024.98px) {
  .section-process {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .section-process .section-title {
    font-size: 28px;
    line-height: 1.4;
  }
  .section-process .process-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 24px;
    width: 100%;
    margin-top: 24px;
  }
  .section-process .process-list .item {
    width: 100%;
    min-height: auto;
  }
  .section-process .process-list .item.col-2 {
    width: 100%;
  }
  .section-process .body {
    width: 100%;
  }
  .section-process .img-process {
    text-align: center;
  }
}

.section-story {
  padding-top: 100px;
  padding-bottom: 100px;
  text-align: center;
}
.section-story .section-title {
  font-size: 36px;
  line-height: 1.2;
}
.section-story .story-list {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  width: calc(100% + 32px);
  height: auto;
  margin-top: 24px;
  margin-left: -16px;
}
.section-story .story-item {
  position: relative;
  margin: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  min-height: 519px;
}
.section-story .story-item a::before {
  top: 0;
  left: 0;
  border-radius: 20px;
}
.section-story .story-item .item-body {
  padding: 24.5px 18px 0 18px;
  text-align: left;
}
.section-story .story-item .item-body .category {
  color: #4b5563;
}
.section-story .story-item .item-body .subject {
  max-height: 68px;
  font-size: 24px;
  color: #374151;
  line-height: 1.4;
}
.section-story .story-item .item-body .desc {
  color: #374151;
  line-height: 1.3;
}
.section-story .story-item .item-footer .hash-tag-list {
  margin: 0px;
  min-height: auto;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  -ms-flex-line-pack: end;
      align-content: flex-end;
}
.section-story .story-item .item-footer .hash-tag-list li {
  margin: 5px 2.5px 0px;
}
.section-story .story-item .item-footer .hash-tag-list .tag {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 0 8px;
  height: 28px;
  border-radius: 14px;
  font-size: 12px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid transparent;
}
.section-story .story-item .item-footer .hash-tag-list .tag:before {
  content: "#";
  display: inline-block;
  margin-right: 1px;
}
.section-story .story-btn .btn-more {
  margin-top: 24px;
  background: #f3f4f6;
  color: #374151;
}
@media (max-width: 1024.98px) {
  .section-story {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .section-story .section-title {
    font-size: 28px;
    line-height: 1.4;
  }
  .section-story .story-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: 8px;
  }
  .section-story .story-item {
    width: calc(100% - 33px);
    min-height: auto;
  }
  .section-story .story-item .item-body {
    padding: 24.5px 25px 0 25px;
  }
}

.portfolio-content {
  background-color: #fff !important;
  overflow: hidden;
}

.section.portfolio-header {
  text-align: left;
}
.section.portfolio-header .desc {
  margin-top: 12px;
  margin-bottom: 0;
  line-height: 22px;
}
@media (min-width: 1025px) {
  .section.portfolio-header {
    padding: 100px 0;
  }
}
@media (max-width: 1024.98px) {
  .section.portfolio-header {
    padding: 60px 0;
  }
  .section.portfolio-header .portfolio-title {
    font-size: 28px;
    line-height: 35px;
  }
}
.section.section-ui-service {
  background: #f3f4f6;
}
@media (min-width: 1025px) {
  .section.section-ui-service {
    padding: 80px 0;
  }
}
@media (max-width: 1024.98px) {
  .section.section-ui-service {
    padding: 60px 0;
  }
}

.section-ui-service .service-title {
  font-weight: 700;
  color: #1f2937;
  word-break: break-all;
}
.section-ui-service .service-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 40px 0 0;
}
.section-ui-service .service-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 33.3%;
  padding: 28px 32px 28px;
  border-radius: 20px;
}
.section-ui-service .service-item.indigo {
  background: #004173;
}
.section-ui-service .service-item.blue {
  background: #3f6be5;
}
.section-ui-service .service-item.pink {
  background: #ff519e;
}
.section-ui-service .service-item .serv-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
  min-height: 173px;
}
.section-ui-service .service-item .serv-body {
  width: 100%;
}
.section-ui-service .service-item .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
}
.section-ui-service .service-item .service-title {
  font-weight: 700;
  font-size: 24px;
  color: #fff;
}
.section-ui-service .service-item .service-check-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
}
.section-ui-service .service-item .service-check-list li {
  position: relative;
  padding-left: 24px;
  color: #fff;
}
.section-ui-service .service-item .service-check-list li:before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 2.5px;
  left: 0;
  background: url(../images/ico-bul-white@2x.png) center center no-repeat;
  background-size: 16px;
}
.section-ui-service .service-item .tag-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 6px;
}
.section-ui-service .service-item .tag-list .tag {
  display: inline-block;
  padding: 4px 8px 4px;
  min-height: 28px;
  font-size: 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 14px;
}
.section-ui-service .service-item .tag-list .tag::before {
  content: "#";
}
@media (min-width: 1025px) {
  .section-ui-service .service-title {
    font-size: 28px;
  }
  .section-ui-service .service-container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 24px;
  }
}
@media (max-width: 1024.98px) {
  .section-ui-service .service-title {
    font-size: 24px;
  }
  .section-ui-service .service-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 20px;
    margin: 25px 0 0;
  }
  .section-ui-service .service-item {
    width: 100%;
    padding: 21px 24px 22px;
  }
  .section-ui-service .service-item .serv-header {
    min-height: auto;
  }
  .section-ui-service .service-item .serv-img {
    width: 100%;
    text-align: center;
  }
  .section-ui-service .service-item .service-check-list li {
    font-size: 14px;
  }
  .section-ui-service .service-item .service-check-list li:before {
    top: 2px;
  }
}

.sticky-container .portfolio-body {
  position: relative;
}
.sticky-container .portfolio-body .loadingbar {
  position: absolute;
  display: block;
  z-index: 50;
}
.sticky-container .portfolio-body .loadingbar .spinner {
  margin: calc(50vh - 100px) auto;
}
@media (min-width: 1025px) {
  .sticky-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    width: 100%;
    height: 100%;
    min-height: 1400px;
    padding-top: 80px;
  }
  .sticky-container .portfolio-header {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    height: auto;
    width: 276px;
    padding: 0 0 48px;
  }
  .sticky-container .portfolio-category {
    position: sticky;
    top: 144px;
    display: inline-block;
  }
  .sticky-container .portfolio-body {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: inline-block;
    width: calc(100% - 276px);
    overflow: hidden;
  }
}

.portfolio-header .portfolio-title {
  font-size: 40px;
  font-weight: bold;
  line-height: 48px;
}
.portfolio-header .desc {
  color: #374151;
}
@media (min-width: 1025px) {
  .portfolio-header {
    width: 100%;
    padding-bottom: 48px;
  }
  .portfolio-header .desc {
    margin-top: 24px;
    margin-bottom: 48px;
  }
}
@media (max-width: 1024.98px) {
  .portfolio-header {
    text-align: center;
    padding: 12px 0 0;
  }
  .portfolio-header .desc {
    margin-top: 16px;
  }
}

.portfolio-category {
  margin: -4px;
  color: #A4ACB7;
  overflow: hidden;
}
.portfolio-category li {
  float: left;
  margin: 4px;
}
.portfolio-category li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 32px;
  padding: 0 11px;
  border-radius: 14px;
  border: 1px solid #CAD1D8;
  border-radius: 16px;
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transition-property: color, border-color;
  transition-property: color, border-color;
}
.portfolio-category li.on a {
  border-color: transparent;
  background-color: #F54090;
  font-weight: bold;
  color: #fff;
}
.portfolio-category li.all {
  margin-bottom: 12px;
}
.portfolio-category li.all + li {
  clear: both;
}
.portfolio-category li:not(.all) a:before {
  content: "#";
}
@media (min-width: 1025px) {
  .portfolio-category {
    width: 256px;
    margin-right: 15px;
  }
  .portfolio-category a:focus, .portfolio-category a:hover {
    color: #4b5563;
    border-color: #d1d5db;
    background-color: #f3f4f6;
  }
}
@media (max-width: 1024.98px) {
  .portfolio-category {
    margin-top: 48px;
    margin-bottom: 32px;
  }
}

.portfolio-body {
  padding-bottom: 80px;
}
@media (min-width: 1025px) {
  .portfolio-body {
    width: calc(100% - 256px);
    float: right;
  }
}

.btn-group-more {
  margin-top: 40px;
  text-align: center;
}

.hash-tag-list {
  position: relative;
  z-index: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: -4px;
  color: #374151;
}
.hash-tag-list li {
  margin: 4px;
}
.hash-tag-list .text {
  display: block;
  padding: 0 8px;
  border-radius: 14px;
  line-height: 26px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transition-property: background-color, border-color;
  transition-property: background-color, border-color;
}
.hash-tag-list .text:before {
  content: "#";
}
@media (min-width: 1025px) {
  .hash-tag-list a.text:focus, .hash-tag-list a.text:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.8);
  }
}

.modal-portfolio {
  display: block;
  z-index: 1050;
}
.modal-portfolio .popup-inner {
  height: 100%;
  overflow-y: auto;
  background: none;
}
.modal-portfolio.hide .popup-inner {
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
}
@media (max-width: 575.98px) {
  .modal-portfolio .popup-inner {
    -webkit-transform: none !important;
            transform: none !important;
  }
}

.portfolio-container {
  position: relative;
  width: 608px;
  max-width: 100%;
  min-height: calc(100vh - 25px);
  margin: 50px auto;
  z-index: 10;
  border-radius: 24px;
  color: #fff;
  text-align: center;
  background-color: #fff;
  overflow: hidden;
}
.portfolio-container .loadingbar {
  position: absolute;
  display: block;
}
.portfolio-container .loadingbar .spinner {
  margin: calc(50vh - 100px) auto;
}
.portfolio-container .portfolio-detail-url {
  display: none;
}
.portfolio-container .btn-link-copy {
  position: absolute;
  width: 24px;
  height: 24px;
  padding: 0;
  right: 88px;
  top: 40px;
}
.portfolio-container .btn-close-popup {
  width: 24px;
  height: 24px;
  padding: 0;
  right: 40px;
  top: 40px;
}
@media (max-width: 767.98px) {
  .portfolio-container {
    width: auto;
    margin: 0;
    border-radius: 0;
  }
  .portfolio-container .btn-link-copy {
    z-index: 100;
    position: fixed;
    right: 72px;
    top: 28px;
  }
  .portfolio-container .btn-close-popup {
    z-index: 100;
    position: fixed;
    right: 28px;
    top: 28px;
  }
}

.portfolio-detail-header {
  position: relative;
  padding: 80px 24px 0;
  background-color: #F54090;
}
.portfolio-detail-header:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
}
.portfolio-detail-header > * {
  position: relative;
}
.portfolio-detail-header .portfolio-title {
  margin: 0 0 16px;
  line-height: 48px;
  font-weight: bold;
  font-size: 37px;
}
.portfolio-detail-header .period {
  margin: 16px 0 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.portfolio-detail-header .hash-tag-list {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.portfolio-detail-header .description {
  margin: 16px auto 0;
  max-width: 400px;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  text-align: center;
}
.portfolio-detail-header .btn-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 32px auto 100px;
}
.portfolio-detail-header .btn-group .btn {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin: 8px;
  border-color: rgba(255, 255, 255, 0.5);
}
.portfolio-detail-header .btn-group .btn:focus, .portfolio-detail-header .btn-group .btn:hover {
  border-color: rgba(255, 255, 255, 0.8);
  background-color: rgba(255, 255, 255, 0.1);
}
.portfolio-detail-header .main-screen {
  overflow: hidden;
}
.portfolio-detail-header .screen {
  position: relative;
  z-index: 10;
  max-width: 100%;
  height: 270px;
  margin: auto;
  border: 3px solid #484E57;
  border-radius: 16px;
  background-color: #484E57;
  -webkit-box-shadow: 0px 16px 16px -16px rgba(66, 73, 80, 0.3);
          box-shadow: 0px 16px 16px -16px rgba(66, 73, 80, 0.3);
  overflow: hidden;
}
.portfolio-detail-header .screen img {
  position: absolute;
  top: 0;
  left: 50%;
  max-width: none;
  height: auto;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -o-object-fit: cover;
     object-fit: cover;
}
.portfolio-detail-header .screen-pc {
  max-width: 480px;
}
.portfolio-detail-header .screen-pc img {
  width: 480px;
}
.portfolio-detail-header .screen-mobile {
  width: 180px;
  height: 320px;
}
.portfolio-detail-header .screen-mobile .inner {
  position: relative;
  width: 100%;
  padding-top: 180.46%;
}
.portfolio-detail-header .screen-mobile img {
  width: 180px;
}
.portfolio-detail-header .pc-screen2 img {
  width: 480px;
}
.portfolio-detail-header .mobile-screen2 {
  width: 186px;
}
.portfolio-detail-header .mobile-screen2 img {
  width: 180px;
}
@media (min-width: 768px) {
  .portfolio-detail-header .description {
    white-space: pre-line;
  }
}
@media (max-width: 767.98px) {
  .portfolio-detail-header .btn-group {
    margin-left: -24px;
    margin-right: -24px;
  }
  .portfolio-detail-header .btn-group .btn {
    margin: 4px;
  }
  .portfolio-detail-header .screen {
    height: auto;
  }
  .portfolio-detail-header .inner {
    height: 0;
  }
  .portfolio-detail-header .screen {
    border-radius: 12px;
  }
  .portfolio-detail-header .screen-pc .inner {
    width: 100%;
    padding-top: 60.83%;
  }
  .portfolio-detail-header .screen-pc img {
    width: 110.6%;
  }
  .portfolio-detail-header .screen-mobile {
    width: 126px;
    height: 224px;
  }
  .portfolio-detail-header .screen-mobile img {
    width: 126px;
  }
}

.portfolio-detail-body {
  position: relative;
  z-index: 9;
  background-color: #fff;
  margin-top: -160px;
  padding-top: 296px;
  padding-bottom: 120px;
  overflow: hidden;
}
.portfolio-detail-body dd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.portfolio-detail-body .mockup-list {
  margin: -16px;
}
.portfolio-detail-body .mockup-list .item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin: 16px;
  display: block;
  border: 3px solid #484E57;
  border-radius: 16px;
  background-color: #484E57;
  -webkit-box-shadow: 0px 16px 16px -16px rgba(66, 73, 80, 0.3);
          box-shadow: 0px 16px 16px -16px rgba(66, 73, 80, 0.3);
  overflow: hidden;
}
.portfolio-detail-body .mockup-list-mobile dd {
  margin-right: -67px;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.portfolio-detail-body .mockup-list-mobile .item {
  width: 145px;
  height: 253px;
}
@media (min-width: 768px) {
  .portfolio-detail-body .mockup-list-desktop {
    margin-top: 104px;
  }
  .portfolio-detail-body .mockup-list-desktop dd.right {
    margin-right: -193px;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .portfolio-detail-body .mockup-list-desktop dd.left {
    margin-left: -95px;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .portfolio-detail-body .mockup-list-desktop .item {
    width: 318px;
    height: 212px;
  }
}
@media (max-width: 767.98px) {
  .portfolio-detail-body {
    margin-top: -112px;
    padding-top: 180px;
  }
  .portfolio-detail-body .mockup-list {
    max-width: 360px;
    margin: auto;
  }
  .portfolio-detail-body .mockup-list .item {
    margin: 12px;
    border-radius: 12px;
  }
  .portfolio-detail-body .mockup-list-mobile dd {
    margin-right: -67px;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .portfolio-detail-body .mockup-list-mobile .item {
    width: 99px;
    height: 172px;
  }
  .portfolio-detail-body .mockup-list-desktop {
    margin-top: 56px;
  }
  .portfolio-detail-body .mockup-list-desktop dd.right {
    margin-right: -193px;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .portfolio-detail-body .mockup-list-desktop dd.left {
    margin-left: -95px;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .portfolio-detail-body .mockup-list-desktop dd .item {
    width: 225px;
    height: 150px;
  }
}

.portfolio-nav .btn {
  position: fixed;
  z-index: 1600;
}
@media (min-width: 1025px) {
  .portfolio-nav .btn {
    top: 0;
    top: 50%;
    margin-top: -32px;
    width: 64px;
    height: 64px;
    background: #FFF;
    -webkit-box-shadow: 0px 8px 15px rgba(66, 73, 80, 0.05);
            box-shadow: 0px 8px 15px rgba(66, 73, 80, 0.05);
    border-radius: 50%;
  }
  .portfolio-nav .btn-prev {
    left: calc(50% - 408px);
  }
  .portfolio-nav .btn-next {
    right: calc(50% - 408px);
  }
  .portfolio-nav .text {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    vertical-align: middle;
    overflow: hidden;
    text-indent: -9999px;
    overflow: hidden;
    text-align: left;
  }
}
@media (max-width: 1024.98px) {
  .portfolio-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1600;
  }
  .portfolio-nav .btn {
    bottom: 16px;
    height: 40px;
    background: #FFFFFF;
    border: 1px solid #E9EEF4;
    -webkit-box-shadow: 0px 3px 15px rgba(66, 73, 80, 0.05);
            box-shadow: 0px 3px 15px rgba(66, 73, 80, 0.05);
    border-radius: 20px;
    padding: 0 24px;
    font-size: 14px;
    font-weight: bold;
  }
  .portfolio-nav .btn .ico {
    width: 16px;
    height: 16px;
    background-image: url(../images/ico-xs-chevron-right@2x.png);
    background-size: 16px auto;
  }
  .portfolio-nav .btn-prev {
    left: 24px;
  }
  .portfolio-nav .btn-prev .ico {
    margin-left: -8px;
    -webkit-transform: scale(-1);
            transform: scale(-1);
  }
  .portfolio-nav .btn-next {
    right: 24px;
  }
  .portfolio-nav .btn-next .ico {
    margin-right: -8px;
  }
}

/* 회사소개 연혁*/
.history-wrap {
  margin-top: 60px;
  padding-top: 60px;
  margin-bottom: 60px;
  border-top: 1px solid #d1d5db;
}
.history-wrap .title-text {
  margin-bottom: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.history-wrap .title-text .btn-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.history-wrap .title-text .btn-group button {
  padding: 8px;
}
@media (max-width: 1024.98px) {
  .history-wrap {
    padding-top: 40px;
    margin-top: 40px;
  }
}
.history-wrap .yearly-wrap {
  overflow: hidden;
}
.history-wrap .yearly-wrap .slick-list {
  overflow: hidden;
}
.history-wrap .yearly-wrap .slick-slide {
  outline: none;
  overflow: hidden;
}
.history-wrap .yearly-wrap .yearly-area {
  padding-right: 16px;
}
.history-wrap .yearly-wrap .yearly-area .yearly-text {
  margin-bottom: 20px;
  display: inline-block;
  font-size: 24px;
}
.history-wrap .yearly-wrap .yearly-area .yearly-desc {
  margin-bottom: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.history-wrap .yearly-wrap .yearly-area .yearly-desc:last-child {
  margin-bottom: 0;
}
.history-wrap .yearly-wrap .yearly-area .yearly-desc .monthly {
  color: #f54090;
  margin-right: 9px;
}
.history-wrap .yearly-wrap .yearly-area .yearly-desc p {
  display: inline-block;
}
@media (max-width: 767.98px) {
  .history-wrap + .box-inseq {
    padding: 40px 22px;
  }
  .history-wrap .title-text {
    font-size: 25px;
    line-height: 32px;
  }
  .history-wrap .title-text .history-title > p {
    margin-bottom: 8px;
  }
  .history-wrap .title-text .btn-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

/* 회사소개 인증현황*/
.certification-wrapper .tab-menu1 {
  overflow: hidden;
}
.certification-wrapper .title-text {
  margin-bottom: 100px;
}
.certification-wrapper .certi-title {
  margin-bottom: 24px;
  font-family: "Spoqa Han Sans Neo", "Noto Sans KR", "Noto Sans CJK KR", "malgun gothic", sans-serif, Tahoma;
  font-weight: 700;
}
.certification-wrapper .certification-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: -16px -10px;
}
.certification-wrapper .certification-list .certification-item {
  margin: 16px 10px;
  max-height: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 calc(20% - 24px);
          flex: 1 1 calc(20% - 24px);
  width: calc(20% - 24px);
  max-width: calc(20% - 24px);
  margin-bottom: 16px;
  text-align: center;
}
.certification-wrapper .certification-list .certification-item img {
  width: 100%;
  border: 1px solid #e9eef4;
  border-radius: 12px;
}
.certification-wrapper .certification-list .certification-item > strong {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  color: #374151;
}
@media (min-width: 1025px) {
  .certification-wrapper .certi-area + .certi-area {
    margin-top: 100px;
  }
  .certification-wrapper .certi-title {
    font-size: 28px;
  }
}
@media (max-width: 1024.98px) {
  .certification-wrapper .certi-area + .certi-area {
    margin-top: 40px;
  }
  .certification-wrapper .title-text {
    margin-bottom: 24px;
    font-size: 28px;
  }
  .certification-wrapper .certi-title {
    font-size: 18px;
  }
  .certification-wrapper .certification-list .certification-item {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 calc(33.33333% - 25px);
            flex: 1 1 calc(33.33333% - 25px);
    width: calc(33.33333% - 25px);
    max-width: calc(33.33333% - 25px);
  }
  .certification-wrapper .certification-list .certification-item > strong {
    margin-top: 2px;
  }
}
@media (max-width: 767.98px) {
  .certification-wrapper .certification-list .certification-item {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 calc(50% - 25px);
            flex: 1 1 calc(50% - 25px);
    width: calc(50% - 25px);
    max-width: calc(50% - 25px);
  }
}

/* 오시는 길 */
.findway-wrap {
  position: relative;
  height: 608px;
}
.findway-wrap .findway-wraper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  max-width: 48%;
  height: 100%;
}
.findway-wrap .findway-wraper .findway-title {
  margin-bottom: 32px;
}
.findway-wrap .findway-wraper .findway-desc {
  margin-bottom: 48px;
}
.findway-wrap .findway-wraper .findway-desc .text-bolder-style {
  font-weight: 800;
}
.findway-wrap .findway-wraper .public-transport-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 384px;
}
.findway-wrap .findway-wraper .public-transport-wrap .public-transport-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.findway-wrap .findway-wraper .public-transport-wrap .public-transport-info li:nth-child(1) {
  margin-right: 85px;
  margin-bottom: 10px;
}
.findway-wrap .findway-wraper .public-transport-wrap .public-transport-info .info-title {
  margin-bottom: 18px;
  display: block;
}
.findway-wrap .findway-wraper .public-transport-wrap .public-transport-info .subway-number-darkblue {
  background-color: #3358b3;
}
.findway-wrap .findway-wraper .public-transport-wrap .public-transport-info p {
  margin-bottom: 12px;
  color: #7b838c;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.findway-wrap .findway-wraper .public-transport-wrap .public-transport-info p .blue {
  background-color: #6175f5;
}
.findway-wrap .findway-wraper .public-transport-wrap .public-transport-info p .mint {
  background-color: #1cafbc;
}
.findway-wrap .findway-wraper .public-transport-wrap .public-transport-info p .gray {
  background-color: #7b838c;
}
.findway-wrap .findway-wraper .public-transport-wrap .public-transport-info p .darkbronze {
  background-color: #6c7a31;
}
.findway-wrap .findway-wraper .public-transport-wrap .public-transport-info p .green {
  background-color: #47af1b;
}
.findway-wrap .findway-wraper .public-transport-wrap .public-transport-info p .text-ssm {
  font-size: 10px;
  display: inline-block;
  line-height: 2.1;
}
.findway-wrap .findway-wraper .public-transport-wrap .public-transport-info p span {
  border-radius: 10px;
  width: 20px;
  height: 20px;
  color: #fff;
  text-align: center;
  margin-right: 6px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.findway-wrap .findway-wraper .public-transport-wrap .public-transport-info p .info-txt {
  color: #7b838c;
  width: auto;
}
.findway-wrap .findway-wraper .public-transport-wrap .call-center .call-desc {
  margin: 4px 0;
}
.findway-wrap .findway-wraper .public-transport-wrap .call-center .call-desc span {
  margin-right: 24px;
  display: inline-block;
}
.findway-wrap .findway-wraper .map-wrap {
  max-width: 50%;
  position: absolute;
  right: 0;
  top: 0;
  overflow: hidden;
}
.findway-wrap .findway-wraper .map-wrap #map {
  width: 608px;
  height: 608px;
}
@media screen and (max-width: 1260px) {
  .findway-wrap {
    display: block;
    height: auto;
  }
  .findway-wrap .findway-wraper {
    display: block;
    max-width: 100%;
    margin-right: 0;
    padding-right: 0;
  }
  .findway-wrap .findway-wraper .findway-desc {
    margin-top: 32px;
  }
  .findway-wrap .findway-wraper .findway-title {
    max-width: 75%;
  }
  .findway-wrap .findway-wraper .map-wrap {
    position: relative;
    max-width: 100%;
  }
  .findway-wrap .findway-wraper .map-wrap #map {
    max-width: 100%;
    width: 1368px;
    height: 327px;
  }
  .findway-wrap .findway-wraper .public-transport-wrap {
    height: auto;
  }
  .findway-wrap .findway-wraper .public-transport-wrap .public-transport-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .findway-wrap .findway-wraper .public-transport-wrap .public-transport-info .list-info {
    margin-top: 0;
    margin-bottom: 0;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    text-align: left;
  }
  .findway-wrap .findway-wraper .public-transport-wrap .public-transport-info .list-info .info-inner {
    text-align: left;
    display: inline-block;
  }
  .findway-wrap .findway-wraper .public-transport-wrap .public-transport-info li:nth-child(1) {
    margin-right: 0;
    margin-bottom: 0;
  }
  .findway-wrap .findway-wraper .public-transport-wrap .call-center {
    margin-top: 50px;
    border-top: 2px solid #cad1d8;
    padding-top: 50px;
  }
  .findway-wrap .findway-wraper .public-transport-wrap li:nth-child(2) {
    margin-top: 20px;
  }
}
@media (max-width: 767.98px) {
  .findway-wrap .findway-wraper .public-transport-wrap .public-transport-info {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .findway-wrap .findway-wraper .public-transport-wrap .public-transport-info .list-info {
    text-align: left;
  }
  .findway-wrap .findway-wraper .public-transport-wrap .public-transport-info li:nth-child(1) {
    margin-bottom: 32px;
  }
  .findway-wrap .findway-title {
    font-size: 28px;
  }
}

/* 비지니스 페이지 */
.business-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 -12px;
}
.business-wrap li {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 25%;
          flex: 1 1 25%;
  margin: 40px 10px 0;
  max-width: 286px;
}
.business-wrap li img {
  max-width: 54px;
  padding: 12px;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  background-color: #fff;
  border-radius: 16px;
  border: 0.5px solid #e9eef4;
  -webkit-box-shadow: 0px 5px 20px rgba(66, 73, 80, 0.08);
          box-shadow: 0px 5px 20px rgba(66, 73, 80, 0.08);
}
.business-wrap li .img-operation {
  max-width: 62px;
  padding: 8px;
}
.business-wrap li .wrap-cms-btn {
  width: 100%;
}
.business-wrap li .wrap-cms-btn i {
  margin-bottom: 4px;
}
.business-wrap li p {
  color: #1f2937;
  margin: 4px 0;
}
.business-wrap li p:before {
  content: "";
  background-color: #cad1d8;
  width: 4px;
  height: 4px;
  text-align: center;
  border-radius: 2px;
  display: inline-block;
  margin-right: 8px;
  margin-bottom: 4px;
}
.business-wrap li .tag-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 40px;
  margin-bottom: 10px;
}
.business-wrap li .tag-list span {
  display: inline-block;
  background-color: #e5e7eb;
  padding: 6px 8px;
  margin: 4px 0;
  border-radius: 15px;
  font-size: 11px;
  margin-right: 8px;
  font-weight: 500;
}
.business-wrap li strong {
  display: block;
  margin: 30px 0 16px;
  font-weight: 700;
  font-size: 24px;
  color: #1f2937;
}
.business-wrap li a {
  padding: 6px;
  display: inline-block;
  color: #4b5563;
}
@media (max-width: 1024.98px) {
  .business-wrap li {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 40%;
            flex: 1 1 40%;
    max-width: none;
  }
}
@media (max-width: 767.98px) {
  .business-wrap {
    display: block;
  }
  .business-wrap li {
    margin-top: 24px;
    max-width: auto;
    width: auto;
  }
  .business-wrap li img {
    max-width: 38px;
    padding: 12px;
  }
  .business-wrap li .img-operation {
    max-width: 46px;
    padding: 8px;
  }
  .business-wrap li:nth-child(n+2) {
    padding-top: 8px;
  }
  .business-wrap li strong {
    margin-top: 20px;
  }
  .business-wrap li .tag-list {
    margin-top: 20px;
  }
}

.business-title {
  color: #171f30;
}
@media (max-width: 1024.98px) {
  .business-title {
    font-size: 28px;
  }
}

/* CMS page */
.section-cms-build {
  background: #fff;
}
.section-cms-build .obj-visual {
  width: 486px;
  height: auto;
  top: 65px;
  left: 55.5%;
}
.section-cms-build .label {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 100px;
  border: 1px solid #E5E7EB;
  background: #F3F4F6;
  font-size: 14px;
  font-weight: 500;
  color: #1F2937;
}
.section-cms-build .menu-info {
  margin-top: 12px;
}
@media (max-width: 1024.98px) {
  .section-cms-build {
    padding-top: 80px;
    text-align: left;
  }
  .section-cms-build .sidebar-title {
    letter-spacing: -0.04em;
    font-size: 28px;
    line-height: 1.4em;
  }
  .section-cms-build h2 span {
    font-size: 25px;
  }
  .section-cms-build .obj-visual {
    max-width: 300px;
    top: 80px;
    margin-bottom: 32px;
  }
  .section-cms-build .label {
    padding: 6px 12px;
    font-size: 12px;
  }
  .section-cms-build .menu-info {
    word-break: break-all;
    font-size: 14px;
  }
}

.section-advantages {
  background-color: #F7F9FC;
  padding: 10px 0;
}
.section-advantages .neibis-wrap {
  margin-top: 100px;
  text-align: center;
}
.section-advantages .neibis-wrap .function-title {
  font-size: 36px;
  line-height: 1.2;
}
.section-advantages .neibis-wrap .sub-text {
  margin-top: 12px;
  font-weight: 500;
  color: #374151;
}
@media (max-width: 1024.98px) {
  .section-advantages .neibis-wrap {
    margin-top: 60px;
  }
  .section-advantages .neibis-wrap .function-title {
    font-size: 18px;
  }
  .section-advantages .neibis-wrap .sub-text {
    font-size: 14px;
  }
}
.section-advantages .tag-soon {
  display: inline-block;
  padding: 8px 17px;
  min-width: 150px;
  height: 41px;
  margin-bottom: 12px;
  background: #000;
  border-radius: 20px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: #fff;
}
@media (max-width: 1024.98px) {
  .section-advantages .tag-soon {
    height: 37px;
    font-size: 16px;
  }
}
.section-advantages .neibis-content {
  max-width: 1200px;
}
@media (min-width: 1025px) {
  .section-advantages .neibis-content {
    margin-top: 40px;
    margin-bottom: 100px;
  }
}
@media (max-width: 1024.98px) {
  .section-advantages .neibis-content {
    margin-top: 24px;
    margin-bottom: 58px;
  }
}
.section-advantages .neibis-slider-for {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
.section-advantages .neibis-slider-for .item {
  vertical-align: middle;
  border-radius: 20px;
}
.section-advantages .neibis-slider-for .item img {
  position: static;
  width: 720px;
  max-height: 404px;
  border-radius: 20px;
  margin: 0 auto;
  vertical-align: top;
}
.section-advantages .neibis-slider-for:not(.slick-slider) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}
.section-advantages .neibis-slider-for:not(.slick-slider) .item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 100%;
  text-align: center;
}
@media (max-width: 1024.98px) {
  .section-advantages .neibis-slider-for {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 24px;
  }
}
.section-advantages .box-neibis {
  max-width: 1200px;
  max-width: 720px;
  max-height: 236px;
  margin: 0 auto;
  margin-top: 20px;
}
.section-advantages .neibis-slider-nav {
  position: relative;
}
.section-advantages .neibis-slider-nav .slick-list {
  padding: 0 60px 0 0;
  overflow: hidden;
}
.section-advantages .neibis-slider-nav::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  content: "";
  width: 150px;
  border-right: 1px solid #F3F4F6;
  background: -webkit-gradient(linear, right top, left top, from(#F3F4F6), to(rgba(243, 244, 246, 0)));
  background: linear-gradient(-90deg, #F3F4F6 0%, rgba(243, 244, 246, 0) 100%);
  pointer-events: none;
}
.section-advantages .neibis-slider-nav .item {
  position: relative;
  vertical-align: middle;
}
.section-advantages .neibis-slider-nav .item img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  max-width: 320px;
  height: 100%;
  border-radius: 20px;
  -o-object-fit: cover;
     object-fit: cover;
}
.section-advantages .neibis-slider-nav.slick-slider .slick-track {
  margin: 0;
}
.section-advantages .neibis-slider-nav.slick-slider .slick-arrow {
  position: absolute;
  top: 50%;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 48px;
  height: 48px;
  text-indent: -9999px;
  text-align: left;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  overflow: hidden;
  background: #fff;
  border: 1px solid #A6ADB9;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.section-advantages .neibis-slider-nav.slick-slider .slick-prev {
  left: -72px;
  background-image: url(../images/ico-chevron-lg-left-gray@2x.png);
  background-size: 32px auto;
}
.section-advantages .neibis-slider-nav.slick-slider .slick-next {
  right: -72px;
  background-image: url(../images/ico-chevron-lg-right-gray@2x.png);
  background-size: 32px auto;
}
.section-advantages .neibis-slider-nav.slick-slider .slick-slide {
  cursor: pointer;
}
.section-advantages .neibis-slider-nav.slick-slider .item {
  padding-top: 56.83%;
}
@media (min-width: 1025px) {
  .section-advantages .neibis-slider-nav.slick-slider .slick-list {
    margin: 0 0 0 -10px;
  }
  .section-advantages .neibis-slider-nav.slick-slider .slick-slide {
    margin: 0 10px;
  }
}
@media (max-width: 1024.98px) {
  .section-advantages .neibis-slider-nav::after {
    content: none;
  }
}
.section-advantages .advantages-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  text-align: center;
  margin: -12px;
}
.section-advantages .advantages-list li {
  background-color: transparent;
  height: auto;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 25%;
          flex: 1 1 25%;
  width: 25%;
  margin: 12px;
  padding: 24px 8px;
  font-weight: bold;
  line-height: 16px;
}
.section-advantages .advantages-list li .artwork {
  display: block;
  margin: auto;
  width: 72px;
}
.section-advantages .advantages-list li img {
  max-width: 72px;
}
.section-advantages .advantages-list li strong {
  font-size: 16px;
  display: block;
  margin-top: 16px;
  font-weight: 700;
}
.section-advantages .advantages-list li p {
  font-size: 14px;
  margin-top: 8px;
  font-weight: 500;
}
@media (max-width: 767.98px) {
  .section-advantages {
    padding: 40px 0;
  }
  .section-advantages .advantages-list {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin: -4px;
  }
  .section-advantages .advantages-list li {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(50% - 8px);
    margin: 4px;
    padding: 16px 8px 20px;
  }
  .section-advantages .advantages-list .artwork {
    width: 48px;
  }
}

.section-portfolio {
  padding-top: 168px;
  padding-bottom: 216px;
  background: #fff;
}
@media (max-width: 1024.98px) {
  .section-portfolio {
    padding: 120px 0;
  }
}

.section-reason {
  background-color: #32363C;
  color: #fff;
  padding: 96px 0 80px;
}
.section-reason .reason-wrap .title-text {
  display: block;
  text-align: center;
  font-size: 37px;
  margin-bottom: 64px;
  font-weight: 700;
}
.section-reason .reason-wrap ul {
  padding: 0 85px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
}
.section-reason .reason-wrap ul li {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 45.5%;
          flex: 1 1 45.5%;
  padding: 40px 0;
  border-top: 1px solid #575B60;
  margin-right: 40px;
}
.section-reason .reason-wrap ul li img {
  max-width: 48px;
}
.section-reason .reason-wrap ul li strong {
  display: block;
  font-size: 25px;
  margin-bottom: 16px;
}
@media (max-width: 1024.98px) {
  .section-reason .reason-wrap .title-text {
    line-height: 48.1px;
  }
  .section-reason .reason-wrap ul {
    padding: 0;
  }
  .section-reason .reason-wrap ul li {
    margin-right: 0;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 50.5%;
            flex: 1 1 50.5%;
  }
  .section-reason .container, .section-reason .sticky-container {
    padding: 0 32px;
  }
}

.section-function {
  background-color: #F7F9FC;
  padding: 0;
  padding-bottom: 80px;
}
.section-function .function-title {
  font-size: 37px;
  color: #484E57;
  text-align: center;
  font-weight: 700;
  padding: 80px 0 48px;
}
.section-function ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.section-function ul li {
  margin: 0 12px;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 25%;
          flex: 1 1 25%;
  background-color: #fff;
  text-align: center;
  border-radius: 12px;
  padding: 37px 0 24px;
}
.section-function ul li img {
  max-width: 72px;
}
.section-function ul li p {
  margin-top: 22px;
  color: #7B838C;
}
.section-function ul li p strong {
  color: #484E57;
}
@media (max-width: 1024.98px) {
  .section-function ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
  }
  .section-function ul li {
    margin: 0 0 24px;
  }
  .section-function .container, .section-function .sticky-container {
    padding: 0 24px;
  }
}

.section-type-1 {
  background-color: #fff;
}
.section-type-1 .section-header .section-title {
  margin-bottom: 16px;
}
.section-type-1 .section-header .section-desc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: top;
      -ms-flex-align: top;
          align-items: top;
  margin-top: 8px;
}
.section-type-1 .section-header .section-desc span {
  width: 4px;
  height: 4px;
  background-color: #CAD1D8;
  display: inline-block;
  position: relative;
  top: 8px;
  margin-right: 8px;
  border-radius: 4px;
}
.section-type-1 img {
  max-width: 556px;
}
@media (min-width: 1025px) {
  .section-type-1 .container, .section-type-1 .sticky-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .section-type-1 .section-header {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 503px;
            flex: 1 1 503px;
    width: 503px;
    max-width: 503px;
  }
  .section-type-1 .section-body {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 608px;
            flex: 1 1 608px;
    width: 608px;
    text-align: right;
  }
  .section-type-1 .section-body img {
    width: 608px;
  }
}
@media (max-width: 1024.98px) {
  .section-type-1 {
    padding-top: 80px;
    padding-bottom: 32px;
    text-align: center;
  }
  .section-type-1 .section-header {
    text-align: left;
  }
  .section-type-1 .section-body {
    margin: 32px -24px 0;
  }
  .section-type-1 .artwork {
    width: 375px;
  }
  .section-type-1 img {
    max-width: 100%;
  }
}

.section-type-2 {
  background-color: #F7F9FC;
}
.section-type-2 .section-header .section-title {
  margin-bottom: 16px;
}
.section-type-2 .section-header .section-desc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: top;
      -ms-flex-align: top;
          align-items: top;
  margin-top: 8px;
}
.section-type-2 .section-header .section-desc span {
  width: 4px;
  height: 4px;
  background-color: #CAD1D8;
  display: inline-block;
  position: relative;
  top: 8px;
  margin-right: 8px;
  border-radius: 4px;
}
.section-type-2 .channel-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
}
.section-type-2 .channel-list li + li {
  margin-left: 24px;
}
.section-type-2 .channel-list .icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 44px;
  height: 44px;
  background: #E9EEF4;
  border-radius: 8px;
}
@media (min-width: 1025px) {
  .section-type-2 .container, .section-type-2 .sticky-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .section-type-2 .section-header {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 503px;
            flex: 1 1 503px;
    width: 503px;
    max-width: 503px;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .section-type-2 .section-body {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 608px;
            flex: 1 1 608px;
    width: 608px;
  }
}
@media (max-width: 1024.98px) {
  .section-type-2 {
    padding-top: 80px;
    padding-bottom: 32px;
  }
  .section-type-2 .channel-list {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .section-type-2 .artwork {
    width: 375px;
  }
  .section-type-2 .section-body {
    margin: 32px -24px 0;
  }
}

.support-link {
  padding: 78px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #F54090;
  color: #fff;
  line-height: 48px;
}
.support-link .support-desc {
  width: 100%;
  text-align: center;
  font-size: 37px;
  font-weight: 700;
}
.support-link .support-desc p {
  margin-bottom: 32px;
}
.support-link .support-desc a {
  color: #F54090;
  background-color: #fff;
  font-weight: 700;
}

/* 오류 페이지 */
.error-wrap {
  max-width: 100%;
  max-height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  height: var(--app-height, 100vh);
}
.error-wrap strong {
  display: block;
  margin-top: 72px;
}
@media (max-width: 1024.98px) {
  .error-wrap strong {
    margin-top: 32px;
  }
}

/* 파일 업로드 페이지 */
.file-upload-wrap {
  margin: 0 auto;
  max-width: 560px;
  padding: 24px;
}
.file-upload-wrap .btn_area .btn + .btn {
  margin-left: 4px;
}
/* 온텍트 서포터즈 */
/* 온텍트 서포터즈 */
.section-ontact-main {
  min-height: 624px;
  background-image: url(../images/img-ontact-logoitem@2x.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #ffffff;
}
.section-ontact-main .container, .section-ontact-main .sticky-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  min-height: 624px;
  height: 624px;
}
.section-ontact-main .container .section-main-title p, .section-ontact-main .sticky-container .section-main-title p {
  font-size: 18px;
}
.section-ontact-main .container .section-main-title p .border-line-type1, .section-ontact-main .sticky-container .section-main-title p .border-line-type1 {
  position: relative;
  z-index: 1;
}
.section-ontact-main .container .section-main-title p .border-line-type1:before, .section-ontact-main .sticky-container .section-main-title p .border-line-type1:before {
  content: "";
  position: absolute;
  bottom: 0;
  display: block;
  background-color: #FFE4F0;
  height: 8px;
  width: 85px;
  z-index: -1;
  left: 0;
}
.section-ontact-main .container .section-main-title p .border-line-type2, .section-ontact-main .sticky-container .section-main-title p .border-line-type2 {
  position: relative;
  z-index: 1;
}
.section-ontact-main .container .section-main-title p .border-line-type2:before, .section-ontact-main .sticky-container .section-main-title p .border-line-type2:before {
  content: "";
  position: absolute;
  bottom: 0;
  display: block;
  background-color: #FFE4F0;
  height: 8px;
  width: 101px;
  z-index: -1;
  left: 0;
}
.section-ontact-main .container .section-main-title h2, .section-ontact-main .sticky-container .section-main-title h2 {
  font-size: 48px;
}
.section-ontact-main .container .artwork, .section-ontact-main .sticky-container .artwork {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.section-ontact-main .container .artwork .artwork-list, .section-ontact-main .sticky-container .artwork .artwork-list {
  margin: 0 auto;
  min-height: 624px;
  max-width: 1024px;
  position: relative;
}
.section-ontact-main .container .artwork .bg-ontact, .section-ontact-main .sticky-container .artwork .bg-ontact {
  width: 333px;
}
.section-ontact-main .container .artwork .ontact-img1, .section-ontact-main .sticky-container .artwork .ontact-img1 {
  position: absolute;
  left: 50px;
  top: 85px;
}
.section-ontact-main .container .artwork .ontact-img2, .section-ontact-main .sticky-container .artwork .ontact-img2 {
  position: absolute;
  left: 500px;
  top: 49px;
}
.section-ontact-main .container .artwork .ontact-img3, .section-ontact-main .sticky-container .artwork .ontact-img3 {
  position: absolute;
  left: 750px;
  top: 245px;
  width: 355px;
}
.section-ontact-main .container .artwork .ontact-img4, .section-ontact-main .sticky-container .artwork .ontact-img4 {
  position: absolute;
  left: 450px;
  top: 425px;
}
.section-ontact-main .container .artwork .ontact-img5, .section-ontact-main .sticky-container .artwork .ontact-img5 {
  position: absolute;
  left: 35px;
  top: 370px;
  width: 349px;
}
@media (max-width: 1024.98px) {
  .section-ontact-main {
    background-image: none;
  }
  .section-ontact-main .container, .section-ontact-main .sticky-container {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    min-width: auto;
    padding: 0;
    height: 652px;
  }
  .section-ontact-main .container .section-main-title, .section-ontact-main .sticky-container .section-main-title {
    margin: 80px 0 16px;
  }
  .section-ontact-main .container .section-main-title h2, .section-ontact-main .sticky-container .section-main-title h2 {
    font-size: 37px;
  }
  .section-ontact-main .container .artwork, .section-ontact-main .sticky-container .artwork {
    background-image: url(../images/img-md-ontact-logoitem@2x.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    min-height: 465px;
    width: 100%;
  }
  .section-ontact-main .container .artwork .artwork-list, .section-ontact-main .sticky-container .artwork .artwork-list {
    position: relative;
    min-height: inherit;
    max-width: 235px;
    margin: 0 auto;
  }
  .section-ontact-main .container .artwork .ontact-img6, .section-ontact-main .sticky-container .artwork .ontact-img6 {
    position: absolute;
    left: -50px;
    top: 45px;
    width: 265px;
  }
  .section-ontact-main .container .artwork .ontact-img7, .section-ontact-main .sticky-container .artwork .ontact-img7 {
    position: absolute;
    left: 30px;
    top: 175px;
    max-width: 265px;
  }
  .section-ontact-main .container .artwork .ontact-img8, .section-ontact-main .sticky-container .artwork .ontact-img8 {
    position: absolute;
    left: -50px;
    top: 295px;
    max-width: 265px;
  }
}
@media (max-width: 767.98px) {
  .section-ontact-main {
    min-width: 375px;
  }
  .section-ontact-main .container, .section-ontact-main .sticky-container {
    min-width: 375px;
  }
  .section-ontact-main .container .section-main-title h2, .section-ontact-main .sticky-container .section-main-title h2 {
    font-size: 37px;
  }
  .section-ontact-main .container .artwork .ontact-img6, .section-ontact-main .sticky-container .artwork .ontact-img6 {
    position: absolute;
    left: -30px;
    top: 34px;
  }
  .section-ontact-main .container .artwork .ontact-img7, .section-ontact-main .sticky-container .artwork .ontact-img7 {
    position: absolute;
    left: 0;
    top: 175px;
  }
  .section-ontact-main .container .artwork .ontact-img8, .section-ontact-main .sticky-container .artwork .ontact-img8 {
    position: absolute;
    left: -30px;
    top: 305px;
  }
}

/* UIX 전문가 */
.section-uix-expert {
  padding: 80px 0;
}
.section-uix-expert h2 {
  text-align: center;
}
.section-uix-expert .title-desc {
  text-align: center;
  margin-top: 16px;
}
.section-uix-expert ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: -12px;
  margin-top: 64px;
}
.section-uix-expert ul li {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 397px;
          flex: 1 1 397px;
  margin: 12px;
  text-align: center;
}
.section-uix-expert ul li img {
  max-width: 80px;
  margin-bottom: 40px;
}
.section-uix-expert ul li strong {
  display: block;
  text-align: center;
  margin-bottom: 16px;
}
.section-uix-expert ul li p {
  text-align: center;
}
@media (max-width: 1024.98px) {
  .section-uix-expert ul {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .section-uix-expert ul li {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
    margin-top: 48px;
  }
  .section-uix-expert ul li:first-child {
    margin-top: 0;
  }
  .section-uix-expert ul li img {
    margin-bottom: 20px;
  }
}
@media (max-width: 767.98px) {
  .section-uix-expert .section-body ul li strong {
    font-size: 20px;
  }
  .section-uix-expert .section-body ul li img {
    margin-bottom: 20px;
  }
}

.section-supporters-help {
  background-color: #ffffff;
  padding: 80px 0;
}
.section-supporters-help h2 {
  text-align: center;
}
.section-supporters-help ul {
  margin: 80px 0 0 105px;
}
.section-supporters-help ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 38px;
  font-size: 20px;
}
.section-supporters-help ul li .circle-icon {
  width: 40px;
  height: 40px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  background: linear-gradient(333.51deg, #F54090 16.25%, #FF80B8 96%, #FF64A8 96%);
  -webkit-box-shadow: 0px 8px 15px rgba(66, 73, 80, 0.03);
          box-shadow: 0px 8px 15px rgba(66, 73, 80, 0.03);
  border-radius: 20px;
  margin-right: 32px;
  margin-bottom: 38px;
}
.section-supporters-help ul li p {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  border-style: solid;
  -o-border-image: linear-gradient(90deg, #CAD1D8 0%, rgba(202, 209, 216, 0) 96.43%);
     border-image: -webkit-gradient(linear, left top, right top, from(#CAD1D8), color-stop(96.43%, rgba(202, 209, 216, 0)));
     border-image: linear-gradient(90deg, #CAD1D8 0%, rgba(202, 209, 216, 0) 96.43%);
  border-image-width: 0 0 1px 0;
  border-image-slice: 1;
  padding-bottom: 38px;
}
.section-supporters-help ul li .bb-no-line {
  border: 0;
}
@media (max-width: 1024.98px) {
  .section-supporters-help ul {
    max-width: 500px;
    margin: 64px auto 0;
  }
  .section-supporters-help ul li {
    margin-bottom: 24px;
  }
  .section-supporters-help ul li:last-child {
    margin: 0;
  }
  .section-supporters-help ul li p {
    font-size: 16px;
    padding-bottom: 24px;
  }
  .section-supporters-help ul li .circle-icon {
    margin-bottom: 24px;
    margin-right: 20px;
  }
}
@media (max-width: 767.98px) {
  .section-supporters-help h2 {
    text-align: left;
  }
  .section-supporters-help ul li .circle-icon {
    max-width: 32px;
    max-height: 32px;
    font-size: 14px;
    margin-right: 20px;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 50px;
            flex: 1 1 50px;
  }
  .section-supporters-help ul li .circle-icon p {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
  }
}

.img-resize {
  max-width: 556px;
}

/* 온텍트 서포터즈 */
.section-process {
  padding: 120px 0;
}
.section-process .process-content {
  margin-top: 80px;
}
.section-process .process-content ul {
  display: table;
  margin: -290px;
  table-layout: fixed;
  border-collapse: separate;
  width: calc(100% + 580px);
  border-spacing: 290px;
}
.section-process .process-content ul .item-first:after {
  content: "";
  background-image: url(../images/img-long-arrow@2x.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  width: 760px;
  height: 12px;
  display: block;
  position: absolute;
  top: calc(50% + 4px);
  left: 240px;
}
.section-process .process-content ul li {
  display: table-cell;
  border-radius: 50%;
  -webkit-box-shadow: 0px 10px 20px rgba(72, 78, 87, 0.08);
          box-shadow: 0px 10px 20px rgba(72, 78, 87, 0.08);
  text-align: center;
  width: 220px;
  max-width: 100%;
  height: 220px;
  max-height: 100%;
  vertical-align: middle;
  position: relative;
}
.section-process .process-content ul li strong {
  border-bottom: 1px solid #F54090;
  font-size: 18px;
  color: #F54090;
}
.section-process .process-content ul li .text-pink {
  color: #F54090;
}
.section-process .process-content ul li .ontact-desc-left {
  position: absolute;
  right: -235px;
  top: 61px;
}
.section-process .process-content ul li .ontact-desc-right {
  position: absolute;
  right: -263px;
  top: 61px;
}
.section-process .process-content ul li .ontact-list-left {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: -3px;
  max-width: 150px;
  bottom: -25px;
  right: -220px;
}
.section-process .process-content ul li .ontact-list-left span {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  margin: 3px;
}
.section-process .process-content ul li .ontact-list-left span img {
  max-width: 40px;
}
.section-process .process-content ul li .ontact-list-right {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: -3px;
  max-width: 150px;
  bottom: 28px;
  right: -190px;
}
.section-process .process-content ul li .ontact-list-right span {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  margin: 3px;
}
.section-process .process-content ul li .ontact-list-right span img {
  max-width: 40px;
}
.section-process .process-content ul .bg-pink-type1 {
  background-color: #FCDFEC;
}
.section-process .process-content ul .bg-pink-type2 {
  background-color: #FA7FB5;
  color: #ffffff;
}
.section-process .process-content ul .bg-pink-type2 strong {
  color: #ffffff;
  border-bottom: 1px solid #ffffff;
}
.section-process .process-content ul .bg-pink-type3 {
  background-color: #F54090;
  color: #ffffff;
}
.section-process .process-content ul .bg-pink-type3 strong {
  color: #ffffff;
  border-bottom: 1px solid #ffffff;
}
@media screen and (max-width: 1320px) {
  .section-process .process-content {
    margin-top: 64px;
  }
  .section-process .process-content ul {
    border-spacing: 0;
    margin: 0 auto;
    width: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .section-process .process-content ul li {
    display: block;
    margin-top: 180px;
    padding: 36px 38px 40px;
    overflow: visible;
  }
  .section-process .process-content ul li:first-child {
    margin-top: 0;
  }
  .section-process .process-content ul li .ontact-desc-left {
    right: auto;
    left: -30px;
    top: auto;
    bottom: -140px;
    width: 120px;
    padding: 0 10px;
  }
  .section-process .process-content ul li .ontact-list-left {
    max-width: 92px;
    right: -10px;
    bottom: -160px;
  }
  .section-process .process-content ul li .ontact-list-left span {
    height: 40px;
  }
  .section-process .process-content ul li .ontact-desc-right {
    right: auto;
    left: -30px;
    bottom: -130px;
    top: auto;
    width: 120px;
  }
  .section-process .process-content ul li .ontact-list-right {
    right: -10px;
    bottom: -110px;
  }
  .section-process .process-content ul .item-first:after {
    left: calc(50% - 2px);
    top: 240px;
    background-image: url(../images/img-md-arrow@2x.png);
    width: 12px;
    height: 540px;
  }
}
@media (max-width: 767.98px) {
  .section-process {
    padding: 80px 0;
  }
}

/* 업무현황 대시보드 */
.section-title-left {
  background-color: #fff;
}
.section-title-left .bb-no-line {
  border-bottom: 0 !important;
}
.section-title-left .container, .section-title-left .sticky-container {
  padding: 0 64px;
}
.section-title-left .section-header .section-title {
  margin-bottom: 16px;
}
.section-title-left .section-header .text-secondary {
  color: #A4ACB7;
}
.section-title-left .section-header .section-desc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: top;
      -ms-flex-align: top;
          align-items: top;
  margin-top: 0;
}
.section-title-left .section-header .section-desc span {
  width: 4px;
  height: 4px;
  background-color: #CAD1D8;
  display: inline-block;
  position: relative;
  top: 8px;
  margin-right: 8px;
  border-radius: 4px;
}
.section-title-left img {
  max-width: 556px;
}
@media (min-width: 1025px) {
  .section-title-left .container, .section-title-left .sticky-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .section-title-left .section-header {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 503px;
            flex: 1 1 503px;
    width: 503px;
    max-width: 503px;
  }
  .section-title-left .section-body {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 608px;
            flex: 1 1 608px;
    width: 608px;
    text-align: right;
  }
  .section-title-left .section-body img {
    width: 608px;
  }
}
@media (max-width: 1024.98px) {
  .section-title-left {
    padding-top: 80px;
    padding-bottom: 32px;
    text-align: center;
  }
  .section-title-left .section-header {
    text-align: left;
  }
  .section-title-left .section-body {
    margin: 32px -24px 0;
  }
  .section-title-left .section-body img {
    max-width: 375px;
  }
  .section-title-left .artwork {
    width: 375px;
  }
}
@media (max-width: 767.98px) {
  .section-title-left {
    padding: 0;
  }
  .section-title-left .container, .section-title-left .sticky-container {
    padding: 40px 0;
    margin: 0 24px;
    border-bottom: 1px solid #CAD1D8;
  }
  .section-title-left .container .section-header .m-icon-img, .section-title-left .sticky-container .section-header .m-icon-img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 20px;
  }
  .section-title-left .container .section-header .m-icon-img .icon-item, .section-title-left .sticky-container .section-header .m-icon-img .icon-item {
    padding: 12px;
    background-color: #ffffff;
    border-radius: 100px;
    border: 1px solid #E9EEF4;
    -webkit-filter: drop-shadow(0px 8px 15px rgba(66, 73, 80, 0.03));
            filter: drop-shadow(0px 8px 15px rgba(66, 73, 80, 0.03));
    max-width: 48px;
    max-height: 48px;
  }
  .section-title-left .container .section-header .m-icon-img .icon-item img, .section-title-left .sticky-container .section-header .m-icon-img .icon-item img {
    max-width: 24px;
  }
  .section-title-left .container .section-header .section-title, .section-title-left .sticky-container .section-header .section-title {
    font-size: 25px;
    margin-bottom: 0;
  }
  .section-title-left .container .section-body, .section-title-left .sticky-container .section-body {
    margin: 0;
  }
  .section-title-left .container .section-body img, .section-title-left .sticky-container .section-body img {
    display: none;
  }
}

/* Git 기반 PMS 업무 시스템 */
.section-title-right {
  background-color: #F7F9FC;
}
.section-title-right .container, .section-title-right .sticky-container {
  padding: 0 64px;
}
.section-title-right .section-header .section-title {
  margin-bottom: 16px;
}
.section-title-right .section-header .section-desc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: top;
      -ms-flex-align: top;
          align-items: top;
  margin-top: 0;
}
.section-title-right .section-header .section-desc span {
  width: 4px;
  height: 4px;
  background-color: #CAD1D8;
  display: inline-block;
  position: relative;
  top: 8px;
  margin-right: 8px;
  border-radius: 4px;
}
.section-title-right .channel-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
}
.section-title-right .channel-list li + li {
  margin-left: 24px;
}
.section-title-right .channel-list .icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 44px;
  height: 44px;
  background: #E9EEF4;
  border-radius: 8px;
}
@media (min-width: 1025px) {
  .section-title-right .container, .section-title-right .sticky-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .section-title-right .section-header {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 503px;
            flex: 1 1 503px;
    width: 503px;
    max-width: 503px;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .section-title-right .section-body {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 608px;
            flex: 1 1 608px;
    width: 608px;
  }
}
@media (max-width: 1024.98px) {
  .section-title-right {
    padding-top: 80px;
    padding-bottom: 32px;
  }
  .section-title-right .channel-list {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .section-title-right .artwork {
    width: 375px;
  }
  .section-title-right .section-body {
    margin: 32px -24px 0;
    text-align: center;
  }
  .section-title-right .section-body img {
    max-width: 375px;
  }
}
@media (max-width: 767.98px) {
  .section-title-right {
    background-color: #F7F9FC !important;
    padding: 0;
  }
  .section-title-right .container, .section-title-right .sticky-container {
    padding: 40px 0;
    margin: 0 24px;
    border-bottom: 1px solid #CAD1D8;
  }
  .section-title-right .container .section-header .m-icon-img, .section-title-right .sticky-container .section-header .m-icon-img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 20px;
  }
  .section-title-right .container .section-header .m-icon-img .icon-item, .section-title-right .sticky-container .section-header .m-icon-img .icon-item {
    padding: 12px;
    background-color: #ffffff;
    border-radius: 100px;
    border: 1px solid #E9EEF4;
    -webkit-filter: drop-shadow(0px 8px 15px rgba(66, 73, 80, 0.03));
            filter: drop-shadow(0px 8px 15px rgba(66, 73, 80, 0.03));
    max-width: 48px;
    max-height: 48px;
  }
  .section-title-right .container .section-header .m-icon-img .icon-item img, .section-title-right .sticky-container .section-header .m-icon-img .icon-item img {
    max-width: 24px;
  }
  .section-title-right .container .section-header .m-icon-img .icon-type, .section-title-right .sticky-container .section-header .m-icon-img .icon-type {
    padding: 10px;
  }
  .section-title-right .container .section-header .m-icon-img .icon-type img, .section-title-right .sticky-container .section-header .m-icon-img .icon-type img {
    max-width: 26px;
  }
  .section-title-right .container .section-header .section-title, .section-title-right .sticky-container .section-header .section-title {
    font-size: 25px;
    margin-bottom: 0;
  }
  .section-title-right .container .section-body, .section-title-right .sticky-container .section-body {
    margin: 0;
  }
  .section-title-right .container .section-body img, .section-title-right .sticky-container .section-body img {
    display: none;
  }
}

/* 온텍트 서포터즈 */
/* cms-build */
@media (max-width: 1024.98px) {
  .section-cms-build {
    padding-bottom: 0;
  }
  .section-cms-build .obj-bg-area {
    margin: 16px -24px -8px;
  }
}
/* uix framework section */
.section-inuix-intro {
  padding: 80px 0;
  background-color: #fff;
}
.section-inuix-intro h2 {
  margin-bottom: 48px;
}
.section-inuix-intro ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 48px;
  margin: -16px;
}
.section-inuix-intro ul li {
  margin: 16px;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 33.33%;
          flex: 1 1 33.33%;
  background-color: #ffffff;
  padding: 40px 32px 32px 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-radius: 12px;
  background-color: #F7F9FC;
  -webkit-box-shadow: 0px 5px 20px rgba(66, 73, 80, 0.03);
          box-shadow: 0px 5px 20px rgba(66, 73, 80, 0.03);
  border: 1px solid #E9EEF4;
}
.section-inuix-intro ul li p {
  margin-top: 16px;
  word-break: break-all;
}
.section-inuix-intro ul li .cont-desc-img {
  margin-top: 16px;
  vertical-align: bottom;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.section-inuix-intro ul li .cont-desc-img img {
  width: 72px;
}
@media (min-width: 768px) and (max-width: 1024.98px) {
  .section-inuix-intro .container, .section-inuix-intro .sticky-container {
    padding: 0 64px;
  }
}
@media (max-width: 1024.98px) {
  .section-inuix-intro ul {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin: -12px;
  }
  .section-inuix-intro ul strong {
    font-size: 25px;
  }
  .section-inuix-intro ul li {
    margin: 12px;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 25%;
            flex: 1 1 25%;
    padding: 32px 24px 24px 24px;
  }
}
@media (max-width: 767.98px) {
  .section-inuix-intro ul li {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
  }
  .section-inuix-intro ul li .section-cont strong {
    font-size: 20px;
  }
  .section-inuix-intro ul li .section-cont .text-gray {
    margin-top: 3px;
  }
}

/* uix framework method */
.section-inuix-method {
  background: #32363C;
  color: #ffffff;
  padding: 120px 0;
}
.section-inuix-method .no-line {
  border: 0 !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
.section-inuix-method .cont-step {
  border: 3px solid #F54090;
  border-radius: 16px;
  -webkit-box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.25);
          box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.25);
  background-color: #3B3F45;
  position: relative;
  margin-top: 104px;
  padding: 48px 40px 56px;
}
.section-inuix-method .cont-step .cont-title {
  padding: 12px 20px;
  display: inline-block;
  border-radius: 100px;
  position: absolute;
  left: 40px;
  top: -24px;
  background-color: #474D56;
  font-size: 20px;
}
.section-inuix-method .cont-step .cont-desc-step {
  overflow: hidden;
  margin-top: 48px;
}
.section-inuix-method .cont-step .cont-desc-step ul {
  border-spacing: 45px;
  border-collapse: separate;
  margin: -45px;
  display: table;
  table-layout: fixed;
  width: calc(100% + 90px);
}
.section-inuix-method .cont-step .cont-desc-step ul li {
  padding: 16px 12px;
  background-color: #FA7FB5;
  border-radius: 8px;
  position: relative;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.section-inuix-method .cont-step .cont-desc-step .step-first li:after {
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  right: -30px;
  width: 20px;
  height: 6px;
  background-image: url(../images/img-sm-arrow@2x.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
.section-inuix-method .cont-step .cont-desc-step .step-second {
  border-spacing: 112px;
  border-collapse: separate;
  margin: -112px;
  display: table;
  table-layout: fixed;
  width: calc(100% + 224px);
}
.section-inuix-method .cont-step .cont-desc-step .step-second li:after {
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  right: -96px;
  width: 88px;
  height: 6px;
  background-image: url(../images/img-lg-arrow@2x.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
.section-inuix-method .cont-step .cont-desc-step .step-second .bg-type-gray1 {
  background-color: #69707A;
}
.section-inuix-method .cont-step .cont-desc-step .step-second .bg-type-gray2 {
  background-color: #484E57;
}
.section-inuix-method .cont-step .step-type ul {
  border-spacing: 112px;
  margin: -64px -112px -112px;
}
@media (min-width: 1025px) {
  .section-inuix-method .cont-step .cont-title {
    white-space: nowrap;
  }
}
@media (min-width: 768px) and (max-width: 1024.98px) {
  .section-inuix-method .container, .section-inuix-method .sticky-container {
    padding: 0 64px;
  }
}
@media (max-width: 1024.98px) {
  .section-inuix-method {
    padding: 80px 0;
  }
  .section-inuix-method .no-line {
    margin-top: 85px;
  }
  .section-inuix-method .cont-step {
    padding: 68px 32px 40px;
  }
  .section-inuix-method .cont-step .cont-title {
    font-size: 20px;
    padding: 12px 20px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    text-align: center;
    top: -24px;
    line-height: 24px;
    width: 456px;
  }
  .section-inuix-method .cont-step .cont-title-desc {
    text-align: center;
  }
  .section-inuix-method .cont-step .cont-desc-step ul li {
    display: block;
    margin-top: 48px;
  }
  .section-inuix-method .cont-step .cont-desc-step ul li:first-child {
    margin-top: 0;
  }
  .section-inuix-method .cont-step .cont-desc-step .step-first li:after {
    top: auto;
    bottom: -24px;
    right: calc(50% - 10px);
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .section-inuix-method .cont-step .cont-desc-step .step-second li:after {
    background-image: url(../images/img-sm-arrow@2x.png);
    top: auto;
    bottom: -24px;
    right: calc(50% - 10px);
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    width: 20px;
    height: 6px;
  }
}
@media (max-width: 767.98px) {
  .section-inuix-method .cont-step .cont-title {
    top: -36px;
    line-height: 24px;
    width: 271px;
  }
  .section-inuix-method .no-line .cont-title {
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    margin: 0;
  }
}

/* framework visual */
.section-component {
  position: relative;
  height: 1170px;
  overflow: hidden;
}
.section-component .menu-info {
  position: relative;
  margin-top: 5px;
  display: inline-block;
  z-index: 10;
}
.section-component .sidebar-title {
  margin-top: 203px;
}
.section-component .layout-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.section-component .flex-end {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.section-component .btn-top-group {
  position: relative;
  margin-left: 15px;
}
.section-component .btn-top-group .btn-change {
  padding: 0 24px;
  color: #fff;
  background: linear-gradient(240deg, #FF9548, #FF523A, #F72773, #A127FF, #6035FD, #567BFF, #4FA8FB, #00B493);
  border-radius: 24px;
  -webkit-animation: animatedgradient 5s alternate infinite;
          animation: animatedgradient 5s alternate infinite;
  background-size: 250% 250%;
}
.section-component .btn-top-group .tooltip {
  visibility: visible;
  position: absolute;
  top: 60px;
  left: 50%;
  width: 200px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  opacity: 1;
}
.section-component .btn-top-group .tooltip .tooltip-message {
  background-color: #000;
  padding: 9px 12px 6px;
  border-radius: 10px;
  color: #fff;
  -webkit-box-shadow: 0px 4px 15px rgba(50, 54, 60, 0.25);
          box-shadow: 0px 4px 15px rgba(50, 54, 60, 0.25);
}
.section-component .btn-top-group .tooltip .tooltip-message p {
  font-size: 13px;
}
.section-component .btn-top-group .tooltip .tooltip-message:after {
  content: "";
  position: absolute;
  top: -6px;
  left: calc(50% - 6px);
  width: 12px;
  height: 7px;
  background: url(../images/ico-tooltip.png);
  background-size: cover;
}
.section-component .check-item {
  cursor: pointer;
}
.section-component .check-item [type=checkbox],
.section-component .check-item [type=radio] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.section-component .check-item [type=checkbox] + .label,
.section-component .check-item [type=checkbox] + label,
.section-component .check-item [type=radio] + .label,
.section-component .check-item [type=radio] + label {
  position: relative;
  display: inline-block;
}
.section-component .check-item [type=checkbox] + .label:before,
.section-component .check-item [type=checkbox] + label:before,
.section-component .check-item [type=radio] + .label:before,
.section-component .check-item [type=radio] + label:before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: middle;
  border-radius: 2px;
  margin-top: -2px;
  margin-right: 5px;
  content: "";
}
.section-component .check-item [type=checkbox] + .label.sr-only,
.section-component .check-item [type=checkbox] + label.sr-only,
.section-component .check-item [type=radio] + .label.sr-only,
.section-component .check-item [type=radio] + label.sr-only {
  position: static;
  width: 12px;
  height: 12px;
  vertical-align: middle;
  margin: 0;
  overflow: visible;
}
.section-component .check-item [type=checkbox] + .label.sr-only:before,
.section-component .check-item [type=checkbox] + label.sr-only:before,
.section-component .check-item [type=radio] + .label.sr-only:before,
.section-component .check-item [type=radio] + label.sr-only:before {
  margin-right: 0;
}
.section-component .check-item [type=checkbox]:focus + .label:before,
.section-component .check-item [type=checkbox]:focus + label:before,
.section-component .check-item [type=radio]:focus + .label:before,
.section-component .check-item [type=radio]:focus + label:before {
  border-color: #484E57;
}
.section-component .check-item [type=checkbox] + .label:before,
.section-component .check-item [type=checkbox] + label:before {
  width: 18px;
  height: 18px;
  border: 1px solid #CAD1D8;
  border-radius: 3px;
}
.section-component .check-item [type=checkbox]:checked + .label:before,
.section-component .check-item [type=checkbox]:checked + label:before {
  border-radius: 3px;
  border-color: var(--primary-color);
  background: var(--primary-color) url(../images/ico-checkbox-checked.png) no-repeat center center;
  background-size: 18px 18px;
}
.section-component .check-item [type=checkbox]:disabled + .label:before,
.section-component .check-item [type=checkbox]:disabled + label:before {
  border-color: transparent;
  background-color: #374151;
}
.section-component .check-item [type=radio] + .label:before,
.section-component .check-item [type=radio] + label:before {
  border-radius: 50%;
  background: url(../images/ico-radio-lg@2x.png) no-repeat center center;
  width: 14px;
  height: 14px;
  background-size: 14px 14px;
}
.section-component .check-item [type=radio]:checked + .label:before,
.section-component .check-item [type=radio]:checked + label:before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: var(--primary-color) url(../images/ico-radio-lg-checked@2x.png) no-repeat center center;
  background-size: 14px 14px;
}
.section-component .check-item [type=radio]:disabled + .label:before,
.section-component .check-item [type=radio]:disabled + label:before {
  border-color: #374151;
}
.section-component .check-item [type=radio]:disabled + .label:after,
.section-component .check-item [type=radio]:disabled + label:after {
  background-color: #374151;
}
.section-component .check-item + .check-item {
  margin-left: 20px;
}
.section-component .check-switch {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
}
.section-component .check-switch .label {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  min-width: 36px;
  height: 20px;
  border-radius: 15px;
  padding-left: 23px;
  padding-right: 8px;
  background-color: #A4ACB7;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transition-property: background-color, hover;
  transition-property: background-color, hover;
}
.section-component .check-switch .label:after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.section-component .check-switch .label span {
  display: block;
  line-height: 23px;
}
.section-component .check-switch .label .text-checked {
  display: none;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
}
.section-component .check-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.section-component .check-switch input:checked + .label {
  background-color: var(--primary-color);
  padding-left: 8px;
  padding-right: 23px;
}
.section-component .check-switch input:checked + .label:after {
  left: calc(100% - 18px);
}
.section-component .check-switch input:checked + .label .text-uncheck {
  display: none;
  opacity: 0;
}
.section-component .check-switch input:checked + .label .text-checked {
  display: inline;
  opacity: 1;
}
.section-component .check-tabmenu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  height: 44px;
}
.section-component .check-tabmenu .check-item + .check-item {
  margin-left: -1px;
}
.section-component .check-tabmenu .check-item:first-child .label {
  border-radius: 10px 0 0 10px;
}
.section-component .check-tabmenu .check-item:last-child .label {
  border-radius: 0 10px 10px 0;
}
.section-component .check-tabmenu .check-item .label {
  display: block;
  min-width: 83px;
  font-size: 16px;
  line-height: 42px;
  border: 1px solid #CAD1D8;
  color: #7B838C;
  background-color: #fff;
}
.section-component .check-tabmenu .check-item .label:before {
  display: none;
}
.section-component .check-tabmenu .check-item :checked + .label {
  position: relative;
  z-index: 1;
  color: var(--primary-color);
  background-color: var(--primary-bg-color);
  border: 1px solid var(--primary-border-color);
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
}
.section-component .table-outline table {
  border-bottom: 0;
}
.section-component .table-outline table colgroup {
  display: table-column-group;
}
.section-component .table-outline tr th,
.section-component .table-outline tr td {
  padding: 13px 12px;
}
.section-component .table-outline tr:hover {
  background-color: #F4F7FB;
}
.section-component .table-outline tr th {
  height: 44px;
  background-color: #fff;
  border-bottom: 1px solid #E9EEF4;
  color: #7B838C;
}
.section-component .table-outline tr td {
  height: 44px;
  padding: 9px 15px;
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid #E9EEF4;
}
.section-component .table-outline tr:last-child td {
  border-bottom: 0;
}
.section-component .btn-group {
  margin: 15px;
}
.section-component .btn-group .btn {
  min-width: 103px;
  height: 44px;
  padding: 0 17.5px;
  border-radius: 10px;
}
.section-component .btn-group .btn.btn-primary {
  background-color: var(--primary-color);
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
}
.section-component .btn-group .btn.btn-primary:hover {
  background-color: var(--primary-hover-color);
}
.section-component .btn-group .btn.btn-outline-primary {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background-color: #fff;
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
}
.section-component .btn-group .btn.btn-outline-primary .ico-reset {
  margin-top: 5px;
  margin-right: 3px;
}
.section-component .btn-group .btn.btn-outline-primary svg ellipse,
.section-component .btn-group .btn.btn-outline-primary svg path {
  stroke: var(--primary-color);
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  fill: none;
}
.section-component .btn-group .btn.btn-outline-primary:hover {
  background-color: var(--primary-outline-hover-color);
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
}
.section-component .btn-group .btn-lg {
  font-size: 16px;
}
@media (max-width: 1024.98px) {
  .section-component {
    height: 1259px;
  }
  .section-component .sidebar-title {
    margin-top: 169px;
  }
  .section-component .menu-info {
    position: relative;
    z-index: 10;
    display: inline-block;
  }
}
@media (max-width: 767.98px) {
  .section-component {
    height: 1050px;
  }
  .section-component .sidebar-title {
    margin-top: 74px;
    text-align: center;
  }
  .section-component .menu-info {
    position: relative;
    margin-top: 10px;
    z-index: 10;
    display: block;
    text-align: center;
  }
  .section-component .menu-info .layout-flex {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .section-component .menu-info .btn-top-group {
    position: fixed;
    bottom: 20px;
    left: 0;
    width: calc(100% - 115px);
    margin-left: 20px;
  }
  .section-component .menu-info .btn-top-group .btn-change {
    width: 100%;
    height: 56px;
    border-radius: 28px;
    font-size: 16px;
  }
  .section-component .menu-info .btn-top-group.btn-fix-group {
    position: absolute;
    top: 790px;
    bottom: 0;
    left: -24px;
    width: calc(100% + 4px);
  }
  .section-component .menu-info .btn-top-group.btn-fix-group .btn-change {
    width: 100%;
  }
  .section-component .menu-info .btn-top-group .tooltip {
    top: -50px;
  }
  .section-component .menu-info .btn-top-group .tooltip .tooltip-message:after {
    top: 34px;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  .section-component .check-tabmenu .check-item .label {
    min-width: 67px;
    line-height: 40px;
  }
}

.card-container {
  position: absolute;
  top: 33px;
  left: calc(50% - 620px);
  width: 1240px;
}
.card-container > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.card-container > div .content-left {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  -ms-flex-item-align: end;
      align-self: flex-end;
}
.card-container > div .content-right {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 480px;
          flex: 0 0 480px;
  margin: 0 -15px;
}
.card-container > div .inner-top .content-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.card-container .profile-area {
  position: relative;
  width: 242px;
  height: 79px;
}
.card-container .profile-area:before {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 16px;
  height: 16px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background: url(../images/ico-chevron-right-gray-md@2x.png);
  background-size: 16px;
}
.card-container .profile-area .profile-img {
  display: inline-block;
  width: 38px;
  height: 38px;
  padding-top: 7px;
  margin-right: 10px;
  text-align: center;
  border-radius: 8px;
  background-color: var(--primary-bg-color);
  vertical-align: middle;
}
.card-container .profile-area .profile-img svg {
  fill: var(--primary-color);
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
}
.card-container .profile-area .profile-detail {
  display: inline-block;
  vertical-align: middle;
}
.card-container .profile-area .profile-detail strong {
  display: block;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.03em;
  color: #32363C;
  font-family: "Spoqa Han Sans Neo", "Noto Sans KR", "Noto Sans CJK KR", "malgun gothic", sans-serif, Tahoma;
}
.card-container .profile-area .profile-detail .title {
  display: block;
  font-style: normal;
  font-size: 14px;
  color: #A4ACB7;
  line-height: 16.8px;
}
.card-container .card-lg.menu-tree {
  width: 208px;
  padding: 12px 15px;
}
.card-container .card-btn-group {
  margin-right: 30px;
}
.card-container .card-toolbar {
  display: inline-block;
  vertical-align: bottom;
  margin: 15px;
}
.card-container .card-lg {
  display: inline-block;
  margin: 15px;
  padding: 20px 20px;
  background-color: #fff;
  border-radius: 12px;
  -webkit-box-shadow: 0px 6px 20px rgba(50, 54, 60, 0.1);
          box-shadow: 0px 6px 20px rgba(50, 54, 60, 0.1);
  vertical-align: bottom;
}
.card-container .card-lg .card-header {
  line-height: 1.2;
  margin-bottom: 20px;
}
.card-container .card-lg .card-title {
  font-size: 22px;
  background: none;
  color: #32363C;
}
.card-container .card-calendar {
  position: relative;
  margin: 15px;
  padding: 20px;
  border-radius: 12px;
  -webkit-box-shadow: 0px 6px 20px rgba(50, 54, 60, 0.1);
          box-shadow: 0px 6px 20px rgba(50, 54, 60, 0.1);
  background-color: #fff;
}
.card-container .card-calendar #tableCalendarTitle {
  margin-bottom: 12px;
}
.card-container .card-calendar #tableCalendarTitle td {
  font-size: 20px;
  text-align: center;
}
.card-container .card-calendar #tableCalendarTitle td a {
  position: relative;
  font-size: inherit;
  font-weight: bold;
  vertical-align: middle;
  color: #32363C;
}
.card-container .card-calendar #tableCalendarTitle td a:hover {
  border-radius: 16px;
  background-color: #F4F7FB;
}
.card-container .card-calendar #tableCalendar tr th {
  padding: 6px 0;
}
.card-container .card-calendar #tableCalendar tr td {
  padding: 6px 0;
  text-align: center;
}
.card-container .card-calendar #tableCalendar tr td a {
  z-index: 100;
  position: relative;
}
.card-container .card-calendar #tableCalendar tr td a:hover::before {
  content: "";
  position: absolute;
  top: calc(50% - 18px);
  left: calc(50% - 18px);
  width: 36px;
  height: 36px;
  border-radius: 18px;
  z-index: -1;
  background-color: #E9EEF4;
}
.card-container .card-calendar .text-red {
  color: #FF4D6D;
}
.card-container .card-calendar .other-day {
  opacity: 0.5;
}
.card-container .card-calendar .today {
  color: var(--primary-color);
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
}
.card-container .card-calendar .today::before {
  content: "";
  position: absolute;
  top: calc(50% - 18px);
  left: calc(50% - 18px);
  width: 36px;
  height: 36px;
  border-radius: 18px;
  z-index: -1;
  background-color: var(--primary-bg-color);
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
}
.card-container .card-calendar .prev,
.card-container .card-calendar .next {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border: 0;
  padding: 0;
  background: url(../images/ico-md-chevron-left-darkgray@2x.png) no-repeat center center;
  background-size: 32px auto;
  text-indent: -9999px;
  text-align: left;
  overflow: hidden;
}
.card-container .card-calendar .prev:hover::before,
.card-container .card-calendar .next:hover::before {
  content: "";
  position: absolute;
  top: calc(50% - 16px);
  left: calc(50% - 16px);
  width: 32px;
  height: 32px;
  border-radius: 16px;
  z-index: -1;
  background-color: #E9EEF4;
}
.card-container .card-calendar .prev {
  background-position: right center;
}
.card-container .card-calendar .next {
  background-image: url(../images/ico-md-chevron-right-darkgray@2x.png);
  background-position: left center;
}
.card-container .card-calendar .btn-closed {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: url(../images/ico-md-close-gray@2x.png) center center no-repeat;
  background-size: 16px;
  text-indent: -9999px;
}
.card-container .card-calendar .btn-closed:hover {
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background-color: #F4F7FB;
}
.card-container .tab-menu {
  margin: 15px;
}
.card-container .tab-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 40px;
  background-color: #fff;
  border-radius: 12px;
  -webkit-box-shadow: 0px 6px 20px rgba(50, 54, 60, 0.1);
          box-shadow: 0px 6px 20px rgba(50, 54, 60, 0.1);
}
.card-container .tab-list li {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 12px;
}
.card-container .tab-list li.on {
  background-color: var(--primary-color);
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
}
.card-container .tab-list li.on a {
  color: #fff;
}
.card-container .tab-list li a {
  color: #7B838C;
  height: 100%;
}
.card-container .form-control {
  background-color: #fff;
  border: 1px solid #DCDCE1;
}
.card-container .form-datepicker {
  width: 154px;
}
.card-container .form-search {
  width: 100%;
  padding-left: 30px;
  background: url(../images/ico-search-gray-md.png) 10px center no-repeat;
  background-size: 16px 16px;
}
.card-container .site-menu {
  border-radius: 12px;
  max-height: 200px;
  overflow: auto;
}
.nav-mode-2 .card-container .site-menu {
  max-height: none;
}
.card-container .site-list {
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
}
.card-container .site-list a {
  display: block;
  padding: 10px 8px;
  border-radius: 4px;
  font-size: 15px;
}
.card-container .site-list > li {
  position: relative;
}
.card-container .site-list > li:before {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  width: 8px;
  height: 8px;
  background: url(../images/ico-caret-right-darkgray-xs.png) no-repeat;
  background-size: 8px;
}
.card-container .site-list > li.on:before {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.card-container .site-list ul {
  margin-left: 12px;
}
.card-container .site-list > li > a {
  padding-left: 30px;
  margin-left: 13px;
  background: url(../images/ico-file-gray-md@2x.png) 4px center no-repeat;
  background-size: 16px 16px;
}
.card-container .site-list > li > a:hover {
  border-radius: 8px;
  background-color: hsl(213, 43%, 97%);
  color: var(--primary-color);
}
.card-container .site-list > li > ul > li a {
  position: relative;
  padding-left: 51px;
  background: url(../images/ico-page-gray-md@2x.png) 26px center no-repeat;
  background-size: 16px 16px;
}
.card-container .site-list > li > ul > li a:hover {
  border-radius: 8px;
  background-color: hsl(213, 43%, 97%);
  color: var(--primary-color);
}
.card-container .chart-area {
  width: 200px;
  height: 100px;
}
.card-container .form-group {
  width: 169px;
  padding: 8px;
}
.card-container .form-group .check-item {
  position: relative;
  display: block;
  width: 100%;
}
.card-container .form-group .check-item [type=radio] + label {
  width: 100%;
  padding: 10px 13px;
  font-weight: 500;
}
.card-container .form-group .check-item [type=radio] + label:before {
  position: absolute;
  right: 12px;
  top: 50%;
  margin: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.card-container .form-group .check-item:hover {
  border-radius: 10px;
  background-color: #F4F7FB;
}
.card-container .form-group .check-item + .check-item {
  margin-left: 0;
}
.card-container .form-date-group {
  padding: 24px 28px;
}
.card-container .form-date-group dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}
.card-container .form-date-group dl dt {
  -ms-flex-item-align: center;
      align-self: center;
  width: 70px;
  font-size: 16px;
  font-weight: bold;
}
.card-container .form-date-group dl dd {
  -ms-flex-item-align: center;
      align-self: center;
  width: calc(100% - 70px);
}
.card-container .form-date-group dl + dl {
  margin-top: 12px;
}
.card-container .form-date-group .flex-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.card-container .form-date-group .flex-group .datepicker {
  width: 154px;
}
.card-container .form-date-group .btn-group {
  margin: 20px 0 0;
}
.card-container .form-date-group .btn-group .btn {
  padding: 0 12px;
  height: 36px;
}
.card-container .form-date-group .btn-group .btn + .btn {
  margin-left: 4px;
}
.card-container .form-date-group .form-control {
  border-radius: 6px;
}
.card-container .form-date-group .form-control:focus {
  border-color: var(--primary-color);
}
.card-container .theme-setting {
  width: 221px;
}
.card-container .theme-setting .theme-group {
  margin: -12px -7px;
}
.card-container .theme-setting .theme-group ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.card-container .theme-setting .theme-group ul li {
  -ms-flex-item-align: center;
      align-self: center;
}
.card-container .theme-setting .btn-theme {
  position: relative;
  width: 38px;
  height: 38px;
  margin: 12px;
  background-color: currentColor;
  text-indent: -9999px;
  font-size: 0;
  border-radius: 19px;
}
.card-container .theme-setting .btn-theme span {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 38px;
  height: 38px;
  background-color: inherit;
  border-radius: 19px;
  z-index: 100;
}
.card-container .theme-setting .btn-theme.red {
  background-color: hsl(349, 75%, 54%);
}
.card-container .theme-setting .btn-theme.yellow {
  background-color: hsl(43, 98%, 52%);
}
.card-container .theme-setting .btn-theme.orange {
  background-color: hsl(29, 100%, 50%);
}
.card-container .theme-setting .btn-theme.green {
  background-color: hsl(162, 100%, 37%);
}
.card-container .theme-setting .btn-theme.blue {
  background-color: hsl(226, 100%, 59%);
}
.card-container .theme-setting .btn-theme.indigo {
  background-color: hsl(226, 73%, 31%);
}
.card-container .theme-setting .btn-theme.purple {
  background-color: hsl(263, 94%, 60%);
}
.card-container .theme-setting .btn-theme.pink {
  background-color: hsl(333, 90%, 61%);
}
.card-container .theme-setting .btn-theme.black {
  background-color: hsl(0, 0%, 0%);
}
.card-container .theme-setting .btn-theme.active {
  width: 32px;
  height: 32px;
  margin: 15px;
  -webkit-box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.7);
          box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.7);
}
.card-container .theme-setting .btn-theme.active span {
  width: 32px;
  height: 32px;
}
.card-container .theme-setting .btn-theme.active:before {
  content: "";
  position: absolute;
  top: calc(50% - 6px);
  left: calc(50% - 6px);
  height: 12px;
  width: 12px;
  background: linear-gradient(240deg, #FF9548, #FF523A, #F72773, #A127FF, #6035FD, #567BFF, #4FA8FB, #00B493);
  border-radius: 12px;
  -webkit-animation: animatedgradient 5s alternate infinite;
          animation: animatedgradient 5s alternate infinite;
  background-size: 250% 250%;
  z-index: 200;
}
.card-container .theme-setting .btn-theme.active:after {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  height: 38px;
  width: 38px;
  background: linear-gradient(240deg, #FF9548, #FF523A, #F72773, #A127FF, #6035FD, #567BFF, #4FA8FB, #00B493);
  border-radius: 38px;
  -webkit-animation: animatedgradient 5s alternate infinite;
          animation: animatedgradient 5s alternate infinite;
  background-size: 300% 300%;
}
@-webkit-keyframes animatedgradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes animatedgradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.card-container .card-table {
  width: 584px;
  padding-bottom: 4px;
}
.card-container .card-table .card-header {
  margin-bottom: 13px;
}
.card-container .card-table .card-body {
  margin: 0 -20px;
}
.card-container .card-table .label-status {
  display: inline-block;
  min-width: 48px;
  border-radius: 14px;
  padding: 0 6px;
  font-weight: 600;
  font-size: 13px;
  line-height: 24px;
  text-align: center;
}
.card-container .card-table .label-gray {
  color: #7B838C;
  background: #E9EEF4;
}
.card-container .card-table .label-green {
  color: #00815A;
  background: #CFF4E9;
}
.card-container .card-table .label-red {
  color: #EF4A4A;
  background: #FDE4E4;
}
.card-container .card-chart {
  position: relative;
  width: 450px;
}
.card-container .card-chart .card-header {
  margin-bottom: 0;
}
.card-container .card-chart .chart-area {
  width: 300px;
  height: 150px;
  margin: 0 auto 0;
}
.card-container .card-chart .chart-area .progress {
  position: absolute;
  top: 55px;
  left: 50%;
  width: 175px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 100;
}
.card-container .card-chart .chart-area .progress svg ellipse,
.card-container .card-chart .chart-area .progress svg path {
  stroke: var(--primary-color);
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  fill: none;
  stroke-linecap: round;
  stroke-dashoffset: 500;
  stroke-dasharray: 0;
  -webkit-animation: 5s circletimer linear;
          animation: 5s circletimer linear;
}
.card-container .card-chart .chart-area .bg-progress {
  position: absolute;
  top: 55px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 10;
}
.card-container .card-chart .chart-area .bg-progress svg ellipse,
.card-container .card-chart .chart-area .bg-progress svg path {
  stroke: var(--primary-bg-color-300);
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  fill: none;
}
.card-container .card-chart .chart-area .text {
  position: absolute;
  top: 95px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  font-size: 30px;
  font-weight: 700;
}
@-webkit-keyframes circletimer {
  0% {
    stroke-dashoffset: 500;
    stroke-dasharray: 500;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 500;
  }
}
@keyframes circletimer {
  0% {
    stroke-dashoffset: 500;
    stroke-dasharray: 500;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 500;
  }
}
.card-container .card-chart .chart-area .chart-legend {
  position: absolute;
  left: 50%;
  bottom: 62px;
  font-size: 14px;
  color: #A4ACB7;
  text-align: center;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.card-container .card-chart .legend {
  position: absolute;
  bottom: 20px;
  left: calc(50% - 169px);
  width: 339px;
}
.card-container .card-chart .legend ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.card-container .card-chart .legend ul li {
  font-size: 14px;
}
.card-container .card-chart .legend ul li .ico {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 4px;
  border-radius: 6px;
  vertical-align: middle;
}
.card-container .card-chart .legend ul li .ico.theme-color {
  background-color: var(--primary-color);
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
}
.card-container .card-chart .legend ul li .ico.theme-sub-color {
  background-color: var(--primary-bg-color-300);
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
}
.card-container .card-chart .legend ul li span {
  position: relative;
  padding-right: 8px;
  margin-right: 3px;
}
.card-container .card-chart .legend ul li span:after {
  content: "";
  position: absolute;
  right: 0;
  top: 5px;
  width: 1px;
  height: 12px;
  background-color: #D8DEE5;
}
@media (max-width: 1024.98px) {
  .card-container {
    top: 150px;
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}
@media (max-width: 767.98px) {
  .card-container {
    position: relative;
    top: 40px;
    left: calc(50% - 235px);
    width: 450px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  .card-container .content-top {
    margin-top: 20px;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .card-container .content-top .content-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    margin: -10px;
  }
  .card-container .content-top .inner-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
  .card-container .content-bottom {
    position: relative;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .card-container .content-bottom .inner-top {
    margin: -10px;
  }
  .card-container .content-bottom .inner-top .content-left {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .card-container .content-bottom .content-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .card-container .content-bottom .content-right {
    position: absolute;
    top: 90px;
    left: 35px;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  .card-container .form-group {
    width: 100%;
  }
  .card-container .card-toolbar {
    margin: 10px;
  }
  .card-container .card-chart {
    position: relative;
    height: 216px;
  }
  .card-container .card-chart .card-header {
    margin-bottom: 16px;
  }
  .card-container .card-chart .chart-area {
    width: 150px;
  }
  .card-container .card-chart .chart-area .progress {
    width: 150px;
    top: 50px;
  }
  .card-container .card-chart .chart-area .progress svg {
    width: 123px;
  }
  .card-container .card-chart .chart-area .progress svg ellipse,
  .card-container .card-chart .chart-area .progress svg path {
    -webkit-animation-duration: 4s;
            animation-duration: 4s;
  }
  .card-container .card-chart .chart-area .bg-progress {
    top: 50px;
  }
  .card-container .card-chart .chart-area .bg-progress svg {
    width: 150px;
  }
  .card-container .card-chart .chart-area .text {
    top: 85px;
  }
  .card-container .card-chart .chart-area .chart-legend {
    bottom: 75px;
    font-size: 11px;
  }
  .card-container .card-chart canvas {
    position: absolute;
    left: 1px;
    top: 34px;
    width: 200px;
    height: 200px;
  }
  .card-container .card-chart .legend {
    position: absolute;
    left: 24px;
    bottom: 20px;
    width: auto;
  }
  .card-container .card-chart .legend ul {
    display: block;
  }
  .card-container .card-chart .legend ul li {
    font-size: 12px;
  }
  .card-container .card-chart .legend ul li + li {
    margin-top: 5px;
  }
  .card-container .card-lg.menu-tree {
    width: 200px;
    margin-top: 30px;
  }
  .card-container .form-date-group {
    padding: 20px;
  }
  .card-container .form-date-group dl {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .card-container .form-date-group dl dt {
    -ms-flex-item-align: start;
        align-self: flex-start;
    margin-bottom: 10px;
  }
  .card-container .form-date-group dl dd {
    width: 100%;
  }
  .card-container .form-date-group .flex-group .datepicker {
    width: 100%;
  }
  .card-container .form-date-group .btn-group {
    margin: 25px 0 0 0;
  }
  .card-container .form-date-group .btn-group .btn {
    width: 100%;
    height: 36px;
  }
  .card-container .form-date-group .btn-group .btn + .btn {
    margin-top: 8px;
    margin-left: 0;
  }
  .card-container .card-lg {
    margin: 10px;
    width: 200px;
  }
}

/* uix portfolio method */
.section-project {
  padding: 114px 0 0;
  background-color: #F7F9FC;
}
@media (max-width: 767.98px) {
  .section-project {
    padding: 74px 0 0;
  }
}

.project-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 40px -18px 104px;
}
.project-container .project-item {
  position: relative;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 392px;
          flex: 0 0 392px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0 18px;
  padding-bottom: 86px;
  border-radius: 12px;
  background-color: #fff;
  -webkit-filter: drop-shadow(0px 10px 20px rgba(72, 78, 87, 0.04));
          filter: drop-shadow(0px 10px 20px rgba(72, 78, 87, 0.04));
  overflow: hidden;
}
.project-container .project-header {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 260px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
  overflow: hidden;
}
.project-container .project-header:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 156px;
  height: 86px;
  z-index: 0;
}
.project-container .project-header:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 200px;
  height: 212px;
  z-index: 0;
}
.project-container .project-header.indigo {
  background: linear-gradient(36.41deg, #003B67 7.04%, #045999 100%);
}
.project-container .project-header.indigo:before {
  background: url(../images/bg-top-header01@2x.png) 0 0 no-repeat;
  background-size: 156px 86px;
}
.project-container .project-header.indigo:after {
  background: url(../images/bg-bottom-header01@2x.png) right bottom no-repeat;
  background-size: 200px 212px;
}
.project-container .project-header.blue {
  background: linear-gradient(36.41deg, #244FC6 7.04%, #537CE9 100%);
}
.project-container .project-header.blue:before {
  background: url(../images/bg-top-header02@2x.png) 0 0 no-repeat;
  background-size: 156px 86px;
}
.project-container .project-header.blue:after {
  background: url(../images/bg-bottom-header02@2x.png) right bottom no-repeat;
  background-size: 200px 212px;
}
.project-container .project-header.pink {
  background: linear-gradient(36.41deg, #F54090 7.04%, #FF84BA 100%);
}
.project-container .project-header.pink:before {
  background: url(../images/bg-top-header03@2x.png) 0 0 no-repeat;
  background-size: 156px 86px;
}
.project-container .project-header.pink:after {
  background: url(../images/bg-bottom-header03@2x.png) right bottom no-repeat;
  background-size: 200px 212px;
}
.project-container .project-header .project-img {
  position: relative;
  z-index: 50;
}
.project-container .project-header .project-img img {
  width: 392px;
  height: 260px;
  -o-object-fit: contain;
     object-fit: contain;
}
.project-container .project-header .project-img img.img-thumb-md {
  display: none;
}
.project-container .project-body {
  width: 100%;
  padding: 32px 28px 28px;
  text-align: left;
  color: #7B838C;
  background: #fff;
}
.project-container .project-body .title {
  font-size: 28px;
  line-height: 36px;
  color: #484E57;
  font-weight: bold;
}
.project-container .project-body .tag-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 10px;
}
.project-container .project-body .tag-list li + li {
  margin-left: 6px;
}
.project-container .project-body .tag-list .tag {
  background-color: #E9EEF4;
  padding: 5px 10px;
  height: 28px;
  border-radius: 14px;
  font-size: 14px;
  color: #484E57;
}
.project-container .project-body .tag-list .tag::before {
  content: "#";
}
.project-container .project-body .project-content {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #E9EEF4;
}
.project-container .project-body .project-check-list li {
  position: relative;
  padding-left: 24px;
}
.project-container .project-body .project-check-list li:before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 2px;
  left: 0;
  background: url(../images/ico-bul-gray@2x.png) center center no-repeat;
  background-size: 16px;
}
.project-container .project-body .project-check-list li + li {
  margin-top: 12px;
}
.project-container .project-body .btn-more {
  position: absolute;
  bottom: 28px;
  left: 28px;
  min-width: 138px;
  height: 48px;
  font-size: 14px;
  border-radius: 24px;
  border: 1px solid #CAD1D8;
  color: #484E57;
  font-weight: bold;
}
.project-container .project-body .btn-more .ico {
  margin-left: 5px;
}
@media (max-width: 1024.98px) {
  .project-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 0 64px;
  }
  .project-container .project-item {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    margin: 16px 0;
    padding-bottom: 63px;
  }
  .project-container .project-header {
    height: 400px;
    padding: 0;
  }
  .project-container .project-header:before {
    content: "";
    width: 230px;
    height: 128px;
    background: url(../images/bg-tablet-top-header.png) 0 0 no-repeat;
    background-size: 230px 128px;
    z-index: 0;
  }
  .project-container .project-header:after {
    content: "";
    width: 300px;
    height: 319px;
    background: url(../images/bg-tablet-bottom-header.png) right bottom no-repeat;
    background-size: 300px 319px;
    z-index: 0;
  }
  .project-container .project-header.indigo {
    background: linear-gradient(36.41deg, #003B67 7.04%, #045999 100%);
  }
  .project-container .project-header.indigo:before {
    background: url(../images/bg-work-tablet-top-indigo.png) 0 0 no-repeat;
    background-size: 230px 128px;
  }
  .project-container .project-header.indigo:after {
    background: url(../images/bg-work-tablet-bottom-indigo.png) right bottom no-repeat;
    background-size: 300px 319px;
  }
  .project-container .project-header.blue {
    background: linear-gradient(36.41deg, #244FC6 7.04%, #537CE9 100%);
  }
  .project-container .project-header.blue:before {
    background: url(../images/bg-work-tablet-top-blue.png) 0 0 no-repeat;
    background-size: 230px 128px;
  }
  .project-container .project-header.blue:after {
    background: url(../images/bg-work-tablet-bottom-blue.png) right bottom no-repeat;
    background-size: 300px 319px;
  }
  .project-container .project-header.pink {
    background: linear-gradient(36.41deg, #F54090 7.04%, #FF84BA 100%);
  }
  .project-container .project-header.pink:before {
    background: url(../images/bg-work-tablet-top-pink.png) 0 0 no-repeat;
    background-size: 230px 128px;
  }
  .project-container .project-header.pink:after {
    background: url(../images/bg-work-tablet-bottom-pink.png) right bottom no-repeat;
    background-size: 300px 319px;
  }
  .project-container .project-header .project-img img {
    display: none;
  }
  .project-container .project-header .project-img img.img-thumb-md {
    display: block;
    width: 650px;
    height: 400px;
  }
}
@media (max-width: 767.98px) {
  .project-container {
    margin-top: 25px;
    margin-bottom: 64px;
    padding: 0 42px;
  }
  .project-container .project-item {
    padding-bottom: 74px;
  }
  .project-container .project-header {
    height: 218px;
    padding: 0;
  }
  .project-container .project-header.indigo {
    background: linear-gradient(36.41deg, #003B67 7.04%, #045999 100%);
  }
  .project-container .project-header.indigo:before {
    background: url(../images/bg-top-header01@2x.png) 0 0 no-repeat;
    background-size: 130.12px 71.74px;
  }
  .project-container .project-header.indigo:after {
    background: url(../images/bg-bottom-header01@2x.png) right bottom no-repeat;
    background-size: 166.84px 176.85px;
  }
  .project-container .project-header.blue {
    background: linear-gradient(36.41deg, #244FC6 7.04%, #537CE9 100%);
  }
  .project-container .project-header.blue:before {
    background: url(../images/bg-top-header02@2x.png) 0 0 no-repeat;
    background-size: 130.12px 71.74px;
  }
  .project-container .project-header.blue:after {
    background: url(../images/bg-bottom-header02@2x.png) right bottom no-repeat;
    background-size: 166.84px 176.85px;
  }
  .project-container .project-header.pink {
    background: linear-gradient(36.41deg, #F54090 7.04%, #FF84BA 100%);
  }
  .project-container .project-header.pink:before {
    background: url(../images/bg-top-header03@2x.png) 0 0 no-repeat;
    background-size: 130.12px 71.74px;
  }
  .project-container .project-header.pink:after {
    background: url(../images/bg-bottom-header03@2x.png) right bottom no-repeat;
    background-size: 166.84px 176.85px;
  }
  .project-container .project-header .project-img img {
    display: block;
  }
  .project-container .project-header .project-img img.img-thumb-md {
    display: none;
  }
}

/** @format */
.section.bg-dark-gray {
  background-color: #32363c;
  color: #fff;
}
.section-solution-visual {
  position: relative;
  padding: 46px 0 41px;
  color: #fff;
}
.section-solution-visual.blue {
  background: linear-gradient(36.41deg, #244fc6 7.04%, #537ce9 100%);
}
.section-solution-visual.blue:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 261px;
  height: 141px;
  background: url(../images/bg-work-top-blue.png) 0 0 no-repeat;
  background-size: cover;
  z-index: 0;
}
.section-solution-visual.blue:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 324px;
  height: 306px;
  background: url(../images/bg-work-bottom-blue.png) 0 0 no-repeat;
  background-size: cover;
  z-index: 0;
}
.section-solution-visual.indigo {
  background: linear-gradient(36.41deg, #003b67 7.04%, #045999 100%);
}
.section-solution-visual.indigo:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 261px;
  height: 141px;
  background: url(../images/bg-work-top-indigo.png) 0 0 no-repeat;
  background-size: cover;
  z-index: 0;
}
.section-solution-visual.indigo:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 324px;
  height: 306px;
  background: url(../images/bg-work-bottom-indigo.png) 0 0 no-repeat;
  background-size: cover;
  z-index: 0;
}
.section-solution-visual.pink {
  background: linear-gradient(36.41deg, #f54090 7.04%, #ff84ba 100%);
}
.section-solution-visual.pink:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 261px;
  height: 141px;
  background: url(../images/bg-work-top-pink.png) 0 0 no-repeat;
  background-size: cover;
  z-index: 0;
}
.section-solution-visual.pink:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 324px;
  height: 306px;
  background: url(../images/bg-work-bottom-pink.png) 0 0 no-repeat;
  background-size: cover;
  z-index: 0;
}
.section-solution-visual .container .section-body, .section-solution-visual .sticky-container .section-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.section-solution-visual .container .section-body .project-info, .section-solution-visual .sticky-container .section-body .project-info {
  width: 400px;
}
.section-solution-visual .container .section-body .project-info .project-title, .section-solution-visual .sticky-container .section-body .project-info .project-title {
  position: relative;
  z-index: 30;
}
.section-solution-visual .container .section-body .project-info .project-title .tag-list, .section-solution-visual .sticky-container .section-body .project-info .project-title .tag-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 10px;
}
.section-solution-visual .container .section-body .project-info .project-title .tag-list li + li, .section-solution-visual .sticky-container .section-body .project-info .project-title .tag-list li + li {
  margin-left: 6px;
}
.section-solution-visual .container .section-body .project-info .project-title .tag-list .tag, .section-solution-visual .sticky-container .section-body .project-info .project-title .tag-list .tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  padding: 5px 12px;
  height: 28px;
  border-radius: 100px;
  font-size: 14px;
  color: #fff;
  line-height: 20px;
}
.section-solution-visual .container .section-body .project-info .project-title .tag-list .tag::before, .section-solution-visual .sticky-container .section-body .project-info .project-title .tag-list .tag::before {
  content: "#";
}
.section-solution-visual .container .section-body .project-info .project-content, .section-solution-visual .sticky-container .section-body .project-info .project-content {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.section-solution-visual .container .section-body .project-info .project-content .project-check-list li, .section-solution-visual .sticky-container .section-body .project-info .project-content .project-check-list li {
  position: relative;
  padding-left: 24px;
}
.section-solution-visual .container .section-body .project-info .project-content .project-check-list li:before, .section-solution-visual .sticky-container .section-body .project-info .project-content .project-check-list li:before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 2px;
  left: 0;
  background: url(../images/ico-bul-check-white.png) center center no-repeat;
  background-size: 16px;
}
.section-solution-visual .container .section-body .project-info .project-content .project-check-list li + li, .section-solution-visual .sticky-container .section-body .project-info .project-content .project-check-list li + li {
  margin-top: 12px;
}
.section-solution-visual .container .section-body .project-img, .section-solution-visual .sticky-container .section-body .project-img {
  position: relative;
  z-index: 50;
  width: 680px;
}
.section-framework .container, .section-framework .sticky-container {
  padding: 117px 64px 120px;
}
.section-framework .container .section-body, .section-framework .sticky-container .section-body {
  margin-top: 48px;
}
.section-framework .container .section-body > ul, .section-framework .sticky-container .section-body > ul {
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
          justify-content: space-between;
}
.section-framework .container .section-body > ul > li, .section-framework .sticky-container .section-body > ul > li {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 33.33%;
          flex: 1 1 33.33%;
  width: 33.33%;
}
.section-framework .container .section-body > ul > li a, .section-framework .sticky-container .section-body > ul > li a {
  display: inline-block;
}
@media (min-width: 1025px) {
  .section-framework .container .section-body > ul > li a:hover .hover-area, .section-framework .sticky-container .section-body > ul > li a:hover .hover-area, .section-framework .container .section-body > ul > li a:focus .hover-area, .section-framework .sticky-container .section-body > ul > li a:focus .hover-area {
    background: rgba(0, 0, 0, 0.6);
    -webkit-transition: 0.5s ease-out;
    transition: 0.5s ease-out;
    -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  }
  .section-framework .container .section-body > ul > li a:hover .hover-area span, .section-framework .sticky-container .section-body > ul > li a:hover .hover-area span, .section-framework .container .section-body > ul > li a:focus .hover-area span, .section-framework .sticky-container .section-body > ul > li a:focus .hover-area span {
    display: block;
    position: relative;
    font-weight: 700;
    font-size: 20px;
    color: #fff;
    padding-right: 26px;
    -webkit-transition: 0.5s ease-out;
    transition: 0.5s ease-out;
  }
  .section-framework .container .section-body > ul > li a:hover .hover-area span::before, .section-framework .sticky-container .section-body > ul > li a:hover .hover-area span::before, .section-framework .container .section-body > ul > li a:focus .hover-area span::before, .section-framework .sticky-container .section-body > ul > li a:focus .hover-area span::before {
    content: "";
    position: absolute;
    top: 2px;
    right: 0;
    width: 24px;
    height: 24px;
    background: url(../images/ico-chevron-right-white-xl.png) center center no-repeat;
    background-size: cover;
  }
}
.section-framework .container .section-body > ul > li .project-img, .section-framework .sticky-container .section-body > ul > li .project-img {
  position: relative;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -webkit-box-align: center;
          align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
          justify-content: center;
  border-radius: 12px;
}
.section-framework .container .section-body > ul > li .project-img img, .section-framework .sticky-container .section-body > ul > li .project-img img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}
.section-framework .container .section-body > ul > li .project-img .hover-area, .section-framework .sticky-container .section-body > ul > li .project-img .hover-area {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  display: -ms-inline-flexbox;
  display: -webkit-inline-box;
  display: inline-flex;
  -ms-flex-align: center;
  -webkit-box-align: center;
          align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
          justify-content: center;
}
.section-framework .container .section-body > ul > li .project-img .hover-area span, .section-framework .sticky-container .section-body > ul > li .project-img .hover-area span {
  display: none;
}
.section-framework .container .section-body > ul > li .project-title, .section-framework .sticky-container .section-body > ul > li .project-title {
  margin-top: 20px;
}
.section-framework .container .section-body > ul > li .project-title .title, .section-framework .sticky-container .section-body > ul > li .project-title .title {
  font-size: 20px;
  line-height: 24px;
  color: #484e57;
  font-weight: bold;
}
.section-framework .container .section-body > ul > li .project-title .tag-list, .section-framework .sticky-container .section-body > ul > li .project-title .tag-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 10px;
}
.section-framework .container .section-body > ul > li .project-title .tag-list li + li, .section-framework .sticky-container .section-body > ul > li .project-title .tag-list li + li {
  margin-left: 6px;
}
.section-framework .container .section-body > ul > li .project-title .tag-list .tag, .section-framework .sticky-container .section-body > ul > li .project-title .tag-list .tag {
  display: inline-block;
  background-color: #e9eef4;
  padding: 5px 12px;
  height: 28px;
  border-radius: 100px;
  font-size: 14px;
  color: #484e57;
  line-height: 20px;
}
.section-framework .container .section-body > ul > li .project-title .tag-list .tag::before, .section-framework .sticky-container .section-body > ul > li .project-title .tag-list .tag::before {
  content: "#";
}
.section-framework .container .section-body > ul > li:not(:last-child), .section-framework .sticky-container .section-body > ul > li:not(:last-child) {
  margin-right: 32px;
}
.section-component-ui {
  background-color: #ffffff;
}
.section-component-ui .container, .section-component-ui .sticky-container {
  padding: 120px 64px;
}
.section-component-ui .component-container {
  margin-top: 48px;
}
.section-component-ui .component-container .component-item dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.section-component-ui .component-container .component-item dl dt {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 276px;
          flex: 0 0 276px;
  font-size: 20px;
  font-weight: bold;
}
.section-component-ui .component-container .component-item dl dd {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.section-component-ui .component-container .component-item + .component-item {
  margin-top: 64px;
  padding-top: 64px;
  border-top: 1px solid #e9eef4;
}
.section-component-ui .component-container .component-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: -15px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.section-component-ui .component-container .component-list li {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc(33.333% - 30px);
          flex: 0 0 calc(33.333% - 30px);
  margin: 15px;
}
.section-component-ui .component-container .component-list .box-gray {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 170px;
  background-color: #f7f9fc;
  border: 1px solid #d8dee5;
  border-radius: 12px;
}
.section-component-ui .component-container .component-list .box-gray img {
  height: 138px;
  -o-object-fit: contain;
     object-fit: contain;
}
.section-component-ui .component-container .component-list .title {
  margin-top: 8px;
}
.section-work-ui {
  padding: 80px 0 75px;
  background-color: #f4f7fb;
}
.section-work-ui .container .section-body ul, .section-work-ui .sticky-container .section-body ul {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.section-work-ui .container .section-body ul li, .section-work-ui .sticky-container .section-body ul li {
  width: 50%;
  padding-right: 16px;
}
.section-work-ui .container .section-body ul li:nth-child(2n), .section-work-ui .sticky-container .section-body ul li:nth-child(2n) {
  padding-left: 16px;
  padding-right: 0;
}
.section-work-ui .container .section-body ul li:nth-child(n+3), .section-work-ui .sticky-container .section-body ul li:nth-child(n+3) {
  margin-top: 27px;
}
.section-work-ui .container .section-body ul img, .section-work-ui .sticky-container .section-body ul img {
  width: 100%;
}
.section-project.bg-dark-gray {
  padding: 0;
}
@media (max-width: 767.98px) {
  .section-project.bg-dark-gray {
    padding: 74px 0 0;
  }
}
.section-project.bg-dark-gray .container, .section-project.bg-dark-gray .sticky-container {
  padding: 120px 64px 80px;
}
@media (min-width: 1025px) {
  .section-project.bg-dark-gray .container .project-item-lg:hover, .section-project.bg-dark-gray .sticky-container .project-item-lg:hover {
    -webkit-box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
            box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
    -webkit-transition: 0.5s ease-out;
    transition: 0.5s ease-out;
  }
  .section-project.bg-dark-gray .container .project-item-lg:focus-within, .section-project.bg-dark-gray .sticky-container .project-item-lg:focus-within {
    -webkit-box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
            box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
    -webkit-transition: 0.5s ease-out;
    transition: 0.5s ease-out;
  }
}
@media (max-width: 1024.98px) {
  .section-solution-visual {
    position: relative;
    padding: 80px 64px;
    color: #484e57;
  }
  .section-solution-visual.blue, .section-solution-visual.indigo, .section-solution-visual.pink {
    background: #fff;
  }
  .section-solution-visual.blue:before, .section-solution-visual.indigo:before, .section-solution-visual.pink:before {
    display: none;
  }
  .section-solution-visual.blue:after, .section-solution-visual.indigo:after, .section-solution-visual.pink:after {
    display: none;
  }
  .section-solution-visual .container, .section-solution-visual .sticky-container {
    padding: 0;
  }
  .section-solution-visual .container .section-body, .section-solution-visual .sticky-container .section-body {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .section-solution-visual .container .section-body .project-info, .section-solution-visual .sticky-container .section-body .project-info {
    width: 100%;
  }
  .section-solution-visual .container .section-body .project-info .project-title .tag-list .tag, .section-solution-visual .sticky-container .section-body .project-info .project-title .tag-list .tag {
    background: #e9eef4;
    color: #484e57;
  }
  .section-solution-visual .container .section-body .project-info .project-content, .section-solution-visual .sticky-container .section-body .project-info .project-content {
    border-top: 1px solid #e9eef4;
  }
  .section-solution-visual .container .section-body .project-info .project-content .project-check-list li, .section-solution-visual .sticky-container .section-body .project-info .project-content .project-check-list li {
    position: relative;
    padding-left: 24px;
    color: #7b838c;
  }
  .section-solution-visual .container .section-body .project-info .project-content .project-check-list li:before, .section-solution-visual .sticky-container .section-body .project-info .project-content .project-check-list li:before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 2px;
    left: 0;
    background: url(../images/ico-bul-gray@2x.png) center center no-repeat;
    background-size: 16px;
  }
  .section-solution-visual .container .section-body .project-info .project-content .project-check-list li + li, .section-solution-visual .sticky-container .section-body .project-info .project-content .project-check-list li + li {
    margin-top: 12px;
  }
  .section-solution-visual .container .section-body .project-img, .section-solution-visual .sticky-container .section-body .project-img {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: relative;
    z-index: 50;
    width: 100%;
    height: 594px;
    border-radius: 12px;
    margin-top: 40px;
  }
  .section-solution-visual .container .section-body .project-img img, .section-solution-visual .sticky-container .section-body .project-img img {
    width: 100%;
    z-index: 100;
  }
  .section-solution-visual.blue .project-img {
    background: linear-gradient(36.41deg, #244fc6 7.04%, #537ce9 100%);
  }
  .section-solution-visual.blue .project-img:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 352px;
    height: 184px;
    background: url(../images/bg-work-tablet-top-blue.png) 0 0 no-repeat;
    background-size: cover;
    border-top-left-radius: 12px;
    z-index: 0;
  }
  .section-solution-visual.blue .project-img:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 440px;
    height: 494px;
    background: url(../images/bg-work-tablet-bottom-blue.png) 0 0 no-repeat;
    background-size: cover;
    border-bottom-right-radius: 12px;
    z-index: 0;
  }
  .section-solution-visual.indigo .project-img {
    background: linear-gradient(36.41deg, #003b67 7.04%, #045999 100%);
  }
  .section-solution-visual.indigo .project-img:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 352px;
    height: 184px;
    background: url(../images/bg-work-tablet-top-indigo.png) 0 0 no-repeat;
    background-size: cover;
    border-top-left-radius: 12px;
    z-index: 0;
  }
  .section-solution-visual.indigo .project-img:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 440px;
    height: 494px;
    background: url(../images/bg-work-tablet-bottom-indigo.png) 0 0 no-repeat;
    background-size: cover;
    border-bottom-right-radius: 12px;
    z-index: 0;
  }
  .section-solution-visual.pink .project-img {
    background: linear-gradient(36.41deg, #f54090 7.04%, #ff84ba 100%);
  }
  .section-solution-visual.pink .project-img:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 352px;
    height: 184px;
    background: url(../images/bg-work-tablet-top-pink.png) 0 0 no-repeat;
    background-size: cover;
    border-top-left-radius: 12px;
    z-index: 0;
  }
  .section-solution-visual.pink .project-img:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 440px;
    height: 494px;
    background: url(../images/bg-work-tablet-bottom-pink.png) 0 0 no-repeat;
    background-size: cover;
    border-bottom-right-radius: 12px;
    z-index: 0;
  }
  .section-work-ui {
    padding: 80px 64px 75px;
  }
  .section-work-ui .container, .section-work-ui .sticky-container {
    padding: 0;
  }
  .section-component-ui .container, .section-component-ui .sticky-container {
    padding-left: 64px;
    padding-right: 64px;
  }
  .section-component-ui .component-container .component-item dl {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .section-component-ui .component-container .component-item dl dt {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    margin-bottom: 20px;
  }
  .section-component-ui .component-container .component-item + .component-item {
    margin-top: 48px;
    padding-top: 48px;
  }
  .section-component-ui .component-container .component-list {
    margin: -16px -30px -16px -12px;
  }
  .section-component-ui .component-container .component-list li {
    margin: 16px 12px;
    width: calc(33.333% - 24px);
  }
  .section-framework .container, .section-framework .sticky-container {
    padding: 120px 64px;
  }
  .section-framework .container .section-body, .section-framework .sticky-container .section-body {
    margin-top: 48px;
  }
  .section-framework .container .section-body > ul > li:not(:last-child), .section-framework .sticky-container .section-body > ul > li:not(:last-child) {
    margin-right: 24px;
  }
  .section-framework .container .section-body > ul > li .project-img .hover-area, .section-framework .sticky-container .section-body > ul > li .project-img .hover-area {
    display: none;
  }
  .section-framework .container .section-body > ul > li .project-img .hover-area span, .section-framework .sticky-container .section-body > ul > li .project-img .hover-area span {
    display: none;
  }
  .section-project.bg-dark-gray {
    padding: 0;
  }
  .section-project.bg-dark-gray .container, .section-project.bg-dark-gray .sticky-container {
    padding: 120px 64px 104px;
  }
}
@media (max-width: 767.98px) {
  .section-solution-visual {
    padding: 80px 24px;
  }
  .section-solution-visual .container .section-body .project-img, .section-solution-visual .sticky-container .section-body .project-img {
    height: 217px;
  }
  .section-solution-visual .container .section-body .project-img:before, .section-solution-visual .sticky-container .section-body .project-img:before {
    width: 128.46px;
    height: 67.15px;
  }
  .section-solution-visual .container .section-body .project-img:after, .section-solution-visual .sticky-container .section-body .project-img:after {
    width: 160.58px;
    height: 180.29px;
  }
  .section-solution-visual .container .section-body .project-img img, .section-solution-visual .sticky-container .section-body .project-img img {
    width: auto;
    height: 100%;
    z-index: 100;
    -o-object-fit: contain;
       object-fit: contain;
  }
  .section-work-ui {
    padding: 64px 24px 59px;
  }
  .section-work-ui .container .section-body ul, .section-work-ui .sticky-container .section-body ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .section-work-ui .container .section-body ul li, .section-work-ui .sticky-container .section-body ul li {
    width: 100%;
    padding-right: 0;
  }
  .section-work-ui .container .section-body ul li:not(:first-child), .section-work-ui .sticky-container .section-body ul li:not(:first-child) {
    margin-top: 7px;
  }
  .section-work-ui .container .section-body ul li:nth-child(2n), .section-work-ui .sticky-container .section-body ul li:nth-child(2n) {
    padding-left: 0;
    padding-right: 0;
  }
  .section-work-ui .container .section-body ul li:nth-child(n+3), .section-work-ui .sticky-container .section-body ul li:nth-child(n+3) {
    margin-top: 7px;
  }
  .section-component-ui .container, .section-component-ui .sticky-container {
    padding: 80px 24px;
  }
  .section-component-ui .component-container .component-list {
    margin: -16px -12px;
  }
  .section-component-ui .component-container .component-list li {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
    margin: 16px 12px;
    width: 100;
  }
  .section-framework .container, .section-framework .sticky-container {
    padding: 80px 24px;
  }
  .section-framework .container .section-body, .section-framework .sticky-container .section-body {
    margin-top: 45px;
  }
  .section-framework .container .section-body > ul, .section-framework .sticky-container .section-body > ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .section-framework .container .section-body > ul > li, .section-framework .sticky-container .section-body > ul > li {
    width: 100%;
  }
  .section-framework .container .section-body > ul > li:not(:last-child), .section-framework .sticky-container .section-body > ul > li:not(:last-child) {
    margin-bottom: 24px;
  }
  .section-framework .container .section-body > ul > li .project-img, .section-framework .sticky-container .section-body > ul > li .project-img {
    width: 100%;
  }
  .section-framework .container .section-body > ul > li .project-img img, .section-framework .sticky-container .section-body > ul > li .project-img img {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    border-radius: 12px;
  }
  .section-framework .container .section-body > ul > li:not(:last-child), .section-framework .sticky-container .section-body > ul > li:not(:last-child) {
    margin-right: 24px;
  }
  .section-project.bg-dark-gray .container, .section-project.bg-dark-gray .sticky-container {
    padding: 80px 24px 74px;
  }
}

.project-container-lg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 40px -18px;
}
.project-container-lg .project-item-lg {
  position: relative;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 484px;
          flex: 0 0 484px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0 18px;
  padding-bottom: 82px;
  border-radius: 12px;
  background-color: #fff;
  -webkit-filter: drop-shadow(0px 10px 20px rgba(72, 78, 87, 0.04));
          filter: drop-shadow(0px 10px 20px rgba(72, 78, 87, 0.04));
  overflow: hidden;
}
.project-container-lg .project-item-lg .project-header {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 321px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
}
.project-container-lg .project-item-lg .project-header .project-img {
  border-radius: 10px;
  overflow: hidden;
  z-index: 50;
}
.project-container-lg .project-item-lg .project-header .project-img img {
  width: 484px;
  height: 321px;
  -o-object-fit: contain;
     object-fit: contain;
}
.project-container-lg .project-item-lg .project-header .project-img img.img-thumb-md {
  width: 650px;
  height: 400px;
}
.project-container-lg .project-item-lg .project-header:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 190px;
  height: 100px;
  z-index: 0;
}
.project-container-lg .project-item-lg .project-header:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 238px;
  height: 268px;
  z-index: 0;
}
.project-container-lg .project-item-lg .project-header.indigo {
  background: linear-gradient(36.41deg, #003b67 7.04%, #045999 100%);
}
.project-container-lg .project-item-lg .project-header.indigo:before {
  background: url(../images/bg-card-top-indigo.png) 0 0 no-repeat;
  background-size: cover;
}
.project-container-lg .project-item-lg .project-header.indigo:after {
  background: url(../images/bg-card-bottom-indigo.png) 0 0 no-repeat;
  background-size: cover;
}
.project-container-lg .project-item-lg .project-header.blue {
  background: linear-gradient(36.41deg, #244fc6 7.04%, #537ce9 100%);
}
.project-container-lg .project-item-lg .project-header.blue:before {
  background: url(../images/bg-card-top-blue.png) 0 0 no-repeat;
  background-size: cover;
}
.project-container-lg .project-item-lg .project-header.blue:after {
  background: url(../images/bg-card-bottom-blue.png) 0 0 no-repeat;
  background-size: cover;
}
.project-container-lg .project-item-lg .project-header.pink {
  background: linear-gradient(36.41deg, #f54090 7.04%, #ff84ba 100%);
}
.project-container-lg .project-item-lg .project-header.pink:before {
  background: url(../images/bg-card-top-pink.png) 0 0 no-repeat;
  background-size: cover;
}
.project-container-lg .project-item-lg .project-header.pink:after {
  background: url(../images/bg-card-bottom-pink.png) 0 0 no-repeat;
  background-size: cover;
}
.project-container-lg .project-item-lg .project-body {
  width: 100%;
  height: 269px;
  padding: 32px 28px 28px;
  text-align: left;
  color: #7b838c;
  background: #fff;
}
.project-container-lg .project-item-lg .project-body .title {
  font-size: 28px;
  line-height: 36px;
  color: #484e57;
  font-weight: bold;
}
.project-container-lg .project-item-lg .project-body .tag-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 10px;
}
.project-container-lg .project-item-lg .project-body .tag-list li + li {
  margin-left: 6px;
}
.project-container-lg .project-item-lg .project-body .tag-list .tag {
  background-color: #e9eef4;
  padding: 5px 10px;
  height: 28px;
  border-radius: 14px;
  font-size: 14px;
  color: #484e57;
}
.project-container-lg .project-item-lg .project-body .tag-list .tag::before {
  content: "#";
}
.project-container-lg .project-item-lg .project-body .project-content {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #e9eef4;
}
.project-container-lg .project-item-lg .project-body .project-check-list li {
  position: relative;
  padding-left: 24px;
}
.project-container-lg .project-item-lg .project-body .project-check-list li:before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 2px;
  left: 0;
  background: url(../images/ico-bul-gray@2x.png) center center no-repeat;
  background-size: 16px;
}
.project-container-lg .project-item-lg .project-body .project-check-list li + li {
  margin-top: 12px;
}
.project-container-lg .project-item-lg .project-body .btn-more {
  position: absolute;
  bottom: 28px;
  left: 28px;
  min-width: 138px;
  height: 48px;
  font-size: 14px;
  border-radius: 24px;
  border: 1px solid #cad1d8;
  color: #484e57;
  font-weight: bold;
}
.project-container-lg .project-item-lg .project-body .btn-more .ico {
  margin-left: 5px;
}
@media (max-width: 1024.98px) {
  .project-container-lg {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 0;
    margin: 28px 0 0;
  }
  .project-container-lg .project-item-lg {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    margin: 16px 0;
    padding-bottom: 78px;
  }
  .project-container-lg .project-item-lg .project-header {
    height: 400px;
  }
  .project-container-lg .project-item-lg .project-header:before {
    content: "";
    width: 230px;
    height: 128px;
    z-index: 0;
  }
  .project-container-lg .project-item-lg .project-header:after {
    content: "";
    width: 300px;
    height: 319px;
    z-index: 0;
  }
}
@media (max-width: 767.98px) {
  .project-container-lg {
    margin-top: 25px;
  }
  .project-container-lg .project-item-lg {
    padding-bottom: 78px;
  }
  .project-container-lg .project-item-lg .project-header {
    height: 218px;
  }
  .project-container-lg .project-item-lg .project-header:before {
    content: "";
    width: 130.13px;
    height: 71.74px;
    z-index: 0;
  }
  .project-container-lg .project-item-lg .project-header:after {
    content: "";
    width: 166.84px;
    height: 176.85px;
    z-index: 0;
  }
  .project-container-lg .project-item-lg .project-header .project-img {
    width: 327px;
    height: 216px;
  }
  .project-container-lg .project-item-lg .project-header .project-img img {
    width: 327px;
    height: 216px;
  }
}

/** @format */
.story-content {
  background-color: #fff !important;
  min-height: calc(100vh - 444px);
}
.story-content .story-container {
  max-width: 1368px;
  margin: 0 auto;
}
.story-content .stroy-body {
  margin-top: 30px;
  margin-bottom: 120px;
}
.story-content .stroy-body .hightlight {
  color: #F54090;
}
.story-content .pagination {
  margin: 60px -2px 0 -2px;
}
.story-content .pagination > * {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-left: 2px;
  margin-right: 2px;
  line-height: 40px;
  font-weight: 400;
  font-size: 15px;
  vertical-align: middle;
}
.story-content .pagination a {
  text-align: center;
  color: #a4acb7;
}
.story-content .pagination .direction {
  background-size: 24px 24px;
  background-image: url(../images/ico-chevron-left-lightgray-xl@2x.png);
  background-repeat: no-repeat;
  background-position: center center;
  text-indent: -9999px;
  overflow: hidden;
}
.story-content .pagination .direction.first {
  background-image: url(../images/ico-chevron-first-lightgray-xl@2x.png);
}
.story-content .pagination .direction.next {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.story-content .pagination .direction.last {
  background-image: url(../images/ico-chevron-first-lightgray-xl@2x.png);
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.story-content .pagination strong {
  background-color: #ffe1ee;
  color: #F54090;
  border-radius: 7px;
}
.story-content .story-container {
  padding: 0 64px;
}
@media (max-width: 1024.98px) {
  .story-content .story-container {
    padding: 0 24px;
  }
}
@media (max-width: 767.98px) {
  .story-content .pagination > * {
    width: 36px;
    height: 36px;
    line-height: 36px;
  }
}

.story-header .title-area {
  padding-top: 48px;
  height: 175px;
  margin-bottom: 26px;
  border-bottom: 1px solid #E9EEF4;
}
.story-header .story-title {
  margin-bottom: 8px;
  font-size: 37px;
  line-height: 48px;
}
.story-header .desc {
  font-size: 16px;
  color: #374151;
  font-weight: 400;
}
.story-header .desc strong {
  font-weight: normal;
}
.story-header .story-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  overflow: hidden;
}
.story-header .search-area {
  position: relative;
  width: 27px;
  height: 50px;
  -webkit-transition: width 0.3s;
  transition: width 0.3s;
  visibility: hidden;
}
.story-header .search-area .form-search {
  position: relative;
  width: 320px;
  margin-left: 30px;
  border-bottom: 1px solid #CAD1D8;
  display: none;
}
.story-header .search-area .form-search .btn-search {
  display: none;
}
.story-header .search-area .keyword {
  width: 100%;
  height: 48px;
  padding: 12px 35px;
  border: 0;
  font-size: 16px;
  color: #0F172A;
  background-color: transparent;
}
.story-header .search-area .keyword::-webkit-input-placeholder {
  color: #a4acb7;
}
.story-header .search-area .keyword::-moz-placeholder {
  color: #a4acb7;
}
.story-header .search-area .keyword:-ms-input-placeholder {
  color: #a4acb7;
}
.story-header .search-area .keyword::-ms-input-placeholder {
  color: #a4acb7;
}
.story-header .search-area .keyword::placeholder {
  color: #a4acb7;
}
.story-header .search-area .btn-search {
  display: block;
  position: absolute;
  top: 10px;
  left: 0;
  visibility: visible;
  z-index: 10;
}
.story-header .search-area .btn-search .ico-search {
  display: inline-block;
  width: 28px;
  height: 28px;
  background-image: url(../images/ico-search-lg-darkgray@2x.png);
  background-size: 28px;
  vertical-align: middle;
}
.story-header .search-area .btn-search:hover .ico-search {
  background-image: url(../images/ico-search-lg-hover-gray@2x.png);
}
.story-header .search-area .btn-reset {
  position: absolute;
  top: 10px;
  right: 0;
  display: none;
}
.story-header .search-area.on {
  width: 320px;
  visibility: visible;
}
.story-header .search-area.on > .btn-search {
  display: none;
}
.story-header .search-area.on .form-search {
  margin-left: 0;
  display: block;
}
.story-header .search-area.on .form-search .btn-search {
  display: block;
}
.story-header .search-area.on .form-search .btn-reset {
  display: block;
}
@media (max-width: 1024.98px) {
  .story-header .search-area.on {
    width: 35%;
  }
  .story-header .search-area .form-search {
    width: initial;
  }
}
@media (max-width: 767.98px) {
  .story-header .title-area {
    padding-top: 80px;
    text-align: center;
    height: 264px;
    margin-bottom: 6px;
  }
  .story-header .story-nav {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .story-header .tab-menu {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .story-header .tab-menu li a {
    min-width: 40px;
    height: 32px;
    border-radius: 10px;
  }
  .story-header .tab-menu li span {
    font-size: 13px;
  }
  .story-header .search-area {
    -ms-flex-item-align: end;
        align-self: flex-end;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    width: 28px;
    height: 48px;
    margin-bottom: 8px;
  }
  .story-header .search-area .form-search {
    width: 100%;
  }
  .story-header .search-area.on {
    width: 100%;
  }
}

.stroy-body .search-result {
  margin-bottom: 16px;
}
.stroy-body .search-result .result-title {
  display: inline-block;
  font-size: 24px;
  line-height: 35px;
  vertical-align: middle;
}
.stroy-body .search-result .result-hash {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  padding-left: 16px;
  margin-left: 13px;
}
.stroy-body .search-result .result-hash:before {
  content: "";
  position: absolute;
  top: calc(50% - 8px);
  left: 0;
  width: 1px;
  height: 16px;
  background-color: #cad1d8;
}
.stroy-body .search-result .result-hash .hash-tag-list {
  margin: -2.5px;
}
.stroy-body .search-result .result-hash .hash-tag-list .hightlight {
  border-width: 0;
  height: 34px;
  min-width: 90px;
  padding: 0 9px;
  font-size: 16px;
  border-radius: 17px;
  background-color: #ffe1ee;
}
.stroy-body .search-result .result-hash .hash-tag-list .btn-close {
  display: inline-block;
  width: 16.5px;
  height: 16px;
  margin-top: -1px;
  margin-left: 4px;
  background: url(../images/ico-close-sm-primary@2x.png) 0 0 no-repeat;
  background-size: 16.5px 16px;
  text-indent: -9999px;
  overflow: hidden;
  vertical-align: text-top;
}
.stroy-body .hash-tag-list {
  margin-top: 24px;
}
.stroy-body .hash-tag-list li {
  margin: 2.5px;
}
.stroy-body .hash-tag-list li .tag {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 0 8px;
  height: 24px;
  border-radius: 14px;
  font-size: 12px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #F3F4F6;
  color: #484e57;
  border: 1px solid transparent;
}
.stroy-body .hash-tag-list li .tag:before {
  content: "#";
  display: inline-block;
  margin-right: 1px;
}
.stroy-body .hash-tag-list li .tag.hightlight {
  background-color: #fff5f9;
  border-color: #ffbdda;
  color: #F54090;
}
.stroy-body .empty-area {
  margin-top: 109px;
  margin-bottom: 83px;
  text-align: center;
}
.stroy-body .empty-area .ico-nodata {
  display: inline-block;
  width: 84px;
  height: 100px;
  background: url(../images/img-nodata@2x.png) 0 0 no-repeat;
  background-size: 84px 100px;
}
.stroy-body .empty-area strong {
  display: block;
  margin-top: 16px;
  font-size: 20px;
  line-height: 24px;
  color: #374151;
}

.masonry-container {
  width: calc(100% + 33px);
  margin: -16.5px;
}
@media (max-width: 767.98px) {
  .masonry-container {
    width: 100%;
    margin: -8px 0;
  }
}

.story-item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: calc(33.333% - 33px);
  height: 519px;
  margin: 16.5px;
  border: 1px solid #CAD1D8;
  border-radius: 12px;
  background: #fff;
}
.story-item .hightlight {
  color: #F54090;
  background-color: transparent;
}
.story-item .item-header {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  height: 260px;
  line-height: 1;
  border-radius: 11px 11px 0 0;
  overflow: hidden;
}
.story-item .item-header img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  vertical-align: top;
}
.story-item .item-body {
  padding: 24px 24px 0 24px;
}
.story-item .item-body .category {
  display: block;
  margin-bottom: 8px;
  font-style: normal;
  color: #4B5563;
  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
}
.story-item .item-body .subject {
  margin-bottom: 6px;
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  color: #374151;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  max-height: 56px;
  line-height: 28px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.story-item .item-body .desc {
  font-size: 16px;
  line-height: 24px;
  color: #374151;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  max-height: 48px;
  line-height: 24px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.story-item .item-footer {
  padding: 0 20px 23px;
}
.story-item .item-footer .hash-tag-list {
  margin: 0px;
  min-height: auto;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  -ms-flex-line-pack: end;
      align-content: flex-end;
}
.story-item .item-footer .hash-tag-list li {
  margin: 5px 2.5px 0px;
}
.story-item .link {
  position: absolute;
  top: 20px;
  right: 18px;
  width: 40px;
  height: 40px;
  line-height: 36px;
  border-radius: 20px;
  background-color: #fff;
  border: 1px solid #E9EEF4;
  text-align: center;
}
.story-item.tip .subject {
  margin-bottom: 17px;
}
.story-item.tip.tip-sm {
  height: 274px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.story-item.tip .item-header {
  height: 227px;
  padding: 1px 25px;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
.story-item.tip .item-header img {
  overflow: hidden;
  border-radius: 12px;
  outline: 1px solid #E9EEF4;
}
.story-item.tip .item-body {
  padding: 24px 23px 0 23px;
}
.story-item.tip .item-body .box-tip {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 15px;
  border-radius: 12px;
  border: 1px solid #fff3ca;
  background-color: #fffae8;
}
.story-item.tip .item-body .box-tip .ico-tip {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-image: url(../images/img-lightbulb.png);
  background-size: 32px 32px;
  background-repeat: no-repeat;
}
.story-item.tip .item-body .subject {
  display: block;
  max-height: 100%;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  overflow: visible;
}
.story-item.tip .item-body .img {
  width: 100%;
  height: 228px;
  margin-top: 15px;
  border-radius: 12px;
  overflow: hidden;
  line-height: 1;
  border: 1px solid #E9EEF4;
}
.story-item.tip .item-body .img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.story-item.tip .item-footer {
  height: 100%;
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
  padding: 12px 23px 24px;
}
.story-item.tip .item-footer .hash-tag-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.story-item > a {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  display: block;
}
.story-item > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-radius: 12px;
  -webkit-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}
@media (min-width: 768px) {
  .story-item > a:hover:before, .story-item > a:focus:before {
    -webkit-box-shadow: 0px 8px 15px rgba(66, 73, 80, 0.15);
            box-shadow: 0px 8px 15px rgba(66, 73, 80, 0.15);
    -webkit-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
  }
}
@media (max-width: 1300px) {
  .story-item {
    height: auto;
  }
  .story-item .item-footer {
    padding: 20px 23px;
  }
}
@media (max-width: 1024.98px) {
  .story-item {
    width: calc(50% - 33px);
    max-height: none;
  }
  .story-item .item-body .subject {
    display: block;
    height: auto;
    max-height: none;
  }
  .story-item.tip .subject {
    margin-bottom: 17px;
  }
  .story-item.tip.tip-sm {
    height: auto;
  }
  .story-item.tip.tip-sm .subject {
    margin-bottom: 7px;
  }
  .story-item.tip .item-body .subject {
    display: block;
    height: auto;
    max-height: none;
  }
  .story-item.tip .item-footer {
    margin-top: 11px;
  }
}
@media (max-width: 767.98px) {
  .story-item {
    width: 100%;
    height: auto;
    margin: 8px 0;
  }
  .story-item .item-header {
    height: 216px;
  }
  .story-item.tip .subject {
    margin-bottom: 17px;
  }
  .story-item.tip.tip-sm {
    height: auto;
  }
  .story-item.tip.tip-sm .subject {
    margin-bottom: 7px;
  }
  .story-item.tip .item-body .img {
    height: 186px;
  }
}
@media (min-width: 1025px) and (max-width: 1085px) {
  .story-item.tip .subject {
    margin-bottom: 17px;
  }
  .story-item.tip.tip-sm {
    height: auto;
  }
  .story-item.tip.tip-sm .subject {
    margin-bottom: 7px;
  }
  .story-item.tip .item-body .img {
    height: 186px;
  }
}

/** @format */
@media (min-width: 1025px) {
  #header + .container .article-wrap, #header + .sticky-container .article-wrap {
    margin-top: 64px;
  }
}
@media (max-width: 1024.98px) {
  #header + .container .article-wrap, #header + .sticky-container .article-wrap {
    margin-top: 57px;
  }
}

.article-wrap {
  max-width: 640px;
  margin: 0 auto;
  margin-bottom: 60px;
}
.article-wrap .article-header {
  padding: 50px 0 0px 0;
}
.article-wrap .article-header::after {
  content: "";
  width: 100%;
  height: 1px;
  display: block;
  background: #cad1d8;
  margin: 27px 0 33px;
}
.article-wrap .article-header .content-title {
  font-size: 36px;
  font-weight: bold;
  line-height: 130%;
  color: #0F172A;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
}
.article-wrap .article-header .info .date {
  font-size: 14px;
  color: #4B5563;
}
.article-wrap .article-body {
  width: 100%;
}
.article-wrap .article-body .txt-bold {
  font-weight: 700 !important;
}
.article-wrap .article-body ul.bul_type {
  padding-top: 8px;
  padding-left: 22px;
  position: relative;
}
.article-wrap .article-body ul.bul_type li {
  position: relative;
  color: #374151;
}
.article-wrap .article-body ul.bul_type li::before {
  content: "";
  position: absolute;
  top: 10.5px;
  left: -14px;
  width: 4px;
  height: 4px;
  background: #374151;
  border-radius: 50%;
}
.article-wrap .article-body ul.bul_type + .title1 {
  margin-top: 48px;
}
.article-wrap .article-body ul.bul_type + p {
  padding-top: 16px;
}
.article-wrap .article-body ul.bul_type + .title2 {
  margin-top: 36px;
}
.article-wrap .article-body ul.story-list {
  padding-top: 8px;
  padding-left: 14px;
  position: relative;
}
.article-wrap .article-body ul.story-list li {
  position: relative;
  color: #374151;
}
.article-wrap .article-body ul.story-list li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: -14px;
  width: 4px;
  height: 4px;
  background: #374151;
  border-radius: 50%;
}
.article-wrap .article-body ul.story-list li + li:not(:first-child) {
  margin-top: 6px;
}
.article-wrap .article-body ul.story-list + .title1 {
  margin-top: 48px;
}
.article-wrap .article-body ul.story-list + p {
  padding-top: 16px;
}
.article-wrap .article-body ul.story-list + .title2 {
  margin-top: 36px;
}
.article-wrap .article-body ul.story-list p + .infographic-area {
  margin-top: 20px;
}
.article-wrap .article-body ol.story-step-list {
  padding-top: 16px;
  position: relative;
}
.article-wrap .article-body ol.story-step-list li + li:not(:first-child) {
  margin-top: 6px;
}
.article-wrap .article-body ol.story-step-list p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.article-wrap .article-body ol.story-step-list p .num {
  min-width: 14px;
  margin-right: 2px;
}
.article-wrap .article-body ol.story-step-list p + .infographic-area {
  margin-top: 20px;
}
.article-wrap .article-body ol.story-step-list + .title1 {
  margin-top: 48px;
}
.article-wrap .article-body ol.story-step-list + p {
  padding-top: 16px;
}
.article-wrap .article-body ol.story-step-list + .title2 {
  margin-top: 36px;
}
.article-wrap .article-body .title1 {
  font-weight: bold;
  font-size: 28px;
  line-height: 128%;
  color: #1F2937;
  margin: 26px 0 16px;
  padding-left: 0px;
}
.article-wrap .article-body .title1:before {
  top: 0;
  margin-right: 0;
  display: none;
}
.article-wrap .article-body .title2 {
  font-weight: bold;
  font-size: 18px;
  line-height: 150%;
  color: #1F2937;
  margin: 36px 0px 8px;
  padding-left: 0px;
}
.article-wrap .article-body .title2.type2 {
  margin-bottom: 16px;
}
.article-wrap .article-body .title2 + .bul_type {
  padding-top: 0px;
}
.article-wrap .article-body .title2:before {
  top: 0;
  margin-right: 0;
  display: none;
}
.article-wrap .article-body p {
  font-weight: normal;
  font-size: 16px;
  line-height: 150%;
  color: #374151;
  margin: 0px;
  word-break: break-all;
}
.article-wrap .article-body p + p {
  margin-top: 24px;
}
.article-wrap .article-body p + .title1 {
  margin-top: 56px;
}
.article-wrap .article-body p + .title2 {
  margin-top: 36px;
}
.article-wrap .article-body p + .bul_type {
  padding-top: 16px;
}
.article-wrap .article-body p + .story-list {
  padding-top: 36px;
}
.article-wrap .article-body .infographic_area,
.article-wrap .article-body .infographic-area {
  display: block;
  margin: 80px auto;
  text-align: center;
}
.article-wrap .article-body .infographic_area + .title1,
.article-wrap .article-body .infographic-area + .title1 {
  margin-top: 0;
}
.article-wrap .article-body .infographic_area + .title2,
.article-wrap .article-body .infographic-area + .title2 {
  margin-top: 0;
}
.article-wrap .article-body .infographic_area + .title3,
.article-wrap .article-body .infographic-area + .title3 {
  margin-top: 0;
}
.article-wrap .article-body .infographic_area .img,
.article-wrap .article-body .infographic-area .img {
  display: inline-block;
}
.article-wrap .article-body .infographic_area .img img,
.article-wrap .article-body .infographic-area .img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 11px;
  -o-object-fit: cover;
     object-fit: cover;
}
.article-wrap .article-body .infographic_area .img.bg-none img,
.article-wrap .article-body .infographic-area .img.bg-none img {
  border: 1px solid #d8dee5;
}
.article-wrap .article-body .infographic_area figcaption,
.article-wrap .article-body .infographic-area figcaption {
  display: block;
  font-weight: normal;
  font-size: 14px;
  line-height: 150%;
  margin-top: 5px;
  padding-left: 3px;
  padding-right: 3px;
  border: none;
  text-align: left;
  color: #4B5563;
}
.article-wrap .article-footer {
  margin-top: 60px;
}
.article-wrap .article-footer .tag-wrap {
  width: 100%;
  height: auto;
  margin-bottom: 25px;
}
.article-wrap .article-footer .tag-wrap dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.article-wrap .article-footer .tag-wrap dl dt {
  position: relative;
}
.article-wrap .article-footer .tag-wrap dl dt.tag-title {
  margin-right: 25px;
  padding-right: 12px;
  width: 28px;
  height: 28px;
  background: #f7f9fc;
  border: 1px solid #cad1d8;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: inline-block;
  border-radius: 50%;
  text-align: center;
}
.article-wrap .article-footer .tag-wrap dl dt.tag-title .ico.ico-tag-darkgray-lg {
  background: url(../images/ico-tag-darkgray-lg@2x.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 20px;
  height: 20px;
  margin-left: 3px;
  margin-top: 3px;
  display: block;
}
.article-wrap .article-footer .tag-wrap dl dt:after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 16px;
  background: #cad1d8;
  position: absolute;
  top: calc(50% - 8px);
  right: -13px;
}
.article-wrap .article-footer .tag-wrap dl dd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.article-wrap .article-footer .tag-wrap dl dd a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 28px;
  background: #e9eef4;
  border-radius: 100px;
  margin: 2.5px 9px 2.5px 0;
  padding: 0px 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
  font-weight: normal;
  font-size: 14px;
  line-height: 115%;
  color: #484e57;
}
.article-wrap .article-footer .tag-wrap dl dd a .tag {
  margin-top: 1px;
}
.article-wrap .article-footer .tag-wrap dl dd a .tag::before {
  content: "#";
  margin-right: 1px;
}
.article-wrap .article-footer .btn-story-link {
  width: 163px;
  background: #fff5f9;
  border: 1px solid #ffbdda;
  padding: 2px 24px 0px 28px;
}
.article-wrap .article-footer .btn-story-link span {
  font-weight: bold;
  font-size: 14px;
  line-height: 115%;
  color: #f54090;
}
.article-wrap .article-footer .btn-story-link .ico.ico-link-brand-md {
  background: url(../images/ico-link-brand-md@2x.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 16px;
  height: 16px;
  display: inline-block;
}
.article-wrap .article-footer .btn-story-link:hover {
  background: #ffe1ee;
}
.article-wrap .article-footer::after {
  content: "";
  width: 100%;
  height: 1px;
  display: block;
  background: #cad1d8;
  margin: 40px 0 40px;
}
.article-wrap .btn-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.article-wrap .btn-area .btn-back {
  padding: 0px 27.25px;
  color: #484e57;
}
.article-wrap .profile-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding: 32px 40px 32px 40px;
  margin-top: 80px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
}
.article-wrap .profile-section .thumb {
  display: block;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 80px;
          flex: 0 0 80px;
  width: 80px;
  height: 80px;
  margin-right: 12px;
  border-radius: 50%;
  overflow: hidden;
}
.article-wrap .profile-section .thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.article-wrap .profile-section > div {
  width: 100%;
}
.article-wrap .profile-section > div .user-info * {
  display: inline-block;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  color: #1F2937;
  vertical-align: middle;
  line-height: 24px;
}
.article-wrap .profile-section > div .user-info strong {
  font-size: 20px;
  font-weight: 700;
  color: #484e57;
}
.article-wrap .profile-section > div .user-info .group-area {
  width: auto;
  white-space: nowrap;
  margin-left: 2px;
}
.article-wrap .profile-section > div .user-info .group-area em {
  position: relative;
  height: 12px;
  padding-right: 7px;
  margin-right: 5px;
  line-height: 12px;
  color: #4B5563;
}
.article-wrap .profile-section > div .user-info .group-area em::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -2px;
  width: 1px;
  height: 12px;
  background: #CAD1D8;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.article-wrap .profile-section > div .user-info .group-area span {
  white-space: nowrap;
  color: #4B5563;
}
.article-wrap .profile-section > div .desc {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  color: #374151;
  letter-spacing: -0.3;
}
@media (max-width: 767.98px) {
  .article-wrap .article-header {
    padding-top: 43px;
  }
  .article-wrap .article-header .content-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
  }
  .article-wrap .article-header .info {
    margin-top: -1px;
  }
  .article-wrap .article-header::after {
    margin-top: 28px;
  }
  .article-wrap .article-body .tag-wrap .tag-title {
    -ms-flex-item-align: start;
        align-self: flex-start;
  }
  .article-wrap .profile-section {
    position: relative;
    display: block;
    padding: 28px 24px;
    margin-bottom: 60px;
    border-radius: 12px;
  }
  .article-wrap .profile-section:after {
    content: "";
    display: block;
    clear: both;
  }
  .article-wrap .profile-section .thumb {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
  }
  .article-wrap .profile-section .thumb img {
    width: 100%;
  }
  .article-wrap .profile-section > div .user-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
        align-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    position: absolute;
    top: 28px;
    left: 114px;
    height: 80px;
    padding-right: 24px;
  }
  .article-wrap .profile-section > div .user-info strong {
    display: block;
    width: 100%;
    line-height: 24px;
  }
  .article-wrap .profile-section > div .user-info .group-area {
    width: 100%;
    white-space: normal;
    line-height: 18px;
  }
  .article-wrap .profile-section > div .user-info .group-area em {
    display: inline;
    width: 100%;
    height: 36px;
    margin-right: 3px;
    padding-right: 0;
  }
  .article-wrap .profile-section > div .user-info .group-area em::before {
    display: none;
  }
  .article-wrap .profile-section > div .user-info .group-area span {
    position: relative;
    line-height: 18px;
    padding-left: 8px;
  }
  .article-wrap .profile-section > div .user-info .group-area span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 1px;
    width: 1px;
    height: 12px;
    background: #cad1d8;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .article-wrap .profile-section > div .desc {
    display: block;
    width: 100%;
    margin-top: 16px;
    margin-left: 0;
    font-size: 16px;
    color: #484e57;
  }
}

.related-story-area {
  max-width: 640px;
  margin: 0 auto;
  padding-top: 5px;
  margin-bottom: 90px;
}
.related-story-area .list-title {
  font-weight: bold;
  font-size: 36px;
  line-height: 130%;
  color: #0F172A;
  margin: 15px 0px;
}
.related-story-area .list-area {
  width: 100%;
}
.related-story-area .list-area li {
  margin: 25px 0px 39px;
}
.related-story-area .list-area li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.related-story-area .list-area li a .list-inner {
  width: calc(100% - 221px);
}
.related-story-area .list-area li a .list-inner .top-title {
  font-weight: normal;
  font-size: 14px;
  line-height: 115%;
  color: #4B5563;
  margin: 8px 0px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.related-story-area .list-area li a .list-inner strong {
  font-weight: bold;
  font-size: 24px;
  line-height: 128%;
  margin: 4px 0px;
  max-height: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  color: #1F2937;
}
.related-story-area .list-area li a .list-inner .text-area {
  display: block;
  font-weight: normal;
  font-size: 16px;
  line-height: 150%;
  color: #1F2937;
  margin-top: 5px;
  max-width: 778px;
  max-height: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.related-story-area .list-area li a .img-area {
  width: 198px;
  height: 132px;
  border-radius: 11px;
  border: 1px solid #e9eef4;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 12px;
  margin: 7px 1px 0px 25px;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.related-story-area .list-area li a .img-area:before {
  content: "";
  position: absolute;
  width: 196px;
  height: 132px;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-radius: 12px;
  -webkit-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}
.related-story-area .list-area li a .img-area img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
}
@media (min-width: 768px) {
  .related-story-area .list-area li a:hover .list-inner strong, .related-story-area .list-area li a:focus .list-inner strong {
    color: #f54090;
    -webkit-transition: color ease-out 300ms;
    transition: color ease-out 300ms;
  }
  .related-story-area .list-area li a:hover .img-area:before, .related-story-area .list-area li a:focus .img-area:before {
    -webkit-box-shadow: 0px 8px 15px rgba(66, 73, 80, 0.15);
            box-shadow: 0px 8px 15px rgba(66, 73, 80, 0.15);
    -webkit-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
  }
}
@media (max-width: 767.98px) {
  .related-story-area {
    margin-bottom: 10px;
  }
  .related-story-area .list-title {
    font-size: 24px;
  }
  .related-story-area .list-area li {
    display: block;
    margin: 0;
  }
  .related-story-area .list-area li + li {
    margin-top: 16px;
  }
  .related-story-area .list-area li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 20px;
  }
  .related-story-area .list-area li a .list-inner {
    display: block;
    width: calc(100% - 120px);
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .related-story-area .list-area li a .list-inner .top-title {
    margin-top: 8px;
    margin-bottom: 4px;
    font-size: 12px;
  }
  .related-story-area .list-area li a .list-inner strong {
    max-height: 64px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 16px;
    font-weight: 700;
    word-break: break-word;
  }
  .related-story-area .list-area li a .list-inner .text-area {
    display: none;
    max-height: 48px;
    white-space: normal;
  }
  .related-story-area .list-area li a .img-area {
    width: 100px;
    height: 68px;
    margin-left: 0px;
    margin-top: 4px;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border-radius: 8px;
  }
  .related-story-area .list-area li a .img-area img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 8px;
  }
  .related-story-area .list-area li a .img-area::before {
    content: none;
  }
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/IBMPlexMono-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/IBMPlexMono-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/IBMPlexMono-Bold.ttf") format("truetype");
}
.article-body .text-link {
  text-decoration: underline;
  text-underline-position: from-font;
  color: #F54090;
}
.article-body .bul_type .text-link {
  display: inline-block;
  margin-bottom: 2px;
}
.article-body blockquote {
  position: relative;
  margin: 40px 12px 40px;
  padding-left: 18px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #4B5563;
}
.article-body blockquote::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: #D1D5DB;
  border-radius: 3px;
}
.article-body .title3 {
  font-size: 24px;
  font-weight: bold;
  margin: 48px 0 8px;
  color: #1F2937;
}
.article-body code.text-code {
  display: inline-block;
  height: 24px;
  margin: 0 2px;
  padding: 1px 6px;
  background-color: #F9FAFB;
  border: 1px solid #D1D5DB;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: "IBM Plex Mono", monospace;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  color: #374151;
  line-height: 20px;
}
.article-body code.code-box {
  display: block;
  margin: 40px 0px;
  padding: 40px;
  border: 1px solid #D1D5DB;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 20px;
  background: #F9FAFB;
  font-family: "IBM Plex Mono", monospace;
  font-size: 16px;
  font-weight: 500;
  color: #374151;
  white-space: pre;
  overflow-x: auto;
}
.article-body code.code-box.code-cap {
  margin: 40px 0px 8px;
}
.article-body .title1 + pre .code-box {
  margin-top: 28px;
}
.article-body .title2 + pre .code-box {
  margin-top: 20px;
}
.article-body .title3 + pre .code-box {
  margin-top: 20px;
}
.article-body .code-caption {
  display: block;
  font-family: "Spoqa Han Sans Neo", "Noto Sans KR", "Noto Sans CJK KR", "malgun gothic", sans-serif, Tahoma;
  font-weight: normal;
  font-size: 14px;
  line-height: 150%;
  margin-top: 5px;
  margin-bottom: 40px;
  padding-left: 3px;
  padding-right: 3px;
  color: #4B5563;
}

.article-wrap .article-body pre {
  position: relative;
}
.article-wrap .article-body pre + .title1 {
  margin-top: 68px;
}
.article-wrap .article-body pre + .title2 {
  margin-top: 48px;
  display: block;
  overflow-x: auto;
}
.article-wrap .article-body pre + .title3 {
  margin-top: 60px;
}
.article-wrap .article-body pre + .infographic-area {
  margin-top: 20px !important;
}
@media (max-width: 767.98px) {
  .article-wrap .article-body blockquote {
    margin: 32px 0px 32px 12px;
  }
  .article-wrap .article-body code.text-code {
    padding: 1px 2px 0px 2px;
  }
  .article-wrap .article-body code.code-box {
    display: block;
    margin: 32px 0px;
    padding: 24px 20px;
    overflow-x: auto;
  }
  .article-wrap .article-body code.code-box.code-cap {
    margin: 32px 0px 8px;
  }
  .article-wrap .article-body .title1 + pre .code-box {
    margin-top: 12px;
  }
  .article-wrap .article-body .title2 + pre .code-box {
    margin-top: 12px;
  }
  .article-wrap .article-body .title3 + pre .code-box {
    margin-top: 12px;
  }
  .article-wrap .article-body .code-caption {
    margin-bottom: 32px;
  }
  .article-wrap .article-body .infographic_area,
  .article-wrap .article-body .infographic-area {
    margin: 56px 0px;
  }
  .article-wrap .article-body pre {
    display: block;
    overflow-x: auto;
  }
  .article-wrap .article-body pre + .title1 {
    margin-top: 24px;
  }
  .article-wrap .article-body pre + .title2 {
    margin-top: 12px;
  }
  .article-wrap .article-body pre + .title3 {
    margin-top: 12px;
  }
  .article-wrap .article-body pre + .infographic-area {
    margin-top: 12px !important;
  }
}

/** @format */
#layer-policy .popup-inner {
  max-height: 468px;
  overflow: hidden;
}
#layer-policy .popup-inner .popup-body {
  height: 300px;
  padding-right: 6px;
}
#layer-policy .popup-inner .popup-body::-webkit-scrollbar {
  width: 9px;
  height: 7px;
  background-color: transparent;
}
#layer-policy .popup-inner .popup-body::-webkit-scrollbar-thumb {
  background-color: #d8dee5;
  border-radius: 7px;
  background-clip: padding-box;
  border: 2px solid transparent;
}
#layer-policy .popup-inner .popup-body::-webkit-scrollbar-track {
  background-color: transparent;
}
#layer-policy .part:not(:last-child) {
  margin-bottom: 22px;
}
#layer-policy .part h3.text-sm {
  margin-bottom: 6px;
}
#layer-policy .part .list.num-list > li + li {
  margin-top: 16px;
}
#layer-policy .text-sm2 {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
}

.quote-inquiry {
  padding: 80px 0 105px;
}
.quote-inquiry .card-lg {
  width: 800px;
  margin-top: 27px;
}
.quote-inquiry .card-lg.card-quote > .form-group {
  padding: 40px;
}
.quote-inquiry .card-container {
  position: inherit;
  width: 100%;
  text-align: center;
}
.quote-inquiry .card-container .radio-form-group {
  padding: 56px 56px;
}
.quote-inquiry .card-container .radio-form-group .check-item > label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: auto;
  min-height: 120px;
  padding: 31px 64px 31px 24px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 12px;
}
.quote-inquiry .card-container .radio-form-group .check-item > label .img-area {
  display: inline-block;
  width: 52px;
  height: 52px;
}
.quote-inquiry .card-container .radio-form-group .check-item > label .img-area img {
  height: 100%;
}
.quote-inquiry .card-container .radio-form-group .check-item > label .img-area + .text-area {
  margin-left: 16px;
}
.quote-inquiry .card-container .radio-form-group .check-item > label .text-area {
  width: calc(100% - 52px);
  text-align: left;
}
.quote-inquiry .card-container .radio-form-group .check-item > label .text-area > strong {
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
}
.quote-inquiry .card-container .radio-form-group .check-item > label .text-area > strong + span {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  color: #7B838C;
}
.quote-inquiry .card-container .radio-form-group .check-item + .check-item {
  margin-top: 20px;
}
.quote-inquiry .card-container .radio-form-group .check-item [type=radio] + label:before {
  position: absolute;
  right: 24px;
  top: 50%;
  margin: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.quote-inquiry .card-container .radio-form-group .check-item .form-radio + label {
  position: relative;
}
.quote-inquiry .card-container .radio-form-group .check-item .form-radio + label::after {
  position: absolute;
  top: -0.5px;
  left: -0.5px;
  content: "";
  width: 100%;
  height: 100%;
  border: 1px solid #CAD1D8;
  border-radius: 12px;
}
.quote-inquiry .card-container .radio-form-group .check-item .form-radio:checked + label::after {
  border: 1.5px solid #F54090;
}
.quote-inquiry .card-container .radio-form-group .btn-lg {
  width: 107px;
}
.quote-inquiry .card-container .radio-form-group .btn-lg + .btn-lg {
  margin-left: 16px;
}
.quote-inquiry .card-container .radio-form-group .ico.ico-quote-ontact {
  width: 52px;
  height: 52px;
  background: url(../images/ico-quote-ontact@2x.png) 0 0 no-repeat;
  background-size: cover;
}
.quote-inquiry .card-container .radio-form-group .ico.ico-quote-project {
  width: 52px;
  height: 52px;
  background: url(../images/ico-quote-project@2x.png) 0 0 no-repeat;
  background-size: cover;
}
.quote-inquiry .card-container .radio-form-group .ico.ico-quote-solution {
  width: 52px;
  height: 52px;
  background: url(../images/ico-quote-solution@2x.png) 0 0 no-repeat;
  background-size: cover;
}
.quote-inquiry .card-lg.card-quote {
  margin-top: 60px;
  padding: 0;
}
.quote-inquiry .card-lg.card-quote .form-header {
  padding: 40px;
  border-bottom: 1px solid #E9EEF4;
}
.quote-inquiry .card-lg.card-quote .form-header .sub-title {
  font-size: 26px;
  line-height: 2rem;
  color: #32363C;
}
.quote-inquiry .card-lg.card-quote .breadcrumb-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.quote-inquiry .card-lg.card-quote .breadcrumb-list li {
  color: #8D97A3;
  font-size: 18px;
  font-weight: 500;
}
.quote-inquiry .card-lg.card-quote .breadcrumb-list li + li {
  margin-left: 24px;
}
.quote-inquiry .card-lg.card-quote .breadcrumb-list li.on {
  color: #F54090;
  font-weight: 700;
}
.quote-inquiry .card-lg.card-quote .breadcrumb-list li.on .num {
  border: 1px solid #F54090;
  background: #F54090;
  color: #fff;
}
.quote-inquiry .card-lg.card-quote .breadcrumb-list li.active:before {
  background: #F54090;
}
.quote-inquiry .card-lg.card-quote .breadcrumb-list li .num {
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-right: 8px;
  border: 1px solid #A4ACB7;
  border-radius: 50%;
  background: #fff;
  color: #8D97A3;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8rem;
  text-align: center;
}
.quote-inquiry .card-lg.card-quote .form-group {
  width: auto;
  text-align: left;
}
.quote-inquiry .card-lg.card-quote .info-box {
  width: 100%;
  height: auto;
  padding: 12px 40px;
  padding: 12px 30px;
  background: #F4F7FB;
  border-radius: 4px;
}
.quote-inquiry .card-lg.card-quote .info-box .info-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.quote-inquiry .card-lg.card-quote .info-box .info-list > li {
  display: inline-block;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  width: 50%;
  min-height: 76px;
  padding: 10px 12px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.quote-inquiry .card-lg.card-quote .info-box .info-list > li strong {
  font-weight: 500;
  font-size: 16px;
}
.quote-inquiry .card-lg.card-quote .info-box .info-list > li strong + p {
  color: #7B838C;
  line-height: 2rem;
}
.quote-inquiry .card-lg.card-quote .form-footer {
  padding: 32px 24px 48px;
}
.quote-inquiry .card-lg.card-quote .form-footer .btn-lg {
  padding: 0 25px;
}
.quote-inquiry .card-lg.card-banner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto;
  padding: 0 40px;
  background: #1D1F23;
  border-radius: 16px;
}
.quote-inquiry .card-lg.card-banner .text-area {
  width: calc(100% - 220px);
  padding: 46px 0 34px;
  text-align: left;
}
.quote-inquiry .card-lg.card-banner .text-area p {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}
.quote-inquiry .card-lg.card-banner .text-area strong {
  font-size: 24px;
  font-weight: 700;
  line-height: 2.4rem;
  color: #fd5ea4;
}
.quote-inquiry .card-lg.card-banner .img-area {
  width: 220px;
  height: 140px;
}
.quote-inquiry .form-container-contact .form-group {
  width: 100%;
  padding: 40px;
  text-align: left;
}
.quote-inquiry .form-container-contact .form-group + .form-btn {
  padding: 0px 40px 50px;
}
.quote-inquiry .form-container-contact .form-group + .form-btn .btn-lg {
  width: 107px;
}
.quote-inquiry .form-container-contact .form-colgroup .col {
  margin-bottom: 19px;
}
.quote-inquiry .form-container-contact .form-colgroup .col + .col {
  margin-left: 36px;
}
.quote-inquiry .form-container-contact .form-colgroup .label {
  font-size: 16px;
  font-weight: 500;
  color: #0F172A;
  margin-bottom: 6px;
}
.quote-inquiry .form-container-contact .form-colgroup .text-md .necessary {
  -webkit-transform: translate(2px, -13px);
          transform: translate(2px, -13px);
}
.quote-inquiry .form-container-contact .form-colgroup .form-control {
  height: 48px;
  margin-top: 6px;
  border-radius: 6px;
  padding: 7px 40px 7px 16px;
}
.quote-inquiry .form-container-contact .form-colgroup .check-good::before {
  bottom: 16px;
  background: url(../images/ico-check-green-md@2x.png) 0 0 no-repeat;
  background-size: cover;
}
.quote-inquiry .form-container-contact .form-colgroup .check-bul-invaild::before {
  bottom: 16px;
  background: url(../images/ico-check-red-md@2x.png) 0 0 no-repeat;
  background-size: cover;
}
.quote-inquiry .form-container-contact .form-colgroup textarea.form-control {
  padding: 12px 16px;
}
.quote-inquiry .form-container-contact .form-colgroup textarea.form-control.form-mid {
  min-height: 128px;
}
.quote-inquiry .form-container-contact .form-colgroup textarea.form-control.form-lg {
  min-height: 328px;
}
.quote-inquiry .form-container-contact .form-colgroup.align-top-type2 {
  height: 370px;
  margin-bottom: 0;
}
.quote-inquiry .form-container-contact .form-colgroup .info-area {
  width: 100%;
  padding: 11px 16px;
  margin: 0 4px;
  background: #fff5f9;
  border: 1px solid #ffe1ee;
  border-radius: 4px;
  color: #F54090;
}
.quote-inquiry .form-container-contact .form-colgroup .info-area .ico.ico-consultant-brand-lg {
  margin: -5px 7px 0 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-image: url(../images/ico-consultant-brand-lg@2x.png);
}
.quote-inquiry .form-container-contact .form-colgroup.textarea-type {
  height: auto;
}
.quote-inquiry .form-container-contact .form-colgroup.textarea-type .form-control {
  display: none;
  margin-top: 12px;
  border: 1px solid #D8DEE5;
}
.quote-inquiry .form-container-contact .form-colgroup .placeholder-area {
  width: 100%;
  margin-top: 6px;
  padding: 12px 16px;
  border-radius: 4px;
  color: #8D97A3;
}
.quote-inquiry .form-container-contact .form-colgroup .placeholder-area > .text-wrap {
  display: block;
  letter-spacing: -0.04em;
  word-break: break-all;
}
.quote-inquiry .form-container-contact .form-colgroup .placeholder-area > .text-wrap + .text-wrap {
  margin-top: 10.5px;
}
.quote-inquiry .form-container-contact .form-colgroup .placeholder-area > .text-wrap strong {
  display: block;
  margin-bottom: 5px;
}
.quote-inquiry .form-container-contact .form-colgroup .placeholder-area.show {
  display: inline-block;
}
.quote-inquiry .form-container-contact .form-colgroup .placeholder-area.active {
  display: inline-block;
  border: 1px solid #D8DEE5;
  background: #F4F7FB;
  pointer-events: none;
}
.quote-inquiry .form-container-contact .form-colgroup .col .placeholder-area {
  background: #fff;
  border: 1px solid #D8DEE5;
  border-radius: 6px;
}
.quote-inquiry .form-container-contact .form-colgroup .col.check-invaild .placeholder-area {
  border: 1px solid #FF4D6D;
}
.quote-inquiry .form-container-contact .form-colgroup .col.check-invaild .placeholder-area.active {
  display: inline-block;
  margin-top: 28px;
  border: none;
  background: #F4F7FB;
}
.quote-inquiry .form-container-contact .skill-options {
  padding-bottom: 6px;
  border-bottom: none;
}
.quote-inquiry .form-container-contact .skill-options .label > .sub-text {
  color: #8D97A3;
}
.quote-inquiry .form-container-contact .skill-options.check-invaild .label > .sub-text {
  color: #FF4D6D;
}
.quote-inquiry .form-container-contact .skill-options .label {
  font-size: 16px;
  color: #0F172A;
  margin-bottom: 10px;
  font-weight: 500;
}
.quote-inquiry .form-container-contact .skill-options .label .sub-text {
  font-size: 14px;
  font-weight: 400;
  color: #A4ACB7;
}
.quote-inquiry .form-container-contact .skill-options .necessary {
  -webkit-transform: translate(2px, -13px);
          transform: translate(2px, -13px);
}
.quote-inquiry .form-container-contact .skill-options .form-check + label:before {
  width: 18px;
  height: 18px;
  margin-right: 10px;
}
.quote-inquiry .form-container-contact .skill-options > span + span {
  margin-left: 36px;
}
.quote-inquiry .form-container-contact .datepicker {
  width: 100%;
}
.quote-inquiry .form-container-contact .datepicker .form-control {
  width: 100%;
}
.quote-inquiry .form-container-contact .datepicker .btn {
  margin-top: 6px;
  padding: 0 14px;
}
.quote-inquiry .form-container-contact .check-invaild + .col .form-control {
  border: 1px solid #ff4d6d;
}
.quote-inquiry .form-container-contact .form-file + .form-control {
  display: inline-block;
  border-radius: 6px;
  padding: 12px 40px 12px 16px;
}
.quote-inquiry .form-container-contact .input-addon {
  height: 48px;
  padding-left: 4px;
}
.quote-inquiry .form-container-contact .input-addon .btn {
  margin-top: 6px;
  border-radius: 6px;
  padding: 0 32px;
  font-size: 16px;
}
.quote-inquiry .form-container-contact .input-addon .btn.btn-outline-default {
  background: #f4f7fb;
  border: 1px solid #cad1d8;
}
.quote-inquiry .form-container-contact .form-footer {
  margin: 0 40px;
  border-top: 1px solid #e9eef4;
}
.quote-inquiry .form-container-contact .form-footer .form-check + label {
  margin-top: 10px;
}
.quote-inquiry .form-container-contact .form-footer .form-check + label:before {
  width: 18px;
  height: 18px;
  margin: -4px 4px 0 0;
}
.quote-inquiry .form-container-contact .form-footer .necessary {
  -webkit-transform: translate(0, -13px);
          transform: translate(0, -13px);
}
.quote-inquiry .form-container-contact .form-footer .form-btn .btn-group .btn-lg {
  width: 107px;
}
.quote-inquiry .form-container-contact .info-text {
  position: absolute;
  width: 100%;
  margin-top: 7px;
  font-size: 14px;
  color: #FF4D6D;
}
.quote-inquiry .solution-check .checkbox-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.quote-inquiry .solution-check .checkbox-wrap .item {
  width: 50%;
  height: auto;
}
.quote-inquiry .solution-check .checkbox-wrap .item + .item {
  margin-left: 12px;
}
.quote-inquiry .solution-check .checkbox-wrap .item .form-check:checked + label .text-warp::after {
  border: 1.5px solid #F54090;
}
.quote-inquiry .solution-check .checkbox-wrap .item .text-warp {
  margin: -23px 0 0 0;
  padding: 22px 19px 22px 61px;
}
.quote-inquiry .solution-check .checkbox-wrap .item .text-warp::after {
  position: absolute;
  top: -0.5px;
  left: -0.5px;
  content: "";
  width: 100%;
  height: calc(100% + 31px);
  border: 1px solid #CAD1D8;
  border-radius: 8px;
}
.quote-inquiry .solution-check .checkbox-wrap .item label:before {
  position: relative;
  top: 25px;
  left: 21px;
  width: 18px;
  height: 18px;
}
.quote-inquiry .solution-check .checkbox-wrap .item .tit {
  display: block;
  margin-top: 10px;
  font-weight: 700;
  font-size: 22px;
  color: #32363C;
}
.quote-inquiry .solution-check .checkbox-wrap .item .tit + .sub-tit {
  margin-top: 3px;
  word-break: break-all;
}
.quote-inquiry .solution-check .checkbox-wrap .item .text-area {
  margin-top: 4px;
  color: #374151;
  word-break: break-all;
}
.quote-inquiry .solution-check .checkbox-wrap .item span {
  display: inline-block;
}
.quote-inquiry .solution-check .checkbox-wrap .item span.img-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 52px;
  height: 52px;
  background: #F4F7FB;
  border: 1px solid #D8DEE5;
  border-radius: 8px;
}
.quote-inquiry .solution-check .checkbox-wrap .item span.img-wrap > img {
  width: 40px;
  height: 40px;
}
.quote-inquiry .solution-check .checkbox-wrap .ico.ico-sm-inuix-logo {
  width: 40px;
  height: 40px;
  background: url(../images/ico-sm-inuix-logo@2x.png) 0 0 no-repeat;
  background-size: cover;
}
.quote-inquiry .solution-check .checkbox-wrap .ico.ico-sm-incms-logo {
  width: 40px;
  height: 40px;
  background: url(../images/ico-sm-incms-logo@2x.png) 0 0 no-repeat;
  background-size: cover;
}
.quote-inquiry .solution-check .checkbox-wrap .btn-more {
  margin-top: 16px;
  z-index: 10;
}
.quote-inquiry .solution-check .checkbox-wrap .btn-more .text-primary + .ico.ico-xs-chevron-right {
  background: url(../images/ico-xs-chevron-right-primary@2x.png) 3px -1px no-repeat;
  background-size: cover;
}
@media (max-width: 1024.98px) {
  .quote-inquiry .card-container {
    top: 0;
    margin-top: 0;
  }
  .quote-inquiry .card-container .card-lg {
    width: auto;
  }
  .quote-inquiry .card-container .card-lg.card-quote {
    margin-top: 0;
  }
  .quote-inquiry .card-container .card-lg .form-colgroup {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
  .quote-inquiry .card-container .card-lg .form-colgroup .col {
    margin-bottom: 17.8px;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
  }
  .quote-inquiry .card-container .card-lg .form-colgroup .col + .col {
    margin-left: 8px;
  }
  .quote-inquiry .card-container .card-lg .form-colgroup .check-good::before {
    bottom: 22px !important;
  }
  .quote-inquiry .card-container .card-lg .form-colgroup .check-bul-invaild::before {
    bottom: 22.5px;
  }
  .quote-inquiry .card-container .card-lg .form-container-contact .form-control.form-mid {
    min-height: 216px;
  }
  .quote-inquiry .card-container .solution-check .text-area {
    height: 95.8px;
  }
}
@media (max-width: 767.98px) {
  .quote-inquiry {
    padding: 0 0 80px;
  }
  .quote-inquiry .sidebar-title {
    margin-top: 37px;
    font-size: 25px;
    line-height: 2rem;
  }
  .quote-inquiry .card-container {
    width: 100%;
    left: 50%;
    margin-top: 35px;
  }
  .quote-inquiry .card-lg {
    width: auto;
    margin: 0;
    padding: 0;
    background-color: transparent;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .quote-inquiry .card-lg.card-quote {
    margin-top: 0;
    background-color: #fff;
    -webkit-box-shadow: 0px 6px 20px rgba(50, 54, 60, 0.1);
            box-shadow: 0px 6px 20px rgba(50, 54, 60, 0.1);
  }
  .quote-inquiry .card-lg.card-quote .form-header {
    padding: 29px 20px 27px;
  }
  .quote-inquiry .card-lg.card-quote .breadcrumb-list > li {
    font-size: 16px;
    min-width: 8px;
  }
  .quote-inquiry .card-lg.card-quote .breadcrumb-list > li::before {
    position: relative;
    top: -1px;
    left: 0;
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #BEC7D0;
    border-radius: 50%;
    content: "";
  }
  .quote-inquiry .card-lg.card-quote .breadcrumb-list > li + li {
    margin-left: 16px;
  }
  .quote-inquiry .card-lg.card-quote .breadcrumb-list > li .num {
    display: none;
  }
  .quote-inquiry .card-lg.card-quote .breadcrumb-list > li .num + span {
    display: none;
  }
  .quote-inquiry .card-lg.card-quote .breadcrumb-list > li.on {
    display: inline-block;
  }
  .quote-inquiry .card-lg.card-quote .breadcrumb-list > li.on::before {
    display: none;
  }
  .quote-inquiry .card-lg.card-quote .breadcrumb-list > li.on .num {
    display: inline-block;
    width: 24px;
    height: 24px;
    font-size: 14px;
    line-height: 1.5rem;
  }
  .quote-inquiry .card-lg.card-quote .breadcrumb-list > li.on .num + span {
    display: inline-block;
  }
  .quote-inquiry .card-lg.card-quote > .form-group {
    padding: 30px 20px;
  }
  .quote-inquiry .card-lg.card-quote .w-break {
    word-break: break-all;
  }
  .quote-inquiry .card-lg.card-quote .info-box {
    padding: 12px 10px;
  }
  .quote-inquiry .card-lg.card-quote .info-box .info-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .quote-inquiry .card-lg.card-quote .info-box .info-list > li {
    width: 100%;
    min-height: 52px;
  }
  .quote-inquiry .card-lg.card-quote .form-header .sub-title {
    font-size: 20px;
    color: #32363C;
  }
  .quote-inquiry .card-lg.card-quote .form-footer {
    padding: 0 0 40px;
  }
  .quote-inquiry .card-lg.card-quote .form-container-contact .form-group {
    padding: 30px 20px 25px;
  }
  .quote-inquiry .card-lg.card-quote .form-container-contact .form-group + .form-btn {
    padding: 0px 40px 40px;
  }
  .quote-inquiry .card-lg.card-quote .form-container-contact .form-group > p {
    word-break: break-all;
  }
  .quote-inquiry .card-lg.card-quote .form-container-contact .input-group {
    display: inline-block;
  }
  .quote-inquiry .card-lg.card-quote .form-container-contact .form-colgroup {
    display: block;
  }
  .quote-inquiry .card-lg.card-quote .form-container-contact .form-colgroup.align-top-type2 {
    height: 516px;
  }
  .quote-inquiry .card-lg.card-quote .form-container-contact .form-colgroup .form-control {
    padding: 7px 40px 7px 16px;
  }
  .quote-inquiry .card-lg.card-quote .form-container-contact .form-colgroup .form-control.file-name {
    max-width: 100%;
    padding: 12px 16px;
  }
  .quote-inquiry .card-lg.card-quote .form-container-contact .form-colgroup .form-control.form-mid {
    min-height: 216px;
    padding: 12px 16px;
  }
  .quote-inquiry .card-lg.card-quote .form-container-contact .form-colgroup .form-control.form-lg {
    padding: 12px 16px;
    min-height: 180px;
  }
  .quote-inquiry .card-lg.card-quote .form-container-contact .form-colgroup .form-control + .input-addon.md-full {
    padding-left: 0;
  }
  .quote-inquiry .card-lg.card-quote .form-container-contact .form-colgroup .form-control + .input-addon.md-full .btn {
    width: 100%;
  }
  .quote-inquiry .card-lg.card-quote .form-container-contact .form-colgroup .check-good .form-control {
    padding: 7px 40px 7px 16px;
  }
  .quote-inquiry .card-lg.card-quote .form-container-contact .form-colgroup .col {
    margin-bottom: 19px;
  }
  .quote-inquiry .card-lg.card-quote .form-container-contact .form-colgroup .col + .col {
    margin: 33px 4px 19px 4px;
  }
  .quote-inquiry .card-lg.card-quote .form-container-contact .form-colgroup .info-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .quote-inquiry .card-lg.card-quote .form-container-contact .form-colgroup .info-area .ico + span {
    display: inline-block;
    width: 100%;
  }
  .quote-inquiry .card-lg.card-quote .form-container-contact .skill-options > span {
    display: block;
  }
  .quote-inquiry .card-lg.card-quote .form-container-contact .skill-options > span + span {
    margin-top: 20px;
    margin-left: 0;
  }
  .quote-inquiry .card-lg.card-quote .form-container-contact .skill-options .label p {
    word-break: break-all;
  }
  .quote-inquiry .card-lg.card-quote .form-container-contact .form-footer {
    margin: 0 20px;
    padding: 16px 0 40px;
  }
  .quote-inquiry .card-lg.card-quote .form-container-contact .solution-check .checkbox-wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .quote-inquiry .card-lg.card-quote .form-container-contact .solution-check .checkbox-wrap .item {
    width: 100%;
  }
  .quote-inquiry .card-lg.card-quote .form-container-contact .solution-check .checkbox-wrap .item + .item {
    margin: 12px 0 0;
  }
  .quote-inquiry .card-lg.card-quote .form-container-contact .solution-check .text-area {
    height: auto;
  }
  .quote-inquiry .card-lg.card-banner {
    padding: 16px 10px 8px;
    margin: 0;
  }
  .quote-inquiry .card-lg.card-banner .text-area {
    width: calc(100% - 130px);
    padding: 0 0 0 10px;
  }
  .quote-inquiry .card-lg.card-banner .text-area > p {
    font-size: 11px;
  }
  .quote-inquiry .card-lg.card-banner .text-area > strong {
    font-size: 18px;
    line-height: 1.8rem;
    letter-spacing: -0.06rem;
  }
  .quote-inquiry .card-lg.card-banner .img-area {
    width: 130px;
    height: auto;
  }
  .quote-inquiry .card-lg.radio-form-group {
    padding: 0;
    margin-top: 5px;
  }
  .quote-inquiry .card-lg.radio-form-group .check-item > label {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding: 24px 52px 24px 20px;
    background-color: #fff;
  }
  .quote-inquiry .card-lg.radio-form-group .check-item > label .text-area > strong {
    font-size: 18px;
  }
  .quote-inquiry .card-lg.radio-form-group .check-item > label .text-area > strong + span {
    font-size: 16px;
    word-break: break-all;
    line-height: 1.4rem;
  }
  .quote-inquiry .card-lg.radio-form-group .check-item [type=radio] + label:before {
    right: 20px;
  }
  .quote-inquiry .btn-lg + .btn-lg {
    margin-left: 12px;
  }
}

#layer-quote-inquiry {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#layer-quote-inquiry .popup-inner {
  top: 68px;
  left: -14px;
  width: 615px;
  padding: 56px 0 13px;
  border-radius: 16px;
}
#layer-quote-inquiry .popup-header {
  border: none;
}
#layer-quote-inquiry .popup-header .popup-title {
  height: auto;
  font-weight: 700;
  font-size: 28px;
  text-align: center;
}
#layer-quote-inquiry .popup-body {
  padding: 20px 24px 28px;
}
#layer-quote-inquiry .popup-body .img-wrap {
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
}
#layer-quote-inquiry .popup-body .text-warp {
  text-align: center;
}
#layer-quote-inquiry .popup-body .text-warp strong {
  font-weight: 700;
  font-size: 18px;
  line-height: 2.2rem;
}
#layer-quote-inquiry .popup-body .info-area {
  width: calc(100% - 32px);
  padding: 11px 16px;
  margin: 0 auto;
  background: #ffe1ee;
  border-radius: 4px;
  font-size: 14px;
  color: #F54090;
}
#layer-quote-inquiry .popup-body .info-area .ico.ico-notice-primary {
  margin: -5px 7px 0 0;
  width: 20px;
  height: 20px;
  background: url(../images/ico-notice-primary@2x.png) 0 0 no-repeat;
  background-size: cover;
}
#layer-quote-inquiry .popup-footer {
  padding-top: 0;
  border: none;
}
#layer-quote-inquiry .popup-footer .btn {
  min-width: 75px;
}
@media (max-width: 1024.98px) {
  #layer-quote-inquiry .popup-inner {
    height: auto;
    left: 0;
  }
}
@media (max-width: 767.98px) {
  #layer-quote-inquiry {
    padding: 24px;
  }
  #layer-quote-inquiry .popup-inner {
    top: 0;
    padding: 50px 0 0;
  }
  #layer-quote-inquiry .popup-header .popup-title {
    font-size: 22px;
  }
  #layer-quote-inquiry .popup-body {
    padding: 20px 24px 15px;
  }
  #layer-quote-inquiry .popup-body .img-wrap {
    width: 90px;
    height: 90px;
  }
  #layer-quote-inquiry .popup-body .text-warp {
    word-break: break-all;
  }
  #layer-quote-inquiry .popup-body .text-warp strong {
    font-size: 18px;
    letter-spacing: -0.07rem;
  }
  #layer-quote-inquiry .popup-body .info-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    margin: 0;
    font-size: 14px;
    line-height: 1rem;
    word-break: break-all;
  }
  #layer-quote-inquiry .popup-body .info-area .ico.ico-notice-primary {
    margin: 0 7px 0 0;
  }
  #layer-quote-inquiry .popup-body .info-area .ico + span {
    display: inline-block;
    width: calc(100% - 20px);
  }
  #layer-quote-inquiry .popup-footer {
    padding: 17px 0 40px;
  }
}

#layer-file-upload .popup-title {
  font-size: 25px;
}
#layer-file-upload .popup-body .label {
  font-size: 16px;
}
#layer-file-upload .popup-body .form-control {
  display: inline-block;
  height: 48px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #D8DEE5;
  border-radius: 6px;
}
#layer-file-upload .popup-body .input-addon {
  padding-left: 4px;
}
#layer-file-upload .popup-body .input-addon .btn {
  height: 48px;
  border: 1px solid #CAD1D8;
  background-color: #F4F7FB;
  border-radius: 6px;
  font-size: 16px;
}
#layer-file-upload .popup-body .input-group {
  margin-top: 8px;
}
#layer-file-upload .popup-body .input-group + p {
  color: #8D97A3;
}
#layer-file-upload .popup-footer {
  padding-top: 42px;
}
#layer-file-upload .popup-footer button + button {
  margin-left: 5px;
}
@media (max-width: 767.98px) {
  #layer-file-upload .input-group {
    display: inline-block;
  }
  #layer-file-upload .popup-body .form-control {
    max-width: 100vw;
  }
  #layer-file-upload .popup-body .input-addon {
    padding: 4px 0 0;
  }
  #layer-file-upload .popup-body .input-addon .btn {
    width: 100%;
  }
}

.section-neibis-build {
  position: relative;
  background: #fff;
}
.section-neibis-build .container, .section-neibis-build .sticky-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.section-neibis-build .container .left, .section-neibis-build .sticky-container .left {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}
.section-neibis-build .container .right, .section-neibis-build .sticky-container .right {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
}
.section-neibis-build .label {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 100px;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
}
.section-neibis-build .build-title {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.8px;
  color: #0F172A;
}
.section-neibis-build .build-title + .sub-text {
  margin-top: 12px;
}
.section-neibis-build .sub-text {
  line-height: 1.3;
  letter-spacing: -0.24px;
  color: #374151;
}
.section-neibis-build .sub-text + .btn {
  margin-top: 32px;
}
.section-neibis-build .btn-consultation {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 6px;
}
@media (min-width: 1025px) {
  .section-neibis-build {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 520px;
  }
  .section-neibis-build .container, .section-neibis-build .sticky-container {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 100%;
    padding: 0 64px;
  }
  .section-neibis-build .build-title {
    font-size: 40px;
  }
  .section-neibis-build .sub-text {
    font-size: 16px;
  }
  .section-neibis-build .artwork {
    width: 500px;
    height: auto;
  }
  .section-neibis-build .artwork img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
}
@media (max-width: 1024.98px) {
  .section-neibis-build .container, .section-neibis-build .sticky-container {
    padding-top: 60px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .section-neibis-build .label {
    padding: 6px 12px;
    font-size: 12px;
  }
  .section-neibis-build .build-title {
    font-size: 28px;
    line-height: 1.4;
  }
  .section-neibis-build .sub-text {
    font-size: 14px;
  }
  .section-neibis-build .artwork {
    width: calc(100% + 40px);
    margin-left: -20px;
    height: auto;
  }
}

.section .container.cont-xs, .section .cont-xs.sticky-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 32px 0;
}
.section .container.cont-sm, .section .cont-sm.sticky-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
  padding: 60px 0 52px;
}
.section .container.cont-md, .section .cont-md.sticky-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 40px;
  max-width: 1200px;
  padding: 100px 0 60px;
}
@media (max-width: 1024.98px) {
  .section .container.cont-sm, .section .cont-sm.sticky-container {
    padding: 30px 24px 22px;
  }
  .section .container.cont-md, .section .cont-md.sticky-container {
    gap: 24px;
    padding: 60px 24px 36px;
  }
}

.section-newsstory {
  background: #000;
}
.section-newsstory .newsstory {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 430px;
  gap: 12px;
}
.section-newsstory .newsstory::before {
  position: absolute;
  left: -35px;
  top: 0;
  content: "";
  display: block;
  width: 35px;
  height: 80px;
  background: url(../images/bg-newsstory-left@2x.png);
  background-size: 35px auto;
  background-repeat: no-repeat;
}
.section-newsstory .newsstory::after {
  position: absolute;
  right: -35px;
  top: 0;
  content: "";
  display: block;
  width: 35px;
  height: 80px;
  background: url(../images/bg-newsstory-right@2x.png);
  background-size: 35px auto;
  background-repeat: no-repeat;
}
.section-newsstory .section-title {
  font-weight: 700;
  letter-spacing: -0.56px;
  color: #ffd6b2;
  text-align: center;
}
.section-newsstory .section-title span {
  color: #fff;
}
.section-newsstory .img-logo {
  width: 40px;
  height: 54.5px;
}
.section-newsstory .img-logo-2 {
  width: 48px;
  height: 48px;
}
.section-newsstory .sub-text {
  font-weight: 400;
  color: #a6adb9;
  text-align: center;
}
.section-newsstory .btn-darkgray {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}
.section-newsstory .btn-darkgray:hover {
  background: rgba(255, 255, 255, 0.1);
}
.section-newsstory .newsstory-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 122px;
  padding: 40px 0;
}
.section-newsstory .newsstory-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
}
@media (min-width: 1025px) {
  .section-newsstory .newsstory {
    height: 80px;
  }
  .section-newsstory .section-title {
    font-size: 24px;
    margin-top: 4px;
  }
  .section-newsstory .sub-text {
    margin-top: 4px;
    font-size: 14px;
  }
}
@media (max-width: 1024.98px) {
  .section-newsstory .newsstory {
    gap: 4px;
    height: 73px;
    width: 350px;
  }
  .section-newsstory .newsstory::before, .section-newsstory .newsstory::after {
    width: 28px;
    height: 64px;
    top: 5px;
    background-size: 28px auto;
  }
  .section-newsstory .newsstory::before {
    left: -31px;
  }
  .section-newsstory .newsstory::after {
    right: -31px;
  }
  .section-newsstory .section-title {
    font-size: 18px;
    line-height: 1.4;
    text-align: center;
    font-weight: 500;
  }
  .section-newsstory .img-logo {
    top: 10px;
    left: 6px;
    width: 36px;
    height: 48px;
  }
  .section-newsstory .img-logo-2 {
    width: 40px;
    height: 40px;
  }
  .section-newsstory .sub-text {
    font-size: 12px;
    text-align: left;
  }
  .section-newsstory .newsstory-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 24px;
    padding: 40px 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .section-newsstory .newsstory-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 3px;
  }
}
@media (max-width: 767.98px) {
  .section-newsstory .newsstory {
    width: 256px;
    margin-left: 25px;
    padding-bottom: 8px;
  }
  .section-newsstory .newsstory::before {
    left: -26px;
  }
  .section-newsstory .newsstory-list {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    padding: 40px 0;
    gap: 24px;
    width: 312px;
    margin: 0 auto;
  }
  .section-newsstory .section-title {
    text-align: center;
  }
  .section-newsstory .sub-text {
    text-align: center;
  }
  .section-newsstory .btn-darkgray {
    margin-left: 26px;
  }
}

.section-condition {
  background: #f3f4f6;
}
.section-condition .section-body {
  margin: 0 38px;
}
.section-condition .condition-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 12px;
}
.section-condition .condition-list li {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  width: calc(50% - 10px);
  background: #fff;
  border-radius: 16px;
}
.section-condition .condition-list li::before {
  position: absolute;
  top: 50%;
  left: 16px;
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  background: url(../images/ico-checkbox-green@2x.png) no-repeat;
  background-position: center center;
  background-size: 28px auto;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.section-condition .condition-list li .ico {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.section-condition .condition-list li > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.section-condition .condition-list li strong {
  font-weight: 700;
  color: #1f2937;
}
.section-condition .condition-list li .text {
  font-size: 14px;
  color: #4b5563;
}
@media (min-width: 1025px) {
  .section-condition .condition-list {
    max-width: 916px;
  }
  .section-condition .condition-list li {
    min-height: 69px;
    padding: 12px 10px 12px 56px;
  }
}
@media (max-width: 1024.98px) {
  .section-condition .section-title {
    font-size: 28px;
    text-align: center;
    line-height: 1.4;
  }
  .section-condition .section-body {
    margin: 0;
  }
  .section-condition .condition-list li {
    gap: 8px;
    width: 100%;
    min-height: 60px;
    padding: 10px 12px 10px 40px;
    border-radius: 12px;
    font-size: 14px;
  }
  .section-condition .condition-list li::before {
    left: 12px;
    width: 20px;
    height: 20px;
    background-size: 20px auto;
  }
  .section-condition .condition-list li .ico {
    width: 24px;
    height: 24px;
  }
  .section-condition .condition-list li strong {
    font-size: 14px;
  }
  .section-condition .condition-list li .text {
    font-size: 12px;
  }
}

.section-consumer {
  background: #fff;
}
.section-consumer .consumer-logo {
  max-width: 1120px;
  width: 100%;
}
.section-consumer .consumer-logo img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (max-width: 1024.98px) {
  .section-consumer .section-title {
    font-size: 28px;
    line-height: 1.4;
    text-align: center;
    word-break: break-all;
  }
}

.section-skills {
  background: #f3f4f6;
}
.section-skills .skill-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.48px;
}
.section-skills .skill-text {
  margin-top: 4px;
  line-height: 1.3;
  color: #374151;
}
.section-skills .section-body {
  width: 100%;
}
.section-skills .card-header {
  padding: 40px 40px 0;
}
.section-skills .card-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  padding: 0 40px;
}
.section-skills .card-list li {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: calc(50% - 20px);
  max-height: 520px;
  height: 520px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 20px;
  border-radius: 20px;
  background: #fff;
}
.section-skills .card-list .img-area {
  height: 100%;
}
.section-skills .card-list .img-area img {
  position: absolute;
  bottom: 0;
}
@media (max-width: 1024.98px) {
  .section-skills .section-title {
    font-size: 28px;
    line-height: 1.4;
    text-align: center;
  }
  .section-skills .skill-title {
    font-size: 16px;
  }
  .section-skills .skill-text {
    font-size: 14px;
  }
  .section-skills .card-header {
    padding: 20px 20px 0;
  }
  .section-skills .card-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 0;
    min-height: 335px;
    height: auto;
  }
  .section-skills .card-list li {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 0;
    width: 100%;
    min-height: 335px;
    max-height: 100%;
    height: auto;
  }
  .section-skills .card-list .img-area {
    width: 100%;
    padding-top: 69.5%;
  }
}

.section-skills2 {
  background: #fff;
}
.section-skills2 .section-body {
  width: 100%;
  padding: 0 40px;
}
.section-skills2 .card-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 16px;
}
.section-skills2 .card-list > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: calc(50% - 20px);
  min-height: 340px;
  max-height: 360px;
  padding: 32px 28px;
  background: #f3f4f6;
  border-radius: 20px;
}
.section-skills2 .categories {
  font-weight: 500;
  line-height: 1.3;
  color: #4b5563;
}
.section-skills2 .card-title {
  display: block;
  margin: 1px 0 12px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.48px;
}
.section-skills2 .list-dot > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.24px;
  color: #1f2937;
}
.section-skills2 .list-dot > li:before {
  top: 9px;
  background-color: #a6adb9;
}
.section-skills2 .list-dot > li.text-emphasis {
  color: #2563eb;
  font-weight: 500;
}
.section-skills2 .img-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 16px;
  width: 100%;
  height: 60px;
}
.section-skills2 .img-list img {
  width: 100%;
  max-width: 42px;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.section-skills2 .img-list .img-awards {
  max-width: 40px;
}
.section-skills2 .img-list .img-sm {
  max-width: 49px;
}
.section-skills2 .img-list .img-md {
  max-width: 54px;
  height: auto;
}
@media (max-width: 1024.98px) {
  .section-skills2 .section-title {
    font-size: 28px;
    line-height: 1.4;
    text-align: center;
  }
  .section-skills2 .section-body {
    padding: 0;
  }
  .section-skills2 .card-list {
    padding: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .section-skills2 .card-list > li {
    gap: 20px;
    width: 100%;
    min-height: 225px;
    height: auto;
    padding: 20px;
  }
  .section-skills2 .categories {
    font-size: 14px;
  }
  .section-skills2 .card-title {
    font-size: 18px;
  }
  .section-skills2 .list-dot > li {
    font-size: 14px;
  }
  .section-skills2 .list-dot > li::before {
    top: 7.5px;
  }
  .section-skills2 .img-list {
    gap: 13px;
    height: 40px;
  }
  .section-skills2 .img-list img {
    max-width: 28px;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
  .section-skills2 .img-list .img-sm {
    max-width: 32px;
  }
  .section-skills2 .img-list .img-md {
    max-width: 36px;
  }
  .section-skills2 .img-list .img-awards {
    max-width: 26.6px;
  }
}

.section-emphasis {
  background: #2563eb;
  color: #fff;
}
.section-emphasis .section-title {
  padding: 0 50px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.56px;
}
.section-emphasis p {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.36px;
  opacity: 0.8;
}
@media (max-width: 1024.98px) {
  .section-emphasis .section-title {
    font-size: 24px;
    line-height: 1.4;
    text-align: center;
  }
  .section-emphasis p {
    font-size: 16px;
    text-align: center;
  }
}

.section-skills3 {
  background: #fff;
}
.section-skills3 .cont-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 12px;
}
.section-skills3 .label {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: inline-block;
  padding: 8px;
  border-radius: 8px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.24px;
}
.section-skills3 .label.label-contant {
  background: #f5f3ff;
  color: #6d28d9;
}
.section-skills3 .label.label-cms {
  background: #eff6ff;
  color: #1d4ed8;
}
.section-skills3 .cont-title {
  display: block;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.56px;
  color: #1f2937;
}
.section-skills3 .sub-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.14px;
  color: #374151;
}
.section-skills3 .cont-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 40px;
}
.section-skills3 .cont-wrap.consult .ico-wrap {
  padding: 4px;
  background: #fff;
  border-radius: 12px;
}
.section-skills3 .cont-wrap.consult .box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 32px 0px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 20px;
  background: #f3f4f6;
}
.section-skills3 .cont-wrap.consult strong {
  padding: 0 15px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.36px;
  text-align: center;
}
.section-skills3 .skill-list {
  display: grid;
}
.section-skills3 .skill-list > li {
  width: 100%;
  height: 100%;
  padding-bottom: 20px;
  gap: 12px;
  border-bottom: 1px solid #e5e7eb;
}
.section-skills3 .skill-list > li strong {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.36px;
  color: #1f2937;
}
.section-skills3 .skill-list > li strong + p {
  margin-top: 12px;
  line-height: 1.3;
  letter-spacing: -0.14px;
  word-break: break-all;
}
.section-skills3 .skill-list > li p {
  font-size: 14px;
  color: #374151;
}
@media (min-width: 1025px) {
  .section-skills3 .cont-wrap + .cont-wrap {
    margin-top: 40px;
  }
  .section-skills3 .section-body {
    padding: 0 40px;
  }
  .section-skills3 .skill-list {
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 40px;
  }
}
@media (max-width: 1024.98px) {
  .section-skills3 .section-title {
    font-size: 28px;
    line-height: 1.4;
    text-align: center;
  }
  .section-skills3 .cont-wrap + .cont-wrap {
    margin-top: 24px;
  }
  .section-skills3 .label {
    font-size: 14px;
  }
  .section-skills3 .cont-title {
    font-size: 18px;
  }
  .section-skills3 .sub-text {
    word-break: break-all;
  }
  .section-skills3 .skill-list {
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 20px;
  }
  .section-skills3 .skill-list > li strong {
    font-size: 16px;
  }
}

.section-support {
  background: #f3f4f6;
}
.section-support .section-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.48px;
}
.section-support .btn {
  margin-top: 16px;
}
@media (max-width: 1024.98px) {
  .section-support .section-title {
    font-size: 24px;
    text-align: center;
  }
}

.customer-support-content {
  background-color: #fff !important;
  overflow: hidden;
}

body.scroll-lock {
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  -ms-touch-action: none;
      touch-action: none;
}

.section.customer-support-header {
  text-align: left;
}
.section.customer-support-header .desc {
  margin-top: 12px;
  margin-bottom: 0;
  line-height: 130%;
  letter-spacing: -0.24px;
}
@media (min-width: 1025px) {
  .section.customer-support-header {
    padding: 100px 0;
  }
}
@media (max-width: 1024.98px) {
  .section.customer-support-header {
    padding: 60px 0;
  }
  .section.customer-support-header .customer-support-title {
    font-size: 28px;
    line-height: 35px;
  }
}

.customer-support-header {
  background-color: #F3F4F6;
}
.customer-support-header .customer-support-title {
  font-size: 40px;
  font-weight: bold;
  line-height: 120%;
  letter-spacing: -0.8px;
}
.customer-support-header .desc {
  color: #374151;
}
.customer-support-header .btn-area {
  margin-top: 32px;
}
@media (max-width: 1024.98px) {
  .customer-support-header {
    padding: 60px 0;
  }
  .customer-support-header .customer-support-title {
    font-size: 28px;
    font-weight: bold;
    line-height: 140%;
    letter-spacing: -0.56px;
  }
  .customer-support-header .desc {
    font-size: 14px;
    line-height: 130%;
    letter-spacing: -0.14px;
  }
}

.section-question {
  padding: 100px 0;
}
.section-question .question-title {
  font-size: 36px;
  font-weight: 700;
  line-height: 120%;
  letter-spacing: -0.72px;
  word-break: break-all;
}
.section-question .question-title + .desc {
  margin-top: 20px;
  color: #374151;
}
@media (max-width: 1024.98px) {
  .section-question .question-title {
    font-size: 28px;
    line-height: 140%;
    letter-spacing: -0.56px;
  }
  .section-question .question-title + .desc {
    font-size: 14px;
    line-height: 130%;
    letter-spacing: -0.14px;
  }
}
.section-question .question-body {
  margin-top: 40px;
}
.section-question .question-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
  padding-bottom: 48px;
}
.section-question .question-list-area {
  max-width: 830px;
  width: calc(100% - 370px);
  border-top: 1px solid #D1D5DB;
}
.section-question .question-list-area .toggle-item {
  border-bottom: 1px solid #D1D5DB;
  scroll-margin-top: 64px;
}
.section-question .question-list-area .toggle-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 32px 0;
  cursor: pointer;
}
.section-question .question-list-area .toggle-title .title {
  width: calc(100% - 40px);
  font-size: 28px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: -0.56px;
}
.section-question .question-list-area .toggle-title .btn {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.section-question .question-list-area .toggle-title.on .btn {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.section-question .question-list-area .toggle-content {
  padding-bottom: 40px;
  display: none;
}
.section-question .question-list-area .toggle-content .detail {
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.24px;
  color: #374151;
}
.section-question .question-list-area .toggle-content .detail + .img-area {
  margin-top: 32px;
}
.section-question .question-list-area .img-area {
  width: 100%;
  padding: 40px 15px;
  border-radius: 20px;
  overflow: hidden;
  background-color: #F3F4F6;
}
.section-question .question-list-area .img-area.fit {
  height: 240px;
  padding: 40px;
}
.section-question .question-list-area .img-area img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.section-question .question-list-area .img-area + .img-area {
  margin-top: 32px;
}
.section-question .question-list-area .content-list > li {
  margin-top: 32px;
}
.section-question .question-list-area .content-list h5 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: 5px;
  font-size: 18px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: -0.36px;
  color: #1F2937;
}
.section-question .question-list-area .content-list h5 + .detail {
  margin-top: 20px;
}
.section-question .question-list-area .content-list h5 span + span {
  margin-left: 7px;
}
.section-question .question-list-area .content-list .detail + .detail {
  margin-top: 20px;
}
.section-question .question-list-area .content-list .bul-list {
  margin-top: 20px;
}
.section-question .question-list-area .content-list .bul-list li {
  position: relative;
  padding-left: 12px;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.24px;
  color: #374151;
}
.section-question .question-list-area .content-list .bul-list li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 4px;
  height: 4px;
  background-color: #A6ADB9;
  border-radius: 50%;
}
.section-question .question-list-area .content-list .bul-list li + li {
  margin-top: 6px;
}
.section-question .question-list-area .content-list .btn.btn-xl {
  height: 56px;
  margin-top: 20px;
  padding: 12px 24px;
  border-radius: 10px;
  background-color: #F3F4F6;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.24px;
  color: #374151;
}
@media (min-width: 1025px) {
  .section-question .question-list-area .btn.btn-xl:hover, .section-question .question-list-area .btn.btn-xl:focus {
    background-color: #E5E7EB;
  }
}
@media (max-width: 1024.98px) {
  .section-question .question-list-area {
    max-width: 100%;
    width: 100%;
  }
  .section-question .question-list-area .toggle-title {
    padding: 24px 0;
  }
  .section-question .question-list-area .toggle-title .title {
    font-size: 24px;
    letter-spacing: -0.48px;
  }
  .section-question .question-list-area .toggle-content {
    padding-bottom: 24px;
  }
  .section-question .question-list-area .toggle-content .detail {
    font-size: 14px;
    letter-spacing: -0.14px;
  }
  .section-question .question-list-area .img-area {
    border-radius: 7.5px;
  }
  .section-question .question-list-area .content-list h5 {
    font-size: 16px;
    line-height: 130%;
    letter-spacing: -0.24px;
  }
  .section-question .question-list-area .content-list .bul-list {
    margin-top: 20px;
  }
  .section-question .question-list-area .content-list .bul-list li {
    font-size: 14px;
    letter-spacing: -0.14px;
  }
  .section-question .question-list-area .content-list .bul-list li + li {
    margin-top: 9px;
  }
}
@media (max-width: 767.98px) {
  .section-question .question-list-area .img-area {
    padding: 16px;
  }
  .section-question .question-list-area .img-area.fit {
    height: auto;
    padding: 16px;
  }
}
.section-question .question-title-area {
  min-width: 330px;
}
.section-question .question-title-area.top-fiexd {
  position: fixed;
  top: 112px;
}
@media (min-width: 1025px) {
  .section-question .question-title-area.top-fiexd {
    margin-left: 870px;
  }
}
@media (max-width: 1327px) {
  .section-question .question-title-area.top-fiexd {
    margin-left: 0;
    right: 64px;
  }
}
.section-question .question-title-area strong {
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.24px;
}
.section-question .question-title-area .index-wrap {
  position: sticky;
  top: 112px;
}
.section-question .question-title-area .index-area {
  max-width: 330px;
}
.section-question .question-title-area .index-area li {
  margin-top: 24px;
  line-height: 130%;
  letter-spacing: -0.24px;
  color: #374151;
}
.section-question .question-title-area .index-area li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  word-break: break-all;
}
.section-question .question-title-area .index-area li.on {
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.24px;
  color: #F54090;
}
.section-question .question-title-area .index-area li span {
  min-width: 28px;
}
@media (max-width: 1024.98px) {
  .section-question .question-title-area {
    display: none;
  }
}
@media (max-width: 1024.98px) {
  .section-question {
    padding: 60px 0;
  }
}

#layer-product-specifications .btn-close-popup {
  top: 12px;
}
#layer-product-specifications .popup-body {
  padding: 60px 40px;
}
#layer-product-specifications .title {
  font-size: 28px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: -0.56px;
  text-align: center;
}
#layer-product-specifications .specifications-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 40px;
}
#layer-product-specifications .specifications-area > div {
  width: 50%;
}
#layer-product-specifications .specifications-area .right {
  margin-left: 40px;
}
#layer-product-specifications .specifications-area dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#layer-product-specifications .specifications-area dl + dl {
  margin-top: 32px;
}
#layer-product-specifications .specifications-area dl dt {
  min-width: 140px;
  font-size: 16px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.24px;
  color: #4B5563;
}
#layer-product-specifications .specifications-area dl dd {
  padding-left: 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.24px;
  color: #1F2937;
}
#layer-product-specifications .specifications-area dl dd span {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  letter-spacing: -0.14px;
  color: #4B5563;
}
@media (max-width: 1024.98px) {
  #layer-product-specifications .popup-body {
    margin: 60px 0 24px;
    padding: 0 24px 36px;
  }
  #layer-product-specifications .title {
    font-size: 24px;
    letter-spacing: -0.48px;
  }
  #layer-product-specifications .specifications-area {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  #layer-product-specifications .specifications-area > div {
    width: 100%;
  }
  #layer-product-specifications .specifications-area .right {
    margin-left: 0;
    margin-top: 20px;
  }
  #layer-product-specifications .specifications-area dl + dl {
    margin-top: 20px;
  }
  #layer-product-specifications .specifications-area dl dt {
    min-width: 100px;
    font-size: 14px;
    letter-spacing: -0.14px;
  }
  #layer-product-specifications .specifications-area dl dd {
    font-size: 14px;
    letter-spacing: -0.14px;
  }
  #layer-product-specifications .specifications-area dl dd span {
    font-size: 12px;
    letter-spacing: -0.12px;
  }
}

.recruitment-content {
  overflow: hidden;
  background-color: #f3f4f6;
}

body.scroll-lock {
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  -ms-touch-action: none;
      touch-action: none;
}

.section.recruitment-header {
  text-align: left;
}
.section.recruitment-header .desc {
  font-size: 24px;
}
.section.recruitment-header > .container, .section.recruitment-header > .sticky-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.section.recruitment-header > .container:after, .section.recruitment-header > .sticky-container:after {
  display: none;
}
.section.recruitment-header .recruitment-intro-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 24px;
  padding-top: 36px;
  width: 100%;
}
.section.recruitment-header .recruitment-intro-list > li {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 36px 32px;
  border: 1px solid transparent;
  border-radius: 20px;
  background-image: linear-gradient(#191919, #191919), linear-gradient(145deg, #666666 5%, #292929 75%, #545454 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.section.recruitment-header .recruitment-intro-list .intro-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.4;
}
.section.recruitment-header .recruitment-intro-list .intro-text {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #9CA3AF;
  padding-top: 8px;
}
.section.recruitment-header .recruitment-intro-list .ico-wrap {
  padding-top: 42px;
  text-align: right;
}
@media (max-width: 1024.98px) {
  .section.recruitment-header .recruitment-intro-list {
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
}
@media (max-width: 767.98px) {
  .section.recruitment-header .recruitment-intro-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-top: 18px;
    gap: 14px;
  }
  .section.recruitment-header .recruitment-intro-list > li {
    padding: 28px 24px;
  }
  .section.recruitment-header .recruitment-intro-list .intro-title {
    font-size: 16px;
    line-height: 1.3;
  }
  .section.recruitment-header .recruitment-intro-list .intro-text {
    font-size: 14px;
  }
  .section.recruitment-header .recruitment-intro-list .ico {
    width: 40px;
    height: 40px;
    line-height: 40px;
  }
  .section.recruitment-header .recruitment-intro-list .ico-wrap {
    padding-top: 12px;
  }
}
@media (min-width: 1025px) {
  .section.recruitment-header {
    padding: 100px 0;
  }
  .section.recruitment-header > .container, .section.recruitment-header > .sticky-container {
    width: 860px;
    padding: 0px;
    gap: 16px;
  }
  .section.recruitment-header .recruitment-title {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }
  .section.recruitment-header .desc {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: auto;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.02em;
    background: url(../images/bg-gradient-double.png) no-repeat;
    background-size: 100%;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    background-position: 52% 60%;
  }
}
@media (max-width: 1024.98px) {
  .section.recruitment-header {
    padding: 60px 0px;
  }
  .section.recruitment-header > .container, .section.recruitment-header > .sticky-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
  }
  .section.recruitment-header .desc {
    text-align: center;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: auto;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.02em;
    background: url(../images/bg-gradient-double.png) no-repeat;
    background-size: 100%;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    background-position: 52% 60%;
  }
  .section.recruitment-header .recruitment-title {
    font-size: 28px;
  }
}

.recruitment-header {
  background-color: #000;
  color: #fff;
}
.recruitment-header .container, .recruitment-header .sticky-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.recruitment-header .recruitment-title {
  font-size: 40px;
  font-weight: bold;
}
.recruitment-header .btn-area {
  margin-top: 32px;
}
@media (max-width: 1024.98px) {
  .recruitment-header {
    padding: 60px 0;
  }
  .recruitment-header .recruitment-title {
    font-size: 28px;
    font-weight: bold;
  }
  .recruitment-header .desc {
    font-size: 14px;
  }
}

.section-job-listing {
  padding-block: 80px 80px;
  min-height: 475px;
}
.section-job-listing .btn-xl {
  border: 1px solid transparent;
  height: 80px;
  padding: 0 30px;
  border-radius: 12.5px;
  font-size: 22.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
@media (max-width: 1024.98px) {
  .section-job-listing .btn-xl {
    height: 56px;
    padding: 0 24px;
    font-size: 16px;
  }
}
.section-job-listing .norecurit-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-top: 193px;
  background: url(../images/ico-norecruit@2x.png) no-repeat center 91px/80px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  min-height: 315px;
}
@media (max-width: 767.98px) {
  .section-job-listing .norecurit-area {
    background: url(../images/ico-norecruit@2x.png) no-repeat center 102px/48px;
    font-size: 16px;
    min-height: 293px;
    padding-top: 164px;
  }
}
.section-job-listing .job-listing-title {
  font-size: 36px;
  font-weight: 700;
  word-break: break-all;
}
.section-job-listing .job-listing-title + .desc {
  margin-top: 20px;
  color: #374151;
}
@media (max-width: 1024.98px) {
  .section-job-listing .job-listing-title {
    font-size: 28px;
  }
  .section-job-listing .job-listing-title + .desc {
    font-size: 14px;
  }
}
.section-job-listing .job-listing-body {
  max-width: 860px;
  margin: 0 auto;
}
.section-job-listing .job-listing-container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media (min-width: 1025px) {
  .section-job-listing .job-listing-container {
    max-width: 860px;
    margin: 0 auto;
  }
}
.section-job-listing .job-list-area {
  width: 100%;
}
.section-job-listing .job-list-area .toggle-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
}
.section-job-listing .job-list-area .toggle-item {
  background-color: #fff;
  border-radius: 16px;
  scroll-margin-top: 64px;
}
.section-job-listing .job-list-area .toggle-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 29px 39px;
  cursor: pointer;
}
.section-job-listing .job-list-area .toggle-title .title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
@media (max-width: 1024.98px) {
  .section-job-listing .job-list-area .toggle-title .title {
    line-height: 1.4;
  }
}
.section-job-listing .job-list-area .toggle-title .btn {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.section-job-listing .job-list-area .toggle-title.on .btn {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.section-job-listing .job-list-area .title-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
}
.section-job-listing .job-list-area .job-tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  font-size: 14px;
  font-weight: 400;
  color: #6b7280;
}
.section-job-listing .job-list-area .job-tags li + li {
  position: relative;
  padding-left: 17px;
}
.section-job-listing .job-list-area .job-tags li + li::before {
  position: absolute;
  top: 50%;
  left: 8px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  content: "";
  display: block;
  width: 1px;
  height: 11px;
  background-color: #e5e7eb;
  border-radius: 0.5px;
}
@media (max-width: 1024.98px) {
  .section-job-listing .job-list-area .job-tags {
    font-size: 12px;
  }
}
.section-job-listing .job-list-area .toggle-content {
  display: none;
  padding-bottom: 96px;
}
.section-job-listing .job-list-area .job-content > img {
  width: 100%;
}
.section-job-listing .job-list-area .job-banner {
  position: relative;
  overflow: hidden;
  padding: 77px 60px;
  background-color: #F54090;
}
.section-job-listing .job-list-area .job-banner .title {
  position: relative;
  font-size: 60px;
  color: #fff;
  line-height: 1.2;
  z-index: 5;
}
.section-job-listing .job-list-area .job-banner .title .category {
  display: block;
  margin-bottom: 12px;
  font-size: 28px;
  opacity: 0.8;
  font-weight: 600;
}
.section-job-listing .job-list-area .job-banner .title .role {
  color: rgba(255, 255, 255, 0.65);
  font-weight: 700;
}
.section-job-listing .job-list-area .job-banner .title .accent {
  color: #000;
}
.section-job-listing .job-list-area .job-banner::after {
  content: "";
  position: absolute;
  bottom: -12px;
  right: 30px;
  width: 158px;
  height: 158px;
  background-color: #000;
}
.section-job-listing .job-list-area .job-section {
  padding-block: 48px;
}
.section-job-listing .job-list-area .subtitle {
  display: inline-block;
  position: relative;
  margin-bottom: 12px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  z-index: 0;
  color: #212121;
}
.section-job-listing .job-list-area .subtitle::before {
  position: absolute;
  bottom: 2px;
  left: -2px;
  content: "";
  display: block;
  width: calc(100% + 4px);
  height: 12px;
  background-color: #F54090;
  opacity: 0.3;
  z-index: -1;
}
.section-job-listing .job-list-area .job-info dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  min-height: 30px;
  padding-block: 20px;
  border-bottom: 1px solid #ddd;
}
.section-job-listing .job-list-area .job-info dl dt {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 130px;
          flex: 0 0 130px;
  width: 130px;
  font-size: 20px;
  font-weight: 700;
  color: #F54090;
}
.section-job-listing .job-list-area .job-info dl dd {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  width: calc(100% - 130px);
  font-size: 20px;
  font-weight: 400;
  color: #212121;
}
.section-job-listing .job-list-area .job-info dl dd .accent {
  color: #FF4D6D;
}
.section-job-listing .job-list-area .job-info .info-text {
  font-size: 20px;
  font-weight: 400;
  color: #212121;
}
.section-job-listing .job-list-area .job-info .info-text .list-dot {
  margin-top: 32px;
}
.section-job-listing .job-list-area .job-info .list-dot li {
  padding-left: 30px;
}
.section-job-listing .job-list-area .job-info .list-dot li > strong {
  font-weight: 600;
}
.section-job-listing .job-list-area .job-info .list-dot li::before {
  left: 12px;
  background-color: #212121;
}
.section-job-listing .job-list-area .box-notice {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
      align-content: center;
  margin-top: 10px;
  padding: 16px 20px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  background: #fff3f3;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  line-height: 1.2;
}
.section-job-listing .job-list-area .box-notice strong {
  color: #FF4D6D;
  font-size: 16px;
  font-weight: 700;
}
.section-job-listing .job-list-area .process-steps {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 20px 35px;
  border-radius: 10px;
}
.section-job-listing .job-list-area .process-steps .step {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  width: 30%;
  text-align: center;
}
.section-job-listing .job-list-area .process-steps .step .ico-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 60px;
  height: 60px;
  background-color: #F54090;
  border-radius: 50%;
}
.section-job-listing .job-list-area .process-steps .step .step-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
}
.section-job-listing .job-list-area .process-steps .step .step-info > strong {
  font-size: 20px;
  font-weight: 600;
  color: #212121;
}
.section-job-listing .job-list-area .process-steps .step .step-desc {
  font-size: 14px;
  font-weight: 400;
  color: #374151;
}
@media (min-width: 1025px) {
  .section-job-listing .job-list-area .job-content.job-link {
    position: relative;
  }
  .section-job-listing .job-list-area .job-content.job-link a.btn-transparent:nth-of-type(1) {
    position: absolute;
    top: 1157px;
    right: 80px;
    width: 110px;
    height: 52px;
    background-color: rgba(0, 0, 0, 0);
  }
  .section-job-listing .job-list-area .job-content.job-link a.btn-transparent:nth-of-type(2) {
    position: absolute;
    top: 4539px;
    right: 80px;
    width: 237px;
    height: 52px;
    background-color: rgba(0, 0, 0, 0);
  }
}
@media (max-width: 1024.98px) {
  .section-job-listing .job-list-area {
    max-width: 100%;
    width: 100%;
  }
  .section-job-listing .job-list-area .toggle-title {
    padding: 24px 16px;
    gap: 12px;
  }
  .section-job-listing .job-list-area .toggle-title .title {
    font-size: 18px;
  }
  .section-job-listing .job-list-area .toggle-title .btn .ico-md-chevron-bottom-gray {
    width: 24px;
    height: 24px;
  }
  .section-job-listing .job-list-area .toggle-content {
    padding-bottom: 96px;
  }
  .section-job-listing .job-list-area .toggle-content .ico-lg-arrow-right-white {
    width: 16px;
    height: 16px;
  }
  .section-job-listing .job-list-area .job-banner {
    padding: 20px;
    margin-bottom: 24px;
  }
  .section-job-listing .job-list-area .job-banner h5 {
    font-size: 18px;
  }
  .section-job-listing .job-list-area .subtitle {
    margin-top: 32px;
    margin-bottom: 12px;
    font-size: 18px;
  }
  .section-job-listing .job-list-area .job-info dl {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: 16px;
  }
  .section-job-listing .job-list-area .job-info dl dt {
    min-width: 100%;
    margin-bottom: 8px;
  }
  .section-job-listing .job-list-area .job-info dl dd {
    width: 100%;
  }
  .section-job-listing .job-list-area .job-info .info-text {
    font-size: 14px;
  }
  .section-job-listing .job-list-area .process-steps {
    padding: 16px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .section-job-listing .job-list-area .process-steps .step {
    width: 100%;
    margin-bottom: 16px;
  }
  .section-job-listing .job-list-area .job-content.job-link {
    position: relative;
  }
  .section-job-listing .job-list-area .job-content.job-link a.btn-transparent:nth-of-type(1) {
    position: absolute;
    top: 16.1%;
    right: 9.2%;
    width: 13%;
    height: 0.8%;
    background-color: rgba(0, 0, 0, 0);
  }
  .section-job-listing .job-list-area .job-content.job-link a.btn-transparent:nth-of-type(2) {
    position: absolute;
    top: 63.25%;
    right: 9.1%;
    width: 27.8%;
    height: 0.8%;
    background-color: rgba(0, 0, 0, 0);
  }
}
.section-job-listing .job-title-area {
  min-width: 330px;
}
.section-job-listing .job-title-area.top-fiexd {
  position: fixed;
  top: 112px;
}
@media (min-width: 1025px) {
  .section-job-listing .job-title-area.top-fiexd {
    margin-left: 870px;
  }
}
@media (max-width: 1327px) {
  .section-job-listing .job-title-area.top-fiexd {
    margin-left: 0;
    right: 64px;
  }
}
.section-job-listing .job-title-area strong {
  font-weight: 700;
}
.section-job-listing .job-title-area .index-wrap {
  top: 112px;
}
.section-job-listing .job-title-area .index-area {
  max-width: 330px;
}
.section-job-listing .job-title-area .index-area li {
  margin-top: 24px;
  color: #374151;
}
.section-job-listing .job-title-area .index-area li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  word-break: break-all;
}
.section-job-listing .job-title-area .index-area li.on {
  font-weight: 700;
  color: #F54090;
}
@media (max-width: 1024.98px) {
  .section-job-listing .job-title-area {
    display: none;
  }
}
@media (max-width: 1024.98px) {
  .section-job-listing {
    padding: 60px 0;
    min-height: 412px;
  }
}
.section-job-listing .job-total-text {
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
}
@media (max-width: 1024.98px) {
  .section-job-listing .job-total-text {
    margin-bottom: 12px;
    font-size: 16px;
  }
}
.section-job-listing .job-total-text > span {
  color: #F54090;
}

.section-perks {
  padding: 90px 0;
  background-color: #fff;
}
.section-perks .perks-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.section-perks .perks-title {
  font-size: 36px;
  font-weight: 700;
  word-break: break-all;
}
.section-perks .perks-title + .desc {
  margin-top: 20px;
  color: #374151;
}
@media (max-width: 1024.98px) {
  .section-perks .perks-title {
    font-size: 28px;
    text-align: center;
    line-height: 1.3;
  }
  .section-perks .perks-title + .desc {
    font-size: 14px;
  }
}
.section-perks .perks-body {
  margin-top: 60px;
}
.section-perks .perks-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}
.section-perks .perks-content .perks-card {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 20px;
  width: 340px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.section-perks .perks-content .perks-card .top-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
  padding: 4px 12px;
  font-size: 16px;
  font-weight: 400;
  color: #374151;
}
.section-perks .perks-content .perks-card .top-area > ul {
  padding-left: 8px;
}
.section-perks .perks-content .perks-card .top-area > ul > li {
  color: #4b5563;
  line-height: 1.5;
}
.section-perks .perks-content .perks-card .top-area > ul > li::before {
  background-color: #4b5563;
}
@media (max-width: 1024.98px) {
  .section-perks .perks-content .perks-card .top-area > ul > li {
    padding-left: 13px;
    line-height: 1.5;
  }
  .section-perks .perks-content .perks-card .top-area > ul > li::before {
    top: 9px;
  }
}
@media (max-width: 1024.98px) {
  .section-perks .perks-content .perks-card .top-area {
    font-size: 14px;
  }
}
.section-perks .perks-content .perks-card .title {
  font-size: 24px;
  font-weight: 700;
  color: #171f30;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  gap: 8px;
}
.section-perks .perks-content .perks-card .img-area {
  width: 100%;
  height: 340px;
  border-radius: 16px;
  overflow: hidden;
  background-color: #A4ACB7;
}
.section-perks .perks-content .perks-card .img-area img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (max-width: 1024.98px) {
  .section-perks .perks-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .section-perks .perks-content .perks-card {
    margin-bottom: 12px;
    width: 100%;
    gap: 8px;
  }
  .section-perks .perks-content .perks-card .img-area {
    height: 274px;
  }
  .section-perks .perks-content .perks-card .top-area {
    padding: 8px 0;
    height: auto;
  }
  .section-perks .perks-content .perks-card .title {
    font-size: 18px;
  }
}
@media (max-width: 1024.98px) {
  .section-perks {
    padding: 60px 0;
  }
  .section-perks .perks-body {
    margin-top: 24px;
  }
  .section-perks .perks-card .title {
    font-size: 18px;
  }
  .section-perks .perks-card .title .ico {
    width: 20px;
    height: 20px;
  }
}

.section-story.bg {
  background: #f3f4f6;
}

.modal-banner {
  position: fixed;
  top: auto;
  left: auto;
  right: 62px;
  bottom: 228px;
  z-index: 500;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-width: 218px;
  min-height: 110px;
}
.modal-banner .banner-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 258px;
  height: 144px;
  padding: 20px;
  gap: 8px;
  padding: 20px;
  border-radius: 12px;
  background: #0058FF;
  border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-box-shadow: 0px 2px 20px 0px rgba(95, 95, 95, 0.5);
          box-shadow: 0px 2px 20px 0px rgba(95, 95, 95, 0.5);
  position: relative;
}
.modal-banner .banner-wrap::before {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 55px;
  height: 60px;
  background: url(../images/bg-a11y-banner@2x.png) no-repeat 0 0;
  background-size: 55px 60px;
  border-radius: 0 0 12px 0;
  overflow: hidden;
}
.modal-banner .banner-wrap .title {
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  line-height: 28px;
  letter-spacing: -0.03em;
}
.modal-banner .banner-wrap .title strong {
  font-weight: 700;
  color: #BAFD02;
}
.modal-banner .banner-wrap .sub-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  background: #000;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: #fff;
}
.modal-banner .btn-close-banner {
  position: absolute;
  top: -28px;
  right: 0;
  width: 20px;
  height: 20px;
  background-color: #999;
  border-radius: 50%;
}
@media (max-width: 1024.98px) {
  .modal-banner {
    left: 12px;
    right: auto;
    bottom: 12px;
  }
}

.section-ally {
  position: relative;
  background: #fff;
}
.section-ally .section-title {
  letter-spacing: -0.72px;
}
@media (max-width: 1024.98px) {
  .section-ally .section-title {
    letter-spacing: -0.56px;
  }
}
.section-ally p {
  letter-spacing: -0.14px;
  line-height: 130%;
}
.section-ally .content {
  background-color: #fff;
}
.section-ally .container, .section-ally .sticky-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 1328px;
  padding: 0 184px 0 64px;
  position: relative;
}
.section-ally .container .left, .section-ally .sticky-container .left {
  width: 647px;
}
.section-ally .container .right, .section-ally .sticky-container .right {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  width: 641px;
  height: 430px;
  right: 0;
  margin-right: -142px;
}
.section-ally .container .right img, .section-ally .sticky-container .right img {
  -o-object-fit: contain;
     object-fit: contain;
}
.section-ally .container .right img.pc-img, .section-ally .sticky-container .right img.pc-img {
  width: 640px;
  height: 430px;
}
.section-ally .container .right img.mo-img, .section-ally .sticky-container .right img.mo-img {
  display: none;
}
.section-ally .label {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 100px;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
}
.section-ally .build-title {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.8px;
  color: #0F172A;
}
.section-ally .build-title + .sub-text {
  margin-top: 8px;
}
.section-ally .sub-text {
  line-height: 1.3;
  letter-spacing: -0.24px;
  color: #374151;
}
.section-ally .sub-text + .btn {
  margin-top: 32px;
}
.section-ally .btn-consultation {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 6px;
}
@media (min-width: 1025px) {
  .section-ally {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 520px;
  }
  .section-ally .container, .section-ally .sticky-container {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 100%;
  }
  .section-ally .build-title {
    font-size: 40px;
  }
  .section-ally .sub-text {
    font-size: 16px;
  }
  .section-ally .artwork {
    width: 640px;
    height: auto;
  }
}
@media (max-width: 1024.98px) {
  .section-ally .container, .section-ally .sticky-container {
    padding: 60px 24px 8px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }
  .section-ally .label {
    padding: 6px 12px;
    font-size: 12px;
  }
  .section-ally .build-title {
    font-size: 28px;
    line-height: 1.4;
  }
  .section-ally .sub-text {
    font-size: 14px;
  }
  .section-ally .container .left, .section-ally .sticky-container .left {
    width: 100%;
  }
  .section-ally .container .right, .section-ally .sticky-container .right {
    margin: auto;
    position: static;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
  .section-ally .container .artwork, .section-ally .sticky-container .artwork {
    width: calc(100% + 40px);
    margin-left: -20px;
    height: auto;
  }
  .section-ally .container .artwork img.pc-img, .section-ally .sticky-container .artwork img.pc-img {
    display: none;
  }
  .section-ally .container .artwork img.mo-img, .section-ally .sticky-container .artwork img.mo-img {
    display: block;
  }
}

.section-quality {
  background: #000;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
.section-quality .band {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 140px;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  gap: 30px;
}
.section-quality .band .mobile-img {
  display: none;
}
.section-quality .band .img-left.pc-img {
  width: 392px;
  -o-object-fit: contain;
     object-fit: contain;
}
.section-quality .band .img-right.pc-img {
  width: 465px;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (min-width: 1025px) {
  .section-quality .band {
    max-width: 900px;
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
}
@media (max-width: 1024.98px) {
  .section-quality .band {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    gap: 0px;
    height: fit-content;
    padding: 20px 0 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .section-quality .band .pc-img {
    display: none;
  }
  .section-quality .band .img-left.mobile-img {
    display: block;
    min-width: 312px;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
  }
  .section-quality .band .img-right.mobile-img {
    display: block;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
  }
}

.a11y-needs {
  background-color: #f8f9fb;
  padding: 0;
}
.a11y-needs .section-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
}
.a11y-needs p.section-text {
  text-align: center;
  font-size: 16px;
  color: #374151;
}
.a11y-needs .wa-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 810px;
  gap: 40px;
  margin: auto;
}
.a11y-needs .wa-list ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
  max-width: 512px;
  width: 100%;
}
.a11y-needs .wa-list img {
  width: 100%;
  max-width: 248px;
  -o-object-fit: contain;
     object-fit: contain;
}
.a11y-needs .wa-list .text {
  text-align: center;
  color: #1f2937;
  margin-top: 10px;
  letter-spacing: -0.32px;
}
.a11y-needs .wa-list .text span {
  font-weight: bold;
}
.a11y-needs .wa-list .text + span {
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #4b5563;
  display: block;
  margin-top: 4px;
}
.a11y-needs .user-needs {
  margin-top: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  line-height: 1.3;
}
.a11y-needs .user-needs li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 12px;
  width: 100%;
  background: #e7eaf1;
  padding: 20px 16px;
  border-radius: 16px;
  height: auto;
}
.a11y-needs .user-needs .img-needs {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 40px;
  -o-object-fit: contain;
     object-fit: contain;
  margin-bottom: 8px;
  border-radius: 50%;
}
.a11y-needs .user-needs .img-needs img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.a11y-needs .user-needs .text-area {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}
.a11y-needs .user-needs .needs {
  position: relative;
  display: block;
  font-weight: 700;
  font-size: 16px;
  word-break: break-all;
  color: #1f2937;
  letter-spacing: -0.24px;
}
.a11y-needs .user-needs .needs::before {
  position: absolute;
  content: "";
  display: inline-block;
  width: 10px;
  text-indent: -8px;
}
.a11y-needs .user-needs .speaker {
  margin-top: 12px;
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: #4b5563;
}
@media (max-width: 1024.98px) {
  .a11y-needs {
    padding: 0;
  }
  .a11y-needs .container.cont-md, .a11y-needs .cont-md.sticky-container {
    padding: 60px 24px 40px;
  }
  .a11y-needs .section-header {
    gap: 8px;
  }
  .a11y-needs .section-header .section-title {
    font-size: 28px;
    letter-spacing: -0.56px;
  }
  .a11y-needs .section-header .section-text {
    font-size: 14px;
  }
  .a11y-needs .wa-list {
    display: block;
  }
  .a11y-needs .wa-list .wa-content {
    margin: 0 0 24px;
    width: 100%;
  }
  .a11y-needs .wa-list .wa-content .wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0 78px;
  }
  .a11y-needs .wa-list .wa-content .img {
    width: 100%;
  }
  .a11y-needs .wa-list ul {
    gap: 10px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: auto;
  }
  .a11y-needs .wa-list .text {
    text-align: center;
    color: #1f2937;
    margin-top: 16px;
  }
  .a11y-needs .wa-list .text span {
    font-weight: bold;
  }
  .a11y-needs .wa-list .text + span {
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #4b5563;
    display: block;
    margin-top: 4px;
  }
  .a11y-needs .user-needs {
    margin-top: 42px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .a11y-needs .user-needs li {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
    height: auto;
  }
}
@media (max-width: 767.98px) {
  .a11y-needs .wa-list {
    display: block;
  }
  .a11y-needs .wa-list .wa-content {
    margin: 0 0 24px;
    width: 100%;
  }
  .a11y-needs .wa-list .wa-content .wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0 78px;
  }
  .a11y-needs .wa-list .wa-content .img {
    width: 100%;
  }
  .a11y-needs .wa-list ul {
    gap: 10px;
  }
  .a11y-needs .wa-list .text {
    text-align: center;
    color: #1f2937;
    margin-top: 14px;
  }
  .a11y-needs .wa-list .text span {
    font-weight: bold;
  }
  .a11y-needs .wa-list .text + span {
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #4b5563;
    display: block;
    margin-top: 6px;
  }
}
.a11y-needs .section-title {
  text-align: center;
  font-weight: 700;
  line-height: 140%;
  font-size: 36px;
  letter-spacing: -0.56px;
}
.a11y-needs .section-text {
  font-size: 14px;
}

.box-inseq {
  margin-top: 20px;
  padding: 40px 24px;
  text-align: center;
  background: #000 url(../images/bg-maskgroup.png);
  border-radius: 20px;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  color: #fff;
}
@media (max-width: 1024.98px) {
  .box-inseq {
    font-size: 18px;
  }
}

.section-product {
  background-color: #fff;
  padding: 100px 24px 80px;
}
.section-product .container.cont-md, .section-product .cont-md.sticky-container {
  max-width: 1400px;
  gap: 0;
  padding: 0;
}
.section-product .section-body {
  width: 100%;
  min-width: 312px;
}
.section-product .section-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  width: 100%;
  margin-bottom: 20px;
}
.section-product .section-header img {
  width: 400px;
  margin: 0 auto 26px;
}
.section-product .section-header .section-text {
  text-align: center;
  font-size: 16px;
  color: #374151;
  margin-top: 12px;
  letter-spacing: -0.32px;
  line-height: 120%;
}
.section-product .product {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  padding: 0px;
  margin: auto;
}
.section-product .product .img-wrap {
  margin-left: -188px;
  left: 0;
}
.section-product .product .img-wrap .pc-img {
  width: 100%;
  max-width: 794px;
  -webkit-transform: translate(100px, -18px);
          transform: translate(100px, -18px);
}
.section-product .product .img-wrap .mobile-img {
  display: none;
}
.section-product .product .product-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
  width: 600px;
  z-index: 1;
}
.section-product .product .product-text .text-area {
  border-radius: 16px;
  background-color: #f3f4f6;
  display: grid;
  grid-template-columns: repeat(2, 50%);
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
  row-gap: 20px;
  padding: 24px 32px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  max-height: 210px;
}
.section-product .product .product-text .text-area strong {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.36px;
  line-height: 130%;
}
.section-product .product .product-text .text-area strong + p {
  margin: 8px 0 4px;
  color: #374151;
  font-size: 14px;
  line-height: 130%;
}
.section-product .product .product-text .text-area li.text {
  font-size: 14px;
  line-height: 130%;
  letter-spacing: -0.14px;
  color: #4b5563;
  list-style: disc;
  margin-left: 22px;
}
.section-product .product .wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  background-color: rgba(220, 229, 248, 0.5);
  padding: 24px 32px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 16px;
  gap: 16px;
}
.section-product .product .wrap::before {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -76%);
          transform: translate(-50%, -76%);
  background: #1364ff url(../images/ico-md-plus-white@2x.png) 50% 50% no-repeat;
  background-size: 16px;
  border-radius: 50%;
}
.section-product .product .wrap .text-area {
  display: block;
  padding: 0;
  background-color: transparent;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.section-product .product .wrap .img-wrap {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: 0;
}
.section-product .product .wrap .img-wrap img {
  width: 80px;
  height: 80px;
}
@media (max-width: 1599.98px) {
  .section-product .product .product-text .text-area {
    max-height: none;
  }
}
@media (max-width: 1024.98px) {
  .section-product {
    padding: 60px 24px;
  }
  .section-product .section-header img {
    width: 312px;
  }
  .section-product .section-header .section-title {
    font-size: 28px;
    letter-spacing: -0.56px;
    line-height: 140%;
  }
  .section-product .section-header .section-text {
    margin-top: 8px;
    font-size: 14px;
  }
  .section-product .container.cont-md, .section-product .cont-md.sticky-container {
    padding: 0;
  }
  .section-product .product {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    padding: 0;
    gap: 12px;
  }
  .section-product .product > .img-wrap {
    position: static;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: 0px 0 40px 0;
    min-height: 343px;
  }
  .section-product .product > .img-wrap .mobile-img {
    display: block;
    margin-left: 0;
    min-width: 392px;
    height: auto;
    min-height: 354px;
    -webkit-transform: translate(18px, 12px);
            transform: translate(18px, 12px);
  }
  .section-product .product > .img-wrap .pc-img {
    display: none;
  }
  .section-product .product .product-text {
    width: 100%;
    padding: 0;
  }
  .section-product .product .product-text .text-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 20px 24px;
    gap: 16px;
    max-height: -webkit-fit-content;
    max-height: -moz-fit-content;
    max-height: fit-content;
  }
  .section-product .product .product-text .text-area strong {
    font-size: 16px;
    display: block;
    margin-bottom: 4px;
  }
  .section-product .product .product-text .text-area strong + p {
    margin: 0px;
  }
  .section-product .product .product-text .text-area strong + p + ul {
    margin-top: 2px;
  }
  .section-product .product .wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    padding: 20px 24px;
    gap: 0;
  }
  .section-product .product .wrap .img-wrap {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
    margin: 0;
  }
  .section-product .product .wrap .text-area {
    padding: 0;
    gap: 0;
  }
  .section-product .product .wrap .text-area strong {
    margin-bottom: 0px;
  }
  .section-product .product .wrap .text-area strong + .text {
    margin: 8px 0 4px;
  }
}
@media (max-width: 767.98px) {
  .section-product .product .wrap .img-wrap img {
    width: 60px;
    height: 60px;
  }
}

.section-smart {
  background-color: #1364ff;
  padding: 0 24px;
}
.section-smart .section-header {
  color: #fff;
}
.section-smart .section-header .a11y-magic {
  color: #bafd02;
  position: relative;
}
.section-smart .section-header .ico-md-wand {
  width: 40px;
  height: 40px;
  line-height: 120%;
  background: url(../images/img-ally-magic.png) 50% 50%/100% no-repeat;
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
}
.section-smart .section-text {
  text-align: center;
  margin-top: 4px;
}
.section-smart .section-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}
.section-smart .a11y-using {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 20px;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
}
.section-smart .a11y-using li {
  background-color: #fff;
  border-radius: 20px;
  padding: 28px 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  position: relative;
}
.section-smart .a11y-using li img {
  width: 264px;
  margin-left: 20px;
}
.section-smart .a11y-using .left {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 4px 0;
}
.section-smart .a11y-using strong {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 150%;
  margin-bottom: 12px;
}
.section-smart .a11y-using p {
  color: #4b5563;
  font-size: 16px;
  letter-spacing: -0.32px;
  line-height: 140%;
}
.section-smart .btn-group {
  margin-top: 40px;
}
.section-smart .btn-outline-default-ally {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  margin: 0 auto;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5019607843);
}
.section-smart .btn-outline-default-ally span {
  display: inline-block;
  height: 16px;
  margin-bottom: 3px;
  line-height: 1rem;
  font-weight: 700;
}
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .section-smart .btn-outline-default-ally span {
    padding-top: 3px;
  }
}
.section-smart .btn-outline-default-ally:hover {
  background: rgba(255, 255, 255, 0.1019607843);
}
@media (max-width: 1024.98px) {
  .section-smart .container.cont-md, .section-smart .cont-md.sticky-container {
    padding: 60px 0px 26px;
    gap: 36px;
  }
  .section-smart .section-header .section-text {
    font-size: 14px;
  }
  .section-smart .section-header .section-title {
    font-size: 28px;
    text-align: center;
    line-height: 140%;
    letter-spacing: -0.56px;
  }
  .section-smart .section-header .section-title .a11y-magic::before {
    width: 28px;
    height: 28px;
    left: -31%;
    top: 20%;
  }
  .section-smart .section-header .section-title .ico-md-wand {
    width: 28px;
    height: 28px;
  }
  .section-smart .a11y-using {
    display: block;
    margin: auto;
    width: 100%;
  }
  .section-smart .a11y-using li {
    display: block;
    margin-bottom: 20px;
    width: 100%;
  }
  .section-smart .a11y-using li .left {
    gap: 16px;
  }
  .section-smart .a11y-using li img {
    margin: 20px 0 0 0;
    width: 100%;
  }
  .section-smart .a11y-using li p {
    font-size: 14px;
  }
  .section-smart .btn-group {
    margin-top: 20px;
  }
}

.section-band {
  background-color: #000;
}
.section-band > .container.cont-xs, .section-band > .cont-xs.sticky-container {
  padding: 40px 0;
}
.section-band .slogan {
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(5.47%, #bafd02), color-stop(90.59%, #63efff));
  background-image: linear-gradient(90deg, #bafd02 5.47%, #63efff 90.59%);
  letter-spacing: -0.48px;
  line-height: 140%;
}
@media (max-width: 1024.98px) {
  .section-band > .container.cont-xs, .section-band > .cont-xs.sticky-container {
    padding: 40px 24px;
  }
  .section-band .slogan {
    font-size: 20px;
    letter-spacing: -0.4px;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(5.47%, #bafd02), color-stop(90.59%, #63efff));
    background-image: linear-gradient(180deg, #bafd02 5.47%, #63efff 90.59%);
    line-height: 140%;
  }
}

.section-success {
  padding: 100px 24px;
}
.section-success .container, .section-success .sticky-container {
  max-width: 1200px;
  padding: 0px;
}
.section-success .section-header {
  margin-bottom: 40px;
}
.section-success .section-title {
  font-size: 36px;
  text-align: center;
  letter-spacing: -0.72px;
}
.section-success .section-text {
  margin-top: 8px;
  font-size: 16px;
  text-align: center;
  color: #374151;
}
.section-success .successed {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 24px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.section-success .successed li {
  width: 100%;
  height: 384px;
  border-radius: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  overflow: hidden;
}
.section-success .successed li .pc-img {
  max-height: 198px;
  -o-object-fit: contain;
     object-fit: contain;
}
.section-success .successed li .mobile-img {
  display: none;
}
.section-success .successed li .text {
  padding: 24px 24px 0;
}
.section-success .successed li .text img {
  height: 40px;
  margin-bottom: 8px;
  -o-object-fit: contain;
     object-fit: contain;
}
.section-success .successed li .text p {
  color: white;
  font-size: 18px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: -0.18px;
  word-break: break-all;
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
  position: relative;
  word-break: keep-all;
}
.section-success .successed li .text p::before {
  content: "“";
  position: absolute;
  width: 10px;
  height: 10px;
  left: -10px;
  opacity: 0.5;
}
.section-success .successed li .text p .opacity {
  opacity: 0.5;
}
.section-success .successed li.kobus {
  background-color: #f37021;
}
.section-success .successed li.kimst {
  background-color: #116ed6;
}
.section-success .successed li.invest {
  background-color: #088747;
}
.section-success .successed li .img {
  height: 198px;
  -o-object-fit: contain;
     object-fit: contain;
}
.section-success .projects-list .section-title {
  font-size: 28px;
  margin: 80px 0px 40px 0px;
  letter-spacing: -0.72px;
}
.section-success .projects-list .pc-img {
  width: 100%;
  max-width: 1096px;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -o-object-fit: contain;
     object-fit: contain;
}
.section-success .projects-list .mobile-img {
  display: none;
}
@media (max-width: 1024.98px) {
  .section-success {
    padding: 60px 24px;
  }
  .section-success .section-title {
    font-size: 28px;
    letter-spacing: -0.56px;
    line-height: 140%;
  }
  .section-success .section-text {
    font-size: 14px;
    line-height: 130%;
  }
  .section-success .container .successed, .section-success .sticky-container .successed {
    display: block;
    padding: 0px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;
  }
  .section-success .container .successed li, .section-success .sticky-container .successed li {
    width: 100%;
    max-height: 336px;
    margin-bottom: 12px;
    gap: 0;
  }
  .section-success .container .successed li:last-of-type, .section-success .sticky-container .successed li:last-of-type {
    margin-bottom: 0;
  }
  .section-success .container .successed li > img, .section-success .sticky-container .successed li > img {
    padding-top: 0px;
  }
  .section-success .container .successed li .pc-img, .section-success .sticky-container .successed li .pc-img {
    display: none;
  }
  .section-success .container .successed li .mobile-img, .section-success .sticky-container .successed li .mobile-img {
    display: block;
  }
  .section-success .container .successed li .text, .section-success .sticky-container .successed li .text {
    padding: 20px;
  }
  .section-success .container .successed li .text img, .section-success .sticky-container .successed li .text img {
    height: 32px;
    margin-bottom: 4px;
  }
  .section-success .container .successed li .text p, .section-success .sticky-container .successed li .text p {
    font-size: 16px;
  }
  .section-success .container .successed li.kimst, .section-success .sticky-container .successed li.kimst, .section-success .container .successed li.invest, .section-success .sticky-container .successed li.invest {
    max-height: 315px;
  }
  .section-success .container .projects-list .section-title, .section-success .sticky-container .projects-list .section-title {
    font-size: 24px;
    letter-spacing: -0.48px;
    margin: 36px 24px 26px;
    line-height: 120%;
  }
  .section-success .container .projects-list .pc-img, .section-success .sticky-container .projects-list .pc-img {
    display: none;
  }
  .section-success .container .projects-list .mobile-img, .section-success .sticky-container .projects-list .mobile-img {
    display: block;
    margin: auto;
    -o-object-fit: contain;
       object-fit: contain;
  }
}

.a11yhistory-story {
  background: linear-gradient(146deg, #e1ebff -2.73%, #fff 58.99%);
}
.a11yhistory-story .section-header {
  padding: 100px 0 40px;
}
.a11yhistory-story .section-header .section-title {
  text-align: center;
  font-size: 36px;
  font-weight: 900;
  color: #0f172a;
  line-height: 120%;
  letter-spacing: -0.72px;
}
.a11yhistory-story .section-header .section-text {
  text-align: center;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.32px;
  color: #374151;
  margin-top: 12px;
}
.a11yhistory-story .a11yhistory .history {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 74px;
  width: 100%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.a11yhistory-story .a11yhistory .history.size-md {
  display: none;
}
.a11yhistory-story .a11yhistory .history .column {
  display: block;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  position: relative;
  width: 350px;
}
.a11yhistory-story .a11yhistory .history .column::after {
  content: "";
  position: absolute;
  width: 1px;
  height: calc(100% - 8px);
  background-color: #98bbff;
  top: 0;
  left: 0;
  -webkit-transform: translate(3.5px, 8px);
          transform: translate(3.5px, 8px);
  z-index: 0;
}
.a11yhistory-story .a11yhistory .history .item {
  position: relative;
  padding-left: 20px;
}
.a11yhistory-story .a11yhistory .history .item::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background-color: #1364ff;
  top: 0%;
  left: 0;
  -webkit-transform: translate(0px, 5px);
          transform: translate(0px, 5px);
  z-index: 1;
}
.a11yhistory-story .a11yhistory .history .item .mg-bt-4px {
  margin-bottom: 4px;
}
.a11yhistory-story .a11yhistory .history strong {
  font-size: 18px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.27px;
  color: #1f2937;
  display: block;
  margin-bottom: 8px;
}
.a11yhistory-story .a11yhistory .history p {
  font-size: 14px;
  font-weight: 400;
  color: #7b838c;
  margin-bottom: 20px;
}
.a11yhistory-story .story {
  padding-top: 68px;
}
.a11yhistory-story .story .section-title {
  font-size: 28px;
  margin-bottom: 24px;
  letter-spacing: -0.56px;
}
@media (max-width: 1024.98px) {
  .a11yhistory-story .a11yhistory .section-header {
    padding: 60px 0 40px;
  }
  .a11yhistory-story .a11yhistory .section-header .section-title {
    font-size: 24px;
    margin-bottom: 8px;
    letter-spacing: -0.56px;
  }
  .a11yhistory-story .a11yhistory .section-header .section-text {
    font-size: 14px;
    letter-spacing: -1%;
  }
  .a11yhistory-story .a11yhistory .history.size-lg-sm {
    display: none;
  }
  .a11yhistory-story .a11yhistory .history.size-md {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 40px;
  }
  .a11yhistory-story .a11yhistory .history.size-md .item::before {
    -webkit-transform: translate(0px, 6px);
            transform: translate(0px, 6px);
  }
  .a11yhistory-story .a11yhistory .history strong {
    font-size: 14px;
  }
  .a11yhistory-story .a11yhistory .history .column {
    width: auto;
  }
  .a11yhistory-story .a11yhistory .history .column::after {
    height: 100%;
  }
  .a11yhistory-story .section-story.story {
    padding-top: 40px;
  }
  .a11yhistory-story .section-story.story .section-title {
    font-size: 24px;
    margin-bottom: 36px;
    letter-spacing: -0.56px;
  }
  .a11yhistory-story .section-story.story .story-list {
    margin: 8px auto;
    gap: 20px;
  }
  .a11yhistory-story .section-story.story .story-item {
    margin: 0;
    overflow: hidden;
    height: 519px;
  }
  .a11yhistory-story .section-story.story .story-item .item-header {
    height: 256px;
    min-width: 310px;
  }
  .a11yhistory-story .section-story.story .story-item .item-body strong {
    word-break: break-all;
  }
  .a11yhistory-story .section-story.story .story-item .item-footer {
    padding: 40px 20px;
  }
  .a11yhistory-story .section-story.story .story-item .item-footer .hash-tag-list {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    white-space: nowrap;
    gap: 5px;
    overflow: visible;
  }
  .a11yhistory-story .section-story.story .story-item .item-footer .hash-tag-list li {
    margin: 0;
  }
  .a11yhistory-story .story-btn .btn-more {
    margin-top: 30px;
  }
}
@media (max-width: 767.98px) {
  .a11yhistory-story .a11yhistory .section-header .section-title {
    font-size: 28px;
    margin-bottom: 8px;
    letter-spacing: -0.56px;
  }
  .a11yhistory-story .a11yhistory .section-header .section-text {
    font-size: 14px;
    letter-spacing: -1%;
  }
  .a11yhistory-story .a11yhistory .history.size-lg-sm {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;
  }
  .a11yhistory-story .a11yhistory .history.size-md {
    display: none;
  }
  .a11yhistory-story .a11yhistory .history strong {
    font-size: 14px;
  }
  .a11yhistory-story .a11yhistory .history .row {
    width: auto;
  }
  .a11yhistory-story .a11yhistory .history .row::after {
    height: 100%;
  }
}

@media (max-width: 767.98px) {
  .section-contact .consult-area {
    gap: 16px;
  }
  .section-contact .consult-area .form-container-consult .solutions-group.col {
    gap: 10px 8px;
  }
  .section-contact .consult-area .form-container-consult .solutions-group.col .form-check + label {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    height: auto;
    padding: 10px 10px 10px 11px;
  }
  .section-contact .consult-area .form-container-consult .solutions-group.col .form-check + label::before {
    content: "";
    top: 14px;
    left: 12px;
  }
  .section-contact .consult-area .form-container-consult .solutions-group.col .form-check + label .sub-text {
    padding-left: 0;
  }
}

.section-faq {
  max-width: 848px;
  margin: auto;
}
.section-faq .question-container {
  padding-bottom: 0;
}
.section-faq .question-header {
  padding: 0 24px;
}
.section-faq .question-header .question-text {
  font-size: 16px;
  color: #374151;
  letter-spacing: -0.14px;
  margin-top: 6px;
}
.section-faq .question-body {
  margin-top: 20px;
}
.section-faq .question-list-area {
  width: 100%;
  margin: 0 24px;
}
.section-faq .question-list-area .img-area {
  padding: 32px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin-bottom: 24px;
}
.section-faq .question-list-area .img-area strong {
  letter-spacing: -0.24px;
  font-weight: 700;
  color: #374151;
}
.section-faq .question-list-area .img-area .go {
  font-weight: 700;
  color: #374151;
  text-decoration: underline;
}
.section-faq .question-list-area .img-area .text {
  font-size: 16px;
  line-height: 130%;
  letter-spacing: -0.24px;
  margin-bottom: 32px;
  display: block;
  word-break: break-all;
  color: #374151;
}
.section-faq .question-list-area .img-area .text strong {
  font-weight: 700;
}
.section-faq .question-list-area .img-area .text.last {
  margin-bottom: 0;
}
.section-faq .question-list-area .img-area h5 {
  font-size: 16px;
  font-weight: 700;
  color: #374151;
}
.section-faq .question-list-area .img-area .text2 {
  display: block;
  word-break: break-all;
  color: #374151;
}
.section-faq .question-list-area .img-area .list {
  margin-left: 12px;
  position: relative;
  color: #374151;
}
.section-faq .question-list-area .img-area .list::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: #a6adb9;
  border-radius: 100%;
  top: 50%;
  left: 0%;
  -webkit-transform: translate(-16px, -50%);
          transform: translate(-16px, -50%);
}
.section-faq .question-list-area .img-area .list2 {
  margin-left: 20px;
  position: relative;
  color: #374151;
}
.section-faq .question-list-area .img-area .list2::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: #374151;
  border-radius: 100%;
  top: 50%;
  left: 0%;
  -webkit-transform: translate(-16px, -50%);
          transform: translate(-16px, -50%);
}
@media (max-width: 1024.98px) {
  .section-faq .question-header .question-text {
    margin-top: 8px;
    font-size: 14px;
  }
  .section-faq .question-body {
    margin-top: 40px;
  }
}
@media (max-width: 767.98px) {
  .section-faq .question-list-area .img-area {
    padding: 20px 20px;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }
  .section-faq .question-list-area .img-area strong {
    font-size: 14px;
  }
  .section-faq .question-list-area .img-area h5 {
    font-size: 14px;
  }
  .section-faq .question-list-area .img-area .text {
    font-size: 14px;
    line-height: 130%;
    letter-spacing: -1.5%;
    margin-bottom: 32px;
    display: block;
    word-break: break-all;
    color: #374151;
  }
  .section-faq .question-list-area .img-area .text2 {
    font-size: 14px;
  }
  .section-faq .question-list-area .img-area .list {
    font-size: 14px;
    margin-left: 12px;
  }
  .section-faq .question-list-area .img-area .list2 {
    font-size: 14px;
    margin-left: 20px;
  }
}/*# sourceMappingURL=style.css.map */