@charset "utf-8";

/* ----------------------------------------------- element */
input,
select,
textarea                 {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
input[type=password],
input[type=text],
select,
textarea                 {font-size:16px;min-height:1em;color:#333;background:#fff;outline:none;border:1px solid #ccc;border-radius:0.4em;}
input[type=password]:focus,
input[type=text]:focus,
select:focus,
textarea:focus           {border-color:#39c;}
input[type=password],
input[type=text],
select,
textarea                 {width:100%;}
input[type=password],
input[type=text]         {padding:0 0.8em;line-height:2em;height:2.4em;vertical-align:top;}
select                   {padding:0.5em 0.8em;line-height:2em;height:2.4em;vertical-align:top;}
textarea                 {padding:0.8em;line-height:1.4em;}

::-webkit-input-placeholder {}
:-moz-placeholder           {}
input[type=password]:-ms-input-placeholder,
input[type=text]:-ms-input-placeholder,
:-ms-input-placeholder      {color:#ccc;} 

/* ----------------------------------------------- button */
.btn                     {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.btn                     {font-size:1em;min-height:1em;padding:0 0.8em;line-height:2.4em;height:2.4em;color:#fff;background:#666;display:inline-block;text-align:center;border-radius:4px;border:0 none;text-decoration:none;}
a.btn, a.btn:link,
a.btn:visited            {color:#fff;}
input.btn                {vertical-align:top;cursor:pointer;}
.btns                    {text-align:center;padding:1em 0;}
.btns form               {display:inline;}
.btns .btn               {margin:0 .3em;}
.btn_posi                {background:#4dc4c2;}
.btn_posi:hover          {background:#12D1D1;}
.btn_nega                {background:#333;}
.btn_nega:hover          {background:#666;}
.btn_mdfy                {background:#f60;}
.btn_mdfy:hover          {background:#f90;}
.btn_dsbl                {background:#ccc;}
.btn_empha               {background:#f60;}
.btn_empha:hover         {background:#f90;}

/* ----------------------------------------------- form */
.frm .btns               {clear:both;}
.frm .counter            {color:#ccc;line-height:1.5;display:block;text-align:right;}
.frm .counter.warning    {color:#e21;}
.frm .counter.exceeded   {color:#e21;font-weight:bold;}

.ipf,
.ipf dt,
.ipf dd                  {margin:0;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}


.ipf                            {width:100%;display:block;position:relative;overflow:hidden;margin-bottom:1em;}
.ipf span                       {display:inline-block;}
.ipf_key, .ipf_val,
.ipf_msg                        {line-height:1.5;}
.ipf .sb2                       {color:#ccc;display:inline-block;}

.ipf_key                        {margin:0 0 0.2em;}
.ipf_key label,
.ipf_key span                   {display:inline-block;}
.ipf_key i                      {margin-right:0.5em;display:inline-block;}
.ipf_key .rqur                  {background:#333;color:#fff;font-size:0.88em;display:inline-block;vertical-align:middle;line-height:1.6em;padding:0 0.8em;white-space:nowrap;border-radius:1.6em;}

.ipf_msg                        {color:#4dc4c2;margin:0 0 0.2em;}
.ipf_err                        {color:#e21;font-weight:bold;}

.ipf_elm                        {margin-bottom:0.5em;margin-left:0.1em;}
.ipf_elm input[type=radio],
.ipf_elm input[type=checkbox],
.ipf_elm label                  {vertical-align:middle;display:inline-block;}
.ipf_elm label                  {margin:0 2em 0 0.5em;cursor:pointer;white-space:nowrap;}
.ipf_elm .input_set             {white-space:nowrap;}

.ipf_nmbr .btn,
.ipf_nmbr .dlmt,
.ipf_nmbr input                 {vertical-align:middle;display:inline-block;}
.ipf_nmbr .dlmt                 {}
.ipf_nmbr input                 {width:5em;}
.ipf_pref select                {width:auto;}
.ipf_50 input                   {width:12em;}

.ipf_price_range                {display:inline-block;margin-bottom:0.5em;}
.ipf_price_range select         {width:10em;}
.ipf_price_range .dlmt          {display:inline-block;vertical-align:middle;line-height:2.6em;padding:0 0.5em;}

/* ----------------------------------------------- confirm */
.frm_confirm .ipf_txt           {background:#fff;border:1px dashed #ccc;padding:0.5em;border-radius:0.4em;}

/* ----------------------------------------------- error */
.error_message           {background:#e21;color:#fff;font-weight:bold;line-height:1.5;margin:0 0 0.5em;padding:0.5em;}
.frm .err_msg            {background:#e21;color:#fff;font-weight:bold;line-height:1.5;margin:0 0 0.5em;padding:0.5em;display:none;}
.frm div.err             {margin:0 0 0.5em; color:#e21;font-weight:bold;}

input[type=password].err,
input[type=text].err,
select.err,
textarea.err             {border-color:#e21;}

/* ============================================================== media query */
@media screen and (min-width: 480px){
	.ipf_key                        {width:20%;float:left;display:block;}
	.ipf_val                        {width:76%;margin-left:4%;float:right;display:block;}
}
@media screen and (min-width: 760px){

}
@media screen and (min-width: 1500px){
	.ipf                            {clear:both;}
	.ipf.ipf_fl                     {width:49%;float:left;}
	.ipf.ipf_fr                     {width:49%;float:right;clear:none;}
	.ipf_key                        {width:30%;font-size:0.88em;}
	.ipf_val                        {width:66%;}
}