/******************************************************************************************************************************************
*	Site Name	: 32BUS
*	Site URL	: http://32bus.com
*	Description	: 사이트 셀렉트 메뉴 (레이어 방식이아닌 핸드폰에서 옵션을 선택할 수 있도록 구성)
*	Company		: CELMON LTD.
*	EITOR		: FUNNY
*	Date		: 2017/11 ~
*	Caution		: CSS의 변경/추가/삭제 시 내용,일자,처리자를 주석으로 표현 할 것.(주석명 - 날짜 : 추가,수정자)
*******************************************************************************************************************************************/
/***** Basic Style *****/
/* (FUNNY Standard Fixed) */
.custom-select						{position:relative; display:block;}
.custom-select option				{font-weight:normal;}
.custom-select select:focus			{border:none; padding:0 .5em 0 .58em;}
.custom-select::after				{content:''; position:absolute; top:50%; right:10px; width:7px; height:7px; pointer-events:none; display:none; z-index:2;
									-webkit-transform:rotate(45deg); transform:rotate(45deg); -ms-transform:rotate(45deg); margin-top:-5px;}
.custom-select select				{cursor:pointer; width:100%; height:30px; font:12px NanumSquareR; border:1px solid transparent; letter-spacing:0em; vertical-align:middle; margin:0; outline:none; padding:0 .5em 0 .5em;
									box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
@supports (box-shadow:none)			{.custom-select select:focus {outline:none;}}

/* (FUNNY Variable) */
.custom-select						{background:#FFF; border:1px solid #DEDEDE;}
.custom-select:hover				{border-color:#bababa;}
.custom-select::after				{border:2px solid #999; border-top:none; border-left:none;}
.custom-select select				{color:#575757;}


/* Firefox <= 34 has a false positive on @supports( -moz-appearance: none )
 * @supports ( mask-type: alpha ) is Firefox 35+
 */
@supports (-webkit-appearance: none) or (appearance: none) or ((-moz-appearance: none) and (mask-type: alpha)) {
	.custom-select::after			{display:block;}
	.custom-select select			{padding:0em 1.2em 0em .5em; background:none; -webkit-appearance: none;-moz-appearance: none; appearance: none;}
	.custom-select select:focus		{border-color:#bababa;}
}


/* Responsive Select : 2020.04.06 - FUNNY */
@media screen and (max-width:600px) {
	.custom-select					{margin-bottom:0px;}
	.custom-select.divide01 		{display:inline-block !important; width:100% !important;}
	.custom-select.divide02 		{display:inline-block !important; width:calc(50% - 1px) !important;}
	.custom-select.divide03 		{display:inline-block !important; width:calc(33.3% - 2px) !important;}
	.custom-select.divide04 		{display:inline-block !important; width:25% !important;}
	.custom-select.divide05 		{display:inline-block !important; width:20% !important;}
}

/* SELECT SMALL */
.custom-select.small				{background:#FFF; border:1px solid #DEDEDE;}
.custom-select.small:hover			{border-color:#5db626;}
.custom-select.small::after			{width:0; height:0;right:10px; width:7px; height:7px; border:2px solid #5db626; border-top:none; border-left:none; margin-top:-5px;
									-webkit-transform:rotate(45deg); transform:rotate(45deg); -ms-transform:rotate(45deg);}
.custom-select.small select			{cursor:pointer; width:100%; font:12px NanumSquareR; color:#777; border:1px solid transparent; letter-spacing:0em; vertical-align:middle; margin:0; outline:none; height:28px; padding:0 1.6em 0 .8em;
									box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
.custom-select.small option			{background:#FFF;}
.custom-select.small select:focus	{color:#444; box-shadow:none;}


/* SELECT BOTTOM */
.custom-select.bottom				{background:#FFF; border-top:none; border-right:1px solid #dedede; border-bottom:none; border-left:none; }
.custom-select.bottom:hover			{border-color:#AAA;}
.custom-select.bottom::after		{border:1px solid #888; border-left:none; border-bottom:none;}
.custom-select.bottom select		{color:#777; height:33px;}


/* SELECT GREEN */
.custom-select.sgreen				{background:#97cf02; border:1px solid #87b901;}
.custom-select.sgreen:hover			{border-color:#75a001;}
.custom-select.sgreen::after		{border:2px solid #FFF; border-top:none; border-left:none;}
.custom-select.sgreen select		{color:#000;}

/* SELECT BLUE  */
.custom-select.sblue				{background:#34a2f7; border:1px solid #149aed;}
.custom-select.sblue:hover			{border-color:#0484d3;}
.custom-select.sblue::after			{border:2px solid #FFF; border-top:none; border-left:none;}
.custom-select.sblue select			{color:#000;}

/* SELECT RED */
.custom-select.sred					{background:#f82c04; border:1px solid #f82c04;}
.custom-select.sred:hover			{border-color:#b41f02; color:#FFF;}
.custom-select.sred::after			{border:2px solid #FFF; border-top:none; border-left:none;}
.custom-select.sred select			{color:#FFF;}
.custom-select.sred option			{color:#000;}

/* SELECT DARKGRAY */
.custom-select.sdarkgray			{background:#AAAAAA; border:1px solid #999999;}
.custom-select.sdarkgray:hover		{border-color:#5e6974; color:#FFF;}
.custom-select.sdarkgray::after		{border:2px solid #FFF; border-top:none; border-left:none;}
.custom-select.sdarkgray select		{color:#FFF;}
.custom-select.sdarkgray option		{color:#000;}

/* SELECT BLUEGRAY */
.custom-select.sbluegray			{background:#8898a7; border:1px solid #758390;}
.custom-select.sbluegray:hover		{border-color:#666666; color:#FFF;}
.custom-select.sbluegray::after		{border:2px solid #FFF; border-top:none; border-left:none;}
.custom-select.sbluegray select		{color:#FFF;}
.custom-select.sbluegray option		{color:#000;}

/* SELECT GRAD01 */
.custom-select.sgrad01				{background:linear-gradient(-90deg, #FEE140 0%, #FA709A 100%); border:1px solid #fe8840;}
.custom-select.sgrad01:hover		{border-color:#f50c53; color:#FFF;}
.custom-select.sgrad01::after		{border:2px solid #fe8840; border-top:none; border-left:none;}
.custom-select.sgrad01 select		{color:#FFFFFF;}
.custom-select.sgrad01 option		{color:#000;}

/* SELECT YELLOW */
.custom-select.syellow				{background:#fcdc02; border:1px solid #e1b900;}
.custom-select.syellow:hover		{border-color:#d2a301; color:#000;}
.custom-select.syellow::after		{border:2px solid #9b6a00; border-top:none; border-left:none;}
.custom-select.syellow select		{color:#342902;}
.custom-select.syellow option		{color:#000;}

/* SELECT YELLOW LINE*/
.custom-select.syellowline			{background:#FFFFFF; border:1px solid #e1b900;}
.custom-select.syellowline:hover	{border-color:#d2a301; color:#000;}
.custom-select.syellowline::after	{border:2px solid #e1b900; border-top:none; border-left:none;}
.custom-select.syellowline select	{color:#e1b900;}
.custom-select.syellowline option	{color:#000000;}

/* SELECT SCARLET LINE */
.custom-select.sscarletline			{background:#F3F3F3; border:1px solid #d43d39;}
.custom-select.sscarletline:hover	{border-color:#db1e19; color:#cf211c;}
.custom-select.sscarletline::after	{border:2px solid #d43d39; border-top:none; border-left:none;}
.custom-select.sscarletline select	{color:#d43d39;}
.custom-select.sscarletline option	{color:#000;}

/* SELECT BLUE LINE */
.custom-select.sblueline			{background:#F3F3F3; border:1px solid #149aed;}
.custom-select.sblueline:hover		{border-color:#0484d3; color:#cf211c;}
.custom-select.sblueline::after		{border:2px solid #149aed; border-top:none; border-left:none;}
.custom-select.sblueline select		{color:#0484d3;}
.custom-select.sblueline option		{color:#000;}

/* SELECT GREEN LINE */
.custom-select.sgreenline			{background:#FFFFFF; border:1px solid #00c73c ;}
.custom-select.sgreenline:hover		{border-color:#01b036; color:#01b036;}
.custom-select.sgreenline::after	{border:2px solid #00c73c; border-top:none; border-left:none;}
.custom-select.sgreenline select	{color:#00c73c;}
.custom-select.sgreenline option	{color:#000;}

/* SELECT ACT RED */
.custom-select.act					{background:#f82c04; border:1px solid #f82c04;}
.custom-select.act:hover			{border-color:#b41f02; color:#FFF;}
.custom-select.act::after			{border:2px solid #FFF; border-top:none; border-left:none;}
.custom-select.act select			{color:#FFF;}
.custom-select.act option			{color:#000;}


/* Adds Firefox < 35 support */
/* FIREFOX won't let us hide the native select arrow, so we have to make it wider than needed and clip it via overflow on the parent container. The percentage width is a fallback since FF 4+ supports calc() so we can just add a fixed amount of extra width to push the native arrow out of view. We're applying this hack across all FF versions because all the previous hacks were too fragile and complex. You might want to consider not using this hack and using the native select arrow in FF. Note this makes the menus wider than the select button because they display at the specified width and aren't clipped. Targeting hack via http://browserhacks.com/#hack-758bff81c5c32351b02e10480b5ed48e */
/* Show only the native arrow */
@-moz-document url-prefix() {
	/* Warning: this kills the focus outline style */
	.custom-select {
		overflow: hidden;
	}
	.custom-select::after {
		display: block;
	}
	/* Make the native select extra wide so the arrow is clipped. 1.5em seems to be enough to safely clip it */
	.custom-select select {
		overflow: -moz-hidden-unscrollable;
		padding-right: .4em;
		background: none; /* Match-04 */
		border: 1px solid transparent; /* Match-05 */
		/* Firefox < 4 */
		min-width: 6em;
		width: 130%;
		/* Firefox 4-15 */
		min-width: -moz-calc(0em);
		width: -moz-calc(100% + 2.4em);
		/* Firefox 16+ */
		min-width: calc(0em);
		width: calc(100% + 2.4em);
	}

	/* Firefox 35+ that supports hiding the native select can have a proper 100% width, no need for the overflow clip trick */
	@supports ( mask-type: alpha ) {
		.custom-select {
			overflow: visible;
		}
		.custom-select select {
			-moz-appearance: none;
			width: 100%;
			padding-right: 2em; /* Match-01 padding-right */
		}
	}
}

/* Firefox focus has odd artifacts around the text, this kills that. See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring */
.custom-select select:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 #000;
}

/* IE 10/11+ - This hides native dropdown button arrow so it will have the custom appearance. Targeting media query hack via http://browserhacks.com/#hack-28f493d247a12ab654f6c3637f6978d5 - looking for better ways to achieve this targeting */
/* The second rule removes the odd blue bg color behind the text in the select button in IE 10/11 and sets the text color to match the focus style's - fix via http://stackoverflow.com/questions/17553300/change-ie-background-color-on-unopened-focused-select-box */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.custom-select select::-ms-expand {
		display: none;
	}
	.custom-select select:focus {
		border-color: #aaa; /* Match-03 */
	}
	.custom-select select:focus::-ms-value {
		background: transparent;
		color: #222; /* Match-02*/
	}
	.custom-select select {
		padding-right: 2em; /* Match-01 */
		background: none; /* Match-04 */
		border: 1px solid transparent; /* Match-05 */
	}
	.custom-select::after {
		display: block;
	}
}