/********************************************************
■ LAYOUT PLUS
********************************************************/
.page-w-max {max-width: 1920px;	margin: 0 auto;}
.align-w-center{margin: 0 auto}
.align-h-center{margin: auto 0}
.sub-position{z-index:3; position:relative}
.mobile-ac .card {margin-bottom:5px}
.secptpb{padding-top: 320px; padding-bottom: 0}
.secptlist{margin-top: -100px; padding-bottom: 0}
.subtop-py h2{letter-spacing: -1px; font-weight: 300; color: #000}
.subtop-py {background-color: #fff !important}
.bg-infobox{background-color:rgba(3,128,173,0.85)}
/********************************************************
■ VIDEO : 메인비디오
********************************************************/
.video-overlay {position: absolute;	width: 100%;	height: 100%;	top: 0;	left: 0;	z-index: 5;	background: transparent url('/site/images/grid.png') repeat;	-webkit-backface-visibility: hidden;}
.slider-text-middle-main {display: table;	height: 100%;	width: 100%}
.slider-typography {width: 100%;	height: 100%;	position: absolute;	right: 0;	left: 0;	z-index: 9;}
.slider-text-middle {display: table-cell;	vertical-align: middle;}
.slider-text-bottom {display: table-cell;	vertical-align: bottom;}
.slider-text-top {display: table-cell;	vertical-align: top;}
.videoWrapper {position: relative;  padding-bottom: 41.67%; /* 16:9 */  height: 0;}
.videoWrapper iframe {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;}

/********************************************************
■ SVG 
********************************************************/
.svg-t { margin-top:-36px; margin-right: 6px;  width: 24px; }
@media only screen and (max-width: 768px) {
.svg-t { margin-top:-24px; margin-right: 3px;  width: 12px; }
}
.svg-w { vertical-align:-20px; width: 48px; }
@media only screen and (max-width: 768px) {
.svg-w{ vertical-align:1px; width: 16px; }
}
/********************************************************
■ sidebtnbar : 사이드버튼
********************************************************/
.sidebtnbar .btn-group-vertical{width: 110px}
.sidebtnbar {width: auto; height: auto;  display:block; position:fixed; top: 21%;/*172*/ right: -10px; z-index: 999}
.sidebtnbar-btn{text-align: center; line-height: 22px; height: 100px}
.sidebtnbar-btn-call {text-align: center; line-height: 22px; height: 140px}
.sidebtnbar-btn-call i{font-size: 22px;margin-right: 15px; margin-left: -5px}
.sidebtnbar-btn-call span{font-size: 22px; text-align: right; }
.sidebtnbar-btn-call div {margin-left: -10px}
.sidebtnbar-btn img{width: 38px; margin-left: -8px}
.sidebtnbar-btn i{font-size: 26px}
.sidebtnbar-txt{font-size: 15px; margin-left: -7.5px}
@media only screen and (min-width : 960px) and (max-width : 1366px) {
	.sidebtnbar{display: none}		
}
@media only screen and (max-width: 768px) {
	.sidebtnbar{display: none}	
}
/********************************************************
■ quick form : 빠른상담 추가
********************************************************/
.quick_form{border-radius: 0 50px 50px 0 !important; height: 45px !important}
.quick_form_text{border-radius: 25px !important; min-height: 100px !important; }
.input-group-prepend i {font-size: 20px; vertical-align: middle; margin: 7px 0 5px 5px}

/********************************************************
■ grid : 그리드이미지
********************************************************/
.grid-i-text{color: #fff; font-size: 20px; font-weight: 200; margin-top: 0}
.grid-i-img{width:128px }
.bg-m-onfoff{background-color: none}
@media only screen and (min-width: 769px) and (max-width: 1440px) {
.grid-i-text{color: #fff; font-size: 16px; font-weight: 200; margin-top: 0;padding-bottom: 20px}
.grid-i-img{width:96px }
.bg-m-onfoff{background-color: none}	
}
@media only screen and (max-width: 768px) {
.grid-i-text{color: #fff; font-size: 13px; font-weight: 200; margin-top: 3px; padding-bottom: 10px}
.grid-i-img{width:48px }	
.bg-m-onfoff{background-color:#CDCDCD}	
}

/**=====================
■ TABLE : 커스텀테이블
==========================**/
.table-cs .table-con div table { width: 100%; margin-top: 20px;}
.table-cs table { border-collapse: collapse; border-spacing: 0px;}
.table-cs .table-con div table tr:first-child { background-color: #414a5e !important;    border-top: 1px solid #27395d;    border-bottom: px solid #27395d;	    color: #fff;}
.table-cs .table-con div table tr {    height: 46px;}
.table-cs .table-con div table tr th {    border-right: 1px solid #595c6b;    border-bottom: 1px solid #595c6b;    color: inherit;    font-size: 17px;}
.table-cs .table-con div table tr td:last-child {    border-right: none !important;}
.table-cs .table-con div table tr td:first-child {       text-align: center;}/*padding-left: 3%; */
.table-cs .table-con div table tr td {    border-right: 1px solid #e5e5e5;    border-bottom: 1px solid #e5e5e5;    font-size: 16px; padding: 5px}
.table-cs .table-con div table tbody tr:nth-of-type(odd) {    background-color: rgba(0,0,0,.02);}
.table-cs .table-con div table tbody tr:last-child  {	border-bottom:2px solid #414a5e}
.table-comment{font-size:14px; margin-top:10px; color:#777; word-break:keep-all}
@media only screen and (max-width: 768px) {
.table-cs .table-con div table tr th {    font-size: 13px;}
.table-cs .table-con div table tr td {    font-size: 11px;}
.table-comment{font-size:12px; }	
}

/**=====================
■ TABLE : 커스텀테이블
==========================**/
.table-cs2 .table-con2 div table { width: 100%; margin-top: 20px;}
.table-cs2 table { border-collapse: collapse; border-spacing: 0px;}
.table-cs2 .table-con2 div table tr:first-child { background-color: #414a5e !important;    border-top: 1px solid #27395d;    border-bottom: px solid #27395d;	    color: #fff;}
.table-cs2 .table-con2 div table tr {    height: 46px;}
.table-cs2 .table-con2 div table tr th {    border-right: 1px solid #595c6b;    border-bottom: 1px solid #595c6b;    color: inherit;    font-size: 17px;}
.table-cs2 .table-con2 div table tr td:last-child {    border-right: none !important;}
.table-cs2 .table-con2 div table tr td:first-child {    }
.table-cs2 .table-con2 div table tr td {    border-right: 1px solid #e5e5e5;    border-bottom: 1px solid #e5e5e5;    font-size: 16px;}
.table-cs2 .table-con2 div table tbody tr:nth-of-type(odd) {    background-color: rgba(0,0,0,.02);}
.table-cs2 .table-con2 div table tbody tr:last-child  {	border-bottom:2px solid #414a5e}
.table-comment{font-size:14px; margin-top:10px; color:#777; word-break:keep-all}
@media only screen and (max-width: 768px) {
.table-cs2 .table-con2 div table tr th {    font-size: 13px;}
.table-cs2 .table-con2 div table tr td {    font-size: 12px;}
.table-comment{font-size:12px; }	
}


/********************************************************
■ 서브메뉴 
********************************************************/
#sub_nav {padding-top:8px; padding-bottom:8px;}
#sub_nav ol{display:table; width:100%; table-layout:fixed; width:100%; margin:0px; min-width:300px; border-collapse: collapse;text-align: center; margin: 0 auto;}
#sub_nav li a{font-size:20px; color: #b4ddff; padding:0 15px; font-weight: 300; letter-spacing: -1.5px;font-family: 'Noto Sans KR', sans-serif !important; /*NEXON Lv2 Gothic  letter-spacing: -0.25px;*/}
#sub_nav li a:hover{ color: #fff;}
#sub_nav .activefixed a{ color: #fff;}

.sub_nav_up{margin-top: 0; padding: 5px 0}
@media only screen and (min-width : 1280px) {
.sub-nav-left, .sub-nav-right{display: none}
}
@media only screen and (min-width: 769px) and (max-width: 1440px) {
.sub-nav-left{margin-left: 20px; margin-top: 16.5px}
.sub-nav-right{margin-right: 20px; margin-top: 16.5px}
}
@media only screen and (max-width: 768px) {
#sub_nav li a{font-size: 14px; padding:0; margin: 0; padding-right: 15px; letter-spacing: -0.5px; font-family: AppleSDGothicNeo-Regular, "Malgun Gothic", "맑은 고딕" !important;}
.sub-nav-left{margin-left: 5px; margin-top: 12px}
.sub-nav-right{margin-right: 5px; margin-top: 12px}	
.sub_nav_up{margin-top: 0; padding: 0;}	
}
/**=====================
  ■ CUSTOM HOVER EFFECT : 개별호버
==========================**/
.xzoom {
transition:all 0.25s ease-in-out;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.xzoom:hover {
-webkit-transition: all .2s ease;
transition: all .2s ease;
-webkit-transform: scale(1.02) translate3d(0, 0, 0);
-ms-transform: scale(1.02) translate3d(0, 0, 0);
transform: scale(1.02) translate3d(0, 0, 0);
}
.xzoom2 {
transition:all 0.25s ease-in-out;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.xzoom2:hover {
-webkit-transition: all .2s ease;
transition: all .2s ease;
-webkit-transform: scale(0.98) translate3d(0, 0, 0);
-ms-transform: scale(0.98) translate3d(0, 0, 0);
transform: scale(0.98) translate3d(0, 0, 0);
}
.xup {
transition:all 0.25s ease-in-out;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.xup:hover {
-webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.35); 
-moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.35); 
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.35);
-webkit-transition: all .2s ease;
transition: all .2s ease;
-webkit-transform: translate3d(0,-3px,0);
-ms-transform: translate3d(0,-3px,0);
transform: translate3d(0,-3px,0);
}
.xup2 {
transition:all 0.25s ease-in-out;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.xup2:hover {
-webkit-transition: all .2s ease;
transition: all .2s ease;
-webkit-transform: translate3d(0,-3px,0);
-ms-transform: translate3d(0,-3px,0);
transform: translate3d(0,-3px,0);
}
.xzoom3 {
transition:all 0.25s ease-in-out;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.xzoom3:hover {
-webkit-transition: all .2s ease;
transition: all .2s ease;
-webkit-transform: scale(0.94) translate3d(0, 0, 0);
-ms-transform: scale(0.94) translate3d(0, 0, 0);
transform: scale(0.94) translate3d(0, 0, 0);
}
.xup3 {
transition:all 0.25s ease-in-out;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.xup3:hover {
-webkit-transition: all .2s ease;
transition: all .2s ease;
-webkit-transform: translate3d(-5px,-5px,0);
-ms-transform: translate3d(-5px,-5px,0);
transform: translate3d(-5px,-5px,0);
}
.xsdw {
transition:all 0.25s ease-in-out;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.xsdw:hover {
-webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.8); 
-moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.8); 
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.8);
-webkit-transition: all .2s ease;
transition: all .2s ease;
-webkit-transform: scale(1.01) translate3d(0, 0, 0);
-ms-transform: scale(1.01) translate3d(0, 0, 0);
transform: scale(1.01) translate3d(0, 0, 0);
}

/**=====================
  ■ ORGAN : 조직도
==========================**/
@media only screen and (min-width : 769px) {
.organ,.organ li{position:relative;width:100%;text-align:center; overflow:hidden;z-index:1!important;}
.organ li {min-height:80px;}
.organ li .top{display:inline-block;width:240px;padding:7px 0;text-align:center;background:#1565c0 ; color:#fff; font-size: 16px; font-weight: normal;box-shadow: 0 .42rem 1.22rem rgba(23, 32, 42, .12) !important}
.organ li .top2{display:inline-block;width:240px;padding:7px 0;text-align:center;background:#344957; color:#fff; font-size: 16px; font-weight: normal;box-shadow: 0 .42rem 1.22rem rgba(23, 32, 42, .12) !important}
.organ li .top3{display:inline-block;width:240px;padding:7px 0;text-align:center;background:#4db6ac; color:#fff; font-size: 16px; font-weight: normal;box-shadow: 0 .42rem 1.22rem rgba(23, 32, 42, .12) !important}
.organ li .top4{display:inline-block;width:240px;padding:7px 0;text-align:center;background:#8d0000; color:#fff; font-size: 16px; font-weight: normal;box-shadow: 0 .42rem 1.22rem rgba(23, 32, 42, .12) !important}
.organ li .top5{display:inline-block;width:240px;padding:7px 0;text-align:center;background:#f1f1f1; font-size: 16px; font-weight: normal}	
.organ li.depth2{display:table;border-spacing: 50px 15px;}
.organ li.depth2 dl{display:table-cell;width:240px; font-size: 15px; font-weight: normal;}
.organ li.depth2 dt{background:#757575; color:#fff;padding:7px 0; font-size: 16px; font-weight: normal;box-shadow: 0 .42rem 1.22rem rgba(23, 32, 42, .12) !important}
.organ li.depth2 dd{padding:7px 0; background:#fff; border:1px solid #ddd; margin-top:10px; font-size: 15px; font-weight: normal;box-shadow: 0 .42rem 1.22rem rgba(23, 32, 42, .12) !important}
.organ .l-hor{position:absolute; z-index:0!important; display: block !important;top:165px; left:21%; width:61%; height:1px!important; border:0!important; background:#ddd;!important}
.organ .l01{position:absolute; z-index:0!important; display: block !important;top:25px; left:52%; width:1px; height:73%!important; border:0!important; background:#ddd;!important}
.organ .l02{position:absolute; z-index:0!important; display: block !important;top:165px; left:21%; width:1px; height:50%!important; border:0!important; background:#ddd;!important}
.organ .l03{position:absolute; z-index:0!important; display: block !important;top:165px; left:82%; width:1px; height:45%!important; border:0!important; background:#ddd;!important}
.organ .l04{position:absolute; z-index:0!important; display: block !important;top:25px; left:50%; width:1px; height:500%!important; border:0!important; background:#ddd;!important}	
}
@media only screen and (max-width: 768px) {
.organ,.organ li{position:relative;width:100%;text-align:center; overflow:hidden;z-index:1!important; margin-left: -10px}
.organ li {min-height:60px;}
.organ li .top{display:inline-block;width:80%;padding:5px 0;text-align:center;background:#1565c0; color:#fff; font-size: 15px; font-weight: normal;box-shadow: 0 .42rem 1.22rem rgba(23, 32, 42, .12) !important}
.organ li .top2{display:inline-block;width:80%;padding:5px 0;text-align:center;background:#344957; color:#fff; font-size: 15px; font-weight: normal;box-shadow: 0 .42rem 1.22rem rgba(23, 32, 42, .12) !important}
.organ li .top3{display:inline-block;width:80%;padding:5px 0;text-align:center;background:#4db6ac; color:#fff; font-size: 15px; font-weight: normal;box-shadow: 0 .42rem 1.22rem rgba(23, 32, 42, .12) !important}	
.organ li .top4{display:inline-block;width:80%;padding:5px 0;text-align:center;background:#757575; color:#fff; font-size: 15px; font-weight: normal;box-shadow: 0 .42rem 1.22rem rgba(23, 32, 42, .12) !important}	
.organ li .top5{display:inline-block;width:80%;padding:5px 0;text-align:center;background:#fff; font-size: 15px; font-weight: normal;border: 1px solid #eee; box-shadow: 0 .42rem 1.22rem rgba(23, 32, 42, .12) !important}	
.organ li.depth2{display:table;border-spacing: 50px 15px;}
.organ li.depth2 dl{display:table-cell;width:80%; font-size: 15px; font-weight: normal}
.organ li.depth2 dt{background:#757575; color:#fff;padding:5px 0; font-size: 15px; font-weight: normal;box-shadow: 0 .42rem 1.22rem rgba(23, 32, 42, .12) !important}
.organ li.depth2 dd{padding:5px 0; background:#fff; border:1px solid #ddd; margin-top:10px; font-size: 15px; font-weight: normal;box-shadow: 0 .42rem 1.22rem rgba(23, 32, 42, .12) !important}
.organ .l-hor{position:absolute; z-index:0!important; display: block !important; top:85px; left:18%; width:64%; height:1px; border:0; background:#ddd;}
.organ .l01{position:absolute; z-index:0!important; display: block !important; top:25px; left:50%; width:1px; height:73%; border:0; background:#ddd;}
.organ .l02{position:absolute; z-index:0!important; display: block !important; top:85px; left:18%; width:1px; height:70%; border:0; background:#ddd;}
.organ .l03{position:absolute; z-index:0!important; display: block !important; top:85px; left:82%; width:1px; height:60%; border:0; background:#ddd;}
.organ .l04{position:absolute; z-index:0!important; display: block !important; top:15px; left:54%; width:1px; height:92%; border:0; background:#ddd;}	
}


/********************************************************
■ table : 커스텀테이블
********************************************************/

table.standard-table {
	font-size: 16px;
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin-bottom: 15px;
	-webkit-box-shadow: 0px 1px 1px 0px rgba(180, 180, 180, 0.1);
	box-shadow: 0px 1px 1px 0px rgba(180, 180, 180, 0.1);
	overflow-x: scroll;
}
table.standard-table .trh {

	border: 1px solid #dddddd;
	font-size: 24px;
	width: 100%;
	padding: 15px 15px;
	background-color: #f9f9f9;
	color: #232323;
	border: 1px solid #dddddd;
	border-bottom: none;
}
table.standard-table th {

	border: 1px solid #dddddd;
	text-align: center;
	vertical-align: middle;
	border-right: none;
	background-color: #27354A;
	padding: 15px 15px;
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
}
table.standard-table td:last-child {
	border-right: 1px solid #ddd;
}
table.standard-table th:last-child {
	border-right: 1px solid #ddd;
}
table.standard-table td {

	font-size: 16px;
	padding: 15px 15px;
	background-color: #fff;
	color: #222;
	text-align: center;
	border: #e0e0e0 1px solid;
	border-top: none;
	border-right: none;
	font-weight: normal;
	line-height: 18px;
}
table.standard-table tr:hover td {
	background-color: #fafafa;
}



/**=====================
  ■ BG : 애니메이션 백그라운드
==========================**/
/* 그라데이션BG*/
.gra-bg {
  background: linear-gradient(-45deg, #00838b, #0061bb, #00b9d4, #2273b2);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}
@keyframes gradient {
  0% { background-position: 0% 50%;  }
  50% { background-position: 100% 50%;  }
  100% { background-position: 0% 50%;  }
}
/* 큐브BG*/
.anibg2 {  background: linear-gradient(132deg, #FC415A, #591BC5, #212335);  background-size: 100% 100%;  animation: Gradient 15s ease infinite;  position: relative;  width: 100%;  overflow: hidden;  padding:0; margin:0px;}
.cube {	margin-top: -150px;  position: absolute;  width: 10px;  height: 10px;  border: solid 1px #D7D4E4;  transform-origin: top left;  transform: scale(0) rotate(0deg) translate(-50%, -50%);  animation: cube 12s ase-in forwards infinite;}
.cube:nth-child(2n) {  border-color: #FFF ;}
.cube:nth-child(2) {  animation-delay: 2s;  left: 25vw;  top: 40vh;}
.cube:nth-child(3) {  animation-delay: 4s;  left: 75vw;  top: 50vh;}
.cube:nth-child(4) {  animation-delay: 6s;  left: 90vw;  top: 10vh;}
.cube:nth-child(5) {  animation-delay: 8s;  left: 10vw;  top: 85vh;}
.cube:nth-child(6) {  animation-delay: 10s;  left: 50vw;  top: 10vh;}
@keyframes Gradient {
	0% {    background-position: 0% 50%;  }
	50% {    background-position: 100% 50%;  }
  100% {    background-position: 0% 50%;  }
}
@keyframes cube {
  from {    transform: scale(0) rotate(0deg) translate(-50%, -50%);    opacity: 1;  }
  to {    transform: scale(20) rotate(960deg) translate(-50%, -50%);    opacity: 0;  }
}


/* 웨이브BG*/
.waveheader {  position:relative;  text-align:center;  background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);  color:white;}
.inner-waveheaderheader {  height:0;  width:100%;  margin: 0;  padding: 0;}

.flex { /*Flexbox for containers*/  display: flex;  justify-content: center;  align-items: center;  text-align: center;}
.waves {  position:relative;  width: 100%;  height:10vh;  margin-bottom:-7px; /*Fix for safari gap*/  min-height:50px;  max-height:70px;}
.content {  position:relative;  height:20vh;  text-align:center;  background-color: white;}
.parallax > use {  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;}
.parallax > use:nth-child(1) {  animation-delay: -2s;  animation-duration: 7s;}
.parallax > use:nth-child(2) {  animation-delay: -3s;  animation-duration: 10s;}
.parallax > use:nth-child(3) {  animation-delay: -4s;  animation-duration: 13s;}
.parallax > use:nth-child(4) {  animation-delay: -5s;  animation-duration: 20s;}
@keyframes move-forever 
{  0% {   transform: translate3d(-90px,0,0);  }
	100% {     transform: translate3d(85px,0,0);  }
}
@media (max-width: 768px) 
{
  .waves {    height:40px;   min-height:40px;  }
  .content {    height:30vh;  } 
}
.shape-auto { shape-rendering: auto; }



/* 웨이브BG2*/
.ocean {
  height: 50px; /* change the height of the waves here */
  width: 100%;
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-x: hidden;
  margin-top: -35px
}
.wave {transform: rotate(0deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88.7'%3E%3Cpath d='M800 56.9c-155.5 0-204.9-50-405.5-49.9-200 0-250 49.9-394.5 49.9v31.8h800v-.2-31.6z' fill='%23fff'/%3E%3C/svg%3E");
  position: absolute;
  width: 200%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  opacity:1;
}
.wave:nth-of-type(2) {
  bottom: 0;
  animation: wave 70s -1s linear reverse infinite;
  opacity: 0.5;
}
.wave:nth-of-type(3) {
  bottom: 0;
  animation: wave 100s -2s linear infinite;
  opacity: 0.5;
}
.wave:nth-of-type(4) {
  bottom: 0;
  animation: wave 130s -3s linear infinite;
  opacity: 0.5;
}	
@keyframes wave {
    0% {transform: translateX(0);}
    10% {transform: translateX(-25%);}
    20% {transform: translateX(-35%);}
    30% {transform: translateX(-45%);}	
}


/**=====================
  ■ BEAT BTN : 비트버튼
==========================**/
.button-beat {  min-width: auto;  min-height: 15px;  font-size: 15px;  font-weight: normal;  color: #fff;  background: #283987;  border: none;  transition: all 0.3s ease-in-out 0s;  cursor: pointer;  outline: none; position: relative;  padding: 6px 20px 5px 20px;  outline: none;  }
.button-beat:hover, .button-beat:focus {  color: #fff;  transform: translateY(-2px);  outline: none;	}
button::before {  content: '';  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  opacity: 0;  transition: all .3s ease-in-out 0s;  outline: none;	}
button:hover::before, button:focus::before {  opacity: 1;}
.beatring button::after {  content: '';  width: 10px; height: 10px;  border-radius: 100%;  border: 3px solid #ffe700;  position: absolute;  z-index: -1;  top: 50%;  left: 50%;  transform: translate(-50%, -50%); animation: ring 1.5s infinite;}

.button-beat2 {  min-width: auto;  min-height: 15px;  font-size: 15px;  font-weight: normal;  color: #343434;  background: #fdfdfd;  border: 1px solid #ddd;  transition: all 0.3s ease-in-out 0s;  cursor: pointer; outline: none;  position: relative;  padding: 6px 20px 5px 20px;  }
.button-beat2:hover, .button-beat:focus {  color: #343434;  transform: translateY(-2px);  outline: none;	}
.beatring2 button::after {  content: '';  width: 10px; height: 10px;  border-radius: 100%;  border: 3px solid #00FFCB;  position: absolute;  z-index: -1;  top: 50%;  left: 50%;  transform: translate(-50%, -50%); animation: ring 1.5s infinite;}

button::before {  content: '';  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  opacity: 0;  transition: all .3s ease-in-out 0s;  outline: none;	}
button:hover::after, button:focus::after {  animation: none;  display: none;}

@keyframes ring {
  0% {    width: 30px;    height: 30px;    opacity: 1;  }
  100% {    width: 150px;    height: 150px;    opacity: 0;  }
}