/*------- common style ------*/
:root {
	--color-black: #1D1D1D;
	--color-cyan: #00FFFF;
	--color-yellow: #F4FEA8;
	--bg-blue: #0000C0;
	--bg-redorange: #FF7473;
	--sphl: 0 0.2em;
	--viewheight: calc(100vh - 96px);
}
/* layout */
#fullpage {
	/* padding-top: 96px; */
}
#header{
	/* display: none !important; */
}



.section {
	position: relative;
	width: 100%;
	padding-top: 96px;
}

@media (max-width: 767px) {
	.section {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.section .slide {
		margin-top: 20px;
		margin-bottom: 20px;
	}
}

.section p {
	font-weight: 500;
}
.section h2{
	font-family: 'Anton', sans-serif;
	font-size: 85px;
	line-height: 130%;
}

.section h3 {
	font-size: 30px;
	line-height: 120%;
}

.section .button-video {
	width: 76px;
	height: 76px;
}

.section .border-text{
	display: inline-block;
	font-family: 'Anton', sans-serif;
	padding: 20px;
	font-size: 40px;
	border: 5px solid;
}

.section .video
{
	width: 100%;
	height: calc(100vh - 140px);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: white;
}
/* .section .video .content {
	color: white;
} */

@media (max-width: 767px) {
	.section p {
		/* font-weight: 400; */
		line-height: 28px;
	}

	.section .video {
		padding: 20px;
	}

	.section .m-mg20 {
		margin: 20px;
	}

	.section .m-p20 {
		padding: 20px;
	}

	.section .m-mtb20 {
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.section .m-text-center {
		text-align: center !important;
		/* padding: 0 20px; */
	}

	.section .anime {
		position: relative !important;
		right: auto;
		left: auto;
		width: calc(100% - 20px);
		height: auto;
	}

	.section form .answers {
		margin-top: 40px;
	}
	.section form .answers .answer {
		margin: 20px;
	}

	.section form .answers .answer label::before,
	.section form .answers .answer label::after {
		top: -12px;
	}
}

.max700 {
	max-width: 700px;
	margin: auto;
}

.max800 {
	max-width: 800px;
	margin: auto;
}

/* Common */
span > b{
	font-weight: 900;
}
span[class^="bg-"] {
	padding: var(--sphl);
}
span.bg-cyan {
	background-color: var(--color-cyan);
	color: var(--color-black);
}
span.bg-yellow {
	background-color: var(--color-yellow);
	color: var(--color-black);
}
span.bg-redorange {
	background-color: var(--bg-redorange);
}
span.bg-cyan {
	background-color: cyan;
}

.bgover {
	background-color: rgba(0, 0, 0, 0.35);
}

.font18 {
	font-size: 18px;
}
.font30 {
	font-size: 30px;
	line-height: 120%;
}

a.underblack {
	color: var(--color-black);
	text-decoration: underline;
}


/* --------------Section 0 ---------------*/

#section0 {
	background-color: var(--bg-blue) !important;
    color: white;
}

#section0 h2{
	text-align: left;
}

#section0 h2 span {
	background-color: var(--bg-blue);
    width: fit-content;
    padding-right: 10px;
}

/* #section0 .anime{
	position: absolute;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: calc(100% - 140px);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
} */
#section0 .bgover {
	background-color: rgba(0,0,192,0.8);
	/* box-shadow: 0px 0px 7px 8px rgba(0,0,192,0.8); */
}

@media (max-width: 767px) {
	#section0 {
		padding-top: 150px !important;
	}

	#section0 h2 {
		font-size: 63px;
		text-align: center;
	}

	#section0 .bgover {
		background-color: transparent !important;
	}
}
/* --------Section 1-1 ---- */

#section1{
	background-color: var(--bg-redorange) !important;
}

#section1 .slide1 p, 
#section1 .slide1 span{
	position: relative;
	color: #1D1D1D;
	z-index: 1;
}
#section1 .slide1 .block-fixed.anime {
	top: auto;
    bottom: 0;
    /* left: 0;
    width: 50vh; */
    justify-content: flex-end;
    align-items: flex-end;
}

#section1 .slide1 .message {
	padding-left: 40px;
	padding-right: 40px;
}

#section1 .slide1 .quote
{
	position: absolute;
	top: -15px;
	left: -10px;
	width: 80px;
	z-index: 0;
}

@media (max-width: 767px) {
	#section1 .font30 {
		font-size: 20px;
		margin-top: 20px;
	}

	#section1 .slide1 .block-fixed.anime {
		display: none;
	}

	#section1 .slide1 .message {
		padding-left: 40px;
		padding-right: 40px;
	}
	#section1 .slide1 .quote {
		top: 18px;
		left: 15px;
		z-index: 0;
		width: 40px;
	}
}
/* --------------Section 1-2 ----------------------------*/

#section1 .slide2{
	background-color: var(--bg-redorange) !important;
}

#section1 .slide2 p{
	font-weight: normal;
}

#section1 .slide2 .video {
	background-image: url('../images/S22-Video@2x.jpg');
}

@media (max-width: 767px) {
	#section1 .slide2 .video {
		background-image: url('../images/S22-Video.jpg') !important;
		height: auto;
		min-height: 503px;
	}
}
/* -------------Section 1-3------------------------------- */

#section1 .slide3
{
	background-color: var(--bg-redorange) !important;
}

#section1 .slide3 .answer
{
	text-align: left;
}

@media (max-width: 767px) {
	#section1 .slide3 .max700 {
		text-align: center;
	}
	#section1 .slide3 .anime {
		display: flex;
		justify-content: center;
		align-items: center;
		left: 0;
	}
}
/* --------------Section 2 ---------------------------------*/

#section2
{
	background-color: var(--color-yellow) !important;
}

#section2 > .container > .content > .row {
	margin-bottom: 30px;
}



#section2 .anime {
	bottom: 0;
	z-index: 0;

	display: flex;
	justify-content: center;
	align-items: center;
}

#section2 .slide1 .title {
	position: absolute;
	top: 40px;
	left: 15%;
	width: 70%;
	max-width: 400px;
	z-index: 2;
}

#section2 .slide1 .bgimage {
	bottom: 0;
	width: 100%;
	height: 100%;

	margin: 30px 0;

	display: flex;
	justify-content: center;
	align-items: flex-start;
}

#section2 .slide1 .bgimage img{
	width: 100%;
}

#section2 .slide3 .anime {
	width: auto;
	height: 400px;
}

#section2 .slide5 .title {
	position: absolute;
	top: 0;
	left: 30px;

	width: 50%;
	max-width: 300px;
	height: 100%;

    justify-content: center;
    align-items: center;
    display: flex;

	z-index: 2;
}

#section2 .slide5 .anime {
	width: 100%;
	height: 444px;
}


@media (max-width: 767px) {
	#section2 .anime {
		width: 100% !important;
		height: auto !important;
	}
	#section2 lottie-player {
		width: 100% !important;
		height: auto !important;
	}

	#section2 .slide1 .title,
	#section2 .slide5 .title {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
		max-width: unset;
		display: block;
	}
	
	#section2 .slide1 .font30 {
		font-size: 20px;
		text-align: center;
	}
	#section2 .slide1 .bgimage {
		position: relative;
	}

	#section2 .slide1 .bgimage img {
		height: auto;
	}
	
}



@media (max-width: 767px) {
	
}
/* --------------Section 5 ---------------------------------*/

#section3
{
	background-color: var(--bg-blue) !important;
	color: white;
}

#section3 .slide2 .block-fixed {
	justify-content: flex-end;
    left: 100%;
}

#section3 .slide2 .bottom-btn{
	position: absolute;
	bottom: 15%;
	right: 0px;
}

#section3 .slide1 .video {
	background-image: url('../images/S31-Video@2x.jpg');
}

@media (max-width: 767px) {
	#section3 .slide2 .anime {
		position: relative;
		right: auto;
	}
	#section3 .slide2 .bottom-btn {
		position: relative;
		bottom: auto;
		right: auto;
		margin: 20px;
	}

	#section3 .slide1 .video {
		background-image: url('../images/S31-Video.jpg') !important;
		min-height: 503px;
	}

	#section3 .slide2 .block-fixed {
		justify-content: flex-start;
		left: 0;
	}
}
/* --------------Section 6 ---------------------------------*/

#section4
{
	background-color: var(--bg-redorange) !important;
}

#section4 .slide1 h3 {
	font-size: 40px;
	font-weight: 900;
	max-width: 988px;
}

#section4 .slide1 .block-fixed.anime {
	top: auto;
    bottom: 0;
    right: 0;
    width: 50vh;
    justify-content: flex-start;
    align-items: flex-end;
}

#section4 .slide3 .recvid {
	width: 260px;
	height: 260px;

	display: flex;
	justify-content: center;
	align-items: center;

	background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

@media (max-width: 767px) {
	#section4 .slide1 h3 {
		font-size: 30px;
	}

	#section4 .slide1 .block-fixed.anime {
		display: none;
	}

	#section4 .slide3 .recvid {
		margin: 20px 0;
	}	
}
/* --------------Section 7 ---------------------------------*/
#section5
{
	background-color: var(--color-yellow) !important;
}

/* --------------Section 8 ---------------------------------*/

#section6 {
	background-color: #0000C0 !important;
    color: white;
}

#section6 h3{
	font-size: 50px;
	color: white;
	margin: 20px;
}

#section6 .iels {
	font-size: 35px;
	font-weight: bold;
}

#section6 .recvid {
	position: relative;
	width: 100%;
	max-width: 316px;
	max-height: 143px;

	margin: 0 10px;

}
#section6 .recvid img {
	width: 100%;
}

#section6 .recvid .button {
	position: absolute;
	margin: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@media (max-width: 767px) {
	#section6 h3{
		font-size: 40px;
	}

	#section6 .recvid {
		margin: 10px 0;
	}	
}

/*--------------*/

#footer {
	background-color: #000000;
}

#footer > .container {
	padding: 40px 0px;
}
#footer .lrborder{
	border-left: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
}

#footer p{
	font-family: 'Roboto',sans-serif;
	font-size: 13px;
	line-height: 16px;
	color: #ffffff;
}
#footer img.logofooter{
	height: 5rem;
}

#footer ul.menu {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: flex-start;
}

#footer ul.menu li a {
	font-family: Roboto,sans-serif;
	font-size: 18px;
	line-height: 22px;
	color: #ffffff;
}

#footer ul.social-icon {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}

@media (max-width: 767px) {
	
	#footer > .container {
		margin: 20px;
	}	

	#footer .flex-center {
		flex-direction: column;
	}

	#footer  .flex-center .content {
		margin: 20px;
	}
	#footer .lrborder {
		border: 0;
		border-top: 1px solid #ffffff;

	}

	#footer ul.menu li a {
		font-size: 16px;
	}

	#footer ul.social-icon {
		justify-content: flex-start;
	}
	#footer ul.social-icon img {
		height: 24px;
		margin-right: 20px;
	}
}