@charset "utf-8";

.sv_anime {
	width: min(5.9375vw, 170px);
	margin-bottom: min(0.9375vw, 25px);
}
.base {
  fill: #fff;
}
.box_line {
  stroke: #d7d7d8;
  stroke-width: 4.6px;
  fill: none;
}
.cmn_fill {
	fill: #898989;
}

/*24h*/
#icon-24h .line_24h,
#icon-24h .arrow {
	fill: #898989;
}
#icon-24h.active .arrow,
#icon-24h .arrow_anm {
	fill: none;
}
#icon-24h .line,
#icon-24h .line_stroke {
}
#icon-24h .line {
  stroke: #898989;
  stroke-linecap: round;
  stroke-width: 3.4px;
  fill: none;
}
#icon-24h .line_stroke {
  stroke: #fff;
	stroke-dashoffset: 0;
  stroke-linecap: round;
  stroke-width: 3.4px;
  fill: none;
}
#icon-24h.active .base {
	fill: #bbdb96;
}
#icon-24h.active .box_line {
	stroke: #bbdb96;
}
#icon-24h.active .line {
  stroke: none;
}
#icon-24h.active .line_24h,
#icon-24h.active .arrow_anm {
	fill: #fff;
}
#icon-24h.active .line_stroke {
    animation: line_round 2s forwards linear;
}
@keyframes line_round {
  from {
		stroke-dasharray: 275.066px; 
    stroke-dashoffset: 275.066px;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/*wifi*/
.wifi_line {
	fill: #898989;
}
#icon-wifi.active .base {
	fill:#231815;
}
#icon-wifi.active .box_line {
	stroke:#231815;
}
.active ._wifi01 {
	animation: wifi 1s infinite;
}
.active ._wifi02 {
	animation: wifi 1s .15s infinite;
}
.active ._wifi03 {
	animation: wifi 1s .3s infinite;
}
.active ._wifi04 {
	animation: wifi 1s .45s infinite;
}
.active ._wifi05 {
	animation: wifi 1s .6s infinite;
}
.active ._wifi06 {
	animation: wifi 1s .75s infinite;
}
@keyframes wifi {
	0% {
		fill:#fff;
	}
	20% {
		fill:#dcdddd;
	}
	40% {
		fill:#b5b5b6;
	}
	60% {
		fill:#898989;
	}
	80% {
		fill:#595757;
	}
	100% {
		fill:#595757;
	}
}

/*icon-lounge*/
.lounge_line {
	fill:#898989;
}
/*
#icon-lounge .mae,
#icon-lounge .yoko {display: none;}
#icon-lounge.active .mae,
#icon-lounge.active .yoko {display: block;}
#icon-lounge.active ._before {display: none;}

#icon-lounge .mae .lounge_line,
#icon-lounge .yoko .lounge_line {
	fill:#b0ac82;
}
#icon-lounge .yoko {
	transform: rotateY(90deg);
}
#icon-lounge.active .lounge_line{
	animation: hover_lounge .5s forwards;
}
#icon-lounge.active .mae {
	transform-origin:58% center;
	animation:change_item1 4s linear infinite;
}
.active .yoko {
	transform-origin:58% center;
	animation:change_item2 4s 1s linear infinite;
}
*/
#icon-lounge .yoko,
#icon-lounge .mae,
#icon-lounge.active ._before {display: none;}
.lounge_line {
	fill:#898989;
}
#icon-lounge .mae {
	transform: rotateY(90deg);
}
.active .lounge_line{
	animation: hover_lounge .5s forwards;
}
#icon-lounge.active .yoko {
	display: block;
	transform-origin:57.5% center;
	animation:change_item1 8s linear infinite;
}
#icon-lounge.active .mae {
	display: block;
	transform-origin:57.5% center;
	animation:change_item2 8s linear infinite;
}
@keyframes hover_lounge {
	0%  {
		fill: #898989;
	}
	100%{
		fill: #b0ac82;
	}
}
@keyframes hover_lounge {
	0%  {
		fill: #898989;
	}
	100%{
		fill: #b0ac82;
	}
}
@keyframes change_item1 {
	0% 		{visibility: hidden ;transform:rotateY(-90deg)}
  12.5% {visibility: visible;}
	25% 	{visibility: hidden ;transform:rotateY(90deg)}
	37.5% {visibility: hidden ;}
	50% 	{visibility: hidden;transform:rotateY(90deg)}
	62.5% {visibility: visible;}
	75% 	{visibility: hidden;transform:rotateY(270deg)}
	87.5% {visibility: hidden;}
  100% 	{visibility: hidden ;transform:rotateY(0deg)}
}
@keyframes change_item2 {
	0% 		{visibility: hidden ;transform:rotateY(270deg)}
  12.5% {visibility: hidden ;}
	25% 	{visibility: hidden ;transform:rotateY(90deg)}
	37.5% {visibility: visible;}
	50% 	{visibility: hidden ;transform:rotateY(270deg)}
	62.5% {visibility: hidden ;}
	75% 	{visibility: hidden ;transform:rotateY(270deg)}
	87.5% {visibility: visible;}
  100% 	{visibility: hidden ;transform:rotateY(90deg)}
}

/*another room*/
.office_wp {
	stroke-linejoin:round;
	stroke-width:3.8px;
	stroke:#898989;
	fill:#fff;
}
.arrow2,
.arrow1,
.window {
	fill:#898989;
}
.active .arrow1 {
	fill:none;
}
.ar_line1,
.ar_line2 {
	stroke-miterlimit:10;
	stroke-width:3.8px;
}
/*.active .ar_line1,
.ar_line2 {stroke:none;}*/
.ar_line1,
.active .ar_line2 {
	stroke:#898989;
}
.active .arrow1 {
	fill:#898989;
	animation: move_right 2s forwards;
}
.active .arrow2 {
	fill:#898989;
	animation: move_left 2s forwards;
}

#icon-anotherroom.active .base {
	fill: #efefef;
}
.ar_line1 {
	stroke-dasharray : 22.71px;
}
.active .ar_line1 {
  animation: draw-line 1s forwards linear;
}

@keyframes draw-line {
  from {
		stroke-dasharray : 22.71px;
	  stroke-dashoffset: 22.71px;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes move_right {
  from {
    transform: translateX(-15px);
  }
  to {
    transform: translateX(1px);
  }
}
@keyframes move_left {
  from {
    transform: translateX(15px);
  }
  to {
    transform: translateX(-1px);
  }
}

/*smart lock*/
.lock_ln1,
.smp_frame01{fill:#898989;}
.smp_frame02 {
	fill:#fff;
	stroke:#898989;
	stroke-width:4.1px;
	stroke-miterlimit:10;
}
.lock_line {
	fill:none;
	stroke:#898989;
	stroke-width:4px;
	stroke-linecap:round;
	stroke-linejoin:round;
}
.lock_line._lock02 {
	display: none;
}
.lock_frame{
	fill:#fff;
	stroke:#898989;
	stroke-width:4px;
	stroke-linejoin:round;
}
.lock_round {fill:#fff;}

.active .lock_frame {
	fill:#ff0
}
.active .lock_line._lock01 {
	display: none;
}
.active .lock_line._lock02 {
	display: block;
	animation: lock_move .5s forwards;
}

@keyframes lock_move {
	0% {
		transform: translateY(-1.2%);
	}
	10% {
		transform: translateY(0%);
	}
	85% {
		transform: translateY(2%);
	}
	100% {
		transform: translateY(4.5%);
	}
}

/*rental*/
.rental_line {
	fill:#898989
}
.rental_bg {
	fill:#fff;
}
.active .rental_bg {
	fill:#63c5f1;
}
.rental_write {
	stroke-miterlimit:10;
	stroke-linecap:round;
	stroke:#888;
	stroke-width:4px;
	opacity: 0;
}
.scissors_r,
.scissors_l {
	transform-origin: center;
}
.active .scissors_r {
	animation: scissors_r 1s infinite;
}
.active .scissors_l {
	animation: scissors_l 1s infinite;
}
.active .pen._before,
.pen._on {
	display: none;
}
.active .pen._on {
	display: block;
	transform-origin: center;
	animation: pen 1s infinite;
}
.active .rental_write {
	animation: pen_line 1s forwards;
}
@keyframes scissors_r {
	0% {
		transform: rotate(0deg) translateX(0);
	}
	50%{
		transform: rotate(-15deg) translate(8px, -2px);
	}
	100% {
		transform: rotate(0deg) translateX(0)
	}
}
@keyframes scissors_l {
	0% {
		transform: rotate(0deg)
	}
	50%{
		transform: rotate(15deg) translate(2px, 2px);
	}
	100% {
		transform: rotate(0deg)
	}
}
@keyframes pen {
	0% {
		transform: rotate(-10deg) translateY(5px);
	}
	50%{
		transform: rotate(35deg) translateY(-10px);
	}
	100% {
		transform: rotate(-10deg) translateY(5px);
	}
}
@keyframes pen_line {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/*cafespace*/
#icon-cafespace .line_txt,
#icon-cafespace .line_cup{fill:#898989;}
#icon-cafespace .line_yuge{
	stroke:#898989;
	stroke-linecap:round;
	stroke-width:3.4px;
	fill:none;
	stroke-miterlimit:10;
}
#icon-cafespace.active .line_yuge {
	animation: line_yuge 2s infinite;
	stroke:#62c6f2;
}
@keyframes bace_off {
	100%{
		fill: #c49f8e;
	}
}
@keyframes line_yuge {
  from {
		stroke-dasharray: 60px; 
    stroke-dashoffset: 60px;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/*icon-nuker*/
.nuker {
	fill:#898989;
}
.nuker_on {
	fill:#231815;
}
.nuker_dish {
	fill:#fff;
}
.wave2,
.wave1 {
	fill:none;
	stroke-miterlimit:10;
	stroke:#f29600;
	stroke-linecap:round;
	stroke-width:4px;
}
.wave1 {
	visibility: hidden;
	animation: wave_nuker .5s infinite;
}
.wave2 {
	visibility: hidden;
	animation: wave_nuker .5s .25s infinite;
}
.nuker_hv {
	display: none;
}
.active .nuker_hv {
	display: block;
}
@keyframes wave_nuker {
	0%  {
		visibility: visible;
	}
	25% {
		visibility: hidden;
	}
	75% {
		visibility: hidden;
	}
	100%{
		visibility: visible;
	}
}

/*icon-pantry*/
.warter,
.line_pot {fill:#898989;}
.inn_pot  {fill:#fff}
.line_lid {
	fill:none;
	stroke-miterlimit:10;
	stroke:#888;
	stroke-linecap:round;
	stroke-width:4px;
}
.fire {
	fill:#00a0e9;
	transform: translateY(5%);
}
.after_pot * {visibility: hidden;}	

.active .warter {
	fill:#00a0e9;
	animation: drop_in .8s 3;
}
.active .before_pot {
	animation: before_pt 2.4s forwards;
}
.active .after_pot .line_lid,
.active .after_pot .line_pot {
	visibility: hidden;
	animation: after_pt 2.5s forwards;
}
.active .after_pot ._f01 {
	animation: after_fr 2.6s forwards;
}
.active .after_pot ._f02 {
	animation: after_fr 2.6s .05s forwards;
}
.active .after_pot ._f03 {
	animation: after_fr 2.6s .1s forwards;
}

@keyframes drop_in {
  from {
		transform: translateY(-10%);
  }
  to {
		transform: translateY(20%)
  }
}
@keyframes before_pt {
  0% {
		visibility: visible;
		opacity: 1;
  }
  99% {
		visibility: visible;
		opacity: 1;
  }
  100% {
		opacity: 0;
		visibility: hidden;
  }
}
@keyframes after_pt {
  0% {
		opacity: 0;
		visibility: hidden;
  }
  99% {
		opacity: 0;
		visibility: hidden;
  }
  100% {
		opacity: 1;
		visibility: visible;
  }
}
@keyframes after_fr {
  0% {
		opacity: 0;
		transform: translateY(5%);
		visibility: hidden;
  }
  90% {
		opacity: 0;
		visibility: hidden;
  }
  91% {
		opacity: 0;
		transform: translateY(5%);
		visibility: visible;
  }
  100% {
		opacity: 1;
		transform: translateY(0%);
		visibility: visible;
  }
}

/*icon-refrigerator*/
.ref_line{fill:#898989;}
.ref_item,
.ref_inner,
.ref_door,
.ref_bin_top {
	stroke-miterlimit:10;
	fill:none;
	stroke:#898989;
}
.ref_door {
	stroke-linecap:round;
	stroke-width:4px;
}
.ref_inner,.ref_item,
.ref_bin_top {stroke-width:3.29px;}
.ref_inner {fill:#fff57f;}
.ref_item{fill:#fff;}
.after_ref {
	visibility: hidden;
}
.before_ref {
	opacity: 1;
}
.active .before_ref {
	animation: before_rf 2s infinite;
}
.active .after_ref {
	animation: after_rf 2s infinite;
}
@keyframes before_rf {
  0% {
		opacity: 1;
		visibility: visible;
  }
  24% {
		opacity: 1;
	}
  25% {
		opacity: 0;
		visibility: hidden;
  }
  75% {
		opacity: 0;
		visibility: hidden;
  }
	76% {
		opacity: 1;
	}
  100% {
		opacity: 1;
		visibility: visible;
  }
}
@keyframes after_rf {
  0% {
		opacity: 0;
		visibility: hidden;
  }
	24% {
		opacity: 0;
	}
  25% {
		opacity: 1;
		visibility: visible;
  }
  75% {
		opacity: 1;
		visibility: visible;
  }
	76% {
		opacity: 0;
	}
  100% {
		opacity: 0;
		visibility: hidden;
  }
}

/*icon-s_cable*/
.cable_line {
	fill:#898989;
}
.wall{
	stroke:#888;
	stroke-linecap:round;
	stroke-width:3.5px;
	stroke-miterlimit:10;
}
.plug_bg {fill:#4c4948;}

.plug {
	transform: translateY(3%);
}
#icon-s_cable .after,
#icon-s_cable.active .before {
	display: none;
}
#icon-s_cable.active .after {
	display: block;
}
#icon-s_cable.active .plug {
	animation: cable_on .5s forwards;
}
@keyframes cable_on {
	0% {
		transform: translateY(3%);
	}
	0% {
		transform: translateY(9%);
	}
	100% {
		transform: translateY(0%);
	}
}

/*icon-guest*/
.plus {
	stroke: #898989;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 4.14px;
}
.guest {
	fill:#898989;
}
.active .guest1 {
	animation: guest_show1 1.3s forwards;
}
.active .guest2 {
	animation: guest_show2 1.3s forwards;
}
.active .plus {
	animation: fade_out .5s forwards;
}
@keyframes guest_show1 {
	0%  {
		fill:#898989;
		transform: translateX(0);
	}
	100%{
		fill:#ea68a2;
		transform: translateX(-10%);
	}
}
@keyframes guest_show2 {
	0%  {
		fill:#898989;
		transform: translateX(0);
	}
	100%{
		fill:#f29d7c;
		transform: translateX(18%);
	}
}
@keyframes fade_out {
	0%  {
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}

/*icon-display*/
.display_flash {
	fill:none;
	stroke:#fff;
	stroke-linecap:round;
	stroke-width:3.5px;
	stroke-miterlimit:10;
	stroke-dashoffset: 0;
}
.display_line {
	fill:none;
	stroke:#898989;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-width:4.19px;
}
.display {fill:none}
.active .display {fill:#4c4948;}
.active ._flash01 {
  animation: line_flash .2s 0s 1 linear;
}
.active ._flash02 {
  animation: line_flash .2s 0s 1 linear;
}
@keyframes line_flash {
  from {
		stroke-dasharray: 50px; 
    stroke-dashoffset: 50px;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/*icon-community*/
.commu_line {
	fill:none;
	stroke:none;
}
.comm_arrow01 {
	transform-origin: center;
	fill:#898989;
}

.hewman{fill:#898989;}
.h_base{fill:#fff;}
.wave {
	fill:#898989;
	opacity: 0;
	display: none;
}
.active .h_base,
#icon-community.active .base {
		fill: #fff100;
}
.active .comm_arrow01{
  animation: comm_arrow_move 1.2s forwards;
}
.active .wave {
	display: block;
  animation: comm_wave 1s .6s forwards;
}
@keyframes comm_arrow_move {
	0% {
		transform: rotate(0)
	}	
	100% {
		opacity: 0;
		transform: rotate(90deg);
	}
}
@keyframes comm_wave {
	100%{
		opacity: 1;
	}
}

/*icon-withvision*/
.txt_wth{fill:#898989;}
.wth_base02,
.wth_base01{fill:#fff;}
.wth_line{
	fill:none;
	stroke-miterlimit:10;
	stroke:#898989;
	stroke-width:4px;
}
.active .wth_base02{
	fill:#91d3f4;
}
._with02 {
	display: none;
	transform: translateY(-50%)
}
.active ._with01 {
	animation: with_move 2s infinite;
}
.active ._with02 {
	display: block;
	animation: with_move 2s 1s infinite;
}
@keyframes with_move {
	0% {
		transform: translateY(-50%)
	}
	35% {
		transform: translateY(0%)
	}
	60% {
		transform: translateY(0%)
	}
	100% {
		transform: translateY(50%)
	}
}

/*icon-event*/
.roof1,
.roof2,
.roof3,
.roof4,
.flag,
.house {
	fill:#fff;	
}
.event_line {
	fill: #898989;
}
.active .roof1 {
	animation: roof_color 1.2s 0s infinite;
}
.active .roof2 {
	animation: roof_color 1.2s .3s infinite;
}
.active .roof3 {
	animation: roof_color 1.2s .6s infinite;
}
.active .roof4 {
	animation: roof_color 1.2s .9s infinite;
}
@keyframes roof_color {
	0% {
		fill:#fff;
	}
	50%{
		fill: #ef845c;
	}
	100% {
		fill:#fff;
	}
}

/*icon-20off*/
.line_off {
	fill: none;
	stroke: #898989;
	stroke-linejoin: round;
	stroke-linecap: round;
	stroke-width: 4px;
}
.line_20 {
	fill: none;
	stroke: #898989;
	stroke-miterlimit: 10;
	stroke-width: 4px;
}
.line_off2 {
	stroke: #898989;
	stroke-linecap: round;
	stroke-width: 4px;
}
.active .line_off,
.active .line_20,
.active .line_off2 {
	animation: main_20off 2s infinite;
}
#icon-20off.active .base {
	animation: bace_20off 2s infinite;
}
@keyframes bace_20off {
	0%{
		fill: #fff;
	}
	25%{
		fill: #e60012;
	}
	50%{
		fill: #fff;
	}
	75%{
		fill: #e60012;
	}
	100%{
		fill: #fff;
	}
}
@keyframes main_20off {
	0%{
		stroke: #898989;
	}
	25%{
		stroke: #fff;
	}
	50%{
		stroke: #898989;
	}
	75%{
		stroke: #fff;
	}
	100%{
		stroke: #898989;
	}
}

/*icon-locker*/
.box_line {
  stroke: #d7d7d8;
  stroke-width: 4.6px;
  fill: none;
}
.box_base {
	fill:#fff;
}
.active .locker_close,
.locker_open {
	display: none;
}
.active .locker_open,
.locker_close {
	display: block;
}
#icon-locker.active .base {
	fill:#4c4948;
}
.locker_frame{fill:#898989;}
.hanger_fleme,
.locker_inner {
	stroke-miterlimit:10;
	fill:none;
	stroke:#898989;stroke-linecap:round;stroke-width:2.79px;
}
.towel {
	fill:#fff;
	stroke-miterlimit:10;
	stroke:#898989;stroke-linecap:round;stroke-width:2.79px;
}
.active .hanger {
	transform-origin:center;
	animation: hanger_in 1s linear forwards;
}
.active .close {
	visibility: hidden;
	animation: locker_close 1.3s forwards;
}
@keyframes hanger_in {
	0%  {transform: translateX(0) rotateY(0);}
	50% {transform: translateX(-5%) translateY(-3px) rotateY(30deg);}
	100%{transform: translateX(-5%) translateY(-3px) rotateY(60deg);}
}
@keyframes locker_close {
	0% {visibility: hidden;}
	99%{visibility: hidden;}
	100%{visibility: visible;}
}

/*icon-registration*/
.reg_pen,
.reg_paper{
	fill:#898989;
}
.reg_line{
	stroke:#898989;
	stroke-width:4px;
}
.active .reg_write._on,
.reg_line._off {
	display: none;
}
.active .reg_write._off {
	display: block;
}
._off .reg_line {
	opacity: 0;
	visibility: hidden;
}
.active ._write01 {
  animation: draw_path .8s linear forwards;
}
.active ._write02 {
  animation: draw_path .8s .8s linear forwards;
}
.active ._write03 {
  animation: draw_path .8s 1.6s linear forwards;
}
.active ._write04 {
  animation: draw_path .8s 2.4s linear forwards;
}
@keyframes draw_path {
	0% {
		opacity: 0;
		visibility: hidden;
	}
	50% {
		opacity: 1;
		visibility: visible;
	}
  100% {
		opacity: 1;
		visibility: visible;
  }
}
.active .pen_wp {
	transform-origin: center;
  animation: pen_move 3s linear forwards;
}
@keyframes pen_move {
	0% {
		transform: translateY(-32px) rotate(15deg);
	}
	20% {
		transform: translateY(-24px) rotate(-15deg);
	}
	40% {
		transform: translateY(-16px) rotate(15deg);
	}
	60% {
		transform: translateY(-8px) rotate(-15deg);
	}
	80% {
		transform: translateY(-4px) rotate(15deg);
	}
	100% {
		transform: translateY(0px) rotate(-15deg);
	}
}

/*icon-desk*/
#icon-desk.active .base {
	fill: #92d4f5;
}
.desk_back {
	fill:#fff;
}
.desk_line {
	fill:#898989;
}
.none {display: none;}
.desk_move {
	transform-origin:center;
	visibility: hidden;
}
.yoko {
	transform: rotateY(90deg);
}
.active .desk01 {
	transform-origin:center;
	animation:turn_item 4s linear infinite;
}
.active .desk02 {
	animation:turn_item 4s .5s linear infinite;
}
.active .desk03 {
	animation:turn_item 4s 1s linear infinite;
}
.active .desk04 {
	animation:turn_item 4s 1.5s linear infinite;
}
.active .desk05 {
	animation:turn_item 4s 2s linear infinite;
}
.active .desk06 {
	animation:turn_item 4s 2.5s linear infinite;
}
.active .desk07 {
	animation:turn_item 4s 3s linear infinite;
}
.active .desk08 {
	animation:turn_item 4s 3.5s linear infinite;
}
@keyframes turn_item {
	0%  {
		opacity: 1;
		visibility: visible;
	}
	15%{opacity: 1;}
	16% {
		opacity: 0;
		visibility: hidden;
	}
	85% {
		visibility: hidden;
	}
	99%{opacity: 0;}
	100%{
		opacity: 1;
		visibility: visible;
	}
}

/*icon-shelf*/
.shelf_bg01,
.shelf_bg02 {fill:none}
.active .shelf_bg01 {
	fill:#fff35f;
}
.active .shelf_bg02 {
	fill:#f2c5ad;
}
.shelf_line{
	fill:none;
	stroke-miterlimit:10;
	stroke:#898989;
	stroke-width:4px;
}
.book {
	stroke-linecap:round;
	stroke:#898989;
	stroke-width:4px;
}
.book._book07 {
	opacity: 0;
}
.active ._book01 {
	transform-origin: 90px 130px;
	animation: book01 .5s linear forwards;
}
.active ._book02 {
	transform-origin: 97px 130px;
	animation: book01 .5s linear forwards;
}
.active ._book03 {
	transform-origin: 104px 130px;
	animation: book01 .5s linear forwards;
}
.active ._book04 {
	transform-origin: 85px 75px;
	animation: book02 .5s linear forwards;
}
.active ._book05 {
	transform-origin: 92px 75px;
	animation: book02 .5s linear forwards;
}
.active ._book06 {
	transform-origin: 99px 75px;
	animation: book02 .5s linear forwards;
}
.active ._book09 {
	opacity: 0;
	animation: book03 .3s linear forwards;
}
.active ._book08 {
	opacity: 0;
	animation: book03 .3s .1s linear forwards;
}
.active ._book07 {
	opacity: 0;
	animation: book03 .3s .2s linear forwards;
}
@keyframes book01 {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: translateY(2px);
	}
	100% {
		transform: rotate(-17deg);
	}
}
@keyframes book02 {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: translateY(-2px);
	}
	100% {
		transform: rotate(17deg);
	}
}
@keyframes book03 {
	0% {
		opacity: 0;
		transform: translateY(-5%);
	}
	100% {
		opacity: 1;
		transform: translateY(0%);
	}
}

/*icon-cafe_off*/
#icon-cafe_off .line_txt,
#icon-cafe_off .line_cup{fill:#898989;}

#icon-cafe_off .line_yuge{
	stroke:#898989;
	stroke-linecap:round;
	stroke-width:3.4px;
	fill:none;
	stroke-miterlimit:10;
}
#icon-cafe_off.active .line_yuge {
	animation: line_yuge 2s infinite;
	stroke:#fff;
}
#icon-cafe_off.active .base {
	fill: #c49f8e;
}
#icon-cafe_off.active .line_cup {
	fill:#fff
}
#icon-cafe_off.active .line_txt {
	fill:#fff;
	transform: translateX(80%)
}
.active .off01 {
	animation: move_off1 .8s forwards;
}
.active .off02 {
	animation: move_off2 1s linear forwards;
}
.active .off03 {
	animation: move_off3 1.1s linear forwards;
}
@keyframes line_yuge {
  from {
		stroke-dasharray: 40px; 
    stroke-dashoffset: 40px;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes move_off1 {
	0% {
		transform: translateX(80%)
	}
	100% {
		transform: translateX(0%)
	}
}
@keyframes move_off2 {
	0% {
		transform: translateX(80%)
	}
	25% {
		transform: translateX(80%)
	}
	100% {
		transform: translateX(0%)
	}
}
@keyframes move_off3 {
	0% {
		transform: translateX(80%)
	}
	50% {
		transform: translateX(80%)
	}
	100% {
		transform: translateX(0%)
	}
}

/*icon-ownfoods*/
#icon-ownfoods .line_cup{fill:#898989;}
#icon-ownfoods .line_yuge{
	stroke:#898989;
	stroke-linecap:round;
	stroke-width:3.4px;
	fill:none;
	stroke-miterlimit:10;
}
#icon-ownfoods.active .line_yuge._before,
#icon-ownfoods .line_yuge._on {
	opacity: 0;
	display: block;
}

#icon-ownfoods.active .cup_in {
	transform: translateX(100%);
	transform-origin: center;
	animation: caffe_in 1.5s forwards;
}
#icon-ownfoods.active .line_yuge._on {
	display: block;
	stroke-dasharray: 60px; 
	stroke-dashoffset: 60px;
	animation: line_yuge 2s 1.2s infinite;
	stroke:#62c6f2;
}
@keyframes bace_off {
	100%{
		fill: #c49f8e;
	}
}
@keyframes line_yuge {
  0% {
		opacity: 0;
		stroke-dasharray: 60px; 
    stroke-dashoffset: 60px;
  }
	1%	{opacity: 1;}
  100% {
		opacity: 1;
    stroke-dashoffset: 0;
  }
}
@keyframes caffe_in {
	0% {
		transform: translateX(100%) rotate(-15deg);
	}
	100% {
		transform: translateX(0%) rotate(0deg);
	}
}

/*icon-security_camera*/
.camera_line {
	fill:#898989;
}
.camera_bs {fill:#fff}
#icon-security_camera.active .base {
	fill:#231815;
}
.active .camera._before,
.camera._on {
	display: none;
}
.active .camera._on {
	display: block;
	transform-origin: center;
	animation: camera_move 4s linear infinite;
}

@keyframes camera_move {
	0% {
		transform: rotate(0deg);
	}
	20% {
		transform: rotate(-15deg);
	}
	50% {
		transform: rotate(-25deg);
	}
	75% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

/*icon-mailbox*/
.mail{
	stroke-linejoin:round;
	stroke:#898989;
	stroke-width:3.56px;
	fill:#fff;
}
.base_mailbox {
  fill: #fff;
}
.line_mailbox {
	stroke-linecap:round;
  stroke:#898989;
	stroke-width:3.56px;
}
.active .wp_mail {
	transform-origin: center;
	animation: mail_in 1.3s forwards;
}
@keyframes mail_in {
	0%  {
		transform: translateY(0);
	}
	90%{
		transform: translateY(25%) translateX(3%) rotate(-45deg);
	}
	100%{
		transform: translateY(40%) translateX(3%) rotate(-45deg);
	}
}