@charset "utf-8";
@import url('font.css');

* { margin: 0; padding: 0; box-sizing: border-box; line-height: 1.5; font-family: 'SCDream', '돋움'; }
li { list-style: none; }
a { text-decoration: none; display: block; color: #fff; font-size: 23px; font-weight: 500; }
img { display: block; }

.flex { display: flex; width: 100%; }
.relative { position: relative; }
.inner { max-width: 1400px; margin: 0 auto; }

.mr10 { margin-right: 10px; }
.mr15 { margin-right: 15px; }
.mr20 { margin-right: 20px; }
.mr60 { margin-right: 60px; }

.w33p { width: 32.5%; }
.w50p { width: 49%; }

#wrapper { background: url("../img/bg_logo.png") center; color: #747474; height: 100vh; flex-direction: column; }

#hd { padding: 50px; }
#hd img { width: 30%; }

.icon_area { padding: 50px; height: 100%; }
.icon_area .inner {display: flex; justify-content: space-between; align-content: center; height: 100%; flex-wrap: wrap; }
.icon_area .inner li { margin: 10px 0; }
.icon_area .inner li a { padding: 30px 40px; }
.icon_area .ipsi a { background: #FFB703; }
.icon_area .notice a { background: #B0CB00; }
.icon_area .inner li .flex { justify-content: center; align-items: center; }
.icon_area img { width: 35px; height: auto; }
.ipsi_first{width:500px;}

#ft { border: 1px solid #DEDEDE; background: #fff; }
#ft .inner { justify-content: space-between; padding: 50px; }
#ft .inner .left { flex: 1 1 0%; }
#ft .logo { width: 12%; }
#ft .text_box { align-self: center; font-weight: 500; font-size: 15px; }
#ft .sns { width: 220px; align-items: center; }
#ft .sns img { width: 100%; }


@media screen and (max-width: 1400px) {		/* 아직 PC .. */
	.icon_area .inner li a { font-size: 20px; }
	.icon_area img { width: 30px; margin-right: 15px; }
}

@media screen and (max-width: 1279px) {		/* 태블릿 시작하자 .. */  
  #hd, .icon_area, #ft .inner { padding: 30px; }
  #hd img { width: 35%; }
  
  .icon_area .inner li a { font-size: 16px; }
  .icon_area img { width: 24px; margin-right: 10px; }
  .icon_area .inner li a { padding: 25px 15px; }

  #ft .logo { margin-right: 40px; }
  #ft .text_box { font-size: 14px; }
  #ft .sns { width: 200px; }
}

@media screen and (max-width: 1023px) {		/* 아직 태블릿 .. */
  .icon_area .inner li a { font-size: 15px; }
  .icon_area img { width: 23px; }

  #ft .logo { margin-right: 25px; }
  #ft .sns { flex-wrap: wrap; justify-content: center; width: 110px; }
  #ft .sns img { width: 30px; }
  #ft .sns a:nth-of-type(3) { margin-right: 0; }
}

@media screen and (max-width: 911px) {		/* 아직 태블릿 .. */
  #hd, .icon_area, #ft .inner { padding: 20px; }
  
  .icon_area .inner { justify-content: center; }
  .icon_area .inner li { width: 80%; }
  .icon_area .inner li a { font-size: 23px; padding: 30px 20px; }
  .icon_area img { width: 35px; margin-right: 20px; }

  #ft .text_box { font-size: 12px; }
  #ft .sns { width: 80px; }
  #ft .sns img { width: 20px; }

}

@media screen and (max-width: 767px) {		/* 아직 태블릿 .. */
  .icon_area .inner li { width: 90%; }
  
  #ft .sns { display: none; }
}

@media screen and (max-width: 599px) {		/* 모바일 시작 .. */  
  #hd, .icon_area, #ft .inner { padding: 30px; }
  #hd img { margin: 10px auto; width: 60%; }

  .icon_area .flex li a { font-size: 18px; text-align: center; padding: 20px; }
  .icon_area img { display: none; }

  #ft .flex { flex-wrap: wrap; }
  #ft .logo { margin: 0 auto 30px; width: 100px; }
  #ft p { font-size: 13px; width: 100%; margin-bottom: 5px; }
  #ft .sns { display: flex; flex-wrap: nowrap; margin-top: 20px; width: 100%; }
  #ft .sns img { width: 30px; }
  #ft .sns a:nth-of-type(3) { margin-right: 10px; }
}

@media screen and (max-width: 400px) {		/* 모바일 .. */    
  #hd, .icon_area, #ft .inner { padding: 20px; }
  #hd img { width: 70%; }

  .icon_area .flex li a { font-size: 14px; padding: 15px; }

  #ft .logo { margin: 0 auto 20px; width: 100px; }
  #ft p { font-size: 12px; }
  #ft .sns { margin-top: 10px; }
}