.visuallyhidden {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; white-space: nowrap; clip-path: inset(100%); clip: rect(0,0,0,0); overflow: hidden; }


.text--align--left {text-align: left; }
.text--align--right {text-align: right; }
.text--align--center {text-align: center; }


/* 타이틀 영역
==================================== */
.display1 {font-size: 3.1rem; line-height: 4rem; letter-spacing: -0.0319em; color: var(--primary-normal); font-weight: 900; }
.display2 {font-size: 2.2rem; line-height: 2.8rem; letter-spacing: -0.0282em; color: var(--primary-normal); font-weight: 900; }

.title1 {font-size: 2rem; line-height: 2.6rem; letter-spacing: -0.027em; color: var(--primary-normal); font-weight: 900; }
.title2 {font-size: 1.5rem; line-height: 2.1rem; letter-spacing: -0.0236em; color: var(--primary-normal); font-weight: 700;}
.title3 {  font-size: 1.3rem; line-height: 1.7rem; letter-spacing: -0.023em; color: var(--primary-normal); font-weight: 700;}

.heading1 { font-size: 1.2rem; line-height: 1.6rem; letter-spacing: -0.0194em; color: var(--primary-normal); font-weight: 700;}
.heading2 {font-size: 1.1rem; line-height: 1.5rem; letter-spacing: -0.012em;  color: var(--primary-normal); font-weight: 700;}

.headline1 {font-size: 1rem; line-height: 1.4rem; letter-spacing:  -0.002em; color: var(--primary-normal); font-weight: 700;}

.body1__normal {font-size: 0.888rem; line-height: 1.3rem; letter-spacing:  0.0057em; color: var(--primary-normal); font-weight: 400;}
.body1__reading {font-size: 0.888rem; line-height: 1.4rem; letter-spacing:  0.0057em; color: var(--primary-normal); font-weight: 400;}

.body2__normal {font-size: 0.833rem; line-height: 1.2rem; letter-spacing:  0.0096em; color: var(--primary-normal); font-weight: 400;} 
.body2__reading {font-size: 0.833rem; line-height: 1.3rem; letter-spacing:  0.0096em; color: var(--primary-normal); font-weight: 400;} 

.caption1 {font-size: 12px; line-height: 16px; letter-spacing:  0.0252em; color: var(--secondary-strong); font-weight: 300;}
.caption2 {font-size: 11px; line-height: 14px; letter-spacing:  0.0311em; color: var(--secondary-strong); font-weight: 300;}

.text__ellipsis01 {overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: keep-all;  }
.text__ellipsis02 {overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all;  }




/* form  
=================================== */
input[type="checkbox"] {
	width: 18px; height: 18px;
	margin-top: 0; 
	vertical-align: middle;
  }

  input[type="radio"] {
	 width: 18px; height: 18px;
	 vertical-align: middle;
  }





/* list style 
=================================== */
.list__style {counter-reset:list-number; }
.list__style li {position: relative;}
.list__style li + li {margin-top: 8px; }

/* num */
.list__style.num li {counter-increment:list-number; font-size: 15px; color: var(--defalut-color); font-weight: 400; }
.list__style.num li:before {content:'0' counter(list-number); margin-right: 14px; font-size: 22px; color: var(--accent-normal); font-weight: 700; }

/* check */
.list__style.check li {position: relative; padding-left: 42px; font-size: 15px; }
.list__style.check li:before {
  content:'';
  position: absolute;
  top: -4px; left: 0; 
  display: inline-block; 
  width: 28px; height: 26px; 
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  -webkit-mask-image: url('./assets/icon/i_check_solid.svg');
  mask-image: url('/assets/icon/i_check_solid.svg');
  mask-repeat: no-repeat;
  mask-position:  center center;
  background-color: var(--accent-normal); 
}
.list__style .accent-color {color: var(--accent-normal); }





/* 아이콘 영역
==================================== */

.icon--plus {position: relative; display: inline-block; width: 10px; height: 10px; margin: 0 2px; box-sizing: border-box; }
.icon--plus:after {content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.icon--plus:before {content: ''; position: absolute; top: 0; left: 50%; width: 1px; height: 100%;  transform: translateX(-50%);}


.icon--mask {
  display: inline-block; 
  width: 40px; height: 40px; 
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-repeat: no-repeat;
  mask-position: center center;
}
.icon--mask-alarm {
  -webkit-mask-image: url('/assets/icon/i_alarm.svg');
  mask-image: url('/assets/icon/i_alarm.svg');
}
.icon--mask-cycle {
  -webkit-mask-image: url('/assets/icon/i_cycle.svg');
  mask-image: url('/assets/icon/i_cycle.svg');
}
.icon--mask-scissors {
  -webkit-mask-image: url('/assets/icon/i_scissors.svg');
  mask-image: url('/assets/icon/i_scissors.svg');
}
.icon--mask-anesthesia {
   -webkit-mask-image: url('/assets/icon/i_anesthesia.svg');
  mask-image: url('/assets/icon/i_anesthesia.svg');
}
.icon--mask-bed {
   -webkit-mask-image: url('/assets/icon/i_bed.svg');
  mask-image: url('/assets/icon/i_bed.svg');
}
.icon--mask-recovery {
   -webkit-mask-image: url('/assets/icon/i_recovery.svg');
  mask-image: url('/assets/icon/i_recovery.svg');
}













/* 애니메이션 영역 : 키프레임
==================================== */

@keyframes spin {
  0% { transform: rotate(0%); }
  100% { transform: rotate(360deg); }
}