/* reset */ html,body { width:100%; height:100%; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,form,fieldset,p,button,strong,span,em,iframe,img,header { margin:0; padding:0 } body { font-family:"맑은 고딕","Malgun Gothic","굴림", Gulim,'돋움',dotum,Helvetica,sans-serif !important; background:#fff; font-size:12px; line-height:1.4; color:#333; -webkit-text-size-adjust:none; word-break:break-all; -ms-word-break:break-all } /* color , font-family , font-size 디자인가이드에 맞게사용 */ fieldset,img { border:0 none } dl,ul,ol,menu,li { list-style:none } blockquote, q { quotes: none } blockquote:before, blockquote:after,q:before, q:after { content:''; content:none } hr { display:none; } table { border-collapse:collapse; border-spacing:0; } legend, caption { width:0; height:0; font:0/0 Sans-serif; visibility:hidden; z-index: -1; } input,select,textarea,button { vertical-align:top; } address,caption,cite,code,dfn,em,var { font-style:normal; font-weight:normal } a:link, a:visited { text-decoration:none; color:#eee; } a:hover, a:link:hover, a:visited:hover { color:#eee !important; } .clearfix { } .clearfix:after { display:block; content:""; clear:both; } #header { position:fixed; top:0; left:0; width:100%; z-index:1000; } #header .header_cont { position:relative; z-index:10; height:48px; background:rgba(255,255,255,0.8); } #header .header_cont .btn_donga { display:block; position:absolute; top:18px; left:15px; } #header .header_cont .btn_donga img { display:block; width:70px; height:13px; } #header .header_cont .btn_original { display:block; width:118px; height:22px; position:absolute; top:15px; left:91px; } #header .header_cont .btn_original img { width:100%; } #header .header_cont .share_sns { position:absolute; top:13px; right:15px; } #header .header_cont .share_sns .btn_share { margin-right:16px; cursor:pointer; } #header .header_cont .share_sns .btn_share img { width:24px; height:24px; } #header .header_cont .share_sns .btn_reply { display:inline-block; cursor:pointer; } #header .header_cont .share_sns .btn_reply img { width:24px; height:24px; } #header.dark .header_cont { height:48px; width:100%; background:rgba(21,21,21,0.4); } .container { font-family: "Noto Sans KR", sans-serif; } /* byline */ #byline { position:relative; width:100%; padding:30px 0 28px; background:#000000; border-top:1px solid #3d3d3d; } #byline .make_list { padding:0 15px; margin:0 auto; display:flex; flex-direction: column; align-items: center; justify-content: center; } #byline .make_list li { margin-bottom:7px; font-size:14px; color:#ffffff; letter-spacing:-1px; position:relative; } #byline .make_list li span { display:block; text-align: center; } #byline .make_list li a { width: 60px; position: absolute; height:40px;right:-48px; bottom: -7px;} #byline .make_list li a img{width:100%;} #byline .make_list li .bold { font-size:14px; font-weight: bold; } #byline .make_list li .txt_bar { display:inline-block; margin:0 10px 0 9px; color:#dadada; font-size:15px; vertical-align:top; } #byline .more { padding:15px 0 0 0; font-size:18px; color:#111; letter-spacing:-1px; } #byline .more a { text-decoration:underline; color:#111; } /* original story */ #original { width:100%; background:#fff; padding:24px 0 48px; border-top:1px solid #ebebeb; position:relative; z-index:10; } #original .original_cont { margin:0 15px; } #original .original_cont .cont_tit { float:left; display:block; width:123px; height:24px; margin-top:7px; margin-bottom:15px; } #original .original_cont .cont_tit img { width:100%; } #original .original_cont .btn_more { float:right; display:block; width:130px; height:30px; background:#f8f8f8; border:1px solid #7a7a7a; color:#151515; font-size:14px; text-align:center; line-height:30px; font-weight:bold; border-radius:16px; } #original .morestory:after { display:block; content:''; clear:both; } #original .morestory div { width:100%; position:relative; overflow:hidden; cursor:pointer; } #original .morestory div img { width:100%; } #original .morestory div .cont_info { width:100%; height:100%; background:rgba(53,68,106,0.8); position:absolute; left:0; top:0; transition:all .3s ease-in-out; opacity:0; } #original .morestory div .cont_info:hover { opacity:1; } #original .morestory div .cont_info .tit { display:block; color:#fff; font-size:20px; font-weight:bold; text-align:center; line-height:1.4; margin:40px 0 6px; } #original .morestory div .cont_info .txt { width:270px; color:#fff; font-size:12px; line-height:18px; margin:0 auto; } #original .morestory div .cont_info .btn_page { display:block; width:36px; color:#fff; font-size:12px; line-height:1.5; padding-right:21px; background:url(https://image.donga.com/policy/original/jameswebb/dist/images/common/icon_warr.png) no-repeat right 8px; position:absolute; right:19px; bottom:17px; } #original .morestory .slick-dots { width:100%; text-align:center; position:absolute; bottom:-18px; } #original .morestory .slick-dots li { display:inline-block; width:10px; height:10px; background:#c4c4c4; margin:0 4px; border-radius:50%; overflow:hidden; } #original .morestory .slick-dots li button { width:15px; height:15px; border:none; text-indent:-999999px; background:none; cursor:pointer; position:relative; left:-2px; top:-2px; } #original .morestory .slick-dots li.slick-active { background:#030303; } /* original story - PC*/ #original-pc { width:100%; background:#fff; padding:72px 0; border-top:1px solid #ebebeb; position:relative; z-index:10; } #original-pc .original_cont { width:1000px; margin:0 auto; } #original-pc .original_cont .cont_tit { color:#000; font-size:20px; font-family:'Noto Serif KR', serif; font-weight:bold; letter-spacing:-.5px; } #original-pc .original_cont .cont_tit img { float:left; margin-right:5px; } #original-pc .original_cont .btn_more { float:right; display:block; width:147px; height:32px; background:#f8f8f8; border:1px solid #7a7a7a; color:#151515; font-size:15px; text-align:center; line-height:32px; font-weight:bold; border-radius:17px; } #original-pc .morestory-pc:after { display:block; content:''; clear:both; } #original-pc .morestory-pc li { float:left; width:326px; height:184px; background:#eaeaea; margin: 15px 0 0; position:relative; overflow:hidden; cursor:pointer; } #original-pc .morestory-pc li:nth-child(2) { margin:15px 10px 0; } #original-pc .morestory-pc li img { width:100%; } #original-pc .morestory-pc li .cont_info { width:326px; height:184px; background:rgba(53,68,106,0.8); position:absolute; left:0; top:0; transition:all .3s ease-in-out; opacity:0; } #original-pc .morestory-pc li .cont_info:hover { opacity:1; } #original-pc .morestory-pc li .cont_info .tit { display:block; color:#fff; font-size:20px; font-weight:bold; text-align:center; line-height:1.4; margin:40px 0 6px; } #original-pc .morestory-pc li .cont_info .txt { width:270px; color:#fff; font-size:12px; line-height:18px; margin:0 auto; } #original-pc .morestory-pc li .cont_info .btn_page { display:block; width:36px; color:#fff; font-size:12px; line-height:1.5; padding-right:21px; background:url('https://image.donga.com/policy/original/jameswebb/dist/images/common/icon_warr.png') no-repeat right 8px; position:absolute; right:19px; bottom:17px; } /* footer */ #footer { position:relative; width:100%; padding:30px 0 17px 0; background:#fff; border-top:1px solid #ebebeb; position:relative; z-index:10; } #footer .footer_copy { margin:0 auto 15px; font-size:14px; color:#666; letter-spacing:-1px; text-align:center; } #footer .footer_copy a { color:#666; } #footer .footer_copy .txt_bar { display:inline-block; margin:0 7px; color:#999; font-size:13px; vertical-align:top; } /* footer - PC */ #footer-pc { width:100%; padding-bottom:50px; background:#fff; border-top:1px solid #c6c6c6; position:relative; z-index:10; } #footer-pc .footerBox { width:1100px; margin:0 auto; } #footer-pc .footerBox .footerNav { padding:43px 0 0 0; } #footer-pc .footerBox .footerNav p { padding-bottom:7px; } #footer-pc .footerBox .footerNav p strong { display:inline-block; margin-right:10px; font-size:12px; color:#191919; vertical-align:bottom; } #footer-pc .footerBox .footerNav p strong a { font-size:13px; color:#191919; } #footer-pc .footerBox .footerNav p .mgr { margin-right:0; } #footer-pc .footerBox .footerNav p a { display:inline-block; font-size:12px; color:#191919; vertical-align:middle; } #footer-pc .footerBox .footerNav p .txt_bar { display:inline-block; width:1px; height:10px; margin:0 4px 0 6px; color:#cdcdcd; font-size:10px; } #footer-pc .footerBox .copyright { padding-left:0; } #footer-pc .footerBox .copyright p { color:#6d6d6d; font-size:12px; } #footer-pc .footerBox .copyright .address { color:#191919; } #footer-pc .footerBox .copyright .address span { display:inline-block; width:1px; height:10px; margin:0 2px 0 3px; color:#cdcdcd; font-size:10px; vertical-align:text-top; } #footer-pc .footerBox .copyright .footerBanner { width:408px; height:29px; padding-left:10px; vertical-align:middle; } #footer-pc .footerBox .copyright .fLogo { margin-top:0; text-align:center; } #footer-pc .footerBox .copyright .fLogo strong { color:#f15922; } #footer-pc .footerBox .address { margin-left:62px; padding-bottom:28px; color:#191919; font-size:12px; } /* footer_black */ #footer.black { background:#141414; } #footer .footer_cont .make_list li { color:#fff; } #footer.black .footer_cont .more { color:#8d8d8d; } #footer.black .footer_cont .more a { text-decoration:underline; color:#fff; } /* 댓글 */ #reply_layer { display:none; overflow:auto; width:100%; height:100%; background:#fff; } #reply_layer .reply_box { position:relative; overflow:initial !important;} #reply_layer .reply_box .btn_close { position:absolute; top:15px; left:15px; display:block; width:18px; height:18px; background:url('https://image.donga.com/policy/original/jameswebb/dist/images/common/btn_close.png') no-repeat 0 0; background-size:18px 18px; color:transparent; font-size:0; cursor:pointer; z-index:1; } #reply_layer #spinTopLayer { margin:0; } #reply_layer #spinTopLayer .spinTopLayerWriteBox { padding:50px 15px 31px; } /* 공유하기 */ #shareLayer { display:none; width:300px; background:#fff; z-index:99999999 !important; } #shareLayer .title { display:block; color:#3c3c3b; font-size:18px; text-align:center; font-weight:bold; padding:15px 0 8px; } #shareLayer .share_list { padding:10px 20px 20px; text-align:center; } #shareLayer .share_list li { display:inline-block; margin:0 8px; } #shareLayer .share_list li a { display:block; width:55px; height:55px; border-radius:50%; overflow:hidden; } #shareLayer .share_list li a span { display:block; width:55px; height:55px; background:url("https://image.donga.com/policy/original/jameswebb/dist/images/common/img_share.png") no-repeat 0 0; background-size:112px 55px; text-indent:-99999px; } #shareLayer .share_list .facebook span { background-position:0px 0px; } #shareLayer .share_list .kakaotalk span { background-position:-56px 0; } #shareLayer .share_list .url { clear:both; position:relative; float:none; margin:0; border:1px solid #dcdcdc; border-radius:25px; margin-top:24px; padding:2px 9px; } #shareLayer .share_list li.url .url_inp { float:left; display:inline-block; width:167px; height:40px; padding:2px 7px 2px 0; color:#706f6f; font-size:15px; line-height:40px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #shareLayer .share_list li.url .btn_copyurl { display:inline-block; height:40px; border-left:1px solid #dcdcdc; color:#706f6f; font-size:13px; line-height:40px; text-align:center; vertical-align:middle; border-radius:0; padding:2px 0px 2px 7px; } #shareLayer .share_list li.url .txt { position:absolute; display:none; bottom:0; left:0; width:173px; height:48px; padding:0px 5px; border-right:0; background:#fff; color:#706f6f; font-size:13px; line-height:48px; vertical-align:middle; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-radius:26px 0 0 26px; } #shareLayer .btn_close { position:absolute; top:15px; right:15px; display:block; width:20px; height:20px; background: url('https://image.donga.com/policy/original/jameswebb/dist/images/common/btn_close.png') no-repeat 0 0; background-size:20px 20px; font-size:0; color:transparent; z-index:1; cursor:pointer; } /* 헤더 반응형 수정 코드 */ @media all and (min-width: 720px){ #reply_layer .reply_box .btn_close { top: 20px; left: initial; right: 25px; width: 24px; height: 24px; background-size: initial; } #reply_layer { width: 750px; max-height: 710px; } .spinTopLayerList { padding:0 35px; } #spinTopLayer .spinTopLayerLogin ul li div a { background: url(https://image.donga.com/donga/images/donga_sns_reply/sns_login.png) no-repeat 0 0; background-size:initial; width: 26px; height:26px; } #reply_layer .reply_box { width: auto !important; padding: 60px 25px 25px; } .reply_box #spinTopLayer { width: 100%; margin-bottom: 40px; word-break: break-all; word-wrap: break-word; font-size: 14px; line-height: 140%; color: #333; font-family: "맑은 고딕","Malgun Gothic","굴림", Gulim,'돋움',dotum,Helvetica,sans-serif; text-align: left; } .reply_box #spinTopLayer .spinTopLayerSnsCheck { clear: initial; padding: 5px 100px 0 0; } #reply_layer .reply_box #spinTopLayer .spinTopLayerWriteBox { position: relative; padding: 0 !important; margin-bottom: 12px; background: #fff; border: initial; } .reply_box #spinTopLayer .spinTopLayerWrite .spinTopLayerWriteButton { cursor: pointer; position: absolute; right: 0; top: 0; display: inline-block; color: transparent; background: url(https://image.donga.com/donga/images/donga_sns_reply/btn_reply_submit.gif) no-repeat 0 0; width: 91px; height: 136px; padding: 0; border: 0 none; text-indent: -9999px; line-height: 999px; overflow: hidden; float: initial; margin: 0; } .reply_box #spinTopLayer * { margin:0; padding:0; } .reply_box #spinTopLayer .spinTopLayerLogin ul li div a { display: block; width: 26px; height: 26px; overflow: hidden; text-indent: -9999px; background: url(https://image.donga.com/donga/images/donga_sns_reply/sns_login.png) no-repeat 0 0; } .reply_box #spinTopLayer .spinTopLayerList .commentList li:first-child { padding-top: 0; } .reply_box #spinTopLayer .spinTopLayerList .spinTopLayerListSort a:hover, .reply_box #spinTopLayer .spinTopLayerList .spinTopLayerListSort a.on { height: 43px; font-weight: bold; letter-spacing: -1px; background: #fff; color: #7276c9 !important; } .reply_box #spinTopLayer .spinTopLayerList .spinTopLayerListSort a { position: relative; float: left; display: block; overflow: hidden; height: 42px; padding: 0 10px; text-align: center; color: #555; line-height: 41px; font-size: 14px; letter-spacing: -1px; font-weight: bold; margin:0; } .reply_box #spinTopLayer .spinTopLayerList .commentList li { border: initial; } a:link, a:visited { text-decoration:none; color:#333; } a:hover, a:active { text-decoration:none; color:#f25632 !important; } .reply_box #spinTopLayer { width:100%; margin-bottom:40px; word-break:break-all; word-wrap:break-word; font-size:14px; line-height:140%; color:#333; font-family:"맑은 고딕","Malgun Gothic","굴림", Gulim,'돋움',dotum,Helvetica,sans-serif; text-align:left; } .reply_box #spinTopLayer * { margin:0; padding:0; } .reply_box #spinTopLayer img { border:0 none; } .reply_box #spinTopLayer ul, .reply_box #spinTopLayer ol, .reply_box #spinTopLayer dl { list-style:none; } .reply_box #spinTopLayer input, .reply_box #spinTopLayer textarea, .reply_box #spinTopLayer select { font-size:12px; color:#333; vertical-align:top; } .reply_box #spinTopLayer em { font-style:normal; } .reply_box #spinTopLayer h1 { font-size:14px; font-weight:bold; color:#333; letter-spacing:-1px; margin-bottom:10px; } /* 댓글 > 베스트 */ .reply_box #spinTopLayer .spinTopLayerBest { margin-bottom:30px; border-bottom:1px solid #eaeaea; } .reply_box #spinTopLayer .spinTopLayerBest .commentList { } .reply_box #spinTopLayer .spinTopLayerBest .commentList li { position:relative; overflow:hidden; padding:0 0 0 0; z-index:100; } .reply_box #spinTopLayer .spinTopLayerBest .commentList li .bestTitle { position:absolute; left:0; top:54px; width:47px; height:21px; background:url('https://image.donga.com/donga/images/donga_sns_reply/reply_best.png') no-repeat 0 0; text-align:center; font-weight:bold; font-size:0; color:transparent; z-index:1; } .reply_box #spinTopLayer .spinTopLayerBest .commentList li .bestTitle span { display:inline-block; width:0; height:100%; vertical-align:middle; } .reply_box #spinTopLayer .spinTopLayerBest .commentList li .profile { display:none; position:absolute; width:50px; height:50px; left:63px; top:15px; border-radius:5px; z-index:101; } .reply_box #spinTopLayer .spinTopLayerBest .commentList li .profile img { width:50px; height:50px; border-radius:4px; background:#fff; } .reply_box #spinTopLayer .spinTopLayerBest .commentList li .module { position:relative; width:100%; padding:15px 0 0 0; background:#fff; } .reply_box #spinTopLayer .spinTopLayerBest .commentList li .module .nickname { display:inline; float:left; color:#1b1b1b; font-weight:bold; padding-left:25px; line-height:140%; font-size:15px; } .reply_box #spinTopLayer .spinTopLayerBest .commentList li .module .nickname.donga { background:url('https://image.donga.com/donga/images/donga_sns_reply/reply_donga_s.png') no-repeat 0 center; } .reply_box #spinTopLayer .spinTopLayerBest .commentList li .module .nickname.facebook { background:url('https://image.donga.com/donga/images/donga_sns_reply/reply_facebook_s.png') no-repeat 0 center; } .reply_box #spinTopLayer .spinTopLayerBest .commentList li .module .nickname.twitter { background:url('https://image.donga.com/donga/images/donga_sns_reply/reply_twitter_s.png') no-repeat 0 center; } .reply_box #spinTopLayer .spinTopLayerBest .commentList li .module .nickname.kakao { background:url('https://image.donga.com/donga/images/donga_sns_reply/reply_kakaostory_s.png') no-repeat 0 center; } .reply_box #spinTopLayer .spinTopLayerBest .commentList li .module .nickname.naver { background:url('https://image.donga.com/donga/images/donga_sns_reply/reply_naver_s.png') no-repeat 0 center; } .reply_box #spinTopLayer .spinTopLayerBest .commentList li .module .nickname.apple { background:url('https://image.donga.com/donga/images/donga_sns_reply/reply_apple_s.png') no-repeat 0 center; } /* 20200609 추가 조동진 */ .reply_box #spinTopLayer .spinTopLayerBest .commentList li .module .createdate { float:left; font-size:13px; color:#898989; margin:2px 0 0 12px; padding:0; } .reply_box #spinTopLayer .spinTopLayerBest .commentList li .module .comment { clear:both; min-height:28px; padding:18px 13px 12px 60px; color:#313131; font-size:15px; line-height:140%; } .reply_box #spinTopLayer .spinTopLayerBest .commentList li .module .comment em { color:#999; } .reply_box #spinTopLayer .spinTopLayerBest .commentList li .module .operation { position:relative; width:100%; height:38px; line-height:32px; overflow:hidden; color:#666 } .reply_box #spinTopLayer .spinTopLayerBest .commentList li .module .operation .notify { float:left; padding-left:0; letter-spacing:-1px; } .reply_box #spinTopLayer .spinTopLayerBest .commentList li .module .operation .notify a { font-size:14px; color:#898989; } .reply_box #spinTopLayer .spinTopLayerBest .commentList li .module .operation .notify a b { font-weight:normal; } .reply_box #spinTopLayer .spinTopLayerBest .commentList li .module .operation .reply { float:left; padding-left:5px; font-size:14px; color:#898989; } .reply_box #spinTopLayer .spinTopLayerBest .commentList li .module .operation .reply b { font-weight:normal; } .reply_box #spinTopLayer .spinTopLayerBest .commentList li .module .operation .reply span { font-weight:bold; } .reply_box #spinTopLayer .spinTopLayerBest .commentList li .module .operation .action { float:right; margin-top:7px; height:16px; line-height:16px; font-size:11px; color:#666; font-weight:normal; } .reply_box #spinTopLayer .spinTopLayerBest .commentList li .module .operation .action .agree { float:left; overflow:hidden; height:16px; line-height:16px; margin-right:20px; background:url('https://image.donga.com/donga/images/donga_sns_reply/bg_ac_agree01.png') no-repeat 0 0; } .reply_box #spinTopLayer .spinTopLayerBest .commentList li .module .operation .action .disagree { float:left; overflow:hidden; height:16px; line-height:16px; background:url('https://image.donga.com/donga/images/donga_sns_reply/bg_ac_disagree01.png') no-repeat 0 0; } .reply_box #spinTopLayer .spinTopLayerBest .commentList li .module .operation .action a { display:inline-block; width:20px; height:16px; line-height:999px; overflow:hidden; } .reply_box #spinTopLayer .spinTopLayerBest .commentList li .module .operation .action em { display:inline-block; height:15px; line-height:15px; padding:1px 5px 0 0; vertical-align:top; color:#555; } .reply_box #spinTopLayer .spinTopLayerBest .commentList li .module .delete { position:absolute; right:13px; top:10px; display:block; z-index:9999; } .reply_box #spinTopLayer .spinTopLayerBest .commentList li .module .delete a { display:block; width:11px; height:11px; text-indent:-9999px; overflow:hidden; background:url(https://image.donga.com/donga2013/images/donga_sns_reply/btn_del.gif) no-repeat 0 0; } .reply_box #spinTopLayer .spinTopLayerBest .commentList li .module .icon_a { position:absolute; left:-5px; top:8px; display:block; width:5px; height:7px; background:url(https://image.donga.com/donga2013/images/donga_sns_reply/bg_bul_a.gif) no-repeat 0 0; } /* 댓글 > 베스트 > 댓글에 댓글 쓰기 */ .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc { display:none; background:#f8f8f8; border-top:1px solid #ccc; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyWriteBox { margin:0 0 0; padding-top:20px; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyLogin { float:left; margin:6px 0 6px 6px; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyLogin ul { float:left; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyLogin ul li { float:left; margin:0 4px 0 0; padding:0; border:0 none; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyLogin ul li .on { } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyLogin ul li div a { display:block; width:26px; height:26px; text-indent:-9999px; background:url('https://image.donga.com/donga/images/donga_sns_reply/sns_login.png') no-repeat 0 0; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyLogin ul li #spinTop_sns_donga a { background-position:0 0; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyLogin ul li #spinTop_sns_facebook a { background-position:-68px 0; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyLogin ul li #spinTop_sns_twitter a { width:26px; background-position:-102px 0; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyLogin ul li #spinTop_sns_kakao a { background-position:-136px 0; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyLogin ul li #spinTop_sns_naver a { background-position:-34px 0; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyLogin ul li #spinTop_sns_apple a { background-position:-170px 0; } /* 20200609 추가 조동진 */ .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyLogin ul li #spinTop_sns_donga.on a { background-position:0 -34px; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyLogin ul li #spinTop_sns_facebook.on a { background-position:-68px -34px; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyLogin ul li #spinTop_sns_twitter.on a { width:26px; background-position:-102px -34px; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyLogin ul li #spinTop_sns_kakao.on a { background-position:-136px -34px; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyLogin ul li #spinTop_sns_naver.on a { background-position:-34px -34px; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyLogin ul li #spinTop_sns_apple.on a { background-position:-170px -34px; } /* 20200609 추가 조동진 */ .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyLogTxt { float:left; padding-left:2px; margin:6px 0 0 0; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyLogTxt img { display:none; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyLogTxt.on img { display:inline } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyLogoutBtn { float:left; margin:6px 0 0 0; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyLogoutBtn a { display:block; width:65px; height:24px; text-indent:-9999px; background:url(https://image.donga.com/donga2013/images/donga_sns_reply/btn_logout.gif) no-repeat 0 0; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyWrite { position:relative; clear:both; padding:0 120px 0 22px; background:#f8f8f8; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyWrite textarea { width:100%; resize:none; border:1px solid #dedede; height:77px; margin:0 0 0 0; padding:5px 5px 5px 5px; color:#313131; font-size:14px; line-height:18px; overflow:auto; ime-mode:active; font-family:"맑은 고딕","Malgun Gothic","돋움", Dotum; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyWrite input { cursor:pointer; position:absolute; top:0; right:22px; display:inline-block; color:transparent; background:url('https://image.donga.com/donga/images/donga_sns_reply/btn_reply_submit02.gif') no-repeat 0 0; width:91px; height:89px; padding:0; border:0 none; text-indent:-9999px; line-height:999px; overflow:hidden; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyWrite .contextsize { position:absolute; left:10px; bottom:7px; color:#aaa; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyList { background:#fafafa; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyList .commentList { padding:0; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyList .commentList li { margin:0; padding:20px 22px 17px 26px; border-top:1px solid #ebebeb; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyList .commentList li .profile { display:none; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyList .commentList li .module { position:relative; float:left; width:100%; padding:0; border:0 none; background:#fafafa; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyList .commentList li:first-child { border-top:0; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyList .commentList li .module .comment { padding:15px 0 0 0; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyList .commentList li .module .nickname { float:left; color:#1b1b1b; font-weight:bold; padding-left:25px; line-height:140%; font-size:15px; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyList .commentList li .module .nickname.donga { background:url('https://image.donga.com/donga/images/donga_sns_reply/reply_donga_s.png') no-repeat 0 center; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyList .commentList li .module .nickname.facebook { background:url('https://image.donga.com/donga/images/donga_sns_reply/reply_facebook_s.png') no-repeat 0 center; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyList .commentList li .module .nickname.twitter { background:url('https://image.donga.com/donga/images/donga_sns_reply/reply_twitter_s.png') no-repeat 0 center; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyList .commentList li .module .nickname.kakao { background:url('https://image.donga.com/donga/images/donga_sns_reply/reply_kakaostory_s.png') no-repeat 0 center; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyList .commentList li .module .nickname.naver { background:url('https://image.donga.com/donga/images/donga_sns_reply/reply_naver_s.png') no-repeat 0 center; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyList .commentList li .module .nickname.apple { background:url('https://image.donga.com/donga/images/donga_sns_reply/reply_apple_s.png') no-repeat 0 center; } /* 20200609 추가 조동진 */ .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc a.btn_close { display:block; height:49px; text-align:center; color:#908f8f; font-size:14px; line-height:49px; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc a.btn_close .icon_close { display:inline-block; width:10px; height:5px; margin:0 0 5px 7px; background:url('https://image.donga.com/donga/images/donga_sns_reply/reply_etc_close.png') no-repeat 0 0; } .reply_box #spinTopLayer .spinTopLayerBest .commentList .etc .spinTopLayerReplyList .commentList li .operation { display:block; } /* 댓글 > 글쓰기 */ .reply_box #spinTopLayer .spinTopLayerWriteBox { position:relative; padding:0; margin-bottom:12px; background:#fff; } /* 댓글 > 글쓰기 > 로그인 */ .reply_box #spinTopLayer .spinTopLayerLogin { float:left; margin-bottom:10px; } .reply_box #spinTopLayer .spinTopLayerLogin ul { float:left; } .reply_box #spinTopLayer .spinTopLayerLogin ul li { float:left; margin:0 8px 0 0; } .reply_box #spinTopLayer .spinTopLayerLogin ul li .on { } .reply_box #spinTopLayer .spinTopLayerLogin ul li div a { display:block; width:26px; height:26px; overflow:hidden; text-indent:-9999px; background:url('https://image.donga.com/donga/images/donga_sns_reply/sns_login.png') no-repeat 0 0; } .reply_box #spinTopLayer .spinTopLayerLogin ul li #spinTop_sns_donga a { background-position:0 0; } .reply_box #spinTopLayer .spinTopLayerLogin ul li #spinTop_sns_facebook a { background-position:-68px 0; } .reply_box #spinTopLayer .spinTopLayerLogin ul li #spinTop_sns_twitter a { width:26px; background-position:-102px 0; } .reply_box #spinTopLayer .spinTopLayerLogin ul li #spinTop_sns_kakao a { background-position:-136px 0; } .reply_box #spinTopLayer .spinTopLayerLogin ul li #spinTop_sns_naver a { background-position:-34px 0; } .reply_box #spinTopLayer .spinTopLayerLogin ul li #spinTop_sns_apple a { background-position:-170px 0; } /* 20200609 추가 조동진 */ .reply_box #spinTopLayer .spinTopLayerLogin ul li #spinTop_sns_donga.on a { background-position:0 -34px; } .reply_box #spinTopLayer .spinTopLayerLogin ul li #spinTop_sns_facebook.on a { background-position:-68px -34px; } .reply_box #spinTopLayer .spinTopLayerLogin ul li #spinTop_sns_twitter.on a { width:26px; background-position:-102px -34px; } .reply_box #spinTopLayer .spinTopLayerLogin ul li #spinTop_sns_kakao.on a { background-position:-136px -34px; } .reply_box #spinTopLayer .spinTopLayerLogin ul li #spinTop_sns_naver.on a { background-position:-34px -34px; } .reply_box #spinTopLayer .spinTopLayerLogin ul li #spinTop_sns_apple.on a { background-position:-170px -34px; } /* 20200609 추가 조동진 */ /* 댓글 > 글쓰기 > 문구 */ .reply_box #spinTopLayer .spinTopLayerLogTxt { float:left; padding-left:2px; } .reply_box #spinTopLayer .spinTopLayerLogTxt img { display:none; } .reply_box #spinTopLayer .spinTopLayerLogTxt.on img { display:inline; } /* 댓글 > 글쓰기 > 로그아웃 버튼 */ .reply_box #spinTopLayer .spinTopLayerLogoutBtn { float:left; } .reply_box #spinTopLayer .spinTopLayerLogoutBtn a { float:left; display:block; overflow:hidden; width:auto; font-size:11px; font-weight:bold; color:#555; border:1px solid #bbb; border-radius:3px; height:22px; line-height:22px; text-indent:0; padding:0 10px; letter-spacing:-1px; background: #ffffff; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlYmViZWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #ffffff 0%, #ebebeb 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ebebeb)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#ebebeb 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#ebebeb 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#ebebeb 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%,#ebebeb 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebebeb',GradientType=0 ); /* IE6-8 */ } .reply_box #spinTopLayer .spinTopLayerLogoutBtn div { display:none; position:absolute; right:0; top:0; } .reply_box #spinTopLayer .reply_box #spinTopLayerLogoutBtn.spinTopLayerLogoutBtn div { display:block; } .reply_box #spinTopLayer .reply_box #spinTopLayerLogoutBtn_1.spinTopLayerLogoutBtn div { display:block; } .reply_box #spinTopLayer .reply_box #spinTopLayerLogoutBtn_2.spinTopLayerLogoutBtn div { display:block; } .reply_box #spinTopLayer .reply_box #spinTopLayerLogoutBtn_3.spinTopLayerLogoutBtn div { display:block; } .reply_box #spinTopLayer .reply_box #spinTopLayerLogoutBtn_4.spinTopLayerLogoutBtn div { display:block; } .reply_box #spinTopLayer .reply_box #spinTopLayerLogoutBtn_5.spinTopLayerLogoutBtn div { display:block; } .reply_box #spinTopLayer .reply_box #spinTopLayerLogoutBtn_6.spinTopLayerLogoutBtn div { display:block; } .reply_box #spinTopLayer .spinTopLayerLogoutBtn div a { display:block; overflow:hidden; width:auto; font-size:11px; font-weight:bold; color:#555; border:1px solid #bbb; border-radius:3px; height:22px; line-height:22px; text-indent:0; padding:0 10px; letter-spacing:-1px; } .reply_box #spinTopLayer .spinTopLayerAct { float:left; height:24px; line-height:24px; padding-left:3px; } .reply_box #spinTopLayer .spinTopLayerAct .spinTopLayerActLogIn { } .reply_box #spinTopLayer .spinTopLayerAct .spinTopLayerActLogIn.on { } .reply_box #spinTopLayer .spinTopLayerAct .spinTopLayerActLogOut { } .reply_box #spinTopLayer .spinTopLayerAct .spinTopLayerActMyList { display:none; } /* 댓글 > 글쓰기 > sns 내보내기 체크 */ .reply_box #spinTopLayer .spinTopLayerSnsCheck { float:right; padding:5px 100px 0 0; } .reply_box #spinTopLayer .spinTopLayerSnsCheck ul li { display:none; float:left; margin:0 4px 0 0; } .reply_box #spinTopLayer .spinTopLayerSnsCheck ul li input { vertical-align:middle; position:relative; top:-1px; margin-right:2px; } .reply_box #spinTopLayer .spinTopLayerSnsCheck ul li label { font-size:11px; color:#888; letter-spacing:-1px; } .reply_box #spinTopLayer .spinTopLayerSnsCheck ul li.on { display:block; } /* 댓글 > 글쓰기 > 댓글입력 */ .reply_box #spinTopLayer .spinTopLayerWrite { position:relative; clear:both; margin-bottom:17px; padding-right:170px; } .reply_box #spinTopLayer .spinTopLayerWrite textarea { width:100%; resize:none; border:1px solid #c7c5c5; font-family:"맑은 고딕","Malgun Gothic","돋움", Dotum; height:100px; margin:0; padding:17px 60px 17px 18px; font-size:14px; color:#313131; line-height:19px; overflow:auto; ime-mode:active; } .reply_box #spinTopLayer .spinTopLayerWrite .spinTopLayerWriteButton { cursor:pointer; position:absolute; right:0; top:0; display:inline-block; color:transparent; background:url('https://image.donga.com/donga/images/donga_sns_reply/btn_reply_submit.gif') no-repeat 0 0; width:91px; height:136px; padding:0; border:0 none; text-indent:-9999px; line-height:999px; overflow:hidden; } .reply_box #spinTopLayer .spinTopLayerWrite .contextsize { position:absolute; right:110px; top:8px; color:#888; font-size:14px; } .reply_box #spinTopLayer .spinTopLayerWrite .contextsize strong { color:#888; } /* 댓글 > 리스트 탭메뉴 */ .reply_box #spinTopLayer .spinTopLayerList .spinTopLayerListTab { height:42px; border:0; background:#fff; margin:0 } .reply_box #spinTopLayer .spinTopLayerList .spinTopLayerListcount { display:none; float:left; font-size:15px; color:#191919; line-height:41px; padding-left:15px; } .reply_box #spinTopLayer .spinTopLayerList .spinTopLayerListcount strong { font-size:15px; font-weight:bold; color:#ee0000; } .reply_box #spinTopLayer .spinTopLayerList .spinTopLayerListSort { float:right; width: initial; padding: 0; } .reply_box #spinTopLayer .spinTopLayerList .spinTopLayerListSort a { position:relative; float:left; display:block; overflow:hidden; height:42px; padding:0 10px; text-align:center; color:#555; line-height:41px; font-size:14px; letter-spacing:-1px; font-weight:bold; } .reply_box #spinTopLayer .spinTopLayerList .spinTopLayerListSort a:after { content:''; display:block; position:absolute; width:1px; height:10px; top:15px; right:0px; background:#aaa; } .reply_box #spinTopLayer .spinTopLayerList .spinTopLayerListSort a:last-child:after { display:none; } .reply_box #spinTopLayer .spinTopLayerList .spinTopLayerListSort a span { position:absolute; left:-9999px; visibility:hidden; z-index:-1; } .reply_box #spinTopLayer .spinTopLayerList .spinTopLayerListSort a:hover, .reply_box #spinTopLayer .spinTopLayerListSort a.on { height:43px; font-weight:bold; letter-spacing:-1px; background:#fff; color:#7276c9 !important; } .reply_box #spinTopLayer .spinTopLayerList .spinTopLayerListSort a:last-child:hover, .reply_box #spinTopLayer .spinTopLayerListSort a:last-child.on { } /* 댓글 > 리스트 */ .reply_box #spinTopLayer .spinTopLayerList .commentList { clear:both; } .reply_box #spinTopLayer .spinTopLayerList .commentList li { position:relative; overflow:hidden; padding:0 2px 0 0; z-index:100; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .profile { display:none; position:absolute; width:50px; height:50px; left:0; top:0; z-index:101; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .profile img { width:50px; height:50px; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .module { position:relative; width:100%; padding:22px 0 0 0; border:0; border-bottom:1px solid #eaeaea; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .nickname { float:left; color:#1b1b1b; font-weight:bold; height:19px; padding-left:25px; font-size:15px; line-height:140%; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .nickname.donga { color:#1b1b1b; background: url('https://image.donga.com/donga/images/donga_sns_reply/reply_donga_s.png') no-repeat 0 center; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .nickname.donga a { color:#1b1b1b; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .nickname.facebook { color:#1b1b1b; background:url('https://image.donga.com/donga/images/donga_sns_reply/reply_facebook_s.png') no-repeat 0 center; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .nickname.facebook a { color:#1b1b1b; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .nickname.twitter { color:#1b1b1b; background:url('https://image.donga.com/donga/images/donga_sns_reply/reply_twitter_s.png') no-repeat 0 center; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .nickname.twitter a { color:#1b1b1b; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .nickname.kakao { color:#1b1b1b; background:url('https://image.donga.com/donga/images/donga_sns_reply/reply_kakaostory_s.png') no-repeat 0 center; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .nickname.kakao a { color:#1b1b1b; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .nickname.naver { color:#1b1b1b; background:url('https://image.donga.com/donga/images/donga_sns_reply/reply_naver_s.png') no-repeat 0 center; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .nickname.naver a { color:#1b1b1b; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .nickname.apple { color:#1b1b1b; background:url('https://image.donga.com/donga/images/donga_sns_reply/reply_apple_s.png') no-repeat 0 center; } /* 20200609 추가 조동진 */ .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .nickname.apple a { color:#1b1b1b; } /* 20200609 추가 조동진 */ .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .createdate { float:left; font-size:13px; color:#898989; margin:2px 0 0 12px; padding:0; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .comment { clear:both; padding:18px 0 30px 0; font-size:15px; color:#313131; line-height:140%; letter-spacing:-0.5px; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .comment em { color:#999; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .operation { position:relative; width:100%; height:38px; line-height:32px; overflow:hidden; color:#666 } .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .operation .notify { float:left; padding-left:0; letter-spacing:-1px; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .operation .notify a { font-size:14px; color:#898989; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .operation .notify a b { font-weight:normal; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .operation .reply { float:left; padding-left:5px; font-size:14px; color:#898989; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .operation .reply b { font-weight:normal; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .operation .reply span { font-weight:bold; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .operation .action { float:right; margin-top:7px; height:16px; line-height:16px; font-size:11px; color:#666; font-weight:normal; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .operation .action .agree { float:left; overflow:hidden; height:14px; padding:0; line-height:14px; margin-right:20px; background:url('https://image.donga.com/donga/images/donga_sns_reply/bg_ac_agree01.png') no-repeat 0 0; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .operation .action .disagree { float:left; overflow:hidden; height:14px; padding:0; line-height:14px; margin-right:0; background:url('https://image.donga.com/donga/images/donga_sns_reply/bg_ac_disagree01.png') no-repeat 0 0; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .operation .action a { display:inline-block; width:20px; height:16px; line-height:999px; overflow:hidden; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .operation .action em { display:inline-block; height:15px; line-height:15px; padding:1px 5px 0 0; vertical-align:top; font-size:12px; color:#555; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .delete { position:absolute; right:13px; top:10px; display:block; z-index:9999; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .delete a { display:block; width:11px; height:11px; text-indent:-9999px; overflow:hidden; background:url(https://image.donga.com/donga2013/images/donga_sns_reply/btn_del.gif) no-repeat 0 0; } .reply_box #spinTopLayer .spinTopLayerList .commentList li .module .icon_a { position:absolute; left:-5px; top:8px; display:block; width:5px; height:7px; background:url(https://image.donga.com/donga2013/images/donga_sns_reply/bg_bul_a.gif) no-repeat 0 0; } /* 댓글 > 리스트 > 댓글에 댓글 쓰기 */ .reply_box #spinTopLayer .spinTopLayerList .commentList .etc { display:none; background:#f8f8f8; border-top:1px solid #eaeaea; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyWriteBox { background:#fafafa; padding-top:20px; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyLogin { float:left; margin:6px 0 6px 6px; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyLogin ul { float:left; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyLogin ul li { float:left; margin:0 4px 0 0; padding:0; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyLogin ul li .on { } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyLogin ul li div a { display:block; width:26px; height:26px; overflow:hidden; text-indent:-9999px; background:url('https://image.donga.com/donga/images/donga_sns_reply/sns_login.png') no-repeat 0 0; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyLogin ul li #spinTop_sns_donga a { background-position:0 0; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyLogin ul li #spinTop_sns_facebook a { background-position:-68px 0; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyLogin ul li #spinTop_sns_twitter a { width:26px; background-position:-102px 0; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyLogin ul li #spinTop_sns_kakao a { background-position:-136px 0; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyLogin ul li #spinTop_sns_naver a { background-position:-34px 0; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyLogin ul li #spinTop_sns_apple a { background-position:-170px 0; } /* 20200609 추가 조동진 */ .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyLogin ul li #spinTop_sns_donga.on a { background-position:0 -34px; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyLogin ul li #spinTop_sns_facebook.on a { background-position:-68px -34px; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyLogin ul li #spinTop_sns_twitter.on a { width:26px; background-position:-102px -34px; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyLogin ul li #spinTop_sns_kakao.on a { background-position:-136px -34px; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyLogin ul li #spinTop_sns_naver.on a { background-position:-34px -34px; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyLogin ul li #spinTop_sns_apple.on a { background-position:-170px -34px; } /* 20200609 추가 조동진 */ .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyLogTxt { float:left; padding-left:2px; margin:6px 0 0 0; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyLogTxt img { display:none; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyLogTxt.on img { display:inline } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyLogoutBtn { float:left; margin:6px 0 0 0; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyLogoutBtn a { display:block; width:65px; height:24px; text-indent:-9999px; background:url(https://image.donga.com/donga2013/images/donga_sns_reply/btn_logout.gif) no-repeat 0 0; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyWrite { position:relative; clear:both; padding:0 120px 0 22px; background:#f8f8f8; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyWrite textarea { width:100%; resize:none; border:1px solid #dedede; height:77px; margin:0 0 0 0; padding:5px 5px 5px 5px; color:#313131; font-size:14px; line-height:18px; overflow:auto; ime-mode:active; font-family:"맑은 고딕","Malgun Gothic","돋움", Dotum; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyWrite input { cursor:pointer; position:absolute; top:0; right:22px; display:inline-block; color:transparent; background:url('https://image.donga.com/donga/images/donga_sns_reply/btn_reply_submit02.gif') no-repeat 0 0; width:91px; height:89px; padding:0; border:0 none; text-indent:-9999px; line-height:999px; overflow:hidden; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyWrite .contextsize { position:absolute; left:10px; bottom:7px; color:#aaa; } /* 댓글 > 리스트 > 댓글에 댓글 리스트 */ .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyList { background:#f8f8f8; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyList .commentList { padding:0; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyList .commentList li { margin:0; padding:20px 22px 17px 26px; border-top:1px solid #ebebeb; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyList .commentList li .profile { display:none; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyList .commentList li .module { position:relative; float:left; width:100%; padding:0; border:0 none; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyList .commentList li:first-child { border-top:0; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyList .commentList li .module .nickname { float:left; color:#1b1b1b; font-size:15px; font-weight:bold; padding-left:25px; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyList .commentList li .module .nickname.donga { background:url('https://image.donga.com/donga/images/donga_sns_reply/reply_donga_s.png') no-repeat 0 center; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyList .commentList li .module .nickname.facebook { background:url('https://image.donga.com/donga/images/donga_sns_reply/reply_facebook_s.png') no-repeat 0 center; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyList .commentList li .module .nickname.twitter { background:url('https://image.donga.com/donga/images/donga_sns_reply/reply_twitter_s.png') no-repeat 0 center; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyList .commentList li .module .nickname.kakao { background:url('https://image.donga.com/donga/images/donga_sns_reply/reply_kakaostory_s.png') no-repeat 0 center; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyList .commentList li .module .nickname.naver { background:url('https://image.donga.com/donga/images/donga_sns_reply/reply_naver_s.png') no-repeat 0 center; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyList .commentList li .module .nickname.apple { background:url('https://image.donga.com/donga/images/donga_sns_reply/reply_apple_s.png') no-repeat 0 center; } /* 20200609 추가 조동진 */ .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyList .commentList li .module .createdate { float:left; font-size:13px; color:#898989; margin-left:10px; padding-left:10px; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyList .commentList li .module .action { position:absolute; right:1px; top:1px; width:11px; height:11px; display:block; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyList .commentList li .module .action .delete { position:relative; top:0; right:0; display:block; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyList .commentList li .module .action .delete a { display:block; width:11px; height:11px; text-indent:-9999px; overflow:hidden; background:url(https://image.donga.com/donga2013/images/donga_sns_reply/btn_del.gif) no-repeat 0 0; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyList .commentList li .module .comment { clear:both; padding:15px 0 0 0; margin-bottom:25px; color:#222; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyList .commentList li .module .comment em { color:#999; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc .spinTopLayerReplyList .commentList li .operation { height:30px; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc a { display:block; height:49px; text-align:center; color:#908f8f; font-size:14px; line-height:49px; } .reply_box #spinTopLayer .spinTopLayerList .commentList .etc a .icon_close { display:inline-block; width:10px; height:5px; margin:0 0 5px 7px; background:url('https://image.donga.com/donga/images/donga_sns_reply/reply_etc_close.png') no-repeat 0 0; } /* 댓글 > 리스트 > 더보기 */ .reply_box #spinTopLayer .more { position:relative; height:43px; background:#fff; border:0; border-bottom:1px solid #eaeaea; } .reply_box #spinTopLayer .more a { display:block; font-size:14px; color:#191919; text-align:center; line-height:42px; font-family:"맑은 고딕","Malgun Gothic"; } .reply_box #spinTopLayer .more a .icon_more { display:inline-block; width:10px; height:5px; margin-left:8px; background:url('https://image.donga.com/donga/images/donga_sns_reply/reply_list_more.png') no-repeat 0 center; vertical-align:middle; } .reply_box #spinTopLayer .more .page_num { position:absolute; display:none; right:20px; top:16px; font-size:12px; color:#6c6c70; letter-spacing:-1px; font-family:"Verdana"; } .reply_box #spinTopLayer .more .page_num em { color:#de2929; } #header.dark .header_cont { height:70px; } #header.dark .header_cont .btn_donga { top:29px; left:27px; } #header .header_cont .btn_original { top:25px; left:129px; } #header .header_cont .btn_donga img { width:90px; height:17px; } #header .header_cont .btn_original img { width:152px; } #header .header_cont .share_sns { top:18px; right:42px; } #header .header_cont .share_sns .btn_share { margin-right:35px; } #header .header_cont .share_sns .btn_share img { width:34px; height:34px; } #header .header_cont .share_sns .btn_reply img { width:34px; height:34px; } #byline { padding: 60px 0 55px; } #byline .make_list { width: 750px; margin: 0 auto; padding: initial; } #byline .make_list li { margin-bottom:13px; font-size:16px; } #byline .make_list li .bold { font-size:16px; } } @media all and (max-width: 1080px) { #footer { display:block; } #original { display:block; } #footer-pc { display:none; } #original-pc { display:none; } } @media all and (min-width: 1080px) { #footer { display:none; } #original { display:none; } #footer-pc { display:block; } #original-pc { display:block; } } /* 상단 챕터제목 공통 */ @font-face { font-family: "PyeongChangPeace-Bold"; src: url(https://image.donga.com/policy/original/jameswebb/dist/images/common/PyeongChangPeace-Bold.ttf) format("truetype"); } .chapterContainer { position: relative; margin: 0 auto; margin-bottom: 5rem; width: 100%; padding: 0.5rem; overflow-x: hidden; box-sizing: border-box; background: center / cover no-repeat url("https://image.donga.com/policy/original/jameswebb/dist/images/common/bg_chapter.png"); } .chapterContainer .chapterWrapper .gradation { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg,rgba(255, 255, 255, 0.2) 0%,rgba(255, 255, 255, 0) 100%); opacity: 0.7; transform: rotate(180deg); } .chapterContainer .chapterWrapper { margin: 0 auto; margin-top: 4rem; margin-bottom: 2.5rem; width: 50%; text-align: left; } .chapterContainer .chapterWrapper .chapterSubtitle { letter-spacing: 0.6rem; line-height: 1.5rem; font-size: 1rem; color:#eeeeee; } .chapterContainer .chapterWrapper .chapterTitle { margin: 1rem 0; line-height: 8rem; font-size: 6rem; font-display: swap; font-weight: bold; font-family: "PyeongChangPeace-Bold", "Noto Sans KR", sans-serif; color:#ffffff; word-break: keep-all; } figcaption { opacity: 0.4; margin-top: 8px; text-align: center; } /* 챕터 리스트 */ .chapter-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-items: center; margin-top: 300px; } .chapter-list .background { position: relative; } .chapter-list .fixed { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; opacity: 0; overflow-x: hidden; pointer-events: none; } .chapter-list .nav { display: flex; justify-content: space-between; align-items: center; width:760px; color:#ffffff; padding-bottom: 30px; } .chapter-list .nav .other { font-size: 20px; font-weight:900; } .chapter-list .nav .home { cursor: pointer; font-size: 12px; font-weight: 400px; display:flex; align-items: center; opacity: 0.8; transition: all 0.5s; border-bottom: 1px solid#ffffff; } .chapter-list .nav .home:hover { opacity: 1; } .chapter-list .chapter-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 760px; margin: 0 auto; margin-bottom: 100px; cursor: pointer; background-color:#111111; color:#ffffff; z-index:5; } .chapter-list .chapter-box:hover .title, .chapter-list .chapter-box:hover .desc { -webkit-transform: translateX(-10px); transform: translateX(-10px); } .chapter-list .chapter-box:hover .title-area .question { color: #00ffff; } .chapter-list .chapter-box:hover .img-area img { -webkit-filter: brightness(50%); filter: brightness(50%); } .chapter-list .chapter-box:hover .img-area p { -webkit-transform: translateX(10px); transform: translateX(10px); } .chapter-list .chapter-box .title-area { width: 50%; -webkit-transition: all 0.5s; transition: all 0.5s; padding-left: 45px; } .chapter-list .chapter-box .title-area .title .sub-title { font-weight: 300; font-size: 14px; line-height: 30px; letter-spacing: 0.2em; } .chapter-list .chapter-box .title-area .title { transition: all 0.5s; } .chapter-list .chapter-box .title-area .title .question { font-family: "PyeongChangPeace-Bold"; font-size: 36px; line-height: 53.28px; width: 70%; -webkit-transition: all 0.5s; transition: all 0.5s; word-break: keep-all; } .chapter-list .chapter-box .title-area .desc { font-weight: 400; font-size: 14px; line-height: 28px; transition: all 0.5s; } .chapter-list .chapter-box .img-area { position: relative; } .chapter-list .chapter-box .img-area img { display: block; width: 416px; height: 370px; -o-object-fit: cover; object-fit: cover; -webkit-transition: all 0.5s; transition: all 0.5s; } .chapter-list .chapter-box .img-area p { font-weight: 500; font-size: 12px; line-height: 17px; position: absolute; bottom: 15px; right: 15px; -webkit-transition: all 0.5s; transition: all 0.5s; text-shadow: 0 0 2px black; } .chapter-list .chapter-box .img-area p:after { content: url("https://image.donga.com/policy/original/jameswebb/dist/images/common/icon_warr.png"); padding-left: 5px; } /* 별별 질문 */ .bb-qs { width: 600px; margin: 100px auto; color:#ffffff; } .bb-qs .title { border-bottom: 3px solid#ffffff; } .bb-qs .title p { font-size: 36px; font-weight: 900; line-height: 80px; } .bb-qs .q-list .q-box { height: 62px; overflow: hidden; -webkit-transition: height 0.5s; transition: height 0.5s; border-bottom: 1px solid#ffffff; transition: all 0.3s; } .bb-qs .q-list .q-box:hover { background-color:#ffffff2d; } .bb-qs .q-list .q-box.active { height: 160px; -webkit-transition: all 0.5s; transition: all 0.5s; background-color:#ffffff2d; } .bb-qs .q-list .q-box.active#q3 { height: 220px; } .bb-qs .q-list .q-box.active .plus-btn { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .bb-qs .q-list .q-box .q-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 22px 10px; cursor: pointer; } .bb-qs .q-list .q-box .q-title .question { font-weight: 700; font-size: 16px; line-height: 20px; } .bb-qs .q-list .q-box .q-title .plus-btn { -webkit-transition: all 0.5s; transition: all 0.5s; } .bb-qs .q-list .q-box .answer { font-size: 15px; font-weight: 300; line-height: 22px; padding: 10px 20px; } .methodology { width:600px; margin: 100px auto; color:#ffffff; } .methodology .title { font-size: 1.1rem; font-weight: 600; padding-bottom:0.2rem; } .methodology .text p { font-size: 0.9rem; line-height: 1.55rem; } .methodology .text a { text-decoration: underline; color: #ffffff;} /* 동아사이언스 링크 */ .dongascience{width:100%;margin:0 auto; padding-top:10px;} .dongascience a{color: #ffffff !important; text-decoration: underline !important;} .dongascience p{font-size:0.9rem;color: #ffffff; } @media all and (max-width: 900px) { .chapter-list .chapter-box { width:70%; height: 200px; flex-direction: column; position: relative; margin-bottom:70px; } .chapter-list .chapter-box .title-area { width:101%; height:101%; position:absolute; top:0; box-sizing: border-box; background-color:#0000009a; z-index:5; padding: 5vw; } .chapter-list .chapter-box .title-area .title .sub-title { font-size:12px; } .chapter-list .chapter-box .title-area .title .question { font-size:22px; line-height:40px; width:100%; } .chapter-list .chapter-box .img-area { width:100%; height:100%; } .chapter-list .chapter-box .img-area img { width:100%; height:100%; display:block; } .chapter-list .chapter-box .img-area p { z-index: 10; } .chapter-list .nav { width:70%; } .bb-qs { width:80%; } .bb-qs .title { font-size: 16px; line-height:60px; } .bb-qs .q-list .q-box { height: 50px; } .bb-qs .q-list .q-box .q-title { padding: 14px 10px; } .bb-qs .q-list .q-box .q-title .question { font-size: 15px; line-height:20px; } .bb-qs .q-list .q-box .q-title .plus-btn { transition: initial; } .bb-qs .q-list .q-box .answer { font-size:14px; line-height:20px; padding: 20px 10px; } .bb-qs .q-list .q-box.active { height: auto; } .bb-qs .q-list .q-box.active#q3 { height: auto; } .methodology { width:80%; } } @media (max-width: 1600px) { .chapterContainer .chapterWrapper { width: 60%; } } @media (max-width: 1280px) { .chapterContainer .chapterWrapper { width: 70%; } } @media (max-width: 720px) { .chapterContainer .chapterWrapper { margin-top: 2.75rem; margin-bottom: 4rem; width: 80%; } .bb-qs .title p { font-size: 27px; line-height: 65px; } } @media (max-width: 480px) { .chapterContainer .chapterWrapper { margin-top: 2rem; margin-bottom: 2.5rem; width: 95%; } .chapterContainer .chapterWrapper .chapterTitle { font-size: 3rem; line-height: 5rem; word-break: keep-all; } .chapter-list .chapter-box { margin-bottom:50px; } .chapter-list .nav { flex-direction: column; align-items: flex-start; } .chapter-list .nav .other { padding-bottom: 5px; } }