@media screen and (max-width: 850px) {
    .tc_box2{
        position: relative;
        width: 100%;
        height: min(calc(120vw), 90%);
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-image: url(../images/mapclick.png);
        background-size: 100% 100%;
        padding-top: 1rem;
	}
	.half{
		flex:0 0 50%;
	}
	.horz{
		padding-top: 40px;
		display:flex;
		padding-left: 60px;
		padding-right: 20px;
	}
	.half li{
		/* iPhone 在此 */
		color: #000000;
		list-style-type: none;
		margin-bottom: 12px;
		font-size: 20px;
		cursor: pointer;
	}
    .miyundistrict{
        height:426px; 
		margin-right: 16px; 
		overflow:auto; 
		display:flex;
    }
    .close2{
        top: 32px;
        right: 48px;
    }
    #areatitle{
        font-size: 24px;
		color: #ffffff; 
		padding-top: 24px; 
		padding-left: 3rem;
    }
}
@media screen and (min-width: 850px) {
    .tc_box2{
        position: relative;
        width: 800px;
        height: 90%;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-image: url(../images/mapclick.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding-top: 32px;
	}
	.half{
		flex:0 0 50%;
	}
	.horz{
		padding-top: 20px;
		display:flex;
		padding-left: 60px;
		padding-right: 20px;
	}
	.half li{
		color: #000000;
		list-style-type: none;
		margin-bottom: 12px;
		margin-right: 12px;
		font-size: 20px;
		cursor: pointer;
	}
    .miyundistrict{
        height:560px; 
		margin-right: 16px; 
		overflow:auto; 
		display:flex;
    }
    .close2{
        top: 32px;
        right: 48px;
    }
    #areatitle{
        font-size: 24px;
		color: #ffffff; 
		padding-left: 3rem;
    }
}
@media screen and (max-width: 480px) {
    .tc_box2{
        position: relative;
        width: 100%;
        height: 500px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-image: url(../images/mapclick.png);
        background-size: 100% 100%;
        padding-top: 0.8rem;
	}
	.horz{
		margin-right: 16px; 
        overflow: scroll;
		
		height: 400px;
		display: block;
		padding-bottom: 20px;
		padding-top: 12px;
		padding-left: 28px;
		padding-right: 28px;
	}
	.half li{
		color: #000000;
		list-style-type: none;
		margin-bottom: 12px;
		font-size: 20px;
		cursor: pointer;
	}
    .miyundistrict{
        height:426px; 
		margin-right: 0px; 
		overflow:visible; 
		display:block;
    }
    .close2{
        top: 8px;
        right: 12px;
    }
    #areatitle{
        font-size: 24px;
		color: #ffffff; 
		padding-top: 0px; 
		padding-left: 2rem;
    }
}
@media screen and (max-height: 720px) {
    #areatitle{
        padding-top: 4px;
    }
    .horz{
        padding-top: 16px;
    }
    .close2{
        top: 16px;
    }
}
@media screen and (min-height: 800px) {
    .horz{
        padding-top: 48px;
    }
}