@charset "UTF-8";

/*pc 사이즈*/

/* 머티리얼 디자인 스타일 클리어 */
.mdc-layout-grid {
	padding: 0;
}

[dir=rtl] .mdc-list-item__graphic, .mdc-list-item__graphic[dir=rtl] {
	margin-left: 0;
	margin-right: 32px;
}

.mdc-top-app-bar--fixed-adjust {
	padding-top: 96px;
}

.mdc-button {
	box-shadow: none !important;
	--mdc-theme-primary: #283c75; 
	--mdc-theme-on-primary: var(- -mdc-theme-text-primary-on-dark);
	padding: 16px 27px;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 800;
	height: 48px;
	/* line-height: 45px; */
	margin: 0;
	letter-spacing: -0.5px;
	overflow: hidden;
}

.mdc-button.whiteBtn { 
	--mdc-theme-primary: #fff; 
	--mdc-theme-on-primary: var(- -mdc-theme-text-primary-on-light);
	background: #fff;
	color: #575656;
}

.mdc-button.mdc-button--raised.greyBtn {
	border-color: #9e9e9e;
	background: #9e9e9e;
	color: #fff
}

.mdc-button.mdc-button--outlined {
	border-color: #283c75; 
	--mdc-theme-on-primary: var(- -mdc-theme-text-primary-on-light);
}

.mdc-button.mdc-button--outlined.greyBtn {
	border-color: #9e9e9e;
	color: #9e9e9e;
}

.mdc-button.mdc-button--outlined.whiteBtn {
	border-color: #fff; 
	--mdc-theme-on-primary: var(- -mdc-theme-text-primary-on-dark);
	color: #fff;
	background: transparent;
}

.mdc-button--text.greyBtn {
	color: #2b2b2b
}

.mdc-tab-bar { 
	--mdc-theme-primary: #283c75; 
	--mdc-theme-on-primary: var(- -mdc-theme-text-primary-on-dark);
}

.mdc-tab {
	font-size: 16px;
	font-size: var(- -mdc-typography-button-font-size, 16px);
	letter-spacing: -0.5px;
	height: 54px;
	width: 174px;
	font-weight: 800
}

@media screen and (min-width:1024px) {
	.mdc-drawer {
		display: none !important;
	}
	.mdc-drawer+div {
		display: none !important;
	}
}

/* 공통 레이아웃 */
.inner {
	width: 100%;
	max-width: 1254px;
	padding: 0 30px;
	margin: 0 auto;
}

.mainSubTit h2 {
	font-size: 36px;
	line-height: 1.4;
	font-weight: 600;
	letter-spacing: -1px;
	margin-bottom: 45px
}

.mainSubTit p {
	font-size: 18px;
	line-height: 1.7;
}

.fadeIn {
	animation: fadeIn 1s forwards;
	animation-play-state: paused;
	/* opacity: 0;
	 transform: translateY(30px); */
}

.daterangepicker select.yearselect {
	float: left !important;
}

.daterangepicker select.monthselect {
	float: right !important;
	margin: 0
}

.daterangepicker select.cancelBtn {
	float: right !important;
}

/*팝업*/
.mdc-dialog {
	z-index: 99999
}

.mdc-dialog .mdc-dialog__surface {
	border-radius: 20px;
	border-radius: var(- -mdc-shape-medium, 20px);
	background: #fcfcfc;
	background: var(- -mdc-theme-surface, #fcfcfc);
}

.minDialog .mdc-dialog__surface {
	width: 560px;
}

.dialogContent .dialog-cancel {
	position: absolute;
	top: 10px;
	right: 10px;
	border-radius: 50%;
	overflow: hidden;
}

.minDialog .mdc-dialog__content, .superDialog .mdc-dialog__content {
	padding: 30px;
}

.minDialogBtn .mdc-dialog__content {
	padding-bottom: 10px
}

.dialogContentTxt h3, .dialogContentTxt h4 {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: #2a2b2c;
	height: 20px
}

.dialogContentTxt p {
	margin-top: 8px;
	font-size: 14px;
	color: #2a2b2c;
	line-height: 1.76
}

.dialogIcon img {
	width: 20px;
	height: 20px;
	margin-bottom: 21px
}

.dialogForm {
	padding: 29px 0 29px 0;
}

.dialogForm.topLine {
	/*border-top: 1px solid #dbdbdb;
	padding: 25px 0 0 18px;
	margin-top: 15px*/
	padding: 15px 0 0;
}

.minDialog .dialogForm {
	padding-top: 35px;
	padding-bottom: 20px
}

.textFieldSet {
	display: flex;
	margin-bottom: 16px;
	letter-spacing: -0.4px
}

.textFieldContainer {
	flex-grow: 1;
	position: relative;
}

.serviceName {
	line-height: 42px
}

.textFieldContainer input {
	width: 100%
}

.textFieldSet label {
	line-height: 42px;
	width: 133px;
	color: #333;
	font-size: 16px;
	font-weight: 500;
}

.textFieldSet button.mdc-button {
	margin: 4px 0 0 15px;
	min-width: 101px;
	padding: 0 24px;
	font-size: 14px;
	font-weight: 500;
	height: 38px;
	background: #fff;
	border: 1px solid #dcdcdc;
	color: #575656
}

.textFieldSet label+button.mdc-button {
	margin-left: 0
}

.dialog__foot.center {
	justify-content: center !important;
}

.dialog__foot.left {
	justify-content: flex-start !important
}

.dialog__foot .mdc-dialog__button {
	font-size: 14px;
	font-weight: 500;
	height: 38px;
}

.dialog__foot.center .mdc-button {
	min-width: 120px;
	padding: 0 35px
}

.dialogContentTxt h3 {
	font-weight: 800;
	font-size: 18px;
}

.dialogContentTxt h4 {
	font-weight: 500;
	font-size: 16px;
	height: auto;
	line-height: 1.59
}

.dialogContentTxt p {
	margin-top: 18px
}

#warning.mdc-dialog--open {
	display: block !important;
}

#warning .mdc-dialog__surface {
	margin: calc(50vh - 100px) auto;
}

#warning a {
	text-decoration: underline;
}

/* 헤더 배너 */
.bannerContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
	transition: opacity 0.3s;
	background-repeat: no-repeat;
    background-size: cover;
}

.bannerContainer img {
	width: 300px;
}

/* pc 헤더 */
.pc_header {
	background: #fff;
	position: fixed;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 999
}

.pc_header>div {
	/* display: flex;
	justify-content: space-between; */
	
}

.pc_header>div:after {
	content: "";
	display: block;
	clear: both;
}

.pc_header h1 {
	float: left;
}

.pc_header h1 a {
	display: block;
	padding: 24px 0
}

.pc_header h1 a img {
	height: 48px
}

.pc_header nav {
	width: calc(100% - 220px);
	float: right;
}

.pc_header nav>ul {
	/* display: flex;
	justify-content: flex-end */
	text-align: right;
}

.pc_header nav>ul>li {
	width: 19%;
	display: inline-block;
}

.pc_header nav>ul>li>a {
	display: block;
	padding: 39px 0 40px;
	font-weight: 500;
	font-size: 16px;
	text-align: center;
}

.pc_header nav>ul>li:last-child {
	width: auto;
	padding-left: 8%;
}

.pc_header nav>ul>li:last-child a {
	padding: 24px 0
}

.pc_header.active,
.tablet.active,
.mobile.active {
	box-shadow: 2px 0 3px rgba(0, 0, 0, 0.2);
}

#customerNav {
	position: relative;
}

.depth2 {
	width: 100%;
	position: absolute;
	background: #fff;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
	left: 0;
	display: none;
}

.depth2 a {
	display: block;
	line-height: 47px;
	text-align: center;
	font-size: 14px;
}

.depth2 a:hover {
	background: #fafafa
}

/* 모바일 헤더 */
#app-bar {
	z-index: 999
}

.mdc-top-app-bar {
	top: 0 !important;
}

/*mainVisual*/
.mainVisual {
	overflow: hidden;
	height: 720px;
	transition: all 0.3s;
}

.mainVisual .inner {
	height: 100%
}

.mainVisual .inner:after {
	content: "";
	display: block;
	clear: both;
}

.mainVisualBg {
	position: relative;
	float: left;
	height: 100%
}

.mainVisualTit {
	padding: 174px 0 300px;
	float: left;
}

.mainVisualTit h3 {
    font-size: 20px;
    font-weight: 400;
    line-height: 32px;
    margin: 40px 0;
    color: #575656;
    transition: all 0.3s;
}

.mainVisualTit h2 {
	font-size: 48px;
	font-weight: 800;
	line-height: 65px;
	color: #3f3f3f;
	letter-spacing: -1px;
	transition: all 0.3s
}

.mdcWrapperHome .borderRound,
.borderRound {
	border-radius: 25px;
}

.mdc-button.mdc-button--raised.smallWhiteBtn {
	border-color: #fff;
    background-color: #fff;
    color: #1E4FD7;
}

.mdc-button.mdc-button--raised.smallBlueBtn,
.card .mdc-button.smallBlueBtn {
	border-color: #1E4FD7;
    background-color: #1E4FD7;
    color: #fff;
}

.mdc-button.mdc-button--raised.smallOrangeBtn {
	border-color: #F47920;
    background-color: #F47920;
    color: #fff;
}

.mdc-button.mdc-button--raised.whiteBtn {
	border-color: #fff;
    background-color: #fff;
    color: #1E4FD7;
}

.mainVisualTit h2 span {
	line-height: 1.3;
	display: inline-block;
	box-shadow: 0 -20px 0 #ffad00 inset;
	font-weight: 700
}

.mainVisualTit .mdc-button, .mvBtn .mdc-button  {
	margin: 0;
	margin-right: 16px;
	width: 141px;
	padding: 0;
	transition: all 0.3s
}

/*mainSec1*/
#mainSec1 {
	padding: 100px 0 0 0;
}

#mainSec1 .inner:after {
	content: "";
	display: block;
	clear: both;
}

#mainSec1 .inner h1 img {
	height: 48px;
}

#mainSec1 .inner h1 {
	margin-bottom: 25px;
}

#mainSec1 .inner h2 {
    font-size: 36px;
    font-weight: 500;
    letter-spacing: -1px;
    margin-bottom: 35px;
}

#mainSec1 .inner p {
	font-size: 18px;
    line-height: 1.7;
    margin-bottom: 20px;
}

.mainSubTit {
	padding: 20px 0;
	float: left;
	width: 35%
}

.mainSec1progress {
	/* float: right; */
	width: 65%;
	margin-left: 0 !important;
}

.progressContainer {
	border-left: 1px solid #dcdcdc;
	padding: 58px 0
}

.progress1 {
	position: relative;
	margin-bottom: 48px
}

.progress-bar {
	height: 24px;
	transition: 0.4s linear;
}

.progressContainer p>span {
	margin-left: 16px;
}

.progress1 p {
	line-height: 21px;
	font-size: 18px;
	font-weight: 500;
	position: absolute;
	left: 81px;
	top: 0
}

.progress1 p>span {
	font-weight: 800;
	color: #1E4FD7
}

.progress1 p>span>span {
	display: block;
	width: 33px;
	height: 8px;
	position: absolute;
	bottom: 0;
	right: -3px;
	background: #f5c54d;
	z-index: -1
}

.progress2 {
	margin-bottom: 24px
}

.progress2+p {
	font-size: 18px;
	font-weight: 500;
	color: #9e9e9e
}

.progress1.progress-moved .progress-bar {
	width: 56px;
	background: #1E4FD7;
	animation: progressAnimation1 2s forwards;
	animation-play-state: paused;
}

.progress2.progress-moved .progress-bar {
	width: 100%;
	background: #eee;
	animation: progressAnimation2 2s forwards;
	animation-play-state: paused;
}

@keyframes progressAnimation1 { 
	0% {
		width: 0%;
	}
	100%
	{	
		width:56px;
	}
}
@keyframes progressAnimation2 { 
	0% {
		width: 0%;
	}
	100%
	{
		width:100%;
	}
}

/*mainSec2*/
#mainSec2 {
	padding: 110px 0;
}

#mainSec2 .inner:after {
	content: "";
	display: block;
	clear: both;
}

.guide {
	float: right;
	width: 65%;
	padding-top: 25px
}

.guide li {
	border-left: 1px solid #d2d2d2;
	position: relative;
	padding: 38px 0 120px 48px;
}

.guide .guideLast {
	border-left: 0;
	padding-bottom: 0
}

.guide li .dot {
	display: block;
	background: #1d3c77;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	position: absolute;
	top: -8px;
	left: -8px;
}

#mainSec2 .guide li .dot {
	background: #1E4FD7;
}

.guide li h3 {
	font-size: 21px;
	margin-bottom: 25px;
	font-weight: 400;
	line-height: 1.2
}

.guide li h3 span {
	font-weight: 800
}

.guide .guideP {
	color: #575656;
	font-size: 16px;
	line-height: 1.67;
	margin-bottom: 30px;
}

.guide li .progress2Color {
	color: #9e9e9e;
}

.mgContent {
	opacity: 1
}

.mgImg {
	width: calc(100% + 25px);
	max-width: 420px;
	margin-left: -25px
}

.mgImg>div, .mgImg>img {
	width: 100%
}

@keyframes fadeIn { 
	0%{
		opacity: 0;
		transform: translateY(30px);
	}
	100%
	{
		opacity:1;
		transform:
		translateY(0);
	}
}


/*mainSec2_1*/
#mainSec2_1 .cardTit1 {
    font-size: 36px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: -1px;
    padding: 95px 0 0 0;
}

#mainSec2_1 .cardContainer {
	display: flex;	
	justify-content: space-evenly;
    margin-top: 30px;
}

#mainSec2_1 .card.minCard {
	background: #fff;
    box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.08);
    min-height: calc(100% - 50px);
    padding: 30px 40px 0;
}

#mainSec2_1 .card.minCard.firstMinCard {
	margin-left:0px;
}

#mainSec2_1 .card p {
	width: 250px;
	font-size: 16px;
}

#mainSec2_1 .mainSec_img {
	width: 100%;
	height: auto;
	margin: 30px 0 20px;
	aspect-ratio: 1/1;
	background-size: cover;
}

#mainSec2_1 .guide_img1 {
	background-image: url(../../images/homepage/main/nicepay-guide-1.svg);
} 

#mainSec2_1 .guide_img2 {
	background-image: url(../../images/homepage/main/nicepay-guide-2.svg);
}
 
#mainSec2_1 .guide_img3 {
	background-image: url(../../images/homepage/main/nicepay-guide-3.svg);
} 

#mainSec2_1 .cardList {
	margin-bottom: 100px;	
}

#mainSec2_1 .goHistory {
	margin-left: -25px
}


/*mainSec3*/
#mainSec3 {
	background: #FAFAFC;
	padding: 60px 0;
	margin-top: 80px;
	overflow: hidden;
	width: 100%
}

.numbers {
	margin: 50px 0 70px;
	font-size: 30px;
	display: flex;
	flex-flow: row wrap
}

.numbers span {
	color: #2b2b2b;
}

.numbersContainer {
	display: flex;
	align-content: flex-end;
}

.numbers__window {
	display: block;
	line-height: 2.5rem;
	height: 2.5rem;
	overflow: hidden;
}

.numbers__window>span {
	display: inline-block;
	width: 0;
	padding-right: 1.6rem;
	line-height: 2.5rem;
}

.numbers__window__digit {
	word-break: break-all;
	transform: translateY(-25rem);
	animation: counting 0.15s forwards infinite;
}

.numbers__window__digit::before {
	content: attr(data-fake);
	display: inline-block;
	/* width: 100%; */
	height: 25rem;
	line-height: 2.5rem;
}

.numbers.show .numbers__window__digit--1 {
	animation-iteration-count: 1;
}

.numbers.show .numbers__window__digit--2 {
	animation-iteration-count: 2;
}

.numbers.show .numbers__window__digit--3 {
	animation-iteration-count: 3;
}

.numbers.show .numbers__window__digit--4 {
	animation-iteration-count: 4;
}

.numbers.show .numbers__window__digit--5 {
	animation-iteration-count: 5;
}

.numbers.show .numbers__window__digit--6 {
	animation-iteration-count: 6;
}

@keyframes counting { 
	0% {transform: translateY(0);}
	10%{transform:translateY(-2.5rem);}
	20%{transform:translateY(-5rem);}
	30%{transform:translateY(-7.5rem);}
	40%{transform:translateY(-10rem);}
	50%{transform:translateY(-12.5rem);}
	60%{transform:translateY(-15rem);}
	70%{transform:translateY(-17.5rem);}
	80%{transform:translateY(-20rem);}
	90%{transform:translateY(-22.5rem);}
	100%{transform:translateY(-25rem);}
}

.mainCount {
	display: flex;
    flex-direction: column;
    align-items: center;
}

.mainCount 
.numbers+p {
	color: #575656;
	font-size: 21px;
	margin-bottom: 72px;
	line-height: 1.5
}

.logoContainer {
	display: flex;
}

.nicepayStartUpLogo {
	margin-left: 30px;
}

.nicepayStartUpLogo img {
	width: 170px;
    height: 41px;
}

.nicepayStartUpLogo1 img {
	width: 145px;
    height: 27px;
}

.numbers .mainCountTxt {
	color: #2b2b2b;
}

.mainPartner {
	/* overflow: hidden; */
	height: 72px;
	/* display: flex; */
	position: relative;
	animation: rolling 70s linear infinite;
}

.mainPartner:after {
	content: "";
	display: block;
	clear: both;
}

.mainPartner ul {
	position: relative;
	/* display: flex;
	justify-content: space-around; */
}

.mainPartner ul:after {
	content: "";
	display: block;
	clear: both;
}

.mainPartner li {
	width: 110px;
	/* height: 72px; */
	/* background: #fff; */
	margin-right: 94px;
	/* line-height: 72px; */
	text-align: center;
	float: left;
}

.mainPartner li img {
	width: 100%
}

@keyframes rolling { 
	0% {transform: translateX(-100%);}
	100% {transform: translateX(0%);}
}

/*mainSec4*/
.joinUs {
	background: #fff;
	box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.06);
	margin-top: -45px;
	padding: 94px 95px 152px;
	z-index: 1;
	display: flex;
    flex-direction: column;
    align-items: center;
}

.joinUs.faqBottom {
	background: #fff;
	box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.06);
	margin-top: -45px;
	padding: 94px 95px 152px;
	z-index: 1
}

.joinUs:after {
	content: "";
	display: block;
	clear: both;
}

.joinUs h2 {
	font-size: 36px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: -1px;
	color: #1d3c77;
}

.joinUs p {
	font-size: 18px;
	line-height: 1.7;
	margin: 20px 0 41px;
}

/*푸터*/
footer {
	background: #f6f6f6;
	padding: 0 0 50px
}

.footNav {
	position: relative;
}

.footNav ul {
	/* display: flex; */
	
}

.footNav li {
	display: inline-block;
}

.footNav li a {
	display: inline-block;
	margin: 0 38px 30px 0;
	font-size: 14px;
	color: #555;
	line-height: 1;
	padding: 50px 0 24px 0;
}

.footNav .toTop {
	position: absolute;
	top: 0;
	right: 0;
	width: 60px;
	height: 60px;
	border: 0;
	outline: none;
	cursor: pointer;
	background: #e7e7e7
}

.footNav .toTop img {
	width: 20px;
	height: 20px;
	transform: rotate(-90deg)
}

.footInfo h4 {
	margin-bottom: 30px;
}

.footInfo p {
	font-size: 12px;
	color: #555;
	margin-bottom: 15px;
}

.footInfo address {
	font-size: 12px;
	color: #898989;
	margin-bottom: 20px;
}

.borderRound.mdcBtnHome {
	font-size: 15px;
	font-weight: 600;
	height: 45px;
	width: 141px;
	margin-right: 10px;
}

/*태블릿pc 사이즈*/
@media screen and (max-width: 1023px) {
	/*공통 레이아웃*/
	.inner {
		max-width: none;
	}
	.mdc-top-app-bar--fixed-adjust {
		padding-top: 64px;
	}
	
	.mainSubTit {
		width: 100%;
		float: none;
	}
	.mainSubTit h2 {
		margin-bottom: 15px;
	}

	/* 헤더 */
	.mdc-top-app-bar {
		background: #fff;
	}
	.mdc-top-app-bar .mdc-top-app-bar__navigation-icon {
		color: #2b2b2b
	}
	.mdc-top-app-bar__title img {
		height: 32px;
		vertical-align: text-bottom;
	}
	.mdc-top-app-bar__row {
		height: 62px
	}
	.mdc-top-app-bar__section {
		padding: 0
	}
	.subNavBtn {
		cursor: pointer;
	}
	.subNav {
		display: none;
		width: 100%;
		background: #fdfdfd
	}
	.subNav .mdc-list-item {
		color: #9e9e9e;
		padding-left: 23px
	}
	.subNav .mdc-list-item:nth-child(1) {
		margin-top: 0
	}
	.mdc-drawer .mdc-drawer__content {
		height: calc(100vh - 130px)
	}
	.mdc-drawer .menu_btn_homepage {
		width: 100%;
		padding: 10px 16px 15px;
		justify-content: space-between;
		background-color: #fff;
	}
	.mdc-drawer .menu_btn_homepage a {
		display: block;
	}
	.mdc-drawer .menu_btn_homepage button {
		padding: 0 22px;
		width: 100%;
		height: 40px;
		border-radius: 10px;
		border: 1px solid #dcdcdc;
		color: #575656;
		font-size: 13px;
		font-weight: bold;
		background-color: #fff;
	}
	
	/*mainVisual*/
	.mainVisual {
		height: 592px
	}
	.mainVisualTit {
		padding: 174px 0 200px;
	}
	.mainVisualTit h3 {
	    font-size: 16px;
	    line-height: 24px;
	    margin: 30px 0;
	}
	.mainVisualTit h2 {
		font-size: 40px;
	    line-height: 52px;
	    letter-spacing: -0.6px;
	}
	.mainVisualTit h2 span {
		box-shadow: 0 -17px 0 #ffad00 inset
	}

	.borderRound.mdcBtnHome {
	    font-size: 12px;
	    height: 35px;
	    width: 105px;
	    margin-right: 3px;
	}

	/*mainSec1*/
	#mainSec1 {
		padding: 60px 0;
	}
	
	#mainSec1 .inner h1 img {
		height: 35px;
		margin-bottom: 7px;
	}
	
	#mainSec1 .inner h1 {
	    margin-bottom: 10px;
	}
	
	.mainSec1progress {
		/* width: 100%; */
		/* float: none; */
		width: calc(100% + 150px) !important;
	}
	.mainSec1progress .progressContainer {
		max-width: 760px;
		width: 100%;
		margin: 0 auto;
	}

	/*mainSec2*/
	.guide {
		margin: 0 auto;
		display: table;
		float: none;
	}
	.guide li {
		/* width: fit-content; */
		display: table;
	}

	/*mainSec4*/
	.joinUs {
		padding: 76px 75px 102px;
	}
	.joinUs>div {
		width: 100%;
	}
	.joinUs>div:first-child {
		margin-bottom: 30px;
		margin-left: 0
	}
	#mainSec4 .mvBtn {
		text-align: center;
	}
	
	#mainSec4 .mvBtn .mdc-button {
		margin-bottom: 10px;
	}
	
	/*mainSec2_1*/
	#mainSec2_1 .card.shadow {
		width: calc(100% - 270px);
	}
	#mainSec2_1 .mainCard {
		width: 40%
	}
	#mainSec2_1 .card.minCard {
		padding: 20px 15px 0;
		margin: 35px 10px;
	}
	
	#mainSec2_1 .card.minCard.firstMinCard {
		margin-left:10px;
	}
	
	#mainSec2_1 .card.minCard.mainCard {
		margin-bottom:70px;
	}
	#mainSec2_1 .card p {
		width: 205px;
		font-size: 13px;
	}
	#mainSec2_1 .mainSec_img {
		width: 95%;
	}
	
	.numbers {
		font-size: 26px;
	}
	
	.mainCount .numbers+p {
	    font-size: 18px;
	}
	
	/*푸터*/
	footer {
		padding: 0 0 50px;
	}
	
}

/*모바일 사이즈*/
@media screen and (max-width:767px) {
	/* 머티리얼 디자인 */
	.mdc-button {
		font-size: 13px;
		height: 34px;
		padding: 0 24px;
		border-radius: 6px
	}
	.mdc-top-app-bar--fixed-adjust {
		padding-top: 56px;
	}

	/*공통 레이아웃*/
	.inner {
		padding: 0 20px
	}
	
	/* 헤더 배너 */
	.bannerContainer img {
		width: 275px;
	}

	/* 팝업 */
	.minDialog .mdc-dialog__content {
		padding: 25px 20px
	}
	.minDialogBtn .mdc-dialog__content {
		padding-bottom: 0
	}
	.dialogContent .dialog-cancel {
		top: 0;
		right: 0
	}
	.dialogContentTxt h3 {
		font-size: 18px;
		height: auto;
	}
	.dialogContentTxt p {
		font-size: 13px;
		line-height: 1.5;
		margin-top: 10px
	}
	.serviceName {
		line-height: 1.2em
	}
	#subscribe .dialogForm {
		padding-bottom: 0;
		padding-top: 25px
	}
	#subscribe .textFieldSet {
		display: block;
		margin-bottom: 15px
	}
	#subscribe .textFieldSet label {
		font-size: 12px;
		line-height: 1;
		margin-bottom: 7px;
		display: inline-block;
		width: auto;
		vertical-align: text-bottom;
		margin-right: 5px
	}
	#subscribe .textFieldSet .textFieldContainer {
		display: block;
	}
	#subscribe .textFieldSet .mdc-button {
		margin: 16px auto 0;
		display: block;
		font-size: 13px;
		width: 80px;
		height: 36px
	}
	.minDialogBtn .mdc-dialog__content {
		padding-bottom: 0
	}
	.dialog__foot .mdc-dialog__button {
		font-size: 13px;
	}

	/* mainVisual */
	.mainVisual {
		height: auto;
	}
	.mainVisualTit {
		padding: 62px 10px 61px
	}
	.mainVisualTit h3 {
		line-height: 1.4;
	}
	.mainVisualTit h2 {
		font-size: 32px;
	    line-height: 1.3;
	}
	.mainVisualTit h2 span {
		box-shadow: 0 -9px 0 #ffad00 inset
	}
	.mainVisualTit .mdc-button {
		margin-right: 0;
		display: block;
		width: 120px;
	}
	.mainVisualTit .mdc-button:first-child {
		margin-bottom: 16px;
	}
	.mdcWrapperHome button {
		margin-right: 8px !important;
	}
	.mainVisualBg img {
		opacity: 0
	}
	.mvBtn {
		width: 200px
	}

	/* mainSec1 */
	#mainSec1 {
		padding: 0 10px;
	}
	
	#mainSec1 .inner h1 img {
		height: 30px;
		margin-bottom: 7px;
	}
	
	#mainSec1 .inner h1 {
	    margin-bottom: 10px;
	}
	
	#mainSec1 .inner h2 {
	    font-size: 20px;
	    font-weight: 500;
	    margin-bottom: 10px;
	    line-height: 1.4;
	}
	
	#mainSec1 .inner p {
		line-height: 20px;
	    font-size: 13px;
	    margin-bottom: 20px;
    }	
	
	.mainSubTit h2 {
		line-height: 30px;
		font-size: 20px;
		margin-bottom: 7px
	}
	.mainSubTit p {
		line-height: 20px;
		font-size: 13px;
		margin-bottom: 20px
	}
	
	/*mainSec2_1*/
	#mainSec2_1 .mainCard {
		width: 95%;
	}
	#mainSec2_1 .cardTit1 {
	    font-size: 20px;
	    margin-bottom: 15px;
	    padding: 0;
	}
	#mainSec2_1 .minCard p {
		line-height: 20px;
	    font-size: 13px;
	    margin-bottom: 5px;
	}
	#mainSec2_1 .card.shadow {
		width: auto;
		height: 240px;
	}
	#mainSec2_1 .card.minCard.firstMinCard{
		margin-left: 0;
	}
	
	.progressContainer {
		padding: 28px 0 21px
	}
	.progress1 {
		margin-bottom: 19px
	}
	.progress1.progress-moved .progress-bar {
		width: 50px;
	}
	.progress-bar {
		height: 20px
	}
	@keyframes progressAnimation1 {
	0% {width: 0%;}
	100% {width: 50px;}

}
.progress1 p {
	left: 65px;
	line-height: 20px;
	font-size: 14px
}

.progress2 {
	margin-bottom: 17px
}

.progress2+p {
	font-size: 14px;
	line-height: 1
}

/* mainSec2 */
#mainSec2 {
	padding: 60px 10px 90px
}

#mainSec2_1 {
	padding: 0 10px 50px;
}

.guide {
	padding-top: 10px;
	width: 100%
}

.guide li {
	padding: 23px 0 84px 20px
}

.guide li .dot {
	width: 9px;
	height: 9px;
	top: -5px;
	left: -5px
}

.guide li h3 {
	font-size: 15px;
	margin-bottom: 16px
}

.guide .guideP {
	line-height: 1.54;
	font-size: 13px;
	margin-bottom: 25px
}

/* mainSec3 */
#mainSec3 {
	padding: 40px 10px 0;
	margin-top: 0px
}

.nicepayStartUpLogo1 img {
	width: auto;
	height: 15px;
}

.nicepayStartUpLogo img  {
	width: auto;
	height: 23px;
}

.mainCount .numbers+p {
	font-size: 13px;
	margin-bottom: 45px;
}

.numbers {
	font-size: 18px;
	margin: 18px 0;
	line-height: 1.5;
	text-align: center;
}

.numbers__window {
	line-height: 1.5rem;
	height: 1.5rem;
}

.numbers__window>span {
	padding-right: 0.8rem;
	line-height: 1.5rem;
}

.numbers__window__digit {
	transform: translateY(-15rem);
	animation: counting 0.15s steps(1) forwards infinite;
}

.numbers__window__digit::before {
	height: 15rem;
	line-height: 1.5rem;
}

@keyframes counting { 
	0% {transform: translateY(0);}
	10%	{transform:	translateY(-1.4rem);}
	20%	{transform:	translateY(-3rem);}
	30%	{transform:	translateY(-4.4rem);}
	40%	{transform:	translateY(-6rem);}
	50%	{transform: translateY(-7.4rem);}
	60%	{transform:	translateY(-9rem);}
	70%	{transform:	translateY(-10.4rem);}
	80% {transform:	translateY(-12rem);}
	90%	{transform:	translateY(-13.4rem);}
	100% {transform: translateY(-15rem);}
}

/* .numbers__window__digit{animation-timing-function: linear} */

.mainPartner {
	margin-top: 15px;
	
}

.numbers+p {
	font-size: 14px;
	line-height: 1.77;
	margin-bottom: 40px
}
/* .mainPartner{height: 37px} */
.mainPartner li {
	width: 60px;
	margin-right: 40px;
}

/* mainSec4 */
#mainSec4 {
	padding: 0 10px
}

.joinUs {
	margin-top: -14px;
	padding: 39px 28px 40px
}

.joinUs>div:first-child {
	margin-bottom: 25px
}

.joinUs h2 {
	font-size: 20px;
	line-height: 1.5;
}

.joinUs p {
	font-size: 14px;
	line-height: 1.43;
	margin-bottom: 15px
}

.joinUs h2 br {
	display: none;
}

.mdc-button.whiteBtn {
	margin-bottom: 16px;	
}

#bottomSection .mdc-button.whiteBtn {
	margin-bottom: 0;	
	margin-left: 8px;
}

.borderRound.mdcBtnHome {
    font-size: 10px;
    height: 30px;
    width: 90px;
	display: flex;
	align-items: center;
}

.mdcBtnHome.arrowBtn {
	display: flex;
	align-items: center;
}

/* footer */
footer {
	padding-bottom: 42px
}

.footNav {
	padding-top: 50px
}
/* .footNav li:first-child{width: 100%} */
.footNav li a {
	margin: 0 12px 0 0;
	font-size: 13px;
	padding: 8px 0;
}

.footNav .toTop {
	width: 45px;
	height: 45px;
}

.footNav .toTop img {
	width: 15px;
	height: 15px;
}

.footInfo {
	margin-top: 30px;
}

.footInfo h4 {
	margin-bottom: 20px
}

.footInfo p {
	line-height: 1.4
}

.mainCountTxtLine::after {
	content: "\A";
	white-space: pre;
}
.nicepayStartUpLogo{
	margin-left:15px;
}
.logoContainer h1:first-child {
	margin-left:14px;
}
#mainSec2_1 .card.minCard {
	padding: 20px 0px 7px 20px;
    margin: 15px 0;
}
#mainSec2_1 .card.minCard p br {
	display: inline;
}
#mainSec2_1 .cardContainer {
	flex-direction: column;
}
#mainSec2_1 .card p {
	width: auto;
}
#mainSec2_1 .mainSec_img {
	width: 73%;
	margin: 0px;
}
#mainSec2_1 .goHistory {
    margin-left: -15px;
    margin-bottom: 0;
}
#mainSec2_1 .cardList {
	margin-bottom: 20px;
}
.mdc-button.borderRound {
	border-radius: 25px;
}

}