:root{
  --areaMargin: 0;
}

/* 분류 */
.hist_menu{position: relative}
.hist_menu > button {position: absolute; top: 3.6rem; z-index: 10; width: 1.7rem; height: 2.8rem; text-indent: -9999rem;}
.hist_menu > button.prev {left: 0; background: url('../images/btn-prev.png') no-repeat center / cover;}
.hist_menu > button.prev:hover{background: url(../images/btn-prev-on.png) no-repeat center / cover;}
.hist_menu > button.next {right: 0; background: url('../images/btn-next.png') no-repeat center / cover;}
.hist_menu > button.next:hover{background: url(../images/btn-next-on.png) no-repeat center / cover;}

.hist_menu .hist-menu-list-box{position: relative; padding: 0 3.5rem;}
.hist_menu .hist-menu-list-box .slider {position: relative; overflow: hidden;}
.hist_menu .hist-menu-list-box .slider::after {content: ''; position: absolute; right: 0; top: 0; z-index: 10; width: .5rem; height: 100%; background: #fff;}
.hist_menu .hist-menu-list-box .line {position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 11rem;}
.hist_menu .hist-menu-list-box .line::after {content: ''; position: absolute; right: 0; top: 3rem; width: 1px; height: 4.8rem; background: #cccccc;}
.hist_menu .hist-menu-list-box .line a{font-family: sb; font-size: 2.8rem; color: #979797;}
.hist_menu .hist-menu-list-box .line a:hover,
.hist_menu .hist-menu-list-box .line.on a {color: #006fc6;}
.hist_menu .hist-menu-list-box .line span {position: relative;}
.hist_menu .hist-menu-list-box .line span::after {content: ''; position: absolute; left: 0; bottom: -1.3rem; width: 0; height: .5rem; background: #006fc6; transition: width .35s;}
.hist_menu .hist-menu-list-box .line.on span::after,
.hist_menu .hist-menu-list-box .line a:hover span::after {width: 100%;}

/* 리스트 */
.hist_cont{width: calc(100% + var(--areaMargin)); margin-left: calc(-1*var(--areaMargin)); padding-bottom: 6rem;}
.hist_inner{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; margin-top: 4.2rem;}
.hist_inner .thumYear{position: relative; width: 45.56%;}
.hist_inner .thumYear .thumb-image{overflow: hidden; border-top-right-radius: 8rem;}
.hist_inner .thumYear img{width: 100%;}
.hist_inner .thumYear .thumb-content{position: absolute; right: -6rem; bottom: -6rem; max-width: 58rem; padding: 7.3rem 8rem 6.3rem 10.6rem; background: url(../images/title_pattern.png) no-repeat center center / cover; border-top-left-radius: 10rem; border-bottom-right-radius: 6rem;}
.hist_inner .thumYear .thumb-content h1{display: inline-block; position: relative; padding-right: 2rem; font-family:"sm"; font-size: 4rem; line-height: 5rem; color: #ceff60;}
.hist_inner .thumYear .thumb-content h1::before{content:""; position: absolute; display: block; right: 0; top: 0; width: 1.4rem; height: 1.4rem; background-color: #ceff60; border-top-left-radius: .7rem; border-bottom-right-radius: .7rem; }
.hist_inner .thumYear .thumb-content span{display: block; margin-top: 3.4rem; font-family:"sl"; font-size: 2.6rem; line-height: 4rem; color: white;}
.hist_inner .hist_list{position: relative; width: 54.44%; padding-left: 14.5rem;}
.hist_inner .hist_list .box{position: relative; display: flex; align-items: flex-start; flex-direction: column; flex-wrap: wrap; width: 100%; padding-bottom: 4.2rem;}
.hist_inner .hist_list .box::after {content: ''; position: absolute; left: .7rem; top: 0; width: 1px; height: 100%; background: #c1c5c8; z-index: -1;}
.hist_inner .hist_list .box:last-child{padding-bottom: 0;}
.hist_inner .hist_list .year{flex-shrink: 0; position: relative; width: 15rem; margin-bottom: .4rem;}
.hist_inner .hist_list .year h1{padding-left: 3.6rem; background: url(../images/year_arrow.png) no-repeat left top 11px; font-family: sm; font-size: 2.6rem; color: #111111;}
.hist_inner .hist_list .row-content{position: relative; flex-grow: 1; margin-top: .7rem; padding-left: 4rem;}
.hist_inner .hist_list .box-content{display: flex; align-items: start; width: 100%; margin-bottom: 2rem;}
.hist_inner .hist_list .box-content:last-child{margin-bottom: 0;}
.hist_inner .hist_list .box-content h2{position: relative; top: -.4rem; flex-shrink: 0; width: 7.6rem; font-family: pb; font-size: 1.8rem; color: #006fc6;}
.hist_inner .hist_list .box-content ul{flex-grow: 1;}
.hist_inner .hist_list .box-content li{font-family: pr; font-size: 1.8rem; line-height: 3rem; color: #333333;}
.hist_inner .hist_list .box-content li:last-child{margin-bottom: 0;}
.hist_inner .hist_list .nodate{padding: 1.5rem 0; font-family: pr; font-size: 1.6rem; text-align: center;}

@media screen and (max-width: 1100px){
    .hist_cont{padding-bottom: 3rem;}
	.hist_menu > button {top: 4rem;}
    .hist_inner .thumYear .thumb-content{right: -3rem; bottom: -3rem; padding: 5rem; max-width: 35rem;}
    .hist_inner .thumYear .thumb-content h1{font-size: 2.5rem;}
    .hist_inner .thumYear .thumb-content span{margin-top: 2rem; font-size: 2rem; line-height: 3rem;}
    .hist_inner .hist_list{padding-left: 5rem;}
	.hist_menu .hist-menu-list-box .line a {font-size: 2.5rem;}
}

@media screen and (max-width: 768px){
    .hist_cont{padding-bottom: 0;}
    .hist_menu > button{top: 2.6rem;}
    .hist_menu .hist-menu-list-box .line{height: 7rem;}
    .hist_menu .hist-menu-list-box .line::after{top: 1.5rem;}
    .hist_menu .hist-menu-list-box .line a{font-size: 1.8rem;}
    .hist_inner{margin-top: 2rem}
    .hist_inner .thumYear{width: 100%;}
    .hist_inner .thumYear .thumb-image{width: calc(100% - 3rem);}
    .hist_inner .thumYear .thumb-content{right: 0; padding: 3rem 5rem;}
    .hist_inner .hist_list{width: 100%; margin-top: 5rem; padding-left: 0;}
    .hist_inner .hist_list .row-content{padding-left: 2rem;}
	.hist_inner .hist_list .box-content h2 {font-size: 1.7rem;}
	.hist_inner .hist_list .box-content li {font-size: 1.7rem;}
}