/*--弹出层--*/
.LayerBackground{position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: 100; background: rgba(0,0,0,.6);}

/*--滚动条样式--*/
*::-webkit-scrollbar{ width: 0px; height: 0px;}  
/*--线条，处理手机上显示比较细的线条--*/
.line{-webkit-border-image:url(../img/line.png) 2 2 2 2; -o-border-image:url(../img/line.png) 2 2 2 2; border-image:url(../img/line.png) 2 2 2 2;}
.line-li li{-webkit-border-image:url(../img/line.png) 2 2 2 2; -o-border-image:url(../img/line.png) 2 2 2 2; border-image:url(../img/line.png) 2 2 2 2;}
.line-ora{-webkit-border-image:url(../img/line-hover.png) 2 2 2 2; -o-border-image:url(../img/line-hover.png) 2 2 2 2; border-image:url(../img/line-hover.png) 2 2 2 2;}
.line-w{-webkit-border-image:url(../img/line-white.png) 2 2 2 2; -o-border-image:url(../img/line-white.png) 2 2 2 2; border-image:url(../img/line-white.png) 2 2 2 2;} 

/*--Loading--*/
.msg-loading,.msg-pop{position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; background: rgba(0,0,0,.4); z-index: 19999999999;}

.msg-pop-box{position: fixed; width: 12rem; left: 50%; top: 50%; margin: -25% 0 0 -6rem; background: rgba(255,255,255,.95); border-radius: .3rem; box-shadow: 0 0 .5rem rgba(0,0,0,.1); line-height: 1.1rem;}
.msg-pop-content{padding: 1rem .75rem; font-size: .7rem; line-height: 1.1rem; text-align: center;}
.msg-pop-box .msg-pop-button{width: 100%; display:-moz-box; display:-webkit-box; display:box; display:-webkit-flex; display:table; border-radius: 0 0 .25rem .25rem; overflow: hidden; border-width:1px 0 0 0; color:rgba(0,172,152,1); -webkit-border-image:url(../img/line.png) 2 2 2 2; -o-border-image:url(../img/line.png) 2 2 2 2; border-image:url(../img/line.png) 2 2 2 2;}
.msg-pop-box .msg-pop-button li{display: table-cell; border-radius: 0 0 .25rem .25rem; overflow: hidden;}
.msg-pop-box .msg-pop-button li:nth-child(1){border-radius: 0 0 0 .25rem;}
.msg-pop-box .msg-pop-button li:nth-child(2){border-width:0 0 0 1px; -webkit-border-image:url(../img/line.png) 2 2 2 2; -o-border-image:url(../img/line.png) 2 2 2 2; border-image:url(../img/line.png) 2 2 2 2; border-radius: 0 0 5px 0;}
.msg-pop-box .msg-pop-button button{width: 100%; height: 2.5rem; line-height: 2.5rem; font-size: .8rem; background: transparent; cursor: pointer; color: rgba(0,172,152,1);}
.msg-pop-box .msg-pop-button button:active{background:rgba(0,172,152,.9); color: rgba(255,255,225,1);}

/*--页面内容加载loading--*/
.page-loading{height: 1rem; width: 3rem; margin: 0 auto; padding-left: 1.2rem; font-size: .7rem; position: relative; z-index: 199999999;}
.page-ball {height: .2rem; width: .2rem; position: absolute; background-color: rgba(255,159,0,1); border-radius: 50%; top: 0; left: 0;}
.page-rond {height: .8rem; width: .8rem; border: 1px solid rgba(255,159,0,1); border-radius: 50%; position:absolute; top: .05rem; left: .05rem; animation: rond 2s infinite; -webkit-animation: rond 2s infinite;}

@keyframes rond {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}
@-webkit-keyframes rond {0% {-webkit-transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);}}

@keyframes rond-in {0% {transform: rotate(0deg);} 100% {transform: rotate(-360deg);}}
@-webkit-keyframes rond-in {0% {-webkit-transform: rotate(0deg);} 100% {-webkit-transform: rotate(-360deg);}}

/*--弹出加载loading--*/
.msg-box {height: 7rem;width: 7rem;position: absolute; top: 50%; left: 50%; margin: -3.5rem 0 0 -3.5rem; background: rgba(255,255,255,.95); border-radius: .3rem; box-shadow: 0 0 .5rem rgba(0,0,0,.1);}
.msg-box .msg-load {color: rgba(255,159,0,1); font-family: calibri; text-align: center; top: 50%; left: 50%; height: .8rem; line-height: .8rem; margin: -.4rem 0 0 -25%; font-size: .8rem; position: absolute;}

/****DEBUT TOP****/
.msg-top {height: .5rem; width: .5rem; border-radius: 50%; background-color: rgba(255,159,0,1); position: absolute; top: .5rem; left: 3.25rem; animation: turnTop 2s infinite; -webkit-animation: turnTop 2s infinite;}

@keyframes turnTop {0% {top : .5rem;} 50% {top : 2.5rem;} 100% {top : .5rem;}}
@-webkit-keyframes turnTop {0% {top : .5rem;} 50% {top : 2.5rem;} 100% {top : .5rem;}}
/****FIN TOP****/

/****DEBUT LEFT****/
.msg-left {height: .5rem; width: .5rem; border-radius: 50%; background-color: rgba(255,159,0,1); position: absolute; bottom: .5rem; left: .5rem; animation: turnLeft 2s infinite; -webkit-animation: turnLeft 2s infinite;}

@keyframes turnLeft {0% {bottom: .5rem; left: .5rem;} 50% {bottom: 2.5rem; left: 2rem;} 100% {bottom: .5rem; left: .5rem;}}
@-webkit-keyframes turnLeft {0% {bottom: .5rem; left: .5rem;} 50% {bottom: 2.5rem; left: 2rem;} 100% {bottom: .5rem; left: .5rem;}}
/****FIN LEFT****/

/****DEBUT RIGHT****/
.msg-right {height: .5rem; width: .5rem; border-radius: 50%; background-color: rgba(255,159,0,1); position: absolute; bottom: .5rem; right: .5rem; animation: turnRight 2s infinite; -webkit-animation: turnRight 2s infinite;}

@keyframes turnRight {0% {bottom: .5rem; right: .5rem;} 50% {bottom: 2.5rem; right: 2rem;}  100% {bottom: .5rem; right: .5rem;}}
@-webkit-keyframes turnRight {0% {bottom: .5rem; right: .5rem;} 50% {bottom: 2.5rem; right: 2rem;} 100% {bottom: .5rem; right: .5rem;}}
/****FIN RIGHT****/

/*--loading后面的点点--*/
.dotting {display: inline-block; min-width: .1rem; min-height: .1rem; box-shadow: .1rem 0 currentColor, .3rem 0 currentColor, .5rem 0 currentColor; -webkit-animation: dot 4s infinite step-start both; animation: dot 4s infinite step-start both; *zoom: expression(this.innerHTML = '...');}
.dotting:before {content: '...';} /* IE8 */
.dotting::before {content: '';}
:root .dotting {margin-right: .4rem;} /* IE9+,FF,CH,OP,SF */

@-webkit-keyframes dot {25% { box-shadow: none; } 50% { box-shadow: .1rem 0 currentColor; } 75% { box-shadow: .1rem 0 currentColor, .3rem 0 currentColor;}}
@keyframes dot {25% { box-shadow: none; } 50% { box-shadow: .1rem 0 currentColor; } 75% { box-shadow: .1rem 0 currentColor, .3rem 0 currentColor;}}

.middle-PopLayer{ position: fixed; width: 100%; height: 1rem; line-height: 1rem; top: 50%; margin-top: -.5rem; text-align: center; padding-left: inherit;}
.middle-PopLayer .page-rond{position: relative; display: inline-block; vertical-align: sub; left: inherit; margin-right: .1rem;}
.bottom-PopLayer{ position: fixed; width: 100%; height: 1rem; line-height: 1rem; bottom: 5rem; text-align: center; padding-left: inherit;}
.bottom-PopLayer span{padding: .5rem 1rem; background: rgba(0,0,0,.5); color: rgba(255,255,255,1); border-radius: .2rem; font-size: .7rem; box-shadow: 0 0 .2rem rgba(0,0,0,.2);}

.page-loading-back{background: rgba(0,0,0,.5); width: initial; padding: 0 .95rem 0 .1rem; height: 2rem; line-height: 2.1rem; border-radius: .2rem; box-shadow: 0 0 .2rem rgba(0,0,0,.2); margin: -1rem 0 0 -1rem; left: 50%;}
.page-loading-back .page-rond{border-color: rgba(255,255,255,1);}
.page-loading-back .page-ball{background-color: rgba(255,255,255,1);}

.page-loading-Layer:before{background: rgba(0,0,0,.5); content: ''; width: 100%; position: fixed; left: 0; top: 0; bottom: 0; height: initial !important;}

/*--弹出圈圈Loading--*/
.spinner{position: fixed; top: 0; bottom: 0; width: 100%; background: rgba(0,0,0,.5); z-index: 103;}
.spinner:before{font-size: 100px; width: 4rem; height: 4rem; content: ''; border-radius: 50%; box-shadow: inset 0 0 0 .2rem rgba(255,255,255,1); position: fixed; top: 50%; left: 50%; margin: -2rem 0 0 -2rem;}
.spinner i {position: absolute; clip: rect(0, 4rem, 4rem, 2rem); width: 4rem; height: 4rem; -webkit-animation: spinner-circle-clipper 1s ease-in-out infinite; top: 50%; left: 50%; margin: -2rem 0 0 -2rem;}
@-webkit-keyframes spinner-circle-clipper {0% {-webkit-transform: rotate(0deg);}100% {-webkit-transform: rotate(180deg);}}
.spinner i:after {position: absolute; clip: rect(0, 4rem, 4rem, 2rem); width: 4rem; height: 4rem; content: ''; -webkit-animation: spinner-circle 1s ease-in-out infinite; border-radius: 50%; box-shadow: inset 0 0 0 .2rem rgba(255,159,0,1); top: 50%; left: 50%; margin: -2rem 0 0 -2rem;}
@-webkit-keyframes spinner-circle {0% {-webkit-transform: rotate(-180deg);}100% {-webkit-transform: rotate(180deg);}}

/*--淡入--*/
@-webkit-keyframes fadeIn{0%{opacity:0;-webkit-transform:translateX(0)}100%{opacity:1;-webkit-transform:translateX(0)}}
@-moz-keyframes fadeIn{0%{opacity:0;-moz-transform:translateX(0)}100%{opacity:1;-moz-transform:translateX(0)}}
@-o-keyframes fadeIn{0%{opacity:0;-o-transform:translateX(0)}100%{opacity:1;-o-transform:translateX(0)}}
@keyframes fadeIn{0%{opacity:0;transform:translateX(0)}100%{opacity:1;transform:translateX(0)}}

.fadeIn{animation: fadeIn 2s; -moz-animation: fadeIn 2s; -webkit-animation: fadeIn 2s; -o-animation: fadeIn 2s;  -webkit-animation-fill-mode:none; -moz-animation-fill-mode:none; -o-animation-fill-mode:none; animation-fill-mode:none;}

/*--淡出--*/
@-webkit-keyframes fadeOut{0%{opacity:1;-webkit-transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(0)}}
@-moz-keyframes fadeOut{0%{opacity:1;-moz-transform:translateX(0)}100%{opacity:0;-moz-transform:translateX(0)}}
@-o-keyframes fadeOut{0%{opacity:1;-o-transform:translateX(0)}100%{opacity:0;-o-transform:translateX(0)}}
@keyframes fadeOut{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(0)}}

.fadeOut{animation: fadeOut 1s; -moz-animation: fadeOut 1s; -webkit-animation: fadeOut 1s; -o-animation: fadeOut 1s;  -webkit-animation-fill-mode:none; -moz-animation-fill-mode:none; -o-animation-fill-mode:none; animation-fill-mode:none;}

/*--慢下淡入--*/
@-webkit-keyframes fadeInBottom20{0%{opacity:0;-webkit-transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0)}}
@-moz-keyframes fadeInBottom20{0%{opacity:0;-moz-transform:translateY(20px)}100%{opacity:1;-moz-transform:translateY(0)}}
@-o-keyframes fadeInBottom20{0%{opacity:0;-o-transform:translateY(20px)}100%{opacity:1;-o-transform:translateY(0)}}
@keyframes fadeInBottom20{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}

.fadeInBottom20{animation: fadeInBottom20 1s; -moz-animation: fadeInBottom20 1s; -webkit-animation: fadeInBottom20 1s; -o-animation: fadeInBottom20 1s; -webkit-animation-fill-mode:none; -moz-animation-fill-mode:none; -o-animation-fill-mode:none; animation-fill-mode:none;}

/*--慢下淡出--*/
@-webkit-keyframes fadeOutBottom20{0%{opacity:1;-webkit-transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(20px)}}
@-moz-keyframes fadeOutBottom20{0%{opacity:1;-moz-transform:translateY(0)}100%{opacity:0;-moz-transform:translateY(20px)}}
@-o-keyframes fadeOutBottom20{0%{opacity:1;-o-transform:translateY(0)}100%{opacity:0;-o-transform:translateY(20px)}}
@keyframes fadeOutBottom20{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(20px)}}

.fadeOutBottom20{animation: fadeOutBottom20 1s; -moz-animation: fadeOutBottom20 1s; -webkit-animation: fadeOutBottom20 1s; -o-animation: fadeOutBottom20 1s; -webkit-animation-fill-mode:none; -moz-animation-fill-mode:none; -o-animation-fill-mode:none; animation-fill-mode:none;}

/*--快下淡入--*/
@-webkit-keyframes fadeInBottom100{0%{opacity:1;-webkit-transform:translateY(100%)}100%{opacity:1;-webkit-transform:translateY(0)}}
@-moz-keyframes fadeInBottom100{0%{opacity:1;-moz-transform:translateY(100%)}100%{opacity:1;-moz-transform:translateY(0)}}
@-o-keyframes fadeInBottom100{0%{opacity:1;-o-transform:translateY(100%)}100%{opacity:1;-o-transform:translateY(0)}}
@keyframes fadeInBottom100{0%{opacity:1;transform:translateY(100%)}100%{opacity:1;transform:translateY(0)}}

.fadeInBottom100{animation: fadeInBottom100 .5s; -moz-animation: fadeInBottom100 .5s; -webkit-animation: fadeInBottom100 .5s; -o-animation: fadeInBottom100 .5s; -webkit-animation-fill-mode:none; -moz-animation-fill-mode:none; -o-animation-fill-mode:none; animation-fill-mode:none;}

/*--快下淡出--*/
@-webkit-keyframes fadeOutBottom100{0%{opacity:1;-webkit-transform:translateY(0)}100%{opacity:1;-webkit-transform:translateY(100%)}}
@-moz-keyframes fadeOutBottom100{0%{opacity:1;-moz-transform:translateY(0)}100%{opacity:1;-moz-transform:translateY(100%)}}
@-o-keyframes fadeOutBottom100{0%{opacity:1;-o-transform:translateY(0)}100%{opacity:1;-o-transform:translateY(100%)}}
@keyframes fadeOutBottom100{0%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(100%)}}

.fadeOutBottom100{animation: fadeOutBottom100 .5s; -moz-animation: fadeOutBottom100 .5s; -webkit-animation: fadeOutBottom100 .5s; -o-animation: fadeOutBottom100 .5s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; animation-fill-mode:forwards;}


article{display: inline-block; width: 100%;}

section{background:#f0f0f0; -webkit-transition:left .4s ease-out; -moz-transition:left .4s ease-out; transition:left .4s ease-out;}
body {
}