.top_main { margin-top: 4.0rem; padding-bottom: 1.5rem; border-bottom: 1px solid #111; } .top_main .headline_title { font-size: 2.4rem; line-height: 3.0rem; margin-bottom: 1.5rem; } .curr_day_wrap strong{ display: block; margin-bottom: 0.7rem; } .curr_day_wrap .curr_day:last-child{ padding-left: 1rem; } .curr_day_wrap .curr_day:last-child::before{ content: ''; display: inline-block; width: 1px; height: 1rem; background: #dfdfdf; margin-right: 1rem; } .share_area{ margin-top: 1.3rem; display: flex; justify-content: space-between; } .share_area .sns_list{ display: flex; gap: 0.4rem; } .share_area .font_box{ display: flex; gap: 0.4rem; } .share_area button{ display: block; width: 4rem; height: 4rem; background: url(../img/icon/icon_sns.png) no-repeat; background-size: 100%; } .share_area .sns_item .ic_facebook{ background-position: 0px 0px; } .share_area .sns_item .ic_twitter{ background: url(../img/icon/ic_twitter.png) no-repeat; background-size: 100%; } .share_area .sns_item .ic_url{ background-position: 0px -80px;} .font_box .font_box{ display: flex; gap: 0.4rem } .font_box .font_plus{ background-position: 0px -120px;} .font_box .font_minus{ background-position: 0px -160px;} .v_con{ margin-top: 5.0rem; line-height: 2.5rem; font-size: 1.6rem; } .v_con figure{width: 100%!important;} .v_con .photoBox2019{ display: flex; width: 100%; width: calc(100% + 4rem); margin-left: -2rem; margin-bottom: 3rem; } .v_con .ib_left{justify-content: flex-start;} .v_con .ib_center{justify-content: center;} .v_con .ib_right{justify-content: flex-end;} .v_con .photoBox2019 img{width: 100%; height: auto;} .v_con .photoBox2019 .photo_img{position: relative;} .v_con .photoBox2019 .expansion_btn{ position: absolute; right: 0; bottom: 0; width: 4rem; height: 4rem; background: url(../img/icon/ic_expansion.png) 50% 50% / 4rem no-repeat; z-index: 9; cursor: pointer; } .v_con .photoBox2019 .p_caption{ font-size: 1.4rem; color: #999999; padding: 0 2.0rem; line-height: 2.0rem; margin-top: 1.0rem; } .v_con .photoBox2019 .expansion_btn{ } .v_con .byline_date{ display: flex; align-items: center; gap: 1.6rem; margin: 3.0rem 0; } .v_con .byline_date .photo{ width: 7rem; height: 7rem; border-radius: 50%; box-sizing: border-box; border: 1px solid #eee; overflow: hidden; margin-right: 1.5rem; } .byline_date .photo img{ width: 100%; } .byline_date .byline_area{flex: 1;} .byline_date .byline_area .byline{ font-size: 1.6rem; font-weight: 500; } .byline_date .byline_area .email{ font-size: 1.5rem; font-weight: 400; color: #0098fe; text-decoration: underline; text-underline-offset: 2px; margin-top: 0.2rem; display: block; } .v_con .copy{ font-size: 1.4rem; color: #555555; line-height: 2.0rem; } .sc_Related{margin-top: 4rem;} .sc_Related .title a::after{display: none;} .sc_Related .con_list .con_item a{ gap: 1.4rem; } .sc_Related .img_box{ width: 10.7rem; height: 7.6rem; } .sc_Related .con_title{ font-size: 1.5rem; line-height: 1.9rem; flex: 1; } .sc_Related .con_list .con_item+.con_item{margin-top: 1.9rem;} .m_art_ad_03 { margin: 40px 0; } .m_art_ad_03 .ad_box { width: 100%; margin: 0 auto; text-align: center; height: 100%; } .m_art_ad_03 .ad_box a{ display: block; width: 100%; height: 15rem; } .m_art_ad_03 .ad_box img{ width: 100%; height: 100%; } .content .common_inner::before { content: ''; display: block; width: 100%; height: 1px; position: relative; top: 0; background: #333333; } .component.comment_wrap{padding: 0 1.5rem; position: relative; margin-top: 30px; } .component.comment_wrap::before {content: '';display: block;width: 100%;height: 1px;position: relative;top: 0;background: #333333;} .component.comment_wrap::after {content: '';display: block;width: 5rem;height: 0.4rem;background: #005bac;position: absolute;top: 0;right: 1.5rem; } .comment_wrap .total_number{display: block; width: 100%; height: 3.5rem; font-size: 1.8rem; font-weight: 500; letter-spacing: -1px; border-bottom: 1px solid #111; box-sizing: border-box; margin-top: 40px; } .comment_wrap .total_number em{display: inline-block; font-size: 1.8rem; font-weight: 500;} .comment_form{padding-bottom: 6rem;box-sizing: border-box;} .comment_form .user_info{position: relative; display: flex; align-items: center; padding-top: 2rem; } .comment_form .user_info .user_name{display: block; box-sizing: border-box; align-items: center;flex-shrink: 0;} .comment_form .user_info .user_name i { display: inline-block; vertical-align: middle; width: 30px; height: 30px; border-radius: 50%; background: #4fa9b5 url(../img/icon_ajp.png) no-repeat; background-size: 100% auto; overflow: hidden; text-indent: -9999px; margin-right: 5px;; box-sizing: border-box; } .comment_form .user_info .user_name i.google { background: #fff url(../img/icon_sns_google.png) center no-repeat; background-size: 55% auto; border: 1px solid #ccc; } .comment_form .user_info .user_name i.kakao { background: #fee500 url(../img/icon_sns_kakao.png) center no-repeat; background-size: 55% auto; } .comment_form .user_info .user_name i.naver { background: #06be34 url(../img/icon_sns_naver.png) center no-repeat; background-size: 55% auto; } .comment_form .user_info .btn_delete_comment {display:inline-block;*display:inline; box-sizing: border-box; border:1px solid #f2f2f2; padding: 0 6px 0; position: absolute; right: 0px; top: 20px; } .comment_form .user_info .btn_delete_comment::after {display: inline-block;content: "\00d7"; font-size:15pt; color: #a4a4a4; font-weight: 300; line-height: 16px; } .comment_form .user_info .date{display: block; width: 100%; font-size: 1.4rem; color:#999;} .comment_form .user_info .date::before { content: ""; float: left; width: 1px; height: 10px; background-color: #afafaf; margin:3px 10px 0 10px; } .comment_form .user_info .comment_btn_del{position: absolute; right: 1rem; top: 3rem; width: 9rem; height: 3.5rem; border: 1px solid #ddd; border-radius: 3px;} .comment_form .user_info .comment_btn_del span{display: block; line-height: 3.3rem; font-size: 1.7rem; color:#b2b2b2; text-align: center;} .comment_form .comment_txt{display: block; font-size: 1.7rem; line-height: 2.5rem; letter-spacing: -1px; word-break: break-all;} .comment_form .comment_txt.blind_txt{color:#999;} .comment_form .comment_textarea{position: relative; display: block; margin-top: 2rem; width: 100%; height: 18rem;} .comment_form .comment_textarea textarea{display: block; padding: 2rem 2rem 3.5rem; width: 100%; height: 100%; resize: none; line-height: 2.1rem; box-sizing: border-box; border: 1px solid #ccc; outline: none; font-size: 1.7rem; } .comment_form .comment_textarea textarea::placeholder { word-break: break-all; letter-spacing:-1px; overflow-wrap:anywhere; } .comment_form .comment_textarea .count{position: absolute; left: 2rem; bottom: 1.5rem; display: block; color:#999; font-size: 1.3rem; font-weight: 400; min-width: 4rem;} .comment_form .comment_textarea .count em{display: inline-block;color:#333;} .comment_form .write_btn{display: block; margin-top: 1rem; width: 100%; height: 5rem; background: #333; } .comment_form .write_btn span{display: block;color:#fff; text-align: center; font-size: 1.5rem; font-weight: 500;} .comment_form .user_info + .comment_textarea {margin-top: 1.5rem;} .comment_list li:first-of-type { border-top:solid 1px #111;} .comment_list li .comment_form{padding-bottom: 2.5rem; border-bottom: 1px solid #dfdfdf;} .comment_list li .comment_form .user_info{padding-top: 3rem; padding-bottom: 2.5rem;} .comment_list li:last-child .comment_form{border-bottom: none;} .comment_wrap .comment_more{display: block; width: 100%; height: 5.5rem; border: 1px solid #ccc;} .comment_wrap .comment_more span{display: block; text-align: center; line-height: 5.3rem; font-size: 1.7rem;} .comment_wrap .comment_more span:after{display: inline-block; clear: both; content: ""; margin-left: 1rem; width: 1.6rem; height: 0.9rem; background: url(../img/more_arrow.png) 50% 50% no-repeat; background-size: 1.6rem;} .comment_form .vote_wrap{display: flex; justify-content: right; align-items: center; margin-top: 2rem; height: 2rem;} .comment_form .vote_wrap dd{margin-left: 1.5rem; height: 100%;} .comment_form .vote_wrap dd .vote_btn{display: flex; align-items: center; padding-left: 3rem; height: 100%; box-sizing: border-box; text-decoration: none;} .comment_form .vote_wrap dd .vote_btn.vote_btn_01{background: url(../img/icon_like_g.png) 0 50% / 21px no-repeat;} .comment_form .vote_wrap dd .vote_btn.vote_btn_02{background: url(../img/icon_hate_g.png) 0 50% / 21px no-repeat;} .comment_form .vote_wrap dd .vote_btn.vote_btn_01.on{background: url(../img/icon_like_b.png) 0 50% / 21px no-repeat;} .comment_form .vote_wrap dd .vote_btn.vote_btn_02.on{background: url(../img/icon_hate_b.png) 0 50% / 21px no-repeat;} .comment_form .vote_wrap dd .vote_btn em{display: block; font-size: 1.3rem; letter-spacing: -1px; color:#999;} .comment_form .vote_wrap dd .vote_btn.on em{color:#111;} .alert_pop .layer_dialog{border: none; border-top: 3px solid #000; border-radius: 0 0 4px 4px;} .alert_pop .layer_content{padding: 2.5rem 2.5rem 4rem; min-width: 300px;} .alert_pop .alert_txt{display: block; margin-bottom: 2.5rem; font-size: 2rem; line-height: 3rem; font-weight: 500;} .alert_pop .alert_tit{display: block; height: 40px; font-size: 20px; font-weight: 700; letter-spacing: -1px; border-bottom: 1px solid #333; } .alert_pop .alert_btn_wrap{display: flex; margin-left: -1rem; justify-content: center;} .alert_pop .alert_btn_wrap li{float: left; padding-left: 1rem; width: 50%; height: 4.5rem; box-sizing: border-box;} .alert_pop .alert_btn_wrap li .alert_btn{display: block; width: 100%; height: 100%; border: 1px solid #ccc; box-sizing: border-box; text-decoration: none;} .alert_pop .alert_btn_wrap li .alert_btn span{display: block; font-size: 1.7rem; font-weight: 500; text-align: center; line-height: 4.3rem; color:#999;} .alert_pop .alert_btn_wrap li .alert_btn.fill span{color:#fff;} .alert_pop .alert_btn_wrap li .alert_btn.fill{background: #4fa9b5; border: 1px solid #4fa9b5;} .alert_pop .alert_btn_wrap li .alert_btn.fill.gray{background: #333; border: 1px solid #333;} .alert_pop .radio_list{display: block; margin-top: 30px;} .alert_pop .radio_list li{display: block; height: 20px; margin-bottom: 15px;} .alert_pop .radio_list li .form_radio label{padding-left: 30px; font-size: 16px; letter-spacing: -1px; line-height: 20px;} .alert_pop .radio_list li .form_radio label:before{width: 20px; height: 20px; border: 1px solid #b7b7b7;} .alert_pop .radio_list li .form_radio label:after{left: 5px; width: 10px; height: 10px; background: #fff;} .alert_pop .radio_list li .form_radio input:checked + label:before{background: #fff; border-color:#333;} .alert_pop .radio_list li .form_radio input:checked + label:after{background: #333;} .alert_pop .alert_textarea{position: relative; display: block; margin-top: 20px; margin-bottom: 20px; width: 100%; height: 130px;} .alert_pop .alert_textarea textarea{display: block; padding: 15px 10px; width: 100%; height: 100%; border: 1px solid #dfdfdf; outline: none; resize: none; border-radius: 4px; box-sizing: border-box; font-size: 16px; letter-spacing: -1.6px; color:#999; line-height: 22px;} .alert_pop .alert_textarea .count{position: absolute; left: 15px; bottom: 15px; font-size: 15px; color:#999; font-weight: 400;} .alert_pop .alert_textarea .count em{color:#333;} .layer_wrap{display: none; position: fixed; top: 0; left: 0; padding: 30px 0; width: 100%; height: 100%; overflow: auto; white-space: nowrap; font-size: 0; line-height: 0; text-align: center; box-sizing: border-box; background-color: rgba(0,0,0,0.4); z-index:99999999;} .layer_wrap:before{content: '';display: inline-block;height: 100%;vertical-align: middle;} .layer_wrap .layer_dialog{position: relative; display: inline-block; vertical-align: middle; white-space: normal; line-height: 1; text-align: left; -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9); -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s,-webkit-transform .3s; z-index: 10; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.2); top: auto;} .layer_dialog_close{position: absolute; top: 0;right: 0;width: 5rem;height: 5rem; background-size: auto;}