@chartset "utf-8";

body,div,form,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,em,p,span,textarea,pre,label,fieldset,th,td,button,a,input,select,hr{margin:0;padding:0;font-family:ng, helvetica, sans-serif;font-size:12px;color:#8a8a8a; word-break:break-all;}
body{line-height:1;}
ul,ol,li{list-style:none;}
table{margin:0;padding:0;border-spacing:0;border:0;border-collapse:collapse;}
img,fieldset,abbr,acronym{border:0;}
address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:normal;}
q:before,q:after{content:"";}
input,select,textarea{font-family:dotum;font-size:100%;color:#333;}
button{overflow:visible;border:0;border-radius:0;background:none;}
hr{display:none;}
caption,legend{overflow:hidden;width:0;height:0;font-size:0;line-height:0;}
a{color:#7d8791;text-decoration:none;}
a:focus,a:hover,a:active{color:#555f60;}
input[type=text],input[type=password],textarea{margin:0;padding:2px 0 1px;border:1px solid #c1c1c1;}
select{border:1px solid #c1c1c1;}
label,input[type=button],input[type=submit],input[type=image],button{cursor:pointer;}
textarea,pre{overflow:auto;}

#skipNavi{position:absolute;top:0;left:0;width:100%;}
#skipNavi a{display:block;position:absolute;top:-10000px;left:0;z-index: 500;width:100%;font-size:1em;text-align:center;}
#skipNavi a:hover, #skipNavi a:focus, #skipNavi a:active{position:absolute;top:0;left:0;z-index:500;padding:5px 0;background:#1d60a7;font-weight:bold;color:#fff;}
.blind{position:absolute;top:0;left:0;visibility:hidden;overflow:hidden;width:1px;height:1px;font-size:0;line-height:0;}
.clfix{*zoom:1;}
.clfix:after{content:"";display:block;clear:both;height:0;visibility:hidden;}

/* Nanum Barun Gothic */
@font-face {
	font-family:'ng';
	src:url("http://www.cyworld.com/images/font/NanumBarunGothic.eot");
	src:local(※),
		url("http://www.cyworld.com/images/font/NanumBarunGothic.eot?#iefix") format("embedded-opentype"),
		url("http://www.cyworld.com/images/font/NanumBarunGothic.woff") format("woff"),
		url("http://www.cyworld.com/images/font/NanumBarunGothic.ttf") format("truetype");
	font-weight: normal;
	font-style: normal
}

/* Nanum Barun Gothic Bold */
@font-face {
	font-family:'ng_b';
	src:url("http://www.cyworld.com/images/font/NanumBarunGothicBold.eot");
	src:local(※),
		url("http://www.cyworld.com/images/font/NanumBarunGothicBold.eot?#iefix") format("embedded-opentype"),
		url("http://www.cyworld.com/images/font/NanumBarunGothicBold.woff") format("woff"),
		url("http://www.cyworld.com/images/font/NanumBarunGothicBold.ttf") format("truetype");
	font-weight: normal;
	font-style: normal
}

/* Layout */
#wrap {width:100%;}
#header {position:relative; width:1036px; height:150px; margin:0 auto;}
#contents {width:1036px; margin:0 auto;}
#footer {width:100%; margin-top:50px; border-top:1px solid #dedede;}
#footer .inner {position:relative; width:1036px; margin:0 auto; padding:33px 0 30px; }

/* Common */
.sectionTit {padding:24px 0 0 15px; font-family:helvetica; font-size:14px; font-weight:bold; color:#000;}
.txtBold {font-weight:bold; color:#000;}
.icoNew {display:inline-block; width:19px; height:19px; margin-left:5px; background:url(http://c1img.cyworld.co.kr/img/cymain/2015/ico/ico_new.png) no-repeat 0 50%; font-size:0; line-height:0; vertical-align:middle;}
.line {border:1px solid #d7d7d7;}

/* Header */
.logoArea {position:relative; text-align:center;}
.logoArea .logo {padding-top:75px;}
.logoArea .txt {position:absolute; top:51px; left:0; width:100%; font-size:15px; color:#6f6f6f;}

.banner {position:absolute; top:50px; right:0;}
.banner a img {width:300px; height:100px;}

/* Contents */
.topArea {*zoom:1;}
.topArea:after {content:""; display:block; clear:both;}
.topArea .left,
.topArea .right {float:left;}
.topArea .left {margin-right:8px;}
.topArea .left .advertisement {width:728px; height:90px;}
.topArea .left .advertisement.line {width:726px; height:88px;}

.topArea .left .coverStory {position:relative; overflow:hidden; width:728px; height:330px; margin-top:4px;}
.topArea .left .coverStory .prev, 
.topArea .left .coverStory .next {position:absolute; top:135px; z-index:10; width:30px; height:61px; font-size:0; line-height:0;}
.topArea .left .coverStory .prev {left:20px; background:url(http://c1img.cyworld.co.kr/img/cymain/2015/btn/btn_cover_left_off.png) no-repeat 0 0;}
.topArea .left .coverStory .next {right:20px; background:url(http://c1img.cyworld.co.kr/img/cymain/2015/btn/btn_cover_right_off.png) no-repeat 0 0;}
.topArea .left .coverStory .prev.current {left:20px; background:url(http://c1img.cyworld.co.kr/img/cymain/2015/btn/btn_cover_left_on.png) no-repeat 0 0;}
.topArea .left .coverStory .next.current {right:20px; background:url(http://c1img.cyworld.co.kr/img/cymain/2015/btn/btn_cover_right_on.png) no-repeat 0 0;}
.topArea .left .coverStory .ctrlArea {position:absolute; bottom:15px; left:0; z-index:10; width:100%; text-align:center;}
.topArea .left .coverStory .ctrlArea button {width:10px; height:10px; margin-right:13px; background:url(http://c1img.cyworld.co.kr/img/cymain/2015/btn/btn_count_off.png) no-repeat 0 0; font-size:0; line-height:0;}
.topArea .left .coverStory .ctrlArea button.current {background:url(http://c1img.cyworld.co.kr/img/cymain/2015/btn/btn_count_on.png) no-repeat 0 0;}

.topArea .right {}
.topArea .right .loginArea {position:relative; width:298px; height:168px; border:1px solid #d4d4d4;}
.topArea .right .loginArea .login {display:block; width:82px; height:33px; margin:26px auto 0; background:url(http://c1img.cyworld.co.kr/img/cymain/2015/btn/btn_login.png) no-repeat 0 0; font-size:14px; color:#fff; line-height:33px; text-align:center;}
.topArea .right .loginArea .login:hover, 
.topArea .right .loginArea .login:focus {text-decoration:underline;}
.topArea .right .loginArea .loginBefore {*zoom:1; margin:15px 0 0 50px;}
.topArea .right .loginArea .loginBefore:after {content:""; display:block; clear:both;}
.topArea .right .loginArea .loginBefore li {float:left; margin-left:20px; padding-left:20px; background:url(http://c1img.cyworld.co.kr/img/cymain/2015/bg/bg_bar_size10.png) no-repeat 0 50%;}
.topArea .right .loginArea .loginBefore li:first-child {margin-left:0; padding-left:0; background:none;}
.topArea .right .loginArea .loginBefore li a {color:#858585; line-height:14px;}
.topArea .right .loginArea .loginBefore li a:hover,
.topArea .right .loginArea .loginBefore li a:focus {text-decoration:underline;}

.topArea .right .loginArea .loginAfter {position:relative; *zoom:1; padding:24px 18px 0 23px;}
.topArea .right .loginArea .loginAfter:after {content:""; display:block; clear:both;}
.topArea .right .loginArea .loginAfter li {float:left; margin-left:8px; padding-left:9px; background:url(http://c1img.cyworld.co.kr/img/cymain/2015/bg/bg_bar_size10.png) no-repeat 0 50%; line-height:19px;}
.topArea .right .loginArea .loginAfter li:first-child {margin-left:0; padding-left:0; background:none;}
.topArea .right .loginArea .loginAfter li a {color:#a09f9f;}
.topArea .right .loginArea .loginAfter li a:hover, 
.topArea .right .loginArea .loginAfter li a:focus {text-decoration:underline;}
.topArea .right .loginArea .loginAfter li .txtBold {margin-left:3px;}
.topArea .right .loginArea .loginAfter li.btnLogout {position:absolute; top:24px; right:23px; margin-left:17px; padding-left:0; background:none;}
.topArea .right .loginArea .loginAfter li.btnLogout a {display:inline-block; font-size:12px; color:#454545; text-decoration:underline;}
.topArea .right .loginArea .serviceArea {position:absolute; left:0; bottom:0; overflow:hidden; width:298px; border-top:1px solid #dfdfdf; background:#f5f5f5;}
.topArea .right .loginArea .serviceArea .prev, 
.topArea .right .loginArea .serviceArea .next {position:absolute; top:22px; z-index:10; width:7px; height:13px; font-size:0; line-height:0;}
.topArea .right .loginArea .serviceArea .prev {left:5px; background:url(http://c1img.cyworld.co.kr/img/cymain/2015/btn/btn_service_left.png) no-repeat 0 0;}
.topArea .right .loginArea .serviceArea .next {right:5px; background:url(http://c1img.cyworld.co.kr/img/cymain/2015/btn/btn_service_right.png) no-repeat 0 0;}
.topArea .right .loginArea .serviceArea .viewArea {overflow:hidden; width:278px; height:56px; margin:0 10px;}
.topArea .right .loginArea .serviceArea .viewArea ul {*zoom:1; overflow:hidden; width:298px; height:56px; margin-left:-1px;}
.topArea .right .loginArea .serviceArea .viewArea ul:after {content:""; display:block; clear:both;}
.topArea .right .loginArea .serviceArea .viewArea ul li {float:left; width:92px; border-left:1px solid #dfdfdf; line-height:56px; text-align:center;}
.topArea .right .loginArea .serviceArea .viewArea ul li a {font-size:13px; color:#a0a0a0;}
.topArea .right .loginArea .serviceArea .viewArea ul li a:hover, 
.topArea .right .loginArea .serviceArea .viewArea ul li a:focus {text-decoration:underline;}
.topArea .right .loginArea .serviceArea .viewArea ul li a em {display:inline-block; height:15px; margin-right:5px; vertical-align:middle;}
.topArea .right .loginArea .serviceArea .viewArea ul li a .icoHome {width:16px; background:url(http://c1img.cyworld.co.kr/img/cymain/2015/ico/ico_home_off.png) no-repeat 0 0;}
.topArea .right .loginArea .serviceArea .viewArea ul li a .icoMyinfo {width:10px; background:url(http://c1img.cyworld.co.kr/img/cymain/2015/ico/ico_myinfo_off.png) no-repeat 0 0;}
.topArea .right .loginArea .serviceArea .viewArea ul li a .icoService {width:14px; background:url(http://c1img.cyworld.co.kr/img/cymain/2015/ico/ico_servicecenter_off.png) no-repeat 0 0;}
.topArea .right .loginArea .serviceArea .viewArea ul li a .icoClub {width:12px; height:20px; background:url(http://c1img.cyworld.co.kr/img/cymain/2015/ico/ico_club_off.png) no-repeat 0 0;}
.topArea .right .loginArea .serviceArea .viewArea ul li a .icoStore {width:14px; background:url(http://c1img.cyworld.co.kr/img/cymain/2015/ico/ico_store_off.png) no-repeat 0 0;}

.topArea .right .loginArea .layerArea {position:absolute; top:6px; right:5px;}
.topArea .right .loginArea .layerArea .btnClose {position:absolute; top:-1px; right:-2px; width:13px; height:13px; background:url(http://c1img.cyworld.co.kr/img/cymain/2015/btn/btn_close.png) no-repeat 0 0; font-size:0; line-height:0;}

.topArea .right .userInfo {*zoom:1; padding:12px 0 0 88px;}
.topArea .right .userInfo:after {content:""; display:block; clear:both;}
.topArea .right .userInfo .imgArea, 
.topArea .right .userInfo .txt {float:left;}
.topArea .right .userInfo .imgArea {position:relative;}
.topArea .right .userInfo .imgArea img {width:44px; height:44px;}
.topArea .right .userInfo .imgArea .cover {position:absolute; top:0; left:0; width:44px; height:44px; background:url(http://c1img.cyworld.co.kr/img/cymain/2015/bg/bg_cover_profile.png) no-repeat 0 0;}
.topArea .right .userInfo .txt {margin:19px 0 0 11px; font-size:16px; color:#6a6a6a;}

.topArea .right .advertisement {width:300px; height:250px; margin-top:4px;}
.topArea .right .advertisement.line {width:298px; height:248px;}

.peopleArea {position:relative; padding:38px 56px 0;}
.peopleArea .prev, 
.peopleArea .next {position:absolute; top:66px; width:26px; height:15px; font-size:0; line-height:0;}
.peopleArea .prev {left:10px; background:url(http://c1img.cyworld.co.kr/img/cymain/2015/btn/btn_people_left.png) no-repeat 0 0;}
.peopleArea .next {right:10px; background:url(http://c1img.cyworld.co.kr/img/cymain/2015/btn/btn_people_right.png) no-repeat 0 0;}
.peopleArea .viewArea {position:relative; overflow:hidden; width:924px; height:80px;}
.peopleArea .viewArea ul {*zoom:1; margin-left:-70px; width:993px; height:80px;}
.peopleArea .viewArea ul:after {content:""; display:block; clear:both;}
.peopleArea .viewArea ul li {float:left; width:261px; margin-left:70px;}
.peopleArea .viewArea ul li a {*zoom:1; display:block;}
.peopleArea .viewArea ul li a:after {content:""; display:block; clear:both;}
.peopleArea .viewArea ul li a .imgArea, 
.peopleArea .viewArea ul li a .txtArea {float:left;}
.peopleArea .viewArea ul li a .imgArea {position:relative;}
.peopleArea .viewArea ul li a .imgArea img {width:80px; height:80px;}
.peopleArea .viewArea ul li a .imgArea .cover {position:absolute; top:0; left:0; width:80px; height:80px; background:url(http://c1img.cyworld.co.kr/img/cymain/2015/bg/bg_cover_people.png) no-repeat 0 0;}
.peopleArea .viewArea ul li a .txtArea {width:166px; margin:15px 0 0 15px;}
.peopleArea .viewArea ul li a .txtArea .tit {overflow:hidden; font-family:ng_b; font-weight:normal; font-size:15px; color:#323232; line-height:17px; text-overflow:ellipsis; white-space:nowrap;}
.peopleArea .viewArea ul li a .txtArea .txt {overflow:hidden; height:30px; margin-top:6px; font-size:13px; line-height:15px;}
.peopleArea .viewArea ul li a:hover .txtArea .tit, 
.peopleArea .viewArea ul li a:hover .txtArea .txt, 
.peopleArea .viewArea ul li a:hover .txtArea .url, 
.peopleArea .viewArea ul li a:focus .txtArea .tit, 
.peopleArea .viewArea ul li a:focus .txtArea .txt {text-decoration:underline;}

.recommendArea {margin-top:40px; border-top:1px solid #e4e4e4; border-bottom:1px solid #d6d8da;}
.recommendArea .sectionTit {padding-bottom:18px;}
.recommendArea .listArea ul {*zoom:1;}
.recommendArea .listArea ul:after {content:""; display:block; clear:both;}
.recommendArea .listArea ul li {float:left; padding-bottom:20px; border-right:1px solid #e6e6e6;}
.recommendArea .listArea ul li {padding-top:40px; border-top:1px solid #e4e4e4;}
.recommendArea .listArea ul:first-child li {padding-top:0; border-top:0;}
.recommendArea .listArea ul:first-child li + li + li + li {padding-top:40px; border-top:1px solid #e4e4e4;}
.recommendArea .listArea ul li.left {padding-right:33px;}
.recommendArea .listArea ul li.center {padding-right:33px; padding-left:33px;}
.recommendArea .listArea ul li.right {padding-left:33px; border-right:0;}
.recommendArea .listArea ul li a .imgArea {width:300px; height:251px;}
.recommendArea .listArea ul li a .imgArea.line {width:298px; height:249px; font-size:0; line-height:0;}
.recommendArea .listArea ul li a .imgArea img {width:100%; height:100%;}
.recommendArea .listArea ul li a .txt {overflow:hidden; width:300px; margin-top:20px; font-size:13px; line-height:15px; text-overflow:ellipsis; white-space:nowrap;}
.recommendArea .listArea ul li a .tit {overflow:hidden; width:300px; height:40px; margin-top:12px; font-size:18px; color:#323232; line-height:20px;}
.recommendArea .listArea ul li a:hover .txt, 
.recommendArea .listArea ul li a:hover .tit, 
.recommendArea .listArea ul li a:focus .txt, 
.recommendArea .listArea ul li a:focus .tit {text-decoration:underline;}
.btnArea {text-align:center;}
.btnArea .btnMore {width:50px; height:50px; background:url(http://c1img.cyworld.co.kr/img/cymain/2015/btn/btn_more.png) no-repeat 0 0; font-size:0; line-height:0;}

.bottomArea {*zoom:1; margin-top:50px;}
.bottomArea:after {content:""; display:block; clear:both;}
.bottomArea .advertisement, 
.bottomArea .blog {float:left;}
.bottomArea .advertisement {width:728px; height:90px;}
.bottomArea .advertisement.line {width:726px; height:88px;}
.bottomArea .blog {width:300px; height:90px; margin-left:8px;}

.quickLeft, 
.quickRight {position:absolute; top:150px;}
.quickLeft {left:50%; margin-left:-648px;}
.quickRight {right:50%; margin-right:-648px;}

/* Footer */
.blueDotList {*zoom:1;}
.blueDotList:after {content:""; display:block; clear:both;}
.blueDotList li {float:left; margin-left:12px; padding-left:10px; background:url(http://c1img.cyworld.co.kr/img/cymain/2015/bul/bul_blue_dot.png) no-repeat 0 4px;}
.blueDotList li:first-child {margin-left:0;}
.blueDotList li a {font-family:ng_b; font-size:13px; color:#818181;}
.blueDotList li a:hover, 
.blueDotList li a:focus {text-decoration:underline;}

.footerLinkList {*zoom:1; margin-top:12px;}
.footerLinkList:after {content:""; display:block; clear:both;}
.footerLinkList li {float:left; margin-left:9px; padding-left:9px; background:url(http://c1img.cyworld.co.kr/img/cymain/2015/bg/bg_bar_size8.png) no-repeat 0 50%;}
.footerLinkList li:first-child {margin-left:0; padding-left:0; background:none;}
.footerLinkList li a {font-size:11px; color:#b7b7b7;}
.footerLinkList li a:hover, 
.footerLinkList li a:focus {text-decoration:underline;}

.copyright {position:absolute; top:47px; right:0; font-family:helvetica; color:#c1c1c1;}