@charset "utf-8"; 

#safety-system { scroll-behavior: smooth; color: #161718; } 
#safety-system #sub-title strong::before { background-color: #95b6dc; } 

#page-intro { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; } 
#page-intro::after { content: ''; display: block; margin-top: 5rem; width: 1px; height: 5rem; background-color: black; } 

#page-signature { position: relative; z-index: 1; padding: 0; } 
#page-signature .sub-item { position: relative; display: flex; justify-content: center; align-items: center; gap: 5rem 14rem; padding: 0 16rem; } 


#page-signature .sub-item > div { flex: 1; } 
#page-signature .sub-item .sub-item-title { text-align: left; } 
#page-signature .sub-item .sub-item-title strong { justify-content: flex-start; } 
#page-signature .sub-item .sub-item-title h3 { font-size: 2.2rem; margin-top: 2rem; font-weight: 300; } 
#page-signature .sub-item .sub-item-title small { color: var(--grey-color-); } 
#page-signature .signature-list { max-width: 50%; min-width: 45rem; } 
#page-signature .signature-list ul { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2rem 4rem; padding-bottom: 5rem; overflow: hidden; } 
#page-signature .signature-list ul li { display: flex; align-items: center; justify-content: center; flex-direction:column; text-align: center; width: calc(50% - 2rem); position: relative; border-radius: 2rem; } 
#page-signature .signature-list ul li:nth-child(2) { margin-top: 4rem; } 
#page-signature .signature-list ul li:nth-child(3) { margin-top: -2rem; } 
#page-signature .signature-list ul li:nth-child(4) { margin-top: 2rem; } 
#page-signature .signature-list ul li a.link { color: white; display: block; } 
#page-signature .signature-list ul li .signature-img { border-radius: 2rem; overflow: hidden; } 
#page-signature .signature-list ul li strong { font-size: 2rem; margin-top: 2rem; } 
#page-signature .signature-list ul li p { margin-top: 1rem; font-size: 1.6rem; color: #898a8d; } 

#page-anesthesia-pain-specialist { position: relative; z-index: 2;  padding-block: 10rem; background-color: #7294c2; } 
#page-anesthesia-pain-specialist .sub-item { display: flex; align-items: center; justify-content: center; gap: 4rem; } 
#page-anesthesia-pain-specialist .sub-item .sub-item-title { flex: 1; text-align: left; color: white; } 
#page-anesthesia-pain-specialist .sub-item .sub-item-title p { margin-top: 2rem; line-height: 1.5; color: white; } 
#page-anesthesia-pain-specialist .sub-item picture { flex: 1; border-radius: 3rem; overflow: hidden; } 


#page-safety-auth-system { padding-block: 10rem; background-color: #f5f7fa; } 
#page-safety-auth-system .sub-item .sub-item-title span { color: #599eff; } 
#page-safety-auth-system .safety-auth-system-list { width: 80%; margin: 6rem auto auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; } 
#page-safety-auth-system .safety-auth-system-list li { border-radius: 2.2rem; padding: 2rem; display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: white; } 
#page-safety-auth-system .safety-auth-system-list li picture { overflow: hidden; border-radius: 1.4rem; } 
#page-safety-auth-system .safety-auth-system-list li strong { line-height: 1.5; text-align: center; font-size: 2rem; margin-top: 2rem; } 
#page-safety-auth-system .safety-auth-system-list li p { line-height: 1.25; text-align: center; margin-top: 1rem; font-size: 1.6rem; color: #898a8d; } 
#page-safety-auth-system .safety-auth-system-list li .bedge-wrapper { position: relative; } 
#page-safety-auth-system .safety-auth-system-list li .bedge { position: absolute; right: -3.5rem; top: -3.5rem; border-radius: 50%; background-color: #599eff; color: white; padding: 2rem; font-size: 1.5rem; aspect-ratio: 1 / 1; line-height: 1.25; width: 7rem; height: 7rem; display: flex; align-items: center; justify-content: center; } 


#page-infection-prevention { padding-block: 10rem 15rem; background-color: white; } 
#page-infection-prevention .sub-item .sub-item-title span { color: #599eff; } 
#page-infection-prevention .infection-prevention-list { width: 80%; margin: 6rem auto auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4rem; } 
#page-infection-prevention .infection-prevention-list li { box-shadow: 0 0 1rem 0.1rem rgba(127, 127, 127, 0.11); border-radius: 2.2rem; padding: 2rem; display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: white; } 
#page-infection-prevention .infection-prevention-list li picture { overflow: hidden; border-radius: 1.4rem; } 
#page-infection-prevention .infection-prevention-list li strong { line-height: 1.5; text-align: center; font-size: 2rem; margin-top: 2rem; } 
#page-infection-prevention .infection-prevention-list li p { line-height: 1.25; text-align: center; margin-top: 1rem; font-size: 1.6rem; color: #898a8d; } 



#page-ab-clinic { position: relative; z-index: 2; padding-bottom: 10rem; background: linear-gradient(to bottom, #ffffff 0%, #f6f7fb 100%); } 
#page-ab-clinic .sub-item { display: flex; align-items: center; justify-content: center; gap: 4rem; } 
#page-ab-clinic .sub-item .sub-item-title { flex: 1; text-align: left; color: #161718; } 
#page-ab-clinic .sub-item .sub-item-title p { margin-top: 2rem; line-height: 1.5; color: #161718; } 
#page-ab-clinic .sub-item picture { flex: 1; border-radius: 3rem; overflow: hidden; } 



@media (min-width: 1025px) and (max-width: 1280px){
 #page-signature .sub-item { padding: 0; } 
 }

 @media (max-width: 1024px){
 #page-safety-auth-system .safety-auth-system-list { width: 100%; } 
 #page-infection-prevention .infection-prevention-list { width: 100%; } 
 }
@media (min-width: 769px) and (max-width: 1024px){
 #page-signature .sub-item { padding: 0; } 
 }
@media (max-width: 768px){

 #page-signature { padding-bottom: 10rem; } 
 #page-signature .sub-item { padding: 0; flex-direction: column; align-items: flex-start; } 
 #page-signature .signature-list { max-width: 100%; min-width: 30rem; } 
 #page-signature .signature-list ul { gap: 1rem 2rem; padding-bottom: 0; } 
 #page-signature .signature-list ul li .signature-title { gap: 1rem; padding: 2rem 3rem; } 
 #page-signature .signature-list ul li h3 { font-size: 2rem; } 

 #page-signature .sub-item .sub-item-title { width: 100%; text-align: center; } 
 #page-anesthesia-pain-specialist .sub-item { flex-direction: column; gap: 2rem; } 
 #page-anesthesia-pain-specialist .sub-item .sub-item-title { text-align: center; } 
 #page-anesthesia-pain-specialist .sub-item picture { border-radius: 2rem; } 

 #page-safety-auth-system .safety-auth-system-list { grid-template-columns: repeat(2, 1fr); } 
 #page-infection-prevention .infection-prevention-list { grid-template-columns: repeat(1, 1fr); } 
 
 #page-ab-clinic .sub-item { flex-direction: column; gap: 2rem; } 
 #page-ab-clinic .sub-item .sub-item-title { text-align: center; } 
 #page-ab-clinic .sub-item picture { border-radius: 2rem; } 
}