body {}

/*넥스나인 포트폴리오*/
.__nexWrap{ width: 90%; max-width: 1280px; margin: 0 auto; font-family: 'PretendardRegular'; background: #000; color: #fff; }


/*intro*/
._nex_header{ width: 100%; padding-top: 130px; padding-bottom: 155px; overflow: hidden; text-align: right; font-family: 'PretendardRegular'; background: #000; color: #fff; }
._nex_header ._nex_Title{ display: flex; flex-wrap: wrap; }
._nex_header h1{ font-size: 9.32vw; font-family: 'Dashboard'; position: relative; display: inline-block; margin-left: calc(160 / 1920 * 100%); }
._nex_header h1::before{ content: ''; display: block; width: 100px; height: 18px; background-color: #fff; position: absolute; right: calc(100% + 50px); top: 50%; transform: translateY(-50%); animation: boldline 5s linear; }
._nex_header h1::after{content: ''; display: block; width: 937px; height: 18px; background-color: #fff; position: absolute; left: calc(100% + 50px); top: 50%; transform: translateY(-50%); animation: boldline 1s linear;}
._nex_header h2{ margin-left: 50px; font-family: 'PretendardBlack'; font-size: 28px; padding-right: calc(160 / 1920 * 100%); margin-top: 6.5vw; }


@keyframes boldline{
    0%{ width: 0; }
    100%{ width: 937px; }
}

._nex_header h3{ font-size: 4.69vw; font-family: 'Dashboard'; -webkit-text-stroke: 1px #fff; color: rgba(0,0,0,0); position: relative; display: inline-block; margin-right: calc(150 / 1920 * 100%); }
._nex_header h3::before{ content: ''; display: block; width: 1100px; height: 18px; border: 1px solid #fff; position: absolute; right: calc(100% + 50px); top: 50%; transform: translateY(-50%); animation: boldline 1.5s linear; border-left: none; }
._nex_header h3::after{ content: ''; display: block; width: 100px; height: 18px; border: 1px solid #fff; position: absolute; left: calc(100% + 50px); top: 50%; transform: translateY(-50%); animation: boldline 5s linear; border-right: none; }
._nex_header .nex_macbook{ width: 100%; margin-top: 80px; text-align: center; }
._nexPort{ width: 100%; background: #000; color: #fff; }
._nex_sec1{ width: 100%; }
._nex_sec1 ._nexVid{ width: 100%; background: url('../img/nex_sitevid.jpg') center no-repeat; background-size: cover; position: relative; }
._nex_sec1 ._nexVid iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
._nex_sec1 ._nexVid::after{ content: ''; display: block; padding-bottom: calc(1080 / 1920 * 100%); }
._nex_sec1 ._nexVid video{ width: 100%; position: absolute; top: 0; left: 0; }

@media screen and (max-width: 1400px){
    ._nex_header h2{ font-size: 20px; margin-left: 30px; }
    ._nex_header h1::after,
    ._nex_header h1::before,
    ._nex_header h3::before,
    ._nex_header h3::after{ height: 14px; }

    ._nex_header h1::before,
    ._nex_header h3::before{ right: calc(100% + 30px); }

    ._nex_header h1::after,
    ._nex_header h3::after{ left: calc(100% + 30px); }
    
}

@media screen and (max-width: 1000px){
    ._nex_header h2{ font-size: 16px; }
}

@media screen and (max-width: 780px){
    ._nex_header{ width: 90%; margin: 0 auto; text-align: left; overflow: visible; padding: 100px 0; }

    ._nex_header h1::after,
    ._nex_header h1::before,
    ._nex_header h3::before,
    ._nex_header h3::after{ display: none; }

    ._nex_header ._nex_Title{ width: 100%;  flex-direction: column-reverse; }
    ._nex_header h1{ margin-left: 0; font-size: 14vw; }
    ._nex_header h2{ padding-right: 0; margin: 0; }
    ._nex_header h3{ display: block; margin-right: 0; font-size: 6vw; }

    ._nex_header .nex_macbook{ margin-top: 40px; }
}


._nex_sec2{ width: 100%; padding: 170px 0; }

._nex_sec2 h2{ font-size: 32px; font-family: 'Dashboard'; position: relative; }
._nex_sec2 h2::before{ content: ''; display: block; width: 270px; height: 2px; background-color: #fff; position: absolute; right: calc(100% + 50px); top: 50%; transform: translateY(-50%); }

._nex_sec2 .nexText{ width: 100%; position: relative; }
._nex_sec2 .nexText p{ color: rgba(255,255,255,0.5); font-size: 16px; letter-spacing: -0.05em; line-height: calc(28 / 16); margin-top: 64px; word-break: keep-all;}
._nex_sec2 .nexText p strong{ display: block; font-size: 20px; font-family: 'PretendardBold'; color: #fff; line-height: calc(32 / 20); margin-bottom: 10px; }
._nex_sec2 .nexText .n_circleWrap{ display: inline-flex; align-items: center; justify-content: center; position: relative; top: auto; right: auto; width: 207px; float: right; margin: 10px; margin-top: -20px; z-index: 99; }
._nex_sec2 .nexText .n_circleWrap::after{ content: ''; display: block; padding-bottom: 100%; }
._nex_sec2 .nexText .n_circleText{ width: 100%;  background-size: cover; position: absolute; top: 0; left: 0; animation: rotate 8s linear infinite; }
._nex_sec2 .nexText .n_circleText svg text{ fill: #fff; font-family: 'Dashboard'; letter-spacing: -0.02em; transition-duration: 0.4s; }
.st0{ fill: none; }

@keyframes rotate{
    0%{ transform: rotate(0deg); }
    100%{ transform: rotate(360deg); }
}

._nex_sec2 .nexText .n_circleWrap dl{ text-align: center; }
._nex_sec2 .nexText .n_circleWrap dl dt{ position: relative; }
._nex_sec2 .nexText .n_circleWrap dl dt > img{  transition-duration: 0.4s; }
._nex_sec2 .nexText .n_circleWrap dl dt > img._labtopOver{ position: absolute; top: 0; left: 50%; transform: translateX(-50%); opacity: 0; }
._nex_sec2 .nexText .n_circleWrap dl dd{ margin-top: 20px; letter-spacing: -0.05em; word-break: keep-all; transition-duration: 0.4s; transition-property: color; color: #fff; }

._nex_sec2 ._nex_prj{ width: 100%; display: flex; margin-top: 50px; }
._nex_sec2 ._nex_prj li{ padding: 0 75px; position: relative; text-align: center; }
._nex_sec2 ._nex_prj li::after{ content: ''; display: block; width: 1px; height: 30px; background-color: rgba(255,255,255,0.1); position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
._nex_sec2 ._nex_prj li:last-of-type::after{ display: none; }
._nex_sec2 ._nex_prj li:first-of-type{ padding-left: 0; }
._nex_sec2 ._nex_prj li:last-of-type{ padding-right: 0; }
._nex_sec2 ._nex_prj li h3{ font-family: 'Dashboard'; font-size: 20px; }
._nex_sec2 ._nex_prj li p{ margin-top: 26px; }
._nex_sec2 ._nex_concept{ margin-top: 110px; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; }
._nex_sec2 ._nex_concept li{ width: calc(240 / 1280 * 100%); text-align: center; }
._nex_sec2 ._nex_concept li dl dt{ display: block; width: 100%; background-color: #e60012; padding: 10px 0; font-family: 'Dashboard'; font-size: 28px; }
._nex_sec2 ._nex_concept li dl dd{ margin-top: 24px; font-size: 28px; font-family: 'PretendardBold'; }
._nex_sec2 ._nex_concept li ._n_Line{ width: 100%; height: 1px; background-color: #e60012; margin-top: 20px; }
._nex_sec2 ._nex_concept li p{ margin-top: 18px; color: rgba(255,255,255,0.5); letter-spacing: -0.05em; line-height: calc(28 / 16); word-break: keep-all; }

._nex_sec2 ._nex_concept li p br.none{ display: none; }

@media screen and (min-width: 781px){
    ._nex_sec2 .nexText .n_circleWrap:hover .n_circleText svg text{ fill: #e60012; }
    ._nex_sec2 .nexText .n_circleWrap:hover dl dd{ color: #e60012; font-weight: 900; }
    ._nex_sec2 .nexText .n_circleWrap:hover dl dt > img{ opacity: 0; }
    ._nex_sec2 .nexText .n_circleWrap:hover dl dt > img._labtopOver{ opacity: 1; }

    
}

@media screen and (max-width: 1600px){
    ._nex_sec2 h2::before{ right: calc(100% + 30px); }
}

@media screen and (max-width: 1280px){
    ._nex_sec2{ padding: 120px 0; }
    ._nex_sec2 h2::before{ right: calc(100% + 15px); }
    ._nex_sec2 .nexText p br.none{ display: none; }
    ._nex_sec2 .nexText p strong{ font-size: 18px; }
    ._nex_sec2 .nexText .n_circleWrap{ width: 160px; }
    ._nex_sec2 .nexText .n_circleWrap dl dt img{ width: 60%; }
    ._nex_sec2 .nexText .n_circleWrap dl dd{ margin-top: 10px; }

    ._nex_sec2 ._nex_concept li{ width: 21%; }
    ._nex_sec2 ._nex_concept li dl dt{ font-size: 24px; }
    ._nex_sec2 ._nex_concept li dl dd{ font-size: 24px; margin-top: 15px; }
    ._nex_sec2 ._nex_concept li ._n_Line{ margin-top: 15px; }
    ._nex_sec2 ._nex_concept li p{ font-size: 15px; }
    

}

@media screen and (max-width: 1000px){
    ._nex_sec2 ._nex_concept li p br{ display: none; }
}

@media screen and (max-width: 780px){
    ._nex_sec2{ padding-bottom: 50px; }
    ._nex_sec2 h2{ font-size: 24px; }
    ._nex_sec2 h2::before{ display: none; }
    ._nex_sec2 .nexText p{ font-size: 14px; margin-top: 30px; }
    ._nex_sec2 .nexText p strong{ font-size: 16px; }
    ._nex_sec2 .nexText .n_circleWrap{ margin-top: 20px; width: 140px; }
    ._nex_sec2 .nexText .n_circleWrap dl dd{ font-size: 14px; }
    
    ._nex_sec2 ._nex_prj li{ padding: 0 50px; }
    ._nex_sec2 ._nex_prj li h3{ font-size: 16px; }
    ._nex_sec2 ._nex_prj li p{ font-size: 14px; }
    
    ._nex_sec2 ._nex_concept{ margin-top: 60px; }
    ._nex_sec2 ._nex_concept li{ width: 48%; margin-bottom: 40px; }
    ._nex_sec2 ._nex_concept li dl dt{ font-size: 18px; }
    ._nex_sec2 ._nex_concept li dl dd{ font-size: 18px; }
    ._nex_sec2 ._nex_concept li p br{ display: block; }
    ._nex_sec2 ._nex_concept li p br.none{ display: block; }
}

@media screen and (max-width: 500px){
    ._nex_sec2 .nexText .n_circleWrap{ width: 100px; margin-top: 10px; }
    ._nex_sec2 .nexText .n_circleWrap dl dt img{ width: 43%; }
    ._nex_sec2 .nexText .n_circleWrap dl dd{ font-size: 13px; padding: 0 20px; margin-top: 0; }

    ._nex_sec2 ._nex_prj{ justify-content: center; }
    ._nex_sec2 ._nex_prj li{ padding: 0 10%; }

    ._nex_sec2 ._nex_concept li dl dd{ font-size: 16px; margin-top: 10px; }
    ._nex_sec2 ._nex_concept li ._n_Line{ margin-top: 10px; }
    ._nex_sec2 ._nex_concept li p{ font-size: 14px; margin-top: 10px; }
    
}

@media screen and (max-width: 450px){
    ._nex_sec2 ._nex_concept li p br{ display: none; }
}


._nex_sec3{ width: 100%; position: relative; height: 1080px; background: url('../img/camera_BG.png') center no-repeat; padding: 50px 0; box-sizing: border-box; }
._nex_sec3 .__nexWrap{ max-width: 1600px; display: flex; align-items: center; justify-content: flex-end; height: 100%; }
._nex_sec3 ._award_left{ position: absolute; top: 56%; left: 7%; right: 50%; transform: translateY(-50%); }
._nex_sec3 ._award_right{ width: calc(807 / 1600 * 100%); position: relative; z-index: 2; }
._nex_sec3 ._award_right dl{ letter-spacing: -0.05em; color: rgba(255,255,255,0.5); line-height: calc(28 / 16); word-break: keep-all; }
._nex_sec3 ._award_right dl dt{ font-family: 'PretendardBold'; color: #fff; line-height: calc(32 / 20); font-size: 20px; margin-top: 35px; }
._nex_sec3 ._award_right dl dd{ margin-top: 7px; }

@media screen and (max-width: 1700px){
    ._nex_sec3 ._award_right{ width: 55%; }
}

@media screen and (max-width: 1500px){
    ._nex_sec3 ._award_right dl br{ display: none; }
    ._nex_sec3 ._award_left{ left: 0; }
}

@media screen and (max-width: 780px){
    ._nex_sec3{ height: auto; padding: 100px 0; padding-bottom: 150px; }
    ._nex_sec3 .__nexWrap{ display: block; }
    ._nex_sec3 ._award_left{ position: static; text-align: center; width: 70%; margin: 0 auto; transform: translateY(0); }
    ._nex_sec3 ._award_right{ width: 100%; margin-top: -20px; }
    ._nex_sec3 ._award_right dl dt{ font-size: 18px; margin-top: 20px;}
    ._nex_sec3 ._award_right dl dd{ font-size: 15px; }
    
}

@media screen and (max-width: 450px){
    ._nex_sec3 ._award_left{ width: 90%; }
    ._nex_sec3 ._award_right dl dt{ font-size: 16px; }
    ._nex_sec3 ._award_right dl dd{ font-size: 14px; }
}

._nex_sec4{ width: 100%; background: url('../img/parr_1.jpg') center no-repeat; background-size: cover; background-attachment: fixed; height: 100vh; }



._nex_sec5{ width: 100%; background: url('../img/parr_2.jpg') center no-repeat; background-size: cover; background-attachment: fixed; height: 100vh; }

._nex_sec6{ width: 100%; padding-top: 180px; }
._nex_sec6 .__nexWrap{ display: flex; justify-content: space-between; align-items: flex-start; }
._nex_sec6 h2{ font-family: 'Dashboard'; font-size: 32px; position: relative; flex-shrink: 0; }
._nex_sec6 h2::before{ content: ''; display: block; position: absolute; right: calc(100% + 50px); top: 50%; transform: translateY(-50%); width: 270px; height: 2px; background-color: #fff; }
._nex_sec6 p{ color: rgba(255,255,255,0.5); line-height: calc(28 / 16); letter-spacing: -0.05em; padding-top: 23px; word-break: keep-all; padding-left: 20px; box-sizing: border-box; }
._nex_sec6 ._nex_color{ width: 100%; border-top: 1px solid #444; margin-top: 140px; display: flex; height: 640px; }
._nex_sec6 ._nex_color li{ padding: 28px; text-align: right; box-sizing: border-box; transition-duration: 0.6s; }
._nex_sec6 ._nex_color li:nth-of-type(1){ width: calc(1200 / 1920 * 100%); background-color: #101010; }
._nex_sec6 ._nex_color li:nth-of-type(2){ width: calc(430 / 1920 * 100%); background-color: #333; }
._nex_sec6 ._nex_color li:nth-of-type(3){ width: calc(290 / 1920 * 100%); background-color: #e60012; }

._nex_sec6 ._nex_color li:nth-of-type(3) dl dt{ white-space: nowrap; }

._nex_sec6 ._nex_color li dl{ font-family: 'Dashboard'; }
._nex_sec6 ._nex_color li dl dt{ font-size: 1.7vw; }
._nex_sec6 ._nex_color li dl dd{ font-size: 1.25vw; margin-top: 10px; }

._nex_sec6 ._nex_color li dl dt br.none{ display: none; }

@media screen and (min-width: 781px){
    ._nex_sec6 ._nex_color li:hover{ width: 100%; }
}

@media screen and (max-width: 1600px){
    ._nex_sec6 h2::before {
        right: calc(100% + 30px);
    }
}

@media screen and (max-width: 1280px){
    ._nex_sec6 ._nex_color li dl dt{ font-size: 2vw; }
    ._nex_sec6 ._nex_color li dl dd{ font-size: 1.65vw; }
    ._nex_sec6 ._nex_color li{ padding: 16px; }
    ._nex_sec6 ._nex_color li dl dt br.none{ display: block; }
}

@media screen and (max-width: 1000px){
    ._nex_sec6{ padding-top: 90px; }
    ._nex_sec6 h2{ font-size: 24px; }
    ._nex_sec6 p{ padding-top: 10px; }
    ._nex_sec6 ._nex_color{ margin-top: 90px; height: 500px; }
    ._nex_sec6 ._nex_color li dl dt{ font-size: 2.5vw; }
    ._nex_sec6 ._nex_color li dl dd{ font-size: 2.15vw; }
}

@media screen and (max-width: 780px){
    ._nex_sec6 h2{ font-size: 20px; }
    ._nex_sec6 h2::before{ display: none; }
    ._nex_sec6 p{ font-size: 14px; padding-top: 5px; }
    ._nex_sec6 ._nex_color{ height: 350px; }
    ._nex_sec6 ._nex_color li:nth-of-type(1){ width: auto; flex-grow: 3; }
    ._nex_sec6 ._nex_color li:nth-of-type(2){ width: auto; flex-grow: 1; }
    ._nex_sec6 ._nex_color li:nth-of-type(3){ width: auto; flex-grow: 0.3; }
}

@media screen and (max-width: 500px){
    ._nex_sec6{ padding-top: 60px; }
    ._nex_sec6 .__nexWrap{ display: block; }
    ._nex_sec6 p{ padding: 0; margin-top: 15px; }
    ._nex_sec6 ._nex_color{ height: 200px; margin-top: 60px; }
    ._nex_sec6 ._nex_color li dl dt{ font-size: 4vw; }
    ._nex_sec6 ._nex_color li dl dd{ font-size: 3.1vw; }
}


.___link.nex7{ margin-top: 0; background: #eee; padding-top: 90px; padding-bottom: 180px;}
/* .___link.nex7 p{ color: #fff;} */
/* .___link.nex7 .arrow img{ filter: invert() } */
/* .___link.nex7 p::before{ background: #fff; } */


/*220803 추가수정*/
._nex_header .nex_macbook{ position: relative; width: 90%; max-width: 1600px; margin: 0 auto; margin-top: 80px; }
._nex_header .nex_macbook .prizeMark{ position: absolute; top: 0; right: 0; }
._nex_sec1 ._nexVid{ width: 90%; max-width: 1600px; margin: 0 auto; }

@media screen and (max-width: 1400px){
    ._nex_header .nex_macbook .prizeMark{ width: 200px; top: -30px; }
}

@media screen and (max-width: 1000px){
    ._nex_header .nex_macbook .prizeMark{ width: 150px; top: -30px; }
}

@media screen and (max-width: 780px){
    ._nex_header .nex_macbook{ width: 100%; }
    ._nex_header .nex_macbook .prizeMark{ width: 25%; top: -50px; }
}

@media screen and (max-width: 500px){
    ._nex_header .nex_macbook .prizeMark{ width: 30%; top: -30px; }
}