/*
*-------------------------------------------------------------------*
           공통
*-------------------------------------------------------------------*
*/

html {
    scroll-behavior: smooth;
}

/* 스크롤 */
*::-webkit-scrollbar {
    width: 6px;  /* 스크롤바의 너비 */
}

*::-webkit-scrollbar-thumb {
    height: 10%; /* 스크롤바의 길이 */
    background: #b2b2b2; /* 스크롤바의 색상 */
    border-radius: 100px;
    border:none
}

*::-webkit-scrollbar-track {
    background:#f7f7f7;  /*스크롤바 뒷 배경 색상*/
}
.btn_ani a div{
    transition:all 0.3s;
}
.btn_ani a:hover div{
    gap:50px;
}
section{
    overflow: hidden;
}


/*
*-------------------------------------------------------------------*
           메인 이미지 애니메이션
*-------------------------------------------------------------------*
*/

.main01_bg{
    background:url('../images/main_bg02.jpg') no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    animation-duration: 8s;
    animation-name: bgani;
}

@keyframes bgani {
    from {
        filter: brightness(85%);
        background-position: 50% 100%;
    }
  
    to {
        filter: brightness(100%);
        background-position: 50% 50%;
    }
  }

  .service-bg{
    background:url('../images/service_bg.png') center center no-repeat;
    background-position: 50% 50%;
    background-size: cover;
  }

/*
*-------------------------------------------------------------------*
           nav
*-------------------------------------------------------------------*
*/
.nav_scroll{
    transition:all 0.5s
}

.mo_nav{
    height:0;
    opacity: 0;
    transition: all 0.5s;
    z-index: -1;
}

.mo_nav.on{
    height:100%;
    opacity: 1;
    z-index: 20;
}
.submenu-wrapper .submenu{
    visibility: hidden;
    width:100%;
    position:absolute;
    left:50%;
    transform: translate(-50%, 0);
    transition:all 0.5s;
    opacity: 0;
    z-index: -100;
    margin-top:20px;
}
.submenu-wrapper .submenu.on{
    visibility: visible;
    width:100%;
    opacity: 1;
    margin-top:24px;
}

.mo_news_sub{
    visibility: visible;
    height:0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.mo_news_sub.active{
    opacity: 1;
    visibility: visible;
    height: 118px;
    transition: all 0.3s ease-in-out;
    padding:20px 0;
    margin-top:10px;
}

/*
*-------------------------------------------------------------------*
           product slide
*-------------------------------------------------------------------*
*/
.product_hover img{
    transition:all 0.5s;
    scale:1;
}
.product_hover button{
    position:absolute;
    transition: all 0.5s;
    margin-left:auto;
    z-index: 33;
    top:55%;
    left:50%;
    transform: translate(-50%, -50%) ;
    opacity: 0;
}
.product_hover:hover button{
    top:48%;
    opacity: 1;
}
.product_hover button div{
    gap:30px;
}
.product_hover:hover button div{
    animation-duration: 0.5s;
    animation-name: arrowani;
}
@keyframes arrowani {
    from {
        gap:10px;
    }
  
    to {
        gap:30px;
    }
  }


/*
*-------------------------------------------------------------------*
           스크롤매직용 인디케이터
*-------------------------------------------------------------------*
*/

.indicator {
    position: fixed;
    top: 10px;
    left: 10px;
}

.indicator span {
    display:inline-block; 
    padding-left:.5em; 
    padding-right:.5em; 
    background:#fff; 
    opacity:.75
}

.indicator span.active {opacity:.9}

.indicator span::before {content:"";}

.indicator span.active::before {content:"*";}

@media (max-width:600px){
    /* make indicator smaller on small screens */
    .indicator{font-size:.4em;}
}


/*
*-------------------------------------------------------------------*
           solution
*-------------------------------------------------------------------*
*/
.sub_visual.solution { background:url('../images/sub_solution_bg.png') no-repeat center center / cover; }

/*
*-------------------------------------------------------------------*
           cra
*-------------------------------------------------------------------*
*/
.sub_visual.cra { background:url('../images/sub_cra_bg.png') no-repeat center center / cover; }

/*
*-------------------------------------------------------------------*
           career
*-------------------------------------------------------------------*
*/

.sub_visual.career { background:url('../images/sub_career_bg.png') no-repeat center center / cover; }


/* 모달 페이드 애니메이션 */
.modal .modal-overlay{
    transition:all 0.5s;
    opacity: 0;
}
.modal.transition-on .modal-overlay{
    opacity: 0.5;
}
.modal .modal-container{
    transition:all 0.5s;
    margin-top:-200px;
    opacity: 0;
}
.modal.transition-on .modal-container{
    margin-top:0px;
    opacity: 1;
}


/* select */
.form-select{
    display: flex;
    border: 1px solid #354dd2;
}
.form-select select{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    background: url('../images/chevron-down.svg')95% center no-repeat;
}
.form-select select:focus{
    outline: none;
}

[type='checkbox']{display: none;}

.form-input input:checked + div .check_img{
        background:url(../images/check.svg)no-repeat center;
        background-size:14px;
        background-color:#354dd2;
        border-radius: 0.125rem;
        border-color:rgb(79 70 229);
}
.form-text{
    border: 1px solid #354dd2;
}
.form-text input{
    background:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
}
.form-textarea{
    border: 1px solid #354dd2;
}

.form-textarea textarea{
    background:none;
}
input:focus {
    outline: none;
}
textarea:focus {
    outline: none;
}
button:focus {
    outline: none;
}

.slide_position{
top:50%;
left:50%;
transform: translate(-50%, -50%);
}