:root{
--ad-color1:#8C085E;
--ad-color2:#0B04D9;
--ad-color3:#0903A6;
--ad-color4:#020873;
--ad-color5:#020659;
--ad-point1:#00fe79;
--ad-point2:#00cc53;
--ad-point3:#00ffc3;
--ad-point4:#03c28a;
--ad-point5:#02daf8;
--ad-point6:#086dff;
--ad-point7:#011f7d;
--ad-point8:#4919dd;
--ad-point9:#6b0545;
--ad-point10:#e10a74;
--ad-point11:#ff0c35;
--ad-point12:#fbd21c;
--ad-point13: hsl(219, 73%, 65%);
--ad-point14: hsl(283, 100%, 69%);
--bg:linear-gradient(135deg, #0b1220 0%, #1e2c49 50%, #102141 100%); --card-alpha:linear-gradient(135deg, rgba(26, 26, 46, .5) 0%, rgba(22, 33, 62, .5) 50%, rgba(15, 15, 35,.5) 100%); --card:linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%); --muted:#9ca3af; --fg:#e5e7eb; --border:#233047; --acc:#22c55e; --accfg:#052e16; --pri:#91b4f9; --warn:#f59e0b;
--bg-dark:linear-gradient(135deg, #05080f 0%, #152037 50%, #09162d 100%);
--bg-light:linear-gradient(135deg, #131d31 0%, #2a3b5e 50%, #192e55 100%);
/*
--ball-1:radial-gradient(circle at 30% 30%, #cece0a, #774400 );
--ball-2:radial-gradient(circle at 30% 30%, #406ffb, #0c0937);
--ball-3:radial-gradient(circle at 30% 30%, #ff3d00, #3d0b02);
--ball-4:radial-gradient(circle at 30% 30%, #7d7d7d, #040404);
--ball-5:radial-gradient(circle at 30% 30%, #00d63a, #003102);
*/
--ball-1:radial-gradient(farthest-corner at 40% 38%, #ffffeb 0%, #afa33c 50%);
--ball-2:radial-gradient(farthest-corner at 40% 38%, #f3f3ff 0%, #5151bb 50%);
--ball-3:radial-gradient(farthest-corner at 40% 38%, #fbd7d7 0%, #b14c4c 50%);
--ball-4:radial-gradient(farthest-corner at 40% 38%, #e1e1e1 0%, #4b4b4b 50%);
--ball-5:radial-gradient(farthest-corner at 40% 38%, #e6ffe6 0%, #348934 50%);
--number-select:radial-gradient(farthest-corner at 40% 38%, #657be6 0%, #623e8e 50%);
--number-select-rect :linear-gradient(135deg, #657be6 0%, #623e8e 100%)
}
html, body { background-color: #0f0f23;}
* { box-sizing:border-box; position:relative; font-size:15px; vertical-align: middle;}
button,a,input,select,textarea { -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline: none; }
a {color:var(--fg);text-decoration:none}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-foreground); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: var(--scrollbar-background); background: transparent; }
[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0px 1000px #2c334a inset !important;
background-color: transparent !important;
-webkit-text-fill-color:var(--fg) !important;
}
.sound_only { display:none; }
/* searchform */
.checkbox input[type=checkbox] { position:absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;}
.checkbox input[type="checkbox"] + label { display:block; width:3.25rem; height:3.25rem; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; font-size:0; text-indent:-9999px;}
.checkbox input[type="checkbox"] + label:before { content: ''; display:block; width:3.25rem; height:3.25rem; line-height:1.75rem; border-radius:.5rem; margin:0; text-align:center; vertical-align:middle; background:rgba(255,255,255, .3); border:1px solid #ca60fa; box-shadow: inset .2rem .2rem .2rem 0.1rem rgba(0, 0, 0, 0.5); margin-right:.5rem; position:absolute; left:0; top:0;}
.checkbox input[type="checkbox"] + label:after { content: ''; display: block; width:0; height:0; opacity:0; border-right:2px solid var(--fg); border-bottom:2px solid var(--fg); position:absolute; left:.9rem; top:.9rem; transform:rotate(45deg); transition:all .2s; }
.checkbox input[type="checkbox"]:checked + label:before { background: linear-gradient(135deg, #667eea, #764ba2); box-shadow:none; }
.checkbox input[type="checkbox"]:checked + label:after { content: ''; position: absolute; width:.35rem; height:.75rem; opacity:1; left:0.75rem; top:0.5rem; }
.row {display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.half-content { flex:0 calc(50% - 4px); padding:1rem; }
.numbers { display:flex; flex-wrap: wrap; gap:.8rem; }
.numberItem { display:inline-block; }
.numberItem input[type="checkbox"] { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.numberItem input[type="checkbox"] + label { display:flex; align-items: center; justify-content: center;width:3rem; height:3rem; border:1px solid #ca60fa; border-radius:50%; position:relative; cursor:pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; font-weight:normal; margin-bottom:.75rem; }
.numberItem input[type="checkbox"]:checked + label { background:#7e349d; color:var(--fg)}
.numberItem input[type="checkbox"]:disabled + label { background:#797979; color:#515151; border-color:#47587b; box-shadow:inset .2rem .2rem .2rem .2rem rgba(0, 0, 0, 0.5);}
.form-numbers { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
body { margin:0;font-family:Pretendard,system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Apple SD Gothic Neo,Malgun Gothic,sans-serif; background:var(--bg); color:var(--fg)}
header { width:100%; margin:0;padding:0; }
main {width:100%; margin:0;padding:8rem 0; min-height:calc(100vh - 10rem);}
footer { width:100%; background:var(--card-alpha); min-height:10rem; }
.full-content { height:calc(100vh - 20rem); min-height:62rem; }
.floating-elements {position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; }
.floating-circle { position: absolute; border-radius: 50%; }
.floating-circle:nth-child(1) { width:8rem; height:8rem; top:20%; left:10%; animation:float 6s ease-in-out infinite; background:linear-gradient(135deg, rgba(255, 255, 0, 0.1), rgba(102, 102, 0, 0.1)); }
.floating-circle:nth-child(2) { width:10rem; height:10rem; bottom:40%; right:5%; animation:float 7s ease-in-out infinite; background:linear-gradient(135deg, rgba(145, 145, 255, 0.1), rgba(0, 0, 120, 0.1)); }
.floating-circle:nth-child(3) { width:6rem; height:6rem; bottom:20%; left:20%; animation:float 4s ease-in-out infinite; background:linear-gradient(135deg, rgba(255, 140, 140, 0.1), rgba(108, 0, 0, 0.1)); }
.floating-circle:nth-child(4) { width:7rem; height:7rem; top:45%; left:30%; animation:float 8s ease-in-out infinite; background:linear-gradient(135deg, rgba(208, 208, 208, 0.1), rgba(51, 51, 51, 0.1)); }
.floating-circle:nth-child(5) { width:9rem; height:9rem; top:20%; right:35%; animation:float 5s ease-in-out infinite; background:linear-gradient(135deg, rgba(134, 255, 134, 0.1), rgba(0, 61, 0, 0.1)); }
@keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-5rem) rotate(180deg); } }
.header-inner { padding:0; position: fixed; top:1rem; left:50%; transform:translateX(-50%); display:flex; z-index:10; width:calc(100% - 3.2rem); max-width:1200px; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.header-inner .navbar { width:100%; background:rgba(255, 255, 255, 0.1); backdrop-filter:blur(2rem); border:1px solid rgba(255, 255, 255, 0.2); border-radius:10rem; padding:.75rem 1rem; display:flex; align-items:center; justify-content:space-between; box-shadow:0 1.5rem 3rem rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2); transition:all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; overflow: hidden;}
.header-inner .navbar:before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transition: left 0.8s ease; }
.header-inner .navbar:hover:before { left: 100%;}
.header-inner .logo { }
.header-inner .logo .logo-title { margin:0; padding:0; font-size:2rem; font-weight:600; }
.header-inner .logo .logo-title a { display:flex; align-items: center; }
.header-inner .logo .logo-title a .logo-icon { flex:0 2rem; width:2rem; height:2rem; background:conic-gradient(#ffc107 0%, #007bff 20%, #dc3545 40%, #6c757d 60%, #28a745 80%, #ffc107 100%); /*mask:radial-gradient(transparent 30%,#fff 30%);*/ border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); animation: logo-rotate 5s linear infinite; }
.header-inner .logo .logo-title a .logo-icon:before {content:''; position: absolute; width:.75rem; height:.75rem; background:/* radial-gradient(circle, #ffffff, #ffffff, #b9b9b9, #7f7f7f, #595959)*/#fff; border-radius: 50%; z-index:2; animation: logo-pulse 3s ease-in-out infinite; box-shadow: inset 0px 0px 3px 2px rgba(0,0,0,0.4);}
.header-inner .logo .logo-title a span { margin-left:1rem; }
@keyframes logo-rotate { 0%{ transform:rotate(0deg) scale(1) } 50% { transform:rotate(180deg) scale(1.1) } 100% { transform:rotate(360deg) scale(1) } }
@keyframes logo-pulse { 0%, 100% { transform:scale(1); opacity: 0.8; } 50% { transform: scale(1.2); opacity: 1; } }
.header-inner nav { }
.header-inner nav ul { width:100%; margin:0 auto; display:flex; gap:1rem;}
.header-inner nav ul a { font-size:1rem; font-weight:400; display:block; padding:.75rem 1.25rem; letter-spacing: -.1rem; border-radius:1.5rem; }
.header-inner nav ul a:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); border-radius:1.5rem; opacity: 0; transition: opacity 0.3s ease;}
.header-inner nav ul a.active { background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1)); color:#fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 12px rgba(0, 0, 0, 0.1); }
.header-inner nav ul a.active:before { opacity:1; }
.header-inner nav ul a:hover {color:#fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);}
.header-inner nav ul a:hover:before { opacity:1; }
.header-inner nav ul a.pointBtn { background:linear-gradient(135deg, #667eea, #764ba2); color: white; text-decoration: none; font-weight: 600; box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3); transition: all 0.3s ease; white-space: nowrap; margin-left: 5px;}
.header-inner nav ul a.pointBtn.btnLogout { background:linear-gradient(135deg, #ff6b6b, #ee5a52); }
.header-inner nav ul a.pointBtn:hover {transform: translateY(-1px); box-shadow: 0 10px 20px rgba(255, 107, 107, 0.4);}
.mobileToggle { display:none; background:none; border:none; color:var(--fg); font-size:1.5rem; cursor: pointer; height:2.5rem; width: 2.5rem; padding: 0; border-radius: 50%; transition: all 0.3s ease; z-index:1001; position: relative; flex-shrink: 0; }
.mobileToggle:hover { /*background: rgba(255, 255, 255, 0.1);*/ transform: scale(1.1); }
.mobileToggle .hamburger { display: flex; flex-direction: column; gap:.3rem; width:1.5rem; height:1.75rem; justify-content: center; margin:0 auto; }
.mobileToggle .hamburger span { width:100%; height: 2px; background: white; border-radius: 2px; transition: all 0.3s ease; display: block; }
.mobileToggle.active .hamburger span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.mobileToggle.active .hamburger span:nth-child(2) { opacity: 0; transform: translateX(-20px); }
.mobileToggle.active .hamburger span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.mobileMenuOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px); z-index: 8; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.mobileMenuOverlay.active { opacity: 1; visibility: visible; }
.mobileMenu { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); z-index: 9; transform: translateY(-100%); transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); overflow-y: auto; }
.mobileMenu.active { transform: translateY(0); }
.mobileMenuHeader { display: flex; justify-content: space-between; align-items: center; height:7rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.mobileMenuNav { padding:2.5rem 2rem; list-style: none; }
.mobileMenuNav li { margin-bottom:1rem; }
.mobileMenuNav li a { display:flex; align-items:center; gap:1rem; padding:1.25rem 1.75rem; text-decoration: none; color: rgba(255, 255, 255, 0.9); font-weight: 500; font-size: 1.1rem; border-radius:1rem; transition: all 0.3s ease; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
.mobileMenuNav li a:hover,
.mobileMenuNav li a.active { background: rgba(255, 255, 255, 0.15); color: white; transform:translateX(.5rem); border-color: rgba(255, 255, 255, 0.2); }
.mobileCta { margin:0 2rem; }
.mobileCta .pointBtn { display: block; width:100%; background:linear-gradient(135deg, #667eea, #764ba2); color:var(--fg); text-decoration:none; padding:1.25rem 0; border-radius:1rem; font-weight:600; font-size: 1.1rem; text-align: center; box-shadow:0 .25rem 2rem rgba(255, 107, 107, 0.3); transition: all 0.3s ease; margin-bottom:1rem;}
.mobileCta .pointBtn.btnLogout { background:linear-gradient(135deg, #ff6b6b, #ee5a52); }
.mobileCta .pointBtn:hover { transform: translateY(-2px); box-shadow: 0 15px 40px rgba(255, 107, 107, 0.4); }
.footer-inner { width:100%; max-width:1200px; margin: 0 auto; padding:2rem 1rem; color:#cbd5e1}
.footer-inner .footer-links { display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:1rem; }
.footer-inner .footer-links a { display:inline-flex; align-items:center; padding:.55rem .9rem; border-radius:999px; background:rgba(15, 23, 42, .5); border:1px solid rgba(148, 163, 184, .16); color:var(--fg); font-size:.9rem; line-height:1.2; transition:background .2s ease, transform .2s ease; }
.footer-inner .footer-links a:hover { background:rgba(30, 41, 59, .9); transform:translateY(-1px); }
.footer-inner .copy { font-size:.95rem; margin-bottom:.75rem; color:var(--fg) }
.footer-inner .info { font-size:.95rem; color:var(--muted); }
.content { width:100%; max-width:1200px; margin:0 auto;}
.content > h2 { font-size:1.5rem; font-weight:600; }
.content > p { font-size:1rem; font-weight:400; color:var(--muted); margin-top:.5rem; }
.visual { position:relative; }
.visual .visual-item { position:relative; overflow:hidden; border:1px solid #334155; border-radius:1rem; background-image:url(/img/visual.jpg); background-repeat:no-repeat; background-position:center; background-size:cover; height:23rem; }
.visual .visual-item .cont { position:absolute; bottom:5rem; left:3rem; z-index:2; transition:bottom .2s ease, left .2s ease; }
.visual .visual-item .cont h1,
.visual .visual-item .cont h2 { font-size:3rem; margin-bottom:1rem; line-height: 3.5rem; letter-spacing: -.1rem; }
.visual .visual-item .cont p { color:var(--muted); font-size:1.5rem; letter-spacing: -.1rem;}
.visual .visual-item .cont .visual-links { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.25rem; }
.visual .visual-item .cont .visual-links a { display:inline-flex; align-items:center; padding:.7rem 1rem; border-radius:999px; background:rgba(15, 23, 42, .58); border:1px solid rgba(148, 163, 184, .18); color:var(--fg); font-size:.95rem; font-weight:600; line-height:1.2; }
.visual .visual-item .cont .visual-links a:hover { background:rgba(30, 41, 59, .94); transform:translateY(-1px); }
.section { background:var(--card-alpha); backdrop-filter: blur(.5rem); border:1px solid #334155; border-radius:1rem; padding:2.4rem 2rem; margin-top:2rem }
.section .section-header { padding-bottom:1rem; border-bottom:1px solid #334155; margin-bottom:1rem; display:flex; gap:1rem; align-items: flex-end;}
.section .section-header h2 { font-size:2rem; font-weight:500; letter-spacing: -.1rem; }
.section .section-header h2 span { font-weight:600; color:var(--acc)}
.section .section-header p { font-size:1.1rem; font-weight:400; color:var(--muted); }
.section h3 { font-size:1.2rem; font-weight:600; margin-bottom:2rem; text-align:center; }
.section .more-btn { display:flex; justify-content: end; margin-top:2rem; }
.section .btn-page-go { display:flex; width:8rem; padding:1rem 3rem 1rem 1rem; background:linear-gradient(135deg, #667eea, #764ba2); border:1px solid #6592e7; color:var(--fg); border-radius:.5rem; font-size:1rem; cursor:pointer; box-shadow: 0 0.5rem 1.5rem rgba(102, 126, 234, 0.3); transition: all 0.3s ease; overflow: hidden; text-align:center; }
.section .btn-page-go:before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transition: left 0.3s ease; }
.section .btn-page-go:hover:before {left:100%}
.section .btn-page-go:after { content:''; position:absolute; right:1.5rem; top:.85rem; display:block; width:1.25rem; height:1.25rem; background:center / contain no-repeat url('data:image/svg+xml,'); transition:right 0.3s ease;}
.section .btn-page-go:hover:after {right:1rem;}
.section .win-info { position:relative; }
.section .win-info ul { display:flex; justify-content: center; align-items: center; }
.section .win-info ul li { flex:0 23rem; display:flex; flex-direction: column; align-items: center; padding:1rem 0; border:1px solid #515e71; background:#293349}
.section .win-info ul li strong { font-size:1.5rem; margin-bottom:1rem; }
.section .win-info ul li:first-child { border-radius:.5rem 0 0 .5rem; border-right:0; }
.section .win-info ul li:last-child { border-radius:0 .5rem .5rem 0;}
.section .win-info ul li .value { font-size:2rem; font-weight: bold; color: #f59e0b; }
.section .win-info ul li .value > span { font-size:1rem; color:#cbd5e1; margin-left:.5rem; }
.section .historyWrap { display:flex; flex-wrap:wrap; padding:2rem 1rem; gap:1rem; align-items: center; justify-content: center;}
.section .historyWrap li { position:relative; padding:1rem; border:1px solid #515e71; border-radius:.5rem; flex:1 auto; }
.section .historyWrap li:first-child { flex:1 100%; padding:2rem 1rem; }
.section .historyWrap li:first-child strong { color:var(--acc); font-size:2rem; padding-bottom:2rem;}
.section .historyWrap li:first-child span { color:var(--fg); font-size:2rem; padding-top:2rem; }
.section .historyWrap li strong { display:block; border-bottom:1px solid #515e71; padding-bottom:1rem; text-align:center; font-size:1.25rem; font-weight:500; }
.section .historyWrap li span { display:block; padding-top:1rem; text-align:center; color:var(--muted) }
.section .bestPrizeyWrap {display:flex; flex-wrap:wrap; padding:2rem 1rem; gap:1rem; }
.section .bestPrizeyWrap li { flex:0 calc(50% - .5rem); border:1px solid #515e71; border-radius:.5rem; }
.section .bestPrizeyWrap li a { display:flex; flex-wrap:wrap; align-items:center; padding:1rem; overflow:hidden; }
.section .bestPrizeyWrap li a:after { content:''; display:block; width:2rem; height:2rem; position:absolute; background:center / contain no-repeat url('data:image/svg+xml,'); right:2rem; top:2rem; transition:right 0.3s ease; }
.section .bestPrizeyWrap li a:hover:after { right:1.5rem; }
.section .bestPrizeyWrap li a:before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transition: left 0.3s ease; }
.section .bestPrizeyWrap li a:hover:before {left:100%}
.section .bestPrizeyWrap li .rank { flex:0 3rem; font-size:2rem; color:var(--acc); text-align:center; margin-right:1rem; font-weight:800; }
.section .bestPrizeyWrap li .detail { display:flex; flex-wrap:wrap; align-items:center; flex:1 auto; }
.section .bestPrizeyWrap li .round { flex:0 100%; margin-bottom:1rem; font-size:1.5rem; }
.section .bestPrizeyWrap li .winner { flex:0 auto; margin-right:.5rem; font-size:1.25rem; }
.section .bestPrizeyWrap li .price { flex:0 auto; font-size:1.25rem; color:#f59e0b }
.section .bestPrizeyWrap li .price span { color:var(--muted); font-size:1rem; }
.section.section-guide { margin-top:8rem; }
.section.section-guide .section-header h3 { font-size:2rem; font-weight:500; letter-spacing: -.1rem; margin:0;}
.section.section-guide .section-header h3 span { color:var(--acc); font-weight:600; }
.section.section-guide .section-header p { font-size:1.1rem; font-weight:400; color:var(--muted); }
.section.section-guide .guide-block { padding:1rem 0; line-height:1.5; }
.section.section-guide .guide-block h4 { font-size:1.5rem; padding-bottom:1rem; }
.section.section-guide .guide-block ul { padding-left:1rem; }
.section.section-guide .guide-block ul li { padding:.5rem 0; }
.section.section-guide .guide-block b { color:var(--acc)}
.section.section-guide .guide-block em { font-weight:500; color:var(--pri) }
.section.section-guide .guide-block code { color:var(--pri) }
.section.section-guide .guide-block .faq {margin-bottom: 1rem;border:1px solid #334155; border-radius:.5rem; overflow: hidden; transition: all 0.2s ease;}
.section.section-guide .guide-block .faq summary { display:flex; justify-content:space-between; align-items:center; cursor:pointer; padding:.8rem 1rem; font-weight:600; color:var(--fg); list-style:none; }
.section.section-guide .guide-block .faq summary:after {content:''; display:inline-block; width:1.25rem; height:1.25rem; background:center / contain no-repeat url('data:image/svg+xml,'); transition:transform .2s ease; }
.section.section-guide .guide-block .faq[open] summary:after {content:''; transform:rotate(90deg)}
.section.section-guide .guide-block .faq .faq-body { padding:.8rem 1rem; font-size:1rem; line-height:1.5; color:var(--muted); border-top:1px solid #334155 }
.section.section-guide .guide-block.notice { color:var(--muted)}
.lotto-ball { display:flex; align-items: center; justify-content: center; gap:1rem; padding:2rem 0;}
.lotto-ball li { display:flex; align-items: center; justify-content: center; width:4rem; height:4rem; border-radius:50%; font-size:2rem; font-weight:bold; box-shadow:0.25rem 0.25rem 0.25rem 0.1rem rgba(0,0,0,.2); text-shadow: 0 0 4px rgba(0, 0, 0, 1);}
.lotto-ball li.plus { width:2rem; box-shadow:none; }
.lotto-ball-list { position:relative; width:100%; padding:2rem 1rem; }
.lotto-ball-list li { display:flex; align-items: center; justify-content: center; gap:1rem; padding:2rem 0; border: 1px solid #334155; margin-bottom: 1rem; border-radius: .75rem;}
.lotto-ball-list li span.ball { display:flex; align-items: center; justify-content: center; width:4rem; height:4rem; border-radius:50%; font-size:1.5rem; font-weight:bold; box-shadow:0.25rem 0.25rem 0.25rem 0.1rem rgba(0,0,0,.2); text-shadow: 0 0 4px rgba(0, 0, 0, 1); }
.lotto-ball-list li .btn-result-info { margin-left:1rem; width:1.5rem; height:1.5rem; display:block; border:none; cursor:pointer; background:center / contain no-repeat url('data:image/svg+xml,'); }
.lotto-ball-list li .info { margin-left:2rem; }
.lotto-ball-list li .info p { padding:.25rem 0;}
.ball { color:var(--fg); text-shadow:1px 1px 5px #000; }
.ball-1,.ball-2,.ball-3,.ball-4,.ball-5,.ball-6,.ball-7,.ball-8,.ball-9,.ball-10 { background:var(--ball-1); }
.ball-11,.ball-12,.ball-13,.ball-14,.ball-15,.ball-16,.ball-17,.ball-18,.ball-19,.ball-20 { background:var(--ball-2); }
.ball-21,.ball-22,.ball-23,.ball-24,.ball-25,.ball-26,.ball-27,.ball-28,.ball-29,.ball-30 { background:var(--ball-3); }
.ball-31,.ball-32,.ball-33,.ball-34,.ball-35,.ball-36,.ball-37,.ball-38,.ball-39,.ball-40 { background:var(--ball-4); }
.ball-41,.ball-42,.ball-43,.ball-44,.ball-45,.ball-46,.ball-47,.ball-48,.ball-49,.ball-40 { background:var(--ball-5); }
.card { background:var(--card-alpha); /*backdrop-filter: blur(.5rem);*/ border:1px solid #334155; border-radius:1rem; padding:2.4rem 2rem; margin-top:2rem }
.card:before {content:''; position:absolute; inset:0; backdrop-filter:blur(.5rem); border-radius:1rem; }
.card .card-header { padding-bottom:1rem; border-bottom:1px solid #334155; margin-bottom:1rem; display:flex; gap:1rem; align-items: center; justify-content: space-between;}
.card .card-header h3 { font-size: 1.75rem; font-weight:500; letter-spacing: -.1rem; }
.card .card-header h3 span { font-weight:600; color:var(--acc)}
.card .card-header button.btn-filter-toggle { padding:.75rem 3rem .75rem 1.5rem; color:var(--fg); border:1px solid #6592e7; border-radius:.5rem; background:linear-gradient(135deg, #667eea, #764ba2); position:absolute; right:0; bottom:.5rem; margin:0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor:pointer; }
.card .card-header button.btn-filter-toggle p { font-size:1rem; color:var(--fg); margin-right:1rem;}
.card .card-header button.btn-filter-toggle span.bar {display: block; position: absolute; height:2px; width:1.5rem; right:1rem; background:var(--fg); border-radius:2px; opacity:1; z-index:0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; }
.card .card-header button.btn-filter-toggle span.bar:after { display: block; position: absolute; height:0.4rem; width:0.4rem; background: #FFFFFF; border-radius:50%; border:.2rem solid var(--card); opacity:1; z-index:5; top:-120%; content:""; -webkit-transition:.25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.card .card-header button.btn-filter-toggle span.bar.bar-1 { top:.75rem; }
.card .card-header button.btn-filter-toggle span.bar.bar-1:after { left:20%; }
.card .card-header button.btn-filter-toggle span.bar.bar-2 { top:calc(50% - 1px);}
.card .card-header button.btn-filter-toggle span.bar.bar-2:after { left: 60%; }
.card .card-header button.btn-filter-toggle span.bar.bar-3 { bottom:.75rem; }
.card .card-header button.btn-filter-toggle span.bar.bar-3:after { left:40%;}
.card .card-header button.btn-filter-toggle.open span.bar:after { opacity:0; }
.card .card-header button.btn-filter-toggle.open span.bar.bar-1 { top:-2px; height:4px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); }
.card .card-header button.btn-filter-toggle.open span.bar.bar-2 { opacity: 0; }
.card .card-header button.btn-filter-toggle.open span.bar.bar-3 { bottom:-1px; height:4px; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); }
.card .card-header button.btn-filter-toggle:hover span.bar.bar-1:after { left:50%; }
.card .card-header button.btn-filter-toggle:hover span.bar.bar-2:after { left:20%; }
.card .card-header button.btn-filter-toggle:hover span.bar.bar-3:after { left:70%; }
.card .card-header p { font-size:1.1rem; font-weight:400; color:var(--muted); }
.card .card-content { display:flex; flex-wrap:wrap; gap:3rem; row-gap:0; }
.card .card-content.form-cont { gap:0; justify-content: space-between; }
.card .card-content .form-row { flex:0 calc(50% - 1.5rem); }
.card .card-content .form-row.full-row { flex:0 100%;}
.card .card-content .form-row.form-row-3 { flex:0 calc(33% - 2rem); }
.card .card-footer { padding-top:1rem; }
button.btnSubmit, a.btnSubmit { display:block; width:100%; background:linear-gradient(135deg, #667eea, #764ba2); border:1px solid #6592e7; padding:1rem 0; color:var(--fg); border-radius:.5rem; font-size:1.25rem; cursor:pointer; box-shadow: 0 0.5rem 1.5rem rgba(102, 126, 234, 0.3); transition: all 0.3s ease; overflow: hidden; text-align:center; }
button.btnSubmit span , a.btnSubmit span { position:relative; z-index:1; }
button.btnSubmit:before, a.btnSubmit:before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transition: left 0.3s ease;}
button.btnSubmit:hover, a.btnSubmit:hover { /*transform: translateY(-2px);*/ box-shadow: 0 1rem 2rem rgba(102, 126, 234, 0.4); }
button.btnSubmit:hover:before, a.btnSubmit:hover:before {left:100%}
.form-row { position:relative; padding:1rem 0 2rem; }
.form-row label,
.form-row span.label { font-size:1.25rem; font-weight:600; color:#b0b3b9; }
.form-row .forn-header { display:flex; align-items: center; margin-bottom: 1rem;}
.form-row .form-info { position:relative; margin-left:1rem;}
.form-row .form-info button.btn-form-info { width:1.5rem; height:1.5rem; display:block; border:none; cursor:pointer; background:center / contain no-repeat url('data:image/svg+xml,'); }
/*
.form-row .form-info .info-content { position:absolute; z-index:99; left:150%; top:0; padding:1rem; background:var(--bg); border:1px solid #334155; border-radius:.5rem; width:auto; min-width:20rem; max-width:40rem; font-size:1rem;}
*/
.title-info-wrap { display:flex; }
.title-info-wrap .form-info {position:relative; margin-left:1rem; }
.title-info-wrap .form-info button.btn-form-info { width:1.5rem; height:1.5rem; display:block; border:none; cursor:pointer; background:center / contain no-repeat url('data:image/svg+xml,'); }
.tippy-box { font-size:1rem; line-height:1.5; background-color:#1a1a2e; color:var(--fg); border-radius: .5rem; border: 1px solid #334155; box-shadow: 0.5rem 0.5rem 1rem 0.2rem rgba(0, 0, 0, .5); }
.tippy-arrow { color:#334155; display:none; }
.tippy-content { padding:1rem; }
.info-content { width:auto; min-width:400px; font-size:1rem; }
.info-content p { padding:.25rem 0; font-size:1.05rem; font-weight:400;}
.info-content p b { font-weight:500; color:var(--acc); }
.info-content li strong { display:block; padding:.5rem 0 .2rem; color:var(--acc); font-weight:500; }
.info-content li span { display:block; padding-left:.5rem; color:var(--muted); }
.info-content li span b { display:inline-block; padding:0; font-weight:500; color:var(--fg)}
.number-info .score-trio { display:flex; flex-wrap:wrap; }
.number-info .score-trio .score-mini { font-size:1rem; color:var(--muted); margin-right:.5rem; }
.number-info .score-trio .score-mini.avg { font-size:1.1rem; flex:0 100%; color:var(--fg); margin-right:0; }
.number-info .score-trio .score-mini strong { color:var(--pri) }
.number-info .score-trio .score-mini.avg strong { font-weight:600; color:var(--warn) }
.number-info .metrics { margin: .5rem 0 .2rem; color:var(--acc);}
.number-info .explain { color:var(--muted)}
/* rounds */
.roundHistory { position:relative; padding-top:3rem; }
.roundHistory ul { display:flex; flex-wrap:wrap; gap:.5rem; }
.roundHistory ul li { flex:1 100%; align-items:center; border:1px solid #334155; background:var(--card-alpha); display:flex; padding:2rem; border-radius:.5rem; overflow:hidden; }
.roundHistory ul li .round { flex:0 5rem; display:flex; flex-wrap:wrap; }
.roundHistory ul li .round .num { font-size:1.75rem; font-weight:600; color:var(--acc)}
.roundHistory ul li .round .date { margin-top:.5rem; color:var(--muted); letter-spacing:-.025rem;}
.roundHistory ul li .numbers { display:flex; flex:0 35rem; align-items: center; justify-content: center;}
.roundHistory ul li .numbers .ball { display:flex; align-items: center; justify-content: center; width:3rem; height:3rem; border-radius:50%; font-size:1.5rem; font-weight:bold; box-shadow:0.25rem 0.25rem 0.25rem 0.1rem rgba(0,0,0,.2); text-shadow: 0 0 4px rgba(0, 0, 0, 1); }
.roundHistory ul li .info { padding-right:3rem; margin-left:auto; font-size:1.25rem; }
.roundHistory ul li .more { }
.roundHistory ul li .more a { display:block; padding:1rem 3.5rem 1rem 2rem; }
input[type=text],
input[type=password]{
width: 100%;
flex: 1;
border: 1px solid #ca60fa;
background:rgba(255, 255, 255, 0.1);
outline: none;
border-radius: .5rem;
padding:1rem;
font-weight:400;
color: var(--fg);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
input[type=text]:focus, input[type=password]:focus {
border-color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.15);
/*box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
transform: translateY(-2px);
*/
}
textarea {
font-family: inherit;
width: 100%;
flex: 1;
border: 1px solid #ca60fa;
background:rgba(255, 255, 255, 0.1);
outline: none;
border-radius: .5rem;
padding:1rem;
font-weight:400;
color: var(--fg);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
select {
--select-border-color:#ca60fa;
--select-option-border-color:#334155;
--select-option-check:#7e349d;
--select-option-hover:#6592e7;
appearance: none; display:flex; justify-content:space-between; align-items:center; width:100%; color:var(--fg); padding-block:1rem; padding-inline:1.5rem 2.5rem; border-radius:.5rem; border:1px solid var(--select-border-color); cursor: pointer; font-weight:600; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23ca60fa' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A") right 1rem center / 1.2rem no-repeat;
&:focus-visible {
outline: none;
}
@supports ( appearance:base-select) {
@media (hover:hover) {
&,&::picker(select) {
appearance:base-select;
}
}
}
@media (hover: hover) {
@supports (appearance: base-select) {
padding-inline:1.25rem; background-image: none;
&::picker-icon {
content: ""; width: 1.25rem; height: 1.25rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23ca60fa' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A"); transition:rotate 0.1s ease-out;
}
&:open::picker-icon { rotate:180deg; }
&::picker(select) { padding:0; margin-top:.25rem; border:1px solid var(--select-option-border-color); background:var(--card); color:var(--fg); border-radius:.5rem; font-weight:400; opacity:0; height:0; overflow: clip; transition: height 0.2s ease-out, opacity 0.2s ease-out, overlay 0.2s, display 0.2s; transition-behavior: allow-discrete; }
&:open::picker(select) {
opacity:1; height:calc-size(auto, size); overflow:auto;
@starting-style { opacity:0; height:0; }
}
option {
padding:1rem 1.5rem; border-top:1px solid var(--select-option-border-color); cursor:pointer; transition-property:color, background; transition-duration:0.2s; transition-timing-function: ease-out;
&:where(:hover, :focus, :active) { background:var(--select-option-hover); color:var(--fg); }
&:checked { background:var(--select-option-check); color:var(--fg); }
&::checkmark { display:none; }
&:first-child { border:0;}
}
}
}
}
/* paging */
.paging-mobile { display:none;}
.pg_wrap { position:relative; padding:1rem 0; text-align:center; }
.pg_wrap .pg { display:flex; align-items: center; justify-content: center; }
.pg_wrap .pg .pg_current,
.pg_wrap .pg .pg_page { display:flex; align-items: center; justify-content: center; width:2.75rem; height:2.75rem; border:1px solid #334155; border-radius:50%; background:var(--card-alpha); margin:0 .2rem;}
.pg_wrap .pg .pg_current { background:var(--fg); color:#333; }
.pg_wrap .pg .pg_page.pg_start, .pg_wrap .pg .pg_page.pg_prev,
.pg_wrap .pg .pg_page.pg_end, .pg_wrap .pg .pg_page.pg_next { font-size:0; text-indent:-9999px; position:relative; border:none; background:none; margin:0;}
.pg_wrap .pg .pg_page.pg_next:before {content:''; position:absolute; width:100%; height:100%; display:block; background:url('data:image/svg+xml,') no-repeat center / 100%;}
.pg_wrap .pg .pg_page.pg_end:before {content:''; position:absolute; width:100%; height:100%; display:block; background:url('data:image/svg+xml,') no-repeat center / 100%;}
.pg_wrap .pg .pg_page.pg_prev:before {content:''; position:absolute; width:100%; height:100%; display:block; background:url('data:image/svg+xml,') no-repeat center / 100%;}
.pg_wrap .pg .pg_page.pg_start:before {content:''; position:absolute; width:100%; height:100%; display:block; background:url('data:image/svg+xml,') no-repeat center / 100%;}
/* table */
.table-wrap { position:relative; width:100%; }
.table-wrap table { border:none; border-collapse:collapse; margin: 0; padding: 0; width: 100%; border-radius:.5rem; box-shadow:0 0 0 1px #334155; overflow:hidden; }
.table-wrap table caption { position:absolute; top:auto; left:-9999px; width:1px; height:1px; overflow:hidden; text-indent:-9999px; }
.table-wrap table thead th { padding:1rem 0; border:1px solid #334155; border-bottom:none; border-top:none; letter-spacing: .1rem;}
.table-wrap table tbody td { padding:.75rem 1rem; border:1px solid #334155; }
.table-wrap table tbody td.center { text-align:center; }
.table-wrap table tbody td.right { text-align:right; }
.table-wrap table thead tr th:first-child { border-left:none; }
.table-wrap table thead tr th:last-child { border-right:none; }
.table-wrap table tbody tr:last-child td { border-bottom:none;}
.table-wrap table tbody tr td:first-child { border-left:none; }
.table-wrap table tbody tr td:last-child { border-right:none; }
@media (max-width:1200px){
.content { padding:0 1rem; }
.form-numbers { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
}
@media (max-width:1024px){
.header-inner nav { display:none; }
.header-inner .mobileToggle { display:block;}
.form-numbers { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
.section .bestPrizeyWrap li { flex: 1 100%; }
.section .bestPrizeyWrap li .round { font-size:1.75rem;}
.section .bestPrizeyWrap li .winner { font-size:1.5rem; }
.section .bestPrizeyWrap li .price { font-size:1.5rem; }
}
@media (max-width:900px){
.visual .visual-item { height:20rem; }
.visual .visual-item .cont { bottom:2rem; left:2rem; }
.section .section-header { flex-wrap:wrap; }
.section .section-header p { flex:0 100%; }
.card .card-content { gap:0;}
.card .card-content .form-row { flex:0 100%; }
.form-numbers { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
}
@media (max-width:830px){
.form-numbers { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
.lotto-ball-list li { flex-wrap:wrap; }
.lotto-ball-list li .info { margin-left:0; flex:1 100%; display:flex; justify-content: flex-end; margin-right:1rem; gap:.5rem; }
.lotto-ball-list li .info p { padding:.25rem 0;}
table.rank-table { border:0; box-shadow:unset; border-radius:0; }
table.rank-table thead { clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; }
table.rank-table tbody tr { display: grid; grid-template-columns:1fr 4fr;}
table.rank-table tbody tr:first-child td:nth-child(1) { border-radius:.5rem 0 0 0;}
table.rank-table tbody tr:first-child td:nth-child(2) { border-radius:0 .5rem 0 0;}
table.rank-table tbody tr:last-child td:nth-child(1) { border-bottom:1px solid #334155; border-radius:0 0 0 .5rem;}
table.rank-table tbody tr:last-child td:nth-child(4) { border-bottom:1px solid #334155; border-radius:0 0 .5rem 0;}
table.rank-table tbody tr td:nth-child(1) { grid-row: 1 / span 3; display: flex; align-items: center; justify-content: center; border-left:1px solid #334155; border-bottom:none; }
table.rank-table tbody tr td:nth-child(2) { grid-column: 2 / 4; display:flex; align-items: center; justify-content:space-between; border-left:none; border-bottom:none;}
table.rank-table tbody tr td:nth-child(3) { grid-column: 2 / 4; display:flex; align-items: center; justify-content:space-between; border-left:none; border-bottom:none;}
table.rank-table tbody tr td:nth-child(4) { grid-column: 2 / 4; display:flex; align-items: center; justify-content:space-between; border-left:none; border-bottom:none; border-right:1px solid #334155; }
table.rank-table tbody tr td:nth-child(2):before { content:attr(data-label); }
table.rank-table tbody tr td:nth-child(3):before { content:attr(data-label); }
table.rank-table tbody tr td:nth-child(4):before { content:attr(data-label); }
table.store-table { border:0; box-shadow:unset; border-radius:0; }
table.store-table thead { clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; }
table.store-table tbody tr { display: grid; grid-template-columns:2fr 6fr;}
table.store-table tbody tr:first-child td:nth-child(1) { border-radius:.5rem 0 0 0;}
table.store-table tbody tr:first-child td:nth-child(2) { border-radius:0 .5rem 0 0;}
table.store-table tbody tr:last-child td:nth-child(1) { border-bottom:1px solid #334155; border-radius:0 0 0 .5rem;}
table.store-table tbody tr:last-child td:nth-child(4) { border-bottom:1px solid #334155; border-radius:0 0 .5rem 0;}
table.store-table tbody tr td:nth-child(1) { grid-column:1; grid-row: 1 / span 3; display: flex; align-items: center; justify-content: center; border-left:1px solid #334155; border-bottom:none; }
table.store-table tbody tr td:nth-child(2) { grid-column: 2 / 6; display:flex; align-items: center; justify-content:space-between; border-left:none; border-bottom:none;}
table.store-table tbody tr td:nth-child(3) { grid-column: 2 / 6; display:flex; align-items: center; justify-content:space-between; border-left:none; border-bottom:none;}
table.store-table tbody tr td:nth-child(4) { grid-column: 2 / 6; display:flex; align-items: center; justify-content:space-between; border-left:none; border-bottom:none; border-right:1px solid #334155; }
table.store-table tbody tr td:nth-child(2):before { content:attr(data-label); }
table.store-table tbody tr td:nth-child(3):before { content:attr(data-label); }
table.store-table tbody tr td:nth-child(4):before { content:attr(data-label); }
}
@media (max-width:760px){
.form-numbers { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
.section .historyWrap li { flex: 0 calc(50% - .5rem); }
.section .win-info ul { flex-wrap:wrap; }
.section .win-info ul li { flex: 1 100%;}
.section .win-info ul li:first-child { border-radius:.5rem .5rem 0 0; border-bottom:none; border-right:1px solid #515e71 }
.section .win-info ul li:last-child { border-radius:0 0 .5rem .5rem;}
}
@media (max-width:690px){
.lotto-ball { gap:.5rem; }
.lotto-ball li { width:3.5rem; height:3.5rem; font-size:1.75rem; }
.section .win-info ul li strong { font-size:1.25rem; }
.section .win-info ul li .value { font-size:1.25rem;}
.form-numbers { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; border-left:1px solid #ca60fa; border-top:1px solid #ca60fa; border-radius: .5rem .5rem 0 .5rem; }
.numberItem input[type="checkbox"] + label { margin-bottom:0; width:100%; height:0; padding-top:calc( 50% - 1px); padding-bottom:calc( 50% - 1px); border-radius:0; border:none; border-right:1px solid #ca60fa; border-bottom:1px solid #ca60fa;}
.form-numbers .numberItem:nth-child(10) input[type="checkbox"] + label { border-radius:0 .5rem 0 0;}
.form-numbers .numberItem:nth-child(40) input[type="checkbox"] + label { border-radius:0 0 .5rem 0;}
.form-numbers .numberItem:nth-child(41) input[type="checkbox"] + label { border-radius:0 0 0 .5rem;}
.form-numbers .numberItem:nth-child(45) input[type="checkbox"] + label { border-radius:0 0 .5rem 0;}
}
@media (max-width:640px){
.form-numbers { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
.form-numbers .numberItem:nth-child(9) input[type="checkbox"] + label { border-radius:0 .5rem 0 0; }
.form-numbers .numberItem:nth-child(10) input[type="checkbox"] + label { border-radius:0;}
.form-numbers .numberItem:nth-child(37) input[type="checkbox"] + label { border-radius:0 0 0 .5rem;}
.form-numbers .numberItem:nth-child(40) input[type="checkbox"] + label { border-radius:0;}
.form-numbers .numberItem:nth-child(41) input[type="checkbox"] + label { border-radius:0;}
}
@media (max-width:600px){
.visual .visual-item { border:none; border-radius:0rem; height:14rem; }
.visual .visual-item .cont { bottom:1rem; left:1rem; }
.visual .visual-item .cont h2 { font-size:2rem; line-height:2.25rem; }
.visual .visual-item .cont p { font-size:1.25rem; }
.section { border-left:none; border-right:none; border-radius:0; padding:2rem 1rem; }
.section .section-header h2 { font-size:1.5rem; }
.lotto-ball { gap:.25rem; padding:1.5rem 0; }
.lotto-ball li { width:3rem; height:3rem; font-size:1.5rem; }
.content { padding:0; }
.content > h2 { padding-left:1rem; }
.content > p { padding-left:1rem; }
.card { border-left:none; border-right:none; border-radius:0; padding:2rem 1rem; }
.form-numbers { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
.lotto-ball-list li span.ball { width:3rem; height:3rem; }
.form-numbers .numberItem:nth-child(8) input[type="checkbox"] + label { border-radius:0 .5rem 0 0; }
.form-numbers .numberItem:nth-child(9) input[type="checkbox"] + label { border-radius:0;}
.form-numbers .numberItem:nth-child(37) input[type="checkbox"] + label { border-radius:0;}
.form-numbers .numberItem:nth-child(40) input[type="checkbox"] + label { border-radius:0 0 .5rem 0;}
.form-numbers .numberItem:nth-child(41) input[type="checkbox"] + label { border-radius:0 0 0 .5rem;}
table.rank-table tbody tr { border-bottom:none; display:block; margin-bottom:1rem; }
table.rank-table tbody tr td { display:flex !important; align-items:center !important; justify-content:space-between !important; border-bottom:none; gap:2rem; word-break: break-all; text-align:right !important; border:1px solid #334155 !important;}
table.rank-table tbody tr td:before { content:attr(data-label); display:block; white-space:nowrap; }
table.rank-table tbody tr td:nth-child(1) { border-radius:.5rem .5rem 0 0 !important; border-bottom:none !important; justify-content: center !important;}
table.rank-table tbody tr td:nth-child(1):before { display:none; }
table.rank-table tbody tr td:nth-child(2) { border-radius:0 !important; border-bottom:none !important;}
table.rank-table tbody tr td:nth-child(3) { border-bottom:none !important;}
table.rank-table tbody tr td:nth-child(4) { border-radius:0 0 .5rem .5rem !important;}
table.store-table tbody tr { border-bottom:none; display:block; margin-bottom:1rem; }
table.store-table tbody tr td { display:flex !important; align-items:center !important; justify-content:space-between !important; border-bottom:none; gap:2rem; word-break: break-all; text-align:right !important; border:1px solid #334155 !important;}
table.store-table tbody tr td:before { content:attr(data-label); display:block; white-space:nowrap; }
table.store-table tbody tr td:nth-child(1) { border-radius:.5rem .5rem 0 0 !important; border-bottom:none !important; justify-content: center !important;}
table.store-table tbody tr td:nth-child(1):before { display:none; }
table.store-table tbody tr td:nth-child(2) { border-radius:0 !important; border-bottom:none !important;}
table.store-table tbody tr td:nth-child(3) { border-bottom:none !important;}
table.store-table tbody tr td:nth-child(4) { border-radius:0 0 .5rem .5rem !important;}
}
@media (max-width:540px){
.header-inner .logo .logo-title { font-size:1.5rem; }
.form-numbers { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
.form-numbers .numberItem:nth-child(7) input[type="checkbox"] + label { border-radius:0 .5rem 0 0; }
.form-numbers .numberItem:nth-child(8) input[type="checkbox"] + label { border-radius:0;}
.form-numbers .numberItem:nth-child(40) input[type="checkbox"] + label { border-radius:0;}
.form-numbers .numberItem:nth-child(41) input[type="checkbox"] + label { border-radius:0;}
.form-numbers .numberItem:nth-child(42) input[type="checkbox"] + label { border-radius:0 0 .5rem 0;}
.form-numbers .numberItem:nth-child(43) input[type="checkbox"] + label { border-radius:0 0 0 .5rem;}
.section .bestPrizeyWrap li a:after {right:1rem;}
.section .bestPrizeyWrap li a:hover:after {right:.5rem;}
.section .bestPrizeyWrap li .rank { flex:0 2rem; font-size:1.75rem; }
.section .bestPrizeyWrap li .round { font-size:1.5rem;}
.section .bestPrizeyWrap li .winner { font-size:1.25rem; }
.section .bestPrizeyWrap li .price { font-size:1.25rem; }
}
@media (max-width:510px){
.card { padding:1rem 1rem; }
.lotto-ball-list {padding: 2rem 0 0;}
.lotto-ball-list li { padding:2rem 0 1rem;}
.lotto-ball-list li span.ball { font-size:1.2rem;}
.lotto-ball-list li .btn-result-info { margin-left:0; position:absolute; right:0.5rem; top:0.5rem; }
.lotto-ball-list li .numbers {gap: .4rem;}
.section .historyWrap { padding: 2rem 0 0 ; }
.section .bestPrizeyWrap { padding: 2rem 0 0 ; }
.card .card-content .form-row.form-row-3 { flex:0 100%; }
.paging-pc {display:none;}
.paging-mobile { display:block;}
}
@media (max-width:450px){
.lotto-ball { padding:1rem 0; }
.lotto-ball li { width:2.25rem; height:2.25rem; font-size:1.25rem; }
.lotto-ball li.plus { width:1rem;}
.info-content { min-width:90vw; }
.lotto-ball-list li .numbers {margin-right:1rem;}
.lotto-ball-list li span.ball { width:2.4rem; height:2.4rem;}
.section .bestPrizeyWrap li .rank { flex:1 100%; font-size:1.5rem; text-align:left; padding-bottom:1rem; }
.section .bestPrizeyWrap li a:after { top:3rem;}
.section .bestPrizeyWrap li .round { font-size:1.25rem;}
.section .bestPrizeyWrap li .winner { font-size:1rem; }
.section .bestPrizeyWrap li .price { font-size:1rem; }
}
@media (max-width:350px){
.lotto-ball li { width:2rem; height:2rem; font-size:1.1rem; }
.lotto-ball li.plus { width:1rem;}
.form-numbers { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
.lotto-ball-list li span.ball { width:2rem; height:2rem;}
.form-numbers .numberItem:nth-child(6) input + label { border-radius:0 .5rem 0 0; }
.form-numbers .numberItem:nth-child(7) input + label { border-radius:0;}
}
#cardContent.as-collapse.is-open { display:block; }
.mobileCont { display:flex; flex-wrap:wrap; gap:3rem; row-gap:0; /*overflow:hidden;*/ }
.mobileHeader { display:none; border-bottom:1px solid #ddd; width:100%; }
.mobileHeader button { font-size:0; border:0; color:var(--fg);text-indent:-9999px; width:5rem; position:absolute; z-index:2; left:0; top:0; bottom:0; background:url('data:image/svg+xml,') no-repeat center / 1.5rem; }
.mobileHeader span { font-size:1.5rem; display:block; text-align:center; padding:1rem 0;}
/* 모바일: 우측 드로어 */
#cardContent.as-drawer {
position: fixed;
top: 0; right: 0; bottom: 0;
/*width: min(92vw, 420px);*/
width:100%;
background: var(--bg, #fff);
z-index: 30;
transform: translateX(100%);
transition: transform .25s ease;
}
#cardContent.as-drawer.is-open {
transform: translateX(0);
}
#cardContent { will-change: max-height, transform; }
@media (min-width:601px) {
#cardContent { z-index:2; overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-4px); transition: max-height .3s ease, opacity .2s ease, transform .2s ease; }
#cardContent.is-open { overflow: unset; opacity: 1; transform: translateY(0); max-height:none; }
}
@media (max-width:600px) {
.card { position:relative; }
#cardContent { position:fixed; top:0; right:0; bottom: 0; width:100%; max-width:100%; z-index:200; background:var(--bg, #0b1220); box-shadow:-1rem 0 2rem rgba(2,6,23,.35); transform:translateX(100%); transition:transform .28s ease; overflow:hidden; padding:0; }
#cardContent.is-open { transform: translateX(0); }
#cardContent.is-open .mobileHeader { display:block;}
#cardContent.is-open .mobileCont { height:100%; overflow:auto; padding:2rem 1rem 5rem; }
.wb-fp-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(0px); z-index:20; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.wb-fp-backdrop.show { opacity: 1; pointer-events: auto; }
}
html.wb-sheet-open { overscroll-behavior: none; }
body.wb-noanchor { overflow-anchor: none; }
.wb-backdrop { position:fixed; inset:0; z-index: 1000; }
.wb-sheet { position:fixed; left:0; right:0; bottom:0; z-index: 1010; }
/* 닫힌 상태에서 잔상/그림자 누수 차단 */
.wb-select.is-sheet .wb-sheet{
opacity:0; visibility:hidden; pointer-events:none;
transform:translateY(100%); box-shadow:none;
transition: transform .25s ease, opacity .2s ease, visibility 0s .25s;
}
.wb-select.is-open.is-sheet .wb-sheet{
opacity:1; visibility:visible; pointer-events:auto;
transform:translateY(0); box-shadow:0 -.75rem 2rem rgba(2,6,23,.2);
transition: transform .25s ease, opacity .2s ease;
}
.wb-select.is-sheet .wb-backdrop{ opacity:0; pointer-events:none; transition:opacity .2s; }
.wb-select.is-open.is-sheet .wb-backdrop{ opacity:1; pointer-events:auto; }
/* 데스크톱 모드에선 시트 자체를 렌더하지 않음 */
.wb-select:not(.is-sheet) .wb-backdrop,
.wb-select:not(.is-sheet) .wb-sheet { display:none; }
.btn.btn-filter-toggle[aria-expanded="true"] .bar-2 { opacity:0; }
.btn.btn-filter-toggle[aria-expanded="true"] .bar-1 { transform: translateY(-1px) rotate(45deg); }
.btn.btn-filter-toggle[aria-expanded="true"] .bar-1:after { opacity:0;}
.btn.btn-filter-toggle[aria-expanded="true"] .bar-3 { transform: translateY(1px) rotate(-45deg); }
.btn.btn-filter-toggle[aria-expanded="true"] .bar-3:after { opacity:0;}
.bar { display:inline-block; width:16px; height:2px; background:currentColor; border-radius:2px; transition:transform .2s, opacity .2s; }
.bar-1,.bar-2,.bar-3{ display:block; }
:root{ --machine-size: 300px; --slot-size: 54px; --ball-font: 18px; }
/*
.lotto-anim-wrap { position:fixed; left:50%; top:50%; width:var(--machine-size); transform:translate(-50%, -50%); z-index:30; transition:transform .3s;}
.bowl-wrap{ position:relative; width:100%; height:100%; display:grid; place-items:center; padding-top:10px; margin:0 auto; }
*/
.lotto-anim-wrap { position:fixed; left:0; top:0; right:0; bottom:0; z-index:30; display:block; transform:translateY(100%); transition:transform .5s; will-change: transform;}
.lotto-anim-wrap.generate { transform:translateY(0); }
.lotto-anim-wrap:after {content:''; position:absolute; left:0; top:0; right:0; bottom:0; backdrop-filter:blur(1rem); z-index:1; opacity:0; transition:opacity .5s; will-change: opacity,}
.lotto-anim-wrap.generate:after { opacity:1 }
.lotto-anim-wrap .bowl-wrap { position:absolute; z-index:2; width:calc( var(--machine-size) + 20px); left:50%; top:50%; transform:translate(-50%, -50%) scale(0); transition:transform .5s; will-change: transform;}
.lotto-anim-wrap.generate .bowl-wrap { transform:translate(-50%, -50%) scale(1);}
.lotto-anim-wrap .bowl-wrap .bowl{ position:relative; width:var(--machine-size); height:var(--machine-size); border-radius:50%; filter:drop-shadow(0 12px 30px rgba(0,0,0,.5)); margin:0 auto; }
.lotto-anim-wrap .bowl-wrap .bowl::before{
content:""; position:absolute; z-index:2; inset:0; border-radius:50%; border:1px solid #f4faff; box-shadow: inset 0 0 10px 6px rgba(0,188,255,.2), 0 0 0 1px rgba(255,255,255,.06); pointer-events:none;
background:radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,.18), rgba(255,255,255,0) 40%), radial-gradient(100% 100% at 80% 90%, rgba(255,255,255,.06), rgba(255,255,255,0) 40%);
}
.lotto-anim-wrap .bowl-wrap .bowl::after{
/*
content: ''; position: absolute; width: 90%; height: 1rem; left: 5%; background: rgba(0, 0, 0, 0.3); border-radius: 100%; box-shadow: 0 0 5px 5px rgba(0, 0, 0, .3); z-index: 1; bottom: -1rem;
*/
content:'';
position:absolute;
left:5%;
width:90%;
height:1.2rem; /* 살짝 키워주면 자연스러움 */
bottom:-0.9rem; /* PC/모바일 모두 자연스러운 간격 */
z-index:1;
pointer-events:none;
border-radius:999px;
/* box-shadow 제거, 대신 타원형 그라디언트 + blur */
background:
radial-gradient(ellipse at 50% 50%,
rgba(0,0,0,.35) 0%,
rgba(0,0,0,.30) 35%,
rgba(0,0,0,.18) 55%,
rgba(0,0,0,0) 80%);
filter: blur(6px);
transform: translateZ(0);
}
.lotto-anim-wrap .bowl-wrap .bowl canvas { width:100%; height: auto; display: block; }
.lotto-anim-wrap .bowl-wrap .slots { display:flex; justify-content: space-between; margin-top:2rem; }
.lotto-anim-wrap .bowl-wrap .slot { width:3rem; height:3rem; border-radius:50%; display:flex; align-items:center; justify-content:center; /*box-shadow:inset -0.5rem -0.5rem 0.5rem 0.5rem rgba(0, 0, 0, .3); background:#f1f3f5;*/ background:none; }
.lotto-anim-wrap .bowl-wrap .slot.filled { /*background:#fff;*/ }
.slot.filled.ball-1, .slot.filled.ball-2, .slot.filled.ball-3, .slot.filled.ball-4, .slot.filled.ball-5,
.slot.filled.ball-6, .slot.filled.ball-7, .slot.filled.ball-8, .slot.filled.ball-9, .slot.filled.ball-10 { background:var(--ball-1); text-shadow: 1px 1px 5px #000; }
.slot.filled.ball-11, .slot.filled.ball-12, .slot.filled.ball-13, .slot.filled.ball-14, .slot.filled.ball-15,
.slot.filled.ball-16, .slot.filled.ball-17, .slot.filled.ball-18, .slot.filled.ball-19, .slot.filled.ball-20 { background:var(--ball-2); text-shadow: 1px 1px 5px #000; }
.slot.filled.ball-21, .slot.filled.ball-22, .slot.filled.ball-23, .slot.filled.ball-24, .slot.filled.ball-25,
.slot.filled.ball-26, .slot.filled.ball-27, .slot.filled.ball-28, .slot.filled.ball-29, .slot.filled.ball-30 { background:var(--ball-3); text-shadow: 1px 1px 5px #000; }
.slot.filled.ball-31, .slot.filled.ball-32, .slot.filled.ball-33, .slot.filled.ball-34, .slot.filled.ball-35,
.slot.filled.ball-36, .slot.filled.ball-37, .slot.filled.ball-38, .slot.filled.ball-39, .slot.filled.ball-40 { background:var(--ball-4); text-shadow: 1px 1px 5px #000; }
.slot.filled.ball-41, .slot.filled.ball-42, .slot.filled.ball-43, .slot.filled.ball-44, .slot.filled.ball-45,
.slot.filled.ball-46, .slot.filled.ball-47, .slot.filled.ball-48, .slot.filled.ball-49, .slot.filled.ball-40 { background:var(--ball-5); text-shadow: 1px 1px 5px #000; }
/*
.ball-1,.ball-2,.ball-3,.ball-4,.ball-5,.ball-6,.ball-7,.ball-8,.ball-9,.ball-10 { background:var(--ball-1); }
.ball-11,.ball-12,.ball-13,.ball-14,.ball-15,.ball-16,.ball-17,.ball-18,.ball-19,.ball-20 { background:var(--ball-2); }
.ball-21,.ball-22,.ball-23,.ball-24,.ball-25,.ball-26,.ball-27,.ball-28,.ball-29,.ball-30 { background:var(--ball-3); }
.ball-31,.ball-32,.ball-33,.ball-34,.ball-35,.ball-36,.ball-37,.ball-38,.ball-39,.ball-40 { background:var(--ball-4); }
.ball-41,.ball-42,.ball-43,.ball-44,.ball-45,.ball-46,.ball-47,.ball-48,.ball-49,.ball-50 { background:var(--ball-5); }
*/
/*.dom-ball { position:fixed; width:46px; height:46px; border-radius:50%; color:#06202f; display:flex; align-items:center; justify-content:center; pointer-events:none; will-change:transform,left,top; text-shadow: 0 1px 0 rgba(255,255,255,.9); }*/
.dom-ball{ position:absolute; width:3rem; height:3rem; border-radius:50%; display:grid; place-items:center;
color:var(--fg); font-weight:500; font-size:1rem; transform:translate(-50%, -50%) scale(1);
/*box-shadow: inset 0 0 0 2px rgba(255,255,255,.7), 0 8px 18px rgba(0,0,0,.45);*/
will-change: transform, left, top; pointer-events: none; z-index: 9999; text-shadow: 1px 1px 5px #000;
}
/* 리스트 슬라이드업 */
.result-item { opacity:0; transform: translateY(12px); transition: opacity .38s ease, transform .38s ease; }
.result-item.reveal { opacity:1; transform: translateY(0); }
.lotto-ball-list .numbers .slots.as-result {
justify-content: center; /* 결과 목록에서는 가운데 정렬 */
gap: 6px;
}
.lotto-ball-list .numbers .slots.as-result .slot {
width: 36px; height: 36px; /* 결과 목록용 살짝 축소 */
}
/* 첫 세트 슬롯이 결과 리스트 안으로 들어왔을 때 */
.lotto-ball-list .numbers #lottoSlots.as-result,
.lotto-ball-list .numbers .slots.as-result {
justify-content: center;
gap: 6px;
}
.lotto-ball-list .numbers #lottoSlots.as-result .slot,
.lotto-ball-list .numbers .slots.as-result .slot {
width: 36px;
height: 36px;
}
/* 2번째 세트부터 슬라이드업 효과 */
.result-item.pre-hide {
opacity: 0;
transform: translateY(8px);
}
.result-item.reveal {
opacity: 1;
transform: translateY(0);
transition: opacity .28s ease, transform .28s ease;
}
.loadingWrap {
position:fixed; left:0; right:0; top:0; bottom:0; display:flex; align-items:center; justify-content:center; z-index:100;
.loaderWrap {
--size:140px; width: var(--size); height: var(--size); position:relative; transform: translateX(-50%); zoom:1; z-index:2;
.loadBall {
position:absolute; width:calc(var(--size) + var(--i)); height:calc(var(--size) + var(--i)); background-color:var(--color); border-radius:50%; animation: move 5s linear infinite both; transform-origin:var(--size); mix-blend-mode:difference; animation-duration:var(--d); filter:blur(28px);
&:nth-child(even) { animation-direction:reverse; }
}
}
.msg {
position:absolute; z-index:3;
span {
line-height:1; animation:ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; color:var(--fg); font-size:1rem;
&:nth-child(2) { animation-delay:.1s; }
&:nth-child(3) { animation-delay:.2s; }
&:nth-child(4) { animation-delay:.3s; }
&:nth-child(5) { animation-delay:.4s; }
&:nth-child(6) { animation-delay:.5s; }
&:nth-child(7) { animation-delay:.6s; }
}
}
&:before { content:''; position:absolute; left:0; top:0; right:0; bottom:0; background: rgba(10, 15, 25, .35); backdrop-filter: saturate(120%) blur(4px); z-index:1; }
}
.loadingWrap[hidden]{display:none}
@keyframes ping {
75%, 100% { transform: scale(2); opacity:0 }
}
@keyframes move {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
@media (prefers-reduced-motion:reduce){
.loadingWrap {
.loaderWrap {
.loadBall {
animation-duration:calc( var(--d) * 5 );
}
}
}
}