/*
* -skrollr-anchor-target, -skrollr-smooth-scrolling, -skrollr-emit-events, skrollr-menu-offset.
* 이후 복수 라인 주석은 에러를 발생시키므로 주의
*/

/* 페이지 #1 */
#slides {
    -skrollr-animation-name: slides;
    -skrollr-anchor-target: "#page-1"; 
}

@-skrollr-keyframes slides {
    100-start {
        opacity: 1;
    }
}

/* 페이지 #2 */
#page-2_1 {
    -skrollr-animation-name: page-2_1;
    -skrollr-anchor-target: "#page-2";
}

@-skrollr-keyframes page-2_1 {
    0 {
        background-color: rgb(187,99,93);
    }
    top {
        background-color: rgb(176,167,190);
    }
}

#page-2_1_1 {
    -skrollr-animation-name: page-2_1_1;
    -skrollr-anchor-target: "#page-2";   
}

@-skrollr-keyframes page-2_1_1 {
    center {
        opacity: 1;
    }
    bottom-top {
        opacity: 0;
    }

}

/* 페이지 #3 */
#page-3_1_1 {
    -skrollr-animation-name: page-3_1_1;
    -skrollr-anchor-target: "#page-3"; 
}

@-skrollr-keyframes page-3_1_1 {
    200-top {
        opacity: 1;
    }
}

#responsive-earth {
    -skrollr-animation-name: responsive-earth;
    -skrollr-anchor-target: "#responsive";     
}

@-skrollr-keyframes responsive-earth {
    bottom {
        left: 10%;
    }
    center {
        left: 20%;
    }
    100-top {
        left: 30%;
    }
    top {
        left: 40%;
    }
}

#responsive-notebook {
    -skrollr-animation-name: responsive-notebook;
    -skrollr-anchor-target: "#responsive";     
}

@-skrollr-keyframes responsive-notebook {
    bottom {
        bottom: -50%;
    }
    center {
        bottom: -30%;
    }
    100-top {
        bottom: 0%;
    }
}

#responsive-pad {
    -skrollr-animation-name: responsive-pad;
    -skrollr-anchor-target: "#responsive";     
}

@-skrollr-keyframes responsive-pad {
    bottom {
        bottom: -100%;
    }
    center {
        bottom: -50%;
    }
    100-top {
        bottom: 0%;
    }
}

#responsive-phone {
    -skrollr-animation-name: responsive-phone;
    -skrollr-anchor-target: "#responsive";
}

@-skrollr-keyframes responsive-phone {
    bottom {
        bottom: -100%;
    }
    center {
        bottom: -30%;
    }
    100-top {
        bottom: 0%;
    }
}

#ani-responsive {
    -skrollr-animation-name: ani-responsive;
    -skrollr-anchor-target: "#ani-responsive";
}

@-skrollr-keyframes ani-responsive {
    bottom-top {
        opacity: 0;
    }
    bottom {
        opacity: 1;
    }
}

#ani-html {
    -skrollr-animation-name: ani-html;
    -skrollr-anchor-target: "#ani-html";
}

@-skrollr-keyframes ani-html {
    bottom-top {
        opacity: 0;
    }
    bottom {
        opacity: 1;
    }
}


#ani-parallax {
    -skrollr-animation-name: ani-parallax;
    -skrollr-anchor-target: "#ani-parallax";
}

@-skrollr-keyframes ani-parallax {
    bottom-top {
        opacity: 0;
    }
    bottom {
        opacity: 1;
    }
}

#ani-parallax_1 {
    -skrollr-animation-name: ani-parallax_1;
    -skrollr-anchor-target: "#ani-parallax_1";
}

@-skrollr-keyframes ani-parallax_1 {
    bottom-top {
        opacity: 0;
    }
    bottom {
        opacity: 1;
    }
}

#ani-video_1 {
    -skrollr-animation-name: ani-video_1;
    -skrollr-anchor-target: "#ani-video_1";
}

@-skrollr-keyframes ani-video_1 {
    top-bottom {
        opacity: 1;
    }
    center {
        opacity: 1;
    }
    bottom {
        opacity: 1;
    }
    bottom-top {
        opacity: 0;
    }
}

#ani-test_1 {
    -skrollr-animation-name: ani-test_1;
    -skrollr-anchor-target: "#ani-test_1";
}

@-skrollr-keyframes ani-test_1 {
    bottom-top {
        opacity: 0;
    }
    bottom {
        opacity: 1;
    }
}
#ani-test_2 {
    -skrollr-animation-name: ani-test_2;
    -skrollr-anchor-target: "#ani-test_2";
}

@-skrollr-keyframes ani-test_2 {
    bottom-top {
        opacity: 0;
    }
    bottom {
        opacity: 1;
    }
}
#ani-test_3 {
    -skrollr-animation-name: ani-test_3;
    -skrollr-anchor-target: "#ani-test_3";
}

@-skrollr-keyframes ani-test_3 {
    bottom-top {
        opacity: 0;
    }
    bottom {
        opacity: 1;
    }
}
#ani-test_4 {
    -skrollr-animation-name: ani-test_4;
    -skrollr-anchor-target: "#ani-test_4";
}

@-skrollr-keyframes ani-test_4 {
    bottom-top {
        opacity: 0;
    }
    bottom {
        opacity: 1;
    }
}
#ani-test_devices {
    -skrollr-animation-name: ani-test_devices;
    -skrollr-anchor-target: "#ani-test_devices";
}

@-skrollr-keyframes ani-test_devices {
    bottom-top {
        opacity: 0;
    }
    bottom {
        opacity: 1;
    }
}

#sky {
    -skrollr-animation-name: sky;
    -skrollr-anchor-target: "#page-3_2_2"; 
}

@-skrollr-keyframes sky {
    bottom  {
        background: rgb(74,74,74);
    }
    center {
        background: rgb(140,201,220);
    }
}

#sky-stars {
    -skrollr-animation-name: sky-stars;
    -skrollr-anchor-target: "#page-3_2_2"; 
}

@-skrollr-keyframes sky-stars {
    bottom  {
        top: 10%; left: 12%;
    }
    center {
        top: -100%; left: 20%;
    }
    top {
        top: -150%; left: 30%;
    }
}

#sky-moon {
    -skrollr-animation-name: sky-moon;
    -skrollr-anchor-target: "#page-3_2_2"; 
}

@-skrollr-keyframes sky-moon {
    bottom  {
        top: 10%;
    }
    top {
        top: -150%;
    }
}

#sky-sun {
    -skrollr-animation-name: sky-sun;
    -skrollr-anchor-target: "#page-3_2_2"; 
}

@-skrollr-keyframes sky-sun {
    bottom  {
        top: 100%; left: 5%;
    }
    top {
        top: 40%; left: 20%;
    }
}

#ani-aws-title {
    -skrollr-animation-name: ani-aws-title;
    -skrollr-anchor-target: "#ani-aws-title";
}
@-skrollr-keyframes ani-aws-title {
    bottom-top {
        opacity: 0;
    }
    bottom {
        opacity: 1;
    }
}

#ani-ddos {
    -skrollr-animation-name: ani-ddos;
    -skrollr-anchor-target: "#ani-ddos";
}

@-skrollr-keyframes ani-ddos {
    bottom-top {
        opacity: 0;
    }
    bottom {
        opacity: 1;
    }
}

#ani-aws {
    -skrollr-animation-name: ani-aws;
    -skrollr-anchor-target: "#ani-aws";
}

@-skrollr-keyframes ani-aws {
    bottom-top {
        opacity: 0;
    }
    bottom {
        opacity: 1;
    }
}

#ani-aws_1 {
    -skrollr-animation-name: ani-aws_1;
    -skrollr-anchor-target: "#ani-aws_1";
}

@-skrollr-keyframes ani-aws_1 {
    bottom-top {
        opacity: 0;
    }
    bottom {
        opacity: 1;
    }
}


/*페이지 #4 */
#page-4_1 {
    -skrollr-animation-name: page-4_1;
    -skrollr-anchor-target: "#page-4";
}

@-skrollr-keyframes page-4_1 {
    bottom-top {
        background-image: !url("/img/basic/cloud_1.jpg");
    }
    100-top {
        background-image: !url("/img/basic/cloud_2.jpg");
    }
}

#browser-ie {
    -skrollr-animation-name: browser-ie;
    -skrollr-anchor-target: "#browser";
}

@-skrollr-keyframes browser-ie {
    bottom  {
        width: 50%;
        left: 40%;
        top:  80%;
        transform: rotate(0deg);
    }
    center {
        width: 24%;
        left: 40%;
        top: 50%;
        transform: rotate(180deg);
    }
    100-top {
        width: 20%;
        left: 40%;
        top: 20%;
        transform: rotate(360deg);
    }
}

#browser-chrome {
    -skrollr-animation-name: browser-chrome;
    -skrollr-anchor-target: "#browser";
}

@-skrollr-keyframes browser-chrome {
    bottom  {
        width: 60%;
        left: 60%;
        top: 50%;
        transform: rotate(0deg);
    }
    center {
        width: 55%;
        left: 65%;
        top: 30%;
        transform: rotate(45deg);
    }
    100-top {
        width: 50%;
        left: 70%;
        top: -10%;
        transform: rotate(90deg);
    }
}

#browser-firefox {
    -skrollr-animation-name: browser-firefox;
    -skrollr-anchor-target: "#browser";
}

@-skrollr-keyframes browser-firefox {
    bottom  {
        width: 15%;
        left: 10%;
        top: 50%;
        transform: rotate(0deg);
    }
    center {
        width: 12%;
        left: 8%;
        top: 40%;
        transform: rotate(90deg);
    }
    100-top {
        width: 10%;
        left: 6%;
        top: 30%;
        transform: rotate(180deg);
    }
}

#browser-safari {
    -skrollr-animation-name: browser-safari;
    -skrollr-anchor-target: "#browser";
}

@-skrollr-keyframes browser-safari {
    bottom  {
        width: 25%;
        left: 55%;
        top: 90%;
        transform: rotate(0deg);
    }
    center {
        width: 20%;
        left: 35%;
        top: 30%;
        transform: rotate(180deg);
    }
    100-top {
        width: 15%;
        left: 15%;
        top: -10%;
        transform: rotate(360deg);
    }
}

#browser-opera {
    -skrollr-animation-name: browser-opera;
    -skrollr-anchor-target: "#browser";
}

@-skrollr-keyframes browser-opera {
    bottom  {
        width: 18%;
        left: 20%;
        top: 40%;
        transform: rotate(0deg);
    }
    center {
        width: 20%;
        left: 24%;
        top: 30%;
        transform: rotate(30deg);
    }
    100-top {
        width: 15%;
        left: 28%;
        top: 20%;
        transform: rotate(60deg);
    }
}

#ani-pricing_1 {
    -skrollr-animation-name: ani-pricing_1;
    -skrollr-anchor-target: "#ani-pricing_1";
}

@-skrollr-keyframes ani-pricing_1 {
    bottom-top {
        opacity: 0;
    }
    bottom {
        opacity: 1;
    }
}

#ani-pricing_2 {
    -skrollr-animation-name: ani-pricing_2;
    -skrollr-anchor-target: "#ani-pricing_2";
}

@-skrollr-keyframes ani-pricing_2 {
    bottom-top {
        opacity: 0;
    }
    bottom {
        opacity: 1;
    }
}

#ani-pricing_3 {
    -skrollr-animation-name: ani-pricing_3;
    -skrollr-anchor-target: "#ani-pricing_3";
}

@-skrollr-keyframes ani-pricing_3 {
    bottom-top {
        opacity: 0;
    }
    bottom {
        opacity: 1;
    }
}
#ani-pricing_4 {
    -skrollr-animation-name: ani-pricing_4;
    -skrollr-anchor-target: "#ani-pricing_4";
}

@-skrollr-keyframes ani-pricing_4 {
    bottom-top {
        opacity: 0;
    }
    bottom {
        opacity: 1;
    }
}

#page-6_1 {
    -skrollr-animation-name: page-6_1;
    -skrollr-anchor-target: "#page-6_1";
}

@-skrollr-keyframes page-6_1 {
    top-bottom {
        opacity: 1;
    }
}

#page-6_2 {
    -skrollr-animation-name: page-6_2;
    -skrollr-anchor-target: "#page-6";
}

@-skrollr-keyframes page-6_2 {
    bottom-top {
        opacity: 1;
    }
    -100-top {
        opacity: 1;
    }
    -200-top {
        opacity: 1;
    }
}

#ani-form_1 {
    -skrollr-animation-name: ani-form_1;
    -skrollr-anchor-target: "#ani-form_1";
}

@-skrollr-keyframes ani-form_1 {
    bottom-top {
        opacity: 0;
    }
    bottom {
        opacity: 1;
    }
}

#ani-form_2 {
    -skrollr-animation-name: ani-form_2;
    -skrollr-anchor-target: "#ani-form_2";
}

@-skrollr-keyframes ani-form_2 {
    bottom-top {
        opacity: 0;
    }
    bottom {
        opacity: 1;
    }
}

#ani-form_3 {
    -skrollr-animation-name: ani-form_3;
    -skrollr-anchor-target: "#ani-form_3";
}

@-skrollr-keyframes ani-form_3 {
    bottom-top {
        opacity: 0;
    }
    bottom {
        opacity: 1;
    }
}

#ani-form_4 {
    -skrollr-animation-name: ani-form_4;
    -skrollr-anchor-target: "#ani-form_4";
}

@-skrollr-keyframes ani-form_4 {
    bottom-top {
        opacity: 0;
    }
    bottom {
        opacity: 1;
    }
}

#ani-form_5 {
    -skrollr-animation-name: ani-form_5;
    -skrollr-anchor-target: "#ani-form_5";
}

@-skrollr-keyframes ani-form_5 {
    bottom-top {
        opacity: 0;
    }
    bottom {
        opacity: 1;
    }
}

#post-contact {
    -skrollr-animation-name: post-contact;
    -skrollr-anchor-target: "#page-6_2";
}

@-skrollr-keyframes post-contact {
    -100-center {
        opacity: 0.5;
    }
    center {
        opacity: 0.9;
    }
    bottom-top {
        opacity: 0.9;
    }
}

#page-6_3 {
    -skrollr-animation-name: page-6_3;
    -skrollr-anchor-target: "#page-6";
}

@-skrollr-keyframes page-6_3 {
    bottom-top {
        opacity: 0;
    }
    -33p-top {
        opacity: 0;
    }

    -66p-top {
        opacity: 1;
    }
}

#page-6_3_1 {
    -skrollr-animation-name: page-6_3_1;
    -skrollr-anchor-target: "#page-6";
}

@-skrollr-keyframes page-6_3_1 {
    center {
        opacity: 0;
    }
    -100-center {
        opacity: 1;
    }

}

#page-6_4 {
    -skrollr-animation-name: page-6_4;
    -skrollr-anchor-target: "#page-6";
}

@-skrollr-keyframes page-6_4 {
    300-bottom {
        opacity: 0;
    }

    bottom {
        opacity: 1;
    }
}

#page-6_4_1 {
    -skrollr-animation-name: page-6_4_1;
    -skrollr-anchor-target: "#page-6";
}

@-skrollr-keyframes page-6_4_1 {
    100-bottom {
        opacity: 0;
    }
    bottom {
        opacity: 1;
    }
}