.hero { position:relative; height:300px; display:flex; justify-content:center; align-items:center; padding-top:100px; overflow:hidden; }
.hero h1 { color:#fff; font-size:40px; }
.hero .slide { position:absolute; width:100%; height:100%; left:0; top:0; z-index:-1; }
.hero .slide img { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; object-fit: cover; }

.sub-nav { height:60px; border-bottom: 1px solid #ccc; display:flex; justify-content:center; align-items:center; }
.sub-nav ul { width:100%; max-width:1280px; display:flex; align-items:center; gap:20px; }
.sub-nav ul > li { font-size:16px;  }


.sub-bg02 .slide img { position:absolute; top:auto; transform:translate(-50%, 0); bottom:0; }
.sub-bg03 .slide img { position:absolute; top:auto; transform:translate(-50%, 0); bottom:0; }
.sub-bg04 .slide img { position:absolute; top:auto; transform:translate(-50%, 0); bottom:0; }


@media screen  and  (max-width : 1025px) {
	.sub-nav { padding:20px; }
}