/* BASIC css start */
.logotop { width:800px; margin:0 auto; text-align:center; }
.logotop img { max-width:800px; max-height:112px; }


#header {position:relative; z-index:9999}
#header .inner {  *zoom:1; width 90%; margin:0 auto; }
#header .inner:after { content:""; display:block; clear:both; }
#header .topArea { height:112px; padding:83px 0 0; text-align:center; *zoom:1; }
#header .topArea:after { content:""; display:block; clear:both; }
#header .special { float:left; border-left:1px solid #d8d8d8; }
#header .special li { float:left; }
#header .special a { display:block; height:20px; padding:16px 15px 9px; border-right:1px solid #d8d8d8; color:#353535; text-decoration:none; }
#header .special a:hover { color:#008bcc; padding-bottom:7px; border-bottom:2px solid #008bcc; }
#header .link { position:absolute; left:0; top:0; height:35px; line-height:35px; }
#header .link > a,
#header .link > span { float:left; }
#header .link > a { margin:0 9px 0 0; padding:0 10px 0 0; color:#666; text-decoration:none; }
#header .link > span img { vertical-align:middle; }

#header .joinpoint {
    font-family:"nanumgothic";
    color: #4d4d4d;
    font-size: 10px;
    background: url("http://ecudemo58866.cafe24.com/web/upload/img/joinpoint.png") 50% 0 no-repeat;
    background-size: 48px 28px;
    display: inline-block;
    width: 46px;
    height: 28px;
    position: absolute;
    top: 15px;
    line-height: 22px;
    padding-left: 10px;
    padding-top: 6px;
    letter-spacing: 0.1em;
    z-index: 999;
    margin-left: -50px;
    -webkit-animation: yeonkeyframe 1s infinite alternate;
    -moz-animation: yeonkeyframe 1s infinite alternate;
    -o-animation: yeonkeyframe 1s infinite alternate;
    animation: yeonkeyframe 1s infinite alternate;
}







/*로고 움직임*/

  .logobox {
  -webkit-transition:all .3s ease-out;
  -moz-transition:all .3s ease-out;
  -ms-transition:all .3s ease-out;
  -o-transition:all .3s ease-out;
  transition:all .3s ease-out;
  }
  .logobox.slideright:hover {
  -webkit-transform:translate(0px,-10px);
  -moz-transform:translate(0px,-10px);
  -ms-transform:translate(0px,-10px);
  -o-transform:translate(0px,-10px);
  transform:translate(0px,-10px);
  }



.btn_gototop {
  background: #ffffff;
  background-image: -webkit-linear-gradient(top, #ffffff, #ebebeb);
  background-image: -moz-linear-gradient(top, #ffffff, #ebebeb);
  background-image: -ms-linear-gradient(top, #ffffff, #ebebeb);
  background-image: -o-linear-gradient(top, #ffffff, #ebebeb);
  background-image: linear-gradient(to bottom, #ffffff, #ebebeb);
  -webkit-border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  border-radius: 7px 7px 7px 7px:
  -webkit-box-shadow: 0px 1px 4px #666666;
  -moz-box-shadow: 0px 1px 4px #666666;
  box-shadow: 0px 1px 4px #666666;
  color: #949494;
  font-size: 11px;
  text-align:center;
  padding: 5px 20px 5px 20px;
  text-decoration: none;
  -webkit-transition:all .3s ease-out;
  -moz-transition:all .3s ease-out;
  -ms-transition:all .3s ease-out;
  -o-transition:all .3s ease-out;
  transition: all 0.2s ease-in-out;
  margin-right:5px;
}

.btn_gototop:hover {
  background: #d1d1d1;
  background-image: -webkit-linear-gradient(top, #d1d1d1, #ffffff);
  background-image: -moz-linear-gradient(top, #d1d1d1, #ffffff);
  background-image: -ms-linear-gradient(top, #d1d1d1, #ffffff);
  background-image: -o-linear-gradient(top, #d1d1d1, #ffffff);
  background-image: linear-gradient(to bottom, #d1d1d1, #ffffff);
  text-decoration: none;
}



.btn_prev {
  background: #ffffff;
  background-image: -webkit-linear-gradient(top, #ffffff, #ebebeb);
  background-image: -moz-linear-gradient(top, #ffffff, #ebebeb);
  background-image: -ms-linear-gradient(top, #ffffff, #ebebeb);
  background-image: -o-linear-gradient(top, #ffffff, #ebebeb);
  background-image: linear-gradient(to bottom, #ffffff, #ebebeb);
  -webkit-border-radius: 7px 7px 0px 0px;
  -moz-border-radius: 7px 7px 0px 0px;
  border-radius: 7px 7px 0px 0pxx:
  -webkit-box-shadow: 0px 1px 4px #666666;
  -moz-box-shadow: 0px 1px 4px #666666;
  box-shadow: 0px 1px 4px #666666;
  color: #949494;
  font-size: 11px;
  text-align:center;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  -webkit-transition:all .3s ease-out;
  -moz-transition:all .3s ease-out;
  -ms-transition:all .3s ease-out;
  -o-transition:all .3s ease-out;
  transition: all 0.2s ease-in-out;
}

.btn_prev:hover {
  background: #d1d1d1;
  background-image: -webkit-linear-gradient(top, #d1d1d1, #ffffff);
  background-image: -moz-linear-gradient(top, #d1d1d1, #ffffff);
  background-image: -ms-linear-gradient(top, #d1d1d1, #ffffff);
  background-image: -o-linear-gradient(top, #d1d1d1, #ffffff);
  background-image: linear-gradient(to bottom, #d1d1d1, #ffffff);
  text-decoration: none;
}

.btn_next {
  background: #ffffff;
  background-image: -webkit-linear-gradient(top, #ffffff, #ebebeb);
  background-image: -moz-linear-gradient(top, #ffffff, #ebebeb);
  background-image: -ms-linear-gradient(top, #ffffff, #ebebeb);
  background-image: -o-linear-gradient(top, #ffffff, #ebebeb);
  background-image: linear-gradient(to bottom, #ffffff, #ebebeb);
  -webkit-border-radius: 0px 0px 7px 7px;
  -moz-border-radius: 0px 0px 7px 7px;
  border-radius: 0px 0px 7px 7px:
  -webkit-box-shadow: 0px 1px 4px #666666;
  -moz-box-shadow: 0px 1px 4px #666666;
  box-shadow: 0px 1px 4px #666666;
  color: #949494;
  font-size: 11px;
  text-align:center;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  -webkit-transition:all .3s ease-out;
  -moz-transition:all .3s ease-out;
  -ms-transition:all .3s ease-out;
  -o-transition:all .3s ease-out;
  transition: all 0.2s ease-in-out;
}

.btn_next:hover {
  background: #d1d1d1;
  background-image: -webkit-linear-gradient(top, #d1d1d1, #ffffff);
  background-image: -moz-linear-gradient(top, #d1d1d1, #ffffff);
  background-image: -ms-linear-gradient(top, #d1d1d1, #ffffff);
  background-image: -o-linear-gradient(top, #d1d1d1, #ffffff);
  background-image: linear-gradient(to bottom, #d1d1d1, #ffffff);
  text-decoration: none;
}






/*로그인,로그아웃*/


@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
#statelogoff .main {  float:right; height:45px; line-height:15px; position:absolute;top:50px; right:20px; }
#statelogoff .main > a { padding:0 4px 0 10px; font-family:"nanumgothic"; color:#ffffff; font-size:10px; }
#statelogoff .main .log { background:none; }
#statelogoff .main > a .count,
#statelogoff .main > a .count span { position:relative; display:inline-block;  }
#statelogoff .main > a .count { left:-5px; top:-1px; margin:0 -5px 0 3px; padding:0 0 0 7px; vertical-align:middle; background-position:0 0; }
#statelogoff .main > a .count span { height:14px; padding:1px 7px 1px 0; font-weight:bold; color:#fff; font-size:10px; font-family:"nanumgothic"; line-height:14px; vertical-align:top; background-position:right -26px; }


#statelogoff .sub {  float:right; height:45px; line-height:15px; position:absolute;top:50px; right:20px; }
#statelogoff .sub > a { padding:0 4px 0 10px; font-family:"nanumgothic"; color:#0e0e0e; font-size:10px; }
#statelogoff .sub .log { background:none; }
#statelogoff .sub > a .count,
#statelogoff .sub > a .count span { position:relative; display:inline-block;  }
#statelogoff .sub > a .count { left:-5px; top:-1px; margin:0 -5px 0 3px; padding:0 0 0 7px; vertical-align:middle; background-position:0 0; }
#statelogoff .sub > a .count span { height:14px; padding:1px 7px 1px 0; font-weight:bold; color:#fff; font-size:10px; font-family:"nanumgothic"; line-height:14px; vertical-align:top; background-position:right -26px; }







#stateLogon .main { float:right; height:45px; line-height:15px; position:absolute;top:50px; right:20px; }
#stateLogon .main > a { padding:0 4px 0 10px; font-family:"nanumgothic"; color:#fff; font-size:10px; }
#stateLogon .main .myinfo { color:#fff; }
#stateLogon .main .myinfo strong { color:#fff; }
#stateLogon .main .myinfo a { padding:0 4px 0 10px; color:#fff; font-size:10px; font-family:"nanumgothic"; }
#stateLogon .main > a .count,
#stateLogon .main > a .count span { position:relative; display:inline-block; }
#stateLogon .main > a .count { left:-4px; top:-1px; margin:0 -5px 0 6px; padding:0 0 0 7px; vertical-align:middle; background-position:0 0; }
#stateLogon .main > a .count span { height:14px; padding:1px 8px 1px 0; font-weight:bold; color:#fff; font-size:10px; line-height:14px; vertical-align:top; background-position:right -26px; }


#stateLogon .sub { float:right; height:45px; line-height:15px; position:absolute;top:50px; right:20px; }
#stateLogon .sub > a { padding:0 4px 0 10px; font-family:"nanumgothic"; color:#0e0e0e; font-size:10px; }
#stateLogon .sub .myinfo { color:#0e0e0e; }
#stateLogon .sub .myinfo strong { color:#0e0e0e; }
#stateLogon .sub .myinfo a { padding:0 4px 0 10px; color:#0e0e0e; font-size:10px; font-family:"nanumgothic"; }
#stateLogon .sub > a .count,
#stateLogon .sub > a .count span { position:relative; display:inline-block; }
#stateLogon .sub > a .count { left:-4px; top:-1px; margin:0 -5px 0 6px; padding:0 0 0 7px; vertical-align:middle; background-position:0 0; }
#stateLogon .sub > a .count span { height:14px; padding:1px 8px 1px 0; font-weight:bold; color:#fff; font-size:10px; line-height:14px; vertical-align:top; background-position:right -26px; }


/*로그인,로그아웃*/











#hdWrap #header .hd-search { margin:0 auto; width: 140px; border: 1px solid #ddd;}
#hdWrap #header .hd-search .input-keyword { width: 115px; height:20px; border:0; }
#searchbox { position:absolute; top:36px; left: -170px; width:240px; padding: 20px 0; border: 1px solid #ccc; background:#fff; display:none; z-index:1302;}
#searchbox h3 { margin-bottom:10px; text-align:center;}




.category { margin:30px 0 30px 25px; }
.category h2 {height:20px; color:#616161; font-size:12px; font-weight:bold; }
.category .position {}
.category .position > ul {}
.category .position > ul > li { position:relative; z-index:10; }
.category .position > ul > li > a { display:block; padding:7px 20px 7px 9px; color:#fff; font-size:12px; font-weight:normal; word-spacing:1px; text-decoration:none; width:100px; }
.category .position > ul > li > a:hover {}
.category .position > ul > li.selected > a,
.category .position > ul > li.on > a { padding:7px 20px 7px 9px; font-size:12px; font-weight:normal; word-spacing:1px; text-decoration:none; border:0px solid #aeaeae; color:#a7a7a7; }
.category .position > ul > li > a:hover { display:block; padding:7px 20px 7px 9px; color:#a7a7a7; font-size:12px; font-weight:normal; word-spacing:1px; text-decoration:none; width:100px;}

.BoardInfo {margin:30px 0 30px 25px;  }
.BoardInfo h2 { height:20px; color:#616161; font-size:12px;  font-weight:bold; }
.BoardInfo li { position:relative; z-index:10; }
.BoardInfo li img { vertical-align:middle; }
.BoardInfo a { display:block; padding:7px 20px 7px 9px; color:#fff; font-size:12px; font-weight:normal; word-spacing:1px; text-decoration:none; width:100px;}
.BoardInfo a:hover { display:block; padding:7px 20px 7px 9px; color:#a7a7a7; font-size:12px; font-weight:normal; word-spacing:1px; text-decoration:none; width:100px;}







#right_menu {width:300px; height:100%; position:fixed; top:0; left:0px ; z-index:9999999; background:#0e0e0e;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

  /* IE 5-7 */
  filter: alpha(opacity=80);

  /* Netscape */
  -moz-opacity: 0.8;

  /* Safari 1.x */
  -khtml-opacity: 0.8;

  /* Good browsers */
  opacity: 0.8;
}
#right_menu .rmenu {position:relative;  font-family: 'Roboto','NanumGothic', sans-serif;}
#right_menu .rmenu .button {position:absolute; right:-40px; top:0; cursor:pointer; font-size:30px; color:#000;}

.btn {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}





#right_menu .rmenu .rmenu_inner { padding-left:30px; }
#right_menu .rmenu .rmenu_inner h2 { font-size:13px; color:#696868; margin:10px 0 10px; }
#right_menu .rmenu .rmenu_inner h2 span { color:#eb5b5b;}
#right_menu .rmenu .rmenu_inner .rmenu_common > ul > li, #right_menu .rmenu .rmenu_inner .rmenu_common > ul > li a { color: #9b9b9b; font-size:12px; }
#right_menu .rmenu .rmenu_inner .rmenu_common > ul > li { height:24px; line-height:24px; }
#right_menu .rmenu .rmenu_inner .rmenu_sns > ul > li > a {  font-size:24px; padding-right:15px; font-size:16px;  color:#9b9b9b;}
#right_menu .rmenu .rmenu_inner .rmenu_notice { width:240px; margin: 10px 0 20px 0; border:1px solid #bcbcbc;  border-left:0; border-right:0; padding:10px 0;}
#right_menu .rmenu .rmenu_inner iframe { margin:0 }

.btn {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

#right_menu .rmenu .button {
  width: 25px;
  height: 25px;
  cursor: pointer;
  text-decoration: none;
}
#right_menu .rmenu .button.active i::before, #right_menu .rmenu .button.active i::after {
  background: #000;
}
#right_menu .rmenu .button:hover, #right_menu .rmenu .button:focus, #right_menu .rmenu .button:active {
  outline: none;
  border-bottom: none !important;
}
#right_menu .rmenu .button i {

  content: '';
  width: 25px;
  height: 3px;
  background: #000;
  position: absolute;
  left: 0;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;




  position: relative;
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
  width: 25px;
  height: 3px;
  color: #000;
  font: bold 14px/.4 Helvetica;
  text-transform: uppercase;
  text-indent: -55px;
  background: #000;
  transition: all .2s ease-out;
}
#right_menu .rmenu .button i::before, #right_menu .rmenu .button i::after {







  content: '';
  width: 25px;
  height: 3px;
  background: #000;
  position: absolute;
  left: 0;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

#right_menu .rmenu .button i::before {
  bottom: -7px;
}

#right_menu .rmenu .button i::after {
  
 top: -7px;
}

#right_menu .rmenu .button:hover i::before {
  bottom: -8px;  

}

#right_menu .rmenu .button:hover i::after {
top: -8px;
}

#right_menu .rmenu .button.active i {
  background: transparent;
}

#right_menu .rmenu .button.active i::before {
  bottom: 0;
  -webkit-transform: rotateZ(-45deg);
  -moz-transform: rotateZ(-45deg);
  -ms-transform: rotateZ(-45deg);
  -o-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
}

#right_menu .rmenu .button.active i::after {



  top: 0;
  -webkit-transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
  -ms-transform: rotateZ(45deg);
  -o-transform: rotateZ(45deg);
  transform: rotateZ(45deg);



}




.hd-search { display:inline-block; margin:0px 0 30px; position:relative;top:0px;left:30px; }
.hd-search h2{ height:20px; color:#616161; font-size:12px; font-weight:bold; }
.hd-search .input-keyword {width:125px; height:32px; padding:0 0 0 0px; border:0; line-height:32px; font-size:12px; color:#7c8389; background:#fff; }

























/* BASIC css end */