@charset "utf-8";
/* CSS Document */

.page-name-box{ width:100%; height:133px; float:left; display:block; background:url(../images/inside-page-bg.jpg) center top no-repeat; margin-bottom:33px;}
.page-name-box2{ width:100%; height:133px; float:left; display:block; background:url(../images/inside-page-bg.jpg) center top no-repeat; }
.bade-come{width:100%; height: auto; float:left; display:block; padding-top:35px; }
.bade-come div{width:100%; height: auto; float:left; display:block; padding-bottom:15px;}
.bade-come div a{ font-size:12px; font-weight:400; color:#FFFFFF; padding-right:20px; position:relative;  }
.bade-come div a:after{content:'/'; position:absolute; right:0px; top:1px; width:10px; height:20px; font-size:12px; font-weight:400; color:#FFFFFF; }
.bade-come div a:hover{ color:#000000;}
.bade-come div span{ font-size:12px; font-weight:400; color:#FFFFFF; padding-right:20px; padding-left:5px;}
.bade-come h1{ font-size:30px; font-weight:600; font-style:italic; color:#FFFFFF;}

.gallery-box{ width:100%; height:auto; float:left; overflow:hidden; }
.gallery-box2{ margin-left:-7px; margin-right:-7px;  margin-top:0px; display:-webkit-flex;display:-webkit-box;display:-moz-flex; display:-moz-box;display:-ms-flexbox;display:flex;flex-direction:row;flex-wrap: wrap;}
.gallery-box3{ width:20%; height: auto; float:left; padding-left: 7px; padding-right: 7px; padding-bottom:20px; box-sizing:border-box; list-style-type: none;  }
.gallery-box4{ width: 100%; height: 100%; float: left;  border-radius: 5px; -webkit-box-shadow: 2px 2px 18px -5px rgba(170,170,170,0.75); -moz-box-shadow: 2px 2px 18px -5px rgba(170,170,170,0.75); box-shadow: 2px 2px 18px -5px rgba(170,170,170,0.75);}
.gallery-box4 span{ width: 100%; height:150px;/* height: 189px;*/ overflow:hidden; float: left; display: block; border-top-left-radius: 5px; border-top-right-radius: 5px;	}
.gallery-box4 span img{width: 100%; line-height:0; display:block;}
.gallery-box4 small{ padding:20px 50px 20px 20px; width:100%; height:auto; display:block; box-sizing:border-box; float:left; font-size:18px; font-weight:400; color:#000; line-height:24px; position:relative; }
.gallery-box4 small a{ font-size:18px; font-weight:400; color:#000; line-height:24px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 1s ease; transition: all 0.5s ease; display:block;}
.gallery-box4 small a:hover{ color:#146864;}
.ab{padding:20px 50px 5px 20px!important;}

.gallery-box4 big{ padding:0px 50px 5px 20px; width:100%; height:auto; display:block; box-sizing:border-box; float:left; font-size:18px; font-weight:400; color:#000; line-height:24px; position:relative; }
.gallery-box4 big a{ font-size:14px; font-weight:400; color:#000; line-height:18px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 1s ease; transition: all 0.5s ease; display:block;}
.gallery-box4 big a:hover{ color:#146864;}
/*.more{ font-style:italic; color:#2d639c; font-weight:400; padding-right:15px; position:relative; display:inline-block;-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 1s ease; transition: all 0.5s ease;}*/
.gallery-box4 small:after{content:''; width:20px; height:20px; position:absolute; right:30px; top:40px; background:url(../images/arrow3.png) no-repeat 100% 0;-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 1s ease; transition: all 0.5s ease;}
.gallery-box4 small:hover{padding-right:0px;}
.gallery-box4 small:hover:after{width:15px; right:10px;}

.product-box{ width:100%; height:auto; float:left; display: flex; flex-wrap: wrap;}
.product-left{ width:23%; max-width:299px; height:auto; float:left;}
.product-left ul{width:100%; height:auto; float:left;}

/*===== papan New add ===*/

.product-left ul li{width:100%; min-height:74px; float:left; padding-left:68px;  display: table;  position:relative; border-bottom:1px solid #d0d0d0;  }
.bonding1{border-bottom:0px solid #d0d0d0!important; }
.bonding2{border-bottom:0px solid #d0d0d0  !important;     min-height: 26px!important;}
.bonding2 a{font-size:14px !important; font-weight:400; color:#595959; line-height:16px; padding-top:0px!important; padding-bottom:0px!important; }

.bonding3{border-bottom:1px solid #d0d0d0  !important;     min-height: 26px!important;}
.bonding3 a{font-size:14px !important; font-weight:400; color:#595959; line-height:16px; padding-top:0px!important; padding-bottom:10px!important; }

.product-left ul li a{ border-right:3px solid transparent;  display: table-cell; vertical-align:middle; font-size:16px; font-weight:400; color:#595959; line-height:24px; padding-top:10px; padding-bottom:10px; }

.product-right-text h6{font-size:18px; font-weight:400; color:#188783; font-style:italic; line-height:25px;  padding-bottom:10px;display:block;}
/*===== New add ===*/

.product-left ul li a:hover{ color:#188783;border-right:3px solid transparent;}
.product-left ul li.navActive a{ color:#188783;border-right:3px solid #188783;}
.product-left ul li a span{ width:54px; height:54px; position:absolute; left:0; top:10px; border-radius:50%;}
.product-left ul li a span img{ width:100%; height:100%; border-radius:50%;}

.product-right{ width:77%; max-width:1021px; height:auto; float:left; border-left:1px solid #d0d0d0;}
.product-pic{ width:36%; max-width:367px; height:auto; float:right; padding-top:30px;}
.product-pic img{width:100%;border-radius:3px;}
.product-right-text{width:64%; max-width:648px; height:auto; float: left; padding:30px; box-sizing:border-box;}
.page-name{font-size:24px; font-weight:600; color:#188783; font-style:italic; line-height:25px;  padding-bottom:20px;display:block; }
.sub-text{font-size:30px; font-weight:600; color:#272727; font-style:italic; line-height:34px;  padding-bottom:30px; display:block;}
.text14{font-size:14px; font-weight:400; color:#272727; font-style: normal; line-height:20px;  padding-bottom:20px;display:block;}
.text14 strong{font-size:14px; font-weight:600; color:#272727; font-style: normal; line-height:20px;  }

.text14p10{font-size:14px; font-weight:400; color:#272727; font-style: normal; line-height:20px;  padding-bottom:10px;display:block;}
.text14p10 strong{font-size:14px; font-weight:600; color:#272727; font-style: normal; line-height:20px; } 
.text14p10:last-child{ padding-bottom:20px!important; display:block;}
.green-line{width:100%; height:auto; float:left; border-top:2px solid #cfcfcf;  position:relative; margin-top:20px; margin-bottom:0px;  }
.green-line:after{content:''; position:absolute; left:0px; top:-2px; width:180px; height:2px; background:#156b68; }
.green-line h4{font-size:24px; font-weight:300; color:#188783; font-style: normal; line-height:25px; padding:20px 0; }
.green-line p{font-size:18px; font-weight:300; color:#3b3b3b; font-style: normal; line-height:22px; padding:0px 0 20px 0; }
.menu{ position:relative;}
.menu strong{ display:none;}		
		
.download-box{ width:100%; height:auto; float:left;border-top:1px solid #cfcfcf; border-bottom:1px solid #cfcfcf; display:block; padding-bottom:20px; padding-top:20px; margin-bottom:20px;}	
.download3{width:100%; height:auto; float:left; padding-bottom:25px;}
.download3 h2{width: auto; height:auto; float:left; display:block; font-size:24px; font-weight:300; color:#0e6f6c; font-style: normal; line-height:50px; padding-right:75px; position:relative;}
.download3 h2 span{width:38px; height:auto; position:absolute; right:0; top:7px;}

.download-right2{ width:100%;  height:auto; float:left; }
.download-right2 ul{}
.download-right2 ul li{ width:140px; height:auto; float:left; display:block; padding:0 15px 20px 15px;box-sizing: border-box;}
.download-right2 ul li img{ width:110px;-webkit-box-shadow: 2px 2px 18px -5px rgba(170,170,170,0.75); -moz-box-shadow: 2px 2px 18px -5px rgba(170,170,170,0.75); box-shadow: 2px 2px 18px -5px rgba(170,170,170,0.75); }
.query{width:100%;  height:auto; float:left; display:block;}
.query h2{width:100%;  height:auto; float:left; display:block; font-size:24px; font-weight:300; color:#0e6f6c; font-style: normal; line-height:24px; padding-bottom:10px; padding-left:10px;}
.query h3{width:100%;  height:auto; float:left; display:block; font-size:14px; font-weight:400; color:#0e6f6c; font-style: normal; line-height:18px; padding-bottom:25px; padding-left:10px;}
.query span{width: auto;  height:auto; float:left; display:block; margin-bottom:30px;}
.query span a{width: auto;  height:auto; float:left; display:block; padding:14px 45px; background:#188783; border-radius: 22px;font-size:18px; font-weight:400; color:#FFF; font-style: normal; line-height:18px; -webkit-transition: all 1s ease-in; -moz-transition: all 1s ease-in;  -o-transition: all 1s ease-in; transition: all 1s ease-in-out;}
.query span a:hover{ background:#000000;}
.mob2{ display:none;}
.desktop2{ display: block;}

.list50per{ width:100%; height:auto; float:left;  padding:0px 0 20px 0;  display:-webkit-flex;display:-webkit-box;display:-moz-flex; display:-moz-box;display:-ms-flexbox;display:flex;flex-direction:row;flex-wrap: wrap;}
.list50per li{width:50%; height:auto; float:left; padding:0px 10px 10px 20px; box-sizing: border-box; background:url(../images/arrow4.png) left 4px no-repeat; font-size:16px; font-weight:300; color:#3b3b3b; font-style: normal; line-height:18px; }

.list100per{ width:100%; height:auto; float:left;  padding:0px 0 20px 0;  display:-webkit-flex;display:-webkit-box;display:-moz-flex; display:-moz-box;display:-ms-flexbox;display:flex;flex-direction:row;flex-wrap: wrap;}
.list100per li{width:100%; height:auto; float:left; padding:0px 10px 10px 20px; box-sizing: border-box; background:url(../images/arrow4.png) left 4px no-repeat; font-size:16px; font-weight:300; color:#3b3b3b; font-style: normal; line-height:18px; }
.text13 {
    font-size: 14px;
    font-weight: 400;
    color: #272727;
    font-style: italic;
    line-height: 20px;
    padding-bottom: 20px;
    display: block;
}
.text14:last-child { padding-bottom: 20px;}

@media screen and (max-width:1025px){
.gallery-box3{ width:25%;}
.gallery-box4 span{ height: auto ;}

.product-left ul li a span { width: 30px;height: 30px;}
.product-left ul li {width: 100%; min-height: 44px;float: left; padding-left: 38px;}
.product-left ul li a {font-size: 14px;color: #595959;line-height: 30px;}
.download-right2 ul li {width: 130px;padding: 0 10px 20px 10px; }

}





@media screen and (max-width:800px){
.gallery-box3{ width:33.333%;}
.menu strong{ display:block;}
.menu ul{ position:absolute;  display:none; z-index:999;}

.product-left {width: 100%; max-width: inherit;}
.product-pic {width:100%;max-width: inherit; padding-top: 0px;}
.page-name{ padding-top:30px;}
.product-right {width:100%;max-width: inheritpx; border-left: 0px solid #d0d0d0;}
.product-right-text {width:100%; max-width: inherit;padding: 0px;}
.mob2{ display:block;}
.desktop2{ display: none ;}
.menu{  width:100%; height:auto; float:left; box-sizing: border-box;}
.menu strong{padding:20px 0 20px 0;font-size:24px; font-weight:600; color: #188783;line-height: 30px; padding-left:10px; background:url(../images/arrow66.png) right 30px no-repeat; cursor:pointer;/* border-bottom: 1px solid #cfcfcf; */}
.bpoList{ background:rgba(255,255,255,1.0); -webkit-box-shadow: 0px 13px 30px -8px rgba(0,0,0,0.75); -moz-box-shadow: 0px 13px 30px -8px rgba(0,0,0,0.75); box-shadow: 0px 13px 30px -8px rgba(0,0,0,0.75);}
.product-left ul li a span{ display:none;}
.product-left ul li {
    width: 100%;
    min-height: inherit;
    float: left;
    padding-left: inherit;
}
.product-left ul li a {
    border-right: 0px solid transparent;
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #595959;
    line-height: 18px;
    padding-top: 10px;
    padding-bottom: 10px; padding-left:10px;
}

@media screen and (max-width:700px){
.gallery-box3{ width:50%;}
.list50per li{ width:100%;}
}

@media screen and (max-width:500px){
.bade-come h1 {font-size: 20px;}
.gallery-box3{ width:100%;}

}