@charset "utf-8";

.history .img img {width:100%; height:100%; object-fit:cover; transition:var(--ani);}
.history .line {width: 100%; height: 1px; background: #D9D9D9; margin: 100px 0;}


.history .historyWrap .imgWrap span {display: inline-block; color: var(--black); opacity: 15%; border-bottom: 3px solid var(--black); font-size: var(--fs30); line-height: 1; padding-bottom:5px; font-weight: 800; margin-bottom: 35px; float: right;}
.history .historyWrap .imgWrap .img {border-radius: 10px; width: 540px; height: 160px; overflow: hidden;}
.history .historyWrap .imgWrap h3 {font-size: var(--fs30); line-height: 1.2; margin-top: 60px;}
.history .historyWrap .imgWrap h3 p {font-weight: 400;}

.history .historyWrap {display: grid; grid-template-columns: 540px auto; gap: 120px;}
.history .historyWrap dl {display: grid; gap: 60px; grid-template-columns: 100px auto;}
.history .historyWrap dl+dl {margin-top: 25px;}
.history .historyWrap dt {width:100px; font-size: var(--fs30); font-weight: 700; line-height: 1.1; transition: .3s;}
.history .historyWrap dd p {position: relative; font-weight: 700; color: #000; }
.history .historyWrap dd p:before {content: ""; width: 12px; height: 12px; border-radius: 100px; background:#ddd; position: absolute; left: -25px; top: 8px;}
.history .historyWrap dd p+p {margin-top: 10px;}
.history .historyWrap dl:hover dt {color: var(--base3);}

.history .historyWrap.since {grid-template-columns: auto 540px;}
.history .historyWrap.since .imgWrap span {float: left;}
.history .historyWrap.since dl {display: grid; grid-template-columns: 540px auto;}
.history .historyWrap.since dt {order: 2; text-align: right;}
.history .historyWrap.since dd {text-align: right;}
.history .historyWrap.since dd p:before {right:-25px; left: auto;} 


/* ************************ 태블릿 (~1249) ************************ */
@media screen and (max-width:1249px) {

    .history .historyWrap {grid-template-columns: auto; gap: 50px;}

    .history .historyWrap .imgWrap span {float: none; margin-bottom: 25px;}
    .history .historyWrap .imgWrap h3 {margin-top: 30px;}

    .history .historyWrap.since {grid-template-columns: auto; gap: 50px;}
    .history .historyWrap.since dl {grid-template-columns: 100px auto;}
    .history .historyWrap.since dt {order: 1; text-align: left;}
    .history .historyWrap.since dd {order: 2; text-align: left;}
    .history .historyWrap.since dd p:before {left: -25px; }

    .history .historyWrap.since .historyIn {order: 2;}
    .history .historyWrap.since .imgWrap span {float: none;}

}



/* ************************ 모바일 (~767) ************************ */
@media screen and (max-width:767px) { 

    .history .historyWrap {gap: 30px;}
    .history .historyWrap .imgWrap .img {width: 100%; height: 130px;}
    .history .historyWrap dl {grid-template-columns: 55px auto; gap: 34px;}
    .history .historyWrap dt {width: 55px;}
    .history .historyWrap dd {word-break: break-all;}
    .history .historyWrap dd p:before {width: 10px; height: 10px;}

    .history .historyWrap.since {gap: 30px;}
    .history .historyWrap.since dl {grid-template-columns: 55px auto; gap: 40px;}
    .history .historyWrap.since dt {width: 55px;}

    .history .line {margin: 50px 0;}


}


/* ************************ 모바일 (~500) ************************ */
@media screen and (max-width:500px) {



}