/******************************************************************************************************************************************
*	Site Name			: 장흥청정김
*	Site URL			: jhgim.com
*	Description			: 사이트 전반적인 버튼 컨트롤
*	Company				: CELMON co., ltd.
*	Author(CSS Design)	: FUNNY
*	Date				: 2018/04 ~
*	Caution				: CSS의 변경/추가/삭제 시 내용,일자,처리자를 주석으로 표현 할 것.(주석명 - 날짜 : 추가,수정자)
*******************************************************************************************************************************************/
@charset "utf-8";

/* Input */
input	{height:32px; padding:0px 10px 0px 11px; font:12px/34px NanumBarunGothic; color:#333; border-width:1px; border-color:#b1b2b3 #e4e4e4 #e4e4e4 #b1b2b3; border-style:solid; background:#F4F4F4; letter-spacing:0em; border-radius:2px; vertical-align:middle;}
input::-webkit-input-placeholder	{font:11px/34px NanumBarunGothic; color:#AAA; letter-spacing:-0.05em;}
input::-moz-placeholder				{font:11px/34px NanumBarunGothic; color:#AAA; letter-spacing:-0.05em;}
input:-moz-placeholder				{font:11px/34px NanumBarunGothic; color:#AAA; letter-spacing:-0.05em;}
input:-ms-input-placeholder			{font:11px/34px NanumBarunGothic; color:#AAA; letter-spacing:-0.05em;}

input.act	{height:32px; padding:0px 10px 0px 11px; font:12px/34px NanumBarunGothic; color:#333; border-width:1px; border-color:#d57757 #f6a589 #f6a589 #d57757; border-style:solid; background:#fec8c2; letter-spacing:0em; border-radius:2px; vertical-align:middle;}

label.error			{font:12px NanumBarunGothic; color:#d43d39; margin-left:10px; width:200px;}

textarea			{width:100%; min-height:100px; padding:10px 10px 10px 11px; font:12px/25px NanumBarunGothic; letter-spacing:0em; color:#666; border-width:1px; border-color:#b1b2b3 #e4e4e4 #e4e4e4 #b1b2b3; border-style:solid; background:#F4F4F4; border-radius:2px;}

/* Label 없이 사용시 */
input[type="checkbox"]			{z-index:99; width:19px; height:19px; display:inline-block; padding:0; vertical-align:middle; margin-right:0px; border:0px none; cursor:pointer; outline:none;}
input[type="checkbox"]			{background: url('/img/icon/checkBox.png') no-repeat 0 0; background-size:19px auto; display:inline-block; letter-spacing:-1px; line-height:19px;}
input[type="checkbox"]:checked	{background: url('/img/icon/checkBox.png') no-repeat 0 -19px; background-size:19px auto; height:19px;}

input[type="radio"]				{z-index:99; width:19px; height:19px; display: inline-block; padding:0; margin-right:4px; vertical-align:middle; border-style:none !important; cursor:pointer; outline:none;}
input[type="radio"]				{background: url('/img/icon/icon_radio.png') no-repeat 0 0; background-size:19px auto; display:inline-block; letter-spacing:-1px; line-height:19px;}
input[type="radio"]:checked 	{background: url('/img/icon/icon_radio.png') no-repeat 0 -19px; background-size:19px auto; height:19px;}

/* Check Box (BIG) + Label Text */
input[type=checkbox].css-checkbox						{position:absolute; z-index:-1000; left:-1000px; overflow:hidden; clip:rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;}
input[type=checkbox].css-checkbox + label.css-label,
input[type=checkbox].css-checkbox + label.css-label.clr	{padding-left:30px; height:26px; display:inline-block; background-repeat:no-repeat; background-position:0 0; font:14px/25px celmonKr_bold; letter-spacing:-0.07em; vertical-align:middle; cursor:pointer; }
input[type=checkbox].css-checkbox:checked + label.css-label,
input[type=checkbox].css-checkbox + label.css-label.chk	{background-position: 0 -26px; }
label.css-label											{background-image:url(/img/icon/checkBox_big.png); -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}

/* Check Box (MIDDLE) + Label Text */
input[type=checkbox].mid-checkbox						{position:absolute; z-index:-1000; left:-1000px; overflow:hidden; clip:rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;}
input[type=checkbox].mid-checkbox + label.mid-label,
input[type=checkbox].mid-checkbox + label.mid-label.clr	{padding-left:22px; height:20px; display:inline-block; background-repeat:no-repeat; background-position:0 0; font:bold 12px/20px Dotum; letter-spacing:-0.07em; vertical-align:middle; cursor:pointer; }
input[type=checkbox].mid-checkbox:checked + label.mid-label,
input[type=checkbox].mid-checkbox + label.mid-label.chk	{background-position: 0 -20px;}
label.mid-label											{background-image:url(/img/icon/checkBox.png); -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}

/* Radio */
input[type=radio].mid					{width:19px; height:19px; margin:0px; padding:0; opacity:0; cursor:pointer; border:0px none; outline:none;}
input[type=radio].mid + label			{display:inline-block; margin-left:-19px; padding-left:23px; background:url(/img/icon/icon_radio.png) no-repeat 0 0; background-size:19px auto; vertical-align:3px;}
input[type=radio].mid:checked + label	{background-position:0 -19px; background-size:19px auto;}

/* Slide CheckBox */
.slideCKB							{display:none;}
.slideCKB + label					{display:inline-block; width:40px; height:20px; position:relative; -webkit-transition:0.3s; transition:0.3s; margin:0px 10px; box-sizing:border-box;}
.slideCKB + label:after,
.slideCKB + label:before			{content:''; display:block; position:absolute; left:0px; top:0px; width:20px; height:20px; -webkit-transition:0.3s; transition:0.3s; cursor:pointer;}

.slideCKB:checked + label			{background:#FFF;}
.slideCKB:checked + label:after		{background:#6055ae; left:calc(100% - 20px);}
.slideCKB + label					{background:#ddd; border-radius:20px; box-shadow:1px 1px 3px #aaa;}
.slideCKB + label:after				{background:#DDD; border-radius:50%; box-shadow:1px 1px 3px #aaa;}


/******************************************************************************************************************************************
*	BUTTON CSS - 2018.04.19 : FUNNY (Ver.2.0)
*******************************************************************************************************************************************/
/* COMMON BUTTON AREA TYPE CONTROL - 2018.04.24 : FUNNY */
.buttonWrap						{width:100%; margin:10px auto; text-align:center;}
.buttonWrap .btn1 a				{width:100%;}
.buttonWrap .btn2 a				{width:48.5%;}
.buttonWrap .btn2 a:first-child	{margin-right:0px;}
.buttonWrap .btn2 a:last-child	{margin-left:0px;}

/* Board Left top Page State : 2018.07.04 - FUNNY */
.listPageview			{position:relative; width:100%; margin-bottom:5px;}
.listPageview ul		{float:left; display:inline-block;}
.listPageview li		{display:inline-block; float:left; padding:0 10px 0 0; font:11px/34px NanumBarunGothic; letter-spacing:0em; color:#777;}

/* Button Size - 2018.04.24 : FUNNY */
.btnSD					{display:inline-block; padding:0.3em .3em 0em .3em !important; text-align:center; border-radius:1px; -moz-border-radius:1px; -webkit-border-radius:1px; font:11px/17px NanumBarunGothic; letter-spacing:-0.05em; cursor:pointer; text-decoration:none;}
.btnMD					{display:inline-block; padding:.4em .7em .06em .7em !important; text-align:center;  font:11px/18px NanumBarunGothic; letter-spacing:-0.1em; cursor:pointer; text-decoration:none;}
.btnLD					{display:inline-block; padding:0px 15px !important; height:32px; font:14px/32px celmonHG_40; letter-spacing:-0.02em; text-align:center; cursor:pointer; text-decoration:none;} /* 게시판 */
.btnXD					{display:inline-block; padding:.8em 1.4em .55em 1.2em !important; text-align:center; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; font:bold 12px/17px Dotum; letter-spacing:-0.1em; cursor:pointer; text-decoration:none;}
.btnED					{display:inline-block; margin:3px 0; text-align:center; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; font:1em/45px celmonKr_medium; letter-spacing:-0.1em; cursor:pointer; text-decoration:none;} /* 양식제출, 페이지 */

/* Button Color - 2018.04.24 : FUNNY */
.brown 					{background:#8a7056 !important; border:1px solid #724f33; color:#FFFFFF !important;}
.brown:hover 			{background:#78543a !important; border:1px solid #462d1a; color:#FFFFFF !important;}

.scarlet 				{background:#d9534f !important; border:1px solid #d43d39; color:#FFFFFF !important;}
.scarlet:hover			{background:#db2b26 !important; border:1px solid #b71611; color:#FFFFFF !important;}

.lightgrey 				{background:linear-gradient(to bottom,#F5F5F5 50%,#EEEEEE 50%) !important; border:1px solid #d3d3d3; color:#777777 !important;}
.lightgrey:hover		{background:linear-gradient(to bottom,#F1F1F1 50%,#E1E1E1 50%) !important; border:1px solid #AAAAAA; color:#444444 !important; text-decoration:none;}

.yellowgreen			{background:#75b638 !important; border:1px solid #579d21; color:#FFFFFF !important; text-decoration:none;}
.yellowgreen:hover		{background:#5b9f13 !important; border:1px solid #499211; color:#FFFFFF !important; text-decoration:none;}

.vividblue				{background:#0494e4 !important; border:1px solid #056fb2; color:#FFFFFF !important; text-decoration:none;}
.vividblue:hover 		{background:#0175ce !important; border:1px solid #00569f; color:#FFFFFF !important; text-decoration:none;}

.white					{background:linear-gradient(to bottom,#EEE,#FFF,#EEE); color:#666; border:1px solid #c2c2c2;}
.white:hover			{background:linear-gradient(to bottom,#DDD,#FFF,#DDD); color:#444; border:1px solid #A1A1A1;}

.yellow					{background:#fcdc02 !important; border:1px solid #fcc402; color:#000 !important; text-decoration:none;}
.yellow:hover			{background:#fcc402 !important; border:1px solid #e1af01; color:#000 !important; text-decoration:none;}

.darkgrey				{background:linear-gradient(to bottom,#abb9c7 50%,#97a4b0 50%) !important; border: 1px solid #8a96a1; color: #FFFFFF !important;}
.darkgrey:hover			{background:linear-gradient(to bottom,#97a4b0 50%,#838e99 50%) !important; border: 1px solid #76808a; color: #FFFFFF !important;}


.brownline				{background:#FFFFFF !important; border:1px solid #724f33; color:#724f33 !important; text-decoration:none;}
.brownline:hover		{background:#FFFFFF !important; border:1px solid #462d1a; color:#462d1a !important; text-decoration:none;}

.lightgrayline			{background #FFFFFF; color:#AAAAAA; border:1px solid #CCCCCC;}
.lightgrayline:hover	{background #FFFFFF; color:#888888; border:1px solid #AAAAAA;}

.scarletline			{background #FFFFFF; color:#d9534f; border:1px solid #d9534f;}
.scarletline:hover		{background #FFFFFF; color:#bf3935; border:1px solid #bf3935;}

.yellowgreenline		{background:#FFFFFF !important; border:1px solid #75b638; color:#75b638 !important; text-decoration:none;}
.yellowgreenline:hover	{background:#78c302 !important; border:1px solid #61b201; color:#FFFFFF !important; text-decoration:none; transition:all 0.3s}

.blueline				{background:#FFFFFF !important; border:1px solid #0494e4; color:#0494e4 !important; text-decoration:none;}
.blueline:hover			{background:#0494e4 !important; border:1px solid #0175ce; color:#FFFFFF !important; text-decoration:none; transition:all 0.3s}

.yellowline				{background:#FFFFFF !important; border:1px solid #fcdc02; color:#dba500 !important; text-decoration:none;}
.yellowline:hover		{background:#fcdc02 !important; border:1px solid #fcdc02; color:#0187d2 !important; text-decoration:none; transition:all 0.3s}


/* 인풋과 세트가 되는 버튼 */
a.iptBTN, .iptBTN 					{cursor:pointer; display:inline-block; min-width:36px; margin-left:-2px; height:32px; padding:0 7px; font:12px/32px NanumBarunGothic; letter-spacing:-0.07em; text-align:center; vertical-align:middle; border-radius:2px; text-decoration:none;}
a.iptBTN.basic, .iptBTN.basic		{background:linear-gradient(to bottom,#FFF 50%,#EAEAEA 50%); color:#555; border-width:1px; border-color:#b1b2b3 #e4e4e4 #e4e4e4 #e4e4e4; border-style: solid;}
a.iptBTN.darkgray, .iptBTN.darkgray	{background:#848f9a; color:#FFFFFF; border:1px solid #737d86;}
a.iptBTN.white, .iptBTN.white		{background:#FFFFFF; color:#767676; border:1px solid #a5a5a5;}
a.iptBTN.yellowgreen, .iptBTN.yellowgreen	{background:#5b9f13; color:#FFFFFF; border:1px solid #499211;}


/* 중형 액션 버튼 색상 종합 - 2016.07.06 : FUNNY */
a.btn_aniBuy			{margin:.2em; padding:0.6em 1.27em; text-decoration:none; background-color:#78543a; border:1px solid #644631; color:#FFF; letter-spacing:-0.08em; font:16px celmonKr_medium, Dotum; -webkit-tap-highlight-color: rgba(0,0,0,0); cursor:pointer;}
a.btn_aniCart			{margin:.2em; padding:0.6em 1.27em; text-decoration:none; background-color:#333333; border:1px solid #000; color:#FFF; letter-spacing:-0.08em; font:16px celmonKr_medium, Dotum; -webkit-tap-highlight-color: rgba(0,0,0,0); cursor:pointer;}
a.btn_aniFavor			{margin:.2em; padding:0.6em 1.27em; text-decoration:none; background-color:#797979; border:1px solid #6a6a6a; color:#FFF; letter-spacing:-0.08em; font:16px celmonKr_medium, Dotum; -webkit-tap-highlight-color: rgba(0,0,0,0); cursor:pointer;}

a.btn_aniBuyafter		{width:125px; margin: .0em; padding: 0.5em 0.9em; text-decoration:none; background-color:#f8f8f8; border:1px solid #d7d7d7; color:#3c3c3c; letter-spacing:-0.08em; font:13px celmonKr_bold, Dotum; -webkit-tap-highlight-color: rgba(0,0,0,0); cursor:pointer;}
a.btn_aniBuyquest		{width:125px; margin: .0em; padding: 0.5em 0.9em; text-decoration:none; background-color:#f8f8f8; border:1px solid #d7d7d7; color:#3c3c3c; letter-spacing:-0.08em; font:13px celmonKr_bold, Dotum; -webkit-tap-highlight-color: rgba(0,0,0,0); cursor:pointer;}


/******************************************************************************************************************************************
	Animation Button CSS (공통사항버튼 스타일 설정) - 2016.07.06 : 임채환
*******************************************************************************************************************************************/
.hvr-float-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
 /* transform: translateZ(0); */
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-float-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  /* W3C */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  /* move the element up by 5px */
}
.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}

/*	2D Transitions	***********************************************************************************************************************/
/* Buzz Out */
@-webkit-keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

@keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

.hvr-buzz-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
/* transform:  perspective(1px) translateZ(0); */
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.hvr-buzz-out:hover, .hvr-buzz-out:focus, .hvr-buzz-out:active {
  -webkit-animation-name: hvr-buzz-out;
  animation-name: hvr-buzz-out;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}