/* BASIC css start */ #wrap > #header > .top_banner{display:none} #wrap > #header{position:fixed !important;z-index:98} #wrap > #header > .inner_wrap{display:none} #wrap > #header > .inner_wrap *{display:none} #wrap > #header > .inner.bg_lnb{opacity:1;display:block;width:100%;position:fixed !important;top:0;*left:0;z-index:98;background:rgba(255,255,255,0.8)} #wrap > #header > .inner.bg_lnb .fix_logo{display:block} #wrap > #header > .inner.bg_lnb #category2{display:none} #wrap > #header > .inner.bg_lnb .search, #wrap > #header > .inner.bg_lnb .gnb3{display:block} #wrap > #header > .inner.bg_lnb .search{position:relative;top:0;right:0;padding-top:11px;display:inline-block;margin-right:15px;float:right;width:167px; } #wrap > #header > .inner.bg_lnb .search input[name="search"]{font-size:12px; width:120px;position:relative;border-radius:30px;right:0;padding:7px 30px 7px 15px;border:1px solid #bbb;background:transparent} #wrap > #header > .inner.bg_lnb .search input[name="search"]:focus{border:2px solid #707070} #wrap > #header > .inner.bg_lnb .search .s_btn{position:absolute;right:14px;top:17px} #wrap > #header > .inner.bg_lnb .search .s_btn input{width:13px} #fullpage{min-width:1080px;margin:0 auto;background-color:#fde3ee} #fullpage .section.horizonScroll > .fp-controlArrow{display:none !important;border:0;width:51px;height:88px;margin-top:-20px} #fullpage .section.horizonScroll > .fp-controlArrow.on{display:block !important} #fullpage .section.horizonScroll > .fp-controlArrow.fp-prev{left:50px;background:url(//pinkagewig.img18.kr/site/ponystail/pc/fp-prev.png) no-repeat center center} #fullpage .section.horizonScroll > .fp-controlArrow.fp-next{right:50px;background:url(//pinkagewig.img18.kr/site/ponystail/pc/fp-next.png) no-repeat center center} #fullpage .section.horizonScroll > .fp-slidesNav.bottom{bottom:8px} #fullpage .section.horizonScroll > .fp-slidesNav{text-align:center;display:none} #fullpage .section.horizonScroll > .fp-slidesNav > ul{display:inline-block} #fullpage .section.horizonScroll > .fp-slidesNav > ul > li:nth-child(1) , #fullpage .section.horizonScroll > .fp-slidesNav > ul > li:nth-child(2) , #fullpage .section.horizonScroll > .fp-slidesNav > ul > li:nth-child(3) , #fullpage .section.horizonScroll > .fp-slidesNav > ul > li:nth-child(4) , #fullpage .section.horizonScroll > .fp-slidesNav > ul > li:nth-child(5){display:none} #fullpage #fp-nav ul li a span, #fullpage .fp-slidesNav ul li a span{background-color:#dcafd0} #fullpage .section .slide{position:relative;text-align:center;background-position:center center;background-size:cover} #fullpage .section .slide.bg span.bg{position:absolute;top:0;left:0;float:left;width:100%;min-width:1080px;height:100%;background-position:center center;background-size:cover;z-index:1} #fullpage .section .slide.bg.goods{padding-top:57px} #fullpage .section .slide.bg.goods{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } #fullpage .section .slide.bg.goods span.bg{position:relative;float:left;width:100%;height:100%} #fullpage .section .slide.bg.goods span.bg span.img{position:absolute;top:0;left:0;float:left;width:100%;min-width:1080px;height:100%} #fullpage .section .slide.bg.goods span.bg span.img{background-repeat:no-repeat;background-position:center center;background-size:auto 100%} #fullpage .section .slide.bg.goods span.bg .link{position:absolute;top:0;left:0;float:left;width:100%;min-width:1080px;height:100%;visibility:hidden;text-align:center} #fullpage .section .slide.bg.goods span.bg .link > .link_bg{display:inline-block;height:100%;position:relative} #fullpage .section .slide.bg.goods span.bg .link > .link_bg > a{position:absolute;float:left;width:2.063%;height:3.667%} #fullpage .section .slide.bg.goods span.bg .link > .link_bg.blink > a{ -webkit-animation-duration:2.00s; animation-duration:2.00s; -webkit-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite; -webkit-animation-name:tov-flash; animation-name:tov-flash; } #fullpage .section .slide.bg.goods span.bg .link > .link_bg > a > img{float:left;width:100%;height:100%} #fullpage .section .slide.bg.goods span.bg .link > .link_bg > img{height:100%} #fullpage .section .slide.bg.goods span.bg .link > .link_bg > img{opacity:0} #fullpage .section .slide.bg.goods.g1 span.bg .link > .link_bg > a{top:13.1%;left:69.3%} /*#fullpage .section .slide.bg.goods.g1 span.bg .link > .link_bg > img{opacity:0}*/ #fullpage .section .slide.bg.goods.g2 span.bg .link > .link_bg > a{top:35.8%;left:21.5%} /*#fullpage .section .slide.bg.goods.g2 span.bg .link > .link_bg > img{opacity:0}*/ #fullpage .section .slide.bg.goods.g3 span.bg .link > .link_bg > a{top:9.1%;left:22.1%} /*#fullpage .section .slide.bg.goods.g3 span.bg .link > .link_bg > img{opacity:0}*/ #fullpage .section .slide.bg.goods.g4 span.bg .link > .link_bg > a{top:13.1%;left:70.3%} /*#fullpage .section .slide.bg.goods.g4 span.bg .link > .link_bg > img{opacity:0}*/ #fullpage .section .slide.bg.goods.g5 span.bg .link > .link_bg > a{top:20.5%;left:69.5%} /*#fullpage .section .slide.bg.goods.g5 span.bg .link > .link_bg > img{opacity:0}*/ #fullpage .section .slide.bg.goods.g6 span.bg .link > .link_bg > a{top:8.9%;left:21.3%} /*#fullpage .section .slide.bg.goods.g6 span.bg .link > .link_bg > img{opacity:0}*/ #fullpage .section .slide.bg.goods.g7 span.bg .link > .link_bg > a{top:36.5%;left:16.5%} /*#fullpage .section .slide.bg.goods.g7 span.bg .link > .link_bg > img{opacity:0}*/ #fullpage .section .slide.bg.goods.g8 span.bg .link > .link_bg > a{width:19.3%;height:44%} #fullpage .section .slide.bg.goods.g8 span.bg .link > .link_bg > a.no1{top:5.8%;left:10.2%} #fullpage .section .slide.bg.goods.g8 span.bg .link > .link_bg > a.no1{ -webkit-transform:rotate(4deg); -moz-transform:rotate(4deg); -o-transform:rotate(4deg); transform:rotate(4deg); } #fullpage .section .slide.bg.goods.g8 span.bg .link > .link_bg > a.no2{top:4.1%;left:30.2%} #fullpage .section .slide.bg.goods.g8 span.bg .link > .link_bg > a.no2{ -webkit-transform:rotate(-2deg); -moz-transform:rotate(-2deg); -o-transform:rotate(-2deg); transform:rotate(-2deg); } #fullpage .section .slide.bg.goods.g8 span.bg .link > .link_bg > a.no3{top:5.9%;left:51%} #fullpage .section .slide.bg.goods.g8 span.bg .link > .link_bg > a.no3{ -webkit-transform:rotate(5deg); -moz-transform:rotate(5deg); -o-transform:rotate(5deg); transform:rotate(5deg); } #fullpage .section .slide.bg.goods.g8 span.bg .link > .link_bg > a.no4{top:6%;left:70.5%} #fullpage .section .slide.bg.goods.g8 span.bg .link > .link_bg > a.no4{ -webkit-transform:rotate(2deg); -moz-transform:rotate(2deg); -o-transform:rotate(2deg); transform:rotate(2deg); } #fullpage .section .slide.bg.goods.g8 span.bg .link > .link_bg > a.no5{top:49.9%;left:19.9%} #fullpage .section .slide.bg.goods.g8 span.bg .link > .link_bg > a.no5{ -webkit-transform:rotate(-2.8deg); -moz-transform:rotate(-2.8deg); -o-transform:rotate(-2.8deg); transform:rotate(-2.8deg); } #fullpage .section .slide.bg.goods.g8 span.bg .link > .link_bg > a.no6{top:51.4%;left:40.6%} #fullpage .section .slide.bg.goods.g8 span.bg .link > .link_bg > a.no6{ -webkit-transform:rotate(3.6deg); -moz-transform:rotate(3.6deg); -o-transform:rotate(3.6deg); transform:rotate(3.6deg); } #fullpage .section .slide.bg.goods.g8 span.bg .link > .link_bg > a.no7{top:49.6%;left:60.3%} #fullpage .section .slide.bg.goods.g8 span.bg .link > .link_bg > a.no7{ -webkit-transform:rotate(-3.0deg); -moz-transform:rotate(-3.0deg); -o-transform:rotate(-3.0deg); transform:rotate(-3.0deg); } /* µðÁ¹ÇÁ È¿°ú */ #fullpage .section .fp-slidesContainer{ width:100% !important; transform:none !important; -webkit-transform:none !important; -moz-transform:none !important; -ms-transform:none !important; -o-transform:none !important; } #fullpage .section .slide.fp-slide{position:absolute;top:0;left:0;float:left;width:100% !important;height:100%;z-index:1;opacity:0} #fullpage .section .slide.fp-slide{ -webkit-transition-duration:1.0s; transition-duration:1.0s; -webkit-transition-property:opacity; transition-property:opacity; } #fullpage .section .slide.fp-slide.active{z-index:2;opacity:1} #fullpage .section .slide.no1.bg span.bg.logo{opacity:0} #fullpage .section .slide.no1.bg span.bg.noise{} #fullpage .section .slide.no1.bg span.bg.gra{background-repeat:no-repeat;background-size:100% 100%} #fullpage .section .slide.no1.bg span.bg.gra.no1{background-image:url(//pinkagewig.img18.kr/site/ponystail/pc/gra1.png)} #fullpage .section .slide.no1.bg span.bg.gra.no2{background-image:url(//pinkagewig.img18.kr/site/ponystail/pc/gra2.png)} #fullpage .section .slide.no1.bg span.bg.gra.no3{background-image:url(//pinkagewig.img18.kr/site/ponystail/pc/gra3.png)} #fullpage .section .slide.no1.bg span.bg.gra.no4{background-image:url(//pinkagewig.img18.kr/site/ponystail/pc/gra4.png)} #fullpage .section .slide.no1.bg span.bg.gra.no1{ -webkit-animation: 2.5s infinite tov-gra1; animation: 2.5s infinite tov-gra1; } #fullpage .section .slide.no1.bg span.bg.gra.no2{ -webkit-animation: 2.5s infinite tov-gra2; animation: 2.5s infinite tov-gra2; } #fullpage .section .slide.no1.bg span.bg.gra.no3{ -webkit-animation: 2.5s infinite tov-gra3; animation: 2.5s infinite tov-gra3; } #fullpage .section .slide.no1.bg span.bg.gra.no4{ -webkit-animation: 2.5s infinite tov-gra4; animation: 2.5s infinite tov-gra4; } @-webkit-keyframes tov-gra1{ 0%{opacity:1} 33%{opacity:0} 66%{opacity:0} 100%{opacity:0} } @keyframes tov-gra1{ 0%{opacity:1} 33%{opacity:0} 66%{opacity:0} 100%{opacity:0} } @-webkit-keyframes tov-gra2{ 0%{opacity:0} 33%{opacity:1} 66%{opacity:0} 100%{opacity:0} } @keyframes tov-gra2{ 0%{opacity:0} 33%{opacity:1} 66%{opacity:0} 100%{opacity:0} } @-webkit-keyframes tov-gra3{ 0%{opacity:0} 33%{opacity:0} 66%{opacity:1} 100%{opacity:0} } @keyframes tov-gra3{ 0%{opacity:0} 33%{opacity:0} 66%{opacity:1} 100%{opacity:0} } @-webkit-keyframes tov-gra4{ 0%{opacity:0} 33%{opacity:0} 66%{opacity:0} 100%{opacity:1} } @keyframes tov-gra4{ 0%{opacity:0} 33%{opacity:0} 66%{opacity:0} 100%{opacity:1} } #fullpage .section .slide.no1.bg span.bg.noise.no1{background:url(//pinkagewig.img18.kr/site/ponystail/noise1.png)} #fullpage .section .slide.no1.bg span.bg.noise.no2{background:url(//pinkagewig.img18.kr/site/ponystail/noise2.png)} #fullpage .section .slide.no1.bg span.bg.noise.no3{background:url(//pinkagewig.img18.kr/site/ponystail/noise3.png)} #fullpage .section .slide.no1.bg span.bg.noise.no4{background:url(//pinkagewig.img18.kr/site/ponystail/noise4.png)} #fullpage .section .slide.no1.bg span.bg.noise.no1{ -webkit-animation: 0.5s infinite tov-noise; animation: 0.5s infinite tov-noise; } #fullpage .section .slide.no1.bg span.bg.noise.no2{ -webkit-animation: 0.5s infinite tov-noise2; animation: 0.5s infinite tov-noise2; } #fullpage .section .slide.no1.bg span.bg.noise.no3{ -webkit-animation: 1.0s infinite tov-noise3; animation: 1.0s infinite tov-noise3; } #fullpage .section .slide.no1.bg span.bg.noise.no4{ -webkit-animation: 1.5s infinite tov-noise4; animation: 1.5s infinite tov-noise4; } @-webkit-keyframes tov-noise{ 0%, 100% { background-position: 0 0; } 10% { background-position: -10% -15%; } 20% { background-position: -30% 10%; } 30% { background-position: 14% -50%; } 40% { background-position: 40% 50%; } 50% { background-position: -50% 20%; } 60% { background-position: 30% 10%; } 70% { background-position: 0% 30%; } 80% { background-position: 50% 70%; } 90% { background-position: -20% 20%; } } @keyframes tov-noise{ 0%, 100% { background-position: 0 0; } 10% { background-position: -10% -15%; } 20% { background-position: -30% 10%; } 30% { background-position: 14% -50%; } 40% { background-position: 40% 50%; } 50% { background-position: -50% 20%; } 60% { background-position: 30% 10%; } 70% { background-position: 0% 30%; } 80% { background-position: 50% 70%; } 90% { background-position: -20% 20%; } } @-webkit-keyframes tov-noise2{ 0% { background-position: 0 0; opacity:1; } 25% { background-position: -100px 25%; opacity:1; } 50% { background-position: 0 50%; opacity:1; } 75% { background-position: 100px 75%; opacity:0; } 100% { background-position: 0 100%; opacity:0; } } @keyframes tov-noise2{ 0% { background-position: 0 0; opacity:1; } 25% { background-position: -100px 25%; opacity:1; } 50% { background-position: 0 50%; opacity:1; } 75% { background-position: 100px 75%; opacity:0; } 100% { background-position: 0 100%; opacity:0; } } @-webkit-keyframes tov-noise3{ 0% { background-position: 0 0; opacity:0; } 25% { background-position: -100px 25%; opacity:1; } 50% { background-position: 0 50%; opacity:1; } 75% { background-position: 100px 75%; opacity:1; } 100% { background-position: 0 100%; opacity:0; } } @keyframes tov-noise3{ 0% { background-position: 0 0; opacity:0; } 25% { background-position: -100px 25%; opacity:1; } 50% { background-position: 0 50%; opacity:1; } 75% { background-position: 100px 75%; opacity:1; } 100% { background-position: 0 100%; opacity:0; } } @-webkit-keyframes tov-noise4{ 0% { background-position: 0 0; opacity:0; } 25% { background-position: -100px 25%; opacity:0; } 50% { background-position: 0 50%; opacity:1; } 75% { background-position: 100px 75%; opacity:1; } 100% { background-position: 0 100%; opacity:1; } } @keyframes tov-noise4{ 0% { background-position: 0 0; opacity:0; } 25% { background-position: -100px 25%; opacity:0; } 50% { background-position: 0 50%; opacity:1; } 75% { background-position: 100px 75%; opacity:1; } 100% { background-position: 0 100%; opacity:1; } } #fullpage .section .slide.no2.bg span.bg.left , #fullpage .section .slide.no2.bg span.bg.right{left:0} #fullpage .section .slide.no2.bg span.bg.left , #fullpage .section .slide.no2.bg span.bg.right{ -webkit-transition-duration:1.5s; transition-duration:1.5s; -webkit-transition-property:left; transition-property:left; } #fullpage .section .slide.no2.bg span.bg.ani{background-position:center bottom} #fullpage .section .slide.no2.bg span.bg.ani.obj{visibility:hidden} #fullpage .section .slide.no2.bg span.bg.ani.a11{opacity:0} #fullpage .section .slide.bg.intro span.obj{ -webkit-transition-duration:0.7s; transition-duration:0.7s; -webkit-transition-property:opacity; transition-property:opacity; } /*#fullpage .section .slide.no3.bg span.bg{background-position:center top}*/ #fullpage .section .slide.no3.bg span.obj{position:absolute;z-index:1;opacity:0} #fullpage .section .slide.no3.bg span.obj > img{width:80%} #fullpage .section .slide.no3.bg span.obj > img.flower{width:100%} #fullpage .section .slide.no3.bg span.obj{ -webkit-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite; } #fullpage .section .slide.no3.bg span.obj.o1{top:-2%;right:9%} #fullpage .section .slide.no3.bg span.obj.o1{ -webkit-animation-duration:2.0s; animation-duration:2.0s; -webkit-transform-origin:left bottom; -ms-transform-origin:left bottom; transform-origin:left bottom; -webkit-animation-name:tov-swing; animation-name:tov-swing; } #fullpage .section .slide.no3.bg span.obj.o2{top:36%;right:1%} #fullpage .section .slide.no3.bg span.obj.o2{ -webkit-animation-duration:1.5s; animation-duration:1.5s; -webkit-transform-origin:center center; -ms-transform-origin:center center; transform-origin:center center; -webkit-animation-name:tov-rotate; animation-name:tov-rotate; } #fullpage .section .slide.no3.bg span.obj.o3{top:-3%;right:35%} #fullpage .section .slide.no3.bg span.obj.o3{ -webkit-animation-duration:1.0s; animation-duration:1.0s; -webkit-transform-origin:center bottom; -ms-transform-origin:center bottom; transform-origin:center bottom; -webkit-animation-name:tov-bounce; animation-name:tov-bounce; } #fullpage .section .slide.no3.bg span.obj.o4{top:36%;left:20%} #fullpage .section .slide.no3.bg span.obj.o4{ -webkit-animation-duration:1.5s; animation-duration:1.5s; -webkit-transform-origin:center bottom; -ms-transform-origin:center bottom; transform-origin:center bottom; -webkit-animation-name:tov-bounce; animation-name:tov-bounce; } #fullpage .section .slide.no3.bg span.obj.o5{top:48%;right:23%} #fullpage .section .slide.no3.bg span.obj.o5{ -webkit-animation-duration:1.0s; animation-duration:1.0s; -webkit-transform-origin:center bottom; -ms-transform-origin:center bottom; transform-origin:center bottom; -webkit-animation-name:tov-bounce; animation-name:tov-bounce; } #fullpage .section .slide.no3.bg span.obj.o6{bottom:14%;right:4%} #fullpage .section .slide.no3.bg span.obj.o6{ -webkit-animation-duration:1.5s; animation-duration:1.5s; -webkit-transform-origin:center center; -ms-transform-origin:center center; transform-origin:center center; -webkit-animation-name:tov-swing; animation-name:tov-swing; } #fullpage .section .slide.no3.bg span.obj.o7{bottom:12%;left:1%} #fullpage .section .slide.no3.bg span.obj.o7{ -webkit-animation-duration:1.0s; animation-duration:1.0s; -webkit-transform-origin:right top; -ms-transform-origin:right top; transform-origin:right top; -webkit-animation-name:tov-swing; animation-name:tov-swing; } #fullpage .section .slide.no3.bg span.obj.o8{top:4%;left:19%} #fullpage .section .slide.no3.bg span.obj.o8{ -webkit-animation-duration:2.0s; animation-duration:2.0s; -webkit-transform-origin:center center; -ms-transform-origin:center center; transform-origin:center center; -webkit-animation-name:tov-swing; animation-name:tov-swing; } #fullpage .section .slide.no3.bg span.obj.o9{top:19%;left:4%} #fullpage .section .slide.no3.bg span.obj.o9{ -webkit-animation-duration:2.5s; animation-duration:2.5s; -webkit-transform-origin:center center; -ms-transform-origin:center center; transform-origin:center center; -webkit-animation-name:tov-rotate; animation-name:tov-rotate; } #fullpage .section .slide.no3.bg span.obj.o10{bottom:1%;left:14%} #fullpage .section .slide.no3.bg span.obj.o10{ -webkit-animation-duration:2.0s; animation-duration:2.0s; -webkit-transform-origin:center center; -ms-transform-origin:center center; transform-origin:center center; -webkit-animation-name:tov-rotate; animation-name:tov-rotate; } #fullpage .section .slide.no3.bg span.bg.ani{background-position:center bottom;opacity:0} #fullpage .section .slide.no4.bg span.bg{background-position:center bottom} #fullpage .section .slide.no4.bg span.obj{position:absolute;z-index:1;opacity:0} #fullpage .section .slide.no4.bg span.obj > img{width:100%} #fullpage .section .slide.no4.bg span.obj{ -webkit-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite; } #fullpage .section .slide.no4.bg span.obj.o1{top:21%;left:6%} #fullpage .section .slide.no4.bg span.obj.o1{ -webkit-animation-duration:2.0s; animation-duration:2.0s; -webkit-transform-origin:left top; -ms-transform-origin:left top; transform-origin:left top; -webkit-animation-name:tov-swing; animation-name:tov-swing; } #fullpage .section .slide.no4.bg span.obj.o2{top:0%;left:26%} #fullpage .section .slide.no4.bg span.obj.o2{ -webkit-animation-duration:1.0s; animation-duration:1.0s; -webkit-transform-origin:center bottom; -ms-transform-origin:center bottom; transform-origin:center bottom; -webkit-animation-name:tov-bounce; animation-name:tov-bounce; } #fullpage .section .slide.no4.bg span.obj.o3{top:0%;right:28%} #fullpage .section .slide.no4.bg span.obj.o3{ -webkit-animation-duration:1.5s; animation-duration:1.5s; -webkit-transform-origin:center bottom; -ms-transform-origin:center bottom; transform-origin:center bottom; -webkit-animation-name:tov-swing; animation-name:tov-swing; } #fullpage .section .slide.no4.bg span.obj.o4{top:22%;right:7%} #fullpage .section .slide.no4.bg span.obj.o4{ -webkit-animation-duration:1.5s; animation-duration:1.5s; -webkit-transform-origin:center bottom; -ms-transform-origin:center bottom; transform-origin:center bottom; -webkit-animation-name:tov-bounce; animation-name:tov-bounce; } #fullpage .section .slide.no4.bg span.bg.ani{background-position:center bottom;opacity:0} #fullpage .section .slide.no5.bg span.bg{background-position:center bottom} #fullpage .section .slide.no5.bg span.obj{position:absolute;z-index:1;opacity:0} #fullpage .section .slide.no5.bg span.obj > img{width:100%} #fullpage .section .slide.no5.bg span.obj{ -webkit-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite; } #fullpage .section .slide.no5.bg span.obj.o1{top:36%;left:10%} #fullpage .section .slide.no5.bg span.obj.o1{ -webkit-animation-duration:2.0s; animation-duration:2.0s; -webkit-transform-origin:left top; -ms-transform-origin:left top; transform-origin:left top; -webkit-animation-name:tov-swing; animation-name:tov-swing; } #fullpage .section .slide.no5.bg span.obj.o2{top:36%;left:32%} #fullpage .section .slide.no5.bg span.obj.o2{ -webkit-animation-duration:1.0s; animation-duration:1.0s; -webkit-transform-origin:center bottom; -ms-transform-origin:center bottom; transform-origin:center bottom; -webkit-animation-name:tov-bounce; animation-name:tov-bounce; } #fullpage .section .slide.no5.bg span.obj.o3{top:34%;right:30%} #fullpage .section .slide.no5.bg span.obj.o3{ -webkit-animation-duration:1.5s; animation-duration:1.5s; -webkit-transform-origin:center bottom; -ms-transform-origin:center bottom; transform-origin:center bottom; -webkit-animation-name:tov-swing; animation-name:tov-swing; } #fullpage .section .slide.no5.bg span.obj.o4{top:36%;right:8%} #fullpage .section .slide.no5.bg span.obj.o4{ -webkit-animation-duration:1.5s; animation-duration:1.5s; -webkit-transform-origin:center bottom; -ms-transform-origin:center bottom; transform-origin:center bottom; -webkit-animation-name:tov-bounce; animation-name:tov-bounce; } #fullpage .section .slide.no5.bg span.bg.ani{background-position:center center;opacity:0} #fullpage .section .slide.no14.bg{background-color:#ffdce3} #fullpage .section .slide.no14.bg span.bg.ani{ -webkit-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite; -webkit-animation-duration:1.0s; animation-duration:1.0s; -webkit-transform-origin:center bottom; -ms-transform-origin:center bottom; transform-origin:center bottom; -webkit-animation-name:tov-bounce; animation-name:tov-bounce; } /* animation speed */ .tov-animated050s{ -webkit-animation-duration:0.50s; animation-duration:0.50s; -webkit-animation-fill-mode:both; animation-fill-mode:both; } .tov-animated075s{ -webkit-animation-duration:0.75s; animation-duration:0.75s; -webkit-animation-fill-mode:both; animation-fill-mode:both; } .tov-animated100s{ -webkit-animation-duration:1s; animation-duration:1s; -webkit-animation-fill-mode:both; animation-fill-mode:both; } .tov-animated150s{ -webkit-animation-duration:1.50s; animation-duration:1.50s; -webkit-animation-fill-mode:both; animation-fill-mode:both; } .tov-animated200s{ -webkit-animation-duration:2.00s; animation-duration:2.00s; -webkit-animation-fill-mode:both; animation-fill-mode:both; } /* animation effect */ @-webkit-keyframes tov-fadeIn{ 0%{opacity:0} 50%{opacity:0} 60%{opacity:0.5} 70%{opacity:0} 80%{opacity:0.5} 90%{opacity:0} 100%{opacity:1} } @keyframes tov-fadeIn{ 0%{opacity:0} 50%{opacity:0} 60%{opacity:0.5} 70%{opacity:0} 80%{opacity:0.5} 90%{opacity:0} 100%{opacity:1} } .tov-fadeIn{ -webkit-animation-name:tov-fadeIn; animation-name:tov-fadeIn; } @-webkit-keyframes tov-fadeIn2{ 0%{opacity:0} 37%{opacity:0} 38%{opacity:0.1} 40%{opacity:0.3} 42%{opacity:0.1} 44%{opacity:0.5} 46%{opacity:0.1} 48%{opacity:0.6} 50%{opacity:0.3} 100%{opacity:1} } @keyframes tov-fadeIn2{ 0%{opacity:0} 37%{opacity:0} 38%{opacity:0.1} 40%{opacity:0.3} 42%{opacity:0.1} 44%{opacity:0.5} 46%{opacity:0.1} 48%{opacity:0.6} 50%{opacity:0.3} 100%{opacity:1} } .tov-fadeIn2{ -webkit-animation-name:tov-fadeIn2; animation-name:tov-fadeIn2; } @-webkit-keyframes tov-fadeIn3{ 0%{opacity:0} 50%{opacity:0} 100%{opacity:1} } @keyframes tov-fadeIn3{ 0%{opacity:0} 50%{opacity:0} 100%{opacity:1} } .tov-fadeIn3{ -webkit-animation-name:tov-fadeIn3; animation-name:tov-fadeIn3; } @-webkit-keyframes tov-bounce{ 0%, 20%, 53%, 80%, 100%{ -webkit-transition-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } 40%, 43%{ -webkit-transition-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform:translate3d(0, -15px, 0); transform:translate3d(0, -15px, 0); } 70%{ -webkit-transition-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform:translate3d(0, -7px, 0); transform:translate3d(0, -7px, 0); } 90%{ -webkit-transform:translate3d(0,-2px,0); transform:translate3d(0,-2px,0); } } @keyframes tov-bounce{ 0%, 20%, 53%, 80%, 100%{ -webkit-transition-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } 40%, 43%{ -webkit-transition-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform:translate3d(0, -15px, 0); transform:translate3d(0, -15px, 0); } 70%{ -webkit-transition-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform:translate3d(0, -7px, 0); transform:translate3d(0, -7px, 0); } 90%{ -webkit-transform:translate3d(0,-2px,0); transform:translate3d(0,-2px,0); } } .tov-bounce{ -webkit-transform-origin:center bottom; -ms-transform-origin:center bottom; transform-origin:center bottom; -webkit-animation-name:tov-bounce; animation-name:tov-bounce; } @-webkit-keyframes tov-bounceInUp{ 0%, 60%, 75%, 90%, 100%{ -webkit-transition-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0%{ opacity:0; -webkit-transform:translate3d(0, 3000px, 0); transform:translate3d(0, 3000px, 0); } 60%{ opacity:1; -webkit-transform:translate3d(0, -20px, 0); transform:translate3d(0, -20px, 0); } 75%{ -webkit-transform:translate3d(0, 10px, 0); transform:translate3d(0, 10px, 0); } 90%{ -webkit-transform:translate3d(0, -5px, 0); transform:translate3d(0, -5px, 0); } 100%{ -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); } } @keyframes tov-bounceInUp{ 0%, 60%, 75%, 90%, 100%{ -webkit-transition-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0%{ opacity:0; -webkit-transform:translate3d(0, 3000px, 0); transform:translate3d(0, 3000px, 0); } 60%{ opacity:1; -webkit-transform:translate3d(0, -20px, 0); transform:translate3d(0, -20px, 0); } 75%{ -webkit-transform:translate3d(0, 10px, 0); transform:translate3d(0, 10px, 0); } 90%{ -webkit-transform:translate3d(0, -5px, 0); transform:translate3d(0, -5px, 0); } 100%{ -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); } } .tov-bounceInUp{ -webkit-animation-name:tov-bounceInUp; animation-name:tov-bounceInUp; } @-webkit-keyframes tov-swing{ 20%{ -webkit-transform:rotate3d(0, 0, 1, 15deg); transform:rotate3d(0, 0, 1, 15deg); } 40%{ -webkit-transform:rotate3d(0, 0, 1, -10deg); transform:rotate3d(0, 0, 1, -10deg); } 60%{ -webkit-transform:rotate3d(0, 0, 1, 5deg); transform:rotate3d(0, 0, 1, 5deg); } 80%{ -webkit-transform:rotate3d(0, 0, 1, -5deg); transform:rotate3d(0, 0, 1, -5deg); } 100%{ -webkit-transform:rotate3d(0, 0, 1, 0deg); transform:rotate3d(0, 0, 1, 0deg); } } @keyframes tov-swing{ 20%{ -webkit-transform:rotate3d(0, 0, 1, 15deg); transform:rotate3d(0, 0, 1, 15deg); } 40%{ -webkit-transform:rotate3d(0, 0, 1, -10deg); transform:rotate3d(0, 0, 1, -10deg); } 60%{ -webkit-transform:rotate3d(0, 0, 1, 5deg); transform:rotate3d(0, 0, 1, 5deg); } 80%{ -webkit-transform:rotate3d(0, 0, 1, -5deg); transform:rotate3d(0, 0, 1, -5deg); } 100%{ -webkit-transform:rotate3d(0, 0, 1, 0deg); transform:rotate3d(0, 0, 1, 0deg); } } @-webkit-keyframes tov-rotate{ 0%{ -webkit-transform:rotate3d(0, 0, 1, 0deg); transform:rotate3d(0, 0, 1, 0deg); } 40%{ -webkit-transform:rotate3d(0, 0, 1, -180deg); transform:rotate3d(0, 0, 1, -180deg); } 60%{ -webkit-transform:rotate3d(0, 0, 1, -180deg); transform:rotate3d(0, 0, 1, -180deg); } 100%{ -webkit-transform:rotate3d(0, 0, 1, 0deg); transform:rotate3d(0, 0, 1, 0deg); } } @keyframes tov-rotate{ 0%{ -webkit-transform:rotate3d(0, 0, 1, 0deg); transform:rotate3d(0, 0, 1, 0deg); } 40%{ -webkit-transform:rotate3d(0, 0, 1, -180deg); transform:rotate3d(0, 0, 1, -180deg); } 60%{ -webkit-transform:rotate3d(0, 0, 1, -180deg); transform:rotate3d(0, 0, 1, -180deg); } 100%{ -webkit-transform:rotate3d(0, 0, 1, 0deg); transform:rotate3d(0, 0, 1, 0deg); } } @-webkit-keyframes tov-flash{ 0%, 50%, 100%{opacity:1} 25%, 75%{opacity:0} } @keyframes tov-flash{ 0%, 50%, 100%{opacity:1} 25%, 75%{opacity:0} } .tov-flash{ -webkit-animation-name:tov-flash; animation-name:tov-flash; } /* BASIC css end */