@charset "utf-8";
/* CSS Document */
html, body { min-width: 960px; }
body { overflow-x: auto; }
.topLine{border:solid 8px #5ba8a8}
.topWrap > .topMenuData{display:inline-block;vertical-align: top;cursor:pointer;}
.topWrap > .univ_1{display:none;}
.topWrap > .join_2{display:none;}
.sampleTitleWrap{width: 100%; background: #003AAA; height: 50px; padding: 13px 15px; }
.sampleTitleWrap > .titleData{display:inline-block;}
.sampleTitleWrap > .title{margin-left:10px; font-size: 15px; color: #F9FBFF; font-weight: bold;}
.sampleTitleWrap > .orderNo{margin-left:40px;color: #F9FBFF;font-size: 15px;font-weight:400;}
.sampleTitleWrap > .logo { width: 30px; vertical-align: top; margin-top: -3px; }
.editWrap{width:100%; }
.editWrap > .topWrap { background: #dee3eb; }
.editWrap > .topWrap > .before{ width: 50%; text-align:center;font-size:14px;color:#636886;font-weight:bold; float: left; padding: 9px 0; height: 40px; }
.editWrap > .topWrap > .after{ width:50%;text-align:center;font-size:14px;color:#fff;font-weight:500; float: right; padding: 9px 0; background: #0047D0; position: relative; height: 40px; }
.editWrap > .topWrap > .after:after { width: 1px; height: 450px; background:  rgba(0,71,208,0.5); position: absolute; right: 0; content: ''; top: 40px; z-index: 2; }
.editWrap > .topWrap > .after:before { width: 1px; height: 450px; background:  rgba(0,71,208,0.5);; position: absolute; left: 0; content: ''; top: 40px; z-index: 2; }
.conWrap { position: relative; }
.conWrap:after { position: absolute; content: ''; height: 1px; width: 50%; background: rgba(0,71,208,0.5);; right: 0; bottom: 0; z-index: 2; }
.conWrap:before { position: absolute; content: ''; height: 1px; width: 50%; background: #dee3eb; left: 0; bottom: 0; z-index: 2; }
.conWrap > .topBar > .topTxt{display:inline-block;vertical-align: top;}
.conWrap > .topBar > .TopBgLine{display:inline-block;background-image:url('../../../../web/img/samplePage/bg_topBarLine.gif');height:23px; }

.contentsTxtWrap{overflow: scroll;height: 450px;width: 100%;overflow-x: hidden; position: relative; }
.contentsTxtWrap > .contents_txt_tb{border:solid 1px #dee3eb;margin-bottom:5px;margin-top:5px; width: 100%;}
.contentsTxtWrap > .contents_txt_tb:first-child { margin-top: 0; }
.contentsTxtWrap > .contents_txt_tb > tbody > tr > th{background-color:#f0f0f0;width:10%; border:solid 1px #dee3eb; color: #272a31; font-size:13px; }
.contentsTxtWrap > .contents_txt_tb > tbody > tr > td{background-color:#ffffff; width: 40%; padding: 8px 10px; border:solid 1px #dee3eb; font-size:13px; font-weight:bold; color: #272a31; }
.contentsTxtWrap > .contents_txt_tb > tbody > tr > td > textarea { width:100%;height:244px;color:#272a31; padding:10px; font-size:13px; border:solid 1px #dee3eb; font-weight:400; line-height: 21px; color: #272a31; }
.contentsTxtWrap > .contents_txt_tb > tbody > tr > td > .wordCnt{text-align:right; font-size:11px;}
.contentsTxtWrap > .contents_txt_tb > tbody > tr > td > .wordCnt span { background: #F0F0F0; display: inline-block; padding: 1px 15px; border-radius: 20px; line-height: 25px; height: 25px; }

.commentWrap{ width: 100%; margin-top: 20px; }
.commentWrap > .leftArea{vertical-align: top; float: left; width: calc(50% - 10px); }
.commentWrap > .leftArea > .txt > textarea { width:100%; height:250px; color:#272a31; line-height: 21px; padding:7px 7px 7px 7px;font-size:13px;border:solid 1px #d9d9d9;font-weight:400;}
.commentWrap > .leftArea > .editorInfo {text-align:right; margin-top: 5px; font-size: 12px; }
.commentWrap > .leftArea .title { font-size: 15px; font-weight: bold; color: #0047D0; margin-bottom: 10px; }
.commentWrap > .leftArea .title img { width: 22px; vertical-align: top; margin-right: 5px; }
.commentWrap > .leftArea .title span { font-size: 13px; font-weight: normal; color: #999; margin-left: 10px; }

.commentWrap > .rightArea{vertical-align: top; position: relative; float: right; width: calc(50% - 10px); }
.commentWrap > .rightArea > .txt > textarea { width:100%;height:250px;color:#272a31; line-height: 21px; padding:8px 10px; font-size:13px;border:solid 1px #dee3eb;font-weight:400; }
.commentWrap > .rightArea .title { font-size: 15px; font-weight: bold; color: #0047D0; margin-bottom: 10px; }
.commentWrap > .rightArea .title img { width: 22px; vertical-align: top; margin-right: 5px; }
.commentWrap > .rightArea .title span { font-size: 13px; font-weight: normal; color: #999; margin-left: 10px; }
.commentWrap > .rightArea > .title > .startWrap {display:inline-block; float: right; font-size: 15px; font-weight: bold; color: #0047D0; }
.commentWrap > .rightArea > .title > .startWrap > .btnStar{cursor:pointer; width: 19px; margin-right: -2px; }
.commentWrap > .rightArea > .etc-comment { text-align:right;color:#e22020; font-size: 12px;}

.buttonWrap{width: 100%;text-align: center; margin-top: 40px;}
.buttonWrap > .banner{display:inline-block;}
.buttonWrap > .button{display:inline-block;cursor:pointer;vertical-align: bottom; background: #f8f8f8; height: 55px; line-height: 55px; width: calc(50% - 10px); font-size: 15px; border-radius: 6px; position: relative; padding-left: 55px; overflow: hidden; }
.buttonWrap > .button div { position: absolute; width: 55px; height: 55px; left: 0; top: 0; background: rgba(0,0,0,0.1); transition: background .25s ease; }
.buttonWrap > .button:hover div { background: rgba(0,0,0,0.25); }
.buttonWrap > .button div img { width: 25px; margin-top: 14px; }
.buttonWrap > .left{ float: left; background: #0047D0; color: #fff; }
.buttonWrap > .right{ float: right; background: #00C063; color: #fff; }
.storyOpacityWrap{position: absolute; top: 0; right: 0;width: 100%;height: 100%; background: url("../../../../img/editing/comment_blur.png"); background-size: cover; z-index: 2;}
.storyBannerWrap{position: absolute; cursor:pointer; top: 50%; left: 50%; margin-top: -80px; margin-left: -194px; z-index: 3; }
.txt .editor-notes{ border:1px solid #dee3eb; height:250px;color:#272a31; padding:8px 10px;font-size:13px;font-weight:400;overflow-y:scroll; line-height: 21px; }

.edit-confirm-wrap { padding: 20px; }