:root {
  --basicTop: 18px;
  --basicBottom: 6px;
  --border: #a9a8a9;
  --white: #ffffff;
  --trans: transparent;
  --black: #000000;
  --fontColor: #161616;
  --subColor: #8b8b8b;
  --btnColor: #00aeef;
  --btnColor2: #0081ef;
  --boxShadow: #0081ef4f;
  --reqColor: #d0011b;
  --font1: 0.8rem;
  --font2: 13px;
  --font3: 14px;
  --font4: 16px;
  --basicLet: -1px;
  --basicLh: 1.2;
}

h1 {
  margin-top: 50px;
  font-size: 24px;
  text-align: center;
}

/* // 공통 ------------------------------------------------------------------------------------------ */

#header .util .utilButton li {
  font-family: "Malgun Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 13px;
}

#header .util .utilButton a {
  font-family: "Malgun Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 13px;
}

#mymenu {
  height: 100%;
  background: transparent;
}
#mymenu .menu::after {
  content: '';
  display: block;
  width: 100%;
  height: calc(6800px - 20%);
  background: rgba(0,0,0,0.6);
  z-index: -1;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
}
#mymenu .menu .top_info,
#mymenu .menu .menu01 {width: 100%;}

h2 {font-size: 0.8rem;}

/* // 모바일 헤더 ------------------------------------------------------------------------------------------ */

.wrapper {
  margin: 0 auto;
  padding: 3px;
  width: 80rem;
  height: auto;
  font-family: 'Noto Sans KR', sans-serif;
}

.section2 {
  position: relative;
  margin: 100px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

/* // 레이아웃 ------------------------------------------------------------------------------------------ */

.section2 .listBox {
  border-top: 2px solid black;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.section2 .listBox > li {
  position: relative;
  margin: 0 auto;
  padding: 20px;
  border-bottom: 1px solid lightgray;
}


.listBox .contentBox .contImg img {
  max-width: 100%;
  width: 100%;
  height: auto;
  border: 1px solid #eeeeef;
}

.listBox .contentBox .contInfo .infoStep > span {
  margin: 15px 0 10px;
  padding: 4px 10px;
  display: inline-block;
  font-size: 14px;
  border: 2px solid #999;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}
.listBox .contentBox .contInfo .infoStep .stepTit {
  margin: 5px 0;
  text-align: left;
  font-size: 24px;
  font-weight: 400;
}
.listBox .contentBox .contInfo .infoStep li {
  margin-top: 10px;
}
.listBox .contentBox .contInfo .infoStep li strong {
  margin: 8px 0;
  display: inline-block;
  text-indent: 0;
  font-weight: 600;
}
.listBox .contentBox .contInfo .infoStep li p {
  word-wrap: break-word;
  word-break: keep-all;
  line-height: 1.2;
}
.listBox .contentBox .contImg {position: relative;}
.listBox .contentBox .contImg a {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 0;
  text-indent: -9999px;
}

/* PC (해상도 1024px)*/ 
@media screen and (max-width:1024px) {
  .wrapper {
    max-width: 1023px;
    width: 100%;
  }

  .descWrap { max-width: 250px; }
} 

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/ 
@media screen and (max-width:1023px) {
  .wrapper {
    max-width: 768px;
    width: 100%;
  }

  .section2 { width: 45rem; }

  .txtBox { margin: 30px auto; width: 30%;}
  .descBox {  margin: 0; width: 60%; }
  .descWrap { max-width: 18rem; }
  .schedule { margin-bottom: 40px; }

  #calendar tbody tr td { height: 100px; }
  #calendar tbody tr td > div { height: 100px; }

  .listBox .contentBox { flex-direction: column; }
  .listBox .contentBox .contImg { width: 100%; text-align: center; }
  .listBox .contentBox .contInfo { padding-left: 0; width: 100%; }

} 

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media screen and (max-width:767px) {
  .wrapper {
    max-width: 368px;
    width: 100%;
  }
  
  .section2 { 
    margin: 40px auto 0;
    width: 100%; 
  }
  
  .section2 .listBox {grid-template-columns: repeat(1, 1fr);}

  #calendar .week {height: 72px;}
  #calendar .week td,
  #calendar tbody tr td > div > p {font-size: 12px;}
  .present p::after,
  .present .selectDay::after, .future .selectDay::after,
  .future p::after {width: 28px; height: 28px;}
  
  .txtBox { margin: 10px auto; width: 30%;}
  .dayNum { font-size: 70px; }
  .dayTxt { font-size: 22px; }
  .descBox { padding-left: 2px; width: 60%; border-left: 1px dashed black;}
  .descWrap { font-size: 0.9rem; }
  .titTxt { 
    font-size: 0.9rem; 
    text-align: left;
  }
  .schedule { margin-bottom: 20px; }
  .schedule b,
  .schedule span { font-size: 0.8rem; }
  .linkBtn { 
    padding: 10px 15px; 
    font-size: 0.6rem; 
  }

  [class*='wsTime'] {display: block;}
  [class*='wsName'],
  [class*='hoName'] {
    height: 17px;
    font-size: 10px;
    white-space: pre-wrap;
    text-overflow: ellipsis;
  }

  .listBox .contentBox .contImg {margin-bottom: 10px;}
  .listBox .contentBox .contInfo .infoStep > span {
    padding: 4px 6px;
    font-size: 12px;

  }
  .listBox .contentBox .contInfo .infoStep .stepTit {
    font-size: 16px;
    word-break: keep-all;
  }
  .listBox .contentBox .contInfo .infoStep li strong,
  .listBox .contentBox .contInfo .infoStep li p,
  .listBox .contentBox .contInfo .infoStep li span {font-size: 12px;}
}