/* grid */
/*
	1280 > 1000
*/

body {
	--media-width: 1280;
}

html,
body {
	padding: 0;
	margin: 0;

}

.line {
	display: block;

	min-width: 1280px;
}

.cnt {
	width: 1280px;
	max-width: 1280px;

	margin: 0 auto;
	padding-left: 10px;
	padding-right: 10px;
	box-sizing: border-box;
}

.cnt-dfl {
	padding-left: 10px !important;
	padding-right: 10px !important;
}

.row {
	display: flex;
	flex-wrap: wrap;
}

.row.row-float {
	display: block;
	overflow: hidden;
}

.row.row-float .col {
	float: left;
}

.col {

	padding-left: 10px;
	padding-right: 10px;
	box-sizing: border-box;
}

.cnt-dfl .col {
	padding-left: 10px !important;
	padding-right: 10px !important;
}

.col.col-100p {
	width: 100%;
}

.col.col-75p {
	width: 75%;
}

.col.col-66p {
	width: 66.66666666%;
}

.col.col-50p {
	width: 50%;
}

.col.col-33p {
	width: 33.33333333%;
}


.col.col-25p {
	width: 25%;
}

.col.col-1 {
	width: calc(100% / 12 * 1 - 0.0001px);
}

.col.col-2 {
	width: calc(100% / 12 * 2 - 0.0001px);
}

.col.col-3 {
	width: calc(100% / 12 * 3 - 0.0001px);
}

.col.col-4 {
	width: calc(100% / 12 * 4 - 0.0001px);
}

.col.col-5 {
	width: calc(100% / 12 * 5 - 0.0001px);
}

.col.col-6 {
	width: calc(100% / 12 * 6 - 0.0001px);
}

.col.col-7 {
	width: calc(100% / 12 * 7 - 0.0001px);
}

.col.col-8 {
	width: calc(100% / 12 * 8 - 0.0001px);
}

.col.col-9 {
	width: calc(100% / 12 * 9 - 0.0001px);
}

.col.col-10 {
	width: calc(100% / 12 * 10 - 0.0001px);
}

.col.col-12 {
	width: 100%;
}

.hide-d {
	display: none;
}

.show-d {
	display: block;
}

.row .col .row {
	margin-left: -10px;
	margin-right: -10px;
}

/**/

.jc {
	justify-content: space-between;
}

.nw {
	flex-wrap: nowrap;
}

.flex {
	display: flex;
}

.flex-wrap {
	flex-wrap: wrap;
}

.tac {
	text-align: center;
}

.flex-justify-end {
	justify-content: flex-end;
}

.flex-justify-center {
	justify-content: center;
}

.flex-justify-between {
	justify-content: space-between;
}

.flex-align-center {
	align-items: center;
}

/* 1280+20 > @todo */
@media screen and (max-width: 1300px) {

	body {
		--media-width: 1000;
	}

	.line {
		min-width: 1000px;
	}

	.cnt {
		width: 1000px;
		max-width: 1000px;
	}

	.col.logo {
		width: calc(100% / 12 * 4 - 0.0001px);
	}



	.line.footer>.cnt>.row>.col:nth-of-type(1) {
		grid-area: p1;
	}

	.line.footer>.cnt>.row>.col:nth-of-type(2) {
		grid-area: p2;
	}

	.line.footer>.cnt>.row>.col:nth-of-type(3) {
		grid-area: p3;
	}

	.line.footer>.cnt>.row>.col:nth-of-type(4) {
		grid-area: p4;
		margin-top: 40px;
	}


	.line.footer>.cnt>.row {
		display: grid;
		grid-template-areas:
			"p1 p2 p3"
			"p1 p2 p4";
	}
}

@media screen and (max-width: 1020px) {
	body {
		--media-width: 600;
	}

	.line {
		/* todo */
		min-width: unset;
	}

	.cnt {
		width: auto;
		max-width: 1000px;
	}

	.col {
		padding-left: 5px;
		padding-right: 5px;
	}

	.col.col-100p:not(.col-p),
	.col.col-75p:not(.col-p),
	.col.col-66p:not(.col-p),
	.col.col-50p:not(.col-p),
	.col.col-33p:not(.col-p),
	.col.col-25p:not(.col-p),
	.col.col-1:not(.col-p),
	.col.col-2:not(.col-p),
	.col.col-3:not(.col-p),
	.col.col-4:not(.col-p),
	.col.col-5:not(.col-p),
	.col.col-6:not(.col-p),
	.col.col-7:not(.col-p),
	.col.col-8:not(.col-p),
	.col.col-9:not(.col-p),
	.col.col-10:not(.col-p) {
		width: 100%;
	}

	.col.col-p-1 {
		width: calc(100% / 12 * 1 - 0.0001px);
	}

	.col.col-p-2 {
		width: calc(100% / 12 * 2 - 0.0001px);
	}

	.col.col-p-3 {
		width: calc(100% / 12 * 3 - 0.0001px);
	}

	.col.col-p-4 {
		width: calc(100% / 12 * 4 - 0.0001px);
	}

	.col.col-p-5 {
		width: calc(100% / 12 * 5 - 0.0001px);
	}

	.col.col-p-6 {
		width: calc(100% / 12 * 6 - 0.0001px);
	}

	.col.col-p-7 {
		width: calc(100% / 12 * 7 - 0.0001px);
	}

	.col.col-p-8 {
		width: calc(100% / 12 * 8 - 0.0001px);
	}

	.col.col-p-9 {
		width: calc(100% / 12 * 9 - 0.0001px);
	}

	.col.col-p-10 {
		width: calc(100% / 12 * 10 - 0.0001px);
	}

	.col.col-p-12 {
		width: 100%;
	}

	.row .col .row {
		margin-left: -5px;
		margin-right: -5px;
	}

	.hide-p {
		display: none;
	}

	.show-p {
		display: block;
	}
}

@media screen and (max-width: 640px) {

	/*@todo tmp*/
	body {
		--media-width: 300;
	}

	.col.col-100p:not(.col-m),
	.col.col-75p:not(.col-m),
	.col.col-66p:not(.col-m),
	.col.col-50p:not(.col-m),
	.col.col-33p:not(.col-m),
	.col.col-25p:not(.col-m),
	.col.col-1:not(.col-m),
	.col.col-2:not(.col-m),
	.col.col-3:not(.col-m),
	.col.col-4:not(.col-m),
	.col.col-5:not(.col-m),
	.col.col-6:not(.col-m),
	.col.col-7:not(.col-m),
	.col.col-8:not(.col-m),
	.col.col-9:not(.col-m),
	.col.col-10:not(.col-m) {
		width: 100%;
	}

	.col.col-m-1 {
		width: calc(100% / 12 * 1 - 0.0001px);
	}

	.col.col-m-2 {
		width: calc(100% / 12 * 2 - 0.0001px);
	}

	.col.col-m-3 {
		width: calc(100% / 12 * 3 - 0.0001px);
	}

	.col.col-m-4 {
		width: calc(100% / 12 * 4 - 0.0001px);
	}

	.col.col-m-5 {
		width: calc(100% / 12 * 5 - 0.0001px);
	}

	.col.col-m-6 {
		width: calc(100% / 12 * 6 - 0.0001px);
	}

	.col.col-m-7 {
		width: calc(100% / 12 * 7 - 0.0001px);
	}

	.col.col-m-8 {
		width: calc(100% / 12 * 8 - 0.0001px);
	}

	.col.col-m-9 {
		width: calc(100% / 12 * 9 - 0.0001px);
	}

	.col.col-m-10 {
		width: calc(100% / 12 * 10 - 0.0001px);
	}

	.col.col-m-12 {
		width: 100%;
	}

	.hide-m {
		display: none;
	}

	.show-m {
		display: block;
	}
}