@charset "UTF-8";
/*-------------------------------------------------
title       : 레이아웃
Author      : ㅈㅁㅈ
Create date : 2020-06-03
-------------------------------------------------*/
[id*="layerPopup"] .popup_cont {background-color: #fff; overflow: auto;}
[id*="layerPopup"] .popup_cont a {display: block; overflow: hidden;}
[id*="layerPopup"] .popup_cont a img {transition: all 1500ms ease;} 
[id*="layerPopup"] .popup_cont a img:hover {transform: scale(1.2);}

#wrap {overflow: hidden; }
#header { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 9rem; padding: 0 5rem; background-color: rgba(0, 0, 0, 0.2); transition: all 0.2s; }
#header::after { position: fixed; left: 0; top: 9rem; z-index: 1; width: 100%; height: 0; background-color: #000; content: ''; opacity: 0.2; }
#header #logo {float: left; margin-top: 2.5rem;}
#header #logo a {position: relative; display: block; width: 26rem; height: 4rem;  overflow: hidden;}
#header #logo a::before { display: block; width: 100%; height: 100%; text-align: center; line-height: inherit; height: 100%; background: url("/main/img/layout/logo_f.png") no-repeat center 0; background-size: 100% auto; content: ''; transition: all 0.2s; }
#header #logo img { vertical-align: top; }

#header .search .open { overflow: hidden; position: absolute; right: 15rem; top: 3rem; width: 2.8rem; height: 2.8rem; text-align: center; line-height: 2.8rem; }
#header .search .open::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; font-size: 2.5rem; color: #fff; content: ''; }
#header .search .group { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; position: absolute; left: 0; top: 0; z-index: 5; width: 100% !important; background-color: #fff; }
#header .search .form { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70rem; max-width: calc(100% - 6rem); margin-left: auto !important; margin-right: auto !important; padding-right: 3rem; border-bottom: 0.4rem solid #222; }
#header .search .form input { font-size: 2.8rem; width: 100%; padding-bottom: 2rem; border: 0 none; font-weight: 700; color: #222; }
#header .search .form input:-ms-input-placeholder { color: #999;}
#header .search .form input::-webkit-input-placeholder { color: #999; }
#header .search .form input::-ms-input-placeholder { color: #999;}
#header .search .form input::placeholder { color: #999; }
#header .search .form button { overflow: hidden; position: absolute; right: 0; bottom: 2rem; width: 3rem; height: 3rem; text-align: right; line-height: 3rem; }
#header .search .form button::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; font-size: 3rem; color: #222; content: ''; }
#header.search #logo a::before { height: 0; }
#header.search .search .group { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; height: 21.5rem; transition: all 0.2s; }
#header.active { background-color: #fff; }
#header.active::after { height: 100%; opacity: 0.2; transition: opacity 0.2s; }
#header.active #logo a::before { height: 0; }
#header.active .search .open::before { color: #222; }
#header.active #hnb .lang a {border-color: #ddd;  color: #222; }
#header.active #hnb .lang a::before { color: #226bbe; }
#header.active #gnb1 > ul::before, #header.active #gnb1 > ul::after {height: 33.5rem;border-top: 1px solid #cccfd1;transition: all 0.2s;}
#header.active #gnb1 > ul > li > a { color: #222; }
#header.active #gnb1 > ul .submenu {visibility: visible;overflow: visible;width: auto;height: auto;opacity: 1;transition: opacity 0.2s 0.1s;}
#header.active .gnb_item { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; padding: 3rem; transition: padding 0.2s, opacity 0.2s; }

#hnb {float: right;padding-top: 3rem; color: #777;  font-size: 1.5rem;  }
#hnb li { display: inline; }
#hnb li + li::before { display: inline-block; position: relative; top: -0.1rem; width: 1px; height: 0.8rem; margin: 0 1rem 0 0.5rem; border-left: 1px dotted #7d7d7e; content: ''; vertical-align: middle; }
#hnb a:hover, #hnb a:focus { text-decoration: underline; }

#hnb #searchForm {display: inline-block; min-height: 3rem; margin-right: 1rem;}
#hnb #searchForm input {display: inline-block; width: 20rem; padding: 0.25rem; background-color: transparent; border: 0; border-bottom: 2px solid #fff; color: #fff; vertical-align: middle;}
#hnb #searchForm input:-ms-input-placeholder { color: #fff;}
#hnb #searchForm input::-webkit-input-placeholder { color: #fff; }
#hnb #searchForm input::-ms-input-placeholder { color: #fff;}
#hnb #searchForm input::placeholder { color: #fff; }
#hnb #searchForm .btn_topsearch {display: inline-block; vertical-align: middle;}
#hnb #searchForm .btn_topsearch i {display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; font-size: 3rem; color: #fff;}
#header.active #hnb #searchForm input {border-bottom-color: #333; color: #333;}
#header.active #hnb #searchForm input:-ms-input-placeholder { color: #333;}
#header.active #hnb #searchForm input::-webkit-input-placeholder { color: #333; }
#header.active #hnb #searchForm input::-ms-input-placeholder { color: #333;}
#header.active #hnb #searchForm input::placeholder { color: #333; }
#header.active #hnb #searchForm .btn_topsearch i {color: #333;}

#hnb .lang {position: relative; float: right; width: 7rem; z-index: 5;}
#hnb .lang::before { display: none; }
#hnb .lang a {position: relative; display: inline-block;  width: 0;  min-width: 7rem;  height: 0; padding: 0.2rem 0.5rem; background-color: transparent; border: 1px solid #fff;  line-height: 1.6;  text-overflow: ellipsis;  color: #fff; text-align: left;  vertical-align: top;  transition: all 0.2s;  font-size: 1.3rem; font-weight: 600; white-space: nowrap;   opacity: 0; overflow: hidden;}
#hnb .lang a:hover, #hnb .lang a:focus { background-color: #d5d7d8; color: #fff; }
#hnb .lang a::before { display: inline-block; position: relative; margin-top: -0.1rem; font-family: "xeicon"; vertical-align: top; font-size: 1.5rem; margin-right: 0.25rem; font-weight: 400; content: ''; }
#hnb .lang a + a { margin-top: 1px; transform: translateY(-100%); }
#hnb .lang a:hover, #hnb .lang a:focus { border-color: transparent; background-color: #226bbe; color: #fff !important; text-decoration: none; }
#hnb .lang a:hover::before, #hnb .lang a:focus::before { color: inherit !important; }
#hnb .lang a.active { display: block; visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; z-index: 1; }
#hnb .lang a.active::after { position: absolute; top: auto; left: auto; right: auto; font-family: "xeicon"; right: 0.5rem; content: ''; transition: all 0.2s; }
#hnb .lang a { display: none; }
#hnb .lang.active .active::after { transform: rotate(180deg); }
#hnb .lang.active a { display: block; visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; transform: translateY(0) !important; transition: all 0.2s; }
#gnb2 { display: none; }
#gnb2 .control { overflow: hidden; position: absolute; right: 2rem; top: 2rem; width: 5rem; height: 5rem; text-align: center; line-height: 5rem; }
#gnb2 .control::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; font-size: 3rem; color: #fff; content: ''; }

#gnb2 .control.close { display: none; }

#gnb2 .control.close::before { content: ''; }

#gnb2 > ul {visibility: hidden;overflow: hidden;width: 0;height: 0;opacity: 0;position: absolute;left: 0;top: 9rem;z-index: 2;width: 100% !important;background-color: #fff;}

#gnb2 > ul > li > a { font-size: 2rem; display: block; position: relative; border-bottom: 1px solid #cccfd1; padding-left: 4rem; font-weight: 600; color: #000; line-height: 5rem; }

#gnb2 > ul > li > a::after { position: absolute; top: auto; left: auto; right: auto; font-family: "xeicon"; right: 3rem; top: 0; content: ''; transition: all 0.2s; }

#gnb2 > ul > li.active > a::after { transform: rotate(180deg); }

#gnb2 > ul > li.active .submenu { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; padding: 1rem 4rem; transition: all 0.2s; }

#gnb2 .submenu { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; padding: 0 4rem; background-color: #f7f8fa; }

#gnb2 .submenu div { display: none; }

#gnb2 .submenu li { position: relative; padding-left: 1.5rem; text-align: left; }

#gnb2 .submenu li::before { position: absolute; left: 0; top: auto; content: ''; }

#gnb2 .submenu li::before { top: 1.3rem; width: 0.4rem; height: 0.4rem; border-radius: 100%; background-color: #3f444d; }

#gnb1 > ul { position: absolute; left: 46rem; top: 0; right: 46rem; z-index: 2; text-align: center; }

#gnb1 > ul > li { display: inline-block; vertical-align: top; }

#gnb1 > ul > li > a { font-size: 2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; position: relative; padding: 0 5.5rem; font-weight: 600; color: #fff; line-height: 9rem; vertical-align: top; }
#gnb1 > ul > li > a::before,
#gnb1 > ul > li > a.active::before { position: absolute; left: 50%; bottom: 0; width: 0; height: 0.4rem; background-color: #226bbe; content: ''; transition: all 0.2s; }
#gnb1 > ul > li.lnb4 > a.active::before {background-color: #fff;}
#gnb1 > ul > li.active > a::before,
#gnb1 > ul > li > a.active::before { left: 0; width: 100%; }

#gnb1 > ul > li.active .submenu ul { background-color: #f2f8fc; color: #222; }

#gnb1 > ul::before { position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; content: ''; top: 9rem; height: 0; border-left: 1px solid #e3e6e8; border-right: 1px solid #e3e6e8; }

#gnb1 > ul::after { position: absolute; left: 50%; top: 0; z-index: -1; width: 1000%; height: 100%; margin-left: -500%; content: ''; top: 9rem; z-index: -2; height: 0; background-color: #fff; }

#gnb1 > ul .submenu { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; display: block !important; }

#gnb1 > ul .submenu ul {height: 33.5rem;padding: 3rem 0;font-weight: 400;color: #777;line-height: 3.5rem;transition: all 0.2s;}

#gnb1 > ul .submenu div { display: none; }

.gnb_item { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; position: absolute; right: 0; top: 9rem; z-index: 3; width: 46rem !important; padding: 0 3rem; }

.gnb_item .banner {	
    position: relative;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    height: 12rem;
    margin-bottom: 1rem;
    padding: 2rem;
    background: url(/main/img/layout/50th_info.png) no-repeat center center;
    z-index: 0;
    overflow: hidden;
	}
.gnb_item .banner::before {	
    position: absolute;
    top: 2rem;
    left: 2rem;
    width: calc(100% - 4rem);
    height: calc(100% - 4rem);
    background-color: rgba(34,107,190, .8);
    transition: all 0.2s;
    z-index: -2;
    content: '';
	}
.gnb_item .banner strong {
	position: relative; 
	display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.3rem 0 1.3rem 3rem;
    color: #fff;
	letter-spacing: -0.1rem; 
	line-height: 1.2; 
	font-size: 1.6rem; 
	font-weight: 500; 
	z-index: 0; 
	}
.gnb_item .banner strong > span {
	display: block; 
	position: relative; 
	margin-bottom: 0.5rem;
    color: #fff;
	font-size: 2.2rem;  
	font-weight: 600;
	}
/* .gnb_item .banner strong > span::before { 
	position: absolute; 
	bottom: 0;  
	left: -0.4rem;  
	width: calc(100% + 0.8rem); 
	height: 1.2rem; 
	background-color: #ffc525; 
	content: ''; 
	opacity: 0.2; 
	} */
.gnb_item .banner .more {
	display: flex; align-items: center; align-content: center;  justify-content: center;
	width: 7rem; 
	height: 8rem;
	padding: 1rem; 
	background-color: #175091;
	 color: #fff;
	line-height: 1.3;
	text-align: center; 
	transition: all 0.2s; 
	font-size: 1.4rem; 
	overflow: hidden; 
	}

.gnb_item .icons { display: table; width: calc(100% + 0px); table-layout: fixed; height: 11rem; border: 1px solid #c9d2d8; color: #000007; text-align: center; }
.gnb_item .icons > * { display: table-cell; padding-right: 0px; vertical-align: middle; }
.gnb_item .icons li + li { border-left: 1px dotted #ccc; }
.gnb_item .icons i { display: block; }
.gnb_item .icons a { display: block; }
.gnb_item .icons a:hover img, .gnb_item .icons a:focus img {animation: icons 0.5s infinite alternate; }

@-webkit-keyframes icons {
	0% { position: relative; top: 0; }
  100% { position: relative; top: -0.5rem; }
}

@keyframes icons { 
	0% { position: relative; top: 0; }
  100% { position: relative; top: -0.5rem; } 
}

#quick { position: absolute; top: 50%; left: auto; transform: translateY(-50%); position: fixed; right: 0; z-index: 2; }
#quick .group { position: absolute; top: 50%; left: auto; transform: translateY(-50%); visibility: hidden; overflow: hidden; right: 0; z-index: 0; width: 0; height: 100%; padding-right: 2.5rem; background-color: #1e9ed0; opacity: 0; transition: all 0.2s; }
#quick .group::before { position: absolute; top: auto; left: 50%; transform: translateX(-50%); top: 100%; z-index: -1; width: 192rem; height: 150%; border-radius: 100%; background-color: #3ea6cf; content: ''; }
#quick .item {  position: relative; width: 148rem; max-width: calc(100% - 6rem); height: 100%; margin-left: auto !important; margin-right: auto !important;padding: 3rem 0 0 24rem; color: #fff; white-space: nowrap; }
#quick .item::after { position: absolute; left: 0.7rem; bottom: 7.5rem; width: 19rem; height: 8rem; background: url("/main/img/layout/quick_bg.png") no-repeat center center/cover; content: ''; opacity: 0; }
#quick .item h2 { position: absolute; left: 4rem; opacity: 0; filter: blur(10px); transform: scale(1.5); }
#quick .item h2::after { display: block; width: 0; height: 0.6rem; margin-top: 5rem; border-radius: 0.6rem; background-color: #fff; content: ''; }
#quick .item .list {display: inline-block; width: calc(100% + 4rem); }
#quick .item .list > * { clear: none; float: left; width: calc(25% - 4rem); margin: 0 4rem 0 0; }
#quick .item .list > *:nth-child(2n + 1) { clear: none; }
#quick .item .list > *:nth-child(3n + 1) { clear: none; }
#quick .item .list > *:nth-child(3n + 1) { clear: none; }
#quick .item .list > *:nth-child(4n + 1) { clear: both; }
#quick .item .list li { font-size: 2.2rem; position: relative; left: -4rem; border: 0.4rem solid #74bedc; font-weight: 600; text-align: center; opacity: 0; }
#quick .item .list strong { font-size: 4.8rem; display: block; margin-top: 1.5rem; line-height: 1; transition: all 0.2s; font-family: Titillium Web; }
#quick .item .list img { display: block; transition: all 0.2s; }
#quick .item .list a { display: block; height: 18.5rem; padding-top: 2rem; }
#quick .item .list a:hover, #quick .item .list a:focus, #quick .item .list .active a { background-color: #fff; color: #000; }
#quick .item .list a:hover strong, #quick .item .list a:focus strong, #quick .item .list .active a strong { color: #1e9ed0; }
#quick .item .list a:hover img:first-child, #quick .item .list a:focus img:first-child, #quick .item .list .active a img:first-child { margin-top: -4rem; }
#quick .item .icon { display: block; overflow: hidden; width: 4rem; height: 4rem; margin: 0 auto; line-height: 0; }

#quick .graph .legend { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; font-size: 1.4rem; position: absolute; left: auto; top: auto; width: calc(100% - 24rem) !important; margin-top: 1.5rem; text-align: right; }
#quick .graph .legend span { margin-left: 3rem; }
#quick .graph .legend span::before { display: inline-block; position: relative; top: -0.15rem; width: 1.5rem; height: 1.5rem; margin-right: 1rem; content: ''; vertical-align: middle; }
#quick .graph .legend span.bar1::before { background: url("/main/img/layout/graph1_pt1.gif"); }
#quick .graph .legend span.bar2::before { background: url("/main/img/layout/graph1_pt2.gif"); }
#quick .graph .legend span.bar3::before { background: url("/main/img/layout/graph1_pt3.gif"); }
#quick .graph .legend span.bar4::before { background: url("/main/img/layout/graph1_pt4.gif"); }
#quick .graph .hidden {visibility: hidden;}
#quick .graph.active .hidden {visibility: visible;}
#quick .graph ul {position: absolute; left: auto; top: auto;  display: table; width: calc(100% + 0px); table-layout: fixed; visibility: hidden; width: 0; margin: 4rem 0 0 4rem; padding-top: 12rem; border-bottom: 0.5rem solid #9ed9f0; background: url("/main/img/layout/graph_bg.png") repeat-x center bottom; text-align: center; opacity: 0; }
#quick .graph ul > * { display: table-cell; padding-right: 0px; vertical-align: bottom; }
#quick .graph ul li:first-child::before { position: absolute; left: 0; bottom: 0.5rem; width: 100%; height: 0; padding-right: 100%; background: url("/main/img/layout/graph.png") no-repeat center bottom; background-size: 100% auto; content: ''; }
#quick .graph ul li:first-child::after { position: absolute; left: -4rem; bottom: -2rem; width: 3rem; font-weight: 600; color: #237fa4; white-space: normal; line-height: 310%; }
#quick .graph ul li { position: relative; height: 15.8rem !important; opacity: 0; }
#quick .graph ul span { position: absolute; top: auto; left: 50%; transform: translateX(-50%); font-size: 1.7rem; bottom: -3.5rem; font-weight: 600; color: #000; }
#quick .graph ul .bar { position: relative; top: 1rem; width: 3.5rem; height: 0; margin: 0 auto; background-color: #eb6560; opacity: 0; }
#quick .graph ul .bar::after { position: absolute; top: auto; left: 50%; transform: translateX(-50%); top: -0.7rem; width: 1.4rem; height: 1.4rem; border-radius: 100%; background-color: #fff; content: ''; }
#quick .graph ul .bar strong { position: absolute; top: auto; left: 50%; transform: translateX(-50%); font-size: 3rem; top: -6rem; width: 6rem; height: 6rem; border-radius: 100%; background-color: #fff; color: #eb6560; text-align: center; line-height: 6rem; opacity: 0; transform: translateX(-50%) rotateY(90deg); }
#quick .graph ul .disable .bar { background-color: #74bedc; transition: all 0s 0s !important; }
#quick .graph ul .disable .bar::after { opacity: 0.55; }
#quick .graph ul .disable .bar strong { display: none; }
#quick .graph#graph1 ul { margin-top: 6rem; padding-top: 1rem; background-repeat: repeat; }
#quick .graph#graph1 li { position: relative; left: -1rem; height: 21rem !important; opacity: 0; }
#quick .graph#graph1 li:first-child::after { bottom: -1.5rem; content: '90 80 70 60 50 40 30 20 10 0'; line-height: 150%; }
#quick .graph#graph1 .bar { display: inline-block; top: 0; width: 1.5rem; vertical-align: bottom; clip: rect(23rem, 1.5rem, 0, 0); opacity: 1; }
#quick .graph#graph1 .bar::after { top: -0.35rem; width: 0.7rem; height: 0.7rem; }
#quick .graph#graph1 .bar strong { font-size: 1.6rem; top: -3rem; width: auto; height: auto; background: none; color: #fff; line-height: 1; }
#quick .graph#graph1 .bar.bar1 { background: url("/main/img/layout/graph1_pt1.gif"); }
#quick .graph#graph1 .bar.bar2 { background: url("/main/img/layout/graph1_pt2.gif"); }
#quick .graph#graph1 .bar.bar3 { background: url("/main/img/layout/graph1_pt3.gif"); }
#quick .graph#graph1 .bar.bar4 { background: url("/main/img/layout/graph1_pt4.gif"); }
#quick .graph#graph2 li:first-child::after { content: '150 100 50 0'; }
#quick .graph#graph3 li:first-child::after { content: '30 20 10 0'; }
#quick .graph#graph4 li:first-child::after { bottom: -0.75rem; content: '140 120 100 80 60 40 20 0'; line-height: 140%; }

#quick .control {text-align: left; font-size: 1.5rem; float: left; position: relative; z-index: 1; width: 5rem; height: 45rem; margin-bottom: 2rem; padding: 2rem 1.25rem 0; box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.1); border-radius: 0.5rem 0 0 0.5rem; background: url("/main/img/layout/quick.png") no-repeat center bottom #1a5598; color: #fff; letter-spacing: 0.1rem; text-orientation: mixed; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }
#quick .control > span:first-child { display: inline-block; position: relative; width: 100%; margin-bottom: 3rem; padding-bottom: 2.5rem; color: #fff; vertical-align: top;  -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }
#quick .control > span:first-child::before { position: absolute; left: 0.5rem; bottom: 0; width: calc(100% - 1rem); height: 0.5rem; border-bottom: 1px solid #fff; border-right: 1px solid #ddd; content: ''; opacity: 0.5; transform: skewX(45deg); }
#quick .control strong { display: inline-block; position: relative; right: -0.1rem; color: #fff; vertical-align: top;  -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }
#quick .control em { position: relative; color: #fff;}
#quick .control.close { display: none; }
#quick .control.close::after { display: inline-block; position: relative; margin-top: 1px; font-family: "xeicon";  content: '\e921';  }
#quick .sns { clear: both; float: right; position: relative; z-index: 1; width: 4rem; }
#quick .sns li + li { margin-top: 1px; }
#quick .sns a { font-size: 2rem; display: block; overflow: hidden; position: relative; height: 4rem; background-color: #3f444d; color: #fff; text-align: center; line-height: 4rem; }
#quick .sns a::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; }
#quick .sns a::after { position: absolute; left: 5rem; top: -7.25rem; width: 0.5rem; height: 20rem; margin-left: -8rem; background-color: #fff; content: ''; opacity: 0.75; transform: rotate(45deg); filter: blur(5px); }
#quick .sns a.facebook::before { content: ""; }
#quick .sns a.youtube::before { content: ""; }
#quick .sns a.instagram::before { content: ""; }
#quick .sns a.blog::before { font-family: "Noto Sans KR"; font-weight: 900; content: 'b'; }
#quick .sns a:hover::after, #quick .sns a:focus::after { margin-left: 0; transition: all 0.5s; }
#quick.active .group { visibility: visible; opacity: 1; transition: all 0.5s; }
#quick.active .group::before { top: 50%; transition: all 0.5s 0.3s; }
#quick.active .item::after { opacity: 1; transition: all 0.2s 0.3s; animation: updown 0.5s 0.5s infinite alternate; }

#quick.active .item h2 { opacity: 1; filter: blur(0); transform: scale(1);transition: all 0.5s 0.5s; }
#quick.active .item h2::after { width: 6rem; transition: all 0.3s 0.8s; }
#quick.active .item .list li { left: 0; opacity: 1; transition: all 0.3s; }
#quick.active .item .list li:nth-child(1) {transition-delay: 0.8s; }
#quick.active .item .list li:nth-child(2) {transition-delay: 0.9s; }
#quick.active .item .list li:nth-child(3) {transition-delay: 1s; }
#quick.active .item .list li:nth-child(4) {transition-delay: 1.1s; }
#quick.active .item .list li:nth-child(5) {transition-delay: 1.2s; }
#quick.active .graph.active .legend { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; }

#quick.active .graph.active ul { visibility: visible; width: calc(100% - 28rem); margin-top: 3rem; opacity: 1; transition: margin 0.5s, opacity 0.5s; }
#quick.active .graph.active ul li { opacity: 1; }
#quick.active .graph.active ul li:nth-child(1) strong {transition-delay: 0.6s; }
#quick.active .graph.active ul li:nth-child(2) strong {transition-delay: 0.7s; }
#quick.active .graph.active ul li:nth-child(3) strong {transition-delay: 0.8s; }
#quick.active .graph.active ul li:nth-child(4) strong {transition-delay: 0.9s; }
#quick.active .graph.active ul li:nth-child(5) strong {transition-delay: 1s; }
#quick.active .graph.active ul li:nth-child(6) strong {transition-delay: 1.1s; }
#quick.active .graph.active ul li:nth-child(7) strong {transition-delay: 1.2s; }
#quick.active .graph.active ul li:nth-child(8) strong {transition-delay: 1.3s; }
#quick.active .graph.active ul li:nth-child(9) strong {transition-delay: 1.4s; }
#quick.active .graph.active ul .bar { top: 0; min-height: 1rem; opacity: 1;  transition: all 0.3s; }
#quick.active .graph.active ul .bar strong { top: -8rem; opacity: 1; transform: translateX(-50%) rotateY(0); transition: all 0.2s; }

#quick.active .graph.active#graph1 ul { margin-top: 5rem; }
#quick.active .graph.active#graph1 li { left: 0; opacity: 1; transition: all 0.2s; }
#quick.active .graph.active#graph1 li:nth-child(1) {transition-delay: 0.6s; }
#quick.active .graph.active#graph1 li:nth-child(2) {transition-delay: 0.7s; }
#quick.active .graph.active#graph1 li:nth-child(3) {transition-delay: 0.8s; }
#quick.active .graph.active#graph1 li:nth-child(4) {transition-delay: 0.9s; }
#quick.active .graph.active#graph1 li:nth-child(5) {transition-delay: 1s; }
#quick.active .graph.active#graph1 li:nth-child(6) {transition-delay: 1.1s; }
#quick.active .graph.active#graph1 li:nth-child(7) {transition-delay: 1.2s; }
#quick.active .graph.active#graph1 li:nth-child(8) {transition-delay: 1.3s; }
#quick.active .graph.active#graph1 li:nth-child(9) {transition-delay: 1.4s; }

#quick.active .graph.active#graph2 li:nth-child(1) .bar {transition-delay: 0.3s; }
#quick.active .graph.active#graph2 li:nth-child(2) .bar {transition-delay: 0.4s; }
#quick.active .graph.active#graph2 li:nth-child(3) .bar {transition-delay: 0.5s; }
#quick.active .graph.active#graph2 li:nth-child(4) .bar {transition-delay: 0.6s; }
#quick.active .graph.active#graph2 li:nth-child(5) .bar {transition-delay: 0.7s; }
#quick.active .graph.active#graph2 li:nth-child(6) .bar {transition-delay: 0.8s; }
#quick.active .graph.active#graph2 li:nth-child(7) .bar {transition-delay: 0.9s; }
#quick.active .graph.active#graph2 li:nth-child(8) .bar {transition-delay: 1s; }
#quick.active .graph.active#graph2 li:nth-child(9) .bar {transition-delay: 1.1s; }

#quick.active .graph.active#graph3 li:nth-child(1) .bar {transition-delay: 0.3s; }
#quick.active .graph.active#graph3 li:nth-child(2) .bar {transition-delay: 0.4s; }
#quick.active .graph.active#graph3 li:nth-child(3) .bar {transition-delay: 0.5s; }
#quick.active .graph.active#graph3 li:nth-child(4) .bar {transition-delay: 0.6s; }
#quick.active .graph.active#graph3 li:nth-child(5) .bar {transition-delay: 0.7s; }
#quick.active .graph.active#graph3 li:nth-child(6) .bar {transition-delay: 0.8s; }
#quick.active .graph.active#graph3 li:nth-child(7) .bar {transition-delay: 0.9s; }
#quick.active .graph.active#graph3 li:nth-child(8) .bar {transition-delay: 1s; }
#quick.active .graph.active#graph3 li:nth-child(9) .bar {transition-delay: 1.1s; }

#quick.active .graph.active#graph4 li:nth-child(1) .bar {transition-delay: 0.3s; }
#quick.active .graph.active#graph4 li:nth-child(2) .bar {transition-delay: 0.4s; }
#quick.active .graph.active#graph4 li:nth-child(3) .bar {transition-delay: 0.5s; }
#quick.active .graph.active#graph4 li:nth-child(4) .bar {transition-delay: 0.6s; }
#quick.active .graph.active#graph4 li:nth-child(5) .bar {transition-delay: 0.7s; }
#quick.active .graph.active#graph4 li:nth-child(6) .bar {transition-delay: 0.8s; }
#quick.active .graph.active#graph4 li:nth-child(7) .bar {transition-delay: 0.9s; }
#quick.active .graph.active#graph4 li:nth-child(8) .bar {transition-delay: 1s; }
#quick.active .graph.active#graph4 li:nth-child(9) .bar {transition-delay: 1.1s; }

#quick.active .control.close { display: block; }
#quick.active .control.open { display: none; }

@-webkit-keyframes updown {
	0% { margin-bottom: 0;}
  100% { margin-bottom: 1rem; } 
 }

@keyframes updown { 
	0% { margin-bottom: 0; }
  100% { margin-bottom: 1rem; } 
}

#footer { width: 140rem; max-width: calc(100% - 6rem); margin-left: auto !important; margin-right: auto !important; position: relative; }

#footer .related .group { position: absolute; right: 0; bottom: 5.5rem; z-index: 1; width: 24rem; color: rgba(255, 255, 255, 0.7); }

#footer .related .group a { display: block; padding-left: 1.5rem; line-height: 4rem; }

#footer .related .group .list { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; position: absolute; left: -1px; bottom: 0; z-index: 0; width: calc(100% + 2px) !important; border: 1px solid #4e5156; background-color: #2f333a; }

#footer .related .group .label { position: relative; z-index: 1; border: 1px solid #4e5156; background-color: #2f333a; }

#footer .related .group .label::after { position: absolute; top: auto; left: auto; right: auto; font-family: "xeicon"; right: 1.5rem; content: ''; transition: all 0.2s; }

#footer .related .group.active .label::after {transform: rotate(180deg); }

#footer .related .group.active .list { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; bottom: calc(100% + 2px); padding: 1rem 0; transition: all 0.2s; }

#footer .mark { position: absolute; bottom: 5.5rem; right: 27rem; z-index: 1; }

.footbanner { height: 9rem; border-top: 1px solid #cccfd1; }

.footbanner li { padding-top: 2.5rem; }

.footbanner a { display: inline-block; vertical-align: middle; }

.footbanner img { width: 15rem; }

.footbanner .bx-wrapper { width: 140rem; max-width: calc(100% - 6rem); margin-left: auto !important; margin-right: auto !important; max-width: calc(100% - 6rem) !important; min-height: 100%; position: relative; padding: 0 7rem; }

.footbanner .bx-controls-direction a { position: absolute; top: 50%; left: auto; transform: translateY(-50%); font-size: 1.4rem; overflow: hidden; right: 0; z-index: 0; width: 3rem; height: 3rem; margin: 0; border-radius: 100%; border: 2px solid #a0a0a0; background: none; color: #a0a0a0; text-indent: 0; text-align: center; line-height: 2.6rem; transition: all 0.2s; }

.footbanner .bx-controls-direction a::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; content: ''; }

.footbanner .bx-controls-direction a.bx-prev { right: auto; left: 0; }

.footbanner .bx-controls-direction a.bx-prev::before { transform: rotateY(180deg); }

.footbanner .bx-controls-direction a:hover, .footbanner .bx-controls-direction a:focus { background-color: #a0a0a0; color: #fff; }

#fnb { position: relative; width: calc(100% + 4rem); margin: 0 -2rem;  font-size: 1.5rem; z-index: 0;}

#fnb::before { position: absolute; left: 50%; top: 0; z-index: -1; width: 1000%; height: 100%; margin-left: -500%; content: ''; background-color: #3b4048; }

#fnb li { display: inline; }

#fnb a { display: inline-block; padding: 1rem 2rem; vertical-align: middle; color: #fff; opacity: 0.5; }
#fnb a.point01 {opacity: 1; font-weight: 500;}

#siteinfo { position: relative; z-index: 0; padding: 5.5rem 0; color: #fff; line-height: 1.2; }

#siteinfo::before { position: absolute; left: 50%; top: 0; z-index: -1; width: 1000%; height: 100%; margin-left: -500%; content: ''; background-color: #2c3036; }

#siteinfo span { display: inline-block; vertical-align: top; }

#siteinfo address { display: inline-block; vertical-align: top; }

#siteinfo address::after { content: ' / '; }

#siteinfo .copyright { margin-top: 0.5rem; color: #ddd;  font-size: 1.5rem;}