@charset "utf-8";

/* =========================== PAGE */
/* 공통 */
.pagecommon{position:relative;font-size:16px;letter-spacing:-.3px;color:#777;line-height:1.8}
.pagecommon *{word-break:keep-all}
.pagecommon .pl{white-space:pre-line}
.pagecommon .inner{width:100%;max-width:1400px;margin:0 auto}

#history1006 .bnr{position:relative;overflow:hidden;display:flex;align-items:center;height:430px;margin-bottom:130px;font-size:20px;font-weight:700;color:#111}
#history1006 .bnr p{font-size:60px;font-family:'play'}
#history1006 .bnr p span{color:var(--primary)}
#history1006 .bnr #mainImg{position:absolute;z-index:-1;top:0;left:28%;width:930px;height:430px;background:url('../img/sub/history1006_bnr.jpg') center;background-size:cover}

#history1006 .txt{text-align:center}
#history1006 .txt p{margin-bottom:30px;font-size:50px;font-weight:700;color:#111;line-height:1.3}

#history1006 .his{display:flex;margin:150px 0}
#history1006 .his .year p{font-size:150px;font-weight:700;color:#eee;letter-spacing:-5px;font-family:'play'}
#history1006 .his .year div{margin-top:-40px;font-size:18px;font-weight:700;color:var(--primary)}
#history1006 .his .info{width:100%;height:320px;overflow-y:scroll}
#history1006 .his .info div+div{margin-top:50px}
#history1006 .his .info p{font-size:150px;font-weight:700;color:var(--primary);letter-spacing:-5px;font-family:'play'}
#history1006 .his .info ul{margin-top:-65px;padding-left:10%}
#history1006 .his .info ul li{position:relative;width:90%;padding-left:20px;border-bottom:1px dashed #e1e1e1;font-weight:500;color:#111;line-height:3.5}
#history1006 .his .info ul li:before{position:absolute;content:'';top:30px;left:0;width:5px;height:5px;background:#111}

/* 스크롤바 설정*/
#history1006 .his .info::-webkit-scrollbar{width:10px}
/* 스크롤바 막대 설정*/
#history1006 .his .info::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,20%);border-radius:10px}
/* 스크롤바 뒷 배경 설정*/
#history1006 .his .info::-webkit-scrollbar-track{background-color:rgba(0,0,0,5%);border-radius:10px}

#history1006 .box li{display:flex;align-items:center;justify-content:space-between}
#history1006 .box li:nth-child(2){flex-direction:row-reverse}
#history1006 .box li dl{padding:0 7%}
#history1006 .box li dl dt{margin-bottom:10px;font-size:20px;font-weight:700;color:#111}

@media(max-width:1400px){
.pagecommon .pl{white-space:normal}
.pagecommon .tit{padding-left:100px}
#history1006 .bnr p{font-size:48px}
#history1006 .txt p{font-size:35px}
#history1006 .his{position:relative;margin:100px 0;padding:0 100px}
#history1006 .his .year p{font-size:120px}
#history1006 .his .year div{position:absolute;top:0;left:50%;padding:10px 30px;border-radius:50px;font-size:16px;color:#fff;background:var(--primary);transform:translateX(-50%)}
#history1006 .his .info{height:265px}
#history1006 .his .info p{font-size:120px}
#history1006 .box li{flex-wrap:wrap}
#history1006 .box li img{width:50%}
#history1006 .box li dl{width:50%}
}
@media(max-width:1024px){
#history1006 .bnr{height:370px}
#history1006 .cont{padding:0 15px}
#history1006 .his{position:relative}
#history1006 .box li dl dt{font-size:17px}
}
@media(max-width:820px){
.pagecommon .tit{padding-left:50px}
#history1006 .bnr{height:300px;margin-bottom:70px}
#history1006 .bnr p{font-size:35px}
#history1006 .txt p{font-size:28px}
#history1006 .his{padding:0;padding-top:15px}
#history1006 .his .info{height:245px}
#history1006 .his .info ul{margin-top:-50px}
#history1006 .his .year p{font-size:100px}
#history1006 .his .info p{font-size:100px}
#history1006 .box{text-align:center}
#history1006 .box li{display:block}
#history1006 .box li+li{margin-top:50px}
#history1006 .box li img{width:75%}
#history1006 .box li dl{width:100%;margin-top:20px;padding:0}
}
@media(max-width:480px){
.pagecommon{font-size:14px}
#history1006 .txt p{font-size:22px}
#history1006 .box li img{width:100%}
#history1006 .his{margin:75px 0}
#history1006 .his .year p{font-size:70px}
#history1006 .his .info p{font-size:70px}
#history1006 .his .year div{width:100%;font-size:15px;text-align:center}
#history1006 .his .info{height:200px}
#history1006 .his .info ul{margin-top:-15px}
#history1006 .his .info ul li{margin-bottom:10px;padding-bottom:10px;line-height:1.5}
#history1006 .his .info ul li:before{top:8px}
}