/*design 0*/ #d #area_0{height:905px; } #d #area_0 #hgroup{top:0 } #d #area_0 #hgroup #header_01{top:200px;}/*h1*/ #d #area_0 #hgroup #header_02{top:252px;}/*h2*/ #d #area_0 #hgroup #header_03{top:318px; color:#666}/*h3*/ #d #area_0 .img_layout{ width:800px; top:200px; } #d #area_0 .img_layout #area_01{ width:800px; top:0px; transform:scale(0.8,0.8); text-align:center; display:none; position:relative;} #d #area_0 .img_layout #area_02{ display:block; position: absolute; top:540px; left:-170px; opacity:0 } #d #area_0 .img_layout #area_03{ display:block; position: absolute; top:0px; left:0px; left:120px; transform:scale(0.8,0.8); } #d #area_0 .img_layout #area_04{ display:block; position: absolute; top:0px; left:640px; left:520px; transform:scale(0.8,0.8); } #d #area_0 .img_layout #area_03{ transform: scale(1,1); left:0px; -webkit-transform: scale(1,1); animation-delay:0s; -webkit-animation-delay:0s; animation-name: ps_d_0a ; -webkit-animation-name: ps_d_0a ; animation-duration:5s; -webkit-animation-duration:5s; animation-iteration-count:1; -webkit-animation-iteration-count:1; animation-timing-function:ease-in-out; -webkit-animation-timing-function:ease-in-out; animation-direction:normal; -webkit-animation-direction:normal; animation-fill-mode:forwards; } @keyframes ps_d_0a { from{ transform: scale(0.8,0.8); left:120px; } to{ transform: scale(1,1); left:0px; } } @-webkit-keyframes ps_d_0a { from{ -webkit-transform:scale(0.8,0.8); left:120px; } to{ -webkit-transform: scale(1,1); left:0px; } } #d #area_0 .img_layout #area_04{ transform: scale(1,1); -webkit-transform: scale(1,1); left:640px; animation-delay:0s; -webkit-animation-delay:0s; animation-name: ps_d_0b ; -webkit-animation-name: ps_d_0b ; animation-duration:5s; -webkit-animation-duration:5s; animation-iteration-count:1; -webkit-animation-iteration-count:1; animation-timing-function:ease-in-out; -webkit-animation-timing-function:ease-in-out; animation-direction:normal; -webkit-animation-direction:normal; animation-fill-mode:forwards; } @keyframes ps_d_0b { from{ transform: scale(0.8,0.8); left:520px; } to{ transform: scale(1,1); left:640px; } } @-webkit-keyframes ps_d_0b { from{ -webkit-transform:scale(0.8,0.8); left:520px; } to{ -webkit-transform: scale(1,1); left:640px; } } #d #area_0 .img_layout #area_02{ opacity:1; -webkit-opacity:1 animation-delay:2s; animation-name: Animation_01db ; animation-duration:4s; animation-iteration-count:1; animation-timing-function:ease-in-out; animation-direction:normal; animation-fill-mode:forwards; -webkit-animation-delay:2s; -webkit-animation-name: Animation_01db ; -webkit-animation-duration:4s; -webkit-animation-iteration-count:1; -webkit-animation-timing-function:ease-in-out; -webkit-animation-direction:normal; -webkit-animation-fill-mode:forwards; } @keyframes Animation_01db { from{ opacity:0; -webkit-opacity:0; } to{opacity:1; -webkit-opacity:1 } } @-webkit-keyframes Animation_01db { from{ opacity:0; -webkit-opacity:0; } to{opacity:1; -webkit-opacity:1 } } /*area_1*/ #d #area_1{ ;z-index:99; height:750px; } #d #area_1 article{width:970px; height:287px; top:100px; z-index:95; text-align:left;} #d #area_1 article .title{ top:0px; left:50%; width:45%;} #d #area_1 article .text{ top:75px; left:50%; width:47%} #d #area_1 .img_layout_a{width:970px; height:200px; top:-220px; left:0px; position:relative; display:block;} #d #area_1 .img_layout_a img { display:block; left:-150px; position:relative} #d #area_1 .img_layout_b{ width:970px; height:160px; top:-50px; left:0px; position:relative; display:block; overflow:hidden; } #d #area_1 .img_layout_b img { top:120px; left:510px; position:relative} /*area_2*/ #d #area_2{height:1000px;top:0px;} #d #area_2 .img_layout{width:970px; height:745px; position:relative; display:block;top:50px } #d #area_2 .img_layout span{ width:370px; height:745px; left:0; display:block; float:left; position:absolute; overflow:hidden; background-color:#fff} #myvideo2{width:370px; height:747px; z-index:99;} #d #area_2 article{width:970px; height:287px; top:-450px; z-index:95; text-align:left; } #d #area_2 article .title{ top:0px; left:50%; width:45%;} #d #area_2 article .text{ top:75px; left:50%; width:45%} /*area_z*/ #d #area_z{height:880px;} #d #area_z .img_layout_a{background-color:#121212; position:relative; width:100%; display:block; top:-100px; } #d #area_z .img_layout_b{background-color:#242424; position:relative; width:100%; display:block; top:-1100px; opacity:0; } #d #area_z article{width:970px; height:287px; top:-1500px; text-align:left; } #d #area_z article .title{ top:0px; left:50%; width:45%; color:#fff} #d #area_z article .text{ top:75px; left:50%; width:50%; color:#fff} /*design 3 */ #d #area_3{height:1160px; top:100px } #d #area_3 article{ width:970px; height:1010px; overflow:hidden;} #d #area_3 article .title{ top:150px; left:0px; text-align:right; width:55%;} #d #area_3 article .text{ top:198px; left:0px; text-align:right; width:55%} #d #area_3 article #area_31{ position:absolute; display:block; top:150px; right:0px;}/*product img*/ #d #area_3 article #area_32{ position:absolute; display:block; top:455px; left:630px}/*screen in*/ /*ui ani*/ /*È­¸é ¿¡·¯ ¼öÁ¤¿ë À̹ÌÁö*/ #d #area_3 article #screen_000_b{display:block; top:377px; left:920px; position:absolute; z-index:99999; }/*error*/ /*È­¸é ¿¡·¯ ¼öÁ¤¿ë À̹ÌÁö*/ #d #area_3 article #screen_000_c{display:block; top:377px; left:650px; position:absolute; z-index:99999; }/*error*/ #d #area_3 article #area_3_screen{ overflow:hidden; width:269px; height:441px; float:left; left:652px; top:244px; position:relative; z-index:10} #area_3_screen #screen_000{ display:block; position:absolute; z-index:10 } #area_3_screen #screen_001{ display:block; position:absolute; z-index:10 } /*01_play bar_circle*/ #area_3_screen .screen_002_deg{display:block; position:absolute; z-index:9; left:0px; top:59px;} #area_3_screen #screen_002{transform:rotate(0deg) } #area_3_screen #screen_003{ transform:rotate(56deg)} #area_3_screen #screen_004{ transform:rotate(116deg)} #area_3_screen #screen_005{ transform:rotate(176deg)} #area_3_screen #screen_006{ transform:rotate(236deg)} #area_3_screen #screen_007{ } /*02_gauge*/ #area_3_screen #screen_011{display:block; position:absolute; z-index:11; font-size:16px; left:125px; top:192px;color:#fff; font-family:lato; } #area_3_screen #screen_021{ left:66px; transform:rotate(-60deg)} #area_3_screen #screen_022{ left:200px; transform:rotate(-60deg)} #area_3_screen #screen_021,#area_3_screen #screen_022{top:398px;display:block; position:absolute; z-index:11;width:1px; height:103px; background-color:#fff} /*01_play bar_circle ani*/ #area_3:hover article #area_3_screen #screen_007{ animation-delay:0s; animation-name: Animation_04 ; animation-duration:10s; animation-iteration-count:1; animation-timing-function:linear; animation-direction:normal; animation-fill-mode:forwards; -webkit-animation-delay:0s; -webkit-animation-name: Animation_04 ; -webkit-animation-duration:10s; -webkit-animation-iteration-count:1; -webkit-animation-timing-function:linear; -webkit-animation-direction:normal; -webkit-animation-fill-mode:forwards; } @keyframes Animation_04 { from {transform:rotate(236deg); -webkit-transform:rotate(236deg);} to { transform:rotate(296deg); -webkit-transform:rotate(296deg);} } @-webkit-keyframes Animation_04 { from {transform:rotate(236deg); -webkit-transform:rotate(236deg);} to { transform:rotate(296deg); -webkit-transform:rotate(296deg);} } /*02_gauge ani*/ #area_3:hover article #area_3_screen #screen_021{ animation-delay:0s; animation-name: Animation_02 ; animation-duration:10s; animation-iteration-count:1; animation-timing-function:ease-in-out;/*ease-in-out*/ -webkit-animation-delay:0s; -webkit-animation-name: Animation_02 ; -webkit-animation-duration:10s; -webkit-animation-iteration-count:1; -webkit-animation-timing-function:ease-in-out;/*ease-in-out*/ } @keyframes Animation_02 { 0% { transform: rotate(-65deg); -webkit-transform: rotate(-65deg); } 1% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 2% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 3% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 4% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 5% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 6% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 7% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 8% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 9% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 10% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 11% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 12% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 13% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 14% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 15% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 16% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 17% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 18% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 19% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 20% { transform: rotate(-25deg); -webkit-transform: rotate(-25deg); } 21% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 22% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 23% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 24% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 25% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 26% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 27% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 28% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 29% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 30% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 31% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 32% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 33% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 34% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 35% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 36% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 37% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 38% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 39% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 40% { transform: rotate(-15deg); -webkit-transform: rotate(-15deg); } 41% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 42% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 43% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 44% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 45% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 46% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 47% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 48% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 49% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 50% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 51% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 52% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 53% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 54% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 55% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 56% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 57% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 58% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 59% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 60% { transform: rotate(-25deg); -webkit-transform: rotate(-25deg); } 61% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 62% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 63% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 64% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 65% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 66% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 67% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 68% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 69% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 70% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 71% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 72% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 73% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 74% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 75% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 76% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 77% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 78% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 79% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 80% { transform: rotate(-5deg); -webkit-transform: rotate(-5deg); } 81% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 82% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 83% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 84% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 85% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 86% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 87% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 88% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 89% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 90% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 91% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 92% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 93% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 94% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 95% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 96% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 97% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 98% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 99% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 100% { transform: rotate(-65deg); -webkit-transform: rotate(-65deg); } } @-webkit-keyframes Animation_02 { 0% { transform: rotate(-65deg); -webkit-transform: rotate(-65deg); } 1% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 2% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 3% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 4% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 5% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 6% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 7% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 8% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 9% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 10% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 11% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 12% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 13% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 14% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 15% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 16% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 17% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 18% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 19% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 20% { transform: rotate(-25deg); -webkit-transform: rotate(-25deg); } 21% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 22% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 23% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 24% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 25% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 26% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 27% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 28% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 29% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 30% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 31% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 32% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 33% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 34% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 35% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 36% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 37% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 38% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 39% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 40% { transform: rotate(-15deg); -webkit-transform: rotate(-15deg); } 41% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 42% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 43% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 44% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 45% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 46% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 47% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 48% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 49% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 50% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 51% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 52% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 53% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 54% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 55% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 56% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 57% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 58% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 59% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 60% { transform: rotate(-25deg); -webkit-transform: rotate(-25deg); } 61% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 62% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 63% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 64% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 65% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 66% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 67% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 68% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 69% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 70% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 71% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 72% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 73% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 74% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 75% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 76% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 77% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 78% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 79% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 80% { transform: rotate(-5deg); -webkit-transform: rotate(-5deg); } 81% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 82% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 83% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 84% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 85% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 86% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 87% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 88% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 89% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 90% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 91% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 92% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 93% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 94% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 95% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 96% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 97% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 98% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 99%{ transform: rotate(30deg); -webkit-transform: rotate(30deg); } 100% { transform: rotate(-65deg); -webkit-transform: rotate(-65deg); } } #area_3:hover article #area_3_screen #screen_022{ animation-delay:0s; animation-name: Animation_03 ; animation-duration:10s; animation-iteration-count:1; animation-timing-function:linear; -webkit-animation-delay:0s; -webkit-animation-name: Animation_03 ; -webkit-animation-duration:10s; -webkit-animation-iteration-count:1; -webkit-animation-timing-function:linear;/*ease-in-out*/ } @keyframes Animation_03 { 0% { transform: rotate(-67deg); -webkit-transform: rotate(-67deg); } 1% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 2% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 3% { transform: rotate(2deg); -webkit-transform: rotate(2deg); } 4% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 5% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 6% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 7% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 8% { transform: rotate(-20deg); -webkit-transform: rotate(-20deg); } 9% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 10% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 11% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 12% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 13% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 14% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 15% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 16% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 17% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 18% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 19% { transform: rotate(40deg); -webkit-transform: rotate(40deg); } 20% { transform: rotate(-25deg); -webkit-transform: rotate(-25deg); } 21% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 22% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 23% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 24% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 25% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 26% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 27% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 28% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 29% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 30% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 31% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 32% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 33% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 34% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 35% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 36% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 37% { transform: rotate(-11deg); -webkit-transform: rotate(-11deg); } 38% { transform: rotate(-11deg); -webkit-transform: rotate(-11deg); } 39% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 40% { transform: rotate(-15deg); -webkit-transform: rotate(-15deg); } 41% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 42% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 43% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 44% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 45% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 46% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 47% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 48% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 49% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 50% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 51% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 52% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 53% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 54% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 55% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 56% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 57% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 58% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 59% { transform: rotate(40deg); -webkit-transform: rotate(40deg); } 60% { transform: rotate(-25deg); -webkit-transform: rotate(-25deg); } 61% { transform: rotate(40deg); -webkit-transform: rotate(40deg); } 62% { transform: rotate(40deg); -webkit-transform: rotate(40deg); } 63% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 64% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 65% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 66% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 67% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 68% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 69% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 70% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 71% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 72% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 73% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 74% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 75% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 76% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 77% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 78% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 79% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 80% { transform: rotate(-5deg); -webkit-transform: rotate(-5deg); } 81% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 82% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 83% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 84% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 85% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 86% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 87% { transform: rotate(-30deg); -webkit-transform: rotate(-30deg); } 88% { transform: rotate(-30deg); -webkit-transform: rotate(-30deg); } 89% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 90% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 91% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 92% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 93% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 94% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 95% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 96% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 97% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 98% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 99% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 100% { transform: rotate(-65deg); -webkit-transform: rotate(-65deg); } } @-webkit-keyframes Animation_03 { 0% { transform: rotate(-67deg); -webkit-transform: rotate(-67deg); } 1% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 2% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 3% { transform: rotate(2deg); -webkit-transform: rotate(2deg); } 4% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 5% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 6% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 7% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 8% { transform: rotate(-20deg); -webkit-transform: rotate(-20deg); } 9% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 10% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 11% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 12% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 13% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 14% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 15% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 16% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 17% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 18% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 19% { transform: rotate(40deg); -webkit-transform: rotate(40deg); } 20% { transform: rotate(-25deg); -webkit-transform: rotate(-25deg); } 21% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 22% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 23% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 24% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 25% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 26% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 27% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 28% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 29% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 30% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 31% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 32% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 33% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 34% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 35% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 36% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 37% { transform: rotate(-11deg); -webkit-transform: rotate(-11deg); } 38% { transform: rotate(-11deg); -webkit-transform: rotate(-11deg); } 39% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 40% { transform: rotate(-15deg); -webkit-transform: rotate(-15deg); } 41% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 42% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 43% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 44% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 45% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 46% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 47% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 48% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 49% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 50% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 51% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 52% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 53% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 54% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 55% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 56% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 57% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 58% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 59% { transform: rotate(40deg); -webkit-transform: rotate(40deg); } 60% { transform: rotate(-25deg); -webkit-transform: rotate(-25deg); } 61% { transform: rotate(40deg); -webkit-transform: rotate(40deg); } 62% { transform: rotate(40deg); -webkit-transform: rotate(40deg); } 63% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 64% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 65% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 66% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 67% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 68% { transform: rotate(-10deg); -webkit-transform: rotate(-10deg); } 69% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 70% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 71% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 72% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 73% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 74% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 75% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 76% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 77% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 78% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 79% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 80% { transform: rotate(-5deg); -webkit-transform: rotate(-5deg); } 81% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 82% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 83% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 84% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 85% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 86% { transform: rotate(35deg); -webkit-transform: rotate(35deg); } 87% { transform: rotate(-30deg); -webkit-transform: rotate(-30deg); } 88% { transform: rotate(-30deg); -webkit-transform: rotate(-30deg); } 89% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 90% { transform: rotate(5deg); -webkit-transform: rotate(5deg); } 91% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 92% { transform: rotate(20deg); -webkit-transform: rotate(20deg); } 93% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 94% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 95% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 96% { transform: rotate(10deg); -webkit-transform: rotate(10deg); } 97% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 98% { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } 99% { transform: rotate(30deg); -webkit-transform: rotate(30deg); } 100% { transform: rotate(-65deg); -webkit-transform: rotate(-65deg); } } /*design 4*/ #d #area_4{height:1330px; } #d #area_4 article{width:970px;} #d #area_4 article .title{ top:0px; left:0px; width:100%;} #d #area_4 article .text{ top:48px; left:0px; width:100%} #d #area_4 .img_layout{ top:200px; width:970px; height:1000px; } #d #area_4 .img_layout #area_41,#d #area_4 .img_layout #area_42{display:block; position: absolute; } #d #area_4 .img_layout #area_41{ top:0px; left:-77px } #d #area_4 .img_layout #area_42{ top:490px; left:-100px } /*design 5*/ #d #area_5{height:1000px;} #d #area_5 article{ width:950px; top:0px; text-align:left; height:200px;} #d #area_5 article .title{ top:0px; left:0px; width:100%;} #d #area_5 article .text{ top:48px; left:0px; width:100%} #d #area_5 .img_layout{top:0px; width:970px; } #d #area_5 .img_layout #area_51, #d #area_5 .img_layout #area_52{ position:absolute; display:block; top:0} #d #area_5 .img_layout #area_51{ left:10px; left:100px;} #d #area_5 .img_layout #area_52{ left:290px; left:190px;}