/* * -- BASE STYLES -- * Most of these are inherited from Base, but I want to change a few.*/
/* CSS Document*/

@font-face {
  font-family: 'DIN-BoldAlternate';
  src: url('../fonts/DIN-BoldAlternate.eot?#iefix') format('embedded-opentype'),  url('../fonts/DIN-BoldAlternate.otf')  format('opentype'),
	     url('../fonts/DIN-BoldAlternate.woff') format('woff'), url('../fonts/DIN-BoldAlternate.ttf')  format('truetype'), url('../fonts/DIN-BoldAlternate.svg#DIN-BoldAlternate') format('svg');
  font-weight: normal;
  font-style: normal;
}


html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
    /* Set your content font stack here: */
    font-family: 'DIN-BoldAlternate',微软雅黑, Verdana, Geneva, sans-serif;
}

body {
    margin: 0px;
    padding: 0px;
    font-family: 'DIN-BoldAlternate', 微软雅黑, Verdana, Geneva, sans-serif;
	background:#0d58a4 url(../img/bg.jpg);
	background-repeat:repeat-y;
	background-size:cover;
	background-position:center;
}

a:focus {
    outline: none;
}
a:link, a:visited, a:active {
	color:#bcbcbc;
	transition:all 0.3s linear;
    
}
a:hover {
	color:#fff;
	transition:all 0.3s linear;
}
a.mask {
    text-decoration: none;
    overflow: hidden;
    display: block;
}
/* * -- Img Responsive And Zoom Style --*/
.pure-img-responsive {
    max-width: 150%;
    width:100%;
    height: auto;
}
.pure-img-responsive1 {
    max-height: 100%;
    width: auto;
    cursor:pointer;
    margin:0 auto;
}
img {
    border: 0;
    display: block;
}
img.zoom-img {
    width: 100%;
    position: relative;
    padding: 0;
}
img.zoom-img {
    -webkit-transform: scale(1, 1);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1, 1);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
    box-shadow: 0px 0px 0px 0px #000;
}
img.zoom-img:hover {
    -webkit-transform: scale(1.15);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 750ms;
    -moz-transform: scale(1.15);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 750ms;
    overflow: hidden;
    opacity: 0.7;
}
img.op-img {
    position: relative;
    padding: 0;
}
img.op-img {
    opacity:1;
    transform:scale(1,1);
    transition:all 350ms ease-out;
}
img.op-img:hover {
    opacity:0.7;
    transform:scale(1.05,1.05);
    transition:all 350ms ease-out;
}
/* * -- Snaper Right --*/
.snap-drawer-right {
    background:#000;
    color:#fff;
}
/* * -- Index Page --*/

.container{
	max-width:900px;
	margin:0 auto;
	position:relative;
	overflow:hidden;
}

.container-bg{
	position:absolute;
	width:33.3333%;
	background:#FFF;
	height:2000px;
}

.pure-g{
	position:relative;
	z-index:2；
}
.header{
	position:relative;
}

.main-text{
	width:100%;

	background:#2f3130;
	box-sizing:border-box;
	padding:30px 40px;
	font-size:18px;
	line-height:1.5em;
	color:#bcbcbc;
}

.under-line{
	text-decoration:underline;
}

.img-containers{
	box-sizing:border-box;
	padding:5px 15px;
	background:#dad7c5;
}

.img-container{
	margin:5px;
}

.bg2{
	background:#f8f7f3;
}

.text1{
	box-sizing:border-box;
	padding:10px 40px;
	font-size:15px;
	line-height:1.5em;
	color:#bcbcbc;
	background:#214499;
}

.text2{
	box-sizing:border-box;
	padding:10px 20px;
	font-size:14px;
	line-height:1.5em;
	color:#ffffff;
	background:#214499;
}

.text2 span{
	display:block;
	margin-bottom:10px;
}

.text3{
	
	font-size:15px;
	line-height:1.5em;
	color:#56514e;
	background:#dddddd;
	margin:10px 10px 10px 10px;
	position:relative;
}

.text3-1{
	box-sizing:border-box;
	padding:10px 40px 10px 40px;
}

.border1{
	border-bottom:1px #fff solid;
}

.contactl{
	font-size:18px;
	text-align:center;
	line-height:45px;
	background:#2f3130;
	color:#fff;
	width:155px;
	display:block;
	position:absolute;
	right:0;
	width:33.3333%;
	top:50%;
	margin-top:-22px; 
}

.email{
	display:block;
	width:100%;
	background:#214499;
	font-size:15px;
	color:#fff;
	text-align:center;
	height:45px;
	transition:all 0.3s linear;
	line-height:45px;
	margin-bottom:50px;
}

.email:link,.email:active, .email:visited{
	color:#fff;
	text-decoration:none;
}

.email:hover{
	color:#214499;
	background:#fff;
	text-decoration:none;
}

.mobile{
	display:none;
}

.pc{
	display:inline-block;
}

@media screen and (max-width: 35.5em) {
	
	.container-bg{

	width:100%;

}
	
	.main-text{
	position:inherit;
	bottom:0;
	padding:30px 20px;

}
	.mobile{
	display:inline-block;
}

.pc{
	display:none;
}
.text1{
	box-sizing:border-box;
	padding:10px 20px;
	font-size:15px;
	line-height:1.5em;

}
.text2{
	font-size:14px;
	box-sizing:border-box;
	margin:10px;
}
.text3-1{
	padding:10px 20px 10px 20px;
}



.contactl{

	position:inherit;

	width:100%;

	margin-top:0px; 
}


.email{

	margin-left:0;

}

}