:root, :before, :after{
  --color-border-dark:0 0 0;
  --color-border-light:255 255 255;
  --color-3:#787586;
  --color-4:#174A7F;
  --color-5:#E27026;
  --color-6:#FFFFFF;
  --color-7:#000000;
  --color-fb:#1877f2;
  --color-ig:#C13584;
  --color-tw:#00acec;
  --color-wa:#2bb240;
  --color-tg:#0088cc;
  --color-tk:#FF0050;
  --color-yt:#FF0000;
  --color-ml:#FE8425;
  --default-transition:all 0.34s;
  --rounded-1:var(--size-1);
  --rounded-2:var(--size-2);
  --rounded-3:var(--size-4);
  --hover-opacity:0.55;
  --shadow-default:0 2px 10px rgb(0 0 0 / 25%);
  --shadow-neumorp:-2px -2px 4px rgba(255,255,255,.2), 2px 2px 12px rgba(0,0,0,.2);
  --shadow-inset:inset -2px -2px 4px rgba(255,255,255,.2), inset 2px 2px 12px rgba(0,0,0,.2);
}



body, html{color:var(--color-3);}
a, .btn, button{transition:var(--default-transition); cursor:pointer}
a, button{color:var(--color-1); fill:var(--color-1);}
a:hover, button:hover{color:var(--color-4); fill:var(--color-4);}
.btn, a.btn, button.btn, input.btn{background-color:var(--color-4); color:var(--color-6); fill:var(--color-6); border-radius:var(--rounded-2);}
.btn:hover, a.btn:hover, button.btn:hover, input.btn:hover{background-color:var(--color-5); color:var(--color-6); fill:var(--color-6);}
#btt{position:fixed; bottom:var(--size-6); right:var(--size-2); cursor:pointer; transition:var(--default-transition);
z-index:calc(var(--max-zindex) - 4000); width:40px; height:40px; background-color:var(--color-4); fill:var(--color-6); border-radius:var(--rounded-2);}
#btt:hover, #btt:focus{background-color:var(--color-5); border-radius:50%;}



.flex_ori > img{opacity:0; transition:all 300ms;}
.flex_ori > img.lazyloaded{opacity:1;}
.flex_ori-loading:before{animation:skeleton-loading 0.5s linear infinite alternate; background-color:var(--color-4);}
@-webkit-keyframes skeleton-loading{0%{opacity:0.05;}100%{opacity:0.15;};}
@keyframes skeleton-loading{0%{opacity:0.05;}100%{opacity:0.15;};}



header{background-color:var(--color-6); box-shadow:var(--shadow-default); transition:var(--default-transition);}
.header-link:hover{color:var(--color-4); fill:var(--color-4);}
.header-curr{color:var(--color-5) !important; fill:var(--color-5) !important; cursor:default !important;}
.header-curr span:after{content:inherit !important;}

.header-transparent header{background-color:transparent; box-shadow:0 0 0;}
.header-transparent .header-link{color:var(--color-6); fill:var(--color-6);}



.business-link{border-radius:var(--rounded-2); color:var(--color-6) !important; text-shadow:2px 2px 5px var(--color-7);}
.business-link:before{position:relative; z-index:1000; background:linear-gradient(to bottom, rgb(var(--color-border-dark) / 0%) 55%, rgb(var(--color-border-dark) / 89%) 100%);}
.business-link img{transition:var(--default-transition);}
.business-link:hover img{transform:scale(1.2);}



footer{color:rgb(var(--color-border-light) / 75%);}
.footer-title{font-weight:900; margin-bottom:var(--size-2); font-size:var(--size-4); color:var(--color-6);}

.footer-content{background-color:var(--color-4);}
.footer-content .width-max{display:grid; grid-gap:var(--size-5);}
.footer-logo-frame .svgicon, .footer-logo-frame img{width:100%; max-width:160px;}
.footer-logo-frame .svgicon *{fill:var(--color-6);}
.footer-address-detail{line-height:150%;}
.fcd-socmed-list{display:flex; flex-wrap:wrap;}
.fcd-socmed-link{margin-top:var(--size-2); margin-right:var(--size-4); fill:var(--color-6);}
.fcd-side{ fill: #174A7F;}
.fcd-socmed-link .svgicon{width:auto; height:21px;}
.fcd-socmed-instagram:hover{fill:var(--color-ig);}
.fcd-socmed-facebook:hover{fill:var(--color-fb);}
.fcd-socmed-tiktok:hover{fill:var(--color-tk);}
.fcd-socmed-twitter:hover{fill:var(--color-tw);}
.fcd-socmed-youtube:hover{fill:var(--color-yt);}
.fcd-socmed-email:hover{fill:var(--color-ml);}
.fcd-info-career{margin-top:var(--size-3); display:block; color:var(--color-6); font-weight:normal;}
.fcd-info-career:hover{color:var(--color-5);}

.footer-info{background-color:var(--color-1); border:1px solid rgb(var(--color-border-light) / 5%);}
.footer-info .width-max{text-align:center;}
.footer-copyright{display:flex; flex-wrap:wrap;}
.fcd-info-link{color:var(--color-6); margin-right:var(--size-4);}



.rancak-popup, .rancak-popup-overlay, .rancak-popup-container{bottom:0; width:100%; height:100%;}
.rancak-popup{position:fixed; z-index:calc(var(--max-zindex) - 2000);}
.rancak-popup-overlay, .rancak-popup-container, .popup-close-button{position:absolute;}
.rancak-popup-container, .rancak-popup-box{padding:var(--size-4);}
.rancak-popup-overlay{z-index:1;}
.rancak-popup-box{position:relative; z-index:2000; width:100%; max-width:987px; max-height:calc(100vh - var(--size-7)); background-color:var(--color-6);
border-radius:var(--rounded-2); box-shadow:var(--shadow-default); overflow-y:auto; padding-right: 17px; box-sizing: content-box; -ms-overflow-style: none; scrollbar-width: none;}
.rancak-popup-box::-webkit-scrollbar{display: none;}
.rancak-popup-head{display:flex; justify-content:center; margin-bottom: var(--size-4);}
.rancak-popup-head > *{display:flex; align-items:center;}
.rancak-popup-title{font-weight:bold; color:var(--color-default-2);}
.popup-close-button{z-index:1000; top:0; right:0; padding:var(--size-3); fill:var(--color-5);}
.popup-close-button:hover{fill:var(--color-default-3);}
.popup-close-button .svgicon{width:auto; height:var(--size-4);}


.popup-company-box{max-width:576px;}
.popup-csr-box{max-width: 700px;}
.psc-field{width:100%; padding:var(--size-3) var(--size-4); padding-right:calc(var(--button-width) + var(--size-2)); 
border:1px solid rgb(var(--color-border-dark) / 8%); border-radius:var(--rounded-2);
background-color:transparent; color:var(--color-default-2); overflow:hidden;}
.psc-button{position:absolute; z-index:1000; top:0; right:0; width:var(--button-width); height:100%; background-color:var(--color-default-3); color:var(--bg-2);
display:flex; justify-content:center; align-items:center;}
.psc-button:hover{background-color:var(--color-default-4); color:var(--bg-2);}
.popup-company-note{text-align:center; margin-top:var(--size-2); font-size:12px;}

.popup-timeline .rancak-popup-box{max-width:480px;}

.popup-dpt .section-dpt-content{margin-top:var(--size-4);}

.rancak-popup-title{text-align: center; font-size: 16px; text-transform: uppercase; color: var(--color-7);}
.popup-company-desc{display: grid; gap: var(--size-3);}
.popup-company-desc p{font-size: 14px; text-align: justify;}

.logo-company{display: flex; position: relative; justify-content: center; align-items: center; margin-bottom: var(--size-2); width: 100%; max-height: 150px;}
.popup-logo-frame{position: relative; width: 150px; height: 150px; display: flex; align-items: center;}
.popup-logo-frame::before{display: block; content: ""; padding-top:100%; object-fit: cover;}
.popup-logo-frame img{position: absolute; width: 100%; height: auto;}

.btn-visit-company{margin-top: var(--size-4);}
.btn-visit-company button{background-color: var(--color-5);}

.carousel {position: relative; }
.carousel > .img-list-cor { margin: 0; padding: 0; list-style: none; position: relative; width: 100%;}
.img-list-cor::before{display: block; content: ""; padding-top:calc(9/16*100%); object-fit: cover;}
.slide {width: 100%; position: absolute; inset: 0; opacity: 0; transition: 200ms opacity ease-in-out; transition-delay: 200ms; }
.slide::before{display: block; content: ""; padding-top:calc(9/16*100%); object-fit: cover;}
.slide > img {position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.slide .blur{position: absolute; width: 100%; height: 100%; z-index: 2; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(248, 248, 248, 0) 62.5%, rgba(245, 245, 245, 0.46) 78.12%, #F5F5F5 100%);}
.slide[data-active] { opacity: 1; transition-delay: 0ms; }
.carousel-button { position: absolute; z-index: 3; background: none; border: none; font-size: var(--size-5); top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, .5); cursor: pointer; border-radius: .25rem; padding: 0 .5rem; background-color: rgba(0, 0, 0, .1); }
.carousel-button:hover,
.carousel-button:focus { color: white; background-color: rgba(0, 0, 0, .2); }
.carousel-button:focus { outline: 1px solid black; }
.carousel-button.prev { left: 1rem; }
.carousel-button.next { right: 1rem; }

.csr-video-frame{width: 80%; position: relative; border-radius: var(--size-2); overflow: hidden; margin-top: var(--size-3);}
.csr-video-frame::before{display: block; content: ""; padding-top:calc(9/16*100%); object-fit: cover;}
.csr-video-frame iframe{position: absolute; width: 100%; height: 100%; top: 0; left: 0;}


@media screen and (min-width:0px) and (max-width:1023px){
  .htm-line{background-color:var(--color-1); border-radius:var(--rounded-2); transition:var(--default-transition);}
  .header-togglemenu.show-sticky .htm-line{--line-position:calc((var(--hamburger-size) - var(--hamburder-line-height)) / 2);}
  .header-togglemenu.show-sticky .htm-line-1{transform:rotate(45deg);}
  .header-togglemenu.show-sticky .htm-line-2{width:0; opacity:0;}
  .header-togglemenu.show-sticky .htm-line-3{transform:rotate(135deg);}
  
  .header-transparent .htm-line{background-color:var(--color-6);}
  .header-transparent .main-nav .header-link{color:var(--color-1); fill:var(--color-1);}

  .main-nav{top:calc(var(--size-6) + var(--size-1)); right:var(--size-1); max-width:160px; height:auto;
  background-color:var(--color-6); border-radius:var(--rounded-2);}
  .main-nav .header-link{position:relative; padding:var(--size-4); border-top:1px solid rgb(var(--color-border-dark) / 8%); justify-content:flex-end;}
  
  
  
  .footer-content{padding:var(--size-6) var(--size-4);}
  .footer-content .width-max{grid-template-columns:repeat(auto-fit, minmax(210px,1fr));}
  
  .footer-info{padding:var(--size-4);}
  .fcd-info-link{margin-bottom:var(--size-2);}
}





@media screen and (min-width:1024px){
  .header-transparent .main-nav .header-link > span:after{background-color:var(--color-6);}

  .main-nav .header-link > span:after{border-radius:var(--rounded-3); background-color:var(--color-4); transition:var(--default-transition);}
  .main-nav .header-link:hover > span:after{opacity:1;}
  
  
  
  .footer-content{padding:var(--size-6) 0;}
  .footer-content .width-max{grid-template-columns:repeat(3,1fr);}
  
  .footer-info{padding:var(--size-4) 0;}
  .footer-info .width-max{display:flex; justify-content:space-between;}
  .rancak-popup-title{font-size: var(--size-4);}
  .popup-company-box{display: grid; grid-template-columns: 40% 1fr; column-gap: var(--size-4);}
  .body-popup-content{padding: 0 var(--size-3); max-height: 300px; overflow-y: auto; padding-right: 17px; box-sizing: content-box; -ms-overflow-style: none; scrollbar-width: none;}
  .body-popup-content::-webkit-scrollbar{display: none;}
}
  
  
 
 
 
@supports(-webkit-backdrop-filter:none) or (backdrop-filter:none){
  .rancak-popup > .rancak-popup-overlay{-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); background-color:rgb(var(--color-border-dark) / 13%);}
}