/* intro font */
    /* 나눔바른고딕 */
    @font-face {
      font-family: 'NanumBarunGothic';
      font-style: normal;
      font-weight: 400;
      src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.eot');
      src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.eot?#iefix') format('embedded-opentype'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.woff') format('woff'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.ttf') format('truetype');
    }
    @font-face {
      font-family: 'NanumBarunGothic';
      font-style: normal;
      font-weight: 700;
      src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.eot');
      src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.eot?#iefix') format('embedded-opentype'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.woff') format('woff'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.ttf') format('truetype')
    }
    @font-face {
      font-family: 'NanumBarunGothic';
      font-style: normal;
      font-weight: 300;
      src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.eot');
      src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.eot?#iefix') format('embedded-opentype'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.woff') format('woff'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.ttf') format('truetype');
    }
    .nanumbarungothic * {
      font-family: 'NanumBarunGothic', sans-serif;
    }
    
    /* intro common */
    body{ margin: 0; }
    .blind{ position: absolute; width: 0; height: 0; font-size: 0; text-indent: -9999px; }

    .intro-wrap{ display: flex; justify-content: center; align-items: center; position: relative; z-index: 2; width: 85%; max-width: 1800px; min-height: 100vh; margin: 0 auto; padding: 50px 0; box-sizing: border-box; text-align: center; font-family: 'NanumBarunGothic', sans-serif; }
    .intro-wrap *{ transition: all 0.4s; }
    .intro-wrap img{ max-width: 100%; }
    .intro-bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1; background: url('./images/intro-bg.jpg') no-repeat center / contain; }
    .intro-contents{ width: 670px; margin: 0 auto; }
    .intro-logo{ margin: 0 0 40px; }
    .intro-link ul{ display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; list-style: none; padding: 0;  }
    .intro-link ul::after{ content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 125px; height: 120px; background: url('./images/intro-center.png') no-repeat center / contain; }
    .intro-link li{ width: 45%; margin: 2.5% 0; }
    .intro-link li a{ display: block; position: relative; width: 100%; padding-bottom: 100%; border-radius: 50%; background: #ddd; box-shadow: 10px 10px 10px rgba(107, 107, 107, 0.28); }
    .intro-link li .li-cont{ display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    .intro-link li img{ width: 40%; }
    .intro-link li .ico-btn{ position: absolute; top: 7%; left: 7%; width: 45px; height: 45px; border-radius: 50%; background: #fff; box-shadow: -5px 10px 10px rgba(107, 107, 107, 0.28); }
    .intro-link li .ico-btn::before{ content: ''; position: absolute; top: 50%; left: 30%; transform: translateY(-50%); width: 40%; height: 3px; background: #000;  }
    .intro-link li .ico-btn::after{ content: ''; position: absolute; top: 30%; left: 50%; transform: translateX(-50%); width: 3px; height: 40%; background: #000;  }
    .intro-link li .txt{ margin: 15px 0 0; font-size: 35px; font-weight:500; color: #fff; line-height: 1.1; letter-spacing: -1px; }
  
    .intro-link li:nth-child(1) a{ background: #ed6e01; }
    .intro-link li:nth-child(2) a{ background: #00873b; }
    .intro-link li:nth-child(3) a{ background: #0076a8; }
    .intro-link li:nth-child(4) a{ background: #662d91; }
    .intro-link li:nth-child(2n) .ico-btn{ left: auto; right: 7%; box-shadow: 10px 10px 10px rgba(107, 107, 107, 0.28); }
    .intro-link li:nth-child(1) .ico-btn::before{ background: #ed6e01; }
    .intro-link li:nth-child(2) .ico-btn::before{ background: #00873b; }
    .intro-link li:nth-child(3) .ico-btn::before{ background: #0076a8; }
    .intro-link li:nth-child(4) .ico-btn::before{ background: #662d91; }
    .intro-link li:nth-child(1) .ico-btn::after{ background: #ed6e01; }
    .intro-link li:nth-child(2) .ico-btn::after{ background: #00873b; }
    .intro-link li:nth-child(3) .ico-btn::after{ background: #0076a8; }
    .intro-link li:nth-child(4) .ico-btn::after{ background: #662d91; }
    
    .intro-link li a:hover{ transform: scale(1.03); box-shadow: 10px 10px 20px rgba(107, 107, 107, 0.28); }
    .intro-link li a:hover .ico-btn{ transform: scale(1.2); }
    .intro-link li a:hover img{ transform: translateY(-5px); }

    /* animation */
    .intro-bg{ transform: scale(1.1); animation: introBg 3s both; }
    .intro-logo{ transform: translateY(30px); opacity: 0; animation: introLogo 1.5s both; }
    .intro-link ul::after{ transform: translate(-50%, -50%) rotate(-90deg); animation: introCenter 2s both; }
    .intro-link ul li{ transform: scale(1.2); opacity: 0; animation: introItem 1.5s both; } 
    .intro-link ul li:nth-child(2){ animation-delay: .2s; }
    .intro-link ul li:nth-child(3){ animation-delay: .4s; }
    .intro-link ul li:nth-child(4){ animation-delay: .6s; }
    @keyframes introBg{
      from{ transform: scale(0.8); }
      to{ transform: scale(1); }
    }
    @keyframes introLogo{
      from{ transform: translateY(30px); opacity: 0; }
      to{ transform: translateY(0px); opacity: 1; }
    }
    @keyframes introCenter{
      from{ transform: translate(-50%, -50%) rotate(-90deg); }
      to{ transform: translate(-50%, -50%) rotate(0deg); }
    }
    @keyframes introItem{
      from{ transform: scale(0.8); opacity: 0; }
      to{ transform: scale(1); opacity: 1; }
    }
    

    /* 반응형 */
    @media screen and (max-width: 1400px) {
      .intro-contents{ width: 570px; }
      .intro-logo{ margin-bottom: 20px; }
      .intro-link li .txt{ font-size: 32px; }
    }
    @media screen and (max-width: 1024px) {
      .intro-contents{ width: 470px; }
      .intro-link ul::after{ width: 80px; height: 80px; }
      .intro-link ul li{ width: 47%; margin: 3% 0; }
      .intro-link li .txt{ margin-top: 10px; font-size: 24px; }
      .intro-link li .ico-btn{ width: 35px; height: 35px; }
    }
    @media screen and (max-width: 480px) {
      .intro-link ul::after{ width: 60px; height: 60px; }
      .intro-link li .txt{ font-size: 4.5vw; }
      .intro-link li .ico-btn{ top: 3%; left: 3%; width: 20%; height: 20%; }
      .intro-link li:nth-child(2n) .ico-btn{ right: 3%; }
    }