#small_menu_1:checked ~ div { height: 200px; transition: 0.4s all; }

#small_menu_2:checked ~ div { height: 100px; transition: 0.4s all; }

#top_left { width: 30%; height: 400px; }
#top_left > div { display: flex; align-items: center; height: 25%; }
#top_left > div > img { width: 64px; }
#top_left > div > h { font-size: 29px; margin-left: 20px; }
#top_right { width: 50%; height: 500px; }

#top_title { font-size: 47px; color: #191919; font-weight: bold; }

#centerimg { 
    height: 380px;
    background: url('../source/devel/centerimg.png') no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    text-align: center;
	position: relative;
}

#centerimg > div { position: absolute; top: 50%; left: 33%; transform: translate(-50%,-50%); text-align: left; }

#centerimg > div > p { font-size: 38px; color: #191919; line-height: 44px; font-weight: 500; }

#bottom_title { font-size: 47px; font-weight: bold; position: relative; }
#bottom_title > p { position: relative; z-index: 1; }

#line1 { width: 170px; height: 10px; position: absolute; background-color: #88c23f; top: 52px; left: 142px; }

#line2 { width: 90px; height: 10px; position: absolute; background-color: #88c23f; left: 324px; top: 122px; }

.bottom_content { display: flex; }

.bottom_area { margin-left: 50px; margin-top: 80px; margin-right: 50px; }

.bottom_text { width: 45%; height: 400px; }

.bottom_img { width: 55%; height: 400px; }

.bottom_eng { font-size: 20px; color: #6540bf; font-weight: bold; }
.bottom_text_title { font-size: 37px; color: #191919; font-weight: bold; }
.bottom_text_content { font-size: 16px; color: #b7b7b7; font-weight: 500; }

.bottom1 { background: url('../source/devel/bottom1.jpg') no-repeat center; background-size: contain; }
.bottom2 { background: url('../source/devel/bottom2.jpg') no-repeat center; background-size: contain; }
.bottom3 { background: url('../source/devel/bottom3.jpg') no-repeat center; background-size: contain; }
.bottom4 { background: url('../source/devel/bottom4.jpg') no-repeat center; background-size: contain; }
.bottom_text_hidden { display: none; }

.bottom_hidden_left { width: 50%;  }
.bottom_hidden_right { width: 50%; }


@media screen and (max-width: 1220px) {
	.bottom_content { display: block; }
	.bottom_img { width: 100%; height: 50vw; }
	.bottom_text { display: none; }
	#centerimg { background-position-x: 60%; height: 300px; }
	#top_left { min-width: 150px; margin-right: 10px; }
	#top_right { height: 400px; overflow: hidden; position: relative; }
	#top_left > div > img { width: 48px; }
	#top_left > div > h { font-size: 18px; margin-left: 10px; }
	#top_right > div > img { height: 100%; width: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
	#top_title { font-size: 27px; }
	#top_title ~ p { font-size: 14px !important; }
	#bottom_title { font-size: 27px; margin-bottom: 40px; }
	#top_title ~ div { margin-top: 20px !important; }
	#line1 { width: 100px; height: 8px; top: 26px; left: 80px; }
	#line2 { width: 52px; height: 8px; top: 66px; left: 185px; }
	#centerimg > div { top: 30%; left: 25%; scale: 0.85; }
	#top_right { width: 100%; }
	.content { margin: 0 10px !important; }
	.bottom_img { background-size: cover; }
	.bottom_text_hidden { display: flex; }
	.bottom_eng { font-size: 16px; margin-top: 14px; }
	.bottom_text_title { font-size: 27px; margin-top: -4px; }
	.bottom_text_content { font-size: 15px; margin-top: 14px; margin-bottom: 18px; }
	.bottom_hidden_left { margin-bottom: 18px; margin-right: 10px; }
}