@charset "utf-8"; /* Mobile Device (768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. 미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다) */ a {text-decoration: none; } /* .setBundle01 {background:url("http://c1img.cyworld.co.kr/img/cymain/cyco/editor/bundle_btn_detailview.png") no-repeat; -webkit-background-size:100px auto; background-size:175px auto; } .setBundle02 {background:url("http://c1img.cyworld.co.kr/img/cymain/cyco/editor/bundle_btn_comment.png") no-repeat; -webkit-background-size:75px auto; background-size:75px auto; } .setBundle03 {background:url("http://c1img.cyworld.co.kr/img/cymain/cyco/editor/bundle_btn_box_add_mobile.png") no-repeat; -webkit-background-size:200px auto; background-size:200px auto; } */ #cyWrap {width: 100%; overflow: hidden; } #cyHeader {text-align: left; background-color: #d7dee3; padding-left: 10px; } #cyHeader h1 {display: none; } #cyHeader p.homeName {display: inline-block; font-size: 12px; color: #a09f9f; line-height: 55px; font-weight: normal; } #cyHeader p.homeName .profileWrap01 {display:inline-block; width: 27px; height: 27px; border-radius:50%; vertical-align: middle; overflow: hidden; } #cyHeader p.homeName .profileWrap01 img {width: 100%; } #cyContent {} #cyContent { zoom: 1; } #cyContent:before, #cyContent:after { content: ""; display: table; } #cyContent:after { clear: both; } #postData {position: relative; } #postData .postTitle {position: relative; height: 62px; padding: 13px 0 0 0; } #postData .postTitle h2.subject {display:inline-block; height: 48px; line-height: 24px; font-size: 19px; color: #202020; vertical-align: middle; padding: 0 15px; margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap:break-word; } #postData .postDetail {margin:20px 0 40px 0;} #postData .postDetail section.post {margin-bottom: 10px; } #postData .postDetail section.post.imageBox {} #postData .postDetail section.post.imageBox figure {margin: 0; } #postData .postDetail section.post.imageBox figure img {max-width: 100%; } #postData .postDetail section.post.textBox {font-size: 13px; color: #464646; line-height: 23px; padding:0 15px; } #postData .postDetail section.post.videoBox {position: relative; padding-bottom: 28px; } #postData .postDetail section.post.videoBox .videoIframe {position: absolute; left: 0; top: 0; right: 0; } #postData .postDetail section.post.videoBox .videoThum {position: relative; } #postData .postDetail section.post.videoBox .videoIframe img, #postData .postDetail section.post.videoBox .videoThum img {width: 100%; } #postData .postDetail section.post.videoBox .videoThum .btnPlay {position: absolute; left: 50%; top: 50%; width: 70px; height: 47px; border: none; text-indent: -3000px; background:url("http://c1img.cyworld.co.kr/img/cymain/cyco/editor/btn_video_play.png") no-repeat; -webkit-background-size: 70px auto; background-size: 70px auto; overflow: hidden; margin: -24px 0 0 -35px; } #postData .postDetail section.post.videoBox .videoCaption {position: absolute; left: 0; bottom: 0; right: 0; font-size: 12px; color: #c1c1c1; line-height: 18px; padding: 10px 0 0 15px; } #postData .postDetail section.post.bgmBox {} #postData .postDetail section.post.bgmBox .album {height: 74px; border-top: 1px solid #fff; border-bottom: 1px solid #e2e2e2; background-color: #f9f9f9; } #postData .postDetail section.post.bgmBox .album .contWrap {position: relative; padding: 10px 40px 10px 90px; } #postData .postDetail section.post.bgmBox .album .contWrap .musicTitle {height: 20px; font-size: 12px; color: #4b4b4b; line-height: 20px; } #postData .postDetail section.post.bgmBox .album .contWrap .info {font-size: 11px; color: #b1b1b1; line-height: 16px; } #postData .postDetail section.post.bgmBox .album .contWrap .info span {display: block; height: 16px; line-height: 16px; } #postData .postDetail section.post.bgmBox .album .contWrap .thum {position: absolute; left: 20px; top: 11px; width: 54px; height: 54px; border-radius: 50%; overflow: hidden; } #postData .postDetail section.post.bgmBox .album .contWrap .thum img {width: 100%; } #postData .postDetail section.post.bgmBox .album .contWrap .musicTitle, #postData .postDetail section.post.bgmBox .album .contWrap .info span {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap:break-word; } #postData .postDetail section.post.bgmBox .album .contWrap .control {position: absolute; top: 50%; right: 15px; margin-top: -9px; } #postData .postDetail section.post.bgmBox .album .contWrap .control .btnGotoPlayer {width: 13px; height: 19px; border: none; text-indent: -300px; overflow: hidden; background-position: 0 -25px; padding: 0; } #postData .postDetail section.post.bgmBox .album .contWrap .control .btnGotoPlayer:hover, #postData .postDetail section.post.bgmBox .album .contWrap .control .btnGotoPlayer:active {background-position: -25px -25px; } #postData .postDetail section.post.urlBox {padding: 0 0px; } /* #postData .postDetail section.post.urlBox .webPage {height: 72px; border: 1px solid #dadada; } #postData .postDetail section.post.urlBox .webPage .contWrap {position: relative; padding: 10px 10px 10px 74px; } #postData .postDetail section.post.urlBox .webPage .contWrap .webTitle {height: 16px; font-size: 12px; color: #4b4b4b; line-height: 16px; } #postData .postDetail section.post.urlBox .webPage .contWrap .desc {height: 14px; font-size: 11px; color: #b1b1b1; line-height: 14px; } #postData .postDetail section.post.urlBox .webPage .contWrap .thum {position: absolute; left: 10px; top: 10px; width: 50px; height: 52px; padding-top:0!important;} #postData .postDetail section.post.urlBox .webPage .contWrap .thum img {width: 100% !important; height: 100%; left:0!important;} #postData .postDetail section.post.urlBox .webPage .contWrap .url {font-size: 11px; color: #68b6cd; line-height: 13px; padding-top: 8px; } #postData .postDetail section.post.urlBox .webPage .contWrap .url a {color: #68b6cd; } #postData .postDetail section.post.urlBox .webPage .contWrap .webTitle, #postData .postDetail section.post.urlBox .webPage .contWrap .desc {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap:break-word; } */ #postData .postDetail section.post.urlBox .webPage {height: 98px; border: solid 1px rgba(218, 218, 218, 0.69); } #postData .postDetail section.post.urlBox .webPage .contWrap {position: relative; padding: 10px 10px 10px 118px; } #postData .postDetail section.post.urlBox .webPage .contWrap .webTitle {height: 26px; font-size: 15px; color: #121212; margin-bottom:4px; margin-top:2px; } #postData .postDetail section.post.urlBox .webPage .contWrap .desc {height: 15px; font-size: 13px; color: #121212; line-height: 14px; } #postData .postDetail section.post.urlBox .webPage .contWrap .thum {position: absolute; left: 10px; top: 10px; width: 78px; height: 78px; padding-top:0!important;} #postData .postDetail section.post.urlBox .webPage .contWrap .thum img {width: 100% !important; height: 100%; left:0!important;} #postData .postDetail section.post.urlBox .webPage .contWrap .url {font-size: 11px; color: #68b6cd; line-height: 13px; padding-top:10px; } #postData .postDetail section.post.urlBox .webPage .contWrap .url a {color: #8f8f8f; font-size:12px;} #postData .postDetail section.post.urlBox .webPage .contWrap .webTitle, #postData .postDetail section.post.urlBox .webPage .contWrap .desc {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap:break-word; } #postData .postDetail section.post.acticonBox {text-align: center; } #postData .postDetail section.post.acticonBox .acticon-in {position: relative; display: block; width: 100px; height: 70px; vertical-align: top; overflow: hidden; zoom: 1; margin: 0 auto; } #postData .postDetail section.post.acticonBox .acticon-in img {position: absolute; left: 0; top: 0; width: 100%; } #postData .postInfo {padding: 15px 15px 40px; } #postData .postInfo .title {display: none; font-size: 13px; color: #464646; border-bottom: 1px solid #dadada; padding-bottom: 5px; margin-bottom: 10px; } #postData .postInfo .title span {display: inline-block; background:url("http://c1img.cyworld.co.kr/img/cymain/cyco/editor/bul_down_arrow01.png") no-repeat right 50%; -webkit-background-size: 10px auto; background-size: 10px auto; padding-right: 13px; } #postData .postInfo .infoList {} #postData .postInfo .infoList > li {position: relative; min-height: 20px; line-height: 20px; font-size: 11px; color: #464646; padding-bottom: 5px; } #postData .postInfo .infoList > li span.name {position: absolute; left: 0; top: 0; display: block; width: 68px; height: 20px; color: #949494; background:url("http://c1img.cyworld.co.kr/img/cymain/cyco/editor/bundle_ico_postInfo.png") no-repeat; -webkit-background-size: 15px auto; background-size: 15px auto; padding-left: 20px; } #postData .postInfo .infoList > li p {display: block; padding-left: 88px; } #postData .postInfo .infoList li.date span.name {background-position: 0 3px; } #postData .postInfo .infoList li.auth span.name {background-position: 0 -21px; } #postData .postInfo .infoList li.tags span.name {background-position: 0 -47px; } #postData .postInfo .infoList li.source span.name {background-position: 0 -73px; } #postData .postInfo .infoList li.etc span.name {background-position: 0 -97px; } #postData .postInfo .infoList li.writer span.name {background-position: 0 -121px; } #postData .postInfo .infoList li.cyLike span.name {background-position: 0 -150px; } #postData .postInfo .infoList li.share span.name {background-position: 0 -175px; } #postData .postInfo .infoList li.date span.uploadTime {color: #bebebe; } #postData .postInfo .infoList li.etc a {display: inline-block; color: #464646; background:url("http://c1img.cyworld.co.kr/img/cymain/cyco/editor/bul_right_arrow01.png") no-repeat right 50%; -webkit-background-size: 6px auto; background-size: 6px auto; padding-right: 10px; } #postData .postInfo .infoList li.cyLike p span {display: inline-block; color: #464646; } #postData .postInfo .infoList li.cyLike em.count {color: #72b2ce; font-style: normal; } #postData .postInfo .infoList li.share .btnShare {} #postData .postInfo .infoList li.share .btnShare button {width: 23px; height: 23px; border: none; text-indent: -3000px; background-position: 0 -150px; margin-right: 2px; overflow: hidden; } #postData .postInfo .infoList li.share .btnShare button.cyworld {background-position: 0 -150px; } #postData .postInfo .infoList li.share .btnShare button.facebook {background-position: -28px -150px; } #postData .postInfo .infoList li.share .btnShare button.twitter {background-position: -56px -150px; } #postData .postInfo .infoList li.share .btnShare button.naver {background-position: -84px -150px; } #postData .postInfo .infoList li.share .btnShare button.kakaostory {background-position: -112px -150px; } #postData .postInfo .infoList li.share .btnShare button.urlcopy {background-position: -140px -150px; } #postData .btnWrap {text-align: left; border-top: 1px solid #dadada; padding: 15px 0 80px; margin: 0 15px; } #postData .btnWrap button {width: 69px; height: 27px; font-size: 13px; text-align: center; border-radius: 14px; padding: 0; } #postData .btnWrap button.btnModufy {color: #fff; border: 1px solid #7eb9cc; background-color: #96cddf; } #postData .btnWrap button.btnDel {color: #929292; border: 1px solid #c4c4c4; background-color: #fff; } #postData .btnCommentPop {position: fixed; right: 20px; bottom: 35px; width: 72px; height: 68px; font-size: 12px; color: #fff; text-align: center; border: none; background-position: 0 -75px; padding: 0 0 0 4px; } #postData .btnCommentPop span.name {display: inline-block; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 6px; margin-bottom: 2px; } #postData .btnCommentPop span.count {display: block; font-size: 24px; line-height: 24px; } /* #dimmed {display:none; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 100; } #cyContent.slideComment #replyWrap {transform: translate(-100%, 0px); } body.iOS7 #cyContent.slideComment #replyWrap, body.iOS8 #cyContent.slideComment #replyWrap {right: 0; transform: translate(0, 0px); } #cyContent.slideComment #dimmed {display:block; } */ /* #replyWrap {position: absolute; top:-56px; right: -100%; width: 100%; background-color: #fff; transform: translate(0px, 0px); transition: all 0.3s ease-out 0s; z-index:110; } #replyWrap .topWrap {position: relative; height: 50px; text-align: center; border-bottom: 1px solid #dadada; } #replyWrap .topWrap .title {font-size: 15px; line-height: 50px; font-weight: bold; color: #323232; } #replyWrap .topWrap button {position: absolute; top: 11px; height: 26px; background-color:transparent; padding: 0; overflow: hidden; } #replyWrap .topWrap button.btnClose {left: 15px; width: 26px; border: none; text-indent: -3000px; background-position: 6px 6px;} #replyWrap .topWrap button.btnGotoPost {right: 15px; font-size: 12px; color: #323232; border: 1px solid #c7c7c7; border-radius: 13px; padding: 0 8px; } #replyWrap .contWrap {position: relative; padding-bottom: 0px; overflow-y: scroll; } #replyWrap .contWrap .depth1 {} #replyWrap .contWrap .depth1 > li {} #replyWrap .contWrap .reply {position: relative; text-align: left; border-bottom: 1px solid #e1e5e7; font-size: 13px; padding: 15px 15px 15px 57px; margin-left: 15px; } #replyWrap .contWrap .depth1 > li:last-child .reply {border-bottom: none; } #replyWrap .contWrap .reply .name {font-size: 14px; line-height: 17px; font-weight: bold; color: #3c3c3c; padding: 9px 0 7px; } #replyWrap .contWrap .reply .name .secret {display: inline-block; width: 19px; height: 19px; text-indent: -3000px; vertical-align: middle; background-position: -25px 0;} #replyWrap .contWrap .reply .thum {position: absolute; left: 0; top: 15px; height: 42px; } #replyWrap .contWrap .reply .thum .profileWrap01 {display:block; width: 42px; height: 42px; border-radius:50%; overflow: hidden; } #replyWrap .contWrap .reply .thum .profileWrap01 img {width: 100%; } #replyWrap .contWrap .reply .data {font-size: 13px; color: #323232; line-height: 22px; } #replyWrap .contWrap .acticon-in {position: relative; display: block; width: 100px; height: 70px; vertical-align: top; overflow: hidden; zoom: 1; margin: 0 auto; } #replyWrap .contWrap .acticon-in img {position: absolute; left: 0; top: 0; width: 100%; } #replyWrap .contWrap .vode {position: relative; display: block; width: 100px; height: 100px; vertical-align: top; overflow: hidden; zoom: 1; margin: 0 auto; } #replyWrap .contWrap .reply .image {padding: 10px 0; } #replyWrap .contWrap .reply .image figure {} #replyWrap .contWrap .reply .image figure img {width: 100%; } #replyWrap .contWrap .reply .date {position: absolute; right: 15px; top: 20px; font-size: 11px; color: #c2c2c2; padding-top: 5px; } #replyWrap .contWrap .reply .util {padding-top: 10px; } #replyWrap .contWrap .reply .util span {display: inline-block; background-position: 0 -33px; padding: 0 7px 0 11px; } #replyWrap .contWrap .reply .util span:first-child {padding-left: 0; background: none; } #replyWrap .contWrap .reply .util button {font-size: 12px; color: #989898; border: none; background-color:transparent; padding: 0; } #replyWrap .contWrap .reply .util button em {font-style: normal; color: #62c0d4; } #replyWrap .contWrap li.depth2 {background-color: #f3f4f6; } #replyWrap .contWrap li.depth2 .reply {padding-left: 73px; margin-left: 51px; } #replyWrap .contWrap li.depth2 .reply .thum {background-position: 0 -48px; padding-left: 20px; } #replyWrap .contWrap .pagging {position: relative; height: 33px; text-align: center; border-top:1px solid #dadada; padding-top: 7px; margin:0 15px 0 72px; } #replyWrap .contWrap .pagging button {width: 33px; height: 33px; text-indent: -3000px; border: none; background:url("http://c1img.cyworld.co.kr/img/cymain/cyco/common/btn_notifi_pagging.png") no-repeat; -webkit-background-size: 33px auto; background-size: 33px auto; } #replyWrap .contWrap .pagging button.btnPrev {float:left; } #replyWrap .contWrap .pagging button.btnNext {float:right; background-position: 0 -50px; } #replyWrap .contWrap .btnGotoTop {display:block; width: 100%; height: 49px; border:none; border-top:1px solid #dadada; text-indent: -3000px; background:#f8f8f8 url("http://c1img.cyworld.co.kr/img/cymain/cyco/common/btn_goto_top.gif") no-repeat center; background-size:36px auto; margin-top: 30px; } */ .wrapBase {position: relative; margin-left: 52px; } .depth2 .wrapBase {position: relative; margin-left: 0; } .b_acticon_wrap {} .wrapBase .b_acticon_wrap {padding-top: 15px; margin:0 -15px 0 -124px; } .acticonWrap {display: none; } #replyWrap .commentWrap {position: relative; } #replyWrap .commentWrap .nonMemberWrap {background-color: #fff; padding: 15px 0 15px 15px; } #replyWrap .commentWrap .nonMemberWrap input {width: 160px; height: 30px; line-height: 30px; font-size: 12px; border: none; border-bottom: 1px solid #dadada; } #replyWrap .commentWrap .nonMemberWrap input:last-child {margin-left: 10px; } #replyWrap .commentWrap .inputWrap {position: relative; min-height: 45px; background-color: #dfdfdf; padding: 5px 85px 5px 5px; } #replyWrap .commentWrap.depth2 {border-top: 1px solid #e1e5e7; margin: 0 -15px -15px -124px; } #replyWrap .commentWrap textarea {width: 100%; height: 45px; font-size: 13px; line-height: 25px; color: #57595d; border: none; box-sizing: border-box; resize:none; padding: 10px; } #replyWrap .commentWrap .acticonBox {position: relative; background-color: #fff; padding-top: 5px; margin-right: -36px; } #replyWrap .commentWrap .acticonBox .btnDelActicon {position: absolute; top: 0; right: 50%; width: 10px; height: 10px; border: none; text-indent: -99999px; background-position: 1px 1px; -webkit-background-size: 40px auto; background-size: 40px auto; padding: 0; margin-right: -65px; } #replyWrap .commentWrap .utilWrap {position: absolute; top: 5px; right: 5px; width: 120px; height: 45px; text-align: right; } #replyWrap .commentWrap .utilWrap .btnEmoti {display: inline-block; width: 35px; height: 45px; border: none; text-indent: -3000px; outline: none; background-color: #fff; background-position: 8px -87px; vertical-align: middle; overflow: hidden; } #replyWrap .commentWrap .utilWrap .btnSecret {display: inline-block; width: 35px; height: 45px; text-align: left; background-color: #fff; vertical-align: middle; cursor:pointer; } #replyWrap .commentWrap .utilWrap .btnSecret input[type=checkbox] {position: absolute; width: 26px; height: 26px; opacity:0; cursor:pointer; } #replyWrap .commentWrap .utilWrap .btnSecret span {display: inline-block; width: 35px; height: 45px; text-indent: -3000px; background-position: -27px -87px; vertical-align: middle; overflow: hidden; } #replyWrap .commentWrap .utilWrap .btnSecret input[type=checkbox]:checked+span {background-position: -27px -137px; } #replyWrap .commentWrap .utilWrap .btnConfirm {display: inline-block; width: 39px; height: 26px; font-size: 12px; color: #fff; border: none; border-radius: 13px; background-color: #c9c9c9; padding: 0; margin-left: 5px; } #cyFooter .footerWrap {display: none; } #tempSaveWrap {width: 100%; box-sizing: border-box; padding: 0 15px 70px; } #tempSaveWrap .topWrap {position: relative; height: 50px; border-bottom: 1px solid #dadada; margin: 0 -15px; } #tempSaveWrap .topWrap h2 {font-size: 15px; line-height: 50px; color: #323232; font-weight: normal; text-align: center; margin: 0; } #tempSaveWrap .btnEdit, #tempSaveWrap .btnDel {position: absolute; top: 12px; right: 15px; width: 46px; height: 27px; line-height: 25px; font-size: 12px; color: #646464; border: 1px solid #cecece; border-radius: 14px; background-color: #fafafa; } #tempSaveWrap .btnDel {display: none; } #tempSaveWrap .btnClose {position: absolute; top: 12px; left: 10px; width: 38px; height: 27px; line-height: 25px; color: #fff; border: none; text-indent: -3000px; background:url("http://c1img.cyworld.co.kr/img/cymain/cyco/editor/btn_close01_pcweb.gif") no-repeat center; } #tempSaveWrap .impText {font-size: 10px; line-height: 17px; border-bottom: 1px solid #eaeaea; padding: 15px 0; } #tempSaveWrap .list {} #tempSaveWrap .list li {position: relative; height: 100px; border-bottom: 1px solid #eaeaea; } #tempSaveWrap .list li label {display: none; position: absolute; left: 0; top: 43px; width: 25px; text-align: center; z-index: 1; } #tempSaveWrap .list li label input {position: absolute; width: 25px; height: 25px; opacity:0; } #tempSaveWrap .list li label span {display: inline-block; width: 13px; height: 13px; border: 1px solid #cecece; text-indent: -9999px; background-color: #f6f6f6; overflow: hidden; } #tempSaveWrap .list li label input:checked+span {background-color: #515151; } #tempSaveWrap .list dl {position: relative; height: 100px; color: #646464; padding: 20px 70px 0 0; } #tempSaveWrap .list dl dt {height: 20px; font-size: 13px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap:break-word; } #tempSaveWrap .list dl dd {} #tempSaveWrap .list dl dd.desc {height: 17px; font-size: 11px; line-height: 17px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap:break-word; } #tempSaveWrap .list dl dd.thum {position: absolute; top: 20px; right: 0; width: 60px; height: 60px; overflow: hidden; } #tempSaveWrap .list dl dd.thum img {width: 100%; height: 100%; } #tempSaveWrap .list dl dd.date {font-size: 11px; padding-top: 8px; } #tempSaveWrap.editable {} #tempSaveWrap.editable .btnEdit {display: none; } #tempSaveWrap.editable .btnDel {display: block; } #tempSaveWrap.editable .list li label {display: block; } #tempSaveWrap.editable .list dl {padding-left: 30px; } #tempSaveWrap .moerWrap {position: relative; text-align: center; padding: 0 15px; } #tempSaveWrap .moerWrap .btnMoreView {position: absolute; left: 50%; top: -1px; width: 33px; height: 33px; border: none; text-indent: -3000px; background:url("http://c1img.cyworld.co.kr/img/cymain/cyco/common/btn_contents_more_151017.gif") no-repeat; background-size:100%; margin-left: -16px; } #tempSaveWrap .moerWrap .btnDel {display: none; position: relative; float:left; } .lpop_systemAlert {top: 312px; margin-top: 0; z-index: 120; } Tablet & Desktop Device (사용자 해상도가 768px 이상일 때 이 코드가 실행됨. 테블릿과 데스크톱의 공통 코드를 작성한다) @media all and (min-width:768px) { } Tablet Device (사용자 해상도가 768px 이상이고 1023px 이하일 때 이 코드가 실행됨. 아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다) @media all and (min-width:768px) and (max-width:1023px) { } .setBundle01 {background:url("http://c1img.cyworld.co.kr/img/cymain/cyco/editor/bundle_btn_detailview.png") no-repeat; -webkit-background-size:auto; background-size: 175px auto; } .share.cyco-sharewarp .setBundle01 {background:none;} Desktop Device (사용자 해상도가 1000px 이상일 때 이 코드가 실행됨. 데스크톱의 공통 코드를 작성한다) @media all and (min-width:1024px) { .setBundle01 {background:url("http://c1img.cyworld.co.kr/img/cymain/cyco/editor/bundle_btn_detailview_pcweb.png") no-repeat; -webkit-background-size:auto; background-size: 175px auto; } .share.cyco-sharewarp .setBundle01 {background:none;} .setBundle02 {background:url("http://c1img.cyworld.co.kr/img/cymain/cyco/editor/bundle_btn_comment_pcweb.png") no-repeat; -webkit-background-size:auto; background-size:auto; } #cyWrap {width: 1024px; overflow: visible; } #cyHeader {height: 79px; text-align: left; background-color: #fff; padding-left: 0; } #cyHeader h1 {margin-left: 305px; } #cyHeader .btnNoti {display: none; } #cyHeader p.homeName {width: 723px; height:67px; line-height:54px; font-size: 14px; text-align: center; padding-top: 12px; } #cyHeader p.homeName .profileWrap01 {width: 50px; height: 50px; } #cyHeader .profile {height: 79px; } #cyHeader .profile dt {line-height: 45px; } #cyHeader .profile dd.thum {top: 15px; } #cyHeader .profile dd.btnWrap {top: 27px; } #cyContent {background:url("http://c1img.cyworld.co.kr/img/cymain/cyco/common/bg_main_contents_w1024.gif") repeat-y right top; } #cyContent { } #postData {float: left; } #postData .postTitle {height: 133px; padding: 37px 130px 0 30px; } #postData .postTitle h2.subject {height: 96px; line-height: 44px; font-size: 28px; padding-left: 0; } #postData .postDetail {padding: 0 0px; } #postData .postDetail section.post {padding: 0; margin-bottom: 16px; } #postData .postDetail section.post.textBox {font-size: 14px; line-height: 28px; padding: 0; } #postData .postDetail section.post.urlBox {padding: 0; } #postData .postInfo {padding: 30px; } #postData .postInfo .title {display: block; font-size: 16px; padding-bottom: 10px; margin-bottom: 20px; } #postData .postInfo .title span {padding-right: 22px; } #notification {display: block; height: 100%; } #postData .btnWrap {background: none; padding: 12px 0 15px; margin: 0 30px; } #postData .btnCommentPop {position: absolute; top: 44px; right: 30px; width: 106px; height: 100px; background-position: 0 -50px; padding-left: 6px; transform: translate(0px, 0px); transition: all 0.3s ease-out 0s; z-index: 120; } #postData .btnCommentPop span.name {font-size: 16px; padding-bottom: 8px; margin-bottom: 8px; } #postData .btnCommentPop span.count {font-size: 34px; } #postData .postDetail section.post.bgmBox .album {height: 79px; margin-bottom: 7px; } #postData .postDetail section.post.bgmBox .album .contWrap .control {margin-top: -11px; } #postData .postDetail section.post.bgmBox .album .contWrap .control .btnGotoPlayer {width: 16px; height: 23px; background-position: 0 0; } #postData .postDetail section.post.bgmBox .album .contWrap .control .btnGotoPlayer:hover, #postData .postDetail section.post.bgmBox .album .contWrap .control .btnGotoPlayer:active {background-position: -40px 0; } #postData .postDetail section.post.urlBox .webPage {height: 98px; } #postData .postDetail section.post.urlBox .webPage .contWrap {padding-left: 115px; } #postData .postDetail section.post.urlBox .webPage .contWrap .webTitle {height: 22px; font-size: 14px; line-height: 22px; padding-top: 6px; } #postData .postDetail section.post.urlBox .webPage .contWrap .desc {height: 22px; font-size: 14px; line-height: 22px; } #postData .postDetail section.post.urlBox .webPage .contWrap .thum {width: 78px; height: 78px; padding-top:0!important; } #postData .postInfo .infoList > li {min-height: 24px; line-height: 24px; padding-bottom: 12px; } #postData .postInfo .infoList > li span.name {width: 90px; font-size: 12px; background:url("http://c1img.cyworld.co.kr/img/cymain/cyco/editor/bundle_ico_postInfo_pcweb02.png") no-repeat; padding-left: 28px; } #postData .postInfo .infoList li.date span.name {background-position: 0 3px; } #postData .postInfo .infoList li.auth span.name {background-position: 0 -48px; } #postData .postInfo .infoList li.tags span.name {background-position: 0 -96px; } #postData .postInfo .infoList li.source span.name {background-position: 0 -145px; } #postData .postInfo .infoList li.etc span.name {background-position: 0 -198px; } #postData .postInfo .infoList li.writer span.name {background-position: 0 -246px; } #postData .postInfo .infoList li.cyLike span.name {background-position: 0 -294px; } #postData .postInfo .infoList li.share span.name {background-position: 0 -348px; } #postData .postInfo .infoList > li p {font-size: 14px; padding-left: 110px; } #postData .postInfo .infoList li.share .btnShare button {width: 25px; height: 25px; } #postData .postInfo .infoList li.share .btnShare button.cyworld {background-position: 0 -170px; } #postData .postInfo .infoList li.share .btnShare button.facebook {background-position: -30px -170px; } #postData .postInfo .infoList li.share .btnShare button.twitter {background-position: -61px -170px; } #postData .postInfo .infoList li.share .btnShare button.naver {background-position: -91px -170px; } #postData .postInfo .infoList li.share .btnShare button.kakaostory {background-position: -122px -170px; } #postData .postInfo .infoList li.share .btnShare button.urlcopy {background-position: -153px -170px; } #cyContent.slideComment #dimmed {display: none; } #cyContent.slideComment .btnCommentPop {transform: translate(155px, 0px); } #replyWrap {position: relative; top: auto; right: auto; clear:both; padding-top: 70px; transform:none; } #replyWrap .topWrap {height: 38px; } #replyWrap .topWrap .btnClose, #replyWrap .topWrap button.btnGotoPost {display: none; } #replyWrap .topWrap .title {font-size: 16px; font-weight: normal; line-height: 38px; text-align: left; padding-left: 30px; } #replyWrap .topWrap .title span {display: inline-block; color: #72b8d5; background:url("http://c1img.cyworld.co.kr/img/cymain/cyco/editor/bul_down_arrow01.png") no-repeat right 50%; -webkit-background-size: 10px auto; background-size: 10px auto; padding-right: 26px; } #replyWrap .topWrap button.btnClose {right: 15px; left: auto; } #replyWrap .contWrap {background-color: #f6f8fa; padding: 0 30px 30px 0; overflow: visible; } #replyWrap .contWrap .reply {padding-left: 63px; margin-left: 30px; } #replyWrap .contWrap li.depth2 {background: none; } #replyWrap .contWrap li.depth2 .reply {margin-left: 93px; } #replyWrap .contWrap .reply .name .secret {width: 20px; height: 20px; background-position: 0 0; } #replyWrap .contWrap .reply .util span {background-position: 0 -42px; } #replyWrap .contWrap li.depth2 .reply .thum {background-position: 0 -90px; } .wrapBase {margin-left: 72px; } .depth2 .wrapBase {} .b_acticon_wrap {padding-top: 30px; margin: 0 0 0 30px; } .wrapBase .b_acticon_wrap {margin: 0 -15px 0 -73px; } .wrapBase .b_acticon_wrap .acticon_main {} #replyWrap .commentWrap .utilWrap .btnEmoti {background-position: 7px -138px; } #replyWrap .commentWrap .utilWrap .btnSecret span {background-position: -70px -138px; } #replyWrap .commentWrap .utilWrap .btnSecret input[type="checkbox"]:checked + span {background-position: -32px -138px; } #replyWrap .commentWrap {border-left: 1px solid #f0f1f1; border-right: 1px solid #f0f1f1; border-top: 2px solid #d3d4d4; background-color: #fff; margin: 0 0 30px 30px; } #replyWrap .commentWrap.depth2 {margin: 0 -15px 0 -73px; } #replyWrap .commentWrap .nonMemberWrap {padding-bottom: 0; } #replyWrap .commentWrap .inputWrap {height: auto; background-color: #fff; padding: 0 15px 5px; } #replyWrap .commentWrap textarea {height: 54px; font-size: 13px; line-height: 22px; padding-bottom: 0; } #replyWrap .commentWrap .acticonBox {margin-right: 0; } #replyWrap .commentWrap .acticonBox .btnDelActicon.setBundle02 {background:url("http://c1img.cyworld.co.kr/img/cymain/cyco/editor/bundle_btn_comment.png") no-repeat; background-position: 1px 1px; -webkit-background-size:40px auto; background-size:40px auto; } #replyWrap .commentWrap .utilWrap {position: relative; right: auto; bottom: auto; width: auto; text-align: left; } #replyWrap .commentWrap .utilWrap .btnConfirm {float: right; width: 60px; height: 30px; font-size: 14px; color: #929292; border: 1px solid #bbc5c9; background-color: #fff; margin-top: 7px; } #replyWrap .contWrap .btnGotoTop {display: none; } #replyWrap .inputWrap {position: relative; } #replyWrap .contWrap .pagging {text-align: center; padding-top: 15px; margin: 0 0 0 30px; } #replyWrap .contWrap .pagging button {display: inline-block; width: 100px; height: 34px; line-height: 34px; font-size: 14px; color: #484a4d; border: 1px solid #dfe0e1; text-indent:0; background: transparent none; } #replyWrap .contWrap .pagging button:hover {color: #fff; border: 1px solid #484a4d; background-color: #484a4d; } #replyWrap .contWrap .pagging button span {display: inline-block; height: 34px; line-height: 34px; font-size: 10px; vertical-align: top; } #replyWrap .contWrap .pagging button.btnPrev {float: none; } #replyWrap .contWrap .pagging button.btnNext {float: none; } #cyFooter .footerWrap {display: block; } #tempSaveWrap {padding: 0 40px 120px; } #tempSaveWrap .topWrap {height: 84px; margin: 0 -40px; } #tempSaveWrap .topWrap h2 {font-size: 28px; line-height: 84px; } #tempSaveWrap .btnEdit, #tempSaveWrap .btnDel {top: 23px; right: 40px; width: 78px; height: 36px; font-size: 16px; line-height: 36px; border-radius: 18px; } #tempSaveWrap .btnClose {left: 40px; top: 27px; left: 34px; } #tempSaveWrap .impText {height: 40px; font-size: 14px; padding: 45px 0 0; } #tempSaveWrap .list li {height: 160px; } #tempSaveWrap .list li label {top: 70px; width: 50px; text-align: left; } #tempSaveWrap .list li label span {width: 18px; height: 18px; } #tempSaveWrap .list dl {padding: 35px 130px 0 0; } #tempSaveWrap .list dl dt {height: 26px; font-size: 18px; line-height: 26px; } #tempSaveWrap .list dl dd.desc {height: 26px; font-size: 14px; line-height: 26px; } #tempSaveWrap .list dl dd.thum {width: 120px; height: 120px; } #tempSaveWrap .list dl dd.date {font-size: 12px; color: #a5a5a5; padding-top: 20px; } #tempSaveWrap.editable .list dl {padding-left: 50px; } #tempSaveWrap .moerWrap {padding: 0; } #tempSaveWrap .moerWrap .btnMoreView {width: 50px; height: 50px; background:url("http://c1img.cyworld.co.kr/img/cymain/cyco/common/btn1024_contents_more_151017.gif") no-repeat; margin-left: -25px; } #tempSaveWrap .moerWrap .btnDel {display: none; left: 0; top: 20px; } #tempSaveWrap.editable .moerWrap .btnDel {display: block; } } /* Desktop Device (사용자 해상도가 1280px 초과일 때 이 코드가 실행됨. 1024px 이상의 랩탑 또는 데스크톱에 대응하는 코드를 작성한다) */ @media all and (min-width:1281px) { #cyWrap {width: 1280px; } #cyHeader h1 {margin-left: 422px; } #cyHeader .profile {width: 350px; } #cyHeader p.homeName {width: 930px; } #cyContent {background:url("http://c1img.cyworld.co.kr/img/cymain/cyco/common/bg_main_contents_w1280.gif") repeat-y right top; } #postData {w idth: 930px; } #postData .postTitle {height: 170px; padding: 37px 170px 0 60px; } #postData .postDetail {padding: 0 0px; } #postData .postInfo {padding: 30px 60px; } #postData .btnWrap {margin:0 60px; } #postData .btnCommentPop {right: 60px; } #replyWrap .contWrap .reply {margin-left: 60px; } #replyWrap .contWrap li.depth2 .reply {margin-left: 123px; } /* #replyWrap {width: 930px; } */ #tempSaveWrap {padding: 0 0 120px; } } .source { padding: 20px 30px 35px 30px; text-align: left; } .source__name {} .source__link {color:#121212 !important}