body {
    padding: 0;
    margin: 0;
    /* font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; */
    font-family: 'Segoe UI', sans-serif;
    width: 100%;
    height: 100%;
    position: relative;
  }
  
a {
    color: inherit;
    text-decoration: none;
}

.bolder {
  font-weight: 600;
}

.container {
    padding-top: 11vh;
}

.container > .sub_title{
    width: 100%;
    background-image: url("/images/background/sub_back.png");
    background-size: cover;
    background-position: center;
    height: 15vh;
    display: grid;
    align-items: center;
    justify-content: center;
    color: #333;
}

.container > .main_contents{
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    min-height: 60vh;
    padding: 5rem 0 5rem 0; 
}

.history_board {
    display: grid;
}

.history_board > :nth-child(even){
    background-color: #f0f0f0;
}

.events {
    display: grid;
    grid-template-columns: 20% auto;
}

.year {
    width: 60%;
    border-top: 2px solid #666;
    font-size: 3rem;
    font-weight: 600;
    color: #666;
    margin-top: 1rem;
}

.event {
    display: grid;
    grid-template-columns: 5px 10rem auto max-content;
    gap: 1rem;
}

.event *:not(.line){
    transition: all 0.3s;
}

.line {
    background-color: #ff641c;
}

.month {
    border: 2px solid #ff641c;
    border-radius: 2rem;
    /* align-self: center; */
    justify-self: center;
    padding: 0.5rem 1rem;
    font-size: 1.5rem;
    font-weight: 500;
    color: #ff641c;
    position: relative;
    margin-bottom: 1rem;
    height: 2rem;
    box-shadow: 1px 1px 10px #ff641c;
    margin-top: 1rem;
}

.event:hover *:not(.line){
    transform: translateY(-5px);
}

.month::before {
    content: '';
    position: absolute;
    top: 1rem;
    left: -2.8rem;
    width: 1rem;
    height: 1rem;
    background-color: #ff641c;
    border-radius: 50%;
    z-index: 1;
}

.event_row > :last-child{
    height: 10rem;
}

.des {
    margin-top: 1rem;
    padding-top: 0.5rem;
}

.event_img {
    width: 8rem;
    height: 8rem;
    margin-top: 1rem;
    justify-self: right;
}

.event_img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem 0 1rem 0;
    box-shadow: 0 0 10px #333;
}

.title_text {
    font-size: 5rem;
    color: #333;
    font-weight: 500;
}

.title_des {
    width: auto;
    font-size: 1rem;
    color: #666;
}

.title_img {
    background-image: url('/images/background/forest.png');
    height: 10rem;
}

.img_back {
    background-color: rgba(0,0,0,0.5);
    height: 100%;
    display: flex;
    justify-content: center;
    gap: 1rem;
    font-size: 4rem;
    align-items: center;
    text-shadow: 1px 1px rgba(0,0,0,0.2);
}

.img_name {
    background: linear-gradient(50deg,rgba(255, 159, 99, 1) 0%, rgba(97, 255, 118, 0.89) 100%);
    background-clip: text;
    font-weight: 900;
    color: transparent;
}

.img_des {
    color: white;
}

@media(max-width: 768px){
    .container {
        padding-top: 6vh;
    }

    .container > .main_contents{
        width: auto;
        padding: 1vh 0;
    }
    .img_back {
       font-size: 5vh;
    }

    .events {
        display: grid;
        grid-template-columns: max-content auto;
        gap: 5vw;
    }
    .year {
        border-top: unset;
        font-size: 1.4rem;
        font-weight: 900;
        color: #666;
        margin: 1vh 0 0 0;
        padding-left: 2vw;
        writing-mode: vertical-lr;
        text-orientation: upright;
    }
    .event {
        display: grid;
        grid-template-columns: 5px 8rem max-content;
        gap: 2vw;
    }
    .des{
        inline-size: 45vw;
        overflow-wrap: break-word;
    }
    .month::before {
        content: '';
        position: absolute;
        top: 1rem;
        left: -5.5vw;
        width: 1rem;
        height: 1rem;
        background-color: #ff641c;
        border-radius: 50%;
        z-index: 1;
    }
    .event_img{
        display: none;
    }
}