@import url('fonts.css');


* { box-sizing: border-box; margin: 0; }

body { overflow-x:hidden }
body::-webkit-scrollbar { width:8px; }
body::-webkit-scrollbar-thumb { background-color:#0d5a3d; border-radius:4px; }
body::-webkit-scrollbar-track { background-color:#d3d3d3; }
html, body {   
  width: 100%; height: 100%; margin: 0; padding: 0; color: #333333;
  cursor:url('http://eumcreative.com/assets/images/cur_normal.cur'),default; 

  background-color: #e9e9e9; background-size: 200% 200%;
  -webkit-animation: gradient 15s ease infinite;
          animation: gradient 15s ease infinite; }

@-webkit-keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

a, button { cursor:url('http://eumcreative.com/assets/images/cur_link.cur'),auto!important; text-decoration:none;}

li {list-style:none; box-sizing:border-box;}


.eumgreen { color:#0d5a3d; }

.main_video {  
  right: 0;
  bottom: 0;
  background: #e9e9e9;
  min-width: 100%;
  min-height: 100%;
  border: 5px solid #e9e9e9;  outline:5px solid #e9e9e9;
 }

main { width:100%; height:100vh;  
            position:relative;

 }
section {  
  width: 100%; height: 100vh; padding: 4% 0; 
  display: flex; align-items: center; }

section h1 b { 
  display: inline-block;
  width: 10px; height: 10px; background: #333;
  border-radius: 15px;
  margin:0 2.2px;
}

section.top {  }  

section.eum { 
  margin: 0 auto;
  float: right;  height:100vh; 
  overflow: hidden;   }

section.eum .wrap { 
  position: relative; 
  width: 1920px; height: 100%;
  margin: 0 auto;
 }

section.eum .wrap > div { 
}
section.eum .left-txt { 
  min-width: 35%;  
  position: absolute;
  top: 50%;  
  left: 20%;
  transform: translateY(-50%);
  white-space: nowrap; z-index: 6;
}

section.eum .left-txt h1 {
  font-family: "Noto Sans Korean", sans-serif; 
  font-size: 55px; line-height: 73px; letter-spacing: -0.8px;
}

section.eum .left-txt p {
  margin-top: 30px;
  font-size: 1.4rem; line-height: 2.1rem; 
  font-family: 'Noto Sans Korean'; font-weight: 300; letter-spacing: -0.8px; 
}

section.eum .right-circle { 
  position: absolute;
  background:#0d5a3d;
  width: 650px; height: 650px; top: 50%;
  transform: translate(-50%,-50%);
  border-radius: 100%;
  left: 90%;
  animation: float 2s infinite ease-in-out alternate;
  transition: all 0.6s ease; 
}
 
section.eum .right-circle:hover {

}
@keyframes float {
  100% {
    transform: translate(-50%, -55%); 
  }
}

section.eum .right-circle .textcircle {
  position: absolute;
  z-index: 1;
  top: 50%;  
  transform: translate(-50%,-50%);
  width: 350px;
  height: 350px; 
}

section.eum .right-circle .textcircle svg text {
  cursor: crosshair;
  font-size:2.6rem;
  font-family: 'Montserrat';
  font-weight:900;
  text-transform: uppercase;
  letter-spacing: 5px; 
  fill: none;
  stroke:#fff;
  stroke-linecap:square;
  stroke-width:1px; 
  transition: all 0.3s ease;
}

section.eum .right-circle a.morebtn {
  position: absolute;  z-index: 2; color: #0d5a3d;
  font-weight: 800; font-family: "Montserrat"; font-size: 38px;
  cursor:url('http://eumcreative.com/assets/images/cur_link.cur'),auto!important;
  top: 45%; left: -170px; transition: all 0.3s ease-in-out;
}
section.eum .right-circle a.morebtn:hover{
  opacity: 0.5;
}

section.eum .right-circle a.pfbtn { 
  color: #fff; 
  font-weight: 800; font-family: "Montserrat"; font-size: 38px;
  position: absolute; top:45%; opacity: 0;
  left: -100px; transition: all 0.5s ease-in-out;
  z-index: 1;
}
 
section.eum .right-circle a.pfbtn:hover { 
}

section.eum .right-circle a.on {
  left: 0; opacity: 1; z-index: 3;  
}

section.eum .right-circle a span {
  color: red;
  border-radius: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  line-height: 30px;
  font-size: 12px;
  opacity: 1;
  background: #0d5a3d;
  display: inline-block;
  margin-left: 5px;transition: all 0.5s ease-in-out;
}

section.eum .right-circle a span.long {
  width: 60px;
  border-radius: 15px;
}

section.eum .right-circle a.pfbtn span {
  background: #fff;
  margin-right: 5px;
  margin-left: 0;
}

section.whatwedo { 
  background: url('../img/whatwedo_bg.jpg') no-repeat;
  height: auto;
  flex-direction: column;   
}

section.whatwedo > h1 {  
  text-align: center;
  font-family: "Noto Sans Korean", sans-serif; 
  font-size: 55px; line-height: 73px; letter-spacing: -0.8px; }

section.whatwedo .swiper-container { 
  margin-top:75px; height: 850px;
  width: 1060px; 
  position: relative; border-radius: 10px; }

section.whatwedo .swiper-wrapper {     
  display: flex; align-items: center;
  z-index: 1; position: relative; height: 600px; 
  background:url('../img/browser.png') no-repeat; 
}

section.whatwedo .swiper-container h1 { 
  margin: 160px 0 8px 0; 
  font-family: "Montserrat", sans-serif; 
  font-weight:700; font-size: 6rem; letter-spacing: -1px;
  color: transparent; transform: translateY(20px);
  transition: all 0.4s ease; transition-delay: 0.2s;
  overflow: hidden; max-width: 100%;
  text-overflow: ellipsis; -webkit-text-stroke:1px #fff;
  white-space: nowrap; }

section.whatwedo .swiper-container h4 { 
  margin: 0;  
  font-family: 'Noto Sans Korean'; font-weight: 500; font-size:1.8rem;
  transform: translateY(20px); transition: all 0.4s ease; transition-delay: 0.2s;
  overflow: hidden; max-width: 100%; text-overflow: ellipsis;
  white-space: nowrap; color: #fff; }

section.whatwedo .swiper-container p {  
  margin:0 5px; font-size: 1.4rem; line-height: 2.2rem;
  font-family: 'Noto Sans Korean'; font-weight: 300; letter-spacing: -0.8px; } 

section.whatwedo .swiper-container p strong { font-weight:500; }  

section.whatwedo .slider-item { 
  position: relative;
  width: 100%; height: 550px; 
  border-radius: 10px; 
  display: flex; flex-direction: column; flex-shrink: 0;
  opacity: 0; cursor: -webkit-grab; cursor: grab; 
  text-align: center;
}
section.whatwedo .slider-item-content {
  padding: 5%; display: flex;
  flex-direction: column; justify-content: center;
  transition: 0.4s;
}

section.whatwedo .slider-item .txt-area {
  position: absolute;
  width: 920px; top: 620px;  
  text-align: left;
  transform: translateY(20px);
  transition: all 0.4s ease;
  transition-delay: 0.3s; 
  overflow: hidden;
  text-overflow: ellipsis;

}
section.whatwedo .slider-item-content > * {
  opacity: 0; transform: translateY(20px);
}

section.whatwedo .swiper-slide-active .slider-item-content > * {
  transform: translateY(0px); opacity: 1;
}
 
section.whatwedo .swiper-pagination {
  position: absolute;
  left: 50%; top: 510px;
  transform: translatex(-50%);
  z-index: 1; width: auto !important;
}

section.whatwedo .swiper-pagination-bullet {
  border-radius: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  line-height: 30px;
  font-size: 12px;
  opacity: 1;
  background: rgba(255,255,255,.3);
  display: inline-block;
  margin-right: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

section.whatwedo .swiper-pagination-bullet-active {
  background: rgba(255,255,255,.8);
  width: 20px;
  border-radius: 10px;
}

section.whatwedo .slider-buttons {
  position: absolute;
  display: flex;
  top: 300px;
  justify-content: flex-end;
  width: 100%;
  padding-top: 8px;
  z-index: 6;
}

section.whatwedo .swiper-button-next,
section.whatwedo .swiper-button-prev {
  background-color: transparent; 
  position: absolute; 
  width: 31px; height: 59px;
  border: none;  
  transition: all 0.3s ease; 
  z-index: 2; opacity:0.7;
}


section.whatwedo .swiper-button-prev { 
  background: url('../img/icon/arrow_prev.png') no-repeat; 
  left: 56px;
}
section.whatwedo .swiper-button-next {
  background: url('../img/icon/arrow_next.png') no-repeat;
  right: 80px;
}
section.whatwedo .swiper-button-next:hover,
section.whatwedo .swiper-button-prev:hover {
  opacity: 1; 
}
 
section.clients { position: relative; background:#0d5a3d; color:#fff; 
  text-align:center; overflow: hidden; min-height: 100vh;}

section.clients div#holder { position:relative; width:100%; height:auto; margin:5vh auto 0 auto }

section.clients div#holder .bubble { position:absolute; 
  top:50%; left:50%; transform: translate(-50%,-50%);
  width: 25vw; height: 25vw; background: #0d5a3d; border-radius: 100%;
  filter: blur(30px);
  -webkit-filter: blur(30px); opacity: 0.5;
}

section.clients div#holder h1 {
 position:absolute;  left: 50%; top: 50%;
   color:#fff; font-size:2.6rem; letter-spacing: -1.5px; 
  transition: all 0.5s ease; font-weight: 600;  transform:translate(-50%,-50%) scale(1.04)}

section.clients div#holder h1 span {
  color: red;
  border-radius: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  line-height: 30px;
  font-size: 12px;
  opacity: 1;
  background: #fff;
  display: inline-block;
  margin-left: 5px;transition: all 0.5s ease-in-out;
}

section.clients div#holder h1:hover {  transform:translateX(-50%,-50%) scale(1.04) }

section.clients div#holder h1 span.long {
  width: 30px;
  border-radius: 15px; }

section.partners { 
  display: block; position: relative; height: auto; min-height: 100%; background:#0d5a3d; color:#fff; padding: 30px 0}

section.partners > h1 { 
  margin: 0 auto; text-align: center;
  font-family: "Noto Sans Korean", sans-serif; 
  font-size: 55px; line-height: 73px; letter-spacing: -0.8px; }

section.partners > h1 b { background:#fff; }

section.partners .textcircle {
  margin: 0 auto; 
  width: 350px;
  height: 350px; 
}

section.partners .textcircle svg text {
  cursor: crosshair;
  font-size:2.3rem;
  font-family: 'Montserrat';
  font-weight:800; 
  letter-spacing: 5px; 
  fill: #fff; 
  stroke-linecap:square;
  stroke-width:1px; 
  transition: all 0.3s ease;
}

section.partners .eum-partner { 
  width: 1100px; text-align:center; 
  margin:80px auto; }

section.partners .eum-partner ul.partner-list {
  display: flex;
  margin: 50px 0 60px 0;
}

section.partners .eum-partner ul.partner-list li {
  width: calc(100% / 5); 
}

section.partners .eum-partner h2 {
  width: 280px;
  display: inline-block; 
  color: #fff;
  border-radius: 40px; 
  font-size: 26px;
  border: 7px solid #fff;
  font-family: 'Montserrat';
  font-weight: 800;
  padding: 5px;
}


section.partners .eum-partner ul.certification-list {
  padding: 0;
  width: 1000px;
  border-top:4px solid #fff;
  border-bottom:3px solid #fff;
  margin: 50px auto 60px auto; 
}
section.partners .eum-partner ul.certification-list li {
  width: 100%;
  height: 150px;
  border-bottom: 1px solid #fff; 
}

section.partners .eum-partner ul.certification-list li div {
  float: left;
}
section.partners .eum-partner ul.certification-list li div.imgarea { 
  width: 250px; border-right: 1px solid #fff;
  height: 100%;
}

section.partners .eum-partner ul.certification-list li div.txtarea { 
  width: calc(100% - 250px);
  height: 100%;
  padding: 15px 35px;
  text-align: left; 
}


section.partners .eum-partner ul.certification-list li div.txtarea dl {
  font-family: 'Noto Sans Korean'; letter-spacing: -0.4px }

section.partners .eum-partner ul.certification-list li div.txtarea dl dt {
  font-weight: 700; font-size: 20px; line-height: 35px;
}
section.partners .eum-partner ul.certification-list li div.txtarea dl dd {
  font-weight: 300; font-size: 17px; line-height: 26px;
}

section.location { position:relative; height:calc(100% - 300px); }
section.location iframe { position:absolute; width:100vw; height:100%; top:0; }
section.location div.circle { position:absolute; z-index:2; right:5%;
  background:#0d5a3d; width:350px; height:350px; border-radius:100%; 
  color: #fff; text-align: center; padding:5.5% 0; transition:all 0.25s ease }
section.location div.circle:hover { transform:scale(1.05) }
section.location div.circle .textcircle { position:absolute; 
  z-index: 1; width:360px; height:360px; top:0; right:0 }

section.location div.circle .textcircle svg text {
  cursor: crosshair;
  font-size:2.8rem;
  font-family: 'Montserrat';
  font-weight:900;
  text-transform: uppercase;
  letter-spacing: 5px; 
  fill: none;
  stroke:#fff;
  stroke-linecap:square;
  stroke-width:1px; 
  transition: all 0.3s ease;
}

section.location div.circle p { 
  font-family: "Montserrat", "Noto Sans Korean", sans-serif; font-style:normal;
  font-weight: 300; font-size: 1.2rem; line-height: 170%; letter-spacing: -0.5px;  }  

section.location div.circle h2.num { font-size:2.2rem; font-weight: 600; font-family: "Montserrat"; line-height: 170%}
footer { display: flex; align-items: center; height:300px; background:url('../img/footer_bg.jpg') no-repeat; background-size:cover }
footer > div { width:850px; margin:0 auto; }
footer > div h1 { float:left; width:25% }
footer > div address { float: left; display:block;  
  font-family: "Montserrat", "Noto Sans Korean", sans-serif; font-style:normal;
  font-weight: 300; font-size: 1.1rem; line-height: 170%; letter-spacing: -0.5px; }

footer > div address p span { color:#c1c1c1 }