body {
	margin: 0;
	padding: 0;
	font-weight: bold;
	font-family: 'Nunito Sans', sans-serif;
	color: rgba(33, 74, 107, 1)
}

/*section {*/
/*	position: relative;*/
/*	align-items: center;*/
/*}*/


@media only screen and (min-width: 800px) {
	#div-cover-img {
		display: block;
		background-image: url("./img/cover/img-cover.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		max-width: 1440px;
		margin: 0 auto;
	}

	#div-cover-img:before {
		content: "";
		display: block;
		padding-top: 56.26%;
	}

	.section-title {
		font-size: 3.7rem;
		margin-left: 5rem;
		display: inline-block;
		white-space: nowrap;
	}

	#span-update-up {
		display: inline-block;
		width: 2.7rem;
		font-size: 2rem;
		color: white;
		background-color: rgba(255, 193, 37, 0.8);
		border: 1px rgba(255, 193, 37, 0.8);
		padding: 0.3rem;
		border-radius: 2em 2em;
		transform: translateY(-1rem);
	}

	#span-update-ep-title {
		display: inline-block;
		font-size: 2.2rem;
		margin: 0.5rem auto 0.5rem 5rem;
		color: black;
	}

	.update-ep-pic-unit {
		display: flex;
		flex-direction: row;
		overflow-x: auto;
		margin-left: 5rem;
	}

	.update-ep-pic-unit img {
		max-width: 210px;
		min-width: 210px;
		height: 210px;
		margin: 0 0.5rem;
	}

	.update-ep-pic-unit>img:first-child {
		margin-left: 0;
	}

	.update-ep-pic-unit img:last-child {
		max-width: 105px;
		min-width: 105px;
		max-height: 210px;
		min-height: 210px;
		margin-right: 0;
	}

	#div-update-more {
		font-size: 1rem;
		width: max-content;
		margin: 1.5rem 1rem 1.5rem auto;
	}

	/*#section-update {*/
	/*	display: flex;*/
	/*	flex-direction: row;*/
	/*	justify-content: flex-start;*/
	/*}*/
	/*#div-update {*/
	/*	display: flex;*/
	/*	flex-direction: column;*/
	/*	max-width: 1436px;*/
	/*	min-width: 1200px;*/
	/*	margin: 0 auto;*/
	/*	padding: 0 10%;*/
	/*}*/
	/*#div-update-title {*/
	/*	display: inline-flex;*/
	/*	align-items: center;*/
	/*	height: 140px;*/
	/*}*/



	/*.update-ep-pic-unit img:last-child {*/

	/*}*/
	/*.update-ep-pic {*/
	/*	margin: 0 0.75rem;*/
	/*	max-width: 201px;*/
	/*	min-width: 201px;*/
	/*	max-height: 201px;*/
	/*}*/

	#section-instagram {
		background: linear-gradient(277deg, #9F3999, #5D58C9);
		color: white;
		min-height: 100px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 100px;
	}

	#div-instagram {
		display: flex;
		flex-direction: row;
		width: 100%;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	#section-instagram i {
		margin: auto 1rem auto auto;
		font-weight: normal;
		font-size: 2.5rem;
	}

	#section-instagram span {
		border: solid 2px white;
		border-radius: 2em 2em;
		padding: 0.75rem 1.6rem;
		font-size: 1rem;
		font-weight: normal;
		margin: auto auto auto 0;
	}

	#section-character {
		justify-content: center;
	}

	#div-character-title>span {
		margin-top: 2rem;
		margin-bottom: 2rem;
	}

	#div-character1,
	#div-character3,
	#div-character5 {
		display: grid;
		height: inherit;
		grid-template-areas: "pic name" "pic intro";
		grid-template-rows: 1fr 1fr;
		grid-template-columns: 1fr 2fr;
	}

	#div-character1 img,
	#div-character3 img,
	#div-character5 img {
		display: block;
		margin-left: auto;
		margin-right: 2rem;
	}

	#div-character2 {
		display: grid;
		height: inherit;
		grid-template-areas: "name pic" "intro pic";
		grid-template-rows: 1fr 1fr;
		grid-template-columns: 2fr 1fr;
	}

	#div-character2 img {
		display: block;
		margin-left: 2rem;
		margin-right: auto;
	}

	#div-character2 span {
		display: block;
		margin-left: calc(10vw + 1rem);
		margin-right: auto;
	}

	#div-character4 {
		display: grid;
		height: inherit;
		grid-template-areas: "pic1 name pic2" "pic1 intro pic2";
		grid-template-rows: 1fr 1fr;
		grid-template-columns: 1fr 1.5fr 1fr;
	}

	#div-character-pic41 {
		grid-area: pic1;
		align-self: center;
	}

	#div-character-pic41 img {
		display: block;
		margin-left: auto;
		margin-right: 1rem;
	}

	#div-character-pic42 {
		grid-area: pic2;
		align-self: center;
	}

	#div-character-pic42 img {
		display: block;
		margin-left: 1rem;
		margin-right: auto;
	}

	.character-pic {
		grid-area: pic;
		align-self: center;
	}

	.character-name {
		grid-area: name;
		font-family: ActionManBold, Nunito Sans, sans-serif;
		font-size: 3rem;
		align-self: end;
		justify-self: left;
		margin-bottom: 1.1rem;
	}

	.character-intro {
		grid-area: intro;
		align-self: start;
		justify-self: left;
		font-family: 'Nunito Sans Semi Bold', Nunito Sans, sans-serif;
		font-weight: bold;
		color: black;
		width: 80%;
	}

	#div-character2 article {
		display: block;
		width: 100%;
		margin-left: calc(10vw + 1rem);
		margin-right: auto;
	}

	#div-character4 article {
		width: 124%;
	}

	.character-background {
		height: 400px;
	}

	.character-unit {
		margin: 0 auto;
		width: 100%;
		max-width: 1440px;
	}

	#section-character>div:nth-of-type(odd) {
		background-color: rgba(200, 200, 200, 0.2);
	}

	#section-stickers {
		background-color: rgba(200, 200, 200, 0.2);
	}

	#div-stickers {
		display: grid;
		width: inherit;
		grid-template-areas: "title layout" "logo layout" "intro layout" "qr layout" "ad layout";
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 6rem 21rem 10rem 12rem 6rem;
		font-size: 1rem;
		font-weight: normal;
	}

	#div-stickers-title {
		grid-area: title;
		margin-top: 2rem;

	}

	#div-stickers-logo img {
		margin-top: 2rem;
		margin-left: 3.5rem;
		width: 20rem;

	}

	#div-stickers-layout {
		grid-area: layout;
	}

	#div-stickers-layout img {
		display: block;
		height: 51rem;
		margin-top: 2rem;
		margin-left: auto;
		margin-right: auto;
	}

	#div-stickers-logo {
		grid-area: logo;
	}

	#div-stickers-intro {
		grid-area: intro;
		font-family: 'Nunito Sans Semi Bold', Nunito Sans, sans-serif;
		font-weight: bold;
	}

	#div-stickers-intro article {

		color: black;
		width: 60%;
		margin-left: 5rem;
		white-space: normal;
	}

	#div-stickers-qr {
		grid-area: qr;
	}

	#div-stickers-qr img {
		display: block;
		margin: 0 auto 0 10rem;
		width: 12rem;
	}

	#div-stickers-ad {
		grid-area: ad;
	}

	#div-stickers-ad span {
		background-color: #2DBF03;
		border: solid #2DBF03 1px;
		border-radius: 2em 2em;
		display: block;
		width: 11.2rem;
		font-size: 1rem;
		padding: 0.25rem 0.25rem;
		margin: 1rem auto 1rem 10rem;
		text-align: center;
		color: white;
	}

	#section-copyright {
		background-color: #333;
	}

	#div-copyright {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 auto;

		color: white;
	}

	#div-copyright>div {
		display: flex;
		width: 20rem;
		margin: 0.7rem auto;
		justify-content: center;
	}

	#section-copyright a {
		margin: auto 1rem;
	}

	#section-copyright i {
		color: white;
	}

	#section-copyright span {
		align-self: center;
		font-size: 1rem;
	}

	#section-copyright img {
		width: 2rem;
	}

	#div-copyright {
		font-size: 0.7rem;
	}

	#span-stickers-ad-phone {
		display: none !important;
	}
}

@media only screen and (max-width: 799px) {

	#div-cover-img {
		display: block;
		background-image: url("./img/cover/hero_2.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	#div-cover-img:before {
		content: "";
		display: block;
		padding-top: 100%;
	}

	#section-cover {
		margin-top: 3rem;
	}

	.section-title {
		display: inline-block;
		font-size: 0.8rem;
		margin-left: 1rem;
	}

	#div-update {
		margin-top: 2rem;
	}

	#span-update-up {
		display: inline-block;
		font-size: 0.4rem;
		color: white;
		background-color: rgba(255, 193, 37, 0.8);
		border: 1px rgba(255, 193, 37, 0.8);
		padding: 0.075rem;
		border-radius: 2em 2em;
		transform: translateY(-0.125rem);
	}

	#span-update-ep-title {
		display: block;
		width: inherit;
		margin-bottom: 0.4rem;
		margin-left: 1rem;
		font-size: 0.375rem;
		color: black;
	}

	.update-ep-pic-unit {
		display: flex;
		flex-direction: row;
		overflow-x: scroll;
		margin-left: 1rem;
	}

	.update-ep-pic-unit>img {
		margin: 0 0.33rem;
		max-width: 6.7rem;
		min-width: 6.7rem;
		height: 6.7rem;
	}

	.update-ep-pic-unit>img:first-child {
		margin-left: 0;
	}

	.update-ep-pic-unit img:last-child {
		max-width: 3.35rem;
		min-width: 3.35rem;
		margin-right: 0;
	}

	#section-character {
		margin-top: 0.7rem;
	}

	#section-character>div {
		margin: 0 auto;
		width: 8.55rem;
		display: flex;
	}

	.character-unit {
		width: 100vw;
		overflow: hidden;
	}

	#div-character-title {
		text-align: center;
	}

	#div-character-title>span {
		display: block;
		margin: 0.4rem auto 0.25rem;
		white-space: nowrap;
	}

	.character-name {
		text-align: center;
	}

	#section-character>div:first-child {
		display: block;
		height: 2rem;
	}

	#div-character4 {}

	#section-character img {
		display: block;
		width: 5.2rem;
		margin: 0.7rem auto;
	}

	#div-character-pic4 {
		display: flex;
		flex-direction: row;
	}

	#div-character-pic4>img:first-child {
		width: 3.25rem;
		height: 3.25rem;
		margin-left: auto;
		margin-right: 0.2rem;
	}

	#div-character-pic4>img:last-child {
		width: 3.25rem;
		height: 3.25rem;
		margin-left: 0;
		margin-right: auto;
	}

	.character-pic {}

	.character-name {
		font-family: ActionManBold, Nunito Sans, sans-serif;
		align-self: center;
		justify-self: center;
		font-size: 0.8rem;
	}

	.character-intro {

		align-self: center;
		justify-self: left;
		font-size: 0.5rem;
		margin-bottom: 1.7rem;
	}

	.character-background {}

	#section-stickers {
		width: inherit;
		background-color: rgba(200, 200, 200, 0.2);
		margin-bottom: 3rem;
	}

	#div-stickers {
		display: flex;
		flex-direction: column;
		width: 8.55rem;
		margin: 0 auto;
		font-size: 0.45rem;
	}

	#div-stickers-title>span {
		margin-left: 0;
		margin-top: 1rem;
		margin-bottom: 0.25rem;
	}

	#div-stickers-intro {
		margin-top: 0.7rem;
	}

	#div-stickers-intro article {
		color: #707070;
		font-weight: normal;
	}

	#div-stickers-qr img {
		display: block;
		width: 6rem;
		margin: 0.8rem auto;
	}

	#div-stickers-ad span {
		background-color: #2DBF03;
		border: solid #2DBF03 1px;
		border-radius: 2em 2em;
		display: block;
		width: 4.7rem;
		font-size: 0.4rem;
		padding: 0.25rem 0.25rem;
		margin: 0 auto;
		text-align: center;
		color: white;
	}

	#div-stickers-layout img {
		display: block;
		width: 8.55rem;
		margin: 1.2rem auto;
	}
}

@media only screen and (min-width: 800px) {
	#div-instagram {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		max-width: 1440px;
		padding: 1rem 0;
	}

	#div-instagram img {
		width: 50px;
		height: 50px;
		margin: auto 1rem auto auto;
		cursor: pointer;
	}

	#span-instagram {
		border: none;
		padding: 0.75rem 1.6rem;
		font-size: 1rem;
		font-weight: normal;
		margin: auto auto auto 0;
		cursor: pointer;
		color: white;
	}

	#span-toggle {
		font-size: 2rem !important;
		color: white;
		position: absolute;
		right: 10px;
		cursor: pointer;
		border: none !important;
	}

	#div-instagram-content {
		display: none;

		color: white;
		padding: 1rem;
		font-size: 1rem;
		font-weight: normal;
		width: 100%;
		max-width: 1440px;

	}

	#div-instagram-content.show {
		display: block;

	}

	#instagram-text-content {
		max-width: 740px;

		margin: 0 auto;

	}

	#button-right-align {
		float: right;
		margin-right: 20px;
		width: auto;

	}

	.curve-icon {
		border-radius: 50px;
		border: none;
		font-size: 16px;
		padding: 12px 15px;
		text-decoration: none;
		cursor: pointer;
		color: black !important;
	}

	.curve-icon i {
		font-size: 10px !important;
		vertical-align: middle;
		padding-left: 5px;
		color: black !important;
	}
}

@media only screen and (max-width: 799px) {

	#div-instagram {
		display: flex;
		flex-direction: row;
		height: inherit;
		width: inherit;
		justify-content: center;
		align-items: center;
		position: relative;
		padding: 1rem 1rem;
		padding-left: 0;
	}

	#div-instagram img {
		width: 1.2rem;
		height: 1.2rem;
		margin: auto 0.25rem;

	}

	#span-instagram {
		display: flex;
		justify-content: center;
		align-items: center;
		border: solid 1px white;
		border-radius: 1em;
		padding: 0.2rem 0.4rem;
		font-size: 15px;
		font-weight: normal;
		margin: auto 0.25rem;
		cursor: pointer;
		color: white;
		white-space: normal;
		line-height: 1.2;
		max-width: 6rem;
		text-align: center;
	}

	#span-toggle {
		font-size: 0.6rem !important;
		color: white;
		position: absolute;
		right: 20px;

		top: 50%;
		transform: translateY(-50%);
		cursor: pointer;
		border: none !important;
	}

	#section-instagram {
		background: linear-gradient(277deg, #9F3999, #5D58C9);
		color: white;
		margin: 1rem auto 0;
		min-height: 1.9rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	#div-instagram-content {
		display: none;
		background: linear-gradient(277deg, #9F3999, #5D58C9);
		color: white;
		padding: 0.5rem;
		font-size: 15px;
		font-weight: normal;
		width: 100%;
	}

	#div-instagram-content.show {
		display: block;
		margin-bottom: 1rem;

	}

	#instagram-text-content {
		max-width: 100%;

		margin-left: 2rem;
		margin-right: 2rem;
		margin-bottom: 10px;
	}

	#button-right-align {
		float: right;
		margin-right: 10px;
		width: auto;

	}

	.curve-icon {
		border-radius: 50px;
		border: none;
		font-size: 0.4rem;
		color: black !important;
		padding: 0.25rem 0.5rem;
		text-decoration: none;
	}

	.curve-icon i {
		font-size: 10px !important;
		vertical-align: middle;
		padding-left: 5px;
		color: black !important;
	}
}