
/*pc*/
@media all and (min-width:1024px) {
.msec1 { }
.msec1 .swiper-slide { overflow: hidden; height: 849px }
.msec1 .swiper-slide .slogan { position: absolute; z-index: 10; top: 25%; width: 50%; text-align: center; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1400px; color: #fff; text-align: left }
.msec1 .swiper-slide .slogan .text1 { display: block; position: relative; top: 10px; opacity: 0; font-size: 70px; font-weight: 900; transition: 0.5s 0.5s; font-family: 'Roboto', sans-serif; text-shadow: 0 0 5px #000; letter-spacing:-2px }
.msec1 .swiper-slide .slogan .text2 { display: block; position: relative; top: 10px; opacity: 0; font-size: 70px; font-weight: 900; transition: 0.5s 0.5s; font-family: 'Roboto', sans-serif; text-shadow: 0 0 5px #000; letter-spacing:-2px }
.msec1 .swiper-slide .bg { transform: scale(1.1)/*½ºÄÉÀÏÅ©±â*/; transition: 10s/*½ºÄÉÀÏ½Ã°£*/; width: 100%; height: 849px; background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; }
.msec1 .swiper-slide-active .bg { transform: scale(1) }
.msec1 .swiper-slide-active .bg img { height: 849px; object-fit: cover; }
.msec1 .swiper-slide-active .slogan .text1 { top: 0; opacity: 1 }
.msec1 .swiper-slide-active .slogan .text2 { top: -40px; opacity: 1 }
.msec1 .swiper-slide .slogan p { color: #fff; font-size: 20px; font-weight: normal; position: absolute;}
/*swiper*/

.msec1_warp { width: 100%; max-width: 1400px; position: absolute; top: 50%; left: 50%; transform: translateX(-50%); height: 300px; z-index: 9 }
.swiper-container-horizontal>.swiper-pagination-bullets { right: 10%; top: 50% }
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 10px; display: block }
.swiper-pagination-bullet { width: 8px; height: 8px; background: #fff }
.msec1 .swiper-button-next { left: 50px !important }
.msec1 .swiper-button-next, .msec1 .swiper-button-prev { width: 10px !important; height: 14px !important; background-size: 10px 14px }
.msec1 .swiper-scrollbar { width: 280px !important; background: rgba(255,255,255,0.5); border-radius: 0; height: 3px; position: absolute; left: 10%; top: 45%; }
.msec1 .swiper-scrollbar-drag { background: #de1f26; border-radius: 0; width: 33% !important }
.msec1 .swiper-pagination { top: 33%; color: #fff; font-weight: bold; font-size: 25px; z-index: 8; left:400px; text-align:left; }
.msec1 .swiper-pagination-current { font-size: 36px; padding: 1rem }
.msec1 .swiper-pagination-total { padding: 1rem }
.swiper-progress-bar { position: absolute; width: 280px; display: block; z-index: 1; height: 3px; top: 45%; left: 100px }
.swiper-progress-bar .slide_progress-bar { position: absolute; height: 2px; background: rgba(255,255,255,0.5); width: auto; clear: both; opacity: 0; left: 0; right: 0; }
.swiper-progress-bar .slide_progress-bar:after { position: absolute; top: 0; left: 0; background: #de1f26; height: 100%; width: 0; content: ""; }
.swiper-progress-bar.active .slide_progress-bar { opacity: 1; }
.swiper-progress-bar.animate .slide_progress-bar:after { transition: width linear; transition-delay: unset; width: 100%; transition-duration: 5s; }
}

    

/*mobile*/
@media all and (max-width:1023px) {
.msec1 { }
.msec1 .swiper-slide { overflow: hidden }
.msec1 .swiper-slide .slogan { position: absolute; z-index: 10; top: 50%; transform: translateY(-50%); width: 100%; text-align: center; color: #fff }
.msec1 .swiper-slide .slogan .text1 { display: block; position: relative; top: 10px; opacity: 0; font-size: 2rem; font-weight: 900; transition: 0.5s 0.5s; font-family: 'Roboto', sans-serif; text-shadow: 0 0 5px #000; }
.msec1 .swiper-slide .slogan .text2 { display: block; position: relative; top: 10px; opacity: 0; font-size: 3rem; font-weight: 900; transition: 0.5s 0.5s; font-family: 'Roboto', sans-serif; text-shadow: 0 0 5px #000; line-height: 1 }
.msec1 .swiper-slide .bg { transform: scale(1.1)/*½ºÄÉÀÏÅ©±â*/; transition: 10s/*½ºÄÉÀÏ½Ã°£*/; width: 100%; height: 500px; background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; }
.msec1 .swiper-slide-active .bg { transform: scale(1) }
.msec1 .swiper-slide .bg img{width:100%}
.msec1 .swiper-slide-active .slogan .text1 { top: 0; opacity: 1 }
.msec1 .swiper-slide-active .slogan .text2 { top: 0px; opacity: 1 }
.msec1 .swiper-slide .slogan p { color: #fff; font-size: 1rem; font-weight: normal; padding:1rem 0 }
.msec1 .swiper-slide .slogan p a { display: block; background: url(../images/main/link_bg.png) no-repeat center left; padding: 1em; color: #fff; font-family: 'Roboto', sans-serif; font-weight: bold; text-transform: uppercase; font-size: 15px; letter-spacing: 1px; padding: 2em 0 }
.msec1 .swiper-button-next, .msec1 .swiper-button-prev { display: none }
.msec1_warp { width: 100%; position: absolute; top: 50%; left: 50%; transform: translateX(-50%); height: 300px; z-index: 9 }
.swiper-container-horizontal>.swiper-pagination-bullets { right: 10%; top: 50% }
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 10px; display: block }
.swiper-pagination-bullet { width: 8px; height: 8px; background: #fff }
.msec1 .swiper-button-next { left: 5% !important }
.msec1 .swiper-button-next, .msec1 .swiper-button-prev { width: 10px !important; height: 14px !important; background-size: 10px 14px }
.msec1 .swiper-scrollbar { width: 280px !important; background: rgba(255,255,255,0.5); border-radius: 0; height: 3px; position: absolute; left: 10%; top: 40% }
.msec1 .swiper-scrollbar-drag { background: #de1f26; border-radius: 0 }
.msec1 .swiper-pagination { top: 50%; color: #fff; font-weight: bold; font-size: 25px; width: auto; z-index: 8 }
.msec1 .swiper-pagination-current { font-size: 36px; padding: 1rem }
.msec1 .swiper-pagination-total { padding: 1rem }
.swiper-progress-bar { position: absolute; width: 280px; display: block; z-index: 1; height: 3px; top: 45%; left: 10% }
.swiper-progress-bar .slide_progress-bar { position: absolute; height: 2px; background: rgba(255,255,255,0.5); width: auto; clear: both; opacity: 0; left: 0; right: 0; }
.swiper-progress-bar .slide_progress-bar:after { position: absolute; top: 0; left: 0; background: #de1f26; height: 100%; width: 0; content: ""; }
.swiper-progress-bar.active .slide_progress-bar { opacity: 1; }
.swiper-progress-bar.animate .slide_progress-bar:after { transition: width linear; transition-delay: unset; width: 100%; transition-duration: 5s; }
}
