@charset "utf-8";
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

*{margin:0; padding:0;}
ul,li{list-style:none;}
a{text-decoration:none; color:#000;}
img{border:0;}

.cf:after{
	content:'';
	display:block;
	clear:both;
}

body{
	font-family:'Pretendard',"나눔고딕",NanumGothic, sans-serif;
	background-color:#2D2D2D;
}

#wrap{
	width:100%;
	height:auto;
}

#wrap main{
	width:100%;
	height:auto;
	padding-bottom:50px;
}

main .slide_logo{
	width:170px;
	margin:0 auto;
	height:110px;
	padding-bottom:20px;
}

main .slide_logo .box{
	width:100%;
	height:60px;
}

main .slide_logo a{
	display:block;
	width:170px;
	height:50px;
}

main .slide_logo a img{
	width:100%;
	height:50px;
}

/* 슬라이드 전체를 감싸는 영역 */
.slider-wrapper {
  position: relative;
  width: 100%;
  max-width:1980px;
  height:700px;
  margin: 0 auto;
  overflow: hidden; /* 영역 밖으로 나가는 슬라이드 숨김 */
  display: flex;
  align-items: center;
  justify-content: center;
  
}

/* 슬라이드 트랙 (Flex 삭제, Relative 추가) */
.slider-track {
  position: relative;
  width: 100%;
  height: 600px; /* ★ 중요: Absolute 요소는 부모 높이를 인식하지 못하므로, 이미지 높이에 맞춰 이 값을 꼭 설정해 주세요 */
  margin: 0 auto;
}

/* 개별 슬라이드 기본 상태 (눈에 안 보이는 뒤쪽으로 숨김) */
.slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 800px;
  border-radius: 16px;
  overflow: hidden;
  
  /* 중앙에 배치하되 크기를 줄이고 투명하게 처리 */
  transform: translate(-50%, -50%) scale(0.6);
  filter: brightness(0.2);
  opacity: 0;
  z-index: 0;
  
  /* 전환 속도 (여기서 0.8s를 조절하면 전체 이동 속도가 바뀝니다) */
  transition: all 0.8s ease-in-out; 
}

.slide img {
  width: 100%;
  height: auto;
  display: block;
}

/* ----------------------------------
   위치별 클래스 (JS가 이 클래스들을 교체함)
   ---------------------------------- */

/* 왼쪽 슬라이드 */
.slide.prev {
	left:0%;
  transform: translate(0,-50%) scale(0.8);
  filter: brightness(0.4);
  opacity: 1;
  z-index: 1;
}

/* 중앙 활성 슬라이드 */
.slide.active {
  transform: translate(-50%,-50%) scale(1);
  filter: brightness(1);
  opacity: 1;
  z-index: 10;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

/* 오른쪽 슬라이드 */
.slide.next {
	left:100%;
  transform: translate(-100%,-50%) scale(0.8);
  filter: brightness(0.4);
  opacity: 1;
  z-index: 1;
}

/* 좌우 화살표 버튼 스타일 */
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color:#525252;
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  z-index: 20; /* 화살표는 항상 최상단에 위치 */
}

.prev-btn { left: 25%; } /* 왼쪽 화살표 위치 */
.next-btn { right: 25%; } /* 오른쪽 화살표 위치 */

/* 슬라이드 버튼 컨테이너 */
.slider-pagination {
	position:absolute;
	left:50%;
	bottom:0px;
	transform:translateX(-50%);
	display: flex;
	align-items: center;
	gap: 16px; 
	z-index: 20;
}

/* 기본(비활성) 슬라이드 버튼 */
.dot {
  width: 14px;
  height: 14px;
  background-color: #b3b3b3; /* 회색 */
  border: none;
  border-radius: 50%; /* 완벽한 원형 */
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease-in-out; /* 크기와 색상이 부드럽게 변하도록 설정 */
}

/* 활성화된 슬라이드 버튼 */
.dot.active {
  width: 42px; /* 가로 길이를 늘려 길쭉하게 만듦 */
  background-color: #c276ff; /* 보라색 */
  border-radius: 14px; /* 알약 모양 유지 */
}

/* 마우스를 올렸을 때의 효과 (선택 사항) */
.dot:hover:not(.active) {
  background-color: #d1d1d1;
}

section{
	margin-bottom:200px;
}

.game-store-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* 상단 헤더 영역 */
.game-header {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 60px;
}

/* 게임 아이콘 */
.game-icon img {
  width: 200px;
  height: 200px;
  border-radius: 36px;
  object-fit: cover;
  background-color: #555; /* 이미지 없을 때 임시 배경색 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* 게임 정보 텍스트 영역 */
.game-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 10px;
}

.title-group {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.game-title {
	font-family: 'Pretendard';
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  color:#fff;
}

.game-genre {
  font-size: 14px;
  color: #aaaaaa;
  padding-top: 6px;
}

.game-desc {
  margin: 0 0 20px 0;
  font-size: 18px;
  color: #dddddd;
}

/* 태그 스타일 */
.tags {
  display: flex;
  gap: 12px;
  margin-bottom: 30px;
}

.tag {
  padding: 6px 16px;
  border: 1px solid #ffffff;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  color:#fff;
}

/* 추가 정보 (확률형 아이템 등) */
.meta-info {
  font-size: 12px;
  color: #888888;
  line-height: 1.6;
}

.meta-info p {
  margin: 0;
}

/* 우측 스토어 버튼 영역 */
.store-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 10px;
}

.store-btn img{
	display:block;
	width:100%;
	height:auto;
}

/* 이미지가 없을 때를 대비한 임시 CSS 버튼 디자인 */
/*.store-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 56px;
  background-color: #000000;
  color: #ffffff;
  text-decoration: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: bold;
  border: 1px solid #444;
}*/

/* 하단 슬라이드 영역 */
.screenshot-slider {
  display: flex;
  gap: 24px;
  overflow-x: auto; /* 가로 스크롤 활성화 */
  scroll-snap-type: x mandatory; /* 스크롤 시 슬라이드에 딱 맞춰 멈추도록 설정 */
  padding-bottom: 20px; /* 스크롤바 공간 확보 */
}

/* 스크롤바 숨기기 (깔끔한 UI를 위해) */
.screenshot-slider::-webkit-scrollbar {
  display: none;
}
.screenshot-slider {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* 개별 회색 슬라이드 박스 */
.slide-item {
  flex: 0 0 calc(27% - 18px); /* 한 화면에 약 4개가 보이도록 너비 설정 */
  aspect-ratio: 3 / 4; /* 세로형 스크린샷 비율 */
  background-color: #d9d9d9;
}

.slide-item img{
	display:block;
	width:100%;
}


/* 전체 컨테이너 */
.gda-container {
  color: #ffffff;
  font-family: 'Pretendard', -apple-system, sans-serif;
  padding: 100px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 상단 섹션 */
.gda-top-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 120px; /* 위아래 섹션 사이의 넓은 간격 */
}

.gda-slogan {
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 20px 0;
  letter-spacing: -0.5px;
}

.gda-logo-img {
  width: 320px; /* 준비하신 이미지의 비율에 맞게 크기를 수정하세요 */
  height: auto;
  display: block;
}

/* 하단 섹션 (가로 정렬) */
.gda-bottom-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px; /* 글자와 선 사이의 간격 */
  width: 100%;
  max-width: 900px;
}

/* 왼쪽 질문 텍스트 */
.gda-question {
  font-size: 32px;
  font-weight: 700;
  margin: 0;
  white-space: nowrap; /* 줄바꿈 방지 */
}

/* 가운데 세로 구분선 */
.gda-vertical-line {
  width: 3px;
  height: 60px;
  background-color: #d9d9d9;
}

/* 오른쪽 설명 텍스트 컨테이너 */
.gda-answer {
  text-align: left;
}

.gda-desc {
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 8px 0;
  font-weight: 400;
}

/* 출시 예정 텍스트 */
.gda-release {
  font-size: 13px;
  color: #888888; /* 약간 어두운 회색 처리 */
  margin: 0;
}

/* 전체 컨테이너 및 폰트 설정 */
.solution-wrapper {
  color: #ffffff;
  font-family: 'Pretendard', -apple-system, sans-serif;
  padding: 80px 20px;
  box-sizing: border-box;
}

.solution-title {
  text-align: center;
  font-size: 36px;
  font-weight: 800;
  margin: 0 0 60px 0;
  letter-spacing: -0.5px;
}

.solution-layout {
  display: flex;
  align-items: stretch; 
  justify-content: center;
  max-width: 1000px;
  margin: 0 auto;
  gap: 20px;
}

/* 좌측 이미지 영역 */
.solution-visual-area {
  flex: 1; /* 비율에 따라 유동적으로 크기 조절 */
  display: flex;
  align-items: center;
  justify-content: flex-end; /* 이미지를 우측(텍스트 쪽)으로 밀착 */
}

/* 이미지가 부모 요소를 넘어가지 않도록 방어 코드 추가 */
.solution-image {
  width: 100%;
  max-width: 320px; /* 원본 이미지 크기에 맞춰 조절하세요 */
  height: auto;
  display: block;
  padding-top:30px;
}

/* 우측 텍스트 리스트 영역 */
.solution-text-area {
  flex: 1.2; /* 텍스트 영역이 조금 더 넓은 공간을 차지하도록 설정 */
  display: flex;
  flex-direction: column;
  justify-content: space-evenly; /* 아이템들을 세로로 균등하게 분배 */

}

/* 개별 텍스트 항목 */
.solution-item {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* 그래픽과 텍스트를 잇는 선과 점 */
.connector {
  display: flex;
  align-items: center;
}

.connector .line {
  width: 40px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.4);
}

.connector .dot {
  width: 8px;
  height: 8px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5); /* 점에 살짝 빛나는 효과 */
}

/* 텍스트 내용 정렬 */
.info {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 20px;
}

/* 제목(UI, 오케스트레이션 등) */
.name {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  min-width: 130px; /* 제목 길이가 달라도 설명 텍스트의 시작선을 맞추기 위해 고정 최소 너비 부여 */
  word-break: keep-all;
}

/* 설명 텍스트 */
.desc {
  font-size: 14px;
  color: #aaaaaa;
  margin: 0;
  line-height: 1.4;
  word-break: keep-all;
}

/* Float 해제를 위한 Clearfix (필수) */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* 전체 컨테이너 */
.architecture-container {
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* 개별 프로세스 박스 (반응형 대비 핵심 부분) */
.step-box {
  float: left;
  width: 22%; /* 4개의 박스 = 88% */
  height: 370px; /* Float 레이아웃이 엇갈리지 않도록 고정 높이 부여 */
  border: 2px solid #ffffff;
  border-radius: 12px;
  box-sizing: border-box;
  padding: 30px 15px;
  text-align: center;
}

/* 박스 사이의 보라색 화살표 */
.step-arrow {
  float: left;
  width: 4%; /* 3개의 화살표 = 12% (총합 100%) */
  height: 370px;
  box-sizing: border-box;
  color: #8c5cd6; /* 보라색 */
  font-size: 50px;
  font-weight: 900;
  line-height: 370px; /* 세로 중앙 정렬을 위한 꼼수 */
  text-align: center;
}

/* 공통 텍스트 스타일 */
.box-title {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 30px;
  color:#fff;
}

.box-content {
  margin-top: 20px;
}

.text-item {
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 20px 0;
  color: #fff;
  word-break: keep-all;
}

.sub-text {
  font-size: 13px;
  color: #aaaaaa;
}

/* 간격이 넓은 박스(오케스트레이션, 지식/데이터)용 클래스 */
.spacing-large .text-item {
  margin-bottom: 45px;
}

/* UI 박스 내부 - 아래 화살표 */
.down-arrow {
  font-size: 24px;
  margin: 15px 0;
  font-weight: bold;
  color:#fff;
}

/* UI 박스 내부 - 결과 도출 브라우저 창 */
.browser-window {
  border: 1px solid #ffffff;
  border-radius: 8px;
  margin: 0 auto;
  width: 90%;
  text-align: left;
}

.browser-header {
  border-bottom: 1px solid #ffffff;
  padding: 8px 10px;
}

.browser-header .dot {
  float: left;
  width: 6px;
  height: 6px;
  background-color: #ffffff;
  border-radius: 50%;
  margin-right: 5px;
  margin-top: 6px;
}

.browser-header .close-btn {
  float: right;
  font-size: 16px;
  line-height: 1;
  color:#fff;
}

.browser-body {
  padding: 15px 10px;
  text-align: center;
  font-size: 14px;
  color:#fff;
}

/* LLM 박스 내부 - GPU 목록 */
.gpu-item {
  background-color: #d9d9d9;
  color: #333333;
  padding: 14px 5px;
  border-radius: 6px;
  margin-bottom: 15px;
  font-size: 14px;
}

.gpu-name {
  font-weight: 800;
  margin-right: 8px;
}

/* 푸터 전체 영역 */
.site-footer {
  background-color: #000000; /* 완전한 검은색 배경 */
  color: #ffffff;
  font-family: 'Pretendard', -apple-system, sans-serif;
  padding: 50px 20px; /* 위아래 여백을 넉넉하게 */
}

/* 내부 레이아웃 컨테이너 */
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center; /* 로고와 텍스트 영역을 세로 중앙으로 정렬 */
  gap: 80px; /* 좌측 로고와 우측 텍스트 사이의 간격 */
}

/* 좌측 로고 이미지 */
.footer-logo img {
  width: 180px; /* 준비하신 로고 크기에 맞춰 조절하세요 */
  height: auto;
  display: block;
}

/* 우측 텍스트 정보 영역 전체 */
.footer-info {
  flex: 1; /* 남은 우측 가로 공간을 모두 차지하도록 설정 */
  display: flex;
  flex-direction: column;
}

/* 상단 링크 (이용약관 등) */
.footer-links {
  display: flex;
  gap: 20px; /* 링크 사이 간격 */
  margin-bottom: 12px;
}

.footer-links a {
  color: #ffffff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700; /* 글씨를 굵게 */
}

.footer-links a:hover {
  text-decoration: underline; /* 마우스 올렸을 때 밑줄 효과 (선택사항) */
}

/* 가로 구분선 */
.footer-divider {
  width: 100%;
  height: 1px;
  background-color: #444444; /* 어두운 회색 선 */
  margin-bottom: 15px;
}

/* 이메일 연락처 */
.footer-contact {
  display: flex;
  gap: 30px; /* 연락처 항목 사이 간격 */
  font-size: 14px;
  color: #cccccc; /* 살짝 밝은 회색 */
  margin-bottom: 50px; /* 아래 카피라이트 텍스트와의 간격을 넓게 설정 */
}

/* 하단 카피라이트 */
.footer-copyright {
  margin: 0;
  font-size: 14px;
  color: #888888; /* 조금 더 어두운 회색 */
}

@media screen and (max-width:1700px){
	.prev-btn { left: 20%; } /* 왼쪽 화살표 위치 */
	.next-btn { right: 20%; }
}

@media screen and (max-width:900px){
	.box{
		height:30px;
	}
	
	main{
		height:500px;
	}
	
	main .slide_logo{
		width:130px;
	}
	
	main .slide_logo a{
		width:100%;
		height:auto;
	}
	
	main .slide_logo a img{
		height:auto;
	}
	

		
	.prev-btn { left: 5%; } /* 왼쪽 화살표 위치 */
	.next-btn { right: 5%; }
	
	section{
		width:80%;
		margin:80px auto;
	}
	
	.game-header {
    flex-wrap: wrap; 
    gap: 20px; /* 모바일에서는 간격을 조금 줄여줍니다 */
  }

  /* 2. 시각적 배치 순서(order) 변경 */
  .game-icon {
    order: 1; /* 제일 첫 번째로 배치 */
  }

  .store-buttons {
    order: 2; /* 두 번째로 배치 (아이콘 옆으로 옴) */
    margin-left: auto; /* 여백을 최대로 밀어내어 버튼을 우측 끝으로 딱 붙임 */
    padding-top: 0;
  }

  .game-info {
    order: 3; /* 세 번째로 배치 (맨 아래로 이동) */
    flex: 0 0 100%; /* 가로폭을 100%로 강제하여 무조건 다음 줄로 넘김 */
    padding-top: 10px;
  }

  .game-icon img {
    width: 120px;
    height: 120px;
    border-radius: 24px;
  }
  
  .store-btn img {
    width: 120px; 
  }
  
  .slide-item {
  flex: 0 0 calc(70% - 18px); /* 한 화면에 약 4개가 보이도록 너비 설정 */
  aspect-ratio: 3 / 4; /* 세로형 스크린샷 비율 */
  background-color: #d9d9d9;
  scroll-snap-align: start; /* 스크롤이 멈출 때 왼쪽 정렬 */
}

.gda-container{
	padding:50px 20px;
}

.gda-bottom-section {
    flex-direction: column;
    gap: 40px; 
  }
  
.gda-vertical-line {
	display:none;
}

.desc {
    display: none;
  }

  .solution-visual-area,
  .solution-text-area {
    flex: initial; 
  }

  .name {
    min-width: auto;
  }

  .info {
    flex: initial;
  }

.step-box {
    float: none; /* 가로 정렬 해제 */
    width: 80%; /* 모바일 화면에 꽉 차게 변경 */
    height: auto; /* 고정 높이(370px)를 해제하여 내용물에 맞게 늘어나도록 함 */
	margin:10px auto;
  }

  /* 2. 화살표 회전 및 정렬 */
  .step-arrow {
    float: none;
    width: 100%;
    height: 60px; /* 세로 높이를 적절히 줄임 */
    line-height: 60px; /* 텍스트 세로 중앙 정렬 맞춤 */
    transform: rotate(90deg); /* ★ 오른쪽 화살표(»)를 90도 회전시켜 아래쪽 화살표로 변경! */
    margin-bottom: 10px;
  }
  
  .footer-container {
    flex-direction: column;
    align-items: flex-start; /* 좌측 정렬 (원하시면 center로 변경 가능) */
    gap: 30px; /* 로고와 텍스트 사이의 너무 넓은 간격을 줄여줍니다 */
  }

  /* 2. 우측 텍스트 영역이 화면 가로 너비를 꽉 채우도록 설정 (구분선을 위해) */
  .footer-info {
    width: 100%;
  }

  /* 3. 이메일 연락처 세로로 배치 (화면 밖으로 글자가 나가는 것 방지) */
  .footer-contact {
    flex-direction: column;
    gap: 10px; /* 이메일 사이의 간격을 좁혀줍니다 */
    margin-bottom: 30px; /* 모바일에서는 아래쪽 여백을 조금 줄여줍니다 */
  }

  /* 4. 모바일 화면에 맞춰 로고 크기 살짝 축소 (선택 사항) */
  .footer-logo img {
    width: 140px; 
  }
  
  .slider-wrapper {
    height: 400px; 
  }
  .slider-track {
    height: 350px; 
  }


  .slide {
    width: 100%;
	border-radius: 0px;
  }

  /* 3. 중앙 활성 슬라이드 (원래 자리 유지) */
  .slide.active {
    transform: translate(-50%, -50%) scale(1);
  }

  /* 4. 왼쪽 슬라이드 (화면 왼쪽 밖으로 완전히 밀어내고 투명하게 처리) */
  .slide.prev {
    left: -100%; /* 화면 밖으로 보냄 */
    transform: translate(0, -50%) scale(1);
    opacity: 0; 
  }

  /* 5. 오른쪽 슬라이드 (화면 오른쪽 밖으로 완전히 밀어내고 투명하게 처리) */
  .slide.next {
    left: 100%; /* 화면 밖으로 보냄 */
    transform: translate(0, -50%) scale(1);
    opacity: 0; 
  }

  /* 6. 화살표 버튼을 화면 양쪽 끝으로 이동시키고 크기 축소 */
  .nav-btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  .prev-btn { left: 10px; }
  .next-btn { right: 10px; }
  
  /* 7. 하단 네비게이션(점) 간격 살짝 축소 */
  .slider-pagination {
    bottom: 10px;
    gap: 10px;
  }
  
  .game-title{
	  font-size: 28px;
  }
  
  .game-genre{
	  font-size: 12px;
  }
  
  .game-desc{
	  font-size: 15px
  }
  
  .gda-slogan{
	  font-size: 18px;
  }
  
  .gda-logo-img{
	  width:80%;
	  margin:0 auto;
  }
  
  .gda-question{
	  font-size: 25px;
  }
  
  .gda-desc{
	  font-size: 14px;
  }
  
}

@media screen and (max-width:400px){
	.connector{
		display:none;
	}
}