/* ===============================================================
    * custom
=============================================================== */
.wrap {padding: 80px 0 100px;}
.ct-head {margin-bottom: 10px;}
.ct-head__tit {font-weight: bold; text-align: center; margin-bottom: 40px;}
.ct-head__tit.kor {font-size: 36px;}
.ct-head__tit.eng {font-family: 'Play', sans-serif; font-size: 50px; letter-spacing: -0.025em; text-transform: uppercase;}

@media (max-width: 820px){
    .wrap {padding: 40px 0 50px;}
    .ct-head__tit {margin-bottom: 30px;}
    .ct-head__tit.kor {font-size: 26px; letter-spacing: -0.025em;}
    .ct-head__tit.eng {font-size: 35px; letter-spacing: -0.025em;}
    .ct-head p {font-size: 11px;}

    .mo-navi {position: relative; text-align: center; margin-bottom: 40px;}
    .navi-head {position: relative; width: 100%; height: 45px; line-height: 42px; border: 2px solid #61848c;}
    .navi-head h3 {font-size: 16px; color: #61848c;}
    .navi-head span {position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 14px; transition: .3s;}
    .navi-list {display: none; position: absolute; left: 0; right: 0; top: 47px; width: 100%; background: #fff; border: 1px solid #61848c; margin-top: 2px; padding: 5px 0;}
    .navi-list li {height: 30px; line-height: 30px; font-size: 13px; color: #999;}
    .mo-navi.js-open .navi-list {display: block;}
}

.custom-wrap {display: flex; justify-content: flex-start; flex-wrap: wrap; margin-left: -5px; margin-right: -5px;}
.custom-box {cursor: pointer; width: calc(100% / 6 - 10px); margin: 0 5px 10px;  border: 1px solid #e0e0e0; }
.custom-box__img {background:#fff; height: 165px; margin: 5px 5px 0;overflow: hidden; text-align: center; display: flex; align-items: center;}
.custom-box__img img {margin: 0 auto; object-fit: cover;}
.custom-box__img img.width {width: 100%;}
.custom-box__img img.height {height: 100%;}
.custom-box__tit {width: 100%; height: 45px; line-height: 45px; font-size: 16px; text-align: center; border-top: 1px solid #e0e0e0; border-bottom: 2px solid #61848c;}
.custom-box__tit h3 {width: 100%; padding: 0 10px; margin: 0 auto; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.custom-box:hover .custom-box__tit {border-top-color: #61848c;}

.custom-modal {display: none; position: fixed; z-index: 999; left: 0; right: 0; top: 0; bottom: 0; background: rgba(34,34,34,.9);}
.custom-slide__wrapper {position: absolute; width: 700px; height: 70%; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.custom-close {z-index: 999; cursor: pointer; position: absolute; right: -40px; top: -40px; font-size: 40px; color: #fff;}
.custom-container {width: 100%; height: 100%;}

.swiper-slide {display: flex; align-items: center; overflow: hidden;}
.swiper-box {width: 100%;}
.custom-modal__img {overflow: hidden; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.custom-modal__img img {margin: 0 auto; object-fit: cover;}
.custom-modal__img img.width {width: 100%;}
.custom-modal__img img.height {height: 100%;}
.custom-modal__tit {margin: 0 auto; height: 50px; line-height: 50px; font-size: 16px; text-align: center; border-top: 1px solid #e0e0e0; border-bottom: 2px solid #61848c; background: #fff;}
.custom-modal__tit h3 {width: 100%; padding: 0 10px; margin: 0 auto; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.custom-btn {cursor: pointer; z-index: 999; position: absolute; width: 100%; top: 50%; transform: translateY(-50%); color: #fff; font-size: 40px;}
.nav-prev {position: absolute; left: calc(50% - 350px); outline: none; }
.nav-next {position: absolute; right: calc(50% - 350px); outline: none;}  
@media (max-width: 1200px){
    .custom-box__tit h3 {font-size: 1.5vw;}
}
@media (max-width: 820px){
    .custom-box {width: calc(50% - 10px);}
    .custom-box__tit {height: 35px; line-height: 1; display: flex; align-items: center; justify-content: center;}
    .custom-box__tit h3 {font-size: 13px; line-height: 17px;}

    .custom-slide__wrapper {width: 280px; height: 90%;}
    .custom-close {font-size: 25px; right: -30px; top: -15px;}
    .swiper-slide.width .custom-modal__img img {width: 100%; height: 100%;}
    .swiper-slide.height .custom-modal__img img {height: 100%; width: 100%;}
    .custom-modal__tit {width: 280px !important; overflow: hidden; height: 40px; line-height: 40px; font-size: 13px;}
    .custom-btn {font-size: 25px;}
    .nav-prev {left: calc(50% - 180px);}
    .nav-next {right: calc(50% - 180px);}  

}