*{
    margin:0;
    padding:0;
    font-family: 'Noto Sans KR', sans-serif;
}

li{
    list-style: none;
}

a{
    text-decoration: none;
    color:#222;
}

  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;800;900&display=swap');



html::-webkit-scrollbar {
    display: none;
}

html{
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    font-family: 'Noto Sans KR', sans-serif;
}

html:root{
    --swiper-theme-color: #222;
}

body{
    width:100%;
    color:#222;
    font-family: 'Noto Sans KR', sans-serif;
}

#smtg_logo_div img{
    display: none;
}


.mb{
    display: none;
}


.main_section_wrap{
    padding-top:180px;
    padding-bottom:180px;
}

.main_title{
    width:80%;
    font-size: 50px;
    font-weight: 900;
    margin:0 auto;
}

.main_section_wrap p{
    font-size: 35px;
}

.main_title span{
    background:linear-gradient(to right, #3e96ff, #174e8a);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}



/* popup */


.popup, .popup01{
    position: fixed;
    width:100%;
    z-index: 99;
}



.popup_img, .popup_img01{
    position:absolute;
    width:25%;
    top:50%;
    left:8%;
    transform: translateY(-50%);
}


.popup_img01{
    width:25%;
    left:35%;
    border-radius: 10px 10px 0px 0px;
}

.popup_img img, .popup_img01 img{
    width:100%;
    border-radius: 10px 10px 0px 0px;
}

.popup_img01 img{
    box-sizing: border-box;
    border: 1px solid #000;
}


.popup_close_btn, .popup_close_btn01{
    position: absolute;
    display: flex;
    justify-content: space-between;
    width:100%;
    height:50px;
    bottom:-40px;
    color:#fff;
    background: #000;
    text-align: center;
    line-height: 50px;
    border-radius: 0 0 10px 10px;
}


.popup_mv{
    position: absolute;
    width:75%;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

.popup_mv video{
    width:100%;
}



.today_close{
    width:60%;
    text-align: left;
    margin-left:4%;
}



.popup_close_btn .close, .popup_close_btn01 .close{
    width:40%;
    cursor: pointer;
}



.popup_close_btn button, .popup_close_btn01 button{
    font-size: 18px;
    line-height: 50px;
    color:#fff;
    background: none;
    border: none;
    cursor: pointer;
}




.popup_close_btn h3, .popup_close_btn01 h3{
    color:#fff;
    width:50%;
}




/* ----------- menu --------- */


header{
    position: relative;
    width:100%;
    height:80px;
    z-index: 99;
}



.menu_wrap .logo{
    position: relative;
    width:50px;
    height:80px;
    margin-left:5%;
}


.logo img{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    width:100%;
}



.menu_wrap{
    position: fixed;
    display: flex;
    width:100%;
    height:80px;
    background: #fff;
}

.menu_wrap > ul{
    display: flex;
    margin-left:5%;
}

.menu_wrap > ul > li{
    font-size: 15px;
    margin-left:80px;
    text-align: center;
}

.menu_wrap > ul > li:first-child{
    margin-left:0;
}

.menu_wrap .main_menu_title h3{
    line-height: 80px;
}

.menu_wrap ul li ul li{
    line-height: 50px;  
    background: #fff;
}

.menu_wrap ul li ul li:last-child{
    border-radius: 0 0 10px 10px;
}


.menu_wrap::after{
    display: block;
    content:"";
    position: absolute;
    bottom:0;
    width:100%;
    height:2px;
    background:linear-gradient(to right, #3e96ff, #174e8a);
}


.menu_wrap li:hover h3{
    color:#3e96ff;
}

.menu_wrap ul li ul li:hover p{
    color:#3e96ff;
}

.sub_menu{
    display: none;
}

.menu_on h3{
    color:#3e96ff;
}

.menu_on{
    color:#3e96ff;
}




.right_btn{
    display: flex;
    position: absolute;
    right:5%;
    top:50%;
    transform: translateY(-50%);
}

.right_btn div{
    display: flex;
    justify-content: center;
    padding-right:10px;
    width:160px;
    height:50px;
}

.right_btn a{
    margin:10px;
    border-radius: 15px;
    border:2px solid #222;
}


.right_btn img{
    width:50px;
}

.right_btn h3{
    line-height: 50px;
}



.right_btn .download{
    text-align: center;
    color:#fff;
    border:none;
    background: #174e8a;
}

.download div{
    padding:0;
}





/* ------------ floating menu ---------- */



.float_menu{
    position: fixed;
    width:60px;
    right:20px;
    top:100px;
    z-index: 10;
}

.float_menu ul{
    position: absolute;
    width:60px;
}

.float_menu ul li{
    position: relative;
    margin-top:5px;
    width:70px;
    height:70px;
    background: #222;
    border-radius: 50%;
}

.float_menu ul li img{
    position: absolute;
    width:55px;
    height:55px;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}






/* ---------footer--------- */



footer{
    position: relative;
    height:100px;
    padding-bottom:20px;
    color:#fff;
    background: #222;
    z-index: 10;
}


.footer_call{
    position: absolute;
    display: flex;
    left:5%;
    top:50%;
    transform: translateY(-50%);
}

.footer_call h2{
    margin-left:10px;
    line-height: 30px;
    font-size: 35px;
}

.footer_call img{
    width:30px;
    height:30px;
}


.footer_etc{
    position: absolute;
    left:20%;
    top:50%;
    transform: translateY(-50%);
}

.footer_etc ul li{
    display: flex;
}

.footer_etc p{
    margin-left:20px;
    font-size: 15px;
    line-height: 25px;
}

.footer_sns ul{
    position: absolute;
    top:50%;
    right:200px;
    transform: translateY(-50%);
    display: flex;
    gap:6%;
}

.footer_sns ul li{
    width:48px;
}



.footer_sns ul li img{
    width:100%;
}



@media (max-width:1500px) and (min-width:1024px){

    
    .menu_wrap .logo{
        margin-left:40px;
    }

    .menu_wrap > ul{
        margin-left:20px;
    }

    .menu_wrap > ul > li{
        margin-left:40px;
    }

    .menu_wrap .main_menu_title h3{
        font-size: 15px;
    }

    .right_btn{
        right:30px;

    }    

    .right_btn a{
        margin:5px;
    }

    .right_btn div{
        width:120px;
        height:40px;
    }

    .right_btn img{
        width:40px;
    }

    .right_btn h3{
        font-size: 15px;
        line-height: 40px;
    }



    .popup_img{
        width:30%;
    }

    .popup_close_btn, .popup_close_btn01{
        font-size: 15px;
    }

    .popup_close_btn button, .popup_close_btn01 button{
        font-size: 15px;
    }


/* ------------ floating menu ---------- */



.float_menu{
    width:50px;
}

.float_menu ul{
    width:50px;
}

.float_menu ul li{
    width:50px;
    height:50px;
}

.float_menu ul li img{
    width:40px;
    height:40px;
}





/* ---------footer--------- */




footer{
    height:150px;
}

.footer_etc_wrap{
    position: absolute;
    width:100%;
    height:90px;
    top:50%;
    transform: translateY(-50%);
}


.footer_call{
    position: absolute;
    display: flex;
    left:50px;
    top:0;
    transform: translateY(0);
}


.footer_etc{
    position: absolute;
    left:50px;
    top:70px;
}

.footer_sns ul{
    top:100%;
    right:100px;
}

.footer_sns ul li{
    width:35px;
}

.footer_sns ul li:nth-child(2){
    margin-left:10px;
}

.footer_sns ul li img{
    width:100%;
}



}




@media (max-width:1023px) and (min-width:501px){

    .download{
        font-size: 0.7rem;
    }

    .download img{
        width:20px;
    }

    
    .mb{
        display: block;
    }

    .pc{
        display: none;
    }

    .main_section_wrap{
        padding-top:60px;
        padding-bottom:60px;
    }
    
    .main_title{
        width:90%;
        font-size: 30px;
    }
    
    .main_section_wrap p{
        font-size: 20px;
    }


    .menu_wrap .logo{
        margin-left:150px;
    }

    
    
    /* ------ header ------ */


    header{
        position: relative;
        width:100vw;
        height:60px;
    }

    .mb_header_wrap{
        position: fixed;
        width:100vw;
        height:60px;
        background: #fff;
        z-index: 10;
    }

    .mb_header_wrap .logo{
        position: relative;
        left:5%;
        width:50px;
        height:60px;
    }

    .mb_header_wrap .logo img{
        position: absolute;
        width:35px;
        height:35px;
        top:50%;
        transform: translateY(-50%);
    }

    .mb_header_wrap::after{
        display: block;
        content:"";
        position: absolute;
        bottom:0;
        width:100%;
        height:2px;
        background:linear-gradient(to right, #3e96ff, #174e8a);
    }


    .mb_menu_btn{
        position: absolute;
        right:5%;
        top:50%;
        transform: translateY(-50%);
        cursor: pointer;
    }

    
    .mb_menu_btn span{
        display: block;
        width:30px;
        height:3px;
        background: #222;
        border-radius: 3px;
        margin-top:5px;
    }

    .mb_menu_btn span:nth-child(1){
        margin-top:0;
    }

    .main_menu{
        position: absolute;
        top:0;
        right: -1200px;
        width:70%;
        height:100vh;
        background: #fff;
        z-index: 9999;
    }

    .main_menu_bg{
        position: absolute;
        display: none;
        top:0;
        left:0;
        width:100%;
        height:100vh;
        background: rgb(34, 34, 34,0.7);
        z-index: 10;
        
    }

    .mb_main_menu_close_btn{
        position: absolute;
        width:30px;
        height:30px;
        right:20px;
        top:35px;
        cursor: pointer;
    }

    .mb_main_menu_close_btn span{
        position: absolute;
        display: block;
        content: "";
        width:30px;
        height:3px;
        transform-origin:50% 50%;
        transform: rotate(45deg);
        background: #222;
        border-radius: 5px;
    }

    
    .mb_main_menu_close_btn span:nth-child(2){
        transform: rotate(-45deg);
    }

    .main_menu > ul{
        margin-top:50px;
    }

    .main_menu li{
        width:85%;
        margin:0 auto;
        line-height: 50px;
    }

    .main_menu_title{
        position: relative;
    }

    .sub_menu_btn{
        position: absolute;
        top:15px;
        right:0px;
        width:20px;
        height:20px;
    }

    .sub_menu_btn span{
        position: absolute;
        display: block;
        content: "";
        width:13px;
        height:3px;
        transform-origin:50% 50%;
        background: #222;
        border-radius: 5px;
        top:50%;
        transform: translateY(-50%);
        transform: rotate(45deg);
    }

    .sub_menu_btn span:nth-child(1){
        right:8px;
    }

    .sub_menu_btn span:nth-child(2){
        right:0px;
        transform: rotate(-45deg);
    }


    .main_menu h3{
        font-size:20px;
    }

    
    .main_menu p{
        font-size:18px;
    }

    .mb_header_wrap .sub_menu{
        display: none;
    }

    .sub_menu_btn_ani01{
        transform: rotate(-45deg) !important;
    }

    .sub_menu_btn_ani02{
        transform: rotate(45deg) !important;
    }


    .main_menu ul li:hover h3{
        color:#3e96ff;
    }
    
    .main_menu ul li ul li:hover p{
        color:#3e96ff;
    }



    .right_btn{
        right:100px;

    }    

    .right_btn a{
        margin:5px;
    }

    .right_btn div{
        width:120px;
        height:35px;
    }

    .right_btn img{
        width:35px;
    }

    .right_btn h3{
        font-size: 15px;
        line-height: 35px;
    }

/* ------------ floating menu ---------- */



.float_menu{
    width:50px;
}

.float_menu ul{
    width:50px;
}

.float_menu ul li{
    width:50px;
    height:50px;
}

.float_menu ul li img{
    width:40px;
    height:40px;
}


.swiper-slide:nth-child(1){
    background-image: url('../img/mb_main_banner01.jpg');
    background-position: center;
    background-size: cover;
}

.swiper-slide:nth-child(2){
    background-image: url('../img/mb_main_banner02.jpg');
    background-position: center;
    background-size: cover;
}



.popup_img, .popup_img01{
    width:50%;
}



    /* ---------footer--------- */



    footer{
        position: relative;
        height:auto;
        padding-bottom:20px;
        color:#fff;
        background: #222;
    }

    .footer_etc{
        position: static;
        left:0;
        top:0;
        transform: translateY(0);
    }

    .footer_etc ul li{
        display: block;
    }

    .footer_etc_wrap{
        display: block;
        width:90%;
        margin:0 auto;
    }

    .footer_call{
        position: static;
        padding-top:20px;
        padding-bottom:20px;
        margin-left:0;
        transform: translateY(0%);
    }

    .footer_call h2{
        margin-left:10px;
        line-height: 30px;
        font-size: 25px;
    }

    .footer_call img{
        width:30px;
        height:30px;
    }

    .footer_etc p{
        font-size: 15px;
        line-height: 25px;
        margin-left:0;
    }

    .footer_sns ul{
        position: static;
        display: flex;
        padding-top:20px;
        transform: translateY(0);
    }

    .footer_sns ul li{
        width:35px;
    }

    .footer_sns ul li:nth-child(2){
        margin-left:10px;
    }

    .footer_sns ul li img{
        width:100%;
    }
    


}


@media (max-width:500px){
    
     /* ------ 공통 ------ */

    .download{
        display: none;
    }

     .mb{
        display: block;
    }

    .pc{
        display: none;
    }

    .main_title{
        width:90%;
        text-align: center;
        font-size: 25px;
        font-weight: 900;
    }

    .main_section_wrap p{
        font-size: 15px;
    }

    .main_title span{
        background:linear-gradient(to right, #3e96ff, #174e8a);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
    }


    .main_section_wrap{
        padding-top:60px;
        padding-bottom:60px;
    }


     /* ------ header ------ */


    header{
        position: relative;
        width:100vw;
        height:50px;
    }

    .mb_header_wrap{
        position: fixed;
        width:100vw;
        height:50px;
        background: #fff;
        z-index: 10;
    }

    .mb_header_wrap .logo{
        position: relative;
        left:5%;
        width:50px;
        height:50px;
    }

    .mb_header_wrap .logo img{
        position: absolute;
        width:35px;
        height:35px;
        top:50%;
        transform: translateY(-50%);
    }

    .mb_header_wrap::after{
        display: block;
        content:"";
        position: absolute;
        bottom:0;
        width:100%;
        height:2px;
        background:linear-gradient(to right, #3e96ff, #174e8a);
    }


    .mb_menu_btn{
        position: absolute;
        right:5%;
        top:50%;
        transform: translateY(-50%);
        cursor: pointer;
    }

    
    .mb_menu_btn span{
        display: block;
        width:30px;
        height:3px;
        background: #222;
        border-radius: 3px;
        margin-top:5px;
    }

    .mb_menu_btn span:nth-child(1){
        margin-top:0;
    }

    .main_menu{
        position: absolute;
        top:0;
        right: -1200px;
        width:70%;
        height:100vh;
        background: #fff;
        z-index: 9999;
    }

    .main_menu_bg{
        position: absolute;
        display: none;
        top:0;
        left:0;
        width:100%;
        height:100vh;
        background: rgb(34, 34, 34,0.7);
        z-index: 10;
        
    }

    .mb_main_menu_close_btn{
        position: absolute;
        width:30px;
        height:30px;
        right:20px;
        top:35px;
        cursor: pointer;
    }

    .mb_main_menu_close_btn span{
        position: absolute;
        display: block;
        content: "";
        width:30px;
        height:3px;
        transform-origin:50% 50%;
        transform: rotate(45deg);
        background: #222;
        border-radius: 5px;
    }

    
    .mb_main_menu_close_btn span:nth-child(2){
        transform: rotate(-45deg);
    }

    .main_menu > ul{
        margin-top:50px;
    }

    .main_menu li{
        width:85%;
        margin:0 auto;
        line-height: 50px;
    }

    .main_menu_title{
        position: relative;
    }

    .sub_menu_btn{
        position: absolute;
        top:15px;
        right:0px;
        width:20px;
        height:20px;
    }

    .sub_menu_btn span{
        position: absolute;
        display: block;
        content: "";
        width:13px;
        height:3px;
        transform-origin:50% 50%;
        background: #222;
        border-radius: 5px;
        top:50%;
        transform: translateY(-50%);
        transform: rotate(45deg);
    }

    .sub_menu_btn span:nth-child(1){
        right:8px;
    }

    .sub_menu_btn span:nth-child(2){
        right:0px;
        transform: rotate(-45deg);
    }


    .main_menu h3{
        font-size:20px;
    }

    
    .main_menu p{
        font-size:18px;
    }

    .mb_header_wrap .sub_menu{
        display: none;
    }

    .sub_menu_btn_ani01{
        transform: rotate(-45deg) !important;
    }

    .sub_menu_btn_ani02{
        transform: rotate(45deg) !important;
    }


    .main_menu ul li:hover h3{
        color:#3e96ff;
    }
    
    .main_menu ul li ul li:hover p{
        color:#3e96ff;
    }
    


    .right_btn{
        right:60px;
    }    

    .right_btn a{
        margin:5px;
    }

    .right_btn div{
        width:70px;
        height:28px;
        padding-right:10px;
    }

    .right_btn img{
        width:28px;
    }

    .right_btn h3{
        font-size: 12px;
        line-height: 28px;
    }



    /* ---------popup--------- */


    
    .popup_img01{
        width:80%;
        left:10%;
        border:1px solid #000;
    }


    .popup_close_btn, .popup_close_btn01{
        font-size:15px;
    }

    .popup_close_btn button, .popup_close_btn01 button{
        font-size: 15px;
    }

    

    /* ---------footer--------- */



    footer{
        position: relative;
        height:auto;
        padding-bottom:20px;
        color:#fff;
        background: #222;
        z-index: 5;
    }

    .footer_etc{
        position: static;
        left:0;
        top:0;
        transform: translateY(0);
    }

    .footer_etc ul li{
        display: block;
    }

    .footer_etc_wrap{
        display: block;
        width:90%;
        margin:0 auto;
    }

    .footer_call{
        position: static;
        padding-top:20px;
        padding-bottom:20px;
        margin-left:0;
        transform: translateY(0%);
    }

    .footer_call h2{
        margin-left:10px;
        line-height: 30px;
        font-size: 25px;
    }

    .footer_call img{
        width:30px;
        height:30px;
    }

    .footer_etc p{
        font-size: 15px;
        line-height: 25px;
        margin-left:0;
    }

    .footer_sns ul{
        position: static;
        display: flex;
        padding-top:20px;
        transform: translateY(0);
    }

    .footer_sns ul li{
        width:35px;
    }

    .footer_sns ul li:nth-child(2){
        margin-left:10px;
    }

    .footer_sns ul li img{
        width:100%;
    }


    /* ------------ floating menu ---------- */

    .float_menu{
        position: fixed;
        width:40px;
        right:20px;
        z-index: 99;
    }

    .float_menu ul{
        position: absolute;
        width:40px;
    }

    .float_menu ul li{
        position: relative;
        margin-top:5px;
        width:45px;
        height:45px;
        background: #222;
        border-radius: 50%;
    }
    .float_menu ul li img{
        position: absolute;
        width:40px;
        height:40px;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
    }
}







/* ------------ pc animation -------------- */


.main_title{
    opacity: 0;
}


.main_title_ani{
    animation: main_title_ani 1s;
    animation-fill-mode: both;
}

@keyframes main_title_ani {
    0% {
        opacity: 0;
        margin-top:50px;
    }
    100%{
        opacity: 1;
        margin-top:0;
    }
}



.main_sk_fastorder ul li{
    opacity: 0;
}


.main_left_ani{
    animation: main_left_ani 1s;
    animation-fill-mode: both;
}

@keyframes main_left_ani {
    0% {
        opacity: 0;
        margin-left:50px;
    }
    100%{
        opacity: 1;
        margin-left:0;
    }
}



.main_right_ani{
    animation: main_right_ani 1s;
    animation-fill-mode: both;
}

@keyframes main_right_ani {
    0% {
        opacity: 0;
        margin-left:-50px;
    }
    100%{
        opacity: 1;
        margin-left:5%;
    }
}



.mb_main_sk_ani{
    animation: mb_main_sk_ani 1s;
    animation-fill-mode: both;
}

@keyframes mb_main_sk_ani {
    0% {
        opacity: 0;
        margin-top:20px;
    }
    20%{
        opacity: 0;
    }
    100%{
        opacity: 1;
        margin-top:0px;
    }
}




.mb_main_lg_ani{
    animation: mb_main_lg_ani 1s;
    animation-fill-mode: both;
}

@keyframes mb_main_lg_ani {
    0% {
        opacity: 0;
        margin-top:20px;
    }

    50%{
        opacity: 0;
    }

    100%{
        opacity: 1;
        margin-top:20px;
    }
}




/* ------------ why animation -------------- */




.main_why01_ani{
    animation: main_why01_ani 1s;
}


@keyframes main_why01_ani {
    0% {
        opacity: 0;
    }

    50%{
        opacity: 0;
        margin-top:100px;
    }

    100%{
        opacity: 1;
        margin-top:20px;
    }
}


.main_why02_ani{
    animation: main_why02_ani 1.3s;
}

@keyframes main_why02_ani {
    0% {
        opacity: 0;
    }

    80%{
        opacity: 0;
        margin-top:40px;
    }

    100%{
        opacity: 1;
        margin-top:20px;
    }
}



.main_why03_ani{
    animation: main_why03_ani 1.6s;
}

@keyframes main_why03_ani {
    0% {
        opacity: 0;
    }

    80%{
        opacity: 0;
        margin-top:300px;
    }

    100%{
        opacity: 1;
        margin-top:260px;
    }
}



/* ------------ mb why animation -------------- */


.mb_main_why01_ani{
    animation: mb_main_why01_ani 1.6s;
}

@keyframes mb_main_why01_ani {
    0% {
        opacity: 0;
    }

    40%{
        opacity: 0;
        margin-top:60px;
    }

    100%{
        opacity: 1;
        margin-top:50px;
    }
}



.mb_main_why02_ani{
    animation: mb_main_why02_ani 1.6s;
}

@keyframes mb_main_why02_ani {
    0% {
        opacity: 0;
    }

    50%{
        opacity: 0;
        margin-top:60px;
    }

    100%{
        opacity: 1;
        margin-top:50px;
    }
}




.mb_main_why03_ani{
    animation: mb_main_why03_ani 1.6s;
}

@keyframes mb_main_why03_ani {
    0% {
        opacity: 0;
    }

    80%{
        opacity: 0;
        margin-top:60px;
    }

    100%{
        opacity: 1;
        margin-top:50px;
    }
}







/* ------------ 90% -------------- */




.main_pos_logo_ani{
    animation: main_pos_logo_ani 1s;
}

@keyframes main_pos_logo_ani {
    0% {
        opacity: 0;
    }

    50%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}


.main_sub_title_ani{
    animation: main_sub_title_ani 1s;
}

@keyframes main_sub_title_ani {
    0% {
        opacity: 0;
    }

    50%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}





/* ------------ system -------------- */



.main_system_choice_Wrap_ani{
    animation: main_system_choice_Wrap_ani 1s;
}


@keyframes main_system_choice_Wrap_ani {
    0% {
        opacity: 0;
    }

    50%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}



.main_system_choice_btn_text_on{
    animation: choice_btn_text_on_ani 1s;
}


@keyframes choice_btn_text_on_ani {
    0% {
        width:0;
    }

    100%{
        width:400px;
    }
}




.main_system_choice_btn_text{
    animation: choice_btn_text_ani 1s;
}


@keyframes choice_btn_text_ani {
    0%{
        opacity: 0;
    }

    60% {
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}


@media (max-width:500px){

    .main_system_choice_btn_text_on{
        animation: choice_btn_text_on_ani 0s;
    }
    
    
    @keyframes choice_btn_text_on_ani {
        0% {
            width:0;
        }
    
        100%{
            width:400px;
        }
    }
    
}




/* ------------ sticky -------------- */


.main_sticky_box_img img{
    animation: main_sticky_ani 2.5s infinite linear;
}


@keyframes main_sticky_ani {
    0%{
        top:60px;
    }

    50%{
        top:45px;
    }

    100%{
        top:60px;
    }
}






/* ------------ company ani 회사소개 페이지 -------------- */



.company_vision_ani01{
    animation: company_vision_ani01 1s;
    animation-fill-mode: both;
}



.main_sub_title{
    opacity: 0;
    animation-fill-mode: both;
}


.company_vision ul li{
    opacity: 0;
    animation-fill-mode: both;
}



@keyframes company_vision_ani01 {
    0% {
        opacity: 0;
        margin-top:140px;
    }
    100%{
        opacity: 1;
        margin-top:100px;
    }
}


.company_vision_ani02{
    animation: company_vision_ani02 1s;
    animation-fill-mode: both;
}

@keyframes company_vision_ani02 {
    0% {
        opacity: 0;
        margin-top:80px;
    }
    100%{
        opacity: 1;
        margin-top:40px;
    }
}



.company_vision_ani03{
    animation: company_vision_ani03 1s;
    animation-fill-mode: both;
}

@keyframes company_vision_ani03 {
    0% {
        opacity: 0;
        margin-top:80px;
    }
    100%{
        opacity: 1;
        margin-top:40px;
    }
}





/* mb */


.mb_company_vision_ani01{
    animation: mb_company_vision_ani01 1s;
    animation-fill-mode: both;
}

@keyframes mb_company_vision_ani01 {
    0% {
        opacity: 0;
        margin-top:50px;
    }
    100%{
        opacity: 1;
        margin-top:30px;
    }
}


.mb_company_vision_ani02{
    animation: mb_company_vision_ani02 1s;
    animation-fill-mode: both;
}

@keyframes mb_company_vision_ani02 {
    0% {
        opacity: 0;
        margin-top:40px;
    }
    100%{
        opacity: 1;
        margin-top:20px;
    }
}



.mb_company_vision_ani03{
    animation: mb_company_vision_ani03 1s;
    animation-fill-mode: both;
}

@keyframes company_vision_ani03 {
    0% {
        opacity: 0;
        margin-top:40px;
    }
    100%{
        opacity: 1;
        margin-top:20px;
    }
}






/* ------------ tableorder_bell_wrap -------------- */



.tableorder_bell_wrap_ani01{
    animation: tableorder_bell_wrap_ani01 1s;
    animation-fill-mode: both;
}

@keyframes tableorder_bell_wrap_ani01 {
    0% {
        opacity: 0;
        margin-top:20px;
    }

    20% {
        opacity: 0;
        margin-top:20px;
    }
    100%{
        opacity: 1;
        margin-top:0px;
    }
}


.tableorder_bell_wrap_ani02{
    animation: tableorder_bell_wrap_ani02 1s;
    animation-fill-mode: both;
}

@keyframes tableorder_bell_wrap_ani02 {
    0% {
        opacity: 0;
    }
    50%{
        opacity: 0;
        margin-top:20px;
    }
    100%{
        opacity: 1;
        margin-top:0px;
    }
}


.tableorder_bell_wrap_ani03{
    animation: tableorder_bell_wrap_ani03 1s;
    animation-fill-mode: both;
}

@keyframes tableorder_bell_wrap_ani03 {
    0% {
        opacity: 0;
    }
    80%{
        opacity: 0;
        margin-top:20px;
    }
    100%{
        opacity: 1;
        margin-top:0px;
    }
}






/* ------------ tableorder_why_wrap -------------- */



.tableorder_why_wrap_left_ani{
    animation: tableorder_why_wrap_left_ani 1s;
    animation-fill-mode: both;
}

@keyframes tableorder_why_wrap_left_ani {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 0;
        margin-left:20px;
    }
    100%{
        opacity: 1;
        margin-left:0px;
    }
}




.tableorder_why_wrap_right_ani{
    animation: tableorder_why_wrap_right_ani 1s;
    animation-fill-mode: both;
}

@keyframes tableorder_why_wrap_right_ani {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 0;
        margin-right:20px;
    }
    100%{
        opacity: 1;
        margin-right:0px;
    }
}




.tableorder_why_wrap_right_ani02{
    animation: tableorder_why_wrap_right_ani02 1s;
    animation-fill-mode: both;
}

@keyframes tableorder_why_wrap_right_ani02 {
    0% {
        opacity: 0;
    }

    60% {
        opacity: 0;
        margin-left:-20px;
    }
    100%{
        opacity: 1;
        margin-left:0px;
    }
}



.tableorder_why_wrap_left_ani02{
    animation: tableorder_why_wrap_left_ani02 1s;
    animation-fill-mode: both;
}

@keyframes tableorder_why_wrap_left_ani02 {
    0% {
        opacity: 0;
    }

    60% {
        opacity: 0;
        margin-right:-20px;
    }
    100%{
        opacity: 1;
        margin-right:0px;
    }
}




.tableorder_why_wrap_left_ani03{
    animation: tableorder_why_wrap_left_ani03 1.5s;
    animation-fill-mode: both;
}

@keyframes tableorder_why_wrap_left_ani03 {
    0% {
        opacity: 0;
    }

    70% {
        opacity: 0;
        margin-left:20px;
    }
    100%{
        opacity: 1;
        margin-left:0px;
    }
}




.tableorder_why_wrap_right_ani03{
    animation: tableorder_why_wrap_right_ani03 1.5s;
    animation-fill-mode: both;
}

@keyframes tableorder_why_wrap_right_ani03 {
    0% {
        opacity: 0;
    }

    70% {
        opacity: 0;
        margin-right:20px;
    }
    100%{
        opacity: 1;
        margin-right:0px;
    }
}





.tableorder_why_wrap ul li:first-child .tableorder_why_img_wrap img:nth-child(2),
.tableorder_why_wrap ul li:last-child .tableorder_why_img_wrap img:nth-child(2){
    animation: tableorder_why_wrap_icon01 2s infinite linear;
}


@keyframes tableorder_why_wrap_icon01 {
    0%{
        top:60px;
    }

    50%{
        top:45px;
    }

    100%{
        top:60px;
    }
}



.tableorder_why_wrap ul li:first-child .tableorder_why_img_wrap img:nth-child(3),
.tableorder_why_wrap ul li:last-child .tableorder_why_img_wrap img:nth-child(3){
    animation: tableorder_why_wrap_icon02 2s infinite linear;
}


@keyframes tableorder_why_wrap_icon02 {
    0%{
        bottom:80px;
    }

    50%{
        bottom:65px;
    }

    100%{
        bottom:80px;
    }
}



.tableorder_why_wrap ul li:nth-child(2) .tableorder_why_img_wrap img:nth-child(2){
    animation: tableorder_why_wrap_icon03 2s infinite linear;
}


@keyframes tableorder_why_wrap_icon03 {
    0%{
        bottom:0px;
    }

    50%{
        bottom:15px;
    }

    100%{
        bottom:0px;
    }
}




/* 상담신청 완료 */

.input_complete{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: rgb(34, 34, 34, 0.8);
    z-index: 30;
    display: none;
}

.input_complete_wrap{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width:40%;
    height:280px;
    border-radius: 20px;
    background: #fff;
}

.input_complete_wrap h3{
    text-align: center;
    font-size: 40px;
    margin-top:50px;
}


.input_complete_close_btn{
    width:340px;
    height:70px;
    margin:0 auto;
    margin-top:50px;
    text-align: center;
    border-radius: 200px;
    background: #fe9d37;
}

.input_complete_close_btn h4{
    font-size: 30px;
    line-height: 70px;
    color:#fff;
}



.set{
    cursor: pointer;
}

.input_pop_on{
    cursor: pointer;
}


.input_pop_wrap{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width:100%;
    height:100%;
    background: rgb(34, 34, 34,0.8);
    z-index: 30;
    display: none;
}

.input_pop{
    position: absolute;
    width:30%;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    background: #fff;
    
}

.input_pop h3{
    font-size: 20px;
    line-height: 30px;
    padding:10px;
    border-bottom: 1px solid #222;
}

.input_pop p{
    padding:10px;
    font-size: 18px;
    height:700px;
    overflow-y: scroll;
}



.input_close_btn{
    position: absolute;
    width:30px;
    height:30px;
    top:25px;
    right:10px;
    cursor: pointer;
}

.input_close_btn span{
    position: absolute;
    display: block;
    content: "";
    width:25px;
    height:2px;
    transform-origin:50% 50%;
    transform: rotate(45deg);
    background: #222;
    border-radius: 5px;
}


.input_close_btn span:nth-child(2){
    transform: rotate(-45deg);
}

.main_section_input iframe{
    position: relative;
    left:50%;
    transform: translateX(-50%);
    margin-top:100px;
}

.float_main_section_input{
    padding-top:50px;
}