:root {
    --map-left: 0;
    --map-top: 0;
    --map-scale: 1;
}
/* 노트북 & 테블릿 가로 */
@media all and (min-width:1024px) and (max-width:1279px) {
	#grid-left {
		border-bottom-right-radius: 0px;
	}
	.wrapwrap {
		flex-direction: column;
	}
	.grid-right {
		justify-content: center;
	}
	.indicator-wrap {
		transform: scale(0.9);
	}
}

/* 테블릿 가로 */
@media all and (min-width:768px) and (max-width:1023px) {
	#map-container #svg-map  {
		transform: scale(0.9);
	}

	#grid-left {
		border-bottom-right-radius: 0px;
	}
	.wrapwrap {
		flex-direction: column;
	}
	.grid-right {
		justify-content: center;
	}

	.grid-right .main-wrap {
		width: 51%;
		padding: 0;
	}

	.content-box {
		transform: scale(0.9);
		padding: 0;
	}

	.indicator-wrap {
		transform: scale(0.9);
	}

	#discomfort .content-box  {
		transform: scale(0.95) !important;
		margin-top: -9px;
		padding: 0;
	}

	.tab-buttons {
		left: 272px;
	}

	.chart-div {
		width: 398px;
	}
}

/* 모바일 가로 & 테블릿 세로 */
@media all and (min-width: 480px) and (max-width: 767px) {

	.content-box .item-box {
		width: 100%
	}
	.content-box .item-box:nth-of-type(1) {
		border-right: none;
		border-bottom: 1px solid rgb(221, 235, 255);
	}
	.content-box .item-box:nth-of-type(2) {
	    border-bottom: 1px solid rgb(221, 235, 255);
	}
	.content-box .item-box:nth-of-type(3) {
		border-bottom: 1px solid rgb(221, 235, 255);
		border-right: none;
	}
	
	#grid-left {
		border-bottom-right-radius: 0px;
	}
	.wrapwrap {
		flex-direction: column;
	}
	
	:root {
        --map-left: 0.6597;
        --map-top: 5.99;
        --map-scale: 0.85;
    }
	
	#map-container #svg-map  {
		transform: scale(0.65);
		padding: 0;
		padding-bottom: 10px;
		margin-top: -50px;
	}

	#map-container .icon-explain {
		transform: scale(0.7) translate(258px, -70px);
	}
	
	.indic {
		transform: scale(0.7) translate(0, 0);
		width: 390px;
	}

	.indic ul {
		display: flex;
		justify-content: space-between;
	}

	.map-btn-group ul:before {
		top: 32%;
		bottom: 50%;
		left: 8%;
		width: 350px;
		height: 1px;
	}

	.content-wrap {
		width: 100%;
	}

	.content-box {
		transform: scale(0.85);
	}

	.grid-right {
		flex-direction: column;
	}

	.grid-right .main-wrap {
		width: 100%;
		height: 100%;
	}

	.indicator-wrap {
		transform: scale(0.85);
		margin-top: -40px;
	}

	.grid-right .content-box {
		margin-bottom: 0px;
	}

	#content-box {
		margin-top: -110px;
	}

	#discomfort .content-box  {
		transform: scale(0.92) !important;
	}

	.tab-buttons {
		width: 200px;
		left: 72%;
	}

	.chart-div {
		width: 662px;
	}

	.indic ul {
		display: flex;
		justify-content: space-between;
	}
	
	.map-btn-group ul li {
		width: 50px;
	}

	.map-btn-group ul:before {
		top: 32%;
		bottom: 50%;
		left: 8%;
		width: 350px;
		height: 1px;
	}
}

/* 모바일 세로 */
@media all and (max-width: 479px) {
	.content-box .item-box {
		width: 100% !important;
	}
	.content-box .item-box:nth-of-type(1) {
		border-right: none;
		border-bottom: 1px solid rgb(221, 235, 255);
	}
	.content-box .item-box:nth-of-type(2) {
	    border-bottom: 1px solid rgb(221, 235, 255);
	}
	.content-box .item-box:nth-of-type(3) {
		border-bottom: 1px solid rgb(221, 235, 255);
		border-right: none;
	}

	#grid-left {
		border-bottom-right-radius: 0px;
		height: 1276px;
	}
	.wrapwrap {
		flex-direction: column;
	}

	.left-wrap {
		padding: 0;
		width: 100%;
	}
	
	:root {
        --map-left: 0.6597;
        --map-top: 5.99;
        --map-scale: 0.6;
    }
    
	#map-container #svg-map  {
		transform: scale(0.45);
		padding: 0;
		padding-bottom: 10px;
		margin-top: -130px;
	}

	#map-container .icon-explain {
		transform: scale(0.6) translate(202px, -180px);
	}
	
	.indic {
		transform: scale(0.6) translate(0, 0);
		width: 390px;
	}

	.indic ul {
		display: flex;
		justify-content: space-between;
	}

	.map-btn-group ul:before {
		top: 32%;
		bottom: 50%;
		left: 8%;
		width: 350px;
		height: 1px;
	}

	.content-wrap {
		width: 94%;
		flex-direction: column;
	}

	.content-box {
		transform: scale(0.9);
		width: 100%;
	}

	.item-box {
		width: 215px;
	}

	.grid-right {
		flex-direction: column;
	}

	.grid-right .main-wrap {
		width: 100%;
		height: 100%;
		padding: 0;
	}

	.indicator-wrap {
		transform: scale(0.9);
		margin-top: -40px;
	}

	.map-btn-group ul li {
		width: 50px;
	}

	.grid-right .content-box {
		margin-bottom: 0px;
	}

	#content-box {
		margin-top: -25px;
	}

	#discomfort .content-box  {
		transform: scale(0.92) !important;
	}

	.tab-buttons {
		width: 200px;
		left: 63%;
	}

	.chart-div {
		width: 443px;
	}
}