@charset "utf-8";
html {scroll-behavior:smooth;}
* {list-style:none; padding:0; margin:0; box-sizing:border-box;}
body {font-family:'Pretendard Variable', sans-serif; font-size:18px; font-weight:370; line-height:1.7; color:#555; word-break:keep-all; overflow-x:hidden;}

a {text-decoration:none !important; outline:none !important; selector-dummy:expression(this.hideFocus=true) !important; color:inherit;}
a:link,a:visited,a:hover,a:active {text-decoration:none; color:inherit;}
a,img,i,button {transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
button {cursor:pointer;}
img {max-width:100%;}

:root {
	--base1:#EA2227;
	--base2:#1C3464;
	--base3:#40B4E5;
	--border:#e5e5e5;
	--radius-20:clamp(10px, 0.893vw + 7.14px, 20px);
	--10to20:clamp(10px, 0.893vw + 7.14px, 20px);
	--20to30:clamp(20px, 37.037vw - 98.52px, 30px);
}

.fixMenu {position:fixed; right:10px; z-index:9999; text-align:center; bottom:50%;}
.fixMenu .goTop {
	display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
	width:50px; height:70px; border-radius:100px; background:var(--base3);
	font-size:12px; color:#fff; line-height:1; transition:all .3s ease !important;
	transform:translateX(70px); opacity:0; box-shadow:-10px 20px 20px rgba(0,0,0,.4);
	border:0;
}
.fixMenu .goTop:before {content:""; width:7px; height:7px; border:3px solid #fff; border-left:0; border-bottom:0; transform:rotate(-45deg);}
.fixMenu .goTop:hover {height:100px; gap:10px;}
.fixMenu .goTop.active {transform:translateX(0); opacity:1;}


/* ********************** 인터랙션 ********************** */
/* 단어별 분해해서 글자색 바꾸기 */
.scroll-word {transition:.3s;}
.scroll-word.is-active{font-weight:700; color:var(--base2);}
span .scroll-word.is-active{border-bottom:1px solid #000; transform:scale(1.2);}

/* 레이어 스택을 위한 핵심 스타일 */
.stack-section {
    position: sticky;
    top: 0;    
    overflow: hidden;    
}

/* 배경색이 있어야 뒷 섹션이 가려집니다 */
.whiteBg { background: #fff; }
.grayBg { background: #f8f9fa; }

/* 모바일에서는 스택 효과를 끄는 것이 사용성이 좋습니다 */
@media (max-width: 768px) {
    .stack-section {
        position: static;
        height: auto;
        padding: 80px 20px;
    }
}


/* ************************************ */
.i_check {display:flex; gap:10px; align-items:flex-start;}
.i_check:before {content:""; width:18px; height:14px; margin-top:9px; background-position:center; background-repeat:no-repeat; background-size:contain;}
.i_check.white:before {background-image:url(/images/homepage/icon_check_white.svg);}
.i_check.blue:before {order:2; mask:url(/images/homepage/icon_check_white.svg) no-repeat center; background:var(--base3);}
.trans {font-weight:initial; transition:.3s ease; border-bottom:1px solid transparent;}
.head:hover .trans {font-weight:600; color:var(--base1); border-bottom:1px solid var(--base1);}
.grayBg {background:#f8f8f8;}
.blueBg {background:var(--base2); color:#fff;}

h1,h2 {letter-spacing:-.03vw; line-height:1.2; word-break:keep-all;}
h2 {font-size:clamp(24px, 1.071vw + 20.57px, 40px); color:var(--base2);}
h2[data-scroll-text] {color:rgba(0,0,0,.1);}
section {position:relative; padding:8vw 12vw; background:#fff;}
section.row {display:flex; gap:clamp(50px, 4.464vw + 35.71px, 100px); justify-content:space-between;}
section .head {display:flex; gap:30px; flex-direction:column; flex:1;}
section .head small {font-weight:700; color:#000;}
section .con {width:50%; position:relative;}

header {
	display:flex; justify-content:space-between; align-items:center; line-height:1;	
	z-index:9999; position:fixed; left:0; top:0; width:100%; padding:clamp(20px, 4.464vw + 5.71px, 70px) 5vw;    
    backdrop-filter:blur(5px); transition:.3s ease;
}
header.is-scrolled {padding:var(--10to20) 5vw;}
header:hover {background:#fff;}
header .logo {display:block;}
header .logo img {display:block; height:clamp(20px, 0.926vw + 17.04px, 30px); width:auto;}
header nav {display:flex; gap:5px; font-size:clamp(13px, 0.278vw + 12.11px, 16px); font-weight:600;}
header nav * {transition:.4s ease;}
header nav .inquiry {display:flex; align-items:center; padding:10px var(--20to30); background:var(--base2); color:#000; border-radius:100px; color:#fff;}
header nav .inquiry:hover {background:var(--base1);}
header nav .tel {display:flex; align-items:center; background:var(--base3); border-radius:100px; color:#fff; cursor:default;}
header nav .tel i {
	display:flex;
	align-items:center;
	justify-content:center;
	width:clamp(38px, 0.741vw + 35.63px, 46px);
	aspect-ratio:1/1;
	background:none;
}

header nav .tel i svg {
	display:block;
	width:clamp(20px, 0.37vw + 18.81px, 24px);
	aspect-ratio:1/1;
	fill:#fff;
}
header nav .tel span {display:block; white-space:nowrap; overflow:hidden; width:0;}
header nav .tel:hover {background:var(--base1);}
header nav .tel:hover span {width:110px;}


.part1 {position:relative; padding:200px 5vw 0; overflow:hidden;}
.part1 .wrap {
	display:flex;
	background:var(--base2); border-radius:var(--radius-20); color:#fff;
}
.part1 .wrap .head {padding:clamp(40px, 5.37vw + 22.81px, 7vw);}
.part1 .wrap h1 {font-size:clamp(18px, 1.111vw + 14.44px, 24px); font-weight:500; line-height:1.2;}
.part1 .wrap h1 span {display:block; font-size:clamp(30px, 3.704vw + 18.15px, 60px); font-weight:700; transition:.3s ease;}
.part1 .wrap ul {display:flex; flex-direction:column; gap:clamp(5px, 0.463vw + 3.52px, 10px); margin-top:clamp(40px, 2.778vw + 31.11px, 40px);}
.part1 .logoWrap {width:53%; display:flex; align-items:center; padding-right:4vw;}
.part1 #logoCanvas {display:block; width: 100%; height: auto; min-height: 400px; background: transparent;}


.part2 .img {position:absolute; width:100%; bottom:calc(-8vw - 10px);}


.part3 .con {display:flex; gap:20px; color:#fff; font-weight:500; line-height:1.4;}
.part3 .con .bg1 {background:var(--base3);}
.part3 .con .bg2 {background:var(--base2);}
.part3 .con .bg3 {background:#000;}
.part3 .con li {display:flex; flex-direction:column; justify-content:space-between; padding:clamp(30px, 2.778vw + 21.11px, 60px); border-radius:var(--radius-20);}


.part4 .con {display:flex; gap:0; flex-direction:column; justify-content:space-between; line-height:1.2;}
.part4 .con * { transition:.5s ease;}
.part4 .con li {display:flex; gap:20px; align-items:center; font-weight:700; color:var(--base2);}
.part4 .con li i {font-size:clamp(18px, 0.556vw + 16.22px, 24px); min-width:25px; color:#ccc; font-weight:200;}
.part4 .con li:hover {padding-left:20px;}
.part4 .con li:hover i {font-weight:700; color:#000;}
.part4 .con li:hover p {color:var(--base3);}
.part4 .con li.line {height:1px; border-top:1px solid var(--border);}


.part5 {flex-direction:column;}
.part5>* {position:relative;}
.part5 h2,.part5 .head small {color:#fff;}
.part5 .con {margin-top:50px; width:100%; display:flex; gap:clamp(20px, 1.852vw + 14.07px, 40px);}
.part5 .con dl {flex:1; color:#555; padding:clamp(30px, 3.704vw + 18.15px, 70px); background:#fff; border-radius:var(--radius-20);}
.part5 .con dt {display:flex; justify-content:space-between; align-items:center; font-size:clamp(20px, 0.37vw + 18.81px, 24px); font-weight:600; color:var(--base3);}
.part5 .con dt:before {margin:0;}
.part5 .con dd {margin-top:clamp(30px, 1.852vw + 24.07px, 50px);}
.part5 dl:hover .trans {font-weight:600; color:var(--base1); border-bottom:1px solid var(--base1);}
.part5 .video-background {z-index:0; position:absolute; top: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: soft-light; opacity:.5;}
.part5 .video-background video {width: 100%; height: 100%; object-fit: cover;}


.part6 .con{width:100%;display:flex;justify-content:space-around;background:#fff;padding:clamp(30px, 6.481vw + 9.26px, 100px);margin:clamp(30px,3vw,50px) 0; border-radius:var(--radius-20); box-shadow:30px 30px 30px rgba(0, 0, 0, .07);}
.part6 .con li{display:flex;flex-direction:column;align-items:center;gap:20px;}
.part6 .con li i{display:block;width:clamp(40px, 1.852vw + 34.07px, 60px);aspect-ratio:1/1;}
.part6 .con li i svg{width:100%;height:100%;display:block;}
.part6 .con li p{font-size:clamp(16px, 0.37vw + 14.81px, 20px); line-height:1.4;text-align:center;font-weight:600;color:#000;}
.part6 .con li p span{font-weight:inherit;}
.part6 .con li:hover .trans{font-weight:600;color:var(--base1);border-bottom:1px solid var(--base1);}
.part6 .con li:has(.circle):hover .trans{color:var(--base3);border-color:var(--base3);}
.part6 .con i.x .bg-line{stroke:#f0f0f0;}
.part6 .con i.x .line1,.part6 .con i.x .line2{
	stroke:var(--base1);
	stroke-dasharray:100;
	stroke-dashoffset:100;
	transition:stroke-dashoffset .8s ease;
}
.part6 .con i.x .line2{transition-delay:.4s;}
.part6 .con:hover i.x .line1,.part6 .con:hover i.x .line2{stroke-dashoffset:0;}
.part6 .con li i.circle .progress{
	stroke-dasharray:110;
	stroke-dashoffset:110;
	transition:stroke-dashoffset .8s ease;
	transform:rotate(-90deg);
	transform-origin:50% 50%;
}
.part6 .con:hover i.circle .progress{stroke-dashoffset:0;}
.part6 .btnWrap {display:flex; justify-content:space-between;}


.part7 .con {display:flex; gap:10px; flex-direction:column; justify-content:space-between; line-height:1.2;}
.part7 .con * {transition:.5s ease;}
.part7 .con li {display:flex; gap:20px; align-items:center; height:100%; font-weight:700; color:var(--base2); background:#f8f8f8; padding:20px clamp(30px, 1.852vw + 24.07px, 50px); border-radius:100px; border:1px solid #f0f0f0;}
.part7 .con li i:before {margin:0;}
.part7 .con li:hover {background:var(--base2); color:#fff; border-color:transparent;}


.part8 .head {text-align:center;}
.part8 .head h2 span {display:inline-block; color:#fff; font-size:clamp(18px, 0.37vw + 16.81px, 22px); font-weight:600; padding-bottom:10px; border-bottom:2px solid #fff;}
.part8 .head h2+p {font-size:clamp(30px, 3.704vw + 18.15px, 70px); line-height:1.2; font-weight:700; color:var(--base3);}
.part8 .head p+p {opacity:.5; font-weight:300;}
.part8 .btnWrap {display:flex; gap:10px; justify-content:center; margin-top:100px;}
.part8 .btnWrap a {display:block; flex:1; padding:var(--10to20) 0; font-size:clamp(16px, 0.556vw + 14.22px, 22px); font-weight:600; min-width:15vw; color:#fff; border-radius:100px; border:5px solid #fff; color:#fff; text-align:center;}
.part8 .btnWrap a:hover {background:#fff; color:var(--base3);}
.part8 dl {margin-top:50px; display:block; text-align:center;}
.part8 dt {font-size:22px; font-weight:600;}
.part8 dd {font-size:clamp(30px, 1.852vw + 24.07px, 50px); font-weight:700; line-height:1;}


/* FAQ */
.part9 {
	background:#fff;
}

.part9 .head {
	text-align:center;
	max-width:900px;
	margin:0 auto 60px;
}

.part9 .head small {
	color:var(--base3);
	font-weight:800;
	letter-spacing:.08em;
}

.part9 .head h2 {
	color:var(--base2);
}

.part9 .head p {
	color:#777;
}

.part9 .faq-list {
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:20px;
}

.part9 .faq-list dl {
	position:relative;
	padding:clamp(25px, 2.315vw + 17.59px, 50px);
	background:#f8f9fa;
	border:1px solid #edf0f3;
	border-radius:var(--radius-20);
	overflow:hidden;
	transition:.4s ease;
}

.part9 .faq-list dl:before {
	content:"Q";
	display:flex;
	justify-content:center;
	align-items:center;
	width:42px;
	aspect-ratio:1/1;
	margin-bottom:25px;
	background:var(--base2);
	border-radius:50%;
	color:#fff;
	font-size:18px;
	font-weight:800;
	line-height:1;
	transition:.4s ease;
}

.part9 .faq-list dl:after {
	content:"";
	position:absolute;
	right:-40px;
	bottom:-40px;
	width:120px;
	aspect-ratio:1/1;
	background:rgba(64,180,229,.1);
	border-radius:50%;
	transition:.4s ease;
}

.part9 .faq-list dl:hover {
	background:#fff;
	border-color:rgba(64,180,229,.35);
	box-shadow:20px 30px 40px rgba(0,0,0,.08);
	transform:translateY(-8px);
}

.part9 .faq-list dl:hover:before {
	background:var(--base3);
}

.part9 .faq-list dl:hover:after {
	right:-25px;
	bottom:-25px;
	background:rgba(234,34,39,.08);
}

.part9 .faq-list dt {
	position:relative;
	z-index:1;
	font-size:clamp(18px, 0.37vw + 16.81px, 22px);
	font-weight:700;
	line-height:1.4;
	color:#111;
	letter-spacing:-.02em;
}

.part9 .faq-list dd {
	position:relative;
	z-index:1;
	margin-top:20px;
	color:#666;
	font-size:clamp(15px, 0.278vw + 14.11px, 18px);
	line-height:1.8;
}

.part9 .faq-list dd strong {
	color:var(--base2);
	font-weight:700;
}

.part9 .faq-list a {
	color:var(--base1);
	font-weight:700;
	border-bottom:1px solid var(--base1);
}


/* 포트폴리오 */
.part10 {padding:clamp(80px, 7.813vw, 150px) 0;}
.part10 .head {width:min(92%, 1400px); margin:0 auto clamp(36px, 3.646vw, 70px); text-align:center;}
.part10 .head small {display:inline-flex; align-items:center; justify-content:center; margin-bottom:clamp(12px, 1.042vw, 20px); font-size:clamp(13px, 0.208vw + 12.33px, 15px); font-weight:800; letter-spacing:.16em; color:var(--base1);}
.part10 .head h2 {margin:0 0 clamp(14px, 1.042vw, 20px); font-size:clamp(30px, 2.083vw + 23.33px, 50px); font-weight:800; line-height:1.25; color:#111; letter-spacing:-0.04em; word-break:keep-all;}
.part10 .head p {max-width:760px; margin:0 auto; font-size:clamp(16px, 0.313vw + 15px, 19px); font-weight:500; line-height:1.75; color:#555; word-break:keep-all;}
.part10 .portfolio-type {display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(18px, 1.563vw, 30px); width:min(92%, 1400px); margin:0 auto; padding:0; list-style:none;}
.part10 .portfolio-type li {position:relative; border-radius:clamp(20px, 1.25vw, 24px); background:#fff; overflow:hidden; box-shadow:0 18px 45px rgba(17, 24, 39, .07); transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;}
.part10 .portfolio-type li:hover {transform:translateY(-10px); border-color:rgba(64, 180, 229, .45); box-shadow:0 28px 60px rgba(17, 24, 39, .13);}
.part10 .portfolio-type li a {display:block; height:100%; color:inherit; text-decoration:none;}
.part10 .portfolio-type li a p {font-size:15px; line-height:1.4;}
.part10 .portfolio-type .img {position:relative; aspect-ratio:1 / 1.3; overflow:hidden; border-bottom:1px solid #e5e5e5;}
.part10 .portfolio-type .img::before {content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,0) 58%, rgba(0,0,0,.22) 100%); opacity:0; transition:opacity .35s ease;}
.part10 .portfolio-type .img::after {content:"VIEW"; position:absolute; right:18px; bottom:18px; z-index:2; display:flex; align-items:center; justify-content:center; width:62px; height:62px; border-radius:50%; background:var(--base1); color:#fff; font-size:13px; font-weight:800; letter-spacing:.04em; opacity:0; transform:translateY(12px); transition:opacity .35s ease, transform .35s ease;}
.part10 .portfolio-type li:hover .img::before, .part10 .portfolio-type li:hover .img::after {opacity:1;}
.part10 .portfolio-type li:hover .img::after {transform:translateY(0);}
.part10 .portfolio-type .img img {display:block; width:100%; height:100%; object-fit:cover; object-position:top center; transform-origin:top center; transition:transform .55s ease; opacity:.95;}
.part10 .portfolio-type strong {display:block; padding:clamp(22px, 1.563vw, 30px) clamp(20px, 1.563vw, 30px) 0; font-size:clamp(20px, 0.417vw + 18.67px, 24px); font-weight:800; line-height:1.35; color:#111; letter-spacing:-0.03em; word-break:keep-all;}
.part10 .portfolio-type p {margin:0; padding:clamp(10px, 0.625vw, 12px) clamp(20px, 1.563vw, 30px) clamp(24px, 1.823vw, 35px); font-size:clamp(15px, 0.208vw + 14.33px, 17px); font-weight:500; line-height:1.65; color:#666; word-break:keep-all;}
.part10 .btnWrap {display:flex; justify-content:center; margin-top:clamp(34px, 2.604vw, 50px);}
.part10 .btnWrap a {display:inline-flex; align-items:center; justify-content:center; min-width:220px; height:clamp(54px, 3.333vw, 64px); padding:0 clamp(28px, 2.083vw, 40px); border-radius:999px; background:#111; color:#fff; font-size:clamp(16px, 0.208vw + 15.33px, 18px); font-weight:800; text-decoration:none; transition:background .3s ease, transform .3s ease, box-shadow .3s ease;}
.part10 .btnWrap a::after {content:""; display:block; width:7px; height:7px; margin-left:12px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg);}
.part10 .btnWrap a:hover {background:var(--base1); transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.16);}


footer {display:flex; justify-content:space-between; font-size:14px; padding:5vw; line-height:1.8;}
footer .info .row {display:flex; gap:2vw;}
footer .info p {margin-top:20px; font-size:12px;}
footer .info .red {color:var(--base1); font-weight:600;}
footer .btnWrap a {display:block; background:var(--base2); color:#fff; padding:20px 40px; font-size:14px;  font-weight:600; border-radius:100px;}



/* ************************ Pc ************************ */
@media screen and (min-width:1024px) {	
	.ani {
		opacity:0;
		transform:perspective(3000px) rotateX(470deg) translateY(0) scale(.7);
		transition:all 1s ease;
	}
	.ani.active {
		opacity:1;
		transform:rotateX(0);
	}
	.delay2 {transition-delay:0.2s;}
	.delay4 {transition-delay:0.4s;}
	.delay5 {transition-delay:0.6s;}
	.delay6 {transition-delay:0.8s;}
	.delay10 {transition-delay:1s;}	
}


/* ************************ 테블릿 ************************ */
@media screen and (max-width:1023px) {
	.pc {display:none !important;}
	body {font-size:16px; word-break:break-all;}
	section {padding:10vh 7vw;}
	section.row {flex-direction:column;}
	section .head {width:100%;}
	section .con {width:100%;}
	
	.fixMenu {display:none !important;}
	
	.part1 {padding-top:15vh;}
	.part1 .wrap ul {line-height:1.4;}
	.part2 {padding-bottom:0;}
	.part2 .img {position:relative; width:100%; text-align:center; bottom:-10px;}
	.part2 .img img {width:80%;}
	
	.part3 .con {flex-direction:column;}
	.part3 .con li {flex-direction:row; gap:20px; justify-content:flex-start;}
	
	.part4 .con {gap:20px;}
	.part5 .con {flex-direction:column;}
	.part6 .con {display:grid; grid-template-columns:repeat(2,1fr); gap:40px;}
	
	.part8 .btnWrap {margin-top:10vh;}
	.part8 .btnWrap li {flex:1;}
	.part8 .btnWrap+dl {margin-top:20px;}
	
	.part9 .head {margin-bottom:40px;}
	.part9 .faq-list {grid-template-columns:1fr; gap:15px;}
	.part9 .faq-list dl {padding:30px;}
	.part9 .faq-list dl:hover {transform:none;}
	
	.part10 .portfolio-type {grid-template-columns:repeat(2, minmax(0, 1fr));}
	
	footer {flex-direction:column; gap:30px; line-height:1.4; padding:10vh 7vw;}
	footer strong {display:block;}
	footer .info .row,
	footer .info .row+ul {display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
	footer .info .row+ul {margin-top:20px;}
	footer .btnWrap a {display:inline-block; padding:var(--10to20) clamp(20px, 1.852vw + 14.07px, 40px);}
}


/* ************************ 모바일 ************************ */
@media screen and (max-width:767px) {
	.part9 .head {text-align:left;}
	.part9 .faq-list dl {padding:25px 22px;}
	.part9 .faq-list dl:before {width:36px;	margin-bottom:20px; font-size:16px;}
	.part9 .faq-list dt {font-size:18px;}
	.part9 .faq-list dd {margin-top:15px; font-size:15px; line-height:1.7;}
	
	.part10 {padding:70px 0;}
	.part10 .head {width:88%; margin-bottom:32px; text-align:left;}
	.part10 .head p {font-size:16px; line-height:1.7;}
	.part10 .portfolio-type {grid-template-columns:1fr; width:88%; gap:20px;}
	.part10 .portfolio-type .img {aspect-ratio:1 / .64;}
	.part10 .portfolio-type strong {padding:22px 22px 0; font-size:21px;}
	.part10 .portfolio-type p {padding:10px 22px 26px; font-size:16px;}
	.part10 .portfolio-type .img::after {width:54px; height:54px; right:14px; bottom:14px; font-size:12px;}
	.part10 .btnWrap {width:88%; margin:34px auto 0;}
	.part10 .btnWrap a {width:100%; min-width:0;}
}