﻿@ charset "utf-8";
/*Mobile Base*/
*:first-child+html body{z-index:9999;}

body { 
	font-size: 87.5%; 
	line-height:1; 
}
a {
	margin:0;
	padding:0;
	vertical-align:baseline;
	background:transparent;
}
img {
	width:100%;
	border: 0;
	vertical-align: top;
}
input {
  border-radius: 0;
}
article { margin: 0; }


.top {
	position: fixed;
	bottom: 95px;
	right: 10px;
	width: 35px;
	height: 35px;
	background: #5CC7D0 url('/images/hdzt/ycybzx/imgs/cd-top-arrow.png') no-repeat center 50%;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	opacity: .5;
	z-index: 3;
	text-indent: 100%;
	white-space: nowrap;
	z-index: 1000;
}

#NAV {
	width: 100%;
}
#NAV ul.navigation {
	width: 100%;
	height: 0;
	background:  url('/images/hdzt/ycybzx/imgs/nav.jpg') no-repeat center top #000;
	background-size: auto 100%;
	padding-bottom: 10.1%;
	overflow: hidden;
}
#NAV  ul.navigation span {
	font-size: 11px;
}
#NAV  ul.navigation li {
	position: relative;
	float: left;
	width: 25%;
	margin:0;
	padding: 0;
	/*background: #000;*/
	text-align: center;
	font-size: 14px;
	letter-spacing: -1px;
}
#NAV  ul.navigation li a {
	display: block;
	width: 100%;
	padding: 15px 0;
	overflow: hidden;
	/*background: #000;*/
	/*border-right: 1px solid #6b6b7a;*/
	text-transform: uppercase;
	color: #fff;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
}
#NAV ul.navigation li:nth-child(1) a.active {
	color: #8e90ff;
	font-weight: bold;
}
#NAV ul.navigation li:nth-child(2) a.active {
	color: #ff5252;
	font-weight: bold;
}
#NAV ul.navigation li:nth-child(3) a.active {
	color: #c55dff;
	font-weight: bold;
}
#NAV ul.navigation li:nth-child(4) a.active {
	color: #ff631e;
	font-weight: bold;
}
#NAV ul.navigation a,
#NAV ul.navigation a:hover {
	-webkit-transition: opacity .3s 0s, visibility 0s 0s;
	-moz-transition: opacity .3s 0s, visibility 0s 0s;
	transition: opacity .3s 0s, visibility 0s 0s;
}
#NAV .f-nav { z-index: 9999; position: fixed; left: 0; top: 0; width: 100%; 
	animation: fadein 1.5s;
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@media screen and (max-width: 320px) {
	#NAV  ul.navigation li a {
		display: block;
		width: 100%;
		padding: 11px 0;
		overflow: hidden;
		/*background: #000;*/
		/*border-right: 1px solid #6b6b7a;*/
		text-transform: uppercase;
		color: #fff;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	#NAV  ul.navigation li {
		float: left;
		width: 25%;
		margin:0;
		padding: 0;
		text-align: center;
		font-size: 12px;
		letter-spacing: -1px;
	}
}
@media screen and (min-width: 321px) and (max-width: 375px) {
	#NAV  ul.navigation li a {
		display: block;
		width: 100%;
		padding: 13px 0;
		overflow: hidden;
		/*background: #000;*/
		/*border-right: 1px solid #6b6b7a;*/
		text-transform: uppercase;
		color: #fff;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	#NAV  ul.navigation li {
		float: left;
		width: 25%;
		margin:0;
		padding: 0;
		text-align: center;
		font-size: 12px;
		letter-spacing: -1px;
	}
}


@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
article.main {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/main.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 115.1%;
}
#Menu1 header {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m1-header.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 59.1%;
}
#Menu1 .a1 h4 {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m1-a1-h4.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 18.2%;
}
#Menu1 .a1 .s1 h5 {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m1-a1-s1-h5.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 21.7%;
}
#Menu1 .a1 .s1 ul, #Menu1 .a1 .s2 ul, #Menu2 .a1 .s1 ul, #Menu4 .a1 .s2 dl, #Menu4 .a2 .s1 dl, #Wonjin .s1 ul {*zoom:1;}
#Menu1 .a1 .s1 ul:after, #Menu1 .a1 .s2 ul:after, #Menu2 .a1 .s1 ul:after, #Menu4 .a1 .s2 dl:after, #Menu4 .a2 .s1 dl:after, #Wonjin .s1 ul:after {content:""; clear: both; display: block; }
#Menu1 .a1 .s1 li, #Menu1 .a1 .s2 li, #Menu2 .a1 .s1 li, #Wonjin .s1 li {float: left; width: 50%; }
#Menu1 .a1 .s1 div {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m1-a1-s1-div.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 45.1%;
}
#Menu1 .a1 .s2 h5 {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m1-a1-s2-h5.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 21.9%;
}
#Menu1 .a1 .s2 div {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m1-a1-s2-div.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 45.1%;
}
#Menu1 .a2 {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m1-a2.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 72.1%;
}
#Menu1 .a3 h4 {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m1-a3-h4.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 40.8%;
}
#Menu1 .a3 ul {
	background-color: #e6eeff;
	overflow: hidden;
	padding-bottom: 10.7%;
}
#Menu1 .a3 li, #Menu2 .a3 li, #Menu3 .a2 li, #Menu4 .a3 li {
	overflow: hidden;
	padding-bottom: 5%;
}


#Menu2 header {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m2-header.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 59.1%;
}
#Menu2 .a1 h4 {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m2-a1-h4.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 18.2%;
}
#Menu2 .a1 .s1 h5 {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m2-a1-s1-h5.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 22.7%;
}
#Menu2 .a1 .s1 div {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m2-a1-s1-div.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 45.1%;
}
#Menu2 .a1 .s2 h5 {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m2-a1-s2-h5.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 24%;
}
#Menu2 .a1 .s2 dl {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m2-a1-s2-dl.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 66.8%;
}
#Menu2 .a1 .s2 ul {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m2-a1-s2-ul.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 40%;
}
#Menu2 .a2 {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m2-a2.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 72.1%;
}
#Menu2 .a3 h4 {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m2-a3-h4.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 40.8%;
}
#Menu2 .a3 ul {
	background-color: #ffe7e7;
	overflow: hidden;
	padding-bottom: 10.7%;
}



#Menu3 header {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m3-header.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 94.1%;
}
#Menu3 .a1 .s1 h5 {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m3-a1-s1-h5.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 29.4%;
}
#Menu3 .a1 .s1 dd {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m3-a1-s1-dd.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 20.4%;
}
#Menu3 .a1 .s1 div {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m3-a1-s1-div.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 65.5%;
}
#Menu3 .a1 .s2 h5 {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m3-a1-s2-h5.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 29.4%;
}
#Menu3 .a1 .s2 dd {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m3-a1-s2-dd.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 20.4%;
}
#Menu3 .a1 .s2 div {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m3-a1-s2-div.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 65.5%;
}
#Menu3 .a1 .s3 h5 {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m3-a1-s3-h5.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 29.4%;
}
#Menu3 .a1 .s3 dd {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m3-a1-s3-dd.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 20.4%;
}
#Menu3 .a1 .s3 div {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m3-a1-s3-div.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 65.5%;
}
#Menu3 .a1 .s4 h5 {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m3-a1-s4-h5.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 30.4%;
}
#Menu3 .a1 .s4 dd {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m3-a1-s4-dd.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 28.3%;
}
#Menu3 .a1 .s4 div {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m3-a1-s4-div.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 65.5%;
}
#Menu3 .a2 h4 {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m3-a2-h4.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 40.8%;
}
#Menu3 .a2 ul {
	background-color: #f6e6ff;
	overflow: hidden;
	padding-bottom: 10.7%;
}



#Menu4 header {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m4-header.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 130%;
}
#Menu4 .a1 h4 {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m4-a1-h4.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 18.2%;
}
#Menu4 .a1 .s1, #Menu4 .a2 .s1{ 
	overflow: hidden;
	padding-bottom: 13.5%;
}
#Menu4 .a1 .s1 h5 {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m4-a1-s1-h5.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 29.3%;
}
#Menu4 .a1 .s2 h5 {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m4-a1-s2-h5.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 29.3%;
}
#Menu4 .a1 .s2 dt, #Menu4 .a2 .s1 dt {
	width: 66%;
	float: left;
}
#Menu4 .a1 .s2 dd {
	float: left;
	width: 34%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m4-a1-s2-dd.jpg') top center no-repeat #000;
	background-size: auto 100%;
	padding-bottom: 48%;
	margin-left:0;
}
#Menu4 .a1 .s3 {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m4-a1-s3.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 68.2%;
}
#Menu4 .a2 h4 {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m4-a2-h4.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 18.1%;
}
#Menu4 .a2 .s1 h5 {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m4-a2-s1-h5.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 29.3%;
}
#Menu4 .a2 .s1 dd {
	float: left;
	width: 34%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m4-a2-s1-dd.jpg') top center no-repeat #000;;
	background-size: auto 100%;
	padding-bottom: 48%;
	margin-left:0;
}
#Menu4 .a2 .s2 h5 {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m4-a2-s2-h5.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 29.4%;
}
#Menu4 .a2 .s3 {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m4-a2-s3.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 66.9%;
}
#Menu4 .a3 h4 {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/m4-a3-h4.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 40.8%;
}
#Menu4 .a3 ul {
	background-color: #ffeee6;
	overflow: hidden;
	padding-bottom: 10.7%;
}

@media all and (max-width:320px) {
	#Menu4 .a1 .s2 dd {
		float: left;
		width: 34%;
		height: 0;
		font-size: 0;
		background:  url('/images/hdzt/ycybzx/imgs/m4-a1-s2-dd.jpg') top center no-repeat #000;
		background-size: auto 100%;
		padding-bottom: 48.1%;
	}
	#Menu4 .a2 .s1 dd {
		float: left;
		width: 34%;
		height: 0;
		font-size: 0;
		background:  url('/images/hdzt/ycybzx/imgs/m4-a2-s1-dd.jpg') top center no-repeat #000;
		background-size: auto 100%;
		padding-bottom: 48.2%;
	}
}

#Wonjin .s2 {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/w-s2.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 175%;
}
#Wonjin .s3 {
	position: relative;
	width: 100%;
	height: 0;
	font-size: 0;
	background:  url('/images/hdzt/ycybzx/imgs/w-s3.jpg') top center no-repeat;
	background-size: auto 100%;
	padding-bottom: 107.6%;
}