/**
 * 글꼴
**/
html { font-size: 16px; }
body { font-family: 'MalgunGothic', 'NanumGothic', Sans-serif; margin: 0; padding: 0; background: #999; }


/**
 * Frame Block 
**/

#header { position: relative; width: 100%; height: 64px; max-width: 600px; margin: 0 auto; background: #fff; /* overflow: hidden;  */ /* box-sizing: content-box; */ }
	#header .header-in { position: absolute; width: 100%; height: 100%; }
	#header a { text-decoration: none; color: #000; }
	#logo { width: 100%; height: 100%; }
	#logo .inner { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: 2rem; }
	#logo h1 { font-size: inherit; }
	#logo h1.small { font-size: 1.5rem; }
#header .header-in.align-center { display: flex; justify-content: center; align-items: center; }	
	#header .header-in.align-center #logo { width: 200px; height: 50px; }	
#header .header-in.align-left { display: flex; justify-content: flex-start; align-items: center; }	
	#header .header-in.align-left #logo { width: 200px; height: 50px; padding-left: 10px; }	


#wrapper { max-width: 600px; margin: 0 auto; background: #fff; min-height: calc(100vh - 64px); }
	#wrapper .image-item { position: relative; min-height: 200px; }
	#wrapper .image-item img { width: 100%; vertical-align: top; }
	#wrapper .image-item .in { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; }
	#wrapper .image-item .in .text { text-align: center; font-size: 1.5rem; font-weight: 600; line-height: 1.5; text-shadow: 1px 1px 4px rgba(250, 250, 250, 1); }

	#wrapper .image-item.youtube-item .out { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; }
	#wrapper .image-item.youtube-item .out iframe { position: absolute; width: 100%; height: 100%; left: 0; top: 0; border: 0; }

	#wrapper .warning { padding-top: 2rem; text-align: center; }
	
#footer { max-width: 600px; margin: 0 auto; padding: 0; }
	#footer .img-wrap {  }
	#footer .img-wrap img { width: 100%; vertical-align: top; }

	



/**
 * 주메뉴
**/


/**
 * 샘플 블럭
**/

.div-sql { border:1px solid #888; background:#fdfee0; padding:5px; margin:10px 0; }


/**
 * 에러 출력
**/

.error { color:darkred; }


/**
 * 데이터 테이블
**/

.table-kfi { font-size:12px; border:2px solid #aaa; }
.table-kfi > thead > tr > th ,
.table-kfi > thead > tr > td ,
.table-kfi > tbody > tr > th ,
.table-kfi > tbody > tr > td ,
.table-kfi > tfoot > tr > th ,
.table-kfi > tfoot > tr > td { padding:4px 4px; line-height:1.2; border:none; }

.table-kfi > thead > tr > th ,
.table-kfi > thead > tr > td { border-bottom:1px solid #ddd; border-right:1px solid #ddd; background:#f9f9f9; padding:6px 4px; }
.table-kfi > thead > tr:last-child > th ,
.table-kfi > thead > tr:last-child > td { border-bottom:1px solid #ccc; }

.table-kfi > tbody > tr > th ,
.table-kfi > tbody > tr > td { border-bottom:1px solid #ddd; border-right:1px solid #ddd; }
.table-kfi > tbody > tr:last-child > th ,
.table-kfi > tbody > tr:last-child > td { border-bottom:none; }


.table-kfi tr.sub-4 td { background:#f2ffff; }
.table-kfi tr.sub-3 td { background:#fff2f2; font-weight:600; }
.table-kfi tr.sub-2 td { background:#ffb7b7; font-weight:600; }
.table-kfi .tr.sub-4 td { background:#f2ffff; }
.table-kfi .tr.sub-3 td { background:#fff2f2; font-weight:600; }
.table-kfi .tr.sub-2 td { background:#ffb7b7; font-weight:600; }
.table-kfi .tr.sub-1 td { background:#0b56d5; font-weight:600; color:#fff; }

.table { }
.table-list { font-size:13px; }
.table-list > thead > tr > th { background:#265a88; border:1px solid #ccc; color:#fff; text-align:center; padding:6px 2px; }
.table-list > tbody > tr > td { border:1px solid #ccc; padding:6px 2px; }
.table-list > tbody > tr > td.center { text-align:center; }
.table-list > tbody > tr > td.left { text-align:left; }
.table-list > tbody > tr > td.right { text-align:right; }
.table-list > tbody > tr.delete > td { background:#f8f0f0; }
.table-list > tbody > tr > th, .table-list > tbody > tr > td { vertical-align:middle; }

.table-edit { font-size:13px; }
.table-edit th { background:#265a88; border:1px solid #ccc; color:#fff; text-align:center; padding:6px 2px; }
.table-edit td { border:1px solid #ccc; padding:6px 2px; }
.table-edit td.center { text-align:center; }
.table-edit td.left { text-align:left; }
.table-edit td.right { text-align:right; }
.table-edit tr.delete td { background:#f8f0f0; }
.table-edit th, .table-edit td { vertical-align:middle; }


/**
 * button : more smaller than .btn-sm
**/

.btn-xs { padding: 3px 8px; line-height: 1.2; border-radius: 3px; }


/**
 * Search Form
**/

.form { font-size:14px; }
.form::after { display:block; clear:both; content:''; }
.form .input { display:block; float:left; min-width:40px; margin:0 4px 10px 0; }
.form .input .text { width:100%; font-size:14px; height:28px; }
.form label { margin:0; }
.form .input select { width:100%; font-size:14px; height:28px; }
.form .input button { width:100%; height:28px; }
.form .input .btn { width:100%; height:28px; }


/**
 * Align
**/

.left { text-align:left; }
.center { text-align:center; }
.right { text-align:right; }

/**
 * Width
**/

.wi10 { width:10px; }
.wi20 { width:20px; }
.wi30 { width:30px; }
.wi40 { width:40px; }
.wi50 { width:50px; }
.wi60 { width:60px; }
.wi70 { width:70px; }
.wi80 { width:80px; }
.wi90 { width:90px; }
.wi100 { width:100px; }
.wi110 { width:110px; }
.wi120 { width:120px; }
.wi130 { width:130px; }
.wi140 { width:140px; }
.wi150 { width:150px; }
.wi160 { width:160px; }
.wi170 { width:170px; }
.wi180 { width:180px; }
.wi190 { width:190px; }
.wi200 { width:200px; }
.wi250 { width:250px; }
.wi300 { width:300px; }
.wi350 { width:350px; }
.wi400 { width:400px; }
.wi450 { width:450px; }
.wi500 { width:500px; }



/**
 * Margin, Padding
**/

.mt10 { margin-top:10px; }
.mt20 { margin-top:20px; }
.mt30 { margin-top:30px; }
.mt40 { margin-top:40px; }
.mt50 { margin-top:50px; }
.mt60 { margin-top:60px; }
.mt70 { margin-top:70px; }
.mt80 { margin-top:80px; }
.mt90 { margin-top:90px; }
.mt100 { margin-top:100px; }

.mb10 { margin-bottom:10px; }
.mb20 { margin-bottom:20px; }
.mb30 { margin-bottom:30px; }
.mb40 { margin-bottom:40px; }
.mb50 { margin-bottom:50px; }
.mb60 { margin-bottom:60px; }
.mb70 { margin-bottom:70px; }
.mb80 { margin-bottom:80px; }
.mb90 { margin-bottom:90px; }
.mb100 { margin-bottom:100px; }

.ml10 { margin-left:10px; }
.ml20 { margin-left:20px; }
.ml30 { margin-left:30px; }
.ml40 { margin-left:40px; }
.ml50 { margin-left:50px; }
.ml60 { margin-left:60px; }
.ml70 { margin-left:70px; }
.ml80 { margin-left:80px; }
.ml90 { margin-left:90px; }
.ml100 { margin-left:100px; }

.mr10 { margin-bottom:10px; }
.mr20 { margin-bottom:20px; }
.mr30 { margin-bottom:30px; }
.mr40 { margin-bottom:40px; }
.mr50 { margin-bottom:50px; }
.mr60 { margin-bottom:60px; }
.mr70 { margin-bottom:70px; }
.mr80 { margin-bottom:80px; }
.mr90 { margin-bottom:90px; }
.mr100 { margin-bottom:100px; }

.pt10 { padding-top:10px; }
.pt20 { padding-top:20px; }
.pt30 { padding-top:30px; }
.pt40 { padding-top:40px; }
.pt50 { padding-top:50px; }
.pt60 { padding-top:60px; }
.pt70 { padding-top:70px; }
.pt80 { padding-top:80px; }
.pt90 { padding-top:90px; }
.pt100 { padding-top:100px; }

.pb10 { padding-bottom:10px; }
.pb20 { padding-bottom:20px; }
.pb30 { padding-bottom:30px; }
.pb40 { padding-bottom:40px; }
.pb50 { padding-bottom:50px; }
.pb60 { padding-bottom:60px; }
.pb70 { padding-bottom:70px; }
.pb80 { padding-bottom:80px; }
.pb90 { padding-bottom:90px; }
.pb100 { padding-bottom:100px; }

.pl10 { padding-left:10px; }
.pl20 { padding-left:20px; }
.pl30 { padding-left:30px; }
.pl40 { padding-left:40px; }
.pl50 { padding-left:50px; }
.pl60 { padding-left:60px; }
.pl70 { padding-left:70px; }
.pl80 { padding-left:80px; }
.pl90 { padding-left:90px; }
.pl100 { padding-left:100px; }

.pr10 { padding-bottom:10px; }
.pr20 { padding-bottom:20px; }
.pr30 { padding-bottom:30px; }
.pr40 { padding-bottom:40px; }
.pr50 { padding-bottom:50px; }
.pr60 { padding-bottom:60px; }
.pr70 { padding-bottom:70px; }
.pr80 { padding-bottom:80px; }
.pr90 { padding-bottom:90px; }
.pr100 { padding-bottom:100px; }



/**
 * Table-Cell Width
**/

.td10 { width:10px; }
.td20 { width:20px; }
.td30 { width:30px; }
.td40 { width:40px; }
.td50 { width:50px; }
.td60 { width:60px; }
.td70 { width:70px; }
.td80 { width:80px; }
.td90 { width:90px; }
.td100 { width:100px; }
.td110 { width:110px; }
.td120 { width:120px; }
.td130 { width:130px; }
.td140 { width:140px; }
.td150 { width:150px; }
.td160 { width:160px; }
.td170 { width:170px; }
.td180 { width:180px; }
.td190 { width:190px; }
.td200 { width:200px; }
.td250 { width:250px; }
.td300 { width:300px; }
.td350 { width:350px; }
.td400 { width:400px; }




/**********************
 Font style
**********************/

/* decoration */
.underline { text-decoration:underline; }
.under { text-decoration:underline; }

/* text */
.bold { font-weight:600; }

/* color */
.aliceblue { color:aliceblue; }
.antiquewhite { color:antiquewhite; }
.aqua { color:aqua; }
.aquamarine { color:aquamarine; }
.azure { color:azure; }
.beige { color:beige; }
.bisque { color:bisque; }
.black { color:black; }
.blanchedalmond { color:blanchedalmond; }
.blue { color:blue; }
.blueviolet { color:blueviolet; }
.brown { color:brown; }
.burlywood { color:burlywood; }
.cadetblue { color:cadetblue; }
.chartreuse { color:chartreuse; }
.chocolate { color:chocolate; }
.coral { color:coral; }
.cornflowerblue { color:cornflowerblue; }
.cornsilk { color:cornsilk; }
.crimson { color:crimson; }
.cyan { color:cyan; }
.darkblue { color:darkblue; }
.darkcyan { color:darkcyan; }
.darkgoldenrod { color:darkgoldenrod; }
.darkgray { color:darkgray; }
.darkgreen { color:darkgreen; }
.darkkhaki { color:darkkhaki; }
.darkmagenta { color:darkmagenta; }
.darkolivegreen { color:darkolivegreen; }
.darkorange { color:darkorange; }
.darkorchid { color:darkorchid; }
.darkred { color:darkred; }
.darksalmon { color:darksalmon; }
.darkseagreen { color:darkseagreen; }
.darkslateblue { color:darkslateblue; }
.darkslategray { color:darkslategray; }
.darkturquoise { color:darkturquoise; }
.darkviolet { color:darkviolet; }
.deeppink { color:deeppink; }
.deepskyblue { color:deepskyblue; }
.dimgray { color:dimgray; }
.dodgerblue { color:dodgerblue; }
.firebrick { color:firebrick; }
.floralwhite { color:floralwhite; }
.forestgreen { color:forestgreen; }
.fuchsia { color:fuchsia; }
.gainsboro { color:gainsboro; }
.ghostwhite { color:ghostwhite; }
.gold { color:gold; }
.goldenrod { color:goldenrod; }
.gray { color:gray; }
.green { color:green; }
.greenyellow { color:greenyellow; }
.honeydew { color:honeydew; }
.hotpink { color:hotpink; }
.indianred { color:indianred; }
.indigo { color:indigo; }
.ivory { color:ivory; }
.khaki { color:khaki; }
.lavender { color:lavender; }
.lavenderblush { color:lavenderblush; }
.lawngreen { color:lawngreen; }
.lemonchiffon { color:lemonchiffon; }
.lightblue { color:lightblue; }
.lightcoral { color:lightcoral; }
.lightcyan { color:lightcyan; }
.lightgoldenrodyellow { color:lightgoldenrodyellow; }
.lightgray { color:lightgray; }
.lightgreen { color:lightgreen; }
.lightpink { color:lightpink; }
.lightsalmon { color:lightsalmon; }
.lightseagreen { color:lightseagreen; }
.lightskyblue { color:lightskyblue; }
.lightslategray { color:lightslategray; }
.lightsteelblue { color:lightsteelblue; }
.lightyellow { color:lightyellow; }
.lime { color:lime; }
.limegreen { color:limegreen; }
.linen { color:linen; }
.magenta { color:magenta; }
.maroon { color:maroon; }
.mediumaquamarine { color:mediumaquamarine; }
.mediumblue { color:mediumblue; }
.mediumorchid { color:mediumorchid; }
.mediumpurple { color:mediumpurple; }
.mediumseagreen { color:mediumseagreen; }
.mediumslateblue { color:mediumslateblue; }
.mediumspringgreen { color:mediumspringgreen; }
.mediumturquoise { color:mediumturquoise; }
.mediumvioletred { color:mediumvioletred; }
.midnightblue { color:midnightblue; }
.mintcream { color:mintcream; }
.mistyrose { color:mistyrose; }
.moccasin { color:moccasin; }
.navajowhite { color:navajowhite; }
.navy { color:navy; }
.oldlace { color:oldlace; }
.olive { color:olive; }
.olivedrab { color:olivedrab; }
.orange { color:orange; }
.orangered { color:orangered; }
.orchid { color:orchid; }
.palegoldenrod { color:palegoldenrod; }
.palegreen { color:palegreen; }
.paleturquoise { color:paleturquoise; }
.palevioletred { color:palevioletred; }
.papayawhip { color:papayawhip; }
.peachpuff { color:peachpuff; }
.peru { color:peru; }
.pink { color:pink; }
.plum { color:plum; }
.powderblue { color:powderblue; }
.purple { color:purple; }
.red { color:red; }
.rosybrown { color:rosybrown; }
.royalblue { color:royalblue; }
.saddlebrown { color:saddlebrown; }
.salmon { color:salmon; }
.sandybrown { color:sandybrown; }
.seagreen { color:seagreen; }
.seashell { color:seashell; }
.sienna { color:sienna; }
.silver { color:silver; }
.skyblue { color:skyblue; }
.slateblue { color:slateblue; }
.slategray { color:slategray; }
.snow { color:snow; }
.springgreen { color:springgreen; }
.steelblue { color:steelblue; }
.tan { color:tan; }
.teal { color:teal; }
.thistle { color:thistle; }
.tomato { color:tomato; }
.turquoise { color:turquoise; }
.violet { color:violet; }
.wheat { color:wheat; }
.white { color:white; }
.whitesmoke { color:whitesmoke; }
.yellow { color:yellow; }
.yellowgreen { color:yellowgreen; }



/**********************
 Background Color
**********************/

.bg-green { background:#008b00; color:#ffffff; }
.bg-red { background:#cd3333; color:#ffffff; }
.bg-blue { background:#4156c5; color:#ffffff; }
.bg-orange { background:#d2691e; color:#ffffff; }
.bg-sky { background:deepskyblue; color:#ffffff; }
.bg-gray { background:#cccccc; color:#000000; }

/**********************
 리스트
**********************/

ul.help { padding-left:20px; }
ol.help { padding-left:20px; }



/********************************
*   Floating
********************************/

.float-wrap { display:block; }
.float-wrap > .float-left { float:left; }
.float-wrap > .float-right { float:right; }
.float-wrap::after { display:block; clear:both; content:''; }


/********************************
*   jQuery-ui
********************************/

.ui-datepicker .ui-datepicker-title select { font-size:14px; }
.ui-datepicker table { font-size:13px; }

.ui-datepicker-calendar thead tr th:first-child { color:#f00; }
.ui-datepicker-calendar thead tr th:last-child { color:#00f; }
.ui-datepicker-calendar tbody tr td:first-child a { color:#f00; }
.ui-datepicker-calendar tbody tr td:last-child a { color:#00f; }

/********************************
*   popup
********************************/

.popup { box-sizing:content-box; }
.popup p { margin:0; }




/**********************
Help, sql, debug
**********************/

div.sql { position: relative; padding:5px 10px; padding-left: 80px; border:1px solid #844; margin:10px 0; background:#fffcfb; }
div.sql::before { position: absolute; top: 0; bottom: 0; left: 0; width: 70px; background: #844; content: 'SQL'; color: #fff; font-weight: 600; display: flex; align-items: center; justify-content: center; }

div.debug { position: relative; padding:5px 10px; padding-left: 80px; border:1px solid #31669b; margin:10px 0; background:#fafbfe; }
div.debug::before { position: absolute; top: 0; bottom: 0; left: 0; width: 70px; background: #31669b; content: 'DEBUG'; color: #fff; font-weight: 600; display: flex; align-items: center; justify-content: center; }

div.sql.warn { border:1px solid #f11212; background:#fffcfb; }
div.sql.warn::before { width: 70px; background: #f11212; content: '주의'; }




/**********************
영업점, 관리점
**********************/

/* 검색 */
.search-wrap * { box-sizing: border-box; }
.search-wrap { border: 2px solid #2997d8; border-radius: .5rem; padding: .75rem 1.5rem; }
form .form-row { margin-bottom: .5rem; }
form .form-row:last-child { margin-bottom: 0; }
.form-row { display: flex; justify-content: flex-start; align-items: center; }
.form-row.center { justify-content: center; }
.form-row .form-item { display: flex; justify-content: flex-start; align-items: center; margin-right: 1.5rem; }
.form-row .form-item:last-child { margin-right: 0; } 
.form-row .form-item label { margin-bottom: 0; margin-right: .75rem; font-weight: 600; }
.form-row .form-item .form-button { height: 30px; line-height: 28px; border: 1px solid #000; background: #000; color: #fff; text-align: center; margin-right: .5rem; padding-top: 0; padding-bottom: 0; border-radius: 5px; font-size: 14px; }
.form-row .form-item .form-button:last-child { margin-right: 0; }
.form-row .form-button.blue { border: 1px solid #2247a8; background: #2247a8; color: #fff; }
.form-row .form-button.gray { border: 1px solid #666; background: #666; color: #fff; }
.form-row .form-button.red { border: 1px solid #d1583f; background: #d1583f; color: #fff; }

.form-row select,
.form-row input[type=text] { line-height: 26px; height: 26px; }

/* 입력 */
.table-info { width: 100%; border-collapse: collapse; margin-bottom: .75rem; }
.table-info th { text-align: left; font-weight: 600; border: 1px solid #ccc; border-left: none; padding-left: 10px; }
.table-info td { padding: 4px 0 4px 5px; border: 1px solid #ccc; border-right: none; }
.table-info td .td-row { display: flex; align-items: center; margin-bottom: .25rem; }
.table-info td .td-row:last-child { margin-bottom: 0; }
.table-info .bullet { color: #fc161c; font-weight: 500; }
.table-info input[type='text'], .table-info input[type='password'] { padding-left: 5px; padding-right: 5px; }
.table-info caption { color: dodgerblue; text-align: left; padding-left: 4px; font-size: 1.1em; font-weight: 600; margin-bottom: .25rem; }
.table-info caption::before { font-family: fontawesome; content: '\f15c'; margin-right: .25rem; }
.table-info .file-row {}
.table-info .file-row label { margin-right: .5rem; }
.table-info .file-row .file_link { text-decoration: underline; }

.list-wrap table span.status { font-weight: 600; }
.list-wrap table span.status.status--10 { color: #075be7; }
.list-wrap table span.status.status--20 { color: #f00; }
.list-wrap table span.status.status--90 { color: #777; }

.if_body table span.status { font-weight: 600; }
.if_body table span.status.status--10 { color: #075be7; }
.if_body table span.status.status--20 { color: #f00; }
.if_body table span.status.status--90 { color: #777; }


.table-list { width: 100%; border-collapse: collapse; }
.table-list th { background: #eee; border: 1px solid #ccc; height: 32px; text-align: center; }
.table-list td { border: 1px solid #ccc; height: 32px; padding-left: 10px; padding-right: 10px; }


.list-wrap table tbody tr:nth-child(even) th, .list-wrap table tbody tr:nth-child(even) td { background: #eee; }
.list-wrap table tbody tr:hover td { background: #d9faad; }




/**********************
 Form Elements (more)
**********************/


input[type="text"]:focus, input[type="password"]:focus { background-color:#fff; border:1px solid #000; }
input[type="radio"], input[type="checkbox"] { margin:3px 3px 3px 4px; padding:1px; vertical-align:middle; }
textarea:focus { outline:0; background-color:#fff; border:1px solid #000; }

input:focus { outline:0; border: 1px solid #444; }
select:focus { outline:0; border: 1px solid #000; }



/**********************
 Padding
**********************/
.pt-5 { padding-top: 5px; }
.pt-10 { padding-top: 10px; }
.pt-20 { padding-top: 20px; }
.pt-30 { padding-top: 30px; }
.pt-40 { padding-top: 40px; }
.pt-50 { padding-top: 50px; }
.pt-60 { padding-top: 60px; }
.pt-70 { padding-top: 70px; }
.pt-80 { padding-top: 80px; }
.pt-90 { padding-top: 90px; }
.pt-100 { padding-top: 100px; }

.pb-5 { padding-bottom: 5px; }
.pb-10 { padding-bottom: 10px; }
.pb-20 { padding-bottom: 20px; }
.pb-30 { padding-bottom: 30px; }
.pb-40 { padding-bottom: 40px; }
.pb-50 { padding-bottom: 50px; }
.pb-60 { padding-bottom: 60px; }
.pb-70 { padding-bottom: 70px; }
.pb-80 { padding-bottom: 80px; }
.pb-90 { padding-bottom: 90px; }
.pb-100 { padding-bottom: 100px; }

.pl-5 { padding-left: 5px; }
.pl-10 { padding-left: 10px; }
.pl-20 { padding-left: 20px; }
.pl-30 { padding-left: 30px; }
.pl-40 { padding-left: 40px; }
.pl-50 { padding-left: 50px; }
.pl-60 { padding-left: 60px; }
.pl-70 { padding-left: 70px; }
.pl-80 { padding-left: 80px; }
.pl-90 { padding-left: 90px; }
.pl-100 { padding-left: 100px; }

.pr-5 { padding-right: 5px; }
.pr-10 { padding-right: 10px; }
.pr-20 { padding-right: 20px; }
.pr-30 { padding-right: 30px; }
.pr-40 { padding-right: 40px; }
.pr-50 { padding-right: 50px; }
.pr-60 { padding-right: 60px; }
.pr-70 { padding-right: 70px; }
.pr-80 { padding-right: 80px; }
.pr-90 { padding-right: 90px; }
.pr-100 { padding-right: 100px; }


/**********************
 Margin
**********************/
.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
.mt-60 { margin-top: 60px; }
.mt-70 { margin-top: 70px; }
.mt-80 { margin-top: 80px; }
.mt-90 { margin-top: 90px; }
.mt-100 { margin-top: 100px; }

.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-50 { margin-bottom: 50px; }
.mb-60 { margin-bottom: 60px; }
.mb-70 { margin-bottom: 70px; }
.mb-80 { margin-bottom: 80px; }
.mb-90 { margin-bottom: 90px; }
.mb-100 { margin-bottom: 100px; }

.ml-5 { margin-left: 5px; }
.ml-10 { margin-left: 10px; }
.ml-20 { margin-left: 20px; }
.ml-30 { margin-left: 30px; }
.ml-40 { margin-left: 40px; }
.ml-50 { margin-left: 50px; }
.ml-60 { margin-left: 60px; }
.ml-70 { margin-left: 70px; }
.ml-80 { margin-left: 80px; }
.ml-90 { margin-left: 90px; }
.ml-100 { margin-left: 100px; }

.mr-5 { margin-right: 5px; }
.mr-10 { margin-right: 10px; }
.mr-20 { margin-right: 20px; }
.mr-30 { margin-right: 30px; }
.mr-40 { margin-right: 40px; }
.mr-50 { margin-right: 50px; }
.mr-60 { margin-right: 60px; }
.mr-70 { margin-right: 70px; }
.mr-80 { margin-right: 80px; }
.mr-90 { margin-right: 90px; }
.mr-100 { margin-right: 100px; }

.w-10 { width: 10px; }
.w-20 { width: 20px; }
.w-30 { width: 30px; }
.w-40 { width: 40px; }
.w-50 { width: 50px; }
.w-60 { width: 60px; }
.w-70 { width: 70px; }
.w-80 { width: 80px; }
.w-90 { width: 90px; }
.w-100 { width: 100px; }
.w-110 { width: 110px; }
.w-120 { width: 120px; }
.w-130 { width: 130px; }
.w-140 { width: 140px; }
.w-150 { width: 150px; }
.w-160 { width: 160px; }
.w-170 { width: 170px; }
.w-180 { width: 180px; }
.w-190 { width: 190px; }
.w-200 { width: 200px; }
.w-250 { width: 250px; }
.w-300 { width: 300px; }
.w-350 { width: 350px; }
.w-400 { width: 400px; }
.w-450 { width: 450px; }
.w-500 { width: 500px; }


/**********************
 Message Box (alert window)
**********************/

.mbox-wrap { display: flex; width: 100vw; height: 100vh; justify-content: center; align-items: center; background: #ddd; }
.mbox { display: block; width: 500px; border: 1px solid #888; border-radius: 1rem; background: #fff; }
.mbox .title { text-align: center; font-size: 2.25rem; padding: 1rem 0; border-bottom: 1px solid #bbb; }
.mbox .body { text-align: left; font-size: 1.6rem; padding: 2rem 2rem; min-height: 15rem; border-bottom: 1px solid #bbb; line-height: 1.6; }
.mbox .footer { text-align: center; font-size: 1.6em; padding: 1rem 0; }





/**********************
Title
**********************/

.title { display:block; margin-bottom:30px; }