@charset "UTF-8";

/* **************************************** *
 * Base
 * **************************************** */
 
.flex-row { display: flex; flex-direction: row; }
.flex-col { display: flex; flex-direction: column; }
.gray { color: #9E9E9E; }
.font-12 { font-size: 0.75rem; }
.font-14 { font-size: 0.875rem; }
.font-16 { font-size: 1rem; }

/* component fade */
.fade-in {
    display: inline-block;
    animation: fadeInDown 2s;
    -moz-animation: fadeInDown 2s; /* Firefox */
    -webkit-animation: fadeInDown 2s; /* Safari and Chrome */
    -o-animation: fadeInDown 2s; /* Opera */
    animation-fill-mode: forwards;
}
@keyframes fadeInDown {
	0% {
		opacity: 0;
		transform: translate3d(0, -100%, 0);
	}
	100% {
		opacity: 1;
		transform: translateZ(0);
	}
}
@-moz-keyframes fadeInDown { /* Firefox */
	0% {
		opacity: 0;
		transform: translate3d(0, -100%, 0);
	}
	100% {
		opacity: 1;
		transform: translateZ(0);
	}
}
@-webkit-keyframes fadeInDown { /* Safari and Chrome */
	0% {
		opacity: 0;
		transform: translate3d(0, -100%, 0);
	}
	100% {
		opacity: 1;
		transform: translateZ(0);
	}
}
@-o-keyframes fadeInDown { /* Opera */
	0% {
		opacity: 0;
		transform: translate3d(0, -100%, 0);
	}
	100% {
		opacity: 1;
		transform: translateZ(0);
	}
}


/* Main Visual */
.mainVisualBg .device {
    position: absolute;
    left: 250px;
}
.mainVisualBg .device.main-mobile {
    position: absolute;
    left: 155px;
    top: 137px;
}
.main-pc img {
    width: 975px;
    height: auto;
    padding: 16px;
    background-color: #f3f5f7;
    border-radius: 24px;
    box-shadow: 8px 0px 20px white inset, 0 -2px 6px 0 rgba(10,37,64,0.35) inset, 6px 40px 80px rgb(62 68 128 / 25%), -2px -10px 20px rgb(102 131 188 / 25%) inset;
}
.main-mobile {
    padding: 16px;
    background-color: #f3f5f7;
    border-radius: 32px;
    box-shadow: 8px 0px 20px white inset, 0 -2px 6px 0 rgba(10,37,64,0.35) inset, 6px 40px 80px rgb(62 68 128 / 25%), -2px -10px 20px rgb(102 131 188 / 25%) inset;
}
.main-mobile .image {
    background: url(mobile_main_banner.png) no-repeat;
    background-size: cover;
    display: block;
    width: 254px;
    height: 520px;
    border-radius: 24px;
    animation: mobileScroll 10s infinite;
    /* animation-timing-function : cubic-bezier(1, 0.05, 0.1, 1); */
}
.main-mobile .image:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
@keyframes mobileScroll {
    0%, 20% { background-position-y: 0%; }
    100% {  background-position-y: 100%; }
}

/* Main Content */
.sum-animation {
	display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.08);
}
.container {
	width: 400px;
}
/* 가입 즉시 무료 체험 */
.sum-layout {
	display: flex;
	flex-direction: row;
	gap: 16px;
}
.sum-layout i {
	display: block;
	width: 24px;
	height: 24px;
}
.sum-layout i.payment {background: url(/images/homepage/webComponent/main_payment.svg) no-repeat center;}
.sum-layout i.wallet {background: url(/images/homepage/webComponent/main_wallet.svg) no-repeat center;}
.sum-layout i.list {background: url(/images/homepage/webComponent/main_list.svg) no-repeat center;}
.sum-layout .flex-col {
	gap: 16px;
	width: 100%;
}
.sum-layout .flex-row {
	justify-content: space-between;
}
.sum-layout .font-16 p {
	font-weight: bold;
}
.sum-layout .gray {
	margin-left: 10px;
	font-size: 0.875rem;
}
.sum-layout-detail {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.num-area {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	gap: 4px;
	font-weight: bold;
}
.paymentCount hr { width: 100%; border: 1px solid #eee; }
/* 온라인으로 간편한 신청 */
.business button {
	width: 100%;
	margin: 0 auto;
	padding: 10px;
	color: inherit;
	font-weight: bold;
	font-size: 0.875rem;
	border: 1px solid #ddd;
	border-radius: 10px;
}
/* checkbox */
.check-area {
	margin-top: 16px;
}
.check {
    position: absolute;
    /* hidden */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.check-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.check-btn {
    display: inline-block;
    width: 16px;
    min-width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 2px solid #ddd;
    margin-right: 8px;
}
.check:checked+.check-label .check-btn {
    /* background: url(../images/icon-check-on.svg) no-repeat center 2px; */
    background-size: auto;
    background-color: #4264C2;
    border: 2px solid #4264C2;
    transition: 0.2s;
}
.check:disabled+.check-label .check-btn {
    opacity: 0.6;
}
/* style */
.business .title p {
	font-weight: bold;
}
.business .title span {
	display: inline-block;
	margin-top: 8px;
}
.business ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 0.75rem;
}
.business ul li {
	display: flex;
	flex-direction: row;
	gap: 10px;
	background-color: #F6F6F6;
	padding: 16px;
	border-radius: 10px;
	border-left: none;
}
.business ul li p {
	width: 60px;
}
/* 사업자번호 타이핑 애니메이션 */
#typing {
    display: inline-block;
    max-width: 88px;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    border-right: 2px solid #4264C2;
}
.typingAnimation {
    animation: typing 8s steps(50) forwards, blink 1s infinite;
}
@keyframes typing {
    0% { width: 0; }
    100% { width: 100%; }
}

@keyframes blink {
    0%, 100% { border-color: transparent; }
    50% { border-color: #4264C2; }
}

@keyframes blink-button {
    0%, 100% { background-color: #fff; }
    50% { background-color: #f6f6f6; box-shadow: inset 1px 2px 4px #d4d4d4; }
}

#searchButton {
    box-shadow: 1px 5px 5px #eeeeef;
    background-color: transparent;
	cursor: pointer;
	transform: translate3d(0px, 0px, 0px);
}
.searchButtonAnimation {
    animation: blink-button 0.4s 2.5s 1 alternate;
}
.business hr {  border: 1px solid #eee; }

/* 하루 만에 끝내는 결제 연동 */
.code-typing {
    background: #fafafa;
}
code {
    font-family: 'Consolas';
}
code > span {
    color: #4264C2;
    font-family: 'Consolas';
}
#clientId {
    font-family: 'Consolas';
    border-right: 2px solid #4264C2;
    padding-right: 2px;
    animation: blink 1s infinite;
}


/* 이용요금 */
.service-area-1 .circle {
	position: relative;
    left: 195px;
    top: 124px;
    width: 270px;
    height: 270px;
    border-radius: 50%;
    background-color: #1E4FD7;
}
.service-area-2 .circle {
	position: relative;
    left: 550px;
    top: 124px;
    width: 270px;
    height: 270px;
    border-radius: 50%;
    background-color: #1E4FD7;
}
.service-area-1 img {
    position: absolute;
    top: 80px;
    left: 163px;
    width: 610px;
    height: auto;
    animation: dungdung 1s infinite alternate;
}
.service-area-2 img {
    position: absolute;
    top: 80px;
    left: 310px;
    width: 610px;
    height: auto;
    animation: dungdung 1s infinite alternate;
}
@keyframes dungdung {
    100% {
        -webkit-transform: translateY(12px);
        transform: translateY(12px);
    }
}

/*태블릿pc 사이즈*/
@media screen and (max-width:1024px) {
	/* Main Visual */
	.mainVisualBg .device {
		left: 130px;
	}
	.main-pc img {
		width: 662px;
	}
	.mainVisualBg .device.main-mobile {
	    left: 55px;
	}
	.main-mobile .image {
	    width: 200px;
    	height: 395px;
	}
	.main-mobile {
	    padding: 7px;
	}
	
	/* 이용요금 */
	.service-area-1 .circle {
	    left: 120px;
	    top: 127px;
	    width: 210px;
	    height: 210px;
	}
	.service-area-2 .circle {
	    left: 280px;
	    top: 127px;
	    width: 210px;
	    height: 210px;
	}
	.service-area-1 img,
	.service-area-2 img {
	    position: absolute;
	    top: 105px;
	    left: 105px;
	    width: 460px;
	    height: auto;
	    animation: dungdung 1s infinite alternate;
	}


		
}
/*모바일 사이즈*/
@media screen and (max-width:767px) {
	.container {
		width: 270px;
	}
	
	.font-16 {
		font-size: 14px;
	}
	
	.font-14 {
    	font-size: 12px;
	}
	/* Main Visual */
	.mainVisualBg .device,
	.service-area-1,
	.service-area-2 {
		display: none;
	}
	
	/* 가입 즉시 무료 체험 */
	.sum-layout .gray {
	    margin-left: 3px;
	    font-size: 11px;
	}
	
	/* 온라인으로 간편한 신청 */
	.searchButtonAnimation {
    	animation: blink-button 0.4s 4s 1 alternate;
	}
	
	/* 하루 만에 끝내는 결제 연동 */
	.sum-animation.code-typing {
		padding: 0;
		font-size: 13px;
	}
	
	
}