#wrap {min-height: 100vh;height: 100%; width: 100%;padding-top: 5.5rem;}


/* 인덱스 */
#wrap.index {background: none;display: flex;flex-direction: column;justify-content: space-between;align-items: center;padding-bottom: 0;
position: relative;}
#wrap.index img.indeximg {width: 50%;max-width: 400px;margin-top: 10vh;position: relative;}
#wrap.index .loading_wrap .bar {position: relative;width: 100vw;height:3rem;background:#efefee;}
#wrap.index .loading_wrap .bar:after {content:'';position: absolute;height:3rem;background-image: linear-gradient(to right, #d86d0f 0%, #91a12c 60% , #44a937 100% );-webkit-animation: loading 1s;-o-animation: loading 1s;animation: loading 1s;animation-timing-function: ease-out;animation-fill-mode: both;}
@keyframes loading {
    0% {width: 0%;}
    50% {width: 60%;}
    100% {width: 100%;}
}


/* 헤더 */
.open,.close {cursor: pointer;}
header {z-index: 100;position:fixed;padding:0 2rem;left:0;top:0;height:5.5rem;width:100%;background-color: #fff;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content: center;}
header .prev {width:.8rem;height:2rem;margin-right:1.5rem;background:url('../img/prev.png') no-repeat center/contain;}
header h1 {font-size:1.9rem;font-weight:600;}
header .logo {height: 3rem;width: fit-content;}
header .open {position:absolute;right:2rem;top:50%;transform:translateY(-50%);width:2.5rem;height:2.5rem;background:url('../img/ham.png') no-repeat center/contain;}
header.on {border-bottom: none;}
header.on .prev {display: none;}
header.on h1 {display: none;}


/* 헤더 : 햄버거 메뉴 */
nav .inner {transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1);overflow-y: scroll;position:fixed;z-index: 1000;top:0;right:-100%;width:80%;height:100%;background-color: #f6f7f7;}
nav .outer {background-color:rgba(0, 0, 0, .6);min-height: 100vh;position:fixed;width:100%;left:0; top:0;z-index: 999;display: none;}
nav.on .inner {display: block;right: 0;}
nav.on .outer {display: block;}
.nav_header {display: flex;justify-content: space-between;align-items: center;height: 5.5rem;padding: 0 1.5rem;}
.nav_header .logo {height: 3rem;width: fit-content;}
.nav_header .close {width:2.4rem;height:2.4rem;margin-right: .5rem;background:url('../img/close.png') no-repeat center/contain;}


/* 헤더 : 햄버거 메뉴 내용 */
nav .navcontent {display: flex;justify-content: space-between;align-items: center;flex-direction: column;margin-top: 10vh;}
nav .navcontent a {display: block;width: 100%;padding: 2rem 2.5rem;font-size: 1.6rem;font-weight: 800;background-color: #fff;}
nav .navcontent a.active {color: #fff;background-color: #ea9114;}


/* content */
.content {padding: 3.5rem 1.5rem 2rem;min-height: 100%;}
.content h2 {font-size: 2rem;font-weight: 900;line-height: 1.4;color: #050101;}
.content h2 span {font-size: inherit;font-weight: 900;line-height: inherit;color: #d60d10;}
.content .result_date {margin-top: .8rem;font-size: 1.4rem;font-weight: 600;color: #565353;}
.content .today {display: flex;justify-content: right;align-items: center;font-size: 1.6rem;font-weight: 600;color: #4c4949;line-height: 1.4;}
.content .today span {color: #fff;font-size: inherit;padding: .3rem .8rem;width: fit-content;margin-left: 1rem;display: block;background-color: #e6000f;}
.content .history_date {font-size: 1.6rem;font-weight: 600;color: #535050;margin-bottom:3rem;}
.content .history_date span {font-size: inherit;font-weight: inherit;color: #e6000f;padding: .1rem .3rem;margin-right: 1rem;border: 1px solid #e6000f;}
.content .lucky_number {font-size: 1.4rem;font-weight: bold;margin: 2rem 0;display: flex;justify-content: space-between;align-items: center;gap: .5rem;}
.content .lucky_number span {position: relative;}
.content .lucky_number span img {width: 100%;}
.content .lucky_number span p {transform: translate(-50%, -50%);position: absolute;font-size: 1.6rem;font-weight: 900;left: 50%;top: 50%;}
.content .lucky_number span p.red {color: #df2b16;}
.content .lucky_number span p.blue {color: #4a5292;}
.content .lucky_number span p.yellow {color: #f8b715;}
.content .lucky_number span p.gray {color: #989898;}
.content .lucky_number span p.green {color: #3cb145;}
.content .luck_pay {padding: 1.5rem;margin-bottom: 2rem;border-radius: .5rem;background-color: #efd1ad;}
.content .luck_pay .p1 {color: #232427;font-size: 1.4rem;font-weight: 600;line-height: 1.4;text-align: center;}
.content .luck_pay .p2 {color: #686a6c;font-size: 1.4rem;line-height: 1.4;text-align: center;}
.content .luck_pay b {color: inherit;font-weight: 800;font-size: inherit;line-height: inherit;}
.content .banner_wrap a {display: flex;align-items: center;justify-content: space-between;box-shadow: .1rem .1rem .3rem rgba(0, 0, 0, .2);border: 1px solid #eee;margin-bottom: .7rem;border-radius: .5rem;overflow: hidden;height: 7.5rem;}
.content .banner_wrap a .icon {width: 10rem;padding: 2rem 3rem;}
.content .banner_wrap a h3 {font-size: 1.6rem;font-weight: bold;text-align: center;}
.content .banner_wrap a .arrow {width: 1rem;margin: 0 4.5rem;}


p.info {font-size: 1.2rem;color: #737373;line-height: 1.4;padding: 2.5rem 1rem 1rem;}


/* select */
form {display: flex;justify-content: space-between;align-items: center;margin-bottom: 1.5rem;margin-top: 3rem;}
form select {height: 3.5rem;padding: .6rem;border: 1px solid #a3a2a2;border-radius: .5rem;font-size: 1.4rem;appearance: auto;}
form select:first-of-type {width: 40%;margin-right: .5rem;}
form select:last-of-type {width: 43%;}
input[type=submit] {font-size: 1.5rem;padding: 0.9rem 1rem;background-color: #ea9114;border: 1px solid #ddd;border-radius: 0.5rem;color: #fff;margin-left: 0.5rem;width:5rem;}
.store_result .box {display: block;padding: 1.2rem 1.5rem;border-radius: .5rem;border: 1px solid #a3a2a2;background-color: #f7f8f7;margin-bottom: 1rem;}
.store_result .box h3 {font-size: 1.8rem;font-weight: 900;line-height: 1.4;}
.store_result .box p {font-size: 1.6rem;line-height: 1.4;}


/* ballroom : 공 섞기 */
#ballroom_wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height:100%;
    min-height: 100vh;
    z-index: 1000;
    background-color: #efd1ad;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}
#ballroom_wrap .ballroom_header {position: absolute;left: 0;top: 0;width: 100%;  height: 5.5rem;display: flex;justify-content: center;align-items: center;}
#ballroom_wrap .ballroom_header a img {height: 3rem;width: fit-content;}
#ballroom_wrap .ballroom {width: 80%;max-width: 400px;margin-top: 10vh;}
#ballroom_wrap .go {width: 7rem;margin-bottom: 5vh;}


a.re {position: fixed;left: 1.5rem;bottom: 1.5rem;width: calc(100% - 3rem);height: 4.5rem;border-radius: 100rem;background-color: #e6000f;font-size: 1.6rem;color: #fff;font-weight: 900;display: flex;justify-content: center;align-items: center;}
.gobot {
    position: fixed;
    bottom: 7rem;
}