/* btn */
.button {
	display: inline-block;
	position: relative;
	vertical-align: middle;
	height: 36px;
	padding: 0 20px;
	border-radius: 20px;
	border-width: 3px;
	border-style: solid;
	font-weight: 600;
	text-align: center;
	font-size: 16px;
	line-height: 30px;
	background: none;
	transition: background .3s, color .3s;
}
/* btn-type01 */
.button.button-type01 {
	min-width: 160px;
}

/* btn-type02 */
.button.button-type02 {
	height: 40px;
	border-radius: 25px;
	border-width: 1px;
	font-weight: normal;
	line-height: 38px;
}

/* btn-type03 */
.button.button-type03 {
	height: auto;
	line-height: normal;
	padding: 0;
	border-radius: 0;
	border-width: 0;
	font-weight: 700;
}
.button.button-type03.color-type02 {
	color: #817dc5;
	background: none;
}
.button.button-type03.color-type03 {
	color: #ea657b;
	background: none;
}
.button.button-type03.color-type04 {
	color: #01baef;
	background: none;
}

/* btn-type04 */
.button.button-type04 {
	height: 36px;
	line-height: 34px;
	border-width: 1px;
}

/* color */
.button.color-type02 {
	border-color: #817dc5;
	color: #fff;
	background-color: #817dc5;
}
.button.color-type03 {
	border-color: #ea657b;
	color: #fff;
	background-color: #ea657b;
}
.button.color-type04 {
	border-color: #01baef;
	color: #fff;
	background-color: #01baef;
}
.button.color-type04:hover {
	border-color: #00c6ff;
    background-color: #00c6ff;
}
.button.color-type07 {
	border-color: #0188ef;
	color: #fff;
	background-color: #0188ef;
}
.button.color-type08 {
	color: #0188ef;
	border-color: #0188ef;
}
.button.color-type09 {
	color: #0188ef;
	border-color: #fff;
	background-color: #fff;
}
.button.color-type10 {
	color: #01baef;
	border-color: #01baef;
}
.button.color-type10:hover {
	color: #fff;
    border-color: #0188ef;
    background-color: #0188ef;
}
.button.color-type11 {
	border-color: #564FCF;
	color: #564FCF;
}
.button.color-type11:hover {
	border-color: #6C64F5;
    background-color: #6C64F5;
    color: #fff;
}
.button.color-type12 {
	border-color: #EA657B;
    background-color: #EA657B;
	color: #fff;
}
.button.color-type12:hover {
    border-color: #EA657B;
    background-color: #fff;
    color: #EA657B;
}


/* add-arrow */
.button.add-arrow {
	padding: 0 35px 0 15px;
	text-align: left;
}
.add-arrow:after {
	content: "";
	position: absolute;
	top: 50%;
	right: 15px;
	width: 0;
	height: 0;
	border-width: 5px 0 5px 7px;
	border-style: solid;
	transform: translateY(-50%);
	border-color: transparent transparent transparent #000;
}
.color-type04.add-arrow:after {
	border-color: transparent transparent transparent #01baef;
}
.color-type02.add-arrow:after,
.color-type03.add-arrow:after,
.color-type04.add-arrow:after,
.color-type07.add-arrow:after {
	border-color: transparent transparent transparent #fff;
}
.button.button-type03.add-arrow {
	padding: 0 15px 0 0;
}
.button.button-type03.add-arrow:after {
	right: 0;
}
.button-type03.color-type02.add-arrow:after {
	border-color: transparent transparent transparent #817dc5;
}
.button-type03.color-type03.add-arrow:after {
	border-color: transparent transparent transparent #ea657b;
}
.button-type03.color-type04.add-arrow:after {
	border-color: transparent transparent transparent #01baef;
}
.color-type08.add-arrow:after,
.color-type09.add-arrow:after {
	border-color: transparent transparent transparent #0188ef;
}

/* image button */
/* slide prev, next button in video_library.html */
.button-arrow-prev,
.button-arrow-prev2,
.button-arrow-next,
.button-arrow-next2{
	position: absolute;
	width: 36px;
	height: 36px;
	background: #707070;
	box-shadow: 0 3px 6px #000;
	border-radius: 50%;
}
.button-arrow-prev:after,
.button-arrow-prev2:after,
.button-arrow-next:after,
.button-arrow-next2:after{
	content: "";
    position: absolute;
	top: 50%;
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
}
.button-arrow-prev:after,
.button-arrow-prev2:after{
	left: 15px;
    transform: translateY(-50%) rotate(-45deg);
}
.button-arrow-next:after,
.button-arrow-next2:after{
	right: 15px;
    transform: translateY(-50%) rotate(135deg);
}

/* play button in video_library.html */
.button-play {
	position: relative;
	width: 56px;
    height: 56px;
    background-color: #01baef;
    border-radius: 50%;
}
.button-play:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    left: 19px;
    border-style: solid;
    border-width: 14px 0 14px 24px;
    border-color: transparent transparent transparent #fff;
    transform: translateY(-50%);
}
.button-down {
	display: block;
	width: 56px;
	height: 56px;
	background: url('/images/video_library/ico_btn_down.png') 0 0 no-repeat;
	background-size: 56px;
}