.h40{ height: 40px;}
.h50{ height: 50px;}
.h60{ height: 60px;}
.flex_con_div h1{ font-size: 20px; font-weight: 700; margin-bottom: 10px;}
.flex_sub{ font-size:16px; line-height: 26px; margin: 10px 0;}
.flex_txt{ font-size: 14px; line-height: 24px; margin: 5px 0; color: #b86e00;}
.flex_con_div .s{ color: #007ed2;}
.flex{ display: flex; padding:0;justify-content: space-between;}
.flex .w33{ width: 33%; margin:0 10px; padding:10px;}
.flex .w33 h1{ margin-bottom: 10px; font-size: 18px;}
.flex .w33 h1,.flex .w33 h3{ margin-top: 0;}
.grid{ display:grid; grid-template-rows: 50px 50px 50px 50px; grid-template-columns: 50px 50px 50px 50px 50px; background: #fff;}
.grid1{grid-template-rows: 50px 50px 50px 50px 50px; grid-template-columns: 50px 50px 50px 50px;}
.grid2{width: 250px; height:250px;display:grid;grid-template-columns: repeat(auto-fill,30px); padding: 5px; background: #efefef; margin-right: 20px;}
.grid2 div{ background:#ccc; margin: 1px;}
.grid2 div:nth-child(2){ height: 50px;}
.grid2 div:nth-child(14){ height: 100px;}
.grid div{ background: #ccc; margin: 1px;}
.grid div:nth-child(odd){ background: #f7f7f7;}

.grid3{display:grid;width: 250px; height:250px;grid-template-rows: 1fr 2fr 3fr 4fr; grid-template-columns: 4fr 3fr 2fr 1fr;padding: 5px; background: #efefef; margin-right: 20px;}
.grid3 div{ background:#ccc; margin: 1px;}

.grid4{display: grid; grid-template-rows: repeat(2,100px);grid-template-columns: repeat(2,100px); }
.grid4 div{ background:#ccc; margin: 1px;}

.grid5{display:grid;width: 250px; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr minmax(50px,2fr);padding: 5px; background: #efefef; margin-right: 20px;}
.grid5 div{ background:#ccc; margin: 1px;}

.grid6{display:grid;width: 250px; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr minmax(50px,2fr) 1fr;padding: 5px; background: #efefef; margin-right: 20px;}
.grid6 div{ background:#ccc; margin: 1px;}

.grid7{display:grid;width: 250px; grid-template-rows: 1fr 1fr; grid-template-columns: 30px auto 30px;padding: 5px; background: #efefef; margin-right: 20px;}
.grid7 div{ background:#ccc; margin: 1px;}

.grid8{display:grid;width: 250px; grid-template-rows: 1fr 1fr; grid-template-columns: 30px auto 30px;padding: 5px; background: #efefef; margin-right: 20px;grid-gap:2px}
.grid8 div{ background:#ccc;}
.grid9{display:grid;width: 250px; padding: 5px; background: #efefef; margin-right: 20px;grid-gap:2px;
  grid-template-areas:"g4 g4 g1 .  g5"
                      "g3 g2 g1 g6 g6";}
.grid9 div{ background:#ccc;}
.grid9 .g1{grid-area: g1;}
.grid9 .g2{grid-area: g2;}
.grid9 .g3{grid-area: g3;}
.grid9 .g4{grid-area: g4;}
.grid9 .g5{grid-area: g5;}
.grid9 .g6{grid-area: g6;}

.grid101{display:grid;width: 250px; grid-template-columns: 1fr 1fr 1fr;margin-right: 20px;grid-gap:2px}
.grid101 div{ background:#ccc;}
.grid101 div:nth-child(3){grid-column-start:1;
  grid-column-end:3;
  grid-row-start:1;
  grid-row-end:3; background-color: #ffd597;}

.grid102{display:grid;width: 250px; grid-template-columns: 1fr 1fr 1fr;margin-right: 20px;grid-gap:2px}
.grid102 div{ background:#ccc;}
.grid102 div:nth-child(3){grid-row-start:1; background-color: #ffd597;}

.grid103{display:grid;width: 250px; grid-template-columns: 1fr 1fr 1fr;margin-right: 20px;grid-gap:2px}
.grid103 div{ background:#ccc;}
.grid103 div:nth-child(3){grid-column-start:1;  grid-column-end:span 3; background-color: #ffd597;}

.grid104{display:grid;width: 250px; grid-template-columns: 1fr 1fr 1fr;margin-right: 20px;grid-gap:2px;grid-auto-flow: row dense;}
.grid104 div{ background:#ccc;}
.grid104 div:nth-child(3){grid-column-start:1;  grid-column-end:span 3; background-color: #ffd597;}

.grid10{display:grid;width:250px;margin-right: 20px;
  grid-gap: 5px;
  grid-template-columns: 1fr 2fr 1fr;
  justify-items:center;
  align-items: center;
  grid-auto-rows: 80px;
  padding: 10px;box-sizing: border-box; z-index: 9;
}
.grid10 div:nth-child(3){justify-items:stretch;}
.grid10-{
  position: absolute; left: 0; top: 0;height:100%; padding: 20px 0 20px 20px; box-sizing: border-box; z-index: 8;
}
.grid10- div{ background: #ccc; width: 100%; height: 100%;}

.grid11{display:grid;width: 48%; margin-left: 2%;;
  grid-template-columns: 1fr 2fr 1fr;
  grid-gap: 5px;
  grid-auto-rows: 30px;}
.grid11 div{ background:#ccc;}
.grid11 div:nth-child(3){ grid-column-start: span 2;}
.grid11 div:nth-child(5){ grid-column-start: span 2;}

.grid12{width: 250px; height:280px;display:grid;grid-template-columns: repeat(auto-fill,70px); padding: 5px; background: #efefef; margin-right: 20px;justify-content:center;align-content: center;grid-auto-rows:60px;}
.grid12 div{ background:#ccc; margin: 1px;}

.flexDiv{ display: flex; margin: 10px 0; padding: 10px; position: relative;justify-content: space-between;}
.flexDiv .grid{ margin-right: 30px; max-width:350px; overflow-x: auto;}
.flexDiv .gray{ margin-top: 10px; font-size: 12px;}

.keyLinght{ color: #008ef7;}

.lccon .listClick:last-of-type{ margin-top: 20px;}
.listClick { margin: 5px 0; display:grid; width: 500px;grid-template-columns: 1fr 1fr;grid-template-rows: repeat(auto-fill,34px); grid-gap: 5px;}
.listClick div{ background: #f9f9fb; border: 1px solid #cdcdcd; border-radius: 5px;padding: 0 10px; line-height: 34px;font-size: 14px; cursor: pointer;}
.listClick div:hover,.listClick div.selected{ background-color: #337ab9; color: #fff;border: 1px solid #337ab9;}

.inputChange{ margin: 10px 0; border-radius: 3px; border: 1px solid #337ab9; background: #337ab9;color: #fff; display: flex;}
.inputChange span{ width: 160px; font-size: 12px; line-height: 25px;  padding-left: 10px;}
.inputChange input{ flex-grow: 1; font-size: 12px; padding-left: 10px; color: #337ab9;}

.btnChange1 span{background: #f9f9fb; border: 1px solid #cdcdcd; border-radius: 5px;padding: 5px 10px; line-height: 34px;font-size: 14px; cursor: pointer;}
.btnChange1 span:hover,.btnChange1 span.selected{ background-color: #337ab9; color: #fff;border: 1px solid #337ab9;}

.info h2{font-weight: 700; padding: 8px 20px; margin:40px 0 20px; font-size: 20px; background: #ffeff0;border-left:4px solid #d6222b; line-height: 26px;}
.info h2 span{ font-size: 14px; font-weight: 400; color: #666; }
