:root{
	--primary:#0A8F9A;
	--light-primary:#E9EFEF;
	--dark-primary:#6CA6B5;
	--background:#f4f7fb;
	--line:#e2e8f0;
	--purple:#6A4FB6;
	--green:#2F8F73;
	--yellow:#FFC12C;
	--red:#C64545;
	--blue:#2B78D0;
	--light-teal:#e5fbf8;
	--teal:#36d0c7;
	--light-purple:#8996ef;
	--text-green:#1E2A2A;
	--text-green02:#E9EFEF;
	--light-dark:#7E8299;
	--light-dark-hover:#71758A;
	--light-gray:#F1F1F4;
	--light-gray-hover:#E8E8ED;
	--text-88:#888888;
	--text-55:#555555;
	--text-33:#333333;
	--text-black:#131313;
	--list-shadow:2px 3px 6px 0px #3F8DFF26;
	--box-shadow:1px 2px 6px 0px rgba(0,0,0,0.15);
	--border:1px solid #E9EFEF;
	--radius-8:8px;

    --font-size-sm: 0.8rem;/*10px*/
    --font-size-md: 1rem; /*12px*/
    --font-size-lg: 1.17rem;/*14px*/
    --font-size-xl: 1.5rem;/*18px*/
    --font-size-2xl: 2rem;/*24px*/
    --font-size-3xl: 3rem;/*36px*/
    --font-size-5xl: 5rem; /*60px*/
}


.main-title{color:#3F4254; letter-spacing:-1px; font-size:24px; font-family: 'IBM Plex Bold'; line-height:130%; }
.sub-text{color:#888; margin:0; padding:0;}
.dashboard-wrap{width:100%; height:100%; display:Flex; justify-content:space-between; gap:2em;}
.blueColor{color:#3269C8}

em.highlight{position: relative; font-style:normal; color:var(--primary)}


section{padding:1em;}
section#intro {	width:60%; display:flex; flex-direction:column; justify-content:space-between; gap:2rem; }

section#intro .mainHero{position:relative; background: #E7F4F5; height:220px; border-radius:var(--radius-8);padding:1.2rem;}
section#intro .mainHero p {font-size:1.5em; color:var(--text-55);}
section#intro .mainHero img{position: absolute;width:280px;  right:1.2rem; bottom:0;}
section#intro .introBlock h2 {	font-size:18px; font-weight:700;}
section#intro .introBlock h3 {	font-size:16px; font-weight:500;}

section#intro .introBlock .card {padding:1rem 2rem; background:var(--light-gray);border-radius:var(--radius-8);position:relative }

section#intro .introBlock .featureBlock{display: grid;grid-template-columns: repeat(3, 1fr);gap: 1.7rem;}
section#intro .introBlock .featureBlock h3{line-height:120%; font-size:var(--font-size-2xl); font-weight:600;}
section#intro .introBlock .featureBlock .card{height:210px; font-size:13px;	padding:3rem 1.7rem;  background:#E5876F; color:#fff; text-align:left;}
section#intro .introBlock .featureBlock .card:nth-of-type(2){background:#736FE5;}
section#intro .introBlock .featureBlock .card:nth-of-type(3){background:#42B9C3; ;}
section#intro .introBlock .featureBlock .card .badge{position:absolute; color:#fff; right:10px; bottom:10px; background:#ccc; padding:2px 10px; border-radius:10px}

section#intro .introBlock .featureBlock .em { font-weight:bold; font-size:1.1em}

section#intro .introBlock .flowSteps {width:100%; display: flex;	align-items: center;	justify-content: center;	gap: 5px;	font-size: 14px;	color: #444;}
section#intro .introBlock .flowSteps .step {position: relative; display:flex; justify-content:center; align-items:center; width:84px; height:84px; font-weight:700;line-height:1.2; background:var(--light-gray); color:var(--text-33); border-radius: 50px; text-align: center;}


section#intro .introBlock .flowSteps .arrow {color: var(--text-55); }
section#intro .introBlock .flowSteps .arrow i{font-weight: bold;}


section#intro .introBlock.bottom-wrap{backgroundx:#eff2f3; border-radius:12px; padding:1em;}
section#intro .introBlock .serviceCharge {display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; width:100%; }
section#intro .introBlock .serviceCharge div{}
section#intro .introBlock .serviceCharge h4{font-size:var(--font-size-lg);}
section#intro .introBlock .serviceCharge h4 i{color:var(--blue); font-size:1.2em;}
section#intro .introBlock .serviceCharge p{	color:var(--text-88);padding:0; margin-left:1em;}

/* contents 하단 이용요금&설정 */
section#intro .introBottom{display:flex; gap:1.7rem; }
section#intro .introBlock .bottomBox{display:Flex; flex-direction:column; justify-content:space-between; width:50%;height:200px; padding:1.5rem 2rem; background:#F9FAFB; border:1px solid var(--line);}
section#intro .introBottom h3{font-size:20px;font-weight: bold;}


section#intro .introBlock .setting-wrap{text-align:center;}
/* 기관설정하러가기 버튼 */
#btn-goSetting { display:flex; align-items:center; justify-content:center;  gap:4px; flex:1 1 0; width:100%;  padding:8px 16px; margin:0 auto; border-radius:10px; background:#3269C8;color:#fff; font-size:var(--font-size-xl); text-align:center;   outline:None; letter-spacing:-1px;}
.btn-goAction{ display:flex; align-items:center; justify-content:center;  gap:4px; flex:1 1 0; width:50%;  padding:8px 16px; border-radius:50px; background:#3269C8;color:#fff; font-size:var(--font-size-lg); text-align:center;  outline:None; letter-spacing:-1px;}
.btn-goAction.tool-btn-oSetting{background:#339C6B}


button.tool-btn-chargeTable{width:150px; height:30px;display:flex; justify-content:center; align-items:center; font-size:14px; font-weight: bold; background:#D7DFE8; }
button.tool-btn-chargeTable i{font-size:18px }

#intro button.btn-formNaverOpen{width:200px; height:84px; background:#3F4254; outline:none; border:1px solid #eee;  color:#fff; border-radius:10px;}
#intro button.btn-formNaverOpen:hover{background:#3F4254; color:#fff; opacity:.9;}

#intro button.tool-btn-postInsert{width:230px; height:84px; background:#3F4254; outline:none; border:1px solid #eee;  color:#fff; border-radius:10px;}
#intro button.tool-btn-postInsert:hover{background:#3F4254; color:#fff; opacity:.9;}


a i.xi-arrow-right{display:inline-block; width:20px; height:20px; display:flex; justify-content:center; align-items:Center;  border-radius:50px; background:#fff; color:#3269C8; transform:rotate(320deg);}







section#contents {	width:40%; border:2px solid var(--line); background:var(--background); border-radius:1em; padding:2em;	margin:1em;}

section#contents .contents-item .item-box{min-height:300px;}
/*section#contents h3.list-title { display:inline-block; border-radius:5px; background:var(--primary); padding:.1em 1em;  font-size:1.1em; color:var(--light-primary); font-weight:500;}*/
section#contents h3.list-title {font-size:1.2em; font-weight:700; color:#333; border-bottom:1px solid #ccc; border-left:10px solid #ccc; padding-left:5px; height:25px}
section#contents h3.list-title a{ display:inline-block; border-radius:5px; background:var(--primary);  font-size:12px; color:var(--light-primary); font-weight:500; padding:1px 5px; margin-bottom:1px; cursor:pointer}

section#contents ul#list-post {
	background:#fff; border-radius:0 0 1em 1em;
	padding:0; list-style:none;
	height:330px; overflow-y:scroll;

}
section#contents ul#list-post li {border-bottom:1px dashed var(--line); min-height:4em; padding:.5em 1em; margin:0}

section#contents ul#list-post li:hover{ cursor:pointer; background:#efefef }
section#contents ul#list-worker{
	padding:0;list-style:none;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
section#contents ul#list-worker li{
	display:inline-block;
	background:#fff; border:1px solid var(--line); 
	border-radius:1em;padding:1em;height:140px}

	
section#contents ul#list-worker li span.null{
	display:inline-block; width:30px; height:17px; background:#efefef; border-radius:5px
}

/* CareMatch 시범오픈 배지 */
.top-badge{
	display:inline-flex;
	align-items:center;
	padding:8px 16px;
	font-weight:700;
	line-height:1;
	letter-spacing:-0.2px;

	/*color:#2b5fd9;                  이지케어 메인 블루 계열 */
	/*background:#f3f7ff;              연한 블루 배경 */
	/* border:1px solid #d6e4ff; */
	
	background:var(--primary); color:#fff;
	border-radius:8px;            /* pill 형태 */
	white-space:nowrap;
	vertical-align:middle;
}

.box-blur{
	position:absolute;
	padding-top:100px;
	width:100%; height:100%;
    color: #fff; font-size:14pt;
	z-index:11;
	background: #77777766;
    backdrop-filter: blur(2px);
	border-radius:.5em;
}

.box-blur ul{list-style:none; }