@charset "utf-8";
/* CSS Document */

body { padding:0; margin:0; background:#cbcbcb; font-family:Arial, Helvetica, sans-serif;}
img { border:0; outline:none;}
a { text-decoration:none; color:inherit}


.easing,.easinga a, .easing a,.easing a img { transition:.3s linear; -webkit-transition:.3s linear; -moz-transition:.3s linear; -ms-transition:.3s linear; -o-transition:.3s linear;}

.sitecenter { max-width:800px; margin:0 auto; -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow:0px 0px 5px 0px rgba(50, 50, 50, 0.75);box-shadow:0px 0px 5px 0px rgba(50, 50, 50, 0.75); overflow:hidden; position:relative; background:#fff;}
.headerframe { float:left; width:100%; height:92px}
.header { background:#00a1e4; width:100%; height:92px;box-sizing:border-box; padding:24px 30px; position:relative; z-index:99}
.header h1  { position:absolute; width:100%; top:26px; left:0; margin:0; text-align:center; font:36px 'Myriad Pro', Arial, Helvetica, sans-serif; color:#fff; z-index:-1}
.center {width:100%;}
.menu { float:left}
.menu .current { float:left; color:#fff; font:36px 'Myriad Pro', Arial, Helvetica, sans-serif; cursor:pointer;}	
.menu .current a { float:left; margin:3px 0 0 0;}
.menu .current span { background:url(../images/icon_menu.png) no-repeat center; background-size:contain; width:40px; height:40px; float:left; margin:0 10px 0 0;}
.menu ul { display:none; list-style-type:none; position:absolute; top:60px; left:0;}

.homepage .module .info img { opacity:0;}

.cbp-spmenu {background: #00a1e4;position: absolute;}
.cbp-spmenu a {float:left;box-sizing:border-box; width:100%;display: block;color: #6a6a6a;font:30px 'Myriad Pro', Arial, Helvetica, sans-serif;font-weight: 300;background:#fff;text-decoration:none;}
.cbp-spmenu a .iconframe { width:56px; height:45px; position:relative;float:left; margin:0 20px 0 0;}
.cbp-spmenu a .iconframe img { top:0; left:0; bottom:0; right:0; position:absolute; margin:auto}
.cbp-spmenu a span { float:left; margin:7px 0 0 0}
.cbp-spmenu a:last-child{ margin:20px 0 0 0;}
.cbp-spmenu a:hover {background: #373737; color:#fff;}
.cbp-spmenu a.active{background: #dfdfdf; color:#6a6a6a}
.cbp-spmenu a:active {background: #dfdfdf;color: #6a6a6a;}
.cbp-spmenu-vertical {width: 400px;height: 100%;top: 0;z-index: 1000;}
.cbp-spmenu-vertical a {border-bottom: 1px solid #258ecd;padding: 20px;}
.cbp-spmenu-horizontal {width: 100%;height: 150px;left: 0;z-index: 1000;overflow: hidden;}
.cbp-spmenu-horizontal h3 {height: 100%;width: 20%;float: left;}

.cbp-spmenu-horizontal a {float: left;width: 20%;padding: 0.8em;border-left: 1px solid #258ecd;}
.cbp-spmenu-left {left: -500px;}


.header .number { float:right; color:#fff; font:23px 'Myriad Pro', Arial, Helvetica, sans-serif}
.header .number a { float:left; margin:3px 10px 0 0; line-height:22px; text-align:right}
.header .number span{ width:46px; height:42px; float:left; background:url(../images/icon_phone.png) no-repeat center; background-size:contain}

.mainframe { width:100%; float:left; background:url(../images/bg_main.jpg) no-repeat center top;}
.mainframe .logo { width:100%; height:55%; background:url(../images/logo.png) no-repeat center; margin:5% 0 0 0 ; background-size:contain;}
.mainframe .slogan {margin: 5% 0 0 0; text-align:center}
.mainframe .slogan img { max-width:75%; max-height:100%;}

.mainframe.small .logo{ margin:0; background:url(../images/logo_small.png) no-repeat center; background-size:contain;}
.mainframe.small .slogan { margin:3% 0 0 0;}

.moduleframe { width:100%; float:left; font-size:10px; border-top:3px solid #cacacc}
.moduleframe .module{ width:50%; float:left; position:relative; background:#00a9e7; cursor:pointer;}
.moduleframe .info { width:100%; height:100%}
.moduleframe .info .fbbigger{ float:left; width:100%; height:100%;}

.moduleframe .videomodule  { width:100%; float:left; position:relative; padding:30px 40px; box-sizing:border-box;}
.moduleframe .videomodule iframe { width:100%; max-height:400px; float:left; min-height:400px; border:0; margin:0; padding:0}

.moduleframe .detail{ width:100%; display:none; float:left; position:relative; background:#0087B8; opacity:0.3;}
.moduleframe .detail .icon { background:#076A90; height:3px; width:100%; border-top:1px solid #3e626f;}
.moduleframe .detail .icon span { margin:3px 0 0 20%; float:left; width:27px; height:16px; background:url(../images/icon_triangle.png) no-repeat center top; background-size:contain;}
.moduleframe .detail p { top:0; bottom:0; left:0; right:0; display:table; margin:auto;box-sizing:border-box; padding:40px; position:absolute;
 font:bold 300% 'Myriad Pro', Arial, Helvetica, sans-serif; color:#fff; text-align:center}
.moduleframe .detail .close { position:absolute; z-index:9; right:30px; top:30px; cursor:pointer;}
.moduleframe .detail .close a{ float:right; font:bold 330% 'Myriad Pro', Arial, Helvetica, sans-serif; color:#fff; margin:5px 15px 0 0}
.moduleframe .detail .close span{ width:40px; height:40px; float:right; background:url(../images/icon_close.png) no-repeat center; background-size:contain;}
.moduleframe .module .bigger{ position:absolute; right:0; bottom:0; width:120px; height:30px; box-sizing:border-box; padding:5px 10px 5px 0;  text-align:right; color:#4599c3; font:bold 180% 'Myriad Pro', Arial, Helvetica, sans-serif; letter-spacing:-1px; background:url(../images/bg_bigger.png) no-repeat right; background-size:contain;}

.moduleframe .module.modulecolor{background:#00a1e4;}
.moduleframe .module.modulecolor2{background:#00a9e7;}
.moduleframe .module.modulecolor3{background:#00b1eb;}
.moduleframe .module.modulecolor4{background:#16bcef;}
.moduleframe .module.modulecolor5{background:#44c5f2;}
.moduleframe .module.modulecolor6{background:#6ecff6;}
.moduleframe .module.modulecolor7{background:#8dd8f8;} 
.moduleframe.detailpage .module img{ opacity:0}
.moduleframe.detailpage {float: left;background: #00a9e7;}

.detailinfo {  color:#fff; float:left; width:100%;}
.detailinfo .pstyle { font:300% 'Myriad Pro', Arial, Helvetica, sans-serif; margin:0;}
.detailinfo .pstyle p:first-child { padding-top:40px}
.detailinfo .pstyle p { line-height:16px}
.detailinfo .pstyle p strong { line-height:24px}
.detailinfo .pstyle iframe { width:100%; min-height:400px}
.pstyle p {padding:0 40px;}
.pstyle h3 {padding:0 40px;}
.detailinfo .pstyle p,.detailinfo .pstyle a { margin:0; color:#fff;}
.detailinfo h3 {margin:0}


.contactinfo {width: 200px;background: #1cabe7;position: absolute;z-index: 77;right: 10%;text-align: center;padding: 20px;}
.contactinfo h1 {margin: 0 0 20px 0;padding: 0;color: #fff;font: 600 200% 'Open Sans', sans-serif;}
.contactinfo p {margin: 0;color: #fff;font-family: 'Open Sans', sans-serif;font-weight: 600;font-size: 140%;letter-spacing: -1px;}
.contactinfo p.margin {margin: 0 0 20px 0;}

.footer { width:100%; height:90px; float:left; background:#fff;}
.footer .linkframe { float:right; width:100%;}
.footer .linkframe a { float:left; box-sizing:border-box; height:90px;border-right:1px solid #ebebeb; position:relative; width:100px}
.footer .linkframe a:hover img{ opacity:.7}
.footer .linkframe a img { position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; opacity:.5}
.footer .linkframe a:first-child{  border-left:1px solid #ebebeb;}
@media (max-width: 480px) {
	.header { padding:10px 10px; height:40px;}
	.headerframe { height:40px;}
	.lineheight ,.lineheight a { line-height:10px !important; font-size:12px;}
	.lineheight a { margin:3px 5px 0 0 !important}
	.header h3 { font-size:16px !important; top:13px !important}
	.header .number { font-size:12px; line-height:10px;}
	.header .number a { line-height:10px;margin-top:5px}
	.menu .current span { width:20px; height:20px;}
	.contactinfo { width:100%; position:relative; box-sizing:border-box; left:0; right:0}
	.moduleframe { font-size:8px}
	.cbp-spmenu-vertical { width:240px;}
	.cbp-spmenu-vertical a { padding:10px;}
	.cbp-spmenu a { font-size:16px;}
	.cbp-spmenu a span ,.menuitemm{ margin-top:3px !important; font-size:16px; line-height:19px !important}
	.cbp-spmenu a .iconframe { width:35px; height:25px;}
	.cbp-spmenu a .iconframe img{ max-width:29px}
	.header .number span { width:20px; height:20px}
	.menu .current a { font-size:14px;}
	.moduleframe .detail p { font-size:200%;}
	.moduleframe .module .bigger { font:120% 'Myriad Pro', Arial, Helvetica, sans-serif; height:20px; width:75px;}
	.moduleframe .detail .close a { font-size:200%;}
	.moduleframe .detail .close span { width:30px; height:30px; }
	.detailinfo .pstyle iframe { min-height:250px}
	.moduleframe .detail p { font-size:200%;}
	.footer .linkframe a { width:70px;}
	}
@media (max-width: 320px) {
	
	.header h3 { font-size:18px; top:36px}
	.header .number { font-size:12px;}
	.header .number a{ line-height:14px; margin-top:10px}
	.header .number span { width:36px;}
	.cbp-spmenu-vertical { width:300px;}
	.cbp-spmenu-vertical a { padding:10px;}
	.cbp-spmenu a { font-size:22px}
	.cbp-spmenu a span { margin:12px 0 0 0;}
	.cbp-spmenu a .iconframe { width:35px}
	.cbp-spmenu a .iconframe img{ max-width:29px}
	.menu .current a {}
	.moduleframe .detail p { font-size:180%;}
	.moduleframe .detail .close a { font-size:200%;}
	.moduleframe .detail .close span { width:30px; height:30px; }
	.detailinfo .pstyle iframe { min-height:250px}
	.moduleframe .detail p { font-size:200%;}
	.footer .linkframe a { width:60px;}
	}