@media (min-width: 1200px) {
  .timeline > li {
    min-height: 170px;
  }
  .timeline > li .timeline-panel {
    padding: 0 20px 20px 100px;
  }
  .timeline > li .timeline-image {
    width: 60px;
    height: 60px;
    margin-left: -30px;
  }
  .timeline > li .timeline-image h4 {
    margin-top: 40px;
  }
  .timeline > li.timeline-inverted > .timeline-panel {
    padding: 0 100px 20px 20px;
  }
}

@media (min-width: 992px) {
  .timeline > li {min-height:120px;}
  .timeline > li .timeline-panel {padding: 0 20px 20px;}
  .timeline > li .timeline-image {width: 60px;height: 60px;margin-left: -30px;}
  .timeline > li .timeline-image h4 {font-size: 18px;line-height: 26px;margin-top: 30px;}
  .timeline > li.timeline-inverted > .timeline-panel {padding: 0 20px 20px;}
    .mode_box {width:100%;padding:0}
    .down-btn {width:50%}
  #mainNav {
    padding:0;
    -webkit-transition: padding-top 0.3s, padding-bottom 0.3s;
    transition: padding-top 0.3s, padding-bottom 0.3s;
    border: none;
    background: transparent;
  }
  #mainNav .navbar-brand {
    font-size: 2em;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    font-weight:400;
    letter-spacing:-.1em;
  }
  #mainNav .navbar-nav .nav-item .nav-link {padding: 1.1em 1em !important;}
  #mainNav.navbar-shrink {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  #mainNav.navbar-shrink .navbar-brand {font-size: 2em;padding: 12px 0;}
  #service > .container > .row > [class^="col-md-"] {
        width: calc(100% / 4 - 10px);
        margin: 0 5px;
        flex: inherit;
        box-sizing: border-box;
        padding: 20px;
        color: #fff;
        border-radius: 5px;
    }

  #service > .container > .row > [class^="col-md-"]:after {display:inline-block;position:absolute;top:50px;right:0;content:"";height:100px;width:1px;background:rgba(255,255,255,.3);}
  #service > .container > .row > [class^="col-md-"]:last-child {}
  #service > .container > .row > [class^="col-md-"]:last-child:after {width:0}
}

@media (min-width: 768px) {
   section {padding: 100px 0;}
  .ml-auto {height:auto;background:transparent}
  .navbar-nav {margin:0}
  header.masthead .intro-text {width:50%;}
  header.masthead .intro-img {width:50%;}
  header.masthead .intro-img img {width:90%}
  header.masthead .intro-text .intro-lead-in {
    font-size: 2.5em;
    line-height: 40px;
    margin-bottom: 0;
    font-family: "Spoqa Han Sans", sans-serif;
    font-weight:100;
  }
  header.masthead .intro-text .intro-heading {
    font-size: 3em;
    margin-bottom: 50px;
    font-family: "Spoqa Han Sans", sans-serif;
    letter-spacing:-5px;
  }
  header.masthead .intro-text p {
    position:absolute;
    left:0;
    top:100px;
    padding:0;
    margin:0;
    font-size:12px
    }


    .timeline:before {
    left: 50%;
  }
  .timeline > li {
    min-height: 100px;
  }
  .timeline > li .timeline-panel {
    float: left;
    width: 41%;
    padding: 20px 20px 20px 30px;
    text-align: right;
    border-radius:5px
  }
  .timeline > li .timeline-image {
    left: 50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
  }
  .timeline > li .timeline-image h4 {
    font-size: 13px;
    line-height: 18px;
    margin-top: 16px;
  }
  .timeline > li .timeline-image > i {line-height:80px;font-size:2.5em;}
  .timeline > li.timeline-inverted > .timeline-panel {
    float: right;
    padding: 20px 30px 20px 20px;
    text-align: left;
    border-radius:5px;
  }

    #service > .container > .row > [class^="col-md-"] {
    width: calc(100% / 4);
    margin: 0;
    flex: inherit;
    box-sizing: border-box;
    padding: 20px;
    color: #fff;
    border-radius: 0;
  }


}


@media (min-width: 767px) {
  #portfolio .portfolio-item {
    margin: 0 0 30px;
  }
}

@media (max-width: 768px) {
    section {padding: 50px 0;}
    header.masthead .container {padding-bottom:20px}
    header.masthead .intro-text {padding-top:140px;float:none;}
    header.masthead .intro-img {
        position:relative;
        margin:0 0 20px 0;
        top:0;
        width:100%;
        height:auto;
        text-align:center;
    }
    header.masthead .intro-img img {float:none;width:100%}


    header.masthead .intro-box {}
    header.masthead .intro-box .box {}
    header.masthead .intro-box .box.left {float:left;width:100%;border-radius:5px;margin-bottom:15px}
    header.masthead .intro-box .box.right {float:left;width:100%;border-radius:5px;}
    header.masthead .intro-box .box p {}
    header.masthead .intro-box .box h3 {}
    header.masthead .intro-box .box .point-text {}
    header.masthead .intro-box .box a.box-btn {}


 
    .timeline:before {left:50%}


    section#step {}
    section#step > .container > .row > .col-lg-12 > h2 {margin-bottom:20px}

    section#company .img_box {margin-bottom:20px}
    section#company .mode_box {padding:0 15px}
    section#company p {position:relative;bottom:auto}

}


@media (max-width: 576px) {
    #mainNav .navbar-nav .nav-item .nav-link {color:#fff}

    #mainNav .navbar-nav .nav-item .nav-link.active, 
    #mainNav .navbar-nav .nav-item .nav-link:hover {color:#fff}

    header.masthead .intro-text .intro-lead-in {line-height:1}

    #service > .container > .row > *[class^="col-md-"] {width:100%;margin:0 10px;border-radius:0;border-bottom:1px solid rgba(255,255,255,.3);}
    #service > .container > .row > *[class^="col-md-"]:first-child {padding:20px 20px 0 20px;border:none}
    #service > .container > .row > *[class^="col-md-"]:first-child > dl {margin-bottom:0}
    #service > .container > .row > *[class^="col-md-"]:last-child {border:none}
    #service > .container > .row > [class^="col-md-"] > p.text {margin-top:5px}
    #service > .container > .row {margin:0 0 20px 0}
    section > .container > .row > .col-lg-12 > h2 {margin-bottom:20px;letter-spacing:-1px}
    #service > .container > .row > [class^="col-md-"] > dl > dd.title {width:100%}

    #service > .container > .row > [class^="col-md-"] {padding:10px 20px}
    #service > .container > .row > [class^="col-md-"] > dl > dt {margin-bottom:3px}
    #service > .container > .row > [class^="col-md-"]:last-child {padding:10px 20px 20px 20px}

    .timeline > li .timeline-image {top:20px;left:10px}

    .timeline > li .timeline-panel {background:rgba(255,255,255,.7);border-radius:5px}
    header.masthead .intro-text a.btn,header.masthead .intro-text a.btn2 {font-size:12px;padding:0 10px}

    section#company {padding:0 0 50px 0}

    header.masthead .intro-text p.sample {}

    footer .list-inline .list-inline-item {margin:0 0 5px 0}
    footer .list-inline .list-inline-item:after {}


    .fixed-top .container > p.sample1 {position:absolute;top:10px;right:60px}
    .fixed-top .container > p.sample2 {position:absolute;top:30px;right:60px;font-size:11px}


}