@charset "utf-8";

:root {
    --main-black:#1C2A39;
    --sub-black: #6D7578;
    --key-color: #084AF7;
    --point-color: #f08338;
    --font-family: 'Inter Tight', sans-serif;
    --font-size: 62.5%;
    --font-weight: 400;

    --font-size-1: 2.6rem;
    --font-size-2: 2rem;
    --font-size-3: 1.8rem;

	--sub-key-color: #63C1FF;
	--blue04: #009AFF;
	--cool-gray100: #F1F5F8;
	--cool-gray200: #E3E8ED;
}

.inner { position: relative; width: 92%; max-width: 1520px; margin: 0 auto; }

/* reset(기본셋팅 영역) s */
* { margin: 0; padding: 0; font: inherit; color: inherit; }
*, :after, :before { box-sizing: border-box; }

:root {-webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -o-text-size-adjust: 100%; text-size-adjust: 100%; cursor: default; overflow-wrap: break-word; }

html,body { height: 100%; }
html { scroll-behavior: smooth; box-sizing: border-box; }
body { margin: 0px auto; line-height: 1.4; -webkit-font-smoothing: antialiased; min-width: 360px; letter-spacing: -.25px; }

a { text-decoration: none; }
ol, ul { list-style: none; }

p, li, span, input, a { line-height: 1.4; }
fieldset, iframe { border: 0; }
select, input, textarea, button { font-size: inherit; vertical-align: middle; border-radius: 0px; }
select { border-radius:0; /* 아이폰 사파리 보더 없애기 */ -webkit-appearance:none; /* 화살표 없애기 for chrome*/ -moz-appearance:none; /* 화살표 없애기 for firefox*/ appearance:none /* 화살표 없애기 공통*/ }
select::-ms-expand{ display:none /* 화살표 없애기 for IE10, 11*/ }
textarea { width: 100%; resize: none; }
table {	border-collapse: collapse; border-spacing: 0; table-layout: fixed; }
button { background-color: transparent; border: 0; cursor: pointer; font: inherit; line-height: inherit; vertical-align: inherit; }
button:disabled { cursor: default; }
strong { font-weight: bold; }
caption, legend, .blind { overflow: hidden; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; clip: rect(0,0,0,0); white-space: nowrap; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
blockquote, q {	quotes: none; }
address, em { font-style: normal; }
pre { white-space: pre-wrap;}
img { width: 100%; max-width: fit-content; vertical-align: top; }
video { vertical-align: top; }
b { font-weight: 800; }


/* 커스텀 셋팅 영역 s */
.accessibility { width: 100%; position: fixed; top: 0; left: -50000px; z-index: 200; background-color: #cc2634; color: #fff; padding: 24px 0; text-align: center; font-size: 18px; font-weight: 600; }
.accessibility:focus { left: 0; }
html { font-weight: var(--font-weight); font-family: var(--font-family); color: var(--main-black); font-size: var(--font-size); word-break: keep-all; }

.fw3 { font-weight: 300; }
.fw5 { font-weight: 500; }
.fw6 { font-weight: 600; }
.fw7 { font-weight: 700; }
.fw8 { font-weight: 800; }
.fw9 { font-weight: 900; }

.swiper-container-horizontal > .swiper-scrollbar { z-index: 1; display: none; position: relative; height:1px; margin-top: 50px; background: #DDDDDD; }
.swiper-container-horizontal .swiper-scrollbar-drag { height: 3px; background: #009AFF; top: -1px; }
.mb-view { display: none; }
.view-video { position: relative; display: flex; align-items: center; gap:5px; width: fit-content; padding: 4px 0; color:var(--sub-black); font-size: var(--font-size-3); font-weight: 500; transition: .3s; }
.view-video::before { content: ''; display: block; width: 22px; aspect-ratio: 1/1; background: url('/images/ico_play.svg') no-repeat center/contain; filter:saturate(0) brightness(1.5); transition: .3s; }
.view-video::after { content: ''; position: absolute; left: 0; bottom:0; width:100%; height:1.5px; background:var(--sub-black); transition: .3s; }
.view-video:hover { color:var(--key-color); }
.view-video:hover::before { filter:none; }
.view-video:hover::after { background: var(--key-color); }

@media screen and (max-width:1700px){
  html { font-size: 55%; }
}
@media screen and (max-width:1200px){
	:root {
		--font-size-1: 2.4rem;
		--font-size-2: 1.8rem;
		--font-size-3: 1.7rem;
	}
}
@media screen and (max-width:1024px){
  html { font-size: 50%; }
}

@media screen and (max-width:768px){
	:root {
		--font-size-1: 18px;
		--font-size-2: 15px;
		--font-size-3: 14px;
	}
  .swiper-container-horizontal > .swiper-scrollbar { display: block; }
  .mb-view { display: block !important; }
  .pc-view { display: none !important; }
}


/* 메인 + 서브 */
.case-link-list { overflow: hidden; }
.case-link-list-inner { width: 92%; max-width: 1660px; margin: 0 auto; overflow: visible; }
.sub .case-link-list-inner { max-width: 1520px; }
.case-link-list .swiper-container { overflow: visible; }
.case-link-list li { z-index: 1; position: relative; width: fit-content; height: 56rem; padding: 5rem; color: #fff; border-radius: 2rem; background: linear-gradient(141.06deg, #087DFE 7.68%, #3EB7EE 103.49%); aspect-ratio: 533/560; }
.case-link-list li > a { display: block; height: 100%; }
.case-link-list li .text-box h4 { margin: 3rem 0 1rem; font-size: 3.6rem; font-weight: 600; }
.case-link-list li .text-box span { padding:.7rem 1.3rem; border-radius: 5px; background: #FFFFFF4D; color:white; font-size: 1.6rem; line-height: 1.1; text-transform: uppercase; letter-spacing: 0; }
.case-link-list li .text-box p { font-size: var(--font-size-3); line-height: 1.3; letter-spacing: 0; }
.case-link-list .img-box { z-index: -1; position: absolute; right:0; bottom:0; }
.case-link-list .link-wrap { position: absolute; left:5rem; bottom:5rem; }
.case-link-list .link-wrap p { margin-bottom: 1.5rem; font-size: var(--font-size-2); line-height: 1.4; font-weight: 500; }
.case-link-list .link-wrap .btn-link { height:3.2rem; margin-top:1rem; padding: 0 1.3rem; border: 1px solid #6CC3FF; font-size: 1.6rem; line-height: 1.1; font-weight: 500; }
.case-link-list .link-wrap .btn-link::after { width: 1.8rem; }
.case-link-list .li-keywords .link-wrap .btn-link::after { display: none; }
.case-link-list .link-wrap .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; }
.case-link-list .link-wrap .btn-link:hover { border-color: transparent; }
.case-link-list .link-wrap .btn-link:hover::before { opacity: 1; }
.case-link-list .link-wrap .btn-link .trans-x-box > span::after { color:white; }



@media screen and (max-width:1200px){
	.case-link-list li { height: 52rem; }
}
@media screen and (max-width:768px){
	.case-link-list-inner { width: 100%; padding: 0 20px; }
	.case-link-list li { width: 267px; height: 342px; padding: 25px; aspect-ratio: auto; }
	.case-link-list li .text-box span { padding: 5px 10px; font-size: 10px; }
	.case-link-list li .text-box h4 { margin-top: 15px; margin-bottom: 7px; font-size: 26px; }
	.case-link-list .link-wrap { left: 25px; bottom:35px; }
	.case-link-list .link-wrap p { margin-bottom: 5px; }
	.case-link-list .link-wrap .btn-link { width: fit-content; margin-top: 5px; padding: 4px 7px; font-size: 11px; }
}


/* Solution Map */
.solution-map { position: relative; color:white; aspect-ratio: 192/97; }
.solution-map-bg-wrap { width: 100%; height: 100%; }
.solution-map-bg { width: 100%; height: 100%; background: url('/images/main/main_map_bg.png') no-repeat center/cover; }
.solution-map-inner { z-index: 1; position: absolute; left: 0; right:0; top:0; width: 92%; max-width: 1660px; margin:0 auto; padding: 10rem 0; height: 100%; }
.solution-map-inner .solution-text { margin-top: 1.7rem; font-size: var(--font-size-3); font-weight: 400; line-height: 1.3; letter-spacing: 0; }
.solution-select { z-index: 2; position: absolute; }
.solution-select .select-title { display: flex; align-items: center; justify-content: space-between; width: 21.5rem; padding:1.5rem 2.5rem; border-radius: 1.5rem; background: #1C2A39; color:white; font-size: var(--font-size-3); font-weight: 600; cursor: pointer; }
.solution-select .select-title::after { content: ''; width: 2.5rem; aspect-ratio: 1/1; background: url('/images/main/select_arw.svg') no-repeat center/contain; transition: .3s ease-in-out; }
.solution-select .select-title.active::after { transform: rotate(180deg); }
.solution-select .select-list { display: none; position: absolute; bottom:-1rem; left:0; transform: translateY(100%); width: 28.5rem; padding: 2.5rem; border-radius: 1.5rem; background: white; box-shadow: 0px 10px 10px 0px #1D36621A; }
.solution-select .select-list.active { display: block; }
.solution-select .select-list a { position: relative; display: block; padding: 1.5rem; border-radius: 7px; transition: .3s ease-in-out; }
.solution-select .select-list a::after { content: ''; position: absolute; right:1.5rem; top:50%; transform: translateY(-50%); display: block; width: 2.2rem; aspect-ratio: 1/1; background: url('/images/main/select_link_arw.svg') no-repeat center/contain; transition: .3s ease-in-out; }
.solution-select .select-list p:nth-child(1) { color:var(--main-black); font-size: var(--font-size-3); font-weight: 600; line-height: 1; }
.solution-select .select-list p:nth-child(2) { margin-top: 5px; color:var(--sub-black); font-size: 12px; font-weight: 400; line-height: 1; }
.solution-select .select-list a:hover { background:#7CFF01; }
.solution-select .select-list a:not([href])::after { display: none; }
.solution-select.solution-select-iam { left:42%; top:23%; }
.solution-select.solution-select-cer { left:62%; top:54%; }
.solution-select.solution-select-ai { right:2%; top:32%; }
.solution-select.solution-select-pas { right:-1%; top:59%; }
.solution-select.solution-select-pas .select-list { left:auto; right:0; }
.solution-select.solution-select-zer { left:18%; top:70%; }
.mobile-solution-select { display: none; max-width: 500px; margin: 20px auto 0; border-radius: 30px; background: white; color:var(--main-black); }
.mobile-solution-select > div { display: flex; }
.mobile-solution-select .mobile-select { z-index: 2; position: relative; flex:1; padding: 13px; cursor: pointer; }
.mobile-solution-select .mobile-select > p { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 500; line-height: 1.4; color:#AAAAAA; }
.mobile-solution-select .mobile-select > p::after { content: ''; width: 14px; aspect-ratio: 1/1; background: url('/images/main/select_arw.svg') no-repeat center/contain; transition: .3s ease-in-out; filter: invert(.5); }
.mobile-solution-select .mobile-select > p.selected { color:#007bff !important; }
.mobile-solution-select .mobile-select ul { display: none; position: absolute; left:0; bottom:-7px; width: 100%; padding: 15px; background: white; border-radius: 10px; transform: translateY(100%); }
.mobile-solution-select .mobile-select li a { position: relative; display: block; margin-bottom: 15px; font-size: 14px; font-weight: 600; line-height: 1; }
.mobile-solution-select .mobile-select li:last-child a { margin-bottom: 0; }
.mobile-solution-select .mobile-select li p:nth-child(2) { margin-top: 3px; font-size: 8px; line-height: 1; color:var(--sub-black); }
.mobile-solution-select .mobile-select-dep2 li a::after { content: ''; position: absolute; right:0; top:50%; transform: translateY(-50%); display: block; width: 2.2rem; aspect-ratio: 1/1; background: url('/images/main/select_link_arw.svg') no-repeat center/contain; }
.mobile-solution-select .mobile-select-dep2 li a:not([href])::after { display: none; }
.mobile-solution-select .mobile-select.active > p { color:var(--main-black); }
.mobile-solution-select .mobile-select.active > p::after { transform: rotate(180deg); }

@media screen and (max-width:1660px){
	.solution-select.solution-select-iam { left: 32%; }
	.solution-select.solution-select-cer { left: 56%; }
}

@media screen and (max-width:1200px){
	.solution-map-inner { padding: 3rem 0; }
	.solution-select .select-title { width: 20rem; padding: 1rem 2rem; }
	.solution-select .select-list { width: 26rem; padding: 1.5rem; }
	.solution-select .select-list a { padding: 1rem; }
}
@media screen and (max-width:1024px){
	.solution-map { width: 100%; height:720px; aspect-ratio: auto; }
	.solution-map-bg-wrap { cursor: grab; background: linear-gradient(90deg, #40B8F1 2.57%, #1368BE 47.71%, #0045A8 69.95%); overflow: hidden; }
	.solution-map-bg { width: auto; aspect-ratio: 114/64; background: url('/images/main/main_map_bg_m.png?ver=251127') no-repeat center/cover; }
	.solution-map-inner { display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; padding: 40px 20px 30px; pointer-events: none; }
	.solution-map-inner > * { pointer-events: initial; }
	.solution-map-inner h3 { text-align: center; }
	.solution-map-inner .solution-text { width: 270px; }
	.solution-map-inner .solution-text p { display: inline; }
	.solution-map .solution-select { display: none; }
	.solution-map .mobile-solution-select { display: block; }
}
@media screen and (max-width:768px){
	.solution-map  { height: 640px; }
}
@media screen and (min-width:1024px){
	.solution-map-bg { transform: none !important; }
}



/* Use Case */
.use-case { padding: 17rem 0 15rem; overflow: hidden; }
.use-case .h3-wrap { text-align: center; }
.use-case .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; }
.use-case .h3-wrap span::before { content: ''; width: 3px; aspect-ratio: 1/1; border-radius: 3px; background: #009AFF; }
.use-case .h3-wrap h3 { margin-top: 2.5rem; font-size: 4.8rem; font-weight: 600; line-height: 1.2; }
.use-case .h3-basic { display: flex; justify-content: space-between; margin-bottom: 7rem; }
.use-case .btn-link { border: 1px solid var(--sub-black); color:var(--sub-black); }
.use-case .btn-link::after { filter: saturate(0) brightness(3); }
.use-case .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; }
.use-case .btn-link .trans-x-box > span::after { color:white; }
.use-case .btn-link:hover { border-color: transparent; }
.use-case .btn-link:hover::before { opacity: 1; }
.use-case .btn-link:hover::after { filter: saturate(0) brightness(10); }
.use-case .swiper-container { overflow: visible; }
.use-case-inner { position: relative; }
.use-case-inner ul { display: flex; }
.use-case-inner li { width: 42.2rem; border-radius: 10px; overflow: hidden; }
.use-case-inner li .case-image { width: 100%; aspect-ratio: 422/285; border-radius: 1.2rem; overflow: hidden; }
.use-case-inner li .case-image img { max-width: none; height: 100%; object-fit: cover; }
.use-case-inner li .case-category { margin-top: 3rem; margin-bottom: 2rem; }
.use-case-inner li .case-category span { display: inline-block; padding:5px 1rem; margin-right: 1rem; border-radius: 5px; font-size: 1.4rem; line-height: 1.1; font-weight: 600; }
.use-case-inner li .case-category span.category-green { background: #7CFF01; }
.use-case-inner li .case-category span.category-blue { background: #087DFE; color:white; }
.use-case-inner li p { font-weight: 600; font-size: 2.2rem; line-height: 1.3; }

@media screen and (max-width:768px){
	.h3-wrap span { padding:5px 10px; font-size: 10px; }
	.h3-wrap h3 { margin-top: 15px; font-size: 26px; }

	.use-case { padding: 80px 0; }
	.use-case .h3-basic { margin-bottom: 30px; }
	.use-case-inner { padding-bottom: 60px; }
	.use-case-inner li { width: 267px; }
	.use-case-inner li .case-category { margin-top: 20px; margin-bottom: 15px; }
	.use-case-inner li .case-category span { margin-right: 5px; padding: 5px 10px; font-size: 10px; border-radius: 3px; }
	.use-case-inner li p { font-size: 16px; }
	.use-case-inner .btn-link { position: absolute; width: 100%; left: 0px; bottom:0; }
}