#n_primary {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 100px 0 0 0;
}
/* ----------------------------------------------------
๐ฅ ์ถ๊ฐ: ํ๋จ ์๋ฏธ ์๋ ํฐ์ ์ฌ๋ฐฑ(๊ธฐ๋ณธ ํ
๋ง ์ฌ๋ฐฑ) ๊ฐ์ ์ญ์
---------------------------------------------------- */
/*.site-content,
.site-main,
#primary,*/
#n_primary {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* ========================================================
New Simple Header Design
======================================================== */
.n-site-header {
width: 100%;
background-color: #fff;
border-bottom: 1px solid #eaeaea;
position: sticky;
top: 0;
z-index: 9999;
padding: 0;
}
.n-header-inner {
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
/* ๐ฅ ์์ : ์ข์ฐ ์ฌ๋ฐฑ์ ๋๊ฒ 100% ๋ค ์ฐ๋๋ก ๋ณ๊ฒฝ */
max-width: 100%;
padding: 0 40px;
}
/* 1. ๋ก๊ณ */
.n-logo a { display: flex; align-items: center; text-decoration: none !important; }
.n-logo img { height: 35px; width: auto; }
/* 2. ๋ฉ์ธ ๋ค๋น๊ฒ์ด์
*/
.n-main-nav {
flex: 1;
display: flex;
justify-content: center;
}
.n-nav-list {
display: flex;
/* ๐ฅ ์์ : ๊ฐ๊ฒฉ์ 40px -> 25px๋ก ์ค์ฌ์ 9๊ฐ ๋ฉ๋ด๊ฐ 1์ค์ ๋ค์ด์ค๊ฒ ํจ */
gap: 25px;
margin: 0;
padding: 0;
list-style: none;
}
/* 1์ฐจ ๋ฉ๋ด (1st Depth) */
.n-nav-list > li {
position: relative;
display: flex;
align-items: center;
height: 80px;
}
.n-nav-list > li > a {
/* ๐ฅ ์ถ๊ฐ: ๋ฉ๋ด ๊ธ์จ๊ฐ ์ ๋ ๋ ์ค๋ก ์ชผ๊ฐ์ง์ง ์๋๋ก ๊ฐ์ */
white-space: nowrap;
font-size: 15px;
font-weight: 600;
letter-spacing: -0.5px;
color: #111;
text-decoration: none;
transition: color 0.3s ease;
}
.n-nav-list > li:hover > a {
color: #F5CD4F;
}
/* 2์ฐจ ๋๋กญ๋ค์ด ๋ฉ๋ด (2nd Depth) */
.n-nav-list > li > ul.sub-menu {
display: none;
position: absolute;
top: 80px; /* ํค๋ ๋์ด ๋ฐ๋ก ์๋ */
left: 50%;
transform: translateX(-50%);
background-color: #fff;
min-width: 220px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
border-radius: 8px;
padding: 15px 0;
margin: 0;
list-style: none;
}
/* ๋ง์ฐ์ค ์ฌ๋ฆฌ๋ฉด ๋๋กญ๋ค์ด ๋ํ๋จ */
.n-nav-list > li:hover > ul.sub-menu {
display: block;
}
.n-nav-list > li > ul.sub-menu > li {
padding: 0;
margin: 0;
}
.n-nav-list > li > ul.sub-menu > li > a {
display: block;
padding: 10px 25px;
font-size: 14px;
font-weight: 500;
color: #444;
text-decoration: none;
text-align: center;
transition: all 0.2s;
}
.n-nav-list > li > ul.sub-menu > li > a:hover {
background-color: #f9f9f9;
color: #111;
font-weight: 700;
}
/* 3. ์ฐ์ธก ๋๊ตฌ ์์ญ (๊ฒ์ & ๋ค๊ตญ์ด) */
.n-header-tools {
display: flex;
align-items: center;
gap: 30px;
}
/* ๊ฒ์์ฐฝ ๋์์ธ */
.n-search-wrap {
display: flex;
align-items: center;
background-color: #f5f5f5;
border-radius: 30px;
padding: 5px 15px;
}
.n-search-field {
border: none;
background: transparent;
font-size: 14px;
width: 150px;
padding: 5px;
outline: none;
}
.n-search-submit {
background: transparent;
border: none;
cursor: pointer;
color: #111;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
/* ๋ค๊ตญ์ด ์ ํ๊ธฐ (์์ ์ง ์ฝ๋ ์ด์) */
.vos-simple-lang { position: relative; cursor: pointer; }
.vos-simple-lang .lang-current { display: flex; align-items: center; font-size: 15px; font-weight: 700; color: #111; gap: 5px; }
.vos-simple-lang .arrow { transition: transform 0.3s; display: flex; }
.vos-simple-lang .lang-dropdown { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #fff; min-width: 60px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-radius: 5px; padding: 5px 0; margin-top: 15px; list-style: none; }
.vos-simple-lang:hover .lang-dropdown { display: block; }
.vos-simple-lang:hover .arrow { transform: rotate(180deg); }
.vos-simple-lang .lang-dropdown li a { display: block; padding: 8px 10px; font-size: 13px; font-weight: 600; color: #333; text-align: center; text-decoration: none; }
.vos-simple-lang .lang-dropdown li a:hover, .vos-simple-lang .lang-dropdown li a.active { background: #F5CD4F; color: #111; }
/* ========================================================
๋ค๊ตญ์ด ๋๋กญ๋ค์ด ๋ง์ฐ์ค ์ดํ(๋๊น) ๋ฐฉ์ง์ฉ ํฌ๋ช
๋ค๋ฆฌ
======================================================== */
.vos-simple-lang .lang-dropdown::before {
content: "";
position: absolute;
top: -15px; /* ๊ธฐ์กด margin-top ๊ฐ๊ฒฉ๋งํผ ์๋ก ์ฌ๋ฆผ */
left: 0;
width: 100%;
height: 15px; /* ๋น ๊ณต๊ฐ์ ์ฑ์์ฃผ๋ ํฌ๋ช
์์ญ */
background: transparent;
}
/* ========================================================
Mobile Header & Menu Design (๋ฐ์ํ ์๋ฒฝ ์์ ๋ณธ)
======================================================== */
/* ๐ฅ 1. PC ๊ธฐ๋ณธ ์ํ: '์๋ก์ด ํค๋' ์ ์ฉ ๋ชจ๋ฐ์ผ ์์๋ง ์จ๊น (๊ธฐ์กด ํ
๋ง ๋ณดํธ) */
.n-site-header .mobile-only { display: none !important; }
.n-mobile-menu-wrap { display: none !important; }
/* ๐ฅ 2. ํ๋ธ๋ฆฟ & ๋ชจ๋ฐ์ผ (1024px ์ดํ) ์๋ ์ค์ */
@media (max-width: 1024px) {
.n-logo img { height: 31px!important; }
/* ๐จ ๊ธฐ์กด ํ
๋ง ์ถฉ๋ ๋ฐฉ์ง: .n-site-header ์์์๋ง ์๋ํ๊ฒ ๊ฒฉ๋ฆฌ */
.n-site-header .desktop-only { display: none !important; }
.n-site-header .n-mobile-toggle { display: flex !important; }
.n-header-inner { padding: 0 20px; height: 60px; }
/* ํ๋ฒ๊ฑฐ ๋ฒํผ ๋์์ธ */
.n-mobile-toggle {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 24px;
height: 18px;
cursor: pointer;
margin-left: 15px;
}
.n-mobile-toggle span {
display: block;
width: 100%;
height: 2px;
background-color: #111;
border-radius: 2px;
}
/* ๋ชจ๋ฐ์ผ ์ฌ๋ผ์ด๋ ๋ฉ๋ด ๋ํผ */
.n-mobile-menu-wrap {
display: block !important; /* ๋ชจ๋ฐ์ผ์์๋ ๋ ๋๋ง ์ผฌ */
position: fixed;
top: 0; left: 0;
width: 100%; height: 100vh;
z-index: 10000;
visibility: hidden;
opacity: 0;
transition: visibility 0.3s, opacity 0.3s;
}
/* JS๋ก .active ํด๋์ค๊ฐ ๋ถ์ผ๋ฉด ํ๋ฉด์ ๋ํ๋จ */
.n-mobile-menu-wrap.active {
visibility: visible;
opacity: 1;
}
/* ๋ฐํฌ๋ช
๊ฒ์์ ๋ฐฐ๊ฒฝ */
.n-mobile-overlay {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.6);
}
/* ์ค๋ฅธ์ชฝ์์ ์ฌ๋ผ์ด๋ ๋์ด ๋์ค๋ ํ์์ ๋ฉ๋ด ํจ๋ */
.n-mobile-menu-inner {
position: absolute;
top: 0; right: -100%; /* ์ฒ์์ ํ๋ฉด ๋ฐ ์ฐ์ธก์ ์จ๊น */
width: 80%; max-width: 350px;
height: 100%;
background-color: #fff;
transition: right 0.4s ease;
display: flex;
flex-direction: column;
z-index: 10001;
}
.n-mobile-menu-wrap.active .n-mobile-menu-inner {
right: 0; /* ์ฌ๋ผ์ด๋ ์ธ */
}
/* ๋ชจ๋ฐ์ผ ํจ๋ ์๋จ (๋ก๊ณ & ๋ซ๊ธฐ ๋ฒํผ) */
.n-mobile-header {
display: flex; justify-content: space-between; align-items: center;
padding: 20px; border-bottom: 1px solid #eee;
}
.n-mobile-close {
background: none; border: none; font-size: 32px; color: #111;
cursor: pointer; padding: 0; line-height: 1;
}
/* ๋ชจ๋ฐ์ผ ์์ฝ๋์ธ ๋ฉ๋ด ์คํ์ผ */
.n-mobile-nav { padding: 20px; overflow-y: auto; height: calc(100vh - 70px); }
.n-mobile-nav-list { list-style: none; padding: 0; margin: 0; }
.n-mobile-nav-list > li { border-bottom: 1px solid #f5f5f5; }
.n-mobile-nav-list > li > a {
display: flex; justify-content: space-between; align-items: center;
padding: 15px 0; font-size: 16px; font-weight: 700; color: #111; text-decoration: none;
}
/* ํ์ ๋ฉ๋ด๊ฐ ์๋ ๊ฒฝ์ฐ ํ์ดํ ์์ด์ฝ */
.n-mobile-nav-list > li.menu-item-has-children > a::after {
content: "โผ"; font-size: 10px; color: #999; transition: transform 0.3s;
}
.n-mobile-nav-list > li.menu-item-has-children.open > a::after {
transform: rotate(180deg); color: #F5CD4F;
}
/* ๋ชจ๋ฐ์ผ 2์ฐจ ๋ฉ๋ด (์จ๊น ์ฒ๋ฆฌ) */
.n-mobile-nav-list > li > ul.sub-menu { display: none; list-style: none; padding: 0 0 15px 15px; margin: 0; }
.n-mobile-nav-list > li.open > ul.sub-menu { display: block; }
.n-mobile-nav-list > li > ul.sub-menu > li > a { display: block; padding: 10px 0; font-size: 14px; font-weight: 500; color: #555; text-decoration: none; }
}
/*************************************
New Site Footer (PHP ์์ค์ฝ๋ ์๋ฒฝ ๋งค์นญ๋ณธ)
*************************************/
.n_site-footer {
width: 100%;
float: left;
margin-top: 0 !important;
padding-top: 100px !important;
background-image: url('n_images/footer_bg1.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* 1. PC: ๋์ 1800px ์์ด๋ ์ปจํ
์ด๋ */
.n_site-footer .inner {
width: 100%;
max-width: 1800px !important; /* ์ข์ฐ๋ก ์์ํ๊ฒ ํ์ฅ */
margin: 0 auto;
padding: 0 40px;
position: relative;
}
/* ํธํฐ ๋ก๊ณ */
.n_site-footer .inner .n_footer-top {
width: 100%;
float: left;
margin: 0 0 40px 0 !important;
}
.n_site-footer .inner .n_footer-top .site-title {
margin: 0;
}
.n_site-footer .inner .n_footer-top .site-title img {
width: auto;
height: 35px;
display: block;
}
/* 2. ํธํฐ ์ ๋ณด ์์ญ (๋ฐฐ๊ฒฝ ๋ฐ์ค ์ญ์ , ์ข์ฐ ๊ฐ๊ฒฉ ํ๋ณด) */
.n_site-footer .inner .n_footer-middle {
width: 100%;
display: flex !important;
justify-content: space-between !important;
align-items: flex-start !important;
gap: 80px !important;
}
/* ๋ฐ์ค ๋ฐฐ๊ฒฝ ํฌ๋ช
ํ ๋ฐ 50:50 ๋ถํ */
.n_site-footer .inner .n_footer-middle .clinic-info,
.n_site-footer .inner .n_footer-middle .cs-info {
width: 48% !important;
background-color: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
.n_site-footer .inner .n_footer-middle ul {
width: 100%;
padding: 0;
margin: 0;
list-style: none;
}
/* ๋ฆฌ์คํธ ํ ์ค ๋์์ธ (PC: ๊ฐ๋ก ์ ๋ ฌ) */
.n_site-footer .inner .n_footer-middle > div > ul > li {
width: 100%;
display: flex !important;
align-items: flex-start !important;
font-size: 15px !important;
color: #111 !important;
line-height: 1.6 !important;
margin-bottom: 12px !important;
}
/* ํญ๋ชฉ ์ ๋ชฉ (๋ํ์, ์ํธ๋ช
๋ฑ) */
.n_site-footer .inner .n_footer-middle > div > ul > li > strong {
width: 140px !important;
flex-shrink: 0;
font-weight: 700 !important;
}
/* ํญ๋ชฉ ๋ด์ฉ */
.n_site-footer .inner .n_footer-middle > div > ul > li > span {
flex: 1 !important;
text-align: left !important;
}
.n_site-footer .inner .n_footer-middle a {
text-decoration: none !important;
color: #111 !important;
}
/* ์ง๋ฃ์๊ฐ ์ธ๋ถ ๋ชฉ๋ก (์/ํ/๋ชฉ ๋ฑ) */
.n_site-footer .inner .n_footer-middle ul.cs-info-time {
flex: 1 !important;
}
.n_site-footer .inner .n_footer-middle ul.cs-info-time li {
display: flex !important;
width: 100% !important;
margin-bottom: 8px !important;
}
.n_site-footer .inner .n_footer-middle ul.cs-info-time li strong {
width: 120px !important;
flex-shrink: 0;
font-weight: 600 !important;
}
html[lang="zh-CN"] .n_site-footer .inner .n_footer-middle .cs-info > ul > li.kakaotalk {
display: none !important;
}
/* ๐ฅ 3. ํธํฐ ํ๋จ (์ ์๊ถ, ์ฝ๊ด, SNS) ์ค๋ฅ ์๋ฒฝ ์์ ํ */
.n_site-footer .inner .n_footer-bottom {
width: 100%;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
border-top: 1px solid rgba(0,0,0,0.1) !important;
padding: 30px 0 !important;
margin-top: 60px !important;
}
/* ์ ์๊ถ (๊ฐ์ฅ ์ผ์ชฝ ๊ณ ์ ) */
.n_site-footer .inner .n_footer-bottom p.copyright {
margin: 0 !important;
font-size: 14px !important;
color: #333 !important;
order: 1;
}
/* ๐ฅ ์ฝ๊ด ํ
์คํธ ๋ฉ๋ด (.n_footer-navigation ์ ์ฉ) */
.n_site-footer .inner .n_footer-bottom .n_footer-navigation {
margin-left: auto !important; /* ๋จ์ ๊ณต๊ฐ์ ๋ฐ์ด์ ์ค๋ฅธ์ชฝ์ผ๋ก ๋ฑ ๋ถ์ */
order: 2;
}
.n_site-footer .inner .n_footer-bottom .n_footer-navigation ul {
display: flex !important;
flex-direction: row !important; /* ๋ฌด์กฐ๊ฑด ๊ฐ๋ก๋ก ๋์ด! */
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
gap: 20px !important;
}
.n_site-footer .inner .n_footer-bottom .n_footer-navigation ul li {
margin: 0 !important;
padding: 0 !important;
}
.n_site-footer .inner .n_footer-bottom .n_footer-navigation ul li a {
color: #111 !important; /* ํ๋์ ๋งํฌ ๋ฎ์ด์ฐ๊ธฐ (๊ฒ์ ) */
text-decoration: none !important;
font-weight: 600 !important;
font-size: 14px !important;
}
/* SNS ์์ด์ฝ ๋ฉ๋ด (๊ฐ์ฅ ์ฐ์ธก) */
.n_site-footer .inner .n_footer-bottom .social-navigation {
order: 3;
margin-left: 30px !important;
}
.n_site-footer .inner .n_footer-bottom .social-navigation ul {
display: flex !important;
flex-direction: row !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
gap: 12px !important;
}
.n_site-footer .inner .n_footer-bottom .social-navigation ul li {
width: 26px !important;
height: 26px !important;
margin: 0 !important;
padding: 0 !important;
background-size: cover !important;
background-position: center !important;
}
/* ์๋ํ๋ ์ค๊ฐ ์ถ๋ ฅํ๋ ๋ถํ์ํ SNS ํ
์คํธ ์๋ฒฝ ์จ๊น */
.n_site-footer .inner .n_footer-bottom .social-navigation ul li a {
display: block !important;
width: 100% !important;
height: 100% !important;
text-indent: -9999px !important;
font-size: 0 !important;
color: transparent !important;
overflow: hidden !important;
white-space: nowrap !important;
}
.n_site-footer .inner .n_footer-bottom .social-navigation ul li.social-youtube { background-image: url('images/icons/icon-sns-youtube.png'); }
.n_site-footer .inner .n_footer-bottom .social-navigation ul li.social-instagram { background-image: url('images/icons/icon-sns-instagram.png'); }
.n_site-footer .inner .n_footer-bottom .social-navigation ul li.social-kakao { background-image: url('images/icons/icon-sns-kakaotalk.png'); }
.n_site-footer .inner .n_footer-bottom .social-navigation ul li.social-facebook { background-image: url('images/icons/icon-sns-facebook.png'); }
/* ========================================================
ํธํฐ ๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ ๋ฐ์ํ
======================================================== */
@media (max-width: 1024px) {
.n_site-footer .inner { padding: 0 30px !important; }
.n_site-footer .inner .n_footer-middle { gap: 40px !important; }
}
@media (max-width: 768px) {
.n_site-footer {
padding-top: 60px !important;
}
.n_site-footer .inner {
padding: 0 20px !important;
}
/* ๋ชจ๋ฐ์ผ ํต์ฌ 1: ๋ฐํฌ๋ช
๋ฐ์ค ์ ์ฉ */
.n_site-footer .inner .n_footer-middle {
flex-direction: column !important;
gap: 20px !important;
}
.n_site-footer .inner .n_footer-middle .clinic-info,
.n_site-footer .inner .n_footer-middle .cs-info {
width: 100% !important;
background-color: rgba(255, 255, 255, 0.45) !important;
padding: 25px 20px !important;
border-radius: 12px !important;
}
/* ๋ชจ๋ฐ์ผ ํต์ฌ 2: ์ ๋ชฉ์ ์ผ์ชฝ, ๋ด์ฉ์ ์ค๋ฅธ์ชฝ ์ ๋ ฌ */
.n_site-footer .inner .n_footer-middle > div > ul > li {
flex-direction: row !important;
align-items: flex-start !important;
justify-content: space-between !important;
margin-bottom: 12px !important;
}
.n_site-footer .inner .n_footer-middle > div > ul > li > strong {
width: auto !important;
flex-shrink: 0 !important;
margin-right: 15px !important;
font-size: 13px !important;
}
.n_site-footer .inner .n_footer-middle > div > ul > li > span {
width: auto !important;
text-align: right !important;
font-size: 13px !important;
word-break: keep-all !important;
}
/* ๋ชจ๋ฐ์ผ ํต์ฌ 3: ์ง๋ฃ์๊ฐ ์์ผ(์) / ์๊ฐ(์๋) ๋ถ๋ฆฌ */
.n_site-footer .inner .n_footer-middle ul.cs-info-time li {
flex-direction: column !important;
justify-content: flex-end !important;
align-items: flex-end !important;
margin-bottom: 15px !important;
}
.n_site-footer .inner .n_footer-middle ul.cs-info-time li strong {
width: auto !important;
margin-right: 0 !important;
margin-bottom: 3px !important;
font-size: 13px !important;
text-align: right !important;
}
.n_site-footer .inner .n_footer-middle ul.cs-info-time li span {
text-align: right !important;
}
.n_site-footer .inner .n_footer-middle ul.cs-info-time li span p {
text-align: right !important;
margin: 0 !important;
}
/* ๐ฅ ๋ชจ๋ฐ์ผ ํต์ฌ 4: ํ๋จ ๋ฉ๋ด ์๋ฒฝ ์ ๋ ฌ */
.n_site-footer .inner .n_footer-bottom {
flex-direction: column !important;
align-items: flex-start !important;
padding-bottom: 120px !important;
gap: 20px !important;
}
.n_site-footer .inner .n_footer-bottom .social-navigation {
order: 1 !important;
margin: 0 !important;
}
.n_site-footer .inner .n_footer-bottom .n_footer-navigation {
order: 2 !important;
margin: 0 !important;
}
.n_site-footer .inner .n_footer-bottom .n_footer-navigation ul {
flex-wrap: wrap !important;
gap: 15px !important;
}
.n_site-footer .inner .n_footer-bottom p.copyright {
order: 3 !important;
margin-top: 10px !important;
}
}
/* Layout */
.n_inner { max-width: 1200px; margin: 0 auto; padding: 80px 20px; }
/* Section 1: Hero Video */
/* Section 1: Full Width & Custom Ratio */
.n_hero_video {
width: 100%;
position: relative;
background: transparent url('n_images/home_video_bg1.jpg') no-repeat center / cover !important;
overflow: hidden;
}
.n_video_ratio_container {
position: relative;
width: 100%;
/* 1712 / 4096 = 0.41796... (์ฝ 41.8%) */
padding-top: 41.8%;
}
.n_video_ratio_container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* ์์์ด ์ปจํ
์ด๋๋ฅผ ๊ฝ ์ฑ์ฐ๋๋ก ์ค์ */
object-fit: cover;
/* ๋น๋ฉ์ค ๋ ํฐ๋ฐ์ค ๊ฐ์ ์ ๊ฑฐ๋ฅผ ์ํด ์ด์ง ์ค์ผ์ผ์
*/
transform: scale(1.02);
}
/* 1. ์ปจํ
์ด๋: ํ๋ฉด ์ ์ฒด ๋์ด์ ๋๋น๋ฅผ ๊ฝ ์ฑ์ฐ๊ณ ๋์น๋ ๋ถ๋ถ์ ์จ๊น */
.nn_hero_video {
width: 100%;
height: 100vh; /* ํ๋ฉด ๊ฝ ์ฐจ๊ฒ */
overflow: hidden;
position: relative;
background: transparent; /* ์์ ๋ก๋ฉ ์ ๊ฒ์์ ๋ฐฐ๊ฒฝ */
}
/* 2. ๋น๋์ค ๋ฐ์ค: ์ค์ ์ ๋ ฌ ๋ฐ ์ ๋ ์์น */
.nn_video_ratio_container {
position: absolute;
top: 0%;
left: 0%;
width: 100vw;
height: 56.25vw; /* 16:9 ๋น์จ ์ ์ง (100 / 16 * 9) */
min-height: 100vh;
min-width: 177.77vh; /* 16:9 ๋น์จ ์ ์ง (100 / 9 * 16) */
transform: translate(-50%, -50%);
}
/* 3. iframe: UI๋ฅผ ๊ฐ๋ฆฌ๊ธฐ ์ํด ์ฝ๊ฐ ๋ ํฌ๊ฒ ์ค์ */
.nn_video_ratio_container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* UI๋ฅผ ํ๋ฉด ๋ฐ์ผ๋ก ๋ฐ์ด๋ด๊ณ ์ถ๋ค๋ฉด ์๋ scale ์ฃผ์ ํด์ */
/* transform: scale(1.15); */
pointer-events: none;
}
/* Section 2 */
/* Layout & Slider */
.n_features_slider { width: 100%; overflow: hidden; padding: 60px 0 0 0; background: #fff; }
.n_slide_item { outline: none; }
/* ๋ชจ๋ ์ฌ๋ผ์ด๋: ์ผ์ชฝ ์ด๋ฏธ์ง, ์ค๋ฅธ์ชฝ ํ
์คํธ ๊ณ ์ */
.n_feature_item { display: flex !important; align-items: center; gap: 100px; padding: 0 5%; min-height: 750px; flex-direction: row !important; }
/* =======================================
์์ ๋ ์ด๋ฏธ์ง & ํ
์คํธ ๋ ์ด์์ ์์ญ
======================================= */
/* ์ด๋ฏธ์ง ์์ญ (flex: 1 ๋ก ์ ์ฐํ๊ฒ ๋ณ๊ฒฝ) */
.n_feat_img {
flex: 1;
opacity: 0;
transform: translateX(-100px);
transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);
text-align: center; /* ์ด๋ฏธ์ง๋ฅผ ์์ญ ์ค์์ ๋ฐฐ์น */
}
/* ๐ฅ ์ด๋ฏธ์ง ์์ฒด ํฌ๊ธฐ ์ถ์ (100% -> 60~65% ์์ค์ผ๋ก ์ค์) */
.n_feat_img img {
width: 100%; /* 2/3 ์์ค์ผ๋ก ์ถ์ */
max-width: 580px; /* ๋๋ฌด ์ปค์ง๋ ๊ฒ ๋ฐฉ์ง */
margin: 0 auto;
display: inline-block;
border-radius: 0 0 180px 0;
box-shadow: 20px 20px 50px rgba(0,0,0,0.05);
}
/* ํ
์คํธ ์คํ์ผ */
/* ํ
์คํธ ์์ญ (flex: 1 ๋ก ์ ์ฐํ๊ฒ ๋ณ๊ฒฝ) */
.n_feat_text {
flex: 1;
}
.n_feat_title { font-size: 80px; line-height: 1.1; margin-bottom: 25px; font-family: 'Pretendard', sans-serif; text-transform: uppercase; }
.n_feat_title span { display: block; }
.n_feat_title .w_800 { font-weight: 800; color: #111;letter-spacing:-1px; }
.n_feat_title .w_400 { font-weight: 300; color: #444;letter-spacing:-1px; }
.n_feat_sub { font-size: 26px; font-weight: 500; color: #222; margin-bottom: 40px; border: none; padding: 0; }
/* --- ํค์๋ ์จํด ๊ทธ๋ฃน --- */
.n_circle_group {
display: flex;
align-items: center;
margin: 50px 0;
position: relative;
padding-left: 10px; /* ์ ์ฒด ์์น ์ด์ง ์กฐ์ */
}
.n_circle {
width: 160px;
height: 160px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 15px;
font-weight: 600;
color: #fff;
line-height: 1.4;
box-shadow: 10px 10px 30px rgba(0,0,0,0.08);
position: relative;
word-break: keep-all; /* ๋จ์ด ๋จ์ ์ค๋ฐ๊ฟ์ผ๋ก ๊ฐ๋
์ฑ ํฅ์ */
transition: 0.3s;
}
/* [์์ ] ์์ ๊ฒน์นจ ์ ๋ ์กฐ์ :
๊ธฐ์กด -40px์์ -20px๋ก ๋ณ๊ฒฝํ์ฌ ๊ฒน์น๋ ๋ฉด์ ์ ์ค์์ต๋๋ค.
๊ธ์จ๊ฐ ์ฌ์ ํ ๊ฐ๋ ค์ง๋ค๋ฉด ์ด ๊ฐ์ ๋ ์ค์ฌ๋ณด์ธ์(์: -10px). */
.n_circle + .n_circle {
margin-left: -20px;
}
/* ์ ์์ ์ (ํ์ ๊ณ์ด) */
.c_side {
background: rgba(160, 160, 160, 0.85);
z-index: 1;
}
/* [์์ ] ๊ฐ์ด๋ฐ ์: ์์ฒญํ์ ์ปฌ๋ฌ(#f5cd4fb8) ์ ์ฉ ๋ฐ ๋ ์ด์ด ์ต์๋จ ๊ณ ์ */
.c_mid {
background: #f5cd4fb8;
z-index: 10; /* ๊ฐ์ฅ ์๋ก ์ฌ๋ฆผ */
transform: scale(1.05); /* ์ด์ง ํค์์ ๊ฐ์กฐํ๋ ๊ธ์จ๊ฐ ์ ๊ฐ๋ ค์ง๋๋ก ์กฐ์ */
color: #fff; /* ๋
ธ๋ ๋ฐฐ๊ฒฝ์๋ ์ด๋์ด ๊ธ์จ๊ฐ ๋ ์ ๋ณด์ผ ์ ์์ต๋๋ค. ํฐ์์ด ์ข์ผ์๋ฉด #fff๋ก ์ ์งํ์ธ์. */
}
/* ์ ์์ ํ
์คํธ ์ฌ๋ฐฑ ์ถ๊ฐ (๊ธ์จ ๊ฐ๋
์ฑ) */
.n_circle span {
padding: 0 15px;
display: block;
}
.n_feat_extra { font-size: 20px; color: #555; border-left: 4px solid #b4a064; padding-left: 15px; margin-top: 30px; }
/* ๋ชจ๋ ํ
์คํธ: ์ค๋ฅธ์ชฝ์์ ๋ฑ์ฅ ๊ณ ์ */
.n_ani_right { opacity: 0; transform: translateX(100px); transition: all 1s cubic-bezier(0.25, 1, 0.5, 1); }
/* ๐ฅ ์คํฌ๋กค ๋๋ฌ(.active) + ์ฌ๋ผ์ด๋ ๋์(.slick-active) ๋์ ์ถฉ์กฑ ์์๋ง ์ ๋๋ฉ์ด์
์คํ */
.n_features_slider.active .slick-active .n_feat_img {
opacity: 1;
transform: translateX(0);
}
.n_features_slider.active .slick-active .n_ani_right {
opacity: 1;
transform: translateX(0);
}
.delay_1 { transition-delay: 0.2s; }
.delay_2 { transition-delay: 0.4s; }
.delay_3 { transition-delay: 0.6s; }
.delay_4 { transition-delay: 0.8s; }
/* Slick Dots ์ปค์คํ
*/
.slick-dots { bottom: -50px; }
.slick-dots li button:before { font-size: 12px; color: #b4a064; }
/* ๋ฐ์ดํฐ ๊ธฐ์ค ๋ ์ง ํ
์คํธ ์คํ์ผ */
.n_feat_dates {
font-size: 15px;
color: #888;
line-height: 1.6;
margin-top: 20px;
padding-left: 10px;
}
/* ========================================================
Section 3 (VOS Signature) - ์นด๋ํ ํ๋ฅด๋ ์ฌ๋ผ์ด๋
======================================================== */
.n_signature_section {
padding: 120px 0;
background: #fafafa;
overflow: hidden;
}
.n_sig_header {
text-align: center;
margin-bottom: 60px;
}
.n_sig_main_title {
font-size: 45px;
font-weight: 800;
color: #111;
letter-spacing: -0.5px;
}
/* ์ฌ๋ผ์ด๋ ๋ํผ (์์ ์ฌ๋ฐฑ ์ด์ง ์ค) */
.n_sig_slider_wrap {
width: 100%;
max-width: 1920px;
margin: 0 auto;
}
/* ๊ฐ๋ณ ์นด๋ ์คํ์ผ */
.n_sig_card {
padding: 0 10px; /* ์นด๋ ์ฌ์ด ๊ฐ๊ฒฉ(Gap) 20px ์์ฑ */
outline: none;
}
/* ========================================================
[์์ ] ์นด๋ ๋ด๋ถ ์ ๋ ฌ ๋ฐ ๊ทธ๋ผ๋ฐ์ด์
์ค๋ฒ๋ ์ด
======================================================== */
.n_sig_card_inner {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
background-size: cover;
background-position: center;
border-radius: 0;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 40px;
overflow: hidden;
cursor: pointer;
text-decoration: none; /* ๐ฅ ์ถ๊ฐ: ๋งํฌ ๋ฐ์ค ์๊น ๋ฐฉ์ง */
}
/* ๐ฅ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง ์ ๋ง (ํ
์คํธ ๊ฐ๋
์ฑ์ ์ํ ํ๋จ ๊ทธ๋ผ๋ฐ์ด์
) */
.n_sig_overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* ์์ชฝ 40%๋ ํฌ๋ช
ํ๊ณ , ์๋๋ก ๊ฐ์๋ก ์ ์ 70% ๋๋์ ๊ฒ์์์ด ๋จ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.5) 100%);
transition: background 0.3s ease;
}
/* ๋ง์ฐ์ค ์ฌ๋ ธ์ ๋ ์ด์ง ๋ ์ด๋์์ง๋ ํจ๊ณผ */
.n_sig_card_inner:hover .n_sig_overlay {
background: linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,0.8) 100%);
}
/* ์นด๋ ์ ํ
์คํธ */
.n_sig_card_title {
position: relative;
z-index: 2;
color: #fff;
font-size: 32px;
font-weight: 700;
text-align: center;
line-height: 1.4;
letter-spacing: -1px;
}
/* --- ๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ ๋ฐ์ํ --- */
@media (max-width: 1024px) {
.n_sig_main_title { font-size: 32px; }
.n_sig_card_title { font-size: 24px; }
}
/* --- Section 4: ๋ฐฐ๊ฒฝ ๋ฐ ์ฌ๋ฐฑ --- */
.n_ba_section {
padding: 100px 0;
background-color: #e3e3e3;
width: 100%;
}
/* --- ์ต์๋จ ํ์ดํ --- */
.n_ba_top_header {
text-align: center;
margin-bottom: 60px;
}
.n_ba_main_title {
font-size: 54px;
font-weight: 300;
color: #111;
letter-spacing: -1px;
}
.n_ba_main_title strong {
font-weight: 800;
}
/* --- 3์ด ๋ ์ด์์ ๋ํผ --- */
.n_ba_3col_wrapper {
display: flex;
justify-content: center;
gap: 40px; /* ์ฌ๋ผ์ด๋ ์ฌ์ด ๊ฐ๊ฒฉ */
max-width: 1600px;
margin: 0 auto;
padding: 0 40px;
}
/* ๊ฐ๋ณ ์ฌ๋ผ์ด๋ ์์ดํ
*/
.n_ba_item {
flex: 1; /* 3๊ฐ๊ฐ ๋์ผํ ๋๋น ์ ์ */
max-width: 400px; /* ๋๋ฌด ์ปค์ง์ง ์๊ฒ ์ ํ */
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
/* ๋นํฌ์ ํํฐ ์ปจํ
์ด๋ */
.custom_ba_slider {
position: relative;
width: 100%;
aspect-ratio: 4 / 5; /* 3๊ฐ์ผ ๋ ์ธ๋ก๋ก ๊ธธ์ญํ๊ฒ ๋ณด์ด๋ ๋น์จ ์ค์ */
overflow: hidden;
cursor: ew-resize; /* ์ข์ฐ ํ์ดํ ์ปค์ */
}
.custom_ba_slider img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ์ ๋ณด ๋ฐ์ค ์คํ์ผ ์ ์ง */
.n_ba_info_box {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
width: 85%;
background: rgba(255, 255, 255, 0.45);
backdrop-filter: blur(10px);
padding: 20px;
border-radius: 15px;
text-align: center;
z-index: 20;
pointer-events: none; /* ๋๋๊ทธ ๋ฐฉํด ๋ฐฉ์ง */
}
.n_ba_info_box h4 { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 5px; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.n_ba_info_box p { font-size: 14px; color: #fff; }
/* --- ๋๋๊ทธ ํธ๋ค ๋์์ธ --- */
.n_ba_handle {
position: absolute; top: 0; bottom: 0; width: 4px; background: #fff;
left: 50%; transform: translateX(-50%); z-index: 10; pointer-events: none;
}
.n_ba_handle span {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 45px; height: 45px; background: #f5cd4f; border: 3px solid #fff; border-radius: 50%;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
display: flex; justify-content: center; align-items: center;
}
.n_ba_handle span::before {
content: 'โ โถ'; font-size: 10px; color: #fff; letter-spacing: -1px;
}
/* Section 5 Layout */
.n_rules_section {
padding: 60px 0 120px 0;
background: #fff;
width: 100%;
position: relative;
clear: both; /* ์ด์ ์น์
์ float ์ํฅ ์ฐจ๋จ */
}
/* ์๋จ ํ์ดํ ์์ญ */
.n_rules_header {
text-align: center;
margin-bottom: 80px;
width: 100%;
}
.n_rules_main_title {
font-size: 50px;
color: #111;
letter-spacing: -1px;
}
.n_rules_main_title .w_800 { font-weight: 800; margin-right: 10px; }
.n_rules_main_title .w_300 { font-weight: 300; }
/* ========================================================
Section 5 (VOS 3๋ ์์น) - ๋์์ธ ๋ฆฌ๋ด์ผ ๋ฐ์
======================================================== */
.n_rules_container {
display: flex;
justify-content: center;
align-items: center;
/* ๐ฅ ์นด๋ ์ฌ์ด์ ๊ฐ๊ฒฉ์ ๋ํญ ์ค์์ต๋๋ค (์ํ์๋ฉด 20px, 40px ๋ฑ์ผ๋ก ์กฐ์ ๊ฐ๋ฅ) */
gap: 30px;
max-width: 1400px; /* ์ ์ฒด 1800px๋ณด๋ค ์ด์ง ์ข๊ฒ ์ก์์ ์ค๋ฐ์กฐ๋ฐํ ๋๋ ๊ฐ์กฐ */
margin: 0 auto;
}
.n_rule_card {
flex: 1;
max-width: 400px; /* ์นด๋๊ฐ ๋ฌดํ์ ์ปค์ง์ง ์๋๋ก ์ต๋์น ๊ณ ์ */
}
/* ์ด๋ฏธ์ง์ ํ
์คํธ๋ฅผ ๋ด๋ ๊ธฐ์ค์ */
.n_rule_img_wrap {
position: relative;
width: 100%;
overflow: hidden;
/* ์์์ฒ๋ผ ์ ์ฌ๊ฐํ ๋น์จ์ ์ํ์๋ฉด ์๋ ์ฃผ์์ ํ์ด์ฃผ์ธ์ */
/* aspect-ratio: 1 / 1; */
}
.n_rule_img_wrap img {
width: 100%;
display: block;
height: auto;
object-fit: cover;
}
/* ๐ฅ ๊ธฐ์กด ํฐ์ ๋ ๋ฅผ ์ง์ฐ๊ณ ์์ฐ์ค๋ฌ์ด ๊ทธ๋ผ๋ฐ์ด์
๋ง์ผ๋ก ๊ต์ฒด */
.n_rule_title_overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; /* ์ด๋ฏธ์ง๋ฅผ ์ ์ฒด์ ์ผ๋ก ๋ฎ๋๋ก ์ค์ */
/* ์์ชฝ 50%๋ ํฌ๋ช
ํ๊ณ , ์๋๋ก ๊ฐ์๋ก ์ ์ 75% ๋๋์ ๊ฒ์์์ด ๋จ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 100%);
display: flex;
align-items: flex-end; /* ๊ธ์จ๋ฅผ ํ๋จ์ผ๋ก ๋ฐฐ์น */
justify-content: center;
padding-bottom: 25px; /* ๋ฐ๋ฅ์์ ์ด์ง ๋์์ฃผ๋ ์ฌ๋ฐฑ */
}
.n_rule_title_overlay h3 {
margin: 0;
font-size: 26px;
font-weight: 700;
color: #fff; /* ๐ฅ ์ด๋์ด ๊ทธ๋ผ๋ฐ์ด์
๋ฐฐ๊ฒฝ์ ๋ง์ถฐ ํฐ์ ๊ธ์จ๋ก ๋ณ๊ฒฝ */
letter-spacing: -1px;
text-shadow: 0 2px 10px rgba(0,0,0,0.3); /* ๊ธ์จ๊ฐ ๋ ๋๋ ทํ๊ฒ ๋ณด์ด๋๋ก ์ฝํ ๊ทธ๋ฆผ์ ์ถ๊ฐ */
}
/* --- ๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ ๋ฐ์ํ --- */
@media (max-width: 1024px) {
.n_rules_container { flex-direction: column; gap: 40px; }
.n_rule_card { max-width: 80%; } /* ๋ชจ๋ฐ์ผ์์๋ ์ด์ง ๋ ํฌ๊ฒ */
}
/* --- ๋ฑ์ฅ ์ ๋๋ฉ์ด์
์ด๊ธฐ ์ํ --- */
.n_reveal_up {
opacity: 0;
transform: translateY(50px);
transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1); /* ๋ ๋ถ๋๋ฌ์ด ๋ฑ์ฅ */
will-change: transform, opacity;
}
/* --- ํ์ฑํ ์ ์ํ (JS์์ .active ํด๋์ค ๋ถ์ฌ) --- */
.n_reveal_up.active {
opacity: 1;
transform: translateY(0);
}
/* --- [์ค์] ์์ฐจ์ Delay ์ค์ --- */
/* ํ์ดํ์ ์ฆ์ ๋ฑ์ฅ */
.n_rules_header.n_reveal_up.active { transition-delay: 0s; }
/* ์ด๋ฏธ์ง ์นด๋๋ค์ ์ผ์ชฝ๋ถํฐ ์์๋๋ก */
.delay_1 { transition-delay: 0.2s; } /* ์ฒซ ๋ฒ์งธ ์ด๋ฏธ์ง */
.delay_2 { transition-delay: 0.4s; } /* ๋ ๋ฒ์งธ ์ด๋ฏธ์ง */
.delay_3 { transition-delay: 0.6s; } /* ์ธ ๋ฒ์งธ ์ด๋ฏธ์ง */
/* ๋ ์ด์์ ์ ์ง ์ฝ๋ */
.n_rules_container {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap;
justify-content: center;
gap: 40px;
}
.n_rule_card { flex: 1; min-width: 0; text-align: center; }
/* ========================================================
Section View (๋ณ์ ์ธํ
๋ฆฌ์ด - ๊ฐ๋กํ 3๊ฐ ์ฌ๋ผ์ด๋)
======================================================== */
.n_view_section {
padding: 120px 0;
background: #fafafa; /* ํฐ์ ๋ฐฐ๊ฒฝ๋ค๊ณผ ๊ตฌ๋ถ๋๋๋ก ์์ฃผ ์ฐํ ํ์ ๋ฐฐ๊ฒฝ ์ ์ฉ */
overflow: hidden;
}
.n_view_header {
text-align: center;
margin-bottom: 60px;
}
.n_view_main_title {
font-size: 40px;
font-weight: 800;
color: #111;
line-height: 1.2;
margin-bottom: 25px;
letter-spacing: -0.5px;
}
/* ์ฌ๋ผ์ด๋ ์ ์ฒด ์์ญ ์ ํ ์์ด ํ์์ด๋์ ๊ฐ๊น๊ฒ ์ค์ */
.n_view_slider_wrap {
width: 100%;
margin: 0 auto;
}
/* ๊ฐ๋ณ ์นด๋ ๊ฐ๊ฒฉ ์กฐ์ */
.n_view_card {
padding: 0 15px; /* ์นด๋ ์ฌ์ด ๊ฐ๊ฒฉ(Gap) 30px */
outline: none;
}
.n_view_card_inner {
position: relative;
width: 100%;
/* ๐ฅ 1024x656 ๋น์จ(์ฝ 1.56:1)์ ์๋ฒฝํ๊ฒ ์ ์ง */
aspect-ratio: 1024 / 656;
background-size: cover;
background-position: center;
border-radius: 10px; /* ์ด์ง ๋ฅ๊ธ๊ฒ (๊ฐ์ง๊ฒ ์ข์ผ์๋ฉด 0์ผ๋ก ๋ณ๊ฒฝ) */
display: flex;
align-items: flex-end; /* ๊ธ์จ ํ๋จ ์ ๋ ฌ */
justify-content: center;
padding-bottom: 35px; /* ๋ฐ๋ฅ ์ฌ๋ฐฑ */
overflow: hidden;
cursor: grab; /* ์ฌ๋ผ์ด๋ ์ก๋ ์ปค์ ๋ชจ์ */
}
.n_view_card_inner:active { cursor: grabbing; }
/* ๐ฅ ํ๋จ ๊ทธ๋ผ๋ฐ์ด์
๋ง */
.n_view_overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* ์์ชฝ 50%๋ ํฌ๋ช
, ์๋๋ก ๊ฐ์๋ก ์ ์ ์ด๋์์ง */
background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 100%);
transition: background 0.3s ease;
}
.n_view_card_inner:hover .n_view_overlay {
background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,0.85) 100%);
}
/* ์นด๋ ํ
์คํธ */
.n_view_card_title {
position: relative;
z-index: 2;
color: #fff;
font-size: 24px;
font-weight: 600;
text-align: center;
margin: 0;
letter-spacing: -0.5px;
text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
/* --- ๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ ๋ฐ์ํ --- */
@media (max-width: 1024px) {
/*.n_view_main_title { font-size: 32px; }*/
.n_view_card_title { font-size: 20px; }
}
/* ========================================================
Section Point (VOS Dermatology Point - ์ค๋ช
ํฌํจ ํ๋ฅด๋ ์นด๋)
======================================================== */
.n_point_section {
padding: 120px 0;
background: #fff;
overflow: hidden;
}
.n_point_header {
text-align: center;
margin-bottom: 60px;
}
.n_point_main_title {
font-size: 40px;
font-weight: 800;
color: #111;
line-height: 1.2;
margin-bottom: 25px;
letter-spacing: -0.5px;
}
/* ์ฌ๋ผ์ด๋ ์ ์ฒด ์์ญ ์ ํ ์์ด ์์ด๋ํ๊ฒ ์ค์ */
.n_point_slider_wrap {
width: 100%;
margin: 0 auto;
}
/* ๊ฐ๋ณ ์นด๋ ๊ฐ๊ฒฉ ์กฐ์ */
.n_point_card {
padding: 0 15px; /* ์นด๋ ์ฌ์ด ๊ฐ๊ฒฉ(Gap) 30px */
outline: none;
}
.n_point_card_inner {
position: relative;
width: 100%;
aspect-ratio: 1 / 1; /* ์ ์ฌ๊ฐํ ๋น์จ */
background-size: cover;
background-position: center;
border-radius: 0; /* ๋ฅ๊ทผ ๋ชจ์๋ฆฌ๋ฅผ ์ํ์๋ฉด 15px ์ ๋๋ก ๋ณ๊ฒฝ */
display: flex;
align-items: flex-end; /* ํ
์คํธ ํ๋จ ์ ๋ ฌ */
justify-content: center;
padding-bottom: 35px; /* ํ๋จ ์ฌ๋ฐฑ ๋๋ํ๊ฒ */
overflow: hidden;
cursor: pointer;
}
/* ๐ฅ ๊ธ์จ๊ฐ ๋ ์ค์ด๋ฏ๋ก ๊ทธ๋ผ๋ฐ์ด์
์ด ์กฐ๊ธ ๋ ์์์๋ถํฐ ์ง๊ฒ ๊น๋ฆฌ๋๋ก ์ค์ */
.n_point_overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,0.85) 100%);
transition: background 0.3s ease;
}
.n_point_card_inner:hover .n_point_overlay {
background: linear-gradient(to bottom, rgba(0,0,0,0) 10%, rgba(0,0,0,0.9) 100%);
}
/* ํ
์คํธ ์ปจํ
์ด๋ */
.n_point_text {
position: relative;
z-index: 2;
text-align: center;
padding: 0 20px; /* ์ข์ฐ ์ฌ๋ฐฑ์ ์ฃผ์ด ๊ธ์จ๊ฐ ๊ฐ์ฅ์๋ฆฌ์ ๋ถ์ง ์๊ฒ ํจ */
}
/* ํ์ดํ */
.n_point_text h3 {
font-size: 24px;
font-weight: 700;
color: #fff;
margin: 0 0 12px 0; /* ํ์ดํ๊ณผ ์ค๋ช
์ฌ์ด ๊ฐ๊ฒฉ */
letter-spacing: -0.5px;
word-break: keep-all; /* ๋จ์ด ๋จ์๋ก ์ค๋ฐ๊ฟ */
text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
/* ์ค๋ช
๋ฌธ */
.n_point_text p {
font-size: 16px;
font-weight: 400;
color: #eaeaea; /* ์์ ํฐ์๋ณด๋ค ์ด์ง ํค์ ๋ฎ์ถฐ ํ์ดํ์ ๊ฐ์กฐ */
margin: 0;
line-height: 1.4;
word-break: keep-all;
}
/* --- ๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ ๋ฐ์ํ --- */
@media (max-width: 1024px) {
/*.n_point_main_title { font-size: 32px; }*/
.n_point_text h3 { font-size: 20px; margin-bottom: 8px; }
.n_point_text p { font-size: 14px; }
}
/* ========================================================
Section 6 (VOSTV ์ ํ๋ธ ๋ ์ด์์ ์ ์ฒด)
======================================================== */
.n_youtube_section {
background: #f4f4f4;
width: 100%;
padding-bottom: 120px;
position: relative;
}
/* --- ์๋จ ํ์ดํ & ๋ฒํผ ๋ํผ --- */
.n_yt_header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 50px;
padding-right: 5%;
}
/* ์ผ์ชฝ ํ์ดํธ ํญ (๋ผ์ด๋ ๋์์ธ) */
.n_yt_title_box {
background: #fff;
padding: 30px 60px 30px 40px;
border-radius: 0 0 60px 0;
display: flex;
align-items: baseline;
gap: 30px;
position: relative;
}
/* ์ผ์ชฝ ๋๊น์ง ํฐ์ ๋ฐฐ๊ฒฝ ์ฑ์ฐ๊ธฐ (Bleed ํจ๊ณผ) */
.n_yt_title_box::before {
content: '';
position: absolute;
top: 0;
right: 100%;
width: 100vw;
height: 100%;
background: #fff;
}
.n_yt_main_title {
font-size: 55px;
color: #111;
letter-spacing: -1px;
line-height: 1;
}
.n_yt_main_title .w_800 { font-weight: 800; }
.n_yt_main_title .w_300 { font-weight: 300; margin-left: 5px; }
.n_yt_sub_count {
font-size: 20px;
color: #666;
font-weight: 500;
}
/* ์ฐ์ธก ์ ํ๋ธ ์ฑ๋ ๋ฒํผ */
.n_yt_channel_btn {
display: inline-flex;
align-items: center;
background: #000;
color: #ffffff !important;
padding: 12px 35px;
border-radius: 50px;
font-size: 18px;
font-weight: 600;
text-decoration: none !important;
gap: 12px;
transition: all 0.3s ease;
}
.n_yt_channel_btn:hover,
.n_yt_channel_btn:focus,
.n_yt_channel_btn:active,
.n_yt_channel_btn:visited {
background: #222;
color: #ffffff !important;
transform: translateY(-3px);
}
/* ์ ํ๋ธ ๋นจ๊ฐ์ ํ๋ ์ด ์์ด์ฝ ๊ตฌํ */
.yt_icon {
display: inline-flex;
justify-content: center;
align-items: center;
background: #f00;
color: #fff;
width: 30px;
height: 22px;
border-radius: 6px;
font-size: 12px;
padding-left: 2px;
}
/* --- ์์ ์ฝํ
์ธ ์์ญ (์ข์ธก 6 : ์ฐ์ธก 4 ๋น์จ) --- */
.n_yt_content {
display: flex;
gap: 40px;
max-width: 1600px;
margin: 0 auto;
padding: 0 40px;
}
/* ๋ฉ์ธ ์์ (์ผ์ชฝ) */
.n_yt_main_video {
flex: 0 0 58%;
border-radius: 20px;
overflow: hidden;
}
.n_yt_main_video img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.n_yt_main_video:hover img { transform: scale(1.03); }
/* ์๋ธ ์์ ๋ฆฌ์คํธ (์ค๋ฅธ์ชฝ) */
.n_yt_sub_list {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* ๐ฅ ํ๋์ ๊ธฐ๋ณธ ๋งํฌ ๋ฐ์ค ์ ์๊ธฐ๊ฒ ๊ฐ์ ๋ฐฉ์ด */
.n_yt_sub_item {
display: flex;
gap: 25px;
align-items: center;
text-decoration: none !important;
transition: transform 0.3s ease;
}
.n_yt_sub_item:hover { transform: translateX(-10px); }
/* ์๋ธ ์์ ์ธ๋ค์ผ */
.n_yt_sub_img {
flex: 0 0 35%;
border-radius: 12px;
overflow: hidden;
}
.n_yt_sub_img img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
}
/* ์๋ธ ์์ ํ
์คํธ */
.n_yt_sub_text { flex: 1; }
.n_yt_sub_text h4 {
font-size: 22px;
font-weight: 700;
color: #111 !important; /* ํ๋์ ๋งํฌ ๋ฎ์ด์ฐ๊ธฐ */
margin: 0 0 8px 0;
line-height: 1.3;
word-break: keep-all;
}
.n_yt_sub_text p {
font-size: 16px;
color: #666 !important;
margin: 0;
line-height: 1.5;
word-break: keep-all;
}
/* --- ๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ ๋ฐ์ํ --- */
@media (max-width: 1024px) {
.n_yt_header { flex-direction: column; align-items: flex-start; gap: 20px; padding-right: 0; }
.n_yt_title_box { padding: 20px 40px 20px 20px; border-radius: 0 0 40px 0; }
.n_yt_content { flex-direction: column; padding: 0 20px; }
.n_yt_main_video { flex: none; width: 100%; margin-bottom: 30px; }
.n_yt_sub_list { gap: 20px; }
}
/* ========================================================
Section History (1/4 ํ
์คํธ + 3/4 ์ฌ๋ผ์ด๋ ๋ ์ด์์)
======================================================== */
.n_history_section {
padding: 120px 0;
background: #fff;
overflow: hidden;
}
/* ์ข์ฐ ๋ถํ ๋ ์ด์์ ์ปจํ
์ด๋ */
.n_history_layout {
display: flex;
align-items: center; /* ์ธ๋ก ์ค์ ์ ๋ ฌ */
justify-content: space-between;
width: 100%;
flex-wrap: nowrap; /* ์ ๋ ๋ฐ์ผ๋ก ๋จ์ด์ง์ง ์๊ฒ ๊ฐ์ ๊ณ ์ */
}
/* --- ์ผ์ชฝ ์์ญ (1/4 ํ
์คํธ ํํธ) --- */
.n_history_left {
width: 25%; /* ์ ํํ 25% ํ ๋น */
padding-right: 60px; /* gap ๋์ padding์ผ๋ก ๊ฐ๊ฒฉ ๋ถ์ฌ */
box-sizing: border-box;
}
/* ๋๋ฝ๋์๋ ํ
์คํธ ์คํ์ผ ์ถ๊ฐ! */
.n_history_main_title {
font-size: 40px;
font-weight: 800;
color: #111;
line-height: 1.2;
margin-bottom: 25px;
letter-spacing: -0.5px;
}
.n_history_sub_text {
font-size: 16px;
color: #666;
line-height: 1.6;
margin-bottom: 40px;
word-break: keep-all;
}
.n_history_more {
font-size: 15px;
color: #333;
font-weight: 600;
text-decoration: none;
transition: color 0.3s;
}
.n_history_more:hover {
color: #b4a064;
}
/* --- ์ค๋ฅธ์ชฝ ์ฌ๋ผ์ด๋ ์์ญ (3/4 ๊ฐค๋ฌ๋ฆฌ ํํธ) --- */
.n_history_right {
width: 75%; /* ์ ํํ 75% ํ ๋น */
min-width: 0; /* ๐ฅ Flexbox ๋ด ์ฌ๋ผ์ด๋ ํญ์ฃผ ๋ฐฉ์ง */
}
/* ๊ฐ๋ณ ์นด๋ ๋์์ธ */
.n_history_card {
padding: 0 15px;
box-sizing: border-box;
outline: none;
}
/* ์ด๋ฏธ์ง ์์ญ */
.n_history_img {
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
margin-bottom: 15px;
background: #f5f5f5;
border-radius: 5px;
}
.n_history_img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.n_history_card:hover .n_history_img img {
transform: scale(1.05);
}
/* ํ๋จ ํ
์คํธ */
.n_history_card_title {
font-size: 18px;
font-weight: 700;
color: #222;
text-align: left;
margin: 0;
line-height: 1.4;
word-break: keep-all;
}
/* ์ฌ๋ผ์ด๋ ํ๋จ ์ (Dots) ์์น ์กฐ์ */
.n_history_slider .slick-dots {
bottom: -40px;
text-align: left;
padding-left: 15px;
}
/* --- ๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ ๋ฐ์ํ (๋๋ฝ ๋ฐฉ์ง) --- */
@media (max-width: 1024px) {
.n_history_layout {
flex-direction: column; /* ๋ชจ๋ฐ์ผ์์๋ ์์๋ ๋ฐฐ์น๋ก ๋ณ๊ฒฝ */
}
.n_history_left {
width: 100%;
padding-right: 0;
margin-bottom: 40px;
text-align: center; /* ๋ชจ๋ฐ์ผ์์ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ด ๊น๋ํจ */
}
.n_history_right {
width: 100%;
}
}
/* --- Section 7: ๋ฐฐ๊ฒฝ ์์ญ --- */
.n_info_section {
width: 100%;
padding: 120px 0; /* ์ํ ์ฌ๋ฐฑ์ผ๋ก ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๊ฐ ์ถฉ๋ถํ ๋ณด์ด๊ฒ ํจ */
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
position: relative;
}
/* ๋ด๋ถ 1800px ์ปจํ
์ด๋ */
.n_info_section .n_inner_1800 {
display: flex;
align-items: center; /* ๋ฐ์ค๋ฅผ ์์ง ์ค์์ ๋ฐฐ์น */
max-width: 1800px;
margin: 0 auto;
padding: 0 40px;
}
/* --- ์ผ์ชฝ ํ์ดํธ ์ ๋ณด ๋ฐ์ค --- */
.n_info_box {
width: 100%;
max-width: 480px; /* ๋ฐ์ค ๊ฐ๋ก ํญ ์ ํ */
background: rgba(255, 255, 255, 0.6); /* ์ด์ง ํฌ๋ช
ํ ํฐ์ ๋ฐฐ๊ฒฝ */
backdrop-filter: blur(8px);
border: 1px solid rgba(0, 0, 0, 0.15); /* ์์์ ์์ ํ
๋๋ฆฌ */
padding: 60px 50px;
box-shadow: 10px 20px 40px rgba(0, 0, 0, 0.1);
}
/* ๋ก๊ณ ๋ฐ ๊ตฌ๋ถ์ */
.n_info_logo {
margin-bottom: 30px;
}
.n_info_logo img {
max-width: 200px;
height: auto;
display: block;
}
.n_info_divider {
border: 0;
height: 1px;
background: #ccc; /* ๋ก๊ณ ์๋ ํ์ ์ */
margin-bottom: 30px;
}
/* ํ
์คํธ ๋ํ
์ผ */
.info_row {
margin-bottom: 25px;
}
.info_row h4 {
font-size: 18px;
font-weight: 800;
color: #111;
margin-bottom: 8px;
}
.info_row p {
font-size: 18px;
color: #333;
word-break: keep-all;
}
.info_row p.phone_num {
font-size: 42px; /* ์ ํ๋ฒํธ ํฌ๊ฒ ๊ฐ์กฐ */
font-weight: 800;
color: #111;
letter-spacing: -1px;
}
/* --- ํ๋จ ๋ฒํผ (๋
ธ๋ / ํ์) --- */
.n_info_btns {
display: flex;
gap: 15px;
margin-top: 40px;
}
.n_info_btns a {
flex: 1;
text-align: center;
padding: 16px 0;
border-radius: 50px; /* ๋ฅ๊ทผ ์์ฝ ํํ */
font-size: 17px;
font-weight: 700;
text-decoration: none !important; /* ๋ฐ์ค ๋ฐฉ์ง */
transition: all 0.3s ease;
}
.btn_yellow {
background: #fbd65b !important; /* ๋ฐฐ๊ฒฝ์ ๊ฐ์ ์ ์ฉ */
color: #111 !important; /* ํ
์คํธ ์์ ๊ฐ์ ์ ์ฉ (๊ฒ์์) */
}
.btn_yellow:hover {
background: #e5c048 !important;
}
.btn_gray {
background: #7a7a7a !important; /* ๋ฐฐ๊ฒฝ์ ๊ฐ์ ์ ์ฉ */
color: #fff !important; /* ํ
์คํธ ์์ ๊ฐ์ ์ ์ฉ (ํฐ์) */
}
.btn_gray:hover {
background: #666 !important;
}
/* --- ๋ชจ๋ฐ์ผ ๋์ --- */
@media (max-width: 768px) {
.n_info_section { padding: 60px 0; }
.n_info_box { max-width: 100%; padding: 40px 30px; }
.info_row p.phone_num { font-size: 32px; }
.n_info_btns { flex-direction: column; }
}
/* ========================================================
HOME ํ๋ฉด - ์ด๋ฏธ์ง ์ฌ์ด์ฆ ์ต์ ํ (์ถ์)
======================================================== */
/* Section 2 (ํน์ฅ์ ์ฌ๋ผ์ด๋ ์ด๋ฏธ์ง) */
.n_feat_img {
max-width: 55%; /* ๊ธฐ์กด 80%์์ 2/3 ์์ค์ผ๋ก ๋ํญ ์ถ์ */
margin: 0 auto; /* ํด๋น ์์ญ(์ผ์ชฝ 50% ๊ณต๊ฐ) ์์์ ์ค์ ์ ๋ ฌ ์ ์ง */
}
/* Section 3 (์๊ทธ๋์ฒ ์์ ์ด๋ฏธ์ง) */
.n_sig_img {
max-width: 85%;
margin: 0 auto;
}
/* Section 4 (Before & After ์ด๋ฏธ์ง) */
.n_ba_item {
max-width: 90%; /* B&A ์ธ๋ค์ผ ๋ฐ์ค ํฌ๊ธฐ ์ด์ง ์ถ์ */
margin: 0 auto;
}
/* Section 5 (3๋ ์์น ์ํ ์ด๋ฏธ์ง) */
.n_rule_img {
max-width: 75%; /* ๊ณผ๋ํ๊ฒ ์ปธ๋ ์์น ์ด๋ฏธ์ง๋ฅผ ์๋ดํ๊ฒ ์ถ์ */
margin: 0 auto 30px;
}
/* Section 6 (์ ํ๋ธ ์์ ์ธ๋ค์ผ) */
.n_yt_main_video {
max-width: 90%; /* ๋ฉ์ธ ์์ ํฌ๊ธฐ ์ถ์ */
margin: 0 auto;
}
.n_yt_sub_img {
max-width: 150px; /* ์ฐ์ธก ์๋ธ ์ธ๋ค์ผ ์ต๋ ๋๋น ๊ณ ์ */
}
/* ========================================================
ํ๋ฅด๋ ํ
์คํธ (Marquee - Right) ํจ๊ณผ
======================================================== */
.n_marquee_section {
width: 100%;
overflow: hidden; /* ํ๋ฉด ๋ฐ์ผ๋ก ๋๊ฐ๋ ๊ธ์จ๋ฅผ ๊น๋ํ๊ฒ ์จ๊น */
background: #fff; /* ๋ฐฐ๊ฒฝ์ (ํ์์ ๋ณ๊ฒฝ) */
padding: 60px 0; /* ์์๋ ์ฌ๋ฐฑ */
display: flex;
}
.n_marquee_track {
display: flex;
white-space: nowrap; /* ๊ธ์จ๊ฐ ์ค๋ฐ๊ฟ๋์ง ์๊ณ ํ ์ค๋ก ์ญ ์ด์ด์ง๊ฒ ํจ */
/* 40์ด ๋์ ์ผ์ ํ ์๋(linear)๋ก ๋ฌดํ(infinite) ๋ฐ๋ณต */
animation: marqueeLeft 120s linear infinite;
}
.n_marquee_text {
font-size: 130px; /* ๊ธ์จ ํฌ๊ธฐ (์์ํ๊ฒ ํผ์งํ๊ฒ) */
font-weight: 800; /* ๊ธ์จ ๊ตต๊ธฐ */
color: #fed201; /* ์์ฒญํ์ VOS ๋
ธ๋์ */
padding-right: 20px; /* ๋ฐ๋ณต๋๋ ํ
์คํธ ์ฌ์ด์ ์ถ๊ฐ ์ฌ๋ฐฑ */
font-family: 'Pretendard', sans-serif;
/* ๐ก ์์์ ๊ธ์จ์ฒ๋ผ ๋ฐฐ๊ฒฝ์ ์์ํ๊ฒ ๊น๋ฆฌ๊ธธ ์ํ์๋ฉด ์๋ ํฌ๋ช
๋๋ฅผ ํ์ฑํํ์ธ์! */
/* opacity: 0.3; */
}
/* ์ค๋ฅธ์ชฝ์ผ๋ก ํ๋ฅด๋ ์ ๋๋ฉ์ด์
ํคํ๋ ์ */
@keyframes marqueeLeft {
0% { transform: translateX(0%); } /* ์ ์๋ฆฌ์์ ์์ */
100% { transform: translateX(-50%); } /* ์ผ์ชฝ์ผ๋ก ์ ๋ฐ๋งํผ ์ด๋ํ๋ฉฐ ๋ฌดํ ๋ฃจํ */
}
/* --- ๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ ๋ฐ์ํ --- */
@media (max-width: 1024px) {
.n_marquee_text { font-size: 60px; }
.n_marquee_section { padding: 40px 0; }
}
/* ========================================================
About VOS ํ์ด์ง ์คํ์ผ
======================================================== */
/* --- Section 1: Hero ํ์ดํ --- */
/* --- Section 1: Hero ํ์ดํ ๋ฐ ๋ฐฐ๊ฒฝ Fade-in --- */
.n_about_hero {
width: 100%;
height: 790px; /* ์์ ํ์ ๋์ด ๋ฐ์ */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
position: relative;
/* [์ถ๊ฐ๋ ๋ถ๋ถ] ๋ฐฐ๊ฒฝ Fade-in ์ ๋๋ฉ์ด์
*/
opacity: 0; /* ์ฒ์์ ์จ๊น */
animation: heroBgFade 1.5s ease-in-out forwards;
}
/* ๋ฐฐ๊ฒฝ Fade-in ํคํ๋ ์ (์ค๋ฅด๋ฅต ๋ํ๋๊ธฐ) */
@keyframes heroBgFade {
0% {
opacity: 0;
/* ์ํ์ ๋ค๋ฉด ์ฌ๊ธฐ์ background-size: 110%; ๋ฅผ ๋ฃ๊ณ
100%์ background-size: 100%; ๋ฅผ ๋ฃ์ผ๋ฉด ์ด์ง ์ถ์๋๋ฉด์ ๋ฑ์ฅํ๋ ๊ณ ๊ธ ํจ๊ณผ๋ ๊ฐ๋ฅํฉ๋๋ค! */
}
100% {
opacity: 1;
}
}
/* 1800px ์ปจํ
์ด๋ ์ ์ง */
.n_about_hero .n_inner_1800 {
width: 100%;
max-width: 1800px;
margin: 0 auto;
padding: 0 40px;
}
/* ํ
์คํธ ์คํ์ผ */
.n_about_main_title {
font-size: 70px; /* ํผ์งํ ํ์ดํ */
font-weight: 800;
letter-spacing: -1px;
margin: 0;
}
.n_about_main_title .t_white {
color: #fff;
margin-right: 15px;
}
.n_about_main_title .t_yellow {
color: #fbd65b; /* VOS ๋
ธ๋์ ํฌ์ธํธ */
}
/* --- Hero ๋ค์ด๋๋ฏน ์ ๋๋ฉ์ด์
(๊ต์ฐจ ๋ฑ์ฅ) --- */
/* 1. ๋ํผ ์์ฒด์ ํฌ๋ช
๋/์ด๋์ ์ ๊ฑฐ (๊ฐ๋ณ ๊ธ์๊ฐ ์์ง์ด๋๋ก ์ธํ
) */
.n_hero_fade_in {
display: block;
}
/* 2. ๊ฐ๋ณ ๊ธ์(span)์ ๊ธฐ๋ณธ ํธ๋์ง์
์์ฑ ๋ถ์ฌ */
.n_about_main_title span {
display: inline-block;
opacity: 0;
/* ๊ณตํต ํธ๋์ง์
(transform๊ณผ opacity๋ง ์ค์ ) */
transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 1.2s ease;
will-change: transform, opacity, color;
}
/* 3. ์ด๊ธฐ ์์น ๋ฐ ์์ ์ค์ */
/* About (ํ๋จ์์ ๋๊ธฐ) */
.n_about_main_title .t_white {
transform: translateY(100px);
color: #ffffff; /* ํ์คํ๊ฒ ํฐ์ ์ง์ */
}
/* VOS (์๋จ์์ ๋๊ธฐ) */
.n_about_main_title .t_yellow {
transform: translateY(-100px);
color: #ffffff; /* ๐ฅ ํต์ฌ 1: ๋๊ธฐ ์ํ์ผ ๋๋ VOS๋ ๋ฌด์กฐ๊ฑด ํฐ์! */
}
/* 4. ํ์ฑํ(active) ์ ์ ์๋ฆฌ๋ก ์ด๋ ๋ฐ ์ต์ข
์์ ์ง์ */
.n_hero_fade_in.active .t_white {
opacity: 1;
transform: translateY(0);
}
.n_hero_fade_in.active .t_yellow {
opacity: 1;
transform: translateY(0);
color: #fdd000; /* ๐ฅ ํต์ฌ 2: ๋์ฐฉํ์ ๋ ๋
ธ๋์์ด ๋๋๋ก ๋ชฉํ ์์ ์ง์ */
}
/* 5. VOS์ ์์ฐจ(Delay) ๋ฐ ์์ ํ์ด๋์ธ ํ์ด๋ฐ ์ธ๋ฐ ์กฐ์ */
.n_hero_fade_in.active .t_yellow {
/* ๐ฅ ํต์ฌ 3: ์์ฑ๋ณ๋ก ๋๋ ์ด ์๊ฐ์ ๋ค๋ฅด๊ฒ ์ค์ !
- transform/opacity(์ด๋/๋ฑ์ฅ): 0.15์ด ๋ค์ 1.2์ด ๋์ ํตํต ํ๊ธฐ๋ฉฐ ๋ฑ์ฅ
- color(์์ ๋ณํ): ์ด๋์ด ๊ฑฐ์ ๋๋ ๋์ฏค์ธ '1.2์ด ๋ค'์ ์์ํด์ 0.8์ด ๋์ ๋
ธ๋์์ผ๋ก ๋ฌผ๋ฆ */
transition:
transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s,
opacity 1.2s ease 0.15s,
color 0.8s ease 1.2s;
}
/* ๋ชจ๋ฐ์ผ ๋์ */
@media (max-width: 768px) {
.n_about_hero { height: 400px; background-position: 65% center!important;}
.n_about_main_title { font-size: 45px; }
}
/* --- Section 2: Layout --- */
.n_about_sec2 {
padding: 150px 0;
background: #fff;
overflow: hidden; /* ์ด๋ฏธ์ง๊ฐ ์ค๋ฅธ์ชฝ ๋ฐ์์ ๋ค์ด์ฌ ๋ ๊ฐ๋ก ์คํฌ๋กค ๋ฐฉ์ง */
}
/* ์๋จ ํ์ดํ */
.n_sec2_top { text-align: center; margin-bottom: 100px; }
.n_sec2_title { font-size: 55px; font-weight: 800; color: #222; margin-bottom: 20px; line-height: 1.2; letter-spacing: 1px; }
.n_sec2_sub { font-size: 22px; color: #555; font-weight: 400; }
/* --- ๋ณธ๋ฌธ ๋ ์ด์์ (1800px๋ก ํ์ฅ) --- */
.n_sec2_content {
display: flex;
align-items: center;
width: 100%; /* ๋ถ๋ชจ(n_inner_1800)์ ๋๋น๋ฅผ ๊ฝ ์ฑ์ */
gap: 60px; /* ํ
์คํธ์ ์ด๋ฏธ์ง ์ฌ์ด์ ๊ฐ๊ฒฉ์ 60px๋ก ํต์ผ */
}
.n_sec2_text_wrap { flex: 1; } /* ํ
์คํธ๊ฐ ๋๋ฌด ํผ์ง์ง ์๊ฒ ํญ ์ ์ง */
.n_sec2_img_wrap { flex: 1; } /* ์ด๋ฏธ์ง ํฌ๊ธฐ๋ฅผ ์กฐ๊ธ ๋ ์ฌ์ ๋กญ๊ฒ ํ๋ณด */
.n_sec2_img_wrap img { width: 100%; height: auto; display: block; }
/* ํ
์คํธ ๋ํ
์ผ ๋ฑ์ ๊ธฐ์กด๊ณผ ๋์ผ */
.n_sec2_text_wrap h3 { font-size: 34px; font-weight: 400; color: #111; margin-bottom: 40px; letter-spacing: -1px; }
.n_sec2_text_wrap h3 strong { font-weight: 800; }
.n_sec2_text_wrap p { font-size: 18px; color: #444; line-height: 1.8; margin-bottom: 25px; word-break: keep-all; }
.n_sec2_text_wrap p.n_highlight { font-size: 24px; font-weight: 800; color: #fdd000; margin: 50px 0 30px; }
/* =======================================
โจ ์ ๋๋ฉ์ด์
ํจ๊ณผ (๋ฌดํ ๋ฃจํ ์ค์ํ ์ ์ฉ)
======================================= */
.n_text_swap {
position: relative;
display: inline-block;
min-width: 140px;
text-align: left;
}
.t_you, .t_vos {
display: inline-block;
/* transition์ ํคํ๋ ์์์ ์ ์ดํ๋ฏ๋ก ์ญ์ */
}
.t_vos {
position: absolute;
left: 0;
top: 0;
opacity: 0;
color: #fdd000;
}
/* ์คํฌ๋กค ๊ฐ์ง ์ 4์ด ์ฃผ๊ธฐ๋ก ๋ฌดํ ๋ฐ๋ณต(infinite) ์์ */
.n_reveal_fade.active .n_text_swap .t_you {
animation: loopYou 4s infinite;
}
.n_reveal_fade.active .n_text_swap .t_vos {
animation: loopVos 4s infinite;
}
/* YOU ๋ฌดํ ๋ฐ๋ณต ํคํ๋ ์ */
@keyframes loopYou {
0%, 35% { opacity: 1; transform: translateY(0); } /* ์ ์ค์ ์ ์ง */
40%, 45% { opacity: 0; transform: translateY(-20px); } /* ์๋ก ์ฌ๋ผ์ง */
46%, 85% { opacity: 0; transform: translateY(20px); } /* ์๋๋ก ๋ชฐ๋ ์ด๋ํด ๋๊ธฐ */
90%, 100% { opacity: 1; transform: translateY(0); } /* ๋ค์ ์๋์์ ์ฌ๋ผ์ด */
}
/* VOS ๋ฌดํ ๋ฐ๋ณต ํคํ๋ ์ */
@keyframes loopVos {
0%, 35% { opacity: 0; transform: translateY(20px); } /* ์๋์์ ๋๊ธฐ */
40%, 85% { opacity: 1; transform: translateY(0); } /* ์ฌ๋ผ์์ ์ ์ค์ ์ ์ง */
90%, 100% { opacity: 0; transform: translateY(-20px); } /* ์๋ก ์ฌ๋ผ์ง */
}
/* =======================================
โจ ๋ฒ์ฉ ์คํฌ๋กค ์ ๋๋ฉ์ด์
ํดํท
======================================= */
/* 1. ์ ์๋ฆฌ์์ ๋ถ๋๋ฝ๊ฒ ๋ฐ์์ง */
.n_reveal_fade {
opacity: 0;
transform: translateY(30px); /* ์์ฃผ ์ด์ง๋ง ์๋์ ์ฌ๋ผ์ด */
transition: all 1s ease-out;
}
.n_reveal_fade.active { opacity: 1; transform: translateY(0); }
/* 2. ์ค๋ฅธ์ชฝ์์ ์ผ์ชฝ์ผ๋ก ๋ฏธ๋๋ฌ์ ธ ๋ค์ด์ด */
.n_reveal_slide_right {
opacity: 0;
transform: translateX(100px);
transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.n_reveal_slide_right.active { opacity: 1; transform: translateX(0); }
/* 3. [์ถ๊ฐ] ์ผ์ชฝ์์ ์ค๋ฅธ์ชฝ์ผ๋ก ๋ฏธ๋๋ฌ์ ธ ๋ค์ด์ด */
.n_reveal_slide_left {
opacity: 0;
transform: translateX(-100px);
transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.n_reveal_slide_left.active { opacity: 1; transform: translateX(0); }
/* 4. [์ถ๊ฐ] ์๋์์ ์๋ก ์ฅ ์ฌ๋ผ์ด (๋ ์ญ๋์ ) */
.n_reveal_up {
opacity: 0;
transform: translateY(80px);
transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.n_reveal_up.active { opacity: 1; transform: translateY(0); }
/* --- ์์ฐจ(Delay) ํด๋์ค ๋ชจ์ (์์๋ค์ ์์ฐจ์ ์ผ๋ก ๋ฑ์ฅ์ํฌ ๋ ์ฌ์ฉ) --- */
.delay_1 { transition-delay: 0.2s; }
.delay_2 { transition-delay: 0.4s; }
.delay_3 { transition-delay: 0.6s; }
.delay_4 { transition-delay: 0.8s; }
/* --- 1800px ์ด๋ ์ปจํ
์ด๋ (๊ณตํต ์ค์ ์ด ์๋ค๋ฉด ์ถ๊ฐ) --- */
.n_inner_1800 {
max-width: 1600px;
margin: 0 auto;
padding: 0 40px; /* ๋ธ๋ผ์ฐ์ ์ฐฝ์ด ์ข์์ง ๋๋ฅผ ๋๋นํ ์ต์ ์ฌ๋ฐฑ */
width: 100%;
box-sizing: border-box;
}
/* ========================================================
About VOS - Section 3 (๋ฐ๋ฐ ๋ถํ ๋ ์ด์์)
======================================================== */
.n_about_sec3 {
display: flex;
width: 100%;
background-color: #e5e5e5; /* ์ค๋ฅธ์ชฝ ํ
์คํธ ์์ญ์ ์ฐํ ํ์ ๋ฐฐ๊ฒฝ */
min-height: 750px; /* ์น์
์ต์ ๋์ด ๋ณด์ฅ */
}
/* --- ์ผ์ชฝ ์ด๋ฏธ์ง ์์ญ (ํ๋ฉด์ ์ ํํ ์ ๋ฐ์ ์ฐจ์งํ๋ฉฐ ๊ฐ์ฅ์๋ฆฌ๊น์ง ์ฑ์) --- */
.n_sec3_left {
width: 50%;
background-size: cover;
background-position: center right; /* ์์ฅ๋ ์ผ๊ตด์ด ์๋ฆฌ์ง ์๋๋ก ์ฐ์ธก ๊ธฐ์ค ์ ๋ ฌ */
background-repeat: no-repeat;
}
/* --- ์ค๋ฅธ์ชฝ ํ
์คํธ ๋ถ๋ชจ ์์ญ --- */
.n_sec3_right {
width: 50%;
display: flex;
align-items: center;
justify-content: flex-start; /* 1800px ๊ฐ์ด๋์ ์ค์๋ถํฐ ์์๋๋๋ก ์ค์ */
}
/* --- ํต์ฌ! ํ
์คํธ ์ ํ ์์ญ (1800px์ ์ ๋ฐ์ธ 900px๋ก ์ ํ) --- */
.n_sec3_text_inner {
width: 100%;
max-width: 900px;
padding: 80px 80px 80px 60px; /* ์์ฐํ์ข ํจ๋ฉ (์ด๋ฏธ์ง์์ ๊ฐ๊ฒฉ ํ๋ณด) */
}
/* --- ํ
์คํธ ์คํ์ผ๋ง --- */
.n_sec3_title {
font-size: 40px;
font-weight: 800;
color: #222;
margin-bottom: 15px;
letter-spacing: -1.5px;
word-break: keep-all;
}
.n_sec3_sub {
font-size: 22px;
font-weight: 500;
color: #333;
margin-bottom: 50px;
letter-spacing: -0.5px;
word-break: keep-all;
}
.n_sec3_desc p {
font-size: 18px;
color: #444;
line-height: 1.8;
margin-bottom: 30px;
word-break: keep-all;
}
.n_sec3_desc p:last-child {
margin-bottom: 0;
}
.n_sec3_desc strong {
font-weight: 800;
color: #111;
}
/* --- ๋ฐ์ํ (๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ์์๋ ์์๋๋ก ๋จ์ด์ง๊ฒ ์ฒ๋ฆฌ) --- */
@media (max-width: 1024px) {
.n_about_sec3 { flex-direction: column; }
.n_sec3_left { width: 100%; height: 500px; }
.n_sec3_right { width: 100%; }
.n_sec3_text_inner { max-width: 100%; padding: 60px 30px; }
}
/* ========================================================
About VOS - Section 4
======================================================== */
.n_about_sec4 {
padding: 150px 0;
background: #fff;
width: 100%;
overflow: hidden; /* ์ฌ๋ผ์ด๋ ์ ๋๋ฉ์ด์
์ ๊ฐ๋ก ์คํฌ๋กค ๋ฐฉ์ง */
}
/* --- ์๋จ ๋ฉ์ธ ํ์ดํ --- */
.n_sec4_header {
text-align: center;
margin-bottom: 90px;
}
.n_sec4_header h2 {
font-size: 42px;
font-weight: 800;
color: #222;
letter-spacing: -1px;
}
/* --- ์ค๊ฐ ํ
์คํธ/์ด๋ฏธ์ง ๋ฐ๋ฐ ๋ ์ด์์ (์์ ๋จ) --- */
.n_sec4_middle {
display: flex;
align-items: center;
width: 100%; /* ๋ถ๋ชจ(n_inner_1800)์ ๋๋น๋ฅผ ๊ฝ ์ฑ์ */
gap: 60px; /* Section 2์ ๋์ผํ ๊ฐ๊ฒฉ ์ ์ฉ */
margin-bottom: 120px;
}
/* ์ผ์ชฝ ํ
์คํธ */
.n_sec4_text {
flex: 1;
/* padding-right: 80px; ์ญ์ -> gap์ผ๋ก ๋์ฒด */
width: auto; /* width: 50% ์ญ์ (flex: 1 ์ด ๋น์จ์ ๋ง์ถค) */
}
/* ์ค๋ฅธ์ชฝ ์ด๋ฏธ์ง */
.n_sec4_img {
flex: 1;
width: auto; /* width: 50% ์ญ์ */
overflow: hidden;
}
.n_sec4_img img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
/* ์ค๊ฐ ํ
์คํธ ๋ํ
์ผ */
.n_sec4_text h3 {
font-size: 34px;
font-weight: 800;
color: #111;
margin-bottom: 40px;
line-height: 1.3;
letter-spacing: -1px;
}
.n_sec4_text p {
font-size: 18px;
color: #555;
line-height: 1.7;
margin-bottom: 30px;
word-break: keep-all;
}
.n_sec4_text p:last-child {
margin-bottom: 0;
}
/* --- ํ๋จ ์๋ธํ์ดํ ๋ฐ ์์ด์ฝ ์์ญ --- */
.n_sec4_bottom {
text-align: center;
}
.n_sec4_bot_title {
font-size: 26px;
font-weight: 700;
color: #333;
margin-bottom: 60px;
}
/* ์ํ ์์ด์ฝ ๊ทธ๋ฆฌ๋ */
.n_sec4_icons_wrap {
display: flex;
justify-content: center;
gap: 40px;
}
/* ๊ฐ๋ณ ์ํ ์์ดํ
*/
.n_sec4_icon_item {
width: 380px; /* ์์์ฒ๋ผ ํผ์งํ ์ํ */
height: 380px;
border-radius: 50%;
background-color: #6a6a6a; /* ์์์ ์ง์ ํ์ */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30px;
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.n_sec4_icon_item:hover {
transform: translateY(-10px); /* ๋ง์ฐ์ค ์ฌ๋ ธ์ ๋ ์ด์ง ๋จ๋ ํจ๊ณผ ์ถ๊ฐ */
}
/* ์์ด์ฝ ์ด๋ฏธ์ง */
.n_icon_img {
margin-bottom: 25px;
height: 70px; /* ์์ด์ฝ๋ค์ด ๊ท ์ผํ ๋์ด๋ฅผ ๊ฐ์ง๋๋ก ๊ณ ์ */
display: flex;
align-items: center;
justify-content: center;
}
.n_icon_img img {
max-height: 100%;
width: auto;
}
/* ์์ด์ฝ ํ
์คํธ */
.n_icon_title {
font-size: 24px;
font-weight: 700;
color: #fdd000; /* VOS ๋
ธ๋์ */
margin-bottom: 15px;
letter-spacing: -0.5px;
}
.n_icon_desc {
font-size: 16px;
color: #fff;
line-height: 1.5;
word-break: keep-all;
margin: 0;
}
/* --- ๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ ๋์ --- */
@media (max-width: 1024px) {
.n_sec4_middle { flex-direction: column; gap: 40px; }
.n_sec4_icons_wrap { flex-direction: column; align-items: center; }
.n_sec4_icon_item { width: 300px; height: 300px; }
.n_icon_title { font-size: 20px; }
.n_icon_desc { font-size: 14px; }
}
/* ========================================================
About VOS - Section 5 (6:4 ์์ฝ๋์ธ ๋ ์ด์์)
======================================================== */
.n_about_sec5 {
padding: 150px 0;
background-color: #e6e6e6; /* ์์์ ์ฐํ ํ์ ๋ฐฐ๊ฒฝ */
width: 100%;
overflow: hidden;
}
.n_sec5_wrap {
display: flex;
justify-content: space-between;
align-items: stretch; /* ์ข์ฐ ๋์ด๋ฅผ ๋ง์ถค */
}
/* --- ์ผ์ชฝ ์์ฝ๋์ธ ์์ญ (60% ๋น์จ) --- */
.n_sec5_left {
width: 55%; /* ์ฝ๊ฐ์ ์ฌ๋ฐฑ์ ์ํด 55%๋ก ์ค์ */
}
.n_sec5_header {
margin-bottom: 60px;
}
.n_sec5_header h2 {
font-size: 42px;
font-weight: 800;
color: #111;
line-height: 1.3;
letter-spacing: -1px;
margin-bottom: 15px;
}
.n_sec5_header p {
font-size: 20px;
color: #555;
font-weight: 400;
}
/* ์์ฝ๋์ธ ๋ฆฌ์คํธ ์คํ์ผ */
.n_sec5_accordion {
border-top: 1px solid #ccc;
list-style: none;
padding: 0;
margin: 0;
}
.n_acc_item {
border-bottom: 1px solid #ccc;
}
.n_acc_head {
padding: 30px 0;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
}
.n_acc_head h3 {
font-size: 24px;
font-weight: 500;
color: #333;
margin: 0;
transition: font-weight 0.3s ease, color 0.3s ease;
}
.n_acc_icon {
font-size: 16px;
color: #777;
transition: all 0.3s ease;
}
/* ์์ฝ๋์ธ ํ์ฑํ(Active) ์ํ */
.n_acc_item.active .n_acc_head h3 {
font-weight: 800;
color: #111;
}
.n_acc_item.active .n_acc_icon {
display: none; /* ์์์ฒ๋ผ ์ด๋ฆฐ ํญ์ ํ์ดํ ์จ๊น */
}
/* ์ด๋ฆฌ๋ ๋ด์ฉ ๋ถ๋ถ */
.n_acc_body {
padding: 0 0 30px 0;
}
.n_acc_body p {
font-size: 18px;
color: #555;
line-height: 1.6;
margin: 0;
}
/* --- ์ค๋ฅธ์ชฝ ์ด๋ฏธ์ง ์์ญ (๋จ์ผ ๊ณ ์ ์ด๋ฏธ์ง) --- */
.n_sec5_right {
width: 38%;
display: flex;
align-items: center;
}
.n_sec5_img_wrap {
width: 100%;
aspect-ratio: 4 / 5; /* ์ธ๋กํ ๋น์จ ๊ณ ์ */
overflow: hidden;
background: #ccc;
border-radius: 10px; /* ์์์ ๋ง์ถฐ ์ด์ง ๋ฅ๊ธ๊ฒ ์ํ์๋ฉด ์ถ๊ฐ (์ต์
) */
}
/* ๊ณ ์ ๋ ํ ์ฅ์ ์ด๋ฏธ์ง */
.n_static_img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* --- ๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ ๋์ --- */
@media (max-width: 1024px) {
.n_sec5_wrap { flex-direction: column; gap: 50px; }
.n_sec5_left { width: 100%; }
.n_sec5_right { width: 100%; }
.n_sec5_img_wrap { aspect-ratio: 16 / 9; }
}
/* ========================================================
About VOS - Section 6 (์ฅ๋น ์๊ฐ - ๋์์ธ ์์ ๋ฐ์)
======================================================== */
.n_about_sec6 {
padding: 150px 0;
background: #fff;
width: 100%;
overflow: hidden;
}
/* --- ์๋จ ๋ฉ์ธ ํ์ดํ (๊ตต๊ธฐ ๋ถํ ) --- */
.n_sec6_header {
text-align: center;
margin-bottom: 80px;
}
.n_sec6_header h2 {
font-size: 45px;
color: #222;
letter-spacing: -1px;
}
.n_sec6_header h2 .w_300 { font-weight: 300; } /* ์์ ๊ธ์จ */
.n_sec6_header h2 .w_800 { font-weight: 800; } /* ๋๊บผ์ด ๊ธ์จ */
/* --- 50:50 ์ข์ฐ ๋ ์ด์์ --- */
.n_sec6_content {
display: flex;
align-items: center;
width: 100%;
gap: 60px;
}
.n_sec6_left {
flex: 1;
display: flex;
justify-content: center;
}
.n_sec6_left img {
max-width: 100%;
height: auto;
display: block;
}
/* ์ค๋ฅธ์ชฝ ํ
์คํธ ๋ฐ ์์ด์ฝ ์์ญ */
.n_sec6_right {
flex: 1;
}
.n_sec6_text_wrap {
margin-bottom: 40px;
}
.n_sec6_text_wrap h3 {
font-size: 30px; /* ๊ธฐ์กด๋ณด๋ค ์ด์ง ์ค์ */
font-weight: 700; /* 800 -> 700์ผ๋ก ๋ ๋๊ป๊ฒ */
color: #111;
margin-bottom: 12px;
letter-spacing: -1px;
}
.n_sec6_sub_desc {
font-size: 18px;
font-weight: 400; /* ์๊ณ ๊น๋ํ๊ฒ */
color: #666;
word-break: keep-all;
}
/* --- ์์ด์ฝ ๋ฆฌ์คํธ --- */
.n_sec6_icon_list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 35px;
}
.n_sec6_item {
display: flex;
align-items: center;
gap: 25px;
}
/* โจ ์์ด์ฝ ์ด๋ฏธ์ง (ํ์ ์ํ ๋ฐฐ๊ฒฝ ์ถ๊ฐ) */
.n_sec6_icon {
flex-shrink: 0;
width: 85px; /* ์์ ๋น์จ์ ๋ง์ถฐ ์ด์ง ์กฐ์ */
height: 85px;
background-color: #6a6a6a; /* ์ง์ ํ์ ๋ฐฐ๊ฒฝ */
border-radius: 50%; /* ์๋ฒฝํ ์ํ */
display: flex;
justify-content: center;
align-items: center;
padding: 20px; /* ์ ์์์ ์์ด์ฝ์ด ์ฐจ์งํ๋ ์ฌ๋ฐฑ */
}
.n_sec6_icon img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* ๊ฐ๋ณ ์์ด์ฝ ํ
์คํธ */
.n_sec6_item_text h4 {
font-size: 22px;
font-weight: 600; /* 700 -> 600์ผ๋ก ์ด์ง ๋ถ๋๋ฝ๊ฒ */
color: #222;
margin-bottom: 5px;
letter-spacing: -0.5px;
}
.n_sec6_item_text p {
font-size: 16px;
color: #666;
line-height: 1.5;
margin: 0;
word-break: keep-all;
}
/* --- ๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ ๋ฐ์ํ --- */
@media (max-width: 1024px) {
.n_sec6_content { flex-direction: column; gap: 50px; }
.n_sec6_header h2 { font-size: 32px; }
.n_sec6_text_wrap h3 { font-size: 24px; }
.n_sec6_item { align-items: flex-start; }
.n_sec6_icon { width: 70px; height: 70px; padding: 15px; }
}
/* ========================================================
About VOS - Section 7 (๋ณ์ ์ธต๋ณ ์๋ด)
======================================================== */
.n_about_sec7 {
width: 100%;
min-height: 800px; /* ์์ํ ์ ๊ฒฝ์ ๋ณด์ฌ์ฃผ๊ธฐ ์ํ ์ต์ ๋์ด */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center; /* ์ธ๋ก ์ค์ ์ ๋ ฌ */
position: relative;
}
/* 1800px ๋ด์์ ์ค๋ฅธ์ชฝ์ผ๋ก ๋ฐ์ด๋ฒ๋ฆฌ๋ ๋ํผ */
.n_sec7_wrap {
display: flex;
justify-content: flex-end; /* ์ค๋ฅธ์ชฝ ์ ๋ ฌ */
width: 100%;
}
/* โจ ๋ฐํฌ๋ช
์ ๋ฆฌ์ฐฝ ํจ๊ณผ (Glassmorphism) ๋ฐ์ค */
.n_sec7_box {
width: 100%;
max-width: 650px; /* 1800px์ ์ฐ์ธก ์ ๋ฐ(900) ์์ ์ฌ์ ๋กญ๊ฒ ๋ค์ด๊ฐ */
background: rgba(255, 255, 255, 0.65); /* ํฐ์ ๋ฐํฌ๋ช
*/
backdrop-filter: blur(15px); /* ๋ฐฐ๊ฒฝ์ ๋ฟ์๊ฒ ๋ธ๋ฌ ์ฒ๋ฆฌ */
-webkit-backdrop-filter: blur(15px); /* ์ฌํ๋ฆฌ ํธํ์ฑ */
border-radius: 30px; /* ์์์ฒ๋ผ ๋ฅ๊ทผ ๋ชจ์๋ฆฌ */
padding: 60px 70px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
/* ์๋ฌธ ํ์ดํ */
.n_sec7_title {
font-size: 26px;
font-weight: 800;
color: #111;
letter-spacing: 0px;
margin: 0;
}
/* ํ์ดํ ์๋ ์์ ์ */
.n_sec7_divider {
border: none;
border-bottom: 1px solid rgba(0,0,0,0.2);
margin: 25px 0 40px;
}
/* ์ธต๋ณ ๋ฆฌ์คํธ */
.n_sec7_floor_list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 35px; /* ๊ฐ ์ธต๋ณ ๊ฐ๊ฒฉ */
}
.n_sec7_floor_list li {
display: flex;
align-items: center; /* ์ซ์์ ํ
์คํธ ์ธ๋ก ์ค์ ์ ๋ ฌ */
gap: 30px; /* ์ซ์์ ํ
์คํธ ์ฌ์ด ๊ฐ๊ฒฉ */
}
/* ์ธต ์ซ์ ๋์์ธ */
.n_sec7_floor_list .f_num {
font-size: 55px; /* ์ซ์๋ฅผ ํฌ๊ณ ๋๋ณด์ด๊ฒ */
font-weight: 800;
color: #222;
line-height: 1;
min-width: 40px; /* ์ซ์๊ฐ ๋ ์๋ฆฌ ์ด์์ด์ด๋ ์ ๋ ฌ ์ ์ง */
text-align: center;
}
/* ์ธต ์ค๋ช
ํ
์คํธ */
.n_sec7_floor_list .f_desc {
font-size: 22px;
font-weight: 500;
color: #333;
letter-spacing: -0.5px;
}
/* --- ๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ ๋ฐ์ํ --- */
@media (max-width: 1024px) {
.n_about_sec7 { padding: 100px 0; min-height: 600px; }
.n_sec7_wrap { justify-content: center; } /* ๋ชจ๋ฐ์ผ์์๋ ์ค์ ๋ฐฐ์น */
.n_sec7_box { max-width: 90%; padding: 40px 30px; border-radius: 20px; }
.n_sec7_title { font-size: 22px; }
.n_sec7_floor_list { gap: 25px; }
.n_sec7_floor_list .f_num { font-size: 40px; }
.n_sec7_floor_list .f_desc { font-size: 18px; }
}
/* ========================================================
About VOS - Section 8 (๋ง์ง๋ง ์ฝ์ ์น์
)
======================================================== */
.n_about_sec8 {
width: 100%;
min-height: 800px; /* ๋ง์ง๋ง ์น์
์ ์์ํ ๋์ด */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center; /* ์ธ๋ก ์ค์ ์ ๋ ฌ */
position: relative;
}
/* (์ต์
) ํ
์คํธ ๊ฐ๋
์ฑ์ ๋์ด๊ธฐ ์ํด ๋ฐฐ๊ฒฝ ์์ ์ด๋์ด ๋ง์ ์์ธ ๊ฒฝ์ฐ ์ฌ์ฉ */
/* ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๊ฐ ๋๋ฌด ๋ฐ์ ๊ฒฝ์ฐ ์ฃผ์์ ํ๊ณ ์ฌ์ฉํ์ธ์ */
/*
.n_about_sec8::before {
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: 1;
}
*/
/* 1800px ์ปจํ
์ด๋ ์์์ ํ
์คํธ ์๋ก ์ฌ๋ฆฌ๊ธฐ */
.n_about_sec8 .n_inner_1800 {
position: relative;
z-index: 2; /* ์ค๋ฒ๋ ์ด๋ณด๋ค ์์ ์ค๋๋ก ์ค์ */
}
/* --- ์ผ์ชฝ ์ ๋ ฌ ํ
์คํธ ์์ญ --- */
.n_sec8_text_box {
max-width: 800px; /* ํ
์คํธ๊ฐ ๊ฐ๋ก๋ก ๋๋ฌด ๊ธธ์ด์ง์ง ์๋๋ก ์ ํ */
}
.n_sec8_title {
font-size: 50px;
font-weight: 800;
color: #fff; /* ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง์ ๋ง์ถฐ ์์ ๋ณ๊ฒฝ (ํฐ์ or ๊ฒ์์) */
line-height: 1.3;
letter-spacing: -1.5px;
margin-bottom: 30px;
text-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* ๊ธ์จ ๊ฐ๋
์ฑ์ ์ํ ์์ํ ๊ทธ๋ฆผ์ */
}
.n_sec8_desc {
font-size: 20px;
color: #f1f1f1;
font-weight: 400;
line-height: 1.8;
margin-bottom: 50px;
word-break: keep-all;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
/* (์ ํ) ํ๋จ ์์ฝ ๋ฒํผ ์คํ์ผ */
.n_sec8_btn {
display: inline-block;
padding: 18px 50px;
background-color: #fdd000; /* VOS ๋
ธ๋์ */
color: #111;
font-size: 18px;
font-weight: 700;
text-decoration: none;
border-radius: 5px;
transition: all 0.3s ease;
}
.n_sec8_btn:hover {
background-color: #111;
color: #fff;
}
/* --- ๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ ๋ฐ์ํ --- */
@media (max-width: 1024px) {
.n_about_sec8 { min-height: 500px; padding: 80px 0; }
.n_sec8_title { font-size: 35px; }
.n_sec8_desc { font-size: 16px; }
}
/* ========================================================
About VOS ํ์ด์ง ๋ชจ๋ฐ์ผ ์ต์ ํ (768px ์ดํ ์ ์ฉ)
======================================================== */
@media (max-width: 768px) {
/* ----------------------------------------------------
1. Hero ์น์
ํ์ดํ ํฌ๊ธฐ ์ถ์ (70px -> 32px)
---------------------------------------------------- */
.n_about_main_title {
font-size: 32px !important;
}
/* ----------------------------------------------------
2 & 3. Section 2 (FOR ONE & ONLY) & Section 4 ๋ชจ๋ฐ์ผ ๋ ์ด์์
(HTML ์์ ์์ด ์ด๋ฏธ์ง๋ฅผ ์๋ก, ํ
์คํธ๋ฅผ ์๋๋ก 1๋จ ๋ฐฐ์น)
---------------------------------------------------- */
.n_sec2_content,
.n_sec4_middle {
/* ๐ฅ ํต์ฌ: column-reverse๋ฅผ ์ฐ๋ฉด 2๋ฒ์งธ ์์(์ด๋ฏธ์ง)๊ฐ ์๋ก ์ฌ๋ผ์ต๋๋ค! */
flex-direction: column-reverse !important;
gap: 40px !important;
}
.n_sec2_img_wrap,
.n_sec4_img {
max-width: 100% !important;
width: 100% !important;
}
/* ----------------------------------------------------
7. FOR ONE & ONLY - YOU / VOS ๊ธ์ ์ค์ ์ ๋ ฌ ์๋ฒฝ ํด๊ฒฐ
---------------------------------------------------- */
.n_text_swap {
display: block !important; /* ๋ชจ๋ฐ์ผ์์๋ ๋ฌด์กฐ๊ฑด ์๋ซ์ค๋ก ๋จ์ด์ง๊ฒ ํ์ฌ ์ด์ค๊ฐํ ์ค๋ฐ๊ฟ ๋ฐฉ์ง */
width: 100% !important;
text-align: center !important; /* ์์ ์์ ๊ธ์จ๋ฅผ ๋ฌด์กฐ๊ฑด ๊ฐ์ด๋ฐ๋ก */
margin-top: 5px; /* ์๊ธ์จ(FOR ONE & ONLY)์์ ๊ฐ๊ฒฉ */
}
.n_text_swap .t_vos {
width: 100% !important; /* ์ ๋๋ฉ์ด์
๊ธ์๋ 100% ํฌ๊ธฐ๋ฅผ ์ฐจ์งํ๊ฒ ํ ๋ค */
left: 0 !important;
text-align: center !important; /* ์ ์ค์์ ๋ฐฐ์น */
}
/* ----------------------------------------------------
4. Section 3 (์ ๋ฌธ์ ์ง๋จ) ์ผ์ชฝ ์์ฅ๋ ์ด๋ฏธ์ง ๋์ด ์ถ์
---------------------------------------------------- */
.n_sec3_left {
height: 320px !important; /* 500px -> 320px ๋ก ๋ณ๊ฒฝํ์ฌ ์์ํ๊ฒ ๋
ธ์ถ */
}
/* ----------------------------------------------------
5 & 6. ์ ์น์
ํ์ดํ 32px / ์๋ธํ์ดํ 26px ์๋ฒฝ ํต์ผ
---------------------------------------------------- */
/* ๐ฏ ๋ฉ์ธ ํ์ดํ 32px ํต์ผ (๊ฐ ์น์
์ ๊ฐ์ฅ ํฐ ์ ๋ชฉ) */
.n_sec2_title,
.n_sec3_title,
.n_sec4_header h2,
.n_sec5_header h2,
.n_sec6_header h2,
.n_sec8_title {
font-size: 32px !important;
line-height: 1.3 !important;
word-break: keep-all;
letter-spacing: -1px;
}
/* ๐ฏ ์๋ธ ํ์ดํ 26px ํต์ผ (๋ฉ์ธ ํ์ดํ ์๋ ๋ถ๊ฐ ์ค๋ช
์ ๋ชฉ) */
.n_sec2_sub,
.n_sec2_text_wrap h3,
.n_sec3_sub,
.n_sec4_text h3,
.n_sec4_bot_title,
.n_sec6_text_wrap h3,
.n_sec7_title {
font-size: 26px !important;
line-height: 1.3 !important;
word-break: keep-all;
margin-bottom: 20px !important;
}
/* ๐ฏ ์์ฝ๋์ธ ํ์ดํ ๋ฐธ๋ฐ์ค ์กฐ์ */
/* ๋ฉ์ธ์ด 32px์ด๋ฏ๋ก, ์์ฝ๋์ธ ํญ ํญ๋ชฉ ์ ๋ชฉ์ 20px๋ก ์กฐ์ ํด ์๊ณ์ง์๋ฅผ ๋ง์ถฅ๋๋ค */
.n_acc_head h3 {
font-size: 20px !important;
}
/* ----------------------------------------------------
๊ธฐํ ์ฌ๋ฐฑ ์ต์ ํ (๋ชจ๋ฐ์ผ์์ ํ๋ฉด ๋ฐ์ผ๋ก ๋ฐ๋ฆฌ๋ ํ์ ๋ฐฉ์ง)
---------------------------------------------------- */
.n_about_sec2, .n_about_sec4, .n_about_sec5, .n_about_sec6 {
padding: 80px 0 !important;
}
.n_sec3_text_inner {
padding: 50px 20px !important;
}
}
/* ========================================================
์๋ฃ์ง ์๊ฐ (Dr. Kim) ํ์ด์ง ์คํ์ผ
======================================================== */
/* --- Section 1: Hero ํ์ดํ ๋ฐ ๋ฐฐ๊ฒฝ Fade-in --- */
.dr_hero_section {
width: 100%;
height: 790px; /* ๋ณ์ ์๊ฐ์ ๋์ผํ ๋์ด ์ ์ง */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
position: relative;
/* ๋ฐฐ๊ฒฝ Fade-in ์ ๋๋ฉ์ด์
*/
opacity: 0;
animation: drHeroBgFade 1.5s ease-in-out forwards;
}
/* ๋ฐฐ๊ฒฝ Fade-in ํคํ๋ ์ */
@keyframes drHeroBgFade {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* 1800px ์ปจํ
์ด๋ (์์์ฒ๋ผ ์ข์ธก ํ
์คํธ ์ ๋ ฌ์ ์ํด padding ์กฐ์ ) */
.dr_hero_section .n_inner_1800 {
width: 100%;
max-width: 1800px;
margin: 0 auto;
padding: 0 40px;
}
/* ํ
์คํธ ์ปจํ
์ด๋ */
.dr_hero_content {
width: 100%;
padding-left: 2%; /* ์์์ฒ๋ผ ํ
์คํธ๋ฅผ ์ฝ๊ฐ ์์ชฝ์ผ๋ก */
}
/* ํ์ดํ ์คํ์ผ */
.dr_hero_main_title {
font-size: 75px;
font-weight: 800;
letter-spacing: -1px;
margin: 0;
}
.dr_hero_main_title .t_white {
color: #fff;
margin-right: 15px;
}
.dr_hero_main_title .t_yellow {
color: #fdd000;
}
/* --- Hero ๋ค์ด๋๋ฏน ์ ๋๋ฉ์ด์
(๊ต์ฐจ ๋ฑ์ฅ ๋ฐ ํ์ด๋์ธ) --- */
.dr_hero_fade_in {
display: block;
}
.dr_hero_fade_in span {
display: inline-block;
opacity: 0;
transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 1.2s ease;
will-change: transform, opacity, color;
}
/* ์ด๊ธฐ ๋๊ธฐ ์ํ (๋ชจ๋ ํฐ์) */
.dr_hero_main_title .t_white {
transform: translateY(100px);
color: #ffffff;
}
.dr_hero_main_title .t_yellow {
transform: translateY(-100px);
color: #ffffff;
}
/* ํ์ฑํ(active) ์ ๋์ */
.dr_hero_fade_in.active .t_white {
opacity: 1;
transform: translateY(0);
}
.dr_hero_fade_in.active .t_yellow {
opacity: 1;
transform: translateY(0);
color: #fdd000; /* ์ต์ข
๋
ธ๋์ */
/* ์ด๋: 0.15์ด ๋ค, ์์๋ณํ: 1.2์ด ๋ค ์์ */
transition:
transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s,
opacity 1.2s ease 0.15s,
color 0.8s ease 1.2s;
}
/* ๋ชจ๋ฐ์ผ ๋์ */
@media (max-width: 768px) {
.dr_hero_section { height: 400px;background-position: 65% center!important; }
.dr_hero_main_title { font-size: 45px; }
.dr_hero_content { padding-left: 5%; }
}
/* ========================================================
[์ถ๊ฐ] ์๋ก์ด 1400px ์ด๋ ์ปจํ
์ด๋ (๊ณตํต ์์ญ์ ์ถ๊ฐ)
======================================================== */
.n_inner_1400 {
max-width: 1400px;
margin: 0 auto;
padding: 0 40px;
width: 100%;
box-sizing: border-box;
}
/* ========================================================
Dr Section 2 - ํผ๋ถ๋ฅผ ๊ฐ์ฅ ์ ์๋ ์ฌ๋ (์ข ์ด๋ฏธ์ง / ์ฐ ํ
์คํธ)
======================================================== */
.dr_sec2_wrap {
padding: 150px 0;
background: #fff;
overflow: hidden;
}
/* ์๋จ ํ์ดํ */
.dr_sec2_top {
text-align: center;
margin-bottom: 80px;
}
.dr_sec2_title {
font-size: 45px;
font-weight: 800;
color: #111;
margin-bottom: 20px;
letter-spacing: -1px;
}
.dr_sec2_sub {
font-size: 22px;
color: #555;
font-weight: 500;
}
/* ๋ณธ๋ฌธ ๋ ์ด์์ (Flex) */
.dr_sec2_content {
display: flex;
align-items: center;
width: 100%;
gap: 80px;
}
/* ๐ฅ ์ผ์ชฝ ์ด๋ฏธ์ง (๊ธฐ์กด 50% -> 35% ๋ก 2/3 ์์ค ์ถ์) */
.dr_sec2_img_wrap {
flex: 0 0 45%;
max-width: 45%;
}
.dr_sec2_img_wrap img {
width: 100%;
height: auto;
display: block;
background: #f4f4f4;
}
/* ๐ฅ ์ค๋ฅธ์ชฝ ํ
์คํธ ์ปจํ
์ด๋ (๋จ์ ๊ณต๊ฐ์ ๋ชจ๋ ์ฌ์ฉํ๋๋ก ํ์ฅ) */
.dr_sec2_text_wrap {
flex: 1;
padding: 20px 0;
}
/* --- ํต๊ณ ๋ฐ์ค ์์ญ (2% / 100%) --- */
.dr_stats_box {
display: flex;
/* ๐ฅ ํต์ฌ ์์ : ๋์ด๊ฐ ๋ฌ๋ผ๋ '๋ฌด์กฐ๊ฑด ๋งจ ์(์ซ์)'๋ฅผ ๊ธฐ์ค์ผ๋ก ์ค์ ๋ฑ ๋ง์ถฅ๋๋ค */
align-items: flex-start;
justify-content: center;
margin-top: 60px; /* ๐ฅ ์์ฒญํ์ ์๋จ ์ฌ๋ฐฑ(๋นจ๊ฐ ๋ฐ์ค 1) ์ถ๊ฐ */
margin-bottom: 40px;
}
.dr_stat_item {
flex: 0 0 auto;
width: 260px; /* ์์ด๊ฐ ๋๋ฌด ์ธ๋ก๋ก ๊ธธ์ด์ง์ง ์๊ฒ ๊ฐ๋กํญ์ ์กฐ๊ธ ๋ ๋ํ์ค๋๋ค */
text-align: center;
}
.stat_num {
display: block;
font-size: 75px;
font-weight: 900;
line-height: 1;
margin-bottom: 15px;
letter-spacing: -2px;
}
.stat_num.c_yellow { color: #fdd000; } /* 2% ๋
ธ๋์ */
.stat_num.c_navy { color: #214081; } /* 100% ๋ค์ด๋น์ */
.stat_title {
font-size: 24px;
font-weight: 800;
color: #222;
margin-bottom: 15px;
}
.stat_desc {
font-size: 16px;
color: #666;
line-height: 1.6;
word-break: keep-all;
margin: 0;
}
/* ํต๊ณ ์ฌ์ด ์ธ๋ก ๊ตฌ๋ถ์ */
.dr_stat_divider {
width: 1px;
height: 130px; /* ํ
์คํธ๊ฐ ๊ธธ์ด์ง๋ ๊ฑธ ๋๋นํด ์ ๊ธธ์ด๋ฅผ ์ด์ง ์ฐ์ฅ */
background-color: #ddd;
margin: 15px 40px 0 40px; /* ์ ์์น๋ฅผ ์ซ์ ์ค๊ฐ์ฏค์ผ๋ก ์์ฐ์ค๋ฝ๊ฒ ๋ด๋ฆฌ๊ณ ๊ฐ๊ฒฉ ํ๋ณด */
}
/* --- ํ๋จ ๋ณธ๋ฌธ ์ค๋ช
์์ญ --- */
.dr_desc_box {
text-align: center;
margin-top: 70px; /* ๐ฅ ์์ฒญํ์ ํ๋จ ์ฌ๋ฐฑ(๋นจ๊ฐ ๋ฐ์ค 2) ๋ํญ ์ถ๊ฐ */
}
.dr_desc_box p {
font-size: 18px;
color: #444;
line-height: 1.8;
margin-bottom: 25px;
word-break: keep-all;
}
.dr_desc_box p strong {
font-weight: 800;
color: #111;
}
/* --- ๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ ๋ฐ์ํ --- */
@media (max-width: 1024px) {
.dr_sec2_content { flex-direction: column; gap: 50px; }
.dr_sec2_img_wrap { max-width: 80%; margin: 0 auto; }
.dr_stats_box { flex-direction: column; gap: 30px; }
.dr_stat_divider { width: 100%; height: 1px; margin: 20px 0; }
}
@media (max-width: 768px) {
.dr_sec2_title { font-size: 32px; }
.dr_sec2_sub { font-size: 18px; }
.dr_sec2_img_wrap { max-width: 100%; }
.stat_num { font-size: 60px; }
}
/* ========================================================
Dr Section 3 - ์์ฅ๋ ์ธ์ฌ๋ง (ํ๋ฐฐ๊ฒฝ + ํ
์คํธ)
======================================================== */
.dr_sec3_wrap {
width: 100%;
/* ๋์ด๋ฅผ ํ๋ฉด์ ๊ฝ ์ฐจ๊ฒ 100vh๋ก ์ค์ ํ๋, ๋ชจ๋ํฐ๊ฐ ์์๋ ์ต์ 800px์ ์ ์งํ๋๋ก ๋ณด์ฅ */
min-height: 800px;
height: 100vh;
background-size: cover;
/* ์ธ๋ฌผ์ด ์ฐ์ธก์ ์์ผ๋ฏ๋ก ์ฐฝ์ ์ค์ผ ๋ ์ธ๋ฌผ์ด ์๋ฆฌ์ง ์๊ฒ ์ฐ์ธก ์ค์ ๊ธฐ์ค ์ ๋ ฌ */
background-position: center right;
background-repeat: no-repeat;
display: flex;
align-items: center; /* ํ
์คํธ ์์ง ์ค์ ์ ๋ ฌ */
position: relative;
}
/* 1800px ์ด๋ ์ปจํ
์ด๋๋ฅผ ํ์ฉํด ์ข์ฐ ์ฌ๋ฐฑ ํ๋ณด */
.dr_sec3_wrap .n_inner_1800 {
width: 100%;
display: flex;
justify-content: flex-start; /* ํ
์คํธ ๋ฐ์ค๋ฅผ ์ผ์ชฝ์ผ๋ก ์ ๋ ฌ */
}
/* ํ
์คํธ ์ปจํ
์ด๋ */
.dr_sec3_text_box {
max-width: 650px; /* ํ
์คํธ๊ฐ ์ด๋ฏธ์ง ์์ญ์ ๋๋ฌด ์นจ๋ฒํ์ง ์๊ฒ ํญ ์ ํ */
padding-left: 20px;
}
/* ํ์ดํ */
.dr_sec3_title {
font-size: 42px;
font-weight: 400;
color: #111;
line-height: 1.3;
margin-bottom: 40px;
letter-spacing: -1px;
}
.dr_sec3_title strong {
font-weight: 800;
}
/* ๋ณธ๋ฌธ ๋จ๋ฝ */
.dr_sec3_desc p {
font-size: 18px;
color: #222;
line-height: 1.8;
margin-bottom: 25px;
word-break: keep-all; /* ๋จ์ด ๋จ์๋ก ๊น๋ํ๊ฒ ๋จ์ด์ง๊ฒ ์ค์ */
font-weight: 500;
}
.dr_sec3_desc p:last-child {
margin-bottom: 0;
}
/* --- ๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ ๋ฐ์ํ --- */
@media (max-width: 1024px) {
.dr_sec3_wrap {
min-height: auto;
height: auto;
padding: 120px 0;
background-position: 80% center !important;
}
/* ๐ฅ ๋ชจ๋ฐ์ผ์์ ๊ธ์จ๊ฐ ์ ๋ณด์ผ ์ ์์ผ๋ ์ ๋ฆฌ ๊ฐ์ ๋ฐํฌ๋ช
๋ฐ์ค ์ ์ฉ */
.dr_sec3_text_box {
max-width: 100%;
background: rgba(255, 255, 255, 0.7);
padding: 40px;
border-radius: 20px;
backdrop-filter: blur(5px);
}
.dr_sec3_title { font-size: 32px; }
.dr_sec3_desc p { font-size: 16px; }
}
@media (max-width: 768px) {
.dr_sec3_text_box { padding: 30px 20px; }
}
/* ========================================================
Dr Section 4 - ํญ ๋ฉ๋ด ๋ฐ ์ปจํ
์ธ ์์ญ
======================================================== */
.dr_sec4_wrap {
padding: 100px 0 100px 0; /* ๐ฅ ํ๋จ ํจ๋ฉ ์ ๊ฑฐ, ์๋จ๋ง ์ ์ง */
background: #ffffff; /* ๐ฅ ํญ ์๋จ ๋ฐฐ๊ฒฝ์ ํฐ์์ผ๋ก ๋ณ๊ฒฝ */
overflow: hidden; /* 100vw ๋ฐฐ๊ฒฝ์ด ๊ฐ๋ก ์คํฌ๋กค์ ๋ง๋ค์ง ์๋๋ก ๋ฐฉ์ง */
}
/* ํญ ๋ค๋น๊ฒ์ด์
*/
.dr_tab_nav {
display: flex;
list-style: none;
padding: 0;
margin: 0; /* ๐ฅ ํ๋จ ๋ฐฐ๊ฒฝ๊ณผ ๋ฑ ๋ถ์ด๊ธฐ ์ํด ๊ธฐ์กด margin-bottom 50px ์ ๊ฑฐ */
justify-content: center;
gap: 10px;
}
.dr_tab_nav li {
flex: 1;
max-width: 250px;
}
.dr_tab_nav li a {
display: block;
padding: 20px 0;
text-align: center;
background: #999;
color: #fff;
font-size: 20px;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
}
.dr_tab_nav li.ui-tabs-active a {
background: #fdd000;
color: #111;
}
/* ํญ ์ปจํ
์ธ ์์ญ */
.dr_tab_content {
position: relative;
padding: 80px 0 100px; /* ๐ฅ ํญ ๋ฒํผ๊ณผ ์ปจํ
์ธ ์ฌ์ด์ ๊ฐ๊ฒฉ์ ํจ๋ฉ์ผ๋ก ์ด๋ */
z-index: 1;
}
/* ๐ฅ ํต์ฌ: ํญ ์ปจํ
์ธ ์์ญ ๋ค์๋ง ํ๋ฉด ๊ฝ ์ฐจ๋ ํ์(f4f4f4) ๋ฐฐ๊ฒฝ ๊น๊ธฐ */
.dr_tab_content::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
height: 100%;
background: #f4f4f4;
z-index: -1;
}
/* --- ์ฝ๋ ฅ (Tab 1) ๋ ์ด์์ --- */
.career_lists {
display: flex;
gap: 40px;
}
.career_col {
flex: 1;
}
.career_col h3 {
font-size: 24px;
color: #111;
border-bottom: 2px solid #111;
padding-bottom: 15px;
margin-bottom: 25px;
}
.career_col ul {
list-style: none;
padding: 0;
margin: 0;
}
.career_col li {
font-size: 16px;
color: #444;
line-height: 1.8;
margin-bottom: 10px;
}
/* ========================================================
[์์ ] ํญ 2: ๋ฐํ ๋ฐ ๊ฐ์ฐ (์๋ ๋ฌดํ ๋กค๋ง ํ์๋ผ์ธ)
======================================================== */
/* --- ๋ฌดํ ๋กค๋ง ๋ํผ ๋ฐ ์ ๋๋ฉ์ด์
--- */
.marquee_wrap {
width: 100%;
overflow: hidden; /* ๋์น๋ ๋ถ๋ถ ๋ฌด์กฐ๊ฑด ์จ๊น */
padding: 20px 0;
position: relative;
}
/* ํธ๋ ์ ์ฒด๋ฅผ ๊ฐ์ธ๋ ์์ญ */
.marquee_track {
display: flex;
width: fit-content; /* ๋ด๋ถ ์ปจํ
์ธ ๊ธธ์ด๋งํผ ์์์ ๋์ด๋จ */
/* ๐ฅ ์ ๋๋ฉ์ด์
์ค์ : 40์ด ๋์, ์ผ์ ํ ์๋(linear)๋ก, ๋ฌดํ ๋ฐ๋ณต(infinite) */
animation: marqueeScroll 400s linear infinite;
}
/* ๋ง์ฐ์ค ์ฌ๋ฆฌ๋ฉด ์ ๋๋ฉ์ด์
์ผ์ ์ ์ง (์ฌ์ฉ์ฑ ๊ฐํ) */
.marquee_wrap:hover .marquee_track {
animation-play-state: paused;
}
/* ์๋ณธ๊ณผ ๋ณต์ ๋ณธ ์ธํธ */
.marquee_set {
display: flex;
flex-shrink: 0;
margin-right: 60px; /* ์ธํธ ์ฌ์ด ๊ฐ๊ฒฉ (์ ์ด ์์ฐ์ค๋ฝ๊ฒ ์ด์ด์ง๊ฒ ๋ง์ถค) */
}
/* ์คํฌ๋กค ์ ๋๋ฉ์ด์
ํคํ๋ ์ */
@keyframes marqueeScroll {
0% { transform: translateX(0); }
/* ๐ฅ ์ ๋ฐ(ํ ์ธํธ์ ๊ธธ์ด)๋งํผ๋ง ์ผ์ชฝ์ผ๋ก ๋ฐ๋ฉด, ๊ทธ ๋ค์ ์ค๋ ๋ ๋ฒ์งธ ์ธํธ๊ฐ ์ฒ์ ์์น์ ๋ฑ ๋ง๊ฒ ๋จ */
100% { transform: translateX(-50%); }
}
/* --- ํ์๋ผ์ธ ์ฐ๋ & ์ ๋์์ธ (๊ธฐ์กด๊ณผ ๊ฑฐ์ ๋์ผ) --- */
.timeline_year_group {
display: flex;
flex-direction: column;
flex-shrink: 0;
margin-right: 60px;
}
.timeline_header { position: relative; margin-bottom: 30px; }
.year_text {
font-size: 26px;
font-weight: 800;
color: #999;
display: inline-block;
margin-bottom: 15px;
padding-left: 5px;
}
.timeline_year_group:first-child .year_text { color: #111; }
.timeline_line {
position: relative;
height: 1px;
background: #ccc;
width: calc(100% + 60px);
}
.timeline_year_group:last-child .timeline_line { width: 100%; }
.timeline_line .dot {
position: absolute;
left: 0;
top: -4px;
width: 9px;
height: 9px;
background: #555;
border-radius: 50%;
}
/* --- 2์ค ๋ฐฐ์น ๊ฐค๋ฌ๋ฆฌ ๋์์ธ (๊ธฐ์กด ๋์ผ) --- */
.timeline_posts {
display: grid;
grid-template-rows: repeat(2, auto);
grid-auto-flow: column;
gap: 30px 20px;
}
.timeline_item { width: 230px; }
.timeline_item .img_box {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
margin-bottom: 15px;
background: #e0e0e0;
}
.timeline_item .img_box img { width: 100%; height: 100%; object-fit: cover; }
.timeline_item .title {
font-size: 15px; color: #111; font-weight: 600; line-height: 1.4; margin: 0; word-break: keep-all;
}
/* --- ๊ฐค๋ฌ๋ฆฌ ๊ทธ๋ฆฌ๋ ๊ณตํต (Tab 3, 4) --- */
.gallery_grid {
display: grid;
gap: 40px 30px;
}
.gallery_grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.gallery_grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.gallery_item {
background: transparent;
}
.gallery_img {
width: 100%;
margin-bottom: 20px;
overflow: hidden;
}
.gallery_img img {
width: 100%;
height: auto;
display: block;
background: #eaeaea;
}
.book_img {
box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* ์ฑ
/๋
ผ๋ฌธ ์ด๋ฏธ์ง ๊ทธ๋ฆผ์ */
}
.gallery_info h4 {
font-size: 20px;
font-weight: 700;
color: #111;
margin: 0 0 10px 0;
}
.gallery_info p {
font-size: 15px;
color: #666;
margin: 0;
}
/* ๋ชจ๋ฐ์ผ ๋ฐ์ํ */
@media (max-width: 1024px) {
.career_lists { flex-direction: column; }
.gallery_grid.cols-3, .gallery_grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
/* ========================================================
[์ถ๊ฐ] ํญ 2: ๋ฐํ ๋ฐ ๊ฐ์ฐ ํ์๋ผ์ธ ๋ชจ๋ฐ์ผ ๋ฐ์ํ
======================================================== */
/* --- ๋ชจ๋ฐ์ผ ๋ฐ์ํ --- */
@media (max-width: 768px) {
.timeline_year_group { margin-right: 30px; }
.year_text { font-size: 22px; }
.timeline_posts { gap: 20px 15px; }
.timeline_item { width: 180px; }
.timeline_item .title { font-size: 14px; }
/* ๋ชจ๋ฐ์ผ์์๋ ์๋๋ฅผ ์กฐ๊ธ ๋ ๋น ๋ฅด๊ฒ ์กฐ์ ๊ฐ๋ฅ */
.marquee_track { animation-duration: 30s; }
}
@media (max-width: 768px) {
.dr_tab_nav { flex-wrap: wrap; }
.dr_tab_nav li { min-width: 45%; }
.gallery_grid.cols-3, .gallery_grid.cols-4 { grid-template-columns: 1fr; }
}
/* ========================================================
Brand Advisory Board (๋ธ๋๋ ์๋ฌธ์์ ํ์์ด๋ ๋ฌดํ ๋กค๋ง)
======================================================== */
.dr_brand_wrap {
padding: 100px 0;
background: #fff;
overflow: hidden;
}
.dr_brand_title {
font-size: 32px;
font-weight: 800;
color: #111;
margin-bottom: 50px;
letter-spacing: -1px;
}
/* ๋กค๋ง ๋ฐฐ๋ ์ ์ฒด ๊ฐ์ธ๊ฐ (ํ๋ฉด ๊ฝ ์ฐจ๊ฒ) */
.brand_marquee_wrap {
width: 100%;
overflow: hidden;
position: relative;
/* ์์๋ ์ ์ด ํ์ํ์๋ค๋ฉด ์๋ ํ
๋๋ฆฌ๋ฅผ ์ผ์ฃผ์ธ์ (์ ํ์ฌํญ) */
/* border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 20px 0; */
}
/* ์์ง์ด๋ ํธ๋ */
.brand_marquee_track {
display: flex;
width: fit-content;
animation: brandScroll 45s linear infinite;
}
.brand_marquee_wrap:hover .brand_marquee_track {
animation-play-state: paused;
}
/* ๐ฅ ํ๋์ ๋ก๊ณ ์ธํธ (ํ๋ฉด ๊ฝ ์ฐจ๊ฒ 100vw๋ก ์ค์ ) */
.brand_marquee_set {
display: flex;
flex-shrink: 0;
width: 100vw; /* 1๊ฐ์ ์ธํธ๊ฐ ๋ธ๋ผ์ฐ์ ์ฐฝ ๋๋น์ 1:1๋ก ์ผ์นํ๊ฒ ๋จ */
}
/* ๊ฐ๋ณ ๋ก๊ณ ์์ดํ
(์ธํธ ๋๋น์ ์ ํํ 1/6 ์ฌ์ด์ฆ๋ก ๋ถํ ) */
.brand_item {
flex: 0 0 calc(100% / 6);
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
}
.brand_item img {
max-width: 100%;
height: auto;
max-height: 70px;
object-fit: contain;
}
@keyframes brandScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* --- ๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ ๋ฐ์ํ --- */
@media (max-width: 1024px) {
/* ํ๋ธ๋ฆฟ: ์ธํธ ๋๋น๋ฅผ ํ๋ฉด์ 1.5๋ฐฐ๋ก ๋๋ ค ํ ํ๋ฉด์ ์ฝ 4๊ฐ ๋ณด์ */
.brand_marquee_set { width: 150vw; }
}
@media (max-width: 768px) {
.dr_brand_title { font-size: 26px; margin-bottom: 30px; }
/* ๋ชจ๋ฐ์ผ: ์ธํธ ๋๋น๋ฅผ ํ๋ฉด์ 2.5๋ฐฐ๋ก ๋๋ ค ํ ํ๋ฉด์ ์ฝ 2.5๊ฐ ๋ณด์ */
.brand_marquee_set { width: 250vw; }
.brand_item img { max-height: 50px; }
.brand_marquee_track { animation-duration: 20s; }
}
/* ========================================================
[์์ ] Dr Section 5 - ๋ฐฐ๊ฒฝ ์ ์ฒด ์ด๋ฏธ์ง + ์ข์ธก ํ
์คํธ
======================================================== */
.dr_sec5_wrap {
width: 100%;
min-height: 800px; /* ์์ฅ๋ ์ฌ์ง์ด ์ถฉ๋ถํ ๋ณด์ผ ์ ์๋๋ก ์ต์ ๋์ด ์ง์ */
background-size: cover; /* ๐ฅ ๋นํ์์ด ํ๋ฉด์ ๊ฝ ์ฑ์ฐ๊ธฐ */
background-position: center right; /* ์์ฅ๋์ด ์ค๋ฅธ์ชฝ์ ์์ผ๋ฏ๋ก ์ฐ์ธก ์ค์ ๊ธฐ์ค ์ ๋ ฌ */
background-repeat: no-repeat;
display: flex;
align-items: center; /* ํ
์คํธ ์์ง ์ค์ ์ ๋ ฌ */
}
.dr_sec5_text {
width: 100%;
max-width: 600px; /* ๊ธ์จ๊ฐ ๊ธธ์ด์ ธ์ ์์ฅ๋ ์ผ๊ตด์ ๊ฐ๋ฆฌ์ง ์๊ฒ ์ ํ */
}
/* ์๋จ ํ
์คํธ (ํ๊ตญ์ด) */
.dr_sec5_text .title_top {
font-size: 40px;
color: #222;
line-height: 1.5;
margin-bottom: 45px;
font-weight: 400;
letter-spacing: -1px;
}
/* ํ๋จ ํ
์คํธ (์์ด) */
.dr_sec5_text .title_bottom {
font-size: 30px;
color: #333;
line-height: 1.5;
margin: 0;
font-weight: 400;
letter-spacing: -0.5px;
}
/* ํ
์คํธ ๊ตต๊ธฐ ๊ฐ์กฐ ์ฒ๋ฆฌ */
.dr_sec5_text strong {
font-weight: 800;
color: #111;
}
/* --- ๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ ๋ฐ์ํ --- */
@media (max-width: 1024px) {
.dr_sec5_wrap {
background-position: 70% center; /* ํ๋ธ๋ฆฟ์์ ์ด์ง ์ผ์ชฝ์ผ๋ก ๋น๊ฒจ ๋ฐธ๋ฐ์ค ๋ง์ถค */
}
.dr_sec5_text .title_top { font-size: 32px; margin-bottom: 30px; }
.dr_sec5_text .title_bottom { font-size: 24px; }
}
@media (max-width: 768px) {
.dr_sec5_wrap {
min-height: auto;
/* ๋ชจ๋ฐ์ผ์์ ๊ธ์จ ์๋๋ก ์์ฅ๋ ์ผ๊ตด์ด ๋ณด์ฌ์ผ ํ๋ฏ๋ก ํ๋จ ํจ๋ฉ(350px)์ ํฌ๊ฒ ์ค๋๋ค */
padding: 80px 20px 350px 20px;
background-position: bottom right; /* ํ๋จ ์ฐ์ธก ๊ธฐ์ค ์ ๋ ฌ */
background-size: 150%; /* ๋ชจ๋ฐ์ผ์์ ์ธ๋ฌผ์ด ์์์ง์ง ์๊ฒ ํ๋ */
align-items: flex-start;
}
/* ๐ฅ ๋ชจ๋ฐ์ผ์์ ์ท์ด๋ ๋ฐฐ๊ฒฝ์ ๊ธ์จ๊ฐ ๋ฌปํ์ง ์๊ฒ ๋ฐํฌ๋ช
๋ฐ์ค ์ ์ฉ */
.dr_sec5_text {
background: rgba(255, 255, 255, 0.7);
padding: 30px;
border-radius: 15px;
backdrop-filter: blur(5px);
}
.dr_sec5_text .title_top { font-size: 28px; margin-bottom: 20px; }
.dr_sec5_text .title_bottom { font-size: 20px; }
}
/* ========================================================
์๋ฃ์ง ์๊ฐ (Dr. Kim) ๋ชจ๋ฐ์ผ ์ต์ ํ ์์ ๋ณธ (768px ์ดํ ์ ์ฉ)
(๊ธฐ์กด CSS์ ๊ฐ์ฅ ๋ง์ง๋ง์ ์ถ๊ฐํด ์ฃผ์ธ์)
======================================================== */
@media (max-width: 768px) {
/* ----------------------------------------------------
1. Section 2: ํต๊ณ(2%, 100%) ์ผ์ชฝ ์น์ฐ์นจ ํด๊ฒฐ
(๊ฐ๋ก ๋ฐฉํฅ์ด ์๋ ์ธ๋ก ๋ฐฉํฅ์ ์ค์ ์ ๋ ฌ์ ์ํด center ์ ์ฉ)
---------------------------------------------------- */
.dr_stats_box {
align-items: center !important;
}
.dr_stat_item {
width: 100% !important; /* ์ข์ ๋ฐ์ค๋ฅผ ํ์ด์ฃผ์ด ์๋ฒฝํ ์ค์ ์ ๋ ฌ */
}
/* ----------------------------------------------------
2. Section 2: ํ
์คํธ ๋์ด์ฐ๊ธฐ(์ค๋ฐ๊ฟ) ์ด์ํจ ํด๊ฒฐ
(๋ชจ๋ฐ์ผ์์๋ ์ต์ง ์ค๋ฐ๊ฟ์ ์ ๋ฐํ๋
ํ๊ทธ๋ฅผ ์จ๊ฒจ ์์ฐ์ค๋ฝ๊ฒ ํ๋ฅด๋๋ก ํจ)
---------------------------------------------------- */
.dr_desc_box p {
padding: 0 10px;
}
.dr_desc_box p br {
display: none;
}
/* ----------------------------------------------------
3. Section 3: ์์ฅ๋ ์ฌ์ง ๊ฐ๋ ค์ง ํด๊ฒฐ (์ฌ์ง ์, ๊ธ์จ ์๋ ๋ถ๋ฆฌ ํจ๊ณผ)
---------------------------------------------------- */
.dr_sec3_wrap {
/* ์์ชฝ ์ฌ๋ฐฑ์ 350px ์ด์ ์ฃผ์ด ์์ฅ๋ ์ผ๊ตด์ด ๋จผ์ ์์ํ๊ฒ ๋ณด์ด๋๋ก ํจ */
padding: 350px 20px 50px 20px !important;
background-position: top center !important; /* ์ด๋ฏธ์ง๋ฅผ ์๋จ ์ค์์ผ๋ก ๋ง์ถค */
background-size: 130% !important; /* ๋ชจ๋ฐ์ผ ํ๋ฉด์ ๋ง๊ฒ ์ธ๋ฌผ ์ด์ง ํ๋ */
align-items: flex-end !important; /* ํ
์คํธ ๋ฐ์ค๋ฅผ ์๋์ชฝ์ผ๋ก ๋ฐ์ด๋ */
}
.dr_sec3_text_box {
background: rgba(255, 255, 255, 0.85) !important; /* ๊ฐ๋
์ฑ์ ์ํด ๋ถํฌ๋ช
๋ ํฅ์ */
padding: 30px !important;
border-radius: 15px !important;
}
/* ๋ชจ๋ฐ์ผ์์๋ ๋ณธ๋ฌธ์ ์ธ์์ ์ธ ์ค๋ฐ๊ฟ(
)์ ์์ ์ ํ
์คํธ ๋ญ๊ฐ์ง ๋ฐฉ์ง */
.dr_sec3_desc p br {
display: none;
}
/* ----------------------------------------------------
4. Section 4: ํญ ๋ฒํผ ๊ธ์ ํฌ๊ธฐ ์ถ์ (20px -> 15px)
---------------------------------------------------- */
.dr_tab_nav li a {
font-size: 15px !important;
padding: 12px 0 !important;
}
/* ----------------------------------------------------
5. Section 4: ๋ฐํ ๋ฐ ๊ฐ์ฐ ๋กค๋ง ์ฌ๋ผ์ด๋ ์๋ ์กฐ์ (๋๋ฌด ๋น ๋ฆ ํด๊ฒฐ)
---------------------------------------------------- */
.marquee_track {
/* ๊ธฐ์กด 30s์์ 120s๋ก ๋ํญ ๋๋ ค ์์ฃผ ์ฒ์ฒํ ์ฝ์ ์ ์๊ฒ ๋ฆ์ถค */
animation-duration: 240s !important;
}
/* ----------------------------------------------------
6. ๋ธ๋๋ ์๋ฌธ์์: ๋ก๊ณ ํฌ๊ธฐ ๋ํญ ํ๋ (์๊ฒฐํ)
---------------------------------------------------- */
.brand_marquee_set {
/* ๊ธฐ์กด 180vw -> 300vw ๋ก ํ์ฅ
(ํ๋ฉด ๋๋น์ 3๋ฐฐ! ์ฆ, 6๊ฐ ๋ก๊ณ ๊ฐ ํ ํ๋ฉด์ 2๊ฐ์ฉ๋ง ํผ์งํ๊ฒ ๊ฝ ์ฐจ์ ๋ณด์
๋๋ค) */
width: 300vw !important;
}
.brand_item {
padding: 0 15px !important;
}
.brand_item img {
/* ๊ธฐ์กด 70px ๋์ด ์ ํ์ 120px๋ก ํ ํ์ด์ ์ ์ฝ ์์ด ์ปค์ง๊ฒ ํจ */
max-height: 120px !important;
max-width: 90% !important;
object-fit: contain !important;
}
/* ----------------------------------------------------
7. Section 5 (๋ง์ง๋ง ํ๋กํ): ํ
์คํธ ์ผ์ชฝ ์น์ฐ์นจ ํด๊ฒฐ
---------------------------------------------------- */
.dr_sec5_text {
text-align: center !important; /* ์ค์ ์ ๋ ฌ ๊ฐ์ ์ ์ฉ */
margin: 0 auto !important; /* ๋ฐ์ค ์์ฒด๋ฅผ ์ค์์ผ๋ก ๋ฐฐ์น */
}
.dr_sec5_text p {
text-align: center !important;
}
}
/* ========================================================
Contact / Online Reservation - Hero Section 1
======================================================== */
.reserve_hero_wrap {
width: 100%;
height: 82vh;
min-height: 800px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
position: relative;
}
/* ๐ฅ [์ถ๊ฐ] 1800px ์ด๋ ์ปจํ
์ด๋ ๊ฐ์ ๊ณ ์ */
.reserve_hero_wrap .n_inner_1800 {
width: 100%;
max-width: 1800px;
margin: 0 auto;
padding: 0 40px; /* ์ข์ฐ ํ๋ฉด ๋์ ๋ฑ ๋ถ์ง ์๊ฒ ์ฌ๋ฐฑ */
box-sizing: border-box;
}
/* ํ
์คํธ ์ปจํ
์ด๋ */
.reserve_hero_text_box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
/* --- ๋ฉ์ธ ํ์ดํ (ONLINE RESERVATION) --- */
.reserve_main_title {
font-size: 70px;
font-weight: 800;
color: #fff;
line-height: 1.1;
margin: 0 0 15px 0;
display: flex;
gap: 20px; /* ๋ ๋จ์ด ์ฌ์ด ๊ฐ๊ฒฉ */
overflow: hidden; /* ๊ธ์จ๊ฐ ๋ฐ์์ ์์ผ๋ก ๋ค์ด์ค๋ ํจ๊ณผ๋ฅผ ๊ทน๋ํ */
}
/* ONLINE (์๋์์ ์๋ก) */
.reserve_main_title .word_up {
display: inline-block;
opacity: 0;
animation: heroSlideUp 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
/* RESERVATION (์์์ ์๋๋ก) */
.reserve_main_title .word_down {
display: inline-block;
opacity: 0;
animation: heroSlideDown 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
/* --- ์๋ธ ํ์ดํ (์จ๋ผ์ธ ์์ฝ) --- */
.reserve_sub_title {
font-size: 28px;
font-weight: 500;
margin: 0;
color: #fff; /* ๊ธฐ๋ณธ ํฐ์ ์์ */
opacity: 0;
/* ์ด 2.5์ด ๋์ ๋๊ธฐ -> ๋ฑ์ฅ -> ์์ ๋ณ๊ฒฝ์ ์์ฐจ์ ์ผ๋ก ์ํ */
animation: subSlideAndColor 2.5s forwards;
}
/* ========================================================
Keyframes (์ ๋๋ฉ์ด์
์ธํ
)
======================================================== */
/* ๋ฉ์ธ ํ์ดํ 1: ์๋์์ ์๋ก */
@keyframes heroSlideUp {
0% { transform: translateY(100%); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
/* ๋ฉ์ธ ํ์ดํ 2: ์์์ ์๋๋ก */
@keyframes heroSlideDown {
0% { transform: translateY(-100%); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
/* ์๋ธ ํ์ดํ: ๋๊ธฐ -> ์ข์ธก ์ฌ๋ผ์ด๋์ธ -> ๋
ธ๋์ ๋ณ๊ฒฝ */
@keyframes subSlideAndColor {
/* 0% ~ 40% (์ฝ 1์ด๊ฐ) : ๋ฉ์ธ ํ์ดํ์ด ํฉ์ณ์ง ๋๊น์ง ํฌ๋ช
ํ ์ํ๋ก ๋๊ธฐ */
0%, 40% {
transform: translateX(-50px);
opacity: 0;
color: #ffffff;
}
/* 40% ~ 70% (์ฝ 1์ด~1.75์ด) : ์ผ์ชฝ์์ ์ ์๋ฆฌ๋ก ์ค๋ฅด๋ฅต ๋ฑ์ฅ (ํฐ์ ์ ์ง) */
70% {
transform: translateX(0);
opacity: 1;
color: #ffffff;
}
/* 70% ~ 100% (์ฝ 1.75์ด~2.5์ด) : ์ค๋ฌด์คํ๊ฒ ๋
ธ๋์์ผ๋ก ๋ณ์ ! */
100% {
transform: translateX(0);
opacity: 1;
color: #fdd000; /* ์์์ ๋ง๋ ๋
ธ๋์ ์ฝ๋๋ก ๋ณ๊ฒฝ ๊ฐ๋ฅ */
}
}
/* --- ๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ ๋ฐ์ํ --- */
@media (max-width: 1024px) {
.reserve_main_title { font-size: 55px; }
.reserve_sub_title { font-size: 24px; }
}
@media (max-width: 768px) {
.reserve_main_title {
font-size: 40px;
flex-direction: column; /* ๋ชจ๋ฐ์ผ์์ ๊ฐ๋ก ๊ณต๊ฐ์ด ๋ถ์กฑํ๋ ์ธ๋ก๋ก ๋ฐฐ์น */
gap: 5px;
}
.reserve_sub_title { font-size: 20px; }
/* ๋ชจ๋ฐ์ผ์์ ์ธ๋ก ๋ฐฐ์น์ด๋ฏ๋ก ์์๋ ์ ๋๋ฉ์ด์
๋์ ์์ ์ ๋๋ฉ์ด์
์ผ๋ก ๋ณ๊ฒฝํด๋ ์์ฉ๋๋ค (ํ์ฌ๋ ์์๋ ์ ์ง) */
}
/* ========================================================
Contact - Reservation Step Section (๋ค์ด๋ฒ ์์ฝ ์ ์ฐจ)
======================================================== */
/* --- 1. Section 2 ์ ์ฒด ๊ฐ์ธ๊ฐ (ํ๋จ ํฐ์ ์ฌ๋ฐฑ ์ ๊ฑฐ) --- */
.reserve_step_wrap {
width: 100%;
/* ๊ธฐ์กด padding: 100px 0; ์์ ํ๋จ ํจ๋ฉ(0)์ ์์ ์ ํ์๋ฐ์ค๊ฐ ๋ฐ๋ฅ์ ๋ถ๊ฒ ๋ง๋ญ๋๋ค */
padding: 100px 0 0 0;
background: #fff;
}
/* --- ์๋จ ํ์ดํ ์์ญ --- */
.reserve_step_header {
margin-bottom: 40px;
}
/* ๐ฅ ๊ธ์จ ๋๊ป ํ์คํ ๋๋น ์ฃผ๊ธฐ */
.step_main_title {
font-size: 45px;
color: #111;
margin: 0 0 15px 0;
letter-spacing: -1.5px;
}
.step_main_title .fw_light {
font-weight: 500; /* ์์/์ค๊ฐ ๊ตต๊ธฐ */
}
.step_main_title .fw_bold {
font-weight: 800; /* ์์ฃผ ๋๊บผ์ด ๊ตต๊ธฐ */
}
.step_sub_desc {
font-size: 20px;
color: #333;
font-weight: 400;
margin: 0;
}
/* --- 2. ํ์์ด๋ ํ์ ๋ฐ์ค๋ก ๊ต์ฒด (๊ธฐ์กด .reserve_step_box ๋์ ์ฌ์ฉ) --- */
.reserve_step_box_full {
width: 100%;
background: #e9e9e9;
padding: 60px 0; /* ํ์ ๋ฐ์ค ์์๋ ์ฌ๋ฐฑ */
/* border-radius ์ ๊ฑฐ๋จ */
}
/* ํ์ ๋ฐ์ค ์์ชฝ ์ปจํ
์ธ ์ ๋ ฌ */
.reserve_step_box_inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 50px;
}
/* ์ข์ธก ํ๋ก์ธ์ค ์์ด์ฝ ์์ญ */
.step_flow {
display: flex;
align-items: flex-start;
gap: 15px;
flex: 1; /* ๋จ์ ๊ณต๊ฐ ์ฐจ์ง */
}
.step_item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 120px; /* ๊ฐ ๋จ๊ณ ๋์ด ๊ท ์ผํ๊ฒ */
}
.icon_circle {
width: 120px;
height: 120px;
background: #b5b5b5; /* ๊ธฐ๋ณธ ํ์ ๋ฐฐ๊ฒฝ */
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
transition: transform 0.3s ease;
}
.icon_circle:hover {
transform: translateY(-5px);
}
.icon_circle img {
width: 60px; /* ์์ด์ฝ ํฌ๊ธฐ ์กฐ์ */
height: auto;
object-fit: contain;
}
/* ๐ฅ ๋ง์ง๋ง ๋จ๊ณ ๋
ธ๋์ ๊ฐ์กฐ */
.icon_circle.active {
background: #fdd000;
}
.step_item p {
font-size: 16px;
color: #111;
font-weight: 700;
line-height: 1.4;
margin: 0;
}
/* ํ์ดํ ๋ชจ์ ๊ทธ๋ฆฌ๊ธฐ (CSS) */
.step_arrow {
width: 15px;
height: 15px;
border-top: 2px solid #666;
border-right: 2px solid #666;
transform: rotate(45deg);
margin-top: 52px; /* ์์ ์ค์ ์์น์ ๋ง๊ฒ ์กฐ์ */
}
/* --- ์ฐ์ธก ์ค๋ช
๋ฐ ๋ฒํผ ์์ญ --- */
.step_info {
flex: 0 0 400px; /* ์ฐ์ธก ์์ญ ๋์ด ๊ณ ์ */
}
.step_info h3 {
font-size: 30px;
font-weight: 800;
color: #222;
margin: 0 0 15px 0;
}
.step_info p {
font-size: 15px;
color: #444;
line-height: 1.6;
margin: 0 0 30px 0;
word-break: keep-all;
}
/* ๋ค์ด๋ฒ ์์ฝ ๋ฅ๊ทผ ๋ฒํผ */
.btn_naver_booking {
display: inline-block;
background: #03c75a; /* ๋ค์ด๋ฒ ๊ณต์ ๊ทธ๋ฆฐ ์์ */
color: #fff !important;
font-size: 18px;
font-weight: 700;
padding: 16px 35px;
border-radius: 8px;
text-decoration: none !important;
transition: all 0.3s ease;
}
.btn_naver_booking:hover {
background: #02b350;
box-shadow: 0 5px 15px rgba(3, 199, 90, 0.3);
transform: translateY(-2px);
}
/* --- ๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ ๋ฐ์ํ --- */
@media (max-width: 1200px) {
.reserve_step_box { flex-direction: column; align-items: flex-start; padding: 50px; }
.step_info { flex: none; width: 100%; margin-top: 20px; }
}
/* ๋ชจ๋ฐ์ผ ๋ฐ์ํ ์ ๊ตฌ์กฐ ๋ณ๊ฒฝ */
@media (max-width: 1200px) {
.reserve_step_box_inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 768px) {
.reserve_step_wrap { padding: 60px 0; }
.step_main_title { font-size: 32px; }
.step_sub_desc { font-size: 16px; }
.reserve_step_box { padding: 30px 20px; }
/* ๋ชจ๋ฐ์ผ์์ ๊ฐ๋ก ๊ณต๊ฐ์ด ์ข์ ํ์ดํ ์ ๊ฑฐํ๊ณ ์์ด์ฝ ๊ฐ๊ฒฉ์ ์ขํ๋๋ค */
.step_flow { gap: 10px; justify-content: space-between; width: 100%; }
.step_arrow { display: none; }
.icon_circle { width: 70px; height: 70px; margin-bottom: 15px; }
.icon_circle img { width: 35px; }
.step_item { width: 24%; }
.step_item p { font-size: 12px; }
.step_info h3 { font-size: 24px; }
.step_info p { font-size: 14px; }
.btn_naver_booking { width: 100%; text-align: center; }
}
/* ========================================================
3. Contact - Calendar & Form Section (๋์ด์ฌ๋ฆฌ๊ธฐ)
======================================================== */
.reserve_form_wrap {
width: 100%;
/* ๐ฅ ์๋จ ํจ๋ฉ์ ๊ธฐ์กด 100px -> 60px ๋ก ํ ์ค์ฌ์ ์๋ก ๋ฐ์ง ๋์ด์ฌ๋ฆผ */
padding: 60px 0 150px 0;
background: #fff;
}
/* 2๋จ ๋ถํ ์ปจํ
์ด๋ (1400 ์์์ ๊ฐ๊ฒฉ ์ขํ) */
.reserve_form_container {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 60px; /* ๐ฅ ๊ธฐ์กด 80px์์ 60px๋ก ๊ฐ๊ฒฉ ์ค์ */
}
/* ์ข์ธก ๋ฌ๋ ฅ ์์ญ (1/3 ๋น์จ) */
.reserve_left_cal {
flex: 1; /* ๐ฅ ๋น์จ 1 */
width: 100%;
}
/* (์ด ๋ถ๋ถ์ ๋ฌ๋ ฅ์ด ๋ถ๋ชจ๋ฅผ ๋์ด๊ฐ์ง ์๊ฒ ๋ฐฉ์ดํ๋ ์ฝ๋์ด๋ฏ๋ก ๊ทธ๋๋ก ๋ก๋๋ค) */
.reserve_left_cal > div,
.reserve_left_cal table,
.reserve_left_cal iframe {
width: 100% !important;
max-width: 100% !important;
}
/* ์ฐ์ธก ํผ ์์ญ (2/3 ๋น์จ) */
.reserve_right_form {
flex: 2; /* ๐ฅ ๋น์จ 2 */
width: 100%;
max-width: none; /* ๐ฅ ์ด์ ์ ๊ฑธ์ด๋์๋ 550px ์ ํ์ ํ์ด์ 2/3 ์์ญ์ ์์ํ๊ฒ ๋ค ์ฐ๊ฒ ํฉ๋๋ค */
}
/* --- ํผ ํ์ดํ ์์ญ (๊ธ์จ + ๊ฐ๋ก์ ) --- */
.form_title_wrap {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 40px;
}
.form_title_wrap h3 {
font-size: 24px;
font-weight: 800;
color: #111;
margin: 0;
white-space: nowrap; /* ๊ธ์จ๊ฐ ์ค๋ฐ๊ฟ๋์ง ์๋๋ก ๋ฐฉ์ง */
}
.form_title_wrap .title_line {
flex: 1; /* ๋จ์ ๋น ๊ณต๊ฐ์ ์ ์ผ๋ก ๊ฝ ์ฑ์ */
height: 1px;
background: #dcdcdc; /* ์์๊ณผ ๊ฐ์ ์ฐํ ํ์ ์ */
}
/* --- ์์ ๋ง์ถคํ ์ ์ถ ๋ฒํผ ๋ฎ์ด์ฐ๊ธฐ --- */
/* (์ด์ ์ ๋ง๋ vos_submit_btn ํด๋์ค๋ณด๋ค ์ฐ์ ์ ์ฉ๋์ด ์์์ฒ๋ผ ๊ฝ ์ฐจ๊ฒ ๋ง๋ญ๋๋ค) */
.reserve_right_form .vos_submit_btn input[type="submit"] {
width: 100%; /* ๋ฒํผ์ ๊ฐ๋ก๋ก ๊ฝ ์ฐจ๊ฒ */
background: #333333; /* ์์์ฒ๋ผ ๋คํฌ ๊ทธ๋ ์ด ์์ */
border-radius: 6px; /* ์ด์ง ๋ฅ๊ทผ ๋ชจ์๋ฆฌ */
padding: 20px 0;
margin-top: 20px;
}
.reserve_right_form .vos_submit_btn input[type="submit"]:hover {
background: #111111;
}
/* --- ๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ ๋ฐ์ํ --- */
@media (max-width: 1024px) {
/* ํ๋ฉด์ด ์ข์์ง๋ฉด ๋ฌ๋ ฅ๊ณผ ํผ์ ์์๋๋ก ๋จ์ด๋จ๋ฆผ */
.reserve_form_container {
flex-direction: column;
gap: 80px;
}
.reserve_left_cal,
.reserve_right_form {
max-width: 100%;
width: 100%;
}
}
@media (max-width: 768px) {
.reserve_form_wrap { padding: 60px 0 100px 0; }
.form_title_wrap h3 { font-size: 20px; }
}
/* ========================================================
Contact - Consultation Channels (์๋ด ์ฑ๋ ์๋ด - ๊ฐ์ด๋ฐ ์ ๋ ฌ ๋ฒ์ )
======================================================== */
.reserve_channel_full {
width: 100%;
background: #f2f2f2;
padding: 80px 0 100px 0;
}
/* ๋ฉ์ธ ํ์ดํ */
.channel_main_title {
font-size: 32px;
font-weight: 800;
color: #222;
margin-bottom: 50px;
letter-spacing: -1px;
}
/* 3๋จ ๊ทธ๋ฆฌ๋ ๋ํผ */
.channel_grid_wrap {
display: flex;
justify-content: space-between;
align-items: stretch;
}
/* ๊ฐ ํญ๋ชฉ ๋ฐ์ค */
.channel_item {
flex: 1;
display: flex;
justify-content: center;
position: relative;
padding: 20px 40px;
}
/* ์ธ๋ก ๊ตฌ๋ถ์ */
.channel_item:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 10%;
height: 80%;
width: 1px;
background: #ccc;
}
/* ๐ฅ ์์ชฝ ์ปจํ
์ธ ๊ฐ์ด๋ฐ ์ ๋ ฌ (์์ ๋ฐ์) */
.channel_inner {
display: flex;
flex-direction: column;
align-items: center; /* ๊ฐ์ด๋ฐ ์ ๋ ฌ๋ก ๋ณ๊ฒฝ */
text-align: center; /* ํ
์คํธ๋ ๊ฐ์ด๋ฐ ์ ๋ ฌ */
}
/* ์ฑ๋๋ณ ํ์ดํ (์์ด์ฝ + ํ
์คํธ) */
.channel_tit {
display: flex;
align-items: center;
justify-content: center; /* ์์ด์ฝ๊ณผ ๊ธ์ ๊ทธ๋ฃน๋ ๊ฐ์ด๋ฐ ์ ๋ ฌ */
gap: 12px;
margin-bottom: 25px;
}
.channel_tit img {
height: 30px;
width: auto;
}
.channel_tit span {
font-size: 24px;
font-weight: 700;
color: #111;
letter-spacing: -0.5px;
}
/* --- ๊ฐ๋ณ ์ฝํ
์ธ ์คํ์ผ --- */
.channel_cont {
width: 100%;
}
/* ์ ํ๋ฒํธ */
.phone_num {
font-size: 42px;
font-weight: 800;
color: #222;
padding-top: 10px;
letter-spacing: -1px;
text-align: center; /* ์ ํ๋ฒํธ ๊ฐ์ด๋ฐ ์ ๋ ฌ */
}
/* QR ์์ญ */
.qr_cont {
display: flex;
flex-direction: column;
align-items: center; /* QR์ฝ๋ ๊ฐ์ด๋ฐ ์ ๋ ฌ */
}
.qr_img {
width: 140px;
height: 140px;
border: 1px solid #111;
margin-bottom: 15px;
object-fit: contain;
}
.qr_text {
font-size: 15px;
color: #666;
line-height: 1.5;
margin: 0;
word-break: keep-all;
text-align: center; /* QR ์ค๋ช
๊ธ ๊ฐ์ด๋ฐ ์ ๋ ฌ */
}
.qr_text strong {
color: #444;
font-weight: 700;
}
/* --- ๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ ๋ฐ์ํ --- */
@media (max-width: 1024px) {
.channel_tit span { font-size: 20px; }
.phone_num { font-size: 32px; }
.channel_item { padding: 20px 20px; }
.qr_img { width: 120px; height: 120px; }
}
@media (max-width: 768px) {
.channel_grid_wrap {
flex-direction: column;
gap: 50px;
}
.channel_item {
padding: 0;
justify-content: center; /* ๋ชจ๋ฐ์ผ์์๋ ๊ฐ์ด๋ฐ ์ ๋ ฌ ์ ์ง */
}
.channel_item:not(:last-child)::after {
display: none;
}
.channel_item:not(:last-child) {
border-bottom: 1px solid #ddd;
padding-bottom: 40px;
}
}
/* ========================================================
Contact - Location & Hours Map Section (์ง๋ & ์ด์์๊ฐ)
======================================================== */
.map_section_wrap {
position: relative;
width: 100%;
/* ์์์ฒ๋ผ ์ง๋๊ฐ ๋๊ฒ ๊น๋ฆฌ๋๋ก ๋์ด๋ฅผ ๋๋ํ๊ฒ 750px๋ก ์ก์ต๋๋ค */
height: 750px;
}
/* ํ์์ด๋ ์ง๋ ๋ฐฐ๊ฒฝ (์ ๋์์น๋ก ๋ฐ๋ฅ์ ๊น๊ธฐ) */
.map_full_bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
/* ์ด์์๊ฐ ์นด๋๋ฅผ ๊ฐ์ธ๋ ์ค๋ฒ๋ ์ด ์์ญ */
.map_overlay_content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
display: flex;
align-items: center; /* ์นด๋๋ฅผ ์ธ๋ก ์ค์์ ๋ฐฐ์น */
/* ๐ฅ ํต์ฌ: ์ค๋ฒ๋ ์ด ์์ญ์ด ์ง๋์ ํด๋ฆญ/๋๋๊ทธ๋ฅผ ๋ฐฉํดํ์ง ์๊ฒ ํฌ๋ช
์ธ๊ฐ ์ฒ๋ฆฌ */
pointer-events: none;
}
.map_overlay_content .n_inner_1800 {
width: 100%;
}
/* ํ์์ ์ด์์๊ฐ ์นด๋ ๋์์ธ */
.hours_card {
background: #fff;
width: 440px;
padding: 60px 50px;
box-shadow: 5px 15px 40px rgba(0,0,0,0.15); /* ์ง๋ ์์์ ๋์ ๋๊ฒ ๊ทธ๋ฆผ์ ๋ถ์ฌ */
/* ์นด๋ ์์ญ์ ๋ค์ ๋ง์ฐ์ค ํด๋ฆญ์ด๋ ๋๋๊ทธ ํ
์คํธ ์ ํ์ด ๊ฐ๋ฅํ๋๋ก ๋ณต๊ตฌ */
pointer-events: auto;
}
/* ๋ก๊ณ ์์ญ */
.hc_logo {
margin-bottom: 40px;
}
.hc_logo img {
height: 35px; /* ๋ก๊ณ ๋์ด */
width: auto;
}
/* ํ์ดํ & ์ฐ์ธก ์ */
.hc_title {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 30px;
}
.hc_title h3 {
font-size: 22px;
font-weight: 800;
color: #111;
margin: 0;
white-space: nowrap;
}
.hc_line {
flex: 1;
height: 1px;
background: #555; /* ์งํ ํ์ ์ */
}
/* ์๊ฐํ ๋ฆฌ์คํธ */
.hc_schedule {
list-style: none;
padding: 0;
margin: 0 0 30px 0;
border-bottom: 1px solid #ccc; /* ํ๋จ ์์ ์ */
padding-bottom: 25px;
}
.hc_schedule li {
display: flex;
justify-content: space-between;
margin-bottom: 18px;
font-size: 16px;
color: #111;
}
.hc_schedule li:last-child {
margin-bottom: 0;
}
.hc_schedule li span {
font-weight: 500;
}
.hc_schedule li strong {
font-weight: 700;
}
/* ํ๋จ ์๋ด ํ
์คํธ (ํด์ง์๋ด ๋ฑ) */
.hc_notes {
margin-bottom: 40px;
}
.hc_notes p {
font-size: 14px;
color: #666;
margin: 0 0 8px 0;
line-height: 1.4;
}
/* ๋ํ์ ํ */
.hc_phone p {
font-size: 18px;
font-weight: 700;
color: #111;
margin: 0 0 5px 0;
}
.hc_phone strong {
font-size: 40px;
font-weight: 800;
color: #111;
letter-spacing: -1px;
}
/* ========================================================
๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ ๋ฐ์ํ ์ฒ๋ฆฌ
======================================================== */
@media (max-width: 1024px) {
.hours_card { width: 380px; padding: 40px; }
.hc_phone strong { font-size: 32px; }
}
@media (max-width: 768px) {
.map_section_wrap {
height: auto;
display: flex;
/* ๋ชจ๋ฐ์ผ์์ ์นด๋๊ฐ ๋จผ์ ๋์ค๊ณ ๊ทธ ๋ฐ์ ์ง๋๊ฐ ๊น๋ฆฌ๊ฒ ๋ค์ง์ */
flex-direction: column-reverse;
}
.map_full_bg {
position: relative;
height: 400px; /* ๋ชจ๋ฐ์ผ ์ง๋ ๋์ด */
}
.map_overlay_content {
position: relative;
padding: 40px 20px;
background: #fff; /* ๋ชจ๋ฐ์ผ์์ ๊ฒน์น์ง ์๊ณ ๋ถ๋ฆฌ */
pointer-events: auto;
}
.hours_card {
width: 100%;
padding: 0;
box-shadow: none;
}
}
/* ========================================================
Location - Hero Section 1 (์ง๋ฃ์๊ฐ / ์ค์๋๊ธธ)
======================================================== */
.location_hero_wrap {
width: 100%;
height: 82vh;
min-height: 800px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
position: relative;
}
/* 1800px ์ด๋ ์ปจํ
์ด๋ ๊ฐ์ ๊ณ ์ */
.location_hero_wrap .n_inner_1800 {
width: 100%;
max-width: 1800px;
margin: 0 auto;
padding: 0 40px;
box-sizing: border-box;
}
/* ํ
์คํธ ์ปจํ
์ด๋ */
.location_hero_text_box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
/* --- ๋ฉ์ธ ํ์ดํ (HOURS & LOCATION) --- */
.location_main_title {
font-size: 70px;
font-weight: 800;
color: #fff;
line-height: 1.1;
margin: 0 0 15px 0;
display: flex;
gap: 20px;
overflow: hidden;
}
/* HOURS & (์๋์์ ์๋ก) */
.location_main_title .word_up {
display: inline-block;
opacity: 0;
animation: heroSlideUp 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
/* LOCATION (์์์ ์๋๋ก) */
.location_main_title .word_down {
display: inline-block;
opacity: 0;
animation: heroSlideDown 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
/* --- ์๋ธ ํ์ดํ (์ง๋ฃ์๊ฐ / ์ค์๋๊ธธ) --- */
.location_sub_title {
font-size: 28px;
font-weight: 500;
margin: 0;
color: #fff;
opacity: 0;
/* ์์ฝ ํ์ด์ง์ ๋์ผํ๊ฒ ๋
ธ๋์์ผ๋ก ๋ณํ๋ ์ ๋๋ฉ์ด์
์ ์ฉ */
animation: subSlideAndColor 2.5s forwards;
}
/* --- ๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ ๋ฐ์ํ --- */
@media (max-width: 1024px) {
.location_main_title { font-size: 55px; }
.location_sub_title { font-size: 24px; }
}
@media (max-width: 768px) {
.location_main_title {
font-size: 40px;
flex-direction: column;
gap: 5px;
}
.location_sub_title { font-size: 20px; }
}
/* --- ์ด์์๊ฐ ์นด๋ ํ๋จ ๋ฒํผ ์์ญ (์ค์๋๊ธธ ํ์ด์ง ์ ์ฉ) --- */
.hc_buttons {
display: flex;
gap: 10px; /* ๋ฒํผ ์ฌ์ด ๊ฐ๊ฒฉ */
margin-top: 30px;
}
.hc_buttons a {
flex: 1; /* ๋ ๋ฒํผ์ด ์ ํํ 5:5 ๋น์จ์ ์ฐจ์งํ๋๋ก */
display: inline-flex;
justify-content: center;
align-items: center;
height: 48px;
border-radius: 24px; /* ์๋์ด ๋ฅ๊ทผ ์์ฝ ํํ */
font-size: 15px;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
}
/* ์ผ์ชฝ ๋
ธ๋์ ๋ฒํผ */
.hc_buttons .btn_yellow {
background: #fdd000;
color: #111 !important;
}
.hc_buttons .btn_yellow:hover {
background: #e6bd00;
transform: translateY(-2px);
}
/* ์ค๋ฅธ์ชฝ ์งํ์ ๋ฒํผ */
.hc_buttons .btn_gray {
background: #666666;
color: #fff !important;
}
.hc_buttons .btn_gray:hover {
background: #444444;
transform: translateY(-2px);
}
/* ๋ชจ๋ฐ์ผ ๋์: ๊ธ์จ๊ฐ ๊ธธ๋ฉด ์ข์์ง๋ฏ๋ก ์ฝ๊ฐ ์ถ์ */
@media (max-width: 480px) {
.hc_buttons { gap: 5px; }
.hc_buttons a { font-size: 13px; height: 42px; border-radius: 21px; }
}
/* ========================================================
Location - Information Section (์ค์๋ ๊ธธ ์์ธ ์ ๋ณด)
======================================================== */
.loc_info_wrap {
width: 100%;
padding: 100px 0;
background: #fff;
}
/* 2๋จ ๋ถํ ์ปจํ
์ด๋ */
.loc_info_container {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 80px;
}
/* --- ์ข์ธก ์์ญ --- */
.loc_left_area {
flex: 0 0 45%; /* ์ข์ธก ๋์ด ๊ณ ์ */
}
.loc_main_title {
font-size: 45px;
color: #111;
margin: 0 0 15px 0;
letter-spacing: -1.5px;
}
.loc_main_title .fw_light { font-weight: 500; }
.loc_main_title .fw_bold { font-weight: 800; }
.loc_sub_desc {
font-size: 20px;
color: #333;
font-weight: 400;
margin: 0 0 60px 0;
}
/* ํ
์คํธ ๋ฐ์ค ๊ฐ๊ฒฉ ์ ํธ๋ฆฌํฐ */
.mt_60 { margin-top: 60px; }
.mt_40 { margin-top: 40px; }
.loc_text_box h4 {
font-size: 20px;
font-weight: 800;
color: #111;
margin: 0 0 10px 0;
}
.loc_text_box p {
font-size: 18px;
color: #333;
margin: 0;
}
.loc_text_box .phone_txt {
font-size: 36px;
font-weight: 800;
letter-spacing: -1px;
}
/* --- ์ฐ์ธก ์์ญ (๊ตํตํธ ๋ฆฌ์คํธ) --- */
.loc_right_area {
flex: 1; /* ๋จ์ ๊ณต๊ฐ ๋ชจ๋ ์ฐจ์ง */
}
.trans_item {
display: flex;
align-items: flex-start;
gap: 30px;
margin-bottom: 50px;
}
.trans_item:last-child {
margin-bottom: 0;
}
/* --- ์ฐ์ธก ์์ด์ฝ ๋
ธ๋์ ๋ฐฐ๊ฒฝ ๋ฐ ์ ๋ ฌ --- */
.trans_icon {
width: 80px;
height: 80px;
background-color: #fdd000; /* ๋ณด์คํผ๋ถ๊ณผ ํฌ์ธํธ ๋
ธ๋์ */
border-radius: 20px; /* ์์์ฒ๋ผ ๋ถ๋๋ฌ์ด ๋ฅ๊ทผ ๋ชจ์๋ฆฌ */
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0; /* ํ๋ฉด์ด ์ข์์ ธ๋ ๋
ธ๋ ๋ฐ์ค๊ฐ ์ฐ๊ทธ๋ฌ์ง์ง ์๊ฒ ๋ณดํธ */
}
.trans_icon img {
width: 46px; /* ๋
ธ๋ ๋ฐ์ค ์์ชฝ์ ์ฌ๋ฐฑ์ ๋๊ณ ์์๊ฒ ๋ค์ด๊ฐ๋๋ก ํฌ๊ธฐ ์ถ์ */
height: auto;
object-fit: contain;
}
/* ํ์ดํ๊ณผ ๊ฐ๋ก์ ์ ๋ ฌ */
.trans_header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}
.trans_header h3 {
font-size: 22px;
font-weight: 800;
color: #111;
margin: 0;
white-space: nowrap;
}
.trans_header .title_line {
flex: 1;
height: 1px;
background: #dcdcdc; /* ์์ ํ์์ */
}
/* ํ
์คํธ ์ค๋ช
*/
.trans_desc {
font-size: 18px;
color: #333;
margin: 0;
}
/* ์งํ์ฒ ๋ฆฌ์คํธ ๋ฐ ๋ฑ์ง(์์ฝ) ์คํ์ผ */
.subway_list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.subway_list li {
font-size: 18px;
color: #333;
display: flex;
align-items: center;
gap: 12px;
}
.badge {
display: inline-flex;
justify-content: center;
align-items: center;
height: 28px;
padding: 0 16px;
border-radius: 14px; /* ์์ฝ ๋ชจ์ */
color: #fff;
font-size: 14px;
font-weight: 700;
white-space: nowrap;
}
/* ํธ์ ๋ณ ๊ณ ์ ์ปฌ๋ฌ */
.line_3 { background: #f36e00; } /* 3ํธ์ ์ฃผํฉ์ */
.line_suin { background: #eab700; } /* ์์ธ๋ถ๋น ๋
ธ๋์ */
.line_7 { background: #657936; } /* 7ํธ์ ์ฌ๋ฆฌ๋ธ์ */
/* --- ํ์ ๋ฆฌ์คํธ ์คํ์ผ (2์ค ํ
์คํธ ๊ตฌ์กฐ ๋ฐ์) --- */
.taxi_list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 24px; /* ์์๋ ๊ฐ๊ฒฉ ๋๋ํ๊ฒ */
}
.taxi_list li {
display: flex;
align-items: center; /* ๋ก๊ณ ์ ํ
์คํธ ๋ฐ์ค๋ฅผ ์ธ๋ก ์ค์ ์ ๋ ฌ */
gap: 20px;
}
.taxi_list li img {
height: 38px; /* ์์์ฒ๋ผ ๋ก๊ณ ํฌ๊ธฐ๋ฅผ ์ด์ง ํค์ */
width: auto;
flex-shrink: 0;
}
/* ํ์ ์ค๋ช
ํ
์คํธ (์: ๊ฒ์์ด / ์๋: ๋ณ์๋ช
) */
.taxi_txt_box {
display: flex;
flex-direction: column;
gap: 4px; /* ์์๋ ๊ธ์จ ๊ฐ๊ฒฉ */
}
.taxi_txt_box strong {
font-size: 16px;
font-weight: 700;
color: #111;
}
.taxi_txt_box span {
font-size: 15px;
font-weight: 400;
color: #444;
}
/* --- ๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ ๋ฐ์ํ --- */
@media (max-width: 1024px) {
.loc_info_container { flex-direction: column; gap: 60px; }
.loc_left_area { width: 100%; flex: none; }
.loc_main_title { font-size: 38px; }
.mt_60 { margin-top: 40px; }
}
@media (max-width: 768px) {
.trans_item { flex-direction: column; gap: 20px; }
trans_icon { width: 65px; height: 65px; border-radius: 15px; }
.trans_icon img { width: 36px; }
.trans_header h3 { font-size: 20px; }
.loc_text_box .phone_txt { font-size: 28px; }
.subway_list li, .trans_desc, .taxi_list li { font-size: 15px; }
.taxi_list li img { height: 30px; }
.taxi_txt_box strong { font-size: 15px; }
.taxi_txt_box span { font-size: 14px; }
}
/* ========================================================
Final Contact & Schedule Section (ํ๋จ ์บ๋ฆฐ๋/์๋ด)
======================================================== */
.fcs_wrap {
width: 100%;
padding: 100px 0;
background: #f2f2f2; /* ์ฐํ ํ์ ๋ฐฐ๊ฒฝ (์์ ๋ฐ์) */
}
.fcs_container {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 80px;
}
.fcs_left { flex: 1; max-width: 45%; }
.fcs_right { flex: 1; }
/* ๊ณตํต ํค๋ (ํ์ดํ + ๊ฐ๋ก์ ) */
.fcs_header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 40px;
}
.fcs_header h3 {
font-size: 24px;
font-weight: 800;
color: #111;
margin: 0;
white-space: nowrap;
}
.fcs_header .title_line {
flex: 1;
height: 1px;
background: #ccc;
}
/* --- ์ข์ธก: ํ
์คํธ ์๊ฐํ (๋ค๊ตญ์ด) --- */
.sch_badge_list {
list-style: none;
padding: 0;
margin: 0 0 40px 0;
}
.sch_badge_list li {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 15px;
font-size: 18px;
color: #111;
}
.sch_badge_list li strong {
font-weight: 500;
}
/* ์์ฝ ํํ ๋ฑ์ง */
.sch_badge_list span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 180px; /* ๋ฑ์ง ๋์ด ๊ณ ์ ์ผ๋ก ์ ๋ ฌ ๋ง์ถค */
height: 40px;
border-radius: 20px;
font-size: 16px;
font-weight: 700;
}
.badge_brown { background: #665e53; color: #fff; } /* ์์ผ ๋ฑ์ง */
.badge_light { background: #e5e5e5; color: #111; } /* ์ ์ฌ์๊ฐ ๋ฑ์ง */
/* ์๋ด ๋ฌธ๊ตฌ */
.sch_notes p {
font-size: 16px;
color: #555;
margin: 0 0 10px 0;
line-height: 1.5;
word-break: keep-all;
}
/* ์๋ฌธ ํ์์กด ๊ฐ์กฐ ํ
์คํธ */
.sch_notes .txt_red {
color: #c84333; /* ๋ถ์์ ๊ฐ์กฐ */
font-weight: 600;
}
/* --- ์ฐ์ธก: ์ ํ๋ฒํธ (ํ๊ตญ์ด ์ ์ฉ) --- */
.fcs_phone {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 40px;
}
.fcs_phone img { height: 32px; width: auto; }
.fcs_phone span { font-size: 22px; font-weight: 700; color: #111; }
.fcs_phone strong { font-size: 38px; font-weight: 800; color: #222; letter-spacing: -1px; }
/* --- ์ฐ์ธก: QR ์ฝ๋ 2๋จ ๊ทธ๋ฆฌ๋ --- */
.fcs_qr_grid {
display: flex;
gap: 40px;
}
.fcs_qr_item {
flex: 1;
}
.qr_title {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.qr_title img { height: 28px; width: auto; }
.qr_title span { font-size: 20px; font-weight: 700; color: #111; }
.qr_box img {
width: 160px;
height: 160px;
border: 2px solid #111; /* ์์์ฒ๋ผ ๋ช
ํํ ๊ฒ์ ํ
๋๋ฆฌ */
object-fit: contain;
margin-bottom: 15px;
}
.qr_desc {
display: flex;
flex-direction: column;
gap: 5px;
}
.qr_desc strong {
font-size: 15px;
color: #444;
}
.qr_desc p {
font-size: 14px;
color: #777;
margin: 0;
line-height: 1.4;
word-break: keep-all;
}
/* --- ๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ ๋ฐ์ํ --- */
@media (max-width: 1024px) {
.fcs_container { flex-direction: column; gap: 60px; }
.fcs_left, .fcs_right { max-width: 100%; }
.fcs_qr_grid { gap: 20px; }
.fcs_phone strong { font-size: 30px; }
}
@media (max-width: 768px) {
.sch_badge_list span { width: 140px; font-size: 14px; }
.sch_badge_list li { font-size: 16px; }
.qr_box img { width: 130px; height: 130px; }
.qr_title span { font-size: 18px; }
}
@media (max-width: 480px) {
.fcs_qr_grid { flex-direction: column; gap: 40px; }
}
/* ========================================================
VOS Signature - Hero Section (๊ต์ฐจ ์ ๋๋ฉ์ด์
)
======================================================== */
.sig_hero_section {
width: 100%;
height: 790px; /* ์๋ฃ์ง ์๊ฐ์ ๋์ผํ ์์ํ ๋์ด */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
position: relative;
/* ๋ฐฐ๊ฒฝ Fade-in ์ ๋๋ฉ์ด์
*/
opacity: 0;
animation: sigHeroBgFade 1.5s ease-in-out forwards;
}
/* ํ
์คํธ ๊ฐ๋
์ฑ์ ๋์ด๋ ํธ๋ฅธ๋น ๋ฐํฌ๋ช
์ค๋ฒ๋ ์ด */
.sig_hero_section::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(20, 30, 60, 0.4);
z-index: 1;
}
/* ๋ฐฐ๊ฒฝ Fade-in ํคํ๋ ์ */
@keyframes sigHeroBgFade {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* 1800px ์ปจํ
์ด๋ */
.sig_hero_section .n_inner_1800 {
width: 100%;
max-width: 1800px;
margin: 0 auto;
padding: 0 40px;
position: relative;
z-index: 2; /* ์ค๋ฒ๋ ์ด๋ณด๋ค ์๋ก ์ฌ๋ฆฌ๊ธฐ */
}
/* ํ
์คํธ ์ปจํ
์ด๋ */
.sig_hero_content {
width: 100%;
padding-left: 2%; /* ์์์ฒ๋ผ ์ฝ๊ฐ ์์ชฝ์ผ๋ก */
}
/* ํ์ดํ ์คํ์ผ */
.sig_hero_main_title {
font-size: 75px;
font-weight: 800;
letter-spacing: -1px;
margin: 0;
}
.sig_hero_main_title .t_white {
color: #fff;
margin-right: 15px;
}
.sig_hero_main_title .t_yellow {
color: #fdd000;
}
/* --- Hero ๋ค์ด๋๋ฏน ์ ๋๋ฉ์ด์
(๊ต์ฐจ ๋ฑ์ฅ ๋ฐ ํ์ด๋์ธ) --- */
.sig_hero_fade_in {
display: block;
}
.sig_hero_fade_in span {
display: inline-block;
opacity: 0;
transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 1.2s ease;
will-change: transform, opacity, color;
}
/* ์ด๊ธฐ ๋๊ธฐ ์ํ (๋ชจ๋ ํฐ์ & ์์๋ ๋ถ๋ฆฌ) */
.sig_hero_main_title .t_white {
transform: translateY(100px);
color: #ffffff;
}
.sig_hero_main_title .t_yellow {
transform: translateY(-100px);
color: #ffffff;
}
/* ํ์ฑํ(active) ์ ๋์ */
.sig_hero_fade_in.active .t_white {
opacity: 1;
transform: translateY(0);
}
.sig_hero_fade_in.active .t_yellow {
opacity: 1;
transform: translateY(0);
color: #fdd000; /* ์ต์ข
๋
ธ๋์ */
/* ์ด๋: 0.15์ด ๋ค, ์์๋ณํ: 1.2์ด ๋ค ์์ */
transition:
transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s,
opacity 1.2s ease 0.15s,
color 0.8s ease 1.2s;
}
/* ๋ชจ๋ฐ์ผ ๋์ */
@media (max-width: 768px) {
.sig_hero_section { height: 400px; }
.sig_hero_main_title { font-size: 45px; }
.sig_hero_content { padding-left: 5%; }
}
/* ========================================================
VOS Signature - Section 2 (ํ๋ฆฌ๋ฏธ์ ์ฅ๋น ๋ผ์ธ์
)
======================================================== */
.sig_equip_section {
padding: 140px 0;
background-color: #fbfbfb; /* ์์์ฒ๋ผ ์์ฃผ ์ฐํ ๊ทธ๋ ์ด/ํ์ดํธ ํค */
width: 100%;
}
/* ์๋จ ํ์ดํ ์์ญ */
.sig_equip_top {
text-align: center;
margin-bottom: 90px;
}
.sig_equip_top_tit {
font-size: 42px;
color: #222;
margin: 0 0 10px 0;
letter-spacing: -0.5px;
}
.sig_equip_top_tit .fw_light {
font-weight: 300; /* VOS (์๊ฒ) */
}
.sig_equip_top_tit .fw_bold {
font-weight: 800; /* PREMIUM EQUIPMENTS (๋๊ป๊ฒ) */
}
.sig_equip_top_sub {
font-size: 26px; /* ๐ฅ ๊ธฐ์กด 20px -> 26px ๋ก ํ๋ */
color: #444;
font-weight: 500;
margin: 0;
letter-spacing: -0.5px; /* ๊ธ์จ๊ฐ ์ปค์ง ๋งํผ ์๊ฐ์ ์ด์ง ์ขํ์ค */
}
/* ์ข์ฐ ๋ถํ ์ปจํ
์ด๋ */
.sig_equip_flex {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
/* ์ข์ธก ํ
์คํธ ์์ญ */
.sig_equip_text {
width: 45%;
}
.sig_equip_main_tit {
font-size: 46px;
color: #111;
line-height: 1.35;
letter-spacing: -1.5px;
margin: 0 0 35px 0;
}
.sig_equip_main_tit .t_line1 {
display: block;
font-weight: 300; /* ์์ฌ๊ฐ ์ ํํ (์๊ฒ) */
margin-bottom: 10px;
}
.sig_equip_main_tit .t_line2_bold {
font-weight: 800; /* ํ์ด์๋ ์์ ์ฅ๋น (๋งค์ฐ ๋๊ป๊ฒ) */
}
.sig_equip_main_tit .t_line2_reg {
font-weight: 500; /* ๋ผ์ธ์
. (์ค๊ฐ ๊ตต๊ธฐ) */
}
.sig_equip_desc {
font-size: 18px;
color: #666;
line-height: 1.7;
margin: 0;
font-weight: 400;
}
/* ์ฐ์ธก ์ด๋ฏธ์ง ์์ญ */
.sig_equip_img {
width: 50%;
text-align: right;
}
.sig_equip_img img {
max-width: 100%;
height: auto;
display: inline-block;
}
/* --- ๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ ๋ฐ์ํ --- */
@media (max-width: 1024px) {
.sig_equip_section { padding: 90px 0; }
.sig_equip_top { margin-bottom: 60px; }
.sig_equip_top_tit { font-size: 32px; }
.sig_equip_flex { flex-direction: column; text-align: center; }
.sig_equip_text { width: 100%; margin-bottom: 50px; }
.sig_equip_main_tit { font-size: 36px; }
.sig_equip_main_tit .t_line1 { margin-bottom: 5px; }
.sig_equip_img { width: 100%; text-align: center; }
}
@media (max-width: 768px) {
.sig_equip_section { padding: 70px 0; }
.sig_equip_top_tit { font-size: 26px; }
.sig_equip_top_sub { font-size: 18px; } /* ๐ฅ ๊ธฐ์กด 16px -> 18px ๋ก ํ๋ */
.sig_equip_main_tit { font-size: 28px; }
.sig_equip_desc { font-size: 15px; }
}
/* ========================================================
VOS Signature - Section 3 (์ฅ๋น ๊ฐค๋ฌ๋ฆฌ ๋ฐ ํ์
)
======================================================== */
.sig_grid_section {
padding: 0 0 140px 0;
}
/* 4์ด ๊ทธ๋ฆฌ๋ ๋ ์ด์์ */
.sig_eq_grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
/* ๊ฐ๋ณ ์นด๋ ๋์์ธ */
.sig_eq_card {
background-color: #ebebeb;
border-radius: 15px;
padding: 30px 20px 20px;
cursor: pointer;
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sig_eq_card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}
.sig_eq_img {
text-align: center;
margin-bottom: 25px;
height: 180px; /* ์ด๋ฏธ์ง ๋์ด๋ฅผ ์ผ์ ํ๊ฒ ๋ง์ถฐ์ค */
display: flex;
align-items: center;
justify-content: center;
}
.sig_eq_img img {
max-height: 100%;
width: auto;
}
.sig_eq_txt strong {
display: block;
font-size: 20px;
color: #222;
font-weight: 800;
margin-bottom: 5px;
letter-spacing: -0.5px;
}
.sig_eq_txt span {
display: block;
font-size: 14px;
color: #666;
letter-spacing: -0.5px;
}
/* ํ๋ ์ด๋ฒํผ(์ฌ์) ์์ด์ฝ CSS๋ก ์ฌํํ๊ฒ ๊ทธ๋ฆฌ๊ธฐ */
.eq_icon_play {
position: absolute;
bottom: 20px;
right: 20px;
width: 24px;
height: 24px;
background-color: #999;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.eq_icon_play::after {
content: '';
width: 0;
height: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 7px solid #fff;
margin-left: 2px;
}
.sig_eq_card:hover .eq_icon_play {
background-color: #fdd000; /* ํธ๋ฒ ์ VOS ์๋ก์ฐ ํฌ์ธํธ */
}
/* ========================================================
ํ์
(๋ชจ๋ฌ) ๋์์ธ
======================================================== */
.sig_modal_overlay {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.6);
z-index: 9999;
display: none; /* ํ์์ ์จ๊น */
align-items: center;
justify-content: center;
}
.sig_modal_box {
background: #fff;
width: 900px;
max-width: 95%;
border-radius: 0;
display: flex;
position: relative;
box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}
.sig_modal_close {
position: absolute;
top: 15px;
right: 20px;
font-size: 35px;
color: #999;
background: none;
border: none;
cursor: pointer;
z-index: 10;
}
.sig_modal_close:hover { color: #222; }
/* ํ์
์ข์ธก(์ด๋ฏธ์ง) */
.sig_modal_left {
width: 45%;
background-color: #ebebeb; /* ์นด๋์ ๋์ผํ ํ์ ๋ฐฐ๊ฒฝ */
padding: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.sig_modal_left img {
max-width: 100%;
height: auto;
}
/* ํ์
์ฐ์ธก(ํ
์คํธ) */
.sig_modal_right {
width: 55%;
padding: 50px;
display: flex;
flex-direction: column;
justify-content: center;
}
#modal_title_target {
font-size: 26px;
color: #111;
font-weight: 800;
margin: 0 0 5px 0;
}
#modal_sub_target {
font-size: 15px;
color: #666;
margin: 0;
}
.sig_modal_line {
width: 25px;
height: 3px;
background-color: #fdd000;
margin: 20px 0;
}
.sig_modal_desc {
font-size: 14px;
color: #444;
line-height: 1.6;
}
/* ๋ชจ๋ฐ์ผ ๋ฐ์ํ */
@media (max-width: 1024px) {
.sig_eq_grid { grid-template-columns: repeat(3, 1fr); }
.sig_modal_box { flex-direction: column; width: 600px; }
.sig_modal_left { width: 100%; height: 250px; }
.sig_modal_right { width: 100%; padding: 30px; }
}
@media (max-width: 768px) {
.sig_eq_grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.sig_eq_grid { grid-template-columns: 1fr; }
}
/* ========================================================
VOS Signature - Section 4 (์๋ฉ ์น์
)
======================================================== */
.sig_final_section {
width: 100%;
height: 800px; /* ์์ฒญํ์ 800px ๋์ด ์ง์ */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center; /* ํ
์คํธ ์ธ๋ก ์ค์ ์ ๋ ฌ */
position: relative;
}
/* ํ
์คํธ ์์ญ ์ ์ด */
.sig_final_text {
width: 100%;
max-width: 550px; /* ํ
์คํธ๊ฐ ์ด๋ฏธ์ง์ ์์ฅ๋์ ๊ฐ๋ฆฌ์ง ์๋๋ก ์ต๋ ๋๋น ์ ํ */
}
/* ํ์ดํ ์คํ์ผ */
.sig_final_title {
font-size: 52px;
color: #222; /* ์์์ฒ๋ผ ์ง์ ๋จน์ */
font-weight: 800;
line-height: 1.3;
letter-spacing: -2px;
margin: 0 0 35px 0;
}
/* ์๋ธ ํ
์คํธ ์คํ์ผ */
.sig_final_desc {
font-size: 24px;
color: #333;
font-weight: 500;
line-height: 1.6;
letter-spacing: -1px;
margin: 0;
}
/* --- ๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ ๋ฐ์ํ --- */
@media (max-width: 1024px) {
.sig_final_section {
height: 600px;
/* ํ๋ธ๋ฆฟ์์๋ ์ธ๋ฌผ ์ค์ฌ์ด ๋๋๋ก ๋ฐฐ๊ฒฝ ์์น ์ด์ง ์กฐ์ */
background-position: 70% center;
}
.sig_final_title { font-size: 42px; margin-bottom: 25px; }
.sig_final_desc { font-size: 20px; }
}
@media (max-width: 768px) {
.sig_final_section {
height: 500px;
/* ๋ชจ๋ฐ์ผ์์๋ ํ
์คํธ ๊ฐ๋
์ฑ์ ์ํด ํฐ์ ๋ฐํฌ๋ช
๊ทธ๋ผ๋ฐ์ด์
์ถ๊ฐ (ํ์์) */
background-image: linear-gradient(to right, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 100%),
url('n_images/signature_img4_001.jpg') !important;
}
.sig_final_text { max-width: 100%; padding-right: 20px; }
.sig_final_title { font-size: 34px; letter-spacing: -1px; }
.sig_final_desc { font-size: 18px; }
}
/* ========================================================
VOS Signature - ๋ชจ๋ฐ์ผ ๋ํ
์ผ ์ต์ ํ (768px ์ดํ ์ ์ฉ)
======================================================== */
/* PC์์๋ ๋ชจ๋ฐ์ผ ์ ์ฉ ์ค๋ฐ๊ฟ์ ์จ๊น */
.m_br { display: none; }
@media (max-width: 768px) {
/* ----------------------------------------------------
1 & 2. ๋ฉ์ธ/์๋ธ ํ์ดํ ํฐํธ ํฌ๊ธฐ 32px๋ก ํต์ผ
---------------------------------------------------- */
.sig_equip_top_tit {
font-size: 32px !important;
letter-spacing: -1px;
}
.sig_equip_main_tit {
font-size: 32px !important;
letter-spacing: -1px;
}
/* ----------------------------------------------------
3. ์ค๋ช
17px ์กฐ์ ๋ฐ ๋ชจ๋ฐ์ผ ์ ์ฉ ์ค๋ฐ๊ฟ ์ผ๊ธฐ
---------------------------------------------------- */
.sig_equip_desc {
font-size: 17px !important;
line-height: 1.6 !important;
}
/* ๋ชจ๋ฐ์ผ ํ๋ฉด์ด ๋๋ฉด ์จ๊ฒจ๋๋ ์ค๋ฐ๊ฟ ํ๊ทธ๋ฅผ ์๋์ํด */
.m_br {
display: block !important;
}
/* ----------------------------------------------------
4. ๋ชจ๋ฌ(ํ์
) ์ฅ๋น ์ด๋ฏธ์ง ์์๋ ๋์นจ ์๋ฒฝ ํด๊ฒฐ
---------------------------------------------------- */
.sig_modal_left {
height: 280px !important; /* ๋ชจ๋ฐ์ผ์์ ์ด๋ฏธ์ง๊ฐ ๋ค์ด๊ฐ ๊ณต๊ฐ ๋์ด */
padding: 20px !important; /* ์ฌ๋ฐฑ์ ์ค์ฌ ์ด๋ฏธ์ง๊ฐ ์จ ์ด ๊ณต๊ฐ ํ๋ณด */
}
.sig_modal_left img {
max-height: 100% !important; /* ๐ฅ ํต์ฌ: ๋ถ๋ชจ ๋์ด(280px)๋ฅผ ์ ๋ ๋์ง ๋ชปํ๊ฒ ์ ๊ธ */
width: auto !important;
object-fit: contain !important; /* ์๋ฆฌ์ง ์๊ณ ๋น์จ์ ๋ง๊ฒ ์ ๋ค์ด๊ฐ๊ฒ ํจ */
}
}
/* ========================================================
Blog Common - Hero Section (์คํ ๋ฆฌ, ์ ํ๋ธ, ํ๋ก๋ชจ์
๊ณตํต)
======================================================== */
.blog_hero_wrap {
width: 100%;
height: 82vh;
min-height: 800px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
position: relative;
}
/* 1800px ์ด๋ ์ปจํ
์ด๋ ๊ฐ์ ๊ณ ์ */
.blog_hero_wrap .n_inner_1800 {
width: 100%;
max-width: 1800px;
margin: 0 auto;
padding: 0 40px;
box-sizing: border-box;
}
/* ํ
์คํธ ์ปจํ
์ด๋ */
.blog_hero_text_box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
/* ========================================================
Blog Common Hero - ๋ค์ด๋๋ฏน ๊ต์ฐจ ๋ฑ์ฅ & ์ปฌ๋ฌ ๋ณํ ์ ๋๋ฉ์ด์
======================================================== */
/* ๋ฉ์ธ ํ์ดํ ๊ตฌ์กฐ */
.blog_main_title {
font-size: 70px;
font-weight: 800;
color: #fff;
line-height: 1.1;
margin: 0 0 15px 0;
display: flex;
gap: 20px;
overflow: hidden;
}
/* 1. ๊ณตํต ์์ฑ: ๊ฐ๋ณ ๊ธ์(span) ๋๊ธฐ ์ํ */
.blog_main_title span {
display: inline-block;
opacity: 0;
will-change: transform, opacity, color;
}
/* 2. ์ผ์ชฝ ๋จ์ด (word_up: ์๋์์ ์๋ก ๋ฑ์ฅ) */
.blog_main_title .word_up {
transform: translateY(100px);
color: #ffffff;
/* ํ์ด์ง ๋ก๋ ์ฆ์ ํตํต ํ๊ธฐ๋ฉฐ ๋ฑ์ฅ */
animation: blogSlideUp 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
/* 3. ์ค๋ฅธ์ชฝ ๋จ์ด (word_down: ์์์ ์๋๋ก ๋ฑ์ฅ ํ ๋
ธ๋์) */
.blog_main_title .word_down {
transform: translateY(-100px);
color: #ffffff;
/* ๐ฅ ๊ธฐ์กด ํจ๊ณผ ์๋ฒฝ ๊ตฌํ (๋ค์ค ์ ๋๋ฉ์ด์
)
- ์ด๋(Move): 0.15์ด ๋ค์ 1.2์ด ๋์ ํตํต ํ๊ธฐ๋ฉฐ ๋ฑ์ฅ
- ์์(Color): ์ด๋์ด ๋๋ ๋์ฏค์ธ 1.2์ด ๋ค์ 0.8์ด ๋์ ๋
ธ๋์ ํ์ด๋์ธ */
animation:
blogSlideDownMove 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards,
blogSlideDownColor 0.8s ease 1.2s forwards;
}
/* --- 4. ์ ๋๋ฉ์ด์
ํคํ๋ ์(Keyframes) ์ ์ --- */
@keyframes blogSlideUp {
100% { opacity: 1; transform: translateY(0); }
}
@keyframes blogSlideDownMove {
100% { opacity: 1; transform: translateY(0); }
}
@keyframes blogSlideDownColor {
100% { color: #fdd000; /* VOS ์๊ทธ๋์ฒ ์๋ก์ฐ */ }
}
/* --- ์๋ธ ํ์ดํ (๋ฐ์ ์์ ๊ธ์จ) --- */
.blog_sub_title {
font-size: 28px;
font-weight: 500;
margin: 0;
color: #fff;
opacity: 0;
transform: translateY(20px);
/* ํฐ ์ ๋ชฉ ์ ๋๋ฉ์ด์
์ด ๋ค ๋๋ ์ฆ์(1์ด ๋ค) ๋ถ๋๋ฝ๊ฒ ๋ฑ์ฅ */
animation: subSlideUp 1s ease 1s forwards;
}
@keyframes subSlideUp {
100% { opacity: 1; transform: translateY(0); }
}
/* --- ๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ ๋ฐ์ํ --- */
@media (max-width: 1024px) {
.blog_hero_wrap { height: 60vh; min-height: 500px; }
.blog_main_title { font-size: 55px; }
.blog_sub_title { font-size: 24px; }
}
@media (max-width: 768px) {
.blog_main_title {
font-size: 40px;
flex-direction: column;
gap: 5px;
}
.blog_sub_title { font-size: 20px; }
}
/* ========================================================
Blog Common - List Section (ํํฐ, ๊ทธ๋ฆฌ๋, ํ์ด์ง ๊ณตํต)
======================================================== */
.blog_list_wrap {
padding: 80px 0 120px;
}
/* --- 1. ์นดํ
๊ณ ๋ฆฌ ํํฐ --- */
.blog_filter_wrap {
display: flex;
justify-content: center;
margin-bottom: 60px;
}
.blog_filter_list {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.blog_filter_list li a {
display: block;
padding: 10px 24px;
border: 1px solid #ddd;
border-radius: 30px;
font-size: 16px;
color: #666;
font-weight: 500;
transition: all 0.3s ease;
}
.blog_filter_list li a:hover {
border-color: #fdd000;
color: #222;
}
.blog_filter_list li.active a {
background-color: #fdd000;
border-color: #fdd000;
color: #111;
font-weight: 700;
}
/* --- 2. ๊ฒ์๋ฌผ 3์ด ๊ทธ๋ฆฌ๋ --- */
.blog_grid_wrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 50px 30px; /* ์ธ๋ก ๊ฐ๊ฒฉ 50px, ๊ฐ๋ก ๊ฐ๊ฒฉ 30px */
}
/* ์นด๋ ๊ฐ๋ณ ๋์์ธ */
.blog_card_inner {
display: block;
text-decoration: none;
color: inherit;
}
.blog_card_inner:hover .blog_thumb img {
transform: scale(1.05); /* ํธ๋ฒ ์ ์ธ๋ค์ผ ์ด์ง ํ๋ */
}
/* ์ธ๋ค์ผ (16:9 ๋น์จ ์ ์ง) */
.blog_thumb {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 8px; /* ๋ชจ์๋ฆฌ ์ด์ง ๋ฅ๊ธ๊ฒ */
margin-bottom: 20px;
}
.blog_thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
/* ํ
์คํธ ์ ๋ณด ์์ญ */
.blog_title {
font-size: 22px;
font-weight: 800;
color: #222;
margin: 0 0 10px 0;
line-height: 1.4;
letter-spacing: -0.5px;
/* ๋ ์ค ์ด์ ๋์ด๊ฐ ๊ฒฝ์ฐ ๋ง์ค์ํ(...) ์ฒ๋ฆฌ */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog_excerpt {
font-size: 16px;
color: #777;
line-height: 1.5;
margin-bottom: 20px;
/* ๋ ์ค ์ด์ ๋์ด๊ฐ ๊ฒฝ์ฐ ๋ง์ค์ํ ์ฒ๋ฆฌ */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ํ๋จ ๋ฉํ ์ ๋ณด (๋ฑ์ง + ๋ ์ง) */
.blog_meta {
display: flex;
align-items: center;
font-size: 14px;
color: #555;
font-weight: 600;
}
.meta_badge {
background-color: #fdd000;
color: #111;
padding: 3px 12px;
border-radius: 20px;
font-size: 13px;
font-weight: 800;
}
.meta_divider {
margin: 0 10px;
color: #ccc;
font-weight: 300;
}
/* --- 3. ํ์ด์ง (ํ์ด์ง๋ค์ด์
) ์๋ฒฝ ๊ฐ์ด๋ฐ ์ ๋ ฌ --- */
.blog_pagination {
margin-top: 80px;
width: 100%;
display: flex;
justify-content: center; /* ๊ฐ์ธ๋ ๋ํผ๋ฅผ ๊ฐ์ด๋ฐ ์ ๋ ฌ */
}
.blog_pagination ul.page-numbers {
display: flex;
justify-content: center; /* ํญ๋ชฉ๋ค์ ๊ฐ์ด๋ฐ ์ ๋ ฌ */
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
list-style: none; /* ๋ถํ์ํ ์ ์์ ๊ธฐ */
}
.blog_pagination ul.page-numbers li {
display: flex;
}
.blog_pagination .page-numbers {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
font-size: 16px;
color: #666;
border-radius: 50%;
transition: all 0.3s ease;
text-decoration: none;
}
.blog_pagination .page-numbers:hover {
color: #111;
font-weight: 700;
background-color: #f7f7f7;
}
/* ํ์ฌ ํ์ด์ง ํ์ด๋ผ์ดํธ */
.blog_pagination .page-numbers.current {
background-color: #111;
color: #fff;
font-weight: 700;
}
/* --- ๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ ๋ฐ์ํ --- */
@media (max-width: 1024px) {
.blog_grid_wrap { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }
}
@media (max-width: 768px) {
.blog_list_wrap { padding: 50px 0 80px; }
.blog_filter_wrap { margin-bottom: 40px; }
.blog_filter_list li a { font-size: 14px; padding: 8px 18px; }
.blog_grid_wrap { grid-template-columns: 1fr; gap: 40px 0; }
.blog_title { font-size: 20px; }
.blog_excerpt { font-size: 15px; }
}
/* ========================================================
Blog Video - ์ ํ๋ธ ์ฑ๋ ํค๋ (๋ฉ์ธ ์์ ์)
======================================================== */
.video_channel_header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 30px;
border-bottom: 2px solid #222;
margin-bottom: 40px;
}
.ch_title_box {
display: flex;
align-items: baseline;
gap: 15px;
}
.ch_title_box h2 {
font-size: 32px;
font-weight: 800;
color: #111;
margin: 0;
letter-spacing: -1px;
}
.ch_title_box span {
font-size: 16px;
color: #666;
}
.ch_btn {
display: flex;
align-items: center;
gap: 10px;
background-color: #111;
color: #fff;
padding: 10px 25px;
border-radius: 50px;
font-size: 16px;
font-weight: 600;
text-decoration: none !important;
transition: background-color 0.3s ease;
}
.ch_btn:hover {
background-color: #fdd000;
color: #111;
}
.ch_btn img {
width: 24px;
height: auto;
}
/* ========================================================
Blog Video - ํ์ด๋ผ์ดํธ ์์ ์ฐ์ธก (๋์ ํ
์คํธ)
======================================================== */
.n_yt_highlight_text {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 20px;
}
.n_yt_highlight_text h3 {
font-size: 28px;
font-weight: 800;
color: #111;
line-height: 1.4;
margin-bottom: 20px;
word-break: keep-all;
/* ์ ๋ชฉ์ด ๋๋ฌด ๊ธธ ๊ฒฝ์ฐ 2์ค์์ ์๋ฅด๊ธฐ */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.n_yt_highlight_text .hl_desc {
font-size: 16px;
color: #555;
line-height: 1.6;
word-break: keep-all;
/* ๋ด์ฉ์ด ๊ธธ ๊ฒฝ์ฐ ์ข์ธก ์์ ๋์ด์ ๋ง๊ฒ ์ฝ 8์ค ๋ถ๊ทผ์์ ์๋ฅด๊ธฐ */
display: -webkit-box;
-webkit-line-clamp: 8;
-webkit-box-orient: vertical;
overflow: hidden;
}
.n_yt_highlight_text:hover h3 {
color: #222;
text-decoration: underline;
}
/* ๋ชจ๋ฐ์ผ ๋ฐ์ํ */
@media (max-width: 768px) {
.video_channel_header { flex-direction: column; align-items: flex-start; gap: 20px; }
.ch_title_box { flex-direction: column; gap: 5px; }
.ch_title_box h2 { font-size: 26px; }
}
/* ๋ชจ๋ฐ์ผ ๋์ */
@media (max-width: 1024px) {
.n_yt_highlight_text { padding-left: 0; margin-top: 20px; }
.n_yt_highlight_text h3 { font-size: 22px; margin-bottom: 15px; }
.n_yt_highlight_text .hl_desc { -webkit-line-clamp: 5; font-size: 15px; }
}
/* ========================================================
Blog Event - ํ๋ก๋ชจ์
์ ์ฉ 2์ด ๊ทธ๋ฆฌ๋ ๋ฐ ์นด๋ ๋์์ธ
======================================================== */
.event_grid_wrap {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 60px 40px; /* ์ธ๋ก 60px, ๊ฐ๋ก 40px ์ฌ๋ฐฑ */
}
/* ์นด๋ ๋ํผ */
.event_card_inner {
display: block;
text-decoration: none !important;
color: inherit;
}
.event_card_inner:hover .event_thumb img {
transform: scale(1.03); /* ํธ๋ฒ ์ ์์ฃผ ์ด์ง๋ง ํ๋ */
}
/* ํ๋ก๋ชจ์
์ธ๋ค์ผ (๋์ ์์ด๋ ๋น์จ) */
.event_thumb {
width: 100%;
aspect-ratio: 16 / 9; /* ์์์ ๋ง๊ฒ ์์ด๋ํ ์ ์ง */
overflow: hidden;
border-radius: 0; /* ์์์ ๋ณด๋ฉด ๊ฐ์ง ๋ชจ์๋ฆฌ๋ก ๋์ด ์์ */
}
.event_thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
display: block;
}
/* ํ
์คํธ ์์ญ (๊ฐ์ด๋ฐ ์ ๋ ฌ) */
.event_info {
text-align: center;
margin-top: 25px;
}
.event_title {
font-size: 24px;
font-weight: 800;
color: #111;
margin: 0 0 15px 0;
line-height: 1.4;
letter-spacing: -0.5px;
/* 1์ค ๋๋ 2์ค ๋์ด๊ฐ ๊ฒฝ์ฐ ๋ง์ค์ํ ์ฒ๋ฆฌ */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ํ๋จ ๋ ์ง & ๋ฑ์ง ๋ํผ */
.event_meta {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
}
/* ์ํ ๋ฑ์ง ๊ณตํต ์คํ์ผ */
.event_badge {
padding: 6px 18px;
border-radius: 30px;
font-size: 14px;
font-weight: 700;
line-height: 1;
}
/* ์งํ์ค (๋
ธ๋์) */
.status_ongoing {
background-color: #fdd000;
color: #111;
}
/* ์ข
๋ฃ (ํ์) */
.status_ended {
background-color: #d8d8d8;
color: #666;
}
/* ๋ ์ง */
.event_date {
font-size: 16px;
color: #555;
font-weight: 600;
}
/* ========================================================
Blog Event - ์ต์๋จ ํ์ด๋ผ์ดํธ ๋ ์ด์์
======================================================== */
.event_highlight_box {
display: flex;
gap: 50px;
align-items: center;
margin-bottom: 80px; /* ํ๋จ 2์ด ๊ทธ๋ฆฌ๋์์ ๊ฐ๊ฒฉ */
padding-bottom: 80px;
border-bottom: 1px solid #eaeaea; /* ์์์ฒ๋ผ ๋ฐ์ค๋ก ๊ตฌ๋ถ */
}
/* ์ข์ธก ์ธ๋ค์ผ (๋น์จ 60%) */
.eh_img {
flex: 0 0 60%;
border-radius: 12px;
overflow: hidden;
}
.eh_img img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.eh_img:hover img {
transform: scale(1.02);
}
/* ์ฐ์ธก ํ
์คํธ ์ ๋ณด (๋น์จ 40%) */
.eh_text {
flex: 1;
}
.eh_title {
margin: 0 0 20px 0;
}
.eh_title a {
font-size: 36px;
font-weight: 800;
color: #111;
text-decoration: none !important;
line-height: 1.3;
letter-spacing: -1px;
/* ๋๋ฌด ๊ธธ๋ฉด ์๋ฅด๊ธฐ */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.eh_title a:hover {
color: #555;
}
.eh_desc a {
font-size: 16px;
color: #666;
line-height: 1.6;
text-decoration: none !important;
/* 5์ค ์ด์ ๊ธธ์ด์ง๋ฉด ๋ง์ค์ํ */
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* --- ๋ชจ๋ฐ์ผ/ํ๋ธ๋ฆฟ ๋ฐ์ํ --- */
@media (max-width: 1024px) {
.event_grid_wrap { gap: 50px 30px; }
.event_title { font-size: 22px; }
}
@media (max-width: 768px) {
.event_grid_wrap { grid-template-columns: 1fr; gap: 40px 0; }
.event_thumb { border-radius: 8px; /* ๋ชจ๋ฐ์ผ์์ ์ด์ง ๋ฅ๊ธ๊ฒ */ }
.event_title { font-size: 20px; }
}
@media (max-width: 1024px) {
.event_highlight_box { flex-direction: column; gap: 30px; align-items: flex-start; padding-bottom: 60px; margin-bottom: 60px; }
.eh_img { flex: none; width: 100%; }
.eh_title a { font-size: 28px; }
}
/* ========================================================
ํ์ ํ๋ ํ์ด์ง
======================================================== */
.n_activity_section { padding-top: 80px; padding-bottom: 100px; background: #fff; }
/* ํญ ๋ฉ๋ด ์คํ์ผ */
.n_tabs_menu { display: flex; justify-content: center; gap: 15px; margin-bottom: 60px; flex-wrap: wrap; list-style: none; padding: 0; }
.n_tabs_menu li a {
display: block; padding: 12px 25px; border-radius: 30px; background: #f4f4f4;
color: #666; font-weight: 600; text-decoration: none; transition: 0.3s;
}
.n_tabs_menu li.ui-tabs-active a { background: #111; color: #fff; }
/* ๋ฆฌ์คํธ ์คํ์ผ */
.n_activity_list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 40px; }
.n_activity_item {
display: flex; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid #eee;
align-items: flex-start;
}
.n_act_media { width: 40%; flex-shrink: 0; border-radius: 20px; overflow: hidden; position: relative; }
.n_act_media img { width: 100%; height: auto; display: block; object-fit: cover; aspect-ratio: 4/3; }
.n_act_info { width: 60%; }
.n_act_info .date { font-size: 15px; color: #999; font-weight: 500; margin-bottom: 10px; display: block; }
.n_act_info h3 { font-size: 24px; font-weight: 700; color: #111; margin-bottom: 20px; line-height: 1.4; word-break: keep-all; }
.n_act_info .content_text { font-size: 16px; color: #555; line-height: 1.7; }
@media (max-width: 991px) {
.n_activity_item { flex-direction: column; gap: 20px; }
.n_act_media, .n_act_info { width: 100%; }
}
/* ========================================================
๋ชจ๋ฐ์ผ ์ต์ ํ ์๋ฒฝ ์์ ๋ณธ (768px ์ดํ ์ค๋งํธํฐ ์ ์ฉ)
======================================================== */
@media (max-width: 768px) {
/* ----------------------------------------------------
1. Section 1: ์์ ๋ชจ๋ฐ์ผ 3:2 ๋น์จ ๊ฐ์ ์ ์ฉ (์๋ฆผ ๋ฐฉ์ง)
----------------------------------------------------
.n_hero_video {
height: auto !important; /* ๋์ด๋ฅผ ํจ๋ฉ ๋น์จ์ ๋งก๊น
min-height: 0 !important;
position: relative;
overflow: hidden;
}
.n_video_ratio_container {
padding-top: 42.66% !important; ๐ฅ 3:2 ๋น์จ์ ํต์ฌ! (2/3 = 66.66%)
width: 100%;
height: 0;
position: relative;
}
.n_video_ratio_container iframe {
width: 100vw !important;
height: 100% !important;
min-height: 0 !important;
min-width: 0 !important;
position: absolute;
top: 0 !important;
left: 0 !important;
transform: scale(1.05) !important; Vimeo ๊ฒ์ ํ
๋๋ฆฌ ์จ๊น์ฉ ๋ฏธ์ธ ํ๋
}*/
.n_hero_video {
height: auto !important;
min-height: 0 !important;
position: relative;
overflow: hidden; /* ์ค์: ์์์ด ํ๋๋์ด ์์ ธ๋๊ฐ๋ ๋ถ๋ถ์ ์๋ผ๋ */
}
.n_video_ratio_container {
/* ๋์ด๋ ์ํ์๋ ๋๋ก ์ ์ง (ํ์ฌ ์ฝ 85% ์ ๋๋ก ๋ณด์
๋๋ค) */
padding-top: 85% !important;
width: 100%;
height: 0;
position: relative;
}
.n_video_ratio_container iframe {
width: 100% !important;
height: 100% !important;
position: absolute;
top: 50% !important; /* ์ธ๋ก ์ค์ ์ ๋ ฌ */
left: 50% !important; /* ๊ฐ๋ก ์ค์ ์ ๋ ฌ */
/* ๐ฅ ํต์ฌ ์์ :
๊ฐ๋กํ ์์์ ์ธ๋ก๋ก ๊ธด ๊ทธ๋ฆ์ ๊ฝ ์ฑ์ฐ๋ ค๋ฉด
๋จ์ scale(1.05)๋ก๋ ๋ถ์กฑํฉ๋๋ค.
์ต์ 2๋ฐฐ(2.0) ์ด์ ํค์์ผ ์ฌ๋ฐฑ ์์ด ๊ฝ ์ฐน๋๋ค.
*/
transform: translate(-50%, -50%) scale(2.2) !important;
/* ๋ง์ฝ object-fit์ด ๋จนํ๋ ํ๊ฒฝ์ด๋ผ๋ฉด ์๋ ์์ฑ๋ ๋์๋ฉ๋๋ค */
object-fit: cover;
}
.n_feat_dates {
text-align: center;
font-size: 13px;
padding-left: 0;
margin-top: 15px; /* ์์์ด ์ปค์ง ๋งํผ ํ
์คํธ์์ ๊ฐ๊ฒฉ ํ๋ณด */
}
/* ๐ฅ ๋ ์ง ํ
์คํธ ๋ชจ๋ฐ์ผ ์ค์ ์ ๋ ฌ ์ถ๊ฐ */
.n_feat_dates {
text-align: center;
font-size: 13px;
padding-left: 0;
}
/* ----------------------------------------------------
๐ฅ 2. Section 2: ์ํ ํฌ๊ธฐ ๋ฐ์ํ ์กฐ์ (ํ๋ฉด ๋ฐ ์ดํ ๋ฐฉ์ง)
---------------------------------------------------- */
.n_circle_group {
justify-content: center;
padding-left: 0;
transform: none !important; /* ๊ธฐ์กด ๊ฐ์ ์ถ์(scale) ์ ๊ฑฐ */
margin: 10px 0;
flex-wrap: nowrap; /* ๋ฌด์กฐ๊ฑด ํ ์ค ์ ์ง */
}
.n_circle {
width: 100px !important; /* ๋ชจ๋ฐ์ผ ํ๋ฉด์ 3๊ฐ๊ฐ ๋ค์ด๊ฐ๋๋ก ์ ๋ ํฌ๊ธฐ ์ง์ */
height: 100px !important;
font-size: 12px !important; /* ๊ธ์จ ํฌ๊ธฐ ์ฝ๊ฐ ์ถ์ */
padding: 0 5px !important;
flex-shrink: 0 !important;
}
.n_circle + .n_circle {
margin-left: -15px !important; /* ๊ฒน์น๋ ๊ฐ๊ฒฉ ์กฐ์ */
}
/* --- (๊ธฐ์กด 2๋ฒ ์น์
ํ
์คํธ ๋ฐ ์ด๋ฏธ์ง ์ฝ๋ ์ ์ง) --- */
.n_feature_item { flex-direction: column !important; gap: 20px; padding: 40px 20px; min-height: auto; }
.n_feat_img { transform: translateY(20px); width: 100%; }
.n_feat_img img { width: 100%; max-width: 380px; border-radius: 0 0 100px 0; }
.n_feat_text { text-align: center; width: 100%; }
.n_feat_title { font-size: 32px !important; margin-bottom: 15px; }
.n_feat_sub { font-size: 16px; margin-bottom: 20px; word-break: keep-all; }
.n_feat_extra { display: none !important; }
/* ========================================================
[๋ชจ๋ฐ์ผ ์ต์ ํ] Section 3 (VOS Signature) ํ
์คํธ ์กฐ์
======================================================== */
@media (max-width: 768px) {
.n_sig_card_inner {
/* ํ
์คํธ๋ฅผ ๋ ๋ฐ๋ฅ ์ชฝ์ผ๋ก ๋ด๋ฆฌ๊ธฐ ์ํด ํ๋จ ์ฌ๋ฐฑ ๋ํญ ์ถ์ (๊ธฐ์กด 40px -> 15px) */
padding-bottom: 15px !important;
}
.n_sig_card_title {
/* ๋ชจ๋ฐ์ผ ์นด๋ ํฌ๊ธฐ์ ๋ง๊ฒ ๊ธ์จ ํฌ๊ธฐ ์ถ์ (๊ธฐ์กด 24px -> 17px) */
font-size: 17px !important;
line-height: 1.3 !important;
}
}
/* ----------------------------------------------------
๐ฅ ์ถ๊ฐ. ์ ํ๋ธ(ํผ์๋จ) ํ๋จ ๋ฆฌ์คํธ: ์ธ๋ค์ผ ์, ํ
์คํธ ์๋ ๋ฐฐ์น
---------------------------------------------------- */
.n_yt_sub_item {
flex-direction: column !important; /* ์ข์ฐ ๋ฐฐ์น๋ฅผ ์ํ ๋ฐฐ์น๋ก ๋ณ๊ฒฝ */
align-items: flex-start !important;
gap: 15px !important;
margin-bottom: 30px !important; /* ํญ๋ชฉ ๊ฐ ๊ฐ๊ฒฉ ๋๋ํ๊ฒ */
}
.n_yt_sub_img {
width: 100% !important; /* ์ธ๋ค์ผ ๊ฐ๋ก 100% ๊ฝ ์ฐจ๊ฒ */
max-width: 100% !important;
}
.n_yt_sub_img img {
width: 100%;
border-radius: 12px;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.n_yt_sub_text {
width: 100% !important;
padding-left: 0 !important;
text-align: left; /* ๊ธ์จ๋ ์ข์ธก ์ ๋ ฌ ์ ์ง (๊ฐ๋
์ฑ) */
}
.n_yt_sub_text h4 {
font-size: 18px !important;
margin-bottom: 5px !important;
}
.n_yt_sub_text p {
font-size: 14px !important;
}
/* --- (์น์
7) --- */
.n_info_section {
background-position: right center !important;
}
/* --- (๊ธฐ์กด ํ์ดํ, 4๋ฒ, 5๋ฒ ์น์
์ฝ๋ ์ ์ง) --- */
.n_rules_main_title, .n_ba_main_title, .n_yt_main_title, .n_sig_main_title { font-size: 32px !important; line-height: 1.3; letter-spacing: -1px; }
.n_rules_header, .n_sig_header, .n_ba_top_header, .n_yt_header { margin-bottom: 40px !important; }
.n_ba_3col_wrapper { flex-direction: column !important; gap: 30px !important; padding: 0 20px; }
.n_ba_item { max-width: 320px !important; margin: 0 auto; width: 100%; }
.custom_ba_slider { aspect-ratio: 1 / 1 !important; }
.n_rules_container { flex-direction: column !important; gap: 25px !important; padding: 0 20px; }
.n_rule_card { max-width: 280px !important; margin: 0 auto; width: 100%; }
.n_rule_img_wrap { aspect-ratio: 1 / 1; border-radius: 15px; overflow: hidden; }
.n_rule_title_overlay h3 { font-size: 22px; padding-bottom: 15px; }
}
/* ========================================================
[๋ชจ๋ฐ์ผ ์ต์ ํ] About VOS - Section 3 (์ ๋ฌธ์ ์ง๋จ)
======================================================== */
@media (max-width: 768px) {
/* 1. ์ต์๋จ ํ์ดํ ํ
์คํธ */
.n_sec3_title {
font-size: 28px !important;
margin-bottom: 12px !important; /* ๊ธ์จ๊ฐ ์์์ก์ผ๋ ๊ฐ๊ฒฉ๋ ์ด์ง ์ขํ */
}
/* 2. ์๋ธ ํ์ดํ ํ
์คํธ */
.n_sec3_sub {
font-size: 22px !important;
margin-bottom: 30px !important;
}
/* 3. ๋ณธ๋ฌธ ๋ด์ฉ ํ
์คํธ */
.n_sec3_desc p {
font-size: 16px !important;
line-height: 1.6 !important; /* ๋ชจ๋ฐ์ผ ๊ฐ๋
์ฑ์ ์ํด ์ค๊ฐ๊ฒฉ ์ต์ ํ */
margin-bottom: 20px !important;
}
}
/* ========================================================
[๋ชจ๋ฐ์ผ ์ต์ ํ] ์ค์๋ ๊ธธ & ์ง๋ฃ์๊ฐ ํ์ด์ง
======================================================== */
@media (max-width: 768px) {
/* 1. ์๋จ ํ์ด๋ก ์น์
๋์ด ์ต์ ํ (๋ชจ๋ฐ์ผ ์ ์ฉ) */
.location_hero_wrap {
height: 40vh !important;
min-height: 400px !important;
}
/* 3. ํ์ด๋ก ํ์ดํ & ์๋ธํ์ดํ ํฌ๊ธฐ ์กฐ์ */
.location_main_title {
font-size: 32px !important;
justify-content: flex-start;
gap: 8px !important;
}
.location_sub_title {
font-size: 20px !important;
margin-top: 5px;
}
/* 2. ์ง๋ ๋ฐฐ๊ฒฝ ๋ถ๋ฆฌ (์ด์์๊ฐ์ ์๋ก, ์ง๋๋ฅผ ์๋๋ก!) */
.map_section_wrap {
display: flex;
flex-direction: column-reverse; /* HTML ์์ ์์ด ์์๋ ์์๋ฅผ ๋ง๋ฒ์ฒ๋ผ ๋ฐ๊ฟ๋๋ค */
background: #fff;
}
.map_full_bg {
position: relative !important;
width: 100%;
height: 400px !important; /* ๋ชจ๋ฐ์ผ์์ ๋ณด์ฌ์ค ์ง๋ ์ธ๋ก ๋์ด */
}
.map_overlay_content {
position: relative !important;
top: auto !important;
left: auto !important;
transform: none !important;
width: 100%;
padding: 40px 0 20px 0; /* ์ง๋ ์์ชฝ ๊ณต๋ฐฑ ์กฐ์ */
}
.hours_card {
width: 100% !important;
box-shadow: none !important; /* ๋ชจ๋ฐ์ผ์์ ๊ทธ๋ฆผ์ ์์ด ๊น๋ํ๊ฒ */
padding: 0 15px !important;
}
/*ํ์ดํ*/
.loc_main_title {
font-size: 32px;}
.loc_sub_desc {
font-size: 16px;}
/* 4. ์ง๋ฃ์ผ์ ๋ฌ๋ ฅ ํ(Table/Image) ๊ฐ๋ก ๊ฝ ์ฐจ๊ฒ ๋ง๋ค๊ธฐ */
.fcs_calendar_box {
width: 100%;
overflow-x: auto; /* ํน์ ๋ฌ๋ ฅ์ด ์์ ธ๋๊ฐ๋ฉด ๊ฐ๋ก ์คํฌ๋กค ์์ฑ */
}
.fcs_calendar_box table,
.fcs_calendar_box img,
.fcs_calendar_box iframe {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
/* 5. ์ ํ์๋ด ๋ฐ์ค ๊ธ์จ ๋ ์ค ๋ฐฉ์ง (ํ ์ค๋ก ๊ฝ ์ก์์ฃผ๊ธฐ) */
.fcs_phone {
display: flex !important;
flex-wrap: nowrap !important; /* ์ ๋ ์ค๋ฐ๊ฟ ํ์ง ๋ง! */
align-items: center;
justify-content: center;
gap: 8px !important;
white-space: nowrap; /* ํ
์คํธ ์ค๋ฐ๊ฟ ๊ฐ์ ๋ฐฉ์ง */
padding: 15px 10px !important;
}
.fcs_phone img {
width: 20px !important; /* ์์ด์ฝ ์ด์ง ์ถ์ */
}
.fcs_phone span {
font-size: 15px !important;
}
.fcs_phone strong {
font-size: 22px !important; /* ๋ฒํธ๊ฐ ๋๋ณด์ด๊ฒ ์ ์ง */
}
}
/* ========================================================
[๋ชจ๋ฐ์ผ ์ต์ ํ] Contact / ์์ฝ ์๋ด ํ์ด์ง
======================================================== */
@media (max-width: 768px) {
/* 1. ์๋จ ํ์ด๋ก ์น์
๋์ด ์ต์ ํ (๋ชจ๋ฐ์ผ์์๋ง) */
.reserve_hero_wrap {
height: 40vh !important;
min-height: 400px !important;
}
/* 2. ํ์ด๋ก ํ์ดํ & ์๋ธํ์ดํ ํฌ๊ธฐ ์กฐ์ (๊ฐ๋ก๋ก ํฉ์น๊ธฐ) */
.reserve_main_title {
font-size: 32px !important;
/*flex-direction: row !important; ONLINE RESERVATION ๊ฐ๋ก ๋๋ํ */
justify-content: flex-start;
gap: 8px !important;
}
.reserve_sub_title {
font-size: 20px !important; /* Location๊ณผ ๋์ผํ๊ฒ 20px ํต์ผ */
margin-top: 5px;
}
/* 3. ํ๋จ ์น์
ํ์ดํ ํฌ๊ธฐ ์กฐ์ (Location ํ์ด์ง ๋์ผ) */
.step_main_title,
.channel_main_title {
font-size: 32px !important;text-align:center;
}
.step_sub_desc {
font-size: 16px !important;
}
/* 4. ์จ๋ผ์ธ ์์ฝ ์ ์ฐจ ๋ฐ์ค ๊ฐ๊ฒฉ ์ต์ ํ */
.reserve_step_wrap {
padding: 60px 0 !important;
}
.reserve_step_box_full {
padding: 40px 0 !important;
}
.step_flow {
flex-direction: row !important; /* ๋ชจ๋ฐ์ผ์์ 4๋จ๊ณ ์์ด์ฝ ๊ฐ๋ก๋ก */
justify-content: space-between;
gap: 10px !important;
}
.step_arrow {
display: none !important; /* ์ข์ ๋ชจ๋ฐ์ผ์์ ํ์ดํ ์ ๊ฑฐ */
}
.icon_circle {
width: 70px !important;
height: 70px !important;
margin-bottom: 15px !important;
}
.icon_circle img {
width: 35px !important;
}
.step_item {
width: 24% !important;
}
.step_item p {
font-size: 12px !important;
word-break: keep-all; /* ๋จ์ด ๋๊น ๋ฐฉ์ง */
}
/* 5. ์์ฝ ๋ฌ๋ ฅ ๋ฐ ํผ ๊ฐ๊ฒฉ ์ต์ ํ */
.reserve_form_wrap {
padding: 60px 0 80px 0 !important;
}
.reserve_form_container {
gap: 60px !important;
}
/* 6. ์ง๋ฃ์ผ์ ๋ฌ๋ ฅ ํ(Table/Image) ๊ฝ ์ฐจ๊ฒ */
.reserve_left_cal {
overflow-x: auto; /* ๋ฌ๋ ฅ์ด ๋์น๋ฉด ์คํฌ๋กค */
}
.reserve_left_cal table,
.reserve_left_cal img,
.reserve_left_cal iframe {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
/* 7. ์ ํ๋ฒํธ ๊ฐ์ด๋ฐ ์ ๋ ฌ ๋ฐ ํ ์ค ์ ์ง (Location๊ณผ ๋์ผ) */
.phone_num {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center;
justify-content: center;
white-space: nowrap !important;
font-size: 32px !important;
letter-spacing: -1px;
}
/* 8. ์ง๋ ๋ฐฐ๊ฒฝ ๋ถ๋ฆฌ (์ด์์๊ฐ ์, ์ง๋ ์๋) */
.map_section_wrap {
display: flex;
flex-direction: column-reverse; /* ์ญ์ ๋ฐฐ์น ๋ง๋ฒ */
height: auto !important;
background: #fff;
}
.map_full_bg {
position: relative !important;
width: 100% !important;
height: 400px !important;
}
.map_overlay_content {
position: relative !important;
top: auto !important;
left: auto !important;
transform: none !important;
width: 100% !important;
padding: 40px 0 20px 0 !important;
pointer-events: auto !important; /* ๋ชจ๋ฐ์ผ์์ ํฐ์น ํ๊ธฐ */
}
.hours_card {
width: 100% !important;
padding: 0 15px !important;
box-shadow: none !important;
}
}
/* ========================================================
๋ชจ๋ฐ์ผ ์ ์ฉ ํ์ด์ง๋ค์ด์
(PC ๋ฌด์กฐ๊ฑด ์จ๊น, ๋ชจ๋ฐ์ผ ๋ฌด์กฐ๊ฑด ๋
ธ์ถ)
======================================================== */
.sig_mobile_pagination {
display: none !important;
}
@media (max-width: 768px) {
.sig_mobile_pagination {
display: flex !important; /* ๋ชจ๋ฐ์ผ์์ ๊ฐ์ ์ผ๊ธฐ */
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 40px;
width: 100%;
}
.sig_page_btn {
width: 32px; height: 32px;
border-radius: 5px; border: 1px solid #ddd;
background: #fff; color: #666; font-size: 14px; font-weight: 600;
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: 0.3s; padding: 0;
}
.sig_page_btn.active {
background: #111 !important; color: #fff !important; border-color: #111 !important;
}
}
/* ==========================================
[NEW] ์ ๋๋ฉ์ด์
๋ฐฐ๋ ์คํ์ผ (treatment-new-style)
========================================== */
.treatment-new-style .treatment-dynamic-banner {
height: 780px; /* ๊ธฐ์กด ํค๋์ ๋น์ทํ ๋์ด๋ก ์ค์ (์์ ๊ฐ๋ฅ) */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.treatment-dynamic-banner .banner-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 1400px; /* ๋ณด์คํผ๋ถ๊ณผ ๊ธฐ์กด inner ์ฌ์ด์ฆ */
margin: 0 auto;
padding: 0 20px;
}
/* ์ผ์ชฝ ํ
์คํธ ์์ญ */
.treatment-dynamic-banner .text-content {
width: 55%;
color: #101010;
}
.treatment-dynamic-banner .headline {
font-size: 4.5rem;
font-weight: 800;
margin-bottom: 10px;
line-height: 1.3;
word-break: keep-all;
}
.treatment-dynamic-banner .subhead {
font-size: 1.7rem;
font-weight: 500;
margin-bottom: 20px;
line-height: 1.5;
color: #333;
word-break: keep-all;
}
/* ํด์ํ๊ทธ */
.treatment-dynamic-banner .keyword-group span {
display: inline-block;
background-color: #373737; /* ๊ธฐ์กด ํ๊ทธ ์์์ ๋ง๊ฒ ์์ ๊ฐ๋ฅ */
color: #fff;
padding: 6px 16px;
border-radius: 30px;
font-size: 1.4rem;
margin-right: 6px;
margin-bottom: 8px;
font-weight: 500;
}
/* ์ค๋ฅธ์ชฝ ์ ๋๋ฉ์ด์
๋ก๊ณ ์์ญ */
.treatment-dynamic-banner .animation-content {
width: 40%;
text-align: center;
}
/* โผ ์ ๋๋ฉ์ด์
์์ญ CSS ์์ โผ
.treatment-dynamic-banner .fade-animation-box {
position: relative;
width: 100%;
height: 100%; /* ๋ก๊ณ ์ด๋ฏธ์ง ๋์ด์ ๋ง๊ฒ ์กฐ์
text-align: right;
}
/*.treatment-dynamic-banner .fade-animation-box img {
position: absolute;
top: 0;
right: 0;
max-width: 180px;
opacity: 0;
}*/
/* Hospital Logo ์ ๋๋ฉ์ด์
์ค์
.treatment-dynamic-banner .fade-animation-box .logo-1 {
animation: vosCrossFadeInOut 12s infinite ease-in-out;
}*/
/* Specialist Logo ์ ๋๋ฉ์ด์
์ค์
.treatment-dynamic-banner .fade-animation-box .logo-2 {
animation: vosCrossFadeInOut 12s infinite ease-in-out;
animation-delay: 6s;
}*/
/* โผ 3D ํ๋ฆฝ ์นด๋ ์ ๋๋ฉ์ด์
์ ์ฉ CSS โผ */
.treatment-dynamic-banner .animation-content {
width: 40%;
height: 100%; /* ๋ฐฐ๋ ๋์ด์ ๋ง์ถฐ ์กฐ์ */
display: flex;
justify-content: flex-end; /* ์ฐ์ธก ์ ๋ ฌ ์ ์ง */
align-items: center;
}
/* 350px ์ฌ์ด์ฆ ๊ณ ์ ๋ฐ ์๊ทผ๊ฐ ๋ถ์ฌ */
.speedy-3d-scene {
width: 400px;
height: 400px;
perspective: 1200px;
position: relative;
margin-left: auto; /* ์ค๋ฅธ์ชฝ ์ ๋ ฌ */
margin-right: 100px; /* ๐ก ์ด ์ซ์๋ฅผ ํค์ธ์๋ก ๋ก๊ณ ๊ฐ ์ผ์ชฝ์ผ๋ก ์ด๋ํฉ๋๋ค (์: 120px, 150px) */
}
/* ๋ ๋ก๊ณ ์ ๊ณตํต ์คํ์ผ (์ฒ์์ ๋ ๋ค ์จ๊น ์ฒ๋ฆฌ) */
.speedy-3d-scene .face {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
}
.speedy-3d-scene .face img {
width: 100%;
height: 100%;
object-fit: contain; /* ๋น์จ ์ฐ๊ทธ๋ฌ์ง ๋ฐฉ์ง */
}
/* ๊ฐ๊ฐ ๋
๋ฆฝ์ ์ธ ์ ๋๋ฉ์ด์
๋ถ์ฌ (8์ด ์ฌ์ดํด, ํ๋ ฅ์๋ ์๋๊ฐ) */
.speedy-3d-scene .face-1 {
animation: vosFlip1 8s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
.speedy-3d-scene .face-2 {
animation: vosFlip2 8s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
/* ------------------------------------------
Face 1 (๋ณด์คํผ๋ถ๊ณผ) : 1 -> ์ฌ๋ผ์ง -> 1 -> ์ฌ๋ผ์ง
------------------------------------------ */
@keyframes vosFlip1 {
0%, 20% { transform: rotateY(0deg); opacity: 1; }
/* 1. ๊ฐ๋ก๋ก ํ! ์ฌ๋ผ์ง */
25% { transform: rotateY(90deg); opacity: 0; }
/* ์ ๋ณด์ด๋ ๋์, ๋ค์ '์ธ๋ก ๋ฑ์ฅ'์ ์ํด ๋ชฐ๋ ์ถ ๋ณ๊ฒฝ */
25.1%, 45% { transform: rotateX(-90deg); opacity: 0; }
/* 2. ์ธ๋ก๋ก ํ! ๋ฑ์ฅ */
50%, 70% { transform: rotateX(0deg); opacity: 1; }
/* 3. 45๋ ๋๊ฐ์ ์ผ๋ก ํ! ์ฌ๋ผ์ง */
75% { transform: rotate3d(1, 1, 0, 90deg); opacity: 0; }
/* ์ ๋ณด์ด๋ ๋์, ๋ค์ '๊ฐ๋ก ๋ฑ์ฅ'์ ์ํด ์ถ ์์๋ณต๊ตฌ */
75.1%, 95% { transform: rotateY(-90deg); opacity: 0; }
/* 4. ๊ฐ๋ก๋ก ํ! ๋ฑ์ฅํ๋ฉฐ ์ฒ์์ผ๋ก ๋ฆฌ์
*/
100% { transform: rotateY(0deg); opacity: 1; }
}
/* ------------------------------------------
Face 2 (ํผ๋ถ๊ณผ์ ๋ฌธ์) : ๋๊ธฐ -> 2 -> ๋๊ธฐ -> 2
------------------------------------------ */
@keyframes vosFlip2 {
/* ์ฒ์์ '๊ฐ๋ก ๋ฑ์ฅ'์ ์ํด 90๋ ๊บพ์ธ ์ฑ๋ก ๋๊ธฐ */
0%, 20% { transform: rotateY(-90deg); opacity: 0; }
/* 1. ๊ฐ๋ก๋ก ํ! ๋ฑ์ฅ */
25%, 45% { transform: rotateY(0deg); opacity: 1; }
/* 2. ์ธ๋ก๋ก ํ! ์ฌ๋ผ์ง */
50% { transform: rotateX(90deg); opacity: 0; }
/* ์ ๋ณด์ด๋ ๋์, ๋ค์ '๋๊ฐ์ ๋ฑ์ฅ'์ ์ํด ์ถ ๋ณ๊ฒฝ */
50.1%, 70% { transform: rotate3d(1, 1, 0, -90deg); opacity: 0; }
/* 3. 45๋ ๋๊ฐ์ ์ผ๋ก ํ! ๋ฑ์ฅ */
75%, 95% { transform: rotate3d(1, 1, 0, 0deg); opacity: 1; }
/* 4. ๊ฐ๋ก๋ก ํ! ์ฌ๋ผ์ง๋ฉฐ ์ฒ์์ผ๋ก ๋ฆฌ์
*/
100% { transform: rotateY(90deg); opacity: 0; }
}
/* ==========================================
ํน์ง ์ฒดํฌ๋ฆฌ์คํธ (CSS Grid)
========================================== */
.treatment-check-section {
background-color: #fcfcfc; /* ์์ํ ๋ฐฐ๊ฒฝ์ */
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #b1b1b1;
}
.treatment-check-section .inner {
width:100%;
max-width: 1920px;
margin: 0 auto;
}
.check-list-grid {
display: grid;
grid-template-columns: repeat(4, 1fr); /* PC: 4์นธ */
list-style: none;
margin: 0;
padding: 0;
}
.check-list-grid li {
text-align: center;
padding: 40px 20px;
border-right: 1px solid #b1b1b1; /* ์ธ๋ก์ */
}
.check-list-grid li:last-child {
border-right: none; /* ๋ง์ง๋ง ์นธ ์ธ๋ก์ ์ ๊ฑฐ */
}
.check-list-grid .icon-check {
margin-bottom: 15px;
}
.check-list-grid p {
font-size: 1.7rem;
color: #333;
margin: 0;
line-height: 1.5;
word-break: keep-all; /* ๋จ์ด ๋จ์๋ก ์ค๋ฐ๊ฟ (๊ฐ๋
์ฑ ํฅ์) */
font-weight: 600;
}
/* ==========================================
[PC/๊ณ ํด์๋] ํต์ด๋ฏธ์ง ์ค์ ์ ๋ ฌ ์ฒ๋ฆฌ
========================================== */
.treatment-new-style .full-screen ul.mobile-and-desktop li,
.treatment-new-style .full-screen ul.desktop-only li {
width: 100%;
display: flex; /* ํ๋ ์ค ๋ฐ์ค ํ์ฑํ */
justify-content: center; /* ๊ฐ๋ก์ถ ์ค์ ์ ๋ ฌ */
background-color: #fff; /* ํน์ ์ฌ๋ฐฑ์ด ์๊ธธ ๊ฒฝ์ฐ๋ฅผ ๋๋นํ ๋ฐฐ๊ฒฝ์ (์ ํ์ฌํญ) */
}
.treatment-new-style .full-screen ul.mobile-and-desktop li img,
.treatment-new-style .full-screen ul.desktop-only li img {
display: block;
margin: 0 auto; /* ๊ณ ์ ์ ์ธ ์ค์ ์ ๋ ฌ ๋ฐฉ์ ์ถ๊ฐ */
max-width: 100%; /* ํ๋ฉด๋ณด๋ค ์ด๋ฏธ์ง๊ฐ ํด ๋๋ ํ๋ฉด์ ๋ง์ถค */
height: auto;
}
/* ==========================================
๋ชจ๋ฐ์ผ ๋ฐ์ํ (ํ๋ฉด์ด ์์์ง ๋)
========================================== */
@media (max-width: 1024px) {
.treatment-new-style .treatment-dynamic-banner {
height: auto;
padding: 80px 0 60px; /* ์ํ ์ฌ๋ฐฑ */
}
.treatment-dynamic-banner .banner-container {
flex-direction: column;
text-align: center;
}
.treatment-dynamic-banner .text-content,
.treatment-dynamic-banner .animation-content {
width: 100%;
}
.treatment-dynamic-banner .headline {
font-size: 3.0rem;
}
.treatment-dynamic-banner .subhead {
font-size: 1.3rem;}
.treatment-dynamic-banner .keyword-group span {font-size: 1.0rem;}
.treatment-dynamic-banner .animation-content {
margin-top: 40px;
}
}
/* ๋ชจ๋ฐ์ผ ๋ฐ์ํ (ํ๋ฉด ์์์ง ๋ ํฌ๊ธฐ ์ต์ ํ) */
@media (max-width: 768px) {
.speedy-3d-scene {
width: 200px;
height: 200px;
margin: 20px auto 0;
}
.check-list-grid {
grid-template-columns: repeat(2, 1fr); /* ๋ชจ๋ฐ์ผ: 2์นธ */
}
.check-list-grid li {
padding: 30px 15px;
border-bottom: 1px solid #e5e5e5; /* ๊ฐ๋ก์ ์ถ๊ฐ */
}
/* ์ง์ ๋ฒ์งธ(์ค๋ฅธ์ชฝ) ํญ๋ชฉ์ ์ธ๋ก์ ์ ๊ฑฐ */
.check-list-grid li:nth-child(even) {
border-right: none;
}
/* ๋ง์ง๋ง 2๊ฐ ํญ๋ชฉ์ ๋ฐ๋ฅ ๊ฐ๋ก์ ์ ๊ฑฐ */
.check-list-grid li:nth-last-child(1),
.check-list-grid li:nth-last-child(2) {
border-bottom: none;
}
.check-list-grid p {
font-size: 0.95rem; /* ๋ชจ๋ฐ์ผ ํฐํธ ์ฌ์ด์ฆ ์ด์ง ์กฐ์ */
}
/* ์ค์ง .treatment-new-style ํด๋์ค๊ฐ ์๋ ์ํฐํด ๋ด๋ถ์ ์ด๋ฏธ์ง์๋ง ์ ์ฉ */
.treatment-new-style .full-screen ul.mobile-and-desktop li,
.treatment-new-style .full-screen ul.mobile-only li {
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
}
.treatment-new-style .full-screen ul.mobile-and-desktop li img,
.treatment-new-style .full-screen ul.mobile-only li img {
width: 120%; /* 1.2๋ฐฐ ํ๋ */
max-width: none;
height: auto;
flex-shrink: 0;
}
/* ์ฒดํฌ ์์ด์ฝ ํฌ๊ธฐ๋ง ๋ชจ๋ฐ์ผ์์ ์ถ์ (28px~30px ๊ถ์ฅ) */
.check-list-grid .icon-check svg {
width: 28px !important; /* !important๋ฅผ ์ฃผ์ด HTML์ ์์ฑ๋ 35px๋ฅผ ๊ฐ์ ๋ก ๋ฎ์ด์๋๋ค */
height: auto;
}
/* ์์ด์ฝ๊ณผ ํ
์คํธ ์ฌ์ด ๊ฐ๊ฒฉ๋ ๋ชจ๋ฐ์ผ์ ๋ง๊ฒ ์ด์ง ์ค์ */
.check-list-grid .icon-check {
margin-bottom: 10px;
}
}
/* ==========================================
๊ณต์ง์ฌํญ์ฉ
========================================== */
.notice-page-layout .blog_grid_wrap {
display: block !important; /* ๊ณต์ง์ฌํญ ํ์ด์ง์์๋ง ๊ทธ๋ฆฌ๋ ํด์ */
width: 100%;
}
.notice-page-layout .notice-list-container {
width: 100%;
margin: 40px 0;
border-top: 2px solid #1a1a1a;
list-style: none;
padding: 0;
}
.notice-page-layout .notice-item a {
display: flex; /* ๋ด๋ถ ์์๋ฅผ ํ ์ค๋ก */
align-items: center;
padding: 30px 20px;
border-bottom: 1px solid #eee;
text-decoration: none;
transition: background 0.3s;
}
.notice-page-layout .notice-item a:hover {
background-color: #fcfcfc;
}
/* ํ
์คํธ ์ ๋ ฌ ๋ฐ ๋น์จ ์กฐ์ */
.notice-page-layout .notice-cat {
min-width: 100px;
font-weight: 700;
color: #bfa480;
font-size: 14px;
}
.notice-page-layout .notice-title {
flex: 1; /* ์ ๋ชฉ์ด ์ค์ ๊ณต๊ฐ์ ๋ค ์ฐจ์งํจ */
font-size: 1.25rem;
font-weight: 600;
color: #1a1a1a;
padding: 0 40px;
margin: 0;
text-align: left;
}
.notice-page-layout .notice-date {
min-width: 120px;
text-align: right;
color: #999;
font-size: 15px;
}
/* ๋ชจ๋ฐ์ผ ์ ์ฉ (๋ชจ๋ฐ์ผ์์๋ 1์ด ์ ์ง๊ฐ ์ข๊ฒ ์ฃ ?) */
@media (max-width: 768px) {
.notice-page-layout .notice-item a {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.notice-page-layout .notice-title {
padding: 0;
font-size: 1.1rem;
}
.notice-page-layout .notice-date {
text-align: left;
}
}
/* ๋ฆฌ์คํธ ์ปจํ
์ด๋๊ฐ ์ค์์ ์ค๋๋ก ๋ค์ ์ค์ */
.notice-list-container {
width: 100%;
list-style: none;
padding: 0;
margin: 50px 0; /* ์ํ ์ฌ๋ฐฑ ์ถ๊ฐ */
border-top: 2px solid #1a1a1a;
}
/* ๊ฐ๋ณ ๋ฆฌ์คํธ ์์ดํ
๋ด๋ถ ์ ๋ ฌ */
.notice-item a {
display: block;
padding: 30px 20px;
text-decoration: none;
border-bottom: 1px solid #eee;
}
.notice-info {
display: flex;
align-items: center;
width: 100%; /* ๋๋น 100% ํ๋ณด */
}
/* ์ ๋ชฉ์ด ๊ฐ๋ก ๊ณต๊ฐ์ ๋ค ์ฐจ์งํ๋๋ก ์ค์ */
.notice-title {
flex: 1; /* ๋๋จธ์ง ๊ณต๊ฐ์ ๋ชจ๋ ์ฐจ์ง */
font-size: 1.25rem;
font-weight: 600;
padding: 0 40px; /* ์นดํ
๊ณ ๋ฆฌ์ ๋ ์ง ์ฌ์ด ๊ฐ๊ฒฉ */
color: #1a1a1a;
text-align: left;
}
.notice-cat {
min-width: 100px;
font-weight: 700;
color: #bfa480;
}
.notice-date {
min-width: 120px;
text-align: right;
color: #999;
}
/* ========================================================
Kboard Dedicated Template - ๋
๋ฆฝ ์คํ์ผ
======================================================== */
.kb_hero_list {
width: 100%;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
position: relative;
transition: all 0.4s ease;
}
/* 1. ๋ฆฌ์คํธ ๋ทฐ ๋์ด (๊ธฐ์กด 82vh) */
.kb_hero_list.is_list_mode {
height: 82vh;
min-height: 800px;
}
/* 2. ์์ธํ์ด์ง ๋ฐ ๊ธ์ฐ๊ธฐ ๋ทฐ ๋์ด (๋ฎ์ ํค๋) */
.kb_hero_list.is_low_mode {
height: 35vh; /* 40vh๋ณด๋ค ์กฐ๊ธ ๋ ๋ฎ์ถ 35vh */
min-height: 300px;
}
/* ๋ฎ์ ํค๋์ผ ๋ ํฐํธ ํฌ๊ธฐ ์กฐ์ */
.is_low_mode .blog_main_title { font-size: 45px; }
.is_low_mode .blog_sub_title { font-size: 18px; }
/* --- ๊ฒ์ํ ์์ญ ์ฌ๋ฐฑ --- */
.kb_content_body.list_mode { padding: 80px 0; }
.kb_content_body.view_mode { padding: 40px 0; }
.n_inner_1800 { max-width: 1800px; margin: 0 auto; padding: 0 40px; }
.n_inner_1400 { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
/* ์ ๋๋ฉ์ด์
ํคํ๋ ์ (๊ธฐ์กด ๋์ผ) */
@keyframes blogSlideUp { 100% { opacity: 1; transform: translateY(0); } }
@keyframes blogSlideDownMove { 100% { opacity: 1; transform: translateY(0); } }
@keyframes blogSlideDownColor { 100% { color: #fdd000; } }
@keyframes subSlideUp { 100% { opacity: 1; transform: translateY(0); } }