@charset "utf-8";

/** 여행플러스 > 대표관광지 **/

.medical_list									{ gap:1rem 2%; }
.medical_list li									{ position:relative; width:32%; padding-bottom:3rem; background:#eef1f3; border-radius:1rem}
.medical_list .info_area						{ padding:1.5rem}
.medical_list .info_area .cate				{ align-items:center; gap:.3em; font-size:.97rem; }
.medical_list .info_area .cate .hospital	{ padding:.3em .8em; color:#fff; border-radius:2em; }
.medical_list .info_area .cate .bg_green	{ background:#26ae7b}
.medical_list .info_area .cate .bg_blue	{ background:var(--blue)}
.medical_list .info_area .cate .area		{ font-weight:700; color:#666b6f}
.medical_list .info_area .name				{ display:block; margin:.4em 0; font-weight:700; font-size:1.24rem; letter-spacing:-.01em;  }
.medical_list .info_area .txt					{ display:block; margin:.15em 0; padding-left:1.3em; font-size:1.09rem; letter-spacing:-.01em; color:#666; background:no-repeat 0 .2em / 18px}
.medical_list .info_area .add				{ background-image:url(https://tour.jb.go.kr/resources/jns-img/sub/bg_location.svg)}
.medical_list .info_area .call				{ background-image:url(https://tour.jb.go.kr/resources/jns-img/sub/bg_tel.svg)}
.medical_list .btn_area						{ position:absolute; bottom:0; left:0; width:100%; border-top:1px solid #fff; }
.medical_list .btn_area>a					{ flex:1; display:block; padding:.7em; text-align:center; font-size:1.07rem; color:#777; }
.medical_list .btn_area .arr					{ position:relative; display:inline-block; width:17px; height:8px; margin:.3em 0 0 .2em; vertical-align:top; }
.medical_list .btn_area .arr::after			{ position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--blue); content:""}
.medical_list .btn_area .arr::before		{ position:absolute; right:0; bottom:25%; width:35%; height:1px; background:var(--blue); transform:rotate(45deg); -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); content:""}

.medical_link									{ gap:1rem 2%; margin:3.5rem auto}
.medical_link li								{ width:49%; }
.medical_link li>a								{ display:block; padding:2.5rem; border-radius:1em; }
.medical_link .search							{ color:#fff; background:url(/resources/jns-img/content/bg_medical01.png), linear-gradient(45deg,#26a875,#30b180); background-repeat:no-repeat, no-repeat; background-position:top 50% right 2.5rem, 0 0;}
.medical_link .emergency					{ color:#000; background:url(/resources/jns-img/content/bg_medical02.png), linear-gradient(45deg,#f6da52,#f5d547); background-repeat:no-repeat, no-repeat; background-position:top 50% right 2.5rem, 0 0;}
.medical_link li em							{ display:block; margin-bottom:.3em; font-weight:700; font-size:1.66rem;}
.medical_link li span							{ display:block; padding-right:8rem; font-weight:300; font-size:1rem; letter-spacing:-.01em; opacity:.8}


@media all and (min-width:1025px){
	.mobile											{ display:none !important}
}
@media all and (max-width:968px){
	.medical_link li>a								{ padding:1.8rem; }
	.medical_link .search,
	.medical_link .emergency					{ background-position:top 50% right 1.8rem, 0 0;}
}
@media all and (max-width:968px) and (min-width:769px){
	.medical_link li span	br						{ display:none}
}
@media all and (max-width:768px){
	.medical_list li									{ width:49%; padding-bottom:2.5rem; }
	.medical_list .info_area						{ padding:1.2rem }
	.medical_list .info_area .cate				{ font-size:.92rem; }
	.medical_list .info_area .cate .hospital	{ padding:.2em .6em; }
	.medical_list .info_area .name				{ margin:.3em 0; font-size:1.15rem; }
	.medical_list .info_area .txt					{ margin:.1em 0; padding-left:1em; font-size:1rem; background-size:15px}
	.medical_list .btn_area>a					{ padding:.6em; font-size:1rem; }

	.medical_link li								{ width:100%; }
	.medical_link li em							{ font-size:1.45rem;}
	.medical_link li span							{ font-size:.95rem; }
}
@media all and (max-width:568px){
	.medical_list .info_area						{ padding:1rem }
	.medical_list .info_area .cate				{ font-size:.9rem; }
	.medical_list .info_area .name				{ font-size:1.08rem; }
	.medical_list .info_area .txt					{ font-size:.95rem; background-size:13px; background-position-y:.3em}
	.medical_list .btn_area>a					{ font-size:.95rem; }
	.medical_list .btn_area .arr					{ width:12px; margin-top:.2em; }

	.medical_link							{ margin:2rem auto}
	.medical_link li>a								{ padding:1.5rem; }
	.medical_link .search,
	.medical_link .emergency					{ background-position:top 50% right 1.5rem, 0 0; background-size:85px, cover; }
	.medical_link li em							{ font-size:1.2rem;}
	.medical_link li span							{ padding-right:6rem; }
}
@media all and (max-width:468px){
	.medical_link li span	br						{ display:none}
}
@media all and (max-width:358px){
	.medical_list									{ flex-direction:column; gap:.8rem}
	.medical_list li									{ width:100%; }
}