@charset "utf-8";

.page-title { margin-bottom: 0; }
.con-wrap { padding-top: 50px; }

.slide-tab-swiper { margin: 0 auto 60px; padding-bottom: 3px; max-width: 1200px; background: #fff; }
.slide-tab-swiper .swiper-scrollbar { left: 0; width: 100%; height: 4px; }
.slide-tab-swiper .swiper-scrollbar-drag { background: rgba(0,0,0,0.2); }
.slide-tab-swiper .swiper-slide { position: relative; margin: 0 !important; width: 20%; min-width: 150px; }
.slide-tab-swiper.col-3 .swiper-slide { width: 33.33%; }
.slide-tab-swiper.col-4 .swiper-slide { width: 25%; }

.slide-tab-swiper .swiper-slide:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: #ccc; z-index: 3; }
.slide-tab-swiper .slide-tab-item { display: block; position: relative; padding: 20px 0; font-size: 18px; text-align: center; }
.slide-tab-swiper .slide-tab-item:after { content: ""; position: absolute; right: 0; bottom: 0px; width: 0; height: 4px; background: #000; z-index: 150; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; }
.slide-tab-swiper .active-tab .slide-tab-item { cursor: default; font-weight: 700; }
.slide-tab-swiper .active-tab .slide-tab-item:after { width: 100%; }
.is-online .slide-tab-swiper:hover .slide-tab-item:after { width: 0; }
.is-online .slide-tab-swiper .slide-tab-item:hover:after { content: ""; left: 0; right: auto; width: 100%; }
.is-online .slide-tab-swiper .slide-tab-item:focus { color: #2687e2; box-shadow: none; }

body.slide-tab-scrolled .con-wrap { padding-top: 100px; }
body.slide-tab-scrolled .slide-tab-wrap { position: fixed; top: 82px; left: 0; width: 100%; z-index: 800; transition: left 0.45s; }
body.slide-tab-scrolled .slide-tab-swiper { margin: 0 auto; }
body.slide-tab-scrolled.open-sm .slide-tab-wrap { left: 360px; }
body.slide-tab-scrolled .slide-tab-wrap:after { content: ""; position: absolute; bottom: 3px; left: 0; width: 100%; height: 1px; background: #ccc; }

@media all and (max-width: 770px) {
	.slide-tab-swiper .swiper-slide { margin-left: 20px !important; width: auto !important; min-width: 0; }
	.slide-tab-swiper .swiper-slide:after { background: rgba(0,0,0,0.01); }
	.slide-tab-swiper .slide-tab-item { padding: 20px 25px; }
}
@media all and (max-width: 720px) {
	.page-title { min-height: 0; }
	.con-wrap { padding-top: 0; }
}
@media all and (max-width: 640px) {
	body.slide-tab-scrolled .slide-tab-wrap { top: 64px; }
}