body {
    position: relative;
    top: 0;
    min-width: 1200px;
    font-family: Microsoft YaHei;
}

h1 {
    color: #2d3e50;
    font-size: 26px;
    font-weight: normal;
    margin-top: 10px
}

button {
    cursor: pointer;
}

.line {
    margin: 20px 0 50px 0;
    clear: both;
    background: url(../img/img_index/line.png) center no-repeat;
    width: 100%;
    height: 1px
}

.nav {
    background: #282828;
    border: none;
    position: absolute;
}

.nav a {
    color: #a0a0a0;
}

.nav.white {
    /* position: fixed; */
    background: #ffffff;
    border-bottom: 1px solid #dddddd;
    -webkit-transition-timing-function: cubic-bezier(.2, 1, .3, 1);
    transition-timing-function: cubic-bezier(.2, 1, .3, 1);
}

.rnav {
    position: fixed;
    right: 20px;
    top: 40%;
    z-index: 0;
    opacity: 0;
}

.rnav ul {
    list-style: none;
}

.rnav ul:hover span {
    width: 60px;
    height: 30px;
}

.rnav ul li {
    line-height: 40px;
    font-size: 14px;
    color: #a0a0a0;
    float: left;
    clear: both;
    cursor: pointer;
    transition: all 0.5s;
}

.rnav ul li span {
    font-size: 14px;
    color: #a0a0a0;
    transition: all 0.5s;
    width: 0px;
    height: 30px;
    overflow: hidden;
    display: inline-block;
}

.rnav .circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #a0a0a0;
    float: right;
    margin: 14px 4px 14px 14px;
    transition: all 0.5s;
}

.rnav ul li:hover span {
    color: #689de4
}

/* .rnav ul li:hover .circle{border-color:#689de4;width:12px;height:12px;margin:12px 0px 12px 12px;border-width:2px} */

.rnav ul li:hover .circle {
    border-color: #689de4;
    background: #689de4
}

.rnav .curent {
    color: #689de4
}

/* //.rnav .curent .circle{border-color:#689de4;width:12px;height:12px;margin:12px 0px 12px 12px;border-width:2px} */

.rnav .curent .circle {
    border-color: #689de4;
    background: #689de4
}

.welcome,
.welcome .bakcdot,
.welcome .logo,
.welcome .bg {
    width: 100%;
    height: 100%;
    z-index: 0;
}

.welcome .logo {
    position: absolute;
    top: 0;
}

.welcome {
    background: #000304 center;
}

@-webkit-keyframes c_rotate1 {
    to {
        -webkit-transform: rotate(-360deg);
    }
}

@keyframes c_rotate1 {
    to {
        transform: rotate(-360deg);
    }
}

@-webkit-keyframes c_rotate {
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes c_rotate {
    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes glrun {
    0% {
        top: 20%;
        opacity: 1;
    }
    50% {
        top: 25%;
        opacity: 1;
    }
    100% {
        top: 30%;
        opacity: 0.3;
    }
}

@keyframes glrun {
    0% {
        top: 20%;
        opacity: 1;
    }
    50% {
        top: 25%;
        opacity: 1;
    }
    100% {
        top: 30%;
        opacity: 0.3;
    }
}

.welcome .shubiao p:first-child {
    width: 300px;
    height: 20px;
    font-size: 15px;
    cursor: pointer;
    color: #fff;
    margin-top: -6%;
    ;
}

@-webkit-keyframes slidetounlock {
    0% {
        background-position: -150px 0;
    }
    80% {
        background-position: 100px 0;
    }
    100% {
        background-position: 150px 0;
    }
}

@keyframes slidetounlock {
    0% {
        background-position: -150px 0;
    }
    80% {
        background-position: 100px 0;
    }
    100% {
        background-position: 150px 0;
    }
}

/* .welcome .shubiao p:hover{color:#689de4;} */

.welcome .title {
    display: table-cell;
    vertical-align: middle;
    width: 100%
}

.welcome .border {
    width: 270px;
    height: 80px;
    position: relative;
    left: 15%;
    text-align: left
}

.welcome .gunlun img {
    width: 23px;
    position: relative;
    top: -11px;
}

@-webkit-keyframes lt {
    2.5% {
        left: -20px;
        top: -20px;
    }
    15% {
        left: -20px;
        top: -20px;
    }
    17.5% {
        left: 0;
        top: 0;
    }
}

@keyframes lt {
    2.5% {
        left: -20px;
        top: -20px;
    }
    15% {
        left: -20px;
        top: -20px;
    }
    17.5% {
        left: 0;
        top: 0;
    }
}

.welcome .border .rt {
    top: 0;
    right: 0;
    -webkit-animation: rt 20s infinite;
    animation: rt 20s infinite;
}

@-webkit-keyframes rt {
    25% {
        right: 0;
        top: 0
    }
    27.5% {
        right: -20px;
        top: -20px;
    }
    40% {
        right: -20px;
        top: -20px;
    }
    42.5% {
        right: 0;
        top: 0;
    }
}

@keyframes rt {
    25% {
        right: 0;
        top: 0
    }
    27.5% {
        right: -20px;
        top: -20px;
    }
    40% {
        right: -20px;
        top: -20px;
    }
    42.5% {
        right: 0;
        top: 0;
    }
}

@-webkit-keyframes lb {
    50% {
        left: 0;
        bottom: 0
    }
    52.5% {
        left: -20px;
        bottom: -20px;
    }
    62.5% {
        left: -20px;
        bottom: -20px;
    }
    65% {
        left: 0;
        bottom: 0;
    }
}

@keyframes lb {
    50% {
        left: 0;
        bottom: 0
    }
    52.5% {
        left: -20px;
        bottom: -20px;
    }
    62.5% {
        left: -20px;
        bottom: -20px;
    }
    65% {
        left: 0;
        bottom: 0;
    }
}

@-webkit-keyframes rb {
    75% {
        right: 0;
        bottom: 0
    }
    77.5% {
        right: -20px;
        bottom: -20px;
    }
    90% {
        right: -20px;
        bottom: -20px;
    }
    92.5% {
        right: 0;
        bottom: 0;
    }
}

@keyframes rb {
    75% {
        right: 0;
        bottom: 0
    }
    77.5% {
        right: -20px;
        bottom: -20px;
    }
    90% {
        right: -20px;
        bottom: -20px;
    }
    92.5% {
        right: 0;
        bottom: 0;
    }
}

.welcome .border i {
    margin: 10px 0 0 20px;
    font-size: 36px;
    color: #fff;
    line-height: 50px
}

.welcome .border p {
    color: #fff;
    font-size: 16px;
    margin: 5px 0 0 20px;
    letter-spacing: 2px;
}

.banner {
    width: 100%;
    height: 700px;
    background: #000;
    padding-top: 0px;
    position: relative;
    margin-top: -20px;
}

.banner a div {
    width: 100%;
    height: 100%;
    position: absolute;
    cursor: pointer;
    opacity: 0;
    z-index: 0;
    transition: opacity 1s;
}

.banner .left,
.banner .right {
    width: 18px;
    height: 32px;
    position: absolute;
    top: 50%;
    cursor: pointer;
    opacity: 0;
    transition: all 0.5s;
    padding: 24px 21px 24px 21px;
    z-index: 2;
}

.banner .left {
    left: 80px;
}

.banner .right {
    right: 80px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.banner .left:hover,
.banner .right:hover {
    background: #689de4
}

.banner:hover .right {
    opacity: 1
}

.banner:hover .left {
    opacity: 1
}

.banner img {
    width: 18px;
    height: 32px
}

/* .banner{position: relative; height: 500px;} */

/* .banner .bd{}
.banner .bd ul{}
.banner .bd ul li{height:200px;}
.banner .hd{position: absolute; bottom: 20px; width: 100%;}
.banner .hd ul{width: 100%; text-align: center;}
.banner .hd ul li{margin: 0 10px; display: inline-block; *display: inline; zoom: 1; height: 12px; width: 12px; background: #ccc; border-radius:50%; cursor: pointer;}
.banner .hd ul li.on{background: #da251c;} */

.about {
    width: 100%;
}

.about .title2 .tit_left,
.tit_right {
    height: 10px;
    width: 180px;
    position: absolute;
}

.about .title2 .tit_left {
    margin-left: -172px;
    margin-top: 21px;
}

.about .title2 .tit_right {
    margin-left: 200px;
    margin-top: -26px;
}

.about .about_c {
    width: 100%;
    max-width: 1020px;
    height: 335px;
    position: relative;
}

.about .item {
    width: 340px;
    height: 340px;
    float: left;
    position: relative;
    cursor: pointer
}

.about .item_o {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 2px solid #f8f8f8;
    top: 75px;
    position: absolute;
    left: 88px;
    opacity: 0
}

.about .item_g {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    border: 2px solid #689de4;
    margin-top: 90px;
}

.about .item_w {
    position: relative;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    border: 6px solid #f8f8f8;
    transition: all 1s;
}

.about .item_w svg {
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
    transition: all 1s;
}

.about .item_w i {
    position: relative;
    z-index: 2;
    font-size: 34px;
    line-height: 116px;
    transition: all 1s;
}

.about .item p {
    color: #2d3e50;
    font-size: 20px;
    margin-top: 30px;
    display: block;
    transition: all 1s;
}

.about .item p i {
    position: relative;
    top: 2px;
    transition: all 1s;
}

.about .item:hover .item_o {
    border-color: #ffce55;
    -webkit-animation: shan 1.5s;
    animation: shan 1.5s;
}

@-webkit-keyframes shan {
    1% {
        opacity: 1
    }
    100% {
        width: 180px;
        height: 180px;
        top: 65px;
        left: 78px;
        opacity: 0;
    }
}

@keyframes shan {
    1% {
        opacity: 1
    }
    100% {
        width: 180px;
        height: 180px;
        top: 65px;
        left: 78px;
        opacity: 0;
    }
}

.about .item:hover .item_w {
    background: #689de4;
    border-color: #fff
}

.about .item:hover .item_w svg {
    opacity: 1;
}

.about .item:hover p {
    color: #689de4;
}

.about .item:hover .item_w i {
    color: #fff;
    background: #689de4;
    border-radius: 50em;
    padding: 4px 5px;
}

.about .item:hover p i {
    color: #689de4;
    margin: 0 5px 0 5px
}

.who {
    width: 100%;
    background: #fff;
}

.who .who_c {
    width: 100%;
    max-width: 1200px;
    position: relative;
    padding: 80px 0 20px 0;
}

.who p.whowe,
.who span.change {
    font-size: 18px;
    line-height: 35px;
    letter-spacing: 2px;
    padding-bottom: 50px;
    display: block;
}

.who span.change {
    color: #689de4;
    padding-bottom: 0
}

.work {
    width: 100%;
    background: #fff;
}

.work .work_c {
    width: 100%;
    max-width: 1200px;
    position: relative;
    padding: 80px 0 90px 0;
    overflow: hidden;
}

.work i {
    font-size: 26px;
    color: #ffce55;
    /* padding-bottom:0; */
}

.work .item {
    width: 285px;
    height: 260px;
    margin: 0 20px 20px 0;
    float: left;
    position: relative;
}

.work .item p {
    font-size: 16px;
    position: absolute;
    bottom: 0;
    color: #333;
    width: 210px;
    text-overflow: ellipsis;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
}

.work .item span {
    font-size: 14px;
    position: absolute;
    bottom: 0;
    color: #888;
    right: 0;
}

.work .item img {
    width: 285px;
    height: 210px;
    padding: 0;
    position: relative;
    z-index: 2
}

.work .item .back {
    width: 285px;
    height: 210px;
    position: absolute;
    top: 0;
    overflow: hidden;
}

.work .item .green {
    height: 400px;
    width: 400px;
    background: #689de4;
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #689de4), color-stop(1, #ddd));
    position: relative;
    left: -57px;
    top: -95px;
}

.work .item .black {
    width: 265px;
    height: 190px;
    margin: 10px;
    position: relative;
    background: #000;
    position: absolute;
    z-index: 3;
    opacity: 0;
    transition: all 0.5s;
}

.work .item .black i {
    position: relative;
    top: -30px;
    transition: all 0.5s;
}

.work .item:hover img {
    width: 265px;
    height: 190px;
    margin: 10px
}

.work .item:hover .black {
    opacity: 0.8
}

.work .item:hover .black i {
    top: 80px
}

.work .item:hover .green {
    -webkit-animation: w_rotate 5s linear infinite;
    animation: w_rotate 5s linear infinite;
}

@-webkit-keyframes w_rotate {
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes w_rotate {
    to {
        transform: rotate(360deg);
    }
}

.news {
    width: 100%;
}

.news .news_c {
    width: 100%;
    max-width: 1200px;
    position: relative;
    padding: 60px 0 80px 0;
    overflow: hidden;
}

.news i {
    font-size: 26px;
    color: #fff
}

.news .short {
    width: 250px;
    height: 173px;
    float: left;
    margin: 0 20px 20px 0;
    background: #2d3e50;
    position: relative;
    overflow: hidden;
}

.news .short img {
    width: 250px;
    height: 173px;
    position: relative;
    transition: all 0.5s;
    top: 0;
}

.news .title {
    width: 100%;
    height: 100px;
    background: rgba(45, 62, 80, 0.6);
    position: absolute;
    transition: all 0.5s;
}

.news .title p {
    font-size: 16px;
    color: #fff;
    padding: 8px 15px 15px 15px;
    text-align: left;
    /* height: 30px; */
    line-height: 160%;
}

.news .title .sort {
    color: #50c1e9;
    float: left;
    font-size: 14px;
    margin: 10px 0 0 15px
}

.news .title .date {
    color: #a0a0a0;
    float: right;
    font-size: 14px;
    margin: 10px 15px 0 0;
}

.news .short:hover img {
    top: -50px;
}

.news .short:hover .title {
    bottom: 0px;
    background: rgba(45, 62, 80, 1);
}

.news .long {
    width: 390px;
    height: 174px;
    float: left;
    margin: 0 20px 20px 0;
    background: #2d3e50;
    position: relative;
    overflow: hidden;
}

.news .long img {
    width: 390px;
    height: auto;
    position: relative;
    top: 0px;
    transition: all 0.5s;
}

.news .long:hover img {
    top: -50px;
}

.news .long:hover .title {
    bottom: 0px;
    background: rgba(45, 62, 80, 1);
}

.links {
    position: relative;
    width: 1200px;
    /* margin-left: 8%; */
    background: #fff;
}

.links .links_dt {
    float: left;
}

.links .links_dd {
    float: left;
    font-size: 14px;
    padding: 1px 2rem 0px 2rem;
    border-right: 2px solid;
    line-height: 11px;
    margin: 7px 0 0 0;
}

.links .links_dd:last-child {
    border-right: none;
}

.partner {
    width: 100%;
    background: #fff;
}

.partner .partner_c {
    width: 100%;
    max-width: 1200px;
    position: relative;
    padding: 60px 0 100px 0;
    overflow: hidden;
}

.partner i {
    font-size: 26px;
    color: #ffce55
}

.partner .list {
    width: 100%;
    height: 130px;
    overflow: hidden;
    padding-top: 70px;
}

.partner .item {
    width: 299px;
    border-right: 1px solid #dddddd;
    float: left;
    height: 97px;
    padding: 10px 0 10px 0;
    overflow: hidden;
}

.partner .item img {
    transition: all 0.5s;
    width: 100%;
}

.partner .item p {
    font-size: 18px;
    margin-top: 3px;
}

.partner .item:hover img {
    width: 80%;
}

.know {
    width: 100%;
    background: #383a39;
}

.know .know_c {
    width: 100%;
    max-width: 1200px;
    position: relative;
    height: 180px
}

.know p {
    color: #fff;
    font-size: 20px;
    line-height: 180px;
    width: 900px;
    float: left;
}

.know .button {
    width: 200px;
    height: 60px;
    float: right;
    border: 1px solid #689de4;
    margin: 60px 85px 0 0;
    cursor: pointer;
    transition: all 0.5s;
    position: relative;
    overflow: hidden;
}

.know .button span {
    font-size: 18px;
    color: #fff;
    line-height: 60px;
    position: relative;
    display: block;
    transition: left 0.5s;
}

.know .button i {
    position: absolute;
    left: -113px;
    color: #fff;
    font-size: 26px;
    line-height: 60px;
    top: 0;
    transition: left 0.5s;
}

.know .button:hover {
    background: #689de4;
}

.contact {
    width: 100%;
    background: #fff;
    height: 730px;
    position: relative;
}

.contact .contact_c {
    width: 100%;
    max-width: 1200px;
    position: relative;
    padding: 60px 0 200px 0;
    z-index: 5
}

.contact i {
    font-size: 26px;
    color: #ffce55
}

.contact .info {
    width: 600px;
    float: left;
    padding-top: 10px
}

.contact .leavemes {
    width: 600px;
    float: left;
}

.contact h2 {
    font-size: 18px;
    font-weight: normal;
    color: #2d3e50;
    padding: 10px 0 10px 0
}

.contact .info p {
    color: #2d3e50;
    font-size: 16px;
    line-height: 60px;
    position: relative;
}

.contact .info p i {
    color: #689de4;
    margin: 30px 10px 0 10px;
    position: relative;
    top: 5px
}

.contact .share {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #2d3e50;
    text-align: center;
    float: left;
    margin: 30px 10px 0 10px
}

.contact .share i {
    color: #2d3e50;
    line-height: 40px;
    cursor: pointer;
}

.contact .leavemes form {}

.contact .leavemes input {
    width: 598px;
    height: 50px;
    margin-top: 20px;
    outline: none;
    padding-left: 20px;
    font-size: 16px;
    color: #333;
    border: 1px solid #cccccc;
    transition: all 0.5s;
}

.contact .leavemes input:focus {
    border-color: #689de4;
}

.contact .leavemes textarea {
    width: 600px;
    height: 80px;
    resize: none;
    margin-top: 20px;
    outline: none;
    font-size: 16px;
    color: #333;
    border: 1px solid #cccccc;
    transition: all 0.5s;
    padding: 10px 0 0 20px
}

.contact .leavemes textarea:focus {
    border-color: #689de4;
}

.contact .leavemes button {
    border: 1px solid #689de4;
    color: #2d3e50;
    font-size: 16px;
    background: transparent;
    width: 120px;
    height: 40px;
    margin-top: 40px;
    cursor: pointer;
    transition: all 0.5s;
    float: left;
    outline: none;
}

.contact .leavemes button:hover {
    background: #689de4;
    color: #fff
}

.contact .leavemes .button {
    width: 118px;
    height: 38px;
    border: 1px solid #ffce55;
    color: #2d3e50;
    font-size: 16px;
    background: transparent;
    ;
    margin: 40px 0 0 40px;
    cursor: pointer;
    transition: all 0.5s;
    text-align: center;
    float: left;
    line-height: 40px
}

.contact .leavemes .button:hover {
    background: #ffce55;
    color: #fff
}

.contact #weixin:hover {
    border-color: #689de4
}

.contact #weixin:hover i {
    color: #689de4
}

.contact #wangwang:hover {
    border-color: #50c1e9
}

.contact #wangwang:hover i {
    color: #50c1e9
}

.contact #weibo:hover {
    border-color: #e84c39
}

.contact #weibo:hover i {
    color: #e84c39
}

.erweima {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    top: 0;
    opacity: 0;
    z-index: -1
}

.erweima .close {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #fff;
    position: relative;
    margin-top: 180px;
    left: 125px;
    z-index: 0;
    transition: all 0.5s;
    top: 55px;
    opacity: 0
}

.erweima .close i {
    color: #2d3e50;
    line-height: 55px;
    cursor: pointer;
}

.erweima img {
    top: 45%;
    transition: 0.5s;
    width: 0;
    z-index: 8
}

.join {
    width: 100%;
    background: url(../img/img_index/join.png) #000 center no-repeat;
    height: 190px
}

.join .join_c {
    width: 650px;
}

.join i {
    float: left;
    color: #fff;
    font-size: 36px;
    line-height: 190px
}

.join button {
    width: 200px;
    height: 60px;
    background: transparent;
    border: 1px solid #689de4;
    color: #fff;
    font-size: 18px;
    margin-top: 65px;
    outline: none;
    transition: all 0.5s;
}

.join button:hover {
    background: #689de4;
}

.footer {
    width: 100%;
    /* height: 120px; */
    background-color: #103166;
    position: relative;
    margin-top: 20px;
}

.foot-col--3 .foot-nav dl {
    /* min-width: 160px; */
    float: left;
    /* margin-right: 100px; */
    margin: 2% 5% 0 5%;
}

.foot-col--3 {
    /* float: left; */
    width: 1200px;
}

.foot-nav {
    line-height: 24px;
    padding-top: 20px;
}

.foot-col--3 .foot-nav dl dt {
    font-size: 18px;
    color: #fff;
    font-weight: unset;
}

.foot-col--3 .foot-nav dl dd a {
    color: #e5e5e5;
    font-size: 14px;
    font-weight: unset;
}

/* .foot-col--3 .foot-nav .first_dl {
    text-align: center;
    margin: 30px 120px 0 75px;
} */

.foot-col--3 .foot-nav .first_dl dd {
    font-size: 14px;
    color: #fff;
    margin-bottom: 5px;
    text-align: center;
}

.foot-col--3 .foot-nav .first_dl .bottom_logo_text {
    font-size: 22px;
}

.foot-wechat img {
    width: 125px;
    height: 125px;
}

.foot-wechat span,
.foot-copyright a {
    color: #fff;
}

.foot-wechat dd {
    color: #fff;
    text-align: center;
}

.footer_hr img {
    width: 100%;
    height: 1px;
    margin: 30px -85px 15px;
}

.foot-copyright {
    color: #fff;
    margin: 0;
}

.pieTip {
    position: absolute;
    float: left;
    z-index: 3;
    min-width: 30px;
    max-width: 300px;
    padding: 5px 18px 6px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .97);
    color: #444;
    font-size: 14px;
    text-shadow: 0 1px 0 #fff;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.3;
    letter-spacing: .06em;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5);
    -webkit-transform: all .3s;
    -moz-transform: all .3s;
    -ms-transform: all .3s;
    -o-transform: all .3s;
    transform: all .3s;
    pointer-events: none;
}

.pieTip:after {
    position: absolute;
    left: 50%;
    bottom: -6px;
    content: "";
    height: 0;
    margin: 0 0 0 -6px;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 6px solid rgba(255, 255, 255, .95);
    line-height: 0;
}

.chart path {
    cursor: pointer;
}

.dialog {
    position: fixed;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    pointer-events: none;
    z-index: 100;
}

.dialog,
.dialog-overlay {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.dialog-open .dialog-overlay {
    -webkit-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

.dialog-open .dialog-overlay {
    opacity: 1;
    pointer-events: auto;
}

.dialog-overlay {
    position: absolute;
    z-index: 1;
    background: rgba(55, 58, 71, 0.9);
    opacity: 0;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    -webkit-backface-visibility: hidden;
}

.dialog.dialog-open .dialog-content {
    opacity: 1;
}

.dialog-open .dialog-content {
    pointer-events: auto;
}

.dialog-content {
    padding: 0;
    background: transparent;
}

.dialog-content {
    width: 50%;
    max-width: 560px;
    min-width: 290px;
    text-align: center;
    position: relative;
    z-index: 5;
    opacity: 0;
}

.morph-shape {
    position: absolute;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    top: -2px;
    left: -2px;
    z-index: -1;
}

.dialog-open .morph-shape svg rect {
    -webkit-animation: anim-dash 0.6s forwards;
    animation: anim-dash 0.6s forwards;
}

.morph-shape svg rect {
    stroke: #fff;
    stroke-width: 2px;
    stroke-dasharray: 1680;
}

@keyframes anim-dash {
    0% {
        stroke-dashoffset: 1680;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes anim-dash {
    0% {
        stroke-dashoffset: 1680;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

.dialog-open .dialog-inner {
    padding: 4em;
    opacity: 1;
    -webkit-transition: opacity 0.85s 0.35s;
    transition: opacity 0.85s 0.35s;
}

.dialog-inner {
    opacity: 0;
    background: #fff;
}

.dialog.dialog-open h2 {
    -webkit-animation: anim-elem-1 0.7s ease-out both;
    animation: anim-elem-1 0.7s ease-out both;
}

.dialog h2 {
    margin: 0;
    font-weight: 100;
    font-size: 28px;
    padding: 0 0 2em;
    margin: 0;
}

.dialog.dialog-open button {
    -webkit-animation: anim-elem-2 0.7s ease-out both;
    animation: anim-elem-2 0.7s ease-out both;
    padding: 1em 2em;
    outline: none;
    border: none;
    color: #fff;
    background: #689de4;
}