@charset "utf-8";

@font-face {
    font-family:"KTFlow-Bold";
    font-style:normal;
    src:local("KTFlow-Bold"),
            url("../fonts/KTFlow-Bold.woff2") format('woff2');
}
@font-face {
    font-family:"KTFlow-Medium";
    font-style:normal;
    src:local("KTFlow-Medium"),
            url("../fonts/KTFlow-Medium.woff2") format('woff2');
}
@font-face {
    font-family:"Pretendard";
    font-style:normal;
    src:local("Pretendard"),
            url("../fonts/PretendardVariable.woff2") format('woff2');
}

.visual.history {font-family:"Pretendard", sans-serif;}
.visual.history .hgroup h1 {font-family:"KTFlow-Bold", sans-serif; font-size:40px; line-height:1;}

.visual.history + .historys {font-family:"Pretendard", sans-serif;}
.visual.history + .historys .sub-title {margin-bottom:40px; font-size:40px; font-family:"KTFlow-Bold";}
.visual.history + .historys .tabs-etc {position:relative;width:240px; height:52px; border-radius:8px; border:solid 1px #8B8F97; overflow:visible; box-sizing:border-box;}
.visual.history + .historys .tabs-etc .tab-btn-year {display:block;position:relative;width:100%; height:100%;background:none;line-height:1;font-size:15px; font-family:"Pretendard", sans-serif; align-content:center;text-indent:15px;text-align:left; color:#000; z-index:9;}
.visual.history + .historys .tabs-etc ul.select-slide {position:absolute; top: 60px; left:0; width:100%; height:0; padding:0;  background:#fff; border-radius:8px; box-shadow:0 4px 8px rgba(19,20,21,0.1); z-index:10; box-sizing:border-box; transition:all 0.3s;}
.visual.history + .historys .tabs-etc ul.select-slide:after {position:absolute; top:0; left:0; width:100%; height:100%; border-radius:8px; box-shadow:0 0 4px rgba(19,20,21,0.05); z-index:8;}
.visual.history + .historys .tabs-etc ul.select-slide li {float:none;width:100%; height:48px;background:none;}
.visual.history + .historys .tabs-etc ul.select-slide li a {display:block; margin:0; height:48px; font-size:15px; text-align:left; line-height:1; background:none; align-content:center;text-indent:15px; border:none;border-radius:4px;}
.visual.history + .historys .tabs-etc:before {content:""; position:absolute; top:16px; right:16px; width:20px; height:20px; background:url(../images/kt/intro/btn_arrow.svg) 50% 50% no-repeat; /* transition:all 0.3s; */} 
.visual.history + .historys .tabs-etc ul.select-slide li a.selected {background:#F3F4F6;}
.visual.history + .historys .tabs-etc.open:before {transform:rotate(180deg);}
.visual.history + .historys .tabs-etc.open ul.select-slide {height:246px; padding:8px; overflow-y:auto; scrollbar-width:thin;}

.historys .history-area {margin-top:40px;}
.historys .year-flow {display:flex; position:relative; padding-left:48px; padding-bottom:140px;}
.historys .year-flow:after {content:""; position:absolute; top:28px; left:5px; width:2px; height:calc(100% - 20px); background:#E9EAEE; border-radius:2px;}
.historys .year-flow:last-child:after {content:none;}
.historys .year-flow.selected-year:after {content:none;}
.historys .year-flow.selected-year .btn-view-more {display:none;}
.historys .year-title {position:relative; width:90px; font-size:24px; font-weight:700; color:#000;}
.historys .year-title:before {content:""; position:absolute; top:12px; left:-48px; width:12px; height:12px; border-radius:12px; background:#E0282F;} 
.historys .history-area .month-flow-wrap {float:none; width:auto; padding:0; background:none;}
.historys .history-area .month-flow,
.historys .history-area dl {position:relative; float:none; width:auto; padding:3px 0 0 133px;; background:none;}
.historys .history-area .month-flow-wrap > dl,
.historys .history-area dl.month-flow {display:none; margin-top:32px; text-align:left;}
.historys .history-area dl.month-flow:first-child {display:block; margin-top:0;}
.historys .history-area dl.month-flow:before {content:none;}
.historys .history-area dl.month-flow dt {position:absolute; left:63px; top:6px; font-size:16px; font-weight:700; color:#000;}
.historys .history-area dl.month-flow dd {position:static; padding:0; font-size:16px; font-weight:400; color:#000; line-height:1.7;}
.historys dl dt + dd + dd {margin:0;}
.historys .history-area dl.month-flow dd:nth-child(4) ~ dd {display:none;}
.historys dl dd:before {content:none;}
.historys .btn-view-more {position:absolute; bottom:64px; left:260px; display:block; min-width:82px; height:44px; padding-left:14px; padding-right:32px; border-radius:8px; background:#E9EAEE; font-size:13px;color:#191A1B;}
.historys .btn-view-more:after {content:""; position:absolute; top:14px; right:12px; width:16px; height:16px; background:url(../images/kt/intro/btn_arrow.svg) 50% 50% no-repeat; background-size:auto 6px; transition:all 0.3s;} 

.historys .history-area .year-flow.active dl.month-flow {display:block;}
.historys .history-area .year-flow.active dl.month-flow dd {display:block;}
.historys .history-area .year-flow.active dl.month-flow {display:block;}
.historys .history-area .year-flow.active .btn-view-more:after {transform:rotate(180deg);}