@charset "UTF-8";

.page-content { }
.page-content > div:not(.sec1) { margin-top:100px; }
.page-content > div:not(.sec1) .header { margin-bottom:70px; }
.page-content > div:not(.sec1) .header .head { font-size:3rem; font-weight:600; color:var(--main-color3); margin-bottom:10px; }


.sec1 .header { margin-bottom:50px; }
.sec1 .header .subhead { color:var(--main-color3); font-weight:600; font-size:1.25rem; }
.sec1 .header .head { color:#aaa; font-size:3rem; margin-top:15px; line-height:1.2; }
.sec1 .header .head b { color:var(--main-color3); }
.sec1 .header .desc { margin-top:20px; font-size:1.25rem; }

.sec1 .content { position:relative; left:50%; transform:translateX(-50%); width:100vw; display:flex; flex-wrap:wrap; align-items:center; }
.sec1 .content > div { width:50%; }
.sec1 .content .image { height:100vh; }
.sec1 .content .desc { padding:50px 100px; }
.sec1 .content .desc span { display:block; color:var(--main-color3); font-weight:600; font-size:1.25rem; }
.sec1 .content .desc .tit { margin-top:15px; font-size:3.5rem; line-height:1.2; }


.sec2 { text-align:center; }

.sec2 .a .icon { width:80px; height:80px; border-radius:100%; background:no-repeat center/40px; margin:0 auto; }
.sec2 .a .head { font-size:1.25rem; padding:15px 10px; border-bottom:1px solid #ddd; }
.sec2 .a .desc { color:#aaa; margin:15px 0; padding:0 10px; }
.sec2 .a .image { padding-bottom:66%; background:#eee no-repeat center/cover; }


.sec3 .header { text-align:center; }

.sec3 .value { position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; align-content: space-between; height:calc(var(--circle-size) + 50px); --circle-size:400px; }
.sec3 .value:before,
.sec3 .value:after { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:-1; }
.sec3 .value:before { width:var(--circle-size); height:var(--circle-size); border-radius:100%; border:80px solid #f3f3f3; }
.sec3 .value:after { width:calc(var(--circle-size)/2); height:calc(var(--circle-size)/2);}

.sec3 .value .box { width:calc(50% - 60px); display:flex; align-items:center; --mini-circle:150px; --circle-gap:25px; }
.sec3 .value .box:nth-child(odd) { flex-direction:row-reverse; text-align:right; }

.sec3 .value .head { width:var(--mini-circle); height:var(--mini-circle); border-radius:100%; padding:20px; background:var(--main-color1); color:#fff; display:flex; justify-content:center; align-items:center; flex-direction:column; line-height:1.3; margin:0 var(--circle-gap); }
.sec3 .value .head b { font-size:1.125rem; }
.sec3 .value .head span { opacity:.5; }

.sec3 .value ul { width:calc(100% - var(--mini-circle) - var(--circle-gap)*2); color:#333; }
.sec3 .value ul li { display:inline-block; margin:5px 0; line-height:1.4; }
.sec3 .value ul li:before { content:""; display:inline-block; margin-right:10px; vertical-align:middle; margin-top:-3px; width:4px; height:4px; border-radius:5px; background:#ddd; }


@media (max-width: 1600px) {
    .sec1 .header .head { font-size:2.5rem; }
    .sec1 .content .desc { padding:50px 70px; }
    .sec1 .content .desc .tit { font-size:3rem; }
}

@media (max-width: 1200px) {
    .sec1 .content .image { height:500px; }
    .sec1 .content .desc { padding:50px; }
    .sec1 .content .desc .tit { font-size:2.5rem; }
}

@media (max-width: 1024px) {
    .page-content > div:not(.sec1) { margin-top:70px; }
    .page-content > div:not(.sec1) .header .head { font-size:2rem; }

    .sec1 .header .head { font-size:1.8rem; margin-top:10px; }
    .sec1 .header .desc { margin-top:15px; font-size:1rem; }

    .sec1 .content .image { height:350px; }
    .sec1 .content .desc { padding:30px; }
    .sec1 .content .desc .tit { font-size:2rem; }


    .sec3 .value { flex-wrap:nowrap; flex-direction:column; height:auto; --circle-size:300px; }
    .sec3 .value:before { border-color:#f8f8f8; }
    .sec3 .value:after { background:none; display:none;}

    .sec3 .value .box { width:calc(50% + var(--mini-circle)/2 + var(--circle-gap)); --mini-circle:120px; --circle-gap:20px; }
    .sec3 .value .box:nth-child(odd) { margin-right:calc(50% - var(--mini-circle)/2 - var(--circle-gap)); }
    .sec3 .value .box:nth-child(even) { margin-left:calc(50% - var(--mini-circle)/2 - var(--circle-gap)); }

    .sec3 .value .head b { font-size:1rem; }
    .sec3 .value .head span { font-size:.875rem; }
}


@media (max-width: 767px) {
    .page-content > div:not(.sec1) { margin-top:50px; }
    .page-content > div:not(.sec1) .header { margin-bottom:40px; }

    .sec1 .header { margin-bottom:25px; }
    .sec1 .header .head { font-size:1.625rem; }

    .sec1 .content { width:100%; flex-direction:column-reverse; }
    .sec1 .content > div { width:100%; }
    .sec1 .content .image { height:auto; padding-bottom:60%; }
    .sec1 .content .desc { padding:20px 0; }
    .sec1 .content .desc .tit { font-size:1.8rem; margin-top:10px; }


    .sec2 .tiles .tile > .a { margin-bottom:30px !important; }

    .sec2 .a .head { padding:10px 0; }
    .sec2 .a .desc { margin:10px 0; height:auto; }

    .sec3 { text-align:center; }
    .sec3 .value { width:auto; display:inline-block; --circle-size:250px; }
    .sec3 .value:before { display:none; }

    .sec3 .value .box { width:auto; text-align:left !important; --mini-circle:100px; --circle-gap:10px; }
    .sec3 .value .box:nth-child(odd) { margin-right:0; flex-direction:row; }
    .sec3 .value .box:nth-child(even) { margin-left:0; }

    .sec3 .value .head { margin:0 10px 0 0; }
    .sec3 .value .head b { font-size:1rem; }
    .sec3 .value .head span { font-size:.75rem; }

    .sec3 .value ul { width:calc(100% - var(--mini-circle) - 10px); }
    .sec3 .value ul li { margin:3px 0; display:block; }
    .sec3 .value ul li:before { margin-right:5px; }
}
.content-body{padding-top:0px !important;}

@media (max-width: 540px) {
    .sec3 .value .box{
        flex-direction:column !important;
        margin-bottom: 30px;
    }
    .sec3 .value .box { width:auto; text-align:left !important; --mini-circle:100px; --circle-gap:10px; }
    .sec3 .value .head {
        width:100%;
        height:auto !important;
        border-radius:8px;
        padding: 5px 15px;
    }
    .sec3 .value ul{
        width:100%;
        float:none !imporatnt;
    }
}