@charset "utf-8";
*{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
html { overflow:-moz-scrollbars-vertical; overflow-y:scroll; overflow-x:auto;}
body{ margin:0px; padding:0px; background:#fff; font-family:'Roboto', sans-serif, Arial; font-size:16px; font-weight:400; color:#444;}
img{ border:none;}
ul{ margin:0px; padding:0px; list-style:none;}
h1, h2, h3, h4, h5, h6{ margin:0px; padding:0px; font-size:16px; font-weight:400;}
a{ text-decoration:none; -moz-transition:all 0.1s ease-in; -webkit-transition:all 0.1s ease-in; transition:all 0.1s ease-in; cursor:pointer; outline:none; color:#444;}
p{ margin:0px; padding:0px;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block;}

table{ border-collapse:collapse; border-spacing:0px;}
table tr td, table tr th{ border-spacing:0px; padding:0px;}

.clear{ clear:both;}

.inner{ width:1150px; margin:0px auto;}

header{ width:100%; height:72px; background:#fff; border-bottom:solid 2px #f7941d; position:fixed; left:0px; top:0px; z-index:90;}
header .inner{ height:72px; position:relative;}
header .menu-btn{ position:absolute; left:15px; top:10px; display:none;}
header .menu-btn a{ display:block; width:40px; height:40px; line-height:40px; text-align:center; background:#f7941d; color:#fff; font-size:18px;}
header .menu-btn a:hover{}
header .logo{ float:left; padding:10px 0px; margin-right:30px;}
header .logo h1 a{ display:block; width:180px; height:50px; background:url(../images/logo-top.png) no-repeat; background-size:180px 50px; text-indent:-9999px; cursor:pointer;}
header .menu{ float:left; font-size:16px; font-weight:500;}
header .menu ul li{ float:left; border-left:solid 1px #eee;}
header .menu ul li a{ display:block; height:70px; line-height:70px; padding:0px 15px; color:#000;}
header .menu ul li a:hover{ color:#f7941d;}
header .menu ul li.selected a{ background:#f7941d; color:#fff;}
header .button{ float:right; padding:15px 0px; font-size:16px; font-weight:500;}
header .button a{ display:block; height:40px; padding:1px; border:solid 1px #33d0c8; color:#fff;}
header .button a span{ display:block; height:36px; line-height:36px; padding:0px 15px; background:#33d0c8; -moz-transition:all 0.1s ease-in; -webkit-transition:all 0.1s ease-in; transition:all 0.1s ease-in;}
header .button a:hover span{ background:#0885a8;}

section{ padding-top:72px;}

.intro{ padding:100px 0px; background:url(../images/intro-bg.jpg) no-repeat top center #00203c; background-size:cover;}
.intro .ship{ position:absolute; z-index:1; -moz-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); transform: translate(0, -50%);}
.intro .ship img{ display:block; width:100%;}
.intro .ship-1{ width:22%; left:16%; top:50%;}
.intro .ship-2{ width:24%; right:14%; top:40%;}
.intro .content{ position:relative; z-index:2;}
.intro .logo{ width:500px; height:138px; margin:0px auto; margin-bottom:80px;}
.intro .logo h2{ display:block; width:500px; height:138px; background:url(../images/logo-intro.png) no-repeat; background-size:500px 138px; text-indent:-9999px;}
.intro .video{ width:476px; margin:0px auto; margin-bottom:80px; position:relative; -moz-box-shadow:0px 0px 20px rgba(0, 0, 0, 0.30); -webkit-box-shadow:0px 0px 20px rgba(0, 0, 0, 0.30); box-shadow:0px 0px 20px rgba(0, 0, 0, 0.30);}
.intro .video a{ display:block;}
.intro .video .photo img{ display:block; width:100%; border:solid 1px #557199;}
.intro .video .play{ width:100px; height:100px; background:url(../images/play.png) no-repeat center center; position:absolute; left:50%; top:50%; margin-left:-50px; margin-top:-50px; -moz-transition:all 0.1s ease-in; -webkit-transition:all 0.1s ease-in; transition:all 0.1s ease-in;}
.intro .video a:hover .play{ opacity:0.6; filter:alpha(opacity=60);}
.intro .text{ font-size:18px; color:#fff; text-align:center; line-height:150%; text-shadow:1px 1px #000;}
.intro .text h3{ font-size:32px; font-weight:700; line-height:100%; margin-bottom:30px;}
.intro .text p{ margin-bottom:20px;}

.concept{ background:url(../images/concept-bg.jpg) no-repeat top center #033668; background-size:cover; text-align:center; font-size:0px;}
.concept .item{ width:33.33%; display:inline-block; padding:15px 10px; position:relative;}
.concept .item a{ display:block; border:solid 1px rgba(255, 255, 255, 0.25);}
.concept .item .photo img{ display:block; width:100%;}
.concept .item .name{ width:100%; text-align:center; font-size:72px; font-weight:700; color:#fff; position:absolute; left:0px; top:50%; -moz-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); opacity:0.5; filter:alpha(opacity=50);}
.concept .item a:hover{ border:solid 1px rgba(255, 255, 255, 0.50);}
.concept .item a:hover .name{ opacity:0.75; filter:alpha(opacity=75);}

.main-info{ padding:100px 0px; text-align:center; background:url(../images/content-bg.jpg) no-repeat top center #011a36; background-size:cover; color:#fff; font-size:18px;}
.main-info h3{ font-size:32px; font-weight:700; line-height:100%; margin-bottom:50px;}
.main-info p{ margin-bottom:30px; line-height:150%;}
.main-info .steps{ padding:20px 0px; margin-bottom:30px;}
.main-info .steps ul li{ width:23.5%; float:left; margin-right:2%;}
.main-info .steps ul li:nth-child(4n+0){ margin-right:0px;}
.main-info .steps ul li .number{ width:60px; height:52px; line-height:52px; margin:0px auto; margin-bottom:15px; background:url(../images/step-bg.png) no-repeat center center; font-size:24px; font-weight:700;}
.main-info .steps ul li .name{ font-size:16px; font-weight:500; margin-bottom:15px;}
.main-info .steps ul li .photo{ border:solid 1px rgba(255, 255, 255, 0.25);}
.main-info .steps ul li .photo img{ display:block; width:100%;}

.main-content{ padding:100px 0px; text-align:center; background:url(../images/content-bg.jpg) no-repeat top center #011a36; background-size:cover; color:#fff; font-size:18px;}
.main-content .title{ margin-bottom:30px;}
.main-content .title h2{ font-size:32px; font-weight:700; line-height:100%;}
.main-content .text{ line-height:150%; margin-bottom:50px;}
.main-content .product-list ul{ font-size:0px;}
.main-content .product-list ul li{ width:31%; display:inline-block; margin-right:3.5%; margin-bottom:3.5%; vertical-align:top;}
.main-content .product-list ul li:nth-child(3n+0){ margin-right:0px;}
.main-content .product-list ul li a{ display:block;}
.main-content .product-list ul li .photo{ border:solid 1px rgba(255, 255, 255, 0.25); margin-bottom:15px; -moz-transition:all 0.1s ease-in; -webkit-transition:all 0.1s ease-in; transition:all 0.1s ease-in;}
.main-content .product-list ul li .photo img{ display:block; width:100%;}
.main-content .product-list ul li .name{ font-size:16px; font-weight:500; color:#fff; -moz-transition:all 0.1s ease-in; -webkit-transition:all 0.1s ease-in; transition:all 0.1s ease-in;}
.main-content .product-list ul li a:hover .photo{ border:solid 1px #f7941d;}
.main-content .product-list ul li a:hover .name{ color:#f7941d;}

.product-detail{ width:640px; padding:10px; display:none;}
.product-detail .info table{ width:100%;}
.product-detail .info table tr td.left{ width:300px; padding-right:20px;}
.product-detail .info table tr td.left img{ display:block; width:100%;}
.product-detail .info table tr td.right{ width:320px; padding:20px 20px 20px 0px;}
.product-detail .info table tr td.right h3{ color:#f7941d; font-size:24px; font-weight:700; line-height:100%; margin-bottom:20px;}
.product-detail .info table tr td.right p{ font-size:15px; line-height:150%; margin-bottom:20px;}
.product-detail .info table tr td.right .link{ font-size:16px; font-weight:500;}
.product-detail .info table tr td.right .link a{ display:inline-block; height:40px; padding:1px; border:solid 1px #33d0c8; color:#fff;}
.product-detail .info table tr td.right .link a span{ display:block; height:36px; line-height:36px; padding:0px 15px; background:#33d0c8; -moz-transition:all 0.1s ease-in; -webkit-transition:all 0.1s ease-in; transition:all 0.1s ease-in;}
.product-detail .info table tr td.right .link a:hover span{ background:#0885a8;}

.fancybox-close-small:focus:after{ outline:none;}

.packs{ padding:100px 0px; text-align:center; background:url(../images/packs-bg.png) #f4f2e9; color:#444; font-size:18px; border-bottom:solid 3px #e2e2e2;}
.packs h3{ color:#231f20; font-size:32px; font-weight:700; line-height:100%; margin-bottom:50px;}
.packs p{ margin-bottom:30px; line-height:150%;}
.packs p.orange-txt{ font-weight:500;}
.packs p span{ color:#f7941d; font-size:21px;}
.packs .list{ padding:20px 0px;}
.packs .list ul{ font-size:0px;}
.packs .list ul li{ display:inline-block; margin:0px 30px; vertical-align:top;}
.packs .list ul li a{ display:block;}
.packs .list ul li .photo{ margin-bottom:15px; -moz-transition:all 0.1s ease-in; -webkit-transition:all 0.1s ease-in; transition:all 0.1s ease-in;}
.packs .list ul li .name{ font-size:14px; font-weight:500; -moz-transition:all 0.1s ease-in; -webkit-transition:all 0.1s ease-in; transition:all 0.1s ease-in;}
.packs .list ul li a:hover .photo{ opacity:0.80; filter:alpha(opacity=80);}
.packs .list ul li a:hover .name{ color:#f7941d;}

.orange-txt{ color:#f7941d;}

footer{ padding:50px 0px; background:#000; text-align:center;}
footer .logo{ margin-bottom:50px;}
footer .logo ul{ font-size:0px;}
footer .logo ul li{ display:inline-block; margin:5px 15px;}
footer .copyright{ font-size:13px; color:#999;}

.fixed-menu{ position:fixed; right:10px; bottom:10px; z-index:91;}
.fixed-menu ul li{ margin-top:10px;}
.fixed-menu ul li.topofpage{ display:none;}
.fixed-menu ul li a{ display:block; width:40px; height:40px; line-height:38px; text-align:center; border:solid 1px rgba(255, 255, 255, 0.25); background:rgba(0, 0, 0, 0.50); color:#fff;}
.fixed-menu ul li a img{ display:block; width:100%;}
.fixed-menu ul li a:hover{ border:solid 1px rgba(255, 255, 255, 0.40); background:rgba(0, 0, 0, 0.60); color:#fff;}

@media (max-width: 1367px) {
	.intro .ship-1{ width:26%; left:12%;}
	.intro .ship-2{ width:28%; right:10%;}
	
	.concept .item .name{ font-size:64px;}
}
@media (max-width: 1199px) {
	.inner{ width:960px;}
	
	header .menu{ font-size:15px;}
	header .button{ font-size:15px;}
	
	.intro{ padding:80px 0px;}
	.intro .logo{ width:435px; height:120px;}
	.intro .logo h2{ width:435px; height:120px; background-size:435px 120px;}
	
	.concept .item .name{ font-size:48px;}
	
	.main-info{ padding:80px 0px;}
	.main-info .steps ul li .name{ font-size:14px;}
	
	.main-content{ padding:80px 0px;}
	
	.packs{ padding:80px 0px;}
	
	footer .logo ul li{ margin:5px 10px;}
	footer .logo ul li img{ height:36px;}
}
@media (max-width: 991px) {	
	.inner{ width:720px;}
	
	header .menu{ font-size:14px;}
	header .menu ul li a{ padding:0px 10px;}
	header .button{ font-size:14px;}
	header .button a span{ padding:0px 10px;}
	
	.intro{ padding:60px 0px;}
	.intro .ship-1{ top:40%;}
	.intro .ship-2{ top:36%;}
	.intro .logo{ width:326px; height:90px; margin-bottom:60px;}
	.intro .logo h2{ width:326px; height:90px; background-size:326px 90px;}
	.intro .video{ width:50%; margin-bottom:60px;}
	.intro .video .play{ width:80px; height:80px; background-size:80px 80px; margin-left:-40px; margin-top:-40px;}
	.intro .text{ font-size:17px;}
	.intro .text h3{ font-size:30px;}
	
	.concept .item .name{ font-size:36px;}
	
	.main-info{ padding:60px 0px; font-size:17px;}
	.main-info h3{ font-size:30px; margin-bottom:40px;}
	.main-info .steps ul li{ width:48%; margin-right:4%; margin-bottom:4%;}
	.main-info .steps ul li:nth-child(4n+0){ margin-right:4%;}
	.main-info .steps ul li:nth-child(2n+0){ margin-right:0px;}
	
	.main-content{ padding:60px 0px; font-size:17px;}
	.main-content .title h2{ font-size:30px;}
	.main-content .product-list ul li .name{ font-size:15px;}
	
	.product-detail .info table tr td.right h3{ font-size:21px; margin-bottom:15px;}
	.product-detail .info table tr td.right p{ font-size:14px; margin-bottom:15px;}
	.product-detail .info table tr td.right .link{ font-size:14px;}
	.product-detail .info table tr td.right .link a{ height:36px;}
	.product-detail .info table tr td.right .link a span{ height:32px; line-height:32px;}
	
	.packs{ padding:60px 0px; font-size:17px;}
	.packs h3{ font-size:30px; margin-bottom:40px;}
	
	footer{ padding:40px 0px;}
	footer .logo{ margin-bottom:40px;}
	footer .logo ul li img{ height:30px;}
}
@media (max-width: 767px) {
	.inner{ width:auto; padding:0px 15px;}
	
	header{ height:60px;}
	header .inner{ height:60px; padding:0px;}
	header .menu-btn{ display:block;}
	header .logo{ float:none; margin:0px;}
	header .logo h1 a{ width:144px; height:40px; background-size:144px 40px; margin:0px auto;}
	header .menu{ float:none; position:absolute; left:15px; top:50px; background:#f7941d; display:none;}
	header .menu ul li{ float:none; border-left:none; border-top:solid 1px rgba(0, 0, 0, 0.10);}
	header .menu ul li:first-child{ border-top:none;}
	header .menu ul li a{ height:auto; line-height:normal; padding:10px 20px; white-space:nowrap;}
	header .menu ul li a:hover{ color:#fff;}
	header .button{ float:none; padding:0px; position:absolute; right:15px; top:10px;}
	
	section{ padding-top:60px;}
	
	.intro{ padding:50px 0px;}
	.intro .ship-1{ left:6%; top:36%;}
	.intro .ship-2{ right:6%; top:24%;}
	.intro .logo{ width:232px; height:64px; margin-bottom:50px;}
	.intro .logo h2{ width:232px; height:64px; background-size:232px 64px;}
	.intro .video{ width:60%; margin-bottom:50px;}
	.intro .video .play{ width:60px; height:60px; background-size:60px 60px; margin-left:-30px; margin-top:-30px;}
	.intro .text{ font-size:16px;}
	.intro .text h3{ font-size:24px;}
	
	.concept .item{ padding:10px 5px;}
	.concept .item .name{ font-size:28px;}
	
	.main-info{ padding:50px 0px; font-size:16px;}
	.main-info h3{ font-size:24px;}
	.main-info .steps{ margin-bottom:20px;}
	.main-info .steps ul li .number{ width:52px; height:45px; line-height:45px; margin-bottom:10px; font-size:21px; background-size:52px 45px;}
	.main-info .steps ul li .name{ font-size:12px; margin-bottom:10px;}
	
	.main-content{ padding:50px 0px; font-size:16px;}
	.main-content .title h2{ font-size:24px;}
	.main-content .product-list ul li .name{ font-size:14px;}
	
	.product-detail{ width:90%;}
	.product-detail .info table tr td.right h3{ font-size:18px;}
	
	.packs{ padding:50px 0px; font-size:16px;}
	.packs h3{ font-size:24px;}
	.packs .list ul li{ width:42%; margin:0px 4%;}
	.packs .list ul li .photo img{ display:block; width:100%;}
	.packs .list ul li .name{ font-size:13px;}
	
	footer .logo{ margin-bottom:30px;}
	footer .logo ul li{ margin-bottom:10px;}
	footer .logo ul li img{ height:25px;}
}
@media (max-width: 481px) {
	header .logo{ padding:15px 0px;}
	header .logo h1 a{ width:108px; height:30px; background-size:108px 30px; margin:0px auto;}
	header .button{ font-size:12px;}
	
	.intro{ padding:40px 0px;}
	.intro .ship-1{ left:3%; top:32%;}
	.intro .ship-2{ right:3%; top:20%;}
	.intro .logo{ width:196px; height:54px; margin-bottom:40px;}
	.intro .logo h2{ width:196px; height:54px; background-size:196px 54px;}
	.intro .video{ width:75%; margin-bottom:40px;}
	.intro .video .play{ width:40px; height:40px; background-size:40px 40px; margin-left:-20px; margin-top:-20px;}
	.intro .text{ font-size:14px;}
	.intro .text h3{ font-size:21px;}
	
	.concept .item .name{ font-size:18px;}
	
	.main-info{ padding:40px 0px; font-size:14px;}
	.main-info h3{ font-size:21px; margin-bottom:30px;}
	.main-info p{ margin-bottom:20px;}
	.main-info .steps{ margin-bottom:0px;}
	.main-info .steps ul li{ width:49%; margin-right:2%;}
	.main-info .steps ul li:nth-child(2n+0){ margin-right:0px;}
	.main-info .steps ul li .number{ width:42px; height:36px; line-height:36px; margin-bottom:5px; font-size:18px; background-size:42px 36px;}
	.main-info .steps ul li .name{ font-size:10px;}
	
	.main-content{ padding:40px 0px; font-size:14px;}
	.main-content .title h2{ font-size:21px;}
	.main-content .product-list ul li{ width:32%; margin-right:2%;}
	.main-content .product-list ul li .photo{ margin-bottom:10px;}
	.main-content .product-list ul li .name{ font-size:12px;}
	
	.product-detail .info table tr td.right h3{ font-size:16px; margin-bottom:10px;}
	.product-detail .info table tr td.right p{ font-size:12px; margin-bottom:10px;}
	.product-detail .info table tr td.right .link{ font-size:12px;}
	.product-detail .info table tr td.right .link a{ height:32px;}
	.product-detail .info table tr td.right .link a span{ height:28px; line-height:28px; padding:0px 10px;}
	
	.packs{ padding:40px 0px; font-size:14px;}
	.packs h3{ font-size:21px; margin-bottom:30px;}
	.packs p{ margin-bottom:20px;}
	.packs .list ul li .name{ font-size:12px;}
	
	footer{ padding:30px 0px;}
	footer .logo{ margin-bottom:20px;}
	footer .logo ul li img{ height:22px;}
	footer .copyright{ font-size:12px;}
}
@media (max-width: 351px) {
	header .button a span{ padding:0px 5px;}
	
	.concept .item .name{ font-size:16px;}
	
	.main-info .steps ul li .name{ font-size:9px;}
}