@charset "utf-8";

/* CSS Document */

 



body{ margin:0px; padding:0px; font-family:'Roboto', sans-serif;}

a{ text-decoration:none;}

 

.main{ width:100%; margin:0px; padding:0px; overflow:hidden; background:#09aeec;  }

.main1{ width:100%; margin:0px; padding:0px; overflow:hidden; background:#ffffff;  }

.main2{ width:100%; margin:0px; padding:0px; overflow:hidden; background:#e54c4c;  } 

.main3{ width:100%; margin:0px; padding:0px; overflow:hidden; background:#ffffff;   }

.main4{ width:100%; margin:0px; padding:0px; overflow:hidden; background:#03153e;  }

.main5{ width:100%; margin:0px; padding:0px; overflow:hidden; background:#020e28;  }



.wrapper{ width:90%; max-width:1400px; margin:0px auto; overflow:hidden; padding:5px 0px;}

.wrapper1{ width:90%; max-width:1400px; margin:0px auto; overflow:hidden; padding:5px;}

.wrapper2{ width:100%; max-width:1400px; margin:0px auto; overflow:hidden; padding:0px 0px;}

.wrapper3{ width:90%; max-width:1400px; margin:0px auto; overflow:hidden; padding:10px;}

.wrapper4{ width:90%; max-width:1400px; margin:0px auto; overflow:hidden; padding:10px;}

.wrapper5{ width:90%; max-width:1400px; margin:0px auto; overflow:hidden; padding:10px;} 

.wrapper2a{ width:90%; max-width:1400px; margin:0px auto; overflow:hidden; padding:10px;} 

   

#htopleft{width:50%; float:left;margin:0px; padding:5px; overflow:hidden; min-width:300px}

#htopright{width:48%; float:left;margin:0px; padding:5px; overflow:hidden; min-width:300px}





#htopleft p{ margin:0px;  padding: 0px 0px 0px 0px; float: left; color:#ffffff; font-size:15px;}

#htopright  p{ margin:0px;  padding: 0px 0px 0px 0px; float: right; color:#ffffff; font-size:15px;}

#htopright  a{ margin:0px; padding-left:8px;  }



 

#logo{ width:35%; float:left; min-width:300px;}



#cont{ width:90%; margin:0px auto; padding-top:20px; }

#cont h1{ color:#413686; font-size:22px; font-weight:500; text-align:center}

#cont h2{ color:#413686; font-size:17px; font-weight:400}

#cont p{ color:#343434; font-size:16px; text-align:center; line-height:35px; padding-top:10px}

#cont ul{ color:#343434; font-size:15px; text-align:justify; line-height:30px;}



#cont2{ width:100%; float:left}

#cont2 h1{ color:#ffffff; font-size:22px; font-weight:500; text-align:left}

#cont2 h2{ color:#413686; font-size:22px; font-weight:400}

#cont2 p{ color:#343434; font-size:16px; text-align:justify; line-height:35px; padding-top:10px}

#cont2 ul{ color:#343434; font-size:15px; text-align:justify; line-height:30px;}



#cont1{ width:100%; float:left; padding-bottom:30px}

#cont1 h1{ color:#413686; font-size:20px; font-weight:500}

#cont1 h2{ color:#413686; font-size:17px; font-weight:400}

#cont1 p{ color:#919191; font-size:15px; text-align:center; line-height:25px;}

#cont1 ul{ color:#343434; font-size:15px; text-align:justify; line-height:30px;}

#cont1 a{ color:#ffffff; font-size:15px; background:#ca1f26; padding-bottom:10px; padding-top:10px;

 padding-left:20px; padding-right:20px; line-height:30px;}



#cli{width:50%; float:left}



#midd1{ width:33%; float:left; min-width:250px; text-align:center}

 

 #zwleft{float:left; width:55%;} 

#zwright{float:left; width:45%}

#zwleft1{float:left; width:50%}

#tagtxt{padding-top:200px; text-align:center; width:80%; margin:0 auto} 



 

#footcon {  width:100%; padding-top:20px; padding-bottom:20px} 



#col{ width:23%;   float:left; margin:0px; padding:0px 0px; padding-left:10px; min-width:250px}

#col h2{ color:#ffffff; font-size:18px; font-weight:normal; margin:0px; padding:10px 0px; padding-bottom:5px;  }

#col ul{ list-style:none; margin:0px; padding:0px;}

#col ul li{ color:#818a9e; margin:0px; padding:7px 0px;}

#col ul li a{ color:#818a9e; font-size:16px; margin:0px; padding:3px 0px;}

#col ul li a:hover{ color:#F07800;}

#col p{  color:#818a9e; font-size:16px; margin:0px 0px 15px 0px; padding: 0px; line-height:25px;  }



#footcon1 { text-align:center; width:100%; padding-top:5px; padding-bottom:20px;  margin:0px auto;} 

#footcon1 p { color:#647499;width:100%; font-size:14px; text-align:center; float:left; padding:0px; margin:0px auto;}

#footcon1 p a{ color:#647499; }.



*:before,

*:after {

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

}



 





form {

  max-width: 850px;

  text-align: center;

  margin: 20px auto;

  background:#ccc;

  padding:15px;

}

form input, form textarea {

  border: 0;

  outline: 0;

  padding: 1em;

 

  -moz-border-radius: 8px;

  -webkit-border-radius: 8px;

  border-radius: 8px;

  display: block;

  width: 80%;

  margin-top: 1em;

 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);

  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);

  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);

  resize: none;

  font-size:16px;

}

form input:focus, form textarea:focus {

  -moz-box-shadow: 0 0px 2px #e74c3c !important;

  -webkit-box-shadow: 0 0px 2px #e74c3c !important;

  box-shadow: 0 0px 2px #e74c3c !important;

}

form #input-submit {

  color: white;

  background: #e74c3c;

  cursor: pointer;

}

form #input-submit:hover {

  -moz-box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);

  -webkit-box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);

  box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);

}

form textarea {

  height: 50px;

}

.btnRefresh {

  	background-color: #4CB9EB;

  	border: 0;

  	padding: 7px 10px;

  	margin-left:10px;

  	color: #FFF;  

}

.half {

  float: left;

  width: 48%;

  margin-bottom: 1em;

}



.right {

  width: 50%;

}



.left {

  margin-right: 1%;

  margin-left:1%;

}



@media (max-width: 480px) {

  .half {

    width: 100%;

    float: none;

    margin-bottom: 0;

  }

}

/* Clearfix */

.cf:before,

.cf:after {

  content: " ";

  /* 1 */

  display: table;

  /* 2 */

}



.cf:after {

  clear: both;

}

.ac-container{

	width:100%;

	margin: 10px auto 30px auto;

	text-align: left;

}

.ac-container label{

	 

	padding: 5px 20px;

	position: relative;

	z-index: 20;

	display: block;

	height: 30px;

	cursor: pointer;

	color: #777;

	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);

	line-height: 33px;

	font-size: 19px;

	background: #ffffff;

	background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);

	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));

	background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);

	background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);

	background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);

	background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );

	box-shadow: 

		0px 0px 0px 1px rgba(155,155,155,0.3), 

		1px 0px 0px 0px rgba(255,255,255,0.9) inset, 

		0px 2px 2px rgba(0,0,0,0.1);

}

.ac-container label:hover{

	background: #fff;

}

.ac-container input:checked + label,

.ac-container input:checked + label:hover{

	background: #c6e1ec;

	color: #3d7489;

	text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);

	box-shadow: 

		0px 0px 0px 1px rgba(155,155,155,0.3), 

		0px 2px 2px rgba(0,0,0,0.1);

}

.ac-container label:hover:after,

.ac-container input:checked + label:hover:after{

	content: '';

	position: absolute;

	width: 24px;

	height: 24px;

	right: 13px;

	top: 7px;

	background: transparent url(../images/arrow_down.png) no-repeat center center;	

}

.ac-container input:checked + label:hover:after{

	background-image: url(../images/arrow_up.png);

}

.ac-container input{

	display: none;

}

.ac-container article{

	background: rgba(255, 255, 255, 0.1);

	margin-top: -1px;

	overflow: hidden;

	height: 0px;

	position: relative;

	z-index: 10;

	-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;

	-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;

	-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;

	-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;

	transition: height 0.3s ease-in-out, box-shadow 0.6s linear;

}

.ac-container article p{

	 

	color: #777;

	line-height: 23px;

	font-size: 14px;

	padding: 20px;

	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);

}

.ac-container input:checked ~ article{

	-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;

	-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;

	-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;

	-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;

	transition: height 0.5s ease-in-out, box-shadow 0.1s linear;

	box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);

}

.ac-container input:checked ~ article.ac-small{

	height: 140px;

}

.ac-container input:checked ~ article.ac-medium{

	height: 180px;

}

.ac-container input:checked ~ article.ac-large{

	height:auto;

}









 

 

img{max-width: 100%; vertical-align: middle;}

.full-length{width: 100%; float: left; padding-bottom: 80px;}

 





.btn{display: inline-block; padding: 5px 10px; font-size: 14px; color: #fff; border: 2px solid #4d92d9; background-color: #4d92d9; text-decoration: none; transition: 0.4s;}

.btn:hover{background-color: transparent; color: #4d92d9; transition: 0.4s;}

.text-desc{position: absolute; left: 0; top: 0; background-color: #fff; height: 100%; opacity: 0; width: 95%; padding: 20px;}



.port-4{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); z-index: 10;}



.port-4.effect-1 img{transition: 0.5s; transform: rotateY(360deg) scale(1, 1);}

.port-4.effect-1 .text-desc{transform: rotateY(0deg) scale(0, 0); transition: 0.5s; opacity: 0; padding: 45px 20px 20px;}

.port-4.effect-1:hover .text-desc{transform: rotateY(360deg) scale(1, 1);  opacity: 1;}

.port-4.effect-1:hover img{transform: rotateY(0deg) scale(0, 0);}



.port-4.effect-2{z-index: 12;}

.port-4.effect-2 img{transition: 0.5s; transform: rotateX(360deg) scale(1, 1);}

.port-4.effect-2 .text-desc{transform: rotateX(0deg) scale(0, 0); transition: 0.5s; opacity: 0; padding: 45px 20px 20px;}

.port-4.effect-2:hover .text-desc{transform: rotateX(360deg) scale(1, 1);  opacity: 1;}

.port-4.effect-2:hover img{transform: rotateX(0deg) scale(0, 0);}



.port-4.effect-3 img{transition: 0.5s; transform: rotate(360deg) scale(1, 1);}

.port-4.effect-3 .text-desc{transform: rotate(0deg) scale(0, 0); transition: 0.5s; opacity: 0; padding: 45px 20px 20px;}

.port-4.effect-3:hover .text-desc{transform: rotate(360deg) scale(1, 1);  opacity: 1;}

.port-4.effect-3:hover img{transform: rotate(0deg) scale(0, 0);}





@media only screen and (max-width: 1090px){

	

	.port-5.effect-1 {z-index: 19;}

	.port-4.effect-1 .text-desc{transform: rotateY(0deg) scale(0, 0); transition: 0.5s; opacity: 0; padding: 0px 0px 0px;}

}



@media only screen and (max-width:900px){

	

	.port-5.effect-1 {z-index: 19;}

	.port-4.effect-1 .text-desc{transform: rotateY(0deg) scale(0, 0); transition: 0.5s; opacity: 0; padding: 15px 10px 10px;}

}



@media only screen and (max-width:470px){

	

	.port-5.effect-1 {z-index: 19;}

	.port-4.effect-1 .text-desc{transform: rotateY(0deg) scale(0, 0); transition: 0.5s; opacity: 0; padding: 0px 0px 0px;}

	.text-desc h1{ padding-bottom:0px; font-size:18px}

	.text-desc p{ padding-top:3px; font-size:15px; line-height:24px}

}

@media only screen and (max-width: 360px){

	

	.port-1 .text-desc, 

	.port-1.effect-3:hover .text-desc, 

	.port-3.effect-1 .text-desc, 

	.port-3.effect-3 .text-desc,

	.port-4.effect-1 .text-desc,

	.port-4.effect-2 .text-desc,

	.port-4.effect-3 .text-desc, .port-8 .text-desc{padding: 20px;}

	.text-desc{padding: 7px;}

	.port-5.effect-1 .text-desc{padding: 13px 20px 20px 90px;}

	.port-5.effect-2 .text-desc{padding: 10px;}

	.port-5.effect-3 .text-desc{padding: 16px 90px 20px 20px;}

	.port-6.effect-1 .text-desc .btn, 

	.port-6.effect-2 .text-desc .btn,

	.port-6.effect-3 .text-desc .btn,

	.port-7.effect-1 .text-desc .btn,

	.port-7.effect-2 .text-desc .btn,

	.port-7.effect-3 .text-desc .btn,

	.port-8.effect-3 .text-desc .btn{display: none;}

	.port-6.effect-2 .text-desc{padding: 20px 120px 20px 20px;}

	.port-6.effect-3 .text-desc{padding: 75px 20px 10px;}

	.port-7.effect-1 .text-desc{padding: 12px 10px;}

	.port-8.effect-3 .text-desc{padding: 28px 70px 20px;}

}