@charset "utf-8";

.departTop { position: relative; width: 100%; overflow: hidden; background: #f3f9fb; padding: 5%; }
.departTop > div { float: left;  }
.departTop .ico { position: relative; overflow: hidden; text-align: center; padding: 30px;  background: #fff; border-radius: 100%; }
.departTop .ico img { width: 80px; }
.departTop .txt { width: calc(100% - 140px); padding: 1% 0 0 4%; }


.departTop h3 { font-size: 3.6rem; font-family: 'SBAggro'; font-weight: 300; color:#000e35; margin-bottom: 0.5em; }
.departTop .t1 { font-size: 2.2rem; color:#212121; font-weight: 500; }
.departTop .t2 { font-size: 1.8rem; color:#585858; line-height: 1.8em; margin-top: 2em; }

@media all and (max-width:976px) {
  .departTop { padding: 7%; }
}


@media all and (max-width:767px) {
  .departTop .ico { padding: 20px; }
  .departTop .ico img { width: 60px; }
  .departTop .txt { width: calc(100% - 100px); }

}

@media all and (max-width:568px) {
  .departTop { text-align: center; padding: 7% 9%;  }
  .departTop .ico { float: none; text-align: center; display: inline-block; }
  .departTop .txt { width: 100%; padding: 5% 0 0 0; }
  .departTop .txt p { text-align: left;  }

  .departTop + .titCont { margin-top: 7%; }
}

@media all and (max-width:480px) {
  .departTop { padding: 10% 9%; }
  .departTop h3 { font-size: 3.2rem; }

  .departTop .ico { padding: 15px; }
  .departTop .ico img { width: 40px; }
}



#mCenter.sCenter { padding:0; background: none; padding-top: 10px;  }
#mCenter.sCenter .tit { position: relative; display: inline-block; background: #28cbd5; color:#fff; font-size: 2.7rem;
                                   border-radius: 100%; width: 200px; height: 200px; font-family: 'SBAggro'; font-weight: 400; }
#mCenter.sCenter .tit span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#mCenter.sCenter .tit::before { content:''; border-radius: 100%; width: 220px; height: 220px; position: absolute; left: -10px; top: -10px;
                                              border: 1px solid rgba(40, 203, 213, 0.6); }
#mCenter.sCenter ul { margin-top: 5%; }
#mCenter.sCenter ul li { height: auto; vertical-align: top; margin-bottom: 20px; margin-right: 0; }
#mCenter.sCenter ul li:nth-child(4n+1) { clear: both; margin-left:0; }
#mCenter.sCenter ul li a { height: 420px; }
#mCenter.sCenter ul li a h4 { font-size: 2.4rem; }
#mCenter.sCenter ul li a:hover { transform: none; }
#mCenter.sCenter ul li .txt { padding: 8%; line-height: 1.6em; position: relative; padding-top: 100px; }
#mCenter.sCenter ul li .txt::after { content:''; width: 7px; height: 7px; display: inline-block; background: #28cbd5;
                                                     border-radius: 100%; position: absolute; left: 50%; top: 70px; z-index:2; margin-left: -3.5px;  }
#mCenter.sCenter ul li .txt::before { content:''; width: 1px; height: 70px; background: #dbe0e4; position: absolute; left:50%; top:0;
                                                      margin-left: -0.5px; }



  @media all and (max-width:1480px) {
    #mCenter.sCenter ul li a { height: 26vw; }
  }

  @media all and (max-width:1080px) {
    /* #mCenter.sCenter ul li:nth-child(odd) { clear: both; } */
    #mCenter.sCenter ul li a { height: 35rem; }
    #mCenter.sCenter ul li .txt { padding-top: 80px; }
    #mCenter.sCenter ul li .txt::after { top: 60px; }
    #mCenter.sCenter ul li .txt::before { height: 60px; }
  }

    @media all and (max-width:976px) {
      #mCenter.sCenter ul li { width: calc((100% - 20px) / 3); }
      #mCenter.sCenter ul li:nth-child(4n+1) { clear: inherit; margin-left:10px; }
      #mCenter.sCenter ul li:nth-child(3n+1) { clear: both; margin-left:0; }
    }

  @media all and (max-width:767px) {
    #mCenter.sCenter .tit { width: 24vw; height: 24vw; font-size: 2.4rem;  }
    #mCenter.sCenter .tit::before { width: calc(100% + 20px); height: calc(100% + 20px); }
  }

  @media all and (max-width:640px) {
    #mCenter.sCenter ul li { width: calc((100% - 10px) / 2); }
    #mCenter.sCenter ul li:nth-child(3n+1) { clear: inherit; margin-left:10px; }
    #mCenter.sCenter ul li:nth-child(odd) { clear: both; margin-left:0; }

    #mCenter.sCenter ul li a { height: 50vw; }
  }

  @media all and (max-width:568px) {
    #mCenter.sCenter ul li a { height: 54vw; }
  }

  @media all and (max-width:380px) {
    #mCenter.sCenter .tit { width: 30vw; height: 30vw;}
    #mCenter.sCenter ul li a { height: 60vw; }
  }



.circleList.ver2 { text-align: left; }
.circleList.ver2 li { text-align: center; font-size: 1.8rem; font-family: 'Pretendard'; width: 140px; height: 140px; margin: 0 5px; }



.imgList { overflow: hidden; text-align: center; }
.imgList li { float: left; width:calc((100% - 40px) / 3); margin-left: 20px; margin-bottom: 20px; }
.imgList li:first-child { margin-left: 0 !important; }
.imgList li:nth-child(3n+1) { margin-left:0; clear: both; }
.imgList li img { max-width: 100%; }
.imgList li dl { padding: 7%; border:1px solid #dbe0e4 }
.imgList li dl dt { font-weight: 700; color:#212121; font-size: 1.8rem; line-height: 1.4em; }
.imgList li dl dd.fs-s { font-size: 1.5rem; }
.imgList li .txt { padding: 7%; color:#212121; font-size: 1.8rem; line-height: 1.3em; }
.imgList li .txt .fs-s { font-size: 0.8em; line-height: 1.2em; }

.imgList.col4 li { width:calc((100% - 60px) / 4); }
.imgList.col4 li:nth-child(3n+1) { margin-left:20px; clear: inherit; }
.imgList.col4 li:nth-child(4n+1) { margin-left:0; clear: both; }

.imgList.order li { counter-increment: orderList; position: relative; }
.imgList.order li::before { content: counter(orderList, decimal-leading-zero); width: 40px; line-height:40px; text-align: center;
                                    background: #28cbd5; color:#fff; position: absolute; left:0; top:0; font-weight: 800; }


@media all and (max-width:1080px) {
  .imgList.col4 li { width:calc((100% - 30px) / 4); margin-left: 10px; margin-bottom: 10px; }
  .imgList.col4 li:nth-child(3n+1) { margin-left:10px; }

  .imgList.mgs li { width:calc((100% - 20px) / 3); margin-left: 10px; }
}

@media all and (max-width:976px) {
  .imgList.col4 li { width:calc((100% - 10px) / 2); }
  .imgList.col4 li:nth-child(odd) { margin-left: 0; clear: both; }
}


@media all and (max-width:767px) {
  .imgList li { width:calc((100% - 20px) / 2);  }
  .imgList li:nth-child(3n+1) { margin-left:20px; clear: inherit; float: left; }
  .imgList li:nth-child(odd) { margin-left:0 !important; clear: both; }

  .imgList.order li::before { width: 34px; line-height:34px; }

  .imgList.mgs li { width:calc((100% - 10px) / 2); margin-bottom: 10px; }
}

@media all and (max-width:480px) {
  .imgList li { width:calc((100% - 10px) / 2); margin-left: 10px; }
  .imgList li:nth-child(3n+1) { margin-left:10px;  }
}



.imgList2 { overflow: hidden; text-align: center; }
.imgList2 li { float: left; width: calc((100% - 60px) / 5); min-width: 160px; max-width: 252px; margin-left: 15px; margin-bottom: 15px; vertical-align: top; }
.imgList2 li:nth-child(5n+1) { margin-left:0; }
.imgList2 li h5 { padding: 1em; background: #2155ae; color:#fff; font-size: 1.6rem; }
.imgList2 li img { max-width: 100%; }
.imgList2 li .txt { padding: 1em 0; }

@media all and (max-width:1280px) {
  .imgList2 li { min-width: 0; }
}

@media all and (max-width:976px) {
  .imgList2 li { width: calc((100% - 30px) / 3); }
  .imgList2 li:nth-child(5n+1) { margin-left:15px; }
  .imgList2 li:nth-child(3n+1) { margin-left:0; }

  .imgList2 li.mClear { clear: both; margin-left:0; }
  .imgList2 li.mClear + li { margin-left: 15px; }
}

@media all and (max-width:568px) {
    .imgList2 li { width: calc((100% - 15px) / 2); margin-left: 15px !important;  }
    .imgList2 li:nth-child(odd) { margin-left:0 !important; }
}


.imgList3 { position: relative; width: 100%; overflow: hidden; text-align: center; font-size:0; }
.imgList3 li { float: left; width: calc((100% - 36px) / 4); margin-left: 12px; margin-bottom: 12px; }
.imgList3 li:first-child { margin-left:0; }
.imgList3 li img { max-width: 100%; }

@media all and (max-width:1080px) {
  .imgList3 li { width: calc((100% - 15px) / 4); margin-left: 5px; margin-bottom: 5px; }
}

@media all and (max-width:767px) {
  .imgList3 li { width: calc((100% - 5px) / 2);  }
  .imgList3 li:nth-child(odd) { margin-left:0; }
}


.imgCont { position: relative; width: 100%; display: table; table-layout: fixed;  }
.imgCont > div { display: table-cell; vertical-align: middle; }
.imgCont .img { width: 40%; /*border: 6px solid #fff;*/ }
.imgCont .img img { max-width: 100%; }
.imgCont .cont { padding-left: 7%; }
.imgCont .cont h3 { font-size: 3.6rem; font-family: 'SBAggro'; font-weight: 300; color:#000e35; margin-bottom: 0.5em; }
.imgCont .cont .t1 { font-size: 2.2rem; color:#212121; font-weight: 500; }
.imgCont .cont .t2 { font-size: 1.8rem; color:#585858; line-height: 1.8em; margin-top: 2em; }

.imgCont.BG { background: #f3f9fb; padding: 20px; }


@media all and (max-width:976px) {
  .imgCont .cont { padding-left: 5%; }
  .imgCont .cont h3 { font-size: 3.2rem; margin-bottom: 0.2em; }
  .imgCont .cont .t2 { margin-top: 1em; }
}

@media all and (max-width:767px) {
  .imgCont .img { width: 50%; }
  .imgCont .cont h3 { font-size: 2.8rem; }
  .imgCont .cont .t2 { font-size: 1.7rem; line-height: 1.5em; }

  .imgCont.BG { padding: 15px; }
}

@media all and (max-width:568px) {
  .imgCont, .imgCont > div { display: block; }
  .imgCont .img { width: 100%; }
  .imgCont .cont { padding: 7% 2%; }

  .imgCont.BG { background: none; padding:0; }
}


.dl-style1 { position: relative; width: 100%; display: table; table-layout: fixed;  }
.dl-style1 dt, .dl-style1 dd { display: table-cell; vertical-align: middle; line-height: 1.4em;}
.dl-style1 dt { width: 25%; padding: 0 1em; text-align: center; color:#fff; font-weight: 600; font-size: 1.8rem;}
.dl-style1 dd { padding: 2em 3em; border: 1px solid #e5e5e5; border-left-width:0; }

.dl-style1 + .dl-style1 { margin-top: 10px; }


.dlWrap .dl-style1:nth-child(5n+1) dt { background: #0196da; }
.dlWrap .dl-style1:nth-child(5n+2) dt { background: #2155ae; }
.dlWrap .dl-style1:nth-child(5n+3) dt { background: #455a7e; }
.dlWrap .dl-style1:nth-child(5n+4) dt { background: #1a2f53; }
.dlWrap .dl-style1:nth-child(5n+5) dt { background: #030a2c; }

.dlWrap.half dl { float: left; width: calc(50% - 5px);  }
.dlWrap.half dl:nth-child(even) { margin-left: 10px; margin-top: 0; }
.dlWrap.half dl dd { padding: 2em; }

.stepOrd .dl-style1 { position: relative; counter-increment: number; }
.stepOrd .dl-style1 dt { position: relative; }
.stepOrd .dl-style1 dt::before { content: counter(number, decimal-leading-zero); color:#fff; position: absolute; right: 0.1em; bottom:0;
                                              opacity: 0.15; font-size: 5rem; font-weight: 900; }

.dlWrap.half.tatalProcess dl { margin-top: 10px !important; }
.dlWrap.half.tatalProcess dl dd { height: 150px; }

@media all and (max-width:1280px) {
  .dlWrap.half.tatalProcess dl dd { height: 180px; }
}

@media all and (max-width:976px) {
  .dlWrap.half dl,
  .dlWrap.half dl:nth-child(even) { margin-top: 10px; }
  .dlWrap.half dl dd { padding: 1.5em 2em; }

  .dlWrap.half.tatalProcess dl { width: 100%; }
  .dlWrap.half.tatalProcess dl:nth-child(even) { margin-left:0; }
  .dlWrap.half.tatalProcess dl dd { height: auto; padding: 2em; }
}

@media all and (max-width:767px) {
  .dlWrap.half dl { width: 100%; }
  .dlWrap.half dl:nth-child(even) { margin-left:0; }
}

@media all and (max-width:568px) {
  .dl-style1 dt { width: 28%; line-height: 1.2em; }
  .dl-style1 dd { padding: 2em; }
}


@media all and (max-width:480px) {
  .stepOrd .dl-style1 dt::before { font-size: 4rem; }

  .dlWrap.dtWide dt { width: 35%; }
}



.dl-style2 { position: relative; width: 100%; display: table; table-layout: fixed;  }
.dl-style2 dt, .dl-style2 dd { display: table-cell; vertical-align: middle; line-height: 1.4em;}
.dl-style2 dt  { width: 160px; }
.dl-style2 dt div { background: #0196da; width: 120px; height: 120px; line-height: 120px; border-radius: 100%; text-align: center; color:#fff; font-weight: 600; font-size: 1.8rem;}
.dl-style2 dd {  }

.dl-style2 + .dl-style2 { margin-top: 10px; }

.dlWrap .dl-style2:nth-child(1) dt div { background: #0196da; }
.dlWrap .dl-style2:nth-child(2) dt div { background: #2155ae; }
.dlWrap .dl-style2:nth-child(3) dt div { background: #455a7e; }
.dlWrap .dl-style2:nth-child(4) dt div { background: #1a2f53; }
.dlWrap .dl-style2:nth-child(5) dt div { background: #030a2c; }


.dl-style3 { padding: 3% 0;  border-bottom: 1px solid #dbe0e4; }
.dl-style3 dt { font-size: 2.4rem; color:#000e35; font-family: 'SBAggro'; font-weight: 300; margin-bottom: 0.5em; }
.dl-style3 dt::before { content: ''; width: 30px; height: 30px; border-radius: 100%; display: inline-block; vertical-align: middle; margin-right: 10px;
                               background: #0196da url("/images/sub/ico_check.png") no-repeat center; background-size: 100% auto; }
.dl-style3 dd { font-size: 1.8rem; line-height: 1.4em; }



@media all and (max-width:480px) {
  .dl-style3 { padding: 5% 0; }
  .dl-style3 dt::before { width: 24px; height: 24px; }
}

.titCont .cont .s-cont { padding: 3% 0; border-bottom: 1px solid #dbe0e4; }
.titCont .cont .s-cont.pdb { padding: 5% 0; }
.titCont .cont .s-cont.last { padding-bottom:0; border-bottom:0; }
.titCont .cont .s-cont.bbx { border-bottom-width:0; }




.titCircle { position: relative; width: 100%; font-size: 0;  }
.titCircle > div { display: inline-block; vertical-align: top; }
.titCircle.mid > div { vertical-align: middle; }
.titCircle .tit { position: relative; background: #0196da; width: 120px; height: 120px; border-radius: 100%;
                    text-align: center; color:#fff; font-weight: 600; font-size: 1.8rem; }
/* .titCircle .tit::after { content:''; width: 30px; height: 1px; background: #0196da; display: inline-block; position: absolute;
                            right: -20px; top: 50%; transform: translateY(-50%); opacity: 0.7; }*/
.titCircle .tit p { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);  }
.titCircle .txt { width: calc(100% - 120px); padding-left: 4%; }
.titCircle .tit.color2 { background: #2155ae; }
.titCircle .tit.color3 { background: #455a7e; }
/* .titCircle .tit.color2::after { background: #2155ae; } */

.titCircle + .titCircle { margin-top: 10px; }

.titCircle .txt .boxList > li { width: calc(97% / 3); }
.titCircle .txt .boxList > li:nth-child(4n+1) { margin-left:1%; clear: inherit; }
.titCircle .txt .boxList > li:nth-child(3n+1) { margin-left:0; clear: both; }
.titCircle .txt .boxList > li.col2 { width: calc(97% / 3 * 2); }

@media all and (max-width:1280px) {
  .titCircle .tit { width: 100px; height: 100px; }
  .titCircle .tit p { width: 100%; padding: 0 1em; }
  .titCircle .txt { width: calc(100% - 100px); padding-left: 3%;  }
}

@media all and (max-width:976px) {
  /* .titCircle .txt .boxList li { width:calc(100%/3) }
  .titCircle .txt .boxList li.col2 { width:calc((100% / 3) * 2); }*/

  .titCircle .txt .boxList > li { width: calc(98% / 2); }
  .titCircle .txt .boxList > li:nth-child(even) { margin-left:1%; clear: inherit; }
  .titCircle .txt .boxList > li:nth-child(odd) { margin-left:0; clear: both; }
  .titCircle .txt .boxList > li.col2 { margin-left:0 !important;  }
}

@media all and (max-width:640px) {
  .titCircle .tit { width: 80px; height: 80px; }
  .titCircle .txt { width: calc(100% - 80px); }
  /* .titCircle .txt .boxList li { width:calc(100%/2) } */
  /* .titCircle .txt .boxList.col4 li { width:100%; } */
}

@media all and (max-width:568px) {
  .titCircle .txt { padding-left: 5%; }
  .titCircle .txt .boxList > li { width: 100% !important; margin-left:0 !important; }
}

@media all and (max-width:480px) {
  .titCircle .tit { width: 70px; height: 70px; font-size: 1.6rem;}
  .titCircle .txt { width: calc(100% - 70px); }
}

@media all and (max-width:360px) {
  .titCircle { text-align: center; }
  .titCircle .tit { width: 100%; height: auto; padding: 1.2em;  border-radius: 10px 0 10px 0; font-size: 2rem; }
  .titCircle .txt { width: 100%; padding-left:0; padding: 5% 0;  }
}




.tabs_st2 { font-size: 0; margin-bottom: 3%; }
.tabs_st2 li { display: inline-block;  line-height: 43px; font-size: 1.6rem; width: 180px; max-width: calc(100% / 3); text-align: center; }
.tabs_st2 li a { border: 1px solid #cfd4d7;  border-left-width:0; display: block; color:#878e9b; }
.tabs_st2 li:first-child a { border-left-width: 1px; }
.tabs_st2 li.active a { background: #0196da; border-color:#0196da; color:#fff; }

@media all and (max-width:480px) {
  .tabs_st2 li { }
}


.boxList2 { position: relative; width: 100%; font-size:0; }
.boxList2 li { position: relative; display: inline-block; vertical-align: middle; border: 3px solid #c7cdd8;
                     font-size: 1.6rem; width: 120px; height: 120px; margin: 0 4px; border-radius: 20px; text-align: center; }
.boxList2 li p { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color:#455a7e; line-height: 1.3em;
                        width: 90%;  }

.boxList2.col4 li { width: calc((100%/4) - 8px); max-width: calc((100%/4) - 4px); height: 100px; border-radius: 10px; margin: 4px; }
.boxList2.col4s li { max-width: calc((100%/4) - 4px); }

@media all and (max-width:767px) {
  .boxList2 li { width: 100px; height: 100px; margin: 2px; max-width: calc((100%/5) - 4px);}
}

@media all and (max-width:568px) {
  .boxList2 li { height: 17vw; }
  .boxList2.m_col4 li { max-width: calc((100%/4) - 4px); }
}

@media all and (max-width:480px) {
  .boxList2 li { width: 26vw; height: 26vw; max-width: 100%; }
  .boxList2.m_col4 li { width: 26vw; height: 26vw; max-width: 100%; }

  .boxList2.col4 li { width: calc((100%/2) - 8px); max-width: 100%; }
  .boxList2.col4s li { height: 20vw;  }
}

@media all and (max-width:380px) {
    .boxList2.col4s li { width: calc((100%/2) - 8px); max-width: 100%; border-radius: 10px;  }
}


.dlBoxWrap { font-size:0; }
.dlBox { font-size: 0; display: inline-block; position: relative; }
.dlBox::before { content:''; width: 90%; height: 1px; background: #c7cdd8; position: absolute; left:50%; top: 50%; transform: translate(-50%, -50%);}
.dlBox dt,
.dlBox dd { position: relative; display: inline-block; vertical-align: middle; border: 3px solid #c7cdd8; color:#455a7e;
                font-size: 1.6rem; width: 120px; height: 120px; margin: 0 4px; border-radius: 20px; text-align: center; background: #fff; }
.dlBox dt { background: #2155ae; color:#fff; border:0; }
.dlBox p { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);  line-height: 1.3em;
               width: 90%;  }
.dlBox + .dlBox { margin-top: 10px; }

.dlBoxWrap .dlBox:nth-child(odd) dt { background: #2155ae; }
.dlBoxWrap .dlBox:nth-child(even) dt { background: #1a2f53; }

.dlBox.wide dt,
.dlBox.wide dd { width: 150px; max-width: 16vw; max-height: 12vw; }

@media all and (max-width:976px) {
  .dlBox dt,
  .dlBox dd { max-width: 13vw; max-height: 13vw; }
}

@media all and (max-width:640px) {
  .dlBox dt,
  .dlBox dd { max-width: calc(17vw - 8px); max-height: 16vw;  }

  .dlBox.wide dt,
  .dlBox.wide dd { max-width: calc((100%/5) - 8px); max-height: 15vw;  }
  .dlBox.wide dd p { word-break:break-all; }
}

@media all and (max-width:480px) {
  .dlBox::before { display: none; }
  .dlBox dt,
  .dlBox dd { max-width: calc(28vw - 8px); border-radius: 10px; margin: 4px;}
  .dlBox dd::before { content:''; width: 10px; height: 1px; background: #c7cdd8; position: absolute; left:-11px; top: 50%; transform: translateY(-50%);}

  .dlBox.wide dt,
  .dlBox.wide dd { max-width: calc((100%/3) - 8px); max-height: 18vw;   }
  .dlBox.wide dd p { word-break:keep-all; }
}

@media all and (max-width:400px) {
  .dlBox dt,
  .dlBox dd { width: 50vw; max-width: calc(42vw - 8px); }

  .dlBox.wide dt,
  .dlBox.wide dd { max-width: calc((100%/2) - 8px); max-height: 16vw;   }
}



.dlBoxWrap2 { position: relative; width: 100%; display: table; table-layout: fixed; }
.dlBoxWrap2 dl { display: table-cell; vertical-align: top;  border: 1px solid #e5e5e5; border-left-width:0; }
.dlBoxWrap2 dl:first-child { border-left-width:1px; }
.dlBoxWrap2 dl dt { color:#fff; font-size: 1.8rem; font-weight: 500; text-align: center; padding: 1em; }
.dlBoxWrap2 dl dd { padding: 1.5em 2em; }
.dlBoxWrap2 dl:nth-child(1) dt { background: #2155ae; }
.dlBoxWrap2 dl:nth-child(2) dt { background: #1a2f53; }
.dlBoxWrap2 dl:nth-child(3) dt { background: #0196da; }
.dlBoxWrap2 dl:nth-child(4) dt { background: #455a7e; }
.dlBoxWrap2 + .dlBoxWrap2 { margin-top: 10px; }

@media all and (max-width:767px) {
    .dlBoxWrap2.col4 { display: block; }
    .dlBoxWrap2.col4 dl { float: left;  width: 50%; }
    .dlBoxWrap2.col4 dl dd { min-height: 100px; }
}


@media all and (max-width:640px) {
  .dlBoxWrap2 { display: block; }
  .dlBoxWrap2 dl { display: table; table-layout: fixed; width: 100%; border-left-width: 1px; border-top-width: 0; }
  .dlBoxWrap2 dl:first-child { border-top-width:1px; }
  .dlBoxWrap2 dl dt, .dlBoxWrap2 dl dd { display: table-cell; vertical-align: middle; }
  .dlBoxWrap2 dl dt { width: 25%; }
  .dlBoxWrap2 dl dd .dotList.col2 li,
  .dlBoxWrap2 dl dd .dotList.col3 li { min-width: 50%; }

  .dlBoxWrap2.col4 dl { width: 100%; }
}

@media all and (max-width:400px) {
    .dlBoxWrap2 dl { display: block; }
    .dlBoxWrap2 dl dt, .dlBoxWrap2 dl dd { display: block; width: 100%; }
    .dlBoxWrap2 dl + dl { margin-top: 5px; }
}


.dl-quarter { position: relative; overflow: hidden; }
.dl-quarter h4 { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #2155ae; color:#fff;
                        width: 180px; height: 180px; display: table; text-align: center; border-radius: 100%; }
.dl-quarter h4 span { display: table-cell; vertical-align: middle; font-size: 2.2rem; }
.dl-quarter dl { float: left; border: 10px solid #f3f9fb; width: calc(50% - 10px); padding: 5%; margin: 10px 0; height: 250px; }
.dl-quarter dl:nth-child(even) { float: right;   }
.dl-quarter dl dt { font-size: 2rem; color:#212121; font-weight: 600; margin-bottom: 1em;  }
.dl-quarter dl dd { line-height: 1.5em; }

@media all and (max-width:1080px) {
  .dl-quarter h4 { width: 16vw; height: 16vw; }
}

@media all and (max-width:767px) {
  .dl-quarter h4 { position: relative; transform: none; width: 100%; height: auto; left: inherit; top: inherit; border-radius: 0 20px 0 20px; padding: 1em 0;  }
  .dl-quarter h4 br { display: none; }
  .dl-quarter dl { width: calc(50% - 5px); margin: 10px 0 0; padding: 5% 4%;  }
}

@media all and (max-width:568px) {
  .dl-quarter dl { width: 100%; height: auto; padding: 6% 4%; border-width: 7px; }
}



.process { position: relative; width: 100%; text-align:  center; overflow: hidden; font-size:0; display: inline-block; }
.process > li { position: relative; display: block; width: 100%;}
.process li::after { content: '▼'; display: block; width: 100%; text-align: center; font-size: 1rem; margin: 1em 0; color:#c8d1d7; }
.process li:last-child::after { display: none; }
.process > li > h5 {  position: relative; display: inline-block; vertical-align: top; width: 200px; line-height: 50px;
                            font-size: 1.7rem; font-weight: 400;  }
.process > li p { position: relative; display: inline-block; vertical-align: top; width: 200px; line-height: 48px;  font-size: 1.6rem;
                      border: 1px solid #bac2d1; font-weight: 400; background: #fff; color:#455a7e; }

.process > li.depth1 h5 { background: #24314b; color:#fff; }
.process > li.depth2 h5 { background: #0196da; color:#fff; }
.process > li.depth2 p { position: absolute; left:calc(50% - 400px); border-color:#0196da; color:#0196da; }
.process > li.depth3 h5 { background: #2155ae; color:#fff; }
.process > li.depth3 dl { position: absolute; top:0; left:70%;  font-size: 1.6rem; width: 25%; text-align: left; }
.process > li.depth3 dl dt { color:#2155ae; font-weight: 600; margin-bottom: 0.5em;  }
.process > li.depth4 h5 { background: #455a7e; color:#fff; margin-bottom: 50px; }
.process > li .depth5 { width: 100%; }

.process > li.depth2::before { content:''; width: 40%; height: 1px; background: #0196da; position: absolute; right: 50%; top: 24.5px; }
.process > li.depth3::before { content:''; width: 18%; height: 1px; background: #2155ae; position: absolute; left: 50%; top: 24.5px; }
.process > li.depth4::before { content:''; width: calc(35% + 1.5px); height: 1px; background: #bac2d1; position: absolute; left: 50%; top: 24.5px; transform: translateX(-50%);}
.process > li .depth5 ol::before { content:''; width: 1px; height: 74.5px; position: absolute; left: 50%; top: -74.5px; background: #bac2d1;}

.process > li ol { position: relative; display: inline-block; vertical-align: top; width: 35%;   }


@media all and (max-width:1080px) {
  .process > li.depth2 p { left:0; }
  .process > li.depth3 dl { top: inherit; bottom:0; }
  .process > li.depth4::before { width: calc(45% + 1.5px);  }
  .process > li ol { width: 45%; }
}

@media all and (max-width:860px) {
  .process > li > h5,
  .process > li p { width: 170px; }
  .process > li.depth2 p { width: 120px; }
  .process > li.depth3::before { width: 20%; }
  .process > li.depth3 dl { left: inherit; right:0; width: 28%;  }
}

@media all and (max-width:640px) {
  .process > li > h5,
  .process > li p { width: 150px; }
  .process > li.depth2 p { width: 100px; }
  .process > li.depth4::before { width: calc(50% + 1.5px);  }
  .process > li ol { width: 50%; }
  .process > li ol li p { width: 85%; }
}

@media all and (max-width:568px) {
  .process > li.depth2,
  .process > li.depth3 { width: 150px; clear: both; margin: 0 auto;  }
  .process > li.depth2 p,
  .process > li.depth3 dl { position: relative; width: 150px; left: inherit; top: inherit; right: inherit; display: block; margin-top: 10px; }
  .process > li.depth2::before,
  .process > li.depth3::before { width: 1px; height: 10px; top: 50px; left: 50%; transform: translateX(-50%);}
  .process > li.depth3 dl { border: 1px solid #2155ae; padding: 1em; background: #fff; }
  .process > li ol li p { width: 90%; }
}

@media all and (max-width:480px) {
  .process > li.depth4::before { width: 1px; height: 100%; top: 0; left: 50%; background: #455a7e; }
  .process > li .depth5 { position: relative; border: 1px solid #455a7e; background: #fff; }
  .process > li ol li p { width: 100%; line-height: 1.2em; padding: 0.7em;}
  .process > li .depth5 ol::before { display: none; }
  .process > li ol:nth-child(odd) { padding: 20px 5px 20px 10px; }
  .process > li ol:nth-child(even) { padding: 20px 10px 20px 5px; }
}






.packBox { position: relative; display: inline-block; font-size:0; overflow: hidden; text-align: center; padding: 4%; }
.packBox > dl { position: relative; display: inline-block; vertical-align: top; width: 500px; margin: 20px; border: 2px solid #dbe0e4;
                       font-size: 1.6rem; text-align: left; max-width: calc(50% - 40px); }
.packBox > dl dt { position: relative; padding: 2em 1.5em; color:#fff; }
.packBox > dl dt h4 { font-size: 2.2rem; margin-bottom: 0.5em;  }
.packBox > dl dt p { font-size: 1.8rem; }
.packBox > dl dt .num { position: absolute; right:0; bottom:-0.2em; font-size: 3rem; line-height: 1.0em; opacity: 0.3; }
.packBox > dl dt .num span { font-size: 3em; font-weight: 800; }
.packBox > dl dd.price { background: #f3f9fb; height: auto; }
.packBox > dl dd .dotList > li { width: auto; display: inline-block; vertical-align: middle; min-width: 48%; margin: 0.3em 0;  }
.packBox > dl dd .dotList > li::before { background: #a4b1c7; }
.packBox > dl dd .dotList > li ol { margin-top: 0.5em; }
.packBox > dl dd .dotList > li ol li { font-size: 0.95em; margin: 0.5em 0; }

.packBox > dl dd { padding: 2em 1.5em; }
.packBox > dl dd h5 { color:#2155ae; font-size: 1.7rem; margin-bottom: 0.5em;  }

.packBox > dl.box1 dd.cont, .packBox > dl.box2 dd.cont { height: 400px; }
.packBox > dl.box3 dd.cont, .packBox > dl.box4 dd.cont { height: 540px; }

.packBox > dl.box4 dd h5 { color:#b3855a; }
.packBox > dl.box4 dd .fc-b { color:#bc9d80 !important; }


.packBox dl.box1 dt { background: #0196da; }
.packBox dl.box2 dt { background: #2155ae; }
.packBox dl.box3 dt { background: #455a7e; }
.packBox dl.box4 dt { background: #bc9d80; }

.packBox > dl.box1 { border-color: #d0eaf6; }
.packBox > dl.box2 { border-color: #dae4f5; }
.packBox > dl.box3 { border-color: #e1e5eb; }
.packBox > dl.box4 { border-color: #f2ece6; }

.packBox dl.box1 dd.price { background: #e7f4fa; }
.packBox dl.box2 dd.price { background: #ecf1fa; }
.packBox dl.box3 dd.price { background: #f0f2f5; }
.packBox dl.box4 dd.price { background: #f8f5f2; }


.packBox.col3 dl { max-width: calc((100% / 3) - 40px); }
.packBox.col3 dl dd.cont { height: 350px !important; }

.packBox > dl.pink { border-color:#fadcf0; }
.packBox > dl.pink dt { background: #f566a9; }
.packBox > dl.pink dd.price { background: #ffebf8; }

.packBox > dl.pink dd h5 { color:#f566a9; }
.packBox > dl.pink dd .fc-b { color:#f566a9 !important; }

.packBox > dl.box1 dd .dotList > li::before { background: #0196da; }
.packBox > dl.box2 dd .dotList > li::before { background: #2155ae; }
.packBox > dl.box3 dd .dotList > li::before { background: #455a7e; }
.packBox > dl.box4 dd .dotList > li::before { background: #bc9d80; }
.packBox > dl.pink dd .dotList > li::before { background: #f566a9; }


@media all and (max-width:1280px) {
  .packBox > dl { max-width: calc(50% - 10px); margin: 10px 0 0 20px; }
  .packBox dl:nth-child(odd) { margin-left:0; }

  .packBox.col3 dl { max-width: calc((100% / 3) - 20px); margin: 10px 0 0 20px; }
  .packBox.col3 dl:nth-child(odd) { margin-left:20px; }
  .packBox.col3 dl:first-child { margin-left:0; }

  .packBox.col3 dl dd.cont .dotList > li { min-width: 100%; }
}

@media all and (max-width:976px) {
  .packBox > dl.box3 dd.cont, .packBox > dl.box4 dd.cont { height: 500px; }

  .packBox.col3 { text-align: left; }
  .packBox.col3 dl { max-width: calc(50% - 10px); }
  .packBox.col3 dl:nth-child(odd) { margin-left:0; }
  .packBox.col3 dl.box3 dd.cont { height: auto !important; }
}

@media all and (max-width:767px) {
  .packBox > dl { max-width: 100%; width: 100%; margin: 10px 0;  }
  .packBox > dl.box1 dd.cont, .packBox > dl.box2 dd.cont { height: auto; }
  .packBox > dl.box3 dd.cont, .packBox > dl.box4 dd.cont { height: auto; }
  .packBox.col3 dl dd.cont { height: auto !important; }

  .packBox.col3 dl { max-width: 100%; width: 100%; margin: 10px 0;}
}



.dowell { position: relative; font-size:0; overflow: hidden; text-align: center; }
.dowell::before { content: ''; width: 50%; height: 1px; background: #bac2d1; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.dowell > dl { position: relative; display: inline-block; vertical-align: top; width: 600px; margin: 30px;
                    font-size: 1.6rem; text-align: left; max-width: calc(50% - 60px); }
.dowell > dl dt { font-size: 2.4rem; color:#fff; padding: 1em; font-family: 'SBAggro'; font-weight: 300; }
.dowell > dl dd { padding: 1.5em; background: #fff; }
.dowell > dl.box1 { border: 1px solid #0196da; }
.dowell > dl.box2 { border: 1px solid #2155ae; }
.dowell > dl.box1 dt { background: #0196da; text-align: right; }
.dowell > dl.box2 dt { background: #2155ae; }
.dowell > dl.box1 .checkList li::before { background-color: #0196da; }

@media all and (max-width:1480px) {
  .dowell > dl { max-width: calc(50% - 20px); }
  .dowell > dl.box1 { margin-left:0; margin-right: 20px; }
  .dowell > dl.box2 { margin-right:0; margin-left: 20px; }
  .dowell > dl .checkList li p { font-size: 1.7rem;  }
}

@media all and (max-width:860px) {
  .dowell::before { width: 1px; height: 50%; }
  .dowell > dl { max-width: 100%; }
  .dowell > dl.box1, .dowell > dl.box2 { margin: 20px 0; }
}



.memberWrap h4 { color:#212121; font-size: 2rem; margin-bottom: 0.7em; }
.memberWrap p { font-size: 1.7rem; line-height: 1.6em; margin-bottom: 2em; }



#equipList { position: relative; width: 100%; overflow: hidden; text-align: center; padding-left: 1px;  padding-top: 1px;}
#equipList li { float: left; vertical-align: top; width: calc((100% + 3px) / 4); border: 1px solid #dbe0e4; margin-left: -1px; margin-top: -1px; }
#equipList li img { max-width: 100%; }
#equipList li dl { background: #f3f9fb; color:#455a7e; padding: 2em 1.5em; height: 180px; }
#equipList li dl dt { font-size: 2rem; font-weight: 700; margin-bottom: 0.7em; color:#0196da;  }
#equipList li dl dd { line-height: 1.5em; }
#equipList li.wid100 { position: relative; width: 100%; display: table; }
#equipList li.wid100 dl { height: auto; }

#equipList li.wid50 { width: calc((100% + 1px) / 2); }
#equipList li.wid50 dl { height: auto; }

/*#equipList li.col3 { width: calc((100% + 2px) / 3);}
#equipList li.col3 dl { height: 160px; }*/


@media all and (max-width:1280px) {
  #equipList li dl { height: 200px; }
}

@media all and (max-width:960px) {
  #equipList li.col3,
  #equipList li { width: calc((100% + 2px) / 2); }
  #equipList li.col3 dl,
  #equipList li dl { height: 150px; }
  #equipList li.wid50  { width: 100%; }

  #equipList li dl.h-auto { height: auto; }
}

@media all and (max-width:568px) {
  #equipList li dl { padding: 1.8em 1.2em; }
  #equipList li dl dd { line-height: 1.3em; }
}

@media all and (max-width:480px) {
  #equipList li { width: 100%; }
  #equipList li dl { height: auto; }
}


.checkupPrice { border: 5px solid #ebf4f7; padding: 1em; text-align: center; font-size: 2rem; color:#fc5a94; font-weight: 500;  }
.checkupPrice dt, .checkupPrice dd { display: inline-block; vertical-align: middle; margin: 0 0.5em; }
.checkupPrice dt { font-weight: 800; }


.checkupTit { border: 3px solid #2155ae; padding: 1em; text-align: center; color:#2155ae; font-weight: 600; font-size: 1.9rem; }
.checkupTit + .plus { color:#ccc; text-align: center; font-size: 3rem; font-weight: 900; margin: 0.4em 0;   }





#newIntro1{display: flex; margin-bottom: 40px; width: 100%; max-width: 1200px; margin-inline: auto;}
#newIntro1 .titWrap{padding-bottom: 40px;  width: 25%; flex:0 0 auto; border-bottom: 5px solid #f26522;}
#newIntro1 .titWrap h3{font-size: 3.6rem; color: #f26522; font-family: 'SBAggro'; font-weight: 500;}
#newIntro1 .titWrap p{font-size: 2.5rem; font-weight: 500; color: #000;}
#newIntro1 .contWrap{padding-bottom: 40px; padding-left: 5%;  width: 75%; border-bottom: 1px solid #000;}
#newIntro1 .contWrap p.t1{font-size: 3.0rem; font-weight: 300; color: #000; font-family: 'SBAggro';}
#newIntro1 .contWrap .list1{display: flex; flex-wrap: wrap; gap: 2em 0;}
#newIntro1 .contWrap .list1 > li{width: 50%;}
#newIntro1 .contWrap .list1 > li img{max-width: 50%;}
#newIntro1 .contWrap .list1 > li p{padding-top: 0.8em; font-size: 2.0rem; color: #000; font-weight: 300; line-height: 1.4em; font-family: 'SBAggro';}
#newIntro1 .contWrap .list2{display: flex; gap: 2em; flex-wrap: wrap;}
#newIntro1 .contWrap .list2 > li{width: calc((100% - 6em)/4); aspect-ratio: 1/1; display: flex; justify-content: center; align-items: center; background-color: #5fb8e0; color: #fff; border-radius: 50%; text-align: center; font-family: 'SBAggro'; font-weight: 300; font-size: 2.8rem;}
@media all and (max-width:1280px) {
    #newIntro1 .contWrap .list2 > li{width: calc((100% - 2em)/2); }
}
@media all and (max-width:768px) {
    #newIntro1{display: block;}
    #newIntro1 .titWrap{width: 100%; padding-bottom: 20px; margin-bottom: 30px;}
    #newIntro1 .contWrap{width: 100%; padding-bottom: 30px; padding-left: 0;}
    #newIntro1 .contWrap p.t1{font-size: 2.6rem;}
    #newIntro1 .contWrap .list1{gap: 1em;}
    #newIntro1 .contWrap .list1 > li{width: calc(50% - 0.5em);}
    #newIntro1 .contWrap .list1 > li p{font-size: 2.0rem;}
}


#newIntro1.ver2 .titWrap{border-color: #0079ae;}
#newIntro1.ver2 .titWrap h3{color: #0079ae;}
#newIntro1.ver3 .titWrap{border-color: #262262;}
#newIntro1.ver3 .titWrap h3{color: #262262;}
#newIntro1 .contWrap .list2 > li:nth-child(2){background-color: #0079ae;}
#newIntro1 .contWrap .list2 > li:nth-child(3){background-color: #262262;}
#newIntro1 .contWrap .list2 > li:nth-child(4){background-color: #414042;}