@media all and (display-mode: fullscreen) {
			  .root:not(:fullscreen) #fullscreen-button {
				display: none;
			  }
			}

			@media screen and (min-width: 769px) {
				.atas{
					background: rgb(247,207,128); 
					background: -moz-linear-gradient(top, rgba(247,207,128,1) 0%, rgba(255,255,255,1) 100%); 
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,207,128,1)), color-stop(100%,rgba(255,255,255,1))); 
					background: -webkit-linear-gradient(top, rgba(247,207,128,1) 0%,rgba(255,255,255,1) 100%); 
					background: -o-linear-gradient(top, rgba(247,207,128,1) 0%,rgba(255,255,255,1) 100%); 
					background: -ms-linear-gradient(top, rgba(247,207,128,1) 0%,rgba(255,255,255,1) 100%); 
					background: linear-gradient(to bottom, rgba(247,207,128,1) 0%,rgba(255,255,255,1) 100%);
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7cf80', endColorstr='#ffffff',GradientType=0 );
					width:100%;
					height:50px;
					font-size:2.5vw; 
					text-align:center; 
					font-weight:bold; 
					color:#333; 
					line-height:50px;
				}

				.jdl{
					display:block;
				}

				.header{

				}

				.detailu{
					display:block;
				}

				.detailuser{
					text-align:right;
					font-size:2.5vw;
					padding-right:5px;
					font-weight:bold;
					background: rgb(247,207,128);
				}

				.detailusermobile{
					display:none;
				}

				#container{
					position: relative;
					width: 95%;
					min-height: 200px;
					margin-bottom: -100px;
					padding-bottom: 100px;
					padding-left:5px;
					padding-right:5px;
					padding-top:10px;
				}

				.footermenu{
					display:none;
				}

                .icon{
                  display: none;  
                }

                .iconfav{
                    display: none;
                }

                .slider-container {
                    position: relative;
                    overflow: hidden;
                    width: 100%;
                    height: 200px; /* Atur tinggi tetap */
                    border-radius: 16px;
                   /* box-shadow: 0 12px 25px rgba(0,0,0,0.5);*/
                  }
                  .slider-track {
                    display: flex;
                    transition: transform 0.5s ease-in-out;
                    height: 100%;
                  }
                  .slidex {
                    min-width: 100%;
                    flex-shrink: 0;
                    position: relative;
                    overflow: hidden;
                    margin: 0 2px;
                    align-items: center;
                  }
                  .slidex img {
                    width: 100%;
                    height: 200px;
                    object-fit: contain; /*Pastikan gambar menutupi area tanpa distorsi */
                    object-position: center; /* Pusatkan gambar */
                    display: block;
                    border-radius: 16px;
                  }
                  .dots {
                    text-align: center;
                    position: absolute;
                    bottom: 10px;
                    width: 100%;
                    z-index: 1;
                  }
                  .dot {
                    height: 12px;
                    width: 12px;
                    margin: 0 4px;
                    background-color: #ddd;
                    border-radius: 50%;
                    display: inline-block;
                    cursor: pointer;
                    transition: background 0.3s;
                  }
                  .dot.active {
                    background-color: #444;
                  }
			}

			@media screen and (min-width: 0px) and (max-width: 768px) {
				.atas{
					background: rgb(247,207,128); 
					width:100%;
					height:20px;
					line-height:20px;
					font-size:2.5vw; text-align:center; font-weight:bold; color:#333; /*text-shadow: 2px 2px 2px #fff, 3px 6px 8px #74706d;*/
				}

				.jdl{
					display:none;
				}

				.header{
					position:fixed; 
					top:0px; 
					height:60px; 
					width:100%;
					background: rgb(247,207,128);
					z-index:999;
					border-bottom-right-radius:10px;
					border-bottom-left-radius:10px;
					box-shadow: 0 4px 4px -3px #74706d;
				}

				.detailu{
					display:none;
				}

				.detailusermobile{
					display:block;
				}

				.detailusermobile{
					text-align:right;
					font-size:2.5vw;
					padding-right:5px;
					font-weight:bold;
					background: rgb(247,207,128);
				}

			
				#container{
					position: relative;
					width: 95%;
					min-height: 200px;
					margin-bottom: -100px;
					padding-bottom: 100px;
					padding-left:5px;
					padding-right:5px;
					padding-top:10px;
					margin-top:55px;
				}

				.footermenu{
					display:block;
					position:fixed; 
					bottom:0px; 
					background-color:#fff; 
					width:100%; 
					text-align:center;
					color:#000;
					box-shadow: 0 -5px 5px -5px #ccc;
					height:80px;
                    padding-top: 5px;
				}

				.home > ul {
					grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
					grid-gap: 0rem;
					list-style-type: none;
					width:90%;
					text-align:center;
					display: grid;
					padding-left:1rem;
					padding-right:1rem;
					padding-bottom:5px;
				}
				
				.menuc{
					background-color:#fff; 
					width:100%; 
					text-align:center;
					color:#FFFFFF;
					font-size:2vw;
					padding-left:10px;
					border:1px solid;
				}

				.menuchild{
					border-radius: 5px;
					padding-left: 10px;
					padding-right: 10px;
					padding-top:15px;
					padding-bottom:15px;
					margin:5px;
					font-weight:bold;
					white-space: nowrap;
					font-size : 2.5w;
					color:red;
					border: 1px solid rgb(247, 207, 128);
					cursor: pointer;
					-webkit-border-radius:0.3em;
				}
				
				.menuchild:hover{
					border-color:red;
					color:rgb(247, 207, 128);
				}

                .icon{
                    display: block;  
                }

                .iconfav{
                    display: block;
                }

				.icon > ul {
					grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
					grid-gap: 1rem;
					list-style-type: none;
					width:90%;
					text-align:center;
					display: grid;
					padding: 0.1rem 0.5rem;
				}
				
				.iconx > ul {
				grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
				grid-gap: 1rem;
				list-style-type: none;
				width:95%;
				text-align:center;
				display: grid;
				padding: 1rem 1rem;
				}
				
				.iconfav > ul {
					grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
					grid-gap: 1rem;
					list-style-type: none;
					width:90%;
					text-align:center;
					display: grid;
					padding: 0.1rem 0.5rem;
				}

				.textBox{  
					background-image:url('images/search.png');   
					background-position:right;   
					background-repeat:no-repeat;   
					padding-right:25px;
					padding-left:5px;
					background-size: 20px;
					width:55%;
					height:25px;
					border:solid 1px #ccc;
					-webkit-border-radius:0.3em;
					float:left;
					margin:3px;
				}

                .slider-container {
                    position: relative;
                    overflow: hidden;
                    
                    height: 100px; /* Atur tinggi tetap */
                    border-radius: 16px;
                   /* box-shadow: 0 12px 25px rgba(0,0,0,0.5);*/
                  }
                  .slider-track {
                    display: flex;
                    transition: transform 0.5s ease-in-out;
                    height: 100%;
                  }
                  .slidex {
                    
                    min-width: calc(100% - 4px);
                    flex-shrink: 0;
                    position: relative;
                    overflow: hidden;
                    margin: 0;
                    align-items: center;
                  }
                  .slidex img {
                    width: 100%;
                    height: 100px;
                    object-fit: contain; /*Pastikan gambar menutupi area tanpa distorsi */
                    object-position: center; /* Pusatkan gambar */
                    display: block;
                  }
                  .dots {
                    text-align: center;
                    position: absolute;
                    bottom: 10px;
                    width: 100%;
                    z-index: 1;
                  }
                  .dot {
                    height: 12px;
                    width: 12px;
                    margin: 0 4px;
                    background-color: #ddd;
                    border-radius: 50%;
                    display: inline-block;
                    cursor: pointer;
                    transition: background 0.3s;
                  }
                  .dot.active {
                    background-color: #444;
                  }

			}

			.footer{
				position:fixed; 
				font-weight:bold;
				bottom:0px; 
				background-color:rgb(233, 149, 27); 
				width:100%; 
				text-align:center;
				color:#fff;
				height:10px;
				line-height:10px;
				font-size:7px;
				z-index:999;
			}
			
			.image{
				/*border: 1px solid #ddd;*/
				border-radius: 10px;
				padding-left: 10px;
				padding-right: 10px;
				padding-top:2px;
				padding-bottom:2px;
				margin-right:5px;
				cursor:pointer;
				color:#666;
			}
			
			.learning > ul {
				grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
				grid-gap: 1rem;
				list-style-type: none;
				width:90%;
				text-align:center;
				display: grid;
				padding: 0.1rem 0.5rem;
			}
			
			.learning-image{
				-webkit-border-radius:5em;
				width:70px;
				height:70px;
			}

			/* jssor slider loading skin spin css */
			/*.jssorl-009-spin img {
				animation-name: jssorl-009-spin;
				animation-duration: 1.6s;
				animation-iteration-count: infinite;
				animation-timing-function: linear;
			}
	
			@keyframes jssorl-009-spin {
				from { transform: rotate(0deg); }
				to { transform: rotate(360deg); }
			}*/
			
			/*jssor slider bullet skin 111 css*/
			/*.jssorb111 .i {position:absolute;color:#fff;font-family:"Helvetica neue",Helvetica,Arial,sans-serif;text-align:center;cursor:pointer;z-index:0;}
			.jssorb111 .i .n {display:none;}
			.jssorb111 .i .b {fill:#fff;stroke:#000;stroke-width:500;stroke-miterlimit:10;stroke-opacity:.5;}
			.jssorb111 .i:hover .b {fill:#fea900;stroke:#fea900;stroke-width:6000;stroke-opacity:1;}
			.jssorb111 .iav .b {fill:#000;stroke-width:6000;stroke-opacity:1;}
			.jssorb111 .i.idn {opacity:.3;}
			.jssorb111 .iav .n, .jssorb111 .i:hover .n {display:block;}
	
			.jssora053 {display:block;position:absolute;cursor:pointer;}
			.jssora053 .a {fill:none;stroke:#fff;stroke-width:640;stroke-miterlimit:10;}
			.jssora053:hover {opacity:.8;}
			.jssora053.jssora053dn {opacity:.5;}
			.jssora053.jssora053ds {opacity:.3;pointer-events:none;}*/