.elementor-32 .elementor-element.elementor-element-6b8aeac{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-32 .elementor-element.elementor-element-47cfefa{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-32 .elementor-element.elementor-element-2dd9836{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-32 .elementor-element.elementor-element-3eabc06{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-32 .elementor-element.elementor-element-54849db{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-32 .elementor-element.elementor-element-ca1d0a9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-32 .elementor-element.elementor-element-ea51527{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-32 .elementor-element.elementor-element-88c0d3c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-32 .elementor-element.elementor-element-b62c136{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-32 .elementor-element.elementor-element-477323a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-32 .elementor-element.elementor-element-41aabcb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}body.elementor-page-32{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-f2ef745 */<style>
/* -------------------------------------------------- */
/* 1. 기본 및 공통 스타일 */
/* -------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

.hanilyeon-container {
    font-family: 'Noto Sans KR', sans-serif;
    color: #333;
    background-color: #fff;
}
.hly-section {
    width: 100%;
    padding: 100px 40px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}
.hly-section-inner {
    width: 100%;
    max-width: 1200px;
    position: relative;
    z-index: 3;
}
.hly-button {
    display: inline-block;
    border: 1px solid #fff;
    color: #fff;
    padding: 12px 35px;
    text-decoration: none;
    font-size: 1rem;
    border-radius: 30px;
    transition: all 0.3s ease;
    margin-top: 30px;
    font-weight: 500;
}
.hly-button:hover { background-color: #fff; color: #333; }
.hly-button.black { border-color: #fff; color: #fff; } /* 배경 추가로 흰색으로 변경 */
.hly-button.black:hover { background-color: #fff; color: #333; }

.hly-video-bg { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; z-index: 1; transform: translate(-50%, -50%); object-fit: cover; }
.hly-bg-img { position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:1; background-size: cover; background-position: center; }
.hly-bg-overlay { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 2; } /* 오버레이 약간 더 어둡게 */

/* 애니메이션 */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeInUp 1s 0.2s ease-out forwards; opacity:0; }

/* -------------------------------------------------- */
/* 각 섹션별 스타일 */
/* -------------------------------------------------- */
/* Section 01: Hero */
.s01 .slide-title { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.s01 .move-up-content { font-size: 3.5rem; font-weight: 900; line-height: 1.4; animation: fadeInUp 1s ease-out forwards; }
.s01 .move-up-content strong { font-weight: 900; }

/* Section 02: Intro */
.s02 .slide-title p { color: #fff; font-size: 3.5rem; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,0.3); animation: fadeInUp 1s ease-out forwards; }
.s02 .slide-text { color: #fff; font-size: 1.2rem; margin-top: 30px; animation: fadeInUp 1s 0.5s ease-out forwards; opacity:0; }

/* Section 03: Philosophy */
.s03 .content-wrapper { display: flex; align-items: center; gap: 50px; }
.s03 .img-part { flex: 1; }
.s03 .img-part img { width: 100%; border-radius: 10px; height: 400px; object-fit: cover; }
.s03 .text-part { flex: 1; text-align: left; color: #fff; } /* 글자색 변경 */
.s03 .text-part p { font-size: 2.2rem; font-weight: 700; line-height: 1.5; text-shadow: 0 1px 5px rgba(0,0,0,0.5);}
.s03 .caption { font-size: 1rem; color: #ddd; margin-top: 20px; } /* 글자색 변경 */

/* Section 04: Services */
.s04 .s04-title, .s04 .s04-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s04-title { font-family: 'Montserrat', sans-serif; font-size: 2.5rem; }
.s04-subtitle { font-size: 1.1rem; margin-top:10px; }
.s04-grid-img { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: 50px 0; }
.s04-item-img { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.s04-item-img img { width: 100%; height: 350px; object-fit: cover; transition: transform 0.4s ease; }
.s04-item-img:hover img { transform: scale(1.1); }
.s04-item-text { position: absolute; bottom: 0; left: 0; padding: 20px; color: #fff; text-align: left; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); width: 100%; box-sizing: border-box; }
.s04-item-title { font-weight: 700; font-size: 1.1rem; }
.s04-item-subtitle { font-weight: 300; font-size: 0.9rem; }
.s04-box-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
.s04-box { border: 1px solid #fff; padding: 15px 25px; border-radius: 30px; font-size: 1rem; cursor: pointer; transition: all 0.3s; color: #fff; }
.s04-box:hover { background: #fff; color: #333; border-color: #fff; }

/* Section 05: Special Event */
.s05-title { color: #fff; font-size: 3rem; font-weight: 700; }
.s05-desc { color: #fff; font-size: 1.3rem; }
.s05-info { color: #fff; font-size: 1.1rem; margin-top: 30px; }
.s05-gallery { margin-top: 40px; display: flex; gap: 20px; max-width: 100%; overflow-x: auto; padding-bottom: 20px; }
.s05-gallery-item { flex-shrink: 0; width: 300px; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.s05-gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* Section 06: Founder */
.s06-content { display: flex; align-items: center; gap: 50px; }
.s06-img { flex: 1.5; text-align: center; }
.s06-img img { max-width: 450px; border-radius: 10px;}
.s06-text { flex: 1; text-align: left; color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5);} /* 글자색 변경 */
.s06-desc { font-size: 1.2rem; }
.s06-name { font-size: 2.5rem; font-weight: 700; margin: 10px 0; }
.s06-info { list-style: none; padding: 0; margin: 20px 0; font-size: 1rem; }
.s06-marquee { margin-top: 40px; }

/* Section 07: Managers */
.s07-title, .s07-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s07-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 40px; }
.s07-card { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.s07-card img { width: 100%; display: block; height: 280px; object-fit: cover; }
.s07-card-info { padding: 20px; background: #fff;}
.s07-card-name { font-weight: 500; font-size: 1.0rem; }
.s07-card-branch { font-size: 0.8rem; color: #888; }
.s07-card-button { display: block; background: #f0f0f0; color: #333; padding: 10px; text-decoration: none; margin-top: 15px; border-radius: 5px; }

/* Section 08~11: Full BG Image Sections */
.s08-title, .s09-title, .s10-title { font-size: 2.8rem; line-height: 1.5; color: #fff; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.s09-subtitle, .s10-subtitle { font-size: 1.2rem; color: #eee; margin-top: 20px; }

/* Section 12~14: Content Gallery Sections */
.s12-grid, .s13-grid, .s14-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.s12-card, .s13-card, .s14-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); text-decoration: none; color: #333; }
.s12-card img, .s13-card img, .s14-card img { width: 100%; height: 200px; object-fit: cover; }
.s12-card-text, .s13-card-text, .s14-card-text { padding: 20px; font-weight: 500; font-size: 1.1rem; }

/* Section 18: Match Test */
.s18-title-main, .s18-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s18-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 40px; }
.s18-item { position: relative; border-radius: 10px; overflow: hidden; display: block; text-decoration:none; }
.s18-item img { width: 100%; display: block; transition: transform 0.4s ease; }
.s18-item:hover img { transform: scale(1.1); }
.s18-title { position: absolute; top: 20px; left: 20px; color: #fff; font-size: 1.8rem; font-weight: 700; text-shadow: 0 1px 5px rgba(0,0,0,0.5); text-align: left; }

/* Section 20: Branches */
.s20-title, .s20-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s20-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 40px; }
.s20-item { position: relative; border-radius: 10px; overflow: hidden; }
.s20-item img { width: 100%; display: block; transition: transform 0.4s ease; }
.s20-item:hover img { transform: scale(1.1); }
.s20-item-text { position: absolute; bottom: 0; left: 0; padding: 15px; background: rgba(0,0,0,0.6); color: #fff; width: 100%; box-sizing: border-box; }
.s20-item-name { font-weight: 700; font-size: 1.2rem; }

@media (max-width: 1024px) {
    .hly-title-kr { font-size: 2.5rem; }
    .s04-grid-img { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    .s06-content, .s03-content-wrapper { flex-direction: column; }
    .s07-grid, .s12-grid, .s13-grid, .s14-grid, .s18-grid, .s20-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
}
@media (max-width: 768px) {
    .hly-section { padding: 80px 15px; }
    .s01 .move-up-content, .s02 .slide-title p { font-size: 2.2rem; }
    .s03 .img-part img { height: 300px; } 
    .s04-grid-img, .s05-gallery { grid-template-columns: 1fr; }
    .s05-gallery { flex-direction: column; align-items: center; gap: 20px; width: 100%;}
    .s05-gallery-item { width: 100%; max-width: 400px; }
}
</style>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8e09229 */<style>
/* -------------------------------------------------- */
/* 1. 기본 및 공통 스타일 */
/* -------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

.hanilyeon-container {
    font-family: 'Noto Sans KR', sans-serif;
    color: #333;
    background-color: #fff;
}
.hly-section {
    width: 100%;
    padding: 100px 40px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}
.hly-section-inner {
    width: 100%;
    max-width: 1200px;
    position: relative;
    z-index: 3;
}
.hly-button {
    display: inline-block;
    border: 1px solid #fff;
    color: #fff;
    padding: 12px 35px;
    text-decoration: none;
    font-size: 1rem;
    border-radius: 30px;
    transition: all 0.3s ease;
    margin-top: 30px;
    font-weight: 500;
}
.hly-button:hover { background-color: #fff; color: #333; }
.hly-button.black { border-color: #fff; color: #fff; } /* 배경 추가로 흰색으로 변경 */
.hly-button.black:hover { background-color: #fff; color: #333; }

.hly-video-bg { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; z-index: 1; transform: translate(-50%, -50%); object-fit: cover; }
.hly-bg-img { position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:1; background-size: cover; background-position: center; }
.hly-bg-overlay { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 2; } /* 오버레이 약간 더 어둡게 */

/* 애니메이션 */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeInUp 1s 0.2s ease-out forwards; opacity:0; }

/* -------------------------------------------------- */
/* 각 섹션별 스타일 */
/* -------------------------------------------------- */
/* Section 01: Hero */
.s01 .slide-title { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.s01 .move-up-content { font-size: 3.5rem; font-weight: 900; line-height: 1.4; animation: fadeInUp 1s ease-out forwards; }
.s01 .move-up-content strong { font-weight: 900; }

/* Section 02: Intro */
.s02 .slide-title p { color: #fff; font-size: 3.5rem; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,0.3); animation: fadeInUp 1s ease-out forwards; }
.s02 .slide-text { color: #fff; font-size: 1.2rem; margin-top: 30px; animation: fadeInUp 1s 0.5s ease-out forwards; opacity:0; }

/* Section 03: Philosophy */
.s03 .content-wrapper { display: flex; align-items: center; gap: 50px; }
.s03 .img-part { flex: 1; }
.s03 .img-part img { width: 100%; border-radius: 10px; height: 400px; object-fit: cover; }
.s03 .text-part { flex: 1; text-align: left; color: #fff; } /* 글자색 변경 */
.s03 .text-part p { font-size: 2.2rem; font-weight: 700; line-height: 1.5; text-shadow: 0 1px 5px rgba(0,0,0,0.5);}
.s03 .caption { font-size: 1rem; color: #ddd; margin-top: 20px; } /* 글자색 변경 */

/* Section 04: Services */
.s04 .s04-title, .s04 .s04-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s04-title { font-family: 'Montserrat', sans-serif; font-size: 2.5rem; }
.s04-subtitle { font-size: 1.1rem; margin-top:10px; }
.s04-grid-img { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: 50px 0; }
.s04-item-img { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.s04-item-img img { width: 100%; height: 350px; object-fit: cover; transition: transform 0.4s ease; }
.s04-item-img:hover img { transform: scale(1.1); }
.s04-item-text { position: absolute; bottom: 0; left: 0; padding: 20px; color: #fff; text-align: left; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); width: 100%; box-sizing: border-box; }
.s04-item-title { font-weight: 700; font-size: 1.1rem; }
.s04-item-subtitle { font-weight: 300; font-size: 0.9rem; }
.s04-box-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
.s04-box { border: 1px solid #fff; padding: 15px 25px; border-radius: 30px; font-size: 1rem; cursor: pointer; transition: all 0.3s; color: #fff; }
.s04-box:hover { background: #fff; color: #333; border-color: #fff; }

/* Section 05: Special Event */
.s05-title { color: #fff; font-size: 3rem; font-weight: 700; }
.s05-desc { color: #fff; font-size: 1.3rem; }
.s05-info { color: #fff; font-size: 1.1rem; margin-top: 30px; }
.s05-gallery { margin-top: 40px; display: flex; gap: 20px; max-width: 100%; overflow-x: auto; padding-bottom: 20px; }
.s05-gallery-item { flex-shrink: 0; width: 300px; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.s05-gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* Section 06: Founder */
.s06-content { display: flex; align-items: center; gap: 50px; }
.s06-img { flex: 1.5; text-align: center; }
.s06-img img { max-width: 450px; border-radius: 10px;}
.s06-text { flex: 1; text-align: left; color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5);} /* 글자색 변경 */
.s06-desc { font-size: 1.2rem; }
.s06-name { font-size: 2.5rem; font-weight: 700; margin: 10px 0; }
.s06-info { list-style: none; padding: 0; margin: 20px 0; font-size: 1rem; }
.s06-marquee { margin-top: 40px; }

/* Section 07: Managers */
.s07-title, .s07-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s07-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 40px; }
.s07-card { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.s07-card img { width: 100%; display: block; height: 280px; object-fit: cover; }
.s07-card-info { padding: 20px; background: #fff;}
.s07-card-name { font-weight: 500; font-size: 1.0rem; }
.s07-card-branch { font-size: 0.8rem; color: #888; }
.s07-card-button { display: block; background: #f0f0f0; color: #333; padding: 10px; text-decoration: none; margin-top: 15px; border-radius: 5px; }

/* Section 08~11: Full BG Image Sections */
.s08-title, .s09-title, .s10-title { font-size: 2.8rem; line-height: 1.5; color: #fff; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.s09-subtitle, .s10-subtitle { font-size: 1.2rem; color: #eee; margin-top: 20px; }

/* Section 12~14: Content Gallery Sections */
.s12-grid, .s13-grid, .s14-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.s12-card, .s13-card, .s14-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); text-decoration: none; color: #333; }
.s12-card img, .s13-card img, .s14-card img { width: 100%; height: 200px; object-fit: cover; }
.s12-card-text, .s13-card-text, .s14-card-text { padding: 20px; font-weight: 500; font-size: 1.1rem; }

/* Section 18: Match Test */
.s18-title-main, .s18-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s18-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 40px; }
.s18-item { position: relative; border-radius: 10px; overflow: hidden; display: block; text-decoration:none; }
.s18-item img { width: 100%; display: block; transition: transform 0.4s ease; }
.s18-item:hover img { transform: scale(1.1); }
.s18-title { position: absolute; top: 20px; left: 20px; color: #fff; font-size: 1.8rem; font-weight: 700; text-shadow: 0 1px 5px rgba(0,0,0,0.5); text-align: left; }

/* Section 20: Branches */
.s20-title, .s20-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s20-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 40px; }
.s20-item { position: relative; border-radius: 10px; overflow: hidden; }
.s20-item img { width: 100%; display: block; transition: transform 0.4s ease; }
.s20-item:hover img { transform: scale(1.1); }
.s20-item-text { position: absolute; bottom: 0; left: 0; padding: 15px; background: rgba(0,0,0,0.6); color: #fff; width: 100%; box-sizing: border-box; }
.s20-item-name { font-weight: 700; font-size: 1.2rem; }

@media (max-width: 1024px) {
    .hly-title-kr { font-size: 2.5rem; }
    .s04-grid-img { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    .s06-content, .s03-content-wrapper { flex-direction: column; }
    .s07-grid, .s12-grid, .s13-grid, .s14-grid, .s18-grid, .s20-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
}
@media (max-width: 768px) {
    .hly-section { padding: 80px 15px; }
    .s01 .move-up-content, .s02 .slide-title p { font-size: 2.2rem; }
    .s03 .img-part img { height: 300px; } 
    .s04-grid-img, .s05-gallery { grid-template-columns: 1fr; }
    .s05-gallery { flex-direction: column; align-items: center; gap: 20px; width: 100%;}
    .s05-gallery-item { width: 100%; max-width: 400px; }
}
</style>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7e357ad */<style>
/* -------------------------------------------------- */
/* 1. 기본 및 공통 스타일 */
/* -------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

.hanilyeon-container {
    font-family: 'Noto Sans KR', sans-serif;
    color: #333;
    background-color: #fff;
}
.hly-section {
    width: 100%;
    padding: 100px 40px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}
.hly-section-inner {
    width: 100%;
    max-width: 1200px;
    position: relative;
    z-index: 3;
}
.hly-button {
    display: inline-block;
    border: 1px solid #fff;
    color: #fff;
    padding: 12px 35px;
    text-decoration: none;
    font-size: 1rem;
    border-radius: 30px;
    transition: all 0.3s ease;
    margin-top: 30px;
    font-weight: 500;
}
.hly-button:hover { background-color: #fff; color: #333; }
.hly-button.black { border-color: #fff; color: #fff; } /* 배경 추가로 흰색으로 변경 */
.hly-button.black:hover { background-color: #fff; color: #333; }

.hly-video-bg { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; z-index: 1; transform: translate(-50%, -50%); object-fit: cover; }
.hly-bg-img { position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:1; background-size: cover; background-position: center; }
.hly-bg-overlay { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 2; } /* 오버레이 약간 더 어둡게 */

/* 애니메이션 */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeInUp 1s 0.2s ease-out forwards; opacity:0; }

/* -------------------------------------------------- */
/* 각 섹션별 스타일 */
/* -------------------------------------------------- */
/* Section 01: Hero */
.s01 .slide-title { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.s01 .move-up-content { font-size: 3.5rem; font-weight: 900; line-height: 1.4; animation: fadeInUp 1s ease-out forwards; }
.s01 .move-up-content strong { font-weight: 900; }

/* Section 02: Intro */
.s02 .slide-title p { color: #fff; font-size: 3.5rem; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,0.3); animation: fadeInUp 1s ease-out forwards; }
.s02 .slide-text { color: #fff; font-size: 1.2rem; margin-top: 30px; animation: fadeInUp 1s 0.5s ease-out forwards; opacity:0; }

/* Section 03: Philosophy */
.s03 .content-wrapper { display: flex; align-items: center; gap: 50px; }
.s03 .img-part { flex: 1; }
.s03 .img-part img { width: 100%; border-radius: 10px; height: 400px; object-fit: cover; }
.s03 .text-part { flex: 1; text-align: left; color: #fff; } /* 글자색 변경 */
.s03 .text-part p { font-size: 2.2rem; font-weight: 700; line-height: 1.5; text-shadow: 0 1px 5px rgba(0,0,0,0.5);}
.s03 .caption { font-size: 1rem; color: #ddd; margin-top: 20px; } /* 글자색 변경 */

/* Section 04: Services */
.s04 .s04-title, .s04 .s04-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s04-title { font-family: 'Montserrat', sans-serif; font-size: 2.5rem; }
.s04-subtitle { font-size: 1.1rem; margin-top:10px; }
.s04-grid-img { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: 50px 0; }
.s04-item-img { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.s04-item-img img { width: 100%; height: 350px; object-fit: cover; transition: transform 0.4s ease; }
.s04-item-img:hover img { transform: scale(1.1); }
.s04-item-text { position: absolute; bottom: 0; left: 0; padding: 20px; color: #fff; text-align: left; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); width: 100%; box-sizing: border-box; }
.s04-item-title { font-weight: 700; font-size: 1.1rem; }
.s04-item-subtitle { font-weight: 300; font-size: 0.9rem; }
.s04-box-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
.s04-box { border: 1px solid #fff; padding: 15px 25px; border-radius: 30px; font-size: 1rem; cursor: pointer; transition: all 0.3s; color: #fff; }
.s04-box:hover { background: #fff; color: #333; border-color: #fff; }

/* Section 05: Special Event */
.s05-title { color: #fff; font-size: 3rem; font-weight: 700; }
.s05-desc { color: #fff; font-size: 1.3rem; }
.s05-info { color: #fff; font-size: 1.1rem; margin-top: 30px; }
.s05-gallery { margin-top: 40px; display: flex; gap: 20px; max-width: 100%; overflow-x: auto; padding-bottom: 20px; }
.s05-gallery-item { flex-shrink: 0; width: 300px; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.s05-gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* Section 06: Founder */
.s06-content { display: flex; align-items: center; gap: 50px; }
.s06-img { flex: 1.5; text-align: center; }
.s06-img img { max-width: 450px; border-radius: 10px;}
.s06-text { flex: 1; text-align: left; color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5);} /* 글자색 변경 */
.s06-desc { font-size: 1.2rem; }
.s06-name { font-size: 2.5rem; font-weight: 700; margin: 10px 0; }
.s06-info { list-style: none; padding: 0; margin: 20px 0; font-size: 1rem; }
.s06-marquee { margin-top: 40px; }

/* Section 07: Managers */
.s07-title, .s07-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s07-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 40px; }
.s07-card { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.s07-card img { width: 100%; display: block; height: 280px; object-fit: cover; }
.s07-card-info { padding: 20px; background: #fff;}
.s07-card-name { font-weight: 500; font-size: 1.0rem; }
.s07-card-branch { font-size: 0.8rem; color: #888; }
.s07-card-button { display: block; background: #f0f0f0; color: #333; padding: 10px; text-decoration: none; margin-top: 15px; border-radius: 5px; }

/* Section 08~11: Full BG Image Sections */
.s08-title, .s09-title, .s10-title { font-size: 2.8rem; line-height: 1.5; color: #fff; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.s09-subtitle, .s10-subtitle { font-size: 1.2rem; color: #eee; margin-top: 20px; }

/* Section 12~14: Content Gallery Sections */
.s12-grid, .s13-grid, .s14-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.s12-card, .s13-card, .s14-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); text-decoration: none; color: #333; }
.s12-card img, .s13-card img, .s14-card img { width: 100%; height: 200px; object-fit: cover; }
.s12-card-text, .s13-card-text, .s14-card-text { padding: 20px; font-weight: 500; font-size: 1.1rem; }

/* Section 18: Match Test */
.s18-title-main, .s18-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s18-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 40px; }
.s18-item { position: relative; border-radius: 10px; overflow: hidden; display: block; text-decoration:none; }
.s18-item img { width: 100%; display: block; transition: transform 0.4s ease; }
.s18-item:hover img { transform: scale(1.1); }
.s18-title { position: absolute; top: 20px; left: 20px; color: #fff; font-size: 1.8rem; font-weight: 700; text-shadow: 0 1px 5px rgba(0,0,0,0.5); text-align: left; }

/* Section 20: Branches */
.s20-title, .s20-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s20-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 40px; }
.s20-item { position: relative; border-radius: 10px; overflow: hidden; }
.s20-item img { width: 100%; display: block; transition: transform 0.4s ease; }
.s20-item:hover img { transform: scale(1.1); }
.s20-item-text { position: absolute; bottom: 0; left: 0; padding: 15px; background: rgba(0,0,0,0.6); color: #fff; width: 100%; box-sizing: border-box; }
.s20-item-name { font-weight: 700; font-size: 1.2rem; }

@media (max-width: 1024px) {
    .hly-title-kr { font-size: 2.5rem; }
    .s04-grid-img { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    .s06-content, .s03-content-wrapper { flex-direction: column; }
    .s07-grid, .s12-grid, .s13-grid, .s14-grid, .s18-grid, .s20-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
}
@media (max-width: 768px) {
    .hly-section { padding: 80px 15px; }
    .s01 .move-up-content, .s02 .slide-title p { font-size: 2.2rem; }
    .s03 .img-part img { height: 300px; } 
    .s04-grid-img, .s05-gallery { grid-template-columns: 1fr; }
    .s05-gallery { flex-direction: column; align-items: center; gap: 20px; width: 100%;}
    .s05-gallery-item { width: 100%; max-width: 400px; }
}
</style>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c888e84 */<style>
/* -------------------------------------------------- */
/* 1. 기본 및 공통 스타일 */
/* -------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

.hanilyeon-container {
    font-family: 'Noto Sans KR', sans-serif;
    color: #333;
    background-color: #fff;
}
.hly-section {
    width: 100%;
    padding: 100px 40px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}
.hly-section-inner {
    width: 100%;
    max-width: 1200px;
    position: relative;
    z-index: 3;
}
.hly-button {
    display: inline-block;
    border: 1px solid #fff;
    color: #fff;
    padding: 12px 35px;
    text-decoration: none;
    font-size: 1rem;
    border-radius: 30px;
    transition: all 0.3s ease;
    margin-top: 30px;
    font-weight: 500;
}
.hly-button:hover { background-color: #fff; color: #333; }
.hly-button.black { border-color: #fff; color: #fff; } /* 배경 추가로 흰색으로 변경 */
.hly-button.black:hover { background-color: #fff; color: #333; }

.hly-video-bg { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; z-index: 1; transform: translate(-50%, -50%); object-fit: cover; }
.hly-bg-img { position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:1; background-size: cover; background-position: center; }
.hly-bg-overlay { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 2; } /* 오버레이 약간 더 어둡게 */

/* 애니메이션 */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeInUp 1s 0.2s ease-out forwards; opacity:0; }

/* -------------------------------------------------- */
/* 각 섹션별 스타일 */
/* -------------------------------------------------- */
/* Section 01: Hero */
.s01 .slide-title { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.s01 .move-up-content { font-size: 3.5rem; font-weight: 900; line-height: 1.4; animation: fadeInUp 1s ease-out forwards; }
.s01 .move-up-content strong { font-weight: 900; }

/* Section 02: Intro */
.s02 .slide-title p { color: #fff; font-size: 3.5rem; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,0.3); animation: fadeInUp 1s ease-out forwards; }
.s02 .slide-text { color: #fff; font-size: 1.2rem; margin-top: 30px; animation: fadeInUp 1s 0.5s ease-out forwards; opacity:0; }

/* Section 03: Philosophy */
.s03 .content-wrapper { display: flex; align-items: center; gap: 50px; }
.s03 .img-part { flex: 1; }
.s03 .img-part img { width: 100%; border-radius: 10px; height: 400px; object-fit: cover; }
.s03 .text-part { flex: 1; text-align: left; color: #fff; } /* 글자색 변경 */
.s03 .text-part p { font-size: 2.2rem; font-weight: 700; line-height: 1.5; text-shadow: 0 1px 5px rgba(0,0,0,0.5);}
.s03 .caption { font-size: 1rem; color: #ddd; margin-top: 20px; } /* 글자색 변경 */

/* Section 04: Services */
.s04 .s04-title, .s04 .s04-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s04-title { font-family: 'Montserrat', sans-serif; font-size: 2.5rem; }
.s04-subtitle { font-size: 1.1rem; margin-top:10px; }
.s04-grid-img { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: 50px 0; }
.s04-item-img { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.s04-item-img img { width: 100%; height: 350px; object-fit: cover; transition: transform 0.4s ease; }
.s04-item-img:hover img { transform: scale(1.1); }
.s04-item-text { position: absolute; bottom: 0; left: 0; padding: 20px; color: #fff; text-align: left; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); width: 100%; box-sizing: border-box; }
.s04-item-title { font-weight: 700; font-size: 1.1rem; }
.s04-item-subtitle { font-weight: 300; font-size: 0.9rem; }
.s04-box-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
.s04-box { border: 1px solid #fff; padding: 15px 25px; border-radius: 30px; font-size: 1rem; cursor: pointer; transition: all 0.3s; color: #fff; }
.s04-box:hover { background: #fff; color: #333; border-color: #fff; }

/* Section 05: Special Event */
.s05-title { color: #fff; font-size: 3rem; font-weight: 700; }
.s05-desc { color: #fff; font-size: 1.3rem; }
.s05-info { color: #fff; font-size: 1.1rem; margin-top: 30px; }
.s05-gallery { margin-top: 40px; display: flex; gap: 20px; max-width: 100%; overflow-x: auto; padding-bottom: 20px; }
.s05-gallery-item { flex-shrink: 0; width: 300px; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.s05-gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* Section 06: Founder */
.s06-content { display: flex; align-items: center; gap: 50px; }
.s06-img { flex: 1.5; text-align: center; }
.s06-img img { max-width: 450px; border-radius: 10px;}
.s06-text { flex: 1; text-align: left; color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5);} /* 글자색 변경 */
.s06-desc { font-size: 1.2rem; }
.s06-name { font-size: 2.5rem; font-weight: 700; margin: 10px 0; }
.s06-info { list-style: none; padding: 0; margin: 20px 0; font-size: 1rem; }
.s06-marquee { margin-top: 40px; }

/* Section 07: Managers */
.s07-title, .s07-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s07-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 40px; }
.s07-card { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.s07-card img { width: 100%; display: block; height: 280px; object-fit: cover; }
.s07-card-info { padding: 20px; background: #fff;}
.s07-card-name { font-weight: 500; font-size: 1.0rem; }
.s07-card-branch { font-size: 0.8rem; color: #888; }
.s07-card-button { display: block; background: #f0f0f0; color: #333; padding: 10px; text-decoration: none; margin-top: 15px; border-radius: 5px; }

/* Section 08~11: Full BG Image Sections */
.s08-title, .s09-title, .s10-title { font-size: 2.8rem; line-height: 1.5; color: #fff; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.s09-subtitle, .s10-subtitle { font-size: 1.2rem; color: #eee; margin-top: 20px; }

/* Section 12~14: Content Gallery Sections */
.s12-grid, .s13-grid, .s14-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.s12-card, .s13-card, .s14-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); text-decoration: none; color: #333; }
.s12-card img, .s13-card img, .s14-card img { width: 100%; height: 200px; object-fit: cover; }
.s12-card-text, .s13-card-text, .s14-card-text { padding: 20px; font-weight: 500; font-size: 1.1rem; }

/* Section 18: Match Test */
.s18-title-main, .s18-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s18-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 40px; }
.s18-item { position: relative; border-radius: 10px; overflow: hidden; display: block; text-decoration:none; }
.s18-item img { width: 100%; display: block; transition: transform 0.4s ease; }
.s18-item:hover img { transform: scale(1.1); }
.s18-title { position: absolute; top: 20px; left: 20px; color: #fff; font-size: 1.8rem; font-weight: 700; text-shadow: 0 1px 5px rgba(0,0,0,0.5); text-align: left; }

/* Section 20: Branches */
.s20-title, .s20-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s20-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 40px; }
.s20-item { position: relative; border-radius: 10px; overflow: hidden; }
.s20-item img { width: 100%; display: block; transition: transform 0.4s ease; }
.s20-item:hover img { transform: scale(1.1); }
.s20-item-text { position: absolute; bottom: 0; left: 0; padding: 15px; background: rgba(0,0,0,0.6); color: #fff; width: 100%; box-sizing: border-box; }
.s20-item-name { font-weight: 700; font-size: 1.2rem; }

@media (max-width: 1024px) {
    .hly-title-kr { font-size: 2.5rem; }
    .s04-grid-img { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    .s06-content, .s03-content-wrapper { flex-direction: column; }
    .s07-grid, .s12-grid, .s13-grid, .s14-grid, .s18-grid, .s20-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
}
@media (max-width: 768px) {
    .hly-section { padding: 80px 15px; }
    .s01 .move-up-content, .s02 .slide-title p { font-size: 2.2rem; }
    .s03 .img-part img { height: 300px; } 
    .s04-grid-img, .s05-gallery { grid-template-columns: 1fr; }
    .s05-gallery { flex-direction: column; align-items: center; gap: 20px; width: 100%;}
    .s05-gallery-item { width: 100%; max-width: 400px; }
}
</style>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-b800824 */<style>
/* -------------------------------------------------- */
/* 1. 기본 및 공통 스타일 */
/* -------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

.hanilyeon-container {
    font-family: 'Noto Sans KR', sans-serif;
    color: #333;
    background-color: #fff;
}
.hly-section {
    width: 100%;
    padding: 100px 40px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}
.hly-section-inner {
    width: 100%;
    max-width: 1200px;
    position: relative;
    z-index: 3;
}
.hly-button {
    display: inline-block;
    border: 1px solid #fff;
    color: #fff;
    padding: 12px 35px;
    text-decoration: none;
    font-size: 1rem;
    border-radius: 30px;
    transition: all 0.3s ease;
    margin-top: 30px;
    font-weight: 500;
}
.hly-button:hover { background-color: #fff; color: #333; }
.hly-button.black { border-color: #fff; color: #fff; } /* 배경 추가로 흰색으로 변경 */
.hly-button.black:hover { background-color: #fff; color: #333; }

.hly-video-bg { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; z-index: 1; transform: translate(-50%, -50%); object-fit: cover; }
.hly-bg-img { position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:1; background-size: cover; background-position: center; }
.hly-bg-overlay { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 2; } /* 오버레이 약간 더 어둡게 */

/* 애니메이션 */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeInUp 1s 0.2s ease-out forwards; opacity:0; }

/* -------------------------------------------------- */
/* 각 섹션별 스타일 */
/* -------------------------------------------------- */
/* Section 01: Hero */
.s01 .slide-title { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.s01 .move-up-content { font-size: 3.5rem; font-weight: 900; line-height: 1.4; animation: fadeInUp 1s ease-out forwards; }
.s01 .move-up-content strong { font-weight: 900; }

/* Section 02: Intro */
.s02 .slide-title p { color: #fff; font-size: 3.5rem; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,0.3); animation: fadeInUp 1s ease-out forwards; }
.s02 .slide-text { color: #fff; font-size: 1.2rem; margin-top: 30px; animation: fadeInUp 1s 0.5s ease-out forwards; opacity:0; }

/* Section 03: Philosophy */
.s03 .content-wrapper { display: flex; align-items: center; gap: 50px; }
.s03 .img-part { flex: 1; }
.s03 .img-part img { width: 100%; border-radius: 10px; height: 400px; object-fit: cover; }
.s03 .text-part { flex: 1; text-align: left; color: #fff; } /* 글자색 변경 */
.s03 .text-part p { font-size: 2.2rem; font-weight: 700; line-height: 1.5; text-shadow: 0 1px 5px rgba(0,0,0,0.5);}
.s03 .caption { font-size: 1rem; color: #ddd; margin-top: 20px; } /* 글자색 변경 */

/* Section 04: Services */
.s04 .s04-title, .s04 .s04-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s04-title { font-family: 'Montserrat', sans-serif; font-size: 2.5rem; }
.s04-subtitle { font-size: 1.1rem; margin-top:10px; }
.s04-grid-img { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: 50px 0; }
.s04-item-img { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.s04-item-img img { width: 100%; height: 350px; object-fit: cover; transition: transform 0.4s ease; }
.s04-item-img:hover img { transform: scale(1.1); }
.s04-item-text { position: absolute; bottom: 0; left: 0; padding: 20px; color: #fff; text-align: left; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); width: 100%; box-sizing: border-box; }
.s04-item-title { font-weight: 700; font-size: 1.1rem; }
.s04-item-subtitle { font-weight: 300; font-size: 0.9rem; }
.s04-box-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
.s04-box { border: 1px solid #fff; padding: 15px 25px; border-radius: 30px; font-size: 1rem; cursor: pointer; transition: all 0.3s; color: #fff; }
.s04-box:hover { background: #fff; color: #333; border-color: #fff; }

/* Section 05: Special Event */
.s05-title { color: #fff; font-size: 3rem; font-weight: 700; }
.s05-desc { color: #fff; font-size: 1.3rem; }
.s05-info { color: #fff; font-size: 1.1rem; margin-top: 30px; }
.s05-gallery { margin-top: 40px; display: flex; gap: 20px; max-width: 100%; overflow-x: auto; padding-bottom: 20px; }
.s05-gallery-item { flex-shrink: 0; width: 300px; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.s05-gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* Section 06: Founder */
.s06-content { display: flex; align-items: center; gap: 50px; }
.s06-img { flex: 1.5; text-align: center; }
.s06-img img { max-width: 450px; border-radius: 10px;}
.s06-text { flex: 1; text-align: left; color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5);} /* 글자색 변경 */
.s06-desc { font-size: 1.2rem; }
.s06-name { font-size: 2.5rem; font-weight: 700; margin: 10px 0; }
.s06-info { list-style: none; padding: 0; margin: 20px 0; font-size: 1rem; }
.s06-marquee { margin-top: 40px; }

/* Section 07: Managers */
.s07-title, .s07-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s07-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 40px; }
.s07-card { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.s07-card img { width: 100%; display: block; height: 280px; object-fit: cover; }
.s07-card-info { padding: 20px; background: #fff;}
.s07-card-name { font-weight: 500; font-size: 1.0rem; }
.s07-card-branch { font-size: 0.8rem; color: #888; }
.s07-card-button { display: block; background: #f0f0f0; color: #333; padding: 10px; text-decoration: none; margin-top: 15px; border-radius: 5px; }

/* Section 08~11: Full BG Image Sections */
.s08-title, .s09-title, .s10-title { font-size: 2.8rem; line-height: 1.5; color: #fff; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.s09-subtitle, .s10-subtitle { font-size: 1.2rem; color: #eee; margin-top: 20px; }

/* Section 12~14: Content Gallery Sections */
.s12-grid, .s13-grid, .s14-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.s12-card, .s13-card, .s14-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); text-decoration: none; color: #333; }
.s12-card img, .s13-card img, .s14-card img { width: 100%; height: 200px; object-fit: cover; }
.s12-card-text, .s13-card-text, .s14-card-text { padding: 20px; font-weight: 500; font-size: 1.1rem; }

/* Section 18: Match Test */
.s18-title-main, .s18-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s18-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 40px; }
.s18-item { position: relative; border-radius: 10px; overflow: hidden; display: block; text-decoration:none; }
.s18-item img { width: 100%; display: block; transition: transform 0.4s ease; }
.s18-item:hover img { transform: scale(1.1); }
.s18-title { position: absolute; top: 20px; left: 20px; color: #fff; font-size: 1.8rem; font-weight: 700; text-shadow: 0 1px 5px rgba(0,0,0,0.5); text-align: left; }

/* Section 20: Branches */
.s20-title, .s20-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s20-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 40px; }
.s20-item { position: relative; border-radius: 10px; overflow: hidden; }
.s20-item img { width: 100%; display: block; transition: transform 0.4s ease; }
.s20-item:hover img { transform: scale(1.1); }
.s20-item-text { position: absolute; bottom: 0; left: 0; padding: 15px; background: rgba(0,0,0,0.6); color: #fff; width: 100%; box-sizing: border-box; }
.s20-item-name { font-weight: 700; font-size: 1.2rem; }

@media (max-width: 1024px) {
    .hly-title-kr { font-size: 2.5rem; }
    .s04-grid-img { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    .s06-content, .s03-content-wrapper { flex-direction: column; }
    .s07-grid, .s12-grid, .s13-grid, .s14-grid, .s18-grid, .s20-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
}
@media (max-width: 768px) {
    .hly-section { padding: 80px 15px; }
    .s01 .move-up-content, .s02 .slide-title p { font-size: 2.2rem; }
    .s03 .img-part img { height: 300px; } 
    .s04-grid-img, .s05-gallery { grid-template-columns: 1fr; }
    .s05-gallery { flex-direction: column; align-items: center; gap: 20px; width: 100%;}
    .s05-gallery-item { width: 100%; max-width: 400px; }
}
</style>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0d06dbe */<style>
/* -------------------------------------------------- */
/* 1. 기본 및 공통 스타일 */
/* -------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

.hanilyeon-container {
    font-family: 'Noto Sans KR', sans-serif;
    color: #333;
    background-color: #fff;
}
.hly-section {
    width: 100%;
    padding: 100px 40px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}
.hly-section-inner {
    width: 100%;
    max-width: 1200px;
    position: relative;
    z-index: 3;
}
.hly-button {
    display: inline-block;
    border: 1px solid #fff;
    color: #fff;
    padding: 12px 35px;
    text-decoration: none;
    font-size: 1rem;
    border-radius: 30px;
    transition: all 0.3s ease;
    margin-top: 30px;
    font-weight: 500;
}
.hly-button:hover { background-color: #fff; color: #333; }
.hly-button.black { border-color: #fff; color: #fff; } /* 배경 추가로 흰색으로 변경 */
.hly-button.black:hover { background-color: #fff; color: #333; }

.hly-video-bg { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; z-index: 1; transform: translate(-50%, -50%); object-fit: cover; }
.hly-bg-img { position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:1; background-size: cover; background-position: center; }
.hly-bg-overlay { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 2; } /* 오버레이 약간 더 어둡게 */

/* 애니메이션 */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeInUp 1s 0.2s ease-out forwards; opacity:0; }

/* -------------------------------------------------- */
/* 각 섹션별 스타일 */
/* -------------------------------------------------- */
/* Section 01: Hero */
.s01 .slide-title { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.s01 .move-up-content { font-size: 3.5rem; font-weight: 900; line-height: 1.4; animation: fadeInUp 1s ease-out forwards; }
.s01 .move-up-content strong { font-weight: 900; }

/* Section 02: Intro */
.s02 .slide-title p { color: #fff; font-size: 3.5rem; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,0.3); animation: fadeInUp 1s ease-out forwards; }
.s02 .slide-text { color: #fff; font-size: 1.2rem; margin-top: 30px; animation: fadeInUp 1s 0.5s ease-out forwards; opacity:0; }

/* Section 03: Philosophy */
.s03 .content-wrapper { display: flex; align-items: center; gap: 50px; }
.s03 .img-part { flex: 1; }
.s03 .img-part img { width: 100%; border-radius: 10px; height: 400px; object-fit: cover; }
.s03 .text-part { flex: 1; text-align: left; color: #fff; } /* 글자색 변경 */
.s03 .text-part p { font-size: 2.2rem; font-weight: 700; line-height: 1.5; text-shadow: 0 1px 5px rgba(0,0,0,0.5);}
.s03 .caption { font-size: 1rem; color: #ddd; margin-top: 20px; } /* 글자색 변경 */

/* Section 04: Services */
.s04 .s04-title, .s04 .s04-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s04-title { font-family: 'Montserrat', sans-serif; font-size: 2.5rem; }
.s04-subtitle { font-size: 1.1rem; margin-top:10px; }
.s04-grid-img { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: 50px 0; }
.s04-item-img { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.s04-item-img img { width: 100%; height: 350px; object-fit: cover; transition: transform 0.4s ease; }
.s04-item-img:hover img { transform: scale(1.1); }
.s04-item-text { position: absolute; bottom: 0; left: 0; padding: 20px; color: #fff; text-align: left; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); width: 100%; box-sizing: border-box; }
.s04-item-title { font-weight: 700; font-size: 1.1rem; }
.s04-item-subtitle { font-weight: 300; font-size: 0.9rem; }
.s04-box-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
.s04-box { border: 1px solid #fff; padding: 15px 25px; border-radius: 30px; font-size: 1rem; cursor: pointer; transition: all 0.3s; color: #fff; }
.s04-box:hover { background: #fff; color: #333; border-color: #fff; }

/* Section 05: Special Event */
.s05-title { color: #fff; font-size: 3rem; font-weight: 700; }
.s05-desc { color: #fff; font-size: 1.3rem; }
.s05-info { color: #fff; font-size: 1.1rem; margin-top: 30px; }
.s05-gallery { margin-top: 40px; display: flex; gap: 20px; max-width: 100%; overflow-x: auto; padding-bottom: 20px; }
.s05-gallery-item { flex-shrink: 0; width: 300px; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.s05-gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* Section 06: Founder */
.s06-content { display: flex; align-items: center; gap: 50px; }
.s06-img { flex: 1.5; text-align: center; }
.s06-img img { max-width: 450px; border-radius: 10px;}
.s06-text { flex: 1; text-align: left; color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5);} /* 글자색 변경 */
.s06-desc { font-size: 1.2rem; }
.s06-name { font-size: 2.5rem; font-weight: 700; margin: 10px 0; }
.s06-info { list-style: none; padding: 0; margin: 20px 0; font-size: 1rem; }
.s06-marquee { margin-top: 40px; }

/* Section 07: Managers */
.s07-title, .s07-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s07-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 40px; }
.s07-card { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.s07-card img { width: 100%; display: block; height: 280px; object-fit: cover; }
.s07-card-info { padding: 20px; background: #fff;}
.s07-card-name { font-weight: 500; font-size: 1.0rem; }
.s07-card-branch { font-size: 0.8rem; color: #888; }
.s07-card-button { display: block; background: #f0f0f0; color: #333; padding: 10px; text-decoration: none; margin-top: 15px; border-radius: 5px; }

/* Section 08~11: Full BG Image Sections */
.s08-title, .s09-title, .s10-title { font-size: 2.8rem; line-height: 1.5; color: #fff; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.s09-subtitle, .s10-subtitle { font-size: 1.2rem; color: #eee; margin-top: 20px; }

/* Section 12~14: Content Gallery Sections */
.s12-grid, .s13-grid, .s14-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.s12-card, .s13-card, .s14-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); text-decoration: none; color: #333; }
.s12-card img, .s13-card img, .s14-card img { width: 100%; height: 200px; object-fit: cover; }
.s12-card-text, .s13-card-text, .s14-card-text { padding: 20px; font-weight: 500; font-size: 1.1rem; }

/* Section 18: Match Test */
.s18-title-main, .s18-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s18-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 40px; }
.s18-item { position: relative; border-radius: 10px; overflow: hidden; display: block; text-decoration:none; }
.s18-item img { width: 100%; display: block; transition: transform 0.4s ease; }
.s18-item:hover img { transform: scale(1.1); }
.s18-title { position: absolute; top: 20px; left: 20px; color: #fff; font-size: 1.8rem; font-weight: 700; text-shadow: 0 1px 5px rgba(0,0,0,0.5); text-align: left; }

/* Section 20: Branches */
.s20-title, .s20-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s20-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 40px; }
.s20-item { position: relative; border-radius: 10px; overflow: hidden; }
.s20-item img { width: 100%; display: block; transition: transform 0.4s ease; }
.s20-item:hover img { transform: scale(1.1); }
.s20-item-text { position: absolute; bottom: 0; left: 0; padding: 15px; background: rgba(0,0,0,0.6); color: #fff; width: 100%; box-sizing: border-box; }
.s20-item-name { font-weight: 700; font-size: 1.2rem; }

@media (max-width: 1024px) {
    .hly-title-kr { font-size: 2.5rem; }
    .s04-grid-img { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    .s06-content, .s03-content-wrapper { flex-direction: column; }
    .s07-grid, .s12-grid, .s13-grid, .s14-grid, .s18-grid, .s20-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
}
@media (max-width: 768px) {
    .hly-section { padding: 80px 15px; }
    .s01 .move-up-content, .s02 .slide-title p { font-size: 2.2rem; }
    .s03 .img-part img { height: 300px; } 
    .s04-grid-img, .s05-gallery { grid-template-columns: 1fr; }
    .s05-gallery { flex-direction: column; align-items: center; gap: 20px; width: 100%;}
    .s05-gallery-item { width: 100%; max-width: 400px; }
}
</style>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-edafa7b */<style>
/* -------------------------------------------------- */
/* 1. 기본 및 공통 스타일 */
/* -------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

.hanilyeon-container {
    font-family: 'Noto Sans KR', sans-serif;
    color: #333;
    background-color: #fff;
}
.hly-section {
    width: 100%;
    padding: 100px 40px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}
.hly-section-inner {
    width: 100%;
    max-width: 1200px;
    position: relative;
    z-index: 3;
}
.hly-button {
    display: inline-block;
    border: 1px solid #fff;
    color: #fff;
    padding: 12px 35px;
    text-decoration: none;
    font-size: 1rem;
    border-radius: 30px;
    transition: all 0.3s ease;
    margin-top: 30px;
    font-weight: 500;
}
.hly-button:hover { background-color: #fff; color: #333; }
.hly-button.black { border-color: #fff; color: #fff; } /* 배경 추가로 흰색으로 변경 */
.hly-button.black:hover { background-color: #fff; color: #333; }

.hly-video-bg { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; z-index: 1; transform: translate(-50%, -50%); object-fit: cover; }
.hly-bg-img { position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:1; background-size: cover; background-position: center; }
.hly-bg-overlay { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 2; } /* 오버레이 약간 더 어둡게 */

/* 애니메이션 */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeInUp 1s 0.2s ease-out forwards; opacity:0; }

/* -------------------------------------------------- */
/* 각 섹션별 스타일 */
/* -------------------------------------------------- */
/* Section 01: Hero */
.s01 .slide-title { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.s01 .move-up-content { font-size: 3.5rem; font-weight: 900; line-height: 1.4; animation: fadeInUp 1s ease-out forwards; }
.s01 .move-up-content strong { font-weight: 900; }

/* Section 02: Intro */
.s02 .slide-title p { color: #fff; font-size: 3.5rem; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,0.3); animation: fadeInUp 1s ease-out forwards; }
.s02 .slide-text { color: #fff; font-size: 1.2rem; margin-top: 30px; animation: fadeInUp 1s 0.5s ease-out forwards; opacity:0; }

/* Section 03: Philosophy */
.s03 .content-wrapper { display: flex; align-items: center; gap: 50px; }
.s03 .img-part { flex: 1; }
.s03 .img-part img { width: 100%; border-radius: 10px; height: 400px; object-fit: cover; }
.s03 .text-part { flex: 1; text-align: left; color: #fff; } /* 글자색 변경 */
.s03 .text-part p { font-size: 2.2rem; font-weight: 700; line-height: 1.5; text-shadow: 0 1px 5px rgba(0,0,0,0.5);}
.s03 .caption { font-size: 1rem; color: #ddd; margin-top: 20px; } /* 글자색 변경 */

/* Section 04: Services */
.s04 .s04-title, .s04 .s04-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s04-title { font-family: 'Montserrat', sans-serif; font-size: 2.5rem; }
.s04-subtitle { font-size: 1.1rem; margin-top:10px; }
.s04-grid-img { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: 50px 0; }
.s04-item-img { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.s04-item-img img { width: 100%; height: 350px; object-fit: cover; transition: transform 0.4s ease; }
.s04-item-img:hover img { transform: scale(1.1); }
.s04-item-text { position: absolute; bottom: 0; left: 0; padding: 20px; color: #fff; text-align: left; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); width: 100%; box-sizing: border-box; }
.s04-item-title { font-weight: 700; font-size: 1.1rem; }
.s04-item-subtitle { font-weight: 300; font-size: 0.9rem; }
.s04-box-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
.s04-box { border: 1px solid #fff; padding: 15px 25px; border-radius: 30px; font-size: 1rem; cursor: pointer; transition: all 0.3s; color: #fff; }
.s04-box:hover { background: #fff; color: #333; border-color: #fff; }

/* Section 05: Special Event */
.s05-title { color: #fff; font-size: 3rem; font-weight: 700; }
.s05-desc { color: #fff; font-size: 1.3rem; }
.s05-info { color: #fff; font-size: 1.1rem; margin-top: 30px; }
.s05-gallery { margin-top: 40px; display: flex; gap: 20px; max-width: 100%; overflow-x: auto; padding-bottom: 20px; }
.s05-gallery-item { flex-shrink: 0; width: 300px; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.s05-gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* Section 06: Founder */
.s06-content { display: flex; align-items: center; gap: 50px; }
.s06-img { flex: 1.5; text-align: center; }
.s06-img img { max-width: 450px; border-radius: 10px;}
.s06-text { flex: 1; text-align: left; color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5);} /* 글자색 변경 */
.s06-desc { font-size: 1.2rem; }
.s06-name { font-size: 2.5rem; font-weight: 700; margin: 10px 0; }
.s06-info { list-style: none; padding: 0; margin: 20px 0; font-size: 1rem; }
.s06-marquee { margin-top: 40px; }

/* Section 07: Managers */
.s07-title, .s07-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s07-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 40px; }
.s07-card { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.s07-card img { width: 100%; display: block; height: 280px; object-fit: cover; }
.s07-card-info { padding: 20px; background: #fff;}
.s07-card-name { font-weight: 500; font-size: 1.0rem; }
.s07-card-branch { font-size: 0.8rem; color: #888; }
.s07-card-button { display: block; background: #f0f0f0; color: #333; padding: 10px; text-decoration: none; margin-top: 15px; border-radius: 5px; }

/* Section 08~11: Full BG Image Sections */
.s08-title, .s09-title, .s10-title { font-size: 2.8rem; line-height: 1.5; color: #fff; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.s09-subtitle, .s10-subtitle { font-size: 1.2rem; color: #eee; margin-top: 20px; }

/* Section 12~14: Content Gallery Sections */
.s12-grid, .s13-grid, .s14-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.s12-card, .s13-card, .s14-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); text-decoration: none; color: #333; }
.s12-card img, .s13-card img, .s14-card img { width: 100%; height: 200px; object-fit: cover; }
.s12-card-text, .s13-card-text, .s14-card-text { padding: 20px; font-weight: 500; font-size: 1.1rem; }

/* Section 18: Match Test */
.s18-title-main, .s18-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s18-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 40px; }
.s18-item { position: relative; border-radius: 10px; overflow: hidden; display: block; text-decoration:none; }
.s18-item img { width: 100%; display: block; transition: transform 0.4s ease; }
.s18-item:hover img { transform: scale(1.1); }
.s18-title { position: absolute; top: 20px; left: 20px; color: #fff; font-size: 1.8rem; font-weight: 700; text-shadow: 0 1px 5px rgba(0,0,0,0.5); text-align: left; }

/* Section 20: Branches */
.s20-title, .s20-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s20-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 40px; }
.s20-item { position: relative; border-radius: 10px; overflow: hidden; }
.s20-item img { width: 100%; display: block; transition: transform 0.4s ease; }
.s20-item:hover img { transform: scale(1.1); }
.s20-item-text { position: absolute; bottom: 0; left: 0; padding: 15px; background: rgba(0,0,0,0.6); color: #fff; width: 100%; box-sizing: border-box; }
.s20-item-name { font-weight: 700; font-size: 1.2rem; }

@media (max-width: 1024px) {
    .hly-title-kr { font-size: 2.5rem; }
    .s04-grid-img { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    .s06-content, .s03-content-wrapper { flex-direction: column; }
    .s07-grid, .s12-grid, .s13-grid, .s14-grid, .s18-grid, .s20-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
}
@media (max-width: 768px) {
    .hly-section { padding: 80px 15px; }
    .s01 .move-up-content, .s02 .slide-title p { font-size: 2.2rem; }
    .s03 .img-part img { height: 300px; } 
    .s04-grid-img, .s05-gallery { grid-template-columns: 1fr; }
    .s05-gallery { flex-direction: column; align-items: center; gap: 20px; width: 100%;}
    .s05-gallery-item { width: 100%; max-width: 400px; }
}
</style>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-92f573b */<style>
/* -------------------------------------------------- */
/* 1. 기본 및 공통 스타일 */
/* -------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

.hanilyeon-container {
    font-family: 'Noto Sans KR', sans-serif;
    color: #333;
    background-color: #fff;
}
.hly-section {
    width: 100%;
    padding: 100px 40px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}
.hly-section-inner {
    width: 100%;
    max-width: 1200px;
    position: relative;
    z-index: 3;
}
.hly-button {
    display: inline-block;
    border: 1px solid #fff;
    color: #fff;
    padding: 12px 35px;
    text-decoration: none;
    font-size: 1rem;
    border-radius: 30px;
    transition: all 0.3s ease;
    margin-top: 30px;
    font-weight: 500;
}
.hly-button:hover { background-color: #fff; color: #333; }
.hly-button.black { border-color: #fff; color: #fff; } /* 배경 추가로 흰색으로 변경 */
.hly-button.black:hover { background-color: #fff; color: #333; }

.hly-video-bg { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; z-index: 1; transform: translate(-50%, -50%); object-fit: cover; }
.hly-bg-img { position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:1; background-size: cover; background-position: center; }
.hly-bg-overlay { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 2; } /* 오버레이 약간 더 어둡게 */

/* 애니메이션 */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeInUp 1s 0.2s ease-out forwards; opacity:0; }

/* -------------------------------------------------- */
/* 각 섹션별 스타일 */
/* -------------------------------------------------- */
/* Section 01: Hero */
.s01 .slide-title { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.s01 .move-up-content { font-size: 3.5rem; font-weight: 900; line-height: 1.4; animation: fadeInUp 1s ease-out forwards; }
.s01 .move-up-content strong { font-weight: 900; }

/* Section 02: Intro */
.s02 .slide-title p { color: #fff; font-size: 3.5rem; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,0.3); animation: fadeInUp 1s ease-out forwards; }
.s02 .slide-text { color: #fff; font-size: 1.2rem; margin-top: 30px; animation: fadeInUp 1s 0.5s ease-out forwards; opacity:0; }

/* Section 03: Philosophy */
.s03 .content-wrapper { display: flex; align-items: center; gap: 50px; }
.s03 .img-part { flex: 1; }
.s03 .img-part img { width: 100%; border-radius: 10px; height: 400px; object-fit: cover; }
.s03 .text-part { flex: 1; text-align: left; color: #fff; } /* 글자색 변경 */
.s03 .text-part p { font-size: 2.2rem; font-weight: 700; line-height: 1.5; text-shadow: 0 1px 5px rgba(0,0,0,0.5);}
.s03 .caption { font-size: 1rem; color: #ddd; margin-top: 20px; } /* 글자색 변경 */

/* Section 04: Services */
.s04 .s04-title, .s04 .s04-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s04-title { font-family: 'Montserrat', sans-serif; font-size: 2.5rem; }
.s04-subtitle { font-size: 1.1rem; margin-top:10px; }
.s04-grid-img { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: 50px 0; }
.s04-item-img { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.s04-item-img img { width: 100%; height: 350px; object-fit: cover; transition: transform 0.4s ease; }
.s04-item-img:hover img { transform: scale(1.1); }
.s04-item-text { position: absolute; bottom: 0; left: 0; padding: 20px; color: #fff; text-align: left; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); width: 100%; box-sizing: border-box; }
.s04-item-title { font-weight: 700; font-size: 1.1rem; }
.s04-item-subtitle { font-weight: 300; font-size: 0.9rem; }
.s04-box-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
.s04-box { border: 1px solid #fff; padding: 15px 25px; border-radius: 30px; font-size: 1rem; cursor: pointer; transition: all 0.3s; color: #fff; }
.s04-box:hover { background: #fff; color: #333; border-color: #fff; }

/* Section 05: Special Event */
.s05-title { color: #fff; font-size: 3rem; font-weight: 700; }
.s05-desc { color: #fff; font-size: 1.3rem; }
.s05-info { color: #fff; font-size: 1.1rem; margin-top: 30px; }
.s05-gallery { margin-top: 40px; display: flex; gap: 20px; max-width: 100%; overflow-x: auto; padding-bottom: 20px; }
.s05-gallery-item { flex-shrink: 0; width: 300px; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.s05-gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* Section 06: Founder */
.s06-content { display: flex; align-items: center; gap: 50px; }
.s06-img { flex: 1.5; text-align: center; }
.s06-img img { max-width: 450px; border-radius: 10px;}
.s06-text { flex: 1; text-align: left; color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5);} /* 글자색 변경 */
.s06-desc { font-size: 1.2rem; }
.s06-name { font-size: 2.5rem; font-weight: 700; margin: 10px 0; }
.s06-info { list-style: none; padding: 0; margin: 20px 0; font-size: 1rem; }
.s06-marquee { margin-top: 40px; }

/* Section 07: Managers */
.s07-title, .s07-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s07-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 40px; }
.s07-card { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.s07-card img { width: 100%; display: block; height: 280px; object-fit: cover; }
.s07-card-info { padding: 20px; background: #fff;}
.s07-card-name { font-weight: 500; font-size: 1.0rem; }
.s07-card-branch { font-size: 0.8rem; color: #888; }
.s07-card-button { display: block; background: #f0f0f0; color: #333; padding: 10px; text-decoration: none; margin-top: 15px; border-radius: 5px; }

/* Section 08~11: Full BG Image Sections */
.s08-title, .s09-title, .s10-title { font-size: 2.8rem; line-height: 1.5; color: #fff; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.s09-subtitle, .s10-subtitle { font-size: 1.2rem; color: #eee; margin-top: 20px; }

/* Section 12~14: Content Gallery Sections */
.s12-grid, .s13-grid, .s14-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.s12-card, .s13-card, .s14-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); text-decoration: none; color: #333; }
.s12-card img, .s13-card img, .s14-card img { width: 100%; height: 200px; object-fit: cover; }
.s12-card-text, .s13-card-text, .s14-card-text { padding: 20px; font-weight: 500; font-size: 1.1rem; }

/* Section 18: Match Test */
.s18-title-main, .s18-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s18-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 40px; }
.s18-item { position: relative; border-radius: 10px; overflow: hidden; display: block; text-decoration:none; }
.s18-item img { width: 100%; display: block; transition: transform 0.4s ease; }
.s18-item:hover img { transform: scale(1.1); }
.s18-title { position: absolute; top: 20px; left: 20px; color: #fff; font-size: 1.8rem; font-weight: 700; text-shadow: 0 1px 5px rgba(0,0,0,0.5); text-align: left; }

/* Section 20: Branches */
.s20-title, .s20-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s20-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 40px; }
.s20-item { position: relative; border-radius: 10px; overflow: hidden; }
.s20-item img { width: 100%; display: block; transition: transform 0.4s ease; }
.s20-item:hover img { transform: scale(1.1); }
.s20-item-text { position: absolute; bottom: 0; left: 0; padding: 15px; background: rgba(0,0,0,0.6); color: #fff; width: 100%; box-sizing: border-box; }
.s20-item-name { font-weight: 700; font-size: 1.2rem; }

@media (max-width: 1024px) {
    .hly-title-kr { font-size: 2.5rem; }
    .s04-grid-img { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    .s06-content, .s03-content-wrapper { flex-direction: column; }
    .s07-grid, .s12-grid, .s13-grid, .s14-grid, .s18-grid, .s20-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
}
@media (max-width: 768px) {
    .hly-section { padding: 80px 15px; }
    .s01 .move-up-content, .s02 .slide-title p { font-size: 2.2rem; }
    .s03 .img-part img { height: 300px; } 
    .s04-grid-img, .s05-gallery { grid-template-columns: 1fr; }
    .s05-gallery { flex-direction: column; align-items: center; gap: 20px; width: 100%;}
    .s05-gallery-item { width: 100%; max-width: 400px; }
}
</style>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7f6e09e */<style>
/* -------------------------------------------------- */
/* 1. 기본 및 공통 스타일 */
/* -------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

.hanilyeon-container {
    font-family: 'Noto Sans KR', sans-serif;
    color: #333;
    background-color: #fff;
}
.hly-section {
    width: 100%;
    padding: 100px 40px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}
.hly-section-inner {
    width: 100%;
    max-width: 1200px;
    position: relative;
    z-index: 3;
}
.hly-button {
    display: inline-block;
    border: 1px solid #fff;
    color: #fff;
    padding: 12px 35px;
    text-decoration: none;
    font-size: 1rem;
    border-radius: 30px;
    transition: all 0.3s ease;
    margin-top: 30px;
    font-weight: 500;
}
.hly-button:hover { background-color: #fff; color: #333; }
.hly-button.black { border-color: #fff; color: #fff; } /* 배경 추가로 흰색으로 변경 */
.hly-button.black:hover { background-color: #fff; color: #333; }

.hly-video-bg { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; z-index: 1; transform: translate(-50%, -50%); object-fit: cover; }
.hly-bg-img { position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:1; background-size: cover; background-position: center; }
.hly-bg-overlay { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 2; } /* 오버레이 약간 더 어둡게 */

/* 애니메이션 */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeInUp 1s 0.2s ease-out forwards; opacity:0; }

/* -------------------------------------------------- */
/* 각 섹션별 스타일 */
/* -------------------------------------------------- */
/* Section 01: Hero */
.s01 .slide-title { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.s01 .move-up-content { font-size: 3.5rem; font-weight: 900; line-height: 1.4; animation: fadeInUp 1s ease-out forwards; }
.s01 .move-up-content strong { font-weight: 900; }

/* Section 02: Intro */
.s02 .slide-title p { color: #fff; font-size: 3.5rem; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,0.3); animation: fadeInUp 1s ease-out forwards; }
.s02 .slide-text { color: #fff; font-size: 1.2rem; margin-top: 30px; animation: fadeInUp 1s 0.5s ease-out forwards; opacity:0; }

/* Section 03: Philosophy */
.s03 .content-wrapper { display: flex; align-items: center; gap: 50px; }
.s03 .img-part { flex: 1; }
.s03 .img-part img { width: 100%; border-radius: 10px; height: 400px; object-fit: cover; }
.s03 .text-part { flex: 1; text-align: left; color: #fff; } /* 글자색 변경 */
.s03 .text-part p { font-size: 2.2rem; font-weight: 700; line-height: 1.5; text-shadow: 0 1px 5px rgba(0,0,0,0.5);}
.s03 .caption { font-size: 1rem; color: #ddd; margin-top: 20px; } /* 글자색 변경 */

/* Section 04: Services */
.s04 .s04-title, .s04 .s04-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s04-title { font-family: 'Montserrat', sans-serif; font-size: 2.5rem; }
.s04-subtitle { font-size: 1.1rem; margin-top:10px; }
.s04-grid-img { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: 50px 0; }
.s04-item-img { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.s04-item-img img { width: 100%; height: 350px; object-fit: cover; transition: transform 0.4s ease; }
.s04-item-img:hover img { transform: scale(1.1); }
.s04-item-text { position: absolute; bottom: 0; left: 0; padding: 20px; color: #fff; text-align: left; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); width: 100%; box-sizing: border-box; }
.s04-item-title { font-weight: 700; font-size: 1.1rem; }
.s04-item-subtitle { font-weight: 300; font-size: 0.9rem; }
.s04-box-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
.s04-box { border: 1px solid #fff; padding: 15px 25px; border-radius: 30px; font-size: 1rem; cursor: pointer; transition: all 0.3s; color: #fff; }
.s04-box:hover { background: #fff; color: #333; border-color: #fff; }

/* Section 05: Special Event */
.s05-title { color: #fff; font-size: 3rem; font-weight: 700; }
.s05-desc { color: #fff; font-size: 1.3rem; }
.s05-info { color: #fff; font-size: 1.1rem; margin-top: 30px; }
.s05-gallery { margin-top: 40px; display: flex; gap: 20px; max-width: 100%; overflow-x: auto; padding-bottom: 20px; }
.s05-gallery-item { flex-shrink: 0; width: 300px; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.s05-gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* Section 06: Founder */
.s06-content { display: flex; align-items: center; gap: 50px; }
.s06-img { flex: 1.5; text-align: center; }
.s06-img img { max-width: 450px; border-radius: 10px;}
.s06-text { flex: 1; text-align: left; color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5);} /* 글자색 변경 */
.s06-desc { font-size: 1.2rem; }
.s06-name { font-size: 2.5rem; font-weight: 700; margin: 10px 0; }
.s06-info { list-style: none; padding: 0; margin: 20px 0; font-size: 1rem; }
.s06-marquee { margin-top: 40px; }

/* Section 07: Managers */
.s07-title, .s07-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s07-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 40px; }
.s07-card { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.s07-card img { width: 100%; display: block; height: 280px; object-fit: cover; }
.s07-card-info { padding: 20px; background: #fff;}
.s07-card-name { font-weight: 500; font-size: 1.0rem; }
.s07-card-branch { font-size: 0.8rem; color: #888; }
.s07-card-button { display: block; background: #f0f0f0; color: #333; padding: 10px; text-decoration: none; margin-top: 15px; border-radius: 5px; }

/* Section 08~11: Full BG Image Sections */
.s08-title, .s09-title, .s10-title { font-size: 2.8rem; line-height: 1.5; color: #fff; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.s09-subtitle, .s10-subtitle { font-size: 1.2rem; color: #eee; margin-top: 20px; }

/* Section 12~14: Content Gallery Sections */
.s12-grid, .s13-grid, .s14-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.s12-card, .s13-card, .s14-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); text-decoration: none; color: #333; }
.s12-card img, .s13-card img, .s14-card img { width: 100%; height: 200px; object-fit: cover; }
.s12-card-text, .s13-card-text, .s14-card-text { padding: 20px; font-weight: 500; font-size: 1.1rem; }

/* Section 18: Match Test */
.s18-title-main, .s18-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s18-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 40px; }
.s18-item { position: relative; border-radius: 10px; overflow: hidden; display: block; text-decoration:none; }
.s18-item img { width: 100%; display: block; transition: transform 0.4s ease; }
.s18-item:hover img { transform: scale(1.1); }
.s18-title { position: absolute; top: 20px; left: 20px; color: #fff; font-size: 1.8rem; font-weight: 700; text-shadow: 0 1px 5px rgba(0,0,0,0.5); text-align: left; }

/* Section 20: Branches */
.s20-title, .s20-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s20-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 40px; }
.s20-item { position: relative; border-radius: 10px; overflow: hidden; }
.s20-item img { width: 100%; display: block; transition: transform 0.4s ease; }
.s20-item:hover img { transform: scale(1.1); }
.s20-item-text { position: absolute; bottom: 0; left: 0; padding: 15px; background: rgba(0,0,0,0.6); color: #fff; width: 100%; box-sizing: border-box; }
.s20-item-name { font-weight: 700; font-size: 1.2rem; }

@media (max-width: 1024px) {
    .hly-title-kr { font-size: 2.5rem; }
    .s04-grid-img { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    .s06-content, .s03-content-wrapper { flex-direction: column; }
    .s07-grid, .s12-grid, .s13-grid, .s14-grid, .s18-grid, .s20-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
}
@media (max-width: 768px) {
    .hly-section { padding: 80px 15px; }
    .s01 .move-up-content, .s02 .slide-title p { font-size: 2.2rem; }
    .s03 .img-part img { height: 300px; } 
    .s04-grid-img, .s05-gallery { grid-template-columns: 1fr; }
    .s05-gallery { flex-direction: column; align-items: center; gap: 20px; width: 100%;}
    .s05-gallery-item { width: 100%; max-width: 400px; }
}
</style>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-b8ac491 */<style>
/* -------------------------------------------------- */
/* 1. 기본 및 공통 스타일 */
/* -------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

.hanilyeon-container {
    font-family: 'Noto Sans KR', sans-serif;
    color: #333;
    background-color: #fff;
}
.hly-section {
    width: 100%;
    padding: 100px 40px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}
.hly-section-inner {
    width: 100%;
    max-width: 1200px;
    position: relative;
    z-index: 3;
}
.hly-button {
    display: inline-block;
    border: 1px solid #fff;
    color: #fff;
    padding: 12px 35px;
    text-decoration: none;
    font-size: 1rem;
    border-radius: 30px;
    transition: all 0.3s ease;
    margin-top: 30px;
    font-weight: 500;
}
.hly-button:hover { background-color: #fff; color: #333; }
.hly-button.black { border-color: #fff; color: #fff; } /* 배경 추가로 흰색으로 변경 */
.hly-button.black:hover { background-color: #fff; color: #333; }

.hly-video-bg { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; z-index: 1; transform: translate(-50%, -50%); object-fit: cover; }
.hly-bg-img { position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:1; background-size: cover; background-position: center; }
.hly-bg-overlay { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 2; } /* 오버레이 약간 더 어둡게 */

/* 애니메이션 */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeInUp 1s 0.2s ease-out forwards; opacity:0; }

/* -------------------------------------------------- */
/* 각 섹션별 스타일 */
/* -------------------------------------------------- */
/* Section 01: Hero */
.s01 .slide-title { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.s01 .move-up-content { font-size: 3.5rem; font-weight: 900; line-height: 1.4; animation: fadeInUp 1s ease-out forwards; }
.s01 .move-up-content strong { font-weight: 900; }

/* Section 02: Intro */
.s02 .slide-title p { color: #fff; font-size: 3.5rem; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,0.3); animation: fadeInUp 1s ease-out forwards; }
.s02 .slide-text { color: #fff; font-size: 1.2rem; margin-top: 30px; animation: fadeInUp 1s 0.5s ease-out forwards; opacity:0; }

/* Section 03: Philosophy */
.s03 .content-wrapper { display: flex; align-items: center; gap: 50px; }
.s03 .img-part { flex: 1; }
.s03 .img-part img { width: 100%; border-radius: 10px; height: 400px; object-fit: cover; }
.s03 .text-part { flex: 1; text-align: left; color: #fff; } /* 글자색 변경 */
.s03 .text-part p { font-size: 2.2rem; font-weight: 700; line-height: 1.5; text-shadow: 0 1px 5px rgba(0,0,0,0.5);}
.s03 .caption { font-size: 1rem; color: #ddd; margin-top: 20px; } /* 글자색 변경 */

/* Section 04: Services */
.s04 .s04-title, .s04 .s04-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s04-title { font-family: 'Montserrat', sans-serif; font-size: 2.5rem; }
.s04-subtitle { font-size: 1.1rem; margin-top:10px; }
.s04-grid-img { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: 50px 0; }
.s04-item-img { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.s04-item-img img { width: 100%; height: 350px; object-fit: cover; transition: transform 0.4s ease; }
.s04-item-img:hover img { transform: scale(1.1); }
.s04-item-text { position: absolute; bottom: 0; left: 0; padding: 20px; color: #fff; text-align: left; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); width: 100%; box-sizing: border-box; }
.s04-item-title { font-weight: 700; font-size: 1.1rem; }
.s04-item-subtitle { font-weight: 300; font-size: 0.9rem; }
.s04-box-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
.s04-box { border: 1px solid #fff; padding: 15px 25px; border-radius: 30px; font-size: 1rem; cursor: pointer; transition: all 0.3s; color: #fff; }
.s04-box:hover { background: #fff; color: #333; border-color: #fff; }

/* Section 05: Special Event */
.s05-title { color: #fff; font-size: 3rem; font-weight: 700; }
.s05-desc { color: #fff; font-size: 1.3rem; }
.s05-info { color: #fff; font-size: 1.1rem; margin-top: 30px; }
.s05-gallery { margin-top: 40px; display: flex; gap: 20px; max-width: 100%; overflow-x: auto; padding-bottom: 20px; }
.s05-gallery-item { flex-shrink: 0; width: 300px; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.s05-gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* Section 06: Founder */
.s06-content { display: flex; align-items: center; gap: 50px; }
.s06-img { flex: 1.5; text-align: center; }
.s06-img img { max-width: 450px; border-radius: 10px;}
.s06-text { flex: 1; text-align: left; color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5);} /* 글자색 변경 */
.s06-desc { font-size: 1.2rem; }
.s06-name { font-size: 2.5rem; font-weight: 700; margin: 10px 0; }
.s06-info { list-style: none; padding: 0; margin: 20px 0; font-size: 1rem; }
.s06-marquee { margin-top: 40px; }

/* Section 07: Managers */
.s07-title, .s07-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s07-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 40px; }
.s07-card { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.s07-card img { width: 100%; display: block; height: 280px; object-fit: cover; }
.s07-card-info { padding: 20px; background: #fff;}
.s07-card-name { font-weight: 500; font-size: 1.0rem; }
.s07-card-branch { font-size: 0.8rem; color: #888; }
.s07-card-button { display: block; background: #f0f0f0; color: #333; padding: 10px; text-decoration: none; margin-top: 15px; border-radius: 5px; }

/* Section 08~11: Full BG Image Sections */
.s08-title, .s09-title, .s10-title { font-size: 2.8rem; line-height: 1.5; color: #fff; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.s09-subtitle, .s10-subtitle { font-size: 1.2rem; color: #eee; margin-top: 20px; }

/* Section 12~14: Content Gallery Sections */
.s12-grid, .s13-grid, .s14-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.s12-card, .s13-card, .s14-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); text-decoration: none; color: #333; }
.s12-card img, .s13-card img, .s14-card img { width: 100%; height: 200px; object-fit: cover; }
.s12-card-text, .s13-card-text, .s14-card-text { padding: 20px; font-weight: 500; font-size: 1.1rem; }

/* Section 18: Match Test */
.s18-title-main, .s18-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s18-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 40px; }
.s18-item { position: relative; border-radius: 10px; overflow: hidden; display: block; text-decoration:none; }
.s18-item img { width: 100%; display: block; transition: transform 0.4s ease; }
.s18-item:hover img { transform: scale(1.1); }
.s18-title { position: absolute; top: 20px; left: 20px; color: #fff; font-size: 1.8rem; font-weight: 700; text-shadow: 0 1px 5px rgba(0,0,0,0.5); text-align: left; }

/* Section 20: Branches */
.s20-title, .s20-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s20-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 40px; }
.s20-item { position: relative; border-radius: 10px; overflow: hidden; }
.s20-item img { width: 100%; display: block; transition: transform 0.4s ease; }
.s20-item:hover img { transform: scale(1.1); }
.s20-item-text { position: absolute; bottom: 0; left: 0; padding: 15px; background: rgba(0,0,0,0.6); color: #fff; width: 100%; box-sizing: border-box; }
.s20-item-name { font-weight: 700; font-size: 1.2rem; }

@media (max-width: 1024px) {
    .hly-title-kr { font-size: 2.5rem; }
    .s04-grid-img { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    .s06-content, .s03-content-wrapper { flex-direction: column; }
    .s07-grid, .s12-grid, .s13-grid, .s14-grid, .s18-grid, .s20-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
}
@media (max-width: 768px) {
    .hly-section { padding: 80px 15px; }
    .s01 .move-up-content, .s02 .slide-title p { font-size: 2.2rem; }
    .s03 .img-part img { height: 300px; } 
    .s04-grid-img, .s05-gallery { grid-template-columns: 1fr; }
    .s05-gallery { flex-direction: column; align-items: center; gap: 20px; width: 100%;}
    .s05-gallery-item { width: 100%; max-width: 400px; }
}
</style>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2dddf34 */<style>
/* -------------------------------------------------- */
/* 1. 기본 및 공통 스타일 */
/* -------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

.hanilyeon-container {
    font-family: 'Noto Sans KR', sans-serif;
    color: #333;
    background-color: #fff;
}
.hly-section {
    width: 100%;
    padding: 100px 40px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}
.hly-section-inner {
    width: 100%;
    max-width: 1200px;
    position: relative;
    z-index: 3;
}
.hly-button {
    display: inline-block;
    border: 1px solid #fff;
    color: #fff;
    padding: 12px 35px;
    text-decoration: none;
    font-size: 1rem;
    border-radius: 30px;
    transition: all 0.3s ease;
    margin-top: 30px;
    font-weight: 500;
}
.hly-button:hover { background-color: #fff; color: #333; }
.hly-button.black { border-color: #fff; color: #fff; } /* 배경 추가로 흰색으로 변경 */
.hly-button.black:hover { background-color: #fff; color: #333; }

.hly-video-bg { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; z-index: 1; transform: translate(-50%, -50%); object-fit: cover; }
.hly-bg-img { position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:1; background-size: cover; background-position: center; }
.hly-bg-overlay { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 2; } /* 오버레이 약간 더 어둡게 */

/* 애니메이션 */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeInUp 1s 0.2s ease-out forwards; opacity:0; }

/* -------------------------------------------------- */
/* 각 섹션별 스타일 */
/* -------------------------------------------------- */
/* Section 01: Hero */
.s01 .slide-title { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.s01 .move-up-content { font-size: 3.5rem; font-weight: 900; line-height: 1.4; animation: fadeInUp 1s ease-out forwards; }
.s01 .move-up-content strong { font-weight: 900; }

/* Section 02: Intro */
.s02 .slide-title p { color: #fff; font-size: 3.5rem; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,0.3); animation: fadeInUp 1s ease-out forwards; }
.s02 .slide-text { color: #fff; font-size: 1.2rem; margin-top: 30px; animation: fadeInUp 1s 0.5s ease-out forwards; opacity:0; }

/* Section 03: Philosophy */
.s03 .content-wrapper { display: flex; align-items: center; gap: 50px; }
.s03 .img-part { flex: 1; }
.s03 .img-part img { width: 100%; border-radius: 10px; height: 400px; object-fit: cover; }
.s03 .text-part { flex: 1; text-align: left; color: #fff; } /* 글자색 변경 */
.s03 .text-part p { font-size: 2.2rem; font-weight: 700; line-height: 1.5; text-shadow: 0 1px 5px rgba(0,0,0,0.5);}
.s03 .caption { font-size: 1rem; color: #ddd; margin-top: 20px; } /* 글자색 변경 */

/* Section 04: Services */
.s04 .s04-title, .s04 .s04-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s04-title { font-family: 'Montserrat', sans-serif; font-size: 2.5rem; }
.s04-subtitle { font-size: 1.1rem; margin-top:10px; }
.s04-grid-img { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: 50px 0; }
.s04-item-img { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.s04-item-img img { width: 100%; height: 350px; object-fit: cover; transition: transform 0.4s ease; }
.s04-item-img:hover img { transform: scale(1.1); }
.s04-item-text { position: absolute; bottom: 0; left: 0; padding: 20px; color: #fff; text-align: left; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); width: 100%; box-sizing: border-box; }
.s04-item-title { font-weight: 700; font-size: 1.1rem; }
.s04-item-subtitle { font-weight: 300; font-size: 0.9rem; }
.s04-box-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
.s04-box { border: 1px solid #fff; padding: 15px 25px; border-radius: 30px; font-size: 1rem; cursor: pointer; transition: all 0.3s; color: #fff; }
.s04-box:hover { background: #fff; color: #333; border-color: #fff; }

/* Section 05: Special Event */
.s05-title { color: #fff; font-size: 3rem; font-weight: 700; }
.s05-desc { color: #fff; font-size: 1.3rem; }
.s05-info { color: #fff; font-size: 1.1rem; margin-top: 30px; }
.s05-gallery { margin-top: 40px; display: flex; gap: 20px; max-width: 100%; overflow-x: auto; padding-bottom: 20px; }
.s05-gallery-item { flex-shrink: 0; width: 300px; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.s05-gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* Section 06: Founder */
.s06-content { display: flex; align-items: center; gap: 50px; }
.s06-img { flex: 1.5; text-align: center; }
.s06-img img { max-width: 450px; border-radius: 10px;}
.s06-text { flex: 1; text-align: left; color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5);} /* 글자색 변경 */
.s06-desc { font-size: 1.2rem; }
.s06-name { font-size: 2.5rem; font-weight: 700; margin: 10px 0; }
.s06-info { list-style: none; padding: 0; margin: 20px 0; font-size: 1rem; }
.s06-marquee { margin-top: 40px; }

/* Section 07: Managers */
.s07-title, .s07-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s07-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 40px; }
.s07-card { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.s07-card img { width: 100%; display: block; height: 280px; object-fit: cover; }
.s07-card-info { padding: 20px; background: #fff;}
.s07-card-name { font-weight: 500; font-size: 1.0rem; }
.s07-card-branch { font-size: 0.8rem; color: #888; }
.s07-card-button { display: block; background: #f0f0f0; color: #333; padding: 10px; text-decoration: none; margin-top: 15px; border-radius: 5px; }

/* Section 08~11: Full BG Image Sections */
.s08-title, .s09-title, .s10-title { font-size: 2.8rem; line-height: 1.5; color: #fff; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.s09-subtitle, .s10-subtitle { font-size: 1.2rem; color: #eee; margin-top: 20px; }

/* Section 12~14: Content Gallery Sections */
.s12-grid, .s13-grid, .s14-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.s12-card, .s13-card, .s14-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); text-decoration: none; color: #333; }
.s12-card img, .s13-card img, .s14-card img { width: 100%; height: 200px; object-fit: cover; }
.s12-card-text, .s13-card-text, .s14-card-text { padding: 20px; font-weight: 500; font-size: 1.1rem; }

/* Section 18: Match Test */
.s18-title-main, .s18-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s18-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 40px; }
.s18-item { position: relative; border-radius: 10px; overflow: hidden; display: block; text-decoration:none; }
.s18-item img { width: 100%; display: block; transition: transform 0.4s ease; }
.s18-item:hover img { transform: scale(1.1); }
.s18-title { position: absolute; top: 20px; left: 20px; color: #fff; font-size: 1.8rem; font-weight: 700; text-shadow: 0 1px 5px rgba(0,0,0,0.5); text-align: left; }

/* Section 20: Branches */
.s20-title, .s20-subtitle { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } /* 글자색 변경 */
.s20-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 40px; }
.s20-item { position: relative; border-radius: 10px; overflow: hidden; }
.s20-item img { width: 100%; display: block; transition: transform 0.4s ease; }
.s20-item:hover img { transform: scale(1.1); }
.s20-item-text { position: absolute; bottom: 0; left: 0; padding: 15px; background: rgba(0,0,0,0.6); color: #fff; width: 100%; box-sizing: border-box; }
.s20-item-name { font-weight: 700; font-size: 1.2rem; }

@media (max-width: 1024px) {
    .hly-title-kr { font-size: 2.5rem; }
    .s04-grid-img { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    .s06-content, .s03-content-wrapper { flex-direction: column; }
    .s07-grid, .s12-grid, .s13-grid, .s14-grid, .s18-grid, .s20-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
}
@media (max-width: 768px) {
    .hly-section { padding: 80px 15px; }
    .s01 .move-up-content, .s02 .slide-title p { font-size: 2.2rem; }
    .s03 .img-part img { height: 300px; } 
    .s04-grid-img, .s05-gallery { grid-template-columns: 1fr; }
    .s05-gallery { flex-direction: column; align-items: center; gap: 20px; width: 100%;}
    .s05-gallery-item { width: 100%; max-width: 400px; }
}
</style>/* End custom CSS */