.case_b{width:950px; margin:0px auto; }
/* .case_b .case_in{background:#c4d4e0; width: 100%; position: relative; height: 50px; margin-bottom:10px;} */
.case_b .case_in{background: #e8f1f9;  width: 100%; position: relative; height: 50px; margin-bottom:2px;}
.case_b .case_in > p{position: absolute; top: 15px; left:20px; color: #343434; font-size: 13px; font-weight: bold; line-height: 15px;}
.case_b .case_in > p input{vertical-align:top; margin-right:5px;}
.case_b .case_in .in{position: absolute; top:10px; left: 100px; }
.case_b .case_in ul{width: 100%; display: flex; }

.case_b .case_in li{ margin-left: 10px; width:67px; height:30px; text-align: center; font-size: 13px; line-height:30px; color: #343434; box-sizing:border-box; position: relative;  display: inline-block;}
.case_b .case_in li span{display: block;}

/* .case_b .case_in li:first-child{margin-left: 0;} */
/* .case_b .case_in li.blue1_b{background: #488fbb; color: #fff;  border: 1px #434343 solid; cursor: pointer; } */
/* .case_b .case_in li.wh_b{background: #fff;  border: 1px #434343 solid;  cursor: pointer;} */
/* .case_b .case_in li.sk_b{background: #aac6db;  border: 1px #434343 solid;  cursor: pointer;} */
/* .case_b .case_in li.blue2_b{background: #2e6c9f; color: #fff;  border: 1px #434343 solid;  cursor: pointer;} */


.case_b .case_in li:first-child{margin-left: 0;}
/* .case_b .case_in li.blue1_b{background: #488fbb; color: #fff;  border: 1px #434343 solid; cursor: pointer; } */
.case_b .case_in li.blue_b{background:   #149FFF; color: #fff;  border: 1px #434343 solid; cursor: pointer; }
.case_b .case_in li.wh_b{background: #fff;  border: 1px #434343 solid;  cursor: pointer;}
/* .case_b .case_in li.sk_b{background: #aac6db;  border: 1px #434343 solid;  cursor: pointer;} */
/* .case_b .case_in li.blue2_b{background: #2e6c9f; color: #fff;  border: 1px #434343 solid;  cursor: pointer;} */


/* 마지막이거나 선이 없을때 */
.case_b .case_in li .x::before{content: ""; background:none; height: 0; width:0; position: absolute; top: 50%; left:66px; z-index: 1; }
/* 기본 */
.case_b .case_in li .line01::before{content: ""; background: #343434; height: 1%; width:76px; position: absolute; top: 50%; left:66px; }
/* 선만 있을때 */
.case_b .case_in li .line02::before{content: ""; background: #343434; height: 1%; width:78px; position: absolute; top: 50%; left:65px; }

/* tooltip */
.arrow_b{display: none; position:absolute; left:-10px; top:35px;  width:220px; height:auto;  padding: 8px; -webkit-border-radius: 8px;  -moz-border-radius: 8px; border-radius: 8px;  background: #3c8dbc;   color: #fff !important ; word-break: break-all;  font-size: 12px; font-weight: normal !important; line-height: 18px;  z-index: 9999 !important;  text-align: left;}
.arrow_b:after{position: absolute;  bottom: 100%;  left:20%;  width: 0;  height: 0; margin-left: -10px;  border: solid transparent;  border-color:  rgba( 60, 141, 188, 0);   border-bottom-color:  #3c8dbc;  border-width: 10px;  pointer-events: none;  content: " ";}
.case_in li span:hover + .arrow_b {display: block; overflow: visible !important; z-index: 9999; }
.arrow_b2 {
    display: none;
	position: absolute;
	left: -20px;
	top: -100px;
	width: 220px;
	height: auto;
	padding: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	background: #3c8dbc;
	color: #fff !important;
	word-break: break-all;
	font-size: 12px;
	font-weight: normal !important;
	line-height: 18px;
	z-index: 9999 !important;
	text-align: left;
}
.arrow_b2:after {
    position: absolute;
    top: 100%;
    left: 20%;
    width: 0;
    height: 0;
    margin-left: -10px;
    border: solid transparent;
    border-color: #3c8dbc transparent transparent transparent;
    /*border-color: rgba( 60, 141, 188, 0);
    border-bottom-color: #3c8dbc;*/
    border-width: 10px;
    pointer-events: none;
    content: " ";
}

.case_in li span:hover + .arrow_b2 {
    display: block;
    overflow: visible !important;
    z-index: 9999;
}
.arrow_b3 {
    display: none;
	position: absolute;
	left: -20px;
	top: -64px;
	width: 220px;
	height: auto;
	padding: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	background: #3c8dbc;
	color: #fff !important;
	word-break: break-all;
	font-size: 12px;
	font-weight: normal !important;
	line-height: 18px;
	z-index: 9999 !important;
	text-align: left;
}
.arrow_b3:after {
    position: absolute;
    top: 100%;
    left: 20%;
    width: 0;
    height: 0;
    margin-left: -10px;
    border: solid transparent;
    border-color: #3c8dbc transparent transparent transparent;
    /*border-color: rgba( 60, 141, 188, 0);
    border-bottom-color: #3c8dbc;*/
    border-width: 10px;
    pointer-events: none;
    content: " ";
}

.case_in li span:hover + .arrow_b3 {
    display: block;
    overflow: visible !important;
    z-index: 9999;
}
.arrow_b4 {
    display: none;
	position: absolute;
	left: -20px;
	top: -82px;
	width: 220px;
	height: auto;
	padding: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	background: #3c8dbc;
	color: #fff !important;
	word-break: break-all;
	font-size: 12px;
	font-weight: normal !important;
	line-height: 18px;
	z-index: 9999 !important;
	text-align: left;
}
.arrow_b4:after {
    position: absolute;
    top: 100%;
    left: 20%;
    width: 0;
    height: 0;
    margin-left: -10px;
    border: solid transparent;
    border-color: #3c8dbc transparent transparent transparent;
    /*border-color: rgba( 60, 141, 188, 0);
    border-bottom-color: #3c8dbc;*/
    border-width: 10px;
    pointer-events: none;
    content: " ";
}

.case_in li span:hover + .arrow_b4 {
    display: block;
    overflow: visible !important;
    z-index: 9999;
}