/* ===== Header ===== */
.main-header { position:relative; top:0; width:100%; height:100px; z-index:90; user-select: none; --bg:transparent; --color:#000; --scrollbg:#fff; --scrollcolor:#000; }

.header-topbar { width:100%; height:40px; display:flex; justify-content:center; background:#f6c7ba; color:#1f1f1f; }
.header-topbar > nav { width:100%; max-width:1280px; display:flex; justify-content:flex-end; align-items:center; gap:22px; }
.header-topbar > nav a { font-size:13px; font-weight:600; }

.main-header > .container { position:absolute; top:0; 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:0; }
.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 .logo > a  { display:flex; align-items:center; gap:10px; }
.main-header > .container:hover { max-height:1000px; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); background:var(--scrollbg); color:var(--scrollcolor); }
.main-header > .container:hover > .wrap > nav dd { display:flex; }

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

#footer { position:relative; display:flex; justify-content:center; padding:62px 0 70px; background:#fde7df; color:#231f20; }
#footer .container { width:min(1280px, calc(100% - 80px)); max-width:1280px; }
.footer-new { display:grid; grid-template-columns:1.2fr 2fr; gap:80px; align-items:start; }
.footer-brand { display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.footer-logo { width:90px; height:90px; display:flex; justify-content:center; align-items:center; border-radius:12px; color:#fff; font-size:18px; font-weight:800; letter-spacing:0; overflow:hidden; }
.footer-logo img { display:block; width:auto; max-width:100%; max-height:90px; filter:grayscale(1) brightness(0.8); }
.footer-brand p { font-size:15px; font-weight:700; }
.footer-menu { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:45px; }
.footer-menu h2 { margin-bottom:18px; font-size:12px; font-weight:800; letter-spacing:0; }
.footer-menu ul { display:grid; gap:10px; }
.footer-menu a { font-size:12px; color:#4d4544; }
.footer-copy { grid-column:1 / -1; margin-top:25px; font-size:12px; color:#6b6260; }

@media (max-width: 768px){
	#footer .container { width:calc(100% - 40px); }
	.footer-new { grid-template-columns:1fr; gap:36px; }
	.footer-menu { grid-template-columns:1fr; gap:28px; }
}

/* ===== Layout ===== */
.main-header > .container .logo-mark { display:flex; justify-content:center; align-items:center; }
.main-header > .container .logo-mark img { display:block; width:auto; max-height:70px; }
.main-header > .container .info-btn { font-size:12px; text-transform:uppercase; }

/* ===== Responsive ===== */
@media screen  and  (max-width : 1280px) {
	.main-header > .container { max-height:60px; padding:0 20px; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); background:var(--scrollbg); color:var(--scrollcolor); }
	.header-topbar { padding:0 20px; }
	.main-header > .container > .wrap > nav dd { display:flex; }
	.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 > .wrap { justify-content:space-between; }
	.main-header > .container > .wrap > div { height:60px; }
	.main-header > .container > .wrap > nav { display:none; }
	#footer .container { padding:0 20px; }
}