/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0}
fieldset,img {border:0 none}
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
input,select,textarea,button {font-size:100%;vertical-align:middle}
button {border:0 none;background-color:transparent;cursor:pointer}
table {border-collapse:collapse;border-spacing:0}
body {-webkit-text-size-adjust:none} /* 뷰표트 변환시 폰트크기 자동확대 방지 */
input[type='text'],input[type='password'],input[type='submit'],input[type='search'] {-webkit-appearance:none; border-radius:0}
input:checked[type='checkbox'] {background-color:#666; -webkit-appearance:checkbox}
button,input[type='button'],input[type='submit'],input[type='reset'],input[type='file'] {-webkit-appearance:button; border-radius:0}
input[type='search']::-webkit-search-cancel-button {-webkit-appearance:none}
body {background:#fff}
body,th,td,input,select,textarea,button {font-size:14px;line-height:1.5;font-family:'Malgun Gothic', '맑은 고딕', sans-serif;color:#333} /* color값은 디자인가이드에 맞게사용 */
a {color:#333;text-decoration:none}
a:active, a:hover {text-decoration:none}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}
body{
    background:#252a4c url(../images/index.png) no-repeat;
    background-size: cover;
    margin: 0;
    padding: 0;
}

.main-box {
    width: 100%;
    margin: 0 auto; 
    margin-top: 100px;
    position: relative;
  }
  
  .link-edit {
    position: absolute;
    left: 444px;
    top:22px;
    font-size: 34px;
  }
  
  
  .main-button-box {
    width: 60%;
    margin: 0 auto;
    margin-top: 60px;
  }
  
  
  a:hover{
    opacity: 0.7;
  }
.header-text{
      text-align: center;
      position: relative;
    }
    .header-text img{
      display: inline-block;
      max-width: 100%;
      height: auto;
    }
    .header-text .link-edit{
      top: 50%;
      left: 38% !important;
      transform: translate(0, -50%);
      margin-top: -4px;
    }

    .content-1,
    .content-2,
    .content-3,
    .content-4,
    .content-5,
    .content-6,
    .content-7,
    .content-8{
      width: auto;
      text-align: center;
      margin: 0 auto;
      padding: 0 15px;
      font-size: 30px;
    }
    .content-1,
    .content-3,
    .content-8{
      /* max-width: 600px; */
    }
    .content-2,
    .content-5{
      /* max-width: 360px; */
    }
    .content-6{
      max-width: 720px;
      margin-top: 35px;
    }
    .main-button-box{
      max-width: 720px;
      width: auto;
      text-align: center;
    }
    ul.buttons{
      list-style-type: none;
      margin: 40px 0 0 0;
      padding: 0;
      text-align: center;
    }
    ul.buttons li{
      display: inline-block;
      vertical-align: middle;
      margin: 0 10px;
    }

    ul.buttons2{
      list-style-type: none;
      margin: 40px 0 0 0;
      padding: 0;
      text-align: center;
    }
    ul.buttons2 li{
      display: inline-block;
      vertical-align: middle;
    
    }
    /* @media screen and (max-width: 1024px) {
      .header-text .link-edit{
        font-size: 3vw !important;
      }
    

      .content-1{
        text-align: center;
        margin-bottom: 25px;
      }
      .content-1 img{
        margin: 0 auto;
        /* max-width: 100%; 
        height: auto;
        display: block;
        margin-bottom: 10px;
      }
    } */

    @media screen and (max-width: 768px) {
    .header-text, .content-1, .content-2,.buttons2,.buttons{
        width: 100%;
    }
    .main-box{
      margin-top: 20px;
    }
    img{
      width: 80%;
  }
    .content-1{
        margin: 20px 0;
    }
    .content-1,.buttons2{
        margin: 10px 0 !important;
    }
    ul.buttons {
      margin: 10px 0 0 0;
  }
      .main-button-box .xs-col-4{
        display: block;
        margin: 0 0 10px 0 !important;
        text-align: center;
        display: block;
        width: 100%;
      }
      .main-button-box img{
        max-width: 100%;
        height: auto;
        vertical-align: middle;
      }


      .content-1,
      .content-2,
      .content-3,
      .content-4,
      .content-5,
      .content-6,
      .content-7,
      .content-8{
        font-size: 28px;
      }
      .content-1,
    .content-2,
    .content-3,
    .content-4,
    .content-5,
    .content-6,
    .content-7,
    .content-8{
     
      padding: 0;
      font-size: 30px;
    }

    }

   

      @media screen and (max-width: 600px) {
        .header-text, .content-1, .content-2,.content-3,.buttons2,.buttons{
            width: 100%;
            
        }
    }

    @media screen and (max-width: 450px) {
        .header-text, .content-1, .content-2,.content-3,.buttons2,.buttons{
          width: 100%;
        }
  
    }

    @media screen and (max-width: 360px) {
        .header-text, .content-1, .content-2,.content-3,.buttons2,.buttons{
          width: 100%;
        }
  
    }