@charset "utf-8";

/*** Page Container ***/
.container {
  overflow: hidden;
}

/** Game Tabs **/
.page-tabs {
	display: flex;
	gap: 14px;
	margin-bottom: 30px;
}

.page-tabs a {
	display: block;
	padding: 16px 24px;
	border-radius: 999px;
	background-color: #FFF;
	border: 1px solid #D8D8D8;
	color: var(--gray500);
	font-size: 16px;
	transition: background .12s ease,  border .12s ease;
}

.page-tabs a:hover {
	background-color: var(--gray100);
	border-color: var(--gray100);
}

.page-tabs a.active {
	color: #FFF;
	font-weight: 500;
	background-color: var(--dark);
	border-color:  var(--dark);
}

/*** 게임 디스플레이 컨트롤 ***/
.game-section {
  padding: 40px 0 180px 0;
  max-width: 1200px;
  margin: 0 auto;
}

.game-bar-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.game-display-size {
  display: flex;
  align-items: center;
  gap: 24px;
}

.game-display-total {
  color: var(--gray500);
  font-size: 15px;
  white-space: nowrap;
  padding-left: 8px;
}

.game-display-total em {
  display: inline-block;
  color: var(--primary);
  font-weight: 600;
  margin: 0 3px;
}

.game-display-count {
  display: flex;
  align-items: center;
}

.game-display-count button {
  color: var(--gray500);
  font-size: 15px;
  white-space: nowrap;
}

.game-display-count button.active {
  color: var(--dark);
}

.game-display-count button.active::before {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: url('../images/content/ico-check-dark.svg') 50%;
  content: "";
  margin-right: 5px;
}

.game-display-count i {
  display: block;
  width: 1px;
  height: 10px;
  margin: 0 10px;
  background-color: var(--gray300);
}

.game-display-selector {
  display: flex;
  align-items: center;
  gap: 16px;
}

.group-selector {
	display: flex;
  align-items: center;
  gap: 16px;
}

.btn-reset {
  font-size: 12px;
  padding: 8px;
  white-space: nowrap;
}

.btn-reset:active {
  opacity: .8;
}

.btn-reset::before {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('../images/content/ico-refresh.svg') 50%;
  content: "";
  margin-right: 6px;
  vertical-align: middle;
}

select.display-selector {
  font-size: 14px;
  padding: 13px 36px 13px 16px;
  background: var(--gray100) url('../images/content/ico-arrow-selector.svg') calc(100% - 14px) 50%;
  border-radius: 999px;
  border: none;
  appearance: none;
  cursor: pointer;
}

/** 팝콘게임즈 소개 **/
.page-section-about {
	padding: 120px 0 180px 0;
	max-width: 1200px;
	margin: 0 auto;
}

.wide-row-flex {
	display: flex;
	justify-content: space-between;
}

.about-slogun {
	display: flex;
	flex-direction: column;
	gap: 6px;
	top: 60px;
}

.about-slogun:lang(en) {
  gap: 0;
}

.about-slogun span {
	font-size: 64px;
	font-weight: 700;
}

.about-slogun span:lang(en) {
  white-space: nowrap;
}

.about-shape {
	right: -200px;
}

.about-greeting {
	padding-left: 50px;
	border-left: 1px solid var(--dark);
}

.about-greeting p {
	font-size: 20px;
	line-height: 1.6em;
	margin-bottom: 2.0em;
	word-break: keep-all;
}

.about-greeting p.about-sign {
	font-size: 16px;
}

.about-sign em {
	display: block;
	color: var(--gray500);
}

.page-section-map {
	padding: 0 0 180px 0;
	max-width: 1200px;
	margin: 0 auto;
}

.page-section-map h3 {
	font-size: 32px;
	font-weight: 700;
	text-align: center;
	margin-bottom: 1.8em;
}

.map-office {
  width: 100%;
  aspect-ratio: 8 / 4.5;
  background-color: #EEE;
}

.map-office .cont {
  display: none;
}

.map-office .root_daum_roughmap .wrap_map {
  height: calc(100% - 32px);
}

.address-office {
	display: flex;
	flex-direction: column;
	margin-top: 80px;
}

.address-office p {
	font-size: 20px;
	text-align: center;
}

.address-office p span {
	display: block;
	color: var(--gray500);
	font-size: 16px;
	margin-bottom: 1.0em;
}

/*** BBS ***/
.page-bbs {
	padding: 60px 0 180px 0;
	margin: 0 auto;
	max-width: 1200px;
}

.bbs-heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-bottom: 35px;
}

.bbs-heading p {
	font-size: 20px;
}

/*** Contact Form ***/
.form-wrapper {
  max-width: 640px;
  margin: 0 auto;
  padding: 60px 0 180px 0;
}

.form-copy h2, .form-copy h2 div {
  color: var(--primary);
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  margin: .6em 0;
}

.form-copy p {
  color: var(--gray400);
  font-size: 18px;
  text-align: center;
}

.form-agree-box {
  margin: 0;
  padding: 24px;
  background-color: var(--gray100);
  overflow-x: hidden;
  overflow-Y: auto;
  border-radius: 16px;
}

.form-agree-box > h3 {
  color: var(--gray500);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 1.0em;
}

.form-agree-box > ul {
  margin: 0 5px;
}

.form-agree-box > ul > li {
  margin-bottom: 0.6em;
  padding-left: 12px;
}

.form-agree-box > ul > li > p {
  color: var(--gray500);
  font-size: 14px;
}

.form-agree-box > ul > li:last-child {
  margin-bottom: 0;
}

.form-agree-box > ul > li::before {
  position: absolute;
  top: 7px;
  left: 0;
  display: block;
  width: 4px;
  height: 4px;
  background-color: var(--gray500);
  border-radius: 4px;
  content: "";
}

.form-footer {
  color: var(--gray400);
  font-size: 12px;
  text-align: center;
  margin-top: 60px;
}

/*** 404 ***/
.page-error {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 30px;
	padding: 80px 0;
	margin: 0 auto;
	max-width: 1200px;
}

.error-txt {
	font-size: 28px;
	text-align: center;
}

.error-image {
	max-width: 380px;
}

/*** Pagination ***/
.game-pagination {
	display: flex;
	gap: 12px;
	justify-content: center;
	align-items: center;
	margin-top: 80px;
}

.page-numbers {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 35px;
	height: 35px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 500;
}

.page-numbers.dots {
	width: auto;
}

.page-numbers:hover {
	background-color: var(--gray200);
}

.page-numbers.current {
	color: #FFF;
	background-color: var(--dark);
}

.page-numbers.prev {
	background: var(--gray100) url('../images/ico-prev-arrow.svg') 50%;
}

.page-numbers.next {
	background: var(--gray100) url('../images/ico-next-arrow.svg') 50%;
}

@media screen and (max-width:1280px) {
	/* About */
	.page-section-about {
		padding: 80px 16px 120px 16px;
	}

	.about-slogun span {
		font-size: 52px;
	}
}

@media screen and (max-width:1024px) {
	/** About **/
	.about-slogun span {
		font-size: 42px;
	}

	.about-shape {
		width: 60%;
		right: -10%;
	}

	.about-greeting {
		padding-left: 25px;
	}

	.about-greeting p {
		font-size: 16px;
		margin-bottom: 1.5em;
	}

	.about-greeting p.about-sign {
		font-size: 14px;
	}

	/** Game **/
	.game-section {
		padding: 25px 0 120px 0;
	}

	.game-bar-display {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 18px;
	}

	.game-display-size {
		width: 100%;
		justify-content: space-between;
	}

	.game-display-total {
		font-size: 14px;
	}

	.game-display-count button {
		font-size: 13px;
	}

	.game-display-selector {
		width: 100%;
		justify-content: space-between;
	}

	.game-display-count i {
		height: 9px;
		margin: 0 6px;
	}

	select.display-selector {
		font-size: 13px;
	}

	/** About **/
	.page-section-map {
		padding-bottom: 130px;
	}
}

@media screen and (max-width:800px) {
	/** About **/
	.about-slogun span {
		font-size: 32px;
	}
}

@media screen and (max-width:640px) {
	/** About **/
	.page-section-about {
		padding: 40px 0 40px 0;
	}

	.wide-row-flex {
		align-items: center;
		margin-bottom: 30px;
	}

	.about-shape {
		width: 60%;
		right: -12%;
	}

	.about-shape:lang(en) {
		width: 60%;
		right: -12%;
	}

	.about-slogun {
		top: 0;
		gap: 4px;
		flex-shrink: 0;
	}

	.about-greeting {
		padding-left: 15px;
	}

	.about-greeting p {
		font-size: 15px;
	}

	.about-greeting p br {
		display: none;
	}

	.about-greeting p.about-sign {
		font-size: 13px;
	}

	.address-office p span {
		font-size: 13px;
		margin-bottom: 0.6em;
	}

	.page-section-map h3 {
		font-size: 22px;
		margin-bottom: 1.0em;
	}

	.map-office {
		aspect-ratio: 8 / 6;
		width: 100vw;
		margin-left: -16px;
	}

	.address-office {
		margin-top: 30px;
	}

	.address-office p {
		font-size: 15px;
	}

	/** Game **/
	.page-tabs {
		gap: 8px;
		margin-bottom: 20px;
	}

	.page-tabs a {
		font-size: 13px;
		padding: 10px 16px;
	}

	.game-bar-display {
		margin-bottom: 24px;
	}

	.game-display-selector {
		width: calc(100% + 16px);
		gap: 8px;
	}

	.game-display-selector::before {
		display: none;
		position: absolute;
		top: 0;
		right: 0;
		width: 50px;
		height: 100%;		
		background: linear-gradient(to left, transparent, #ffffff);
		content: "";
		z-index: 1;
	}

	.group-selector {
		padding-right: 16px;
		overflow-x: auto;
		gap: 8px;
    &::-webkit-scrollbar {
        display: none;
    }
    scrollbar-width: none;
	}

	.game-pagination {
		margin-top: 50px;
	}

	.page-numbers {
		width: 30px;
		height: 30px;
		font-size: 14px;
	}

	/** BBS **/
	.page-bbs, .form-wrapper, .page-error {
		padding: 30px 0 120px 0;
	}

	.bbs-heading {
		gap: 12px;
		margin-bottom: 25px;
	}

	.bbs-heading p {
		font-size: 14px;
	}

	.bbs-heading > i {
		width: 32px;
	}

	/** Consult **/
	.form-agree-box {
		padding: 16px;
		border-radius: 12px;
	}

	.form-agree-box > h3 {
		font-size: 13px;
		margin-bottom: 0.6em;
	}

	.form-agree-box > ul > li {
		padding-left: 0;
		margin-bottom: 0.3em;
	}

	.form-agree-box > ul > li > p {
		font-size: 12px;
	}

	/*** 404 ***/
	.error-image {
		padding: 24px 36px;
	}

	.error-txt {
		font-size: 18px;
	}	

}

@media screen and (max-width:480px) {
	.about-slogun span {
		font-size: 24px;
	}

	.about-slogun span:lang(en) {
		font-size: 21px;
	}

	/** Games **/
	.page-tabs {
		top: -4px;
		left: -4px;
	}

	.game-bar-display {
		margin-bottom: 24px;
	}

	.game-display-selector {
		width: calc(100% + 24px);
		left: -8px;
	}

	select.display-selector {
		font-size: 12px;
		padding: 10px 36px 10px 14px;
	}

	.game-display-total {
		padding-left: 0;
	}
	
	
}