/*#ea6157 #ff9085 #fba94a #ffc444*/
/*#4b8983 #4bb7a2 #309cad #86e3bc*/

/*-------------------- common --------------------*/
html{
  scroll-behavior: smooth;
}

.fc-b { color: #4195D0 !important; }
.fc-r { color: #F33746 !important; }
.fc-ly { color: #FEEE7F !important; }
.fc-db { color: #010E39 !important; }
.fc-ipass { color: #10a83b !important; }

.bg-r { background-color: #F79C99 !important; }
.bg-lr { background-color: #F8DDC0 !important; }
.bg-db { background-color: #010E39 !important; }

.sec-btn {
	display: block;
	background-color: #F33746;
	font-size: 1.5rem;
	color: #FFF;
	border: 1px solid;
	border-radius: 1em;
	text-align: center;
	line-height: 1.5em;
	padding: 1em 0.5em;
	font-weight: bold;
	box-shadow: 0 10px 0 #f79c99, 0 10px 0 1px #FFF !important;
}
a.sec-btn:hover {
	background-color: #010E39;
	color: #FFF;
}

.sec-btn p {
	font-size: 0.65em;
	font-weight: normal;
}

.sec-btn .arrow-animate {
	position: relative;
	padding-top: calc(0.2em * 6);
}

.sec-btn .arrow-animate span {
	position: absolute;
	top: 0;
	left: 50%;
	width: calc(0.2em * 2);
	height: calc(0.2em * 2);
	margin-left: -0.2em;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg);
	-webkit-animation: arrow-animate 2s infinite;
			animation: arrow-animate 2s infinite;
	opacity: 0;
	box-sizing: border-box;
}
.sec-btn .arrow-animate span:nth-of-type(1) {
	-webkit-animation-delay: 0s;
		animation-delay: 0s;
}
.sec-btn .arrow-animate span:nth-of-type(2) {
	top: calc(0.2em * 1.5);
	-webkit-animation-delay: .15s;
			animation-delay: .15s;
}
.sec-btn .arrow-animate span:nth-of-type(3) {
	top: calc(0.2em * 3);
	-webkit-animation-delay: .3s;
			animation-delay: .3s;
}

@-webkit-keyframes arrow-animate {
	0% { opacity: 0; }
	50% { opacity: 1; }
	100% { opacity: 0; }
}
@keyframes arrow-animate {
	0% { opacity: 0; }
	50% { opacity: 1; }
	100% { opacity: 0; }
}

@media (min-width: 576px) {
	.sec-btn { font-size: 2rem; }
}

@media (min-width: 768px) {
	.sec-btn { font-size: 2.75rem; }
}


#esg-ipass .button { font-size: 16px; }

/*---------- sec_title ----------*/
.sec-title h2 {
	position: relative;
	display: inline-block;
	color: #FFF;
	font-size: 1.5em;
	font-weight: bold;
	border: 1px solid;
	margin-bottom: 0;
	padding: 0.4em 1em;
	letter-spacing: 1px;
}

.sec-title h2::before {
	content: "";
	position: absolute;
	left: -7px;
	top: -7px;
	display: block;
	border: 1px solid #010E39;
	width: 100%;
	height: 100%;
	box-sizing: content-box;
}

.sec-title p {
	font-size: 1.125em;
	margin-top: 1em;
}

@media (min-width: 576px) {
	.sec-title h2 { font-size: 2.5em; }
}

/*---------- //sec_title ----------*/


/*------------- sec_banner -------------*/
.sec_banner {
	position: relative;
	/* background-color: #BCD1DD; */
	background-image: url('/img/event/esg-ipass/main_bg.png');
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: cover;
	height: 48em;
	font-size: 10px;
}

.sec_banner .text_area {
	background-image: url('/img/event/esg-ipass/main_title_bg.png');
	background-repeat: no-repeat;
	background-size: 110%;
	background-position: center;
	width: 100%;
	margin: auto;
	padding: 12.5% 2em;
	text-align: center;
	color: #010E39;
}

.sec_banner .text_area .date {
	font-size: 1.25em;
	/* letter-spacing: 1px; */
	width: 18.5em;
	margin: auto;
	padding-bottom: 0.125em;
	border-bottom: 1px solid;
}

.sec_banner .text_area .date > span {
	display: inline-block;
	background-color: #FEC922;
	color: #FFF;
	margin-left: 0.25em;
	margin-bottom: 0.25em;
	padding: 0.1em 0.25em;
	font-size: 0.625em;
	line-height: 1.1em;
	vertical-align: middle;
}

.sec_banner .text_area .main_title { font-size: 1.75em; }

.sec_banner .text_area .main_title strong.num {
	font-size: 3em;
	color: transparent;
	line-height: 1em;
	background: -webkit-linear-gradient(45deg, #F86259, #FFCC5A);
	background: 		linear-gradient(45deg, #F86259, #FFCC5A);
	-webkit-background-clip: text;
			background-clip: text;
}

.sec_banner .text_area .main_title span.text-dot {
	width: 1em;
	height: 1em;
	background-color: #FEEE7F;
	border-radius: 50%;
	font-size: 2.5em;
	line-height: 1.1em;
}


@media (min-width: 576px) {
	.sec_banner { font-size: 16px; }
	.sec_banner .text_area { background-size: contain; max-width: 42em; }
}


@media (min-width: 768px) {
	.sec_banner { font-size: 11px; height: 38em; }
	.sec_banner > .d-flex { height: 100%; }
	.sec_banner .text_area { margin-right: -5%; }
}


@media (min-width: 992px) {
	.sec_banner { font-size: 16px; }	
}


@media (min-width: 1440px) {
	.sec_banner { font-size: 21px; }
}


/*------------- sec_info -------------*/
.sec_info {
	position: relative;
	background-image: url('/img/event/esg-ipass/bg01.png');
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: 150%;
	padding-top: 12em;
	padding-bottom: 5%;
	font-size: 10px;
}

.sec_info .info-box {
	width: 100%;
	border-radius: 5em;
	border: 0.5em solid #F33746;
	background-color: #FBECE7;
	text-align: center;
}

.sec_info .info-box:first-child { margin-bottom: 1em; }
.sec_info .info-box:last-child { margin-top: 2.5em; }

.sec_info .info-box h2 {
	background-color: #F33746;
	border-radius: 100px;
	color: #FFF;
	font-size: 2.25em;
	font-weight: bold;
	padding: 0.35em 0.5em;
}

.sec_info .info-box h3 {
	font-size: 3em;
	font-weight: bold;
	color: #4195D0;
	letter-spacing: 2px;

}

.sec_info .info-box p {
	color: #010E39;
	font-size: 2em;
	line-height: 1.75em;
}

.sec_info .info-box p > strong {
	font-size: 1.25em;
}


@media (min-width: 576px) {
	.sec_info { font-size: 16px; padding-top: 7em; }
}

@media (min-width: 768px) {
	.sec_info { font-size: 9.5px; background-size: 100%; }
	.sec_info .info-box { width: 45%; }

	.sec_info .info-box:first-child { margin-bottom: 0; margin-right: -2.5em; }
	.sec_info .info-box:last-child { margin-top: 0; margin-left: -2.5em; }
}

@media (min-width: 992px) {
	.sec_info { font-size: 13.25px; }
}

@media (min-width: 1280px) {
	.sec_info { font-size: 16px; }
}


/*------------- store-list -------------*/
.store-list .input-group .input-group-text {
	border-radius: 50rem 0 0 50rem;
	background: #FFF;
	border-right: 0 !important;
}

.store-list .input-group input {
	border-radius: 0 50rem 50rem 0;
	border-left: 0;
}

.store-list .search-block .btn-group {
	padding-top: 0.5rem;
	border-top: 2px solid #FFF;
}

.store-list .table, #esg-ipass .store-list .button { font-size: 13px; }

.store-list .table tbody tr {
	border-color: #FFF;
}
.store-list .table-hover tbody tr:hover { background-color: rgba(255,255,255,.75);
}

.store-list .table tbody tr .btn-text { color: #FFF; }

.store-list .table-hover tbody tr:hover,
.store-list .table tbody tr:hover .btn-text { color: #010E39;}

.store-list .table tbody tr th, .store-list .table tbody tr td {
	vertical-align: middle;
	padding: 0.5em; 
}

.store-list .table i.fa-heart { cursor: pointer; }

.store-list .pagination .page-item .page-link {
	background-color: transparent;
	border-color: #FFF;
	color: #FFF;
	width: 2.125em;
	height: 2.125em;
	margin: auto 0.25em;
	padding: 0.5em 0.25em;
	text-align: center;
}

.store-list .pagination .page-item.disabled .page-link { border-color: transparent; }

.store-list .pagination .page-item.active .page-link,
.store-list .pagination .page-item .page-link:hover {
	background-color: #FFF;
	color: #010E39;
}

@media (min-width: 576px) {
	.store-list .search-block .btn-group {
		border-top: 0;
		border-left: 2px solid #FFF;
		padding-top: 0;
		padding-left: 0.5rem;
	}

	.store-list .table, #esg-ipass .store-list .button { font-size: 16px; }

	.store-list .table tbody tr th, .store-list .table tbody tr td {
		padding: 0.75em;
	}
}

/*------------- sec_bonus -------------*/
.sec_usepay {
	padding: 8% 0;
}

.sec_usepay h3 {
	position: relative;
	z-index: 1;
	font-size: 1.5em;
	padding-left: 30vw;
	text-align: left;
}

.sec_usepay .usepay-block {
	background-color: rgba(255, 255, 255, .75);
	text-align: center;
	border-radius: 2em;
	margin: 1em auto;
	padding: 1em;
	z-index: 1;
}

.sec_usepay .usepay-block h4 { letter-spacing: 2px; }

.sec_usepay .usepay-block img { width: 80%; }

@media (min-width: 768px) {
	.sec_usepay .usepay-block {  }
}

@media (min-width: 576px) {
	.sec_usepay h3 {
		font-size: 2.25em;
	}

	.sec_usepay .usepay-block {
		margin: 1em;
		width: 340px;
	}
}


/*------------- sec_bonus -------------*/
.sec_bonus { padding: 8% 0; }

.sec_bonus .sec-btn { font-size: 1.75em; }

.sec_bonus .act-list {
	background-color: #fff;
	border-radius: 1em;
	font-size: 1.125em;
	padding: 2em;
}

.sec_bonus .act-list .row {
	padding: 0.5em;
}

.sec_bonus .act-list .list-title {
	text-align: center;
	background-color: #FEC922;
	padding: 0.25em;
	color: #FFF;
	font-weight: bold;
	font-size: 0.9em;
	margin-bottom: 0.5em;
}

.sec_bonus .act-list .list-content {
	text-align: justify;
	margin-bottom: 0.5em;
}

.sec_bonus .act-list .card {
	border: 1px solid rgba(243, 55, 70,.125);
	font-size: 0.9em;
}

.sec_bonus .act-list .card .card-header {
	background-color: rgba(243, 55, 70,.75);
	border-bottom: 1px solid rgba(243, 55, 70,.125);
	color: #FFF;
}

.sec_bonus .act-list .card .card-title {
	font-size: 1.25em;
	font-weight: bold;
	color: #F33746;

}

.sec_bonus .act-list ul li {
	padding: 0.25em;
	line-height: 1.5em;
}

@media (min-width: 576px) {
	.sec_bonus .sec-btn { font-size: 2.75em; }
}



/*------------- sec_map -------------*/
#map-box {
	position: relative;
	flex: 1;
	width: 100%;
	min-width: 268px;
	/*height: calc(100vh - 70px - 230px);*/
	/*height: 100vh;*/
	height: calc(100vh - 70px);
	top: 0;
	right: 0;
	margin-left: 0;
	transition: opacity 0.3s;
}

@media only screen and (min-width: 1200px) {
	#map-box {
		width: auto;
		height: calc(100vh - 70px);
		/* margin-left: 350px; */
	}
}

.map-container {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: rgb(229, 227, 223);
}


/*------------- sec_notice -------------*/
.sec_notice {
	background-color: #F8DDC0;
	padding: 8% 0;
	color: #010E39;
	font-size: 12px;
}




.sec_notice h2 {
	font-size: 2.5em;
	font-weight: bold;
	letter-spacing: 1px;
	text-align: center;
	margin: 0.5em auto;
}

.sec_notice ol li {
	font-size: 1.125em;
	padding: 0.5em;
	margin-left: 1.5em;
}

@media (min-width: 576px) {
	.sec_notice { font-size: 16px; }
}

@media (min-width: 768px) {
	.sec_notice .act-list { padding: 2em 5em; }
}

/*------------- //sec_notice -------------*/





/*----- animations (B) ----- */
.jump {
	-webkit-animation: jump 1.5s infinite ease-in alternate;
	animation: jump 1.5s infinite ease-in alternate;
}

.pulse {
	-webkit-animation: pulse 2s infinite;
	animation: pulse 2s infinite;
}


@keyframes jump {
	from {
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
	to {
		-webkit-transform: translateY(5%);
		-moz-transform: translateY(5%);
		-ms-transform: translateY(5%);
		-o-transform: translateY(5%);
		transform: translateY(5%);
	}
}

@-webkit-keyframes pulse {
	from {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
	50% {
		-webkit-transform: scale3d(1.05, 1.05, 1.05);
		transform: scale3d(1.05, 1.05, 1.05);
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@keyframes pulse {
	from {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
	50% {
		-webkit-transform: scale3d(1.05, 1.05, 1.05);
		transform: scale3d(1.05, 1.05, 1.05);
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

/* ----- animations (E) ----- */