@charset "UTF-8";

html,body									{ height:100%; min-height: 100%; background:#fff;}
#container									{ min-height: 100%; height:100%; position: relative; margin:0; display: flex}
.indexBox									{ cursor:pointer; width: 100%; height: 100%; min-height: 100%; display: flex; float:left; position:relative; }

.tea										{ height:100vh; width:50vw; margin:0; left: 0; position: absolute; }
.tea > img 									{ position: absolute; object-fit: cover; width: 100%; height: 100%;}
.coordinate									{ height:100vh; width:50vw; margin:0; right: 0; position: absolute; }
.coordinate > img 							{ position: absolute; object-fit: cover; width: 100%; height: 100%;}

#tea > div.box, #coordinate > div.box		{ width: 308px; position:absolute; z-index:16; left:50%; margin-left:-154px; }
#tea > .area, #coordinate > .area			{ width: 100%; height:100%; min-height:100%; position:absolute; z-index:100; opacity:0; }
#tea > .whitebox, #coordinate > .whitebox	{ width: 100%; height:100%; min-height:100%; background:#fff; position:absolute; z-index:10; opacity:0; }