@charset "utf-8";

/* Section
--------------------------------------------- */
.head-section {
	height: 750px;
	background-color: #F4F7FA;
}

.head-wrap {
	max-width: 1440px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	height: 100%;
}

.head-wrap.bg-sales {
	background: url(../images/content/top-sales.png) right 90%;
}

.head-section.bg-reserve {
	background-color: #fff2f0;
}

.head-section.bg-reserve .head-wrap {
	background: url(../images/content/top-reserve.png) right 100%;
}

.head-wrap.bg-consult {
	background: url(../images/content/top-consult.png) right 100%;
}

.head-wrap.bg-access {
	background: url(../images/content/top-access.png) right 100%;
}

.head-section.bg-point {
	background-color: #f4ffea;
}

.head-section.bg-point .head-wrap {
	background: url(../images/content/top-point.png) right 0;
}

.head-section.bg-group {
	background-color: #f6f1ff;
}

.head-section.bg-group .head-wrap {
	background: url(../images/content/top-group.png) right 65%;
}

.head-wrap.bg-message {
	background: url(../images/content/top-message.png) right 100%;
}

.head-section.bg-pay {
	background-color: #F2E0B2;
}

.head-section.bg-pay .head-wrap {
	background: url(../images/content/top-pay.png) right 100%;
}

.head-section.bg-online {
	background-color: #edfffe;
}

.head-section.bg-online .head-wrap {
	background: url(../images/content/top-online.png) right 100%;
}

.head-section.bg-number {
	background-color: #E5EEFB;
}

.head-section.bg-number .head-wrap {
	background: url(../images/content/top-number.png) 100% bottom;
}

.head-section.bg-bank {
	background-color: #E8E8F1;
}

.head-section.bg-bank .head-wrap {
	background: url(../images/content/top-bank.png) right 80%;
}

.head-wrap.bg-download {
	background: url(../images/content/top-download.png) right 100%;
}

.head-content {
	margin-top: 48px;
}

section.content {
	overflow: hidden;
}

section.form {
	padding-top: 90px;
}

section.green {
	background-color: #F5FBF3;
}

section.gray {
	background-color: #F9FAFB;
}

.content-wrap {
	max-width: 1440px;
	margin: 0 auto;
}

.v-center {
	padding: 150px 0 100px 0;
	text-align: center;
}

.v-center-lg {
	padding: 200px 0 150px 0;
}

.v-bottom {
	padding-top: 150px;
	text-align: center;
}

.v-column {
	padding: 100px 0;
	display: flex;
	align-items: center;
	gap: 24px;
}

.v-column-2 {
	max-width: 50%;
	flex-basis: 50%;
}

.v-column-right {
	text-align: right;
	max-width: 50%;
	flex-basis: 50%;
}

.v-column-left {
	text-align: left;
	max-width: 50%;
	flex-basis: 50%;
}

.v-between {
	display: flex;
	gap: 24px;
}

.v-tab {
	padding-top: 80px;
	margin-bottom: -40px;
	z-index: 1;
}

.v-between-middle {
	display: flex;
	justify-content: space-between;
	max-width: 1010px;
	width: 100%;
	margin: 30px auto;
	gap: 24px;
}

.v-form {
	padding: 80px 0 120px 0;
	text-align: center;
}

.v-download {
	padding: 100px 0;
}

.middle-container {
	max-width: 1010px;
	margin: 80px auto 0 auto;
}

.form-container {
	max-width: 500px;
	margin: 80px auto 0 auto;
}

.down-container {
	margin: 0 auto 100px auto;
}

.down-container:last-child {
	margin-bottom: 0;
}

/* Typography
--------------------------------------------- */
.head-xl {
	color: var(--dark);
	font-size: 62px;
	font-weight: 600;
	line-height: 1.3em;
	margin-bottom: 0.6em;
	word-break: keep-all;
}

.head-event {
	color: var(--primary);
	font-size: 36px;
	font-weight: 600;
	line-height: 1.35em;
	word-break: keep-all;
}

.head-lg {
	color: var(--dark);
	font-size: 48px;
	font-weight: 600;
	line-height: 1.35em;
	margin-bottom: 0.65em;
	word-break: keep-all;
}

.head-md {
	color: var(--dark);
	font-size: 32px;
	font-weight: 600;
	line-height: 1.35em;
	margin-bottom: 0.65em;
}

.head-md.mark {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 48px;
}

.head-center {
	color: var(--dark);
	font-size: 32px;
	font-weight: 600;
	margin-bottom: 0.65em;
	text-align: center;
}

em.accent {
	color: var(--primary);
}

.head-top-eng {
	color: #A1ACBC;
	font-size: 18px;
	letter-spacing: 0.05em;
	margin-bottom: 1.0em;
	opacity: 0;
	transform: translateY(100%);
}

.head-desc {
	color: var(--text);
	font-size: 20px;
	line-height: 1.6em;
	margin-bottom: 1.2em;
	word-break: keep-all;
}

.head-desc.xs {
	font-size: 16px;
}

.head-path {
	display: flex;
	align-items: center;
	margin-bottom: 38px;
}

.head-path span {
	display: inline-block;
	color: var(--dark);
	font-size: 18px;
	font-weight: 600;
}

.head-path span.cat {
	font-weight: 400;
}

.head-path span.cat::after {
	display: inline-block;
	width: 0; 
  height: 0; 
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;  
  border-left: 4px solid var(--dark);
  content: "";
  margin: 0 8px;
  vertical-align: 2px;
}

.head-content .head-xl {
	margin-bottom: 90px;
}

.link-text {
	display: block;
	color: #2F80ED;
	font-size: 20px;
	text-decoration: underline;
}

.image-terminal figcaption {
	color: var(--text);
	margin-top: 12px;
}

/* Home
--------------------------------------------- */
.intro-content a {
	margin-top: 110px;
}

.intro-screen {
	margin-right: -68px;
}

.intro-column {
	display: flex;
	justify-content: space-between;
	gap: 24px;
}

.intro-content {
	flex-shrink: 0;
}

.intro-screen {
	margin-right: 0;
	opacity: 0;
	transform: translateY(5%);
	transition: var(--moveTop);
	transition-delay: .2s;
}

.intro-screen.visible {
  opacity: 1;
  transform: translateY(0);
}

.process-column {
	display: flex;
	justify-content: space-between;
	gap: 24px;
}

.process-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex-shrink: 0;
	max-width: 50%;
	flex-basis: 50%;
}

.process-content-title {
	margin-left: 200px;
	margin-bottom: 160px;
}

.process-content-title p {
	text-align: left;
}

.process-content-title p.head-lg {
	line-height: 1.0em;
}

.process-step {
	display: flex;
	padding: 0 92px;
	gap: 38px;
	max-width: 50%;
	flex-basis: 50%;
	flex-direction: column;
	margin-bottom: 48px;
}

.step-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24px 28px;
	border-radius: 16px;
	background-color: #FFF;
	box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.1);
	transition: all .2s ease;
}

.step-bar > div {
	display: flex;
	color: var(--dark);
	font-size: 20px;
	align-items: center;
	gap: 14px;
	text-align: left;
}

.step-bar > div em {
	display: flex;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	color: #FFF;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.0em;
	background-color: var(--primary);
	border-radius: 50%;
	align-items: center;
	justify-content: center;
}

.step-bar:nth-child(2n) > div em {
	background-color: var(--dark);
}

.banner-free {
  margin-bottom: 50px;
}

.pricing-column {
	display: flex;
	gap: 0 50px;
}

.pricing-guide {
	margin-left: 8px;
	margin-top: 32px;
}

.pricing-guide li {
	color: var(--dark);
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 0.6em;
	word-break: keep-all;
	text-align: left;
}

.pricing-legal {
	margin-top: 80px;
}

.legal-title {
	color: var(--dark);
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 28px;
}

.member-cost {
	width: 100%;
}

.member-cost th, .member-cost td {
	font-size: 14px;
	text-align: right;
	padding: 16px 24px;
	white-space: nowrap;
}

.member-cost th:first-child, .member-cost td:first-child {
	text-align: center;
}

.member-cost th {
	color: #FFF;
	background-color: var(--dark);
}

.member-cost td {
	color: var(--dark);
	border-bottom: 1px solid #CCD8EA;
}

.hero-slider.slick-slider .slick-track {
  display: flex;
}

/* Page
--------------------------------------------- */
.has-tile .tile {
	margin-top: 140px;
}

.has-screen .screen {
	margin-top: 125px;
}

.has-screen .tablet {
	margin-top: 80px;
}

.has-btn .screen {
	margin-top: 100px;
}

.screen-bank {
	margin-bottom: 100px;
}

.has-btn .btn {
	margin-top: 60px;
}

/** 결제 **/
.pos-process {
	display: flex;
	justify-content: center;
	gap: 0 85px;
	margin-bottom: 50px;
}

.pos-process-ico img {
	margin-bottom: 30px;
}

.pos-process-ico p {
	color: var(--dark);
	font-size: 20px;
	font-weight: 600;
}

.pay-charge {
	padding-left: 16px;
	border-left: 1px solid var(--dark);
}

.pay-charge p {
	color: var(--text);
	font-size: 13px;
	margin-bottom: 0.5em;
}

.pay-charge p.bold {
	color: var(--dark);
	font-weight: 600;
	margin-bottom: 1.0em;
}

/** DOWNLOAD **/
.card-down-group .card-down:not(:last-child) {
	margin-bottom: 12px;
}

.card-down-group .card-down:nth-child(2n) {
	background-color: #F4F7FA;
}

/* Responesive
--------------------------------------------- */

/** Notebook 1536px **/
@media screen and (max-width: 1536px) {
  /** Section **/
  .head-section {
  	padding-left: 32px;
  }

  .head-content {
  	padding-right: 32px;
  }

  section.content {
  	padding-left: 32px;
  	padding-right: 32px;
  }

}

/** HD 1280px **/
@media screen and (max-width: 1280px) {
	/* Head */
	.head-wrap.bg-sales, 
	.head-wrap.bg-reserve, 
	.head-wrap.bg-access {
		background-size: 50% !important;
	}

	/* Home */
  .intro-column {
  	align-items: center;
  }

  .process-content {
  	max-width: 40%;
  	flex-basis: 40%;
  	justify-content: space-between;
  }

  .process-content-title {
  	margin-left: 0;
  }

  .process-content img {
  	margin-left: -80px;
  }

  .process-step {
  	padding: 0;
  	max-width: 60%;
  	flex-basis: 60%;
  }
}

/** Apple iPad Pro 12.9 1024px **/
@media screen and (max-width: 1024px) {
	/** Section **/
	.head-wrap {
		background-size: 50% !important;
	}

  .head-section {
  	height: 600px;
  }

  .head-path {
  	margin-bottom: 18px;
  }

  .head-path span {
  	font-size: 14px;
  }

  /** Typography **/
  .head-xl {
  	font-size: 48px;
  }

  .head-content .head-xl {
  	margin-bottom: 1.0em;
  }

	/* FAQ, Form */
	section.form {
		padding-top: 24px;
	}

	/* Home */
	.v-center-lg {
		padding: 120px 0;
	}

	.intro-column {
		flex-direction: column;
		gap: 80px;
	}

	.intro-content, .intro-screen {
		text-align: center;
	}

	.intro-content a {
		margin-top: 48px;
	}

	.intro-screen img {
		width: 70%;
	}

	.over-x-table {
		overflow-x: auto;
	}

}

/** Tablet Apple iPad Pro 11 834px **/
@media screen and (max-width: 834px) {
  /* Section */
  .head-section {
  	height: 500px;
  }

  .v-center {
  	padding: 80px 0;
  }

  .v-center-lg {
  	padding-bottom: 0;
  }

  .v-between {
  	flex-direction: column;
  	gap: 50px;
  }

  .v-between .v-column-2, 
  .v-between-middle .v-column-2,
  .v-between-middle .v-column-right {
  	max-width: 100%;
  	flex-basis: 100%;
  }

  .v-between .v-column-2 img {
  	max-width: 80%;
  }

  .v-between-middle {
  	flex-direction: column;
  	gap: 50px;
  	margin: 0;
  }

  .v-between-middle .v-column-right {
  	text-align: center;
  }

  .v-download {
  	padding: 40px 0;	
  }

  .down-container {
  	margin-bottom: 62px;
  }

  .has-screen .screen {
  	margin-top: 80px;
  }

  .has-btn .screen {
  	margin-top: 60px;
  }

  .screen-bank {
  	margin-bottom: 60px;
  }

  .has-btn .btn {
  	margin-top: 30px;
  }

  .has-screen .tablet {
  	margin-top: 40px;
  }

  .has-tile .tile {
  	margin-top: 80px;
  	margin-bottom: 0;
  }

  /** Typography **/
  .head-lg {
  	font-size: 38px;
  }

  .head-md {
  	font-size: 26px;
  	margin-bottom: 0.45em;
  }

  .head-desc {
  	font-size: 16px;
  }

  .head-md.mark {
  	padding: 0 0.2em;
  	margin-bottom: 1.0em;
  	gap: 0.8em;
  }

  .head-md.mark img {
  	height: 1.2em;
  }

  .head-desc br {
  	display: none;
  }

  /* Home */
  .intro-screen {

  }

  .process-step {
  	gap: 24px 0;
  }

  .step-bar {
  	padding: 18px 18px;
  }

	.step-bar > div {
		font-size: 16px;
		gap: .6em;
	}

	.step-bar > div em {
		width: 24px;
		height: 24px;
		font-size: 12px
	}

	.step-bar img {
		width: 24px;
	}

  /** Pay **/
  .pos-process {
  	gap: 0 52px;
  }

  .pos-process-ico img {
  	margin-bottom: 20px;
  }

  .pos-process-ico p {
  	font-size: 16px;
  }
}

/** Tablet 640px or landscape **/
@media screen and (max-width: 640px) {
	/* Home */
	.v-center-lg {
		padding-top: 80px;
	}

	.intro-column {
		gap: 62px;
	}

	.intro-content a {
		margin-top: 28px
	}

	.banner-free {
    margin-bottom: 32px;
  }

	/** Section **/
	.head-section {
		height: 380px;
		padding-left: 18px;
	}

  section.content {
  	padding-left: 18px;
  	padding-right: 18px;
  }

  .v-bottom {
  	padding-top: 80px;
  }

  .v-column {
  	flex-direction: column;
  	padding: 80px 0;
  }

  .v-column.reverse {
  	flex-direction: column-reverse;
  	padding-top: 0;
  }

  .v-column-2, .v-column-right {
  	max-width: 100%;
  	flex-basis: 100%;
  	text-align: center;
  }

  .screen img {
  	max-width: 80%;
  }

  .has-btn .btn {  	
		margin-top: 38px;
  }

  .v-column-2 img, .v-column-right img {
  	max-width: 60%;
  }

  /** Typography **/ 
  .head-xl {
		font-size: 32px;
	}

	.head-top-eng {
		font-size: 14px;
	}
  
  .head-lg br {
  	display: none;
  }

  .head-lg.keep-br br {
  	display: block;
  }

  .head-center {
  	font-size: 28px;
  	margin-bottom: 0.3em;
  }

  .image-terminal figcaption {
		color: var(--text);
		font-size: 13px;
		margin-top: 12px;
	}

	/* Home */
	.intro-screen img {
		width: 80%;
	}

	.process-column {
		flex-direction: column;
	}

	.process-content {
		max-width: 100%;
		flex-basis: 100%;
		align-items: center;
	}

	.process-content-title {
		margin-bottom: 0;
	}

	.process-content-title .head-lg {
		margin-bottom: 0.3em;
	}

	.process-content-title p {
		text-align: center;
	}

	.process-content img {
		display: none;
	}

	.process-step {
		max-width: 100%;
		flex-basis: 100%;
	}

  /** Pay **/
  .over-x {
  	width: calc(100% + 36px);
  	left: -18px;
  	padding: 0 18px 18px;
  	overflow-x: auto;
  }

  .pos-process {
  	width: 138vw;
  	gap: 0 38px;
  }

  .pricing-column {
  	flex-direction: column;
  	gap: 42px 0;
  }

  /** FAQ, Form **/	
  .middle-container {
  	margin-top: 38px;
  }

  .form-container {
  	max-width: 100%;
  }
  
}

/** Mobile iPhone Pro 12 Max 428px **/
@media screen and (max-width: 428px) {
	/** page Head **/
	.head-wrap.bg-sales {
		background-size: 65% !important;
		background-position: 130% 115%;
	}

	.head-wrap.bg-reserve {
		background-size: 60% !important;
		background-position: 130% 130%;
	}

	.head-wrap.bg-consult {
		background-size: 65% !important;
		background-position: 120% 110%;
	}

	.head-wrap.bg-access {
		background-size: 60% !important;
		background-position-x: 130%;
	}

	.head-section.bg-group .head-wrap {
		background-size: 60% !important;
		background-position: 110% 110%;
	}

	.head-wrap.bg-message {
		background-position: 100% 130%;
	}

	.head-section.bg-pay .head-wrap {
		background-size: 58% !important;
		background-position: 100% 180%;
	}

	.head-section.bg-consult {
		background-position: 25% 0;
	}

	.head-section.bg-pay .head-wrap {
		background-position: 110% 140%;
	}

	.head-section.bg-online .head-wrap {
		background-size: 60% !important;
		background-position: 120% 120%;
	}

	.head-section.bg-bank .head-wrap {
		background-size: 70% !important;
		background-position: 150% 100%;
	}

	.head-section.bg-number .head-wrap {
		background-size: 69% !important;
		background-position: 120% 120%;
	}

	.head-wrap.bg-download {
		background-size: 60% !important;
		background-position: 100% 100%;
	}

	/** Section **/
	.v-download {
		padding: 0;
	}

	.down-windows {
		visibility: hidden;
		height: 0px;
	}

	.head-md.mark {
		font-size: 21px;
		justify-content: space-between;
	}

	.has-tile .tile {
		margin-top: 60px;
	}

	.v-tab {
		padding-top: 48px;
		margin-bottom: -28px;
	}

	/** Typography **/
  .head-lg {
  	font-size: 26px;
  }

  .head-xl br {
  	display: none;
  }

  /** Home **/
  .intro-screen img {
  	width: 95%;
  }

  .legal-title {
  	font-size: 18px;
  }

  /** Pay **/
  .pos-process {
  	width: 180vw;
  }

  .v-between-middle .v-column-right img {
  	max-width: 80%;
  }
}

/* Animate 
--------------------------------------------- */
.head-xl.hidden {
	opacity: 0;
	transform: translateY(25%);
	transition: var(--moveTop);
}

.head-xl.visible {
	opacity: 1;
	transform: translateY(0);
}

.head-content .head-xl.hidden {
	opacity: 0;
	transition: opacity .5s ease-in;
}

.head-content .head-xl.visible {
	opacity: 1;
}

.head-lg.hidden {
	opacity: 0;
	transform: translateY(25%);
	transition: var(--moveTop);
}

.head-lg.visible {
	opacity: 1;
	transform: translateY(0);
}

.head-desc.hidden, .link-text.hidden {
	opacity: 0;
	transform: translateY(50%);
	transition: var(--moveTop);
	transition-delay: .1s;
}

.head-desc.visible, .link-text.visible {
	opacity: 1;
	transform: translateY(0);
}

.head-top-eng.hidden {
	opacity: 0;
	transform: translateY(50%);
	transition: var(--moveTop);	
}

.head-top-eng.visible {
	opacity: 1;
	transform: translateY(0);
}

.process-step .step-bar {
	opacity: 0;
	transform: translateY(20%);
	transition: var(--moveTop);	
}

.process-step.visible .step-bar {
	opacity: 1;
	transform: translateY(0);
}

.process-step.visible .step-bar:nth-child(2) {
	transition-delay: .1s;
}
.process-step.visible .step-bar:nth-child(3) {
	transition-delay: .2s;
}
.process-step.visible .step-bar:nth-child(4) {
	transition-delay: .3s;
}
.process-step.visible .step-bar:nth-child(5) {
	transition-delay: .4s;
}

.process-step .step-bar:hover {
	background-color: #effeff;
	transition-duration: .4s;
	transition-delay: 0s !important;
	transform: translateX(-5%);
}

.banner-free.hidden {
	opacity: 0;
	transition: var(--moveTop);
	transition-delay: .2s;
}

.banner-free.visible {
	opacity: 1;
}

.pricing-card.hidden, .pos-process.hidden {
	opacity: 0;
	transform: translateY(10%);
	transition: var(--moveTop);
}

.pricing-card.visible, .pos-process.visible {
	opacity: 1;
	transform: translateY(0);
}

.screen.hidden, .screen-zero.hidden {
	opacity: 0;
	transform: translateY(10%);
	transition: var(--moveTop);
	transition-delay: .1s;
}

.screen.visible, .screen-zero.visible {
	opacity: 1;
	transform: translateY(0);
}

.tablet.hidden {
	opacity: 0;
	transform: translateY(10%);
	transition: var(--moveTop);
	transition-delay: .1s;
}

.tablet.visible {
	opacity: 1;
	transform: translateY(0);
}