@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;}

/* 00. Layout */
body {font-family: 'Raleway', sans-serif; font-size: 16px; letter-spacing: -0.01em}
.wrap {position: relative; margin: 0 auto; background: #141212; color: #fff; /*margin-bottom: 1000px*/} /* 마진보톰 1000px 정도 주고 작업 */
/* 참고로 position: sticky; 속성을 콘텐츠 내용중에서 사용할거기 때문에 절대 .wrap 이나 body에 오버플로우 히든은 안써준다 */ 
section { margin-bottom: 150px} /* 각섹션 사이 150 px 간격 */
.inner {padding: 0 50px; box-sizing: border-box}
.box {border-radius: 10px; overflow: hidden} /* border-radius 가 있는 box 공통으로 사용 예정 */
.btn {padding: 12px 25px; font-size: 11px; border-radius: 30px; display: inline-block; background: #fff; color: #000; text-transform: uppercase;margin-top: 30px} /* btn 공통으로 사용 예정 */

/* 01. header */
header {position: fixed; width: 100%; box-sizing: border-box; z-index: 9999} /* position: fixed; 라서 높이값 상실로 안보이니까 wrap에 패딩 보톰 주고 작업 */
header .inner {padding: 30px 50px 0;}
header .logo {width: 150px; display: flex; justify-content: space-between;}
header .logo span {padding: 0 1px}
header .logo span img {width:100%}
header .gnb {text-align: center}
header .gnb .menuOpen {font-size: 10px; position: absolute; left: 50%; top: 10px; transform: translateX(-50%); padding: 30px 0; z-index: 10; cursor: pointer}
header .gnb .menuOpen:before {content: ''; width: 150px; height: 5px; background: #fff; border-radius: 30px; position: absolute;left: 50%; top: 15px; transform: translateX(-50%); transition: all 0.3s;}
header .gnb .menuOpen:hover:before {width: 165px;}
header .gnb .menuBox { width: 99%; position: absolute; left: 50%; transform: translateX(-50%); background-color: rgba(55,55,55,.4); backdrop-filter: blur(30px); border-radius: 5px; padding: 100px 0 30px; box-sizing: border-box; top: -1000%; transition: all 1.5s} /* 일단 숨겨주고 나중에 스크립트 작성예정 */
header .gnb .menuBox li {overflow: hidden;} 
header .gnb .menuBox li a {display: inline-block; font-size: 40px; transform: translateY(-100px); transition: all 0.6s}

/* [ 스크립트 10 ] 진행시 작성 */
header .gnb .menuBox.on {top: 10px;  transition: all 0.4s} /* 열릴땐(on) li a 보다 트랜지션 빠르게해주고 닫힐땐 위에 그대로 1.5초로 a 가 먼저 사라지는 느낌으로 */
header .gnb .menuBox.on li a { transform: translateY(0px);}
header .gnb .menuBox li:nth-child(2) a {transition-delay: 0.05s} /* 딜레이로 각각 타이밍 조절해준다 */ 
header .gnb .menuBox li:nth-child(3) a {transition-delay: 0.1s}
header .gnb .menuBox li:nth-child(4) a {transition-delay: 0.15s}



/* 02. 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;}
/* 

[ 설명 ]
1. display: grid; -> Grid는 Flex와 같이 Container(컨테이너)와 Item(아이템)이라는 두 가지 개념으로 구분
                  -> Container는 Items를 감싸는 부모 요소이며, 그 안에서 각 Item을 배치할 수 있다
                  -> 참고 링크 : https://heropy.blog/2019/08/17/css-grid/  (속성명 긁어서 컨트롤+f 로 검색하면서 참고)

** 그리드 확인시 개발자 도구로 display: grid; 속성 넣어준 .visual .inner 클래스명에 마우스 오버해두면 그리드 라인 보임

1. grid-template-rows: auto 1fr auto; = 행을 3개로 나누고 각 크기를 오토, 1fr,오토 로 지정한다 (결론적으로 1번행 과 3번행은 auto로 자기 높이 만큼 갖고 가운데 2번행은 1의 비율로 지정)
                                      -> 행의 크기를 지정하는 속성 : ex) grid-template-rows: 1행의크기 , 2행의크기 ...;
                                      -> fr : (fraction, 공간 비율) 단위 - 파일 참고 이미지 확인
                                      -> repeat() 함수를 사용 가능 : grid-template-rows: repeat(2, 1fr) = grid-template-rows: 1fr 1fr; 와 동일

*/
.visual .mainText {max-width: fit-content; font-weight: normal; font-size: 80px; margin-left: auto; line-height: 0.9; letter-spacing: -2px}
/*  

[ 설명 ]
1. max-width: fit-content; -> 부모요소의 가용범위 내에서 알아서 최대크기로 width를 조정하지만 가용범위가 부족하면 max-content처럼 부모요소를 뚫고나감
                            -> 참고 링크 : https://velog.io/@karismajh/CSS-widthmin-content-max-content-fit-content 
*/
.visual .mainText span {display: block; overflow: hidden;} /* overflow: hidden; -> loading 애니메이션에 글씨 가려주는 부분으로 오버플로우 필요 */
.visual .mainText span i {display: block;} /* display: block; -> loading 애니메이션에 트랜스폼때문에 디스플레이 블럭으로 */
.visual .subText {font-weight: normal; font-size: 20px; margin-bottom: 50px; align-self: flex-end;}
.visual .subText span {color: #585858}
.visual .logoWrap {display: flex; justify-content: space-between;}
.visual .logoWrap span {width: 16%;}
.visual .logoWrap span img {width: 100%;}

/* 03. 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;}
/*  

[ 설명 ]
1. grid-template-columns: repeat(2,1fr) = 열을 두개로 나누고 각 넓이를 1fr 로 지정 -> grid-template-columns: 1fr 1fr 와 동일한데 repeat() 함수 사용함
                                                                              -> 1fr 1fr -> 열의 넓이를 1:1 비율로 준다는 의미
2. row-gap: 90px; -> 행과 행 사이의 간격

*/
.con1 .box .mainText {font-size: 30px; grid-row-start: 2;} 
.con1 .box .subText { max-width: 500px; font-size: 20px; grid-column-start: 2;} 
/*  

[ 설명 ]

정의된 컨테이너의 자식 요소들은 자동으로 Grid Items(아이템)로 정의된다.
컨테이너 안에 그리드 아이템(Item)을 배치하기 위해 그리드 선(Line)의 ‘시작 위치’와 ‘끝 위치’를 지정해야한다
방법은 시작 위치와 끝 위치를 배치하는 각 속성에 ‘숫자’를 지정하거나, ‘선 이름’을 지정하거나, span 키워드를 사용하는 방법이 있다

* grid-row-start : 행의 시작위치 
* grid-row-end : 행의 끝위치
* grid-column-start : 열의 시작위치
* grid-column-end : 열의 끝위치
* grid-row : grid-row-start과 grid-row-end의 단축 속성 -> 각 속성을 슬래시로 구분한다 = (핻 시작 위치/ 행 끝 위치)  
* grid-column : grid-column-start과 grid-column-end의 단축 속성 -> 각 속성을 슬래시로 구분한다 = (열 시작 위치/ 열 끝 위치)

1. grid-row-start: 2; -> 행의 시작 위치 = 2번 라인
2. grid-column-start: 2; -> 열의 시작 위치 = 2번 라인

*/

.con1 .box .subText p {margin-top: 14px}
.con1 .textAni {margin-top: 30px; 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 {max-width: 800px; display: grid}
.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;}

/* 04. con2 */
.con2 .inner {position: relative;padding: 40px 50px;}
.con2 .inner:before {content: ''; width: 95%; height: 1px; background: #3b3b3b; position: absolute; left: 50%; top: 0; transform: translateX(-50%)}
.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} 
/* 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;margin-top: 160px;}
.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; display: grid; place-items: center; margin: 0 10px}
.con2 .subTextBox .iconbox li:last-child {width:40px}

/* 05. con3 */
.con3 .inner {display: flex; justify-content: space-between;}
.con3 .textBox {width: 28%;}
.con3 .textBox h4 {font-size: 60px; font-weight: normal;position: -webkit-sticky; position: sticky; top: 50%; transform: translateY(-50%)}
/*

[ 설명 ]
1. position: sticky 속성 및 주의 사항 : https://usagi-post.com/archives/1448
                                    -> 부모요소 혹은 조상?요소?.. (wrap 이나 body)에 오버플로우가 없어야함
*/
.con3 .listBox {width: 70%; display: flex; justify-content: space-between; flex-wrap: wrap; perspective:900px; overflow: hidden}
/* perspective속성(스크롤트리거 애니에서 사용 예정) : 3D 위치의 요소에 원근감을 제공하는데 사용 한다 -> perspective개체가 사용자로부터 얼마나 멀리 떨어져 있는지를 정의 */
/* overflow: hidden -> 스크롤 트리거 걸면 가로스크롤 생겨서 가려준다 */
.con3 .listBox li {width: 32.2%; cursor: pointer}
.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 h4 {display: flex; justify-content: space-between; margin: 15px 0 50px; font-weight: normal}
.con3 .listBox h4 span.b {opacity: 0.5}
.con3 .listBox li[data-color="a"] {--sub-color: #e1dbfd}
.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}

/* 06. 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: hidden -> 스크롤트리거 애니 텍스트 가려주기 위해 */
.con4 .mainTextBox .title i {display: block}/* 스크롤트리거 애니적용할때 트랜스폼 필요해서 블럭 선언 */
.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 {max-width: 550px; margin-right: 20px}
.con4 .mainTextBox .in .box video {width: 100%}
.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: -webkit-sticky; position: sticky; top: 100px; filter: brightness(1);} 
.con4 .listBox .box h2 { grid-column: 1 / 3; font-size: 40px; font-weight: normal; letter-spacing: -2px; padding-bottom: 20px; border-bottom: 1px solid #dddddd; margin-bottom: 100px}
/*  

[ 설명 ]

1. grid-template-columns: 60% auto; -> 열을 두개로 나누고 1번 열은 60% 넓이 나머지 2번 열은 auto

2. grid-column: 1 / 3 -> grid-column = grid-column-start과 grid-column-end의 단축 속성 -> 각 속성을 슬래시로 구분한다 = (행 시작 위치/ 행 끝 위치)
                      -> 열의 시작위치 1번 라인부터 3번 라인까지 지정해준다 (tabel 을 생각해보면 열이 두 칸이면 세로 라인이 총 3개다 그 3번 라인까지 배치 해준다는 의미)

*/
.con4 .listBox .box h3 {font-size:300px; font-weight: bold; line-height: 0.9; align-self: flex-end;} 
/* [ 설명 ] align-self: flex-end; - 전체 화면으론 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}

/* 07. 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} /* 스크립트 2-9 번 작성 시 작성 */

/* 08. footer */
footer {position: relative; overflow: hidden} /* logoWrap 위치때문에 포지션 잡아줬고 overflow: hidden 은 스크롤 안생기고 위 섹션으로 넘어가도 가려지도록 */ 
footer .inner {height: 100vh; padding: 75px 75px 25px; box-sizing: border-box; position: relative; z-index: 2; display:flex; flex-direction:column;} /* svgWrap 보다 위에 위치하도록 포지션으로 레이어 띄워주고 제트인덱스 값 준다 */
footer .box {padding: 50px 0 0; background-color: rgba(55,55,55,0.4); backdrop-filter: blur(100px);display:flex; flex-direction:column; flex-grow:1;}
footer .box .mainTextBox {text-align: center;}
footer .box .mainTextBox h2 {font-size: 120px; text-transform: uppercase; letter-spacing: -1px; font-weight: normal; margin-bottom: 30px}
footer .box .mainTextBox p span {opacity: 0.5; display: block;}
footer .box .talkBtn {flex-grow:1; display:grid;place-items:center;}
footer .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 .box .talkBtn a span {display: block; width: 95%; height: 95%; margin: 2.5% auto;border-radius: 100%; background: #E36840; transition: all 0.3s}
footer .box .talkBtn a:hover span {width: 100%; height: 100%;; margin: 0 auto;}
footer .box .btnBox{display: flex; justify-content: center;  border-top: 1px solid rgba(255, 255, 255, 0.2)}
footer .box .btnBox .btn {margin: 20px; padding: 10px; background: none; color: #fff; opacity: 0.5}
footer .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%; z-index: 1} /* top:-50% 으로 위로 숨겨준다 */
footer .logoWrap {display: flex; justify-content: space-between;}
footer .logoWrap span {width: 16%;}
footer .logoWrap span img {width: 100%;}


/* [ footer .inner ]
display: flex; -> .box를 정렬해주기위해
flex-direction: column; -> 플랙스만 주면 Jyoung © 2023 글씨가 따라 올라와서 
                                  아이템들이 열(세로)방향으로 배치시켜줌

[ footer .box ]
flex-grow: 1; -> 이걸 주면 박스가 .inner에 꽉차게 된다
display: flex; -> 안에 내용을 정렬해주기위해 플랙스를 굳이 플랙스로 한 이유는 .talkBtn 이 위아래 요소들(mainTextBox, btnBox) 높이 외에 나머지 높이를 꽉채워주고 싶어서 플랙스를줌
flex-direction: column; -> 안에 내용이 열(세로)방향으로 배치 되도록 해줌



[ footer .box .talkBtn ] 
flex-grow: 1; -> 위에 .box 처럼 이걸 쓰자마자 이 구역이 박스 안에서 남은 높이를 꽉 차지하게됌
display: grid; -> 안에 a 빨간 동그라미 정렬을 위해 써줌
place-items: center; -> 이걸 쓰면 상하 좌우 센터로 됌

[footer .box .btnBox]
flex-direction: row; -> 빼도될거같음 */

/* 아이템들이 열(세로)방향으로 배치되는것으로 block요소처럼 보임 */
/* flex-grow는 기본값이 0이며 따로 적용하기 전까지는 아이템이 늘어나지 않음
   0보다 큰값이 세팅되면 해당 아이템이 유연한 박스로 변하고 원래의 크기보다 커지며
   빈공간을 메우게 됨 */





/* 여기까지 레이아웃 작성 완료 이제 스크립트 시작 */

/* 
[ 스크립트 1 - 페이지 로딩 애니메이션 ]
*/

/* 1-1. 먼저 loading 애니메이션을 위해 html 파일 .wrap 바깥에 .loading html 작성 후 css 작성 */
.loading {position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: #141212; z-index: 9999; display: none} /* display: none 스크립트 작성전에 쓰기 */
.loading .logo {width: 200px; display: flex; justify-content: space-between; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); overflow: hidden}
.loading .logo span {padding: 0 1px; display: block}
.loading .logo span img {width:100%}

/* 1-2. 페이지 로딩 애니메이션 scene1 - 로고가 아래에서 올라옴 */
.loading.scene1 {display: block;}
.loading.scene1 .logo span {animation-name: up; animation-duration: 1s;}
@keyframes up { 0% {transform: translateY(30px);} 30% {transform: translateY(30px);} 100% {transform: translateY(0px);} }

/* 1-3. 페이지 로딩 애니메이션 scene2 - 로고 한글자씩 사라짐 */
.loading.scene2 .logo span:nth-child(1) {opacity:0;transition: 0.1s;}
.loading.scene2 .logo span:nth-child(2) {opacity:0;transition: 0.3s;}
.loading.scene2 .logo span:nth-child(3) {opacity:0;transition: 0.5s;}
.loading.scene2 .logo span:nth-child(4) {opacity:0;transition: 0.6s;}
.loading.scene2 .logo span:nth-child(5) {opacity:0;transition: 0.7s;}
.loading.scene2 .logo span:nth-child(6) {opacity:0;transition: 0.8s;}

/* 1-4. 여기까지 작성 후 script.js 파일 생성 하고 html 파일에 경로 걸어주고 script.js 파일가서 [스크립트 1] 의 1-5번 부터 작성 시작 */


/* 

1-6. 로딩 애니메이션 완성 후 html 파일로 가서 각각 rotate와 opacity 클래스 넣어주고 css 작성
     rotate  -> 비주얼의 .mainText span i 와 svgWrap 에 넣어주기
     opacity -> header 와 비주얼의 subText에 넣어주기
*/

/* 1-7. 페이지 로딩 애니메이션 rotate.on - on 클래스가 붙으면 svg와 메인텍스트가 로테이트되면서 올라오는 애니 */
.rotate.on {animation-name: rotate; animation-duration: 1.2s;}
@keyframes rotate {
    0% {transform-origin: 0 0; transform: translate(0px, 100%) rotate(20deg); transition: 1s;}
    100% {transform: translate(0px, 0%) rotate(0deg);}
}

/* 1-8. 페이지 로딩 애니메이션 opacity.on - on 클래스가 붙으면 헤더와 서브텍스트가 로테이트 애니보다 좀 더 늦게 나타나는 애니 */
.opacity.on {animation-name: fadein; animation-duration: 2s;}
@keyframes fadein {
    0% {opacity: 0;} 50% {opacity: 0;}  100% {opacity: 1;}
}

/* 1-9. 여기까지 작성 후 script.js 파일에 1-9번 작성 시작 */