@import url('./header.css');
@import url('./main.css');
@import url('./footer.css');
@import url('./company.css');
@import url('./tech.css');
@import url('./contact.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css');
:root{
   --main-color:#009944;
}

*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   text-decoration: none;
   list-style: none;
}
*:focus{
   outline: none;
}
p{
   word-break: keep-all;
}
table{
   border-spacing: 0;
   border-collapse: collapse;
}
img{
   max-width: 100%;
}
body,a,p,div,span,input,textarea,select,option,th,td,button{
   font-size: 1rem;
   line-height: 1;
   font-weight: 500;
   font-style: normal;
   color: #222;
   font-family: 'Noto Sans', sans-serif;
}
body{
   position: relative;
}
table {
   border-spacing: 0;
   border-collapse: collapse;
}
th, td {
   font-family: 'Noto Sans', sans-serif !important;
}
.flex{
   display: flex;
}
.mobile{
   display: none;
}
.inner{
   max-width: 1280px;
   width: 100%;
   margin: 0 auto;
}

/* animation */
.fade-up {
   opacity: 0;
}
.fade-up.active {
   animation: fadeUp 0.7s .1s ease-out forwards;
}
.delay1 {
   animation-delay: 0.5s !important;
}
.delay2 {
   animation-delay: 0.6s !important;
}
.delay3 {
   animation-delay: 0.7s !important;
}
.delay4 {
   animation-delay: 0.8s !important;
}
@keyframes fadeUp {
   0% {
      opacity: 0;
      transform: translatey(3.75rem);
   }
   100% {
      opacity: 1;
      transform: translatey(0);
   }
}
@keyframes slideFadeUp {
   0% {
      opacity: 0;
      transform: translatey(1rem);
   }
   100% {
      opacity: 1;
      transform: translatey(0);
   }
}
@keyframes slideFadeDown {
   0% {
      opacity: 1;
      transform: translatey(0);
   }
   100% {
      opacity: 0;
      transform: translatey(-1rem);
   }
}
@keyframes nation-circle{
   0%{
      transform: scale(0);
      opacity: 0.6;
   }
   50%{
      opacity: 1.0;
   }
   100%{
      transform: scale(0.7);
      opacity: 0;
   }
}

/* sub-banner */
.subbanner{
   margin: -6.25rem 0 0;
   height: 31.25rem;
}
.subbanner > div{
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 1.25rem;
}
.subbanner .cate{
   align-self: flex-start;
   display: flex;
   gap: .625rem;
   align-items: center;
}
.subbanner .cate span{
   color: #595857;
}
.subbanner h1{
   font-size: 3rem;
   color: var(--main-color);
}

/* 게시판 pagenation */
.pg_wrap{
   float: unset;
   display: block;
   text-align: center;
   margin: 6.25rem auto 0;
}

.pg_page.pg_start {
   background: url(../img/list_left_arrow.svg) center/contain no-repeat;
   min-width: 1.875rem;
   border: none;
   overflow: unset;
   font-size: 0;
   margin: 0 .625rem 0 0;
}
.pg_page.pg_end {
   background: url(../img/list_left_arrow.svg) center/contain no-repeat;
   transform: rotate(180deg);
   min-width: 30px;
   border: none;
   overflow: unset;
   font-size: 0;
   margin: 0 0 0 .625rem;
}
.pg_page {
   background: transparent;
   border: none;
   border-radius: 5px;
   color: #222;
   margin: 0 5px;
}
.pg_current {
   background: var(--main-color);
   border-radius: 5px;
   line-height: 1.75rem;
   margin: 0 5px;
   border: 0;
}

@media (max-width:1280px){
   .inner{
      width: calc(100% - 30px);
   }
}
@media (max-width:1200px){
   .subbanner{
      margin: 0;
      height: 12.5rem;
   }
   .subbanner > div{
      max-width: 42.8571rem;
      width: calc(100% - 30px);
   }
   .subbanner .cate a{
      display: flex;
      align-items: center;
   }
   .subbanner .cate a img{
      width: .75rem;
      vertical-align: middle;
   }
   .subbanner .cate span:last-of-type{
      font-size: .75rem;
   }
   .subbanner h1{
      font-size: 1.625rem;
      text-align: center;
   }

}

@media (max-width:1024px){
   .pc{
      display: none;
   }
   .mobile{
      display: block;
   }
   html {
      font-size: 87.5%;
   }
   body ,a ,p ,div ,span ,input ,textarea ,select ,option ,th ,td, button {
      font-size: 1rem;
   }
   .inner{
      max-width: 42.8571rem;
   }
   .pg_wrap{
      float: unset;
      display: block;
      text-align: center;
      margin: 3.5714rem auto 0;
   }
}