.screen_1_1_1 {background-image:url(../img/img_1_1_1.png);}
.screen_1_2_1 {background-image:url(../img/img_1_2_1.png);}
.screen_1_2_2 {background-image:url(../img/img_1_2_2.png);}
.screen_1_2_2_chk {background-image:url(../img/img_1_2_2_chk.png);}
.screen_1_2_3 {background-image:url(../img/img_1_2_3.png);}
.screen_1_3_1 {background-image:url(../img/img_1_3_1.png);}
.screen_1_3_2 {background-image:url(../img/img_1_3_2.png);}
.screen_1_3_3 {background-image:url(../img/img_1_3_3.png);}
.screen_1_4_1 {background-image:url(../img/img_1_4_1_1.png);}
.screen_1_4_1a {background-image:url(../img/img_1_4_1_2.png);}
.screen_1_4_2 {background-image:url(../img/img_1_4_2.png);}
.screen_1_4_3 {background-image:url(../img/img_1_4_3.png);}
.screen_1_5_1 {background-image:url(../img/img_1_5_1.png);}
.screen_1_5_2_1 {background-image:url(../img/img_1_5_2_1.png);}
.screen_1_5_3 {background-image:url(../img/img_1_5_3.png);}
.screen_1_5_4 {background-image:url(../img/img_1_5_4.png);}
.screen_1_6_1 {background-image:url(../img/img_1_6_1.png);}
.screen_1_6_1a {background-image:url(../img/img_1_6_1a.png);}
.screen_1_6_2 {background-image:url(../img/img_1_6_2.png);}
.screen_1_6_2a {background-image:url(../img/img_1_6_2a.png);}
.screen_1_6_3 {background-image:url(../img/img_1_6_3.png);}
.screen_1_6_4 {background-image:url(../img/img_1_6_4.png);}
.screen_1_7_1 {background-image:url(../img/img_1_t1_1.png);}
.screen_1_t2_1 {background-image:url(../img/img_1_t2_1.png);}
.screen_1_t2_2 {background-image:url(../img/img_1_t2_2.png);}
.screen_1_t2_3 {background-image:url(../img/img_1_t2_3.png);}
.screen_1_t2_4 {background-image:url(../img/img_1_t2_4.png);}

.item_first {display:none;}
/********************************************/
/*											*/
/*					STEP 01					*/
/*											*/
/********************************************/

/******** ITEM 1 - 1 - 1 **********/
.item_1_1_1_line_box {
	position:absolute;
	left:35px;
	right:35px;
	top:82px;
	height:48px;
	z-index:9;
	background-image:url(../img/img_1_1_1_z.png);
	background-repeat:no-repeat;
	background-size:100%;
	
	/* animation */
	animation-duration:4s;
	animation-delay:0.01s;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
}
.section li.on .item_1_1_1_line_box {
	animation-name:item_1_1_1_line_box;
}
@keyframes item_1_1_1_line_box {
	0%   {opacity:1;top:82px;}
	5%   {opacity:1;top:82px;}
	50%  {transform:scale(1,1);top:82px;}
	55%  {transform:scale(1.3,1.3); top:95px;}
	100% {transform:scale(1.3,1.3); top:95px; opacity:1}
}
.item_1_1_1_line1,
.item_1_1_1_line2,
.item_1_1_1_line3,
.item_1_1_1_line4 {
	position:absolute;
	background-color:#09add4;
	
	/* animation */
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
	animation-duration:4s;
	animation-delay:0.5s;
}
.item_1_1_1_line1 {
	top:0px;
	left:0px;
	width:0%;
	height:2px;
}
.section li.on .item_1_1_1_line1 {
	animation-name:item_1_1_1_line1;
}
@keyframes item_1_1_1_line1 {
	0%   {width:0%;}
	/* 1 */
	8%   {width:100%;}
	/* 2 */
	16%  {width:100%;}
	/* 3 */
	24%  {width:100%;}
	/* 4 */
	32%  {width:100%;}
	/* zoom */
	40%  {width:100%;}
	/* blink */
	100% {width:100%;}
}
.item_1_1_1_line2 {
	top:0px;
	right:0px;
	width:2px;
	height:0%;
}
.section li.on .item_1_1_1_line2 {
	animation-name:item_1_1_1_line2;
}
@keyframes item_1_1_1_line2 {
	0%   {height:0%;}
	/* 1 */
	8%   {height:0%;}
	/* 2 */
	16%  {height:100%;}
	/* 3 */
	24%  {height:100%;}
	/* 4 */
	32%  {height:100%;}
	/* zoom */
	40%  {height:100%;}
	/* blink */
	100% {height:100%;}
}
.item_1_1_1_line3 {
	bottom:0px;
	right:0px;
	width:0%;
	height:2px;
}
.section li.on .item_1_1_1_line3 {
	animation-name:item_1_1_1_line3;
}
@keyframes item_1_1_1_line3 {
	0%   {width:0%;}
	/* 1 */
	8%   {width:0%;}
	/* 2 */
	16%  {width:0%;}
	/* 3 */
	24%  {width:100%;}
	/* 4 */
	32%  {width:100%;}
	/* zoom */
	40%  {width:100%;}
	/* blink */
	100% {width:100%;}
}
.item_1_1_1_line4 {
	bottom:0px;
	left:0px;
	width:2px;
	height:0%;
}
.section li.on .item_1_1_1_line4 {
	animation-name:item_1_1_1_line4;
}
@keyframes item_1_1_1_line4 {
	0%   {height:0%;}
	/* 1 */
	8%   {height:0%;}
	/* 2 */
	16%  {height:0%;}
	/* 3 */
	24%  {height:0%;}
	/* 4 */
	32%  {height:100%;}
	/* zoom */
	40%  {height:100%;}
	/* blink */
	100% {height:100%;}
}

/********************************************/
/*											*/
/*					STEP 02					*/
/*											*/
/********************************************/

/******** ITEM 1 - 2 - 1 **********/
.item_1_2_1_line_box {
	position:absolute;
	right:calc(50% - 93px);
	top:231px;
	width:187px;
	height:27px;
	z-index:100;
	background-image:url(../img/img_1_2_1_z.png);
	background-repeat:no-repeat;
	background-size:100%;
}
.section li.on .item_1_2_1_line_box {
	/* animation */
	animation-name:item_1_2_1_line_box;
	animation-duration:4s;
	animation-delay:0.01s;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
}
@keyframes item_1_2_1_line_box {
	0% {transform:scale(1,1);}
	32% {transform:scale(1,1);}
	40% {transform:scale(1.3,1.3);}
	100% {transform:scale(1.3,1.3);}
}

.item_1_2_1_line1,
.item_1_2_1_line2,
.item_1_2_1_line3,
.item_1_2_1_line4 {
	position:absolute;
	background-color:#09add4;
	
	/* animation */
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
	animation-duration:4s;
	animation-delay:0.01s;
}
.item_1_2_1_line1 {
	top:0px;
	left:0px;
	width:0%;
	height:2px;
}
.section li.on .item_1_2_1_line1 {
	animation-name:item_1_2_1_line1;
}
@keyframes item_1_2_1_line1 {
	0%   {width:0%;}
	/* 1 */
	8%   {width:100%;}
	/* 2 */
	16%  {width:100%;}
	/* 3 */
	24%  {width:100%;}
	/* 4 */
	32%  {width:100%;}
	/* zoom */
	40%  {width:100%;}
	/* blink */
	100% {width:100%;}
}

.item_1_2_1_line2 {
	top:0px;
	right:0px;
	width:2px;
	height:0%;
}
.section li.on .item_1_2_1_line2 {
	animation-name:item_1_2_1_line2;
}
@keyframes item_1_2_1_line2 {
	0%   {height:0%;}
	/* 1 */
	8%   {height:0%;}
	/* 2 */
	16%  {height:100%;}
	/* 3 */
	24%  {height:100%;}
	/* 4 */
	32%  {height:100%;}
	/* zoom */
	40%  {height:100%;}
	/* blink */
	100% {height:100%;}
}
.item_1_2_1_line3 {
	bottom:0px;
	right:0px;
	width:0%;
	height:2px;
}
.section li.on .item_1_2_1_line3 {
	animation-name:item_1_2_1_line3;
}
@keyframes item_1_2_1_line3 {
	0%   {width:0%;}
	/* 1 */
	8%   {width:0%;}
	/* 2 */
	16%  {width:0%;}
	/* 3 */
	24%  {width:100%;}
	/* 4 */
	32%  {width:100%;}
	/* zoom */
	40%  {width:100%;}
	/* blink */
	100% {width:100%;}
}
.item_1_2_1_line4 {
	bottom:0px;
	left:0px;
	width:2px;
	height:0%;
}
.section li.on .item_1_2_1_line4 {
	animation-name:item_1_2_1_line4;
}
@keyframes item_1_2_1_line4 {
	0%   {height:0%;}
	/* 1 */
	8%   {height:0%;}
	/* 2 */
	16%  {height:0%;}
	/* 3 */
	24%  {height:0%;}
	/* 4 */
	32%  {height:100%;}
	/* zoom */
	40%  {height:100%;}
	/* blink */
	100% {height:100%;}
}

/******** ITEM 1 - 2 - 2 **********/
.screen_1_2_2 {
	background-position:0px 0px;
	
	/* animation */
	animation-duration:1s;
	animation-delay:0.5s;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
}
.section li.on .screen_1_2_2 {
	animation-name:screen_1_2_2;
}
@keyframes screen_1_2_2 {
	0%  {background-position:0px 0px;}
	100% {background-position:0px -108px;}
}

.screen_1_2_2_chk {
	background-position:0px -108px;
	opacity:0;
	
	/* animation */
	animation-duration:2s;
	animation-delay:2s;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
}
.section li.on .screen_1_2_2_chk {
	animation-name:screen_1_2_2_chk;
}
@keyframes screen_1_2_2_chk {
	0%  {background-position:0px -108px; opacity:0;}
	20%  {background-position:0px -108px; opacity:1;}
	30%  {background-position:0px -108px; opacity:1;}
	100% {background-position:0px -145px; opacity:1;}
}

.item_1_2_2_line_box {
	position:absolute;
	left:41px;
	top:195px;
	width:194px;
	height:35px;
	z-index:9;
	background-image:url(../img/img_1_2_2_z.png);
	background-repeat:no-repeat;
	background-size:100%;
	opacity:0;
	
	/* animation */
	animation-duration:4s;
	animation-delay:4.5s;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
}
.section li.on .item_1_2_2_line_box {
	animation-name:item_1_2_2_line_box;
}
@keyframes item_1_2_2_line_box {
	0%  {transform:scale(1,1); opacity:0;}
	5%  {transform:scale(1,1); opacity:1;}
	32%  {transform:scale(1,1); opacity:1;}
	40%  {transform:scale(1.2,1.2); opacity:1;}
	100% {transform:scale(1.2,1.2); opacity:1;}
}

.item_1_2_2_line1,
.item_1_2_2_line2,
.item_1_2_2_line3,
.item_1_2_2_line4 {
	position:absolute;
	background-color:#09add4;
	
	/* animation */
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
	animation-duration:4s;
	animation-delay:4.5s;
}
.item_1_2_2_line1 {
	top:0px;
	left:0px;
	width:100%;
	height:2px;
}
.section li.on .item_1_2_2_line1 {
	animation-name:item_1_2_2_line1;
}
@keyframes item_1_2_2_line1 {
	0%   {width:0%;}
	/* 1 */
	8%   {width:100%;}
	/* 2 */
	16%  {width:100%;}
	/* 3 */
	24%  {width:100%;}
	/* 4 */
	32%  {width:100%;}
	/* zoom */
	40%  {width:100%;}
	/* blink */
	100% {width:100%;}
}
.item_1_2_2_line2 {
	top:0px;
	right:0px;
	width:2px;
	height:100%;
}
.section li.on .item_1_2_2_line2 {
	animation-name:item_1_2_2_line2;
}
@keyframes item_1_2_2_line2 {
	0%   {height:0%;}
	/* 1 */
	8%   {height:0%;}
	/* 2 */
	16%  {height:100%;}
	/* 3 */
	24%  {height:100%;}
	/* 4 */
	32%  {height:100%;}
	/* zoom */
	40%  {height:100%;}
	/* blink */
	100% {height:100%;}
}
.item_1_2_2_line3 {
	bottom:0px;
	right:0px;
	width:100%;
	height:2px;
}
.section li.on .item_1_2_2_line3 {
	animation-name:item_1_2_2_line3;
}
@keyframes item_1_2_2_line3 {
	0%   {width:0%;}
	/* 1 */
	8%   {width:0%;}
	/* 2 */
	16%  {width:0%;}
	/* 3 */
	24%  {width:100%;}
	/* 4 */
	32%  {width:100%;}
	/* zoom */
	40%  {width:100%;}
	/* blink */
	100% {width:100%;}
}
.item_1_2_2_line4 {
	bottom:0px;
	left:0px;
	width:2px;
	height:100%;
}
.section li.on .item_1_2_2_line4 {
	animation-name:item_1_2_2_line4;
}
@keyframes item_1_2_2_line4 {
	0%   {height:0%;}
	/* 1 */
	8%   {height:0%;}
	/* 2 */
	16%  {height:0%;}
	/* 3 */
	24%  {height:0%;}
	/* 4 */
	32%  {height:100%;}
	/* zoom */
	40%  {height:100%;}
	/* blink */
	100% {height:100%;}
}





/******** ITEM 1 - 2 - 3 **********/
.item_1_2_3_line_box {
	position:absolute;
	left:42px;
	top: 148px;
	width:98px;
	height:33px;
	z-index:9;
	background-image:url(../img/img_1_2_3_z.png);
	background-repeat:no-repeat;
	background-size:100%;
	
	/* animation */
	animation-duration:4s;
	animation-delay:0.01s;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
}
.section li.on .item_1_2_3_line_box {
	animation-name:item_1_2_3_line_box;
}
@keyframes item_1_2_3_line_box {
	0%  {transform:scale(1,1);}
	32%  {transform:scale(1,1);}
	40%  {transform:scale(1.2,1.2);}
	100% {transform:scale(1.2,1.2);}
}

.item_1_2_3_line1,
.item_1_2_3_line2,
.item_1_2_3_line3,
.item_1_2_3_line4 {
	position:absolute;
	background-color:#09add4;
	
	/* animation */
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
	animation-duration:4s;
	animation-delay:0.01s;
}
.item_1_2_3_line1 {
	top:0px;
	left:0px;
	width:100%;
	height:2px;
}
.section li.on .item_1_2_3_line1 {
	animation-name:item_1_2_3_line1;
}
@keyframes item_1_2_3_line1 {
	0%   {width:0%;}
	/* 1 */
	8%   {width:100%;}
	/* 2 */
	16%  {width:100%;}
	/* 3 */
	24%  {width:100%;}
	/* 4 */
	32%  {width:100%;}
	/* zoom */
	40%  {width:100%;}
	/* blink */
	100% {width:100%;}
}
.item_1_2_3_line2 {
	top:0px;
	right:0px;
	width:2px;
	height:100%;
}
.section li.on .item_1_2_3_line2 {
	animation-name:item_1_2_3_line2;
}
@keyframes item_1_2_3_line2 {
	0%   {height:0%;}
	/* 1 */
	8%   {height:0%;}
	/* 2 */
	16%  {height:100%;}
	/* 3 */
	24%  {height:100%;}
	/* 4 */
	32%  {height:100%;}
	/* zoom */
	40%  {height:100%;}
	/* blink */
	100% {height:100%;}
}
.item_1_2_3_line3 {
	bottom:0px;
	right:0px;
	width:100%;
	height:2px;
}
.section li.on .item_1_2_3_line3 {
	animation-name:item_1_2_3_line3;
}
@keyframes item_1_2_3_line3 {
	0%   {width:0%;}
	/* 1 */
	8%   {width:0%;}
	/* 2 */
	16%  {width:0%;}
	/* 3 */
	24%  {width:100%;}
	/* 4 */
	32%  {width:100%;}
	/* zoom */
	40%  {width:100%;}
	/* blink */
	100% {width:100%;}
}
.item_1_2_3_line4 {
	bottom:0px;
	left:0px;
	width:2px;
	height:100%;
}
.section li.on .item_1_2_3_line4 {
	animation-name:item_1_2_3_line4;
}
@keyframes item_1_2_3_line4 {
	0%   {height:0%;}
	/* 1 */
	8%   {height:0%;}
	/* 2 */
	16%  {height:0%;}
	/* 3 */
	24%  {height:0%;}
	/* 4 */
	32%  {height:100%;}
	/* zoom */
	40%  {height:100%;}
	/* blink */
	100% {height:100%;}
}

/********************************************/
/*											*/
/*					STEP 03					*/
/*											*/
/********************************************/

/******** ITEM 1 - 3 - 1 **********/
.item_1_3_1_line_box {
	position:absolute;
	left:143px;
	top:211px;
	width:75px;
	height:34px;
	z-index:9;
	background-repeat:no-repeat;
	background-size:100%;
}
.item_1_3_1_line1,
.item_1_3_1_line2,
.item_1_3_1_line3,
.item_1_3_1_line4 {
	position:absolute;
	background-color:#09add4;
	
	/* animation */
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
	animation-duration:4s;
	animation-delay:0.01s;
}
.item_1_3_1_line1 {
	top:0px;
	left:0px;
	width:0%;
	height:2px;
}
.section li.on .item_1_3_1_line1 {
	animation-name:item_1_3_1_line1;
}
@keyframes item_1_3_1_line1 {
	0%   {width:0%;}
	/* 1 */
	8%   {width:100%;}
	/* 2 */
	16%  {width:100%;}
	/* 3 */
	24%  {width:100%;}
	/* 4 */
	32%  {width:100%;}
	/* zoom */
	40%  {width:100%; background-color:rgba(9,173,212,1);}
	/* blink */
	55%  {width:100%; background-color:rgba(9,173,212,0);}
	70%  {width:100%; background-color:rgba(9,173,212,1);}
	85%  {width:100%; background-color:rgba(9,173,212,0);}
	100% {width:100%; background-color:rgba(9,173,212,1);}
}
.item_1_3_1_line2 {
	top:0px;
	right:0px;
	width:2px;
	height:0%;
}
.section li.on .item_1_3_1_line2 {
	animation-name:item_1_3_1_line2;
}
@keyframes item_1_3_1_line2 {
	0%   {height:0%;}
	/* 1 */
	8%   {height:0%;}
	/* 2 */
	16%  {height:100%;}
	/* 3 */
	24%  {height:100%;}
	/* 4 */
	32%  {height:100%;}
	/* zoom */
	40%  {height:100%; background-color:rgba(9,173,212,1);}
	/* blink */
	55%  {height:100%; background-color:rgba(9,173,212,0);}
	70%  {height:100%; background-color:rgba(9,173,212,1);}
	85%  {height:100%; background-color:rgba(9,173,212,0);}
	100% {height:100%; background-color:rgba(9,173,212,1);}
}
.item_1_3_1_line3 {
	bottom:0px;
	right:0px;
	width:0%;
	height:2px;
}
.section li.on .item_1_3_1_line3 {
	animation-name:item_1_3_1_line3;
}
@keyframes item_1_3_1_line3 {
	0%   {width:0%;}
	/* 1 */
	8%   {width:0%;}
	/* 2 */
	16%  {width:0%;}
	/* 3 */
	24%  {width:100%;}
	/* 4 */
	32%  {width:100%;}
	/* zoom */
	40%  {width:100%; background-color:rgba(9,173,212,1);}
	/* blink */
	55%  {width:100%; background-color:rgba(9,173,212,0);}
	70%  {width:100%; background-color:rgba(9,173,212,1);}
	85%  {width:100%; background-color:rgba(9,173,212,0);}
	100% {width:100%; background-color:rgba(9,173,212,1);}
}
.item_1_3_1_line4 {
	bottom:0px;
	left:0px;
	width:2px;
	height:0%;
}
.section li.on .item_1_3_1_line4 {
	animation-name:item_1_3_1_line4;
}
@keyframes item_1_3_1_line4 {
	0%   {height:0%;}
	/* 1 */
	8%   {height:0%;}
	/* 2 */
	16%  {height:0%;}
	/* 3 */
	24%  {height:0%;}
	/* 4 */
	32%  {height:100%;}
	/* zoom */
	40%  {height:100%; background-color:rgba(9,173,212,1);}
	/* blink */
	55%  {height:100%; background-color:rgba(9,173,212,0);}
	70%  {height:100%; background-color:rgba(9,173,212,1);}
	85%  {height:100%; background-color:rgba(9,173,212,0);}
	100% {height:100%; background-color:rgba(9,173,212,1);}
}


/******** ITEM 1 - 3 - 2 **********/
.item_1_3_2_line_box {
	position:absolute;
	left:143px;
	top:235px;
	width:74px;
	height:33px;
	z-index:9;
	background-repeat:no-repeat;
	background-size:100%;
}
.item_1_3_2_line1,
.item_1_3_2_line2,
.item_1_3_2_line3,
.item_1_3_2_line4 {
	position:absolute;
	background-color:#09add4;
	
	/* animation */
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
	animation-duration:4s;
	animation-delay:0.01s;
}
.item_1_3_2_line1 {
	top:0px;
	left:0px;
	width:0%;
	height:2px;
}
.section li.on .item_1_3_2_line1 {
	animation-name:item_1_3_2_line1;
}
@keyframes item_1_3_2_line1 {
	0%   {width:0%;}
	/* 1 */
	8%   {width:100%;}
	/* 2 */
	16%  {width:100%;}
	/* 3 */
	24%  {width:100%;}
	/* 4 */
	32%  {width:100%;}
	/* zoom */
	40%  {width:100%; background-color:rgba(9,173,212,1);}
	/* blink */
	55%  {width:100%; background-color:rgba(9,173,212,0);}
	70%  {width:100%; background-color:rgba(9,173,212,1);}
	85%  {width:100%; background-color:rgba(9,173,212,0);}
	100% {width:100%; background-color:rgba(9,173,212,1);}
}
.item_1_3_2_line2 {
	top:0px;
	right:0px;
	width:2px;
	height:0%;
}
.section li.on .item_1_3_2_line2 {
	animation-name:item_1_3_2_line2;
}
@keyframes item_1_3_2_line2 {
	0%   {height:0%;}
	/* 1 */
	8%   {height:0%;}
	/* 2 */
	16%  {height:100%;}
	/* 3 */
	24%  {height:100%;}
	/* 4 */
	32%  {height:100%;}
	/* zoom */
	40%  {height:100%; background-color:rgba(9,173,212,1);}
	/* blink */
	55%  {height:100%; background-color:rgba(9,173,212,0);}
	70%  {height:100%; background-color:rgba(9,173,212,1);}
	85%  {height:100%; background-color:rgba(9,173,212,0);}
	100% {height:100%; background-color:rgba(9,173,212,1);}
}
.item_1_3_2_line3 {
	bottom:0px;
	right:0px;
	width:0%;
	height:2px;
}
.section li.on .item_1_3_2_line3 {
	animation-name:item_1_3_2_line3;
}
@keyframes item_1_3_2_line3 {
	0%   {width:0%;}
	/* 1 */
	8%   {width:0%;}
	/* 2 */
	16%  {width:0%;}
	/* 3 */
	24%  {width:100%;}
	/* 4 */
	32%  {width:100%;}
	/* zoom */
	40%  {width:100%; background-color:rgba(9,173,212,1);}
	/* blink */
	55%  {width:100%; background-color:rgba(9,173,212,0);}
	70%  {width:100%; background-color:rgba(9,173,212,1);}
	85%  {width:100%; background-color:rgba(9,173,212,0);}
	100% {width:100%; background-color:rgba(9,173,212,1);}
}
.item_1_3_2_line4 {
	bottom:0px;
	left:0px;
	width:2px;
	height:0%;
}
.section li.on .item_1_3_2_line4 {
	animation-name:item_1_3_2_line4;
}
@keyframes item_1_3_2_line4 {
	0%   {height:0%;}
	/* 1 */
	8%   {height:0%;}
	/* 2 */
	16%  {height:0%;}
	/* 3 */
	24%  {height:0%;}
	/* 4 */
	32%  {height:100%;}
	/* zoom */
	40%  {height:100%; background-color:rgba(9,173,212,1);}
	/* blink */
	55%  {height:100%; background-color:rgba(9,173,212,0);}
	70%  {height:100%; background-color:rgba(9,173,212,1);}
	85%  {height:100%; background-color:rgba(9,173,212,0);}
	100% {height:100%; background-color:rgba(9,173,212,1);}
}

/******** ITEM 1 - 3 - 2 **********/


/********************************************/
/*											*/
/*					STEP 04					*/
/*											*/
/********************************************/

/******** ITEM 1 - 4 - 1 **********/
.screen_1_4_1 {
	background-position:top;
}
.screen_1_4_1a {
    opacity: 0;
    
    /* animation */
	animation-duration:2.5s;
	animation-delay:0.01s;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
}
.section li.on .screen_1_4_1a {
	animation-name:screen_1_4_1a;
}

@keyframes screen_1_4_1a {
	0%   {opacity:0;}
	70%   {opacity:0;}
	90%   {opacity:1;}
	100%   {opacity:1;}
}
/********************************************/
/*											*/
/*					STEP 05					*/
/*											*/
/********************************************/

/******** ITEM 1 - 5 - 1 **********/
.screen_1_5_1 {
	background-position:0px 0px;
	
	/* animation */
	animation-duration:1s;
	animation-delay:0.5s;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
}
.section li.on .screen_1_5_1 {
	animation-name:screen_1_5_1;
}
@keyframes screen_1_5_1 {
	0%  {background-position:0px 0px;}
	100% {background-position:0px -100px;}
}

.item_1_5_1_btn {
	position:absolute;
	left:53px;
	top:198px;
	width:170px;
	height:35px;
	z-index:9;
	background-image:url(../img/img_1_5_1_btn.png);
	background-repeat:no-repeat;
	background-size:100%;
	opacity:0;
	
	/* animation */
	animation-duration:2.5s;
	animation-delay:1.5s;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
}
.section li.on .item_1_5_1_btn {
	animation-name:item_1_5_1_btn;
}

@keyframes item_1_5_1_btn {
	0%   {transform:scale(1,1);opacity:0;}
	60%   {transform:scale(1,1);opacity:1;}
	80%   {transform:scale(1.4,1.4);opacity:1;}
	100%   {transform:scale(1.4,1.4);opacity:1;}
}

.item_1_5_1_btn .button,
.item_1_5_1_btn .line {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-size:100%;
}
.item_1_5_1_btn .button {
	background-image:url("../img/img_1_5_1_btn.png");
	z-index:99;
	opacity:1;
}
.item_1_5_1_btn .line {	
	background-image:url("../img/img_1_5_1_btn_line.png");
	z-index:1;
	opacity:0;
	
	/* animation */
	animation-duration:5s;
	animation-delay:1.6s;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
}
.section li.on .item_1_5_1_btn .line {
	animation-name:item_1_5_1_btn_line;
	opacity:0;
}

@keyframes item_1_5_1_btn_line {
	0%   {opacity:0;}
	15%   {opacity:0;}
	35%   {opacity:1;}
	60%   {opacity:1;}
	70%   {opacity:0;}
	80%   {opacity:1;}
	90%   {opacity:0;}
	100%   {opacity:1;}
}


/******** ITEM 1 - 5 - 2 **********/
.item_1_5_2_2 {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:9;
	background-image:url(../img/img_1_5_2_2.png);
	background-repeat:no-repeat;
	background-size:100%;
	opacity:0;
}
.section li.on .item_1_5_2_2 {
	/* animation */
	animation-name:item_1_5_2_2;
	animation-duration:0.3s;
	animation-delay:0.5s;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
}
@keyframes item_1_5_2_2 {
	0%  {opacity:0;}
	100% {opacity:1;}
}


.item_1_5_2_num {
	position:absolute;
	left:17px;
	top:72px;
	width:40px;
	height:15px;
	z-index:10;
	background-image:url(../img/img_1_5_2_2_num.png);
	background-repeat:no-repeat;
	background-position:left;
	background-size:40px;
}
.section li.on .item_1_5_2_num {
	/* animation */
	animation-name:item_1_5_2_num;
	animation-duration:0.3s;
	animation-delay:1s;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
}
@keyframes item_1_5_2_num {
	0%  {width:0px;}
	100% {width:40px;}
}


/******** ITEM 1 - 5 - 3 **********/
.item_1_5_3_blur {
	position:absolute;
	top:-1px;
	left:0px;
	width:100%;
	height:100%;
	background-image:url("../img/img_1_5_3_blur.png");
	background-repeat:no-repeat;
	background-size:100%;
}

.section li.on .item_1_5_3_blur {
	
	/* animation */
	animation-name:item_1_5_3_blur;
	animation-duration:0.5s;
	animation-delay:0.5s;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
}
@keyframes item_1_5_3_blur {
	0%  {opacity:0;}
	100% {opacity:1;}
}

.item_1_5_3_popup {
	position:absolute;
	bottom:-230px;
	left:0px;
	width:100%;
	height:218px;
	background-image:url(../img/img_1_5_3_popup.png);
	background-repeat:no-repeat;
	background-position:top;
	background-size:100%;
}

.section li.on .item_1_5_3_popup {
	/* animation */
	animation-name:item_1_5_3_popup;
	animation-duration:0.5s;
	animation-delay:1s;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
}
@keyframes item_1_5_3_popup {
	0%  {bottom:-230px;}
	100% {bottom:0px;}
}

/******** ITEM 1 - 5 - 4 **********/


/********************************************/
/*											*/
/*					STEP 06					*/
/*											*/
/********************************************/

/******** ITEM 1 - 6 - 1 **********/
.screen_1_6_1a {
	opacity:0;
	z-index:8;
	
	/* animation */
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
	animation-duration:0.5s;
	animation-delay:1s;
}
.section li.on .screen_1_6_1a {
	animation-name:screen_1_6_1a;
}
@keyframes screen_1_6_1a {
	0%   {opacity:0;}
	100% {opacity:1;}
}

.item_1_6_1_line_box {
	position:absolute;
	left:39px;
	right:39px;
	top:157px;
	height:31px;
	z-index:9;
	background-repeat:no-repeat;
	background-size:100%;
}
.item_1_6_1_line1,
.item_1_6_1_line2,
.item_1_6_1_line3,
.item_1_6_1_line4 {
	position:absolute;
	background-color:rgba(9,173,212,1);
	
	/* animation */
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
	animation-duration:4s;
	animation-delay:2s;
}
.item_1_6_1_line1 {
	top:0px;
	left:0px;
	width:0%;
	height:2px;
}
.section li.on .item_1_6_1_line1 {
	animation-name:item_1_6_1_line1;
}
@keyframes item_1_6_1_line1 {
	0%   {width:0%;}
	/* 1 */
	8%   {width:100%;}
	/* 2 */
	16%  {width:100%;}
	/* 3 */
	24%  {width:100%;}
	/* 4 */
	32%  {width:100%;}
	/* zoom */
	40%  {width:100%; background-color:rgba(9,173,212,1);}
	/* blink */
	55%  {width:100%; background-color:rgba(9,173,212,0);}
	70%  {width:100%; background-color:rgba(9,173,212,1);}
	85%  {width:100%; background-color:rgba(9,173,212,0);}
	100% {width:100%; background-color:rgba(9,173,212,1);}
}
.item_1_6_1_line2 {
	top:0px;
	right:0px;
	width:2px;
	height:0%;
}
.section li.on .item_1_6_1_line2 {
	animation-name:item_1_6_1_line2;
}
@keyframes item_1_6_1_line2 {
	0%   {height:0%;}
	/* 1 */
	8%   {height:0%;}
	/* 2 */
	16%  {height:100%;}
	/* 3 */
	24%  {height:100%;}
	/* 4 */
	32%  {height:100%;}
	/* zoom */
	40%  {height:100%; background-color:rgba(9,173,212,1);}
	/* blink */
	55%  {height:100%; background-color:rgba(9,173,212,0);}
	70%  {height:100%; background-color:rgba(9,173,212,1);}
	85%  {height:100%; background-color:rgba(9,173,212,0);}
	100% {height:100%; background-color:rgba(9,173,212,1);}
}
.item_1_6_1_line3 {
	bottom:0px;
	right:0px;
	width:0%;
	height:2px;
}
.section li.on .item_1_6_1_line3 {
	animation-name:item_1_6_1_line3;
}
@keyframes item_1_6_1_line3 {
	0%   {width:0%;}
	/* 1 */
	8%   {width:0%;}
	/* 2 */
	16%  {width:0%;}
	/* 3 */
	24%  {width:100%;}
	/* 4 */
	32%  {width:100%;}
	/* zoom */
	40%  {width:100%; background-color:rgba(9,173,212,1);}
	/* blink */
	55%  {width:100%; background-color:rgba(9,173,212,0);}
	70%  {width:100%; background-color:rgba(9,173,212,1);}
	85%  {width:100%; background-color:rgba(9,173,212,0);}
	100% {width:100%; background-color:rgba(9,173,212,1);}
}
.item_1_6_1_line4 {
	bottom:0px;
	left:0px;
	width:2px;
	height:0%;
}
.section li.on .item_1_6_1_line4 {
	animation-name:item_1_6_1_line4;
}
@keyframes item_1_6_1_line4 {
	0%   {height:0%;}
	/* 1 */
	8%   {height:0%;}
	/* 2 */
	16%  {height:0%;}
	/* 3 */
	24%  {height:0%;}
	/* 4 */
	32%  {height:100%;}
	/* zoom */
	40%  {height:100%; background-color:rgba(9,173,212,1);}
	/* blink */
	55%  {height:100%; background-color:rgba(9,173,212,0);}
	70%  {height:100%; background-color:rgba(9,173,212,1);}
	85%  {height:100%; background-color:rgba(9,173,212,0);}
	100% {height:100%; background-color:rgba(9,173,212,1);}
}

/******** ITEM 1 - 6 - 2 **********/
.screen_1_6_2a {
	opacity:0;
	z-index:10;
	
	/* animation */
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
	animation-duration:0.5s;
	animation-delay:4s;
}
.section li.on .screen_1_6_2a {
	animation-name:screen_1_6_2a;
}
@keyframes screen_1_6_2a {
	0%   {opacity:0;}
	100% {opacity:1;}
}


.item_1_6_2_line_box {
	position:absolute;
	left:191px;
	top:241px;
	width:40px;
	height:16px;
	z-index:9;
	background-image:url(../img/img_1_6_2z.png);
	background-repeat:no-repeat;
	background-size:90%;
	background-position:center;
	
	/* animation */
	animation-duration:1s;
	animation-delay:2s;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
}
.section li.on .item_1_6_2_line_box {
	animation-name:item_1_6_2_line_box;
}
@keyframes item_1_6_2_line_box {
	0% {transform:scale(1,1);}
	100% {transform:scale(1.5,1.5); left:185px; top:234px}
}
.item_1_6_2_line1,
.item_1_6_2_line2,
.item_1_6_2_line3,
.item_1_6_2_line4 {
	position:absolute;
	background-color:rgba(9,173,212,1);
	
	/* animation */
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
	animation-duration:4s;
	animation-delay:0.01s;
}
.item_1_6_2_line1 {
	top:0px;
	left:0px;
	width:0%;
	height:2px;
}
.section li.on .item_1_6_2_line1 {
	animation-name:item_1_6_2_line1;
}
@keyframes item_1_6_2_line1 {
	0%   {width:0%;}
	/* 1 */
	8%   {width:100%;}
	/* 2 */
	16%  {width:100%;}
	/* 3 */
	24%  {width:100%;}
	/* 4 */
	32%  {width:100%;}
	/* zoom */
	40%  {width:100%; background-color:rgba(9,173,212,1);}
	/* blink */
	100% {width:100%; background-color:rgba(9,173,212,1);}
}
.item_1_6_2_line2 {
	top:0px;
	right:0px;
	width:2px;
	height:0%;
}
.section li.on .item_1_6_2_line2 {
	animation-name:item_1_6_2_line2;
}
@keyframes item_1_6_2_line2 {
	0%   {height:0%;}
	/* 1 */
	8%   {height:0%;}
	/* 2 */
	16%  {height:100%;}
	/* 3 */
	24%  {height:100%;}
	/* 4 */
	32%  {height:100%;}
	/* zoom */
	40%  {height:100%; background-color:rgba(9,173,212,1);}
	/* blink */
	100% {height:100%; background-color:rgba(9,173,212,1);}
}
.item_1_6_2_line3 {
	bottom:0px;
	right:0px;
	width:0%;
	height:2px;
}
.section li.on .item_1_6_2_line3 {
	animation-name:item_1_6_2_line3;
}
@keyframes item_1_6_2_line3 {
	0%   {width:0%;}
	/* 1 */
	8%   {width:0%;}
	/* 2 */
	16%  {width:0%;}
	/* 3 */
	24%  {width:100%;}
	/* 4 */
	32%  {width:100%;}
	/* zoom */
	40%  {width:100%; background-color:rgba(9,173,212,1);}
	/* blink */
	100% {width:100%; background-color:rgba(9,173,212,1);}
}
.item_1_6_2_line4 {
	bottom:0px;
	left:0px;
	width:2px;
	height:0%;
}
.section li.on .item_1_6_2_line4 {
	animation-name:item_1_6_2_line4;
}
@keyframes item_1_6_2_line4 {
	0%   {height:0%;}
	/* 1 */
	8%   {height:0%;}
	/* 2 */
	16%  {height:0%;}
	/* 3 */
	24%  {height:0%;}
	/* 4 */
	32%  {height:100%;}
	/* zoom */
	40%  {height:100%; background-color:rgba(9,173,212,1);}
	/* blink */
	100% {height:100%; background-color:rgba(9,173,212,1);}
}

/******** ITEM 1 - 6 - 3 **********/
.screen_1_6_3 {
	z-index:8;
	
	/* animation */
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
	animation-duration:0.5s;
	animation-delay:1.5s;
}
.section li.on .screen_1_6_3 {
	animation-name:screen_1_6_3;
}
@keyframes screen_1_6_3 {
	0%   {background-position:0px 0px;}
	100% {background-position:0px -76px;}
}

.item_1_6_3_phone {
	position:absolute;
	top:93px;
	left:93px;
	width:92px;
	height:14px;
	opacity:0;
	background-color:#fff;
	z-index:11;
	
	/* animation */
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
	animation-duration:0.5s;
	animation-delay:2.5s;
}
.section li.on .item_1_6_3_phone {
	animation-name:item_1_6_3_phone;
}
@keyframes item_1_6_3_phone {
	0%   {opacity:0;}
	100% {opacity:1;}
}
.item_1_6_3_phone > span {
	display:block;
	width:0px;
	height:14px;
	background-image:url(../img/img_1_6_3_phone.png);
	background-repeat:no-repeat;
	background-size:50px 14px;
	
	/* animation */
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
	animation-duration:1s;
	animation-delay:2.5s;
}
.section li.on .item_1_6_3_phone > span {
	animation-name:item_1_6_3_phone_img;
}
@keyframes item_1_6_3_phone_img {
	0%   {width:0;}
	100% {width:50px;}
}

.item_1_6_3_pass {
	position:absolute;
	top:142px;
	left:51px;
	width:92px;
	height:14px;
	opacity:0;
	background-color:#fff;
	z-index:11;
	
	/* animation */
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
	animation-duration:0.5s;
	animation-delay:3.5s;
}
.section li.on .item_1_6_3_pass {
	animation-name:item_1_6_3_pass;
}
@keyframes item_1_6_3_pass {
	0%   {opacity:0;}
	100% {opacity:1;}
}
.item_1_6_3_pass > span {
	display:block;
	width:0px;
	height:14px;
	background-image:url(../img/img_1_6_3_pass.png);
	background-repeat:no-repeat;
	background-size:20px 14px;
	
	/* animation */
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
	animation-duration:1s;
	animation-delay:3.5s;
}
.section li.on .item_1_6_3_pass > span {
	animation-name:item_1_6_3_pass_img;
}
@keyframes item_1_6_3_pass_img {
	0%   {width:0;}
	100% {width:20px;}
}



.item_1_6_3_line_box {
	position:absolute;
	left:46px;
	top:208px;
	width:184px;
	height:27px;
	z-index:9;
	background-image:url(../img/img_1_6_3_btn.png);
	background-repeat:no-repeat;
	background-size:100%;
	opacity:0;
	
	/* animation */
	animation-duration:4s;
	animation-delay:4.5s;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
}
.section li.on .item_1_6_3_line_box {
	animation-name:item_1_6_3_line_box;
}
@keyframes item_1_6_3_line_box {
	0%  {transform:scale(1,1); opacity:0;}
	5%  {transform:scale(1,1); opacity:1;}
	32%  {transform:scale(1,1); opacity:1;}
	40%  {transform:scale(1.2,1.2); opacity:1;}
	100% {transform:scale(1.2,1.2); opacity:1;}
}

.item_1_6_3_line1,
.item_1_6_3_line2,
.item_1_6_3_line3,
.item_1_6_3_line4 {
	position:absolute;
	background-color:#09add4;
	
	/* animation */
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
	animation-duration:4s;
	animation-delay:4.5s;
}
.item_1_6_3_line1 {
	top:0px;
	left:0px;
	width:100%;
	height:2px;
}
.section li.on .item_1_6_3_line1 {
	animation-name:item_1_6_3_line1;
}
@keyframes item_1_6_3_line1 {
	0%   {width:0%;}
	/* 1 */
	8%   {width:100%;}
	/* 2 */
	16%  {width:100%;}
	/* 3 */
	24%  {width:100%;}
	/* 4 */
	32%  {width:100%;}
	/* zoom */
	40%  {width:100%;}
	/* blink */
	100% {width:100%;}
}
.item_1_6_3_line2 {
	top:0px;
	right:0px;
	width:2px;
	height:100%;
}
.section li.on .item_1_6_3_line2 {
	animation-name:item_1_6_3_line2;
}
@keyframes item_1_6_3_line2 {
	0%   {height:0%;}
	/* 1 */
	8%   {height:0%;}
	/* 2 */
	16%  {height:100%;}
	/* 3 */
	24%  {height:100%;}
	/* 4 */
	32%  {height:100%;}
	/* zoom */
	40%  {height:100%;}
	/* blink */
	100% {height:100%;}
}
.item_1_6_3_line3 {
	bottom:0px;
	right:0px;
	width:100%;
	height:2px;
}
.section li.on .item_1_6_3_line3 {
	animation-name:item_1_6_3_line3;
}
@keyframes item_1_6_3_line3 {
	0%   {width:0%;}
	/* 1 */
	8%   {width:0%;}
	/* 2 */
	16%  {width:0%;}
	/* 3 */
	24%  {width:100%;}
	/* 4 */
	32%  {width:100%;}
	/* zoom */
	40%  {width:100%;}
	/* blink */
	100% {width:100%;}
}
.item_1_6_3_line4 {
	bottom:0px;
	left:0px;
	width:2px;
	height:100%;
}
.section li.on .item_1_6_3_line4 {
	animation-name:item_1_6_3_line4;
}
@keyframes item_1_6_3_line4 {
	0%   {height:0%;}
	/* 1 */
	8%   {height:0%;}
	/* 2 */
	16%  {height:0%;}
	/* 3 */
	24%  {height:0%;}
	/* 4 */
	32%  {height:100%;}
	/* zoom */
	40%  {height:100%;}
	/* blink */
	100% {height:100%;}
}




/********************************************/
/*											*/
/*					STEP TIP				*/
/*											*/
/********************************************/

/******** ITEM 1 - t2 - 1 **********/
.item_1_t2_1_line_box {
	position:absolute;
	left:137px;
	right:75px;
	top:136px;
	height:57px;
	z-index:9;
	background-repeat:no-repeat;
	background-size:100%;
}
.item_1_t2_1_line1,
.item_1_t2_1_line2,
.item_1_t2_1_line3,
.item_1_t2_1_line4 {
	position:absolute;
	background-color:#09add4;
	
	/* animation */
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
	animation-duration:4s;
	animation-delay:0.5s;
}
.item_1_t2_1_line1 {
	top:0px;
	left:0px;
	width:0%;
	height:2px;
}
.section li.on .item_1_t2_1_line1 {
	animation-name:item_1_t2_1_line1;
}
@keyframes item_1_t2_1_line1 {
	0%   {width:0%;}
	/* 1 */
	8%   {width:100%;}
	/* 2 */
	16%  {width:100%;}
	/* 3 */
	24%  {width:100%;}
	/* 4 */
	32%  {width:100%;}
	/* zoom */
	40%  {width:100%; background-color:rgba(9,173,212,1);}
	/* blink */
	55%  {width:100%; background-color:rgba(9,173,212,0);}
	70%  {width:100%; background-color:rgba(9,173,212,1);}
	85%  {width:100%; background-color:rgba(9,173,212,0);}
	100% {width:100%; background-color:rgba(9,173,212,1);}
}
.item_1_t2_1_line2 {
	top:0px;
	right:0px;
	width:2px;
	height:0%;
}
.section li.on .item_1_t2_1_line2 {
	animation-name:item_1_t2_1_line2;
}
@keyframes item_1_t2_1_line2 {
	0%   {height:0%;}
	/* 1 */
	8%   {height:0%;}
	/* 2 */
	16%  {height:100%;}
	/* 3 */
	24%  {height:100%;}
	/* 4 */
	32%  {height:100%;}
	/* zoom */
	40%  {height:100%; background-color:rgba(9,173,212,1);}
	/* blink */
	55%  {height:100%; background-color:rgba(9,173,212,0);}
	70%  {height:100%; background-color:rgba(9,173,212,1);}
	85%  {height:100%; background-color:rgba(9,173,212,0);}
	100% {height:100%; background-color:rgba(9,173,212,1);}
}
.item_1_t2_1_line3 {
	bottom:0px;
	right:0px;
	width:0%;
	height:2px;
}
.section li.on .item_1_t2_1_line3 {
	animation-name:item_1_t2_1_line3;
}
@keyframes item_1_t2_1_line3 {
	0%   {width:0%;}
	/* 1 */
	8%   {width:0%;}
	/* 2 */
	16%  {width:0%;}
	/* 3 */
	24%  {width:100%;}
	/* 4 */
	32%  {width:100%;}
	/* zoom */
	40%  {width:100%; background-color:rgba(9,173,212,1);}
	/* blink */
	55%  {width:100%; background-color:rgba(9,173,212,0);}
	70%  {width:100%; background-color:rgba(9,173,212,1);}
	85%  {width:100%; background-color:rgba(9,173,212,0);}
	100% {width:100%; background-color:rgba(9,173,212,1);}
}
.item_1_t2_1_line4 {
	bottom:0px;
	left:0px;
	width:2px;
	height:0%;
}
.section li.on .item_1_t2_1_line4 {
	animation-name:item_1_t2_1_line4;
}
@keyframes item_1_t2_1_line4 {
	0%   {height:0%;}
	/* 1 */
	8%   {height:0%;}
	/* 2 */
	16%  {height:0%;}
	/* 3 */
	24%  {height:0%;}
	/* 4 */
	32%  {height:100%;}
	/* zoom */
	40%  {height:100%; background-color:rgba(9,173,212,1);}
	/* blink */
	55%  {height:100%; background-color:rgba(9,173,212,0);}
	70%  {height:100%; background-color:rgba(9,173,212,1);}
	85%  {height:100%; background-color:rgba(9,173,212,0);}
	100% {height:100%; background-color:rgba(9,173,212,1);}
}



/******** ITEM 1 - t2 - 2 **********/
.item_1_t2_2_line_box {
	position:absolute;
	left:47px;
	right:139px;
	top:182px;
	height:20px;
	z-index:9;
	background-repeat:no-repeat;
	background-size:100%;
}
.item_1_t2_2_line1,
.item_1_t2_2_line2,
.item_1_t2_2_line3,
.item_1_t2_2_line4 {
	position:absolute;
	background-color:#09add4;
	
	/* animation */
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
	animation-duration:4s;
	animation-delay:0.5s;
}
.item_1_t2_2_line1 {
	top:0px;
	left:0px;
	width:0%;
	height:2px;
}
.section li.on .item_1_t2_2_line1 {
	animation-name:item_1_t2_2_line1;
}
@keyframes item_1_t2_2_line1 {
	0%   {width:0%;}
	/* 1 */
	8%   {width:100%;}
	/* 2 */
	16%  {width:100%;}
	/* 3 */
	24%  {width:100%;}
	/* 4 */
	32%  {width:100%;}
	/* zoom */
	40%  {width:100%; background-color:rgba(9,173,212,1);}
	/* blink */
	55%  {width:100%; background-color:rgba(9,173,212,0);}
	70%  {width:100%; background-color:rgba(9,173,212,1);}
	85%  {width:100%; background-color:rgba(9,173,212,0);}
	100% {width:100%; background-color:rgba(9,173,212,1);}
}
.item_1_t2_2_line2 {
	top:0px;
	right:0px;
	width:2px;
	height:0%;
}
.section li.on .item_1_t2_2_line2 {
	animation-name:item_1_t2_2_line2;
}
@keyframes item_1_t2_2_line2 {
	0%   {height:0%;}
	/* 1 */
	8%   {height:0%;}
	/* 2 */
	16%  {height:100%;}
	/* 3 */
	24%  {height:100%;}
	/* 4 */
	32%  {height:100%;}
	/* zoom */
	40%  {height:100%; background-color:rgba(9,173,212,1);}
	/* blink */
	55%  {height:100%; background-color:rgba(9,173,212,0);}
	70%  {height:100%; background-color:rgba(9,173,212,1);}
	85%  {height:100%; background-color:rgba(9,173,212,0);}
	100% {height:100%; background-color:rgba(9,173,212,1);}
}
.item_1_t2_2_line3 {
	bottom:0px;
	right:0px;
	width:0%;
	height:2px;
}
.section li.on .item_1_t2_2_line3 {
	animation-name:item_1_t2_2_line3;
}
@keyframes item_1_t2_2_line3 {
	0%   {width:0%;}
	/* 1 */
	8%   {width:0%;}
	/* 2 */
	16%  {width:0%;}
	/* 3 */
	24%  {width:100%;}
	/* 4 */
	32%  {width:100%;}
	/* zoom */
	40%  {width:100%; background-color:rgba(9,173,212,1);}
	/* blink */
	55%  {width:100%; background-color:rgba(9,173,212,0);}
	70%  {width:100%; background-color:rgba(9,173,212,1);}
	85%  {width:100%; background-color:rgba(9,173,212,0);}
	100% {width:100%; background-color:rgba(9,173,212,1);}
}
.item_1_t2_2_line4 {
	bottom:0px;
	left:0px;
	width:2px;
	height:0%;
}
.section li.on .item_1_t2_2_line4 {
	animation-name:item_1_t2_2_line4;
}
@keyframes item_1_t2_2_line4 {
	0%   {height:0%;}
	/* 1 */
	8%   {height:0%;}
	/* 2 */
	16%  {height:0%;}
	/* 3 */
	24%  {height:0%;}
	/* 4 */
	32%  {height:100%;}
	/* zoom */
	40%  {height:100%; background-color:rgba(9,173,212,1);}
	/* blink */
	55%  {height:100%; background-color:rgba(9,173,212,0);}
	70%  {height:100%; background-color:rgba(9,173,212,1);}
	85%  {height:100%; background-color:rgba(9,173,212,0);}
	100% {height:100%; background-color:rgba(9,173,212,1);}
}



/******** ITEM 1 - t2 - 3 **********/
.item_1_t2_3_line_box {
	position:absolute;
	left:34px;
	right:218px;
	top:124px;
	height:112px;
	z-index:9;
	background-repeat:no-repeat;
	background-size:100%;
}
.item_1_t2_3_line1,
.item_1_t2_3_line2,
.item_1_t2_3_line3,
.item_1_t2_3_line4 {
	position:absolute;
	background-color:#09add4;
	
	/* animation */
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.35, 1.15, 1, 1);
	animation-direction:alternate;
	animation-duration:4s;
	animation-delay:0.5s;
}
.item_1_t2_3_line1 {
	top:0px;
	left:0px;
	width:0%;
	height:2px;
}
.section li.on .item_1_t2_3_line1 {
	animation-name:item_1_t2_3_line1;
}
@keyframes item_1_t2_3_line1 {
	0%   {width:0%;}
	/* 1 */
	8%   {width:100%;}
	/* 2 */
	16%  {width:100%;}
	/* 3 */
	24%  {width:100%;}
	/* 4 */
	32%  {width:100%;}
	/* zoom */
	40%  {width:100%; background-color:rgba(9,173,212,1);}
	/* blink */
	55%  {width:100%; background-color:rgba(9,173,212,0);}
	70%  {width:100%; background-color:rgba(9,173,212,1);}
	85%  {width:100%; background-color:rgba(9,173,212,0);}
	100% {width:100%; background-color:rgba(9,173,212,1);}
}
.item_1_t2_3_line2 {
	top:0px;
	right:0px;
	width:2px;
	height:0%;
}
.section li.on .item_1_t2_3_line2 {
	animation-name:item_1_t2_3_line2;
}
@keyframes item_1_t2_3_line2 {
	0%   {height:0%;}
	/* 1 */
	8%   {height:0%;}
	/* 2 */
	16%  {height:100%;}
	/* 3 */
	24%  {height:100%;}
	/* 4 */
	32%  {height:100%;}
	/* zoom */
	40%  {height:100%; background-color:rgba(9,173,212,1);}
	/* blink */
	55%  {height:100%; background-color:rgba(9,173,212,0);}
	70%  {height:100%; background-color:rgba(9,173,212,1);}
	85%  {height:100%; background-color:rgba(9,173,212,0);}
	100% {height:100%; background-color:rgba(9,173,212,1);}
}
.item_1_t2_3_line3 {
	bottom:0px;
	right:0px;
	width:0%;
	height:2px;
}
.section li.on .item_1_t2_3_line3 {
	animation-name:item_1_t2_3_line3;
}
@keyframes item_1_t2_3_line3 {
	0%   {width:0%;}
	/* 1 */
	8%   {width:0%;}
	/* 2 */
	16%  {width:0%;}
	/* 3 */
	24%  {width:100%;}
	/* 4 */
	32%  {width:100%;}
	/* zoom */
	40%  {width:100%; background-color:rgba(9,173,212,1);}
	/* blink */
	55%  {width:100%; background-color:rgba(9,173,212,0);}
	70%  {width:100%; background-color:rgba(9,173,212,1);}
	85%  {width:100%; background-color:rgba(9,173,212,0);}
	100% {width:100%; background-color:rgba(9,173,212,1);}
}
.item_1_t2_3_line4 {
	bottom:0px;
	left:0px;
	width:2px;
	height:0%;
}
.section li.on .item_1_t2_3_line4 {
	animation-name:item_1_t2_3_line4;
}
@keyframes item_1_t2_3_line4 {
	0%   {height:0%;}
	/* 1 */
	8%   {height:0%;}
	/* 2 */
	16%  {height:0%;}
	/* 3 */
	24%  {height:0%;}
	/* 4 */
	32%  {height:100%;}
	/* zoom */
	40%  {height:100%; background-color:rgba(9,173,212,1);}
	/* blink */
	55%  {height:100%; background-color:rgba(9,173,212,0);}
	70%  {height:100%; background-color:rgba(9,173,212,1);}
	85%  {height:100%; background-color:rgba(9,173,212,0);}
	100% {height:100%; background-color:rgba(9,173,212,1);}
}