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

/* common */
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: #333; text-transform: uppercase; margin-top: 30px;}

.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{display: flex; justify-content: space-between; width: 150px; }
header .inner .logo span{padding: 0 1px;}
header .inner .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-color: #fff; position: absolute; left: 50%; top: 13px;
    transform: translateX(-50%);border-radius: 30px; transition: all 0.3s ease;}
header .gnb .menuOpen:hover::before{width: 165px;}
header .gnb .menuBox{width: 100%; position: absolute; top: -1000%; 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 ; 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;}
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 ; }

.wrap.on header .inner .logo span img{filter: invert(100%);}
/* 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;}
.visual .inner .mainText{max-width: fit-content; font-weight: normal; font-size: 80px; margin-left: auto ; line-height: 0.9; letter-spacing: -2px; }
.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%;}

/* con1 */
.con1 .box{display: grid;grid-template-columns: repeat(2, 1fr); padding: 60px; background-color: rgba(55,55,55,.4); backdrop-filter: blur(100px);
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;}
.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; overflow: hidden;}
.con1 .textAni li{grid-row-start: 1; grid-column-start: 1; font-size: 65px; text-transform: uppercase; letter-spacing: -1px; 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; top: 0; left: 50%; 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;}
.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; gap: 20px;}
.con2 .subTextBox .iconbox li{width: 28px; place-items: center;}
.con2 .subTextBox .iconbox li:last-child{width: 40px;}

/* 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%);}
.con3 .listBox{width: 70%; display: flex; justify-content: space-between; flex-wrap: wrap; perspective: 900px; overflow:hidden;}
/* overfloxw : hidden -> scrollTriger을 작성하면 가로스크롤이 생기기 때문에 이를 가려주기 위해 작성해준다.*/
.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: 10px 0 50px; font-weight: normal;}
.con3 .listBox li h4 span.b{opacity:.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}


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

/* con5 */
.con5{background-color: #fff; color: #141412;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:hover h3{color: #47B171;}
.con5 .listBox li p{align-self: center;}
.con5 .imgBox{position: absolute; transform: scale(0); opacity: 0; z-index: 9}
.wrap.on{overflow: hidden;}

/* con6 */
.con6{display: grid; grid-template-columns:repeat(2, minmax(0, 1fr));padding: 70px 0 90px;
     background: rgba(225 219 253/1); overflow: hidden;}
.con6 h2{display: flex; gap: 90px; justify-content: flex-start; grid-column: span 2;font-size: 135px; font-weight: 500; 
        letter-spacing: -5px;  color: #000;text-transform: uppercase ;margin-bottom: 10px;}
 .con6 .box{max-width: 600px; grid-column-start: 2;}
 .con6 .box .mainTextBox{font-size: 45px; color: #000; letter-spacing: -0.02em;line-height: 1.1;}
 .con6 .box .mainTextBox span{font-size: 16px; margin-bottom: 15px;}
 .con6 .box .btnBox{display: flex; gap: 10px;}
 .con6 .box .btnBox .btn{background:#333; color: #fff; }

/* footer */
footer{position: relative; overflow: hidden; }
footer .inner{position: relative;display: flex; flex-direction: column;height: 100vh; padding: 75px 75px 25px; box-sizing: border-box; z-index: 2;}
footer .inner .box{display: flex; flex-direction: column; padding: 50px 0 0;flex-grow: 1; background-color: rgba(55,55,55, .4);backdrop-filter: blur(100px); }
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,.3);}
footer .inner .box .talkBtn a span{display: block; width: 95%; height: 95%; margin: 2.5% auto; border-radius: 100%; background: #e36840;transition: all .3s ease; }
footer .inner .box .talkBtn a:hover span{width: 100%; height: 100%; margin:0 auto;}
footer .inner .box .btnBox{display: flex; justify-content: center; gap: 20px 40px; align-items: center; flex-direction: row; border-top: 1px solid rgba(255,255,255,0.2);}
footer .inner .box .btnBox .btn{padding:10px; background: none; color: #fff; opacity: 0.5;margin-bottom: 20px;}
footer .inner .box .btnBox .btn:hover{opacity: 1;}
footer .copyright{flex-direction: row; text-align: center; padding-top: 25psx; font-size: 14px;}
footer .logoWrap{position: absolute; left: 0; top: -50%; width: 100%; z-index: 1;display: flex; justify-content: space-between;}
footer .logoWrap span{width: 16%; }
footer .logoWrap span img{width: 100%;}

/* loading */
.loading{position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #141212; z-index: 9999;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%; }

.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)}
}

.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}

/* rotate */
.rotate.on{animation-name: rotate; animation-duration: 1.2s;}
@keyframes rotate {
    0%{transform-origin: 0 0; transform: translate(0px, 100%) rotate(100deg); transition: 1s;}
    100%{transform-origin: 0 0; transform: translate(0px, 0px) rotate(0); transition: 1s;}
}

.opacity.on{animation-name: fadeIn; animation-duration: 2s;}
@keyframes fadeIn {
    0%{opacity: 0;}
    50%{opacity: 0;}
    100%{opacity: 1;}
}