@charset "utf-8";

/* common */
body { transition: background 0.3s ease-in-out; }
body .container { position: relative; }
body .consulting::before { content: ''; position: absolute; inset: 0; background: url('/images/main/main_con_bg.jpg') no-repeat; background-size: 200% 200%; animation: gradientMove 6s ease-in-out infinite alternate; filter: blur(40px); opacity: 0; transition: .3s ease-in-out; }

body.dark-background { background: #011060; }
body.dark-background header .header-right .lang-select p { color:white; }
body.dark-background header .header-right .lang-select p::after { border-top-color: white; }
body.dark-background header h1 a { background: url('/images/logo_w.svg') no-repeat center/contain; }
body.dark-background .consulting::before { opacity: 1; }

.h3-wrap { text-align: center; }
.h3-wrap span { position: relative; display: inline-flex; align-items: center; gap:5px; padding:.7rem 1.3rem; border: 1px solid #C1E6FF; background: #EEF8FF; color:#009AFF; font-size: 1.4rem; font-weight: 600; line-height: 1.1; text-transform: uppercase; border-radius: 5px; }
.h3-wrap span::before { content: ''; width: 3px; aspect-ratio: 1/1; border-radius: 3px; background: #009AFF; }
.h3-wrap h3 { margin-top: 2.5rem; font-size: 4.8rem; font-weight: 600; line-height: 1.2; }
.h3-basic h3 { font-size: 6.6rem; font-weight: 500; line-height: 1.3; }
.inner { width: 92%; max-width: 1660px; margin: 0 auto; }

/* Main Visual */
.main-visual { height: 100vh; background: url('/images/main/main_bg.png') no-repeat center center/cover; }
.main-visual-inner { display: flex; flex-direction: column; justify-content: end; height: 100%; max-width: 1660px; width: 92%; padding:0 0 5rem; margin:0 auto; gap:9rem; }
.main-visual-inner h2 { font-size: 7.6rem; font-weight: 500; line-height: 1.1; }
.main-visual-text { color:var(--sub-black); font-size: var(--font-size-2); font-weight: 500; }
.main-visual .view-video { margin-top: 3rem; }
.trans-y-wrap { position: relative; width:52rem; height:7.5rem; margin-top: 3rem; font-size: 5rem; font-weight: 500; border-radius: 5rem; overflow: hidden; color:white; }
.trans-y-wrap > div { position: absolute; left:0; top:0; display: flex; align-items: center; justify-content: center; width: 0; height:100%; border-radius: 5rem; transition: .6s ease-in-out; opacity: 1; overflow: hidden; white-space: nowrap; }
.trans-y-wrap > div:nth-child(1) { background: #084AF7; }
.trans-y-wrap > div:nth-child(2) { background: #009AFF; }
.trans-y-wrap > div:nth-child(3) { background: #5420FE; }
.trans-y-wrap > div:nth-child(4) { background: #2BDDA1; }
.trans-y-wrap > div.prev { z-index: 0; width:100%; }
.trans-y-wrap > div.show { z-index: 1; width:100%; }


/* IAM Leader */
.iam-leader { padding: 7.6rem 0 0; }
.iam-leader-inner { padding:4rem; }
.iam-leader-cont { padding: 6.4rem 0 14.6rem; background: url('/images/main/main_who_bg.png') no-repeat center/cover; border-radius: 5rem; }
.iam-leader .text-box { width: 92%; margin:0 auto; text-align: center; }
.iam-leader .text-box p { margin-top: 3rem; margin-bottom: 7rem; color: var(--sub-black); line-height: 1.3; font-size: var(--font-size-2); }
.iam-leader .btn-link { display: inline-flex; background: linear-gradient(93.47deg, #084AF7 14.46%, #4966FB 88.73%); color:white; }
.iam-leader .btn-link .trans-x-box > span::after { color:white; }
.iam-leader .btn-link::before { content: ''; z-index: -1; position: absolute; left:0; top:0; width: 100%; height: 100%; background: #00000033; opacity: 0; transition: .3s ease-in-out; }
.iam-leader .btn-link:hover::before { opacity: 1; }

.iam-leader .diagram-box { z-index: 1; position: relative; display: grid; grid-template-columns: 1fr 1.5fr 1fr; align-items: center; width:92%; max-width: 1530px; margin:9.2rem auto 0; }
.iam-leader .diagram-box .diagram-bg > * { z-index: 1; }
.iam-leader .diagram-box .diagram-bg > div { position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); pointer-events: none; }
.iam-leader .diagram-box .diagram-bg > img { position: relative; }
.diagram-bg { position: relative; }
.diagram-logo,
.diagram-logo-bg { position: relative; width: 16rem; aspect-ratio: 1/1; }
.diagram-logo-bg span { z-index: -1; position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); aspect-ratio: 1/1; border-radius: 15px; }
.diagram-logo-bg span:nth-child(1) { width:26rem; background: #E3EBFF; }
.diagram-logo-bg span:nth-child(2) { width:21rem; background: #A7C0FF; }
.diagram-logo span { z-index: -1; position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); aspect-ratio: 1/1; border-radius: 15px; width:100%; background: #084AF7; }
.diagram-logo img { width:120%; position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); }

.diagram-line-left,
.diagram-line-right { width: 100%; height: 100%; }
.diagram-line-left div,
.diagram-line-right div { width:100%; height: 100%; overflow: hidden; }
.diagram-line-left img,
.diagram-line-right img { height:100%; object-fit: cover; object-position: left; }

.diagram-left { height: 100%; }
.diagram-left ul { display: flex; flex-direction: column; justify-content: space-between; gap:3.2rem; height: 100%; }
.diagram-left li { flex:1; display: flex; align-items: center; gap:3rem; padding: 0 3.5rem; background: white; border-radius: 15px; box-shadow: 0px 10px 10px 0px #81818126; }
.diagram-left .list-img { flex-shrink: 0; }
.diagram-left .list-title { font-size: var(--font-size-1); line-height: 1.2; font-weight: 600; }
.diagram-left .list-text { margin-top: 1rem; color:var(--sub-black); font-size: var(--font-size-3); }
.diagram-right { height: 100%; }
.diagram-right ul { display: flex; flex-direction: column; justify-content: space-between; gap:5.2rem; height: 100%; }
.diagram-right li { flex:1; display: flex; flex-direction: column; justify-content: space-between; padding: 4rem; background: white; border-radius: 15px; box-shadow: 0px 10px 10px 0px #81818126; }
.diagram-right li > div { display: flex; justify-content: space-between; }
.diagram-right .list-img { flex-shrink: 0; }
.diagram-right .list-title { font-size: var(--font-size-1); line-height: 1.2; font-weight: 600; }
.diagram-right .list-text { color:var(--sub-black); font-size: var(--font-size-3); }


/* Safer Future */
.safer-future { padding: 17rem 0; text-align: center; }
.safer-future-inner { width: 92%; max-width: 1660px; margin:0 auto; }
.safer-future-inner ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3rem; margin-top: 10rem; }
.safer-future-inner li { padding: 5rem 2rem 6.7rem; border-radius: 2rem; border: 1px solid #DDDDDD; background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F8 100%); }
.safer-future-inner h4 { margin: 3rem 0 1.5rem; font-size: var(--font-size-1); font-weight: 600; }
.safer-future-inner p { margin:0 auto; color: var(--sub-black); font-size: var(--font-size-3); }


/* Consulting */
.consulting { position: relative; color: #fff; text-align: center; }
.consulting .h3-wrap span { color:white; background: #EEF8FF33; border: 1px solid #7B609A; }
.consulting .h3-wrap span::before { background: white; }
.consulting .h3-wrap h3 { font-weight: 400; }
.consulting-inner { height:100vh; display: flex; align-items: center; padding: 0 20px; }
.consulting-inner p { margin: 3rem auto 7.4rem; line-height: 1.3; font-size: var(--font-size-2); color: #AAAAAA; }
.consulting .btn-link { margin:0 auto; border:1px solid var(--sub-black); }
.consulting .btn-link::before { content: ''; z-index: -1; position: absolute; left:0; top:0; width: 100%; height: 100%; background: linear-gradient(93.47deg, #084AF7 14.46%, #4966FB 88.73%); opacity: 0; transition: .3s ease-in-out; }
.consulting .btn-link:hover { border-color: transparent; }
.consulting .btn-link:hover::before { opacity: 1; }
.consulting .btn-link .trans-x-box > span::after { color:white; }

.consulting .consulting-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 92%; max-width: 1320px; height: 636px; padding: 0 20px; margin:0 auto; border-radius: 1.5rem; border: 2px solid transparent; background-clip: padding-box; overflow: hidden; }
.consulting .consulting-wrapper::before { content: ""; z-index: 1; position: absolute; inset: 0; border-radius: 16px; padding: 2px; background: linear-gradient(103.64deg, #330B9A, #8797FF, #330B9A) ; background-size: 300% 300%; animation: borderMove 4s linear infinite; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none }
.consulting .gradient-bg { position: absolute; inset: 0; border-radius: 20px; background: radial-gradient(48.49% 209.17% at 51.51% 54.32%, #0D002E 0%, #290094 100%); } 
.consulting .gradient-bg::after { content: ''; position: absolute; inset: 0; border-radius: 20px; background: linear-gradient(120deg, #0D002E, #800099 , #290094); background-size: 200% 200%; animation: gradientMove 6s ease-in-out infinite alternate; filter: blur(40px); opacity: 0.4; }

@keyframes borderMove { 
	0% { background-position: 0% 50%; } 
	100% { background-position: 300% 50%; } 
}
@keyframes gradientMove { 
	0% { background-position: 0% 50%; } 
	100% { background-position: 100% 50%; } 
}


/* Integrated Solution */
.integrated-solution { position: relative; padding: 17rem 0 47rem; overflow: hidden; }
.integrated-solution .integrated-text { position: absolute; bottom:11rem; right:5rem; width: 80%; aspect-ratio: 1512/192; background: url('/images/main/main_inte_text.svg') no-repeat center/contain; }
.integrated-solution .h3-wrap { text-align: left; }
.integrated-solution-inner .swiper-container { margin-top: 10rem; }


/* Clients */
.clients { padding: 17rem 0; background: #F1F5F8; text-align: center; overflow: hidden; }
.clients .tab-menu { margin:5rem auto 8rem; }
.clients .tab-menu > p { position: relative; display: none; width: 100%; height: 42px; background: #009AFF; color: white; font-weight: 600; border-radius: 5rem; cursor: pointer; }
.clients .tab-menu > p::after { content: ''; position: absolute; right:20px; top:50%; display: block; border:5px solid transparent; border-top:7px solid white; transform: translateY(-25%); transition: .3s ease-in-out; }
.clients .tab-menu > p.active::after { transform: translateY(-65%) rotate(180deg); }
.clients .tab-menu ul { width: fit-content; margin:0 auto; padding:4px; background: white; border-radius: 5rem; display: flex; justify-content: center; align-items: center; gap: 1px; }
.clients .tab-menu button { padding:5px 1.5rem; border-radius: 5rem; background: transparent; font-size: 16px; font-weight: 600; }
.clients .tab-menu button.active { background: #009AFF; color:white; }
.clients .client-logos { position: relative; height: 28rem; }
.clients .client-logos h3 { display: none; }
.clients .tab-cont { position: absolute; left:0; top:0; width: 100%; visibility: hidden; opacity: 0; }
.clients .tab-cont.active { visibility: visible; opacity: 1; }
.client-logos ul { display: flex; gap:2rem; }
.client-logos ul:last-child { margin-top: 2rem; flex-direction: row-reverse; }
.client-logos ul li { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 31.6rem; aspect-ratio: 316/130; border-radius: 1rem; background: white; }


@media screen and (max-width:1660px){
	.h3-basic h3 { font-size: 6rem; }

	.main-visual-inner h2 { font-size: 6.4rem; }
	.trans-y-wrap { font-size: 4.4rem; width: 48rem; height: 7rem; }

	.iam-leader .diagram-box { grid-template-columns: 1fr 1fr 1fr; }
	.diagram-left ul { gap:2rem; }
	.diagram-left li { gap:2rem; padding: 0 2.5rem; }
	.diagram-left .list-img { width: 4.5rem; }
	.diagram-right ul { gap:4rem; }
	.diagram-right li { padding: 3rem; }
	.diagram-right .list-img { width: 4.5rem; }

	.diagram-logo, .diagram-logo-bg { width: 100px; }
	.diagram-logo-bg span:nth-child(1) { width: 160px; }
	.diagram-logo-bg span:nth-child(2) { width: 130px; }

	.safer-future-inner ul { gap:2rem; }
	.safer-future-inner li { padding: 4rem 1.5rem 4.2rem; }
}

@media screen and (max-width:1024px){
	.main-visual-inner h2 { font-size: 6rem; }
	.trans-y-wrap { font-size: 4rem; width: 46rem; height: 6.8rem; }

	.iam-leader { padding: 6rem 0 0; }
	.iam-leader .text-box p br { display: none; }
	.iam-leader .diagram-box { display: block; max-width: 430px; }

	.diagram-bg { width: 190px; height: 320px; margin:0 auto; }
	.diagram-logo, .diagram-logo-bg { width: 80px; }
	.diagram-logo-bg span:nth-child(1) { width: 130px; }
	.diagram-logo-bg span:nth-child(2) { width: 100px; }
	.diagram-left ul { gap:10px; }
	.diagram-left li { gap:15px; padding: 15px; box-shadow: 0px 7.2px 7.2px 0px #81818126; }
	.diagram-left .list-img { width:45px; }
	.diagram-left .list-text { margin-top: 3px; }
	.diagram-right ul { gap:10px; }
	.diagram-right li { padding: 20px; }
	.diagram-right .list-img { width: 40px; }

	.iam-leader .diagram-box .diagram-bg > img { position: absolute; left:50%; top:50%; transform: translate(-50%,-50%) rotate(90deg); width: 320px; max-width: none; height: 190px; }
	.iam-leader .diagram-box .diagram-bg .diagram-line-left,
	.iam-leader .diagram-box .diagram-bg .diagram-line-right { transform: translate(-50%,-50%) rotate(90deg); width: 320px; max-width: none; height: 190px; }

	.safer-future-inner ul { margin-top: 8rem; gap:1.5rem; }
	.safer-future-inner li { padding: 3rem 1rem 4.7rem; }

	.integrated-solution { padding:12rem 0 30rem ; }
}

@media screen and (max-width:768px){
	:root {
		--font-size-1: 18px;
		--font-size-2: 15px;
		--font-size-3: 14px;
	}

	.h3-wrap span { padding:5px 10px; font-size: 10px; }
	.h3-wrap h3 { margin-top: 15px; font-size: 26px; }
	.h3-basic h3 { font-size: 30px; }
	
	.main-visual { max-height: 640px; }
	.main-visual-inner { gap: 35px; padding-bottom: 30px; }
	.main-visual-inner h2 { max-width: 280px; font-size: 36px; }
	.main-visual-text { width: 230px; }
	.trans-y-wrap { width: 270px; height:42px; margin-top: 15px; font-size: 25px; }
	.main-visual .view-video { margin-top: 20px; }
	
	.iam-leader { padding-top: 0; }
	.iam-leader-inner { padding:0; }
	.iam-leader-cont { padding: 70px 0; }
	.iam-leader .text-box { width: 100%; padding: 0 20px; }
	.iam-leader .text-box p { margin-top: 24px; margin-bottom: 40px; }
	.iam-leader .diagram-box { margin-top: 70px; }
	.iam-leader .h3-wrap h3 br { display: none; }

	.safer-future { padding: 80px 0; }
	.safer-future-inner ul { max-width: 360px; margin:50px auto 0; margin-top: 50px; grid-template-columns: 1fr; }
	.safer-future-inner li { padding: 30px 28px; }
	.safer-future-inner .list-img { width: 220px; margin:0 auto; }
	.safer-future-inner h4 { margin: 15px 0 10px; }

	.consulting-inner { height: 640px; }
	.consulting-inner p br { display: none; }
	.consulting .consulting-wrapper { width: 100%; }

	.integrated-solution { padding: 80px 0 308px; }
	.integrated-solution .h3-wrap { width:278px; }

	.integrated-solution .integrated-text { display: flex; flex-direction: column; align-items: end; width: auto; background: none; }
	.integrated-solution .integrated-text::before { content: ''; display: block; width:322px; height:74px; background: url('/images/main/main_inte_text.svg') no-repeat left center/cover; }
	.integrated-solution .integrated-text::after { content: ''; display: block; width:244px; height:74px; background: url('/images/main/main_inte_text.svg') no-repeat right center/cover; }

	.clients { padding: 80px 0; }
	.clients .tab-menu { z-index: 2; position: relative; width: 100%; height: 42px; padding: 0 20px; margin-top: 30px; margin-bottom: 40px; font-size: 15px; }
	.clients .tab-menu ul { display: none; position: relative; width: 100%; margin-top:10px; box-shadow: 0px 7.2px 7.2px 0px #81818126; border-radius: 20px; }
	.clients .tab-menu button { width: 100%; height: 100%; padding: 4px 22px; height: 40px; text-align: left; }
	.clients .tab-menu button.active { background: #F1F5F8; color:var(--sub-black); }
	.clients .tab-menu > p { display: flex; align-items: center; padding: 0 22px; }
	.clients .client-logos { height: 132px; }
	.client-logos ul { gap:10px; }
	.client-logos ul li { width: 16.5rem; padding: 15px; border-radius: 7px; }
	.client-logos ul:last-child { margin-top: 10px; }

	.integrated-solution-inner .swiper-container { margin-top: 40px; }
}

@media screen and (max-width:480px){
	.main-visual { background: url('/images/main/main_bg_m.png') no-repeat center/cover; }
}