/* ===== Header ===== */
.main-header { position:sticky; top:0; width:100%; z-index:90; user-select: none; --bg:transparent; --color:#fff; --scrollbg:#fff; --scrollcolor:#000; }
body[slide-index='4'] .main-header { --color:#ccc; --bg:rgba(0, 0, 0, 0.3); }

.main-header > .container { position:absolute; width:100%; max-height:100px; display:flex; justify-content:center; overflow:hidden; transition: all 0.2s; background:var(--bg); color:var(--color); }
.main-header > .container > .wrap { width:100%; max-width:1280px; display:flex; }
.main-header > .container > .wrap > div { display:flex; align-items:center; }
.main-header > .container > .wrap > div.logo { max-height:100px; display:flex; align-items:center; transition: all 0.2s;}
.main-header > .container > .wrap > div.info { max-height:100px; display:flex; align-items:center; gap:15px; transition: all 0.2s; }
.main-header > .container > .wrap > nav { flex:1; display:flex; justify-content:flex-end; padding-right:60px; }

.main-header > .container > .wrap > nav > ul { height:100%; display:flex; justify-content:center; align-items:center; gap:20px; }
.main-header > .container > .wrap > nav > ul > li { position:relative; height:100%; }
.main-header > .container > .wrap > nav dl { margin-bottom:20px; }
.main-header > .container > .wrap > nav dt { height:100px; display:flex; justify-content:center; align-items:center; font-size:16px; font-weight:Medium; padding:0 20px; transition: all 0.2s; }
.main-header > .container > .wrap > nav dd { height:30px; display:none; justify-content:center; font-size:13px; font-weight:normal; }
.main-header > .container > .wrap > nav dt.on { color:var(--sunbursi-orange); }
.main-header > .container > .wrap > nav dd.on { color:var(--sunbursi-orange); }
.main-header > .container > .wrap > nav dt:hover { color:var(--sunbursi-orange); }
.main-header > .container > .wrap > nav dd:hover { color:var(--sunbursi-orange); }
.main-header > .container dt a { position:relative; }
.main-header > .container dt a > i.spark { position:absolute; border:1px solid #ff6600; background:#ff6600; border-radius:3px; pointer-events: none; top:50%; left:50%; }
.main-header > .container dt a > i.spark:nth-child(even) { background:transparent; }
@keyframes spatksanimation { 0% { opacity : 1; transform:translate(0, 0); }  100% { opacity : 0; transform:translate(var(--x), var(--y)) rotate( 360deg ); }}

.main-header > .container .logo > a  { display:flex; align-items:center; gap:10px; }
.main-header > .container .logo > a > img { height:65px; transition:all 0.3s ease; }
.main-header > .container .logo > a .logo-name { font-size:20px; font-weight:bold; transition:all 0.3s ease; }
.main-header > .container .logo > a .logo-title { font-size:12px; display:flex; justify-content:flex-end; transition:all 0.3s ease; }
.main-header > .container:hover { max-height:1000px; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); background:var(--scrollbg); color:var(--scrollcolor); --color:#222; }
.main-header > .container:hover > .wrap > nav dd { display:flex; }

.main-header.on { --bg:#fff; --color:#222; }
.main-header.on > .container { max-height:60px; background:var(--scrollbg); color:var(--scrollcolor); box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.1); }
.main-header.on > .container:hover { max-height:1000px; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); background:var(--scrollbg); color:var(--scrollcolor); }
.main-header.on > .container:hover > .wrap > nav dd { display:flex; }
.main-header.on > .container .logo img { height:45px; }
.main-header.on > .container .logo > a .logo-name { font-size:15px; }
.main-header.on > .container .logo > a .logo-title { font-size:9px; }
.main-header.on > .container > .wrap > div.logo { max-height:60px; }
.main-header.on > .container > .wrap > div.info { max-height:60px; }
.main-header.on > .container > .wrap > nav dt { height:60px; }

.main-header.on > .container:hover .logo img { height:65px; }
.main-header.on > .container:hover .logo > a .logo-name { font-size:20px; }
.main-header.on > .container:hover .logo > a .logo-title { font-size:12px; }
.main-header.on > .container:hover > .wrap > div.logo { max-height:100px; }
.main-header.on > .container:hover > .wrap > div.info { max-height:100px; }
.main-header.on > .container:hover > .wrap > nav dt { height:100px; }


.ic-hamberg { position:relative; width:var(--s,30px); height:var(--s,25px); cursor:pointer; }
.ic-hamberg > i { position:absolute; width:20px; height:2px; background:var(--color); left:50%; transform:translate(-50%,-50%); transition:all .2s ease; }
.ic-hamberg > i:nth-child(1) { top:calc(0% + 5px); }
.ic-hamberg > i:nth-child(2) { top:50%; }
.ic-hamberg > i:nth-child(3) { top:calc(100% - 5px); }
.ic-hamberg.on > i:first-child { top:50%; left:50%; transform:translate(-50%,-50%) rotate(45deg); }
.ic-hamberg.on > i:nth-child(2) { top:50%; left:50%; transform:translate(-50%,-50%); opacity:0; } /* fixed */
.ic-hamberg.on > i:last-child { top:50%; left:50%; transform:translate(-50%,-50%) rotate(-45deg); }

.jw-mainscrollbar { position:fixed; top:0; right:0; width:15px; height:calc(100%); z-index:90; cursor:pointer; opacity:0.3; transition: opacity 0.2s; }
.jw-mainscrollbar .scrollbar { position:absolute; background:#adadad; width:6px; border-radius:4px; top:5px; left:50%; transform:translateX(-50%); cursor: grab; user-select: none;}
.jw-mainscrollbar .scrollbar:active { cursor: grabbing; }
.jw-mainscrollbar:hover { opacity:1; }
.jw-mainscrollbar.on { opacity:1; }

/* ===== Footer / Bottom Nav ===== */

#footer { position:relative; padding-bottom:60px; display:flex; justify-content:center; background:var(--shadow-steel); }
#footer .container { width:100%; max-width:1280px; }
#footer .group1 { height:100px; display:flex; justify-content:space-between; }
#footer .footlogo { display:flex; align-items:center; gap:10px; filter: grayscale(100%); }
#footer .footlogo > img { height:40px;  }
#footer .footlogo .logo-name { font-size:12px; font-weight:bold; color:#fff; }
#footer .footlogo .logo-sub { font-size:9px; display:flex; justify-content:flex-end; color:#fff; }
#footer #terms { display:flex; align-items:center; color:#fff; gap:20px; }
#footer address { color:#ccc; }
#footer small { color:#ccc; }
#footer .group2 { display:flex; justify-content:space-between; }

#footer .group2 > div:last-child { display: grid; color:#fff; grid-template-columns: auto 1fr; gap: 6px 10px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.06); min-width: 180px; }
#footer .group2 > div:last-child { line-height: 1.2; }
#footer .group2 > div:last-child .label { font-size: 12px; opacity: .75; letter-spacing: .2px; }
#footer .group2 > div:last-child .value { font-size: 14px; text-align: right; }
#footer .group2 > div:last-child .value span { font: inherit; }

/* ===== Layout ===== */
.wrap-default { width:100%; max-width:1200px; place-self:center; }


/* ===== Sidebar ===== */
#sidebarMenu { position:fixed; right:calc(-1 * var(--sidebar-w)); top:0; width:var(--sidebar-w); max-width:85vw; height:100dvh; background:#fff; box-shadow:0 0 10px rgba(0,0,0,.1); transition:right .25s ease; z-index:1000; padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); }
#sidebarMenu.on { right:0; }

#sidebarMenu nav { position:relative; width:100%; height:100%; padding:10px 20px 30px 20px; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
#sidebarMenu nav ul { margin-top:10px; display:grid; gap:8px; }
#sidebarMenu nav ul > li { overflow:hidden; }
#sidebarMenu nav ul > li dl { display:grid; gap:6px; }

#sidebarMenu nav ul > li dt { position:relative; display:flex; align-items:center; gap:10px; height:35px; padding:0 10px; border-radius:10px; cursor:pointer; user-select:none; }
#sidebarMenu nav ul > li dt svg { width:20px; height:20px; flex:none; }

#sidebarMenu nav ul > li dt i { position:absolute; right:13px; top:50%; width:7px; height:7px; transform:translateY(-50%) rotate(45deg); border:1px solid transparent; border-color:#909090 #909090 transparent transparent; transition:transform .2s ease; }
#sidebarMenu nav ul > li dt.on i { transform:translateY(-50%) rotate(135deg); }

#sidebarMenu nav ul > li dd { display:none; height:30px; padding-left:34px; }
#sidebarMenu nav ul > li dl dt.on ~ dd { display:block; }
#sidebarMenu nav ul > li dd.on { display:block; }

#sidebarMenu nav ul > li dd a { position:relative; padding-left:12px; }
#sidebarMenu nav ul > li dd a::before { content:""; position:absolute; left:0; top:50%; width:4px; height:4px; border-radius:50%; background:#909090; transform:translateY(-50%); }

#sidebarMenu nav ul > li a, #sidebarMenu nav ul > li button { position:relative; display:flex; align-items:center; gap:10px; width:100%; height:100%; }
#sidebarMenu nav ul > li dd a, #sidebarMenu nav ul > li dd button { font-size:13px; }

#sidebarMenu nav ul > li dd a i, #sidebarMenu nav ul > li dd button i { position:absolute; right:13px; top:50%; width:6px; height:6px; transform:translateY(-50%) rotate(45deg); border:1px solid transparent; border-color:#909090 #909090 transparent transparent; }

#sidebarMenu a:focus-visible, #sidebarMenu button:focus-visible, #sidebarMenu dt:focus-visible { outline:2px solid #222; outline-offset:2px; }

.sidebarMenu-close { position:sticky; top:0; display:flex; justify-content:flex-end; align-items:center; padding:10px 10px 10px 0; background:#fff; z-index:2; }
.sidebar-member { margin:0 20px 10px; padding:18px 16px; border:1px solid #eee; border-radius:10px; background:#f8f9fb; }
.sidebar-member p { margin:0 0 12px; font-size:14px; color:#222; line-height:1.4; }
.sidebar-member strong { font-weight:700; color:#111; }
.sidebar-member-actions { display:flex; gap:8px; }
.sidebar-member-btn { display:inline-flex; align-items:center; justify-content:center; width:100%; height:36px; border:0; border-radius:8px; background:#222; color:#fff; font-size:13px; cursor:pointer; text-decoration:none; }
.sidebar-member-btn:hover { background:#444; }

#login { flex:1; display:flex; justify-content:center; align-items:center; }


/* ===== Responsive ===== */

@media (prefers-reduced-motion:reduce){
  * { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}


@media screen  and  (max-width : 1280px) {
	.main-header > .container { max-height:60px; padding:0 20px; }
	.main-header > .container { box-shadow: 0px 0px 10px rgba(0,0,0,0.1); background:var(--scrollbg); color:var(--scrollcolor); }
	.main-header > .container > .wrap > nav dd { display:flex; }
	.main-header > .container .logo > a > img { height:45px; }
	.main-header > .container .logo > a .logo-name { font-size:15px; }
	.main-header > .container .logo > a .logo-title { font-size:9px; }
	.main-header > .container > .wrap > div.logo { max-height:60px; }
	.main-header > .container > .wrap > div.info { max-height:60px; }
	.main-header > .container > .wrap > nav dt { height:60px; }
}

@media screen  and  (max-width : 1025px) {
	.main-header > .container { --color:#222; }
	.main-header > .container > .wrap { justify-content:space-between; }
	.main-header > .container > .wrap > div { height:60px; }
	.main-header > .container > .wrap > nav { display:none; }
	#footer .container { padding:0 20px; }
}

@media screen  and  (max-width : 480px) {
	#footer .group1 { height:auto; flex-direction:column; }
	#footer .footlogo { margin-top:20px; }
	#footer #terms { margin-top:20px; }
	#footer .group2 { margin-top:20px; }
	.jw-mainscrollbar { display:none; }
}

@media (max-width: 768px){
	#footer .group2 { flex-direction: column; align-items: stretch; }
	#footer .group2 > div:last-child { min-width: 0; }
	#footer .group2 > div:last-child .value { text-align: left; }
}