@charset "utf-8";


/* =======================================================
	text
========================================================*/

/* color */
.fm--font-main {color: #29c663 !important; }

.fm--text-guide {color: #8f8f8f; font-size: 12px; }
.fm--text-caution {color: #cd1e1e !important; }
.fm--text-success {color: #ff9931 !important; }


/* text-ellipsis */
.text-ellipsis01 {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-ellipsis02 {display: block; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.5; height: 3em; }
.text-ellipsis03 {display: block; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.5; height: 4.5em; }


/* align */
.text-left {text-align: left; }
.text-right {text-align: right; }
.text-center {text-align: center; }

.vertical-top {vertical-align: top; }
.vertical-middle {vertical-align: middle; }
.vertical-bottom {vertical-align: bottom; }



/* =======================================================
	block
========================================================*/
/* visible */
.hidden {display: none; }
.show {display: block; }


/* panel */
.panel {background-color: #fff; box-sizing: border-box; }
.panel:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.panel.border {border: 1px solid #e6e4e4; border-radius: 5px;}
.panel.gray {background-color: #f5f5f5; }


/* tag */
.fm--tag {display: inline-block; padding: 4px 8px; border: 1px solid #8f8f8f; border-radius: 999px; box-sizing: border-box; background-color: #fff;  font-size: 12px; font-weight: 400; text-align: center; line-height: 1.25; letter-spacing: 0.28; color: #8f8f8f; white-space: nowrap;  vertical-align: baseline; }
.fm--tag-gray {border: 1px solid #8f8f8f; color: #8f8f8f; box-sizing: border-box; background-color: #fff; }
.fm--tag-main {border: 1px solid #ff9931; color: #ff9931; box-sizing: border-box; background-color: #fff; }




/* =======================================================
	list
========================================================*/
ul, ol, li, dl, dt, dd {list-style: none;}


/* list-style
-----------------------------------------------------*/
.list-number {counter-reset: basicNum; }
.list-number > li {counter-increment: basicNum; }
.list-number > li:before {content: counter(basicNum) ". "; }

.list-number {counter-reset: period; }
.list-number > li {counter-increment: period; }
.list-number > li:before {content: counter(period)"."; margin-right: 5px; }

.list-number.circle > li:before {content: counter(period); display: inline-block; width: 14px; height: 14px; margin: 0 4px 3px 0; border: 1px solid #777; border-radius: 100%; box-sizing: border-box; background-color: transparent; text-align: center; color: #777; font-size: 9px; line-height: 11px; vertical-align: middle; }


.list-dash {}
.list-dash li:before {content: '-'; display: inline-block; margin-right: 4px; }

.list-depth {padding-left: 16px; }





/* =======================================================
	table
========================================================*/
table {width: 100%; padding: 0; margin: 0; border-collapse: collapse; border-spacing: 0; table-layout: fixed; word-break: break-all; background-image: none; } 





/* =======================================================
	button
========================================================*/
a,
button {background-color: transparent; border: none; cursor: pointer; outline: none; text-decoration: none; color: inherit;} 

.fm--btn {display: inline-block; height: 45px; padding: 0 16px; border-radius: 5px; border: 1px solid #cbcbcb; background-color: #fff; box-sizing: border-box; font-size: 14px; font-weight: 400; line-height: 43px; letter-spacing: 0.28px; text-align: center; color: #6f6f6f; white-space: nowrap; vertical-align: middle; }
.fm--btn:hover {background-color: #f2f2f2; color: #4f4f4f; }


/* btn size */
.fm--btn-full {width: 100%; display: block; }


.fm--btn-main {border: 1px solid #1a1a1a; background-color: #1a1a1a; color: #fff; }
.fm--btn-main:hover {border-color: #1a1a1a; background-color: #1a1a1a; color: #fff; }

.fm--btn-main-line {border: 1px solid #1a1a1a; color: #1a1a1a; }
.fm--btn-main-line:hover {border-color: #b3883a; background-color: #fff; color: #b3883a;}

.fm--btn-black {border: 1px solid #222; background-color: #222; color: #eee;}
.fm--btn-black:hover {background-color: #000; color: #eee;}


.fm--btn-preview {display: inline-block; height: 30px; padding: 0 8px; font-size: 12px; line-height: 28px; text-align: center; color: #8f8f8f; }


.fm--btn-group {}
.fm--btn-group:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }


.btn-sns {width: 30px; height: 30px; display: inline-block; border-radius: 9999px; padding: 0; background-repeat: no-repeat; background-position: center; background-size: 100%; border: none; }
.btn-sns.link {background-image: url("/AppData/images/site/sns/copy.png");}
.btn-sns.blog {background-image: url("/AppData/images/site/sns/blog.png");}
.btn-sns.facebook {background-image: url("/AppData/images/site/sns/facebook.png");}
.btn-sns.twitter {background-image: url("/AppData/images/site/sns/twitter.png");}

/* =======================================================
	form
========================================================*/
.fm--prebox {width: 100%; display: block; padding: 0; margin: 0; border: none; box-sizing: border-box; border-radius: 0; background-color: transparent; font-family: 'NotoSansKR', Apple SD Gothic Neo, 돋움, dotum, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0.28px; text-align: left; color: #4f4f4f; word-break: normal; word-wrap: break-word; white-space: pre-line; -ms-appearance: none; -webkit-appearance: none; appearance: none; -ms-overflow-style: none; }
.fm--prebox::-webkit-scrollbar,
.fm--prebox::-ms-scrollbar {appearance: none; }



/* input 초기화
---------------------------------------------------*/
input::-ms-clear,
input::-ms-reveal {display: none; width : 0; height: 0;}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration {display: none; }



/* input autofill reset
---------------------------------------------------*/
input:-internal-autofill-previewed,
input:-internal-autofill-selected,
textarea:-internal-autofill-previewed,
textarea:-internal-autofill-selected,
select:-internal-autofill-previewed,
select:-internal-autofill-selected {background-color: #fff !important; color: #444 !important; }

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  -webkit-text-fill-color: #444 !important;
}
input:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  -webkit-text-fill-color: #444 !important;
}
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  -webkit-text-fill-color: #444 !important;
}
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  -webkit-text-fill-color: #444 !important;
}



/* input
-----------------------------------------------*/
.fm--input-text {display: block; width: 100%; height: 45px; margin: 0; padding: 0 8px; background-color: #fff; border: 1px solid #cbcbcb; border-radius: 5px; box-sizing: border-box; font-size: 14px; font-weight: 400; line-height: 1.5; color: #4f4f4f; vertical-align: middle; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; }
.fm--input-text:focus {border-color: #1a1a1a; background-color: #fff; }

.input-caution {border-color: #ff9931; }


/* readonly & disabled */
.fm--input-text:read-only {background-color: #e6e4e4; color: #8f8f8f; }
.fm--input-text.readonly {background-color: #e6e4e4; color: #8f8f8f; }
.fm--input-text:disabled {background-color: #e6e4e4; color: #8f8f8f; }
.fm--input-text.disabled {background-color: #e6e4e4; color: #8f8f8f; }


.fm--input-text:read-only:focus {background-color: #e6e4e4; border-color: #cbcbcb; color: #8f8f8f; }
.fm--input-text.readonly:focus {background-color: #e6e4e4; border-color: #cbcbcb; color: #8f8f8f; }
.fm--input-text:disabled:focus {background-color: #e6e4e4; border-color: #cbcbcb; color: #8f8f8f; }
.fm--input-text.disabled:focus {background-color: #e6e4e4; border-color: #cbcbcb; color: #8f8f8f; }


.fm--input-text:-webkit-input-placeholder  {color: #8f8f8f !important; font-weight: 400 !important; }
.fm--input-text:-moz-placeholder  {color: #8f8f8f !important; font-weight: 400 !important; }
.fm--input-text:-ms-input-placeholder  {color: #8f8f8f !important; font-weight: 400 !important; }
.fm--input-text::-ms-input-placeholder  {color: #8f8f8f !important; font-weight: 400 !important; }
.fm--input-text::-moz-placeholder  {color: #8f8f8f !important; font-weight: 400 !important; }
.fm--input-text::placeholder  {color: #8f8f8f !important; font-weight: 400 !important; }
.fm--input-text:placeholder  {color: #8f8f8f !important; font-weight: 400 !important; }



/* iradio & icheck
-----------------------------------------------*/
.icheck,
.iradio {background-image: url('/AppData/images/site/common/icheck.png'); }

@media (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi), (min-resolution: 1.25dppx) {
    .icheck,
    .iradio{
        background-image: url('/AppData/images/site/common/icheck@2x.png');
        -webkit-background-size: 200px 20px;
        background-size: 200px 20px;
    }
}


/* select
-----------------------------------------------*/
select,
.fm--selectbox {display: block; width: 100%; height: 45px; margin: 0; padding: 0 24px 0 8px; background-color: #fff; background-image: url("/AppData/images/site/common/select.png"); background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #cbcbcb; border-radius: 5px; box-sizing: border-box; font-size: 14px; font-weight: 400; line-height: 1.5; color: #4f4f4f; vertical-align: middle; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; }
select::-ms-expand {display: none; }
select:focus {outline: none; }




/* textarea
-----------------------------------------------*/
.fm--textarea {position: relative; display: block; width: 100%; height: 200px; padding: 8px 8px; border: 1px solid #cbcbcb; border-radius: 5px; box-sizing: border-box; font-size: 14px; font-weight: 400; line-height: 1.5; color: #4f4f4f; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; resize: none; }
.fm--textarea:focus {outline: 0 transparent !important; border-color: #1a1a1a;  }




/* =======================================================
  datepicker
========================================================*/
.fm--datepicker {display: none; }

.fm--input-datepicker {display: inline-block; padding: 0 34px 0 8px; background-image: url("/AppData/images/site/common/datepicker.png"); background-repeat: no-repeat; background-size: 16px 16px; background-position: center right 10px; }
.fm--input-datepicker:read-only {background-color: #fff; color: #4f4f4f; cursor: pointer; }
.fm--input-datepicker:read-only:focus {border-color: #1a1a1a; background-color: #fbf9fe; color: #4f4f4f; cursor: pointer; }

.fm--datepicker select {display: inline-block; }


/* datepicker */
.ui-widget.ui-widget-content {width: 223px; margin-top: 8px; padding: 0 6px 4px; border-color: #1a1a1a; font-size: 13px; box-shadow: 2px 3px 6px #eee; }
.ui-datepicker .ui-datepicker-header {padding: 8px 0; background-color: #fff; border: 0; }
.ui-datepicker .ui-datepicker-title select {display: inline-block; height: 32px; margin: 1px 2px; }
.ui-datepicker table {margin: 0; }
.ui-datepicker td {padding: 0; }


.ui-state-default, 
.ui-widget-content .ui-state-default {background-color: #fff; }

.ui-state-default, 
.ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default {padding: 9.5px 0; border: 0; color: #4f4f4f; text-align: center; }

.ui-state-highlight, 
.ui-widget-content .ui-state-highlight {background-color: rgba(108, 48, 224, 0.1); }

.ui-state-default:hover {background-color: rgba(108, 48, 224, 0.1); }
.ui-state-default.ui-state-highlight:hover {background-color: rgba(108, 48, 224, 0.2); }

.ui-state-active, 
.ui-widget-content .ui-state-active {color: #1a1a1a; font-weight: bolder; }
.ui-widget-header .ui-state-hover {border: 0; background-color: #fff; }

.ui-datepicker .ui-datepicker-prev span, 
.ui-datepicker .ui-datepicker-next span {background-image: none; }

.ui-datepicker .ui-datepicker-prev, 
.ui-datepicker .ui-datepicker-next {top: 8px; width: 32px; height: 32px; }

.ui-datepicker .ui-datepicker-prev {background-image: url("/AppData/images/site/common/datepicker_prev.png"); background-repeat: no-repeat; background-size: 4px 8px; background-position: center center; }
.ui-datepicker .ui-datepicker-next {background-image: url("/AppData/images/site/common/datepicker_next.png"); background-repeat: no-repeat; background-size: 4px 8px; background-position: center center; }


.ui-widget-content::before, 
.ui-widget-content::after {content: ""; display: block; position: absolute; top: -5px; left: 10px; width: 0; height: 0; border: 5px solid transparent; border-top: 0; }
.ui-widget-content::before {border-bottom-color: #1a1a1a; }
.ui-widget-content::after {border-bottom-color: #fff; top: -4px; }

/* timepicker*/
.fm-input-timepicker {display: inline-block; width: 100px; }




/* =======================================================
  progress-wrapper
========================================================*/
.progress-wrapper {display: block; position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 100%; background-color: rgba(0,0,0,0.1);}
.progress-inner {position: absolute; top: 50%; left: 50%; z-index: 9998; transform: translate(-50%, -50%);}
.progress-wrapper span {display: inline-block; width: 10px; height: 10px; margin-right: 7px; animation: popWave 1.4s linear infinite; }
.progress-wrapper .progress-dot01 {background-color: #173a84; opacity: 0.5; }
.progress-wrapper .progress-dot02 {background-color: #173a84; opacity: 0.7; animation-delay: -1.2s; }
.progress-wrapper .progress-dot03 {background-color: #173a84; opacity: 0.9; animation-delay: -1.0s; }





/* =======================================================
  fm--pagination
========================================================*/



/* =======================================================
  animation
========================================================*/

@keyframes popWave {
  0%, 60%, 100% {
    transform: initial;
  }

  30% {
    transform: translateY(-15px);
  }
}