@charset "utf-8";

:root{
    --theme: #a51516;
}

.empty{padding: 6em; text-align: center;}

.main-container {position:relative; overflow: hidden;}
.main-container *{box-sizing: border-box;}
.main-container *:before,
.main-container *:after{box-sizing: border-box;}


/* 비주얼 메인슬라이드 */
.visual{position: relative; color: #fff;}
.visual .list{height: 100%;}
.visual .list .slick-list{height: 100%;}
.visual .list .slick-list .slick-track{height: 100%;}
.visual .item{position: relative; display: block; width: 100%; height: 100%; background-color: #ddd;}
.visual .item .img{position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
.visual .item img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}

.visual .item .wrap{position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);}
.visual .item .wrap .txt .sup{font-weight: 600; font-size: 13px; letter-spacing: 0.6px; opacity: 0; transform: translateX(50px);}
.visual .item.slick-active .wrap .txt .sup{opacity: 1; transform: translate(0); transition: 0.75s; transition-delay: 0.15s;}
.visual .item .wrap .txt .tit{font-weight: 200; font-size: 3rem; line-height: 130%; /* padding: 2rem 0 2rem; */ padding: 2rem 0 0.3rem; letter-spacing: -0.025em; opacity: 0; transform: translateX(50px);}
.visual .item .wrap .txt .tit b{font-weight: 600;}
.visual .item.slick-active .wrap .txt .tit{opacity: 1; transform: translate(0); transition: 0.75s; transition-delay: 0.3s;}

.visual .item .wrap .vbtn_wrap{}
.visual .item .wrap .vbtn_wrap a{display: inline-block; font-size: 18px; font-weight: 200; line-height: 42px; border-radius: 44px; border: 1px solid rgba(255,255,255,0.4); padding: 0 20px; text-align: center;}
.visual .item .wrap .vbtn_wrap a:hover,
.visual .item .wrap .vbtn_wrap a:focus{border-color: #fff; font-weight: 500; transition: 0.2s;}

.visual .slick-dots{position: absolute; z-index: 4; left: 50%; transform: translateX(-50%); margin: 0 0 0 -11px; bottom: 30px; display: flex; justify-content: space-between; width: 200px; height: 25px; opacity: 0;}
.visual .slick-dots li{flex: 1; width: 33.333%; margin: 0; padding: 0; background: rgba(221, 221, 221, 0.5); box-sizing: border-box; border: 1px solid #222;}
.visual .slick-dots li button{display: block; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; font-size: 0;}

.visual > .wrap{position: absolute; top: 50%; left: 0; right: 0;}
.visual .slick-counter{position: absolute; top: 50%; transform: translateY(-50%); margin: 8.7rem 0 0; display: inline-block; text-align: center;}
.visual .slick-counter span{display: inline-block; box-sizing: content-box; padding: 0 8px; width: 15px; vertical-align: middle; font-size: 13px; font-weight: 500; color: #fff;}
.visual .slick-counter span.current{padding-left: 0;}
.visual .slick-counter span.total{padding-right: 0;}
.visual .slick-counter .progress{position: relative; display: inline-block; vertical-align: middle; width: 144px; height: 1px; margin: 0 auto 0; background: rgba(255,255,255,0.3);}
.visual .slick-counter .progress .bar{position: absolute; top: 0; left: 0; width: 0; height: 100%; background: #fff}
.visual .slick-counter .progress .bar.play{animation: width 5s linear; /* js : autoPlaySpeed 와 동일하게 맞추기 */}
.visual .slick-counter .progress .bar.pause{animation-play-state: paused;}

.visual .slick-counter .btn_stop{display: none !important; position: relative; display: inline-block; width: 10px; height: 14px; vertical-align: middle; margin: 0 0 0 10px; font-size: 0; text-indent: -9999px;}
.visual .slick-counter .btn_stop:before{content: ""; position: absolute; top: 0; left: 0; display: block; width: 4px; height: 14px; background: #222;}
.visual .slick-counter .btn_stop:after{content: ""; position: absolute; top: 0; right: 0; display: block; width: 4px; height: 14px; background: #222;}
.visual .slick-counter .btn_stop.on:before{width: auto; height: auto; border-width: 7px; border-style: solid; border-color: transparent transparent transparent #222; background: transparent;}
.visual .slick-counter .btn_stop.on:after{display: none;}

.visual .btn_s_pro{display: none !important; position: absolute; top: 50%; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; width: 70px; height: 70px; font-size: 0; background-color: rgba(0,0,0,0.3);}
.visual .btn_s_pro:hover,
.visual .btn_s_pro:focus{background-color: rgba(0,0,0,0.5);}
.visual .btn_s_pro_prev{left: 0;}
.visual .btn_s_pro_next{right: 0;}
.visual .btn_s_pro:before{content: ""; width: 20px; height: 20px; border-top: 3px solid #fff; border-left: 3px solid #fff;}
.visual .btn_s_pro_prev:before{transform: rotate(-45deg); margin: 0 -7px 0 0;}
.visual .btn_s_pro_next:before{transform: rotate(135deg); margin: 0 0 0 -7px;}
@media (max-width: 860px){
    .visual .item .wrap .txt .tit{font-size: 5.8vw;}
}
@media (max-width: 640px){
    .visual{height: 60vh !important; min-height: 500px;}
    .visual .item .wrap .txt .tit{font-size: 6.6vw;}
    .visual .item .wrap .vbtn_wrap a{font-size: 15px; line-height: 36px; padding: 0 16px;}
}
@media (max-width: 460px){
    .visual .item .wrap .txt .sup{font-size: 12px;}
    .visual .item .wrap .txt .tit{font-size: 2rem; padding: 1.5rem 0 1.5rem;}
}


/* 섹션 공통 */
.sec .wrap > .tit h3{font-size: 3rem; font-weight: 600; letter-spacing: -0.025em;}
.sec .wrap > .tit .sub{font-size: 1.125rem; font-weight: 200; color: #555; padding: 1rem 0 4.6rem;}

.more{display: inline-block; padding: 0 5.222rem; font-size: 1.125rem; font-weight: 600; line-height: 57px; background-color: var(--theme); color: #fff;}
.more.invert{background-color: #fff; box-shadow: inset 0 0 0 1px var(--theme); color: var(--theme);}
.more.invert:hover,
.more.invert:focus{color: #fff; background-color: var(--theme);}

.sec .date{display: inline-flex; flex-direction: column; justify-content: center; text-align: center; line-height: 1;}
.sec .date .dd{display: block; font-size: 2.25rem; font-weight: 700;}
.sec .date .ym{font-size: 12px; padding: 0.35rem 0 0;}

.fc_theme{color: var(--theme);}
@media (max-width: 1024px){
    .sec .wrap > .tit{position: relative; margin: 0 0 2rem;}
    .sec .wrap > .tit h3{font-size: 2rem;}
    .sec .wrap > .tit .sub{padding: 1rem 0 0;}
    .more{position: absolute; top: 0; right: 0; line-height: 36px; padding: 0 2.4rem; font-size: 1rem;}
    .sec .date .dd{font-size: 1.2rem;}
}
@media (max-width: 640px){
    .sec .wrap > .tit h3{font-size: 1.5rem;}
    .sec .wrap > .tit .sub{font-size: 15px; padding: 0.5rem 0 0; line-height: 1.4;}
    .more{top: 0; line-height: 28px; padding: 0 1rem; font-size: 13px;}
}


/* 섹션1 : K-DS News */
.sec1{position: relative; padding: 6.875rem 0; background-color: #e8e7e2;}
.sec1:before{content: ""; position: absolute; bottom: 6.875rem; left: -7vw; aspect-ratio: 7.85 / 2.51; width: 40.4vw; background: url("/assets/site/img/main/sec1_bg.png") no-repeat center; background-size: contain;}
.sec1 > .wrap{display: flex; justify-content: space-between;}
.sec1 .tit{flex: 0 0 auto;}

.bd_card{max-width: 838px;}
.bd_card > ul{display: flex; flex-wrap: wrap; gap: 3.5rem;}
.bd_card > ul > li{width: calc( (100% - 3.5rem) / 2 );}
.bd_card > ul > li a{display: block; padding: 2.85rem 2.5rem; background-color: #fff;}
.bd_card .top{display: flex; justify-content: space-between; align-items: center;}
.bd_card .top .badge{display: inline-block; line-height: 35px; padding: 0 1.66rem; text-transform: uppercase; font-size: 15px; font-weight: 600; color: var(--theme); box-shadow: inset 0 0 0 1px var(--theme);}
.bd_card > ul > li a:hover .top .badge{background-color: var(--theme); color: #fff; transition: 0.15s;}

.bd_card .mid{padding: 2.1rem 0 0;}
.bd_card .mid .title{font-weight: 600; font-size: 1.125rem; line-height: 25px; height: 50px;}
.bd_card .mid .con{font-weight: 300; line-height: 24px; height: 48px; margin: 1.1rem 0 3.1rem;}

.bd_card .vm{font-size: 14px; font-weight: 600; color: var(--theme); letter-spacing: 0.04em;}
@media (min-width: 1025px){
    /* 미디어쿼리 min-width */
    .bd_card > ul > li{min-width: 270px;}
}
@media (min-width: 1186px){
    /* 미디어쿼리 min-width */
    .bd_card > ul > li{min-width: 363.5px;}
}
@media (max-width: 1280px){
    .bd_card{max-width: none; padding-left: 4%;}
    .bd_card > ul{gap: 2rem;}
    .bd_card > ul > li{width: calc( (100% - 2rem) / 2 );}
    .bd_card > ul > li a{padding: 2rem;}
}
@media (max-width: 1024px){
    .sec1{padding: 5rem 0;}
    .sec1:before{bottom: 1rem;}
    .sec1 > .wrap{display: block;}
    .bd_card{padding: 0;}
}
@media (max-width: 860px){
    .sec1{padding: 4rem 0;}
    .bd_card > ul{gap: 1.5rem;}
    .bd_card > ul > li{width: calc( (100% - 1.5rem) / 2 );}
}
@media (max-width: 640px){
    .bd_card > ul{gap: 1rem;}
    .bd_card > ul > li{width: calc( (100% - 1rem) / 2 );}
    .bd_card > ul > li a{padding: 1rem;}
    .bd_card .top .badge{line-height: 28px; padding: 0 0.75rem; font-size: 12px;}
    .bd_card .mid{padding: 1rem 0 0;}
    .bd_card .mid .title{font-size: 15px; line-height: 20px; height: 40px;}
    .bd_card .mid .con{line-height: 20px; height: 40px; font-size: 14px; margin: 8% 0 16%;}
}
@media (max-width: 460px){
    .bd_card > ul{flex-direction: column; gap: 1rem;}
    .bd_card > ul > li{width: 100%;}
    .bd_card > ul > li:nth-child(n+3){display: none;}
    .bd_card .mid .con{margin: 1rem 0 2rem;}
}


/* 섹션2 : 슬라이드 */
.slide_nav_wrap{position: relative; width: 100%;}
.slide_nav_wrap .item{display: flex;}
.slide_nav_wrap .item .img{position: relative; width: 38.229%;}
.slide_nav_wrap .item .img img{width: 100%; height: auto;}
.slide_nav_wrap .item .txt{width: 61.771%; padding: 6.3% 30px 0 11.82%;}
.slide_nav_wrap .item .txt .num{font-size: 1.875rem; font-weight: 900; line-height: 1; color: #ccc;}
.slide_nav_wrap .item .txt .tit{font-size: 3rem; font-weight: 600; line-height: 1.2; padding: 1.65rem 0 0;}
.slide_nav_wrap .item .txt .sub{font-weight: 200; font-size: 1.125rem; line-height: 1.4; padding: 2.3rem 0 3.5rem;}
.slide_nav_wrap .item .txt .more{position: static;}

.slide_nav_wrap .slide_nav{position: absolute; top: 26.7vw; left: 38.229%; right: calc((100% - 1500px) / 2); display: flex; justify-content: space-between; padding: 0 0 0 11.82%;}
.slide_nav_wrap .slide_nav li{position: relative; text-align: center;}
.slide_nav_wrap .slide_nav li.slick-active{}
.slide_nav_wrap .slide_nav li:first-child,
.slide_nav_wrap .slide_nav li:last-child{margin: 0;}
.slide_nav_wrap .slide_nav li button{position: relative; display: flex; justify-content: center; align-items: flex-end; width: 13.25rem; aspect-ratio: 1 / 1; padding: 0 0 3.5rem; font-size: 1.125rem; font-weight: 600; color: #888; box-shadow: 0px 0px 14.85px 0.15px rgba(0, 0, 0, 0.08);}
.slide_nav_wrap .slide_nav li button:hover{}
.slide_nav_wrap .slide_nav li.slick-active button{background-color: var(--theme); color: #fff;} 
.slide_nav_wrap .slide_nav li button:before{content: ""; position: absolute; bottom: 5.3rem; left: 50%; transform: translateX(-50%); width: 80px; height: 80px; background-repeat: no-repeat; background-position: center; background-size: contain;}
.slide_nav_wrap .slide_nav li:nth-child(1) button:before{background-image: url("/assets/site/img/main/sec2_ico_strategy.png");}
.slide_nav_wrap .slide_nav li:nth-child(2) button:before{background-image: url("/assets/site/img/main/sec2_ico_curriculum.png");}
.slide_nav_wrap .slide_nav li:nth-child(3) button:before{background-image: url("/assets/site/img/main/sec2_ico_specialize.png");}
.slide_nav_wrap .slide_nav li.slick-active button:before{filter: brightness(0) invert(1);}
.slide_nav_wrap .slide_nav li button img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.3;}
.slide_nav_wrap .slide_nav li.slick-active button img{opacity: 1;}

.slide_nav_wrap .btn_s_n{position: absolute; z-index: 2; bottom: 0; left: 38.229%; width: 8.75rem; height: 8.75rem; font-size: 0; background-color: #e8e7e2;}
.slide_nav_wrap .btn_s_n:before{content: ""; position: absolute; top: 50%; left: 50%; width: 2rem; height: 2rem; border-top: 3px solid #fff; border-right: 3px solid #fff;}
.slide_nav_wrap .btn_s_n:hover,
.slide_nav_wrap .btn_s_n:focus{}
.slide_nav_wrap .btn_s_n_prev{background-color: var(--theme);}
.slide_nav_wrap .btn_s_n_prev:before{transform: translate(-50%, -50%) rotate(-135deg); left: 56%;}
.slide_nav_wrap .btn_s_n_next{bottom: 140px;}
.slide_nav_wrap .btn_s_n_next:before{transform: translate(-50%, -50%) rotate(45deg); left: 44%;}
@media (max-width: 1780px){
    .slide_nav_wrap .item .txt{padding: 5% 0 0 11.82%;}
}
@media (max-width: 1680px){
    .slide_nav_wrap .slide_nav{right: auto; gap: 2rem; top: 29vw;}
    .slide_nav_wrap .slide_nav li button{width: 12vw; padding: 0 0 3vw;}
    .slide_nav_wrap .slide_nav li button:before{bottom: auto; top: 2vw;}
}
@media (max-width: 1500px){
    .slide_nav_wrap .item .img{}
    .slide_nav_wrap .item .img img{height: 100%; position: absolute; top: 0; left: 0; object-fit: cover;}
    .slide_nav_wrap .item .txt{width: 61.771%; padding: 5% 30px 21rem 5rem;}
    .slide_nav_wrap .slide_nav{top: 30rem; padding-left: 5rem;}
    .slide_nav_wrap .slide_nav li button{width: 11rem;}
    .slide_nav_wrap .btn_s_n{display: none !important;}
}
@media (max-width: 1200px){
    .slide_nav_wrap .slide_nav li button{width: 9rem; padding: 0 0 2rem;}
    .slide_nav_wrap .slide_nav li button:before{width: 50px; height: 45px; top: 2rem;}
}
@media (max-width: 1024px){
    .slide_nav_wrap .item .txt{padding: 5% 15px 18rem 3rem;}
    .slide_nav_wrap .item .txt .num{font-size: 1.5rem;}
    .slide_nav_wrap .item .txt .tit{font-size: 2rem; padding: 1rem 0 0;}
    .slide_nav_wrap .item .txt .sub{padding: 2rem 0 3rem;}
    .slide_nav_wrap .slide_nav{padding-left: 3rem; top: 25rem; gap: 1.5rem;}
}
@media (max-width: 860px){
    .slide_nav_wrap{padding: 4rem 15px;}
    .slide_nav_wrap .item .img{position: absolute; width: 0; height: 0; overflow: hidden;}
    .slide_nav_wrap .item .txt{width: 100%; padding: 0;}
    .slide_nav_wrap .item .txt .sub{padding: 1rem 0 3rem;}
    .slide_nav_wrap .slide_nav{position: static; padding: 0; justify-content: flex-start;}
    .slide_nav_wrap .slide_nav li{flex: 1;}
    .slide_nav_wrap .slide_nav li button{width: 100%; padding: 0 0 7vw;}
    .slide_nav_wrap .slide_nav li button:before{width: 9vw; height: 8vw; top: 8vw;}
    .slide_nav_wrap .item .txt .more{position: absolute;}
}
@media (max-width: 640px){
    .slide_nav_wrap .slide_nav{gap: 1rem;}
    .slide_nav_wrap .slide_nav li button{font-size: 14px;}
    .slide_nav_wrap .item .txt .tit{font-size: 1.5rem;}
    .slide_nav_wrap .item .txt .sub{padding: 0.5rem 0 2rem; font-size: 15px;}
    .slide_nav_wrap .item .txt .sub br{display: none;}
}
@media (max-width: 460px){
    .slide_nav_wrap .slide_nav li button{padding: 0 0 4vw;}
    .slide_nav_wrap .slide_nav li button:before{width: 45px; height: 40px; top: 5vw;}
}


/* 섹션3 : 컬럼레이아웃 (인사말, K-DS 컨소시엄, 참여대학, K-DS Confederacy) */
.sec3{margin-top: -140px; color: #fff; background: #0c152b url("/assets/site/img/main/sec3_bg.jpg") no-repeat top center; background-size: cover;}
.sec3 .col{display: flex;}
.sec3 .col > li{flex: 1;}
.sec3 .col > li+li{border-left: 1px solid #5d7387;}
.sec3 .col > li a{position: relative; display: block; height: calc(100vh + 124px); padding: 0 5%;}
.sec3 .col > li a:before{visibility: hidden; opacity: 0;  content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: url("/assets/site/img/main/sec3_grad.png") no-repeat; background-size: cover; background-position: center bottom;}
.sec3 .col > li a:hover:before,
.sec3 .col > li a:focus:before{transition: 0.25s; visibility: visible; opacity: 1;}
.sec3 .col > li .txt{position: absolute; top: 44%; left: 50%; transform: translateX(-50%); width: calc(100% - 200px);}
.sec3 .col > li .txt .tit{position: relative; font-size: 1.875rem; font-weight: 600;}
.sec3 .col > li .txt .tit:before{content: ""; visibility: hidden; opacity: 0; position: absolute; top: -100px; left: 0; display: block; width: 82px; height: 76px; background-repeat: no-repeat; background-size: contain;}
.sec3 .col > li:nth-child(1) .txt .tit:before{background-image: url("/assets/site/img/main/sec3_ico01.png");}
.sec3 .col > li:nth-child(2) .txt .tit:before{background-image: url("/assets/site/img/main/sec3_ico02.png");}
.sec3 .col > li:nth-child(3) .txt .tit:before{background-image: url("/assets/site/img/main/sec3_ico03.png");}
.sec3 .col > li:nth-child(4) .txt .tit:before{background-image: url("/assets/site/img/main/sec3_ico04.png");}
.sec3 .col > li a:hover .tit:before,
.sec3 .col > li a:focus .tit:before{visibility: visible; opacity: 1; transition: 0.25s;}
.sec3 .col > li .txt .des{font-size: 1.125rem; font-weight: 200; padding: 2rem 0 3.5rem;}
.sec3 .col > li .txt .vm{visibility: hidden; opacity: 0; font-size: 1.125rem; font-weight: 600; letter-spacing: 0.04em;}
.sec3 .col > li a:hover .txt .vm,
.sec3 .col > li a:focus .txt .vm{visibility: visible; opacity: 1; transition: 0.25s;}
@media (max-width: 1680px){
    .sec3 .col > li .txt{width: 75%;}
    .sec3 .col > li .txt .des br{display: none;}
}
@media (max-width: 1500px){
    .sec3{margin-top: 0;}
}
@media (max-width: 1400px){
    .sec3 .col > li a{height: 90vh;}
    .sec3 .col > li .txt{top: 35%;}
}
@media (max-width: 1280px){
    .sec3{margin: 0 auto;}
    .sec3 .col > li a{height: 80vh;}
    .sec3 .col > li .txt .tit{font-size: 2.5vw;}
}
@media (max-width: 860px){
    .sec3 .col{flex-wrap: wrap;}
    .sec3 .col > li{width: 50%; flex: auto;}
    .sec3 .col > li+li{border: none;}
    .sec3 .col > li:nth-child(even){border-left: 1px solid #5d7387;}
    .sec3 .col > li:nth-child(n+3){border-top: 1px solid #5d7387;}
    .sec3 .col > li a{height: auto; aspect-ratio: 1 / 1; padding: 0;}
    .sec3 .col > li a:before{background: rgba(17, 36, 80, 0.5);}
    .sec3 .col > li .txt{position: relative; transform: none; top: auto; left: auto; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; padding: 40% 2rem 2rem;}
    .sec3 .col > li .txt .tit{font-size: 1.6rem;}
    .sec3 .col > li .txt .tit:before{width: 64px; height: 59px; top: -83px;}
    .sec3 .col > li .txt .des{padding: 1rem 0 2rem;}
}
@media (max-width: 640px){
    .sec3 .col > li .txt{text-align: center; padding: 2rem 2rem; justify-content: center;}
    .sec3 .col > li .txt .tit{font-size: 1.3rem;}
    .sec3 .col > li .txt .tit:before{visibility: visible; opacity: 1; position: static; margin: 0 auto;}
    .sec3 .col > li:nth-child(1) .txt .tit:before{transform: translateX(5px);}
    .sec3 .col > li:nth-child(2) .txt .tit:before{transform: translateX(18px);}
    .sec3 .col > li:nth-child(3) .txt .tit:before{transform: translateX(4px);}
    .sec3 .col > li:nth-child(4) .txt .tit:before{transform: translateX(0);}
    .sec3 .col > li .txt .des{font-size: 15px; padding: 1rem 0 0;}
    .sec3 .col > li .txt .des br{display: block;}
    .sec3 .col > li .txt .vm{display: none;}
}
@media (max-width: 460px){
    .sec3 .col > li .txt{padding: 1rem 0;}
    .sec3 .col > li .txt .tit{font-size: 17px;}
    .sec3 .col > li .txt .tit:before{width: 48px; height: 46px; margin: 0 auto 5px;}
    .sec3 .col > li:nth-child(1) .txt .tit:before{transform: translateX(5px);}
    .sec3 .col > li:nth-child(2) .txt .tit:before{transform: translateX(13px);}
    .sec3 .col > li:nth-child(3) .txt .tit:before{transform: translateX(0);}
    .sec3 .col > li:nth-child(4) .txt .tit:before{transform: translateX(0);}
    .sec3 .col > li .txt .des{font-size: 14px; line-height: 1.3; padding: 3.5% 0 0;}
}


/* 섹션 4 : 공지사항, K-DS 네트워크 */
.sec4{margin-top: -7.75rem; position: relative; z-index: 1; display: flex; align-items: flex-start;}
.sec4 > div{width: 50%;}

.bd{padding: 5rem 6.5rem 8.5rem; box-sizing: border-box; background-color: #fff;}
.bd:nth-child(1){}
.bd:nth-child(2){margin-top: 7.75rem;}
.bd .top{position: relative; padding: 0 3.5rem 0 0;}
.bd .top .sup{color: var(--theme); font-size: 15px; font-weight: 600; line-height: 1; padding: 0 0 0.8rem; letter-spacing: 0.04em;}
.bd .top .tit{font-size: 3rem; font-weight: 600; line-height: 1;}
.bd .top .more{position: absolute; top: 2rem; right: 0; display: block; width: 2.25rem; height: 2.25rem; font-size: 0; background-color: transparent; padding: 0;}
.bd .top .more:before,
.bd .top .more:after{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 3px; background-color: #000;}
.bd .top .more:after{width: 3px; height: 100%;}
.bd .top .more:hover,
.bd .top .more:focus{transform: rotate(90deg); transition: 0.25s;}
.bd .list{display: flex; flex-direction: column; gap: 2.75rem; padding: 4rem 0 0; min-height: 328px;} 
.bd .list > li{display: flex; align-items: center; gap: 3.6rem;}
.bd .list .date{flex: 0 0 auto; height: 58.84px;}
.bd .list .date .dd{}
.bd .list .date .ym{}
.bd .list .txt{flex: 1; display: block; min-width: 0;}
.bd .list .txt:hover,
.bd .list .txt:focus{text-decoration: underline;}
.bd .list .txt .title{font-size: 1.125rem; font-weight: 600; line-height: 1;}
.bd .list .txt .con{font-weight: 300; color: #555; line-height: 1; padding: 18px 0 0;}
.bd .list .type{position: relative; font-size: 14px; font-weight: 300; border: 1px solid rgba(255,255,255,0.7); line-height: 1.3; padding: 0.64rem 0.93rem; box-sizing: border-box;;}
.bd .list .type:before{content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 0.9em; background-color: #fff; transform: rotate(45deg); transform-origin: top center;}
.bd .list .txt:hover .type,
.bd .list .txt:focus .type{background-color: #fff;}

.bd.colored,
.bd.colored *{color: #fff !important; background-color: var(--theme);}
.bd.colored .top .more:before,
.bd.colored .top .more:after{background-color: #fff;}
.bd.colored .list > li{gap: 2.2rem;}
@media (max-width: 1280px){
    .sec4{margin: 0 auto;}
    .bd:nth-child(2){margin-top: 0;}
    .bd{padding: 4rem 30px 5rem;}
    .bd .top .tit{font-size: 2.4rem;}
    .bd .list{min-height: 320px;} 
}
@media (max-width: 1024px){
    .bd{padding: 4rem 15px 5rem;}
    .bd .top .tit{font-size: 2rem;}
    .bd .top .more{width: 1.5rem; height: 1.5rem;}
    .bd .list{padding: 3rem 0 0; gap: 2rem; min-height: 281px;}
    .bd .list > li,
    .bd.colored .list > li{gap: 1.5rem;}
    .bd .list .txt .con{padding: 10px 0 0;}
}
@media (max-width: 860px){
    .sec4{display: block;}
    .sec4 > div{width: 100%;}
}
@media (max-width: 640px){
    .bd{padding: 4rem 15px;}
    .bd .top .sup{font-size: 14px;}
    .bd .top .tit{font-size: 1.5rem;}
    .bd .top .more{top: 1.5rem;}
    .bd .list{padding: 2rem 0 0;  min-height: 207px;}
    .bd .list .date{height: auto;}
    .bd .list .txt .title{font-size: 15px;}
    .bd .list .txt .con{font-size: 14px;}
    .bd .list .type{padding: 0.4rem 0.6rem 0.2rem; font-size: 13px;}
}


/* 섹션 5 : 오시는길 */
.sec5{margin-top: -7.75rem; background-color: #111;}
.sec5 > .img{position: relative;}
.sec5 > .img > img{width: 100%; height: auto; max-width: none;}
.sec5 > .img .pin{position: absolute; bottom: 35%; left: 50.3%; width: 0; height: 0; background: red;}
.sec5 > .img .pin .con{position: absolute; bottom: 46px; left: 0; padding: 0.5rem 1.5rem; width: 260px; background-color: #122133; color: #fff; cursor: pointer; display: block;}
.sec5 > .img .pin .con:before{content: ""; position: absolute; top: 100%; left: 0; display: block; width: 54px; height: 49px; background: url("/assets/site/img/main/location_logo_tail.png") no-repeat; background-size: 100% auto;}

.sec5 > .wrap{margin-top: -40px;}
.sec5 .location{display: flex; justify-content: space-between; padding: 4rem 0 3.3rem 6.25rem; background-color: #122133; color: #fff;}
.sec5 .location .txt{display: flex; align-items: center; gap: 5.4rem;}
.sec5 .location .txt .tit{font-size: 1.875rem; font-weight: 600; flex: 0 0 auto;}
.sec5 .location .txt .tit .sup{font-size: 15px; line-height: 1; padding: 0 0 0.5rem;}
.sec5 .location .txt .address{font-size: 1.125rem; font-weight: 600; flex: 1;}
.sec5 .location .link{display: flex;}
.sec5 .location .link > li{flex: 1; position: relative; padding: 0 4.5rem;}
.sec5 .location .link > li+li:before{content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 85%; background-color: #5a6471;}
.sec5 .location .link > li a{position: relative; display: block; font-weight: 300; font-size: 1.125rem; text-align: center; line-height: 1; padding: 52px 0 0;}
.sec5 .location .link > li a:before{content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 36px; height: 35px; background-size: contain; background-repeat: no-repeat;}
.sec5 .location .link > li:nth-child(1) a:before{background-image: url("/assets/site/img/main/ico_naver.png");}
.sec5 .location .link > li:nth-child(2) a:before{background-image: url("/assets/site/img/main/ico_kakao.png");}
.sec5 .location .link > li:nth-child(3) a:before{background-image: url("/assets/site/img/main/ico_google.png");}
@media (max-width: 1280px){
    .sec5 > .img{aspect-ratio: 2 / 1;}
    .sec5 > .img > img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
    .sec5 .location{padding: 4rem 4rem;}
    .sec5 .location .txt{gap: 4.5vw;}
    .sec5 .location .link > li{padding: 0 3rem;}
    .sec5 .location .link > li:last-child{padding-right: 0;}
}
@media (max-width: 1024px){
    .sec5 > .img{aspect-ratio: 2 / 1.4;}
    .sec5 > .img .pin .con{width: 30vw;}
    .sec5 .location{padding: 3rem 2rem;}
    .sec5 .location .txt .tit{font-size: 1.5rem;}
    .sec5 .location .txt .address{font-size: 1rem;}
    .sec5 .location .link > li{padding: 0 1.5rem;}
    .sec5 .location .link > li a{font-size: 14px; padding: 39px 0 0;}
    .sec5 .location .link > li a:before{width: 27px; height: 26px;}
}
@media (max-width: 860px){
    .sec5 > .img{aspect-ratio: 2 / 1.9;}
}
@media (max-width: 700px){
    .sec5 > .wrap{margin: 0 auto;}
    .sec5 .location{flex-direction: column; padding: 3rem 15px;}
    .sec5 .location .txt{flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0;}
    .sec5 .location .txt .tit{margin: 0 0 1.5rem;}
    .sec5 .location .txt .address{font-size: 13px;}
    .sec5 .location .link{position: absolute; top: 3rem; right: 15px;}
    .sec5 .location .link > li{padding: 0 15px;}
    .sec5 .location .link > li:nth-child(1){padding-left: 0;}
    .sec5 > .img .pin .con{bottom: 26px;}
    .sec5 > .img .pin .con:before{width: 31px; height: 26px;}
}
@media (max-width: 460px){
    .sec5 > .img{aspect-ratio: 2 / 1.9;}
    .sec5 > .img .pin .con{width: 30vw; padding: 0.25rem 0.5rem;}
}


/* css animation */
@keyframes width{
    0%  {width: 0;}
    100%{width: 100%;}
}