@charset "utf-8";

*{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
html, body{margin: 0; padding: 0;;}
header, section, article, nav, aside, main, footer{display: block;}
header:after, section:after, article:after, nav:after, aside:after, main:after, footer:after{content: ""; display: block; clear: both;}
h1, h2,h3, h4, h5, h6, p{margin: 0;}
ul, ol{margin: 0;padding: 0;list-style: none;}
a{text-decoration: none;}

* { margin: 0; padding: 0;}

div.wide.off {
    background: #eef5ff !important;
    padding-bottom: 180px !important;
}
div.wide {
    max-width: 100%;
    overflow: hidden;
}

.main-cnt-wrap {
    padding-bottom: 100px;
}
[data-aos^=fade][data-aos^=fade].aos-animate {
    opacity: 1;
    transform: translateZ(0);
}
[data-aos][data-aos][data-aos-easing=ease], body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease;
}
[data-aos][data-aos][data-aos-duration="500"], body[data-aos-duration="500"] [data-aos] {
    transition-duration: .5s;
}
[data-aos^=fade][data-aos^=fade] {
    opacity: 0;
    transition-property: opacity,transform;
}


[data-aos=fade-up] {
    transform: translate3d(0,100px,0);
}
[data-aos^=fade][data-aos^=fade].aos-animate {
    opacity: 1;
    transform: translateZ(0);
}
[data-aos][data-aos][data-aos-easing=ease], body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease;
}
[data-aos][data-aos][data-aos-duration="500"], body[data-aos-duration="500"] [data-aos] {
    transition-duration: .5s;
}
[data-aos^=fade][data-aos^=fade] {
    opacity: 0;
    transition-property: opacity,transform;
}
[data-aos=fade-up] {
    transform: translate3d(0,100px,0);
}
.course {
/*     margin: 0 -1%; */
}

.course:after {
    content: '';
    clear: both;
    display: block;
}



.offline-slide .swiper-container {
    overflow: visible;
    width: 100%;
    max-width: 1060px;
    height: 450px;
    margin-top: 30px;
}
.swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
}

.course .list {
    position: relative;
    float: left;
    padding: 0 3% 2% 3%;
}
.swiper-container-android .swiper-slide, .swiper-wrapper {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    -o-transition-property: transform;
    transition-property: transform;
    transition-property: transform,-webkit-transform;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
.offline-slide .swiper-slide {
    height: 410px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 3px 4px 12px 0.4px rgb(35 35 35 / 25%);
    opacity: .5;
    transition: all .4s;
}
.swiper-slide {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    -o-transition-property: transform;
    transition-property: transform;
    transition-property: transform,-webkit-transform;
}

.course .list a {
    display: block;
    position: relative;
}
.offline-slide.course .list .thum-box {
    padding-top:210px;
}
.course .list .thum-box {
    position: relative;
    padding-top: 56%;
}

.offline-slide.course .list .thum-box.close:before {
/*     background: rgba(0,0,0,0.4); */
    z-index: 1;
}
.offline-slide.course .list .thum-box:after, .offline-slide.course .list .thum-box.close:before, .offline-slide.course .list .thum-img {
    content: '';
    position: absolute;
    left: 50%;
    top: 20%;
    width: 165px;
    height: 165px;
    border-radius: 50%;
    transform: translateX(-50%);
    transition: background .3s;
}

.offline-slide.course .list .thum-img {
    background-size: auto 100%;
    background-position: center center;
    background-repeat: no-repeat;
}
.offline-slide.course .list .thum-box:after, .offline-slide.course .list .thum-box.close:before, .offline-slide.course .list .thum-img {
    content: '';
    position: absolute;
    left: 50%;
    top: 20%;
    width: 165px;
    height: 165px;
    border-radius: 50%;
    transform: translateX(-50%);
    transition: background .3s;
}
.course .list .thum-img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.offline-slide.course .list .exp {
    padding: 0 8%;
    margin-top: 25px;
    background: transparent;
}
.course .list .exp {
    padding: 5% 6%;
    background-color: #fff;
}
.course .list .exp .state{text-align:center}
.course .list .exp .state > span {
    display: inline-block;
    min-width: 72px;
    height: 27px;
    padding: 0 10px;
    text-align: center;
    background: #6e9ee1;
    color: #fff;
    font-size: 13.5px;
    font-weight: 200;
    line-height: 27px;
    border-radius: 15px;
}
/*.course .list .exp .state > span + span {
    margin-left: 3px;
    background: #aeaeae;
}*/

.tit{	color:#424242}
.state_sub {
    margin: 20px auto 0;
    width:fit-content;
}
.course .list .exp .tit {
    display: block;
    display:inline-block;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
/*     word-wrap: break-word; */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* .offline-slide .swiper-slide.swiper-slide-active .tit p { */
/*     font-size: 20px; */
/* } */

.course .list .exp .txt {
    height: 20px;
    margin-bottom: 5px;
    margin-top: 10px;
    font-size: 15px;
    font-weight: 300;
	color:#424242;
	letter-spacing: -1px;
}

.offline-slide .swiper-slide-active, 
.offline-slide .swiper-slide-prev,
.offline-slide .swiper-slide-next {
    opacity: 1 !important;
}



.offline-slide .swiper-slide-active, .offline-slide .swiper-slide-prev, .offline-slide .swiper-slide-next {
    opacity: 1 !important;
}

/* .offline-slide .swiper-slide.swiper-slide-active .tit {font-size:21px} */

/* .offline-slide .swiper-slide.swiper-slide-active { height: 440px;  margin-top: -10px;} */


.offline-slide .swiper-scrollbar-drag {
    height: 2px !important;
    background: #4594e4 !important;
    opacity: 1 !important;
}
.swiper-scrollbar {
    border-radius: 10px;
    position: relative;
    -ms-touch-action: none;
    background: rgba(0,0,0,.1);
}
.swiper-container .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000;
}

.swiper-container-horizontal>.swiper-scrollbar {
    position: absolute;
    left: 1%;
    bottom: 3px;
    z-index: 50;
    height: 5px;
    width: 98%;
}
.offline-slide .swiper-scrollbar {
    /* width: 80% !important; */
    bottom: -80px !important;
    left: 50% !important;
    height: 2px !important;
    background: #c1d8f1;
    transform: translateX(-50%);
}
.swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: rgba(0,0,0,.5);
    border-radius: 10px;
    left: 0;
    top: 0;
}
	.offline-slide .swiper-slide.swiper-slide-active .exp {padding: 0 6%;    margin-top: 65px;}
	
	.offline-slide .swiper-slide.swiper-slide-active .thum-img {width: 200px;height:200px;top: 18%;}
	.offline-slide .swiper-slide.swiper-slide-active {height:450px;    margin-top: -20px;}
	
	
@media all and (max-width:1080px) {	
	.course .list .exp .tit {font-size: 16px;}
/* 	.offline-slide .swiper-slide.swiper-slide-active .tit { font-size: 20px;} */
}
@media all and (max-width:950px) {	
	.offline-slide .swiper-slide.swiper-slide-active .thum-img { width: 230px;height: 230px; top:14%;}
	.offline-slide .swiper-slide.swiper-slide-active .exp {margin-top: 80px;}
}
@media all and (max-width:900px) {	
	.offline-slide .swiper-scrollbar {bottom: -50px !important;}
	div.wide.off {padding-bottom: 100px !important;}
	.offline-slide .swiper-slide.swiper-slide-active .state_sub {margin-top: 20px;display: inline-flex;flex-direction: column;align-items: flex-start;align-content: center;}
    .offline-slide .swiper-slide.swiper-slide-active .exp { text-align: center;    padding: 0 10px;}
    .offline-slide .swiper-container {margin-top:0}
}

@media all and (max-width:800px) {
	.course .list .exp .txt { margin-top: 18px;font-size: 13px;}
}

@media all and (max-width:622px) {
	.ani_txt_img{width: 75vw;    margin: 20px 0 !important;}
	.bottom_ani_box .circular04 { width: 80px;height: 80px;}
}

@media all and (max-width:500px) {	
	.offline-slide .swiper-slide.swiper-slide-active .thum-img { width: 210px;height: 210px;    top: 17%;}
	.offline-slide .swiper-slide.swiper-slide-active .exp {margin-top: 60px;}
	.offline-slide .swiper-slide.swiper-slide-active { height: 430px;margin-top: -10px;}
	div.wide.off {
    padding-bottom: 50px !important;
	}
	.offline-slide .swiper-scrollbar {
    bottom: -10px !important;
	}
}
@media all and (max-width:426px) {	
	.offline-slide .swiper-container {
	height: 475px;
	}
	.offline-slide .swiper-scrollbar {
    bottom: 0px !important;
	}
}
@media all and (max-width:400px) {	
    .course .list .exp .tit {font-size: 3.5vw;word-break: normal;    display: block;
    width: 100%;
    text-align: left; }
	.course .list .exp .txt {font-size:3vw;}
	.offline-slide .swiper-slide.swiper-slide-active .thum-img { width: 180px;height: 180px;}
	.offline-slide .swiper-slide.swiper-slide-active .exp {margin-top:25px;    padding: 0 5px;}
	.offline-slide .swiper-slide {
	height: 360px;
	margin: auto;
	}
	.offline-slide .swiper-slide.swiper-slide-active { 
	height: 385px;    
	}
	.offline-slide .swiper-container {height:430px}
	.offline-slide .swiper-slide.swiper-slide-active .state_sub {align-content: flex-start}
}
@media all and (max-width:330px) {
	.offline-slide .swiper-slide.swiper-slide-active {
    height: 360px;
	}
	.offline-slide.course .list .thum-box {
    padding-top: 130px;
	}
	.offline-slide .swiper-slide.swiper-slide-active .exp {
    margin-top: 97px;
	}
	.offline-slide.course .list .exp {
    margin-top: 88px;
    }
    .offline-slide .swiper-slide {
    height: 340px;
	}
}

@media all and (max-width:310px) {	

	.offline-slide.course .list .thum-box:after, .offline-slide.course .list .thum-box.close:before, .offline-slide.course .list .thum-img {width: 130px; height: 130px;}
	.offline-slide.course .list .thum-box {padding-top: 170px;}
	.offline-slide .swiper-slide.swiper-slide-active .state_sub {margin-top: 20px;} 
	.offline-slide .swiper-slide.swiper-slide-active {height: 380px;}
    .offline-slide .swiper-slide {height: 290px;}
    .offline-slide .swiper-slide.swiper-slide-active {height: 320px;}
    .course .list .exp .state > span {font-size:10px}
    .offline-slide .swiper-container {height:350px}
    div.wide.off { padding-bottom: 30px !important;}
	.offline-slide.course .list .exp {
    margin-top: 0px;
	}
    .offline-slide .swiper-slide.swiper-slide-active .exp {margin-top: 15px;}

}