@charset "utf-8";
@import url('http://tl.changyou.com/logo/xtl_logo.css');
@import url('loginRegister.css');

body {
    min-width: 1000px;
    font-family: "\5FAE\8F6F\96C5\9ED1","\5B8B\4F53",sumsun,Helvetica,sans-serif;
    font-size: 14px;
    line-height: 24px;
    color: #a1a8e4;
    background: url(../../images/web/bg_bottom.jpg) #f3f5f8 center bottom;
    background-size: 100%
}

img {
    vertical-align: middle
}

.xtl_logo_bg,.xtl_logo_lk a {
    left: 0;
    top: 0
}
.xtl_logo_bg{ width: 176px;top: 15px;}
.top {
    width: 100%;
    padding-bottom: 20px;
    background: url(../../images/web/bg_top.jpg) top center no-repeat;
    background-size: 100%
}

.container {
    width: 1424px;
    margin: 0 auto
}

.header {
    width: 100%;
    height: 95px;
    padding-left: 100px;
    position: relative;
    z-index: 1
}

.logo_cxg {
    width: 76px;
    height: 66px;
    position: absolute;
    left: 200px;
    top: 15px;
    background: url(../../images/web/logo_cxg.png) no-repeat;
}

.nav {
    width: 100%;
    height: 100%;
    padding: 30px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.nav .login-show-btn{ float: right; margin: -12px 100px 0 0;}
.nav .login-show-btn img{ width: 60px; height: 60px; border-radius: 50%; background: #e7e7e7; vertical-align: bottom;}

.nav,.nav_item {
    text-align: center
}

.nav_item {
    width: 114px;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    color: #fff;
    margin: 0 10px;
    display: inline-block
}

.nav_item.active {
    background-color: #9632ee;
    border-radius: 15px
}

.live_con {
    width: 100%;
    height: 660px;
    position: relative;
    background-color: rgba(0,0,0,.8)
}

.video_con {
    width: 1174px;
    height: 100%;
	float: left;
	position: relative;
    display: inline-block;
    background-color: #000
}

.video_con video {
    width: 100%;
    height: 100%
}

.video_con .ad1{ position: absolute; width: 380px; height: 340px; background: url(../../images/web/ad1.png) no-repeat; top: 0; bottom: 0; right: 0; left: 0; margin: auto; z-index: 1;}
.close-btn{ width: 28px; height: 28px; position: absolute; top: 2px; right: 2px; display: block;}
.down-game-btn{ width: 142px; height: 38px; position: absolute; bottom: 20px; left: 120px; display: block;}

.live_list {
    width: 250px;
    height: 100%;
    float: left;
    background: #111;
    display: inline-block
}

.live_item {
    width: 225px;
    height: 128px;
    margin: 3px auto;
    cursor: pointer;
    position: relative
}

.ad-box {
    position: absolute;
    padding-left: 20%;
    color: #fff;
    bottom: 0;
    left: 0;
    width: 80%;
    height: 50px;
    z-index: 1
}

.ad-box span {
    color: red;
    cursor: pointer
}

.ad-box .close-btn {
    font-size: 20px;
    color: #fff;
    width: 10px;
    height: 10px;
    display: inline-block;
    position: relative;
    left: 10px;
    top: -12px
}

.live_img {
    overflow: hidden
}

.live_img,.live_img img,.live_mask {
    width: 100%;
    height: 100%
}

.live_mask {
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,.4);
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.live_item.active .live_mask,.live_item:hover .live_mask {
    border: 2px solid #dbc18f;
    background-color: transparent
}

.live_item.active .live_mask span {
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-right-color: #dbc18f;
    position: absolute;
    top: 50%;
    left: -16px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%)
}

.main,.title {
    width: 100%
}

.title {
    height: 74px;
    text-indent: -9999px
}

.til_1 {
    background: url(../../images/web/bt_1.png) center no-repeat;
    background-size: auto 100%
}

.til_2 {
    background: url(../../images/web/bt_2.png) center no-repeat;
    background-size: auto 100%
}

.til_2,.til_3 {
    margin: 30px auto 20px
}

.til_3 {
    background: url(../../images/web/bt_3.png) center no-repeat;
    background-size: auto 100%
}

.til_small {
    height: 20px;
    line-height: 20px;
    padding-left: 10px;
    margin: 10px 0;
    font-size: 20px;
    color: #d6b17e;
    border-left: 2px solid #d6b17e
}

.btn_more {
    float: right;
    font-size: 16px;
    color: #d6b17e;
    padding-right: 10px
}

.color_white {
    color: #fff
}

.jchf_con {
    width: 100%
}

.look_item {
    width: 345px;
    height: 194px;
    float: left;
    display: inline-block;
    position: relative;
    cursor: pointer;
    margin-left: 14px
}

.look_item:first-child {
    margin-left: 0
}

.look_img {
    overflow: hidden
}

.look_img,.look_img img {
    width: 100%;
    height: 100%
}

.look_info {
    width: 33px;
    height: 56px;
    line-height: 16px;
    padding-top: 5px;
    border: 1px solid #fff;
    color: #fff;
    font-size: 12px;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #c8a574;
    position: absolute;
    right: 15px;
    top: -3px;
    overflow: hidden
}

.look_mask {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(../../images/web/btn_play.png) center no-repeat;
    opacity: 0;
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transition: all .5s;
    -webkit-transition: all .5s
}

.look_item:hover .look_mask {
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1)
}

.more_con {
    width: 100%;
    height: 447px
}

.swiper {
    width: 662px;
    margin-right: 12px;
    float: left
}

.swiper,.swiper_img {
    height: 100%;
    display: inline-block;
    position: relative
}

.swiper_img {
    width: 476px;
    overflow: hidden
}

.mask_border {
    width: 94%;
    height: 94%;
    margin: 3%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid hsla(0,0%,100%,.7)
}

.swiper_list {
    width: 186px;
    position: absolute;
    right: 0;
    top: 0
}

.swiper_item {
    width: 100%;
    height: 146px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    margin-bottom: 4.5px
}

.swiper_item img {
    width: 100%;
    height: 100%
}

.swiper_item.active .swiper_mask {
    display: none
}

.swiper_mask {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,.5)
}

.news {
    width: 462px;
    height: 100%;
    margin-right: 12px;
    display: inline-block;
    float: left;
    background-color: #fff;
    overflow: hidden
}

.news h3 {
    width: 100%;
    height: 52px;
    line-height: 50px;
    padding-left: 42px;
    font-size: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    position: relative;
    background-color: #cda977
}

.news h3 span {
    width: 2px;
    height: 20px;
    background-color: #fff;
    margin-top: 16px;
    margin-right: 5px;
    float: left;
    display: inline-block
}

.news_list {
    width: 100%;
    padding: 0 42px
}

.news_item,.news_list {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.news_item {
    font-size: 12px;
    color: #616161;
    display: block;
    padding: 7% 0
}

.news_item:hover {
    color: #c4a579
}

.news_item:hover p span {
    border: 1px solid #c4a579
}

.news_item p {
    width: 80%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    float: left;
    display: inline-block
}

.news_item p span {
    width: 5px;
    height: 5px;
    border: 1px solid #616161;
    display: inline-block;
    opacity: .5;
    margin-right: 6px;
    margin-left: 1px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.news_item time {
    width: 20%;
    text-align: right
}

.banner,.news_item time {
    float: left;
    display: inline-block
}

.banner {
    width: 276px;
    height: 100%
}

.banner_item {
    width: 100%;
    height: 145px;
    margin-bottom: 6px;
    display: inline-block;
    float: left;
    overflow: hidden
}

.anchor_list {
    width: 100%;
    height: 825px;
    margin-bottom: 30px;
    position: relative
}

.anchor_item {
    width: 348px;
    float: left;
    display: inline-block;
    position: relative;
    margin-left: 10px;
    cursor: pointer
}

.anchor_item:first-child {
    margin-left: 0
}

.anchor_item:first-child+div+div+div+div {
    position: absolute;
    left: 0;
    top: 480px;
    margin-left: 0
}

.anchor_item:first-child+div+div+div+div+div {
    position: absolute;
    left: 348px;
    top: 245px
}

.anchor_item:first-child+div+div+div+div+div+div {
    position: absolute;
    left: 706px;
    top: 322px
}

.anchor_item:first-child+div+div+div+div+div+div+div {
    position: absolute;
    left: 1064px;
    top: 522px
}

.anchor_img {
    width: 100%
}

.anchor_item:hover .anchor_info {
    opacity: 1
}

.anchor_info {
    width: 100%;
    padding: 24% 5% 5%;
    position: absolute;
    left: 0;
    bottom: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    opacity: 0;
    transition: all .5s;
    -webkit-transition: all .5s
}

.gradient {
    background: transparent;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(25%,transparent),to(#000));
    background: linear-gradient(180deg,transparent 25%,#000);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="transparent",endColorstr="#000",GradientType=25)
}

:root .gradient {
    -webkit-filter: none;
    filter: none
}

.anchor_info h4 {
    font-size: 18px;
    color: #c4a579
}

.anchor_info p {
    font-size: 12px;
    color: #e3e3e3
}

.fix_right {
    width: 112px;
    height: 234px;
    position: fixed;
    right: 0;
    top: 50%;
    margin-top: -117px
}

.fix_btn {
    width: 112px;
    height: 112px;
    text-indent: -9999px;
    border-radius: 50%;
    cursor: pointer
}

.btn_top {
    margin-bottom: 10px;
    background: url(../../images/web/btn_top.png) no-repeat;
}
.btn_pre{
    margin-bottom: 10px;
    background: url(../../images/web/btn_pre.png) no-repeat;
}
.btn_app {
    margin-bottom: 10px;
    background: url(../../images/web/btn_app.png) no-repeat;
}

.close {
    width: 37px;
    height: 37px;
    position: absolute;
    right: 0;
    top: -37px;
    text-indent: -9999px;
    background: url(../../images/web/btn_close.png) no-repeat;
}

.box_code {
    width: 515px;
    height: 249px;
    background: url(../../images/web/code.png) no-repeat;
    display: none
}

.box_guide {
    width: 870px;
    height: 550px;
    border-radius: 10px;
    background: url(../../images/web/bg_bottom.jpg) no-repeat;
    display: none
}

.guide_menu {
    width: 100%;
    padding-top: 55px;
    margin-bottom: 30px;
    text-align: center
}

.guide_menu_item {
    width: 174px;
    height: 37px;
    line-height: 37px;
    border-radius: 18.5px;
    border: 1px solid #c4a579;
    font-size: 20px;
    color: #c4a579;
    display: inline-block;
    margin: 0 10px
}

.guide_menu_item.active {
    color: #fff;
    background: url(../../images/web/btn_on.png) no-repeat;
}

.guide_group {
    display: none
}

.guide_group:first-child {
    display: block
}

.guide_tips {
    font-size: 13px;
    color: #c4a579;
    text-align: center
}

.guide_app,.guide_pc {
    margin-top: 30px;
    text-align: center
}

.guide_app_item {
    width: 145px;
    height: 275px;
    background-color: #caae86;
    border: 1px solid #aa8c62;
    border-radius: 10px;
    display: inline-block;
    margin: 0 30px
}

.guide_app_img,.guide_pc_img {
    border: 1px solid #aa8c62;
    margin: 10px auto 5px;
    overflow: hidden;
    cursor: pointer;
    display: inline-block
}

.guide_app_img {
    width: 130px;
    height: 222px
}

.guide_pc_img {
    width: 363px;
    height: 223px
}

.guide_app_txt,.guide_pc_txt {
    width: 74px;
    height: 20px;
    line-height: 18px;
    font-size: 13px;
    text-align: center;
    margin: 0 auto;
    border: 1px solid #fff;
    border-radius: 10px;
    color: #fff;
    padding-left: 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.guide_pc_item {
    width: 381px;
    height: 298px;
    display: inline-block;
    margin: 0 15px;
    background: url(../../images/web/pc.png) no-repeat;
}

.box_big {
    width: 100%;
    height: 100%;
    display: none;
    background-color: rgba(0,0,0,.5)
}

.big_img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%)
}

.video_box {
    width: 800px;
    height: 457px;
    display: none
}
.preDowload{
    position: fixed;
    width: 1180px;
    height: 740px;
    border-radius: 10px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    z-index: 100;
}
.preShade{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 99;
}
.pre-hint i{
    position: absolute;
    right: -10px;
    top: 33px;
    display: block;
    width: 10px;
    height: 14px;
    background: url(../../images/web/j1.png) no-repeat;
    background-size: contain;
}
.pre-hint{
    width: 287px;
    height: 66px;
    padding: 10px 14px;
    background: rgba(255,125,36,0.92);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.18);
    border-radius: 4px;
    position: fixed;
    right: 130px;
    top: 380px;
}
.pre-hint p{
    font-family: PingFang-SC-Bold;
    font-size: 16px;
    color: #ffffff;
    letter-spacing: 0;
    line-height: 22px;
}
.pre-hint p span{
    color: #FFDD00;
}
.pre-close{
    width: 50px;
    height: 50px;
    display: block;
    position: absolute;
    right: 0;
}
.pre-xz{
    width: 244px;
    height: 57px;
    line-height: 57px;
    text-align: center;
    display: block;
    position: absolute;
    top: 227px;
    left: 120px;
    background-image: linear-gradient(90deg, #FEB376 0%, #F7833A 100%);
    border-radius: 6px;
    font-family: PingFang-SC-Bold;
    font-size: 20px;
    color: #FFFFFF;
}
.pre-tag{
    position: absolute;
    z-index: 102;
    top: 380px;
    left: 47px;
}
.pre-tag li{
    float: left;
    margin-left: 91px;
    margin-top: 15px;
}
.pre-tag li:first-child{
    width: 64px;
    height: 57px;
    background: url(../../images/web/danmu.png) no-repeat;
    background-size: contain;
}
.pre-tag li:last-child{
    width: 67px;
    height: 55px;
    background: url(../../images/web/xcicon.png) no-repeat;
    background-size: contain;
}
.pre-tag li.active{
    margin-top: 0;
}
.pre-tag li.active i{
    width: 64px;
    height: 8px;
    display: block;
    background: #FF7D24;
    border-radius: 4px;
    margin-top: 78px;
}
.pre-tabcont:first-child{
    width: 1180px;
    height: 740px;
    background: url(../../images/web/bj1.png) no-repeat;
    background-size: contain;
}
.pre-tabcont:last-child{
    width: 1180px;
    height: 740px;
    background: url(../../images/web/bj2.png) no-repeat;
    background-size: contain;
}
.hide{display: none;}
@media only screen and (max-width: 1740px) and (min-width: 1430px) {
    .container {
        width:1158px
    }

    .live_con {
        height: 531px
    }

    .video_con {
        width: 944px
    }

    .live_list {
        width: 214px
    }

    .live_item {
        width: 186px;
        height: 104px;
        margin: 2px auto
    }

    .look_item {
        width: 282px;
        height: 159px;
        margin-left: 10px
    }

    .more_con {
        height: 365px
    }

    .swiper {
        width: 538px;
        margin-right: 10px
    }

    .swiper_img {
        width: 387px
    }

    .swiper_list {
        width: 151px
    }

    .swiper_item {
        height: 120px;
        margin-bottom: 2.5px
    }

    .news {
        width: 374px;
        margin-right: 10px
    }

    .banner {
        width: 225px
    }

    .banner_item {
        height: 117px
    }

    .anchor_list {
        height: 675px
    }

    .anchor_item {
        width: 285px;
        margin-left: 6px
    }

    .anchor_item:first-child+div+div+div+div {
        top: 391px
    }

    .anchor_item:first-child+div+div+div+div+div {
        left: 285px;
        top: 198px
    }

    .anchor_item:first-child+div+div+div+div+div+div {
        left: 576px;
        top: 261px
    }

    .anchor_item:first-child+div+div+div+div+div+div+div {
        left: 867px;
        top: 425px
    }
}

@media only screen and (max-width: 1430px) {
    .container {
        width:960px
    }

    .live_con {
        height: 441px
    }

    .video_con {
        width: 784px
    }

    .live_list {
        width: 176px
    }

    .live_item {
        width: 148px;
        height: 86px;
        margin: 2px auto
    }

    .title {
        height: 62px
    }

    .look_item {
        width: 232px;
        height: 130px;
        margin-left: 10px
    }

    .more_con {
        height: 300px
    }

    .swiper {
        width: 446px;
        margin-right: 8px
    }

    .swiper_img {
        width: 320px
    }

    .swiper_img img {
        width: 100%;
        height: 100%
    }

    .swiper_list {
        width: 126px
    }

    .swiper_item {
        height: 99px;
        margin-bottom: 2px
    }

    .news {
        width: 312px;
        margin-right: 8px
    }

    .banner {
        width: 186px
    }

    .banner_item {
        height: 97px
    }

    .anchor_list {
        height: 546px
    }

    .anchor_item {
        width: 237px;
        margin-left: 4px
    }

    .anchor_item:first-child+div+div+div+div {
        top: 324px
    }

    .anchor_item:first-child+div+div+div+div+div {
        left: 237px;
        top: 164px
    }

    .anchor_item:first-child+div+div+div+div+div+div {
        left: 478px;
        top: 216px
    }

    .anchor_item:first-child+div+div+div+div+div+div+div {
        left: 719px;
        top: 352px
    }
}
.video_placeholder{ width: 100%; height: 100%;}
.unLogin-box { width: 261px; height: 191px; display: none; color: #888; position: absolute; top: 88px; right: 100px; background: url(../../images/web/unLogin-box.png);}
/* .unLogin-box a{ padding-top: 74px;} */
.unLogin-box .login-btn{ width: 72px; height: 82px; color: #c2ae83; display: inline-block; position: absolute; top: 28px; right: 34px;}
.unLogin-box .enter-recruit-btn{ width: 72px; height: 82px; color: #c2ae83; display: inline-block; position: absolute; top: 28px; right: 154px;}

.unLogin-icon {
	display:inline-block;
	width:52px;
	height:52px;
	background-image:url(../../images/web/unlogin-sprite.png);
	background-repeat:no-repeat;
	background-position:0 0;
	-moz-background-size:auto 100%;
	-o-background-size:auto 100%;
	background-size:auto 100%;
	-webkit-animation:unloginAnimate 1s steps(1) infinite;
	-moz-animation:unloginAnimate 1s infinite steps(1);
	-o-animation:unloginAnimate 1s infinite steps(1);
	animation:unloginAnimate 1s steps(1) infinite;
	display: none;
}
@-webkit-keyframes unloginAnimate {
 0% {
  background-position:0 0
 }
 4% {
  background-position:-52px 0
 }
 8% {
  background-position:-104px 0
 }
 12% {
  background-position:-156px 0
 }
 16% {
  background-position:-208px 0
 }
 20% {
  background-position:-260px 0
 }
 24% {
  background-position:-312px 0
 }
 28% {
  background-position:-364px 0
 }
 32% {
  background-position:-416px 0
 }
 to {
  background-position:-416px 0
 }
}
@-moz-keyframes unloginAnimate {
 0% {
  background-position:0 0
 }
 4% {
  background-position:-52px 0
 }
 8% {
  background-position:-104px 0
 }
 12% {
  background-position:-156px 0
 }
 16% {
  background-position:-208px 0
 }
 20% {
  background-position:-260px 0
 }
 24% {
  background-position:-312px 0
 }
 28% {
  background-position:-364px 0
 }
 32% {
  background-position:-416px 0
 }
 to {
  background-position:-416px 0
 }
}
@-o-keyframes unloginAnimate {
 0% {
  background-position:0 0
 }
 4% {
  background-position:-52px 0
 }
 8% {
  background-position:-104px 0
 }
 12% {
  background-position:-156px 0
 }
 16% {
  background-position:-208px 0
 }
 20% {
  background-position:-260px 0
 }
 24% {
  background-position:-312px 0
 }
 28% {
  background-position:-364px 0
 }
 32% {
  background-position:-416px 0
 }
 to {
  background-position:-416px 0
 }
}
@keyframes unloginAnimate {
 0% {
  background-position:0 0
 }
 4% {
  background-position:-52px 0
 }
 8% {
  background-position:-104px 0
 }
 12% {
  background-position:-156px 0
 }
 16% {
  background-position:-208px 0
 }
 20% {
  background-position:-260px 0
 }
 24% {
  background-position:-312px 0
 }
 28% {
  background-position:-364px 0
 }
 32% {
  background-position:-416px 0
 }
 to {
  background-position:-416px 0
 }
}

.logo-guide{ width: 72px; display: block; text-align: center; position: absolute; font-size: 12px; right: 180px; top: 22px; color: #fff; z-index: 11;}
.logo-guide i{ width: 34px; height: 28px; display: inline-block; background: url(../../images/web/hand.png) no-repeat;}
.logo-guide b{ display: block; font-weight: 400;}

/* <div class="up animated">上下晃动</div>
	<div class="around animated">左右晃动</div> */
.animated {
  animation-duration: 2s; /*动画时间*/
  animation-fill-mode: both; /*播放后的状态*/
}
 
.animated {
  animation-iteration-count: infinite; /*动作循环的次数：infinite 无限循环*/
}
 
.animated {
  animation-duration: 2s; /*动画时间*/
}
 
.up,.around {
  background: #2D97DB;
  width: 90%;
  height: 90%;
  font-family: "微软雅黑";
  font-size: 40px;
  color: white;
  text-align: center;
  line-height: 90%;
}
.around{
	background-color: #44a036;
}
 
.up{
  animation-name:upAnimation; /*动画的名称*/
  transform-origin: center bottom; /*设置动画旋转元素的基点为*/
  cursor: pointer;
}
.around{
  animation-name:aroundAnimation; /*动画的名称*/
  transform-origin: center bottom; /*设置动画旋转元素的基点为*/
  cursor: pointer;
}
 
@keyframes upAnimation{
  0%,
  100%,
  20%,
  50%,
  80% {
  transition-timing-function: cubic-bezier(0.215,.61,.355,1); 
  transform: translate3d(0,0,0);
  }
  40%,
  43%{
  transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060);
  transform: translate3d(0,-30px,0);
  }
  70%{
  transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
  transform: translate3d(0,-15px,0);
  }
  90%{
  transform: translate3d(0,-4px,0);
  }
}

@keyframes aroundAnimation{
  0%,
  100%,
  20%,
  50%,
  80% {
  transition-timing-function: cubic-bezier(0.215,.61,.355,1); 
  transform: translate3d(0,0,0);
  }
  40%,
  43%{
  transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060);
  transform: translate3d(-20px,0,,0);
  }
  70%{
  transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
  transform: translate3d(-10px,0px,0);
  }
  90%{
  transform: translate3d(20px,0,0);
  }
}

/* passport start */
.passport-iframe-shadow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .7;
    filter: alpha(opacity=70);
    background-color: #000;
    z-index: 8888;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.passport-iframe-con {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 440px;
    height: 410px;
    visibility: visible;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #fff;
    background-color: #fff;
    z-index: 9999;
}
/* passport end */