:root{
	--banner_aspectRatios : 81%;
}
.welcome-banner{
	position:relative;
	width:85%;
	margin:auto;
	margin-bottom:10%;
}
.slider-banner{
	position: relative;
    width: 65%;
    margin: 0px 0px 0px auto;
}
.slider-banner a{
	width: 100%;
    display: block;
    padding-top: var(--banner_aspectRatios);
    position: relative;
    overflow: hidden;
}
.slider-banner img{
	object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    margin: auto;
}
.slider-banner .flip{
	position:absolute;
	width:calc( var(--banner_aspectRatios) * 0.3);
	height:30%;
	right:0px;
	bottom:0px;
	border-radius:0px 0px 12px 0px;
	background-image:url('/images/index_banner_flip.png');
	background-repeat:no-repeat;
	background-position:right bottom;
	background-size:contain;
	
	
	cursor:pointer;
}
.slider-slogan{
	position: absolute;
    top: 10%;
    left: 0px;
    width: 45%;
    height: 100%;
    background-image: url(/images/index_heading.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
	z-index:4;
}
.idx-course,.idx-news{
	display:inline-block;

	width:calc( 50% - (var(--part_space) / 2) - 1px );
	vertical-align: top;
}
.idx-course{
	margin-left: calc((var(--part_space) / 2) - 2px);
}
.idx-news{
	margin-right: calc((var(--part_space) / 2) - 2px);
}
.idx-course .course-list{
	display:grid;
	grid-template-columns: repeat(2, 1fr);
	text-align:center;
	grid-gap:34px;
}
.idx-coursecate .course-catelist{
	display:grid;
	grid-template-columns: repeat(4, 1fr);
	text-align:center;
	grid-gap:15px;
}
.idx-coursecate .course-catelist > div
,.idx-course .course-list div.course-img{
	border-radius: 10px;
	padding-top: 55%;
	position: relative;
	
	overflow:hidden;
}
.idx-course .course-list{
	position: relative;
}
.idx-coursecate .course-catelist > div
,.idx-course .course-list div.course-img{
	box-shadow: var(--img_shadow_v1);
}
.idx-coursecate .course-catetitle
,.idx-coursecate .course-cateimg
,.idx-course .course-img img{
	position: absolute; 
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	display: grid;
	align-content: center;
	transition: transform .5s;
}
.idx-course .course-img img
,.idx-coursecate .course-cateimg{
	object-fit: cover;
    object-position: center;
}
.idx-coursecate .course-catetitle{
	color: #ffffff;
	font-size:35px;
	font-family:var(--title-font);
	line-height:52px;
	letter-spacing:3.5px;
	z-index:4;
}
.idx-course .course-title{
	color: var(--theme_colorB_v1);
	font:var(--title-font);
	font-size:20px;
	line-height:30px;
	letter-spacing:2px;
	margin-top:12px;
}
.idx-coursecate .course-catelist > div:before{
	background-color: #000000; 
	z-index:3;
}
.idx-coursecate .course-catelist > div:before
,.idx-course .course-img:before {
	border-radius: inherit;
	opacity: 0.36;
	
	content: '';
	position: absolute;
	
	height: 100%;
	width: 100%;
	top: 0;
	left:0px;
	
	-webkit-transition: opacity 0.5s ease-in-out;
	-moz-transition: opacity 0.5s ease-in-out;
	-ms-transition: opacity 0.5s ease-in-out;
	-o-transition: opacity 0.5s ease-in-out;
	transition: opacity 0.5s ease-in-out;
}
.idx-coursecate .course-catelist > div:hover:before
,.idx-course .course-catelist > div:hover:before{
	opacity: 0.56;
}
.idx-course .course-img{
	overflow:hidden;
}
.idx-course .course-img:hover img{
  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}




/* Banner */
.swiper-container{
	max-width:100%;
	width:100%;
}
.swiper-static-area{
	position: relative;
	width:100%;
	border-radius:12px;
	overflow:hidden;
} 
.swiper-frame{
	position: relative;
    width: 100%;
    padding-top: 81%;
    overflow: hidden;
}
.swiper-frame > div{
	top:0px;
	left:0px;
	position:absolute;
	width:100%;
	height:100%;
	z-index:2;
}
.swiper img{
	max-width:unset;
}
@media only screen and (max-width:1200px) {
	.welcome-banner{
		width:100%;
	}	
	.idx-news{
		width: 80%;
		display: block;
		margin-left: auto;
		margin-right:auto;
	}
	.idx-course {
		width: 100%;
		display: block;
	}
	.idx-coursecate .course-catelist{
		grid-gap: 32px;
		grid-template-columns: repeat(2, 1fr);
	}
	#divContent section{
		max-width: calc( 100% - 40px );
		margin-left:auto;
		margin-right:auto;
	}
}
@media only screen and (max-width:768px) {
	.idx-news{
		width:100%;
	}
	#divContent section{
		max-width:unset;
	}
}

/* MOBILE VERSION */
@media only screen and (max-width:560px) {
	#divContent section {
		max-width: calc( 100% - 10px);
	}
	.slider-slogan{
		position: unset;
		width: calc( 100% - 20px );
		padding-bottom: 40%;
		height: unset;
		background-image: url();
		background-image: url(/images/index_heading_mob.svg);
		margin-top: 8px;
		margin: 9px auto;
	}
	.slider-banner{
		width:100%;
	}
	.swiper-frame {
		padding-top: 54%;
	}
	
	.idx-course .course-list{
		grid-template-columns: 100%;
		grid-gap: 44px;
	}
	.idx-coursecate .course-catelist{
		grid-template-columns: auto;
		grid-gap: 38px;
	}
}