@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Roboto:wght@100;300;400;500;700;900&display=swap');

* {
    -webkit-overflow-scrolling: touch;
	-webkit-tap-highlight-color: transparent;
}

/* *::-webkit-scrollbar {
	display: block !important;
} */

html.noscroll {
	overflow: hidden;
}

/* .headMenu {
	height: auto;
} */

.guideBar {
	padding: 10px 0;
	transition: all .4s;
	overflow: hidden;
	color: #0037CC;
	background: #D1DBFF;
}

.guideBar p {
	width: 95%;
	position: relative;
	text-align: center;
	margin: 0 auto;
	box-sizing: border-box;
	padding-right: 30px;
}

.guideBar p a {
	color: #003BFF;
	margin-left: 5px;
	display: inline-block;
	vertical-align: baseline;
	text-decoration: underline;
}

.guideBar button {
	width: 30px;
    height: 30px;
    background: url(../../images/newHomePage/close_menu.svg) no-repeat center / 75% auto;
	position: absolute;
    right: -5px;
    top: -5px;
	cursor: pointer;
}

.guideBar.close {
	height: 0;
	padding: 0;
	visibility: hidden;
}

.mainbox {
	width: 1100px;
}

.newMain *,
.newSideBar *,
.newHomePopup * {
    box-sizing: border-box;
	vertical-align: middle;
	line-height: normal;
}

.newMain,
.newSideBar {
	font-family: 'Roboto', 'Noto Sans TC';
	font-weight: 400;
	font-size: 16px;
}

.newMain button,
.newHomePopup button {
	cursor: pointer;
}

.newSideBar {
	width: 367px;
    float: left;
    margin-right: 32px;
}

.personal,
.myNewWords,
.myLevel,
.newSideBar .myLevelNew li {
	background: #fff;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	padding: 20px;
	margin-bottom: 15px;
}

.personal .myFoto {
	width: 90px;
	height: 90px;
	position: relative;
	margin-bottom: 15px;
}

.personal .myFoto > div {
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
}

.personal .myFoto > div img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.personal .myFoto > a {
	position: absolute;
	bottom: 0;
	right: -5px;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	box-shadow: 0 4px 10px rgba(196, 194, 193, .4);
	background: url(../../images/newHomePage/pen.svg) #fff no-repeat center / 15px auto;
}

.personal .userName {
	font-family: 'Noto Sans TC';
	font-weight: 700;
	color: #535251;
	line-height: 22px;
	margin-bottom: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 90%;
}

.personal .userNumber,
.personal .userNumber span {
	font-family: 'Noto Sans TC';
	background: #f0f0f3;
	border-radius: 3px;
	font-size: 14px;
	line-height: 24px;
	height: 24px;
	color: #777;
	padding:0 5px;
	cursor: pointer;
	margin-bottom: 20px;
}

.personal .userPoints {
	display: flex;
    justify-content: center;
	width: 100%;
	margin-bottom: 15px;
}

.personal .userPoints a {
	color: #777;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	margin: 0 5%;
	font-weight: 400;
	transition: color .3s;
}

.personal .userPoints a:hover {
	color: #003BFF;
}

.personal .userPoints label {
	font-family: 'Roboto';
	font-weight: 700;
	font-size: 20px;
	line-height: 28px;
	display: block;
	cursor: pointer;
}

.personal .userPoints a:first-child label::before,
.personal .userPoints a:last-child label::before {
	content: '';
	width: 18px;
	height: 18px;
	background: url(../../images/newBooking/like.svg) no-repeat center / 18px auto;
	display: inline-block;
	vertical-align: -1px;
	margin-right: 3px;
}

.personal .userPoints a:last-child label::before {
	background: url(../../images/newBooking/ticket_icon.svg) no-repeat center / 18px auto;
}

.personal a.timeZone {
	color: #555;
	padding-top: 15px;
	display: flex;
	border-top: 1px solid #f0f0f0;
	width: 100%;
	justify-content: center;
	align-items: center;
}

.personal a.timeZone b {
	font-weight: 300;
	font-size: 12px;
	line-height: 20px;
	color: #555;
	font-family: 'Noto Sans TC';
}

.personal a.timeZone::before {
	content: '';
	width: 16px;
	height: 16px;
	background: url(../../images/newBooking/clock_color_light_gray.svg) no-repeat left center / 16px auto;
	margin-right: 3px;
}

.personal .TimeZoneName {
	margin-right: 10px;
}

.myNewWords,
.myLevel {
	align-items: stretch;
	padding-bottom: 25px;
}

.myNewWords > h4,
.myLevel h4 {
	color: #535251;
	font-weight: 700;
	line-height: 22px;
	margin-bottom: 20px;
	position: relative;
}

.myLevel .level li {
	text-align: center;
	flex: 0;
}

.myLevel .level {
	display: flex;
	justify-content: space-around;
}

.myLevel .level div {
	width: 150px;
	height: 130px;
	border-radius: 20px;
	background: #eef3ff;
	text-align: center;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
	padding: 20px 10px 0;
}

.memberMenu .myLevel .level div {
	width: 130px;
}

.myLevel .level a {
	font-size: 14px;
	color: #777;
	cursor: pointer;
}

.myLevel .level span {
	font-size: 13px;
	color: #777;
	display: inline-block;
	line-height: normal;
}

.myLevel .level p {
	font-size: 15px;
	color: #535251;
	font-weight: 500;
	line-height: 20px;
	min-height: 40px;
}

.myLevel .level b {
	font-size: 34px;
	font-family: 'Roboto';
	font-weight: 700;
	color: #03328d;
	line-height: 32px;
}

.myLevel .level span i {
	font-size: 18px;
    font-style: normal;
    font-weight: 500;
    vertical-align: middle;
	line-height: 32px;
}

.myLevel .level span u {
	font-style: normal;
	display: block;
}

.myLevel .level li:first-child span u {
	line-height: 28px;
    font-size: 14px;
}

.myLevel .level a {
	text-decoration: underline;
}

.myLevel .arrangeCourse {
	padding-top: 10px;
}

.myLevel .arrangeCourse h5 {
	color: #535251;
	font-weight: 500;
	line-height: 24px;
}

.myLevel .arrangeCourse li {
	padding: 20px 0;
	border-bottom: 1px solid #f0f0f3;
}

.myLevel .arrangeCourse li:last-child {
	border: none;
	padding-bottom: 0;
}

.myLevel .arrangeCourse p {
	color: #777;
	font-size: 14px;
	max-width: calc(100% - 150px);
}

.myLevel .arrangeCourse p b {
	width: calc(100% - 45px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
	font-weight: 500;
	font-size: 16px;
	vertical-align: -4px;
    margin-left: 8px;
	color: #535251;
}

.myLevel .arrangeCourse li a {
	display: block;
	position: relative;
}

.myLevel .arrangeCourse li i,
.myNewWords h4 i {
	position: absolute;
	top: calc(50% - 10px);
	right: 0;
	color: #ed4c7c;
	font-size: 14px;
	padding-right: 20px;
	background: url(../../images/newHomePage/arr_right.svg) no-repeat right center / 20px auto;
	display: block;
	font-style: normal;
	height: 20px;
	width: 130px;
    text-align: right;
}

.myNewWords h4 i {
	top: 0;
}

.myNewWords h4 a {
	display: block;
	color: #535251;
}

.myNewWords > ul li {
    color: #333;
    margin-bottom: 20px;
    position: relative;
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-weight: 400;
}

.myNewWords li:last-child {
	margin-bottom: 0;
}

.myNewWords li span {
	color: #777;
    margin-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 20px;
    font-weight: 300;
}

.myNewWords li i {
	display: inline-block;
	width: 22px;
	height: 22px;
	background: url(../../images/newBooking/volume_active.svg) no-repeat center / 22px auto;
	cursor: pointer;
	margin-right: 10px;
	vertical-align: middle;
	flex-shrink: 0;
}

.myNewWords li i.noSound {
	background-image:  url(../../images/newBooking/volume.svg);
	cursor: default;
}

.myNewWords li button {
	width: 16px;
	height: 16px;
	background: url(../../images/newBooking/bookmark_icon.svg) no-repeat center / 16px auto;
	position: absolute;
	top: 3px;
	right: 0;
	cursor: pointer;
}

.myNewWords li button.active {
	background-image: url(../../images/newBooking/bookmark_active_icon.svg);
}
 
.myNewWords > div p {
	font-size: 14px;
	color: #9f9f9f;
	text-align: center;
}

label.copySuccess {
    background: #003BFF;
    color: #fff;
    font-size: 14px;
    line-height: 26px;
    position: fixed;
    top: 80px;
    left: 50%;
    padding: 10px;
    text-align: center;
    border-radius: 4px;
    min-width: 250px;
    display: none;
    z-index: 999;
    -webkit-animation: slide-in-bottom .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-bottom .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

label.copySuccess:before {
    content: '';
    width: 24px;
    height: 24px;
    background: url(../../images/newHomePage/copy_success.svg) no-repeat center / 24px auto;
    display: inline-block;
    margin-right: 10px;
    vertical-align: -6px;
}

label.copySuccess.open {
    display: block;
}

@-webkit-keyframes slide-in-bottom {
    0% {
      -webkit-transform: translateY(-100px) translateX(-50%);
              transform: translateY(-100px) translateX(-50%);
    }
    100% {
      -webkit-transform: translateY(0) translateX(-50%);
              transform: translateY(0) translateX(-50%);
    }
}
@keyframes slide-in-bottom {
    0% {
      -webkit-transform: translateY(-100px) translateX(-50%);
              transform: translateY(-100px) translateX(-50%);
    }
    100% {
      -webkit-transform: translateY(0) translateX(-50%);
              transform: translateY(0) translateX(-50%);
    }
}


.memberMenuBtn {
	width: 40px;
	height: 60px;
	background: url(../../images/newHomePage/icon_mbr.svg) no-repeat center / 25px auto;
	display: none;
	position: absolute;
	top: 0;
    right: 40px;
}

.sideMenuBtn {
	width: 40px;
	height: 60px;
	background: url(../../images/newHomePage/burger.svg) no-repeat center / 25px auto;
	display: none;
	position: absolute;
	top: 0;
    right: 5px;
}

.sideMenu,
.memberMenu {
	position: fixed;
	top: 0;
	right: 0;
	width: 315px;
	background: #fff;
	min-height: 100vh;
	height: 100%;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform .5s ease;
	z-index: 10;
	display: none;
}

.newMain {
	
}

.newMain .eventCourse,
.newMain .storyBookFree,
.newMain .videoCourse,
.newMain .abcBlog {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
	margin-bottom: 15px;
	position: relative;
}

.newMain .eventCourse h4,
.newMain .storyBookFree h4,
.newMain .videoCourse h4,
.newMain .abcBlog h4,
.newMain .classNow h4,
.newMain .classComing h4,
.newMain .classFinished h4,
.newMain .videoCourseList h4 {
	color: #333;
	font-weight: 400;
	font-size: 18px;
	line-height: 22px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
}

.newMain .eventCourse h4 a,
.newMain .storyBookFree h4 a,
.newMain .videoCourse h4 a,
.newMain .abcBlog h4 a,
.newMain .classComing h4 a,
.newMain .classFinished h4 a,
.myNewWords > a {
	margin-left: auto;
	font-weight: 400;
	font-size: 14px;
	line-height: 21px;
	color: #9f9f9f;
	background: url(../../images/newHomePage/arr_right.svg) #fff no-repeat right -5px center / 20px auto;
	padding-right: 20px;
	cursor: pointer;
}

.myNewWords > a {
	margin: 25px 0 0;
	align-self: flex-start;
	line-height: normal;
	font-weight: 300;
	color: #555;
}

.newMain .storyBookFree h4 span,
.newMain .eventVdo h4 span,
.newMain .eventCourse h4 span,
.newMain .videoCourse h4 span,
.newMain .videoCourseList h4 span,
.freeSession .courseListHead > span {
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	color: #EE79EE;
	background: url(../../images/newBooking/tiny_gift_icon.svg) no-repeat left center / 12px auto;
	padding-left: 16px;
	margin-left: 10px;
	vertical-align: middle;
}

.newMain .videoCourse h4 span.unlimitView {
	background-image: url(../../images/newBooking/unlimitedView.svg);
	background-size: 14px auto;
	padding-left: 18px;
}

.freeSession .courseListHead > span {
	line-height: normal;
}

.newMain .eventCourse li {
	width: 200px;
	cursor: pointer;
	position: relative;
	padding-top: 25px;
}

.newMain .eventCourse .imgWrp {
	overflow: hidden;
	border-radius: 4px;
	position: relative;
	height: 0;
	padding-bottom: 75%;
	margin-bottom: 10px;
}

.newMain .eventCourse .imgWrp > div {
	display: none;
}

.newMain .eventCourse .free .imgWrp > div.freeTag {
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	color: #fff;
	border-radius: 0 4px;
	background: #EE79EE;
	font-family: 'Noto Sans TC';
	font-size: 12px;
	z-index: 2;
	padding: 3px 5px;
}

.newMain .eventCourse .corporate .imgWrp > div.corpTag {
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	color: #fff;
	border-radius: 0 4px;
	background: #112F82;
	font-family: 'Noto Sans TC';
	font-size: 12px;
	z-index: 2;
	padding: 3px 5px;
}

.newMain .eventCourse .imgWrp img,
.newMain .storyBookFree li img,
.newMain .videoCourse li img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.newMain .eventCourse li label {
	position: absolute;
	top: 0;
	left: 0;
	color: #9aa9cf;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}

.newMain .eventCourse li span {
	display: block;
	font-size: 14px;
	color: #777;
	background: url(../../images/newHomePage/clock.svg) no-repeat left center / 18px auto;
	padding-left: 25px;
	margin-bottom: 5px;
	font-family: 'Noto Sans TC';
	position: relative;
}

/*.newMain .eventCourse li.free span:after,*/
.courseCard li.free .courseTitle h3:before,
.clasSchedule .courseListWrp li.free .courseType:before {
	content: 'FREE';
	padding: 3px 5px;
	background: transparent;
	border-radius: 4px;
	font-family: 'Roboto';
	font-size: 12px;
    color: #EE79EE;
    display: inline-block;
    position: absolute;
    top: -2px;
	border: 1px solid #EE79EE;
	font-weight: 400;
	margin-left: 6px;
	line-height: normal;
}

.courseCard li.free .courseTitle h3:before,
.clasSchedule .courseListWrp li.free .courseType:before {
	position: static;
    margin: 0 5px 0 0;
	line-height: normal;
}

.newMain .eventCourse li p,
.newMain .videoCourse li p {
	font-size: 14px;
	line-height: 20px;
	color: #535251;
	margin-bottom: 10px;
	text-overflow:ellipsis;
	overflow:hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	min-height: 40px;
}

.newMain .eventCourse li a {
	border: 1px solid #ddd;
	border-radius: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 35px;
	color: #777;
	font-size: 14px;
}

.newMain .swiper .swp,
.choosePeriod .swp {
	position: relative;
}

.bookingSelectNew .choosePeriod .swp {
	overflow: hidden;
}

.newMain .swiper-button-next:after, 
.newMain .swiper-button-prev:after {
	content: none;
}

.newMain .eventCourse .swiper-button-next,
.newMain .eventCourse .swiper-button-prev,
.newMain .storyBookFree .swiper-button-next,
.newMain .storyBookFree .swiper-button-prev,
.newMain .videoCourse .swiper-button-next,
.newMain .videoCourse .swiper-button-prev {
	height: 40px;
	width: 40px;
	border-radius: 50%;
	border: 1px solid #ddd;
}

.newMain .eventCourse .swiper-button-next,
.newMain .storyBookFree .swiper-button-next,
.newMain .videoCourse .swiper-button-next {
	background: url(../../images/newHomePage/arr_right.svg) #fff no-repeat center / 20px auto;
	right: 0;
}

.newMain .eventCourse .swiper-button-prev,
.newMain .storyBookFree .swiper-button-prev,
.newMain .videoCourse .swiper-button-prev {
	background: url(../../images/newHomePage/arr_left.svg) #fff no-repeat center / 20px auto;
	left: 0;
}

.newMain .eventCourse .swiper-button-next.swiper-button-disabled,
.newMain .eventCourse .swiper-button-prev.swiper-button-disabled,
.newMain .storyBookFree .swiper-button-next.swiper-button-disabled,
.newMain .storyBookFree .swiper-button-prev.swiper-button-disabled,
.newMain .videoCourse .swiper-button-next.swiper-button-disabled,
.newMain .videoCourse .swiper-button-prev.swiper-button-disabled {
	opacity: 0;
}

.newMain .storyBookFree li {
	width: 165px;
	cursor: pointer;
}

.newMain .storyBookFree li > div,
.newMain .videoCourse li > div {
	border-radius: 4px;
	position: relative;
	height: 0;
	padding-bottom: 133.5%;
	overflow: hidden;
}

.newMain .newVideoClassContent .videoCourse li {
	width: 230px;
	cursor: pointer;
}

.newMain .videoCourse li > div {
	padding-bottom: 75%;
	margin-bottom: 10px;
}

.newMain .videoCourse li p {
	font-family: 'Noto Sans TC';
	padding: 0 5px;
}

.startBanner {
	background-color: #fff;
	border-radius: 4px;
	padding: 20px;
}

.startBannerWrp {
	padding: 20px 30px;
	border-radius: 4px;
	background: #EDF1FF;
	display: flex;
	justify-content: space-between;
}

.startBanner.congratsBg {
	background-image: url(../../images/newHomePage/abc_ill_corner.png), url(../../images/newHomePage/abc_ill2.png);
	background-position: left top, right 0 bottom 39px;
}

.startBanner.renewBg {
	background-image: url(../../images/newHomePage/abc_ill_corner.png), url(../../images/newHomePage/abc_ill3.png);
}

.startBanner h4,
.newMain .freeBooking > h4 {
	font-weight: 400;
    line-height: normal;
    color: #080808;
    margin: 0 0 15px;
    padding-left: 26px;
	font-size: 18px;
}

.startBanner.giftBg h4,
.newMain .freeBooking > h4,
.startBanner.congratsBg h4 {
	background: url(../../images/newBooking/gift_icon.svg) no-repeat left center / 20px auto;
}

.startBanner.goPlanBg h4,
.startBanner.renewBg h4,
.startBanner.pastBg h4 {
	background: url(../../images/newHomePage/abc_arm.svg) no-repeat left center / 20px auto;
}

.newMain .freeBooking > h4 {
	margin-top: 0;
}

.startBanner b {
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	color: #0037CC;
	margin-bottom: 3px;
	display: block;
}

.startBanner strong {
	font-weight: 400;
	color: #333;
	font-size: 16px;
	max-width: 315px;
    display: block;
}

.startBanner strong span {
	font-weight: 700;
	font-size: 20px;
	line-height: 28px;
	color: #003BFF;
	vertical-align: baseline;
    margin: 0 5px 5px;
	font-family: Roboto;
}

.startBanner p,
.startBanner.renewBg > strong,
.startBanner.pastBg > strong {
	color: #555;
	font-size: 14px;
}

.startBanner.renewBg > strong {
	margin-bottom: 0;
}

.startBannerWrp .btnWrp {
	display: flex;
	align-items: flex-end;
	flex-shrink: 0;
}

.startBanner .btnWrp a,
.newMain .classComingWrp.ready button,
.newMain .classComingWrp.bookNow button {
	background: #003BFF;
	border: 1px solid #003BFF;
	border-radius: 20px;
	color: #fff;
	min-width: 120px;
	padding: 8px 15px;
	font-size: 14px;
	margin-left: 15px;
	transition: background .3s, border .3s;
	text-align: center;
}

.startBanner .btnWrp a.wBtn {
	border-color: #fff;
	background: #fff;
	color: #777;
	transition: color .3s;
}

.startBanner .btnWrp a:hover {
	background: #112F82;
	border-color: #112F82;
}

.startBanner .btnWrp a.wBtn:hover {
	border-color: #fff;
	background: #fff;
	color: #112F82;
}

.newMain .freeBooking {
	border-radius: 20px;
	margin-bottom: 15px;
	padding: 20px;
	background: #fff;
}

.newMain .freeBooking > div {
	background: #f0eeeb;
	border-radius: 12px;
	padding: 20px 20px 15px;
	position: relative;
}

.newMain .freeBooking .courseTitle,
.newMain .classComing .courseTitle,
.newMain .eventVdoList .courseTitle {
	padding-left: 180px;
}

.newMain .eventVdoList .courseTitle {
	padding-left: 215px;
}

.newMain .classComing .courseTitle,
.courseCard .courseTitle {
	cursor: pointer;
}

.newMain .freeBooking .courseTitle h5,
.newMain .classComing .courseTitle h5,
.newMain .eventVdoList .courseTitle h5 {
	font-weight: bold;
	font-size: 16px;
	margin-bottom: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	position: relative;
	width: 100%;
	line-height: 28px;
}

.newMain .eventVdoList .courseTitle h5 {
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	width: calc( 100% - 200px);
	padding-top: 0;
}

.newMain .freeBooking .courseImg,
.newMain .classComing .courseImg,
.newMain .classFinished .courseImg,
.newMain .abcBlog .courseImg,
.newMain .eventVdoList .courseImg {
	width: 165px;
	float: left;
	margin-bottom: 15px;
}

.newMain .classFinished .courseImg {
	width: 100px;
}

.newMain .abcBlog .courseImg {
	width: 130px;
	margin-bottom: 0;
	flex-shrink: 0;
}

.newMain .eventVdoList .courseImg {
	width: 200px;
	margin-bottom: 0;
}

.newMain .classComing .courseImg {
	cursor: pointer;
}

.newMain .freeBooking .courseImg div,
.newMain .classComing .courseImg div,
.newMain .classFinished .courseImg div,
.newMain .abcBlog .courseImg div,
.newMain .eventVdoList .courseImg div {
	height: 0;
	padding-bottom: 75%;
	border-radius: 4px;
	overflow: hidden;
	position: relative;
}

.newMain .eventVdoList .courseImg div {
	padding-bottom: 55%;
}

.newMain .classFinished .courseImg div,
.newMain .abcBlog .courseImg div {
	border-radius: 4px;
}

.newMain .freeBooking .courseImg img,
.newMain .classComing .courseImg img,
.newMain .classFinished .courseImg img,
.newMain .eventVdoList .courseImg img,
.newMain .abcBlog .courseImg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.newMain .freeBooking .courseTitle p,
.newMain .classComing .courseTitle p,
.newMain .eventVdoList .courseTitle p {
	font-size: 16px;
	color: #555;
	margin-bottom: 5px;
	padding: 2px 0 2px 28px;
	white-space: nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
	line-height: normal;
}

.newMain .eventVdoList .courseTitle p {
	margin-bottom: 0;
}

.newMain .freeBooking .courseTitle p b,
.newMain .classComing .courseTitle p b,
.newMain .eventVdoList .courseTitle p b {
	vertical-align: baseline;
}

.newMain .freeBooking .courseTitle .courseTime,
.newMain .classComing .courseTitle .courseTime,
.newMain .eventVdoList .courseTitle .courseTime {
	background: url(../../images/newHomePage/clock.svg) no-repeat left  center /  18px auto;
}

.newMain .freeBooking .courseTitle .courseTeacher,
.newMain .classComing .courseTitle .courseTeacher,
.newMain .eventVdoList .courseTitle .courseTeacher {
	background: url(../../images/newHomePage/teacher_color_blue_gray.svg) no-repeat left center /  18px auto;
}

.newMain .freeBooking .courseTitle .materialTitle,
.newMain .classComing .courseTitle .materialTitle {
	background: url(../../images/newHomePage/book_color_blue_gray.svg) no-repeat left center /  18px auto;
}

.newMain .freeBooking .courseTitle h5 span,
.newMain .classComing .courseTitle h5 span {
	background-position: left center;
	background-size: auto 90%;
	background-repeat: no-repeat;
	padding-left: 20px;
	font-size: 14px;
	position: absolute;
	right: 0;
	top: 5px;
}

.newMain .freeBooking .courseTitle span.showUp {
	background-image: url(../../images/newHomePage/correct_with_circle.svg);
	color: #5adaba;
}

.newMain .freeBooking .courseTitle span.noShow {
	background-image: url(../../images/newHomePage/wrong_with_circle.svg);
	color: #ff82a7;
}

.newMain .freeBooking .courseBtn {
	clear: both;
	border-top: 1px solid #e2e2e2;
    padding-top: 15px;
    display: flex;
    justify-content: flex-end;
	position: relative;
}

.newMain .freeBooking .courseTip,
.newMain .startBanner .courseTip {
	background: #D1DBFF;
    padding: 8px 20px;
    color: #080808;
    font-size: 14px;
    border-radius: 0 0 4px 4px;
    font-weight: 300;
}

.newMain .freeBooking .courseTip a,
.newMain .startBanner .courseTip a {
	font-size: 14px;
	font-weight: 400;
	vertical-align: baseline;
	color: #0037CC;
	margin-left: 6px;
	display: inline-flex;
    align-items: center;
}

.newMain .startBanner .courseTip a::after {
	content: '';
	width: 20px;
	height: 20px;
	background: url(../../images/newBooking/arrow_left.svg) no-repeat center / 20px auto;
	margin-left: 4px;
}

.newMain .freeBooking .intoClass.ready {
	background: #03328d;
	box-shadow: 0 4px 10px rgba(3, 50, 141, .2);
	color: #fff;
	transition: box-shadow .3s;
	min-width: 48%;
}

.newMain .freeBooking .intoClass.ready:hover {
	box-shadow: none;
}

.teacherTime label {
	color: #fff;
    font-size: 14px;
    padding: 3px 10px;
    border-radius: 4px;
    margin-right: 5px;
    font-weight: 400;
}

.consultantSelectPopup .teacherTime label {
	vertical-align: middle;
}

.consultantSelectPopup .teacherTime label {
	vertical-align: middle;
}

.newMain .courseTitle label.color1,
.teacherTime label.color1,
.bookingResult .bookingResultList label.color1,
.classTypeBlock .courseType .title span.color1,
.newMain .courseTitle label.color15,
.teacherTime label.color15,
.bookingResult .bookingResultList label.color15,
.classTypeBlock .courseType .title span.color15,
.newMain .courseTitle label.color16,
.teacherTime label.color16,
.bookingResult .bookingResultList label.color16,
.classTypeBlock .courseType .title span.color16,
.newMain .courseTitle label.color17,
.teacherTime label.color17,
.bookingResult .bookingResultList label.color17,
.classTypeBlock .courseType .title span.color17 {
	/* background: #eef3ff;	
	border: 1px solid #c5d0ed;
	color: #112f82; */
	background: #eef3ff;	
	border: 1px solid #c5d0ed;
	color: #112f82;
}

.newMain .courseTitle label.color2,
.teacherTime label.color2,
.bookingResult .bookingResultList label.color2,
.classTypeBlock .courseType .title span.color2,
.newMain .courseTitle label.color5,
.teacherTime label.color5,
.bookingResult .bookingResultList label.color5,
.classTypeBlock .courseType .title span.color5,
.newMain .courseTitle label.color6,
.teacherTime label.color6,
.bookingResult .bookingResultList label.color6,
.classTypeBlock .courseType .title span.color6,
.newMain .courseTitle label.color14,
.teacherTime label.color14,
.bookingResult .bookingResultList label.color14,
.classTypeBlock .courseType .title span.color14 {
	/* background: #fff4f8;
	border: 1px solid #ffbcd0;
	color: #ed4c7c; */
	background: #eef3ff;	
	border: 1px solid #c5d0ed;
	color: #112f82;
}

.newMain .courseTitle label.color7,
.teacherTime label.color7,
.bookingResult .bookingResultList label.color7,
.classTypeBlock .courseType .title span.color7,
.newMain .courseTitle label.color11,
.teacherTime label.color11,
.bookingResult .bookingResultList label.color11,
.classTypeBlock .courseType .title span.color11,
.newMain .courseTitle label.color13,
.teacherTime label.color13,
.bookingResult .bookingResultList label.color13,
.classTypeBlock .courseType .title span.color13 {
	/* background: #eef3ff;	
	border: 1px solid #c5d0ed;
	color: #112f82; */
	background: #eef3ff;	
	border: 1px solid #c5d0ed;
	color: #112f82;
}

.newMain .courseTitle label.color10,
.teacherTime label.color10,
.bookingResult .bookingResultList label.color10,
.classTypeBlock .courseType .title span.color10,
.newMain .courseTitle label.color12,
.teacherTime label.color12,
.bookingResult .bookingResultList label.color12,
.classTypeBlock .courseType .title span.color12 {
	/* background: #e0ddd7;
	color: #535251; */
	background: #eef3ff;	
	border: 1px solid #c5d0ed;
	color: #112f82;
}

.newMain .courseTitle label.color3,
.teacherTime label.color3,
.bookingResult .bookingResultList label.color3,
.classTypeBlock .courseType .title span.color3,
.newMain .courseTitle label.color4,
.teacherTime label.color4,
.bookingResult .bookingResultList label.color4,
.classTypeBlock .courseType .title span.color4,
.newMain .courseTitle label.color8,
.teacherTime label.color8,
.bookingResult .bookingResultList label.color8,
.classTypeBlock .courseType .title span.color8,
.newMain .courseTitle label.color9,
.teacherTime label.color9,
.bookingResult .bookingResultList label.color9,
.classTypeBlock .courseType .title span.color9 {
	/* background: #eeeffd;
	border: 1px solid #c0c4ff;
	color: #5a64f2; */
	background: #eef3ff;	
	border: 1px solid #c5d0ed;
	color: #112f82;
}

.newHomePopup {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	min-height: 100%;
	background: rgba(255, 255, 255, .8);
	z-index: 99999999;
	overflow-y: scroll;
	display: none;
}

.newHomePopup.open {
	display: flex;
	justify-content: center;
	align-items: center;
}

.newHomePopup.open.overflow {
	display: block;
	padding: 60px 0;
	box-sizing: border-box;
}

.newHomePopup .changeCourseTime,
.newHomePopup .searchConsultant {
	width: 100%;
	max-width: 600px;
	border-radius: 20px;
	box-shadow: 0 4px 10px 0 rgba(196, 194, 193, .4);
	background: #fff;
	margin: -50px auto 0;
	padding: 40px;
	text-align: center;
	overflow-x: hidden;
	position: relative;
	display: none;
}

.newHomePopup.open.overflow .changeCourseTime,
.newHomePopup.open.overflow .searchConsultant  {
	margin-top: 0;
}

.newHomePopup .closePopup {
	box-shadow: 0 4px 10px rgba(196, 194, 193, .4);
	background-size: 20px auto;
	top: 10px;
    right: 10px;
}

.newHomePopup .changeCourseTime > h4 {
	color: #535251;
	font-weight: 700;
	font-size: 18px;
	line-height: 22px;
	margin-bottom: 5px;
}

.newHomePopup .changeCourseTime > span {
	color: #535251;
	font-size: 14px;
	line-height: 20px;
	display: block;
}

.newHomePopup .changeCourseTime > b {
	color: #535251;
	font-size: 14px;
	line-height: 20px;
	font-weight: normal;
	background: #eef3ff;
	display: inline-block;
	padding: 3px 5px 0;
	border-radius: 3px;
	margin-bottom: 5px;
}

.newHomePopup .changeCourseTime .courseTimeWrp {
	padding: 20px;
	background: #eef3ff;
	border-radius: 16px;
	margin: 10px auto 20px;
}

.newHomePopup .chooseWeekWrp button {
	width: 40px;
	height: 40px;
}

.newHomePopup .chooseWeekWrp button:first-of-type {
	background: url(../../images/newHomePage/arr_left_blue.svg) no-repeat center / 18px auto;
}

.newHomePopup .chooseWeekWrp button:last-of-type {
	background: url(../../images/newHomePage/arr_right_blue.svg) no-repeat center / 18px auto;
}

.newHomePopup .chooseWeek {
	display: flex;
	justify-content: space-between;
	width: calc(100% - 80px);
	margin: 5px auto 20px;
	z-index: 2;
	position: relative;
}

.newHomePopup .chooseWeek li {
	font-size: 14px;
	color: #777;
}

.newHomePopup .chooseWeek label {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 16px;
	font-family: 'Roboto';
	color: #777;
	background: #fff;
	border-radius: 50%;
	height: 28px;
	width: 28px;
	margin-top: 10px;
	cursor: pointer;
}

.newHomePopup .chooseWeek li.disable label {
	background: transparent;
	color: #c4c2c1;
}

.newHomePopup .chooseWeek li.active label {
	background: #03328d;
	color: #fff;
}

.newHomePopup .chooseWeekWrp {
	position: absolute;
	top: 32px;
	left: 2%;
	width: 96%;
}

.newHomePopup .courseTimeWrp {
	position: relative;
}

.newHomePopup .chooseWeekWrp span {
	display: none;
}

.newHomePopup .chooseWeekWrp button:first-of-type {
	float: left;
}

.newHomePopup .chooseWeekWrp button:last-of-type {
	float: right;
}

.newHomePopup .choosePeriod {
	border-top: 1px solid #c5d0ed;
	position: relative;
}

.newHomePopup .choosePeriod ul {
	padding: 20px 0;
}

.newHomePopup .choosePeriod li {
	min-width: 18%;
	width: auto;
	color: #535251;
	padding: 6px 10px;
	cursor: pointer;
}

.newHomePopup .choosePeriod li.disable {
	color: #c4c2c1;
	cursor: default;
}

.newHomePopup .choosePeriod li.active {
	color: #fff;
	border-radius: 8px;
	background: #03328d;
	box-shadow: 0 4px 10px rgba(3, 50, 141, .2);
	cursor: default;
}

.newHomePopup .chooseTime {
	display: flex;
	flex-wrap: wrap;
}

.newHomePopup .chooseTime li {
	flex-basis: calc((100% - 36px) / 6);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #fff;
	border-radius: 8px;
	color: #777;
	padding: 6px 0;
	margin: 5px 3px;
	cursor: pointer;
	height: 54px;
}

.newHomePopup .chooseTime li label {
	font-size: 14px;
	color: #777;
}

.newHomePopup .chooseTime li.booked {
	border: 1px solid #c5d0ed;
	background: transparent;
	cursor: default;
}

.newHomePopup .chooseTime li.disable {
	background: rgba(237, 237, 237, .5);
	color: #c4c2c1;
	cursor: default;
}

.newHomePopup .chooseTime li.disable label {
	color: #c4c2c1;
}

.newHomePopup .chooseTime li.active {
	color: #fff;
	background: #03328d;
	box-shadow: 0 4px 10px rgba(3, 50, 141, 0.2);
	position: relative;
}

.newHomePopup .chooseTime li.active::after {
	content: '';
	position: absolute;
	top: 4px;
	right: 4px;
	width: 12px;
	height: 12px;
	background: url(../../images/newHomePage/cancel_icon.svg) no-repeat center / 100% auto;
}

.newHomePopup .changeTimeBtn {
	margin-bottom: 20px;
}

.newHomePopup .changeTimeBtn button {
	background: #fff;
	box-shadow: 0 4px 10px rgba(196, 194, 193, .4);
	border-radius: 30px;
	font-size: 14px;
	color: #777;
	padding: 8px;
	width: 100px;
	margin: 0 5px;
}

.newHomePopup .changeTimeBtn button.confirm {
	color: #fff;
	background: #03328d;
	opacity: .5;
	transition: opacity .4s;
}

.newHomePopup .changeTimeBtn button.confirm.active {
	box-shadow: 0 4px 10px rgba(3, 50, 141, .2);
	opacity: 1;
} 

.newHomePopup .changeTimeTip {
	font-size: 14px;
	color: #777;
}

.choosePeriod .swiper-button-next:after,
.choosePeriod .swiper-button-prev:after {
	content: none;
}

.choosePeriod .swiper-button-next.swiper-button-disabled, 
.choosePeriod .swiper-button-prev.swiper-button-disabled,
.eventVdo .vdoFilter .swiper-button-next.swiper-button-disabled,
.eventVdo .vdoFilter .swiper-button-prev.swiper-button-disabled {
    opacity: 0;
}

.choosePeriod .swiper-button-next,
.eventVdo .vdoFilter .swiper-button-next {
	right: -10px;
    width: 60px;
    background-image: url(../../images/newHomePage/arr_right_blue.svg), url(../../images/newHomePage/mask_right.png);
    background-repeat: no-repeat, no-repeat;
    background-position: right center, right center;
    background-size: 18px auto, 100% auto;
}

.eventVdo .vdoFilter .swiper-button-next {
    background-image: url(../../images/newHomePage/arr_right_blue.svg), url(../../images/newHomePage/mask_right2.png);
	background-size: 20px auto, 60px auto;
}

.choosePeriod .swiper-button-prev,
.eventVdo .vdoFilter .swiper-button-prev {
	left: -10px;
    width: 60px;
    background: url(../../images/newBooking/mask_right4.png) no-repeat left center / 100% auto;
}

.eventVdo .vdoFilter .swiper-button-prev {
	left: 40px;
	background-image: url(../../images/newHomePage/arr_left_blue.svg), url(../../images/newHomePage/mask_left2.png);
	background-size: 20px auto, 60px auto;
}

.newHomePopup .searchConsultant button.copy {
    background: #fff;
    padding: 19px 20px 25px;
    cursor: pointer;
    border: none;
    min-width: 200px;
	border-radius: 8px;
}

.newHomePopup .searchConsultant button.copy p {
    font-weight: 900;
    font-size: 28px;
    line-height: 42px;
    color: #03328d;
    margin-bottom: 3px;
}

.newHomePopup .searchConsultant button.copy span {
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    color: #777;
    display: inline-block;
    background: url(../../images/newHomePage/copy.svg) no-repeat center left / 24px auto;
    padding-left: 25px;
}

.newHomePopup .searchConsultant > h4 {
	font-weight: 700;
	font-size: 18px;
	line-height: 22px;
	color: #535251;
	padding: 0 30px;
}

.newHomePopup .searchConsultant .stepOne,
.newHomePopup .searchConsultant .stepTwo {
	background: #f0f0f3;
	margin-top: 10px;
	padding: 20px;
}

.newHomePopup .searchConsultant > div > p {
	line-height: 24px;
	font-size: 16px;
	color: #777;
}

.newHomePopup .searchConsultant .qrcodeImg {
	display: flex;
	justify-content: center;
}

.newHomePopup .searchConsultant .qrcodeImg li > div {
    width: 160px;
    height: 160px;
    margin: 10px auto;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 8px;
}

.newHomePopup .searchConsultant .qrcodeImg li > div img,
.newHomePopup .searchConsultant .qrcodeImg li > div canvas {
	width: 135px;
}

.newHomePopup .searchConsultant .qrcodeImg li {
	margin: 0 10px;
}

.newHomePopup .searchConsultant .qrcodeImg li button {
    border: none;
    padding: 10px 0;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
    border-radius: 30px;
	width: 150px;
    text-indent: 10px;
}

.newHomePopup .searchConsultant .qrcodeImg li button.line {
    background: #00c44a;
}

.newHomePopup .searchConsultant .qrcodeImg li button.wapp {
    background: #29a71a;
}

.newHomePopup .searchConsultant .qrcodeImg li button:after {
    content: '';
    width: 20px;
    height: 20px;
    background: url(../../images/newHomePage/arr_right_white.svg) no-repeat center / 100% auto;
    display: inline-block;
    vertical-align: -4px;
    margin-left: 3px;
}

.newHomePopup .searchConsultant .stepTwo > span {
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	color: #535251;
	display: block;
	margin: 20px auto 5px;
}

.newMain .operateQuick {
	border-radius: 8px;
    margin-bottom: 35px;
    background: #fff;
}

.newMain .operateQuick > div {
	border-top: 1px solid #f0f0f3;
}

.newMain .operateQuick > div:first-child {
	border: none;
}

.newMain .classNow,
.newMain .classComing,
.newMain .classFinished {
	padding: 20px;
}

.newMain .classFinished ul {
	display: flex;
	padding: 0 20px;
}

.newMain .classFinished li,
.newMain .abcBlog li {
	height: 80px;
	flex: 1 0 50%;
	cursor: pointer;
}

.newMain .classFinished li p,
.newMain .abcBlog li p {
	font-size: 14px;
	line-height: 20px;
	color: #777;
}

.newMain .abcBlog li p {
	color: #535251;
}

.newMain .classFinished li p:last-of-type,
.newMain .abcBlog li p {
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	padding: 0 15px;
}

.newMain .abcBlog li p {
	-webkit-line-clamp: 3;
}

.newMain .classFinished li p:first-of-type {
	margin-bottom: 10px;
	padding-left: 112px;
}

.newMain .classFinished li p:first-of-type::before {
	content: '';
	width: 18px;
	height: 18px;
	background: url(../../images/newHomePage/clock.svg) no-repeat center / 18px auto;
	display: inline-block;
    vertical-align: -5px;
    margin-right: 5px;
}

.newMain .classNow h4 span {
	margin-left: auto;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: #9f9f9f;
	width: calc(100% - 270px);
    text-align: right;
}

.newMain .classNow .classNowWrp,
.goClassNowPopup .classNowWrp {
	padding: 20px;
	background: #EDF1FF;
	border-radius: 4px;
	position: relative;
}

.newMain .classNow .classNowWrp p b,
.startBanner p b,
.goClassNowPopup .classNowWrp p b {
	font-weight: 400;
	color: #777;
	vertical-align: baseline;
	display: inline-block;
	margin-right: 15px;
	font-size: 14px;
}

.newMain .classNow .classNowWrp p:first-child,
.goClassNowPopup .classNowWrp p:first-child {
	margin-bottom: 10px;
}

.newMain .classNow .classNowWrp p span,
.goClassNowPopup .classNowWrp p span {
	font-size: 16px;
	color: #535251;
	vertical-align: baseline;
}

.newMain .classNow .classNowWrp p strong,
.startBanner p strong,
.goClassNowPopup .classNowWrp p strong {
	font-family: 'Roboto';
	font-weight: 700;
	font-size: 18px;
	line-height: 26px;
	color: #535251;
	vertical-align: baseline;
	margin: 0 6px;
}

.newMain .classNow .classNowWrp p span,
.newMain .classNow .classNowWrp p strong {
	font-weight: 400;
	font-size: 16px;
	font-family: 'Roboto';
	color: #0037CC;
}

.newMain .classNow .classNowWrp p.classCountDown,
.startBanner p label,
.goClassNowPopup .classNowWrp p label {
	background: #8BA1F1;
	border-radius: 4px;
	color: #fff;
	padding: 6px 10px;
	font-weight: 600;
	font-size: 16px;
	vertical-align: baseline;
	min-width: 35px;
	display: inline-block;
	text-align: center;
	letter-spacing: 3px;
	text-indent: 3px;
}

.newMain .classNow .classNowWrp p.classCountDown b {
	color: #fff;
	letter-spacing: 0;
	margin-right: 10px;
	cursor: default;
}

.newMain .classNow .classNowWrp p label span,
.startBanner p label span,
.goClassNowPopup p label span {
	padding: 6px 8px;
	font-weight: 600;
	font-size: 16px;
	color: #fff;
}

.startBanner p label {
	margin-top: 20px;
}

.newMain .classNowWrp button,
.newMain .classComingWrp button,
.newMain .eventVdoList button,
.newMain .gpClassNow button {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	color: #003BFF;
	border-radius: 20px;
	background: #fff;
	border: 1px solid #ddd;
	font-size: 14px;
	width: 120px;
	text-align: center;
	padding: 8px;
	transition: color .3s;
}

.newMain .eventVdoList button {
	right: 0;
}

.newMain .classNow .classNowWrp button:hover {
	color: #112F82;
}

.newMain .classNow .classNowWrp.noClass button:hover {
	color: #777;
}

.newMain .classComingWrp,
.courseListWrp .courseCard .courseCardWrp {
	position: relative;
	padding: 20px;
}

.newMain .classComingWrp.ready,
.newMain .classComingWrp.bookNow {
	background: #EDF1FF;
    border-radius: 4px;
}

.newMain .classComingWrp.bookNow:not(:last-child) {
	margin-bottom: 15px;
}

.newMain .classComingWrp button,
.newMain .eventVdoList button {
	color: #777;
}

.newMain .eventVdoList button.active {
	border-color: #03328d;
	color: #03328d;
}

.newMain .eventVdoList button.active::before {
	content: '';
	width: 15px;
	height: 15px;
	background: url(../../images/newHomePage/checked_blue.svg) no-repeat center / 15px auto;
	display: inline-block;
	margin: 0 5px 0 -2px;	
	vertical-align: -2px;
}

.newMain .eventVdoList button.disable {
	opacity: .5;
	cursor: default;
}

.newMain .classComingWrp.ready button,
.newMain .classComingWrp.bookNow button {
	border: none;
	margin-right: 0;
	white-space: nowrap;
	width: auto;
}

.newMain .classComingWrp.ready button:hover,
.newMain .classComingWrp.bookNow button:hover {
	background: #183265;
}

.newMain .classComingWrp.bookNow {
	display: flex;
	align-items: center;
}

.newMain .classComingWrp.bookNow > img {
	width: 40px;
	margin-right: 10px;
}

.newMain .classComingWrp.bookNow > p {
	font-size: 14px;
	line-height: 20px;
	color: #535251;
	width: calc(100% - 190px);
}

.newMain .classNow .classNowWrp.noClass p:first-child {
	margin-bottom: 0;
	color: #777;
}

.newMain .classNow .classNowWrp.noClass button {
	opacity: .5;
	box-shadow: none;
	cursor: default;
	color: #777;
}

.newMain .classNow h4,
.newMain .classComing h4,
.newMain .classFinished h4 {
	margin-bottom: 10px;
}

.newMain .abcBlog ul {
	display: flex;
	flex-wrap: wrap;
}

.newMain .abcBlog li {
    height: auto;
	display: flex;
	align-items: center;
}

.newMain .abcBlog li:first-child,
.newMain .abcBlog li:nth-child(2) {
	margin-bottom: 15px;
}

.newMain .eventVdo h4 {
	font-weight: 700;
	font-size: 22px;
	color: #535251;
	margin-bottom: 15px;
}

.newMain .eventVdoWrp {
	border-radius: 20px;
	padding: 25px;
	background: #fff;
}

.newMain .eventVdoList {
	margin-bottom: 25px;
}

.newMain .eventVdoList li {
	position: relative;
	margin-bottom: 20px;
}

.newMain .eventVdoList li::after {
	content: '';
	clear: both;
	display: table;
}

.newMain .eventVdoList:last-of-type,
.newMain .eventVdoList:last-of-type li:last-child {
	margin-bottom: 0;
}

.newMain .eventVdoWrp .pg_freelobby_list > h5 {
	font-weight: 700;
	font-size: 14px;
	color: #9ba9ce;
	margin-bottom: 15px;
	letter-spacing: 1px;
}

.newMain .eventVdoWrp input[type="checkbox"],
.newMain .vdoLevel input[type="radio"] {
  display: none;
}

.newMain .eventVdoWrp input[type="checkbox"] + label,
.newMain .vdoLevel input[type="radio"] + label {
	background: #eef3ff;
	border-radius: 8px;
	font-size: 14px;
	color: #535251;
	padding: 4px 8px 4px 10px;
	text-align: center;
	cursor: pointer;
	margin: 0;
	line-height: normal;
}

.newMain .eventVdoWrp input[type="checkbox"]:checked + label,
.newMain .vdoLevel input[type="radio"]:checked + label {
	background: #03328d;
	border-color: #03328d;
	color: #fff;
}

.newMain .eventVdoWrp input[type="checkbox"]:checked + label:after,
.newMain .vdoLevel input[type="radio"]:checked + label:after {
	content: '';
	background: url(../../images/newHomePage/cancel_icon.svg) no-repeat center / 14px auto;
	width: 14px;
	height: 14px;
	display: inline-block;
	margin-left: 4px;
	position: relative;
	vertical-align: -1px;
}

.newMain .vdoFilter,
.newMain .vdoLevel {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
	position: relative;
}

.newMain .vdoLevel {
	border-bottom: 1px solid #f0f0f3;
	padding-bottom: 25px;
}

.newMain .vdoFilter .swiper-slide {
	width: auto;
}

.newMain .vdoFilter strong,
.newMain .vdoLevel strong {
	font-size: 14px;
	color: #777;
	font-weight: 400;
	flex: 0 0 70px;
}

.newMain .vdoFilter strong div, 
.newMain .vdoLevel strong div {
	display: none;
}

.newMain .eventVdoWrp .vdoLevel input[type="checkbox"] + label {
	margin-right: 10px;
}

.newMain .vdoFilter .swiper {
	margin-left: 0;
}

.newMain .vdoFilter .mbTitle,
.newMain .vdoFilter .mbConfirm,
.newMain .vdoLevel .mbTitle,
.newMain .vdoLevel .mbConfirm {
	display: none;
}

.wordsBank .deploy-toggle-filter {
    border: 1px solid #003bff;
    border-radius: 30px;
    width: auto;
    line-height: initial;
    padding: 8px 35px 8px 20px;
    background-position: right 13px center;
    background-size: 16px auto;
	color: #003bff;
	transition: color .3s, border .3s, background .3s;
	margin-left: 0;
}

.wordsBank .deploy-toggle-filter:hover {
	color: #112F82;
	border-color: #112F82;
	background-image: url(../../images/OxfordUpgrade/filter_color_vi_pink_hover.svg);
}

.noticeGuide {
	background: #EDF1FF;
	border-radius: 8px;
	border: 1px solid #D1DBFF;
	display: flex;
	align-items: center;
	padding: 15px 20px;
	margin-bottom: 15px;
}

.noticeGuide p {
	color: #333;
	font-weight: 400;
	padding-right: 15px;
}

.noticeGuide a {
	background: #003BFF;
	border-radius: 30px;
    padding: 8px 15px;
	color: #fff;
	font-size: 14px;
	margin-left: auto;
	flex-shrink: 0;
	min-width: 120px;
	text-align: center;
	transition: background .3s;
}

.noticeGuide a:hover {
	background: #112f82;
}

.content_in.isApp,
.for_pad .content_in,
.for_pad .newMain {
	float: none;
	margin: 0 auto;
	max-width: 701px;
}

.active .memberMenu {
	transform: translateX(0);
}

.memberMenu {
	display: block;
	overflow-x: hidden;
	padding-bottom: 100px;
}

.menuWrp::before,
.selectLggBar > div::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .5);
	z-index: 9;
	transition: opacity .5s;
	visibility: hidden;
	opacity: 0;
}

.menuWrp.active::before,
.selectLggBar.active > div::before {
	opacity: 1;
	visibility: visible;
}

.memberMenu .personal .myFoto {
	width: 55px;
	height: 55px;
	margin-left: 20px;
}

.memberMenu .personal {
	border-radius: 0;
	align-items: flex-start;
	border-bottom: 10px solid #f0f0f3;
	padding: 20px 0;
}

.memberMenu .personal .userName {
	font-size: 18px;
	padding: 0 20px 10px;
	margin-bottom: 0;
}

.memberMenu .personal .userNumber {
	font-size: 16px;
	margin-left: 19px;
	z-index: 999;
}

.memberMenu .personal .myFoto > a {
	right: auto;
	left: -20px;
	width: 300px;
	border-radius: 0;
	bottom: -90px;
	height: 85px;
	background: url(../../images/newHomePage/arr_right.svg) no-repeat right center / 20px auto;
	box-shadow: none;
}

.memberMenu .personal .userPoints {
	flex-direction: column;
	border-top: 1px solid #f0f0f3;
	padding-top: 18px;
}

.memberMenu .personal .userPoints a {
	position: relative;
	text-align: left;
	padding: 10px 20px;
	width: 100%;
	background: url(../../images/newHomePage/arr_right.svg) no-repeat right 15px center / 20px auto;
	font-size: 16px;
}

.memberMenu .personal .userPoints label {
	position: absolute;
	top: 4px;
	left: 105px;
	width: calc(100% - 105px);
}

.memberMenu .myLevel {
	border-bottom: 10px solid #f0f0f3;
	border-radius: 0;
	padding: 0 0 15px;
	margin-bottom: 5px;
}

.memberMenu .myLevel .arrangeCourse li {
	padding: 20px;
}

.memberMenu .myLevel > h4 {
	padding: 20px;
	margin: 0;
	font-size: 18px;
	background: url(../../images/newHomePage/dropdown.svg) no-repeat right 25px top 20px / 20px auto;
	color: #777;
	font-weight: 400;
}

.memberMenu .myLevel > h4.open {
	background-image: url(../../images/newHomePage/arrowup.svg);
	color: #535251;
	font-weight: 500;
}

.memberMenu .myLevel .level p, 
.memberMenu .myLevel .level span, 
.memberMenu .myLevel .level a {
	font-size: 16px;
}

.memberMenu .myLevel .arrangeCourse h5,
.memberMenu .myLevel .arrangeCourse p {
	font-size: 16px;
}

.memberMenu .myLevel .arrangeCourse p b {
	font-size: 18px;
	display: block;
	margin: 0;
	width: 100%;
}

.memberMenu .myLevel .arrangeCourse li {
	border: 0;
	border-top: 1px solid #f0f0f3;
}

.memberMenu .myLevel .arrangeCourse {
	padding-top: 15px;
}

.memberMenu .myLevel .level {
	padding: 0 10px;
}

.memberMenu .myLevel .arrangeCourse p {
	max-width: calc(100% - 85px);
}

.closeSideMenu {
	position: fixed;
	top: 0;
	right: 0;
	width: 60px;
	height: 60px;
	cursor: pointer;
	z-index: 999;
	transition: opacity .5s;
	visibility: hidden;
	opacity: 0;
}

.closeSideMenu::after {
	content: '';
	width: 30px;
	height: 30px;
	background: url(../../images/newHomePage/close_menu.svg) no-repeat center / 25px auto;
	position: absolute;
	top: 15px;
	right: 15px;
}

.active .closeSideMenu {
	opacity: 1;
	visibility: visible;
}

@media only screen and (max-width: 1100px) { /* 1100 */

	.active .sideMenu {
		transform: translateX(0);
	}

	.classNowWrp + span {
		color: #9f9f9f;
	}

	.mainbox {
		width: 100%;
	}

	.memberMenuBtn,
	.sideMenuBtn {
		display: block;
	}

	.sideMenu {
		display: block;
		overflow-x: hidden;
		padding-bottom: 100px;
	}

	.sideMenu {
		padding-top: 30px;
	}

	.sideMenu > div {
		transition: transform .5s ease;
	}

	.sideMenu.active > div {
		transform: translateX(-100%);
	}

	.menuWrp::before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .5);
		z-index: 9;
		transition: opacity .5s;
		visibility: hidden;
		opacity: 0;
	}
	
	.menuWrp.active::before {
		opacity: 1;
		visibility: visible;
	}

	.newSideBar {
		display: none;
	}

	.menuWrp {
		background-size: 80px auto;
		height: 60px;
	}

	.memberMenu .personal .myFoto {
		width: 55px;
		height: 55px;
		margin-left: 20px;
	}

	.memberMenu .personal {
		border-radius: 0;
		align-items: flex-start;
		border-bottom: 10px solid #f0f0f3;
		padding: 20px 0;
	}

	.memberMenu .personal .userName {
		font-size: 18px;
		padding: 0 20px 10px;
		margin-bottom: 0;
	}

	.memberMenu .personal .userNumber {
		font-size: 16px;
		margin-left: 19px;
		z-index: 999;
	}

	.memberMenu .personal .myFoto > a {
		right: auto;
		left: -20px;
		width: 300px;
		border-radius: 0;
		bottom: -90px;
		height: 85px;
		background: url(../../images/newHomePage/arr_right.svg) no-repeat right center / 20px auto;
		box-shadow: none;
	}

	.memberMenu .personal .userPoints {
		flex-direction: column;
		border-top: 1px solid #f0f0f3;
		padding-top: 18px;
	}

	.memberMenu .personal .userPoints a {
		position: relative;
    	text-align: left;
		padding: 10px 20px;
		width: 100%;
		background: url(../../images/newHomePage/arr_right.svg) no-repeat right 15px center / 20px auto;
		font-size: 16px;
	}

	.memberMenu .personal .userPoints label {
		position: absolute;
		top: 4px;
		left: 105px;
		width: calc(100% - 105px);
	}

	.memberMenu .myLevel {
		border-bottom: 10px solid #f0f0f3;
		border-radius: 0;
		padding: 0 0 15px;
		margin-bottom: 5px;
	}

	.memberMenu .myLevel .arrangeCourse li {
		padding: 20px;
	}

	.memberMenu .myLevel > h4 {
		padding: 20px;
		margin: 0;
		font-size: 18px;
		background: url(../../images/newHomePage/dropdown.svg) no-repeat right 25px top 20px / 20px auto;
		color: #777;
		font-weight: 400;
	}

	.memberMenu .myLevel > h4.open {
		background-image: url(../../images/newHomePage/arrowup.svg);
		color: #535251;
		font-weight: 500;
	}

	.memberMenu .myLevel .level p, 
	.memberMenu .myLevel .level span, 
	.memberMenu .myLevel .level a {
		font-size: 16px;
	}

	.memberMenu .myLevel .arrangeCourse h5,
	.memberMenu .myLevel .arrangeCourse p {
		font-size: 16px;
	}

	.memberMenu .myLevel .arrangeCourse p b {
		font-size: 18px;
		display: block;
		margin: 0;
		width: 100%;
	}

	.memberMenu .myLevel .arrangeCourse li {
		border: 0;
		border-top: 1px solid #f0f0f3;
	}

	.memberMenu .myLevel .arrangeCourse {
		padding-top: 15px;
	}

	.memberMenu .myLevel .level {
		padding: 0 10px;
	}

	.memberMenu .myLevel .arrangeCourse p {
		max-width: calc(100% - 85px);
	}

	.backSideMenu {
		color: #535251;
		font-size: 18px;
		background: url(../../images/newHomePage/arr_left.svg) no-repeat left 15px center / 20px auto;
		padding: 20px 0 20px 40px;
		position: absolute;
		left: 100%;
		top: -20px;
		width: 100%;
	}

	#mobileSideMenu ul ul,
	.sideMenu .lgg ul {
		height: auto;
		position: absolute;
		left: 100%;
		top: 50px;
		width: 100%;
		display: none;
	}

	#mobileSideMenu > ul > li,
	.sideMenu .logout,
	.sideMenu .lgg {
		color: #555;
		padding: 12px 20px;
		font-size: 16px;
		font-weight: 300;
		display: block;
		text-align: left;
		cursor: pointer;
	}

	#mobileSideMenu > ul > li.active {
		color: #03328d;
	}

	#mobileSideMenu > ul > li:not(.backHome, .newStudn),
	.sideMenu .lgg {
		background: url(../../images/newHomePage/arr_right.svg) no-repeat right 15px top 14px / 20px auto;
	}

	#mobileSideMenu > ul > li.open:not(.backHome, .newStudn),
	.sideMenu .lgg.open {
		background-image: url(../../images/newHomePage/arrowup.svg);
		font-weight: 500;
		color: #535251;
	}
	
	#mobileSideMenu .backHome a,
	#mobileSideMenu .newStudn a,
	.sideMenu .logout a {
		color: #555;
		display: block;
		font-size: 16px;
		font-weight: 300;
	}

	#mobileSideMenu > ul > li li a,
	.sideMenu .lgg a,
	.selectLggBar.active li a {
		padding: 12px 10px 12px 30px;
		font-size: 16px;
		color: #555;
		font-weight: 300;
		display: block;
	}

	#mobileSideMenu > ul > li.active,
	#mobileSideMenu > ul > li.active > a,
	#mobileSideMenu > ul > li li.active a,
	.selectLggBar.active li.active a {
		color: #003bff;
	}

	.sideMenu .logout {
		padding: 25px 20px;
	}

	.sideMenu .lgg,
	.sideMenu .newStudn {
		border-bottom: 10px solid #f0f0f3;
	}

	.sideMenu .lgg::before {
		content: '';
		width: 16px;
		height: 16px;
		background: url(../../images/newHomePage/lgg.svg) no-repeat center / 16px auto;
		display: inline-block;
		vertical-align: -2px;
	}

	.sideMenu .lgg::after {
		content: '';
		display: table;
		clear: both;
	}

	.memberMenu .levelWrp {
		height: 0;
		overflow: hidden;
	}

	.main_in {
		width: 100%;
		box-sizing: border-box;
		padding-top: 0;
	}

	.content_in {
		float: none;
		margin: 0 auto;
		width: 701px;
		padding-top: 20px;
	}

	.deskMenu > ul,
	.deskMenu .logoutBtn, 
	.deskMenu .laggSwitch {
		display: none;
	}

	.menuWrp {
		margin: 0 auto;
	}

}

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

	.class_content_in {
		width: 701px;
	}

}

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

	.menuWrp {
		width: 100%;
	}

	.content_in {
		width: 96%;
		margin-left: 2%;
		margin-right: 2%;
	}

	.class_content_in {
		width: 100%;
		margin: 0 auto;
	}

	.newMain .eventCourse h4, 
	.newMain .storyBookFree h4, 
	.newMain .videoCourse h4 {
		font-size: 18px;
	}
	
	.newMain .eventCourse h4 a, 
	.newMain .storyBookFree h4 a, 
	.newMain .videoCourse h4 a,
	.newMain .eventCourse li label,
	.newMain .eventCourse li span,
	.newMain .eventCourse li p, 
	.newMain .eventCourse li a,
	.newMain .storyBookFree h4 span,
	.newMain .videoCourse h4 span,
	.newMain .eventCourse h4 span {
		font-size: 16px;
		line-height: 22px;
	}

	.newMain .eventCourse li p {
		min-height: 44px;
	}

	.newMain .storyBookFree h4 span,
	.newMain .videoCourse h4 span,
	.newMain .eventCourse h4 span {
		background-size: 16px auto;
		padding-left: 18px;
	}

	.newMain .eventCourse li a {
		height: 40px;
	}

	.newMain .eventCourse li span {
		margin-bottom: 7px;
	}

	.newMain .classComingWrp button {
		position: static;
		transform: none;
		margin-top: 15px;
		float: right;
	}

	.newMain .classComingWrp:not(.bookNow) {
		padding-bottom: 70px;
	}

	.newMain .classFinished ul {
		flex-direction: column;
	}

	.newMain .classComingWrp.bookNow button {
		margin-left: auto;
	}

	.newMain .classNow .classNowWrp {
		margin-bottom: 10px;
	}

	.guideBar button {
		right: -30px;
	}

	.guideBar p {
		width: calc(100% - 80px);
	}

	.newMain .eventVdoList .courseTitle h5 {
		width: calc(100% - 160px);
		margin-bottom: 0;
		padding-top: 25px;
		font-weight: normal;
	}

	.newMain .eventVdoList .courseTitle .courseTime b {
		display: inline-block;
		overflow: hidden;
		font-weight: 400;
		vertical-align: -5px;
	}

	.newMain .eventVdoList .courseTitle p {
		padding-left: 22px;
	}

	.newMain .eventVdoList .courseImg {
		width: 130px;
	}

	.newMain .eventVdoList .courseImg div {
		border-radius: 12px;
	}

	.newMain .eventVdoList .courseTitle {
		padding-left: 145px;
		position: relative;
	}

	.newMain .eventVdoList .courseTitle .courseTime {
		position: absolute;
		left: 145px;
		top: 0;
	}

	.newMain .eventVdoList .courseTitle .courseTeacher {
		display: none;
	}

	.newMain .eventVdo h4 {
		padding: 0 20px;
	}

	.startBannerWrp {
		flex-direction: column;
	}

	.startBanner .btnWrp {
		justify-content: space-between;
		margin-top: 15px;
	}

	.startBanner .btnWrp a {
		margin: 0;
		width: 48.5%;
	}

	.startBanner.goPlanBg .btnWrp a,
	.startBanner.pastBg .btnWrp a {
		width: 100%;
	}

}

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

	.newHomePopup .changeCourseTime,
	.newHomePopup .searchConsultant {
		padding: 20px;
	}

}


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

	.content_in {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	.startBanner,
	.startBannerWrp {
		padding: 5%;
	}

	.startBanner.giftBg h4, 
	.newMain .freeBooking > h4,
	.startBanner strong,
	.newMain .freeBooking .courseTitle h5 {
		font-size: 18px;
	}

	.newMain .freeBooking .courseTitle h5 {
		line-height: 28px;
		white-space: normal;
	}

	.startBanner > strong {
		margin-bottom: 5px;
		display: block;
	}

	.startBanner strong span {
		font-size: 24px;
	}

	.startBanner p,
	.startBanner.renewBg > strong, 
	.startBanner.pastBg > strong {
		font-size: 16px;
		padding-right: 0;
		line-height: 26px;
	}

	.startBanner .btnWrp a {
		font-size: 16px;
	}

	.startBanner.goPlanBg .btnWrp a {
		width: 100%;
	}

	.startBanner .btnWrp {
		display: flex;
		justify-content: space-between;
	}

	.newMain .freeBooking .courseImg,
	.newMain .classComing .courseImg {
		width: 100%;
	}

	.newMain .freeBooking .courseTitle,
	.newMain .classComing .courseTitle {
		padding-left: 0;
	}

	.newMain .freeBooking .courseTitle h5 label,
	.newMain .freeBooking .courseTitle p,
	.myLevel .level li:first-child span u {
		font-size: 16px;
	}

	.newMain .freeBooking .courseTip,
	.newMain .goPlanBg .courseTip {
		font-size: 15px;
		line-height: 22px;
	}

	.newHomePopup .chooseTime li {
		flex-basis: calc((100% - 18px) / 3);
	}

	.newHomePopup .chooseWeekWrp {
		position: static;
		width: 100%;
	}

	.newHomePopup .chooseWeekWrp span {
		display: inline-block;
		color: #777;
	}

	.newHomePopup .chooseWeekWrp button {
		position: relative;
		top: -8px;
	}

	.newHomePopup .chooseWeek {
		width: calc(100% - 20px);
	}

	.newHomePopup .changeTimeBtn {
		margin-bottom: 0;
		position: fixed;
		background: #03328d;
		border-radius: 20px 20px 0 0;
		height: 80px;
		bottom: 0;
		left: 0;
		right: 0;
		padding-top: 20px;
	}

	.newHomePopup .changeTimeTip {
		display: none;
	}

	.newHomePopup {
		background: rgba(255, 255, 255, 0);
	}

	.newHomePopup .changeTimeBtn button {
		background: transparent;
		color: #fff;
		border-radius: 30px;
		border: 1px solid #fff;
		font-size: 16px;
		box-shadow: none;
		width: 40%;
	}

	.newHomePopup .changeTimeBtn button.confirm {
		background: #fff;
		color: #03328d;
	}

	.newHomePopup .changeCourseTime .courseTimeWrp {
		padding: 15px;
	}

	.newHomePopup .changeCourseTime {
		position: fixed;
		bottom: 0;
		top: 60px;
		padding-bottom: 80px;
	}

	.newHomePopup .searchConsultant .qrcodeImg {
		flex-direction: column;
	}

	.newMain .classNowWrp button {
		position: static;
		transform: none;
		margin-top: 20px;
		font-size: 16px;
		width: 100%;
	}

	.newMain .classComingWrp.bookNow {
		flex-wrap: wrap;
	}

	.newMain .classComingWrp.bookNow > p {
		font-size: 16px;
		line-height: 22px;
		width: calc(100% - 70px);
	}

	.newMain .classComingWrp.bookNow > img {
		margin-right: 15px;
	}

	.newMain .classComingWrp button,
	.newMain .classComingWrp.ready button, 
	.newMain .classComingWrp.bookNow button {
		font-size: 16px;
		padding: 8px;
		height: auto;
		line-height: normal;
		width: 100%;
		float: none;
	}

	.newMain .classComingWrp:not(.bookNow) {
		padding-bottom: 20px;
	}

	.newMain .classComingWrp {
		padding: 15px;
	}

	.newMain .classNow h4,
	.newMain .classComing h4,
	.newMain .classFinished h4 {
		font-size: 18px;
	}

	.newMain .classComing h4 a,
	.newMain .classFinished h4 a {
		font-size: 16px;
	}

	.newMain .classFinished li p {
		font-size: 16px;
	}

	.startBanner.renewBg > strong,
	.startBanner.pastBg > strong {
		padding-right: 0;
	}

	.startBanner.congratsBg .btnWrp a, 
	.startBanner.renewBg .btnWrp a, 
	.startBanner.pastBg .btnWrp a {
		width: 100%;
	}

	.newMain .abcBlog ul {
		flex-direction: column;
	}

	.newMain .abcBlog li:nth-child(3) {
		margin-bottom: 15px;
	}

	.newMain .abcBlog li p {
		padding-right: 0;
	}

	.vdoFilter .swiper,
	.vdoLevel .vdoLevelWrp,
	.vdoFilter .swiper + .swiper-button-next,
	.vdoFilter .swiper + .swiper-button-prev {
		display: none;
	}

	.vdoFilter .swiper,
	.vdoLevel .vdoLevelWrp {
		position: fixed;
		top: 60px;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 9999999;
		background: #fff;
		border-radius: 20px 20px 0 0;
		padding: 20px;
	}

	.vdoFilter.open .swiper,
	.vdoLevel.open .vdoLevelWrp {
		display: block;
	}

	.newMain .swiper .swp {
		height: 100%;
	}

	.newMain .vdoFilter .swiper-slide {
		height: auto;
	}

	.vdoFilter .swiper-wrapper {
		flex-direction: column;
		overflow-y: auto;
		min-height: 100%;
		padding-bottom: 150px;
		transform: none !important;
	}

	.newMain .vdoFilter,
	.newMain .vdoLevel {
		display: inline-block;
		font-size: 16px;
		background: url(../../images/newHomePage/arr_down.svg) #eef3ff no-repeat right 10px center / 12px auto;
		border-radius: 8px;
		margin-right: 5px;
		cursor: pointer;
		margin-bottom: 25px;
		padding-bottom: 0;
	}

	.newMain .vdoFilter.active,
	.newMain .vdoLevel.active {
		background: url(../../images/newHomePage/arr_down_white.svg) #03328d no-repeat right 10px center / 12px auto;
	}

	.newMain .vdoFilter.active strong, 
	.newMain .vdoLevel.active strong {
		color: #fff;
	}

	.newMain .vdoFilter strong, 
	.newMain .vdoLevel strong {
		padding: 8px 30px 8px 12px;
		display: block;
	}

	.newMain .vdoFilter strong div,
	.newMain .vdoLevel strong div {
		display: inline-block;
		margin-right: 5px;
		vertical-align: 0;
	}

	.newMain .vdoLevel {
		border: none;
	}

	.newMain .eventVdoList button {
		position: static;
		transform: none;
		width: 100%;
		margin-top: 10px;
	}

	.newMain .eventVdoList .courseTitle h5 {
		width: 100%;
	}

	.newMain .eventVdoWrp input[type="checkbox"] + label, 
	.newMain .vdoLevel input[type="radio"] + label {
		width: 100%;
		font-size: 16px;
		padding: 12px 20px;
		margin-bottom: 10px;
		text-align: left;
		border: 1px solid #f0f0f3;
		background: transparent;
		color: #777;
	}

	.newMain .eventVdoWrp input[type="checkbox"]:checked + label, .newMain .vdoLevel input[type="radio"]:checked + label {
		background: url(../../images/newHomePage/checked_blue.svg) #eef3ff no-repeat right 20px center / 21px auto;
		border-color: #eef3ff;
		color: #03328d;
		font-weight: 700;
	}

	.newMain .vdoFilter .mbTitle,
	.newMain .vdoLevel .mbTitle {
		display: block;
		color: #535251;
		font-size: 20px;
		font-weight: 700;
		text-align: center;
		margin-bottom: 25px;
		position: relative;
	}

	.newMain .vdoFilter .mbConfirm,
	.newMain .vdoLevel .mbConfirm {
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #03328d;
		border-radius: 20px 20px 0 0;
		padding: 20px;
		z-index: 9;
	}

	.newMain .vdoFilter .mbConfirm button,
	.newMain .vdoLevel .mbConfirm button {
		flex: 0 1 48%;
		font-size: 16px;
		border-radius: 30px;
		background: transparent;
		border: 1px solid #fff;
		color: #fff;
		padding: 8px;
	}

	.newMain .vdoFilter .mbConfirm button.confirm,
	.newMain .vdoLevel .mbConfirm button.confirm {
		background: #fff;
		color: #03328d;
		box-shadow: 0 4px 10px rgba(196, 194, 193, .4);
		opacity: 1;
	}

	.newMain .mbTitle .closePopup {
		top: -5px;
		right: -5px;
	}

	/* .newMain .vdoFilter .mbConfirm button.confirm.active,
	.newMain .vdoLevel .mbConfirm button.confirm.active {
		opacity: 1;
	} */

	.eventVdo .vdoFilter .swiper-button-prev,
	.eventVdo .vdoFilter .swiper-button-next {
		display: none;
	}

	.newMain .eventVdoList .courseImg {
		width: 120px;
	}

	.newMain .eventVdoList .courseImg div {
		padding-bottom: 60%;
	}

	.newMain .eventVdoList .courseTitle {
		padding-left: 135px;
	}

	.newMain .eventVdoList .courseTitle .courseTime {
		left: 135px;
	}

	.newMain .eventVdoList .courseTitle p {
		padding-left: 24px;
	}

	.newMain .eventVdoWrp .pg_freelobby_list > h5 {
		margin-bottom: 10px;
	}

	.newMain .eventCourse h4, 
	.newMain .storyBookFree h4, 
	.newMain .videoCourse h4 {
		display: block;
		position: relative;
	}

	.newMain .videoCourse.myScheduleDetail h4 {
		display: none;
	}

	.newMain .storyBookFree h4 span, 
	.newMain .videoCourse h4 span, 
	.newMain .eventCourse h4 span {
		margin-left: 0;
		display: block;
		margin-top: 5px;
	}

	.newMain .eventCourse h4 a, 
	.newMain .storyBookFree h4 a, 
	.newMain .videoCourse h4 a {
		position: absolute;
		right: 0;
		top: 0;
	}

	.noticeGuide {
		width: 95%;
		margin: 0 auto 15px;
	}

	.startBanner strong {
		max-width: 100%;
	}
	
}

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

	.newMain .classNow .classNowWrp p:first-of-type b {
		margin-bottom: 0;
	}

	.newMain .classNow .classNowWrp p span,
	.newMain .classNow .classNowWrp p strong {
		font-size: 18px;
	}

	.newMain .classNow .classNowWrp button {
		width: 100%;
		margin-top: 15px;
	}

	.newMain .classNow .classNowWrp.noClass p:first-child {
		text-align: center;
	}

	.newMain .freeBooking .courseTip, 
	.newMain .startBanner .courseTip {
		font-size: 16px;
	}

	.guideBar p {
		font-size: 16px;
		text-align: left;
		width: 90%;
		position: relative;
		padding: 0 25px 0 0;
	}

	.guideBar button {
		right: -10px;
	}

	.newMain .classNow .classNowWrp p label, 
	.startBanner p label {
		font-size: 20px;
	}

	.newMain .classNow .classNowWrp p label {
		width: 100%;
	}

	.startBanner p b {
		font-size: 16px;
		margin-right: 10px;
	}

	.noticeGuide {
		flex-direction: column;
		align-items: flex-start;
	}

	.noticeGuide a {
		width: 100%;
		text-align: center;
		margin-top: 10px;
		font-size: 16px;
	}

	.noticeGuide p {
		padding-right: 0;
	}

	.newMain .eventVdoList .courseImg {
		width: 110px;
	}

	.newMain .eventVdoList .courseTitle {
		padding-left: 125px;
	}

	.newMain .eventVdoList .courseTitle h5 {
		font-size: 15px;
		padding-top: 22px;
	}

	.newMain .eventVdoList .courseTitle .courseTime {
		left: 125px;
		font-size: 14px;
		background: none;
		padding-left: 0;
		padding-top: 0;
	}

	.newMain .classNow .classNowWrp p.classCountDown {
		width: 100%;
	}

	.newMain .classNow .classNowWrp p.classCountDown b {
		font-size: 16px;
		vertical-align: middle;
	}

}

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

	.newHomePopup .chooseWeek {
		width: calc(100% - 10px);
	}

	.newHomePopup .chooseWeekWrp button {
		width: 30px;
	}

	.newMain .eventVdoWrp {
		padding: 20px;
	}

}


.newMain .class_content_in {
	border-radius: 8px;
	overflow: hidden;
	padding-bottom: 100px;
}

/* @media only screen and (max-width: 1130px) {

	.main_in,
	.newMain .class_content_in {
		width: 100%;
	}

	.content_in {
		width: 630px;
	}

}

@media only screen and (max-width: 768px) {
	.content_in {
		width: 100%;
	}
} */