@charset "UTF-8";

/*
* File    : common.css
* Author  : MYLINK HOME
* Date    : 2025.04.01
*/


/* **************************************** *
 * DEFAULT
 * **************************************** */
.fl{float:left}
.fr{float:right}
.cboth{display:block; content:""; clear:both}
.inblk{display:inline-block}
.vgt{vertical-align:top}
.vgm{vertical-align:middle}
.ovh{overflow:hidden}
.ova{overflow:auto}
.blind,legend{display:block; position:absolute; top:-100000em; left:0; overflow:hidden}
:root legend{margin-top:-1px; font-size:0; line-height:0}
.ellip{display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis}
.hidden{display:none}
.require{position:relative;}
.require:before {content: "\f18c"; position:absolute; left:2px;  font-family: 'remixicon'; font-size:1rem; color:#ff4949; display: inline-block; margin-right: 4px;}
.bd-top{border-top:1px solid #222}
.bd-bottom{border-bottom:1px solid #222}

/* **************************************** *
 * SCROLL
 * **************************************** */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-corner{background:transparent; border-right:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6;}
::-webkit-scrollbar-track
{
	background-color:#f2f2f2; background-image:-moz-linear-gradient(left, #f2f2f2 0%, #fff 100%);
 	background-image: linear-gradient(to left, #f2f2f2 0%, #fff 100%);
	background-image: -webkit-linear-gradient(left, #f2f2f2 0%, #fff 100%);
	background-image: -o-linear-gradient(left, #f2f2f2 0%, #fff 100%);
	background-image: -ms-linear-gradient(left, #f2f2f2 0%, #fff 100%);
	border: 1px solid #e6e6e6;
}
::-webkit-scrollbar-thumb{background:#c8c8c8; border:1px solid #b8b8b8; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
::-webkit-scrollbar-thumb:hover{background:#8a8a8a; border:1px solid #737373;}




/* **************************************** *
 * INPUT
 * **************************************** */

/* ImageCheckbox - 기본 */
.ImageCheckbox{display:inline-flex; gap:20px; align-items:center; box-sizing:border-box}
.ImageCheckbox > .Checkbox{left:0; width:32px; height:32px; margin:0}
.ImageCheckbox span{font-size: 1.8rem} 
.ImageCheckbox:after{content:"\EB7A"; font-family: "remixicon";  width:32px; height:32px; top:0px; line-height:18px; padding-top:6px; margin-top:0px; background:none; border:1px solid #ddd;  font-size:2rem; color:#aaa; text-align:center; border-radius:5px; box-sizing:border-box}
.ImageCheckbox.Checked:after{color:#008CD4; background:none; background-color:#fff; border:1px solid #0196fa;}
.ImageCheckbox.Disabled:after{color:#cbcbcb; background:none; background-color:#eaeaea; border:1px solid #ccc; color:#acabab}
.ImageCheckbox.Checked.Disabled:after{content:"\EB7A"; font-family: "remixicon"; color:#cbcbcb; background:none; background-color:#808080}
.ImageCheckbox.Disabled span,
.ImageCheckbox.Checked.Disabled span{color:#aaa}
.ImageCheckbox span.required{color:#E63A12}
.checkbox span{font-size: 1.8rem}
 

/* ImageCheckbox - 라운드 */

.ImageCheckbox.round{border-radius: 120px; background:#fff; height:58px; padding:0px 32px; border:1px solid #ddd; cursor: pointer;}
.ImageCheckbox.round.Checked{background:#111; border-color:#111}
.ImageCheckbox.round > .Checkbox{display:none;}
.ImageCheckbox.round > .Checked{display:none; }
.ImageCheckbox.round:after{content:''; background:none; border:none}

.ImageCheckbox.round span{font-size:2.1rem; color:#555; text-align: center; font-weight: 600; color:#000}
.ImageCheckbox.round.Checked:after{content:""; border:none; background:none}
.ImageCheckbox.round.Checked span{color:#fff}

 
 
/* Textinput */

.Textinput {height: 80px; padding: 0 20px; border: 1px solid #ddd; color: #555;	font-size: 1.8rem; font-weight: 400; letter-spacing: -0.5px; border-radius: 10px; background: #FAFBFC}
.Textinput:hover {border: 1px solid #008CD4}
.Textinput:focus,
.Textinput:active {border: 1px solid #008CD4; box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.1); outline: none}
.Textinput.Disabled {background-color: #eaeaea; border: 1px solid #ddd; color: #ababab}
.Textinput::placeholder {font-size: 1.8rem;	font-weight: normal; color: #999; font-weight: 600}

/* Textarea */
.Textarea{border: 1px solid #ddd; color: #555; border-radius: 10px; padding:20px; font-size:1.8rem; resize:none; background: #FAFBFC}
.Textarea:hover,
.Textarea:focus,
.Textarea:active{border:1px solid #008CD4; box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.1); outline: none}
.Textarea.Disabled {background-color: #eaeaea; border: 1px solid #ddd; color: #ababab}
.Textarea::placeholder {font-size: 1.8rem; font-weight: normal; color: #999; font-weight: 600}

/* Textarea - resize */
.Textarea.resize{box-sizing:border-box; resize: inherit;}

/* Divselect */
.Divselect {position: relative;	display: inline-flex; align-items:center; text-align: left; height: 80px; padding:0px 20px; background: #FAFBFC url("../images/content/divselect.svg") no-repeat right; background-size:40px; background-position-x:calc(100% - 8px); transition: all 0.3s; font-size: 1.8rem; font-weight:600; color: #555; border: 1px solid #ddd; border-radius: 10px;}
.Divselect:hover {background: #FAFBFC url("../images/content/divselect.svg") no-repeat right; background-position-x:calc(100% - 8px); background-size:40px; border-color: #008CD4; border-radius: 10px}
.Divselect:focus,
.Divselect:active{border-color: #008CD4; box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.1); background: #FAFBFC url("../images/content/divselect.svg") no-repeat right; background-position-x:calc(100% - 8px); background-size:40px; }

.Divselect select{padding: 0px 20px;font-size: 1.8rem; font-weight:600; position: absolute;	left: 0; top: 0; display: inline-block; width: 100%; height: 100%;background: transparent; border:0; opacity:0; appearance:none;}
.Divselect select option[value=""][disabled] {display: none;}
.Divselect span{display: block;	max-width: 100%;margin-right: 0; margin-top: 2px; font-size: 1.8rem; color:#555;	overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; 	}
.Divselect span[value=""] {font-size: 1.8rem; color: #B0B0B0; font-weight:600; }
.Divselect option{border: 0; font-size: 1.8rem; padding: 4px;}

.Divselect.Disabled {background-color: #eaeaea;	border: 1px solid #ddd;	color: #ababab;	opacity:1}
.Divselect.Disabled > .Select.Disabled {opacity: 0}
.Divselect.Disabled > select {cursor: not-allowed !important}

/* Divselect - small */
.Divselect.small{height: 58px; padding:0px 20px; background: #fff url("../images/content/divselect.svg") no-repeat right; background-size:30px; background-position-x:calc(100% - 8px); font-size: 2.1rem; font-weight:600; color: #555; border-radius: 10px;}
.Divselect.small select{font-size:2.1rem;}
.Divselect.small span{font-size:2.1rem;}
.Divselect.small option{font-size: 2.1rem;}


/* **************************************** *
 * DATERANGE
 * **************************************** */
 
.Daterange{display:flex; align-items:center}
.Daterange .Dateinput{display:inline-flex; align-items:center;}
.Dateinput > input,
.Daterange .Startdate > input,
.Daterange .Enddate > input{background:#FAFBFC; min-width:140px; height:80px; padding:0 15px; line-height:31px; border:1px solid #ddd; text-indent:0; font-size:1.8rem; border-radius:10px; box-sizing:border-box}
.Daterange >.Textinput{width:50px}
.Dateinput > input.Disabled,
.Daterange .Startdate>input.Disabled,
.Daterange .Enddate>input.Disabled{background:#f3f3f3; border:1px solid #ccc; color:#222}
.Dateinput > .Calendar,
.Daterange .Calendar{position:absolute; right:16px; width:24px; height:24px; border:0; background:none; border-radius:0}
.Dateinput > .Calendar:before,
.Daterange .Calendar:before{content:"\EB27"; font-family:'remixicon'; font-size:2.4rem; color:#999}
.Dateinput > .Calendar:hover,
.Daterange .Calendar:hover,
.Dateinput > .Calendar:active,
.Daterange .Calendar:active{background:none; border:0}
.Dateinput.Disabled .Calendar:before,
.Dateinput > .Calendar.Disabled,
.Daterange .Startdate>.Calendar.Disabled,
.Daterange .Enddate>.Calendar.Disabled{content:"\EB27"; color:#aaa}
.Dateinput.calendarReWid input{width:98px}
.Daterange .Textinput::placeholder,
.Dateinput .Textinput::placeholder{font-family:'ppd ', 'ptd', 'sans-serif' !important; font-size:1.4rem; font-weight:normal; letter-spacing:-0.8px; color:#aaa}
.Daterange .dash-uni{line-height:normal; padding:0px 4px}

.Dateinput.edit > input,
.Daterange.edit .Startdate > input,
.Daterange.edit .Enddate > input{background:#eafcd5}
.Dateinput.edit > .Calendar:hover,
.Daterange.edit .Calendar:hover,
.Dateinput.edit > .Calendar:active,
.Daterange.edit .Calendar:active,
.Dateinput.edit > input:hover,
.Daterange.edit input:hover{background:#eafcd5}

/* Datepicker  */
.Datepicker{padding:5px; border:none; border-radius:8px;}
.Datepicker a{width:30px; height:30px; margin:0 auto; line-height:30px; font-size:1.4rem; letter-spacing:-0.5px; border-radius:50%}
.Datepicker tr a:active,
.Datepicker.Weekly tr:active a{color:#505050}
.Datepicker .Header{display:flex; align-items:center; justify-content:center; width:100%; height:42px; padding:0; background:#5b5866; color:#fff; border-radius:8px 8px 0 0; box-sizing:border-box}
.Datepicker .Weekdays{width:auto; height:34px; background:#f4f4f4; border:0; font-size:1.5rem; font-weight:600; color:#555; text-align:center}
.Datepicker .Today{background:#5629ee !important; color:#fff !important; font-weight:normal}
.Datepicker .Cell{height:34px; border:0}
.Datepicker .Day,
.Datepicker .Month{color:#666}
.Datepicker .Day:hover,
.Datepicker .Month:hover{background:#f2f2f2; color:#191919; font-weight:normal}
.Datepicker .Day.Holiday{color:#cf6565}
.Datepicker .Day.Sat{color:#4f9fd7}
.Datepicker .SubheaderYear{position:relative; width:110px; height:auto; margin-right:0; text-align:center; box-sizing:border-box}
.Datepicker .SubheaderMonth{width:110px; height:auto; box-sizing:border-box}
.Datepicker .CurrentYear{padding:0}
.Datepicker .CurrentYear,
.Datepicker .CurrentMonth{font-weight:normal; font-size:1.4rem}
.Datepicker thead th:first-child{border-left:0px;}
.Datepicker:focus{outline:none}


.Datepicker .PrevYear,
.Datepicker .PrevMonth,
.Datepicker .NextYear,
.Datepicker .NextMonth{width:auto; height:auto; padding-top:4px; opacity:1}

.Datepicker .PrevYear .Control,
.Datepicker .PrevMonth .Control,
.Datepicker .NextYear .Control,
.Datepicker .NextMonth .Control{display:block; position:relative; width:auto; height:14px; line-height:100%; background:none; border-radius:0; color:#ddd}

.Datepicker .PrevYear .Control:before,
.Datepicker .PrevMonth .Control:before,
.Datepicker .NextYear .Control:before,
.Datepicker .NextMonth .Control:before{font-family:'remixicon'; font-size:2.2rem}

.Datepicker .PrevYear .Control:before,
.Datepicker .PrevMonth .Control:before{content:"\EA64"}
.Datepicker .NextYear .Control:before,
.Datepicker .NextMonth .Control:before{content:"\EA6E"}

.Datepicker .PrevYear .Control:hover,
.Datepicker .PrevMonth .Control:hover{background:none; color:#fff}
.Datepicker .PrevYear .Control:active,
.Datepicker .PrevMonth .Control:active{background:none; color:#fff}
.Datepicker .PrevYear .Control.Disabled,
.Datepicker .PrevMonth .Control.Disabled{cursor:default; background:none}
.Datepicker .NextYear .Control:hover,
.Datepicker .NextMonth .Control:hover{background:none; color:#fff}
.Datepicker .NextYear .Control:active,
.Datepicker .NextMonth .Control:active{background:none; color:#fff}
.Datepicker .NextYear .Control.Disabled,
.Datepicker .NextMonth .Control.Disabled{cursor:default; background:none}

.Datepicker .BtnClose{top:12px; right:10px; width:20px; height:20px; opacity:1; display:none}
.Datepicker .BtnClose .Control{width:20px; height:20px; background:url("/static/fw/images/calendar-btns.png") no-repeat -14px 0px}
.Datepicker .BtnClose .Control:hover,
.Datepicker .BtnClose .Control:active{background:url("/static/fw/images/calendar-btns.png") no-repeat -14px 0px}


/* Dateinput */
.Dateinput > input:hover,
.Daterange .Startdate > input:hover,
.Daterange .Enddate > input:hover,
.Dateinput > input:focus,
.Daterange .Startdate > input:focus,
.Daterange .Enddate > input:focus{border:1px solid #b7afd4}
.Dateinput > input:active,
.Daterange .Startdate > input:active,
.Daterange .Enddate > input:active{border:1px solid #b7afd4}
.Dateinput > .Clear,
.Daterange .Clear{display:none; position:absolute; right:-13px; top:5px; width:16px; height:16px; margin:0; vertical-align:middle; z-index:9; background:none;}
.Dateinput > .Clear:hover,
.Daterange .Clear:hover,
.Dateinput > .Clear:active,
.Daterange .Clear:active{background:none; }

/* Dateinput */
.Dateinput > input:hover,
.Daterange .Startdate > input:hover,
.Daterange .Enddate > input:hover,
.Dateinput > input:focus,
.Daterange .Startdate > input:focus,
.Daterange .Enddate > input:focus{border:1px solid #008CD4; background:#FAFBFC}

.Dateinput > input:active,
.Daterange .Startdate > input:active,
.Daterange .Enddate > input:active{border:1px solid #008CD4}
.Dateinput > .Clear,
.Daterange .Clear{display:none; position:absolute; right:-13px; top:5px; width:16px; height:16px; margin:0;  background:url("/static/fw/images/remove.png") no-repeat 0 0; vertical-align:middle; z-index:9}
.Dateinput > .Clear:hover,
.Daterange .Clear:hover,
.Dateinput > .Clear:active,
.Daterange .Clear:active{background:url("/static/fw/images/remove.png") no-repeat 0 0}


/* **************************************** *
 * SWITCH
 * **************************************** */
.switch {display: inline-flex; align-items: center; gap:20px}
.switch input[type="checkbox"]{display:none}
.switch .switch-ground{position:relative; display:inline-flex; align-items:center; justify-content:flex-start; width:40px; height:29px; background:#DDD; border-radius:120px; cursor:pointer; transition:all .3s; overflow:hidden; padding:4px}
.switch .switch-ground > *{vertical-align:sub; transition: all .3s}
.switch .switch-ground .marble{display:block; width:20px; height:20px; background-color:#fff; border-radius:50%;}
.switch .label{display:inline-block; font-weight:600; font-size:1.8rem; color:#999; letter-spacing:-0.5px; padding:0}

.switch input[type="checkbox"]:checked + .switch-ground{background-color:#008CD4; justify-content: flex-end;}
.switch input[type="checkbox"]:checked + .switch-ground + .label{color:#555;}

/* **************************************** *
 * searchkey
 * **************************************** */

.searchkey{display:flex; flex: 1 1 auto; align-items:center; position:relative; border-bottom:1px solid #dedede; }
.searchkey .search{position:relative; width:60px; height:60px;}
.searchkey .Button.search{background: none; border:none}
.searchkey .search:active,
.searchkey .search:hover,
.searchkey .search:focus,
.searchkey .search.af-hover,
.searchkey .search.Checked{border:none; padding:0; background:none; color:#808080; box-shadow:none}

.searchkey > .Textinput{border:0px; border-radius:0px; padding-left:32px; margin-right:8px; height: 60px; padding:0px; background:#fff}
.searchkey > .Textinput:focus,
.searchkey > .Textinput:active{box-shadow:none; border:none}
.searchkey .button {flex:none}

.searchkey .cont-box{background:#fff; padding:36px;  border-radius:16px; position:absolute; width:380px; top:42px;left:-24px; box-shadow:0px 5px 7px 5px #0000000d}
.searchkey .cont-box ul li{display:flex; padding:4px; align-items:center; }
.searchkey .cont-box ul li > span{width:40%; flex:none; font-size: 1.6rem}
.searchkey .cont-box .Textinput{height:46px}
.searchkey .cont-box .Divselect{height:46px; padding-top:6px; font-size: 1.6rem; padding-top:inherit;}
.searchkey .cont-box .Divselect span{margin-top: 0px; font-size: 1.6rem}
.searchkey .cont-box .Dateinput > input,
.searchkey .cont-box .Daterange .Startdate > input, 
.searchkey .cont-box .Daterange .Enddate > input{height: 46px; font-size: 1.6rem}

.searchkey .cont-box .Dateinput > .Calendar,
.searchkey .cont-box .Daterange .Calendar{top:6px}

.searchkey .cont-box .btn-close{position:absolute; right:12px; top:10px; cursor:pointer }
.searchkey .cont-box .btn-close i{color:#aaa; font-size:1.8rem;}
.searchkey .cont-box .Groupbutton .button.board{height: 54px; min-width: auto}

.searchkey .cont-box.ty2{background:#fff; padding:40px 24px 24px 24px;  border-radius:16px; position:absolute; width:940px; top:42px; left:auto; right:0px; box-shadow:0px 5px 7px 5px #0000000d}
.searchkey .cont-box.ty2 ul{display:flex; flex-wrap: wrap; gap:8px 24px; padding-bottom:24px}
.searchkey .cont-box.ty2 ul li{display:flex; padding:4px ; align-items:center; flex: 1; min-width:45%}
.searchkey .cont-box.ty2 ul li > span{width:100px; flex:none; font-weight:600}
.searchkey .cont-box.ty2 .Textinput{height:46px}
.searchkey .cont-box.ty2 .Divselect{height:46px; padding-top:6px}
.searchkey .cont-box.ty2 .Daterange .Dateinput{width:46%; flex:1 auto}
.searchkey .cont-box.ty2 .buttonArea{display:flex; justify-content: flex-end; border-top:1px solid #ebebeb; padding-top:12px; gap:8px}
.searchkey .cont-box.ty2 .buttonArea .button.ty2{width:120px}
.searchkey .cont-box.ty2 .btn-close{position:absolute; right:12px; top:10px; cursor:pointer }
.searchkey .cont-box.ty2 .btn-close i{color:#aaa; font-size:1.8rem;}


.srch-box{}
.srch-box .Textinput{height: 60px}
.srch-box .Divselect{height: 60px}
.srch-box .stitL{display: flex; gap:8px;}




/* **************************************** *
 * category
 * **************************************** */
.category-wrap{display: flex; justify-content:space-between;  max-width: 1800px; margin: 0 auto}
.category-wrap .category{display:inline-flex; gap:20px}

/* **************************************** *
 * TITLE
 * **************************************** */
.stitArea{display:flex; position:relative; align-items:center; margin-bottom:5px}
.stitArea:after{content:''; display:block; clear:both}
.stitArea.tgBox{padding:5px; padding-left:10px; border:1px solid #dadada; background:#f7f7f7}
.stitArea.box{padding:10px;}
.stitArea .stitL,
.stitArea .stitC,
.stitArea .stitR{display:flex; align-items:center}
.stitArea .stitC{margin-left:auto}
.stitArea .stitR{margin-left:auto}
.stitArea .helpGuide{display:flex; align-items:center}.stitArea .helpGuide .guideButton{margin-right:10px}
.stitArea .counter{margin-left:5px; padding-top:2px; font-size:1.5rem; font-weight:300; color:#808080; vertical-align:middle}



/* **************************************** *
 * WIDTH
 * **************************************** */
/* width px */
.wid10 {width:10px !important}
.wid20 {width:20px !important}
.wid30 {width:30px !important}
.wid40 {width:40px !important}
.wid50 {width:50px !important}
.wid60 {width:60px !important}
.wid70 {width:70px !important}
.wid80 {width:80px !important}
.wid90 {width:90px !important}
.wid100 {width:100px !important}
.wid110 {width:110px !important}
.wid120 {width:120px !important}
.wid130 {width:130px !important}
.wid140 {width:140px !important}
.wid150 {width:150px !important}
.wid157 {width:157px !important}
.wid160 {width:160px !important}
.wid170 {width:170px !important}
.wid180 {width:180px !important}
.wid190 {width:190px !important}
.wid200 {width:200px !important}
.wid210 {width:210px !important}
.wid213 {width:213px !important}
.wid215 {width:213px !important}
.wid220 {width:220px !important}
.wid228 {width:228px !important}
.wid230 {width:230px !important}
.wid240 {width:240px !important}
.wid250 {width:250px !important}
.wid260 {width:260px !important}
.wid270 {width:270px !important}
.wid280 {width:280px !important}
.wid290 {width:290px !important}
.wid300 {width:300px !important}
.wid310 {width:300px !important}
.wid317 {width:317px !important}
.wid320 {width:320px !important}
.wid330 {width:330px !important}
.wid340 {width:340px !important}
.wid350 {width:350px !important}
.wid360 {width:360px !important}
.wid370 {width:370px !important}
.wid375 {width:375px !important}
.wid376 {width:376px !important}
.wid380 {width:380px !important}
.wid390 {width:390px !important}
.wid400 {width:400px !important}
.wid500 {width:500px !important}
.wid550 {width:550px !important}
.wid600 {width:600px !important}
.wid700 {width:700px !important}
.wid800 {width:800px !important}
.wid900 {width:900px !important}
.wid1000 {width:1000px !important}

/* min width px */
.mwid10 {min-width:10px !important}
.mwid20 {min-width:20px !important}
.mwid30 {min-width:30px !important}
.mwid40 {min-width:40px !important}
.mwid50 {min-width:50px !important}
.mwid60 {min-width:60px !important}
.mwid70 {min-width:70px !important}
.mwid80 {min-width:80px !important}
.mwid90 {min-width:90px !important}
.mwid100 {min-width:100px !important}
.mwid110 {min-width:110px !important}
.mwid120 {min-width:120px !important}
.mwid130 {min-width:130px !important}
.mwid140 {min-width:140px !important}
.mwid150 {min-width:150px !important}
.mwid160 {min-width:160px !important}
.mwid170 {min-width:170px !important}
.mwid180 {min-width:180px !important}
.mwid190 {min-width:190px !important}
.mwid200 {min-width:200px !important}
.mwid210 {min-width:210px !important}
.mwid220 {min-width:220px !important}
.mwid230 {min-width:230px !important}
.mwid240 {min-width:240px !important}
.mwid250 {min-width:250px !important}
.mwid260 {min-width:260px !important}
.mwid270 {min-width:270px !important}
.mwid280 {min-width:280px !important}
.mwid290 {min-width:290px !important}
.mwid300 {min-width:300px !important}

/* width % */
.wid10p {width:10% !important}
.wid15p {width:15% !important}
.wid20p {width:20% !important}
.wid25p {width:25% !important}
.wid30p {width:30% !important}
.wid35p {width:35% !important}
.wid40p {width:40% !important}
.wid45p {width:45% !important}
.wid50p {width:50% !important}
.wid55p {width:55% !important}
.wid60p {width:60% !important}
.wid65p {width:65% !important}
.wid70p {width:70% !important}
.wid75p {width:75% !important}
.wid80p {width:80% !important}
.wid85p {width:85% !important}
.wid90p {width:90% !important}
.wid95p {width:95% !important}
.wid100p {width:100% !important}

/* min width % */
.mwid10p {min-width:10% !important}
.mwid15p {min-width:15% !important}
.mwid20p {min-width:20% !important}
.mwid25p {min-width:25% !important}
.mwid30p {min-width:30% !important}
.mwid35p {min-width:35% !important}
.mwid40p {min-width:40% !important}
.mwid45p {min-width:45% !important}
.mwid50p {min-width:50% !important}
.mwid55p {min-width:55% !important}
.mwid60p {min-width:60% !important}
.mwid65p {min-width:65% !important}
.mwid70p {min-width:70% !important}
.mwid75p {min-width:75% !important}
.mwid80p {min-width:80% !important}
.mwid85p {min-width:85% !important}
.mwid90p {min-width:90% !important}
.mwid95p {min-width:95% !important}
.mwid100p {min-width:100% !important}


/* **************************************** *
 * height
 * **************************************** */
/* height px */
.hei50 {height:50px !important}
.hei100 {height:100px !important}
.hei150 {height:150px !important}
.hei200 {height:200px !important}
.hei250 {height:250px !important}
.hei280 {height:280px !important}
.hei300 {height:300px !important}
.hei350 {height:350px !important}
.hei400 {height:400px !important}
.hei450 {height:450px !important}
.hei500 {height:500px !important}
.hei550 {height:550px !important}
.hei580 {height:580px !important}
.hei600 {height:600px !important}
.hei650 {height:650px !important}
.hei700 {height:700px !important}
.hei750 {height:750px !important}
.hei800 {height:800px !important}
.hei850 {height:850px !important}
.hei900 {height:900px !important}
.hei950 {height:950px !important}
.hei1000 {height:1000px !important}

/* height % */
.hei10p {height:10% !important}
.hei15p {height:15% !important}
.hei20p {height:20% !important}
.hei25p {height:25% !important}
.hei30p {height:30% !important}
.hei35p {height:35% !important}
.hei40p {height:40% !important}
.hei45p {height:45% !important}
.hei50p {height:50% !important}
.hei55p {height:55% !important}
.hei60p {height:60% !important}
.hei65p {height:65% !important}
.hei70p {height:70% !important}
.hei75p {height:75% !important}
.hei80p {height:80% !important}
.hei85p {height:85% !important}
.hei90p {height:90% !important}
.hei95p {height:95% !important}
.hei100p {height:100% !important}


/* **************************************** *
 * margin
 * **************************************** */
/* margin px */
.mg00 {margin:0px !important}
.mg05 {margin:5px !important}
.mg10 {margin:10px !important}
.mg15 {margin:15px !important}
.mg20 {margin:20px !important}
.mg25 {margin:25px !important}
.mg30 {margin:30px !important}
.mg35 {margin:35px !important}
.mg40 {margin:40px !important}
.mg45 {margin:45px !important}
.mg50 {margin:50px !important}
.mg55 {margin:55px !important}
.mg60 {margin:60px !important}
.mg65 {margin:65px !important}
.mg70 {margin:70px !important}
.mg75 {margin:75px !important}
.mg80 {margin:80px !important}
.mg85 {margin:85px !important}
.mg90 {margin:90px !important}
.mg95 {margin:95px !important}
.mg100 {margin:100px !important}

.mgt-1 {margin-top:-1px !important}
.mgt00 {margin-top:0px !important}
.mgt05 {margin-top:5px !important}
.mgt10 {margin-top:10px !important}
.mgt15 {margin-top:15px !important}
.mgt20 {margin-top:20px !important}
.mgt25 {margin-top:25px !important}
.mgt30 {margin-top:30px !important}
.mgt35 {margin-top:35px !important}
.mgt40 {margin-top:40px !important}
.mgt45 {margin-top:45px !important}
.mgt50 {margin-top:50px !important}
.mgt55 {margin-top:55px !important}
.mgt60 {margin-top:60px !important}
.mgt65 {margin-top:65px !important}
.mgt70 {margin-top:70px !important}
.mgt75 {margin-top:75px !important}
.mgt80 {margin-top:80px !important}
.mgt85 {margin-top:85px !important}
.mgt90 {margin-top:90px !important}
.mgt95 {margin-top:95px !important}
.mgt100 {margin-top:100px !important}

.mgr00 {margin-right:0px !important}
.mgr02 {margin-right:2px !important}
.mgr04 {margin-right:4px !important}
.mgr05 {margin-right:5px !important}
.mgr10 {margin-right:10px !important}
.mgr15 {margin-right:15px !important}
.mgr20 {margin-right:20px !important}
.mgr25 {margin-right:25px !important}
.mgr30 {margin-right:30px !important}
.mgr35 {margin-right:35px !important}
.mgr40 {margin-right:40px !important}
.mgr45 {margin-right:45px !important}
.mgr50 {margin-right:50px !important}
.mgr55 {margin-right:55px !important}
.mgr60 {margin-right:60px !important}
.mgr65 {margin-right:65px !important}
.mgr70 {margin-right:70px !important}
.mgr75 {margin-right:75px !important}
.mgr80 {margin-right:80px !important}
.mgr85 {margin-right:85px !important}
.mgr90 {margin-right:90px !important}
.mgr95 {margin-right:95px !important}
.mgr100 {margin-right:100px !important}

.mgb00 {margin-bottom:0px !important}
.mgb05 {margin-bottom:5px !important}
.mgb10 {margin-bottom:10px !important}
.mgb15 {margin-bottom:15px !important}
.mgb20 {margin-bottom:20px !important}
.mgb25 {margin-bottom:25px !important}
.mgb30 {margin-bottom:30px !important}
.mgb35 {margin-bottom:35px !important}
.mgb40 {margin-bottom:40px !important}
.mgb45 {margin-bottom:45px !important}
.mgb50 {margin-bottom:50px !important}
.mgb55 {margin-bottom:55px !important}
.mgb60 {margin-bottom:60px !important}
.mgb65 {margin-bottom:65px !important}
.mgb70 {margin-bottom:70px !important}
.mgb75 {margin-bottom:75px !important}
.mgb80 {margin-bottom:80px !important}
.mgb85 {margin-bottom:85px !important}
.mgb90 {margin-bottom:90px !important}
.mgb95 {margin-bottom:95px !important}
.mgb100 {margin-bottom:100px !important}

.mgl00 {margin-left:0px !important}
.mgl02 {margin-left:2px !important}
.mgl04 {margin-left:4px !important}
.mgl05 {margin-left:5px !important}
.mgl10 {margin-left:10px !important}
.mgl15 {margin-left:15px !important}
.mgl20 {margin-left:20px !important}
.mgl25 {margin-left:25px !important}
.mgl30 {margin-left:30px !important}
.mgl35 {margin-left:35px !important}
.mgl40 {margin-left:40px !important}
.mgl45 {margin-left:45px !important}
.mgl50 {margin-left:50px !important}
.mgl55 {margin-left:55px !important}
.mgl60 {margin-left:60px !important}
.mgl65 {margin-left:65px !important}
.mgl70 {margin-left:70px !important}
.mgl75 {margin-left:75px !important}
.mgl80 {margin-left:80px !important}
.mgl85 {margin-left:85px !important}
.mgl90 {margin-left:90px !important}
.mgl95 {margin-left:95px !important}
.mgl100 {margin-left:100px !important}

.mgx01 {margin:0 1px !important}
.mgx05 {margin:0 5px !important}
.mgx10 {margin:0 10px !important}
.mgx20 {margin:0 20px !important}
.mgx30 {margin:0 30px !important}
.mgx40 {margin:0 40px !important}
.mgx50 {margin:0 50px !important}
.mgx60 {margin:0 60px !important}
.mgx70 {margin:0 70px !important}
.mgx80 {margin:0 80px !important}
.mgx90 {margin:0 90px !important}
.mgx100 {margin:0 100px !important}
.mgxauto {margin:0 auto !important}

.mgy01 {margin:1px 0 !important}
.mgy05 {margin:5px 0 !important}
.mgy10 {margin:10px 0 !important}
.mgy20 {margin:20px 0 !important}
.mgy30 {margin:30px 0 !important}
.mgy40 {margin:40px 0 !important}
.mgy50 {margin:50px 0 !important}
.mgy60 {margin:60px 0 !important}
.mgy70 {margin:70px 0 !important}
.mgy80 {margin:80px 0 !important}
.mgy90 {margin:90px 0 !important}
.mgy100 {margin:100px 0 !important}
.mgyauto {margin:auto 0 !important}


/* **************************************** *
 * padding
 * **************************************** */
/* padding px */
.pd00 {padding:0px !important}
.pd05 {margin:5px !important}
.pd10 {margin:10px !important}
.pd15 {margin:15px !important}
.pd20 {margin:20px !important}
.pd25 {margin:25px !important}
.pd30 {margin:30px !important}
.pd35 {margin:35px !important}
.pd40 {margin:40px !important}
.pd45 {margin:45px !important}
.pd50 {margin:50px !important}
.pd55 {margin:55px !important}
.pd60 {margin:60px !important}
.pd65 {margin:65px !important}
.pd70 {margin:70px !important}
.pd75 {margin:75px !important}
.pd80 {margin:80px !important}
.pd85 {margin:85px !important}
.pd90 {margin:90px !important}
.pd95 {margin:95px !important}
.pd100 {margin:100px !important}

.pdt00 {padding-top:0px !important}
.pdt05 {padding-top:5px !important}
.pdt10 {padding-top:10px !important}
.pdt15 {padding-top:15px !important}
.pdt20 {padding-top:20px !important}
.pdt25 {padding-top:25px !important}
.pdt30 {padding-top:30px !important}
.pdt35 {padding-top:35px !important}
.pdt40 {padding-top:40px !important}
.pdt45 {padding-top:45px !important}
.pdt50 {padding-top:50px !important}
.pdt55 {padding-top:55px !important}
.pdt60 {padding-top:60px !important}
.pdt65 {padding-top:65px !important}
.pdt70 {padding-top:70px !important}
.pdt75 {padding-top:75px !important}
.pdt80 {padding-top:80px !important}
.pdt85 {padding-top:85px !important}
.pdt90 {padding-top:90px !important}
.pdt95 {padding-top:95px !important}
.pdt100 {padding-top:100px !important}

.pdr00 {padding-right:0px !important}
.pdr05 {padding-right:5px !important}
.pdr10 {padding-right:10px !important}
.pdr15 {padding-right:15px !important}
.pdr20 {padding-right:20px !important}
.pdr25 {padding-right:25px !important}
.pdr30 {padding-right:30px !important}
.pdr35 {padding-right:35px !important}
.pdr40 {padding-right:40px !important}
.pdr45 {padding-right:45px !important}
.pdr50 {padding-right:50px !important}
.pdr55 {padding-right:55px !important}
.pdr60 {padding-right:60px !important}
.pdr65 {padding-right:65px !important}
.pdr70 {padding-right:70px !important}
.pdr75 {padding-right:75px !important}
.pdr80 {padding-right:80px !important}
.pdr85 {padding-right:85px !important}
.pdr90 {padding-right:90px !important}
.pdr95 {padding-right:95px !important}
.pdr100 {padding-right:100px !important}

.pdb00 {padding-bottom:0px !important}
.pdb05 {padding-bottom:5px !important}
.pdb10 {padding-bottom:10px !important}
.pdb15 {padding-bottom:15px !important}
.pdb20 {padding-bottom:20px !important}
.pdb25 {padding-bottom:25px !important}
.pdb30 {padding-bottom:30px !important}
.pdb35 {padding-bottom:35px !important}
.pdb40 {padding-bottom:40px !important}
.pdb45 {padding-bottom:45px !important}
.pdb50 {padding-bottom:50px !important}
.pdb55 {padding-bottom:55px !important}
.pdb60 {padding-bottom:60px !important}
.pdb65 {padding-bottom:65px !important}
.pdb70 {padding-bottom:70px !important}
.pdb75 {padding-bottom:75px !important}
.pdb80 {padding-bottom:80px !important}
.pdb85 {padding-bottom:85px !important}
.pdb90 {padding-bottom:90px !important}
.pdb95 {padding-bottom:95px !important}
.pdb100 {padding-bottom:100px !important}

.pdl00 {padding-left:0px !important}
.pdl05 {padding-left:5px !important}
.pdl10 {padding-left:10px !important}
.pdl15 {padding-left:15px !important}
.pdl20 {padding-left:20px !important}
.pdl25 {padding-left:25px !important}
.pdl30 {padding-left:30px !important}
.pdl35 {padding-left:35px !important}
.pdl40 {padding-left:40px !important}
.pdl45 {padding-left:45px !important}
.pdl50 {padding-left:50px !important}
.pdl55 {padding-left:55px !important}
.pdl60 {padding-left:60px !important}
.pdl65 {padding-left:65px !important}
.pdl70 {padding-left:70px !important}
.pdl75 {padding-left:75px !important}
.pdl80 {padding-left:80px !important}
.pdl85 {padding-left:85px !important}
.pdl90 {padding-left:90px !important}
.pdl95 {padding-left:95px !important}
.pdl100 {padding-left:100px !important}

.pdx05 {padding:0 5px !important}
.pdx10 {padding:0 10px !important}
.pdx20 {padding:0 20px !important}
.pdx30 {padding:0 30px !important}
.pdx40 {padding:0 40px !important}
.pdx50 {padding:0 50px !important}
.pdx60 {padding:0 60px !important}
.pdx70 {padding:0 70px !important}
.pdx80 {padding:0 80px !important}
.pdx90 {padding:0 90px !important}
.pdx100 {padding:0 100px !important}


 /* **************************************** *
 * LABEL
 * **************************************** */
.Label-color{display:inline-block; padding:2px 8px;  text-align:center; border-radius:30px; vertical-align:middle; box-sizing:border-box; font-size:1.2rem;}
.Label-color .cont-txt{display:block; font-size:1.4rem !important; letter-spacing:-0.2px; line-height:150%; color:inherit !important; text-overflow:clip; white-space:initial; overflow:initial}
.Label-color span{text-overflow:initial !important; white-space:initial !important; overflow:initial !important}
.Label-color.small{display:inline-block; height:20px; line-height:20px; padding:0 6px; text-align:center; font-size:1.2rem; border-radius:5px; vertical-align:middle; box-sizing:border-box}
.Label-color.color01{background:#f10f3a; color:#fff}
.Label-color.color02{background:#ff6a00; color:#fff}
.Label-color.color03{background:#fdc23e; color:#fff}
.Label-color.color04{background:#75d701; color:#fff}
.Label-color.color05{background:#3fc495; color:#fff}
.Label-color.color06{background:#32c4c0; color:#fff}
.Label-color.color07{background:#22d6dd; color:#fff}
.Label-color.color08{background:#a38af7; color:#fff}
.Label-color.color09{background:#8364e8; color:#fff}
.Label-color.color10{background:#4265d6; color:#fff}
.Label-color.color11{background:#33beff; color:#fff}
.Label-color.color12{background:#0061ff; color:#fff}
.Label-color.color13{background:#5f21c7; color:#fff}
.Label-color.color14{background:#103783; color:#fff}
.Label-color.color15{background:#fa167c; color:#fff}
.Label-color.color16{background:#ff8379; color:#fff}
.Label-color.color17{background:#77af9c; color:#fff}
.Label-color.color18{background:#02636c; color:#fff}
.Label-color.color19{background:#a3a1a1; color:#fff}
.Label-color.color20{background:#555555; color:#fff}
.Label-color.color21{background:#fea626; color:#fff}

.Label-color.color01.light{background:#fae2e7; color:#e00e36}
.Label-color.color02.light{background:#ffe3cf; color:#ff6a00}
.Label-color.color03.light{background:#fff1b9; color:#c29c05}
.Label-color.color04.light{background:#eafcd5; color:#66b409}
.Label-color.color05.light{background:#ddf5ed; color:#37ae84}
.Label-color.color06.light{background:#d6f2f1; color:#2cada9}
.Label-color.color07.light{background:#d8f8f9; color:#0aa9af}
.Label-color.color08.light{background:#ebe6fb; color:#937cdf}
.Label-color.color09.light{background:#d7cdf8; color:#755ad0}
.Label-color.color10.light{background:#d4dcf4; color:#4265d6}
.Label-color.color11.light{background:#dff5ff; color:#26a2dc}
.Label-color.color12.light{background:#deeafd; color:#0061ff}
.Label-color.color13.light{background:#d9ccef; color:#5f21c7}
.Label-color.color14.light{background:#ced5e4; color:#103783}
.Label-color.color15.light{background:#ffe3f0; color:#fa167c}
.Label-color.color16.light{background:#fce5e3; color:#e8736a}
.Label-color.color17.light{background:#d9efe7; color:#588b7a}
.Label-color.color18.light{background:#cfe2e4; color:#02535b}
.Label-color.color19.light{background:#efefef; color:#8d8a8a}
.Label-color.color20.light{background:#d8d8d8; color:#555555}
.Label-color.color21.light{background:#fff0d9; color:#ec9619}
.Label-color.color22.light{background:#dff5ff; border:1px solid #c3dce8; color:#26a2dc}
.Label-color.color23.light{background:#ffffff; border:1px solid #dedede; color:#666}
.Label-color.color24.light{background:#fbf9ff; border:1px solid #8b6bf5; color:#8b6bf5}
.Label-color.color25.light{background:#ffffff; border:1px solid #eae4ff; color:#545357}


/* **************************************** *
 * SIGNAL
 * **************************************** */
 /* signal-color */
.signal-color{display:inline-block; position:relative; padding-left:11px; vertical-align:middle}
.signal-color:before{content:""; position:absolute; top:4px; left:0; width:11px; height:11px; background:#b6b9c5; border-radius:50%; box-sizing:border-box}
.signal-color.small{padding-left:7px}
.signal-color.small:before{width:7px; height:7px}
.signal-color.color01:before{background:#f10f3a}
.signal-color.color02:before{background:#ff6a00}
.signal-color.color03:before{background:#fdc23e}
.signal-color.color04:before{background:#75d701}
.signal-color.color05:before{background:#3fc495}
.signal-color.color06:before{background:#32c4c0}
.signal-color.color07:before{background:#22d6dd}
.signal-color.color08:before{background:#a38af7}
.signal-color.color09:before{background:#8364e8}
.signal-color.color10:before{background:#4265d6}
.signal-color.color11:before{background:#33beff}
.signal-color.color12:before{background:#0061ff}
.signal-color.color13:before{background:#5f21c7}
.signal-color.color14:before{background:#103783}
.signal-color.color15:before{background:#fa167c}
.signal-color.color16:before{background:#ff8379}
.signal-color.color17:before{background:#77af9c}
.signal-color.color18:before{background:#02636c}
.signal-color.color19:before{background:#a3a1a1}
.signal-color.color20:before{background:#555555}
.signal-color.color21:before{background:#fea626}
.signal-color.color22:before{background:#dff5ff; border:1px solid #c3dce8;}
.signal-color.color23:before{background:#ffffff; border:1px solid #dedede;}
.signal-color.color24:before{background:#c1ee8d}
.signal-color .cont-txt{display:block; padding-left:4px; font-size:1.4rem; letter-spacing:-0.2px; color:#707070; line-height:150%}
.signal-color.only-signal{height:11px;}
.signal-color.only-signal:before{top:0px;}