@charset "UTF-8";

@font-face {
   font-family: 'seed';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url(./fonts/LINESeedKR-Rg.woff2) format('woff2');
 }

/* Common */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
a{color: inherit;text-decoration: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
body {overflow-y: scroll;overflow-x: hidden; font-family:'Pretendard';font-size:16px;color:#717272;}

.bold {font-weight: bold;}
* { box-sizing: border-box; }
.align-center {text-align:center}
.mt-20 {margin-top:20px;}
.flex {display: flex;}
.direction-row {flex-direction: row;}
.flex-wrap {flex-wrap: wrap;}
.content-center {justify-content: center;}
.items-center {align-items: center;}

/* ---- grid ---- */
.grid {background: #EEE;max-width: 1200px;padding:20px;}

/* clearfix */
.grid:after {content: '';display: block;clear: both;}

/* ---- grid-item ---- */
.grid-item {margin:20px 0 20px 20px;width:20%;float: left;background: #fff;margin-bottom: 20px;}
.grid-item--width2 { width: 320px; }
.grid-item--width3 { width: 480px; }
.grid-item--width4 { width: 640px; }
.grid-item--height2 { height: 200px; }
.grid-item--height3 { height: 260px; }
.grid-item--height4 { height: 360px; }

.gnb {padding:0 15px 0 15px;display:flex;height: 80px;background: #fff;position: fixed;left: 0;top: 0px;width: 100%;flex-direction: row;align-items: center;justify-content: space-between;z-index:1;}
.gnb .logo img {width:200px;}
.gnb .menu-box {display:flex; justify-content: space-evenly;}
.gnb .menu-box div {padding:0 20px;}

.tit {text-align: center;margin-top: 80px;font-size: 60px;font-weight: bold;color: #333;}

.contents {margin:80px 0 0 0; width:100%;}
.contents .about {position:relative;display: flex;flex-direction: row;justify-content: space-around;height: 618px;}
.contents .about div {width:50%;}
.contents .about .left{display: flex;justify-content: center;align-items: center;background:rgb(248 247 249) }
.contents .about .desc {position: absolute;top: 50%;transform: translate(-50%, -50%);left: 50%;width:80%;padding:15px;font-size: 20px;text-align: justify;line-height:1.8;color:#fff;font-weight:100;}
.contents .about .right img {width: 100%;object-fit: cover;height: 613px;}

.portfolio {margin:0 auto; margin-top:80px;}
/*
.portfolio .li {margin:20px 0;position:relative;padding:15px; width:30%; height:600px; max-width:30%;background-color:#f1f3f4;} */
.portfolio .li a {position:relative;padding:15px;width:100%;height:100%;display:block;}
.portfolio figure {width:100%;margin:0 0 1rem 0;text-align: center;}
.portfolio figure img {top:0;width:100%;object-fit:cover;object-position:top left;border:1px solid #CACACA}
.portfolio figure .webName {margin-top: 10px;font-size: 19px;color: #333;font-weight: 400;width: 100%;height: auto;}
.portfolio figure .compName {margin-top: 10px;font-size: 14px;color: #ACACAC;font-weight: 400;width: 100%;height: auto;}

.sub-tit {padding: 60px 0 18px 0;border-bottom:3px solid #000;font-size:20px;font-weight:400;width:15%;color:#333;}
.sub-desc {padding:20px 0;color:#333;line-height:1.5;}
.tech {margin:0 auto;max-width:1200px;}

.peoples {margin:0 auto;max-width:1200px;}
.peoples li:before {
   display: inline-block;
   content: "";
   width: 4px;
   height: 4px;
   overflow: hidden;
   border-radius: 50%;
   background: #000;
   margin:0 5px;
   vertical-align: middle;
}


.partners {margin:0 auto;max-width:1200px;}
.partners .sub-tit {margin:0 20px;width:auto;}

.tech .desc,
.peoples .desc,
.partners .desc {margin:0 20px;padding:0 20px;}
.footer {margin-top:80px;background-color:#f7f7f7;width:100%;height:80px;display: flex;flex-direction: row;flex-wrap: wrap;align-items: center;justify-content: space-evenly;}

.experience {margin:0 auto;margin-top:20px;padding: 0 20px; max-width:1200px; width:100%;line-height:1.5;}


@media (max-width:1200px) {
   .grid-item {width:20%;}
   .partners .sub-tit {font-size: 20px;}
   figure.snip1477 img {margin-top:0 !important;}
}
@media (max-width:1024px) {
   .grid-item {width:28%;}
   .partners .sub-tit {font-size:16px;}
   figure.snip1477 img {height:100%;}
}
@media (max-width:960px) {
   .tit {font-size:46px;}
   .grid-item {width:27%;}
   .partners .sub-tit {font-size: 18px;}
}
@media (max-width:640px) {
   .gnb .menu-box div {padding: 0 10px;}
   .portfolio {margin-top:20px;}
   .contents .about {height:378px;overflow:hidden;}
   .contents .about .desc {font-size: 16px;}
   .grid-item {width:42%;}
   .partners .flex-wrap {flex-wrap: wrap;}
}
@media (max-width:560px) {
   .gnb {flex-wrap:wrap;padding: 0 10px 0 10px;}
   .gnb .logo {width:100%;text-align:center;}
   .gnb .menu-box {width:100%;justify-content: space-between;}
   .gnb .menu-box div {padding: 0 5px;font-size:12px;}
   .portfolio {margin-top:20px;}
   .contents .about {flex-wrap: wrap;height:auto;overflow:hidden;}
   .contents .about div {width:100%;}
   .contents .about .left {order:2;}
   .contents .about .right {order:1;}
   .grid {padding: 0;}
   .contents .about .desc {font-size: 14px;width: 100%;}
   .grid-item {width:100%;margin:0;}
   .contents .about .right img {height: auto;}
   .partners .flex-wrap {flex-wrap: wrap;}
   .tit {margin-top:40px;}
   .soup, .congdaq {width:100%;}
   .soup figure,
   .soup img,
   .congdaq figure,
   .congdaq img {height:auto;}
   .sub-tit {width:50%;font-size:20px;font-weight: bold;}
   .sub-desc {font-size:16px;}
   .sub-desc ul li {margin:5px 0;position:relative; padding-left:20px;}
   .sub-desc ul li:before {position: absolute;top: 8px;left: 0;}
}
@media (max-width:340px) {
   .contents .about .desc {font-size: 12px;}
}

@keyframes fadeInUp {
   0% {
       opacity: 0;
       transform: translate(-50%, -40%);
       /* transform: translate(-50%, -50%); */
   }
   100% {
       opacity: 1;
       transform: translate(-50%, -50%);
       /* transform: translate(-50%, -50%); */
      -webkit-transition-delay: 0.2s;
      transition-delay: 0.2s;
   }
}
.about .desc {
   text-align: left;
   animation: fadeInUp 5s;}

@keyframes mainImg {
   0%{ opacity:0.9 }
   50% {
      zoom: 1;
      filter: alpha(opacity=35);
      -webkit-opacity: 0.5;
      opacity: 0.5;
   }
   100%{ opacity:0.9 }
}
.about .snip1477 img {position: relative;animation: mainImg 5s infinite;}



@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,700);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
figure.snip1477 {
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 100%;
  max-width: 100%;
  width: 100%;
  color: #ffffff;
  text-align: center;
  font-size: 16px;
  background-color: #000000;
}
figure.snip1477 *,
figure.snip1477 *:before,
figure.snip1477 *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.55s ease;
  transition: all 0.55s ease;
}
figure.snip1477 img {
  max-width: 100%;
  backface-visibility: hidden;
  vertical-align: top;
  opacity: 0.9;
  width: 100%;
   margin-top: -15%;
}