@charset "utf-8";
@import URL("common.css");
/* --- 2013.03.25 APROCNI K.H.Y. --- */

/* Layout */

/* wrap */
html{background:url('/front/static/img/login/bg_wrap.gif') repeat 0 0;}
.wrap{width:100%;height:100% !important;min-width:1220px;text-align:center;}
.login_div{width:450px;height:350px;position:absolute;top:50%;left:50%;margin-top:-175px;margin-left:-225px;background:#fff;box-shadow:0 5px 30px rgba(0, 0, 0, 0.2);}
.join_div{width:491px;height:307px;position:absolute;top:50%;left:50%;margin-top:-153px;margin-left:-245px;background:url('/front/static/img/login/bg_join.png') no-repeat 0 0;}


.log_form_div{width:350px;margin:40px auto 0;padding:13px 0 35px 0;overflow:hidden;position:relative;}
/* ����_130910 */
.log_logo{width:147px;height:52px;display:block;position:absolute;top:20px;left:25px;}
.log_title{padding:10px 0;display:block;font-size:26px;text-align:center;color:#343536;letter-spacing:-1px;}
.log_title strong{color:#4e80ee;font-weight:normal;font-size:32px;}
/* // ����_130910 */
.log_form{margin-top:10px;}
.log_form li{}
.log_form li.idpw_save{height:28px;background:none;font-size:11px;letter-spacing:-1px;text-align:right;padding:3px 0;margin:0;}
.log_input{width:100%;height:40px !important;line-height:40px !important;border:1px solid #ddd !important;color:#555;font-size:15px !important;margin:5px auto;padding:0 10px !important;}
.pass_tip{position:absolute;top:11px;left:13px;text-align:left;font-size:12px;}

.log_type{font-size:11px;letter-spacing:-1px;margin-top:15px;font-weight:bold;}
.mail_btn{letter-spacing:-1px;font-weight:bold;position:absolute;bottom:23px;left:25px;font-size:10px;color:#999;}
.mail_btn a:link{color:#c17c22;font-size:11px;}
.mail_btn a:visited{color:#c17c22;font-size:11px;}
.mail_btn a:hover{color:#3e8ffc;font-size:11px;}
.log_btn{line-height:33px;position:absolute;bottom:20px;right:50px;}

.log_form2{width:240px;float:left;margin-left:10px;}
.log_form2 li{width:260px;height:34px;margin:5px 0;text-align:left;line-height:34px;}
.log_form2 .tb_log_mem{width:100%;}
.log_form2 .tb_log_mem{width:100%;border-top:1px solid #898989;}
.log_form2 .tb_log_mem .first{border-left:1px solid #e4e4e4 !important;}
.log_form2 .tb_log_mem .last{border-right:1px solid #e4e4e4;}
.log_form2 .tb_log_mem caption{display:none;}
.log_form2 .tb_log_mem thead th{height:32px;line-height:32px;font-size:11px;background:url('/front/static/img/board/bg_th_title.gif') repeat-x 0 0;font-weight:bold;text-align:center;}
.log_form2 .tb_log_mem tbody td{padding:8px 0 !important;font-size:11px;text-align:center;border-bottom:1px dashed #e4e4e4;}

.btnstyle1 {background:url(/static/img/board/btnstyle1_gray1.gif) no-repeat 0 0; height:22px; display:inline-block; text-decoration:none;}
.btnstyle1:hover {text-decoration:none;}
.btnstyle1 span{background:url(/static/img/board/btnstyle1_gray2.gif) no-repeat right 0; height:22px; margin-left:8px; padding:3px 10px 0 0; display:inline-block; line-height:17px; cursor:pointer; color:#222; font-size:11px; font-family:Dotum; letter-spacing:-1px;}
.btnstyle1 span img{vertical-align:middle; margin-top:-3px;}

/* parking */
.ch_park_div{width:560px;height:435px;position:absolute;top:50%;left:50%;margin-top:-217px;margin-left:-280px;border:2px solid #456a7d;background:url('/error/img/bg_error.gif') no-repeat 100% 100%;-moz-box-shadow: 0px 10px 21px #999;-webkit-box-shadow: 0px 10px 21px #999;box-shadow: 0px 10px 21px #999;}
.ch_park_div .img_error{margin-top:30px;text-align:center;}
.ch_park_div .title{font-size:14px;font-weight:bold;margin:50px auto 20px;}
.ch_park_div .title_up{font-size:30px;font-weight:bold;margin:30px auto;}
.ch_park_div .title_up strong{font-size:40px;color:#284b92;}
.ch_park_div dl{width:310px;margin:0 auto;}
.ch_park_div dl dt{width:100px;float:left;font-size:12px;font-weight:bold;text-align:center;line-height:32px;}
.ch_park_div dl dd{width:210px;float:left;font-size:14px;color:#102950;font-weight:bold;text-align:left;line-height:32px;}

/* notice */
.commNoticePage{margin-top:140px;width:100%;background:#fff;border-top:1px solid #ccc;border-bottom:1px solid #ccc;
    box-shadow:0px 5px 10px #eee}
.commNoticePage .innerForm{width:650px;text-align:left;line-height:1.8;font-size:12px;margin:0 auto;min-height:400px;padding:50px 10px 0;background:url('/front/static/img/common/img_noticebox.png') no-repeat 100% 0;}
.innerForm .noticeTitle{font-size:32px;font-weight:bold;color:#555;margin:0 auto 30px;}
.innerForm .t_14{color:#4f6d9d;font-size:16px;font-weight:bold;line-height:25px;}
.innerForm .t_note{color:#444;line-height:20px;margin:30px auto 90px;font-size:14px;}
.innerForm .notice_btns{text-align:center;padding:30px 0 40px;}
.inn_footer{border-top:1px solid #ddd;padding:10px 0 20px;}
.btnstyleNotice {background:#f9f9f9; height:39px;line-height:41px;border:1px solid #ccc;border-radius:4px; display:inline-block; text-decoration:none;padding:0px 28px;color:#222; font-size:18px !important; letter-spacing:-1px;vertical-align:middle;font-weight:bold;color:#333 !important;
    transition-duration:100ms;
    transition-timing-function:ease-in-out;
    transition-delay:0ms;
    -ms-transform: scale(1.0,1.0); /* IE 9 */
    -webkit-transform: scale(1.0,1.0); /* Chrome, Safari, Opera */
    transform: scale(1.0,1.0);
}
.btnstyleNotice:hover {text-decoration:none;
    color:#fff !important;
    background:#f20;
    box-shadow:0px 0px 10px #ddd;
    -ms-transform: scale(1.2,1.2); /* IE 9 */
    -webkit-transform: scale(1.2,1.2); /* Chrome, Safari, Opera */
    transform: scale(1.2,1.2);
}

.logBtn {width:100%;margin:5px auto;display:block;background:#4e80ee; height:48px;line-height:48px;text-decoration:none;color:#fff !important; font-size:18px !important; vertical-align:middle;font-weight:bold;border:0px}


/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@ ↑ ↑ ↑ ↑   레이아웃용CSS  ↑ ↑ ↑ ↑@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@ ↓ ↓ ↓ ↓   각종 효과 분리  ↓ ↓ ↓ ↓ @@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

/* @@@@@@@@@@@@@@ 애니메이션 효과 // 별도관리 블럭 @@@@@@@@@@@@@@ */

/* 오버시 우측 넘기기 */
.flip-vertical-right {-webkit-animation: flip-vertical-right 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;animation: flip-vertical-right 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;}
@-webkit-keyframes flip-vertical-right {0% {-webkit-transform: rotateY(0);transform: rotateY(0);}100% {-webkit-transform: rotateY(180deg);transform: rotateY(180deg);}}
@keyframes flip-vertical-right {0% {-webkit-transform: rotateY(0);transform: rotateY(0);}100% {-webkit-transform: rotateY(180deg);transform: rotateY(180deg);}}

/* 오버시 좌측 넘기기 */
.flip-vertical-left {-webkit-animation: flip-vertical-left 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;animation: flip-vertical-left 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;}
@-webkit-keyframes flip-vertical-left {0% {-webkit-transform: rotateY(0);transform: rotateY(0);}100% {-webkit-transform: rotateY(-180deg);transform: rotateY(-180deg);}}
@keyframes flip-vertical-left {0% {-webkit-transform: rotateY(0);transform: rotateY(0);}100% {-webkit-transform: rotateY(-180deg);transform: rotateY(-180deg);}}


/* 마우스 오버시 버티컬 로테이트 애니메이션 // 마우스오버시 addClass rotate-center 처리, 아웃시 removeClass */
.rotate-vert-center {-webkit-animation: rotate-vert-center 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;animation: rotate-vert-center 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;}
@-webkit-keyframes rotate-vert-center {0% {-webkit-transform: rotateY(0);transform: rotateY(0);}100% {-webkit-transform: rotateY(360deg);transform: rotateY(360deg);}}
@keyframes rotate-vert-center {0% {-webkit-transform: rotateY(0);transform: rotateY(0);}100% {-webkit-transform: rotateY(360deg);transform: rotateY(360deg);}}



/* 마우스 오버시 로테이트 애니메이션 // 마우스오버시 addClass rotate-center 처리, 아웃시 removeClass */
.rotate-center{animation:rotate-center .3s ease-in-out forwards}
.rotate-center-reverse{animation:rotate-center-reverse .3s ease-in-out forwards}
.rotate-half{animation:rotate-half .3s ease-in-out forwards}
@keyframes rotate-center{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes rotate-center-reverse{0%{transform:rotate(360deg)}100%{transform:rotate(0)}}
@keyframes rotate-half{0%{transform:rotate(0)}100%{transform:rotate(120deg)}}

/* 마우스 오버시 우측이동 애니메이션   // 마우스오버시 addClass rotate-right 처리, 아웃시 removeClass*/
.slide-right{animation:slide-right .5s cubic-bezier(.25,.46,.45,.94) forwards}
.slide-right-reverse{animation:slide-right-reverse .5s cubic-bezier(.25,.46,.45,.94) forwards}
@keyframes slide-right{0%{transform:translateX(0)}100%{transform:translateX(20px)}}
@keyframes slide-right-reverse{0%{transform:translateX(20px)}100%{transform:translateX(0)}}

/* 마우스 오버시 젤로효과 */
.jello-horizontal{animation:jello-horizontal .5s forwards}
@keyframes jello-horizontal{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}100%{transform:scale3d(1,1,1)}}

/* 마우스 오버시 바운스효과 */
.bounce-bottom{animation:bounce-bottom .9s forwards}
@keyframes bounce-bottom{0%{transform:translateY(45px);animation-timing-function:ease-in;opacity:1}24%{opacity:1}40%{transform:translateY(24px);animation-timing-function:ease-in}65%{transform:translateY(12px);animation-timing-function:ease-in}82%{transform:translateY(6px);animation-timing-function:ease-in}93%{transform:translateY(4px);animation-timing-function:ease-in}25%,55%,75%,87%{transform:translateY(0);animation-timing-function:ease-out}100%{transform:translateY(0);animation-timing-function:ease-out;opacity:1}}

/* 마우스 오버시 펄스 */
.pulsate-bck{animation:pulsate-bck .5s ease-in-out infinite forwards}
@keyframes pulsate-bck{0%{transform:scale(1)}50%{transform:scale(.9)}100%{transform:scale(1)}}

.heartbeat{animation:heartbeat 1.5s ease-in-out infinite forwards}
@keyframes heartbeat{from{transform:scale(1);transform-origin:center center;animation-timing-function:ease-out}10%{transform:scale(.91);animation-timing-function:ease-in}17%{transform:scale(.98);animation-timing-function:ease-out}33%{transform:scale(.87);animation-timing-function:ease-in}45%{transform:scale(1);animation-timing-function:ease-out}}

.rotate-scale-down{animation:rotate-scale-down .55s linear forwards}
@keyframes rotate-scale-down{0%{transform:scale(1) rotateZ(0)}50%{transform:scale(.5) rotateZ(180deg)}100%{transform:scale(1) rotateZ(360deg)}}

.rotate-vert-center{animation:rotate-vert-center .3s cubic-bezier(.455,.03,.515,.955) both}
@keyframes rotate-vert-center{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}

.tracking-in-expand-fwd{-webkit-animation:tracking-in-expand-fwd .8s cubic-bezier(.215,.61,.355,1.000) both;animation:tracking-in-expand-fwd .8s cubic-bezier(.215,.61,.355,1.000) both}
@-webkit-keyframes tracking-in-expand-fwd{0%{letter-spacing:-.5em;-webkit-transform:translateZ(-700px);transform:translateZ(-700px);opacity:0}40%{opacity:.6}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes tracking-in-expand-fwd{0%{letter-spacing:-.5em;-webkit-transform:translateZ(-700px);transform:translateZ(-700px);opacity:0}40%{opacity:.6}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}

/* 테스트용_마우스 오버시 오른쪽에서 왼쪽으로 배경색 슬라이드 // 적용시 기존 영역 안에 span 으로 추가하여 class 삽입*/
.slide-test{position:relative;z-index:2;}
.slide-test:after{content: '';position: absolute;background:rgba(255,255,255,0.1);width: 0;height: 100%;right: 0;top: 0;transition: width 0.3s ease;z-index:-1;border-radius:8px;}
.slide-test:hover:after{width: 100%;}

.slide-test2{position:relative;z-index:2;}
.slide-test2:after{content: '';position: absolute;background:rgba(96,139,238,0.2);width: 0;height: 100%;right: 0;top: 0;transition: width 0.3s ease;z-index:-1;border-radius:8px;}
.slide-test2:hover:after{width: 100%;}

.slide-test3{position:relative;z-index:2;}
.slide-test3:after{content: '';position: absolute;background:rgba(209,221,247,0.2);width: 0;height: 100%;right: 0;top: 0;transition: width 0.3s ease;z-index:-1;border-radius:0px;}
.slide-test3:hover:after{width: 100%;}


/* 버튼 클릭시 클릭 효과부여 // 적용시 기존 버튼 class 에 rippleripple 만 추가 */
.rippleripple {position: relative;-webkit-transition-duration: 0.4s; /* Safari */transition-duration: 0.4s;text-decoration: none;overflow: hidden;cursor: pointer;}
.rippleripple:after {content: "";background:rgba(255,255,255,0.3);display: block;position: absolute;padding-top: 300%;padding-left: 350%;margin-left: -20px !important;margin-top: -120%;opacity: 0;transition: all 0.8s}
.rippleripple:active:after {padding: 0;margin: 0;opacity: 1;transition: 0s}


/* 171121 라인박스버튼 애니메이션추가 */
/* 사용 예)   // lineBoxBtn 안의 스타일은 변경 가능 // 마우스 오버시 사방형 라인생성 애니메이션
<a href="#" class="lineBoxBtn">
   애니메이션 버튼입니다.
   <span class="t"></span>
   <span class="r"></span>
   <span class="b"></span>
   <span class="l"></span>
</a>
*/
.lineBoxBtn{position:relative;padding:20px 50px;display:inline-block;}
.lineBoxBtn span.t { position:absolute; display:block; width:0; height:5px; top:0; left:0;background: rgb(0,134,244);background: -moz-linear-gradient(left,  rgb(0,134,244) 0%, rgb(25,170,106) 100%);background: -webkit-linear-gradient(left,  rgb(0,134,244) 0%,rgb(25,170,106) 100%);background: linear-gradient(to right,  rgb(0,134,244) 0%,rgb(25,170,106) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0086f4', endColorstr='#19aa6a',GradientType=1 );}
.lineBoxBtn span.r { position:absolute; display:block; width:5px; height:0; top:0; right:0;background: rgb(25,170,106);background: -moz-linear-gradient(top,  rgb(25,170,106) 0%, rgb(250,156,71) 100%);background: -webkit-linear-gradient(top,  rgb(25,170,106) 0%,rgb(250,156,71) 100%);background: linear-gradient(to bottom,  rgb(25,170,106) 0%,rgb(250,156,71) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#19aa6a', endColorstr='#fa9c47',GradientType=0 );}
.lineBoxBtn span.b { position:absolute; display:block; width:0; height:5px; bottom:0; right:0;background: rgb(206,70,137);background: -moz-linear-gradient(left,  rgb(206,70,137) 0%, rgb(250,156,71) 100%);background: -webkit-linear-gradient(left,  rgb(206,70,137) 0%,rgb(250,156,71) 100%);background: linear-gradient(to right,  rgb(206,70,137) 0%,rgb(250,156,71) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce4689', endColorstr='#fa9c47',GradientType=1 );}
.lineBoxBtn span.l { position:absolute; display:block; width:5px; height:0; bottom:0; left:0;background: rgb(4,133,243);background: -moz-linear-gradient(top,  rgb(4,133,243) 0%, rgb(206,70,137) 100%);background: -webkit-linear-gradient(top,  rgb(4,133,243) 0%,rgb(206,70,137) 100%);background: linear-gradient(to bottom,  rgb(4,133,243) 0%,rgb(206,70,137) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0485f3', endColorstr='#ce4689',GradientType=0 );}
.lineBoxBtn:hover > span.t, .lineBoxBtn:focus > span.t { width:0; height:5px;animation-name: span-t;animation-duration: 0.3s;animation-timing-function: ease;animation-delay: 0s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
@keyframes span-t {0% { width:0;}100% { width:100%;}}
.lineBoxBtn:hover > span.r, .lineBoxBtn:focus > span.r { width:5px; height:0;animation-name: span-r;animation-duration: 0.3s;animation-timing-function: ease;animation-delay: 0s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
@keyframes span-r {0% { height:0;}100% { height:100%;}}
.lineBoxBtn:hover > span.b, .lineBoxBtn:focus > span.b {width:0; height:5px;animation-name: span-b;animation-duration: 0.3s;animation-timing-function: ease;animation-delay: 0s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
@keyframes span-b {0% { width:0;}100% { width:100%;}}
.lineBoxBtn:hover > span.l, .lineBoxBtn:focus > span.l { width:5px; height:0;animation-name: span-l;animation-duration: 0.3s;animation-timing-function: ease;animation-delay: 0s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
@keyframes span-l {0% { height:0;}100% { height:100%;}}

/* 171130_포인트강조 */
/* 시선집중 시키고 싶은 영역에 적용, 우측 상단에 반짝이는 붉은점 생성
   <div class="notifyAction"><span class="ani_heartbit"></span><span class="notiPoint"></span></div> 형식으로 사용
*/
.notifyAction {position: relative;right: -8px;top: -10px;}
.notifyAction .ani_heartbit {animation-name: ani_heartbit;animation-duration: 1s;animation-timing-function: ease-out;animation-iteration-count:infinite;animation-delay: 0s;-webkit-animation-fill-mode: both;animation-fill-mode: both;
    border: 5px solid #f00000;border-radius: 70px;height: 25px;position: absolute;right: -4px;top: -20px;width: 25px; z-index: 10;}
.notifyAction .notiPoint {background-color: #f00000;border-radius: 1000px;height: 5px;position: absolute;   right: 6px;top: -10px;width: 5px;}
@keyframes ani_heartbit {0% {opacity: 0;transform: scale(0);}25% {opacity: 0.1;transform: scale(0.1);}50% {opacity: 0.3;transform: scale(0.5);}75% {opacity: 0.5;transform: scale(0.8);}100% {opacity: 0;transform: scale(1);}}


/* 171212 CSS 스위치 */
/* <label class="switchBtn"><input type="checkbox" checked=""><span class="switchBtn-indicator"></span></label> */
.switchBtn {font-weight: 300;letter-spacing: 0;margin-bottom: 0;line-height: 29px;cursor: pointer;white-space: nowrap;transition:All 0.3s ease;-webkit-transition:All 0.3s ease;-moz-transition:All 0.3s ease;-o-transition:All 0.3s ease;}
.switchBtn input {display: none;}
.switchBtn-indicator {position: relative;display: inline-block;width: 40px;height: 10px;background: #e3e4e5;border-radius: 20px;vertical-align: middle;transition:All 0.3s ease;-webkit-transition:All 0.3s ease;-moz-transition:All 0.3s ease;-o-transition:All 0.3s ease;}
.switchBtn input:checked ~ .switchBtn-indicator {background: #528fea;transition:All 0.3s ease;-webkit-transition:All 0.3s ease;-moz-transition:All 0.3s ease;-o-transition:All 0.3s ease;}/* CDEAFD    // after 398bf7*/
.switchBtn input:checked ~ .switchBtn-indicator::after {background: #fff;border-radius: 50%;top: -5px;-webkit-box-shadow: 0px 0px 3px #bbb;box-shadow: 0px 0px 3px #bbb;left: calc(100% - 18px);transition:All 0.3s ease;-webkit-transition:All 0.3s ease;-moz-transition:All 0.3s ease;-o-transition:All 0.3s ease;}
.switchBtn-indicator::after {content: '';display: block;position: absolute;left: 0px;width: 20px;height: 20px;cursor: inherit;background: #fff;border-radius: 50%;top: -5px;-webkit-box-shadow: 0px 0px 3px #bbb;box-shadow: 0px 0px 3px #bbb;transition:All 0.3s ease;-webkit-transition:All 0.3s ease;-moz-transition:All 0.3s ease;-o-transition:All 0.3s ease;}

.switchBtnMin {font-weight: 300;letter-spacing: 0;margin-bottom: 0;line-height: 29px;cursor: pointer;white-space: nowrap;transition:All 0.3s ease;-webkit-transition:All 0.3s ease;-moz-transition:All 0.3s ease;-o-transition:All 0.3s ease;}
.switchBtnMin input {display: none;}
.switchBtnMin-indicator {position: relative;display: inline-block;width: 26px;height: 6px;background: #e3e4e5;border-radius: 20px;vertical-align: middle;transition:All 0.3s ease;-webkit-transition:All 0.3s ease;-moz-transition:All 0.3s ease;-o-transition:All 0.3s ease;}
.switchBtnMin input:checked ~ .switchBtnMin-indicator {background: #528fea;transition:All 0.3s ease;-webkit-transition:All 0.3s ease;-moz-transition:All 0.3s ease;-o-transition:All 0.3s ease;}/* CDEAFD    // after 398bf7*/
.switchBtnMin input:checked ~ .switchBtnMin-indicator::after {background: #fff;border-radius: 50%;top: -4px;-webkit-box-shadow: 0px 0px 3px #bbb;box-shadow: 0px 0px 3px #bbb;left: calc(100% - 15px);transition:All 0.3s ease;-webkit-transition:All 0.3s ease;-moz-transition:All 0.3s ease;-o-transition:All 0.3s ease;}
.switchBtnMin-indicator::after {content: '';display: block;position: absolute;left: 0px;width: 15px;height: 15px;cursor: inherit;background: #fff;border-radius: 50%;top: -4px;-webkit-box-shadow: 0px 0px 3px #bbb;box-shadow: 0px 0px 3px #bbb;transition:All 0.3s ease;-webkit-transition:All 0.3s ease;-moz-transition:All 0.3s ease;-o-transition:All 0.3s ease;}

/* @@@@@@@@@@@@@@ // 애니메이션 효과   @@@@@@@@@@@@@@ */



.accTable01{width:100%;border-top:3px solid #4a7ed5;border-bottom:1px solid #4a7ed5;margin:0 auto;}
.accTable01 thead th{padding:8px 0;font-weight:bold;font-size:12px;line-height:1.5;border-bottom:1px solid #4a7ed5;white-space:normal;letter-spacing:-1px;text-align:center;color:#4a7ed5;background:#fafafa;}
.accTable01 tbody th{text-align:center;padding:8px 0;font-weight:bold;font-size:13px;line-height:1.5;border-bottom:1px solid #dedede;white-space:normal;}
.accTable01 tbody td{padding:8px 0;font-weight:bold;font-size:13px;line-height:1.5;border-bottom:1px solid #dedede;white-space:normal;}
.accTable01 tbody td.date{font-size:11px;font-family:"tahoma";color:#999;font-weight:normal;}
.accTable01 tfoot th{padding:8px 0;font-weight:bold;font-size:16px;line-height:1.5;border-bottom:1px solid #dedede;white-space:normal;color:#f30;background:#fefefe;}
.accTable01 tfoot td{padding:8px 0;font-weight:bold;font-size:12px;line-height:1.5;border-bottom:1px solid #e9e9e9;white-space:normal;background:#fdfdfd;color:#333;}
.ip_acc{height:25px !important;line-height:25px !important;border:1px solid #b8ccde !important;font-size:14px !important;}
.join_tip{color:#f60;letter-spacing:-1px;}
.btn_acc{display:inline-block;background:#333;font-weight:bold;font-size:14px;color:#fff !important;padding:5px 10px;border-radius:5px;}