@charset "utf-8";

/* CSS Document */
* { margin:0; padding:0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
html, body { width:100%; height:100%; font-size:1em; line-height:1.4;}
body { font-family:"Nanum Gothic", "Malgun Gothic", "dotum", "돋움", "gulim", "굴림", "sans-serif"; color:#333; letter-spacing:-0.08em; }
body, div, dl, dt, dd, th, td, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, p, blockquote, button, input, textarea {margin:0; padding:0;}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display:block; margin:0; padding:0;}
hr, table caption {display:none;}
legend {position:absolute; width:0; height:0; overflow:hidden; visibility:hidden; font-size:0; line-height:0;}
table {width:100%; border-collapse:collapse; border-spacing:0; table-layout:fixed;}
img, fieldset, button, input {border:0; vertical-align:middle;}
ul, ol, li {list-style:none;}
em, address {font-style:normal;}
label, button {cursor:pointer;}
a{text-decoration:none; color:#333;}
button {vertical-align:top; background:transparent;}
button::-moz-focus-inner {padding:0; border:0;}
img {max-width:100%;}


.animate.hidden {opacity:0;filter: alpha(opacity = 0);-moz-transition: all 0.5;-webkit-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5;}
.animate.visible {opacity:1.9;filter: alpha(opacity = 70);-moz-transition: all 0.5;-webkit-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5;} 
.animate {-moz-transition: all 1;-webkit-transition: all 1s;-o-transition: all 1s;transition: all 1;}
#menu-all.animate.hidden {top:100px;height:0; overflow: hidden;}
#intro .mayor_ci.animate.hidden {margin-top:-100px;}
#intro .intro_nav.animate.hidden {margin-top:-50px;}
#scroll-down.animate.hidden {top:100px;}

html,body {height:100%; background-color:#eee;}
body {overflow-x: hidden;}
*{list-style:none;text-decoration:none;font-style:normal;margin:0;padding:0;}
.icon_set {background:url(../images/icon_set.png) no-repeat; display: inline-block; text-indent: -1000px; overflow: hidden;}

.main_intro {width:100%; height:100%; background-position: center top; background-repeat: no-repeat; /*background-attachment: scroll;*/ background-size: cover; /*overflow-x: hidden !important;*/ background-image: url(../images/back_img.jpg); overflow: hidden;}
.header {height: 62px; overflow: hidden; border-bottom: 1px solid rgba(0,0,0,0.2);}
.header_wrap {max-width: 1000px; min-width: 640px; margin: 10px auto;}
.header_wrap .logo {float: left;}
.header_wrap .share {float: right;}
.main_intro h1 {max-width: 1000px; min-width: 640px; margin: 100px auto; text-align: center;}
.main_intro h1 span.kor {font-size: 54px; font-weight: normal; letter-spacing: -0.1em; display: block; color:#333;}
.main_intro h1 span.eng {font-size: 16px; letter-spacing: 0; display: block; color:#333; font-family: roboto; font-weight: 300;}

body.long .intro_link {position: absolute;bottom:100px; left:50%; margin-left:-500px;}
.intro_link {width:1000px; margin: 0 auto; padding-top:250px;}
.intro_link > div {float: left; display: inline-block;}
.intro_link .hangang_story {width:360px;}
.intro_link .hangang_history {width:360px;}
.intro_link .hangang_find {width:280px;}
.intro_link > div h5 {color:#fff; font-size: 20px; font-weight: normal; letter-spacing: -0.1em; font-family: roboto,malgun gothic; font-weight: 300;}
.intro_link > div a {display: block; width:100%; height:220px;position: relative; top:-40px; padding-top:40px; color:rgba(255,255,255,0.5);}
.intro_link > div a span.arrow {width: 5px;height: 7px;overflow: hidden;background-position: -495px -12px;vertical-align: middle;position: relative;top: -1px;left: 3px;}
.intro_link > div a:hover {color:#fff;}
.intro_link > div a span.image {width: 165px;height: 165px;overflow: hidden;background-position: 0 0; display: block; margin-left: 50px;}
.intro_link > div.hangang_history a span.image {background-position: -165px 0;}
.intro_link > div.hangang_find a span.image {margin-left: 10px; background-position: -330px 0;}
.scroll {position: absolute;bottom:20px; width: 35px; height: 43px; overflow: hidden; background-position: -600px 0; left:50%; margin-left:-17px;}

.clear {height:0; clear: both;}


.main_sub {}
.main_sub.fix .fixedbar {position: fixed; top:0;}
.main_sub .fixedbar {position: absolute;left:0; width:100%; height: 160px; z-index: 10;background:#fff;background:linear-gradient(#fff,#fff,#fff,#fff ,#fff ,#fff ,#fff ,#fff ,#fff , rgba(255,255,255,0.1))}
.fixedbar .top {position: relative; max-width: 1000px; min-width: 640px; margin: 0 auto;}
.fixedbar .top h1 {padding-left:20px; padding-top: 24px;padding-bottom: 20px; border-bottom:1px solid #ddd;}
.fixedbar .top h1 a:hover {text-decoration: none;}
.fixedbar .top h1 span.kor {font-size: 24px; font-weight: normal; letter-spacing: -0.1em;color:#333; padding-right: 5px;}
.fixedbar .top h1 span.eng {font-size: 12px; letter-spacing: 0; color:#333; font-family: roboto; font-weight: 300; vertical-align: bottom;}
.fixedbar .top .share {position: absolute; right: 10px; top:24px;}
.fixedbar #menu {position: relative; width: 1000px; margin: 20px auto; }
.fixedbar #menu ul li {float: left; display: inline-block; position: relative;z-index: 2;}
.fixedbar #menu ul li a {text-align: center; display: block; width:100%; height:30px; font-size: 18px; font-family: roboto,malgun gothic; letter-spacing: -0.1em; color:rgba(51,51,51,.4); font-weight: 300;}
.fixedbar #menu ul li a:hover {text-decoration: none; color:rgba(51,51,51,1);}
.fixedbar #menu ul li.hangang_story {width:360px;}
.fixedbar #menu ul li.hangang_history {width:360px;}
.fixedbar #menu ul li.hangang_find {width:280px;}
#menu-colorbar {height: 4px; overflow: hidden; position: absolute; top:18px; z-index: 1;}
#menu.s1 ul li.hangang_story a,
#menu.s2 ul li.hangang_history a,
#menu.s3 ul li.hangang_find a {color:rgba(51,51,51,1);-moz-transition: all 2;-webkit-transition: all 2s;-o-transition: all 2s;transition: all 2;}
#menu.s1 #menu-colorbar {background-position: 0px -356px; width: 265px; left:50px;}
#menu.s2 #menu-colorbar {background-position: -300px -356px; width: 265px; left:410px;}
#menu.s3 #menu-colorbar {background-position: -600px -356px; width: 165px; left:778px;}

.road_map {position: absolute;left: 0;}

.contwrap { padding-bottom:30px; background-color: #fff;}
.cont { padding-top:160px; width:1000px; margin:0 auto; min-height: 700px; padding-bottom: 50px; #}
.cont#cont1 {}
.cont#cont2 { }
.cont#cont3 { }
.text_area {height: 350px; padding-top:30px;}
.text_area h3 {font-size: 36px; font-weight: 300; letter-spacing: -0.1em; color:#333; font-family: roboto,malgun gothic;}
.text_area p {font-size: 14px; padding-top:40px; padding-left:20px; width: 450px; font-family: roboto,malgun gothic; position: relative;}
.text_area p span.icon_set {width:235px; height:175px; background-position: 0 -165px; overflow: hidden; position: absolute; left:750px; top:0;}
.text_area p span.btn {position: absolute; left: 580px; top: 136px; width: 300px;}
.text_area p span.btn a {display: inline-block; padding:15px 20px 13px 20px; font-family: roboto,malgun gothic; font-size: 18px; border:1px solid #999; border-radius: 6px; line-height: 1em; letter-spacing: -0.1em; margin-top: 10px;}
.text_area p span.btn a:hover {text-decoration: none;}
.text_area p span.btn a.white-back-purple-line {border:1px solid #8a80cf;}
.text_area p strong {font-size: 18px; letter-spacing: -0.1em; font-weight: 300;}
.description {font-size: 12px; color:#8a80cf; position: relative; top:27px; padding-left:20px; font-weight: bold;}
.description span {display: inline-block; width:19px; height: 23px;overflow: hidden;vertical-align: middle; margin-right: 2px;}
.description span.green_pin {background-position: -514px -68px;}
.description span.orange_pin {background-position: -533px -68px;}

.map_area_total { position:relative; border:4px solid #ddd; box-sizing:border-box; overflow:scroll; }
.map_area_total > .map { position:relative; width:999px; height:730px; margin-top:-110px; overflow:hidden; }
.map_area_total > .map > .point { position:absolute; display:block; left:0; top:190px; width:999px; height:730px; overflow:hidden; z-index:1; }
.map_area_total > .map > img { width:100%; height:100%; }


.map_area { position:relative; width:200%; margin-left:-50%; text-align:center; background:url(../images/map_back.gif); overflow:hidden; border:1px solid red; }
.map_area .map {margin:0 auto; margin-top:-200px;}
.map_area .point {position: absolute;width: 1000px;left: 50%;margin-left: -500px;top: 0;}

.point a { position: absolute; margin-left:-20px; margin-top:-35px; }
.point a span.icon_set { position: relative; display:inline-block; width: 38px; height: 45px; background-position: -533px -19px; z-index: 2;}
.point a strong {font-size: 13px; font-weight: bold; vertical-align: top; padding: 0; border-radius: 25px; top: -24px; position: absolute; white-space: nowrap;z-index: 1; letter-spacing: -0.1em; width:95px; background-color: #fff; color:#333; border:2px solid #8ef40e; text-align: center; margin-left: -28px; left:0; }
.point a.park span.icon_set {background-position: -495px -19px; position: relative; z-index: 2;}
.point a.park strong {border:2px solid #eec634;}

.point > a.on strong { color:#fff; background:#8ef40e; }
.point > a.park.on strong { color:#fff; background:#eec634; }


#cont2 { display:none; }
#cont2 .map_area {height:350px;}
#cont2 .map_area .map {margin:0 auto; margin-top:-280px;}
#cont2 .map_area .point {position: absolute;width: 1000px;left: 50%;margin-left: -500px;top: -80px; z-index: 2}
.map_area .mask {width:4000px; height:1000px; background: url(../images/mask.png) no-repeat; background-position: 0 0; z-index: 1; position: absolute; left:20px; top:-20px;-moz-transition: all 1;-webkit-transition: all 1s;-o-transition: all 1s;transition: all 1;}

#cont3 { display:none; }
#cont3 {height:1000px;}
#cont3 .map_area {height:360px;}
#cont3 .map_area .map {margin:0 auto; margin-top:-240px;}
#cont3 .map_area .point {position: absolute;width: 1000px;left: 50%;margin-left: -500px;top: -40px; z-index: 2}


.cont2_slider {padding-left:520px; margin-top:20px; position: relative; height: 420px; position: relative;}
.cont_map {position: absolute; left:0; top: 0; width: 480px;}
.cont_map img { display:block; }
.photo_p { dislay:block; }
.photo_m { display:none; }

.cont2_slider h3 {font-size: 36px; color:#333; font-weight:300; letter-spacing: -0.1em;}
.cont2_slider_wrap {margin-top:15px; height:350px; position: relative;}
.cont2_slider_wrap h5 {font-size: 24px; color:#ffa94c; font-weight: 300; letter-spacing: -0.1em;}
.cont2_slider_wrap p {font-size: 14px; color:#666; font-weight: 300; font-family: roboto,malgun gothic; padding:10px 0;}
p span.btn {display: block;}
a.white-back-black-line {display: inline-block; padding:15px 32px 13px 32px; font-family: roboto,malgun gothic; font-size: 14px; border:1px solid #999; border-radius: 6px; line-height: 1em; letter-spacing: -0.1em; margin-top: 10px;}
#cont1 a.white-back-black-line:hover {text-decoration: none; border:1px solid #8a80cf; color:#8a80cf;}
#cont1 a.white-back-purple-line:hover {text-decoration: none; border:1px solid #8a80cf; color:#8a80cf;}
#cont2 a.white-back-black-line:hover {text-decoration: none; border:1px solid #f78e4e; color:#f78e4e;}
#cont3 a.white-back-black-line:hover {text-decoration: none; border:1px solid #18ce89; color:#18ce89;}

.cont2_slider_wrap span.c-num {display: inline-block; width: 33px;height: 33px; font-size: 20px; text-align: center; line-height: 33px; background-image:url('../images/circle_1.png');color:#fff; margin-right: 10px; letter-spacing: 0;} 
#cont2.nanji .map_area .mask {left: -1160px; top: -430px;}
#cont2.yeouido .map_area .mask {left: -1050px; top: -240px;}
#cont2.banpo .map_area .mask {left: -880px; top: -170px;}
#cont2.dduksum .map_area .mask {left: -770px; top: -350px;}

#cont2 {background: url('../images/backtitle_1.jpg') no-repeat center top}

.cont3_slider_wrap span.c-num {display: inline-block; width: 33px;height: 33px; font-size: 20px; text-align: center; line-height: 33px; background-image:url('../images/circle_2.png');color:#fff; margin-right: 10px;letter-spacing: 0;} 
.cont3_slider {padding-left:440px; margin-top:20px; position: relative; height: 380px;}
.cont3_slider h3 {font-size: 36px; color:#333; font-weight:300; letter-spacing: -0.1em;}
.cont3_slider_wrap {margin-top:15px; height:200px; position: relative;}
.cont3_slider_wrap h5 {font-size: 24px; color:#18ce89; font-weight: 300; letter-spacing: -0.1em;}
.cont3_slider_wrap p {font-size: 14px; color:#666; font-weight: 300; font-family: roboto,malgun gothic; padding:10px 0;}

#cont3.jeongsun .map_area .mask {left: -1380px; top: -420px;}
#cont3.gangam .map_area .mask {left: -1280px; top: -340px;}
#cont3.sunyu .map_area .mask {left: -1140px; top: -280px;}
#cont3.yanghwa .map_area .mask {left: -1090px; top: -310px;}
#cont3.seokang .map_area .mask {left: -1010px; top: -300px;}
#cont3.nodle .map_area .mask {left: -950px; top: -190px;}
#cont3.dduksum .map_area .mask {left: -690px; top: -260px;}
#cont3.songpa .map_area .mask {left: -580px; top: -170px;}
#cont3.gwang .map_area .mask {left: -500px; top: -320px;}

#cont3 {background: url('../images/backtitle_2.jpg') no-repeat center top}

/* .footer {border-top:1px solid #ddd; padding:20px 0;} */
.make-day{width:138px;margin:0 auto;height:22px;border:1px solid #9d9c95;border-radius:3px;}
.make-day li{float:left;text-align:center;font-size:11px;padding:0px 6px;line-height:22px;color:#888;}
.make-day li.txt{background:#9d9c95;color:#fff;width:40%;}
.copyright {position:relative;width:100%;text-align: center;color:#888;letter-spacing:0px;line-height:35px;font-size: 12px; text-align: center;}


.nav {text-align: center; position: absolute; bottom:0; width:500px; right:0;}
.nav a {text-align: center; display: inline-block; background-color: #ddd; border-radius: 50%; overflow: hidden; color:#999; width:40px;height: 40px; line-height: 40px;}
.nav a:hover {text-decoration: none;}
.nav a.active {background-color:#fda855; color:#fff; }

.zoomContainer {z-index: 99999;}


.description_info {padding-top:50px;}

@media screen and (max-width: 1600px) {
	.main_intro h1 {margin:50px auto;}	
	.intro_link {padding-top:220px;}
}
@media screen and (max-width: 767px) {
	.header_wrap, .main_intro h1, .fixedbar .top {width:100%;max-width:100%;min-width:100%;}
	.main_intro h1 span.kor {font-size:32px;}
	.fixedbar .top h1 span.eng {display:block;}

	.main_sub {width:100%; overflow-x:hidden; }
	.intro_link:after {display:block;content:'';clear:both;}
	.intro_link {width:100%;padding:200px 15px 0;box-sizing:border-box;}
	.intro_link > div h5 {line-height: 1.2em;font-size:16px;}
	.intro_link > div h5 span {display: block;}

	.animate {-moz-transition: all .5;-webkit-transition: all .5s;-o-transition: all .5s;transition: all .5;}
	.intro_link .hangang_story {width:37%;}
	.intro_link .hangang_history {width:38%; }
	.intro_link .hangang_find {width:25%;}
	.intro_link > div a{height:auto;}
	.intro_link > div a span.image {width:80%;height:150px;}
	.intro_link .hangang_story a span.image {background:url(../images/ico_mn1.png) no-repeat center center;background-size:contain;}
	.intro_link > div.hangang_history a span.image {background:url(../images/ico_mn2.png) no-repeat  center center;background-size:contain;width:65%;}
	.intro_link > div.hangang_find a span.image {background:url(../images/ico_mn3.png) no-repeat  center center;background-size:contain;}

	.scroll {display:none;}

	.main_sub .fixedbar {height:200px;}
	.intro_link > div a span.image {margin-left: 5px;}
	.fixedbar .top h1 span.kor {font-size:20px;}
	.fixedbar #menu {width: 100%;}
	.fixedbar #menu:after {display:block;clear:both;content:'';}
	.fixedbar #menu ul li{padding:0 10px;box-sizing: border-box}
	.fixedbar #menu ul li.hangang_story {width:37%;}
	.fixedbar #menu ul li.hangang_history {width:38%;}
	.fixedbar #menu ul li.hangang_find {width:25%;}
	.fixedbar #menu ul li a {font-size:15px; text-align: left; line-height: 1.2em;letter-spacing:-0.15em;}
	.fixedbar #menu ul li a span {display: block;}

	#menu.s1 #menu-colorbar {width:37%; left:0; top:50px;}
	#menu.s2 #menu-colorbar {width:38%; left:37%; top:50px;}
	#menu.s3 #menu-colorbar {width:25%; left:75%; top:50px;}

	.mask {display: none !important;}

	.text_area {height:auto;}
	.text_area h3 {padding:0 0 20px 0;font-size:26px;}
	.text_area p { margin-bottom:10px; font-size: 16px; padding:0; width:100%;box-sizing:border-box; }
	.text_area p span.icon_set {position:static;display:block;background:url(../images/ico_mn1.png) no-repeat center top;width:100%;height:150px;}
	.text_area p span.btn {position:static;display:block;width:100%;padding:0 20px;box-sizing:border-box;margin-bottom:10px;}
	.text_area p span.btn a{display:inline-block;padding:5px 10px;font-size:16px;text-align:center;width:100%;box-sizing:border-box;}	

	.description {position:static; display:block; margin:10px 0; padding:0; font-size:15px; }
	.map_area {position: relative; width:100%; margin-left: 0; overflow-x: scroll;}
	.map_area .point {position: absolute; width: 1000px; left: 0 !important; margin-left: 0 !important; top: 0}

	#cont1 {padding-top:10px;}
	#cont2 {background: url(../images/backtitle_1.jpg) no-repeat center 30px;background-size:90% auto;padding-top:180px;}

	#cont2 .map_area .map {margin-top:-250px;}
	#cont2 .map_area .point {top:-50px;}
	.cont2_slider h3,
	.cont3_slider h3 {position:static;}

	.cont2_slider, .cont3_slider {padding:0;height:auto;}
	.cont2_slider_wrap { width:100%; height:auto; }
	.cont_map { position:static; width:100%; height:350px; margin-top:10px; padding:0; border:1px solid #ddd; box-sizing:border-box; overflow:scroll; }
	.cont_map > img { max-width:inherit; }
	.cont2_slider_wrap h5,
	.cont3_slider_wrap h5 {line-height: 1.2em;}

	.nav { position:relative; left:auto; bottom:auto; width:100%; margin:20px auto 50px; overflow:hidden; }

	.cont2_slider_wrap p span.btn, .cont3_slider_wrap p span.btn {display:block;text-align:center;}
	a.white-back-black-line {padding:10px 20px;display:inline-block;width:70%;text-align:center;}

	#cont3 {height:auto;background: url(../images/backtitle_2.jpg) no-repeat center 30px;background-size:90% auto;padding-top:180px;}
	
	.cont3_slider {padding-left:0; }
	
	.cont3_slider_wrap { position:relative; width:100%; height:auto; margin-bottom:20px; padding-top:50px; overflow:hidden; }
		
	#cont3 .map_area {height:auto;}

	.cont2_slider_wrap p,
	.cont3_slider_wrap p {line-height: 1.4em;padding:10px 5px;text-align:justify;}

	.cont { width:100%; min-height:auto; padding:0 20px; box-sizing:border-box; overflow:hidden;}

	.cont .cont {padding:0;}
	/*
	.cont_map img {opacity: 0.6;}
	.cont_map {background:url(../images/zoom.png) no-repeat center center #000;border-radius: 20px;  overflow: hidden;}
	*/
	.photo_p { display:none; }
	.photo_m { display:block; }

	/*
	.bx-wrapper .bx-viewport { top:50px; }
	.bx-controls-direction {display: none;}
	.bx-wrapper {height:auto;}
	.bx-wrapper .bx-pager {top:0;}
	.bx-viewport {z-index: 2;}
	.bx-wrapper .bx-pager {z-index: 1;}
	#cont3 .bx-wrapper .bx-pager {top:0;}
	*/

	.description_info { position:relative; padding:20px; font-size:14px; background:#f9f9f9; overflow:hidden; }
	.description_info span { display: block; }
	
	body.long .intro_link {position: absolute;bottom:100px; left:5px; margin-left:0;}
	
	.road_map {
		position:relative; display:block; margin-bottom:20px; padding:10px 0; border:1px solid #ddd; overflow:auto;width:100%;-webkit-overflow-scrolling:touch;
		::-webkit-scrollbar { width:3px; background:none; }
		::-webkit-scrollbar-thumb { background:red; opacity:4; }
		::-webkit-scrollbar-track { background:none; }
	}
	.road_map > img { display:block; width:300%; max-width:inherit; }	
	.map_info { position:relative; margin-bottom:20px; padding:3px 0 3px 40px; color:#333; background:#f4f4f4; overflow:hidden; }
	.map_info:before { position:absolute; left:0; top:0; padding:3px 5px; color:#fff; background:#333; border-radius:3px; content:"\안내"; overflow:hidden; }
	.main_intro h1 span.kor {font-size:28px;}
	.fixedbar .top .share {display:none;}
	.intro_link > div a{top:0;padding-top:0;}
	.intro_link > div a span.image {display:none;}
	.intro_link{padding-top:170px;}
	.intro_link > div h5 span{display: inline;}
	.intro_link .hangang_story,
	.intro_link .hangang_history,
	.intro_link .hangang_find {width:100%;float: none;margin-bottom:18px}
	.main_intro { height:300px; background-size:250% auto; }
	
	.map_area_total { overflow:auto; -webkit-overflow-scrolling:touch; }
}
@media all and (max-width:768px){
	.map_area_total { width:700px !important; height:400px; margin:0 auto; }
}
@media all and (max-width:425px){
	.map_area_total { width:385px !important; height:200px; margin:0 auto; }
}
@media all and (max-width:375px){
	.map_area_total { width:335px !important; height:200px; margin:0 auto; }
}
@media all and (max-width:320px){
	.map_area_total { width:280px !important; height:200px; margin:0 auto; }
}

#footer { position: relative;;width:100%; text-align:center; background:#fff; border-top:1px solid #777; overflow:hidden; letter-spacing:-1px;}
#footer > ul { list-style:none; margin:0; padding:10px 16px; overflow:hidden; }
#footer > ul:after { display:block; content:""; clear:both; }
#footer > ul > li { float:left; height:100%; overflow:hidden; }
#footer > ul > li:nth-last-child(1) { float:right; }

#footer .f_link { display:inline-block; vertical-align:top;}
#footer .f_link > li:nth-last-child(1) { margin-left:32px; }

#footer .f_left_link { height:25px; overflow:hidden; }
#footer .f_left_link > li { position:relative; float:left; height:100%; }
#footer .f_left_link > li:after { position:absolute; right:0; top:50%; width:1px; height:50%; background:#878787; content:""; transform:translateY(-50%); }
#footer .f_left_link > li:nth-last-child(1):after { display:none; }
#footer .f_left_link > li > a { position:relative; display:block; padding:6px 14px; font-size:12px; color:#222; font-weight:400; }
#footer .f_left_link > li:nth-child(1) > a { padding-left:0; }

#footer .f_right_link { float:right; }
#footer .f_right_link > li { float:left; margin-left:14px; }
#footer .f_right_link > li > a { display:block; width:26px; height:26px; border:1px solid #555; border-radius:50%; }
#footer .f_right_link > li > a > em { position:absolute; left:-9999px; top:-9999px; }
#footer .f_right_link > li:nth-child(1) > a { background:#fff url("../img_f/foot_icon_1.png") no-repeat center center; background-size:40% auto; }
#footer .f_right_link > li:nth-child(2) > a { background:#fff url("../img_f/foot_icon_2.png") no-repeat center center; background-size:70% auto; }
#footer .f_right_link > li:nth-child(3) > a { background:#555 url("../img_f/foot_icon_3.png") no-repeat center center; background-size:60% auto; }

#footer > .txt_group { padding:14px 0; border-top:1px solid #777; }
#footer > .txt_group > p { line-height:21px; word-break:keep-all; word-wrap:break-word; overflow:hidden; }
#footer .txt1 { font-size:13px; color:#222; font-weight:700; }
#footer .txt2 { font-size:12px; color:#222; font-weight:400; }
#footer .txt2 > span { position:relative; display:inline-block; margin:0 8px; padding-right:9px; }
#footer .txt2 > span:after { position:absolute; right:0; top:50%; width:1px; height:30%; background:#878787; transform:translateY(-50%); content:""; }
#footer .txt2 > span:nth-last-child(1) { padding-right:0; }
#footer .txt2 > span:nth-last-child(1):after { display:none; }
#footer .txt3 { font-size:10px; color:#222; font-weight:400; }