#bList a {text-decoration:none; color:#333;}
#bList a:hover {text-decoration:underline; color:#333;}

.wb-bw {word-break:break-word;} /*게시판 보기에서 줄바꿈*/
.mw50px {min-width:50px;}

.FileA a {text-decoration:none; color:#222cb4}
.infoTop {display:none;} /*모바일 감춤*/
.BSearch {padding:20px 0; margin:0 0 30px; text-align:center; line-height:30px; border:3px solid #ededed;}
.BLSearch {padding:10px 0;line-height:30px;}


.basicN {padding:2px 8px; 
	border:1px solid #0091d5; 
	background:#0091d5;
	outline:none; 
	text-decoration:none; 
	color:#fff; 
	font-size:13px; 
	letter-spacing:-1px; 
	}
.basicN.type {position:absolute;top:0;left:0;z-index:1;}

.SubJ {}
.SubJ span {position:relative;padding:0 0 0 20px;}
.SubJ strong.new {
	border-radius:20px;position:absolute;top:50%;left:0;margin-top:-10px;
	background:#ef5d60 ;color:#fff;display:inline-block;text-align:center;
	font-size:12px;width:20px;height:20px;line-height:20px;
	vertical-align:middle;
	}



/* 기본테이블 */
.SkinA_List {width:100%; height:auto; border-top:1px solid #2b2b2b;}
	.SkinA_List thead th, .SkinA_List tbody th {background-color:#f9f9f9; padding:10px 0; border-bottom:1px solid #e5e5e5; color:#333; font-weight:500;}
	.SkinA_List thead th a {color:#333;}
	.SkinA_List tbody td {border-bottom:1px solid #e5e5e5; padding:15px 10px; text-align:center;position:relative;}
	.SkinA_List tbody td.SubJ span{
		display:inline-block;
		text-overflow: ellipsis;width:90%;-o-text-overflow: ellipsis;overflow: hidden;white-space: nowrap;word-wrap: normal !important; 
	}
	.SkinA_List .TBleft {text-align:left;}
	.SkinA_List .tdLeft {text-align:left;}
	.SkinA_List .RNone {border-right:none;}
	.SkinA_List .Non {display:none;} /*모바일 감춤*/
	.SkinA_List tbody td a {text-decoration:none; color:#333; text-decoration:none;}
	.SkinA_List tbody td a:hover {text-decoration:underline;}

.SkinA_List  tr.impB {background: #fcfcfc;}

.SkinA_View {width:100%; height:auto; border-top:1px solid #2b2b2b;}
	.SkinA_View tbody th {background-color:#f9f9f9; padding:0 10px;}
	.SkinA_View tbody .title {font-weight:800; color:#333;}
	.SkinA_View tbody th.date {padding:10px 10px 20px;}
	.SkinA_View tbody th a {color:#555;}
	.SkinA_View tbody td {border-bottom:1px solid #e5e5e5; padding:20px;}
	.contbx {min-height:300px !important; vertical-align:top;}
	
	.SkinA_View tbody td .Nick {}
	.SkinA_View tbody td .Time {color:#777;}
	.SkinA_View tbody td a {color:#555;}

/* 카테고리 기본 색상없음, 색상 추가 시 list.php 수정*/
.SkinA_List .list_ct {color:#999}
.SkinA_List .list_ct i {
	display:inline-block; font-style:normal; text-align:center; font-size:14px; 
	padding:3px 15px; font-weight:600; line-height:20px; vertical-align:middle; 
	box-sizing:border-box; border-radius:50px; 
}
.SkinA_List .list_ct .ct1 {background:#f05588; color:#fff;} /* 공지 */
.SkinA_List .list_ct .ct2 {background:#ffc20e; color:#fff;} /* 안내 */
.SkinA_List .list_ct .ct3 {background:#8dc63f; color:#fff;} /* 알림 */

@media(max-width:768px) {
	.contbx img {width:100%; min-width:100% !important;height:auto !important;}
	.SkinA_List.mobile {}
	.SkinA_List.mobile thead {display:none;}
	.SkinA_List.mobile tbody {text-align:left;}
	.SkinA_List.mobile tbody, .SkinA_List.mobile tbody tr, .SkinA_List.mobile tbody tr th, .SkinA_List.mobile tbody tr td {display:block; float:left; clear:left; width:100%; box-sizing:border-box; border:none;}
	.SkinA_List.mobile tr:nth-child(odd) {background-color:#fafafa;}
	.SkinA_List.mobile tbody tr {padding-top:14px; padding-bottom:14px; border:1px solid #c6c6c6; border-bottom:none; border-left:none; border-right:none;}
	.SkinA_List.mobile tbody tr:first-child {border-top-width:0;}
	.SkinA_List.mobile tbody tr:last-child {border-bottom:1px solid #c6c6c6;}
	.SkinA_List.mobile tbody tr th {padding:0 20px; border-top-width:0; background-color:transparent; text-align:left;}
	.SkinA_List.mobile tbody tr td {border-top-width:0; text-align:left; padding:0 20px;}
	.SkinA_List.mobile  tbody td.SubJ span{width:50%;}
	
	.SkinA_View.mobile {}
	.SkinA_View.mobile thead {display:none;}
	.SkinA_View.mobile tbody {text-align:left;}
	.SkinA_View.mobile tbody, .SkinA_View.mobile tbody tr, .SkinA_View.mobile tbody tr th, .SkinA_View.mobile tbody tr td {display:block; float:left; clear:left; width:100%; box-sizing:border-box; border:none;}
	.SkinA_View.mobile tr:nth-child(odd) {background-color:#fafafa;}
	.SkinA_View.mobile tbody tr {padding-top:14px; padding-bottom:14px; border:1px solid #c6c6c6; border-bottom:none; border-left:none; border-right:none;}
	.SkinA_View.mobile tbody tr:first-child {border-top-width:0;}
	.SkinA_View.mobile tbody tr:last-child {border-bottom:1px solid #c6c6c6;}
	.SkinA_View.mobile tbody tr th {padding:0 20px; border-top-width:0; background-color:transparent; text-align:left;}
	.SkinA_View.mobile tbody tr td {border-top-width:0; text-align:left; padding:0 20px;}

	.SkinA_List .list_ct i {margin:0 0 5px; font-size:11px; padding:1px 15px;}
	}





.Color01 {display:inline-block; width:65px; text-align:center; font-size:12px; color:#fff; background:#e98900; border-radius:3px;}
.Color02 {display:inline-block; width:65px; text-align:center; font-size:12px; color:#aaa; background:#5e5e5e; border-radius:3px;}
.Color03 {display:inline-block; width:65px; text-align:center; font-size:12px; color:#fff; background:#00679e; border-radius:3px;}
.Color04 {display:inline-block; width:65px; text-align:center; font-size:12px; color:#fff !important; background:#f65354; border-radius:3px;}


@media(min-width:1200px) {
	.Color01 {width:65px; font-size:16px; padding:3px 0}
	.Color02 {width:65px; font-size:16px; padding:3px 0}
	.Color03 {width:65px; font-size:16px; padding:3px 0}
	.Color04 {width:65px; font-size:16px; padding:3px 0}
}

/* 코멘트 */
.ComBasic {margin-top:40px;}
.ComBasic .comment {margin-top:40px;}
	.comment div textarea {width:100%; min-height:70px;}
	.comment div.txtA {width:100%; margin-bottom:10px;}
	.comment div.btnA {}

.ComBasic .ComBTe {font-size:14px; width:50px; height:25px; line-height:25px; border:1px solid #729ecc; background:#729ecc; color:#fff; text-decoration:none; border-radius:3px;}
.ComBasic .ComBTe:hover {text-decoration:none;}
.ComBasic .ComBTe:active {border:1px solid #ccc; background:#eee;}

.ComBasic .ComBTd {font-size:14px; width:50px; height:25px; line-height:25px; border:1px solid #65b023; background:#65b023; color:#fff; text-decoration:none; border-radius:3px;}
.ComBasic .ComBTd:hover {text-decoration:none;}
.ComBasic .ComBTd:active {border:1px solid #ccc; background:#eee;}

/* 페이징 */
.BTnum {text-align:center; margin:20px auto;}
.BTnum a {text-decoration:none; color:#333; padding:0 10px;}
.BTnum a:hover {text-decoration:underline; color:#333;}

.page_num {color:#333; overflow:hidden;clear:both;text-align:center; margin:2em 0 0; font-size:15px;}
	.page_num a {display:inline-block; width:30px; height:25px; line-height:25px; text-decoration:none; color:#333; padding:0.5em; border:1px solid #ddd; margin:3px;}
	.page_num strong a {color:#4e6d9b !important; border:1px solid #4e6d9b;}
	/*.page_num input, .page_num select {border:1px solid #ddd; padding:15px;}*/

@media(min-width:1200px) {
	.page_num {margin:20px 0 50px 0;}
}

/* 버튼 */
.btnBottom {margin:20px 0; text-align:right;}
.btnSearch {width:80px; height:44px; line-height:44px; border:1px solid #5a496a ; background:#fff; color:#5a496a ;}
.btnSearch:active {color:#fff;background:#5a496a}
.basicA {padding:5px 10px; color:#333; border:1px solid #dfdfdf; background:transparent; cursor:pointer; outline:none; min-height:30px;}
.basicA:active {border:1px solid #dfdfdf; background:#eee;}

.basicB {padding:5px 10px; color:#fff; border:1px solid #3559a6; background:#3559a6; cursor:pointer; outline:none; min-height:30px;}
.basicB:active {border:1px solid #1c3c82; background:#1c3c82; color:#fff;}

.basicD {padding:5px 10px; color:#fff; border:1px solid #444; background:#444; cursor:pointer; outline:none; min-height:30px;}
.basicD:active {border:1px solid #333; background:#333; color:#fff;}


@media(max-width:768px) {
	.btnBottom {margin:20px 0; text-align:right;}
	.btnSearch {width:80px; height:38px; line-height:36px;}

	.basicA {padding:5px; color:#333; border:1px solid #dfdfdf; background:transparent; cursor:pointer; outline:none; min-height:20px;  font-size:14px;}
	.basicA:active {border:1px solid #dfdfdf; background:#eee;}

	.basicB {padding:5px; color:#fff; border:1px solid #3559a6; background:#3559a6; cursor:pointer; outline:none; min-height:20px;  font-size:14px;}
	.basicB:active {border:1px solid #1c3c82; background:#1c3c82; color:#fff;}

	.basicD {padding:5px; color:#fff; border:1px solid #444; background:#444; cursor:pointer; outline:none; min-height:20px; font-size:14px;}
	.basicD:active {border:1px solid #333; background:#333; color:#fff;}

	}


.BTN_A {transition:all 0.3s ease-out;border-radius:3px !important;	padding:8px 30px; border:1px solid #00afe3;     background-color: #00afe3;color:#fff !important;cursor:pointer; outline:none; text-decoration:none; text-align:center;	margin:0.1em;}
.BTN_A:hover,
.BTN_A:active {border:1px solid #34347c; background:#34347c;}

.BTN_B {transition:all 0.3s ease-out;border-radius:3px !important;padding:8px 30px; border:1px solid #f96b1e;     background-color: #f96b1e;color:#fff !important;cursor:pointer; outline:none; text-decoration:none; text-align:center;margin:0.1em;}
.BTN_B:hover,
.BTN_B:active {border:1px solid #ff5182; background:#ff5182;}

.BTN_C {transition:all 0.3s ease-out;border-radius:3px !important;	padding:8px 30px; border:1px solid #dfdfdf ;background-color: #fff;color:#333 !important;cursor:pointer; outline:none; text-decoration:none; text-align:center;margin:0.1em;}
.BTN_C:hover,
.BTN_C:active {transition:all 0.3s ease-out;border:1px solid #dfdfdf; background:#f2f2f2;}

.BTN_D {transition:all 0.3s ease-out;border-radius:3px !important;padding:8px 30px; border:1px solid #444 ;background-color: #444;color:#fff !important;cursor:pointer; outline:none; text-decoration:none; text-align:center;margin:0.1em;}
.BTN_D:hover,
.BTN_D:active {border:1px solid #111; background:#111;}

/* 링크이동 */
.LKbtnA {transition:all 0.3s ease-out;border-radius:50px !important;	padding:8px 40px 8px 20px; border: 2px solid #876bb6;background: #fff url('../images/cont/blk.png') 97% 50% no-repeat;color:#333 !important;cursor:pointer; outline:none; text-decoration:none; text-align:center;margin:0.1em;	}
.LKbtnA:hover,
.LKbtnA:active {border:2px solid #876bb6; background:#876bb6 url('../images/cont/blk_w.png') 95% 50% no-repeat;color:#fff !important;}


.LKbtnB {transition:all 0.3s ease-out;border-radius:50px !important;	padding:8px 30px; border: 1px solid #444;background: #fff;color:#333 !important;cursor:pointer; outline:none; text-decoration:none; text-align:center;margin:0.1em;	}
.LKbtnB:hover,
.LKbtnB:active {border:1px solid #444; background:#444;color:#fff !important;}



.in95 {width:95%;}
.in90 {width:90%;}
.in85 {width:85%;}
.in80 {width:80%;}
.in75 {width:75%;}
.in70 {width:70%;}
.in65 {width:65%;}
.in60 {width:60%;}
.in55 {width:55%;}
.in50 {width:50%;}
.in45 {width:45%;}
.in40 {width:40%;}
.in35 {width:35%;}
.in30 {width:30%;}
.in25 {width:25%;}
.in20 {width:20%;}

.textarea {height:100px !important;}
.Btextarea500H {min-height:300px;}
.Btextarea200H {min-height:200px;}

.InCom {padding:4px; border:1px solid #dfdfdf;}



.sInput01 {width:90%; padding:5px 10px; border:1px solid #ddd;}
.sInput02 {width:80%; padding:5px 10px; border:1px solid #ddd;}
.sInput03 {width:70%; padding:5px 10px; border:1px solid #ddd;}
.sInput04 {width:60%; padding:5px 10px; border:1px solid #ddd;}
.sInput05 {width:50%; padding:5px 10px; border:1px solid #ddd;}
.sInput06 {width:40%; padding:5px 10px; border:1px solid #ddd;}
.sInput07 {width:30%; padding:5px 10px; border:1px solid #ddd;}
.sInput08 {width:20%; padding:5px 10px; border:1px solid #ddd;}
.sInput09 {width:10%; padding:5px 10px; border:1px solid #ddd;}
.sInput10 {width:5%; padding:5px 10px; border:1px solid #ddd;}

.sInput01.type {width:45%}
.sInput02.type {width:40%}

@media all and (min-width:1200px){

	.sInput01 {width:90% !important; padding:8px;}
	.sInput02 {width:80% !important; padding:8px;}
	.sInput03 {width:70%; padding:8px;}
	.sInput04 {width:60%; padding:8px;}
	.sInput05 {width:50%; padding:8px;}
	.sInput06 {width:40%; padding:8px;}
	.sInput07 {width:30%; padding:8px;}
	.sInput08 {width:20%; padding:8px;}
	.sInput09 {width:10%; padding:8px;}
	.sInput10 {width:5%; padding:8px;}

}

input[type="text"]:active,
input[type="text"]:focus,
input[type="number"]:active,
input[type="number"]:focus{border:1px solid #333 !important;}

.bList input[type="text"],
.bList input[type="password"],
.bList input[type="button"],
button, select {
	width:auto;
	border:1px solid #ddd;
	/*height:40px; line-height:40px;*/
	padding:0 5px;
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	-o-oppearance:none;
	border-radius:0;
	font-size:1.0em;
	vertical-align:middle;
	color:#777;
	}
.search-select {	
	height:40px; line-height:40px; 
	display:inline-block;
	padding:0 35px 0 5px; padding /*\**/: 0 0 0 5px\9; 
	background:#fff url("../images/cont/sel_arr.png") no-repeat center right; 
	}
.search-input {
	border:1px solid #ddd; 
	height:40px; line-height:40px; 
	display:inline-block;
	font-size:15px;
	box-sizing:border-box;
	}
select::-ms-expand {display: none;} 




@media all and (min-width:1200px){

	.search-select {height:45px; line-height:45px;}

}


.NewsList {}
.NewsList ul li {position:relative;padding:20px 10px;border-bottom:1px solid #ddd;}
.NewsList ul li:hover {text-decoration:underline;}
.NewsList ul li a {position:absolute;top:0;left:0;width:100%;height:100%;z-index:8;}
.NewsList ul li dl dt {font-weight:500;position:relative;padding:0 0 0 20px;
	text-overflow: ellipsis;width:80%;-o-text-overflow: ellipsis;overflow: hidden;white-space: nowrap;word-wrap: normal !important; 
}
.NewsList ul li dl dt strong.new {
	border-radius:20px;position:absolute;top:50%;left:0;margin-top:-10px;
	background:#ef5d60 ;color:#fff;display:inline-block;text-align:center;
	font-size:12px;width:20px;height:20px;line-height:20px;
	vertical-align:middle;
	}

.NewsList ul li dl dd.txt {padding:10px 0;
	display: -webkit-box;
	height: 3.6em;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.NewsList ul li dl dd.year {color:#777;font-size:14px;padding:10px 0 0 0}

.root_daum_roughmap .wrap_btn_zoom .btn_zoom_in {height:auto !important;}
.root_daum_roughmap .wrap_btn_zoom button {height:auto !important;}

.photoA_List {overflow:hidden; margin-left:-1%;}
.photoA_List div {position: relative;float:left; width:48%; height:260px; border:1px solid #e5e5e5; box-sizing:border-box;margin:0 0 1% 1%;}

.photoA_List div .check {position:absolute; bottom:30px !important; right:30px !important; z-index:9;}
.NewsList p.check {position:relative;z-index:9;}

.SkinA_View td p.check {position:relative;}
.check label {display:inline-block; width:100%;}
.check input[type="checkbox"] {opacity: 0;position: absolute;	top: 0;left: 0;cursor: pointer; }
.check span {position: relative;padding:5px 0 2px 25px;}
.check span:before {
	content: '';
	display: inline-block;
	height: 18px;position: absolute;	top: 5px;left: 0;
	width: 18px;
	border-radius: 10%;
	text-align:center;margin-right:2px;transition:all 0.3s ease-out;
  }

.check input + span:before {color: #fff;border: 2px solid #dfdfdf;background:#dfdfdf url('../images/cont/mark.png') center no-repeat}
.check input:checked + span:before {color: #fff;background-color:#00afe3 ;border: 2px solid #00afe3 ;}



	.photoA_List div .img {overflow:hidden; display:block; height:180px;text-align:center;    position: relative;}
	.photoA_List div .img img {width:100%; width:100%; height:180px;height:auto;
		-webkit-transition: -webkit-transform 0.3s ease 0s; 
		-moz-transition: -moz-transform 0.3s ease 0s; 
		-o-transition: -o-transform 0.3s ease 0s; 
		transition: transform 0.3s ease 0s; 
		-webkit-transform: scale3d(1, 1, 1); 
		transform: scale3d(1, 1, 1); 
	}
	.photoA_List div .img img:hover {
		-webkit-transform: scale3d(1.1, 1.1, 1.1); 
		transform: scale3d(1.1, 1.1, 1.1); 
	}

.photoA_List  div .text {display:block; padding:5px 10px;}
	.photoA_List div .text .t1 {display:block; padding:5px 0 10px 0;font-size:16px;text-overflow: ellipsis;width:80%;-o-text-overflow: ellipsis;overflow: hidden;white-space: nowrap;word-wrap: normal !important; }
	.photoA_List div .text .t2 {display:block; font-size:14px; color:#797979;padding:10px 0;text-overflow: ellipsis;width:80%;-o-text-overflow: ellipsis;overflow: hidden;white-space: nowrap;word-wrap: normal !important; }
	.photoA_List div .text .t3 {display:block; font-size:14px;}

@media all and (min-width:768px){
	.photoA_List div {width:32.3%;height:320px; }
		.photoA_List div .img {height:220px;}
		.photoA_List div .img img {height:220px;}
}

@media all and (min-width:1200px){
	.photoA_List div {width:24%; height:450px;}
		.photoA_List div .img {height:320px;}
		.photoA_List div .img img {height:320px;}
		.photoA_List div .text .t1 {font-size:18px;}
		.photoA_List div .text .t2 {font-size:16px; }
}

.EBook_List {margin:0 auto; overflow:hidden;}
.EBook_List  li {float:left; width:100%; margin:.666em 0; text-align:center;}
	.EBook_List  li .img {overflow:hidden; display:block; padding:20px; background:#fdfdfd; border:1px solid #d9d9d9;}
	.EBook_List  li .img img{border:1px solid #d9d9d9; height:300px;}
.EBook_List  li .text {display:block; padding-top:10px;}
	.EBook_List  li .text .t1 {display:block; font-size:16px;}
	.EBook_List  li .text .t2 {display:block; font-size:13px;}


.ebookV {text-align: center;} /* 모바일 감춤 */
.ebookV a {
	padding:5px 50px; 
	background:#727272 url('') no-repeat; 
    color: #fff !important; border:1px solid #777; 
    font-weight: 700; border-radius:20px;}

.ebookP {text-align:center;}

.Borad_Aui {}
/*	.Borad_Aui img{max-width: 50%; max-height: 100%; vertical-align:middle; -ms-interpolation-mode:bicubic;}*/

.Borad_Aui .IMG img{
		width: 80%; 
		max-height: 100%; 
		vertical-align:middle; 
		/*border:0; */
		-ms-interpolation-mode:bicubic; 
	}

	.ebook_Aui .IMG {width:100%; text-align:center;}
	.ebook_Aui .IMG img{
		max-width: 100%; 
		max-height: 100%; 
		vertical-align:middle; 
		/*border:0; */
		-ms-interpolation-mode:bicubic; 
	}

@media all and (min-width:768px){/* medium */
	.EBook_List li {width:49%; margin:0 2px; height:auto; padding-bottom:10px;}
	.EBook_List li .img {overflow:hidden; display:block; padding:20px 0; background:#fdfdfd; border:1px solid #d9d9d9;}
	.EBook_List li .img img{border:1px solid #d9d9d9; height:300px;}

} /* /(min-width:768px) */

@media all and (min-width:1200px){/* xlarge (1200+24*2+16) ◇◆◇◆◇◆◇◆◇◆ */
	.infoTop {color:#333; font-size:12px; display:block;}
	.SkinA_List .Non{display:table-cell;}

	.Borad_Aui {text-align:left;}
	.Borad_Aui img{max-width: 100%; max-height: 100%; vertical-align:middle; /*border:0; */	-ms-interpolation-mode:bicubic; }
	
	.Borad_Aui .IMG img{
		width: 80%; 
		max-height: 100%; 
		vertical-align:middle; 
		/*border:0; */
		-ms-interpolation-mode:bicubic; 
	}

}

/* 언론홍보 관련뉴스 학술자료 카테고리 */

.list_ct {display:inline-block;font-size:14px;text-align:center;padding:1px 10px;}
.list_ct.cate_1 {border:1px solid #ff7054;background:#ffede9;}
.list_ct.cate_2 {border:1px solid #20b3a0;background:#e8f8f6;}
.list_ct.cate_3 {border:1px solid #555;background:#f7f7f7;}
.list_ct.cate_4 {border:1px solid #f7b72d;background:#faf5ea;}
.list_ct.cate_5 {border:1px solid #946f4b;background:#ede6e0;}
.list_ct.cate_6 {border:1px solid #be4aef;background:#f4ebf7;}


@media all and (min-width:1200px){
	.list_ct {display:block;padding:0;}
}


/* 섬네일 */
.listTH {overflow:hidden;text-align:center;margin:0 auto;}
.listTH li {display:inline-block;position:relative;text-align:center; }
	.listTH li a {letter-spacing:-0.5px;display:block; vertical-align:middle; color:#333; border:1px solid #ddd;padding:10px 5px 10px 35px;}
	.listTH .i01 a {background:url('../images/cont/th01.png') 10px 50% no-repeat;}
	.listTH .i02 a {background:url('../images/cont/th02.png') 10px 50% no-repeat;}

	.listTH .i01.ov a {background:#f2eefa url('../images/cont/th01_ov.png') 10px 50% no-repeat;border:1px solid #866bb6}
	.listTH .i02.ov a {background:#f2eefa url('../images/cont/th02_ov.png') 10px 50% no-repeat;border:1px solid #866bb6}
	
	.listTH .i03 a,
	.listTH .i04 a {padding:10px;}
	.listTH .i03.ov a,
	.listTH .i04.ov a {background:#f2eefa;border:1px solid #866bb6}



.textAnimationLeft {
    padding:5px 20px;
    text-align: center;
    overflow: hidden;
    background: #474E51;
    position: relative;
    line-height: 30px;
    color: #fff;
}

.textAnimationLeft::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-100%);
    background: #5778F3;
    transition: transform .25s ease-in-out;
}

.textAnimationLeft:hover::before {transform: translateX(0);}
.textAnimationLeft span {position: relative;z-index: 1;display: block;}
.textAnimationLeft:hover span {animation: animButtonSpan 0.4s;}

@keyframes animButtonSpan {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    35% {
        transform: translateX(20px);
        opacity: 0;
    }

    50.001% {
        transform: translateX(-20px);
    }

    60% {
        transform: translateX(0px);
    }

}