@charset "utf-8";

/* 00. font - 구글폰트에서 Montserrat 300/400/600 가져옴 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;600&family=Noto+Sans+KR&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;500;600&display=swap');

/* 00. Reset */
* {margin: 0;padding: 0;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;}
a {color: inherit; text-decoration: inherit;}
li {list-style: none;}
address, em, i {font-style: normal;}
button {background: none; border: none;}
img {vertical-align: middle;}


body { font-family: 'Raleway', sans-serif; font-size: 16px; letter-spacing: -0.01em;}
.wrap { position: relative; margin: 0 auto; background: #141212; color: #fff; }
header { position: fixed; width: 100%; z-index: 9999; }
header .inner {padding: 30px 50px 0;}
header .inner .logo { width: 150px; display: flex; justify-content: space-between;}
header .inner .logo span { padding: 0 1px;}
header .inner .logo span img { width: 100%;} /* .logo에 width: 150px이 걸려 있음, 부모크기에 맞춤*/

header .gnb {text-align: center;}
header .gnb  .menuOpen {font-size: 10px; position: absolute; left: 50%; transform: translateX(-50%); top:10px; padding: 30px 0; z-index: 10; cursor: pointer;}
/*
✅ 쉽게 이해하기 (비유)

left: 50% = “내 왼쪽 모서리를 부모의 정중앙에 갖다 붙여!”

transform: translateX(-50%) = “아, 그러면 치우치니까 내 자신을 왼쪽으로 반만큼 당겨와서 진짜 중앙에 맞춰!”

이 두 개를 세트로 쓰는 게 CSS에서 “정가운데 정렬”할 때 전형적인 방법이에요.
*/
header .gnb  .menuOpen::before{ content:''; width: 150px; height: 5px; background: #fff; position: absolute; left: 50%; top: 15px; transform: translateX(-50%); border-radius: 30px;
                                                transition: all 0.3s;}
header .gnb  .menuOpen:hover:before { width: 165px;}                                                
header .gnb .menuBox { width: 99%; position: absolute; left: 50%; transform: translateX(-50%); top:-1000%; background-color: rgba(55, 55, 55, .4); backdrop-filter: blur(30px); border-radius: 5px; padding: 100px 0 30px; box-sizing: border-box; transition: all 1.5s;}
header .gnb .menuBox li { overflow: hidden;}
header .gnb .menuBox li a { display: block; font-size: 40px; transform: translateY(-100px); transition: all 0.6s;}

header .gnb .menuBox.on {top:10px; transition: all 0.4s;}
header .gnb .menuBox.on li a { transform: translateY(0px);  }
header .gnb .menuBox.on li:nth-child(2) a { transition-delay: 0.05s;}
header .gnb .menuBox.on li:nth-child(3) a { transition-delay: 0.1s;}
header .gnb .menuBox.on li:nth-child(4) a { transition-delay: 0.15s;}


/* visual */
.visual { margin-bottom: 0;}
.visual .inner {display: grid; height: 100vh; padding: 25px 50px 25px; box-sizing: border-box; grid-template-rows: auto 1fr auto;}
/*fr = frection, 공간비율을 뜻함. 3개의 행을 나누고 첫번째 세번째는  auto이고 두 번째는 1의 비율을 가짐*/
.visual .inner .mainText { max-width: fit-content; font-weight: normal; font-size: 80px; margin-left: auto; line-height: 0.9; letter-spacing: -2px;}
/* fit-content : min-content와 max-content의 혼합버전. 부모요소의 가용범위내에서 알아서 최대크기로 width를 조정하지만,
가용범위가 부족하다면 max-width처럼 부모요소를 뚫고 나감.
min-content : 엘리먼트 너비를 최소로 줄이고 싶을 때 사용.
max-content : 엘리먼트의 너비를 최대너비로 늘리고 싶을 떄 사용. 부모요소의 가용범위를 뚫고 나감. */
.visual .inner .mainText span {display: block; overflow: hidden;}
.visual .inner .mainText span i { display: block; }
.visual .inner .subText { font-weight: normal; font-size: 20px; align-self: flex-end; margin-bottom: 50px;}
.visual .inner .subText span { color: #585858;}

.visual .logoWrap { display: flex; justify-content: space-between;}
.visual .logoWrap span { width: 16%;}
.visual .logoWrap span img { width: 100%;}

/* 공통요소로 스타일적용 */
section {margin-bottom: 150px;}
.inner { padding: 0 50px; box-sizing: border-box;}
.box { border-radius: 10px; overflow: hidden;}
.btn { font-size: 11px; padding: 12px 25px; box-sizing: border-box; border-radius: 30px; display: inline-block; background: #fff; color: #000; text-transform: uppercase; margin-top: 30px;}

/* con1 */
.con1 .box { padding: 60px; background-color: rgba(55,55,55,0.4); backdrop-filter: blur(100px); display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 90px;} /*1fr 2번적용 (열)*/
.con1 .box .mainText { font-size: 30px; grid-row-start: 2;}
.con1 .box .subText { max-width: 500px; font-size: 20px; grid-column-start:2;}
.con1 .box .subText p {margin-top: 14px;}

.con1 .textAni {margin-top: 14px; position: relative;}
.con1 .textAni::before{content: ''; width: 110px; height: 110px; border-radius: 100%; background: #e36840; position: absolute; right: 0; top: 0; animation: opa linear 1.5s 0s infinite;}
@keyframes opa {
    0% {opacity: 0;}
    30% {opacity: 1;}
    80% {opacity: 1;}
    100% {opacity: 0;}
}
.con1 .textAni ul { display: grid; max-width: 800px;}
.con1 .textAni ul li { font-size: 65px; text-transform: uppercase; letter-spacing: -1px; grid-row-start: 1; grid-column-start:1; transform: translateX(30px); opacity: 0;}


/* con2 */
.con2 .inner {position: relative; padding: 40px 50px;}
.con2 .inner::before {content: ""; width: 95%; height: 1px; background: #3b3b3b; position: absolute; left: 50%; transform: translateX(-50%); top: 0;}
.con2 .mainTextBox { position: relative;}
.con2 .mainTextBox span { position: absolute; right: 0; top: 0;}
.con2 .mainTextBox .in { display: flex; justify-content: flex-end; margin-bottom: 15px;}
.con2 .mainTextBox .in .box { max-width: 550px; margin-right: 20px;}
.con2 .mainTextBox .in .box video { width: 100%;}
.con2 .mainTextBox .title { font-size: 120px; line-height: 1; letter-spacing: -5px; text-align: right; overflow: hidden;}
.con2 .mainTextBox .title i {display: block;}
.con2 .mainTextBox .title.a {align-self: flex-end;}
.con2 .mainTextBox .title.b {margin-right: 400px;}
.con2 .subTextBox {display: flex; justify-content: space-between; align-items: flex-end;}
.con2 .subTextBox .subText {max-width: 600px; font-size: 22px;}
.con2 .subTextBox .subText p:nth-child(1) { margin-bottom: 20px; }
.con2 .subTextBox .iconbox { display: flex;}
.con2 .subTextBox .iconbox li {width: 28px; margin: 0 10px;  place-items: center;} /*영역 안에서 센터에 정렬*/
.con2 .subTextBox .iconbox li:last-child { width: 40px;}


/* con03 */
.con3 .inner {display: flex; justify-content: space-between;}
.con3 .textBox {width: 28%; }
.con3 .textBox h4 {font-size: 60px; font-weight: normal; position: sticky; position: -webkit-sticky; top:50%; transform: translateY(-50%);} /*스크롤과 연동하여 화면에 고정*/


.con3 .listBox {width: 70%; display: flex; justify-content: space-between; flex-wrap: wrap; perspective: 900px; overflow: hidden;} /*flex-wrap이 nowrap으로 되어있어서 아래로 , 안내려갔음, overflow:hidden은 스크롤 트리거를 작성하게되면 가로스크롤이 생기기 떄문에 이를 가려주기 위해 작성*/
.con3 .listBox li {width: 32.2%;}
.con3 .listBox li .img {background: var(--sub-color); border-radius: 10px; text-align: center; padding: 30% 0;}
.con3 .listBox li .img img { width: 40%;}
.con3 .listBox li h4 {display: flex; justify-content: space-between; margin: 15px 0 50px; font-weight: normal;}
.con3 .listBox li h4 span.b { opacity: 0.5;}

.con3 .listBox li[data-color="a"]{--sub-color:#d1dbfd;}
.con3 .listBox li[data-color="b"]{--sub-color:#90c3cd;}
.con3 .listBox li[data-color="c"]{--sub-color:#ff764a;}
.con3 .listBox li[data-color="d"]{--sub-color:#47b172;}
.con3 .listBox li[data-color="e"]{--sub-color:#ffb84f;}


/*con4 */
.con4 .mainTextBox {position: relative;}
.con4 .mainTextBox span { position: absolute; right: 0; top: 0;}
.con4 .mainTextBox .title {font-size: 120px; line-height: 1; letter-spacing: -5px; overflow: hidden;} /*애니메이션을 주기위해 overflow 히든으로 감싸서 넘치는부분 안보이게..*/
.con4 .mainTextBox .title i { display: block;} /*i는 인라인요소*/
.con4 .mainTextBox .title.b {text-align: center;}
.con4 .mainTextBox .title.c {align-self: flex-start;} /*교차축 정렬*/
.con4 .mainTextBox .in {display: flex; justify-content: flex-end;}
.con4 .mainTextBox .in .box {width: 550px; margin-right: 20px;}

.con4 .listBox {margin: 100px 0; perspective: 900px; }
.con4 .listBox .box {background: #fff; padding: 50px 80px 60px; margin-bottom: 35px; color: #141212; display: grid; grid-template-columns: 60% auto; position: sticky; position: -webkit-sticky; top: 100px; filter: brightness(1);} /*100%로 밝게 brightness1*/
.con4 .listBox .box h2 { font-size: 40px; font-weight: normal; letter-spacing: -2px; padding-bottom: 20px; border-bottom: 1px solid #ddd; grid-column: 1/3; margin-bottom: 100px;} 
.con4 .listBox .box h3 { font-size: 300px; font-weight: bold; line-height: 0.9; align-self: flex-end;}
.con4 .listBox .box .text { align-self: flex-end; line-height: 1.4;}
.con4 .listBox .box .text h4 {margin-bottom: 20px; line-height: 1.2;}
.con4 .listBox .box .text p {opacity: 0.5;}
.con4 .listBox .box.a h3 { color: #ffb84f; }
.con4 .listBox .box.b h3 { color: #90c3cd; }
.con4 .listBox .box.c h3 { color: #47b172; }

.con4 .subTextBox { display: grid; grid-template-columns: 1fr 1fr;}
.con4 .subTextBox .subText { max-width: 600px; font-size: 22px; grid-column-start: 2;}
.con4 .subTextBox .subText p:nth-child(1) {margin-bottom: 20px;}

/* con5 */
.con5 {background: #fff; color: #141212; margin-bottom: 0;}
.con5 .inner { padding: 50px;}
.con5 .mainTextBox h2 {font-size: 100px; text-transform: uppercase; letter-spacing: -5px; font-weight: normal;}
.con5 .listBox {border-top: 1px solid #000; margin-top: 150px;}
.con5 .listBox li {display: grid; grid-template-columns: 2fr 1fr auto; border-bottom: 1px solid #000; padding: 10px 0; cursor: pointer;}
.con5 .listBox li h3 {font-size: 40px; letter-spacing: -1px; font-weight: normal;}
.con5 .listBox li p {align-self: center;}
.con5 .imgBox {position: absolute; transform: scale(0); opacity: 0; z-index: 100;}
.wrap.on { overflow: hidden;}

/* footer */
footer { position: relative; overflow: hidden;}
footer .inner { height: 100vh; padding: 75px 75px 25px; box-sizing: border-box;  display: flex; flex-direction: column; z-index: 2; position: relative;}
footer .inner .box { padding: 50px 0 0; background: rgba(55,55,55,0.4); backdrop-filter: blur(100px); display: flex; flex-direction: column; flex-grow: 1;}
footer .inner .box .mainTextBox {text-align: center;}
footer .inner .box .mainTextBox h2 {font-size: 120px; text-transform: uppercase; letter-spacing: -1px; font-weight: normal; margin-bottom: 30px;}
footer .inner .box .mainTextBox  p span { opacity: 0.5; display: block;}
footer .inner .box .talkBtn { display: grid; place-items: center; flex-grow: 1;}
footer .inner .box .talkBtn a { display: block; width: 95px; height: 95px; border-radius: 100%; box-shadow: 0 0 0 13px #1c1c1c, 0 0 50px rgba(255,255,255,0.3); }
footer .inner .box .talkBtn a span { display: block; width: 95%; height: 95%; margin: 2.5%; border-radius: 100%; background: #e36840; transition: all 0.3s;}
footer .inner .box .talkBtn a:hover span {width: 100%; height: 100%; margin: 0 auto;} 
footer .inner .box .btnBox { display: flex; justify-content:center; flex-direction: row; border-top: 1px solid rgba(255,255,255,0.2)}
footer .inner .box .btnBox  .btn { margin: 20px; padding: 10px; background: none; color: #fff; opacity: 0.5;}
footer .inner .box .btnBox  .btn:hover {opacity: 1;}

footer .copyright {flex-direction: row; text-align: center; padding-top: 25px; font-size: 14px;}
footer .logoWrap {position: absolute; left: 0; top: -50%;  width: 100%; display: flex; justify-content: space-between;}
footer .logoWrap span {width: 16%;}
footer .logoWrap span img {width: 100%;}