/* reset */
html {font-size: 15px}
html, body {margin: 0; padding: 0;}
h1, h2, h3, h4, h5, h6, p, a, span, em, strong, del, s, b, blockquote, br, i, u, dl, dt, dd, table, tr, thead, tbody, tfoot, th, td, img, object, form, fieldset, label, input, textarea, select, option, button, header, main, section, aside, footer, nav, article, div, ol, ul, li, pre {padding: 0; margin: 0; letter-spacing: -0.01rem; line-height: 1; font-weight: normal; font-size: 1rem; color:#333; box-sizing: border-box; word-break: keep-all;}

/* 태그속성 지우기 */
a, del, s, u {text-decoration: none;}
em, i {font-style: normal}
ol, ul, li {list-style: none;}
table, tr, td {border-collapse: unset;}
input {border:0; -webkit-appearance: none; -moz-appearance: none; appearance: none; caret-color: #666;}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {-webkit-appearance: none; -moz-appearance: none; appearance: none;}
input[type='password']::-ms-reveal,
input[type='password']::-ms-clear {display: none;}
input[type='date'] {background: #fff}
input::-ms-clear {display: none;}
select {-webkit-appearance: none; -moz-appearance: none; appearance: none;}
select::-ms-expand {display: none;}
button {cursor: pointer; background: none; border: 0;}
pre {white-space: pre-line;}

/* 클래스 속성 */
.off {display: none !important;}

/* 반응형 */
@media screen and (max-width: 767px) {
    html {font-size: 10px}
}



#wrap {
  max-width: 768px;
  margin: 0 auto;
}

img {
  width: 100%;
  margin-bottom: 3rem;
  border-radius: .5rem;
  box-shadow: rgba(0, 0, 0, 0.2) 1.95px 1.95px 2.6px;
}

/* HEADER */
header {
  padding: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffe6eb;
}
header a {
  display: block;
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: -.1rem;
}

/* MAIN */

main .item ul li {
  border: 1px solid #ddd;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  padding: 40px 20px 0 ;
  box-sizing:border-box
}
main .item:not(:last-of-type) {
  margin-bottom: 2rem;
}
main .item .title_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20rem;
  position: relative;
}
main .item .title_wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #333;
  opacity: 0.7;
}
main .item .title_wrap h2 {
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: -.1rem;
  white-space: nowrap;
  color: #fff;
  z-index: 99;
  text-align: center;
  line-height: 1.4;
}
main .item .content_wrap {
  padding: 3rem 2rem;
}
main .item ul li:not(:last-child) {
  margin-bottom: 3rem;
}
main .item ul li .title {
  font-size: 2.5rem;
  font-weight: 600;
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 2.5rem;
}
main .item ul li .title span {position:relative;
    font-size: 2.2rem;
    font-weight: 600;
    padding: 0 1rem;
    margin-bottom: 2.5rem;}
main .item ul li .title span::before {
    content: "";
    height: 50%;
    background: #ff6e8a80;
    position: absolute;
    width: 100%;
    top: 50%;
    z-index: -1;
    left: 0;
}
main .item ul li .exp {
  font-size: 1.8rem;
  line-height: 1.6;
  margin-bottom:2rem
}

main .item.mg2 img {
  margin-bottom: 2rem;
}
.before_p .exp {position:relative; padding-left:30px}
.before_p .exp::before{content:'-';position:absolute; top:0; left:0}

/* FOOTER */
footer {
  padding: 4rem 2rem;
  background: #666;
}
footer p {
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.6;
  text-align: center;
}