/*--
Author: &#72;&#84;&#77;&#76;&#32032;&#26448;&#32593;
Author URL: http://www.htmlsucai.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
--*/
/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, nav ul, nav li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after, q:before, q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* start editing from here */
a {
    text-decoration: none;
}

.txt-rt {
    text-align: right;
}
/* text align right */
.txt-lt {
    text-align: left;
}
/* text align left */
.txt-center {
    text-align: center;
}
/* text align center */
.float-rt {
    float: right;
}
/* float right */
.float-lt {
    float: left;
}
/* float left */
.clear {
    clear: both;
}
/* clear float */
.pos-relative {
    position: relative;
}
/* Position Relative */
.pos-absolute {
    position: absolute;
}
/* Position Absolute */
.vertical-base {
    vertical-align: baseline;
}
/* vertical align baseline */
.vertical-top {
    vertical-align: top;
}
/* vertical align top */
nav.vertical ul li {
    display: block;
}
/* vertical menu */
nav.horizontal ul li {
    display: inline-block;
}
/* horizontal menu */
img {
    max-width: 100%;
}
/*end reset*/
html, body {
    font-size: 100%;
    height: 100%;
    background: -webkit-radial-gradient(#e2dede 5%, #959595 60%); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(#e2dede 5%, #959595 60%); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(#e2dede 5%, #959595 60%); /* Firefox 3.6 - 15 */
    background: radial-gradient(#e2dede 5%, #959595 60%); /* ±ê×¼µÄÓï·¨ */
    font-family: 'Viga', sans-serif;
}

h1, h2, h3, h4, h5, h6, a, p {
    margin: 0;
}

ul, label {
    margin: 0;
    padding: 0;
}

body a:hover, body a {
    text-decoration: none;
}
/*-- main --*/
.copyright p {
    font-size: 1em;
    color: #fff;
    margin: 14em 0 0;
    line-height: 1.8em;
    text-align: center;
}

    .copyright p a {
        color: #EA4C89;
    }

        .copyright p a:hover {
            text-decoration: underline;
        }

.main {
    text-align: center;
}

.nav_w3l {
    padding: 3em 0 0;
}

    .nav_w3l ul li {
        display: inline-block;
        margin: 0 5px;
    }

        .nav_w3l ul li a {
            font-size: 1em;
            color: #fff;
            padding: 10px 20px;
            text-decoration: none;
        }

        .nav_w3l ul li.active a {
            background: #fff;
            color: #212121;
        }
/* Sweep To Bottom */
.hvr-sweep-to-bottom {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

    .hvr-sweep-to-bottom:before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #61DDF0;
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -webkit-transition-property: transform;
        transition-property: transform;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }

    .hvr-sweep-to-bottom:hover, .hvr-sweep-to-bottom:focus, .hvr-sweep-to-bottom:active {
        color: white;
    }

        .hvr-sweep-to-bottom:hover:before, .hvr-sweep-to-bottom:focus:before, .hvr-sweep-to-bottom:active:before {
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
        }

.main h1 {
    font-size: 13em;
    color: #fff;
    margin: 0.4em 0 0;
    line-height: 1;
}

.main h2 {
    font-size: 1em;
    color: #fff;
    text-transform: capitalize;
}

.more_w3ls {
    margin: 3em 0 5em;
}

    .more_w3ls a {
        padding: 8px 70px;
        background: #61DDF0;
        text-decoration: none;
        color: #212121;
        font-size: 1em;
        text-transform: uppercase;
        transition: .5s ease-in;
        -webkit-transition: .5s ease-in;
        -moz-transition: .5s ease-in;
        -o-transition: .5s ease-in;
        -ms-transition: .5s ease-in;
    }

        .more_w3ls a:hover {
            background: #fff;
            color: #212121;
        }

.wthree_social_icons {
    position: relative;
}

    .wthree_social_icons div {
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 48.5%;
        -ms-transform: translate(-40%,-40%);
        -webkit-transform: translate(-40%,-40%);
        transform: translate(-40%,-40%);
        -moz-transform: translate(-40%,-40%);
        -o-transform: translate(-40%,-40%);
    }

    /* Icons */

    .wthree_social_icons a {
        color: #fff;
        background: #FFFFFF;
        text-align: center;
        text-decoration: none;
        position: relative;
        display: inline-block;
        width: 40px;
        height: 40px;
        margin: 0 5px;
        -o-transition: all .5s;
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        transition: all .5s;
        -webkit-font-smoothing: antialiased;
    }

        .wthree_social_icons a:nth-of-type(1):hover {
            background: #3b5998;
        }

        .wthree_social_icons a:nth-of-type(2):hover {
            background: #55acee;
        }

        .wthree_social_icons a:nth-of-type(3):hover {
            background: #35465c;
        }
        /*-- &#72;&#84;&#77;&#76;&#32032;&#26448;&#32593; --*/
        .wthree_social_icons a:nth-of-type(4):hover {
            background: #00a0dc;
        }

        .wthree_social_icons a:nth-of-type(5):hover {
            background: #162221;
        }

        /* pop-up text */

        .wthree_social_icons a span {
            color: #212121;
            position: absolute;
            bottom: 0;
            left: -25px;
            right: -25px;
            padding: 5px 7px;
            z-index: -1;
            font-size: 14px;
            background: #fff;
            visibility: hidden;
            opacity: 0;
            -o-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            -webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            -moz-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

            /* pop-up text arrow */

            .wthree_social_icons a span:before {
                content: '';
                width: 0;
                height: 0;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                border-top: 5px solid #fff;
                position: absolute;
                bottom: -4px;
                left: 40px;
            }

        /* text pops up when icon is in hover state */

        .wthree_social_icons a:hover span {
            bottom: 50px;
            visibility: visible;
            opacity: 1;
        }

        /*-- agileits --*/
        /* font awesome icons */
        .wthree_social_icons a:before {
            transition: .5s ease-in;
            -webkit-transition: .5s ease-in;
            -moz-transition: .5s ease-in;
            -o-transition: .5s ease-in;
            -ms-transition: .5s ease-in;
        }

        .wthree_social_icons a:nth-of-type(1):before {
            content: '';
            background: url(../images/img-sp.png) no-repeat 13px 11px;
            display: block;
            width: 40px;
            height: 40px;
        }

        .wthree_social_icons a:nth-of-type(1):hover:before {
            background-position: 13px -25px;
        }

        .wthree_social_icons a:nth-of-type(2):before {
            content: '';
            background: url(../images/img-sp.png) no-repeat -18px 11px;
            display: block;
            width: 40px;
            height: 40px;
        }

        .wthree_social_icons a:nth-of-type(2):hover:before {
            background-position: -18px -28px;
        }

        .wthree_social_icons a:nth-of-type(3):before {
            content: '';
            background: url(../images/img-sp.png) no-repeat -53px 11px;
            display: block;
            width: 40px;
            height: 40px;
        }

        .wthree_social_icons a:nth-of-type(3):hover:before {
            background-position: -53px -29px;
        }

        .wthree_social_icons a:nth-of-type(4):before {
            content: '';
            background: url(../images/img-sp.png) no-repeat -89px 11px;
            display: block;
            width: 40px;
            height: 40px;
        }

        .wthree_social_icons a:nth-of-type(4):hover:before {
            background-position: -89px -28px;
        }

        .wthree_social_icons a:nth-of-type(5):before {
            /*-- &#72;&#84;&#77;&#76;&#32032;&#26448;&#32593; --*/
            content: '';
            background: url(../images/img-sp.png) no-repeat -122px 11px;
            display: block;
            width: 40px;
            height: 40px;
        }

        .wthree_social_icons a:nth-of-type(5):hover:before {
            background-position: -122px -28px;
        }
/*-----start-responsive-design------*/
@media (max-width:1366px) {
    .copyright p {
        margin: 13em 0 0;
    }
}

@media (max-width:1280px) {
    body {
        padding-bottom: 6em;
    }
}

@media (max-width:1080px) {
    .main h1 {
        font-size: 11em;
    }
}

@media (max-width:800px) {
    .main h1 {
        font-size: 9em;
    }

    .main h2 {
        font-size: 14px;
    }

    .more_w3ls a {
        padding: 8px 45px;
        font-size: 14px;
    }

    body {
        padding-bottom: 10em;
    }
}

@media (max-width:768px) {
    body {
        padding-bottom: 18.77em;
    }

    .main h1 {
        margin: 0.5em 0 0;
    }
}

@media (max-width:736px) {
    /*-- agileits --*/
    .wthree_social_icons div {
        left: 46.5%;
    }

    .copyright p {
        margin: 10em 0 0;
    }

    body {
        padding-bottom: 5em;
    }
}

@media (max-width:667px) {
    .main h1 {
        margin: 0.3em 0 0;
    }
}

@media (max-width:640px) {
    .main h1 {
        font-size: 7em;
    }

    .nav_w3l ul li a {
        font-size: 14px;
    }

    .copyright p {
        margin: 12em 0 0;
        font-size: 14px;
    }

    .main h1 {
        margin: 0.5em 0 0;
    }

    .copyright p {
        margin: 14em 0 0;
    }

    body {
        padding-bottom: 13em;
    }
}

@media (max-width: 600px) {
    .copyright p {
        margin: 12em 0 0;
    }

    body {
        padding-bottom: 4em;
    }

    .nav_w3l {
        padding: 2em 0 0;
    }

        .nav_w3l ul li {
            margin: 0;
        }
}

@media (max-width:480px) {
    .nav_w3l ul li a {
        padding: 8px 15px;
    }

    .wthree_social_icons div {
        left: 44.5%;
        width: 56%;
    }

    .main h1 {
        font-size: 6em;
    }

    .more_w3ls {
        margin: 2em 0 4em;
    }

        .more_w3ls a {
            padding: 8px 30px;
        }

    .wthree_social_icons a {
        margin: 0 2px;
    }

    body {
        padding-bottom: 19em;
    }

    .wthree_social_icons a:hover span {
        bottom: 46px;
    }

    .wthree_social_icons a span {
        padding: 5px 5px;
        font-size: 13px;
    }

    .copyright p {
        padding: 0 1em;
    }
}

@media (max-width: 414px) {
    .nav_w3l ul li a {
        padding: 6px 10px;
        font-size: 13px;
    }

    .more_w3ls {
        margin: 2em 0 4em;
    }

    .wthree_social_icons div {
        width: 60%;
    }

    body {
        padding-bottom: 11.05em;
    }
}

@media (max-width:384px) {
    .main h1 {
        font-size: 5em;
    }

    .main h2, .copyright p {
        font-size: 13px;
    }

    .more_w3ls a {
        font-size: 13px;
        padding: 7px 25px;
    }

    .wthree_social_icons div {
        width: 64%;
    }

    .more_w3ls {
        margin: 1.5em 0 4em;
    }

    body {
        padding-bottom: 10em;
    }
}

@media (max-width: 375px) {
    .wthree_social_icons div {
        width: 66%;
    }
}

@media (max-width:320px) {
    .nav_w3l ul li a {
        padding: 4px 5px;
        font-size: 12px;
    }

    .main h2, .copyright p, .more_w3ls a, .wthree_social_icons a span {
        font-size: 12px;
    }

    .wthree_social_icons div {
        width: 78%;
    }

    .copyright p {
        margin: 14em 0 0;
    }

    body {
        padding-bottom: 3.55em;
    }
}
