@charset "UTF-8";

.main-visual-outer{position:relative; margin:0 auto; width:100%; max-width:1900px; border-radius:20px; overflow: hidden;}

.main-visual .swiper-pagination .swiper-pagination-bullet{margin: 0 12px 0 0;width: 14px;height: 14px;background: #fff; opacity: 1;}
.main-visual .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 36px;height: 14px;border-radius: 10px;background-color: #6CAEFF;}
.main-visual .swiper-navigation .swiper-button-next{width: 96px;height: 96px;background-color: rgba(0,0,0,0.5);border-radius: 10px;}
.main-visual .swiper-navigation .swiper-button-next:after{font-size: 0;background: url(../img/main/btn-vi-next.png);width: 30px;height: 50px;}

.swiper-button-next:after, .swiper-button-prev:after { color: #fff;}
.main-visual .swiper-slide .vi-img-box { position: relative; height: 1080px;}
.main-visual .swiper-slide .vi-img-box > img { width: 100%; height: 100%; object-fit: cover;}
.main-visual .swiper-slide .vi-txt-box { position: absolute;top: 50%;left: 50%;padding: 0 0 0 0;width: 100%;max-width: 1712px;transform: translate(-50%, -50%);-ms-transform: translateX(-50%);box-sizing: border-box;text-align: start;height: 340px;padding: 0 16px;font-family: Paperlogy;text-align:center;}
.main-visual .vi-txt-box .txt01{color: #2189AF;margin-bottom: 24px;font-weight: 700;font-size: 92px;line-height: 120%;text-align: center;}
.main-visual .vi-txt-box .txt01 span {display:block;font-size:112px;line-height:120%;color:#05526E;}
.main-visual .vi-txt-box .txt02{color: #fff;font-family: Paperlogy;font-weight: 600;font-size: 32px;line-height: 140%;color: #111;margin:0 0 10px 0;}

.main-visual .control-wrap {position: absolute;bottom: 359px;left: 50%;width: 100%;max-width: 1680px;box-sizing: border-box;transform: translateX(-50%) !important;z-index: 99;display: flex;justify-content: center;align-items: center;text-align:center;gap: 10px;}
.main-visual .swiper-visual-pagination {display:flex;justify-content: center;align-items: center;width: auto !important;}
.main-visual .swiper-pagination-bullet{font-family: Noto Sans KR;font-weight: 700;font-size: 14px;line-height: 100%;text-align: center;width: 30px;height: 30px;background: transparent;display: flex;align-items: center;justify-content: center;border-bottom: 1px solid #222;border-radius: 0;}

.main-visual a.swiper-vi-pause{display: block;background: url('../img/common/ico-pause.png') no-repeat center / contain;width: 8px;height: 10px;cursor: pointer;}
.main-visual a.swiper-vi-play{display: block;background: url('../img/common/ico-play.png') no-repeat center / contain;width: 10px;height: 10px;cursor: pointer;background-size: 10px auto;}
.main-visual .swiper-btn.swiper-pause a.swiper-vi-pause {display: block;}
.main-visual .swiper-btn.swiper-pause a.swiper-vi-play {display: none;}
.main-visual .swiper-btn.swiper-play a.swiper-vi-play {display: block;}
.main-visual .swiper-btn.swiper-play a.swiper-vi-pause {display: none;}

.main-visual .quick-wrap {position: absolute;bottom: 80px;z-index: 111;width: 100%;}
.main-visual .quick-wrap .quick-box {max-width: 1680px;margin: 0 auto;
}
.main-visual .quick-wrap ul {display:flex;flex-wrap: wrap;justify-content: center;align-items: center;gap: 12px 24px;max-width: 1680px;margin: 0 auto;}
.main-visual .quick-wrap ul li {flex:1;background: rgba(110, 5, 32, 0.7);border: 2px solid rgba(255, 255, 255, 0.08);border-radius: 4px;}
.main-visual .quick-wrap ul li:hover{background: rgba(110, 5, 32, 1);}
.main-visual .quick-wrap ul li a {font-family: Paperlogy;font-weight: 500;font-size: 20px;line-height: 150%;color: #fff;padding: 17px;display: flex;text-align: center;align-items: center;justify-content: center;gap: 8px 8px;flex-wrap: wrap;min-width: 200px;box-sizing: border-box;}

@media (min-width:1024px) and (max-width: 1919px) {
.main-visual .vi-txt-box .txt01 {font-size:72px;}
 .main-visual .vi-txt-box .txt01 span {font-size:80px;}
.main-visual .vi-txt-box .txt02 {font-size:30px;}

}

@media screen and (max-width: 1024px) { 
.main-visual .vi-txt-box .txt01 {font-size: 40px;}
  .main-visual .vi-txt-box .txt01 span{font-size:52px;}
.main-visual .vi-txt-box .txt02 {font-size: 20px;}
  .main-visual .swiper-slide .vi-img-box {height: 900px;}
.main-visual .control-wrap {bottom: 350px;}

 .main-visual .quick-wrap {bottom: 20px;}
  .main-visual .quick-wrap ul {gap: 12px 12px;}
 .main-visual .quick-wrap ul li {flex: none;width: calc(50% - 12px);}
 .main-visual .quick-wrap ul li a {min-width: 100%;padding: 10px;font-size: 14px;}

}

@media screen and (max-width: 768px) { 
.main-visual .swiper-slide .vi-img-box {height: 100vh;max-height:700px;}
 .main-visual .control-wrap .swiper-button-prev, 
.main-visual .control-wrap .swiper-button-next {width: 50px;height: 50px;}
.main-visual .control-wrap .swiper-pagination {width: 100%;}

.main-visual .vi-txt-box .txt01 {font-size: 24px;margin-bottom: 10px;}
 .main-visual .vi-txt-box .txt01 span {font-size: 28px;}
.main-visual .vi-txt-box .txt02 {font-size: 18px;margin-bottom: 0;}

.main-visual .swiper-slide .vi-txt-box {height: unset;top: 35%;}
 .main-visual .control-wrap {bottom: 330px;gap: 30px;}
    
}

@media screen and (max-width: 400px) { 
 html[lang="en"] .main-visual .control-wrap {bottom: 335px;}
}