@charset "utf-8";

input::placeholder { color: #858585; }

.wd100{width: 100px;}
.wd200{width: 200px;}

.wd20per{width: 20%;}
.wd50per{width: 50%;}


.hua {
  display: inline-block; position: relative;
}
.hua::after{content: ''; position: absolute;  width: 100%;  transform: scaleX(0);  height: 2px;  bottom: 0;  left: 0;  background-color: #d9ecec;  transform-origin: bottom right;  transition: transform 0.25s ease-out;}
.hua:hover::after {transform: scaleX(1);transform-origin: bottom left;}

.hua_b {
  display: inline-block; position: relative;
}
.hua_b::after{content: ''; position: absolute;  width: 100%;  transform: scaleX(0);  height: 2px;  bottom: 0;  left: 0;  background-color: #858585;  transform-origin: bottom right;  transition: transform 0.25s ease-out;}
.hua_b:hover::after {transform: scaleX(1);transform-origin: bottom left;}


/* 넓이 */
.W10{width: 10% !important;} .W20{width: 20% !important;} .W30{width: 30% !important;} .W40{width: 40% !important;} 
.W48{width: 48% !important;} .W49{width: 49% !important;}
.W50{width: 50% !important;}
.W60{width: 60% !important;} .W70{width: 70% !important;} .W80{width: 80% !important;} .W90{width: 90% !important;} .W100{width: 100% !important;}
.W97{width: 97% !important;} .W98{width: 98% !important;} .W99{width: 99% !important;}
.wd100{width: 100px !important;}
.wd110{width: 110px !important;}
.wd150{width: 150px !important;}
.wd200{width: 200px !important;}
.wd300{width: 300px !important;}
.wd800{width: 800px !important;}

.w80{width: 80px !important;}
.w200{width: 200px !important;}


/* 높이 */
.ht50{height: 50px;}
.ht100{height: 100px;}


/*백그라운드 컬러*/
.bgc1{background: #f6f6f6 !important;}


/* 폰트사이즈 */
.fs_a {font-size: 1.5em;}
.fs_b {font-size: 1.2em;}
.fs_c {font-size: 2em;}
.fsem1{font-size: 1em !important;}
.fsem15{font-size: 1.5em !important;}
.fsem2{font-size: 2em !important;}
.fsem25{font-size: 2.5em !important;}
.fsem3{font-size: 3em !important;}
.fsem4{font-size: 4em !important;}
.fsem5{font-size: 5em !important;}



/* 정렬 */
.tal{text-align: left !important;}
.tac{text-align: center !important;}
.tar{text-align: right !important;}

.floatl{float: left;}
.floatr{float: right;}

.vas { vertical-align: sub !important;}
.vam { vertical-align: middle !important;}


/* 마진 */
.mgt05{margin-top: 5px !important;}
.mgt10{margin-top: 10px !important;}
.mgt15{margin-top: 15px !important;}
.mgt20{margin-top: 20px !important;}
.mgt30{margin-top: 30px !important;}
.mgt40{margin-top: 40px !important;}
.mgt50{margin-top: 50px !important;}
.mgt100{margin-top: 100px !important;}
.mgt150{margin-top: 150px !important;}
.mgt200{margin-top: 200px !important;}
.mgt300{margin-top: 300px !important;}
.mgt1{margin-top: 10px !important;}
.mgt2{margin-top: 20px !important;}
.mgt3{margin-top: 30px !important;}
.mgt4{margin-top: 40px !important;}
.mgt5{margin-top: 50px !important;}

.mgb05{margin-bottom: 5px !important;}
.mgb10{margin-bottom: 10px !important;}
.mgb20{margin-bottom: 20px !important;}
.mgb30{margin-bottom: 30px !important;}
.mgb40{margin-bottom: 40px !important;}
.mgb50{margin-bottom: 50px !important;}
.mgb1{margin-bottom: 10px !important;}
.mgb2{margin-bottom: 20px !important;}
.mgb3{margin-bottom: 30px !important;}
.mgb4{margin-bottom: 40px !important;}
.mgb5{margin-bottom: 50px !important;}

.mgr05{margin-right: 5px !important;}
.mgr10{margin-right: 10px !important;}
.mgr20{margin-right: 20px !important;}
.mgr30{margin-right: 30px !important;}
.mgr1{margin-right: 10px !important;}
.mgr2{margin-right: 20px !important;}
.mgr3{margin-right: 30px !important;}


/*패딩*/
.pd20 {padding: 20px !important;}
.pdl20 {padding-left: 20px !important;}
.pdl30 {padding-left: 30px !important;}
.pdl50 {padding-left: 50px !important;}


/* 폰트컬러 */
.fc1{color: #23A41A;} .fc2{color: #A566FF;} .fc3{color: #ce691e;}
.fc4{color: #e1701f;} .fc5{color: #4374D9;} .fc6{color: #FF5A5A;}
.fc7{color: #586381;} .fc8{color: #ff8cff;} .fc9{color: #820041;}
.fc10{color: rgb(0, 0, 0);} .fc11{color: rgb(100, 100, 100);}
.fc12{color: #00a4f2;}

.fcB1{color: #23A41A; font-weight: bold;} .fcB2{color: #A566FF; font-weight: bold;} .fcB3{color: #ce691e; font-weight: bold;}
.fcB4{color: #e1701f; font-weight: bold;} .fcB5{color: #4374D9; font-weight: bold;} .fcB6{color: #FF5A5A; font-weight: bold;}
.fcB7{color: #586381; font-weight: bold;} .fcB8{color: #ff8cff; font-weight: bold;} .fcB9{color: #820041; font-weight: bold;}
.fcB10{color: #000 !important; font-weight: bold !important;}

/**/
.cp{cursor: pointer;}
.dvsn{margin-left: 5px; margin-right: 5px;}


/*레이어 팝업*/
.layerDiv{display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 100;}
.fade {background: rgb(30, 30, 30); position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 70%; z-index: 0;}
.layerDiv .pop_header {height: 35px; background: #ee9b00; color: #fff; padding: 10px 10px 0 10px;}
.layerDiv .pop_header .tit{padding-top: 4px;}
.layerDiv .pop_header a {text-decoration: none; color: #fff; font-size: 1.3em;}
.layerDiv .pop_header .fL {float: left !important;}
.layerDiv .pop_header .fR {float: right !important;}
.layerDiv .pop_header .closeBtn{font-size: 2em; position: absolute; right: 0; top: 5px;}


/* 로그인 */
.popup_login {background: #fff; padding: 0; width: 310px; height: auto; top: 20%;
			margin: 0 auto; font-size: 1.2em; position: relative; z-index: 1; 
			border: 1px solid rgb(128, 128, 128);
			box-shadow: 0px 0px 5px #000;
}/* border: 1px solid #ddd; border-radius: 5px; box-shadow: 0px 0px 5px #000; */

.loginBox {clear: both; margin:0; padding: 30px 40px; font-size: 0.97em;}
.loginBox label { margin-left:20px; line-height:32px; font-size: 1em; color: #646464;}
.loginBox input { margin-top: 5px; padding:10px 5px; border:1px solid #e6e6e6; width: 110px;}
.loginBox input:focus { outline:1px solid #ee9b00;}
.loginBox .auto {text-align: left; clear: both;}
.loginBox .auto label{margin-left: 0 !important;}
.loginBox .auto input[type=checkbox] {width: 20px; height: 20px; vertical-align: sub;}
.loginBox .tit {float: left; width: 90px; line-height:32px;}
.loginBox .val {float: left; width: 130px;}
.loginBox .btn {float: left;}
.loginBox .btn button{font-size: 1.1em; font-weight: bold; height: 80px; margin-left: 5px; margin-top: 5px;}
.loginBox .mem {clear: both; text-align: right; padding: 5px 0 0; color: #646464;}

/* 계정찾기 */
.popup_find {background: #fff; padding: 0; width: 340px; height: auto; top: 20%;
			margin: 0 auto; font-size: 1.2em; position: relative; z-index: 1; 
			border: 1px solid rgb(128, 128, 128);
			box-shadow: 0px 0px 5px #000;
}/* border: 1px solid #ddd; border-radius: 5px; box-shadow: 0px 0px 5px #000; */
.findBox {clear: both; margin:0; padding: 30px 40px;}
.findBox .tid {font-size: 1em; }
.findBox input { margin-top: 5px; padding:4px; border:1px solid #e6e6e6; width: 150px; height: 20px;}
.findBox input:focus { outline:1px solid #ee9b00;}
.findBox p button {vertical-align: middle; }


.popup_noti {background: #fff; padding: 0; width: 600px; height: auto; top: 0;
			margin: 0 auto; font-size: 1em; position: relative; z-index: 1; 
			border: 1px solid rgb(128, 128, 128);
			box-shadow: 0px 0px 5px #000;
}
.popup_noti .tit { overflow: hidden; text-overflow: ellipsis; word-break: keep-all; width: 94%;}
.popup_noti .attcFile a{ text-decoration: none; color: #006a9d; }
.notiBox {clear: both; margin:0; padding: 30px 40px; height: 600px; overflow-x: hidden; overflow-y: auto; }
.notiBox img{max-width: 100%; height: auto !important;}
.notiBox p button {vertical-align: middle; }
.popup_noti .footBtnArea { padding: 20px; text-align: right;}
.popup_noti .footBtnArea a{ text-decoration: none; color: #006a9d; }


.menuBar {display: none; position: absolute; width: 0px; min-height: 100%; top: 0; right: 0; padding: 20px 0 20px 0; z-index: 100; background: #fff;}
.closex { cursor: pointer;}

#rightMenu { float:left;}
#rightMenu,
#rightMenu ul,
#rightMenu ul li,
#rightMenu ul li a {
  margin:0;
  padding:0;
  border:0;
  line-height:18px;
  display:block;
  position:relative;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
#rightMenu { width:90%; color:#fff; margin-top: 20px;}
#rightMenu ul ul { display:none; }
#rightMenu > ul > li.active > ul { display:block; }
#rightMenu > ul > li > a {
  padding:14px 20px;
  cursor:pointer;
  z-index:3;
  font-size:16px;
  text-decoration:none;
  color:#fff;
  background:#009b00;
  -webkit-transition:color .2s ease;
  -o-transition:color .2s ease;
  transition:color .2s ease;
}
#rightMenu > ul > li > a:hover {
  color:#f7f7ff;
}
#rightMenu ul > li.sub > a:after {
  position:absolute;
  right:26px;
  top:19px;
  z-index:5;
  display:block;
  height:10px;
  width:2px;
  background:#fff;
  content:"";
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#rightMenu ul > li.sub > a:before {
  position:absolute;
  right:22px;
  top:23px;
  display:block;
  width:10px;
  height:2px;
  background:#fff;
  content:"";
  -webkit-transition:all 0.1s ease-out;
  -moz-transition:all 0.1s ease-out;
  -ms-transition:all 0.1s ease-out;
  -o-transition:all 0.1s ease-out;
  transition:all 0.1s ease-out;
}
#rightMenu ul > li.sub.open > a:after,
#rightMenu ul > li.sub.open > a:before {
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
}
#rightMenu ul ul li a {
  padding:12px 25px;
  cursor:pointer;
  z-index:2;
  font-size:14px;
  text-decoration:none;
  color:#fff;
  background:#006f00;
  -webkit-transition:color .2s ease;
  -o-transition:color .2s ease;
  transition:color .2s ease;
}
#rightMenu ul ul li a:hover { color:#fff; }
#rightMenu ul ul > li.sub > a:after { top:16px; right:26px; background:#ddd; }
#rightMenu ul ul > li.sub > a:before { top:20px; background:#ddd; }
#rightMenu .open > a{ color: #f7f7ff; text-decoration: underline;}
/* #d0fe85 */
/* #ffff80 */
/* #7df9b1 */
#rightMenu ul ul ul li a { padding-left:50px; background:#697483;}
#rightMenu ul ul ul ul li a { padding-left:70px; background:#88929f;}
#rightMenu ul ul ul ul ul li a { padding-left:90px; background:#99a2ac;}

/*우측메뉴*/
.rightBtnArea{ width: 90%; z-index: 2; }
.rightBtnArea .rightBtn{list-style: none; padding: 0; margin: 20px 0;}
.rightBtnArea .rightBtn li{padding: 10px 10px 10px 30px; font-size: 1.3em; cursor: pointer; border-bottom: 1px solid #dce0e9; }/*background: #f7f7ff;*/
.rightBtnArea .rightBtn li:hover{font-weight: bold;}
.rightBtnArea .rightBtn li a{color: #3d6154; text-decoration: none;}



/* 사이트맵 */
.siteMap:after { clear:both; display:block; content:"";}

.siteMenu,
.siteMenu ul,
.siteMenu ul li,
.siteMenu ul li a { padding:0;  list-style:none;  line-height:1em;  display:block;  position:relative;  -webkit-box-sizing:border-box;  -moz-box-sizing:border-box;  box-sizing:border-box;}
.siteMenu { float:left; margin-left:50px; }
.siteMenu:first-child { margin-left:0; }
/* .siteMenu > ul > li { border-bottom:1px solid #c3c3c3; } */
/* .siteMenu h3 { padding:10px 0 10px 20px; background:url('../../images/common/icon_tit.gif') no-repeat 0 center; color:#525da0; border-bottom:2px solid #525da0; font-size:16px; font-weight:bold; } */
.siteMenu h3 { padding:0; font-size:1.7em;}
.siteMenu ul ul { display:none; }
.siteMenu > ul > li.active > ul { display:block; }
.siteMenu > ul > li > a { padding:5px 35px 5px 0;  cursor:pointer;  z-index:2;  font-size:1.4em;  text-decoration:none;  color:#555;  -webkit-transition:color .2s ease;  -o-transition:color .2s ease;  transition:color .2s ease;}
.siteMenu ul > li.sub > a:after { position:absolute;  right:18px;  top:18px;  z-index:5;  display:block;  height:10px;  width:2px;  background:#b3b3b3;  content:"";
  -webkit-transition: all 0.1s ease-out;  -moz-transition: all 0.1s ease-out;  -ms-transition: all 0.1s ease-out;  -o-transition: all 0.1s ease-out;  transition: all 0.1s ease-out;}
.siteMenu ul > li.sub > a:before { position:absolute;  right:14px;  top:22px;  display:block;  width:10px;  height:2px;  background:#b3b3b3;  content:"";
  -webkit-transition:all 0.1s ease-out;  -moz-transition:all 0.1s ease-out;  -ms-transition:all 0.1s ease-out;  -o-transition:all 0.1s ease-out;  transition:all 0.1s ease-out;}
.siteMenu ul > li.sub.open > a:after,
.siteMenu ul > li.sub.open > a:before { -webkit-transform:rotate(45deg);  -moz-transform:rotate(45deg);  -ms-transform:rotate(45deg);  -o-transform:rotate(45deg);  transform:rotate(45deg);}
.siteMenu ul ul li a { padding:10px 10px 10px 30px;  cursor:pointer;  z-index:2;  font-size:1.2em;  text-decoration:none;
  color:#555;  -webkit-transition:color .2s ease;  -o-transition:color .2s ease;  transition:color .2s ease;}
.siteMenu ul ul > li.sub > a:after { top:16px; right:18px; background:#b3b3b3; }
.siteMenu ul ul > li.sub > a:before { top:20px; background:#b3b3b3; }
.siteMenu .open > a{ color:#555; font-weight:bold;}

.siteMenu ul ul ul li a { padding-left:50px; color:#fff; background:#697483;}
.siteMenu ul ul ul ul li a { padding-left:70px; color:#fff; background:#88929f;}