@charset "UTF-8";

/* 소개페이지 */
.introduce_wrap {
    padding-bottom: 100px;
}
.introduce_wrap h1{
    font-size: 28px;
    line-height: 1.3;
    margin-top: 100px;
    margin-bottom: 24px;
}
.introduce_wrap h1 img {
    margin-right: 16px;
    vertical-align: middle;
}
.introduce_inner{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}
.introduce_visual{
    width: 100%;
    max-width: 100%;
    max-height: 620px;
    margin-bottom: 100px;
    background: #FF6491;
    position: relative;
}
.introduce_visual div{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}
.introduce_visual video {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 620px;
}
.introduce_top{
    padding: 50px 56px;
    background: #FF6491;
    margin-bottom: 100px;
    border-radius: 16px;
    box-shadow: 0px 141px 40px 0px rgba(120, 120, 120, 0.00), 0px 91px 36px 0px rgba(120, 120, 120, 0.01), 0px 51px 31px 0px rgba(120, 120, 120, 0.05), 0px 23px 23px 0px rgba(120, 120, 120, 0.09), 0px 6px 12px 0px rgba(120, 120, 120, 0.10);
}
.introduce_top p{
    font-family: 'NotoKr';
    font-size: 22px;
    color: #000;
    line-height: 1.5;
}
.introduce_wrap .table_img {
    display: block;
    margin: 100px auto 60px;
}

.introduce_box_wrap{
    display: flex;
    width: 100%;
    align-items: center;
    padding: 30px 0;
    transition: all .3s;
}
.introduce_box_wrap:hover{
    padding: 0 0 60px;
}
.introduce_box {
    width: 100%;
    background: #fff;
    padding: 40px 32px;
    border-radius: 16px;
    transition: all .3s;
}
.introduce_box_wrap:hover .introduce_box {
    box-shadow: 0px 0px 14px 0px rgba(222, 222, 222, 0.25), 0px 33px 9px 0px rgba(120, 120, 120, 0.00), 0px 21px 8px 0px rgba(120, 120, 120, 0.01), 0px 12px 7px 0px rgba(120, 120, 120, 0.04), 0px 5px 5px 0px rgba(120, 120, 120, 0.06), 0px 1px 3px 0px rgba(120, 120, 120, 0.07);

}
.introduce_box h2{
    font-size: 32px;
    font-family: 'Gmarket Sans';
    line-height: 1.3;
    margin-bottom: 16px;
}
.introduce_box p {
    font-size: 22px;
    line-height: 1.3;
    font-family: 'NotoKr';
}
.introduce_box .table_logo{
    font-family: 'Gmarket Sans';
    font-weight: bold;
}
.introduce_box h3{
    font-weight: bold;
    font-size: 22px;
    font-family: 'NotoKr';
    line-height: 1.3;
    margin: 24px 0;
}
.introduce_box h3.spirit_list_tit{
    margin-top: 48px;
}
.introduce_box .spirit_list{
    font-size: 20px;
}
.introduce_box .spirit_list li{
    list-style: disc;
    margin-left: 25px;
    line-height: 1.3;
    padding-bottom: 8px;
}
.history_wrap {
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    font-size: 20px;
    border-left: 4px solid #f5f5f5;
    line-height: 1;
}
.history_year {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    position: relative;
    padding: 0 24px;
    column-gap: 24px;
    margin-bottom: 40px;
}
.history_year::after {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ff6491;
    position: absolute;
    top: 0;
    left: -9px;
}
.history_year > p {
    font-weight: bold;
    font-family: 'Gmarket Sans';
    color: #333;
    flex-basis: 55px;
}
.history_month_list{
    width: 80%;
}
.history_month {
    width: 100%;
    display: flex;
    /* flex-wrap: wrap; */
    align-items: flex-start;
    column-gap: 24px;
}
.history_month > p {
    font-weight: bold;
    font-family: 'Gmarket Sans';
    color: #333;
    /* min-width: 24px; */
    flex-basis: 30px;
}
.history_content_list{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* row-gap: 24px; */
}
.history_content {
    margin-bottom: 24px;
}
.history_content > a {
    display: flex;
    align-items: center;
    column-gap: 14px;
    cursor: pointer;
    margin-top: -2px;
    color: #333;
    font-size: 18px;
}
.history_more {
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: #f8f8f8;
    border: 0;
    border-radius: 10em;
    padding: 8px 16px;
    font-size: 16px;
    font-weight: 500;
    column-gap: 8px;
}
.history_more img {
    width: 10px;
}

@media all and (max-width:800px) {
    .introduce_visual{
        margin-bottom: 40px;
    }
    .introduce_visual video{
        max-height: 300px;
    }
    .introduce_visual::after{
        font-size: 30px;
    }
    .introduce_box_wrap{
        padding: 14px 0;
    }
    .introduce_box_wrap:hover{
        padding: 14px 0;
    }
    .introduce_box{
        padding: 24px 32px;
        border-radius: 8px;
        box-shadow: 0px 0px 14px 0px rgba(222, 222, 222, 0.25), 0px 33px 9px 0px rgba(120, 120, 120, 0.00), 0px 21px 8px 0px rgba(120, 120, 120, 0.01), 0px 12px 7px 0px rgba(120, 120, 120, 0.04), 0px 5px 5px 0px rgba(120, 120, 120, 0.06), 0px 1px 3px 0px rgba(120, 120, 120, 0.07);
    }
    .introduce_box_wrap:hover .introduce_box{
        box-shadow: 0px 0px 14px 0px rgba(222, 222, 222, 0.25), 0px 33px 9px 0px rgba(120, 120, 120, 0.00), 0px 21px 8px 0px rgba(120, 120, 120, 0.01), 0px 12px 7px 0px rgba(120, 120, 120, 0.04), 0px 5px 5px 0px rgba(120, 120, 120, 0.06), 0px 1px 3px 0px rgba(120, 120, 120, 0.07);
    }
    .introduce_box h2{
        font-size: 20px;
        margin-bottom: 8px;
    }
    .introduce_box p,
    .introduce_box .spirit_list{
        font-size: 14px;
    }
    .introduce_box h3 {
        font-size: 16px;
    }
    .introduce_wrap .table_img{
        max-width: 162px;
    }
    .introduce_wrap h1{
        font-size: 18px;
        margin-top: 34px;
        margin-bottom: 16px;
    }
    .introduce_wrap h1 img{
        width: 20px;
        margin-right: 8px;
    }
    .introduce_top{
        padding: 24px 16px;
        box-shadow: 0px 125px 35px 0px rgba(31, 31, 31, 0.00), 0px 80px 32px 0px rgba(31, 31, 31, 0.02), 0px 45px 27px 0px rgba(31, 31, 31, 0.06), 0px 20px 20px 0px rgba(31, 31, 31, 0.10), 0px 5px 11px 0px rgba(31, 31, 31, 0.12);
        margin-bottom: 56px;
        border-radius: 8px;
    }
    .introduce_top p{
        font-size: 14px;
    }
    .history_wrap{
        width: 95%;
        border-left: 2px solid #f5f5f5;
    }
    .history_year{
        flex-direction: column;
        margin-bottom: 32px;
        row-gap: 8px;
        padding-left: 16px;
    }
    .history_year::after{
        width: 6px;
        height: 6px;
        left: -4px;
    }
    .history_year > p{
        flex-basis: 0;
        font-size: 14px;
    }
    .history_month_list{
        width: 100%;
    }
    .history_month{
        column-gap: 8px;
        line-height: 1.3;
    }
    .history_month > p{
        font-size: 12px;
        min-width: 16px;
    }
    .history_content {
        margin-bottom: 16px;
    }
    .history_content > a{
        display: block;
        font-size: 14px;
        color: #333;
        margin-top: -3px;
    }
    .history_content > a img {
        width: 6px;
        margin-left: 8px;
    }
    .history_more {
        font-size: 12px;
    }
    .history_more img {
        width: 8px;
    }
}

@media all and (max-width:480px) {
    .introduce_visual{
        max-height: 300px;
    }
    .introduce_visual video{
        max-height: 300px;
    }
}