/* Start custom CSS for html, class: .elementor-element-c160685 */.philosophy-section{
max-width:1450px;
margin:auto;
padding:100px 20px;
display:grid;
grid-template-columns:330px 1fr;
gap:70px;
font-family:'Poppins',sans-serif;
background:linear-gradient(
180deg,
);
padding:40px;
border-radius:8px;
}
/* ================= LEFT ================= */
.ph-left{
position:sticky;
top:120px;
height:fit-content;
}
.ph-subtitle{
display:inline-block;
color:#B5121B;
font-size:14px;
font-weight:600;
letter-spacing:2px;
text-transform:uppercase;
}
.ph-left h2{
margin:18px 0;
font-size:44px;
font-weight:800;
line-height:1.1;
color:#222;
}
.ph-line{
width:70px;
height:5px;
background:#B5121B;
border-radius:30px;
margin:28px 0;
}
.ph-left p{
color:#777;
line-height:1.9;
font-size:15px;
}
/* ================= RIGHT ================= */
.ph-right{
display:flex;
flex-direction:column;
gap:25px;
}
/* ================= CARD ================= */
.ph-item{
display:flex;
align-items:center;
gap:25px;
padding:22px 28px;
border-radius:18px;
background:#0E9A4A;
color:#fff;
transition:.35s;
box-shadow:0 15px 35px rgba(0,0,0,.08);
}
.ph-item.dark{
background:#444;
}
.ph-item:hover{
transform:translateY(-8px);
box-shadow:0 18px 45px rgba(0,0,0,.15);
}
.ph-number{
width:75px;
height:75px;
flex-shrink:0;
border-radius:50%;
background:#fff;
display:flex;
justify-content:center;
align-items:center;
font-size:32px;
font-weight:800;
color:#0E9A4A;
}
.ph-item.dark .ph-number{
color:#444;
}
.ph-content h3{
margin:0 0 8px;
font-size:24px;
color: white;
font-weight:700;
}
.ph-content p{
margin:0;
font-size:15px;
line-height:1.8;
opacity:.95;
}
/* ===========================
Corporate Philosophy Mobile
=========================== */
@media (max-width:768px){
.philosophy-section{
display:block;
padding:50px 20px;
}
.ph-left{
position:relative;
top:auto;
margin-bottom:40px;
}
.ph-left h2{
font-size:32px !important;
}
.ph-right{
width:100%;
gap:18px;
}
.ph-item{
display:flex;
flex-direction:column; /* nomor atas, content bawah */
align-items:flex-start;
gap:15px;
padding:22px 20px;
border-radius:14px;
}
.ph-number{
width:55px;
height:55px;
font-size:22px;
}
.ph-content{
width:100%;
}
.ph-content h3{
font-size:20px !important;
margin-bottom:8px;
}
.ph-content p{
font-size:14px;
line-height:1.7;
margin-top:5px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d261d81 *//* ===========================================
JTS COMPANY PROFILE
PART 2A
=========================================== */
.jts-company-profile{
max-width:1400px;
margin:0 auto;
padding:60px 30px;
font-family:'Poppins',sans-serif;
}
/* ===========================================
TITLE
=========================================== */
.cp-title{
margin-bottom:55px;
}
.cp-title span{
display:block;
color:#B5121B;
font-size:13px;
font-weight:600;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:8px;
}
.cp-title h2{
margin:0;
font-size:48px;
font-weight:700;
color:#222;
line-height:1.2;
}
.line{
width:75px;
height:4px;
background:#B5121B;
margin-top:18px;
}
/* ===========================================
TOP LAYOUT
=========================================== */
.cp-top{
display:grid;
grid-template-columns:55% 45%;
gap:60px;
align-items:start;
margin-bottom:70px;
}
/* ===========================================
COMPANY PROFILE
=========================================== */
.cp-left{
display:flex;
flex-direction:column;
}
.cp-item{
display:grid;
grid-template-columns:22px 210px 1fr;
gap:18px;
align-items:center;
padding:22px 0;
border-bottom:1px solid #ECECEC;
transition:all .30s ease;
}
.cp-item:hover{
border-left:5px solid #B5121B;
padding-left:15px;
}
.bullet{
width:8px;
height:8px;
background:#B5121B;
border-radius:50%;
}
.cp-label{
font-size:21px;
font-weight:600;
color:#222;
}
.cp-value{
font-size:18px;
color:#666;
line-height:1.7;
}
.cp-note{
font-size:16px;
color:#888;
}
/* ===========================================
PHOTO
=========================================== */
.cp-right{
display:flex;
justify-content:flex-end;
align-items:flex-start;
}
.company-photo{
width:100%;
height:420px;
overflow:hidden;
background:#F7F7F7;
border-radius:8px;
}
.company-photo img{
width:100%;
height:100%;
display:block;
object-fit:contain;
transition:.45s;
}
.company-photo:hover img{
transform:scale(1.03);
}
/* ===========================================
BOTTOM SECTION
=========================================== */
.cp-bottom{
display:grid;
grid-template-columns:55% 45%;
gap:60px;
align-items:start;
}
/* ===========================================
SECTION TITLE
=========================================== */
.section-title{
display:flex;
align-items:center;
gap:14px;
margin-bottom:28px;
}
.section-title h3{
margin:0;
font-size:30px;
font-weight:700;
color:#222;
}
/* ===========================================
BOARD OF DIRECTORS
=========================================== */
.director-list{
width:100%;
}
.director-row{
display:grid;
grid-template-columns:220px 1fr;
gap:25px;
align-items:center;
padding:18px 0;
border-bottom:1px solid #ECECEC;
transition:all .30s ease;
}
.director-row:last-child{
border-bottom:none;
}
.director-row:hover{
padding-left:15px;
border-left:5px solid #B5121B;
background:#FCFCFC;
}
.director-position{
font-size:18px;
font-weight:600;
color:#222;
}
.director-name{
font-size:18px;
font-weight:400;
color:#666;
transition:.30s;
}
.director-row:hover .director-name{
color:#222;
}
/* ===========================================
OWNERSHIP STRUCTURE
=========================================== */
.ownership-section{
display:flex;
flex-direction:column;
height:100%;
}
.ownership-image{
width:100%;
min-height:360px;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
}
.ownership-image img{
width:100%;
height:auto;
max-height:100%;
object-fit:contain;
display:block;
}
/* ===========================================
IMAGE PLACEHOLDER
=========================================== */
.ownership-image:empty{
min-height:360px;
border:1px dashed #D8D8D8;
background:#FAFAFA;
}
.ownership-image:empty::before{
content:"OWNERSHIP STRUCTURE";
color:#999;
font-size:15px;
font-weight:600;
letter-spacing:1px;
}
/* ===========================================
PHOTO & OWNERSHIP ALIGNMENT
=========================================== */
.cp-right,
.ownership-section{
align-self:start;
}
/* ===========================================
SMOOTH TRANSITION
=========================================== */
.company-photo,
.company-photo img,
.director-row,
.ownership-image img{
transition:.35s;
}
.company-photo:hover img{
transform:scale(1.03);
}
.ownership-image:hover img{
transform:scale(1.02);
}
/* ==========================================================
PART 2C
RESPONSIVE
========================================================== */
/* ==========================
Laptop 1200px
========================== */
@media (max-width:1200px){
.jts-company-profile{
padding:50px 25px;
}
.cp-top,
.cp-bottom{
gap:45px;
}
.cp-title h2{
font-size:42px;
}
}
/* ==========================
Tablet
========================== */
@media (max-width:991px){
.jts-company-profile{
padding:45px 20px;
}
.cp-title{
margin-bottom:40px;
}
.cp-title h2{
font-size:38px;
}
.cp-top{
grid-template-columns:1fr;
gap:40px;
margin-bottom:55px;
}
.cp-bottom{
grid-template-columns:1fr;
gap:55px;
}
.cp-item{
grid-template-columns:18px 180px 1fr;
gap:15px;
}
.cp-label{
font-size:18px;
}
.cp-value{
font-size:17px;
}
.company-photo{
height:420px;
}
.section-title h3{
font-size:28px;
}
.director-row{
grid-template-columns:180px 1fr;
}
}
/* ==========================
Mobile
========================== */
@media (max-width:767px){
.jts-company-profile{
padding:35px 15px;
}
.cp-title{
margin-bottom:35px;
}
.cp-title span{
font-size:12px;
}
.cp-title h2{
font-size:32px;
}
.line{
width:60px;
}
.cp-item{
grid-template-columns:14px 1fr;
gap:12px;
align-items:flex-start;
}
.bullet{
margin-top:10px;
}
.cp-label{
grid-column:2;
font-size:17px;
margin-bottom:5px;
}
.cp-value{
grid-column:2;
font-size:16px;
line-height:1.7;
}
.company-photo{
height:280px;
}
.section-title{
margin-bottom:18px;
}
.section-title h3{
font-size:24px;
}
.director-row{
grid-template-columns:1fr;
gap:6px;
padding:15px 0;
}
.director-position{
font-size:17px;
}
.director-name{
font-size:16px;
}
.ownership-image{
min-height:220px;
}
}
/* ==========================
Small Mobile
========================== */
@media (max-width:480px){
.cp-title h2{
font-size:28px;
}
.company-photo{
height:220px;
}
.ownership-image{
min-height:180px;
}
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-439c4a9 */.elementor-1953 .elementor-element.elementor-element-439c4a9{
background:
linear-gradient(
135deg,
#edf1f5 0%,
#f8f9fa 25%,
#ffffff 50%,
#f4f6f8 75%,
#edf1f5 100%
);
border-top:1px solid #ffffff;
border-bottom:1px solid #d9dde2;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-58f7a4d *//*==================================================
LOCATION
==================================================*/
.jts-location {
max-width: 1400px;
margin: auto;
padding: 80px 20px 40px;
font-family: Poppins, sans-serif;
}
/*==================================================
LOCATION TITLE
==================================================*/
.loc-title span {
color: #B5121B;
font-size: 13px;
letter-spacing: 2px;
font-weight: 600;
text-transform: uppercase;
}
.loc-title h2 {
font-size: 54px;
margin: 10px 0;
}
.line {
width: 70px;
height: 4px;
background: #B5121B;
margin-top: 15px;
}
/*==================================================
FULL WIDTH
==================================================*/
.location-full {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-bottom: 0;
}
/*==================================================
MAP WRAPPER
IMAGE + BUTTON = SATU KELOMPOK
==================================================*/
.location-map-wrap {
position: relative;
width: 100%;
margin: 0;
padding: 0;
line-height: 0;
overflow: hidden;
}
/*==================================================
MAP IMAGE
PENTING:
width 100%
height auto
Jadi rasio gambar tidak berubah.
==================================================*/
.location-map {
display: block;
width: 100%;
height: auto;
max-width: none;
margin: 0;
padding: 0;
border: 0;
}
/*==================================================
BUTTON LAYER
==================================================*/
.location-buttons {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
pointer-events: none;
}
/*==================================================
BUTTON
SEMUA UKURAN MENGGUNAKAN %
BUKAN PX
Jadi ketika gambar mengecil,
tombol ikut mengecil.
==================================================*/
.loc-btn {
position: absolute;
width: 7.8%;
padding: 0.52% 0.78%;
box-sizing: border-box;
background: #c4d9ef;
color: #111 !important;
text-decoration: none;
text-align: center;
border: 0.06vw solid #9fb9d5;
border-radius: 0.15vw;
box-shadow:
0.1vw
0.2vw
0.35vw
rgba(0, 0, 0, .10);
pointer-events: auto;
line-height: normal;
transition:
background .2s ease,
box-shadow .2s ease;
}
/*==================================================
BUTTON TEXT
==================================================*/
.loc-btn span {
display: block;
margin: 0;
padding: 0;
font-size: 0.62vw;
line-height: 1.4;
letter-spacing: 0.08vw;
font-weight: 900;
color: #111 !important;
white-space: nowrap;
}
/*==================================================
LEFT BUTTON
==================================================*/
.loc-btn.left {
left: 14.2%;
bottom: 2.8%;
}
/*==================================================
RIGHT BUTTON
==================================================*/
.loc-btn.right {
left: 57.8%;
bottom: 2.8%;
}
/*==================================================
HOVER
==================================================*/
.loc-btn:hover {
background: #9fbddd;
color: #111 !important;
box-shadow:
0 4px 10px rgba(0, 0, 0, .15);
}
.loc-btn:hover span {
color: #111 !important;
}
/*==================================================
TABLET
==================================================*/
@media (max-width: 991px) {
.jts-location {
padding: 60px 20px 30px;
}
.loc-title h2 {
font-size: 38px;
}
}
/*==================================================
MOBILE
==================================================*/
@media (max-width: 600px) {
.jts-location {
padding: 50px 20px 25px;
}
.loc-title h2 {
font-size: 32px;
}
.line {
width: 55px;
height: 3px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-57a0e43 */.jts-history{
max-width:1400px;
margin:auto;
padding:20px 0 80px;
padding:40px;
border-radius:8px;
}
.history-title{
margin-bottom:50px;
}
.history-title span{
color:#B5121B;
font-size:13px;
font-weight:600;
letter-spacing:2px;
text-transform:uppercase;
}
.history-title h2{
margin:10px 0;
font-size:48px;
font-weight:700;
color:#222;
}
.history-line{
width:70px;
height:4px;
background:#B5121B;
margin:18px 0 28px;
}
.history-title p{
max-width:780px;
font-size:17px;
line-height:1.9;
color:#666;
}
.history-image{
width:100%;
overflow:hidden;
border-radius:18px;
border:1px solid #E6E6E6;
background:#fff;
transition:.35s;
box-shadow:0 10px 35px rgba(0,0,0,.05);
}
.history-image:hover{
transform:translateY(-6px);
box-shadow:0 20px 45px rgba(0,0,0,.12);
}
.history-image img{
width:100%;
display:block;
object-fit:cover;
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-2eabae9 */.elementor-1953 .elementor-element.elementor-element-2eabae9{
background:
linear-gradient(
135deg,
#edf1f5 0%,
#f8f9fa 25%,
#ffffff 50%,
#f4f6f8 75%,
#edf1f5 100%
);
border-top:1px solid #ffffff;
border-bottom:1px solid #d9dde2;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-033f34c *//* ===========================================
JTS CERTIFICATION
=========================================== */
.jts-certification{
max-width:1450px;
margin:0 auto;
padding:30px 20px 80px;
font-family:'Poppins',sans-serif;
background:
linear-gradient(135deg,
transparent 0%,
transparent 47%,
#fafafa 48%,
#fafafa 49%,
transparent 50%),
#fff;
background:linear-gradient(
180deg,
);
padding:40px;
border-radius:8px;
}
/* HEADER */
.cert-header{
margin-bottom:45px;
}
.cert-header span{
display:inline-block;
font-size:13px;
letter-spacing:2px;
color:#B5121B;
text-transform:uppercase;
font-weight:600;
}
.cert-header h2{
margin:8px 0;
font-size:52px;
font-weight:700;
color:#222;
}
.cert-line{
width:70px;
height:4px;
background:#B5121B;
}
/* INTRO */
.cert-intro{
border-left:5px solid #B5121B;
padding-left:30px;
margin-bottom:60px;
}
.cert-intro p{
margin:0 0 20px;
color:#555;
font-size:18px;
line-height:1.9;
}
/* GRID */
.cert-wrapper{
display:grid;
grid-template-columns:
repeat(5,1fr);
gap:35px;
align-items:start;
}
/* ITEM */
.cert-item{
text-align:center;
}
/* PHOTO */
.cert-photo{
border:1px solid #CFCFCF;
background:#FFF;
padding:10px;
transition:.35s;
position:relative;
}
.cert-photo:hover{
border-color:#B5121B;
transform:translateY(-6px);
}
.cert-photo img{
width:100%;
display:block;
object-fit:contain;
}
/* TITLE */
.cert-item h3{
margin:18px 0 12px;
font-size:30px;
font-weight:700;
color:#222;
}
/* ==========================================
JAPANESE BUTTON
========================================== */
.jp-buttons{
display:flex;
flex-direction:column;
gap:6px;
}
.jp-buttons a{
display:block;
padding:8px 5px;
border:1px solid #222;
text-decoration:none;
color:#222;
font-size:13px;
transition:.25s;
background:#fff;
}
.jp-buttons a:hover{
background:#B5121B;
border-color:#B5121B;
color:#fff;
}
/* ==========================================
GREEN INDUSTRY
========================================== */
.green{
display:flex;
flex-direction:column;
align-items:center;
}
.green-logo{
width:140px;
margin-bottom:10px;
}
.green-logo img{
width:100%;
}
.green-title{
font-size:24px;
font-weight:700;
color:#2F8D3B;
margin-bottom:18px;
}
.green-cert{
width:100%;
border:1px solid #CFCFCF;
padding:10px;
background:#fff;
transition:.35s;
}
.green-cert:hover{
border-color:#B5121B;
transform:translateY(-6px);
}
.green-cert img{
width:100%;
display:block;
}
.green-text{
margin-top:14px;
font-size:14px;
color:#555;
}
/* FOOTER */
.cert-footer{
margin-top:60px;
}
.footer-line{
width:100%;
height:1px;
background:#E5E5E5;
margin-bottom:20px;
}
.cert-footer p{
color:#777;
font-size:14px;
text-align:center;
letter-spacing:.3px;
}
/* ==========================================
RESPONSIVE
========================================== */
@media(max-width:1200px){
.cert-wrapper{
grid-template-columns:repeat(3,1fr);
}
}
@media(max-width:900px){
.cert-wrapper{
grid-template-columns:repeat(2,1fr);
}
.cert-header h2{
font-size:42px;
}
.cert-item h3{
font-size:24px;
}
}
@media(max-width:640px){
.cert-wrapper{
grid-template-columns:1fr;
}
.cert-intro{
padding-left:18px;
}
.cert-header h2{
font-size:34px;
}
}
/* =================================
LOCATION MOBILE RESPONSIVE
================================= */
@media(max-width:768px){
.jts-location{
padding:50px 20px 30px;
}
/* TITLE */
.loc-title span{
font-size:11px;
letter-spacing:1.5px;
}
.loc-title h2{
font-size:34px;
margin:8px 0;
}
.line{
width:55px;
height:3px;
margin-top:12px;
}
/* MAP AREA */
.location-full{
width:100%;
margin-left:0;
overflow:hidden;
margin-bottom:0;
}
.location-map-bg{
width:100%;
height:350px;
background-size:cover;
background-position:center;
}
/* BUTTON CONTAINER */
.location-buttons{
position:relative;
left:auto;
bottom:auto;
transform:none;
width:100%;
display:flex;
flex-direction:column;
gap:15px;
padding:25px 20px;
background:#fff;
z-index:2;
}
/* BUTTON */
.loc-btn{
width:100%;
padding:22px 20px;
border-radius:8px;
display:block;
text-align:left;
box-shadow:
0 10px 25px rgba(0,0,0,.15);
}
.loc-btn span{
font-size:11px;
letter-spacing:1.5px;
margin-bottom:6px;
}
.loc-btn strong{
font-size:21px;
line-height:1.3;
}
.loc-btn.left,
.loc-btn.right{
align-self:auto;
}
}
/* =================================
SMALL IPHONE
================================= */
@media(max-width:480px){
.jts-location{
padding:40px 15px 20px;
}
.loc-title h2{
font-size:30px;
}
.location-map-bg{
height:280px;
}
.location-buttons{
padding:20px 15px;
}
.loc-btn{
padding:18px 16px;
}
.loc-btn strong{
font-size:18px;
}
}/* End custom CSS */