body{
	background: #efefef;
}
.body{width:100%;max-width:640px;}
.bodyinside{padding:0;}

/* membuat semua partisi menjadi 100% */
.gp15, .gp18, .gp20, .gp22, .gp23, .gp25, .gp27, .gp28, .gp30, .gp32, .gp33, .gp35, .gp37, .gp38, .gp40,
.gp42, .gp43, .gp45, .gp47, .gp48, .gp50, .gp55, .gp60, .gp65, .gp66, .gp67, .gp70, .gp75,.gp78, .gp80, .gp85, .gp90, .gp95{
	width: 100%;
	float: none;
	padding-bottom: 1.5em;
}

/*
	gsresponsive untuk grid dengan element sempit
	gsinside > distyle manual untuk box dengan padding
*/
.gsresponsive .gsitem{ float: left; margin: 0; width: 25%; }
.gsresponsive .gsiteminside{ padding: 2% 5% 5% 5%; }
.gsresponsive .clear{ display: none; }
.gsresponsive .clear4{ clear: both; width: 100px; height: 1px; display: block; }
.gsresponsive .clear2gs2{ clear: both; width: 100px; height: 1px; display: block; }
.gsresponsive .gs2{ width: 50% !important; }
@media all and (max-width: 480px) {
	.gsresponsive .gsitem{ margin: 0; width: 33%; }
	.gsresponsive .clear4{ display: none; }
	.gsresponsive .clear3{ clear: both; width: 100px; height: 1px; display: block; }
}
@media all and (max-width: 360px){
	.gsresponsive .gsitem{ margin: 0; width: 50% !important; }
	.gsresponsive .clear3{ display: none; }
	.gsresponsive .clear2{ clear: both; width: 100px; height: 1px; display: block; }
	.gsresponsive .gs2{ margin: 0; width: 100% !important; }
	.gsresponsive .clear2gs2{ display: none; }
}


/* responsive untuk grid dengan element lebar */
.gsresponsive2 .gsitem{ float: left; margin: 0; width: 33%; }
.gsresponsive2 .gsiteminside{ padding: 5%; }
.gsresponsive2 .clear{ display: none; }
.gsresponsive2 .clear3{ clear: both; width: 100px; height: 1px; display: block; }
.gsresponsive2 .clear2gs2{ clear: both; width: 100px; height: 1px; display: block; }
.gsresponsive2 .gs2{ width: 50% !important; }
@media all and (max-width: 480px) {
	.gsresponsive2 .gsitem{ margin: 0; width: 50%; }
	.gsresponsive2 .clear3{ display: none; }
	.gsresponsive2 .clear2{ clear: both; width: 100px; height: 1px; display: block; }
}
@media all and (max-width: 360px) {
	.gsresponsive2 .gsitem{ margin: 0; width: 100% !important; }
	.gsresponsive2 .clear2gs2{ display: none; }
}

/*  responsive untuk thumbnail - data
	- gdresponsive > untuk data yang banyak, misalnya judul dan text
	- gdresponsive2 > untuk data yang sedikit, misalnya judul saja
*/
.gdresponsive2 .gdt{ width: 10%; }
.gdresponsive2 .gdd{ width: 88%; }
@media all and (max-width: 480px) {
	.gdresponsive2 .gdt{ width: 15%; }
	.gdresponsive2 .gdd{ width: 80%; }
}
@media all and (max-width: 414px){
	.gdresponsive .gdt, .gdresponsive .gdd{ margin: 0; width: 100%; float: none; }
	.gdresponsive .gdt .thumbnail{ padding-bottom: 10px; }
	.gdresponsive .thumb_noimage{display: none;}
}
@media all and (max-width: 360px) {
	.gdresponsive2 .gdt{ width: 18%; }
	.gdresponsive2 .gdd{ width: 77%; }
}


/* table mobile responsive */
.gtabledatamobile{padding:10px 0}
.gtabledatamobile table{width:100%;margin-bottom:20px;border:1px solid #ddd}
.gtabledatamobile td{text-align:left;vertical-align:top;padding:12px;line-height:180%}
.gtabledatamobile tr{background:#F6F6F6;border-bottom:1px dotted #ddd}
.gtabledatamobile tr.even{background:#FFF}
.gtabledatamobile .tdlabel{width:100px}

/*
@media all and (max-width: 414px){
	.gtabledatamobile table,.gtabledatamobile tr,.gtabledatamobile td,.gtabledatamobile th,.gtabledatamobile tbody{display:block}
	.gtabledatamobile tr{background:#FFF!important;border:none!important}
	.gtabledatamobile td{border-bottom:1px dotted #ddd}
	.gtabledatamobile .tdlabel{width:auto!important;background:#F6F6F6;font-weight:700}
}
*/

.thumbnail_promo{
	max-width: 360px;
	margin-left: auto;
	margin-right: auto;
}

.vlist-responsive li{
    width: 33%;
    float: left;
}
.gformtable table, .gformtable tr, .gformtable td, .gformtable th, .gformtable tbody{
	display: block;
	padding-left: 0;
	padding-right: 0;
}
.gformtable tr{
	padding-bottom: 10px;
}
.gformtable .txt, .gformtable textarea, .gformtable select {
	max-width: 90%;
}



.pwrap .promo-item img{
    width: auto;
	max-width: 320px;
}

.slist li{
	width: 33%;
}

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

	h1.pagetitle{
		font-size: 2.2em;
	}

    .vlist-responsive li{
        width: 50%;
        float: left;
    }

}

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


    .vlist-responsive li{
        width: 100%;
        float: left;
    }

}
@media all and (max-width: 360px) {
	.slist li{
		width: 50%;
		font-weight: normal;
	}
	.pwrap .promo-item img{
	    width: 100%;
	}
}
@media all and (max-width: 320px) {
	.body{
		min-width: 280px;
	}

	.slist li{
		width: 100%;
	}

	.breadcrumb{
		font-size: 11px;
	}
}