body {background: #f8f8f8;}
.sub_top {padding:280px 0px 20px; border-bottom:1px solid #ddd; background: #fff;}
.sub_title {margin:0px auto 300px;}

.sc_1 {background: #F2F8FF; padding:110px 0px;}
.sc_1 .text_box {text-align: center; width: fit-content; margin:0 auto;}
.sc_1 .text_box span {font-size:30px; color:var(--light_blue); display: block; margin-bottom:20px;}
.sc_1 .text_box h4 {font-size:50px; line-height: 1.5; margin-bottom:30px; position: relative; z-index: 1;}
.sc_1 .text_box h4::before {display: block; content: ''; background: url(/img/util_sc_1_icon_1.png) no-repeat; position: absolute; width:56px; height:50px; left:-40px; top:0; z-index: -1;}
.sc_1 .text_box h4::after {display: block; content: ''; background: url(/img/util_sc_1_icon_2.png) no-repeat; position: absolute; width:56px; height:50px; right:-40px; bottom:0; z-index: -1;}
.sc_1 .text_box p {font-size:20px; line-height: 1.5;}

.sc_2 {background: url(/img/util_sc_2_bg.jpg) no-repeat center / cover; padding:375px 0px;}
.sc_2 .circle_chart {position: relative; width: 950px; margin: 0 auto;}
.sc_2 .circle_chart .center {background: url(/img/util_sc_2_circle_bg.png) no-repeat center / cover;}
.sc_2 .circle_chart .center div {width: 950px; height: 950px; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.sc_2 .circle_chart .center div p {font-size:30px; font-weight: var(--weight_bold); color:#fff;}
.sc_2 .circle_chart .item {width:420px; height: 420px; border-radius: 100%; position: absolute; display: flex; align-items: center; justify-content: center; flex-direction: column; background: #fff; border:1px solid var(--light_blue); text-align: center;}
.sc_2 .circle_chart .item_1 {top:-160px; left:50%; transform: translate(-50%); }
.sc_2 .circle_chart .item_2 {left:-160px; top:50%; transform: translateY(-50%);}
.sc_2 .circle_chart .item_3 {bottom:-160px; left:50%; transform: translate(-50%); }
.sc_2 .circle_chart .item_4 {right:-160px; top:50%; transform: translateY(-50%);}
.sc_2 .circle_chart .item div {text-align: center; padding:0px 30px; box-sizing: border-box;}
.sc_2 .circle_chart .item div img {margin-bottom:10px;}
.sc_2 .circle_chart .item div p {font-size:24px; font-weight: var(--weight_bold); margin-bottom:20px; color:#222; line-height: 1.5;}
.sc_2 .circle_chart .item div span {font-size:16px; color:#222; line-height: 1.5;}
.sc_2 .circle_chart .item_1 div p, .sc_2 .circle_chart .item_3 div p {margin-bottom:0;}

.sc_3 {background: #fff; padding:150px 0px; text-align: center;}
.sc_3 h4 {font-size:56px; line-height: 1.5; margin-bottom:80px; font-weight: var(--weight_bold);}
.sc_3 ul {display: flex; flex-wrap: wrap; justify-content: center; width: 1100px; margin: 0 auto;}
.sc_3 ul li {text-align: center; margin-right: 60px; margin-bottom:30px;}
.sc_3 ul li:nth-child(4n), .sc_3 ul li:nth-child(8n) {margin-right:0;}
.sc_3 ul li:nth-child(n5) {margin-bottom:0;} 

@media (max-width: 1280px){
    .sc_1 .text_box span {font-size:24px;}
    .sc_1 .text_box h4 {font-size:35px;}
    .sc_1 .text_box h4::before {left:60px;}
    .sc_1 .text_box h4::after {right:60px}

    .sc_2 {padding: 205px 0px;}
    .sc_2 .circle_chart {width: 500px;}
    .sc_2 .circle_chart .center div {width: 500px; height: 500px;}
    .sc_2 .circle_chart .item {width:270px; height:270px;}
    .sc_2 .circle_chart .center div p {font-size:24px;}
    .sc_2 .circle_chart .item div p {font-size:16px;}
    .sc_2 .circle_chart .item div span {font-size:12px;}
    .sc_2 .circle_chart .item_1 {top:-120px;}
    .sc_2 .circle_chart .item_2 {left:-120px;}
    .sc_2 .circle_chart .item_3 {bottom:-120px;}
    .sc_2 .circle_chart .item_4 {right:-120px;}
    
    .sc_3 {padding:80px 0px 60px;}
    .sc_3 h4 {font-size:30px;}
    .sc_3 ul {width: 80%;}
    .sc_3 ul li {margin-right:0; width: 33.3%;}
    .sc_3 ul li img {width: 90%;}
}

@media (max-width: 768px){
    .sub_top {padding:80px 0px 10px;}
    .sub_title {margin:0px auto 80px;}
    .sub_title h3 {font-size:35px;}
    .sub_content {padding:80px 0px;}
    .sub_content h4 {font-size:18px; margin-bottom:20px;}

    .sc_1 .text_box span {font-size:24px;}
    .sc_1 .text_box h4 {font-size:27px;}
    .sc_1 .text_box h4 b {margin-left:7px;}
    .sc_1 .text_box h4 br {display:none;}
    .sc_1 .text_box p {font-size:16px;}
    .sc_1 .text_box p br {display: none;}
    .sc_1 .text_box h4::before {left: 10px; top: -60px; z-index: -1;}
    .sc_1 .text_box h4::after {right:10px; bottom: -20px; z-index: -1;}

    .sc_2 {padding:80px 0px; overflow: hidden;}
    .sc_2 .container {width: 100%;}
    .sc_2 .circle_chart {width: 100%; flex-direction: column;}
    .sc_2 .circle_chart .center {width:100%; height: 600px; position: relative;}
    .sc_2 .circle_chart .center div {width: 600px; height: 600px; position: absolute; top:0; left: 50%; transform: translateX(-50%);}
    .sc_2 .circle_chart .item {position: unset; transform: none; width: 300px; height: 300px; margin:0 auto 20px; overflow: hidden;} 
    .sc_2 .circle_chart .item div {position: relative; z-index: 1; background: #fff; width:100%; height: 300px; display:flex;flex-direction:column;align-items:center;justify-content:center;}
    .sc_2 .circle_chart .center div p {font-size:24px;}
    .sc_2 .circle_chart .item div p {font-size:20px;}
    .sc_2 .circle_chart .item div span {font-size:12px;}
    .sc_2 .circle_chart .item_2 {margin-bottom:-125px;}
    .sc_2 .circle_chart .item_3 {margin-top:-125px;}
    
    .sc_3 h4 {font-size:24px; margin-bottom:50px;} 
    .sc_3 h4 br {display: none;}
    .sc_3 ul {width: 100%;}
    .sc_3 ul li {width: 50%;}
}