.octagon {
      width: 100px;
      height: 100px;
      background: #3cc4f0;
      position: relative;
    }
   .octagon:before {
      content: "";
      width: 100px;
      height: 0;
      position: absolute;
      top: 0;
      left: 0;
      border-bottom: 29px solid #3cc4f0;
      border-left: 29px solid #fff;
      border-right: 29px solid #fff;
    }
   .octagon:after {
      content: "";
      width: 100px;
      height: 0;
      position: absolute;
      bottom: 0;
      left: 0;
      border-top: 29px solid #3cc4f0;
      border-left: 29px solid #fff;
      border-right: 29px solid #fff;
    }   



  .hexagon {
      width: 100px;
      height: 55px;
      background: #3cc4f0;
      position: relative;
    }
    .hexagon:before {
      content: "";
      position: absolute;
      top: -24px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 25px solid #3cc4f0;
    }
    .hexagon:after {
      content: "";
      position: absolute;
      bottom: -24px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-top: 25px solid #3cc4f0;
    } 

.box1{ width:0; border-bottom:20px solid #3cc4f0; border-left:35px solid transparent; border-right:35px solid transparent; }
.box2{ width:70px; height:40px; background-color: #3cc4f0;text-align:center; margin-top:0px; }
.box3{ width:0; border-top:20px solid #3cc4f0; border-left: 35px solid transparent; border-right:35px solid transparent; margin-top:0px; }
.arrow3 {border: solid #fff; border-width:0 2px 2px 0; display: inline-block; vertical-align:middle; padding:8px; margin-top: 10px; }
.swiper-pagination-bullet{background:#fff !important; opacity:0.78 }
.swiper-pagination-bullet-active{ background:#3cc4f0 !important; }


/* main 추가*/

/* 모바일 */
@media (max-width:768px) { 

.box1{width:0; border-bottom:10px solid #3cc4f0; border-left:16px solid transparent; border-right: 16px solid transparent;}
.box2{width:32px; height:20px; background-color: #3cc4f0; text-align:center; margin-top:0px;}
.box3{width:0; border-top:10px solid #3cc4f0; border-left:16px solid transparent; border-right:16px solid transparent; margin-top:0px;}
.arrow3 {border:solid #fff; border-width:0 1px 1px 0;display: inline-block; vertical-align:middle; padding:5px; margin-top:0px;}
.swiper-pagination-bullet{background:#fff !important;opacity:0.78}
.swiper-pagination-bullet-active{background:#f5a8b0 !important;}