@charset "utf-8";

/*
 * Stylesheet for layout: Floating, Grid
 *
 * @author hsjeon
 * @since 2018-11-14
 */

/* Clearfix */
.clearfix:after {
	content: '';
	display: table;
	clear: both;
}

/* Box sizing */
.box-mr-0 { margin-right: 0 !important; }

/* Floating elements */
.float-left { float: left !important; }
.float-right { float: right !important; }
.float-none { float: none; !important; }

/*
 * Grid: Levels with items:
 * .items-x
 *
 * 'x' means count of items(list) from controller.
 * This class can use only count 10 and less.
 */
ul[class*='items-'] {
	font-size: 0;
	position: relative;
}

ul.items-1 > li  { width: 100.0000% !important; }
ul.items-2 > li  { width:  50.0000% !important; }
ul.items-3 > li  { width:  33.3333% !important; }
ul.items-4 > li  { width:  25.0000% !important; }
ul.items-5 > li  { width:  20.0000% !important; }
ul.items-6 > li  { width:  16.6666% !important; }
ul.items-7 > li  { width:  14.2857% !important; }
ul.items-8 > li  { width:  12.5000% !important; }
ul.items-9 > li  { width:  11.1111% !important; }
ul.items-10 > li { width:  10.0000% !important; }
ul.items-11 > li { width:   9.0909% !important; }
ul.items-12 > li { width:   8.3333% !important; }
ul.items-13 > li { width:   7.6923% !important; }
ul.items-14 > li { width:   7.1427% !important; }
ul.items-15 > li { width:   6.6666% !important; }
ul.items-16 > li { width:   6.2500% !important; }
ul.items-17 > li { width:   5.8823% !important; }
ul.items-18 > li { width:   5.5555% !important; }
ul.items-19 > li { width:   5.2631% !important; }
ul.items-20 > li { width:   5.0000% !important; }

/*
 * Grid: Levels following Bootstrap 4:
 * .col-		: Extra small, less than 576px of width.
 * .col-sm-x	: Small, 576px ~ 767px of width.
 * .col-md-x	: Medium, 768px ~ 991px of width.
 * .col-lg-x	: Large, 992px ~ 1199px of width.
 * .col-xl-x	: Extra large, greater than and equal 1200px of width.
 *
 * 'x' means levels of width. This levels are composed of 12 levels.
 *
 * Class 'col-' should be used with class 'row', or layout could be broken.
 */
.row {
	width: 100%;
}

.row:after {
	content: '';
	display: table;
	clear: both;
}

[class*='col-'] {
	float: left;
	padding: 16px;
}

.row.no-gutters [class*='col-'] {
	padding: 0;
}

.col-0 { width: 0 !important; }
.col-1 { width: 8.3333% !important; }
.col-2 { width: 16.6666% !important; }
.col-3 { width: 25% !important; }
.col-4 { width: 33.3333% !important; }
.col-5 { width: 41.6666% !important; }
.col-6 { width: 50% !important; }
.col-7 { width: 58.3333% !important; }
.col-8 { width: 66.6666% !important; }
.col-9 { width: 75% !important; }
.col-10 { width: 83.3333% !important; }
.col-11 { width: 91.6666% !important; }
.col-12 { width: 100% !important; }

@media only screen and (min-width: 576px) {
	.col-sm-0 { width: 0 !important; }
	.col-sm-1 { width: 8.3333% !important; }
	.col-sm-2 { width: 16.6666% !important; }
	.col-sm-3 { width: 25% !important; }
	.col-sm-4 { width: 33.3333% !important; }
	.col-sm-5 { width: 41.6666% !important; }
	.col-sm-6 { width: 50% !important; }
	.col-sm-7 { width: 58.3333% !important; }
	.col-sm-8 { width: 66.6666% !important; }
	.col-sm-9 { width: 75% !important; }
	.col-sm-10 { width: 83.3333% !important; }
	.col-sm-11 { width: 91.6666% !important; }
	.col-sm-12 { width: 100% !important; }
}

@media only screen and (min-width: 768px) {
	.col-md-0 { width: 0 !important; }
	.col-md-1 { width: 8.3333% !important; }
	.col-md-2 { width: 16.6666% !important; }
	.col-md-3 { width: 25% !important; }
	.col-md-4 { width: 33.3333% !important; }
	.col-md-5 { width: 41.6666% !important; }
	.col-md-6 { width: 50% !important; }
	.col-md-7 { width: 58.3333% !important; }
	.col-md-8 { width: 66.6666% !important; }
	.col-md-9 { width: 75% !important; }
	.col-md-10 { width: 83.3333% !important; }
	.col-md-11 { width: 91.6666% !important; }
	.col-md-12 { width: 100% !important; }
}

@media only screen and (min-width: 992px) {
	.col-lg-0 { width: 0 !important; }
	.col-lg-1 { width: 8.3333% !important; }
	.col-lg-2 { width: 16.6666% !important; }
	.col-lg-3 { width: 25% !important; }
	.col-lg-4 { width: 33.3333% !important; }
	.col-lg-5 { width: 41.6666% !important; }
	.col-lg-6 { width: 50% !important; }
	.col-lg-7 { width: 58.3333% !important; }
	.col-lg-8 { width: 66.6666% !important; }
	.col-lg-9 { width: 75% !important; }
	.col-lg-10 { width: 83.3333% !important; }
	.col-lg-11 { width: 91.6666% !important; }
	.col-lg-12 { width: 100% !important; }
}

@media only screen and (min-width: 1200px) {
	.col-xl-0 { width: 0 !important; }
	.col-xl-1 { width: 8.3333% !important; }
	.col-xl-2 { width: 16.6666% !important; }
	.col-xl-3 { width: 25% !important; }
	.col-xl-4 { width: 33.3333% !important; }
	.col-xl-5 { width: 41.6666% !important; }
	.col-xl-6 { width: 50% !important; }
	.col-xl-7 { width: 58.3333% !important; }
	.col-xl-8 { width: 66.6666% !important; }
	.col-xl-9 { width: 75% !important; }
	.col-xl-10 { width: 83.3333% !important; }
	.col-xl-11 { width: 91.6666% !important; }
	.col-xl-12 { width: 100% !important; }
}