@charset "UTF-8";
/*
.main-visual-wrap {background: url(../img/main/bg-main-visual.jpg) no-repeat center center;position: relative;background-size: cover;}
*/
.main-visual-outer{position:relative; margin:0 auto; width:100%; max-width:1900px; border-radius:20px; overflow: hidden;}

.main-visual .vi-txt-box .txt01{font-size: 24px; line-height: 1.4; color: #fff;font-weight: 500;margin-bottom: 24px;}
.main-visual .vi-txt-box .txt02{font-size: 64px; line-height: 1.2; color: #fff;font-weight: 700;max-width: 1080px;margin-bottom: 64px;}

.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;}

.main-visual .control-wrap {position: absolute;bottom: 402px;left: 50%;width: 100%;max-width: 1712px;box-sizing: border-box;padding: 0 16px;transform: translateX(-50%);z-index: 99;display: flex;justify-content: start;gap: 64px;align-items: center;}
.main-visual .control-wrap .swiper-button-prev,
.main-visual .control-wrap .swiper-button-next {position: relative;width: 64px;height: 64px;border: 0;margin: 0;font-size: 0;cursor: pointer;left: unset;right: unset;top: unset;}
.main-visual .control-wrap .swiper-button-prev {background: url(/_res/chemistry/img/common/ico-vi-left.png) no-repeat center;transition: all .3s ease-in-out;background-size: cover;}
.main-visual .control-wrap .swiper-button-next {background: url(/_res/chemistry/img/common/ico-vi-right.png) no-repeat center;transition: all .3s ease-in-out;background-size: cover;}
.main-visual .control-wrap .swiper-button-prev:after, 
.main-visual .control-wrap .swiper-button-next:after {display: none;}
.main-visual .control-wrap .main-vi-navigation {display: flex;gap: 12px;}
.main-visual .control-wrap .swiper-button-lock {display: block;}

.main-visual .control-wrap .swiper-pagination {position: relative;top: unset;left: unset;right: unset;bottom: unset;text-align: start;width: 640px;display: flex;align-items: center;}
.main-visual .control-wrap .swiper-pagination .swiper-pagination-current,
.main-visual .control-wrap .swiper-pagination .swiper-pagination-total {display: none;}

.main-visual .control-wrap .vi-progress {display: inline-block;width: 100%;height: 2px;background: #fff;transition: all;position: relative;overflow: hidden;box-sizing: border-box;}
.main-visual .control-wrap .vi-progress span {display: block;height: 100%;width: 0;background: #1174FF;animation: visualPasin 5s forwards;}

@keyframes visualPasin {
    0 {width: 0}
    100% {width: 100%}
}

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

@media screen and (max-width: 768px) { 
  .main-visual .swiper-slide .vi-img-box {height: 800px;}
   .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: 18px;}
  .main-visual .vi-txt-box .txt02 {font-size: 38px;margin-bottom: 0;}
  
  .main-visual .swiper-slide .vi-txt-box {height: unset;top: 40%;}
   .main-visual .control-wrap {bottom: 190px;gap: 30px;}
      
}

@media screen and (max-width: 400px) { 

}