.wrap {position:relative; display: flex; flex-direction: column; align-items: center; max-width: 540px; margin: 0 auto; padding: 40px 20px; box-sizing: border-box; transition: all 1s;}
.wrap::before {content: ''; position: fixed; left: 0; top: 0; width: 100vw;height: 100vh; background-color: #fff; transition: all 1s; opacity: 1; z-index: 1;}
.wrap::after {content: ''; position: fixed; left: 50%; top: 50%; width: 213px; height: 170px; transform: translate(-50%, -50%); background: url('../img/fishermen.png') no-repeat center; background-size: 100%; transition: all 1s; opacity: 1; z-index: 1;}
.wrap.on::before,.wrap.on::after {transition: all 1s; opacity: 0; z-index: -1;}
.logo { width: 80px; margin: 0 auto; border-radius: 50%; overflow: hidden;}
.logo img {display: block;}

.title_wrap {display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 8px; text-align: center;}
.title {color: #0E4EB1;}
.title_desc {letter-spacing: -0.1px;}

.list_sns {display: flex; justify-content: center; align-items: center; gap: 20px;}
.item_sns {width: 8%;}
.item_sns a {display: flex; justify-content: center; align-items: center;}

.list_link {display: flex; flex-direction: column; gap: 10px; margin-top: 20px;}
.item_link .button {position: relative; display: flex; align-items: center; gap: 20px; width: 100%; padding: 10px 30px 10px 10px; border: 2px solid #000; border-radius: 100px; background-color: transparent; font-size: 16px; font-weight: bold; text-align: left;}
.item_link .button::before,
.item_link .button::after {content: "";position: absolute;right: 12px;top: 50%;width: 12px; height: 3px;background-color:#000;border-radius: 50px;}
.item_link .button::before {transform: translateY(-120%) rotate(45deg);}
.item_link .button::after {transform: translateY(120%) rotate(-45deg);}
.item_link:hover .button,
.item_link:active .button {background-color: #000; color: #fff;}
.item_link:hover .button::before,
.item_link:hover .button::after,
.item_link:active .button::before,
.item_link:active .button::after {background-color: #fff;}
.item_link img {min-width: 40px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; object-fit: cover;}

.footer {display: flex; justify-content: end; align-items: center; max-width: 400px; width: 100%; margin: 10px auto 0;}
.footer p {font-size: 120%;}
.footer a {display: flex;}
.footer img {width: 40px;  animation: nodding 1.5s infinite ease-in-out; transform-origin: center; }

.dim {display: none; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.4);}
.popup {position: absolute; left: 50%; top: 50%; max-width: 720px; width: 90vw; max-height: 80vh; padding: 30px; transform: translate(-50%, -50%); background-color: #fff; border-radius: 20px; box-sizing: border-box;}
.popup_close {position: absolute; right: 20px; top: 20px; width: 20px; height: 20px; background-color: transparent; border: 0;}
.popup_close::before {content: ""; display: block; position: absolute; left: 50%; top: 50%; width: 100%; height: 2px; background-color: #000; transform: translate(-50%,-50%) rotate(-45deg);}
.popup_close::after {content: ""; display: block; position: absolute; left: 50%; top: 50%; width: 100%; height: 2px; background-color: #000; transform: translate(-50%,-50%) rotate(45deg);}
.popup_title {font-size: 16px;}
.leader_list {display: flex; gap: 20px;margin-top: 10px; padding-bottom: 10px; font-size: 12px; border-bottom: 2px solid #000;}
.content {max-height: 50vh; overflow-y: auto; margin: 10px 0 20px; font-size: 10px;}
.content pre {white-space: pre-wrap;}
.link_wrap {display: flex; justify-content: center; }
.link {display: flex; justify-content: center; align-content: center; padding: 10px 20px; font-size: 12px; background-color: #000; color: #fff; border-radius: 50px;}
.link.disabled {background-color: #999; color: #000; pointer-events: none;}

.copyright {margin-top: 40px;}

@keyframes nodding {
    0% { transform: rotate(15deg); }
    50% { transform: rotate(-15deg); }
    100% { transform: rotate(15deg); }
}