@charset 'utf-8';

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 100;
    src: url(../font/NotoSansKR-Thin.woff2) format('woff2'),
        url(../font/NotoSansKR-Thin.woff) format('woff'),
        url(../font/NotoSansKR-Thin.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 300;
    src: url(../font/NotoSansKR-Light.woff2) format('woff2'),
        url(../font/NotoSansKR-Light.woff) format('woff'),
        url(../font/NotoSansKR-Light.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    src: url(../font/NotoSansKR-Regular.woff2) format('woff2'),
        url(../font/NotoSansKR-Regular.woff) format('woff'),
        url(../font/NotoSansKR-Regular.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
    src: url(../font/NotoSansKR-Medium.woff2) format('woff2'),
        url(../font/NotoSansKR-Medium.woff) format('woff'),
        url(../font/NotoSansKR-Medium.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 700;
    src: url(../font/NotoSansKR-Bold.woff2) format('woff2'),
        url(../font/NotoSansKR-Bold.woff) format('woff'),
        url(../font/NotoSansKR-Bold.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 900;
    src: url(../font/NotoSansKR-Black.woff2) format('woff2'),
        url(../font/NotoSansKR-Black.woff) format('woff'),
        url(../font/NotoSansKR-Black.otf) format('opentype');
}



* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Noto Sans KR';
}


    body {
      margin: 0;
      font-family: "Noto Sans KR";
      background-color: #f9f9f9;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      color: #333;
    }
    .container {
      text-align: center;
      padding: 20px;
    }
    .logo {
      margin-bottom: 10px;
	  margin: auto;
	  display: block;
    }
    .mascot {
      margin: 20px 0;
    }
    h1 {
      font-size: 32px;
      font-weight: 600;
      margin-bottom: 10px;
    }
    p {
      margin: 5px 0 30px;
	  font-size: 22px;
	  font-weight: 600;
    }
    .notice-box {
      display: inline-block;
      background: #e7e7e7;
      padding: 20px 20px;
      border-radius: 10px;
      margin-bottom: 30px;
	  font-size: 22px;
	  font-weight: 500;
    }
    .icons {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
	  row-gap: 20px;
	  column-gap: 20px;
      justify-items: center;
    }
    .icon-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-decoration: none;
      color: #033885;
      font-size: 16px;
	  font-weight: 600;
    }
    .icon-item img {
      margin-bottom: 8px;
    }
/*-----------------------------------------------------반응형 시작--------------------------------------------------*/
@media all and (min-width:850px) {
	h1{
		font-size: 33px;
	}
	p{
		font-size: 23px;
	}
	.notice-box{
		font-size: 23px;
	}
	.icon-item {
      font-size: 22px;
    }
}

/*--------------------------------------------반응형 두번째---------------------------------------------*/
@media all and (min-width:1440px) {
	h1{
		font-size: 34px;
	}
	p{
		font-size: 24px;
	}
	.icons{
		row-gap: 40px;
	}
	.notice-box{
		font-size: 24px;
		margin-bottom: 40px;
	}
}