@import url('https://fonts.googleapis.com/css?family=Noto+Sans|Roboto');
body {margin: 0; line-height: 160%; font-family: 'roboto', sans-serif;}
h1,h2,h3,h4,h5,h6 {margin: 0;padding: 0;}
ul {margin: 0;padding: 0; list-style: none;}
dl, dt, dd {margin: 0;padding: 0;}
p {margin: 0;padding: 0;}
a {text-decoration: none;}
.section {}
.full {}
.wrap {overflow: hidden;margin: 0 auto;padding: 0 5%;max-width: 1280px;}
.black {color: #fff; background: #1c1b1d;}

#header {}
#header h1 {float: left;background: url(../images/sign.png) left center no-repeat; padding-left: 60px;line-height: 110px;font-size: 24px;background-size: 48px;}
#header h1 a {color: #000;}

#header .nav {}
#header .nav ul.big {}
#header .nav ul.big > li {float: left;margin-left: 50px;line-height: 110px;}
#header .nav ul.big li.close {display: none;}
#header .nav ul.big li > span > a {color: #000;}
#header .nav ul.big li:hover ul.small {display: block;}
#header .nav ul.small {position: absolute;display: none; top: 70px;background: #222;z-index: 3;padding: 15px; border-radius: 5px;}
#header .nav ul.small li {line-height: 40px;border-top: 1px solid #333; border-bottom: 1px solid #111;}
#header .nav ul.small li:first-child {border-top: none;}
#header .nav ul.small li:last-child {border-bottom: none;}
#header .nav ul.small li a {display: block;color: #ddd;}

#header .nav2 {float: right; margin-top: 28px;width: 50px;height: 50px;background: url(../images/menu.png) center no-repeat;}
#header .nav2.none ul.big {display: none;}
#header .nav2.expand ul.big {display: block;}
#header .nav2 ul.big {position: absolute;padding: 0 5%;width: 90%;left: 0;top: 110px;background: #222;z-index: 3;}
#header .nav2 ul.big li {padding: 10px 0;border-top: 1px solid #333;border-bottom: 1px solid #111;}
#header .nav2 ul.big li span {display: block;color: #eee;}
#header .nav2 ul.big li span > a {color: #eee;}
#header .nav2 ul.small {}
#header .nav2 ul.small li {text-indent: 20px;font-size: 14px;border: none;}
#header .nav2 ul.small li a {color: #aaa;}

#header .contact {display: none;float: right;}
#header .contact ul {}
#header .contact ul li {float: left;margin-left: 20px;}
#header .contact ul li.tel {font-size: 14px;}
#header .contact ul li.service a {text-align: center;padding: 10px;background: #1ca4ea; color: #fff;border-radius: 10px;font-size: 14px;}




#content {}
#content .index {}
#content .index .fitur h2 {padding: 60px;text-align: center;}
#content .index .fitur ul {overflow: hidden;}
#content .index .fitur ul li {padding: 1%;text-align: center;min-height: 350px}
#content .index .fitur ul li img {width: 50%;}


#content .page h2 {text-align: center;}
#content .page .section {padding: 50px 0;}
#content .page .section h3 {text-align: center;}
#content .page .section .desc {margin-top: 30px;}

#content .page .produk .intro {}
#content .page .produk .intro .desc {margin-top: 30px;}
#content .page .produk .intro .desc .text ul {margin-left: 20px;padding: 20px 0;list-style-type: square;}
#content .page .produk .intro .desc .text ul li {}
#content .page .produk .intro .desc .popup-gallery {margin-top: 20px;}
#content .page .produk .intro .desc .popup-gallery img {width: 32%;}

#content .page .produk .gif {}
#content .page .produk .gif p {text-align: center; font-size: 12px;}
#content .page .produk .gif .desc {}
#content .page .produk .gif .desc .images img {width: 100%;}
#content .page .produk .gif .desc .text p {text-align: left;font-size: 14px;}

#content .page .produk .cross {}
#content .page .produk .cross p {text-align: center;font-size: 12px;}
#content .page .produk .cross .desc {margin-top: 30px;padding: 5%;background: #eee;}
#content .page .produk .cross .desc img {width: 100%;}
#content .page .produk .cross .text h5 {margin-top: 10px;}
#content .page .produk .cross .desc .text p {text-align: left;}

#content .page .produk .photo {}
#content .page .produk .photo .desc {margin-top: 30px;}
#content .page .produk .photo img {width: 100%;}

#content .page .produk .gif2 {}
#content .page .produk .gif2 img {width: 100%;}
#content .page .produk .gif2 .desc .text span {font-weight: bold;}
#content .page .produk .gif2 .desc .text p {padding: 10px 0;font-size: 13px;}
#content .page .produk .gif2 .desc .text ul li {list-style-type: square;margin-left: 20px;}
#content .page .produk .gif2 .desc .movie iframe {width: 100%;}

#content .page .produk .spec {}
#content .page .produk .spec .desc {margin-top: 30px;}
#content .page .produk .spec dl {overflow: hidden;background: #eee;}
#content .page .produk .spec dt {text-align: center; font-weight: bold;background: #eee; font-size: 13px;}
#content .page .produk .spec dd {padding: 10px 0;background: #fff;}
#content .page .produk .spec .images img {width: 100%;}
#content .page .produk .spec .imgf img {width: 100%;}

#content .page .produk .moving {}
#content .page .produk .moving .desc img {width: 100%;}

#content .page .produk .macam {}
#content .page .produk .macam .desc {margin-top: 30px;}
#content .page .produk .macam .desc ul {}
#content .page .produk .macam .desc ul li {text-align: center;}
#content .page .produk .macam .desc ul li img {width: 60%;}
#content .page .produk .macam .desc ul li h4 {}
#content .page .produk .macam .desc ul li p {padding-bottom: 30px;font-size: 13px;}

#content .page .produk .color {}
#content .page .produk .color {}
#content .page .produk .color .desc {margin-top: 30px;}
#content .page .produk .color .desc ul li {float: left; padding: 0 5%;width: 40%;text-align: center;}
#content .page .produk .color .desc ul li img {width: 100%;border-radius: 50%;border: 1px solid #000;}
#content .page .produk .color .desc ul li p {padding-bottom: 20px;}
#content .page .produk .color {}
#content .page .produk .color {}


#content .page .galeri {}
#content .page .galeri .desc {padding: 20px;text-align: center;background: #f8f8f8;}
#content .page .galeri .desc img {width: 49%}
#content .page .galeri .desc p {margin-top: 20px;padding: 20px;background: #e1f5fe;;}
#content .page .galeri .desc .upload {overflow: hidden;padding-bottom: 20px;}
#content .page .galeri .desc .upload a {float: right;display: block; background: #000;padding: 10px; color: #fff;}




#content .page .kami .tentang img {width: 100%;}
#content .page .kami .tentang span {font-size: 24px;font-weight: bold;}
#content .page .kami .tentang p {margin-top: 10px;}

#content .page .kami .map iframe {width: 100%; height: 300px;}
#content .page .kami .map iframe {}
#content .page .kami .map h3 {text-align: center;font-size: 24px;}
#content .page .kami .map h5 {margin-top: 20px;font-size: 18px;}
#content .page .kami .map p {padding-bottom: 20px;color: #666;font-size: 13px;}
#content .page .kami .map p i {color: #999; padding-right: 10px;}
#content .page .kami .map ul li {float: left;margin-top: 10px;margin-right: 20px;font-size: 36px;}
#content .page .kami .map ul li i {color: #03a9f4;padding-right: 10px;}
#content .page .kami .map .desc dl {}
#content .page .kami .map .desc dt {float: left;margin-right: 10px;padding: 10px 0;}
#content .page .kami .map .desc dd {color: #333;padding: 10px 0;}

#content .page .kami .filsafat .desc {}
#content .page .kami .filsafat .desc h4 {padding:  10px 0;}
#content .page .kami .filsafat .desc img {width: 100%;}
#content .page .kami .filsafat .desc p {}

#content .page .kami .fitur .desc {}
#content .page .kami .fitur .desc h4 {padding:  10px 0;}
#content .page .kami .fitur .desc img {width: 100%;}
#content .page .kami .fitur .desc p {}

#content .page .kami .agensi .desc {}
#content .page .kami .agensi .desc h4 {padding: 20px 0;font-size: 18px;}
#content .page .kami .agensi .desc h5 {padding-bottom: 5px;}
#content .page .kami .agensi .desc p {padding-bottom: 20px;}
#content .page .kami .agensi .desc.showroom {}
#content .page .kami .agensi .desc.showroom p span {display: block;font-size: 13px;}
#content .page .kami .agensi .desc.showroom p i {margin-right: 10px; color: #e68523}
#content .page .kami .agensi .desc.agen ul li {}
#content .page .kami .agensi .desc.agen ul li i {margin-right: 10px;color: #00a0dc}
#content .page .kami .agensi .desc.agen ul li {}
#content .page .kami .agensi .desc.agen ul li dl {padding: 5px 0 20px;font-size: 13px;}
#content .page .kami .agensi .desc.agen ul li dt {font-size: 11px; color: #bbb; font-weight: bold;line-height: 110%;}
#content .page .kami .agensi .desc.agen ul li dd {font-size: 13px;}
 


#footer {padding: 30px 0;}
#footer .info {color: #999;}
#footer .info h3 {margin-top: 30px;font-size: 18px;color: #fff;}
#footer .info p {}
#footer .info .logo {padding: 15px 60px;background: url(../images/sign.png) left center no-repeat;font-size: 24px;font-weight: bold; color: #999;}
#footer .info .group {padding-bottom: 30px;border-bottom: 1px solid #111;}
#footer .info .intro a {margin-top: 10px;display: inline-block;padding: 3px 10px;background: #eee;border-radius: 5px;font-size: 13px; color: #222;}
#footer .info .address {}
#footer .info .address dt {float: left; margin-right: 10px;font-size: 12px;}
#footer .info .address dd {font-size: 12px;}
#footer .info .social ul {overflow: hidden;}
#footer .info .social ul li {float: left; margin-right: 20px; }
#footer .info .social ul li a {font-size: 24px; color: #aaa;}
#footer .info .login {}
#footer .info .login a {font-size: 24px; color: #aaa;}
#footer .info .login a span {display: inline-block;padding-left: 10px;font-size: 16px;line-height: 24px;}
#footer .copy {text-align: center; padding-top: 20px;color: #444;border-top: 1px solid #333;}






@media screen and (max-width: 320px) {}
@media screen and (min-width: 321px) and (max-width: 479px){}
@media screen and (min-width: 480px) and (max-width: 639px){}
@media screen and (min-width: 640px) and (max-width: 799px){
  #content .index .fitur ul li {float: left; width: 48%;}
  #content .page .produk .macam .desc ul li {float: left;padding: 0 1%;width: 48%;}
  #content .page .produk .color .desc ul li {padding: 0 1%;width: 23%;}
  #content .page .produk .color .desc ul li img {width: 60%;}
}
@media screen and (min-width: 800px) and (max-width: 959px){
  #content .index .fitur ul li {float: left; width: 48%;}
  #content .page .produk .macam .desc ul li {float: left;padding: 0 1%;width: 48%;}
  #content .page .produk .color .desc ul li {padding: 0 1%;width: 23%;}
  #content .page .produk .color .desc ul li img {width: 60%;}

}
@media screen and (min-width: 960px) {
  #header .contact {display: block;}
  
  #content .index .fitur ul li {float: left; width: 31%; font-size: 14px;}
  
  #content .page .produk .intro .text {float: left; padding: 0 1%;width: 48%;}
  #content .page .produk .intro .popup-gallery {float: left; padding: 0 1%; width: 48%;}
  #content .page .produk .section h3 {padding: 20px 0;font-size: 36px;}
  #content .page .produk .gif .images {float: left; padding: 0 1%; width: 48%;}
  #content .page .produk .gif .text {float: right;padding: 30px 1% 0; width: 48%;}
  #content .page .produk .cross .desc {overflow: hidden;}
  #content .page .produk .cross .left {float: left;padding: 0 1%;width: 48%;}
  #content .page .produk .cross .right {float: right;padding: 0 1%;width: 48%;vertical-align: middle;}
  #content .page .produk .cross .text p {font-size: 14px;}
  #content .page .produk .gif2 .desc .images {float: left;width: 50%;}
  #content .page .produk .gif2 .desc .movie {float: left; width: 50%;}
  #content .page .produk .gif2 .desc .text {float: left;padding: 0 1%;width: 48%;}
  #content .page .produk .gif2 .desc .text p {font-size: 16px;}
  #content .page .produk .spec .desc dl {border-bottom: 1px solid #ddd;} 
  #content .page .produk .spec .desc dl:first-child {border-top: 1px solid #ddd;}
  #content .page .produk .spec .desc dt {float: left;width: 28%;padding: 10px 1%;}
  #content .page .produk .spec .desc dd {float: left;width: 68%;padding: 10px 1%;}
  #content .page .produk .spec .images {text-align: center;}
  #content .page .produk .spec .images img {width: auto;}
  #content .page .produk .spec .imgf img {float: left;width: auto;padding: 0 1%;max-width: 48%;}
  #content .page .produk .moving .images {text-align: center;}
  #content .page .produk .moving .images img {width: auto;}
  #content .page .produk .macam .desc ul li {float: left;padding: 0 1%;width: 31%;}
  #content .page .produk .macam .desc ul li p {min-height: 100px;}
  #content .page .produk .color .desc ul li {padding: 0 1%;width: 23%;}
  #content .page .produk .color .desc ul li img {width: 60%;}

  #content .page .galeri .desc img {width: 24%}
  

  #content .page .kami .tentang .desc .images {float: left; width: 50%;}
  #content .page .kami .tentang .desc .text {float: left; padding: 0 1%; width: 48%;}
  #content .page .kami .fitur .desc {float: left; padding: 0 1%;width: 48%;}
  #content .page .kami .fitur .desc p {min-height: 150px;}
  #content .page .kami .filsafat .desc {float: left; padding: 0 1%;width: 48%;}
  #content .page .kami .filsafat .desc p {min-height: 150px;}
  #content .page .kami .agensi .desc {float: left; padding: 0 1%;width: 48%;}
 
  
  
  
  #footer .group {overflow: hidden;}
  #footer .intro, #footer .address {float: left; margin-right: 3%;width: 32%;}
  #footer .social {float: left; margin-right: 3%;width: 17%;}
  #footer .login {float: left;width: 10%;}

}
@media screen and (min-width: 960px) and (max-width: 1119px){
  #header h1 {line-height: 80px;}
  #header .nav ul.big > li {line-height: 80px;}
  #header .contact ul {}
  #header .contact ul li {height: 50px;}
  #header .nav ul.big {overflow: hidden;min-width: 600px;}
}
  

@media screen and (min-width: 1120px) and (max-width: 1279px){
  #header .contact ul li {line-height: 110px;}
}
@media screen and (min-width: 1280px) {
#header .contact ul li {line-height: 110px;}
  
}


/*main slide css*/
html, body {height: 100%;margin: 0;padding: 0;width: 100%;}
.slider {margin: 0 auto;min-width: 320px;}
.slide_viewer {height: 500px;overflow: hidden;position: relative;}
.slide_group {height: 100%;position: relative;width: 100%;}
.slide {display: none;height: 100%;position: absolute;width: 100%;}
.slide p {color: #888;text-align: center;}
.slide .top {position: absolute;top: 0;width: 100%;padding: 10px 0;background: rgba(0,0,0, 0.5);font-size: 12px;line-height: 140%;}
.slide .top .big {font-size: 16px; font-weight: bold; color: red;}
.slide .product {position: absolute; top: 150px;width: 100%; font-size: 14px;}
.slide .product .name {margin: 0 auto; width: 310px;background: rgba(0,0,0,0.4); border-radius: 3px;text-align: center; color: #fff;font-size: 18px; font-weight: bold;/* text-shadow: 2px 2px 10px #000;*//*text-shadow: -1px 0px #000, 0px 1px #000, 1px 0px #000, 0px -1px #000;*/}
.slide .product p {color: #eee;}
.slide .product a {display: block; margin: 10px auto; width: 120px; line-height: 50px;color: #fff; background: #67c8ff; text-align: center; border-radius: 10px;}
.slide .bottom {position: absolute; bottom: 0;width: 100%;padding: 10px 0;background: rgba(0,0,0,0.5);font-size: 12px;line-height: 140%;} 
.slide:first-child {display: block;}
.slide:nth-of-type(1) {background: url(../images/slider1.jpg) center no-repeat;background-position:cover;}
.slide:nth-of-type(2) {background: url(../images/slider2.jpg) center no-repeat;background-position:cover;}
.slide:nth-of-type(3) {background: url(../images/slider3.jpg) center no-repeat;background-position:cover;}
.slide_buttons {left: 0;position: absolute;right: 0;text-align: center;}
a.slide_btn {color: #474544;font-size: 42px;margin: 0 0.175em;-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
.slide_btn.active, .slide_btn:hover {color: #428CC6;cursor: pointer;}
.directional_nav {margin: 0 auto;position: relative;top: -250px;}
.previous_btn {bottom: 0;left: 20px;margin: auto;position: absolute;top: 0;}
.next_btn {bottom: 0;margin: auto;position: absolute;right: 20px;top: 0;}
.previous_btn, .next_btn {cursor: pointer;height: 45px;opacity: 0.5;-webkit-transition: opacity 0.4s ease-in-out;-moz-transition: opacity 0.4s ease-in-out;-ms-transition: opacity 0.4s ease-in-out;-o-transition: opacity 0.4s ease-in-out;transition: opacity 0.4s ease-in-out;width: 45px;}
.previous_btn:hover, .next_btn:hover {opacity: 1;}

@media only screen and (max-width: 767px) {
  .previous_btn {left: 5%;}
  .next_btn {right: 5%;}
}

/*youtube relative*/
.youtubeWrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}
.youtubeWrap iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}