.counsel_wrapper .counseling_form {
display: flex;
width: 960px;
height: 104px;
margin-left: -480px;
position: absolute;
left: 50%;
top: 80%;
z-index: 4;
align-items: center;
border-radius: 70px;
background-color: var(--C-19212d);
}
.counsel_wrapper .counseling_form .input_name {
width: 140px;
height: 58px;
margin-left: 20px;
padding: 0 20px;
font-size: var(--f-19);
color: var(--C-aaaab3);
font-weight: 500;
box-sizing: border-box;
text-align: center;
border-radius: 50px;
border: none;
}
.counsel_wrapper .counseling_form .input_phone {
width: 170px;
height: 58px;
margin-left: 13px;
padding: 0 20px;
font-size: var(--f-19);
color: var(--C-aaaab3);
font-weight: 500;
box-sizing: border-box;
text-align: center;
border-radius: 50px;
border: none;
}
.counsel_wrapper .counseling_form .select_field {
width: 180px;
height: 58px;
margin-left: 13px;
padding-left: 25px;
font-size: var(--f-19);
color: var(--C-aaaab3);
font-weight: 500;
box-sizing: border-box;
border-radius: 50px;
outline: none;
border: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: var(--C-ffffff)
url(//image.idhospital.com/www/rn_2025/common/icon_select_field.png)
no-repeat right 29px center;
}
.counsel_wrapper .counseling_form .clausewrap {
margin-left: 13px;
margin-bottom: 0;
font-size: var(--f-13);
color: var(--C-ffffff);
}
.counsel_wrapper .counseling_form .checkbox_style {
display: inline-flex;
align-items: center;
cursor: pointer;
user-select: none;
}
.counsel_wrapper .counseling_form .checkbox_style input[type="checkbox"] {
display: none;
}
.counsel_wrapper .counseling_form .checkbox_style .box {
display: inline-block;
width: 24px;
height: 24px;
margin-right: 9px;
position: relative;
border-radius: 4px;
background-color: var(--C-ffffff);
}
.counsel_wrapper .counseling_form .checkbox_style input[type="checkbox"]:checked + .box {
background: var(--C-ffffff)
url(//image.idhospital.com/www/rn_2025/common/icon_checkbox_check.png)
no-repeat center center;
}
.counsel_wrapper .counseling_form .clausewrap a {
margin-left: 2px;
font-size: var(--f-13);
color: var(--C-aaaab3);
vertical-align: 9px;
border-bottom: 1px solid var(--C-aaaab3);
}
.counsel_wrapper .counseling_form .btn_request {
display: flex;
width: 180px;
height: 100%;
position: absolute;
right: -3px;
top: 0;
font-size: var(--f-24);
color: var(--C-ffffff);
font-weight: 800;
cursor: pointer;
align-items: center;
justify-content: center;
border: none;
border-radius: 70px;
/* background-color: var(--C-f66fd6); */
}
.counsel_wrapper .counseling_form .btn_request br {
display: none;
}
.counsel_wrapper .counseling_form .clause {
margin-left: 13px;
margin-bottom: 0;
font-size: var(--f-13);
color: var(--C-ffffff);
}
.counsel_wrapper .counseling_form .clause a {
margin-left: 2px;
font-size: var(--f-13);
color: var(--C-aaaab3);
vertical-align: 9px;
border-bottom: 1px solid var(--C-aaaab3);
}
.counsel_wrapper .counseling_form .clausewrap_wrap {
display: none;
width: 100%;
position: absolute;
left: 0;
top: 100%;
padding: 3%;
box-sizing: border-box;
background-color: var(--C-ffffff);
}
.counsel_wrapper .counseling_form .clausewrap_wrap.on {
display: block;
}
.counsel_wrapper .counseling_form .clausewrap_content {
margin: 45px 0 40px;
border-top: 1px solid var(--C-e3e3e3);
border-bottom: 2px solid var(--C-e3e3e3);
}
.counsel_wrapper .counseling_form .clausewrap_content .item {
display: none;
}
.counsel_wrapper .counseling_form .clausewrap_content .item.on {
display: block;
}
.counsel_wrapper .counseling_form .clausewrap_content .clausewrap_box {
display: flex;
padding: 40px 0;
border-top: 1px solid var(--C-e3e3e3);
border-bottom: 1px solid var(--C-e3e3e3);
}
.counsel_wrapper .counseling_form .clausewrap_content .clausewrap_box p {
font-size: var(--f-20);
color: var(--C-000b17);
font-weight: 500;
}
.counsel_wrapper .counseling_form .clausewrap_content .clausewrap_box p i {
color: var(--C-f172ac);
}
.counsel_wrapper .counseling_form .clausewrap_content .clausewrap_box label {
margin-left: 30px;
}
.counsel_wrapper .counseling_form .clausewrap_content .clausewrap_title {
padding: 30px 0 10px;
font-size: var(--f-17);
color: var(--C-000b17);
font-weight: 800;
}
.counsel_wrapper .counseling_form .clausewrap_content .clausewrap_table {
display: grid;
grid-template-columns: 1fr 2fr 1.2fr;
border: 1px solid var(--C-737380);
border-top: 2px solid var(--C-45474d);
}
.counsel_wrapper .counseling_form .clausewrap_content .clausewrap_table .item {
display: contents;
}
.counsel_wrapper .counseling_form .clausewrap_content .clausewrap_table .th {
padding: 20px;
font-size: var(--f-15);
color: var(--C-000b17);
border-right: 1px solid var(--C-737380);
border-bottom: 1px solid var(--C-737380);
}
.counsel_wrapper .counseling_form .clausewrap_content .clausewrap_table .th:last-child {
border-right: none;
}
.counsel_wrapper .counseling_form .clausewrap_content .clausewrap_table .td {
padding: 20px;
font-size: var(--f-15);
color: var(--C-737380);
border-right: 1px solid var(--C-737380);
}
.counsel_wrapper .counseling_form .clausewrap_content .clausewrap_table .td:last-child {
border-right: none;
}
.counsel_wrapper .counseling_form .clausewrap_content .clausewrap_text {
height: 160px;
margin-top: 5px;
overflow: auto;
padding: 25px 30px;
box-sizing: border-box;
border-radius: 10px;
background-color: var(--C-f4f4f4);
}
.counsel_wrapper .counseling_form .clausewrap_wrap .btn_close {
display: block;
width: 112px;
height: 46px;
margin: 30px auto 0;
font-size: var(--f-21);
color: var(--C-e46ea4);
font-weight: 800;
border-radius: 50px;
border: 1px solid var(--C-e46ea4);
background: none;
}
.counsel_wrapper .counseling_form .btn_request_mo {
display: none;
}
.clause_wrap {
display: none;
width: 100%;
position: absolute;
left: 0;
top: 100%;
padding: 3%;
box-sizing: border-box;
background-color: var(--C-ffffff);
}
.clause_wrap.on {
display: block;
}
/* ===================== 1024px ì´í•˜ ===================== */
@media (max-width: 1024px) {
.counsel_wrapper .counseling_form {
width: 680px;
margin-left: -340px;
flex-direction: row;
flex-wrap: wrap;
}
.counsel_wrapper .counseling_form .input_name {
height: 38px;
margin-left: 40px;
font-size: var(--f-17);
}
.counsel_wrapper .counseling_form .input_phone {
height: 38px;
font-size: var(--f-17);
}
.counsel_wrapper .counseling_form .select_field {
height: 38px;
font-size: var(--f-17);
}
.counsel_wrapper .counseling_form .clause {
display: flex;
width: 100%;
margin-left: 80px;
}
.counsel_wrapper .counseling_form .clausewrap {
display: flex;
width: 100%;
margin-left: 80px;
}
.counsel_wrapper .counseling_form .clausewrap div {
margin-right: 20px;
}
.counsel_wrapper .counseling_form .btn_request {
width: 104px;
font-size: var(--f-20);
}
.counsel_wrapper .counseling_form .btn_request br {
display: block;
}
}
/* ===================== 1020px ì´í•˜ ===================== */
@media (max-width: 1020px) {
.counsel_wrapper .counseling_form .clausewrap_content {
margin: 4% 0 4%;
}
.counsel_wrapper .counseling_form .clausewrap_content .clausewrap_box {
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
}
.counsel_wrapper .counseling_form .clausewrap_content .clausewrap_box p {
width: 100%;
padding-bottom: 10px;
}
}
/* ===================== 720px ì´í•˜ ===================== */
@media (max-width: 720px) {
/*.counsel_wrapper .counseling_form {*/
/* !* display: none; *!*/
/* width: 96%;*/
/* height: auto;*/
/* padding: 15px;*/
/* border-radius: 20px;*/
/* flex-wrap: wrap;*/
/* box-sizing: border-box;*/
/* flex-direction: row;*/
/* flex-wrap: wrap;*/
/*}*/
.counsel_wrapper .counseling_form .item {
margin-bottom: 15px;
flex: 1 1 30%;
}
.counsel_wrapper .counseling_form .input_name {
width: 95%;
margin-left: 0;
}
.counsel_wrapper .counseling_form .input_phone {
width: 95%;
margin: 0;
}
.counsel_wrapper .counseling_form .select_field {
/*width: 100%;*/
/*min-width: 200px;*/
/*max-width: 220px;*/
/*margin: 0;*/
}
.counsel_wrapper .counseling_form .clausewrap {
flex: 100%;
margin-left: 0;
padding: 0 0 20px;
flex-direction: row;
flex-wrap: wrap;
}
.counsel_wrapper .counseling_form .btn_request {
/*display: none;*/
/*width: auto;*/
/*margin: 0 auto;*/
/*padding: 10px 20px;*/
/*position: relative;*/
/*font-weight: 600;*/
}
.counsel_wrapper .counseling_form .btn_request br {
display: none;
}
.counsel_wrapper .counseling_form .clausewrap_content .item {
padding-bottom: 6%;
}
.counsel_wrapper .counseling_form .clausewrap_content .clausewrap_box {
padding: 6% 0;
}
.counsel_wrapper .counseling_form .clausewrap_content .clausewrap_box p {
font-size: 4vw;
}
.counsel_wrapper .counseling_form .clausewrap_content .clausewrap_box label {
font-size: 4vw;
}
.counsel_wrapper .counseling_form .clausewrap_content .clausewrap_title {
font-size: 4vw;
}
.counsel_wrapper .counseling_form .clausewrap_content .clausewrap_table .th {
font-size: 3vw;
}
.counsel_wrapper .counseling_form .clausewrap_content .clausewrap_table .td {
font-size: 3vw;
}
.counsel_wrapper .counseling_form .clausewrap_content .clausewrap_text {
padding: 3% 5%;
font-size: 3.5vw;
}
/* MOBILE */
.counsel_wrapper .counseling_form {
position: fixed;
left: 0;
right: 0;
bottom: 0;
margin: 0;
height: 21.11vw; /*152px*/
top: auto;
width: 100%;
z-index: 100;
padding: 2.78vw 2.78vw 4.17vw 2.78vw; /* 20px 20px 30px 20px */
border-top-left-radius: 4.44vw; /*32px*/
border-top-right-radius: 4.44vw; /*32px*/
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
gap: 0 var(--vw13);
flex-direction: row;
flex-wrap: wrap;
background-color: rgba(0, 11, 23, 0.7);
}
.counsel_wrapper .counseling_form .item {
margin-bottom: var(--vw13);
flex: 1 1 calc(20% - var(--vw13));
}
/* ì´ë¦„ */
.counsel_wrapper .counseling_form .item.name {
flex: 1 1 calc(12% - var(--vw13));
}
/* ì—°ë½ì²˜ */
.counsel_wrapper .counseling_form .item.ph_numb {
flex: 1 1 calc(16% - var(--vw13));
}
/* ìˆ˜ìˆ ë¶€ìœ„ ì„ íƒ */
.counsel_wrapper .counseling_form .item.select_box {
flex: 1 1 calc(24% - var(--vw13));
}
.counsel_wrapper .counseling_form .clause {
padding: 0;
font-size: var(--vw20);
letter-spacing: -0.07vw;
max-width: 79.44vw; /* 572px */
margin: 0 auto;
display: flex;
align-items: center;
flex: 1 1 auto;
}
.counsel_wrapper .counseling_form .clause a {
font-size: var(--vw20);
}
.counsel_wrapper .counseling_form .checkbox_style .box {
width: var(--vw24);
height: var(--vw24);
margin-right: var(--vw9);
border-radius: var(--vw4);
}
.counsel_wrapper .counseling_form .checkbox_style input[type="checkbox"]:checked + .box {
background-size: var(--vw17);
}
.counseling_form .clause > * {
flex: 1 1 auto;
display: flex;
align-items: center;
}
.counsel_wrapper .counseling_form .clause div {
margin: 0;
}
.counsel_wrapper .counseling_form .btn_request_mo {
display: block;
margin-bottom: var(--vw13);
flex: 1 1 calc(20% - var(--vw13));
line-height: 8.06vw; /* 58px */
height: 8.06vw; /* 58px */
top: auto;
padding: 0 var(--vw10);
border-radius: 4.03vw; /* 29px */
justify-content: center;
color: var(--C-ffffff);
cursor: pointer;
border: none;
font-size: 3.33vw; /* 24px */
font-weight: 800;
letter-spacing: -0.07vw;
}
.counsel_wrapper .counseling_form .btn_request {
display: none;
line-height: var(--vw44);
height: var(--vw44);
top: auto;
padding: 0 var(--vw10);
border-radius: var(--vw8);
margin: 0;
font-size: var(--vw20);
justify-content: center;
}
.counsel_wrapper .counseling_form .input_phone,
.counsel_wrapper .counseling_form .input_name,
.counsel_wrapper .counseling_form .select_field {
border-radius: 4.03vw; /* 29px*/
width: 100%;
height: 8.06vw; /* 52px*/
font-size: var(--vw24);
padding: 0 1.39vw; /*0 10px*/
}
.counsel_wrapper .counseling_form .select_field {
background-position: 91% center;
background-size: var(--vw17);
min-width: 0;
width: 100%;
margin: 0;
padding: 0 var(--vw20);
}
.counsel_wrapper .counseling_form .btn_request span {
display: none;
}
.clause_wrap {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: auto;
z-index: 1000;
background-color: transparent;
}
.clause_wrap::before {
content: "";
background-color: var(--C-000000);
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0.5;
}
.clause_content {
max-width: 98%;
margin: 0 auto;
display: flex;
flex-direction: column;
padding: 3%;
height: 100%;
position: relative;
background-color: var(--C-ffffff);
overflow: auto;
box-sizing: border-box;
font-size: var(--vw14);
}
.clause_content .clause_text {
height: auto;
overflow: auto;
}
.clause_content .clause_box p,
.clause_content .clause_box label,
.clause_content .clause_title {
font-size: var(--vw20);
}
.clause_content .clause_text,
.imp_text {
font-size: var(--vw18);
}
.clause_wrap .btn_close {
height: var(--vw46);
font-size: var(--vw21);
}
}
@media (max-width: 720px) {
/* MOBILE */
.counseling_form {
position: fixed;
left: 0;
right: 0;
bottom: 0;
margin: 0;
top: auto;
width: 100%;
z-index: 100;
background-color: rgba(25, 33, 45, 0.7);
padding: var(--vw10);
border-radius: 0;
gap: 0 var(--vw13);
}
.counseling_form .item {
margin-bottom: var(--vw13);
flex: 1 1 calc(33% - var(--vw13));
}
.counseling_form .clause {
padding: 0;
font-size: var(--vw16);
margin: 0;
display: flex;
align-items: center;
flex: 1 1 auto;
}
.counseling_form .clause a {
font-size: var(--vw17);
}
.counseling_form .checkbox_style .box {
width: var(--vw24);
height: var(--vw24);
margin-right: var(--vw9);
border-radius: var(--vw4);
}
.counseling_form .checkbox_style input[type="checkbox"]:checked + .box {
background-size: var(--vw17);
}
.counseling_form .clause > * {
flex: 1 1 auto;
display: flex;
align-items: center;
}
.counseling_form .clause div {
margin: 0;
}
.counseling_form .btn_request {
padding: 0;
line-height: var(--vw44);
height: var(--vw44);
top: auto;
padding: 0 var(--vw10);
border-radius: var(--vw8);
margin: 0;
font-size: var(--vw20);
justify-content: center;
}
.counseling_form .input_phone,
.counseling_form .input_name,
.counseling_form .select_field {
border-radius: var(--vw8);
width: 100%;
height: var(--vw44);
font-size: var(--vw17);
}
.counseling_form .select_field {
background-position: 95% center;
padding-left: var(--vw20);
background-size: var(--vw17);
min-width: 0;
}
.counseling_form .btn_request span {
display: none;
}
.clause_wrap {
position: fixed;
left: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: auto;
z-index: 1000;
background-color: transparent;
}
.clause_wrap::before {
content: "";
background-color: var(--C-000000);
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0.5;
}
.clause_content .clause_text {
height: auto;
overflow: auto;
}
.clause_content .clause_box p,
.clause_content .clause_box label,
.clause_content .clause_title {
font-size: var(--vw20);
}
.clause_content .clause_text,
.imp_text {
font-size: var(--vw18);
}
.clause_wrap .btn_close {
height: var(--vw46);
font-size: var(--vw21);
}
}
/* CBU 별 버튼 컬러 */
/* ë©”ì¸ */
.counsel_wrapper .counseling_form .btn_request,
.counsel_wrapper .counseling_form .btn_request_mo {
background-color: #ff77b9;
}
/* 눈 */
.eye .counsel_wrapper .counseling_form .btn_request_mo,
.eye_center .counsel_wrapper .counseling_form .btn_request_mo,
.eye_center .C-visual .counsel_wrapper .counseling_form .btn_request,
.eye .C-visual .counsel_wrapper .counseling_form .btn_request {
background-color: #f25ace;
}
/* 중년 눈 */
.middle_age .counsel_wrapper .counseling_form .btn_request_mo,
.middle_age .C-visual .counsel_wrapper .counseling_form .btn_request {
background-color: #e7538a;
}
/* ì½” */
.nose .counsel_wrapper .counseling_form .btn_request_mo,
.nose .C-visual .counsel_wrapper .counseling_form .btn_request {
background-color: #3bbc1d;
}
/* ì´ë¹„ì¸í›„ê³¼ */
.functional .counsel_wrapper .counseling_form .btn_request_mo,
.functional .C-visual .counsel_wrapper .counseling_form .btn_request {
background-color: #00a06b;
}
/* 안면윤곽 */
.contour .counsel_wrapper .counseling_form .btn_request_mo,
.contour_center .counsel_wrapper .counseling_form .btn_request_mo,
.contour_center .C-visual .counsel_wrapper .counseling_form .btn_request,
.contour .C-visual .counsel_wrapper .counseling_form .btn_request {
background-color: #04cad7;
}
/* 리프팅 */
.lifting .counsel_wrapper .counseling_form .btn_request_mo,
.lifting_center .counsel_wrapper .counseling_form .btn_request_mo,
.lifting .C-visual .counsel_wrapper .counseling_form .btn_request,
.lifting_center .C-visual .counsel_wrapper .counseling_form .btn_request{
background-color: #ff7f1a;
}
/* 가슴 */
.breast .counsel_wrapper .counseling_form .btn_request_mo,
.breast .C-visual .counsel_wrapper .counseling_form .btn_request {
background-color: #f958c2;
}
/* 가슴 모티바 */
.motiva.breast .counsel_wrapper .counseling_form .btn_request_mo,
.motiva.breast .C-visual .counsel_wrapper .counseling_form .btn_request {
background-color: #961099;
}
/* 남ìžì„±í˜• */
.man .counsel_wrapper .counseling_form .btn_request_mo,
.man .C-visual .counsel_wrapper .counseling_form .btn_request {
background-color: #385eee;
}
/* ì–‘ì•…ìˆ˜ìˆ */
.twojaw .counsel_wrapper .counseling_form .btn_request_mo,
.twojaw .C-visual .counsel_wrapper .counseling_form .btn_request {
background-color: #7b44f5;
}
/*** index.css start ***/
@charset "utf-8";
:root {
--vw1: 0.1389vw;
--vw2: 0.2778vw;
--vw3: 0.4167vw;
--vw4: 0.5556vw;
--vw5: 0.6944vw;
--vw6: 0.8333vw;
--vw7: 0.9722vw;
--vw8: 1.1111vw;
--vw9: 1.25vw;
--vw10: 1.3889vw;
--vw11: 1.5278vw;
--vw12: 1.6667vw;
--vw13: 1.8056vw;
--vw14: 1.9444vw;
--vw15: 2.0833vw;
--vw16: 2.2222vw;
--vw17: 2.3611vw;
--vw18: 2.5vw;
--vw19: 2.6389vw;
--vw20: 2.7778vw;
--vw21: 2.9167vw;
--vw22: 3.0556vw;
--vw23: 3.1944vw;
--vw24: 3.3333vw;
--vw25: 3.4722vw;
--vw26: 3.6111vw;
--vw27: 3.75vw;
--vw28: 3.8889vw;
--vw29: 4.0278vw;
--vw30: 4.1667vw;
--vw31: 4.3056vw;
--vw32: 4.4444vw;
--vw33: 4.5833vw;
--vw34: 4.7222vw;
--vw35: 4.8611vw;
--vw36: 5vw;
--vw37: 5.1389vw;
--vw38: 5.2778vw;
--vw39: 5.4167vw;
--vw40: 5.5556vw;
--vw41: 5.6944vw;
--vw42: 5.8333vw;
--vw43: 5.9722vw;
--vw44: 6.1111vw;
--vw45: 6.25vw;
--vw46: 6.3889vw;
--vw47: 6.5278vw;
--vw48: 6.6667vw;
--vw49: 6.8056vw;
--vw50: 6.9444vw;
--vw51: 7.0833vw;
--vw52: 7.2222vw;
--vw53: 7.3611vw;
--vw54: 7.5vw;
--vw55: 7.6389vw;
--vw56: 7.7778vw;
--vw57: 7.9167vw;
--vw58: 8.0556vw;
--vw59: 8.1944vw;
--vw60: 8.3333vw;
--vw61: 8.4722vw;
--vw62: 8.6111vw;
--vw63: 8.75vw;
--vw64: 8.8889vw;
--vw65: 9.0278vw;
--vw66: 9.1667vw;
--vw67: 9.3056vw;
--vw68: 9.4444vw;
--vw69: 9.5833vw;
--vw70: 9.7222vw;
--vw71: 9.8611vw;
--vw72: 10vw;
--vw73: 10.1389vw;
--vw74: 10.2778vw;
--vw75: 10.4167vw;
--vw76: 10.5556vw;
--vw77: 10.6944vw;
--vw78: 10.8333vw;
--vw79: 10.9722vw;
--vw80: 11.1111vw;
--vw81: 11.25vw;
--vw82: 11.3889vw;
--vw83: 11.5278vw;
--vw84: 11.6667vw;
--vw85: 11.8056vw;
--vw86: 11.9444vw;
--vw87: 12.0833vw;
--vw88: 12.2222vw;
--vw89: 12.3611vw;
--vw90: 12.5vw;
--vw91: 12.6389vw;
--vw92: 12.7778vw;
--vw93: 12.9167vw;
--vw94: 13.0556vw;
--vw95: 13.1944vw;
--vw96: 13.3333vw;
--vw97: 13.4722vw;
--vw98: 13.6111vw;
--vw99: 13.75vw;
--vw100: 13.8889vw;
}
/* layout */
body.hidden {
overflow: hidden;
}
#wrap {
overflow: hidden;
}
@media (max-width: 1024px) {
/* TABLET */
}
@media (max-width: 720px) {
/* MOBILE */
}
/* container */
#container {
position: relative;
z-index: 1;
}
/***** header *****/
#header {
width: 100%;
position: relative;
z-index: 8;
border-bottom: 2px solid var(--C-f4f4f4);
background-color: var(--C-ffffff);
}
#header > .inner {
display: flex;
max-width: 1920px;
margin: 0 auto;
justify-content: space-around;
align-items: flex-end;
}
@media (max-width: 1690px) {
#header > .inner {
position: relative;
max-width: initial;
padding: 0 20px;
}
}
@media (max-width: 720px) {
#header > .inner {
padding: 25px 3%;
justify-content: space-between;
align-items: center;
}
#header > .inner.hidden {
display: none;
}
}
#header .menu_open {
display: none;
width: 5.4vw;
height: 5.3vw;
position: absolute;
top: 35%;
left: 3%;
cursor: pointer;
}
@media (max-width: 720px) {
#header .menu_open {
display: block;
}
}
#header .menu_open i {
width: 100%;
height: 4px;
position: absolute;
left: 0;
background-color: var(--C-45474d);
}
#header .menu_open i:nth-child(1) {
top: 0;
}
#header .menu_open i:nth-child(2) {
top: 14px;
}
@media (max-width: 720px) {
#header .menu_open i:nth-child(2) {
top: 45%;
}
}
#header .menu_open i:nth-child(3) {
top: 28px;
}
@media (max-width: 720px) {
#header .menu_open i:nth-child(3) {
top: initial;
bottom: 0;
}
}
#header h1 {
padding: 24px 0 22px;
}
@media (max-width: 720px) {
#header h1 {
padding: 0 0 0 13%;
}
}
#header h1 a {
display: flex;
}
#header h1 img {
width: 129px;
vertical-align: top;
}
@media (max-width: 720px) {
#header h1 img {
width: 25vw;
}
}
#header .menu {
height: 79px;
position: relative;
}
@media (max-width: 1400px) {
#header .menu {
width: 70%;
overflow: hidden;
flex-wrap: nowrap;
white-space: nowrap;
}
}
@media (max-width: 1170px) {
#header .menu {
width: 60%;
}
}
@media (max-width: 1024px) {
#header .menu {
width: 40%;
}
}
@media (max-width: 720px) {
#header .menu {
display: none;
}
}
#header .menu ul {
display: flex;
height: 100%;
align-items: stretch;
}
@media (max-width: 1690px) {
#header .menu ul {
padding-right: 20px;
box-sizing: border-box;
}
}
#header .menu ul li {
display: flex;
padding: 0 14px 20px;
cursor: pointer;
align-items: flex-end;
}
#header .menu ul li a {
color: var(--C-474748);
font-weight: 500;
}
#header .menu ul li.on a {
color: var(--C-000b17);
font-weight: 900;
}
#header .menu .menu_hidden_open {
display: none;
width: 50px;
height: 100%;
position: absolute;
right: 0;
top: 0;
gap: 5px;
justify-content: center;
align-items: flex-end;
background-color: var(--C-ffffff);
}
@media (max-width: 1400px) {
#header .menu .menu_hidden_open {
display: flex;
}
}
#header .menu .menu_hidden_open i {
display: inline-block;
width: 5px;
height: 5px;
margin-bottom: 30px;
border-radius: 10px;
background-color: var(--C-000b17);
}
#header .right {
padding-bottom: 20px;
}
@media (max-width: 720px) {
#header .right {
padding-bottom: 0;
}
}
#header .right button {
margin-left: 16px;
color: var(--C-000b17);
cursor: pointer;
border: none;
background: none;
}
@media (max-width: 720px) {
#header .right .btn_logout {
display: none;
}
}
#header .right .btn_search {
margin-left: 27px;
}
#header .right .btn_search {
width: 21px;
height: 21px;
text-indent: -1000em;
background: url(../images/common/header_icon_search.png) no-repeat left top;
background-size: 100%;
}
@media (max-width: 720px) {
#header .right .btn_search {
width: 5.7vw;
height: 5.7vw;
}
}
#header .right .btn_language {
width: 21px;
height: 21px;
text-indent: -1000em;
background: url(../images/common/header_icon_language.png) no-repeat left top;
background-size: 100%;
}
@media (max-width: 720px) {
#header .right .btn_language {
width: 5.7vw;
height: 5.7vw;
}
}
#header .right .btn_menu {
width: 18px;
height: 16px;
position: relative;
transition: background 0.3s;
}
@media (max-width: 720px) {
#header .right .btn_menu {
display: none;
}
}
#header .right .btn_menu i {
width: 18px;
height: 2px;
position: absolute;
left: 0;
background-color: var(--C-45474d);
transition: transform 0.3s, opacity 0.3s;
}
#header .right .btn_menu i:nth-child(1) {
top: 0;
}
#header .right .btn_menu i:nth-child(2) {
top: 7px;
}
#header .right .btn_menu i:nth-child(3) {
top: 14px;
}
/* X�� ��ȯ */
#header .right .btn_menu.on i:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
#header .right .btn_menu.on i:nth-child(2) {
opacity: 0;
}
#header .right .btn_menu.on i:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/*!* gnb *!*/
/*.gnb {*/
/* display: none;*/
/* width: 100%;*/
/* position: absolute;*/
/* left: 0;*/
/* top: 81px;*/
/* padding: 30px 0;*/
/* background-color: var(--C-ffffff);*/
/*}*/
/*.gnb.on {*/
/* display: block;*/
/*}*/
/*.gnb .inner {*/
/* display: flex;*/
/* width: 985px;*/
/* margin: 0 auto;*/
/* justify-content: space-between;*/
/*}*/
/*@media (max-width: 1060px) {*/
/* .gnb .inner {*/
/* width: auto;*/
/* padding: 0 5%;*/
/* }*/
/*}*/
/*.gnb nav {*/
/* display: flex;*/
/*}*/
/*.gnb ul {*/
/* display: none;*/
/* flex-direction: column;*/
/*}*/
/*.gnb nav ul.on {*/
/* display: flex;*/
/*}*/
/*.gnb nav ul li {*/
/* position: relative;*/
/* padding: 5px 0;*/
/* opacity: 0;*/
/* transform: translateX(30px);*/
/* animation: gnbLiIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;*/
/*}*/
/*.gnb nav ul.on li:nth-child(1) {*/
/* animation-delay: 0.02s;*/
/*}*/
/*.gnb nav ul.on li:nth-child(2) {*/
/* animation-delay: 0.04s;*/
/*}*/
/*.gnb nav ul.on li:nth-child(3) {*/
/* animation-delay: 0.06s;*/
/*}*/
/*.gnb nav ul.on li:nth-child(4) {*/
/* animation-delay: 0.08s;*/
/*}*/
/*.gnb nav ul.on li:nth-child(5) {*/
/* animation-delay: 0.1s;*/
/*}*/
/*.gnb nav ul.on li:nth-child(6) {*/
/* animation-delay: 0.12s;*/
/*}*/
/*.gnb nav ul.on li:nth-child(7) {*/
/* animation-delay: 0.14s;*/
/*}*/
/*.gnb nav ul.on li:nth-child(8) {*/
/* animation-delay: 0.16s;*/
/*}*/
/*.gnb nav ul.on li:nth-child(9) {*/
/* animation-delay: 0.18s;*/
/*}*/
/*.gnb nav ul.on li:nth-child(10) {*/
/* animation-delay: 0.2s;*/
/*}*/
/*.gnb nav ul.on li:nth-child(11) {*/
/* animation-delay: 0.22s;*/
/*}*/
/*@keyframes gnbLiIn {*/
/* to {*/
/* opacity: 1;*/
/* transform: translateX(0);*/
/* }*/
/*}*/
/*.gnb nav ul li a {*/
/* font-size: var(--f-16);*/
/* color: var(--C-000b17);*/
/* font-weight: 600;*/
/*}*/
/*.gnb nav ul li.on a {*/
/* font-weight: 800;*/
/*}*/
/*.gnb nav ul li .dep3 {*/
/* display: none;*/
/* min-width: 160px;*/
/* position: absolute;*/
/* left: 110%;*/
/* top: 0;*/
/* gap: 5px;*/
/* flex-direction: column;*/
/*}*/
/*.gnb nav ul li .dep3 a {*/
/* font-size: var(--f-13);*/
/* color: var(--C-737380);*/
/* font-weight: 500;*/
/* opacity: 0;*/
/* transform: translateX(20px);*/
/* animation: gnbLiIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;*/
/*}*/
/*.gnb nav ul li.on .dep3 a:nth-child(1) {*/
/* animation-delay: 0.02s;*/
/*}*/
/*.gnb nav ul li.on .dep3 a:nth-child(2) {*/
/* animation-delay: 0.04s;*/
/*}*/
/*.gnb nav ul li.on .dep3 a:nth-child(3) {*/
/* animation-delay: 0.06s;*/
/*}*/
/*.gnb nav ul li.on .dep3 a:nth-child(4) {*/
/* animation-delay: 0.08s;*/
/*}*/
/*.gnb nav ul li.on .dep3 a:nth-child(5) {*/
/* animation-delay: 0.1s;*/
/*}*/
/*.gnb nav ul li.on .dep3 a:nth-child(6) {*/
/* animation-delay: 0.12s;*/
/*}*/
/*.gnb nav ul li.on .dep3 a:nth-child(7) {*/
/* animation-delay: 0.14s;*/
/*}*/
/*.gnb nav ul li.on .dep3 a:nth-child(8) {*/
/* animation-delay: 0.16s;*/
/*}*/
/*.gnb nav ul li .dep3 a::before {*/
/* content: "- ";*/
/*}*/
/*.gnb nav ul li.on .dep3 {*/
/* display: flex;*/
/*}*/
/*.gnb .right ul {*/
/* display: inline-flex;*/
/* gap: 7px;*/
/* position: relative;*/
/*}*/
/*.gnb .right ul li a {*/
/* font-size: var(--f-16);*/
/* color: var(--C-474748);*/
/*}*/
/*.gnb .right ul li .dep3 {*/
/* display: none;*/
/* min-width: 160px;*/
/* position: absolute;*/
/* left: 120%;*/
/* top: 0;*/
/* gap: 5px;*/
/* flex-direction: column;*/
/*}*/
/*.gnb .right ul li .dep3 a {*/
/* font-size: var(--f-13);*/
/* color: var(--C-737380);*/
/* font-weight: 500;*/
/* opacity: 0;*/
/* transform: translateX(20px);*/
/* animation: gnbLiIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;*/
/*}*/
/*.gnb .right ul li.on .dep3 a:nth-child(1) {*/
/* animation-delay: 0.02s;*/
/*}*/
/*.gnb .right ul li.on .dep3 a:nth-child(2) {*/
/* animation-delay: 0.04s;*/
/*}*/
/*.gnb .right ul li.on .dep3 a:nth-child(3) {*/
/* animation-delay: 0.06s;*/
/*}*/
/*.gnb .right ul li.on .dep3 a:nth-child(4) {*/
/* animation-delay: 0.08s;*/
/*}*/
/*.gnb .right ul li.on .dep3 a:nth-child(5) {*/
/* animation-delay: 0.1s;*/
/*}*/
/*.gnb .right ul li.on .dep3 a:nth-child(6) {*/
/* animation-delay: 0.12s;*/
/*}*/
/*.gnb .right ul li.on .dep3 a:nth-child(7) {*/
/* animation-delay: 0.14s;*/
/*}*/
/*.gnb .right ul li .dep3 a::before {*/
/* content: "- ";*/
/*}*/
/*.gnb .right ul li.on .dep3 {*/
/* display: flex;*/
/*}*/
/*.gnb .right .tel {*/
/* padding-top: 25px;*/
/* font-size: var(--f-32);*/
/* color: var(--C-474748);*/
/* font-weight: 900;*/
/* line-height: 1.1;*/
/*}*/
/*.gnb .banner {*/
/* padding-top: 20px;*/
/*}*/
/*.gnb .banner img {*/
/* vertical-align: top;*/
/*}*/
/*!* search *!*/
/*.search {*/
/* display: none;*/
/* width: 100%;*/
/* position: absolute;*/
/* left: 0;*/
/* top: 0;*/
/* padding: 30px 0;*/
/* background-color: var(--C-ffffff);*/
/*}*/
/*.search.on {*/
/* display: block;*/
/*}*/
/*.search .inner {*/
/* display: flex;*/
/* max-width: 1680px;*/
/* margin: 0 auto;*/
/* position: relative;*/
/* justify-content: space-between;*/
/* flex-wrap: wrap;*/
/* flex-direction: column;*/
/*}*/
/*.search .input_form {*/
/* width: 905px;*/
/* height: 52px;*/
/* margin: 0 auto;*/
/* border-radius: 15px;*/
/* background: var(--C-f4f4f4) url(../images/common/header_icon_search.png)*/
/* no-repeat 20px center;*/
/*}*/
/*.search .input_form input {*/
/* width: 100%;*/
/* height: 100%;*/
/* padding: 0 55px;*/
/* box-sizing: border-box;*/
/* border: none;*/
/* background: none;*/
/*}*/
/*.search .recomm_search {*/
/* display: flex;*/
/* width: 905px;*/
/* margin: 0 auto;*/
/* padding-top: 27px;*/
/* position: relative;*/
/*}*/
/*.search .recomm_search::before {*/
/* content: "��õ �˻���";*/
/* padding-right: 40px;*/
/* font-size: var(--f-15);*/
/* color: var(--C-000b17);*/
/* font-weight: 900;*/
/*}*/
/*.search .recomm_search ol {*/
/* display: flex;*/
/* min-height: 240px;*/
/* padding-left: 20px;*/
/* gap: 5px;*/
/* flex-direction: column;*/
/* border-left: 1px solid var(--C-bdbdc9);*/
/*}*/
/*.search .recomm_search ol li {*/
/* font-size: var(--f-13);*/
/* color: var(--C-000b17);*/
/* font-weight: 500;*/
/*}*/
/*.search .recomm_search .banner {*/
/* position: absolute;*/
/* right: 0;*/
/* bottom: 30px;*/
/*}*/
/*.search .recomm_search .banner img {*/
/* vertical-align: top;*/
/*}*/
/*.search_close {*/
/* width: 18px;*/
/* height: 18px;*/
/* cursor: pointer;*/
/* position: absolute;*/
/* right: 0;*/
/* top: 0;*/
/*}*/
/*.search_close i {*/
/* display: block;*/
/* width: 100%;*/
/* height: 3px;*/
/* position: absolute;*/
/* left: 0;*/
/* top: 0;*/
/* transform: rotate(40deg);*/
/* background-color: var(--C-45474d);*/
/*}*/
/*.search_close i:last-child {*/
/* transform: rotate(130deg);*/
/*}*/
/*!*!* sitemap *!*!*/
/*!*.sitemap {*!*/
/*!* width: 100%;*!*/
/*!* position: absolute;*!*/
/*!* left: 0;*!*/
/*!* top: 81px;*!*/
/*!* padding: 30px 0;*!*/
/*!* background-color: var(--C-ffffff);*!*/
/*!* opacity: 0;*!*/
/*!* transform: translateY(-20px);*!*/
/*!* transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),*!*/
/*!* transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);*!*/
/*!* pointer-events: none;*!*/
/*!* display: block; !* display: block���� �ΰ� JS���� on/off�� opacity�� ���� *!*!*/
/*!*}*!*/
/*!*@media (max-width: 720px) {*!*/
/*!* .sitemap {*!*/
/*!* display: none;*!*/
/*!* }*!*/
/*!*}*!*/
/*!*.sitemap.on {*!*/
/*!* opacity: 1;*!*/
/*!* transform: translateY(0);*!*/
/*!* pointer-events: auto;*!*/
/*!*}*!*/
/*!*.sitemap .inner {*!*/
/*!* display: flex;*!*/
/*!* width: 985px;*!*/
/*!* margin: 0 auto;*!*/
/*!* justify-content: space-between;*!*/
/*!* flex-direction: row;*!*/
/*!* flex-wrap: wrap;*!*/
/*!* gap: 35px 0;*!*/
/*!*}*!*/
/*!*@media (max-width: 1060px) {*!*/
/*!* .sitemap .inner {*!*/
/*!* width: auto;*!*/
/*!* padding: 0 5%;*!*/
/*!* }*!*/
/*!*}*!*/
/*!*.sitemap .inner .item {*!*/
/*!* flex: 1 1 14.5%;*!*/
/*!*}*!*/
/*!*@media (max-width: 1060px) {*!*/
/*!* .sitemap .inner .item {*!*/
/*!* flex: 1 1 20%;*!*/
/*!* max-width: 20%;*!*/
/*!* }*!*/
/*!*}*!*/
/*!*@media (max-width: 860px) {*!*/
/*!* .sitemap .inner .item {*!*/
/*!* flex: 1 1 25%;*!*/
/*!* max-width: 25%;*!*/
/*!* }*!*/
/*!*}*!*/
/*!*@media (max-width: 1060px) {*!*/
/*!* .sitemap .inner .item:last-child {*!*/
/*!* max-width: 25%;*!*/
/*!* }*!*/
/*!*}*!*/
/*!*.sitemap .inner .item h4 {*!*/
/*!* padding-bottom: 4px;*!*/
/*!* font-size: var(--f-13);*!*/
/*!* color: var(--C-737380);*!*/
/*!*}*!*/
/*!*.sitemap .inner .item li a {*!*/
/*!* font-size: var(--f-15);*!*/
/*!* color: var(--C-000b17);*!*/
/*!* font-weight: 500;*!*/
/*!*}*!*/
/*!*.sitemap .inner .item li p a {*!*/
/*!* font-weight: 400;*!*/
/*!*}*!*/
/*!*.sitemap .inner .item li p a {*!*/
/*!* font-weight: 400;*!*/
/*!*}*!*/
/*!*.sitemap .inner .item .side_link {*!*/
/*!* display: flex;*!*/
/*!* flex-direction: column;*!*/
/*!* gap: 5px;*!*/
/*!*}*!*/
/*!*.sitemap .inner .item .side_link li a {*!*/
/*!* font-weight: 700;*!*/
/*!* color: var(--C-474748);*!*/
/*!*}*!*/
/*!*.sitemap .inner .item .tel {*!*/
/*!* font-size: var(--f-30);*!*/
/*!* color: var(--C-474748);*!*/
/*!* font-weight: 900;*!*/
/*!* line-height: 1.1;*!*/
/*!*}*!*/
/* gnb ����� */
.gnb_mb {
display: none;
padding: 70px 30px 100px;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: var(--C-ffffff);
}
#header.on {
z-index: 10;
}
.on .gnb_mb {
display: block;
}
@media (max-width: 720px) {
.gnb_mb {
overflow: auto;
}
}
.gnb_mb .dep1 li {
padding: 10px 0;
opacity: 0;
transform: translateX(30px);
animation: gnbLiIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.gnb_mb.on .dep1 li:nth-child(1) {
animation-delay: 0.02s;
}
.gnb_mb.on .dep1 li:nth-child(2) {
animation-delay: 0.04s;
}
.gnb_mb.on .dep1 li:nth-child(3) {
animation-delay: 0.06s;
}
.gnb_mb.on .dep1 li:nth-child(4) {
animation-delay: 0.08s;
}
.gnb_mb.on .dep1 li:nth-child(5) {
animation-delay: 0.1s;
}
.gnb_mb.on .dep1 li:nth-child(6) {
animation-delay: 0.12s;
}
.gnb_mb.on .dep1 li:nth-child(7) {
animation-delay: 0.14s;
}
.gnb_mb.on .dep1 li:nth-child(8) {
animation-delay: 0.16s;
}
.gnb_mb.on .dep1 li:nth-child(9) {
animation-delay: 0.18s;
}
.gnb_mb.on .dep1 li:nth-child(10) {
animation-delay: 0.2s;
}
.gnb_mb.on .dep1 li:nth-child(11) {
animation-delay: 0.22s;
}
.gnb_mb.on .dep1 li:nth-child(12) {
animation-delay: 0.24s;
}
@media (max-width: 400px) {
.gnb_mb .dep1 li {
padding: 7px 0;
}
}
.gnb_mb .dep1 a {
font-size: var(--f-20);
color: var(--C-474748);
font-weight: 500;
}
@media (max-width: 400px) {
.gnb_mb .dep1 a {
font-size: var(--f-20);
}
}
.gnb_mb .dep2 {
display: none;
}
.gnb_mb .dep2.on {
display: block;
}
.gnb_mb .dep2 .btn_dep_back {
width: 23px;
height: 37px;
cursor: pointer;
position: absolute;
left: 30px;
top: 15px;
}
.gnb_mb .dep2 .btn_dep_back i {
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 5px;
background-color: var(--C-45474d);
transform-origin: left center;
}
.gnb_mb .dep2 .btn_dep_back i:first-child {
margin-top: -2px;
transform: translateY(-50%) rotate(45deg);
}
.gnb_mb .dep2 .btn_dep_back i:last-child {
margin-top: 1px;
transform: translateY(-50%) rotate(-45deg);
}
.gnb_mb .dep2 ul {
display: none;
flex-direction: column;
gap: 20px;
}
.gnb_mb .dep2 ul.on {
display: flex;
}
.gnb_mb .dep2 > ul > li {
opacity: 0;
transform: translateX(30px);
animation: gnbLiIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.gnb_mb .dep2.on > ul > li {
opacity: 0;
}
.gnb_mb .dep2.on > ul > li:nth-child(1) {
animation-delay: 0.02s;
}
.gnb_mb .dep2.on > ul > li:nth-child(2) {
animation-delay: 0.04s;
}
.gnb_mb .dep2.on > ul > li:nth-child(3) {
animation-delay: 0.06s;
}
.gnb_mb .dep2.on > ul > li:nth-child(4) {
animation-delay: 0.08s;
}
.gnb_mb .dep2.on > ul > li:nth-child(5) {
animation-delay: 0.1s;
}
.gnb_mb .dep2.on > ul > li:nth-child(6) {
animation-delay: 0.12s;
}
.gnb_mb .dep2.on > ul > li:nth-child(7) {
animation-delay: 0.14s;
}
.gnb_mb .dep2.on > ul > li:nth-child(8) {
animation-delay: 0.16s;
}
.gnb_mb .dep2.on > ul > li:nth-child(9) {
animation-delay: 0.18s;
}
.gnb_mb .dep2.on > ul > li:nth-child(10) {
animation-delay: 0.2s;
}
.gnb_mb .dep2.on > ul > li:nth-child(11) {
animation-delay: 0.22s;
}
.gnb_mb .dep2.on > ul > li:nth-child(12) {
animation-delay: 0.24s;
}
.gnb_mb .dep2.on > ul > li:nth-child(13) {
animation-delay: 0.26s;
}
.gnb_mb .dep2 ul a {
font-size: var(--f-20);
color: var(--C-474748);
font-weight: 500;
}
@media (max-width: 400px) {
.gnb_mb .dep2 ul a {
font-size: var(--f-20);
}
}
.gnb_mb .dep2 ul .dep3 {
display: flex;
padding-top: 20px;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.gnb_mb .dep2 ul .dep3 a {
font-size: var(--f-16);
color: var(--C-737380);
font-weight: 500;
}
@media (max-width: 400px) {
.gnb_mb .dep2 ul .dep3 a {
font-size: var(--f16);
}
}
.gnb_mb .dep2 ul .dep3 a::before {
content: "-";
padding-right: 15px;
}
.gnb_mb .b_dep1 li {
opacity: 0;
transform: translateX(30px);
animation: gnbLiIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.gnb_mb.on .b_dep1 li:nth-child(1) {
animation-delay: 0.02s;
}
.gnb_mb.on .b_dep1 li:nth-child(2) {
animation-delay: 0.04s;
}
.gnb_mb.on .b_dep1 li:nth-child(3) {
animation-delay: 0.06s;
}
.gnb_mb.on .b_dep1 li:nth-child(4) {
animation-delay: 0.08s;
}
.gnb_mb.on .b_dep1 li:nth-child(5) {
animation-delay: 0.1s;
}
.gnb_mb.on .b_dep1 li:nth-child(6) {
animation-delay: 0.12s;
}
.gnb_mb.on .b_dep1 li:nth-child(7) {
animation-delay: 0.14s;
}
.gnb_mb.on .b_dep1 li:nth-child(8) {
animation-delay: 0.16s;
}
.gnb_mb.on .b_dep1 li:nth-child(9) {
animation-delay: 0.18s;
}
.gnb_mb.on .b_dep1 li:nth-child(10) {
animation-delay: 0.2s;
}
.gnb_mb.on .b_dep1 li:nth-child(11) {
animation-delay: 0.22s;
}
.gnb_mb.on .b_dep1 li:nth-child(12) {
animation-delay: 0.24s;
}
.gnb_mb .b_dep2 {
display: none;
position: relative;
}
.gnb_mb .b_dep2.on {
display: block;
}
.gnb_mb .b_dep2 .btn_dep_back {
width: 23px;
height: 37px;
cursor: pointer;
position: absolute;
right: 0;
top: 9px;
z-index: 1;
}
.gnb_mb .b_dep2 .btn_dep_back i {
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 5px;
background-color: var(--C-45474d);
transform-origin: left center;
}
.gnb_mb .b_dep2 .btn_dep_back i:first-child {
margin-top: -2px;
transform: translateY(-50%) rotate(45deg);
}
.gnb_mb .b_dep2 .btn_dep_back i:last-child {
margin-top: 1px;
transform: translateY(-50%) rotate(-45deg);
}
.gnb_mb .b_dep2 ul {
display: none;
}
.gnb_mb .b_dep2 ul.on {
display: block;
}
.gnb_mb .b_dep2 a {
font-size: var(--f-20);
color: var(--C-474748);
}
@media (max-width: 400px) {
.gnb_mb .b_dep2 a {
font-size: var(--f-20);
}
}
.gnb_mb .b_dep2 > ul > li {
opacity: 0;
transform: translateX(30px);
animation: gnbLiIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.gnb_mb .b_dep2.on > ul > li {
opacity: 0;
}
.gnb_mb .b_dep2.on > ul > li:nth-child(1) {
animation-delay: 0.02s;
}
.gnb_mb .b_dep2.on > ul > li:nth-child(2) {
animation-delay: 0.04s;
}
.gnb_mb .b_dep2.on > ul > li:nth-child(3) {
animation-delay: 0.06s;
}
.gnb_mb .b_dep2.on > ul > li:nth-child(4) {
animation-delay: 0.08s;
}
.gnb_mb .b_dep2.on > ul > li:nth-child(5) {
animation-delay: 0.1s;
}
.gnb_mb .b_dep2.on > ul > li:nth-child(6) {
animation-delay: 0.12s;
}
.gnb_mb .b_dep2.on > ul > li:nth-child(7) {
animation-delay: 0.14s;
}
.gnb_mb .b_dep2.on > ul > li:nth-child(8) {
animation-delay: 0.16s;
}
.gnb_mb .b_dep2.on > ul > li:nth-child(9) {
animation-delay: 0.18s;
}
.gnb_mb .b_dep2.on > ul > li:nth-child(10) {
animation-delay: 0.2s;
}
.gnb_mb .b_dep2.on > ul > li:nth-child(11) {
animation-delay: 0.22s;
}
.gnb_mb .b_dep2.on > ul > li:nth-child(12) {
animation-delay: 0.24s;
}
.gnb_mb .b_dep2.on > ul > li:nth-child(13) {
animation-delay: 0.26s;
}
.gnb_mb .bottom .dep3 {
display: flex;
padding: 15px 0 20px;
gap: 15px;
flex-direction: column;
}
.gnb_mb .bottom .dep3 a {
font-size: var(--f-16);
color: var(--C-737380);
font-weight: 500;
}
@media (max-width: 400px) {
.gnb_mb .bottom .dep3 a {
font-size: var(--f-16);
}
}
.gnb_mb .bottom .dep3 a::before {
content: "-";
padding-right: 15px;
}
.gnb_mb .bottom {
padding-top: 50px;
}
.gnb_mb .bottom a {
font-size: var(--f-16);
color: var(--C-474748);
}
@media (max-width: 400px) {
.gnb_mb .bottom a {
font-size: var(--f-16);
}
}
.gnb_mb .bottom .tel {
padding-top: 50px;
font-size: var(--f-30);
color: var(--C-474748);
font-weight: 800;
line-height: 1.2;
}
@media (max-width: 400px) {
.gnb_mb .bottom .tel {
font-size: var(--f-30);
}
}
.gnb_mb .bottom .banner {
margin-top: 40px;
}
@media (max-width: 400px) {
.gnb_mb .bottom .banner {
margin-top: 7%;
}
}
.gnb_mb .bottom .banner img {
width: 100%;
max-width: 540px;
}
.gnb_mb .gnb_mb_close {
width: 37px;
height: 37px;
cursor: pointer;
position: absolute;
left: 30px;
top: 13px;
}
.gnb_mb .gnb_mb_close i {
display: block;
width: 100%;
height: 5px;
position: absolute;
left: 0;
top: 50%;
transform: rotate(45deg);
background-color: var(--C-45474d);
}
.gnb_mb .gnb_mb_close i:last-child {
transform: rotate(-45deg);
}
/*!* footer *!*/
/*#footer {*/
/* width: 100%;*/
/* position: relative;*/
/* z-index: 1;*/
/* border-top: 1px solid var(--C-f4f4f4);*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer {*/
/* border-width: 2px;*/
/* padding-bottom: 120px;*/
/* }*/
/*}*/
/*#footer::before {*/
/* content: "";*/
/* width: 100%;*/
/* height: 1px;*/
/* position: absolute;*/
/* left: 0;*/
/* top: 83px;*/
/* background-color: var(--C-f4f4f4);*/
/*}*/
/*@media (max-width: 1024px) {*/
/* #footer::before {*/
/* top: 60px;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer::before {*/
/* height: 2px;*/
/* top: 16vw;*/
/* }*/
/*}*/
/*#footer::after {*/
/* content: "";*/
/* width: 100%;*/
/* height: 1px;*/
/* position: absolute;*/
/* left: 0;*/
/* top: 251px;*/
/* background-color: var(--C-f4f4f4);*/
/*}*/
/*@media (max-width: 1024px) {*/
/* #footer::after {*/
/* top: initial;*/
/* bottom: 50px;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer::after {*/
/* bottom: 10.6vw;*/
/* }*/
/*}*/
/*#footer .inner {*/
/* width: 960px;*/
/* margin: 0 auto;*/
/*}*/
/*@media (max-width: 1024px) {*/
/* #footer .inner {*/
/* width: initial;*/
/* padding: 0 20px;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .inner {*/
/* padding: 0 5%;*/
/* }*/
/*}*/
/*#footer .link_box {*/
/* display: flex;*/
/* height: 83px;*/
/* justify-content: space-between;*/
/* align-items: center;*/
/* flex-direction: row-reverse;*/
/*}*/
/*@media (max-width: 1024px) {*/
/* #footer .link_box {*/
/* height: 60px;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .link_box {*/
/* height: auto;*/
/* flex-direction: column;*/
/* }*/
/*}*/
/*#footer .link_box .sns_link {*/
/* display: flex;*/
/* gap: 30px;*/
/* line-height: 0;*/
/*}*/
/*@media (max-width: 1024px) {*/
/* #footer .link_box .sns_link {*/
/* gap: 20px;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .link_box .sns_link {*/
/* height: 16vw;*/
/* gap: 9vw;*/
/* align-items: center;*/
/* }*/
/*}*/
/*#footer .link_box .sns_link .btn_Youtube img {*/
/* width: 26px;*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .link_box .sns_link .btn_Youtube img {*/
/* width: 6.5vw;*/
/* }*/
/*}*/
/*#footer .link_box .sns_link .btn_Instagram img {*/
/* width: 23px;*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .link_box .sns_link .btn_Instagram img {*/
/* width: 6.5vw;*/
/* }*/
/*}*/
/*#footer .link_box .sns_link .btn_Facebook img {*/
/* width: 13px;*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .link_box .sns_link .btn_Facebook img {*/
/* width: 3.5vw;*/
/* }*/
/*}*/
/*#footer .link_box .sns_link .btn_Kakao img {*/
/* width: 24px;*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .link_box .sns_link .btn_Kakao img {*/
/* width: 6.5vw;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .link_box .id_link {*/
/* width: 100%;*/
/* padding: 5vw 0 5vw;*/
/* }*/
/*}*/
/*#footer .link_box .id_link ul {*/
/* display: flex;*/
/* gap: 30px;*/
/*}*/
/*@media (max-width: 1024px) {*/
/* #footer .link_box .id_link ul {*/
/* gap: 20px;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .link_box .id_link ul {*/
/* gap: 5vw 0;*/
/* flex-direction: row;*/
/* flex-wrap: wrap;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .link_box .id_link ul li {*/
/* width: 33.3%;*/
/* }*/
/*}*/
/*#footer .link_box .id_link ul li a {*/
/* display: inline-block;*/
/* padding: 2px 0 0 30px;*/
/* font-size: var(--f-19);*/
/* color: var(--C-737380);*/
/* font-weight: 900;*/
/* background: url(../images/common/footer_icon_id.png) no-repeat left top;*/
/* background-size: 23px auto;*/
/*}*/
/*@media (max-width: 1024px) {*/
/* #footer .link_box .id_link ul li a {*/
/* font-size: var(--f-17);*/
/* padding: 0 0 0 22px;*/
/* background-size: 18px auto;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .link_box .id_link ul li a {*/
/* padding: 0 0 0 6.5vw;*/
/* font-size: 4.2vw;*/
/* background-size: 5.2vw auto;*/
/* }*/
/*}*/
/*#footer .link_box .id_link ul li:last-child a {*/
/* background: none;*/
/* padding-left: 0;*/
/*}*/
/*#footer .company_info {*/
/* height: 167px;*/
/* display: flex;*/
/* font-size: var(--f-19);*/
/* color: var(--C-737380);*/
/* justify-content: space-between;*/
/* align-items: center;*/
/* flex-direction: row-reverse;*/
/*}*/
/*@media (max-width: 1024px) {*/
/* #footer .company_info {*/
/* height: 140px;*/
/* font-size: var(--f-17);*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .company_info {*/
/* height: auto;*/
/* padding-bottom: 3vw;*/
/* align-items: flex-start;*/
/* flex-direction: column;*/
/* }*/
/*}*/
/*#footer .company_info .left {*/
/* display: flex;*/
/* gap: 10px;*/
/* flex-direction: column;*/
/*}*/
/*@media (max-width: 1024px) {*/
/* #footer .company_info .left {*/
/* gap: 5px;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .company_info .left {*/
/* padding-bottom: 3vw;*/
/* flex-direction: row;*/
/* flex-wrap: wrap;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .company_info .left p {*/
/* margin-right: 5.4vw;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .company_info .left p:first-child {*/
/* width: 100%;*/
/* margin-right: 0;*/
/* }*/
/*}*/
/*#footer .company_info .left p span {*/
/* margin-right: 27px;*/
/* font-weight: 500;*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .company_info .left p span {*/
/* margin-right: 3vw;*/
/* font-size: 3.4vw;*/
/* }*/
/*}*/
/*#footer .company_info .left p b {*/
/* font-size: var(--f-32);*/
/* color: var(--C-45474d);*/
/* letter-spacing: -1.5px;*/
/* font-weight: 800;*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .company_info .left p b {*/
/* font-size: 5.4vw;*/
/* }*/
/*}*/
/*#footer .company_info .left p strong {*/
/* font-size: var(--f-19);*/
/* color: var(--C-45474d);*/
/* letter-spacing: -1px;*/
/* font-weight: 800;*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .company_info .left p strong {*/
/* font-size: 4vw;*/
/* }*/
/*}*/
/*#footer .company_info .right {*/
/* display: flex;*/
/* gap: 15px;*/
/* flex-direction: column;*/
/*}*/
/*@media (max-width: 1024px) {*/
/* #footer .company_info .right {*/
/* gap: 10px;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .company_info .right {*/
/* font-size: 3.8vw;*/
/* gap: 3vw;*/
/* }*/
/*}*/
/*#footer .company_info .right .link ul {*/
/* display: flex;*/
/*}*/
/*#footer .company_info .right .link li::after {*/
/* content: "";*/
/* display: inline-block;*/
/* width: 1px;*/
/* height: 16px;*/
/* margin: 0 15px;*/
/* color: var(--C-f4f4f4);*/
/* vertical-align: -2px;*/
/*}*/
/*#footer .company_info .right .link li:last-child::after {*/
/* display: none;*/
/*}*/
/*#footer .company_info .right .link a {*/
/* color: var(--C-737380);*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .company_info .right .link a {*/
/* font-size: 3.8vw;*/
/* }*/
/*}*/
/*#footer .copy {*/
/* display: flex;*/
/* height: 77px;*/
/* font-size: var(--f-15);*/
/* color: var(--C-aaaab2);*/
/* align-items: center;*/
/*}*/
/*@media (max-width: 1024px) {*/
/* #footer .copy {*/
/* height: 50px;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .copy {*/
/* height: 10.6vw;*/
/* font-size: 3.5vw;*/
/* }*/
/*}*/
/*!* quick *!*/
/*.quick {*/
/* width: 87px;*/
/* position: fixed;*/
/* right: 50%;*/
/* bottom: 10%;*/
/* margin-right: -750px;*/
/* z-index: 5;*/
/* transition: all 1s ease;*/
/*}*/
/*@media (max-width: 1500px) {*/
/* .quick {*/
/* width: auto;*/
/* right: 2%;*/
/* margin-right: 0;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* .quick {*/
/* bottom: 100px;*/
/* top: initial;*/
/* }*/
/*}*/
/*.quick.hidden {*/
/* display: none;*/
/*}*/
/*.quick .btn_box {*/
/* display: flex;*/
/* width: 88px;*/
/* height: 147px;*/
/* position: relative;*/
/* margin-bottom: 10px;*/
/* flex-direction: column;*/
/* align-items: center;*/
/* justify-content: space-evenly;*/
/* border-radius: 50px;*/
/* background-color: var(--C-000b17);*/
/* transition: all 0.3s ease;*/
/* overflow: hidden;*/
/*}*/
/*@media (max-width: 1500px) {*/
/* .quick .btn_box {*/
/* width: 70px;*/
/* height: 100px;*/
/* }*/
/*}*/
/*.quick .btn_box::after {*/
/* content: "";*/
/* position: absolute;*/
/* width: 48px;*/
/* height: 2px;*/
/* top: 73px;*/
/* z-index: 1;*/
/* background-color: var(--C-33373f);*/
/*}*/
/*@media (max-width: 1500px) {*/
/* .quick .btn_box::after {*/
/* width: 30px;*/
/* top: 50px;*/
/* }*/
/*}*/
/*.quick .btn_box a {*/
/* color: var(--C-aaaab3);*/
/*}*/
/*.quick .btn_box a:hover {*/
/* color: var(--C-ffffff);*/
/*}*/
/*.quick .btn_box .menu_open {*/
/* display: flex;*/
/* width: 100%;*/
/* height: 100%;*/
/* color: var(--C-aaaab3);*/
/* cursor: pointer;*/
/* flex-direction: column;*/
/* justify-content: space-evenly;*/
/* border: none;*/
/* background: none;*/
/* opacity: 1;*/
/* transform: translateY(0px);*/
/* transition: all 0.3s ease;*/
/*}*/
/*@media (max-width: 720px) {*/
/* .quick .btn_box .menu_open {*/
/* font-size: 3vw;*/
/* }*/
/*}*/
/*.quick .btn_box .menu_open:hover {*/
/* color: var(--C-ffffff);*/
/*}*/
/*.quick .btn_box .menu_open i {*/
/* display: block;*/
/*}*/
/*.quick .btn_box .btn_list {*/
/* width: 88px;*/
/* padding: 40px 0;*/
/* position: absolute;*/
/* bottom: 0;*/
/* left: 0;*/
/* z-index: 2;*/
/* flex-direction: column;*/
/* align-items: center;*/
/* justify-content: space-evenly;*/
/* border-radius: 50px;*/
/* background-color: var(--C-000b17);*/
/* opacity: 0;*/
/* pointer-events: none;*/
/* transform: translateY(0);*/
/* transition: all 0.3s ease;*/
/* height: 80%;*/
/*}*/
/*@media (max-width: 1500px) {*/
/* .quick .btn_box .btn_list {*/
/* width: 70px;*/
/* }*/
/*}*/
/*.quick .btn_box .btn_list .tel {*/
/* padding-top: 30px;*/
/* margin-top: 80px;*/
/* font-size: var(--f-17);*/
/* color: var(--C-aaaab3);*/
/* font-weight: 500;*/
/* line-height: 1.2;*/
/* text-align: center;*/
/* filter: brightness(0.5);*/
/* background: url(../images/common/quick_icon_tel.png) no-repeat center top;*/
/*}*/
/*.quick .btn_box .btn_list .tel:hover {*/
/* filter: brightness(1);*/
/*}*/
/*.quick .btn_box .btn_list .tel:hover i {*/
/* color: var(--C-ffffff);*/
/*}*/
/*.quick .btn_box .btn_list ul {*/
/* display: flex;*/
/* flex-direction: column;*/
/* align-items: center;*/
/*}*/
/*.quick .btn_box .btn_list li::before {*/
/* display: block;*/
/* content: "";*/
/* width: 48px;*/
/* height: 1px;*/
/* margin: 13px auto;*/
/* background-color: var(--C-33373f);*/
/*}*/
/*@media (max-width: 1500px) {*/
/* .quick .btn_box .btn_list li::before {*/
/* width: 30px;*/
/* }*/
/*}*/
/*.quick .btn_box .btn_list li a {*/
/* display: inline-block;*/
/* font-size: var(--f-13);*/
/* color: var(--C-aaaab3);*/
/*}*/
/*.quick .btn_box .btn_list li a:hover {*/
/* color: var(--C-ffffff);*/
/*}*/
/*.quick .btn_box .btn_list li a i {*/
/* display: block;*/
/* height: 30px;*/
/* width: 100%;*/
/* filter: brightness(0.5);*/
/* background-repeat: no-repeat;*/
/* background-position: center top;*/
/*}*/
/*.quick .btn_box .btn_list li:nth-child(1) a i {*/
/* background-image: url(../images/common/quick_icon_kakao.png);*/
/*}*/
/*.quick .btn_box .btn_list li:nth-child(2) a i {*/
/* background-image: url(../images/common/quick_icon_cost.png);*/
/*}*/
/*.quick .btn_box .btn_list li:nth-child(3) a i {*/
/* background-image: url(../images/common/quick_icon_online.png);*/
/*}*/
/*.quick .btn_box .btn_list li:nth-child(4) a i {*/
/* background-image: url(../images/common/quick_icon_reservation.png);*/
/*}*/
/*.quick .btn_box .btn_list li a:hover i {*/
/* filter: brightness(1);*/
/*}*/
/*.quick .btn_box.on {*/
/* height: 410px;*/
/* padding: 50px 0;*/
/*}*/
/*.quick .btn_box.on .btn_list {*/
/* display: flex;*/
/* pointer-events: auto;*/
/* opacity: 1;*/
/* height: 100%;*/
/* transform: translateY(0);*/
/*}*/
/*.quick .btn_box.on .menu_open {*/
/* opacity: 0;*/
/* height: 100%;*/
/*}*/
/*.quick .btn_top {*/
/* display: flex;*/
/* width: 88px;*/
/* height: 88px;*/
/* color: var(--C-aaaab3);*/
/* cursor: pointer;*/
/* align-items: center;*/
/* justify-content: center;*/
/* border-radius: 50px;*/
/* background-color: var(--C-000b17);*/
/*}*/
/*@media (max-width: 1500px) {*/
/* .quick .btn_top {*/
/* width: 70px;*/
/* height: 70px;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* .quick .btn_top {*/
/* font-size: 3vw;*/
/* display: none;*/
/* }*/
/*}*/
/*.quick .btn_top:hover {*/
/* color: var(--C-ffffff);*/
/*}*/
/*@media (max-width: 720px) {*/
/* .quick .btn_box .btn_list .tel {*/
/* display: none;*/
/* }*/
/* .quick .btn_box .btn_list li:nth-child(1)::before {*/
/* display: none;*/
/* }*/
/* .quick .btn_box .btn_list li:nth-child(4) {*/
/* display: none;*/
/* }*/
/* .quick .btn_box.on {*/
/* height: 210px;*/
/* }*/
/* .quick .btn_box .btn_list {*/
/* padding: 0;*/
/* }*/
/* .quick .btn_box.on {*/
/* padding: 30px 0;*/
/* }*/
/*}*/
.swiper-wrapper.fade-out {
opacity: 0;
transition: opacity 0.3s ease;
}
.swiper-wrapper.fade-in {
opacity: 1;
transition: opacity 0.3s ease;
}
/* common style */
.title {
line-height: 1;
font-size: var(--f-60);
color: var(--C-000000);
font-weight: 900;
text-align: center;
letter-spacing: -1px;
}
.title i {
font-size: 50px;
font-weight: 300;
}
.title .c_ff77b9 {
color: var(--C-ff77b9);
}
.sub_title {
padding-top: 17px;
padding-bottom: 79px;
font-size: var(--f-20);
color: var(--C-000000);
font-weight: 500;
text-align: center;
letter-spacing: -1px;
line-height: 1;
}
@media (max-width: 720px) {
.title {
font-size: 8.33vw;
letter-spacing: -0.14vw;
}
.sub_title {
padding-top: 2.36vw;
padding-bottom: 5.69vw;
font-size: 2.78vw;
letter-spacing: -0.14vw;
}
}
.main_movie {
position: fixed;
top: 0;
left: 0;
width: 103%;
height: 100vh;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: url(//image.idhospital.com/www/rn_2025/main/video/main_pc_movie_w3840.jpg)
no-repeat center;
background-color: #000;
background-size: cover;
opacity: 1;
transition: opacity 1s;
}
.main_movie iframe.video {
position: absolute;
top: -5000px;
left: 50%;
width: 120%;
height: 120%;
transform: translate(-50%, -50%);
pointer-events: none; /* í´ë¦ 방지 í•„ìš” ì‹œ */
border: none;
}
.main_movie .overwrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0); /* 반투명 ê²€ì •ìƒ‰ ì˜¤ë²„ë ˆì´ */
z-index: 1; /* 비디오 ìœ„ì— í‘œì‹œë˜ë„ë¡ */
}
/* .main_movie.init:hover {
cursor : url('https://image.idhospital.com/www/rn_2025/common/skip-pc.png') 20 30 , auto;
} */
#cursor-container {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
z-index: 9999;
display:none
}
.cursor-follow-clone {
position: absolute;
width: 70px;
height: auto;
pointer-events: none;
opacity: 0.5;
}
#cursor-fixed {
position: fixed;
bottom: 20px;
right: 20px;
width: 60px;
height: auto;
z-index: 9999;
display: none;
pointer-events: none;
}
@media screen and (max-width: 768px) {
#cursor-fixed {
display: block;
}
}
@media (max-width: 720px) {
.main_movie {
background: url(//image.idhospital.com/www/rn_2025/main/video/main_mo_movie_w1080.jpg)
no-repeat center;
background-color: #000;
background-size: cover;
opacity: 1;
transition: opacity 1s;
}
}
/* visual */
.visual {
position: relative;
z-index: 2;
}
.visual .swiper {
z-index: 4;
overflow: initial;
}
.visual .swiper-slide {
height: 1000px;
position: relative;
}
.visual .swiper-slide::after {
content: "";
width: 100%;
height: 540px;
position: absolute;
left: 0;
bottom: -5px;
z-index: 4;
background: url(//image.idhospital.com/www/rn_2025/main/visual_dim.png)
no-repeat center top;
}
@media (max-width: 720px) {
.visual .swiper-slide::after {
height: 200px;
background-size: 100%;
background-position: center bottom;
}
}
@media (max-width: 1150px) {
.visual .swiper-slide {
height: 82vw;
}
}
@media (max-width: 1024px) {
.visual .swiper-slide {
height: 75vw;
min-height: 672px;
}
}
/* visual_01 */
.visual .swiper-slide.visual_01 {
background: url(//image.idhospital.com/www/rn_2025/main/visual.jpg) no-repeat
center top;
}
@media (max-width: 1150px) {
.visual .swiper-slide.visual_01 {
background-size: 188vw;
}
}
@media (max-width: 1024px) {
.visual .swiper-slide.visual_01 {
background-size: auto 672px;
}
}
@media (max-width: 720px) {
.visual .swiper-slide.visual_01 {
height: 80vw;
min-height: 380px;
background: url(//image.idhospital.com/m/rn_2025/main/visual.jpg) no-repeat
center top;
background-size: auto 100%;
}
}
.visual .swiper-slide.visual_01 .visual_model {
content: "";
width: 839px;
height: 100%;
position: absolute;
left: 50%;
top: 0;
z-index: 1;
background: url(//image.idhospital.com/www/rn_2025/main/visual_model.png)
no-repeat left top;
transition: transform 1.2s ease-out;
background-size: auto 100%;
}
@media (max-width: 720px) {
.visual .swiper-slide.visual_01 .visual_model {
width: 116.53vw;
left: 45%;
}
}
.visual .swiper-slide.visual_01 .visual_img_decoration {
position: absolute;
z-index: 5;
background-repeat: no-repeat;
background-position: left top;
background-size: 100% auto;
transition: transform 0.3s ease-out;
will-change: transform;
}
.visual .swiper-slide.visual_01 .visual_img_decoration_01 {
width: 543px;
height: 691px;
max-width: 543px;
left: 50%;
top: 536px;
margin-left: -1180px;
background-image: url(//image.idhospital.com/www/rn_2025/main/visual_img_decoration_01.png);
transition: transform 0.2s ease-out;
}
@media (max-width: 1024px) {
.visual .swiper-slide.visual_01 .visual_img_decoration_01 {
width: 22vw;
height: 30vw;
top: inherit;
bottom: -4vw;
margin-left: 0;
left: -50px;
}
}
@media (max-width: 720px) {
.visual .swiper-slide.visual_01 .visual_img_decoration_01 {
bottom: -15vw;
}
}
.visual .swiper-slide.visual_01 .visual_img_decoration_02 {
width: 204px;
height: 309px;
left: 50%;
top: 745px;
margin-left: 615px;
background-image: url(//image.idhospital.com/www/rn_2025/main/visual_img_decoration_02.png);
transition: transform 0.1s ease-out;
}
@media (max-width: 1024px) {
.visual .swiper-slide.visual_01 .visual_img_decoration_02 {
width: 95px;
height: 180px;
margin-left: 410px;
top: 52vw;
}
}
@media (max-width: 720px) {
.visual .swiper-slide.visual_01 .visual_img_decoration_02 {
width: 11vw;
height: 17vw;
margin-left: 0;
left: inherit;
right: -33px;
top: 63vw;
}
}
/* visual_02 */
.visual .swiper-slide.visual_02 {
background: url(//image.idhospital.com/www/rn_2025/main/visual.jpg) no-repeat
center top;
}
@media (max-width: 1150px) {
.visual .swiper-slide.visual_02 {
background-size: 188vw;
}
}
@media (max-width: 1024px) {
.visual .swiper-slide.visual_02 {
background-size: auto 672px;
}
}
@media (max-width: 720px) {
.visual .swiper-slide.visual_02 {
height: 80vw;
min-height: 380px;
background: url(//image.idhospital.com/m/rn_2025/main/visual.jpg) no-repeat
center top;
background-size: auto 100%;
}
}
.visual .swiper-slide.visual_02 .visual_model {
content: "";
width: 839px;
height: 100%;
position: absolute;
left: 50%;
top: 0;
z-index: 1;
background: url(//image.idhospital.com/www/rn_2025/main/visual_model.png)
no-repeat left top;
transition: transform 1.2s ease-out;
background-size: auto 100%;
}
.visual .swiper-slide.visual_02 .visual_img_decoration {
position: absolute;
z-index: 5;
background-repeat: no-repeat;
background-position: left top;
background-size: 100% auto;
transition: transform 0.3s ease-out;
will-change: transform;
}
.visual .swiper-slide.visual_02 .visual_img_decoration_01 {
width: 543px;
height: 691px;
max-width: 543px;
left: 50%;
top: 536px;
margin-left: -1050px;
background-image: url(//image.idhospital.com/www/rn_2025/main/visual_img_decoration_01.png);
transition: transform 0.2s ease-out;
}
@media (max-width: 1024px) {
.visual .swiper-slide.visual_02 .visual_img_decoration_01 {
width: 22vw;
height: 30vw;
top: inherit;
bottom: -4vw;
margin-left: 0;
left: -50px;
}
}
@media (max-width: 720px) {
.visual .swiper-slide.visual_02 .visual_img_decoration_01 {
bottom: -15vw;
}
}
.visual .swiper-slide.visual_02 .visual_img_decoration_02 {
width: 204px;
height: 309px;
left: 50%;
top: 745px;
margin-left: 615px;
background-image: url(//image.idhospital.com/www/rn_2025/main/visual_img_decoration_02.png);
transition: transform 0.1s ease-out;
}
@media (max-width: 1024px) {
.visual .swiper-slide.visual_02 .visual_img_decoration_02 {
width: 95px;
height: 180px;
margin-left: 410px;
top: 52vw;
}
}
@media (max-width: 720px) {
.visual .swiper-slide.visual_02 .visual_img_decoration_02 {
width: 11vw;
height: 17vw;
margin-left: 0;
left: inherit;
right: -33px;
top: 63vw;
}
}
/* visual_03 */
.visual .swiper-slide.visual_03 {
background: url(//image.idhospital.com/www/rn_2025/main/visual.jpg) no-repeat
center top;
}
@media (max-width: 1150px) {
.visual .swiper-slide.visual_03 {
background-size: 188vw;
}
}
@media (max-width: 1024px) {
.visual .swiper-slide.visual_03 {
background-size: auto 672px;
}
}
@media (max-width: 720px) {
.visual .swiper-slide.visual_03 {
height: 80vw;
min-height: 380px;
background: url(//image.idhospital.com/m/rn_2025/main/visual.jpg) no-repeat
center top;
background-size: auto 100%;
}
}
.visual .swiper-slide.visual_03 .visual_model {
content: "";
width: 839px;
height: 100%;
position: absolute;
left: 50%;
top: 0;
z-index: 1;
background: url(//image.idhospital.com/www/rn_2025/main/visual_model.png)
no-repeat left top;
transition: transform 1.2s ease-out;
background-size: auto 100%;
}
.visual .swiper-slide.visual_03 .visual_img_decoration {
position: absolute;
z-index: 5;
background-repeat: no-repeat;
background-position: left top;
background-size: 100% auto;
transition: transform 0.3s ease-out;
will-change: transform;
}
.visual .swiper-slide.visual_03 .visual_img_decoration_01 {
width: 543px;
height: 691px;
max-width: 543px;
left: 50%;
top: 536px;
margin-left: -1050px;
background-image: url(//image.idhospital.com/www/rn_2025/main/visual_img_decoration_01.png);
transition: transform 0.2s ease-out;
}
@media (max-width: 1950px) {
.visual .swiper-slide.visual_03 .visual_img_decoration_01 {
display: none;
}
}
@media (max-width: 1024px) {
.visual .swiper-slide.visual_03 .visual_img_decoration_01 {
width: 22vw;
height: 30vw;
top: inherit;
bottom: -4vw;
margin-left: 0;
left: -50px;
}
}
@media (max-width: 720px) {
.visual .swiper-slide.visual_03 .visual_img_decoration_01 {
bottom: -15vw;
}
}
.visual .swiper-slide.visual_03 .visual_img_decoration_02 {
width: 204px;
height: 309px;
left: 50%;
top: 745px;
margin-left: 615px;
background-image: url(//image.idhospital.com/www/rn_2025/main/visual_img_decoration_02.png);
transition: transform 0.1s ease-out;
}
@media (max-width: 1024px) {
.visual .swiper-slide.visual_03 .visual_img_decoration_02 {
width: 95px;
height: 180px;
margin-left: 410px;
top: 52vw;
}
}
@media (max-width: 720px) {
.visual .swiper-slide.visual_03 .visual_img_decoration_02 {
width: 11vw;
height: 17vw;
margin-left: 0;
left: inherit;
right: -33px;
top: 63vw;
}
}
/* visual_04 */
.visual .swiper-slide.visual_04 {
background: url(//image.idhospital.com/www/rn_2025/main/visual.jpg) no-repeat
center top;
}
@media (max-width: 1150px) {
.visual .swiper-slide.visual_04 {
background-size: 188vw;
}
}
@media (max-width: 1024px) {
.visual .swiper-slide.visual_04 {
background-size: auto 672px;
}
}
@media (max-width: 720px) {
.visual .swiper-slide.visual_04 {
height: 80vw;
min-height: 380px;
background: url(//image.idhospital.com/m/rn_2025/main/visual.jpg) no-repeat
center top;
background-size: auto 100%;
}
}
.visual .swiper-slide.visual_04 .visual_model {
content: "";
width: 839px;
height: 100%;
position: absolute;
left: 50%;
top: 0;
z-index: 1;
background: url(//image.idhospital.com/www/rn_2025/main/visual_model.png)
no-repeat left top;
transition: transform 1.2s ease-out;
background-size: auto 100%;
}
.visual .swiper-slide.visual_04 .visual_img_decoration {
position: absolute;
z-index: 5;
background-repeat: no-repeat;
background-position: left top;
background-size: 100% auto;
transition: transform 0.3s ease-out;
will-change: transform;
}
.visual .swiper-slide.visual_04 .visual_img_decoration_01 {
width: 543px;
height: 691px;
max-width: 543px;
left: 50%;
top: 536px;
margin-left: -1050px;
background-image: url(//image.idhospital.com/www/rn_2025/main/visual_img_decoration_01.png);
transition: transform 0.2s ease-out;
}
@media (max-width: 1024px) {
.visual .swiper-slide.visual_04 .visual_img_decoration_01 {
width: 22vw;
height: 30vw;
top: inherit;
bottom: -4vw;
margin-left: 0;
left: -50px;
}
}
@media (max-width: 720px) {
.visual .swiper-slide.visual_04 .visual_img_decoration_01 {
bottom: -15vw;
}
}
.visual .swiper-slide.visual_04 .visual_img_decoration_02 {
width: 204px;
height: 309px;
left: 50%;
top: 745px;
margin-left: 615px;
background-image: url(//image.idhospital.com/www/rn_2025/main/visual_img_decoration_02.png);
transition: transform 0.1s ease-out;
}
@media (max-width: 1024px) {
.visual .swiper-slide.visual_04 .visual_img_decoration_02 {
width: 95px;
height: 180px;
margin-left: 410px;
top: 52vw;
}
}
@media (max-width: 720px) {
.visual .swiper-slide.visual_04 .visual_img_decoration_02 {
width: 11vw;
height: 17vw;
margin-left: 0;
left: inherit;
right: -33px;
top: 63vw;
}
}
.visual .text {
width: 1082px;
margin: 0 auto;
padding: 300px 0 150px 90px;
position: relative;
z-index: 4;
transition: transform 0.7s ease-out;
}
@media (max-width: 1150px) {
.visual .text {
width: initial;
padding: 270px 0 90px 100px;
}
}
@media (max-width: 1024px) {
.visual .text {
padding: 220px 0px 90px 70px;
}
}
@media (max-width: 720px) {
.visual .text {
padding: 25% 0% 7% 9%;
}
}
.visual .text p {
padding-bottom: 30px;
font-size: var(--f-23);
color: var(--C-6b3758);
font-weight: 600;
}
@media (max-width: 1150px) {
.visual .text p {
font-size: 2vw;
}
}
@media (max-width: 840px) {
.visual .text p {
font-size: var(--f-18);
}
}
@media (max-width: 720px) {
.visual .text p {
padding-bottom: 5%;
font-size: 2.6vw;
}
}
@media (max-width: 1150px) {
.visual .text img {
width: 50%;
}
}
@media (max-width: 840px) {
.visual .text img {
width: 380px;
}
}
@media (max-width: 720px) {
.visual .text img {
width: 50%;
}
}
.visual .text h3 {
font-size: var(--f-105);
color: var(--C-511e3f);
font-weight: 800;
letter-spacing: -5px;
}
@media (max-width: 1150px) {
.visual .text h3 {
font-size: 9vw;
}
}
@media (max-width: 840px) {
.visual .text h3 {
font-size: var(--f-75);
}
}
@media (max-width: 720px) {
.visual .text h3 {
font-size: 9vw;
letter-spacing: -1px;
}
}
.counseling_form {
display: flex;
width: 960px;
height: 104px;
margin-left: -480px;
position: absolute;
left: 50%;
top: 80%;
z-index: 4;
align-items: center;
border-radius: 70px;
background-color: var(--C-19212d);
}
@media (max-width: 1024px) {
.counseling_form {
width: 680px;
margin-left: -340px;
flex-direction: row;
flex-wrap: wrap;
}
}
@media (max-width: 720px) {
.counseling_form {
/* display: none; */
width: 96%;
height: auto;
padding: 15px;
border-radius: 20px;
flex-wrap: wrap;
box-sizing: border-box;
flex-direction: row;
flex-wrap: wrap;
}
}
@media (max-width: 720px) {
.counseling_form .item {
margin-bottom: 15px;
flex: 1 1 30%;
}
}
.counseling_form .input_name {
width: 140px;
height: 58px;
margin-left: 13px;
padding: 0 20px;
font-size: var(--f-19);
color: var(--C-aaaab3);
font-weight: 500;
box-sizing: border-box;
text-align: center;
border-radius: 50px;
border: none;
}
@media (max-width: 1024px) {
.counseling_form .input_name {
height: 38px;
font-size: var(--f-17);
}
}
@media (max-width: 720px) {
.counseling_form .input_name {
width: 95%;
margin-left: 0;
}
}
@media (max-width: 1024px) {
.counseling_form .input_phone {
height: 38px;
font-size: var(--f-17);
}
}
@media (max-width: 720px) {
.counseling_form .input_phone {
width: 95%;
margin: 0;
}
}
.counseling_form .select_field {
width: 200px;
height: 58px;
margin-left: 20px;
padding-left: 35px;
font-size: var(--f-19);
color: var(--C-aaaab3);
font-weight: 500;
box-sizing: border-box;
border-radius: 50px;
outline: none;
border: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: var(--C-ffffff)
url(//image.idhospital.com/www/rn_2025/common/icon_select_field.png)
no-repeat right 29px center;
}
@media (max-width: 1024px) {
.counseling_form .select_field {
height: 38px;
font-size: var(--f-17);
margin-left: 40px;
}
}
@media (max-width: 720px) {
.counseling_form .select_field {
width: 100%;
min-width: 200px;
max-width: 220px;
margin: 0;
}
}
.counseling_form .clause {
margin-left: 13px;
margin-bottom: 0;
font-size: var(--f-13);
color: var(--C-ffffff);
}
@media (max-width: 1024px) {
.counseling_form .clause {
display: flex;
width: 100%;
margin-left: 80px;
}
}
@media (max-width: 720px) {
.counseling_form .clause {
flex: 100%;
margin-left: 0;
padding: 0 0 20px;
flex-direction: row;
flex-wrap: wrap;
}
}
@media (max-width: 1024px) {
.counseling_form .clause div {
margin-right: 20px;
}
}
.counseling_form .checkbox_style {
display: inline-flex;
align-items: center;
cursor: pointer;
user-select: none;
}
.counseling_form .checkbox_style input[type="checkbox"] {
display: none;
}
.counseling_form .checkbox_style .box {
display: inline-block;
width: 24px;
height: 24px;
margin-right: 9px;
position: relative;
border-radius: 4px;
background-color: var(--C-ffffff);
}
.counseling_form .checkbox_style input[type="checkbox"]:checked + .box {
background: var(--C-ffffff)
url(//image.idhospital.com/www/rn_2025/common/icon_checkbox_check.png)
no-repeat center center;
}
.counseling_form .clause a {
margin-left: 2px;
font-size: var(--f-13);
color: var(--C-aaaab3);
vertical-align: 9px;
border-bottom: 1px solid var(--C-aaaab3);
}
.counseling_form .btn_request {
display: flex;
width: 180px;
height: 100%;
position: absolute;
right: -3px;
top: 0;
font-size: var(--f-24);
color: var(--C-ffffff);
font-weight: 800;
cursor: pointer;
align-items: center;
justify-content: center;
border: none;
border-radius: 70px;
background-color: var(--C-f66fd6);
}
@media (max-width: 1024px) {
.counseling_form .btn_request {
width: 104px;
font-size: var(--f-20);
}
}
@media (max-width: 720px) {
.counseling_form .btn_request {
width: auto;
margin: 0 auto;
padding: 10px 20px;
position: relative;
font-weight: 600;
}
}
.counseling_form .btn_request br {
display: none;
}
@media (max-width: 1024px) {
.counseling_form .btn_request br {
display: block;
}
}
@media (max-width: 720px) {
.counseling_form .btn_request br {
display: none;
}
}
.visual .swiper-button {
display: flex;
width: 720px;
height: 30px;
position: absolute;
left: 50%;
top: 75%;
margin-left: -360px;
justify-content: center;
align-items: center;
}
@media (max-width: 720px) {
.visual .swiper-button {
width: 100%;
margin-left: 0;
left: 0;
top: 90%;
}
}
.visual .swiper-button-prev {
width: 9px;
height: 13px;
margin: 0;
margin-right: 15px;
position: relative;
left: initial;
top: initial;
background: url(//image.idhospital.com/www/rn_2025/main/btn_swiper_visual.png)
no-repeat left top;
}
.visual .swiper-button-prev::after {
display: none;
}
.visual .swiper-button-next {
width: 9px;
height: 13px;
margin: 0;
margin-left: 15px;
position: relative;
right: initial;
top: initial;
transform: rotate(180deg);
background: url(//image.idhospital.com/www/rn_2025/main/btn_swiper_visual.png)
no-repeat left top;
}
.visual .swiper-button-next::after {
display: none;
}
.visual .swiper-pagination {
width: auto;
height: 11px;
position: relative;
top: 0;
}
.visual .swiper-pagination-bullet {
width: 11px;
height: 11px;
margin: 0 5px !important;
vertical-align: top;
opacity: 1;
background-color: var(--C-ffffff);
}
.visual .swiper-pagination-bullet-active {
background-color: var(--C-f66fd6);
}
.clause_wrap {
display: none;
width: 100%;
position: absolute;
left: 0;
top: 100%;
padding: 3%;
box-sizing: border-box;
background-color: var(--C-ffffff);
}
.clause_wrap.on {
display: block;
}
.clause_content {
margin: 45px 0 40px;
border-top: 1px solid var(--C-e3e3e3);
}
@media (max-width: 1020px) {
.clause_content {
margin: 4% 0 4%;
}
}
.clause_content .item {
padding-bottom: 40px;
}
@media (max-width: 720px) {
.clause_content .item {
padding-bottom: 6%;
}
}
.clause_content .clause_box {
display: flex;
padding: 40px 0;
border-top: 1px solid var(--C-e3e3e3);
border-bottom: 1px solid var(--C-e3e3e3);
}
@media (max-width: 1020px) {
.clause_content .clause_box {
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
}
}
@media (max-width: 720px) {
.clause_content .clause_box {
padding: 6% 0;
}
}
.clause_content .clause_box p {
font-size: var(--f-20);
color: var(--C-000b17);
font-weight: 500;
}
@media (max-width: 1020px) {
.clause_content .clause_box p {
width: 100%;
padding-bottom: 10px;
}
}
@media (max-width: 720px) {
.clause_content .clause_box p {
font-size: 4vw;
}
}
.clause_content .clause_box p i {
color: var(--C-f172ac);
}
.clause_content .clause_box label {
margin-left: 30px;
}
@media (max-width: 720px) {
.clause_content .clause_box label {
font-size: 4vw;
}
}
.clause_content .clause_title {
padding: 30px 0 10px;
font-size: var(--f-17);
color: var(--C-000b17);
font-weight: 800;
}
@media (max-width: 720px) {
.clause_content .clause_title {
font-size: 4vw;
}
}
.clause_content .item {
display: none;
}
.clause_content .item.on {
display: block;
}
.clause_content .clause_table {
display: grid;
grid-template-columns: 1fr 2fr 1.2fr;
border: 1px solid var(--C-737380);
border-top: 2px solid var(--C-45474d);
}
.clause_content .clause_table .item {
display: contents;
}
.clause_content .clause_table .th {
padding: 20px;
font-size: var(--f-15);
color: var(--C-000b17);
border-right: 1px solid var(--C-737380);
border-bottom: 1px solid var(--C-737380);
}
@media (max-width: 720px) {
.clause_content .clause_table .th {
font-size: 3vw;
}
}
.clause_content .clause_table .th:last-child {
border-right: none;
}
.clause_content .clause_table .td {
padding: 20px;
font-size: var(--f-15);
color: var(--C-737380);
border-right: 1px solid var(--C-737380);
}
@media (max-width: 720px) {
.clause_content .clause_table .td {
font-size: 3vw;
}
}
.clause_content .clause_table .td:last-child {
border-right: none;
}
.clause_content .clause_text {
height: 160px;
margin-top: 5px;
overflow: auto;
padding: 25px 30px;
box-sizing: border-box;
border-radius: 10px;
background-color: var(--C-f4f4f4);
}
@media (max-width: 720px) {
.clause_content .clause_text {
padding: 3% 5%;
font-size: 3.5vw;
}
}
.clause_wrap .btn_close {
display: block;
width: 112px;
height: 46px;
margin: 30px auto 0;
font-size: var(--f-21);
color: var(--C-e46ea4);
font-weight: 800;
border-radius: 50px;
border: 1px solid var(--C-e46ea4);
background: none;
}
/* contents_RealSelfiegram */
.contents_RealSelfiegram {
padding: 25px 0 100px;
}
.contents_RealSelfiegram .swiper-slide {
width: 242px;
height: 431px;
position: relative;
border-radius: 30px 30px 0 30px;
overflow: hidden;
}
.contents_RealSelfiegram .swiper-slide .item {
display: flex;
position: absolute;
left: 31px;
right: 31px;
top: 29px;
bottom: 25px;
justify-content: space-between;
flex-direction: column;
}
.contents_RealSelfiegram .swiper-slide .item .id_icon {
width: 23px;
height: 24px;
background: url(//image.idhospital.com/www/rn_2025/common/RealSelfiegram_icon_id.png)
no-repeat left top;
}
.contents_RealSelfiegram .swiper-slide .item .info {
text-align: center;
}
.contents_RealSelfiegram .swiper-slide .item .info .name {
font-size: var(--f-25);
color: var(--C-ffffff);
font-weight: 700;
letter-spacing: -0.5px;
}
.contents_RealSelfiegram .swiper-slide .item .info .tag {
font-size: 16px;
letter-spacing: -1px;
color: rgba(255,255,255, 0.5);
}
/*250609 ������ E*/
.contents_RealSelfiegram .swiper-button-prev {
width: 86px;
height: 86px;
left: 50%;
margin-left: -30%;
border-radius: 50%;
background: var(--C-ffffff-50)
url(//image.idhospital.com/www/rn_2025/common/btn_swiper.png) no-repeat
center center;
}
.contents_RealSelfiegram .swiper-button-prev::after {
display: none;
}
.contents_RealSelfiegram .swiper-button-next {
width: 86px;
height: 86px;
right: 50%;
margin-right: -30%;
transform: rotate(180deg);
border-radius: 50%;
background: var(--C-ffffff-50)
url(//image.idhospital.com/www/rn_2025/common/btn_swiper.png) no-repeat
center center;
}
.contents_RealSelfiegram .swiper-button-next::after {
display: none;
}
@media (max-width: 1600px) {
.contents_RealSelfiegram .swiper-button-next {
right: 10%;
margin-right: 0;
}
.contents_RealSelfiegram .swiper-button-prev {
left: 10%;
margin-left: 0;
}
}
@media (max-width: 1024px) {
.contents_RealSelfiegram .swiper-button-next {
right: 5%;
}
.contents_RealSelfiegram .swiper-button-prev {
left: 5%;
}
}
@media (max-width: 720px) {
.contents_RealSelfiegram {
padding: 0 0 12.36vw;
}
.contents_RealSelfiegram .title {
padding-top : 6.11vw;
}
.contents_RealSelfiegram .swiper-slide {
width: 33.61vw;
height: 59.72vw;
border-radius: 4.17vw 4.17vw 0 4.17vw;
}
.contents_RealSelfiegram .swiper-slide .item {
left: 3.61vw;
right: 3.61vw;
top: 3.06vw;
bottom: 3.47vw;
}
.contents_RealSelfiegram .swiper-slide .item .info .name {
font-size: 3.47vw;
letter-spacing: -0.07vw;
}
.contents_RealSelfiegram .swiper-slide .item .info .tag {
font-size: 2.22vw;
letter-spacing: -0.14vw;
}
.contents_RealSelfiegram .swiper-button-prev,
.contents_RealSelfiegram .swiper-button-next {
display: none;
}
.contents_BeforeAfter .img .left {
width: 50%;
}
}
/* contents_BeforeAfter */
.contents_BeforeAfter {
padding-bottom: 103px;
}
.contents_BeforeAfter .tab_list {
display: flex;
height: 45px;
gap: 6px;
padding-top: 35px;
padding-bottom: 79px;
justify-content: center;
}
.contents_BeforeAfter .tab_list a {
display: inline-flex;
height: 45px;
padding: 0 29px;
font-size: 17px;
letter-spacing: -0.5px;
font-weight: 400;
color: var(--C-737380);
border-radius: 22px;
align-items: center;
justify-content: center;
background-color: var(--C-f4f4f4);
}
.contents_BeforeAfter .tab_list a:hover {
color: var(--C-ffffff);
font-weight: 800;
background-color: #ff2c92;
}
.contents_BeforeAfter .tab_list a.on {
color: var(--C-ffffff);
font-weight: 800;
background-color: #ff2c92;
}
.contents_BeforeAfter .swiper-slide {
width: 745px;
}
@media (max-width: 1024px) {
/*.contents_BeforeAfter .swiper-slide {*/
/* width: 680px;*/
/*}*/
}
.contents_BeforeAfter .img {
display: flex;
height: 372px;
overflow: hidden;
justify-content: space-evenly;
border-radius: 186px;
background-color: var(--C-f8f8f8);
}
@media (max-width: 1024px) {
/*.contents_BeforeAfter .img {*/
/* height: 340px;*/
/*}*/
/*.contents_BeforeAfter .img img {*/
/* width: auto;*/
/* height: 100%;*/
/*}*/
}
.contents_BeforeAfter .img .left {
width: 50%;
position: relative;
text-align: center;
}
.contents_BeforeAfter .img .left.login img {
filter: none;
}
.contents_BeforeAfter .img .left.login .login_dim {
display: none;
}
.contents_BeforeAfter .img > div > a > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.contents_BeforeAfter .img .left img {
filter: blur(15px);
}
.contents_BeforeAfter .img .left .login_dim {
display: flex;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
justify-content: center;
align-items: flex-end;
background-color: var(--C-000000-50);
}
.contents_BeforeAfter .img .left .login_dim .text {
padding-bottom: 92px;
}
.contents_BeforeAfter .img .left .login_dim .text p {
padding-bottom: 32px;
/*padding-bottom: 18px;*/
font-size: 17px;
color: var(--C-ffffff);
font-weight: 400;
line-height: 1.35;
letter-spacing: -0.5px;
}
/*@media (max-width: 1024px) {*/
/* .contents_BeforeAfter .img .left .login_dim .text p {*/
/* font-size: var(--f-25);*/
/* }*/
/*}*/
.contents_BeforeAfter .img .left .login_dim .text p strong {
font-weight: 700;
color: #f25ace;
letter-spacing: 0;
}
.contents_BeforeAfter .img .left .text .btn_login {
height: 40px;
line-height: 40px;
padding: 0 34px;
font-size: 15px;
color: var(--C-111113);
font-weight: 800;
cursor: pointer;
border-radius: 50px;
border: none;
background-color: var(--C-ffffff);
}
/*@media (max-width: 1024px) {*/
/* .contents_BeforeAfter .img .left .text .btn_login {*/
/* height: 65px;*/
/* padding: 0 60px;*/
/* }*/
/*}*/
.contents_BeforeAfter .img .right {
width: 50%;
position: relative;
text-align: center;
}
.contents_BeforeAfter .item .info {
padding-top: 17px;
text-align: center;
}
.contents_BeforeAfter .item .info .name {
font-size: var(--f-32);
color: var(--C-000b17);
}
.contents_BeforeAfter .item .info .name strong {
font-size: var(--f-50);
font-weight: 900;
}
.contents_BeforeAfter .item .info .tag {
font-size: 17px;
letter-spacing: -1px;
line-height: 1;
color: var(--C-45474d);
}
.contents_BeforeAfter .swiper-button {
display: flex;
width: 720px;
height: 30px;
margin: 42px auto 0;
position: relative;
justify-content: center;
align-items: center;
}
.contents_BeforeAfter .swiper-button-prev {
width: 13px;
height: 21px;
margin: 0;
margin-right: 20px;
position: relative;
left: initial;
top: initial;
background: url(//image.idhospital.com/www/rn_2025/common/btn_swiper_c000b17.png)
no-repeat left top;
background-size: contain;
}
.contents_BeforeAfter .swiper-button-prev::after {
display: none;
}
.contents_BeforeAfter .swiper-button-next {
width: 13px;
height: 21px;
margin: 0;
margin-left: 20px;
position: relative;
right: initial;
top: initial;
transform: rotate(180deg);
background: url(//image.idhospital.com/www/rn_2025/common/btn_swiper_c000b17.png)
no-repeat left top;
background-size: contain;
}
.contents_BeforeAfter .swiper-button-next::after {
display: none;
}
.contents_BeforeAfter .swiper-pagination {
width: auto;
height: 20px;
position: relative;
top: 0;
}
.contents_BeforeAfter .swiper-pagination-bullet {
width: 15px;
height: 15px;
margin: 0 10px !important;
opacity: 1;
background-color: var(--C-aaaab3);
}
.contents_BeforeAfter .swiper-pagination-bullet-active {
background-color: #ff2c92;
}
@media (max-width: 1024px) {
.contents_BeforeAfter .tab_list {
flex-wrap: wrap;
}
}
@media (max-width: 720px) {
.contents_BeforeAfter {
padding-bottom: 12.36vw;
}
.contents_BeforeAfter .tab_list {
height: auto;
padding: 3.89vw 15.97vw 3.33vw;
gap: 1.25vw 0.83vw;
flex-direction: row;
flex-wrap: wrap;
}
.contents_BeforeAfter .tab_list a {
padding: 0 2.78vw;
height: 6.25vw;
line-height: 6.25vw;
font-size: 2.36vw;
letter-spacing: -0.07vw;
border-radius: 3.06vw;
}
.contents_BeforeAfter .swiper-slide {
width: 83.33vw;
}
.contents_BeforeAfter .img {
height: 41.67vw;
}
.contents_BeforeAfter .img img {
width: 100%;
height: 100%;
}
.contents_BeforeAfter .img .left .login_dim {
align-items: center;
}
.contents_BeforeAfter .img .left .login_dim .text {
padding-bottom: 0;
padding-top: 5.69vw;
}
.contents_BeforeAfter .img .left .login_dim .text p {
font-size: 1.94vw;
letter-spacing: -0.07vw;
padding-bottom: 3.33vw;
}
.contents_BeforeAfter .img .left .text .btn_login {
height: 4.31vw;
line-height: 4.31vw;
padding: 0 3.61vw;
font-size: 1.67vw;
border-radius: 2.22vw;
}
.contents_BeforeAfter .img .right {
width: 50%;
}
.contents_BeforeAfter .item .info {
padding-top: 20px;
}
.contents_BeforeAfter .item .info .name {
font-size: 2.36vw;
}
.contents_BeforeAfter .item .info .name strong {
/*font-size: 7vw;*/
}
.contents_BeforeAfter .item .info .tag {
/*padding: 0 3%;*/
font-size: 2.36vw;
}
.contents_BeforeAfter .swiper-button {
width: 100%;
margin-top: 6.25vw;
}
.contents_BeforeAfter .swiper-button-next {
width: 1.81vw;
height: 2.92vw;
margin-left: 2%;
background-size: 100%;
}
.contents_BeforeAfter .swiper-button-prev {
width: 1.81vw;
height: 2.92vw;
margin-right: 2%;
background-size: 100%;
}
.contents_BeforeAfter .swiper-pagination {
display: flex;
height: 2.92vw;
align-items: center;
}
.contents_BeforeAfter .swiper-pagination-bullet {
width: 2.08vw;
height: 2.08vw;
margin: 0 1.5vw !important;
}
}
/* contents_EventBanner */
.contents_EventBanner {
position: relative;
}
.contents_EventBanner::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: -50%;
z-index: 0;
background-color: var(--C-ff77b9);
}
.contents_EventBanner .item {
display: flex;
width: 1082px;
height: 100px;
margin: 0 auto;
position: relative;
z-index: 1;
border-radius: 70px;
background-color: var(--C-ff77b9);
}
@media (max-width: 1150px) {
.contents_EventBanner .item {
width: 760px;
height: auto;
padding: 20px 0;
}
}
@media (max-width: 1024px) {
.contents_EventBanner .item {
width: 690px;
justify-content: center;
}
}
@media (max-width: 720px) {
.contents_EventBanner .item {
width: 90%;
padding: 10px 5% 10px 0;
box-sizing: border-box;
}
}
.contents_EventBanner .item a {
display: flex;
padding-right: 40px;
color: var(--C-ffffff);
font-weight: 900;
align-items: center;
background: url(//image.idhospital.com/www/rn_2025/main/icon_EventBanner.png)
no-repeat right center;
}
@media (max-width: 1024px) {
.contents_EventBanner .item a {
background-size: 12px auto;
}
}
@media (max-width: 720px) {
.contents_EventBanner .item a {
width: 100%;
align-items: flex-start;
flex-wrap: wrap;
}
}
.contents_EventBanner .item a span {
display: inline-flex;
height: 64px;
margin-right: 15px;
padding: 0 23px;
font-size: var(--f-25);
border-radius: 30px;
align-items: center;
background-color: var(--C-a93297);
}
@media (max-width: 1150px) {
.contents_EventBanner .item a span {
height: auto;
padding: 8px 15px;
font-size: var(--f-18);
font-weight: 700;
border-radius: 100px;
}
}
@media (max-width: 720px) {
.contents_EventBanner .item a span {
padding: 5px 10px;
font-size: 2.78vw;
flex-shrink: 1;
}
}
.contents_EventBanner .item a p {
font-size: var(--f-46);
}
@media (max-width: 1150px) {
.contents_EventBanner .item a p {
font-size: var(--f-32);
font-weight: 700;
}
}
@media (max-width: 1024px) {
.contents_EventBanner .item a p {
font-size: var(--f-24);
}
}
@media (max-width: 720px) {
.contents_EventBanner .item a p {
font-size: 3.33vw;
padding-top: 0.6vw;
}
}
/*center_commonEvent*/
.center_commonEvent {
position: relative;
height: 100%;
overflow: hidden;
margin-bottom: 104px;
}
.center_commonEvent .event_inner {
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0;
position: relative;
z-index: 3;
height: 69px;
color: #fff;
font-size: 46px;
background-color: #ff77b9;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 800;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.center_commonEvent .event_inner a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
letter-spacing: -2px;
gap: 0 30px;
color: #fff;
}
.center_commonEvent .event_inner .event_tit {
background-color: #ff2c92;
display: inline-block;
font-size: 20px;
line-height: 45px;
height: 45px;
padding: 0 27px;
border-radius: 40px;
letter-spacing: 0;
box-sizing: border-box;
}
.center_commonEvent:before,
.center_commonEvent .event_inner:after {
content: "";
display: block;
position: absolute;
top: 0;
width: 50%;
height: 100%;
background-color: #ff77b9;
}
.center_commonEvent:before {
left: 0;
}
.center_commonEvent .event_inner:after {
right: -60px;
width: 60px;
border-bottom-right-radius: 60px;
border-top-right-radius: 60px;
}
.center_commonEvent .event_inner .event_text {
/*position: relative;*/
z-index: 3;
font-size: 30px;
letter-spacing: -1px;
}
.center_commonEvent .event_inner .event_text:after {
content: "";
width: 15px;
height: 15px;
position: absolute;
box-sizing: border-box;
top: 50%;
right: -20px;
transform: translateY(-50%) rotate(-45deg);
border-right: 3px solid #ff2c92;
border-bottom: 3px solid #ff2c92;
}
@media (max-width: 1500px) {
.center_commonEvent .event_inner {
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
width: calc(100% - 60px);
padding: 0;
}
.center_commonEvent .event_inner .event_tit {
line-height: 44px;
height: 44px;
padding: 0 15px;
font-size: var(--f-20);
}
.center_commonEvent .event_inner a {
gap: 0 40px;
}
.center_commonEvent .event_inner:after {
content: none;
}
.center_commonEvent .event_inner .event_text:after {
right: 3%;
}
}
@media (max-width: 720px) {
.center_commonEvent {
margin-bottom: 12.5vw;
}
.center_commonEvent .event_inner:after {
height: 9.58vw;
}
.center_commonEvent:before {
height: 12.64vw;
}
.center_commonEvent .event_inner {
padding: 0;
line-height: 9.58vw;
height: 9.58vw;
border-top-right-radius: 5.56vw;
border-bottom-right-radius: 5.56vw;
justify-content: flex-start;
width: 91%;
}
.center_commonEvent .event_inner a {
letter-spacing: -0.07vw;
gap: 0 3vw;
}
.center_commonEvent .event_inner .event_text {
font-size: 4.16vw;
}
.center_commonEvent .event_inner .event_tit {
font-size: 2.78vw;
line-height: 6.25vw;
height: 6.25vw;
padding: 0 3.5vw;
}
.center_commonContents ul {
padding: 0;
}
.center_commonEvent .event_inner .event_text:after {
width: 2vw;
height: 2vw;
border-width: 0.5vw;
right: 4vw;
}
}
/* contents_idShorts */
.contents_idShorts {
padding: 0 0 100px;
}
.contents_idShorts .sub_title {
padding: 17px 0 81px;
}
.contents_idShorts .swiper-slide {
width: 240px;
height: 428px;
position: relative;
border-radius: 30px;
overflow: hidden;
}
.contents_idShorts .swiper-slide .id_clip_thumb {
height: 428px;
}
/*250609 ������ E*/
.contents_idShorts .swiper-button-prev {
width: 86px;
height: 86px;
left: 50%;
margin-left: -30%;
border-radius: 50%;
background: var(--C-ffffff-50)
url(//image.idhospital.com/www/rn_2025/common/btn_swiper.png) no-repeat
center center;
}
.contents_idShorts .swiper-button-prev::after {
display: none;
}
.contents_idShorts .swiper-button-next::after {
display: none;
}
.contents_idShorts .swiper-button-next {
width: 86px;
height: 86px;
right: 50%;
margin-right: -30%;
transform: rotate(180deg);
border-radius: 50%;
background: var(--C-ffffff-50)
url(//image.idhospital.com/www/rn_2025/common/btn_swiper.png) no-repeat
center center;
}
@media (max-width: 1600px) {
.contents_idShorts .swiper-button-prev {
left: 10%;
margin-left: 0;
}
.contents_idShorts .swiper-button-next {
right: 10%;
margin-right: 0;
}
}
@media (max-width: 1024px) {
.contents_idShorts .swiper-button-prev {
left: 5%;
}
.contents_idShorts .swiper-button-next {
right: 5%;
}
}
@media (max-width: 720px) {
.contents_idShorts {
padding: 0 0 12.64vw;
}
.contents_idShorts .sub_title {
padding: 2.5vw 0 5.97vw;
}
.contents_idShorts .swiper-slide {
width: 33.33vw;
height: 59.44vw;
border-radius: 4.44vw;
}
.contents_idShorts .swiper-slide div {
height: 59.44vw;
}
.contents_idShorts .swiper-button-prev,
.contents_idShorts .swiper-button-next {
display: none;
}
}
/* contents_idYoutube */
.contents_idYoutube {
padding: 0 0 103px;
text-align: center;
}
.contents_idYoutube .sub_title {
padding: 19px 0 80px;
}
.contents_idYoutube .swiper-slide {
width: 620px;
/*height: 348px;*/
overflow: hidden;
/*border-radius: 32px;*/
}
.contents_idYoutube .swiper-slide img {
object-fit: contain;
object-position: center;
border-radius: 32px;
width: 100%;
}
.contents_idYoutube .swiper-button-prev {
width: 86px;
height: 86px;
left: 50%;
margin-left: -30%;
border-radius: 50%;
background: var(--C-ffffff-50)
url(//image.idhospital.com/www/rn_2025/common/btn_swiper.png) no-repeat
center center;
}
.contents_idYoutube .swiper-button-prev::after {
display: none;
}
.contents_idYoutube .swiper-button-next {
width: 86px;
height: 86px;
right: 50%;
margin-right: -30%;
transform: rotate(180deg);
border-radius: 50%;
background: var(--C-ffffff-50)
url(//image.idhospital.com/www/rn_2025/common/btn_swiper.png) no-repeat
center center;
}
.contents_idYoutube .swiper-button-next::after {
display: none;
}
.contents_idYoutube .btn_youtube_page {
display: inline-flex;
height: 45px;
line-height: 45px;
margin-top: 33px;
width: 176px;
text-align: center;
justify-content: center;
align-items: center;
font-size: 17px;
letter-spacing: -0.5px;
color: var(--C-111113);
font-weight: 800;
border-radius: 23px;
align-items: center;
background-color: #ffc1df;
}
@media (max-width: 1024px) {
.contents_idYoutube .swiper-button-prev {
left: 5%;
margin-left: 0;
}
.contents_idYoutube .swiper-button-next {
right: 5%;
margin-right: 0;
}
}
@media (max-width: 720px) {
.contents_idYoutube {
padding: 0 0 93px;
}
.contents_idYoutube .sub_title {
padding: 2.64vw 0 5.56vw;
}
.contents_idYoutube .swiper-slide {
width: 59.58vw;
}
.contents_idYoutube .swiper-slide img {
width: 100%;
border-radius: 4.44vw;
}
.contents_idYoutube .swiper-button-prev,
.contents_idYoutube .swiper-button-next {
display: none;
}
.contents_idYoutube .btn_youtube_page {
height: 6.25vw;
line-height: 6.25vw;
margin-top: 5.56vw;
width: 24.44vw;
font-size: 2.36vw;
letter-spacing: -0.07vw;
border-radius: 3.19vw;
}
}
/* contents_GoodAfterCareZone */
.contents_GoodAfterCareZone {
padding-bottom: 98px;
}
.contents_GoodAfterCareZone .sub_title {
padding: 19px 0 81px;
}
.contents_GoodAfterCareZone ul {
display: flex;
gap: 30px;
justify-content: center;
}
.contents_GoodAfterCareZone ul li {
position: relative;
}
.contents_GoodAfterCareZone ul li img.mb_img {
display: none;
width: 100%;
}
.contents_GoodAfterCareZone ul li .text {
position: absolute;
left: 0;
right: 0;
top: 299px;
font-size: var(--f-20);
color: var(--C-ffffff);
text-align: center;
}
.contents_GoodAfterCareZone ul li .text strong {
display: block;
padding-bottom: 17px;
font-size: 25px;
letter-spacing: -0.5px;
font-weight: 700;
line-height: 1;
}
.contents_GoodAfterCareZone ul li .text p {
font-size: 17px;
letter-spacing: -0.5px;
font-weight: 400;
line-height: 1.2;
}
@media (max-width: 720px) {
.contents_GoodAfterCareZone {
padding-bottom: 12.22vw;
}
.contents_GoodAfterCareZone .sub_title {
padding: 2.5vw 0 5.83vw;
}
.contents_GoodAfterCareZone ul {
padding: 0 4.17vw;
gap: 4.17vw;
flex-direction: column;
align-items: center;
}
.contents_GoodAfterCareZone ul li {
display: flex;
width: 100%;
gap: 2.78vw;
}
.contents_GoodAfterCareZone ul li img.mb_img {
display: block;
}
.contents_GoodAfterCareZone ul li img {
display: none;
width: initial;
height: 100%;
vertical-align: top;
}
.contents_GoodAfterCareZone ul li .text {
display: flex;
width: 50%;
height: 100%;
top: 0.83vw;
right: 0;
left: initial;
flex-direction: column;
justify-content: center;
}
.contents_GoodAfterCareZone ul li .text strong {
font-size: 3.47vw;
letter-spacing: -0.07vw;
padding-bottom: 2.92vw;
}
.contents_GoodAfterCareZone ul li .text p {
font-size: 2.36vw;
letter-spacing: -0.07vw;
}
}
/* contents_idCenter */
.contents_idCenter {
padding-bottom: 108px;
}
.contents_idCenter .swiper-slide {
width: 714px;
cursor: pointer;
}
.contents_idCenter .swiper-slide img {
width: 100%;
vertical-align: top;
}
.contents_idCenter .swiper-slide .mb_img {
display: none;
}
.contents_idCenter .swiper-slide .text {
position: absolute;
left: 435px;
top: 20px;
bottom: 0;
font-size: var(--f-28);
color: var(--C-45474d);
}
@media (max-width: 1024px) {
.contents_idCenter .swiper-slide .text {
left: 300px;
font-size: var(--f-20);
}
}
.contents_idCenter .swiper-slide .text strong {
display: block;
font-size: var(--f-60);
color: var(--C-000b17);
font-weight: 800;
line-height: 1.2;
}
@media (max-width: 1024px) {
.contents_idCenter .swiper-slide .text strong {
font-size: var(--f-40);
}
}
.contents_idCenter .swiper-slide .text a {
display: inline-block;
margin-top: 25px;
padding-right: 26px;
font-size: var(--f-24);
color: var(--C-111113);
font-weight: 700;
line-height: 1.1;
background: url(//image.idhospital.com/www/rn_2025/main/contents_idCenter_icon_arrow.png)
no-repeat right center;
}
.contents_idCenter .swiper-button-prev {
width: 58px;
height: 58px;
left: 47%;
top: 41%;
margin-left: -21.5%;
border-radius: 50%;
background: var(--C-ffffff-50)
url(//image.idhospital.com/www/rn_2025/common/btn_swiper.png) no-repeat
center center;
}
.contents_idCenter .swiper-button-prev::after {
display: none;
}
.contents_idCenter .swiper-button-next {
width: 58px;
height: 58px;
right: 47%;
top: 41%;
margin-right: -21.5%;
border-radius: 50%;
transform: rotate(180deg);
background: var(--C-ffffff-50)
url(//image.idhospital.com/www/rn_2025/common/btn_swiper.png) no-repeat
center center;
}
.contents_idCenter .swiper-button-next::after {
display: none;
}
.contents_idCenter .swiper-pagination {
display: none;
}
.contents_idCenter .swiper .swiper-pagination-bullet-active {
background-color: #ff2c92;
}
@media (max-width: 1600px) {
.contents_idCenter .swiper-button-prev {
left: 10%;
margin-left: 0;
}
.contents_idCenter .swiper-button-next {
right: 10%;
margin-right: 0;
}
}
@media (max-width: 1024px) {
.contents_idCenter .swiper-button-next {
right: 5%;
top: 55px;
}
.contents_idCenter .swiper-button-prev {
left: 5%;
top: 55px;
}
}
@media (max-width: 720px) {
.contents_idCenter {
padding-bottom: 10%;
}
.contents_idCenter .swiper-slide {
width: 94%;
}
/*.contents_idCenter .swiper-slide img {*/
/* display: none;*/
/*}*/
/*.contents_idCenter .swiper-slide .mb_img {*/
/* display: block;*/
/*}*/
.contents_idCenter .swiper-slide .text {
display: flex;
height: 100%;
left: 42%;
top: 0;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.contents_idCenter .swiper-slide .text strong {
font-size: 6vw;
}
.contents_idCenter .swiper-slide .text p {
font-size: 3.5vw;
}
.contents_idCenter .swiper-slide .text a {
margin-top: 4%;
padding-right: 10%;
font-size: 3.5vw;
background-size: 2vw;
}
.contents_idCenter .swiper-button {
display: flex;
width: 100%;
height: 4.17vw;
margin: 5.56vw auto 0;
position: relative;
justify-content: center;
align-items: center;
}
.contents_idCenter .swiper-button-prev {
width: 1.81vw;
height: 2.92vw;
margin-top: 0;
margin-right: 2%;
position: relative;
left: initial;
top: initial;
background: url(//image.idhospital.com/www/rn_2025/common/btn_swiper_c000b17.png)
no-repeat left top;
background-size: 100%;
}
.contents_idCenter .swiper-button-next {
width: 1.81vw;
height: 2.92vw;
margin-top: 0;
margin-left: 2%;
position: relative;
right: initial;
top: initial;
transform: rotate(180deg);
background: url(//image.idhospital.com/www/rn_2025/common/btn_swiper_c000b17.png)
no-repeat left top;
background-size: 100%;
}
.contents_idCenter .swiper-pagination {
display: flex;
width: auto;
height: 2.92vw;
position: relative;
top: 0;
align-items: center;
}
.contents_idCenter .swiper-pagination-bullet {
width: 2.08vw;
height: 2.08vw;
margin: 0 1.5vw !important;
opacity: 1;
background-color: var(--C-aaaab3);
}
}
/* img_decoration */
.img_decoration {
position: absolute;
background-repeat: no-repeat;
background-position: left top;
background-size: 100% auto;
}
.img_decoration_01 {
width: 293px;
height: 501px;
right: 0;
top: 2363px;
background-image: url(//image.idhospital.com/www/rn_2025/main/img_decoration_01_250708.png);
}
.img_decoration_02 {
width: 260px;
height: 415px;
left: 0;
top: 4186px;
background-image: url(//image.idhospital.com/www/rn_2025/main/img_decoration_02_250708.png);
}
.img_decoration_03 {
width: 390px;
height: 726px;
right: 0;
top: 4120px;
background-image: url(//image.idhospital.com/www/rn_2025/main/img_decoration_03_250708_v1.png);
}
@media (max-width: 1024px) {
.img_decoration {
/*display: none;*/
}
}
@media (max-width: 1024px) {
.img_decoration_01 {
width: 166px;
height: 260px;
top: 2230px;
background-size: 100%;
}
.img_decoration_02 {
width: 178px;
height: 262px;
top: 3920px;
background-size: 100%;
}
.img_decoration_03 {
width: 221px;
height: 641px;
top: 4230px;
background-size: 100%;
}
}
@media (max-width: 720px) {
.img_decoration_01 {
top: 237.5vw;
right: -5.42vw;
width: 19.03vw;
height: 36.11vw;
}
.img_decoration_02 {
top: 450.69vw;
width: 19.17vw;
height: 36.39vw;
left: -5.69vw;
}
.img_decoration_03 {
top: 534.31vw;
right: -4.58vw;
width: 34.86vw;
height: 72.36vw;
}
}
/*!* quick *!*/
/*.quick {*/
/* width: 87px;*/
/* position: fixed;*/
/* right: 50%;*/
/* bottom: 10%;*/
/* margin-right: -750px;*/
/* z-index: 5;*/
/* transition: all 1s ease;*/
/*}*/
/*@media (max-width: 1500px) {*/
/* .quick {*/
/* width: auto;*/
/* right: 2%;*/
/* margin-right: 0;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* .quick {*/
/* bottom: 100px;*/
/* top: initial;*/
/* }*/
/*}*/
/*.quick.hidden {*/
/* display: none;*/
/*}*/
/*.quick .btn_box {*/
/* display: flex;*/
/* width: 88px;*/
/* height: 147px;*/
/* position: relative;*/
/* margin-bottom: 10px;*/
/* flex-direction: column;*/
/* align-items: center;*/
/* justify-content: space-evenly;*/
/* border-radius: 50px;*/
/* background-color: var(--C-000b17);*/
/* transition: all 0.3s ease;*/
/* overflow: hidden;*/
/*}*/
/*@media (max-width: 1500px) {*/
/* .quick .btn_box {*/
/* width: 70px;*/
/* height: 100px;*/
/* }*/
/*}*/
/*.quick .btn_box::after {*/
/* content: "";*/
/* position: absolute;*/
/* width: 48px;*/
/* height: 2px;*/
/* top: 73px;*/
/* z-index: 1;*/
/* background-color: var(--C-33373f);*/
/*}*/
/*@media (max-width: 1500px) {*/
/* .quick .btn_box::after {*/
/* width: 30px;*/
/* top: 50px;*/
/* }*/
/*}*/
/*.quick .btn_box a {*/
/* color: var(--C-aaaab3);*/
/*}*/
/*.quick .btn_box a:hover {*/
/* color: var(--C-ffffff);*/
/*}*/
/*.quick .btn_box .menu_open {*/
/* display: flex;*/
/* width: 100%;*/
/* height: 100%;*/
/* color: var(--C-aaaab3);*/
/* cursor: pointer;*/
/* flex-direction: column;*/
/* justify-content: space-evenly;*/
/* border: none;*/
/* background: none;*/
/* opacity: 1;*/
/* transform: translateY(0px);*/
/* transition: all 0.3s ease;*/
/*}*/
/*@media (max-width: 720px) {*/
/* .quick .btn_box .menu_open {*/
/* font-size: 3vw;*/
/* }*/
/*}*/
/*.quick .btn_box .menu_open:hover {*/
/* color: var(--C-ffffff);*/
/*}*/
/*.quick .btn_box .menu_open i {*/
/* display: block;*/
/*}*/
/*.quick .btn_box .btn_list {*/
/* width: 88px;*/
/* padding: 40px 0;*/
/* position: absolute;*/
/* bottom: 0;*/
/* left: 0;*/
/* z-index: 2;*/
/* flex-direction: column;*/
/* align-items: center;*/
/* justify-content: space-evenly;*/
/* border-radius: 50px;*/
/* background-color: var(--C-000b17);*/
/* opacity: 0;*/
/* pointer-events: none;*/
/* transform: translateY(0);*/
/* transition: all 0.3s ease;*/
/* height: 80%;*/
/*}*/
/*@media (max-width: 1500px) {*/
/* .quick .btn_box .btn_list {*/
/* width: 70px;*/
/* }*/
/*}*/
/*.quick .btn_box .btn_list .tel {*/
/* padding-top: 30px;*/
/* margin-top: 80px;*/
/* font-size: var(--f-17);*/
/* color: var(--C-aaaab3);*/
/* font-weight: 500;*/
/* line-height: 1.2;*/
/* text-align: center;*/
/* filter: brightness(0.5);*/
/* background: url(../images/common/quick_icon_tel.png) no-repeat center top;*/
/*}*/
/*.quick .btn_box .btn_list .tel:hover {*/
/* filter: brightness(1);*/
/*}*/
/*.quick .btn_box .btn_list .tel:hover i {*/
/* color: var(--C-ffffff);*/
/*}*/
/*.quick .btn_box .btn_list ul {*/
/* display: flex;*/
/* flex-direction: column;*/
/* align-items: center;*/
/*}*/
/*.quick .btn_box .btn_list li::before {*/
/* display: block;*/
/* content: "";*/
/* width: 48px;*/
/* height: 1px;*/
/* margin: 13px auto;*/
/* background-color: var(--C-33373f);*/
/*}*/
/*@media (max-width: 1500px) {*/
/* .quick .btn_box .btn_list li::before {*/
/* width: 30px;*/
/* }*/
/*}*/
/*.quick .btn_box .btn_list li a {*/
/* display: inline-block;*/
/* font-size: var(--f-13);*/
/* color: var(--C-aaaab3);*/
/*}*/
/*.quick .btn_box .btn_list li a:hover {*/
/* color: var(--C-ffffff);*/
/*}*/
/*.quick .btn_box .btn_list li a i {*/
/* display: block;*/
/* height: 30px;*/
/* width: 100%;*/
/* filter: brightness(0.5);*/
/* background-repeat: no-repeat;*/
/* background-position: center top;*/
/*}*/
/*.quick .btn_box .btn_list li:nth-child(1) a i {*/
/* background-image: url(../images/common/quick_icon_kakao.png);*/
/*}*/
/*.quick .btn_box .btn_list li:nth-child(2) a i {*/
/* background-image: url(../images/common/quick_icon_cost.png);*/
/*}*/
/*.quick .btn_box .btn_list li:nth-child(3) a i {*/
/* background-image: url(../images/common/quick_icon_online.png);*/
/*}*/
/*.quick .btn_box .btn_list li:nth-child(4) a i {*/
/* background-image: url(../images/common/quick_icon_reservation.png);*/
/*}*/
/*.quick .btn_box .btn_list li a:hover i {*/
/* filter: brightness(1);*/
/*}*/
/*.quick .btn_box.on {*/
/* height: 410px;*/
/* padding: 50px 0;*/
/*}*/
/*.quick .btn_box.on .btn_list {*/
/* display: flex;*/
/* pointer-events: auto;*/
/* opacity: 1;*/
/* height: 100%;*/
/* transform: translateY(0);*/
/*}*/
/*.quick .btn_box.on .menu_open {*/
/* opacity: 0;*/
/* height: 100%;*/
/*}*/
/*.quick .btn_top {*/
/* display: flex;*/
/* width: 88px;*/
/* height: 88px;*/
/* color: var(--C-aaaab3);*/
/* cursor: pointer;*/
/* align-items: center;*/
/* justify-content: center;*/
/* border-radius: 50px;*/
/* background-color: var(--C-000b17);*/
/*}*/
/*@media (max-width: 1500px) {*/
/* .quick .btn_top {*/
/* width: 70px;*/
/* height: 70px;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* .quick .btn_top {*/
/* font-size: 3vw;*/
/* display: none;*/
/* }*/
/*}*/
/*.quick .btn_top:hover {*/
/* color: var(--C-ffffff);*/
/*}*/
/*@media (max-width: 720px) {*/
/* .quick .btn_box .btn_list .tel {*/
/* display: none;*/
/* }*/
/* .quick .btn_box .btn_list li:nth-child(1)::before {*/
/* display: none;*/
/* }*/
/* .quick .btn_box .btn_list li:nth-child(4) {*/
/* display: none;*/
/* }*/
/* .quick .btn_box .btn_list li:nth-child(4) {*/
/* display: none;*/
/* }*/
/* .quick .btn_box.on {*/
/* height: 210px;*/
/* }*/
/* .quick .btn_box .btn_list {*/
/* padding: 0;*/
/* }*/
/* .quick .btn_box.on {*/
/* padding: 30px 0;*/
/* }*/
/*}*/
@media (max-width: 720px) {
/* MOBILE */
/*.counseling_form {*/
/* position: fixed;*/
/* left: 0;*/
/* right: 0;*/
/* bottom: 0;*/
/* margin: 0;*/
/* top: auto;*/
/* width: 100%;*/
/* z-index: 100;*/
/* background-color: rgba(25, 33, 45, 0.7);*/
/* padding: var(--vw10);*/
/* border-radius: 0;*/
/* gap: 0 var(--vw13);*/
/*}*/
/*.counseling_form .item {*/
/* margin-bottom: var(--vw13);*/
/* flex: 1 1 calc(33% - var(--vw13));*/
/*}*/
/*.counseling_form .clause {*/
/* padding: 0;*/
/* font-size: var(--vw16);*/
/* margin: 0;*/
/* display: flex;*/
/* align-items: center;*/
/* flex: 1 1 auto;*/
/*}*/
/*.counseling_form .clause a {*/
/* font-size: var(--vw17);*/
/*}*/
/*.counseling_form .checkbox_style .box {*/
/* width: var(--vw24);*/
/* height: var(--vw24);*/
/* margin-right: var(--vw9);*/
/* border-radius: var(--vw4);*/
/*}*/
/*.counseling_form .checkbox_style input[type="checkbox"]:checked + .box {*/
/* background-size: var(--vw17);*/
/*}*/
/*.counseling_form .clause > * {*/
/* flex: 1 1 auto;*/
/* display: flex;*/
/* align-items: center;*/
/*}*/
/*.counseling_form .clause div {*/
/* margin: 0;*/
/*}*/
/*.counseling_form .btn_request {*/
/* padding: 0;*/
/* line-height: var(--vw44);*/
/* height: var(--vw44);*/
/* top: auto;*/
/* padding: 0 var(--vw10);*/
/* border-radius: var(--vw8);*/
/* margin: 0;*/
/* font-size: var(--vw20);*/
/* justify-content: center;*/
/*}*/
/*.counseling_form .input_phone,*/
/*.counseling_form .input_name,*/
/*.counseling_form .select_field {*/
/* border-radius: var(--vw8);*/
/* width: 100%;*/
/* height: var(--vw44);*/
/* font-size: var(--vw17);*/
/*}*/
/*.counseling_form .select_field {*/
/* background-position: 95% center;*/
/* padding-left: var(--vw20);*/
/* background-size: var(--vw17);*/
/* min-width: 0;*/
/*}*/
/*.counseling_form .btn_request span {*/
/* display: none;*/
/*}*/
.clause_wrap {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: auto;
z-index: 1000;
background-color: transparent;
}
.clause_wrap::before {
content: "";
background-color: var(--C-000000);
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0.5;
}
.clause_content {
max-width: 98%;
margin: 0 auto;
display: flex;
flex-direction: column;
padding: 3%;
height: 100%;
position: relative;
background-color: var(--C-ffffff);
overflow: auto;
box-sizing: border-box;
font-size: var(--vw14);
}
.clause_content .clause_text {
height: auto;
overflow: auto;
}
.clause_content .clause_box p,
.clause_content .clause_box label,
.clause_content .clause_title {
font-size: var(--vw20);
}
.clause_content .clause_text,
.imp_text {
font-size: var(--vw18);
}
.clause_wrap .btn_close {
height: var(--vw46);
font-size: var(--vw21);
}
}
.swiper .item > .img > div > img {
width: 100%;
height: 100%;
object-fit: cover;
}
/*** index.css end ***/
@charset "utf-8";
/**** layout_main.css start ****/
#wrap {
overflow: hidden;
}
@media (max-width: 1024px) {
/* TABLET */
}
@media (max-width: 720px) {
/* MOBILE */
}
/* container */
#container {
position: relative;
z-index: 1;
}
/* header */
#header {
width: 100%;
position: relative;
z-index: 6;
border-bottom: 2px solid var(--C-f4f4f4);
background-color: var(--C-ffffff);
}
#header > .inner {
display: flex;
max-width: 1920px;
margin: 0 auto;
justify-content: space-around;
align-items: flex-end;
}
@media (max-width: 1690px) {
#header > .inner {
position: relative;
max-width: initial;
padding: 0 20px;
}
}
@media (max-width: 720px) {
#header > .inner {
padding: 25px 3%;
justify-content: space-between;
align-items: center;
}
}
#header .menu_open {
display: none;
width: 5.4vw;
height: 5.3vw;
position: absolute;
top: 35%;
left: 3%;
cursor: pointer;
}
@media (max-width: 720px) {
#header .menu_open {
display: block;
width: 6.5vw;
}
}
#header .menu_open i {
width: 100%;
height: 4px;
position: absolute;
left: 0;
background-color: var(--C-45474d);
}
#header .menu_open i:nth-child(1) {
top: 0;
}
#header .menu_open i:nth-child(2) {
top: 14px;
}
#header .menu_open i:nth-child(3) {
top: 28px;
}
@media (max-width: 720px) {
#header .menu_open i{height: 0.7vw;}
#header .menu_open i:nth-child(2) {top: 50%;transform: translate(0,-50%);}
#header .menu_open i:nth-child(3) {top: initial;bottom: 0;}
}
#header h1 {
padding: 24px 0 22px;
}
@media (max-width: 720px) {
#header h1 {
padding: 0 0 0 9vw;
}
}
#header h1 a {
display: flex;
}
#header h1 img {
width: 129px;
vertical-align: top;
}
@media (max-width: 720px) {
#header h1 img {
width: 29vw;
margin-top: -1.8vw;
}
}
#header .menu {
height: 79px;
position: relative;
}
@media (max-width: 1400px) {
#header .menu {
width: 70%;
overflow: hidden;
flex-wrap: nowrap;
white-space: nowrap;
}
}
@media (max-width: 1170px) {
#header .menu {
width: 60%;
}
}
@media (max-width: 1024px) {
#header .menu {
width: 40%;
}
}
@media (max-width: 720px) {
#header .menu {
display: none;
}
}
#header .menu ul {
display: flex;
height: 100%;
align-items: stretch;
}
@media (max-width: 1690px) {
#header .menu ul {
padding-right: 20px;
box-sizing: border-box;
}
}
#header .menu ul li {
display: flex;
padding: 0 14px 20px;
cursor: pointer;
align-items: flex-end;
}
#header .menu ul li a {
color: var(--C-474748);
font-weight: 500;
}
#header .menu ul li.on a {
color: var(--C-000b17);
font-weight: 900;
}
#header .menu .menu_hidden_open {
display: none;
width: 50px;
height: 100%;
position: absolute;
right: 0;
top: 0;
gap: 5px;
justify-content: center;
align-items: flex-end;
background-color: var(--C-ffffff);
}
@media (max-width: 1400px) {
#header .menu .menu_hidden_open {
display: flex;
}
}
#header .menu .menu_hidden_open i {
display: inline-block;
width: 5px;
height: 5px;
margin-bottom: 30px;
border-radius: 10px;
background-color: var(--C-000b17);
}
#header .right {
padding-bottom: 20px;
}
@media (max-width: 720px) {
#header .right {
padding-bottom: 0;
}
}
#header .right button {
margin-left: 16px;
color: var(--C-000b17);
cursor: pointer;
border: none;
background: none;
}
@media (max-width: 720px) {
#header .right button{margin-left: 2vw;}
#header .right .btn_logout {
display: none;
}
}
#header .right .btn_search {
margin-left: 27px;
}
#header .right .btn_search {
width: 21px;
height: 21px;
text-indent: -1000em;
background: url(//image.idhospital.com/www/rn_2025/common/header_icon_search.png)
no-repeat left top;
background-size: 100%;
}
@media (max-width: 720px) {
#header .right .btn_search {
width: 5.7vw;
height: 5.7vw;
}
}
#header .right .btn_language {
width: 21px;
height: 21px;
text-indent: -1000em;
background: url(//image.idhospital.com/www/rn_2025/common/header_icon_language.png)
no-repeat left top;
background-size: 100%;
}
@media (max-width: 720px) {
#header .right .btn_language {
width: 5.7vw;
height: 5.7vw;
}
}
#header .right .btn_menu {
width: 18px;
height: 16px;
position: relative;
transition: background 0.3s;
}
@media (max-width: 720px) {
#header .right .btn_menu {
display: none;
}
}
#header .right .btn_menu i {
width: 18px;
height: 2px;
position: absolute;
left: 0;
background-color: var(--C-45474d);
transition: transform 0.3s, opacity 0.3s;
}
#header .right .btn_menu i:nth-child(1) {
top: 0;
}
#header .right .btn_menu i:nth-child(2) {
top: 7px;
}
#header .right .btn_menu i:nth-child(3) {
top: 14px;
}
/* Xìž ë³€í™˜ */
#header .right .btn_menu.on i:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
#header .right .btn_menu.on i:nth-child(2) {
opacity: 0;
}
#header .right .btn_menu.on i:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* gnb */
.gnb {
display: none;
width: 100%;
position: absolute;
left: 0;
top: 81px;
padding: 30px 0;
background-color: var(--C-ffffff);
box-shadow: -7px 4px 10px rgba(0, 0, 0, 0.1);
}
.gnb.on {
display: block;
}
.gnb .inner {
display: flex;
width: 985px;
margin: 0 auto;
justify-content: space-between;
}
@media (max-width: 1060px) {
.gnb .inner {
width: auto;
padding: 0 5%;
}
}
.gnb nav {
display: flex;
margin-left: 45px;
}
.gnb ul {
display: none;
flex-direction: column;
}
.gnb nav ul.on {
display: flex;
}
.gnb nav ul li {
position: relative;
padding: 5px 0;
opacity: 0;
transform: translateX(30px);
animation: gnbLiIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.gnb nav ul.on li:nth-child(1) {
animation-delay: 0.02s;
}
.gnb nav ul.on li:nth-child(2) {
animation-delay: 0.04s;
}
.gnb nav ul.on li:nth-child(3) {
animation-delay: 0.06s;
}
.gnb nav ul.on li:nth-child(4) {
animation-delay: 0.08s;
}
.gnb nav ul.on li:nth-child(5) {
animation-delay: 0.1s;
}
.gnb nav ul.on li:nth-child(6) {
animation-delay: 0.12s;
}
.gnb nav ul.on li:nth-child(7) {
animation-delay: 0.14s;
}
.gnb nav ul.on li:nth-child(8) {
animation-delay: 0.16s;
}
.gnb nav ul.on li:nth-child(9) {
animation-delay: 0.18s;
}
.gnb nav ul.on li:nth-child(10) {
animation-delay: 0.2s;
}
.gnb nav ul.on li:nth-child(11) {
animation-delay: 0.22s;
}
@keyframes gnbLiIn {
to {
opacity: 1;
transform: translateX(0);
}
}
.gnb nav ul li a {
font-size: var(--f-16);
color: var(--C-000b17);
font-weight: 600;
}
.gnb nav ul li.on a {
font-weight: 800;
}
.gnb nav ul li .dep3 {
display: none;
min-width: 160px;
position: absolute;
left: 110%;
top: 0;
gap: 5px;
flex-direction: column;
}
.gnb nav ul li .dep3 a {
font-size: var(--f-13);
color: var(--C-737380);
font-weight: 500;
opacity: 0;
transform: translateX(20px);
animation: gnbLiIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.gnb nav ul li.on .dep3 a:nth-child(1) {
animation-delay: 0.02s;
}
.gnb nav ul li.on .dep3 a:nth-child(2) {
animation-delay: 0.04s;
}
.gnb nav ul li.on .dep3 a:nth-child(3) {
animation-delay: 0.06s;
}
.gnb nav ul li.on .dep3 a:nth-child(4) {
animation-delay: 0.08s;
}
.gnb nav ul li.on .dep3 a:nth-child(5) {
animation-delay: 0.1s;
}
.gnb nav ul li.on .dep3 a:nth-child(6) {
animation-delay: 0.12s;
}
.gnb nav ul li.on .dep3 a:nth-child(7) {
animation-delay: 0.14s;
}
.gnb nav ul li.on .dep3 a:nth-child(8) {
animation-delay: 0.16s;
}
.gnb nav ul li .dep3 a::before {
content: "- ";
}
.gnb nav ul li.on .dep3 {
display: flex;
}
.gnb .right ul {
display: inline-flex;
gap: 7px;
position: relative;
}
.gnb .right ul li a {
font-size: var(--f-16);
color: var(--C-474748);
}
.gnb .right ul li .dep3 {
display: none;
min-width: 160px;
position: absolute;
left: 120%;
top: 0;
gap: 5px;
flex-direction: column;
}
.gnb .right ul li .dep3 a {
font-size: var(--f-13);
color: var(--C-737380);
font-weight: 500;
opacity: 0;
transform: translateX(20px);
animation: gnbLiIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.gnb .right ul li.on .dep3 a:nth-child(1) {
animation-delay: 0.02s;
}
.gnb .right ul li.on .dep3 a:nth-child(2) {
animation-delay: 0.04s;
}
.gnb .right ul li.on .dep3 a:nth-child(3) {
animation-delay: 0.06s;
}
.gnb .right ul li.on .dep3 a:nth-child(4) {
animation-delay: 0.08s;
}
.gnb .right ul li.on .dep3 a:nth-child(5) {
animation-delay: 0.1s;
}
.gnb .right ul li.on .dep3 a:nth-child(6) {
animation-delay: 0.12s;
}
.gnb .right ul li.on .dep3 a:nth-child(7) {
animation-delay: 0.14s;
}
.gnb .right ul li .dep3 a::before {
content: "- ";
}
.gnb .right ul li.on .dep3 {
display: flex;
}
.gnb .right .tel {
padding-top: 25px;
font-size: var(--f-32);
color: var(--C-474748);
font-weight: 900;
line-height: 1.1;
}
.gnb .banner {
padding-top: 20px;
}
.gnb .banner img {
vertical-align: top;
}
/* search */
.search {
display: none;
width: 100%;
position: absolute;
left: 0;
top: 0;
padding: 30px 0;
background-color: var(--C-ffffff);
}
.search.on {
display: block;
}
.search .inner {
display: flex;
max-width: 1680px;
margin: 0 auto;
position: relative;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: column;
}
.search .input_form {
width: 905px;
height: 52px;
margin: 0 auto;
border-radius: 15px;
background: var(--C-f4f4f4)
url(//image.idhospital.com/www/rn_2025/common/header_icon_search.png)
no-repeat 20px center;
}
.search .input_form input {
width: 100%;
height: 100%;
padding: 0 55px;
box-sizing: border-box;
border: none;
background: none;
}
.search .recomm_search {
display: flex;
width: 905px;
margin: 0 auto;
padding-top: 27px;
position: relative;
}
.search .recomm_search::before {
content: "추천 검색어";
padding-right: 40px;
font-size: var(--f-15);
color: var(--C-000b17);
font-weight: 900;
}
.search .recomm_search ol {
display: flex;
min-height: 240px;
padding-left: 20px;
gap: 5px;
flex-direction: column;
border-left: 1px solid var(--C-bdbdc9);
}
.search .recomm_search ol li {
font-size: var(--f-13);
color: var(--C-000b17);
font-weight: 500;
}
.search .recomm_search .banner {
position: absolute;
right: 0;
bottom: 30px;
}
.search .recomm_search .banner img {
vertical-align: top;
}
.search_close {
width: 18px;
height: 18px;
cursor: pointer;
position: absolute;
right: 0;
top: 0;
}
.search_close i {
display: block;
width: 100%;
height: 3px;
position: absolute;
left: 0;
top: 0;
transform: rotate(40deg);
background-color: var(--C-45474d);
}
.search_close i:last-child {
transform: rotate(130deg);
}
/* sitemap */
.sitemap {
width: 100%;
position: absolute;
left: 0;
top: 81px;
padding: 30px 0;
background-color: var(--C-ffffff);
opacity: 0;
transform: translateY(-20px);
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
display: block; /* display: block으로 ë‘ê³ JSì—ì„œ on/off는 opacityë¡œ ì œì–´ */
}
@media (max-width: 720px) {
.sitemap {
display: none;
}
}
.sitemap.on {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.sitemap .inner {
display: flex;
width: 985px;
margin: 0 auto;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
gap: 35px 0;
}
@media (max-width: 1060px) {
.sitemap .inner {
width: auto;
padding: 0 5%;
}
}
.sitemap .inner .item {
flex: 1 1 14.5%;
}
@media (max-width: 1060px) {
.sitemap .inner .item {
flex: 1 1 20%;
max-width: 20%;
}
}
@media (max-width: 860px) {
.sitemap .inner .item {
flex: 1 1 25%;
max-width: 25%;
}
}
@media (max-width: 1060px) {
.sitemap .inner .item:last-child {
max-width: 25%;
}
}
.sitemap .inner .item h4 {
padding-bottom: 4px;
font-size: var(--f-13);
color: var(--C-737380);
}
.sitemap .inner .item li a {
font-size: var(--f-15);
color: var(--C-000b17);
font-weight: 500;
}
.sitemap .inner .item li p a {
font-weight: 400;
}
.sitemap .inner .item li p a {
font-weight: 400;
}
.sitemap .inner .item .side_link {
display: flex;
flex-direction: column;
gap: 5px;
}
.sitemap .inner .item .side_link li a {
font-weight: 700;
color: var(--C-474748);
}
.sitemap .inner .item .tel {
font-size: var(--f-30);
color: var(--C-474748);
font-weight: 900;
line-height: 1.1;
}
/* gnb ëª¨ë°”ì¼ */
.gnb_mb {
display: none;
padding: 70px 30px 100px;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: var(--C-ffffff);
}
.gnb_mb.on {
display: block;
}
@media (max-width: 720px) {
.gnb_mb {
overflow: auto;
}
}
.gnb_mb .dep1 li {
padding: 10px 0;
opacity: 0;
transform: translateX(30px);
animation: gnbLiIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.gnb_mb.on .dep1 li:nth-child(1) {
animation-delay: 0.02s;
}
.gnb_mb.on .dep1 li:nth-child(2) {
animation-delay: 0.04s;
}
.gnb_mb.on .dep1 li:nth-child(3) {
animation-delay: 0.06s;
}
.gnb_mb.on .dep1 li:nth-child(4) {
animation-delay: 0.08s;
}
.gnb_mb.on .dep1 li:nth-child(5) {
animation-delay: 0.1s;
}
.gnb_mb.on .dep1 li:nth-child(6) {
animation-delay: 0.12s;
}
.gnb_mb.on .dep1 li:nth-child(7) {
animation-delay: 0.14s;
}
.gnb_mb.on .dep1 li:nth-child(8) {
animation-delay: 0.16s;
}
.gnb_mb.on .dep1 li:nth-child(9) {
animation-delay: 0.18s;
}
.gnb_mb.on .dep1 li:nth-child(10) {
animation-delay: 0.2s;
}
.gnb_mb.on .dep1 li:nth-child(11) {
animation-delay: 0.22s;
}
.gnb_mb.on .dep1 li:nth-child(12) {
animation-delay: 0.24s;
}
@media (max-width: 400px) {
.gnb_mb .dep1 li {
padding: 7px 0;
}
}
.gnb_mb .dep1 a {
font-size: var(--f-20);
color: var(--C-474748);
font-weight: 600;
}
@media (max-width: 400px) {
.gnb_mb .dep1 a {
font-size: var(--f-20);
}
}
.gnb_mb .dep2 {
display: none;
}
.gnb_mb .dep2.on {
display: block;
}
.gnb_mb .dep2 .btn_dep_back {
width: 23px;
height: 37px;
cursor: pointer;
position: absolute;
left: 30px;
top: 15px;
}
.gnb_mb .dep2 .btn_dep_back i {
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 5px;
background-color: var(--C-45474d);
transform-origin: left center;
}
.gnb_mb .dep2 .btn_dep_back i:first-child {
margin-top: -2px;
transform: translateY(-50%) rotate(45deg);
}
.gnb_mb .dep2 .btn_dep_back i:last-child {
margin-top: 1px;
transform: translateY(-50%) rotate(-45deg);
}
.gnb_mb .dep2 ul {
display: none;
flex-direction: column;
gap: 20px;
}
.gnb_mb .dep2 ul.on {
display: flex;
}
.gnb_mb .dep2 > ul > li {
opacity: 0;
transform: translateX(30px);
animation: gnbLiIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.gnb_mb .dep2.on > ul > li {
opacity: 0;
}
.gnb_mb .dep2.on > ul > li:nth-child(1) {
animation-delay: 0.02s;
}
.gnb_mb .dep2.on > ul > li:nth-child(2) {
animation-delay: 0.04s;
}
.gnb_mb .dep2.on > ul > li:nth-child(3) {
animation-delay: 0.06s;
}
.gnb_mb .dep2.on > ul > li:nth-child(4) {
animation-delay: 0.08s;
}
.gnb_mb .dep2.on > ul > li:nth-child(5) {
animation-delay: 0.1s;
}
.gnb_mb .dep2.on > ul > li:nth-child(6) {
animation-delay: 0.12s;
}
.gnb_mb .dep2.on > ul > li:nth-child(7) {
animation-delay: 0.14s;
}
.gnb_mb .dep2.on > ul > li:nth-child(8) {
animation-delay: 0.16s;
}
.gnb_mb .dep2.on > ul > li:nth-child(9) {
animation-delay: 0.18s;
}
.gnb_mb .dep2.on > ul > li:nth-child(10) {
animation-delay: 0.2s;
}
.gnb_mb .dep2.on > ul > li:nth-child(11) {
animation-delay: 0.22s;
}
.gnb_mb .dep2.on > ul > li:nth-child(12) {
animation-delay: 0.24s;
}
.gnb_mb .dep2.on > ul > li:nth-child(13) {
animation-delay: 0.26s;
}
.gnb_mb .dep2 ul a {
font-size: var(--f-20);
color: var(--C-474748);
font-weight: 800;
}
@media (max-width: 400px) {
.gnb_mb .dep2 ul a {
font-size: var(--f-20);
}
}
.gnb_mb .dep2 ul .dep3 {
display: flex;
padding-top: 20px;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.gnb_mb .dep2 ul .dep3 a {
font-size: var(--f-13);
color: var(--C-737380);
font-weight: 600;
}
@media (max-width: 400px) {
.gnb_mb .dep2 ul .dep3 a {
font-size: var(--f-13);
}
}
.gnb_mb .dep2 ul .dep3 a::before {
content: "-";
padding-right: 15px;
}
.gnb_mb .b_dep1 li {
opacity: 0;
transform: translateX(30px);
animation: gnbLiIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.gnb_mb.on .b_dep1 li:nth-child(1) {
animation-delay: 0.02s;
}
.gnb_mb.on .b_dep1 li:nth-child(2) {
animation-delay: 0.04s;
}
.gnb_mb.on .b_dep1 li:nth-child(3) {
animation-delay: 0.06s;
}
.gnb_mb.on .b_dep1 li:nth-child(4) {
animation-delay: 0.08s;
}
.gnb_mb.on .b_dep1 li:nth-child(5) {
animation-delay: 0.1s;
}
.gnb_mb.on .b_dep1 li:nth-child(6) {
animation-delay: 0.12s;
}
.gnb_mb.on .b_dep1 li:nth-child(7) {
animation-delay: 0.14s;
}
.gnb_mb.on .b_dep1 li:nth-child(8) {
animation-delay: 0.16s;
}
.gnb_mb.on .b_dep1 li:nth-child(9) {
animation-delay: 0.18s;
}
.gnb_mb.on .b_dep1 li:nth-child(10) {
animation-delay: 0.2s;
}
.gnb_mb.on .b_dep1 li:nth-child(11) {
animation-delay: 0.22s;
}
.gnb_mb.on .b_dep1 li:nth-child(12) {
animation-delay: 0.24s;
}
.gnb_mb .b_dep2 {
display: none;
position: relative;
}
.gnb_mb .b_dep2.on {
display: block;
}
.gnb_mb .b_dep2 .btn_dep_back {
width: 23px;
height: 37px;
cursor: pointer;
position: absolute;
right: 0;
top: 9px;
z-index: 1;
}
.gnb_mb .b_dep2 .btn_dep_back i {
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 5px;
background-color: var(--C-45474d);
transform-origin: left center;
}
.gnb_mb .b_dep2 .btn_dep_back i:first-child {
margin-top: -2px;
transform: translateY(-50%) rotate(45deg);
}
.gnb_mb .b_dep2 .btn_dep_back i:last-child {
margin-top: 1px;
transform: translateY(-50%) rotate(-45deg);
}
.gnb_mb .b_dep2 ul {
display: none;
}
.gnb_mb .b_dep2 ul.on {
display: block;
}
.gnb_mb .b_dep2 a {
font-size: var(--f-40);
color: var(--C-474748);
}
@media (max-width: 400px) {
.gnb_mb .b_dep2 a {
font-size: var(--f-30);
}
}
.gnb_mb .b_dep2 > ul > li {
opacity: 0;
transform: translateX(30px);
animation: gnbLiIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.gnb_mb .b_dep2.on > ul > li {
opacity: 0;
}
.gnb_mb .b_dep2.on > ul > li:nth-child(1) {
animation-delay: 0.02s;
}
.gnb_mb .b_dep2.on > ul > li:nth-child(2) {
animation-delay: 0.04s;
}
.gnb_mb .b_dep2.on > ul > li:nth-child(3) {
animation-delay: 0.06s;
}
.gnb_mb .b_dep2.on > ul > li:nth-child(4) {
animation-delay: 0.08s;
}
.gnb_mb .b_dep2.on > ul > li:nth-child(5) {
animation-delay: 0.1s;
}
.gnb_mb .b_dep2.on > ul > li:nth-child(6) {
animation-delay: 0.12s;
}
.gnb_mb .b_dep2.on > ul > li:nth-child(7) {
animation-delay: 0.14s;
}
.gnb_mb .b_dep2.on > ul > li:nth-child(8) {
animation-delay: 0.16s;
}
.gnb_mb .b_dep2.on > ul > li:nth-child(9) {
animation-delay: 0.18s;
}
.gnb_mb .b_dep2.on > ul > li:nth-child(10) {
animation-delay: 0.2s;
}
.gnb_mb .b_dep2.on > ul > li:nth-child(11) {
animation-delay: 0.22s;
}
.gnb_mb .b_dep2.on > ul > li:nth-child(12) {
animation-delay: 0.24s;
}
.gnb_mb .b_dep2.on > ul > li:nth-child(13) {
animation-delay: 0.26s;
}
.gnb_mb .bottom .dep3 {
display: flex;
padding: 15px 0 20px;
gap: 15px;
flex-direction: column;
}
.gnb_mb .bottom .dep3 a {
font-size: var(--f-32);
color: var(--C-737380);
font-weight: 600;
}
@media (max-width: 400px) {
.gnb_mb .bottom .dep3 a {
font-size: var(--f-23);
}
}
.gnb_mb .bottom .dep3 a::before {
content: "-";
padding-right: 15px;
}
.gnb_mb .bottom {
padding-top: 50px;
}
.gnb_mb .bottom a {
font-size: var(--f-16);
color: var(--C-474748);
}
/* @media (max-width: 400px) {
.gnb_mb .bottom a {
font-size: var(--f-16);
}
} */
.gnb_mb .bottom .tel {
padding-top: 50px;
font-size: var(--f-30);
color: var(--C-474748);
font-weight: 800;
line-height: 1.2;
}
/* @media (max-width: 400px) {
.gnb_mb .bottom .tel {
font-size: var(--f-40);
}
} */
.gnb_mb .bottom .banner {
margin-top: 40px;
}
@media (max-width: 400px) {
.gnb_mb .bottom .banner {
margin-top: 7%;
}
}
.gnb_mb .bottom .banner img {
width: 100%;
max-width: 540px;
}
.gnb_mb .gnb_mb_close {
width: 37px;
height: 37px;
cursor: pointer;
position: absolute;
left: 30px;
top: 13px;
}
.gnb_mb .gnb_mb_close i {
display: block;
width: 100%;
height: 5px;
position: absolute;
left: 0;
top: 50%;
transform: rotate(45deg);
background-color: var(--C-45474d);
}
.gnb_mb .gnb_mb_close i:last-child {
transform: rotate(-45deg);
}
/*!* footer *!*/
/*#footer {*/
/* width: 100%;*/
/* position: relative;*/
/* z-index: 1;*/
/* border-top: 1px solid var(--C-f4f4f4);*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer {*/
/* border-width: 2px;*/
/* }*/
/*}*/
/*#footer::before {*/
/* content: "";*/
/* width: 100%;*/
/* height: 1px;*/
/* position: absolute;*/
/* left: 0;*/
/* top: 83px;*/
/* background-color: var(--C-f4f4f4);*/
/*}*/
/*@media (max-width: 1024px) {*/
/* #footer::before {*/
/* top: 60px;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer::before {*/
/* height: 2px;*/
/* top: 16vw;*/
/* }*/
/*}*/
/*#footer::after {*/
/* content: "";*/
/* width: 100%;*/
/* height: 1px;*/
/* position: absolute;*/
/* left: 0;*/
/* top: 251px;*/
/* background-color: var(--C-f4f4f4);*/
/*}*/
/*@media (max-width: 1024px) {*/
/* #footer::after {*/
/* top: initial;*/
/* bottom: 50px;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer::after {*/
/* bottom: 10.6vw;*/
/* }*/
/*}*/
/*#footer .inner {*/
/* width: 960px;*/
/* margin: 0 auto;*/
/*}*/
/*@media (max-width: 1024px) {*/
/* #footer .inner {*/
/* width: initial;*/
/* padding: 0 20px;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .inner {*/
/* padding: 0 5%;*/
/* }*/
/*}*/
/*#footer .link_box {*/
/* display: flex;*/
/* height: 83px;*/
/* justify-content: space-between;*/
/* align-items: center;*/
/* flex-direction: row-reverse;*/
/*}*/
/*@media (max-width: 1024px) {*/
/* #footer .link_box {*/
/* height: 60px;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .link_box {*/
/* height: auto;*/
/* flex-direction: column;*/
/* }*/
/*}*/
/*#footer .link_box .sns_link {*/
/* display: flex;*/
/* gap: 30px;*/
/* line-height: 0;*/
/*}*/
/*@media (max-width: 1024px) {*/
/* #footer .link_box .sns_link {*/
/* gap: 20px;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .link_box .sns_link {*/
/* height: 16vw;*/
/* gap: 9vw;*/
/* align-items: center;*/
/* }*/
/*}*/
/*#footer .link_box .sns_link .btn_Youtube img {*/
/* width: 29px;*/
/* margin-top: 2px;*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .link_box .sns_link .btn_Youtube img {*/
/* width: 8vw;*/
/* margin-top: 0;*/
/* }*/
/*}*/
/*#footer .link_box .sns_link .btn_Instagram img {*/
/* width: 23px;*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .link_box .sns_link .btn_Instagram img {*/
/* width: 6.5vw;*/
/* }*/
/*}*/
/*#footer .link_box .sns_link .btn_Facebook img {*/
/* width: 13px;*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .link_box .sns_link .btn_Facebook img {*/
/* width: 3.5vw;*/
/* }*/
/*}*/
/*#footer .link_box .sns_link .btn_Kakao img {*/
/* width: 24px;*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .link_box .sns_link .btn_Kakao img {*/
/* width: 6.5vw;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .link_box .id_link {*/
/* width: 100%;*/
/* padding: 5vw 0 5vw;*/
/* }*/
/*}*/
/*#footer .link_box .id_link ul {*/
/* display: flex;*/
/* gap: 30px;*/
/*}*/
/*@media (max-width: 1024px) {*/
/* #footer .link_box .id_link ul {*/
/* gap: 20px;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .link_box .id_link ul {*/
/* gap: 5vw 0;*/
/* flex-direction: row;*/
/* flex-wrap: wrap;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .link_box .id_link ul li {*/
/* width: auto;*/
/* padding-right: 7vw;*/
/* }*/
/*}*/
/*#footer .link_box .id_link ul li a {*/
/* display: inline-block;*/
/* padding: 2px 0 0 30px;*/
/* font-size: var(--f-19);*/
/* color: var(--C-737380);*/
/* font-weight: 900;*/
/* background: url(//image.idhospital.com/www/rn_2025/common/footer_icon_id.png)*/
/* no-repeat left top;*/
/* background-size: 23px auto;*/
/*}*/
/*@media (max-width: 1024px) {*/
/* #footer .link_box .id_link ul li a {*/
/* font-size: var(--f-17);*/
/* padding: 0 0 0 22px;*/
/* background-size: 18px auto;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .link_box .id_link ul li a {*/
/* padding: 0 0 0 5.5vw;*/
/* font-size: 4vw;*/
/* background-size: 4.5vw auto;*/
/* }*/
/*}*/
/*#footer .link_box .id_link ul li:last-child a {*/
/* background: none;*/
/* padding-left: 0;*/
/*}*/
/*#footer .company_info {*/
/* height: 167px;*/
/* display: flex;*/
/* font-size: var(--f-19);*/
/* color: var(--C-737380);*/
/* justify-content: space-between;*/
/* align-items: center;*/
/* flex-direction: row-reverse;*/
/*}*/
/*@media (max-width: 1024px) {*/
/* #footer .company_info {*/
/* height: 140px;*/
/* font-size: var(--f-17);*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .company_info {*/
/* height: auto;*/
/* padding-bottom: 3vw;*/
/* align-items: flex-start;*/
/* flex-direction: column;*/
/* }*/
/*}*/
/*#footer .company_info .left {*/
/* display: flex;*/
/* gap: 10px;*/
/* flex-direction: column;*/
/*}*/
/*@media (max-width: 1024px) {*/
/* #footer .company_info .left {*/
/* gap: 5px;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .company_info .left {*/
/* padding-bottom: 3vw;*/
/* flex-direction: row;*/
/* flex-wrap: wrap;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .company_info .left p {*/
/* margin-right: 5.4vw;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .company_info .left p:first-child {*/
/* width: 100%;*/
/* margin-right: 0;*/
/* }*/
/*}*/
/*#footer .company_info .left p span {*/
/* margin-right: 27px;*/
/* font-weight: 500;*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .company_info .left p span {*/
/* margin-right: 3vw;*/
/* font-size: 3.4vw;*/
/* }*/
/*}*/
/*#footer .company_info .left p b {*/
/* font-size: var(--f-32);*/
/* color: var(--C-45474d);*/
/* letter-spacing: -1.5px;*/
/* font-weight: 800;*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .company_info .left p b {*/
/* font-size: 5.4vw;*/
/* }*/
/*}*/
/*#footer .company_info .left p strong {*/
/* font-size: var(--f-19);*/
/* color: var(--C-45474d);*/
/* letter-spacing: -1px;*/
/* font-weight: 800;*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .company_info .left p strong {*/
/* font-size: 4vw;*/
/* }*/
/*}*/
/*#footer .company_info .right {*/
/* display: flex;*/
/* gap: 15px;*/
/* flex-direction: column;*/
/*}*/
/*@media (max-width: 1024px) {*/
/* #footer .company_info .right {*/
/* gap: 10px;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .company_info .right {*/
/* font-size: 3.8vw;*/
/* gap: 3vw;*/
/* }*/
/*}*/
/*#footer .company_info .right .link ul {*/
/* display: flex;*/
/*}*/
/*#footer .company_info .right .link li::after {*/
/* content: "";*/
/* display: inline-block;*/
/* width: 1px;*/
/* height: 16px;*/
/* margin: 0 15px;*/
/* color: var(--C-f4f4f4);*/
/* vertical-align: -2px;*/
/*}*/
/*#footer .company_info .right .link li:last-child::after {*/
/* display: none;*/
/*}*/
/*#footer .company_info .right .link a {*/
/* color: var(--C-737380);*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .company_info .right .link a {*/
/* font-size: 3.8vw;*/
/* }*/
/*}*/
/*#footer .copy {*/
/* display: flex;*/
/* height: 77px;*/
/* font-size: var(--f-15);*/
/* color: var(--C-aaaab2);*/
/* align-items: center;*/
/*}*/
/*@media (max-width: 1024px) {*/
/* #footer .copy {*/
/* height: 50px;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* #footer .copy {*/
/* height: 10.6vw;*/
/* font-size: 3.5vw;*/
/* }*/
/*}*/
/* quick */
/*.quick {*/
/* width: 87px;*/
/* position: fixed;*/
/* right: 50%;*/
/* bottom: 10%;*/
/* margin-right: -750px;*/
/* z-index: 5;*/
/* transition: all 1s ease;*/
/*}*/
/*@media (max-width: 1500px) {*/
/* .quick {*/
/* width: auto;*/
/* right: 2%;*/
/* margin-right: 0;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* .quick {*/
/* bottom: 100px;*/
/* top: initial;*/
/* }*/
/*}*/
/*.quick.hidden {*/
/* display: none;*/
/*}*/
/*.quick .btn_box {*/
/* display: flex;*/
/* width: 88px;*/
/* height: 147px;*/
/* position: relative;*/
/* margin-bottom: 10px;*/
/* flex-direction: column;*/
/* align-items: center;*/
/* justify-content: space-evenly;*/
/* border-radius: 50px;*/
/* background-color: var(--C-000b17);*/
/* transition: all 0.3s ease;*/
/* overflow: hidden;*/
/*}*/
/*@media (max-width: 1500px) {*/
/* .quick .btn_box {*/
/* width: 70px;*/
/* height: 100px;*/
/* }*/
/*}*/
/*.quick .btn_box::after {*/
/* content: "";*/
/* position: absolute;*/
/* width: 48px;*/
/* height: 2px;*/
/* top: 73px;*/
/* z-index: 1;*/
/* background-color: var(--C-33373f);*/
/*}*/
/*@media (max-width: 1500px) {*/
/* .quick .btn_box::after {*/
/* width: 30px;*/
/* top: 50px;*/
/* }*/
/*}*/
/*.quick .btn_box a {*/
/* color: var(--C-aaaab3);*/
/*}*/
/*.quick .btn_box a:hover {*/
/* color: var(--C-ffffff);*/
/*}*/
/*.quick .btn_box .menu_open {*/
/* display: flex;*/
/* width: 100%;*/
/* height: 100%;*/
/* color: var(--C-aaaab3);*/
/* cursor: pointer;*/
/* flex-direction: column;*/
/* justify-content: space-evenly;*/
/* border: none;*/
/* background: none;*/
/* opacity: 1;*/
/* transform: translateY(0px);*/
/* transition: all 0.3s ease;*/
/*}*/
/*@media (max-width: 720px) {*/
/* .quick .btn_box .menu_open {*/
/* font-size: 3vw;*/
/* }*/
/*}*/
/*.quick .btn_box .menu_open:hover {*/
/* color: var(--C-ffffff);*/
/*}*/
/*.quick .btn_box .menu_open i {*/
/* display: block;*/
/*}*/
/*.quick .btn_box .btn_list {*/
/* width: 88px;*/
/* padding: 40px 0;*/
/* position: absolute;*/
/* bottom: 0;*/
/* left: 0;*/
/* z-index: 2;*/
/* flex-direction: column;*/
/* align-items: center;*/
/* justify-content: space-evenly;*/
/* border-radius: 50px;*/
/* background-color: var(--C-000b17);*/
/* opacity: 0;*/
/* pointer-events: none;*/
/* transform: translateY(0);*/
/* transition: all 0.3s ease;*/
/* height: 80%;*/
/*}*/
/*@media (max-width: 1500px) {*/
/* .quick .btn_box .btn_list {*/
/* width: 70px;*/
/* }*/
/*}*/
/*.quick .btn_box .btn_list .tel {*/
/* padding-top: 30px;*/
/* margin-top: 80px;*/
/* font-size: var(--f-17);*/
/* color: var(--C-aaaab3);*/
/* font-weight: 500;*/
/* line-height: 1.2;*/
/* text-align: center;*/
/* filter: brightness(0.5);*/
/* background: url(//image.idhospital.com/www/rn_2025/common/quick_icon_tel.png)*/
/* no-repeat center top;*/
/*}*/
/*.quick .btn_box .btn_list .tel:hover {*/
/* filter: brightness(1);*/
/*}*/
/*.quick .btn_box .btn_list .tel:hover i {*/
/* color: var(--C-ffffff);*/
/*}*/
/*.quick .btn_box .btn_list ul {*/
/* display: flex;*/
/* flex-direction: column;*/
/* align-items: center;*/
/*}*/
/*.quick .btn_box .btn_list li::before {*/
/* display: block;*/
/* content: "";*/
/* width: 48px;*/
/* height: 1px;*/
/* margin: 13px auto;*/
/* background-color: var(--C-33373f);*/
/*}*/
/*@media (max-width: 1500px) {*/
/* .quick .btn_box .btn_list li::before {*/
/* width: 30px;*/
/* }*/
/*}*/
/*.quick .btn_box .btn_list li a {*/
/* display: inline-block;*/
/* font-size: var(--f-13);*/
/* color: var(--C-aaaab3);*/
/*}*/
/*.quick .btn_box .btn_list li a:hover {*/
/* color: var(--C-ffffff);*/
/*}*/
/*.quick .btn_box .btn_list li a i {*/
/* display: block;*/
/* height: 30px;*/
/* width: 100%;*/
/* filter: brightness(0.5);*/
/* background-repeat: no-repeat;*/
/* background-position: center top;*/
/*}*/
/*.quick .btn_box .btn_list li:nth-child(1) a i {*/
/* background-image: url(//image.idhospital.com/www/rn_2025/common/quick_icon_kakao.png);*/
/*}*/
/*.quick .btn_box .btn_list li:nth-child(2) a i {*/
/* background-image: url(//image.idhospital.com/www/rn_2025/common/quick_icon_cost.png);*/
/*}*/
/*.quick .btn_box .btn_list li:nth-child(3) a i {*/
/* background-image: url(//image.idhospital.com/www/rn_2025/common/quick_icon_online.png);*/
/*}*/
/*.quick .btn_box .btn_list li:nth-child(4) a i {*/
/* background-image: url(//image.idhospital.com/www/rn_2025/common/quick_icon_reservation.png);*/
/*}*/
/*.quick .btn_box .btn_list li a:hover i {*/
/* filter: brightness(1);*/
/*}*/
/*.quick .btn_box.on {*/
/* height: 410px;*/
/* padding: 50px 0;*/
/*}*/
/*.quick .btn_box.on .btn_list {*/
/* display: flex;*/
/* pointer-events: auto;*/
/* opacity: 1;*/
/* height: 100%;*/
/* transform: translateY(0);*/
/*}*/
/*.quick .btn_box.on .menu_open {*/
/* opacity: 0;*/
/* height: 100%;*/
/*}*/
/*.quick .btn_top {*/
/* display: flex;*/
/* width: 88px;*/
/* height: 88px;*/
/* color: var(--C-aaaab3);*/
/* cursor: pointer;*/
/* align-items: center;*/
/* justify-content: center;*/
/* border-radius: 50px;*/
/* background-color: var(--C-000b17);*/
/*}*/
/*@media (max-width: 1500px) {*/
/* .quick .btn_top {*/
/* width: 70px;*/
/* height: 70px;*/
/* }*/
/*}*/
/*@media (max-width: 720px) {*/
/* .quick .btn_top {*/
/* font-size: 3vw;*/
/* display: none;*/
/* }*/
/*}*/
/*.quick .btn_top:hover {*/
/* color: var(--C-ffffff);*/
/*}*/
/*@media (max-width: 720px) {*/
/* .quick .btn_box .btn_list .tel {*/
/* display: none;*/
/* }*/
/* .quick .btn_box .btn_list li:nth-child(1)::before {*/
/* display: none;*/
/* }*/
/* .quick .btn_box .btn_list li:nth-child(4) {*/
/* display: none;*/
/* }*/
/* .quick .btn_box.on {*/
/* height: 210px;*/
/* }*/
/* .quick .btn_box .btn_list {*/
/* padding: 0;*/
/* }*/
/* .quick .btn_box.on {*/
/* padding: 30px 0;*/
/* }*/
/*}*/
/**** layout_main.css end ****/
/* top */
#wrap {
position: relative;
}
.header_deem {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #6d6d6d4f;
z-index: 6;
display: none;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.header_deem.on {
display: block;
}
#header.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
background: #fff;
transition: box-shadow 0.2s, background 0.2s;
}
/* headerê°€ fixedì¼ ë•Œ ë³¸ë¬¸ì´ ë°€ë¦¬ì§€ ì•Šë„ë¡ íŒ¨ë”© 추가 */
body.header-fixed-padding {
padding-top: 120px; /* headerì˜ ì‹¤ì œ 높ì´ì— 맞게 ì¡°ì • */
}
/* ì „í™”ê±¸ê¸° a 태그 ìŠ¤íƒ€ì¼ */
.tel a {
color: #474748;
}
#header .gnb_info {
display: flex;
align-items: center;
}
#header .right .btn_login {
width: 21px;
height: 21px;
text-indent: -1000em;
background: url(//image.idhospital.com/www/rn_2025/common/header_icon_login.png?v=1)
no-repeat left top;
background-size: 100%;
}
#header .right .btn_login a {
display: block;
}
#header .menu ul li {
display: flex;
padding: 0 14px 0px !important;
cursor: pointer;
align-items: flex-end;
margin-bottom: 20px !important;
}
#header .right .btn_mypage {
width: 21px;
height: 21px;
text-indent: -1000em;
background: url(//image.idhospital.com/www/rn_2025/common/header_icon_mypage.png)
no-repeat left top;
background-size: 100%;
}
#header .right .btn_mypage a {
display: block;
}
#header .right .btn_logout {
display: block !important;
width: 60px;
height: 21px;
text-indent: -1000em;
background: url(//image.idhospital.com/www/rn_2025/common/header_icon_logout.png)
no-repeat left top;
background-size: 100%;
}
#header .right .btn_logout a {
display: block;
}
.language_all {
position: absolute;
top: 82px;
width: 200px;
display: none;
background-color: #fff;
z-index: 2;
}
.language_all ul li a {
background: #fff;
padding: 10px 0 10px 25px;
clear: both;
font-size: 15px;
font-weight: 500;
color: #1a1a1a;
position: relative;
display: block;
}
.language_all ul li a:hover {
background: #002f6b;
color: #fff;
}
.img_countury {
background: url(//image.idhospital.com/www/rn_2025/common/gnb/language_bg.png)
left top no-repeat;
width: 29px;
height: 19px;
display: inline-block;
text-indent: -9999px;
vertical-align: middle;
margin-right: 7px;
}
.img_countury.korea {
background-position: 0 0;
}
.img_countury.eng {
background-position: 0 -37px;
}
.img_countury.japan {
background-position: 0 -74px;
}
.img_countury.china {
background-position: 0 -111px;
}
.img_countury.vietanam {
background-position: 0 -148px;
}
.img_countury.thai {
background-position: 0 -185px;
}
.img_countury.spain {
background-position: 0 -222px;
}
.img_countury.mongo {
background-position: 0 -259px;
}
.img_countury.indo {
background-position: 0 -296px;
}
.img_countury.rusia {
background-position: 0 -333px;
}
.img_countury.arabic {
background-position: 0 -370px;
}
#header.on .gnb_menu_2depth {
display:none;
}
.gnb_menu_2depth {
display: none;
position:relative;
z-index: 1;
}
@media (max-width: 720px) {
#header .right .btn_login {
width: 5.7vw;
height: 5.7vw;
}
.language_all {
top: 102%;
width: 45vw;
right: 0;
}
.language_all ul li a {
padding: 1.5vw 0 1.5vw 4vw;
font-size: 3.5vw;
}
.header_deem {
display: none !important;
}
.gnb_menu_2depth.hidden {
display: none;
}
/*gnb_menu_2depth*/
.gnb_menu_2depth {
display: block;
/*height: 11.11vw;*/
background: #fdfdfe;
border-top: 0.28vw solid var(--C-f4f4f4);
width: 100%;
}
.gnb_menu_2depth_inner {
/*padding-top: 3.75vw;*/
/*white-space: nowrap;*/
line-height: 11.11vw;
display: block;
}
.gnb_menu_2depth_inner::after {
content: "";
display: block;
clear: both;
}
/*home_menu*/
.home_menu {
display: inline-block;
padding: 0 4.17vw;
margin-top: 0.42vw;
}
.home_menu a {
display: block;
}
.home_menu .home_icon {
display: inline-block;
width: 4.03vw;
height: 3.89vw;
background: url(//image.idhospital.com/www/rn_2025/common/gnb/icon_home.png)
no-repeat;
background-size: contain;
}
.home_menu,
.depth2_ul {
float: left;
}
.depth2_ul a {
display: block;
}
.depth2_ul ul {
width: 100%;
}
.depth2_ul li {
display: inline-block;
position: relative;
line-height: 1;
padding: 0 2.78vw;
}
.depth2_ul li::before {
content: "";
display: inline-block;
width: 0.28vw;
height: 4.31vw;
background-color: #aaaab3;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.depth2_ul li p {
font-size: 3.19vw;
letter-spacing: -0.14vw;
color: #000;
display: flex;
align-items: center;
}
.depth2_ul li p .name {
display: inline-block;
}
.depth2_ul li .menu_arrow {
display: inline-block;
width: 2.08vw;
height: 1.11vw;
background: url(//image.idhospital.com/www/rn_2025/common/gnb/icon_arrow.png)
no-repeat;
background-size: contain;
margin-left: 1.94vw;
}
.depth2_ul li.active .menu_arrow {
transform: rotate(180deg);
}
/* depth3_menu_box*/
.depth2_ul li .depth3_menu_box {
display: none;
}
.depth2_ul li .depth3_menu_box p {
display: block;
text-align: center;
font-size: 3.19vw;
letter-spacing: -0.14vw;
padding-bottom: 3.19vw;
}
.depth2_ul li .depth3_menu_box p:last-child {padding-bottom: 0;}
.depth2_ul li .depth3_menu_box a {
color: #fff;
display: block;
}
.depth2_ul li .depth3_menu_box.active {
display: block;
text-align: center;
color: #fff;
min-width: 29.17vw;
border-radius: 1.39vw;
background: #262626;
position: absolute;
top: 4.17vw;
left: 0;
z-index: 1;
padding: 4.17vw 1.39vw;
}
}
/* quick */
.quick {
width: 87px;
position: fixed;
right: 50%;
bottom: 10%;
margin-right: -750px;
z-index: 5;
transition: all 1s ease;
}
.quick.hidden {
display: none;
}
.quick .btn_box {
display: flex;
width: 88px;
height: 147px;
position: relative;
margin-bottom: 10px;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
border-radius: 50px;
background-color: var(--C-000b17);
transition: all 0.3s ease;
overflow: hidden;
}
.quick .btn_box::after {
content: "";
position: absolute;
width: 48px;
height: 2px;
top: 73px;
z-index: 1;
background-color: var(--C-33373f);
}
.quick .btn_box a {
color: var(--C-aaaab3);
}
.quick .btn_box a:hover {
color: var(--C-ffffff);
}
/*.quick .btn_box .menu_open */
.quick .btn_box .menu_open {
display: flex;
width: 100%;
height: 100%;
color: var(--C-aaaab3);
cursor: pointer;
flex-direction: column;
justify-content: space-evenly;
border: none;
background: none;
opacity: 1;
transform: translateY(0px);
transition: all 0.3s ease;
}
.quick .btn_box .menu_open:hover {
color: var(--C-ffffff);
}
.quick .btn_box .menu_open i {
display: block;
}
.quick .btn_box .btn_list {
width: 88px;
padding: 40px 0;
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
border-radius: 50px;
background-color: var(--C-000b17);
opacity: 0;
pointer-events: none;
transform: translateY(0);
transition: all 0.3s ease;
height: 80%;
}
.quick .btn_box .btn_list .tel {
padding-top: 30px;
margin-top: 80px;
font-size: var(--f-17);
color: var(--C-aaaab3);
font-weight: 500;
line-height: 1.2;
text-align: center;
filter: brightness(0.5);
background: url(//image.idhospital.com/www/rn_2025/common/quick/quick_icon_tel.png) no-repeat center
top;
}
.quick .btn_box .btn_list .tel:hover {
filter: brightness(1);
}
.quick .btn_box .btn_list .tel:hover i {
color: var(--C-ffffff);
}
.quick .btn_box .btn_list ul {
display: flex;
flex-direction: column;
align-items: center;
}
.quick .btn_box .btn_list li::before {
display: block;
content: "";
width: 48px;
height: 1px;
margin: 13px auto;
background-color: var(--C-33373f);
}
.quick .btn_box .btn_list li a {
display: inline-block;
font-size: var(--f-13);
color: var(--C-aaaab3);
}
.quick .btn_box .btn_list li a:hover {
color: var(--C-ffffff);
}
.quick .btn_box .btn_list li a i {
display: block;
height: 30px;
width: 100%;
filter: brightness(0.5);
background-repeat: no-repeat;
background-position: center top;
}
.quick .btn_box .btn_list li:nth-child(1) a i {
background-image: url(//image.idhospital.com/www/rn_2025/common/quick/quick_icon_kakao.png);
}
.quick .btn_box .btn_list li:nth-child(2) a i {
background-image: url(//image.idhospital.com/www/rn_2025/common/quick/quick_icon_cost.png);
}
.quick .btn_box .btn_list li:nth-child(3) a i {
background-image: url(//image.idhospital.com/www/rn_2025/common/quick/quick_icon_online.png);
}
.quick .btn_box .btn_list li:nth-child(4) a i {
background-image: url(//image.idhospital.com/www/rn_2025/common/quick/quick_icon_reservation.png);
}
.quick .btn_box .btn_list li a:hover i {
filter: brightness(1);
}
.quick .btn_box.on {
height: 410px;
padding: 50px 0;
}
.quick .btn_box.on .btn_list {
display: flex;
pointer-events: auto;
opacity: 1;
height: 100%;
transform: translateY(0);
}
.quick .btn_box.on .menu_open {
opacity: 0;
height: 100%;
}
.quick .btn_top {
display: flex;
width: 88px;
height: 88px;
color: var(--C-aaaab3);
cursor: pointer;
align-items: center;
justify-content: center;
border-radius: 50px;
background-color: var(--C-000b17);
}
.quick .mo_omit {
display: none;
}
.quick .btn_top:hover {
color: var(--C-ffffff);
}
@media (max-width: 1500px) {
.quick {
width: auto;
right: 2%;
margin-right: 0;
}
.quick .btn_box {
width: 70px;
height: 100px;
}
.quick .btn_box::after {
width: 30px;
top: 50px;
}
.quick .btn_box .btn_list {
width: 70px;
}
.quick .btn_box .btn_list li::before {
width: 30px;
}
.quick .btn_top {
width: 70px;
height: 70px;
}
}
@media (max-width: 720px) {
.quick {
/*bottom: 100px;*/
bottom: 26.39vw;
/*top: initial;*/
}
.quick .btn_box {
height: 70px;
margin-bottom: -70px;
}
.quick .btn_box .menu_open {
font-size: 3vw;
display: none; /* 모바ì¼ì—서는 안보ì´ëŠ” 걸로 작업해놓았어요 */
}
.quick .btn_top {
font-size: 3vw;
display: none;
}
.quick .btn_box .btn_list .tel {
display: none;
}
.quick .btn_box .btn_list li:nth-child(1)::before {
display: none;
}
.quick .btn_box .btn_list li:nth-child(4) {
display: none;
}
.quick .btn_box.on {
height: 210px;
margin-bottom: 10px;
padding: 30px 0;
}
.quick .btn_box .btn_list {
padding: 0;
}
.quick .mo_omit {
display: block;
width: 70px;
height: 70px;
border-radius: 50%;
background-color: #020a17;
overflow: hidden;
position: relative;
z-index: 1;
}
.quick .mo_omit i {
display: inline-block;
width: 70px;
height: 70px;
background: url(//image.idhospital.com/www/rn_2025/common/quick/mo_quick_icon_v1.png) no-repeat;
background-size: contain;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.quick .mo_omit.on i {
background: url(//image.idhospital.com/www/rn_2025/common/quick/mo_quick_icon_close.png) no-repeat;
background-size: contain;
}
}
/* bottom */
.popup_wrap{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 100;
background-color: var(--C-000000-50);
opacity: 0;
transform: translateY(20px);
transition: opacity 0.4s cubic-bezier(0.4,0,0.2,1), transform 0.4s cubic-bezier(0.4,0,0.2,1);
pointer-events: none;
}
.popup_wrap.on{
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.popup_wrap .inner{
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
flex-direction: column;
}
.popup_wrap .inner .iframe_box{
width: 80%;
max-width: 1290px;
position: relative;
aspect-ratio: 16 / 9;
}
@media (max-width: 440px) {
.popup_wrap.popup_shorts .inner .iframe_box{
aspect-ratio: 9 / 16;
}
}
.popup_wrap .inner .iframe_box iframe{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 0;
}
.popup_wrap .inner .btn_close{
display: block;
width: 112px;
height: 46px;
margin-top: 15px;
font-size: var(--f-21);
background-color: #e46ea4;
color: #fff;
font-weight: 800;
border-radius: 50px;
border: 1px solid var(--C-e46ea4);
cursor: pointer;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/**** footer.css start ****/
/* Base styles (Desktop) */
.footer {
background-color: #f8f9fa;
padding: 20px 0;
}
.pc_icon_img {display: block;}
.mo_icon_img {display: none;}
/* footer */
#footer {
width: 100%;
position: relative;
z-index: 0;
border-top: 1px solid var(--C-f4f4f4);
}
#footer::before {
content: "";
width: 100%;
height: 1px;
position: absolute;
left: 0;
top: 83px;
background-color: var(--C-f4f4f4);
}
#footer::after {
content: "";
width: 100%;
height: 1px;
position: absolute;
left: 0;
top: 251px;
background-color: var(--C-f4f4f4);
}
#footer .inner{
width: 960px;
margin: 0 auto;
}
#footer .link_box{
display: flex;
height: 83px;
justify-content: space-between;
align-items: center;
flex-direction: row-reverse;
}
#footer .link_box .sns_link{
display: flex;
gap: 8px;
line-height: 0;
}
#footer .link_box .sns_link img{
width: 48px;
}
#footer .link_box .id_link ul{
display: flex;
gap: 10px;
}
#footer .link_box .id_link ul li a{
display: inline-block;
/*padding: 2px 0 0 30px;*/
/*font-size: var(--f-19);*/
/*color: var(--C-737380);*/
/*font-weight: 900;*/
/*background: url(//image.idhospital.com/www/rn_2025/common/footer_icon_id.png) no-repeat left top;*/
/*background-size: 23px auto;*/
}
#footer .link_box .id_link ul li a img {
max-width: 100%;
}
#footer .link_box .id_link ul li:last-child a{
/*background: none;*/
/*padding-left: 0;*/
}
#footer .company_info{
height: 167px;
display: flex;
font-size: var(--f-19);
color: var(--C-737380);
justify-content: space-between;
align-items: center;
flex-direction: row-reverse;
}
#footer .company_info .left{
display: flex;
gap: 25px;
flex-direction: column;
width: 263px;
line-height: 1;
}
#footer .company_info .left p span{
font-size: 17px;
letter-spacing: -0.5px;
margin-right: 29px;
font-weight: 500;
}
#footer .company_info .left p b{
font-size: 30px;
color: var(--C-45474d);
letter-spacing: -0.5px;
font-weight: 900;
}
#footer .company_info .left p strong{
font-size: var(--f-19);
color: var(--C-45474d);
letter-spacing: -0.5px;
font-weight: 900;
}
#footer .company_info .right{
display: flex;
gap: 30px;
flex-direction: column;
line-height: 1;
font-size: 17px;
letter-spacing: -0.5px;
}
#footer .company_info .right .link ul{
display: flex;
}
#footer .company_info .right .link li::after{
content: "";
display: inline-block;
width: 1px;
height: 16px;
margin: 0 15px;
background-color: #f4f4f4;
vertical-align: -2px;
}
#footer .company_info .right .link li:last-child::after{
display: none;
}
#footer .company_info .right .link a {
color: var(--C-737380);
font-size: 17px;
letter-spacing: -0.5px;
}
#footer .company_info .right .info {
display: flex;
gap: 30px;
}
#footer .copy{
display: flex;
height: 77px;
font-size: var(--f-15);
color: var(--C-aaaab2);
align-items: center;
letter-spacing: -0.5px;
}
/* Tablet styles (max-width: 1024px) */
@media(max-width:1024px){
#footer .inner{
width: initial;
padding: 0 20px;
}
#footer::before{
top: 60px;
}
#footer::after{
top: initial;
bottom: 50px;
}
#footer .link_box{
height: 60px;
}
/*#footer .link_box .sns_link{*/
/* gap: 20px;*/
/*}*/
#footer .link_box .id_link ul{
gap: 20px;
}
/*#footer .link_box .id_link ul li a{*/
/* font-size: var(--f-17);*/
/* padding: 0 0 0 22px;*/
/* background-size: 18px auto;*/
/*}*/
#footer .company_info{
height: 140px;
font-size: var(--f-17);
}
#footer .company_info .left{
gap: 5px;
}
#footer .company_info .right{
gap: 10px;
}
#footer .copy{
height: 50px;
}
}
/* Mobile styles (max-width: 720px) */
@media(max-width:720px){
.pc_icon_img {display: none;}
.mo_icon_img {display: block;}
#footer{
border-width: 2px;
}
#footer::before{
height: 2px;
top: 16vw;
}
#footer::after{
bottom: 10.6vw;
}
#footer .inner{
padding: 0 4.17vw;
}
#footer .link_box{
height: auto;
flex-direction: column;
}
#footer .link_box .sns_link{
height: 16vw;
gap: 5.97vw;
align-items: center;
}
#footer .link_box .sns_link img{
width: 6.67vw;
}
#footer .link_box .id_link{
width: 100%;
padding: 4.03vw 0;
}
#footer .link_box .id_link ul{
gap: 4.17vw 0;
flex-direction: row;
flex-wrap: wrap;
}
#footer .link_box .id_link ul li {
/*width: 33.3%;*/
margin-right: 24px;
}
#footer .link_box .id_link ul li.idskin {
margin-right: 40px;
}
#footer .link_box .id_link ul li:last-child {
margin-right: 0;
}
#footer .link_box .id_link ul li a{
/*padding: 0 0 0 6.5vw;*/
/*font-size: 4.2vw;*/
/*background-size: 5.2vw auto;*/
}
#footer .link_box .id_link ul li.exobalance img {
width: 26.39vw;
}
#footer .link_box .id_link ul li.idclinic img {
width: 21.25vw;
}
#footer .link_box .id_link ul li.iddental img {
width: 20.56vw;
}
#footer .link_box .id_link ul li.idskin img {
width: 24.17vw;
}
#footer .link_box .id_link ul li.idcosmetic img {
width: 32.5vw;
}
#footer .company_info{
height: auto;
padding-bottom: 4.17vw;
align-items: flex-start;
flex-direction: column;
}
#footer .company_info .left{
padding-top: 4.17vw;
padding-bottom: 4.58vw;
width: 100%;
flex-direction: row;
flex-wrap: wrap;
}
#footer .company_info .left p{
margin-right: 5.4vw;
}
#footer .company_info .left p:first-child{
width: 100%;
padding-bottom: 3.61vw;
margin-right: 0;
}
#footer .company_info .left p span{
margin-right: 4.03vw;
font-size: 2.36vw;
letter-spacing: -0.07vw;
}
#footer .company_info .left p b{
font-size: 4.44vw;
letter-spacing: -0.07vw;
}
#footer .company_info .left p strong{
font-size: 2.64vw;
letter-spacing: -0.07vw;
}
#footer .company_info .right{
font-size: 2.36vw;
letter-spacing: -0.07vw;
gap: 4.17vw;
}
#footer .company_info .right .link li::after {
width: 0.14vw;
height: 2.22vw;
margin: 0 2.08vw;
vertical-align: -0.28vw;
}
#footer .company_info .right .link a {
font-size: 2.36vw;
letter-spacing: -0.07vw;
}
#footer .copy{
height: 10.6vw;
font-size: 2.78vw;
letter-spacing: -0.07vw;
}
}
/**** footer.css end ****/