@charset "utf-8";

/****************************************************************************************************************************************
layer-popup 시작
*****************************************************************************************************************************************/
.layer-popup {position:absolute; margin:0 auto; padding:15px 15px; width:100%; height: 100%; display:flex; gap:10px; flex-wrap: wrap; justify-content: center; align-items: center;}
.layerPop-list {position: relative; z-index: 9999;}
.layerPop-con {position: relative; margin:0 auto; padding:0; background: #000; border: 5px}
.layerPop-close {position:relative; margin:0; padding:5px 10px; width: 100%; display: flex; justify-content: space-between; align-items: center; background: linear-gradient(0deg, #000000, #000000);}
.layerPop-close > span {font-size: 15px; font-weight: bold; color:#fff; cursor: pointer;}
.layerPop-close > span > svg {font-size: 18px; font-weight: bold;}
.layerPop-close > button {padding:5px 20px; font-size: 15px; font-weight: bold; color:#fff; background: #000; border: none; border-radius: 5px; cursor: pointer;}

@media (hover: hover) {
    .layerPop-close > span:hover {color:#50350e}
    .layerPop-close > button:hover {color:#d8be76;}
}

.pop_contents {position: relative; margin:0 auto; padding:0; text-align: left; }
.pop_contents p {font-size: 13px;}
.pop_contents p img,
.pop_contents img {margin:0 auto; padding:0; width:100%; overflow: hidden;}

.pop_close {position: relative; left:0; right:0; bottom:0; padding:15px 20px; width:100%; text-align: right; background:#000; color:#fff;}
input.popup_checkbox {display: inline-block; margin: 0 5px 2px 0; width: 15px; height: 15px; vertical-align: text-bottom; background: #131620; border-radius:2px;}

@media only screen and (max-width: 1280px) {
    .layer_popup {position: absolute; left: 50%; width:90%;transform: translateX(-50%);margin:50px 5px;}
}

/****************************************************************************************************************************************
Main hero 시작
*****************************************************************************************************************************************/
.swiper-container {width: 100%; background: #000;}
.swiper-slide img {width:100%; opacity: 0.9;}

.swiper-pagination {left:0; right:0;}
.swiper-container-horizontal > .swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {bottom:10px !important;}

.swiper-pagination-bullet {width: 12px; height: 12px; background:rgba(19,22,32,0.7); border-radius: 50%; opacity: 0.7 !important; outline: none;}
.swiper-pagination-bullet-active {background: #131620; opacity: 1 !important}


/****************************************************************************************************************************************
main-con 시작
*****************************************************************************************************************************************/
.main-con {position: relative; margin:0 auto; padding:0 5px; width:1560px; text-align: center;}

/****************************************************************************************************************************************
미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width: 992px){
    .swiper-slide img {height: 230px;}
}/* 미디어쿼리문 끝 */

@media (max-width: 772px){
    .swiper-slide img {height: 200px;}
}/* 미디어쿼리문 끝 */

@media (max-width:1570px) {
    .main-con {width: 100%;}
 }/* 미디어쿼리문 끝 */


@media (max-width:1480px) {
    .caption {width: 100%;}
 }/* 미디어쿼리문 끝 */

@media (max-width:929px) {
    .slide_img > div {background-position: right !important;}
    .caption_inner {text-align: center;}

    .caption_inner > h3 {font-size: 50px;}
    .caption_inner > h4 {font-size: 20px; color:#fff;}
    .caption_inner > p {font-size: 16px; color:#fff;}
    .caption_inner > .btn-play {display: none;}
}/* 미디어쿼리문 끝 */

@media (max-width:700px) {
    .main-hero, .slide {height: 400px;}
}/* 미디어쿼리문 끝 */

@media (max-width:520px) {
    .main-hero, .slide {height: 300px;}

    .caption {margin-top:-25px;}
    .caption_inner > h3 {font-size: 40px;}
    .caption_inner > h4 {font-size: 18px;}
    .caption_inner > p {font-size: 14px; letter-spacing: -1px;}

    .slick-dots {bottom: 10px;}
    .slick-dots li button:before {font-size: 14px;}
}/* 미디어쿼리문 끝 */