@charset "utf-8";

#mkTemplate{position:relative;padding:180px 0 140px;background:#121422}
#mkTemplate .inner{max-width:1306px !important}
#mkTemplate .group-title{display:flex;flex-direction:column;align-items:flex-start !important;gap:52px !important;padding-bottom:90px;color:#fff !important;text-align:left !important}
#mkTemplate .group-title .flex-box{display:flex;align-items:center;justify-content:space-between;width:100%}
#mkTemplate .group-title .flex-box p.desc{font-size:22px;font-weight:500;line-height:1.45;word-break:keep-all}
#mkTemplate .group-title .flex-box .navigation{display:flex;gap:10px}
#mkTemplate .group-title .flex-box .navigation .btn-round{all:unset;display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:100px;border:1px solid rgba(255,255,255,0.3);transition:background-color 0.2s;cursor:pointer}
#mkTemplate .group-title .flex-box .navigation .btn-round svg{transition:stroke 0.2s}
#mkTemplate .group-title .flex-box .navigation .btn-round:hover{background-color:#fff}
#mkTemplate .group-title .flex-box .navigation .btn-round:hover svg{stroke:#111}

#mkTemplate .swiper-container{padding-bottom:62px}
#mkTemplate .swiper-slide{max-width:382px}
#mkTemplate .swiper-slide:hover::before{opacity:1}
#mkTemplate .swiper-slide:nth-child(even){margin-top:92px}
#mkTemplate .swiper-slide .thumb-box{height:493px;border-radius:13px;overflow:hidden}
#mkTemplate .swiper-slide .thumb-box img{width:100%;height:100%;object-fit:cover;object-position:top}
#mkTemplate .swiper-slide .btns{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;top:0;left:0;background-color:rgba(0,0,0,0.6);opacity:0;transition:opacity 0.2s}
#mkTemplate .swiper-slide:hover .btns{opacity:1}
#mkTemplate .swiper-slide .btns > *{display:flex;align-items:center;justify-content:center;width:160px;height:55px;border-radius:100px;font-size:16px;color:#fff}
#mkTemplate .swiper-slide .btns .link-contact{background-color:var(--primary)}
#mkTemplate .swiper-slide .btns .link-preview{gap:28px;border:1px solid #fff;transition:background-color 0.2s, color 0.2s}
#mkTemplate .swiper-slide .btns .link-preview:hover{background-color:#fff;color:#111}
#mkTemplate .group-cont .btn--primary{width:346px;margin:0 auto;color:#fff;border-color:#fff}
#mkTemplate .group-cont .btn--primary:hover{background-color:var(--primary);border-color:var(--primary)}

/* 반응형 [s] */
@media (max-width:1600px){
#mkTemplate{padding:135px 0}
#mkTemplate .group-title{gap:35px !important;padding:0 20px 70px}
#mkTemplate .group-title .flex-box p.desc{font-size:20px}
}
@media (max-width:1400px){
#mkTemplate .swiper-slide{max-width:330px}
#mkTemplate .swiper-slide .btns > *{width:150px;height:50px}
#mkTemplate .swiper-slide .btns .link-preview{gap:10px}
}
@media (max-width:1024px){
#mkTemplate{padding:100px 0}
#mkTemplate .group-title{align-items:center !important;gap:28px !important}
#mkTemplate .group-title h2{text-align:center}
#mkTemplate .group-title .flex-box{flex-direction:column;gap:28px}
#mkTemplate .group-title .flex-box p.desc{font-size:18px;text-align:center}
#mkTemplate .group-title .flex-box .navigation .btn-round{width:55px;height:55px}
#mkTemplate .swiper-slide{max-width:280px}
#mkTemplate .swiper-slide .thumb-box{height:445px}
#mkTemplate .swiper-slide .btns > *{font-size:15px}
#mkTemplate .swiper-slide .btns > * svg{width:22px;height:22px}
#mkTemplate .group-cont .btn--primary{width:310px}
}
@media (max-width:768px){
#mkTemplate{padding:80px 0}
#mkTemplate .group-title{padding:0 20px 50px}
#mkTemplate .group-title h2{white-space:normal !important}
#mkTemplate .group-title .flex-box p.desc{font-size:16px}
#mkTemplate .swiper-slide:nth-child(even){margin-top:0}
#mkTemplate .swiper-slide .thumb-box{height:420px}
#mkTemplate .group-cont .btn--primary{height:54px}
}
@media (max-width:480px){
#mkTemplate{padding:60px 0}
#mkTemplate .group-title{gap:18px !important;padding:0 20px 30px}
#mkTemplate .group-title .flex-box{gap:18px}
#mkTemplate .group-title .flex-box .navigation .btn-round{width:50px;height:50px}
#mkTemplate .group-title .flex-box .navigation .btn-round svg{width:22px;height:22px}
#mkTemplate .swiper-container{padding-bottom:40px}
#mkTemplate .swiper-slide{max-width:300px}
#mkTemplate .swiper-slide .thumb-box{height:410px}
#mkTemplate .swiper-slide .btns > *{width:135px;height:42px}
#mkTemplate .group-cont .btn--primary{width:300px;height:52px}
}
@media (max-width:390px){
#mkTemplate{padding:60px 0}
#mkTemplate .swiper-slide{max-width:260px}
#mkTemplate .swiper-slide .thumb-box{height:380px}
#mkTemplate .group-cont .btn--primary{min-height:50px;margin:0 20px}
}
/* 반응형 [e] */