@charset "utf-8";

.plan {position:relative;}
.plan .fullBgImg { background-repeat:no-repeat; background-position:center center; background-size: cover; }

.plan .secWrap {display: flex; align-items: start; justify-content: space-between; flex-wrap:wrap;}
.plan .titSec {width:calc(100% - 600px); padding-right:70px;}
.plan .imgSec {width:600px;}
.plan .imgSec img {width:100%;}

.plan.plan2 .titSec {width:calc(100% - 700px); padding-left:70px; padding-right:0; order:2;}
.plan.plan2 .imgSec {width:700px; order:1;}
.plan.plan2 .imgSec img {width:100%; }

.plan .titSec ul{display:flex; flex-wrap:wrap; justify-content: space-between;}
.plan .titSec li:first-child {width:100%;}
.plan .titSec li {width:33%; display:flex; align-items: center; margin-bottom:5px;}
.plan .titSec .box {width:40px; height:20px; margin-right:7px;}
.plan .titSec .box img {width:40px; height:20px;  border:1px solid #e1e1e1;}

.plan .box.box2 {background-color: #c783ff;}
.plan .box.box3 {background-color: #888700;}
.plan .box.box4 {background-color: #be5d60;}
.plan .box.box5 {background-color: #ffe582;}
.plan .box.box6 {background-color: #e2e2e2;}
.plan .box.box7 {background-color: #c6fd85;}
.plan .box.box8 {background-color: #ff85a3;}
.plan .box.box9 {background-color: #5d91b7;}
.plan .box.box10 {background-color: #00eb00;}
.plan .box.box11 {background-color: #fe952c;}
.plan .box.box12 {background-color: #ba60a5;}
.plan .box.box13 {}
.plan .box.box14 {background-color: #fdade0;}
.plan .box.box15 {background-color: #83e5ff;}
.plan .box.box16 {background-color: #fdff81;}
.plan .box.box17 {background-color: #0385ff;}




/*테이블*/
.plan table { width:100%; border-bottom: 1px solid #d8d8d8; border-collapse: collapse;  background-color:#fff;}
.plan table caption { width:0; height:0; font-size:0; line-height:0; overflow:hidden; text-indent:-9999px;}
.plan table th { padding:10px 5px 10px; border-top:1px solid #d8d8d8; border-bottom:1px solid #d8d8d8; border-right:1px solid #d8d8d8; background-color:#f6f6f6; color:#111; font-size:1.7rem; line-height:1.2em; }
.plan table td {padding:7px 5px 4px; border-top:1px solid #d8d8d8; color:#747474; font-size:1.6rem; line-height:1.2em; text-align:center; border-right:1px solid #d8d8d8; }
.plan table td:first-child,
.plan table th:first-child {border-left:1px solid #d8d8d8;}
.plan table td.bttmNone {border-bottom: 1px solid transparent;}
.plan table td.rightNone {border-right: none;}
@media(max-width: 1200px){
  .plan .titSec {width:calc(100% - 400px);}
  .plan .imgSec {width:400px;}
  .plan::after {width: calc(50% - 200px);}

  .plan.plan2 .titSec {width:calc(100% - 500px); padding-right:0;}
  .plan.plan2 .imgSec {width:500px;}
}

@media(max-width: 1024px){
  .pdl10 {padding-left:7px;}
  .plan.plan2 .titSec {width:calc(100% - 400px); padding-right:0;}
  .plan.plan2 .imgSec {width:400px;}
  .plan.plan2 .titSec ul li {width:50%;}
}
@media(max-width: 768px){
  .pdl10 {padding-left:5px;}
  .plan::after { height:50%}
  .plan .titSec {width:100%; padding-right:0; margin-top:50px;}
  .plan .imgSec {width:100%;}
  .plan table { margin-bottom:50px; font-size:1.8rem;}

  .plan.plan2 .titSec {width:100%; padding-left:0px; order:2;}
  .plan.plan2 .imgSec {width:100%; order:1;}
}

@media(max-width: 560px){

}

@media(max-width: 480px){
  .plan .titSec li {width:50%;}
  .plan .titSec .box {width:37px; height:20px; margin-right:7px;}
  .plan .titSec .box img {width:37px; height:20px;}
  .plan table th { font-size:1.3rem; padding: 5px 2px 3px;}
  .plan table td { font-size:1.3rem; padding: 5px 2px 3px;}
}