@charset "utf-8";

/* ============================================
   학회연혁 (history) 전용 스타일
   원본 content.css 에서 관련 규칙을 그대로 추출
   ============================================ */

/* --- 탭 --- */
.tabs {margin-bottom:1.875rem;}
.tabs > ul {display:flex; flex-wrap:wrap; gap:7px;}
.tabs > ul > li {width:calc((100% - 28px) / 5);}
.tabs > ul > li button, .tabs > ul > li a {display:flex; justify-content:center; align-items:center; background:#f7f7f7; border:1px solid #d6d7d8; border-radius:0.5rem; font-size:1.25rem; line-height:normal; height:54px; padding:5px 5px; width:100%;}
.tabs > ul > li .on, .tabs > ul > li.on a {background:#fff; border:3px solid var(--color); box-shadow:3px 3px 7px rgba(51,87,161,0.2); color:var(--color); font-weight:700; position:relative;}
.tabs > ul > li .on::after, .tabs > ul > li.on a::after {content:''; background:var(--color); border:4px solid rgba(255,255,255,1); border-radius:50rem; width:9px; height:9px; position:absolute; bottom:-8px;}
.thesis .tabs {margin-bottom:1.25rem;}
.thesis .tabs > ul > li {flex:1;}

/* --- 연혁 타임라인 (base) --- */
.hs_wrap .tabs > ul > li {flex:1;}
.hs_wrap .list {position:relative; margin-top:50px;}
.hs_wrap .list ul {position:relative; width:100%; height:auto; min-height:357px; display:block;}
.hs_wrap .list ul::after {content:''; display:block; position:absolute; left:50%; top:0; width:1px; height:100%; border-left:2px dotted #b9bcbe;}
.hs_wrap .list ul li {position:relative; width:50%; margin-left:50%; padding:0 0 0 60px; text-align:left;}
.hs_wrap .list ul li::before {content:''; display:block; position:absolute; top:15px; left:0; width:45px; height:2px; background:var(--color);}
.hs_wrap .list ul li .year {font-size:2.5rem; font-weight:700; line-height:80%; color:var(--color); margin-bottom:30px; letter-spacing:-1px; text-align:inherit;}
.hs_wrap .list ul li .year::after {content:''; width:30px; height:30px; background-color:var(--color); border:8px solid #d6eef5; border-radius:50%; box-sizing:border-box; position:absolute; left:-15px; top:0; z-index:1;}
.hs_wrap .list .area {display:flex; position:relative; margin-bottom:3px;}
.hs_wrap .list .area .date {color:var(--color); font-weight:700; flex:0 0 70px; font-family: "Roboto", 'Pretendard', sans-serif;}
/* .hs_wrap .list .area .date::after {content:'월';} */

@media screen and (min-width:1025px) {
.tabs {margin-bottom:3.125rem;}
/* .tabs > ul {justify-content:center;} */
.tabs > ul > li {flex:1;}
.tabs > .page-tab-cnt6 > li {width:calc((100% - 14px) / 3);}
}

@media screen and (min-width:769px) {
.hs_wrap .list ul li + li {margin-top:-35px;}
.hs_wrap .list ul li:nth-child(even) {margin-left:0; padding:0 60px 0 0;}
.hs_wrap .list ul li:nth-child(even)::before {left:auto; right:0;}
.hs_wrap .list ul li:nth-child(even) .year {text-align:right;}
.hs_wrap .list ul li:nth-child(even) .year::after {left:auto; right:-15px;}
.hs_wrap .list ul li:nth-child(even) .area {justify-content:flex-end;}
.hs_wrap .list ul li:nth-child(even) .area .date {order:1; text-align:right;}
.hs_wrap .list ul li:nth-child(even) .area .cont {text-align:right;}
}

@media screen and (max-width:1024px) {
.tabs > ul > li {width:calc((100% - 7px) / 2);}
.tabs > ul > li button, .tabs > ul > li a {font-size:1rem; height:45px;}
}

@media screen and (max-width:768px) {
.hs_wrap .list ul::after {left:10px;}
.hs_wrap .list ul li {position:relative; width:100%; margin-left:0; padding:0 0px 1.25rem 45px;}
.hs_wrap .list ul li::before {top:9px; width:35px;}
.hs_wrap .list ul li .year {font-size:1.8rem; margin-bottom:15px;}
.hs_wrap .list ul li .year::after {width:20px; height:20px; border-width:4px; left:0;}
}