@charset "UTF-8";

.pg-sub > .content-body { padding:0; overflow:hidden; }
.page-content { width:100%; margin:0; padding:0}
.content-body .c {padding:0; max-width:100vw}
.sec1 { padding:100px 0; }
.sec1 .header { text-align:center; margin-bottom:50px; }
.sec1 .header .head { font-size:3rem; font-weight:600; }
.sec1 .header .desc { font-size:2rem; font-weight:500; }
.sec1 .header .desc::after { content: ""; display: block; margin:50px auto 0; width:1px; height:60px; background:#eee;}

.sec1 .a .img { background:#eee no-repeat center/cover; }
.sec1 .a .content { padding:50px 0 0 0; background:#fff; height:auto;  }
.sec1 .a .head { font-size:1.375rem; font-weight:600; }
.sec1 .a .desc { font-weight:400; }

.sec1 .a::after {display: block; content: ""; clear:both;}
.header .head span {color:#f5ab2c;}

.boxes {display: flex; justify-content: space-between; align-items: stretch; flex-wrap:wrap; margin:0 auto; padding:80px 30px 120px 30px; max-width: 1400px }
.boxes::after {display:block; content:""; clear:both; }
.boxes h3 { display:block; width:100%; text-align:center; padding-bottom: 80px;}
.gray-bg {background:#f8f8f8}
.box {flex:1 1 23%; margin:1%; background:#ffffff; padding:0}
.box .image-box img { width:100%; }
.box .text-box { padding:16px; }
.box ul {list-style:none; padding:16px; margin:0 auto;}
.box ul li {padding:2px 0; margin:0 0 0 18px; text-indent:-18px; }
.box ul ul {list-style:none; padding:0 0 8px 0; margin:0 0 0 36px; }
.box ul ul li {padding:2px 0; margin:0; text-indent:-12px}
.box .icon {width:14px; height:14px; vertical-align:middle; margin:-3px 6px 0 0; }

.plan .box {border:1px solid #231815; flex:1 1 31.3%; margin:1%; border-radius:16px; overflow: hidden;}
.plan .box .title {text-align:center; padding:16px 0; font-size:1.25rem;}
.plan .box:nth-child(1) .title {background:#fdd575;}
.plan .box:nth-child(2) .title {background:#c3e3eb;}
.plan .box:nth-child(3) .title {background:#f3ccdb;}
.plan .box:nth-child(4) .title {background:#d8e697;}
.plan .box:nth-child(5) .title {background:#ef8889;}
.plan .box:nth-child(6) .title {background:#8dd2e2;}

h3 {text-align:center;}
.plan h3 {padding-top:80px;}
.vision-img {width: 100%; padding:4% 0;}
.vision-img img {width:100%;}
@media (max-width: 1024px) {
    .sec1 .header .head { font-size:2.5rem; }
    .box {flex: 1 1 48%; margin:1%;}
}

@media (max-width: 767px) {
    .sec1 { padding:60px 0; }
    .sec1 .header { margin-bottom:30px; }
    .sec1 .header .head { font-size:2rem; }
    .sec1 .a .content { padding:25px 0; }
    .sec1 .a .desc { margin-top:5px; }
    
    .boxes {padding:40px 20px 80px 20px;}
    .boxes h3 {padding-bottom:40px;}
    .plan h3 {padding-top:40px;}
    .plan .box {flex: 1 1 48%;}
}

@media (max-width: 500px) {
    .box {flex:1 1 98%;}
    
    .plan .box {flex: 1 1 98%;}
}