@charset "UTF-8";

:root{
	--main-color:transparent;
	--transition-custom: all 0.3s ease-in-out;
	--transition-custom2: all 0.8s ease-in-out;
	--transition-custom-2: all 0.2s ease-in-out; 
  --font-family-noto: 'Noto Sans Korean', 'Nanum Gothic', Nanum Gothic, '나눔고딕', '맑은 고딕', 'Malgun Gothic', Dotum, '돋움', Gulim, '굴림',sans-serif;
	--font-family-mont: 'Montserrat', 'Noto Sans Korean', 'Nanum Gothic', Nanum Gothic, '나눔고딕', '맑은 고딕', 'Malgun Gothic', Dotum, '돋움', Gulim, '굴림',sans-serif;
	--font-family-suit: 'SUIT', 'Nanum Gothic', Nanum Gothic, '나눔고딕', '맑은 고딕', 'Malgun Gothic', Dotum, '돋움', Gulim, '굴림',sans-serif;
}

/* text style */
* + .x_txtTotal {margin-top:0.375rem;}


/* list style */
.img_listCheck {position: relative; top: -0.125rem; height: 1.25rem;} 
@media (max-width:768px) {  
  .img_listCheck {height: 1rem;} 
}


/* space */
.x_box_flex + .x_txtIcon {margin-top:2rem;}
.x_txtIcon .t_dot {margin-top:0.375rem;}




/* HSM 20260729 진료과 소개 */
/* 안동병원 소개 */
.hospital_intro { display: flex; gap: 50px; margin-bottom: 3.75rem; box-sizing: border-box;} 
.hospital_intro_text { flex: 1; height: 100%; } 
.hospital_intro_label { letter-spacing: 1.5px; } 
.hospital_intro_title { font-size: 33px; margin: 10px 0; box-sizing: border-box; font-weight: 500; line-height: 1; } 
.hospital_intro_text p { color: #666; line-height: 1.5; letter-spacing: -0.5px; font-size: 21px; } 
.hospital_intro_bgi { flex: 1; max-width: 535px; } 
.hospital_intro_bgi>img { width: 100%; height: 100%; } 
.hospital_cm_text span { font-size: 14px; color: #a0a0a0; font-weight: 600; } 

/* 각진료과 */
.department_intro { display: flex; margin-bottom: 3.75rem; box-sizing: border-box; } 
.department_intro_box { width: 760px; min-height: 457px; background: #f3f3f3; padding: 50px 35px; box-sizing: border-box; } 
.department_intro_title { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; box-sizing: border-box; } 
.department_title_left { width: 100px; height: 100px; background-color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 100%; } 
.department_title_right { display: flex; flex-direction: column; gap: 15px; } 
.department_title_right h3 { font-weight: 900; margin: 0; font-size: 30px; } 
.department_title_right span { letter-spacing: 2.5px; } 
.department_intro_text { display: flex; flex-direction: column; gap: 35px; } 
.department_intro_text>p { color: #555; line-height: 2; letter-spacing: -0.7px; } 
.department_intro_bgi { width: 700px; height: 330px; position: relative; margin-top: 50px; margin-left: -160px; z-index: 2; box-sizing: border-box; } 
.department_intro_short { position: absolute; right: 0; bottom: -77px; max-width: 100%; width: 600px; min-height: 160px; background-color: #f26532; color: #fff; font-weight: 500; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 25px; box-sizing: border-box; } 
.department_intro_short::before { content: ""; display: block; position: absolute; width: 165px; height: 65px; background: url(../images/sub/img_department_logo.png) no-repeat center; right: 0; bottom: 0; } 
.department_intro_short p { font-size: 24px; text-align: center; } 

/* 아이콘 카드 */
.ico_card_inner { margin-bottom: 3.75rem; box-sizing: border-box; } 
.ico_card_gird { display: grid; gap: 15px; grid-template-columns: repeat(4, 1fr); box-sizing: border-box; } 
.ico_card { height: 150px; background-color: #f3f3f3; padding: 0 15px 0 35px; box-sizing: border-box; display: flex; align-items: center; gap: 20px; } 
.ico_card>i { height: 80px; width: 80px; border-radius: 100%; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 5px;} 
.ico_card p { font-size: 18px; letter-spacing: -1px; font-weight: 500; line-height: 1.4; } 
.ico_card>div { display: flex; flex-direction: column; gap: 5px; } 
.ico_card>div>span { font-size: 14px; color: #666; letter-spacing: -1px; } 
/* 아이콘카드 - 7가지 색상 */
.ico_card_black { background-color: #3a495e; } 
.ico_card_blue { background-color: #004098; } 
.ico_card_orange { background-color: #f26632; } 
.ico_card_purple { background-color: #1a659e; } 
.ico_card_green { background-color: #7c675a; } 
.ico_card_sky { background-color: #8ea6c6; } 
.ico_card_yellow { background-color: #f0b055; } 
.ico_card_gray { background-color: #aba19e; } 
.ico_card_dark { background-color: #4a2f1e;}
.ico_card_gray_02 {background-color: #bdc1c5;}
.ico_card_orange_02 {background-color: #fba170;}

/* 설명 목록 테이블 */
/* 타입 1 */
.explanation_table_inner { margin-bottom: 3.75rem; box-sizing: border-box; } 
.explanation_table_list { border-top: 2px solid; display: grid; grid-template-columns: max-content 1fr; } 
.explanation_table_item { display: contents; } 
.explanation_item_left,
.explanation_item_right { border-bottom: 1px solid #ececec; padding: 20px 0; box-sizing: border-box; } 
.explanation_item_left { grid-column: 1; font-weight: 500; padding-right: 45px; white-space: nowrap; letter-spacing: -1px; } 
.explanation_item_left::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 16px; background-color: #000; transform: translateY(-4px); box-sizing: border-box; } 
.explanation_item_right { grid-column: 2; color: rgba(0, 0, 0, 0.6); letter-spacing: -0.2px; } 
 /* 타입 2 */
.explanation_sec_type { grid-column: 1 / -1; width: 100%; display: flex; flex-direction: column; border-bottom: 1px solid #ececec;} 
.explanation_sec_item { font-weight: 500; letter-spacing: -0.5px; padding: 20px 0; box-sizing: border-box; } 
.explanation_sec_item::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 16px; background-color: #000; transform: translateY(-4px); box-sizing: border-box; } 

/* 설명 목록 카드 */
.explanation_card_inner { margin-bottom: 3.75rem; box-sizing: border-box; } 
.explanation_grid_cm { display: grid; gap: 15px; box-sizing: border-box; } 
/* 그리드1(한줄에 3칸) */
.explanation_grid_fir { grid-template-columns: repeat(3, 1fr); } 
/* 그리드1(한줄에 4칸) */
.explanation_grid_sec { grid-template-columns: repeat(4, 1fr); } 
/* 그리드1(한줄에 5칸) */
.explanation_grid_thr { grid-template-columns: repeat(5, 1fr); } 
/* 타입1(공통) */
.explanation_type_cm { min-height: 70px; height: 100%; background-color: #f3f3f3; display: flex; align-items: center; justify-content: center; padding: 10px; box-sizing: border-box; } 
.explanation_type_cm>p { font-weight: 500; line-height: 1.5; text-align: center;} 
 /* 타입2(2개의 텍스트) */
.explanation_type_sec { display: flex; flex-direction: column; } 
.explanation_type_sec>span { font-size: 14px; letter-spacing: -1px; text-align: center;} 

/* 숫자/텍스트 박스 */
.procedure_nt_inner { margin-bottom: 3.75rem; box-sizing: border-box; } 
 /* 한줄에 3박스 */
.procedure_nt_fir { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; box-sizing: border-box; } 
 /* 한줄에 4박스 */
.procedure_nt_sec { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; box-sizing: border-box; } 
.procedure_nt_box { height: 70px; display: flex; } 
.procedure_num { width: 70px; background-color: #3a495e; display: flex; align-items: center; justify-content: center; } 
.procedure_num>p { color: #fff; font-weight: 500; font-size: 18px; } 
.procedure_text { background-color: #eaf0f8; flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; } 
.procedure_text>p { text-align: center; font-weight: 500; letter-spacing: -1px; line-height: 1.5; } 

/* 진료의 특징 아이콘*/
.explanation_char_inner { margin-bottom: 3.75rem; box-sizing: border-box; } 
.explanation_char { display: flex; gap: 15px; align-items: flex-start; } 
.explanation_char_box { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 15px; flex:1; } 
.char_ico { display: flex; align-items: center; justify-content: center; padding-bottom: 15px; width: 100%; box-sizing: border-box; } 
.explanation_char_box>div {display: flex; gap: 5px; flex-direction: column;}
.explanation_char_box p { text-align: center; font-weight: 500; letter-spacing: -1px; line-height: 1.5; display: block; } 
.explanation_char_box>div>span {text-align: center; font-size: 14px; line-height: 1.5;}
/* 진료의 특징 아이콘(색상별) */
.char_bgc_blue { border-bottom: 2px solid #004098; } 
.char_bgc_brown { border-bottom: 2px solid #3a495e; } 
.char_bgc_orange { border-bottom: 2px solid #f26632; } 
.char_bgc_sky { border-bottom: 2px solid #1a659e; } 
.char_bgc_gray { border-bottom: 2px solid #7c675a; } 

/* 배너 */
.banner_box, .banner_230_box, .banner_295_box { background: url(../images/sub/img_department_banner.png) no-repeat; background-size: cover; padding: 20px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; } 
.banner_box {height: 200px;}
.banner_230_box {height: 230px;}
.banner_295_box {height: 295px;}
.banner_295_box>div {display: flex; flex-direction: column; gap: 40px;}
.banner_box>h3, .banner_230_box>h3, .banner_295_box>h3 { font-size: 26px; margin-bottom: 20px; box-sizing: border-box; letter-spacing: -1.7px; color: #fff; text-align: center;} 
.banner_box>p, .banner_230_box>p, .banner_295_box>div>p { text-align: center; line-height: 2; } 


@media screen and (max-width: 1280px){
 .br_none_1280 {display: none;}

 /* 각 진료과 */
 .department_intro {flex-direction: column;}
 .department_intro_box {padding: 50px 25px; width: 100%; min-height: auto; }
 .department_intro_text { gap: 15px; } 
 .department_intro_bgi {margin: 0; width: 100%; display: flex;}
 .department_intro_bgi>img {width: 60%;}
 .department_intro_short {position: relative; bottom: 0; width: 100%; height: 100%; padding: 25px;}

 /* 아이콘 카드 */
 .ico_card {height: auto; padding: 15px; gap: 15px;} 
 .ico_card>i { min-width: 80px; min-height: 80px;} 

/* HSM 20251111 에디터 이미지 사이즈 변경 */
.txt_edit img {height: 100% !important; width: 100% !important;}
 }

@media screen and (max-width: 1024px){
 .br_none_1024 { display: none; } 

/* 각 진료과 */
.department_intro_bgi {flex-direction: column; height: 100%; }
.department_intro_bgi>img {width: 100%; height: 330px;}
.department_intro_short {margin-top: -50px;}

/* 아이콘 카드 */ 
.ico_card_gird { grid-template-columns: repeat(3, 1fr); } 
.ico_card { flex-direction: column; } 
.ico_card>i { height: 70px; width: 70px; min-width: 70px; min-height: 70px;} 
.ico_card>i>img { width: auto; height: auto; } 
.ico_card p { text-align: center; } 
.ico_card>div>span { text-align: center; } 

/* 설명 목록 테이블 */
.explanation_item_left { padding-right: 30px; } 

/* 설명 목록 카드 */
.explanation_grid_sec { grid-template-columns: repeat(3, 1fr); } 
.explanation_grid_thr { grid-template-columns: repeat(3, 1fr); } 

/* 숫자/텍스트 박스 */
.procedure_nt_sec { grid-template-columns: repeat(3, 1fr); } 
.procedure_num { width: 50px; }

/* 진료의 특징 아이콘*/
.explanation_char {flex-wrap: wrap; } 
.explanation_char_box {width: calc(100% / 3 - 10px); flex: none;} 
.explanation_char_box p { letter-spacing: -1.5px; } 

/* 배너 */
.banner_box, .banner_230_box, .banner_295_box {height: auto;} 
 }

@media screen and (max-width: 768px) { /* 안동병원 소개 */
.hospital_intro { flex-direction: column; gap: 15px;} 
.hospital_intro_bgi { max-width: 100%; } 


/* 설명 목록 카드 */
.explanation_grid_fir { grid-template-columns: repeat(2, 1fr); } 
.explanation_grid_sec { grid-template-columns: repeat(2, 1fr); } 
.explanation_grid_thr { grid-template-columns: repeat(2, 1fr); } 

/* 숫자/텍스트 카드 */ 
.procedure_nt_fir { grid-template-columns: repeat(2, 1fr); } 
.procedure_nt_sec { grid-template-columns: repeat(2, 1fr); } 

/* 아이콘 카드 */
.ico_card_gird { grid-template-columns: repeat(2, 1fr); } 

/* 진료특징 아이콘 */
.explanation_char_box {width: calc(100% / 2 - 8px);}
 }

 /* 640 */
@media screen and (max-width: 640px) { /* 안동병원 소개 */
.hospital_intro_text p { font-size: 14px; } 
.hospital_cm_text>h3 { font-size: 1.7rem; } 

/* 각진료과 */
.department_intro_box {padding: 30px 20px;}
.department_intro_title {margin-bottom: 10px; gap: 10px;}
.department_title_left { width: 60px; height: 60px; min-width: 60px;} 
.department_title_left img { max-width: 60%; } 
.department_title_right {gap: 10px;}
.department_title_right span { letter-spacing: 1px; } 
.department_intro_text p { font-size: 14px; } 
.department_intro_bgi>img { height: auto;}
.department_intro_short { margin: 0; min-height: 120px; padding: 20px;} 
.department_intro_short p { font-size: 14px; } 

/* 아이콘 카드 */
.ico_card {padding: 15px; gap: 10px;}
.ico_card p { font-size: 14px; } 

/* 설명 목록 테이블 */
.explanation_table_list { grid-template-columns: none; } 
.explanation_table_item { display: flex; flex-direction: column; gap: 5px; padding: 10px 0; box-sizing: border-box; border-bottom: 1px solid #ececec;} 
.explanation_item_left,
.explanation_item_right {padding: 0; font-size: 14px; border: none;}
.explanation_item_left { line-height: 1;} 
.explanation_item_left::before { margin: 0 10px; transform: translateY(-3px); } 
.explanation_item_right { padding-left: 24px; } 
 /* 타입 2 */
.explanation_sec_item { font-size: 14px; padding: 10px 0;} 
.explanation_sec_item::before { margin: 0 10px; transform: translateY(-3px); } 

/* 설명 목록 카드 */
.explanation_type_cm>p, .explanation_type_sec>span { font-size: 14px; } 

/* 숫자/텍스트 박스 */
.procedure_nt_box { height: 60px; } 
.procedure_num>p { font-size: 14px; } 
.procedure_text {padding: 10px;}
.procedure_text>p { letter-spacing: -1.5px; font-size: 14px; } 

/* 진료의 특징 아이콘*/
.char_ico {padding-bottom: 10px;}
.explanation_char_box {gap: 10px;}
.explanation_char_box p { font-size: 14px; } 

/* 배너 */
.banner_295_box>div {gap: 10px;}
.banner_box>h3, .banner_230_box>h3, .banner_295_box { font-size: 1.3rem; margin-bottom: 10px;} 
.banner_box>p, .banner_230_box>p, .banner_295_box>div>p { font-size: 14px; line-height: 1.5;} 
 }
 
 /* 460 */
@media screen and (max-width: 460px) { /* 각진료과 */
.department_intro_short {min-height: 100px;}

/* 설명 목록 카드 */
.explanation_grid_fir { grid-template-columns: repeat(1, 1fr); } 
.explanation_grid_sec { grid-template-columns: repeat(1, 1fr); } 
.explanation_grid_thr { grid-template-columns: repeat(1, 1fr); } 

/* 설명목록 테이블 */

/* 아이콘 카드 */
.ico_card_gird { grid-template-columns: repeat(1, 1fr); }

/* 숫자/텍스트 박스 */
.procedure_nt_fir { grid-template-columns: repeat(1, 1fr); } 
.procedure_nt_sec { grid-template-columns: repeat(1, 1fr); } 
.procedure_text>p { letter-spacing: -1.5px; } 

/* 진료의 특징 아이콘*/
.explanation_char {flex-direction: column;}
.explanation_char_box {width: 100%;}  
 }

.explanation_char_txt {margin-bottom: 15px;}
.explanation_char_txt p {font-size: 20px; color: #f26632; font-weight: 500; margin-bottom: 5px;}