*,html,:before,:after{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-family:inherit;-moz-box-sizing:border-box;box-sizing:border-box;font-size:100%;text-align:left}img{color:transparent;font-size:0;vertical-align:middle;-ms-interpolation-mode:bicubic}ol,ul{list-style:none}li{display:list-item}a img{border:0}a{text-decoration:none}b,strong{font-weight:700}i,em{font-style:italic}img{max-width:100%}.btn,input[type=button],select,button{-webkit-appearance:none;cursor:pointer;background-color:transparent}.content_center{display:flex;justify-content:center;align-items:center}.hide{display:none}



:root, :before, :after{
  --site-container:987px;
  --size-1:5px;
  --size-2:8px;
  --size-3:13px;
  --size-4:21px;
  --size-5:34px;
  --size-6:55px;
  --size-7:89px;
  --default-fontsize:15px;
  --title-fontsize:17px;
  --max-zindex:2147483648;
  --color-1:#404756;
  --color-2:#F5F5F5;
}



body, html{font-family:'Nunito',sans-serif; font-size:var(--default-fontsize); font-weight:400; letter-spacing:0.4px; font-feature-settings:'lnum' 1; 
-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; -webkit-font-smoothing:antialiased; 
-moz-osx-font-smoothing:grayscale; text-rendering:optimizeSpeed;}
html{scroll-behavior:smooth; min-height:100vh; background-color:var(--color-1);}
body{overflow-x:hidden; background-color:var(--color-2);}
body.header-fill{padding-top:var(--size-6);}
a, button{font-weight:bold;}
.btn, a.btn, button.btn{padding:var(--size-3) var(--size-4); font-weight:normal; -webkit-appearance:none; text-transform:capitalize; 
display:flex; text-align:center; align-items:center; justify-content:center;}
.width-max{display:block; position:relative; width:100%; max-width:var(--site-container); margin:0 auto;}



.flex_ori{display:block; overflow:hidden; position:relative; line-height:0;}
.flex_ori:before{content:''; display:block;}
.flex_ori img{position:absolute; z-index:2; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.flex_ori img:not([src]){visibility:hidden;}



header{position:fixed; z-index:calc(var(--max-zindex) - 5000); top:0; left:0; width:100%;}
header > .width-max{display:flex; justify-content:space-between;}
.header-left, .header-right{display:flex;}
.header-link{height:var(--size-6); padding:0 var(--size-3); white-space:nowrap;}
.header-logo .svgicon{width:auto; height:36px;}



.rancak-container{position:relative; min-height:100vh;}
.section-container{padding-top:var(--size-7); padding-bottom:var(--size-7);}



.business-intro{font-size:19px; line-height:150%;}
.business-intro p{margin-bottom:var(--size-4); text-align: center; font-weight: 700; color: #000;}
.business-list{display:grid; grid-gap:var(--size-2); grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); margin-top:var(--size-5) !important;}
.business-link{position:relative;}
.business-link:before{padding-top:100%;}
.business-title{position:absolute; z-index:2000; bottom:0; left:0; width:100%; padding:var(--size-3); line-height:140%; text-align:center; font-weight:900; text-transform:uppercase;}

.column{display: grid; grid-template-columns: 1fr; justify-content: center; justify-items: center; gap: var(--size-4); }
.column-list{margin-bottom: var(--size-5); width: 100%;}

.title-page{display: grid; justify-content: center; justify-items: center; margin-bottom: var(--size-5); gap: var(--size-2);}
.title-page h1{font-size: var(--size-4); color: var(--color-7); font-weight: 700; text-transform: uppercase; text-align: center;}
.title-page .title-line{width: 60%; height: var(--size-2); border-radius: 12px; background-color: var(--color-5);}
.article-content{line-height:150%;}
.article-content p{margin-bottom:var(--size-4); text-align: justify; font-size:16px;}

.profile-image{display: grid; justify-content: center; justify-items: center; grid-template-columns: 1fr;}
.img-profile-frame{position: relative; width: 100%;}
.img-profile-frame::before{display: block; content: ""; padding-top:100%; object-fit: cover;}
.img-profile-frame img{position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.img-profile-frame .blur, .img-csr-frame .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%);}

.img-csr-frame{position: relative; width: 100%;}
.img-csr-frame::before{display: block; content: ""; padding-top:calc(9/16*100%); object-fit: cover;}
.img-csr-frame img{position: absolute; width: 100%; height: 100%; top: 0; left: 0;}

.csr-card-head{margin-bottom: 48px;}
.card-csr{background-color: #ffffff; padding: 48px; box-shadow: rgb(0 0 0 / 10%) 0px 4px 12px; border: 1px solid #e2e2e2; margin-bottom: var(--size-4);}
.card-csr .subhead, .popup-csr .subhead{font-size: 18px; text-transform: uppercase; font-weight: 700; color: var(--color-7); margin-bottom: var(--size-1);}
.card-csr .date-article, .popup-csr .date-article{font-size: 12px; color: var(--color-5); margin-bottom: var(--size-4);}
.card-csr .article-csr-content, .popup-csr .article-csr-content{display: grid; gap: var(--size-4); grid-template-columns: 1fr;}
.card-csr .article-csr-content p{font-size: 12px; text-align: justify; font-weight: 400; font-stretch: normal; font-style: normal; line-height: 1.33; letter-spacing: normal; margin-bottom: 1.875rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;}
.popup-csr .article-csr-content p{font-size: 12px; text-align: justify; font-weight: 400;}


.card-news, .card-career{box-shadow: rgb(0 0 0 / 10%) 0px 4px 12px; border: 1px solid #e2e2e2; border-radius: var(--size-2); overflow: hidden; margin-bottom: var(--size-4);}
.news-source{background-color: var(--color-5); padding: var(--size-2) 24px;}
.news-source p{color: #D3D3D3; text-transform: uppercase; font-size: 12px;}
.news-source h3{ color: var(--color-6); text-transform: uppercase; font-weight: 700; font-size: var(--size-4); margin-top: var(--size-1);}
.news-content{background-color: var(--color-6); padding: 24px;}
.news-content p, 
.comp-name, .time-post{color: #A9A9A9; text-transform: uppercase; font-size: 12px;}
.news-content .subhead, 
.news-content p.sub-title{font-size: 14px;}
.news-content .subhead{font-weight: 700; color: var(--color-7);}
.news-link{margin-top: var(--size-2);}

.career-container{display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: var(--size-1);}
.career-position{font-size: 14px; color: var(--color-7); font-weight: 700; margin-top: var(--size-2); margin-bottom: var(--size-3);}
.card-career .head-content{display: flex;}  
.card-career .head-content:hover h3{color: var(--color-4); text-decoration: underline;}
.career-content{display: grid; justify-content: center; align-content: center; gap: var(--size-1);}
.comp-logo-frame{position: relative; width: 100%; display: flex; justify-content: center; align-items: center; padding: 20px; width: 120px; height: 120px;}

.detail-career-container{display: grid; grid-template-columns: 1fr; gap: var(--size-4);}
.career-content .title-job{font-size: var(--size-4); color: var(--color-5); font-weight: 700;}
.career-content .comp-career{font-size: 14px; text-transform: uppercase; color: var(--color-4); font-weight: 700;}
.general-requirement h4, .special-requirement h4{font-size: var(--size-4); color: var(--color-5); text-transform: capitalize; font-weight: 700; margin: var(--size-3) 0 var(--size-2);}
.general-requirement p, .special-requirement p{font-size: 14px; text-align: justify; margin-bottom: 4px;}
.barcode-job{display: flex; gap: var(--size-3); align-items: center;}
.barcode-item{position: relative; width: 120px; height: 120px;}
.barcode-item::before{display: block; content: ""; padding-top:100%; object-fit: cover;}
.barcode-item img{position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.barcode-info p{color: var(--color-4);}
.tagged-job p{color: var(--color-5);}
.img-career-frame{position: relative; width: 100%; border-radius: 12px; overflow: hidden;}
.img-career-frame::before{display: block; content: ""; padding-top:100%; object-fit: cover;}
.img-career-frame img{position: absolute; width: 100%; height: 100%; top: 0; left: 0;}

.side-container{display: grid; gap: var(--size-3); margin-bottom: var(--size-5);}
.title-side-section{display: grid;}
.title-side-section p{font-size: var(--size-4); color: var(--color-7); text-transform: uppercase;}
.title-side-section .line-side{width: 125px; height: 4px; background-color: var(--color-5); border-radius: 12px;}
.btn-apply-job{display: grid;}
.btn-apply-job button, .btn-apply-job a{background: var(--color-4); color: var(--color-2); padding: 10px 20px; width: 100%; text-align: center; border-radius: 12px;}
.btn-apply-job button:hover, .btn-apply-job a:hover{background-color: var(--color-fb); color: var(--color-2);}
.svg-container{display: flex;}

.list-type-business ul{display: flex; flex-wrap: wrap; gap: var(--size-4); justify-content: center;}
.list-type-business ul li{border: 1px solid #DEDEDE; padding: var(--size-1);}
.list-type-business ul li:hover{background-color: var(--color-5);}
.list-type-business ul li:hover a{color: var(--color-2);}

.list-business{padding-top: 60px;}
.subtitle-business-container{padding: 15px 15px 0; display: grid; gap: var(--size-3);}
.subtitle h3{font-size: 16px; text-transform: uppercase; font-weight: 700; color: var(--color-7);}
.line-subtitle{width: 40%; height: var(--size-1); border-radius: 12px; background-color: var(--color-5);}

.card-business-container{display: grid; padding: 15px; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(108px,1fr)); margin-top: var(--size-5);}
.card-item{background-color: #f5f5f5; position: relative; display: flex; justify-content: center; align-items: center; padding: 20px; width: 100%; border: .5px solid #b5b1c7;}
.card-item:after { content: ""; display: block; padding-bottom: 100%; }
.card-item:hover{cursor: pointer;}

.terms-container b{color: var(--color-7); font-weight: 700; text-transform: uppercase; margin-top: var(--size-4);}
.terms-container p{margin-bottom: var(--size-2); text-align: justify; }

@media screen and (min-width:0px) and (max-width:1023px){
  .desktop-only{display:none !important; visibility:hidden; content-visibility:hidden;}
  .desktop-only iframe[loading=lazy]{content-visibility:hidden !important;}
  
  
  .header-link[title="Logo"]{padding-left:var(--size-4);}
  .header-link[title="ToggleMenu"]{padding-right:var(--size-4);}
  
  .header-togglemenu{--hamburger-size:20px; --hamburder-line-height:4px; opacity:1 !important;}
  .header-togglemenu > span{position:relative; width:var(--hamburger-size); height:var(--hamburger-size);}
  .htm-line{--line-position:0px; position:absolute; left:0; width:var(--hamburger-size); height:var(--hamburder-line-height); background-color:#FFF;}
  .htm-line-1{top:var(--line-position);}
  .htm-line-2{top:calc((var(--hamburger-size) - var(--hamburder-line-height)) / 2);}
  .htm-line-3{bottom:var(--line-position);}
  
  
  
  .section-container{padding-left:var(--size-4); padding-right:var(--size-4);}
  
  
  
  .business-title{font-size:12px;}

  .other-job-container .career-content{padding: 0 var(--size-2);}
}





@media screen and (min-width:1024px){
  .mobile-only{display:none !important; visibility:hidden; content-visibility:hidden;}
  .mobile-only iframe[loading=lazy]{content-visibility:hidden !important;}
  
  
  
  .header-link[title="Logo"]{padding-left:0;}
  .header-link[title="CSR"]{padding-right:0;}
  
  .main-nav, .main-nav .header-link{position:static !important;}
  .main-nav{display:flex !important;}
  .main-nav .header-link > span{position:relative;}
  .main-nav .header-link > span:after{content:''; display:block; position:absolute; bottom:calc(var(--size-2) * -1); left:0; width:100%; height:var(--size-1); opacity:0;}
  
  
  
  .business-list{grid-template-columns:repeat(3,1fr); margin:0 auto; max-width:720px; grid-column-gap:var(--size-5);}
  .business-title{font-size:17px;}

  .section-about{height: 100vh; overflow-y: scroll; padding-right: 17px; box-sizing: content-box; -ms-overflow-style: none; scrollbar-width: none;}
  .section-about::-webkit-scrollbar{display: none;}

  .column{display: grid; grid-template-columns: 38% 1fr; justify-content: center; justify-items: center; gap: var(--size-5); }
  .profile-sticky{position: -webkit-sticky; position: sticky; top: 21%; padding-bottom: 0.1px;}

  .card-csr{display: grid; grid-template-columns: 40% 1fr; gap: var(--size-4);}
  
  .card-csr .subhead, .popup-csr .subhead{font-size: var(--size-4);}
  .title-page h1{font-size: var(--size-5);} 
  .card-csr .article-csr-content p,
  .popup-csr .article-csr-content p, 
  .csr-hastag, .csr-link{font-size: 12px;}

  .article-content p{font-size: 18px;}

  .card-news{display: grid; grid-template-columns: 20% 1fr; margin-bottom: var(--size-4);}
  .news-source{padding: 24px;}
  .news-source h3{font-size: 14px;}
  .news-content .subhead{font-size: 24px;}

  

  .subtitle-business-container{display: flex; align-items: center; justify-items: stretch; justify-content: space-evenly; width: 100%;}
  .subtitle h3{overflow-wrap: break-word; white-space: normal; font-size: 24px;}
  .line-subtitle{width: inherit;}
  .card-business-container{grid-template-columns: repeat(6, 1fr);}
  
  .career-container{grid-template-columns: 1fr 1fr;}
  .img-career-frame{width: 50%; margin-top: var(--size-3);}
  .comp-logo-frame{width: 180px; height: 180px;}
  .career-position{font-size: 18px;}
  .detail-career-container{grid-template-columns: 1fr 35%; gap: var(--size-5);}
  .career-content .title-job{font-size: var(--size-5);}
  .other-job-container .comp-logo-frame{width: 120px; height: 120px;}
  .other-job-container .career-position{font-size: 14px;}
  

}