img{border: 0;}
.hide_txt{text-indent: -9999em;font-size: 0;line-height: 0;}

.wrap{height: 100%;position: relative;overflow: hidden;}
.hb_content{height: 100%;position: relative;overflow: hidden;}
.content{position: relative;width: 1200px;margin: 0 auto;}

.home_box .background-overlay {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    background-color: rgba(62, 62, 62, 0.5);
}
.home_box .container .title-inner {
    top: 30%;
    position:relative;
    z-index:3;
}

.picture_box.show  .container {
    height: 100%;
}

.picture_box.show  .container .title-inner{
    animation:tt_effect .6s .3s linear both;
    -webkit-animation:tt_effect .6s .3s linear both;
}

.home_box .title-inner .title-1 {
    position: relative;
    line-height: 1.5em;
    background-repeat: no-repeat;
    padding: 0px 0px 20px;
    text-align: center;
}
.home_box .title-inner {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


.home_box .title-inner span{
    cursor: default;
}

.home_box .title-inner .title-1 span {
    display:inline-block;
    line-height:1.6;
    font-size: 28px;
    font-family: trebuchet ms;
    color: rgb(255, 255, 255);
    letter-spacing: 1px;
}

.home_box .title-inner .title-2 {
    position: relative;
    line-height: 1.5em;
    background-repeat: no-repeat;
    padding: 0px;
    text-align: center;
}

.home_box .title-inner .title-2 span {
    letter-spacing:5px;
    font-size: 48px;
    color: rgb(255, 255, 255);
    line-height: 70px;
}

.home_box .title-inner .title-button{
    padding:40px 0px 0px;
    text-align: center;
    display: block;
    margin-bottom: 21.74px;
    max-width: 100%;
}

.home_box .title-inner .title-button a{
    text-decoration: none;
    font-weight: bold;
    padding: 12px 40px;
    border-width: 2px;
    background-color: #00A3E9;
    color: rgb(255, 255, 255);
    border-radius: 2em;
    font-size: 14px;
}
.home_box .title-inner .title-button a:hover {
    background-color: #005c88;
    border-color: #005C88;
    color: #fff;
}

@media screen and (max-width: 768px){
    .home_box .title-inner .title-2 span{
        font-size: 25px !important;
        line-height: 50px;
    }
    .home_box .title-inner .title-1 span{
        font-size: 15px !important;
    }
}

.picture_list{position: relative;height: 100%;}
.picture_box{position: absolute;width: 100%;height: 100%;top: 0;left: -9999px;}
.bg_box{position: absolute;width: 100%;height: 100%;top: 0;left: 0;background-position: center center;background-repeat: no-repeat;}
.bg_main{width: 1000px;height: 100%;position: absolute;top: 0;left: 50%;margin-left: -500px;background-position: center center;background-repeat: no-repeat;}
.bg_box img{position: absolute;top: 50%;left: 50%;}

.picture_box .content{width: 1000px;height: 100%;position: absolute;top: 0;left: 50%;margin-left: -500px;z-index: 5;transform-origin: center center;-webkit-transform-origin: center center;}
.picture_box .main_box{position: relative;height: 100%;left: -9999px;top: 50%;}
.picture_list .show{left: 0;}
.picture_list .show .main_box{left: 0;}


.picture_box.show .btn_picture{animation:opacity .5s 1s linear both;-webkit-animation:opacity .5s 1s linear both;}

.pic-1 .btn_picture{border-color: #62615d;border-color: rgba(0,0,0,0.6);color:#000;}

.pic-2 .btn_picture{border-color: #88b1eb;border-color: rgba(255,255,255,0.3);color:#fff;}

.pic-3 .btn_picture{border-color: #b3a38b;border-color: rgba(255,255,255,0.3);color:#fff;}

.circle{ position: relative; width: 100%; height: 52px; margin-top: -52px; background: transparent url(../images/homebox_bottom.png) repeat-x left top; text-align: center; z-index: 5;}
.circle span{ margin: 0 5px; padding: 2px 5px; background: transparent url(../images/homebox_nav.png) no-repeat center center; cursor: pointer;}
.circle span.on{ background-image: url(../images/homebox_navcur.png);}




@keyframes pulse{
    0%{transform:scale(1);}
    50%{transform:scale(1.1);}
    100%{transform:scale(1);}
}

@-webkit-keyframes pulse{
    0%{-webkit-transform:scale(1);}
    50%{-webkit-transform:scale(1.1);}
    100%{-webkit-transform:scale(1);}
}

@keyframes swing{
    20%,40%,60%,80%,100%{transform-origin:top center;}
    20%{transform:rotate(15deg);}
    40%{transform:rotate(-10deg);}
    60%{transform:rotate(5deg);}
    80%{transform:rotate(-5deg);}
    100%{transform:rotate(0deg);}
}
@-webkit-keyframes swing{
    20%,40%,60%,80%,100%{-webkit-transform-origin:top center;}
    20%{-webkit-transform:rotate(15deg);}
    40%{-webkit-transform:rotate(-10deg);}
    60%{-webkit-transform:rotate(5deg);}
    80%{-webkit-transform:rotate(-5deg);}
    100%{-webkit-transform:rotate(0deg);}
}

@keyframes flash{
    0%,66.66%{opacity: 0;}
    33.33%,100%{opacity: 1;}
}
@-webkit-keyframes flash{
    0%,66.66%{opacity: 0;}
    33.33%,100%{opacity: 1;}
}

@keyframes tada{
    0%{transform:scale(1);}
    10%,20%{transform:scale(0.9) rotate(-3deg);}
    30%,50%,70%,90%{transform:scale(1.1) rotate(3deg);}
    40%,60%,80%{transform:scale(1.1) rotate(-3deg);}
    100%{transform:scale(1) rotate(0);}
}
@-webkit-keyframes tada{
    0%{-webkit-transform:scale(1);}
    10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);}
    30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);}
    40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);}
    100%{-webkit-transform:scale(1) rotate(0);}
}

@keyframes rotateX{
    0%{transform: perspective(400px) rotateX(90deg);}
    40%{transform: perspective(400px) rotateX(-30deg);}
    70%{transform: perspective(400px) rotateX(30deg);}
    100%{transform: perspective(400px) rotateX(0deg);}
}
@-webkit-keyframes rotateX{
    0%{-webkit-transform: perspective(400px) rotateX(90deg);}
    40%{-webkit-transform: perspective(400px) rotateX(-30deg);}
    70%{-webkit-transform: perspective(400px) rotateX(30deg);}
    100%{-webkit-transform: perspective(400px) rotateX(0deg);}
}

@keyframes rotateY{
    0%{transform: perspective(400px) rotateY(90deg);}
    40%{transform: perspective(400px) rotateY(-20deg);}
    70%{transform: perspective(400px) rotateY(20deg);}
    100%{transform: perspective(400px) rotateY(0deg);}
}
@-webkit-keyframes rotateY{
    0%{-webkit-transform: perspective(400px) rotateY(90deg);}
    40%{-webkit-transform: perspective(400px) rotateY(-20deg);}
    70%{-webkit-transform: perspective(400px) rotateY(20deg);}
    100%{-webkit-transform: perspective(400px) rotateY(0deg);}
}

@keyframes bounce{
    0%,20%,50%,80%,100%{transform:translateY(0);}
    40%{transform:translateY(-20px);}
    60%{transform:translateY(-10px);}
}
@-webkit-keyframes bounce{
    0%,20%,50%,80%,100%{-webkit-transform:translateY(0);}
    40%{-webkit-transform:translateY(-20px);}
    60%{-webkit-transform:translateY(-10px);}
}

@keyframes bounceInDown{
    0%{opacity:0;transform:translateY(-2000px);}
    60%{opacity:1;transform:translateY(30px);}
    80%{transform:translateY(-10px);}
    100%{transform:translateY(0);}
}
@-webkit-keyframes bounceInDown{
    0%{opacity:0;-webkit-transform:translateY(-2000px);}
    60%{opacity:1;-webkit-transform:translateY(30px);}
    80%{-webkit-transform:translateY(-10px);}
    100%{-webkit-transform:translateY(0);}
}


@keyframes opacity{
    0%{opacity: 0;}
    100%{opacity: 1;}
}
@-webkit-keyframes opacity{
    0%{opacity: 0;}
    100%{opacity: 1;}
}

@keyframes tt_effect{
    0%{transform:translateY(-20px);opacity:0;}
    100%{transform:translateY(0);opacity:1;}
}
@-webkit-keyframes tt_effect{
    0%{-webkit-transform:translateY(-20px);opacity:0;}
    100%{-webkit-transform:translateY(0);opacity:1;}
}

@keyframes bg_effect{
    0%{transform:scale(1,1);}
    100%{transform:scale(1.05,1.05);}
}
@-webkit-keyframes bg_effect{
    0%{-webkit-transform:scale(1,1);}
    100%{-webkit-transform:scale(1.05,1.05);}
}