@charset "UTF-8";


*{
    word-break: keep-all;
}

/* up button */
@keyframes upup{
    0%{
        line-height: 55px;
    }
    50%{
        line-height: 45px;
    }
    100%{
        line-height: 55px;
    }
}

.up_wrap{
    width:50px;
    height:50px;
    border-radius: 50%;
    background:#fff;
    position: fixed;
    bottom:20px;
    right:20px;
    z-index: 1;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
    opacity: 0;
    transition:all  .8s;
}
.up_wrap.on{
    opacity: 1;
}

.up_wrap .up{
    text-align: center;
    display:block;
}
.up_wrap .up i{
    font-size:20px;
    color:#000;
    line-height: 55px;
    animation: upup 2s linear infinite;
}

#container{
    overflow:hidden;
}

.header{
    
}

.header.on{
    background:#fff;
}

.mo_bt{}
.mo_bt button{}


#wrap .header .menu_wrap>ul>li>a{
    color:#fff;
}

#wrap .header .menu_wrap>ul>li>ul>li>a{
    color:#fff;
}

#wrap .header .sns_wrap .social-links a{
    color:#fff;
}

#wrap .header:hover .menu_wrap>ul>li>a{
    color:#000;
}

#wrap .header:hover .menu_wrap>ul>li>ul>li>a{
    color:#000;
}

#wrap .header:hover .sns_wrap .social-links a{
    color:#000;
}

#wrap .header.on .menu_wrap>ul>li>a{
    color:#000;
}

#wrap .header.on .menu_wrap>ul>li>ul>li>a{
    color:#000;
}
#wrap .header.on .sns_wrap .social-links a{
    color:#000;
}
 /* #container .sec1{
    width:100%;
    height:1080px;
    background:url(../img/kdi_50th_beforebg.jpg) no-repeat center/cover;
}
#container .sec1 .inner{
    width:1200px;
    margin:0 auto;
    height:100%;
    padding-top:250px;
}
#container .sec1 .img_wrap{
    position: relative;
}
#container .sec1 .img_wrap:after{
    display:block;
    clear: both;
    content:'';
    margin:0 auto;
    width:724px;
    height:531px;
    background:url(../img/kdi_50_imgbg3.png) no-repeat center/cover;
    text-align: center;
    position: relative;
    z-index: 1;
}
#container .sec1 .img_wrap video{
    position: absolute;
    top: 8%;
    left: 45%;
  
    object-fit: cover;
    height: 74%;
    width: 33%;
   border-radius: 50%;
}
#container .sec1 .img_wrap img{
    
}
#container .sec1 .x_wrap{

}

#container .sec1 .x_wrap {
    width: 100%;
    height: 195px;
    position: absolute;
  
    top: 390px;
    left: 0;
  
    background: url(../img/kdi_50th_text.png);
    background-repeat: repeat-x;
    background-position: 0 0;
    animation: animatedBackground 70s linear infinite;
    z-index: 2;
  }
  
  @keyframes animatedBackground {
    from {
      background-position: 0 0;
    }
    to {
      background-position: -10000px 0;
    }
  }  */

/* mainvisual */




#timeline {
    display: flex;
    background-color: #000;
    padding-top:100px;
  
  
  }

.tl-item.tl1 .tl-bg{
    background:url(../img/before_1.jpg) no-repeat center/cover;
}
.tl-item.tl2 .tl-bg{
    background:url(../img/before_2.jpg) no-repeat center/cover;
}
.tl-item.tl3 .tl-bg{
    background:url(../img/before_3.jpg) no-repeat center/cover;
}
.tl-item.tl4 .tl-bg{
    background:url(../img/before_4.jpg) no-repeat center/cover;
}
.tl-item.tl5 .tl-bg{
    background:url(../img/before_5.jpg) no-repeat center/cover;
}

  
.tl-item {
    transform: translate3d(0, 0, 0);
    position: relative;
    width: 20%;
    height: 100vh;
    min-height: 600px;
    color: #fff;
    overflow: hidden;
    transition: width 0.5s ease;

}

.tl-item:hover{
    width:25%;
}

.tl-item:hover::after{
    opacity: 0;
}

.tl-item:hover::before{
    opacity: 1;
    transform: translate3d(0, 0, 0) translateY(0);
    transition: opacity 1s ease, transform 1s ease 0.25s;
}
.tl-item:hover .tl-content{
    opacity: 1;
    transform: translateY(0);
    transition: all 0.75s ease 0.5s;
}

.tl-item:hover .tl-bg{
    filter: grayscale(0);
}


  .tl-item:before
  {
   background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 75%);
   z-index: 1;
   opacity: 0;
   transform: translate3d(0, 0, 0) translateY(50%);
   transition: opacity 0.5s ease, transform 0.5s ease;
 }

  .tl-item:before,
  .tl-item:after {
      transform: translate3d(0, 0, 0);
      content: '';
      position: absolute;
      left: 0; top: 0;
      width: 100%; height: 100%;
  }

  .tl-item:after
    {
    -ms-background: transparentize(#031625, 0.15);
    background: transparentize(#031625, 0.15);
    opacity: 1;
    transition: opacity 0.5s ease;
    }
  
  .tl-content {
    transform: translate3d(0, 0, 0) translateY(25px);
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 0 1.618em;
    top: 55%;
    opacity: 0;
    
     
  }

  .tl-content h1{
    text-transform: uppercase;
    color: #00aeef;
    font-size: 30px;
    font-weight: normal;
    margin-bottom: 30px;
    letter-spacing: 0;
    font-weight: bold;
}

  .tl-content p{
    font-size: 14px;
    line-height: 22px;
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: box;
    margin-top:1px; 
     max-height:110px; 
    overflow:hidden;
    vertical-align:top;
    text-overflow: ellipsis;
     word-break:break-all; 
    -webkit-box-orient:vertical; 
    -webkit-line-clamp:5;
    
  }
  
  .tl-year {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 1;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    padding:15px 0;
  }

  .tl-year p{
    font-size: 1.728rem;
    
    
  }
  
  .tl-bg {
    transform: translate3d(0, 0, 0);
    position: absolute;
    width: 100%; 
    height: 100%;
    top:0; 
    left:0;
    background-size: cover;
    background-position: center center;
    transition: filter 0.5s ease;
    filter: grayscale(100%);
  }

   .tl-item button{
       background:none;
       border:none;
   }
   .tl-item button a{
       font-size: 14px;
       background:#fff;
       color:#262626 !important;
       display: block;
       padding:5px 10px;
       border-radius: 20px;
       font-weight: bold;
   }
  
/* timeline */
#container .s70{
    
}
#container .s80{
    margin-top:200px;
}
#container .s90{
    margin-top:200px;
}
#container .s00{
    margin-top:200px;
}

#container .s10{
    margin-top:200px; 
}
#container .s10 .container{
    padding-bottom: 200px;
}
#container .s10:before{
    height:100% !important;
}



  
html, body {
    overflow-x: hidden;
  }
  
  body {
   
    background-color: #eee;
   
  }
  
  h1 {
    font-size: 200%;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 400;
  }
  
  
  .timeline {
      position: relative;
      display:block;
    
  }
  
  .timeline::before {
      content: '';
      background: #ccc;
      width: 5px;
      height: 120%;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
  }
  .timeline h3{
      text-align: center;
      font-size:20px;
      line-height:100px;
      position: absolute;
      top:50px;
      left:38%;
      transform: translatex(-50%);
    background: #00aeef ;
    width:18.5%;
    height:100px;
    padding:0px;
    border-radius: 20px;
    color:#fff;
    z-index: 10;
  }
  .timeline h3:after{
      display:block;
      clear: both;
      content:'';
      width:50%;
      height:5px;
      position: absolute;
    background:#000;
    top:50%;
    transform: translatey(-50%);
    right:-14.5%;
    z-index: -1;
    background:#00aeef ;
        
  }
  .timeline h3:before{
    display:block;
    clear:both;
    content:'';
    width: 18px;
    height: 18px;
    background: #00aeef ;
    border-radius: 50%;
    position: absolute;
    right:-17.5%;
    top:50%;
    transform: translatey(-50%);
    z-index: 20;

}
  .timeline h3 span{
      color:#ddd;
      font-size: 14px;
  }
  
  .timeline-item {
      width: 20%;
      margin-bottom: 0px;
      position: relative;
      left:52%; 
      top:150px;
  }
  
  .timeline-item:nth-child(even) .timeline-content{
      float: right;
      right:120%;
      padding: 10px 30px 10px 30px;
  }
  
  .timeline-item:nth-child(even) .date {
    left: auto;
    right: 0;
  }
  
  .timeline-item:nth-child(even) .timeline-content::after {
      content: '';
      position: absolute;
      border-style: solid;
      width: 0;
      height: 0;
      top: 30px;
      left: -15px;
      border-width: 10px 15px 10px 0;
      border-color: transparent #f5f5f5 transparent transparent;
}
  
  .timeline-item::after {
          content: '';
          display: block;
          clear: both;
  }
  
 
  .timeline-content {
      position: relative;
      width: 100%;
      padding: 10px 30px 10px;
      border-radius: 4px;
      background: #ffffff;
      box-shadow: 0 20px 25px -15px rgba(0, 0, 0, .3);
  }
  
  .timeline-content::after {
    content: '';
    position: absolute;
    border-style: solid;
    width: 0;
    height: 0;
    top: 30px;
    right: -15px;
    border-width: 10px 0 10px 15px;
    border-color: transparent transparent transparent #f5f5f5;
  }
  
  .timeline-img  {
      width: 18px;
      height: 18px;
      background: #00aeef ;
      border-radius: 50%;
      position: absolute;
      left: -9.8%;
      margin-top: 7px;
      margin-left: -9px;
      z-index: 10;
  }
  
  .timeline-img.other1{
    background:#7dc353;
  }
  .timeline-content .other2{
    background:#7dc353 !important;
  }
  .timeline-card {
      padding: 0 0 0px 0!important;
  }
  .timeline-card p {
      padding: 10px 20px 10px;
      font-size:16px;
      font-family: "Noto Sans CJK KR" , "Noto Sans KR", 'Noto Sans EOT' , SimHei, Sans-serif;
      
    }
  
  .timeline-card a {
      margin-left: 20px;
  }
  .timeline-item .timeline-img-header {
      background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .6)), url('https://picsum.photos/1000/800/?random') center center no-repeat;
      background-size: cover;
  
  }

  /* 1970년도 */
.timeline-item .timeline-img-header.img1{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/70_01.png) no-repeat center 35%/cover ;
}
.timeline-item .timeline-img-header.img2{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/70_2.png) no-repeat center/cover;
}
.timeline-item .timeline-img-header.img3{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/70_4.png) no-repeat center/cover;
}
.timeline-item .timeline-img-header.img3-1{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/70_3-1.jpg) no-repeat center/cover;
}
.timeline-item .timeline-img-header.img4{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/70_5.jpg) no-repeat center/cover;
}
 
.timeline-item .timeline-img-header.img5{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/70_7.jpg) no-repeat center/cover;
  
}
.timeline-item .timeline-img-header.img5-2{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/70_5-1.jpg) no-repeat center/cover;
}
.timeline-item .timeline-img-header.img5-1{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/80_3.jpg) no-repeat center/cover;
}

/* 1980년도 */

.timeline-item .timeline-img-header.img6{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/80_1.png) no-repeat center/cover;
}
.timeline-item .timeline-img-header.img6-1{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/70_8.jpg) no-repeat center/cover;
}
.timeline-item .timeline-img-header.img6-2{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/80_6-2.jpg) no-repeat center/cover;
}
.timeline-item .timeline-img-header.img7{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/80_4-1.jpg) no-repeat 20% 0/cover;
}
.timeline-item .timeline-img-header.img8{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/80_6.jpg) no-repeat center/cover;
}
.timeline-item .timeline-img-header.img9{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/80_7.jpg) no-repeat center/cover;
}

/* 1990년도 */
.timeline-item .timeline-img-header.img10{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/90_1.jpg) no-repeat center/cover;
}
.timeline-item .timeline-img-header.img11{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/90_3.jpg) no-repeat center/cover;
}
.timeline-item .timeline-img-header.img11-1{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/90_4-2.jpg) no-repeat center/cover;
}
.timeline-item .timeline-img-header.img12-1{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/90_5.jpg) no-repeat center/cover;
}
.timeline-item .timeline-img-header.img13{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/90_6.jpg) no-repeat center/cover;
}

/* 2000년도 */
.timeline-item .timeline-img-header.img14{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/00_01.JPG) no-repeat center/cover;
}
.timeline-item .timeline-img-header.img15{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/00_2.png) no-repeat center/cover;
}
.timeline-item .timeline-img-header.img16{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/00_3.JPG) no-repeat center/cover;
}
.timeline-item .timeline-img-header.img17{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/00_4.JPG) no-repeat center/cover;
}
.timeline-item .timeline-img-header.img17-1{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/00_5.jpg) no-repeat center/cover;
}
.timeline-item .timeline-img-header.img18{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/00_7.JPG) no-repeat center/cover;
}
.timeline-item .timeline-img-header.img19{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/00_8.jpg) no-repeat center/cover;
}
/* 2010년도 */
.timeline-item .timeline-img-header.img20{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/10_01.jpg) no-repeat center/cover;
}
.timeline-item .timeline-img-header.img20-1{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/10_00.jpg) no-repeat center/cover;
}
.timeline-item .timeline-img-header.img21{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/10_02.jpg) no-repeat center/cover;
}
.timeline-item .timeline-img-header.img22{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/10_3.png) no-repeat center/cover;
}
.timeline-item .timeline-img-header.img22-1{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/10_22-1.JPG) no-repeat center/cover;
}
.timeline-item .timeline-img-header.img23{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/10_05.JPG) no-repeat center/cover;
}
.timeline-item .timeline-img-header.img24{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/10_06.JPG) no-repeat center/cover;
}
.timeline-item .timeline-img-header.img25{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/10_07.JPG) no-repeat center/cover;
}
.timeline-item .timeline-img-header.img26{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/10_08.jpg) no-repeat center/cover;
}
.timeline-item .timeline-img-header.img27{
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0, .8)), url(../img/10_9.JPG) no-repeat center/cover;
}

  .timeline-img-header {
  
      height: 200px;
      position: relative;
      margin-bottom: 0px;
  }
  .timeline-img-header h2 {
      font-family: "Noto Sans CJK KR" , "Noto Sans KR", 'Noto Sans EOT' , SimHei, Sans-serif;
      color: #ffffff;
      position: absolute;
      bottom: 5px;
      left: 20px;
  }

.date {
      background:#00aeef ;
      display: inline-block;
      color: #fff;
      font-size:14px;
      font-weight:500;
      padding: 10px;
      position: absolute;
      top: 0;
      left: 0;
      
  }

  /* 최충열 작업 */

  .timeline-item h2{
    line-height: 26px;
    font-size:20px;
    padding:20px 0;
    word-break: keep-all;
 }
 .timeline-item p{
     line-height: 24px;
     font-size:16px;
    
 }

 #foot{
    height:140px !important;
}
@media all and (max-width:1200px){
    .timeline h3{
        font-size:20px;
    }
    .timeline h3 span{
        font-size:14px;
    }
}
  
@media screen and (max-width: 768px) {

  #timeline {
    padding-top:80px;
    
 }

  .timeline ::before {
      left: 50px;
  }
  
  .timeline-img {
      left: 50px;
  }
  
  .timeline-content {
      max-width: 100%;
      width: auto;
      margin-left: 70px;
  }
  
  
  .timeline-item:nth-child(even) .timeline-content{
      float: none;
  }
  
  .timeline-item:nth-child(odd) .timeline-content::after{
      content: '';
      position: absolute;
      border-style: solid;
      width: 0;
      height: 0;
      top: 30px;
      left: -15px;
      border-width: 10px 15px 10px 0;
      border-color: transparent #f5f5f5 transparent transparent;
      
  }

  
  
  @media all and (max-width: 700px) {/*모바일 미디어쿼리 시작*/

    
    .mo_bt button span.on{
        background:#fff !important;
    }
    .timeline::before{
        height:108%;
    }

   #timeline:hover .tl-item{
        width:100%;
    }
    #timeline:hover .tl-bg{
        width:100%;
    }
    #timeline .tl-bg{
       
    }
    .tl-item:hover{
        
    }
    
    .tl-item:hover::after{
        opacity: 0;
    }
    
    .tl-item:hover::before{
        opacity: 1;
    }
    .tl-item:hover .tl-content{
        opacity: 1;
    } 
    
    .tl-item{
       width:100%;
        
    }
    .tl-item .tl-bg{
        width:100% !important;
    }

    .tl-item:hover .tl-content{
        opacity: 1;
        transform: translateY(25px);
        transition: all 0.75s ease 0.5s;
    }

    
    #timeline .slick-prev{
        left:20px;
        z-index: 1;
        
    }
    #timeline .slick-prev:before{
        font-size:40px;
        content:'<';
        color:#fff !important;
    }
    #timeline .slick-next{
        right:20px;
    }
    #timeline .slick-next:before{
       content:'>';
       font-size:40px;

       color:#fff !important;
    }

    .tl-year{
        opacity: 1;
    }
    .tl-content{
        opacity: 1;
    }
    .tl-item:before,
    .tl-itme:after
    {
     
     opacity: 1;
  
   }
   .tl-year{
       top:40%;
   }
   .tl-content{
       top:45%;
   }
  
   #timeline {
        padding-top:80px;
        display:block;
      
    }

    /* section2  */
    #container .s70{
    
    }
    #container .s80{
        margin-top:100px;
    }
    #container .s90{
        margin-top:100px;
    }
    #container .s00{
        margin-top:100px;
    }
    
    #container .s10{
        margin-top:100px; 
    }
    #container .s10 .container{
        padding-bottom: 50px;
    }
    #container .s10:before{
        height:100% !important;
    }
    

    /* 20201208 */
      .timeline::before{
          left:10%;
      }
  
      .timeline-item{
          width:80%;
          left:5%;
          margin-bottom: 50px;
          top:50px;
          
      }
      .timeline-item:first-child{
        margin-top:100px;
      }

      .timeline h3{
        text-align:center;
        font-size:20px;
        line-height:20px;
        position: absolute;
        top:-25px;
        left:55%;
        transform: translatex(-50%);
        height:25px;
        width:80%;
        padding:10px 0;
        border-radius: 20px;
        color:#fff;
        z-index: 10;
    }
    .timeline h3:before{
    display:none;
    }
    .timeline h3:after{
        display:none;
        clear: both;
        content:'';
        width:50%;
        height:5px;
        position: absolute;
        background:#000;
        top:50%;
        transform: translatey(-50%);
        left:-14.5%;
        z-index: -1;
       
          
    }
    
    .timeline h3 span{
        color:#ddd;
        font-size: 14px;
    }

     /* 
        even = 짝수요소 
        odd = 홀수요소
     */
      .timeline-item:nth-child(even) .timeline-content{
          float: none;
          right:0%;
          padding: 40px 30px 10px 30px;
      }
  
      .timeline-item:nth-child(even) .date {
          left: 0;
          right:auto;
                      
      }
  
      .timeline-item:nth-child(even) .timeline-content::after {
          content: '';
          position: absolute;
          border-style: solid;
          width: 0;
          height: 0;
          top: 30px;
          left: -15px;
          border-width: 10px 15px 10px 0;
          border-color: transparent #f5f5f5 transparent transparent;
          }
  
      .timeline-img{
          left:6.2%;
      }
      
      #foot{
          height:140px !important;
          padding:25px 0;
      }
      #foot .address p{
          margin-bottom: 0 !important;
      }
  
  
  }
  /* 모바일 미디어쿼리 끝  */