@font-face {
	font-family:hanti;src:url(../fonts/方正粗活意简体.ttf)
}

@font-face {
	font-family:yuanti;src:url("../fonts/印品溜溜圆.ttf")
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%
}

body {
	margin: 0
}

main {
	display: block
}

h1 {
	font-size: 2em;
	margin: .67em 0
}

a {
	background-color: transparent
}

b {
	font-weight: bolder
}

dl,h1,p,ul {
	margin: 0
}

ul {
	list-style: none;
	padding: 0
}

html {
	font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
	line-height: 1.5
}

*,:after,:before {
	box-sizing: border-box;
	border: 0 solid #e2e8f0
}

h1 {
	font-size: inherit;
	font-weight: inherit
}

a {
	color: inherit;
	text-decoration: inherit
}

iframe {
	display: block;
	vertical-align: middle
}

.bg-main-blue {
	--bg-opacity: 1;
	background-color: #67b3f9;
	background-color: rgba(103,179,249,var(--bg-opacity))
}

.bg-main-pink {
	--bg-opacity: 1;
	background-color: #fec8c8;
	background-color: rgba(254,200,200,var(--bg-opacity))
}

.bg-main-orange {
	--bg-opacity: 1;
	background-color: #ffd57d;
	background-color: rgba(255,213,125,var(--bg-opacity))
}

.bg-main-green {
	--bg-opacity: 1;
	background-color: #99bc44;
	background-color: rgba(153,188,68,var(--bg-opacity))
}

.bg-main-black {
	--bg-opacity: 1;
	background-color: #202224;
	background-color: rgba(32,34,36,var(--bg-opacity))
}

.bg-cover {
	background-size: cover
}

.bg-contain {
	background-size: contain
}

.border-main-blue {
	--border-opacity: 1;
	border-color: #67b3f9;
	border-color: rgba(103,179,249,var(--border-opacity))
}

.border-main-pink {
	--border-opacity: 1;
	border-color: #fec8c8;
	border-color: rgba(254,200,200,var(--border-opacity))
}

.border-main-orange {
	--border-opacity: 1;
	border-color: #ffd57d;
	border-color: rgba(255,213,125,var(--border-opacity))
}

.border-main-green {
	--border-opacity: 1;
	border-color: #99bc44;
	border-color: rgba(153,188,68,var(--border-opacity))
}

.border-main-grey {
	--border-opacity: 1;
	border-color: #34393e;
	border-color: rgba(52,57,62,var(--border-opacity))
}

.border-b-4 {
	border-bottom-width: 4px
}

.box-border {
	box-sizing: border-box
}

.flex {
	display: flex
}

.grid {
	display: grid
}

.items-center {
	align-items: center
}

.justify-center {
	justify-content: center
}

.font-gotham {
	font-family: hanti
}

.font-azo {
	font-family: yuanti
}

.h-0 {
	height: 0
}

.h-full {
	height: 100%
}

.h-screen {
	height: 100vh
}

.text-lg {
	font-size: 1rem
}

.list-none {
	list-style-type: none
}

.text-center {
	text-align: center
}

.text-white {
	--text-opacity: 1;
	color: #fff;
	color: rgba(255,255,255,var(--text-opacity))
}

.text-title-blue {
	--text-opacity: 1;
	color: #2a659c;
	color: rgba(42,101,156,var(--text-opacity))
}

.text-title-pink {
	--text-opacity: 1;
	color: #ae6568;
	color: rgba(174,101,104,var(--text-opacity))
}

.text-title-orange {
	--text-opacity: 1;
	color: #ffa449;
	color: rgba(255,164,73,var(--text-opacity))
}

.text-title-green {
	--text-opacity: 1;
	color: #46571c;
	color: rgba(70,87,28,var(--text-opacity))
}

.text-title-grey {
	--text-opacity: 1;
	color: #a2a2a2;
	color: rgba(162,162,162,var(--text-opacity))
}

.uppercase {
	text-transform: uppercase
}

.invisible {
	visibility: hidden
}

.w-0 {
	width: 0
}

.w-2\/3 {
	width: 66.666667%
}

.w-full {
	width: 100%
}

.grid-rows-3 {
	grid-template-rows: repeat(3,minmax(0,1fr))
}

.grid-rows-4 {
	grid-template-rows: repeat(4,minmax(0,1fr))
}

.grid-rows-5 {
	grid-template-rows: repeat(5,minmax(0,1fr))
}

.row-span-1 {
	grid-row: span 1/span 1
}

.row-span-2 {
	grid-row: span 2/span 2
}

.row-span-3 {
	grid-row: span 3/span 3
}

@keyframes spin {
	to {
		transform: rotate(1turn)
	}
}

@keyframes ping {
	75%,to {
		transform: scale(2);
		opacity: 0
	}
}

@keyframes pulse {
	50% {
		opacity: .5
	}
}

@keyframes bounce {
	0%,to {
		transform: translateY(-25%);
		-webkit-animation-timing-function: cubic-bezier(.8,0,1,1);
		animation-timing-function: cubic-bezier(.8,0,1,1)
	}

	50% {
		transform: none;
		-webkit-animation-timing-function: cubic-bezier(0,0,.2,1);
		animation-timing-function: cubic-bezier(0,0,.2,1)
	}
}

h1 {
	margin: 0
}

.scene-background-image {
	background-repeat: no-repeat;
	background-position: bottom
}

.scene-03-background-image {
	background-size: 130%;
	background-position: 50%
}

.scene-13-background-image,.scene-15-background-image,.scene-18-background-image,.scene-19-background-image,.scene-27-background-image {
	background-position: center 65%
}

.scene-38-background-image {
	background-position: center 30px
}

@media (min-width:0px) {
	.sm\:bg-main-blue {
		--bg-opacity: 1;
		background-color: #67b3f9;
		background-color: rgba(103,179,249,var(--bg-opacity))
	}

	.sm\:bg-main-green {
		--bg-opacity: 1;
		background-color: #99bc44;
		background-color: rgba(153,188,68,var(--bg-opacity))
	}

	.sm\:bg-scene-01-background-image-mobile {
		background-image: url(../scenes/mobile/Sex_Education_Illustrations_01_1080x1920Artboard-01.png)
	}

	.sm\:text-xs {
		font-size: .7rem
	}

	.sm\:text-sm {
		font-size: .87rem
	}

	.sm\:text-lg {
		font-size: 1rem
	}

	.sm\:mx-2 {
		margin-left: .2rem;
		margin-right: .2rem
	}

	.sm\:py-0 {
		padding-top: 0;
		padding-bottom: 0
	}

	.sm\:py-1 {
		padding-top: .1rem;
		padding-bottom: .1rem
	}

	.sm\:py-2 {
		padding-top: .2rem;
		padding-bottom: .2rem
	}

	.sm\:px-2 {
		padding-left: .2rem;
		padding-right: .2rem
	}

	.sm\:pt-0 {
		padding-top: 0
	}

	.sm\:pt-2 {
		padding-top: .2rem
	}

	.sm\:invisible {
		visibility: hidden
	}

	.sm\:w-11\/12 {
		width: 91.666667%
	}

	.sm\:w-full {
		width: 100%
	}

	.sm\:grid-rows-2 {
		grid-template-rows: repeat(2,minmax(0,1fr))
	}

	.sm\:grid-rows-3 {
		grid-template-rows: repeat(3,minmax(0,1fr))
	}

	.sm\:grid-rows-4 {
		grid-template-rows: repeat(4,minmax(0,1fr))
	}

	.sm\:grid-rows-5 {
		grid-template-rows: repeat(5,minmax(0,1fr))
	}

	.sm\:grid-rows-6 {
		grid-template-rows: repeat(6,minmax(0,1fr))
	}

	.sm\:row-span-1 {
		grid-row: span 1/span 1
	}

	.sm\:row-span-2 {
		grid-row: span 2/span 2
	}

	.sm\:row-span-3 {
		grid-row: span 3/span 3
	}
}

@media (min-width:768px) {
	.md\:bg-main-blue {
		--bg-opacity: 1;
		background-color: #67b3f9;
		background-color: rgba(103,179,249,var(--bg-opacity))
	}

	.md\:bg-main-orange {
		--bg-opacity: 1;
		background-color: #ffd57d;
		background-color: rgba(255,213,125,var(--bg-opacity))
	}

	.md\:bg-scene-01-background-image {
		background-image: url(../scenes/desktop/Sex_Education_Illustrations_01_1920x1080Scene-01.png)
	}

	.md\:flex {
		display: flex
	}

	.md\:text-sm {
		font-size: .87rem
	}

	.md\:text-lg {
		font-size: 1rem
	}

	.md\:mx-16 {
		margin-left: 4rem;
		margin-right: 4rem
	}

	.md\:py-0 {
		padding-top: 0;
		padding-bottom: 0
	}

	.md\:px-0 {
		padding-left: 0;
		padding-right: 0
	}

	.md\:py-1 {
		padding-top: .1rem;
		padding-bottom: .1rem
	}

	.md\:py-2 {
		padding-bottom: .2rem
	}

	.md\:pt-2,.md\:py-2 {
		padding-top: .2rem
	}

	.md\:pt-3 {
		padding-top: .5rem
	}

	.md\:visible {
		visibility: visible
	}

	.md\:w-1\/2 {
		width: 50%
	}

	.md\:w-2\/3 {
		width: 66.666667%
	}

	.md\:w-2\/4 {
		width: 50%
	}

	.md\:w-3\/4 {
		width: 75%
	}

	.md\:w-4\/5 {
		width: 80%
	}

	.md\:w-5\/6 {
		width: 83.333333%
	}

	.md\:grid-rows-3 {
		grid-template-rows: repeat(3,minmax(0,1fr))
	}

	.md\:grid-rows-4 {
		grid-template-rows: repeat(4,minmax(0,1fr))
	}

	.md\:row-span-1 {
		grid-row: span 1/span 1
	}

	.md\:row-span-2 {
		grid-row: span 2/span 2
	}

	.md\:row-span-3 {
		grid-row: span 3/span 3
	}
}

@media (min-width:1024px) {
	.lg\:text-lg {
		font-size: 1rem
	}

	.lg\:text-3xl {
		font-size: 1.35rem
	}

	.lg\:py-2 {
		padding-top: .2rem;
		padding-bottom: .2rem
	}

	.lg\:pt-4 {
		padding-top: 1rem
	}

	.lg\:w-2\/6 {
		width: 33.333333%
	}
}

@media (min-width:1280px) {
	.xl\:text-base {
		font-size: .9rem
	}

	.xl\:w-1\/4 {
		width: 25%
	}
}