/* main_visual */

#mainvisual {
  background: url(../img/myimg/main_bg.jpg) center center no-repeat;
  background-size: cover;
}

#mainvisual .inner_box {
  height: 100%;
}

#hd {
  height: 80px;
  background-color: rgba(000, 000, 000, 0.2);
  transition: 0.5s;
  backdrop-filter: blur(2px);
  left: 0;
  right: 0;
}

#hd h1 a {
  background: url(../img/myimg/logo/ntcon_logo.png) center center no-repeat;
  background-size: contain;
  width: 60px;
  height: 0;
  padding-top: 100%;
  display: block;
}

#hd #gnb li a {
  transition: 0.5s;
}
#hd .m_gnb_btn::after {
  content: "\F479";
  font-family: bootstrap-icons;
  font-size: 2rem;
}

#hd .m_gnb_btn {
  color: #fff;
}

/* header hover 상태 */
#hd:hover,
#hd.active {
  background-color: #fff;
  box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px,
    rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px,
    rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px,
    rgba(42, 51, 70, 0.04) 0px 6px 6px -3px,
    rgba(14, 63, 126, 0.04) 0px 12px 12px -6px,
    rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
}

#hd:hover #gnb li a,
#hd.active #gnb li a,
#hd.active .m_gnb_btn,
#hd:hover .m_gnb_btn {
  color: #000;
}

#hd #gnb li a:hover,
#hd.active #gnb li a.on {
  background-color: #249fd4;
  border-radius: 4px;
  color: #fff;
}

/* 모바일 헤더 오픈 관리 */
body .m_box {
  display: none;
  z-index: 10;
}
body.open {
  overflow-y: hidden;
}

body.open .m_box {
  display: block;
}

/* company */
#company {
  height: 100vh;
  padding: 12px 0;
  border-radius: 0 0 50px 50px;
}
#company .company_list {
  background: url(../img/myimg/company_bg.jpg) center center no-repeat;
  background-size: cover;
}

#company .company_list div {
  height: 60vh;
}

#company .icon_list {
  width: 35vw;
}

#company .icon_list img {
  width: 3rem;
  height: auto;
}

/* travel tech */

#travel {
  padding: 120px 0 180px 0;
}

#travel .mycontainer {
  row-gap: 120px;
}

#travel .travel_list {
  row-gap: 180px;
}

/* 트레블 에니메이션 */
.travel_list > li {
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 0.5s ease-in, transform 0.8s ease-in-out;
  will-change: opacity, transform;
}

.travel_list > li.active {
  opacity: 1;
  transform: translateY(0);
}

/* 메인 타이틀 간격 */
#travel .mycontainer > .title_box,
#xr .mycontainer > .title_box,
#ai .mycontainer > .title_box {
  padding: 80px 0;
}

/* 로고이미지 사이즈 */

#travel .travel_list_big .mycontainer {
  row-gap: 120px;
}

#travel .travel_list .bg_box img,
#travel .travel_list_big .bg_box img {
  border-radius: 50px;
}

#travel .travel_list .content_box .title_box img {
  height: 50px;
  width: fit-content;
}

/* line_banner */

#line_banner {
  background: url(../img/myimg/line_banner.jpg) center center no-repeat;
  background-size: cover;
}

/* XR */

#xr {
  padding-top: 60px;
  padding-bottom: 180px;
}

#xr .inner_box {
  padding: 100px 48px;
  row-gap: 100px;
  border-radius: 50px;
  margin-bottom: 180px;
}

#xr > .inner_box .title_box {
  row-gap: 120px;
}

#xr .inner_box .txt_box {
  text-align: start;
}

#xr .inner_box .title_box img {
  height: 50px;
}

#xr .xr_list .content_box .title_box img {
  width: 200px;
  height: auto;
}

#xr_swiper .swiper-slide {
  width: fit-content;
  border-radius: 25px;
  overflow: hidden;
}

/* XR-TAB */

#xr .xr_tab .tab_list .inner_box {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#xr .xr_tab .tab_list .inner_box span,
#xr .xr_tab .tab_list .inner_box .more_btn {
  opacity: 0;
  transition: opacity 0.5s; /* 투명도에 대한 트랜지션 설정 */
}

#xr .xr_tab .tab_list:hover .inner_box span,
#xr .xr_tab .tab_list:hover .inner_box .more_btn {
  opacity: 1;
}

#xr .xr_tab .tab_list {
  border: 3px solid transparent;
  border-radius: 25px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px,
    rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
    rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}

#xr .xr_tab .tab_list:hover {
  position: relative;
  border: 3px solid transparent;
  background-image: linear-gradient(#fff, #fff),
    linear-gradient(to right, #00548d 0%, #249fd4 100%);
  background-origin: border-box;
  background-clip: content-box, border-box;
  border-radius: 25px;
}

/* ai */

#ai {
  background: url(../img/myimg/ai_bg.jpg) center center no-repeat;
  background-size: cover;
  padding: 120px 0;
}

#ai .mycontainer > .title_box {
  padding: 80px 0;
}

#ai .mycontainer .tab {
  max-width: 1200px;
  margin: 0 auto;
}

#ai .mycontainer .tab div {
  border-radius: 50px;
}

#ai .mycontainer .tab .tab_list {
  padding: 48px;
  min-height: 440px;
}

#ai .mycontainer .tab .tab_list .tab_icon {
  background-color: #249fd4;
  width: 60px;
  height: 60px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

#ai .mycontainer .tab .tab_list.xrai .tab_icon::after {
  content: "\F459";
  font-family: bootstrap-icons;
  font-size: 2rem;
}

#ai .mycontainer .tab .tab_list.videoai .tab_icon::after {
  content: "\F677";
  font-family: bootstrap-icons;
  font-size: 2rem;
}

/* contact */

#contact {
  padding: 120px 0;
  border-radius: 50px 50px 0 0;
}

#contact input,
#contact textarea {
  border: 1px solid #fff !important;
  border-radius: 8px;
  padding: 8px;
  box-sizing: border-box;
}

/* footer */

#ft {
  background: url(../img/myimg/footer_bg.jpg) center center no-repeat;
  background-size: cover;
}

#ft .ntcon_logo {
  background: url(../img/myimg/logo/ntcon_logo.png) center center no-repeat;
  background-size: contain;
  width: 60px;
  height: 60px;
  display: block;
}

/* m-gnb */

.m_box {
  height: 100vh;
  background-color: #fff;
  top: 0;
  left: 0;
  right: 0;
}

.m_box .m_box_hd {
  height: 60px;
}

.m_box .m_box_hd .close_btn::after {
  content: "\F659";
  font-family: bootstrap-icons;
  color: #000;
  font-size: 32px;
  margin-left: 8px;
}

#m_gnb li a::after {
  content: "\F285";
  font-family: bootstrap-icons;
  color: #000;
  font-size: 16px;
  margin-left: 8px;
  transition: 0.5s;
}

#m_gnb li a:hover {
  background-color: #249fd4;
  color: #fff;
  transition: 0.5s;
}

#m_gnb li a:hover::after {
  color: #fff;
  transition: 0.5s;
}

/* ------------------------ 반응형 lg 이하 ------------------------*/

@media (max-width: 992px) {
  #hd {
    height: 60px;
  }
  #hd h1 a {
    max-width: 40px;
  }

  /* mainvisual */
  #mainvisual .inner_box {
    width: 100%;
    top: 50%;
    transform: translate(0, -50%);
    height: auto;
  }

  #mainvisual span {
    font-size: 3vw;
  }

  #mainvisual .visual_box .icon_list {
    width: 40vw;
  }

  /* h2 title */
  #company .title_box h2,
  #travel .title_box h2,
  #xr .title_box h2,
  #ai .title_box h2,
  #ai .title_box h2 > span,
  #contact .title_box h2 {
    font-size: 6vw;
  }

  #travel .mycontainer > .title_box,
  #xr .mycontainer > .title_box,
  #ai .mycontainer > .title_box {
    padding: 24px 0;
  }

  /* company */
  #company .title_box .txt_box span:nth-child(1) {
    font-size: 2vw;
  }

  #company .title_box .txt_box span:nth-child(2) {
    font-size: 2.5vw;
  }

  #company .icon_list {
    width: 60vw;
    text-align: center;
  }

  #company .icon_list li + li {
    margin-top: 1.5rem;
  }

  /* travel */
  #travel {
    padding: 32px 0 32px 0;
  }

  #travel .mycontainer {
    row-gap: 40px;
  }

  #travel .title_box h3 {
    font-size: 4vw;
    text-align: left;
  }

  #travel .title_box span {
    font-size: 2.3vw;
    text-align: center;
  }
  #travel .travel_list_big .bg_box img {
    width: 1336px;
  }

  #travel .travel_list .bg_box img,
  #travel .travel_list_big .bg_box img {
    border-radius: 25px;
  }

  #travel .travel_list {
    row-gap: 48px;
  }

  #travel .travel_list_big .mycontainer {
    row-gap: 48px;
  }

  #travel .travel_list_big {
    padding: 48px 0;
  }

  /*  xr */

  #xr {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  #xr .title_box span {
    font-size: 2.3vw;
    text-align: center;
    line-height: unset;
  }

  #xr .inner_box {
    padding: 48px 0px;
    row-gap: 32px;
    border-radius: 25px;
    margin-bottom: 48px;
  }

  #xr > .inner_box .title_box {
    row-gap: 48px;
  }

  #xr .inner_box .txt_box {
    text-align: center;
  }

  #xr .xr_list .title_box h3 {
    font-size: 4vw;
  }

  #xr .inner_box .title_box img {
    height: 7vw;
  }

  #xr .inner_box .title_box h3 {
    font-size: 4vw;
  }

  #xr .xr_list .content_box .title_box {
    text-align: center;
  }

  #xr .xr_list .content_box .txt_box {
    text-align: center;
  }

  /* xr_swiper */

  #xr .mySwiper {
    /* 모바일 헤더 오픈시 이슈 처리 */
    z-index: 0;
    width: 100%;
    height: fit-content;
    text-align: center;
    padding-bottom: 3rem;
  }

  #xr .mySwiper .swiper-slide .inner_box {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  #xr .mySwiper .swiper-slide img {
    position: relative;
    border: 3px solid transparent;
    background-image: linear-gradient(#fff, #fff),
      linear-gradient(to right, #00548d 0%, #249fd4 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    border-radius: 25px;
    width: fit-content;
  }

  #xr .mySwiper .btns {
    position: absolute;
    top: 40%;
    width: 100%;
  }

  #xr .mySwiper .btns .swiper-button-next,
  #xr .mySwiper .btns .swiper-button-prev {
    color: #249fd4;
  }

  #xr .mySwiper .btns .swiper-button-next:after,
  #xr .mySwiper .btns .swiper-button-prev:after {
    font-size: 2rem;
  }

  #xr .mySwiper .swiper-pagination .swiper-pagination-bullet {
    width: 0.8rem;
    height: 0.8rem;
  }

  #xr .mySwiper .swiper-pagination-bullet-active .swiper-pagination-bullet {
    background-color: #249fd4;
  }

  /* line_banner */
  #line_banner p span {
    font-size: 5vw;
  }

  /* ai */
  #ai {
    background: url(../img/myimg/ai_bg_mobile.jpg) center center no-repeat;
    background-size: cover;
    padding: 100px 0;
  }

  #ai .mycontainer {
    row-gap: 40px;
  }

  #ai .mycontainer > .title_box {
    padding: 80px 0;
  }

  #ai .title_box span {
    font-size: 2.3vw;
  }

  #ai .mycontainer .tab div {
    border-radius: 25px;
  }

  #ai .mycontainer .tab .tab_list {
    padding: 16px;
    min-height: 160px;
  }

  #ai .mycontainer .tab > div + div {
    margin-top: 1rem;
  }

  #ai .mycontainer .tab .tab_list .title_box h3 {
    font-size: 3.6vw;
  }

  #ai .mycontainer .tab .tab_list .tab_icon {
    width: 50px;
    height: 50px;
  }

  #ai .mycontainer .tab .tab_list.xrai .tab_icon::after {
    content: "\F459";
    font-family: bootstrap-icons;
    font-size: 1.5rem;
  }

  #ai .mycontainer .tab .tab_list.videoai .tab_icon::after {
    content: "\F677";
    font-family: bootstrap-icons;
    font-size: 1.5rem;
  }

  /* footer */

  #ft .mycontainer {
    justify-content: center;
    align-items: center;
  }

  #ft .mycontainer address {
    text-align: center;
    font-size: 12px;
    font-weight: 400;
  }

  #ft .mycontainer .copy {
    text-align: center;
    display: block;
    font-size: 12px;
    font-weight: 400;
    margin-top: 1rem;
  }
}

/* ------------------------ 반응형 sm 이하 ------------------------*/

@media (max-width: 576px) {
  #mainvisual .visual_box .icon_list {
    width: 50vw;
  }

  /* company */
  #company {
    border-radius: 0 0 25px 25px;
  }

  #company .title_box .txt_box span:nth-child(1) {
    font-size: 3vw;
  }

  #company .title_box .txt_box span:nth-child(2) {
    font-size: 3.5vw;
  }

  #company .icon_list {
    width: 70vw;
  }

  /* travel */
  #travel .title_box {
    text-align: center;
  }
  #travel .title_box span {
    font-size: 3.5vw;
  }

  #travel .txt_box span,
  #travel .txt_box p {
    font-size: 14px;
    line-height: 24px;
  }

  /* xr */
  #xr .title_box span {
    font-size: 3.5vw;
    text-align: center;
  }

  /* ai */

  #ai .mycontainer .tab .tab_list .title_box p {
    font-size: 14px;
    line-height: 24px;
  }

  #ai .title_box span {
    font-size: 3.5vw;
  }

  #ai .mycontainer .tab .tab_list .tab_icon {
    width: 36px;
    height: 36px;
  }

  #ai .mycontainer .tab .tab_list.xrai .tab_icon::after {
    content: "\F459";
    font-family: bootstrap-icons;
    font-size: 1rem;
  }

  #ai .mycontainer .tab .tab_list.videoai .tab_icon::after {
    content: "\F677";
    font-family: bootstrap-icons;
    font-size: 1rem;
  }

  #contact {
    border-radius: 25px 25px 0 0;
  }
}