/************ RWD ************/
 @media screen and (max-width:1280px) {
	.part1 {
		/* background-size: cover; */
		background-size: 140%;
		background-position: 50% 50%;
	}
	.part1 .container .deco img {
		position: absolute;
        bottom: 20.2%;
		left: -30%;
 }

 @media screen and (max-width:1200px) {
	.area_index {
		/* height: 700px; */
	}
	.area_index .main {
		/* height: 700px; */
	}
	.title h1{
		width: 80%
	}
	.directLink {
		width: 100%;
	}
	.directLink .stickerios {
		width: 100%;
	}
	.directLink .stickerandroid {
		width: 100%;
	}
	.directLink .stickerios img {
		width: 100%;
	}
	.directLink .stickerandroid img{
		width: 100%;
	}
	.directLink .qrcodeios {
		width: 50%;
	}
	.directLink .qrcodeandroid {
		width: 50%;
		/* background: var(--Natural_0); */
	}
	.section {
		/* height: 700px; */
	}
	#all .container {
		/* height: 700px; */
	}
	.part1 {
		/* background-size: cover; */
		background-size: 140%;
		background-position: 50% 50%;
	}
	.part1 .container .deco img {
		position: absolute;
        bottom: 21.5%;
		left: -30%;
	} 
	.part1 .container .description p{
		max-width: 60%;
	}
	.part2 .container .description {
		padding-left: 14%;
	}
	.part2 .container .deco img {
		position: absolute;
		top: 8%;
		left: 22%;
	}
	.part3 .container .description p{
		max-width: 320px;
	}
	.part3 {
		background-size: 50%;
		background-position: 130% 140%;
	}
	.part4 .container .description {
		padding-left: 14%;
	}
}

@media screen and (max-width:1024px) {
	h2 {
		font-size: 4.5rem; 
		line-height: 60px;
		margin-bottom: 24px;
	}
	p {
		font-size: 2rem;
		line-height: 1.7; 
		/* max-width: 400px; */
	}
	.number {
		font-size: 3rem; 
		/* margin-bottom: 28px; */
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}
	.area_index {
		/* height: 600px; */
		background-size: 140%;
	}
	.area_index .main {
		/* height: 600px; */
	}
	.textArea {
		padding-left: 5%;
	}
	.title h1{
		width: 105%;
		margin-bottom: 6px;
	}
	.directLink {
		padding-left: 0;
	}
	.directLink .qrcodeios, .directLink .qrcodeandroid {
		display: none;
	}
	.section {
		/* height: 600px; */
	}
	#all .container {
		/* height: 600px; */
	}
	.part1 {
		/* background-size: 130%; */
		/* background-position: 60% 60%; */
	}
	.part1 .container .deco img {
		/* position: absolute; */
		/* top: 11%; */
		/* left: -30%; */
	}
	.part1 .container .description {
		/* padding-top: 9%; */
	}
    .part1 .container .description .description_block {
        height: 360px;
    }
	.part2 .container .description {
		padding-left: 10%;
	}
    .part2 .container .description .description_block {
        height: 360px;
    }
	.part2 .container .deco img {
		position: absolute;
		top: 12%;
		left: 18%;
	}
	.part3 {
		background-size: 50%;
		background-position: 130% 150%;
	}
	.part3 .container .deco img {
		position: absolute;
		top: 8%;
		left: -17%;
		}
    .part3 .container .description .description_block {
        height: 360px;
    }
	.part4 .container .description {
		padding-left: 10%;
	}
    .part4 .container .description .description_block {
        height: 360px;
    }
	.part4 .container .description p {
		max-width: 90%;
	}
	.part4 .container .deco img {
		position: absolute;
		top: 3%;
		left: 12%;
	}
}

@media screen and (max-width:992px) {
	.part1 .container .deco img {
		/* position: absolute; */
		/* top: 12.5%; */
		/* left: -30%; */
	}
    .part1 .container .description .description_block {
        height: 350px;
    }
	.title .slogan {
		width: 120%;
	}
	.title .slogan p {
		font-size: 3.5rem;
		letter-spacing: 3px; 
	}
	.directLink {
		width: 100%;
		padding-left: 0;
		/* border: 1px solid greenyellow; */
	}
	.directLink .stickerios img {
		width: 100%;
	}
	.directLink .stickerandroid img{
		width: 100%;
	}
    .part2 .container .description .description_block {
        height: 350px;
    }
    .part3 .container .description .description_block {
        height: 350px;
    }
	.part3 .container .description p {
		max-width: 64%;
	}
    .part4 .container .description .description_block {
        height: 350px;
    }
	}

@media screen and (max-width:853px) {
	.area_index {
		/* height: 500px; */
		/* background-size: 140%; */
	}
	.area_index .main {
		/* height: 500px; */
	}
	.section {
		/* height: 500px; */
	}
	#all .container {
		/* height: 500px; */
	}
	.title .slogan p {
		font-size: 3rem;
		letter-spacing: 3px; 
	}
    .part1 .container .description .description_block {
        height: 300px;
    }
    .part2 .container .description .description_block {
        height: 300px;
    }
    .part3 .container .description .description_block {
        height: 300px;
    }
    .part4 .container .description .description_block {
        height: 300px;
    }
}

@media screen and (max-width:820px) {
	.part1 .container .deco img {
		position: absolute;
		top: 15%;
		left: -30%;
	}
}

@media screen and (max-width:768px) {
	.part1 .container .deco img {
		position: absolute;
		top: 16%;
		left: -30%;
	}
}

@media screen and (max-width:767px) {
	.number {
        margin: 0 auto 28px auto;
    }
    .area_index {
		height: auto;
		background-size: 160%;
	}
	.area_index .main {
		height: auto;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	.area_index .topimage {
		width: 100%;
		height: auto;
	}
	.area_index .topimage img {
		width: 100%;
		position: static;
	}
    .part1 {
        background-position: center bottom;
    }
    .part1 .container {
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
    }
    .part1 .container .deco {
        width: 100%;
        height: auto;
        order: 2;
    }
    .part1 .container .deco img {
        position: static;
        width: 100%;
    }
    .part1 .container .description {
        width: 70%;
        padding: 10% 0 5% 0;
        order: 1;
    }
    .part1 .container .description .description_block {
        text-align: center;
        height: auto;
    }
    .part1 .container .description .description_block p {
        max-width: 100%;
    }
    .part2 .container {
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
    }
	.textArea {
        width: 60%;
        padding-top: 5%;
		padding-left: 0;
		padding-bottom: 5%;
	}
    .title .slogan p {
        font-size: 3.5rem; 
    }
    .part2 .container .deco {
        width: 100%;
        height: auto;
        padding-top: 0;
        order: 2;
    }
    .part2 .container .deco img {
        position: static;
        width: 100%;
    }
    .part2 .container .description {
        width: 70%;
        padding: 20% 0 5% 0;
        order: 1;
    }
    .part2 .container .description .description_block {
        text-align: center;
        height: auto;
    }
    .part2 .container .description .description_block p {
        max-width: 100%;
    }
    .part3 .container {
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
    }
    .part3 .container .deco {
        width: 100%;
        height: auto;
        padding-top: 0;
        order: 2;
    }
    .part3 .container .deco img {
        position: static;
        width: 100%;
        /* width: 90%; */
        padding-left: 5%;
        padding-bottom: 5%;
    }
    .part3 .container .description {
        width: 70%;
        padding: 10% 0 5% 0;
        order: 1;
    }
    .part3 .container .description .description_block {
        text-align: center;
        height: auto;
    }
    .part3 .container .description .description_block p {
        max-width: 100%;
    }
    .part4 .container {
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
    }
    .part4 .container .deco {
        width: 100%;
        height: auto;
        order: 2;
    }
    .part4 .container .deco img {
        position: static;
        width: 100%;
    }
    .part4 .container .description {
        width: 70%;
        padding: 10% 0 5% 0;
        order: 1;
    }
    .part4 .container .description .description_block {
        text-align: center;
        height: auto;
    }
    .part4 .container .description .description_block p {
        max-width: 100%;
    }
}
@media screen and (max-width:576px) {
	.textArea {
		width: 65%;
	}
    .title .slogan p {
        font-size: 3rem; 
    }
    .area_index .topimage img {
        width: 110%;
    }
}

@media screen and (max-width:440px) {
	.textArea {
		width: 75%;
	}
    .area_index .topimage img {
        width: 120%;
    }
    .part1 .container .description {
        width: 80%;
    }
    .part2 .container .description {
        width: 80%;
    }
    .part3 .container .description {
        width: 80%;
    }
    .part4 .container .description {
        width: 80%;
    }
}

@media screen and (max-width:375px) {
	.textArea {
		width: 80%;
	}
    .area_index .topimage img {
        width: 130%;
    }
}

@media screen and (max-width:320px) {
    .title .slogan p {
        font-size: 2.5rem; 
    }
}