body  {background: #F5F5F5;}
.bodywrap {background: #F5F5F5; text-align: center; display: flex; flex-direction:column; height: 100vh; justify-content:center; width: 70%; margin: 0 auto;}
p.foot {color: #555;}
.visually-hidden {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap;}

.ment {font-size: 20px; color: #555; margin-top: 36px; line-height: 2.5rem;}
.ment b {font-size: 30px; color: #000;}

main {display: flex; gap: 38px; justify-content:center; width: 100%; margin: 60px 0 120px;}

main > a {border-radius: 20px; border: 1px solid #EEE; box-shadow: 2px 2px 10px 0px rgba(85, 85, 85, 0.15); color: #fff; font-family: 'Giants-Bold'; padding: 40px 34px; display: flex; flex-direction:column; position: relative; overflow: hidden; min-height: 240px; z-index: 1; justify-content:space-between; box-shadow: 2px 2px 10px 0px rgba(85, 85, 85, 0.2); min-width: 316px;}
main > a p {font-size: 24px; text-align: left; letter-spacing: 1.5px;}
main > a p br {display: none;}
main > a strong {display: block; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); font-size: 32px; margin-top: 10px; line-height: 2.5rem;}
.busan {background: linear-gradient(90deg, #0088E8 0%, #14449A 100%);}
.guangju {background: linear-gradient(90deg, #8BC700 0%, #439A14 100%);}
.deajeon {background: linear-gradient(90deg, #FF8025 0%, #E15600 100%);}

.arrow {background: url(/static/images/arrow.svg) no-repeat 0 100%; display: block; text-align: left; font-size: 22px; font-family: 'NanumGothic'; font-weight: 600; padding: 10px 0;}

main > a img {transition: transform 0.3s ease-in-out; position: absolute; bottom: 0; right: 0;}
main > a:hover img {transform: scale(1.1);}

/* 🌄 산 배경 (`::after`) */
main > a.guangju::after {content: ""; position: absolute; bottom: -40px; left: 0; width: 100%; height: 100%; background-image: url('/static/images/guangjubg2.svg'); background-repeat: no-repeat; z-index: -1;}

/* 🌿 나뭇잎 1 (작은 나뭇잎) */
main > a.guangju::before {content: ""; position: absolute; top: 15%; right: 10%; width: 50px; height: 50px; background-image: url('/static/images/leaf1.svg'); background-size: contain;  background-repeat: no-repeat; z-index: 1; animation: leafSwing1 4s ease-in-out infinite alternate;}

/* 🌿 나뭇잎 2 (큰 나뭇잎) */
main > a.guangju .leaf {position: absolute; top: 40%; right: 10%; width: 35px; height: 35px; background-image: url('/static/images/leaf2.svg'); background-size: contain; background-repeat: no-repeat; z-index: 1; animation: leafSwing2 6s ease-in-out infinite alternate 1.5s;}

@keyframes leafSwing1 {
    0% { transform: rotate(0deg) translateX(0px) translateY(0px); }
    50% { transform: rotate(-15deg) translateX(-8px) translateY(-10px); }
    100% { transform: rotate(0deg) translateX(0px) translateY(0px); }
}

@keyframes leafSwing2 {
    0% { transform: rotate(0deg) translateX(0px) translateY(0px); }
    50% { transform: rotate(12deg) translateX(10px) translateY(-12px); }
    100% { transform: rotate(0deg) translateX(0px) translateY(0px); }
}


/* 🌐 원자 1번 (`::before`) */
main > a.deajeon::before {content: ""; position: absolute; top: -30px; left: 20%; width: 200px; height: 200px; background-image: url('/static/images/deajeonbg2-1.svg'); background-size: contain; background-repeat: no-repeat; transform: translateX(-50%); z-index: -1; animation: floatingAtom1 3s ease-in-out infinite alternate 1s;}

/* 🌐 원자 2번 (`::after`) */
main > a.deajeon::after {content: ""; position: absolute; top: -20px; left: 80%; width: 80px; height: 80px; background-image: url('/static/images/deajeonbg2-2.svg'); background-size: contain; background-repeat: no-repeat; transform: translateX(-50%); z-index: -1; animation: floatingAtom2 4s ease-in-out infinite alternate ; }

@keyframes floatingAtom1 {
    0% { transform: translateX(-50%) translateY(0px) rotate(0deg); }
    50% { transform: translateX(-52%) translateY(-12px) rotate(-5deg); }
    100% { transform: translateX(-50%) translateY(0px) rotate(0deg); }
}

@keyframes floatingAtom2 {
    0% { transform: translateX(-50%) translateY(0px) rotate(0deg); }
    50% { transform: translateX(-48%) translateY(-10px) rotate(30deg); }
    100% { transform: translateX(-50%) translateY(0px) rotate(0deg); }
}

/* 🌊 파도 애니메이션 */
main > a.busan::before, main > a.busan::after {content: ""; position: absolute; bottom: 0; left: 0; width: 300%; height: 80%; z-index: -1; background-image: url('/static/images/wave.svg');  background-repeat: repeat-x; background-size: cover;}

main > a.busan::before {
    bottom: -20px;
    animation: waveMove 5s linear infinite;
    opacity: 0.5;
}

main > a.busan::after {
    bottom: -20px;
    animation: waveMoveReverse 9s linear infinite;
    opacity: 0.6;
}

@keyframes waveMove {
     from { transform: translateX(0); }
    to { transform: translateX(-30%); } 
}

@keyframes waveMoveReverse {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}



@media all and (max-width:1280px) {    

    .ment br {display: none;}
    
    main > a {min-width: 30%;}
    main > a p br {display: block;}
    
    
}


@media all and (max-width:900px) {    

    .ment {font-size: 14px; line-height: 1.5rem;}
    .ment b {font-size: 14px;}
    .ment br {display: block;}

    .bodywrap {height: auto; margin: 40px auto; width: 90%;}
    main {flex-direction:column;}
    main > a {min-height: 140px;}
    main > a p br {display: none;}


    p.foot {font-size: 12px; line-height: 1.5rem;}

}

@media all and (max-width:600px) {  

    .ment br {display: none;}

    main {gap: 24px; margin: 40px 0;}
    main > a {min-height: 90px; padding: 28px;}
    main > a p {font-size: 17px;}
    main > a strong {font-size: 24px; margin-top: 0;}
    main > a img {width: 140px;}

    main > a.deajeon::before {width: 120px;}
    main > a.deajeon::after {display: none;}
    
    .arrow {font-size: 14px; background-size: 70px;}
}