/* 调用服务器字体，自定义font-family，然后再利用src属性的url方法调用文件*/ 

@font-face{ src:url("../family/SourceHanSerifCN-Bold.otf"); font-family: webfont; } 

/*@font-face{ src:url("segmdl2.ttf"); font-style: italic; font-family: webfont; } */

/*@font-face{ src:url("seguisym.ttf"); font-style: bold; font-family: webfont; } */

/*p{ font-family: "webfont"; } */



html,body{

    width: 100%;

    height: 100%;

	margin: 0 auto;

    padding: 0;

    text-align: center;

    font-family:"webfont";

}

.index{

    width: 100%;

    height: 100%;

	background:url(../images/bg.png) no-repeat;

	background-size: 100% 100%;

    -moz-background-size: 100% 100%;

    -webkit-background-size: 100% 100%;

    margin: 0 auto;

    /*display: unset;*/

}

.phone{

    width: 100%;

    height: 100%;

	background:url(../images/bg1.png) no-repeat;

	background-size: 100% 100%;

    -moz-background-size: 100% 100%;

    -webkit-background-size: 100% 100%;

    margin: 0 auto;

    /*display: unset;*/

}

.list{

	width: 100%;

	height: 100%;

    position: relative;

}

.swiper{

    top:calc(50% - 12vw);

}



/*.swiper {

    width: 320px;

    height: 470px;

}

    

.swiper-slide {

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    font-weight: bold;

    color: #fff;

}

.swiper img{

	width: 100%;

	height: auto;

}*/





.swiper-container {

    width: 100%;

    height: 470px;

}

.swiper-wrapper{

    /* 通过改变animation-timing-function 制作弹性切换效果 */

    transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s;

}

.swiper-slide {

    text-align: center;

    font-size: 18px;

    background: #ffffff00;



    /* Center slide text vertically */

    display: -webkit-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    -webkit-align-items: center;

    align-items: center;

}

.swiper-slide img{

    width: auto;

    height: 470px;

}



.upbnt{

	border: 0;  /* 取消黑色外框 */

	background:url(../images/upbnt.png) no-repeat;/* 实现png和背景色共存 */

    background-size: 100% 100%; /* 背景图片大小 */

	-moz-background-size: 100% 100%;

	-webkit-background-size: 100% 100%;

}



/* 相框合成頁 */



.edit{

    width: 100%;

    height: auto;

	background:url(../images/bg2.png) no-repeat;

	background-size: 100% 100%;

    -moz-background-size: 100% 100%;

    -webkit-background-size: 100% 100%;

    margin: 0 auto;

    /*display: unset;*/

}

.header{

    padding:20px 0;

}

.header img{

    width:100%;

    height: auto;

}

.e-sup{

    padding-bottom: 10px;

}

.container-image{

	width: 100%;

	height: auto;

	/*background:url(../images/bg.jpg) no-repeat;

	background-size:100% 100%;

	-moz-background-size: 100% 100%;

	-webkit-background-size: 100% 100%;*/

	position: relative;

	overflow: hidden;

    margin: 0 auto;

}

#xiangkuan{

    width: 100%;

    position: absolute;

    /*left: calc(50% - 35vw);*/

	right: 0;

	left: 0;

    z-index: 20;

    pointer-events: none;

}

#xmTanImg{

	width: auto;

	height: auto;

	z-index: 19;

	position: relative;

}

.cnt-bnt1{    

	bottom: 0;

    width: 100%;

    padding: 0.5rem 0;

    display: flex;

    justify-content: center;

}

.ebn1{

    width: 23%;

    height: 25px;

    margin: 0.5rem 2px;

	border: 0;  /* 取消黑色外框 */

}

.ebnt3{    

	background:url(../images/button-3.png) no-repeat;/* 实现png和背景色共存 */

    background-size: 100% 100%; /* 背景图片大小 */

	-moz-background-size: 100% 100%;

	-webkit-background-size: 100% 100%;

}

.ebnt4{

	background:url(../images/button-4.png) no-repeat;/* 实现png和背景色共存 */

    background-size: 100% 100%; /* 背景图片大小 */

	-moz-background-size: 100% 100%;

	-webkit-background-size: 100% 100%;

}

.ebnt5{

	background:url(../images/button-5.png) no-repeat;/* 实现png和背景色共存 */

    background-size: 100% 100%; /* 背景图片大小 */

	-moz-background-size: 100% 100%;

	-webkit-background-size: 100% 100%;

}

.ebnt6{

	background:url(../images/button-6.png) no-repeat;/* 实现png和背景色共存 */

    background-size: 100% 100%; /* 背景图片大小 */

	-moz-background-size: 100% 100%;

	-webkit-background-size: 100% 100%;

}

.cnt-bnt2{

	height: auto;

    background-size: 100% 100%;

    background: url(../images/footer.png) no-repeat;

    -moz-background-size: 100% 100%;

    -webkit-background-size: 100% 100%;

    display: flex;

    justify-content: center;

}

.ebn2{

	width: 31%;

    height: 40px;

    margin: 0 2px;

	border: 0;  /* 取消黑色外框 */

    background-size: 100% 100%; /* 背景图片大小 */

	-moz-background-size: 100% 100%;

	-webkit-background-size: 100% 100%;

}

.ebnt1{

	background:url(../images/button-1.png) no-repeat;/* 实现png和背景色共存 */

    background-size: 100% 100%; /* 背景图片大小 */

	-moz-background-size: 100% 100%;

	-webkit-background-size: 100% 100%;

}

.ebnt2{

	background:url(../images/button-2.png) no-repeat;/* 实现png和背景色共存 */

    background-size: 100% 100%; /* 背景图片大小 */

	-moz-background-size: 100% 100%;

	-webkit-background-size: 100% 100%;

}

.ebnt7{

	background:url(../images/button-7.png) no-repeat;/* 实现png和背景色共存 */

    background-size: 100% 100%; /* 背景图片大小 */

	-moz-background-size: 100% 100%;

	-webkit-background-size: 100% 100%;

}

.pf{

	width: 75vw;

    height: 16.5vw;

    position: fixed;

    bottom: 28%;

    left: calc(50% - 37.5vw);

    border: 0;

    background: url(../images/pf.png) no-repeat;

    background-size: 100% 100%;

    -moz-background-size: 100% 100%;

    -webkit-background-size: 100% 100%;

}

@media (min-width: 480px) {

    

    .index{

        width: 480px;

        height: 100%;

    	background:url(../images/bg.png) no-repeat;

    	background-size: 100% 100%;

        -moz-background-size: 100% 100%;

        -webkit-background-size: 100% 100%;

        margin: 0 auto;

    }

    .phone{

        width: 480px;

        height: 100%;

    	background:url(../images/bg1.png) no-repeat;

    	background-size: 100% 100%;

        -moz-background-size: 100% 100%;

        -webkit-background-size: 100% 100%;

        margin: 0 auto;

    }

    .edit{

        width: 480px;

        height: auto;

    	background:url(../images/bg2.png) no-repeat;

    	background-size: 100% 100%;

        -moz-background-size: 100% 100%;

        -webkit-background-size: 100% 100%;

        margin: 0 auto;

    }

    .pf{

    	width: 330px;

        height: 75px;

        position: fixed;

        bottom: 29%;

        left: calc(50% - 165px);

        border: 0;

        background: url(../images/pf.png) no-repeat;

        background-size: 100% 100%;

        -moz-background-size: 100% 100%;

        -webkit-background-size: 100% 100%;

    }

    .swiper-container {

        width: 480px;

    }

    .e-sup {

        /*padding-top: 300px;*/

    }

    

    #xiangkuan {

        /*width: 320px;*/

        /*left: calc(50% - 160px);*/

    }

    .ebn1{

        height: 29px;

    }

    .ebn2{

        height: 44px;

    }

}

@media (min-width: 360px) and (max-width: 480px) {

    .swiper{

        top:calc(50% - 53.5vw);

    }

    .swiper-slide img{

        width: auto;

        height: 100vw;

    }

}





/*加載loading*/

.loading_masker{

    width: 100%;

    height: 100%;

    opacity: 0.9;

    z-index: 100;

    position: fixed;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

    display: none;

}

.loading{

    width: 100%;

    height: 100%;

    background: #a5a5a5;

}

.loading_masker img{

    width: 166px;

    height: 80px;

    z-index: 9999;

    position: absolute;

    left: calc(50% - 83px);

    top: 43%;

}