body, ul{margin: 0;}
ul{list-style-type: none;padding-left: 0;}
img {display: block;}
body {font-family: 'Noto Sans KR', sans-serif;}

  .hd_area {display: flex; height: 21.3333vw;width: 100%;}
  .hd_area > .logo {display: flex; width:auto;flex-shrink: 1;align-items: center;margin: 4vw;}
  .hd_area > .logo > img{width: 100%;}

  .idx_banner{position: relative;display: flex;flex-direction: column;}
  .idx_banner > .banner {display: flex;flex-direction: row;}
  .idx_banner > .banner > li, .idx_banner > .banner > li > a > img {width: 100%;}
  .idx_banner > p {position: absolute;bottom: 34vw;width: 100%;text-align: center;height:0;font-size: 3.7333vw;line-height: 6vw;color: #333333;font-weight: bold;}
  .idx_banner > p > span{font-size: 3vw;line-height: 6vw;color: #333333;font-weight: 700;}

  .idx_banner > a > .bottom_banner_link {height: 16vw;background-color: #333333;color:#fff;font-size:4.2667vw;line-height: 16vw;width: 100%;text-align: center;}

  .wrap {padding: 10.6667vw 0;background-color: #F5F6FA;width: 100%;}
  .wrap > .title {text-align: center;}
  .wrap > .title > h3{font-size: 4.8vw; line-height: 6.9333vw;margin: 0;margin-bottom: 10.6667vw;}
  .wrap > .title > h4{color: #447EB3;font-size: 3.7333vw; line-height: 5.3333vw;margin: 0;margin-bottom: 2.1333vw;}

  .wrap > .list {display: flex; gap: 5.3333vw;justify-content: center;}
  .wrap > .list > li{width: 41.8667vw;height: 41.8667vw;background-color: #333333;border-radius: 2.6667vw; box-shadow: 10px 10px 16px rgba(17, 17, 17, 0.1);}
  .wrap > .list > li > a > img{width: 100%;border-radius: 2.6667vw;}


  .footer {display: flex;flex-direction: column; padding: 8.8vw;background-color: #333333;}
  .footer > .logo {display: flex;flex-shrink: 1;align-self: center;margin-bottom: 3.7333vw;}
  .footer .sns {display: flex; flex-direction: row;gap: 3.7333vw;justify-content: center;flex-shrink: 1}