@charset "utf-8";


:root {
    --swiperMainvisualHeight : 570px;
}

:root[color-theme='dark'] {
}

@media (max-width: 767px) {
        
    :root {
        --swiperMainvisualHeight : 460px;
    }
    
    :root[color-theme='dark'] {
    }
}


.swiper-mainvisual { width:100%; /*height:var(--swiperMainvisualHeight);*/ position:relative; margin:0 auto; z-index:1; }

.swiper-mainvisual .swiper-slide { width:100%; height:100%; position:relative; background-repeat:no-repeat; background-position:center center; background-size:contain; /*background-color:var(--mainBg);*/ display:flex; justify-content: center; align-items: center; }
.swiper-mainvisual .swiper-slide > img { 
    max-width:100%; height:auto; max-height:100%; display:block; margin:0 auto; /*opacity:0;*/
    -webkit-transform:scale(1.1);
    -moz-transform:scale(1.1);
    -ms-transform:scale(1.1);   
    -o-transform:scale(1.1);
    transform:scale(1.1);
    -webkit-transition:2.9s;
    -moz-transition:2.9s;
    -ms-transition:2.9s;
    -o-transition:2.9s;
    transition:2.9s;
}
.swiper-mainvisual .swiper-slide.swiper-slide-active > img { 
    opacity:1;
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1); 
    transform:scale(1);
}

.swiper-mainvisual.notReady .swiper-slide:nth-child(2) { opacity:0; }


.swiper-mainvisual .swiper-pagination-mainvisual-area { z-index:5; position:absolute; left:0; right:0; bottom:30px; height:16px; width:100%; text-align:center; }
.swiper-mainvisual .swiper-pagination-mainvisual { display:inline-block; position:relative; padding-right:24px; box-sizing:border-box; }
.swiper-mainvisual .swiper-pagination-mainvisual .swiper-pagination-bullet { width:16px; height:16px; border-radius:50%; border:1px solid #74b0ec; margin:0 5px; vertical-align:top; outline:none; background:rgba(255,255,255,1); opacity:1; }
.swiper-mainvisual .swiper-pagination-mainvisual .swiper-pagination-bullet-active { background:rgba(44,64,153,1); }

.stop_btn { position:absolute; right:0px; top:0px; cursor:pointer; }




.mainvisualControlPanel { position:absolute; right:0px; top:0px; transform:translateY(-100%); display:inline-flex; gap:18px; z-index:10; background:rgba(0,0,0,0.7); padding:5px; line-height:26px; padding:11px 16px; }

.mainvisualCnt { font-size:18px; color:rgba(255,255,255,0.7); display:inline-block; min-width:60px; padding-top:3px; line-height:23px; }
.mainvisualCnt > span { color:rgba(255,255,255,1); display:inline-block; min-width:12px; }

.mstop,
.mleft, .mright,
img[role="button"].mleft,
img[role="button"].mright { width:20px; height:26px; line-height:26px; background:none; border:0px; opacity:0.8; transition:all .2s ease-out; text-align:center; }

.mstop:hover, .mleft:hover, .mright:hover,
.mstop:focus, .mleft:focus, .mright:focus,
img[role="button"].mleft:hover, img[role="button"].mright:hover,
img[role="button"].mleft:focus, img[role="button"].mright:focus { opacity:1; }

.mstop > img, .mleft > img, .mright > img { vertical-align:middle; }