.h1-s2-c1{color:white}
.h-icon{color:white}
  
html {
    font-size: 62.5%;
  }
  
.section1{height: auto; }
.section1-part1{
    background: url("../img/이미지/연혁/Mask\ group.jpg");
    background-position: center center;
    width:100%;
    height:51vh;
   position: relative;

}
.section1-part1-1{color:white;font-size: 2.09vw;position: absolute; top:40%;left:50%;text-align: center; transform: translate(-50%, 0%);}
.section1-part1-2{color:white;font-size: 1.05vw;position: absolute; bottom:5%;transform: translate(-50%, 0%);left:50%;text-align: center;}

.line{border-right:1.2px solid #cecece;}

.section3{height:10vh;}
*, *::after, *::before {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

  body {
    font-size: 1.6rem;
    font-family: "Merriweather", serif;
    color: white;
    background-color: white;
    width:100%;
  }
  
  /* -------------------------------- 
  
  Icons Filling Effect - by CodyHouse.co
  
  -------------------------------- */

  #box{
    animation-name: move;
    animation-duration: 5s;
    animation-iteration-count: infinite;
  }
  @keyframes move {
    /* keyframe */
    from {
      left: 0;
    }
    /* keyframe */
    to {
      left: 300px;
    }
  }
  header h1 {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #699ec0;
    font-size: 2.6rem;
  }
  
  .cd-icons-filling {
    width: 55%;
    margin: 0 auto;
    /* hide ::after pseudo element - fix for Edge 15 and below */
    
  }
  
  .cd-icons-filling::before, .cd-icons-filling::after {
    /* the 2 underneath colored sections */
    /* fix flickering on Edge 15 and below */
    content: '/';
    color: transparent;
    position: fixed;
    /* trick to remove flickering on resize */
    width: calc(90% - 2px);
    
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    height: 50vh;
    z-index: -1;
  }
  
  .cd-icons-filling::before {
    /* fix bug - ::before element visible before starting scrolling */
    top: -1px;
    background-color:white;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
  }
  
  
  .year{flex-basis: 30%;}
  .year-cont{
    flex-basis: 60%;
    margin-top: 11vh;
  }
  
   
    .scroll-history {
      width:100%;
      display:flex;
      justify-content:space-between;
      height:39.6vh;
    }

    .scroll-history ul{
        list-style:none;
      }
 
  
    .scroll-history.scroll-history--divider:first-child, .scroll-history.scroll-history--divider:last-child {
      padding: 0;
    }
    .scroll-history.scroll-history--divider:last-child {
      display: block;
    }
   
    .scroll-history h2, .scroll-history ul li {
      color: black;
      -webkit-transition: color 0.5s;
      transition: color 0.5s;
      font-weight:bold;
    }
    .scroll-history h2, .scroll-history p{
      color: gray;
      -webkit-transition: color 0.5s;
      transition: color 0.5s;
      font-weight:bold;
    }
    .year{
      width:30%;
      color:  #154B9A; 
      font-size:5.21vw;
      font-weight:bold;
    }
    .year-history{
      position: relative;
      top:20vh;
      right:15%;
      width:30%;
      color:black; 
      font-size:2vw;
      font-weight:bold;
    }
    .icon-year{position: relative;}
    .icon-wrap{
      border:2px solid #143B9A;
      width:3rem;height:3rem;border-radius: 100%; 
      position:absolute; 
      top:12.7%;
      left:-8.3%;
      transform: translate(-50%, -50%);
  }
    #top-icon{
      border:2px solid #143B9A;
      width:3rem;height:3rem;border-radius: 100%; 
  }
    .history-icon{
        background-color:  #154B9A; 
        width:2rem;height:2rem;border-radius: 100%; 
        position:relative; 
        top:12.5%;
        left:-8.3%;
        transform: translate(-50%, -50%);
    }
    #top-icon,#top-ic{
      position:absolute; 
      top:45%;
      left:-8.3%;
      transform: translate(-50%, -50%);}

    .scroll-history ul li {
        
      font-size: 1vw;
      line-height: 1.6vw;
    }
    .scroll-history.scroll-history--focus h2 {
      color: white;
    }
    .scroll-history.scroll-history--focus ul li {
      color: rgb(197, 195, 195);
  
    }
    
    .scroll-history.scroll-history--focus p {
      color:  rgb(197, 195, 195);
    }
    .scroll-history.scroll-history--focus .year {
      color:rgb(197, 195, 195);
      font-weight:bold;
    }
    .scroll-history.scroll-history--focus .history-icon{
        background-color:  rgb(197, 195, 195);
      }
      .scroll-history.scroll-history--focus .icon-wrap {
        border:2px solid rgb(197, 195, 195);
      }
      .scroll-history.scroll-history--focus #top-icon {
        border:2px solid rgb(197, 195, 195);
      }
  
  
 
    /* 모바일 세로 (해상도 ~ 479px)*/ 
    @media all and (max-width:768px) {
      .cd-icons-filling {
        width: 80%;
        margin: 0 auto;
      }
      

      
      .cd-icons-filling::before {
        /* fix bug - ::before element visible before starting scrolling */
        top: -1px;
        background-color:white;
        -webkit-transition: all 0.8s;
        transition: all 0.8s;
      }
      .section1-part1{
        background: url("../img/이미지/연혁/Mask\ group.jpg");
        background-position: center center;
        width:100%;
        height:30vh;
       position: relative;
    
    }
    .section1-part1-1{color:white;font-size: 3.09vw;position: absolute; top:40%;left:50%;text-align: center; transform: translate(-50%, 0%);}
.section1-part1-2{color:white;font-size: 2.05vw;position: absolute; bottom:5%;transform: translate(-50%, 0%);left:50%;}


      .scroll-history {
        width:100%;
        display:flex;
        justify-content:space-between;
        height:45vh;
      }
  
      .scroll-history ul{
          list-style:none;
        }
   
      .scroll-history.scroll-history--divider:first-child, .scroll-history.scroll-history--divider:last-child {
        padding: 0;
      }
      .scroll-history.scroll-history--divider:last-child {
        display: block;
      }
     
      .scroll-history h2, .scroll-history ul li {
        color: black;
        -webkit-transition: color 0.5s;
        transition: color 0.5s;
        font-weight:bold;
      }
      .scroll-history h2, .scroll-history p{
        color: gray;
        -webkit-transition: color 0.5s;
        transition: color 0.5s;
        font-weight:bold;
      }
      .year{
        flex-basis: 20%;
        width:20%;
        color:  #154B9A; 
        font-size:6vw;
        font-weight:bold;
      }
      .year-history{
        flex-basis: 20%;
        position: relative;
        top:10vh;
        right:0%;
        width:20%;
        color:black; 
        font-size:5vw;
        font-weight:bold;
      }
      .icon-year{position: relative;}
      .icon-wrap{
        border:2px solid #143B9A;
        width:3rem;height:3rem;border-radius: 100%; 
        position:absolute; 
        top:10%;
        left:-3.5%;
        transform: translate(-50%, -50%);
    }
      #top-icon{
        border:2px solid #143B9A;
        width:3rem;height:3rem;border-radius: 100%; 
    }
      .history-icon{
          background-color:  #154B9A; 
          width:2rem;height:2rem;border-radius: 100%; 
          position:relative; 
          top:10%;
          left:-3.5%;
          transform: translate(-50%, -50%);
      }
      #top-icon,#top-ic{
        position:absolute; 
        top:60%;
        left:-3.5%;
        transform: translate(-50%, -50%);}
  
      .scroll-history ul li {
        font-size: 2vw;
        line-height: 4vw;
      }
      .scroll-history.scroll-history--focus h2 {
        color: white;
      }
      .scroll-history.scroll-history--focus ul li {
        color: rgb(197, 195, 195);
    
      }
      
      .scroll-history.scroll-history--focus p {
        color:  rgb(197, 195, 195);
      }
      .scroll-history.scroll-history--focus .year {
        color:rgb(197, 195, 195);
        font-weight:bold;
      }
      .scroll-history.scroll-history--focus .history-icon{
          background-color:  rgb(197, 195, 195);
        }
        .scroll-history.scroll-history--focus .icon-wrap {
          border:2px solid rgb(197, 195, 195);
        }
        .scroll-history.scroll-history--focus #top-icon {
          border:2px solid rgb(197, 195, 195);
        }
        .year-cont{
          flex-basis: 75%;
          margin-top: 4vh;
          
        }
        #last-year{height:25vh;}
        .section3{display: none;}
      }