@charset "utf-8";

/* ---------- #sec-01 ---------- */
#sec-01 .con { display: flex; justify-content: space-between; align-items: flex-end; }
#sec-01 .con .txt { font-size: 16px; color: var(--gray-61); }
#sec-01 .con .txt > span { margin-bottom: 30px; font-size: 30px; color: var(--gray-33); font-weight: 700; display: block; }
#sec-01 .con .img-wrap { margin-left: 80px; width: 500px; height: 405px; padding-right: 20px; flex-shrink: 0; position: relative; z-index: 1; }
#sec-01 .con .img-wrap:before { position: absolute; width: 420px; height: 350px; bottom: -20px; right: 0; background: var(--sub-01); display: block; content: ""; z-index: -1; opacity: 0.5; }
#sec-01 .con .img-wrap img { border-top-right-radius: 54px; overflow: hidden; }

/*** responsive ***/
/* 1200px or less */
@media all and (max-width : 1200px){
    #sec-01 .con { display: block; }
    #sec-01 .con .txt { font-size: 15px; }
    #sec-01 .con .txt > span { margin-bottom: 10px; font-size: 26px; }
    #sec-01 .con .img-wrap { margin: 30px 0 0 0; width: 600px; height: 405px; padding-right: 15px; }
    #sec-01 .con .img-wrap:before { bottom: -15px; }
}

/* 767px or less */
@media all and (max-width : 767px){
    #sec-01 .con .txt { font-size: 14px; }
    #sec-01 .con .txt > span { margin-bottom: 10px; font-size: 20px; }
    #sec-01 .con .img-wrap { margin: 30px 0 0 0; width: 100%; height: auto; max-width: 600px; }
    #sec-01 .con .img-wrap:before { width: 80%; height: 70%; }
}

/* 575px or less */
@media all and (max-width : 575px){
    
}



/* ---------- #sec-02 ---------- */
#sec-02 { background: #F8F8FA; }
#sec-02 ul { display: flex; justify-content: space-between; align-items: stretch; box-shadow: 0 0 10px 1px rgba(0,0,0,0.1);  border-bottom-left-radius: 40px; border-top-right-radius: 40px; overflow: hidden; }
#sec-02 ul li { width: 33.333%; background: #fff; border-right: 1px solid var(--border-01); }
#sec-02 .title { padding: 30px 40px; font-size: 16px; font-weight: 700; color: var(--gray-11); border-bottom: 1px solid var(--border-01); box-sizing: border-box; }
#sec-02 .title > span { margin-right: 14px; width: 30px; line-height: 30px; font-size: 12px; font-weight: 700; color: #fff; text-align: center; display: inline-block; border-radius: 50%; }
#sec-02 .text { padding: 30px 30px 40px 48px; box-sizing: border-box; font-size: 16px; color: var(--gray-61); line-height: 26px; }
#sec-02 .text > span { margin-bottom: 15px; font-weight: 500; color: var(--gray-33); display: block; }
#sec-02 ul li:nth-child(3) { border-right: 0; }
#sec-02 ul li:nth-child(1) .title > span { background: var(--sub-02); }
#sec-02 ul li:nth-child(2) .title > span { background: var(--sub-01); }
#sec-02 ul li:nth-child(3) .title > span { background: var(--mc); }

/*** responsive ***/
/* 1200px or less */
@media all and (max-width : 1200px){
    #sec-02 ul { border-bottom-left-radius: 28px; border-top-right-radius: 28px; }
    #sec-02 .title { padding: 25px 20px; font-size: 15px; }
    #sec-02 .title > span { margin-right: 10px; width: 26px; line-height: 26px; font-size: 12px; }
    #sec-02 .text { padding: 20px 20px 30px 28px; font-size: 14px; line-height: 22px; }
    #sec-02 .text > span { margin-bottom: 10px; }
}

/* 991px or less */
@media all and (max-width : 991px){
    #sec-02 ul { display: block; border-bottom-left-radius: 0; border-top-right-radius: 0; box-shadow: none; overflow: inherit; }
    #sec-02 ul li { margin-bottom: 20px; width: 100%; border: 0; box-shadow: 0 0 10px 1px rgba(0,0,0,0.1); }
    #sec-02 .title { padding: 25px 20px; font-size: 15px; }
    #sec-02 .title > span { margin-right: 10px; width: 26px; line-height: 26px; font-size: 12px; }
    #sec-02 .text { padding: 20px 20px 30px 28px; font-size: 14px; line-height: 22px; }
    #sec-02 .text > span { margin-bottom: 10px; }

    #sec-02 ul li:nth-child(1) { border-top-right-radius: 20px; }
    #sec-02 ul li:nth-child(3) { border-bottom-left-radius: 20px; margin-bottom: 0; }
}

/* 767px or less */
@media all and (max-width : 767px){
    #sec-02 .title { padding: 15px; font-size: 14px; line-height: 22px; }
    #sec-02 .title > span { margin-right: 7px; width: 22px; line-height: 22px; font-size: 10px; }
    #sec-02 .text { padding: 20px 20px 30px 20px; font-size: 13px; line-height: 20px; }
}

/* 575px or less */
@media all and (max-width : 575px){
    
}



/* ---------- #sec-03 ---------- */
#sec-03 ul.box { margin-top: 20px; display: flex; justify-content: space-between; align-items: stretch; }
#sec-03 ul.box li { width: 50%; background: #fff; border: 1px solid var(--border-01); }
#sec-03 ul.box .title { padding: 30px 40px; font-size: 16px; font-weight: 700; color: var(--gray-11); border-bottom: 1px solid var(--border-01); box-sizing: border-box; }
#sec-03 ul.box .title > span { margin-right: 14px; width: 30px; line-height: 30px; font-size: 12px; font-weight: 700; color: #fff; text-align: center; display: inline-block; border-radius: 50%; }
#sec-03 ul.box .text { padding: 30px 30px 40px 48px; box-sizing: border-box; font-size: 16px; color: var(--gray-61); line-height: 26px; }
#sec-03 ul.box li:nth-child(2) { border-left: 0; }
#sec-03 ul.box li:nth-child(1) .title > span { background: var(--sub-02); }
#sec-03 ul.box li:nth-child(2) .title > span { background: var(--sub-01); }

#sec-03 .process { padding: 40px 0; border: 1px solid var(--border-01); border-bottom: 0; }
#sec-03 .process ul { display: flex; justify-content: center; align-items: center; }
#sec-03 .process li { position: relative; padding: 0 50px 0 120px; }
#sec-03 .process li::after { position: absolute; top: 0; right: 0; width: 24px; height: 100%; background: url(/theme/gospelch_2024/images/ico/process_arr.svg) no-repeat center/contain; display: block; content: ""; }
#sec-03 .process li:last-child::after { display: none; }
#sec-03 .process .num { 
    position: absolute; top: 0; left: 50px; width: 50px; line-height: 42px; font-size: 16px; font-weight: 700; color: var(--sub-01);
    text-align: center; border: 4px solid var(--sub-01); border-radius: 50%; 
}
#sec-03 .process li:first-child .num { color: var(--gray-9e); border: 4px solid var(--gray-9e); }
#sec-03 .process li:last-child .num { color: var(--mc); border: 4px solid var(--mc); }
#sec-03 .process .step { color: var(--gray-9e); }
#sec-03 .process .text { font-size: 17px; font-weight: 700; color: var(--gray-11); }

#sec-03 .pro-table { background: var(--gray-fa); border: 1px solid var(--border-01); display: flex; justify-content: space-between; align-items: stretch; }
#sec-03 .pro-table .line { border-right: 1px solid var(--border-01); }
#sec-03 .pro-table .left { width: 60%; }
#sec-03 .pro-table .left .top { height: 86px; border-bottom: 1px solid var(--border-01); display: flex; justify-content: space-between; align-items: stretch; }
#sec-03 .pro-table .left .top > div { width: 33.333%; }
#sec-03 .pro-table .left .bottom { height: 86px; }
#sec-03 .pro-table .right { width: 20%; }
#sec-03 .pro-table p { text-align: center; color: var(--gray-11); }

/*** responsive ***/
/* 1200px or less */
@media all and (max-width : 1200px){
    #sec-03 ul.box .title { padding: 25px 20px; font-size: 15px; }
    #sec-03 ul.box .title > span { margin-right: 10px; width: 26px; line-height: 26px; font-size: 12px; }
    #sec-03 ul.box .text { padding: 20px 20px 30px 28px; font-size: 14px; line-height: 22px; }

    #sec-03 .process-wrap { overflow: auto; }
    #sec-03 .process { padding: 30px 0; min-width: 960px; }
    #sec-03 .process li { padding: 0 45px 0 90px; }
    #sec-03 .process li::after { width: 20px; }
    #sec-03 .process .num { left: 40px; width: 40px; line-height: 34px; font-size: 14px; border: 3px solid var(--sub-01); }
    #sec-03 .process li:first-child .num { border: 3px solid var(--gray-9e); }
    #sec-03 .process li:last-child .num { border: 3px solid var(--mc); }
    #sec-03 .process .step { font-size: 13px; }
    #sec-03 .process .text { font-size: 14px; }

    #sec-03 .pro-table { min-width: 960px; }
    #sec-03 .pro-table .left .top { height: 76px; }
    #sec-03 .pro-table .left .bottom { height: 76px; }
}

/* 991px or less */
@media all and (max-width : 991px){
    #sec-03 ul.box .title { padding: 25px 20px; font-size: 15px; }
    #sec-03 ul.box .title > span { margin-right: 10px; width: 26px; line-height: 26px; font-size: 12px; }
    #sec-03 ul.box .text { padding: 20px 20px 30px 28px; font-size: 14px; line-height: 22px; }
}

/* 767px or less */
@media all and (max-width : 767px){
    #sec-03 ul.box { display: block; }
    #sec-03 ul.box li { margin-bottom: 20px; width: 100%; }
    #sec-03 ul.box .title { display: block;  padding: 15px; font-size: 14px; line-height: 22px; }
    #sec-03 ul.box .title > span { margin-right: 7px; width: 22px; line-height: 22px; font-size: 10px; }
    #sec-03 ul.box .text { padding: 20px 20px 30px 20px; font-size: 13px; line-height: 20px; }
    #sec-03 ul.box li:nth-child(2) { border-left: 1px solid var(--border-01); margin-bottom: 0; }
}

/* 575px or less */
@media all and (max-width : 575px){
    
}