@charset "utf-8";

/* 
 * common CSS Document
 */
 
/* Form Control */
input,
select,
textarea,
label{display:inline-block; box-sizing:border-box; width:auto; vertical-align:middle; line-height:1.4;}
input[type=text],
input[type=password],
input[type=tel],
input[type=date],
input[type=email],
input[type=number],
textarea{height:33px; padding:7px 8px; margin:2px 0px; border:1px solid #ddd; background:#fff; vertical-align:middle;}
textarea{resize:none;}
select{height:33px; padding:0 8px; margin:2px 0px; border:1px solid #ddd; background:#fff; vertical-align:middle;}
select::-ms-expand {background-color:transparent; border:0;}
input[type="text"],
input[type="password"],
input[type="submit"],
input[type="button"],
input[type="number"],
input[type="file"],
select,
textarea{-webkit-border-radius:1px; -webkit-appearance:none;}
select{padding-right:30px; background:url(../images/board/select_arrow.svg) no-repeat calc(100% - 10px) 50%; background-size:7px 7px;}
body[class*="ie"] select{padding-right:10px;}
input[type=file]{background:#eee; font-size:1.08em;}
input[readonly],
input[disabled]{background:#eee;}
input[type=checkbox],
input[type=radio]{width:13px; height:13px; margin:2px 3px 1px 0;}
input[type=checkbox] + label,
input[type=radio] + label{margin-right:20px;}
table{width:100%;}


/* 필수입력 */
.marking{display:inline-block; position:relative; width:10px; height:14px; margin-bottom:-2px; vertical-align:middle; text-indent:100%; overflow:hidden; white-space:nowrap;} 
.marking:after{content:'*'; display:inline-block; position:absolute; top:0; left:0; line-height:17px; font-size:14px; font-weight:600; text-indent:0; color:#c51917;}

/* button */
.btn_area{padding:30px 0; text-align:center;}
.btn_area.right{text-align:right;}
.btn_area.left{text-align:left;}
.button{display:inline-block; overflow:hidden; position:relative; min-width:180px; height:45px; line-height:43px; box-sizing:border-box; padding:0 15px; margin:2px 0px; background:#41464e; border:1px solid #25282d; color:#fff !important; text-align:center; vertical-align:middle; transition:all 0.4s ease-out 0.1s; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0);}
.button span{position:relative; z-index:2;}
.button.red{background:#c40251; border:1px solid #c40251;}
.button.blue{background:#2377d0; border:1px solid #1760ad;}
.button.black{background:#2d2b2b; border:1px solid #1f1f1f;}
.button.gray{background:#92999e; border:1px solid #92999e;}
.button.white{background:#fff; border:1px solid #fff; color:#444 !important;}
.button.lg{min-width:150px; height:50px; line-height:48px; font-size:16px; letter-spacing:-1px;}
.button.sm{min-width:60px; height:23px; line-height:21px; padding:0 10px; font-size:12px;}
.btn_area .button{height:45px; line-height:43px;}
.btn_area .button.sm{height:23px; line-height:21px;}
.btn_area .button.lg{height:50px; line-height:48px;}
table .button{height:33px; line-height:31px;}
/* button hover */
.button:before{content:''; display:block; position:absolute; top:0px; right:0px; bottom:0px; left:0px; z-index:1; width:120%; height:110%; background:#fff; transform:translateX(-120%) skew(-15deg); transition:transform 0.7s cubic-bezier(0, 0, 0.21, 0.87) 0s;}
.button:hover:before,
.button:focus:before{background:#fff; transform:translateX(-10%) skew(-15deg) perspective(500px);}
.button:hover,
.button:focus{color:#222 !important; box-shadow:0px 10px 15px rgba(0,0,0,0.15);}
input.button:hover,
input.button:focus{opacity:0.8; color:#fff !important;}
label.button.white:hover,
label.button.white:focus{color:#222 !important;}
label.button.white:before{display:none;}

@media screen and (max-width:1300px){
    .button{min-width:150px;}
}


@media screen and (max-width:1024px){
    .button{min-width:120px;}
}

@media screen and (max-width:600px){

}

@media screen and (max-width:420px){
}