@charset "utf-8";

body { background: #000;}

/* Header */
/* ============================================ */
@keyframes menu-1 {
 0% { transform: translate(-50%,0px) rotate(0deg);}
40% { transform: translate(-50%,7px) rotate(0deg);}
80% { transform: translate(-50%,7px) rotate(0deg);}
81% { transform: translate(-50%,7px) rotate(0deg);}
100% { transform: translate(-50%,7px) rotate(30deg);}
}

@keyframes menu-2 {
 0% { transform: translate(-50%,0px) rotate(0deg);}
40% { transform: translate(-50%,-7px) rotate(0deg);}
80% { transform: translate(-50%,-7px) rotate(0deg);}
81% { transform: translate(-50%,-7px) rotate(0deg);}
100% { transform: translate(-50%,-7px) rotate(-30deg);}
}

@keyframes menu-1sp {
 0% { transform: translate(-50%,0px) rotate(0deg);}
40% { transform: translate(-50%,5px) rotate(0deg);}
80% { transform: translate(-50%,5px) rotate(0deg);}
81% { transform: translate(-50%,5px) rotate(0deg);}
100% { transform: translate(-50%,5px) rotate(30deg);}
}

@keyframes menu-2sp {
 0% { transform: translate(-50%,0px) rotate(0deg);}
40% { transform: translate(-50%,-5px) rotate(0deg);}
80% { transform: translate(-50%,-5px) rotate(0deg);}
81% { transform: translate(-50%,-5px) rotate(0deg);}
100% { transform: translate(-50%,-5px) rotate(-30deg);}
}



#hd { position: absolute; left: 0; top: 0; width: 100%; z-index: 100;}
#hd .inner-hd { width: 95%; margin: 0 auto; padding-top: 42px;}
#hd .logo { width: 30%; max-width: 192px;}
#hd .logo h1 img { width: 100%; filter: drop-shadow(0 0 5px rgba(0,0,0,0.4));}
#hd .hd-btn { position: absolute; right: 120px; top: 45px; width: 180px;}
#hd .hd-btn a { display: block; width: 100%; padding: 2px 0 4px; background: #000; border-radius: 50px;
 color: #fff; font-size: clamp(12px, 1.4vw, 16px); font-weight: 700; text-align: center; text-decoration: none;
 transition: 0.3s linear;
}
#hd .hd-btn a:hover { background: rgba(0,0,0,.5);}
#hd .hd-btn.wh a { background: #fff; color: #000;}
#hd .hd-btn.wh a:hover { background: rgba(255,255,255,.8);}
@media (max-width: 1001px) {
	#hd .inner-hd { padding-top: 24px;}
	#hd .hd-btn { top: 25px; right: 90px;}
}
@media (max-width: 481px) {
	#hd .inner-hd { padding-top: 15px;}
	#hd .hd-btn { top: 15px; right: 60px;}

	#hd .hd-btn { width: 120px;}
	#hd .hd-btn a { font-size: 12px;}
}



#fix-nav { position: fixed; left: 0; top: -200px; z-index: 101; width: 100%; background: #453e3f; visibility: hidden; transition: 0.4s linear;}
#fix-nav.fixed { top: 0px; visibility: visible;}
#fix-nav .inner { width: 95%; margin: 0 auto; padding: 20px 0;}
#fix-nav .ctn { display: flex; justify-content: space-between; align-items: center; width: 100%; padding-right: 56px;}
#fix-nav .hd-logo { width: 24%;}
#fix-nav .hd-logo a { display: block; width: 100%; max-width: 192px;}
#fix-nav .hd-logo a img { width: 100%;}
#fix-nav .hd-nav { width: 76%;}
#fix-nav .hd-nav ul { font-size: 0; text-align: right;}
#fix-nav .hd-nav ul li { display: inline-block; padding: 0 18px; font-weight: 700;}
#fix-nav .hd-nav ul li:last-child { padding: 0;}
#fix-nav .hd-nav ul li a { text-decoration: none; transition: 0.3s linear;}
#fix-nav .hd-nav ul li a.scrl { color: #7fbe26; font-size: clamp(12px, 1.4vw, 16px);}
#fix-nav .hd-nav ul li a.scrl:hover { color: #fff;}
#fix-nav .hd-nav ul li a.hd-btn { background: #000; padding: 2px 20px 4px; border-radius: 50px; color: #fff; font-size: clamp(12px, 1.4vw, 16px);}
#fix-nav .hd-nav ul li a.hd-btn:hover { background: #fff; color: #000;}
@media (max-width: 1401px) {
	#fix-nav .hd-nav ul li { padding: 0 0.85vw;}
}
@media (max-width: 1001px) {
	#fix-nav { display: none;}
}


.menu-trig { position: absolute; right: 60px; top: 40px; width: 45px; height: 45px; z-index: 200;}
.menu-trig.fixed { position: fixed; top: 15px; right: 30px;}
.menu-trig div { position: relative; width: 100%; height: 100%; cursor: pointer;}
.menu-trig div span { display: block; width: 100%; height: 3px; position: absolute; left: 50%; background: #000; transform: translate(-50%,0px);}

.menu-trig div span:nth-of-type(1) { top: 14px;}
.menu-trig div span:nth-of-type(2) { top: 28px;}
.menu-trig.active div span:nth-of-type(1) { animation: menu-1 0.3s linear forwards;}
.menu-trig.active div span:nth-of-type(2) { animation: menu-2 0.3s linear forwards;}
@media (max-width: 1001px) {
	.menu-trig { top: 20px; right: 30px;}
}
@media (max-width: 1001px) {
	.menu-trig.wh div span { background: #fff;}
}
@media (max-width: 481px) {
	.menu-trig { top: 10px; right: 12px; width: 36px; height: 36px;}
	.menu-trig div span { height: 2px;}
	.menu-trig div span:nth-of-type(1) { top: 11px;}
	.menu-trig div span:nth-of-type(2) { top: 22px;}
	.menu-trig.active div span:nth-of-type(1) { animation: menu-1sp 0.3s linear forwards;}
	.menu-trig.active div span:nth-of-type(2) { animation: menu-2sp 0.3s linear forwards;}
}


#open-menu { position: fixed; left: 0; top: 0; width: 100%; height: 100svh; background: #453e3f; z-index: -1; visibility: hidden;
 transition: 0.3s linear; opacity: 0;
}
#open-menu.open { visibility: visible; z-index: 102; opacity: 1;}
#open-menu .inner { position: relative; width: 100%; height: 100%; margin: 0 auto; padding: 60px 0;}
#open-menu .menu-logo { width: 28.5%; position: absolute; left: 2.5%; top: 0; padding-top: 24px;}
#open-menu .menu-logo a { display: block; width: 100%; max-width: 192px; line-height: 1;}
#open-menu .menu-logo a img { width: 100%;}
#open-menu .scroll{ width: 100%; height: 100%; overflow-y: scroll;}
#open-menu .ctn-1 { width: 94%; max-width: 980px; margin: 0 auto; padding: 40px 0 80px;}
#open-menu .ctn-1 .flex { display: flex; justify-content: space-between;}
#open-menu .ctn-1 .nav-1 { width: 48%; max-width: 440px;}
#open-menu .ctn-1 .nav-1 ul li { padding: 8px 0; border-bottom: solid 1px #7fbe26; font-size: 18px;}
#open-menu .ctn-1 .nav-1 ul li a { display: block; padding: 8px 0; color: #fff; font-weight: 700; letter-spacing: 0.1rem; text-decoration: none; transition: 0.3s linear;}
#open-menu .ctn-1 .nav-1 ul li a:hover { color: #7fbe26;}
#open-menu .ctn-1 .nav-2 { width: 48%; max-width: 440px;}
#open-menu .ctn-1 .nav-2 ul { width: 100%;}
#open-menu .ctn-1 .nav-2 ul li { padding: 20px 0; font-size: 20px;}
#open-menu .ctn-1 .nav-2 ul li:first-child { padding-top: 0px;}
#open-menu .ctn-1 .nav-2 ul li a { position: relative; display: block; padding: 25px; padding-left: 40px; background: #7fbe26;
 color: #453e3f; font-weight: 700; text-decoration: none; transition: 0.3s linear;
}
#open-menu .ctn-1 .nav-2 ul li a:after { content: ''; display: block; width: 8px; height: 100%;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 26"><path d="M8.38,12.99L0,0h1.65l8.35,12.99L1.65,25.98H0l8.38-12.99Z" fill="%23453e3f" /></svg>');
 background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto;
 position: absolute; right: 30px; top: 0;
}
#open-menu .ctn-1 .nav-2 ul li a:hover { opacity: 0.8;}

#open-menu .ctn-2 { width: 92%; max-width: 980px; margin: 0 auto; padding: 80px 0 20px;}
#open-menu .ctn-2 .flex { display: flex; justify-content: space-between; flex-direction: row-reverse;}
#open-menu .ctn-2 .links{ width: 32%;}
#open-menu .ctn-2 .txt { width: 65%;}

#open-menu .ctn-2 .links ul { text-align: center;}
#open-menu .ctn-2 .links ul li { padding: 10px 0; font-size: 24px; font-weight: 700; line-height: 1.2;}
#open-menu .ctn-2 .links ul li a { color: #7fbe26; font-weight: 700; text-decoration: none; transition: 0.3s linear;}
#open-menu .ctn-2 .links ul li a:hover { color: #fff;}

#open-menu .ctn-2 .txt h3 { margin-bottom: 40px; line-height: 1;}
#open-menu .ctn-2 .txt h3 a { display: block; width: 30%; max-width: 192px;}
#open-menu .ctn-2 .txt h3 img { width: 100%; filter: drop-shadow(0 0 5px rgba(0,0,0,0.6));}
#open-menu .ctn-2 .txt p { color: #fff; font-size: 18px; line-height: 1.8;}
#open-menu .ctn-2 .txt p a { color: #fff;}
#open-menu .ctn-2 .txt p a:hover { text-decoration: none;}
#open-menu .ctn-2 .txt hr { width: 100%; height: 0px; margin: 20px auto; border: none;}
@media (max-width: 1001px) {
	#open-menu .ctn-2 .links ul li { font-size: 20px;}
	#open-menu .ctn-2 .txt p { font-size: 16px;}
}
@media (max-width: 641px) {
	#open-menu .ctn-1 .flex { display: block;}
	#open-menu .ctn-1 .nav-1 { width: 88%; margin: 0 auto 30px;}
	#open-menu .ctn-1 .nav-2 { width: 88%; margin: 0 auto;}
	#open-menu .ctn-1 .nav-2 ul li { padding: 12px 0; font-size: 14px;}
	#open-menu .ctn-1 .nav-2 ul li a { padding: 20px;}

	#open-menu .ctn-2 .flex { display: block;}
	#open-menu .ctn-2 .links{ width: 100%; margin-bottom: 60px;}
	#open-menu .ctn-2 .txt { width: 100%;}
	#open-menu .ctn-2 .txt h3 { margin-bottom: 20px;}
	#open-menu .ctn-2 .txt p { font-size: 14px;}
}
@media (max-width: 481px) {
	#open-menu .menu-logo { padding-top: 15px;}
	#open-menu .inner { padding: 50px 0 20px;}

	#open-menu .ctn-1 { padding: 20px 0 40px;}
	#open-menu .ctn-1 .nav-1 ul li { padding: 4px 0; font-size: 14px;}
	#open-menu .ctn-1 .nav-1 ul li a { padding: 4px 0;}
	#open-menu .ctn-1 .nav-2 ul li a { padding: 12px 16px;}
	#open-menu .ctn-1 .nav-2 ul li a:after { right: 20px;}

	#open-menu .ctn-2 .links ul li { padding: 8px 0; font-size: 16px;}
	#open-menu .ctn-2 .txt p { font-size: 12px;}
}


/* Footer */
/* ============================================ */
.pagetop { width: 60px; position: fixed; right: 4%; bottom: 30px;}
.pagetop a { display: block; width: 100%; border: solid 1px #fff; border-radius: 50%; overflow: hidden;}
.pagetop a svg { width: 100%; fill: #fff;}
@media (max-width: 641px) {
	.pagetop { display: none; width: 40px; right: 2%;}
}

#ft { background: #453e3f;}
#ft .inner-ft { width: 88%; max-width: 980px; margin: 0 auto; padding: 50px 0 70px;}
#ft .ft-ctn { display: flex; justify-content: space-between; flex-direction: row-reverse;}
#ft .ft-link{ width: 32%;}
#ft .ft-txt { width: 65%;}

#ft .ft-link ul { text-align: center;}
#ft .ft-link ul li { padding: 10px 0; font-size: 24px; font-weight: 700; line-height: 1.2;}
#ft .ft-link ul li a { color: #7fbe26; font-weight: 700; text-decoration: none; transition: 0.3s linear;}
#ft .ft-link ul li a:hover { color: #fff;}

#ft .ft-txt h3 { margin-bottom: 40px; line-height: 1;}
#ft .ft-txt h3 a { display: block; width: 30%; max-width: 192px;}
#ft .ft-txt h3 img { width: 100%; filter: drop-shadow(0 0 5px rgba(0,0,0,0.6));}
#ft .ft-txt p { color: #fff; font-size: 18px; line-height: 1.8;}
#ft .ft-txt p a { color: #fff;}
#ft .ft-txt p a:hover { text-decoration: none;}
#ft .ft-txt hr { width: 100%; height: 0px; margin: 20px auto; border: none;}
@media (max-width: 1001px) {
	#ft .ft-link ul li { font-size: 20px;}
	#ft .ft-txt p { font-size: 16px;}
}
@media (max-width: 641px) {
	#ft .inner-ft { padding: 40px 0 60px;}
	#ft .ft-ctn { display: block;}
	#ft .ft-link{ width: 100%; margin-bottom: 60px;}
	#ft .ft-txt { width: 100%;}
	#ft .ft-txt h3 { margin-bottom: 20px;}
	#ft .ft-txt p { font-size: 14px;}
}
@media (max-width: 481px) {
	#ft .inner-ft { padding: 60px 0 20px;}
	#ft .ft-link ul li { font-size: 16px;}
	#ft .ft-txt p { font-size: 12px;}
}




.wrap { padding-bottom: 160px;}
@media (max-width: 801px) {
	.wrap { padding-bottom: 100px;}
}
@media (max-width: 481px) {
	.wrap { padding-bottom: 80px;}
}