.sub-banner-wrap { position: relative; }

/* banner */
.sub-banner-wrap { position: relative; width: 100%; white-space: nowrap; overflow:hidden; }
.sub-banner-wrap .banner {position: relative;display: inline-block; width: 100%; padding: 60px 0;}
.sub-banner-wrap .banner:after { content: ''; position: absolute; top:0; left: 0; background: url("../../img/sub/sub-common/banner_bg.svg") no-repeat center; width:100%; height:100%; background-position: 50%; background-size: cover !important; }

/* page-title */
.sub-banner-wrap .banner .page-title {width:100%; text-align:center; position: relative; z-index: 20;}
.sub-banner-wrap .banner .page-title h3 { font-size: 3.3rem; letter-spacing: -0.025em; font-weight: 600; }
.sub-banner-wrap .banner .page-title .breadcrumb { display: inline; }
.sub-banner-wrap .banner .page-title .breadcrumb ul { text-align: center; margin-bottom: 10px; }
.sub-banner-wrap .banner .page-title .breadcrumb ul li {display: inline-block; font-size: 1.4rem; color: #888;}
.sub-banner-wrap .banner .page-title .breadcrumb ul li.arr {margin: 0 5px;}
.sub-banner-wrap .banner .page-title .breadcrumb ul li.arr img { width: 9px; height:13px; position: relative; top:4px; -webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-ms-transform: rotate(-90deg);-o-transform: rotate(-90deg);transform: rotate(-90deg); opacity: .3;}
.sub-banner-wrap .banner .page-title .breadcrumb ul li.home img { width: 14px; height:14px; position: relative; top:2px; opacity: .4;}

/* sub menu */
.sub-menu-wrap {position: relative; width: 100%; height: 65px; border-bottom: 1px solid #ddd; }
.sub-menu-wrap .sub-menu {position: relative; width: 1200px; height: 100%; margin: 0 auto;}
.sub-menu-wrap .sub-menu > ul { border-left:1px solid #ddd; height: 100%; display: flex; align-items: center;}
.sub-menu-wrap .sub-menu > ul > li { position: relative; float:left; width: 310px; font-size: 1.5rem; border-right: 1px solid #ddd; }
.sub-menu-wrap .sub-menu > ul > li > a { display: block; width: 100%; height: 100%; line-height: 65px; padding: 0 30px; padding-right:60px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.sub-menu-wrap .sub-menu > ul > li > a img { width: 11px; height: 6px; position: absolute; top:50%; 
margin-top:-3px; right:30px; }
.sub-menu-wrap .sub-menu > ul > li > ul { position: absolute; top:65px; left:0; width:100%; height: 0; z-index: 50; overflow: hidden; background: #fff;  border: 0; }
.sub-menu-wrap .sub-menu > ul > li > ul li { width: 100%; }
.sub-menu-wrap .sub-menu > ul > li > ul li a { width: 100%; height: 100%; display: block; padding: 10px 30px; font-size: 1.3rem; }
.sub-menu-wrap .sub-menu > ul > li > ul li a:hover {background: #f0f0f0;}
.sub-menu-wrap .sub-menu > ul > li.open ul { height: auto; border:1px solid #e5e5e5; }


	/* table */
	.sub-content { padding-top: 50px; }
	.tit-area { position: relative;  align-items: center; width: 100%; padding-top: 30px; }
	.tit-area .tit { font-size: 1.8rem; color: #3d4049; letter-spacing: 0px; padding-left: 15px;}
	.sub-content .con-text { position: relative; font-size: 1.5rem; padding: 15px 0 0 17px; line-height: 1.6; font-weight: 400; color: #3d4049;}
	.sub-content .con-text .bold { font-weight: 600;}
	.sub-content .tab { position: relative; font-size: 14px; padding: 15px 0 0 30px; line-height: 1.7; font-weight: 400; color: #3d4049;}
	.sub-content .con-text .symbol { font-weight: 500; font-size: 15px;}
	.sub-content .con-text .symbol::after { content: '';background: #333;position: absolute;width: 4px;height: 4px;top: 25px;left: 15px;border-radius: 50%;}
	.sub-content .table-text { font-size: 15px; padding: 5px 0 5px 13px; line-height: 1.7; text-align: left; font-weight: 300; position: relative; }
	.sub-content .table-text .span-tit { font-weight: 400;}
	.sub-content .table-text .span-tit::before { content: ''; background: #333; position: absolute; width: 4px; height: 4px; top: 15px; left: 0; border-radius: 50%;}
	.sub-content .table-tit { font-size: 16px; font-weight: 500;}
	.content-wrap { width: 100%; }
	.content-wrap .main-tit {border-bottom: 1px solid #3c3c3c; padding-bottom: 15px; color: #3d4049; font-size: 24px;}
	.content-area { padding-bottom: 60px;}

	.subc { margin-top: 20px;}
	.stable { border-top: 1px solid #3CA54E; border-left: 1px solid #dee3eb; width: 100%;}
	.stable:first-child {border-left: 0;}
	.stable .sth { background: #f8f8f8; border-bottom: 1px solid #dee3eb; border-left: 1px solid #ddd;  padding: 15px; font-size: 16px; color: #333; text-align: center; font-weight: normal; width: 400px; }
	.stable .sth:first-child { border-left: 0; padding: 0 20px;}
	.stable .std { background: #fff; border-bottom: 1px solid #dee3eb; border-left: 1px solid #ddd; font-size: 15px; padding: 15px; color: #3d4049; text-align: center; letter-spacing: -0.5px;}
	.stable .std:first-child { border-left: 0;}
	.sub-content .tit-area::after { content: ''; display: block; width: 4px; height: 22px; background: #3CA54E; border-radius: 20px; position: absolute; bottom: 0;}
	
	
	/* sub table */
	.sub-table { width: 100%; margin-top: 20px; letter-spacing: 0px; font-size: 16px; color: #555; }
	.sub-table .con { width: 100%; height: 100%; background: #f9f9f9; border: 1px solid #dedede; 
		padding: 15px 20px; display: flex; justify-content: space-between; align-items: center;}
	.sub-table .con .export { width: 14px; height: 14px;  position: relative; margin-right: 8px;}
	.sub-table .con .btn-text { font-size: 12px; font-weight: 100; color: #fff; }
	.sub-table .con .sub-tit { font-size: 16px; font-weight: 600;}

	/* sub table graphic */
	.graphic { position: relative; height: auto; display: flex; align-items: center ; padding: 30px 0 30px 10px;}
	.graphic img { max-width: 100%; height: auto; }
	.graphic .pledge { padding-right: 40px;}
	.text { position: relative; height: auto; display: flex; align-items: center; padding: 0 0 30px 10px;}
	.center {position: relative;  padding: 30px 0; }
	.row { position: relative; height: auto; display: inline-block; padding: 30px 10px 30px 10px; }

	.graphic .center { max-width: 100%; height: auto; margin: 0 auto;}


	.picture { position: relative; height: auto; display: flex; flex-direction: row;
    flex-wrap: wrap; }
	.picture p { text-align: center; padding-top: 5px; font-size: 16px; font-weight: 400;} 
	.picture .arrow { padding: 75px 0 0 20px; }
	.picture .arrow { padding: 75px 0 0 20px; }
	

	/* center */
	.header-tit { padding-bottom: 30px; }
	.header-tit .sub-tit { padding-top: 20px; color: #3d4049; font-weight: 600; font-size: 3.2rem;}
	.header-tit .sub-txt { font-weight: 400; color: #727783; font-size: 1.5em; }
	.text-area { width: calc(100% - 300px); margin-right: 70px; }

	/* history */
	.history-area .history-content { padding: 40px; padding-left: 70px;}
	.history-area .history-content h2.year { font-size: 25px; padding-left: 70px; border-bottom: 1px solid #3CA54E; color: #3CA54E; display: inline-block; margin-left: -70px;}
	.history-area .history-content ul { margin: 10px 0 40px;}
	.history-area .history-content ul li p.date { display: inline-block; font-size: 14px; margin-top: 12px; color: #222; vertical-align: top; padding-right: 20px; font-weight: 600;}
	.history-area .history-content ul li p.cont { display: inline-block; font-size: 14px; margin-top: 10px; color: #666; line-height: 25px;}
	/* background */
	.con-img .justice { width: 60px; height: auto;}







@media all and (max-width: 1200px) {
	/* header banner */
	.sub-banner-wrap {min-width: 100%; width: 100%;}
	.sub-banner-wrap .banner .page-title {top:calc(50% + 50px);}
	.content-wrap .main-tit { padding-top: 30px; font-size: 20px;}

	/* sub-menu */
	.sub-menu-wrap {height: 50px;}
	.sub-menu-wrap .sub-menu > ul > li > ul {top:50px;}
	.sub-menu-wrap .sub-menu > ul > li.open ul {top:50px;}
	.sub-menu-wrap .sub-menu > ul > li > a {line-height: 50px;}
	.sub-content { padding: 50px 30px;}
	.header-tit .sub-tit { padding-top: 30px;}

}

@media all and (max-width: 768px) {
	/* sub-menu */
	.sub-menu-wrap .sub-menu {width: 100%;}
	.sub-menu-wrap .sub-menu > ul > li {width:50%;}
	.sub-menu-wrap .sub-menu > ul > li > a {padding: 0 15px; padding-right: 30px;}
	.sub-menu-wrap .sub-menu > ul > li > a img {right:15px;}
	.sub-menu-wrap .sub-menu > ul > li > ul li a {padding: 15px;}
	.right-photo {flex-direction: row; flex-wrap: wrap; justify-content: center}
	.right-photo .introduce { padding: 0 0 20px 0; margin: 0 auto;}
	.header-tit .sub-tit { padding-top: 30px; text-align: center;}
	.text-area { width: 100%; text-align: center; margin: 0 auto;}

	/* content */
	.graphic { position: relative; height: auto; display:block; padding: 30px 10px 30px 10px; }
	.graphic .circle { max-width: 20%;}
	.graphic img { width: 100%;}
	.graphic .ci-text { width: 100%; padding-bottom: 30px; text-align: center;}
	.picture p { font-size: 12px;}

	.sub-table .con .sub-tit { font-size: 14px;}

	/* board */
	.stable .sth {  padding: 5px; font-size: 14px;}
	.stable .std { padding: 5px; font-size: 11px;}


}
@media all and (max-width: 425px) {
	/* header banner */
  .sub-banner-wrap .banner:after { background-position: 37% 0; }
	.sub-banner-wrap .banner .page-title h3 {font-size: 2.4rem;}
	.sub-banner-wrap .banner .page-title .breadcrumb ul li.arr {margin:0 5px;}
}