@charset "UTF-8";
/* Then And Now Styles */
.then-and-now-header{margin-top:120px;text-align: center;}
.then-and-now-header h1{margin:0;letter-spacing:-1px; font-size: 60px;font-weight: 400;color:#333; }
.then-and-now-header h1 span{ font-weight: 800;color:#ea5413; }
.then-and-now-header p{margin:20px 0 0; line-height:1.4; letter-spacing:-4px;font-weight: 300;font-size: 50px;color:#999089;}
.then-and-now{position: relative; margin: 80px 100px 25px }
.then-and-now-labels{display:flex;gap:1px;}
.then-and-now .then,
.then-and-now .now {display:flex;align-items: center; justify-content: space-between;width:50%;height: 86px;}
.then-and-now .now{flex-direction: row-reverse;border-left: 1px solid #e8e8e8;}
.then-and-now h3 {margin:0;padding:0;font-weight:500;font-size:56px ;color: #5e5a57}
.then-and-now > .then-and-now-labels > * > div {display:flex;align-items: center; justify-content: space-between;width:100%;}
.then-and-now > .then-and-now-labels > * > div p {padding: 0 30px;font-size:18px;color: #666}
.then-and-now .now h3{color: #ea5413;}
.then-and-now .now p {color:#333}
.then-and-now .now > div{flex-direction: row-reverse;}
/* 이미지 비교 슬라이더 영역 */
.photo-area{position:relative;overflow:hidden;border-radius:16px;aspect-ratio:2/1;cursor:default;}
.photo-area .recent{position:relative;width:100%;height:100%;}
.photo-area .recent img{display:block;width:100%;height:100%;object-fit:cover;}
.photo-area .older{position:absolute;top:0;left:0;width:100%;height:100%;clip-path:inset(0 50% 0 0);}
.photo-area .older img{display:block;width:100%;height:100%;object-fit:cover;}
.photo-area .divider{position:absolute;top:0;left:50%;width:75px;height:100%;transform:translateX(-50%);cursor:grab;z-index:10;touch-action:pan-y;user-select:none;}
.photo-area .divider:active{cursor:grabbing;}
.photo-area .divider::before{content:'';position:absolute;top:0;left:50%;width:1px;height:100%;background:#fff;transform:translateX(-50%);}
.then-and-now-btn {position: absolute; top: 50%; left: 50%;display: flex;width: 75px;height: 75px;transform: translate(-50%, -50%);cursor: grab;border-radius: 100%;box-shadow: 0 0 4px #777;z-index:20;pointer-events:none;background:#fff;}
.then-and-now-btn button{font-size:0;pointer-events:none;}
.then-and-now-btn button:nth-child(1){width: 38px;margin-right:-1px;background: url(/_res/dongguk/legacy/img/thenandnow/btn_then_left.png) no-repeat 50%;background-size:contain;}
.then-and-now-btn button:nth-child(2){width: 37px;background: url(/_res/dongguk/legacy/img/thenandnow/btn_then_right.png) no-repeat 50%;background-size:contain;}
.then-and-now-list h2 {margin: 0;text-align: center;font-size:30px;color:#111;}
.then-and-now-con{position:relative;left:50%;width:100vw;margin: 30px 0 0;background:#f5f5f5;transform: translateX(-50%);}
.then-and-now-box {position:relative;max-width: 1540px;margin: 0 auto;padding: 0 20px;overflow:hidden;}
.then-and-now-box button{position:absolute;top:50%;width: 54px;height: 54px;background: url(/_res/dongguk/legacy/img/thenandnow/btn_n.png) no-repeat 50%; cursor: pointer;font-size:0;z-index:2;}
.then-and-now-box button:first-child{left:30px;transform:translateY(-50%) scaleX(-1);}
.then-and-now-box button:last-child{right:30px;transform:translateY(-50%);}
.then-and-now-box button:first-child:hover,
.then-and-now-box button:first-child:active{background:url(/_res/dongguk/legacy/img/thenandnow/btn_p_on.png) no-repeat 50%;transform:translateY(-50%) scaleX(-1);}
.then-and-now-box button:last-child:hover,
.then-and-now-box button:last-child:active{background:url(/_res/dongguk/legacy/img/thenandnow/btn_p_on.png) no-repeat 50%;}
.then-and-now-item{margin:0 78px;overflow:hidden;}
.then-and-now-list ul {display:flex;margin:0;padding:0;width:max-content;transition:transform .3s ease;}
.then-and-now-list ul li{line-height:54px;padding: 0 19px;list-style: none;font-size: 18px;color: #444;cursor: pointer;white-space:nowrap;}
.then-and-now-list ul li.active {color: #fff;background:#939393}

/* ============================================
   반응형 - 태블릿
   ============================================ */
@media screen and (max-width:1024px) {
    /* Then And Now */
	.then-and-now-header{ margin: 100px 0 120px;}
    .then-and-now-header h1{font-size:46px;}
    .then-and-now-header p{font-size:36px;letter-spacing:-2px;}
    .then-and-now{margin:60px 40px 20px;}
    .then-and-now h3{font-size:40px;}
    .then-and-now .then,
    .then-and-now .now{height:70px;}
    .then-and-now > .then-and-now-labels > * > div p{font-size:16px;padding:0 15px;}
    .photo-area{border-radius:12px;}
    .then-and-now-btn{width:60px;height:60px;}
    .then-and-now-btn button:nth-child(1){width:30px;}
    .then-and-now-btn button:nth-child(2){width:30px;}
    .then-and-now-list h2{font-size:24px;}
    .then-and-now-box{padding:0 64px;}
    .then-and-now-box button{width:44px;height:44px;}
    .then-and-now-list ul li{font-size:16px;padding:0 14px;line-height:48px;}


}

/* ============================================
   반응형 - 모바일
   ============================================ */
@media screen and (max-width:768px) {
    /* Then And Now */
	.then-and-now-header{margin: 60px 0 40px;}
    .then-and-now-header h1{font-size:32px;}
    .then-and-now-header p{font-size:24px;letter-spacing:-1px;}
    .then-and-now{margin:40px 0 15px;}
    .then-and-now-labels{padding-top:10px;}
	.then-and-now > .then-and-now-labels > * > div{flex-wrap:wrap}
    .then-and-now > .then-and-now-labels > .then > div{padding-right:10px;}
    .then-and-now > .then-and-now-labels > .now > div{padding-left:10px;}
    .then-and-now h3{font-size:28px;width:100%;}
    .then-and-now .then,
    .then-and-now .now{height:54px;}
	.then-and-now .now h3{text-align:right;}
    .then-and-now > .then-and-now-labels > * > div p{font-size:13px;padding: 0}
    .photo-area{border-radius:8px;aspect-ratio:4/3;}
    .then-and-now-btn{width:46px;height:46px;}
    .then-and-now-btn button:nth-child(1){width:23px;}
    .then-and-now-btn button:nth-child(2){width:23px;}
    .photo-area .divider{width:46px;}
    .then-and-now-list h2{font-size:20px;}
    .then-and-now-box{padding:0 70px;margin:20px 0 0;}
    .then-and-now-box button{width:36px;height:36px;background-size:contain !important;}
    .then-and-now-box button:first-child{left:20px;}
    .then-and-now-box button:last-child{right:20px;}
    .then-and-now-item {margin: 0 0;}
    .then-and-now-list ul li{font-size:14px;padding:0 12px;line-height:42px;}
}