@import url('https://fonts.googleapis.com/css?family=Inconsolata');
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

body {
   margin: 0;
   padding: 0;
   font-family: 'Noto Sans KR', sans-serif;
   letter-spacing: -1px;
   background-color:#11141c;
}


/* 템플릿 */
    #menubar {
            width:95%;
            padding-left: 5%;
            padding-top: 5px;
            height: 55px;
            background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(50,50,50,0.7)); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(top, rgba(0,0,0,0), rgba(50,50,50,0.7)); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(50,50,50,0.7)); /* For Firefox 3.6 to 15 */
            background: linear-gradient(to top, rgba(0,0,0,0), rgba(50,50,50,0.7)); /* Standard syntax (must be last) */
            position: absolute;
            top:0;
            left: 0;
            z-index: 999;
    }

    #menubar a {
            text-decoration: none;
    }

    #teamname {
            font-size:1em;
            color:#cccccc;
            margin: 5px 0px 0px 15px;
            font-weight: 700;
            text-align: left;
            float: left;
    }



#footerbar {
            height:50px;
            background-color:#222;
            padding-top:15px;
            width:97%;
            padding-left: 3%;
    }
    
    #credit {
            font-size:0.8em;
            color:#aaaaaa;
            font-weight: 350;
            margin:5px 0px 0px 10px;
            text-align: left;
            float: left;
    }


        .mabulogo {
            width:80px;
            height:35px;
            margin:0;
            float: left;
    }

    /* 커버 */
#cover {
   width:100%;
   background-image: url("http://img.sbs.co.kr/newimg/news/20170110/201013351.jpg");
   background-size: 100%;
   background-position: center;
   background-repeat: no-repeat;
   text-align: center;
}

/*  http://img.sbs.co.kr/newimg/news/20170110/201013333.jpg */
#cover .maintitle{
               font-size: 4em;
               font-weight: 300;
               color:#fff;
               margin:100px 0px 0px 0px;
}



.mouse
{
height: 42px;
width: 24px;
  border-radius: 14px;
  transform: none;
  border: 2px solid rgba(255, 255, 255, 0.5);
  margin:100px auto 0px auto;
}

.wheel
{
  height: 5px;
  width: 2px;
  display: block;
  margin: 5px auto;
  background: white;
  position: relative;
  
  height: 3px;
  width: 3px;
  border: 1px solid  rgba(255, 255, 255, 0.5);
  -webkit-border-radius: 8px;
   border-radius: 8px;
  

}

.wheel
{
  -webkit-animation: mouse-wheel 1.5s linear infinite;
  -moz-animation: mouse-wheel 1.5s linear infinite;
}

.scrollme {
   font-weight: 300;
   color:#fff;
   font-size: 0.9em;
}
@-webkit-keyframes mouse-wheel
{
   0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
  }
}

@-moz-keyframes mouse-wheel
{
  0% { top: 1px; }
  25% { top: 2px; }
  50% { top: 3px;}
  75% { top: 2px;}
  100% { top: 1px;}
}

.container {
   width: 80%;
   padding: 50px 0;
   margin: 50px auto;
   position: relative;
   overflow: hidden;
}

.container:before {
   content: '';
   position: absolute;
   top: 0;
   left: 50%;
   margin-left: -3px;
   width: 4px;
   height: 100%;
   background: rgba(255,255,255,0.2);
   z-index: 1
}

.timeline-block {
   width: -webkit-calc(50% + 8px);
   width: -moz-calc(50% + 8px);
   width: calc(50% + 8px);
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -moz-box-pack: justify;
   justify-content: space-between;
   clear: both;
   margin:30px 0px;
   /* height:300px; */
}

.timeline-block-right {
   float: right;
}

.timeline-block-left {
   float: left;
   direction: rtl
}

.marker {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   border: 4px solid #ffffff;
   background: #222222;
   margin-top: 10px;
   z-index: 9999
}


.timeline-content {
   width: 96%;
   padding: 0px 10px;
   opacity: 0;
}

.timeline-content h3 {
   margin-top: 5px;
   margin-bottom: 5px;
   font-size: 1.2em;
   font-weight: 500;
   color:#eef47f;
   font-family: 'Inconsolata', monospace;
  background: rgba(0,0,0,0.5);
  padding: 6px 10px;
  display: inline-block;
}

.timeline-content p {
   font-size: 1em;
   line-height: 1.5em;
   font-weight: 300;
   color: #fff;
}

.timeline-content img {
   width:70%;
}

@media screen and (max-width: 768px) {
   .container:before {
      left: 8px;
      width: 2px;
   }
   .timeline-block {
      width: 100%;
      margin-bottom: 30px;
   }
   .timeline-block-right {
      float: none;
   }

   .timeline-block-left {
      float: none;
      direction: ltr;
   }
}