- \n
- \n \n 회사개요\n \n \n
- \n \n 사업영역\n \n \n
- \n \n 지속가능경영활동\n \n \n
- \n \n 연혁\n \n \n
- \n \n KBDS Youtube\n \n \n
- \n KBDS FOCUS\n \n
- \n KBDS Live\n \n
- \n 일하는 방식\n \n
- \n 인재채용\n \n
- \n \n Blog\n \n \n
- \n
- \n
\n \n \n \n
\n \n - \n
- \n About\n \n
- \n Vision\n \n
- \n People\n \n
- \n \n Blog\n \n \n
- \n
- \n
- \n \n Global{\" \"}\n
\n \n \n
\n \n {props.option.post.youtubeLink ? (\n
\n \n
\n {/* content end */}\n {props.option.post.postDate || \"\"}
\n \n {/* {props.option.post.liveId} */}\n {props.option.post.postTitle || \"\"}\n
\n {props.option.summary}
\n \n{props.option.summary}
\n\n 우리는 항상 고객의 입장에서 생각하고 행동하며, 최고의\n 금융서비스를 제공함으로써 고객감동 실현을 위해 노력한다.\n
\n\n 우리는 투명하고 합리적인 경영을 통하여 그룹의 가치를\n 극대화함으로써 주주의 권익향상을 위해 최선을 다한다.\n
\n\n 우리는 제반 법규를 준수하고 다양한 문화와 가치를\n 존중하며, 국가경제와 사회의 발전 및 인류의 공존번영을 위해\n 노력한다.\n
\n\n 우리는 그룹의 정책방향을 공유하고, 계열사 상호간\n 신뢰를 바탕으로 그룹의 역량을 결집하여 그룹이 지속성장할 수 있도록\n 노력한다.\n
\n\n 우리는 항상 성실하고 정직하게 행동하며, 올바른\n 근무자세를 견지하여 모범적인 금융인의 표상이 된다.\n
\n\n 우리는 고객만족을 실현하기 위하여 항상 고객의\n 입장에서 생각하고 행동한다.\n
\n\n 우리는 합리적인 의사결정과 투명한 경영활동을 통하여\n 주주가치 극대화에 최선을 다한다.\n
\n\n 우리는 개개인의 자율과 창의를 존중하며 삶의 질 향상을\n 위해 노력한다.\n
\n\n 우리는 윤리적 가치관을 확립하고, 성실하고 올바른\n 직무자세 및 생활태도로 직장인으로서의 신뢰와 품위를 높인다.\n
\n\n 우리는 기업시민으로서의 사회적 책임을 다함으로써\n 국가와 사회발전에 이바지한다.\n
\n\n 제1장 고객에 대한 윤리\n 1. 고객우선\n
\n \n KB데이타시스템은 고객이 모든 행동의 최우선 기준임을 인식하고\n 항상 고객의 입장에서 생각하고 행동하며, 고객의 요구와 기대에\n 부응하는 최상의 금융 IT 서비스를 제공하여 고객감동을 위해\n 노력한다.\n
\n 2. 고객보호\n\n KB데이타시스템은 고객의 재산과 안전 및 개인정보를 보호하고\n 고객의 권익을 침해하는 어떠한 비도덕적, 비윤리적 행위도 하지\n 않는다.\n
\n 3. 고객예절\n\n KB데이타시스템의 모든 임직원은 진실하고 호의적인 태도로 업무에\n 임하며, 수준 높은 금융전문지식을 바탕으로 윤리적 마케팅 활동을\n 수행한다.\n
\n 제2장 주주와 투자자에 대한 윤리\n 1. 주주 및 투자자의 이익 극대화\n\n KB데이타시스템은 주주와 투자자의 권리를 보호하고, 주주와\n 투자자의 정당한 요구와 제안을 존중하며, 투명하고 합리적인\n 의사결정과 건전한 경영활동을 통하여 주주 및 투자자로부터 신뢰를\n 확보하며, 안정적인 수익을 창출하여 기업의 시장가치를 제고한다.\n
\n 2. 주주의 권익 보호\n\n KB데이타시스템은 모든 주주를 공정하고 평등하게 대우하며, 전체\n 주주의 이익을 고려하여 경영의사를 결정함으로써 주주의 이익이나\n 권리가 부당하게 침해되지 않도록 한다.\n
\n 3. 적극적인 정보제공\n\n KB데이타시스템은 일반적으로 인정된 회계원칙에 따라 회계자료를\n 기록·관리하고 재무상태와 경영성과를 투명하게 제공한다. 또한\n 정확한 경영정보를 관련법규에 따라 완전하고, 공평하며,\n 신속정확하고 이해가 가능하도록 적시에 공시하여 정보 이용자가\n 합리적인 투자 판단을 할 수 있도록 한다.\n
\n 제3장 국가와 사회에 대한 윤리\n 1. 국가 경제 및 사회발전에 기여\n\n KB데이타시스템은 국가경제에 기여하는 금융IT회사로서 고용의 창출\n 및 조세의 성실한 납부를 통해 국가경제 발전에 이바지한다. 또한\n 교육·문화예술 지원 및 기부·봉사활동 등 사회공헌활동을 실천하여\n 기업의 사회적 책임을 다한다.\n
\n 2. 재해예방 및 환경보호\n\n KB데이타시스템은 안전관련 제반 법규와 국내외 환경관련 법규를\n 준수하고 재해·위험의 예방관리 및 깨끗한 환경보전을 위해\n 노력한다.\n
\n 3. 정치관여금지\n\n KB데이타시스템은 특정정당이나 후보를 지지하는 의견을 표명하거나,\n 지원하는 행동으로 정치적 중립을 침해하는 행위를 하지 않으며,\n 각종 정치 또는 자선단체 기부금은 반드시 관련 법령을 준수하여\n 기부한다.\n
\n 제4장 경쟁사 및 거래업체에 대한 윤리\n 1. 국내외 법규의 준수\n\n KB데이타시스템은 국가 및 지역사회의 일원으로\n 부패·뇌물·자금세탁의 방지 등과 관련된 각종 법규를 준수할 뿐만\n 아니라, 국제사회의 구성원 으로서 국제협약·규정 등 국제적으로\n 통용되는 제반 규약과 현지국의 법규 및 문화와 관습을 존중한다.\n
\n 2. 다른 경쟁사와의 공정한 경쟁\n\n KB데이타시스템은 자유경쟁의 원칙에 따라 공정하고 자유로운\n 시장경제 질서를 존중하고 다른 경쟁사와 정당하게 경쟁하며 공정\n 거래 관련 법규를 준수한다.\n
\n 3. 거래업체와의 공정한 거래\n\n KB데이타시스템은 공정하고 투명한 업무수행을 통해 거래업체와\n 상호신뢰 및 협력관계를 구축함으로써 공동의 발전을 추구한다. 또한\n 우월적 지위를 이용하여 어떠한 형태의 부당한 요구도 하지 않으며,\n 청렴한 계약을 체결하고 준수한다.\n
\n 제5장 임직원에 대한 윤리\n 1. 인격존중과 공정한 대우\n\n KB데이타시스템은 임직원 개개인의 인격과 사생활을 존중하고,\n 지연·혈연·학연·성별·종교·연령·장애·혼인 여부에 따른 부당한\n 차별대우를 하지 않으며, 능력과 자질에 따라 평등한 기회를\n 부여하고 공정하게 평가한 성과에 의해 합리적으로 보상한다.\n
\n 2. 인재 육성\n\n KB데이타시스템은 임직원 개개인의 자율과 창의를 존중하고, 능력을\n 향상시킬 수 있는 직무기회를 공정하게 부여함으로써 직무만족도를\n 높이고, 업무전문성 제고를 위한 다양한 교육 프로그램을 운영하여\n 인재를 육성함과 동시에 임직원의 자아실현을 지원한다.\n
\n 3. 삶의 질 향상\n\n KB데이타시스템은 임직원을 회사의 가장 소중한 자산으로 여기고,\n 일과 삶이 조화를 이룰 수 있는 여건 마련과 직무수행에 따른 건강과\n 안전을 위한 쾌적한 근무환경을 조성한다. 또한 임직원의 독립적\n 인격과 기본권을 존중하며, 상호신뢰를 바탕으로 자유로운 제안과\n 건의를 할 수 있는 성숙한 조직문화를 만들기 위해 노력한다.\n
\n 제6장 임직원의 근무 윤리\n 1. 기본윤리준수\n\n 1.1. 임직원은 그룹의 경영이념을 공유하고 회사가 추구하는 목표와\n 가치 실현을 위해 각자에게 부여된 사명을 성실히 수행한다.\n
\n\n 1.2. 임직원은 파벌문화를 배척하며, 상하 및 동료간 상호존중과\n 원활한 의사소통을 바탕으로 하는 열린 조직문화를 만들어 간다.\n
\n\n 1.3. 임직원은 업무과 관련된 모든 회계처리를 일반적으로 인정되는\n 회계원칙에 의거 수행하여야 하며, 대내외 법규 및 회계원칙에 의거\n 완전하고 공평하며, 신속 정확하고 이해가 가능하도록 적시에\n 제공토록 한다.\n
\n\n 1.4. 임직원은 업무와 관련된 제반 법규를 준수하고, 사회의\n 기본가치 및 양심을 지키며 맡은 바 임무를 성실히 수행한다.\n
\n 2. 이해상충행위 금지\n\n 2.1. 임직원 개인과 회사의 이해 또는 회사 내 부서간의 이해가\n 상충될 경우에는 회사의 이익을 우선하여 행동 하여야 하며, 다른\n 부서의 업무에 부당하게 개입하거나 위법·부당한 거래를 알선하는\n 행위를 하여서는 아니된다.\n
\n\n 2.2. 임직원으로 활동하던 중 포착하게 된 사업기회는 회사에\n 우선적으로 귀속시켜야 한다.\n
\n\n 2.3. 임직원은 업무수행에 영향을 주거나 줄 가능성이 있는 대상에\n 대한 투자, 가까운 친인척 및 지인과의 거래, 외부강연 등으로 인한\n 개인적인 이해관계가 회사의 이익과 상충되지 않도록 하여야 하며,\n 이해관계의 상충이 예상되는 경우에는 윤리규범 담당부서 및\n 상사에게 사전에 이해상충과 관련된 모든 사실을 밝혀야 한다.\n
\n 3. 내부자 거래 등 불공정거래 금지\n\n 3.1. 임직원은 업무상 취득한 내부정보를 이용하여 유가증권의 매매,\n 시세조종, 미공개정보 이용행위 등 개인적인 이익을 위한\n 불공정거래를 하지 않는다.\n
\n\n 3.2. 임직원은 적법한 절차에 의하지 아니하고 주가에 영향을 미칠\n 수 있는 미공개 중요정보를 제3자에게 제공하지 않는다.\n
\n 4. 회사 재산의 보호\n\n 4.1. 임직원은 회사의 물적 재산, 지적재산권, 영업비밀 등 회사의\n 모든 유·무형의 자산을 회사의 가치증대를 위한 업무목적으로만\n 사용하여야 하며 개인적인 이익을 위하여 사용하지 않는다.\n
\n\n 4.2. 임직원은 회사자금 및 자산을 규정된 용도에 따라 회사가\n 승인한 목적만을 위해 합리적이고 투명하게 사용하여야 한다.\n
\n 5. 정보의 보호 및 보안 유지\n\n 5.1. 임직원은 업무수행 중 접한 공개되지 않은 정보를 적법하지\n 않은 방법으로 외부에 제공하여서는 아니되며, 권한 없는 제3자가\n 그러한 정보에 접근하지 못하게 적절히 통제하여야 하고, 만약,\n 제3자가 접근하거나 접근을 시도할 경우에는 즉시 관련부서에\n 보고하여야 한다.\n
\n\n 5.2. 신문, 방송 등 언론기관에의 정보제공은 정당한 권한을 부여\n 받은 임직원에 의해서만 제공되어야 한다.\n
\n 6. 금품 및 향응수수 금지\n\n 6.1. 임직원은 거래업체 등 이해관계자로부터 금품이나 향응을\n 제공받지 않으며, 또한 회사업무와 관련하여 이해관계자에게\n 위법하거나 사회통념상 인정되는 범위를 벗어나는 금품이나 향응을\n 제공하지 않는다.\n
\n6.2. 임직원 상호간에도 금품이나 향응을 수수하여서는 안된다.
\n 7. 정치관여 금지\n\n 7.1. 임직원은 근무시간 중에 정치활동을 하지 않으며 회사의 조직,\n 인력 및 재산을 정치적 목적으로 이용하지 않는다.\n
\n\n 7.2. 임직원 개개인의 참정권과 정치적 견해는 존중되어야 하나,\n 각자의 정치적 견해나 정치관여가 KB데이타시스템의 입장으로 오해\n 받지 않도록 해야 한다.\n
\n 8. 성희롱 등 금지\n\n 임직원은 지위를 이용하거나, 육체적·언어적·시각적인 행위을 통한\n 성희롱, 폭언, 폭행 등 일체의 무례하거나 위압적인 행위를 하지\n 않는다.\n
\n 9. 윤리규범의 준수\n\n 9.1. 임직원은 제반 윤리규범(헌장·강령·행동기준)을 성실히\n 준수하여야 하며, 이를 위반한 경우에는 해당 행위에 책임을 진다.\n
\n\n 9.2. 임직원은 제반 윤리규범 및 법령에 반하는 행위를 강요 받거나\n 그러한 부당한 행위를 인지하였을 경우에는 윤리규범 담당부서에\n 신고하여야 한다.\n
\n\n 9.3. 임직원의 윤리규범 위반행위 발생시 철저한 원인 규명과 교육을\n 통해 재발방지를 위해 노력하여야 한다.\n
\n\n 전문\n
\n \n 1. KB금융그룹은 아시아 금융을 선도하는 글로벌 금융그룹으로 지속\n 가능한 성장을 위해 노력하며, 상생의 동반자인 협력회사 (어떠한\n 명칭이든 그룹사에 직•간접으로 상품 및 서비스를 제공하는 조직이나\n 개인을 지칭함)가 가지는 가치를 존중합니다.\n
\n\n 2. KB금융그룹의 모든 그룹사는 사업유형 및 이행장소를 불문하고\n 각자의 협력회사에 본 행동기준의 자발적 이행을 권고할 수 있으며,\n 협력회사는 KB금융그룹이 사회적 책임 경영 원칙을 준수할 수 있도록\n 본 「협력회사 윤리행동기준」을 성실히 이행하여 주시기 바랍니다.\n
\n 제1장 근로기본권 존중 및 법령준수\n\n 1. 협력회사는 정신적•육체적 근로를 불문하고 근로자(계약직,\n 임시직 기타 모든 유형의 근로자 포함)에게 관련 법령에 반하는\n 근로나 고역(苦役)을 강요하여서는 안되며, 동료나 부하직원에게도\n 이를 위반하는 업무처리를 하도록 요구하거나 지시하지 않는다.\n
\n\n 2. 협력회사는 근로자의 사생활을 보호하고, 성희롱, 폭언, 폭행,\n 인신매매 등 인격적 존엄성을 해칠 우려가 있는 일체의 비인간적\n 행위를 하지 않는다.\n
\n\n 3. 협력회사는 관련법령이 정한 바에 따라, 15세 미만인 자를\n 근로자로 고용하지 않으며, 여성, 장애인 등 취약계층은 도덕상 또는\n 보건상 유해하거나 위험한 업무를 수행하지 않도록 한다.\n
\n\n 4. 협력회사는 관련법령이 정한 바에 따라, 근로시간을 준수하고\n 복리후생 제도를 운영하여야 하며, 최저임금 이상의 임금을 정해진\n 시기에 정당한 방법으로 지급한다.\n
\n\n 5. 협력회사는 근로자의 능력과 자질에 따라 공정한 기회를\n 부여하고, 개인의 역량과 성과에 따라 공정하게 평가•보상하며,\n 개인의 능력을 최대한 발휘할 수 있도록 교육의 기회를 제공하고,\n 국적, 인종, 종교, 출신지역, 학력, 성별, 연령 등을 이유로\n 부당하게 차별하지 않는다.\n
\n\n 6. 협력회사는 근로자(계약직, 임시직 기타 모든 유형의 근로계약자\n 포함)의 기본권을 존중하며, 기본권 침해를 방지하는 제도•절차를\n 운영하는 등 근로자의 인권을 보장하기 위하여 적극 노력한다.\n
\n 제2장 안전과 보건\n\n 1. 협력회사는 적절한 개인보호장비를 제공하고 위험통제장치를\n 설치하거나 안전한 작업절차를 마련하여 근로자의 안전에 위협이 될\n 수 위험요인을 제거하는데 최선을 다한다.\n
\n\n 2. 협력회사는 산업재해와 질병을 예방•관리할 수 있도록 근로자에게\n 위생적인 근무환경과 휴게공간을 제공하여야 하며, 과중한 피로와\n 스트레스 등으로 근로자의 건강이 손상되지 않도록 업무환경 개선에\n 지속적으로 노력한다.\n
\n 제3장 환경보호\n\n 1. 협력회사는 환경보호와 관련된 인허가 및 등록절차 등 국내외\n 법령과 국제협약을 성실히 준수한다.\n
\n\n 2. 협력회사는 인체에 유해하거나 환경오염을 유발하는 물질을\n 파악하고 안전하게 취급•관리하여야 하며, 폐기물 재활용, 저공해\n 대체재 사용, 친환경 자원활용 등을 통해 환경오염물질의 배출이\n 최소화될 수 있도록 최선을 다한다.\n
\n \n 제4장 시장 경쟁질서 준수 및 자신의 협력회사와의 상생\n \n\n 1. 협력회사는 자신의 경쟁회사와 입찰•가격담합, 경쟁회사의 미공개\n 정보 활용 등 불공정한 거래행위를 하지 않으며, 자유시장경쟁\n 질서를 준수하고 정직하고 투명하게 업무를 처리한다.\n
\n\n 2. 협력회사는 자신의 협력회사에게 우월적 지위를 이용하여 부당한\n 요구를 하거나 불공정한 행위를 강요하지 않으며, 상호이익과 공동의\n 발전을 추구하며 동반자적 관계의 성장을 위해 노력한다.\n
\n 제5장 협력회사의 준수 윤리\n\n 1. 협력회사는 임직원이 KB금융그룹 그룹사와 거래 시 공정하고\n 투명하게 업무를 처리하여 시장경제질서를 훼손하는 일이 없도록\n 통제하여야 하며, 또한, 이해관계자에게 금품•향응 또는 부당한 편익\n 등을 직간접으로 제공하거나 제공받지 않도록 적극적으로\n 관리•감독하는 등 KB금융그룹의 부정부패에 대한 무관용 원칙에 적극\n 협력한다.\n
\n\n 2. 협력회사는 KB금융그룹 그룹사가 시행하는 청렴계약제도를 철저히\n 준수하여야 한다.\n
\n\n 3. 협력회사는 관련 적용법규에 따라 고객을 비롯한 개인의 정보를\n 보호하며, 이를 위한 기술적•물리적 조치를 취한다.\n
\n\n 4. 협력회사는 국가와 사회의 가치관을 존중하고, 관련 법령을\n 준수하며, 사업활동의 기반이 되는 지역사회와 사회적 책임을\n 공유하며 지역사회 발전을 위해 적극 노력한다.\n
\n\n 직무와 관련하여 외부의 이해관계자로부터 금품 또는 향응을 수수하는\n 행위, 직위를 이용하여 부당한 이득을 얻거나 부정한 수단이나 의도를\n 가지고 사손을 끼치는 행위, 기타 외부 관계자와 관련된 비윤리적 행위\n 등에 대한 제보를 받으며, 사실에 근거하지 않는 비방, 개인 사생활과\n 관련된 사항은 처리되지 않습니다.\n
\n 신고채널
\n \n
\n \n 이메일{\" \"}\n whistle.kdg@kbfg.com\n
\n \n 전화번호 02-702-6002\n
\n - \n
- \n 개인정보처리방침\n \n
- \n 고객정보취급방침\n \n
- \n 입찰공고\n \n
- \n \n 윤리신고센터\n \n \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n \n KB금융그룹\n \n \n
\n \n
\n {props.children}
\n \n 전문적인 IT서비스
그룹IT혁신 및 가치 창출 \n
\n 그룹IT혁신 및 가치 창출
\n IT전문인력 집중 양성으로
그룹IT역량 강화에 기여 \n
\n 그룹IT역량 강화에 기여
\n 선진 IT 서비스 업체들과의 전략적
파트너십을 통한 핵심 기술력 확보 \n
\n \n ) : ''}\n 파트너십을 통한 핵심 기술력 확보
Value creation
\n\n 전문적인 IT서비스로 그룹IT
\n 혁신 및 가치 창출\n
Improving
\n\n IT전문인력 집중 양성으로 그룹IT
\n 역량 강화에 기여\n
Partnership
\n\n 선진 IT서비스 업체들과의 전략적
\n 파트너십등을 통한 핵심 기술력 확보\n
{slide.slider_desc}
\n\n Digital Transformation을\n
\n 소개합니다.\n
\n KB데이타시스템이 선도합니다.
\n\n
\n {/* - \n {props.items ? props.items.map((item, key) => ()) : ''}\n \n
\n \n \n \n \n \n \n setVideoShow((p) => !p)}\n />\n \n );\n}\n","import gsap from \"gsap\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport ScrollMagic from \"scrollmagic\";\nimport { ScrollMagicPluginGsap } from \"scrollmagic-plugin-gsap\";\nimport LoadInView from \"../../components/LoadInView\";\nimport MainContainer from \"../../components/MainContainer\";\nimport SectionBusiness from \"./components/SectionBusiness\";\nimport SectionDX from \"./components/SectionDX\";\nimport SectionESG from \"./components/SectionESG\";\nimport SectionMain from \"./components/SectionMain\";\nimport SectionMenu from \"./components/SectionMenu\";\nimport SectionOverview from \"./components/SectionOverview\";\nimport SectionRecruit from \"./components/SectionRecruit\";\nimport SectionStory from \"./components/SectionStory\";\nimport SectionVision from \"./components/SectionVision\";\nimport SectionWayWorking from \"./components/SectionWayworking\";\nimport { HomeWrapper } from \"./styled\";\n// import { motion } from 'framer-motion';\nimport { GetMainSections } from \"../../api/global\";\nimport SectionYoutube from \"../About/SectionYoutube\";\n\nScrollMagicPluginGsap(ScrollMagic, gsap);\n\nconst Home = () => {\n let topBoxEl = useRef(null);\n let sliderTitleEl = useRef(null);\n const [main_sections, set_main_sections] = useState(0);\n const [is_load, set_is_load] = useState(0);\n\n const scrollmagic = () => {\n var controller = new ScrollMagic.Controller();\n if (main_sections) {\n main_sections.map((item, key) => {\n switch (item.slug) {\n case \"overview\":\n var overview = new ScrollMagic.Scene({\n triggerElement: \"#overview\",\n duration: \"100%\",\n })\n .setClassToggle(\"#overview_nav\", \"active\")\n .addTo(controller);\n break;\n case \"business\":\n var business = new ScrollMagic.Scene({\n triggerElement: \"#business\",\n duration: \"100%\",\n })\n .setClassToggle(\"#business_nav\", \"active\")\n .addTo(controller);\n break;\n case \"dx\":\n var dx = new ScrollMagic.Scene({\n triggerElement: \"#dx\",\n duration: \"100%\",\n })\n .setClassToggle(\"#dx_nav\", \"active\")\n .addTo(controller);\n break;\n case \"vision\":\n var vision = new ScrollMagic.Scene({\n triggerElement: \"#vision\",\n duration: \"100%\",\n })\n .setClassToggle(\"#vision_nav\", \"active\")\n .addTo(controller);\n break;\n case \"wayworking\":\n var wayworking = new ScrollMagic.Scene({\n triggerElement: \"#wayworking\",\n duration: \"100%\",\n })\n .setClassToggle(\"#wayworking_nav\", \"active\")\n .addTo(controller);\n break;\n case \"busirecruitness\":\n var recruit = new ScrollMagic.Scene({\n triggerElement: \"#recruit\",\n duration: \"100%\",\n })\n .setClassToggle(\"#recruit_nav\", \"active\")\n .addTo(controller);\n break;\n case \"esg\":\n var esg = new ScrollMagic.Scene({\n triggerElement: \"#esg\",\n duration: \"100%\",\n })\n .setClassToggle(\"#esg_nav\", \"active\")\n .addTo(controller);\n break;\n case \"youtube\":\n var youtube = new ScrollMagic.Scene({\n triggerElement: \"#youtube\",\n duration: \"100%\",\n })\n .setClassToggle(\"#youtube_nav\", \"active\")\n .addTo(controller);\n break;\n case \"story\":\n var story = new ScrollMagic.Scene({\n triggerElement: \"#story\",\n duration: \"100%\",\n })\n .setClassToggle(\"#story_nav\", \"active\")\n .addTo(controller);\n break;\n default:\n return;\n }\n });\n }\n };\n useEffect(() => {\n if (!is_load) {\n GetMainSections()\n .then((response) => {\n if (response.data.code == \"200\") {\n set_main_sections(response.data.body);\n set_is_load(1);\n scrollmagic();\n }\n })\n .catch((err) => {\n console.log(err);\n set_is_load(1);\n });\n }\n });\n return (\n \n \n \n \n );\n case \"business\":\n return (\n \n \n );\n case \"dx\":\n return (\n \n \n );\n case \"vision\":\n return (\n \n \n );\n\n case \"wayworking\":\n return (\n \n \n );\n case \"recruit\":\n return (\n \n \n );\n case \"esg\":\n return (\n \n \n );\n case \"youtube\":\n return (\n \n \n );\n case \"story\":\n return (\n \n \n );\n default:\n return;\n }\n })\n : \"\"}\n \n \n );\n};\n\nexport default Home;\n","import styled, { keyframes } from \"styled-components\";\nimport { Container, ResponsiveBr } from \"../../components/Grid/styled\";\n\nexport const HomeWrapper = styled.div`\n height: 100%;\n position: relative;\n\n .qr {\n position: fixed;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n display: none;\n z-index: 999998;\n &.active {\n display: block;\n }\n }\n\n .overlay {\n width: 100%;\n max-width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.2);\n z-index: 10000000;\n position: fixed;\n top: 0px;\n left: 0px;\n display: none;\n cursor: pointer;\n &.active {\n display: block;\n }\n }\n\n .inner {\n position: relative;\n z-index: 32819913893289;\n max-width: 340px;\n width: 100%;\n height: 500px;\n top: 50%;\n left: 50%;\n text-align: center;\n transform: translate(-50%, -50%);\n img {\n width: 100%;\n height: auto;\n }\n }\n\n @media ${(props) => props.theme.laptop} {\n }\n @media ${(props) => props.theme.tablet} {\n }\n @media ${(props) => props.theme.mobile} {\n .inner {\n max-width: 340px;\n width: calc(100% - 40px);\n height: 500px;\n max-height: calc(100vh - 60px);\n img {\n max-width: 340px;\n width: auto;\n height: 100%;\n }\n }\n }\n @media (max-width: 380px) {\n .inner {\n img {\n width: 100%;\n height: auto;\n }\n }\n }\n`;\n\nexport const TopBoxWrapper = styled.div`\n /* margin-bottom: 190px; */\n @media ${(props) => props.theme.laptop} {\n .section-wrap {\n height: auto;\n position: absolute;\n bottom: 150px;\n }\n }\n @media ${(props) => props.theme.tablet} {\n width: 100%;\n /* margin-bottom: 100px; */\n .section-wrap {\n height: auto;\n position: absolute;\n bottom: 190px;\n }\n }\n @media ${(props) => props.theme.mobile} {\n margin-bottom: 0px;\n .section-wrap {\n height: auto;\n position: absolute;\n bottom: 80px;\n padding: 0px 20px;\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n left: 0px;\n }\n .slick-prev,\n .slick-next {\n display: none !important;\n }\n }\n`;\n\nexport const TimeLineWrapper = styled.div`\n margin-bottom: 30px;\n display: inline-block;\n position: relative;\n z-index: 2;\n span {\n font-family: \"KBFG Text\";\n font-style: normal;\n font-weight: 500;\n font-size: 13px;\n line-height: 19px;\n color: #ffffff;\n text-shadow: 0px 4px 13px rgba(0, 0, 0, 0.12);\n margin-right: 10px;\n }\n div {\n display: inline-block;\n margin-bottom: 4px;\n }\n @media ${(props) => props.theme.laptop} {\n }\n @media ${(props) => props.theme.tablet} {\n margin-top: 110px;\n margin-bottom: 20px;\n }\n @media ${(props) => props.theme.mobile} {\n margin-top: 0px;\n margin-bottom: 42px;\n span {\n display: block;\n }\n }\n`;\n\nexport const TimeLine = styled.div`\n display: inline-block;\n position: relative;\n background: #fff;\n width: 240px;\n height: 3px;\n background: rgba(255, 255, 255, 0.3);\n border-radius: 10px;\n :after {\n display: block;\n position: absolute;\n content: \"\";\n background: rgba(255, 255, 255, 0.8);\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n .slick-active > div & {\n animation: timeline 7s;\n -webkit-animation-timing-function: linear;\n animation-timing-function: linear;\n }\n @keyframes timeline {\n 0% {\n width: 0px;\n }\n 100% {\n width: 240px;\n }\n }\n ${(props) => {\n if (props.isplay) {\n return `\n {\n animation-play-state: paused;\n }\n `;\n } else {\n return `\n `;\n }\n }}\n }\n @media ${(props) => props.theme.laptop} {\n }\n @media ${(props) => props.theme.tablet} {\n width: 170px;\n :after {\n @keyframes timeline {\n 0% {\n width: 0px;\n }\n 100% {\n width: 170px;\n }\n }\n }\n }\n @media ${(props) => props.theme.mobile} {\n }\n`;\n\nexport const Playbutton = styled.div`\n display: block;\n position: absolute;\n top: 4px;\n right: -19px;\n\n div.s {\n display: inline-block;\n background: none;\n width: 3px;\n height: 10px;\n }\n div.l {\n display: inline-block;\n background: #fff;\n width: 3px;\n height: 10px;\n }\n ${(props) => {\n if (props.isplay) {\n return `\n \n & > div.s {\n border-top: 5px solid transparent;\n border-right: 0px solid transparent;\n border-bottom: 5px solid transparent;\n border-left: 9px solid #fff;\n }\n\n & > div.l {\n display: none;\n }\n\n `;\n } else {\n return `\n\n `;\n }\n }}\n @media ${(props) => props.theme.laptop} {\n }\n @media ${(props) => props.theme.tablet} {\n }\n @media ${(props) => props.theme.mobile} {\n right: 0;\n }\n`;\n\nexport const TopBox = styled.div`\n position: relative;\n border-radius: 0px 50px;\n width: 100%;\n height: 80vh;\n background-image: url(${(props) => props.image});\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n padding: 0 0;\n\n & > div {\n height: 100%;\n display: flex;\n align-items: center;\n /* justify-content: center; */\n }\n :after {\n display: block;\n position: absolute;\n content: \"\";\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.2);\n border-radius: 0px 50px;\n z-index: 1;\n }\n h2 {\n position: relative;\n font-family: \"KBFG Display\";\n font-style: normal;\n font-weight: 600;\n font-size: 50px;\n line-height: 67px;\n color: #ffffff;\n text-shadow: 0px 4px 14px rgba(0, 0, 0, 0.29);\n margin-bottom: 20px;\n z-index: 2;\n /* transform: translate(0,100px); */\n /* opacity: 0; */\n\n /* transition: transform 1s, opacity 1s; */\n }\n &.on h2 {\n position: relative;\n transform: translate(0, 0);\n opacity: 1;\n z-index: 2;\n }\n p {\n position: relative;\n font-family: \"KBFG Display\";\n font-style: normal;\n font-weight: 300;\n font-size: 18px;\n line-height: 30px;\n color: #ffffff;\n text-shadow: 0px 2px 14px rgba(0, 0, 0, 0.3);\n margin-bottom: 45px;\n z-index: 2;\n }\n a {\n position: relative;\n margin-left: 20px;\n z-index: 2;\n }\n @media ${(props) => props.theme.laptop} {\n height: 600px;\n padding-top: 150px;\n padding-left: 60px;\n h2 {\n font-size: 52px;\n }\n }\n @media ${(props) => props.theme.tablet} {\n height: 90vh;\n padding-left: 0;\n border-radius: 0px;\n background-attachment: scroll;\n h2 {\n font-size: 50px;\n line-height: 72px;\n margin-bottom: 10px;\n }\n p {\n font-size: 22px;\n margin-bottom: 35px;\n }\n :after {\n border-radius: 0 0;\n }\n }\n @media ${(props) => props.theme.mobile} {\n height: 85vh;\n min-height: 560px;\n padding: 0 0;\n h2 {\n font-size: 28px;\n line-height: 36px;\n color: #f3f3f3;\n text-shadow: 0px 4px 16px rgba(0, 0, 0, 0.24);\n margin-bottom: 20px;\n }\n p {\n color: #f3f3f3;\n text-shadow: 0px 4px 16px rgba(0, 0, 0, 0.24);\n margin-bottom: 40px;\n line-height: 25px;\n font-size: 14px;\n }\n a {\n font-size: 16px;\n color: #f3f3f3;\n }\n :after {\n border-radius: 0 0;\n }\n }\n @media (max-width: 400px) {\n ${Container} {\n padding: 0 10px;\n }\n }\n`;\n\nexport const SectionTitle = styled.h3`\n margin-bottom: 20px;\n display: block;\n font-family: \"KBFG Display\";\n font-style: normal;\n font-weight: 600;\n font-size: 36px;\n line-height: 160%;\n color: #000000;\n small {\n display: block;\n font-family: \"KBFG Display\";\n font-style: normal;\n font-weight: 600;\n margin-bottom: 10px;\n font-size: 20px;\n line-height: 25px;\n color: #ffbc00;\n }\n @media ${(props) => props.theme.laptop} {\n }\n @media ${(props) => props.theme.tablet} {\n small {\n }\n }\n @media ${(props) => props.theme.mobile} {\n font-size: 22px;\n line-height: 140%;\n margin-bottom: 0px;\n small {\n line-height: 24px;\n font-size: 15px;\n }\n }\n`;\n\nexport const TextArea = styled(Container)`\n position: relative;\n &.on ${SectionTitle} {\n transform: translate(0, 0);\n opacity: 1;\n }\n @media ${(props) => props.theme.laptop} {\n ${SectionTitle} {\n padding-left: 20px;\n }\n }\n @media ${(props) => props.theme.tablet} {\n ${SectionTitle} {\n padding-left: 0px;\n }\n }\n`;\n\nexport const SectionSummary = styled.h4`\n position: relative;\n display: block;\n font-family: \"KBFG Display\";\n font-style: normal;\n font-weight: 300;\n font-size: 17px;\n line-height: 37px;\n color: #777777;\n @media ${(props) => props.theme.laptop} {\n padding-left: 20px;\n }\n @media ${(props) => props.theme.tablet} {\n padding-left: 0px;\n }\n @media ${(props) => props.theme.mobile} {\n font-size: 14px;\n line-height: 26px;\n }\n`;\n\nexport const SectionSubSummary = styled.p`\n margin-top: 16px;\n font-family: \"KBFG Display\";\n font-style: normal;\n font-weight: 300;\n font-size: 17px;\n line-height: 37px;\n color: #777777;\n`;\n\nexport const Seemore = styled.div`\n display: block;\n line-height: 32px;\n text-align: center;\n margin-top: 20px;\n @media ${(props) => props.theme.laptop} {\n }\n\n @media ${(props) => props.theme.tablet} {\n }\n\n @media ${(props) => props.theme.mobile} {\n display: block;\n position: relative;\n font-size: 18px;\n line-height: 23px;\n margin-top: 40px;\n }\n`;\n\nexport const OverviewFigure = styled.div`\n position: absolute;\n width: 400px;\n height: 400px;\n right: 80px;\n top: 0px;\n z-index: -1;\n transition: 3s;\n div {\n position: relative;\n width: 400px;\n height: 400px;\n border: 1px dashed #ffbc00;\n box-sizing: border-box;\n border-radius: 50%;\n transition: 3s;\n }\n`;\n\nexport const OverviewWrapper = styled.div`\n position: relative;\n overflow: hidden;\n padding-top: 150px;\n ${OverviewFigure}:nth-of-type(2) {\n top: 400px;\n left: -100px;\n width: 600px;\n height: 600px;\n div {\n width: 600px;\n height: 600px;\n }\n }\n @media ${(props) => props.theme.laptop} {\n padding-top: 140px;\n }\n @media ${(props) => props.theme.tablet} {\n padding-top: 100px;\n }\n @media ${(props) => props.theme.mobile} {\n margin-top: -5px;\n border-top: 15px solid #eee;\n padding-top: 90px;\n overflow: hidden;\n & > ${Container}:nth-of-type(2) {\n padding: 0 0;\n }\n }\n`;\n\nexport const ESGFigure = styled.div``;\nexport const ESGFigures = styled.div`\n ${ESGFigure} {\n position: absolute;\n width: 600px;\n height: 600px;\n right: -80px;\n top: -80px;\n z-index: -1;\n transition: 3s;\n div {\n position: relative;\n width: 600px;\n height: 600px;\n border: 1px dashed #ffbc00;\n box-sizing: border-box;\n border-radius: 50%;\n transition: 3s;\n }\n }\n ${ESGFigure}:nth-of-type(2) {\n top: 400px;\n left: -100px;\n width: 600px;\n height: 600px;\n div {\n width: 600px;\n height: 600px;\n }\n }\n @media ${(props) => props.theme.mobile} {\n ${ESGFigure}:nth-of-type(2) {\n }\n }\n`;\n\n/* \nNEW ESG\n*/\nexport const ESGSliderWraaper = styled.div`\n margin-bottom: 0px;\n position: relative;\n height: 700px;\n overflow: hidden;\n &:after {\n content: \"\";\n display: block;\n height: 250px;\n width: 100%;\n position: absolute;\n background-image: url(${(props) => props.theme.image_url}/common/esg_wave_line.png);\n z-index: -1;\n top: 45%;\n left: 0px;\n @media ${(props) => props.theme.mobile} {\n display: none;\n }\n }\n @media ${(props) => props.theme.mobile} {\n overflow-x: scroll;\n overflow-y: hidden;\n height: 400px;\n }\n`;\n\nexport const ESGSliderStyle = styled.div`\n margin-top: 24px;\n width: 3400px;\n position: absolute;\n margin-left: -308px;\n top: 0px;\n @media ${(props) => props.theme.mobile} {\n margin-top: 40px;\n margin-left: 0px;\n width: 3220px;\n }\n`;\n\nconst floatAnimation = keyframes`\n 0% {\n transform: translateY(30px);\n }\n 50% {\n transform: translateY(-30px);\n }\n 100% {\n transform: translateY(30px);\n }\n`;\nexport const ESGCardWrapper = styled.div`\n padding: 0px;\n padding-bottom: 0px;\n width: 268px;\n height: 530px;\n display: inline-block;\n position: absolute;\n left: ${(props) => props.index * 334}px;\n top: 0;\n &:hover {\n span:first-child {\n color: #ffbc00;\n }\n }\n animation: 7s ${floatAnimation} infinite;\n animation-delay: ${(props) => (props.index || 0) * 250}ms;\n will-change: transform;\n animation-fill-mode: backwards;\n animation-timing-function: ease;\n @media ${(props) => props.theme.mobile} {\n position: relative;\n vertical-align: top;\n display: inline-block;\n width: 300px;\n height: 340px;\n padding-left: 20px;\n left: auto !important;\n animation: none;\n border-radius: 50%;\n top: 0px !important;\n margin-right: 20px;\n }\n`;\n\nexport const ESGtext = styled.div`\n position: absolute;\n top: 50%;\n width: 100%;\n text-align: center;\n font-family: \"KBFG Display\";\n font-style: normal;\n font-weight: 600;\n font-size: 21px;\n padding: 0px 20px;\n line-height: 36px;\n color: #fff;\n transition: 0.3s;\n @media ${(props) => props.theme.mobile} {\n top: 42%;\n span {\n line-height: 30px;\n }\n span:last-child {\n display: block;\n position: relative;\n }\n }\n`;\n\nexport const ESGimg = styled.div`\n width: 100%;\n height: 530px;\n background-image: url(${(props) => props.theme.image_url}/common/${(props) => props.image});\n background-size: cover;\n background-position: center center;\n border-radius: 55px;\n :after {\n content: \"\";\n display: block;\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.3);\n border-radius: 55px;\n }\n @media ${(props) => props.theme.mobile} {\n margin-bottom: 11px;\n height: 300px;\n width: 300px;\n border-radius: 50%;\n position: relative;\n :after {\n border-radius: 50%;\n }\n }\n`;\n\nexport const InterviewBoxWrapper = styled.div`\n padding: 60px 0px 150px 234px;\n @media ${(props) => props.theme.laptop} {\n padding: 40px 24px 140px 150px;\n }\n @media ${(props) => props.theme.tablet} {\n padding: 40px 0px 100px 150px;\n }\n @media ${(props) => props.theme.mobile} {\n padding: 30px 0px 90px 0px;\n border-bottom: 15px solid #eee;\n }\n`;\n\nexport const InterviewBox = styled.div`\n width: 100%;\n overflow: hidden;\n height: 0px;\n padding-bottom: 56.25%;\n position: relative;\n iframe {\n width: 100% !important;\n height: 100% !important;\n position: absolute;\n }\n .video-react {\n width: 100% !important;\n height: 100% !important;\n position: absolute;\n }\n .video-react .video-react-big-play-button {\n z-index: -1;\n }\n\n @media ${(props) => props.theme.tablet} {\n }\n @media ${(props) => props.theme.mobile} {\n }\n`;\n\nexport const InterviewText = styled.div`\n margin-top: 15px;\n margin-bottom: 0px;\n font-family: \"KBFG Display\";\n font-style: normal;\n font-weight: 300;\n font-size: 14px;\n line-height: 17px;\n color: #515151;\n span {\n float: right;\n font-family: \"KBFG Display\";\n color: #ffbc00;\n }\n ${(props) =>\n props.type == \"mobile\"\n ? `margin-top: 0px;\n margin-bottom: 15px;`\n : ``}\n @media ${(props) => props.theme.mobile} {\n padding: 0 20px;\n }\n`;\n\nexport const BusinessSection = styled.div`\n margin: 0px 0px 0 0px;\n padding-top: 150px;\n padding-bottom: 150px;\n background: #f7f7f7;\n ${TextArea} {\n a {\n display: none;\n }\n }\n @media ${(props) => props.theme.laptop} {\n padding-top: 140px;\n padding-bottom: 140px;\n }\n @media ${(props) => props.theme.tablet} {\n padding-top: 100px;\n padding-bottom: 100px;\n ${SectionTitle} {\n margin-bottom: 10px;\n }\n }\n @media ${(props) => props.theme.mobile} {\n padding-top: 90px;\n padding-bottom: 90px;\n border-bottom: 15px solid #eee;\n background: #fff;\n position: relative;\n }\n`;\n\nexport const SeemoreContainer = styled.div``;\n\nexport const BusinessContentWrapper = styled.div`\n margin-top: 85px;\n position: relative;\n ${SeemoreContainer} {\n text-align: center;\n margin-top: 69px;\n }\n @media ${(props) => props.theme.laptop} {\n padding-left: 23px;\n }\n @media ${(props) => props.theme.tablet} {\n padding-left: 0px;\n ${SeemoreContainer} {\n text-align: center;\n margin-top: 0px;\n }\n }\n @media ${(props) => props.theme.mobile} {\n margin-top: 60px;\n /* overflow-x: hidden; */\n ${SeemoreContainer} {\n display: block;\n margin-top: 40px;\n text-align: center;\n }\n }\n`;\n\nexport const BusinessContent = styled.div`\n min-height: 240px;\n & > div {\n display: inline-block;\n vertical-align: top;\n transition: 0.5s;\n position: absolute;\n :hover {\n transform: translateY(-10px);\n }\n }\n div > div {\n width: 447px;\n /* height: 241px; */\n padding: 84px 0;\n display: inline-block;\n box-shadow: 4px 4px 20px rgba(205, 205, 205, 0.35);\n border-radius: 220px;\n font-family: \"KBFG Display\";\n font-weight: 600;\n font-style: normal;\n font-size: 20px;\n line-height: 36px;\n text-align: center;\n position: absolute;\n transition: 0.3s;\n }\n div:nth-of-type(1) > div {\n position: relative;\n background: rgba(255, 255, 255, 0.88);\n color: #1a1a1a;\n }\n div:nth-of-type(2) > div {\n left: 0px;\n background: rgba(136, 136, 136, 0.83);\n color: #fff;\n transition: 1s;\n }\n div:nth-of-type(3) > div {\n left: 0px;\n background: rgba(96, 88, 76, 0.88);\n color: #fff;\n transition: 1s;\n }\n div:nth-of-type(1) {\n z-index: 1;\n }\n div:nth-of-type(2) {\n z-index: 2;\n }\n div:nth-of-type(3) {\n z-index: 3;\n }\n @media ${(props) => props.theme.laptop} {\n div > div {\n width: 400px;\n }\n }\n @media ${(props) => props.theme.tablet} {\n div > div {\n width: 340px;\n padding: 60px 0px;\n font-size: 18px;\n line-height: 30px;\n }\n }\n @media ${(props) => props.theme.mobile} {\n & > div {\n position: static;\n width: 100%;\n pointer-events: none;\n }\n div > div {\n position: relative;\n padding: 44px 0;\n width: 100%;\n font-size: 17px;\n line-height: 162.5%;\n margin-top: -30px;\n }\n div:nth-of-type(1) > div {\n background: rgba(255, 255, 255, 0.95);\n border: 1px solid #eee;\n }\n div:nth-of-type(2) > div {\n background: #888888;\n opacity: 0.95;\n }\n div:nth-of-type(3) > div {\n background: #70695f;\n opacity: 0.95;\n }\n }\n`;\n\nexport const CardSection = styled.div`\n padding: 70px 268px 177px 268px;\n`;\n\nexport const CenterSeemore = styled.div`\n text-align: center;\n margin-top: 52px;\n font-family: \"KBFG Text\";\n font-style: normal;\n font-size: 17px;\n line-height: 22px;\n position: relative;\n img {\n padding: 8px;\n background: #f7f7f7;\n border-radius: 50%;\n margin-left: 8px;\n position: absolute;\n top: -2px;\n }\n`;\n\nexport const CardWrapper = styled.div`\n padding: 100px 66px 76px 66px;\n height: 387px;\n margin: 0px -15px;\n background-image: url(${(props) => props.theme.image_url}/common/businessbg.png);\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n`;\n\nexport const DXWrapper = styled.div`\n padding-top: 150px;\n padding-bottom: 150px;\n ${TextArea} {\n a {\n display: none;\n }\n }\n @media ${(props) => props.theme.laptop} {\n padding-top: 140px;\n padding-bottom: 140px;\n }\n @media ${(props) => props.theme.tablet} {\n padding-top: 100px;\n padding-bottom: 100px;\n }\n @media ${(props) => props.theme.mobile} {\n padding-top: 90px;\n padding-bottom: 90px;\n border-bottom: 15px solid #eee;\n ${SectionSummary} {\n margin-bottom: 40px;\n }\n }\n`;\n\nexport const DXBoxWrapper = styled.div`\n margin-top: 50px;\n margin-bottom: 50px;\n padding: 60px 0px 42px 0px;\n height: 400px;\n position: relative;\n overflow: hidden;\n video {\n width: 100%;\n height: 320%;\n position: absolute;\n top: -450px;\n left: 0px;\n display: block;\n }\n`;\n\nexport const DXBackground = styled.div`\n background-image: url(${(props) => props.theme.image_url}/common/vision_dx.jpg);\n background-position: center center;\n background-size: cover;\n background-repeat: no-repeat;\n width: 100%;\n height: 300px;\n margin-bottom: 20px;\n\n @media ${(props) => props.theme.mobile} {\n height: 250px;\n }\n`;\n\nexport const DXContentWrapper = styled.div`\n ${SeemoreContainer} {\n text-align: center;\n }\n @media ${(props) => props.theme.mobile} {\n ${SeemoreContainer} {\n display: block;\n text-align: center;\n }\n }\n`;\n\nexport const DXContent = styled.div`\n margin-bottom: 80px;\n padding: 0 0px;\n text-align: right;\n div:nth-of-type(-n + 2) {\n /* margin-right: 181px; */\n }\n div {\n :after {\n display: block;\n position: absolute;\n top: 6px;\n left: -5px;\n padding-left: 70px;\n font-family: \"KBFG Display\";\n font-style: normal;\n font-weight: 600;\n font-size: 84px;\n line-height: 104px;\n color: #eeeeee;\n z-index: -1;\n }\n }\n & > div:nth-of-type(1) {\n :after {\n content: \"01\";\n }\n }\n & > div:nth-of-type(2) {\n :after {\n content: \"02\";\n }\n }\n & > div:nth-of-type(3) {\n :after {\n content: \"03\";\n }\n }\n @media ${(props) => props.theme.tablet} {\n margin-bottom: 70px;\n div {\n :after {\n font-size: 86px;\n line-height: 107px;\n padding-left: 36px;\n }\n }\n }\n @media ${(props) => props.theme.mobile} {\n margin-bottom: 30px;\n div {\n :after {\n font-size: 86px;\n line-height: 107px;\n top: 0px;\n }\n }\n }\n`;\n\nexport const DXContentbox = styled.div`\n display: inline-block;\n position: relative;\n width: 33.3%;\n height: 100%;\n padding-left: 70px;\n vertical-align: top;\n text-align: left;\n h4 {\n font-family: \"KBFG Display\";\n font-style: normal;\n font-size: 28px;\n line-height: 36px;\n color: #000000;\n margin-top: 59px;\n }\n p {\n font-family: \"KBFG Display\";\n font-style: normal;\n font-weight: 300;\n font-size: 16px;\n line-height: 35px;\n color: #888888;\n margin-top: 13px;\n }\n @media ${(props) => props.theme.tablet} {\n padding-left: 36px;\n p {\n font-size: 18px;\n line-height: 34px;\n }\n }\n @media ${(props) => props.theme.mobile} {\n width: 100%;\n padding-left: 0px;\n &:after {\n padding-left: 0px !important;\n }\n h4 {\n font-size: 22px;\n line-height: 30px;\n }\n p {\n font-size: 14px;\n line-height: 26px;\n }\n }\n`;\n\nexport const VisionWrapper = styled.div`\n background-image: url(${(props) => props.theme.image_url}/common/stratgybg.png);\n background-attachment: fixed;\n background-size: cover;\n @media ${(props) => props.theme.laptop} {\n background-attachment: scroll;\n }\n @media ${(props) => props.theme.tablet} {\n background-attachment: scroll;\n }\n @media ${(props) => props.theme.mobile} {\n border-bottom: 15px solid #eee;\n }\n`;\n\nexport const VisionButton = styled.div`\n margin-top: 60px;\n text-align: center;\n display: block;\n position: relative;\n @media ${(props) => props.theme.talbet} {\n }\n @media ${(props) => props.theme.mobile} {\n margin-top: 20px;\n }\n`;\n\nexport const VisionBox = styled.div`\n padding-top: 150px;\n padding-bottom: 150px;\n margin-bottom: 0px;\n ${TextArea} {\n margin-bottom: 60px;\n }\n ${SectionTitle} {\n position: relative;\n color: #fff;\n }\n @media ${(props) => props.theme.laptop} {\n padding-top: 140px;\n padding-bottom: 140px;\n ${SectionTitle} {\n padding-left: 0px;\n }\n }\n @media ${(props) => props.theme.tablet} {\n padding-top: 100px;\n padding-bottom: 100px;\n ${TextArea} {\n padding-left: 0;\n padding-right: 0;\n margin-bottom: 40px;\n }\n }\n @media ${(props) => props.theme.mobile} {\n padding-top: 90px;\n padding-bottom: 90px;\n ${TextArea} {\n padding-left: 0;\n padding-right: 0;\n margin-bottom: 30px;\n }\n }\n`;\n\nexport const VisionContent = styled.div`\n text-align: center;\n & > div {\n display: inline-block;\n width: 440px;\n height: 440px;\n padding: 150px 50px;\n margin-left: -20px;\n margin-right: -20px;\n text-align: center;\n transition: 0.3s;\n border-radius: 50%;\n position: relative;\n }\n .rot {\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n border: 1px dashed white;\n text-align: center;\n transition: 0.3s;\n border-radius: 50%;\n }\n & > div:hover .rot {\n animation: rotation 2s infinite linear;\n }\n\n @keyframes rotation {\n from {\n -webkit-transform: rotate(0deg);\n }\n to {\n -webkit-transform: rotate(359deg);\n }\n }\n div:hover {\n background: rgba(0, 0, 0, 0.4);\n }\n div:nth-child(2) > .rot {\n background: rgba(0, 0, 0, 0.4);\n }\n figure {\n position: relative;\n z-index: 1;\n h4,\n p {\n color: #fff;\n }\n h4 {\n margin-bottom: 13px;\n font-size: 33px;\n line-height: 40px;\n }\n p {\n font-size: 18px;\n line-height: 34px;\n }\n }\n @media ${(props) => props.theme.laptop} {\n & > div {\n width: 370px;\n height: 370px;\n padding: 125px 35px;\n }\n figure {\n p {\n font-size: 16px;\n line-height: 30px;\n }\n }\n }\n @media ${(props) => props.theme.tablet} {\n & > div {\n text-align: center;\n width: 270px;\n height: 270px;\n padding: 80px 32px;\n margin-left: -10px;\n margin-right: -10px;\n }\n figure {\n h4 {\n font-size: 28px;\n line-height: 37px;\n }\n p {\n font-size: 16px;\n line-height: 30px;\n }\n }\n ${ResponsiveBr} {\n display: inline-block;\n }\n & > div:nth-of-type(2) {\n p:after {\n display: block;\n content: \"block\";\n opacity: 0;\n }\n }\n }\n @media ${(props) => props.theme.mobile} {\n padding: 0px;\n & > div {\n border: 1px solid #fff;\n width: 100%;\n height: auto;\n padding: 30px 30px;\n margin-bottom: 20px;\n border-radius: 0px;\n }\n figure {\n h4 {\n font-size: 24px;\n line-height: 30px;\n margin-bottom: 6;\n }\n p {\n font-size: 16px;\n line-height: 26px;\n }\n }\n .rot {\n display: none;\n }\n div:nth-child(2) {\n background: transparent;\n :hover {\n background: rgba(0, 0, 0, 0.4);\n }\n }\n & > div:nth-of-type(2) {\n p:after {\n display: none;\n /* content: \"block\"; */\n opacity: 0;\n }\n }\n & > div:nth-of-type(1) {\n p:after {\n display: none;\n }\n }\n }\n`;\n\nexport const RecruitmentWrapper = styled.div`\n position: relative;\n background-image: url(${(props) => props.theme.image_url}/common/Recruite_bg.png);\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n background-attachment: fixed;\n padding-top: 260px;\n height: 700px;\n z-index: 10;\n :after {\n display: block;\n position: absolute;\n content: \"\";\n background: rgba(0, 0, 0, 0.3);\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 0;\n }\n ${TextArea} {\n z-index: 10;\n }\n ${SectionTitle} {\n color: #ffffff;\n small {\n color: #ffbc00;\n }\n }\n ${SeemoreContainer} {\n margin-top: 46px;\n margin-left: 20px;\n }\n @media ${(props) => props.theme.laptop} {\n background-attachment: scroll;\n height: 680px;\n padding-top: 240px;\n }\n\n @media ${(props) => props.theme.tablet} {\n height: 600px;\n padding-top: 200px;\n ${SeemoreContainer} {\n margin-top: 20px;\n }\n }\n @media ${(props) => props.theme.mobile} {\n height: 480px;\n padding-top: 145px;\n border-bottom: 15px solid #eee;\n ${SeemoreContainer} {\n margin-top: 10px;\n text-align: center;\n }\n ${SectionTitle} {\n font-size: 23px;\n font-weight: 600;\n line-height: 37px;\n text-align: center;\n text-shadow: 0px 4px 14px rgba(0, 0, 0, 0.25);\n small {\n text-align: center;\n text-shadow: 0px 4px 14px rgba(0, 0, 0, 0.25);\n }\n }\n }\n`;\n\nexport const WayWorkingWrapper = styled.div`\n padding-top: 150px;\n padding-bottom: 150px;\n position: relative;\n ${TextArea} {\n padding: 0 0;\n margin-bottom: 60px;\n a {\n display: none;\n }\n }\n :after {\n content: \"\";\n display: block;\n clear: both;\n }\n ${SectionSummary} {\n span {\n position: relative;\n font-family: \"KBFG Display\";\n font-style: normal;\n font-weight: 300;\n font-size: 17px;\n line-height: 37px;\n color: #777777;\n }\n }\n ${SeemoreContainer} {\n display: block;\n text-align: center;\n a {\n margin-top: 80px;\n }\n }\n @media ${(props) => props.theme.laptop} {\n padding-top: 140px;\n padding-bottom: 140px;\n }\n @media ${(props) => props.theme.tablet} {\n padding-top: 100px;\n padding-bottom: 100px;\n ${TextArea} {\n margin-bottom: 40px;\n }\n ${SeemoreContainer} {\n a {\n margin-top: 60px;\n }\n }\n }\n @media ${(props) => props.theme.mobile} {\n margin-bottom: 0;\n padding-top: 90px;\n padding-bottom: 90px;\n border-bottom: 15px solid #eee;\n ${SectionSummary} {\n font-size: 14px;\n line-height: 26px;\n span {\n font-size: 0;\n }\n }\n ${TextArea} {\n margin-bottom: 30px;\n }\n ${SeemoreContainer} {\n a {\n margin-top: 20px;\n }\n }\n }\n`;\n\nexport const WayCardAreaItem = styled.div`\n position: relative;\n float: left;\n padding: 0 15px;\n height: auto;\n ${(props) => (props.wide ? `width:100%; margin-bottom: 30px;` : `width:50%;`)}\n p {\n position: absolute;\n bottom: 40px;\n left: 0px;\n width: 100%;\n padding: 0px 60px;\n pointer-events: none;\n }\n strong,\n small {\n display: block;\n font-style: normal;\n color: #ffffff;\n text-shadow: 0px 2px 14px rgba(0, 0, 0, 0.3);\n z-index: 20;\n }\n strong {\n font-family: \"KBFG Display\";\n font-weight: 600;\n font-size: 26px;\n line-height: 32px;\n }\n small {\n position: relative;\n margin-top: 10px;\n font-family: \"KBFG Text\";\n font-weight: 300;\n font-size: 17px;\n line-height: 32px;\n }\n div {\n position: relative;\n width: 100%;\n height: 320px;\n overflow: hidden;\n z-index: 0;\n border-radius: 0px 30px;\n\n div {\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n height: 100%;\n -webkit-transition: transform 0.8s ease-out;\n -moz-transition: transform 0.8s ease-out;\n -ms-transition: transform 0.8s ease-out;\n -o-transition: transform 0.8s ease-out;\n transition: transform 0.8s ease-out;\n :hover {\n transform: scale(1.1);\n }\n :after {\n border-radius: 0px 30px;\n }\n }\n }\n @media ${(props) => props.theme.laptop} {\n padding: 0px 15px;\n strong {\n font-size: 25px;\n }\n small {\n line-height: 30px;\n }\n }\n @media ${(props) => props.theme.tablet} {\n & > div {\n height: 360px;\n }\n strong {\n font-size: 23px;\n }\n small {\n display: none;\n }\n }\n @media ${(props) => props.theme.mobile} {\n width: 100%;\n margin-bottom: 20px;\n padding: 0 0;\n & > div {\n height: 300px;\n }\n p {\n bottom: 40px;\n padding: 0px 40px;\n }\n strong {\n font-size: 18px;\n line-height: 26px;\n text-shadow: 0px 1px 14px rgba(0, 0, 0, 0.25);\n }\n }\n`;\n\nexport const WayCardArea = styled.div`\n display: block;\n margin-bottom: 0px;\n margin: 0 -15px;\n ${WayCardAreaItem}:nth-of-type(1) {\n div {\n div {\n background-image: url(${(props) => props.theme.image_url}/common/work_item1.png);\n position: relative;\n :after {\n display: block;\n position: absolute;\n content: \"\";\n background: rgba(0, 0, 0, 0.2);\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 0;\n }\n }\n }\n }\n ${WayCardAreaItem}:nth-of-type(2) {\n position: relative;\n div {\n div {\n background-image: url(${(props) => props.theme.image_url}/common/work_item2.png);\n position: relative;\n :after {\n display: block;\n position: absolute;\n content: \"\";\n background: rgba(0, 0, 0, 0.2);\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 0;\n }\n }\n }\n }\n ${WayCardAreaItem}:nth-of-type(3) {\n position: relative;\n div {\n div {\n background-image: url(${(props) => props.theme.image_url}/common/strategyitem3.png);\n position: relative;\n :after {\n display: block;\n position: absolute;\n content: \"\";\n background: rgba(0, 0, 0, 0.2);\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 0;\n }\n }\n }\n }\n @media ${(props) => props.theme.laptop} {\n margin: 0px 15px;\n }\n @media ${(props) => props.theme.tablet} {\n margin: 0px -15px;\n }\n @media ${(props) => props.theme.mobile} {\n margin: 0px;\n }\n`;\n\nexport const ESGitem = styled.section`\n position: absolute;\n width: 380px;\n height: 380px;\n z-index: 12;\n transition: 1s;\n :hover {\n transform: scale(1.1);\n }\n & div {\n width: 380px;\n height: 380px;\n border-radius: 50%;\n text-align: center;\n background-size: cover;\n background-position: center center;\n position: relative;\n transition: 3s;\n p {\n font-family: \"KBFG Display\";\n font-style: normal;\n font-size: 30px;\n color: #ffffff;\n text-shadow: 0px 1px 14px rgba(0, 0, 0, 0.44);\n position: relative;\n z-index: 10;\n line-height: 380px;\n }\n :after {\n display: block;\n position: absolute;\n border-radius: 1020px;\n content: \"\";\n background: rgba(0, 0, 0, 0.3);\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n }\n }\n @media ${(props) => props.theme.laptop} {\n div {\n width: 320px;\n height: 320px;\n p {\n line-height: 320px;\n }\n }\n }\n @media ${(props) => props.theme.tablet} {\n div {\n width: 300px;\n height: 300px;\n p {\n line-height: 300px;\n }\n }\n }\n`;\nexport const ESGItemWrapper = styled.div`\n height: 600px;\n @media ${(props) => props.theme.mobile} {\n height: auto;\n margin-top: 60px;\n margin-bottom: 60px;\n }\n`;\nexport const ESGWrapper = styled.div`\n position: relative;\n overflow: hidden;\n padding-top: 150px;\n padding-bottom: 150px;\n ${TextArea} {\n position: relative;\n z-index: 1;\n margin-bottom: 40px;\n }\n ${SeemoreContainer} {\n margin-top: 30px;\n text-align: center;\n }\n @media ${(props) => props.theme.laptop} {\n padding-top: 140px;\n padding-bottom: 140px;\n overflow-x: hidden;\n ${ESGitem}:nth-of-type(1) {\n top: 40%;\n }\n ${ESGitem}:nth-of-type(3) {\n top: 0%;\n left: 48%;\n }\n ${ESGitem}:nth-of-type(4) {\n left: 60%;\n }\n ${ESGitem}:nth-of-type(5) {\n right: -12%;\n }\n }\n\n @media ${(props) => props.theme.tablet} {\n padding-top: 100px;\n padding-bottom: 100px;\n ${ESGitem}:nth-of-type(1) {\n top: 45%;\n left: 5%;\n }\n ${ESGitem}:nth-of-type(2) {\n top: 30%;\n left: 40%;\n }\n ${ESGitem}:nth-of-type(3) {\n top: -2%;\n left: 60%;\n }\n ${ESGitem}:nth-of-type(4) {\n top: 70%;\n left: 45%;\n }\n ${ESGitem}:nth-of-type(5) {\n top: 40%;\n right: -15%;\n }\n }\n\n @media ${(props) => props.theme.mobile} {\n overflow: hidden;\n padding-top: 90px;\n padding-bottom: 90px;\n border-bottom: 15px solid #eee;\n ${TextArea} {\n margin-bottom: 0px;\n }\n ${ESGItemWrapper} {\n overflow-x: scroll;\n overflow-y: hidden;\n width: 100%;\n }\n ${ESGItemWrapper} > div {\n width: 2100px;\n }\n ${ESGItemWrapper} > div section {\n display: inline-block;\n width: 350px;\n }\n ${ESGitem} {\n vertical-align: middle;\n position: relative;\n top: auto !important;\n right: auto !important;\n left: auto !important;\n }\n\n ${SeemoreContainer} {\n margin-top: 0px;\n }\n }\n`;\n\nexport const StoryWrapper = styled.div`\n padding: 0 65px;\n ${(props) => (props.type ? `padding-top: 0px;` : ` `)}\n ${(props) => (props.full ? `padding: 0 0;` : ` `)}\n\n @media ${(props) => props.theme.laptop} {\n padding: 0 20px;\n ${(props) => (props.type ? `padding-top:0px;` : ` `)}\n ${(props) => (props.full ? `padding: 0 0;` : ` `)}\n }\n\n @media ${(props) => props.theme.tablet} {\n ${(props) => (props.type ? `padding-top:0px;` : ` `)}\n }\n\n @media ${(props) => props.theme.mobile} {\n ${(props) => (props.type ? `padding-top: 0px;` : `padding-top:0px;`)}\n padding: 0px 0px;\n border-bottom: 15px solid #eee;\n }\n`;\n\nexport const StoryPostWrapper = styled.div`\n /* padding-right: 300px;\n @media ${(props) => props.theme.laptop} {\n padding-right: 200px;\n }\n @media ${(props) => props.theme.tablet} {\n padding-right: 100px;\n }\n @media ${(props) => props.theme.mobile} {\n padding-right: 0px;\n } */\n`;\n\nexport const StoryPost = styled.div`\n width: 100%;\n z-index: 2;\n position: relative;\n ${TextArea} {\n }\n ${SectionTitle} {\n margin-bottom: 25px;\n font-weight: 600;\n font-size: 30px;\n line-height: 53px;\n color: #fff;\n padding-left: 80px;\n small {\n font-size: 22px;\n }\n }\n ${SeemoreContainer} {\n padding-left: 80px;\n }\n @media ${(props) => props.theme.laptop} {\n ${SectionTitle} {\n padding-left: 160px;\n }\n ${SeemoreContainer} {\n padding-left: 160px;\n }\n }\n @media ${(props) => props.theme.tablet} {\n ${SectionTitle} {\n font-size: 30px;\n line-height: 45px;\n padding-left: 140px;\n }\n ${SeemoreContainer} {\n padding-left: 140px;\n }\n }\n @media ${(props) => props.theme.mobile} {\n text-align: center;\n ${SectionTitle} {\n margin-bottom: 25px;\n font-weight: 600;\n font-size: 20px;\n line-height: 35px;\n padding-left: 0px;\n small {\n font-size: 17px;\n }\n }\n ${SeemoreContainer} {\n padding-left: 0px;\n }\n }\n`;\n\nexport const StorySliderSection = styled.div`\n background: #fff;\n /* height: 868px; */\n overflow: hidden;\n z-index: 1;\n position: relative;\n ${(props) => (props.type ? `padding-top: 0px;` : ``)}\n @media ${(props) => props.theme.laptop} {\n ${(props) => (props.type ? `padding-top: 0px;` : ``)}\n }\n @media ${(props) => props.theme.tablet} {\n ${(props) => (props.type ? `padding-top: 0px;` : ``)}\n }\n @media ${(props) => props.theme.mobile} {\n background: #fff;\n ${(props) => (props.type ? `padding-top:0px;` : ``)}\n }\n`;\n\nexport const StoryBackground = styled.div`\n position: relative;\n cursor: pointer;\n /* top:0px; */\n /* left:0px; */\n height: 450px;\n width: 100%;\n padding: 100px 0px;\n margin-bottom: 0px;\n background-image: url(${(props) => (props.imageUrl ? props.imageUrl : \"\")});\n background-size: cover;\n background-position: center 100%;\n background-repeat: no-repeat;\n transition: 0.3s;\n :after {\n display: block;\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.5);\n top: 0px;\n left: 0px;\n }\n & > div {\n z-index: 2;\n }\n & > div:first-child {\n position: relative;\n }\n @media ${(props) => props.theme.tablet} {\n background-attachment: scroll;\n }\n @media ${(props) => props.theme.mobile} {\n height: 480px;\n }\n`;\n\nexport const ProgressBar = styled.div`\n position: absolute;\n width: 100%;\n height: 10px;\n background: rgba(255, 255, 255, 0.3);\n bottom: 0px;\n left: 0px;\n div {\n width: ${(props) => props.percent}%;\n height: 10px;\n background: rgba(255, 255, 255, 0.7);\n .slick-active > div & {\n animation: timeline 7s;\n -webkit-animation-timing-function: linear;\n animation-timing-function: linear;\n @keyframes timeline {\n 0% {\n width: 0px;\n }\n 100% {\n width: 100%;\n }\n }\n }\n }\n`;\n\nexport const StoryBox = styled.div`\n height: 344px;\n`;\nexport const StorySliderWrapper = styled.div`\n position: relative;\n height: 450px;\n margin-bottom: 0px;\n overflow: hidden;\n :after {\n content: \"\";\n display: block;\n clear: both;\n }\n @media ${(props) => props.theme.laptop} {\n }\n @media ${(props) => props.theme.tablet} {\n height: 360px;\n }\n @media ${(props) => props.theme.mobile} {\n height: 360px;\n }\n`;\nexport const StoryBoxWrapper = styled.div`\n width: 650px;\n position: relative;\n box-sizing: border-box;\n padding: 54px 65px;\n padding-left: 0;\n /* background: rgba(255, 255, 255, 0.96); */\n cursor: pointer;\n transition: 0.3s;\n a {\n margin-left: 30px;\n }\n :hover {\n /* background: rgba(255, 255, 255, 0.8); */\n }\n label {\n margin-right: 10px;\n }\n @media ${(props) => props.theme.laptop} {\n padding: 25px 45px;\n padding-left: 0;\n }\n @media ${(props) => props.theme.tablet} {\n }\n @media ${(props) => props.theme.mobile} {\n width: 100%;\n padding: 0px 0px;\n a {\n margin-left: 0;\n }\n ${SeemoreContainer} {\n margin-left: 20px;\n text-align: center;\n }\n }\n`;\n\nexport const BoxTitle = styled.div`\n margin-top: 24px;\n margin-bottom: 50px;\n font-family: \"KBFG Display\";\n font-style: normal;\n font-weight: 500;\n font-size: 28px;\n line-height: 52px;\n color: #000000;\n`;\n","import React from 'react';\nimport {CommonContainer, MediaQuery, mobileQuery, Br} from '../../../components/Grid';\nimport Button from '../../../components/Button';\nimport LoadInView from '../../../components/LoadInView';\nimport { useInView } from 'react-hook-inview';\nimport { motion } from 'framer-motion';\nimport {BusinessSection,\n BusinessContentWrapper,\n BusinessContent,\n TextArea,\n SectionTitle,\n SectionSummary,\n SeemoreContainer\n} from '../styled';\n\nconst SectionBusiness = () => {\n const isMobile = MediaQuery(mobileQuery);\n const [ref, inView] = useInView({ unobserveOnEnter: true, delay: 3000, rootMargin:'10px', threshold: 0 });\n \n return (\n \n \n \n \n \n \n \n \n \n {inView ? (\n <>\n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default SectionBusiness;","import React from \"react\";\nimport {\n CommonContainer,\n MediaQuery,\n mobileQuery,\n Br,\n} from \"../../../components/Grid\";\nimport Button from \"../../../components/Button\";\nimport {\n DXWrapper,\n DXBoxWrapper,\n DXBackground,\n DXContentWrapper,\n DXContent,\n DXContentbox,\n TextArea,\n SectionTitle,\n SectionSummary,\n SeemoreContainer,\n} from \"../styled\";\n\nconst SectionDX = () => {\n const isMobile = MediaQuery(mobileQuery);\n return (\n \n \n {!isMobile ? (\n \n \n \n \n \n ) : (\n \"\"\n )}\n {isMobile ? (\n \n \n ) : (\n \"\"\n )}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default SectionDX;\n","import React, {useEffect, useRef} from 'react';\nimport {MediaQuery, mobileQuery} from '../../../components/Grid';\nimport {ESGCardWrapper,\n ESGimg,\n ESGtext}\nfrom '../styled'\n\nconst ESGCard = (props) => {\n const element = useRef();\n const itemWidth = 260;\n const viewPortMargin = 158;\n const randomizeHeight = true;\n const x = props.x;\n const y = 0;\n const topOffset = useRef(\n y + (randomizeHeight ? Math.random() * 80 : 0)\n );\n const isMobile = MediaQuery(mobileQuery);\n useEffect(() => {\n let lastRender = Date.now();\n let isRendering = true;\n \n const render = () => {\n const elapsedTime = Date.now() - lastRender;\n const baseSpeed = props.shouldAnimate ? 5 : 0.5;\n const deltaX = (baseSpeed * elapsedTime) / 1000;\n\n if (element.current) {\n let currentLeft = parseInt(\n element.current.style.left.replace('px', ''),\n 10\n );\n if (currentLeft <= 0) {\n currentLeft = props.wrapperWidth + itemWidth + viewPortMargin;\n }\n element.current.style.left = currentLeft - deltaX + 'px';\n }\n\n lastRender = Date.now();\n\n if (isRendering) {\n if(props.shouldAnimate) {\n if(!isMobile) {\n requestAnimationFrame(render);\n }\n }\n }\n };\n \n if (element) {\n render();\n }\n \n return () => {\n isRendering = false;\n };\n });\n return (\n \n \n {props.title} \n \n );\n};\n\nexport default ESGCard;","import React, {useState} from 'react';\nimport ESGCard from './ESGCard';\nimport {ESGSliderWraaper,\n ESGSliderStyle\n} from '../styled';\n\nconst ESGSlider = () => {\n const [hasMouseOver, setMouseOver] = useState(false);\n const itemWidth = 268;\n const viewPortMargin = 158;\n const imageWrapperWidth = ((itemWidth + viewPortMargin) * 10) - ( itemWidth + viewPortMargin );\n\n const [ESG_open, on_ESG_open] = useState(0);\n\n const Toggle = () => {\n if(!ESG_open) {\n on_ESG_open(1);\n } else {\n on_ESG_open(0);\n }\n }\n\n return (\n \n {\n setMouseOver(true);\n // console.log('마우스오버');\n }}\n onMouseLeave={() => {\n setMouseOver(false);\n // console.log('마우스아웃');\n }}> \n {/* */}\n */}\n \n \n );\n};\n\nexport default ESGSlider;","import React, {useRef} from 'react';\nimport {CommonContainer, MediaQuery, mobileQuery} from '../../../components/Grid';\nimport Button from '../../../components/Button';\nimport {ESGWrapper,\n TextArea,\n SectionTitle,\n SectionSummary,\n ESGFigure,\n ESGFigures,\n SeemoreContainer\n} from '../styled'\nimport { Parallax } from 'react-scroll-parallax';\nimport ESGSlider from './ESGSlider';\n\nconst SectionWayWorking = () => {\n let topBoxEl = useRef(null);\n const isMobile = MediaQuery(mobileQuery);\n \n return (\n \n \n {isMobile ? '' : (\n <>\n \n \n \n \n \n )}\n \n \n \n \n \n \n \n \n );\n};\n\nexport default SectionWayWorking;","import React, { useState, useEffect } from \"react\";\nimport Slider from \"react-slick\";\nimport styled from \"styled-components\";\nimport { CommonContainer } from \"../../../components/Grid\";\nimport Button from \"../../../components/Button\";\nimport { motion } from \"framer-motion\";\nimport { TopBoxWrapper, TopBox, TimeLineWrapper, TimeLine } from \"../styled\";\nimport { GetMainSlider } from \"../../../api/slider\";\n\nconst SectionMain = (props) => {\n const [playbutton, on_playbutton] = useState(0);\n const [slideList, SetSliderList] = useState(0);\n const [slideTotal, SetSliderTotal] = useState(0);\n\n const ToggleMenu = () => {\n if (!playbutton) {\n on_playbutton(1);\n } else {\n on_playbutton(0);\n }\n };\n\n useEffect(() => {\n if (!slideList) {\n GetMainSlider()\n .then((response) => {\n console.log(response);\n if (response.data.code == \"200\") {\n SetSliderList(response.data.body.posts);\n SetSliderTotal(response.data.body.total);\n }\n })\n .catch((err) => console.log(err));\n }\n });\n\n return (\n \n \n \n \n {slideList ? (\n slideList.map((slide, key) => (\n \n \n \n \n \n {key + 1}/{slideTotal}\n \n \n \n \n 자세히보기\n \n \n \n \n ))\n ) : (\n \n \n \n \n 1/1\n \n \n Digital Transformation을\n
\n \n 자세히보기\n \n \n \n \n )}\n \n \n \n \n );\n};\n\nconst settings = {\n infinite: true,\n autoplay: 1,\n speed: 300,\n arrows: 1,\n slidesToShow: 1,\n rows: 1,\n fade: true,\n slidesToScroll: 1,\n autoplaySpeed: 7000, // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)\n pauseOnHover: false,\n // afterChange: () => this.setState(state => ({ updateCount: state.updateCount + 1 })),\n // beforeChange: (current, next) => this.setState({ slideIndex: next }),\n responsive: [\n {\n breakpoint: 1800,\n settings: {\n slidesToShow: 1,\n slidesToScroll: 1,\n },\n },\n {\n breakpoint: 1480,\n settings: {\n slidesToShow: 1,\n slidesToScroll: 1,\n infinite: true,\n },\n },\n {\n breakpoint: 1024,\n settings: {\n slidesToShow: 1,\n slidesToScroll: 1,\n },\n },\n {\n breakpoint: 1024,\n settings: {\n slidesToShow: 1,\n slidesToScroll: 1,\n },\n },\n ],\n};\n\nconst SlickWrap = styled.div`\n .slick-arrow {\n z-index: 3;\n }\n .slick-initialized .slick-slide {\n display: block;\n }\n .slick-list {\n /* padding: 0px !important; */\n width: 100%;\n }\n .slick-slide:not(.slick-active) {\n }\n .slick-arrow {\n }\n .slick-prev,\n .slick-next {\n font-size: 0;\n position: absolute;\n bottom: auto;\n color: red;\n border: 0;\n background: none;\n z-index: 1;\n cursor: pointer;\n background: #fff;\n width: 60px;\n height: 60px;\n border-radius: 50%;\n transition: 0.8s;\n opacity: 0;\n }\n .slick-slider:hover .slick-next,\n .slick-slider:hover .slick-prev {\n opacity: 0.8;\n :hover {\n opacity: 1;\n }\n }\n .slick-prev {\n left: 80px;\n top: 50%;\n margin-top: -30px;\n }\n .slick-prev:before {\n content: url(\"arrow-before.svg\");\n }\n .slick-next {\n right: 80px;\n top: 50%;\n margin-top: -30px;\n }\n .slick-next:before {\n content: url(\"arrow-next.svg\");\n }\n .slick-prev:hover:after,\n .slick-next:hover:after {\n color: red;\n }\n @media ${(props) => props.theme.laptop} {\n .slick-prev,\n .slick-next {\n border-radius: 0%;\n width: 0px;\n height: 0px;\n }\n .slick-prev:before {\n display: none;\n }\n .slick-next:before {\n display: none;\n }\n }\n`;\n\nexport default SectionMain;\n","import React from 'react';\nimport styled from 'styled-components';\n\nconst SectionMenu = (props) => {\n return (\n \n {/* */}\n */}\n \n );\n};\n\nexport default SectionMenu;\n\nconst SectionMenuStyle = styled.div`\n position: absolute;\n z-index: 999;\n height: 91%;\n left:0px;\n top:100vh;\n /* & > div {\n position: relative;\n height: 100%;\n } */\n & > div {\n padding-top: 180px;\n position: absolute;\n height: 100%;\n width: 150px;\n left: 0px;\n top:0px;\n }\n & > div > ul {\n position: sticky;\n top: 150px;\n }\n & > div > ul > li {\n margin-bottom: 27px;\n padding-left:50px;\n }\n & > div > ul > li:last-child {\n margin-bottom: 0px;\n }\n li.active {\n position:relative;\n :before {\n content: '';\n display: block;\n position:absolute;\n top:50%;\n margin-top:-1px;\n left:0px;\n width: 37px;\n height: 2px;\n background: #FFBC00;\n }\n }\n li.active > a {\n color: #FFBC00;\n font-weight: 600;\n }\n li > a {\n color: #BFBFBF;\n font-size: 16px;\n text-decoration: none;\n }\n @media ${props=>props.theme.tablet} {\n display:none;\n }\n`;","import React, {useEffect, useRef} from 'react';\nimport {CommonContainer, MediaQuery, mobileQuery} from '../../../components/Grid';\nimport {Player} from 'video-react';\nimport Button from '../../../components/Button';\nimport LoadInView from '../../../components/LoadInView';\nimport { motion } from 'framer-motion';\nimport {OverviewWrapper,\n OverviewFigure,\n InterviewBoxWrapper,\n InterviewBox,\n InterviewText,\n TextArea,\n SectionTitle,\n SectionSummary,\n Seemore\n} from '../styled'\nimport { useInView } from 'react-hook-inview';\nimport { Parallax } from 'react-scroll-parallax';\nimport YouTube from 'react-youtube';\n\nconst SectionOverview = () => {\n const player = useRef(null);\n const [ref, inView] = useInView({ unobserveOnEnter: true, delay: 3000, rootMargin:'10px', threshold: 0 });\n const isMobile = MediaQuery(mobileQuery);\n const opts = {\n height: '100%',\n width: '100%',\n playerVars: {\n autoplay: 1,\n mute: 1,\n loop: 1,\n playlist: 'SiBwPgfLGNs',\n controls: 1\n },\n };\n useEffect(() => {\n player.current.internalPlayer.playVideo();\n player.current.internalPlayer.mute();\n })\n const MouseOver = () => {\n // player.current.muted = 0;\n // player.current.internalPlayer.unMute();\n // player.current.internalPlayer.playVideo();\n }\n const MouseLeave = () => {\n // player.current.internalPlayer.mute();\n // player.current.muted = \"muted\";\n \n }\n\n return (\n \n \n \n \n \n \n {!isMobile ? (\n \n \n \n ) : '' }\n \n \n \n \n \n \n {isMobile ? (\n \n 홍보영상\n ) : '' }\n \n \n {!isMobile ? (\n \n 홍보영상 1:00\n ) : '' }\n \n \n \n \n \n \n \n );\n};\n\nexport default SectionOverview;","import React from \"react\";\nimport Button from \"../../../components/Button\";\nimport { Br, CommonContainer } from \"../../../components/Grid\";\nimport {\n RecruitmentWrapper,\n SectionTitle,\n SeemoreContainer,\n TextArea,\n} from \"../styled\";\n\nconst SectionWayWorking = () => {\n return (\n \n \n \n \n \n );\n};\n\nexport default SectionWayWorking;\n","import styled from \"styled-components\";\n\n//BusinessCard//\n\nexport const CardWrapper = styled.div`\n width: 33.33%;\n height: 100%;\n display: inline-block;\n padding: 0 15px;\n`;\n\nexport const CardStyle = styled.div`\n box-sizing: border-box;\n height: 100%;\n background: rgba(255, 255, 255, 0.96);\n padding-top: 43px;\n padding-left: 49px;\n\n h4 {\n font-family: \"KBFG Display\";\n font-style: normal;\n font-weight: 500;\n font-size: 24px;\n line-height: 162.5%;\n color: #000000;\n margin-bottom: 10px;\n }\n h5 {\n font-family: \"KBFG Text\";\n font-style: normal;\n font-weight: 300;\n font-size: 17px;\n line-height: 32px;\n color: #666666;\n white-space: pre;\n }\n`;\n\n//BusinessCard//\n\n//\n\nexport const StorySliderWraaper = styled.div`\n ${(props) => (props.type ? ` margin-bottom: 170px;` : ``)}\n margin-bottom: 220px;\n\n .slick-slider {\n padding: 0px 80px;\n @media (max-width: 1500px) {\n padding: 0px 80px;\n }\n @media ${(props) => props.theme.laptop} {\n padding: 0px 0px;\n }\n }\n @media (max-width: 1500px) {\n }\n @media ${(props) => props.theme.laptop} {\n padding: 0px 0px;\n }\n @media ${(props) => props.theme.mobile} {\n margin-bottom: 60px;\n }\n`;\n\nexport const StorySliderStyle = styled.div`\n margin-top: 24px;\n text-align: center;\n @media ${(props) => props.theme.mobile} {\n margin-top: 0px;\n & > div {\n overflow-y: hidden;\n overflow-x: scroll;\n }\n & > div > div {\n width: 3920px;\n text-align: left;\n }\n & > div > div > div {\n width: 325px;\n }\n & section > div {\n width: 300px;\n height: 300px;\n padding-bottom: 0px;\n }\n }\n`;\n\nexport const StoryCardWrapper = styled.div`\n padding: 36px 14px;\n padding-bottom: 0px;\n`;\n\nexport const Storytext = styled.div`\n position: relative;\n span {\n font-family: \"KBFG Display\";\n font-style: normal;\n font-weight: 300;\n font-size: 10px;\n line-height: 37px;\n color: #515151;\n }\n span:last-child {\n right: 0;\n position: absolute;\n }\n`;\n\nexport const Storyimg = styled.div`\n width: 388px;\n height: 388px;\n background-image: url(\"../Group102.png\");\n background-size: cover;\n background-position: center center;\n @media ${(props) => props.theme.laptop} {\n height: 0;\n weight: 100%;\n padding: 50px;\n\n position: relative;\n }\n @media ${(props) => props.theme.tablet} {\n }\n @media ${(props) => props.theme.mobile} {\n width: 100%;\n }\n`;\n\n//\n\n//slick//\n\nexport const settings = {\n infinite: true,\n autoplay: 0,\n speed: 500,\n arrows: 1,\n slidesToShow: 4,\n rows: 1,\n slidesToScroll: 1,\n autoplaySpeed: 3000, // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)\n pauseOnHover: true,\n centerPadding: \"0px\",\n responsive: [\n {\n breakpoint: 1800,\n settings: {\n slidesToShow: 3,\n slidesToScroll: 1,\n },\n },\n {\n breakpoint: 1480,\n settings: {\n slidesToShow: 3,\n slidesToScroll: 1,\n infinite: true,\n },\n },\n {\n breakpoint: 1024,\n settings: {\n slidesToShow: 3,\n slidesToScroll: 1,\n },\n },\n {\n breakpoint: 770,\n settings: \"unslick\",\n },\n ],\n};\n\nexport const SlickWrap = styled.div`\n .slick-arrow {\n z-index: 3;\n }\n .slick-initialized .slick-slide {\n display: block;\n }\n .slick-list {\n overflow: visible;\n padding: 0px !important;\n }\n .slick-slide:not(.slick-active) {\n }\n .slick-arrow {\n }\n .slick-center {\n position: relative;\n /* div{\n :after{\n display: block;\n position: absolute;\n content: \"\";\n background: rgba(255, 25, 255, 0);\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transition: 0.4s; \n }\n } */\n }\n .slick-prev,\n .slick-next {\n font-size: 0;\n position: absolute;\n bottom: 20px;\n color: red;\n border: 0;\n background: none;\n z-index: 1;\n cursor: pointer;\n background: #fff;\n width: 60px;\n height: 60px;\n border-radius: 50%;\n }\n .slick-prev {\n left: 50%;\n transform: translateX(-150%);\n top: 506px;\n @media ${(props) => props.theme.tablet} {\n top: 400px;\n }\n }\n .slick-prev:before {\n content: url(\"/arrow-before.svg\");\n }\n .slick-next {\n right: 50%;\n transform: translateX(150%);\n top: 506px;\n @media ${(props) => props.theme.tablet} {\n top: 400px;\n }\n }\n .slick-next:before {\n content: url(\"/arrow-next.svg\");\n }\n .slick-prev:hover:after,\n .slick-next:hover:after {\n color: red;\n }\n`;\n\n//slick//\n\n//ESGslick//\n\nexport const ESGsettings = {\n infinite: true,\n autoplay: 1,\n speed: 500,\n arrows: 0,\n slidesToShow: 3,\n rows: 1,\n slidesToScroll: 1,\n autoplaySpeed: 3000, // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)\n pauseOnHover: true,\n\n centerPadding: \"-20px\",\n responsive: [\n {\n breakpoint: 1740,\n settings: {\n slidesToShow: 2,\n centerPadding: \"50px;\",\n },\n },\n {\n breakpoint: 1500,\n settings: {\n slidesToShow: 1,\n centerPadding: \"200px;\",\n },\n },\n {\n breakpoint: 1200,\n settings: {\n slidesToShow: 1,\n centerPadding: \"300px;\",\n },\n },\n ],\n};\n\n//ESGslick//\n","import React, { useEffect, useState } from 'react';\nimport Slider from 'react-slick';\nimport Card from '../../../components/Card';\nimport {\n settings,\n SlickWrap,\n StorySliderWraaper,\n StorySliderStyle,\n} from './styled';\nimport { GetPosts } from '../../../api/story';\n// import LoadInView from '../../../components/LoadInView';\n// import {animteScrollTo} from '../../../lib/common';\n\nconst StorySlider = props => {\n const [post_list, update_post_list] = useState(0);\n const [current_paged, set_current_paged] = useState(0);\n const [total_page, set_total_page] = useState(0);\n const [list_tags, set_list_tags] = useState(0);\n const [paged, set_paged] = useState(1);\n useEffect(() => {\n GetPosts({\n order: 'DESC',\n orderby: 'ID',\n posts_per_page: '12',\n cate: '4500',\n paged: paged,\n })\n .then(response => {\n console.log(response);\n if (response.data.body.paged) {\n set_total_page(response.data.body.total);\n set_current_paged(response.data.body.paged);\n update_post_list(response.data.body.posts);\n set_list_tags(response.data.body.tags);\n }\n })\n .catch(error => {\n console.log(error);\n });\n }, [paged]);\n return (\n \n \n {post_list ? (\n \n \n {post_list\n ? post_list.map((post, key) => (\n \n \n ) : (\n ''\n )}\n \n \n );\n};\n\nexport default StorySlider;\n","import React, { useState, useEffect } from \"react\";\nimport styled from \"styled-components\";\nimport Slider from \"react-slick\";\nimport Button from \"../../../components/Button\";\nimport { CommonContainer } from \"../../../components/Grid\";\nimport {\n StoryBoxWrapper,\n StorySliderWrapper,\n StoryBackground,\n SeemoreContainer,\n SectionTitle,\n} from \"../styled\";\nimport { GetStorySlider } from \"../../../api/slider\";\nconst StoryBoxItem = (props) => {\n return (\n (window.location.href = \"/story/\" + props.item.post_ID)}\n imageUrl={props.item.post_image}\n active={props.count == props.active - 1 ? \"active\" : \"\"}\n >\n \n \n \n {/* {props.item.cate_name} */}\n 스토리\n {props.item.post_title}\n \n \n \n \n \n \n\n {/* \n \n \n {slide_list\n ? slide_list.map((slide, key) => (\n \n \n \n );\n};\n\nexport default StorySlider;\n","import React from 'react';\nimport StorySlider from '../components/StorySlider';\nimport StoryCardSlider from './StoryCardSlider';\nimport {StoryWrapper,\n StoryPost,\n StorySliderSection\n} from '../styled'\n\nconst SectionStory = () => {\n return (\n \n \n \n \n \n \n \n );\n};\n\nexport default SectionStory;","import React from 'react';\nimport {CommonContainer, Br} from '../../../components/Grid';\nimport Button from '../../../components/Button';\nimport {VisionWrapper,\n VisionBox,\n VisionContent,\n TextArea,\n SectionTitle,\n VisionButton,\n} from '../styled';\n\nconst SectionVision = () => {\n return (\n \n \n \n \n \n \n \n 취약 계층 및 미래세대 가치 창출을 위한 교육활동 추진\n
\n }\n // date=\"2020.04.12\"\n index={6}\n image={\n \"https://wp.daitso.kds.co.kr/wp-content/uploads/2020/10/esg_3-scaled.jpg\"\n }\n />\n SI
\n그룹 IT사업 추진에서 서비스 개선 및 강화를
위한 중추적인 개발 역할 수행
\n
\n \n \n \n \n \n {[1].map((post, key) => (\n \n
\n \n ))}\n \n \n )}\n \n \n );\n};\n\nexport default YoubtubeSlider;\n","import styled from \"styled-components\";\nimport { ColWrap, RowWrap } from \"../../components/Grid/styled\";\n\nexport const PeopleWrapper = styled.div`\n margin: 0 auto;\n overflow: hidden;\n @media ${(props) => props.theme.mobile} {\n }\n`;\n\nexport const Top = styled.div`\n margin: 0 auto 150px auto;\n h3 {\n font-family: \"KBFG Display\";\n font-weight: 600;\n font-size: 18px;\n line-height: 22px;\n color: #ffbc00;\n text-align: center;\n margin-bottom: 22px;\n }\n div {\n font-family: \"KBFG Display\";\n font-weight: 600;\n font-size: 42px;\n line-height: 55px;\n text-align: center;\n letter-spacing: 0.01em;\n color: #000000;\n margin-bottom: 30px;\n white-space: keep-all;\n }\n p {\n position: relative;\n z-index: 1;\n font-family: \"KBFG Text\";\n font-weight: 500;\n font-size: 18px;\n line-height: 32px;\n text-align: center;\n letter-spacing: -0.03em;\n color: #838383;\n word-break: keep-all;\n }\n .main-bg {\n position: relative;\n margin-top: 100px;\n }\n .main-bg.bg-01 {\n position: relative;\n margin-top: 100px;\n /* top: -45px; */\n :after {\n position: absolute;\n display: block;\n content: \"\";\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 360deg,\n rgba(255, 255, 255, 0) 0%,\n rgba(255, 255, 255, 1) 80%\n );\n }\n }\n .main-bg-skton {\n position: relative;\n top: 145px;\n height: 557px;\n background-image: url(\"/video-thumbnail.png\");\n background-position: center;\n background-size: cover;\n background-repeat: no-repeat;\n z-index: -1;\n }\n .content {\n position: absolute;\n z-index: 1;\n width: max-content;\n top: 80px;\n left: 50%;\n transform: translateX(-50%);\n }\n\n .main-bg-video {\n position: relative;\n width: 100%;\n height: 871px;\n z-index: -1;\n object-fit: cover;\n }\n\n @media ${(props) => props.theme.mobile} {\n .mobile-mt0 {\n margin-top: 0 !important;\n }\n /* margin-top: 60px; */\n margin-bottom: 60px;\n h3 {\n font-size: 16px;\n line-height: 20px;\n margin-bottom: 10px;\n }\n div {\n font-size: 22px;\n line-height: 160%;\n margin-bottom: 14px;\n }\n p {\n max-width: 400px;\n margin: 0 auto;\n font-weight: 500;\n font-size: 12px;\n line-height: 160%;\n br {\n display: none;\n }\n }\n .content {\n width: 100%;\n top: 60px;\n padding: 0 10px;\n }\n .main-bg-video {\n height: 500px;\n /* padding-bottom: 55%; */\n top: 0;\n }\n .main-bg-skton {\n top: 0;\n height: 500px;\n background: #fff;\n }\n .main-bg {\n :after {\n background: linear-gradient(\n 360deg,\n rgba(255, 255, 255, 0) 0%,\n rgba(255, 255, 255, 1) 63%\n );\n }\n }\n }\n`;\n\nexport const Culture = styled.div`\n display: flex;\n justify-content: space-between;\n max-width: 1292px;\n width: 100%;\n margin: 0 auto 120px auto;\n padding: 0 20px;\n .left {\n width: 49.7%;\n padding-right: 20px;\n h4 {\n font-family: \"KBFG Display\";\n font-weight: 600;\n font-size: 20px;\n line-height: 20px;\n letter-spacing: 0.01em;\n color: #ffbc00;\n margin-bottom: 39px;\n }\n div {\n font-family: \"KBFG Display\";\n font-style: normal;\n font-weight: 600;\n font-size: 42px;\n line-height: 55px;\n letter-spacing: 0.01em;\n color: #000000;\n margin-bottom: 25px;\n white-space: nowrap;\n }\n .desc {\n font-family: \"KBFG Text\";\n font-style: normal;\n font-weight: 500;\n font-size: 17px;\n line-height: 27px;\n letter-spacing: 0.01em;\n color: #878787;\n margin-bottom: 43px;\n flex-wrap: wrap;\n white-space: break-spaces;\n }\n }\n .right {\n flex: 0 1 611px;\n .youtube {\n opacity: 0;\n position: absolute;\n }\n .tb {\n position: relative;\n /* width: 611px; */\n padding-bottom: 68.57%;\n /* background-image: url(\"/people-culture.png\"); */\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n overflow: hidden;\n cursor: pointer;\n :before {\n display: block;\n position: absolute;\n content: \"\";\n top: 50%;\n left: 50%;\n width: 140px;\n height: 140px;\n transform: translateX(-50%) translateY(-50%);\n background-image: url(\"https://wp.daitso.kds.co.kr/wp-content/plugins/ep-manager/assets/images/common/icon-play.svg\");\n background-size: cover;\n z-index: 3;\n pointer-events: none;\n transition: all 0.3s ease 0s;\n }\n :hover {\n :after {\n transform: scale(1.06);\n }\n }\n :after {\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background: inherit;\n background-size: cover;\n transform-origin: center;\n transition: transform 0.4s ease-in-out;\n }\n }\n }\n @media ${(props) => props.theme.mobile} {\n display: block;\n margin-bottom: 112px;\n .left {\n width: 100%;\n h4 {\n font-size: 16px;\n line-height: 20px;\n margin-bottom: 10px;\n }\n div {\n font-size: 22px;\n line-height: 35px;\n }\n }\n .right {\n a {\n margin-top: 20px;\n float: right;\n }\n .tb {\n :before {\n width: 62px;\n height: 62px;\n }\n }\n }\n }\n`;\n\nexport const KBDSLive = styled.div`\n margin: 0 auto 0 auto;\n padding: 120px 0 120px 0;\n background-color: #f7f7f7;\n .container {\n max-width: 1292px;\n width: 100%;\n margin: 0 auto;\n padding: 0 20px;\n }\n .flex {\n display: flex;\n justify-content: space-between;\n align-items: center;\n a {\n position: relative;\n top: 9px;\n }\n }\n h4 {\n font-family: \"KBFG Display\";\n font-weight: 600;\n font-size: 20px;\n line-height: 20px;\n letter-spacing: 0.01em;\n color: #ffbc00;\n margin-bottom: 25px;\n }\n .desc {\n font-family: \"KBFG Display\";\n font-weight: 600;\n font-size: 36px;\n line-height: 160%;\n color: #000000;\n margin-bottom: 25px;\n }\n p {\n font-family: \"KBFG Text\";\n font-weight: 500;\n font-size: 17px;\n line-height: 27px;\n color: #878787;\n margin-bottom: 51px;\n }\n .box {\n display: flex;\n flex-wrap: wrap;\n gap: 30px;\n .card {\n position: relative;\n flex: calc(50% - 15px);\n height: 404px;\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n border-radius: 0 30px 0 30px;\n overflow: hidden;\n padding: 51px 0 0 41px;\n cursor: pointer;\n :after {\n position: absolute;\n display: block;\n content: \"\";\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.26);\n }\n :hover {\n :before {\n transform: scale(1.06);\n }\n }\n :before {\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background: inherit;\n background-size: cover;\n transform-origin: center;\n transition: transform 0.4s ease-in-out;\n }\n }\n\n /* .card:nth-child(1) {\n background-image: url(\"/people-live-01.png\");\n }\n .card:nth-child(2) {\n background-image: url(\"/people-live-03.png\");\n }\n .card:nth-child(3) {\n background-image: url(\"/people-live-04.png\");\n }\n .card:nth-child(4) {\n background-image: url(\"/people-live-02.png\");\n } */\n\n .desc {\n position: relative;\n font-family: \"KBFG Display\";\n font-weight: 600;\n font-size: 30px;\n line-height: 45px;\n letter-spacing: 0.01em;\n color: #ffffff;\n z-index: 1;\n margin-bottom: 10px;\n word-break: keep-all;\n }\n .post-date {\n position: relative;\n font-family: \"KBFG Display\";\n font-style: normal;\n font-weight: 300;\n font-size: 14px;\n line-height: 160%;\n letter-spacing: 0.01em;\n color: #ffffff;\n }\n .btn {\n position: relative;\n z-index: 1;\n width: 43px;\n height: 43px;\n background-image: url(\"/play-btn-trans.png\");\n background-size: contain;\n }\n }\n @media ${(props) => props.theme.mobile} {\n padding: 60px 0 60px 0;\n margin: 0 auto 60px auto;\n\n h4 {\n font-size: 16px;\n line-height: 20px;\n margin-bottom: 10px;\n }\n .flex {\n .desc {\n font-size: 22px;\n line-height: 35px;\n margin-bottom: 10px;\n }\n }\n p {\n font-size: 12px;\n line-height: 19px;\n margin-bottom: 34px;\n }\n .box {\n gap: 16px;\n .card {\n flex: 100%;\n height: 205px;\n padding: 25px 0 0 25px;\n }\n .desc {\n font-size: 18px;\n line-height: 25px;\n }\n .btn {\n width: 32px;\n height: 32px;\n }\n }\n .container {\n a {\n margin-top: 20px;\n float: right;\n }\n }\n }\n`;\n\nexport const KBDSYoutube = styled.div`\n /* border: 10px solid skyblue; */\n margin: 150px auto 0 auto;\n padding: 0 0 0 0;\n /* background-color: #f7f7f7; */\n .container {\n max-width: 1292px;\n width: 100%;\n margin: 0 auto;\n padding: 0 20px;\n }\n .flex {\n display: flex;\n justify-content: space-between;\n align-items: center;\n a {\n position: relative;\n top: 9px;\n }\n }\n h4 {\n font-family: \"KBFG Display\";\n font-weight: 600;\n font-size: 20px;\n line-height: 20px;\n letter-spacing: 0.01em;\n color: #ffbc00;\n margin-bottom: 25px;\n }\n .desc {\n font-family: \"KBFG Display\";\n font-weight: 600;\n font-size: 36px;\n line-height: 160%;\n color: #000000;\n margin-bottom: 25px;\n }\n p {\n margin-bottom: 40px;\n span {\n display: inline-block;\n padding: 13px 24px;\n background: #f0f0f0;\n border-radius: 27.8294px;\n font-family: \"KBFG Display\";\n font-weight: 500;\n font-size: 18.263px;\n line-height: 160%;\n color: #000000;\n margin-right: 14px;\n cursor: pointer;\n transition: 0.3s;\n :hover {\n color: #f0f0f0;\n background-color: #000;\n }\n }\n }\n .youtube-category-active {\n color: #f0f0f0;\n background-color: #000;\n }\n @media ${(props) => props.theme.mobile} {\n margin-top: 100px;\n margin-bottom: 92px;\n h4 {\n font-size: 16px;\n line-height: 20px;\n margin-bottom: 10px;\n }\n .flex {\n div {\n font-size: 22px;\n line-height: 35px;\n }\n }\n .desc {\n margin-bottom: 14px;\n }\n p {\n span {\n font-size: 12px;\n line-height: 19px;\n padding: 7px 13px 6px 13px;\n margin-right: 8px;\n }\n }\n .container > a {\n float: right;\n margin-top: 0;\n }\n }\n`;\n\nexport const SlickWrapper = styled.div`\n /* border: 2px solid green; */\n width: calc(50vw + 50%);\n height: 1000px;\n background-color: tomato;\n\n .slick-item {\n background-color: gray;\n /* width: 100% !important; */\n height: 300px;\n padding: 50px;\n /* border: 10px solid pink; */\n /* margin-right: 100px; */\n }\n .slick-dots li {\n width: 76px;\n }\n .slick-dots li button {\n width: 76px;\n height: 42px;\n }\n .slick-slide {\n /* max-width: 1252px; */\n\n /* float: left; */\n height: 300px;\n /* min-height: 1px; */\n margin: 0px 10px;\n }\n .slick-list {\n margin: 0px -10px;\n }\n /* .slick-slide {\n margin: 0 30px;\n }\n .slick-list {\n margin: 0 -30px;\n } */\n .slick-list {\n /* width: 100vw; */\n }\n .slick-dots li button:before {\n display: block;\n width: 76px;\n height: 2px;\n font-size: 0;\n margin-top: 20px;\n margin-bottom: 20px;\n background-color: #000;\n }\n`;\n\nexport const KBDSStory = styled.div`\n margin: 0 auto 0 auto;\n /* padding: 120px 0 40px 0; */\n padding-top: 120px;\n background-color: #fff;\n .container {\n max-width: 1292px;\n width: 100%;\n margin: 0 auto;\n padding: 0 20px;\n }\n .flex {\n display: flex;\n justify-content: space-between;\n align-items: center;\n a {\n position: relative;\n top: 9px;\n }\n }\n h4 {\n font-family: \"KBFG Display\";\n font-weight: 600;\n font-size: 20px;\n line-height: 20px;\n letter-spacing: 0.01em;\n color: #ffbc00;\n margin-bottom: 25px;\n }\n .desc {\n font-family: \"KBFG Display\";\n font-weight: 600;\n font-size: 36px;\n line-height: 160%;\n color: #000000;\n }\n p {\n font-family: \"KBFG Text\";\n font-weight: 500;\n font-size: 17px;\n line-height: 27px;\n color: #878787;\n margin-bottom: 51px;\n }\n @media ${(props) => props.theme.mobile} {\n padding: 60px 0 40px 0;\n margin: 0 auto 0 auto;\n h4 {\n font-size: 16px;\n line-height: 20px;\n margin-bottom: 10px;\n }\n .desc {\n font-size: 22px;\n line-height: 35px;\n }\n .flex {\n display: block;\n }\n > a {\n float: right;\n position: relative;\n top: -40px;\n right: 20px;\n z-index: 1;\n }\n }\n`;\n\nexport const YoutubeSliderWrap = styled.div`\n /* height: 868px; */\n overflow: hidden;\n z-index: 1;\n position: relative;\n width: 100vw;\n\n /* @media ${(props) => props.theme.mobile} {\n background: #f8f8f8;\n ${(props) => (props.type ? `padding-top:90px;` : ``)}\n } */\n`;\n\nexport const MainSliderWrapper = styled.div`\n position: relative;\n height: 837px;\n\n .mt0 {\n margin-top: 0 !important;\n }\n\n :after {\n content: \"\";\n display: block;\n clear: both;\n }\n\n .mainSlider1 {\n position: relative;\n }\n .mainSlider2 {\n margin-bottom: 0 !important;\n }\n div:has(.mainSlider2) {\n margin-bottom: 0 !important;\n }\n .video-area {\n position: relative;\n width: 100%;\n height: 871px;\n z-index: -1;\n object-fit: cover;\n }\n .video-area-height {\n position: relative;\n width: 100%;\n height: 971px;\n z-index: -1;\n object-fit: cover;\n }\n @media ${(props) => props.theme.mobile} {\n height: 500px;\n .video-area {\n width: 100%;\n height: 500px;\n }\n .video-area-height {\n width: 100%;\n height: 500px;\n }\n }\n`;\nexport const RecruitmentWrapper = styled.div`\n margin-top: 120px;\n .people-recruitment-container > div > div {\n height: 650px;\n }\n /* padding-top: 150px; */\n @media ${(props) => props.theme.laptop} {\n /* padding-top: 140px; */\n }\n @media ${(props) => props.theme.tablet} {\n /* padding-top: 100px; */\n }\n @media ${(props) => props.theme.mobile} {\n margin-top: 50px;\n padding-top: 0px;\n position: relative;\n .people-recruitment-container > div > div {\n height: 230px;\n }\n }\n`;\n\nexport const RecruitVideoWrapper = styled.div`\n position: relative;\n top: 25%;\n height: 0;\n padding-bottom: 56.25%;\n z-index: 10;\n div {\n width: 100%;\n padding-bottom: 56.25%;\n background-image: url(${(props) => props.theme.image_url}/common/${(\n props\n ) => props.bg});\n background-size: cover;\n background-position: center center;\n }\n iframe {\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n }\n :after {\n display: block;\n position: absolute;\n content: \"\";\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgb(0, 0, 0, 0.3);\n cursor: pointer;\n }\n :before {\n display: block;\n position: absolute;\n content: \"\";\n top: 50%;\n left: 50%;\n width: 100px;\n height: 100px;\n transform: translateX(-50%) translateY(-50%);\n /* background-image: url(${(props) =>\n props.theme.image_url}/common/icon-play.svg); */\n background-size: cover;\n z-index: 3;\n cursor: pointer;\n }\n`;\n\nexport const RecruitmentImg = styled.div`\n position: relative;\n background-image: url(\"/people-recruit-img-reverse.jpg\");\n /* background-image: url(${(props) =>\n props.theme.image_url}/common/Recruite_bg.png); */\n background-size: cover;\n background-repeat: no-repeat;\n background-attachment: fixed;\n width: 100%;\n :after {\n display: block;\n position: absolute;\n content: \"\";\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgb(0, 0, 0, 0.4);\n z-index: 1;\n }\n\n @media ${(props) => props.theme.laptop} {\n background-attachment: scroll;\n background-size: auto 150%;\n background-repeat: no-repeat;\n background-position: 40% 100%;\n }\n\n @media ${(props) => props.theme.tablet} {\n ${RowWrap} {\n display: block;\n }\n ${ColWrap}:last-child {\n padding-bottom: 100px;\n }\n }\n\n @media ${(props) => props.theme.mobile} {\n background-size: auto 230%;\n background-repeat: no-repeat;\n background-position: 40% 100%;\n }\n @media (max-width: 360px) {\n background-size: auto 120%;\n background-repeat: no-repeat;\n background-position: 40% 100%;\n }\n`;\n\nexport const RecruitContainer = styled.div`\n max-width: 1600px;\n margin: 0 auto;\n padding: 0 20px;\n ${RowWrap} {\n @media ${(props) => props.theme.tablet} {\n display: block;\n }\n }\n ${ColWrap} {\n @media ${(props) => props.theme.tablet} {\n display: block;\n }\n }\n @media ${(props) => props.theme.tablet} {\n padding: 0 50px;\n }\n @media ${(props) => props.theme.mobile} {\n padding: 0 20px;\n }\n`;\n\nexport const Recruitment = styled.div`\n position: relative;\n font-style: normal;\n padding-top: 250px;\n padding-bottom: 300px;\n /* padding-right: 40px; */\n text-align: left;\n z-index: 5;\n h4 {\n font-family: \"KBFG Display\";\n font-weight: 500;\n font-size: 20px;\n line-height: 25px;\n color: #ffcc00;\n text-shadow: 0px 2px 20px rgba(0, 0, 0, 0.25);\n margin-bottom: 10px;\n }\n p {\n font-family: \"KBFG Display\";\n font-weight: 700;\n font-size: 38px;\n line-height: 160%;\n color: #ffffff;\n text-shadow: 0px 2px 20px rgba(0, 0, 0, 0.25);\n margin-bottom: 30px;\n }\n a {\n font-family: \"KBFG Text\";\n font-style: normal;\n font-weight: 500;\n font-size: 17px;\n line-height: 22px;\n text-align: center;\n color: #ffffff;\n margin-left: 20px;\n i::before {\n height: 32px;\n width: 32px;\n }\n i::after {\n top: -2px;\n right: -1px;\n }\n }\n /* p:nth-of-type(1){\n padding-right: 280px;\n padding-left: 280px;\n } */\n @media ${(props) => props.theme.laptop} {\n p {\n font-size: 30px;\n }\n }\n @media ${(props) => props.theme.tablet} {\n margin-top: 0px;\n padding-top: 110px;\n padding-bottom: 40px;\n padding-right: 0;\n h4 {\n text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);\n }\n p {\n text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);\n margin-bottom: 40px;\n font-size: 36px;\n }\n a {\n padding-right: 10px;\n margin-bottom: 60px;\n }\n }\n @media ${(props) => props.theme.mobile} {\n /* p:nth-of-type(1){\n padding-right: 20px;\n padding-left: 20px;\n } */\n padding-top: 60px;\n padding-bottom: 0px;\n h4 {\n font-size: 16px;\n line-height: 20px;\n }\n p {\n font-size: 18px;\n line-height: 160%;\n text-shadow: 0px 4px 14px rgba(0, 0, 0, 0.25);\n margin-bottom: 27px;\n span {\n display: block;\n }\n }\n a {\n padding-right: 0px;\n font-size: 14px;\n line-height: 23px;\n margin-left: 65%;\n margin-bottom: 37px;\n }\n }\n`;\n\n//Recruitment end\n\nexport const OverviewFigureTop = styled.div`\n position: absolute;\n top: -200px;\n right: -168px;\n\n z-index: -1;\n /* transition: 3s; */\n div {\n position: relative;\n width: 482px;\n height: 482px;\n border: 1px dashed #ffbc00;\n box-sizing: border-box;\n border-radius: 50%;\n /* transition: 3s; */\n }\n @media ${(props) => props.theme.mobile} {\n top: -102px !important;\n right: -99px !important;\n div {\n height: 200px;\n width: 200px;\n }\n }\n`;\nexport const OverviewFigureBottom = styled.div`\n position: absolute;\n bottom: 227px;\n left: -187px;\n\n z-index: -1;\n /* transition: 3s; */\n div {\n position: relative;\n width: 482px;\n height: 482px;\n border: 1px dashed #ffbc00;\n box-sizing: border-box;\n border-radius: 50%;\n /* transition: 3s; */\n }\n @media ${(props) => props.theme.mobile} {\n bottom: 100px !important;\n left: -100px !important;\n div {\n height: 200px;\n width: 200px;\n }\n }\n`;\nexport const RecruitButton = styled.a`\n display: inline-block;\n width: auto;\n position: relative;\n transition: 0.2s;\n font-family: \"KBFG Text\";\n font-style: normal;\n font-weight: 600;\n font-size: 17px;\n line-height: 24px;\n text-align: center;\n color: #000;\n text-decoration: none;\n background: none;\n cursor: pointer;\n ${(props) => {\n var out = ``;\n switch (props.type) {\n case \"primary\": // primary 버튼일때\n out += `\n border: none;\n line-height:35px;\n height:35px;\n span {\n position:relative;\n z-index:2;\n }\n i {\n display:inline-block;\n vertical-align:middle;\n margin-left: 8px;\n border-radius: 50%;\n width: 35px;\n height: 35px;\n trasition: .3s;\n :after {\n display: inline-block;\n content: \"\";\n position: absolute;\n right: 0px;\n top: 0px;\n background-image: url(${\n props.theme.image_url\n }/common/icon-${props.icon}.svg);\n background-size: ${\n props.iconSize ? props.iconSize : \"18px 18px\"\n };\n background-repeat: no-repeat;\n background-position: center center ;\n width: 35px;\n height: 35px;\n }\n :before {\n content: '';\n right: 0px;\n top: 0px;\n display: block;\n position: absolute;\n width: 35px;\n height:35px;\n background: #f7f7f7;\n border-radius: 50%;\n transition:.3s;\n }\n }\n .load-in-view:hover &,\n .section:hover &,\n div:hover > & {\n color:#000;\n i {\n :before {\n // top: -3px;\n display: block;\n width: 120%;\n // height:40px;\n background: #FFBC00;\n border-radius: 50px;\n }\n }\n }\n .load-in-view:hover &:hover,\n .section:hover &:hover,\n div:hover > &:hover\n &:hover {\n color:#000;\n i {\n :before {\n // top: -3px;\n display: block;\n width: 120%;\n // height:40px;\n background: #f7f7f7;\n border-radius: 50px;\n }\n }\n }\n\n @media ${(props) => props.theme.tablet} {\n position:absolute;\n right: 0;\n font-size: 15px;\n }\n `;\n if (props.color === \"white\")\n out += `\n color: #fff; \n i{\n :before {\n background: #fff;\n }\n }\n `;\n if (props.color === \"bg-white\")\n out += `\n color: #000;\n i{\n :before {\n background: #fff;\n }\n }\n .section:hover &,\n div:hover > &,\n &:hover {\n color:#000;\n i {\n :before {\n background: #fff;\n }\n }\n }\n `;\n break;\n default:\n }\n return out;\n }}\n`;\n","import React, { useEffect, useRef, useState } from \"react\";\nimport {\n GetPeopleCultures,\n GetPeopleLives,\n GetPeopleMains,\n} from \"../../api/people\";\nimport Button from \"../../components/Button\";\nimport { MediaQuery, mobileQuery } from \"../../components/Grid\";\nimport LoadInView from \"../../components/LoadInView\";\nimport Popup from \"../../components/Popup\";\nimport YoutubeSlider from \"../People/components/youtubeSlick\";\nimport { KBDSYoutube, YoutubeSliderWrap } from \"../People/styled\";\n\nconst YOUTUBE_CATEGORY = [\n { content: \"PR\", key: \"promotion\" },\n { content: \"Recruit\", key: \"employment\" },\n { content: \"Culture\", key: \"group\" },\n];\nexport default function SectionYoutube() {\n const isMobile = MediaQuery(mobileQuery);\n\n const [show, setShow] = useState(false);\n\n const [pTitle, setpTitle] = useState(\"\");\n const [liveItem, setLiveItem] = useState(\"\");\n const showPopup = (args) => {\n // setpTitle(args);\n setLiveItem(args);\n setShow((p) => !p);\n };\n\n const [videoShow, setVideoShow] = useState(false);\n const showVideo = (args) => {\n setVideoShow((p) => !p);\n setYoutubeId(args);\n };\n const [yotubeId, setYoutubeId] = useState(\"\");\n const [post_list, update_post_list] = useState(0);\n\n const [live_list, update_live_list] = useState(\"\");\n\n const [youtubeCategory, setYoutubeCategory] = useState(\n YOUTUBE_CATEGORY[0].key\n );\n const [mainInfo, setMainInfo] = useState({});\n const [cultureInfo, setCultureInfo] = useState({});\n\n const [on, setOn] = useState(false);\n const playVideo = () => {\n setOn(true);\n setTimeout(() => {\n player.current && player.current.internalPlayer.playVideo();\n }, [100]);\n };\n\n const player = useRef(null);\n\n const opts = {\n height: \"418px\",\n width: \"100%\",\n playerVars: {\n autoplay: 0,\n mute: 0,\n controls: 1,\n },\n };\n\n const getCultures = () => {\n GetPeopleCultures()\n .then((response) => {\n if (response.data.body) {\n setCultureInfo(response.data.body);\n }\n })\n .catch((error) => {\n console.log(error);\n });\n };\n const getMainData = () => {\n GetPeopleMains()\n .then((response) => {\n if (response.data.body) {\n setMainInfo(response.data.body);\n }\n })\n .catch((error) => {\n console.log(error);\n });\n };\n const getLiveData = () => {\n GetPeopleLives({\n postsPerPage: 4,\n paged: 1,\n })\n .then((response) => {\n if (response.data.body.posts) {\n update_live_list(response.data.body.posts);\n }\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n useEffect(() => {\n getLiveData();\n getMainData();\n getCultures();\n }, []);\n\n const movePage = (link) => window.open(`${link}`, \"_blank\");\n return (\n <>\n Digital
\n그룹 Value 향상 및 역량 강화를 위한
디지털 사업 집중
\n
\n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default SectionVision;","import React from \"react\";\nimport Button from \"../../../components/Button\";\nimport { Br, CommonContainer } from \"../../../components/Grid\";\nimport {\n SectionSummary,\n SectionTitle,\n SeemoreContainer,\n TextArea,\n WayCardArea,\n WayCardAreaItem,\n WayWorkingWrapper,\n} from \"../styled\";\n\nconst SectionWayWorking = () => {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default SectionWayWorking;\n","import axios from './defaultClient';\n\nconst nameSpace = '/ep/v1/global';\nexport const GetMainSections = async (args) => {\n return await axios.get( nameSpace + '/main_sections/',{})\n}","import styled from \"styled-components\";\n\nexport const TitleWrapper = styled.div`\n margin-top: 119px;\n @media ${(props) => props.theme.tablet} {\n margin-top: 149px;\n }\n @media ${(props) => props.theme.moblie} {\n margin-top: 82px;\n }\n`;\nexport const TitleImage = styled.div`\n position: relative;\n margin-top: 35px;\n height: 500px;\n background-image: url('${(props) => props.bgImage}');\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n background-attachment: fixed;\n &:after{\n background:rgba(0,0,0,0.18);\n position: absolute;\n display: block;\n content:\"\";\n top:0;\n left:0;\n width: 100%;\n height: 100%;\n }\n @media ${(props) => props.theme.laptop}{\n background-attachment: scroll;\n }\n @media ${(props) => props.theme.mobile}{\n height: 250px;\n }\n`;\n\nexport const PostBadge = styled.div`\n label {\n margin-right: 10px;\n }\n @media ${(props) => props.theme.laptop} {\n padding-left: 20px;\n }\n @media ${(props) => props.theme.tablet} {\n padding-left: 0px;\n }\n @media ${(props) => props.theme.mobile} {\n label {\n padding: 0px 11px;\n font-size: 16px;\n line-height: 34px;\n margin-bottom: 10px;\n }\n }\n`;\n\nexport const PostTitle = styled.div`\n margin-top: 30px;\n font-family: \"KBFG Display\";\n font-style: normal;\n h2 {\n font-size: 38px;\n line-height: 64px;\n color: #000000;\n }\n @media ${(props) => props.theme.laptop} {\n padding-left: 20px;\n }\n @media ${(props) => props.theme.tablet} {\n padding-left: 0px;\n h2 {\n font-size: 42px;\n line-height: 62px;\n }\n }\n @media ${(props) => props.theme.mobile} {\n margin-top: 10px;\n h2 {\n font-size: 24px;\n line-height: 38px;\n }\n }\n`;\n\nexport const PostSubTitle = styled.div`\n margin-top: 43px;\n font-family: \"KBFG Text\";\n font-style: normal;\n font-weight: bold;\n transition: 0.3s;\n /* cursor:pointer;\n :hover{\n opacity: .6;\n } */\n .name {\n padding: 10px 22px;\n background: #ffffff;\n border: 1px solid #eeeeee;\n box-sizing: border-box;\n border-radius: 40px;\n font-size: 17px;\n line-height: 22px;\n color: #444444;\n display: inline-block;\n span {\n padding-left: 16px;\n }\n }\n p {\n margin-top: 15px;\n display: block;\n float: right;\n font-size: 15px;\n line-height: 19px;\n color: #bfbfbf;\n }\n @media ${(props) => props.theme.laptop} {\n padding: 0px 20px;\n }\n @media ${(props) => props.theme.tablet} {\n padding: 0px 0px;\n margin-top: 20px;\n }\n @media ${(props) => props.theme.moblie} {\n margin-top: 20px;\n .name {\n padding: 10px 15px;\n font-size: 18px;\n line-height: 23px;\n span {\n font-size: 15px;\n }\n }\n p {\n margin-top: 7px;\n font-size: 14px;\n line-height: 23px;\n }\n }\n`;\nexport const Avatar = styled.div`\n background-image: url(${(props) => props.image});\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center center;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n display: inline-block;\n vertical-align: middle;\n @media ${(props) => props.theme.laptop} {\n padding-left: 20px;\n }\n @media ${(props) => props.theme.tablet} {\n padding-left: 0px;\n }\n @media ${(props) => props.theme.mobile} {\n width: 20px;\n margin-top: 0px;\n height: 20px;\n }\n`;\n\nexport const FigureIcon = styled.div`\n position: absolute;\n top: 0px;\n right: 0px;\n height: 100%;\n ul {\n position: sticky;\n top: 50px;\n }\n li {\n display: block;\n position: relative;\n padding-bottom: 80px;\n a {\n width: 52px;\n height: 52px;\n position: absolute;\n box-sizing: border-box;\n border: 1px solid #eeeeee;\n border-radius: 50%;\n text-align: center;\n line-height: 52px;\n }\n img {\n display: inline-block;\n }\n }\n @media ${(props) => props.theme.laptop} {\n right: 100px;\n }\n @media ${(props) => props.theme.tablet} {\n right: 80px;\n }\n @media ${(props) => props.theme.mobile} {\n position: static;\n margin-top: 50px;\n margin-bottom: 0px;\n margin-left: 20px;\n margin-right: 0px;\n li {\n padding-right: 60px;\n display: inline-block;\n position: relative;\n a {\n width: 52px;\n height: 52px;\n box-sizing: border-box;\n border: 1px solid #eeeeee;\n border-radius: 50%;\n display: block;\n text-align: center;\n line-height: 52px;\n img {\n display: inline-block;\n margin-top: 0px;\n margin-left: 0px;\n }\n }\n }\n }\n`;\n\n//SectionTitle End\n\nexport const ContentWrapper = styled.div`\n margin-bottom: 81px;\n padding-top: 50px;\n .container-post_content {\n position: relative;\n }\n @media ${(props) => props.theme.mobile} {\n .container-post_content {\n padding: 0px 0px;\n }\n }\n`;\n\nexport const PostContent = styled.div`\n font-family: \"KBFG Text\";\n font-style: normal;\n position: relative;\n font-weight: normal;\n font-size: 17px;\n line-height: 32px;\n color: #444444;\n p {\n font-weight: normal;\n font-size: 17px;\n line-height: 32px;\n color: #444444;\n padding-bottom: 30px;\n }\n h3 {\n margin-bottom: 10px;\n font-size: 20px;\n line-height: 32px;\n color: #000000;\n }\n a {\n margin-top: 9px;\n font-weight: normal;\n font-size: 17px;\n line-height: 32px;\n text-decoration-line: underline;\n color: #ffac00;\n }\n .wp-block-code {\n background: #f7f7f7;\n padding: 30px;\n line-height: 20px;\n overflow-x: scroll;\n }\n .contentimg {\n position: relative;\n margin-bottom: 30.45px;\n height: 638.55px;\n background-image: url(${(props) => props.theme.image_url}/common/Singitem3.png);\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n }\n img {\n max-width: 100%;\n height: auto;\n display: block;\n margin: 25px auto;\n }\n p img {\n }\n iframe {\n max-width: 100%;\n height: auto;\n width: 100%;\n min-height: 500px;\n }\n @media ${(props) => props.theme.mobile} {\n iframe {\n min-height: 260px;\n }\n }\n`;\n\nexport const Blockquote = styled.div`\n position: relative;\n font-family: \"KBFG Text\";\n font-style: normal;\n font-weight: bold;\n font-size: 17px;\n line-height: 32px;\n color: #000000;\n text-align: center;\n height: 70px;\n margin-top: 30px;\n margin-bottom: 40px;\n padding: 19px 36px;\n background-color: #f7f7f7;\n border-left: 5px solid #ffdc00;\n`;\n\n//SectionContent End\n\nexport const CommentWrapper = styled.div`\n margin-top: 29px;\n`;\n\nexport const PostComment = styled.div`\n font-family: \"KBFG Text\";\n font-style: normal;\n h3 {\n /* padding-top:29px */\n border-top: 1px solid #eeeeee;\n font-size: 20px;\n line-height: 32px;\n color: #222222;\n }\n img {\n padding-top: 38px;\n display: inline-block;\n }\n strong {\n position: relative;\n display: block;\n margin-top: 45px;\n padding-left: 19px;\n font-size: 16px;\n font-weight: bold;\n line-height: 20px;\n color: #000000;\n small {\n padding-left: 6px;\n font-size: 13px;\n font-weight: normal;\n line-height: 17px;\n color: #888888;\n }\n }\n span {\n position: relative;\n display: block;\n font-weight: normal;\n padding-left: 19px;\n font-size: 13px;\n line-height: 20px;\n color: #888888;\n }\n p {\n border-bottom: 1px solid #eeeeee;\n margin-top: 23px;\n padding-bottom: 27px;\n font-weight: normal;\n font-size: 15px;\n line-height: 26px;\n color: #222222;\n }\n`;\n\nexport const PostCommnetBox = styled.div`\n margin-top: 61px;\n /* margin-bottom: 100px; */\n font-family: \"KBFG Text\";\n font-style: normal;\n position: relative;\n img {\n margin-right: 35px;\n }\n textarea {\n float: right;\n width: 100%;\n height: 67px;\n padding: 20px 31px;\n resize: none;\n font-weight: 300;\n font-size: 17px;\n line-height: 25px;\n color: #888888;\n background-color: #ffffff;\n border: 1px solid #e1e1e1;\n box-sizing: border-box;\n border-radius: 60px;\n }\n button {\n position: absolute;\n top: 8.5px;\n right: 14px;\n width: 100px;\n height: 50px;\n background: #ffac00;\n border: 1px solid white;\n box-sizing: border-box;\n border-radius: 60ex;\n font-weight: 500;\n font-size: 15px;\n line-height: 19xp;\n text-align: center;\n color: #ffffff;\n float: right;\n }\n`;\n\n//SectionCommnet End\n\nexport const UserWrapper = styled.div`\n margin-top: 100px;\n`;\n\nexport const UserItemBackground = styled.div`\n position: relative;\n cursor: pointer;\n &:after {\n background: #f8f8f8;\n position: absolute;\n display: block;\n content: \"\";\n top: 100px;\n left: 0;\n width: 100%;\n height: 100%;\n }\n @media ${(props) => props.theme.mobile} {\n &:after {\n content: \"\";\n top: 50px;\n }\n }\n`;\n\nexport const UserItemUser = styled.div`\n font-family: \"KBFG Text\";\n font-style: normal;\n text-align: center;\n position: relative;\n z-index: 1;\n .userimg {\n background-image: url(${(props) => props.image});\n width: 185px;\n height: 185px;\n margin: 0 auto;\n background-size: cover;\n background-repeat: no-repeat;\n border-radius: 100px;\n position: relative;\n }\n strong {\n padding-top: 40px;\n font-size: 28px;\n line-height: 36px;\n color: #444444;\n display: block;\n small {\n margin-top: 5px;\n font-weight: bold;\n font-size: 18px;\n line-height: 23px;\n color: #ffac00;\n display: block;\n }\n span {\n margin-top: 5px;\n font-weight: bold;\n font-size: 18px;\n line-height: 23px;\n color: #6c6c6c;\n }\n img {\n width: 3px;\n height: 3px;\n margin: 0px 5px;\n margin-bottom: 5px;\n }\n }\n p {\n margin-top: 13px;\n font-weight: normal;\n font-size: 17px;\n line-height: 30px;\n color: #888888;\n padding-bottom: 36px;\n }\n @media ${(props) => props.theme.tablet} {\n p {\n padding-bottom: 25px;\n }\n }\n @media ${(props) => props.theme.mobile} {\n strong {\n padding-top: 20px;\n }\n .userimg {\n width: 100px;\n height: 100px;\n }\n }\n`;\n\nexport const UserItemBadge = styled.div`\n margin-top: 20px;\n text-align: center;\n position: relative;\n z-index: 1;\n label {\n margin-right: 10px;\n }\n`;\n\nexport const UserItem = styled.div`\n z-index: 1;\n font-family: \"KBFG Dispaly\";\n font-style: normal;\n position: relative;\n text-align: center;\n font-weight: bold;\n a {\n font-family: \"KBFG Display\";\n font-style: normal;\n font-weight: bold;\n margin-top: 35px;\n font-size: 15px;\n line-height: 19px;\n color: #6c6c6c;\n }\n @media ${(props) => props.theme.laptop} {\n p {\n font-size: 18px;\n }\n }\n`;\n\nexport const UserSliderStyle = styled.div`\n position: relative;\n .slick-arrow {\n z-index: 3;\n }\n .slick-prev,\n .slick-next {\n font-size: 0;\n position: absolute;\n bottom: 20px;\n color: red;\n border: 0;\n background: none;\n z-index: 1;\n cursor: pointer;\n background: #fff;\n width: 60px;\n height: 60px;\n border-radius: 50%;\n }\n .slick-prev {\n /* left: 50%; */\n margin-left: -60px;\n /* top: 506px; */\n }\n .slick-prev:before {\n content: \"\";\n background-image: url(${(props) => props.theme.image_url}/common/arrow-before.svg);\n width: 20px;\n height: 20px;\n display: inline-block;\n background-size: 100%;\n }\n .slick-next {\n margin-right: -60px;\n /* left: 50%; */\n /* margin-left:50px; */\n /* top: 506px; */\n @media ${(props) => props.theme.tablet} {\n display: none !important;\n }\n @media ${(props) => props.theme.mobile} {\n display: none !important;\n }\n }\n .slick-next:before {\n content: \"\";\n background-image: url(${(props) => props.theme.image_url}/common/arrow-next.svg);\n width: 20px;\n height: 20px;\n display: inline-block;\n background-size: 100%;\n }\n .slick-prev:hover:after,\n .slick-next:hover:after {\n color: red;\n }\n @media ${(props) => props.theme.laptop} {\n padding: 0px 20px;\n .slick-prev,\n .slick-next {\n border-radius: 0%;\n width: 0px;\n height: 0px;\n }\n .slick-prev:before {\n display: none;\n }\n .slick-next:before {\n display: none;\n }\n }\n @media ${(props) => props.theme.tablet} {\n padding: 0px 0px;\n }\n`;\nexport const UserSlideItem = styled.div`\n margin-top: 20px;\n padding: 20px;\n background: rgba(0, 0, 0, 0.4);\n height: 180px;\n text-align: center;\n font-size: 19px;\n line-height: 32px;\n color: #ffffff;\n position: relative;\n background-image: url(${(props) => props.image});\n background-repeat: no-repeat;\n background-size: cover;\n position: relative;\n &:after {\n content: \"\";\n position: absolute;\n display: block;\n top: 0;\n left: 0;\n width: 100%;\n height: 180px;\n background: rgba(0, 0, 0, 0.5);\n }\n span {\n display: flex;\n position: relative;\n z-index: 1;\n justify-content: center;\n flex-direction: column;\n height: 100%;\n font-weight: 600;\n }\n`;\nexport const UserSliderButtons = styled.div`\n z-index: 1;\n a {\n position: absolute;\n display: block;\n top: 50%;\n margin-top: -17px;\n width: 35px;\n height: 35px;\n text-align: center;\n line-height: 35px;\n background: #fff;\n border-radius: 50%;\n text-decoration: none;\n }\n a:first-child {\n left: -60px;\n }\n a:last-child {\n right: -60px;\n }\n`;\n\n//SectionUser End\n\nexport const PostCardWrapper = styled.div`\n margin-top: 180px;\n h3 {\n font-family: \"KBFG Display\";\n font-style: normal;\n font-size: 28px;\n line-height: 35px;\n color: #000000;\n text-align: center;\n }\n @media ${(props) => props.theme.laptop} {\n margin-top: 160px;\n }\n @media ${(props) => props.theme.tablet} {\n margin-top: 145px;\n }\n @media ${(props) => props.theme.mobile} {\n margin-top: 95px;\n h3 {\n font-size: 24px;\n line-height: 30px;\n }\n }\n`;\n","import { PostTitle } from '../views/Story/Single/styled';\nimport axios from './defaultClient';\n\nconst nameSpace = '/ep/v1';\n\nexport const GetPeoplePosts = async (args) => {\n return await axios.get( nameSpace + '/youtubes',{ \n params:{\n postsPerPage: args.postsPerPage,\n paged: args.paged,\n slug: args.slug,\n }\n })\n}\nexport const GetPeopleLives = async (args) => {\n return await axios.get( nameSpace + '/lives',{ \n params:{\n postsPerPage: args.postsPerPage,\n paged: args.paged,\n }\n })\n}\nexport const GetPeopleCultures = async (args) => {\n return await axios.get( nameSpace + '/cultures',{ \n params:{\n }\n })\n}\nexport const GetPeopleMains = async (args) => {\n return await axios.get( nameSpace + '/mains',{ \n params:{\n }\n })\n}\n","import styled from \"styled-components\";\n\n//BusinessCard//\n\nexport const CardWrapper = styled.div`\n width: 33.33%;\n height: 100%;\n display: inline-block;\n padding: 0 15px;\n`;\n\nexport const CardStyle = styled.div`\n box-sizing: border-box;\n height: 100%;\n background: rgba(255, 255, 255, 0.96);\n padding-top: 43px;\n padding-left: 49px;\n h4 {\n font-family: \"KBFG Display\";\n font-style: normal;\n font-weight: 500;\n font-size: 24px;\n line-height: 162.5%;\n color: #000000;\n margin-bottom: 10px;\n }\n h5 {\n font-family: \"KBFG Text\";\n font-style: normal;\n font-weight: 300;\n font-size: 17px;\n line-height: 32px;\n color: #666666;\n white-space: pre;\n }\n`;\n\n//BusinessCard//\n\n//\n\nexport const StorySliderWraaper = styled.div`\n ${(props) => (props.type ? ` margin-bottom: 170px;` : ``)}\n margin-bottom: 205px;\n ${(props) =>\n props.style && props.style.marginBottom\n ? `margin-bottom: ${props.style.marginBottom} !important;`\n : ``}\n transform: translateX(-100px);\n .slick-slider {\n padding: 0px 80px;\n }\n .slick-dots li.slick-active button:before {\n ${(props) =>\n props.style && props.style.barColor\n ? `background: ${props.style.barColor} !important;`\n : ``}\n }\n @media ${(props) => props.theme.mobile} {\n margin-bottom: 0 !important;\n }\n`;\n\nexport const StorySliderStyle = styled.div`\n margin-top: 28px;\n text-align: center;\n margin-bottom: 0;\n @media ${(props) => props.theme.mobile} {\n margin-top: 0;\n /* margin-top: 0px;\n & > div {\n overflow-y: hidden;\n overflow-x: scroll;\n }\n & > div > div {\n width: 3920px;\n text-align: left;\n }\n & > div > div > div {\n width: 325px;\n }\n & section > div {\n width: 300px;\n height: 300px;\n padding-bottom: 0px;\n } */\n }\n`;\n\nexport const StoryCardWrapper = styled.div`\n padding: 36px 14px;\n padding-bottom: 0px;\n`;\n\nexport const Storytext = styled.div`\n position: relative;\n span {\n font-family: \"KBFG Display\";\n font-style: normal;\n font-weight: 300;\n font-size: 10px;\n line-height: 37px;\n color: #515151;\n }\n span:last-child {\n right: 0;\n position: absolute;\n }\n`;\n\nexport const Storyimg = styled.div`\n width: 388px;\n height: 388px;\n background-image: url(\"../Group102.png\");\n background-size: cover;\n background-position: center center;\n /* @media ${(props) => props.theme.laptop} {\n height: 0;\n weight: 100%;\n padding: 50px;\n\n position: relative;\n }\n @media ${(props) => props.theme.tablet} {\n }\n @media ${(props) => props.theme.mobile} {\n width: 100%;\n } */\n`;\n\n//\n\n//slick//\n\nexport const settings = {\n infinite: true,\n autoplay: 0,\n speed: 500,\n slidesToShow: 1,\n dots: true,\n arrows: false,\n rows: 1,\n slidesToScroll: 1,\n autoplaySpeed: 3000, // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)\n pauseOnHover: true,\n centerPadding: \"0px\",\n variableWidth: true,\n\n // responsive: [\n // {\n // breakpoint: 1800,\n // settings: {\n // slidesToShow: 2,\n // slidesToScroll: 1,\n // },\n // },\n // {\n // breakpoint: 1480,\n // settings: {\n // slidesToShow: 2,\n // slidesToScroll: 1,\n // infinite: true,\n // },\n // },\n // {\n // breakpoint: 1024,\n // settings: {\n // slidesToShow: 2,\n // slidesToScroll: 1,\n // },\n // },\n // {\n // breakpoint: 770,\n // settings: 'unslick',\n // },\n // ],\n};\n\nexport const SlickWrap = styled.div`\n .slick-arrow {\n z-index: 3;\n }\n .slick-initialized .slick-slide {\n display: block;\n }\n .slick-list {\n overflow: visible;\n padding: 0px !important;\n }\n .slick-slide:not(.slick-active) {\n }\n .slick-arrow {\n }\n .slick-center {\n position: relative;\n /* div{\n :after{\n display: block;\n position: absolute;\n content: \"\";\n background: rgba(255, 25, 255, 0);\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transition: 0.4s; \n }\n } */\n }\n\n .slick-track div:nth-child(7),\n .slick-track div:nth-child(8),\n .slick-track div:nth-child(9) {\n display: none;\n }\n .slick-prev,\n .slick-next {\n font-size: 0;\n position: absolute;\n bottom: 20px;\n color: red;\n border: 0;\n background: none;\n z-index: 1;\n cursor: pointer;\n background: #fff;\n width: 60px;\n height: 60px;\n border-radius: 50%;\n }\n .slick-prev {\n left: calc(50% - (50vw - 728px));\n transform: translateX(-150%);\n top: 506px;\n @media ${(props) => props.theme.tablet} {\n /* top: 400px; */\n }\n }\n .slick-slide {\n /* width: 1252px; */\n }\n .slick-prev:before {\n content: url(\"/arrow-before.svg\");\n }\n .slick-next {\n right: auto;\n left: calc(50% - (50vw - 728px));\n transform: translateX(50%);\n top: 506px;\n @media ${(props) => props.theme.tablet} {\n /* top: 400px; */\n }\n }\n .slick-next:before {\n content: url(\"/arrow-next.svg\");\n }\n .slick-prev:hover:after,\n .slick-next:hover:after {\n color: red;\n }\n .slick-dots {\n bottom: -65px;\n left: calc(0% - (-728px + 50vw));\n }\n .slick-dots li {\n width: 76px;\n margin: 0 15px;\n }\n .slick-dots li button {\n width: 76px;\n height: 42px;\n }\n .slick-track {\n display: flex;\n }\n .slick-dots li button:before {\n display: block;\n width: 76px;\n height: 2px;\n font-size: 0;\n margin-top: 45px;\n margin-bottom: 45px;\n background-color: #000;\n transform: translateY(-25px);\n }\n @media (max-width: 1332px) {\n .slick-dots {\n bottom: -40px;\n /* bottom: -65px; */\n /* left: calc(0% - (-728px + 50vw)); */\n left: 70px;\n }\n .slick-dots li {\n width: 45px;\n }\n .slick-dots li button {\n width: 45px;\n }\n .slick-dots li button:before {\n width: 45px;\n }\n .slick-dots li {\n margin: 0 6px;\n }\n }\n @media ${(props) => props.theme.mobile} {\n .slick-dots {\n bottom: -20px;\n }\n .slick-list {\n margin-bottom: 40px;\n }\n }\n`;\n\n//slick//\n\n//ESGslick//\n\n//ESGslick//\n\nexport const Card = styled.div`\n padding: 0 20px;\n width: 1292px !important;\n > div {\n position: relative;\n background-color: #eee;\n padding-bottom: 40%;\n border-radius: 0 30px 0 30px;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n overflow: hidden;\n padding: 70px 66px calc(40% - 70px) 66px;\n cursor: pointer;\n :after {\n position: absolute;\n display: block;\n content: \"\";\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n background-color: rgba(0, 0, 0, 0.26);\n }\n .btn {\n position: absolute;\n z-index: 1;\n width: 100px;\n height: 100px;\n top: 70px;\n background-image: url(\"https://wp.daitso.kds.co.kr/wp-content/plugins/ep-manager/assets/images/common/icon-play.svg\");\n background-size: 167%;\n background-repeat: no-repeat;\n background-position: center;\n }\n .content {\n /* display: flex;\n flex-wrap: wrap;\n align-items: space-between; */\n position: absolute;\n z-index: 1;\n word-break: keep-all;\n text-align: left;\n bottom: 30px;\n left: 0px;\n padding: 0 30px;\n div {\n font-size: 42px;\n font-weight: bold;\n line-height: 160%;\n color: #ffffff;\n }\n .youtube-desc > p {\n font-size: 16px;\n font-weight: normal;\n line-height: 160%;\n color: #ffffff;\n }\n }\n }\n @media (max-width: 1332px) {\n width: calc(100vw - 80px) !important;\n > div {\n .btn {\n width: 80px;\n height: 80px;\n top: 15%;\n }\n .content {\n bottom: 5%;\n transform: scale(0.8);\n transform-origin: left;\n }\n }\n }\n @media (max-width: 960px) {\n width: calc(100vw - 80px) !important;\n > div {\n .btn {\n width: 70px;\n height: 70px;\n }\n .content {\n bottom: 0%;\n transform: scale(0.7);\n transform-origin: left;\n }\n }\n }\n @media (max-width: 770px) {\n width: calc(100vw - 80px) !important;\n > div {\n padding: 70px 30px calc(40% - 70px) 30px;\n .btn {\n width: 50px;\n height: 50px;\n }\n .content {\n bottom: 0%;\n transform: scale(0.7);\n transform-origin: left bottom;\n }\n }\n }\n /* @media (max-width: 500px) {\n width: calc(100vw - 80px) !important;\n > div {\n padding: 70px 30px calc(40% - 70px) 30px;\n .btn {\n width: 50px;\n height: 50px;\n top: 20%;\n }\n .content {\n bottom: 0%;\n transform: scale(1);\n transform-origin: left bottom;\n }\n }\n } */\n @media (max-width: 680px) {\n padding: 0 10px;\n width: calc(100vw - 40px) !important;\n > div {\n padding-bottom: 66.6%;\n padding: 0 40px 66.6% 30px;\n\n .btn {\n position: absolute;\n z-index: 1;\n top: 10%;\n left: 28px;\n width: 70px;\n height: 70px;\n }\n\n .content {\n /* display: flex;\n flex-wrap: wrap;\n align-items: space-between; */\n position: absolute;\n z-index: 1;\n text-align: left;\n bottom: 10%;\n padding-right: 20px;\n transform: scale(1);\n div {\n font-size: 30px;\n line-height: 160%;\n margin-bottom: 10px;\n }\n .youtube-desc {\n display: flex;\n overflow: hidden;\n }\n .youtube-desc > p {\n font-size: 18px;\n line-height: 160%;\n margin-bottom: 0;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n word-wrap: break-word;\n height: 320%;\n }\n }\n }\n }\n @media (max-width: 450px) {\n padding: 0 10px;\n width: calc(100vw - 40px) !important;\n > div {\n padding-bottom: 66.6%;\n padding: 0 40px 66.6% 30px;\n\n .btn {\n position: absolute;\n z-index: 1;\n top: 20px;\n left: 28px;\n width: 32px;\n height: 32px;\n }\n\n .content {\n /* display: flex;\n flex-wrap: wrap;\n align-items: space-between; */\n position: absolute;\n z-index: 1;\n text-align: left;\n bottom: 10%;\n padding-right: 20px;\n transform: scale(1);\n div {\n font-size: 20px;\n line-height: 160%;\n margin-bottom: 10px;\n }\n .youtube-desc > p {\n font-size: 12px;\n line-height: 160%;\n margin-bottom: 0;\n }\n }\n }\n }\n`;\n","import React, { useEffect, useState } from \"react\";\nimport Slider from \"react-slick\";\nimport { GetPeoplePosts } from \"../../../../api/people\";\nimport {\n Card,\n settings,\n SlickWrap,\n StorySliderStyle,\n StorySliderWraaper,\n} from \"./styled\";\n// import LoadInView from '../../../components/LoadInView';\n// import {animteScrollTo} from '../../../lib/common';\n\nconst YoubtubeSlider = (props) => {\n const [post_list, update_post_list] = useState(0);\n const [current_paged, set_current_paged] = useState(0);\n const [total_page, set_total_page] = useState(0);\n const [list_tags, set_list_tags] = useState(0);\n const [paged, set_paged] = useState(1);\n useEffect(() => {\n GetPeoplePosts({\n postsPerPage: 10,\n paged,\n slug: props.youtubeCategory,\n })\n .then((response) => {\n if (response.data.body.total) {\n set_total_page(response.data.body.total);\n set_current_paged(response.data.body.paged);\n update_post_list(response.data.body.posts);\n set_list_tags(response.data.body.tags);\n }\n })\n .catch((error) => {\n console.log(error);\n });\n }, [paged, props.youtubeCategory]);\n return (\n \n {/* react slick slide button, bottom 65px */}\n \n {post_list ? (\n \n \n {post_list\n ? post_list.slice(0, 3).map((post, key) => (\n {\n props.onShow(post.youtubeLink);\n }}\n >\n \n \n
\n \n ))\n : \"로딩\"}\n \n \n ) : (\n SM
\n주도성, 핵심역량 기반. 지속적인 혁신 유도로
고객사에 차별적인 IT서비스 제공
\n
\n \n \n \n
\n \n 기본에 충실하자\n {/* 전문가라면 보이지 않는 코드 한 줄에도 정성을 쏟는 디테일이 필요합니다. 작은 것까지 섬세하게 마무리하는 것이 진정한 전문가의 자세입니다. */}\n
\n\n \n
\n \n 우리의 1시간은 고객의 1년입니다.\n {/* 우리가 고객사에서 1년간 구축한 시스템은 향후 10년 동안 고객이 사용하게 될 업무환경이라는 책임감과 자부심으로 프로젝트에 임합니다. */}\n
\n\n \n
\n \n 매뉴얼보다 더 좋은 방법이 있다면 그것이 매뉴얼\n {/* 효율적이고 효과적인 방식이 있다면 이것이 표준! 일이 중심이고 그에 따라 형식과 절차는 개선합니다. */}\n
\n\n
\n {post.postTitle}
\n \n
\n {post.desc}
\n\n \n \n {isMobile && (\n movePage(\"https://www.youtube.com/@kbds\")}\n >\n 자세히보기\n \n )}\n
\n \n movePage(\"https://www.youtube.com/@kbds\")}\n // onClick={() => showPopup('KBDS Youtube')}\n >\n KBDS Youtube\n \n )}\n
\n \n
\n {!isMobile && (\n KBDS Youtube
\nKB데이타시스템 공식 유튜브
\n \n {YOUTUBE_CATEGORY.map((item) => (\n
\n 전문적인 IT서비스
그룹IT혁신 및 가치 창출 \n
\n 그룹IT혁신 및 가치 창출
\n IT전문인력 집중 양성으로
그룹IT역량 강화에 기여 \n
\n 그룹IT역량 강화에 기여
\n 선진 IT 서비스 업체들과의 전략적
파트너십을 통한 핵심 기술력 확보 \n
\n \n ) : ''}\n 파트너십을 통한 핵심 기술력 확보
Value creation
\n\n 전문적인 IT서비스로 그룹IT
\n 혁신 및 가치 창출\n
Improving
\n\n IT전문인력 집중 양성으로 그룹IT
\n 역량 강화에 기여\n
Partnership
\n\n 선진 IT서비스 업체들과의 전략적
\n 파트너십등을 통한 핵심 기술력 확보\n
{slide.slider_desc}
\n\n Digital Transformation을\n
\n 소개합니다.\n
\n KB데이타시스템이 선도합니다.
\n\n
\n {/* - \n {props.items ? props.items.map((item, key) => ()) : ''}\n \n
\n \n \n \n
\n }\n // date=\"2020.04.12\"\n index={4}\n image={\n \"https://wp.daitso.kds.co.kr/wp-content/uploads/2020/10/esg_2-scaled.jpg\"\n }\n />\n SI
\n그룹 IT사업 추진에서 서비스 개선 및 강화를
위한 중추적인 개발 역할 수행
\n
\n \n \n \n \n
\n }\n // date=\"2020.04.12\"\n index={3}\n image={\n \"https://wp.daitso.kds.co.kr/wp-content/uploads/2020/10/esg_4-scaled.jpg\"\n }\n />\n Digital
\n그룹 Value 향상 및 역량 강화를 위한
디지털 사업 집중
\n
\n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default SectionVision;","import React from \"react\";\nimport Button from \"../../../components/Button\";\nimport { Br, CommonContainer } from \"../../../components/Grid\";\nimport {\n SectionSummary,\n SectionTitle,\n SeemoreContainer,\n TextArea,\n WayCardArea,\n WayCardAreaItem,\n WayWorkingWrapper,\n} from \"../styled\";\n\nconst SectionWayWorking = () => {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default SectionWayWorking;\n","import gsap from \"gsap\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport ScrollMagic from \"scrollmagic\";\nimport { ScrollMagicPluginGsap } from \"scrollmagic-plugin-gsap\";\nimport LoadInView from \"../../components/LoadInView\";\nimport MainContainer from \"../../components/MainContainer\";\nimport SectionBusiness from \"./components/SectionBusiness\";\nimport SectionDX from \"./components/SectionDX\";\nimport SectionESG from \"./components/SectionESG\";\nimport SectionMain from \"./components/SectionMain\";\nimport SectionMenu from \"./components/SectionMenu\";\nimport SectionOverview from \"./components/SectionOverview\";\nimport SectionRecruit from \"./components/SectionRecruit\";\nimport SectionStory from \"./components/SectionStory\";\nimport SectionVision from \"./components/SectionVision\";\nimport SectionWayWorking from \"./components/SectionWayworking\";\nimport { HomeWrapper } from \"./styled\";\n// import { motion } from 'framer-motion';\nimport { GetMainSections } from \"../../api/global\";\nimport SectionYoutube from \"../About/SectionYoutube\";\n\nScrollMagicPluginGsap(ScrollMagic, gsap);\n\nconst Qrdemo = () => {\n let topBoxEl = useRef(null);\n let sliderTitleEl = useRef(null);\n const [main_sections, set_main_sections] = useState(0);\n const [is_load, set_is_load] = useState(0);\n\n const [active, setActive] = useState(true);\n\n const scrollmagic = () => {\n var controller = new ScrollMagic.Controller();\n if (main_sections) {\n main_sections.map((item, key) => {\n switch (item.slug) {\n case \"overview\":\n var overview = new ScrollMagic.Scene({\n triggerElement: \"#overview\",\n duration: \"100%\",\n })\n .setClassToggle(\"#overview_nav\", \"active\")\n .addTo(controller);\n break;\n case \"business\":\n var business = new ScrollMagic.Scene({\n triggerElement: \"#business\",\n duration: \"100%\",\n })\n .setClassToggle(\"#business_nav\", \"active\")\n .addTo(controller);\n break;\n case \"dx\":\n var dx = new ScrollMagic.Scene({\n triggerElement: \"#dx\",\n duration: \"100%\",\n })\n .setClassToggle(\"#dx_nav\", \"active\")\n .addTo(controller);\n break;\n case \"vision\":\n var vision = new ScrollMagic.Scene({\n triggerElement: \"#vision\",\n duration: \"100%\",\n })\n .setClassToggle(\"#vision_nav\", \"active\")\n .addTo(controller);\n break;\n case \"wayworking\":\n var wayworking = new ScrollMagic.Scene({\n triggerElement: \"#wayworking\",\n duration: \"100%\",\n })\n .setClassToggle(\"#wayworking_nav\", \"active\")\n .addTo(controller);\n break;\n case \"busirecruitness\":\n var recruit = new ScrollMagic.Scene({\n triggerElement: \"#recruit\",\n duration: \"100%\",\n })\n .setClassToggle(\"#recruit_nav\", \"active\")\n .addTo(controller);\n break;\n case \"esg\":\n var esg = new ScrollMagic.Scene({\n triggerElement: \"#esg\",\n duration: \"100%\",\n })\n .setClassToggle(\"#esg_nav\", \"active\")\n .addTo(controller);\n break;\n case \"youtube\":\n var youtube = new ScrollMagic.Scene({\n triggerElement: \"#youtube\",\n duration: \"100%\",\n })\n .setClassToggle(\"#youtube_nav\", \"active\")\n .addTo(controller);\n break;\n case \"story\":\n var story = new ScrollMagic.Scene({\n triggerElement: \"#story\",\n duration: \"100%\",\n })\n .setClassToggle(\"#story_nav\", \"active\")\n .addTo(controller);\n break;\n default:\n return;\n }\n });\n }\n };\n useEffect(() => {\n if (!is_load) {\n GetMainSections()\n .then((response) => {\n if (response.data.code == \"200\") {\n set_main_sections(response.data.body);\n set_is_load(1);\n scrollmagic();\n }\n })\n .catch((err) => {\n console.log(err);\n set_is_load(1);\n });\n }\n });\n return (\n \n \n \n \n );\n case \"business\":\n return (\n \n \n );\n case \"dx\":\n return (\n \n \n );\n case \"vision\":\n return (\n \n \n );\n\n case \"wayworking\":\n return (\n \n \n );\n case \"recruit\":\n return (\n \n \n );\n case \"esg\":\n return (\n \n \n );\n case \"youtube\":\n return (\n \n \n );\n case \"story\":\n return (\n \n \n );\n default:\n return;\n }\n })\n : \"\"}\n \n \n );\n};\n\nexport default Qrdemo;\n","import React, { useEffect, useRef } from \"react\";\nimport styled from \"styled-components\";\n// import Scene from \"./Scene\";\nimport LoadInView from \"../LoadInView\";\n\nconst FigureCardStyle = styled.div`\n display: inline-block;\n width: 50%;\n padding: 35px;\n position: relative;\n overflow: hidden;\n transition: 0.5s;\n &:nth-child(4),\n &:nth-child(3) {\n transform: translateX(60px);\n }\n &:nth-child(4) {\n transform: translate(60px, 80px);\n }\n\n &:nth-child(2),\n &:nth-child(6) {\n transform: translateY(80px);\n }\n\n & > span {\n display: block;\n font-size: 14px;\n width: 120px;\n color: #888;\n margin-top: 20px;\n text-align: center;\n transform: rotate(-90deg);\n position: absolute;\n left: -40px;\n top: 75px;\n }\n\n @media ${(props) => props.theme.laptop} {\n width: 50%;\n &:nth-child(4),\n &:nth-child(3) {\n transform: translateX(30px);\n }\n &:nth-child(4) {\n transform: translate(30px, 40px);\n }\n\n &:nth-child(2),\n &:nth-child(6) {\n transform: translateY(40px);\n }\n }\n @media ${(props) => props.theme.tablet} {\n width: 33.3%;\n &:nth-child(4),\n &:nth-child(3) {\n /* transform: translateX(30px); */\n transform: none;\n }\n &:nth-child(4) {\n /* transform: translate(30px, 40px); */\n transform: none;\n }\n\n &:nth-child(2),\n &:nth-child(5) {\n transform: translateY(60px);\n }\n }\n @media ${(props) => props.theme.mobile} {\n width: 240px;\n padding: 10px 0px;\n padding-right: 20px;\n\n &:nth-child(4),\n &:nth-child(3) {\n transform: none;\n }\n &:nth-child(4) {\n transform: none;\n }\n\n &:nth-child(2),\n &:nth-child(5),\n &:nth-child(6) {\n transform: none;\n }\n & > span {\n display: none;\n }\n }\n .tile {\n width: 100%;\n padding-bottom: 130%;\n margin-bottom: 0px;\n position: relative;\n /* border: 1px solid #eee; */\n border-radius: 0px 30px;\n /* transition: .5s; */\n -webkit-transition: background 1s, border-radius 1s;\n transition: background 1s, border-radius 1s;\n overflow: hidden;\n :hover {\n border-radius: 0px 30px;\n }\n /* overflow:hidden; */\n }\n .tile.slide--current {\n --x: 0;\n --y: 0;\n --d: 50;\n\n transition: transform 1000ms cubic-bezier(0.25, 1, 0.35, 1);\n opacity: 1;\n pointer-events: auto;\n user-select: auto;\n overflow: hidden;\n @media (hover: hover) {\n &:hover .slide__image-wrapper {\n transform: scale(1.1)\n translate(\n calc(var(--x) / var(--d) * 1px),\n calc(var(--y) / var(--d) * 1px)\n );\n }\n &:hover .tile__image {\n -webkit-filter: none !important;\n filter: none !important;\n }\n }\n .slide__image-wrapper:after {\n content: \"\";\n display: block;\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n transition: 0.5s;\n background: rgba(0, 0, 0, 0);\n /* border-radius: 0px 30px; */\n\n z-index: 1;\n position: absolute;\n width: 0;\n height: 100%;\n top: 0;\n transform: skewX(-45deg);\n left: -65%;\n transition: all 0.45s cubic-bezier(0.42, 0, 0.58, 1);\n }\n /* &:hover .slide__image-wrapper:after {\n width: 245%;\n left: -65%;\n background-color: #60584c;\n opacity: 0.8;\n } */\n /* &:hover .tile__content {\n opacity: 1;\n } */\n &:hover .slide__image-wrapper {\n filter: blur(5px);\n -webkit-filter: blur(5px);\n }\n\n .slide__image-wrapper:after {\n width: 245%;\n left: -65%;\n background-color: #60584c;\n opacity: 0.8;\n }\n .tile__content {\n opacity: 1;\n }\n }\n\n .slide__image-wrapper {\n /* border-radius: 0px 30px; */\n background-color: var(--color-accent);\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n position: absolute;\n left: 0px;\n top: 0px;\n transition: transform calc(800ms / 4) cubic-bezier(0.25, 1, 0.35, 1);\n transition: 0.25s;\n }\n\n .tile__image {\n --d: 20;\n border-radius: 0px 30px;\n max-width: 100%;\n pointer-events: none;\n opacity: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n position: absolute;\n top: 0px;\n left: 0px;\n\n -webkit-filter: grayscale(100%);\n filter: gray;\n transition: opacity 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.84),\n transform 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.84);\n user-select: none;\n @media (hover: hover) {\n .slide--current:hover & {\n transform: translate(\n calc(var(--x) / var(--d) * 1px),\n calc(var(--y) / var(--d) * 1px)\n );\n }\n }\n @media ${(props) => props.theme.mobile} {\n border: 2px solid #eee;\n }\n }\n\n .tile__content {\n opacity: 0;\n max-width: 100%;\n z-index: 9;\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0px;\n left: 0px;\n color: #fff;\n padding: 29px;\n box-sizing: border-box;\n transition: 0.6s;\n h4 {\n margin-bottom: 15px;\n display: block;\n font-size: 20px;\n line-height: 36px;\n }\n span {\n display: block;\n margin-bottom: 15px;\n font-size: 14px;\n }\n p {\n font-size: 14px;\n line-height: 30px;\n }\n }\n @media ${(props) => props.theme.laptop} {\n .tile__content {\n padding: 30px;\n h4 {\n margin-bottom: 15px;\n display: block;\n font-size: 18px;\n line-height: 30px;\n }\n span {\n display: block;\n margin-bottom: 15px;\n font-size: 11px;\n }\n p {\n font-size: 11px;\n line-height: 25px;\n }\n }\n }\n @media ${(props) => props.theme.tablet} {\n .tile__content {\n padding: 30px;\n h4 {\n margin-bottom: 15px;\n display: block;\n font-size: 18px;\n line-height: 30px;\n }\n span {\n display: block;\n margin-bottom: 25px;\n font-size: 11px;\n }\n p {\n font-size: 12px;\n line-height: 25px;\n }\n }\n }\n @media ${(props) => props.theme.mobile} {\n .tile {\n border-radius: 0px !important;\n }\n .tile__image {\n border-radius: 0px;\n }\n .tile__content {\n border-radius: 0px !important;\n padding: 30px;\n z-index: 2;\n h4 {\n margin-bottom: 15px;\n display: block;\n font-size: 17px;\n line-height: 23px;\n }\n span {\n display: block;\n margin-bottom: 15px;\n font-size: 13px;\n }\n p {\n word-break: keep-all;\n font-size: 12px;\n line-height: 26px;\n }\n }\n }\n`;\n\nconst FigureCard = (props) => {\n var scene = 0;\n const slide = useRef(null);\n useEffect(() => {\n // scene = new Scene(props.member.member_type+'_'+props.member.id);\n });\n\n const handleMouseMove = (event) => {\n const el = slide.current;\n const r = el.getBoundingClientRect();\n\n el.style.setProperty(\n \"--x\",\n event.clientX - (r.left + Math.floor(r.width / 2))\n );\n el.style.setProperty(\n \"--y\",\n event.clientY - (r.top + Math.floor(r.height / 2))\n );\n };\n\n const handleMouseLeave = (event) => {\n slide.current.style.setProperty(\"--x\", 0);\n slide.current.style.setProperty(\"--y\", 0);\n };\n\n const imageLoaded = (event) => {\n event.target.style.opacity = 1;\n };\n\n return (\n \n \n \n \n \n \n {props.member.title}\n \n );\n};\n\nexport default FigureCard;\n","import React from 'react';\nimport FigureCard from '../../../components/FigureCard/index.jsx';\n\nimport {BusinessSlickWrap,\n} from '../styled';\n\n\nconst BusinessItems = (props) => {\n return (\n \n \n );\n};\n\nexport default BusinessItems;","import React from \"react\";\nimport Popup from \"../../components/Popup\";\nimport styled from \"styled-components\";\nimport { Row, Col, Br } from \"../../components/Grid\";\nimport { ColWrap, RowWrap } from \"../../components/Grid/styled\";\n\nconst PopupCloseButton = styled.div`\n text-align: center;\n margin-top: 40px;\n position: relative;\n a {\n background: rgba(96, 88, 76, 0.88);\n color: #ffffff;\n font-family: \"KBFG Display\";\n font-style: normal;\n font-weight: 600;\n font-size: 17px;\n line-height: 21px;\n padding: 14px 85px;\n display: inline-block;\n text-decoration: none;\n }\n @media ${(props) => props.theme.mobile} {\n margin-top: 30px;\n margin-bottom: 30px;\n }\n`;\n\nconst BusinessPopupStyle = styled.div`\n // 공통 Span\n\n span {\n word-break: keep-all;\n display: block;\n margin-top: -30px;\n margin-bottom: 20px;\n font-family: \"KBFG Display\";\n font-style: normal;\n font-weight: 300;\n font-size: 14px;\n line-height: 24px;\n color: #666666;\n }\n\n // 공통 Span End\n\n // 공통 popup\n\n .popup {\n }\n // 공통 popup End\n\n // SI Popup\n\n .sipopup {\n background: #f8f8f8;\n padding: 30px 30px;\n font-family: \"KBFG Display\";\n font-style: normal;\n p {\n font-weight: 300;\n font-size: 14px;\n line-height: 24px;\n color: #444444;\n }\n }\n\n // SI Popup End\n\n // SM Popup\n\n .smpopup {\n background: #f8f8f8;\n padding: 30px 30px;\n margin-bottom: 20px;\n font-family: \"KBFG Display\";\n font-style: normal;\n h5 {\n font-size: 18px;\n line-height: 24px;\n font-weight: 700;\n color: #000000;\n margin-bottom: 10px;\n }\n p {\n position: relative;\n font-weight: 300;\n font-size: 14px;\n line-height: 24px;\n color: #444444;\n }\n }\n\n // SM Popup End\n\n // Digital Kronos\n\n .kronospopup {\n background: #f8f8f8;\n padding: 30px 30px;\n margin-bottom: 20px;\n font-family: \"KBFG Display\";\n font-style: normal;\n h5 {\n font-size: 18px;\n line-height: 24px;\n color: #000000;\n }\n ul {\n font-weight: 300;\n font-size: 14px;\n line-height: 24px;\n color: #444444;\n padding: 10px 20px 0px 20px;\n }\n li {\n word-break: keep-all;\n }\n }\n b {\n display: block;\n font-weight: 300;\n font-size: 14px;\n line-height: 24px;\n color: #444444;\n margin-top: 12px;\n }\n\n // Digital Kronos End\n\n // Digital Open API\n\n .apipopup {\n ${RowWrap} {\n margin: 0 -15px;\n }\n ${ColWrap} {\n & > div {\n box-sizing: border-box;\n position: relative;\n padding: 0px 10px;\n }\n }\n }\n .api {\n min-height: 160px;\n background: #f8f8f8;\n padding: 30px 30px;\n margin-bottom: 20px;\n font-family: \"KBFG Display\";\n font-style: normal;\n h5 {\n font-size: 18px;\n line-height: 24px;\n color: #000000;\n }\n ul {\n font-weight: 300;\n font-size: 14px;\n line-height: 24px;\n color: #444444;\n padding: 10px 20px 0px 20px;\n }\n ul > li > p {\n font-weight: 300;\n font-size: 14px;\n line-height: 24px;\n color: #999999;\n }\n }\n\n // Digital Open API End\n\n // Digital R&D\n\n .rnd_top {\n height: auto;\n background: #f8f8f8;\n margin-bottom: 20px;\n font-family: \"KBFG Display\";\n font-style: normal;\n text-align: center;\n padding: 80px 4px;\n h5 {\n font-size: 16px;\n line-height: 30px;\n color: #000000;\n }\n }\n .rnd_center {\n height: auto;\n background: #f8f8f8;\n margin-bottom: 20px;\n font-family: \"KBFG Display\";\n font-style: normal;\n text-align: center;\n padding: 64px 27px;\n h5 {\n font-size: 16px;\n line-height: 30px;\n color: #000000;\n }\n }\n .rnd_bottom {\n height: auto;\n background: #f8f8f8;\n margin-bottom: 20px;\n font-family: \"KBFG Display\";\n font-style: normal;\n text-align: center;\n padding: 94px 3px;\n h5 {\n font-size: 16px;\n line-height: 30px;\n color: #000000;\n }\n }\n\n .rap {\n height: auto;\n background: #f8f8f8;\n box-sizing: border-box;\n margin-bottom: 20px;\n font-family: \"KBFG Display\";\n font-style: normal;\n padding: 30px 30px;\n ul {\n padding: 10px 20px 0px 20px;\n font-weight: 300;\n font-size: 14px;\n line-height: 24px;\n color: #444444;\n }\n h5 {\n font-size: 18px;\n line-height: 24px;\n color: #000000;\n }\n }\n li.sub {\n color: #999999;\n font-weight: 300;\n font-size: 13px;\n line-height: 26px;\n @media ${(props) => props.theme.mobile} {\n }\n }\n .rndpopup {\n }\n // Digital R&D End\n .br {\n margin-right: 10px;\n }\n .li {\n margin-right: 15px;\n }\n @media ${(props) => props.theme.laptop} {\n .br {\n margin-right: 0px;\n }\n .li {\n margin-right: 0px;\n }\n }\n @media ${(props) => props.theme.tablet} {\n }\n @media ${(props) => props.theme.mobile} {\n span {\n margin-top: 0px;\n }\n .popup {\n }\n .sipopup {\n p {\n font-size: 13px;\n }\n }\n .smpopup {\n h5 {\n font-size: 16px;\n font-weight: 600;\n }\n p {\n font-size: 13px;\n }\n }\n .rnd_top {\n margin-bottom: 0px;\n padding: 20px 0px;\n h5 {\n font-size: 16px;\n line-height: 10px;\n }\n }\n .rnd_center {\n margin-bottom: 0px;\n padding: 20px 0px;\n h5 {\n font-size: 16px;\n line-height: 10px;\n }\n }\n .rnd_bottom {\n margin-bottom: 0px;\n padding: 20px 0px;\n h5 {\n font-size: 16px;\n line-height: 10px;\n }\n }\n .rap {\n ul {\n font-weight: 600;\n font-size: 13px;\n }\n }\n }\n`;\nconst BusinessPopup = (props) => {\n // id\n const contents = [\n {\n title: \"KB금융그룹의 Cloud 를 관리하는 통합 MSP\",\n content: (\n <>\n \n KB데이타시스템의 Cloud 전문 인력이 그룹사의 다양한 Cloud 플랫폼을\n 통합된 운영 시스템으로 관리하여 비용 절감과 운영 효율화 추구합니다.\n 이를 통해 KB금융그룹의 경쟁력을 강화하고 디지털 전환을 가속화를\n 지원합니다.\n \n \n \n 닫기\n \n \n \n ),\n },\n {\n title: \"생성형AI를 비롯한 AI기술 기반 서비스\",\n content: (\n <>\n {/* \n 계열사별 다양한 API 형태의 서비스 개발 및 제공을 위한 KBDS의 그룹\n Open API 개발·운영·관리·총괄 역할 수행\n */}\n \n \n 닫기\n \n \n \n ),\n },\n {\n title: \"KB 디지털 자산의 발굴과 확대\",\n content: (\n <>\n \n KB금융그룹 신기술 기반 서비스 발굴 및 융합형 기술 개발을 위한 주도형\n R&D 역량 내재화\n \n \n \n 닫기\n \n \n \n ),\n },\n {\n title: \"계열사 신규 IT 사업 참여 및 고도화\",\n content: (\n <>\n \n \n 닫기\n \n \n \n ),\n },\n {\n title: \"그룹 공동사업에 대한 역할 수행\",\n content: (\n <>\n \n \n 닫기\n \n \n \n ),\n },\n {\n title: \"그룹내 사업 신속 개발 대응\",\n content: (\n <>\n \n \n 닫기\n \n \n \n ),\n },\n {\n title: \"그룹 공동 시스템 운영/유지보수\",\n content: (\n <>\n \n \n 닫기\n \n \n \n ),\n },\n {\n title: \"그룹사/대외기관 IT시스템 운영\",\n content: (\n <>\n \n \n 닫기\n \n \n \n ),\n },\n ];\n return (\n \n \n {contents[props.active - 1] ? contents[props.active - 1].content : \"\"}\n \n \n );\n};\n\nexport default BusinessPopup;\n","import React, { useEffect, useRef, useState } from \"react\";\nimport {\n CommonContainer,\n Row,\n Col,\n MediaQuery,\n mobileQuery,\n} from \"../../../components/Grid\";\nimport BusinessItems from \"./BusinessItems\";\nimport { Br } from \"../../../components/Grid\";\nimport {\n BusinessWrapper,\n SectionTitle,\n BusinessBoxSummaryWrap,\n BusinessBoxWrapper,\n BusinessSummary,\n ButtonGroup,\n BusinessButton,\n SliderWrapper,\n} from \"../styled\";\nimport BusinessPopup from \"../BusinessPopup\";\n\nconst SectionBusiness = () => {\n const [active_section, set_active_section] = useState(\"digital\");\n const [active_popup, set_active_popup] = useState(null);\n\n const is_mobile = MediaQuery(mobileQuery);\n let digitalBoxEl = useRef(null);\n let digitalWrapEl = useRef(null);\n\n let siBoxEl = useRef(null);\n let siWrapEl = useRef(null);\n\n let smBoxEl = useRef(null);\n let smWrapEl = useRef(null);\n\n let businessWrapperEl = useRef(null);\n\n useEffect(() => {\n window.addEventListener(\"scroll\", scrollEvent);\n return () => window.removeEventListener(\"scroll\", scrollEvent);\n });\n const show_popup = (e) => {\n const item = e.currentTarget.dataset.id;\n e.preventDefault();\n set_active_popup(item);\n };\n const close_popup = (e) => {\n e.preventDefault();\n set_active_popup(null);\n };\n const scrollEvent = () => {\n const Wrapper = businessWrapperEl.current;\n const digital_el = digitalBoxEl.current;\n const digital_wr = digitalWrapEl.current;\n const si_el = siBoxEl.current;\n const si_wr = siWrapEl.current;\n const sm_el = smBoxEl.current;\n const sm_wr = smWrapEl.current;\n const section_el = document.getElementById(\"business\").offsetTop;\n var scroll_range = 300;\n // const scrollTop = document.documentElement.scrollTop;\n var _scrollTop = window.scrollY || document.documentElement.scrollTop;\n\n if (is_mobile) {\n scroll_range = 600;\n }\n\n _scrollTop = _scrollTop - section_el;\n if (_scrollTop) {\n const digital_top = digital_wr.offsetTop;\n const si_top = si_wr.offsetTop;\n const sm_top = sm_wr.offsetTop;\n console.log(digital_wr.offsetTop);\n console.log(si_top);\n console.log(sm_top);\n\n if (_scrollTop < digital_top + digital_wr.offsetHeight) {\n set_active_section(\"digital\");\n sm_el.classList.remove(\"active\");\n sm_wr.classList.remove(\"active\");\n si_el.classList.remove(\"active\");\n si_wr.classList.remove(\"active\");\n\n digital_el.classList.add(\"active\");\n digital_wr.classList.add(\"active\");\n Wrapper.classList.remove(\"si\", \"sm\");\n Wrapper.classList.add(\"digital\");\n }\n if (\n _scrollTop > si_top - scroll_range &&\n _scrollTop < si_top + si_wr.offsetHeight\n ) {\n set_active_section(\"si\");\n digital_el.classList.remove(\"active\");\n digital_wr.classList.remove(\"active\");\n sm_el.classList.remove(\"active\");\n sm_wr.classList.remove(\"active\");\n\n si_el.classList.add(\"active\");\n si_wr.classList.add(\"active\");\n Wrapper.classList.remove(\"digital\", \"sm\");\n Wrapper.classList.add(\"si\");\n }\n if (\n _scrollTop > sm_top - scroll_range &&\n _scrollTop < sm_top + sm_wr.offsetHeight\n ) {\n set_active_section(\"sm\");\n digital_el.classList.remove(\"active\");\n digital_wr.classList.remove(\"active\");\n si_el.classList.remove(\"active\");\n si_wr.classList.remove(\"active\");\n\n sm_el.classList.add(\"active\");\n sm_wr.classList.add(\"active\");\n Wrapper.classList.remove(\"digital\", \"si\");\n Wrapper.classList.add(\"sm\");\n }\n }\n };\n const digitalMembers = [\n // {title:'DevOps', name:'김태준 과장', image:'https://wp.daitso.kds.co.kr/wp-content/plugins/ep-manager/assets/images/about/about_di_6.jpg', content: `KB데이타시스템에서 자체 개발한 플랫폼인 크로노스와 Back-end 개발 및 애자일 문화 확산을 지원하고 있습니다.`},\n {\n title: \"Cloud 사업 관리 \",\n // name: \"김하님 사원\",\n // image: \"/nul-mg.png\",\n image: \"/avatar-01.png\",\n content: `그룹의 서비스들이 Cloud 기반으로 인프라를 구축, 운영할 수 있도록 사업 계약, 관리, 비용 최적화 등 업무를 진행하고 있습니다.`,\n },\n {\n title: \"Cloud 운영 관리\",\n // name: \"차진권 대리\",\n // image: \"/nul-mg.png\",\n image: \"/avatar-02.png\",\n content: `Cloud에서 운영되는 서비스들의 자원 생성, 관리, 보안, 모니터링 등 365일 안정적으로 서비스될 수 있도록 관리하고 있습니다.`,\n },\n // {title:'UI/UX', name:'권창환 대리', image:'https://wp.daitso.kds.co.kr/wp-content/plugins/ep-manager/assets/images/about/about_di_2.jpg', content: `DevOps 플랫폼인 크로노스에서 UI개발을 담당하여 고객과 상호작용을 통해 더 나은 사용자 경험을 제공하고 서비스 품질 향상에 기여하고 있습니다.`},\n {\n title: \"AI 연구& 개발\",\n // name: \"최재혁 사원\",\n // image: \"/nul-mg.png\",\n image: \"/avatar-03.png\",\n content: `생성형AI를 비롯한 AI 기술의 트렌드를 분석하고, 최신 기술 연구, PoC 진행, RAG 시스템 개발 및 관련 사업에 참여하여 실질적인 개발 구현을 하고 있습니다.`,\n },\n // {title:'DevOps', name:'김상우 사원', image:'https://wp.daitso.kds.co.kr/wp-content/plugins/ep-manager/assets/images/about/about_di_4.jpg', content: `KB데이타시스템 자체 DevOps 플랫폼을 개발하여 KB금융그룹의 클라우드 네이티브 트랜스퍼를 지원 및 MSP 사업 확장을 위한 교두보의 역할을 담당하고 있습니다.`},\n {\n title: \"서비스 기획\",\n // name: \"신채연 사원\",\n // image: \"/nul-mg.png\",\n image: \"/avatar-04.png\",\n content: `Cloud 운영 플랫폼부터 신기술을 활용한 서비스까지, gma 등 협업툴을 활용하여 사용자 중심의 프로세스를 설계하고 UI/UX 기획을 하고 있습니다.`,\n },\n // {title:'전략기획', name:'권은선 과장', image:'https://wp.daitso.kds.co.kr/wp-content/plugins/ep-manager/assets/images/about/about_di_1.jpg', content: `KB금융그룹 내 ICT/Digital 영역의 신기술 도입/정착을 위한 체계적인 디지털컨설팅 역량 기반의 그룹 디지털 전략수립 및 방향성을 제시하고 있습니다.`},\n {\n title: \"디지털 플랫폼 개발\",\n // name: \"윤진욱 수석\",\n // image: \"/nul-mg.png\",\n image: \"/avatar-05.png\",\n content: `KB SaaS Platform, 테스트통합관리 솔루션 ‘이슈리포터‘, MSP 포털 서비스 등 오픈 소스 기반으로 KB금융그룹에 필요한 서비스를 개발하고 있습니다.`,\n },\n {\n title: \"전략 기획\",\n // name: \"안은정 사원\",\n // image: \"/nul-mg.png\",\n image: \"/avatar-05.png\",\n content: `신성장 동력을 확보하고자 디지털 영역에서 신기술 기반의 사업 전략을 수립하고 KB금융그룹 내 도입/ 확산을 위해 실행 추진하고 있습니다.`,\n },\n ];\n const siMembers = [\n {\n title: \"웹서버 개발\",\n // name: \"전가을 사원\",\n // image: \"/nul-mg.png\",\n image: \"/avatar-01.png\",\n content: `2020년 공채 신입사원으로, 현재 국민은행 \"KB시니어플랫폼 구축\" 프로젝트에 참여하여 PC 및 모바일 Front-End 개발을 담당하고 있습니다.`,\n },\n {\n title: \"웹서버 개발\",\n // name: \"김규현 차장\",\n // image: \"/nul-mg.png\",\n image: \"/avatar-02.png\",\n content: `웹/서버 개발자로 KB모바일인증서, SSO 계열사 연동 등 인증업무 시스템 개발을 담당하고 있습니다.`,\n },\n {\n title: \"웹서버 개발\",\n // name: \"최현수 과장\",\n // image: \"/nul-mg.png\",\n image: \"/avatar-03.png\",\n content: `웹/서버 개발자로 KB저축은행 대고객 서비스인 Project 3S 프로젝트에 참여하였고 현재, 그룹 공용 클라우드 포탈 구축 사업을 준비하고 있습니다.`,\n },\n {\n title: \"아키텍처\",\n // name: \"박기태 차장\",\n // image: \"/nul-mg.png\",\n image: \"/avatar-04.png\",\n content: `전략사업본부 아키텍처 팀원으로 KB그룹의 아키텍쳐 표준, 설계와 클라우드를 포함하는 인프라 구축을 담당하며 SI 사업진행시 인프라 구축 가이드 및 지원 업무를 맡고 있습니다.`,\n },\n {\n title: \"웹서버 개발\",\n // name: \"송경빈 차장\",\n // image: \"/nul-mg.png\",\n image: \"/avatar-05.png\",\n content: `웹/서버 개발자로 KB국민은행 The-K 콜센터 재구축 프로젝트에 참여하여 어플리케이션 개발 업무를 수행하고 있습니다.`,\n },\n ];\n const smMembers = [\n {\n title: \"시스템 운영\",\n // name: \"정광철 사원\",\n // image: \"/nul-mg.png\",\n image: \"/avatar-01.png\",\n content: `준법상시모니터링 시스템의 안정성과 지속적인 운영을 위해 고객과 소통하고 자료를 제공하여 고객의 의사결정을 지원 하고, 그 중 점검항목 도출과 시스템 반영 업무를 수행하고 있습니다.`,\n },\n // {title:'웹서버 개발', name:'장서연 사원', image:'https://wp.daitso.kds.co.kr/wp-content/plugins/ep-manager/assets/images/about/about_m_5.jpg', content:`2020년 공채 신입사원으로, 현재 \"KB손해보험 일반보험 운영업무\"에 참여하여 모바일 Front-End 개발을 담당하고 있습니다.`},\n {\n title: \"품질업무\",\n // name: \"정수림 사원\",\n // image: \"/nul-mg.png\",\n image: \"/avatar-02.png\",\n content: `안정적인 IT서비스 제공을 위해 시스템 개발/운영 관련 프로세스 수립/개선/시행하고, 품질관련 이슈 분석 및 개선안을 도출/실행하는 업무를 담당하고 있습니다.`,\n },\n {\n title: \"정보보호\",\n // name: \"김성재 차장\",\n // image: \"/nul-mg.png\",\n image: \"/avatar-03.png\",\n content: `KB금융그룹 그룹사 IT 자산의 해킹사고에 대한 사전예방을 위해 모의해킹 및 취약점 진단 업무를 수행하여 보안대책 수립을 지원하고 있습니다.`,\n },\n {\n title: \"시스템 운영\",\n // name: \"조성욱 대리\",\n // image: \"/nul-mg.png\",\n image: \"/avatar-04.png\",\n content: `KB국민카드의 카드 신청 및 발급 업무관련 채널(홈페이지, 모바일)의 서비스 개발 및 운영을 담당하고 있습니다.`,\n },\n {\n title: \"iOS 개발\",\n // name: \"신유나 사원\",\n // image: \"/nul-mg.png\",\n image: \"/avatar-05.png\",\n content: `KB국민은행의 비대면 금융서비스의 디지털화를 지원하고 있습니다. 개인/기업뱅킹, 비대면 대출업무, 퇴직연금 등 비대면 금융서비스를 개발 및 운영하고 있습니다.`,\n },\n {\n title: \"Android 개발\",\n // name: \"황선영 과장\",\n // image: \"/nul-mg.png\",\n image: \"/avatar-06.png\",\n content: `KB국민은행에서 가장 최신 디지털 신기술로 개발하여 비대면 금융서비스를 제공하고 있습니다. 스타뱅킹, 리브 등의 Android Native App. 개발 및 운영 업무를 담당하고 있습니다.`,\n },\n // {title:'그룹사IT운영부', name:'강현진 대리', image:'https://wp.daitso.kds.co.kr/wp-content/plugins/ep-manager/assets/images/about/about_m_1.jpg', content: `KB증권 내 그룹웨어 시스템(전자결재,ECM,동보메일 등)을 운영하고 있으며 안정적이고 효율적인 IT업무환경을 제공, 지원하고 있습니다.`},\n // {title:'보험IT운영부', name:'황정아 과장', image:'https://wp.daitso.kds.co.kr/wp-content/plugins/ep-manager/assets/images/about/about_m_9.jpg', content: `KB손해보험 장기보험 변경시스템의 요구사항 분석 및 설계 역할을 하고 있습니다. 장기보험 변경시스템 전반에 걸쳐 사용성, 효율성을 높이기 위한 프로세스 개선을 진행하고 있습니다.`},\n // {title:'카드IT운영부', name:'김혁 사원', image:'https://wp.daitso.kds.co.kr/wp-content/plugins/ep-manager/assets/images/about/about_m_3.jpg', content: `KB국민카드의 IFRS(국제회계기준) 재무제표를 작성하고 공시하는 일련의 과정을 지원하는 시스템을 운영하고 있습니다.`},\n ];\n return (\n <>\n \n \n \n 사업영역\n 금융IT 혁신을 위한\n
\n 다양한 사업을 진행하고 있습니다.\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n {props.title}\n {props.date}\n \n \n );\n};\n\nexport default ESGCard;","import React, { useState } from \"react\";\nimport ESGCard from \"./ESGCard\";\nimport { ESGSliderWraaper, ESGSliderStyle } from \"../styled\";\n\nconst ESGSlider = () => {\n const [active_section, set_active_section] = useState(\"ESG\");\n const [hasMouseOver, setMouseOver] = useState(false);\n const itemWidth = 600;\n const viewPortMargin = 14;\n const imageWrapperWidth = itemWidth * 10 + viewPortMargin - 270;\n\n // const [ESG_open, on_ESG_open] = useState(0);\n\n // const Toggle = () => {\n // if(!ESG_open) {\n // on_ESG_open(1);\n // } else {\n // on_ESG_open(0);\n // }\n // }\n\n return (\n \n {\n setMouseOver(true);\n console.log(\"마우스오버\");\n }}\n onMouseLeave={() => {\n setMouseOver(false);\n console.log(\"마우스아웃\");\n }}\n >\n {/* */}\n \n 취약 계층 및 미래세대 가치 창출을 위한 교육활동 추진\n
\n }\n // date=\"2020.04.12\"\n index={1}\n image={\n \"https://wp.daitso.kds.co.kr/wp-content/uploads/2020/10/esg_3-scaled.jpg\"\n }\n />\n SM
\n주도성, 핵심역량 기반. 지속적인 혁신 유도로
고객사에 차별적인 IT서비스 제공
\n
\n \n \n \n
\n \n 기본에 충실하자\n {/* 전문가라면 보이지 않는 코드 한 줄에도 정성을 쏟는 디테일이 필요합니다. 작은 것까지 섬세하게 마무리하는 것이 진정한 전문가의 자세입니다. */}\n
\n\n \n
\n \n 우리의 1시간은 고객의 1년입니다.\n {/* 우리가 고객사에서 1년간 구축한 시스템은 향후 10년 동안 고객이 사용하게 될 업무환경이라는 책임감과 자부심으로 프로젝트에 임합니다. */}\n
\n\n \n
\n \n 매뉴얼보다 더 좋은 방법이 있다면 그것이 매뉴얼\n {/* 효율적이고 효과적인 방식이 있다면 이것이 표준! 일이 중심이고 그에 따라 형식과 절차는 개선합니다. */}\n
\n\n setActive(false)}\n />\n
\n \n 
\n
\n \n
\n \n {props.member.title}
\n {props.member.name}\n{props.member.content}
\n\n {props.members ? props.members.map((member, key) => \n
\n \n
\n \n {/*
\n {/* \n KB데이타시스템의 Cloud 전문 인력이 그룹사의 다양한 Cloud\n 플랫폼을 통합된 운영 시스템으로 관리하여 비용 절감과 운영 효율화\n 추구합니다. 이를 통해 KB금융그룹의 경쟁력을 강화하고 디지털\n 전환을 가속화를 지원합니다.\n
*/}\n- \n
- \n AWS, GCP, AZURE 등 Public Cloud와 KB금융그룹의 Private Cloud의\n 통합 운영\n \n
- \n Cloud 이키텍처부터 인프라 보안 관제까지 Total Managed Service{\" \"}\n \n
- \n 시스템 자동화 기반의 효율적인 운영 체계 구축\n \n
- \n Cloud 사용 준비부터 운영 모니터링, 빌링까지 One-stop 서비스\n 제공\n \n {/*
- 공동 Cloud 플랫폼을 통한 그룹 시너지 증대 \n
- Agile/DevOps/고객 중심 민첩한 대응 \n
- \n 직군별 또는 계열사간 IT협업 강화를 위한 관리 체계 정립\n */}\n
\n
\n \n 데이터 중심의 디지털 신기술 활용이 가능한 “Cloud Platform”\n
\n- \n
- \n 신기술 개발에 특화된 클라우드 기반 개발 전용 환경 지원\n \n
- \n 지속적 Re-Skill/Up-Skill을 통한 안정적인 신규 서비스 개발\n \n
- \n 다양한 디지털 및 데이터 서비스 제공을 위한 환경 지원\n \n
\n
*/}\n IT기술 내재화를 통한 지속적인 서비스 개선
\n- \n
- \n 신사업 추진 및 서비스 개선에 필요한 빠른 개발 환경 제공(과제\n 발의 후 개발 환경 구축까지 약 2-3주 소요되는 것과 달리 개발\n 자원 선택 후 즉시 구현 가능)\n \n
\n
\n \n \n
\n \n
\n \n
\n
\n \n
\n \n {/* \n
\n 생성형AI 기술 연구
\n- \n
- \n SLM 연구 및 Fine Tuning, 프롬프트 엔지니어링, 벡터DB\n 코드 자동생성 기술 연구 및 PoC 진행\n \n
- \n Cloud 기반 RAG 시스템 ‘Knoid’ 구축, 데모 서비스 운영\n \n
- \n CSP별 보유 SOTA 모델 연계 위한 KB One Cloud 아키텍처\n 개발\n \n {/*
- 송금, 간편결제 (출금,이체) \n
- 통합자산관 \n
- 사용내역조회, 거래 API (예정) */}\n
\n
\n */}\n \n
\n 제휴 API
\n- \n
- 외부 API 결합 서비스 \n
\n
\n \n {/* \n
\n 그룹 공동 생성형AI 플랫폼 구축
\n \n KB금융 계열사가 공동으로 이용하는 생성형AI 플랫폼 구축에\n KB데이타시스템이 생성형AI기술 역량 기반으로 참여하여\n 계열사의 생성형AI 사업의 토대를 마련하는데 함께 합니다.\n \n- \n {/*
- 상품별/사업별 수수료 \n
- 실시간자금 집계 및 거래 로그 \n
- API 장애 현황조회 */}\n
\n
\n */}\n \n
\n 통합 API 운영/관리
\n- \n
- \n 통합 G/W 및 API 서버관리를 통한 체계적인 일괄 정책\n 수립 및 운영\n \n
\n
\n \n {/* \n
\n KB금융그룹의 AI MSP 역할
\n \n 빠르게 발전하는 AI 기술을 KB금융그룹에 적용하기 위해 AI\n 도입부터 구축(SI, Cloud), 운영(SM), 컨설팅에 이르기까지\n AI 비즈니스를 실현하는데 필요한 모든 영역을 지원하는\n 서비스를 제공하고자 합니다.\n \n- {/*
- 신규 수익원 검토 */}
\n
\n \n
\n \n {/*
\n {/* KBDS 주도형 신기술 역량 확보
*/}\n \n KB데이타시스템이 개발한 S/W를 시작으로, KB금융그룹의 기술\n 역량이 발현된 S/W, 플랫폼 등 디지털 자산을 발굴하고 상품\n 가치를 더하여 KB금융 계열사들과 여러 산업계에서 활용할 수\n 있도록 추진하고 있습니다. 테스트 통합관리 솔루션\n ‘KB이슈리포터’, 화상상담 플랫폼 ‘라이브케어’ Service Request\n 솔루션 ‘Alfred’ 등 여러 제품을 Cloud 기반 SaaS 로, On\n premise의 설치형 솔루션 등 환경에 최적화된 방식으로 제공하고\n 있습니다.\n \n {/*- \n
- 선제적 R&D 협업 과제 발굴 및 사업화 기획 \n
- '일하는 방식의 변화'를 위한 선행기술 검증 \n
- 다양한 근무 형태별 업무 도구 실증 및 확산 \n
\n
\n 그룹 디지털/IT 협업 강화
\n- \n
- 협업의 기획 단계부터 주도적 참여 확대 \n
- 산학 협력 및 핀테크 업체와의 협업 강화 \n
\n
*/}\n 디지털/IT 서비스 개발 역량 내재화
\n- \n
- 신기술 및 프로그래밍 언어 CoP운영 \n
- \n 디지털/IT 컨설팅 역량 확보를 위한 외부 협업 및 전문 교육\n \n
\n
\n \n 국내외 다양한 IT시스템 구축 경험과 사례를 기반으로 차세대시스템\n 구축 등 계열사에서 추진하는 중요 IT프로젝트를 수행하고 있으며,\n 기존 운영시스템의 고도화에도 주도적 역할을 수행하고 있습니다\n
\n\n 구체적으로 계열사의 IT 파트너로서 은행/증권/보험/카드/캐피탈 관련\n 금융업무시스템과 경영관리 ERP시스템, 인프라 등의 구축 사업을\n 수행하고 있으며, 최근에는 디지털 신기술을 활용하여 클라우드 환경\n 구축 및 모바일 뱅킹/지급결제/자산관리 등의 다양한 디지털 사업을\n 중점으로 추진하고 있습니다.\n
\n\n
\n \n KB금융그룹 내 계열사 間 원활한 업무 수행과 공동 마케팅 등 IT시너지\n 극대화를 위해 다양한 그룹 공동IT사업을 수행하고 있습니다.\n 구체적으로 Open API, 그룹 바젤 시스템, 기업단일신용평가,\n 통합보안관제시스템, 그룹웨어, 그룹CRM등 그룹의 다양한 공동사업을\n 구축 수행해 왔으며, 변화하는 디지털 환경에 대응하기 위한 클라우드\n 기반의 그룹 공동 플랫폼 등 그룹 IT시너지를 극대화 할 수 있는\n 프로젝트를 지속적으로 발굴하고, 역량을 집중하여 추진하고 있습니다\n
\n\n
\n \n 디지털 환경변화에 따라 Agile DevOps 형태의 소규모 디지털\n IT개발업무가 증가함에 따라, 스마트금융 개발 대응반을 구성하여\n 신속하고 빠른 디지털 개발 서비스를 국민은행, 국민카드에 제공하고\n 있으며, 점차 다른 계열사에도 서비스 확장을 추진하고 있습니다.\n 또한, 계열사 글로벌 진출 사업, 신규 계열사 편입 관련 IT지원 등\n 긴급업무 Needs에 적시 대응하여 계열사 Biz수행을 적극 지원하고\n 있습니다.\n
\n\n \n \n 닫기\n \n \n
\n \n ),\n },\n {\n title: \"은행IT시스템 운영서비스\",\n content: (\n <>\n \n
\n 통합보안관제
\n\n KB금융그룹 계열사에서 안정적인 IT서비스를 제공하기 위해\n 웹방화벽(WAF), 침입방지시스템(IPS), DDoS 차단 등 각종 보안\n 솔루션을 이용하여 다양한 보안위협을 실시간으로 감시, 분석•대응\n 및 예방 활동을 24x365(24시간 365일) 수행하여 KB금융그룹의\n 정보자산을 보호하기 위한 업무를 진행하고 있습니다. 또한\n KB금융그룹 계열사의 홈페이지 및 모바일 앱 서비스를 제공하기 전에\n 외부침입에 노출될 수 있는 취약한 부분을 점검하는 활동을 통해\n 상시적인 예방 활동을 수행하고 있습니다.\n
\n\n
\n OpenAPI
\n\n KB금융그룹 OpenAPI 제공을 위한 포탈 및 G/W 시스템 운영 관리를\n 하고 있습니다. API 등록, 제휴사 연계, 통계 정보 제공 등\n 계열사/제휴사를 위한 포탈을 운영 하고 있으며, 가입된 제휴사를\n 위한 API 사용을 위한 개발 가이드 지원도 같이 진행하고 있습니다.\n API를 운영하면서 더 편하고, 빠른API 사용을 위해 포탈의 기능\n 업그레이드 등 추가 개발도 진행하고 있습니다. KB금융그룹\n OpenAPI의 안정적인 운영을 수행하고 있습니다\n
\n\n
\n \n
\n 글로벌 금융 사업운영
\n\n KB국민은행의 글로벌 진출을 위해 운영하는 해외영업점•법인\n IT시스템의 코어업무부터 디지털부문의 비대면 업무까지 개발 및\n 운영을 담당하고 있으며, KB금융그룹의 글로벌 확대 전략에 맞춰\n 인도네시아에 설립된 현지IT법인은 KB금융그룹의 글로벌 전략을\n 추진하는 IT전략자산으로 글로벌 ICT시장 진출 및 디지털 금융사업\n 모델을 발굴하고 있습니다.\n
\n\n
\n 금융 핵심 비즈니스 IT 서비스 제공
\n\n KB국민은행의 여신, 수신, 외환업무 등의 은행 IT시스템의\n 핵심업무인 코어업무의 개발 및 운영 경험으로 KB국민은행의 새로운\n 상품 출시 등 고객에게 보다 빠르고 안정적인 서비스를 할 수 있도록\n 지원하고, 다양한 업무 수행 경험을 바탕으로 실전 노하우를 보유한\n 전문IT인력을 육성하고 있습니다\n
\n\n
\n Digital Transformation의 리딩
\n\n 오랜 기간 축적된 전통적인 금융 비즈니스 노하우를 보유한\n 전문인력을 바탕으로 빠르게 변화하는 디지털 환경에서 고객에게\n 새로운 경험을 제공하기 위해 디지털 전문인력 육성, 디지털\n 경쟁력을 확보하여 KB국민은행의 디지털 혁신을 더욱 속도감 있게\n 추진하고 있습니다.\n
\n\n
\n 그룹사/대외기관 IT시스템 운영
\n\n 내재화된 전문역량과 책임감으로 콜센터, 방카슈랑스, 증권대행,\n e-하나로, 한은금융망, 수납지급대행, 이미지시스템 및 ONE KB\n 포탈/메일/메신저 시스템 개발 및 위수탁 운영하고 있습니다.\n
\n\n
\n \n KB금융지주, 증권, 손해보험, 국민카드, 캐피탈, 생명보험 등\n KB금융그룹 계열사의 시스템 운영/관리, Core 시스템부터 콜센터,\n 홈페이지, 다양한 모바일 앱 등 채널 서비스까지 24*365 안정적인\n IT서비스를 제공하고 있습니다.\n
\n\n KB금융그룹 계열사에 고품질의 IT아웃소싱 서비스를 제공하고,\n 고객에게 가치를 제공하기 위한 기회 발굴과 지속적인 Up-Skill,\n Re-Skill을 통해 신기술 기반의 혁신 금융서비스를 제공하는\n KB금융그룹의 IT파트너로서 역할을 수행하고 있습니다\n
\n\n 다양한 사업을 진행하고 있습니다.\n
\n \n \n KB금융그룹의 Cloud 를 관리하는 통합 MSP\n \n \n \n 생성형AI를 비롯한 AI기술 기반 서비스\n \n \n \n KB 디지털 자산의 발굴과 확대\n \n \n \n {/* #DevOps \n #Agile */}\n
\n \n Digital 디지털\n
\n\n KB데이타시스템은 KB금융그룹의 Digital Hub로서 Cloud,\n 데이터, AI 등 신기술 기반의 전략 사업 및 융합 서비스와\n 최적화된 개발 환경을 제공하고 있습니다.\n
\n\n \n \n 계열사 신규 IT 사업 참여 및 고도화\n \n \n \n 그룹 공동사업에 대한 역할 수행\n \n \n \n 그룹내 사업 신속 개발 대응\n \n \n \n {/* #프로젝트 3S \n #KB Pay */}\n
\n \n SI 시스템 개발\n
\n\n KB데이타시스템은 KB금융그룹의 IT전문가로서 그룹내\n 다양한 금융 솔루션이 고객과 함께 할 수 있는 시스템을\n 구축하는데 최선을 다하고 있습니다.\n
\n\n \n \n 그룹 공동 시스템 운영/유지보수\n \n \n \n 은행IT시스템 운영서비스\n \n \n \n 그룹사/대외기관 IT시스템 운영\n \n \n \n {/* #The K 프로젝트 \n #디지털 콜센터 구축 */}\n
\n \n SM 시스템 운영\n
\n\n KB데이타시스템은 KB금융그룹의 IT전문가로서 다양한 금융\n 업무를 지원하기 위해 고객사와 함께하며 안정적인\n 서비스를 제공하기 위해 최선을 다하고 있습니다.\n
\n\n {props.Stitle}\n {props.Mcontent}\n
\n {props.Scontent}
\n\n - 노인 대상 IT교육\n
- 청소년 대상 소셜미디어 및 퍼스널브랜딩 교육\n
\n -동작노인종합복지관, 돈보스코자립생활관, 성모이주여성의집 봉사활동 및 기부금 지원\n
*/}\n\n - 자발적인 학습문화를 위한 cop활동지원, 직원자기개발 지원\n
- 모성보호 및 출산 육아지원\n
\n - CEO타운홀 미팅\n
\n - 본부별 직원간담회\n
- 사내커뮤니케이션 채널 운영\n
\n - 노인 대상 IT교육\n
- 청소년 대상 소셜미디어 및 퍼스널브랜딩 교육\n
\n -동작노인종합복지관, 돈보스코자립생활관, 성모이주여성의집 봉사활동 및 기부금 지원\n
*/}\n\n - 자발적인 학습문화를 위한 cop활동지원, 직원자기개발 지원\n
- 모성보호 및 출산 육아지원\n
\n - CEO타운홀 미팅\n
\n - 본부별 직원간담회\n
- 사내커뮤니케이션 채널 운영\n
\n KB데이타시스템은 '세상을 바꾸는 금융'이라는 그룹공동의 미션 아래 환경, 사회적 책임이행, 인권, 다양성 등\n 지속가능한 가치를 지키며 KB금융 그룹의 ESG전략 목표를 달성할 수 있도록 함께 노력하고 있습니다.\n
\n박찬용 대표이사 취임
\nKB손해보험 KB라이프생명 차세대시스템 구축
\n대한민국 독서경영우수직장인증 및 가족친화 기업 인증
\n신임 김명원 대표이사 취임
\n인도네시아 현지법인 설립
\n신임 최재을 대표이사 취임
\nKB국민은행 차세대 콜센터시스템 재구축 수주
\nKB국민카드 차세대 디지털채널 고도화 및 지원공정 구축
\n디지털R&D랩 설립
\nKB캐피탈 차세대시스템 구축
\n\n 아시안뱅커 선정 HR, Best Lending Platform (총 2개\n 부문) 베스트 프로젝트 상 수상\n
\n스마트금융연구소 설립
\n본사이전 (도화동 경찰공제회 빌딩)
\n\n 카자흐스탄 BCC은행 EDW 및 전행보고서시스템 구축 계약\n 체결\n
\n해외(카자흐스탄 알마티)지점 설립
\nKB국민은행 차세대 경영정보시스템 구축
\n\n Global IT기업들과의 전략적 사업협력을 위한 파트너쉽\n MOU 체결\n
\nKB국민은행 차세대 인터넷뱅킹시스템 구축
\nKB 금융지주 계열사 출범
\n\n 베트남 농업은행 대외계 및 외화자금결제시스템 구축\n 프로젝트 참여\n
\nKDS New Vision 및 경영 이념 선포
\n공정거래 하도급 우수업체 수상(공정거래위원회)
\n\n ‘대한민국 SW사업자 대상’ 산업SW부문\n 수상(한국소프트웨어산업협회)\n
\n본사이전(여의도 증권거래소)
\n금융IT연구소 설립
\n인도네시아 BII은행 MIS프로젝트 참여
\nKB데이타시스템으로 사명 변경
\n윤리강령 선포
\n소프트웨어사업자 신고(한국소프트웨어산업협회)
\n자본금 증자(총 납입자본금 80억원)
\nALM적격업체 선정(상호저축은행중앙회)
\n시스템통합(SI) 사업자 등록
\n연구개발 전담부서 등록(과학기술부)
\n㈜국민데이타시스템 설립
\nAbout
\n\n
\n {/* - \n \n \n \n \n \n
\n
\n \n
\n 그룹 코퍼레이트 마크
\n\n \n
\n \n
\n \n
\n \n KB데이타시스템 국문\n
\n \n
\n \n
\n \n KB데이타시스템 영문\n
\n \n
\n 121-815 서울시 마포구 마포대로 78 (도화동 566) 경찰공제회 자람빌딩 13/14층
\n Tel : 02-3215-6000 / Fax : 02-3215-6100
\n \n
\n \n \n \n KB데이타시스템 요약손익계산서 (단위 : 백만원)\n \n \n \n 구분 \n {/* 2017년 */}\n 2021년 \n 2022년 \n 2023년 \n \n \n \n \n 매출액 \n \n 174,819\n \n \n 233,320\n \n \n 230,825\n \n \n \n 매출원가 \n {/* 110,954 */}\n\n \n 164,948\n \n \n 217,563\n \n \n 218,394\n \n \n \n 매출총이익 \n {/* 4,095 */}\n\n \n 9,871\n \n \n 15,758\n \n \n 12,430\n \n \n \n 판매비와일반관리비 \n {/* 6,990 */}\n\n \n 9,668\n \n \n 11,807\n \n \n 13,184\n \n \n \n 영업이익 \n {/* 789 */}\n \n 203\n \n \n 3,950\n \n \n -754\n \n \n \n 영업외손익 \n {/* 361 */}\n\n \n 441\n \n \n 711\n \n \n 953\n \n \n \n 세전이익 \n {/* 1,150 */}\n\n \n 765\n \n \n 4,822\n \n \n 200\n \n \n \n 법인세비용 \n {/* 205 */}\n\n \n 302\n \n \n 1,705\n \n \n 66\n \n \n \n 당기순이익 \n {/* 945 */}\n\n \n 467\n \n \n 3,162\n \n \n 134\n \n \n \n \n
\n\n 요약손익계산서
\n\n \n
\n
\n 요약재무상태표
\n| 구분 | \n {/*2017년 | */}\n2021년 | \n2022년 | \n2023년 | \n
|---|---|---|---|---|
| 유동자산 | \n {/*36,560 | */}\n\n\n 34,797\n | \n\n 50,929\n | \n\n 48,753\n | \n
| 비유동자산 | \n {/*5,383 | */}\n\n\n 8,908\n | \n\n 12,715\n | \n\n 12,756\n | \n
| 자산총계 | \n {/*41,944 | */}\n\n\n 43,704\n | \n\n 63,645\n | \n\n 61,509\n | \n
| 유동부채 | \n {/*24,343 | */}\n\n\n 23,688\n | \n\n 38,834\n | \n\n 38,550\n | \n
| 비유동부채 | \n {/*2,896 | */}\n\n\n 1,441\n | \n\n 1,736\n | \n\n 2,066\n | \n
| 부채총계 | \n {/*27,239 | */}\n\n\n 25,129\n | \n\n 40,570\n | \n\n 40,616\n | \n
| 자본금 | \n\n\n 8,000\n | \n\n 8,000\n | \n\n 8,000\n | \n|
| 이익잉여금 | \n {/*8,928 | */}\n\n\n 15,272\n | \n\n 18,434\n | \n\n 17,959\n | \n
| 자본총계 | \n {/*14,704 | */}\n\n\n 18,575\n | \n\n 23,074\n | \n\n 20,892\n | \n
| 부채와자본총계 | \n {/*41,944 | */}\n\n\n 43,704\n | \n\n 63,645\n | \n\n 61,509\n | \n
금융 IT기업 KB데이타시스템\n
\n 오직 금융만을 생각하고 연구하며 국내 최고 금융기관의 성장을 지원한 경험과 지식을 보유한 KB데이타시스템은 금융에 대한 풍부한 이해와 수백여 프로젝트\n 경험에서 축적된 노하우를 바탕으로 급변하는 금융 환경에 고객의 needs를 명확히 분석하여 컨설팅에서 시스템 구축, 운영까지 최적의 통합IT서비스를 제공합니다.\n
\n\n 체계화된 조직구조와 최고의 기술력으로 전문 IT서비스를 제공하며, 업계 최고의 품질관리시스템으로 한치의 오차도 허용하지 않는 완벽한 시스템을 구현합니다.\n
\nValue creation
\n전문적인 IT서비스로 그룹IT 혁신 및 가치 창출
\nImproving
\nIT전문인력 집중 양성으로 그룹IT 역량 강화에 기여
\nPartnership
\n선진 IT서비스 업체들과의 전략적 파트너십 등을 통한 핵심 기술력 확보
\nCI
\n \n회사위치
\n \n재무정보
\n \n윤리경영
\n \n\n \n \n MISSON\n \n 세상을 바꾸는 금융 고객의 행복과
\n \n
\n \n MISSON\n \n 세상을 바꾸는 금융 고객의 행복과
더\n 나은 세상을 만들어 갑니다\n \n
\n \n \n \n VISION\n \n 최고의 인재와 담대한 혁신으로 가장
\n \n
\n \n VISION\n \n 최고의 인재와 담대한 혁신으로 가장
\n 신뢰받는 금융IT 파트너\n \n
\n \n 고객의 입장과 이익을 최우선으로\n
고려하여판단하고 의사결정을 함\n
\n 업계 최고 수준의 역량을 갖춘 금융인을\n
목표로 끊임없이 노력함\n
\n 미래금융의 ‘First Mover’로서 창의적인 사고와 과감한 도전을\n 통해 변화와 혁신을 주도함\n
\n\n 윤리의식을 바탕으로 정직과\n
신의성실의 자세를 항상 견지함\n
\n 개인과 조직의 발전을 넘어, 국민과\n
함께 성장하고 사회발전에 기여함\n
\n LEAD합니다.\n
KB데이타시스템이 되겠습니다.\n \n 대표이사/사장 박찬용\n \n
\n KB데이타시스템은 미래 핵심역량 중심의 디지털 기술이 내재화\n 된 그룹 내 디지털/IT 혁신을 선도하는 전문가 집단으로\n 변모하고 있습니다. 디지털 환경변화에 신속한 대응이 가능한\n 유연한 조직문화를 바탕으로 구성원 각자의 위치에서 지속적\n 역량 개발에 최선을 다하고 있습니다.\n
\n \n\n
\n {/* - \n \n \n
Vision
\nKB금융그룹 핵심 비즈니스를 주도하는 KB데이타시스템 지향
\n \nKB금융그룹 디지털/IT를 선도하는 KB데이타시스템 지향
\n \nKB금융그룹 전략적 금융서비스 창출에 기여하는 KB데이타시스템 지향
\n \n시스템 개발
\n \n\n KB데이타시스템은 KB금융그룹이 세상을 바꾸는 금융이 될 수 있도록\n 최고의 인재와 담대한 혁신으로 가장 신뢰받는 금융IT파트너가\n 되겠습니다.\n
\n\n DT 지원의 효율화 추구\n \n
\n KB금융그룹의 Cloud 자원, 거버넌스 등을 하나로 통합 운영,\n 효율적인 One-stop 서비스 제공\n
\n \n\n 생성형AI를 비롯한 AI 기술 연구, PoC 진행, 비즈니스 구현,\n 운영까지 모든 영역 지원하는 역할 지향\n
\n \n\n 역량 기반 디지털 사업 확대\n \n
\n 자체 개발한 디지털자산을 기반으로 SaaS 방식을 포함한 다양한\n 방식으로 사업 확대\n
\n \n디지털
\n \n\n KB데이타시스템은 KB 금융그룹 內 신기술 기반의 핵심 IT/디지털 사업\n 수행을 위해 지속 가능한 자체 기술 경쟁력을 확보하고 있으며, 새로운\n 디지털 사업모델 발굴부터 구축/이전/전환/운영/관리 등 디지털 통합\n 서비스를 제공하고자 합니다.\n
\nKB금융그룹 IT 업무영역 변화에 따라 가치 업무 중심의 IT파트너로 성장
\n \nKB금융그룹 IT혁신을 리딩하며, DT를 주도하는 IT파트너로 성장
\n \nKB금융그룹 IT품질 향상을 지원하는 IT파트너로 성장
\n \n시스템 운영
\n \n\n KB데이타시스템은 KB다운 마인드로 “고객중심”, “전문성”, “혁신주도”,\n “신뢰정직”, “동반성장”하는 IT서비스를 제공하고 있습니다.\n
\n\n
\n \n \n KB금융그룹이 Digital Transformation 을 추진하는데 그룹 Cloud의\n 안정적인 운영과 신속한 대응은 중요합니다. 이를 위해, 지금까지\n 그룹의 MSP로 Multi CSP에서 다양한 사업을 통합 운영 해온 경험과\n 전문적인 역량을 기반으로, Cloud 자원, 조직, 거버넌스 등을 하나로\n 통합하여 One-stop 서비스 제공하고 운영 시스템의 자동화를 통해\n 효율화를 추구합니다.\n \n {/*
\n {/* 그룹의 \"Cloud First\" 전략 기반 MSP 역량 확보
\n- \n
- 그룹내 MSP 역할 주도 및 역량 강화 \n
- \n MSP를 통해 각 산업별 국내 기업의 특성을 반영한 Cloud 서비스\n 제공\n \n
\n
\n Cloud 서비스 역량 확보 및 그룹 내 사업 참여
\n- \n
- \n Hybrid-Multi Cloud 자체 구축을 통한 역량 확보\n \n
- \n 계열사 Cloud 사업 제안 및 발굴을 통한 프로젝트 참여\n \n
\n
\n */}\n Hybrid-Multi Cloud 운영 및 관리
\n- \n
- \n Cloud 도입 후 지속 가능한 운영 및 관리 체계 확보\n \n
- 업권별 Cloud 보안 및 관제 \n
\n
\n \n \n KB데이타시스템은 생성형AI의 최신 기술 및 기업에서 활용할 수 있는\n 방안을 연구하고 데모 서비스를 구축하며 계열사의 비즈니스에\n 적용해오고 있습니다. 빠르게 발전하는 AI 기술을 KB 금융 그룹에\n 적용하기 위해 AI 도입부터 구축(SI, Cloud), 운영(SM), 컨설팅에\n 이르기까지 AI 비즈니스를 실현하는데 필요한 모든 영역을 지원하는\n AI MSP(Modeling & Managed Service Provider) 로서 역할을\n 수행하고자 합니다.\n \n
\n\n {/* \n
\n 대내/외 IT 규제 대응전략
\n- \n
- \n 금융그룹 특화 IT 전문 계열사로 금융산업 신규 IT 규제 및 법규\n 대응을 위한 의무 준수사항 구축 방향성 정립 (예. 금융 클라우드\n 도입 및 데이터3법 대응 등)\n \n
\n
\n ICT/Digital 기반 사업기회 발굴
\n- \n
- \n Digital 기반 핵심 과제 도출 및 신기술 (클라우드, Open API,\n MSP, Data 등) 기반IT/Digital 중심의 수익화 모델 발굴\n \n
\n
\n KB금융 특화 Gap 분석
\n- \n
- \n Digital 생태계 구축을 위한 KB계열사 ITO 운영 경험 기반의\n Digital 진단 및 전환 방향 제시\n \n
\n
\n IT/Digital 아키텍처 설계
\n- \n
- \n 기존 시스템과 연계 및 서비스 영역별/계열사별 특화 환경을\n 고려한 Digital 서비스 아키텍처 설계 (예. 클라우드 아키텍처,\n 신기술 인프라 등)\n \n
\n
\n 새로운 Digital 개발 문화 도입
\n- \n
- \n 기존IT 자원 도입부터 구축까지 복잡한 업무 프로세스를 DevOps\n 기반의 즉시 개발 환경 제공으로 체계적인 개발 운영 관리\n \n
\n
*/}\n Digital Platform 구축 지원
\n- \n
- \n 그룹 모바일 APP 기반 운영 서비스 지원을 위한 플랫폼 및 인프라\n 구축/그 외 외부 솔루션 및 협업 활용 지원\n \n
\n
\n \n \n KB데이타시스템은 MSA, DevOps, 오픈 소스 활용 등, 신기술 기반으로\n 자체적으로 소프트웨어 및 플랫폼을 개발해왔으며 그룹 계열사에\n 판매, 제공하여 제품 중심의 디지털 사업 영역을 개척하고 있습니다.\n 지속적으로 제품 발굴 및 개발에 힘쓰면서 다각도로 그룹 대내외로\n 활용도를 확장하여 디지털 사업 확대 및 KB 디지털 자산의 가치를\n 높이고자 합니다.\n \n {/*
\n {/* Data Engineering
\n- \n
- 과제별 데이터 수집·저장·접근권한 기준 정립 \n
- \n 내/외부 테이터 수집을 위한 툴 및 인프라 제공\n \n
\n
*/}\n Data Analytics / Science
\n- \n
- \n 그룹 내 데이터 유관 사업 참여 및 분석을 통한 인사이트 도출\n \n
- \n ML/DL 기반 데이터 모델링과 모델 학습 및 최적화\n \n
\n
\n \n KB데이타시스템은 KB금융그룹 지주 및 계열사에서 수행하는 IT\n 프로젝트에 참여하여 그룹 내 인프라 및 시스템 구축, 업무 프로세스\n 개선 및 고도화를 위해 주도적 역할을 수행하고 있으며 금융IT\n 전문회사로서 계열사의 비즈니스 개선 및 연속성을 유지하고 신뢰할 수\n 있는 금융IT 서비스 구축에 기여하고 있습니다.\n
\n\n
\n \n KB데이타시스템은 그룹 내 필요한 디지털 영역 사업에 지속적으로\n 참여하여 모바일, 빅데이타, 클라우드 등의 신기술 역량을 강화하고\n 디지털/IT Hub 역할로서 계열사 Digitalization 파트너로서 미래\n 성장동력인 디지털뱅크, 클라우드 플랫폼 구축 등 디지털 중심의\n 금융IT를 선도하는 역할을 지향하고 있습니다.\n
\n\n
\n \n KB금융그룹에서 추진하는 그룹 공동사업 및 계열사 전략사업의 안정적\n 수행 및 운영을 위해 계열사 비즈니스와 연계된 디지털 Value를\n 발굴하고 신기술 역량 강화 및 안정적인 IT 서비스를 제공함으로써\n KB금융그룹만의 특화된 금융서비스 창출에 기여하고 있습니다.\n
\n\n
\n \n KB데이타시스템은 핵심업무영역에 대한 주도적 업무확보,\n Value-Up관점의 SM Re-Define 및 은행의 Bionic 플랫폼 조직변화,\n 보험부문의 SSC 추진전략에 따라 공통업무 및 인프라영역의 Shared\n Service를 추진하고 있습니다. 계열사의 비본질적 IT서비스 범위를\n 점진적으로 축소하고, 디지털/비대면, 계열사 본질업무, 그룹 공동업무\n 그리고 전산센터 인프라운영같은 핵심업무중심으로 SM업무의 중심을\n 이동하여 계열사의 핵심사업을 지원하고 동반성장하는 IT파트너로\n 성장하겠습니다.\n
\n\n
\n \n KB데이타시스템은 핵심업무영역의 금융 도메인 전문지식을 기반으로\n 핵심 업무영역에 신기술 적용 및 프로세스 혁신을 통해 서비스를\n 개선하고 지속적 혁신을 추구하고 있습니다. 또한, 가속화되는 Digital\n 환경변화에 적응하고, Digital 역할 확대요구에 대응하기 위해 내부\n 인력의 디지털 Talent화를 통해 디지털 역량 내재화를 추진하고\n 있습니다. 이런 조직적 활동을 통해 KB금융그룹 사업에 꼭 필요한\n IT파트너로서 계열사의 IT 혁신을 리딩하고,고객 관점에서의 차별적\n 가치 제공을 하는 전문가조직을 지향하고 있습니다.\n
\n\n
\n \n KB데이타시스템은 KB국민은행, 증권, 손해보험, 국민카드, 생명 등 각\n 계열사 운영업무를 수행하면서 안정적인 IT 서비스 제공을 위한\n 품질지표를 기획하여 품질목표를 제시할 것입니다.IT서비스 품질지표는\n 시스템가동율, 인시던트 발생율, 개발품질지표 그리고 고객만족도 등\n 안정적인 IT 서비스 제공을 위해 꼭 필요한 인프라 및 S/W품질관리\n 항목들을 포함하고, 매월 목표관리를 통해 최고의 IT서비스 품질을\n 달성할 것입니다.\n
\n\n 사업영역별 비전을 소개합니다.\n
개인정보처리방침
\n고객정보취급방침
\n운영 사례
\n\n ■ 그룹마이데이터 (KB금융그룹)\n
\n 소개 [About the Company & Business]
\n \n KB금융그룹은 KB금융지주를 주축으로 하는 대한민국의\n 종합금융그룹으로서 2022년 S&P 세계 100대 은행 순위에서 세계\n 61위, 국내 1위에 해당하는 대한민국 최대 금융그룹입니다.\n 그룹마이데이터 플랫폼은 KB금융그룹의 모든 계열사가 보유한 고객\n 데이터를 통합하여 고객에게 맞춤형 금융 서비스를 제공하는\n 시스템입니다. 이를 통해 KB금융그룹은 고객의 금융 생활을 보다\n 편리하고 효율적으로 지원하고, 금융 산업의 혁신을 선도해 나갈\n 수 있게 되었습니다.\n \n과제 [The Challanges]
\n - 다양한 금융 데이터를 통합하고 관리해야 합니다.\n - 고객의 금융 데이터를 안전하게 보호해야 합니다.\n \n - 고객의 개인정보를 보호하면서도 맞춤형 금융 서비스를 제공해야\n 합니다.\n \n해결 [The Solutions]
\n\n KB데이타시스템은 AWS의 다양한 서비스를 활용하여 KB국민은행의\n 과제를 해결하였습니다.\n
\n \n - 다양한 금융 데이터를 통합하고 관리하기 위해 Amazon S3,\n Amazon SageMaker, Amazon Amazon Glue, Amazon MWAA, Amazon ES\n 등을 활용했습니다. 이를 통해 KB금융그룹은 다양한 금융 데이터를\n 안전하게 통합하고 관리할 수 있었습니다.\n \n \n - 고객의 금융 데이터를 안전하게 보호하기 위해 AWS의 Amazon\n KMS를 활용했습니다. 이를 통해 KB금융그룹은 고객의 금융\n 데이터를 암호화하고, 침해로부터 수 있었습니다.\n \n 결과[Benefits]
\n\n KB데이타시스템은 KB금융그룹의 MSP사업자로서 필요한 지원과\n 솔루션을 제공하고, 합리적인 비용으로 다음과 같은 도움을\n 주었습니다.\n
\n \n - 고객의 금융 데이터를 통합하여 고객 맞춤형 금융 서비스를\n 제공할 수 있게 되었습니다.\n \n \n - 고객의 금융 생활을 보다 편리하고 효율적으로 지원할 수 있게\n 되었습니다.\n \n \n - 금융 산업의 혁신을 선도해 나갈 수 있게 되었습니다.\n \n \n ■ KB윌렛 (KB국민은행)\n
\n 소개 [About the Company & Business]
\n \n KB국민은행은 KB금융그룹 계열사로, 대한민국 시중은행 중 자산\n 1위를 달성한 주요 리딩뱅크입니다 KB윌렛은 KB국민은행의 다양한\n 금융 서비스와 생활 밀착형 서비스를 하나로 통합한 서비스입니다.\n 이를 통해 KB국민은행은 고객이 금융과 일상을 한 번에 관리할 수\n 있도록 지원하고, 금융 산업의 혁신을 선도해 나갈 수 있게\n 되었습니다.\n \n과제 [The Challanges]
\n \n - 다양한 금융 서비스와 생활 밀착형 서비스를 통합해야 합니다.\n \n \n - 고객의 편의성을 높이기 위한 다양한 기능을 제공해야 합니다.\n \n - 안전하고 안정적인 시스템을 구축해야 합니다.\n해결 [The Solutions]
\n\n KB데이타시스템은 AWS의 다양한 서비스를 활용하여 KB국민은행의\n 과제를 해결하였습니다.\n
\n \n - 다양한 금융 서비스와 생활 밀착형 서비스를 통합하기 위해\n AWS의 Amazon S3, Amazon ElastiCache,Amazon MSAK, Amazon MWAA\n 등을 활용했습니다. 이를 통해 KB국민은행은 다양한 금융 서비스와\n 생활 밀착형 서비스를 쉽게 통합할 수 있었습니다.\n \n \n - 고객의 편의성을 높이기 위한 다양한 기능을 제공하기 위해\n AWS의 Amazon RDS, Amazon EKS, AmazonEC2 등을 활용했습니다.\n 이를 통해 KB국민은행은 고객이 원하는 정보를 쉽게 찾고, 다양한\n 서비스를 편리하게 이용할 수 있도록 했습니다.\n \n \n - 안전하고 안정적인 시스템을 구축하기 위해 AWS의 Amazon KMS,\n Amazon GuardDuty 등을 활용했습니다.이를 통해 KB국민은행은\n 고객의 개인정보를 보호하고, 시스템을 안정적으로 운영할 수\n 있었습니다.\n \n 결과[Benefits]
\n\n KB데이타시스템은 KB금융그룹의 MSP사업자로서 필요한 지원과\n 솔루션을 제공하고, 합리적인 비용으로 다음과 같은 도움을\n 주었습니다.\n
\n \n - 다양한 금융 서비스와 생활 밀착형 서비스를 통합하여 고객에게\n 편리한 금융서비스를 제공할 수 있게 되었습니다.\n \n \n - 고객의 편의성을 높이기 위한 다양한 기능을 제공하여 고객\n 만족도를 높일 수 있었습니다.\n \n \n - 안전하고 안정적인 시스템을 구축하여 고객의 신뢰를 얻을 수\n 있었습니다.\n \n \n ■ KB부동산 (KB국민은행)\n
\n 소개 [About the Company & Business]
\n \n KB국민은행은 KB금융그룹 계열사로, 대한민국 시중은행 중 자산\n 1위를 달성한 주요 리딩뱅크입니다 KB부동산은 KB국민은행의\n 부동산 금융 서비스에 AI와 데이터 분석 기술을 접목한\n 서비스입니다. 이를 통해KB국민은행은 고객에게 보다 편리하고\n 정확한 부동산 금융 서비스를 제공하고, 금융 산업의 혁신을\n 선도해나갈 수 있게 되었습니다.\n \n과제 [The Challanges]
\n - 대용량 부동산 데이터를 분석해야 합니다.\n \n - 고객의 요구를 빠르게 파악하고, 맞춤형 서비스를 제공해야\n 합니다.\n \n - 안정적인 시스템을 구축해야 합니다.\n해결 [The Solutions]
\n\n KB데이타시스템은 AWS의 다양한 서비스를 활용하여 KB국민은행의\n 과제를 해결하였습니다.\n
\n \n - 대용량 부동산 데이터를 분석하기 위해 AWS의 Amazon S3, Amazon\n Glue Amazon MWAA, Amazon SQS등을 활용했습니다. 이를 통해\n KB국민은행은 대용량 부동산 데이터를 빠르고 정확하게 분석할 수\n 있었습니다.\n \n \n - 고객의 요구를 빠르게 파악하고, 맞춤형 서비스를 제공하기 위해\n AWS의 Amazon EC2, Amazon EKS,Amazon QuickSight 등을\n 활용했습니다. 이를 통해 KB국민은행은 고객의 요구를 빠르게\n 파악하고, 맞춤형 서비스를 제공할 수 있었습니다.\n \n \n - 안전하고 안정적인 시스템을 구축하기 위해 AWS의 Amazon KMS,\n Amazon GuardDuty 등을 활용했습니다.이를 통해 KB국민은행은\n 고객의 개인정보를 보호하고, 시스템을 안정적으로 운영할 수\n 있었습니다.\n \n\n 결과[Benefits]
\n\n KB데이타시스템은 KB금융그룹의 MSP사업자로서 필요한 지원과\n 솔루션을 제공하고, 합리적인 비용으로 다음과 같은 도움을\n 주었습니다.\n
\n \n - 대용량 부동산 데이터를 분석하여 고객에게 보다 정확한 부동산\n 정보를 제공할 수 있게 되었습니다.\n \n \n - 고객의 요구를 빠르게 파악하여 맞춤형 부동산 금융 서비스를\n 제공할 수 있게 되었습니다.\n \n \n - 안정적인 시스템을 구축하여 고객의 신뢰를 얻을 수 있었습니다.\n \n 개인정보처리방침
\n개인정보처리방침
\n{props.item.post_title}
\n\n
\n {props.item.post_date}
\n소개
\n <>\n\n {props.user.description}\n
\n \n#Blind-Recruitment
\n #DevOps
\n #DevOps
\n #Consulting
\n #Agile
\n #Consulting
\n #Consulting
\n #Cloud
\n #Agile
\n #Cloud
\n #Agile
\n #Cloud
\n 키워드
\n웹사이트
\n{window.location.href=`/story/${props.post.ID}`}}>\n \n \n {props.post.post_image ? (\n \n {props.post.post_tags ? props.post.post_tags.map((tag,key) => (#{tag.name} )) : ''}\n \n \n {props.post.post_date}\n \n
\n \n
);\n}\nconst LoopContent = (props) => {\n return (\n - );\n }) : (
{errorMsg}
\n \n\n SMART 한 인재를 기다리고 있습니다.\n
\n
\n \n Start with why\n
\n\n 모든 일에 있어 그 의미를 되새기고 고민하며 행동하는 진중함\n
\n\n
\n \n Micro ambitious\n
\n\n 큰 그림에 대한 포부와 더불어, 맡은 업무에 디테일한 부분까지\n 책임을 다하고 보다 더 나은 방법이 없는지 끊임없이 고민하는\n 섬세함\n
\n\n
\n \n After action review\n
\n\n 모든 Task에 배움이 담겨져 있음을 통감하고 모든 프로젝트를\n 뒤돌아 보며 배울점과 고칠점을 찾는 능동성과 자기 주도성\n
\n\n
\n \n Re-design\n
\n\n 고객의 니즈에 적극 반응하며 IT를 통한 비즈니스 혁신을 이끌어\n 내는 고객지향성\n
\n\n
\n \n Technology quotient\n
\n\n 변화의 흐름을 꿰뚫고 현재에 안주하지 않으며 또다른 기회를\n 찾아 움직이는 변화 주도성\n
\n\n
\n \n Start with why\n
\n\n 모든 일에 있어 그 의미를 되새기고 고민하며 행동하는 진중함\n
\n\n
\n \n Micro ambitious\n
\n\n 큰 그림에 대한 포부와 더불어, 맡은 업무에 디테일한 부분까지\n 책임을 다하고 보다 더 나은 방법이 없는지 끊임없이 고민하는\n 섬세함\n
\n\n
\n \n After action review\n
\n\n 모든 Task에 배움이 담겨져 있음을 통감하고 모든 프로젝트를\n 뒤돌아 보며 배울점과 고칠점을 찾는 능동성과 자기 주도성\n
\n\n
\n \n Re-design\n
\n\n 고객의 니즈에 적극 반응하며 IT를 통한 비즈니스 혁신을 이끌어\n 내는 고객지향성\n
\n\n
\n \n Technology quotient\n
\n\n 변화의 흐름을 꿰뚫고 현재에 안주하지 않으며 또다른 기회를\n 찾아 움직이는 변화 주도성\n
\n\n 우리의 미래도 달라집니다.\n
\n \n
\n \n 기본에 충실하자\n {/* 전문가라면 보이지 않는 코드 한 줄에도 정성을 쏟는 디테일이 필요합니다. \n 작은 것까지 섬세하게 마무리하는 것이 진정한 전문가의 자세입니다. */}\n
\n \n\n \n
\n \n 우리의 1시간은 고객의 1년이다.\n {/* 우리가 고객사에서 1년간 구축한 시스템은 향후 10년 동안 고객이 사용하게 될 \n 업무환경이라는 책임감과 자부심으로 프로젝트에 임합니다. */}\n
\n\n \n
\n \n 매뉴얼보다 더 좋은 방법이 있다면 그것이 매뉴얼\n {/* 효율적이고 효과적인 방식이 있다면 이것이 표준! 일이 중심이고 그에 따라 형식과 \n 절차는 개선합니다. */}\n
\n\n \n
\n \n My Name is Deep Learning Man\n {/* 디지털 융합 시대, 꾸준한 자기 주도학습으로 변화에 유연하게 적응할 수 \n 있는 능력을 키워야 합니다. */}\n
\n\n \n
\n \n 깨끗하고 진실되게. 그래서 당당하게\n {/* 고객과 동료를 대함에 있어서 깔끔하고 진실된 사람으로서 일해야 하며, \n 그렇게 일하는 사람이 당당할 수 있습니다. */}\n
\n\n \n
\n \n 다름은 틀림이 아니다.\n {/* 회사의 건강한 기업문화는 소통에서 비롯합니다. 누구나 각자의 일하는 방식이 있으며, \n 나와 다를 수 있다는 것을 인정하고 존중해야 합니다. */}\n
\n\n \n
\n \n 일은 스마트하게 퇴근할 때는 가볍게\n {/* 효율적으로 집중해서 빈틈없이 일하고 가벼운 마음으로 퇴근합니다. */}\n
\nPeople
\n\n \n {props.mainInfo.videoUrl2 ? (\n \n \n {/* 비디오가 재생되지 않을 경우 배경 썸네일 */}\n
\n )}\n \n \n\n People
\n\n
\n {/* - \n \n \n \n \n
채용정보
\n\n 변화를 선도하며 고객만족을 실현시키는
\n 분야별 전문가\n
\n movePage(cultureInfo.link)}\n >\n 자세히보기\n \n )}\n
\n KBDS FOCUS
\n\n {!on && (\n
\n )}\n \n
\n\n {isMobile && (\n \n showVideo(\"cAK3r7kPje0\")}\n >\n
\n )}\n \n \n \n window.open(\"https://www.youtube.com/@kbds\")}\n >\n KBDS Youtube\n \n
\n \n
\n KBDS Live
\nKB데이타시스템 Live
\n \n {isMobile ? (\n <>\n KB데이타시스템의 Live 소식을 전합니다.\n
\n 새로운 IT 트랜드 소식, KB데이타시스템 임직원의\n
\n 모임 활동 Live Story를 확인해보세요.\n \n ) : (\n <>\n KB데이타시스템의 Live 소식을 전합니다.\n
\n 새로운 IT 트랜드 소식, KB데이타시스템 임직원의 모임 활동\n Live Story를 확인해보세요.\n \n )}\n
\n {live_list ? (\n live_list\n .filter((item, index) => index < 4)\n .map((post) => (\n showPopup(post)}\n >\n
\n ))\n ) : (\n {post.postDate || \"\"}
\n {/* */}\n \n 모든 가정에 근원적인 물음을\n
\n 제기합니다.\n
\n \n \n 제기합니다.\n
\n
\n \n
\n \n
\n {!isMobile && (\n \n )}\n KBDS Story
\n조직 문화
\n \n \n \n\n \n \n \n
\n \n \n Company Introduction\n {/* 2023\n
\n
\n \n Company Introduction\n {/* 2023\n
Company Introduction */}\n
\n \n ![\"\"](\"main-img.png\")
\n
\n \n \n ![\"\"](\"KB_Signature.png\")
\n
\n \n \n ![\"\"](\"icon-kb-scroll.png\")
\n
\n \n \n \n \n \n \n
\n \n ![\"\"](\"circle-img.png\")
\n
\n \n \n ![\"\"](\"KB_Signature-color.png\")
\n
\n \n \n \n KB Data Systems is the representative financial IT / DT\n professional corporate as an affiliate of KB Financial Group\n with more than 30 years.\n
\n \n\n ![\"\"](\"kb-banner.png\")
\n
\n \n \n
\n \n \n \n \n \n \n
\n \n ![\"\"](\"s-circle.png\")
\n
\n \n \n
\n Greeting for global companion
\nCEO Message
\n\n KB Financial Group is a comprehensive financial group with\n the largest customer base and offline branch network in\n Korea. And also, it is a digital leading financial group\n that has competitive financial platforms by affiliates such\n as banks and securities cards and non-financial platforms\n such as real estate, automobile and healthcare.
\n
\n As a affiliate of KB financial group, KB Data Systems\n provides solutions and services for Digital and IT, which\n are the core of finance. KB Data Systems is a financial IT\n company that provides discriminatory values centered on\n digital. By contributing to the group's digital innovation\n based on its expertise in digital technology and financial\n affairs such as Cloud, Big Data and A.I.\n
\n
We will create a better world for the customers’\n happier. Be always with You, KB Data Systems.\n
\n ![\"\"](\"ceo-img.png\")
\n
\n \n \n ![\"\"](\"sign.png\")
\n
\n \n Park, Chan Yong\n
\n CEO of KB Data Systems\n
\n \n
\n History
\n\n
\n - \n
- \n 2025\n
Indonesia KB Bank Project performing now\n \n - \n 2024\n
KB Cambodia IT Project performed\n \n - \n 2021\n
PT KBDS Indonesia established\n \n - \n 2010’s ~ 2020\n
Thousands of The Next Generation\n
IT System project of KB Financial affiliates
\n (KB Bank, KB Card, KB Capital etc)\n performed\n \n - \n 2013\n
Winning the Asian Banker Awards\n \n - \n 2010\n
Kazakhstan BCC EDW Project performed\n \n - \n 2008\n
KB Financial Group launches\n
{\" \"}\n Became a affiliate of KB holding company\n \n - \n 2007\n
Vietnam Agri Bank External & Foreign currency\n Project performed\n \n - \n 2004\n
Indonesia BII Bank MIS Project{\" \"}\n performed\n \n - \n 2004\n
KB Data Systems Inc. renamed\n \n - \n 1991\n
Kookmin Data Systems Inc. established\n
{\" \"}\n \n As a affiliated company of Kookmin Bank\n
with just 46 people\n \n \n
- \n \n \n \n \n \n \n \n \n \n
\n
\n Business scope
\n\n ![\"\"](\"Business-banner.png\")
\n
\n \n Digital
\n\n
\n \n MSP(Managed Service Provider) business\n
\n For the first in Korean financial,\n
we’re in charge of both Public\n and Private cloud\n
\n SaaS(Software as a service) business\n
\n It provides SasS service within KB Financial group. We\n developed SaaS engine and services contents.\n
\n ![\"\"](\"Business-banner2.png\")
\n
\n \n \n SM\n
(System Maintenance)\n
\n
\n \n Reliability and Stability\n
\n With rich know-how,\n
We provide reliable and stable IT\n system maintenance service in 24H/365days\n
\n ![\"\"](\"Business-banner3.png\")
\n
\n \n \n SI\n
\n (System Integraion)\n
\n
\n \n Solutions development\n
\n Develop various solutions specialized in finance We’ll show\n you the best IT systems\n
what you exactly imagined\n
\n ![\"\"](\"Business-banner4.png\")
\n
\n \n \n Global\n
IT Service\n
\n
\n \n Compatibility and expandability\n
\n With global network of KB Financial\n
and PT KBDS Indonesia,\n
we’ serving a variety of IT\n service in the world.\n
\n
\n Vision
\n\n Transition from a workforce - oriented/cost-centric IT\n affiliate of KB Financial group to digital oriented SW\n Powerhouse.\n
With this we achieved more than tripled growth in the\n last 10 years\n
\n ![\"\"](\"graph-img.png\")
\n
\n \n \n
\n \n \n \n \n \n \n
\n \n The most trusted financial IT/DT partner\n
with the best talent and bold innovation\n
\n ![\"\"](\"vision-img.png\")
\n
\n \n \n Transferring to the “SW Powerhouse” based on\n
\n digital technologies and financial IT know-how\n
\n
\n \n IT Cost Center of\n
KB Financial group\n
Digital / IT Hub
\n\n SW\n
PowerHouse\n
\n
\n Growth of last 10 years
\n\n
\n \n\n {/* */}\n \n ![\"\"](\"icon-graph.png\")
\n
\n \n Total\n
sales\n
(USD$)\n
\n Year
\n\n
\n \n
\n 60Million
\n \n2012
\n\n
\n 91Million
\n \n2017
\n\n
\n 179Million
\n \n2022
\n\n
\n \n
\n \n \n ![\"\"](\"icon-men.png\")
\n
\n \n Employees\n
(men)\n
\n Year
\n\n
\n \n
\n 189
\n \n \n2012
\n\n
\n 380
\n \n \n2017
\n\n
\n 584
\n \n \n2022
\n\n
\n Global Network
\n\n 12 affiliates of KB financial group make The One Team for\n global business.\n
KB Data Systems in Seoul Korea and PT KBDS Indonesia\n are constantly preparing for new customer services. We’re\n going to serve the IT service and Solution based on our\n world wide 15 networks.\n
(branches and corporations)\n
\n ![\"\"](\"global-img.png\")
\n
\n \n \n ![\"\"](\"logo-chart.png\")
\n
\n \n \n ![\"\"](\"map-arrow.png\")
\n
\n \n \n ![\"\"](\"word-map.png\")
\n
\n \n \n
\n KBDS, Seoul Korea
\n\n
\n PT KBDS Indonesia
\n\n \n \n
\n
\n | Category | \nCountries and cities | \n
| Branch | \nTokyo, Newyork, London, Hongkong etc. | \n
| Corporation | \nCambodia, China, Myanmar, Indonesia etc. | \n
\n
\n Contact to us
\n\n
\n \n [ KBDS, Seoul Korea ]\n
\n 82-2-3215-6036\n
Global Business Implementation Department Manager\n Lee, Jung Kwon (jklee01@kbfg.com)\n
\n
\n \n \n [ PT KBDS Indonesia, Jakarta ]
\n \n 062+ 0852-1544-9968\n
IT Division CIO\n
Lee, Do Hyoung (dohlee77@kbdsi.com)\n
\n \n ![\"\"](\"icon-contact.png\")
\n
\n \n