/*
Theme Name: My Bootstrap Theme
Theme URI: Plander.io
Author: Plander
Author URI: Plander.io
Description: A WordPress theme built with Bootstrap 5
Version: 1.0
License: GPLv2 or later
License URI: Plander.io
Text Domain: my-bootstrap-theme
*/


.main-logo {
    position: relative;
    /* 스크롤 시 따라오게 하려면 fixed 사용 */
    width: 100%;
    transition: transform 0.2s ease-out;
    text-align: center;
    padding: 2rem 0;
}

#logo-img {
    width: 50%;
    /* 원하는 초기 크기 */
    transition: transform 0.2s ease-out;
    transform-origin: top center;
}

.hero-video {
position:relative;
}
.video-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
video {
  width: 100%;
  height: auto;
  display: block;
margin-top:-50px
}


.btn-anchor {
    position: fixed;
    bottom: 4rem;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 1rem 2rem;
    border-radius: 5rem;
    font-size: 1.25rem;
--bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
transition: opacity 0.5s ease;
  opacity: 1;
}

.btn-anchor:hover {
background:var(--Hipink);
color:#fff;
}

.btn-anchor.hide {
  opacity: 0;
}

 


/* 오프캔버스 */

#searchCanvas {
    height: 30vh;
    background-color: var(--Hiyellow);
}


#searchCanvas .offcanvas-body {
    justify-content: center;
}

#searchCanvas .input-group {
    max-width: 800px;
}

#searchCanvas .form-control {
    border: transparent;
    font-size: 1.5rem;
    padding: 1rem 1.5rem;
}





.custom-offcanvas {
    background-color: #ee3da4;
    width: 34% !important;
    padding: 4rem;
    color: #fff;
}

/* 상단 링크 */
.top-links a {
    color: #fff;
    text-decoration: none;
    font-size: 1.5rem;
    margin-right: 1rem;
    font-weight: 500;
}

/* 메뉴 항목 */
.custom-offcanvas .nav>li>a {
    color: #fff !important;
    font-weight: bold;
    font-size: 3rem;
    display: block;
}

.custom-offcanvas .offcanvas-header {
    right: 3rem
}

/* 로고 */

.custom-logo {
    position: absolute;
    height: 50px;
    /* 필요한 높이 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.custom-logo-link {
    display: block;
    width: 103px;
    height: 50px;
}

.custom-logo-link img {
    max-height: 50px;
    width: auto;
}

/* 카트 배지 */
.cart-count {
    font-size: 0.6rem;
    padding: 0.2rem 0.4rem;
    position: absolute;
    right: 5px;
    top: 12px;
    border-radius: 50%;
    color: var(--bs-gray-900);
    background-color: var(--Hiyellow);
}



/*Button*/

.btn-toggle {
    padding: 1rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    position: relative;
    white-space: nowrap;
    letter-spacing: 0.01em;
    transition: color 426ms cubic-bezier(0.4, 0.9, 0.3, 1);
}


.link_circle_over {
    position: relative;
    border-radius: 4rem;
    overflow: hidden;
}

.link_circle_over a {
    transition: 400ms;
}

.link_circle_over .link_circle {
    background-color: var(--P02);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    margin-left: 0;
    margin-top: 0;
    pointer-events: none;
}

.link_circle_over .link_circle_text {
    position: relative;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
}

.link_circle_over .circle_on {
    animation: circle_on 0.8s forwards;
}

.link_circle_over .circle_off {
    animation: circle_off 0.5s forwards;
}

.link_circle_over.pk .circle_on {
    animation: circle_on_pk 0.8s forwards;
}

.link_circle_over.pk .circle_off {
    animation: circle_off_pk 0.5s forwards;
}


/* 기본 섹션 스타일 */
.m_sec01 {
    padding: 0;
    margin: 10rem auto 10rem;
    max-width: 168rem;
    width: 95%;
    overflow: hidden;
    border-radius: 3rem;
    position: relative;
}

/* 슬라이드 정렬 */
.m_sec01 .swiper-slide {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

/* 이미지 영역 */
.m_sec01 .swiper-slide picture {
    width: 50%;
    height: 100%;
}

.m_sec01 .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 텍스트 영역 */
.m_sec01 .swiper-slide .txt {
    width: 50%;
    padding: 0 5%;
    background-color: #d5d5d5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* 텍스트 요소 */
.m_sec01 .txt .t01 {
    font-size: 5rem;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
    letter-spacing: 0.01em;
    opacity: 0;
}

.m_sec01 .txt .t02 {
    margin-top: 2.4rem;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.4;
    color: #fff;
    opacity: 0;
}

.m_sec01 .txt .t03 {
    margin-top: 4rem;
    opacity: 0;
}



/* Swiper 페이지네이션 */
.m_sec01 .swiper-pagination {
    position: absolute;
    bottom: 6%;
    right: 0;
    width: 50%;
    display: flex;
    justify-content: center;
    gap: 1.6rem;
    z-index: 10;
    left: auto;
}

.m_sec01 .swiper-pagination-bullet {
    width: 1.6rem;
    height: 1.6rem;
    background-color: #fff;
    opacity: 0.2;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.m_sec01 .swiper-pagination-bullet-active {
    width: 6.4rem;
    opacity: 1;
    border-radius: 1.6rem;
}


.m_sec01 .swiper-slide .txt .t03 a {
    border-radius: 4rem;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.6;
    color: #1a1a1a;
    padding: 1.6rem 4rem;
    display: inline-block;
    background-color: #fff;
    letter-spacing: 0.01em;
}

.m_sec01 .swiper-slide .txt .t03 a:hover {
    color: #fff;
}



/* 슬라이드가 활성화될 때 텍스트 애니메이션 실행 */
.m_sec01 .swiper-slide-active .t01 {
    animation: fadeInUp;
    animation-duration: 1s;
    backface-visibility: hidden;
    animation-fill-mode: forwards;
}

.m_sec01 .swiper-slide-active .t02 {
    animation: fadeInUp;
    animation-duration: 1s;
    backface-visibility: hidden;
    animation-fill-mode: forwards;
    animation-delay: 0.2s;
}

.m_sec01 .swiper-slide-active .t03 {
    animation: fadeInUp;
    animation-duration: 1s;
    backface-visibility: hidden;
    animation-fill-mode: forwards;
    animation-delay: 0.4s;
}





/* ------- COMMON ------- */


.image-wrap {
    position: relative;
}

.image-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.image-wrap img {
    max-width: 100%;
    vertical-align: top;
}


.wrap.gray {
    background: #F7F7F7;
}

.wrap.yellow {
    background: var(--Hiyellow);
}

.wrap.blue {
    background: var(--Hiblue);
}

.hidden {
    display: none;
}




/* ------- Main ------- */
/* .section-main { overflow: hidden; } */
.section-title .heading {
    font-family: 'Hakgyoansim';
    font-size: 65px;
    font-weight: 700;
color:#fff;
}

.section-title .text {
    margin-top: 15px;
    font-size: 20px;
    font-weight: 500;
color:#fff;
}

.floating-symbol {
    position: fixed;
    z-index: 99;
    transition: opacity ease .3s;
    right: 2%;
    bottom: 4%;
}

.floating-symbol>img {
    animation: rotate 6s linear infinite;
    max-width: 12rem;
}

.floating-symbol .title {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    font-family: 'Hakgyoansim';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 2rem;
    z-index: 2;
    transition: all ease .3s;
    filter: invert(1);
    color: #000;
 
}

.floating-symbol .title img {
    max-width: 20%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all ease .3s;
}

.floating-symbol:hover .title {
    color: transparent;
}

.floating-symbol:hover .title img {
    opacity: 1;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
        /* 회전 시작 각도 */
    }

    to {
        transform: rotate(360deg);
        /* 회전 종료 각도 */
    }
}




.section-main-hero {
    position: relative;
    padding: 600px 0 140px;
    height: 300vh;
    background: var(--Hiyellow);
}

.section-main-hero .sticky {
    overflow: hidden;
    position: sticky;
    top: 50px;
    padding-bottom: 90px;
    height: calc(100vh - 50px);
}

.section-main-hero .gallery-container {
    overflow: hidden;
}

.section-main-hero .gallery-container .col {
    position: relative;
    flex-shrink: 0;
    padding: 0;
    width: calc((100vw - 48px) / 3);
    /* gap 24px * 2 보정 */
    transition: all ease .65s;
    height: 90vh;
    flex: none
}

.section-main-hero .gallery-container .col:first-child {
    width: 30vw;
}

.section-main-hero .gallery-container .image-wrap {
    overflow: hidden;
    border-radius:6rem;
    height: 100%;
}

.section-main-hero .gallery-container .image-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.section-main-hero .gallery-wrapper {
    display: flex;
    align-items: stretch;
    position: relative;
    left: 50vw;
    gap: 2rem;
    margin-left: calc(-23.9vw + 18px);
}

.section-main-hero .text-wrap {
    z-index: 2;
    position: absolute;
    top: 250px;
    left: 5%;
    right: 5%;
    margin: auto;
    width: 90%;
}

.section-main-hero .text-wrap .symbol {
    z-index: 1;
    position: absolute;
    top: 50%;
    right: -10%;
    transform: translateY(-50%);
    width: 17rem;
}

.section-main-hero .text-wrap .heading {
    display: inline-block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 160px;
    font-weight: 700;
    transform-origin: top center;
}

.section-main-hero .text-wrap .heading span {
    z-index: 2;
    display: block;
    position: relative;
    color:var(--bs-gray-900)
}

.section-main-hero .text-wrap .text {
    margin-left: 21%;
    padding-top: 250px;
    font-size: 50px;
    font-weight: 500;
    opacity: 0;
}

.section-main-hero .scroll-down {
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: -2px;
    width: 200px;
    z-index: 1;
    transition: all ease .3s;
}

.section-main-hero .scroll-down img {
    vertical-align: top;
}





@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

    /* 원래 콘텐츠 길이의 절반 */
}



.review-marquee-section {
    overflow: hidden;
    position: relative;
    background: var(--Hipink);
    padding: 120px 0 240px 0;
}

.review-marquee-track:hover {
    animation-play-state: paused;
}


.review-marquee-track {
    display: flex;
    gap: 24px;
    animation: marquee-scroll 60s linear infinite;
    width: max-content;
}

.review-card {
    width: 450px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 3rem;
    overflow: hidden;
}

 




.review-thumb img {
    width: 100%;
    object-fit: cover;
    height: auto;
    aspect-ratio: 1/1;
}

.review-content {
    padding: 2rem;
}

.review-content h4 {
    font-size: 1.25rem;
    margin: 0 0 16px;
}

.review-content p {
    font-size: 1.125rem;
    color: var(--bs-gray-600);
    margin: 0;
    line-height: 1.6;
}

.review-content .acf-nickname {
    font-size: 0.875rem;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--bs-gray-400);
}



@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}







.section-main-link {
    z-index: 2;
    position: relative;
    margin-top: -140px;
    padding: 110px 0 120px;
    background: var(--Hipink);
    border-top-left-radius: 140px;
    border-top-right-radius: 140px;
}

.section-main-link .lists {
    margin-top: 68px;
}

.section-main-link .lists li {
    border-bottom: 1px solid #fff;
    transition: all ease .3s;
}

.section-main-link .lists a {
    display: block;
    position: relative;
    margin: auto;
    padding: 56px 96px;
    max-width: 1680px;
    width: 90%;
}

.section-main-link .lists li:hover {
    background: #ef65a6;
}

.section-main-link .lists em {
    position: absolute;
    top: 50px;
    left: 0;

    font-size: 27px;
    font-weight: 700;
    color: #fff;
}

.section-main-link .lists .title b {
    display: block;
    margin-top: 10px;
color: #fff;
    font-size: 45px;
    font-weight: 400;
}

.section-main-link .lists .title small {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}

.section-main-link .lists .text {
    margin-top: 10px;
    font-weight: 500;
color: #fff;
}

.section-main-link .lists .icon {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}


.section-main-partner {
    z-index: 2;
    position: relative;
    padding: 120px 0 120px;
    background: #fff;
    border-top-left-radius: 140px;
    border-top-right-radius: 140px;
    margin-bottom: 250px;
}


.section-main-partner .text-wrap {
    z-index: 2;
    width: 100%;
    text-align: center;
    position: relative;
}


.section-main-partner .text-wrap .heading {
    display: inline-block;
    white-space: nowrap;
    font-size: 160px;
    font-weight: 700;
    color:var(--bs-gray-900)
}

.section-main-partner .text-wrap .heading span {
    z-index: 2;
    display: block;
    position: relative;
}

.section-main-partner .text-wrap .symbol {
    z-index: 1;
    position: absolute;
    top: 34%;
    right: 27%;
    transform: translateY(-50%);
    width: 17rem;
}


.partner-wrap {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* 기본: 모바일은 2열 */
    gap: 2rem;
    padding-top: 120px;
    align-items: start;
}

.partner-wrap .item {
    flex: 1;
}

.partner-wrap .item img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 2rem 10rem;
}

.partner-wrap .item .title {
    font-size: 2rem;
    text-align: center;
    padding-top: 2rem;
    font-weight: 500;
    font-family: 'Hakgyoansim';
}




.only-mo {
    display: none !important;
}




/*SUB*/


#hi5ive-intro .intro-section {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    background: #f8f9fa;
    padding: 2rem;
  }

  #hi5ive-intro .intro-section.bg1 {
     background-size: cover; 
    background-color: var(--Hipink);
   }



  #hi5ive-intro .intro-section.bg2 {
    background: url(/wp-content/uploads/2025/07/high-angle-child-woman-painting.jpg);
    background-size: cover;
     background-attachment: fixed;
    background-color: #0000008f;
    background-blend-mode: multiply;
  }
 
 
  .highlight {
    color: #ff7043;
  }

  .intro-image {
    max-width: 300px;
  }

  .card-feature {
    border: none;
    border-radius: 16px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
  }

  .card-feature:hover {
    transform: translateY(-8px);
  }



.page-wrap {
    padding: 120px 0 400px 0;
}

.page-title {
    font-size: 6rem;
    font-family: 'Hakgyoansim';
    text-align: center;
    padding-bottom: 5rem;
}

.under-visual {
    position: fixed;
    top: 0;
    left: 0;
    right: 0; 
}

.under-visual .img-wrap {
    width: 100%;
    background-color: #000;
    background-size: cover;
    background-position: center center;
}

.img-wrap {
    position: relative;
    overflow: hidden;
}

.img-wrap .img.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover;
    object-position: center center;
}

.visual-content {
    z-index: 2;
    position: relative;
}

.vh-100.pack-center {
    color: #fff;
}


/* marquee-wrap */
.marquee-wrap {
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

.marquee-wrap .marquee {
    position: relative;
    overflow: hidden;
    --offset: 40vw;
    --move-initial: calc(-25% + var(--offset));
    --move-final: calc(-50% + var(--offset)); 
}

.marquee-wrap .marquee-inner {
    position: relative;
    width: fit-content;
    white-space: nowrap;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}

.marquee-wrap .marquee-inner>span {
    text-transform: uppercase;
     font-size: 160px;
    font-weight: 900; 
}

.marquee-wrap .marquee-inner>.ico {
    margin: 0 40px;
}

.marquee-wrap .marquee .marquee-inner {
    -moz-transform: translate3d(var(--move-initial), 0, 0);
    -webkit-transform: translate3d(var(--move-initial), 0, 0);
    -o-transform: translate3d(var(--move-initial), 0, 0);
    -ms-transform: translate3d(var(--move-initial), 0, 0);
    transform: translate3d(var(--move-initial), 0, 0);

    -webkit-animation: marqueeLeft 15s linear infinite;
    animation: marqueeLeft 15s linear infinite;
}

@media all and (max-width: 768px) {

#hi5ive-intro .intro-section {
   padding: 5rem 20px;
}


#hi5ive-intro .intro-image {
  width: 100%;

}

#hi5ive-intro .intro-text {
    font-size: 2rem !important;
  padding: 0 20px;
}


.hero-video .btn-anchor {
    display: block;
    z-index: 3;
    width: 90%;
    bottom: 3rem;
    position: absolute;
    font-size: 1.125rem;
}

video {
margin-top:0;
}
.btn-anchor { 
display:none
}
    .marquee-wrap .marquee-inner>span {
        font-size: 50px;
    }

    .marquee-wrap .marquee-inner>.ico {
        margin: 0 20px;
    }



}

@-webkit-keyframes marqueeLeft {
    0% {
        transform: translateX(var(--move-initial));
    }

    100% {
        transform: translateX(var(--move-final));
    }
}

@keyframes marqueeLeft {
    0% {
        transform: translateX(var(--move-initial));
    }

    100% {
        transform: translateX(var(--move-final));
    }
}




.ico.symbol {
    width: 40px;
    height: 40px;
    background-image: url('/wp-content/uploads/2025/07/ico.svg');
}

.ico {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


.vh-100.pack-center p.title {
    font-size: 32px;
    font-weight: bold;
}

.vh-100.pack-center p.text {
    font-size: 24px;
    font-weight: 500;
    color: var(--bs-gray-300);
}


.vh-100.pack-center .pack-down {
    gap: 24px;
}


.vh-100.pack-center .pack-down {
    -webkit-align-items: center;
    align-items: center;
}

.visual-content .hgroup + * {
    margin-top: 80px;
}


.pack-down {
    -webkit-flex-direction: column;
    flex-direction: column;
}

[class*="pack-"] {
    gap: 2rem;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
}

[class*="pack-center"] {
    text-align: center;
    -webkit-justify-content: center;
    justify-content: center;
}


.pack-center, .pack-left, .pack-both {
    -webkit-align-items: center;
    align-items: center;
}


.vh-100.pack-center p.title {
    font-size: 32px;
    font-weight: bold;
}

.vh-100.pack-center p.text {
    font-size: 24px;
    font-weight: 500;
    color: var(--bs-gray-300);
}



.visual-content { 
    padding-bottom: 280px;
}

.visual-content .section {
    padding-top: 240px;
}

.visual-content .section .img-wrap {
    max-height: 450px;
    border-radius: 2rem;
}
.visual-content .section .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.section:not(.summery) .text-wrap p + h3 {
    margin-top: 48px;
    color: var(--bs-gray-900);
}

.caption-title {
    font-size: 20px; 
}
.caption-title h2, .caption-title h3 { 
    color: var(--bs-gray-900);
}


.section.summery {
    padding-left: 8.75%;
    padding-right: 8.75%;
}

.line-circle {
    position: relative;
    width: 31%;
    max-width: 320px;
    border-radius: 300px;
    border: solid 1px var(--bs-gray-300);
    transition: transform 0.6s ease, background-color 0.5s ease;
    transform-style: preserve-3d;
    perspective: 1000px;
}

 
  .line-circle:hover p, .line-circle:hover h2 {
    
    color:#fff;
  }

  /* 개별 hover 색상 지정 */
.pack-both .line-circle:nth-child(1):hover {
    background-color: var(--Hipink); /* 주황 */
    transform: rotateY(-360deg);
    color: #fff;
  }
  .pack-both .line-circle:nth-child(2):hover {
    background-color:var(--Hiblue); /* 파랑 */
    transform: rotateY(-360deg);
    color: #fff;
  }
  .pack-both .line-circle:nth-child(3):hover {
    background-color: var(--Higreen); /* 초록 */
    transform: rotateY(-360deg);
    color: #fff;
  }




.line-circle>.text-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 65%;
    text-align: center;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.line-circle .section-title {
    text-transform: uppercase;
    font-size: 24px;
    color:var(--bs-gray-900)
}

 

.line-circle:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}
 

.visual-content .section+.section:not(.has-angle) {
    margin-top: 240px;
}

.visual-content .hgroup, .visual-content .hgroup > * {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.graph-curriculum .hgroup + * {
    margin-top: 40px;
}

.max-wrap {
    margin: 0 auto; 
    max-width: 1680px;
}

.section:not(.summery)>.pack-both-top {
    padding: 80px 40px 0 40px;
}

.section:not(.summery)>.pack-both-top>div {
    width: 50%;
}


.graph-curriculum .hgroup .msg-title {
    font-size: 28px;
}

.bg-box {
    padding: 4rem 2rem;
    background-color: var(--bs-gray-100);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 80%;
    margin: 0 auto;
}

.circle-item {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    margin: 0 10px;
    font-size: 20px;
  }
  
  .circle-item i {
    font-size: 3rem;
    margin-bottom: 10px;
  }
  
  .plus-sign {
    font-size: 4rem;
    margin: 0 10px;
    color: var(--bs-gray-400);
  }

  .visual-content .hgroup .caption-title + .msg-title {
    margin-top: 8px;
}
.msg-title {
    font-size: 48px;
    color: var(--bs-gray-900);
}

.text-wrap, .hgroup-left {
    color: var(--bs-gray-500);
}
.text-wrap h3 + p {
    margin-top: 12px;
}

.visual-content .hgroup .msg-title + p {
    margin-top: 40px;
    max-width: 630px;
}

.button-area .btn {
    display: flex;
    align-items: center;
    border-radius: 4rem;
    justify-content: space-between;
    max-width: 240px;
}
.button-area .btn:hover svg {
    fill:#fff
}
.button-area svg {
    width: 1.5rem;
}

.bg-box2 {
    padding: 4rem 2rem;
    flex-direction: column;
    background-color: var(--bs-gray-100);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 80%;
    margin: 0 auto;
}


.curriculum-list .section-title {
    font-size: 32px;
    font-weight: 700;
}

.curriculum-list .section-title + p {
    margin-top: 12px;
text-align:center;
}
.curriculum-list .img-wrap {
    margin-top: 36px;
    text-align: center;
}
.curriculum-list .img-wrap img {
    width: 60% !important;
}

#about-slider h1.text-outline {
    color: transparent;
    -webkit-text-stroke: 1px white;
  }

  #about-slider .swiper {
    padding: 2rem 0;
  }

  #about-slider .swiper-slide {
    background-color: #e6f0ff;
    border-radius: 20px;
    padding: 2rem;
  }
/* 배경색 */
.bg-light-blue {
    background-color: #96c5ff; /* 예시처럼 연한 하늘색 */
  }
  
  /* 텍스트 강조 */
  .outline-text {
    font-size: 4rem;
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 2px #fff;
  }
  
  /* 버튼 스타일 */
  .nav-btn {
    background: #fff;
    border-radius: 30px;
    width: 50px;
    height: 50px;
    margin: 0 10px;
    font-size: 1.5rem;
    transition: all 0.3s ease;
  }
  
  .nav-btn:hover {
    background-color: #e0e0e0;
    transform: scale(1.1);
  }
  
  /* 이미지 조정 */
  .product-image {
    max-height: 400px;
    object-fit: contain;
  }




#hi5ive-intro {
    background: #fff;
    color: #111;
}

#hi5ive-intro .intro-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 1rem;
}

#hi5ive-intro .bg2 {
    background: url(/wp-content/uploads/2025/07/0_3.jpeg);
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}



#hi5ive-intro .intro-text {
    font-size: 4.5rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    transform: scale(0.8);
    opacity: 0.4;
    color: #fff;
}

#hi5ive-intro .intro-image {
    max-width: 500px;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s ease;
}

#hi5ive-intro .highlight {
    color: var(--Hiyellow);
}


 

.review-grid-section .review-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 기본: 모바일은 2열 */
    gap: 3.5rem;
    margin: 0 auto;
}

.review-grid-section .review-card {
    background: #fff;
    border-radius: 2rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease;
}

.review-grid-section .review-card:hover {
    transform: translateY(-5px);
}

.review-grid-section .review-thumb img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 4/3;
}

.review-grid-section .review-content {
    padding: 2rem;
}

.review-grid-section .review-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--bs-gray-900);
}

.review-grid-section .acf-nickname {
    font-size: 0.9rem;
    color: var(--bs-gray-400);
    margin-bottom: 10px;
}





/* 반응형 처리 */
@media screen and (max-width: 1024px) {

    #searchCanvas .form-control {
        border: transparent;
        font-size: 1.125rem;
        padding: 1rem 1.5rem;
    }
    #searchCanvas {
        height: 30vh; 
    }


    .visual-content {
        padding-bottom: 160px;
    }


    [class*="pack-"] {
        gap: 1rem; 
    }

    .curriculum-list .img-wrap img {
        width: 50% !important;
    }

    .curriculum-list .img-wrap {
        margin-top: 24px;
        text-align: center;
    }

    .curriculum-list .section-title {
        font-size: 24px;
        font-weight: 700;
    }

    .bg-box2 {
        padding: 2rem 1rem;
        flex-direction: column; 
        border-radius: 2rem; 
        max-width: 100%; 
    }

    .visual-content .hgroup .msg-title + p {
        margin-top: 24px;
     
    }


    .visual-content .hgroup .msg-title + p br {
        display: none;
    }
    .circle-item {
        width: 160px;
        height: 160px; 
        font-size: 16px;
    }
    .plus-sign {
        font-size: 3rem; 
    }
    .circle-item i {
        font-size: 2.5rem; 
    }

    .bg-box {
        max-width: 100%;
        flex-direction: column;
    }


    .btn-group-xlg>.btn, .btn-xlg {
        --bs-btn-padding-y: 1rem;
        --bs-btn-padding-x: 1.5rem;
        --bs-btn-font-size: 18px; 
        width: 100%;
        max-width: 100% !important;
    }


    p {
        margin: 0;
        font-size: 1rem;
    }


    .msg-title {
        font-size:28px;
        color: var(--bs-gray-900);
    }

    .caption-title {
        font-size: 18px;
    }

    [class*="pack-"] {
      
        flex-direction: column;
    }
    .section:not(.summery)>.pack-both-top>div {
        width: 100%;
    }


    .section:not(.summery)>.pack-both-top {
        padding: 40px 24px 0 24px;
    }


    .visual-content .section+.section:not(.has-angle) {
        margin-top: 140px;
        padding: 0 1rem;
    }

    .line-circle {
        width: 70%;
    }

    .visual-content .section {
        padding-top: 160px;
    }
    .section.summery {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .section.summery .pack-both {
        flex-direction: column;
    }

    .vh-100.pack-center .pack-down {
        padding: 0 1rem;
    }


    .vh-100.pack-center p.title {
        font-size: 24px;
        font-weight: bold;
    }

    .vh-100.pack-center p.text {
        font-size: 18px;
        font-weight: 500;
        color: var(--bs-gray-300);
    }

    .vh-100.pack-center p.text br {
        display: none;
    }


    .page-title {
        font-size: 3rem; 
        padding-bottom: 3rem;
    }

    .review-grid-section .review-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1.5rem;
        margin: 0 auto;
    }

    .custom-offcanvas {
        width: 100% !important;
        padding: 3rem 2rem 2rem 2rem;
    }

    .custom-offcanvas .offcanvas-body {
        padding: 0;
    }

    .custom-offcanvas .offcanvas-header {
        right: 0;
        top: 0;
    }

    .custom-offcanvas .nav>li>a {
        color: #fff !important;
        font-weight: bold;
        font-size: 2rem;
        display: block;
    }

    .m_sec01 {
        margin: 4rem auto 4rem;
        width: 90%;
    }

    .m_sec01 .swiper-slide {
        flex-direction: column;
    }

    .m_sec01 .swiper-slide picture,
    .m_sec01 .swiper-slide .txt {
        width: 100%;
    }

    .m_sec01 .swiper-slide .txt {
        padding: 3rem 2rem 4.5rem 2rem
    }

    .m_sec01 .txt .t01 {
        font-size: 3rem;
    }

    .m_sec01 .txt .t02 {
        font-size: 1.125rem;
        margin-top: 1rem;
    }

    .m_sec01 .txt .t03 {
        margin-top: 2rem;
        opacity: 0;
    }

    .m_sec01 .txt .t03 a {
        font-size: 1.6rem;
        padding: 1.2rem 3.2rem;
    }

    .m_sec01 .swiper-pagination {
        width: 100%;
        bottom: 3%;
    }

    .m_sec01 .swiper-pagination-bullet {
        width: 1rem;
        height: 1rem;
    }


    .m_sec01 .swiper-slide .txt .t03 a {
        border-radius: 4rem;
        font-size: 1.125rem;
        font-weight: 600;
        line-height: 1.6;
        color: #1a1a1a;
        padding: 1rem 3rem;
        display: inline-block;
        background-color: #fff;
        letter-spacing: 0.01em;
    }

    .partner-wrap .item img {
    
        border-radius: 1rem 4rem;
    }


}




@media screen and (max-width: 1200px) {

    .page-wrap {
        padding: 80px 0 80px 0;
    }

    .only-pc {
        display: none !important;
    }

    .only-mo {
        display: block !important;
    }



    /* main */
    .floating-symbol {
        width: 100px;
        height: 100px;
    }

    .floating-symbol .title {
        font-size: 12px;
    }

    .section-title .heading {
        font-size: 36px;
    }

    .section-title .text {
        font-size: 16px;
        margin-top: 10px;
    }

    .section-main-hero {
        padding: 15rem 0 100px;
    }

    .section-main-hero .text-wrap {
        top: 15vh
    }

    .section-main-hero .text-wrap .heading {
        font-size: 40px;
    }

    .section-main-hero .gallery-container .col {
        width: 110vw !important;
        height: 90vh;
    }

    .section-main-hero .gallery-wrapper {
        margin-left: 0;
        left: 5%
    }

    .section-main-hero .text-wrap .text {
        font-size: 16px;
        opacity: 1;
        margin-left: 0;
        text-align: center;
        padding-top: 60px;
        z-index: 2;
        position: relative;
    }

    .section-main-hero .text-wrap .symbol {
        width: 100px;
        top: 20%;
    }

    .section-main-hero .scroll-down {
        width: 100px;
    }

    .review-marquee-section {
        padding: 80px 0 120px 0;
    }


    .review-card {
        width: 300px;
    }

    .review-content p {
        font-size: 1rem;
    }

    .review-content .excerpt {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        /* ← 여기서 줄 수 조정 */
        overflow: hidden;
        text-overflow: ellipsis;
    }


    .section-main-partner {
        margin-bottom: 0;
    }

    .section-main-partner .text-wrap .heading {
        font-size: 4rem;
    }

    .section-main-partner .text-wrap .symbol {
        width: 12rem;
        top: 18%;
        right: 10%;
    }

    .symbol-bg {
        width: 100%;
    }

    .partner-wrap {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        padding-top: 80px;
    }

    .partner-wrap .item .title {
        font-size: 1.25rem;
    }


    .section-main-link {
        padding: 60px 0;
        border-radius: 40px 40px 0 0;
    }

    .section-main-link .lists {
        margin-top: 20px;
    }

    .section-main-link .lists a {
        padding: 30px 40px;
    }

    .section-main-link .lists .title b {
        font-size: 24px;
        margin-top: 5px;
    }

    .section-main-link .lists .title small {
        font-size: 14px;
    }

    .section-main-link .lists em {
        font-size: 18px;
        top: 30px;
    }

    .section-main-link .lists .text {
        margin-top: 5px;
    }

    .icon {
        width: 30px;
        height: 30px;
    }

}