/* fontgoogle에서 글쓰찾고 cutomize check > embed > @import > 복사>style빼고 붙여넣기 */
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,700&display=swap');

/* -------------------------------RESET------------------------------ */

html,body{
  margin:0;
  padding: 0;
  width: 100%;
  height: 100%;
}
h1,h2,h3,h4,ul ,li,p,a,blockquote{
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-weight: normal;
  color: #000;
  text-decoration: none;
  /* 공통에다가 라인 하이트 1을 주면 폰트사이즈 대비해 라인하이트가 1:1 매겨진다 */
  line-height: 1;
}

img{
  vertical-align: top;
}

em{font-size: normal;}
.hidden{display: none;}


/* -------------------------------TYPOGRAPHY------------------------------ */
body{
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 18px;
}


/* -------------------------------HEADER SLOGAN------------------------------ */

header{
  background:#2c2f36 ;
  height: 81px;
  line-height: 81px;
  text-align: center;
}
header .logo a {
  font-size: 24px;
  color: #fff;
  text-transform: uppercase;
}
header .logo a em{
  font-weight: bold;
}

.slogan{
  padding: 107px 0 97px;
  background: #e2e2e2;
}
.slogan h2{
   font-size: 50px;
   color: #11262e;
}
.slogan p{
 font-size: 28px;
 color: #11262e;
 line-height: 37px;
 margin: 24px 0 40px;
}
.slogan a{
  display: inline-block;
  background: #00c494;
  height: 71px;
  line-height: 71px;
  color: #fff;
  font-size: 28px;
  padding: 0 62px;
  border-radius: 4px;
}

/* -------------------------------TESTIMONIAL------------------------------ */
.testimonial{
  background: #f0f0f0;
  padding: 53px 0;
  text-align: center;
}
.testimonial blockquote{
 line-height: 27px;
}
.testimonial p{
  font-size: 28px;
}
.testimonial blockquote small{
  font-size: 19px;
  font-style: italic;
}

/* -------------------------------DEVICE------------------------------ */
.device{
  padding: 97px 0 216px;
}

.device h3{
  font-size: 35px;
  color: #2c2f36;
  margin-bottom: 26px;
}
.device p{
  font-size: 18px;
  line-height: 27px;
}

.appliance img{
  position: absolute;
  left: 70px;
  opacity: 0;
}

.animate, .grow-img, .animate_down{
          animation:fadeIn 1s forwards ease-in;
          transition: 2s ease-in-out;}
@keyframes fadeIn {
  0%{opacity: 0;}
  100%{opacity: 1;}
}
#phone{
  margin-top: 40px;
}
/* #phone.animate{
  transform: translateX(14em);
}
#monitor.animate{
  transform: translateX(3em);

} */

.output {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  font-size: 2rem;
  font-weight: 200;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
}

/* -------------------------------FEATURE------------------------------ */
.features{
   background-color: #f0f0f0;
   padding: 79px 0 75px;
}
.features .item{
 text-align: center;
}
.features .item h4{
  color: #2c2f36;
  font-size: 30px;
  margin-top: 15px;
  text-transform: uppercase;
  opacity: 0;

}
.features .item img{
  /* 여기서는 실체가 늘어나야 하는 효과이기 떄문에 트랜스펌이 아니다
     실체가 늘어나면서 아래로 늘어나야한다*/
  width: 0;
  height: 0;
}
  /* 위에 애니메이션 자리에 grow-img 추가해주기 */
.features .item img.grow-img{
  width: 169px;
  height: 169px;
}
.features.active .item img{
  width: 169px;
  height: 169px;
  animation:fadeIn 1s forwards ease-in;
            transition: 2s ease-in-out;
}
.features.active .item h4{
  animation:fadeIn 1s forwards ease-in;
            transition: 2s ease-in-out;
}
/* .features .row{font-size: 30px; text-align: center;  text-transform: uppercase;}
.features img  { margin-bottom:17px;  width: 170px; height: 174px; opacity: 0;
                  } */



/* -------------------------------LOCATION------------------------------ */



.striptes{display: flex; }
.striptes .stripte{
  /* 기둥 10개라서 */
  width: 10%;
  /* height: 512px; */
  height: 0;
}
.striptes .stripte.animate_down{
  height: 512px;
}
#s1{background: #2c2f36;
    /* css에서 이렇게 밑간을 쳐줘서 효과주는게 베스트다
       하지만 이번에는 스크립트로 처리해보자 */
   /* transition-delay: 0.1s */
 }
#s2{background: #444850;}
#s3{background: #36383c;}
#s4{background: #1e2026;}
#s5{background: #444850;}
#s6{background: #2b2d30;}
#s7{background: #212326;}
#s8{background: #36383c;}
#s9{background: #444850;}
#s10{background: #2c2f36;}


.location{ position: relative;}
.location .contents{
  top: 0;
  /* absolute특징은 안에있는 컨텐츠 너비만큼 자동으로 너비가 잡힌다. 양옆에 공간이 없어서 만들어줘야한다 */
  position: absolute;
  /* 컨텐츠에 width가 있기떄문에 left,right0을 주면  container의 마진을 가진다 */
  left: 0;
  right: 0;
  padding: 155px 0 120px;
}
.location .map{
 position: relative;
}
#rader{position: absolute;
      /* .map relative 부모를 기준으로 위치를 잡는다 */
      left:120px ;
      top: -40px;
      animation: rotation 10s infinite linear;
    }
    @keyframes rotation {
      from{transform: rotate(0deg);}
        to{transform: rotate(360deg)}

    }
#location_map{
  margin-left: 90px;
}

.contents h2{
  font-size: 40px;
  margin-bottom: 30px;
  color: #fff;
}
.contents p{
  font-size: 28px;
  color: #fff;
  line-height: 37px;
}


/* -------------------------------ScrollTriger------------------------------ */
.active #phone{
  transform: translateX(14em);
  animation:fadeIn 1s forwards ease-in;
            transition: 2s ease-in-out;
}
.active #monitor{
  transform: translateX(3em);
  animation:fadeIn 1s forwards ease-in;
            transition: 2s ease-in-out;
}



.active .striptes .stripte{
  height: 512px;
  animation:fadeIn 1s forwards ease-in;
            transition: 2s ease-in-out;
}

#s1{background: #2c2f36; transition-delay: 0.1s;}
#s2{background: #444850; transition-delay: 0.2s;}
#s3{background: #36383c; transition-delay: 0.3s;}
#s4{background: #1e2026; transition-delay: 0.4s;}
#s5{background: #444850; transition-delay: 0.5s;}
#s6{background: #2b2d30; transition-delay: 0.6s;}
#s7{background: #212326; transition-delay: 0.7s;}
#s8{background: #36383c; transition-delay: 0.8s;}
#s9{background: #444850; transition-delay: 0.9s;}
#s10{background: #2c2f36; transition-delay: 1s;}