/*mobile portrait*/
@media only screen and (min-width: 10px) and (max-width: 699px) {
	:root {
		--f-12: calc(12px * .75);
		--f-16: calc(16px * .75);
		--f-20: calc(20px * .75);
		--f-30: calc(30px * .65);
		--f-40: calc(40px * .55);
		--f-80: calc(80px * .45);
		--f-100: calc(100px * .35);
		--f-350: calc(350px * .3);
		--lh-12: calc(24px * .75);
		--lh-16: calc(36px * .75);
		--lh-30: calc(50px * .65);
		--lh-40: calc(50px * .55);
		--lh-80: calc(90px * .45);
		--lh-100: calc(100px * .35);
		--lh-350: calc(350px * .3);
		--line-2 : calc(5px * .75) solid #bd4941;
		--line-3 : calc(8px * .75) solid #000000;
		--space-1 : calc(10px * .45);
	}
	
	.m-no{display:none;}
	.m-yes{display:block;}
	
	html, body{overflow-x:hidden;}

	.icon-hubungi.wa, .icon-hubungi.loc{transform: scale(.65);}
	.icon-works{transform: scale(.65);}

	/*button*/
	.btn-main{padding: calc(12px * .75) calc(20px * .75); font-size: calc(24px * .75);}

	.btn-rec{width: calc(50px * .75); height: calc(50px * .75);}
	.arrow-up{width: calc(19px  * .75); height: calc(11px  * .75); background-size: calc(19px * .75) calc(11px * .75);}
	.arrow-down{width: calc(19px  * .75); height: calc(11px  * .75); background-size: calc(19px * .75) calc(11px * .75);}
	.arrow-right{width: calc(11px  * .75); height: calc(19px  * .75); background-size: calc(11px * .75) calc(19px * .75);}
	.arrow-left{width: calc(11px  * .75); height: calc(19px  * .75); background-size: calc(11px * .75) calc(19px * .75);}

	.contact{bottom: 50px; right: 2.5%; width: 240px;}
	.contact.bottom{bottom: 125px;}
	.contact.show{height: 55px;}
	.contact.bottom.show{background: #fff;}
	.contact-icon{bottom: calc(5px  * .65); right: calc(-5px  * .65);}
	.contact-btn{bottom: 0px; right: 0px;}
	.active .contact-btn{width: calc(55px  * .65); height: calc(74px  * .65); background-size: calc(55px  * .65) auto;}
	.contact-btn#morph{width: calc(170px  * .65);  bottom: calc(-5px  * .65); right: calc(-90px  * .65);}
	.dot-elastic, .dot-elastic::before, .dot-elastic::after{width: calc(5px  * .65); height: calc(5px  * .65);}
	.dot-elastic {bottom: calc(35px  * .65) ; right: calc(30px  * .65) ;}
	.dot-elastic::before {left: calc(-10px  * .65) ;}
	.dot-elastic::after {left: calc(10px  * .65) ;}

	.side .contact{right: calc(245px * .65);}
	.icon-sosmed{margin-left: calc(-25px * .65);}
	.show .icon-sosmed, .active .icon-sosmed{margin: 0 calc(10px * .55); transform: translateX(-50px);}

	/*sidebar*/
	.sidebar{display: none;}

	/*container*/
	.container, .container-fluid, .wrapper{width: 90%; margin: auto;}
		.container-fluid{width: 100%;}
		.container-fluid .ml{margin-left: 5%;}
		.container-fluid .mr{margin-right: 5%;}
	.wrapper{width: 95%;}

	section img.logo{max-width: 50%;}
	.cloud{top: calc(480px * .55);}
		.cloud img{width: 1100px;}
	
	/*column*/
	.row{flex-wrap: wrap;}
	
	/*header*/
	header{padding-top: calc(70px * .5);}
	header .wrapper{height: calc(76px * .55); padding-top: calc(20px * .55); background-size: auto calc(76px * .55);}
	header.small{top: 0;}
	header.small .wrapper{width: 100%; height: calc(59px * .8); padding: calc(15px * .8) 0; background-size: auto calc(59px * .8); background-position: 105% 0;}
	header .logo{width: calc(182px * .5); height: calc(72px * .5); background-size: calc(182px * .5) auto;}
	header.small .logo{width: calc(180px * .5); height: calc(30px * .5); background-size: calc(182px * .5) auto; margin-left: 2.5%;}
	footer .logo{width: calc(182px * .55); height: 20px; background-size: calc(182px * .55) auto;}
	header .logo .dot, footer .logo .dot{width: 3px; height: 3px; margin-left: 29px; margin-top: -1px;}
	footer .logo .dot{margin-left: 32px; margin-top: 3px;}
	.menu > ul {padding-right: calc(140px * .35); font-size: calc(16px * .6); margin-top: -5px;}
	.menu > ul > li a {padding: 0 .8em;}
	.menu a.logo {width: calc(182px * .5);}
	
	.menu-container {width: 100%;}
	.menu-container .menu{display:inline-block;}
	.menu-mobile {display: inline-block;  position: absolute; z-index: 8; top: 5px; right: 40px;}
	.menu-dropdown-icon:before {display: block;}
	.menu > ul {display: none; width:100%;}
	.menu > ul > li {width: 100%; float: none; display: block;}
		.menu > ul > li.menu-dropdown-icon, .menu > ul > li:hover.menu-dropdown-icon:hover{background: none;}
	.menu > ul > li a {padding: 1.5em; width: 100%; display: block;}
	.menu > ul > li > ul {position: relative; padding: 0 40px;}
		.menu > ul > li.show > ul, .menu-dropdown-icon.show:before {display: block;} 
	.menu > ul > li > ul.normal-sub {width: 100%;}
	.menu > ul > li > ul > li {float: none; width: 100%; margin-top: 20px;}
	.menu > ul > li > ul > li:first-child {margin: 0;}
	.menu > ul > li > ul > li > ul {position: relative;}
	.menu > ul > li > ul > li > ul > li {float: none;}
	.menu .show-on-mobile {position: fixed; top: 0; left: 0; right: 0; margin: auto; padding: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: var(--c-grey); font-size: var(--f-30);}
	header.small .main-menu a{color: var(--c-black);}
	header.small .main-menu .active a{color: var(--c-navy);}
	header.small .menu-mobile:after{background: url(../img/menu-open-small.png) no-repeat; background-size: 20px; transform: translateY(-50%);}
	header.small .menu-mobile.active:after{background: url(../img/menu-close.png) no-repeat; background-size: 20px; transform: translateY(-50%);}

	/*footer*/
	footer{height: 200px; padding: 35px 0;}
		footer.home{height: 200px;}
		footer nav{top: -10px; transform: none;}
		footer .space-2{padding-top: 20px;}
		footer .contact-btn, footer .contact-icon{bottom: 60%; transform: scale(.8); transform-origin: right;}
		/* footer .active{display: none;} */

	.important{line-height: 20px;}

	/*home*/
	.section1{min-height: 900px; padding-top: 140px;}
	.section1 .btn-rec{bottom: -70px; margin-left: 145px;}
		.s1-1{margin-bottom: -40px; margin-left: 55px;}
		.s1-3{margin-top: 0px; margin-left: 145px;}
		.s1-4{margin-top: 30px; margin-left: 145px;}
	.obj._1-1, .obj._1-2, .obj._1-3, .obj._1-4, .obj._1-5, .obj._1-6{margin-top: calc(-30px * .55);}
	.obj._1-1 img, .obj._1-2 img, .obj._1-3 img{max-width: 100%;}
		.obj._1-1{margin-left: calc(-450px * .4); width: calc(281px * .5);}
		.obj._1-2{margin-left: calc(-280px * .4); width: calc(174px * .5);}
		.obj._1-3{margin-left: calc(-280px * .4); width: calc(174px * .5);}
		.obj._1-4{margin-left: calc(-460px * .4); margin-top: calc(15px * .3); width: calc(16px * .5); height: calc(16px * .5);}
		.obj._1-5{margin-left: calc(-330px * .4); margin-top: calc(100px * .3); width: calc(28px * .5); height: calc(28px * .5);}
		.obj._1-6{margin-left: calc(-380px * .4); margin-top: calc(50px * .3); width: calc(182px * .5); height: calc(30px * .5);}

	.section2, .section2 .video{height: 500px;}
	.section2 .container{width: 320px;}
	.section2 .video{margin-left: 0%;}
		.s2-1, .s2-2{width: 100%; margin: auto;}
		.s2-3{width: 100%; margin: auto; margin-top: calc(60px * .45);}

	.section3 .scaled, .section4 .scaled{transform:scale(.45);}	
	.section3{min-height: 500px;}
		.s3-1, .s3-2{width: 320px; left: 0; right: 0; margin: auto; margin-top: 345px; }
		.s3-2{margin-top: 480px;}

	.section4{min-height: 820px; background-position: center; margin-top: 200px;}
		.s4-1{margin: 330px 0 0 -150px; z-index: -1; color: var(--c-black);}
		.s4-2{width: 320px; margin: 460px 0 0 -150px;}
		.s4-3{width: 320px; margin: 650px 0 0 -150px;}

	.section5, .section6, .section7, .section8, .section9, .section10{padding-top: 100px;}
	.section5 .scaled, .section6 .scaled, .section7 .scaled, .section8 .scaled, .section9 .scaled{transform: scale(.4);}
	.section5{min-height: 850px; padding-top: 150px;}
	.section5 .scaled{position: relative; width: 100%; height: auto; margin: -100px 0 0 -50%; transform-origin: top right;}	
		.section5 .f-16{width: 100%;}
		.section5 .row.start{position: relative;}
	
	.section6{min-height: 780px;}
	.section6 .container-fluid{width: 95%;}
	.section6 .row.end{flex-direction: column-reverse; justify-content: flex-start;}	
	.section6 .scaled{position: relative; height: auto; transform-origin: left; margin: auto; margin-top: -30px; margin-left: -10%;}	
		.section6 .f-16{width: 100%;}
		.section6 .container{padding-top: 0px;}
		.section6 .col-5, .section6 .col-7{flex-basis: 100%;}
		.section6 .col-5 .container{width: 100%;}
		
	.section7{min-height: 900px;}
	.section7 .scaled{transform-origin: right; margin-top: 40px; margin-right: 0;}	
	.section7 .container-fluid{padding-top: calc(50px * .45);}
		.section7 .is-relative{margin-left: 0;}
		.section7 .f-16{width: 100%;}

	.section8{min-height: 1050px;}
	.section8 .container-fluid{width: 95%;}
	.section8 .row.end{flex-direction: column-reverse; justify-content: flex-start;}
	.section8 .scaled{transform-origin: left; margin-left: -8%; margin-top: -50px;}
		.section8 .container{padding-top: 0;}
		.section8 .f-16{width: 100%;}	
		.section8 .col-6{flex-basis: 100%;}
		.section8 .col-6.container{width: 100%;}
		
	.section9{min-height: 800px; padding-top: 50px;}
	.section9 .row.end{justify-content: flex-start;}
	.section9 .scaled{position: relative; transform-origin: right; margin-top: -40px; margin-right: 15%;}
		.section9 .container{padding: 0;}
		.section9 .f-16{width: 95%;}
		.section9 .col-5, .section9 .col-7{flex-basis: 100%;}

	.section10{height: auto; margin-bottom: 50px; padding-top: 50px;}
		.section10 .container-fluid{width: 95%;}
		.section10 .col-6{flex-basis: 100%;}
		.section10 .col-6:nth-child(1){padding-left: 2.5%;}
		.section10 .col-6:nth-child(2){padding-right: 0%; padding-top: 80px; padding-left: 2.5%;}

	.section11{margin: 50px auto;}
		.section11 .f-16{width: 100%;}
		.section11 .col-6:nth-child(1){padding-bottom: 50px;}

	/*services*/
	.services1{padding-top: 120px;}
	.services1 .scaled{transform: scale(.35);}
		.sf1-1{padding-top: calc(620px * .45); font-size: 88px;}
		.sf1-2, .sf1-3{margin: calc(30px * .45) 0 0 0; width: 100%;}

	.services2{padding: calc(100px * .45) 0;}		
		.services2 .row{justify-content: center;}
		.services2 .row .f-16{line-height: 20px;}
		.services2 .row .col-2{flex-basis: 30%;}
		.services2 .row .col-2:nth-child(2){flex-basis: 35%;}
		.services2 .row .col-2:nth-child(4){margin-top: 30px;}
		.services2 .row .col-4{margin-top: 30px;}
		.services2 ._years{width: auto; top: 0; transform: none; margin-left: -25px; margin-top: 13px;}
		.services2 ._years.f-16{font-size: 8px; line-height: 8px;}

	.services3{padding: calc(100px * .45) 0;}
		.services3 .row li{width: 22%;}
		.services3 .row li.half{width: 20%;}
		.services3 .row li.double{width: 28%;}

	.services5 .container{padding: 15px;}
		.services5 .col-6{flex-basis: 100%; padding-bottom: 50px;}
		.services5 .col-6:nth-last-child(1){padding-bottom: 0px;}

	.services6{min-height: 1000px;}
	.services6 .scaled{transform: scale(.45); margin-left: 40%;}
		.sf6-1{position: relative; font-size: 92px; padding-top: 220px; z-index: -1;}
		.sf6-2{position: relative; width: 100%; padding-top: 330px; margin: 0; float: left;}

	/*works*/
	.works-title .f-16{line-height: 20px;}
	.works1{padding-top: 140px; padding-bottom: 50px;}
	.works1._detail {padding-top: 80px; padding-bottom: 20px;}
	.works1 .owl-carousel .owl-item img{max-width: 90%; margin: auto;}
	.works1 .client-list li{margin: 0 3%; padding: calc(40px * .55) 0;}
		
	.autoplay{bottom: 14%;}
	.autoplay .play, .autoplay .stop{width: calc(52px * .65); height: calc(52px * .65);}
	.autoplay .play img, .autoplay .stop img{width: calc(11px * .65); height: calc(19px * .65);}
	.works2, .works2 video{height: 500px;}
	.works2 a strong{color: var(--c-white);}
	.works2 .f-80{padding-top: calc(80px * .55);}
	.works2 .f-16{width: 100%; margin-top: calc(40px * .55); margin-left: 0;}

	.works-list .item{width: 320px; padding: 0; padding-top: 40px;}
	.works-list .item .col-6{flex-basis: 90%; margin-bottom: 30px;}
	.detailVideo iframe{width: 100%; height: 42vw;}
	.works-list #stop-video{height: 22vw; top: 0;}

	/*projects*/
	.projects1{min-height: auto; margin-top: calc(150px * .55);}
		.projects1 .scaled{transform: scale(.55) translateX(40%);}
		.pf1-1{position: relative; left: auto; right: auto; width: 100%; margin: auto; padding-top: 750px;}
	.projects2{min-height: auto; margin-top: calc(60px * .55); margin-bottom: 120px;}	
		.projects2 .col-6{margin-right: 0px;}	
		.projects2 .col-6:nth-child(2){padding-right: 0px; padding-top: 40px;}	
		.projects2 .row.start div{margin: calc(10px * .55); flex-basis: 45%;}	
	.projects3{min-height: auto; margin-top: calc(60px * .55); margin-bottom: 120px;}	
		.projects3 .scaled{transform: scale(.55) translateY(-130px) translateX(0px);}
		.projects3 .row{flex-direction: column-reverse;}
		.obj._p3-1{transform: scale(.5); transform-origin: left center;}
		.projects3 .col-6:nth-child(1){padding-right: 0px; padding-top: 360px;}		
	.projects4{min-height: auto; margin-top: calc(60px * .55); margin-bottom: 80px;}	
		.projects4 .scaled{transform: translateX(8%);}
		.projects4 .col-4{padding-top: 380px; flex-basis: 100%;}
	.projects5{min-height: 0px; padding: 0; padding-bottom: 60px;}	
		.projects5 .f-40, .projects5 .f-16{padding-right: 0;}
		.projects5 .col-2{padding-top: 70px;}	
		.projects5 .col-3{padding-top: 300px;}		
		.projects5 .col-2, .projects5 .col-3, .projects5 .col-7{flex-basis: 100%;}		
	.projects6 ._bg{min-height: auto; padding: calc(180px * .55) 0; background-position: top right; background-size: 100% auto;}
		.projects6 .col-5{flex-basis: 100%; padding-top: 70%;}
	.projects7{margin-top: calc(-100px * .55); margin-bottom: 60px;}	
		.projects7 .col-4{flex-basis: 100%; margin-top: 0px;}	
	.projects8{min-height: auto; padding-top: calc(150px * .55);}
		.obj._p8-1, .obj._p8-2, .obj._p8-3, .obj._p8-4{left: 0; right: 0; margin: auto;}
		.projects8 .row.start{position: relative; padding-bottom: 60px; padding-top: 150px; width: 90%; margin: auto;}
		.projects8 .scaled{transform: scale(.9); margin-top: 20px;}
		.projects8 .col-6{padding-right: 0px; padding-top: 10vw;}	
	.projects9{min-height: auto; padding-top: 60px;}
		.obj._p9-1{position: relative; left: 0; right: 0; margin: auto;}
		.obj._p9-1 img{max-width: 90%; margin: auto;}
		.projects9 .row.start{position: relative; width: 90%; margin: auto;}
		.projects9 .scaled{position: relative; height: auto;}
		.projects9 img.logo{height: calc(48px * .7);}
			.projects9 .col-6{margin-top: 60px; margin-bottom: 60px; padding-right: 0px;}	

	.projects2 img, .projects8 img{max-width: 100%;}
	.projects4 img{max-width: auto;}
	.projects2 p, .projects3 p, .projects4 p, .projects5 p, .projects6 p, .projects7 p{padding-bottom: calc(30px * .55);}
	.projects2 .scaled, .projects3 .scaled, .projects4 .scaled, .projects5 .scaled{margin-top: calc(120px * .55);}

	/*hubungi*/
	.hubungi .scaled{transform: scale(.4); margin-top: 40px; margin-left: 35px;}
		.hf1-1{padding-top: 180px; letter-spacing: 0; margin-left: 2%;}
		.hf1-2{margin: 150px auto 0 auto; width: 100%;}
		.hf1-3{margin: 30px auto 0 auto; width: 100%;}
	.hubungi iframe{min-height: 240px;}

	/*card*/
	.card .scaled{margin-top: 0;}
	.card img{max-width: 100%;}
	.card .col-12{flex-basis: 100%;}
	.card .brain{z-index: 3; width: 136px; margin-top: 55px; margin-left: -65px; }
	.card .shape{z-index: 2; width: 196px; height: 196px; border: 4px solid #000; margin-top: 105px; margin-left: -100px; }
	.card .stabber{z-index: 4; margin-top: 105px; margin-left: -85px;}
		.card .stabber._desktop{display: none;}
		.card .stabber._mobile{display: block;}
		.obj._c1-1{z-index: 1; width: 188px; margin: 116px 0 0 -125px;}
		.obj._c1-2{width: 132px; margin: 132px 0 0 -10px;}
		.obj._c1-jr._desktop{display: none;}
		.obj._c1-jr._mobile{display: block; width: 286px; margin: 125px 0 0 -145px; z-index: 4;}
		.tri._c1-1, .tri._c1-2, .tri._c1-3, .tri._c1-4, .tri._c1-5, .tri._c1-6, .tri._c1-7, .tri._c1-8{margin: 258px 0 0 280px; }
		.tri._c1-5, .tri._c1-6, .tri._c1-7, .tri._c1-8{margin: 292px 0 0 338px;}
	.rec._c1-1{width: 85px; height: 11px; margin: 166px 0 0 70px;}
	.cir._c1-1, .cir._c1-2{border: 3px solid var(--c-red); width: 13px; height: 13px; margin: 386px 0 0 -40px;}
		.cir._c1-2{width: 8px; height: 8px; margin: 419px 0 0 -70px;}
		.cf1-1{left: 0; margin: auto; margin-top: 430px; width: 100%; padding-bottom: calc(80px * .5); font-size: calc(24px * .7);}
		.cf1-1 ._mobile{display: block;}
		.row._cl{justify-content: flex-start; gap: calc(30px * .7);}
			._cl ._1, ._cl ._2, ._cl ._3, ._cl ._4{width: 45%; margin-top: var(--space-2);}
			._cl ._1 img{width: calc(205px * .7);}
			._cl ._2 img{width: calc(169px * .7);}
			._cl ._3 img{width: calc(193px * .7);}
			._cl ._4 img{width: calc(110px * .7);}
		._ci a{transform-origin: left; transform: scale(.7);}
		.cb1-1, .cb1-2, .cb1-3{padding: var(--space-2) 0;}

	/*indofood*/
	.indofood1{min-height: 1000px; padding-top: 140px;}
		.indofood1 .scaled{position: relative; transform: scale(.45); margin: auto; margin-top: -10%; margin-left: -55%;}
		.indofood1 .container{padding-top: 0px; margin: auto;}	
		.indofood1 .col-4{flex-basis: 95%;}
		.indofood1 .row.end{flex-direction: column-reverse; justify-content: flex-start;}
		.rec._in1-1{margin-left: -15%;}
	.indofood2{margin-top: calc(180px * .55);}		
		.indofood2 .overlay{width: calc(141px * .55);}
	.indofood3{margin-top: calc(100px * .55);}
		.indofood3, .indofood3 video{height: 500px;}
		.indofood3 .col-3{flex-basis: 100%;}
	.indofood4{margin-top: calc(100px * .55);}
		.indofood4 .row-1 .col-4{flex-basis: 100%; padding-bottom: 30px;}
		.indofood4 .row-2{margin-top: 30px; margin-left: 0;}
		.indofood4 .row-2 .col-4{flex-basis: 100%; padding-top: 20px;}
		.indofood4 .row-3{margin-top: calc(100px * .55);}
		.indofood4 .row-3 .row-3-1 .overlay{top: 200px; width: calc(141px * .55);}
		.indofood4 .row-3 .row-3-2{padding-left: calc(20px * .55);}
	.indofood5, .indofood6, .indofood7{padding: calc(50px * .55) 0;}
		.indofood5 .container-fluid, .indofood6 .container-fluid{padding-left: 5%;}
		.indofood7 .overlay{width: calc(120px * .55); margin-top: calc(200px * .55);}
		.indofood7 .col-5{flex-basis: 100%; padding-bottom: 40px;}	

	/*danone*/
	.danone1{min-height: 400px; padding-top: 150px;}
		.danone1 .scaled{position: relative; transform: scale(.45); transform-origin: top left; margin-top: -15%; margin-left: -5%; height: 500px;}
		.danone1 .container-fluid{padding-top: 0;}	
		.danone1 .row.start{position: relative;}
		.danone1 .f-16{width: 95%;}
		.danone1 .obj._5-13{margin-top: 200px;}
	.danone2, .danone3, .danone4, .danone5{margin-top: calc(100px * .55);}
	.danone2{margin-top: 0;}
	.danone2 .col-4{padding-bottom: 50px;}
		.danone2 .col-4:nth-last-child(1){padding-bottom: 0;}
	.danone3, .danone3 video{height: 500px;}
	.danone3 .col-4{margin: auto;}
	.danone2 .col-4, .danone3 .col-4, .danone5 .col-4, .danone6 .col-4{flex-basis: 100%; padding-bottom: 30px;}
	.danone6{margin-top: 50px;}
		.danone6 .container-fluid{padding-left: 5%;}
		.danone6 .col-4{padding-right: calc(80px * .55);}

	/*abc*/
	.abc1{min-height: 880px; padding-top: 150px;}
		.abc1 .scaled{transform: scale(.35); margin-right: 0;}
		.abc1 .container-fluid{padding-top: 0;}
		.abc1 .container-fluid .ml{margin-left: 5%;}
		.abc1 .is-relative{margin-left: calc(-300px * .55);}
		.abc1 .f-16{width: 100%;}
		.abc1 .col-5{width: 95%; flex-basis: 95%;}
		.abc1 .col-6{position: relative; margin: auto;}
		.abc1 .img{display: none;}
	.abc2{top: 0; bottom: auto; margin-top: 0px;}
	.abc3, .abc4, .abc5, .abc6, .abc7, .abc8{margin-top: calc(100px * .55);}
		.abc3 .col-3{flex-basis: 100%; margin: auto;}
		.abc3, .abc3 video{height: 500px;}
		.abc4 .col-5, .abc6 .col-5, .abc7 .col-5, .abc8 .col-5{flex-basis: 100%; padding-bottom: 30px;}
	.abc8{margin-bottom: calc(100px * .55);}

	/*pg*/
	.pg1{min-height: 500px; padding-top: 150px;}
	.pg1 .row.end{flex-direction: column-reverse; justify-content: flex-start;}
		.pg1 .scaled{position: relative; transform-origin: top left; transform: scale(.35); margin-left: 0; height: 300px;}
		.pg1 .container{padding-top: 0; padding-left: 0%;}
		.pg1 .f-16, .pg1 .f-30{width: 90%;}	
	.pg2{margin-top: 100px;}
	.pg3, .pg4, .pg5, .pg6, .pg7, .pg8{margin-top: calc(100px * .55);}
	.pg3, .pg3 video{height: 500px;}
	.pg3 .col-4, .pg5 .col-3, .pg5 .col-4, .pg5 .col-5, .pg6 .col-3, .pg6 .col-4{flex-basis: 100%; padding-bottom: 30px;}
	.pg5 .col-3.is-right, .pg5 .col-4, .pg6 .col-4.is-right{text-align: center;}
	.pg5 .col-4 img{display: inline-block;}	
	.pg7 .overlay._1{top: auto; bottom: 10%; transform: none; width: calc(140px * .55);}
	.pg7 .overlay._2{top: 5%; transform: none; left: 0; right: 0; margin: auto;}
	.pg7 .img img{min-height: 450px;}
	.pg7 .col-3{flex-basis: 95%;}
	.pg8 .container-fluid{padding-left: 5%;}

	/*smailing*/
	.smailing1{margin-top: 150px;}
		.smailing1 img.logo{max-width: 95%;}
		.smailing1 .scaled{transform: scale(.35); margin-left: -100%; margin-top: -15%;}
		.smailing1 .col-6.container{padding-top: 0;}
		.smailing1 .f-30{width: 95%;}
		.smailing1 .f-16{width: 95%;}
		.smailing1 .overlay{width: calc(140px * .45);}
		.smailing1 .space-8{margin-top: 300px;}
	.smailing2, .smailing3, .smailing4, .smailing5, .smailing6{margin-top: calc(100px * .45);}
		.smailing2, .smailing2 video{height: 400px;}
		.smailing2 .col-4{flex-basis: 100%; margin: auto;}
		.smailing2 .col-4 .f-16{padding-right: 0;}
		.smailing3 .col-2.is-right, .smailing6 .col-2.is-right{text-align: left; margin-top: 20px;}
		.smailing4 .col-5, .smailing5 .col-5, .smailing5 .col-7{flex-basis: 100%; padding-bottom: 30px;}
	.smailing6 .container-fluid{padding-left: 5%;}

	/*lippo*/
	.lippo1{padding-top: 150px;}
		.lippo1 .scaled{transform-origin: top left; transform: scale(.35); margin-left: -10%; height: 250px;}
		.lippo1 .row{flex-direction: column-reverse;}
		.lippo1 .col-8{margin-top: 60px; margin-left: 0;}
		.lippo1 .col-4{margin: auto; flex-basis: 95%;}
		.lippo1 .overlay{width: calc(140px * .45);}
	.lippo2, .lippo3, .lippo4{margin-top: calc(100px * .45);}
		.lippo3, .lippo3 video{height: 500px;}
		.lippo2 .owl-carousel .owl-item{padding: calc(20px * .45) 0;}
		.lippo2 .owl-carousel .owl-item img{width: 100%;}
		.lippo4{margin-bottom: calc(100px * .45);}
		.lippo4 .col-5{flex-basis: 100%; padding-bottom: 30px;}

	/*kalbe*/
	.kalbe1{padding-top: 150px;}
		.kalbe1 .container-fluid .ml{margin-left: 0;}
		.kalbe1 .scaled{transform-origin: top; transform: scale(.45); margin-left: -38%; height: 350px;}
		.kalbe1 .col-5, .kalbe1 .col-7{flex-basis: 100%;}
		.kalbe1 .col-5 .container{padding-top: 0;}
		.kalbe1 .f-16{width: 100%;}
		.kalbe1 .overlay{width: calc(140px * .45);}
	.kalbe2, .kalbe3, .kalbe4, .kalbe5{margin-top: calc(100px * .45);}
		.kalbe3 .col-5{margin: auto; flex-basis: 100%; padding-bottom: 30px;}
		.kalbe3 .col-5:nth-child(2){margin: auto;}
		.kalbe3, .kalbe3 video{height: 500px;}
		.kalbe4 .row{align-items: flex-start;}
		.kalbe4 .col-5{flex-basis: 100%; padding-bottom: 30px;}
		.kalbe4 .overlay{width: calc(140px * .45);}
	.kalbe5 .container-fluid{padding-left: 5%;}
		.kalbe5 .owl-carousel .owl-item{padding: calc(20px * .45) 0;}
		.kalbe5 .owl-carousel .owl-item img{width: calc(600px * 6);}

	/*kara*/
	.kara1{min-height: 80vh; margin-top: calc(100px * .65);}
	.kara1 img{max-width: 100%;}
		.kara1 .container-fluid .ml{margin-left: 0px;}	
		.kara1 .scaled{transform-origin: center; transform: scale(.65); margin-left: -10%;}
		.kara1 .container{padding-top: 0; margin-left: calc(-100px * .65);}
		.kara1 img.logo{width: calc(173px * .65);}
	.kara2, .kara4, .kara5, .kara6{margin-top: calc(100px * .65);}
		.kara2 .f-16{width: 100%;}
	.kara5 video{height: 80vh;}

	/*danamon*/
	.danamon1{min-height: 80vh; margin-top: calc(100px * .65);}
		.danamon1 .scaled{transform-origin: center; padding-top: calc(100px * .65);}
		.danamon1 .col-6.container{padding-top: calc(100px * .65);}
		.danamon1 .f-16{width: 100%;}
	.danamon3, .danamon4, .danamon5{margin-top: calc(100px * .65);}
	.danamon3 .f-16{width: 100%;}
	.danamon4 video{height: 80vh;}

	.more .col-6{height: 300px;}
		.more .action{width: 60%; left: 0; right: 0; margin: auto;}
		.more .col-6{flex-basis: 100%;}
		/* .more li .box{width: 60%; height: 50%;} */
		.more .logo img{max-width: 100px;}
		.more .logo._small img{max-width: 60px;}
		img.logo._small {max-width: 100px;}	

	/*print*/
	.print{padding: 120px 0 60px 0;}
	.print ul {width: 320px;}
	.print li::before {min-width: 40px;}  
	.print .col-3 {flex-basis: 100%;}
	.print .col-8 {flex-basis: 100%; padding-top: 40px;}
	.print .col-8 li::before{font-size: var(--f-30); min-width: 40px;}
	.print .col-8 li{width: 100%; font-size: var(--f-20); margin-bottom: 5px;}
	.print .col-8 li, .print .col-8 li:nth-child(3n){margin-right: 0;}
	
	/*DOM*/
	.fancybox-content{padding: 0;}
	.animated-modal {max-width: 100%;}
	.animated-modal .row .col-5{flex-basis: 100%; padding: 0; margin: 0;}
	.animated-modal .row .col-6{flex-basis: 100%; padding: 0; margin: 0; justify-content: center; display: flex; flex-direction: column; align-items: center;}
	.animated-modal .works-icon{margin-top: 5px; justify-content: center;}
		.animated-modal li{margin: 0; margin-right: 15px;}
		.animated-modal li:nth-last-child(1){margin: 0;}
		.animated-modal li:nth-last-child(2){margin-right: 5px;}
		.detailImg{padding-top: 15px;}
		.animated-modal .owl-carousel .owl-nav{margin-top: -65px;}
		.animated-modal .owl-carousel .owl-item img{max-width: 100%;}
		
		
	.fancybox-button{width: calc(88px * .55); height: calc(88px * .55);}
		.fancybox-slide--html .fancybox-close-small{width: 40px;height: 40px;right: 5%; padding: 5px;}

	.owlPrev, .owlNext, .disabled .owlPrev, .disabled .owlNext{width: 40px; height: 40px;}
	.owlPrev, .disabled .owlPrev{left: 5%; background-size: auto 15px;}
	.owlNext, .disabled .owlNext{right: 5%; background-size: auto 15px;}

	.grid-item{width: 48%;}
	.grid-col-sizer {width: 50%;}  
	.grid-filter{gap: var(--space-3);}
	.grid-filter li{padding: var(--space-0) var(--space-2); font-size: var(--f-12);}
	.grid-filter li:hover{padding: var(--space-0) var(--space-2);}


}

/*mobile landscape*/
@media only screen and (min-width: 700px) and (max-width: 999px) {
	:root {
		--f-12: calc(12px * .8);
		--f-16: calc(16px * .8);
		--f-20: calc(20px * .8);
		--f-30: calc(30px * .8);
		--f-40: calc(40px * .6);
		--f-80: calc(80px * .6);
		--f-100: calc(100px * .55);
		--f-350: calc(350px * .5);
		--lh-12: calc(24px * .8);
		--lh-16: calc(36px * .8);
		--lh-30: calc(50px * .8);
		--lh-40: calc(50px * .6);
		--lh-80: calc(90px * .6);
		--lh-100: calc(100px * .55);
		--lh-350: calc(350px * .5);
		--space-1 : calc(10px * .7);
	}
	html, body{overflow-x:hidden;}

	.icon-hubungi.wa, .icon-hubungi.loc{transform: scale(.7);}
	.icon-works{transform: scale(.7);}

	/*button*/
	.btn-main{padding: calc(12px * .7) calc(20px * .7); font-size: calc(24px * .7);}

	.btn-rec{width: calc(50px * .7); height: calc(50px * .7);}
	.arrow-up{width: calc(19px  * .7); height: calc(11px  * .7); background-size: calc(19px * .7) calc(11px * .7);}
	.arrow-down{width: calc(19px  * .7); height: calc(11px  * .7); background-size: calc(19px * .7) calc(11px * .7);}
	.arrow-right{width: calc(11px  * .7); height: calc(19px  * .7); background-size: calc(11px * .7) calc(19px * .7);}
	.arrow-left{width: calc(11px  * .7); height: calc(19px  * .7); background-size: calc(11px * .7) calc(19px * .7);}

	.contact{bottom: 50px; right: 2.5%; width: 240px;}
	.contact.bottom{bottom: 125px;}
	.contact.show{height: 55px;}
	.contact.bottom.show{background: #fff;}
	.contact-icon{bottom: calc(5px  * .7); right: calc(-5px  * .7);}
	.contact-btn{bottom: 0px; right: 0px;}
	.active .contact-btn{width: calc(55px  * .7); height: calc(74px  * .7); background-size: calc(55px  * .7) auto;}
	.contact-btn#morph{width: calc(170px  * .7);  bottom: calc(-5px  * .7); right: calc(-90px  * .7);}
	.dot-elastic, .dot-elastic::before, .dot-elastic::after{width: calc(5px  * .7); height: calc(5px  * .7);}
	.dot-elastic {bottom: calc(35px  * .7) ; right: calc(30px  * .7) ;}
	.dot-elastic::before {left: calc(-10px  * .7) ;}
	.dot-elastic::after {left: calc(10px  * .7) ;}


	.side .contact{right: calc(245px * .7);}
	.icon-sosmed{margin-left: calc(-25px * .7);}
	.show .icon-sosmed, .active .icon-sosmed{margin: 0 calc(10px * .6); transform: translateX(-50px);}

	/*container*/
	.container, .container-fluid, .wrapper{width: 95%;}
		.container-fluid{width: 100%;}
		.container-fluid .ml{margin-left: 2.5%;}
		.container-fluid .mr{margin-right: 2.5%;}
	.wrapper{width: 95%;}

	section img.logo{max-width: 60%;}
	.cloud{top: calc(480px * .7);}
		.cloud img{width: calc(2873px * .6);}

	/*header*/
	header{padding-top: calc(70px * .6);}
	header .wrapper{height: calc(76px * .7); padding-top: calc(20px * .6); background-size: auto calc(76px * .7);}
	header.small{top: calc(-80px * .6);}
	header.small .wrapper{height: calc(59px * .6); padding: calc(15px * .6) 0; background-size: auto calc(59px * .6);}
	header .logo{width: calc(182px * .6); height: calc(72px * .6); background-size: calc(182px * .6) auto;}
	header.small .logo{width: calc(180px * .6); height: calc(30px * .6); background-size: calc(182px * .6) auto;}
	footer .logo{width: calc(182px * .6); height: calc(32px * .6); background-size: calc(182px * .6) auto;}
	header .logo .dot, footer .logo .dot{width: 3.5px; height: 3.5px; margin-left: 34.5px; margin-top: -1px;}
	footer .logo .dot{margin-top: 1px;}
	.menu > ul {padding-right: 60px;}
		.menu > ul > li a{padding: 6px 12px;}


	/*footer*/
	footer{height: 130px; padding: calc(105px * .3) 0;}
	footer.home{height: calc(290px * .6);}
		footer .contact-btn, footer .contact-icon{bottom: 30px;}
		footer nav{top: -5px; transform: none;}

	/*home*/
	.section1{min-height: 700px;}
	.section1 .btn-rec{bottom: calc(-110px * .6); margin-left: calc(510px * .6);}
		.s1-1{margin-bottom: calc(-120px * .5); margin-left: calc(360px * .5);}
		.s1-3{margin-top: calc(-20px * .6); margin-left: calc(510px * .6);}
		.s1-4{margin-top: calc(150px * .6); margin-left: calc(510px * .6);}
	.obj._1-1, .obj._1-2, .obj._1-3, .obj._1-4, .obj._1-5, .obj._1-6{margin-top: calc(-30px * .6);}
		.obj._1-1{margin-left: calc(-450px * .6);}
		.obj._1-2{margin-left: calc(-280px * .6);}
		.obj._1-3{margin-left: calc(-280px * .6);}
		.obj._1-4{margin-left: calc(-460px * .6); margin-top: calc(15px * .6); width: calc(16px * .6); height: calc(16px * .6);}
		.obj._1-5{margin-left: calc(-330px * .6); margin-top: calc(100px * .6); width: calc(28px * .6); height: calc(28px * .6);}
		.obj._1-6{margin-left: calc(-380px * .6); margin-top: calc(50px * .6); width: calc(182px * .6); height: calc(30px * .6);}

	.section2{height: 100vh;}
		.section2 .container{width: 480px;}
		.section2 .video{height: 100vh; margin-left: -25%;}
		.s2-3{width: 300px; margin-top: calc(60px * .6); margin-left: 180px;}

	.section3 .scaled, .section4 .scaled{transform:scale(.6);}	
	.section3{min-height: calc(1000px * .6);}
		.s3-1{margin: calc(600px * .65) 0 0 calc(85px * .6);}
		.s3-2{margin: calc(940px * .65) 0 0 200px; width: 350px;}

	.section4{min-height: calc(1300px * .7); background-position: top; margin-top: 300px;}
		.s4-1{margin: calc(622px * .6) 0 0 calc(-476px * .6);}
		.s4-2{margin: calc(950px * .6) 0 0 calc(-390px * .6); width: calc(430px * .6);}
		.s4-3{margin: calc(950px * .6) 0 0 calc(150px * .6); width: calc(350px * .6);}

	.section5, .section6, .section7, .section8, .section9, .section10{padding-top: 100px;}
	.section5 .scaled, .section6 .scaled, .section7 .scaled, .section8 .scaled, .section9 .scaled{transform: scale(.4);}
	.section5{min-height: 850px; padding-top: 200px;}
	.section5 .scaled{transform-origin: top right; margin-right: 18%; margin-top: 30%;}	
		.section5 .f-16{width: calc(360px * .7);}

	.section6{min-height: 700px;}
		.section6 .container-fluid{width: 95%;}
		.section6 .scaled{position: relative; height: auto; transform-origin: left; margin: auto; margin-top: -30px; margin-left: -10%;}	
			.section6 .f-16{width: 100%;}
			.section6 .container{padding-top: 0px;}

	.section7{min-height: 700px;}
	.section7 .scaled{transform-origin: right; margin-right: -10px;}	
	.section7 .container-fluid{padding-top: calc(50px * .5);}
		.section7 .is-relative{margin-left: 0;}
		.section7 .f-16{width: calc(410px * .7);}

	.section8{min-height: 600px;}
	.section8 .scaled{transform-origin: left; margin-left: 0%;}
		.section8 .container{padding-top: calc(150px * .5);}
		.section8 .f-16{width: calc(480px * .7);}	

	.section9{min-height: 700px;}
	.section9 .scaled{transform-origin: right; margin-right: 50px;}
		.section9 .container{padding-top: calc(150px * .5);}
		.section9 .f-16{width: calc(500px * .7);}

	.section10{min-height: 650px; margin-bottom: 0px; padding-top: 50px;}
		.section10 .col-6:nth-child(1){padding-left: 2.5%;}
		.section10 .col-6:nth-child(2){padding-right: 2.5%;}

	/*services*/
	.services1{padding-top: calc(260px * .7);}
	.services1 .scaled{transform: scale(.6);}
		.sf1-1{padding-top: calc(620px * .7);}
		.sf1-2, .sf1-3{margin: calc(30px * .7) 0 0 10%; width: calc(820px * .7);}

	.services2{padding: calc(100px * .7) 0;}
		.services2 ._years{width: 45px; margin-top: -26px; margin-left: -34px;}
		.services2 ._years.f-16{font-size: 11px; line-height: 11px;}
		
	.services3{padding: calc(100px * .7) 0;}
		.services3 .row li{width: 22%;}
		.services3 .row li.half{width: 20%;}
		.services3 .row li.double{width: 28%;}

	.services5 .container{padding: calc(100px * .5);}

	.services6{min-height: 1150px;}
	.services6 .scaled{transform: scale(.7);}
		.sf6-1{padding-top: calc(400px * .7); z-index: -1;}
		.sf6-2{width: 250px; margin-right: 20px; padding-top: 250px;}

	/*works*/
	.works1{padding-top: calc(260px * .7); padding-bottom: 50px;}
	.works1._detail {padding-top: 80px; padding-bottom: 20px;}
	.works1 .owl-carousel .owl-item img{max-width: 90%;}
	.works1 .client-list li{margin: 0 3%; padding: calc(40px * .7) 0;}
		
	.autoplay{bottom: 18%;}
	.autoplay .play, .autoplay .stop{width: calc(52px * .7); height: calc(52px * .7);}
	.autoplay .play img, .autoplay .stop img{width: calc(11px * .7); height: calc(19px * .7);}
	.works2, .works2 video{height: 500px;}
	.works2 a strong{color: var(--c-white);}
	.works2 .f-80{padding-top: calc(80px * .7);}
	.works2 .f-16{width: calc(528px * .7); margin-top: calc(40px * .7);}

	.works-list .item{width: 600px; padding: 0;}
	.detailVideo iframe{width: calc(975px * .6); height: calc(548px * .6);}
	.works-list #stop-video{height: calc(440px * .52); top: calc(55px * .85);}

	/*projects*/
	.projects1{min-height: 800px; margin-top: calc(150px * .4);}
		.projects1 .scaled{transform: scale(.6) translateX(-80px);}
		.pf1-1{width: 230px; margin-right: 20px; padding-top: 150px;}
	.projects2{min-height: 700px; margin-top: calc(60px * .7);}	
		.projects2 .col-6{margin-right: 10px;}	
		.projects2 .col-6:nth-child(2){padding-right: 10px;}	
		.projects2 .row.start div{margin: calc(10px * .7); flex-basis: 45%;}	
	.projects3{min-height: 500px; margin-top: calc(60px * .7);}	
		.projects3 .scaled{transform: scale(.55) translateY(-130px) translateX(0px);}
		.obj._p3-1{transform: scale(.5); transform-origin: left center;}
		.projects3 .col-6:nth-child(1){padding-right: 40px;}	
	.projects4{min-height: 700px; margin-top: calc(60px * .7);}	
		.projects4 .scaled{transform: translateX(-10px);}
		.projects4 .col-7, .projects4 .col-4{flex-basis: 45%;}
		.projects4 .col-4{padding-top: calc(100px * .7);}
	.projects5{min-height: 0px; padding: 0; padding-bottom: 60px;}	
		.projects5 .scaled{transform: scale(.9); transform-origin: left;}
		.projects5 .f-40, .projects5 .f-16{padding-right: 0;}
		.projects5 .col-2{padding-top: calc(180px * .7); flex-basis: 30%;}	
		.projects5 .col-3{padding-top: calc(80px * .7); flex-basis: 95%;}		
		.projects5 .col-7{flex-basis: 65%;}		
	.projects6 ._bg{min-height: 800px; padding: calc(180px * .7) 0;}
	.projects7{margin-top: calc(-100px * .7);}	
		.projects7 .col-4{margin-top: 120px;}	
	.projects8{min-height: 700px; padding-top: calc(150px * .7);}
		.projects8 .scaled{transform: scale(.9);}
		.projects8 .col-6{margin-top: calc(140px * .7); padding-right: 50px;}
	.projects9{min-height: 550px; padding-top: 80px;}
		.projects9 .scaled{height: auto; transform: scale(.5);}
		.projects9 img.logo{height: calc(48px * .7);}
			.projects9 .col-6{margin-top: 20px; padding-right: 40px;}	

	.projects2 img{max-width: 100%;}
	.projects4 img{max-width: auto;}
	.projects2 p, .projects3 p, .projects4 p, .projects5 p, .projects6 p, .projects7 p{padding-bottom: calc(30px * .7);}
	.projects2 .scaled, .projects3 .scaled, .projects4 .scaled, .projects5 .scaled{margin-top: calc(120px * .7);}

	/*hubungi*/
	.hubungi .scaled{transform: scale(.6); margin-top: 50px;}
		.hf1-1{padding-top: calc(375px * .6); margin-left: calc(85px * .6); letter-spacing: calc(20px * .5);}
		.hf1-2{margin: calc(255px * .7) auto 0 auto; width: 100%;}
		.hf1-3{margin: calc(60px * .6) auto 0 auto; width: 100%;}
	.hubungi iframe{min-height: 210px;}

	/*card*/
	.card .scaled{transform: scale(.5); margin-top: 0px;}
		.cf1-1{margin: calc(760px * .5) 0 0 calc(-292px * .5); width: calc(792px * .5); padding-bottom: calc(80px * .5); font-size: calc(24px * .5);}
		._cl ._1{width: calc(205px * .5);}
		._cl ._2{width: calc(169px * .5);}
		._cl ._3{width: calc(193px * .5);}
		._cl ._4{width: calc(110px * .5);}
		._ci a{transform-origin: left; transform: scale(.5);}

	/*indofood*/
	.indofood1{min-height: calc(1000px * .6); padding-top: calc(260px * .7);}
		.indofood1 .scaled{transform: scale(.45); margin-left: -40%;}
		.indofood1 .container{padding-top: 0; margin-left: calc(-100px * .6);}	
		.indofood1 .col-4{flex-basis: 40%;}
		.rec._in1-1{margin-left: -20%;}
	.indofood2{margin-top: calc(180px * .6);}		
		.indofood2 .overlay{width: calc(141px * .6);}
	.indofood3{margin-top: calc(100px * .6);}
		.indofood3, .indofood3 video{height: 500px;}
		.indofood3 .col-3{flex-basis: 35%;}
		.indofood3 .col-2{flex-basis: 8.3333%;}
	.indofood4{margin-top: calc(100px * .6);}
		.indofood4 .row-2{margin-top: 30px; margin-left: calc(-50px * .6);}
		.indofood4 .row-3{margin-top: calc(100px * .6);}
		.indofood4 .row-3 .row-3-1 .overlay{top: 200px; width: calc(141px * .6);}
		.indofood4 .row-3 .row-3-2{padding-left: calc(20px * .6);}
	.indofood5, .indofood6, .indofood7{padding: calc(50px * .6) 0;}
		.indofood5 .container-fluid, .indofood6 .container-fluid{padding-left: 2.5%;}
		.indofood7 .overlay{width: calc(120px * .6); margin-top: calc(200px * .6);}

	/*danone*/
	.danone1{min-height: 900px; padding-top: calc(260px * .7);}
		.danone1 .scaled{transform: scale(.5); transform-origin: center; margin-right: -5%;}
		.danone1 .container-fluid{padding-top: 0;}	
		.danone1 .f-16{width: calc(400px * .7);}
		.danone1 .obj._5-13{margin-top: 15%;}
	.danone2, .danone3, .danone4, .danone5{margin-top: calc(100px * .7);}
	.danone3 .col-4{margin-top: calc(-70px * .7); margin-right: 0; flex-basis: 40%;}
		.danone3 .col-4 .f-16{padding-right: 0;}
	.danone6{margin-top: calc(200px * .7);}
		.danone6 .container-fluid{padding-left: 2.5%;}
		.danone6 .col-4{padding-right: calc(80px * .7);}

	/*abc*/
	.abc1{min-height: 700px; padding-top: calc(260px * .7);}
		.abc1 .scaled{transform: scale(.5);}
		.abc1 .container-fluid{padding-top: calc(50px * .6);}
		.abc1 .container-fluid .ml{margin-left: 5%;}
		.abc1 .is-relative{margin-left: calc(-300px * .6);}
		.abc1 .f-16{width: 100%;}
		.abc1 .col-5{width: 40%; flex-basis: 40%;}
		.abc1 .img{display: none;}
	.abc2{margin-top: 0;}
	.abc3, .abc4, .abc5, .abc6, .abc7, .abc8{margin-top: calc(100px * .6);}
	.abc3 .col-3{margin-bottom: calc(-50px * .6);}
	.abc3, .abc3 video{height: 500px;}
	.abc8{margin-bottom: calc(100px * .6);}

	/*pg*/
	.pg1{min-height: 700px; padding-top: calc(260px * .7);}
		.pg1 .scaled{transform: scale(.5); margin-left: -5%;}
		.pg1 .container{padding-top: calc(200px * .6); padding-left: 10%;}
		.pg1 .f-16, .pg1 .f-30{width: 90%;}	
	.pg2{margin-top: 100px;}
	.pg3, .pg4, .pg5, .pg6, .pg7, .pg8{margin-top: calc(100px * .6);}
	.pg3, .pg3 video{height: 500px;}
	.pg7 .overlay._1{width: calc(140px * .6);}
	.pg7 .img img{min-height: 550px;}
	.pg7 .col-3{flex-basis: 32%;}
	.pg8 .container-fluid{padding-left: 2.5%;}

	/*smailing*/
	.smailing1{margin-top: calc(260px * .7);}
		.smailing1 .scaled{transform: scale(.45); margin-left: -55%;}
		.smailing1 .col-6.container{padding-top: calc(200px * .6);}
		.smailing1 .f-16{width: calc(500px * .6);}
		.smailing1 .overlay{width: calc(140px * .6);}
	.smailing2, .smailing3, .smailing4, .smailing5, .smailing6{margin-top: calc(100px * .6);}
		.smailing2, .smailing2 video{height: 500px;}
		.smailing2 .col-4{margin-top: calc(-70px * .6); margin-right: 100px;}
		.smailing2 .col-4 .f-16{padding-right: 0;}
	.smailing6 .container-fluid{padding-left: 2.5%;}

	/*lippo*/
	.lippo1{padding-top: calc(260px * .7);}
		.lippo1 .scaled{transform: scale(.45); margin-left: -10%;}
		.lippo1 .col-8{margin-top: calc(160px * .6); margin-left: 0;}
		.lippo1 .col-4{margin-left: calc(-50px * .6);}
		.lippo1 .overlay{width: calc(140px * .6);}
	.lippo2, .lippo3, .lippo4{margin-top: calc(100px * .6);}
		.lippo3, .lippo3 video{height: 500px;}
		.lippo2 .owl-carousel .owl-item{padding: calc(20px * .6) 0;}
		.lippo2 .owl-carousel .owl-item img{width: calc(600px * .6);}
		.lippo4{margin-bottom: calc(100px * .6);}

	/*kalbe*/
	.kalbe1{padding-top: calc(260px * .7);}
		.kalbe1 .scaled{transform-origin: left; transform: scale(.45); margin-left: -20%;}
		.kalbe1 .col-5, .kalbe1 .col-7{flex-basis: 45%;}
		.kalbe1 .col-5 .container{padding-top: calc(100px * .6);}
		.kalbe1 .f-16{width: calc(500px * .6);}
		.kalbe1 .overlay{width: calc(140px * .6);}
	.kalbe2, .kalbe3, .kalbe4, .kalbe5{margin-top: calc(100px * .6);}
		.kalbe3 .col-5{margin: auto; flex-basis: 100%; padding-bottom: 30px;}
		.kalbe3 .col-5:nth-child(2){margin: auto;}
		.kalbe3, .kalbe3 video{height: 500px;}
		.kalbe4 .row{align-items: flex-start;}
		.kalbe4 .overlay{width: calc(140px * .6);}
	.kalbe5 .container-fluid{padding-left: 2.5%;}
		.kalbe5 .owl-carousel .owl-item{padding: calc(20px * .6) 0;}
		.kalbe5 .owl-carousel .owl-item img{width: calc(600px * 6);}

	.more .col-6{height: 400px;}
		.more .action{margin-left: calc(-160px * .8);}
		.more li .box{width: 50%; height: 50%;}
		.more .logo img{max-width: 180px;}
		.more .logo._small img{max-width: 120px;}
		img.logo._small {max-width: 120px;}	

	/*print*/
	.print{padding: 150px 0 60px 0;}
	.print li::before {min-width: 40px;}  
	.print .col-3 {flex-basis: 35%; padding-top: calc(45px * .7);}
	.print .col-8 {flex-basis: 60%;}
	.print .col-8 li{width: 50%;}
	.print .col-8 li, .print .col-8 li:nth-child(3n){margin-right: 0;}
	.print .col-8 li::before{min-width: calc(20px * .7);}
	
	/*DOM*/
	.fancybox-content{padding: 5%;}
	.fancybox-button{width: calc(88px * .7); height: calc(88px * .7);}
	.animated-modal .row .col-5{flex-basis: 60%;}
	.animated-modal .row .col-6{flex-basis: 40%;}
	.animated-modal li{margin-left: 20px;}
	.animated-modal li:nth-first-child(1){margin-left: 0px;}
	.animated-modal .owl-carousel .owl-item img{width: 82%;}
		.detailImg{padding-top: 15px;}
		.fancybox-slide--html .fancybox-close-small{width: 45px;height: 45px; right: 5%; padding: 5px;}

	.owlPrev, .owlNext, .disabled .owlPrev, .disabled .owlNext{width: 45px; height: 45px;}
	.owlPrev, .disabled .owlPrev{left: -5px; background-size: auto 17px;}
	.owlNext, .disabled .owlNext{right: -5px; background-size: auto 17px;}
		
}

/*Tablet*/
@media only screen and (min-width: 1000px) and (max-width: 1199px) {
	:root {
		--f-12: calc(12px * .8);
		--f-16: calc(16px * .8);
		--f-20: calc(20px * .8);
		--f-30: calc(30px * .8);
		--f-40: calc(40px * .8);
		--f-80: calc(80px * .7);
		--f-100: calc(100px * .7);
		--f-350: calc(350px * .65);
		--lh-12: calc(24px * .8);
		--lh-16: calc(36px * .8);
		--lh-30: calc(50px * .8);
		--lh-40: calc(50px * .8);
		--lh-80: calc(90px * .7);
		--lh-100: calc(100px * .7);
		--lh-350: calc(350px * .65);
		--space-1 : calc(10px * .7);
	}
	html, body{overflow-x:hidden;}

	.icon-hubungi.wa, .icon-hubungi.loc{transform: scale(.7);}

	/*container*/
	.container, .container-fluid, .wrapper{width: 90%;}
	.container-fluid{width: 100%;}
	.container{max-width: 1199px;}
		.container-fluid .ml{margin-left: 2.5%;}
		.container-fluid .mr{margin-right: 2.5%;}
	.wrapper{width: 95%;}

	section img.logo{max-width: 80%;}
	.cloud{top: calc(480px * .8);}
		.cloud img{width: calc(2873px * .6);}

	/*header*/
	header{padding-top: calc(70px * .7);}
	header .wrapper{height: calc(76px * .7); padding-top: calc(20px * .7); background-size: auto calc(76px * .7);}
	header.small{top: calc(-80px * .7);}
	header.small .wrapper{height: calc(59px * .7); padding: calc(15px * .7) 0; background-size: auto calc(59px * .7);}
	header .logo{width: calc(182px * .7); height: calc(72px * .7); background-size: calc(182px * .7) auto;}
	header.small .logo{width: calc(180px * .7); height: calc(30px * .7); background-size: calc(182px * .7) auto;}
	footer .logo{width: calc(182px * .7); height: calc(32px * .7); background-size: calc(182px * .7) auto;}
	header .logo .dot, footer .logo .dot{width: calc(6px * .7); height: calc(6px * .7); margin-left: calc(57px * .7);}
	.menu > ul {padding-right: calc(140px * .7);}

	/*footer*/
	footer{height: calc(290px * .7); padding: calc(105px * .7) 0;}

	/*home*/
	.section1{min-height: 700px;}
	.section1 .btn-rec{bottom: calc(-110px * .7); margin-left: calc(510px * .7);}
		.s1-1{margin-bottom: calc(-120px * .7); margin-left: calc(360px * .7);}
		.s1-3{margin-top: calc(-20px * .7); margin-left: calc(510px * .7);}
		.s1-4{margin-top: calc(150px * .7); margin-left: calc(510px * .7);}
	.obj._1-1, .obj._1-2, .obj._1-3, .obj._1-4, .obj._1-5, .obj._1-6{margin-top: calc(-30px * .7);}
		.obj._1-1{margin-left: calc(-450px * .7);}
		.obj._1-2{margin-left: calc(-280px * .7);}
		.obj._1-3{margin-left: calc(-280px * .7);}
		.obj._1-4{margin-left: calc(-460px * .7); margin-top: calc(15px * .7); width: calc(16px * .7); height: calc(16px * .7);}
		.obj._1-5{margin-left: calc(-330px * .7); margin-top: calc(100px * .7); width: calc(28px * .7); height: calc(28px * .7);}
		.obj._1-6{margin-left: calc(-380px * .7); margin-top: calc(50px * .7); width: calc(182px * .7); height: calc(30px * .7);}

	.section2{height: 100vh;}
		.section2 .container{width: 610px;}
		.section2 .video{height: 100vh;}
		.s2-3{width: calc(360px * .8); margin-top: calc(60px * .8); margin-left: 310px;}

	.section3 .scaled, .section4 .scaled{transform:scale(.8);}	
	.section3{min-height: calc(1000px * .8);}
		.s3-1{margin: calc(600px * .8) 0 0 calc(85px * .8);}
		.s3-2{margin: calc(940px * .8) 0 0 230px; width: 460px;}

	.section4{min-height: calc(1300px * .8); background-position: top;}
		.s4-1{margin: calc(622px * .8) 0 0 calc(-476px * .8);}
		.s4-2{margin: calc(950px * .8) 0 0 calc(-390px * .8); width: calc(430px * .8);}
		.s4-3{margin: calc(950px * .8) 0 0 calc(150px * .8); width: calc(350px * .8);}

	.section5, .section6, .section7, .section8, .section9, .section10{padding-top: calc(200px * .4);}
	.section5 .scaled, .section6 .scaled, .section7 .scaled, .section8 .scaled, .section9 .scaled{transform: scale(.6);}
	.section5{min-height: calc(1000px * .7); padding-top: 180px;}
	.section5 .scaled{transform-origin: top right; margin-right: 80px;}	
		.section5 .f-16{width: calc(360px * .7);}

	.section6 .scaled{transform-origin: left; margin-left: -5%;}	
		.section6 .f-16{width: calc(500px * .7);}
		.section6 .container{padding-top: 50px;}	

	.section7 .scaled{transform-origin: right; margin-right: -5px;}	
	.section7 .container-fluid{padding-top: calc(50px * .7);}
		.section7 .is-relative{margin-left: 0px;}
		.section7 .f-16{width: calc(410px * .7);}

	.section8 .scaled{transform-origin: left; margin-left: -5%;}
		.section8 .container{padding-top: calc(150px * .7); padding-bottom: calc(50px * .7);}
		.section8 .f-16{width: calc(480px * .7);}	

	.section9 .scaled{transform-origin: right; margin-right: 80px;}
		.section9 .container{padding-top: calc(150px * .7); padding-bottom: calc(50px * .7);}
		.section9 .f-16{width: calc(500px * .7);}

	.section10{margin-bottom: calc(100px * .6); padding-top: calc(200px * .6);}
		.section10 .col-6:nth-child(1){padding-left: 2.5%;}
		.section10 .col-6:nth-child(2){padding-right: 2.5%;}

	/*services*/
	.services1 .scaled{transform: scale(.6);}
		.sf1-1{padding-top: calc(620px * .7);}
		.sf1-2, .sf1-3{margin: calc(30px * .7) 0 0 calc(355px * .7); width: calc(820px * .7);}

	.services2{padding: calc(100px * .7) 0;}
		.services2 ._years{width: calc(85px * .7); margin-top: -12px; margin-left: -45px;}

	.services3{padding: calc(100px * .7) 0;}

	.services5 .container{padding: calc(100px * .7);}

	.services6{min-height: 1100px;}
	.services6 .scaled{transform: scale(.7);}
		.sf6-1{padding-top: calc(400px * .7); z-index: -1;}
		.sf6-2{width: calc(320px * .7); margin-right: calc(80px * .7); padding-top: calc(40px * .7);}

	/*works*/
	.works1{min-height: 680px; padding-top: calc(200px * .7);}
	.works1._detail {padding-top: 70px; padding-bottom: 20px;}
	.works1 .owl-carousel .owl-item img{max-width: 90%;}
	.works1 .client-list li{margin: 0 3%; padding: calc(40px * .7) 0;}
		
	.autoplay{bottom: calc(120px * .7);}
	.autoplay .play, .autoplay .stop{width: calc(52px * .7); height: calc(52px * .7);}
	.autoplay .play img, .autoplay .stop img{width: calc(11px * .7); height: calc(19px * .7);}
	.works2, .works2 video{height: 600px;}
	.works2 a strong{color: var(--c-white);}
	.works2 .f-80{padding-top: calc(80px * .7);}
	.works2 .f-16{width: calc(528px * .7); margin-top: calc(40px * .7);}

	.works-list .item{width: calc(1280px * .6); padding: 0;}
	.detailVideo iframe{width: calc(975px * .7); height: calc(548px * .7);}
	.works-list #stop-video{height: calc(440px * .65); top: calc(55px * .85);}

	/*projects*/
	.projects1{min-height: 1000px; margin-top: calc(150px * .4);}
		.projects1 .scaled{transform: scale(.7);}
		.pf1-1{width: calc(320px * .8); margin-right: calc(80px * .8); padding-top: 300px;}
	.projects2{min-height: 700px; margin-top: calc(60px * .8);}	
		.projects2 .col-6{margin-right: calc(20px * .8);}	
		.projects2 .col-6:nth-child(2){padding-right: 100px;}	
		.projects2 .row.start div{margin: calc(10px * .8); flex-basis: 45%;}	
	.projects3{min-height: 500px; margin-top: calc(60px * .8);}	
		.projects3 .scaled{transform: scale(.7) translateY(-140px) translateX(50px);}
		.obj._p3-1{transform: scale(.7); transform-origin: bottom;}
		.projects3 .col-6:nth-child(1){padding-right: 100px;}	
	.projects4{min-height: 700px; margin-top: calc(60px * .8);}	
		.projects4 .scaled{transform: scale(.8);}
		.projects4 .col-4{padding-top: calc(100px * .8);}
	.projects5{min-height: 0px; padding: 50px 0;}	
		.projects5 .scaled{transform: scale(.8);}
		.projects5 .f-40, .projects5 .f-16{padding-right: 0;}
		.projects5 .col-2{padding-top: calc(180px * .8);}	
		.projects5 .col-3{padding-top: calc(80px * .8);}		
	.projects6 ._bg{min-height: 800px; padding: calc(180px * .8) 0;}
	.projects7{margin-top: calc(-100px * .8);}	
		.projects7 .col-4{margin-top: calc(320px * .8);}	
	.projects8{min-height: 800px; padding-top: calc(150px * .8);}
		.projects8 .scaled{transform: scale(.9);}
		.projects8 .col-6{margin-top: calc(140px * .8); padding-right: 100px;}
	.projects9{min-height: 650px; padding-top: 90px;}
		.projects9 .scaled{height: auto; transform: scale(.6);}
		.projects9 img.logo{height: calc(48px * .7);}
			.projects9 .col-6{margin-top: 70px; padding-right: calc(150px * .6);}	

	.projects2 img{max-width: 100%;}
	.projects2 p, .projects3 p, .projects4 p, .projects5 p, .projects6 p, .projects7 p{padding-bottom: calc(30px * .8);}
	.projects2 .scaled, .projects3 .scaled, .projects4 .scaled, .projects5 .scaled{margin-top: calc(120px * .8);}

	/*hubungi*/
	.hubungi .scaled{transform: scale(.6); margin-top: 40px;}
		.hf1-1{padding-top: calc(375px * .6); margin-left: calc(85px * .6); letter-spacing: calc(20px * .6);}
		.hf1-2{margin: calc(255px * .6) auto 0 auto; width: calc(1070px * .7);}
		.hf1-3{margin: calc(60px * .6) auto 0 auto; width: calc(1070px * .7);}
	.hubungi iframe{min-height: 210px;}

	/*card*/
	.card .scaled{transform: scale(.6); margin-top: 0px;}
		.cf1-1{margin: calc(760px * .6) 0 0 calc(-292px * .6); width: calc(792px * .6); padding-bottom: calc(80px * .6); font-size: calc(24px * .6);}
		._cl ._1{width: calc(205px * .6);}
		._cl ._2{width: calc(169px * .6);}
		._cl ._3{width: calc(193px * .6);}
		._cl ._4{width: calc(110px * .6);}
		._ci a{transform-origin: left; transform: scale(.6);}

	/*indofood*/
	.indofood1{min-height: calc(1000px * .7); padding-top: calc(100px * .7);}
		.indofood1 .scaled{transform: scale(.6); margin-left: -30%;}
		.indofood1 .container{padding-top: calc(220px * .7); margin-left: calc(-100px * .7);}	
		.rec._in1-1{margin-left: -25%;}
	.indofood2{margin-top: calc(180px * .7);}		
		.indofood2 .overlay{width: calc(141px * .7);}
	.indofood3{margin-top: calc(100px * .7);}
		.indofood3, .indofood3 video{height: 500px;}
	.indofood4{margin-top: calc(100px * .7);}
		.indofood4 .row-2{margin-top: calc(-100px * .7); margin-left: calc(-50px * .7);}
		.indofood4 .row-3{margin-top: calc(100px * .7);}
		.indofood4 .row-3 .row-3-1 .overlay{top: calc(380px * .7); width: calc(141px * .7);}
		.indofood4 .row-3 .row-3-2{padding-left: calc(20px * .7);}
	.indofood5, .indofood6, .indofood7{padding: calc(50px * .7) 0;}
		.indofood5 .container-fluid, .indofood6 .container-fluid{padding-left: 5%;}
		.indofood7 .overlay{width: calc(120px * .7); margin-top: calc(200px * .7);}

	/*danone*/
	.danone1{min-height: 900px;}
		.danone1 .scaled{transform: scale(.6); transform-origin: center;}
		.danone1 .container-fluid{padding-top: calc(260px * .7);}	
		.danone1 .f-16{width: calc(500px * .7);}
		.danone1 .obj._5-13{margin-top: 15%;}
	.danone2, .danone3, .danone4, .danone5{margin-top: calc(100px * .7);}
	.danone3 .col-4{margin-top: calc(-70px * .7); margin-right: calc(200px * .7);}
		.danone3 .col-4 .f-16{padding-right: calc(80px * .7);}
	.danone6{margin-top: calc(200px * .7);}
		.danone6 .container-fluid{padding-left: 5%;}
		.danone6 .col-4{padding-right: calc(80px * .7);}

	/*abc*/
	.abc1{min-height: 1500px; padding-top: calc(200px * .7);}
		.abc1 .scaled{transform: scale(.6);}
		.abc1 .container-fluid{padding-top: calc(50px * .7);}
		.abc1 .container-fluid .ml{margin-left: 5%;}
		.abc1 .is-relative{margin-left: calc(-300px * .7);}
		.abc1 .f-16{width: 100%;}
		.abc1 .col-5{width: 40%; flex-basis: 40%;}
	.abc2{margin-top: -65vw;}
	.abc3, .abc4, .abc5, .abc6, .abc7, .abc8{margin-top: calc(100px * .7);}
	.abc3 .col-3{margin-bottom: calc(-50px * .7);}
	.abc3, .abc3 video{height: 500px;}
	.abc8{margin-bottom: calc(100px * .7);}

	/*pg*/
	.pg1{min-height: 700px; padding-top: calc(200px * .7);}
		.pg1 .scaled{transform: scale(.6); margin-left: -5%;}
		.pg1 .container{padding-top: calc(200px * .7);}
		.pg1 .f-16, .pg1 .f-30{width: calc(500px * .7);}	
	.pg2{margin-top: 100px;}
	.pg3, .pg4, .pg5, .pg6, .pg7, .pg8{margin-top: calc(100px * .7);}
	.pg3, .pg3 video{height: 500px;}
	.pg7 .overlay._1{width: calc(140px * .7);}
	.pg7 .img img{min-height: 500px;}
	.pg7 .col-3{flex-basis: 35%;}
	.pg8 .container-fluid{padding-left: 5%;}

	/*smailing*/
	.smailing1{margin-top: calc(100px * .7);}
		.smailing1 .scaled{transform: scale(.6); margin-left: -10%;}
		.smailing1 .col-6.container{padding-top: calc(200px * .7);}
		.smailing1 .f-16{width: calc(500px * .7);}
		.smailing1 .overlay{width: calc(140px * .7);}
	.smailing2, .smailing3, .smailing4, .smailing5, .smailing6{margin-top: calc(100px * .7);}
		.smailing2, .smailing2 video{height: 500px;}
		.smailing2 .col-4{margin-top: calc(-70px * .7); margin-right: calc(300px * .7);}
		.smailing2 .col-4 .f-16{padding-right: calc(80px * .7);}
	.smailing6 .container-fluid{padding-left: 5%;}

	/*lippo*/
	.lippo1{padding-top: calc(200px * .7);}
		.lippo1 .scaled{transform: scale(.6); margin-left: -10%;}
		.lippo1 .col-8{margin-top: calc(160px * .7); margin-left: 0;}
		.lippo1 .col-4{margin-left: calc(-50px * .7);}
		.lippo1 .overlay{width: calc(140px * .7);}
	.lippo2, .lippo3, .lippo4{margin-top: calc(100px * .7);}
		.lippo3, .lippo3 video{height: 500px;}
		.lippo2 .owl-carousel .owl-item{padding: calc(20px * .7) 0;}
		.lippo2 .owl-carousel .owl-item img{width: calc(600px * .7);}
		.lippo4{margin-bottom: calc(100px * .7);}

	/*kalbe*/
	.kalbe1{padding-top: calc(200px * .7);}
		.kalbe1 .scaled{transform: scale(.6); margin-left: -10%;}
		.kalbe1 .col-5 .container{padding-top: calc(100px * .7);}
		.kalbe1 .f-16{width: calc(500px * .7);}
		.kalbe1 .overlay{width: calc(140px * .7);}
	.kalbe2, .kalbe3, .kalbe4, .kalbe5{margin-top: calc(100px * .7);}
		.kalbe3 .overlay .col-5:nth-child(2){margin-top: calc(220px * .7); margin-left: calc(-100px * .7);}
		.kalbe3, .kalbe3 video{height: 600px;}
		.kalbe4 .overlay{width: calc(140px * .7);}
	.kalbe5 .container-fluid{padding-left: 5%;}
		.kalbe5 .owl-carousel .owl-item{padding: calc(20px * .7) 0;}
		.kalbe5 .owl-carousel .owl-item img{width: calc(600px * .7);}

	.more .col-6{height: calc(690px * .7);}
		.more .action{margin-left: calc(-160px * .7);}
		.more .logo img{max-width: calc(450px * .7);}

	/*print*/
	.print{padding-top: calc(200px * .7);}
	.print li::before {min-width: 50px;}  
	.print .col-8 li::before{min-width: calc(20px * .7);}
	

	/*DOM*/
	.animated-modal {max-width: calc(1320px * .7);}
	.animated-modal .row .col-5{flex-basis: 60%;}
	.animated-modal .row .col-6{flex-basis: 40%;}
	.fancybox-button{width: calc(88px * .7); height: calc(88px * .7);}
	.animated-modal .owl-carousel .owl-item img{max-width: 86%;}
}

/*DESKTOP 1200*/
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
	:root {
		--f-12: calc(12px * .8);
		--f-16: calc(16px * .8);
		--f-20: calc(20px * .8);
		--f-30: calc(30px * .8);
		--f-40: calc(40px * .8);
		--f-80: calc(80px * .7);
		--f-100: calc(100px * .7);
		--f-350: calc(350px * .7);
		--lh-12: calc(24px * .8);
		--lh-16: calc(36px * .8);
		--lh-30: calc(50px * .8);
		--lh-40: calc(50px * .8);
		--lh-80: calc(90px * .7);
		--lh-100: calc(100px * .7);
		--lh-350: calc(350px * .7);
		--space-1 : calc(10px * .7);
	}
	html, body{overflow-x:hidden;}

	.icon-hubungi.wa, .icon-hubungi.loc{transform: scale(.8);}

	/*container*/
	.container-fluid .ml{margin-left: 5%;}
	.container-fluid .mr{margin-right: 5%;}

	section img.logo{max-width: 80%;}
	.cloud{top: calc(480px * .8);}
		.cloud img{width: calc(2873px * .6);}

	/*header*/
	header{padding-top: calc(70px * .7);}
	header .wrapper{height: calc(76px * .7); padding-top: calc(20px * .7); background-size: auto calc(76px * .7);}
	header.small{top: calc(-80px * .7);}
	header.small .wrapper{height: calc(59px * .7); padding: calc(15px * .7) 0; background-size: auto calc(59px * .7);}
	header .logo{width: calc(182px * .7); height: calc(72px * .7); background-size: calc(182px * .7) auto;}
	header.small .logo{width: calc(180px * .7); height: calc(30px * .7); background-size: calc(182px * .7) auto;}
	footer .logo{width: calc(182px * .7); height: calc(32px * .7); background-size: calc(182px * .7) auto;}
	header .logo .dot, footer .logo .dot{width: calc(6px * .7); height: calc(6px * .7); margin-left: calc(57px * .7);}
	.menu > ul {padding-right: calc(140px * .7);}

	/*footer*/
	footer{height: calc(290px * .7); padding: calc(105px * .7) 0;}

	/*home*/
	.section1 .btn-rec{bottom: calc(-110px * .7); margin-left: calc(510px * .7);}
		.s1-1{margin-bottom: calc(-120px * .7); margin-left: calc(360px * .7);}
		.s1-3{margin-top: calc(-20px * .7); margin-left: calc(510px * .7);}
		.s1-4{margin-top: calc(150px * .7); margin-left: calc(510px * .7);}
	.obj._1-1, .obj._1-2, .obj._1-3, .obj._1-4, .obj._1-5, .obj._1-6{margin-top: calc(-30px * .7);}
		.obj._1-1{margin-left: calc(-450px * .7);}
		.obj._1-2{margin-left: calc(-280px * .7);}
		.obj._1-3{margin-left: calc(-280px * .7);}
		.obj._1-4{margin-left: calc(-460px * .7); margin-top: calc(15px * .7); width: calc(16px * .7); height: calc(16px * .7);}
		.obj._1-5{margin-left: calc(-330px * .7); margin-top: calc(100px * .7); width: calc(28px * .7); height: calc(28px * .7);}
		.obj._1-6{margin-left: calc(-380px * .7); margin-top: calc(50px * .7); width: calc(182px * .7); height: calc(30px * .7);}

	.section2{height: 100vh;}
		.section2 .video{height: 100vh;}
		.section2 .container{width: 620px;}
		.section2 .video{height: 100vh;}
		.s2-3{width: calc(360px * .8); margin-top: calc(60px * .8); margin-left: 310px;}

	.section3 .scaled, .section4 .scaled{transform:scale(.8);}	
	.section3{min-height: calc(1000px * .8);}
		.s3-1{margin: calc(600px * .8) 0 0 calc(85px * .8);}
		.s3-2{margin: calc(940px * .8) 0 0 280px; width: 480px;}

	.section4{min-height: calc(1300px * .9);}
		.s4-1{margin: calc(622px * .8) 0 0 calc(-476px * .8);}
		.s4-2{margin: calc(950px * .8) 0 0 calc(-390px * .8); width: calc(430px * .8);}
		.s4-3{margin: calc(950px * .8) 0 0 calc(150px * .8); width: calc(350px * .8);}

	.section5, .section6, .section7, .section8, .section9, .section10{padding-top: calc(200px * .8);}
	.section5 .scaled, .section6 .scaled, .section7 .scaled, .section8 .scaled, .section9 .scaled{transform: scale(.7);}
	.section5{min-height: calc(1000px * .8);}
	.section5 .scaled{transform-origin: top right;}	
		.section5 .f-16{width: calc(360px * .8);}

	.section6 .scaled{transform-origin: left;}	
		.section6 .f-16{width: calc(500px * .8);}
		.section6 .container{padding-top: calc(240px * .8);}	

	.section7 .scaled{transform-origin: right;}	
	.section7 .container-fluid{padding-top: calc(50px * .8);}
		.section7 .is-relative{margin-left: calc(-300px * .8);}
		.section7 .f-16{width: calc(410px * .8);}

	.section8 .scaled{transform-origin: left;}
		.section8 .container{padding-top: calc(150px * .8); padding-bottom: calc(50px * .8);}
		.section8 .f-16{width: calc(480px * .8);}	

	.section9 .scaled{transform-origin: right;}
		.section9 .container{padding-top: calc(150px * .8); padding-bottom: calc(50px * .8);}
		.section9 .f-16{width: calc(500px * .8);}

	.section10{margin-bottom: calc(100px * .8); padding-top: calc(200px * .8);}
		.section10 .col-6:nth-child(1){padding-left: 5%;}
		.section10 .col-6:nth-child(2){padding-right: 5%;}

	/*services*/
	.services1 .scaled{transform: scale(.7);}
		.sf1-1{padding-top: calc(620px * .8);}
		.sf1-2, .sf1-3{margin: calc(30px * .8) 0 0 calc(355px * .8); width: calc(820px * .8);}

	.services2{padding: calc(100px * .8) 0;}
		.services2 ._years{width: calc(85px * .8); margin-top: -12px; margin-left: -50px;}

	.services3{padding: calc(100px * .8) 0;}

	.services5 .container{padding: calc(100px * .8);}

	.services6{min-height: 1200px;}
	.services6 .scaled{transform: scale(.8);}
		.sf6-1{padding-top: calc(400px * .8); z-index: -1;}
		.sf6-2{width: calc(320px * .8); margin-right: calc(80px * .8); padding-top: calc(40px * .8);}

	/*works*/
	.works1{padding-top: calc(200px * .8); padding-bottom: 50px;}
	.works1._detail {padding-top: 70px; padding-bottom: 20px;}
	.works1 .owl-carousel .owl-item img{max-width: 90%;}
	.works1 .client-list li{margin: 0 3%; padding: calc(40px * .8) 0;}
		
	.autoplay{bottom: calc(120px * .8);}
	.autoplay .play, .autoplay .stop{width: calc(52px * .8); height: calc(52px * .8);}
	.autoplay .play img, .autoplay .stop img{width: calc(11px * .8); height: calc(19px * .8);}
	.works2 .f-80{padding-top: calc(80px * .8);}
	.works2 .f-16{width: calc(528px * .8); margin-top: calc(40px * .8);}
	.works2, .works2 video{height: 600px;}

	.works-list .item{width: calc(1280px * .8); padding: 0;}
	.detailVideo iframe{width: calc(975px * .8); height: calc(548px * .8);}
	.works-list #stop-video{height: calc(440px * .8); top: calc(55px * .8);}

	/*projects*/
	.projects1{min-height: 1000px; margin-top: calc(150px * .4);}
		.projects1 .scaled{transform: scale(.7);}
		.pf1-1{width: calc(320px * .8); margin-right: calc(80px * .8); padding-top: 300px;}
	.projects2{min-height: 700px; margin-top: calc(60px * .8);}	
		.projects2 .col-6{margin-right: calc(20px * .8);}	
		.projects2 .col-6:nth-child(2){padding-right: 100px;}	
		.projects2 .row.start div{margin: calc(10px * .8); flex-basis: 45%;}	
	.projects3{min-height: 500px; margin-top: calc(60px * .8);}	
		.projects3 .scaled{transform: scale(.8) translateY(-130px) translateX(50px);}
		.obj._p3-1{transform: scale(.7); transform-origin: bottom;}
		.projects3 .col-6:nth-child(1){padding-right: 100px;}	
	.projects4{min-height: 700px; margin-top: calc(60px * .8);}	
		.projects4 .scaled{transform: scale(.8);}
		.projects4 .col-4{padding-top: calc(100px * .8);}
	.projects5{min-height: 0px; padding: 50px 0;}	
		.projects5 .scaled{transform: scale(.8);}
		.projects5 .f-40, .projects5 .f-16{padding-right: 0;}
		.projects5 .col-2{padding-top: calc(180px * .8);}	
		.projects5 .col-3{padding-top: calc(80px * .8);}		
	.projects6 ._bg{min-height: 800px; padding: calc(180px * .8) 0;}
	.projects7{margin-top: calc(-100px * .8);}	
		.projects7 .col-4{margin-top: calc(320px * .8);}	
	.projects8{min-height: 800px; padding-top: calc(150px * .8);}
		.projects8 .scaled{transform: scale(.9);}
		.projects8 .col-6{margin-top: calc(140px * .9); padding-right: 100px;}
	.projects9{min-height: 740px; padding-top: 60px;}
		.projects9 .scaled{height: auto; transform: scale(.8);}
		.projects9 img.logo{height: calc(48px * .8);}
			.projects9 .col-6{margin-top: calc(140px * .8); padding-right: calc(150px * .8);}	

	.projects2 img{max-width: 100%;}
	.projects2 p, .projects3 p, .projects4 p, .projects5 p, .projects6 p, .projects7 p{padding-bottom: calc(30px * .8);}
	.projects2 .scaled, .projects3 .scaled, .projects4 .scaled, .projects5 .scaled{margin-top: calc(120px * .8);}

	/*hubungi*/
	.hubungi .scaled{transform: scale(.7); margin-top: 40px;}
		.hf1-1{padding-top: calc(375px * .8); margin-left: calc(85px * .8); letter-spacing: calc(20px * .8);}
		.hf1-2{margin: calc(255px * .8) auto 0 auto; width: calc(1070px * .8);}
		.hf1-3{margin: calc(60px * .8) auto 0 auto; width: calc(1070px * .8);}
	.hubungi iframe{min-height: 170px;}

	/*card*/
	.card .scaled{transform: scale(.7); margin-top: 0px;}
		.cf1-1{margin: calc(760px * .7) 0 0 calc(-292px * .7); width: calc(792px * .7); padding-bottom: calc(80px * .7); font-size: calc(24px * .7);}
		._cl ._1{width: calc(205px * .7);}
		._cl ._2{width: calc(169px * .7);}
		._cl ._3{width: calc(193px * .7);}
		._cl ._4{width: calc(110px * .7);}
		._ci a{transform-origin: left; transform: scale(.7);}

	/*indofood*/
	.indofood1{min-height: calc(1000px * .8); padding-top: calc(100px * .8);}
		.indofood1 .scaled{transform: scale(.7); margin-left: -15%;}
		.indofood1 .container{padding-top: calc(220px * .8); margin-left: calc(-100px * .8);}	
		.rec._in1-1{margin-left: -25%;}
	.indofood2{margin-top: calc(180px * .8);}		
		.indofood2 .overlay{width: calc(141px * .8);}
	.indofood3{margin-top: calc(100px * .8);}
		.indofood3, .indofood3 video{height: 600px;}
	.indofood4{margin-top: calc(100px * .8);}
		.indofood4 .row-2{margin-top: calc(-100px * .8); margin-left: calc(-50px * .8);}
		.indofood4 .row-3{margin-top: calc(100px * .8);}
		.indofood4 .row-3 .row-3-1 .overlay{top: calc(380px * .8); width: calc(141px * .8);}
		.indofood4 .row-3 .row-3-2{padding-left: calc(20px * .8);}
	.indofood5, .indofood6, .indofood7{padding: calc(50px * .8) 0;}
		.indofood5 .container-fluid, .indofood6 .container-fluid{padding-left: 10%;}
		.indofood7 .overlay{width: calc(120px * .8); margin-top: calc(200px * .8);}

	/*danone*/
	.danone1{min-height: calc(1050px * .8);}
		.danone1 .scaled{transform: scale(.7);}
		.danone1 .container-fluid{padding-top: calc(260px * .8);}	
		.danone1 .f-16{width: calc(500px * .8);}
		.danone1 .obj._5-13{margin-top: 15%;}
	.danone2, .danone3, .danone4, .danone5{margin-top: calc(100px * .8);}
	.danone3 .col-4{margin-top: calc(-70px * .8); margin-right: calc(200px * .8);}
		.danone3 .col-4 .f-16{padding-right: calc(80px * .8);}
	.danone6{margin-top: calc(200px * .8);}
		.danone6 .container-fluid{padding-left: 10%;}
		.danone6 .col-4{padding-right: calc(80px * .8);}

	/*abc*/
	.abc1{min-height: 2000px; padding-top: calc(200px * .8);}
		.abc1 .scaled{transform: scale(.7);}
		.abc1 .container-fluid{padding-top: calc(50px * .8);}
		.abc1 .container-fluid .ml{margin-left: 5%;}
		.abc1 .is-relative{margin-left: calc(-300px * .8);}
		.abc1 .f-16{width: 100%;}
		.abc1 .col-5{width: 40%; flex-basis: 40%;}
	.abc2{margin-top: -65vw;}
	.abc3, .abc4, .abc5, .abc6, .abc7, .abc8{margin-top: calc(100px * .8);}
	.abc3 .col-3{margin-bottom: calc(-50px * .8);}
	.abc3, .abc3 video{height: 600px;}
	.abc8{margin-bottom: calc(100px * .8);}

	/*pg*/
	.pg1{min-height: 700px; padding-top: calc(200px * .8);}
		.pg1 .scaled{transform: scale(.7); margin-left: -5%;}
		.pg1 .container{padding-top: calc(200px * .8);}
		.pg1 .f-16, .pg1 .f-30{width: calc(500px * .8);}	
	.pg2{margin-top: 100px;}
	.pg3, .pg4, .pg5, .pg6, .pg7, .pg8{margin-top: calc(100px * .8);}
	.pg3, .pg3 video{height: 600px;}
	.pg7 .overlay._1{width: calc(140px * .8);}
	.pg7 .img img{min-height: 450px;}
	.pg7 .col-3{flex-basis: 32%;}
	.pg8 .container-fluid{padding-left: 10%;}

	/*smailing*/
	.smailing1{margin-top: calc(100px * .8);}
		.smailing1 .scaled{transform: scale(.7); margin-left: -5%;}
		.smailing1 .col-6.container{padding-top: calc(200px * .8);}
		.smailing1 .f-16{width: calc(500px * .8);}
		.smailing1 .overlay{width: calc(140px * .8);}
	.smailing2, .smailing3, .smailing4, .smailing5, .smailing6{margin-top: calc(100px * .8);}
		.smailing2, .smailing2 video{height: 600px;}
		.smailing2 .col-4{margin-top: calc(-70px * .8); margin-right: calc(300px * .8);}
		.smailing2 .col-4 .f-16{padding-right: calc(80px * .8);}
	.smailing6 .container-fluid{padding-left: 10%;}

	/*lippo*/
	.lippo1{padding-top: calc(200px * .8);}
		.lippo1 .scaled{transform: scale(.7); margin-left: -5%;}
		.lippo1 .col-8{margin-top: calc(160px * .8); margin-left: 0;}
		.lippo1 .col-4{margin-left: calc(-50px * .8);}
		.lippo1 .overlay{width: calc(140px * .8);}
	.lippo2, .lippo3, .lippo4{margin-top: calc(100px * .8);}
		.lippo3, .lippo3 video{height: 600px;}
		.lippo2 .owl-carousel .owl-item{padding: calc(20px * .8) 0;}
		.lippo2 .owl-carousel .owl-item img{width: calc(600px * .8);}
		.lippo4{margin-bottom: calc(100px * .8);}

	/*kalbe*/
	.kalbe1{padding-top: calc(200px * .8);}
		.kalbe1 .scaled{transform: scale(.7); margin-left: -5%;}
		.kalbe1 .col-5 .container{padding-top: calc(100px * .8);}
		.kalbe1 .f-16{width: calc(500px * .8);}
		.kalbe1 .overlay{width: calc(140px * .8);}
	.kalbe2, .kalbe3, .kalbe4, .kalbe5{margin-top: calc(100px * .8);}
		.kalbe3 .overlay .col-5:nth-child(2){margin-top: calc(220px * .8); margin-left: calc(-100px * .8);}
		.kalbe3, .kalbe3 video{height: 600px;}
		.kalbe4 .overlay{width: calc(140px * .8);}
	.kalbe5 .container-fluid{padding-left: 10%;}
		.kalbe5 .owl-carousel .owl-item{padding: calc(20px * .8) 0;}
		.kalbe5 .owl-carousel .owl-item img{width: calc(600px * .8);}

	.more .col-6{height: calc(690px * .8);}
		.more .action{margin-left: calc(-160px * .8);}
		.more .logo img{max-width: calc(450px * .8);}

	/*print*/
	.print{padding-top: calc(200px * .8);}
	.print li::before {min-width: 50px;}  
	.print .col-8 li::before{min-width: calc(20px * .8);}

	/*DOM*/
	.animated-modal {max-width: calc(1320px * .8);}
	.fancybox-button{width: calc(88px * .8); height: calc(88px * .8);}
}


/*DESKTOP 1400*/
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
	:root {
		--f-12: calc(12px * .9);
		--f-16: calc(16px * .9);
		--f-20: calc(20px * .9);
		--f-30: calc(30px * .9);
		--f-40: calc(40px * .9);
		--f-80: calc(80px * .8);
		--f-100: calc(100px * .8);
		--f-350: calc(350px * .8);
		--lh-12: calc(24px * .9);
		--lh-16: calc(36px * .9);
		--lh-30: calc(50px * .9);
		--lh-40: calc(50px * .9);
		--lh-80: calc(90px * .8);
		--lh-100: calc(100px * .8);
		--lh-350: calc(350px * .8);
		--space-1 : calc(10px * .8);
	}
	html, body{overflow-x:hidden;}

	.icon-hubungi.wa, .icon-hubungi.loc{transform: scale(.9);}

	/*container*/
	.container-fluid .ml{margin-left: 5%;}
	.container-fluid .mr{margin-right: 5%;}

	section img.logo{max-width: 80%;}
	.cloud{top: calc(480px * .9);}
		.cloud{top: calc(480px * .9); width: calc(2873px * .7)}

	/*header*/
	header{padding-top: calc(70px * .8);}
	header .wrapper{height: calc(76px * .8); padding-top: calc(20px * .8); background-size: auto calc(76px * .8);}
	header.small{top: calc(-80px * .8);}
	header.small .wrapper{height: calc(59px * .8); padding: calc(15px * .8) 0; background-size: auto calc(59px * .8);}
	header .logo{width: calc(182px * .8); height: calc(72px * .8); background-size: calc(182px * .8) auto;}
	header.small .logo{width: calc(180px * .8); height: calc(30px * .8); background-size: calc(182px * .8) auto;}
	footer .logo{width: calc(182px * .8); height: calc(32px * .8); background-size: calc(182px * .8) auto;}
	header .logo .dot, footer .logo .dot{width: calc(6px * .8); height: calc(6px * .8); margin-left: calc(57px * .8);}
	.menu > ul {padding-right: calc(140px * .8);}

	/*footer*/
	footer{height: calc(290px * .8); padding: calc(105px * .8) 0;}

	/*home*/
	.section1 .btn-rec{bottom: calc(-110px * .8); margin-left: calc(510px * .8);}
		.s1-1{margin-bottom: calc(-120px * .8); margin-left: calc(360px * .8);}
		.s1-3{margin-top: calc(-20px * .8); margin-left: calc(510px * .8);}
		.s1-4{margin-top: calc(150px * .8); margin-left: calc(510px * .8);}
	.obj._1-1, .obj._1-2, .obj._1-3, .obj._1-4, .obj._1-5, .obj._1-6{margin-top: calc(-30px * .8);}
		.obj._1-1{margin-left: calc(-450px * .8);}
		.obj._1-2{margin-left: calc(-280px * .8);}
		.obj._1-3{margin-left: calc(-280px * .8);}
		.obj._1-4{margin-left: calc(-460px * .8); margin-top: calc(15px * .8); width: calc(16px * .8); height: calc(16px * .8);}
		.obj._1-5{margin-left: calc(-330px * .8); margin-top: calc(100px * .8); width: calc(28px * .8); height: calc(28px * .8);}
		.obj._1-6{margin-left: calc(-380px * .8); margin-top: calc(50px * .8); width: calc(182px * .8); height: calc(30px * .8);}

	.section2{height: 100vh;}
		.section2 .container{width: 740px;}
		.section2 .video{height: 100vh;}
		.s2-3{width: calc(360px * .9); margin-top: calc(60px * .9); margin-left: 360px;}

	.section3 .scaled, .section4 .scaled{transform:scale(.9);}	
	.section3{min-height: calc(1000px * .9);}
		.s3-1{margin: calc(600px * .9) 0 0 calc(85px * .9);}
		.s3-2{margin: calc(940px * .9) 0 0 320px; width: 520px;}

	.section4{min-height: calc(1300px * .9);}
		.s4-1{margin: calc(622px * .9) 0 0 calc(-476px * .9);}
		.s4-2{margin: calc(950px * .9) 0 0 calc(-390px * .9); width: calc(430px * .9);}
		.s4-3{margin: calc(950px * .9) 0 0 calc(150px * .9); width: calc(350px * .9);}

	.section5, .section6, .section7, .section8, .section9, .section10{padding-top: calc(200px * .9);}
	.section5 .scaled, .section6 .scaled, .section7 .scaled, .section8 .scaled, .section9 .scaled{transform: scale(.8);}
	.section5{min-height: calc(1000px * .9);}	
	.section5 .scaled{transform-origin: top right;}	
		.section5 .f-16{width: calc(360px * .9);}

	.section6 .scaled{transform-origin: left;}	
		.section6 .f-16{width: calc(500px * .9);}
		.section6 .container{padding-top: calc(240px * .9);}	

	.section7 .scaled{transform-origin: right;}	
	.section7 .container-fluid{padding-top: calc(50px * .9);}
		.section7 .is-relative{margin-left: calc(-300px * .9);}
		.section7 .f-16{width: calc(410px * .9);}

	.section8 .scaled{transform-origin: left;}
		.section8 .container{padding-top: calc(150px * .9); padding-bottom: calc(50px * .9);}
		.section8 .f-16{width: calc(480px * .9);}	

	.section9 .scaled{transform-origin: right;}
		.section9 .container{padding-top: calc(150px * .9); padding-bottom: calc(50px * .9);}
		.section9 .f-16{width: calc(500px * .9);}

	.section10{margin-bottom: calc(100px * .9); padding-top: calc(200px * .9);}
		.section10 .col-6:nth-child(1){padding-left: 5%;}
		.section10 .col-6:nth-child(2){padding-right: 5%;}

	/*services*/
	.services1 .scaled{transform: scale(.8);}
		.sf1-1{padding-top: calc(620px * .9);}
		.sf1-2, .sf1-3{margin: calc(30px * .9) 0 0 calc(355px * .9); width: calc(820px * .9);}

	.services2{padding: calc(100px * .9) 0;}
		.services2 ._years{width: calc(85px * .9); margin-top: -12px; margin-left: -55px;}

	.services3{padding: calc(100px * .9) 0;}

	.services5 .container{padding: calc(100px * .9);}

	.services6 .scaled{transform: scale(.8);}
		.sf6-1{padding-top: calc(400px * .9);}
		.sf6-2{width: calc(320px * .9); margin-right: calc(80px * .9); padding-top: calc(40px * .9);}

	/*works*/
	.works1{padding-top: calc(200px * .9); padding-bottom: 50px;}
	.works1._detail {padding-top: 80px; padding-bottom: 20px;}
	.works1 .owl-carousel .owl-item img{max-width: 90%;}
	.works1 .client-list li{margin: 0 3%; padding: calc(40px * .9) 0;}
	.works-icon{width: 80%;}
		
	.autoplay{bottom: calc(120px * .9);}
	.autoplay .play, .autoplay .stop{width: calc(52px * .9); height: calc(52px * .9);}
	.autoplay .play img, .autoplay .stop img{width: calc(11px * .9); height: calc(19px * .9);}
	.works2 .f-80{padding-top: calc(80px * .9);}
	.works2 .f-16{width: calc(528px * .9); margin-top: calc(40px * .9);}

	.works-list .item{width: calc(1280px * .9); padding: 0 2%;}
	.detailVideo iframe{width: calc(975px * .9); height: calc(548px * .9);}
	.works-list #stop-video{height: calc(440px * .9); top: calc(55px * .9);}

	/*projects*/
	.projects1{min-height: 1100px; margin-top: calc(150px * .5);}
		.projects1 .scaled{transform: scale(.8);}
		.pf1-1{width: calc(320px * .9); margin-right: calc(80px * .9); padding-top: 200px;}
	.projects2{min-height: 800px; margin-top: calc(60px * .9);}	
		.projects2 .col-6{margin-right: calc(20px * .9);}	
		.projects2 .col-6:nth-child(2){padding-right: calc(200px * .9);}	
		.projects2 .row.start div{margin: calc(10px * .9); flex-basis: 45%;}	
	.projects3{min-height: 600px; margin-top: calc(60px * .9);}	
		.projects3 .scaled{transform: scale(.8) translateY(-100px) translateX(50px);}
		.obj._p3-1{transform: scale(.8); transform-origin: bottom;}
		.projects3 .col-6:nth-child(1){padding-right: calc(160px * .9);}	
	.projects4{min-height: 800px; margin-top: calc(60px * .9);}	
		.projects4 .scaled{transform: scale(.8);}
		.projects4 .col-4{padding-top: calc(100px * .9);}
	.projects5{min-height: 0px; padding: 50px 0;}	
		.projects5 .scaled{transform: scale(.8);}
		.projects5 .f-40, .projects5 .f-16{padding-right: 0;}
		.projects5 .col-2{padding-top: calc(180px * .9);}	
		.projects5 .col-3{padding-top: calc(80px * .9);}		
	.projects6 ._bg{min-height: 800px; padding: calc(180px * .9) 0;}
	.projects7{margin-top: calc(-100px * .9);}	
		.projects7 .col-4{margin-top: calc(320px * .9);}	
	.projects8{min-height: 800px; padding-top: calc(150px * .9);}
		.projects8 .scaled{transform: scale(.9);}
		.projects8 .col-6{margin-top: calc(140px * .8); padding-right: 100px;}	
	.projects9{min-height: 800px; padding-top:100px;}
		.projects9 .scaled{height: auto; transform: scale(.8);}
		.projects9 img.logo{height: calc(48px * .8);}
			.projects9 .col-6{margin-top: calc(140px * .8); padding-right: calc(150px * .8);}	

	.projects2 img{max-width: 100%;}
	.projects2 p, .projects3 p, .projects4 p, .projects5 p, .projects6 p, .projects7 p{padding-bottom: calc(30px * .9);}
	.projects2 .scaled, .projects3 .scaled, .projects4 .scaled, .projects5 .scaled{margin-top: calc(120px * .9);}

	/*hubungi*/
	.hubungi .scaled{transform: scale(.8); margin-top: 40px;}
		.hf1-1{padding-top: calc(375px * .9); margin-left: calc(85px * .9); letter-spacing: calc(20px * .9);}
		.hf1-2{margin: calc(255px * .9) auto 0 auto; width: calc(1070px * .9);}
		.hf1-3{margin: calc(60px * .9) auto 0 auto; width: calc(1070px * .9);}

	/*card*/
	.card .scaled{transform: scale(.8); margin-top: 0px;}
		.cf1-1{margin: calc(760px * .8) 0 0 calc(-292px * .8); width: calc(792px * .8); padding-bottom: calc(80px * .8); font-size: calc(24px * .8);}
		._cl ._1{width: calc(205px * .8);}
		._cl ._2{width: calc(169px * .8);}
		._cl ._3{width: calc(193px * .8);}
		._cl ._4{width: calc(110px * .8);}
		._ci a{transform-origin: left; transform: scale(.8);}

	/*indofood*/
	.indofood1{min-height: calc(1000px * .9); padding-top: calc(100px * .9);}
		.indofood1 .scaled{transform: scale(.8); margin-left: -10%;}
		.indofood1 .container{padding-top: calc(220px * .9); margin-left: calc(-100px * .9);}	
	.indofood2{margin-top: calc(180px * .9);}
		.indofood2 .overlay{width: calc(141px * .9);}
	.indofood3{margin-top: calc(100px * .9);}
		.indofood3, .indofood3 video{height: 600px;}
	.indofood4{margin-top: calc(100px * .9);}
		.indofood4 .row-2{margin-top: calc(-100px * .9); margin-left: calc(-50px * .9);}
		.indofood4 .row-3{margin-top: calc(100px * .9);}
		.indofood4 .row-3 .row-3-1 .overlay{top: calc(380px * .9); width: calc(141px * .9);}
		.indofood4 .row-3 .row-3-2{padding-left: calc(20px * .9);}
	.indofood5, .indofood6, .indofood7{padding: calc(50px * .9) 0;}
		.indofood5 .container-fluid, .indofood6 .container-fluid{padding-left: 10%;}
		.indofood7 .overlay{width: calc(120px * .9); margin-top: calc(200px * .9);}

	/*danone*/
	.danone1{min-height: calc(1050px * .9);}
		.danone1 .scaled{transform: scale(.8);}
		.danone1 .container-fluid{padding-top: calc(260px * .9);}	
		.danone1 .f-16{width: calc(500px * .9);}
		.danone1 .obj._5-13{margin-top: 10%;}		
	.danone2, .danone3, .danone4, .danone5{margin-top: calc(100px * .9);}	
	.danone3 .col-4{margin-top: calc(-70px * .9); margin-right: calc(200px * .9);}
		.danone3 .col-4 .f-16{padding-right: calc(80px * .9);}
	.danone6{margin-top: calc(200px * .9);}
		.danone6 .container-fluid{padding-left: 10%;}
		.danone6 .col-4{padding-right: calc(80px * .9);}

	/*abc*/
	.abc1{min-height: 2000px; padding-top: calc(200px * .9);}
		.abc1 .scaled{transform: scale(.8);}
		.abc1 .container-fluid{padding-top: calc(50px * .9);}
		.abc1 .container-fluid .ml{margin-left: 5%;}
		.abc1 .is-relative{margin-left: calc(-300px * .9);}
		.abc1 .f-16{width: 100%;}
		.abc1 .col-5{width: 40%; flex-basis: 40%;}
		.abc1 .img img{width: 100%; max-width: auto; height: 720px; overflow: hidden; object-fit: cover; object-position: top; }
	.abc2{margin-top: -65vw;}
	.abc3, .abc4, .abc5, .abc6, .abc7, .abc8{margin-top: calc(100px * .9);}
	.abc3 .col-3{margin-bottom: calc(-50px * .9);}
	.abc3, .abc3 video{height: 600px;}
	.abc8{margin-bottom: calc(100px * .9);}

	/*pg*/
	.pg1{min-height: 700px; padding-top: calc(200px * .9);}
		.pg1 .scaled{transform: scale(.8); margin-left: -5%;}
		.pg1 .container{padding-top: calc(200px * .9);}
		.pg1 .f-16, .pg1 .f-30{width: calc(500px * .9);}	
	.pg2{margin-top: 100px;}
	.pg3, .pg4, .pg5, .pg6, .pg7, .pg8{margin-top: calc(100px * .9);}
	.pg7 .overlay._1{width: calc(140px * .9);}
	.pg8 .container-fluid{padding-left: 10%;}

	/*smailing*/
	.smailing1{margin-top: calc(100px * .9);}
		.smailing1 .scaled{transform: scale(.8); margin-left: -5%;}
		.smailing1 .col-6.container{padding-top: calc(200px * .9);}
		.smailing1 .f-16{width: calc(500px * .9);}
		.smailing1 .overlay{width: calc(140px * .9);}
	.smailing2, .smailing3, .smailing4, .smailing5, .smailing6{margin-top: calc(100px * .9);}
		.smailing2 .col-4{margin-top: calc(-70px * .9); margin-right: calc(300px * .9);}
		.smailing2 .col-4 .f-16{padding-right: calc(80px * .9);}
	.smailing6 .container-fluid{padding-left: 10%;}

	/*lippo*/
	.lippo1{padding-top: calc(200px * .9);}
		.lippo1 .scaled{transform: scale(.8); margin-left: -5%;}
		.lippo1 .col-8{margin-top: calc(160px * .9); margin-left: 0;}
		.lippo1 .col-4{margin-left: calc(-50px * .9);}
		.lippo1 .overlay{width: calc(140px * .9);}
	.lippo2, .lippo3, .lippo4{margin-top: calc(100px * .9);}
		.lippo2 .owl-carousel .owl-item{padding: calc(20px * .9) 0;}
		.lippo2 .owl-carousel .owl-item img{width: calc(600px * .9);}
		.lippo4{margin-bottom: calc(100px * .9);}

	/*kalbe*/
	.kalbe1{padding-top: calc(200px * .9);}
		.kalbe1 .scaled{transform: scale(.8); margin-left: -5%;}
		.kalbe1 .col-5 .container{padding-top: calc(100px * .9);}
		.kalbe1 .f-16{width: calc(500px * .9);}
		.kalbe1 .overlay{width: calc(140px * .9);}
	.kalbe2, .kalbe3, .kalbe4, .kalbe5{margin-top: calc(100px * .9);}
		.kalbe3 .overlay .col-5:nth-child(2){margin-top: calc(220px * .9); margin-left: calc(-100px * .9);}
		.kalbe4 .overlay{width: calc(140px * .9);}
	.kalbe5 .container-fluid{padding-left: 10%;}
		.kalbe5 .owl-carousel .owl-item{padding: calc(20px * .9) 0;}
		.kalbe5 .owl-carousel .owl-item img{width: calc(600px * .9);}

	.more .col-6{height: calc(690px * .9);}
		.more .action{margin-left: calc(-160px * .9);}
		.more .logo img{max-width: calc(450px * .9);}

	/*print*/
	.print{padding-top: calc(220px * .9);}
	.print li::before {min-width: calc(60px * .9);}  
	.print .col-8 li::before{min-width: calc(20px * .9);}

	/*DOM*/
	.animated-modal {max-width: calc(1320px * .9);}
	.fancybox-button{width: calc(88px * .9); height: calc(88px * .9);}
	
}