@charset "utf-8";


.inner{display:block;position:relative;margin:0 auto;width:1320px;box-sizing:border-box}
.inner:after{display:block;content:'';clear:both}
.alignLeft{text-align:left!important}
.alignRight{text-align:right!important}
.alignCenter{text-align:center}
.fl-l{float:left!important}
.fl-r{float:right!important}
#overlay{z-index:10}
.mobileShow{display:none}img{max-width:100%}
#wrap{min-width:1320px}


#skipLink a{display:block;position:fixed;top:-999px;padding:8px 0;width:150px;text-align:center;color:#fff;background:#000;z-index:999999}
#skipLink a:active,#skipLink a:focus,#skipLink a:hover{left:0;top:0}
#skipLink dt{position:absolute;height:0;width:0;left:-9999px;overflow:hidden;font-size:0;line-height:0}





@media screen and (-webkit-min-device-pixel-ratio:1.5) {
    body, input, button, select, textarea, sub, h1, h2, h3, h4 {font-family:arial, sans-serif;}
    select {padding-right:20px; background:#fff url('/images/common/ico_arrow.png') right 7px top 50% no-repeat; background-size:8px auto; -webkit-appearance:none; border-radius:0;}
	input[type="text"], input[type="password"], input[type="submit"], input[type="tel"], input[type="email"], textarea {-webkit-appearance:none; border-radius:0;}
    input[type="radio"] {border:1px solid #b9b9b9;}
    input[type="checkbox"] {border:1px solid #b9b9b9;}
	input[type="file"] {width:100%;}
}
@media screen and (max-width:1024px) {
	input, select, textarea {font-size:14px;}
}
@media screen and (max-width:620px) {
	body, input, button, select, textarea, sub {font-size:13px;}
}

/* ￿￿/
#wrap {min-width:320px}

/* header */
#header {position:fixed; top:0; left:0; width:100%; height:82px; background-color:rgba(0, 0, 0, 0.65); border-bottom:1px solid #333; z-index:1000;}
.header_wrap { }
#header h1 {position:absolute; top:14px; left:30px; z-index:11;}
#header h1 img {height:45px;}

#header h1 .p_logo {display:block;}
#header h1 .m_logo {display:none;}


#header .head_util {position:absolute; top:0; right:118px; z-index:12;}
#header .head_util .tit {display:none;}
#header .head_util > ul {padding:32px 0px 0 0; font-size:0;}
#header .head_util > ul > li {position:relative; display:inline-block; font-size:14px; padding:0 10px; font-weight:500; color:#666}
#header .head_util > ul > li:before {content:''; position:absolute; top:50%; right:0; display:block; width:1px; height:10px; margin-top:-6px; background:#d0d0d0;}
#header .head_util > ul > li:last-child:before {display:none}
#header .head_util > ul > li a:hover {color:#222; text-decoration:none; }
#header .head_util > ul > li:last-child a {position:relative; padding-left:20px;}
#header .head_util > ul > li:last-child a:before {content:''; position:absolute; top:1px; left:0; display:block; width:15px; height:15px; background:url('../images/common/ico_gb.png') 0 0 no-repeat; background-size:15px;}
#header .head_util > ul > li:last-child a:hover:before {background-image:url('../images/common/ico_gb_color.png') }

#header .btn_bar {position:absolute; display:block; top:0; right:0; z-index:20;}
#header .btn_bar > button {display:block; width:82px; height:82px;}
#header .btn_bar > button > span {position:relative; display:block; margin: 0 auto; width:20px; height:2px; background:#fff; text-indent:-9999px;}
#header .btn_bar > button > span:after, #header .btn_bar > button > span:before {position:absolute; display:block; right:0; width:20px; height:2px; background:#fff;}
#header .btn_bar > button > span:after {top:-7px; transition: all 0.3s ease; content:''; }
#header .btn_bar > button > span:before {top:7px; transition: all 0.2s ease; content:'';} 
#header .btn_bar > button:hover > span:after, #header .btn_bar > button:hover > span:before {width:100%;}	

#header .btn_family {position:absolute; top:0; right:80px; z-index:20; padding-top:29px;}
#header .btn_family button.tit {position:relative; width:100%; padding:0 60px 0 16px; color:#fff; text-align:left; font-weight:500; font-size:14px}
#header .btn_family button.tit:before {content:''; position:absolute; top:50%; left:1px; display:block; width:1px; height:10px; margin-top:-6px; background:#d0d0d0;}
#header .btn_family button:after {display:block; position:absolute; top:7px; right:15px; width:10px; height:6px; background:url('../images/common/btn_relation.png') 0 0 no-repeat; background-size:20px; content:'';}
#header .btn_family.on button:after {background-position:-10px 0px}
#header .btn_family .cont {display:none; position:absolute; z-index:100; top:57px; width:100%;}
#header .btn_family .cont ul {color:#fff; /* border-top:2px solid #0053A5 */ }
#header .btn_family .cont ul li {background:#333; border-bottom:1px solid #777; font-size:13px}
#header .btn_family .cont ul li img{width:20px; margin-right:10px; }
#header .btn_family .cont ul li:last-child {border-bottom:0 none}
#header .btn_family .cont ul li a {display:block; color:#fff;padding:5px 5px 5px 10px; transition:background 0.3s ease-out; text-align:left;}
#header .btn_family .cont ul li a.ls {letter-spacing:-1px;}
#header .btn_family .cont ul li a:hover, #header .btn_family .cont ul li a:focus {background:#000;}

#header .btn_nav, #header .nav_close {display:none; }

/* gnb */
#gnb {position:relative; z-index:10;}
#gnb > ul {text-align:right; margin-right:100px; font-size:0;}
#gnb > ul > li {position:relative; display:inline-block; }
#gnb > ul > li > a {color:#fff; display:block; padding:0 75px; height:82px; font-size:21px; font-weight:400; text-decoration:none; line-height:82px; letter-spacing:-1px; }
#gnb > ul > li.long > a {padding:0 80px; }
#gnb > ul > li > a:hover, #gnb > ul > li > a:focus {color:#FFCC00; transition:all 0.2s ease-out;}
#gnb > ul > li > a:after {display:block; position:absolute; left:50%; bottom:0; width:0; height:2px; content:''; transition:all 0.2s ease-out;}
#gnb > ul > li > a:hover:after, #gnb > ul > li:hover a:after {width:100%; margin-left:-50%; background:#2B9942;}
#gnb > ul > li.on > a:before {display:block} 
/* #gnb > ul > li.on > a {color:#114c9f;} */

#gnb > ul > li > ul {display:none; position:absolute; z-index:120; top:82px; left:0; width:100%; height:319px; padding-top:15px ; border-right:1px solid #e5e5e5;}
#gnb > ul > li:first-child > ul {border-left:1px solid #e5e5e5;}
#gnb.open > ul > li > ul {display:block;}
#gnb span.bg {display:none; position:absolute; z-index:110; top:82px; left:0; width:100%; height:320px; border-bottom:1px solid #dfdee6; background-color:rgba(255, 255, 255, 0.95); }
#gnb.open span.bg {display:block;}
#gnb.open > ul > li:first-child:before {display:block;}
#gnb > ul > li > ul > li > a {display:block; position:relative; padding:7px 10px; color:#666; font-size:16px; text-align:center; line-height:19px; text-decoration:none; letter-spacing:-0.3px;}
#gnb > ul > li > ul > li > a:hover, #gnb > ul > li > ul > li > a:focus {background:#2B9942; color:#fff;}
#gnb > ul > li ul.depth3 {display:none;}

@media screen and (max-width:1700px) {	
	/* header */
	#header h1 {left:20px;}

	/* gnb */
	#gnb > ul > li > a {padding:0 55px;font-size: 19px;}

	#gnb > ul > li.long > a {padding:0 35px;}
	#gnb > ul > li > ul > li > a {padding-left:5px; padding-right:5px; font-size:14px; letter-spacing:-1.5px;}
}
@media screen and (max-width:1500px) {	
	/* gnb */
	#gnb > ul > li > a {padding:0 40px; font-size:16px;}
	#gnb span.bg { height: 306px;}
	#gnb > ul > li > ul {height: 304px;}


}
@media screen and (max-width:1300px) {	
	/* ￿￿/

	/* header */
	.inner{width:100%;}

	#header {height:80px;}
	#header h1 {position:static; padding-top:15px;  }

	#header .head_util {display:table; width:290px; right:-290px; left:auto; height:80px; margin-left:0; background:#fff; border-bottom:1px solid #e7e7e7; transition: right 0.3s ease; z-index:110; opacity:0;}
	#header .head_util:after {content:''; display:block; clear:both;}
	#header .head_util > ul {display:table-cell; padding:0; vertical-align:middle; text-align:right; padding-right:5px;}
	
	#header .head_util > ul > li {padding:0 6px;}
	#header .head_util > ul > li a {display:inline-block; font-size:14px;}
	#header .head_util .tit {display:table-cell; text-align:left; vertical-align:middle; padding-left:18px;}
	#header .head_util .tit img {height:40px;}
	#header .head_util > ul > li:last-child a {padding:3px 13px; border:1px solid #cecece; color:#777; border-radius:30px}
	#header .head_util > ul > li:last-child a:before {display:none}
	#header .head_util > ul > li:last-child a span {display:none}

	#header .btn_family {left:15px; right:auto; padding-top:27px;}
	#header .btn_family button.tit:before {display:none}
	#header .btn_family .cont {top:51px}

	#header .btn_bar > button {width:79px; height:79px;}
	#header .btn_sitemap {display:none}
	#header .btn_nav, #header .nav_close {display:block}
	#header .nav_close {z-index:110; position:fixed; top:0; right:-40px; display:block; transition: right 0.3s ease;}
	#header .nav_close > button {width:40px; height:40px; background:#111 url('../images/common/ico_cancel.png') no-repeat 50%/18px; text-indent:-9999px; }
	
	#header.open .head_util {right:0; opacity:1;}
	#header.open .nav_close {right:290px;}
	#header.open .mask {position: fixed; z-index:100; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.5;}
	#header.open #gnb {right:0; overflow-y:auto;}	




	/* gnb */
	#gnb {position:fixed; display:block; top:0; right:-290px; padding-top:80px; width:290px; height:100%; background:#fff; z-index:110; transition: right 0.3s ease;}
	#gnb > ul {text-align:left;}
	#gnb > ul > li {display:block; width:100%; border-bottom:1px solid #e7e7e7}
	#gnb > ul > li:after {display:none}
	#gnb > ul > li > a {padding:0 18px; height:70px; line-height:70px; font-size:21px; color:#000; text-decoration:none; background:url('../images/common/arr_menu.png') 92.4% 50% no-repeat; background-size:11px; transition:background 0.2s ease; text-align:left;}
	#gnb > ul > li.long > a {padding:0 20px 0 18px;}
	#gnb > ul > li > a:hover {background-color:#f6f6f6;}
	#gnb > ul > li > a:hover:before {display:none}
	#gnb > ul > li > ul {position:static; padding:0; height:auto; max-height:0; min-height:auto; border:0; display:block !important; overflow:hidden; transition:max-height 0.8s; background:#f1f1f1}	
	#gnb > ul > li > ul > li > a {position:relative; display:block; padding:0 26px 0 31px; height:46px; line-height:46px; border-bottom:1px solid #e5e5e5; color:#666; font-size:16px; text-align:left;}
	#gnb > ul > li > ul > li:last-child > a {border-bottom:0 none}
	#gnb > ul > li > ul > li > a:before {content:''; position:absolute; top:50%; left:18px; display:block; width:6px; height:1px; background:#b3b3b3}
	#gnb > ul > li > ul > li > a:hover, #gnb > ul > li > ul > li.on > a {background:#e8edf3; color:#2B9942;} 
	#gnb > ul > li > ul > li.on > a {font-weight:bold; text-decoration:underline;} 
    #gnb > ul > li.on > ul {max-height:2000px;}
	#gnb > ul > li.on > a {background:#2B9942 url('../images/common/arr_menu_on.png') 92.4% 50% no-repeat;  background-size:11px; color:#fff}
	#gnb > ul > li > a:after, #gnb.open span.bg {display:none;}
	#gnb > ul > li.on > a:before {display:none;}
	#gnb > ul {margin-right:0; }
}
@media screen and (max-width:620px) {	
	/* ￿￿/

	/* header */
	#header {height:65px;}
	#header h1 {padding:10px 0 0 15px;}
	#header h1 img {height:35px;}

	#header h1 .p_logo {display:none;}
	#header h1 .m_logo {display:block;}




	#header .btn_family {left:10px; padding-top:23px;}
	#header .btn_family button.tit {padding:0 38px 0 7px; font-size:12px; font-weight:bold}
	#header .btn_family button:after {top:5px; right:22px}
	#header .btn_family .cont {top:47px}
	#header .btn_family .cont ul li a {font-size:12px}
	#header .btn_family .cont ul li a.ls {letter-spacing:-1.3px;}
	
	#header .btn_bar > button {width:64px; height:64px; }
	#header .btn_bar > button > span {transform:scale(0.9)}

	#header .head_util {height:65px;}
	#header .head_util .tit img {height:30px;}
	#header .head_util > ul > li a {font-size:11px}	

	/* gnb */
	#gnb {padding-top:65px;}
		#gnb > ul {margin-right:0; }

	#gnb > ul > li > a {height:60px; line-height:60px; font-size:17px; letter-spacing:-0.3px;}
	#gnb > ul > li > ul > li > a {height:42px; line-height:42px; font-size:14px;}
	#gnb > ul > li > ul > li > a:before {top:49%}

}

/* ￿￿Ʈ￿￿*/
.sitemap {display:none; z-index:1100; position:fixed; top:0; left:0; width:100%; background:#fff;}
.sitemap.open {display:block}
.sitemap .btn_close {position:absolute; top:50px; right:50px; text-indent:-9999px; width:70px; height:70px; background:url('../images/common/btn_close.png') 0 0 no-repeat;}
.sitemap .cont {overflow:hidden;}
.sitemap .cont > li {overflow:hidden; float:left; display:table; width:20%; height:100vh; padding:0 40px; background:#fff; border-right:1px solid #e0e0e0; transition:background 0.3s ease-out;}
/*.sitemap .cont > li:first-child {width:15.28%}*/
.sitemap .cont > li a {transition:all 0.3s ease-out;}
.sitemap .cont > li .tx {display:table-cell; vertical-align:middle}
.sitemap .cont > li .tx strong {display:block; margin-bottom:20px; padding-bottom:20px; font-size:33px; color:#222; border-bottom:2px solid #222; }
.sitemap .cont > li .tx ol {height:530px;}
.sitemap .cont > li .tx ol > li {letter-spacing:-0.8px; color:#444; font-size:18px; line-height:40px;}
.sitemap .cont > li .tx ol > li ul {position:relative; margin:5px 0 15px 2px; padding-left:13px; border-left:1px solid #afafaf}
.sitemap .cont > li .tx ol > li ul li {font-size:15px; line-height:26px; color:#777}
.sitemap .cont > li:hover {background:#2B9942;}
.sitemap .cont > li:hover:before {width:100%;}
.sitemap .cont > li:hover a {color:#fff; text-decoration:none}
.sitemap .cont > li:hover strong {border-color:#fff}
.sitemap .cont > li .tx ol > li a:hover, .sitemap .cont > li .tx ol > li a:focus {padding-left:12px; } 
.sitemap .cont > li:hover .tx ol > li ul {border-color:#fff}
.sitemap .cont > li .tx ol > li ul li a:hover {color:#fff; text-decoration:underline;}
@media screen and (max-width:1700px) {	
	/* ￿￿Ʈ￿￿*/ 
	.sitemap .btn_close {top:15px; right:15px}
	.sitemap .cont > li {padding:0 25px}
	.sitemap .cont > li .tx strong {margin-bottom:10px; padding-bottom:10px; font-size:28px}
	.sitemap .cont > li .tx ol > li {font-size:16px; line-height:32px;}
}
@media screen and (max-width:1400px) {	
	/* ￿￿Ʈ￿￿*/ 
	.sitemap {padding:100px 60px; height:100vh; }
	.sitemap .btn_close {top:20px; right:45px}
	.sitemap .cont {overflow-y:scroll; overflow-x:hidden; height:80vh; }
	.sitemap .cont > li {float:none; display:block; width:100%; height:auto; margin-bottom:20px; padding:0; border:0 none}
	.sitemap .cont > li:first-child {width:100%;}
	.sitemap .cont > li .tx {display:block}
	.sitemap .cont > li .tx ol {height:auto;}
	.sitemap .cont > li:hover {background:none;}
	.sitemap .cont > li:hover a {color:#222}
	.sitemap .cont > li:hover strong {border-color:#222}
	.sitemap .cont > li a:hover {color:#0053a5; font-weight:500}
	.sitemap .cont > li:hover .tx ol > li ul {border-color:#999}
	.sitemap .cont > li .tx ol > li ul li a:hover {color:#222;}
}
@media screen and (max-width:800px) {	
	#container {min-height:500px}

	/* ￿￿Ʈ￿￿*/ 
	.sitemap {padding:50px 20px;}
	.sitemap .btn_close {top:10px; right:15px; width:40px; height:40px; background-size:40px; }
	.sitemap .cont > li .tx strong {margin-bottom:8px; padding-bottom:8px; font-size:22px}
	.sitemap .cont > li .tx ol > li {font-size:15px; line-height:25px;}
}


.lnb_wrap {z-index:100; position:relative; width:100%; margin-top:-80px; background:#2B9942;}
.lnb_wrap.fixinner {position:fixed; top:82px; z-index:100; background:#fff;}
#lnb {position:relative; max-width:1320px; height:60px; margin:0 auto; padding-left:60px; text-align:left}
#lnb .home {position:absolute; top:0; left:0;}
#lnb .home a {display:block; width:60px; height:60px; text-align:center; line-height:60px; font-size:20px; color:#454545; border-right:1px solid #47586b; border-left:1px solid #47586b; background:url('/images/ico_lochome_w.png') 50% 50% no-repeat; background-size:17px; transition:all 0.3s ease-out;}
#lnb .home a:hover, #lnb .home a:focus {background-color:#5c676d; border-color:#5c676d}
#lnb > ul {font-size:17px; color:#5d5d5d;}
#lnb > ul:after {clear:both; content:''; display:block}
#lnb > ul > li {position:relative; float:left; display:block;}
#lnb > ul > li > a {position:relative; display:block; min-width:190px; height:60px; padding:0 45px 0 18px; line-height:60px; font-size:15.5px; transition:background 0.3s ease; color:#fff;}
#lnb > ul > li > a:after {position:absolute; top:47%; right:20px; display:block; width:0; height:0; border-bottom:0; border-top:4px solid #fff; border-left:4px solid transparent; border-right:4px solid transparent; content:''}
#lnb > ul > li > a:before {content:''; position:absolute; top:50%; right:0; display:block; width:1px; height:15px; margin-top:-8px; background:#47586b}
#lnb > ul > li > a:hover, #lnb > ul > li.on > a {text-decoration:none;}
#lnb > ul > li.on a:after {border-top:0 none; border-bottom:4px solid #fff;}
#lnb > ul > li > ul {display:none; position:absolute; z-index:100; top:60px; left:0; width:100%; background:#fff; border:1px solid #e8e8eb; border-top:0 none}
#lnb > ul > li.on ul {display:block}
#lnb > ul > li > ul > li > a {display:block; padding:0 20px; border-bottom:1px solid #e8e8eb; font-size:15px; line-height:50px; color:#666; font-weight:normal; text-decoration:none; word-break:break-all}
#lnb > ul > li > ul > li > a:hover {background:#f6f6f6; color:#0053a5; font-weight:500; transition:all 0.2s ease-out;}
#lnb > ul > li > ul > li:last-child > a {border-bottom:0 none}
#lnb > ul > li > ul > li > a.long {padding:13px 20px; line-height:20px;}
#lnb .etc {position:absolute; top:0; right:0; }
#lnb .etc:after {content:''; display:block; clear:both;}
#lnb .etc > li {position:relative; float:left;}
#lnb .etc > li button {position:relative; width:60px; height:60px; line-height:60px; color:#fff; border-left:1px solid #47586b; transition:background 0.3s ease-out;}
#lnb .etc > li button:hover {background:#778288 ;}
#lnb .etc > li.print button {font-size:22px; }
#lnb .etc > li.sns button {font-size:22px; border-right:1px solid #47586b}
#lnb .etc > li.sns ul {display:none; position:absolute; right:0; width:110px; padding:4px 0; border:1px solid #eaeae9; border-top:0 none; text-align:center; background:#fff;}
#lnb .etc > li.sns ul.on {display:block}
#lnb .etc > li.sns ul li a {display:block; padding:8px 0; border-bottom:1px solid #eaeae9; transition:all 0.3s ease-out;}
#lnb .etc > li.sns ul li:last-child a {border-bottom:0 none}
#lnb .etc > li.sns ul li a:hover {background:#efefef}

@media screen and (max-width:1300px) {	

	#lnb .etc > li.print {display:none}
}

@media screen and (max-width:800px) {	

	.lnb_wrap {margin-top:-52px;}
	#lnb {height:52px; padding-left:54px;}
	#lnb .home a {width:52px; height:52px;}
	#lnb > ul > li > a {position:relative; min-width:auto; height:52px; padding-right:0; font-size:14.5px; border-right:0 none; line-height:52px;}
	#lnb > ul > li > a:before {width:auto; margin-top:auto; background:none;}
	#lnb > ul > li:first-child a:before {position:absolute; top:3px; right:-16px; height:48px; line-height:48px; color:#fff; content:'>'}
	#lnb > ul > li:last-child > a {padding-left:36px; background:none} 
	#lnb > ul > li:last-child > a:before {display:none}
	#lnb > ul > li > a:after {display:none}
	#lnb > ul > li.on > ul {display:none}

	#lnb .etc > li button {width:52px; height:52px; line-height:52px; }
	#lnb .etc > li.sns button {border-right:0 none}
	#lnb .etc > li.sns ul {width:104px;}
}
@media screen and (max-width:620px) {	
	
	.lnb_wrap {margin-top:-43px;}
	#lnb {height:43px; padding-left:43px;}
	#lnb .home a {width:43px; height:43px; line-height:43px; font-size:16px;}
	#lnb > ul > li > a {height:43px; padding-left:8px; line-height:43px;}
	#lnb > ul > li:first-child a:before {top:0px; right:-13px; height:43px; line-height:43px; content:'>'}
	#lnb > ul > li:last-child > a {padding-left:20px;}

	#lnb .etc > li button {width:43px; height:43px; line-height:43px}
	#lnb .etc > li.sns button {font-size:20px}
	#lnb .etc > li.sns button i {position:relative; top:1px}
	#lnb .etc > li.sns ul {width:86px;}
	#lnb .etc > li.sns ul li a img {width:28px}
}


@media screen and (max-width:480px) {	
	#lnb > ul > li > a {font-size:13px}
}


/* quick_area */
.quick_area {z-index:101; position:fixed; bottom:70px; right:55px; color:#fff; font-size:13px; text-align:right}
.quick_area .list .btn, .quick_area .top {z-index:10; position:relative; width:48px; height:48px; border-radius:50%; background:#0c52b7; }
.quick_area .list .btn {margin-bottom:10px; }
.quick_area .list .btn:before, .quick_area .list .btn:after {content:''; display:block; margin: 0 auto; width:18px; height:2px; background:#fff; transition:transform 0.3s ease-out;}
.quick_area .list .btn:before {transform: translateY(2px) rotate(90deg);}
.quick_area .list ul {display:none; position:relative; right:0;}
.quick_area .list ul li {margin-bottom:10px;}
.quick_area .list ul li a {position:relative; display:inline-block; width:48px; height:48px; line-height:48px; padding:0; text-align:right; background:#0c52b7; border-radius:48px; transition:all 0.2s ease-out;}
.quick_area .list ul li a:after {content:''; position:absolute; top:0; right:0; width:48px; height:48px; background:url('../images/common/ico_mainquick1.png'); background-size:23px; background-position:50% 50%; background-repeat:no-repeat}
.quick_area .list ul li.visit a:after {background-image:url('../images/common/ico_mainquick2.png')}
.quick_area .list ul li.bro a:after {background-image:url('../images/common/ico_mainquick3.png')}
.quick_area .list ul li a span {position:absolute; right:48px; opacity:0; font-size:0; transition:opacity 0.3s ease-out;}
.quick_area .list ul li a:hover, .quick_area .list ul li a:focus {width:135px; padding-right:50px; text-decoration:none;}
.quick_area .list ul li a:hover span, .quick_area .list ul li a:focus span {opacity:1; font-size:14px; }

.quick_area.on .list .btn {background:#22252f;}
.quick_area.on .list .btn:before {transform: translateY(2px) rotate(45deg);}
.quick_area.on .list .btn:after {transform: translateY(0px) rotate(135deg);}

.quick_area .top {opacity:0; display:inline-block; margin-bottom:-45px; line-height:48px; background:#22252f; text-align:center; font-size:20px; color:#fff; transition:all 0.3s ease-out;}
.quick_area.TopOpen .top {opacity:1; margin-bottom:0px;} 


@media screen and (max-width:1300px) {
	.quick_area {right:15px; bottom:15px;}
	.quick_area .list .btn, .quick_area .top {width:32px; height:32px;}
	.quick_area .list .btn {margin-bottom:5px}
	.quick_area .list .btn:before, .quick_area .list .btn:after {width:12px}	
	.quick_area .list ul li {margin-bottom:5px}
	.quick_area .list ul li a {width:32px; height:32px; line-height:32px; border-radius:32px}
	.quick_area .list ul li a:after {width:32px; height:32px; border-radius:32px; background-size:18px}
	.quick_area .list ul li a:hover {width:100px; padding-right:32px; }
	.quick_area .list ul li a span {right:33px;}
	.quick_area .list ul li a:hover span, .quick_area .list ul li a:focus span {font-size:13px; }
		
	.quick_area .top {padding-top:2px; line-height:32px; font-size:17px}	
}