@charset "utf-8";
.swiper-vertical{
     touch-action: auto !important;
}
body {
  position: relative;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  font-family: 'Pretendard', Arial, Helvetica, sans-serif;
}
body.scroll-lock {
  overflow: hidden;
}
body.gnb-open1:after {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  content: '';
  background-color: rgba(0, 0, 0, 0.05);
  display: block;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.3); /* fallback */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px); /* Safari */
  z-index: 10;
}

span.text {
  font-size: 1.6rem;
}

.hidden {
  overflow: hidden;
  width: 0;
  height: 0;
  color: transparent;
  font-size: 0;
  text-indent: calc(-6249.9375rem * 1.6);
}
.inner {
  max-width: calc(105rem * 1.6);
  margin: 0 auto;
}
.highlight-sub {
  display: block;
  margin-bottom: calc(.5rem * 1.6);
  color: #FF6200;
  font-size: calc(1rem * 1.6); 
  line-height: 1.4;
}
.highlight-main {
  display: block;
  color: #000;
  font-size: calc(3rem * 1.6);
  font-weight: 700;
  line-height: 1.4;
}
.scroll-animate {
  opacity: 0;
  transform: translateY(calc(6.25rem * 1.6));
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.scroll-animate.visible {
  opacity: 1;
  transform: translateY(0);
}

/* header */
header {
  z-index: 20;
  position: relative;
  background-color: #fff;
}
header .inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-right: calc(1.25rem * 1.6);
  padding-left: calc(1.25rem * 1.6);
  height: auto;
}
header h1 a {
  display: block;
  width: calc(10rem * 1.6);
  height: calc(3rem * 1.6);
  padding: calc(1.625rem * 1.6) 0;
  box-sizing: content-box;
}
header nav {
  z-index: 30;
  position: relative;
  width: 100%;
  margin-right: calc(8.625rem * 1.6);
  margin-left: calc(8.625rem * 1.6);
}
.gnb-open header nav:before, 
.gnb-open header nav:after {
  content: '';
  width: 200vw;
  position: absolute;
  top: calc(6.25rem * 1.6);
  left: 50%;
  transform: translateX(-50%);
}
.gnb-open header nav:before {
  height: calc(20rem * 1.6);
  background-color: #fff;
}
.gnb-open header nav:after {
  height: 1px;
  background-color: #E8EAED;
}
header nav .depth1 {
  position: relative;
  display: flex;
  justify-content: space-around;
  gap: 0 calc(.75rem * 1.6);
  /* width: calc(69.25rem * 1.6); */
  margin: 0 auto;
}
header nav .depth1 .depth1-item {
  width: 100%;
}
header nav .depth1 .depth1-item > a, 
header nav .depth2 a {
  display: block;
  width: 100%;
  padding: calc(.625rem * 1.6) 0;
  border-radius: calc(6.25rem * 1.6);
  color: #000;
  font-size: calc(1.125rem * 1.6);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  word-break: keep-all;
  transition: background-color 0.1s ease-in-out;
}
header nav .depth1 .depth1-item > a {
  margin-top: calc(1.7188rem * 1.6);
  margin-bottom: calc(1.7188rem * 1.6);
}
header nav .depth1 .depth1-item.active > a,
header nav .depth1 .depth1-item > a:hover {
  background-color: #3A86FF;
  color: #fff;
  font-weight: 700;
}
header nav .depth2 {
  visibility: hidden;
  position: absolute;
  max-height: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: calc(1.25rem * 1) 0;
  /* width: 17px; */
  width: calc(100% / 7);
}
ul{
  padding-left: 0px;
}
.gnb-open header nav .depth2 {
  padding-top: calc(2.5rem * 1.6);
  padding-bottom: calc(2.5rem * 1.6); 
  max-height: 100vh;
  visibility: visible;
}

header nav .depth2 a:hover {
  background-color: #F7F8FB;
  font-weight: 700;
}
header .util {
  display: flex;
  gap: 0 calc(.5rem * 1.6);
  flex-shrink: 0;
  margin: calc(1.7188rem * 1.6) 0;
}
header .util .btn {
  display: block;
  padding: calc(.625rem * 1.6) calc(1.75rem * 1.6);
  border-radius: calc(1.75rem * 1.6);
  background-color: #2A2E33;
  color: #fff;
  font-size: calc(.875rem * 1.6);
  font-weight: 500;
}

/* 유틸 버튼 */
.util .btn {
  background: #2A2E33;
  color: #fff;
  padding: calc(0.5rem * 1.6) calc(1.25rem * 1.6);
  border-radius: 30px;
  font-size: calc(0.875rem * 1.6);
  font-weight: 500;
}

/* 모바일 버튼 */
.m_menu-open,
.m_menu-close,
.m_util {
  display: none;
}

/* mainBanner */
#mainBanner .banner-swiper {
  overflow: hidden;
  position: relative;
  border-radius: calc(1.875rem * 1.6);
  /* box-shadow: 0 calc(.25rem * 1.6) calc(.25rem * 1.6) rgba(0, 0, 0, 0.25); */
}
#mainBanner .banner-swiper .swiper-slide {
  height: calc(43.75rem * 1.6);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#mainBanner .banner-swiper .swiper-slide .slide-img {
  height: 100%;
}
#mainBanner .banner-swiper .swiper-slide .slide-img img {
  max-width: none;
  height: 100%;
}
#mainBanner .banner-swiper .swiper-slide .slide-cont {
  position: absolute;
  top: 0;
  left: 0;
  padding-top: calc(5.75rem * 1.6);
  padding-left: calc(7.625rem * 1.6);
  color: #fff;
}
#mainBanner .banner-swiper .swiper-slide .cont-text {
  display: flex;
  flex-direction: column;
}

#mainBanner .banner-swiper .swiper-slide .slide-cont p {
  margin-bottom: calc(.75rem * 1.6);
  font-size: calc(1.25rem * 1.6);
  line-height: normal;
  text-shadow: calc(-0.125rem * 1.6) calc(.25rem * 1.6) calc(1.5rem * 1.6) rgba(0,0,0,0.15);
  text-align: start;
}
#mainBanner .banner-swiper .swiper-slide .slide-cont p br {
  display: none;
}
#mainBanner .banner-swiper .swiper-slide .slide-cont strong {
  display: block;
  margin-bottom: calc(2.5rem * 1.6);
  font-size: calc(3.25rem * 1.6);
  line-height: 1.4;
  text-shadow: calc(-0.125rem * 1.6) calc(.25rem * 1.6) calc(1.5rem * 1.6) rgba(0,0,0,0.15);
  text-align: start;
}
#mainBanner .banner-swiper .swiper-slide .slide-cont strong br:first-child {
  display: none;
}
#mainBanner .banner-swiper .swiper-slide .slide-cont .cont-btns {
  display: flex;
}
#mainBanner .banner-swiper .swiper-slide .slide-cont .cont-btns a:first-child {
  margin-right: calc(.75rem * 1.6);
}
#mainBanner .banner-swiper .swiper-slide .slide-cont .cont-btns a {
  display: flex;
  flex-direction: column;
  width: calc(13.75rem * 1.6);
  padding: calc(.875rem * 1.6);
  /* border: 1px solid #fff; */
  border-radius: calc(.5rem * 1.6);  
  text-align: center;
  transition: all 0.3s ease-in-out;
}
#mainBanner .banner-swiper .swiper-slide .slide-cont .cont-btns a:hover {
  background-color: rgba(243, 244, 246, 0.1);
}
#mainBanner .banner-swiper .swiper-slide .slide-cont .cont-btns a span {
  display: block;
  margin-bottom: calc(.25rem * 1.6);
  font-size: calc(.75rem * 1.6);
  line-height: 1.4;
  color: white;
}
#mainBanner .banner-swiper .swiper-slide .slide-cont .cont-btns a em {
  display: block;
  font-size: calc(1.125rem * 1.6);
  line-height: 1.4;
  color: white;
}
#mainBanner .pagination-box {
  z-index: 9;
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: calc(2rem * 1.6) calc(4.5rem * 1.6) calc(1.1875rem * 1.6) calc(1.875rem * 1.6);
  background-color: #fff;
}
#mainBanner .pagination-box:before, 
#mainBanner .pagination-box:after {
  content: '';
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
}
#mainBanner .pagination-box:before {
  top: 0;
  left: calc(-6.875rem * 1.6);
  width: calc(6.875rem * 1.6);
  height: calc(6.25rem * 1.6);
  background-image: url('/imgMain/bg_pagination_box_01.png');
  background-size: auto 100%;
}
#mainBanner .pagination-box:after {
  top: calc(-3.125rem * 1.6);
  right: 0;
  width: calc(3.125rem * 1.6);
  height: calc(3.125rem * 1.6);
  background-image: url('/imgMain/bg_pagination_box_02.png');
}
#mainBanner .pagination-box .pagination-container {
  position: relative;
  display: flex;
  align-items: center;
  width: calc(8.5rem * 1.6);
  height: calc(1.0625rem * 1.6);
  margin-right: calc(3.75rem * 1.6);
}
#mainBanner .pagination-box .swiper-pagination-progressbar {
  width: calc(5rem * 1.6);
  height: calc(.125rem * 1.6);
  background-color: #F3F5F6;
  position: absolute;
  right: 0;
  left: 0;
  margin: auto;
  top: calc(.1875rem * 1.6);
  bottom: 0;
}
#mainBanner .pagination-box .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background-color: #437BFF;
}
#mainBanner .pagination-box .swiper-counter .count {
  position: absolute;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  color: #464C54;
  font-size: calc(.875rem * 1.6);
  font-weight: 600;
}
#mainBanner .pagination-box .swiper-counter .count.current {
  left: 0;
}
#mainBanner .pagination-box .swiper-counter .count.total {
  right: 0;
}
#mainBanner .pagination-box .swiper-button-prev-banner,
#mainBanner .pagination-box .swiper-button-next-banner {
  width: calc(3rem * 1.6);
  height: calc(3rem * 1.6);
  font-size: 0;
  background-image: url('/imgMain/icon_circle_arrow.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  cursor: pointer;
}
#mainBanner .pagination-box .swiper-button-next-banner {
  margin-left: calc(1.75rem * 1.6);
  transform: rotateY(180deg);
}
#mainBanner .m_banner-btns {
  display: none;
}

/* aboutInsoting */
#aboutInsoting .inner {
  padding: calc(7.5rem * 1.6) calc(7.5rem * 1.6) calc(5rem * 1.6);
  display: flex;
  align-items: flex-start;
}
#aboutInsoting .description,
#aboutInsoting .data {
  width: 50%;
}
#aboutInsoting .description h2 {
  margin-bottom: calc(.5rem * 1.6);
}
#aboutInsoting .description p {
  color: #464C54;
  font-size: calc(1.125rem * 1.6);
}
#aboutInsoting .data ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#aboutInsoting .data ul li:nth-child(1),
#aboutInsoting .data ul li:nth-child(2) {
  margin-bottom: calc(2.5rem * 1.6);
  padding-bottom: calc(2.5rem * 1.6);
  border-bottom: 1px solid #E8EAED;   
}
#aboutInsoting .data ul span {
  display: block;
  margin-bottom: calc(.75rem * 1.6);
  color: #464C54;
  font-size: calc(1rem * 1.6);
  font-weight: 600;
  line-height: 1.4;
}
#aboutInsoting .data ul strong {
  position: relative;
  display: inline-block;
  color: #3A86FF;
  font-size: calc(3.25rem * 1.6);
}
#aboutInsoting .data ul strong:before {
  content: '';
  position: absolute;
  top: calc(.25rem * 1.6);
  right: calc(-0.375rem * 1.6);
  display: block;
  width: calc(1.25rem * 1.6);
  height: calc(1.25rem * 1.6);
  border-radius: 50%;
  background-color: rgba(58, 134, 255, 0.08);
}
#aboutInsoting .data ul strong:hover:before,
#aboutInsoting .data ul strong:focus:before {
  transform: rotateX(360deg);
  transition: transform 0.3s ease-in-out;
}
@keyframes twinkleCircle {
  0% { transform: rotateX(0); }
  100% { transform: rotateX(360deg); }
}
#aboutInsoting .data ul .date {
  margin-top: calc(.25rem * 1.6);
  margin-bottom: 0;
  color: #8C97A7;
  font-size: calc(.75rem * 1.6);
  font-weight: 400;
  line-height: 1.4;
}

/* memberData */
#memberData {
  padding-bottom: calc(7.5rem * 1.6);
}
#memberData .inner {
  display: flex;
  align-items: center;
  padding: calc(3.75rem * 1.6) calc(5.75rem * 1.6);
  background-color: rgba(172, 185, 215, 0.1);
  border-radius: calc(1.75rem * 1.6);
}
#memberData .member-wrapper, 
#memberData .chart-wrapper {
  position: relative;
  width: calc(100% / 3);
  padding-right: calc(2rem * 1.6);
  padding-left: calc(2rem * 1.6);
}
#memberData .member-wrapper {
  overflow: hidden;
  position: relative;
  background-color: transparent;
}
#memberData .member-wrapper .member-swiper {
  position: relative;
  height: calc(15.875rem * 1.6);
}
#memberData .member-wrapper .member-swiper::before,
#memberData .member-wrapper .member-swiper::after {
  z-index: 2;  
  opacity: 0.5;
  content: '';  
  position: absolute;
  left: 0;
  right: 0;
  height: calc(3.75rem * 1.6);
  pointer-events: none;
}
#memberData .member-wrapper .member-swiper::before {
  top: 0;
  background: linear-gradient(0deg,rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(246, 248, 251, 1) 50%);
}
#memberData .member-wrapper .member-swiper::after {
  bottom: calc(1.3rem * 1.6);
  background: linear-gradient(180deg,rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(246, 248, 251, 1) 50%);
}
#memberData .member-wrapper .member-swiper .swiper-slide {
  height: calc(2.375rem * 1.6);
  background-color: transparent;
}
#memberData .member-wrapper .member-swiper ul {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
#memberData .member-wrapper .member-swiper ul .profile {
  overflow: hidden;
  position: relative;
  width: calc(2.375rem * 1.6);
  height: calc(2.375rem * 1.6);
  border-radius: 50%;
}
#memberData .member-wrapper .member-swiper ul li {
  color: #2A2E33;
  font-size: calc(1rem * 1.6);
  line-height: 1.4;
}
#memberData .member-wrapper .member-swiper ul .profile {
  width: calc(2rem * 1.6);
  height: calc(2rem * 1.6);
}
#memberData .chart-wrapper {
  position: relative;
  padding-top: calc(.625rem * 1.6);
  padding-bottom: calc(.625rem * 1.6);
}
#memberData .chart-wrapper:before {
  content: '';  
  opacity: 0.2;
  position: absolute;
  top: calc(2rem * 1.6);
  bottom: 0;
  left: 0;
  width: 1px;
  height: calc(12.5rem * 1.6);
  margin: auto 0;
  background-color: #8C97A7;
}
#memberData .chart-wrapper h3 {
  margin-bottom: calc(2rem * 1.6);
  color: #464C54;
  font-size: calc(1rem * 1.6);
  text-align: center;
}
#memberData .chart-wrapper .chart-box {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding-right: calc(3.875rem * 1.6);
  padding-left: calc(3.875rem * 1.6);
}
#memberData .chart-wrapper canvas {
  width: calc(11.25rem * 1.6) !important;
  height: calc(11.25rem * 1.6) !important;
  margin-right: calc(1.5rem * 1.6);
}
#memberData .chart-wrapper .legend-container {
  width: calc(8.125rem * 1.6);
}
#memberData .chart-wrapper .legend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;  
}
#memberData .chart-wrapper .legend-item:not(:first-child) {
  margin-top: calc(.625rem * 1.6);
}
#memberData .chart-wrapper .label-box {
  display: flex;
  align-items: center;
}
.legend-item .color {
  display: block;
  width: calc(.625rem * 1.6);
  height: calc(.625rem * 1.6);
  margin-right: calc(.5rem * 1.6);
  border-radius: 50%;
}
#memberData .chart-wrapper .legend-item .text {
  display: block;
  /* width: calc(1.625rem * 1.6); */
  color: #8C97A7;
  font-size: 10px;
  line-height: 1.4;
}
#memberData .chart-wrapper .legend-item .percent {
  font-weight: bold;
  font-size: calc(.75rem * 1.6);
}

/* faith */
#faith {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(50rem * 1.6);
  background: url('/imgMain/bg_meet.png') center no-repeat;
  color: #fff;
  text-align: center;
}
#faith h2 {
  margin-bottom: calc(1.25rem * 1.6);
  color: #DDE8FC;
  font-size: calc(1rem * 1.6);
  font-weight: 400;
  line-height: 1.4;
}
#faith em {
  display: block;
  margin-bottom: calc(3rem * 1.6);
  font-size: calc(3rem * 1.6);
  font-weight: 700;
}
#faith p {
  font-size: calc(1.25rem * 1.6);
  word-break: keep-all;
}
#faith p br:first-child {
  display: none;
}
#faith strong {
  font-weight: 500;
}

/* certification */
#certification .inner {
  padding: calc(7.5rem * 1.6);
  background: url('/imgMain/bg_ring.svg') center no-repeat;
  background-size: calc(63rem * 1.6) calc(70.0625rem * 1.6);
}
#certification .highlight-sub {
  font-weight: 500;
}
#certification .highlight-main {
  margin-bottom: calc(1.25rem * 1.6);
}
#certification .desc {
  color: #464C54;
  font-size: calc(1.125rem * 1.6);
}
#certification .care-list {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: calc(-6rem * 1.6);
}
#certification .care-list li {
  overflow: hidden;
  position: relative;
  width: calc(44rem * 1.6);
  margin-top: calc(1.3125rem * 1.6);
  padding: calc(8.125rem * 1.6) calc(3rem * 1.6) calc(3rem * 1.6);
  border-radius: calc(1.25rem * 1.6);
  background-position: left top;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
}
#certification .care-list li:nth-child(odd) {
  align-self: flex-end;
}
#certification .care-list li h3 {
  margin-bottom: calc(.75rem * 1.6);
  padding-top: calc(5.25rem * 1.6);
  background-position: left top;
  background-repeat: no-repeat;
  background-size: calc(3.5rem * 1.6);
  font-size: calc(1.5rem * 1.6);
  line-height: 1.4;
  text-align: left;
  text-shadow: 0 calc(1.5rem * 1.6) calc(1.5rem * 1.6) rgba(70, 76, 84, 0.15);
}
#certification .care-list li.consultation {
  background-image: url(https://knowhowstorage.s3.ap-northeast-2.amazonaws.com/main/bg_care_01.png);
}
#certification .care-list li.matching {
  background-image: url('/imgMain/bg_care_02.png');
}
#certification .care-list li.feedback {
  background-image: url('/imgMain/bg_care_03.png');
}
#certification .care-list li.consultation h3 {
  background-image: url('/imgMain/icon_care_01.svg');
}
#certification .care-list li.matching h3 {
  background-image: url('/imgMain/icon_care_02.svg');
}
#certification .care-list li.feedback h3 {
  background-image: url('/imgMain/icon_care_03.svg');
}
#certification .care-list li p {
  font-size: calc(1rem * 1.6);
}

/* why*/
#why {
  /* background: url('/imgMain/bg_why.png') center no-repeat; */
  /* background-size: cover; */
  background-color: slategrey;
}
#why .inner {
  padding-top: calc(7.5rem * 1.6);
  padding-bottom: calc(7.5rem * 1.6);
  text-align: center;
}
#why .highlight-sub {
  margin-bottom: calc(1.25rem * 1.6);
  color: #DDE8FC;
}
#why .highlight-main {
  margin-bottom: calc(3rem * 1.6);
  color: #fff;
}
#why .table-wrapper table {
  overflow: hidden;
  position: relative;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari */
  border-radius: calc(1rem * 1.6);
  margin: 0 auto;
}
#why .table-wrapper table, 
#why .table-wrapper table th, 
#why .table-wrapper table td {
  border: 1px solid rgba(172, 185, 215, 0.2);
  border-collapse: collapse;
}
#why .table-wrapper table th, 
#why .table-wrapper table td {
  padding: calc(1.625rem * 1.6) calc(.9375rem * 1.6);
  min-width: calc(18.7188rem * 1.6);
  font-weight: 700;
}
#why .table-wrapper table tr {
  background: rgba(7, 15, 28, 0.12);
  color: #fff;
}
#why .table-wrapper table th {
  font-size: calc(1.375rem * 1.6);
  font-weight: 600;
}
#why .table-wrapper table td {
  font-size: calc(1rem * 1.6);
  font-weight: 400;
}
#why .table-wrapper table tr th.insoting {
  background-color: rgba(58, 134, 255, 0.7);
}
#why .table-wrapper  table tr td.insoting {
  background-color: rgba(58, 134, 255, 0.4);
}

/* procedure */
#procedure {
  background-color: #F7F8FB;
}
#procedure .inner {
  padding: calc(6.875rem * 1.6) calc(7.5rem * 1.6) calc(7.5rem * 1.6);
}
#procedure .highlight-sub,
#procedure .highlight-main {
  text-align: center;
}
#procedure .highlight-sub {
  margin-bottom: calc(1.25rem * 1.6);
}
#procedure .highlight-main {
  margin-bottom: calc(3.75rem * 1.6);
}
#procedure .procedure-swiper {
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: calc(9.75rem * 1.6);
}
#procedure .swiper-wrapper {
  flex-grow: 1;
  max-width: calc(100% - calc(28.625rem * 1.6) - calc(9.75rem * 1.6));
  height: auto !important;
}
#procedure .swiper-wrapper .swiper-slide {
  flex: 0 0 100%;
  display: flex;
  align-items: stretch;
  width: 100%;
  height: auto;
  gap: 0 calc(1.25rem * 1.6);
  opacity: 0 !important;
  transition: opacity ease-in-out 0.3s;
}
#procedure .swiper-wrapper .swiper-slide.swiper-slide-active {
  opacity: 1 !important;
}
#procedure .swiper-wrapper .swiper-slide .img,
#procedure .swiper-wrapper .swiper-slide .content {
  width: calc(50% - calc(.625rem * 1.6));
  border-radius: calc(1rem * 1.6);
  background-color: #fff;
  box-shadow: calc(.625rem * 1.6) calc(.875rem * 1.6) calc(2.125rem * 1.6) 0 rgba(70, 76, 84, 0.04);
}
#procedure .swiper-wrapper .swiper-slide .img {
  display: flex;
  justify-content: center;
}
#procedure .swiper-wrapper .swiper-slide .content {
  padding: calc(2rem * 1.6);
  color: #2A2E33;
  font-size: calc(1rem * 1.6);
  word-break: keep-all;
}
#procedure .swiper-wrapper .swiper-slide .content ol {
  padding-left: calc(1.25rem * 1.6);
  list-style: decimal;
}
#procedure .swiper-wrapper .swiper-slide .content strong {
  display: block;
  margin-bottom: calc(1.25rem * 1.6);
  color: #3A86FF;
  font-size: calc(1.5rem * 1.6);
  letter-spacing: calc(-0.01rem * 1.6);
}
#procedure .swiper-wrapper .swiper-slide .content em {
  font-weight: 700;
}
#procedure .swiper-pagination {
  position: static;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  gap: calc(1.1875rem * 1.6);
  width: calc(28.625rem * 1.6);
  flex-shrink: 0;  
}
#procedure .swiper-pagination .item {
  display: flex;
  align-items: center;
  gap: calc(1.5rem * 1.6);
  padding: calc(1.5rem * 1.6) calc(2rem * 1.6);
  border-radius: calc(1rem * 1.6);
  border-radius: calc(1rem * 1.6);
  background-color: #fff;
  box-shadow: calc(.625rem * 1.6) calc(.875rem * 1.6) calc(2.125rem * 1.6) 0 rgba(70, 76, 84, 0.04);
  cursor: pointer;
  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
  transition: all ease-in-out 0.3s;
}
#procedure .swiper-pagination .item .num {
  width: calc(2.5rem * 1.6);
  height: calc(2.625rem * 1.6);
  border-radius: 50%;
  background-color: #3A86FF;
  color: #fff;
  font-size: calc(1rem * 1.6);
  font-weight: 600;
  text-align: center;
  line-height: calc(2.625rem * 1.6);
}
#procedure .swiper-pagination .item .title {
  text-align: left;
}
#procedure .swiper-pagination .item .title .desc {
  display: block;
  margin-bottom: calc(.5rem * 1.6);
  color: #464C54;
  font-size: calc(.875rem * 1.6);
  line-height: 1.4;
}
#procedure .swiper-pagination .item .title h3 {
  font-size: calc(1.25rem * 1.6);
  line-height: 1.4;
}
#procedure .swiper-pagination .item.active {
  background-color: #3A86FF;
}
#procedure .swiper-pagination .item:before,
#procedure .swiper-pagination .item:after {
  content: '';
  display: none;
  position: absolute;
  background-color: #3A86FF;
}
#procedure .swiper-pagination .item:before {
  width: calc(9.4375rem * 1.6);
  height: calc(.125rem * 1.6);
  left: 100%;
}
#procedure .swiper-pagination .item:after {
  width: calc(1rem * 1.6);
  height: calc(1rem * 1.6);
  border-radius: 50%;
  left: calc(100% + calc(9.25rem * 1.6));
}
#procedure .swiper-pagination .item.active:before,
#procedure .swiper-pagination .item.active:after {
  display: block;  
}
#procedure .swiper-pagination .item.active .num {
  background-color: #fff;
  color: #000;
}
#procedure .swiper-pagination .item.active .title .desc, 
#procedure .swiper-pagination .item.active .title h3 {
  color: #fff;
}

/* photoAlbum */
#photoAlbum {
  padding-top: calc(7.5rem * 1.6);
  padding-bottom: calc(7.5rem * 1.6);
}
#photoAlbum .highlight-sub, 
#photoAlbum .highlight-main {
  text-align: center;
}
#photoAlbum .highlight-sub {
  margin-bottom: calc(1.25rem * 1.6);
}
#photoAlbum .highlight-main {
  margin-bottom: calc(5rem * 1.6);
}
#photoAlbum .photo-swiper {
  overflow: hidden;
  position: relative;
  margin-bottom: calc(5rem * 1.6);
}
#photoAlbum .photo-swiper .swiper-slide {
  overflow: hidden;
  position: relative;
  width: calc(21rem * 1.6);
  height: calc(26.25rem * 1.6);
  margin-right: calc(2.0569rem * 1.6);
  border-radius: calc(1rem * 1.6);
  font-size: 0;
}
#photoAlbum .photo-swiper .swiper-slide.odd {
  margin-top: calc(5rem * 1.6);
}
#photoAlbum .btn-wrap {
  text-align: center;
}
#photoAlbum .btn-wrap .more {
  display: inline-block;
  padding: calc(1.0313rem * 1.6) calc(5.5625rem * 1.6);
  border-radius: calc(.5rem * 1.6);
  background-color: #1D1D1F;
  color: #fff;
  font-size: calc(1rem * 1.6);
  line-height: 1;
}

/* faq */
#faq {
  background: #F7F8FB;
}
#faq .inner {
  padding: calc(7.5rem * 1.6) calc(7.5625rem * 1.6);
}
#faq .highlight-sub, 
#faq .highlight-main {
  text-align: center;
}
#faq .highlight-sub {
  margin-bottom: calc(1.25rem * 1.6);
}
#faq .highlight-main {
  margin-bottom: calc(3.75rem * 1.6);
}
#faq .list li:not(:first-child) {
  margin-top: calc(1.5rem * 1.6);
}
#faq .list li .q,
#faq .list li .a {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: calc(1.75rem * 1.6) calc(2rem * 1.6);
  border-radius: calc(.5rem * 1.6);;
  background-color: #fff;
  word-break: keep-all;
  font-size: 1.6rem;
}
#faq .list li .q {
  width: 100%;
  margin-bottom: calc(.25rem * 1.6);
  padding-right: calc(3.5rem * 1.6);
  cursor: pointer;
  color: #000;
  font-weight: 500;
  font-size: 1.6rem;
  align-items: self-end;
}
#faq .list li .a {
  display: none;
  color: #2A2E33;
}
#faq .list li .q::before,
#faq .list li .a::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: calc(1.3125rem * 1.6);
  height: calc(1.5625rem * 1.6);
  margin-right: calc(.75rem * 1.6);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
#faq .list li .q::before {
  background-image: url('/imgMain/icon_q.svg');
}
#faq .list li .q::after {
  content: '';
  display: block;
  position: absolute;
  right: calc(2rem * 1.6);
  flex-shrink: 0;
  width: calc(1.5rem * 1.6);
  height: calc(1.5rem * 1.6);
  margin-left: calc(.75rem * 1.6);
  background-image: url('/imgMain/icon_plus.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  transition: all ease-in-out 0.3s;
}
#faq .list li .a::before {
  background-image: url('/imgMain/icon_a.svg');
}
#faq .list li.active .q::after {
  background-image: url('/imgMain/icon_minus.svg');
}
#faq .list li.active .a {
  display: flex;
}

/* footer */
footer {
  padding-top: calc(5rem * 1.6);
  padding-bottom: calc(5rem * 1.6);
  background-color: #1D1D1F;
}
footer .inner {
  padding-right: calc(7.5rem * 1.6);
  padding-left: calc(7.5rem * 1.6);
}
footer .top-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(3rem * 1.6);
}
footer .top-content img {
  width: calc(11.875rem * 1.6);
  height: calc(2.3125rem * 1.6);
}
footer .top-content .util-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(.625rem * 1.6) calc(2rem * 1.6);
}
footer .top-content .util-list li a {
  display: block;
  color: #ddd;
  font-size: calc(1rem * 1.6);
}
footer .bottom-content {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
footer .company-info {
  display: flex;
  flex-direction: column;
  gap: calc(.75rem * 1.6) 0;
}
footer .company-info .title {
  position :relative;
  color: #999;
  padding-right: calc(.5rem * 1.6);
  margin-right: calc(.5rem * 1.6);
}
footer .company-info .title:before {
  content: '';
  display: block;
  position: absolute;
  top: calc(.25rem * 1.6);
  right :0;
  width: calc(.0625rem * 1.6);
  height: calc(.625rem * 1.6);
  background-color: #999;
}
footer .company-info .text {
  color: #ccc;
}
footer .company-info > li ul {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(.75rem * 1.6) calc(1.25rem * 1.6);
}
footer .sns-list {
  display: flex;
  align-items: center;
  position: absolute;
  right: 0;
  bottom: 0;
}
footer .sns-list li {
  /* margin-left: calc(1.25rem * 1.6); */
}
footer .m-footer-logo {
  display: none;
}

@media (max-width: 1680px) {
  .inner {
    width: calc(82rem * 1.6);
  }
  header .inner {
    padding-right: 0;
    padding-left: 0;
  }
  header nav {
    margin-right: calc(5.625rem * 1.6);
    margin-left: calc(5.625rem * 1.6);
  }
  #mainBanner .banner-swiper .swiper-slide {
    height: 580px;
  }
  #mainBanner .banner-swiper .swiper-slide .slide-cont {
    padding-top: calc(4rem * 1.6);
    padding-left: calc(3.75rem * 1.6);
  }
  #mainBanner .banner-swiper .swiper-slide .slide-cont .cont-btns {
    flex-direction: column;
    gap: calc(.5rem * 1.6);
  }
  #mainBanner .banner-swiper .swiper-slide .slide-cont .cont-btns a {
    margin-right: 0;
    width: calc(15.75rem * 1.6);
  }
  #aboutInsoting .inner{
    padding: calc(5rem * 1.6) calc(3.75rem * 1.6) calc(5rem * 1.6);
  }
  #memberData {
    padding-bottom: calc(5rem * 1.6);
  }
  #memberData .inner {
    padding: calc(3.75rem * 1.6) 0;
  }
  #memberData .chart-wrapper .chart-box {
    padding-right: calc(1.875rem * 1.6);
    padding-left: calc(1.875rem * 1.6);
  }
  #faith {
    height: calc(44rem * 1.6);
  }
  #certification .inner {
    padding: calc(5rem * 1.6) calc(3.75rem * 1.6);
    background-size: 68%;
  }
  #certification .care-list li {
    width: calc(34.5rem * 1.6);
    padding: calc(3.625rem * 1.6) calc(2.5rem * 1.6) calc(2.5rem * 1.6);
  }
  #procedure .inner {
    padding: calc(5rem * 1.6) calc(3.75rem * 1.6);
  }
  #procedure .procedure-swiper {
    gap: calc(6.75rem * 1.6);
  }
  #procedure .swiper-pagination {
    width: calc(20.625rem * 1.6);    
    gap: calc(.8125rem * 1.6);
  }
  #procedure .swiper-pagination .item {
    padding: calc(1.3rem * 1.6) calc(2rem * 1.6);
    height: calc(3rem * 3.6);
  }

  #procedure .swiper-pagination .item.active:before {
    width: calc(6.4375rem * 1.6);
  }
  #procedure .swiper-pagination .item.active:after {
    left: calc(100% + calc(6.25rem * 1.6));
  }
  #procedure .swiper-wrapper {
    max-width: calc(100% - calc(20.625rem * 1.6) - calc(6.75rem * 1.6));
  }
  #procedure .swiper-wrapper .swiper-slide .content {
    padding: calc(2.7rem * 1.6) calc(2.4rem * 1.6);
  }  
  #photoAlbum {
    padding-top: calc(5rem * 1.6);
    padding-bottom: calc(5rem * 1.6);
  }
  #photoAlbum .photo-swiper .swiper-slide  {
    width: calc(18rem * 1.6);
    height: calc(22.375rem * 1.6);
    margin-right: calc(1.25rem * 1.6);
  }
  #faq .inner {
    padding: calc(5rem * 1.6);
  }
  footer .inner {
    padding-right: calc(3.75rem * 1.6);
    padding-left: calc(3.75rem * 1.6);
  }
}
@media (max-width: 1280px) {
  .inner {
    width: 90%;
  }
  .highlight-main {
    font-size: calc(2.25rem * 1.6);
  }
  header nav {
    margin-right: calc(3.625rem * 1.6);
    margin-left: calc(1.625rem * 1.6);
  }
  header h1 a {
    width: calc(8.125rem * 1.6);
    height: calc(2.4375rem * 1.6);
  }
  .gnb-open header nav:before, 
  .gnb-open header nav:after {
    top: calc(5.5rem * 1.6);
  }
  header nav .depth1 .depth1-item > a {
    margin-top: calc(1.35rem * 1.6);
    margin-bottom: calc(1.35rem * 1.6);
  }
  header nav .depth1 .depth1-item > a, 
  header nav .depth2 a {
    font-size: calc(1.0625rem * 1.6);
  }
  header .util {
    margin: calc(1.45rem * 1.6) 0;
  }
  #mainBanner .banner-swiper .swiper-slide {
    height: calc(29.6875rem * 1.6);
  }
  #mainBanner .banner-swiper .swiper-slide .slide-cont strong {
    margin-bottom: calc(1.875rem * 1.6);
    font-size: calc(2.25rem * 1.6);
  }
  #mainBanner .pagination-box {
    padding: calc(.9375rem * 1.6) calc(2.8125rem * 1.6) calc(.9375rem * 1.6) calc(1.5rem * 1.6);
  }
  #mainBanner .pagination-box:before {
    left: calc(-5.625rem * 1.6);
    height: calc(4.25rem * 1.6);
  }
  #mainBanner .pagination-box .pagination-container {
    margin-right: calc(2.8125rem * 1.6);
  }
  #mainBanner .pagination-box .pagination-container {
    margin-right: calc(1.875rem * 1.6);
  }
  #mainBanner .pagination-box .swiper-button-prev-banner,
  #mainBanner .pagination-box .swiper-button-next-banner {
    width: calc(2.375rem * 1.6);
    height: calc(2.375rem * 1.6);
  }
  #mainBanner .pagination-box .swiper-button-next-banner {
    margin-left: calc(1.25rem * 1.6);
  }
  #aboutInsoting .inner {
    padding: calc(3.75rem * 1.6) calc(2.5rem * 1.6);
  }
  #aboutInsoting .description {
    width: 46%;
    margin-right: 4%;
    word-break: keep-all;
  }
  #aboutInsoting .description h2 {
    font-size: calc(2.25rem * 1.6);
  }
  #aboutInsoting .data ul strong {
    font-size: calc(2.75rem * 1.6);
  }
  #aboutInsoting .data ul li:nth-child(1), #aboutInsoting .data ul li:nth-child(2) {
    margin-bottom: calc(1.875rem * 1.6);
    padding-bottom: calc(1.875rem * 1.6);
  }
  #memberData .member-wrapper {
    height: calc(13.75rem * 1.6);
  }
  #memberData .member-wrapper, 
  #memberData .chart-wrapper {
    padding-right: calc(1.75rem * 1.6);
    padding-left: calc(1.75rem * 1.6);
  }
  #memberData .member-wrapper .member-swiper ul li {
    font-size: calc(.875rem * 1.6);
  }
  #memberData .chart-wrapper .chart-box {
    padding-right: 2%;
    padding-left: 2%;
  }
  #memberData .chart-wrapper canvas {
    width: calc(7.5rem * 1.6) !important;
    height: calc(7.5rem * 1.6) !important;
    margin-right: calc(1rem * 1.6);
  }
  #memberData .chart-wrapper .legend-container {
    width: calc(6.25rem * 1.6);
  }
  #faith {
    height: calc(37rem * 1.6);
  }
  #faith em {
    font-size: calc(2.25rem * 1.6);
  }
  #faith p {
    font-size: calc(1.125rem * 1.6);
  }
  #certification .inner {
    padding: calc(3.75rem * 1.6) calc(2.5rem * 1.6);
  }
  #certification .desc p {
    width: 40%;
    word-break: keep-all;
  }
  #certification .desc br {
    display: none;
  }
  #certification .care-list li {
    width: 50%;
    padding: calc(3.625rem * 1.6) calc(1.75rem * 1.6) calc(1.75rem * 1.6);
  }
  #certification .care-list li h3 {
    padding-top: calc(3.75rem * 1.6);
    background-size: calc(2.75rem * 1.6);
    font-size: calc(1.25rem * 1.6);
  }
  #why .inner {
    padding-top: calc(3.75rem * 1.6);
    padding-bottom: calc(3.75rem * 1.6);
  }
  #why .inner .table-wrapper table th, 
  #why .inner .table-wrapper table td {
    padding: calc(1.25rem * 1.6) calc(.9375rem * 1.6);
    min-width: calc(13.125rem * 1.6);
  }
  #why .inner .table-wrapper table th {
    font-size: calc(1.25rem * 1.6);
  }
  #procedure .inner {
    padding: calc(3.75rem * 1.6) calc(2.5rem * 1.6) calc(2.25rem * 1.6);
  }
  #procedure .procedure-swiper {
    flex-direction: column;
    gap: calc(2.5rem * 1.6);
  }  
  #procedure .swiper-pagination {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: calc(.5rem * 1.6);
  }
  #procedure .swiper-pagination .item::before,
  #procedure .swiper-pagination .item::after {
    display: none;
  }
  #procedure .swiper-wrapper {
    max-width: 100%;
  }
  #procedure .swiper-wrapper .swiper-slide {    
    gap: 0 calc(.5rem * 1.6);
  }
  #procedure .swiper-wrapper .swiper-slide .img, 
  #procedure .swiper-wrapper .swiper-slide .content {
    width: calc(50% - calc(.25rem * 1.6));
  }  
  #procedure .swiper-wrapper .swiper-slide .img img {
    width: 100%;
  }
  #procedure .swiper-wrapper .swiper-slide .content strong {
    font-size: calc(1.25rem * 1.6);
  }
  #photoAlbum {
    padding-top: calc(3.75rem * 1.6);
    padding-bottom: calc(3.75rem * 1.6);
  }
  #photoAlbum .highlight-main {
    margin-bottom: calc(3.75rem * 1.6);
  }
  #photoAlbum .photo-swiper .swiper-slide {
    width: calc(15rem * 1.6);
    height: calc(18.625rem * 1.6);
  }
  #faq .inner {
    padding: calc(3.75rem * 1.6);
  }
  footer .inner {
    padding-right: calc(2.5rem * 1.6);
    padding-left: calc(2.5rem * 1.6);
  }
}
@media (max-width: 1024px) {
  body.gnb-open:after {
    /* background-color: rgba(0, 0, 0, 0.6); */
    /* backdrop-filter: none; */
  }
  body.gnb-open header {
    z-index: unset;
  }
  .highlight-main {
    font-size: calc(1.875rem * 1.6);
  }
  header .inner {
    align-items: center;
  }
  header .util {
    display: none;
  }
  header h1 a {
    padding-top: calc(.9375rem * 1.6);
    padding-bottom: calc(.9375rem * 1.6);
  }
  header .m_menu-open,
  header .m_menu-close {
    display: block;
    width: calc(2rem * 1.6);
    height: calc(2rem * 1.6);
    padding: calc(.375rem * 1.6) calc(.25rem * 1.6);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    font-size: 0;
  }
  header .m_menu-open {
    background-image: url('/imgMain/m_gnb.svg');
  }
  header .m_menu-close {
    width: calc(1.5rem * 1.6);
    height: calc(1.5rem * 1.6);
    margin-right: 0;
    margin-left: auto;
    background-image: url('/imgMain/m_gnb_close.svg');
  }
  .gnb-open header nav:before,
  .gnb-open header nav:after {
    display: none;
  }
  .gnb-open .gnb {
    display: none;
    right: 0;
    height: 100vh;
  }
  .gnb {
    overflow-y: auto;
    position: fixed;
    top: 0;
    right: calc(-18.5rem * 1.6);
    flex-direction: column;
    display: flex;
    width: 296px;
    height: 100%;
    margin: 0;
    padding: calc(1.25rem * 1.6) calc(1.25rem * 1.6) calc(2rem * 1.6) calc(2rem * 1.6);
    background: #fff;
    transition: right 0.3s ease-in-out;
  }
  header nav .depth1 {
    flex-direction: column;
    margin: 0 0 calc(3.75rem * 1.6) 0;
    padding-top: calc(1.25rem * 1.6);
    gap: calc(2rem * 1.6) 0;
  }
  header nav .depth1 .depth1-item > a {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    text-align: left;
  }
  header nav .depth1 .depth1-item.active > a, 
  header nav .depth1 .depth1-item > a:hover {
    background-color: #fff;
    color: #000;
    font-weight: 500;
  }
  header nav .depth1 .depth1-item.active .depth2 {
    display: block;
  }
  header nav .depth2 {
    display: none;
    position: static;
    width: 100%;
    max-height: none;
    margin-top: calc(1rem * 1.6);
    padding: 0;    
    gap: calc(0.5rem * 1.6);
  }
  header nav .depth2 a {
    text-align: left;
  }
  .gnb-open header nav .depth2 {
    padding: calc(.625rem * 1.6) calc(1.25rem * 1.6);
    background-color: #F7F8FB;
  }
  .m_util {
    display: block;
    padding-top: calc(1.875rem * 1.6);
    border-top: 1px solid #E8EAED;
  }
  .m_util .login:before, 
  .m_util .logout:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(1.5rem * 1.6);
    height: calc(1.5625rem * 1.6);;
    background: url(/imgMain/icon_login.svg) no-repeat left center;
  }
  .m_util .logout:before {
    transform: rotateY(180deg)
  }
  .m_util .login,
  .m_util .logout {
    position: relative;
    display: block;
    padding-left: calc(2.25rem * 1.6);
    color: #464C54;
    font-size: calc(1.125rem * 1.6);
    font-weight: 600;
  }
  #mainBanner .banner-swiper .swiper-slide {
    height: calc(27.375rem * 1.6);
  }
  #mainBanner .banner-swiper .swiper-slide .slide-img {
    display: flex;
    justify-content: center;
  }
  #mainBanner .banner-swiper .swiper-slide .slide-cont {
    padding-top: calc(3rem * 1.6);
    padding-left: calc(2.75rem * 1.6);
  }
  #mainBanner .banner-swiper .swiper-slide .slide-cont p {
    font-size: calc(1.125rem * 1.6);
  }
  #mainBanner .banner-swiper .swiper-slide .slide-cont strong {
    margin-bottom: calc(.9375rem * 1.6);
    font-size: calc(1.625rem * 1.6);
  }
  #mainBanner .banner-swiper .swiper-slide .slide-cont .cont-btns a {
    width: calc(12.75rem * 1.6);
    background-color: rgba(243, 244, 246, 0.1);
  }  
  #mainBanner .banner-swiper .swiper-slide .slide-cont .cont-btns a em {
    font-size: calc(1rem * 1.6);
  }
  #aboutInsoting .inner {
    padding: calc(3.75rem * 1.6) 0;
  }
  #aboutInsoting .data ul strong {
    font-size: calc(2.25rem * 1.6);
  }
  #memberData {
    padding-bottom: calc(3.75rem * 1.6);
  }
  #memberData .inner {
    flex-wrap: wrap;
    padding: calc(3.125rem * 1.6) 0;
  }
  #memberData .member-wrapper {
    width: 100%;
  }
  #memberData .member-wrapper .member-swiper ul .profile {
    width: calc(2.25rem * 1.6);
    height: calc(2.25rem * 1.6);
  }
  #memberData .chart-wrapper {
    width: 50%;
    margin-top: calc(2rem * 1.6);
    padding-top: calc(2rem * 1.6);
    padding-bottom: 0;
  }
  #memberData .chart-wrapper.male:before {
    display: none;
  }
  #memberData .chart-wrapper canvas {
    width: calc(10rem * 1.6) !important;
    height: calc(10rem * 1.6) !important;
  }
  #faith {
    height: calc(28.75rem * 1.6);
  }
  #faith em {
    font-size: calc(1.875rem * 1.6);
    margin-bottom: calc(2.375rem * 1.6);
  }
  #certification .desc p {
    width: auto;
  }
  #certification .care-list {
    margin-top: 0;
  }
  #certification .care-list li {
    width: 60%;
  }
  #why .highlight-sub {
    margin-bottom: calc(.375rem * 1.6);
  }
  #why .highlight-main {
    margin-bottom: calc(1.5rem * 1.6);
  }
  #why .inner .table-wrapper table th, 
  #why .inner .table-wrapper table td {
    padding: calc(1.25rem * 1.6) calc(.9375rem * 1.6);
    min-width: calc(9.375rem * 1.6);
  }
  #procedure .highlight-sub {
    margin-bottom: calc(.375rem * 1.6);
  }
  #procedure .highlight-main {
    margin-bottom: calc(1.5rem * 1.6);
  }
  #procedure .procedure-swiper {
    gap: calc(1.5rem * 1.6) 0;
  }
  #procedure .swiper-wrapper .swiper-slide .img img {
    width: 100%;
  } 
  #photoAlbum {
    padding-top: calc(3.75rem * 1.6);
    padding-bottom: calc(3.75rem * 1.6);
  }
  #photoAlbum .photo-swiper {
    margin-bottom: calc(3.75rem * 1.6);
  }
  #photoAlbum .photo-swiper .swiper-slide {
    width: calc(11.875rem * 1.6);
    height: calc(15.3125rem * 1.6);
    margin-right: 12px;
  }
  #photoAlbum .photo-swiper .swiper-slide.odd {
    margin-top: calc(3.125rem * 1.6);
  }
  #faq .inner {
    padding: calc(3.75rem * 1.6) calc(1.25rem * 1.6);
  }
  footer {
    padding-top: calc(2.5rem * 1.6);
    padding-bottom: calc(2.5rem * 1.6);
  }
  footer .inner {
    padding-right: 0;
    padding-left: 0;
  }
  footer .top-content {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: calc(2rem * 1.6);
  }
  footer .top-content .util-list {
    margin-top: calc(1.75rem * 1.6);
  }
}
#mainBanner .banner-swiper .swiper-slide .slide-img .img_1{
  background-image: url(https://knowhowstorage.s3.ap-northeast-2.amazonaws.com/main/img_slide_1_p.jpg);
  background-position: 50% 50%;
  background-size: cover;
  height: 100%;
  /* position: relative; */
  width: 100%;
}

#mainBanner .banner-swiper .swiper-slide .slide-img .img_2{
  background-image: url(https://knowhowstorage.s3.ap-northeast-2.amazonaws.com/main/img_slide_2_p.jpg);
  background-position: 50% 50%;
  background-size: cover;
  height: 100%;
  /* position: relative; */
  width: 100%;
}
@media (max-width: 800px) {
  #mainBanner .banner-swiper .swiper-slide .slide-img .img_1{
    background-image: url(https://knowhowstorage.s3.ap-northeast-2.amazonaws.com/main/img_slide_1_m.jpg);
    background-position: 50% 50%;
    background-size: cover;
    height: 100%;
    /* position: relative; */
    width: 100%;
  }

  #mainBanner .banner-swiper .swiper-slide .slide-img .img_2{
    background-image: url(https://knowhowstorage.s3.ap-northeast-2.amazonaws.com/main/img_slide_2_m.jpg);
    background-position: 50% 50%;
    background-size: cover;
    height: 100%;
    /* position: relative; */
    width: 100%;
  }

  .highlight-sub {
    margin-bottom: calc(.375rem * 1.6);
    font-size: calc(.875rem * 1.6);    
  }
  .highlight-main {
    font-size: calc(1.625rem * 1.6);
  }  
  #aboutInsoting .inner {
    padding-bottom: calc(3rem * 1.6);
  }
  #mainBanner .banner-swiper {
    border-radius: calc(0.875rem * 1.6);
  }
  #mainBanner .banner-swiper .swiper-slide {
    height: calc(23.375rem * 1.6);
  }
  #mainBanner .banner-swiper .swiper-slide .slide-cont {
    padding-top: 0;
    padding-left: calc(1.5rem * 1.6);
    top: auto;
    bottom: calc(1.875rem * 1.6);
  }
  #mainBanner .banner-swiper .swiper-slide .slide-cont p {
    width: calc(9rem * 1.6);
    margin-bottom: 0;
    font-size: calc(1rem * 1.6);
    line-height: 1.4;
  }
  #mainBanner .banner-swiper .swiper-slide .slide-cont strong br:first-child {
    display: block;
  }
  #mainBanner .banner-swiper .swiper-slide .cont-text {
    display: flex;
    flex-direction: column-reverse; 
    word-break: keep-all;    
  }
  #mainBanner .banner-swiper .swiper-slide .slide-cont .cont-btns {
    display: none;
  }  
  #mainBanner .pagination-box {
    padding-right: calc(1rem * 1.6);
    padding-left: calc(1rem * 1.6);
  }
  #mainBanner .pagination-box:before {
    left: calc(-4.625rem * 1.6);
    height: calc(2.9375rem * 1.6);
  }
  #mainBanner .pagination-box .pagination-container {
    width: calc(5.375rem * 1.6);
    margin-right: 0;
  }
  #mainBanner .pagination-box .swiper-pagination-progressbar {
    width: calc(3rem * 1.6);
  }
  #mainBanner .pagination-box .swiper-button-prev-banner, 
  #mainBanner .pagination-box .swiper-button-next-banner {
    display: none;
  }
  #mainBanner .m_banner-btns {
    display: block;
    margin-top: calc(1.5rem * 1.6);
    padding-bottom: calc(1.25rem * 1.6);
  }
  #mainBanner .m_banner-btns .cont-btns {
    display: flex;    
    gap: calc(.5rem * 1.6);;
  }
  #mainBanner .m_banner-btns .cont-btns a {
    position: relative;
    overflow: hidden;
    display: flex;
    width: 100%;
    padding: calc(1rem * 1.6) calc(2.25rem * 1.6) calc(1rem * 1.6) calc(3.875rem * 1.6);
    flex-direction: column;
    justify-content: center;
    gap: calc(.25rem * 1.6);
    border-radius: calc(.75rem * 1.6);
    background-color: #F3F5F6;
    -webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
  }
  #mainBanner .m_banner-btns .cont-btns a:before, 
  #mainBanner .m_banner-btns .cont-btns a:after {
    content: '';
    display: block;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
  }
  #mainBanner .m_banner-btns .cont-btns a:before {
    left: calc(1.25rem * 1.6);
    width: calc(2rem * 1.6);
    height: calc(2rem * 1.6);
    background-image: url('/imgMain/icon_star_ring.svg');
    background-size: calc(2rem * 1.6);
  }
  #mainBanner .m_banner-btns .cont-btns a:nth-child(2):before {
    background-image: url('/imgMain/icon_user_group.svg');
    background-size: calc(2rem * 1.6);
  }
  #mainBanner .m_banner-btns .cont-btns a:after {
    right: calc(1.25rem * 1.6); 
    width: calc(1rem * 1.6);
    height: calc(1rem * 1.6);
    background-image: url('/imgMain/icon_arrow.svg');
    background-size: calc(1rem * 1.6);
  }
  #mainBanner .m_banner-btns .cont-btns a span {
    color: #464C54;
    font-size: calc(.75rem * 1.6);
    line-height: 1.4;
  }
  #mainBanner .m_banner-btns .cont-btns a em {
    color: #000;
    font-size: calc(1rem * 1.6);
    font-weight: 700;
    line-height: 1.4;
  }
  #aboutInsoting .description h2 {
    font-size: calc(1.625rem * 1.6);
  }
  #aboutInsoting .description p {
    font-size: calc(.9375rem * 1.6);
  }
  #aboutInsoting .data ul span {
    margin-bottom: calc(.5rem * 1.6);
    font-size: calc(.875rem * 1.6);
  }
  #aboutInsoting .data ul strong {
    font-size: calc(2rem * 1.6);
  }
  #aboutInsoting .data ul li:nth-child(1), 
  #aboutInsoting .data ul li:nth-child(2) {
    margin-bottom: calc(1.25rem * 1.6);
    padding-bottom: calc(1.25rem * 1.6);
  }
  #memberData .inner {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  #memberData .chart-wrapper .chart-box {
    padding-right: 0;
    padding-left: 0;
  }
  #memberData .chart-wrapper canvas {
    width: 120px !important;
    height: 120px !important;
  }
  #memberData .chart-wrapper .legend-item .text {
    width: auto;
    font-size: calc(.75rem * 1.6);
  }
  #faith {
    height: calc(25rem * 1.6);
  }
  #faith h2 {
    margin-bottom: calc(.375rem * 1.6);
    font-size: calc(.875rem * 1.6);
  }
  #faith em {
    margin-bottom: calc(1rem * 1.6);
    font-size: calc(1.5rem * 1.6);
    line-height: 1.4;
  }
  #faith p {
    font-size: calc(.9375rem * 1.6);
  }
  #faith p br:first-child {
    display: block;
  }
  #certification .inner {
    padding-right: 0;
    padding-left: 0;
  }
  #certification .highlight-main {
    margin-bottom: calc(.5rem * 1.6);
  }
  #certification .desc {
    font-size: calc(.9375rem * 1.6);
  }
  #certification .care-list {
    margin-top: calc(1.25rem * 1.6);
  }
  #certification .care-list li {
    margin-top: calc(.75rem * 1.6);
    width: 100%;
  }
  #certification .care-list li h3 {
    padding-top: calc(2.8125rem * 1.6);
    background-size: calc(2.25rem * 1.6);
    font-size: calc(1.125rem * 1.6);
  }
  #why .inner .table-wrapper table {
    width: 100%;
  }
  #why .inner .table-wrapper table th, 
  #why .inner .table-wrapper table td {
    padding: calc(1.125rem * 1.6) calc(.625rem * 1.6);
    min-width: auto;
  }
  #why .inner .table-wrapper table th {
    font-size: calc(1.125rem * 1.6);
  }
  #why .inner .table-wrapper table td {
    font-size: calc(.875rem * 1.6);
  }
  #procedure .inner {
    padding-right: 0;
    padding-left: 0;
  }
  #procedure .swiper-pagination .item {
    padding: calc(1rem * 1.6) calc(1.5rem * 1.6);
    gap: calc(.625rem * 1.6);
    border-radius: calc(.375rem * 1.6);;
  }  
  #procedure .swiper-pagination .item .title .desc {
    display: none;
  }
  #procedure .swiper-pagination .item .title h3 {
    font-size: calc(1.125rem * 1.6);
  }
  #procedure .swiper-wrapper .swiper-slide .img, 
  #procedure .swiper-wrapper .swiper-slide .content {
    border-radius: calc(.75rem * 1.6);;
  }
  #procedure .swiper-wrapper .swiper-slide .content {
    padding: calc(1.5rem * 1.6);
    font-size: calc(.9375rem * 1.6);
  }
  #procedure .swiper-wrapper .swiper-slide .content strong {
    margin-bottom: calc(.75rem * 1.6);
    font-size: calc(1.125rem * 1.6);
  }
  #photoAlbum {
    padding-bottom: calc(2.75rem * 1.6);
  }
  #photoAlbum .highlight-sub {
    margin-bottom: calc(.375rem * 1.6);
  }
  #photoAlbum .highlight-main {
    margin-bottom: calc(2rem * 1.6);
  }
  #photoAlbum .photo-swiper {
    margin-bottom: calc(2rem * 1.6);
  }
  #photoAlbum .photo-swiper .swiper-slide {
    width: calc(8.75rem * 1.6);
    height: calc(10.8125rem * 1.6);
  }
  #photoAlbum .photo-swiper .swiper-slide.odd {
    margin-top: calc(1.5625rem * 1.6);
  }
  #faq .highlight-sub{
    margin-bottom: 6px;
  }
  #faq .highlight-main {
    margin-bottom: calc(1.5rem * 1.6);
  }
  #faq .list li:not(:first-child) {
    margin-top: 12px;
  }
  footer .footer-logo {
    display: none;
  }
  footer .m-footer-logo {
    display: block;
  }
  footer .top-content img {
    width: calc(9.375rem * 1.6);
    height: calc(2rem * 1.6);
  }
  footer .bottom-content {
    display: block;
  }
  footer .sns-list {
    position: static;
    /* justify-content: flex-end; */
    margin-top: calc(1.75rem * 1.6);
  }
}
@media (max-width: 640px) {
  span.text {
    font-size: 1rem;
  }
  .inner {
    width: 89.34%;
  }
  .highlight-sub,
  .highlight-main {
    padding-right: calc(1.25rem * 1.6);
    padding-left: calc(1.25rem * 1.6);
    word-break: keep-all;
  }
  .highlight-sub {
    font-size: calc(.75rem * 1.6);
  }
  .highlight-main {
    font-size: calc(1.5rem * 1.6);
  }
  #mainBanner .banner-swiper .swiper-slide {
    height: calc(24.375rem * 1.6);
  }  
  #mainBanner .m_banner-btns .cont-btns  {
    flex-direction: column;
  }
  #aboutInsoting .inner {
    display: block;
  }
  #aboutInsoting .highlight-sub,
  #aboutInsoting .highlight-main {
    padding-left: 0;
  }
  #aboutInsoting .description, 
  #aboutInsoting .data {
    width: auto;
  }
  #aboutInsoting .description {
    margin-right: 0;
    margin-bottom: calc(2rem * 1.6);
  }
  #memberData .inner {
    display: block;
  }
  #memberData .member-wrapper .member-swiper ul {
    justify-content: space-around;
  }  
  #memberData .chart-wrapper {
    width: auto;
  }
  #memberData .chart-wrapper:before {
    left: 10%;
    top: 0;
    bottom: auto;
    width: 80%;
    height: 1px;
    margin: 0 auto;
  }
  #memberData .chart-wrapper.male:before {
    display: block;
  }
  #memberData .chart-wrapper canvas {
    width: 180px !important;
    height: 180px !important;
  }
  #faith {
    height: calc(22.25rem * 1.6);
    padding-right: calc(1.25rem * 1.6);
    padding-left: calc(1.25rem * 1.6);
  }
  #certification .highlight-sub,
  #certification .highlight-main {
    padding-left: 0;
  }
  #certification .care-list li {
    padding: calc(2.08rem * 1.6) calc(1.25rem * 1.6) calc(1.25rem * 1.6);
  }
  #certification .care-list li h3 {
    margin-bottom: calc(.375rem * 1.6);
    padding-top: calc(2.5rem * 1.6);
    background-size: calc(1.75rem * 1.6);
  }
  #certification .care-list li p {
    font-size: calc(.875rem * 1.6);
    word-break: keep-all;
  }
  #why .inner .table-wrapper table th {
    font-size: calc(.9375rem * 1.6);
  }
  #why .inner .table-wrapper table td {
    font-size: calc(.75rem * 1.6);
    word-break: keep-all;
  }
  #why .inner .table-wrapper table td br {
    display: none;
  }
  #procedure .procedure-swiper {
    gap: 0;
  }
  #procedure .swiper-wrapper {    
    margin-top: calc(1.5rem * 1.6);
  }
  #procedure .swiper-pagination .item {
    padding: calc(.75rem * 1.6);
    height: calc(1.5rem * 3.6);
  }
  #procedure .swiper-pagination .item .num {
    width: calc(1.5rem * 1.6);
    height: calc(1.5rem * 1.6);
    font-size: calc(.75rem * 1.6);
    line-height: calc(1.5rem * 1.6);
  }
  #procedure .swiper-pagination .item .title h3 {
    font-size: calc(.875rem * 1.6);
  }
  #procedure .swiper-wrapper .swiper-slide {
    display: block;
  }
  #procedure .swiper-wrapper .swiper-slide .img, 
  #procedure .swiper-wrapper .swiper-slide .content {
    width: auto;
  }
  #procedure .swiper-wrapper .swiper-slide .img {
    margin-bottom: calc(.75rem * 1.6);
  }
  #procedure .swiper-wrapper .swiper-slide .img img {
    width: 100%;
  }
  #procedure .swiper-wrapper .swiper-slide .content strong {
    font-size: calc(1.25rem * 1.6);
  }
  #procedure .swiper-wrapper .swiper-slide .content {
    font-size: calc(.875rem * 1.6);
  }
  #faq .inner {
    padding-right: 0;
    padding-left: 0;
  }
  #faq .list li .q,
  #faq .list li .a {
    padding: calc(1rem * 1.6) calc(1.25rem * 1.6);
    font-size: calc(.875rem * 1.6);
    -webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
  }
  #faq .list li .q p {
    width: 80%;
    word-break: keep-all;
  }
  #faq .list li .q::before, 
  #faq .list li .a::before {
    width: calc(1.1875rem * 1.6);
    height: calc(1.3125rem * 1.6);
    margin-right: calc(.5rem * 1.6);
  }
  #faq .list li .q::after {
    right: calc(1.25rem * 1.6);
    margin-top: calc(-0.0625rem * 1.6);
  }
  footer .top-content .util-list li a {
    font-size: calc(.875rem * 1.6);
  }
  footer .bottom-content {
    font-size: calc(.75rem * 1.6);
  }
  footer .company-info {
    gap: calc(.5rem * 1.6) 0;
  }
}
@media (max-width: 400px) {
  span.text {
    font-size: 1rem;
  }

  #memberData .chart-wrapper canvas {
    width: 125px !important;
    height: 125px !important;
  }
  #faith p br {
    display: none;
  }
  #certification .care-list li p br {
    display: none;
  }
  #photoAlbum .photo-swiper .swiper-slide {
    width: calc(6.5rem * 1.6);
    height: calc(8rem * 1.6);
  }
}

.dimmed-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.dimmed-overlay.active {
  display: block;
  opacity: 1;
}
.popup {
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  width: 90%;
  max-width: calc(31.25rem * 1.6);
  border-radius: calc(.5rem * 1.6);
  box-shadow: 0 calc(.25rem * 1.6) calc(.75rem * 1.6) rgba(0, 0, 0, 0.2);
  z-index: 1000;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.popup.active {
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.popup .popup-wrap {
  overflow-y: scroll;
  position: relative;
  max-height: 80vh;
}
.popup .popup-content {
  padding: calc(1.25rem * 1.6);
  font-size: calc(.9375rem * 1.6);
}
.popup .popup-content h2 {
  margin: 0 0 calc(.9375rem * 1.6);
  font-size: calc(1.5rem * 1.6);
  color: #333;
}
.popup .popup-content strong {
  font-size: calc(.9375rem * 1.6);
}
.popup .popup-close {
  position: absolute;
  top: calc(1.3rem * 1.6);
  right: calc(.625rem * 1.6);
  background: none;
  border: none;
  font-size: calc(1.2rem * 1.6);
  cursor: pointer;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .popup {
      width: 95%;
      max-height: 90vh;
      font-size: calc(.875rem * 1.6);
  }
  .popup .popup-content h2 {
      font-size: calc(1.2rem * 1.6);
  }
}

.flBtn {
  position: fixed;
  z-index: 1000;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  text-decoration: none;
}
.flBtn ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  text-decoration: none;  
  position: absolute;
  visibility: visible;
}

.flBtn input {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}

.flBtn input:checked ~ ul {
  visibility: visible;
}
.flBtn input:checked ~ ul li {
  visibility: visible;
  opacity: 1;
}

.flBtn input:hover + a {
  color: #383838;
  background: #4db6ac;
}
.flBtn input:hover + a[tooltip]:before {
  visibility: visible;
  opacity: 1;
}
.flBtn a {
  position: relative;
  z-index: 2;
  display: block;
  vertical-align: middle;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  background: #009688;
  color: #ffffff;
  transition: background 0.5s;
  -o-transition: background 0.5s;
  -ms-transition: background 0.5s;
  -moz-transition: background 0.5s;
  -webkit-transition: background 0.5s;
}
.flBtn a:hover {
  color: #383838;
  background: #4db6ac;
}
.flBtn ul li {
  display: inline-block;
  margin: 5px;
  visibility: visible;
  opacity: 1;
  transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
}
.flBtn [tooltip]:before {
  position: absolute;
  content: attr(tooltip);
  visibility: visible;
  opacity: 0;
  padding: 0 10px;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  transition: all 0.5s;
}
.flBtn [tooltip]:hover:before {
  visibility: visible;
  opacity: 1;
}

.flBtn-size-medium a {
  width: 60px;
  height: 60px;
  line-height: 60px;
  font-size: 24px;
}
.flBtn-size-medium ul a {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
}
.flBtn-size-medium [tooltip]:before {
  height: 30px;
  line-height: 30px;
  font-size: 16px;
}

.flBtn-position-br {
    bottom: 17PX;
    right: 4px;
    visibility: hidden;
}
.flBtn-position-br [tooltip][data-role]:before {
  right: 100%;
  bottom: 100%;
}
.flBtn-position-br .flBtn-first {
  right: 40px;
  transform: translateX(50%);
  bottom: 100%;
  /*padding-left: 55px !important;
  bottom: 20px;*/
  /* padding-left: 60px !important; */
  bottom: 5px;
}
.flBtn-position-br .flBtn-first [tooltip]:before {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 5px;
}
.flBtn-position-br .flBtn-second {
  display: flex;
  top: 50%;
  transform: translateY(-50%);
  right: 100%;
}
.flBtn-position-br .flBtn-second [tooltip]:before {
  right: 100%;
  bottom: 100%;
  margin-bottom: 5px;
}

/*  */
.modal {
  /*position: fixed;*/
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.5);
}

.modal:focus {
  border: 5px solid crimson;
}

.modal__content {
  background-color: white;
  width: 85%;
  max-width: 500px;
  height: 200px;
  position: fixed;
  top: 27%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*padding: 1rem;*/
  box-sizing: border-box;
  z-index: 1000;
}

.modal__close {
  margin-top: 3px !important;
  right: 5px;
  cursor: pointer;
  margin: 0px 50px 0px auto;
  padding: 3px;
  text-align: center;
  border-style: solid;
  border-color: darkgrey;
  font-size: 13px;
  position: absolute;
  border-width: 1px;
  /* background-color: darkgrey; */
  font-family: fantasy;
  font-size: 13px;
  border-radius: 5px;
}

@media(max-width:780px) {
  .modal__content{
    width: 90%;
    top: 29%;
  }
}

@media(max-width:480px) {
  .modal__content{
    width: 90%;
    top: 29%;
  }
}