@media screen and (max-height: 400px) {
	main .first-section .f-card {
		height: 500px;
	}
}

@media screen and (max-width: 1380px) {
	header .center-section>div>span {
		font-size: 16px;
		line-height: 16px;
	}
	main .fourth-section .bottom-area .image-title {
		font-size: 45px;
		line-height: 50px;
	}
}

@media screen and (max-width: 1280px) {
	main .top-area,
	main .middle-area {
		height: 600px;
	}
	main .third-section .middle-area .right-area .image-title {
		font-size: 24px;
	}
	main .top-area p,
	main .third-section .middle-area .left-area>p {
		font-size: 18px;
		line-height: 25px;
		padding: 0 12%;
	}
	main .fourth-section .title {
		padding: 0 12%;
	}
}

@media screen and (max-width: 1180px) {
	main .top-area,
	main .middle-area {
		height: 550px;
	}
	main .second-section .bottom-area,
	main .third-section .bottom-area,
	main .fourth-section .bottom-area {
		height: 600px;
	}
	main .second-section .bottom-area .image-title,
	main .third-section .bottom-area .image-title {
		font-size: 38px;
	}
	main .top-area p,
	main .third-section .middle-area .left-area>p {
		font-size: 16px;
		line-height: 23px;
	}
	main .first-section .f-card .image-content {
		width: 60%;
	}
	header .center-section>div:nth-child(3)>span {
		top: 10px;
	}
	header .center-section>div:not(:nth-child(3))>span {
		top: -4px;
	}
	main .fourth-section .bottom-area .image-title {
		font-size: 37px;
		line-height: 40px;
	}
}

@media screen and (max-width: 1049px) {
	header .center-section>div:nth-child(1)>span {
		top: 10px;
	}
}

@media screen and (max-width: 993px) {
	main .top-area p,
	main .third-section .middle-area .left-area>p {
		font-size: 14px;
		line-height: 21px;
	}
	main .first-section .f-card {
		height: calc(100vh - 160px);
	}
	header .center-section>div:nth-child(2)>span {
		top: 10px;
	}
	main .first-section .f-card .image-content>h1 {
		font-size: 45px;
	}
	main .first-section .f-card .image-content>p {
		font-size: 17px;
		line-height: 24px;
	}
}

@media screen and (max-width: 930px) {
	main .second-section .bottom-area .image-title,
	main .third-section .bottom-area .image-title {
		font-size: 32px;
	}
	main .second-section .bottom-area,
	main .third-section .bottom-area,
	main .fourth-section .bottom-area {
		height: 520px;
	}
}

@media screen and (max-width: 860px) {
	main .top-area,
	main .middle-area {
		height: 500px;
	}
	main .fourth-section .bottom-area .image-title {
		font-size: 33px;
		line-height: 36px;
		width: 90%;
	}
	main .third-section .middle-area .right-area .image-title {
		font-size: 19px;
		width: 95%;
	}
	main .top-area p,
	main .third-section .middle-area .left-area>p {
		padding: 0 5%;
	}
	header>div.left-section,
	header>div.right-section {
		width: 20%;
	}
	main .top-area>div:first-child,
	main .third-section .middle-area>div:first-child {
		width: 70%;
	}
	main .top-area>div:last-child,
	main .third-section .middle-area>div:last-child {
		width: 30%;
	}
	main .third-section .top-area>div.left-area {
		width: 30%;
	}
	main .third-section .top-area>div.right-area {
		width: 70%;
	}
	main .fourth-section .top-area>div.image-container {
		width: 40%;
	}
	main .fourth-section .top-area>div {
		width: 60%;
	}
	main .fourth-section .title {
		padding: 0 5%;
		font-size: 27px;
		line-height: 30px;
	}
	header>div.center-section {
		width: 60%;
	}
	header .right .sponsored-by {
		width: 100px;
		position: relative;
		float: left;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	header .logo {
		left: 10px;
		width: 110px;
	}
	header .right .sponsored-by>a {
		font-size: 16px;
		line-height: 16px;
	}
	header .center-section>div:nth-child(2)>span {
		top: -4px;
	}
}

@media screen and (max-width: 828px) {
	header .center-section>div:nth-child(2)>span {
		top: 10px;
	}
}

@media screen and (max-width: 780px) {
	main .first-section .f-card .image-content {
		width: 80%;
	}
	main .first-section .f-card .scroll {
		width: 80px;
		height: 80px;
		bottom: -40px;
		left: calc(50% - 40px);
	}
	main .first-section .f-card .scroll .text {
		font-size: 13px;
	}
	main .first-section .f-card .scroll .icon>span:nth-child(1)::before,
	main .first-section .f-card .scroll .icon>span:nth-child(1)::after {
		width: 25%;
	}
	main .first-section .f-card .scroll .icon>span:nth-child(1)::before {
		left: calc(25% + 1px);
	}
	main .first-section .f-card .scroll .icon>span:nth-child(2)::before,
	main .first-section .f-card .scroll .icon>span:nth-child(2)::after {
		width: 35%;
	}
	main .first-section .f-card .scroll .icon>span:nth-child(2)::before {
		left: calc(18% - 1px);
	}
	main .first-section .f-card .scroll .icon>span:nth-child(3)::before,
	main .first-section .f-card .scroll .icon>span:nth-child(3)::after {
		width: 45%;
	}
	main .first-section .f-card .scroll .icon>span:nth-child(3)::before {
		left: calc(8% - 1px);
	}
	main .first-section .f-card .scroll .icon>span:nth-child(3)::after {
		left: 49%;
	}
}

@media screen and (max-width: 680px) {
	main .third-section .middle-area .right-area .image-title {
		font-size: 15px;
		width: 90%;
		font-weight: 700;
	}
	main .fourth-section .bottom-area .image-title {
		font-size: 25px;
		line-height: 30px;
		width: 90%;
	}
	main .second-section .bottom-area,
	main .third-section .bottom-area,
	main .fourth-section .bottom-area {
		height: 400px;
	}
	main .second-section .bottom-area .image-title,
	main .third-section .bottom-area .image-title {
		font-size: 23px;
	}
	main .first-section .f-card {
		height: calc(100vh - 240px);
	}
	header .logo {
		width: 90px;
	}
	header .right .sponsored-by>a {
		font-size: 14px;
		line-height: 14px;
	}
	header .center-section>div>span {
		font-size: 14px;
		line-height: 14px;
	}
	main .first-section .f-card .image-content>h1 {
		font-size: 35px;
	}
	main .first-section .f-card .image-content>p {
		font-size: 15px;
		line-height: 22px;
	}
}

@media screen and (max-width: 580px) {
	.desktop {
		display: none;
	}
	main .second-section .bottom-area,
	main .third-section .bottom-area,
	main .fourth-section .bottom-area {
		height: 300px;
	}
	main .second-section .bottom-area .image-title,
	main .third-section .bottom-area .image-title {
		font-size: 19px;
		width: 90%;
	}
	main .top-area p,
	main .third-section .middle-area .left-area>p {
		font-size: 12px;
		line-height: 18px;
	}
	header>div.left-section.mobile {
		display: inline-block;
	}
	header {
		height: 160px;
		line-height: 80px;
	}
	header .logo {
		width: auto;
	}
	header>div.center-section {
		width: calc(100% - 20px);
		padding: 10px;
	}
	header .right .sponsored-by {
		width: auto;
		right: 0;
		float: none;
		top: 0;
		left: 0;
		-webkit-transform: translate(0, -50%);
		-ms-transform: translate(0, -50%);
		transform: translate(0, -50%);
	}
	header .right .sponsored-by>a {
		font-size: inherit;
		line-height: inherit;
	}
	header>div.left-section,
	header>div.right-section {
		width: 35%;
	}
	header>div.center-section,
	header .center-section>div,
	header>div.left-section,
	header>div.right-section {
		height: 50px;
	}
	header>div.left-section .logo {
		vertical-align: top;
	}
	header>div.right-section {
		float: right;
		right: 10px;
		position: relative;
	}
	header .center-section>div>span {
		top: auto!important;
	}
}

@media screen and (max-width: 520px) {
	main .first-section .f-card .image-content>h1 {
		font-size: 25px;
	}
	main .first-section .f-card .image-content>p {
		font-size: 13px;
		line-height: 19px;
	}
	main .fourth-section .bottom-area .image-title {
		font-size: 21px;
		line-height: 25px;
	}
}

@media screen and (max-width: 488px) {
	header {
		height: 140px;
		line-height: 80px;
	}
	header .right .sponsored-by>a {
		font-size: 16px;
		line-height: 16px;
	}
	header .logo {
		width: 110px;
	}
	header .center-section>div>span {
		font-size: 12px;
		line-height: 12px;
	}
	header .right .sponsored-by>a {
		font-size: 14px;
		line-height: 14px;
	}
}

@media screen and (max-width: 420px) {
	main .top-area p,
	main .third-section .middle-area .left-area>p {
		font-size: 11px;
		line-height: 16px;
		font-weight: 700;
	}
	main .second-section .bottom-area,
	main .third-section .bottom-area,
	main .fourth-section .bottom-area {
		height: 230px;
	}
	main .second-section .bottom-area .image-title,
	main .third-section .bottom-area .image-title {
		font-size: 15px;
	}
	main .third-section .middle-area .right-area .image-title {
		font-size: 13px;
		width: 100%;
		font-weight: 700;
	}
}

@media screen and (max-width: 400px) {
	main .first-section .f-card {
		height: calc(100vh - 340px);
	}
}

@media screen and (max-width: 360px) {
	header .right .sponsored-by {
		-webkit-transform: translate(0, -36%);
		-ms-transform: translate(0, -36%);
		transform: translate(0, -36%);
	}
	main .top-area p,
	main .third-section .middle-area .left-area>p {
		font-size: 10px;
		line-height: 14px;
		font-weight: 700;
	}
}