@charset "utf-8";
html { scroll-behavior: smooth; }
/* ===================================================== */
/* 콘텐츠 공통 */
.sec-tit { margin-bottom: 4rem; font-weight: 700; font-size: 3.6rem; letter-spacing: normal; color: #222; } 
.sec-tit::after { content: '.'; color: var(--color-main); } 
/* 콘텐츠 공통 */
/* ===================================================== */


/* ===================================================== */
/* ABOUT US _ CEO MESSAGE */
.greet {overflow: hidden;} 

/* 섹션1 */
.greet-intro { margin-top: 5rem; background: url(../images/sub/greet_intro_bg.jpg) no-repeat center/cover; font-size: 1rem; } 
.greet-intro .inner { display: flex; } 
.greet-intro .img-wrap { position: relative; width: 50%; } 
.greet-intro .img-wrap img { position: absolute; right: 0; bottom: 0; width: min(45.2em, 95%); } 
.greet-intro .txt-wrap { width: 50%; padding: 5em 6.5em; background-image: var(--grad-violet-red); color: #fff; } 
.greet-intro .txt-wrap .tit { margin-bottom: 7.2rem; font-weight: 500; font-size: 2.8em; letter-spacing: 0.5em; text-align: right; } 
.greet-intro .txt-wrap .subtit { font-weight: 700; font-size: 4.4em; } 
.greet-intro .txt-wrap .subtit::after { content: '.'; color: var(--color-green); } 

/* 섹션2 */
.greet-overview {background: url(../images/sub/greet_overview_bg.jpg) no-repeat center/cover; padding: 8rem 0 18rem; color: #222;}
.greet-overview .inner {display: grid; justify-content: center; justify-items: center;}
.greet-overview em {color: var(--color-main); font-weight: 700; white-space: nowrap;}
.greet-overview .tit {color: var(--color-main); font-weight: 600; font-size: 4.8rem; text-align: center; margin-bottom: 15px;}
.greet-overview .desc {font-size: 2.2rem; font-weight: 500; letter-spacing: -0.02em; text-align: center;}
.greet-overview .list { display: grid; justify-content: center; justify-items: center; font-size: 2rem; max-width: 860px;}
.greet-overview .list::before, 
.greet-overview .list::after {content: ''; width: calc(1rem + 2px); aspect-ratio: 1 / 3; background: url(../images/sub/greet_dot_ico.svg) no-repeat center/contain; margin: 1.8em 0;} 
.greet-overview .list ul {display: flex; justify-content: center; gap: 1em; flex-wrap: wrap;}
.greet-overview .list li {border-radius: 3em; border: 1px dashed var(--color-main);  padding: 0.4em; font-weight: 600; letter-spacing: -0.02em; }
.greet-overview .list li::before {content: ''; display: inline-block; width: 1em;  border-radius: 50%; background: var(--color-main) url(../images/common/ico_check.svg) no-repeat center/65%; aspect-ratio: 1 / 1; vertical-align: middle; translate: 0 -10%; margin-right: 0.5em; }
.greet-overview .slogan {text-align: center; font-weight: 600; font-size: 3.2rem; display: flex; align-items: start; column-gap: 0.3em;}
.greet-overview .slogan::before,
.greet-overview .slogan::after {content: ''; width: 5.1rem; aspect-ratio: 5.1 / 3.4;  background: url(../images/common/ico_quote.svg) no-repeat center/contain; opacity: 0.2; flex-shrink: 0;}
.greet-overview .slogan::after { rotate: 180deg;}

@media (max-width: 1024px){
 .greet-intro { font-size: 0.825vw; } 
 .greet-overview .list {font-size: 17px;}
 .greet-overview .slogan {font-size: 2.8rem;}
}
@media (max-width: 768px){
  .greet-overview .slogan { flex-direction: column;}
  .greet-overview .slogan br {display: none;}
  .greet-overview .slogan::after {margin-left: auto;}
}
@media (max-width: 640px){
 .greet-intro { margin-top: 6rem; font-size: 1vw; } 
 .greet-intro .inner { margin: 0 0 0 var(--content-padding); } 
 .greet-intro .img-wrap { position: static; width: 47%; } 
 .greet-intro .img-wrap img { right: auto; left: 0; width: 51%; } 
 .greet-intro .txt-wrap { width: 53%; padding: 6em 4.5em; } 
 .greet-intro .txt-wrap .tit { margin-bottom: 2em; } 
 .greet-intro .txt-wrap .subtit { text-align: right; }
 .greet-overview .tit {font-size: 3.6rem;} 
 .greet-overview .desc {font-size: 2rem;}
 .greet-overview .desc br {display: none;}
 .greet-overview .slogan {font-size: 2.4rem;}
}
@media (max-width: 576px){
  .greet-overview .list ul {flex-flow: column nowrap; row-gap: 0.4em;}
  .greet-overview .list li {border-radius: 0; border: none; width: 100%;}
  .greet-overview .list::before, 
  .greet-overview .list::after {margin: 1.2em 0;}
  .greet-overview .slogan::before,
  .greet-overview .slogan::after {width: 7.2rem;}
  .greet-overview .slogan::before {margin-bottom: -2rem;}
  .greet-overview .slogan::after {margin-top: -2rem;}
}
@media (max-width: 480px){
 .greet-intro { font-size: 1.7vw; } 
 .greet-intro .inner { flex-direction: column; margin-left: 0; } 
 .greet-intro .img-wrap { position: relative; width: 100%; height: 66vw;  } 
 .greet-intro .img-wrap img { left: 10%; width: 85%;} 
 .greet-intro .txt-wrap { opacity: 1; z-index: 5; width: 100%; padding: 5em var(--content-padding); margin-top: -5vw; transform: none;} 
 .greet-intro .txt-wrap .tit {margin-bottom: 0.9em; } 
 .greet-intro .txt-wrap .subtit {letter-spacing: 0.1em;}
 .greet-intro .txt-wrap .tit br { display: none; } 
 }
/* ABOUT US _ CEO MESSAGE */
/* ===================================================== */


/* ===================================================== */
/* ABOUT US _ HISTORY */
.history { position: relative;padding-bottom: 20rem;}
.history .slick-slide { -webkit-user-select: text; -ms-user-select: text; user-select: text; }

/* 연대 슬라이드 내비 */
.history .era-tab { display: flex; align-items: center; position: sticky; top: calc(var(--header-height) + var(--lnb-size)); padding-top: 0.8em; z-index: 5; font-weight: 700; font-size: 2rem; text-align: center;}
.history .era-tab::before, 
.history .era-tab::after { flex-shrink: 0; width: var(--inner-left-padding); height: 1px; background-color: var(--color-main-a35); content: ''; } 
.history .era-tab::after { width: var(--inner-padding); } 
.history .era-tab ul { display: flex; flex-grow: 1; gap: 1px; padding: 1px; background-color: #fff; } 
.history .era-tab ul li { flex: 1; margin: -1px;} 
.history .era-tab ul li button { display: flex; display: block; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 0.8em; border: 1px solid var(--color-main-a35); color: var(--color-main); transition: .3s;} 
.history .era-tab ul li.on button { border-color: var(--color-main); background-color: var(--color-main); color: #fff; } 

/* 연대 슬라이드 콘텐츠 */
.history .era-list { overflow: hidden; position: relative; }
.history .era-item { visibility: hidden; overflow: hidden; opacity: 0; position: absolute; left: 0; width: 100%; transition: opacity .5s, visibility .5s;}
.history .era-item.on { visibility: visible; opacity: 1;position: relative; transition: opacity .5s .5s, visibility .5s .5s;}
.history .era-intro { position: relative; padding: 6.5rem 0 7rem; margin-bottom: 7rem; background: url(../images/sub/history_era_intro_bg01.jpg) no-repeat center/cover; text-align: center;color: #fff;}
.history .era-intro::before { opacity: 0.4; position: absolute; inset: 0; background-color: #000;content: '';}
.history .era-item:nth-child(2) .era-intro {background-image: url(../images/sub/history_era_intro_bg02.jpg);}
.history .era-item:nth-child(3) .era-intro {background-image: url(../images/sub/history_era_intro_bg03.jpg);}
.history .era-item:nth-child(4) .era-intro {background-image: url(../images/sub/history_era_intro_bg04.jpg);}
.history .era-intro .era-tit {overflow: hidden; position: absolute; width: 1px; height: 1px; border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); }
.history .era-intro .era-subtit { font-weight: 700; font-size: 4.2rem; }

/* 연도 슬라이드 콘텐츠 */
.history .year-list { padding: 0 var(--outer-padding);}
.history .year-item {position: relative; display: flex; align-items: baseline; margin-bottom: 1.5em; font-size: 3.6rem; }
.history .year-tit { width: 6em; background-image: var(--grad-violet-red); background-clip: text;  -webkit-background-clip: text; font-weight: 700;color: transparent; -webkit-text-fill-color: transparent; position: relative; padding-left: 2em; white-space: nowrap; flex-shrink: 0;}
.history .year-tit::before { position: absolute; top: 50%; left: 0; width: 0.25em; height: 0.25em; border-radius: 50%; background-color: var(--color-main); outline: 0.25em solid rgba(238, 49, 53, 0.15); content: ''; translate: -50% -50%;}
.history .mark-square { font-weight: 500; font-size: 18px; line-height: 1.4; color: #666;}
.history .mark-square::before {width: 4px; height: 4px; margin-top: 0.7em; background-color: #666; transform: translateY(-50%);}

@media (hover: hover) and (pointer: fine){
  .history .era-tab ul li button:hover { background-color: var(--color-main); outline-color: var(--color-main); color: #fff; } 
  .history .year-nav .slick-arrow:hover {background-color: var(--color-main);}
  .history .year-nav .slick-arrow:hover::before {background-color: #fff;}
}
@media (max-width: 1280px) {
  .history .mark-square {font-size: 17px;}
}
@media (max-width: 1024px) {
  .history .year-item {font-size: 3.2rem;}
  .history .mark-square {font-size: 16px;}
} 
@media (max-width: 768px) { 
  .history .era-intro .era-subtit {font-size: 4.6vw;}
  .history .mark-square {font-size: 15px;}
  .history .mark-square::before {width: 3px; height: 3px;}
} 
@media (max-width: 640px) {
  .history .year-tit { width: 4.4em; padding-left: 1.2em;}
} 
@media (max-width: 576px) {
  .history .era-intro .era-subtit {font-size: 2.8rem;}
  .history .era-intro .era-subtit br {display: none;}
} 
@media (max-width: 480px) {
  .history .year-item {flex-direction: column; row-gap: 0.5em;}
  .history .year-tit {width: 100%;}
  .history .year-item ul {padding-left: 1.2em;}
}
@media (max-width: 360px) {
  .history .year-tit,
  .history .year-item ul {padding-left: 1em;}
  .history .mark-square {font-size: 14px;}
}
/* ABOUT US _ HISTORY */
/* ===================================================== */


/* ===================================================== */
/* ABOUT US _ VISION */
.vision { letter-spacing: -0.02em; } 
.vision-intro { padding: 8rem 0; margin-bottom: 12rem; background: url(../images/sub/vision_intro_bg.jpg) no-repeat center/cover; font-weight: 700; font-size: 1rem; text-align: center; color: #fff; } 
.vision-intro .txt-wrap { max-width: 980px; margin: auto; } 
.vision-intro .tit { padding-bottom: 0.8em; margin-bottom: 0.8em; border-bottom: 1px solid var(--color-white-a4); font-size: 3.2em; } 
.vision-intro .tit span { font-family: sans-serif; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0.015em #fff; } 
.vision-intro .desc { font-size: 3.6em; line-height: 1.3; } 

/* CORE VALUE */
.vision-core { margin-bottom: 15rem; background: url(../images/sub/vision_core_bg.png) no-repeat center/contain; } 
.vision-core .list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10rem 5%; } 
.vision-core .item { width: 60rem; max-width: 43%; } 
.vision-core .item:nth-child(even) { margin-top: 40vh; } 
.vision-core .item-tit { color: var(--color-main); width: fit-content; margin-bottom: 0.6em; margin-left: auto; font-weight: 700; font-size: 2.6rem; } 
.vision-core .item-tit::after { content: "_"; } 
.vision-core .img-wrap img { border-radius: 1.5rem; } 
.vision-core .item-desc { padding-top: 1.2em; font-weight: 600; font-size: 2rem; line-height: 1.3; color: #222; } 

/* OUR VISION */
.vision-goal { padding-bottom: 18rem; } 
.vision-goal .tit { padding: 0.2em 0 1em; background: url(../images/sub/vision_goal_arrow.svg) no-repeat center/contain; font-size: 12rem; } 
.vision-goal .tit span { display: block; background-image: var(--grad-violet-red); background-clip: text; -webkit-background-clip: text; font-weight: 800; text-align: center; color: transparent; } 
.vision-goal .tit::after { display: block; width: 2px; height: 8rem; margin: 0.4em auto 0; background-color: var(--color-violet); content: ''; } 
.vision-goal .detail { padding: 0 3.5em 3.5em; font-size: 10px; color: #fff; } 
.vision-goal .detail-txt { display: flex; align-items: center; column-gap: 2%; padding: 2em; border-radius: 50em; background-image: var(--grad-violet-red); outline: 2px dashed var(--color-main-a35); outline-offset: calc(3.5em - 2px); } 
.vision-goal .detail-txt span { padding: 0 2%; font-weight: 700; font-size: 4em; line-height: 1.2; } 
.vision-goal .detail-txt::before { flex-shrink: 0; width: 16em; height: 16em; border-radius: 50%; background: #fff url(../images/sub/vision_goal_ico.svg) no-repeat center/7.8em 8.2em; content: ''; } 

@media (max-width: 1440px){
 .vision-goal .detail { font-size: 0.69vw; } 
 }
@media (max-width: 1280px){
 .vision-goal .detail { font-size: 0.67vw; } 
 }
@media (max-width: 1024px){
 .vision-intro { font-size: 0.925vw; } 
 .vision-core { background-size: 150% auto; } 
 .vision-core .item-tit {font-size: 19px;}
 .vision-core .item-desc {font-size: 16px;} 
 .vision-goal .tit { font-size: 10vw; } 
 .vision-goal .detail { font-size: 0.65vw; }
 }
@media (max-width: 768px){
 .vision-intro { font-size: 1rem; } 
 .vision-intro .desc { font-size: 2.6em; } 
 .vision-core { background: none; } 
 .vision-core .list { gap: 7rem; } 
 .vision-core .item { width: 75%; max-width: none; } 
 .vision-core .item-tit {font-size: 2.4rem;}
 .vision-core .item:nth-child(even) { margin-top: 0; margin-left: auto; } 
 .vision-core .img-wrap { position: relative; width: 100%; padding-top: 50%; } 
 .vision-core .img-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 1.5rem; object-fit: cover; } 
 .vision-core .item-desc {font-size: 2rem;} 
 .vision-goal .detail { font-size: 1vw; } 
 .vision-goal .detail-txt { outline-width: 1px; outline-offset: calc(3.5em - 1px); } 
 }
@media (max-width: 420px){
 .vision-core .sec-tit { margin-bottom: 5rem; text-align: center; } 
 .vision-core .item { display: flex; flex-direction: column; width: 90%; margin: auto; } 
 .vision-core .item-tit { margin: 0 auto 0.7em auto; background-position: center;} 
 .vision-core .item-tit::before { display: block; position: relative; z-index: 5; width: 2px; height: 1.6em; margin: -0.8em auto 0.5em; background-color: var(--color-main); content: ''; } 
 .vision-core .item-tit::after { content: ''; } 
 .vision-core .item .img-wrap { order: -5; } 
 .vision-core .item-desc { padding-top: 0; text-align: center; } 
 }
/* ABOUT US _ VISION */
/* ===================================================== */


/* ===================================================== */
/* ABOUT US _ LOCATION */
.location { padding-bottom: 18rem; } 
.location .api-wrap { position: relative; height: calc(150px + 30rem); } 
.location .txt-wrap { position: relative; padding: 4.5rem 0 5rem;  background-color: #fff; box-shadow: 0 0 3rem var(--color-black-a1); } 
.location .txt-wrap .list { display: flex; } 
.location .txt-wrap .item { display: flex; flex-direction: column; flex-grow: 1; width: 30%; padding: 0 2.5%; } 
.location .txt-wrap .item:where(:not(:last-child)) { border-right: 1px solid #eee; } 
.location .txt-wrap .item-type { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; font-weight: 700; font-size: 2.4rem; color: var(--color-main); } 
.location .txt-wrap .item-type::after { width: calc(2em - 8px); height: calc(2em - 8px); border-radius: 50%; background: var(--color-main) url(../images/sub/location_ico01.svg) no-repeat center; content: ''; } 
.location .txt-wrap .item:nth-child(2) .item-type::after { background-image: url(../images/sub/location_ico02.svg); } 
.location .txt-wrap .item:nth-child(3) .item-type::after { background-image: url(../images/sub/location_ico03.svg); } 
.location .txt-wrap .item-wrap { flex-grow: 1; padding: 1.6em 1.6em 1.7em; background-color: #f7f7f7; font-weight: 500; } 
.location .txt-wrap .item-cont { line-height: 1.4;} 
.location .txt-wrap .item-cont:not(:last-child) {margin-bottom: 0.9em;}
.location .txt-wrap .item-cont-tit {font-weight: 700; display: inline; margin-right: 0.3em; color: #222;}
.location .txt-wrap .item-cont-tit::after {content: '-'; margin-left: 0.6em; color: var(--color-black-a2);}
.location .txt-wrap .item-cont-value {display: inline;}

@media (max-width: 1280px){
  .location .txt-wrap .list { flex-wrap: wrap; row-gap: 4rem; } 
  .location .txt-wrap .item { padding: 0 4%; } 
  .location .txt-wrap .item:first-child { width: 100%; border-right: none; } 
  .location .txt-wrap .item-type {justify-content: start; column-gap: 0.7em;}
  .location .txt-wrap .item-type::after {order: -5;}
  .location .txt-wrap .item-cont {display: flex; column-gap: 0.3em;}
  .location .txt-wrap .item-cont-tit {flex-shrink: 0;}
}
@media (max-width: 1024px){ 
  .location .txt-wrap {font-size: 15px; padding: 4rem 5% 4.5rem;}
  .location .txt-wrap .item { width: 100%; padding: 0; border-right: none; } 
}
@media (max-width: 576px){
  .location .txt-wrap {font-size: 14px; padding: 7% 6% 7.5%;}
  .location .txt-wrap .item-type { font-size: 20px; } 
}
@media (max-width: 480px){
  .location .txt-wrap .item-wrap {padding: 1.6em 1.35em 1.65em;}
  .location .txt-wrap .item-cont {flex-direction: column;}
  .location .txt-wrap .item-cont:not(:last-child) {margin-bottom: 1.1em;}
  .location .txt-wrap .item-cont-tit {font-size: calc(1em + 1px); margin-bottom: 0.25em; }
  .location .txt-wrap .item-cont-tit::after {display: none;}
  .location .txt-wrap .item:not(:first-child) {font-size: 1.1em;}
}
/* ABOUT US _ LOCATION */
/* ===================================================== */


/* ===================================================== */
/* PRODUCT _ 제품 게시판 목록 */
.prod-board .list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; padding: 0 1px; font-size: 1rem; } 
.prod-board .item { position: relative; } 
.prod-board .item-link { position: relative; height: 100%; outline: 1px solid #eee; transition: background-color .3s; } 
.prod-board .item-wrap { overflow: hidden; position: relative; height: 100%; padding: 4.5em 10% 5em; } 
.prod-board .item-wrap::before { opacity: 0; position: absolute; right: 0; bottom: 0; width: 6.5em; height: 6.5em; background: linear-gradient(#fff, #fff) no-repeat center/45% 1px, var(--color-main) linear-gradient(#fff, #fff) no-repeat center/1px 45%; content: ''; transform: translateX(100%); transition: transform .3s, opacity .3s; } 
.prod-board .item-thumb { position: relative; padding-top: 75%; margin-bottom: 4em; transition: transform .3s; } 
.prod-board .item-thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; } 
.prod-board .item-txt { position: relative; text-align: center; transition: transform .3s; } 
.prod-board .item-txt h4 { font-weight: 700; font-size: 2.2em; letter-spacing: 0.025em; color: #222; transition: color .3s; } 

.prod-board .item-null { grid-column: 1 / -1; padding: 8rem 1rem; border: 1px solid #eee; background-color: #fafafa; font-weight: 600; font-size: 2rem; text-align: center; color: #666; } 

/* 관리자 */
.prod-board .item-admin { display: flex; column-gap: 0.4em; position: absolute; bottom: 1%; left: 1%; z-index: 5; font-size: 14px; } 
.prod-board .item-admin .admin-modify { padding: 0.2em 0.4em; background-color: var(--color-main); color: #fff; } 

@media (max-width: 1024px){
 .prod-board .list { font-size: 0.9vw; } 
 }
@media (max-width: 820px){
 .prod-board .list { grid-template-columns: repeat(2, 1fr); font-size: 1.2vw; } 
 }
@media (max-width: 640px){
 .prod-board .list { font-size: 1.3vw; } 
 .prod-board .item-wrap { padding: 4.5em 8% 5em; } 
 }
@media (max-width: 576px){
 .prod-board .list { grid-template-columns: 1fr; font-size: 1.8vw; } 
 .prod-board .item-wrap { padding: 3em 12% 4em; } 
 .prod-board .item-thumb { margin-bottom: 2em; } 
 }
@media (max-width: 480px){
 .prod-board .list { font-size: max(7px, 2vw); } 
 }
@media (hover: hover) and (pointer: fine){
 .prod-board .item-link:hover { z-index: 5; background-color: #fafafa; outline-color: var(--color-main); transition: background-color .3s, outline-color .3s; } 
 .prod-board .item-link:hover .item-wrap::before { opacity: 1; transform: translateX(0); } 
 .prod-board .item-link:hover .item-thumb { transform: translateY(-1em); } 
 .prod-board .item-link:hover .item-txt { transform: translateY(-2em); } 
 .prod-board .item-link:hover .item-txt h4 { color: var(--color-main); } 
 .prod-board .item-admin .admin-modify:hover { background-color: #222; } 
 }
/* PRODUCT _ 제품 게시판 목록 */
/* ===================================================== */


/* ===================================================== */
/* PRODUCT _ 제품 게시판 상세 */
.prod-view .intro { display: flex; justify-content: space-between; position: relative; padding: 8.5rem 0; padding-left: var(--inner-left-padding); margin-bottom: 7rem; background: url(../images/sub/product_intro_bg.jpg) no-repeat center/cover;  padding-right: var(--inner-padding); align-items: start;} 
.prod-view .intro::before { opacity: 0.1; position: absolute; bottom: -6rem; left: -2rem; width: 52%; padding-top: 18%; background: url(../images/common/logo_white2.svg) no-repeat left bottom/contain; content: ''; pointer-events: none; } 
/* 왼쪽 텍스트 */
.prod-view .intro-left { width: 35%; position: relative;} 
.prod-view .intro-tit { font-weight: 700; font-size: 5rem; line-height: 1.05; color: var(--color-main); } 
.prod-view .intro-subtit { position: relative; padding: 0.5em var(--content-padding) 0.6em 0; margin: 1.7em 0; background-color: #fff; font-weight: 700; font-size: 18px; line-height: 1.1; letter-spacing: 0.025em; color: #222; } 
.prod-view .intro-subtit::before { position: absolute; top: 0; right: 0; width: calc(100% + var(--inner-left-padding) - var(--outer-padding)); height: 100%; background-color: #fff; content: ''; } 
.prod-view .intro-subtit span { position: relative; } 
.prod-view .intro-desc { font-weight: 500; line-height: 1.6; } 
.prod-view .intro-detail {font-size: 2.4rem;}
.prod-view :where(.intro-desc, .intro-detail) + .intro-detail { border-top: 1px solid var(--color-black-a2); padding-top: 1.1em; margin-top: 1.1em; } 
.prod-view .intro-detail-tit {color: var(--color-main); color: #222; font-weight: 800; margin-bottom: 0.4em;}
.prod-view .intro-detail-desc {font-weight: 600; line-height: 1.5; font-size: 17px; color: #444;}
.prod-view .intro-detail-desc .mark-dot {line-height: 1.2;}
.prod-view .intro-detail-desc .mark-dot::before { width: 4px; height: 4px; margin-top: calc(0.6em - 2px); border-radius: 50%; background-color: #444; content: '';}
/* 오른쪽 슬라이드 */
.prod-view .intro-right { position: relative; width: 60%; box-shadow: 0 0 5em var(--color-black-a2); font-size: 10px; position: sticky; top: calc(var(--header-height) + var(--lnb-size));} 
.prod-view .intro-right-inner { display: flex; align-items: center; background-color: #fff; padding: 2.5em; column-gap: 2.5em; } 
.prod-view .intro-slick { width: calc(100% - 15.5em); } 
.prod-view .intro-slick .img-wrap { position: relative; aspect-ratio: 4 / 3; margin: 0 auto; } 
.prod-view .intro-slick .img-wrap img {width: 100%; height: 100%; object-fit: contain; } 
.prod-view .intro-thumb { display: flex; flex-direction: column; width: 13em; } 
.prod-view .intro-thumb .slick-arrow { display: flex; position: relative; width: 100%; height: 3rem; font-size: 0;} 
.prod-view .intro-thumb .slick-arrow::before { width: 100%; height: 12px; margin: auto; background-color: #444; mask: url(../images/common/chevron_v19.svg) no-repeat center/contain; -webkit-mask: url(../images/common/chevron_v19.svg) no-repeat center/contain; content: ''; transition: background-color .3s; } 
.prod-view .intro-thumb .slick-arrow.slick-next { transform: scaleY(-1); } 
.prod-view .intro-thumb .slick-list { padding-top: 1px; } 
.prod-view .intro-thumb .slick-slide { margin-top: -1px; border: none; cursor: pointer; } 
.prod-view .intro-thumb .img-wrap { position: relative; width: 13em; height: 13em; padding: 5%; border: 1px solid #eee; filter: saturate(0); transition: background-color .3s, filter .3s;} 
.prod-view .intro-thumb .thumb-active .img-wrap { z-index: 5; border-color: var(--color-main); filter: saturate(100%); } 
.prod-view .intro-thumb .img-wrap img { width: 100%; height: 100%; object-fit: contain; } 

/* 오른쪽 하단 버튼 */
.prod-view .intro-right-link {display: flex; font-size: 2.2em;}
.prod-view .intro-right-link a {flex: 1; color: #fff; padding: 1em 0; font-weight: 600; text-align: center; white-space: nowrap; transition: color .2s, background-color .2s; background-color: var(--c);}
.prod-view .intro-right-link a::before {content: ''; width: 1em; aspect-ratio: 1 / 1; mask: var(--ico) no-repeat center/contain; -webkit-mask: var(--ico) no-repeat center/contain; display: inline-block; vertical-align: middle; translate: 0 -10%; margin-right: 0.5em; background-color: #fff; transition: background-color .2s;}
.prod-view .intro-right-link a[title=IFU] {--c: #444; --ico: url(../images/common/ico_ifu.svg);}
.prod-view .intro-right-link a[title=Catalog] {--c: #888; --ico: url(../images/common/ico_catalog.svg);}
.prod-view .intro-right-link a:hover { color: #fff; background-color: var(--color-main);}

/* 콘텐츠 */
.prod-view .detail { position: relative; padding-top: var(--tab-height); border-bottom: 1px solid var(--color-main-a35); } 
/* 콘텐츠 탭 */
.prod-view .tab-wrap { position: absolute; inset: 0; } 
.prod-view .tab { display: flex; align-items: center; position: sticky; top: calc(var(--header-height) + var(--lnb-size)); padding-top: 0.8em; z-index: 10; font-weight: 700; font-size: 2rem; text-align: center; } 
.prod-view .tab::before, 
.prod-view .tab::after { flex-shrink: 0; width: var(--inner-left-padding); height: 1px; background-color: var(--color-main-a35); content: ''; } 
.prod-view .tab::after { width: var(--inner-padding); } 
.prod-view .tab ul { display: flex; flex-grow: 1; gap: 1px; padding: 1px; background-color: #fff; } 
.prod-view .tab li { flex: 1; margin: -1px;} 
.prod-view .tab li button { display: flex; justify-content: center; align-items: center; height: 100%; padding: 0.8em; border: 1px solid var(--color-main-a35); color: var(--color-main); transition: .3s; width: 100%;}
.prod-view .tab li.on button { border-color: var(--color-main); background-color: var(--color-main); color: #fff; }
.prod-view .tab li a { display: flex; justify-content: center; align-items: center; height: 100%; padding: 0.8em; border: 1px solid var(--color-main-a35); color: var(--color-main); transition: .3s; width: 100%; text-decoration: none; font-weight: 700; }
.prod-view .tab li a:hover { border-color: var(--color-main); background-color: var(--color-main); color: #fff; }
/* 콘텐츠 내용 */
.prod-view .detail-item { padding: 5rem 0 10rem; display: block; scroll-margin-top: calc(var(--header-height) + var(--lnb-size) + var(--tab-height) + 1em); }
.prod-view .detail-item.on {display: block;}
.prod-view .detail-item .tit { margin-bottom: 1em; font-weight: 700; font-size: 4.5rem; text-align: center; color: #222; } 

@media (hover: hover) and (pointer: fine){
 .prod-view .intro-thumb .slick-arrow:hover::before { background-color: var(--color-main); } 
 .prod-view .intro-thumb .slick-slide:not(.thumb-active):hover .img-wrap { background-color: #fafafa; } 
 .prod-view .tab li button:hover { background-color: var(--color-main); outline-color: var(--color-main); color: #fff; } 
}
@media (max-width: 1600px){
  .prod-view .intro-right {font-size: calc(0.3125vw + 5px);}
}
@media (max-width: 1280px){
 .prod-view .intro::before { position: absolute; bottom: -4rem; left: -2rem; width: 52%; padding-top: 18%; content: ''; } 
 .prod-view .intro-left { width: 39%; } 
 .prod-view .intro-subtit {font-size: 17px;}
 .prod-view .intro-detail-desc {font-size: 16px;}
 .prod-view .intro-desc { font-size: 15px; } 
 .prod-view .intro-content {font-size: 22px;}
 .prod-view .intro-right { width: 58%; }
}
@media (max-width: 1024px){
 .prod-view .intro-tit { font-size: 4.1vw; } 
 .prod-view .intro-detail-desc .mark-dot::before { width: 3px; height: 3px; margin-top: calc(0.6em - 1.5px); }
 .prod-view .intro-right {font-size: 0.75vw; } 
 .prod-view .intro-right-inner { flex-direction: column; padding: 0 0 2.5rem;} 
 .prod-view .intro-slick { width: 100%; } 
 .prod-view .intro-slick .slick-slide { padding: 2.5rem; } 
 .prod-view .intro-thumb { display: block; width: 100%; padding: 0 5rem; position: relative; } 
 .prod-view .intro-thumb .slick-arrow { position: absolute; left: 0; z-index: 5; width: 5rem; height: 100%; top: 0; } 
 .prod-view .intro-thumb .slick-arrow::before { height: 1.8rem; transform: rotate(-90deg); } 
 .prod-view .intro-thumb .slick-next { right: 0; left: auto; } 
 .prod-view .intro-thumb .slick-next::before { transform: rotate(90deg); } 
 .prod-view .intro-thumb .slick-list { padding: 0 2px 0 1px; } 
 .prod-view .intro-thumb .slick-slide { margin: 0 0 0 -1px; } 
 .prod-view .intro-thumb .img-wrap { height: auto; width: 100%; aspect-ratio: 1 / 1; } 
 .prod-view .intro-right-link {font-size: calc(1.1em + 11px);}
 .prod-view .tab { font-size: 17px; } 
 .prod-view .detail-item .tit {font-size: 4rem;}
 }
@media (max-width: 768px){
 .prod-view .intro { flex-direction: column-reverse; overflow: hidden; } 
 .prod-view .intro::before { right: -10vw; bottom: -5vw; left: auto; width: 90%; padding-top: 31%; } 
 .prod-view .intro-left { width: 100%; padding-top: 5rem; } 
 .prod-view .intro-tit { font-size: 5rem; } 
 .prod-view .intro-subtit { width: fit-content; } 
 .prod-view .intro-subtit::Before { width: calc(100% + var(--content-padding) + var(--inner-padding)); } 
 .prod-view .intro-detail {font-size: 21px;}
 .prod-view .intro-right { width: 100%; font-size: 1.1vw; position: relative; top: 0; }  
 .prod-view .intro-slick { max-width: 550px; width: 85%; } 
 .prod-view .intro-right-link {font-size: calc(1em + 10px);}
 .prod-view .tab { font-size: 16px; } 
 }
@media (max-width: 640px){
 .prod-view .tab { font-size: 15px; } 
 }
@media (max-width: 576px){
 .prod-view .intro-tit { font-size: 4.5rem; } 
 .prod-view .intro-desc { font-size: 14px; }
 .prod-view .intro-subtit {font-size: 16px;}
 .prod-view .intro-detail-desc {font-size: 15px;}
 .prod-view .tab {font-size: 14px;}
 .prod-view .detail-item .tit { font-size: 3.6rem; } 
 }
@media (max-width: 480px){
 .prod-view .intro-slick { max-width: none; width: 100%; } 
}
@media (max-width: 375px){
  .prod-view .tab { font-size: 13px; } 
}
/* PRODUCT _ 제품 게시판 상세 */
/* ===================================================== */


/* ===================================================== */
/* ===================================================== */
/* PRODUCT _ 제품 게시판 상세 - 에디터 (수정버전) */
.prod-view .detail img {margin: 0 auto;}

/* ##### 일반 텍스트 ##### */
.prod-view .detail > div {font-size: calc(1rem + 7px);}
.prod-view .detail p { font-weight: 500; font-size: calc(1rem + 7px); color: #666;}
.prod-view .detail .txt-center {text-align: center; }
 /* 마지막 콘텐츠 마진바텀 제거 */
.prod-view .detail-item > div:last-child > :last-child {margin-bottom: 0;}

/* ##### 제목 ##### */
.prod-view .detail .cont-tit { margin-bottom: 0.8em; font-weight: 700; font-size: calc(1.1rem + 12px); color: #222; width: fit-content;}
.prod-view .detail .cont-tit.border-top::before {content: ''; display: block; height: 3px; background-color: var(--color-main); margin-bottom: 0.2em; width: 100%;}
.prod-view .detail .cont-tit.border-left {padding-left: calc(4px + 0.4em); position: relative;}
.prod-view .detail .cont-tit.border-left::before {content: ''; position: absolute; width: 4px; background-color: var(--color-main); height: 0.95em; left: 0; top: 0.5lh; translate: 0 -50%;}
.prod-view .detail .cont-tit.txt-center {margin-left: auto; margin-right: auto;}
.prod-view .col-wrap .col-wrap .cont-tit {font-size: calc(1rem + 10px);}
@media (max-width: 640px) { 
  .prod-view .col-wrap .col-wrap .cont-tit {font-size: calc(1.1rem + 12px); }
}

/* ##### 목록형 텍스트 ##### */
.prod-view .detail ul:has( > li.mark-dot) {margin-bottom: 3.5rem;}
.prod-view .detail .mark-dot { font-weight: 500;font-size: calc(1rem + 7px); line-height: 1.2; color: #666;}
.prod-view .detail .mark-dot::before { width: 5px; height: 5px; margin-top: calc(0.6em - 2.5px); border-radius: 50%; background-color: #444;content: '';}
@media (max-width: 1024px) { 
  .prod-view .detail .mark-dot::before {width: 4px; height: 4px; margin-top: calc(0.6em - 2px);}
}
@media (max-width: 576px) { 
  .prod-view .detail .mark-dot::before {width: 3px; height: 3px; margin-top: calc(0.6em - 1.5px);}
}

/* ##### 표 ##### */
.prod-view .detail-table {overflow-x: auto; margin-bottom: 4.5rem; font-size: calc(1.6rem + 4px); white-space: nowrap;}
.prod-view .detail-table::-webkit-scrollbar {height: 8px; background-color: #333;}
.prod-view .detail-table::-webkit-scrollbar-thumb { border: 2px solid transparent; background-color: var(--color-main); background-clip: padding-box;}
.prod-view .detail-table :where(th, td) {padding: 0.85em;}
.prod-view .detail-table :where(th, td):where(:not(:first-child)) {border-left: 2px solid #fff;}
.prod-view .detail-table thead th { padding-bottom: calc(0.8em + 1px);background: #333 linear-gradient(var(--color-main), var(--color-main)) no-repeat center bottom/100% 3px;  font-weight: 700; text-align: center; color: #fff;}
.prod-view .detail-table tbody th {background-color: #f2f2f2; font-weight: 700; color: #222;}
.prod-view .detail-table tbody td {background-color: #f7f7f7;  font-weight: 500; text-align: center; color: #333;}
.prod-view .detail-table tbody tr:not(:last-child) :where(th, td) {border-bottom: 1px solid var(--color-white-a8);}
.prod-view .detail-table tbody td.active {color: var(--color-main-dark); font-weight: 600;}
.prod-view .detail-table tbody .active :where(th, td) {color: var(--color-main-dark);}
.prod-view .detail-table tbody .active td {font-weight: 600;}

/* ##### 정의 목록 ##### */
.prod-view .detail-desc {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5em; padding: 2.5em 0; margin-top: 4rem; background: url(../images/sub/product_view_desclist_bg.jpg) no-repeat center/cover; font-size: calc(1rem + 8px);}
.prod-view .detail-desc .item { display: flex; flex-grow: 1; align-items: center; column-gap: 6%; width: 30%; padding: 1.5em 3%;background-color: #fff;}
.prod-view .detail-desc:has(.item:nth-child(4)) .item {width: 40%;}
.prod-view .detail-desc dt { font-weight: 700; font-size: 3rem;color: var(--color-main);}
.prod-view .detail-desc dd {font-weight: 600; color: #666;}
@media (max-width: 1024px) {
  .prod-view .detail-desc { gap: 0.75em; padding: 2em;}
  .prod-view .detail-desc .item {width: 60%; padding: 1.25em 5%;}
}
@media (max-width: 576px) {
  .prod-view .detail-desc { gap: 0.75em;padding: 2em 5%;}
  .prod-view .detail-desc .item {width: 60%;}
}
@media (max-width: 480px) {
  .prod-view .detail-desc .item {flex-direction: column; row-gap: 0.75em; padding: 1.5em 5%; text-align: center;}
}

/* ##### 유튜브 ##### */
.prod-view .video-container:not(:last-child) {margin-bottom: 5rem;}
.prod-view .video-container iframe {border-radius: 2rem;}
.prod-view .video-container:not(:has(iframe)) {display: none;}

/* ##### 슬라이드 ##### */
.prod-view .detail-slick {position: relative; margin-bottom: 5rem;}
.prod-view .detail-slick .slick-track {display: flex;}
.prod-view .detail-slick .slick-slide { display: flex; justify-content: center; align-items: center; padding: 1rem 2.5rem 2.5rem;}
.prod-view .detail-slick .slick-slide > p { display: flex; justify-content: center; align-items: center;height: 100%;}
.prod-view .detail-slick img {padding: clamp(15px, 3.5%, 40px); border: 1px solid #eee; box-shadow: 1.5rem 1.5rem #eee;}
/* 슬라이드 버튼 */
.prod-view .detail-slick .slick-arrow {position: absolute; top: calc(50% - 3.1rem); z-index: 5; width: 3.2rem; height: 6.2rem; font-size: 0;}
.prod-view .detail-slick .slick-arrow::before { display: block; height: 100%; background-color: #222; mask: url(../images/common/chevron_h8.svg) no-repeat center/contain; -webkit-mask: url(../images/common/chevron_h8.svg) no-repeat center/contain;content: ''; transition: .3s;}
.prod-view .detail-slick .slick-next {right: 0; transform: scaleX(-1);}
@media (hover: hover) and (pointer: fine) {
  .prod-view .detail-slick .slick-arrow:hover::before {background-color: var(--color-main);}
}

/* ##### 2컬럼 콘텐츠 ##### */
.prod-view .col-wrap {display: grid; grid-template-columns: repeat(2, 1fr); margin-bottom: 4.5rem; gap: 4rem 3%;}
.prod-view .col-wrap > div h6 { font-weight: 600; color: #222; font-size: calc(1rem + 11px); text-align: center; padding-top: 0.5em;}
.prod-view .col-wrap .col-wrap {margin-bottom: 0;}

@media (max-width: 640px) { 
  .prod-view .col-wrap {grid-template-columns: 1fr;}
}

/* ##### 이미지 목록 ##### */
.prod-view .img-list {--gap: 60px; display: grid; gap: 3.6rem var(--gap); grid-template-columns: repeat(1, 1fr); padding: 0 var(--side-padding, 0px); margin: 0 auto 5rem; flex-wrap: wrap;}
.prod-view .img-list:not(:last-child) {border-bottom: 1px solid #e3e3e3; padding-bottom: 5rem;}
.prod-view .img-list li {position: relative; }
.prod-view .img-list li h6 { margin-top: 1.8rem; font-weight: 600; color: #222; font-size: calc(1.6rem + 4px);}
.prod-view .img-list li p {position: relative;}
.prod-view .img-list li p img {width: 100%; border-radius: 2.5rem;}

/* 이미지 컬럼 수별 스타일 */
.prod-view .img-list.col2 {--side-padding: 7%;}
.prod-view .img-list.col3 {--gap: 40px; grid-template-columns: repeat(3, 1fr);}
.prod-view .img-list.col4 {--gap: 25px; grid-template-columns: repeat(4, 1fr);}

/* 이미지 래디우스 빼기 */
.prod-view .img-list.radius-none img {border-radius: 0 !important;} 

/* 이미지 오른쪽에 화살표 생성 */
.prod-view .img-list li.arrow p::after { width: var(--gap); aspect-ratio: 4 / 7; background-color: var(--color-main); --m: url(../images/common/chevron_h8.svg) no-repeat center/ 50%; mask: var(--m); -webkit-mask: var(--m); content:''; transform: scaleX(-1); position: absolute; left: 100%; top: 50%; translate: 0 -50%; }

/* 이미지 왼쪽 상단 번호 */
.prod-view .img-list li > .num { position: absolute; left: 0; top: 0; color: #fff; background-color: var(--color-main); width: 3.2em; padding-right: 1.3em; padding-top: 0.4em; font-weight: 700; aspect-ratio: 1; clip-path: polygon(0 0, 0% 100%, 100% 0); text-align: center; border-top-left-radius: 2.5rem; z-index: 1;  font-size: 2.4rem;}

/* 이미지 하단 텍스트 왼쪽 번호 */
.prod-view .img-list h6:has(.num) {display: flex; column-gap: 0.4em; align-items: baseline;}
.prod-view .img-list h6 .num {color: var(--color-main); font-weight: 900; white-space: nowrap; font-size: 1.3em;}
.prod-view .img-list h6 .num::after {content: '.';}

/* 이미지 하단 텍스트가 다음 항목까지 차지할 때 */
.prod-view .img-list li.span2 h6 {width: calc(200% + var(--gap));}

@media (max-width: 1280px) {
  .prod-view .img-list.col2 {--side-padding: 5%;}
  .prod-view .img-list {--gap: 5vw;}
  .prod-view .img-list.col3 {--gap: 3vw;}
  .prod-view .img-list.col4 {--gap: 1.5vw;}
}
@media (max-width: 1024px) {
  .prod-view .img-list.col2 {--side-padding: 3%;}
  .prod-view .img-list {--gap: 6vw;}
}
@media (max-width: 768px) {
  .prod-view .img-list.col2 {--side-padding: 0;}
  .prod-view .img-list li p {font-size: 2.4vw;}
  .prod-view .img-list:is(.col3, .col4) {grid-template-columns: repeat(2, 1fr); --gap: 6vw;}
}
@media (max-width: 576px) {
  .prod-view .img-list:is(.img-list) {grid-template-columns: 1fr;}
  .prod-view .img-list li p {font-size: calc(1.6vw + 1.6rem);}
  .prod-view .img-list li.arrow::after {content: ''; display: block; height: 3.5rem; --m: url(../images/common/chevron_v19.svg) no-repeat center top/contain; mask: var(--m); -webkit-mask: var(--m); transform: scaleY(-1) translateY(-1.5rem); background-color: var(--color-main);}
  .prod-view .img-list li.span2 h6 {width: auto;}
  .prod-view .img-list li.arrow p::after {display: none;}
}
/* PRODUCT _ 제품 게시판 상세 - 에디터 (수정버전) */
/* ===================================================== */
/* ===================================================== */


/* ===================================================== */
/* REFERENCE _ CI */
.ci {overflow: hidden;}

.ci-list { padding-bottom: 18rem; } 
.ci-list ul { display: flex; column-gap: 3%; } 
.ci-list li {width: 25%; flex-grow: 1;}
.ci-list a {height: 100%; display: grid; grid-template-rows: 1fr auto;}
.ci-list figure { display: flex; justify-content: center; padding: calc(8% + 3rem) 15%; border: 2px solid #eee; background: linear-gradient(to right, #eee 1px, transparent 1px) repeat-x -1px top/calc(1px + 1rem) auto, #fff linear-gradient(to bottom, #eee 1px, transparent 1px) repeat-y left center/auto calc(1px + 1rem);}
.ci-list figure img {width: 100%; height: 100%; object-fit: contain;}
.ci-list h5 { padding: 0.9em; background-color: var(--color-violet); font-weight: 700; font-size: 2rem; text-align: center; color: #fff; } 
.ci-list h5 span {position: relative; display: inline-block; transition: .3s;} 
.ci-list h5 span::after {content: ''; width: 1.4em; aspect-ratio: 1 / 1; mask: url(../images/common/ico-download.svg) no-repeat center/contain; -webkit-mask: url(../images/common/ico-download.svg) no-repeat center/contain; background-color: #fff; position: absolute; top: 50%; translate: 0 -50%; opacity: 0; transition: .3s;}
.ci-list a:hover h5 span {translate: -0.3em 0; }
.ci-list a:hover h5 span::after {opacity: 1; translate: 0.6em -50%;}
.ci-list li:nth-child(2) h5 { background-color: var(--color-main); } 
.ci-list li:nth-child(3) h5 { background-color: var(--color-blue); } 
.ci-list li:nth-child(4) h5 { background-color: var(--color-green); } 

@media (max-width: 1024px){
  .ci-list ul { column-gap: 2%; } 
  .ci-list h5 { font-size: 17px;}
}
@media (max-width: 768px){
  .ci-list ul { flex-wrap: wrap; gap: 4vw; } 
  .ci-list li {width: 40%; }
  .ci-list h5 { font-size: 16px;}
}
@media (max-width: 576px){
  .ci-list figure {padding: calc(6% + 2rem) 12%;}
  .ci-list h5 { font-size: 15px;}
}
@media (max-width: 480px){
  .ci-list ul {row-gap: 6vw;}
  .ci-list li {width: 100%; }
  .ci-list figure {padding: calc(4% + 2rem) 15%;}
  .ci-list h5 { font-size: 16px;}
}
/* REFERENCE _ CI */
/* ===================================================== */


/* ===================================================== */
/* 메디클러스_로그인 */
.login-wrap {max-width: 520px; margin: 2rem auto 27.5rem; font-weight: 700; color: #222;}

/* 입력창 */
.login:not(:has(.login-check)) .login-input {padding-bottom: 40px;}
.login-input li {border: 1px solid #eee; display: flex; align-items: center; margin-top: 20px; padding-left: max(5%, 18px); flex-wrap: wrap;}
.login-input li:has(input:focus) {border-color: var(--color-main-a5);}
.login-input label { content: url(../images/sub/login_input_ico01.svg); flex-shrink: 0;}
.login-input input {padding: 1.1em 0.65em; flex-grow: 1; outline: none; font-size: calc(1em + 1px); font-weight: 600;}
.login-input input::placeholder {font-weight: 500; color: #888;}
.login-input li label[for*="pass"] {content: url(../images/sub/login_input_ico02.svg);}
.login-input li label[for*="mail"] {content: url(../images/sub/login_input_ico03.svg);}

/* 체크박스-아이디저장, 자동로그인 */
.login-check {display: flex; justify-content: end; column-gap: 20px; padding: 20px 0;}
.login-check label {display: flex; align-items: center; column-gap: 0.6em; cursor: pointer;}
.login-check label::before {content: ''; width: 24px; height: 24px; border: 1px solid #eee; flex-shrink: 0;}
.login-check input:checked + label::before {background: var(--color-main) url(../images/common/ico_check.svg) no-repeat center/calc(100% - 6px); border-color: var(--color-main);}

/* 로그인 버튼 */
.login-btn :is(a, button) {font-size: 25px; color: #fff; text-align: center; background-color: var(--color-main); padding: 0.8em; letter-spacing: 0.025em; transition: .3s;}
.login-btn button {width: 100%;}

/* 하단메뉴 */
.login-menu {display: flex; justify-content: center; padding: 1em 0; text-align: center;}
.login-menu li {position: relative;}
.login-menu li:not(:first-child)::before {content: ''; width: 1px; height: 0.5em; background-color: #888; border-radius: 50%; position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%);}
.login-menu a {padding: 1em 1.2em;}
.login-menu a span {background: linear-gradient(var(--color-main), var(--color-main)) no-repeat center bottom/0 1px; transition: .2s; padding-bottom: 0.1em;}

@media (hover: hover) and (pointer: fine) {
  .login-btn :is(a, button):hover {box-shadow: 0 0 0.3em var(--color-main-a5); text-shadow: 0 0 0.05em #fff;}
  .login-menu a:hover {color: var(--color-main);}
  .login-menu a:hover span {background-size: 100% 1px;}
}
@media (max-width: 1024px) {
  .login-wrap {max-width: 480px; font-size: 15px;}
  .login-input {padding-top: 18px;}
  .login:not(:has(.login-check)) .login-input {padding-bottom: 36px;}
  .login-input li {margin-top: 18px;}
  .login-check {column-gap: 18px; padding: 18px 0;}
  .login-check label::before { width: 22px; height: 22px;}
  .login-btn a, .login-btn button {font-size: 23px;}
}
@media (max-width: 576px) {
  .login-wrap {max-width: 95%; font-size: 14px; font-weight: 600;}
  .login-input {padding-top: 16px;}
  .login:not(:has(.login-check)) .login-input {padding-bottom: 32px;}
  .login-input li {margin-top: 16px;}
  .login-input label {width: 15px; }
  .login-input input::placeholder {font-weight: normal;}
  .login-check {column-gap: 16px; padding: 16px 0;}
  .login-check label::before { width: 20px; height: 20px;}
  .login-btn a,.login-btn button {font-size: 21px;}
  .login-menu a span {background-position: left bottom;}
}
@media (max-width: 360px) {
  .login-menu a {padding: 1em calc(0.6em + 1vw);}
}
/* 메디클러스_로그인 */
/* ===================================================== */


/* ===================================================== */
/* 메디클러스_회원가입 */
.join .radio-wrap {display: flex; gap: 0.4em 2em; /* flex-direction: column; */ flex-wrap: wrap;}
.join .radio-item input {accent-color: var(--color-main);}
.join .button-wrap {display: flex; column-gap: 1rem;}
.join .button-wrap input[type="button"] {padding: 0.4em 1em; border: 1px solid #222; min-width: 7em; transition: .3s; cursor: pointer; font-size: calc(10px + 0.6rem); &:hover {background-color: var(--color-main); color: #fff; border-color: var(--color-main);} }
.join [id^=more] {padding-top: 0.5em; color: var(--color-main); font-size: calc(10px + 0.6rem); font-weight: 500;}

/* 약관동의 */
.join .policy-list {padding-top: 5rem; font-size: 16px;}
.join .policy-item:not(:first-child) {margin-top: -1px;}

/* 약관동의 오픈 버튼 */
.join .policy-btn {font-weight: 600; font-size: 1.4em; border: 1px solid #e3e3e3; width: 100%; text-align: left; padding: 1em max(15px, calc(4% + 5px)); display: flex; justify-content: space-between; column-gap: 1em; transition: .3s;}
.join .policy-btn::after {content: ''; background: url(../images/common/chevron_v19.svg) no-repeat center/contain; width: 1.9rem; align-self: stretch; transform: rotate(180deg); transition: .3s; flex-shrink: 0;}
.join .policy-btn.on,
.join .policy-btn:hover { color: var(--color-main); }
.join .policy-btn.on::after {transform: rotate(0deg);}

/* 약관동의 오픈 내용 */
.join .policy-wrap {display: none; border: 1px solid #e3e3e3; border-top: hidden;}
.join .policy-cont { height: 35rem; overflow-y: auto; background-color: #fafafa; padding: 3.5em max(15px, calc(4% + 5px));}
.join .policy-cont::-webkit-scrollbar {width: calc(1rem - 3px);}
.join .policy-cont::-webkit-scrollbar-thumb {background-color: #e3e3e3;}

/* 약관동의 - 회원가입 */
.join-term .chapter {margin-bottom: 3em; line-height: 1.4;}
.join-term .chapter h4 {font-size: 1.3em; font-weight: 700; margin-bottom: 0.8em;}
.join-term .article {margin-bottom: 2em;}
.join-term .article h5 {font-size: 1.1em; font-weight: 600; margin-bottom: 0.55em;}
.join-term .article p {margin-bottom: 1em; line-height: 1.4;}
.join-term .type-num {counter-reset: type-num; }
.join-term .type-num > li {counter-increment: type-num; margin-bottom: 0.5em;}
.join-term .type-num > li::before {content: counter(type-num) '. ';}
.join-term .type-alpha {counter-reset: type-alpha; font-size: calc(1em - 1px); padding-left: 0.5em; color: #666;}
.join-term .type-alpha > li {counter-increment: type-alpha; margin-top: 0.4em;}
.join-term .type-alpha > li::before {content: counter(type-alpha, lower-alpha) ". ";}
.join-term cite {display: block; font-style: normal; font-size: calc(1em - 1px);}
.join-term cite span:first-child {display: block; font-weight: 600; margin-bottom: 0.4em;}
.join-term cite span:nth-child(2) {display: block;}

/* 약관동의 - 개인정보처리방침 */
.join .policy-cont .privacy section:not(:last-child) {margin-bottom: 3em;}
.join .policy-cont .privacy h4::before {background-color: #666;}
@media (max-width: 1024px) {
  .join .policy-list {font-size: 15px;}
  .join .radio-wrap:has([name=membershiptype]) .radio-item {width: 40%; flex-grow: 1; }
  .join .policy-btn {font-size: 1.2em;}
}
@media (max-width: 768px) {
  .join .policy-list {padding: 0 0 1.5rem;}
}
@media (max-width: 576px) {
  .join .policy-list {font-size: 14px;}
  .join .radio-wrap:has([name=membershiptype]) .radio-item {width: 100%;}
}
/* 메디클러스_회원가입 */
/* ===================================================== */


/* ===================================================== */
/* 개인정보처리방침 */
#privacy {margin-bottom: 20rem; border: 1px solid #eee; padding: 5% 4%; font-size: calc(1rem + 8px); }
.privacy {line-height: 1.4;}
.privacy section:not(:last-child) {margin-bottom: 4em;}
.privacy h4 {font-size: 1.3em; font-weight: 600; display: flex; column-gap: 0.3em; margin-bottom: 0.6em;}
.privacy h4::before {content: ''; width: calc(1rem - 2px); height: calc(1rem - 2px); background-color: var(--color-main); margin-top: 0.7em; transform: translateY(-50%); flex-shrink: 0;}
.privacy p {margin-bottom: 1em; line-height: 1.4;}
.privacy p:not(:has(+ p)) {margin-bottom: 1.5em;}
.privacy :where(ul, ol) {margin-bottom: 1.5em;}
.privacy li + li {margin-top: 0.5em;}

.privacy .mark-square {font-size: calc(1em - 1px);}
.privacy .mark-square + .mark-square {margin-top: 0.8em;}
.privacy .mark-square::before {width: 5px; height: 2px; background-color: #888; margin-top: 0.7em; transform: translateY(-50%);}
.privacy .link-list {counter-increment: num 0;}
.privacy .link-list li {counter-increment: num;}
.privacy .link-list li::before {content: counter(num) '. ';}
.privacy .link-list li a {color: #888; font-weight: 300; font-size: 0.9em;}
.privacy a {display: inline;}
.privacy .manage-list span {font-weight: 600; color: #333;}

@media (max-width: 640px) {
  #privacy {padding: 6.5% 5%;}
  .privacy h4 {font-size: 1.2em;}
}
/* 개인정보처리방침 */
/* ===================================================== */


/* ===================================================== */
/* 개인정보처리방침 (문의하기) */
.inquiry-privacy {height: 30rem; overflow-y: auto; background-color: #fafafa; padding: 3.5em max(15px, calc(4% + 5px)); border: 1px solid #e3e3e3; margin-top: -1px; font-size: calc(9px + 0.7rem);}
.inquiry-privacy::-webkit-scrollbar {width: calc(1rem - 3px); background-color: #e3e3e3;}
.inquiry-privacy::-webkit-scrollbar-thumb {background-color: var(--color-main);}
/* 개인정보처리방침 (문의하기) */
/* ===================================================== */


/* ===================================================== */
/* 이메일무단수집거부 */
.refusal-mail { padding: 3rem 0 18rem; text-align: center; } 
.refusal-mail-wrap { padding: 6rem 5% 7rem; border: 1px solid #eee; } 
.refusal-mail-img { display: flex; justify-content: center; height: 18rem; margin-bottom: 4rem; } 
.refusal-mail-img svg { width: 100%; height: 100%; } 
.refusal-mail-tit { margin-bottom: 1rem; font-weight: 700; font-size: 2.8rem; color: #222; } 
.refusal-mail-subtit { display: block; margin-bottom: 1.5rem; font-weight: 500; font-size: 2rem; color: #444; } 
.refusal-mail-subtit b { font-weight: 700; color: var(--color-main); } 
.refusal-mail-desc { font-size: 18px; } 
@media (max-width: 1280px){
 .refusal-mail-desc { font-size: 16px; } 
 }
@media (max-width: 768px){
 .refusal-mail-subtit { font-size: 17px; } 
 .refusal-mail-desc { font-size: 15px; } 
 }
/* 이메일무단수집거부 */
/* ===================================================== */