@charset "utf-8";

/* 'GangwonEduPowerExtraBoldA' */
@font-face {
    font-family: 'GangwonEduPowerExtraBoldA';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEduPowerExtraBoldA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Page Wrap STR */
#layer_wrap {margin:0 auto; padding:0; width:100%;}
#layer_box {display:block; margin:0; padding:0; padding-bottom:70px; width:100%;}
/* Page Wrap END */

#layer_box > header > h1 {margin:0 auto; padding:50px 0; text-align:center; font-family:'GmarketSansMedium'; font-weight:600; font-size:30px; color:#1c54bb;}

.sub_box {margin:0; padding:0; width:100%;}
.sub_box > img {display:block; margin:0 auto; margin-bottom:50px; padding:0; text-align:center;}
.sub_box > h3 {margin:0 auto; margin-bottom:15px; font-family:'GmarketSansMedium'; font-weight:500; font-size:21px; text-align:center;}
.sub_box > p {margin:0; font-family:'NanumSquare',sans-serif; font-weight:400; font-size:16px; line-height:22px;}
.sub_box > p:last-child {margin-bottom:80px;}

.talign_r {text-align:right;}

.history_bx {margin:0 auto; padding:0; padding-bottom:70px; width:100%;}
.history_bx > h4 {position:relative; margin:0; padding:40px 0 40px 0; line-height:1; color:#232323; font-family:'GangwonEduPowerExtraBoldA'; font-weight:900; font-size:27px; text-align:center;}
.history_bx > h4:before {content:''; position:absolute; bottom:-5px; left:50%; margin:0; padding:0; width:10px; height:10px; transform:translateX(-50%); border:0; border-radius:50%; background:#de413a; z-index:1;}
.history_month_bx {position:relative; display:flex; flex-direction:row; flex-wrap:wrap; align-items:stretch; justify-content:stretch; margin:0; padding:0; padding-bottom:20px; width:100%;}
.history_month_bx:before {content:''; position:absolute; left:50%; top:0; width:1px; height:100%; border:0; background:#ddd;}
.history_month_cell {margin:0; padding:0; width:50%;}
.history_month_cell:first-child {padding-right:30px;}
.history_month_cell:last-child {padding-left:30px;}
.history_month_cell > ul {margin:0; padding:0; width:100%;}
.history_month_cell > ul > li {display:flex; flex-direction:row; flex-wrap:wrap; align-items:stretch; justify-content:flex-start; margin:10px 0; padding:0; width:100%; gap:0 10px;}
.history_month_cell:first-child > ul > li {flex-direction:row-reverse;}
.history_month_cell > ul > li > span {position:absolute; display:block; width:47px; color:#232323; font-family:'Roboto'; font-weight:900; font-size:18px; line-height:1.3;}
.history_month_cell > ul > li > p {margin:0; padding:0; padding-bottom:15px; color:#333; font-family:'NanumSquare',sans-serif; font-weight:400; font-size:17px; line-height:1.3;}
.history_month_cell:first-child > ul > li > p {padding-right:60px;}
.history_month_cell:last-child > ul > li > p {padding-left:60px;}
.sub_box > .history_bx:nth-child(even) {background:#fafafa;}

@media (max-width:1200px) {
    .history_bx > h4 {font-size:25px;}
    .history_month_cell > ul > li > span {font-size:16px;}
    .history_month_cell > ul > li > p {font-size:15px;}
}

@media (max-width:1000px) {
    .top_visual {height:400px;}
    .top_visual_inner > h3 {font-size:50px;}
}

@media (max-width: 800px) {
    #layer_box > header > h1 {padding:30px 0; font-size:25px;}
    .sub_box > img {width:200px;}
    .sub_box > h3 {font-size:19px;}
    .sub_box > p  {font-size:14px; line-height:19px;}

    .history_bx > h4 {padding:0 0 30px 26px; text-align:left;}
    .history_bx > h4:before {left:0;}
    .history_month_bx:before {left:0;}
    .history_month_cell {width:100%;}
    .history_month_cell:first-child {padding-left:30px; padding-right:0;}
    .history_month_cell:first-child > ul > li {flex-direction:row;}
    .history_month_cell:first-child > ul > li > p {padding-left:55px; padding-right:0;}
}

@media (max-width:700px) {
    .history_bx > h4 {padding:0 0 10px 26px; font-size:23px;}
    .history_month_bx {padding-bottom:8px;}
    .history_month_cell > ul > li > span {font-size:14px;}
    .history_month_cell > ul > li > p {padding-bottom:10px; padding-left:48px !important; font-size:13px;}
}

@media (max-width: 600px) {
    #layer_box > header > h1 {padding:18px 0; font-size:23px;}
    .sub_box > h3 {font-size:17px;}
    .sub_box > p  {font-size:13px; line-height:17px;}
}