html, body {
	height: 100%;
	margin: 0;
}
body {  
	padding: 0; 
	font-family: 'Exo', sans-serif;
}
p, ol, ul {
	font-size: 19px;
	line-height: 1.6;
}
button {  
	font-family: 'Exo', sans-serif;
	border: none;
	background: none;
	padding: 0;
	cursor: pointer
}
h1 {
	line-height: 1.05;
	font-family: 'Anton', sans-serif;
	font-weight: normal;
	color: white;
	text-shadow: 1px 1px black;
}
h2 {
	font-size: 26px;
	color: #374655;
	font-family: "Archivo Black", sans-serif;
}
.hero-image, .gambar, .konten-image {
	position: relative;	
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.hero-image, .gambar {
	height: 100%;
}
.depan {
	max-width: 1025px;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	padding: 24px;
	background: white;
	height: 75%;
	border: 1px solid rgba(0,0,0, .2);
	box-shadow: 
        inset  
              0 0 0 1px white,
              0.3em 0.3em 0.3em rgba(0,0,0,0.3);
}
.konten { 
	max-width: 1025px; 
	margin: 0 auto 0; 
	padding: 20px 15px;
}
.konten-image {
	background-image: url("https://belajark3.com/new_images/konten.webp");
}
.infoPELATIHAN, #myBtn {
	position: fixed;
	right: 10px;
	cursor: pointer;
	display: none;
	opacity: 0;
	transition-property: display, opacity;
	transition-timing-function: ease-in-out;
	transition-behavior: allow-discrete;
	transition-duration: .6s;
	animation-name: kanan;
	animation-duration: 2s;
}
.GARIS {
	border-top: solid 3px #374655;
	width: 100px;
}
.GARIS1 {
	border-top: solid 3px white;
	width: 100px;
}
.GARIS3 {
	border-top: solid 2px rgba(0,0,0, .5);
	width: 100px;
	margin-top: -10px
}
button.selengkapnya {
	margin-bottom: 24px;
	padding: 12px 20px
}
.selengkapnya {
	position: relative;
	cursor: pointer;
	color: white;
	border-radius: 5px;
	text-shadow: 1px 1px black;
	display: inline-block;
	overflow: hidden;
	background-color: rgb(55,70,85);
	padding: 10px 20px;
	font-size: 17px;
	text-decoration: none;
}
.selengkapnya::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	transition: left 0.4s;
	z-index: 0;
	background-color: #daa14c;
}
.selengkapnya:hover::before {
	left: 0;
}
.selengkapnya span {
	position: relative;
	z-index: 1;
	transition: color 0.4s;
}
.infoPELATIHAN {
	bottom: 5px;
}
#myBtn {
	bottom: 50px;
}
@keyframes kanan {
	from {right: -150%; opacity: 0}
	to {right: 10px; opacity: 1}
}
.infoFlek {
	display: flex;
	align-items: center;
}
.infoFlek img {
	width: 40px;
	height: 40px;
	margin-left: 5px;
	transition: transform .2s ease;
}
.infoFlek:hover img {
	transform: scale(1.1);
	}
.info {
	font-size: 16px;
	line-height: 1;
	padding: 5px 10px;
	border-radius: 20px;
	border: solid 1px black;
	color: black;
	background: rgb(240, 240, 240);
	text-align: center;
}
.zoom {
	overflow: hidden;
	cursor: pointer
}
.zoom img {
	transition: transform .2s ease;
}
.zoom:hover img {
	transform: scale(1.1);
}
.OVAL { 
	border-radius: 3px;
	}
.ovall {
	border-radius: 4px;
	width: 105px;
	height: 30px;
	transition: transform .2s ease;
}	
img.ovall:hover {
	transform: scale(1.1);
}	
.CALL1, .CALL2 {
	position: absolute;
	font-size: 15px;
	display: inline-block;
	padding: 5px 8px;
	border-radius: 3px;
	border: 1px solid rgb(118, 111, 84);
	color: rgb(118, 111, 84);
	text-align: center;
	outline: none;
	text-decoration: none;
	transition: .2s ease
}
.CALL1 {
	top: 165px;
	left: 184px;
}
.CALL2 {
	top: 322px;
	left: 184px;
}
.CALL1:hover,
.CALL1:active,
.CALL2:hover,
.CALL2:active {
	color: rgb(255,255,255);
	background-color: rgb(118, 111, 84);
	border-color: rgb(118, 111, 84); 
}
.jawab {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	padding: 30px 60px;
	border-radius: 10px;
	border: 2px solid white;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3), 1em 1em 1em rgba(0, 0, 0, 0.3);
	transform: scale(0);
	animation: zoomIn 2s .4s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
	width: 680px;
	height: max-content;
	z-index: 1;
	opacity: 0;
	transition-property: display, opacity;
	transition-timing-function: ease-in-out;
	transition-behavior: allow-discrete;
	transition-duration: .7s;
	background-image: url("https://belajark3.com/bg-CS.webp");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.jawab ol {
	height: 242px;
	overflow: auto;
	overscroll-behavior: auto contain;
	color: white;
	font-size: 17px
}
.jawab p {
	color: white
}
.modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%; 
	height: 100%;
	overflow: hidden;
	opacity: 0;
	background-color: rgba(0,0,0, .7);
	transition-property: display, opacity;
	transition-timing-function: ease-in-out;
	transition-behavior: allow-discrete;
	transition-duration: .6s;
	animation-name: fade;
	animation-duration: 1s
}
@keyframes fade {
	from {opacity: 0} 
	to {opacity: 1}
}
.infoPELATIHAN.buka, #myBtn.buka, .modal.buka, .jawab.buka {
	opacity: 1;
	display: block;
}
.modal_body {
	position: absolute;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	border-radius: 10px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.admin, .adminCSMS {
	width: 740px;
	height: 429px;
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 1s;
	animation-name: animatetop;
	animation-duration: 1s;
}
.admin {
	background-image: url("https://belajark3.com/admin.webp");
}
.adminCSMS {
	background-image: url("https://belajark3.com/admin-csms.webp");
}
.silabus {
	width: 900px;
	height: 506px; 
	background-image: url("https://belajark3.com/new_images/pq-csms.webp");
	transform: scale(0);
	animation: zoomIn 2s .1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
	border: 1px solid #888;
	box-shadow: 
		inset 0 -3em 3em rgba(0,0,0,0.1), 
			  0 0 0 3px white,
			  0.3em 0.3em 1em rgba(0,0,0,0.3);		  
}
.pelajari_selengkapnya, .Unduh_Brosur {
	width: 900px;
	height: 460px;
	border: solid 1px white;
	padding: 40px 20px;
	background: #1e1e1e;
	animation-name: fade;
	animation-duration: 3s
}
.pelajari_selengkapnya embed, .Unduh_Brosur embed {
	width: 100%;
	height: 100%;
}
.Unit_Kompetensi {
	width: 900px;
	height: 520px;
	border: 1px solid #888;
	animation: mymove 5s;
	box-shadow: 
		inset 0 -3em 3em rgba(0,0,0,0.1), 
			  0 0 0 2px white,
			  0.3em 0.3em 1em rgba(0,0,0,0.3);
}
@keyframes mymove {
	0% {
		display: none;
		opacity: 0;
	}
	1% {
		display: block;
		opacity: 0;
	}
	100% {
		display: block;
		opacity: 1;
	}
}	
@keyframes unfoldIn {
	0% {
		transform: scaleY(.005) scaleX(0);
	}
	50% {
		transform: scaleY(.005) scaleX(1);
	}
	50% {
		transform: scaleY(.005) scaleX(1);
	}
	100% {
		transform: scaleY(1) scaleX(1);
	}
}
@keyframes zoomIn {
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
	}
}
@-webkit-keyframes animatetop {
	from {top: -200%; opacity: 0} 
	to {top:0; opacity: 1}
}
@keyframes animatetop {
	from {top: -200%; opacity: 0}
	to {top:0; opacity: 1}
}
.clos {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 30px;
	font-weight: bold;
	margin: 0;
	line-height: 1;
	border: 1px solid black;
	border-radius: 3px;
	padding: 0 8px;
	background: white
}
.clos:hover,
.clos:focus {
	color: blue;
	text-decoration: none;
	cursor: pointer;
}

/* -- modal silabus ----- */
.modal_content {
	overflow: auto;
	width: 100%; height: 100%;
}
.pading {
	padding: 10px 30px;
	max-width: 500px;
}
.kotak {
	border: solid 1px rgba(0,0,0, .6);
	border-bottom: solid 2px rgba(0,0,0, .6);
	border-right: solid 2px rgba(0,0,0, .6);
	padding: 10px 20px;
	border-radius: 3px
}
.pading h2 {
	font-size: 36px;
	font-family: 'Anton', sans-serif;
	font-weight: normal;
	color: black;
	margin: 0;
	margin-top: 30px
}
.modal_content ul {
	background: rgba(255, 255, 255, .4);
	border: solid 1px rgba(0,0,0,.3);
	border-bottom: solid 3px rgba(0,0,0,.3);
	border-right: solid 2px rgba(0,0,0,.3);
	border-radius: 5px;
	padding-top: 14px;
	padding-right: 15px;
	padding-bottom: 15px;
	margin: 6px 0 10px 0;
	font-size: 17px;
}
/* COLLAPSABLE */
.KOLAPP {
	cursor: pointer;
	margin-bottom: 10px;
}
.KOLAPP:after {
	content: 'Selengkapnya';
	border: solid 1px rgba(0,0,0,.3);
	border-bottom: solid 3px rgba(0,0,0,.3);
	border-right: solid 2px rgba(0,0,0,.3);
	background: rgba(255, 255, 255, .4);
	float: right;
	border-radius: 3px;
	padding: 2px 8px;
	font-size: 15px;
	text-decoration: none;
}
.dian:after {
	content: 'Tutup';
}
.content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.7s ease-out;
}
.content ol {
	border: solid 1px rgba(0,0,0,.3);
	border-bottom: solid 3px rgba(0,0,0,.3);
	border-right: solid 2px rgba(0,0,0,.3);
	background: rgba(255, 255, 255, .4);
	border-radius: 5px;
	font-size: 17px;
	padding-top: 15px;
	padding-right: 15px;
	padding-bottom: 15px;
	margin-top: 6px;
}
.flekPDF {
	display: flex;
	align-items: center;
}
.flekPDF img {
	width: 60px;
	height: 60px;
	margin-right: 16px;
	transition: transform .15s ease;
}
.flekPDF a {
	font-size: 18px;
	text-decoration: none; 
    color: black
}
.flekPDF:hover img {
	transform: scale(1.1);
}
.konten .footer p, .konten .footer h2 {
    text-align: center;
}
.KOTAK4 { 
	background-color: rgba(255, 240, 240, 0.7); 
	padding: 5px 30px 30px 30px;
	margin: 30px 0;
	max-width: 600px;
	text-align: justify;
	box-shadow: 
		inset 0 -3em 3em rgba(0,0,0,0.1), 
			  0 0  0 1px white,
			  0.3em 0.3em 1em rgba(0,0,0,0.3);
}
.flekKiri, .flekKanan {
	display: flex;
	align-items: center;
}
.flekKanan {
	flex-direction: row-reverse;
	justify-content: space-between;
}
.flekKiri img, .flekKanan img {
	width: 360px;
	height: auto;
	box-shadow: 
	inset 0 -3em 3em rgba(0,0,0,0.1), 
        0 0 0 1px white,
        0.2em 0.3em 0.15em rgba(0,0,0,0.3);
}
.flekKiri img {
	margin-right: 40px;
}
.flekKanan img {
	margin-left: 40px;
}
.flek-Info {
	position: absolute;
	left: 220px;
	bottom: 45px;
	display: flex;
	width: 470px;
	justify-content: space-between;
}
.flek_Info {
	display: flex;
	align-items: center;
}
.flek_Info img {
	width: 30px;
	height: 30px;
	margin-right: 10px
}
.flek_Info a, .flek_Info button {
	color: white;
	text-decoration: none;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	text-align: left;
}
.flek_Info a:hover, .flek_Info button:hover {
	text-decoration: underline;
}

.flekInfo {
	position: absolute;
	left: 220px;
	bottom: 45px;
	display: flex
}
.flekInfo a {
	display: flex;
	align-items: center;
	cursor: pointer;
	margin-right: 20px;
	color: white;
	text-decoration: none;
	line-height: 1
}
.flekInfo a:hover {
	text-decoration: underline
}
.flekInfo a img {
	width: 30px;
	height: 30px;
	margin-right: 10px
}
.layout_ukom {
	animation: mymove 2s;
	max-width: 500px;
	padding: 30px;
	margin-top: 240px
}
.layout_ukom h2 {
	color: white;
	font-family: "Archivo Black", sans-serif;
	margin: 0;
	font-size: 30px;
	text-shadow: 1px 1px black
}
.layout_ukom ol li {
	color: white;
	font-size: 16px;
	text-shadow: 1px 1px black;
	border: solid 1px white;
	padding: 10px 15px;
	margin-bottom: 10px;
	border-radius: 5px;
	background: rgba(0,0,0, .4)
}
.flekLOGO {
	position: absolute;
	left: 100px;
	top: 20px;
	display: flex;
	align-items: center;
	width: 340px;
	z-index: 1
}
.flekLOGOimg {
	width: 60px;
	height: 60px;
	border: 1px solid white;
	padding: 0 8px;
	border-radius: 5px;
	margin-right: 10px;
	background: linear-gradient(45deg, black, transparent)
}
.belajar {
	display: inline-block;
	font-size: 12px;
	padding: 0 6px;
	background-color: #daa14c;
	color: #fff;
	text-shadow: 1px 1px #000;
	border-radius: 1px;
}
.learning {
	font-size: 26.8px;
	line-height: .9;
	font-family: "Archivo Black", sans-serif;
	text-decoration: underline;
	color: white;
	text-shadow: 1px 1px black;
}
.lembaga {
	font-size: 12px;
	color: white;
	text-shadow: 1px 1px black;
}
.pilihCSMS {
	position: absolute;
	right: 0;
	top: 7px;
}
.colaps:after {
	content: "\2261";
	border: solid 1px white;
	border-radius: 5px;
	padding: 0 12px;
	font-size: 30px;
	z-index: 1;
	float: right;
	cursor: pointer;
	color: white;
}
.zia:after {
	background: rgba(250, 250, 250, .8);
	color: black
}
.conten {
	max-height: 0;
	overflow: hidden;
	transition: max-height .3s ease-out;
	margin-top: 60px;
}
.di-an {
	border: solid 1px #baafa7;
	border-bottom: solid 3px #8c8885;
	border-right: solid 2px #8c8885;
	background: #FFFCFA;
	border-radius: 15px;	
	padding: 15px 20px;
	overflow: auto;
	overscroll-behavior: auto contain;
}
.di-an a {
	text-decoration: none;
	color: black;
	transition: .3s ease;
	font-size: 16px	
}
.di-an a:hover {
	text-decoration: underline;
}
.di-anFlek {
	display: flex;
	align-items: center;
	margin: 10px 0;
}
.di-anFlek img {
	width: 20px;
	height: 20px;
	margin-right: 15px;
}
.left {
	float: left;
	width: 49%;
	}
.right {
	float: right;
	width: 49%;
	}
.group:after {
	content:"";
	display: table;
	clear: both;
    }
.border {
	border: solid 1px rgba(0,0,0, .2);
	padding: 20px 20px 20px 40px;
	border-radius: 5px;
}
ol.border, ul.border, .ko-tak p  {
	font-size: 18px;
}
.ko-tak {
	border: solid 1px rgba(0,0,0, .2);
	padding: 0 24px;
	border-radius: 5px;
}
.ko-tak ul {
	padding-left: 22px;
	font-weight: bold;
}
.biaya {
	background: #daa14c; color: white; padding: 0 5px; border-radius: 3px; text-shadow: 1px 1px black
}
.KOTAK4 a {
	text-decoration: none
}
button span.wa_call, a span.email {
	color: white;
	font-size: 16px;
	padding: 6px 12px;
	border-radius: 3px;
	transition: .3s ease;
}
button span img, a span img {
	margin-bottom: -5px;
}
a span.email { 
	background: #FA5A5A;
	text-shadow: 1px 1px black;
}
button span.wa_call {
	background: #20433F
}
button span.wa_call:hover, a span.email:hover {
	text-decoration: underline
}
ol button.selengkapnya {
	padding: 2px 10px
}
.layout_ukom .belajar {
	font-size: 17px
}
.flek_icon {
	position: absolute;
	left: 220px;
	bottom: 45px;
	display: flex;
	width: 400px;
	justify-content: space-between;
	margin: 0
}
.flek_icon ol {
	margin: 0;
}
.flek_icon a , .flek_icon button {
	color: white;
	font-family: 'Exo', sans-serif;
	text-decoration: underline;
	line-height: 1;
	font-size: 17px;
	transition: .2s ease;
	margin-left: 5px;
}
.flek_icon a:hover, .flek_icon button:hover {
	color: yellow;
}
.img_met2 {
	display: none
}
.left.kiri, .right.kanan {
	width: 48%;
	margin-bottom: 50px
}
.terlampir {
	margin-left: 30px;
}
.terlampir ul {
	line-height: 2
}
.border_jadwal {
	border: solid 1px rgba(0,0,0,0.3);
	border-radius: 3px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	height: 363px;
	box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1), 0 0 0 1px white, 0.2em 0.3em 0.15em rgba(0, 0, 0, 0.3);
	box-sizing: border-box;
	color: white
}
.jadwal {
	position: absolute;
	bottom: 30px;
	left: 36px;
	right: 36px;	
	width: auto
}
.jadwal .belajar {
	font-size: 16px;
	border-radius: 3px;
	padding: 0 10px;
}
.jadwal ul {
	text-decoration: underline;
	list-style-image: url('/1li_jadwal.svg');
	margin: 0;
}
.jadwal ul.img {
	list-style-image: url('/2li_jadwal.svg');
}
.jadwal ul li {
	padding-left: 5px
}
.tanggal {
	font-family: "Archivo Black", sans-serif;
	font-size: 20px;
	line-height: 1;
	margin-left: 45px;
}
.bulan {
	display: flex;
	justify-content: space-around
}
.note {
	border: solid 1px rgba(0,0,0, .1);
	padding: 30px 20px 30px 60px;
	border-radius: 5px;
	list-style-image: url('/ceklis.svg');
	line-height: 2;
	margin-top: -20px;
}
.layoutbrosur {
	display: none;
	position: fixed;
	bottom: 5px;
	right: 10px;
	margin: auto;
	padding: 0 30px 5px 0;
	border-radius: 10px;
	border: 1px solid #6c757d;
	width: 249px;
	height: max-content;
	z-index: 1;
	opacity: 0;
	-webkit-transition-property: display, opacity;
	-o-transition-property: display,opacity;
	transition-property: display, opacity;
	-webkit-transition-timing-function: ease-in-out;
	-o-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
	transition-behavior: allow-discrete;
	-webkit-transition-duration: 1s;
	-o-transition-duration: 1s;
	transition-duration: 1s;
	background: #fffcfa;
	animation-name: kanan;
	animation-duration: .7s;
	font-family: "Exo", sans-serif;
	-webkit-box-shadow: 1px 3px 15px 10px rgba(0, 0, 0, .2);
	box-shadow: 1px 3px 15px 10px rgba(0, 0, 0, .2);
}
.layoutbrosur.open {
	opacity: 1;
	display: block;
}
.layoutbrosur span {
	font-size: 20px;
	float: right;
	cursor: pointer;
	margin-top: 5px;
	padding: 0 10px;
	margin-right: -30px;
	font-weight: bold;
}
.layoutbrosur ul {
	font-size: 15px;
	line-height: 1.3;
	padding-left: 35px;
	color: #374655
}
.layoutbrosur ul li {
	border-bottom: 1px solid rgba(0,0,0, .2);
	padding: 10px 0;
	cursor: pointer
}
.layoutbrosur ul li:hover {
	color: #2b4e84;
	font-weight: bold;
	transition: .15s ease;
}
@media (min-width: 992px) and (max-width: 1199.98px) {
	.flek-Info {
		left: 170px;
		}
	.depan, .konten {
		max-width: 900px;
		}
	p, ol, ul {
		font-size: 18px;
		}
	ol.border, ul.border, .ko-tak p  {
		font-size: 17px;
		}
	.flekInfo { 
		left: 180px
		}
	.flekLOGO {
		left: 60px;
		}
	.flek_icon {
		left: 190px;
		}
	.border_jadwal {
		height: 300px;
		}
	}
	
@media (min-width: 768px) and (max-width: 991.98px) {	
	.hero-image {
		background: none;
		height: 100%;
		}
	.depan {
		padding: 0;
		height: 100%;
		border: none;
		box-shadow: none;
		}
	p, ol, ul {
		font-size: 18px;
		}
	ol.border, ul.border, .ko-tak p  {
		font-size: 17px;
		}
	.flek-Info {
		left: 155px;
		}
	.flekInfo {
		left: 160px;
		}
	.konten { 
		padding: 20px 40px;
		}
	.silabus, .pelajari_selengkapnya, .Unduh_Brosur, .Unit_Kompetensi {
		width: auto;
		height: 65%;
		}
	.modal_body {
		right: 60px;
		left: 60px;
		}
	.layout_ukom {
		margin-top: 200px
		}
	.flekLOGO {
		left: 40px;
		}
	.flek_icon {
		left: 160px;
		}
	.jadwal {
		bottom: 20px;
		left: 20px;
		right: 20px;
		}
	.border_jadwal {
		width: 100%;
		height: 300px;
		}
	}
@media (min-width: 576px) and (max-width: 767.98px) {  
	.hero-image {
		height: 100%;
		}
	.depan {
		left: 40px;
		right: 40px;
		}
	.konten { 
		padding: 20px 64px;
		}
	h2 {
		font-size: 24px
		}
	p, ol, ul {
		font-size: 18px;
		}
	.flek-Info {
		left: 40px;
		right: 40px;
		width: auto
		}
	.flekInfo {
		left: 40px
		}
	.silabus, .pelajari_selengkapnya, .Unduh_Brosur, .Unit_Kompetensi {
		width: auto;
		height: 70%;
		}
	.modal_body {
		right: 60px;
		left: 60px;
		}
	.admin, .adminCSMS {
		height: 534px;
		width: 400px;
		}
	.admin {
		background-image: url("https://belajark3.com/admin1.webp");
		}
	.adminCSMS {
		background-image: url("https://belajark3.com/admin-csms1.webp");
		}
	.CALL1 {
		top: 225px;
		left: 202px;
		font-size: 14px;
		}
	.CALL2 {
		top: 375px;
		left: 202px;
		font-size: 14px;
		}
	.pading {
		max-width: 100%;
		padding: 10px 40px;
		}
	.flekKiri, .flekKanan {
		display: block;
		}
	.flekKiri img, .flekKanan img {
		width: 80%;
		height: auto;
		margin-right: auto;
		margin-left: auto;
		display: block;
		}
	.KOTAK4 {
		text-align: left
		}
	.flekLOGO {
		left: 40px;
		right: 40px;
		top: 40px;
		width: auto;
		}
	.left, .right, .left.kiri, .right.kanan {
		width: 100%;
		}
	.layout_ukom {
		margin-top: 420px;
		}
	.left {
		margin-bottom: 40px;
		}
	.jawab {
		width: auto;
		left: 50px;
		right: 50px;
		padding: 20px 40px;
		background-image: url("https://belajark3.com/bg-CS1.webp");
	    }
	.jawab ol {
		height: auto;
		}
	.flek_icon {
		left: 40px;
		right: 40px;
		margin: auto;
		width: auto;
		bottom: 30px;
		}
	.flekKanan img.img_met1 {
		display: none
		}
	.di-anFlek img {
		width: 18px;
		height: 18px;
		}
	.di-an {
		width: 260px;
		}
	}
@media screen and (max-width: 575.98px) {
	.hero-image {
		background: none;
		height: 660px;
		}
	.depan {
		padding: 0;
		height: 100%;
		border: none;
		box-shadow: none;
		}
	h1 {
		margin: 0
		}
	h2 {
		font-size: 23px
		}
	p, ol, ul {
		font-size: 17px;
		}
	ol.border, ul.border, .ko-tak p  {
		font-size: 16.5px;
		}
	.flek-Info {
		left: 15px;
		right: 15px;
		width: auto;
		bottom: 40px
		}
	.flek_Info a, .flek_Info button {
		font-size: 13px;
		}
	.flekInfo {
		left: 15px;
		right: 15px;
		bottom: 40px;
		justify-content: space-between;
		}
	.flekInfo a {
		margin-right: 0;
		}
	.flekInfo a div {
		width: 55px;
		font-size: 13px;
		}
	.flekInfo a img {
		width: 30px;
		height: 30px;
		}
	.info {
		font-size: 13px;
		}
	.infoFlek img {
		width: 35px;
		height: 35px;
		}
	.admin, .adminCSMS {
		height: 442px;
		width: 330px;
		}
	.admin {
		background-image: url("https://belajark3.com/admin1.webp");
		}
	.adminCSMS {
		background-image: url("https://belajark3.com/admin-csms1.webp");
		}
	.CALL1 {
		top: 184px;
		left: 161px;
		font-size: 12px;
		}
	.CALL2 {
		top: 308px;
		left: 161px;
		font-size: 12px;
		}
	#myBtn {
		bottom: 45px;
		}
	.clos {
		font-size: 20px;
		padding: 0 5px
		}
	.silabus, .pelajari_selengkapnya {
		width: auto;
		height: 70%;
		}
	.Unduh_Brosur {
		width: auto;
		height: 420px;
		}
	.Unit_Kompetensi {
		width: auto;
		height: 90%;
		}
	.modal_body {
		right: 15px;
		left: 15px;
		}
	.Unduh_Brosur, .pelajari_selengkapnya {
		padding: 40px 0;
		}
	.pading {
		padding: 15px
		}
	.pading h2 {
		font-size: 26px;
		margin-top: 10px
		}
	.selengkapnya {
		font-size: 16px
		}
	.info2 {
		display: none
		}
	.flekKiri, .flekKanan {
		display: block;
		}
	.flekKiri img, .flekKanan img {
		width: 100%;
		height: auto;
		margin-right: auto;
		margin-left: auto;
		display: block;
		}
	.KOTAK4 {
		padding: 5px 20px 30px 20px;
		text-align: left
		}
	.konten-image {
		background-image: url("https://belajark3.com/new_images/konten1.webp");
		padding-bottom: 60px
		}
	.layout_ukom {
		margin-top: 340px;
		padding: 15px
		}
	.layout_ukom h2 {
		font-size: 26px;
		line-height: 1
		}
	.layout_ukom .belajar {
		font-size: 15px
		}
	.layout_ukom ol {
		padding-left: 20px
		}
	.di-an {
		padding: 10px 20px;
		width: 250px;
		}
	.di-anFlek {
		font-size: 15px;
		}
	.di-anFlek img {
		width: 18px;
		height: 18px;
		margin-right: 10px;
		}
	.flekLOGO {
		left: 15px;
		width: auto;
		right: 15px
		}
	.left, .right, .left.kiri, .right.kanan {
		width: 100%;
		}
	.left {
		margin-bottom: 40px
		}
	.ko-tak {
		padding: 0 20px;
		}
	.border {
		font-size: 17px
		}
	button span.wa_call, a span.email {
		font-size: 15px;
		}
	.jawab {
		width: auto;
		left: 20px;
		right: 20px;
		padding: 20px;
		background-image: url("https://belajark3.com/bg-CS1.webp");
		}
	.jawab ol {
		font-size: 16px;
		height: 354px;
		padding-left: 24px;
		margin-right: -20px;
		padding-right: 20px
		}
	.flek_Info img {
		width: 26px;
		height: 26px;
		margin-right: 5px;
		}
	.flek_icon {
		left: 15px;
		right: 15px;
		margin: auto;
		width: auto;
		}
	.flek_icon a, .flek_icon button {
		font-size: 16px;
		}
	.flek_icon {
		bottom: 30px;
		}
	.flekKanan img.img_met1 {
		display: none
		}
	.border_jadwal {
		border: none;
		box-shadow: none;
		border-radius: 20px;
		color: black;
		height: 400px;
		width: 100%
		}
	.jadwal {
		left: 10px;		
		}
	.bulan {
		display: block;
		width: max-content;
		}
	.jadwal ul {
		list-style-image: url('/1li_jadwal1.svg');
		}
	.jadwal ul.img {
		list-style-image: url('/2li_jadwal1.svg');
		}
	.jadwal .belajar {
		font-size: 15px;
		background: rgb(55,70,85);
		margin-left: -7px;
		}
	.note {
		border: none;
		line-height: 1.6;
		padding: 0;
		padding-left: 40px;
		margin-top: -10px;
		}
	.terlampir {
		margin-left: 0
		}
	.terlampir ul {
		line-height: 1.6
		}
	.jadwal ul li {
        padding-left: 10px;
        }
    .tanggal {
        margin-left: 50px;
	    font-size: 22px;
        }
    .di-an a {
        font-size: 15px	
        }
    .content ol {
        font-size: 16px;
        }
    .modal_content ul {
        font-size: 16px;
        }
	.flekPDF a {
		font-size: 17px
		}
	.flek_icon ol {
        padding-left: 25px
        }
    .layoutbrosur {
		width: 140px
		}
	.layoutbrosur ul {
		font-size: 14px
		}
	}