/************************************* pc ********/
@media only screen and (min-width: 981px) {
div.ex_search			{border-top:1px solid #ddd; border-right:1px solid #ddd; margin-top:20px;}
div.ex_search	 dl		{display:table; width:100%;}
div.ex_search	 dt		{display:Table-cell; width:20%; padding:20px; box-sizing:border-box; background:#1c84d4; position:relative; border-bottom:1px solid #226ca6;vertical-align:top;  font:500 16px/20px "Noto Sans KR",Malgun Gothic, Dotum, Arial, verdana, Helvetica; color:#fff}
div.ex_search	 dd	{display:Table-cell; width:80%; padding:20px;box-sizing:border-box; border-bottom:1px solid #ddd; vertical-align:top;}
div.ex_search	 dd ul.checks		{width:100%; max-height:200px; overflow-y:auto; }
div.ex_search	 dd ul.checks li		{display:inline-block; width:19%; box-sizing:border-box; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
div.ex_search	 dl.on p.onoff				{position:absolute; top:30px; right:10px; width:14px; height:14px;}
div.ex_search	 dl.on p.onoff a				{position:relative;}
div.ex_search	 dl.on p.onoff a::before		{content:''; width:2px; height:14px; position:absolute; right:0; top:50%; margin:-7px 5px 0 0; background:#fff}
div.ex_search	 dl.on p.onoff a:after			{content:''; width:14px; height:2px; position:absolute; right:0; top:50%; margin-top:-1px; background:#fff}

div.ex_search	 dt p.onoff				{position:absolute; top:30px; right:10px; width:14px; height:14px}
div.ex_search	 dt p.onoff a				{position:relative;}
div.ex_search	 dt p.onoff a:after			{content:''; width:14px; height:2px; position:absolute; right:0; top:50%; margin-top:-1px; background:#fff}


div.ex_search .search						{overflow:hidden; height:41px}
div.ex_search .sel							{position:relative; display:inline-block; vertical-align:top; width:120px; height:40px; border:1px solid #dddddd; background:url('../_img/mo/cont/sel_bg.png') no-repeat 100% 50% / 30px; box-sizing:border-box}
div.ex_search .sel label						{position:absolute; top:10px; left:10px; font:100 15px/18px "Noto Sans KR", "Malgun Gothic", Dotum, Arial, verdana, Helvetica; color:#999;}
div.ex_search .sel select					{width:100%; position:absolute; top:0; left:0; height:40px; min-height:39px; padding:5px 2px; opacity:0; font:100 16px/22px "Noto Sans KR", "Malgun Gothic", Dotum, Arial, verdana, Helvetica; color:#999;}
div.ex_search .sel select:active				{border:1px solid #1c84d4}
div.ex_search .input							{display:inline-block; vertical-align:top;}
div.ex_search .input input					{width:640px; vertical-align:top; height:40px; padding:0 10px; border:1px solid #ddd; font:100 16px/18px "Noto Sans KR", "Malgun Gothic", Dotum, Arial, verdana, Helvetica; color:#333; box-sizing:border-box;}
div.ex_search .input input:focus			{border:1px solid #1c84d4}
div.ex_search .input input::placeholder	{font:100 15px/26px "Noto Sans KR", "Malgun Gothic", Dotum, Arial, verdana, Helvetica; color:#999;}
div.ex_search .input a.re_btn						{padding:9px 18px; display:inline-block; vertical-align:top; background:#1c84d4; font:100 16px/22px "Noto Sans KR", "Malgun Gothic", Dotum, Arial, verdana, Helvetica; color:#fff; border-radius:2px; -moz-transition: all 400ms; -o-transition: all 400ms; -webkit-transition: all 400ms; transition: all 400ms}
div.ex_search .input a.re_btn:hover				{background:#333;}
div.ex_search .input a.re_btn:active				{background:#333;}
div.ex_search .input a.re_btn02						{padding:9px 18px; display:inline-block; vertical-align:top; background:#666; font:100 16px/22px "Noto Sans KR", "Malgun Gothic", Dotum, Arial, verdana, Helvetica; color:#fff; border-radius:2px; -moz-transition: all 400ms; -o-transition: all 400ms; -webkit-transition: all 400ms; transition: all 400ms}
div.ex_search .input a.re_btn02:hover				{background:#333;}
div.ex_search .input a.re_btn02:active				{background:#333;}

p.data_text02				{margin-top:50px; font:300 18px/18px "Noto Sans KR", "Malgun Gothic", Dotum, Arial, verdana, Helvetica; color:#333; }
p.data_text02 span		{color:#1c84d4; }


.checks													{display:inline-block; text-align:left; position: relative; display:inline-block; vertical-align:top; overflow:hidden;}
.checks input[type="radio"]								{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0}
.checks input[type="radio"] + label						{display: inline-block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none;  -ms-user-select: none; font:300 14px/21px  'Montserrat','Noto Sans KR',"Malgun Gothic", Dotum, Arial, verdana, Helvetica; color:#666}
.checks input[type="radio"] + label:before				{content: ' '; display: inline-block; width: 16px; height: 16px; line-height: 16px; box-sizing:border-box; margin: -2px 5px 0 0; text-align: center; vertical-align: middle; border: 1px solid #ccc; border-radius:100%}
.checks input[type="radio"]:checked + label:before	{content: ' '; background:url('/_img/bbs/radio_on.png') no-repeat 50% 50%; border:1px solid #1c84d4; color:##1c84d4}
.checks input[type="radio"]:checked + label			{color:##1c84d4}
.checks input[type="radio"]:checked + label:after		{content:''; position:absolute; top:6px; left:4px; width:8px; height:8px; border-radius:100%; background:#1c84d4}


}/* pc끝 */






/******** 태블릿 ********/
@media only screen and (min-width: 640px) and (max-width: 980px) {


div.ex_search			{border-top:1px solid #ddd; border-right:1px solid #ddd; margin-top:20px;}
div.ex_search	 dl		{display:table; width:100%;}
div.ex_search	 dt		{display:Table-cell; width:20%; padding:20px; box-sizing:border-box; background:#1c84d4; position:relative; border-bottom:1px solid #226ca6;vertical-align:top;  font:500 16px/20px "Noto Sans KR",Malgun Gothic, Dotum, Arial, verdana, Helvetica; color:#fff}
div.ex_search	 dd	{display:Table-cell; width:80%; padding:20px;box-sizing:border-box; border-bottom:1px solid #ddd; vertical-align:top;}
div.ex_search	 dd ul.checks		{width:100%; max-height:200px; overflow-y:auto; }
div.ex_search	 dd ul.checks li		{display:inline-block; width:19%; box-sizing:border-box; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
div.ex_search	 dl.on p.onoff				{position:absolute; top:30px; right:10px; width:14px; height:14px;}
div.ex_search	 dl.on p.onoff a				{position:relative;}
div.ex_search	 dl.on p.onoff a::before		{content:''; width:2px; height:14px; position:absolute; right:0; top:50%; margin:-7px 5px 0 0; background:#fff}
div.ex_search	 dl.on p.onoff a:after			{content:''; width:14px; height:2px; position:absolute; right:0; top:50%; margin-top:-1px; background:#fff}

div.ex_search	 dt p.onoff				{position:absolute; top:30px; right:10px; width:14px; height:14px}
div.ex_search	 dt p.onoff a				{position:relative;}
div.ex_search	 dt p.onoff a:after			{content:''; width:14px; height:2px; position:absolute; right:0; top:50%; margin-top:-1px; background:#fff}


div.ex_search .search						{overflow:hidden; height:41px}
div.ex_search .sel							{position:relative; display:inline-block; vertical-align:top; width:100%; margin-bottom:5px; height:40px; border:1px solid #dddddd; background:url('../_img/mo/cont/sel_bg.png') no-repeat 100% 50% / 30px; box-sizing:border-box}
div.ex_search .sel label						{position:absolute; top:10px; left:10px; font:100 15px/18px "Noto Sans KR", "Malgun Gothic", Dotum, Arial, verdana, Helvetica; color:#999;}
div.ex_search .sel select					{width:100%; position:absolute; top:0; left:0; height:40px; min-height:39px; padding:5px 2px; opacity:0; font:100 16px/22px "Noto Sans KR", "Malgun Gothic", Dotum, Arial, verdana, Helvetica; color:#999;}
div.ex_search .sel select:active				{border:1px solid #1c84d4}
div.ex_search .input							{display:inline-block; width:100%; vertical-align:top;}
div.ex_search .input input					{width:100%; vertical-align:top; height:40px; padding:0 10px; margin-bottom:5px; border:1px solid #ddd; font:100 15px/18px "Noto Sans KR", "Malgun Gothic", Dotum, Arial, verdana, Helvetica; color:#333; box-sizing:border-box;}
div.ex_search .input input:focus			{border:1px solid #1c84d4}
div.ex_search .input input::placeholder	{font:100 15px/26px "Noto Sans KR", "Malgun Gothic", Dotum, Arial, verdana, Helvetica; color:#999;}
div.ex_search .input a.re_btn						{padding:9px 15px; display:inline-block; vertical-align:top; background:#1c84d4; font:100 15px/22px "Noto Sans KR", "Malgun Gothic", Dotum, Arial, verdana, Helvetica; color:#fff; border-radius:2px; -moz-transition: all 400ms; -o-transition: all 400ms; -webkit-transition: all 400ms; transition: all 400ms}
div.ex_search .input a.re_btn:hover				{background:#333;}
div.ex_search .input a.re_btn:active				{background:#333;}
div.ex_search .input a.re_btn02						{padding:9px 15px; display:inline-block; vertical-align:top; background:#666; font:100 15px/22px "Noto Sans KR", "Malgun Gothic", Dotum, Arial, verdana, Helvetica; color:#fff; border-radius:2px; -moz-transition: all 400ms; -o-transition: all 400ms; -webkit-transition: all 400ms; transition: all 400ms}
div.ex_search .input a.re_btn02:hover				{background:#333;}
div.ex_search .input a.re_btn02:active				{background:#333;}

p.data_text02				{margin-top:50px; font:300 18px/18px "Noto Sans KR", "Malgun Gothic", Dotum, Arial, verdana, Helvetica; color:#333; }
p.data_text02 span		{color:#1c84d4; }


.checks													{display:inline-block; text-align:left; position: relative; display:inline-block; vertical-align:top; overflow:hidden;}
.checks input[type="radio"]								{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0}
.checks input[type="radio"] + label						{display: inline-block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none;  -ms-user-select: none; font:300 14px/21px  'Montserrat','Noto Sans KR',"Malgun Gothic", Dotum, Arial, verdana, Helvetica; color:#666}
.checks input[type="radio"] + label:before				{content: ' '; display: inline-block; width: 16px; height: 16px; line-height: 16px; box-sizing:border-box; margin: -2px 5px 0 0; text-align: center; vertical-align: middle; border: 1px solid #ccc; border-radius:100%}
.checks input[type="radio"]:checked + label:before	{content: ' '; background:url('/_img/bbs/radio_on.png') no-repeat 50% 50%; border:1px solid #1c84d4; color:##1c84d4}
.checks input[type="radio"]:checked + label			{color:##1c84d4}
.checks input[type="radio"]:checked + label:after		{content:''; position:absolute; top:6px; left:4px; width:8px; height:8px; border-radius:100%; background:#1c84d4}


}/****************** 태블릿끝 ****************/





/******** 모바일 ********/
@media only screen and (max-width: 640px) {
div.ex_search			{border-top:1px solid #ddd; border-right:1px solid #ddd; margin-top:20px;}
div.ex_search	 dl		{display:table; width:100%;}
div.ex_search	 dt		{display:Table-cell; width:105px; padding:15px; box-sizing:border-box; background:#1c84d4; position:relative; border-bottom:1px solid #226ca6;vertical-align:top;  font:500 16px/20px "Noto Sans KR",Malgun Gothic, Dotum, Arial, verdana, Helvetica; color:#fff}
div.ex_search	 dd	{display:Table-cell; width:; padding:15px; box-sizing:border-box; border-bottom:1px solid #ddd; vertical-align:top;}
div.ex_search	 dd ul.checks		{width:100%; max-height:200px; overflow-y:auto; }
div.ex_search	 dd ul.checks li		{display:inline-block; width:49%; box-sizing:border-box; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
div.ex_search	 dl.on p.onoff				{position:absolute; top:25px; right:5px; width:14px; height:14px;}
div.ex_search	 dl.on p.onoff a				{position:relative;}
div.ex_search	 dl.on p.onoff a::before		{content:''; width:2px; height:14px; position:absolute; right:0; top:50%; margin:-7px 5px 0 0; background:#fff}
div.ex_search	 dl.on p.onoff a:after			{content:''; width:14px; height:2px; position:absolute; right:0; top:50%; margin-top:-1px; background:#fff}

div.ex_search	 dt p.onoff				{position:absolute; top:25px; right:5px; width:14px; height:14px}
div.ex_search	 dt p.onoff a				{position:relative;}
div.ex_search	 dt p.onoff a:after			{content:''; width:14px; height:2px; position:absolute; right:0; top:50%; margin-top:-1px; background:#fff}


div.ex_search .search						{overflow:hidden; height:41px}
div.ex_search .sel							{position:relative; display:inline-block; vertical-align:top; margin-bottom:5px; width:100%; height:40px; border:1px solid #dddddd; background:url('../_img/mo/cont/sel_bg.png') no-repeat 100% 50% / 30px; box-sizing:border-box}
div.ex_search .sel label						{position:absolute; top:10px; left:10px; font:100 15px/18px "Noto Sans KR", "Malgun Gothic", Dotum, Arial, verdana, Helvetica; color:#999;}
div.ex_search .sel select					{width:100%; position:absolute; top:0; left:0; height:40px; min-height:39px; padding:5px 2px; opacity:0; font:100 16px/22px "Noto Sans KR", "Malgun Gothic", Dotum, Arial, verdana, Helvetica; color:#999;}
div.ex_search .sel select:active				{border:1px solid #1c84d4}
div.ex_search .input							{display:inline-block; vertical-align:top;;}
div.ex_search .input input					{width:100%; vertical-align:top; height:40px; padding:0 10px; margin-bottom:5px; border:1px solid #ddd; font:100 16px/18px "Noto Sans KR", "Malgun Gothic", Dotum, Arial, verdana, Helvetica; color:#333; box-sizing:border-box;}
div.ex_search .input input:focus			{border:1px solid #1c84d4}
div.ex_search .input input::placeholder	{font:100 15px/26px "Noto Sans KR", "Malgun Gothic", Dotum, Arial, verdana, Helvetica; color:#999;}
div.ex_search .input a.re_btn						{padding:9px 18px; display:inline-block; vertical-align:top; background:#1c84d4; font:100 14px/22px "Noto Sans KR", "Malgun Gothic", Dotum, Arial, verdana, Helvetica; color:#fff; border-radius:2px; -moz-transition: all 400ms; -o-transition: all 400ms; -webkit-transition: all 400ms; transition: all 400ms}
div.ex_search .input a.re_btn:hover				{background:#333;}
div.ex_search .input a.re_btn:active				{background:#333;}
div.ex_search .input a.re_btn02						{padding:9px 18px; display:inline-block; vertical-align:top; background:#666; font:100 14px/22px "Noto Sans KR", "Malgun Gothic", Dotum, Arial, verdana, Helvetica; color:#fff; border-radius:2px; -moz-transition: all 400ms; -o-transition: all 400ms; -webkit-transition: all 400ms; transition: all 400ms}
div.ex_search .input a.re_btn02:hover				{background:#333;}
div.ex_search .input a.re_btn02:active				{background:#333;}

p.data_text02				{margin-top:50px; font:300 18px/18px "Noto Sans KR", "Malgun Gothic", Dotum, Arial, verdana, Helvetica; color:#333; }
p.data_text02 span		{color:#1c84d4; }


.checks													{display:inline-block; text-align:left; position: relative; display:inline-block; vertical-align:top; overflow:hidden;}
.checks input[type="radio"]								{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0}
.checks input[type="radio"] + label						{display: inline-block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none;  -ms-user-select: none; font:300 14px/21px  'Montserrat','Noto Sans KR',"Malgun Gothic", Dotum, Arial, verdana, Helvetica; color:#666}
.checks input[type="radio"] + label:before				{content: ' '; display: inline-block; width: 16px; height: 16px; line-height: 16px; box-sizing:border-box; margin: -2px 5px 0 0; text-align: center; vertical-align: middle; border: 1px solid #ccc; border-radius:100%}
.checks input[type="radio"]:checked + label:before	{content: ' '; background:url('/_img/bbs/radio_on.png') no-repeat 50% 50%; border:1px solid #1c84d4; color:##1c84d4}
.checks input[type="radio"]:checked + label			{color:##1c84d4}
.checks input[type="radio"]:checked + label:after		{content:''; position:absolute; top:6px; left:4px; width:8px; height:8px; border-radius:100%; background:#1c84d4}


}