@charset "utf-8";

/* =========================== PAGE color:#17b1c0 */
.pagecommon{position:relative;font-size:18px;line-height:1.5;color:#777;font-family:var(--k-font)}
.pagecommon .pl{white-space:pre-line}
.pagecommon *{word-break:keep-all}

#sub2{display:flex;justify-content:space-between;color:#111}

#sub2 .cont{width:100%; padding: 70px}
#sub2 .box .year{position:relative;padding:40px 0;border-top:1px solid #111;cursor:pointer}
#sub2 .box .year dt{font-size:45px;font-weight:700;line-height:1}
#sub2 .box .year dd{margin-top:5px;font-weight:500;color:#297acd;transition:all .3s;font-size:14px}
#sub2 .box .year .plus:before{position:absolute;content:'';top:50%;right:0;width:30px;height:2px;background:#111;transform:translateY(-50%)}
#sub2 .box .year .plus:after{position:absolute;content:'';top:50%;right:13px;width:2px;height:30px;background:#111;transform:translateY(-50%);transition:all .3s}
#sub2 .box .date{display:none;padding:50px 0;border-top:1px solid #e1e1e1}
#sub2 .box .date dl{display:flex;align-items:center}
#sub2 .box .date dl~dl{margin-top:20px}
#sub2 .box .date dt{font-weight:600;font-size: 20px}
#sub2 .box.on .date{display:block}
#sub2 .box.on .year .plus:after{transform:translateY(-50%) rotate(90deg)}
#sub2 .box.on .year dt{color:#000}

@media(max-width:1024px){
.pagecommon{font-size:15px}
#sub2{padding:0 20px}
#sub2 .box .year dt{font-size:35px}
#sub2 .cont{padding: 0}
}
@media(max-width:768px){
.pagecommon .pl{white-space:normal}
#sub2{display:block}
#sub2 .cont{width:100%;margin-top:50px;padding: 0}
#sub2 .box .year{padding:30px 0}
#sub2 .box .year dt{font-size:30px}
#sub2 .box .date dl~dl{margin-top:10px}
}
@media(max-width:480px){
#sub2{font-size:14px}
#sub2 .box .year dt{font-size:25px}
#sub2 .box .year .plus:before{width:15px;right:6px}
#sub2 .box .year .plus:after{height:15px}
#sub2 .box .date{padding:25px 0}
#sub2 .cont{padding: 0}
}
@media(max-width:390px){
#sub2 .box .year dt{font-size:22px}
#sub2 .box .year dd{font-size:12px}
#sub2 .box .date dl{display:block}
#sub2 .cont{padding: 0}
}