@charset "euc-kr";

/* ==================================================
   COMMON (page scope)
================================================== */
.soc-wrap {width:100%;overflow:hidden;font-family:'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;color:#333;word-break:keep-all}
.soc-wrap * {box-sizing:border-box}
.soc-wrap h1, .soc-wrap h2, .soc-wrap p, .soc-wrap dl, .soc-wrap dt, .soc-wrap dd {margin:0;padding:0}
.soc-wrap ul, .soc-wrap li {margin:0}
.soc-wrap ul {list-style:none}
.soc-wrap a {text-decoration:none}
.soc-wrap .c-navy {color:#1a2dad}
.soc-wrap .br-mo, .soc-wrap .br-ta, .soc-wrap .br-tamo {display:none}
.soc-wrap .sec-title {font-size:28px;font-weight:700;line-height:38px;letter-spacing:-0.56px;color:#333;text-align:center}
.soc-wrap .dot-list li {padding-left:0.7em;text-indent:-0.7em}
.soc-wrap .dot-list li::before {content:"\2022\00a0"}

/* ==================================================
   TOP (visual + intro + info)
================================================== */
.soc-wrap .soc-top {position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;gap:48px;padding:100px 0;background:linear-gradient(180deg, #eee 0%, #fff 53.226%)}
.soc-wrap .top-content {position:relative;display:flex;flex-direction:column;gap:48px;width:1200px}
.soc-wrap .top-title {display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.soc-wrap .top-title-group {display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.soc-wrap .top-label {display:flex;align-items:center;gap:12px;padding:4px 0;border-top:2px solid #1a2dad;border-bottom:2px solid #1a2dad;font-size:24px;font-weight:400;line-height:32px;letter-spacing:-0.48px;color:#1a2dad;white-space:nowrap}
.soc-wrap .top-label strong {font-weight:700}
.soc-wrap .top-label-bar {display:block;width:1px;height:20px}
.soc-wrap .top-label-bar svg {display:block}
.soc-wrap .top-main {font-size:64px;font-weight:700;line-height:1.2;letter-spacing:-1.28px;color:#333}
.soc-wrap .top-sub {font-size:36px;font-weight:400;line-height:1.2;letter-spacing:-0.72px;color:#333}
.soc-wrap .top-intro {display:flex;flex-direction:column;gap:24px;padding:48px;border-radius:12px;background:linear-gradient(-63.67deg, rgba(255, 255, 255, 0) 19.248%, #ededed 80.588%)}
.soc-wrap .intro-lead {font-size:24px;font-weight:700;line-height:32px;letter-spacing:-0.48px;color:#333}
.soc-wrap .intro-txt {font-size:16px;font-weight:400;line-height:24px;letter-spacing:-0.16px;color:#333}
.soc-wrap .intro-txt.is-b {font-weight:600}
.soc-wrap .intro-last {display:flex;flex-direction:column;gap:2px}
.soc-wrap .hl {margin:0 -3px;padding:0 3px 2px;background:linear-gradient(rgba(18, 25, 127, 0.15), rgba(18, 25, 127, 0.15)) 0 100% / 100% 12px no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.soc-wrap .top-profile {position:absolute;bottom:-235px;left:calc(50% + 391.5px);width:827px;height:949px;max-width:none;object-fit:contain;transform:translateX(-50%) scaleX(-1);mix-blend-mode:multiply;pointer-events:none}
.soc-wrap .top-info {position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-end;gap:12px;width:1200px}
.soc-wrap .top-info-box {display:flex;align-items:center;justify-content:space-between;width:100%;padding:32px 48px;border-radius:12px;background:#12197f}
.soc-wrap .top-info-list {display:flex;flex-direction:column;gap:12px;font-size:18px;line-height:26px;letter-spacing:-0.36px;color:#fff}
.soc-wrap .top-info-row {display:flex;gap:60px}
.soc-wrap .info-item {display:flex;gap:16px}
.soc-wrap .info-item dt {flex:none;font-weight:600}
.soc-wrap .info-item dd {font-weight:400}
.soc-wrap .top-cta {display:flex}
.soc-wrap .btn-fill {display:flex;align-items:center;justify-content:center;width:200px;height:42px;padding:0 24px;border-radius:999px;background:#fff;font-size:15px;font-weight:600;line-height:22px;letter-spacing:-0.15px;color:#333;white-space:nowrap}
.soc-wrap .top-note {font-size:13px;line-height:18px;color:#999;text-align:right}

/* ==================================================
   AGENDA
================================================== */
.soc-wrap .soc-agenda {display:flex;flex-direction:column;align-items:center;gap:20px}
.soc-wrap .agenda-box {display:flex;flex-direction:column;gap:48px;width:1200px;padding:48px;border:1px solid #e5e5e5;border-radius:12px}
.soc-wrap .agenda-item {display:flex;flex-direction:column;gap:24px}
.soc-wrap .agenda-item + .agenda-item {padding-top:48px;border-top:1px solid #e5e5e5}
.soc-wrap .agenda-head {display:flex;align-items:flex-start;gap:12px}
.soc-wrap .agenda-num {flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:#1a2dad;font-size:18px;font-weight:600;line-height:26px;letter-spacing:-0.36px;color:#fff}
.soc-wrap .agenda-tit {font-size:24px;font-weight:700;line-height:32px;letter-spacing:-0.48px;color:#333}
.soc-wrap .agenda-list {display:flex;padding:0;font-size:18px;line-height:26px;letter-spacing:-0.36px;color:#555}
.soc-wrap .agenda-list li {flex:1;min-width:0}

/* ==================================================
   BENEFIT
================================================== */
.soc-wrap .soc-benefit {display:flex;flex-direction:column;align-items:center;gap:20px;padding:60px 0}
.soc-wrap .benefit-wrap {display:flex;flex-direction:column;align-items:flex-end;gap:16px;width:1200px}
.soc-wrap .benefit-box {display:flex;gap:24px;width:100%;padding:32px;border:1px solid #e5e5e5;border-radius:12px;background:#fff}
.soc-wrap .benefit-item {flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.soc-wrap .benefit-img {position:relative;width:100%;aspect-ratio:362 / 240;border-radius:8px;overflow:hidden}
.soc-wrap .bn-pic {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);overflow:hidden}
.soc-wrap .bn-pic img {position:absolute;left:0;width:100%;max-width:none}
.soc-wrap .bn-mock {height:95.42%;aspect-ratio:2756 / 2457;margin-top:-3.5px}
.soc-wrap .bn-mock img {top:0;height:100%;object-fit:cover}
.soc-wrap .bn-guide {height:88.34%;aspect-ratio:158 / 212}
.soc-wrap .bn-guide img {top:-2.12%;height:104.62%}
.soc-wrap .bn-goods {height:88.34%;aspect-ratio:364 / 212}
.soc-wrap .bn-goods img {top:1.87%;height:95.09%}
.soc-wrap .benefit-cap {width:100%;font-size:16px;font-weight:600;line-height:24px;letter-spacing:-0.16px;color:#333;text-align:center}
.soc-wrap .benefit-note {font-size:13px;line-height:18px;color:#999;text-align:right}

/* ==================================================
   RESERVE
================================================== */
.soc-wrap .soc-reserve {display:flex;flex-direction:column;align-items:center;gap:20px;padding:60px 0;background:#f8f8f8}
.soc-wrap .reserve-cont {display:flex;flex-direction:column;gap:32px;width:1200px}
.soc-wrap .branch-list {display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px;padding:0}
.soc-wrap .branch-card {display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:12px;background:#fff}
.soc-wrap .branch-card[hidden] {display:none}
.soc-wrap .card-head {display:flex;align-items:center;justify-content:space-between;gap:8px}
.soc-wrap .card-name {flex:1;min-width:0;font-size:20px;font-weight:600;line-height:28px;letter-spacing:-0.4px;color:#333}
/* .soc-wrap .card-note {flex:none;font-size:13px;line-height:18px;color:#999;text-align:right;white-space:nowrap} */
.soc-wrap .card-note {flex:none;font-size:13px;line-height:18px;color:#999;text-align:left;white-space:nowrap}
.soc-wrap .card-cont {display:flex;align-items:flex-end;gap:24px}
.soc-wrap .card-info {flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;font-size:15px;line-height:22px;letter-spacing:-0.15px}
.soc-wrap .card-info > div {display:flex;gap:12px}
.soc-wrap .card-info dt {flex:none;font-weight:600;color:#333}
.soc-wrap .card-info dd {flex:1;min-width:0;font-weight:400;color:#555}
.soc-wrap .card-body {flex:none;display:flex;align-items:center;gap:16px}
.soc-wrap .card-map {flex:none;display:flex;gap:8px}
.soc-wrap .btn-map {position:relative;display:block;width:40px;height:40px;border-radius:50%;background:#fff;overflow:hidden}
.soc-wrap .btn-reserve {display:flex;align-items:center;justify-content:center;width:200px;height:40px;padding:0 24px;border:1px solid #0376f0;border-radius:999px;background:#ebf3ff;font-size:16px;font-weight:600;line-height:24px;letter-spacing:-0.16px;color:#0376f0;white-space:nowrap}
.soc-wrap .btn-reserve.is-closed {padding:0;border-color:#DBDEE5;background:#EDEDED;color:#777;cursor:default}

/* ==================================================
   NOTICE
================================================== */
.soc-wrap .soc-notice {padding:40px 0;border-top:1px solid #e5e5e5;background:#f8f8f8}
.soc-wrap .notice-inner {display:flex;flex-direction:column;gap:12px;width:1200px;margin:0 auto}
.soc-wrap .notice-tit {font-size:20px;font-weight:600;line-height:28px;letter-spacing:-0.4px;color:#333}
.soc-wrap .notice-list {display:flex;flex-direction:column;gap:4px;padding:0;font-size:15px;line-height:22px;letter-spacing:-0.15px;color:#777}

/* ==================================================
   TABLET (768 ~ 1199)
================================================== */
@media screen and (max-width: 1199px) {
	.soc-wrap .br-ta, .soc-wrap .br-tamo {display:inline}

	.soc-wrap .soc-top {padding:80px 0;background:linear-gradient(180deg, #eee 0%, #fff 45.029%)}
	.soc-wrap .top-content {width:100%;padding:0 24px}
	.soc-wrap .top-main {font-size:56px;letter-spacing:-1.12px}
	.soc-wrap .top-sub {font-size:28px;letter-spacing:-0.56px}
	.soc-wrap .top-intro {padding:32px;background:linear-gradient(-75.21deg, rgba(255, 255, 255, 0) 19.248%, #ededed 80.588%)}
	.soc-wrap .top-profile {bottom:-47px;left:calc(50% + 207px);width:800px;height:489px}
	.soc-wrap .top-info {width:100%}
	.soc-wrap .top-info-box {justify-content:flex-start;gap:60px;border-radius:0}
	.soc-wrap .top-cta {flex:1;min-width:0}
	.soc-wrap .btn-fill {flex:1;width:auto;min-width:0}
	.soc-wrap .top-note {padding:0 24px}

	.soc-wrap .soc-agenda {padding:0 24px}
	.soc-wrap .agenda-box {width:100%}
	.soc-wrap .agenda-item {gap:20px}
	.soc-wrap .agenda-list {flex-direction:column;gap:4px}

	.soc-wrap .soc-benefit {padding:60px 24px}
	.soc-wrap .benefit-wrap {width:100%}
	.soc-wrap .bn-mock {height:97.5%;margin-top:0}

	.soc-wrap .reserve-cont {width:100%}
	.soc-wrap .branch-list {padding:0 24px}
	.soc-wrap .branch-card {gap:4px}
	.soc-wrap .card-cont {flex-direction:column;align-items:stretch;gap:12px}
	.soc-wrap .card-info {gap:2px}
	.soc-wrap .card-body {width:100%}
	.soc-wrap .btn-reserve {order:-1;flex:1;width:auto;min-width:0}

	.soc-wrap .soc-notice {padding:40px 24px}
	.soc-wrap .notice-inner {width:100%}
}

/* ==================================================
   MOBILE (~ 767)
================================================== */
@media screen and (max-width: 767px) {
	.soc-wrap .br-mo {display:inline}
	.soc-wrap .br-ta {display:none}
	.soc-wrap .sec-title {font-size:24px;line-height:32px;letter-spacing:-0.48px}

	.soc-wrap .soc-top {gap:32px;padding:60px 0 40px;background:linear-gradient(180deg, #eee 0%, #fff 38.678%)}
	.soc-wrap .top-content {gap:40px;padding:0 16px}
	.soc-wrap .top-title, .soc-wrap .top-title-group {gap:16px}
	.soc-wrap .top-label {gap:8px;font-size:16px;line-height:24px;letter-spacing:-0.32px}
	.soc-wrap .top-label strong {font-weight:600}
	.soc-wrap .top-main {font-size:40px;letter-spacing:-0.8px}
	.soc-wrap .top-sub {font-size:16px;letter-spacing:-0.32px}
	.soc-wrap .top-intro {gap:12px;padding:24px 20px;background:linear-gradient(-83.23deg, rgba(255, 255, 255, 0) 19.248%, #ededed 80.588%)}
	.soc-wrap .intro-lead {font-size:18px;line-height:26px;letter-spacing:-0.36px}
	.soc-wrap .intro-txt {font-size:14px;line-height:20px;letter-spacing:-0.14px}
	.soc-wrap .top-profile {bottom:-32px;left:calc(50% + 102px);width:284px;height:277px}
	.soc-wrap .top-info-box {flex-direction:column;align-items:stretch;gap:16px;padding:24px 20px}
	.soc-wrap .top-info-list {gap:8px;font-size:16px;line-height:24px;letter-spacing:-0.32px}
	.soc-wrap .top-info-row {flex-direction:column;gap:8px}
	.soc-wrap .info-item dd {flex:1;min-width:0}
	.soc-wrap .top-cta {width:100%}
	.soc-wrap .top-note {padding:0 16px}

	.soc-wrap .soc-agenda {gap:16px;padding:0 16px}
	.soc-wrap .agenda-box {gap:24px;padding:24px 20px}
	.soc-wrap .agenda-item {gap:12px}
	.soc-wrap .agenda-item + .agenda-item {padding-top:24px}
	.soc-wrap .agenda-head {align-items:center;gap:8px}
	.soc-wrap .agenda-num {width:28px;height:28px;font-size:14px;line-height:20px;letter-spacing:-0.14px}
	.soc-wrap .agenda-tit {font-size:18px;line-height:26px;letter-spacing:-0.36px}
	.soc-wrap .agenda-list {font-size:14px;line-height:20px;letter-spacing:-0.14px}

	.soc-wrap .soc-benefit {gap:16px;padding:40px 16px}
	.soc-wrap .benefit-box {flex-wrap:wrap;gap:16px;padding:20px}
	.soc-wrap .benefit-item {flex:none;width:calc((100% - 16px) / 2)}
	.soc-wrap .benefit-item.is-goods {width:100%}
	.soc-wrap .benefit-img {aspect-ratio:135 / 118}
	.soc-wrap .benefit-item.is-goods .benefit-img {aspect-ratio:286 / 123}
	.soc-wrap .bn-mock {height:99.15%}
	.soc-wrap .bn-guide {height:98.3%}
	.soc-wrap .bn-goods {height:100%}
	.soc-wrap .benefit-cap {font-size:14px;line-height:20px;letter-spacing:-0.14px;white-space:nowrap}

	.soc-wrap .soc-reserve {gap:16px;padding:40px 0}
	.soc-wrap .reserve-cont {gap:20px}
	.soc-wrap .branch-list {grid-template-columns:minmax(0, 1fr);padding:0 16px}
	.soc-wrap .branch-card {padding:20px}
	.soc-wrap .card-name {font-size:18px;line-height:26px;letter-spacing:-0.36px}
	.soc-wrap .card-info {font-size:14px;line-height:20px;letter-spacing:-0.14px}
	.soc-wrap .btn-reserve {font-size:14px;line-height:20px;letter-spacing:-0.14px}
	.soc-wrap .card-note {font-size:12px;letter-spacing:-0.12px;margin-top: 2px;}

	.soc-wrap .soc-notice {padding:20px 16px}
	.soc-wrap .notice-tit {font-size:18px;line-height:26px;letter-spacing:-0.36px}
	.soc-wrap .notice-list {font-size:13px;line-height:18px;letter-spacing:0}

	/* MO fixed header (.gnb-inner 55px, rwd/css/layout.css) - anchor offset for 'reserve' */
	.soc-wrap #agenda, .soc-wrap #reserve {scroll-margin-top:55px}
}