/* pre_wrap */
#pre_wrap {position: fixed;top: 0;left: 0;width: 100%;height: 100vh;z-index: 9999;padding: 1.5rem;background-color: #fff;justify-content: space-between; flex-direction: column; align-items: center;display: none;padding-bottom:10rem}
#pre_wrap .process_bar {width: 100%;height: .5rem;display: flex;justify-content: space-between;}
#pre_wrap .process_bar .process {display: block;height: 100%; width: calc(100%/3 - .3rem);background-color: #ddd;}
#pre_wrap .process_bar .process.active {background-color: #2a73f4;}
#pre_wrap .content_wrap {overflow: hidden;height: 100%; width: 100%;}
#pre_wrap .content_wrap .slide_wrap {display: flex;flex-wrap: wrap; flex-direction: column; transition: transform 0.3s ease;height: 100%;}
#pre_wrap .content_wrap .slide_wrap .slide {width: 100%;height: 100%;font-size: 2rem;display: flex;justify-content: center;align-items: center;flex-direction: column;color: #fff;padding: 10% 0;transition-property: transform;}
#pre_wrap .content_wrap .slide_wrap .slide .img_wrap {width: 30rem; height: 30rem;margin-bottom: 3rem;}
#pre_wrap .content_wrap .slide_wrap .slide .img_wrap img {width: 100%; height: 100%;display: block;object-fit: contain;}
#pre_wrap .content_wrap .slide_wrap .slide:nth-child(2) .img_wrap {width: 25rem; height: 30rem;}
#pre_wrap .content_wrap .slide_wrap .slide:nth-child(3) .img_wrap {width: 20rem; height: 30rem;}
#pre_wrap .content_wrap .slide_wrap .slide h1 {font-size: 2rem; font-weight: bold;text-align: center;line-height: 1.2;}
#pre_wrap .content_wrap .slide_wrap .slide span {display: block;font-size: 1.4rem;color: #ccc;margin-top: 1rem;}

/* wrap */
#wrap {min-height: 100vh;width: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;}
#wrap .index_img {width: 15rem; display: block; margin: 0 auto;padding-bottom: 8rem;}
#wrap .loading_bar {background-color: #ddd;height: .5rem; width: 80%;}
#wrap .loading_bar span {display: block;width: 0;height: 100%;background-color: #2a73f4;animation: loading forwards 1.5s cubic-bezier(0.39, 0.575, 0.565, 1);}
@keyframes loading {
    from {width: 0;}
    to {width: 100%;}
}

/* 모달 */
#wrap.on .modal {display: block}
.modal {display:none;position: fixed; min-height: 100vh;width: 100%; left: 0; right: 0; top: 0;z-index: 100;background: transparent;}
.modal .modal_bg {position: fixed;left: 0;top: 0;height: 100%;width: 100%;background: rgba(0,0,0,.3);}
.modal_con {background: #d3d3d3;max-width:500px;width: 85%;  top: 50%;left: 50%;position: absolute;transform: translate(-50%,-50%);display: flex;flex-direction: column;border-radius: .3rem;box-shadow: 0 0 1rem rgba(0,0,0,.5);z-index: 101;}
.modal_con h3 {font-size: 1.8rem; padding: 1.5rem;color: #084093;font-weight: bold; text-align: center;position:relative; margin-right: 0;display: block;}
.modal_con h3 span {display: block;width: 1rem;position: absolute;top: 50%;right: 1rem;transform: translateY(-50%);}
.modal_con .modal_box {position: relative;background: #fff;margin: 0 1rem;padding: 0 0 2rem 0;margin-bottom: 1rem;}
.modal_con .modal_box img {width: 3rem;display: block;margin: 1rem auto;}
#wrap .modal_con .modal_box p {font-size: 1.7rem;text-align: center;color: #333;padding: 0 1rem 6rem 1rem;line-height: 1.2;}
.modal_con .modal_box > div {padding: .5rem 1rem 0 1rem;position: absolute;bottom:1rem;width: 100%;display: flex;align-items: center;justify-content: center;gap: 1rem;}
.modal_con .modal_box button {font-size: 1.6rem;color: #fff;background: #2a73f4;width: 100%;padding: 1rem;border-radius: .7rem;}
.modal_con .modal_box a {color: #084093;font-size: 1.6rem;display: block;margin-top: 1rem;font-weight: bold;}