@charset "UTF-8";

/**/
.mh-10{margin:0 10px;}
.mh-20{margin:0 20px;}
.mh-30{margin:0 30px;}
.mh-40{margin:0 40px;}

.mv-10{margin:10px 0;}
.mv-20{margin:20px 0;}
.mv-30{margin:30px 0;}
.mv-40{margin:40px 0;}
.mv-80{margin:80px 0;}

.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}
.mt-40{margin-top:40px;}
.mt-50{margin-top:50px;}
.mt-60{margin-top:60px;}
.mt-70{margin-top:70px;}
.mt-80{margin-top:80px;}
.mt-90{margin-top:90px;}
.mt-100{margin-top:100px;}
.mt-120{margin-top:120px;}
.mt-150{margin-top:150px;}
.mt-180{margin-top:180px;}
.mt-200{margin-top:200px;}
.mt-250{margin-top:250px;}

.mb-10{margin-bottom:10px;}
.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}
.mb-40{margin-bottom:40px;}
.mb-50{margin-bottom:50px;}
.mb-60{margin-bottom:60px;}
.mb-70{margin-bottom:70px;}
.mb-80{margin-bottom:80px;}
.mb-90{margin-bottom:90px;}
.mb-100{margin-bottom:100px;}
.mb-120{margin-bottom:120px;}
.mb-150{margin-bottom:150px;}

.ml-10{margin-left:10px;}
.ml-20{margin-left:20px;}
.ml-30{margin-left:30px;}
.ml-40{margin-left:40px;}
.ml-50{margin-left:50px;}
.ml-100{margin-left:100px;}

.mr-10{margin-right:10px;}
.mr-20{margin-right:20px;}
.mr-30{margin-right:30px;}
.mr-40{margin-right:40px;}
.mr-50{margin-right:50px;}

.pd-10{padding:10px;}
.pd-20{padding:20px;}
.pd-30{padding:30px;}
.pd-50{padding:50px;}
.pd-90{padding:90px;}

.pv-10{padding: 10px 0;}
.pv-20{padding: 20px 0;}
.pv-30{padding: 30px 0;}
.pv-50{padding: 50px 0;}
.pv-80{padding: 80px 0;}
.pv-100{padding: 100px 0;}
.pv-150{padding: 150px 0;}
.pv-180{padding: 180px 0;}
.pv-250{padding: 250px 0;}
.pv-300{padding: 300px 0;}

.ph-10{padding: 0 10px;}
.ph-20{padding: 0 20px;}
.ph-30{padding: 0 30px;}
.ph-50{padding: 0 50px;}
.ph-100{padding: 0 100px;}
.ph-150{padding: 0 150px;}
.ph-250{padding: 0 250px;}

.pt-10{padding-top:10px;}
.pt-20{padding-top:20px;}
.pt-30{padding-top:30px;}
.pt-40{padding-top:40px;}
.pt-50{padding-top:50px;}
.pt-60{padding-top:60px;}
.pt-70{padding-top:70px;}
.pt-80{padding-top:80px;}
.pt-90{padding-top:90px;}
.pt-100{padding-top:100px;}
.pt-120{padding-top:120px;}
.pt-150{padding-top:150px;}

.pb-10{padding-bottom:10px;}
.pb-20{padding-bottom:20px;}
.pb-30{padding-bottom:30px;}
.pb-40{padding-bottom:40px;}
.pb-50{padding-bottom:50px;}
.pb-60{padding-bottom:60px;}
.pb-70{padding-bottom:70px;}
.pb-80{padding-bottom:80px;}
.pb-90{padding-bottom:90px;}
.pb-100{padding-bottom:100px;}
.pb-120{padding-bottom:120px;}
.pb-150{padding-bottom:150px;}

.pl-10{padding-left:10px;}
.pl-20{padding-left:20px;}
.pl-30{padding-left:30px;}
.pl-40{padding-left:40px;}
.pl-50{padding-left:50px;}

.pr-10{padding-right:10px;}
.pr-20{padding-right:20px;}
.pr-30{padding-right:30px;}
.pr-40{padding-right:40px;}
.pr-50{padding-right:50px;}
@media screen and (max-width:960px) {
  .pl-10{padding-left:0px;}
  .pl-20{padding-left:0px;}
  .pl-30{padding-left:0px;}
  .pl-40{padding-left:0px;}
  .pl-50{padding-left:0px;}

  .pr-10{padding-right:0px;}
  .pr-20{padding-right:0px;}
  .pr-30{padding-right:0px;}
  .pr-40{padding-right:0px;}
  .pr-50{padding-right:0px;}
  .pd-10{padding:10px;}
  .pd-20{padding:10px;}
  .pd-50{padding:10px;}
  .pd-90{padding:50px 15px;}


  .pv-100{padding: 60px 0;}
  .pv-150{padding: 100px 0;}
  .pv-180{padding: 100px 0;}
  .pv-250{padding: 100px 0;}
  .pv-300{padding: 100px 0;}

  .pb-50{padding-bottom:25px;}
  .pb-60{padding-bottom:30px;}
  .pb-70{padding-bottom:35px;}
  .pb-80{padding-bottom:40px;}
  .pb-90{padding-bottom:45px;}
  .pb-100{padding-bottom:50px;}
  .pb-120{padding-bottom:60px;}
  .pb-150{padding-bottom:70px;}

  .ph-30{padding: 0 15px;}
  .ph-50{padding: 0 20px;}
  .ph-100{padding: 0 0px;}
  .ph-150{padding: 0 0px;}
  .ph-250{padding: 0 0px;}

  .mt-180{margin-top:80px}
  .mt-200{margin-top:100px}
  .mt-250{margin-top:100px}
  .mv-80{margin: 40px 0}

  .mt-10-mo{margin-top: 10px;}
  .mt-30-mo{margin-top: 30px;}
  .mt-50-mo{margin-top: 50px;}
  .mt-100-mo{margin-top: 100px;}
}
@media screen and (max-width:426px) {
  .pv-100{padding: 30px 0;}
  .pv-150{padding: 80px 0;}
  .pv-250{padding: 80px 0;}
  .pl-30{padding-left:15px;}
  .pl-40{padding-left:15px;}
  .pl-50{padding-left:15px;}
}



.ta-center{text-align: center;}
.ta-left{text-align: left;}
.ta-right{text-align: right;}
@media screen and (max-width:960px) {
  .ta-right{text-align: center;}
}

.fc-white{color:#fff;}
.fc-black{color:#000;}
.fc-deepgray{color:#333;}
.fc-lightgray{color:#EFEEF2}
.fc-blue{color:#328FD6}

.fw-100{font-weight: 100;}
.fw-300{font-weight: 300;}
.fw-400{font-weight: 400;}
.fw-500{font-weight: 500;}
.fw-600{font-weight: 600;}
.fw-700{font-weight: 700;}
.fw-900{font-weight: 900;}

.fs-16{font-size: 16px; line-height: 1.2;}
.fs-18{font-size: 18px; line-height: 1.2;}
.fs-20{font-size: 20px; line-height: 1.2;}
.fs-22{font-size: 2.2rem; line-height: 1.2;}
.fs-24{font-size: 2.4rem; line-height: 1.2;}
.fs-30{font-size: 3rem; line-height: 1.2;}
.fs-35{font-size: 3.5rem; line-height: 1.2;}
.fs-40{font-size: 4.0rem; line-height: 1.2;}
.fs-48{font-size: 4.8rem; line-height: 1.2;}
.fs-50{font-size: 5.0rem; line-height: 1.2;}
.fs-60{font-size: 6.0rem; line-height: 1.2;}
.fs-70{font-size: 7.0rem; line-height: 1.2;}
.fs-90{font-size: 9.0rem; line-height: 1.2;}
.fs-180{font-size: 18rem; }

@media screen and (max-width:960px) {
  .fs-180{font-size: 15rem; }
}
@media screen and (max-width:426px) {
  .fs-24{font-size: 16px;}
  .fs-180{font-size: 10rem; }
}

.dp-b{display:block}
.dp-i{display: inline;}
.dp-ib{display: inline-block;}

.bg-lightgray{background:#f8f8f8}
.bg-gray{background:#1D1D1D}
.bg-white{background:#fff}
.bg-blue{background:#328FD6}

.flex{
  display:flex;
  justify-content: center;
  align-items: center;
}
.flex-sb{
  display:flex;
  justify-content: space-between;
  align-items: center;
}

.flex-start{
  display:flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.flex-end{
  display:flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-wrap: wrap;
}

.flex-1{flex:1}

@media screen and (max-width:960px) {
  .flex-1{ flex:initial }
  .flex-order-1{order:-1}
}

.flex-wrap{ flex-wrap: wrap;}

.flex-col4{display: flex;}
.flex-col4>div{width: 25%}

.flex-col5{display: flex;}
.flex-col5>div{width: 20%}
.flex-col5-1{display: flex;}
.flex-col5-1>div{width: 20%}

.flex-col6{display: flex;}
.flex-col6>div{width: 16.666%}
@media screen and (max-width:960px) {
  .flex-col4{flex-wrap: wrap; justify-content: center;}
  .flex-col4>div{width: 50%}
  .flex-col5{flex-wrap: wrap; justify-content: center;}
  .flex-col5>div{width: 33.333%}
  .flex-col5-1{flex-wrap: wrap; justify-content: center;}
  .flex-col5-1>div{width: 50%}
  .flex-col6{display: flex; flex-wrap: wrap;}
  .flex-col6>div{width: 50%}
}
@media screen and (max-width:414px) {
  .flex-col5-1>div{width: 100%}
}

.grid-col4{
  /* 모바일에서 2열로 */
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 28px;
  row-gap: 28px;
}
.grid-col4-1{
  /* 모바일에서 1열로 */
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 28px;
  row-gap: 28px;
}
.grid-col3{
  /* 모바일에서 2열로 */
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 28px;
  row-gap: 28px;
}
.grid-col2{
  /* 모바일에서 2열로 */
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 28px;
  row-gap: 60px;
}
.grid-col2-1{
  /* 모바일에서 1열로 */
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 28px;
  row-gap: 60px;
}

.grid-col3-1{
  /* 모바일에서 1열로 */
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 28px;
  row-gap: 28px;
}
@media screen and (max-width:960px){

  .grid-col4{grid-template-columns:  repeat(2, 1fr); }
  .grid-col4-1{grid-template-columns:  1fr; }
  .grid-col3{grid-template-columns:  repeat(2, 1fr); }
  .grid-col3-1{grid-template-columns:  1fr; }
  .grid-col2{grid-template-columns:  repeat(2, 1fr); }
  .grid-col2-1{grid-template-columns:  1fr; }
}



/**/

.big-point-txt{
  font-size: 6rem;
  line-height: 1.3;
  font-weight: 700;
  color: #1D1D1D;
}

.normal-txt{font-size: 21px; line-height: 30px; color: #1D1D1D;}
.normal-txt-24{font-size: 24px; line-height: 30px; color: #1D1D1D;}
.normal-txt-wh{font-size: 21px; line-height: 30px; color: #fff;}

.border-topbottom{border-top: 2px solid #1D1D1D; border-bottom: 2px solid #1D1D1D;}
.border-top-lightgray{ border-top: 2px solid #E3E3E3;}

.blueround-box{
  display: inline-block;
  border: 3px solid #449fe5;
  background:#edf5fa;
  border-radius: 33px;
  text-align: center;
  padding:10px 30px;
  color:#000;
  font-size: 2.4rem;
  line-height: 1.2;
}
.blueround-box h4{font-size: 3rem; color: #328FD6; font-weight: 600;}
.blueround-box em{color: #328FD6; font-weight: 600;}

.grayround-box{
  background :#f8f7f7;
  border: 1px solid #c2c2c2;
  border-radius: 20px;
  padding: 30px 20px;
}

@media screen and (max-width:426px) {
  .normal-txt, .normal-txt-wh,.normal-txt-24{font-size: 16px;line-height: 22px;}
}


/* card layout */
.card-4{display: flex; justify-content: space-between; align-items: center;width: 1420px; margin:0 auto;}
.card{ width:calc((100% - 90px) / 4); display: block; background:#fff;box-shadow: 0 0 30px rgba(0,0,0,0.14); transition:all ease .5s;}
.card_inner{ width:100%; height: 0; padding-top: 139%; background:#fff;position: relative; z-index: 9;}
.card img{position: absolute; bottom:0;left: 50%;z-index: 2; transform: translateX(-50%); width:100%;}
.card .eng_ttl{ position: absolute; top: 8%; left:10%; z-index: 3; line-height: 1.4; text-align: left !important;}
.card .card_ttl{ position: absolute;  top: 20%;left:10%; z-index: 3; font-size: 3rem;  font-weight: 600; color: #1D1D1D; line-height: 1.4;}
.card:hover{ transform: translateY(-10px);}
.card .card_inner::before{ content: ''; display: block; width: 100%; height: 100%; background: #fff; position: absolute; left:0px; top: 0px;  z-index: 1;}
.card_inner::after{ content: ''; display: block; width: calc(100% + 8px); height: calc(100% + 8px); background: #328FD6; position: absolute; left:-4px;  top: -4px;  z-index: 0; transition:all ease .3s; opacity: 0;}
.card:hover .card_inner::after{ opacity: 1;}

@media screen and (max-width:1412px) {
  .card-4{width:100%; padding:0 3vw;}
  .card .card_ttl{font-size: 2.5rem;}
}
@media screen and (max-width:960px){
  .card-4 {flex-wrap: wrap;}
  .card-4 .card{width: calc((100% - 30px) / 2); margin-bottom: 5rem;}
  .card .card_ttl{font-size: 3rem;}
}
/* //card layout */

/* topline-items */
.topline-items{display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 30px; row-gap: 8rem;}
.topline-items li{ border-top:4px  solid #1D1D1D; transition: all ease .5s;}
.topline-items li:hover{ transform: translateY(-10px); border-color: #328FD6;}
.topline-items p{padding-top: 20px;}
.topline-items .item-info{ border-top: 1px solid #D9D9D9; padding-top: 3rem;}
.topline-items .item-info h4{font-size: 3rem; font-weight: 500;}
.topline-items .item-info h6{font-size: 18px; color:#747474; margin-top: 10px;}
.topline-items .item-info h6 b{ color:#1D1D1D;}
@media screen and (max-width:960px){
  .topline-items{grid-template-columns:  repeat(2, 1fr); column-gap:8rem;}
}
/* //topline-items */
/* topbottomline-items */
.topbottomline-items{display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 30px; row-gap: 8rem;}
.topbottomline-items.grid-col3{display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 30px; row-gap: 8rem;}
.topbottomline-items li{  border-top:4px  solid #1D1D1D;border-bottom:4px  solid #1D1D1D;transition: all ease .5s;}
.topbottomline-items li:hover{ transform: translateY(-10px); border-color: #328FD6;}
.topbottomline-items p{padding-top: 20px;}
.topbottomline-items .item-info{ border-top: 1px solid #D9D9D9; padding-top: 3rem;}
.topbottomline-items .item-info h4{font-size: 3rem; font-weight: 600; padding-bottom:2rem;transition: all ease .2s;}
.topbottomline-items li:hover .item-info h4{color:#328FD6}
.topbottomline-items .item-info h6{font-size: 18px; color:#747474; margin-top: 10px; border-top:1px solid #D9D9D9;padding:2rem 0 2.5rem; line-height: 1.3;}
.topbottomline-items .item-info h6 b{ color:#1D1D1D;}
@media screen and (max-width:960px){
  .topbottomline-items{grid-template-columns:  repeat(2, 1fr); column-gap:3rem; row-gap: 3rem;}
  .topbottomline-items.grid-col3{display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 30px; row-gap: 8rem;}
}
/* //topbottomline-items */




.dark-square-item{position: relative;}
.dark-square-item > div{width:100%;height:0; padding-top:91.911%; position: relative;}
.dark-square-item img{position: absolute; top:0; left:0; z-index:3; width:100%;}
.dark-square-item h4{position:absolute; top:112px; left:50%; z-index: 4; width:100%; transform: translateX(-50%); font-size: 3rem; text-align: center; color:#fff; line-height: 1.2;}
.dark-square-item h4::before{content:''; display: block; width:25%; height:2px; background:#fff; margin:0 auto 20px}
@media screen and (max-width:960px){
  .dark-square-item h4{top: 30%; font-size: 2rem;}

}

.roundSlider .swiper-slide{
  background:#F8F8F8;
  border-radius: 272px;
  height: 543px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:0 214px
}

.roundSlider .swiper-slide p{
  width: 406px;
  height:406px;
  background: #fff;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 26px;
}

.roundSlider .swiper-slide h4{text-align: right; font-size:3rem;
font-weight: 500; line-height: 1.4;margin:20px 0}
.roundSlider .swiper-slide h3{text-align: right; font-size:4rem;
font-weight: 600; border-top:2px solid #1D1D1D; padding-top:20px;}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{display: none;}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{display: none;}
.roundSlider .swiper-button-prev{left: 8rem}
.roundSlider .swiper-button-next{right: 8rem}

@media screen and (max-width:960px){

  .roundSlider .swiper-slide{
    flex-direction: column;
    height: initial;
    padding:60px 4vw;
    text-align: center;
  }

  .roundSlider .swiper-button-next{display: none;}
  .roundSlider .swiper-button-prev{display: none;}
  .roundSlider .swiper-slide p{margin-right:0; width:370px; height: 370px;}
  .roundSlider .swiper-slide h4,.roundSlider .swiper-slide h3{text-align: center;}
  .roundSlider .swiper-slide .eng_ttl_right{
    text-align: center;
    margin-top:50px;
  }
}


/* overcard */
.overcard{display: flex; flex-wrap: wrap;}
.overcard li{width: 25%; text-align: center; background:#fff; padding: 65px 0 85px;display: flex; flex-direction: column; align-items: center; box-shadow:0 0  50px rgba(0,0,0,0.14); transition: all ease .5s;}
.overcard .overcard-flexend{justify-content: flex-end; }
.overcard h4{font-size: 3rem; font-weight: 600; margin-top:1rem}
.overcard li h6{font-size: 2.4rem; font-weight: 500; line-height: 3.3rem;}
.overcard li h6::before{content:'';display: block; width:4.5rem; height:2px;background: #1d1d1d; margin:2rem auto;}

.overcard li:last-child{z-index: 0;}
.overcard li:nth-last-child(1){z-index: 1;}
.overcard li:nth-last-child(2){z-index: 2;}
.overcard li:nth-last-child(3){z-index: 3;}
.overcard li:nth-last-child(4){z-index: 4;}
.overcard li:hover{z-index: 9; transform: translateY(-10px);}
@media screen and (max-width:960px){
  .overcard li:hover{z-index: 9; transform: translateY(0px);}
  .overcard li{width: 50%;}
}
/* //overcard */
/* overblue-card */
.overblue-cards{
  padding:0 90px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 22px;
  row-gap: 22px;
}

.overblue-card{background:#f8f8f8; display: flex; flex-direction: column; padding-top:44px; height:252px; transition: all ease .5s;}
.overblue-card em{color:#328FD6; font-size:3rem; font-weight: 600;text-align: center; transition: all ease .2s;}
.overblue-card em::after{content: ''; display:block; width: 40px; height:2px; background: #328FD6; margin: 4px auto 20px; transition: all ease .2s;}
.overblue-card h4{font-size:2.4rem; font-weight: 500; text-align: center; line-height: 1.4; transition: all ease .2s;}
.overblue-card:hover{background: #328FD6; transform: translateY(-10px);}
.overblue-card:hover em{color:#fff;}
.overblue-card:hover em::after{background:#fff;}
.overblue-card:hover h4{color:#fff;}
@media screen and (max-width:960px) {
  .overblue-cards{
    grid-template-columns: repeat(2, 1fr);
    padding:0 0px;
  }
  .overblue-card{
    height: initial;
    padding-bottom:4em;
  }
}
/* //overblue-card */


/* step-item */
.step-item{display: flex; flex-direction: column; text-align: center;}
.step-item h4{font-size: 3.3rem; font-weight: 700;}
.grid-col4 .step-item h4{font-size: 2.6rem; font-weight: 700;}
.step-item h6::before{content: ''; display: block; width: 6rem; height:3px; background: #1D1D1D; margin: 2rem auto;}
.step-item small{font-size: 18px; font-weight: 500 ; color:#7E7E7E}
@media screen and (max-width:960px) {
  .step-item{flex-direction: row; align-items: center; flex-wrap: wrap;}
  .grid-col4 .step-item, .grid-col3-1 .step-item, .grid-col2-1 .step-item{flex-direction: column;} 
  .grid-col4 .step-item p,.grid-col3-1 .step-item p, .grid-col2-1 .step-item p{margin-right: 0;} 
  .grid-col4 .step-item h4,.grid-col4 .step-item em,
  .grid-col3-1 .step-item h4,.grid-col3-1 .step-item em,
  .grid-col2-1 .step-item h4,.grid-col2-1 .step-item em{text-align: center;} 
  .grid-col4 .step-item h6::before, .grid-col3-1 .step-item h6::before, .grid-col2-1 .step-item h6::before{margin: 2rem auto;}
  .grid-col3-1 .step-item .normal-txt{text-align: center;}

  .step-item p{margin-right: 3rem; flex:1;}
  .step-item div{flex:1;}
  .step-item em{display:block;text-align: left;}
  .step-item em .fs-24{font-size: 16px;}
  .step-item h4{text-align: left;}
  .step-item h6{text-align: left;}
  .step-item h6::before{margin:2rem 0;}
  
}
/* //step-item */


.top-line::before{content: ''; display: block; width: 6rem; height:3px; background: #1D1D1D; margin: 2rem auto;}
.top-line-blue::before{content: ''; display: block; width: 6rem; height:3px; background: #328fd6; margin: 2rem auto;}

/* blueline-item */
.blueline-item{border-right:1px solid #C2C2C2; padding:0 30px; text-align: center;}
.blueline-item:last-child{border-right: none;}
.blueline-item h3{ border-top: 4px solid #328FD6; font-size: 21px; 
  line-height:29px; padding-top: 20px;}
.blueline-item h6{ border-top: 4px solid #328FD6; font-size: 18px; 
  line-height:25px; padding-top: 20px;}
.flex-col6 .blueline-item{padding:0 20px;}


.bluetxt-item{border-right:1px solid #C2C2C2; padding:0 30px; text-align: center;}
.bluetxt-item:last-child{border-right: none;}
.betweenline-item{border-right:1px solid #C2C2C2; padding:0 30px; text-align: center;}
.betweenline-item:last-child{border-right: none;}
.betweenline-item .underline{font-size: 5rem; font-weight: 500; display: inline-block; border-bottom: 2px solid #1D1D1D; padding-bottom:4px;}
@media screen and (max-width:960px) {
  .blueline-item{margin-bottom:4rem}
    .blueline-item h3{ 
      font-size: 16px; line-height:22px;
    }

    .bluetxt-item{margin-bottom: 3rem;border-right: none;}
    .bluetxt-item p{font-size: 14px;}
    .bluetxt-item h3{font-size: 16px; line-height: 1.2;} 
    .bluetxt-item:nth-child(2n-1){border-right:1px solid #C2C2C2;}
    
    .betweenline-item{margin-bottom: 3rem;border-right: none;}
    .betweenline-item:nth-child(2n-1){border-right:1px solid #C2C2C2;}

    .flex-col6 .blueline-item:nth-child(2n){
      border-right: none;
    }
}

/* //blueline-item */

/* dotline-item */
.dotline-ul{padding:4rem}
.dotline-li{font-size:21px; font-weight: 500; padding:2rem 0; border-bottom:1px solid #C2C2C2}
.dotline-li:last-child{border-bottom: none;}
.dotline-li::before{
  content: '•';
}
/* //dotline-item */

/* border-circles */
.border-circles{display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 6rem; }
.border-circle-item{width:240px; margin: 0 auto;}
.border-circle-item:hover p { border-color:#328FD6;}
.border-circles:hover .border-circle-item:not(:hover) p img{filter:grayscale(1)}
.border-circle-item p{display: flex; justify-content: center; align-items: center; width: 240px; height: 240px; border-radius: 50%; border:20px solid #ebebeb; transition: all ease .5s;}
.border-circle-item:hover p{ animation: bounce 2s infinite; box-shadow: 0px 20px 20px rgb(0 0 0 / 14%); }  

  @media screen and (max-width:960px) {
    .border-circles{grid-template-columns: repeat(2, 1fr);}
    .border-circle-item{width:180px;}
    .border-circle-item p{width: 180px; height: 180px }
    .border-circle-item p img{width: 60%}
  }

/* //border-circles */



/* bluenum-order */
.bluenum-order{ 
  width: 90%; margin:0 auto;
  background: #f8f8f8;
  padding:50px 150px;
}
.bluenum-order em{}

.bluenum-order li{
  border-bottom:1px solid #bebebf;
  padding:2.8rem 0 2.8rem 52px;
  text-indent: -5.2rem
}
.bluenum-order li:last-child{border-bottom: none;}

.bluenum-order em{
  font-size: 3rem;
  color:#328FD6;
  font-weight: 600;
}
.bluenum-order span{
  font-size: 2.7rem;
  font-weight: 500;
  line-height: 1.4;
}
@media screen and (max-width:960px) {
  .bluenum-order{padding: 4vw 10vw}
}
/* //bluenum-order */




.animated {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

.animated.flipOutX,
.animated.flipOutY {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
            transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
            transform: translate3d(0, -4px, 0);
  }
}

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
            transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
            transform: translate3d(0, -4px, 0);
  }
}

@-webkit-keyframes bounce2 {
  from, to {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }
  50% {
    -webkit-transform: translate3d(0, 0px, 0);
            transform: translate3d(0, 0px, 0);
  }
}

@keyframes bounce2 {
  from, to {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }
  50% {
    -webkit-transform: translate3d(0, 0px, 0);
            transform: translate3d(0, 0px, 0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

.bounce2 {
  -webkit-animation-name: bounce2;
  animation-name: bounce2;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}