*{font-family: "Montserrat", sans-serif;  font-optical-sizing: auto;font-style: normal;box-sizing: border-box;}
.wrapper{ width: 100%;max-width: 1200px;margin: 0 auto;}

.header{ display: flex;flex-direction: column;align-items: center;justify-content: center; width: 100%;max-width: 1200px; position: relative;}
.header h1{ background-image: url('../images/exocobiod_hdr.png'); background-position: top -20px center; background-size: cover; background-repeat: no-repeat; width: 100%; max-width: 1200px; height: 670px;}

.header .gnbWrap{width: 100%; position: absolute; bottom: 0;border-bottom: 1px solid #F0F0F0;}

.header .gnbWrap #gnb{width: 100%;display: flex;align-items: center;justify-content: space-between;text-align: center;}

.header .gnbWrap #gnb li{width: 25%;height: 80px;display: flex;align-items: center;justify-content: center;box-shadow: inset 0px 3px 6px #00000029;background-color: #B1B1B1;}
.header .gnbWrap #gnb li:first-child{border-radius: 30px 0 0 0;}
.header .gnbWrap #gnb li:last-child{border-radius: 0 30px 0 0;}
.header .gnbWrap #gnb li:not(:last-child){border-right: 1px solid #F0F0F0;}
.header .gnbWrap #gnb li a {text-decoration: none; color: #FFFFFF;font-weight: 600;font-size: 1.5rem;width: 100%;display: flex;height: 100%;   align-items: center;justify-content: center;}

.header .gnbWrap #gnb li.on{box-shadow: none;background-color: #FFFFFF;}
.header .gnbWrap #gnb li.on a{color: #6C1A86;}

.hdr_login_btn{position: absolute; background-color: #FFFFFF; border: 1px solid #CB73DD; color: #CB73DD; font-weight: 600; font-size: 24px;padding: 12px 32px;box-shadow: 1px 1px 5px #C292C696;border-radius: 28px;bottom: 106px; right: 30px;}

/** home **/
.home_wrap{max-width: 1200px; width: 100%;margin: 0 auto;}
.home_wrap .wrap{display: grid;grid-template-columns: 20% 1fr;}
.date_wrap, .program_wrap{padding-top: 58px;}
.date_wrap{border-right: 1px solid #6A6A6A;width: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;  position: relative;}
.date_wrap.purple{color: #6C1A86;}
.date_wrap.green{color: #034E55;}
.date_wrap p{font-size: 1.75rem;}
.date_wrap p:last-child{font-weight: 600;}
.date_wrap::after {
  content: '';
  position: absolute;
  right: -9px; /* 선 기준으로 오른쪽에 위치 (조정 가능) */
  top: calc(50% + 29px);
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  border: 1px solid #6C1A86;
  border-radius: 50%;
  background-color: white;
  z-index: 2;
}
.home_wrap .wrap:nth-of-type(5) .date_wrap::before{
  content:'';
  position:absolute;
  right: -1px;                 /* border-right 위치와 맞춤 */
  top: calc(50% + 29px + 9px); /* 점 중심 + 반지름(15/2=7.5 ≈ 8~9px) 이후부터 */
  bottom: 0;
  width: 3px;                   /* 1px border를 충분히 덮도록 살짝 두껍게 */
  background: #fff;             /* 배경색(페이지 배경)과 동일하게 */
  z-index: 3;
}


.date_wrap.green::after{  border: 1px solid #1A9699;} 
.program_wrap{ margin-left: 32px;position: relative;}
.program{width: 95%;display: flex; align-items: center; justify-content: space-between; padding: 16px 32px 16px 24px;border-radius: 10px;color: #200C3D; margin-bottom: 12px;}
.program > img{max-width: 130px;width: 25%;}
.program h4{font-size: 2.188rem; font-weight: 600;}
.program p{font-size: 1.563rem;}
.program_wrap .program_and{max-width: 52px; width: 10%; position: absolute;top: calc(50% + 29px);left: 32px; transform: translateY(-50%);}
.program.purple{background-color: #faf4fc;box-shadow: 3px 3px 5px #AF88BA15;}
.program.green{background-color: #edfefe;box-shadow: 3px 3px 5px #77D5C220;}

.map_area{border-radius: 20px; border: 1px solid #AE57B5; width: 92%; height: 375px;margin: 58px auto;}
  /* 라벨 공통 스타일 */
  .map-label{ font-weight:700; font-size:16px; line-height:1.2; background:rgba(255,255,255,.92); padding:4px 8px;  border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.15);white-space:nowrap; pointer-events:none; }
  /* 마커와 겹치지 않도록 우상향 이동 */
  .map-label.offset{ transform:translate(14px, -48px); }    /* x=오른쪽, y=위쪽 */
  .map-label.below  { transform: translate(0px, 24px); }

/** 로그인 **/
.login_box{width: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;}  

.login_box > input{width: 600px; height: 80px; border-radius: 300px; padding: 24px 60px;border: 1px solid #AAAAAA;font-size: 26px;margin-top: 240px;}
.login_box > input:focus{outline: 1px solid #6C1A86;}

.login_box > p{margin-top: 16px;color: #6A6A6A;font-size: 18px;}

.login_box > button{margin-top: 68px;border-radius: 300px;font-size: 38px;background-color: #6C1A86;font-weight: 600; color: #FFFFFF;width: 270px; height: 80px;margin-bottom: 240px;}

@media screen and (max-width:830px) {
  .header h1{height: 350px;}
  .header .gnbWrap #gnb li a{font-size: 1rem;}
  .header .gnbWrap #gnb li, .login_box > button, .login_box > input{height: 48px;}
  .header .gnbWrap #gnb li:first-child{border-radius: 16px 0 0 0;}
  .header .gnbWrap #gnb li:last-child{border-radius: 0 16px 0 0;}
  .hdr_login_btn{padding: 8px 24px;bottom: 64px;right: 16px;}

  .date_wrap p,.program p{font-size: 1rem;}
  .program h4{font-size: 1.4rem;}
  .date_wrap::after{width: 10px;height: 10px;right: -7px;}
  .map_area{height: 310px;}

  .login_box > input{width: 50%;font-size: 20px;}
  .login_box > button{width: 25%; font-size: 32px;}
}

@media screen and (max-width:486px) {
  .header .gnbWrap #gnb li a{font-size: 14px;}
  .header .gnbWrap #gnb li{height: 56px;letter-spacing: -1px;}
  .hdr_login_btn{font-size: 16px;}

  .program_wrap{margin-left: 16px; margin-right: 12px;}
  .program p{font-size: 0.625rem;}
  .date_wrap p{font-size: 0.9rem;}
  .program h4{font-size: 1rem;}
  .program_wrap .program_and{left: 16px;top: calc(50% + 12px);}
  .date_wrap::after{top: calc(50% + 12px);}
  .home_wrap .wrap:nth-of-type(5) .date_wrap::before{top: calc(50% + 9px + 9px);}
  .program{padding: 16px;}
  .date_wrap, .program_wrap {padding-top: 24px;}
  .map_area{height: 300px;margin: 24px auto;}
  .map-label{ font-size:12px; padding:3px 6px; }
  .map-label.offset{ transform:translate(10px, calc(-100% - 18px)); }

  .login_box > input{width: 80%;margin-top: 100px;}
  .login_box > button{width: 60%; font-size: 24px;}
  .login_box > p{font-size: 12px; padding: 0 16px;}
}