office.css

마이오피스 메인, 나의 애터미 일정, 매출, 수당, 구매이력상품, 나의인생 시나리오, 계보도

---

@charset "UTF-8";

/* 마이오피스 메인*/
.office .main .contents{padding:15px}
.office .main .myInfo{position:relative;padding:10px;margin-bottom:10px;background-color:#fff}
.office .main .myInfo .me{display:block;font-size:23px}
.office .main .myInfo .me em{vertical-align:baseline}
.office .main .myInfo .me small{display:block;font-size:13px}
.office .main .myInfo .myData{position:absolute;right:15px;top:14px}
.office .main .myInfo .myData dl dt{color:#333}
.office .main .myInfo .myData dl dd{color:#f60;font-size:24px;line-height:1.2}

.office .main .keyPerson{padding:10px;margin-bottom:10px;background-color:#fff}
.office .main .keyPerson .staff:after{content:'';display:block;clear:both}
.office .main .keyPerson .staff dl{float:left;width:50%;padding:5px;color:#fff;text-align:center;background-color:#546674;border-radius:2px;box-sizing:border-box}
.office .main .keyPerson .staff dl.item1{border-right:1px solid #fff}
.office .main .keyPerson .date{margin-bottom:5px;font-size:14px;color:#333;text-align:center}

.officeMain{padding-bottom:20px}
.officeMain .headLine{position:relative;min-height:80px;padding:12px 15px 12px 85px;background-color:#fff;-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1);box-shadow: 0 1px 1px rgba(0,0,0,.1);box-sizing:border-box}
.officeMain .headLine .name{font-size:20px;color:#333}
.officeMain .headLine .id{font-size:15px;color:#999}
.officeMain .headLine .level{display:inline-block}
.officeMain .headLine .state{display:inline-block;height:18px;line-height:1.5;padding:0 3px 2px;border:1px solid #ddd;font-size:12px;color:#999;box-sizing:border-box}
.officeMain .headLine .state.primary{color:#00b6f0;border:1px solid #06a7e2}
.officeMain .headLine .date{display:inline-block;margin-left:5px;font-size:12px;color:#999}
.officeMain .headLine .circle{display:inline-block;position:absolute;left:15px;top:13px;width:54px;height:54px;padding-top:18px;text-align:center;font-size:14px;color:#fff;box-sizing:border-box;background-color:#33c5f3;border-radius:50%}
.officeMain .headLine .btnRefresh{position:absolute;right:20px;top:13px}
.officeMain .headLine .state.conkait{color:red;border:1px solid red}
.officeMain .headLine .state.conkait a{color:red;}
.officeMain .headLine .btnProfile{position: absolute;right: 20px;top: 50%;margin-top: -15px;max-width: 90px;height: auto;line-height: 1.3;padding: 0}

.officeMain .box{margin-top:13px;font-size:14px;border:2px solid #707780;box-sizing:border-box}
.officeMain .box .head{padding:10px}
.officeMain .box .head span{position:relative;padding-left:9px;margin-left:4px;font-size:15px}
.officeMain .box .head span .primary{color:#64d0f3}
.officeMain .box .head span .pvcolor{color:#ffff99}
.officeMain .box .head span:first-child{padding-left:0;margin-left:0}
.officeMain .box .head span:after{content:'';display:inline-block;position:absolute;left:0;top:2px;height:13px;border-left:1px solid #8d9299}
.officeMain .box .head span:first-child:after{content:none}
.officeMain .box .body{width:100%;padding:8px 0 10px;color:#333;background-color:#fff;box-sizing:border-box}
.officeMain .box .body > div{position:relative;overflow:hidden}
.officeMain .box .body dl{position:relative;z-index:1;box-sizing:border-box;display:inline-block;min-width:50%;background-color:#fff}
.officeMain .box .body dl:first-child{padding-left:0;margin-right:1px;margin-left:-1px}
.officeMain .box .body dl:last-child{margin-right:-1px;margin-left:1px}
.officeMain .box .body > div:after{content:'';display:inline-block;position:absolute;left:50%;top:34px;width:1px;height:48px;background-color:#e2e2e2;z-index:1}
.officeMain .box .body dl dt{font-size:14px}
.officeMain .box .body dl dd{font-size:22px;padding:0 10px}
.officeMain .box .body .childrenPV{font-size:15px;margin-bottom:10px}

.officeMain .board .list{margin-top:10px;background-color:#fff;border:1px solid #e2e2e2;border-radius:2px}
.officeMain .board .list .head{position:relative;height:45px;line-height:1.4;padding:13px 15px 0;border-bottom:1px solid #e2e2e2;box-sizing:border-box}
.officeMain .board .list .head h2{font-size:15px;color:#333;font-weight:bold}
.officeMain .board .list .head a{position:absolute;right:15px;top:15px;padding-right:13px;font-size:12px;color:#666}
.officeMain .board .list .head a:after{content:'';display:inline-block;position:absolute;right:0;top:4px;width:5px;height:8px;background-image: url('/static/images/common/icon_sprite.png');background-position:-195px 0;background-repeat:no-repeat;background-size: 360px auto}
.officeMain .board .list .content{color:#333}

.officeMain .board .list.schedule .content{font-size:14px;color:#666}
.officeMain .board .list.schedule .content > .noData{padding:20px 0;color:#666}
.officeMain .board .list.schedule .content .list3 > li{position:relative;padding-left:65px;min-height:79px;box-sizing:border-box}
.officeMain .board .list.schedule .content .list3 .naData p{padding-top:11px}
.officeMain .board .list.schedule .content .circle{display:inline-block;position:absolute;left:0;top:50%;width:50px;height:50px;margin-top:-25px;padding-top:11px;border-radius:50%;font-size:13px;line-height:1.2;color:#999;text-align:center;background-color:#f3f9fb;box-sizing:border-box}
.officeMain .board .list.schedule .content .circle.primary{color:#33c5f3}
.officeMain .board .list.schedule .content time{display:block;margin-bottom:5px;font-size:15px;color:#333}
.officeMain .board .list.schedule .content p{word-wrap:break-word;word-break:break-all}
.officeMain .board .list.schedule .content .local{color:#59c28d}
.officeMain .board .list.schedule .content .oneday{color:#59b2c2}
.officeMain .board .list.schedule .content .success {color:#fa993b}

.officeMain .board .list.lifePlan .content{font-size:14px;color:#333}
.officeMain .board .list.lifePlan .content time{font-size:11px;color:#666}
.officeMain .board .list.lifePlan .content .noData{padding:20px 0;color:#666}

.officeMain .board .list.notice .content{font-size:14px;color:#333}
.officeMain .board .list.notice .content li{height:45px;padding:0;white-space:nowrap;box-sizing:border-box}
.officeMain .board .list.notice .content li a{display:inline-block;max-width:100%;padding-top:13px;height:45px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}
.officeMain .board .list.notice .content li.new{position:relative;padding-right:20px}
.officeMain .board .list.notice .content li.new:after{content:'';display:inline-block;width:16px;height:16px;margin-top:14px;vertical-align:top;background-image: url('/static/images/common/icon_new.png'); background-position:-50px 0;background-repeat:no-repeat;background-size: 360px auto;background-position:0 0}
.officeMain .board .list.notice .content li a time{margin-right:10px}
.officeMain .banner{margin-top:10px}

.officeMain .banner.colors a{height:auto;min-height:40px;padding-bottom:9px}
.officeMain .banner.colors a span{white-space:nowrap}

.officeMain .banner.colors a.seminar{position:relative;min-height:70px;margin:10px 0;padding-top:15px;padding-left:75px}
.officeMain .banner.colors a.seminar:after{left:20px;top:13px;right:inherit;width:39px;height:50px;background-image:url('/static/images/common/icon_seminar.png');background-repeat:no-repeat;background-position:0 0;background-size:39px auto;box-sizing:border-box}
.officeMain .banner.colors a.seminar h2{font-size:15px;color:#333;font-weight:bold}
.officeMain .banner.colors a.seminar p{letter-spacing:-0.5px}

.officeMain .warText{padding:10px 0 0;font-size:12px;color:#333}

/* 나의 애터미 일정 */
.schedule .board .list li .content .starRating{margin-bottom:8px}
.schedule .board .list li .content .starRating .state{display:inline-block;position:relative;width:76px;height:13px;background-image:url('/static/images/common/star_rating.png');background-position:0 0;background-repeat:no-repeat;background-size:360px auto}
.schedule .board .list li .content .starRating .state span{display:inline-block;position:absolute;left:0;top:0;bottom:0;background-image:url('/static/images/common/star_rating.png');background-position:0 -25px;background-repeat:no-repeat;background-size:360px auto}
.schedule .board .list li .content .starRating .text{margin-bottom:8px;font-size:14px;color:#333;word-wrap:break-word;word-break:break-all}
.schedule .board .list li .footer{height:40px;padding:11px 15px 0;border-top:1px solid #e2e2e2;box-sizing:border-box}
.schedule .board .list li .footer:after{content:'';display:block;clear:both}
.schedule .board .list li .footer .score{float:left;font-size:13px;color:#333}
.schedule .board .list li .footer .links{font-size:13px;float:right}
.schedule .board .list li .footer .links a{color:#666}
.schedule .board .list li .footer .links a + a{margin-left:10px}

/* #612 */
.writeSchedule{padding-bottom:70px}
.writeSchedule section{margin-top:15px}
.writeSchedule .table thead th, 
.writeSchedule .table tbody th, .table tbody td{padding:10px 0}
.writeSchedule .evaluate button{font:0/0 a;width:23px;height:23px;background-image:url('/static/images/common/star_rating.png');background-position:-100px 0;background-repeat:no-repeat;background-size:360px auto}
.writeSchedule .evaluate button.active{background-position:-100px -25px}
.writeSchedule .write textarea{margin-top:10px}
.writeSchedule .board .detail .starRating{margin-bottom:8px}
.writeSchedule .board .detail .starRating .state{display:inline-block;position:relative;width:76px;height:13px;background-image:url('/static/images/common/star_rating.png');background-position:0 0;background-repeat:no-repeat;background-size:360px auto}
.writeSchedule .board .detail .starRating .state span{display:inline-block;position:absolute;left:0;top:0;bottom:0;background-image:url('/static/images/common/star_rating.png');background-position:0 -25px;background-repeat:no-repeat;background-size:360px auto}
.writeSchedule .board .detail .starRating .text{margin-bottom:8px;font-size:14px;color:#333}
.writeSchedule .board .detail{padding-bottom:9px;background-color:#fff;border:1px solid #e2e2e2}
.writeSchedule .board .detail .head{padding:12px 13px;font-size:15px;color:#333; background-color:#f3f9fb}
.writeSchedule .board .detail .head:after{content:'';display:block;clear:both}
.writeSchedule .board .detail .head i{float:right;font-size:13px;color:#999}
.writeSchedule .board .detail .content{padding:11px 13px 5px;background-color:#fff;word-wrap: break-word;word-break: break-all}
.writeSchedule .board .detail .content p{font-size:13px;color:#666}

.lowerSalesList{padding-bottom:20px}
.lowerSalesList .headLine{height:38px;text-align:center;overflow:hidden;background-color:#fff;border-bottom:1px solid #c6c6c6;box-sizing:border-box;-webkit-transition:height .2s ease-in;transition:height .2s ease-in}
.lowerSalesList .headLine.active{height:auto;min-height:76px;padding-bottom:5px}
.lowerSalesList .headLine.floating{z-index:100}
.lowerSalesList .headLine button{width:100%;padding:10px 0;padding-bottom:8px}
.lowerSalesList .headLine button strong{display:inline-block;font-size:14px;color:#333}
.lowerSalesList .headLine button small{font-size:12px;color:#999}
.lowerSalesList .headLine button .icon{margin-left:5px;vertical-align:middle;-webkit-transition:-webkit-transform .2s ease-in;transition:transform .2s ease-in}
.lowerSalesList .headLine.active button .icon{-webkit-transform: rotate(180deg);transform: rotate(180deg)}
.lowerSalesList .headLine .total{display:none}
.lowerSalesList .headLine.active .total{display:block}
.lowerSalesList .headLine .total:after{content:'';display:block;clear:both}
.lowerSalesList .headLine .total div{float:left;position:relative;width:50%;padding:0 5px;font-size:20px;color:#333;box-sizing:border-box}
.lowerSalesList .headLine .total div:first-child:after{content:'';display:block;position:absolute;right:0;top:50%;height:20px;margin-top:-10px;border-right:1px solid #e2e2e2}
.lowerSalesList .headLine .total div .icon,
.lowerSalesList .headLine .total div .icon + span{vertical-align:baseline;word-wrap:break-word;word-break:break-all}
.lowerSalesList .headLine .total div .icon{margin-bottom:-5px}
.lowerSalesList .btnMore{margin-bottom:10px}
.lowerSalesList .board .list{margin-top:6px}
.lowerSalesList .board .list > li .head{padding-top:12px}
.lowerSalesList .board .head .dark{font-size:15px}
.lowerSalesList .board .content{font-size:14px;color:#333}
.lowerSalesList .board .content:after{content:'';display:block;clear:both}
.lowerSalesList .board .content .aleft{float:left}
.lowerSalesList .board .content .aright{float:right}
.lowerSalesList .board .content .item{float:left; box-sizing:border-box}
.lowerSalesList .board .content .item:first-child{width:53%;min-width:50%;white-space:nowrap;text-align:left}
.lowerSalesList .board .content .item:last-child{min-width:47%;text-align:right}
.lowerSalesList .board .content .item span{vertical-align:super;line-height:1.6}
.lowerSalesList .board .content .item .icon{vertical-align:top;margin-top:1px}

.lowerSalesList .board .content .aright span{margin-left:5px}
.lowerSalesList .board .content .aright .icon{width:17px;height:17px;margin-top:-2px}
.lowerSalesList .board .content .state{display:inline-block;height:17px;margin-left:5px;margin-top:-1px;padding:0 2px;color:#999;font-size:11px;border:1px solid #999;box-sizing:border-box}
.lowerSalesList .guide li + li{margin-top:5px}
.lowerSalesList .board .content .aleft span,
.lowerSalesList .board .content .aright span{vertical-align:middle;display:inline-block}
.lowerSalesList .filterSet{margin-bottom:8px;padding-bottom:8px}
.lowerSalesList .filterSet .col.search{position:relative}
.lowerSalesList .filterSet .col.search .btnDelete{right:0}
.lowerSalesList .filterSet input[type='search']{border-color:#bfc2c6;font-size:12px;padding:0 3px 0 1px}
.lowerSalesList .table.border.primary td{font-size:20px;padding:1px !important}
.lowerSalesList .table.border.primary th{height:30px}

/* 매출, 수당 */
.board .bar{margin-bottom:8px;font-size:15px;color:#333}
.board .bar .text{float:left;line-height:40px}
.board .bar .select{float:right;width:160px}
.board .bar:after{content:'';display:block;clear:both}
.board .bar span:last-child{display:inline-block;float:right;text-align:right}

.lowerSalesList .billboard{position:relative;padding:8px 5px;border:1px solid #e2e2e2;border-radius:2px}
.lowerSalesList .billboard span{display:inline-block;min-width:49%;padding:0 8px;position:relative;z-index:1;font-size:14px;background-color:#f3f9fb;box-sizing:border-box}
.lowerSalesList .billboard span:first-child{padding-right:8px}
.lowerSalesList .billboard span:last-child{padding-left:8px}
.lowerSalesList .billboard:after{content:'';display:inline-block;position:absolute;left:50%;top:14px;height:11px;border-left:1px solid #e2e2e2}
.lowerSalesList .board .list > li .content{box-sizing:border-box}

.board .list.expand .head:after{content:'';display:block;clear:both}
.board .list.expand .head .state{font-size:12px;padding:0 11px;margin-right:5px;background-color:#94999f;color:#fff;border-radius:17px;display:inline-block;line-height:23px;height:21px;vertical-align:middle}
.board .list.expand .head .state.primary{background-color:#52d3fc}
.board .list.expand .head .state.lineBlue{background-color:transparent;color:#00b6f0;border:1px solid #00b6f0}
.board .list.expand .head .state.lineOrange{background-color:transparent;color:#f9993b;border:1px solid #f9993b}
.board .list.expand .head .state.lineDark{background-color:transparent;color:#707780;border:1px solid #707780}
.board .list.expand .head .code{float:right;margin-top:3px;}
.board .list.expand .head time{font-size:12px;color:#999;vertical-align:middle}
.board .list.expand .footer{border-top:1px solid #e2e2e2}

/* #482 sty01 추가 */
.lowerSalesList .board .head.sty01{height:auto}
.lowerSalesList .board .head.sty01 time{float:none;color:#333}
.lowerSalesList .board .head.sty01 .item{float:left;box-sizing:border-box;padding-bottom:8px}
.lowerSalesList .board .head.sty01 .item:first-child{width:53%;min-width:50%;text-align:left}
.lowerSalesList .board .head.sty01 .item:last-child{min-width:47%;text-align:right}
.lowerSalesList .board .content.sty01{padding:8px 13px}
.lowerSalesList .board .content.sty01 .item:first-child{padding-top:3px}
.lowerSalesList .board .content.sty01 .item:last-child{font-size:16px}

.salesList .billboard{position:relative;padding:8px 5px;border:1px solid #e2e2e2;border-radius:2px}
.salesList .billboard span{display:inline-block;min-width:49%;padding:0 8px;position:relative;z-index:1;font-size:14px;background-color:#f3f9fb;box-sizing:border-box}
.salesList .billboard span:first-child{padding-right:8px}
.salesList .billboard span:last-child{padding-left:8px}
.salesList .billboard:after{content:'';display:inline-block;position:absolute;left:50%;top:14px;height:11px;border-left:1px solid #e2e2e2}

.salesList .board .list{margin-top:10px}
.salesList .board .list .content{padding:12px 15px; color:#333}
.salesList .board .list .content .name{font-size:14px}
.salesList .board .list .content .code{font-size:15px}
.salesList .board .list .content .info{margin-top:2px;font-size:13px}
.salesList .board .list .content .info:after{content:'';display:block;clear:both}
.salesList .board .list .content .info div{float:left}
.salesList .board .list .content .info div:after{content:'';display:block;clear:both}
.salesList .board .list .content .info div span{float:left;position:relative;margin-left:8px;padding-left:8px}
.salesList .board .list .content .info div span:first-child{padding-left:0;margin-left:0}
.salesList .board .list .content .info div span:after{content:'';display:inline-block;position:absolute;left:0;top:6px;height:11px;border-left:1px solid #e2e2e2}
.salesList .board .list .content .info div span:first-child:after{content:none}
.salesList .board .list .content .info div span em{font-size:17px}
.salesList .board .list .content .info div span em cite.strike{ text-decoration:line-through;}
.salesList .board .list .content .info p{float:right;margin-top:3px}
.salesList .board .btnMore{margin-top:10px}

.commission .board .list{color:#333}
.commission .board .list .content dl + dl{margin-top:5px}
.commission .board .list .content dl:after{content:'';display:block;clear:both}
.commission .board .list .content dl dt{float:left}
.commission .board .list .content dl dd{float:right}
.commission .board .list .footer:after{content:'';display:block;clear:both}
.commission .board .list .footer{height:40px;padding:11px 15px 0;font-size:13px;box-sizing:border-box}
.commission .board .list .footer span{float:left;color:#333}
.commission .board .list .footer .name{float:right}

.supportCommission .board .list .content dl{display:table;margin-top:5px;width:100%;font-size:14px;color:#333}
.supportCommission .board .list .content dl.disable{color:#999}
.supportCommission .board .list .content dl dt{display:table-cell;width:30%}
.supportCommission .board .list .content dl dd{display:table-cell;width:40%;text-align:right;white-space:nowrap}
.supportCommission .board .list .footer{height:40px;padding-top:10px;text-align:center;font-size:14px;color:#333;box-sizing:border-box}
.supportCommission .board .list .footer .col{float:left;position:relative;width:50%;height:40px;box-sizing:border-box}
.supportCommission .board .list .footer .col:first-child:after{content:'';display:inline-block;position:absolute;right:0;top:3px;height:13px;/*border-left:1px solid #e2e2e2;*/}
.supportCommission .board .list .content{padding:0} /* #333 */
.supportCommission .board .list .content .table{border-top:0}
.supportCommission .board .list .content .table thead th{height:20px;font-size:14px;text-align:center;border-right:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;background-color:#fff;box-sizing:border-box;vertical-align:middle}
.supportCommission .board .list .content .table tbody td{padding:3px 10px 3px 3px;text-align:right;border-right:1px solid #e2e2e2;border-bottom:0;background-color:#fff;vertical-align:middle}
.supportCommission .board .list .content .table tbody th{height:20px;padding:3px 0 3px 10px;border-right:1px solid #e2e2e2;border-bottom:0}
.supportCommission .board .list .content .table tbody tr:first-child th, .supportCommission .board .list .content .table tbody tr:first-child td{padding-top:7px}
.supportCommission .board .list .content .table tbody tr:last-child th, .supportCommission .board .list .content .table tbody tr:last-child td{color:#989898;padding-bottom:7px}
.supportCommission .board .list .content .table thead th:last-child, .supportCommission .board .list .content .table tbody tr td:last-child{border-right:0}
.supportCommission .board .list .content .table tbody .text-center{text-align: center}

/* 구매이력상품 */
.orderHistory .guide{padding:15px 0}

/* 나의인생 시나리오 */
.planList .guide{height:235px;color:#fff;text-align:center;font-size:13px;background-image:url('/static/images/common/plan_bg.jpg');background-repeat:no-repeat;background-position:0 0;background-size:cover;box-sizing:border-box}
.planList .guide .text{padding-top:25px}
.planList .guide .text p{padding-bottom:5px}
.planList .guide .text p strong{font-size:23px}
.planList .guide .btns{margin-top:10px}
.planList .guide .btns a{display:block;width:180px;height:40px;line-height:36px;margin:0 auto 10px;font-size:14px;color:#fff;background-color:rgba(0,0,0,.2);border:2px solid #fff;border-radius:20px;box-sizing:border-box}
.planList .plans .btnMore{margin:10px 0}
.planList .plans .controls{height:40px;margin:10px 0;overflow:hidden;}
.planList .plans .controls .aleft{display:inline-block;height:25px;vertical-align:top;-webkit-transform:translateY(25%);transform:translateY(25%)}
.planList .plans .controls .checkbox{vertical-align:top}
.planList .plans .controls .checkbox + label{vertical-align:middle;line-height:25px;display:inline-block;margin-left:4px}
.planList .plans .controls .btn{float:right;vertical-align:middle}
.planList .plans .list li{position:relative;margin-bottom:6px}
.planList .plans .list li:after{content:'';display:inline-block;position:absolute;right:15px;top:23px;width:7px;height:13px;pointer-events:none;background-image:url('/static/images/common/icon_sprite.png');background-repeat:no-repeat;background-position:-215px 0;background-size:360px auto;box-sizing:border-box}
.planList .plans .list li .checkbox{position:absolute;left:15px;top:16px}
.planList .plans .list li .checkbox input[type='checkbox']{width:50px;height:50px;left:-15px;top:-13px}
.planList .plans .list li a{display:block;height:60px;padding:11px 20px 15px 50px;color:#333;font-size:14px;background-color:#fff;border:1px solid #e2e2e2;border-radius:2px;box-sizing:border-box}
.planList .plans .list li a .icon.new{vertical-align:text-bottom}
.planList .plans .list li a time{display:block;font-size:11px;color:#666}
.planList .noData.bubble{margin-top:70px}

.lifeWrite .guide{height:130px;color:#fff;text-align:center;font-size:13px;background-image:url('/static/images/common/life_write_bg.jpg');background-repeat:no-repeat;background-position:0 0;background-size:cover;box-sizing:border-box}
.lifeWrite .guide{padding-top:18px}
.lifeWrite .guide p{font-size:19px;padding-bottom:5px}
.lifeWrite .write .box{padding:20px;line-height:1.3}
.lifeWrite .write .box .primary{font-size:17px}
.lifeWrite .write .box .primary small{font-size:13px}
.lifeWrite .write .box em{font-size:13px;color:#333}
.lifeWrite .write .box .block{display:inline-block}
.lifeWrite .write .box .bullet{margin-top:5px;line-height:1.5}
.lifeWrite .write .support section{position:relative}
.lifeWrite .write .support section:before{content:'';display:inline-block;position:absolute;left:40px;top:0;height:130%;border-left:1px solid #c9c9c9}
.lifeWrite .write .support section + section{margin-top:15px}
.lifeWrite .write .support section:last-child:before{content:none}
.lifeWrite .write .support section:after{content:'';display:block;clear:both}
.lifeWrite .write .support section .head{width:80px;height:80px;padding:7px 10px 0;position:absolute;left:0;top:0;color:#fff;text-align:center;border-radius:50%;box-sizing:border-box}
.lifeWrite .write .support section .head strong{font-size:17px}
.lifeWrite .write .support section .head small{display:block;padding-bottom:4px;margin-bottom:1px;line-height:1.3;font-size:8px;border-bottom:1px solid rgba(255,255,255,.3);letter-spacing:-0.5px}
.lifeWrite .write .support section .head span{display:block;font-size:12px}
.lifeWrite .write .support section ul{position:relative;float:right;width:70%;padding:7px 20px 15px;background-color:#fff;border:1px solid #e2e2e2;border-radius:2px;box-sizing:border-box}
.lifeWrite .write .support section ul li{float:left;width:50%;margin-top:6px}
.lifeWrite .write .support section ul li label{font-size:14px;color:#333}
.lifeWrite .write .support section ul:before,
.lifeWrite .write .support section ul:after{content:'';display:inline-block;position:absolute;top:22px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:0}
.lifeWrite .write .support section ul:before{left:-10px;border-right:10px solid #e2e2e2}
.lifeWrite .write .support section ul:after{left:-8px;border-right:10px solid #fff}

.lifeWrite .write .support section.flesh .head{background-color:#f9993b}
.lifeWrite .write .support section.soul .head{background-color:#9562ca}
.lifeWrite .write .support section.sprit .head{background-color:#74bae2}
.lifeWrite .write .support section.environment .head{background-color:#8acb56}

.lifeDetail .chart{position:relative;height:290px;text-align:center;background-color:#fff;box-sizing:border-box;-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1);box-shadow: 0 1px 1px rgba(0,0,0,.1)}
.lifeDetail .chart time{position:absolute;right:15px;top:10px;font-size:13px;color:#333}
.lifeDetail .detail section{margin-top:15px}
.lifeDetail .detail section h2{margin-bottom:4px;text-align:center;font-size:14px;color:#333}
.lifeDetail .detail section h2 strong{font-size:20px}
.lifeDetail .detail section.flesh h2 strong{color:#f9993b}
.lifeDetail .detail section.soul h2 strong{color:#9562cb}
.lifeDetail .detail section.spirit h2 strong{color:#74bae2}
.lifeDetail .detail section.environment h2 strong{color:#89ca55}

.lifeDetail .detail section article{position:relative;padding:15px;background-color:#fff;border:1px solid #e2e2e2;border-radius:2px}
.lifeDetail .detail section article + article{margin-top:6px}
.lifeDetail .detail section article .content{position:relative;min-height:106px;overflow:hidden;padding-left:116px}
.lifeDetail .detail section article .content .thumb{display:block;float:left;width:106px;height:106px;margin-left:-116px;background-image:url('/static/images/common/thumb_default_3.png');background-position:0 0;background-repeat:no-repeat;background-size:cover}
.lifeDetail .detail section article .content .thumb img{width:100%;height:100%}
.lifeDetail .detail section article .content .title{margin-bottom:3px;padding-bottom:5px;line-height:1.1;border-bottom:1px solid #e2e2e2}
.lifeDetail .detail section article .content .text{display:inherit;padding-top:6px;line-height:1.5;font-size:13px;color:#333;word-break:break-all;word-wrap:break-word}
.lifeDetail .detail section article.empty .content .text{color:#999}
.lifeDetail .detail section article a{position:absolute;right:15px;top:15px;line-height:1.2;font-size:12px;color:#7f8792}
.lifeDetail .detail section article a .icon{margin-right:3px;vertical-align:text-bottom}
.lifeDetail .detail section article .grade{position:relative;padding-right:48px;margin-top:15px}
.lifeDetail .detail section article .grade .state{height:5px;background-color:#f1f2f4;border-radius:2px;overflow:hidden}
.lifeDetail .detail section article .grade .state span{display:inline-block;height:100%;vertical-align:top}
.lifeDetail .detail section article .grade .score{position:absolute;right:0;top:-10px;width:40px}

.lifeDetail .detail section.flesh article .grade .state span{background-color:#f99b3b}
.lifeDetail .detail section.soul article .grade .state span{background-color:#9562ca}
.lifeDetail .detail section.spirit article .grade .state span{background-color:#74bae2}
.lifeDetail .detail section.environment article .grade .state span{background-color:#89ca55}

.lifeDetail .detail section.flesh article .grade .score{color:#f99b3b}
.lifeDetail .detail section.soul article .grade .score{color:#9562ca}
.lifeDetail .detail section.spirit article .grade .score{color:#74bae2}
.lifeDetail .detail section.environment article .grade .score{color:#89ca55}
.lifeDetail .detail section article.empty .grade .score{color:#666}
.lifeDetail .detail section article.empty .grade .score strong{font-weight:normal}

.lifeDetail .licensee{border-bottom:1px solid #707780}
.lifeDetail .controls{text-align:left;padding:13px 0 15px;margin-bottom:3px;border-bottom:1px solid #bfc2c6;white-space:nowrap}
.lifeDetail .controls .col{color:#333;white-space:nowrap;padding-left:5px}
.lifeDetail .controls .liceTit{padding:0 15px;vertical-align:middle;color:#010101}
.lifeDetail .controls:last-child{border-bottom:none;padding:7px 0}
.lifeDetail .controls:last-child input{width:77%}

.rankWrite .controls{text-align:left;padding:0 0 15px;margin-bottom:3px;border-bottom:1px solid #bfc2c6;white-space:nowrap}
.rankWrite .controls .col{color:#333;white-space:nowrap;padding-left:5px}
.rankWrite .controls .liceTit{padding:0 15px 0 0;vertical-align:middle;color:#010101}
.rankWrite .controls:last-child{border-bottom:none;padding:7px 0 30px}
.rankWrite .controls:last-child input{width:77%}

.lifeEdit{padding-bottom:70px}
.lifeEdit .fixContent.row.btns.margin{padding-bottom:0;bottom:15px}
.lifeEdit .board{margin:15px 0}
.lifeEdit .board .write{margin-top:10px}
.lifeEdit .board .write textarea{height:250px;word-wrap:break-word;word-break:break-all}
.lifeEdit .grade .title{position:relative;padding-left:18px}
.lifeEdit .grade .title:after{content:'';display:inline-block;position:absolute;left:0;top:7px;width:13px;height:10px;background-position:-175px 0;background-image:url('/static/images/common/icon_sprite.png');background-repeat:no-repeat;background-size:360px auto}
.lifeEdit .grade .state{height:5px;margin-top:10px;background-color:#f1f2f4;border-radius:2px}
.lifeEdit .grade .state span{display:inline-block;position:relative;height:100%;background-color:#f99b3b;vertical-align:top}
.lifeEdit .grade .state span:before,
.lifeEdit .grade .state span:after{content:'';display:inline-block;position:absolute;border-radius:50%;box-sizing:border-box}
.lifeEdit .grade .state span:before{width:20px;height:20px;background-color:#f99b3b;right:-6px;top:-7px}
.lifeEdit .grade .state span:after{width:14px;height:15px;background-color:#fff;right:-3px;top:-5px}

.lifeEdit .grade.flesh .state span{background-color:#f99b3b}
.lifeEdit .grade.flesh .state span:before{background-color:#f99b3b}
.lifeEdit .grade.flesh .number li.active label{color:#f99b3b}

.lifeEdit .grade.soul .state span{background-color:#9562ca}
.lifeEdit .grade.soul .state span:before{background-color:#9562ca}
.lifeEdit .grade.soul .number li.active label{color:#9562ca}

.lifeEdit .grade.spirit .state span{background-color:#74bae2}
.lifeEdit .grade.spirit .state span:before{background-color:#74bae2}
.lifeEdit .grade.spirit .number li.active label{color:#74bae2}

.lifeEdit .grade.environment .state span{background-color:#89ca55}
.lifeEdit .grade.environment .state span:before{background-color:#89ca55}
.lifeEdit .grade.environment .number li.active label{color:#89ca55}

.lifeEdit .grade .number{position:relative;height:25px}
.lifeEdit .grade .number li{position:absolute;bottom:0}
.lifeEdit .grade .number li.num1{left:0}
.lifeEdit .grade .number li.num2{left:16%}
.lifeEdit .grade .number li.num3{left:36%}
.lifeEdit .grade .number li.num4{right:36%}
.lifeEdit .grade .number li.num5{right:16%}
.lifeEdit .grade .number li.num6{right:0}
.lifeEdit .grade .number li label{font-size:13px;color:#333}
.lifeEdit .grade .number li.active label{font-weight:bold;color:#f99b3b}

.rankDetail .plans time{display:block;margin-top:15px;font-size:13px;color:#333;text-align:right}
.rankDetail .plans .rank{position:relative;min-height:80px}
.rankDetail .plans .rank:before{content:'';display:inline-block;position:absolute;left:40px;top:0;height:130%;border-left:1px solid #c9c9c9}
.rankDetail .plans .rank + .rank{margin-top:15px}
.rankDetail .plans .rank:last-child:before{content:none}
.rankDetail .plans .rank:after{content:'';display:block;clear:both}
.rankDetail .plans .rank .head{width:80px;height:80px;padding:21px 0 0;position:absolute;left:0;top:0;line-height:1.4;font-size:14px;color:#333;text-align:center;background-color:#fff;border-radius:50%;box-sizing:border-box}
.rankDetail .plans .rank .head strong{display:block}
.rankDetail .plans .rank .head small{display:block;padding-bottom:4px;margin-bottom:1px;line-height:1.3;font-size:10px;border-bottom:1px solid rgba(255,255,255,.3)}
.rankDetail .plans .rank .head span{display:block;font-size:12px}
.rankDetail .plans .rank ul{position:relative;float:right;width:70%;margin-top:10px;padding:0 20px 15px;background-color:#fff;border:1px solid #e2e2e2;border-radius:2px;box-sizing:border-box}
.rankDetail .plans .rank ul li{margin-top:13px;font-size:13px;color:#333}
.rankDetail .plans .rank ul li span{color:#666}
.rankDetail .plans .rank ul:before,
.rankDetail .plans .rank ul:after{content:'';display:inline-block;position:absolute;top:19px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:0}
.rankDetail .plans .rank ul:before{left:-10px;border-right:10px solid #e2e2e2}
.rankDetail .plans .rank ul:after{left:-8px;border-right:10px solid #fff}

.rankDetail .plans .rank.sales .head{border:3px solid #c6edfb}
.rankDetail .plans .rank.diamond .head{border:3px solid #96def6}
.rankDetail .plans .rank.sharon .head{border:3px solid #6ed4f5}
.rankDetail .plans .rank.star .head{border:3px solid #59d0f6}
.rankDetail .plans .rank.royal .head{border:3px solid #00b6f0}
.rankDetail .plans .rank.crown .head{border:3px solid #009ad3}
.rankDetail .plans .rank.imperial .head{border:3px solid #0c83ce}

.rankDetail .board{margin-top:22px}
.rankDetail .board .content{padding:10px 0;font-size:14px;color:#333;border-top:1px solid #707780;border-bottom:1px solid #e2e2e2}

.rankWrite .guide{height:130px;margin-bottom:15px;color:#fff;text-align:center;font-size:13px;background-image:url('/static/images/common/promotion_write_bg.jpg');background-repeat:no-repeat;background-position:0 0;background-size:cover;box-sizing:border-box}
.rankWrite .guide{padding-top:18px}
.rankWrite .guide p{font-size:19px;padding-bottom:5px}
.rankWrite .plan .btns{margin:10px 0;text-align:right}
.rankWrite .board{margin-top:10px}
.rankWrite .board textarea{height:150px}

/* 계보도 */
.tree #header{border-bottom:1px solid #aaa}
.tree rect{fill:transparent}
.tree .person{font: 14px sans-serif;cursor: pointer}
.tree .link{fill:none;stroke:#e2e2e2;stroke-width:2px}
.tree .added span{display:inline-block;width:20px;height:20px;font-size:12px;vertical-align:middle;text-align:center;border-radius:2px;box-sizing:border-box}
.tree .added .couple{background-color:transparent;color:#fff;border:1px solid #fff}

svg .node.small.blue rect{fill:#4c86e6}
svg .node.large.blue .head rect{fill:#417ad9;stroke:#417ad9;stroke-width:1.5px}
svg .node.small.red rect{fill:#f38e28}
svg .node.large.red .head rect{fill:#f38e28;stroke:#e98725;stroke-width:1.5px}
svg .node.small.green rect{fill:#33b573}
svg .node.large.green .head rect{fill:#33b573;stroke:#2aa868;stroke-width:1.5px;stroke-top-width:0}
svg .node.small.gray rect{fill:#d9d9d9}
svg .node.large.gray .head rect{fill:#d9d9d9;stroke:#d6d6d6;stroke-width:1.5px}
svg .node.large.gray .body .title{fill:#dfe3e6 !important}
svg .node.large.gray .body .value{fill:#c2c2c2 !important}
svg .node.large.gray .body .button{opacity:.4}

svg .node.large .body rect{fill:#fff;stroke:#e2e2e2;stroke-width:1.5px}
svg .node.large .head text{fill:rgba(255,255,255,.6)}

/* 계보도 스타일 변경될거  */
.tree svg .node.large .headRect{stroke-width:2px}
.tree svg .node.large.green .headRect{fill:#33b573;stroke:#2aa868}
.tree svg .node.large.blue .headRect{fill:#4c86e6;stroke:#417ad9}
.tree svg .node.large.red .headRect{fill:#f38e28; stroke:#e98725}
.tree svg .node.large.gray .headRect{fill:#d9d9d9;stroke:#d6d6d6}
.tree svg .node.large .bodyRect{fill:#fff;stroke:#e2e2e2;stroke-width:2px}
.tree .btns{position:fixed;left:0;right:0;bottom:0;padding:10px 15px}
.tree .btns:after{content:'';display:block;clear:both}
.tree .btns .btnPrev{float:left;background-color:#fff;border:1px solid #c6c6c6}
.tree .btns .btnSearch{float:right;padding:3px 0 0;background-color:#2dbfed;border:none}
.tree .row.btns.floating{height:70px;margin-bottom:0;padding:10px 10px;border-top:1px solid #eaebed}

.nodeInfo .layout{min-height:85px;-webkit-box-shadow: 0 -1px 2px rgba(0,0,0,.2);box-shadow: 0 -1px 2px rgba(0,0,0,.2)}
.nodeInfo .layout .row{display:table;table-layout:fixed;width:100%;min-height:85px;color:#fff}
.nodeInfo .layout .row.blue{background-color:#5e92e8}
.nodeInfo .layout .row.red{background-color:#e19230}
.nodeInfo .layout .row.green{background-color:#47bc81}
.nodeInfo .layout .row.gray{background-color:#bababa}
.nodeInfo .layout .row .col{position:relative;display:table-cell;box-sizing:border-box}
.nodeInfo .layout .row .col small{font-size:14px;line-height:1;vertical-align:top;color:rgba(255,255,255,.6)}
.nodeInfo .layout .row .col .name{font-size:19px}
.nodeInfo .layout .row .col .name.small{font-size:15px}
.nodeInfo .layout .row .col .data{position:absolute;left:15px;right:15px;bottom:12px;font-size:14px;color:#fff;line-height:1.2}
.nodeInfo .layout .row .col .data p{float:left;position:relative;padding-left:5px;margin-left:5px}
.nodeInfo .layout .row .col .data p:after{content:'';display:inline-block;position:absolute;left:0;top:50%;height:9px;margin-top:-5px;border-left:1px solid rgba(255,255,255,.3)}
.nodeInfo .layout .row .col .data p:first-child{padding-left:0;margin-left:0}
.nodeInfo .layout .row .col .data p:first-child:after{content:none}
.nodeInfo .layout .row .col .data .icon.lower2{margin-right:3px}

.nodeInfo .layout .row .col .ellipsis{display:inline-block;max-width:100%;white-space:nowrap;overflow: hidden;text-overflow:ellipsis}

.nodeInfo .layout .row .col .added{display:inline-block;height:15px;vertical-align:top}
.nodeInfo .layout .row .col .added:after{content:'';display:block;clear:both}
.nodeInfo .layout .row .col .added span{display:none;float:left;width:20px;height:20px;font-size:12px;text-align:center;vertical-align:text-top;border-radius:2px;box-sizing:border-box}
.nodeInfo .layout .row .col .added.tel .icon.tel3,
.nodeInfo .layout .row .col .added.couple .icon.couple{display:inline-block;font:0/0 a}
.nodeInfo .layout .row .col .added span + span{margin-left:6px}
.nodeInfo .layout .row .col .name{height:24px;margin-top:4px;line-height:1;word-wrap:break-word;word-break:break-all}
.nodeInfo .layout .row .col .name strong{ vertical-align:middle;line-height:1;box-sizing: border-box}

.nodeInfo .layout .row .col2 .data:after,
.nodeInfo .layout .row .col2 .data:after{content:'';display:block;clear:both}
.nodeInfo .layout .row .col2 .data dt{float:left;margin-right:10px;font-size:12px;color:rgba(255,255,255,.6);line-height:1.4}
.nodeInfo .layout .row .col2 .data dd{float:left;font-size:14px;line-height:1.2;color:#fff}

.nodeInfo .layout .row .col1{width:42%;padding:15px 15px 35px;border-right:1px solid rgba(0,0,0,.05);font-size:0}
.nodeInfo .layout .row .col1 span{vertical-align:baseline;font-size:14px}
.nodeInfo .layout .row .col1 .added{vertical-align:top}
.nodeInfo .layout .row .col1 .id{display:inline-block;height:15px;line-height:1;font-size:14px;padding-top:2px}
.nodeInfo .layout .row .col2{position:relative;width:45%;padding:15px 15px 35px}
.nodeInfo .layout .row .col3{width:13%;background-color:#fff;text-align:center;vertical-align:middle}
.nodeInfo .layout .row .col3 button{height:100%;vertical-align:top}

.nodeInfo .btnBookmark{position:absolute;right:7px;top:10px}

/* 계보도 설정 */
.treeSetting .body{padding-bottom:20px;background-color:#707780;color:#ccc;font-size:15px}
.treeSetting .controls{height:50px;color:#fff;background-color:#636971;box-sizing:border-box;text-align:center}
.treeSetting .controls .col{line-height:50px}
.treeSetting .controls .col + .col{padding-left:10px}
.treeSetting .controls .col .radio{-webkit-transform: translateY(1px);transform: translateY(1px);vertical-align:sub}
.treeSetting .controls:after{content:'';display:block;clear:both}
.treeSetting .controls label{font-size:14px;vertical-align:bottom}
.treeSetting .checkbox,
.treeSetting .radio{background-color:transparent}
.treeSetting .content section{margin-top:15px}
.treeSetting .content section h3{padding:10px;color:#fff;border-bottom:1px solid #8d9299}
.treeSetting .content section ul{padding-left:15px}
.treeSetting .content section ul li{padding:7px 15px 7px 0;border-bottom:1px solid #8d9299}
.treeSetting .content section ul li:after{content:'';display:block;clear:both}
.treeSetting .content section ul li label{float:left;font-size:15px}
.treeSetting .content section ul li label small{font-size:12px}
.treeSetting .content section ul li .checkbox{float:right}
.treeSetting .bullet{color:#ccc}
.treeSetting .bullet:after{background-color:#ccc}

.treeSetting .row.period{display:table;table-layout:fixed;position:relative;width:100%;margin-top:10px;padding-right:15px;box-sizing:border-box}
.treeSetting .row.period .col{position:relative;display:table-cell;width:48%}
.treeSetting .row.period .col.dash{width:6%;text-align:center}
.treeSetting .row.period .col input[data-role='date']{/*padding-right:30px;*/ font-size:14px;background-color:transparent;color:#fff}
.treeSetting .row.period .col .icon.calendar{position:absolute;right:10px;top:10px;pointer-events:none}

.lowerMember{height:100vh}
.lowerMember .row.search input[type='search']{padding-right:79px}
.lowerMember .row.search .btnDelete{right:40px;width:29px;height:40px}
.lowerMember .row.search .btnDelete .icon{position:absolute;top:50%;left:50%;width:17px;height:17px;margin:-8.5px 0 0 -8.5px;border-radius:50%;background-color:#dcdcdc;background-image:none}
.lowerMember .row.search .btnDelete .icon.delete:after{content: '';display: inline-block;width: 6.5px;height: 6.5px;margin-top: 5.25px;background-size: 360px auto;background-image: url('/static/images/common/icon_sprite.png');background-position: -230px -25px}

.lowerMember .row.search input[type='search']::-webkit-search-decoration,
.lowerMember .row.search input[type='search']::-webkit-search-cancel-button,
.lowerMember .row.search input[type='search']::-webkit-search-results-button,
.lowerMember .row.search input[type='search']::-webkit-search-results-decoration{display:none}

.text-independent{margin-top:10px;font-size:12px;line-height:15px;color:#666}
.text-lower-detail{float:right}
.btn-lower-detail{padding:3px 5px;border:1px solid #ddd;box-sizing:border-box;font-size:12px;border-radius:2px;background-color:#fff}
.btn-lower-detail.btn-full{width:100%}
.box-lower-result .table{border-top:1px solid #e2e2e2;font-size:12px}
.box-lower-result tfoot{border-top:1px solid #e2e2e2}
.box-lower-result tfoot th, td{vertical-align:middle;border-right:1px solid #e2e2e2}
.box-lower-result tfoot th{padding:5px 10px 5px 10px}
.box-lower-result tfoot td{padding:5px}
.box-lower-result .text-sum{display:none;text-align:right;font-weight:bold;font-size:14px;color:#fa993b}
.box-lower-result .text-sum.is-active{display:block}
.box-lower-result .ico-sum{display:none;text-align:center}
.box-lower-result .ico-sum.is-active{display:block}