/* Update 20230116 */
*{filter:none;background:0;margin:0;padding:0;border:0;border-radius:0;outline:0;appearance:none;text-decoration:none;list-style:none;resize:none;box-sizing:border-box;vertical-align:baseline;-webkit-tap-highlight-color:transparent}
html,body{background:#fff;scroll-behavior:smooth}

.logo{margin:10px auto;padding:0 20px;color:#3851a5;text-align:center;letter-spacing:-1px;display:grid;justify-items:center;grid-template-columns:auto 1fr;align-items:center;gap:10px}
.logo em{font:normal 28px/28px bo,sans-serif}

nav{background:#fff;display:grid}
nav hr{border-bottom:1px solid #292524}
.navLi{margin:auto;padding:15px 20px;max-width:880px;width:100%;display:grid;justify-items:center;grid-auto-flow:column}
.navLi a{font:13px/13px bo,sans-serif;color:#4d4d4f;letter-spacing:2px;cursor:pointer}
.navLi a.act{color:#3851a5}
.navLi a:last-child{background:#fff;width:60px;height:60px;font:26px/60px bo,sans-serif;text-align:center;border-radius:0 15px 15px 0;position:absolute;top:0;right:-60px;display:none}

.banner{background:#000;height:450px;position:relative}
.banner img{width:100%;height:100%;object-fit:cover;position:absolute;opacity:0;transition:opacity .2s;will-change:opacity}
.banner img.act{opacity:.35}
.banner mark{padding:0 20px;height:100%;font:75px/75px bo,sans-serif;color:#fff;text-align:center;position:relative;display:grid;gap:15px;justify-items:center;align-content:center}
.banner mark:after{content:'';width:80px;border-bottom:8px solid #3851a5}
.banner em{margin:0 20px;font:normal 18px/18px bo,sans-serif;color:#fff;opacity:.5;position:absolute;top:calc(50% - 10px);z-index:1;user-select:none;cursor:pointer}
.next{right:0}

.about,.contact{background:#3851a5;padding:60px 20px;font:16px/26px me,sans-serif;color:#fff;text-align:center;display:grid;gap:20px}
.about h1,.contact h1{font:normal 34px/34px bo,sans-serif}
.about h1:after,.contact h1:after{content:'';margin:25px auto 0;width:80px;border-bottom:8px solid #fff;display:block}

.company{display:grid;grid-template-columns:repeat(2,1fr)}
.company a{background:#000;position:relative;overflow:hidden}
.company a:hover img{transform:scale3d(1.1,1.1,1.1)}
.company img{width:100%;height:340px;vertical-align:middle;object-fit:cover;opacity:.35;transform:unset;transition:transform .2s;will-change:transform}
.company div{padding:0 20px;width:100%;height:100%;font:15px/15px me,sans-serif;color:#fff;text-align:center;position:absolute;top:0;display:grid;gap:20px;align-content:center}
.company h1{font:normal 30px/30px bo,sans-serif}
.company h1:after{content:'';margin:15px auto 0;width:60px;border-bottom:8px solid #fff;display:block}

/*RACHMAT*/
/*=======*/

.history,.contact{background:#3851a5;padding:60px 20px;font:16px/26px me,sans-serif;color:#fff;text-align:center;display:grid;gap:20px}
.history h1,.contact h1{font:normal 34px/34px bo,sans-serif}
.history h1:after,.contact h1:after{content:'';margin:25px auto 0;width:80px;border-bottom:8px solid #fff;display:block}

.historydetail{--color: rgba(30, 30, 30);--bgColor: rgba(245, 245, 245);min-height: 100vh;display: grid;align-content: center;gap: 2rem;padding: 2rem;color: var(--color);background: var(--bgColor);}
.historydetail ul {--col-gap: 2rem;--row-gap: 2rem;--line-w: 0.25rem;display: grid;grid-template-columns: var(--line-w) 1fr;grid-auto-columns: max-content;column-gap: var(--col-gap);list-style: none;width: min(60rem, 90%);margin-inline: auto;}

.historydetail ul::before {content: "";grid-column: 1;grid-row: 1 / span 20;background: rgb(225, 225, 225);border-radius: calc(var(--line-w) / 2);}
.historydetail ul li:not(:last-child) {margin-bottom: var(--row-gap);}
.historydetail ul li {grid-column: 2;--inlineP: 1.5rem;margin-inline: var(--inlineP);grid-row: span 2;display: grid;grid-template-rows: min-content min-content min-content;}
.historydetail ul li .date {--dateH: 3rem;height: var(--dateH);margin-inline: calc(var(--inlineP) * -1);text-align: center;background-color: var(--accent-color);color: white;font-size: 1.25rem;font-weight: 700;display: grid;place-content: center;position: relative;border-radius: calc(var(--dateH) / 2) 0 0 calc(var(--dateH) / 2);}
  
.historydetail ul li .date::before {content: "";width: var(--inlineP);aspect-ratio: 1;background: var(--accent-color);background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent);position: absolute;top: 100%;clip-path: polygon(0 0, 100% 0, 0 100%);right: 0;}
.historydetail ul li .date::after {content: "";position: absolute;width: 2rem;aspect-ratio: 1;background: var(--bgColor);border: 0.3rem solid var(--accent-color);border-radius: 50%;top: 50%;transform: translate(50%, -50%);right: calc(100% + var(--col-gap) + var(--line-w) / 2);}
  
.historydetail ul li .title, ul li .descr {background: var(--bgColor);position: relative;padding-inline: 1.5rem;}
.historydetail ul li .title {overflow: hidden;padding-block-start: 1.5rem;padding-block-end: 1rem;font-weight: 500;}
.historydetail ul li .descr {padding-block-end: 1.5rem;font-weight: 300;}
  
.historydetail ul li .title::before,ul li .descr::before {content: "";position: absolute;width: 90%;height: 0.5rem;background: rgba(0, 0, 0, 0.5);left: 50%;border-radius: 50%;filter: blur(4px);transform: translate(-50%, 50%);}
.historydetail ul li .title::before {bottom: calc(100% + 0.125rem);}
.historydetail ul li .descr::before {z-index: -1;bottom: 0.25rem;}

/*=======*/

.maps{margin:auto;max-width:880px;display:grid;grid-template-columns:320px auto}
.maps ul{padding:20px;max-height:460px;font:12px/20px me,sans-serif;overflow:hidden;overflow-y:auto;display:grid;gap:20px}
.maps li{padding:0 0 0 20px;box-shadow:inset 4px 0 0 0 #000;cursor:pointer}
.maps li.act{box-shadow:inset 4px 0 0 0 #3851a5}
.maps li.act h1{color:#3851a5}
.maps li.act a{color:#3851a5;text-decoration-color:#3851a5}
.maps h1{font:normal 16px/22px bo,sans-serif;letter-spacing:-1px}
.maps a{color:#000;text-decoration:underline 1px dotted #000}
.maps iframe{background:#9cc0f9;width:100%;height:100%;min-height:350px}

.toTop{background:#3851a5;width:42px;font:30px/40px bo,sans-serif;text-align:center;color:#ffff;position:fixed;bottom:14px;right:14px;border-radius:4px;cursor:pointer}
footer{background:#292524;font:14px/22px me,sans-serif;color:#fff;letter-spacing:2px}
footer div{margin:auto;padding:20px;max-width:880px}

@media(max-width:640px){
.company{grid-template-columns:unset}
.maps{grid-template-columns:unset}
.logo{margin:20px auto 60px;grid-template-columns:unset;align-content:center}
.logo em{font:normal 20px/24px bo,sans-serif}
.navLi{gap:45px;grid-auto-flow:unset}
.navLi a:last-child{display:block}
nav{width:240px;height:100vh;position:fixed;z-index:2;align-content:start;transform:translate3d(-240px,0,0);transition:transform .2s;will-change:transform}
nav.act{transform:unset}
nav.act:before{content:'';background:rgba(153,153,153,.4);width:100vw;height:100%;position:absolute;left:240px}
nav hr{display:none}
}

/*RACHMAT*/
/*=======*/

@media (min-width: 40rem) {
    .historydetail ul {grid-template-columns: 1fr var(--line-w) 1fr;}
    .historydetail ul::before {grid-column: 2;}
    .historydetail ul li:nth-child(odd) {grid-column: 1;}
    .historydetail ul li:nth-child(even) {grid-column: 3;}
    .historydetail ul li:nth-child(2) {grid-row: 2/4;}
    .historydetail ul li:nth-child(odd) .date::before {clip-path: polygon(0 0, 100% 0, 100% 100%);left: 0;}
    .historydetail ul li:nth-child(odd) .date::after {transform: translate(-50%, -50%);left: calc(100% + var(--col-gap) + var(--line-w) / 2);}
    .historydetail ul li:nth-child(odd) .date {border-radius: 0 calc(var(--dateH) / 2) calc(var(--dateH) / 2) 0;}
  }

  /*=======*/


@font-face{src:url(bo.ttf);font-family:bo}
@font-face{src:url(me.ttf);font-family:me}
@font-face{src:url(it.ttf);font-family:it}