@charset "utf-8";
:root {
--site_width: 1440px;
--sh_page_bg_height: 300px;
--sh_gnb_height: 300px;
}
* { margin: 0; padding: 0; box-sizing: border-box; font: inherit;}
a { color: inherit; text-decoration: inherit; }
a:hover, a:focus, a:active { text-decoration: none; }
ul li {list-style: none;}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {overflow-x: hidden;}
/* ===== Mobile menu base (hidden on desktop) ===== */
.header-hamburger { display:none; }
.hamburger-btn { display:inline-flex; flex-direction:column; gap:5px; width:42px; height:42px; align-items:center; justify-content:center; border:1px solid #ddd; border-radius:10px; background:#fff; cursor:pointer; }
.hamburger-btn span { display:block; width:22px; height:2px; background:#222; }
.mobile-menu { display:none; }
.mobile-menu__backdrop { display:none; }
.mobile-menu__panel { display:none; }
.sns_menu {position: fixed;right: 30px;bottom: 30px;z-index: 9999;background: rgba(255,255,255,0.15);border-radius: 12px;box-shadow: 0 2px 8px rgba(0,0,0,0.12);padding: 10px 16px;}
.sns_menu .sns_list {display: flex;gap: 12px;margin: 0;padding: 0;list-style: none;}
.sns_menu .sns_list li {display: flex;align-items: center;}
.sns_menu .sns_list img {display: block;width: 30px;height: 30px;}
.gnb li > a span {position: relative;color: #222;transition: color 0.2s;}
.gnb li > a:hover span {color: #F8A100;}
.gnb li > a span::after {content: '';position: absolute;left: 50%;bottom: -10px;transform: translateX(-50%) scaleX(0);width: 100%;height: 1px;background: #F8A100;border-radius: 1em;transition: transform 0.3s cubic-bezier(.4,0,.2,1);}
.gnb li > a:hover span::after {transform: translateX(-50%) scaleX(1);}
.header {width: 100%; margin: auto; position: relative;}
.header_wrap {max-width: var(--site_width); margin: 0 auto; padding: 0px; position: relative;}
.header_wrap > ul {display: flex; justify-content: space-between; height: 100px; align-items: center; padding: 0px;}
.header_wrap .gnb {display: flex; justify-content: space-around; gap: 60px; font-size: 18px; font-weight: 600; color: #535353;}
.header_wrap .s_gnb {display: flex; justify-content: center; gap: 30px; font-size: 14px; font-weight: 600; color: #555;}
/* gnb submenu (hover) */
.header_wrap .gnb li { position: relative; }
.header_wrap .gnb li > span { cursor: pointer; }
.header_wrap .gnb li > ul li { padding: 8px 16px; white-space: nowrap; font-size: 15px; }
.header_wrap .gnb li > ul li:hover { background: #f5f5f5; color: #111; }
/* dropdown links reset */
.header_wrap .gnb li > ul li a { color: inherit; text-decoration: none; display: block; }
.main_visual .swiper-slide video {width: 100vw;height: 100vh;object-fit: cover;display: block;}
/* main visual */
/* Swiper 슬라이더를 위한 main_visual 스타일 */
.main_visual {position: relative;width: 100%;max-width: 100vw;margin: 0 auto;height: calc(100vh - 100px); overflow-x: hidden;}
.main_visual .swiper {width: 100%;height: 100%;border-radius: 0;overflow: hidden;}
.main_visual .swiper-slide {display: flex;justify-content: center;align-items: center;height: 100%;}
.main_visual .main_visual_txt {text-align: center;width: 100%;}
.main_visual .swiper-slide img {width: 100%;height: 100%;object-fit: cover;border-radius: 0;box-shadow: none;}
.main_visual_txt img[alt="Bread Icon"] {margin: auto;width: 80px !important;height: auto;min-width: 80px;max-width: 80px;margin-bottom: 20px;display: block;}
.swiper-button-next, .swiper-button-prev {color: #333;}
.swiper-pagination-bullet {background: #ccc;opacity: 1;}
.swiper-pagination-bullet-active {background: #333;}
.main_visual_txt {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;width: 100%;}
.main_visual_txt h3 {font-size: 44px;font-weight: 900;color: #fff;margin-bottom: 12px;text-shadow: 0 2px 8px rgba(0,0,0,0.18);}
.main_visual_txt .box_border {font-size: 38px; border: 1px solid #ffffff; color:#d4d4d4; background: rgba(0, 0, 0, 0.5); padding: 10px 20px; border-radius: 8px; display: inline-block;}
.main_visual_txt h4 {font-size: 18px;font-weight: 500;color: #fff;margin-bottom: 12px;text-shadow: 0 2px 8px rgba(0,0,0,0.18); margin-top: 50px; margin-bottom: 150px;}
.main_visual_txt span {display: inline-block;padding: 12px 24px;background-color: rgba(255, 255, 255, 0);color: #ffffff;font-size: 18px;font-weight: 600;border-radius: 10px;border: 1px solid #fff;cursor: pointer;transition: background-color 0.28s ease, color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;}
.main_visual_txt span svg polyline {transition: stroke 0.28s ease;}
.main_visual_txt span:hover {background: tomato;color: #fff;transform: translateY(-4px);box-shadow: 0 10px 30px rgba(0,0,0,0.12);}
.main_visual_txt span:hover svg polyline { stroke: #222; }
/* 메인 비디오 전체 화면 스타일 */
.main_visual {position: relative;width: 100vw;height: 100vh;overflow: hidden;z-index: 1;}
.main-bg-video {position: absolute;top: 0;left: 0;width: 100vw;height: 100vh;object-fit: cover;z-index: 1;}
.main_visual_txt2 {position: relative;z-index: 2;}
.main_visual .main_visual_txt2 {text-align: center;width: 100%;}
.main_visual_txt2 {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center; max-width: var(--site_width); width: 100%;}
.main_visual_txt2 h3 {font-size: 60px;font-weight: 900;color: #fff;margin-bottom: 12px;text-shadow: 0 2px 8px rgba(0,0,0,0.18);}
.main_visual_txt2 .box_border {font-size: 38px; border: 1px solid #ffffff; color:#d4d4d4; background: rgba(0, 0, 0, 0.5); padding: 10px 20px; border-radius: 8px; display: inline-block;}
.main_visual_txt2 h4 {font-size: 18px;font-weight: 500;color: #fff;margin-bottom: 12px;text-shadow: 0 2px 8px rgba(0,0,0,0.18); margin-top: 50px; margin-bottom: 150px;}
.main_visual_txt2 span {display: inline-block;padding: 12px 24px;background-color: rgba(64, 224, 208, 0.1);color: #030303;font-size: 18px;font-weight: 600;border-radius: 10px;border: 1px solid #fff;cursor: pointer;}
.main_visual_txt2 .tit_box {padding-top: 80px; }
/* tit_box: 신청 버튼 스타일 및 hover 효과 */
.main_visual_txt2 .tit_box li span {display: inline-block;padding: 12px 28px;background: rgba(64, 224, 208, 0.5);color: #fff;border-radius: 12px;border: 1px solid rgba(255,255,255,0.18);cursor: pointer;}
.main_visual_txt2 .tit_box li span:hover {background: tomato;color: #fff;transform: translateY(-4px);box-shadow: 0 8px 24px rgba(0,0,0,0.16);}
.main_visual_txt2 > ul {margin-top: 20px; max-width: var(--site_width); width: 100%; display: flex; align-items: center; gap: 10px; justify-content: space-around;}
.main_visual_txt2 .type_list {display: flex; color: #fff; align-items: center; gap: 20px; cursor: pointer; transition: transform 0.3s; padding-bottom: 60px;}
.main_visual_txt2 .type_list > li{margin-top: 100px; width: 250px; height: 0px; border: 1px solid #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600;}
.main_visual_txt2 .type_list > li:nth-child(1) {background-image: url("/images/s_2.png"); width:250px; height: 300px; background-size: cover; background-position: center;}
.main_visual_txt2 .type_list > li:nth-child(2) {background-image: url("/images/s_5.png"); width:250px; height: 300px; background-size: cover; background-position: center;}
.main_visual_txt2 .type_list > li:nth-child(3) {background-image: url("/images/s_4.png"); width:250px; height: 300px; background-size: cover; background-position: center;}
.main_visual_txt2 .type_list > li h3 {font-size: 20px; display: block; margin-bottom: 40px;}
.main_visual_txt2 .type_list > li p {font-size: 16px; padding: 10px;}
/* Hover: 밝게 보이도록 효과 추가 */
.main_visual_txt2 .type_list > li {transition: transform 0.28s ease, filter 0.28s ease, box-shadow 0.28s ease;}
.main_visual_txt2 h3 {margin-bottom: 100px; color: rgb(219, 216, 216);}
.main_visual_txt2 .type_list > li:hover {transform: translateY(-6px);filter: brightness(1.06);box-shadow: 0 8px 20px rgba(0,0,0,0.12);}
.main_visual_txt2 .type_list > li span img,
.main_visual_txt2 .type_list > li span svg {transition: filter 0.28s ease, transform 0.28s ease, opacity 0.28s ease;}
.main_visual_txt2 .type_list > li:hover span img,
.main_visual_txt2 .type_list > li:hover span svg {filter: brightness(1.12) saturate(1.05);transform: scale(1.06);opacity: 1;}
.main_visual_txt2 .tit_box h3 {font-size: 22px; margin-top: 0px;}
.main_visual_txt2 .tit_box .m_txt {width:510px; color: turquoise; font-size: 16px; padding: 10px;}
.main_visual2 {background-image: url("/images/bread_2.png"); width: 100%; height: 100%; background-size: cover; background-position: center; position: relative; }
.main_visual2 {width: 100%;max-width: 100vw;margin: 0 auto;height: calc(100vh - 100px); /* header 높이 제외 */}
.yclover {font-family: 'YClover', sans-serif !important;font-size: 40px;;}
.noonchun {font-family: 'Noonchun', sans-serif !important;}
/* inde 3대 특징 */
.main {width:100%; margin: auto;}
.main_wrap {max-width: var(--site_width); margin: 0 auto; padding-top: 50px; padding-bottom: 50px; position: relative;}
.main_wrap > ul {display: flex; text-align: center; justify-content: space-between; align-items: center; padding: 0px;}
.main_wrap > ul h3 {font-size: 24px; font-weight: 700; color: #333; margin-bottom: 30px; margin-top: 30px;}
.main_wrap > ul h4 {font-size: 16px; font-weight: 400; color: #333; padding-bottom: 50px; }
.main_wrap > ul span {font-size: 16px; color: #000000; border: 1px solid #000000; padding: 6px 20px; border-radius: 4px;}
/* main_service_list 3개 li 동일 크기 적용 */
.main_service_list {display: flex;justify-content: space-between;align-items: stretch;margin: 60px 0 0 0;padding: 0;list-style: none;}
.main_service_list > li {padding: 38px 28px 32px 28px;display: flex;flex-direction: column;align-items: center;flex: 1 1 0;min-width: 260px;margin: 0 10px;position: relative;text-align: center;}
.main_service_list > li.main_service_center {border-left: 1px solid #e0e0e0;border-right: 1px solid #e0e0e0;}
.main_service_list > li:hover {background: #f9f9f9; box-shadow: 0 8px 24px rgba(0,0,0,0.12); transform: translateY(-4px); transition: all 0.28s ease;}
.main_service_list .main-detail-link {cursor: pointer;}
.main_service_list .main-detail-link:hover {background: #F8A100; color: #fff;}
.main_brand {width: 100%;margin: auto;padding: 50px 0;background: #F8A100;margin-top: 50px;}
.main_brand_wrap {max-width: var(--site_width); margin: 0 auto; padding-left: 20px; padding-right: 20px;}
.main_brand_wrap ul {display: flex; justify-content: space-around; align-items: center; gap: 50px;}
.main_brand_wrap ul li img {width: 200px; height: auto;}
.main_brand_wrap h3 {text-align: center; color: #fff; font-size: 36px; font-weight: 800; margin-bottom: 30px;}
.main_brand_wrap span {display: block; text-align: center; color: #fff; font-size: 18px; font-weight: 600;}
.main_brand_wrap h3 i:nth-of-type(1) {border: 2px solid #fff; margin-right: 20px; display: inline-block; width: 12px; height: 5px; margin-bottom: 20px;}
.main_brand_wrap h3 i:nth-of-type(2) {border: 2px solid #fff; margin-left: 20px; display: inline-block; width: 12px; height: 5px; margin-bottom: -10px;}
.sub_brand {width: 100%;margin: auto;padding: 50px 0;background: #F8A100;margin-top: 0px;}
.sub_brand_wrap {max-width: var(--site_width); margin: 0 auto; padding-left: 20px; padding-right: 20px;}
.sub_brand_wrap ul {display: flex; justify-content: space-around; align-items: center; gap: 50px;}
.sub_brand_wrap ul li img {width: 200px; height: auto;}
.sub_brand_wrap h3 {text-align: center; color: #fff; font-size: 36px; font-weight: 800; margin-bottom: 30px;}
.sub_brand_wrap span {display: block; text-align: center; color: #fff; font-size: 18px; font-weight: 600;}
.sub_brand_wrap h3 i:nth-of-type(1) {border: 2px solid #fff; margin-right: 20px; display: inline-block; width: 12px; height: 5px; margin-bottom: 20px;}
.sub_brand_wrap h3 i:nth-of-type(2) {border: 2px solid #fff; margin-left: 20px; display: inline-block; width: 12px; height: 5px; margin-bottom: -10px;}
.register {width: 100%; margin: auto; padding: 100px 0; background: #f5f5f5; text-align: center; }
.register_wrap {max-width: var(--site_width); margin: 0 auto; padding: 0 20px;}
.register_wrap > ul {display: flex; justify-content: space-around; align-items: flex-start; gap: 120px; }
.register_wrap h3 {font-size: 36px; font-weight: 800; color: #333; margin-bottom: 12px; }
.register_wrap > span {font-size: 20px; font-weight: 400; color: #333; margin-bottom: 50px; display: block; }
.register_wrap .notice-box {padding: 0px;text-align: center; width: 480px; margin: auto; background: #f5f5f5;}
.register_wrap .notice-box ul {list-style: disc; padding-left: 20px; display: flex; flex-direction: column; text-align: left; justify-content: space-between;}
.register_wrap .notice-box h4 {font-size: 22px; font-weight: 700; color: #333; margin-bottom: 10px;}
.register_wrap .notice-box ul li {margin-top: 20px; text-align: left;}
.notice-box ul {padding-left:0;}
.notice-item {display: flex;align-items: center;text-align: left;justify-content: flex-start;gap: 10px;font-size: 16px;color: #444;margin-bottom: 6px;}
.notice-item img {width: 22px;height: 22px;margin-right: 8px;}
/* 신청폼 스타일 */
.register-form {list-style: none;padding: 0;margin: auto;width: 100%;text-align: center;}
.register-form input {height: 50px; width: 80%; padding: 20px; border-radius: 6px; border: 1px solid #ccc; font-size: 16px;}
#timeSelect {padding-left: 20px;height: 50px;width: 80%;border-radius: 6px;border: 1px solid #ccc;font-size: 16px;padding-right: 40px; /* 오른쪽 공간 */background: url('data:image/svg+xml;utf8,') no-repeat right 12px center/40px 40px;appearance: none;-webkit-appearance: none;-moz-appearance: none;}
#programSelect {padding-left: 20px;height: 50px;width: 80%;border-radius: 6px;border: 1px solid #ccc;font-size: 16px;padding-right: 40px; /* 오른쪽 공간 */background: url('data:image/svg+xml;utf8,') no-repeat right 12px center/40px 40px;appearance: none;-webkit-appearance: none;-moz-appearance: none;}
.register-form li {display: flex;align-items: center;margin-bottom: 16px;}
.register-form .form-title {display: inline-block;width: 110px;min-width: 110px;font-weight: bold;color: #333;margin-right: 12px;text-align: left;font-size: 18px;}
.register_wrap > ul {display: flex;gap: 24px;}
.register_wrap > ul > li {flex: 1 1 0;max-width: 50%;box-sizing: border-box; }
.submit-button {background: #000; margin-right: 10px; padding: 20px; color: #fff; font-size: 18px; font-weight: 600; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.28s ease; }
.register-form-chk {width: 100%; display: flex;justify-content: space-between; align-items: center; }
.calender {flex: 1;}
#agreeCheckbox {width: 18px; height: 18px; margin-right: 8px; cursor: pointer; text-align: left;}
#agreeCheckbox + label {cursor: pointer;}
.register-form li:last-child {justify-content: flex-end;display: flex;padding: 20px 0;}
/* 신청절자 */
.process {width: 100%; margin: auto; padding: 100px 0; text-align: center; background: #f5f5f5;}
.process_wrap {max-width: var(--site_width); margin: 0 auto; padding: 0 20px;}
.process_wrap > ul {display: flex; justify-content: space-around; align-items: flex-start; gap: 120px; }
.process_wrap h3 {font-size: 36px; font-weight: 800; color: #333; margin-bottom: 12px; }
.process_wrap h4 {font-size: 20px; font-weight: 700; color: #333; margin-bottom: 30px; margin-top: 30px;}
.process_wrap > span {font-size: 20px; font-weight: 400; color: #333; margin-bottom: 50px; display: block; }
.process_wrap ul {margin-top: 60px; display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.process_wrap ul li {width: 25%; display: flex;flex-direction: column;align-items: center;text-align: center;border: 1px solid #ccc;border-radius: 6px;padding: 20px;flex-wrap: wrap; }
.process_wrap ul li img {width: 80px; height: auto; margin-bottom: 20px;}
.process_wrap ul li span {font-size: 16px; color: #555; margin-top: 8px;}
.process_wrap li:hover{transform: translateY(-6px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); transition: all 0.28s ease;}
/* 찾아오시는 길 */
.experience_location {width: 100%; margin: auto; padding-top: 100px; padding-bottom: 100px; text-align: center; }
.experience_location_wrap {max-width: var(--site_width); margin: 0 auto; padding: 0 20px;}
.experience_location_wrap > ul {display: flex; justify-content: space-around; align-items: flex-start; gap: 120px; }
.experience_location_wrap h3 {font-size: 36px; font-weight: 800; color: #333; margin-bottom: 12px; }
#daumRoughmapContainer1761712870567 {width: 100%; margin-top: 80px; border: 1px solid #ccc; border-radius: 8px;}
/* 서브 프로그램 안내 */
/* =========================
Mobile overrides (<=768)
PC layout stays unchanged
========================= */
@media (max-width: 1068px) {
:root { --site_width: 100%; }
/* Header layout */
.header_wrap { padding: 0 16px; }
.header_wrap > ul { height: auto; padding: 12px 0; gap: 10px; }
.header_wrap .gnb,
.header_wrap .sns,
.header_wrap .s_gnb { display: none; }
.header-hamburger { display: block; }
/* Mobile menu overlay */
.mobile-menu { display:block; position: fixed; inset:0; z-index: 10000; pointer-events: none; }
.mobile-menu__backdrop { display:block; position:absolute; inset:0; background: rgba(0,0,0,0.35); opacity: 0; transition: opacity .2s ease; }
.mobile-menu__panel { display:flex; flex-direction: column; position:absolute; right:0; top:0; height:100vh; width: min(92vw, 360px); background:#fff; transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1); box-shadow: -12px 0 40px rgba(0,0,0,0.18); }
.mobile-menu__head { display:flex; align-items:center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #eee; }
.mobile-menu__title { font-weight: 800; font-size: 15px; }
.mobile-menu__close { width:38px; height:38px; border-radius: 10px; border:1px solid #ddd; background:#fff; font-size: 22px; line-height: 1; cursor:pointer; }
.mobile-menu__body { padding: 14px 16px 24px 16px; overflow:auto; }
.mobile-menu__nav,
.mobile-menu__auth { display:flex; flex-direction: column; gap: 10px; }
.mobile-menu__link { display:block; padding: 12px 12px; border:1px solid #eee; border-radius: 10px; font-weight: 700; font-size: 14px; }
.mobile-menu__divider { height: 1px; background: #eee; margin: 14px 0; }
.mobile-menu__sns { display:flex; flex-direction: column; gap: 8px; }
.mobile-menu__snslink { font-size: 13px; color: #555; padding: 6px 2px; }
body.is-mobile-menu-open .mobile-menu { pointer-events: auto; }
body.is-mobile-menu-open .mobile-menu__backdrop { opacity: 1; }
body.is-mobile-menu-open .mobile-menu__panel { transform: translateX(0); }
/* Main visual */
.main_visual { height: auto; min-height: 420px; }
.main_visual .swiper-slide video { height: 70vh; min-height: 420px; }
.main_visual_txt2 { max-width: 100%; padding: 0 16px; }
.main_visual_txt2 h3 { font-size: 34px; }
.main_visual_txt2 .tit_box { padding-top: 24px; }
.main_visual_txt2 .tit_box li img { width: 180px !important; }
.main_visual_txt2 .tit_box .m_txt { width: 100%; padding: 0; }
/* Common containers */
.main_wrap,
.main_brand_wrap,
.experience_wrap,
.process_wrap,
.experience_location_wrap,
.register_wrap {
padding-left: 16px;
padding-right: 16px;
}
/* Main service list */
.main_service_list { flex-direction: column; gap: 16px; margin-top: 24px; }
.main_service_list > li { margin: 0; min-width: 0; width: 100%; padding: 26px 18px 22px 18px; }
.main_service_list > li.main_service_center { border-left: none; border-right: none; }
/* Brand */
.main_brand_wrap ul { flex-direction: column; gap: 18px; }
.main_brand_wrap ul li img { width: 160px; }
.main_brand_wrap h3 { font-size: 26px; }
.main_brand_wrap span { font-size: 16px; }
/* Experience list (if present) */
.experience-program-list { display:flex; flex-direction: column; gap: 16px; }
.experience-program-list li { border-left: none !important; border-right: none !important; }
/* Process steps */
.process { padding: 60px 0; }
.process_wrap ul { flex-direction: column; gap: 16px; }
.process_wrap ul li { width: 100%; }
/* Map */
#daumRoughmapContainer1761712870567 { margin-top: 32px; }
.root_daum_roughmap { width: 100% !important; }
.root_daum_roughmap .wrap_map { height: 320px !important; }
/* Register form */
.register { padding: 60px 0; }
.register_wrap > ul { flex-direction: column; gap: 24px; }
.register_wrap > ul > li { max-width: 100%; }
.register_wrap .notice-box { width: 100%; }
/* Sub visuals */
.program_visual,
.apply_visual,
.member_visual,
.mypage_visual,
.company_visual,
.brand_visual,
.contact_visual,
.community_visual,
.policy_visual {
height: 240px;
}
/* Company/Brand two-column blocks */
.company { padding-top: 60px; padding-bottom: 60px; }
.company_wrap > ul,
.brand_wrap > ul {
flex-direction: column;
gap: 24px;
}
.company_wrap > ul li:nth-of-type(1),
.company_wrap > ul li:nth-of-type(2) {
width: 100%;
}
.company_wrap > ul li:nth-of-type(2) {
text-align: center;
}
.company_wrap .ceo img,
.brand_wrap .ceo img {
width: min(320px, 100%);
height: auto;
}
/* Program price cards (used in apply page) */
.program_price { padding-top: 60px; padding-bottom: 60px; }
.program_price_wrap > ul {
flex-direction: column;
gap: 16px;
}
.program_price_wrap > ul > li {
width: 100%;
}
.program_price_wrap > ul > li[style] {
border-left: none !important;
border-right: none !important;
}
/* Program photo swiper */
.program_photo { padding-bottom: 60px; }
.program_photo_gallery img {
width: 100%;
height: auto;
display: block;
}
.register-form li { flex-direction: column; align-items: stretch; gap: 8px; }
.register-form .form-title { width: auto; min-width: 0; margin-right: 0; font-size: 16px; }
.register-form input,
#timeSelect,
#programSelect { width: 100%; }
.register-form-chk { flex-direction: column; align-items: flex-start; gap: 12px; }
.register-form li:last-child { justify-content: flex-start; }
/* Floating sns */
.sns_menu { right: 12px; bottom: 12px; }
/* RFCT company page helpers (won't affect Poridam desktop) */
.promise-cards { flex-direction: column; gap: 16px; }
.mission-grid { grid-template-columns: 1fr; gap: 16px; }
.reasons-line { padding-left: 0; }
}
.program_time {width: 100%; margin: auto; padding: 100px 0; text-align: center; }
.program_time_wrap {max-width: var(--site_width); margin: 0 auto; padding: 0 20px;}
.program_time_wrap > ul {display: flex; justify-content: space-between; align-items: center; }
.program_time_wrap h3 {font-size: 36px; font-weight: 800; color: #333; margin-bottom: 20px;}
.program_time_wrap > span {font-size: 20px; font-weight: 400; color: #333; margin-bottom: 100px; display: block; }
.program_time_wrap h4 {font-size: 22px; font-weight: 700; color: #333; margin-bottom: 30px; margin-top: 30px; }
/* 프로그램 안내 */
.experience {width: 100%; margin: auto; padding: 100px 0; text-align: center; }
.experience_wrap {max-width: var(--site_width); margin: 0 auto; padding: 0 20px;}
.experience_wrap > ul {display: flex; justify-content: space-between; align-items: center; }
.experience_wrap h3 {font-size: 36px; font-weight: 800; color: #333; margin-bottom: 20px;}
.experience_wrap > span {font-size: 20px; font-weight: 400; color: #333; margin-bottom: 100px; display: block; }
.experience_wrap h4 {font-size: 22px; font-weight: 700; color: #333; margin-bottom: 30px; margin-top: 30px; }
.experience-program-list {display: flex;gap: 0;padding: 0;margin: 0; width: 100%;}
.experience-program-list li {width: 33.33%;min-width: 180px;box-sizing: border-box;text-align: center;list-style: none;padding: 24px 12px;}
.experience-program-list .img1 {background-image: url("/images/ex_1.png"); width: 30.3%; height: 500px; background-size: cover; background-position: center; border-radius: 8px; }
.experience-program-list .img2 {background-image: url("/images/ex_2.png"); width: 30.3%; height: 500px; background-size: cover; background-position: center; border-radius: 8px; }
.experience-program-list .img3 {background-image: url("/images/ex_3.png"); width: 30.3%; height: 500px; background-size: cover; background-position: center; border-radius: 8px; }
.experience-program-list h4 {font-size: 30px; font-weight: 700; color: #ffffff; margin-top: 50px; margin-bottom: 80px;}
.experience-program-list span {font-size: 18px; font-weight: 700; color: #ffffff; }
.experience-apply-btn-container {text-align: center; margin-top: 100px;}
.experience-program-list > li:hover {transform: translateY(-6px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); transition: all 0.28s ease;}
/* 학습 체험 프로그램 신청하기 버튼 */
.experience-apply-btn {background: #fff;border: 2px solid #8B5C2A;color: #8B5C2A;border-radius: 6px;font-weight: 600;padding: 10px 32px; margin-top: 30px; font-size: 17px;cursor: pointer; }
.experience-apply-btn:hover {box-shadow: 0 2px 12px rgba(139, 92, 42, 0.52);background: #f9f6f3;}
/* 프로그램 visual */
.program_visual {width: 100%; height: 400px; background: url("/images/program_bg.png") no-repeat center center; background-size: cover; position: relative; }
.program_visual_wrap {max-width: var(--site_width); margin: 0 auto; padding: 0 0px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.program_visual_wrap h3 {font-size: 36px; font-weight: 800; color: #fff; margin-bottom: 12px; text-shadow: 0 2px 8px rgba(0,0,0,0.18); padding-left: 20px; display: inline-block; /* border-top: 1px solid rgba(255,255,255,0.1); */ width: auto; max-width: 100%;}
.program_visual_wrap span {font-size: 16px;font-weight: 500;color: #fff;margin-bottom: 12px;display: inline;padding-left: 20px;}
.apply_visual {width: 100%; height: 400px; background: url("/images/program_bg2.png") no-repeat center center; background-size: cover; position: relative; }
.apply_visual_wrap {max-width: var(--site_width); margin: 0 auto; padding: 0 0px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.apply_visual_wrap h3 {font-size: 36px; font-weight: 800; color: #fff; margin-bottom: 12px; text-shadow: 0 2px 8px rgba(0,0,0,0.18); padding-left: 20px; display: inline-block; /* border-top: 1px solid rgba(255,255,255,0.1); */ width: auto; max-width: 100%;}
.apply_visual_wrap span {font-size: 16px;font-weight: 500;color: #fff;margin-bottom: 12px;display: inline;padding-left: 20px;}
.member_visual {width: 100%; height: 400px; background: url("/images/member_bg3.png") no-repeat center center; background-size: cover; position: relative; }
.member_visual_wrap {max-width: var(--site_width); margin: 0 auto; padding: 0 0px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.member_visual_wrap h3 {font-size: 36px; font-weight: 800; color: #fff; margin-bottom: 12px; text-shadow: 0 2px 8px rgba(0,0,0,0.18); padding-left: 20px; display: inline-block; /* border-top: 1px solid rgba(255,255,255,0.1); */ width: auto; max-width: 100%;}
.member_visual_wrap span {font-size: 16px;font-weight: 500;color: #fff;margin-bottom: 12px;display: inline;padding-left: 20px;}
.mypage_visual {width: 100%; height: 400px; background: url("/images/mypage_bg.png") no-repeat center center; background-size: cover; position: relative; }
.mypage_visual_wrap {max-width: var(--site_width); margin: 0 auto; padding: 0 0px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.mypage_visual_wrap h3 {font-size: 36px; font-weight: 800; color: #fff; margin-bottom: 12px; text-shadow: 0 2px 8px rgba(0,0,0,0.18); padding-left: 20px; display: inline-block; /* border-top: 1px solid rgba(255,255,255,0.1); */ width: auto; max-width: 100%;}
.mypage_visual_wrap span {font-size: 16px;font-weight: 500;color: #fff;margin-bottom: 12px;display: inline;padding-left: 20px;}
.mypage {width: 100%; margin: auto; background: #ffffff; padding-top: 100px; padding-bottom: 100px;}
.mypage_wrap {max-width: var(--site_width); margin: 0 auto; text-align: center;}
.mypage_wrap h3 {font-size: 36px; font-weight: 800; color: #333; margin-bottom: 20px; text-align: center; }
.mypage_wrap > span {font-size: 20px;font-weight: 500;color: #333;margin-bottom: 12px; text-align: center;}
.mypage_wrap table {width: 80%; margin: auto;}
.mypage_wrap table thead tr {height: 50px; background: #F8A100; color: #fff; font-size: 16px; font-weight: 700; }
.mypage_wrap table tbody tr td {height: 50px; color: #333; font-size: 16px; font-weight: 400; }
/* 프로그램 일정표 리스트(table 스타일) */
.program-schedule-list {width: 100%;border-radius: 8px;border: 1px solid #e3e7ee;padding: 0;margin: 0;overflow-x: auto;}
.program-schedule-list li {display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #f2f2f2;padding: 0 8px;height: 80px;}
.program-schedule-list li:last-child {border-bottom: none;}
.program-schedule-list .program-schedule-header {background: #f7f3ef;color: #8B5C2A;font-weight: 700;font-size: 18px;border-bottom: 1px solid #e3e7ee;padding: 0 8px;}
.program-schedule-list li span {flex: 1 1 0;text-align: center;padding: 14px 4px;font-size: 18px;color: #fffcfc;font-weight: 700;word-break: keep-all;}
.program-schedule-list .program-schedule-header span {color: #8B5C2A;font-weight: 700;}
.program_ex {width: 100%; margin: auto; background: #F8A100; padding: 20px; padding-top: 80px; padding-bottom: 80px;}
.program_ex_wrap {max-width: var(--site_width); margin: 0 auto; text-align: center;}
.program_ex_wrap h3 {font-size: 36px; font-weight: 800; color: #ffffff; margin-bottom: 12px; text-align: center;}
.program_ex_wrap > span {font-size: 20px;font-weight: 500;color: #333;margin-bottom: 12px; text-align: center;}
.program_ex_wrap .program_detail_list {display: flex; justify-content: space-around; align-items: center; margin-top: 50px;}
.program_ex_wrap .program_detail_list > li {width: 18%; border: 1px solid #eee; border-radius: 8px; padding: 20px; box-sizing: border-box; text-align: center;}
.program_ex_wrap .program_detail_list > li h4 {font-size: 20px; font-weight: 700; color: #ffffff; margin-bottom: 12px;}
.program_ex_wrap .program_detail_list > li span {font-size: 18px; color: #ffffff; line-height: 1.5;}
.program_price {width: 100%; margin: auto; background: #ffffff; padding-top: 80px; padding-bottom: 80px;}
.program_price_wrap {max-width: var(--site_width); margin: 0 auto; text-align: center;}
.program_price_wrap h3 {font-size: 36px; font-weight: 800; color: #333; margin-bottom: 20px; text-align: center; }
.program_price_wrap > span {font-size: 20px;font-weight: 500;color: #333;margin-bottom: 12px; text-align: center;}
.program_price_wrap > ul {display: flex; justify-content: space-around; align-items: center; margin-top: 50px;}
.program_price_wrap > ul > li {width:32%; border: 1px solid #eee; border-radius: 8px; padding: 20px; text-align: center;}
.program_price_wrap > ul > li h4 {font-size: 24px; font-weight: 700; color: #333; margin-bottom: 20px; display: inline-block; padding-bottom: 10px; margin-top: 10px; border-bottom: 1px solid #cfcfce;}
.program_price_wrap > ul > li span {font-size: 18px; color: #333; line-height: 1.5; display: block; margin-bottom: 10px;}
.program_price_wrap > ul > li span:nth-of-type(1) {margin-bottom: 10px; font-size: 32px; font-weight: 800; color: #F8A100;}
.program_photo {width: 100%; margin: auto; background: #ffffff; padding-top: 0px; padding-bottom: 80px;}
.program_photo_wrap {max-width: var(--site_width); margin: 0 auto; text-align: center;}
.program_photo_wrap h3 {font-size: 36px; font-weight: 800; color: #333; margin-bottom: 20px; text-align: center; }
.program_photo_wrap > span {font-size: 20px;font-weight: 500;color: #333;margin-bottom: 12px; text-align: center;}
.member {width: 100%; margin: auto; background: #ffffff; padding-top: 100px; padding-bottom: 100px;}
.member_wrap {max-width: var(--site_width); margin: auto; text-align: center;}
.member_wrap h3 {font-size: 36px; font-weight: 800; color: #333; margin-bottom: 20px; text-align: center; }
.member_wrap > span {font-size: 18px;font-weight: 400;color: #333;margin-bottom: 12px; text-align: center;}
.member_wrap > ul {display: flex; flex-direction: column; justify-content: space-around; align-items: center; margin-top: 50px; gap: 30px;}
.naver_reg {background: #03C75A; width: 370px; color: #fff; padding: 20px 28px; border-radius: 6px; font-size: 18px; font-weight: 600; border: none; cursor: pointer; text-align: center;}
.kakao_reg {background: #FEE500; color: #8B5C2A; width: 370px; padding: 20px 28px; border-radius: 6px; font-size: 18px; font-weight: 600; border: none; cursor: pointer; text-align: center;}
.company {width: 100%; margin: auto; background: #ffffff; padding-top: 100px; padding-bottom: 100px;}
.company_wrap {max-width: var(--site_width); margin: auto; }
.company_wrap h4 {font-size: 18px; font-weight: 500; color: #333; margin-bottom: 0px; text-align: left; }
.company_wrap h3 {font-size: 24px; font-weight: 800; color: #333; margin-bottom: 20px; text-align: left; }
.company_wrap .intro {margin-bottom: 20px; margin-top: 30px;}
.company_wrap span {font-size: 16px;font-weight: 400;color: #333;margin-bottom: 12px; text-align: left; display: block; line-height: 2;}
.company_wrap > ul {width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 0px; gap: 100px;}
.company_wrap > ul li:nth-of-type(1) {width: 70%;}
.company_wrap > ul li:nth-of-type(2) {width: 30%; text-align: right;}
.company_wrap .ceo img {width: 300px; height: auto; border-radius: 8px;}
.company_visual {width: 100%; height: 380px; background: url("/images/company_bg.png") no-repeat center center; background-size: cover; position: relative; }
.company_visual_wrap {max-width: var(--site_width); margin: 0 auto; padding: 0 0px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.company_visual_wrap h3 {font-size: 36px; font-weight: 800; color: #fff; margin-bottom: 12px; text-shadow: 0 2px 8px rgba(0,0,0,0.18); padding-left: 20px; display: inline-block; }
.company_visual_wrap span {font-size: 16px;font-weight: 500;color: #fff;margin-bottom: 12px;display: inline;padding-left: 20px;}
.brand_visual {width: 100%; height: 380px; background: url("/images/company_bg.png") no-repeat center center; background-size: cover; position: relative; }
.brand_visual_wrap {max-width: var(--site_width); margin: 0 auto; padding: 0 0px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.brand_visual_wrap h3 {font-size: 36px; font-weight: 800; color: #fff; margin-bottom: 12px; text-shadow: 0 2px 8px rgba(0,0,0,0.18); padding-left: 20px; display: inline-block; }
.brand_visual_wrap span {font-size: 16px;font-weight: 500;color: #fff;margin-bottom: 12px;display: inline;padding-left: 20px;}
.brand {width: 100%; margin: auto; background: #c5c5c5; padding-top: 100px; padding-bottom: 100px;}
.brand_wrap {max-width: var(--site_width); margin: auto; }
.brand_wrap h4 {font-size: 18px; font-weight: 500; color: #333; margin-bottom: 0px; text-align: left; }
.brand_wrap h3 {font-size: 24px; font-weight: 800; color: #333; margin-bottom: 20px; text-align: left; }
.brand_wrap .intro {margin-bottom: 20px; margin-top: 30px;}
.brand_wrap span {font-size: 16px;font-weight: 400;color: #333;margin-bottom: 12px; text-align: left; display: block; line-height: 1.3;}
.brand_wrap > ul {width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 0px;}
.brand_wrap .ceo img {width: 300px; height: auto; border-radius: 8px;}
.contact_visual {width: 100%; height: 380px; background: url("/images/contact_bg.png") no-repeat center center; background-size: cover; position: relative; }
.contact_visual_wrap {max-width: var(--site_width); margin: 0 auto; padding: 0 0px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.contact_visual_wrap h3 {font-size: 36px; font-weight: 800; color: #fff; margin-bottom: 12px; text-shadow: 0 2px 8px rgba(0,0,0,0.18); padding-left: 20px; display: inline-block; }
.contact_visual_wrap span {font-size: 16px;font-weight: 500;color: #fff;margin-bottom: 12px;display: inline;padding-left: 20px;}
.contact {width: 100%; margin: auto; background: #ffffff; padding-top: 100px; padding-bottom: 100px;}
.contact_wrap {max-width: var(--site_width); margin: auto; background: #ffffff;}
.contact_wrap h3 {font-size: 32px; font-weight: 800; color: #333; margin-bottom: 30px; text-align:center; }
.contact_wrap > span {font-size: 16px; font-weight: 400; color: #333; margin-bottom: 50px; display: block; text-align: center; }
.contact_wrap table {width: 80%; overflow: hidden; margin: auto;}
.contact_wrap table input {height: 50px; width: 70%;}
.contact_wrap table input {padding: 0 20px; border-radius: 6px; border: 1px solid #ccc; font-size: 16px;}
.contact_wrap table select {padding: 0 20px; height: 50px; width: 70%; border-radius: 6px; border: 1px solid #ccc; font-size: 16px;}
.contact_wrap table textarea {padding: 20px; height: 200px; width: 70%; border-radius: 6px; border: 1px solid #ccc; font-size: 16px;}
.contact_wrap table tr {margin: auto; height: 60px;}
.contact_btn {margin-top: 50px; text-align: center; border: 0;}
.contact_btn span{display: inline; padding: 10px 20px; background: #000; color: #fff; border-radius: 5px; cursor: pointer; font-size: 18px; font-weight: 600;}
.sns {display: flex; gap: 30px; justify-content: center; align-items: center; margin-top: 10px;}
.sns_list {display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: center; }
.community_visual {width: 100%; height: 380px; margin: auto; background: url("/images/com_bg.png") no-repeat center center; background-size: cover; position: relative; }
.community_visual_wrap {max-width: var(--site_width); margin: 0 auto; padding: 0 0px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.community_visual_wrap h3 {font-size: 36px; font-weight: 800; color: #fff; margin-bottom: 12px; text-shadow: 0 2px 8px rgba(0,0,0,0.18); padding-left: 20px; display: inline-block; }
.community_visual_wrap span {font-size: 16px;font-weight: 500;color: #fff;margin-bottom: 12px;display: inline;padding-left: 20px;}
.community {width: 100%; margin: auto; background: #ffffff; padding-top: 100px; padding-bottom: 100px;}
.community_wrap {max-width: var(--site_width); margin: auto; background: #ffffff;}
.community_wrap h3 {font-size: 32px; font-weight: 800; color: #333; margin-bottom: 30px; text-align:center; }
.community_table {width: 100%; border: 1px solid #eceaea; border-radius: 8px; overflow: hidden; }
.community_table thead tr th{background: #8B5C2A; color: #fff; font-size: 16px; font-weight: 400; }
.community_table thead tr th {height: 50px;}
.community_table tbody tr td {height: 70px;}
.notice_view h4 {text-align: center; font-size: 30px; font-weight: 700; margin-bottom: 20px;}
.notice_view .info {display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 30px; color: #353434;}
.notice_view .content {color: #333; margin-bottom: 50px; padding: 20px; border-top: 1px solid #eceaea; border-bottom: 1px solid #eceaea;}
.btn_area {text-align: right;}
.btn_area span{background: #000; color: #fff; padding: 10px 15px; border-radius: 5px; cursor: pointer; margin-left: 10px; font-size: 16px; font-weight: 500;}
/* .community_wrap h3 {font-size: 18px; font-weight: 500; color: #333; margin-bottom: 40px; text-align: left; } */
.policy_visual {width: 100%; height: 380px; background: url("/images/po_bg.png") no-repeat center center; background-size: cover; position: relative; }
.policy_visual_wrap {max-width: var(--site_width); margin: 0 auto; padding: 0 0px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.policy_visual_wrap h3 {font-size: 36px; font-weight: 800; color: #fff; margin-bottom: 12px; text-shadow: 0 2px 8px rgba(0,0,0,0.18); padding-left: 20px; display: inline-block; }
.policy_visual_wrap span {font-size: 16px;font-weight: 500;color: #fff;margin-bottom: 12px;display: inline;padding-left: 20px;}
.privacy {width: 100%; margin: auto; background: #ffffff; padding-top: 100px; padding-bottom: 100px;}
.privacy_wrap {max-width: var(--site_width); margin: auto; background: #ffffff;}
.privacy_wrap h4 {font-size: 24px; font-weight: 800; color: #333; margin-bottom: 30px; text-align: left; }
.privacy_wrap h3 {font-size: 18px; font-weight: 500; color: #333; margin-bottom: 40px; text-align: left; }
.privacy_wrap span {font-size: 16px; font-weight: 400; color: #333; margin-bottom: 20px; text-align: left; display: block; }
.privacy_wrap strong {font-weight: 700; font-size: 18px; margin-bottom: 20px; display: block; }
.privacy_wrap ul {margin-left: 0px; margin-bottom: 30px; }
.privacy_wrap > ul {border: 1px solid #eceaea; padding: 30px; border-radius: 8px;}
.privacy_wrap ul li {margin-left: 20px; margin-bottom: 10px;}
.footer {width: 100%; background: #F8A100; padding-bottom: 50px;}
.footer_wrap {max-width: var(--site_width); margin: 0 auto; padding: 0 20px;}
.footer_wrap .policy {display: flex; justify-content: flex-start; align-items: center; gap: 20px; padding-top: 50px; padding-left: 20px; font-size: 14px; color: #fff;}
.footer_wrap .policy span{font-size: 16px; font-weight: 400; cursor: pointer; padding-bottom: 10px; border-bottom: 1px solid #eceaea;}
.footer_wrap .footer_info {display: flex; justify-content: space-between; flex-direction: column; align-items: flex-start; margin-top: 30px; padding-left: 20px; gap:10px; padding-right: 20px; color: #383838;}
.footer_wrap .footer_space {display: flex; justify-content: space-between; align-items: center; padding: 0px 0; }
.footer_wrap .customer {border: 1px solid #eceaea; padding: 20px; border-radius: 8px; background: rgba(255,255,255,0.8); margin-top: 20px; }
.footer_wrap .customer h3{font-size: 20px; font-weight: 600; color: #333; margin-bottom: 6px;}
.footer_wrap .customer span{font-size: 16px; font-weight: 400; color: #333; margin-bottom: 6px;}
.email-modal { display: none; background: #fff; width: 380px; z-index: 1000; border-radius: 15px; overflow: auto; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.email-top { display: flex; background: #F8A100; padding: 20px; justify-content: space-between; border-top-left-radius: 15px; border-top-right-radius: 15px; }
.email-title { width: 100%; font-size: 18px; font-weight: 600; }
.email-content { padding: 20px 20px 50px 20px; font-size: 14px; line-height: 30px; height: 260px; overflow: auto; }
.email-close-btn { background-image: url("https://boyhomeclean.mycafe24.com/images/modal-close.svg"); background-size: cover; background-repeat: no-repeat; background-position: center; height: 30px; width: 30px; cursor: pointer; }
.email-modal-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.6; z-index: 100; display: none; }
#contact_btn {border: none !important;}
@media (max-width: 768px) {
.main_visual {
height: 100vh;
min-height: 400px;
}
.main_visual .swiper,
.main_visual .swiper-slide,
.main_visual .swiper-slide video {
width: 100vw !important;
height: 100vh !important;
min-height: 400px;
object-fit: cover;
}
.main_visual_txt h3 {
font-size: 7vw;
}
}
@media (max-width: 900px) {
.program-schedule-list {
font-size: 15px;
min-width: 600px;
}
.program-schedule-list li span {
padding: 10px 2px;
font-size: 15px;
}
}
@media (max-width: 600px) {
.program-schedule-list {
font-size: 14px;
min-width: 420px;
}
.program-schedule-list li span {
padding: 8px 1px;
font-size: 13px;
}
}
.img-center {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* 공지사항 테이블 스타일 */
.community_table {
width: 100%;
border-collapse: collapse;
margin-top: 30px;
}
.community_table th, .community_table td {
border-bottom: 1px solid #ddd;
padding: 12px 8px;
font-size: 16px;
}
.community_table th {
background: #f8f8f8;
font-weight: bold;
color: #333;
}
.community_table tr:nth-child(even) {
background: #f8f8f8;
}
.community_table tr:last-child td {
border-bottom: 2px solid #333;
}