@charset "utf-8";


@font-face {
    font-family: 'Pretendard';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

body {margin: 0; padding: 0;}
.aladin-history {font-family: 'Pretendard'; line-height: 1.4; color: #000; margin-top: -9px; padding: 0 0 150px 0;}
.aladin-history .aladin-history-in {width: 90%; margin: 0 auto; padding: 40px 0 20px 0; box-sizing: border-box;}
.aladin-history .aladin-history-in h2 {margin: 0 0 20px 0; font-size: 34px; font-weight: 700; letter-spacing: -2px;}

.history-wrap {position: relative;}
.history-wrap .history_bar {width: 2px; height: calc(100% - 40px); background-color: #D3D6D8; position: absolute; left: 87px; top: 15px;}
.history-wrap .progress_bar {width: 100%; height: 100%; top: 0; left: 50%; background-color: #3E48A9;}

.history-wrap .history-item {display: flex; gap: 30px;}
.history-wrap .history-item .year-tit {width: 75px; height: 30px; text-align: left; font-size: 22px; color: #C8CCCF; font-weight: 700; letter-spacing: -1px; position: relative; flex-shrink: 0;}
.history-wrap .history-item .year-tit::after {content: ''; display: inline-block; width: 10px; height: 10px; background-color: #D3D6D8; border-radius: 50%; position: absolute; right: -18px; top: 13px;}
.history-wrap .history-item .year-tit.active {color: #3E48A9;}
.history-wrap .history-item .year-tit.active::after {background-color: #3E48A9;}
.history-wrap .history-item .content {padding: 7px 0 0 0;}
.history-wrap .history-item .content .detail-box {margin-bottom: 40px;}
.history-wrap .history-item .content .detail-box .h-month {font-size: 16px; font-weight: 500;}
.history-wrap .history-item .content .detail-box .h-txt1 {font-size: 20px; font-weight: 700; margin-bottom: 5px; letter-spacing: -1px;}
.history-wrap .history-item .content .detail-box .h-txt2 {font-size: 15px; font-weight: 500; margin-bottom: 14px;}
.history-wrap .history-item .content .detail-box .h-book {display: flex; gap: 10px;}
.history-wrap .history-item .content .detail-box .h-book .cover {width: auto;}
.history-wrap .history-item .content .detail-box .h-book .cover img {width: auto; height: 120px; border: 1px #e0e0e0 solid;}
.history-wrap .history-item .content .detail-box .h-link a {height: 30px; line-height: 29px; display: inline-block; border: 1px #3E48A9 solid; background: url('https://image.aladin.co.kr/img/common/history-link-arr.svg') no-repeat center right 10px / 6px auto; padding: 0 24px 0 10px; box-sizing: border-box; border-radius: 15px; text-decoration: none; color: #3E48A9; font-size: 14px;}
.history-wrap .history-item .content .detail-box .h-link a ~ a {margin-top: 7px;}

.br {display: block;}

.samsungcard {padding: 5px 0 10px 0;}
.samsungcard img {width: 100%;}


/* pc 대응 */
@media screen and (min-width: 750px) {

    .br {display: inline-block;}

    .aladin-history { font-family: 'Pretendard'; line-height: 1.4; color: #000; margin-top: -9px; padding: 0 0 100px 0;}
    .aladin-history .aladin-history-in {width: 930px; margin: 0 auto; padding: 90px 0 90px 90px; box-sizing: border-box;}
    .aladin-history .aladin-history-in h2 {margin: 0 0 60px 0; font-size: 50px; font-weight: 700;}

    .history-wrap {position: relative;}
    .history-wrap .history_bar {width: 4px; height: 100%; background-color: #D3D6D8; position: absolute; left: 216px; top: 15px;}
    .history-wrap .progress_bar {width: 100%; height: 100%; top: 0; left: 50%; background-color: #3E48A9;}

    .history-wrap .history-item {display: flex; gap: 85px;}
    .history-wrap .history-item .year-tit {width: 175px; height: 40px; text-align: right; font-size: 34px; color: #C8CCCF; font-weight: 700; letter-spacing: -1px; position: relative; flex-shrink: 0;}
    .history-wrap .history-item .year-tit::after {content: ''; display: inline-block; width: 18px; height: 18px; background-color: #D3D6D8; border-radius: 50%; position: absolute; right: -52px; top: 13px;}
    .history-wrap .history-item .year-tit.active {color: #3E48A9;}
    .history-wrap .history-item .year-tit.active::after {background-color: #3E48A9;}
    .history-wrap .history-item .content {padding: 7px 0 0 0;}
    .history-wrap .history-item .content .detail-box {margin-bottom: 60px;}
    .history-wrap .history-item .content .detail-box .h-month {font-size: 20px; font-weight: 500;}
    .history-wrap .history-item .content .detail-box .h-txt1 {font-size: 28px; font-weight: 700; margin-bottom: 5px; letter-spacing: -1px;}
    .history-wrap .history-item .content .detail-box .h-txt2 {font-size: 18px; font-weight: 500; margin-bottom: 14px;}
    .history-wrap .history-item .content .detail-box .h-book {display: flex; gap: 20px;}
    .history-wrap .history-item .content .detail-box .h-book .cover img {height: 170px;}
    .history-wrap .history-item .content .detail-box .h-link {display: flex; gap: 10px;}
    .history-wrap .history-item .content .detail-box .h-link a {height: 30px; line-height: 29px; display: inline-block; border: 1px #3E48A9 solid; background: url('https://image.aladin.co.kr/img/common/history-link-arr.svg') no-repeat center right 10px / 6px auto; padding: 0 24px 0 10px; box-sizing: border-box; border-radius: 15px; text-decoration: none; color: #3E48A9; font-size: 15px;}
    .history-wrap .history-item .content .detail-box .h-link a ~ a {margin-top: 0px;}

    .samsungcard {padding: 10px 0;}
    .samsungcard img {width: 314px;}

}