@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");

html, body, div, span, h1, h2, h3, h4, h5, p, a, img, ul, li, button { margin:0; padding:0; }
article, aside, footer, header, main, nav, section { display:block; }
body { font-family:'Pretendard','Noto Sans KR','Malgun Gothic',sans-serif; color:#222; font-size:12px; line-height:1.4; }
img { border:0; vertical-align:top; max-width:100%; }
ul { list-style:none; }
em { font-style:normal; }
a { text-decoration:none; color:inherit; }
button { margin:0; padding:0; border:0; background:none; font-family:inherit; cursor:pointer; }
h1,h2,h3,h4,h5 { font-size:inherit; }

.wrap { position:relative; overflow:hidden; width:100%; }
.inner { position:relative; max-width:390px; margin:0 auto; padding:0 20px; box-sizing:border-box; }
.visual .inner { overflow:visible; }

.header { position:absolute; top:0; right:0; left:0; z-index:10; padding:0 20px; box-sizing:border-box; }
.header-top { max-width:390px; height:47px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; }
.header-logo { width:176px; }
.header-logo img { width:100%; }
.menu {
  width:34px; height:33px;
  background:url(/images/mo/menu.png) no-repeat 50% 50% / 34px auto;
}
.nav { display:none; max-width:390px; margin:0 auto; }
.nav ul { padding:14px 0 19px; color:#097939; font-size:16px; }
.nav li {
  border-top:1px solid #E6E6E6;
  background:url(/images/mo/ico_arr.png) no-repeat right 10px top 50% / 20px auto;
  line-height:59px; font-weight:700;
}
.nav li:first-child { border-top:0; }
.nav li button, .nav li a { display:block; width:100%; text-align:left; font-size:16px; font-weight:700; color:#097939; }

.nav-is-on { overflow:hidden; }
.nav-is-on .header { background:#fff; }
.nav-is-on .header:after { content:''; position:fixed; top:320px; right:0; bottom:0; left:0; background:rgba(0,0,0,.8); z-index:1; }
.nav-is-on .nav { display:block; }
.nav-is-on .menu { background-image:url(/images/mo/menu_close.png); }
.nav-is-on .visual { background-color:#fff; }

.visual { position:relative; overflow:hidden; height:480px; background:linear-gradient(#F5FFEB, #E9FFF6); text-align:center; }
.visual .inner { height:100%; padding-top:77px; box-sizing:border-box; }
.visual-char {
  position:absolute;
  left:50%;
  bottom:78px;
  z-index:0;
  width:min(72vw, 300px);
  height:auto;
  transform:translateX(-50%);
  pointer-events:none;
  object-fit:contain;
  object-position:center bottom;
}
.visual-char-pc { display:none; }
.visual-tit { position:relative; z-index:1; line-height:1.1; font-size:38px; letter-spacing:-1px; font-weight:700; }
.visual-tit span { color:#00854A; }
.visual-btn {
  position:absolute; z-index:2; bottom:1%; left:50%; transform:translate(-50%,-50%);
  display:block; width:90%; max-width:350px; padding:14px 30px 14px 10px;
  background:linear-gradient(to right, #007441 57%, #23A051); border-radius:6px; box-sizing:border-box;
}
.visual-btn span { display:inline-block; line-height:24px; font-size:20px; font-weight:500; color:#fff; letter-spacing:-0.4px; }
.visual-btn-arrow { display:inline-block; width:24px; margin-left:13px; vertical-align:top; }
.visual-btn-arrow img { position:relative; top:5px; }

.bnr-main { display:none; }

.main-top { padding:40px 0 20px; background:linear-gradient(to left, #00855D, #20AB61); text-align:center; }
.main-top-tit { line-height:1.2; margin-bottom:4px; font-size:25px; font-weight:500; color:#fff; letter-spacing:-0.4px; }
.main-top-tit span { color:#FCF563; }
.main-top ul { font-size:0; }
.main-top li { display:inline-block; width:50%; line-height:1.25; box-sizing:border-box; font-size:16px; color:#fff; vertical-align:top; }
.main-top li img { display:block; width:140px; margin:0 auto 4px; }

.main { padding:70px 0 15px; text-align:center; }
.main-tit { line-height:1.2; margin-bottom:40px; font-size:38px; font-weight:800; letter-spacing:-0.8px; }
.main-tit span { color:#00854A; }
.main ul { width:100%; font-size:0; }
.main li { display:inline-block; width:100%; margin-bottom:50px; }
.main-img { display:block; height:210px; margin-bottom:15px; border:1px solid rgba(0,133,74,0.15); border-radius:10px; background:#F5F5F5; overflow:hidden; }
.main-img img { width:100%; height:100%; object-fit:cover; }
.main-txt { display:block; line-height:1.3; font-size:18px; font-weight:700; }
.main-txt span { color:#00854A; }

.main-bottom { display:none; }

.youneed { padding:24px 0 120px; font-size:14px; color:#777; letter-spacing:-.7px; line-height:25px; text-align:left; }
.youneed-tit { margin-top:18px; color:#000; font-size:14px; font-weight:600; }
.youneed li { position:relative; margin-top:5px; padding-left:10px; }
.youneed li::after { content:'·'; position:absolute; top:0; left:0; }
.img-logo-kdic { margin-top:18px; width:160px; }

.lypop-wrap { display:none; position:fixed; inset:0; z-index:20; background:rgba(0,0,0,0.5); }
.lypop-wrap.is-on { display:block; }
.lypop {
  display:none; position:absolute; top:50%; left:50%; width:90%; max-width:350px;
  padding:40px 20px 40px; border-radius:10px; box-sizing:border-box; background:#fff;
  transform:translate(-50%,-50%);
}
.lypop.is-on { display:block; }
.lypop-tit { margin-top:9px; color:#00854A; font-size:27px; font-weight:700; }
.lypop-txt { margin-top:8px; color:#000; font-size:16px; font-weight:700; line-height:26px; }
.lypop-close { position:absolute; top:-35px; right:5px; }

@media (min-width:768px) {
  .inner { width:1020px; max-width:1020px; padding:0; }
  .header { left:50%; transform:translateX(-50%); padding:0; width:1020px; }
  .header-top { max-width:none; height:70px; }
  .header-logo { width:auto; float:left; }
  .menu { display:none; }
  .nav { display:block; float:right; max-width:none; }
  .nav ul { padding:0; }
  .nav li {
    float:left; height:70px; margin-left:40px; border:0; background:none; line-height:70px;
  }
  .nav li button, .nav li a { height:100%; line-height:70px; font-size:16px; font-weight:500; color:#222; }
  .nav-is-on .header { background:transparent; }
  .nav-is-on .header:after { display:none; }

  .visual {
    height:495px; padding-top:120px; text-align:left;
    background:linear-gradient(#F5FFEB, #E9FFF6);
    box-sizing:border-box;
  }
  .visual-char-mo { display:none; }
  .visual-char-pc {
    display:block;
    left:50%;
    right:auto;
    bottom:0;
    width:auto;
    height:400px;
    max-width:none;
    transform:translateX(-40px);
    object-fit:contain;
    object-position:left bottom;
  }
  .visual .inner { padding-top:0; }
  .visual-tit { font-size:58px; letter-spacing:-0.5px; }
  .visual-btn {
    position:static; transform:none; margin-top:30px; width:400px; max-width:400px;
    height:78px; padding:0 60px 0 0; border-radius:10px;
    background:url(/images/pc/arrow1.png) no-repeat 90% 45%, linear-gradient(to right, #007441 57%, #23A051);
    line-height:78px; text-align:center;
  }
  .visual-btn span { font-size:24px; font-weight:700; letter-spacing:0; line-height:78px; }
  .visual-btn-arrow { display:none; }

  .main-top { padding:48px 0 15px; }
  .main-top-tit { line-height:1; margin-bottom:45px; font-size:36px; font-weight:700; }
  .main-top li { width:25%; height:165px; font-size:18px; }
  .main-top li img { width:auto; }

  .main { padding:100px 0; }
  .main-tit { line-height:1; margin-bottom:50px; font-size:58px; font-weight:700; letter-spacing:0; }
  .main li { width:calc((100% - 60px)/2); margin-bottom:60px; }
  .main li:nth-of-type(2n) { margin-left:60px; }
  .main-img { height:320px; margin-bottom:20px; }
  .main-txt { font-size:20px; }

  .main-bottom {
    display:block; height:570px; padding-top:47px;
    background:linear-gradient(#F5FFEB, #E9FFF6);
    border-top:1px solid rgba(0,133,74,0.15); border-bottom:1px solid rgba(0,133,74,0.15);
    box-sizing:border-box; text-align:center;
  }
  .main-bottom .inner { height:100%; background:url(/images/pc/bg_mainbottom1.png) no-repeat center bottom; }
  .main-bottom-subtit { margin-bottom:10px; font-size:20px; font-weight:700; }
  .main-bottom-tit { line-height:1.1; font-size:58px; font-weight:700; }
  .main-bottom-tit span { display:block; color:#00854A; }
  .main-bottom-btn { padding-top:235px; }
  .main-bottom-btn span {
    display:block; width:400px; height:78px; line-height:80px; margin:0 auto; padding-right:60px;
    background:#F47820 url(/images/pc/arrow2.png) no-repeat 92% 48%;
    border-radius:10px; font-size:24px; font-weight:500; color:#fff; box-sizing:border-box;
  }

  .youneed { padding:42px 0 140px; color:#666; font-size:15px; letter-spacing:-.5px; }
  .youneed-tit { font-size:16px; }

  .lypop { width:460px; max-width:460px; padding:40px 36px 30px; }
  .lypop-tit { margin-top:11px; }
  .lypop-txt { font-size:18px; line-height:1.5; }
}