@charset "utf-8"; 


/*메인공통*/
.sec { background-color: #fff; } 

.tit-wr.flex { justify-content: space-between; align-items: flex-end; } 
.tit-wr.flex a.btn-st { margin-bottom: 2.6rem; } 

@media all and (max-width:600px) { 
 .tit-wr.flex { flex-direction: column; align-items: flex-start; } 
 } 

/*트렌지션*/
#mainWr .tit-wr,
#mainWr .tit-wr .txt-wr,
#techWr .box-wr .box, #techWr .box-wr .box .box-bg, .box-wr .box .box-cont .txt-wr .txt li,
#techWr .box-wr .box,
#techWr .box-wr .box .box-cont .btn-st,
#techWr .box-wr .box .box-cont .txt-wr .txt ,
#mainWr #workWr .item,
#mainWr .tit-wr .tit { transition: .3s; } 


/**/
#introWr { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 12; animation: intro-wr .1s 4s ease-out both; } 
#introWr.scroll { z-index: -1; visibility: hidden; } 
#introWr img { width: 100%; height: 100%; object-fit: cover; object-position: center; animation: intro-box 5s .3s ease-out both; } 
#introWr img.img-m { display: none; } 

@media all and (max-width:768px) { 
#introWr img.img-pc { display: none; } 
#introWr img.img-m { display: block; } 
 } 
/*메인*/
/* #mainWr { position: relative; width: 100vw; } */
#mainWr .tit-wr { position: fixed; top: 45%; left: 0; margin-left: var(--inner-pd); z-index: 9; } 
#mainWr .tit-wr .tit { color: var(--color-point); } 
#mainWr .tit-wr .txt-wr { opacity: 0; visibility: hidden; } 
#mainWr .tit-wr .txt-wr .txt { margin-bottom: 3rem; } 
#mainWr .tit-wr.on { position: sticky; margin-bottom: 10.9rem; } 
#mainWr .magin-left { position: absolute; top:0; left: 0; width: auto; padding-left: var(--inner-pd); height: 1px; z-index: -1; } 

#mainWr #videoWr { position:absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 8; } 
#mainWr #videoWr::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; z-index:1; } 
#mainWr #videoWr video { width: 100%; height: 100%; object-fit: cover; object-position: center; } 
#mainWr #videoWr video[poster] { width: 100%; height: 100%; } 
#mainWr #videoWr video.video-m {display: none;} 

#mainWr #workWr { width: 100%; height: 117.7rem; background: #FDFAF5; overflow: hidden; } 
#mainWr #workWr .inner { position: relative; height: 100%; } 
#mainWr #workWr .item { justify-content: center; align-content: center; position: absolute; top: 50%; left: 50%; width: 23.4rem; height: 31.6rem; opacity: .2; } 
#mainWr #workWr .item .icon { margin-bottom: 6.5rem; } 
#mainWr #workWr .item span { position: absolute; bottom: 2rem; left: 2rem; display: inline-block; padding: 1rem; border-radius: 3rem; background: #fff; } 
/* #mainWr #workWr .item01 { background-color: var(--color-point); filter: drop-shadow(-6.4rem 14.2rem 2.2rem rgba(0, 0, 0, 0.14)); transform:rotate(-28.6deg); } */
#mainWr #workWr .item01 { top: -1rem; background-color: var(--color-point); margin-left: -70rem; filter: drop-shadow(-6.4rem 14.2rem 2.2rem rgba(0, 0, 0, 0.14)); transform: rotate(47.4deg); z-index: 7; } 
#mainWr #workWr .item02 { margin-left: -47rem; margin-top: -6rem; background-color: #001864; transform: rotate(-76.39deg); z-index: 6; } 
#mainWr #workWr .item03 { top: 0rem; margin-left: 54rem; background-color: #001864; transform: rotate(67.295deg); z-index: 5; } 
#mainWr #workWr .item04 { margin-top: -43rem; margin-left: 37rem; background-color: #9ED0FE; transform: rotate(64.624deg); z-index: 4; } 
#mainWr #workWr .item05 { margin-left: 63rem; margin-top: 6rem; background-color: #0183FF; transform: rotate(77.529deg); z-index: 4; } 
#mainWr #workWr .item06 { left: auto; right: -7rem; margin-top: 27rem; background-color: var(--color-point); transform: rotate(-78.317deg); z-index: 2; } 
#mainWr #workWr .item07 { top: auto; bottom: -2rem; margin-left: -12rem; background-color: #EEEFEE; transform: rotate(272deg); z-index: 1; } 


@media all and (max-width:1600px) { 
 #mainWr #workWr .item { width: 20.4rem; height: 27.6rem; padding: 3rem; } 
 #mainWr #workWr .item01 { margin-top: 12rem; } 
 #mainWr #workWr .item02 { top: 63%; } 
 #mainWr #workWr .item03 { margin-top: 12rem; } 
 #mainWr #workWr .item04 { top: 53%; left: 45%; } 
 #mainWr #workWr .item05 { left: 47%; } 
 #mainWr #workWr .item06 { top: 56%; left: 80%; } 
 #mainWr #workWr .item07 { left: 43%; } 
 } 
 @media all and (max-width:1280px) { 
 #mainWr #workWr .item01 { margin-top: 19rem; left: 67%; } 
 #mainWr #workWr .item02 { left: 64%; } 
 #mainWr #workWr .item05 { left: 42%; } 
 } 
 @media all and (max-width:1200px) { 
 #mainWr #workWr .item { width: 17.4rem; height: 24.6rem; } 
 #mainWr #workWr .item span { padding: 0.5rem 1rem; font-size: 1.4rem; } 
 #mainWr #workWr .item01 { left: 76%; } 
 #mainWr #workWr .item02 { left: 71%; } 
 #mainWr #workWr .item03 { left: 42%; } 
 #mainWr #workWr .item04 { left: 39%; } 
 #mainWr #workWr .item05 { left: 37%; } 
 #mainWr #workWr .item06 { left: 70%; } 
 #mainWr #workWr .item07 { left: 36%; } 
 } 
 @media all and (max-width:768px) { 
 #mainWr #videoWr video.video-pc {display: none;} 
 #mainWr #videoWr video.video-m {display: block;} 
 #mainWr #workWr .inner { height: 90vh; padding: 0; } 
 #mainWr #workWr .item05 { top: 64%; left: 27%; } 
 #mainWr #workWr .item06 { left: 64%; } 
 #mainWr #workWr .item07 { left: 52%; margin-bottom: -15rem; } 
 } 

 @media all and (max-width:600px) { 
 #mainWr .tit-wr { top: 62%; bottom: 0; } 
 #mainWr .tit-wr .tit { font-size: 6rem; letter-spacing: -0.05em; } 
 #mainWr .tit-wr.on .tit { font-size: 4rem; } 
 #mainWr .tit-wr .txt-wr .txt { width: 80%; } 
 #mainWr #workWr { transform: translateY(-8rem); } 
 #mainWr #workWr .inner { height: 100vh; } 
 #mainWr #workWr .item { width: 14.4rem; height: 18.6rem; } 
 #mainWr #workWr .item span { bottom: 1rem; left: 1rem; font-size: 1.2rem; } 
 #mainWr #workWr .item01 { left: 100%; } 
 #mainWr #workWr .item02 { left: 80%; } 
 #mainWr #workWr .item03 { left: 0; } 
 #mainWr #workWr .item04 { top: 41%; left: 0; } 
 #mainWr #workWr .item05 { top: 48%; left: -10%; } 
 #mainWr #workWr .item06 { top: 46%; } 
 #mainWr #workWr .item07 { left: 29%; margin-bottom: 0; } 
 } 
 @media all and (max-width:500px) { 
 #mainWr .tit-wr.on { margin-bottom: 16.9rem; } 
 #mainWr #workWr .inner { width: 100%; } 
 #mainWr #workWr .item .icon { margin-bottom: 4.5rem; } 
 #mainWr #workWr .item01 { left: 53rem; } 
 #mainWr #workWr .item03 { left: -2rem; margin-top: 14rem; } 
 #mainWr #workWr .item04 { left: -17%; } 
 #mainWr #workWr .item05 { left: -15rem; } 
 #mainWr #workWr .item07 { left: -4rem; margin-bottom: 164px; } 
 } 
 @media all and (max-width:450px) { 
 #mainWr #workWr .item03 { margin-top: 5rem; } 
 #mainWr #workWr .item05 { left: -12rem; } 
 #mainWr #workWr .item06 { top: 52%; } 
 #mainWr #workWr .item07 { left: -2rem; margin-bottom: 121px; } 
 } 

#techWr,#video, #issueWr, #techWr { padding-top: 12rem; } 
#techWr { padding-bottom: 12rem; } 
#techWr .box-wr { justify-content: space-between; flex-wrap: wrap; } 
#techWr .box-wr .box { display: block; position: relative; height: 34rem; margin-bottom: 2%; background: linear-gradient(180deg, #5A5A5A 0%, #1D1D1D 100%); } 
#techWr .box-wr .box .box-bg { width: 100%; height: 100%; opacity: .7; object-fit: cover; object-position: center; mix-blend-mode: overlay; } 
#techWr .box-wr .box .txt-wr .tit { font-size: 2rem; } 
#techWr .box-wr .box .txt-wr .txt { flex-wrap: wrap; } 
#techWr .box-wr .box .box-cont { display: grid; justify-content: start; align-content: space-between; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 
#techWr .box-wr .box .box-cont > span { display: block; padding: 2rem; color: var(--color-point); } 
#techWr .box-wr .box .box-cont .txt-wr { padding: 4rem; } 
#techWr .box-wr .box .box-cont .txt-wr .tit { margin-bottom: 1rem; color: #fff; font-size: 2rem; font-family: 'MinSans-Regular'; text-transform: uppercase; } 
#techWr .box-wr .box .box-cont .txt-wr .txt { height: 0; visibility: hidden; opacity: 1; overflow: hidden; } 
#techWr .box-wr .box .box-cont .txt-wr .txt li { margin:.5rem; margin-left: 0; padding: .2rem 1rem; background: #fff; border-radius: 2rem; font-size: 1.7rem; font-family: 'MinSans-Medium'; } 
#techWr .box-wr .box .box-cont .btn-st { position: absolute; right: 4rem; bottom: 4rem; opacity: 1; } 
#techWr .box-wr .box .box-cont .btn-st .icon { margin-left:0; transform: rotateZ(45deg); filter: brightness(0); } 

#techWr .box-wr .box01, #techWr .box-wr .box04 { width: 38%; } 
#techWr .box-wr .box02, #techWr .box-wr .box03 { width: 60%; } 
#techWr .box-wr .box05, #techWr .box-wr .box06 { width: 49%; } 
#techWr .box-wr .box03 .txt-wr .txt { width: 80%; } 

#techWr .box-wr .box:hover { background: linear-gradient(180deg, #5A5A5A 46%, #b59e12 113%); } 
#techWr .box-wr .box:hover .box-cont .txt-wr .txt { visibility: visible; height: 7.2rem; opacity: 1; } 
#techWr .box-wr .box:hover .btn-st { opacity: 0; } 

@media all and (max-width:768px) { 
 #techWr .box-wr .box { background: linear-gradient(180deg, #5A5A5A 46%, #b59e12 113%); } 
 #techWr .box-wr .box .box-cont .txt-wr .txt { visibility: visible; height: 7.2rem; opacity: 1; } 
 #techWr .box-wr .box .btn-st { display: none; } 
 } 
 @media all and (max-width:600px) { 
 #techWr { padding-top: 2rem; } 
 #techWr .box-wr { flex-direction: column; } 
 #techWr .box-wr .box01, 
 #techWr .box-wr .box02, 
 #techWr .box-wr .box03, 
 #techWr .box-wr .box04, 
 #techWr .box-wr .box05, 
 #techWr .box-wr .box06 { width: 100%; } 
 #techWr .box-wr .box { height: 29rem; } 
 #techWr .box-wr .box .box-cont .txt-wr { padding: 2rem; } 
 #techWr .box-wr .box .box-cont .txt-wr .tit { font-family: 'MinSans-Bold'; } 
 } 

#video { position: relative; height: 45.7rem; overflow: hidden; } 
#video::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #b19800; content: ''; z-index: -1; } 
#video video { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; mix-blend-mode: overlay; z-index: -1; } 
#video.scroll video { position: fixed; } 
#video .tit-wr { position: absolute; top: 50%; left: 50%; width: 100%; text-align: center; color: #fff; transform: translate(-50%, -50%); } 
#video .tit-wr .icon { margin-bottom: 2.9rem; } 

@media all and (max-width:600px) { 
 #video { height: 32rem; } 
 #video .tit-wr { width: 80%; margin: 0 auto; font-size: 3rem; } 
 #video .tit-wr .icon { width: 4.6rem; margin-bottom: 2.3rem; } 
 #video video { object-position: 90%; } 
 } 

#issueWr { padding-bottom: 12rem; } 
#issueWr .box-wr { grid-gap: 2rem; } 
#issueWr .box-wr .box { isolation: isolate; } 
#issueWr .box .box-img { display: block; position: relative; height: 24.6rem; background: #000; } 
#issueWr .box .box-img span { position: absolute; top: 2rem; left: 2rem; color: var(--color-point); font-size: 1.6rem; z-index: 1; } 
#issueWr .box .box-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .62; } 
#issueWr .box .box-txt { justify-items: center; text-align: center; height: 17.8rem; padding: 3rem; background: #F2F2F2; } 
#issueWr .box .box-txt .txt { display: grid; align-content: center; height: 7.8rem; font-size: 1.8rem; } 

@media all and (max-width:900px) { 
 #issueWr .box .box-img { height: 17.6rem; } 
 #issueWr .box .box-txt { padding: 3rem 1rem; } 
 #issueWr .box .box-txt .txt { font-size: 1.6rem; } 
 #issueWr .box .box-txt .icon { width: 0.8rem; } 
 } 
 @media all and (max-width:768px) { 
 #issueWr .box-wr .box { display: flex; } 
 #issueWr .box-wr .box .box-img { height: 100%; width: 26rem; } 
 #issueWr .box-wr .box .box-txt { width: calc(100% - 26rem); height: 100%; padding: 3rem; } 
 } 
 @media all and (max-width:768px) { 
 #issueWr .box-wr .box { display: grid; } 
 #issueWr .box-wr .box .box-img { width: 100%; height: 17.6rem; } 
 #issueWr .box-wr .box .box-txt { width: 100%; height: 14.8rem; } 
 } 






/**/