body{padding:0;margin:0;overflow-x: hidden;}

.menubar {height:100px;border:0px solid red;}
.menubar img {height:60px;margin-top:15px;}
.menubar a:first-child{border-left:1px solid #ddd;}
.menubar a {display:inline-block;width:19%;line-height:30px;color:white;text-decoration:none;text-align:center;border-right:1px solid #ddd;}
.menubar a:hover,.menubar .active {background: rgba(200,200,200, 0.5)}

@media screen and (max-width:600px){
	dbody *{border:1px solid red;}
	.menubar {text-align:center;}
	.banner {width:100%;background-image:url(../img/banner.jpg);height:200px; background-position:50% 50%; background-size:100% 100%; opacity:1;z-index:-2}
	.aboutbanner {background-image:url(../img/ship-20.jpg);height:200px;background-position:50% 50%; background-size:100% 100%; opacity:1;z-index:-2}
	.slogon {display:none;}
	.center-container{border:0px solid yellow;}
	.menubar .menulist {margin:30px 0;padding:0;border:0px solid blue;}
}

@media screen and (min-width:1000px){
	.banner {background-image:url(../img/banner.jpg);background-position:50% 50%; background-size:cover; height:800px; opacity:1;z-index:-2;}
	.aboutbanner {width:100%;background-image:url(../img/ship-20.jpg);height:400px;background-position:50% 50%; background-size:cover; opacity:1;z-index:-2}
	.center-container{width:1200px;margin:0 auto;border:0px solid yellow;}
	.menubar .menulist {float:right;width:800px;margin:30px 0;padding:0;border:0px solid blue;}
}

.text-box{margin-left:20px;margin-top:150px;dbackground: rgba(200,200,200, 0.5)}
.text-box img {position:absolute;margin-top:00px;margin-left:-25px;z-index:0}
.text-box .text-line{position:relative;margin-top:100px;z-index:1}
.text-box .p1 {font-family:'Arial Black';color:white;font-weight:bold;font-style: italic;font-size:48px;height:30px}
.text-box .p2 {font-family:'Source Han Sans',Geneva,sans-serif;letter-spacing:2px;color:white;font-weight:bold;font-size:42px;height:20px}
.text-box .p3 {font-family:'Source Han Sans',Geneva,sans-serif;letter-spacing:2px;color:white;ffont-size:24px;height:20px}



.aboutbanner .text-box {margin-left:800px;margin-top:-50px;}


.circle {background:#fff;border-radius:50%;width:160px;height:160px;box-shadow:0px 0px 20px #777;margin:0 auto;}
.circle h3 {font-family:'Arial Black';font-weight:bold;font-size:36px;color:#fff;margin-top:35px;}
.circle div {position:absolute;width:120px;height:120px;border-radius:50%;margin:20px;box-shadow:2px -2px 10px #777;}
.circle .clr1 {background:linear-gradient(45deg,#aaa,#ddd);}
.circle .clr2 {background:linear-gradient(45deg,#09F,#0CF);}
.circle .clr3 {background:linear-gradient(45deg,#039,#09F);}
.circle .clr4 {background:linear-gradient(45deg,#00A3A0,#00CDC9);}
.circle .clr5 {background:linear-gradient(45deg,#006C9E,#009AC8);}
.circle .clr6 {background:linear-gradient(45deg,#C90,#FC0);}
.circle .clr7 {background:linear-gradient(45deg,#AC781C,#D1993D);}
.circle .clr8 {background:linear-gradient(45deg,#FB3B00,#FF5100);}
.circle .clr9 {background:linear-gradient(45deg,#D40D39,#F61144);}
.circle .clr10 {background:linear-gradient(45deg,#C70000,#E30000);}
.circle .clr11 {background:linear-gradient(45deg,#D40D39,#F61144);}
.circle .clr12 {background:linear-gradient(45deg,#C70000,#E30000);}

.contract { background:#fafafa}

.footer {background:#242838;font-family:'Arial Black';color:white;padding:20px 0;}
.footer .c{border:0px solid #555;margin:10px;}
.footer .c3 {text-align:center;}
.footer .c1 .img1{width:160px;margin-top:0px;margin-left:70px;position:relative;z-index:1;}
.footer .c1 .img2{display:none;width:150px;margin-top:00px;margin-left:-120px;position:absolute;z-index:0;transform: rotate(180deg);}
.footer .title {width:200px;font-weight:bold;font-size:26px;height:30px;border-bottom:5px solid #4E7DFF;}
.footer .text {margin-top:30px;line-height:150%;font-family:'Source Han Sans',Geneva,sans-serif;letter-spacing:2px;}
.footer .copyright {font-family:'Source Han Sans',Geneva,sans-serif;letter-spacing:2px;font-size:14px;text-align:center;line-height:150%;margin-top:10px;color:#aaa}

@media screen and (max-width:600px){
.footer .c1 {display:none}
.footer .c3 {margin-top:50px}
.footer .copyright {margin-top:50px;border-top:1px dashed #777;padding-top:10px;}
.footer .title {text-align:center; width:100%;}
}
@media screen and (min-width:1000px){
.footer {margin-top:200px;}
.footer .contact {display:flex;border-bottom:1px dashed #777;padding:20px 0;color:#aaa}
.footer .c1,.footer .c3{width:25%;} .footer .c2{width:50%;}


.fixed-image {z-index:0;position:fixed;transform;translate(-50%, -50%);}
.grid > div{display:flex;padding:0px;margin-top:20px;}
.grid > div > div {width:25%;height:300px;background:#eee;margin-left:20px;text-align:center;border-radius:8px;border:1px solid #ddd;display: grid;place-items:center;}
.grid img {max-width:250px;max-height:250px;transition: transform 0.1s ease;}
.grid > div > div:hover {box-shadow:0px 0px 10px #ccc;}
.grid > div > div:hover img {transform: scale(1.1);}

.bigimgdiv {position:fixed;top:0;left:0;display:none;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:1000;}
.bigimgdiv label{display:block;width:50px;height:50px;line-height:50px;text-align:center;font-size:30px;color:white;position:fixed;right:20px;top:20px;border-radius:50%;background:#aaa;}
.bigimg{position:fixed;top:0;left:0;display:none;max-height:100%;max-width:100%;z-index:1001;top: 50%;left:50%;transform:translate(-50%,-50%);dbox-shadow:5px 5px 10px #777;}
}