header {width: 100%;}
.inner{width: calc(100% - 70px); max-width: 1480px; margin: 0 auto; display: flex; align-items: center;}
header .inner { justify-content: space-between;  padding: 18px 0;}
header h1 {max-width: 180px;}
header nav a {color: var(--cr-bl1); font-size: 17px; font-weight: 800;}

footer {background: #d8d7e4;}
footer .inner { padding: 30px 0 35px 0; align-items: flex-start; gap: 30px; }
footer .inner > div:first-of-type { width:140px;}
footer .inner > div:first-of-type img { width: 100%;  filter: brightness(0) invert(0.4) ; opacity: 0.7; }
footer .companyInfo p { color: #85839a; font-size: 15px; line-height: 160%;}
footer .companyInfo p strong {font-size: 20px; font-weight: 700;}
footer .companyInfo p em::before {content: 'I'; padding: 0 8px; font-size: 13px;font-weight: 100; opacity: 0.4;  }
footer .companyInfo p b::after {content: ':'; padding: 0 3px;}
footer .companyInfo p.copy {font-size: 13px; font-weight: 400; opacity: 0.9;}
.Web.main section{ min-height: 0; }



.Web section {width: 100%; min-height: calc(100vh - 240px); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; max-width: 1920px;}
.Web h2 {display: block; text-align: center; width: 100%; padding: 10px 0 24px 0; font-size: 48px; font-weight: 800;}
.Web form[name="login"] {display: flex; flex-direction: column; gap: 8px; max-width: 450px; width: 100%;}
.Web form[name="login"] > input,
.Web form[name="login"] > button,
.Web form[name="login"] > a { width: 100%; padding: 10px 24px; border-radius: 4px; border: 1px solid #ccc; box-shadow: none; height: 62px; display: flex; align-items: center; font-weight: 500; font-size: 16px;}
.Web form[name="login"] > a, 
.Web form[name="login"] > input[type="submit"] { cursor: pointer; text-align: center; justify-content: center; transition: 0.3s;}
.Web form[name="login"] > input[type="submit"] { background: var(--cr-sp1);  color: var(--cr-wh1); }
.Web form[name="login"] > input[type="submit"]:hover { background: var(--cr-sp1-b); color: var(--cr-wh1); }
.Web form[name="login"] > a {border: 2px solid #bcbcbc; color: var(--cr-bl);}
.Web form[name="login"] > a:hover { background: var(--cr-bl2); color: var(--cr-wh1); border-color:transparent;}

.in {max-width: 1140px; margin: 0 auto; width: 100%; text-align: center; }
.mainVis {width: 100%; background: url('/assets/images/mainBg.jpg') no-repeat center center; position: relative;}
.mainVis::before {content: ''; width: 100%; height: 100%; top: 0; left:0; background: #000; opacity: 0.6; display: block; position: absolute; }
.mainVis .in {min-height: 480px;   display: flex; justify-content: center; align-items: center; flex-direction: column; color: #fff;}
.mainVis > * {z-index: 2; position: relative; color: #fff;}
.mainVis h2 {text-align: center; padding-bottom: 0; line-height: 0; }
.mainVis h2 img {margin: 0 auto; filter: brightness(0) invert(1); width: 100%; max-width: 320px; margin-bottom: 12px; }
.mainVis h2 b {font-size: 20px; font-weight: 500; opacity: 0.95;}
.mainVis strong { display: block; margin: 80px auto 14px; font-size: 26px; color: #f7f4f9a8; font-weight: 400;}
.mainVis strong b {color: #00d2ff; font-weight: 600;}
a.goMedi { background: var(--cr-sp1); color: #cac6ff; text-align: center; font-size: 17px; padding: 14px 30px; border-radius: 8px; display: inline-block;}
a.goMedi > b {color: #fff; font-weight: 600;}
a.goMedi:hover { background: var(--cr-sp1-l)}

.mainSec {padding: 60px 0 80px 0;}
.mainSec h2  { display: flex; flex-direction: column; gap: 12px; width: 100%;}
.mainSec h2 b {font-size: 32px; text-align: center;  line-height: 1;}
.mainSec h2 span {font-size: 18px; line-height: 1; font-weight: 400; color: #676767;}
.mainSec h3 {line-height: 1; display: block; font-size: 28px; margin-bottom: 10px;}
.mainSec h3 b {font-weight: 600; color: var(--cr-sp1-b);}

.acoWrap {display: flex;  border-radius: 15px; overflow: hidden; border: 1px solid #ccc; align-items: flex-start} 
.acoWrap > .box {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 50%; }
.acoWrap > .box > .subTit { display: flex; flex-direction: column; justify-content: center; width: 100%; padding: 22px 25px 14px 25px; text-align: center; gap:10px;}
.acoWrap > .box:nth-of-type(1) > .subTit {background: #c8b5ff;}
.acoWrap > .box:nth-of-type(2) > .subTit {background: #90a8ff;}

.acoWrap > .box > .subTit strong { font-size: 22px; font-weight: 600; }
.acoWrap > .box > .subTit span { opacity: 0.7; line-height: 130%;}
.acoWrap > .box:nth-of-type(2) {border-left: 1px solid #ccc;}
.btnbox {display: flex;flex-direction: column; width: 100%; padding: 25px 40px; gap: 15px 10px;}
.btnbox button {font-size: 16px; padding: 0 0 0 20px; text-align: left; color: var(--cr-blue); position: relative; line-height: 138%; display: flex;}
.btnbox button::before {content: '\f152'; font: var(--fa-font-regular);  position: absolute; top:2px; left: 0; }
.btnbox button:hover {color: var(--cr-sp1);}

.desc {padding: 20px 0; display: flex; flex-direction: column; justify-content: center; text-align: center; background: #e8e9e9; border-radius: 15px; margin:  10px auto 28px ;}
.desc p {padding: 5px 0; color: #343434;}


.join  {padding: 80px 0;}
.join h2 {text-align: center; font-size: 32px; padding-bottom: 18px; font-weight: 600; }
.policy {display: flex; flex-wrap: wrap; border: 1px solid #ccc; border-radius: 12px;  margin: 10px auto 0; transition: 0.8s; padding: 20px var(--box-gap); max-width: 650px;  padding: 25px 30px; align-items: center; }
.policy > b {flex: 1; margin-bottom: 10px; display: flex; font-size: 18px; font-weight: 600; }
.policy > button {width: 80px; height: 32px; background:  var(--cr-sp1); color: #fff;display: flex; justify-content: center; align-items: center ; border-radius: 5px;  margin-bottom: 10px; font-size: 14px;}
.policy > label {width: 100%; border-top: 1px solid #ccc; padding-top: 16px; display: flex; gap: 5px;}
.policy > label span {color: #343434;}

#join_hospital {display: flex; flex-direction: column; border: 1px solid #ccc; border-radius: 12px;  margin: 10px auto 0; transition: 0.8s; padding: 20px var(--box-gap); max-width: 650px; padding: 25px 30px;} 
#join_hospital > div {display: flex; padding: 12px 0; align-items: center; }
#join_hospital > div > b {font-size: 16px; font-weight: 500; color: var(--cr-bl2); min-width: 160px; padding-right: 16px;}
#join_hospital > div > span {font-size: 16px; font-weight: 600; color: var(--cr-bl1); }
#join_hospital > div input[type="text"],
#join_hospital > div input[type="number"],
#join_hospital > div input[type="date"],
#join_hospital> div input[type="password"] { border: 1px solid #ccc; border-radius: 100px; padding: 0 25px; font-size: 16px; height: 50px; line-height: 50px; color: var(--cr-sp1-b); width: 400px;}
#join_hospital > div input[type="text"]:focus,
#join_hospital > div input[type="date"]:focus,
#join_hospital > div input[type="password"]:focus {background: var(--cr-bg1); color: var(--cr-sp1-b); border-color: var(--cr-sp1-l);}

div.formBtnWrap {display: flex; justify-content: center; gap: 10px;}
div.formBtnWrap button {all: unset; border-radius: 100px; padding: 0 30px; font-size: 16px; height: 50px; line-height: 50px; background: #9a9a9a;  color: var(--cr-wh1); text-align: center; max-width: 200px; width: 100%; cursor: pointer; transition: 0.3s;}
div.formBtnWrap button[type="submit"] { background: var(--cr-sp1);  margin: 0;}
div.formBtnWrap button:hover {background: #787878;}
div.formBtnWrap button[type="submit"]:hover {background: var(--cr-sp1-b);}


#join_hospital input[type="submit"],
#join_hospital  button[type="submit"] {all: unset; border-radius: 100px; padding: 0 30px; font-size: 16px; height: 50px; line-height: 50px; background: var(--cr-sp1);  color: var(--cr-wh1); text-align: center; max-width: 200px; margin: 16px auto 0; width: 100%; cursor: pointer; transition: 0.3s;}
#join_hospital  input[type="submit"]:hover,
#join_hospital  button[type="submit"]:hover {background: var(--cr-sp1-b);}

#join_hospital  .selLable { display: flex; border: 1px solid #ccc; border-radius: 100px; padding: 0 40px 0 25px; position: relative; width: 400px; }
#join_hospital  .selLable::after {content: '\f0d7'; font:var(--fa-font-solid); top:50%; position: absolute; right:25px; transform: translateY(-50%); font-size: 13px; color: var(--cr-bl2); transition: 0.3s;}
#join_hospital  .selLable > select { border: 0; width: 100%; height: 50px; cursor: pointer; background-color: transparent; transition: 0.3s;  color: var(--cr-sp1-b);}
#join_hospital .selLable option {color: var(--cr-bl1); font-size: 15px; }
#join_hospital  .selLable:has(select:focus) {background: var(--cr-bg1); color: var(--cr-sp1-b); border-color: var(--cr-sp1-l);}

#join_hospital  > .address {align-items: flex-start; }
#join_hospital > .address > b { padding-top: 18px;}
#join_hospital  > .id > div,
#join_hospital  > .address > div {display: flex; flex-direction: column; gap: 8px; }
#join_hospital  > .id > div label,
#join_hospital  > .address > div label  {display: flex; gap: 8px;}
#join_hospital  > .id > div label input,
#join_hospital  > .address > div label input {width: 242px; }
#join_hospital  > .id > div label button,
#join_hospital  > .address > div label button {display: flex; width: 150px; height:50px; justify-content: center; align-items: center; background: #5f5f5f; color: var(--cr-wh1); border-radius: 100px; font-size: 15px; }

.modal {  display: none; position: fixed; justify-content: center; align-items: center ; z-index: 99;left: 0; top: 0; width: 100%;  height: 100%; overflow: auto;  background-color: rgba(0,0,0,0.8); }
.modal-content { background-color: #fefefe; margin: 0 auto;  padding: 20px; border: 1px solid #888; width: 94vw; max-width: 737px; max-height: 90vh; overflow-y: auto; border-radius: 5px; }
.modal-content h2 {font-weight: 600; padding-bottom: 15px; color: var(--cr-sp1); font-size: 20px; text-align: left;}
.modal-content pre {font-size: 15px; color: var(--cr-bl2); line-height: 168%;}
.modal-content pre strong {color: var(--cr-bl1); font-weight: 500; display: inline-block; padding-bottom: 10px; font-size: 20px;}
.modal-content pre b {color: var(--cr-bl1); font-weight: 500;}
#modalContent img {width: 100%;}
.close-button { color: #aaa; float: right; font-size: 28px; font-weight: bold; line-height: 0;}
.modalBtmBtn { width: 100%; max-width: 220px; display: flex; justify-content: center; align-items: center; margin: 20px auto 0; background: var(--cr-sp1); color: #fff; height: 44px; font-weight: 600; border-radius: 10px; }
.close-button:hover,
.close-button:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
@media (max-width: 1180px){
	.in {width: 100%; padding: 0 30px; }
}

@media (max-width: 991px) {
	.mainVis strong {line-height: 130%;}
	.mainVis strong b {display: block;}
	.acoWrap {display: flex; flex-direction: column;}
	.acoWrap > .box {width: 100%;}
	.btnbox {padding: 20px;}
	.desc {padding: 20px; line-height: 130%;}
	a.goMedi {line-height: 140%;}
	.mainSec h3 {line-height: 130%;}
}