@charset "utf-8";

:root {
    --main-black:#101828;
    --sub-black: #6D7578;
    --key-color: #155EEF;
    --gradient-color: linear-gradient(270deg, #C360D9 0%, #2666E7 100%);
    --font-family: 'DM Sans', sans-serif;
    --font-size: 62.5%;
    --font-weight: 400;

    --font-size-1: 6rem;
    --font-size-2: 3rem;
    --font-size-3: 2.4rem;
    --font-size-4: 2rem;
    --font-size-5: 1.8rem;
}

.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.3; -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.3; }
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-scrollbar { z-index: 1; display: none; position: relative; height:1px; margin-top: 20px; background: transparent; }
.swiper-scrollbar-drag { height: 3px; background: #155EEF; top: -1px; }
.mb-view { display: none; }

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

@media screen and (max-width:768px){
	:root {
		--font-size-1: 30px;
		--font-size-2: 20px;
		--font-size-3: 18px;
		--font-size-4: 15px;
		--font-size-5: 15px;
	}
	.inner { width: 100%; padding: 0 20px; }

	.swiper-scrollbar { display: block; }
	.mb-view { display: block !important; }
	.pc-view { display: none !important; }
}


.h3-wrap > span { position: relative; display: inline-flex; align-items: center; gap:3px; font-size: 15px; margin-bottom: 2rem; font-weight: 700; text-transform: uppercase; color:var(--key-color); line-height: 13px; }
.h3-wrap > span::before { content: ''; display: block; width: 13px; aspect-ratio: 1/1; background: url('/images/main/main_h3_deco.svg') no-repeat center/contain; }
.h3-wrap h3 { font-size: var(--font-size-1); font-weight: 500; line-height: 1.1; }


/* Contact Section */
.contact-section { padding: 0 3.4rem 10rem; text-align: center; }
.contact-section h3 { font-weight: 600; }
.contact-section .contact-content { position: relative; height: 66.2rem; border-radius: 3rem; display: flex; overflow: hidden; }
.contact-section .contact-content .contact-bg { position: absolute; left:0; top:0; width: 100%; height: 190%; background: url('/images/main/main_contact_bg.jpg') no-repeat center/cover; }
.contact-section .contact-content .inner { display: flex; align-items: center; justify-content: center; }
.contact-section .contact-content .description { margin-top: 3rem; font-size: var(--font-size-4); }
.contact-section .contact-content .btn-link { margin:8rem auto 0; background:var(--main-black); color:white; }
.contact-section .contact-content .btn-link::after { filter: saturate(0) brightness(10); }
.contact-section .contact-content .btn-link .trans-x-box > span::after { color:var(--main-black); }
.contact-section .contact-content .btn-link:hover { background: white; }
.contact-section .contact-content .btn-link:hover::after { filter:none; }


/* Blog Section */
.blog-section { padding-bottom: 17rem; overflow: hidden; }
.blog-section .inner::before { z-index: 2; content: ''; position: absolute; left:50%; bottom:0; transform: translateX(-50%); width:100vw; height: 58.4rem; background: linear-gradient(90deg,rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, 1) 99%); pointer-events: none; }
.blog-section .blog-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6rem; }
.blog-section .h3-wrap { padding-left: 2rem; }
.blog-section .btn-link { color:var(--sub-black); border:1px solid var(--sub-black); }
.blog-section .btn-link::before { content: ''; z-index: -1; position: absolute; left:0; top:0; width: 100%; height: 100%; background: var(--gradient-color); opacity: 0; transition: .3s ease-in-out; }
.blog-section .btn-link::after { filter:saturate(0) brightness(5); }
.blog-section .btn-link .trans-x-box > span::after { color:white; }
.blog-section .btn-link:hover { border-color:transparent; }
.blog-section .btn-link:hover::before { opacity: 1; }
.blog-section .btn-link:hover::after { filter:saturate(0) brightness(10); }
.blog-section .inner { overflow: visible; }
.blog-section .swiper-container { overflow: visible; }
.blog-list li { z-index: 1; position: relative; width: 46.2rem; border-radius: 1.2rem; border:1px solid transparent; transition: .4s ease-in; overflow: hidden; }
.blog-list li::before { z-index: -1; content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #CEDFFE 0%, #F1F6FF 100%); opacity: 0; transition: .4s ease-in; }
.blog-list li > a { display: block; height: 100%; padding: 2rem 2rem 4.6rem; }
.blog-list li .blog-image { width: 100%; margin-bottom: 3rem; aspect-ratio: 422/356; border-radius: 1.2rem; overflow: hidden; }
.blog-list li .blog-image img { max-width: none; height: 100%; object-fit: cover; transition: .4s ease-in; }
.blog-list li .blog-text-wrap { padding:0 1.4rem; }
.blog-list li .blog-date { margin-top: 16px; font-size: 16px; color:var(--sub-black); }
.blog-list li p { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 500; font-size: var(--font-size-3); line-height: 1.2; }
.blog-list li:hover { border:1px solid #E2EDFF; }
.blog-list li:hover::before { opacity: 1; }
.blog-list li:hover .blog-image img { transform: scale(1.1); }
.blog-category { margin-bottom: 1.2rem; color: var(--key-color); font-size: 16px; line-height: 1.1; font-weight: 600; }
.blog-category span { display: inline-block; padding:5px 1rem; margin-right: 1rem; border-radius: 5px; font-size: 14px; line-height: 1.1; font-weight: 600; }
.blog-category span.category-violet { background: #F5F2FF; color:#9462DD; }
.blog-category span.category-green { background: #EBF7FC; color:#209FD9; }
.blog-category span.category-blue { background: #EEF5FF; color: var(--key-color); }
.blog-category span.category-yellow  { background: #FFFAEB; color: #F79009; }


@media screen and (max-width:1200px){
	.blog-section { padding-bottom:12rem ; }
}
@media screen and (max-width:1024px){
	.blog-list li { width: 40rem; }
	.blog-list li > a { padding: 1.4rem 1.4rem 4rem; }
}
@media screen and (max-width:768px){
	.h3-wrap > span { font-size: 13px; margin-bottom: 18px; }
	.h3-wrap > span::before { width: 10px; }

	.contact-section { padding: 0 20px 50px; }
	.contact-section .contact-content { height: 394px; border-radius: 20px; }
	.contact-section .contact-content .btn-link { width: fit-content; margin-top: 32px; }
	.contact-section .contact-content .description { margin-top: 10px; }

	.blog-section { padding-bottom:80px ; }
	.blog-section .inner::before { display: none; }
	.blog-section .btn-link { width: fit-content; border-color:transparent; color:white; }
	.blog-section .btn-link::before { opacity: 1; }
	.blog-section .btn-link::after { filter:saturate(0) brightness(10); }
}
@media screen and (max-width:480px){
	.blog-section .h3-wrap { padding-left: 0; }
	.blog-section .blog-top { margin-bottom: 33px; }
	.blog-section .swiper-wrapper { max-width: 400px; margin:0 auto; flex-direction: column; gap:36px; }
	.blog-list li { width: 100%; }
	.blog-list li > a { padding: 0 0 4rem; }
	.blog-list li .blog-text-wrap { padding: 0; }
	.blog-list li .blog-image { margin-bottom: 20px; }
	.blog-list li .blog-date { margin-top: 12px; font-size: 15px; }
	.blog-list li::before { display: none; }
	.blog-list li:hover { border-color:white; }
	.blog-category { margin-bottom: 10px; }
	.blog-category span { font-size: 13px; }
}


.impact-list ul { display: flex; width: 100%; }
.impact-list li { width: 33.5rem; padding: 0 3rem; border-left: 1px solid #DDDDDD; }
.impact-list li .impact-number { font-size: 9rem; line-height: 1.1; font-weight: 500; color:transparent; background: linear-gradient(180deg, #101828 0%, #39558E 100%); background-clip: text; -webkit-background-clip: text; }
.impact-list li .impact-number span { line-height: 1.1; }
.impact-list li .impact-text { margin-top: 5px; font-size: var(--font-size-4); color:var(--sub-black) }
.impact-list li:last-child { width: 30rem; }

@media screen and (max-width:1600px){
	.impact-list li { width: 30rem; }
	.impact-list li .impact-number { font-size: 7rem; }
}
@media screen and (max-width:768px){
	.impact-list ul { display: block; }
	.impact-list li { width: 100%; padding: 20px 0; border-left:none; border-bottom:1px solid #DDDDDD; }
	.impact-list li:last-child { width: 100%; border-bottom: none; }
	.impact-list li .impact-number { font-size: 50px; }
	.impact-list li .impact-text br { display: none; }
}


/* Redefining Section */
.redefining-section { padding: 17rem 0; text-align: center; background: #EDF4FFCC; transition: background .4s; }
.redefining-section .description { max-width: 85rem; margin: 2.6rem auto 8rem; font-size: var(--font-size-4); font-weight: 300; color:var(--sub-black) }
.redefining-section ul { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto 8rem auto; gap:2.8rem; }
.redefining-section li { display: flex; flex-direction: column; padding: 3rem 3rem 5.2rem; background: white; box-shadow: 0px 4px 22px 0px #11314B0F; border-radius: 3rem; }
.redefining-section li:nth-child(1) { grid-row: span 2; }
.redefining-section li:nth-child(4) { grid-column: 2; grid-row: 2 / span 2; }
.redefining-section dt { margin: 3.5rem 0 1rem; font-size: var(--font-size-3); font-weight: 600; line-height: 1.25; color: #101828;	}
.redefining-section dd { margin: 0 auto; line-height: 1.25; color:var(--sub-black); font-size: var(--font-size-4); }
.redefining-section .list-img { position: relative; flex:1; border-radius: 2.5rem; background: linear-gradient(180deg, #EDF4FF 0%, rgba(237, 244, 255, 0.2) 100%); border: 1px solid #E2EDFF; }
.redefining-section .list-img .ab { position: absolute; left:0; top:0; }

@media screen and (max-width:1200px){
	.redefining-section { padding: 12rem 0; }
	.redefining-section li { padding: 2rem 2rem 4rem; }
	.redefining-section ul { gap: 2rem; }
}
@media screen and (max-width:768px){
	.redefining-section { padding: 80px 0; }
	.redefining-section .description { margin: 20px auto 32px; }
	.redefining-section ul { display: flex; flex-direction: column; gap:20px; max-width: 400px; margin:0 auto; }
	.redefining-section li { padding: 10px 10px 28px; border-radius: 20px; }
	.redefining-section .list-img { border-radius: 10px; }
	.redefining-section dt { max-width: 280px; margin: 19px auto 9px; }
	.redefining-section dd { max-width: 294px; }
	.redefining-section dd br { display: none; }
}