@charset "utf-8"; 


body { height: 100%; overflow: hidden; padding: 0; }

/* guide-header */
.guide-header { height: 225rem; background: linear-gradient(180deg, rgba(0, 83, 91, 0.60) 0%, rgba(0, 129, 140, 0.00) 96.35%); position: relative; z-index: 3;}
.guide-header>.container { position: relative; display: flex; align-items: center; padding-top: 40rem; }

/* guide-logo */
.guide-logo { width: 100%; margin-left: 10%;}
.guide-logo img { max-width: 70%; height: auto;
	image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: -o-crisp-edges; /* Opera */
    image-rendering: -webkit-optimize-contrast; /*Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
 }

/* 顶部面板 */
.guide-panel { flex: 1 0 0%; min-width: 0; }
.guide-panel li { margin: 0 10rem; position: relative; }
.guide-panel .title a { display: block; height: 6em; overflow: hidden; width: 6em; text-align: center; font-size: 14em; transition: all 0.5s; color: #fff; border-radius:5rem; border: 1px solid rgba(255, 255, 255, 0.60); box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.10); }
.guide-panel li:hover .title a { background: #2fb8c8; color: #fff; }
.guide-panel .pic { display: none; position: absolute; left: 50%; margin-left: -65rem; top: 100%;  padding-top: 10rem; }
.guide-panel .pic img { width: 130rem; height: 130rem; border: 5rem solid #fff; }
.guide-panel .pic:before { display: block; position: absolute; top: -4rem; left: 50%; margin-left: -7rem; content: ""; width: 0; height: 0; border: 7rem solid transparent; border-bottom: 7rem solid #fff; }
.guide-panel li.on .pic { display: block; }
.guide-panel .iconfont { display: block; text-align: center; font-size: 3.2em; line-height: 1.1; }

/* banner */
.banner { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; }
.banner .pic img{ width: 100%; height: 90vh; transform: translate3d(0px, 0px, 0px) scale(1.15); transition: opacity 0.5s ease 0s, transform 0s ease 1s; object-fit: cover; }
.banner .con { display: none; }
.banner .swiper-slide-active .pic img { transform: scale(1); transition: all 5s ease 0s; }
.banner .swiper-pagination { bottom: 8%; text-align: center; padding: 0 2.6%; }
.banner .swiper-pagination-bullets .swiper-pagination-bullet { vertical-align: top; transition: all 0.5s; width: 18rem; height: 18rem; border: 2px solid transparent; background: rgba(255, 255, 255, 0.7); margin: 0 10rem; opacity: 1; }
.banner .swiper-pagination-bullets .swiper-pagination-bullet-active { background: #A13531; border: 2px solid rgba(255, 255, 255, 0.8); }


/* guide-footer */
.guide-footer {  }
.guide-footer>.container { }


/* list-menu */
.list-menu { text-align: center; margin: 0 auto; width: 80%;}
.list-menu li { display: flex; align-items: center; margin-top: 20rem; height: 3.5em; font-size: 20em; color: #fff; text-align: left; padding: 20rem 15%; position: relative; transition: all 0.5s;
	border-radius: 10rem;
	background-color: rgba(0, 0, 0, 0.5);
	border: 1px solid rgba(0, 0, 0, 0.5);
	box-shadow: 0px 0px 24px 0px rgba(149, 157, 165, 0.20);
 }
.list-menu li h3 { flex: 1 0 0%; min-width: 0; }
.list-menu li a { color: inherit; display: block; margin-bottom: 5rem; }
.list-menu li a:after { display: block; content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.list-menu .text-uppercase { font-size: 12rem; display: block; line-height: 1.2; }
.list-menu .iconfont { font-size: 3.5em; line-height: 0.9; margin-right: 10rem; transition: all 0.4s; 
	background: linear-gradient(to top, rgba(255,255,255,.2) 0%, rgba(255,255,255,1) 50%);
　　background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}
.list-menu li:hover { background-color: #fd9939; border-color: #fd9939; transform: translateY(-15rem); box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05); }
.list-menu li:hover .iconfont { transform: rotateY(180deg); }

/* footer-bar */
.guide-footer::before { background: linear-gradient(90deg, #19C2DA -0.7%, #4FABAE 99.7%); display: block; position: absolute; content: ""; min-height: 360rem; left: 0; width: 100%; bottom: 0; z-index: 2; }

.footer-bar { text-align: center; color: #fff; padding-bottom: 15rem; }
.footer-bar a { color: inherit; }
.footer-bar .footer-nav { font-size: 1.15em; margin-bottom: 10rem;}
.footer-bar .footer-nav li { margin-bottom: 10rem; line-height:1.2em; display: flex; align-items: center; }
.footer-bar .footer-nav .iconfont { display: none; color: #39b0ac; font-size: 20rem; text-align: center; vertical-align: middle; width: 30rem; height: 30rem; border: 1px solid #dedede; border-radius: 4rem; margin-right: 10rem; }
.footer-bar .footer-nav p { flex: 1 0 0%; min-width: 0;}
.footer-bar .copy-right { font-size: 1.1em; }

.col-lg-8 { position: absolute; z-index: 2; left: 0; top: 40%; transform: translateY(-50%); margin: 0; padding: 0; }
.col-lg-4 { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; min-height: 320rem; z-index: 3; }


/* 媒体查询---------------------------------------------------------------------------- */
@media (min-width:768px) {
	.guide-logo { width: 560rem; text-align: left; margin-left: 0;  }
	.list-menu li { height: 5em; }
	.list-menu li h3 { display: flex; align-items: center; font-size: 1.3em; }
	.list-menu li a { margin-right: 20rem; }
    .footer-bar .footer-nav li { line-height: 1.5em;}
}

@media (min-width:992px) {
	.list-menu { width: auto;}
	.list-menu { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 145rem; grid-gap: 40rem; }
	.list-menu li { background-color: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.60); padding: 20rem; }
	.list-menu li h3 { display: block; font-size: 1em; }
	.list-menu li a { margin-right: 0; }

	/* guide-footer */
	.guide-footer { position: absolute; height: auto; z-index: 2; left: 0; bottom: 0; width: 100%; background: url(../../base/img/guide-footer.png) no-repeat center top; background-size: cover; }
	.guide-footer::before { display: none; }
	.guide-footer>.container { position: relative; min-height: 290rem; }

	.footer-bar { padding: 20rem 20rem 15rem; min-height: auto; text-align: left; color: #333; width: 100%; background: url(../../base/img/copy-bg.jpg) no-repeat; background-size: cover; height: auto; border-radius: 40rem 40rem 0 0; box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.10);}
	.footer-bar .footer-nav .iconfont { display: block; }


	.col-lg-4 { position: static; width: 33.33333333%; left: auto; bottom: auto; min-height:auto; }
	.col-lg-8 { position: static; width: 66.66666667%; left: auto; top: auto; min-height:auto; transform: translateY(0); }
}