/* =========================== SUB */
#subBnr{overflow:hidden;position:relative;width:100%;height:650px}
#subBnr .bg{position:absolute;transform:scale(1.05);width:100%;height:100%;background:url(../../img/sub/sub_bg.jpg) center no-repeat;background-size:cover;transition:all 1.2s cubic-bezier(0.165, 0.840, 0.440, 1)}
#subBnr.on .bg{transform:scale(1)}
#subBnr .txt_area{position:absolute;left:50%;top:57%;z-index:1;transform:translateX(-50%);max-width:1200px;width:100%;font-size:18px;color:#fff}
#subBnr .txt_area .btxt{margin-bottom:20px;font-size:42px;font-weight:700}


/* ¹ÝÀÀÇü [s] */
@media (max-width:1380px){
#subBnr .txt_area{max-width:unset;width:90%}
}
@media (max-width:1024px){
#subBnr{height:450px}
#subBnr .txt_area{top:50%;transform:translate(-50%, -50%);text-align:center;font-size:16px;line-height:1.3}
#subBnr .txt_area .btxt{margin-bottom:20px;font-size:34px}
}
@media (max-width:768px){
#subBnr{height:380px}
#subBnr .txt_area{font-size:15px}
#subBnr .txt_area .btxt{margin-bottom:15px;font-size:30px}
}
@media (max-width:580px){
#subBnr{height:340px}
#subBnr .txt_area{font-size:14px}
#subBnr .txt_area .btxt{margin-bottom:12px;font-size:26px}
}
@media (max-width:480px){
#subBnr{height:55px;border-bottom:1px solid #e1e1e1}
#subBnr .bg{display:none}
#subBnr .txt_area .btxt{margin-bottom:0px;font-size:16px;color:#000}
#subBnr .txt_area .stxt{display:none}
}
/* ¹ÝÀÀÇü [e] */
/* =========================== SNB */
#shSnb{display:flex;align-items:center;position:absolute;bottom:0;left:0;z-index:2;width:100%;height:80px;padding-left:calc((100% - 1200px) / 2);backdrop-filter:blur(5px);background:rgba(0,0,0,.5)}
#shSnb li{position:relative}
#shSnb li+li:before{display:inline-block;content:"";width:1px;height:12px;margin:0 30px;background:rgba(255,255,255,.25)}
#shSnb li a{opacity:.65;font-size:16px;font-weight:500;color:#fff;line-height:80px;transition:all .2s}
#shSnb li a:hover{opacity:1}
#shSnb li.on a{opacity:1}


/* ¹ÝÀÀÇü [s] */
@media (max-width:1400px){
#shSnb{padding-left:15px}
}
@media (max-width:1024px){
#shSnb{display:none}
}











/* =========================== ¼Ò°³ */

#greeting {
font-family: "Pretendard", "Noto Sans KR", sans-serif;
color: #333;
}

.greeting_section {
padding: 70px 0 0;
}

#greeting .tit_area {
position: relative;
padding: 0 0 46px 0;
font-size: 42px;
font-weight: 300;
line-height: 1.35;
letter-spacing: -0.05em;
color: #111;
}

#greeting .tit_area::before {
content: "";
display: block;
width: 42px;
height: 3px;
margin-bottom: 24px;
background: #222;
}

#greeting .tit_area span {
display: block;
}

#greeting .tit_area p {
margin: 8px 0 0;
font-size: 42px;
font-weight: 700;
color: #111;
}

#greeting .img {
overflow: hidden;
}

#greeting .img img {
display: block;
max-width: 100%;
}

#greeting .cont {
max-width: 880px;
padding: 56px 0 0;
}

#greeting .text_block {
margin-bottom: 42px;
}

#greeting .cont .st {
position: relative;
margin: 0 0 18px;
padding-left: 18px;
font-size: 22px;
font-weight: 700;
line-height: 1.45;
color: #111;
letter-spacing: -0.04em;
}

#greeting .cont .st::before {
content: "";
position: absolute;
left: 0;
top: 13px;
width: 7px;
height: 7px;
background: #222;
border-radius: 50%;
}

#greeting .cont .pl {
font-size: 16px;
font-weight: 400;
line-height: 1.9;
color: #555;
letter-spacing: -0.03em;
word-break: keep-all;
white-space: pre-line;
}

#greeting .cont .sign {
margin-top: 50px;
padding-top: 28px;
border-top: 1px solid #ddd;
font-size: 20px;
font-weight: 700;
color: #111;
letter-spacing: 0.04em;
}

#greeting .cont .sign span {
margin-left: 18px;
font-size: 16px;
font-weight: 500;
color: #555;
letter-spacing: -0.03em;
}

@media (max-width: 1024px) {
#greeting {
padding: 45px 20px 50px;
}

#greeting .tit_area {
padding: 0 0 32px;
font-size: 32px;
word-break: keep-all;
}

#greeting .tit_area p {
font-size: 32px;
}

#greeting .img {
}

#greeting .cont {
max-width: none;
padding-top: 40px;
}

#greeting .cont .st {
font-size: 20px;
}
}

@media (max-width: 768px) {
#greeting .tit_area {
font-size: 28px;
}

#greeting .tit_area p {
font-size: 28px;
}

#greeting .cont .pl {
white-space: normal;
font-size: 15px;
line-height: 1.85;
word-break: normal;
}

#greeting .cont .sign span {
display: block;
margin: 6px 0 0;
}
}

@media (max-width: 480px) {
#greeting {
padding: 40px 14px 45px;
}

#greeting .tit_area {
font-size: 24px;
}

#greeting .tit_area p {
font-size: 24px;
}

#greeting .cont .st {
font-size: 18px;
}

#greeting .text_block {
margin-bottom: 34px;
}
}






/* =========================== È÷½ºÅ丮 */


.history_section {
padding: 70px 0 0;
}

.history_tit {
margin: 0 0 14px;
font-size: 42px;
font-weight: 700;
line-height: 1.2;
color: #111;
letter-spacing: -0.04em;
}

.history_year_range {
margin: 0 0 46px;
font-size: 18px;
font-weight: 500;
color: #777;
letter-spacing: 0.08em;
}

.history_list {
position: relative;
max-width: 760px;
padding-left: 27px;
}

/* ¼¼·Î ¶óÀÎ */
.history_list::before {
content: "";
position: absolute;
left: 7px;
top: 6px;
width: 1px;
height: calc(100% - 12px);
background: #ddd;
}

.history_item {
position: relative;
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 22px;
}

/* Á¡ */
.history_item::before {
content: "";
position: absolute;
left: -26px;
top: 50%;
width: 13px;
height: 13px;
background: #fff;
border: 3px solid #222;
border-radius: 50%;
transform: translateY(-50%);
box-sizing: border-box;
}

.history_item .year {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 78px;
height: 32px;
padding: 0 16px;
background: #f1f1f1;
border-radius: 30px;
font-size: 15px;
font-weight: 600;
color: #222;
line-height: 1;
letter-spacing: 0.02em;
box-sizing: border-box;
z-index: 0;
transition: color 0.3s ease;
}

.history_item .year::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: #222;
transition: width 0.3s ease;
z-index: -1;
}

.history_item .year:hover,
.history_item .year:focus {
color: #fff;
}

.history_item .year:hover::before,
.history_item .year:focus::before {
width: 100%;
}

.history_item .desc {
font-size: 17px;
font-weight: 400;
line-height: 1.5;
color: #222;
letter-spacing: -0.03em;
}

.history_text {
max-width: 780px;
margin: 58px 0 0;
padding: 28px 32px;
background: #f7f7f7;
border-left: 4px solid #222;
font-size: 16px;
font-weight: 400;
line-height: 1.8;
color: #333;
letter-spacing: -0.03em;
word-break: keep-all;
box-sizing: border-box;
}

/* ¸ð¹ÙÀÏ */
@media (max-width: 768px) {
.history_section {
padding: 45px 16px 50px;
}

.history_tit {
margin-bottom: 12px;
font-size: 32px;
}

.history_year_range {
margin-bottom: 36px;
font-size: 16px;
}

.history_list {
padding-left: 24px;
}

.history_list::before {
left: 6px;
}

.history_item {
gap: 12px;
margin-bottom: 18px;
}

.history_item::before {
left: -23px;
width: 12px;
height: 12px;
}

.history_item .year {
min-width: 66px;
height: 28px;
padding: 0 12px;
font-size: 14px;
}

.history_item .desc {
font-size: 15px;
}

.history_text {
margin-top: 42px;
padding: 22px 20px;
font-size: 15px;
line-height: 1.8;
}
}



/* Ãß°¡ - ÁöÁ¡¾È³» */


.branch-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px 120px;
font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
color: #222;
}

/* ÅÇ */
.branch-tabs {
display: flex;
flex-wrap: wrap;
margin-bottom: 70px;
border-top: 1px solid #222;
border-left: 1px solid #ddd;
}

.branch-tabs .tab-btn {
width: 12.5%;
height: 54px;
border: 0;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
background: #fff;
color: #555;
font-size: 14px;
cursor: pointer;
transition: all .3s ease;
}

.branch-tabs .tab-btn:hover {
background: #ddd;
color: #111;
}

.branch-tabs .tab-btn.active {
background: #111;
color: #fff;
font-weight: 600;
}

/* ÅÇ ÄÁÅÙÃ÷ */
.tab-content {
display: none;
animation: fadeUp .45s ease;
}

.tab-content.active {
display: block;
}

@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* ŸÀÌƲ */
.branch-title {
margin-bottom: 36px;
}

.branch-title p {
margin: 0 0 10px;
font-size: 13px;
letter-spacing: 3px;
color: #666;
font-weight: 600;
}

.branch-title h3 {
margin: 0 0 10px;
font-size: 36px;
font-weight: 700;
color: #111;
}

.branch-title span {
font-size: 13px;
letter-spacing: 1px;
color: #888;
}

/* ¼³¸í */
.branch-summary {
max-width: 880px;
margin: 0 0 60px;
font-size: 15px;
line-height: 1.6;
color: #555;
}

.branch-summary p {
margin: 0 0 16px;
}

.branch-summary strong {
display: block;
margin-top: 22px;
color: #111;
font-weight: 600;
}

/* ¿µ»ó + ÁöÁ¡Á¤º¸ */
.branch-info-section {
display: flex;
gap: 46px;
align-items: stretch;
margin-bottom: 70px;
}

/* À¯Æ©ºê ¿µ»ó ¿µ¿ª */
.branch-video {
position: relative;
width: 58%;
aspect-ratio: 16 / 9;
background: #111;
overflow: hidden;
}

.branch-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}

/* ÁöÁ¡Á¤º¸ */
.branch-info-box {
width: 42%;
padding: 36px 34px;
background: #f7f7f7;
}

.branch-info-box dl {
margin: 0;
}

.branch-info-box dt {
margin-bottom: 7px;
font-size: 13px;
font-weight: 700;
color: #666;
}

.branch-info-box dd {
margin: 0 0 22px;
padding-bottom: 22px;
border-bottom: 1px solid rgba(0,0,0,.12);
font-size: 15px;
line-height: 1.7;
color: #222;
}

.branch-info-box dd:last-of-type {
margin-bottom: 0;
}

.branch-red {
margin: 24px 0 0;
font-size: 13px;
line-height: 1.7;
color: #eb0000;
}

/* »ó´ã Ä«µå */
.branch-contact {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-bottom: 80px;
}

.contact-card {
display: block;
min-height: 210px;
padding: 30px 24px;
background: #666;
color: #fff;
text-decoration: none;
transition: all .3s ease;
}

.contact-card:hover {
transform: translateY(-8px);
background: #000;
}

.contact-card span {
display: block;
margin-bottom: 22px;
font-size: 12px;
letter-spacing: 2px;
color: rgba(255,255,255,.55);
}

.contact-card strong {
display: block;
margin-bottom: 12px;
font-size: 18px;
font-weight: 700;
}

.contact-card p {
margin: 0 0 24px;
font-size: 13px;
line-height: 1.6;
color: rgba(255,255,255,.72);
}

.contact-card em {
font-style: normal;
font-size: 14px;
font-weight: 600;
}

/* Ư¡ */
.branch-feature {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin-bottom: 90px;
}

.feature-card {
position: relative;
overflow: hidden;
background: #111;
}

.feature-card img {
width: 100%;
display: block;
transition: transform .55s ease;
}

.feature-card:hover img {
transform: scale(1.07);
}

.feature-card p {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
margin: 0;
padding: 45px 22px 22px;
color: #fff;
font-size: 16px;
font-weight: 500;
background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
}

.feature-card span {
margin-right: 8px;
font-size: 12px;
color: #fff;
}

/* °¶·¯¸® */
.branch-gallery {
padding: 65px 56px;
background: #111;
}

.gallery-title {
margin-bottom: 34px;
color: #fff;
}

.gallery-title p {
margin: 0 0 10px;
font-size: 13px;
letter-spacing: 3px;
color: #fff;
}

.gallery-title h3 {
margin: 0;
font-size: 28px;
font-weight: 600;
}

.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}

.gallery-grid img {
width: 100%;
display: block;
}

/* ¹ÝÀÀÇü */
@media all and (max-width: 1024px) {
.branch-tabs .tab-btn {
width: 25%;
}

.branch-info-section {
flex-direction: column;
}

.branch-video,
.branch-info-box {
width: 100%;
}

.branch-contact {
grid-template-columns: repeat(2, 1fr);
}
}

@media all and (max-width: 768px) {
.branch-content {
padding: 45px 16px 80px;
}

.branch-tabs {
flex-wrap: nowrap;
overflow-x: auto;
border-left: 0;
}

.branch-tabs .tab-btn {
width: auto;
min-width: 135px;
flex: 0 0 auto;
}

.branch-title h3 {
font-size: 28px;
}

.branch-summary {
text-align: left;
}

.branch-info-section {
gap: 28px;
}

.branch-video {
width: 100%;
aspect-ratio: 16 / 9;
}

.branch-info-box {
width: 100%;
padding: 28px 22px;
}

.branch-contact {
grid-template-columns: 1fr;
}

.branch-feature {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}

.branch-gallery {
padding: 40px 20px;
}

.gallery-title h3 {
font-size: 22px;
}

.gallery-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
}

@media all and (max-width: 480px) {
.branch-feature,
.gallery-grid {
grid-template-columns: 1fr;
}
}