@charset "utf-8";
html, body {word-break: keep-all;font-size:17px;}

/**/
.todo  {outline:1px solid blue;}

/**/
.table.auction-proposal-table th {color:#000; background:rgba(21,110,228,0.05);}
section {margin-bottom: 170px;}
section .title{text-align: center; margin-bottom: 25px;}
section .s_title{margin-bottom: 20px; position: relative; padding-left: 15px; color: #156ee4;}

#page-14 {}
#page-14 .visual{background: url(/images/content/menu/sub01_visual.png) no-repeat center center; height: 450px; color: #fff;}
#page-14 .visual .wrap{height:100%}
#page-14 .visual .flex{align-items:flex-start; width: 100%; height:100%; flex-direction: column; justify-content: space-around; padding: 130px 50px;}
#page-14 .visual .fs-40{line-height: 50px;}

#page-14 .info_cgs{margin-bottom: 170px;}
#page-14 .info_cgs .head{width: 70%; margin: 0 auto; border: 1px solid #156ee4; border-radius: 25px; padding: 25px 50px; text-align: center; position: relative;}
#page-14 .info_cgs .head::before{position: absolute; content: ''; display: block; margin: auto; top: auto; right: 0; bottom: 0; left: 0; transform: translateY(60%); width: 8px; height: 8px; background: #156ee4; border-radius: 100%; z-index: 10;}
#page-14 .info_cgs .head .top p,
#page-14 .info_cgs .head .top div{display: inline-block;}
#page-14 .info_cgs .head .top div:nth-child(1) p{color:#0c4da2;}
#page-14 .info_cgs .head .top div:nth-child(2) p{color:#f47920;}
#page-14 .info_cgs .head .top div:nth-child(3) p{color:#00a651;}
#page-14 .info_cgs .head div strong{color: #000;}
#page-14 .info_cgs .body{margin-top: 90px;}
#page-14 .info_cgs .body .flex{justify-content: space-between; position: relative;}
#page-14 .info_cgs .body .flex::before{position: absolute; content: ''; display: block; margin: auto; top: -50px; right: 0; bottom: auto; left: 0; width: 77.2%; height: 1px; background: #e2e2e2; z-index: 1;}
#page-14 .info_cgs .body .cycle{position: relative;}
#page-14 .info_cgs .body .cycle::after{position: absolute; content: ''; display: block; width: 120%; height: 120%; border: 1px dashed #e2e2e2; border-radius: 100%; top: -10%; left: -10%;}
#page-14 .info_cgs .body .item{text-align: center; width: 275px; height: 275px; border: 1px solid #156ee4; border-radius: 100%; position: relative;}
#page-14 .info_cgs .body .item.flex{align-items: center; flex-direction: column; justify-content: center;}
#page-14 .info_cgs .body .item .number{color: #156ee4;}
#page-14 .info_cgs .body .item::before{position: absolute; content: ''; display: block; margin: auto; top: 0; right: 0; bottom: auto; left: 0; transform: translateY(-50%); width: 8px; height: 8px; background: #156ee4; border-radius: 100%; z-index: 10;}
#page-14 .info_cgs .body .item::after{position: absolute; content: ''; display: block; margin: auto; top: 0; right: 0; bottom: auto; left: 0; transform: translateY(-100%); width: 1px; height: 50px; background: #e2e2e2; z-index: 1;}
#page-14 .info_cgs .body .cycle:nth-child(2) .item::after{height: 90px;}

#page-14 .process{}
#page-14 .process .bg{background: #f8f8f8; padding: 40px;}
#page-14 .process .s_title::before{position: absolute; content: ''; display: block; width: 5px; height: 20px; background: #156ee4; top: 11px; left: 0;}
#page-14 .process .box{background: #fff; width: 100%; height: auto; border-radius: 30px; padding: 45px 50px;}
#page-14 .process ul.con{justify-content: space-between;}
#page-14 .process .item_01 .line{width: 108px; height: 108px; border: 1px solid #156ee4; border-radius: 100%; align-items: center; justify-content: center; flex-direction: column; position: relative;}
#page-14 .process .item_01 .line::after{position: absolute; content: ''; display: block; width: 120%; height: 120%; border: 1px dashed #e2e2e2; border-radius: 100%; top: -10%; left: -10%; }
#page-14 .process .item_01 .line::before{position: absolute; content: ''; display: block; background: url(/images/content/menu/icon_arrow.png) no-repeat center center; width: 22px; top: 0; bottom: 0; right: -85%; }
#page-14 .process .item_02{flex: 0 30%; color: #fff; position: relative;}
#page-14 .process .item_02:before{position: absolute; content: ''; display: block; background: url(/images/content/menu/icon_arrow.png) no-repeat center center; width: 22px; top: 0; bottom: 10px; right: -30%; }
#page-14 .process .item_02 .fill{justify-content: center; padding: 16px 40px; border-radius: 57px;}
#page-14 .process .item_02 .fill:nth-child(1){background: #0a58be}
#page-14 .process .item_02 .fill:nth-child(2){background: #9d9d9d;}
#page-14 .process .item_03 .ai,
#page-14 .process .item_03 .txt{text-align: center;}

#page-14 .why_cgs{}
#page-14 .why_cgs .contents{justify-content: space-between;}
#page-14 .why_cgs .item{border: 1px solid #c7d3ed; border-radius: 20px; flex: 0 31%; flex-direction: column; align-items: center; padding: 30px 0; position: relative;}
#page-14 .why_cgs .item::after{position: absolute; top: 0; right: 16px; font-size: 40px; color: #156ee4; font-weight: 700;}
#page-14 .why_cgs .item:nth-child(1)::after{content: 'Q';}
#page-14 .why_cgs .item:nth-child(2)::after{content: 'C';}
#page-14 .why_cgs .item:nth-child(3)::after{content: 'D';}
#page-14 .why_cgs .item p{text-align: center;}

@keyframes rotation {
  0% {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}

#page-14 .product{}
#page-14 .product ul{justify-content: space-between;}
#page-14 .four{margin-top: 25px;}
#page-14 .product ul li img{border: 1px solid #c7d3ed; display: block; max-width: 100%; width: 100%;}
#page-14 .product ul li p{text-align: center; padding: 13px 0; background: linear-gradient(165deg, rgba(21,110,228,1) 50%, rgba(0,192,250,1) 100%); color: #fff;}

@media (max-width:1200px){
  /* #page-14 .product ul{flex-wrap: wrap; justify-content: center;} */
  /* #page-14 .product ul{width: 1200px;} */
  #page-14 .product ul.two li:nth-child(1),
  #page-14 .product ul.four li:nth-child(3){margin-right: 15px;}
  #page-14 .product ul.four li:nth-child(2){margin: 0 15px;}
}

@media (max-width:875px){
  section .title.fs-34{font-size: 24px;}
  section .s_title.fs-28{font-size: 20px;}
  #page-14 .info_cgs .head{width: 100%; padding: 20px 50px;}
  #page-14 .info_cgs .head::before{display: none;}
  #page-14 .info_cgs .body{margin-top: 25px;}
  #page-14 .info_cgs .body .flex{flex-direction: column;}
  #page-14 .info_cgs .body .flex::before{display: none;}
  #page-14 .info_cgs .body .item.flex{width: 100%; height: auto; padding: 20px 0; flex-direction: row; text-align: left; border: none; align-items: center; justify-content: flex-start;}
  #page-14 .info_cgs .body .item .txt{font-size: 15px;}
  #page-14 .info_cgs .body .item .number.fs-25{font-size: 30px; margin-right: 20px;}
  #page-14 .info_cgs .body .item .number.mb-4{margin-bottom: 0 !important;}
  #page-14 .info_cgs .body .cycle::after{display: none;}
  #page-14 .info_cgs .body .item::after{display: none;}

  #page-14 .process .bg{padding: 25px 0;}
  #page-14 .process .box{padding: 30px 35px;}
  #page-14 .process .box img{margin: 0 auto;}
  #page-14 .process .s_title::before{height: 15px; top: 7px;}
  #page-14 .process .fs-24{font-size: 17px;}
  #page-14 .process ul.con{flex-direction: column;}
  #page-14 .process .item_01{display: flex; justify-content: space-between;}
  #page-14 .process .item_01 .line{flex: 0 49%; border-radius: 30px; padding: 16px; height: auto;margin-bottom: 3rem;}
  #page-14 .process .item_01 .line::after{display: none;}
  #page-14 .process .item_01 .line::before{background-size: contain; height: 30px; top: auto; right: 0; bottom: -45%; left: 0; margin: auto; transform: rotate(90deg);}
  #page-14 .process .item_02{ display: flex; justify-content: space-between;}
  #page-14 .process .item_02 .fill{flex: 0 49%; border-radius: 30px; margin-bottom: 3rem; align-items: center; padding: 16px 20px; text-align: center;}
  #page-14 .process .item_02:before{background-size: contain;  height: 30px; top: auto; right: 0; bottom: 9%; left: 0; margin: auto; transform: rotate(90deg);}
} 

@media (max-width:768px){
  #page-14 .visual{background: url(/images/content/menu/sub01_visual.png) no-repeat 60% center;}
  #page-14 .visual .fs-40{line-height: 33px;}
  #page-14 .why_cgs .contents{flex-wrap: wrap;}
  #page-14 .why_cgs .item {flex: 100%;}
  #page-14 .why_cgs .item:nth-child(2) {margin: 20px 0;}
  #page-14 .info_cgs .head .fs-28{font-size: 20px;}
}

@media (max-width:520px){
  #page-14 .visual .flex{padding: 100px 25px;}
  #page-14 .product ul{flex-wrap: wrap;}
  #page-14 .product ul.four li{flex: 0 48%;}
  #page-14 .product ul.two li:nth-child(1){margin-right: 0; margin-bottom: 20px;}
  #page-14 .product ul.four li:nth-child(3){margin-right: 0;}
  #page-14 .product ul.four li:nth-child(1),
  #page-14 .product ul.four li:nth-child(2){margin: 0; margin-bottom: 20px;}
}