@charset "utf-8";

/* --------------------------------------------------------------------------------------------- */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
address,
code,
em,
img,
strong,
sub,
sup,
b,
u,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
section,
main,
audio,
video {
  margin: 0;
  padding: 0;
}

/*html5추가 시멘틱엘리먼트를 익스하위버전에서 블럭으로 인식되도록함*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main {
  display: block;
}

/* button태그에 손모양 커서 */
button {
  cursor: pointer;
  background: none;
  border: none;
}
/* 익스하위버전에서 이미지 선없애기 */
fieldset,
img {
  border: 0;
  vertical-align: top;
}
/* 리스트 기호 빼기 */
ol,
ul {
  list-style: none;
}
/* 태그 기본 기울임꼴 제거 */
address,
em {
  font-style: normal;
}
/* 페이지안에서 가장 많은 링크색 지정 */
a {
  text-decoration: none;
  color: #1c1c1c;
}
/* iframe으로 외부컨텐츠를 연결했을때
외부컨텐츠안쪽내용이 우리페이지에 영향을 주지못하도록 가려줌
*/
iframe {
  overflow: hidden;
  border: 0;
}
/* 칸의 선을 합치기, 칸의 간격없애기, 가로를 늘려줌 */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
/* 굵기 빼고 헤딩태그 폰트크기를 body에 선언한 크기와 일치시킴 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  font-size: 100%;
}
/* 폼요소의 높이가 다를때 요소끼리 세로정렬시킴 */
input,
select,
textarea,
button {
  vertical-align: middle;
  margin: 0;
  padding: 0;
}
/* textarea 리사이즈기능 빼기 */
textarea {
  resize: none;
}
/* 페이지안의 모든 폰트의 줄간격을 1.5로 통일시킴
모바일 크롬, 모바일 사파리 브라우져의 텍스트 자동확대 방지
*/
body {
  line-height: 1.5;
  -webkit-text-size-adjust: none;
  font-family: "Spoqa Han Sans Neo", "sans-serif" !important;
}
button {
  font-family: "Noto Sans", "Noto Sans KR", sans-serif;
}

/* legend,caption,메뉴제목,섹션제목 블라인드 */
legend,
caption,
.blind {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
  width: 1px;
  height: 1px;
}

/* float해제 */
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.display-none {
  display: none !important;
}

#dim {
  position: fixed;
  z-index: 5555;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.8;
  cursor: pointer;
}

.dim_close {
  position: fixed;
  z-index: 5555;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.yellow {
  color: #ffe600 !important;
}

/* 인트로 */
#intro {
  display: block; 
  padding: 70px 50px;
  height: 100%;
  box-sizing: border-box;
  background: #fff;
}
#intro.hide {
  display: none;
}
#intro .top_section {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 80px;
  background: #0069B4;
  padding: 0 50px;
}
#intro .logo {
  position: unset;
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
}
#intro .logo img {
  /* height: 100%; */
  height: 42px;
}

#intro .intro_login {
  cursor: pointer;
}

#intro .intro_box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 30px;
  height: 100%;
  margin-top: 30px;
  box-sizing: border-box;
}
#intro .intro_box .left_box {
  width: 100%;
  max-width: 790px;
}
#intro .intro_box .left_box .tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  height: 50px;
  line-height: 50px;
  font-size: 40px;
  font-weight: 700;
}

/* VR 바로가기 버튼 */
#intro .intro_box .left_box .tit .goVR {
  font-size: 25px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#intro .intro_box .left_box .tit .goVR .goVRImg {
  margin-left: 6px;
}
/* VR 바로가기 버튼 */

#intro .intro_box .left_box .content_wrap {
  border-top: 2px solid #171717;
  padding-top: 25px;
  box-sizing: border-box;
}
#intro .intro_box .left_box .content_wrap > span.txt_box {
  display: block;
  height: 200px;
  max-height: 200px;
  font-size: 18px;
  color: #707070;
  overflow: auto;
}
span.txt_box::-webkit-scrollbar {
  width: 2px;
}
span.txt_box::-webkit-scrollbar-thumb {
  width: 2px;
  background: #707070;
}
span.txt_box::-webkit-scrollbar-track {
  width: 2px;
}
#intro .intro_box .left_box .content_wrap .slide_wrap {
  margin-top: 20px;
}
#intro .intro_box .left_box .content_wrap .slide_wrap .swiper {
  width: 100%;
  height: 100%;
}
#intro .intro_box .left_box .content_wrap .slide_wrap .swiper .swiper-wrapper {
  padding-bottom: 80px;
}
#intro .intro_box .left_box .content_wrap .slide_wrap .swiper .swiper-slide {
  width: 254px;
  height: 400px;
  min-height: 400px;
  border-radius: 0px 0px 30px 0px;
  box-shadow: 3px 3px 6px #0000001f;
}
#intro .intro_box .left_box .content_wrap .slide_wrap .swiper .swiper-slide img {
  width: 100%;
  /* height: 100%; */
  height: 184px;
  max-height: 184px;
  object-fit: cover;
}
.swiper-button-next,
.swiper-button-prev {
  top: auto;
  bottom: 27px;
  width: 36px;
  height: 36px;
  border: 1px solid #b2b2b2;
  border-radius: 2px;
  color: transparent;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: #f5f5f4;
}
.swiper-button-next:after,
.swiper-button-prev:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 12px;
  background: url(../images/right.png) no-repeat;
  background-size: 100%;
  transform: translate(-50%, -50%);
}
.swiper-button-prev:after {
  background: url(../images/left.png) no-repeat;
}
#intro .swiper-pagination-bullets {
  bottom: var(--swiper-pagination-bottom, 35px) !important;
}
#intro .swiper-pagination-bullet {
  width: 36px !important;
  height: 8px !important;
  border-radius: 4px !important;
  background: #cccccc;
  opacity: 1;
}
.swiper-pagination-bullet-active {
  background: #6dafde;
}
#intro .intro_box .left_box .content_wrap .slide_wrap .zone_info {
  height: 216px;
  padding: 20px;
  text-align: center;
  box-sizing: border-box;
}
#intro .intro_box .left_box .content_wrap .slide_wrap .zone_info .zone_title {
  position: relative;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 700;
  color: #0069b4;
}
#intro .intro_box .left_box .content_wrap .slide_wrap .zone_info .zone_title:after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  width: 16px;
  height: 2px;
  background: #0069b4;
  transform: translateX(-50%);
}
#intro .intro_box .left_box .content_wrap .slide_wrap .zone_info .zone_txt {
  height: 80px;
  margin-bottom: 20px;
  font-size: 17px;
  font-weight: 400;
  color: #707070;
  overflow-y: auto;
}
#intro .intro_box .left_box .content_wrap .slide_wrap .zone_info .zone_txt::-webkit-scrollbar {
  width: 2px;
}
#intro .intro_box .left_box .content_wrap .slide_wrap .zone_info .zone_txt::-webkit-scrollbar-thumb {
  width: 2px;
  background: #707070;
}
#intro .intro_box .left_box .content_wrap .slide_wrap .zone_info .zone_txt::-webkit-scrollbar-track {
  width: 2px;
}

#intro .intro_box .left_box .content_wrap .slide_wrap .zone_info .zone_item {
  display: flex;
  justify-content: flex-end;
  gap: 0 8px;
}
/* 아이콘 공통 */
#intro .intro_box .left_box .content_wrap .slide_wrap .zone_info .zone_item .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: #f5f5f4;
  overflow: hidden;
  transition: all 0.3s;
}
#intro .intro_box .left_box .content_wrap .slide_wrap .zone_info .zone_item .icon.iconVR {
  font-size: 18px;
  font-weight: 700;
  color: #6dafde;
}
/* 아이콘 홈 이미지 */
#intro .intro_box .left_box .content_wrap .slide_wrap .zone_info .zone_item .icon img {
  width: 20px;
  height: 20px;
}

/* 아이콘 VR 호버시 */
#intro .intro_box .left_box .content_wrap .slide_wrap .zone_info .zone_item .icon.iconVR.hover {
  width: 106px;
  background: #9984d7;
  white-space: nowrap;
  font-size: 17px;
  color: #fff;
  cursor: pointer;
}
#intro .intro_box .left_box .content_wrap .slide_wrap .zone_info .zone_item .icon.iconHome.hover {
  background: #9984d7;
  cursor: pointer;
}

#intro .intro_box .right_box {
  width: 100%;
  max-width: 1000px;
  height: 100%;
  max-height: 823px;
  box-sizing: border-box;
}

#intro .intro_box .right_box iframe > canvas {
  height: 100vh !important;
}

@media screen and (min-width: 1921px) {
  #intro .top_section {
    justify-content: center;
    height: 87px;
    padding: 0;
    gap: 0 1520px;
  }
}

@media screen and (min-width: 1635px) {
  #intro .intro_login > img:nth-child(2) {
    display: none;
  }
}

@media screen and (max-width: 1634px) {
  #intro {
    height: auto;
  }

  #intro .intro_login > img:nth-child(2) {
    display: none;
  }
  #intro .intro_box {
    flex-direction: column-reverse;
    gap: 20px 0;
    height: auto;
  }
  #intro .intro_box .left_box {
    max-width: 100%;
  }
  #intro .intro_box .right_box {
    max-width: 100%;
    text-align: center;
  }
  #intro .intro_box .right_box iframe {
    width: 90%;
    min-height: 450px;
  }
}

@media screen and (max-width: 768px) {
  #intro {
    padding: 33px 23px;
  }
  #intro .top_section {
    height: 70px;
    padding: 0 30px;
  }

  #intro .logo img {
    width: 158px;
    height: 100% !important;
  }

  #intro .intro_login > img:nth-child(1) {
    display: none;
  }

  #intro .intro_login > img:nth-child(2) {
    display: block;
  }
  

  #intro .intro_box .left_box .tit {
    font-size: 28px;
  }

  #intro .intro_box .left_box .tit .goVR {
    font-size: 20px;
  }

  #intro .intro_box .left_box .content_wrap > span.txt_box {
    max-height: 275px;
    font-size: 16px;
  }
  #intro .intro_box .left_box .content_wrap .slide_wrap .zone_info {
    padding-bottom: 3%;
  }
  #intro .intro_box .left_box .content_wrap .slide_wrap .zone_info .zone_txt {
    font-size: 16px;
  }

  .swiper-pagination {
    display: none;
  }
  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }
}