@charset "utf-8";
ul, li{list-style: none;}
.blind{position:absolute;clip:rect(0 0 0 0);margin:-1px;width:1px;height:1px;overflow:hidden;}
.container{padding:20px 50px;}
/* half pie chart */
.chart_box{position:relative;margin:0 auto;width:450px;height:225px;}
.chart_box [class^="item_box"]{position:absolute;top:50px;left:50px;width:350px;height:175px;}
.chart_box [class^="item_box"] .title{position:absolute;width:60px;text-align:center;font-size:16px;font-weight:bold;color:#dbdbdb;z-index:11;}
.chart_box .item_box_1 .title{top:139px;left:-58px;transform:rotate(-80deg);}
.chart_box .item_box_2 .title{top:70px;left:-39px;transform:rotate(-67deg);}
.chart_box .item_box_3 .title{top:10px;left:10px;transform:rotate(-40deg);}
.chart_box .item_box_4 .title{top:-28px;left:74px;transform:rotate(-20deg);}
.chart_box .item_box_5 .title{top:-40px;left:144px;}
.chart_box .item_box_6 .title{top:-30px;left:216px;transform:rotate(20deg);}
.chart_box .item_box_7 .title{top:4px;left:276px;transform:rotate(40deg);}
.chart_box .item_box_8 .title{top:60px;left:321px;transform:rotate(60deg);}
.chart_box .item_box_9 .title{top:130px;left:346px;transform:rotate(80deg);}
.chart_box .item_box_1.active .title,
.chart_box .item_box_2.active .title,
.chart_box .item_box_3.active .title{color:#fc5356;}
.chart_box .item_box_4.active .title,
.chart_box .item_box_5.active .title,
.chart_box .item_box_6.active .title,
.chart_box .item_box_7.active .title{color:#febc2c;}
.chart_box .item_box_8.active .title,
.chart_box .item_box_9.active .title{color:#1fc47c;}
/*텍스트 라벨에 눈금 적용할 경우*/
.chart_box [class^="item_box"] .title:before{content:'';position:absolute;display:none;width:3px;height:17px;background:#fff;}
.chart_box .item_box_1 .title:before{top:40px;right:-8px;transform:rotate(10deg);}
.chart_box .item_box_2 .title:before{top:47px;right:-3px;transform:rotate(15deg);}
.chart_box .item_box_3 .title:before{top:42px;right:-3px;transform:rotate(10deg);}
.chart_box .item_box_4 .title:before{top:42px;right:0;transform:rotate(12deg);}
.chart_box .item_box_5 .title:before{top:41px;right:-1px;transform:rotate(10deg);}
.chart_box .item_box_6 .title:before{top:44px;right:1px;transform:rotate(10deg);}
.chart_box .item_box_7 .title:before{top:44px;right:-5px;transform:rotate(10deg);}
.chart_box .item_box_8 .title:before{top:41px;right:-5px;transform:rotate(10deg);}
.chart_box .item_box_9 .title:before{display:none;}
/*//텍스트 라벨에 눈금 적용할 경우*/
.chart_box .arrow_box{position:absolute;bottom:0;left:77px;z-index:11;transform-origin:94% 50%;animation-timing-function:linear;animation-fill-mode:forwards;}
.chart_box .arrow_box.step1{animation-name:arrow_step1;animation-duration:.1s;}
.chart_box .arrow_box.step2{animation-name:arrow_step2;animation-duration:.4s;}
.chart_box .arrow_box.step3{animation-name:arrow_step3;animation-duration:.6s;}
.chart_box .arrow_box.step4{animation-name:arrow_step4;animation-duration:.8s;}
.chart_box .arrow_box.step5{animation-name:arrow_step5;animation-duration:1s;}
.chart_box .arrow_box.step6{animation-name:arrow_step6;animation-duration:1.2s;}
.chart_box .arrow_box.step7{animation-name:arrow_step7;animation-duration:1.4s;}
.chart_box .arrow_box.step8{animation-name:arrow_step8;animation-duration:1.6s;}
.chart_box .arrow_box.step9{animation-name:arrow_step9;animation-duration:1.8s;}

.chart-skills {
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
}

.chart-skills *,
.chart-skills::before {
    box-sizing: border-box;
}

/* chart styles */
.chart-skills {
    position: relative;
    padding:50px 50px 0;
    width: 350px;
    height: 175px;
    overflow: hidden;
}
.chart-skills::before,
.chart-skills::after {
    position: absolute;
    top:50px;
}
.chart-skills::before {
    content: '';
    width: inherit;
    height: inherit;
    border: 60px solid #d6d6d6;
    border-bottom: none;
    border-top-left-radius: 175px;
    border-top-right-radius: 175px;
}
.chart-skills .per {
    position: absolute;
    top: 100%;
    left:0;
    width: inherit;
    height: inherit;
    border: 60px solid;
    border-top: none;
    border-bottom-left-radius: 175px;
    border-bottom-right-radius: 175px;
    transform-origin: 50% 0;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    animation-fill-mode: forwards;
    animation-duration: .2s;
    animation-timing-function: linear;
}
.chart-skills .item_box_1 .per {z-index: 9;border-color: #fc5356;}
.chart-skills .item_box_2 .per {z-index: 8;border-color: #fc5356;}
.chart-skills .item_box_3 .per {z-index: 7;border-color: #fc5356;}
.chart-skills .item_box_4 .per {z-index: 6;border-color: #febc2c;}
.chart-skills .item_box_5 .per {z-index: 5;border-color: #febc2c;}
.chart-skills .item_box_6 .per {z-index: 4;border-color: #febc2c;}
.chart-skills .item_box_7 .per {z-index: 3;border-color: #febc2c;}
.chart-skills .item_box_8 .per {z-index: 2;border-color: #1fc47c;}
.chart-skills .item_box_9 .per {z-index: 1;border-color: #1fc47c;}
.chart-skills .item_box_1.active .per{animation-name: rotate1;}
.chart-skills .item_box_2.active .per{animation-name: rotate2;animation-delay:.2s;}
.chart-skills .item_box_3.active .per{animation-name: rotate3;animation-delay:.4s;}
.chart-skills .item_box_4.active .per{animation-name: rotate4;animation-delay:.6s;}
.chart-skills .item_box_5.active .per{animation-name: rotate5;animation-delay:.8s;}
.chart-skills .item_box_6.active .per{animation-name: rotate6;animation-delay:1s;}
.chart-skills .item_box_7.active .per{animation-name: rotate7;animation-delay:1.2s;}
.chart-skills .item_box_8.active .per{animation-name: rotate8;animation-delay:1.4s;}
.chart-skills .item_box_9.active .per{animation-name: rotate9;animation-delay:1.6s;}

.chart_box.type_small{width:190px;height:95px;}
.chart_box.type_small [class^="item_box"]{top:0;left:0;width:190px;height:95px;}
.chart_box.type_small .chart-skills{padding:0;width:190px;height:95px;}
.chart_box.type_small .chart-skills::before,
.chart_box.type_small .chart-skills .per{border-width:50px;}
.chart_box.type_small .chart-skills::before,
.chart_box.type_small .chart-skills::after{top:0;}
.chart_box.type_small .arrow_box{bottom:0;left:35px;width:65px;height:12px;}
.chart_box.type_small .arrow_box img{width:100%;border-radius:0;vertical-align:top;}

.chart_box .gradation{position:absolute;top:0;bottom:0;left:0;right:0;z-index:11;}
.chart_box .gradation span{position:absolute;width:3px;height:17px;background:#fff;}
.chart_box .gradation span:nth-of-type(1){top:159px;left:66px;transform:rotate(-68deg);}
.chart_box .gradation span:nth-of-type(2){top:110px;left:95px;transform:rotate(-55deg);}
.chart_box .gradation span:nth-of-type(3){top:72px;left:140px;transform:rotate(-27deg);}
.chart_box .gradation span:nth-of-type(4){top:52px;left:194px;transform:rotate(-8deg);}
.chart_box .gradation span:nth-of-type(5){top:52px;left:252px;transform:rotate(8deg);}
.chart_box .gradation span:nth-of-type(6){top:72px;left:307px;transform:rotate(27deg);}
.chart_box .gradation span:nth-of-type(7){top:110px;left:351px;transform:rotate(55deg);}
.chart_box .gradation span:nth-of-type(8){top:159px;left:381px;transform:rotate(68deg);}
.chart_box.type_small .gradation span{position:absolute;width:2px;height:10px;background:#fff;}
.chart_box.type_small .gradation span:nth-of-type(1){top:59px;left:9px;transform:rotate(-68deg);}
.chart_box.type_small .gradation span:nth-of-type(2){top:33px;left:24px;transform:rotate(-55deg);}
.chart_box.type_small .gradation span:nth-of-type(3){top:12px;left:49px;transform:rotate(-27deg);}
.chart_box.type_small .gradation span:nth-of-type(4){top:1px;left:78px;transform:rotate(-8deg);}
.chart_box.type_small .gradation span:nth-of-type(5){top:1px;left:109px;transform:rotate(8deg);}
.chart_box.type_small .gradation span:nth-of-type(6){top:12px;left:139px;transform:rotate(27deg);}
.chart_box.type_small .gradation span:nth-of-type(7){top:33px;left:163px;transform:rotate(55deg);}
.chart_box.type_small .gradation span:nth-of-type(8){top:59px;left:178px;transform:rotate(68deg);}

/* bar chart - horizontal */
.stats_graph_box{position:relative;padding-bottom:20px;}
.stats_graph_box .graph{position:relative;height:46px;background:#f0f0f0;border-radius:4px;font-size:0;white-space:nowrap;overflow:hidden;}
.stats_graph_box .graph:after{content:'';display:block;clear:both;}
.stats_graph_box .bar{position:relative;display:inline-block;height:46px;background:#ddd;border-radius:4px;overflow:hidden;}
.stats_graph_box .bar+.bar{margin-left:-5px;padding-right:5px;box-sizing:content-box;border-radius:0 4px 4px 0;}
.stats_graph_box .bar.green{z-index:1;background: #14d57e;}
.stats_graph_box .bar.pink{background: #e750b0;}
.stats_graph_box .bar.clear{background:transparent;}
.stats_graph_box .bar .desc{color:#000;}
.stats_graph_box .desc{position:absolute;top:50%;left:50%;margin:0;text-align:center;font-size:12px;line-height:16px;color:#fff;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.stats_graph_box .desc em{font-style:normal;font-size:16px;font-weight:700;}
.stats_graph_box .desc dd{margin:0;}
.fixed_data{position:absolute;top:52px;width:120px;margin:0;text-align:center;font-size:10px;color:#000;}
.fixed_data:before{content:'';position:absolute;top:-53px;left:50%;width:1px;height:50px;border-left:1px dashed #bababa;}
.fixed_data .item{float:left;}
.fixed_data .item + .item dt{padding-left:8px;}
.fixed_data .item + .item:before{content:'/';position:absolute;top:0;left:2px;}
.fixed_data .item + .item dd:before{content:'/';position:absolute;top:2px;left:-1px;}
.fixed_data .item dt{position:relative;}
.fixed_data .item dd{position:relative;margin:0;}
.fixed_data .item dd em{font-style:normal;font-size:13px;font-weight:700;}

/* bar chart - vertical */
.vertical_chart_box {
    position: relative;
}
.vertical_chart_box .chart_inbox {
    position: relative;
    margin-bottom: 45px;
    padding-left: 20px;
    box-sizing: border-box;
    height: 200px;
}
.vertical_chart_box .axis_y {
    display: -webkit-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 20px;
    height: 100%;
    font-size: 12px;
    color: #4a4a4a;
}
.vertical_chart_box .axis_y:before {
    content: '';
    position: absolute;
    top: 5px;
    bottom: 0;
    right: 0;
    width: 1px;
    background: #d3d3d3;
}
.vertical_chart_box .axis_x {
    display: -webkit-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    position: relative;
    padding: 0;
    box-sizing: border-box;
    height: 100%;
    border-bottom: 1px solid #d3d3d3;
}
.vertical_chart_box .axis_x .item {
    flex: 1;
    position: relative;
}
.vertical_chart_box .axis_x .item .text_box {
    position: absolute;
    bottom: -43px;
    left: 50%;
    text-align: center;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}
.vertical_chart_box .axis_x .item .text_box .day {
    display: block;
    font-size: 12px;
    line-height: 19px;
    color: #4a4a4a;
}
.vertical_chart_box .axis_x .item .text_box .day.sat {
    color: #3475ed;
}
.vertical_chart_box .axis_x .item .text_box .day.sun {
    color: #eb474a;
}
.vertical_chart_box .axis_x .item .text_box .time {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: #999;
}
.vertical_chart_box .axis_x .graph {
    display: -webkit-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: column-reverse;
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 35px;
    height: 100%;
    background: #e8e8e8;
    border-radius: 3px 3px 0 0;
    overflow: hidden;
}
.vertical_chart_box .axis_x .graph .time {
    display: block;
    position: relative;
    margin-bottom: -4px;
    padding-top: 4px;
    box-sizing: content-box;
    width: 100%;
    border-radius: 3px 3px 0 0;
}
.vertical_chart_box .axis_x .graph .time.data1 {
    background: #e73ea9;
    z-index: 3;
}
.vertical_chart_box .axis_x .graph .time.data2 {
    background: #30d97d;
    z-index: 2;
}
.vertical_chart_box .axis_x .graph .time.data3 {
    background: #f5dc12;
    z-index: 1;
}
.vertical_chart_box .axis_x button.graph {
    border: 0;
}

/* sickbed chart */
.section_sickbed .basic_chart_box.type_scroll{display:-webkit-flex;display:-ms-flex;display:-o-flex;display:flex;align-items:center;}
.drawing_table_wrap{position:relative;min-width:100%;}
.drawing_table_wrap .bg_table{width:100%;table-layout:fixed;box-sizing:border-box;border:1px solid rgba(255,255,255,.15);border-collapse:collapse;}
.drawing_table_wrap .bg_table tr{border-top:1px solid rgba(255,255,255,.15);}
.drawing_table_wrap .bg_table tr:first-of-type{border-top:0;}
.drawing_table_wrap .bg_table tbody td{height:21px;border-left:1px solid rgba(255,255,255,.15);}
.drawing_table_wrap .bg_table tbody td:first-of-type{border-left:0;}
.building_container{position:absolute;top:0;left:0;bottom:-50px;right:0;}
.building_container .filter_btn_wrap{position:absolute;bottom:10px;left:0;right:0;text-align:center;}
.filter_btn_wrap .title{display:inline-block;vertical-align:top;margin-right:5px;font-size:14px;font-weight:500;line-height:27px;}
.filter_btn_wrap .filter_btn_box{display:inline-block;vertical-align:top;height:27px;background:rgba(255,255,255,.1);border-radius:5px;}
.filter_btn_wrap .filter_btn_box .btn_filter{float:left;padding:0 6px;box-sizing:border-box;vertical-align:top;height:100%;border:0;background:none;border-radius:5px;font-size:13px;color:rgba(255,255,255,.5);white-space:nowrap;}
.filter_btn_wrap .filter_btn_box .btn_filter.on{background:rgba(255,255,255,.16);color:#fff;}
.filter_btn_wrap .filter_btn_box .btn_filter .num{position:relative;margin-left:5px;padding-left:6px;}
.filter_btn_wrap .filter_btn_box .btn_filter .num:before{content:'';position:absolute;top:50%;left:0;margin-top:-5px;width:1px;height:10px;background:rgba(255,255,255,.4);}
.building_container .building_section{position:absolute;top:0;bottom:0;}
.building_container .building_section.type1{width:42%;}
.building_container .building_section.type2{left:42%;width:26%;}
.building_container .building_section.type3{left:68%;width:32%;}
.building_container .building_wrap .bed{display:inline-block;vertical-align:top;margin-left:2px;width:6px;height:12px;border-radius:2px;}
.building_container .building_wrap .bed.purple{background:#779de2;}
.building_container .building_wrap .bed.green{background:#63eec1;}
.building_container .building_wrap .bed.blue{background:#00e2ff;}
.building_container .building_wrap .tooltip_box:hover .bed{background:#fff;}
.building_container .building_section .building_wrap{display:-webkit-flex;display:-ms-flex;display:-o-flex;display:flex;flex-direction:column-reverse;position:absolute;top:0;bottom:50px;left:0;right:0;margin:0 auto;box-sizing:border-box;width:calc(100% - 100px);border:1px solid transparent;}
.building_container .building_section.type1 .building_wrap{border-color:#1ba1fb;border-width:0 0 1px 0;}
.building_container .building_section.type2 .building_wrap{border-color:#ccd61d;border-width:0 0 1px 0;}
.building_container .building_section.type3 .building_wrap{border-color:#f57716;border-width:0 0 1px 0;}
.building_container .building_wrap .floor_box{display:-webkit-flex;display:-ms-flex;display:-o-flex;display:flex;position:relative;height:22px;}
.building_container .building_wrap .floor_box .floor{position:absolute;top:0;left:-30px;width:20px;text-align:right;font-size:10px;line-height:21px;color:rgba(255,255,255,.6);}
.building_container .building_wrap .floor_box .item{display:-webkit-flex;display:-ms-flex;display:-o-flex;display:flex;align-items:center;flex:1;position:relative;padding:0 2px;box-sizing:border-box;border:1px solid transparent;background:rgba(0,0,0,.2);font-size:10px;line-height:21px;color:rgba(255,255,255,.6);}
.building_container .building_wrap .floor_box .item.on{background:rgba(255,255,255,.08);}
.building_container .building_wrap .floor_box .item:first-of-type{border-left:1px solid #1ba1fb;}
.building_container .building_section.type2 .building_wrap .floor_box .item:first-of-type{border-left-color:#ccd61d;}
.building_container .building_section.type3 .building_wrap .floor_box .item:first-of-type{border-left-color:#f57716;}
.building_container .building_wrap .floor_box .item + .item{border-left:1px dotted #1ba1fb;}
.building_container .building_section.type2 .building_wrap .floor_box .item + .item{border-left-color:#ccd61d;}
.building_container .building_section.type3 .building_wrap .floor_box .item + .item{border-left-color:#f57716;}
.building_container .building_section.type3 .floor_box:nth-child(n+3):nth-child(-n+11){margin-left:25%;}
.building_container .building_wrap .tooltip_box{height:12px;}
.building_container .building_wrap .chart_tooltip{padding:10px 5px;min-width:125px;text-align:left;-webkit-transform:translateX(-49%);-ms-transform:translateX(-49%);-o-transform:translateX(-49%);transform:translateX(-49%);}
.building_container .building_wrap .chart_tooltip.more{width:157px;}
.building_container .building_wrap .chart_tooltip .row_item{height:15px;}
.building_container .building_wrap .chart_tooltip .row_item + .row_item{margin-top:5px;}
.building_container .building_wrap .chart_tooltip .row_item .num{margin-left:4px;vertical-align:top;font-size:12px;line-height:14px;}
.building_container .building_wrap .tooltip_box .btn_more{position:relative;margin-left:2px;vertical-align:top;width:6px;height:12px;border:0;background:none;}
.building_container .building_wrap .tooltip_box .btn_more .icon_more{position:absolute;top:50%;left:50%;margin-top:-2px;margin-left:-4px;width:4px;height:4px;border-top:1px solid #fff;border-right:1px solid #fff;transform:rotate(45deg);}
.label_bed{display:inline-block;vertical-align:top;min-width:63px;height:15px;background:#7c7c7c;border-radius:16px;text-align:center;font-size:10px;line-height:14px;color:#fff;}
.label_bed.pink{background:#ef5194;}
.label_bed.blue{background:#1a62ff;}
.label_bed .title{position:relative;margin-right:3px;padding-right:3px;}
.label_bed .title:before{content:'';position:absolute;top:4px;right:0;width:1px;height:9px;background:rgba(255,255,255,.4);}
/* decoration */
.building_container .building_section.type1 .floor_box:nth-child(n+4) .item:last-of-type{border-left-style:solid;background:none;}
.building_container .building_section.type1 .floor_box:nth-child(-n+4) .item:last-of-type{border-right:1px solid #1ba1fb;}
.building_container .building_section.type1 .floor_box:nth-child(4) .item:last-of-type{overflow:hidden;}
.building_container .building_section.type1 .floor_box:nth-child(4) .item:last-of-type:before{content:'';position:absolute;top:0;right:0;width:100px;height:1px;background:#1ba1fb;transform-origin:right;transform:rotate(-12deg);}
.building_container .building_section.type1 .floor_box:nth-child(4) .item:last-of-type:after{content: '';position: absolute;top:0;right: 0;border-top: 24px solid rgba(0,0,0,.2);border-right: 107px solid transparent;transform:rotate(180deg);}
.building_container .building_section.type1 .floor_box:nth-of-type(18) .item:nth-of-type(1),
.building_container .building_section.type1 .floor_box:nth-of-type(18) .item:nth-of-type(2),
.building_container .building_section.type1 .floor_box:nth-of-type(18) .item:nth-of-type(5){border-top:1px solid #1ba1fb;}
.building_container .building_section.type1 .top_floor .item{justify-content:center;border:1px solid transparent;background:none;}
.building_container .building_section.type1 .top_floor .item:nth-of-type(3):before{content:'';position:absolute;top:0;left:0;height:0;width:150%;border-bottom:22px solid rgba(0,0,0,.2);border-left:25px solid transparent;border-right:25px solid transparent;}
.building_container .building_section.type1 .top_floor .item:nth-of-type(3) .deco_item{position:absolute;top:-1px;left:0;width:101%;height:23px;overflow:hidden;}
.building_container .building_section.type1 .top_floor .item:nth-of-type(3) .deco_item:before{content:'';position:absolute;top:0;left:-18px;width:40px;height:1px;background:#1ba1fb;transform-origin:right;transform:rotate(-43deg);}
.building_container .building_section.type1 .top_floor .item:nth-of-type(3) .deco_item:after{content:'';position:absolute;top:0;left:21px;right:0;height:1px;background:#1ba1fb;}
.building_container .building_section.type1 .top_floor .item:nth-of-type(4){border-left:1px dotted #1ba1fb;}
.building_container .building_section.type1 .top_floor .item:nth-of-type(4) .deco_item{position:absolute;top:-1px;left:0;width:101%;height:23px;overflow:hidden;}
.building_container .building_section.type1 .top_floor .item:nth-of-type(4) .deco_item:before{content:'';position:absolute;top:0;right:-18px;width:40px;height:1px;background:#1ba1fb;transform-origin:left;transform:rotate(43deg);}
.building_container .building_section.type1 .top_floor .item:nth-of-type(4) .deco_item:after{content:'';position:absolute;top:0;left:0;right:21px;height:1px;background:#1ba1fb;}
.building_container .building_section.type2 .floor_box:nth-child(-n+7) .item:last-of-type{border-right-color:#ccd61d;}
.building_container .building_section.type2 .top_floor{padding-left:30px;}
.building_container .building_section.type2 .top_floor .item + .item{border-left:0;}
.building_container .building_section.type2 .top_floor .item:first-of-type{flex:.69;border-top-color:#ccd61d;}
.building_container .building_section.type2 .top_floor .item:first-of-type:before{content:'';position:absolute;bottom:-2px;left:-31px;width:31px;height:1px;border-top:1px solid #ccd61d;}
.building_container .building_section.type2 .top_floor .item:first-of-type:after{content:'';position:absolute;top:-13px;right:-2px;width:1px;height:13px;background:#ccd61d;}
.building_container .building_section.type2 .top_floor .item:nth-of-type(2):before{content:'';position:absolute;top:-13px;left:0;width:calc(100% - 30px);height:34px;border-top:1px solid #ccd61d;background:rgba(0,0,0,.2);}
.building_container .building_section.type2 .top_floor .item:nth-of-type(2):after{content:'';position:absolute;top:-13px;right:30px;width:1px;height:20px;background:#ccd61d;}
.building_container .building_section.type2 .top_floor .item:nth-of-type(2),
.building_container .building_section.type2 .top_floor .item:nth-of-type(3){background:none;}
.building_container .building_section.type2 .top_floor .item:nth-of-type(3):before{content:'';position:absolute;bottom:-2px;left:-31px;border-top:14px solid transparent;border-left:135px solid rgba(0,0,0,.2);}
.building_container .building_section.type2 .top_floor .item:nth-of-type(3):after{content:'';position:absolute;top:6px;left:-32px;width:calc(100% + 34px);height:1px;background:#ccd61d;transform-origin:left;transform:rotate(6deg);}
.building_container .building_section.type2 .top_floor .item .tit{position:absolute;top:-38px;left:50%;margin-left:-5px;}
.building_container .building_section.type2 .floor_box:nth-last-of-type(2) .item:nth-of-type(2):before{content:'';position:absolute;top:-22px;left:-1px;width:1px;height:21px;border-left:1px dotted #ccd61d;}
.building_container .building_section.type2 .floor_box:nth-last-of-type(2) .item:nth-of-type(2):after{content:'';position:absolute;top:-10px;right:-3px;width:1px;height:10px;border-left:1px dotted #ccd61d;}
.building_container .building_section.type3 .floor_box:nth-child(-n+10) .item:last-of-type{border-right-color:#f57716;}
.building_container .building_section.type3 .floor_box.top_floor .item:first-of-type{border-left-color:transparent;border-bottom-color:#f57716;background:none;}
.building_container .building_section.type3 .floor_box.top_floor .item:nth-of-type(2){flex:1.5;border:1px solid #f57716;border-bottom-color:transparent;}
.building_container .building_section.type3 .floor_box.top_floor .item:last-of-type{border-left-color:transparent;border-bottom-color:#f57716;background:none;}
.building_container .building_section.type3 .top_floor .item .tit{position:absolute;top:-23px;left:50%;margin-left:-5px;}
.building_container .building_section.type3 .floor_box:first-of-type .item + .item{border-left-color:transparent;}
.building_container .building_section.type3 .floor_box:first-of-type .item:first-of-type:before{content:'';position:absolute;top:-36px;left:-1px;width:1px;height:14px;background:#f57716;}
.building_container .building_section.type3 .floor_box:nth-of-type(2) .item:first-of-type:before{content:'';position:absolute;bottom: 100%;left:0;border-top:13px solid transparent;border-left:110px solid rgba(0,0,0,.2);}
.building_container .building_section.type3 .floor_box:nth-of-type(2) .item:first-of-type:after{content:'';position:absolute;top:-2px;left:-1px;width:102%;height:1px;background:#f57716;transform-origin:right;transform:rotate(7deg);}
.building_container .building_section.type3 .floor_box:nth-of-type(2) .item:nth-of-type(2){border-left-color:transparent;}

/* animation */
@keyframes rotate1 {
    100% {
        transform: rotate(20deg);
        /**
         * 12% => 21.6deg
         */
    }
}

@keyframes rotate2 {
    0% {
        transform: rotate(20deg);
    }
    100% {
        transform: rotate(40deg);
        /**
         * 32% => 57.6deg
         * 57.6 + 21.6 => 79.2deg
         */
    }
}

@keyframes rotate3 {
    0% {
        transform: rotate(40deg);
    }
    100% {
        transform: rotate(60deg);
        /**
         * 34% => 61.2deg
         * 61.2 + 79.2 => 140.4deg
         */
    }
}

@keyframes rotate4 {
    0% {
        transform: rotate(60deg);
    }
    100% {
        transform: rotate(80deg);
        /**
         * 22% => 39.6deg
         * 140.4 + 39.6 => 180deg
         */
    }
}
@keyframes rotate5 {
    0% {
        transform: rotate(80deg);
    }
    100% {
        transform: rotate(100deg);
    }
}
@keyframes rotate6 {
    0% {
        transform: rotate(100deg);
    }
    100% {
        transform: rotate(120deg);
    }
}
@keyframes rotate7 {
    0% {
        transform: rotate(120deg);
    }
    100% {
        transform: rotate(140deg);
    }
}
@keyframes rotate8 {
    0% {
        transform: rotate(140deg);
    }
    100% {
        transform: rotate(160deg);
    }
}
@keyframes rotate9 {
    0% {
        transform: rotate(160deg);
    }
    100% {
        transform: rotate(180deg);
    }
}

@keyframes fade-in {
    0%,
    90% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes arrow_step1 {
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(5deg);
    }
}
@keyframes arrow_step2 {
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(25deg);
    }
}
@keyframes arrow_step3 {
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(47deg);
    }
}
@keyframes arrow_step4 {
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(70deg);
    }
}
@keyframes arrow_step5 {
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(91deg);
    }
}
@keyframes arrow_step6 {
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(109deg);
    }
}
@keyframes arrow_step7 {
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(131deg);
    }
}
@keyframes arrow_step8 {
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(153deg);
    }
}
@keyframes arrow_step9 {
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(173deg);
    }
}