@charset "utf-8";
/* default definition */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {padding:0; margin:0;}
p, ul, ol, li, dl, dt, dd, form {list-style-image:none; list-style-position:outside; list-style-type:none; border:0px;}
h1, h2, h3, h4, h5, h6 {font-size:100%; font-weight:normal;}
html, body {
	font-size:13px;
	color: #333333;
	line-height:160%; 
	font-family:Noto Sans, dotum, gulim;
	-webkit-text-size-adjust:none;
	-moz-text-size-adjust:none;
	-ms-text-size-adjust:none;
}
.nmj {font-family: 'Nanum Myeongjo', serif;}
.nmj strong {font-family:'Nanum Myeongjo', serif;}
/*
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 100;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');
}*/
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 300;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans';
   font-style: normal;
   font-weight: 400;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans';
   font-style: normal;
   font-weight: 500;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans';
   font-style: normal;
   font-weight: 700;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');
 }
a,img,input{selector-dummy: expression(this.hideFocus=true);} 
a:link {text-decoration:none; color:#666666;}
a:visited {text-decoration:none; color:#666666;}
a:hover	{text-decoration:none; color: #333333; }
.img_m {vertical-align:middle;}
.img_t {vertical-align:top;}
.img_b {vertical-align:baseline;}


table {border-collapse:collapse;}
table img {max-width:100%;}

hr {display:none;}
ol, ul, li {list-style:none;}



#accessibility, .skip, hr, legend {
	position : absolute ;
	width : 0 ; 
	height : 0 ; 
	font-size : 0 ; 
	line-height : 0 ;
	overflow : hidden ; 
	visibility : hidden ;
}
a,img,input{selector-dummy: expression(this.hideFocus=true);} 
a img, fieldset {border:0px none; }
img {vertical-align:top;}
caption {display:none;}
address, em{font-style:normal;}	

html:first-child select {padding-left:6px;} /* Opera Fix */
option, x:-moz-any-link {padding-left:6px;} /* Firefox Fix */
option, x:-moz-any-link, x:default {padding-right: 0;} /* Firefox Fix */


/* bold */
strong, b, h4, h5, dt, th, .caption {font-family:Noto Sans, dotum, gulim;  font-weight:500;}
strong.eb, b.eb, .eb {font-family:Noto Sans, dotum, gulim; font-weight:500;}

/* ico */
.ico_red { display:inline-block; vertical-align:middle; padding:0px 10px; height:20px; text-align:center; color:#fff; line-height:20px; background:#ba2a2c; border-radius:10px; font-size:12px;}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* font-size */
.f0  {font-size:0px;}
.f11 {font-size:11px;}
.f09 {font-size:0.9em;}
.f095 {font-size:0.95em;}
.f1_05 {font-size:1.05em; line-height:150%;}
.f1_15 {font-size:1.15em; line-height:150%;}
.f1_2 {font-size:1.2em; }
.fs2em {font-size:2em; line-height:130%;}
.f12 {font-size:12px;}
.f13 {font-size:13px !important;}
.f14 {font-size:14px !important;}
.f15 {font-size:15px;}
.f16 {font-size:1.2em; !important; line-height:190%}
.f18 {font-size:18px;}
.f20 {font-size:20px !important;}
.fb  { font-family:Noto Sans;} 
.fn  {font-weight: normal !important;}

/* font-color */
.green {color:#44993e !important;}
.fcor6 {color:#666666;}
.fcor3 {color:#333333;}
.fcor0 {color:#000000;}
.fcora {color:#aaaaaa;}
.fcor4c {color:#4c4c4c;}
.fcor4b {color:#4b4b4b;}
.fcor68 {color:#68ab13;}
.fcor0e {color:#0e8e83;}
.fcor9e {color:#9e509c !important;}
.fcor88 {color:#882886 !important;}
.fcor86 {color:#868686;}
.red {color:#d3070d !important;}
.wine {color:#6e0a20 !important;}
.blue {color:#008ae0 !important;}
.black {color:#000 !important;}
.purple {color:#505b84;}
.orange {color:#ed6c0a !important;}
.org {color:#ff0000 !important;}
.point {color:#3babd7 !important;}


/* form */
input[type=text], [type="password"], [type="search"], [type="email"], [type="url"], [type="number"], [type="tel"], select, textarea {line-height:30px; min-height:30px; vertical-align:middle; font-family:Noto Sans, dotum, gulim; transition:border-color 0.2s; border:1px solid #c4c4c4; border-radius:2px; color:#565a5c; box-sizing:border-box; -moz-box-size:border-box; background-color: #fff;}
input {vertical-align:middle; padding:0px 8px;}
input[type="radio"], input[type="checkbox"] {padding:initial; padding:0px; background-color:initial;}
ime_mode {ime-mode:disabled;}
input[type="radio"], input[type="checkbox"] {position:relative; -webkit-appearance:none; height:1.25em; width:1.25em; margin-right: 5px; vertical-align: top; transition: border-color 0.2s; -webkit-transition: border-color 0.2s; border:1px solid #c4c4c4; border-radius:2px; vertical-align:middle; background-color: #fff;}
input[type="checkbox"]:checked:before {content:"\2713"; position:absolute; font-size:0.85em; left:1px; text-align:center;    width: 1.25em; color:#000; font-weight:bold;}
input[type="radio"]:checked:before {content: ""; position: absolute; height:0.45em; width:0.45em; border-radius:0.45em; top: 50%; left:50%; margin-top:-0.225em; margin-left:-0.225em; background-color:#000;}
input[type="radio"] {box-sizing: border-box; border-radius:1.25em;}
button {background:none; font-family:Noto Sans;}
.placeholder {color:#999 !important;}

select {border:none; font-family:Noto Sans; color:#565a5c; border:1px solid #c4c4c4; border-radius:2px; box-sizing: border-box;}
.select_ds {position:relative; vertical-align:middle; overflow:hidden; box-sizing:border-box; -moz-box-size:border-box;}
.select_ds .select_in {padding:0px 15px;}
.select_ds select {width:100%; padding:0px 8px; box-sizing:border-box; -moz-box-size:border-box; height:32px;}
.select-block {display:block; width:100%;}
.select_bg {display:block; width:100%; overflow:hidden;}
option {font-weight:normal; display:block; padding:0px 2px 1px; white-space:pre; min-height:1.2em; font-family:Noto Sans;}


.col-sm-2 .select_ds {width:50%; box-sizing:border-box; -moz-box-size:border-box; float:left;}
.col-sm-3 .select_ds {width:33.33%; box-sizing:border-box; -moz-box-size:border-box; float:left;}
.col-sm-4 .select_ds {width:25%; box-sizing:border-box; -moz-box-size:border-box; float:left;}
.col-sm-2:after, .col-sm-3:after, .col-sm-4:after, .col-sm-5:after { display:block; clear:both; content:"";} 


.input {
          color:#737070; 
	
		  background-color:#ffffff;
		  border:solid 1px #cacccb; 
		  height:18px;
		  padding:1px 3px 0 3px;
		
}
/*input.input2 {
          color:#737070; 
		  font-size:1em; 
		  background-color:#eeecec;
		  border:none; 
		  height:38px;
		  line-height:38px;
		  padding:1px 3px 0 3px;
		
}		*/
.input3 {
          color:#888888; 
		  font-size:0.95em; 
		  background-color:#ffffff;
		  border:solid 1px #ffffff; 
		  height:16px;
		  vertical-align:middle;
		
}
.input5 {
	width:100%;
	max-width:300px;	
}			  	
.textarea2 {
          color:#666666; 
		  font-size: 9pt; 
		  background-color:#ebebeb;
		  border:solid 0  #BDBDBD;
		  padding:2px;
		  }
.textarea {
	      border:solid 1px #cacccb; 
		  background-color:#ffffff;
		  padding:3px 4px;
		  font-family:Noto Sans, dotum, gulim;
		  color:#737070;
		  width:100%;
		
}
textarea, .scr	{
	scrollbar-face-color:#ffffff;		/* bar 의 표면색 */
	scrollbar-highlight-color:#d0d0d0;	/* 밝게 빛나는 좌상단 모서리 */
	scrollbar-3dlight-color:#ffffff;	/* 좌상단 모서리 아래부분 */
	scrollbar-shadow-color:#d0d0d0;		/* 그림자 지는 우하단 */
	scrollbar-darkshadow-color:#ffffff;	/* 그림자 우하단 */
	scrollbar-track-color:#f7f7f7;		/* 스크롤 트랙의 색 */
	scrollbar-arrow-color:#968a7c;		/* 삼각형부분 */
	overflow-x:hidden;overflow-y:auto; 
}	 

.select {color:#666666; height:28px; border:1px solid #dedede;}
.scrollbox {
    height: 200px;
    padding: 12px;
    overflow: auto;
    background: #fff;
    border: 1px solid #cacaca;
    overflow-x: hidden;
}
.scrollbar1 {
	scrollbar-3dlight-color:#c7c7c7;
	scrollbar-arrow-color:#7b7b7b;
	scrollbar-base-color:#c7c7c7;
	scrollbar-darkshadow-color:#c7c7c7;
	scrollbar-face-color:#f7f7f7;
	scrollbar-highlight-color:#f9f9f9;
	scrollbar-shadow-color:#c7c7c7;
}
/* margin,padding */ 
.mt-28 {margin-top:-28px;}

.mt0 {margin-top:0px !important;}
.mt2 {margin-top:2px;}	
.mt3 {margin-top:3px;}
.mt4 {margin-top:4px;}
.mt5 {margin-top:5px;}	 
.mt7 {margin-top:7px;}
.mt10 {margin-top:10px !important;}
.mt15 {margin-top:15px !important;}
.mt18 {margin-top:18px;}
.mt20 {margin-top:20px !important;}
.mt22 {margin-top:22px;}
.mt25 {margin-top:25px !important;}
.mt30 {margin-top:30px;}
.mt40 {margin-top:40px;}
.mt50 {margin-top:50px !important;}
.mt70 {margin-top:70px !important;}

.mr5 {margin-right:5px ;}
.mr6 {margin-right:6px !important;}
.mr7 {margin-right:7px !important;}
.mr8 {margin-right:8px !important;}
.mr15 {margin-right:15px !important;}
.mr20 {margin-right:20px !important;}
.mr0 {margin-right:0px !important;}

.mb0 {margin-bottom:0px !important;}
.mb2 {margin-bottom:2px;}
.mb5 {margin-bottom:5px;}
.mb7 {margin-bottom:7px;}
.mb10 {margin-bottom:10px;}
.mb15 {margin-bottom:15px;}
.mb18 {margin-bottom:18px !important;}
.mb20 {margin-bottom:20px;}
.mb30 {margin-bottom:30px !important;}
.mb25 {margin-bottom:25px;}	
.mb30 {margin-bottom:30px;}
.mb35 {margin-bottom:35px;}
.mb40 {margin-bottom:40px;}
.mb48 {margin-bottom:48px;}	
.mb50 {margin-bottom:50px;}	

.ml0 {margin-left:0px !important;}
.ml3 {margin-left:3px;}
.ml4 {margin-left:4px;}
.ml5 {margin-left:5px !important;}
.ml9 {margin-left:9px;}
.ml10 {margin-left:10px;}
.ml15 {margin-left:15px !important;}
.ml16 {margin-left:16px;}
.ml17 {margin-left:17px;}
.ml20 {margin-left:20px;}
.ml50 {margin-left:50px;}
.ml65 {margin-left:65px;}
.ml100 {margin-left:100px;}

.pl0 {padding-left:0px !important;}
.pl3 {padding-left:3px;}
.pl5 {padding-left:5px;} 
.pl10 {padding-left:10px !important;}
.pl13 {padding-left:13px;}
.pl15 {padding-left:15px}
.pl20 {padding-left:20px !important;}
.pl23 {padding-left:23px;}
.pl25 {padding-left:25px;}
.pl30 {padding-left:30px !important;}
.pl32 {padding-left:32px;}
.pl33 {padding-left:33px;}
.pl34 {padding-left:34px;}
.pl35 {padding-left:35px;}
.pl36 {padding-left:36px;}
.pl37 {padding-left:37px;}
.pl38 {padding-left:38px;}
.pl39 {padding-left:39px;}
.pl40 {padding-left:40px;}
.pl45 {padding-left:45px;}
.pl50 {padding-left:50px;}
.pl55 {padding-left:55px;}
.pl60 {padding-left:60px;}
.pl65 {padding-left:65px;}
.pl70 {padding-left:70px;}
.pl75 {padding-left:75px;}
.pl93 {padding-left:93px;}
.pl7 {padding-left:7px;}

.pr0 {padding-right:0px !important;} 
.pr5 {padding-right:5px;} 
.pr10 {padding-right:10px !important;}
.pr13 {padding-right:13px;}
.pr15 {padding-right:15px;}
.pr20 {padding-right:20px;}
.pr25 {padding-right:25px;}	
.pr30 {padding-right:30px;}
.pr35 {padding-right:35px;}
.pr40 {padding-right:40px;}
.pr50 {padding-right:50px;}
.pr55 {padding-right:55px;}
.pr60 {padding-right:60px !important;}
.pr65 {padding-right:65px !important;}
.pr120 {padding-right:120px !important;}

.pt0 {padding-top:0px !important;}
.pt2 {padding-top:2px !important;}
.pt3 {padding-top:3px !important;}
.pt5 {padding-top:5px;} 
.pt7 {padding-top:7px;}
.pt10 {padding-top:10px !important;}
.pt13 {padding-top:13px;}
.pt15 {padding-top:15px;}
.pt17 {padding-top:17px;}
.pt19 {padding-top:19px;}
.pt20 {padding-top:20px !important;}
.pt22 {padding-top:22px;}
.pt25 {padding-top:25px;}
.pt30 {padding-top:30px !important;}
.pt35 {padding-top:35px;}
.pt40 {padding-top:40px !important;}
.pt45 {padding-top:45px;}
.pt50 {padding-top:50px !important;}
.pt55 {padding-top:55px !important;}
.pt60 {padding-top:60px;}
.pt65 {padding-top:65px;}
.pt70 {padding-top:70px;}
.pt80 {padding-top:80px;}
.pt90 {padding-top:90px;}
.pt100 {padding-top:100px;}

.pb0 {padding-bottom:0px !important;} 
.pb5 {padding-bottom:5px;} 
.pb8 {padding-bottom:8px;}
.pb9 {padding-bottom:9px;}
.pb10 {padding-bottom:10px;}
.pb13 {padding-bottom:13px;}
.pb15 {padding-bottom:15px;}
.pb20 {padding-bottom:20px;}
.pb25 {padding-bottom:25px;}
.pb30 {padding-bottom:35px;}  
.pb35 {padding-bottom:35px;}
.pb48 {padding-bottom:48px;}

.ptb15 {padding:15px 0;}
.prl20 {padding-right:20px !important; padding-left:20px !important;}
.padd20 {padding:20px;}
.padd_no {padding:0px !important;}
.padd_no table td {padding:0px !important;}

/* align */
.fl {float:left;}
.fr {float:right !important;}
.cb {clear:both;} 	
.pa {position:absolute;}
.pr {position:relative; *z-index:999;}
.mauto {margin:0 auto;}
.btn-tc {margin-top:20px; padding:20px 0px; text-align:center; border-top:1px solid #000000;}
.btn-r {margin-top:20px; text-align:right;}
.btn-rb {margin-bottom:-106px; text-align:right; height:89px; padding-top:17px;}
.btn-tc .block_m {margin-bottom: 5px;}



.v0 {*vertical-align:0px !important;}
.v2 {*vertical-align:-2px !important;}
.vm {vertical-align:middle;}
.tc {text-align:center;}
.tl {text-align:left !important;}
.tr {text-align:right !important;}

.of_auto{overflow:auto}
.of_hi {overflow:hidden}

.bg_no {background-image:none !important;}
.br_no {border:none !important;}
.bl_no {border-left:none !important;}
.bb_no {border-bottom:none !important;}
.text_line {text-decoration:underline;}
.li_he16 { line-height:160%;}
.li_he15 { line-height:150%;}
.li_he14 { line-height:140%;}
.li_he13 { line-height:130%;}
.li_he12 { line-height:120%;}
.ib {display:inline-block !important; zoom:1; *display:inline;}
.db {display:block;}
.lts2 {letter-spacing:2px;}
.lts3 {letter-spacing:3px;}
.lts4 {letter-spacing:4px;}
.lts5 {letter-spacing:5px;}


/* bul */
.buls01 {
	padding:2px 0px 2px 16px;
	line-height:150%;
	background:url(../img/common/bul01.gif) no-repeat 0px 6px;
	min-height:20px;
}
.buls02 {
	padding:2px 0px 2px 10px;
	line-height:150%;
	text-align:left;
	background:url(../img/common/bul02.gif) no-repeat left 9px;
	min-height:20px;
}
.bul02 dt {
	font-size:14px;
	color:#2d2d2d;
	padding-bottom:7px;
	line-height:20px;
}
.bul02 dd {
	padding-left:12px;
	line-height:120%;
	background:url(../img/common/bul02.gif) no-repeat 2px 9px;
	min-height:20px;
	
	text-align:left;
}
.bul01 > li {
	padding:2px 0px 2px 16px;
	line-height:110%;
	background:url(../img/common/bul01.gif) no-repeat 0px 9px;
	min-height:20px;
	text-align:left;
}

.bul02 li {
	padding-left:12px;
	line-height:150%;
	background:url(../img/common/bul02.gif) no-repeat 2px 9px;
	min-height:20px;
	text-align:left;
    margin-top: 3px;
}

.bul03 li {
	padding-left:12px;
	line-height:145%;
	
	background:url(../img/common/bul03.gif) no-repeat 2px 9px;
	min-height:20px;
}
.bul04 li {
	padding-left:0px;
	background:none;
	color:#7b7b7b;
}

.gray_dot {
    border:3px solid #D9D9D9;
    padding:17px 20px;
	margin-top:40px;
}
.gray_dot li {
	color:#888888;
	line-height:150%;
	margin:2px 0px;
}

/* skip */
#skipToContent {
	font-size: 0;
    left: 0;
    line-height: 0;
	position: absolute;
	top: -30px;
	width: 100%;
	z-index: 999999;
}
#skipToContent a:active, #skipToContent a:focus {
	font-size:13px;
	background-color: #333333;
	border: medium none;
	color: #FFFFFF;
	height: 30px;
	left: 0;
	position: absolute;
	text-align: center;
	text-decoration: underline;
	top: 30px;
	line-height: 30px;
	width: 100%;
	display: block;
}

/* border */
.no_r {border-right:none !important;}
.no_l {border-left:none !important;}
.no_b {border-bottom:none !important;}


/* title */
.s_title {height:20px; font-size:20px; color:#515151; font-family:Noto Sans, dotum, gulim; padding:30px 0px 10px 0px; clear:both;}
.ss_title {padding:0px 0px 10px 13px; margin:20px 0px 10px 0px; clear:both; background:url(../img/common/link_arrow.gif) no-repeat left 5px;}

.s_title55 {height:55px; padding-top:60px; clear:both;}

.note {clear:both; padding-top:10px; font-size:12px; color:#737070;}
.ref {clear:both; font-size:12px; color:#8d8d8d;}
dl.note dt {display:inline-block; height:20px; line-height:20px; color:#fff; font-size:13px; padding:0px 5px; background:#8e8e8e;}
dl.note dd { color:#565656; line-height:20px; padding:2px 0px; font-size:13px;}



/* etc 팝업 */
.pop_policy {width:100%;}
.pop_policy .pol_tit {
	width:100%;
	text-align: left;
	padding:17px 0;
	font-size: 16px;
	background: #414142;
	margin: 0 0 15px 0;
	color:#fff;
	font-family:Noto Sans;
}
.pop_policy .pol_tit span {
	padding-left:17px;
}
.pop_policy .pol_tit img {margin: 0 0 0 30px;}
.pop_policy .pol_con {padding:0 10px 25px 10px; max-height:760px; overflow-x:hidden; overflow-y:auto;}
.pol_sc {
	width: 100%;
	height: 310px;
	overflow-x: hidden;
	overflow-y: auto;
	background: #f5f5f5;
	color: #6d6c6c;
	font-size:13px;
}

.pol_sc .pol_sc_in {padding:20px; line-height:160%;}

.menu_btn {position: relative; height: 28px; width:36px; cursor: pointer;}
.menu_btn .line-top,
.menu_btn .line-middle,
.menu_btn .line-bottom {position: absolute; display: block; height: 4px; width:100%; border-radius:0px; background: #000;}
.menu_btn .line-top {top: 0; -webkit-transform-origin: 18px 2px;  transform-origin: 18px 2px;}
.menu_btn .line-middle {top: 12px;  -webkit-transition: opacity 200ms linear;  transition: opacity 200ms linear;}
.menu_btn .line-bottom {bottom: 0;  -webkit-transform-origin: 18px 2px; transform-origin: 18px 2px;}
/*open*/
.menu_btn.is-open .line-top {
	-webkit-animation: line-top-out 400ms linear normal;
    animation: line-top-out 400ms linear normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.menu_btn.is-open .line-middle{opacity: 0;}
.menu_btn.is-open .line-bottom{
	-webkit-animation: line-bot-out 400ms linear normal;
    animation: line-bot-out 400ms linear normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
/*closed*/
.menu_btn.is-closed .line-top{
	-webkit-animation: line-top-in 500ms linear normal;
    animation: line-top-in 400ms linear normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.menu_btn.is-closed .line-middle{
	-webkit-transition-delay: 200ms;
    transition-delay: 200ms;
}
.menu_btn.is-closed .line-bottom{
	-webkit-animation: line-bot-in 500ms linear normal;
    animation: line-bot-in 500ms linear normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
	
/*keyfremes*/
@-webkit-keyframes line-top-in {
    0% {top: 12px; transform: rotate(-45deg);	}
	10% {top: 12px; transform: rotate(-35deg);	}
	20% {top: 12px; transform: rotate(-20deg);	}
	60% {top: 12px; transform: rotate(0deg);	}
	100% {top: 0px;}
}

@keyframes line-top-in {
	0% {top:12px;	transform: rotate(-45deg);}
	10% {top: 12px; transform: rotate(-35deg);	}
	20% {top: 12px; transform: rotate(-20deg);	}
	60% {top: 12px; transform: rotate(0deg);} 
	100% {top: 0px;}
}

@-webkit-keyframes line-top-out {
    0% {top: 0px;}
	60% {top: 12px; transform: rotate(0deg);	}
	80% {top: 12px; transform: rotate(-20deg);	}
	90% {top: 12px; transform: rotate(-35deg);	}
	100% {top: 12px;	transform: rotate(-45deg);	}
}

@keyframes line-top-out {
    0% {top: 0px;}
	60% {top: 12px; transform: rotate(0deg);	}
	80% {top: 12px; transform: rotate(-20deg);	}
	90% {top: 12px; transform: rotate(-35deg);	}
	100% {top: 12px;	transform: rotate(-45deg);	}
}

@-webkit-keyframes line-bot-in {
	0% {bottom: 12px; transform: rotate(45deg);	}
	10% {bottom: 12px;	transform: rotate(35deg);	}
	20% {bottom: 12px;	transform: rotate(20deg);	}
	60% {bottom: 12px;	transform: rotate(0deg);	}
	100% {bottom: 0px;	}
}

@keyframes line-bot-in {
    0% {bottom: 12px; transform: rotate(45deg);	}
	10% {bottom: 12px;	transform: rotate(35deg);	}
	20% {bottom: 12px;	transform: rotate(20deg);	}
	60% {bottom: 12px;	transform: rotate(0deg);	}
	100% {bottom: 0px;	}
}

@-webkit-keyframes line-bot-out {
    0% {bottom: 0px;	}
	60% {bottom: 12px; transform: rotate(0deg);	}
	80% {bottom: 12px;	transform: rotate(20deg);	}
	90% {bottom: 12px;	transform: rotate(35deg);	}
	100% {bottom: 12px; transform: rotate(45deg);	}
}

@keyframes line-bot-out {
	0% {bottom: 0px;	}
	60% {bottom: 12px; transform: rotate(0deg);	}
	80% {bottom: 12px;	transform: rotate(20deg);	}
	90% {bottom: 12px;	transform: rotate(35deg);	}
	100% {bottom: 12px; transform: rotate(45deg);	}
}