/* 메인 비주얼 */
.visual{position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; background: url(../image/main_bg.jpg) no-repeat; background-size: cover; background-position: center; width: 100%; height: 100vh; min-height: 740px; overflow-y: auto;}
.visual .visual_tx{position: relative; width: calc(100% - 40px); text-align: center; transform: translateY(-22px); z-index: 1;}
.visual .visual_tx .s_slogan{color: #0B318F; font-size: clamp(16px, 4vw, 20px); letter-spacing: clamp(0px, 1vw, 8px); font-weight: 500;}
.visual .visual_tx .slogan{font-family: Jalnan2; text-align: center; color: #031542; font-size: clamp(30px, 9vw, 80px); margin-top: 30px; line-height: 120%; letter-spacing: -0.6px;}
.visual .visual_tx .slogan .point_tx{display: inline-block; transform: rotate(-7deg) translateY(6px); transform-origin: center; padding-right: 10px; color: #FF5E48; font-size: clamp(45px, 13vw, 100px);}
.visual .visual_tx .link_btn{display: inline-flex; justify-content: center; align-items: center; gap:15px; background-color: #FBFF7B; padding: 18px 28px; border-radius: 50px; border: 1px solid #414141; border-bottom-width: 3px; margin-top: 45px; transition: .2s;}
.visual .visual_tx .link_btn.linkIcon:after{content:''; display:block; width:24px; height: 24px; background: url(../image/link_arrow.svg) no-repeat;}
.visual .visual_tx .link_btn:hover{font-weight: 600; transform: translateY(-3px); box-shadow: 0px 3px #414141; transition: .2s;}
.visual .visual_tx .deco{position: absolute; z-index: -1; transition: .2s;}
.visual .visual_tx .deco01{left: 60px; top: -30%; animation: ani01 1s ease-in-out infinite alternate;}
.visual .visual_tx .deco02{right: 153px; top: -38%; animation: ani02 2s ease-in-out infinite alternate;}
.visual .visual_tx .deco03{right: 70px; bottom: -15%; animation: ani01 1.3s ease-in-out infinite alternate;}
.visual .visual_tx .deco01 i{display: block; background:url(../image/v_img3.png) no-repeat; background-size: contain; width: 225px; height: 151px; transition: .2s;}
.visual .visual_tx .deco02 i{display: block; background:url(../image/v_img4.png) no-repeat; background-size: contain; width: 305px; height: 330px; transition: .2s;}
.visual .visual_tx .deco03 i{display: block; background:url(../image/v_img5.png) no-repeat; width: 83px; height: 125px;}

@keyframes ani01 {
    0% {
        transform: translate(0,0);
    }
    100% {
        transform: translate(0,10px);
    }
}

@keyframes ani02 {
    0% {
        transform: translate(0,15px);
    }
    100% {
        transform: translate(0,0);
    }
}


@media (max-width: 1630px){
    .visual .visual_tx .deco01{left: 0;}
    .visual .visual_tx .deco02,
    .visual .visual_tx .deco03{right: 0;}
}
@media (max-width: 1280px){
    .visual .visual_tx .deco01 i{width: 180px;}
    .visual .visual_tx .deco02 i{width: 250px;}
}
@media (max-width: 1080px){
    .visual .visual_tx .deco03{display: none;}
    .visual .visual_tx .deco02 i{width: 200px;}
    
}
@media (max-width: 768px){
    .visual .visual_tx .deco01{top: -112px;}
    .visual .visual_tx .deco02{top: -146px;}
    .visual .visual_tx .deco01 i{width: 150px;}
    .visual .visual_tx .deco02 i{width: 167px;}
    .visual .visual_tx .link_btn{font-size: 15px; padding: 15px 20px;}
}
@media (max-width: 480px){
    .visual .visual_tx{transform: translateY(-55px);}
    .visual .visual_tx .slogan{margin-top: 15px;}
    .visual .visual_tx .link_btn{margin-top: 25px;}
    .visual .visual_tx .slogan .point_tx{padding-right: 5px;}
    .visual .visual_tx .deco01 i{width: 125px;}
    .visual .visual_tx .deco02 i{width: 145px;}
    .visual .visual_tx .link_btn{padding: 15px 25px;}
}

/* 날짜 조회 배너 */
.banner_wr{position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); width: calc(100% - 40px); max-width: 1400px;}
.banner_wr::before{position: absolute; content: ''; background: url(../image/v_img1.png) no-repeat; background-size: contain; width: 392px; height: 360px; top: -306px; left: 20px; z-index: -1; transition: .2s; animation: ani03 1s ease-in-out infinite alternate;}
.banner_wr::after{position: absolute; content: ''; background: url(../image/v_img2.png) no-repeat; background-size: contain; width: 146px; height: 198px; top: -178px; right: 170px; transition: .2s; animation: ani04 1s ease-in-out infinite alternate;}
.banner_wr .date_banner{background-color: #0057C9; border-radius: 20px; padding: 25px 35px;}
.banner_wr .date_banner fieldset{display: flex; justify-content: space-between;}
.banner_wr .date_banner fieldset .left_tx{display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 300; transition: .2s;}
.banner_wr .date_banner fieldset .left_tx strong{position: relative; font-size: 25px; padding-right: 30px;}
.banner_wr .date_banner fieldset .left_tx strong::after{content: ''; position: absolute; width: 1px; height: 40px; background-color: #fff; top: 50%; transform: translateY(-50%); right: 0;}
.banner_wr .date_banner fieldset .left_tx p{margin-left: 30px;}
.banner_wr .date_banner fieldset .right_form{display: flex; gap: 10px; justify-content: flex-end;}
.banner_wr .date_banner fieldset .right_form input{font-size: 18px; width: 500px; flex: 0 0 360px; height: 55px; border: 3px solid #4A98FF; border-radius: 10px;}


@keyframes ani03 {
    0% {
        /* transform: translate(0,5px); */
        transform: rotate(2deg);
    }
    100% {
        /* transform: translate(0,0); */
        transform: rotate(0);
    }
}

@keyframes ani04 {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(3deg);
    }
}

@media (max-width: 1280px){
    .banner_wr .date_banner{padding: 20px 30px;}
    .banner_wr .date_banner fieldset .left_tx{flex-direction: column; align-items: flex-start; gap: 7px;}
    .banner_wr .date_banner fieldset .left_tx strong{padding: 0; font-size: 22px;}
    .banner_wr .date_banner fieldset .left_tx p{margin-left: 0;}
    .banner_wr .date_banner fieldset .left_tx strong::after{display: none;}
    .banner_wr .date_banner fieldset .right_form{gap: 10px;}
    .banner_wr .date_banner fieldset .right_form input{width: 400px;}
    .banner_wr::before{top: -238px; width: 300px;}
    .banner_wr::after{top: -150px; width: 123px;}
}

@media (max-width: 1080px){
    .banner_wr::before,
    .banner_wr::after{display: none;}
    .banner_wr .date_banner fieldset{flex-direction: column; gap: 10px;}
    .banner_wr .date_banner fieldset .left_tx p{display: none;}
    .banner_wr .date_banner fieldset .right_form input{width: 100%; flex: 1 1 auto;}
    
}

@media (max-width: 480px){
    .banner_wr .date_banner{bottom: 40px;}
    .banner_wr .date_banner fieldset{flex-direction: column;}
    .banner_wr .date_banner fieldset .left_tx p{display: none;}
    .banner_wr .date_banner fieldset .right_form{flex-direction: column;}
    .banner_wr .date_banner fieldset .right_form input{width: 100%; flex: 1 1 auto;}
    .banner_wr .date_banner fieldset .right_form .btn1{width: 100%;}
    
}