@charset "utf-8";

/* #Base 960 Grid --- Powered by www.feihuang.net */
/*
 iPhone X 375*812
 Jianguo Pro 432*864
 iPhone 6+ 414*736
 iPhone 6s 375*667
 */
.container-fluid { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px ; position:relative;  }
.container {
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	position:
	relative;
	width: 960px;
	width:
	-moz-calc(100vw - 40px);
	width:
	-webkit-calc(100vw - 40px);
	width: calc(100vw - 40px);
	max-width: 1200px;
	
	}

.ML15{margin-left: 15px;}.MR15{margin-right: 15px}.PL15{padding-left: 15px;}.PR15{padding-right: 15px;}
.row { margin-left: -15px; margin-right: -15px;position:relative; }
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { position: relative; min-height: 1px; box-sizing: border-box;float: left; }
.col-p { padding-left: 15px; padding-right: 15px; }
.col-12{ width: 100% }
.col-11{ width: 91.66666667% }
.col-10{ width: 83.33333333% }
.col-9 { width: 75% }
.col-8 { width: 66.66666667% }
.col-7 { width: 58.33333333% }
.col-6 { width: 50% }
.col-5 { width: 41.66666667% }
.col-4 { width: 33.33333333% }
.col-3 { width: 25% }
.col-2 { width: 16.66666667% }
.col-1 { width: 8.33333333% }
.pull-12{ right: 100% }
.pull-11{ right: 91.66666667% }
.pull-10{ right: 83.33333333% }
.pull-9 { right: 75% }
.pull-8 { right: 66.66666667% }
.pull-7 { right: 58.33333333% }
.pull-6 { right: 50% }
.pull-5 { right: 41.66666667% }
.pull-4 { right: 33.33333333% }
.pull-3 { right: 25% }
.pull-2 { right: 16.66666667% }
.pull-1 { right: 8.33333333% }
.pull-0 { right: auto }
.offset-12{ margin-left: 100% }
.offset-11{ margin-left: 91.66666667% }
.offset-10{ margin-left: 83.33333333% }
.offset-9 { margin-left: 75% }
.offset-8 { margin-left: 66.66666667% }
.offset-7 { margin-left: 58.33333333% }
.offset-6 { margin-left: 50% }
.offset-5 { margin-left: 41.66666667% }
.offset-4 { margin-left: 33.33333333% }
.offset-3 { margin-left: 25% }
.offset-2 { margin-left: 16.66666667% }
.offset-1 { margin-left: 8.33333333% }
.offset-0 { margin-left: 0 }

.percent{width:100%; zoom:1;position:relative;}
.per{float: left;position:relative;}
.per-2_1, .per-50{width:50%;}
.per-3_1{width:33%;margin:20px 0;}
.per-3_2{width:33%;}
.per-3_3{width:33%;text-align: -webkit-center;}
.per-4_1{width:25%;}
.per-4_3{width:75%;}
.per-5_1{width:20%;}
.per-5_2{width:40%;}
.per-5_3{width:60%;}
.per-5_4{width:80%;}
.per-6_1{width:16.666666%;}
.per-6_5{width:83.333333%;}

@media only screen and (min-width:1250px) {
    html,body {min-width: 1250px;}
}
@media only screen and (min-width:1150px) and (max-width:1249px) {
}
@media only screen and (min-width:960px) and (max-width:1149px) {
    html,body {min-width: 960px;width:100%; }
    .container{min-width: 920px}
}
@media only screen and (max-width:959px) {
    .per{float: left;}
    .container{width: 100%}
}
@media only screen and (max-width:767px) {
    html,body{min-width: 320px;}
    .container{width: 100vw}
    .per{float: none; width: 100%;}
}


/* #Clearing
================================================== */

/* Self Clearing Goodness */
.clearfix:after, .clearfix:before, .container-fluid:after, .container-fluid:before, .container:after, .container:before, .row:after, .row:before { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix:after, .container-fluid:after, .container:after, .row:after, .row:after, .clearfix:after { clear: both }

/* <div class="row"> <div class="clearfix"> */
.clearfix:before, .clearfix:after, .row:before, .row:after, dd div:after, .percent:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.row, .clearfix, dd div{ zoom: 1; }

/* <br class="clear" />  */
.clear, .clr { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.clr { visibility: visible; overflow: visible; }