/* cursor */
#cursor {position: fixed;z-index: 99888;left: 0;top: 0;pointer-events: none;will-change: transform;}
  
@media (hover: hover) and (pointer: fine) {
    .cursor_circle {width: 8px;height: 8px;margin-top: -50%; mix-blend-mode: normal; background-color: var(--pointcolor);  margin-left: -50%;border-radius: 50%;/* border: solid 1px rgba(227, 222, 193, 0.4); */transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1),background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1),border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1),width 0.3s cubic-bezier(0.25, 1, 0.5, 1),height 0.3s cubic-bezier(0.25, 1, 0.5, 1);}

    #cursor.click .cursor_circle{width: 74px;height: 74px;background-color: #041c26;border-color: #041c26;}
    #cursor.drag {mix-blend-mode: normal;}
    #cursor.overlay {mix-blend-mode:difference;}
    #cursor.overlay .cursor_circle{width: 48px;height: 48px;background-color: var(--white);border-color: transparent;}

}
/* 커서 없는 모바일 기기에서 숨기기 */
@media (pointer:coarse) {
    #cursor {display: none;}
}
/* cursor */




.noise {background: repeat center url('/img/main/noise3.gif'); /* background-blend-mode: multiply;  */ background-size: 30%;}
.noise2 {background: repeat center url('/img/main/noise4.gif'); background-blend-mode: color-dodge; background-size: 10%;}
.noise3 {background: repeat center url('/img/main/noise2.gif'); /* background-blend-mode: screen;  */background-size: 10%;}
.noise4 {background: repeat center url('/img/main/noise4.gif'); background-blend-mode: color-dodge; background-size: 10%;}

.noiseBg {position: relative;}
.noiseBg .Bg {position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:-1}
.noiseBg .Bg:before {position:absolute;content:'';top:-5%;left:-5%;width:110%;height:110%;background-image:url('/img/main/noise.png'); background-repeat: repeat; animation:grain .9s steps(1) 0s infinite;pointer-events:none;transition:background-image 0.7s ease}
@keyframes grain{0%,to{transform:translate(0)}10%{transform:translate(-1%,-1%)}20%{transform:translate(1%,1%)}30%{transform:translate(-2%,-2%)}40%{transform:translate(3%,3%)}50%{transform:translate(-3%,-3%)}60%{transform:translate(4%,4%)}70%{transform:translate(-4%,-4%)}80%{transform:translate(2%,2%)}90%{transform:translate(-2%,-2%)}}

.main .subTitBox {overflow:hidden;}
.mainTit {font-family: var(--pointfont); font-size: 9.375rem; font-weight: 900; text-transform: uppercase; line-height: 1; mix-blend-mode: hard-light;}
@media(max-width:768px) {
    .mainTit {font-size: 6.5rem;}
}
@media(max-width:460px) {
    .mainTit {font-size: 5.8rem;}
}

.main .TitBox .word {overflow:hidden; display:block;}
.main .TitBox .word span {display:block;}

.star {position: relative; width: fit-content;}
.star:after {content:''; width: 2.5rem; height: 2.5rem; background-image: url('/img/main/star.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; position: absolute; top:-2.125rem; left:-2.125rem; animation: rotate 8s linear infinite;}
.star.Right:after {top:-2.125rem; right:-2.125rem; left:auto;}
.star.BL:after {background-image: url('/img/main/star_BL.svg');}
@keyframes rotate {100%{transform:rotateY(360deg)}}
@media(max-width:1400px) {
    .star:after {width: 2rem; height: 2rem; left: -1.8rem;}
}
@media(max-width:768px) {
    .star:after {width: 1.7rem; height: 1.7rem; left: -1.2rem;}
}

/* intro */
#intro {background-color: var(--black); text-align: center;}
#intro .introTit {font-family: var(--pointfont); font-size: 10rem; font-weight: 900; text-transform: uppercase; line-height: 1; mix-blend-mode: difference;}

#intro .subTitBox {display: flex; align-items: center; justify-content: center; gap:1rem; }

#intro .videoBox {overflow:hidden; /* max-width: 1600px; margin-left: auto; margin-right: auto; */ border-radius:1.875rem;     transform-origin:center center; mix-blend-mode: difference;}
#intro .visualPlayer {display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: difference;}
@media(max-width:768px) {
    #intro .introTit {font-size: 7rem;}
}
@media(max-width:460px) {
    #intro .introTit {font-size: 5.5rem;}
}


/* Txt_Effect */
#Txt_Effect {background-color: var(--black); font-size: 3.125rem; overflow: hidden;}
#Txt_Effect .Txt_Inner {position: relative; color: rgba(240, 240, 240, .2); font-weight: 600;}
#Txt_Effect .Txt_Inner .Txt {position: relative; word-break: keep-all; background: linear-gradient(to right, var(--white), var(--white)) no-repeat; -webkit-background-clip: text; background-clip: text; background-size: 0%; transition: background-size cubic-bezier(.1,.5,.5,1) 0.5s;}
@media(max-width:1790px) {
    #Txt_Effect .Txt_Inner {width: 95%; margin: auto;}
    /* #Txt_Effect {font-size: 2.5rem;} */
}
@media(max-width:500px) {
    #Txt_Effect {font-size: 2.4rem;}
}

/* result */
#result .TitIneer {background-color: var(--pointcolor); text-align: right; padding: 1.5rem .3rem;}

.result {position: relative; height: 100vh;}
.result .content-wrap {display: flex; align-items: center; justify-content: center;}

.result .title-wrap, 
.result .img-area {width: 50%; height: 100%;}

.result .title-wrap {display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: var(--black); text-align: center; gap:2rem;}
.result .NumTxt {font-family: var(--pointfont); font-size: 6.25rem; line-height: 1; font-weight: 800;}
.result .NumTxt > span {font-size: 18px; font-family: var(--mainfont); font-weight: 500;}
.result .content-wrap {height: 100%; border-top: 1px solid var(--white);}

.result .img-area {position: relative; background-color: var(--pointcolor);}
.result .img-wrap {position: absolute; inset: 0 0 0 0; width: 100%; height: 100%;}
.result .img-wrap img {width: 100%; height: 100%; object-fit: cover; object-position: center center;}

.result .captions {mix-blend-mode: difference; font-family: var(--pointfont); font-weight: 800; color: #fff; width: fit-content; font-size: 6.875rem; text-transform: uppercase; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

@media (max-width: 1024px) {
	.result .content-wrap{ flex-direction: column; }
	.result .title-wrap, .result .img-area { width: 100%; height: 50%;}
	.result .img-wrap img { object-position: center bottom;}
}
@media (max-width: 767px){
	.result .img-wrap img { object-position: center center;}
}



/* success */
#success {max-width: 1920px; margin: auto; overflow: hidden; background-color: var(--pointcolor); border-top: 1px solid var(--black);}

#success .scrollText {padding: 4rem 0 3rem;}
#success .Txt {font-size: 8.5rem; font-weight: 800; font-family: var(--pointfont); color: transparent; text-transform: uppercase; white-space: nowrap; line-height: 1;}
#success .Txt.Left {color:var(--white)}
#success .Txt.Right { -webkit-text-stroke-width: .05rem; -webkit-text-stroke-color: var(--white); text-shadow: none;}

#success .slideBox {padding: 12.5rem 0; }
#success .successSwiper {overflow: visible; transform: rotate(15.3deg);}
#success .swiper-wrapper { transition-timing-function: linear;}
#success .swiper-slide {border-radius: 1.875rem; overflow: hidden;}

#success .subTxt {position: relative; left: 3rem; top: 3rem;}
#success .arrowBtn {width: 7rem; height: 7rem; border-radius: 50%; background-color: var(--white); display: flex; align-items: center; justify-content: center; margin-left: auto; position: relative; right:3rem; top:-2rem; transform: rotate(0deg); transition: .3s;}
#success .arrowBtn img {width: 2.5rem;}
@media(max-width:768px) {
    #success .Txt {font-size: 6.5rem;}
    #success .slideBox {padding: 5rem 0 12rem;}
}
@media(max-width:500px) {
     #success .Txt {font-size: 5rem;}
     #success .subTxt {top: 6rem; left: 1rem;}
}

/* value */
#value {background-color: var(--black);}

#value .valueList li {display: flex; align-items: center; gap:5rem;}

#value .TitBox {display: flex; align-items: flex-start; gap: 3rem;}
#value .TitInner {display: flex; align-items: center; gap:3rem;}
#value .valueList li .Line {width: 0%; height: 1px; margin: 1rem 0; display: block; transition: width .4s ease;}
#value .valueList li.on .Line {width: 100%; transition: width .4s ease; background-color: var(--white); }

#value .Tit {font-size: 7.5rem; font-weight: 700; font-family: var(--pointfont); text-transform: uppercase; line-height: 1; overflow:hidden; white-space: nowrap; color:rgba(240, 240, 240, .5); transition:color .4s ease;}
#value .Tit .letter {display:inline-block;}

#value .valueList li.on .Tit{color:rgba(240,240,240,1);}

#value .valueList li .arrow_Lg {width: 3.625rem; transform: rotate(-45deg); transition: .4s ease; filter: opacity(.5);}
#value .valueList li.on .arrow_Lg {transform: rotate(0deg); filter: opacity(1); transition: .4s ease;}


#value .valueList li .Desc {color: transparent; transition: .4s ease; font-size: 1.25rem;}
#value .valueList li.on .Desc {color: var(--white); transition: .4s ease;}

#value .DotBox {position: absolute; right: 0; top:50%; transform: translateY(-50%);}
#value .Dot {width: 7.5rem; height: 7.5rem; border-radius: 50%; border:.125rem solid var(--white)}
@media(max-width:1540px) {
    #value .Tit {font-size: 7rem;}
    #value .Dot {width: 6rem; height: 6rem;}
}
@media(max-width:1340px) {
    #value .valueList {display: flex; flex-direction: column; gap:1rem;}
    #value .valueList li {flex-direction: column; align-items: flex-start; gap:1rem;}
    #value .valueList li .Desc {margin-left: 5rem; font-size: 1.125rem;}
    #value .valueList li.on .arrow_Lg {transform: rotate(130deg);}
    #value .Dot {width: 7.5rem; height: 7.5rem;}
}
@media(max-width:768px) {
    #value .valueList {gap:2rem;}
    #value .DotBox {display: none;}
    #value .TitBox {flex-direction: column; gap:0;}
    #value .valueList li .Desc {margin-left: 1rem;}
}
@media(max-width:530px) {
  #value .Tit {font-size: 4.4rem;}
}


/* persist */
#persist {background-color: var(--subcolor); color:var(--black); overflow: hidden;}

#persist .TitInner {display: flex; align-items: center; justify-content: space-between;}
#persist .Tit {font-size: 7.5rem; font-weight: 800; font-family: var(--pointfont); text-transform: uppercase; line-height: 1; overflow:hidden; transition:color .4s ease;}


#persist .BtnBox {display: flex; align-items: center;}
#persist .BtnBox a {background-color: var(--black);}
#persist .Dot {width: 7.5rem; height: 7.5rem; border-radius: 50%; border:.125rem solid var(--black)}
#persist .arrow {width: 2.5rem; filter: invert(1) brightness(5);}

#persist .slideBox {mix-blend-mode:multiply}
#persist .swiper-wrapper {transition-timing-function: linear;}
@media(max-width:990px) {
    #persist .TitInner {flex-direction: column; align-items: flex-start;}
    #persist .BtnBox {align-self: flex-end; right: -5rem; position: relative;}
}
@media(max-width:500px) {
    #persist .Tit {font-size: 5.8rem;}
    #persist .BtnBox {gap:1.2rem;}
    #persist .Dot {width: 5rem; height: 5rem;}
}



#footer {background-color: #cccbcb; padding: 9.375rem 0; position: relative;}
#footer .footerLogo {width: 17.375rem; margin-bottom: 5rem;}
#footer .footerTxt {letter-spacing: 0.2px; font-weight: 400; line-height: 2; color: var(--black);}
#footer .footerTxt span {padding: 0 .6rem;}

#footer .admBtn {position: absolute; bottom: 2rem; right:2rem;}

#footer .footerLogo {
    display: block;
    will-change: transform, opacity, filter;
}