/* @import url("common.css"); */
@import url("layout.css");

/********웹폰트*********/
/********웹폰트*********/
/********웹폰트*********/
@font-face {
  font-family: 'NanumSquareNeo';
  src: url('/assets/font/neo/eot/NanumSquareNeoTTF-aLt.eot');
  src: url('/assets/font/neo/eot/NanumSquareNeoTTF-aLt.eot?#iefix') format('embedded-opentype'),
       url('/assets/font/neo/woff2/NanumSquareNeoTTF-aLt.woff2') format('woff2'),
       url('/assets/font/neo/woff/NanumSquareNeoTTF-aLt.woff') format('woff');
  font-weight: 200; /* aLt (ExtraLight) */
  font-style: ExtraLight;
}

@font-face {
  font-family: 'NanumSquareNeo';
  src: url('/assets/font/neo/eot/NanumSquareNeoTTF-bRg.eot');
  src: url('/assets/font/neo/eot/NanumSquareNeoTTF-bRg.eot?#iefix') format('embedded-opentype'),
       url('/assets/font/neo/woff2/NanumSquareNeoTTF-bRg.woff2') format('woff2'),
       url('/assets/font/neo/woff/NanumSquareNeoTTF-bRg.woff') format('woff');
  font-weight: 400; /* bRg (Regular) */
  font-style: Regular;
}

@font-face {
  font-family: 'NanumSquareNeo';
  src: url('/assets/font/neo/eot/NanumSquareNeoTTF-cBd.eot');
  src: url('/assets/font/neo/eot/NanumSquareNeoTTF-cBd.eot?#iefix') format('embedded-opentype'),
       url('/assets/font/neo/woff2/NanumSquareNeoTTF-cBd.woff2') format('woff2'),
       url('/assets/font/neo/woff/NanumSquareNeoTTF-cBd.woff') format('woff');
  font-weight: 700; /* cBd (Bold) */
  font-style: Bold;
}

@font-face {
  font-family: 'NanumSquareNeo';
  src: url('/assets/font/neo/eot/NanumSquareNeoTTF-dEb.eot');
  src: url('/assets/font/neo/eot/NanumSquareNeoTTF-dEb.eot?#iefix') format('embedded-opentype'),
       url('/assets/font/neo/woff2/NanumSquareNeoTTF-dEb.woff2') format('woff2'),
       url('/assets/font/neo/woff/NanumSquareNeoTTF-dEb.woff') format('woff');
  font-weight: 800; /* dEb (ExtraBold) */
  font-style: ExtraBold;
}

@font-face {
  font-family: 'NanumSquareNeo';
  src: url('/assets/font/neo/eot/NanumSquareNeoTTF-eHv.eot');
  src: url('/assets/font/neo/eot/NanumSquareNeoTTF-eHv.eot?#iefix') format('embedded-opentype'),
       url('/assets/font/neo/woff2/NanumSquareNeoTTF-eHv.woff2') format('woff2'),
       url('/assets/font/neo/woff/NanumSquareNeoTTF-eHv.woff') format('woff');
  font-weight: 900; /* eHv (Heavy) */
  font-style: Heavy;
}

/********기본*********/
html, body {
  margin: 0;
  padding: 0;
}
body{
  overflow: hidden;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
*{
  font-family: 'NanumSquareNeo';
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-display: swap;
  font-family: "NanumSquareNeo", sans-serif!important;
  font-weight: 400;
}
/* ✅ 2. 기본 요소 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

a {
  background: transparent;
}

a:active,
a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

mark {
  background: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 1em 40px;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
  transition: background-color .5s;
  transition-delay: 0s;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.section {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  /* transition: all 0.5s ease; */
  overflow: hidden;
}
.section.top {
  align-items: baseline;
}


/********ESG*********/
/********ESG*********/
/********ESG*********/
/* ESG 관련 */
#esg_wrapper {
  position: relative;
  /* height는 JS에서 설정 */
}
#esg {
  /* fixed는 JS에서 적용/제거하므로 기본은 relative */
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
}

#inner_esg {
  display: flex;
  width: 300vw;
  height: 100%;
  transform: translateX(0);
  transition: transform 0.2s ease-out;
}

.esg-item {
  width: 50vw;
  height: 100vh;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(1);
  transition: 1s;
  transition-delay: .1s;
  cursor: pointer;
}
.esg_title{
  position: fixed;
  z-index: -2;
  bottom:10%;
  left: 5vw;
  width: 60%;
}
.esg_title > div{
  width: 100%;
  overflow: hidden;
  margin-bottom: .4vw;
}
.esg_title > div.h2_div{
  margin-bottom: 1vw;
}
.esg_title > div h2{
  font-size: 3vw;
  font-weight: 800;
  line-height: 100%;
  transform: translateY(3.1vw);
  margin-bottom: 0;
  transition: .3s;
  transition-delay: .1s;
}
.esg_title > div h2 strong.blue{
  color:#0077FF;
  font-weight: 800;
}
.esg_title > div p{
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1vw;
  line-height: 100%;
  color:#80848A;
  transform: translateY(1.5vw);
  transition: 1s;
  transition-delay: .2s;
}
#esg.active .esg_title h2,
#esg.active .esg_title p{
  transform: translateY(0vw);
}
.shape{
  display: block;
  width: 30vw;
  /* background-color: #00000020; */
  position: relative;
  /* overflow: hidden; */
}
.shape img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shape.circle{
  border-radius: 30vw;
}
.shape h3{
  width: 100%;
  height: 100%;
  font-size: 2vw;
  line-height: 2vw;
  text-align: center;
  position: absolute;
  height: 2vw;
  top:calc(50% - 1vw);
  margin: 0;
  color:#fff;
}
@media (max-width: 768px){
  .esg-item:nth-child(1),
  .esg-item:nth-child(2),
  .esg-item:nth-child(3){
    width: 50vw;
  }
  .esg-item {
    width: 100vw;
    transform: scale(1);
  }
  .shape{
    width: 80vw;
  }
  .shape.circle{
    border-radius: 100%;
  }
  .shape h3{
    font-size: 1.4rem;
    font-weight: 700;
  }
  .esg_title{
    width: 90%;
  }
  .esg_title > div {
    margin-bottom: 10px!important;
  }
  .esg_title > div h2{
    font-size: 20px;
    line-height: 22px;
    transform: translateY(24px);
  }
  
}
/********인트로*********/
/********인트로*********/
/********인트로*********/
/* 인트로 */
#intro{
  background-color: #fff;
  width: 100vw;
  height: 100vh;
  position: fixed;
  transition: opacity 1s ease, visibility 1s ease;
  opacity: 1;
  visibility: visible;
  z-index: 1000;
}
#intro.fade-out {
  opacity: 0;
  visibility: hidden;
}
#logoAni {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    /* 가로 중앙 정렬 */
    align-items: center;
    /* 세로 중앙 정렬 */
    top: 0;
}

#logoAni svg {
    width: calc(100% - 120px);
    max-width: 460px;
    height: auto;
    overflow: visible;
}

#logoAni svg path {
    fill: #fff;
}

#logoAni.logo_play path {
    fill: #fff;
    stroke: #0077FF;
    stroke-width: 2;
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation: draw 5s;
    animation-delay: 0s;
}
@keyframes draw {
    0% {
        stroke-dashoffset: 500;
        fill: #fff;
    }
    40% {
        stroke-dashoffset: 0;
        fill: #fff;
    }
    50% {
        stroke-dashoffset: 0;
        fill: #0077FF;
        stroke-width: 2;
    }
    100% {
        stroke-dashoffset: 0;
        fill: #0077FF;
        stroke-width: 2;
    }
}
@media (max-width: 768px){
  #logoAni svg {
    max-width: 140px;
  }
}
/********아래방향 화살*********/
/********아래방향 화살*********/
/********아래방향 화살*********/
.svg-container{
  width: 200px;
  height: 90px;
  position: fixed;
  bottom:0;
  left: calc(50% - 100px);
  perspective: 800px; /* 입체감 주기 */
  text-align: center;
  /* background-color: red; */
  transform-origin: top;
  transform-style: preserve-3d;
  animation: rotateY 1.5s linear infinite;
  text-align: center;
  transition: ease;
  z-index: 10;
}
.svg-container.none{
  display: none;
}
@keyframes rotateY {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.svg-container i{
  background-color: #fff;
  width: 40px!important;
  height: 40px!important;
  display: inline-block;
}
.svg-container.red i{
  background-color: #0077FF;
}
@media (max-width: 768px){
  .svg-container{
    height: 80px;
    transform-origin: bottom;
  }
  .svg-container i{
    transform: scale(.7);
    transform-origin: bottom;
  }
}

/********HERO*********/
/********HERO*********/
/********HERO*********/
#hero{
  background-image: url(/assets/img/nxp/hero.jpg);
  background-size: cover;
  justify-content: left;
}

.hero_title {
  position: fixed;
  top:calc(50vh - 8vh);
  margin-left: 5vw;
}
.hero_title > div{
  width: 100%;
  overflow: hidden;
  margin-bottom: .4vw;
}
.hero_title > div.h2_div{
  margin-bottom: 1vw;
}
.hero_title > div h2{
  font-size: 3vw;
  line-height: 100%;
  transform: translateY(3.1vw);
  margin-bottom: 0;
  transition: .3s;
  transition-delay: 0s;
  text-align: left;
  color:#eee;
  font-weight: 800;
}
.hero_title > div h2 strong{
  color:#009AFF;
  font-weight: 800;
}
#hero.active .hero_title > div h2{
  transform: translateY(0vw);
  /* transition-delay: 3.2s!important; */
  transition: 1s;
}
.hero_img{
  position: absolute;
  right:50px;
}
#animatedImage {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  opacity: 1;
  background-color: #000;
}
@media (max-width: 768px){
  .hero_title{
    top: 200px;
  }
  .hero_title > div{
    height: 20px;
    margin-bottom: 10px!important;
  }
  .hero_title > div h2{
    font-size: 20px;
    line-height: 22px;
    transform: translateY(24px);
  }
  #hero.active .hero_title > div h2{
    transform: translateY(0px);
  }
}
/********비지니스*********/
/********비지니스*********/
/********비지니스*********/
.business_title {
  position: fixed;
  top:calc(50vh - 6vw);
}
.business_title > div{
  width: 100%;
  overflow: hidden;
  margin-bottom: .4vw;
}
.business_title > div.h2_div{
  margin-bottom: 1vw;
}
.business_title > div h2{
  font-size: 3vw;
  line-height: 100%;
  transform: translateY(3.1vw);
  margin-bottom: 0;
  transition: .3s;
  transition-delay: 0s;
  text-align: center;
  font-weight: 800;
}
.business_title > div h2 strong{
  font-weight: 800;
  color:#14D2B7;
}
.business_title > div p{
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1vw;
  line-height: 100%;
  color:#80848A;
  transform: translateY(1.5vw);
  transition: 1s;
  transition-delay: 0s;
  text-align: center;
}
#business_section{
  position: relative;
  overflow: visible;
}
#business_section.active .business_title h2,
#business_section.active .business_title p{
  transform: translateY(0vw);
}

.business_group{
  display: flex;
  width: 100vw;
  /* max-width: 1400px; */
  gap: 5vw;
  padding: 0 15vw;
}
.business_group > div{
  transition: .1s ease-in-out;
  width: 33.333333333333333%;
  float: left;
}
.business_group > div img{
  object-fit: cover;
  object-position: 50% 50%;
  width: 100%;
  height: 100%;
  z-index: 0;
  filter: brightness(1);
  transition: .1s ease-in-out;
}
/* .business_group > div:hover{
  /* transform: scale(1.1)!important; */
  /* box-shadow: 0 5vw 10vw rgba(0,0,0,.5); */
  /* position: relative;
  z-index: 100;
  transition-delay: 0s!important;
  width: 50%;
} */ 
.business_group > div h3{
  width: 100%;
  font-size: 1.6vw;
  text-align: center;
  position: absolute;
  height: 100%;
  background-color: #00000050;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  color:#fff;
  position: absolute;
  z-index: 100;
}
#business_area{
  height: 100vh;
}
#business_area.fixed .business_group {
  position: fixed;
  top:calc(50vh - 370px);
  z-index: 1;
}
#business_area.fixed .business_group > div{
  transform: translateY(0vh);
}
#business_area.hidden{
  visibility: hidden;
}
.business_group > div{
  position: relative;
  transform: translateY(5vh);
  transition: .5s ease-in;
  cursor: pointer;
  height: 700px;
  justify-content: center;
  align-items: center;
  display: flex;
}
#business_area.active .business_group > div{
  transform: translateY(0vh);
}
.business_group > div:nth-child(1){
  transition-delay: 0s;
  transform: translateY(5vh);
}
.business_group > div:nth-child(2){
  transition-delay: .2s;
  transform: translateY(10vh);
}
.business_group > div:nth-child(3){
  transition-delay: .4s;
  transform: translateY(15vh);
}
@media (max-width: 768px){
  .business_title {
    top:calc(50% - 58px);
  }
  .business_title > div{
    margin-bottom: 10px!important;
  }
  .business_title > div h2{
      font-size: 20px;
      line-height: 22px;
      transform: translateY(24px);
  }
  .business_group{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100vw;
    /* max-width: 1400px; */
    gap: 30px;
    padding: 0 5vw;
  }
  #business_area .business_group > div{
    width: 100%;
  }
  .business_group .phone_frame .scene{
    width: auto!important;
  }
}

.slowDiv1 {
  position: fixed;
  top: 180vh;
  right: 0vw;
  padding: 40px;
  color: white;
  z-index: -1;
  width: 20vw;
  /* mix-blend-mode: difference; */
  overflow: hidden;
}
.slowDiv2 {
  position: fixed;
  top: 200vh;
  right: -10vw;
  padding: 40px;
  color: white;
  z-index: -1;
  width: 20vw;
  /* mix-blend-mode: difference; */
  overflow: hidden;
}
/********인재*********/
/********인재*********/
/********인재*********/
#hr{
  background-color: #fff;
}
#hr h3{
  color:#fff;
  font-size: 3vw;
  text-align: left;
  display: block;
  font-weight: 800;
  overflow: hidden;
  line-height: 120%;
}
#hr .word2 {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  transition: transform 0.6s ease, opacity 0.6s ease;
  white-space: nowrap;
  margin: 0;
  margin-bottom: 1vh;
  font-weight: 800;
}
#hr.active .word2 {
  opacity: 1;
  transform: translateY(0);
}
#hr.active .word2:nth-child(1) { transition-delay: .3s; }
#hr.active .word2:nth-child(2) { transition-delay: .4s; }
#hr.active .word2:nth-child(3) { transition-delay: .5s; }
#hr.active .word2:nth-child(4) { transition-delay: .6s; }
#hr.active .word2:nth-child(5) { transition-delay: .7s; }
#hr.active .word2:nth-child(6) { transition-delay: .8s; }
#hr.active .word2:nth-child(7) { transition-delay: .9s; }
#hr.active .word2:nth-child(8) { transition-delay: 1s; }
#hr.active .word2:nth-child(9) { transition-delay: 1.1s; }
#hr.active .word2:nth-child(10) { transition-delay: 1.2s; }
#hr.active .word2:nth-child(11) { transition-delay: 1.3s; }
#hr.active .word2:nth-child(12) { transition-delay: 1.4s; }
#hr.active .word2:nth-child(13) { transition-delay: 1.5s; }
#hr.active .word2:nth-child(14) { transition-delay: 1.6s; }
#hr.active .word2:nth-child(15) { transition-delay: 1.7s; }
#hr.active button{
  transform: translateY(0px);
  opacity: 1;
}
#hr img{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  object-fit: cover;
}
.hr_title{
  position: absolute;
  z-index: 100;
  width: 50vw;
  left: 100px;
  text-align: left;
}

.hr_inner{
  position: absolute;
  left:0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
#hr.fixed .hr_inner{
  position: fixed;
  top: 0;
  left: 0;
}
/********뉴스룸*********/
/********뉴스룸*********/
/********뉴스룸*********/
#news{
  height: auto;
  position: relative;
  z-index: 3;
  padding-bottom: 30vh;
  padding-top: 30vh;
}
#newsroom{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 10vw;
}
.news_title{
  position: fixed;
  z-index: -2;
  bottom:30%;
  left: 5vw;
  width: 60%;
  display: none;
}
.visible .news_title{
  display: block;
}
.news_title > div{
  width: 100%;
  overflow: hidden;
  margin-bottom: .4vw;
}
.news_title > div.h2_div{
  margin-bottom: 1vw;
}
.news_title > div h2{
  font-size: 3vw;
  font-weight: 800;
  line-height: 100%;
  transform: translateY(3.1vw);
  margin-bottom: 0;
  transition: .3s;
  transition-delay: .1s;
  color:#fff;
}
.news_title > div h2 strong.blue{
  color:#14D2B7;
  font-weight: 800;
}
.news_title > div p{
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1vw;
  line-height: 100%;
  color:#80848A;
  transform: translateY(1.5vw);
  transition: 1s;
  transition-delay: .2s;
}
#news.active .news_title h2,
#news.active .news_title p{
  transform: translateY(0vw);
}


.newsgroup{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3vw;
  width: 100%;
  padding: 4vw;
}
.newsgroup > div:nth-child(1){
  transform: translateY(0vw);
}
.newsgroup > div:nth-child(2){
  transform: translateY(4vw);
}
.newsgroup > div:nth-child(3){
  transform: translateY(8vw);
}
.newsgroup > div:nth-child(4){
  transform: translateY(0vw);
}
.newsgroup > div:nth-child(5){
  transform: translateY(4vw);
}
.newsgroup > div:nth-child(6){
  transform: translateY(8vw);
}
.newsgroup img{
  width: 100%;
  object-fit: cover;
  transition: .2s;
}
.news_img{
  position: absolute;
  z-index: -1;
}
.article{
  transition: 1s;
  cursor: pointer;
  opacity: .2;
  transform: scale(.7);
}
#news.active .article{
  margin-top: -1vh;
  opacity: 1;
  transform: scale(1);
}
#news.active .article:nth-child(1){
  transition-delay: .1s;
}
#news.active .article:nth-child(2){
  transition-delay: .2s;
}
#news.active .article:nth-child(3){
  transition-delay: .3s;
}
#news.active .article:nth-child(4){
  transition-delay: .4s;
}
#news.active .article:nth-child(5){
  transition-delay: .5s;
}
#news.active .article:nth-child(6){
  transition-delay: .6s;
}
#news.active .article:nth-child(7){
  transition-delay: .7s;
}
#news.active .article:nth-child(8){
  transition-delay: .8s;
}
#news.active .article:nth-child(9){
  transition-delay: .9s;
}
#news.active .article:nth-child(10){
  transition-delay: 1s;
}
.article:hover img{
  box-shadow: 0 10px 10px rgba(0,0,0,.1);
  transform: scale(1.1);
}
.article:hover h3,
.article:hover h4{
  text-shadow: 0 10px 10px rgba(0,0,0,.1);
  transform: scale(1.1);
}

@media (max-width: 768px){
  .news_title{
    top:200px;
    width: 90%;
  }
  .news_title > div {
    margin-bottom: 10px!important;
  }
  .news_title > div h2{
    font-size: 20px;
    line-height: 22px;
    transform: translateY(24px);
  }
  #newsroom{
    grid-template-columns: 0px 1.5fr;
    gap: 0;
  }
}

/********오브젝트*********/
/********오브젝트*********/
/********오브젝트*********/
/* #slowDiv {
  position: fixed;
  top: 200vh;
  left: 10vw;
  padding: 40px;
  color: white;
  z-index: 10;
  width: 25vw;
  mix-blend-mode: difference;
}
#slowDiv2 {
  position: fixed;
  bottom:-50vh;
  right: 0vw;
  padding: 40px;
  color: white;
  z-index: 10;
  width: 50vw;
  z-index: -1;
  transition: 1s ease-in-out;
} */
.active #slowDiv2 {
  bottom: 8vh;
}
@media (max-width: 768px){
  #slowDiv1{
    display: none;
  }
  #slowDiv2{
    display: none;
  }
}


/*아이콘*/
/* 아이콘 기본 스타일 */
i.ico {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #fff;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  vertical-align: middle;
}
i.ico.black{
  background-color: #121212;
}
i.ico.red{
  background-color: #EE2923;
}
i.ico.small{
  width: 12px;
  height: 12px;
}
i.ico.large{
  width: 20px;
  height: 20px;
}
/* CSS 변수 적용 */
i.ico {
  --bg-name: "default"; /* 기본값 */
}

/* JavaScript에서 동적으로 변경 */
i.ico {
  mask-image: var(--mask-url);
  -webkit-mask-image: var(--mask-url);
}




header.hidden {
  transform: translateY(-100%);
}



/*******푸터셀렉트*******/


/*div select*/
/* 전체 컨테이너 */
.custom-select {
  position: relative;
  width: 200px;
  display: inline-block;
  background-image: url(/assets/svg/arrow.svg);
  background-repeat: no-repeat;
  background-position: calc(100% - 15px) 50%;
  margin-bottom: 100px;
  font-size: 90%;
}
.custom-select span{
  font-size: 16px;
}
/* 헤더 스타일 */
.select-header {
  padding: 10px 15px;
  border: 1px solid #f9f9f9;
  border-radius: 10px;
  cursor: pointer;
  background-color: #f9f9f920;
  color:#f9f9f9;
}

/* 옵션 리스트 초기 상태 (숨김) */
.option-list {
  display: none; /* 핵심: 기본적으로 숨겨둡니다 */
  position: absolute;
  top: calc(100%); /* 헤더 바로 아래에 위치 */
  left: 0;
  width: 100%;
  list-style: none; /* 리스트 점 제거 */
  padding: 0;
  margin: 0;
  border-radius: 10px;
  cursor: pointer;
  background-color: #f9f9f9;
  color:#231f20;
  border-top: none;
  z-index: 10;
  overflow: hidden;
}

/* 옵션 리스트 보이기 (hover 이용) */
.custom-select:hover .option-list,
.custom-select:focus-within .option-list {
  display: block; /* 마우스 오버 또는 포커스 시 보입니다 */
}

/* 옵션 항목 스타일 */
.option {
  padding:10px 15px;
  cursor: pointer;
  font-size: 16px;
}
@media (max-width: 768px){
  .custom-select{
    margin-bottom: 10px;
    width: calc(50% - 5px);
  }
  .custom-select span,
  .option {
    font-size: 13px;
  }
}

/* 옵션 항목에 마우스 올렸을 때 효과 */
.option:hover {
  background-color: #dddddd;
}
@media (min-width: 769px) and (max-width:1300px) {
  .responsive_img{
    width: 100%;
    aspect-ratio: 1.6 / .9;
    object-fit: cover;
  }
}


#slogan_area{
  width: 100vw;
  background-color: #fff;
  z-index: 0;
  position: relative;
}


.slogan{
  position: absolute;
  width: 80vw;
  left: 10vw;
  height: 100vh;
  padding-top: 17.5vh;
  /* mix-blend-mode: luminosity; 블렌드 모드 luminosity */
}
.fixed .slogan{
  position: fixed;
  top: 0;
  z-index: 100;
  height: 20vh;
}
.slogan p{
  color:#231F20;
  font-size: 6vh;
  line-height: 7vh;
  font-weight: 400;
  letter-spacing: .7vw;
  margin: 0;
  /* text-shadow: 10px 10px 10px rgba(0,0,0,.4); */
  font-family: 'Montserrat';
  text-align: left;
  display: block;
}
.slogan span {
  display: inline-block;
  font-weight: 100;
  opacity: 0;
  transform: translateY(40px);
  transition: all .3s ease;
  font-family: "Montserrat", sans-serif;
}

.slogan p span {
  display: inline-block;
  opacity: .1;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  margin-right: 1vw;
  transition-delay: 0;
}

/* active 상태일 때 단어 순차 애니메이션 */
#slogan_area.actvie .slogan p span,
#slogan_area.fixed .slogan p span  {
  opacity: 1;
  transform: translateY(0);
}


.marquee-wrapper{
  width: 100%;
  height: 400px;
  overflow: hidden;
  position: relative;
}
.marquee-container {
  width: 110%;
  left:-5%;
  height: 80px;
  overflow: hidden;
  background-color: #0077FF;
  display: flex;
  align-items: center;
  position: absolute;
  transform: rotate(3deg);
  margin-top: 200px;
}
.marquee-container.blue {
  transform: rotate(-1.5deg);
  background-color: #009AFF;
}
.marquee {
  display: flex;
  white-space: nowrap;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.marquee span {
  display: inline-block;
  padding-right: 50px; /* 글자 간 간격 */
  color:#fff;
  font-size: 26px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif!important;
  font-optical-sizing: auto;
  font-style: normal;
}
.marquee span i{
  background-image: url(/assets/svg/logo_wild.svg);
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
  width: 166px;
  height: 14px;
  margin-left: 50px;
}
@media (max-width: 768px){
  .marquee-container {
    height: 50px;
  }
  .marquee span {
    font-size: 16px;
  }
  .marquee span i{
    width: 140px;
    background-size: contain;
  }
  .marquee-container.blue {
    transform: rotate(-4.5deg);
  }
}



/********섹션5*********/
/********섹션5*********/
/********섹션5*********/
/********섹션5*********/
#sec5 .sec5_title {
  position: absolute;
  top: calc(50% - 10vw);          /* 원하는 Y 위치 */
  left: 0;            /* 기준점은 왼쪽에 맞춰둠 */
  transform: translateX(100vw); /* 처음엔 화면 오른쪽 밖 */
  white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}
#sec5.fixed .sec5_title{
  position: fixed;
}
.sec5_title > div{
  width: 100%;
  overflow: hidden;
  margin-bottom: .4vw;
}
.sec5_title > div.h2_div{
  margin-bottom: 1vw;
}
.sec5_title > div h2{
  font-size: 3vw;
  line-height: 100%;
  transform: translateY(0vw);
  margin-bottom: 0;
  transition: 1s;
  transition-delay: 0s;
  text-align: left;
  font-weight: 800;
}
.sec5_title > div h2 strong{
  font-weight: 800;
  color:#14D2B7;
}
.sec5_title > div p{
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1vw;
  line-height: 100%;
  color:#80848A;
  transform: translateY(1.5vw);
  transition: 1s;
  transition-delay: 0s;
  text-align: center;
}
#sec5{
  position: relative;
  overflow: hidden;
  background-color: #fff;
  z-index: 4;
}
#sec5.fixed .sec5_img{
  position: fixed;
  top: calc(50% - 350px);
  z-index: 4;
  justify-content: center;
  align-items: center;
  display: flex
;
}
#sec5.active .sec5_title h2,
#sec5.active .sec5_title p{
  transform: translateY(0vw);
}
.slowDiv3 {
  position: fixed;
  top: 440vh;
  left: 10vw;
  padding: 40px;
  color: white;
  z-index: -1;
  width: 20vw;
  /* mix-blend-mode: difference; */
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.slowDiv4 {
  position: fixed;
  top: 450vh;
  left: 20vw;
  padding: 40px;
  color: white;
  z-index: -1;
  width: 20vw;
  /* mix-blend-mode: difference; */
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
@media (max-width: 768px){
  .sec5_title{
    top: calc(50% - 70px)!important;
  }
  .sec5_title > div{
    margin-bottom: 10px!important;
  }
  .sec5_title > div h2{
    font-size: 20px;
    line-height: 20px;
    transform: translateY(0vw);
  }
}


/**********VOD**********/
#vod{
  position: relative;
  z-index: 5;
}
#vod img.vod{
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.vod_inner{
  position: absolute;
  text-align: center;
  width: 50vw;
  z-index: 2;
}
.vod_inner img{
  width: 30vw;
  margin-bottom: 2vh;
  opacity: 0;
  transition: .4s;
}
.vod_inner h3{
  display: block;
  color:#fff;
  font-size: 2vw;
  font-weight: 800;
  opacity: 0;
  transition: .4s;
}

.active .vod_inner img{
  opacity: 1;
  transition-delay: .5s;
}
.active .vod_inner h3{
  opacity: 1;
  transition-delay: .6s;
}

#vod video{
  width: 100vw;   /* 뷰포트 가로 전체 */
  height: 100vh;  /* 뷰포트 세로 전체 */
  object-fit: cover; /* 비율 유지하면서 꽉 채움 */
}
@media (max-width: 768px){
  .vod_inner img{
    width: 50vw;
  }
  .vod_inner {
    width: 290px;
  }
  .vod_inner h3{
    font-size: 20px;
    line-height: 30px;
  }
}
/**********폰프레임**********/
.phone_frame .scene{
  width: 18vw;
  margin: 0 auto;
}
.phone_frame .scene img{
  width: 100%;
  border-radius: 20px;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.5));
}
#phone_hero{
  position: absolute;
  right: 10vw;
  opacity: 0;
  transition: opacity .5s ease;
  transition-delay: 0s;
}
.active #phone_hero{
  position: absolute;
  opacity: 1;
}
@media (max-width: 768px){
  .phone_frame .scene{
    width: 40vw;
  }
  .active #phone_hero{
    top:350px;
  }
}


#fadeEffect {
  position: relative;
  width: 18vw;   /* 필요에 맞게 변경 */
  aspect-ratio: 277 / 565;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.6));
  background-image: url(/assets/img/nxp/sec5_1.png);
  background-size: cover;
}

#fadeEffect img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;    /* 컨테이너에 맞춤 */
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0));
}

#fadeEffect img.active {
  opacity: 1;
}
@media (max-width: 768px){
  #fadeEffect {
    width: 30vw;
  }

  .phone_frame .scene img{
    filter:none;
  }
  #fadeEffect,
  #fadeEffect img{
    filter:none;
  }
}



/********섹션6*********/
/********섹션6*********/
/********섹션6*********/
/********섹션6*********/
#sec6{
  position: relative;
  overflow: visible;
  background-color: #f9f9f9;
  z-index: 5;
  overflow: hidden;
}
.sec6_title {
  position: fixed;
  top:calc(50vh - 6vw);
  display: none;
}
#sec6.fixed2 .sec6_title {
  display: block;
}
.sec6_title > div{
  width: 100%;
  overflow: hidden;
  margin-bottom: .4vw;
}
.sec6_title > div.h2_div{
  margin-bottom: 1vw;
}
.sec6_title > div h2{
  font-size: 3vw;
  line-height: 100%;
  transform: translateY(3.1vw);
  margin-bottom: 0;
  transition: .3s;
  transition-delay: 0s;
  text-align: center;
  font-weight: 800;
}
.sec6_title > div h2 strong{
  font-weight: 800;
  color:#0077FF;
}
#sec6.active .sec6_title h2{
  transform: translateY(0vw);
}
@media (max-width: 768px){
  .sec6_title{
    top: calc(50% - 70px)!important;
  }
  .sec6_title > div{
    margin-bottom: 10px!important;
  }
  .sec6_title > div h2{
    font-size: 20px;
    line-height: 20px;
    transform: translateY(22vw);
  }
  .sec7_group{
    width: 90vw!important;
  }
  .sec7_group img{
    margin-bottom: 0!important;
    margin-top: 10%!important;
  }
  .sec7_group h3{
    font-size: 16px!important;
  }
}


#sec7{
  position: relative;
  overflow: visible;
  background-color: #f9f9f9;
  z-index: 5;
}
.sec7_group{
  display: grid;
  width: 60vw;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  width: 100%;
  max-width: 90%;
  padding: 0 100px;
  gap: 2vw;
}
.sec7_group > div{
  /* background-color: #000; */
  /* aspect-ratio: 1 / 1; */
  border-radius: 2vw;
  text-align: center;
}
/* .sec7_group > div.blue{
  background-color: #0089F5;
}
.sec7_group > div.deepblue{
  background-color: #001C74;
}
.sec7_group > div.green{
  background-color: #14D2B7;
} */
.sec7_group h3{
  color:#fff;
  font-weight: 800;
  font-size: 2vw;
  text-align: center;
}
.sec7_group img{
  width: 100%;
}
/* .sec7_group img{
  max-width: 45%;
  margin-bottom: 5%;
  margin-top: 18%;
} */
i{
  font-style: normal;
  font-weight: 800;
}

@media (max-width: 768px){
  .sec7_group{
    grid-template-columns: 1fr 1fr;
    width: 80vw;
    padding: 0 60px;
    gap: 0vw 6vw;
    justify-content: center;
    align-items: center;
  }
  .sec7_group > div:nth-child(2){
    display: none;
  }
}
