*{
    margin: 0px;
    padding: 0px;
    
}
a:link { color: black; text-decoration: none;}
a:visited { color: black; text-decoration: none;}
a:hover { 
    color: black; text-decoration: none; 
}

body {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}

body{
    background-color:#2FA2A6;
}

a{
    text-decoration: none;
}

.loading {
    width:100%;
    height:100%;
    z-index: 1000;
    position:fixed;
    left:0; top:0;
    background:rgb(255, 255, 255);
}

.banner{
    z-index: 100;
}
#logo{
    height:2rem;
    padding: 2rem 2rem;
    width: auto;
}

#smalltext{
    font-family:'nanumsquareround';
    font-size:1.5rem;
}

#bigtext{
    font-family: 'Recipekorea';
    font-size:8rem;
}

.nav-container{
    background-color: #2FA2A6;
    text-align: center;
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}


.nav-text span{
    font-family: 'nanumsquareround';
    font-size:1.4rem;
    margin: 0rem 2rem ;
    color: white;
    padding: 0.8rem 1.2rem;
    
}

.nav-text span:hover{
    color: #2FA2A6;
    background-color:white;
    border-radius:3rem;
}

.activity{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    background-color:white;
    position:relative;
}

.activity-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:88rem;
    justify-content: space-between;
}


.activity-titleText{
    padding: 2rem 0rem;
    font-family: 'Recipekorea';
    color: white;
    font-size: 3.3rem;
    display: block;
}

#third-card{
    width: 100%;
    grid-column: 1 / 3;
    grid-row: 2;
}

.activity-detail{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 30px;
    grid-auto-rows: minmax(100px, auto);
    margin-top: 3rem;
    height: fit-content;
    position: relative;
}




@import url('https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.min.css');
@font-face {
    font-family: 'Recipekorea';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/Recipekorea.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
            
/*카드 뒤집기 효과*/
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    width: 25rem;
    height: 28rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 2rem;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    box-shadow: 0px 0px 18px  #2929298a;
    
  }
  
  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    background-color: rgb(235, 235, 235);
    color: black;
    font-family: '나눔스퀘어라운드 ExtraBold';
    font-size: 24px;
  }
  
  /* Style the back side */
  .flip-card-back {
    background-color: rgb(235, 235, 235);
    color: black;
    transform: rotateY(180deg);
    display: flex;
    justify-content: center;
    align-items: center;
  }

.card-img{
    width : 90%;
    height: 73%;
    border-radius: 2rem;
    padding: 1.3rem;
    padding-bottom: 0;
}

.card-img-third{
    width : 94%;
    height: 20rem;
    border-radius: 2rem;
    padding: 1.3rem;
    padding-bottom: 0;
}

.text-container{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 0.8rem;
    padding-left: 1.3rem;
    
}

.back-container{
    width: 95%;
    height: 95%;
}

.back-container h1{
    font-family: '나눔스퀘어라운드 ExtraBold';
}

.back-container h3{
    font-family: '나눔스퀘어라운드 ExtraBold';
    font-size: 23px;
    margin-top: 5px;
}

.back-title{
    border-bottom: 2px solid black;
    padding: 18px;
}

.back-article{
    padding : 18px;
    color: #3D3C3C;
    font-size: 1.5rem;
    font-family: '나눔바른고딕';
    line-height: 2.5rem;
}

.back-foot{
    font-family: '나눔스퀘어라운드 ExtraBold';
    padding : 15px;
    bottom: 30px;
    position: absolute;
}

.footer{
    margin-top: 5rem;
    text-align: center;
    background-color:rgb(33, 139, 143);
    padding: 4rem 0rem;
    color: white;
    display: flex;
    justify-content:space-around;
    flex-direction:row-reverse;
}
.footer span{
    display: block;
    font-size: 1.2rem;
}
.footer-text{
    text-align: left;
}

i{
    color: white;
    font-size:2rem;
    margin: 0.3rem 0.5rem;
}

.activity-title{
    margin-top: 4rem;
    text-align: center;
    width: 500px;
    height: auto;
    background-image: url('../image/banner.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}