/* =========================================================
  용인시수지노인복지관 : 이북 최신글 스킨 스타일시트
========================================================= */

#book {
	width: 285px;
	flex-shrink: 0;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

#book .book_title {
    width: 179px;
    padding: 14px 20px 5px 20px;
    position: relative;

    align-self: flex-end;

    color: #FFF;
    text-align: center;
    font-family: "NEXON Lv2 Gothic";
    font-size: 1.78rem; /* 32px */
    font-weight: 700;
    line-height: 100%; /* 32px */

    background: #183768;
    border-radius: 30px 30px 0 0;
}
#book .book_title > svg {
    position: absolute;
    right: 100%;
    bottom: 0;
}

#book .book_box {
    width: 100%;
    padding: 20px;

    border-radius: 40px 0 40px 40px;
    background: linear-gradient(144deg, #183768 21.16%, #920883 188.74%);
}
#book .img img { 
    height: 354px;
    border-radius: 30px; 
}
#book .book_info {
    width: 100%;
    display: flex;
    align-items: flex-start;
}
#book .book_subject {
    flex: 1;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #333;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    line-height: 100%; /* 20px */
    letter-spacing: -0.6px;

    background: #EFF5FF;
    border: 1px solid #99B5DF;
    border-radius: 60px 0 60px 60px;
}
#book .book_goto_btn {
    width: 55px;
    height: 55px;

    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;

    border-radius: 0 60px 60px 60px;
    background: linear-gradient(112deg, #0C274E -37.46%, #183868 165.89%);
}
.book_goto_btn:hover svg,
.book_goto_btn:focus-visible svg {
    animation: bookArrowMove 0.45s ease-in-out;
}

@keyframes bookArrowMove {
    0% {
        transform: translate(0, 0);
    }

    45% {
        transform: translate(6px, 6px);
    }

    100% {
        transform: translate(0, 0);
    }
}





/* =========================================================
  Media Query
========================================================= */

/* ===== PC ===== */
@media (max-width: 1600px) {}
@media (max-width: 1440px) {}
@media (max-width: 1280px) {}


/* ===== Tablet ===== */
@media (max-width: 1024px) {}
@media (max-width: 960px) {}


/* ===== Mobile ===== */
@media (max-width: 768px) {}
@media (max-width: 640px) {}
@media (max-width: 480px) {}
@media (max-width: 360px) {}