/*FONT*/
@font-face {
    font-family: 'fonartoregular';
    src: url('../js/font/Fonarto-webfont.eot');
    src: url('../js/font/Fonarto-webfont.eot?#iefix') format('embedded-opentype'),
         url('../js/font/Fonarto-webfont.woff2') format('woff2'),
         url('../js/font/Fonarto-webfont.woff') format('woff'),
         url('../js/font/Fonarto-webfont.ttf') format('truetype'),
         url('../js/font/Fonarto-webfont.svg#fonartoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'arialregular';
    src: url('../js/font/arial-webfont.eot');
    src: url('../js/font/arial-webfont.eot?#iefix') format('embedded-opentype'),
         url('../js/font/arial-webfont.woff2') format('woff2'),
         url('../js/font/arial-webfont.woff') format('woff'),
         url('../js/font/arial-webfont.ttf') format('truetype'),
         url('../js/font/arial-webfont.svg#arialregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*mobile320*/
@media only screen and (min-width: 10px) and (max-width: 1200px) {
	body{width:100%; margin:0 auto; padding:0; overflow-x:hidden;}
	.droptentang, .dropproduk, .dropresep, .droptips, .dropevents, .dropbaking, .dropmitra, .dropkontak, .dropsitemap, .dropkarir{display:none; visibility:hidden;}
	
	.m-yes{display:block;}
	.m-no{display:none;}
	
	/*font*/
	.f-call{font-size:18px;}
	.f-copyright{font-size:10px;}	
	.f-drop-link a{padding-bottom:5px;}	
		.f-drop-link a:hover{color:#243772}
	.f-title{font-size:14px;}
	
	/*space*/
	.space-4{padding-top:20px;}
	
	.line-isotope{margin:18px 0 28px 0;}
	
	/*btn*/
	.btn-login-yes{right:80px; top:20px;}
	.btn-login-no{right:80px; top:20px;}
	.btn-next{background-size: 32px 32px; width: 32px; height: 32px; right:10px; top:75px;}
	.btn-prev{background-size: 32px 32px; width: 32px; height: 32px; left:10px; top:75px;}
	.btn-prev.src, .btn-next.src{top:90px;}
	.btn-top{background-position:-300px -89px; background-size: 900px 600px; width: 30px; height: 30px; margin-left:-20px; bottom:90px;}
	.btn-tooltip{float:right; margin-top:10px;}
	.btn-sitemap-open{position:absolute; right:10px; top:20px;}
	.panel-2 .btn-bottom{background: url(../images/icon/sprite.png) no-repeat -120px -86px; background-size: 600px 400px; width: 16px; height: 16px;}
		.panel-2 .btn-bottom:hover{background-position:-120px -104px;}
	.btn-share-m, .btn-chat-m, .btn-back-m{display:inline-block; background: url(../images/icon/sprite.png) no-repeat; background-size: 600px 400px; width: 58px; height: 32px; cursor:pointer;}
	.btn-share-m{background-position:-1px -199px;}
	.btn-chat-m{background-position:-1px -128px;}
	.btn-back-m{background-position:-1px -272px;}
		.btn-share-m:hover, .btn-chat-m:hover, .btn-back-m:hover{height: 40px;}
	.btn-down{display:none;}
	
	/*isotope*/
	.button {padding: 3px 10px; font-size: 15px; margin-bottom:5px;}	
	
	/*scroll*/
	.scrollgeneric{line-height: 1px; font-size: 1px; position: absolute;top: 0; left: 0;}
	.vscrollerbase{visibility: visible; width: 63px; background:none;}
	.vscrollerbar{background-position:-568px -129px; width: 32px; height: 32px; background-size: 600px 400px;}
	
	/*header*/
	header, .space-head{display:none;}
	.header-mobile{height:95px; width:100%; display:block; background:#fcd333;}
		.menu-mobile{position:absolute; z-index:999;}
			.mm-l{float:left; margin:2px 0 0 10px; font-family: 'fonartoregular';}
			.mm-r{float:right; margin:3px 10px 0 0;}
		.logo-bogasari{width:100px; height:auto; margin:5px 0 0 10px;}
		.lang{right:125px; top:20px;}
		.sb-search{right:35px; top:15px;}
	
	.sidebar{display:none;}
	
	/*content*/
	.main-content{width:300px; margin:0 auto;}
		.icon-menu, .icon-menu2{width:100%;}
		.icon-menu img, .icon-menu2 img{max-width:100%;}
		.icon-menu li{width:75px; margin-right:0;}
		.icon-menu a, .icon-menu2 a{font-size:13px; line-height:8px;}		
		.icon-menu2 li{width:90px; margin-right:15px;}				
		
		/*newshome*/
		.sliderwrapper .contentdiv{width:100%; margin:0 auto;}
		
		/*produk*/
		.ap{width:75px; padding-top:70px; margin-bottom:10px; background-size:525px 59px;}
			a .ap-link{font-size:14px;}
			.ap.icon-1{background-position:0px 0px;}
			.ap.icon-2{background-position:-75px 0px;}
			.ap.icon-3{background-position:-150px 0px;}
			.ap.icon-4{background-position:-225px 0px;}
			.ap.icon-5{background-position:-300px 0px;}
			.ap.icon-6{background-position:-375px 0px;}
			.ap.icon-7{background-position:-450px 0px;}
			
				
		/*kontak*/
		#map-canvas{height: 280px;}
		.kontak-1{width:260px; font-size:25px;}
		.kontak-2{margin-left:0px; width:300px; margin-top:10px;}
		.kontak-6{width:300px; margin-left:0px; margin-bottom:20px;}		
		
		/*karir*/
		.k-form3{margin-left:0px; clear:both;}
			
		/*sitemap*/
		.ds-header{width:100%; margin-top:10px;}
		.ds-content{width:100%; margin-top:20px;}
		
		/*accordion*/
		.acc-2{margin-left:0px; width:100%;}			
			
		/*recommend*/
		.reco-1{padding-top:10px; margin-right:20px; float:left; padding-bottom:10px;}
		.reco-2{float:left;}
			.reco-2 img{margin-right:5px; width:90px; height:auto;}
		.reco-3{float:right; width: 98px; height: 83px; padding-top:15px; background-position:-1003px 0; background-size:1100px 733px;}
			a.reco-3{font-size:13px; color:#243772; font-family: 'fonartoregular'; line-height:20px;}
		
		/*panel*/
		.panel-1{float:none; width:100%;}
			.panel-1 p{font-size:13px; color:#2b2b2b;}
		.panel-2{float:left; font-size:14px; margin-top:20px;}
		
		/*page*/
		.page{font-size:13px; margin-top:-30px; margin-bottom:5px;}
			.page-head{padding-top:9px;}
			.page a{font-size:13px; width: 20px; height: 20px; padding-top:10px;}	
		
		/*banner*/
		.banner-resep{background:url(../images/banner/book-mobile.jpg) top left; background-size:100% auto; height:100%;}
			.br-content{width:300px; margin:0 auto; padding-top:30px;}
				.brc li{float:none; width:300px; margin:0 auto; padding-bottom:30px;}
				.brc-1{height:90px;}	
					.brc-1-1 img{width:100%;}
				.brc-2-1{width:136px;}
				ol.list-detail-resep li{padding:0; margin:0; margin-left:15px;}
				
				.badge-resep{margin:0 auto; text-align:center;}
					.badge-resep img{width:100px; height:auto;}
				.img-open1{display:none;}
					
		.banner-artikel-tips{height:200px;}
			.bat-content{width:300px; margin:0 auto; padding-top:30px;}
				.batc-1{width:300px; padding-top:20px;}
					.batc-1-1 img{width:100%;}
				.batc-2{width:300px; margin-top:20px;}
					.batc-2.m-yes{position:relative;}
					.m-yes .f-batc-1, .m-yes .f-batc-2, .m-yes .f-batc-3, .m-yes .f-batc-3 a, .m-yes .f-like{color:#2b2b2b;}
		
		.banner-bbc{background:#faf8f9; height:100%; padding-bottom:20px;}
			.bbc-content{width:300px; margin:0 auto; padding-top:0px;}
				.bbcc-1{width:300px; margin-top:20px;}
					.bbcc-1-1{margin:0;}
					.bbcc-1-1 img{width:100%;}
				.bbcc-2{width:300px; margin-left:0px;}
					.bbcc-2-1{width:136px;}
					.bbcc-2 .styled-select{margin-top:10px;}
					.fixed-h3{width: 100%; height: auto; background:none; margin:0 auto; padding:0; margin-bottom:20px;}
						.event-photo{width:90%;}
						.event-photo img{width:100%;}
		
		.banner-jadwal{background:#faf8f9; height:100%;}
			.bj-content{width:300px; padding-top:30px;}
				.bjc-1{width:300px;}
					.bjc-1 img{max-width:100%;}
				.bjc-2{width:300px; margin-left:0px;}
				.bjc-3{width:300px; margin-top:40px;}				
		
		.banner-bmc{background:#C3C3C3; height:100%;}
			.bbmc-content{width:300px; padding-top:30px;}	
			.bbmcc-2{width:300px; padding:100px 0 30px 0; margin:0 auto;}	
			.list-bmc li{padding:0; margin:0; padding-bottom:5px;}			
		
		.banner-login{background:url(../images/banner/book-mobile.jpg) top left; background-size:100% auto; height:100%; padding-bottom:20px;}
			.bl-content{width:300px; padding-top:30px;}
				.blc li{width:100%; margin-right:0px;}
					.blc-2{margin-left:0px;}
					.blc-3{width:300px; margin-top:20px;}
						.blc-3-2{width:216px; margin-left:10px;}
					.blc-4-1{padding-bottom:3px;}
					.blc-4-1, .blc-4-3{width:100%;}
					.blc-4-2{margin-bottom:5px;}		
		
		/*tooltip*/
		.detail-tip{position:relative; display:block; bottom:0px; right:0; margin-top:20px;}
			.bj-tip{display:none; width:280px; height:280px; background:url(../images/bg/bg-tooltip.png) no-repeat top center; background-size:300px 300px; padding:10px 10px;}
				.f-bjt-1{font-size:18px;}
				.f-bjt-2{font-size:20px;line-height:20px;}
				.f-bjt-6-1{font-size:40px;}
		
		/*video*/
		.video{height:220px;}
	
	/*footer*/
	.footer{width:100%; margin:0 auto; background:url(../images/bg/bg-footer-mobile.png) no-repeat top right; background-size:cover; height:180px; padding-bottom:10px;}
		.footer-content{bottom:0px;}
		.fc-1, .fc-2, .fc-3, .fc-4, .fc-5{margin:0; padding:0; position:absolute; float:none;}
		.fc-1{left:10px; bottom:40px;}	
		.fc-2{left:10px; bottom:20px;}
		.fc-4{right:10px; bottom:20px;}
		.fc-5{right:10px; bottom:40px;}
	.footer2{padding-bottom:40px;}			
}

/*mobile320*/
@media only screen and (min-width: 20px) and (max-width: 540px) {
	/*form*/
	.form-1, .form-2{width:85%; float:left;}
	.boxcomment{width: 214px; height: 180px;}
		#fieldcomment{width: 234px; height: 200px;}
	.boxsearch, .boxtext, .boxkontak1, .boxblc1, .boxblc2{width: 80%;}
	#fieldsearch, #fieldtext, #fieldkontak1, #fieldblc1, #fieldblc2{width: 100%;}
	.dom-content #fieldtext, .dom-content #fieldarea, .dom-content .styled-select{width: 95%;}
	.dropdown dd, .dropdown dt, .dropdown2 dd, .dropdown2 dt, .dropdown dt a, .dropdown2 dt a{width:95%;}
	dt .btn-select{right:15px;}
	.styled-select, .styled-select2, .styled-select3 {width: 100%;}
	.styled-select select, .styled-select3 select {width:101%;}
	.boxarea, .boxkritik{width:80%;}
	#fieldarea, #fieldkritik{width:100%;}
		
	.f-opening{font-size:16px;}
	.m-detail .f-title{font-size:13px; padding:0; line-height:normal;}
	
	/*list*/
	.list-1 li, .list-1 li:nth-child(3n){float:none; margin:0 auto; margin-top:20px;}
	.list-2 li, .list-2 li:nth-child(3n){float:none; margin:0 auto; padding-bottom:20px;}
	.list-3 li{float:left; width:140px; margin-right:20px; padding-bottom:30px;}
		.list-3 li:nth-child(2n){margin-right:0px;}
		.list-3 img{max-width:100%;}
	.list-4 li{float:none; width:300px; margin-right:0;}
	.list-sitemap li{width:145px; margin-right:10px; margin-bottom:15px;}
		.list-sitemap li:nth-child(2n){margin-right:0px;}
	.icon-menu2 li{width:90px; margin-right:5px;}
		
	.banner-resep-list li{display:none;}
	
	.blc li:nth-child(2){margin-top:90px;}
	.blc-3{padding-top:40px;}
	.blc-4, .blc-6{padding-top:100px;}
	.blc-5{width:300px;}
		.blc-5-1{width:150px; text-align:center;}
	.blc-6-1{width:106px;}
	.blc-6-2{width:10px;}
	.blc-6-3{width:116px;}
	.badge-7-keuntungan{margin-top:-80px; left:0; right:0; margin-left:auto; margin-right:auto; width:150px;}
		.badge-7-keuntungan img{width:150px;}
	.badge-photo{width:150px; left:0; right:0; top:0; margin-top:-60px; margin-left:auto; margin-right:auto;}
	
	.panel{font-size:15px;}
	
	/*page*/
	.page ul li:nth-child(n+6){display:none;}
	.page ul li:nth-last-child(1){display:block;}
	
	/*scroll*/
	#mycustomscroll{width: 340px; height: 380px;}
		.fixed-h{height:400px}
	#mycustomscroll2{width: 300px; height:350px;}
		.fixed-h2{display:none;}
	
	/*content*/
	.nh-1{background: url(../images/icon/sprite.png) no-repeat -547px 0; background-size: 600px 400px; width: 56px; height: 56px;}
		.nh-2{width:230px; margin-left:10px; padding-top:10px;}		
		.nh-1 .f-number, .comment-1 .f-number{font-size:18px; padding-top:10px; line-height:10px;}
		.nh-1 .f-date, .comment-1 .f-date{font-size:9px; width:30px; margin:0 auto;}
		.pagination{left:18px; top:60px;}
	
	.m-detail{text-align: left; width:450px; padding-top:80px;}
	
	/*banner*/
	.banner-resep-list li{width:75px; margin:0; padding:0; float:left;}
		.br{width:75px; margin-bottom:10px; background-size:525px 59px;}
			a .br-link{font-size:13px;}
		.br.icon-1{background-position:0px 0px;  padding-top:70px;}
		.br.icon-2{background-position:-70px 0px;  padding-top:70px;}
		.br.icon-3{background-position:-145px 0px;  padding-top:70px;}
		.br.icon-4{background-position:-220px -5px;  padding-top:70px;}
		.br.icon-5{background-position:-295px -15px; padding-top:50px;}
		.br.icon-6{background-position:-375px -15px; padding-top:50px;}
		.br.icon-7{background-position:-450px -15px; padding-top:50px;}
	
	.brc-resep{height:300px; background-size:300px auto;}
		.brcr-1{margin:45px 0 0 0px;}
		.brcr-2{margin:-10px 0 0 150px;}
		.brcr-3{margin:135px 0 0 205px;}
		.brcr-4{margin:200px 0 0 70px;}
	
	.bbmcc-1 img{width:95%;}
	
	.bjc-3-1{float:left; width:90px; padding:8px 0 5px 5px;}
	.bjc-3-2{float:left; width:44px; padding:8px 0 5px 5px;}
	
	/*bmc*/
	.bmc-card-1{width:100px;}
		.bmc-card-1 img{max-width:100%;}
	.bmc-card-2{margin-left:10px; width:190px;}	
	
	/*accordion*/
	.closedacc{padding-top:10px;}
	.acc-karir-2{width: 90%; height:auto; padding:15px 15px; float:left; margin-top:10px;}
	
	/*comment*/
	.comment-1{background: url(../images/icon/sprite.png) no-repeat -547px 0; background-size: 600px 400px; width: 56px; height: 56px; padding-top:2px;}
	.comment-2{width:234px; margin-left:10px;}
	
	
	/*karir*/
	.list-karir2 li{float:none; width:100%; margin-right:0; margin-bottom:40px;}
	.k-more{margin-left:0;}
	
	/*footer*/
	.f-copyright span{display:none;}
	.footer2 .line-dot2{padding-top:0px;}	
	.f2-1{float:none;width:160px; margin:0 auto; padding-top:0px;}
    .f2-2{float:none; width:96%; margin:0; margin:0 auto;}
}

/*mobile568*/
@media only screen and (min-width: 540px) and (max-width: 748px) {
	/*form*/	
	.boxcomment{width: 420px; height: 140px;}
		#fieldcomment{width: 440px; height: 160px;}	
		
	.f-opening{font-size:16px;}
	
	/*content*/
	.main-content{width:548px;}
		.icon-menu li{width:137px;}
		.icon-menu2 li{width:150px; margin-right:20px;}
	
	/*newshome*/
	.nh-1{background-position:-912px 0; background-size:1000px 667px; width: 88px; height: 88px;}
	.nh-2{width:440px; margin-left:20px;}	
	.nh-1 .f-number, .comment-1 .f-number{font-size:30px; padding-top:16px; line-height:20px;}
	.nh-1 .f-date, .comment-1 .f-date{font-size:13px; width:100%;}
		.pagination{left:36px; top:65px;}
	
	/*list*/
	.list-1 li, .list-1 li:nth-child(3n){margin-top:20px; width:265px; margin-right:18px;}
		.list-1 li:nth-child(2n){margin-right:0px;}
	.list-2 li, .list-2 li:nth-child(3n){padding-bottom:20px; width:265px; margin-right:18px;}
		.list-2 li:nth-child(2n){margin-right:0px;}
	.list-3 li, .list-3 li:nth-child(4n){width:150px; margin-right:49px;}
		.list-3 li:nth-child(3n){margin-right:0px;}
	.list-4 li{width:265px; margin-right:18px;}
	.list-sitemap li{width:176px; margin-right:10px; margin-bottom:15px;}
		.list-sitemap li:nth-child(2n){margin-right:0px;}
	
	/*comment*/
	.comment-1{background-position:-912px 0; background-size:1000px 667px; width: 88px; height: 88px; padding-top:5px;}
	.comment-2{width:440px; margin-left:20px;}
	
	/*banner*/
	.br-content{width:548px;}
		.brc li{float:left; width:265px; margin-right:10px;}
			.brc li:nth-child(2){margin-right:0;}
			#fieldsearch{width:100%;}
			.boxsearch{width:80%;}
		.brc-2-1{width:108px;}
		.banner-resep-list li{width:75px; margin:0; padding:0; float:left;}
			.br{width:75px; margin-bottom:10px; background-size:525px 59px;}
				a .br-link{font-size:13px;}
			.br.icon-1{background-position:0px 0px;  padding-top:70px;}
			.br.icon-2{background-position:-70px 0px;  padding-top:70px;}
			.br.icon-3{background-position:-145px 0px;  padding-top:70px;}
			.br.icon-4{background-position:-225px -15px;  padding-top:50px;}
			.br.icon-5{background-position:-295px -15px; padding-top:50px;}
			.br.icon-6{background-position:-375px -15px; padding-top:50px;}
			.br.icon-7{background-position:-450px -15px; padding-top:50px;}
		
		.brc-resep{height:300px; background-size:265px auto;}
			.brcr-1{margin:30px 0 0 0px;}
			.brcr-2{margin:-15px 0 0 120px;}
			.brcr-3{margin:115px 0 0 180px;}
			.brcr-4{margin:170px 0 0 50px;}
			.brcr-8{width:130px;}
	
	.bl-content{width:548px;}
		.blc li{width:548px;}
		.blc-5{width:548px;}
			.blc-5-1:nth-child(4){margin-left:120px;}
			.blc-5-2{width:230px;}
		.blc-6{padding-top:160px;}
		
	.batc-2{width:548px;}
	
	.bj-content{width:548px;}
		.bjc-1 img{max-width:100%;}
		.bjc-2{width:548px;}
		.bjc-3{width:548px;}	
	
	.bbc-content{width:360px;}
		.bbcc-1{width:360px;}
		.bbcc-2{width:360px;}
	
	.brc-2{width:300px; margin:0 auto;}
	.brc li .styled-select.m-yes{display:none;}
	
	.bmc-card-2{margin-left:0px;}	
	
	.badge-7-keuntungan{width:150px; right:0px; top:10px; margin:0;}
	.badge-photo{margin-top:-5px; left:0; right:0; margin-left:auto; margin-right:auto;}
	
	/*scroll*/
	#mycustomscroll{width: 310px; height: 470px;}
		.fixed-h{height:480px}
	.fixed-h2{display:none;}
	
	/*kontak*/
	.kontak-2, .kontak-6{width:265px;}
	
	/*karir*/
	.karir-photo{float:left; width:40%;}
	.karir-text{float:left; width:56%; margin-left:15px;}
	
	/*accordion*/
	.acc-1{background-position:-912px 0; background-size:1000px 667px; width: 66px; height: 88px; padding-top:15px; padding-left:22px;}
	.acc-2{margin-left:20px; width:440px;}
	.accicon{left:35px; top:65px;}
	.closedacc{padding-top:30px;}
	.acc-karir-1{width:60%;}
	.acc-karir-2{width: 120px; padding:15px 10px 10px 15px;}
		
	/*footer*/
	.footer{background-position:top center; height:220px;}
		.fc-1{bottom:30px;}	
		.fc-2{bottom:0px;}
		.fc-4{bottom:0px;}
		.fc-5{bottom:30px;}
	.btn-fb, .btn-tw, .btn-yt, .btn-sh{padding:2px 0; padding-right:5px;}
	.f2-1{width:25%; margin-left:10px;}
	.f2-2{float:right; width:68%; padding-top:0px; margin-right:10px;}
}

/*mobile768*/
@media only screen and (min-width: 720px) and (max-width: 1200px) {
	/*form*/
	.boxcomment{width: 500px; height: 140px;}
		#fieldcomment{width: 520px; height: 160px;}
		
	/*btn*/
	.btn-top{bottom: 30px;}
	.btn-next, .btn-prev{top:40px;}
	
	/*panel*/
	.panel-1{float:left; width:60%;}
	.panel-2{float:right; margin:0; font-size:20px;}
	
	/*content*/
	.main-content{width:748px;}
		.icon-menu li{width:170px; margin-right:10px;}
		.icon-menu2 li{width:140px; margin-right:7px;}
			.icon-menu2{margin-left:0px;}
		.icon-menu a, .icon-menu2 a{font-size:18px;}
		
	.nh-2{width:620px;}	
	
	/*page*/
	.page{font-size:15px;}		
		.page a{font-size:15px; width: 32px; height: 30px;}
	
	/*scroll*/
	#mycustomscroll{width: 390px; height: 460px;}
		.fixed-h{height:460px}
	#mycustomscroll2{width: 320px; height:350px;}
		.fixed-h2{width: 340px; height: 412px; background:url(../images/banner/jadwal-lokasi.png) no-repeat top left; margin-top:-15px;}
	
	
	/*list*/
	.list-1 li, .list-2 li{width:236px; margin-right:20px;}
	.list-3 li{width:175px; margin-right:16px; padding-bottom:40px; text-align:center;}
	.list-4 li{width:364px; margin-right:20px;}
	.list-sitemap li{width:242px; margin:0; margin-bottom:15px; margin-right:10px;}
		.list-sitemap li:nth-child(2n){margin-right:0;}
	.list-karir2 li{margin-right:30px;}
	
	/*produk*/
	.ap{background-size:748px 85px; width:106px; padding-top:90px;}
			a .ap-link{font-size:16px;}
		.ap.icon-1{background-position:0px 0px;}
		.ap.icon-2{background-position:-115px 0px;}
		.ap.icon-3{background-position:-210px 0px;}
		.ap.icon-4{background-position:-320px 0px;}
		.ap.icon-5{background-position:-425px 0px;}
		.ap.icon-6{background-position:-535px 0px;}
		.ap.icon-7{background-position:-640px 0px;}
	
	/*recommend*/
	.reco-1{float:left;}
	.reco-2{float:left;}
	.reco-3{float:right;}
	
	.comment-2{width:623px; margin-left:20px;}
	
	/*banner*/
	.br-content{width:748px;}
		.brc li{float:left; width:350px; margin-right:48px;}
		.brc li .styled-select.m-yes{display:none;}
		.banner-resep-list li{float:left; width:106px; margin:0; padding:0;}	
	.bl-content{width:748px;}
		.blc li{float:left; width:360px; margin-right:28px;}
		.blc-3{width:360px; margin-top:100px;}
			.blc-3-2{width:260px; margin-left:10px;}
		.blc-6-1{width:100px;}
		.blc-6-2{width:15px;}
		.blc-6-3{width:245px;}
		.badge-7-keuntungan{width:150px; left:0; top:0; margin:0; margin-top:-30px;}	
		.badge-photo{width:162px;right:0; top:0; margin:-30px 10px 0 0;}
	.batc-2{width:748px;}	
	.bbc-content{width:748px;}
		.bbcc-1{float:left; width:400px;}
		.bbcc-2{float:left; width:320px; margin-left:28px;}
			.bbcc-2 .styled-select.m-yes{display:none;}	
	.bj-content{width:748px;}
		.bjc-1{float:left; width:320px;}
		.bjc-2{float:left; width:400px; margin-left:28px;}
		.bjc-3{width:400px;}
			.bjc-3-1{float:left; width:120px; padding:8px 0 10px 10px;}
			.bjc-3-2{float:left; width:88px; padding:8px 0 10px 10px;}
	.bmc-card-2{margin-left:0px;}
	
	/*tooltip*/
	.detail-tip{position:absolute; bottom:10px; right:0;}
	
	/*kontak*/
	.kontak-1{width:260px; font-size:35px;}
	.kontak-2{margin-left:25px; width:463px; margin-top:0px;}
	.kontak-6{width:244px; margin-left:15px;}
	
	/*accordion*/
	.acc-2{margin-left:23px; width:620px;}
	
	.testi-img{background: url(../images/icon/sprite.png) no-repeat -788px -498px; width: 236px; height: 186px; background-size:1025px 684px;}
		.testi-img img{width:94%; text-align:center;}
	
	.acc-karir-1{width:65%;}
	
	/*video*/
	.video{height:320px;}
		
	/*footer*/
	.footer{width:100%; margin:0 auto; background:url(../images/bg/bg-footer-mobile.png) no-repeat top center; background-size:cover; height:230px;}
		.fc-1{bottom:20px;}	
		.fc-2{bottom:0px;}	
		.fc-4{bottom:0px;}	
		.fc-5{bottom:20px;}	
	.footer2{padding-top:20px;}
	.f2-1{width:22%; margin-left:10px;}
	.f2-2{float:right; width:74%; padding-top:0px; margin-right:10px;}
	
}

/*mobile1024*/
@media only screen and (min-width: 1000px) and (max-width: 1170px) {
	/*font*/
	.menu a{font-size:13px; padding:5px 11px; width:100%; margin-left:2px;}
	.f-call{font-size:30px; padding-top:3px;}
	
	/*btn*/
	.btn-down._full{top:460px;}
	.btn-login-no, .btn-login-yes{right:120px;}
	.btn-sitemap-close{right:10px; top:16px;}
	
	/*header*/
	.header-l{left:0px;}
	.header-r{width:700px; margin:15px 10px 0 0;}
		
		.lang{right:55px;}
		.sb-search{right:75px; top:14px;}
		header.small .menu a{font-size:13px; padding:5px 5px;}
	
	/*footer*/
	.footer{background:url(../images/bg/bg-footer.png) no-repeat top right;}
	.fc-1{bottom:-20px;}	
	.fc-2{bottom:-15px; margin-left:100px;}	
	.fc-4{bottom:-20px;}	
	.fc-5{bottom:-20px; margin-right:240px;}	
	.f2-1{width:16%; margin-left:10px;}
	.footer2 .line-dot2{width:97.5%;}
}

/*mobile1280*/
@media only screen and (min-width: 1200px) and (max-width: 1300px) {
	/*header*/
	.header-l{left:0px;}
	.header-r{width:700px; margin-right:10px;}	
		.lang{right:55px;}
		.sb-search{right:75px;}
		.btn-sitemap-close{right:10px;}
}

/*mobile1400*/
@media only screen and (min-width: 1480px) and (max-width: 2000px) {
	.footer{background:url(../images/bg/bg-footer-full.png) no-repeat top right; height:430px;}
		.footer-content{position:absolute; bottom:10px; width:1200px; left:0; right:0; margin-left:auto; margin-right:auto;}
	.footer2-content{width:1200px; margin:0 auto;}
}

/*========================================================*/
/*edit 03November2015*/
/*mobile320*/
@media only screen and (min-width: 20px) and (max-width: 540px) {
	.banner-produk-1{width:300px;}
		.bp-1-1 p, .bp-1-2 p{font-size:11px; padding:3px 0 3px 15px;}
		.bp-1-1{width:210px;}
		.bp-1-2{width:90px;}
}


/*========================================================*/
/*edit 13November2015*/
/*mobile320*/
@media only screen and (min-width: 20px) and (max-width: 540px) {	
	#history-slider img{max-width:100%; height:auto;}
}

/*========================================================*/
/*edit 27November2015*/
/*mobile320*/
@media only screen and (min-width: 10px) and (max-width: 1200px) {
	
	.f-bmc-3{font-size:18px;}
		.f-bmc-3 p{padding-bottom:2px;}
	.f-bmc-4{font-size:30px; color:#ffffff; background-color:#243772; width: 200px; height: 45px; padding-top:5px; margin-top:15px; margin-bottom:15px;}
	.list-bmc-1{margin-top:120px;}
	.f-bmc-6 a{font-size:16px; margin-bottom:10px;}
	.bmc-cart{margin-top:-120px;}
	#fieldbmc{background:#243772; width:100%;}
		.boxbmc{color:#ffffff;}
	
	/*dom redeem*/
	.dom-content .main-content._2{width:95%; margin:0 auto;}
			
	.form-1, .form-2{margin-bottom:20px;}
	
}
@media only screen and (min-width: 20px) and (max-width: 540px) {
	.list-bmc-2 li{width:100%; margin-bottom:20px;}
		.list-bmc-2 li:nth-child(n){margin-right:0px;}
	.bmcr-1{width:100%; padding-left:0px; margin:0 auto; text-align:center;}
	.bmc-total{height:100%; padding:15px 0;}	
		.bmct-1{font-size:16px; margin:0 auto; float:none; text-align:center;}
		.bmct-2, .bmct-3{font-size:14px; margin:0 auto; float:none; text-align:center;}
		.bmct-3{padding-top:15px;}
	.list-bmc-3 li{float:none; width:100%;}
		.list-bmc-3 li:nth-child(2n){float:none;}
}

/*mobile568*/
@media only screen and (min-width: 540px) and (max-width: 748px) {
	.list-bmc-1{margin-top:60px;}
		.list-bmc-2 li{width:48%; margin:0 20px 20px 0;}
			.list-bmc-2 li:nth-child(2n){margin-right:0px;}
	.bmcr-1{width:100%; padding-left:0px; margin:0 auto; text-align:center;}
	.bmc-total{height:100%; padding:15px 0;}	
		.bmct-1{font-size:16px; margin:0 auto; float:none; text-align:center;}
		.bmct-2, .bmct-3{font-size:14px; margin:0 auto; float:none; text-align:center;}
		.bmct-3{padding-top:15px;}
}

/*mobile768*/
@media only screen and (min-width: 720px) and (max-width: 1200px) {
	.f-bmc-4{margin-top:-45px;}
	.list-bmc-1{margin-top:20px;}
		.bmc-cart{margin-top:-70px;}
	.list-bmc-2 li{width:32%; margin:0 20px 20px 0;}
			.list-bmc-2 li:nth-child(3n){margin-right:0px;}
}

/*========================================================*/
/*edit 14January20016*/
/*mobile320*/
@media only screen and (min-width: 10px) and (max-width: 1200px) {
	
	.footer2{padding:0; height:100%;}			
	.btn-share-m, .btn-share-m:hover{display:inline-block; background: url(../images/icon/sprite.png) no-repeat 0 -159px;	width: 48px; height: 47px; background-size: 480px 320px; margin:10px 0 -5px 5px;}	
}
@media only screen and (min-width: 10px) and (max-width: 720px) {
	.brc-detail-img, .brc-detail-img img{width:265px;}
}

/*========================================================*/
/*edit 20January20016*/
/*mobile320*/
@media only screen and (min-width: 20px) and (max-width: 1200px) {
	.btn-back-m{display:inline-block; background: url(../images/icon/sprite.png)no-repeat -1px -272px;	background-size: 600px 400px; width: 30px; height: 58px; cursor:pointer;}
		.btn-back-m:hover{width: 34px; height: 58px;}
}

/*========================================================*/
/*edit 22January20016*/
/*mobile320*/
@media only screen and (min-width: 10px) and (max-width: 1200px) {
	.vscrollerbar{background-position:-2px -367px;}
	#mycustomscroll2{height:325px;}
}
@media only screen and (min-width: 20px) and (max-width: 540px) {
	.dropdown3 dd, .dropdown3 dt, .dropdown3 dt a{width:95%;}
}
@media only screen and (min-width: 20px) and (max-width: 720px) {
	.customscroll{width:100%;}
	#content-3.customscroll{height:100%;}
}

/*mobile768*/
@media only screen and (min-width: 720px) and (max-width: 1200px) {
	.customscroll{overflow: auto; position: relative; width: 410px;}
	#content-3.customscroll{padding:5px 0; height:225px;}
}

/*========================================================*/
/*edit 02February2016*/
@media only screen and (min-width: 10px) and (max-width: 1200px) {
	.dropdown dd ul, .dropdown2 dd ul, .dropdown3 dd ul {width:100%;}
}

/*========================================================*/
/*edit 03March 2016*/
@media only screen and (min-width: 10px) and (max-width: 300px) {
	.bmcr-5._1{width: 100%; margin: 0 auto; padding-left: 0px; text-align: center;}
	.bmcr-6{float: none; width: 100%; margin:0 auto; text-align: center;}
}
@media only screen and (min-width: 310px) and (max-width: 540px) {
	.bmcr-5._1{padding-left: 0px;}
}
@media only screen and (min-width: 10px) and (max-width: 1200px) {
	.footbar{display: block; width: 58px; position: fixed; z-index: 99; bottom: -6px; left: 10px;}
	.footer2{padding-bottom:40px;}	
	.btn-back-m{display:inline-block; background: url(../images/icon/sprite.png) -46px -369px;	background-size: 600px 400px;
	width: 88px; height: 31px; cursor:pointer;}

	.btn-login-yes, .btn-login-no{right:125px; top: 5px;}
	.lang{right:85px; top: 5px;}
	.sb-search{top: 0px;}
	.btn-sitemap-open{top: 5px;}
	.user-log{top: 35px; right: 10px;}

	.f-blc-1{width: 98%;}
	.bmc-cart, .bmc-history{margin-top:-120px;}
	.bmc-cart{right: 165px;}
	.bmct-3{width: 98%;}

	.header-r{margin-top: 6px;}

	.k-form6{margin-left: 0px; width: 100%;}
	.k-form7c{width: 50%;}
	.k-more{padding-top: 10px;}

	.about-next, .about-prev{display: none;}

	#fieldbmc{width:100%; max-width: 300px;}
	/*produk*/
	.ap{width:75px; padding-top:70px; margin-bottom:10px; background-size:525px 59px;}
		a .ap-link{font-size:14px;}
		.ap.icon-1{background-position:0px 0px;}
		.ap.icon-2{background-position:-75px 0px;}
		.ap.icon-3{background-position:-150px 0px;}
		.ap.icon-4{background-position:-225px 0px;}
		.ap.icon-5{background-position:-300px 0px;}
		.ap.icon-6{background-position:-375px 0px;}
		.ap.icon-7{background-position:-450px 0px;}
}
@media only screen and (min-width: 1000px) and (max-width: 1100px) {
	.footer2{padding-top:30px;}	
}

@media only screen and (min-width: 720px) and (max-width: 1300px) {
	.f-blc-1{width: 180px; font-size: 23px;}
	.bmc-cart, .bmc-history{margin-top:-70px;}
	.btn-login-yes, .btn-login-no{right:115px;}
	header.small .user-log-sm{right: 150px;}
	.k-form6{margin-left: 5px; width: 32%;}
	.k-form7c{width: 25%;}
	.bmct-3{width: 26%;}
	
	.ap{background-size:748px 85px; width:106px; padding-top:90px;}
			a .ap-link{font-size:16px;}
		.ap.icon-1{background-position:0px 0px;}
		.ap.icon-2{background-position:-115px 0px;}
		.ap.icon-3{background-position:-210px 0px;}
		.ap.icon-4{background-position:-320px 0px;}
		.ap.icon-5{background-position:-425px 0px;}
		.ap.icon-6{background-position:-535px 0px;}
		.ap.icon-7{background-position:-640px 0px;}

}

/*========================================================*/
/*edit 04May2016*/
@media only screen and (min-width: 10px) and (max-width: 1200px) {
	.btn-shop-m{display:inline-block; background: url(../images/icon/sprite.png) -161px -369px; background-size: 600px 400px; width: 88px; height: 31px; cursor:pointer;}
}

/*========================================================*/
/*edit 17June2016*/
@media only screen and (min-width: 10px) and (max-width: 1200px) {
	.bbcc{margin-top:0;}
		.banner-bbc._1{background:#faf8f9;}
		.bbc-content._1{width:300px;}
		.bbcc-1-2{position:relative; width:auto;}
		.bbcc-1-2 img{max-width:100%; height:auto;}
		.bbcc-search-text{font-size:13px;}
		.boxbbcc{width:80%;}
		#bbccsearch{width:100%; margin:0 auto; margin-top:5px; margin-bottom:20px;}
		
		.bbcc-1._1, .bbcc-2._1, .bbcc-2._2{float:none; width:100%;}
		.bbcc .brc-2-2{float:none; margin:15px auto;}
		.dropdown dt, .dropdown2 dt, .dropdown3 dt{width:100%;}
		.dropdown dd, .dropdown2 dd, .dropdown3 dd{width:93%;}		
		.brc-2._1{position:relative; float:none; display:inline-block;}
}
@media only screen and (min-width: 890px) and (max-width: 1270px) {
	.bbc-content._1{width:95%; margin:0 auto;}	
		.bbcc-1-2{margin:0 auto; text-align:center;}
		.boxbbcc{width:90%;}
		#bbccsearch{width: 320px; margin-left:20px;}
		.bbcc-1._1, .bbcc-2._1, .bbcc-2._2{float:left; width:28%;}
			.bbcc-2._2{width:33%;}
			.bbcc-1._1 .m-yes, .bbcc-2._1 .m-yes{display:none;}
			.bbcc-1._1 .m-no, .bbcc-2._1 .m-no{display:block;}
		.bbcc .brc-2-2{float:left; margin:0 10px; margin-top:13px;}	
}
@media only screen and (min-width: 1022px) and (max-width: 1270px) {
	.banner-bbc._1{background:#faf8f9;}
	.bbcc-1._1, .bbcc-2._1, .bbcc-2._2{float:left; width:29%;}
	.bbcc-2._2{width:31%;}
}
@media only screen and (min-width: 1272px) and (max-width: 1300px) {
	.banner-bbc._1{background:url(../images/banner/jadwal.jpg) no-repeat top center; background-size:auto;}	
}

/*========================================================*/
/*edit 11October2016*/
@media only screen and (min-width: 979px) and (max-width: 1270px) {
	/*footer*/
	.footer{height:280px;}
}
@media only screen and (min-width: 10px) and (max-width: 1000px) {
	.footer2{padding-bottom:70px;}
	.footbar{display: block; width: 58px; position: fixed; z-index: 99; bottom: 10px; left: 10px;}
	.btn-shop-m{display:inline-block; background: url(../images/icon/sprite.png) -161px -361px; background-size: 600px 400px; width: 101px;
	height: 39px; cursor:pointer;}
}

/*========================================================*/
/*edit 19Oct2016*/
@media only screen and (min-width: 10px) and (max-width: 700px) {
	.bbc-history li{padding:15px 0;}
	.bbch-1, .bbch-2, .bbch-3, .bbch-4{float:none; margin-right:0px; width:100%;}
	.f-bjt-7{margin:10px; padding:0;}
}
@media only screen and (min-width: 10px) and (max-width: 539px) {
	.bmcs-1, .bmcs-2, .bmcs-3, .bmcs-4{float:none; margin-right:0px; width:100%;}
}

@media only screen and (min-width: 540px) and (max-width: 748px) {
	.blc-5-1:nth-child(4){margin-left:0;}
	.bmcs-1, .bmcs-2, .bmcs-3, .bmcs-4{width:22%;}
}

/*========================================================*/
/*edit 02Dec2016*/
@media only screen and (min-width: 10px) and (max-width: 900px) {
	.f-privacy a{font-size:10px;}
}
@media only screen and (min-width: 10px) and (max-width: 546px) {
	.f-copyright span.f-privacy{display:block; position:absolute;}
}
@media only screen and (min-width: 548px) and (max-width: 900px) {
	.f-copyright span.f-privacy{position:relative;}
}

/*========================================================*/
/*edit 02Oct2017*/
@media only screen and (min-width: 10px) and (max-width: 900px) {
	.online-shop-list{width:97%; text-align:center;}
	.online-shop-list li, .online-shop-list li:nth-child(n-4), .online-shop-list li:nth-child(4n){width:49%; margin:0 auto;}
		.online-shop-list img{margin-bottom:30px; max-width:80%;}
}
@media only screen and (min-width: 500px) and (max-width: 900px) {
	.online-shop-list li, .online-shop-list li:nth-child(n-4), .online-shop-list li:nth-child(4n){width:32%;}
		.online-shop-list img{margin-bottom:15px;}
}