@charset "UTF-8";

#container {padding-bottom:0;}
.wrapper {width:100%;}

/* ani_left (gnb/option) */
.ani_left {display:flex; position:fixed; z-index:10; top:0; left:0; width:668px; height:100%; padding-top:80px;}

.ani_left .btn_wrap {display:none;}

.ani_left .gnb_box {width:35.928%; padding-top:24px; background:#fff;}
.ani_left .gnb_box .gnb li a {display:block; width:100%; padding:16px 30px 17px 30px;}
.ani_left .gnb_box .gnb > li > a {color:#222; font-size:18px; font-weight:700;}
.ani_left .gnb_box .gnb > li:hover > a {color:#674fdc;}
.ani_left .gnb_box .gnb > li:hover > a::after {content:''; display:inline-block; width:6px; height:6px; margin-left:2px; vertical-align:top; border-radius:10px; background:#8fef51;}
.ani_left .gnb_box .gnb > li.on > a {color:#674fdc;}
.ani_left .gnb_box .gnb > li.on > a::after {content:''; display:inline-block; width:6px; height:6px; margin-left:2px; vertical-align:top; border-radius:10px; background:#8fef51;}
.ani_left .gnb_box .gnb .dep {display:none; height:0; transition:height 0.5s ease;}
.ani_left .gnb_box .gnb .dep.on {display:block; height:100%;}
.ani_left .gnb_box .gnb .dep li {border-top:1px solid #f6f6f6;}
.ani_left .gnb_box .gnb .dep li:last-child {border-bottom:1px solid #f6f6f6;}
.ani_left .gnb_box .gnb .dep li a {color:#838383; font-size:15px; font-weight:500;}
.ani_left .gnb_box .gnb .dep li:hover a {width:100%; color:#222; background:#f6f6f6;}
.ani_left .gnb_box .gnb .dep li.on a {width:100%; color:#222; background:#f6f6f6;}

.ani_left .option {width:64.071%; padding:40px 34px; border-left:1px solid #eee; border-right:1px solid #eee; background:#fff;}
.ani_left .option form > div {display:flex; justify-content:space-between;}
.ani_left .option form > div + div {margin-top:40px;}

.ani_left .option form .txt_box p {color:#222; font-weight:700;}
.ani_left .option form .txt_box span {color:#888; font-size:14px; font-weight:400; word-break:keep-all;}
.ani_left .option form input[type="text"] {width:198px; height:48px; padding:0 16px; color:#666; font-size:16px; font-weight:600; line-height:48px; border:1px solid #e5e7ea; border-radius:8px;}

.ani_left .option form input[type="text"]:read-only {border-color:#f6f6f6; background-color:#f6f6f6;}

.ani_left .option form label {display:block;}
.ani_left .option form .step_wrap label {margin-bottom:12px;}
.ani_left .option form .count_wrap label {margin-top:12px;}

.ani_left .option form input[type='text'] {cursor:text;}

.ani_left .option form label input[type="checkbox"] {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}
.ani_left .option form label input[type="checkbox"] + i {display:inline-block; width:18px; height:18px; vertical-align:middle; border-radius:4px; background:url(../../images/ico/ico_ani_checkbox.svg) no-repeat 0 0; background-size:100%;}
.ani_left .option form label input[type="checkbox"]:checked + i {background:url(../../images/ico/ico_ani_checkbox_on.svg) no-repeat 0 0;}
.ani_left .option form label > span {margin-left:2px; color:#838383; font-weight:600;}

.ani_left .option form .select_box {display:inline-block; position:relative;}
.ani_left .option form .select_box > a {display:block; width:198px; height:48px; padding:12px 16px 11px 16px; color:#666; font-weight:600; border:1px solid #e5e7ea; border-radius:6px; cursor:pointer; background:url(../../images/ico/ico_ani_select_down.svg) no-repeat right 16px center; background-size:20px 20px;}
.ani_left .option form .select_box ul {display:none; position:absolute; z-index:1; top:54px; left:0; width:100%; border:1px solid #eee; border-radius:8px; box-shadow:4px 4px 20px rgb(0 0 0 / 10%); background:#fff}
.ani_left .option form .select_box ul.on {display:block;}
.ani_left .option form .select_box ul li a {display:block; padding:14px 16px; color:#563bdd; font-size:16px; font-weight:600;}
.ani_left .option form .select_box ul li:hover a,
.ani_left .option form .select_box ul li.on a {color:#838383;}

.ani_left .option form .select_box.inp_timefunc.on > a {border:#f6f6f6; background-color:#f6f6f6;}
.ani_left .option form .select_box.inp_timefunc.on > a + ul {display:none;}

.ani_left .option form .btn_use {margin-top:70px;}
.ani_left .option form .btn_use > p {width:24px; height:24px; text-indent:-9999px; cursor:pointer; box-shadow:2px 2px 10px rgba(0,0,0,0.05); border-radius:50px; background:url(../../images/ico/ico_ani_question.svg) no-repeat; background-size:cover;}
.ani_left .option form .btn_use > label {display:flex; align-items:center;}
.ani_left .option form .btn_use > label input {padding:0; text-indent:-9999px; border:0; background:transparent;}
.ani_left .option form .btn_use > label i {display:inline-block; width:24px; height:24px; margin-right:4px; background:url(../../images/ico/ico_ani_reset.svg) no-repeat; background-size:cover;}
.ani_left .option form .btn_use > label span {color:#444; font-size:14px; font-weight:600;}

.ani_left .btn_close {display:none; position:absolute; z-index:1; top:28px; right:14px; width:24px; height:24px; text-indent:-9999px; background:url(../../images/ico/ico_ani_close.svg) no-repeat; background-size:contain;}

/* ani_right (btn/animation) */
.ani_right {position:relative; left:668px; width:calc(100% - 668px); height:calc(100vh - 80px);} 

.ani_right .btn_wrap {width:100%; padding:40px 0 0 35px; text-align:left;}
.ani_right .btn_wrap > button {width:103px; height:38px; padding:10px 24px; font-size:14px; font-weight:600; border-radius:4px;}
.ani_right .btn_wrap > .btn_code {background:#563add;}
.ani_right .btn_wrap > .btn_code a {color:#fff;}
.ani_right .btn_wrap > .btn_replay {margin-left:4px; color:#444; border:1px solid #ddd; background:#fff;}

.ani_right .pre_wrap {position:absolute; z-index:95; top:calc(50% - 35px); left:50%; transform:translate(-50%,-50%);}
.ani_right .pre_wrap ul li a {display:none; width:150px; height:150px; text-indent:-9999px; cursor:default;}
.ani_right .pre_wrap ul li.on a {display:block;}
.ani_right .pre_wrap ul li.on .pre_sitero {width:240px; height:72px; background:url(../../images/pic/pic_ani_sitero.png) no-repeat; background-size:contain;}
.ani_right .pre_wrap ul li.on .pre_circle {background:url(../../images/pic/pic_ani_circle.png) no-repeat; background-size:contain;}
.ani_right .pre_wrap ul li.on .pre_heart {background:url(../../images/pic/pic_ani_heart.png) no-repeat; background-size:contain;}
.ani_right .pre_wrap ul li.on .pre_star {background:url(../../images/pic/pic_ani_star.png) no-repeat; background-size:contain;}

.animate {animation:0.5s ease normal both;}

.ani_right .shape_list {display:flex; position:absolute; z-index:1; left:50%; bottom:90px; transform:translateX(-50%); align-items:center;}
.ani_right .shape_list li + li {margin-left:6px;}

.ani_right .shape_list li a {display:inline-block; width:48px; height:48px; text-indent:-9999px; background-size:contain;}
.ani_right .shape_list li .shape_sitero {background:url(../../images/ico/ico_ani_sitero.svg) no-repeat;}
.ani_right .shape_list li .shape_circle {background:url(../../images/ico/ico_ani_circle.svg) no-repeat;}
.ani_right .shape_list li .shape_heart {background:url(../../images/ico/ico_ani_heart.svg) no-repeat;}
.ani_right .shape_list li .shape_star {background:url(../../images/ico/ico_ani_star.svg) no-repeat;}
.ani_right .shape_list li:hover .shape_sitero,
.ani_right .shape_list li.on .shape_sitero {background:url(../../images/ico/ico_ani_sitero_on.svg) no-repeat;}
.ani_right .shape_list li:hover .shape_circle,
.ani_right .shape_list li.on .shape_circle {background:url(../../images/ico/ico_ani_circle_on.svg) no-repeat;}
.ani_right .shape_list li:hover .shape_heart,
.ani_right .shape_list li.on .shape_heart {background:url(../../images/ico/ico_ani_heart_on.svg) no-repeat;}
.ani_right .shape_list li:hover .shape_star,
.ani_right .shape_list li.on .shape_star {background:url(../../images/ico/ico_ani_star_on.svg) no-repeat;}

/* modal (use/css) */
.modal_use {display:none; position:absolute; z-index:99; top:174px; left:calc(668px + 35px);}
.modal_use .modal_box {position:relative; width:633px; height:642px; padding:34px; border-radius:8px; background:#fff;}
.modal_use .modal_box > p {color:#222; font-weight:800;}

.modal_use .modal_box .circle_list {margin:16px 0 24px;}
.modal_use .modal_box .circle_list li {position:relative; padding-left:12px; color:#666; font-size:14px; font-weight:500; line-height:1.6; word-break:keep-all;}
.modal_use .modal_box .circle_list li::before {content:''; position:absolute; z-index:1; top:9px; left:0; width:3.5px; height:3.5px; border-radius:10px; background:#666;}

.modal_use .modal_box table tr {height:42px; text-align:left; border:1px solid #eee;}
.modal_use .modal_box table tr th {width:140px; padding-left:34px; color:#2400cf; font-size:14px; font-weight:600; border-top:1px solid #eee; border-left:1px solid #eee; background:#f5f3fb;}
.modal_use .modal_box table tr td {padding-left:34px; color:#666; font-size:14px; font-weight:500; word-break:keep-all; border-top:1px solid #eee; border-left:1px solid #eee; border-right:1px solid #eee;}
.modal_use .modal_box table tr:first-child th {border-bottom:1px solid #eee; border-radius:4px 0 0 0;}
.modal_use .modal_box table tr:last-child th {border-radius:0 0 0 4px;}
.modal_use .modal_box table tr:first-child td {border-radius:0 4px 0 0;}
.modal_use .modal_box table tr:last-child td {border-bottom:1px solid #eee; border-radius:0 0 4px 0;}

.modal_css {display:none; position:absolute; z-index:99; top:164px; left:calc(668px + 35px);}
.modal_css .modal_box {position:relative; width:674px; height:347px; padding:34px; border-radius:8px; background:#fff;}
.modal_css .modal_box > [class^="modal"] + [class^="modal"] {margin-top:40px;}
.modal_css .modal_box > [class^="modal"] a {position:relative; display:inline-block; margin-bottom:24px; color:#222; font-size:18px; font-weight:700; line-height:1; cursor:pointer;}
.modal_css .modal_box > [class^="modal"] a::after {content:''; position:absolute; top:50%; right:-24px; transform:translateY(-50%); width:15px; height:18px; background:url(../../images/ico/ico_copy.svg) no-repeat;}
.modal_css .modal_box > [class^="modal"] textarea {height:49px; padding:15px 24px; color:#240468; font-weight:400; overflow-y:hidden; border:0; border-radius:6px; background:#f5f3fd;}
.modal_css .modal_box > [class^="modal"] + [class^="modal"] textarea {height:115px; overflow-y:auto;}

.modal_use .modal_box .btn_close,
.modal_css .modal_box .btn_close {position:absolute; top:18px; right:16px; width:24px; height:24px; text-indent:-9999px; background:url(../../images/ico/ico_ani_close.svg) no-repeat; background-size:cover;}

/* ************************************************************************************** */

@media all and (max-width:1400px){
	/* ani_left (gnb/option) */
	.ani_left .gnb_box {width:30%;}
	.ani_left .option {width:60%;}

	/* ani_right */
	.ani_right {left:600px; width:calc(100% - 600px);}

	/* modal (use/css) */
	.modal_use, .modal_css  {left:inherit; right:24px;}
}

@media all and (max-width:1199px){
	/* ani_left (gnb/option) */
	.ani_left {position:relative; z-index:9999; top:inherit; left:inherit; width:100%; padding-top:0;}

	.ani_left .btn_wrap {display:flex; justify-content:space-between; position:fixed; z-index:1; top:96px; left:0; width:100%; padding:0 24px;}
	.ani_left .btn_wrap a {display:block; width:40px; height:38px; text-indent:-9999px; background-repeat:no-repeat; background-size:contain;}
	.ani_left .btn_wrap .btn_menu {background-image:url(../../images/ico/ico_ani_menu_btn.svg);}
	.ani_left .btn_wrap .btn_option {background-image:url(../../images/ico/ico_ani_option_btn.svg);}

	.ani_left .gnb_box, .ani_left .option {position:absolute; z-index:1; top:-80px; width:calc(100% + 48px); height:100vh; transition:all 0.5s ease;}
	.ani_left .gnb_box {right:calc(-100% - 50px); margin-right:-24px; padding-top:54px;}
	.ani_left .option {left:calc(-100% - 50px); margin-left:-24px; padding-top:70px;}

	.ani_left .btn_close {display:block;}

	/* ani_right (btn/animation) */
	.ani_right {top:0; left:0; width:100%; text-align:center;}
	.ani_right .ani_mo {position:fixed; z-index:1; bottom:calc(50% - 80px - 20px); left:0; width:100%;}

	.ani_right .btn_wrap {position:fixed; z-index:1; left:0; bottom:70px; padding:0; text-align:center;}

	.ani_right .pre_wrap {display:flex; position:static; left:inherit; top:inherit; transform:translate(0); justify-content:center;}
	.ani_right .shape_list {position:static; left:inherit; bottom:inherit; transform:translate(0); margin-top:44px; justify-content:center;}

	/* modal (use/css) */
	.modal_use {z-index:9999; top:0; left:0; width:100%; height:100vh;}
	.modal_use .modal_box {width:100%; height:100%;}
	.modal_use .modal_box table tr th {padding-left:0; text-align:center;}

	.modal_css {z-index:9999; top:0; left:0; width:100%; height:100vh;}
	.modal_css .modal_box {width:100%; height:100%;}

	.modal_use .modal_box .btn_close, 
	.modal_css .modal_box .btn_close {top:34px; right:34px;}
}

@media all and (max-width:640px){
	.tool_con.pt0 {padding-top:20px !important;}

	/* ani_left (gnb/option) */
	.ani_left .gnb_box {padding-bottom:54px; overflow-y:auto;}
	.ani_left .option {padding:70px 24px; overflow-y:auto;}

	.ani_left .btn_wrap {top:76px;}

	/* ani_right (btn/animation) */
	.ani_right .ani_mo {bottom:calc(50% - 60px - 20px);}

	.ani_right .pre_wrap ul li a {width:110px; height:110px;}
	.ani_right .pre_wrap ul li.on .pre_sitero {width:200px; height:60px;}

	/* modal (use/css) */
	.modal_use .modal_box {padding:34px 24px;}

	.modal_use .modal_box .circle_list {margin:24px 0;}

	.modal_use .modal_box table {padding-bottom:34px; background:#fff;}
	.modal_use .modal_box table tr th {width:102px;}
	.modal_use .modal_box table tr td {padding:0 12px;}

	.modal_use .modal_box .btn_close, .modal_css .modal_box .btn_close {top:30px; right:20px;}

	.modal_css .modal_box {padding:34px 24px;}
	.modal_css .modal_box > [class^="modal"] textarea {height:auto; overflow-y:auto;}
	.modal_css .modal_box > [class^="modal"] + [class^="modal"] textarea {height:auto; overflow-y:auto;}
}

@media all and (max-width:480px){
	/* ani_left (gnb/option) */
	.ani_left .option form > div + div {margin-top:34px;}
	.ani_left .option form input[type="text"] {width:190px; font-size:15px;}
	.ani_left .option form label > span {font-size:15px;}

	.ani_left .option form .txt_box p {font-size:15px;}
	.ani_left .option form .txt_box span {font-size:13px;}

	.ani_left .option form .select_box > a {width:190px; padding:15px 16px; font-size:15px;}

	.ani_left .option form .btn_use > label span {font-size:13px;}

	/* modal (use/css) */
	.modal_use .modal_box table tr th {width:82px; font-size:12px;}
	.modal_use .modal_box table tr td {font-size:12px;}

	.modal_css .modal_box > [class^="modal"] textarea {font-size:14px;}
}

@media all and (max-width:374px){
	/* ani_left (gnb/option) */
	.ani_left .option form input[type="text"] {width:180px;}
	.ani_left .option form .select_box > a {width:180px;}
}

/* ************************************************************************************** */

/* fade */
.FadeIn {animation-name:FadeIn;}
.FadeOut {animation-name:FadeOut;}
.FadeDown {animation-name:FadeDown;}
.FadeUp {animation-name:FadeUp;}
.FadeLeft {animation-name:FadeLeft;}
.FadeRight {animation-name:FadeRight;}

@keyframes FadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@keyframes FadeOut {
    0% {opacity:1;}
    100% {opacity:0;}
}

@keyframes FadeUp {
    0% {opacity:0; transform:translateY(0);}
    100% {opacity:1; transform:translateY(-200px);}
}

@keyframes FadeDown {
    0% {opacity:0; transform:translateY(0);}
    100% {opacity:1; transform:translateY(200px);}
}

@keyframes FadeLeft {
    0% {opacity:0; transform:translateX(0);}
    100% {opacity:1; transform:translateX(-200px);}
}

@keyframes FadeRight {
    0% {opacity:0; transform:translateX(0);}
    100% {opacity:1; transform:translateX(200px);}
}

/* slide */
.SlideDown {animation-name:SlideDown;}
.SlideUp {animation-name:SlideUp;}
.SlideLeft {animation-name:SlideLeft;}
.SlideRight {animation-name:SlideRight;}
.SlideUpLeft {animation-name:SlideUpLeft;}
.SlideDownLeft {animation-name:SlideDownLeft;}
.SlideUpRight {animation-name:SlideUpRight;}
.SlideDownRight {animation-name:SlideDownRight;}

@keyframes SlideDown {
    0% {transform:translateY(0);}
    100% {transform:translateY(200px);}
}

@keyframes SlideUp {
    0% {transform:translateY(0);}
    100% {transform:translateY(-200px);}
}

@keyframes SlideLeft {
    0% {transform:translateX(0);}
    100% {transform:translateX(-200px);}
}

@keyframes SlideRight {
    0% {transform:translatex(0);}
    100% {transform:translateX(200px);}
}

@keyframes SlideUpLeft {
    0% {transform:translate(0);}
    100% {transform:translate(-200px, -200px);}
}

@keyframes SlideDownLeft {
    0% {transform:translate(0);}
    100% {transform:translate(-200px, 200px);}
}

@keyframes SlideUpRight {
    0% {transform:translate(0);}
    100% {transform:translate(200px, -200px);}
}

@keyframes SlideDownRight {
    0% {transform:translate(0);}
    100% {transform:translate(200px, 200px);}
}

/* Bounce */
.Bounce {animation-name:Bounce;}
.BounceDown {animation-name:BounceDown;}
.BounceUp {animation-name:BounceUp;}
.BounceLeft {animation-name:BounceLeft;}
.BounceRight {animation-name:BounceRight;}

@keyframes Bounce {
    0%, 20%, 53%, 80%, 100% {transform:translate3d(0,0,0);}
    40%, 43% {transform:translate3d(0, -30px, 0);}
    70% {transform:translate3d(0, -15px, 0);}
    90% {transform:translate3d(0,-4px,0);}
}

@keyframes BounceDown {
    0% {transform:translate3d(0,-800px,0);}
    60% {transform:translate3d(0,35px,0);}
    75% {transform:translate3d(0, -15px, 0);}
    90% {transform:translate3d(0, 5px, 0);}
}

@keyframes BounceUp {
    0% {transform:translate3d(0,800px,0);}
    60% {transform:translate3d(0,35px,0);}
    75% {transform:translate3d(0, -15px, 0);}
    90% {transform:translate3d(0, 5px, 0);}
}

@keyframes BounceLeft {
    0% {transform:translate3d(-800px,0,0);}
    60% {transform:translate3d(0,35px,0);}
    75% {transform:translate3d(0, -15px, 0);}
    90% {transform:translate3d(0, 5px, 0);}
}

@keyframes BounceRight {
    0% {transform:translate3d(800px,0,0);}
    60% {transform:translate3d(0,35px,0);}
    75% {transform:translate3d(0, -15px, 0);}
    90% {transform:translate3d(0, 5px, 0);}
}

/* Filp */
.FlipTopBottom {animation-name:FlipTopBottom;}
.FlipLeftRight {animation-name:FlipLeftRight;}
.FlipTop {animation-name:FlipTop;}
.FlipBottom {animation-name:FlipBottom;}
.FlipLeft {animation-name:FlipLeft;}
.FlipRight {animation-name:FlipRight;}

@keyframes FlipTopBottom {
    0% {transform:rotateX(0);}
    100% {transform:rotateX(180deg);}
}

@keyframes FlipLeftRight {
    0% {transform:rotateY(0);}
    100% {transform:rotateY(180deg);}
}

@keyframes FlipTop {
    0% {transform:rotateX(0); transform-origin:top right;}
    100% {transform:rotateX(180deg); transform-origin:top right;}
}

@keyframes FlipBottom {
    0% {transform:rotateX(0); transform-origin:bottom left;}
    100% {transform:rotateX(180deg); transform-origin:bottom left;}
}

@keyframes FlipLeft {
    0% {transform:rotateY(0); transform-origin:left top;}
    100% {transform:rotateY(180deg); transform-origin:left top;}
}

@keyframes FlipRight {
    0% {transform:rotateY(0); transform-origin:right bottom;}
    100% {transform:rotateY(180deg); transform-origin:right bottom;}
}

/* Rotate */
.RotateLeft {animation-name:RotateLeft;}
.RotateLeftTop {animation-name:RotateLeftTop;}
.RotateLeftBottom {animation-name:RotateLeftBottom;}
.RotateRight {animation-name:RotateRight;}
.RotateRightTop {animation-name:RotateRightTop;}
.RotateRightBottom {animation-name:RotateRightBottom;}

@keyframes RotateLeft {
    0% {transform:rotate(0deg);}
    100% {transform:rotate(-360deg);}
}

@keyframes RotateLeftTop {
    0% {transform:rotate(0deg); transform-origin:left top;}
    100% {transform:rotate(-360deg); transform-origin:left top;}
}

@keyframes RotateLeftBottom {
    0% {transform:rotate(0deg); transform-origin:left bottom;}
    100% {transform:rotate(-360deg); transform-origin:left bottom;}
}

@keyframes RotateRight {
    0% {transform:rotate(0deg);}
    100% {transform:rotate(360deg);}
}

@keyframes RotateRightTop {
    0% {transform:rotate(0deg); transform-origin:right top;}
    100% {transform:rotate(360deg); transform-origin:right top;}
}

@keyframes RotateRightBottom {
    0% {transform:rotate(0deg); transform-origin:right bottom;}
    100% {transform:rotate(360deg); transform-origin:right bottom;}
}

/* Scale */
.Scale {animation-name:Scale;}
.ScaleDown {animation-name:ScaleDown;}
.ScaleUp {animation-name:ScaleUp;}
.ScaleLeft {animation-name:ScaleLeft;}
.ScaleRight {animation-name:ScaleRight;}

@keyframes Scale {
    0% {transform:scale(1);}
    100% {transform:scale(1.4);}
}

@keyframes ScaleDown {
    0% {transform:scale(1); transform-origin:top center;}
    100% {transform:scale(1.4); transform-origin:top center;}
}

@keyframes ScaleUp {
    0% {transform:scale(1); transform-origin:bottom center;}
    100% {transform:scale(1.4); transform-origin:bottom center;}
}

@keyframes ScaleLeft {
    0% {transform:scale(1); transform-origin:right center;}
    100% {transform:scale(1.4); transform-origin:right center;}
}

@keyframes ScaleRight {
    0% {transform:scale(1); transform-origin:left center;}
    100% {transform:scale(1.4); transform-origin:left center;}
}

/* Widht / Height */
.WidthLeft {animation-name:WidthLeft;}
.WidthRight {animation-name:WidthRight;}
.WidthCenter {animation-name:WidthCenter;}
.HeightUp {animation-name:HeightUp;}
.HeightDown {animation-name:HeightDown;}
.HeightCenter {animation-name:HeightCenter;}

@keyframes WidthLeft {
    0% {transform:scaleX(0); transform-origin:left;}
    100% {transform:scaleX(1); transform-origin:left;}
}

@keyframes WidthRight {
    0% {transform:scaleX(0); transform-origin:right;}
    100% {transform:scaleX(1); transform-origin:right;}
}

@keyframes WidthCenter {
    0% {transform:scaleX(0);}
    100% {transform:scaleX(1);}
}

@keyframes HeightUp {
    0% {transform:scaleY(0); transform-origin:bottom;} 
    100% {transform:scaleY(1); transform-origin:bottom;}
}

@keyframes HeightDown {
    0% {transform:scaleY(0); transform-origin:top;}
    100% {transform:scaleY(1); transform-origin:top;}
}

@keyframes HeightCenter {
    0% {transform:scaleY(0);}
    100% {transform:scaleY(1);}
}

/* Other */
.Flash {animation-name:Flash;}
.Shake {animation-name:Shake;}
.ShakeUpDown {animation-name:ShakeUpDown;}
.Jelly {animation-name:Jelly;}
.Nod {animation-name:Nod;}

@keyframes Flash {
    0%, 50%, 100% {opacity: 1;}
    25%, 75% {opacity:0;}
}

@keyframes Shake {
    0%,100% {transform:translateX(0);}
    10%,30%,50%,70% {transform:translateX(-10px);}
    20%,40%,60% {transform:translateX(10px);}
    80% {transform:translateX(8px);}
    90% {transform:translateX(-8px);}
}

@keyframes ShakeUpDown {
    0%,100% {transform:translateY(0);}
    10%,30%,50%,70% {transform:translateY(-10px);}
    20%,40%,60% {transform:translateY(10px);}
    80% {transform:translateY(8px);}
    90% {transform:translateY(-8px);}
}

@keyframes Jelly {
    0% {transform:scale3d(1, 1, 1);}
    30% {transform:scale3d(1.25, 0.75, 1);}
    40% {transform:scale3d(0.75, 1.25, 1);}
    50% {transform:scale3d(1.15, 0.85, 1);}
    65% {transform:scale3d(0.95, 1.05, 1);}
    75% {transform:scale3d(1.05, 0.95, 1);}
    100% {transform:scale3d(1, 1, 1);}
}

@keyframes Nod {
    0% {transform:rotate(0);}
	50% {transform:rotate(5deg);}
	100% {transform:rotate(0);}
}