/********** Template CSS **********/
:root {
    --primary: #3e92ff;
    --secondary: #51CFED;
    --light: #F8F2F0;
    --dark: #060315;
}

.fw-medium {
    font-weight: 600 !important;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

/*--------------------------------------------------------------
# Top Bar
--------------------------------------------------------------*/
#topbar {
    background: #fbfbfb;
    font-size: 12px;
    height: 32px;
    padding: 0;
  }
  
  #topbar .contact-info a {
    line-height: 0;
    color: #444444;
    transition: 0.3s;
  }
  
  #topbar .contact-info a:hover {
    color: #5c62b8;
  }
  
  #topbar .contact-info i {
    color: #ffffff;
    line-height: 0;
    margin-right: 5px;
  }
  
  #topbar .contact-info .phone-icon {
    margin-left: 15px;
  }
  
  #topbar .social-links a {
    color: #6f6f6f;
    padding: 4px 12px;
    display: inline-block;
    line-height: 1px;
    transition: 0.3s;
  }
  
  #topbar .social-links a:hover {
    color: #5c62b8;
  }


  /*--------------------------------------------------------------
# 로고이미지 크기 조절
--------------------------------------------------------------*/


@media (max-width: 1258px) {
    .nav-call {
        display: none;
    }
}


@media (max-width: 576px) {
    .logoimg {
        
        width: 195px;
        margin-top: 10px;
        margin-left: -8px;
    }
    .header {
        height: 40px;
        opacity: 0.9;
    }
    }






    /*carousel 효과*/

    .carousel-item::before {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        content: "";
        background-color: rgba(136, 191, 255, 0.25);
    }


    /*  Mobile */
    @media all and (max-width:768px) {
        .Carousel_height {
            width: 100%; 
            height:500px; 
            overflow: hidden;
        }

        .historyimg {
            width: 50%; 
        }

        .ceologo_4 {
            width: 90%;
            margin: 0 auto;
        }

        .partsimg {
            width: 80%; 
        }

        .ceo_sign {
            width: 50%;
            margin: 0 auto;
        }



        .history_P {
           padding-left:15%;
           padding-right: 15%;
        }
    }
    
    /* Tablet */
    @media all and (min-width:768px) and (max-width:1024px) {
        .Carousel_height {
            width: 100%; 
            height:650px; 
            overflow: hidden;
        }

        .historyimg {
            width: 38%; 
        }

        .ceologo_4 {
            width: 56%;
        }

        .partsimg {
            width: 60%; 
        }

        .ceo_sign {
            width: 35%;
            margin: 0 auto;
        }

        .history_logo {
            width: 27%;
            margin: 0 auto;
        }

        .history_P {
            padding-left: 25%;
            padding-right: 25%;
        }

    }

        /* PC */
        @media all and (min-width:1024px) {
            .Carousel_height {
                width: 100%; 
                height:800px; 
                overflow: hidden;
            }

            .historyimg {
                width: 18%; 
            }

            .ceologo_4 {
                width: 46%;
            }

            .partsimg {
                width: 42%; 
            }

            .ceo_sign {
                width: 20%;
                margin: 0 auto;
            }

            .history_logo {
                width: 20%;
                margin: 0 auto;
            }
        }




        @media all and (max-width:412px) {
            .history_logo {
                width: 70%;
                margin: 0 auto;
                margin-bottom: -15%;
            }
        }

        @media all and (min-width:413px) and (max-width:767px) {
            .history_logo {
                width: 50%;
                margin: 0 auto;
                margin-left: 30%;
                margin-right: 30%;
                margin-bottom: -2%;
            }
        }


 
    /*** Oil History  ***/
          /*-------------------------------------
        5.  Education
--------------------------------------*/

.education {
    background:  #f9fbfd;
    padding-top:  50px;
}
.education-horizontal-timeline {
    padding: 80px 0;
}

/*.education-horizontal-timeline*/
.education-horizontal-timeline .col-sm-4 {padding:0 2px;}

.single-horizontal-timeline .experience-time h3{text-transform: capitalize;}
.single-horizontal-timeline .experience-time h3 span{text-transform:lowercase;}
.single-horizontal-timeline .timeline-content h5 {margin: 15px 0;}
.single-horizontal-timeline p {color: #999fb3;max-width: 335px;}

/*.timeline-horizontal-border*/
.timeline-horizontal-border {
    display:  flex;
    align-items: center;
    padding: 26px 0 30px;
}
.timeline-horizontal-border i {
    font-size:  10px;
    color: #3e92ff;
    margin-right:  5px;
}
span.single-timeline-horizontal {
    display:  inline-block;
    background: #b2c1ce;
    height:  1px;
    width: 380px;
}
span.single-timeline-horizontal.spacial-horizontal-line {width: 88px;}
/*.timeline-horizontal-border*/

/*.education-horizontal-timeline*/

/*-------------------------------------
        6.  Skills
--------------------------------------*/
.skills {
    
}
.skill-content{padding: 50px 0 80px;}
.single-skill-content{padding-top: 100px;}
.section-heading h2 {
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
    padding-bottom: 50px;
    border-bottom: 1px solid #e5ebf2;
}
.single-progress-txt {
    display: flex;
}
.single-progress-txt h3 {
    width: 10%;
    color: #3e92ff;
    position: relative;
    top: 6px;
    left: 20px;
}
.barWrapper {
    font-weight: 400;
    font-size: 16px;
    text-transform: uppercase;
}
.progress {
    border-radius:3px;
    overflow: visible;
    background: #e6ecf3;
    height:8px;
    margin-top: 15px;
    width: 85%;
    margin-bottom: 37px;
}
.progress-bar {
   background: #3e92ff;
    border-radius: 3px;
   -webkit-transition: width 1.5s ease-in-out;
   -ms-transition: width 1.5s ease-in-out;
   -moz-transition: width 1.5s ease-in-out;
   -o-transition: width 1.5s ease-in-out;
   transition: width 1.5s ease-in-out;
}
.tooltip{
   position:relative;
   float:right;
}
.tooltip > .tooltip-inner {
   background-color: transparent;
   padding: 1px 5px;
   color: #3e92ff;
   font-weight: 500;
   font-size: 12px;
   border-radius: 0;
}
.popOver + .tooltip > .tooltip-arrow {
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   border-top: 6px solid #fff;
   bottom: -1px;
   transform: translateX(-50%);
   margin-left: 0;
}

/*-------------------------------------
        7. Experience
-------------------------------------*/
.experience {
    padding: 50px 0 100px;
    border-top: 1px solid #e5ebf2;
}
.experience-content {padding-top: 100px;}
.single-timeline-box {margin-bottom: 75px;}

/*experience-time*/
.experience-time {
    position: relative;
}
.experience-time h2 {
    font-weight: 400;
}
.experience-time h3 {
    font-size: 16px;
    font-weight: 300;
    color: #636a82;
    margin-top: 14px;
    text-transform: uppercase;
}
/*experience-time*/

/*main-timeline*/
.main-timeline{
    position: relative;
}
.main-timeline:before{
    content: "";
    width: 2px;
    height: 44%;  /*조절*/
    background: #b2c1ce;
    position: absolute;
    top: 1.5%;
    left: 45.8%;
    z-index: -1;
}
.main-timeline .timeline{
    position: relative;
}

.timeline-content span>i, .experience-time span>i {
    color: #d92cf9;
    position: absolute;
    font-size: 10px;
    left: -14.5%;
    z-index: 1;
}
.timeline-content h4.title {
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
}
.timeline-content h5 {
    color: #636a82;
    font-size: 14px;
    font-weight: 300;
    margin: 18px 0 20px;
}
.main-timeline .description {
    font-size: 14px;
    color: #2c2c2c;
}
.main-timeline .timeline-content.right{
    float: right;
    text-align: left;
}
.timeline-single-before:before {
    content: '';
    top: 57px;
    left: -3px;
    position: absolute;
    width: 100%;
    height:400px;
    border-left:15px solid #fff;
}

.experience-time-responsive{display: none;}
/*-------------------------------------
        8. Profiles
--------------------------------------*/
.profiles {
    padding:  50px 0 100px;
    border:  1px solid #e5ebf2;
}

.profiles-content {padding-top: 100px;}
.profiles-content .col-sm-3{padding:0;}
.profile-txt {
    display: flex;
    align-items: center;
    flex-direction: column;
}
.single-profile {
    position: relative;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #b2c1ce;
    overflow:hidden;
    -webkit-transition:background 0.5s linear; 
    -moz-transition:background 0.5s linear; 
    -ms-transition:background 0.5s linear; 
    -o-transition:background 0.5s linear; 
    transition:background 0.5s linear;
}
.profile-icon-name {
    text-transform: capitalize;
    color: #636a82;
    font-size: 16px;
}
.single-profile.profile-no-border{border-right:transparent;}
.profile-border {
    border-bottom: 1px solid #b2c1ce;
}
.single-profile-overlay{
    display:flex;
    align-items:center;
    text-transform: capitalize;
    justify-content:center;
    position: absolute;
    top: 0;
    left: 0;
    content: " ";
    width:100%;
    height: 100%;
    background: #3e92ff;
    background: -moz-linear-gradient(left, #3e92ff 0%, #3e92ff 100%);
    background: -webkit-linear-gradient(left, #3e92ff 0%,#3e92ff 100%);
    background: linear-gradient(to right, #3e92ff 0%,#3e92ff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e92ff', endColorstr='#b636ff',GradientType=1 );
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    -ms-transform:scale(0);
    -o-transform:scale(0);
    transform:scale(0);
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}
.single-profile:hover .single-profile-overlay{
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
    top:0;
}
.single-profile:hover .profile-icon-name,.single-profile:hover .profile-txt a>i{color: #fff;}
.single-profile:hover .profile-border {border:transparent;}
          
    /*** Oil History 여기까지 ***/





    @media (max-width: 577px) {
        .logoimg {
            width: 180px;
            margin-top: 8px;
            
        }
        .header {
            height: 55px;
        }


    }
    

   @media (min-width: 577px) {
        .logoimg {
            width: 220px;
            margin-top: 8px;
            
        }
        .header {
            height: 75px;
        }


    }

    @media (min-width:992px) {
        .logoimg {
            width: 220px;
            margin-top: 8px;
            
        }
        .header {
            height: 75px;
        }
    }


/*** Button ***/
.btn {
    font-weight: 600;
    transition: .5s;
}

.btn.btn-primary,
.btn.btn-secondary {
    color: #FFFFFF;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

/*** Navbar ***/
.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
    
}

.navbar-light .navbar-nav .nav-link {
    position: relative;
    margin-right: 30px;
    padding: 25px 0;
    color: #FFFFFF;
    font-size: 15px;
    text-transform: uppercase;
    outline: none;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--primary);
}

@media (max-width: 991.98px) {
    .navbar-light .navbar-nav .nav-link  {
        margin-right: 0;
        padding: 10px 0;
    }

    .navbar-light .navbar-nav {
        border-top: 1px solid #EEEEEE;
    }
}

.navbar-light .navbar-brand,
.navbar-light a.btn {
    height: 65px;
}

.navbar-light .navbar-nav .nav-link {
    color: var(--dark);
    font-weight: 500;
}

.navbar-light.sticky-top {
    top: -100px;
    transition: .5s;
}

@media (min-width: 992px) {
    .navbar-light .navbar-nav .nav-link::before {
        position: absolute;
        content: "";
        width: 0;
        height: 5px;
        top: -6px;
        left: 50%;
        background: #FFFFFF;
        transition: .5s;
    }

    .navbar-light .navbar-nav .nav-link:hover::before,
    .navbar-light .navbar-nav .nav-link.active::before {
        width: 100%;
        left: 0;
    }

    .navbar-light .navbar-nav .nav-link.nav-contact::before {
        display: none;
    }

    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}


/*** Header ***/
@media (max-width: 768px) {
    .header-carousel .owl-carousel-item {
        position: relative;
        min-height: 500px;
    }
    
    .header-carousel .owl-carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .header-carousel .owl-carousel-item h5,
    .header-carousel .owl-carousel-item p {
        font-size: 14px !important;
        font-weight: 400 !important;
    }

    .header-carousel .owl-carousel-item h1 {
        font-size: 30px;
        font-weight: 600;
    }
}

.header-carousel .owl-nav {
    position: absolute;
    top: 50%;
    right: 8%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
}

.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next {
    margin: 7px 0;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: transparent;
    border: 1px solid #FFFFFF;
    border-radius: 45px;
    font-size: 22px;
    transition: .5s;
}

.header-carousel .owl-nav .owl-prev:hover,
.header-carousel .owl-nav .owl-next:hover {
    background: var(--primary);
    border-color: var(--primary);
}


.page-header {
    background: linear-gradient(rgba(6, 3, 21, .5), rgba(6, 3, 21, .5)), url(../img/trade.jpg) center center no-repeat;
    background-size: cover;
}

.page-header1 {
    background: linear-gradient(rgba(6, 3, 21, .5), rgba(6, 3, 21, .5)), url(../img/container-ship.jpg) center center no-repeat;
    background-size: cover;
}

.page-header2 {
    background: linear-gradient(rgba(6, 3, 21, .5), rgba(6, 3, 21, .5)), url(../img/parts01.jpg) center center no-repeat;
    background-size: cover;
}

.page-header3 {
    background: linear-gradient(rgba(6, 3, 21, .5), rgba(6, 3, 21, .5)), url(../img/board.jpg) center center no-repeat;
    background-size: cover;
}


.breadcrumb-item + .breadcrumb-item::before {
    color: var(--light);
}


/*** About ***/
.ceologo {
    width: 35%;
    padding-right: 3%; 
    padding-left: 3%; 
    padding-top: 3%;
    padding-bottom: 3%;
    float: right;
  }
  .ceologo_2 {
    width: 36%;
    padding-right: 8%; 
    margin-left: 3%; 
    padding-top: 5%;
    margin-bottom: 3%;
    float: right;
  }
  .ceologo_3 {
    width: 40%;
    padding-right: 3%; 
    padding-left: 3%; 
    padding-top: 3%;
    padding-bottom: 3%;
    float: left;
  }
  .ceologo_4 {
    margin-right: 1%; 
    margin-left: 5%; 
    margin-top: 5%;
    margin-bottom: 5%;
    float: right;
  }

  .ceo_sign {
    margin-right: 5%; 
    margin-left: 5%; 
    margin-top: 2%;
    margin-bottom: 5%;
    float: right;
   }

   .history_logo {
    float: top;
   }

   .history_P {
    font-size:1.5rem; 
    font-weight: 800; 
    color:rgb(73, 73, 73); 
    font-family: 'BookkMyungjo-Bd'; 
    padding:0.5%; 
    vertical-align : sub;"
   }
   



@media (min-width: 992px) {
    .container.about {
        max-width: 100% !important;
    }

    .about-text  {
        padding-right: calc(((100% - 960px) / 2) + .75rem);
    }
}

@media (min-width: 1200px) {
    .about-text  {
        padding-right: calc(((100% - 1140px) / 2) + .75rem);
    }
}

@media (min-width: 1400px) {
    .about-text  {
        padding-right: calc(((100% - 1320px) / 2) + .75rem);
    }
}


/*** Feature ***/
@media (min-width: 992px) {
    .container.feature {
        max-width: 100% !important;
    }

    .feature-text  {
        padding-left: calc(((100% - 960px) / 2) + .75rem);
    }
}

@media (min-width: 1200px) {
    .feature-text  {
        padding-left: calc(((100% - 1140px) / 2) + .75rem);
    }
}

@media (min-width: 1400px) {
    .feature-text  {
        padding-left: calc(((100% - 1320px) / 2) + .75rem);
    }
}


/*** Service, Price & Team ***/
.service-item,
.price-item,
.team-item {
    box-shadow: 0 0 45px rgba(0, 0, 0, .07);
}

.service-item img,
.team-item img {
    transition: .5s;
}

.service-item:hover img,
.team-item:hover img {
    transform: scale(1.1);
}

.service-item a.btn-slide,
.price-item a.btn-slide,
.team-item div.btn-slide {
    position: relative;
    display: inline-block;
    overflow: hidden;
    font-size: 0;
}

.service-item a.btn-slide i,
.service-item a.btn-slide span,
.price-item a.btn-slide i,
.price-item a.btn-slide span,
.team-item div.btn-slide i,
.team-item div.btn-slide span {
    position: relative;
    height: 40px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    color: #FFFFFF;
    background: var(--primary);
    border-radius: 0 35px 35px 0;
    transition: .5s;
    z-index: 2;
}

.team-item div.btn-slide span a i {
    padding: 0 10px;
}

.team-item div.btn-slide span a:hover i {
    background: var(--secondary);
}

.service-item a.btn-slide span,
.price-item a.btn-slide span,
.team-item div.btn-slide span {
    padding-left: 0;
    left: -100%;
    z-index: 1;
}

.service-item:hover a.btn-slide i,
.price-item:hover a.btn-slide i,
.team-item:hover div.btn-slide i {
    border-radius: 0;
}

.service-item:hover a.btn-slide span,
.price-item:hover a.btn-slide span,
.team-item:hover div.btn-slide span {
    left: 0;
}

.service-item a.btn-slide:hover i,
.service-item a.btn-slide:hover span,
.price-item a.btn-slide:hover i,
.price-item a.btn-slide:hover span {
    background: var(--secondary);
}


/*** Testimonial ***/
.testimonial-carousel .owl-item .testimonial-item {
    position: relative;
    transition: .5s;
}

.testimonial-carousel .owl-item.center .testimonial-item {
    box-shadow: 0 0 45px rgba(0, 0, 0, .08);
    animation: pulse 1s ease-out .5s;
}

.testimonial-carousel .owl-dots {
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    background: var(--primary);
    border: 5px solid var(--light);
    border-radius: 15px;
    transition: .5s;
}

.testimonial-carousel .owl-dot.active {
    background: var(--light);
    border-color: var(--primary);
}


/*** Contact ***/
@media (min-width: 992px) {
    .container.contact-page {
        max-width: 100% !important;
    }

    .contact-page .contact-form  {
        padding-left: calc(((100% - 960px) / 2) + .75rem);
    }
}

@media (min-width: 1200px) {
    .contact-page .contact-form  {
        padding-left: calc(((100% - 1140px) / 2) + .75rem);
    }
}

@media (min-width: 1400px) {
    .contact-page .contact-form  {
        padding-left: calc(((100% - 1320px) / 2) + .75rem);
    }
}




/* 회사 연혁 history */
.main-timeline {
    position: relative
    overflow:hidden;
    
  }
  
  .main-timeline:before {
    content: "";
    display: block;
    width: 2px;
    height: 100%;
    background: #c6c6c6;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0
  
    /*max-height: calc(100% - 38px);
    overflow: hidden;
    /*white-space: nowrap;
    text-overflow: ellipsis;*/
  }
  
  .main-timeline .timeline {
    margin-bottom: 40px;
    position: relative;
  }
  
  .main-timeline .timeline:after {
    content: "";
    display: block;
    clear: both
  }
  
  .main-timeline .icon {
    width: 22px;
    height: 22px;
    line-height: 22px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
  }
  
  .main-timeline .icon:before,
  .main-timeline .icon:after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.33s ease-out 0s
  }
  
  .main-timeline .icon:before {
    background: #fff;
    border: 2px solid #232323;
    left: -3px
  }
  
  .main-timeline .icon:after {
    border: 2px solid #c6c6c6;
    left: 3px
  }
  
  .main-timeline .timeline:hover .icon:before {
    left: 3px
  }
  
  .main-timeline .timeline:hover .icon:after {
    left: -3px
  }
  
  .main-timeline .date-content {
    width: 50%;
    float: left;
    margin-top: 22px;
    position: relative
    
  }
  
  .main-timeline .date-content:before {
    content: "";
    width: 36.5%;
    height: 2px;
    background: #c6c6c6;
    margin: auto 0;
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0
  }
  
  .main-timeline .date-outer {
    width: 125px;
    height: 125px;
    font-size: 16px;
    text-align: center;
    margin: auto;
    z-index: 1
  }
  
  .main-timeline .date-outer:before,
  .main-timeline .date-outer:after {
    content: "";
    width: 125px;
    height: 125px;
    margin: 0 auto;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transition: all 0.33s ease-out 0s
  }
  
  .main-timeline .date-outer:before {
    background: #fff;
    border: 2px solid #232323;
    left: -6px
  }
  
  .main-timeline .date-outer:after {
    border: 2px solid #c6c6c6;
    left: 6px
  }
  
  .main-timeline .timeline:hover .date-outer:before {
    left: 6px
  }
  
  .main-timeline .timeline:hover .date-outer:after {
    left: -6px
  }
  
  .main-timeline .date {
    width: 100%;
    margin: auto;
    position: absolute;
    top: 27%;
    left: 0
  }
  
  .main-timeline .month {
    font-size: 18px;
    font-weight: 700
  }
  
  .main-timeline .year {
    display: block;
    font-size: 30px;
    font-weight: 700;
    color: #232323;
    line-height: 36px
  }
  
  .main-timeline .timeline-content {
    width: 50%;
    padding: 20px 0 20px 50px;
  
    float: left;
  }
  
  .main-timeline .title {
    font-size: 19px;
    font-weight: 700;
    line-height: 24px;
    /*margin: 0 0 15px 0
    */
    padding-top: 30px;
    font-family: 'NEXON Lv2 Gothic';
  }
  
  .main-timeline .description {
    margin-bottom: 0
  }
  
  .main-timeline .timeline:nth-child(2n) .date-content {
    float: right
  }
  
  .main-timeline .timeline:nth-child(2n) .date-content:before {
    left: 10px
  }
  
  .main-timeline .timeline:nth-child(2n) .timeline-content {
    padding: 20px 50px 20px 0;
    text-align: right
  }
  
  @media only screen and (min-width:1px) and (max-width:480px) {
      .video_1 {
               min-height: 400px;
               width: auto;
               overflow: hidden;
      }
    }
    @media only screen and (min-width:481px) {
      .video_1 {
               min-height: 800px;
               width: auto;  
               overflow: hidden;
      }
    }
  
  
  @media only screen and (min-width: 992px) {
  
    
      .org_image {
        display: none;
      }
    
      .org_image_big {
        text-align: center;
        margin: 0 auto;
        width: 70%;
    }
  }
  
  
  
  @media only screen and (max-width: 991px) {
      @media only screen and (max-width: 991px) {
          .main-timeline .date-content {
              margin-top: 35px
          }
          .main-timeline .date-content:before {
              width: 22.5%
          }
          .main-timeline .timeline-content {
              padding: 10px 0 10px 30px
          }
          .main-timeline .title {
              font-size: 17px
          }
          .main-timeline .timeline:nth-child(2n) .timeline-content {
              padding: 10px 30px 10px 0
          }
      .org_image_big {
          display: none;
      
      }
      
      .org_image, .orgpng {
        width: 70%;
      
      }
    
    }
  }
  
    
  @media only screen and (max-width: 767px) {
  
      .org_image_big {
          display: none;
      }
      
      .org_image {
        width:85%;
      
      }
    
      .org_image_big {
        display: none;
    }
  
  
  
  
  
    .main-timeline:before {
          display: none;
      /*margin: 0;
      left: 7px*/
  }
  
  .main-timeline .timeline {
      margin-bottom: 20px
  }
  .main-timeline .timeline:last-child {
      margin-bottom: 0
  }
  .main-timeline .icon {
     /* margin: auto 0 */
      display: none
  }
  
  
  .main-timeline .date-content {
      width: 95%;
      float: right;
      margin-top: 0
  }
  .main-timeline .date-content:before {
      display: none
  }
  .main-timeline .date-outer {
      width: 110px;
      height: 110px
  }
  .main-timeline .date-outer:before,
  .main-timeline .date-outer:after {
      width: 110px;
      height: 110px
  }
  .main-timeline .date {
      top: 30%
  }
  .main-timeline .year {
      font-size: 24px
  }
  .main-timeline .timeline-content,
  .main-timeline .timeline:nth-child(2n) .timeline-content {
      width: 95%;
      text-align: center;
      padding: 10px 0
  }
  .main-timeline .title {
      margin-bottom: 10px
  }
  }
  
  @media only screen and (min-width:1px) and (max-width:480px) {


    .main-timeline:before {
        display: none;

}

    .org_image_big {
        display: none;
    }
    
    .org_image {
      max-width: 85%;
    
    }
}
/*회사 연혁 history 여기까지*/



/*** 회사 연혁 아래 Awards  ***/
.main-timeline_Awards {
    position: relative
    overflow:hidden;
    
  }
  
  .main-timeline_Awards:before {
    content: "";
    display: block;
    width: 2px;
    height: 100%;
    background: rgb(255, 217, 0); /*메인 줄기 색상*/
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0
  
    /*max-height: calc(100% - 38px);
    overflow: hidden;
    /*white-space: nowrap;
    text-overflow: ellipsis;*/
  }
  
  .main-timeline_Awards .timeline {
    margin-bottom: 40px;
    position: relative;
  }
  
  .main-timeline_Awards .timeline:after {
    content: "";
    display: block;
    clear: both
  }
  
  .main-timeline_Awards .icon {
    width: 22px;
    height: 22px;
    line-height: 22px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
  }
  
  .main-timeline_Awards .icon:before,
  .main-timeline_Awards .icon:after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.33s ease-out 0s
  }
  
  .main-timeline_Awards .icon:before {
    background: #fff;
    border: 2px solid rgb(255, 217, 0); /*헛*/
    left: -3px
  }
  
  .main-timeline_Awards .icon:after {
    border: 2px solid rgb(255, 246, 194);
    left: 3px
  }
  
  .main-timeline_Awards .timeline:hover .icon:before {
    left: 3px
  }
  
  .main-timeline_Awards .timeline:hover .icon:after {
    left: -3px
  }
  
  .main-timeline_Awards .date-content {
    width: 50%;
    float: left;
    margin-top: 22px;
    position: relative
    
  }
  
  .main-timeline_Awards .date-content:before {
    content: "";
    width: 36.5%;
    height: 2px;
    background: rgb(255, 217, 0);
    margin: auto 0;
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0
  }
  
  .main-timeline_Awards .date-outer {
    width: 125px;
    height: 125px;
    font-size: 16px;
    text-align: center;
    margin: auto;
    z-index: 1
  }
  
  .main-timeline_Awards .date-outer:before,
  .main-timeline_Awards .date-outer:after {
    content: "";
    width: 125px;
    height: 125px;
    margin: 0 auto;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transition: all 0.33s ease-out 0s
  }
  
  .main-timeline_Awards .date-outer:before {
    background: #fff;
    border: 2px solid rgb(255, 217, 0)
    left: -6px
  }
  
  .main-timeline_Awards .date-outer:after {
    border: 2px solid rgb(255, 245, 188)
    left: 6px
  }
  
  .main-timeline_Awards .timeline:hover .date-outer:before {
    left: 6px
  }
  
  .main-timeline_Awards .timeline:hover .date-outer:after {
    left: -6px
  }
  
  .main-timeline_Awards .date {
    width: 100%;
    margin: auto;
    position: absolute;
    top: 27%;
    left: 0
  }
  
  .main-timeline_Awards .month {
    font-size: 18px;
    font-weight: 700
  }
  
  .main-timeline_Awards .year {
    display: block;
    font-size: 30px;
    font-weight: 700;
    color: #232323; /*연도 글자 색상*/
    line-height: 36px
  }
  
  .main-timeline_Awards .timeline-content {
    width: 50%;
    padding: 20px 0 20px 50px;
  
    float: left;
  }
  
  .main-timeline_Awards .title {
    font-size: 22px;
    font-weight: 700;
    line-height: 24px;
    font-family: 'JalnanGothic';
    color:rgb(255, 217, 0)
    /*margin: 0 0 15px 0
    */
    padding-top: 30px;
    font-family: 'NEXON Lv2 Gothic';
  }
  
  .main-timeline_Awards .description {
    margin-bottom: 0
  }
  
  .main-timeline_Awards .timeline:nth-child(2n) .date-content {
    float: right
  }
  
  .main-timeline_Awards .timeline:nth-child(2n) .date-content:before {
    left: 10px
  }
  
  .main-timeline_Awards .timeline:nth-child(2n) .timeline-content {
    padding: 20px 50px 20px 0;
    text-align: right
  }
  
  @media only screen and (min-width:1px) and (max-width:480px) {
      .video_1 {
               min-height: 400px;
               width: auto;
               overflow: hidden;
      }
    }
    @media only screen and (min-width:481px) {
      .video_1 {
               min-height: 800px;
               width: auto;  
               overflow: hidden;
      }
    }
  
  
  @media only screen and (min-width: 992px) {
  
    
      .org_image {
        display: none;
      }
    
      .org_image_big {
        text-align: center;
        margin: 0 auto;
        width: 70%;
    }
  }
  
  
  
  @media only screen and (max-width: 991px) {
      @media only screen and (max-width: 991px) {
          .main-timeline .date-content {
              margin-top: 35px
          }
          .main-timeline .date-content:before {
              width: 22.5%
          }
          .main-timeline .timeline-content {
              padding: 10px 0 10px 30px
          }
          .main-timeline .title {
              font-size: 17px
          }
          .main-timeline .timeline:nth-child(2n) .timeline-content {
              padding: 10px 30px 10px 0
          }
      .org_image_big {
          display: none;
      
      }
      
      .org_image, .orgpng {
        width: 70%;
      
      }
    
    }
  }
  
    
  @media only screen and (max-width: 767px) {
  
      .org_image_big {
          display: none;
      }
      
      .org_image {
        width:85%;
      
      }
    
      .org_image_big {
        display: none;
    }
  
  
  
  
  
    .main-timeline:before {
          display: none;
      /*margin: 0;
      left: 7px*/
  }
  
  .main-timeline .timeline {
      margin-bottom: 20px
  }
  .main-timeline .timeline:last-child {
      margin-bottom: 0
  }
  .main-timeline .icon {
     /* margin: auto 0 */
      display: none
  }
  
  
  .main-timeline .date-content {
      width: 95%;
      float: right;
      margin-top: 0
  }
  .main-timeline .date-content:before {
      display: none
  }
  .main-timeline .date-outer {
      width: 110px;
      height: 110px
  }
  .main-timeline .date-outer:before,
  .main-timeline .date-outer:after {
      width: 110px;
      height: 110px
  }
  .main-timeline .date {
      top: 30%
  }
  .main-timeline .year {
      font-size: 24px
  }
  .main-timeline .timeline-content,
  .main-timeline .timeline:nth-child(2n) .timeline-content {
      width: 95%;
      text-align: center;
      padding: 10px 0
  }
  .main-timeline .title {
      margin-bottom: 10px
  }
  }
  
  @media only screen and (min-width:1px) and (max-width:480px) {


    .main-timeline:before {
        display: none;

}

    .org_image_big {
        display: none;
    }
    
    .org_image {
      max-width: 85%;
    
    }
}
/*** 회사 연혁 아래 Awards 여기까지 ***/




/*** Footer ***/
.footer {
    background: linear-gradient(rgba(6, 3, 21, .5), rgba(6, 3, 21, .5)), url(../img/map.png) center center no-repeat;
    background-size: cover;
}

.footer .btn.btn-social {
    margin-right: 5px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light);
    border: 1px solid #FFFFFF;
    border-radius: 35px;
    transition: .3s;
}

.footer .btn.btn-social:hover {
    color: var(--primary);
}

.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    letter-spacing: 1px;
    box-shadow: none;
}

.footer .copyright {
    padding: 25px 0;
    font-size: 15px;
    border-top: 1px solid rgba(256, 256, 256, .1);
}

.footer .copyright a {
    color: var(--light);
}


/*--------------------------------------------------------------
# Clients 간략상품소개
--------------------------------------------------------------*/
.clients {
    padding-top: 20px;
  }
  
  .clients .swiper-slide img {
    opacity: 0.8;
    transition: 0.3s;
    filter: drop-shadow (8px 8px 10px rgb(179, 221, 255));

  }
  
  .clients .swiper-slide img:hover {
    filter: none;
    opacity: 1;
  }
  
  .clients .swiper-pagination {
    margin-top: 20px;
    position: relative;
  }
  
  .clients .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: #fff;
    opacity: 1;
    background-color: #ddd;
  }
  
  .clients .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #3e92ff;;
  }



/* 폰트 추가 */
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'BookkMyungjo-Bd';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/BookkMyungjo-Bd.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'WarhavenB';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2312-1@1.1/WarhavenB.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'SOGANGUNIVERSITYTTF';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2312-1@1.1/SOGANGUNIVERSITYTTF.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'JalnanGothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/JalnanGothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'BookkMyungjo-Bd';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/BookkMyungjo-Bd.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
  }