@charset "utf-8";

:root {
    --primary: #F59603;
}
.wrapper {max-width:1420px}
.title_box {margin-bottom:60px}
.title_box p {color:#565656}

.sec_hero .txt_wrap .logo {max-width:293px}
.sec_hero .txt_wrap .tit .color {color:#F49700}
.sec_hero .view_more .round {background:#F59603}

.sec_info {background:#F59603}
.sec_info .cont {color:#f3f3f3}

.sec_03 {padding:var(--sec-padding) 0 calc(var(--sec-padding) / 2)}
.sec_03 .over_view {margin-top:120px}

.sec_05 {background:linear-gradient(#FFDA61, #FFAB6A);padding:var(--sec-padding) 0}
.sec_05 .wrapper {max-width:1440px}
.sec_05 .list > div {display:flex;align-items:flex-start;gap:0 24px;}
.sec_05 .list > div > div {box-shadow:0 4px 30px rgba(0,0,0,.25);border-radius:20px;overflow:hidden}
.sec_05 .list > div img {width:calc(100% + 2px);max-width:calc(100% + 2px)}
.sec_05 .list > div + div {margin-top:60px}

.sec_07 {height:100vh;max-height:1080px;background:url('img/sec_07_bg.jpg') no-repeat center/cover;position:relative}
.sec_07 .title_box {padding:var(--sec-padding) 0;}

.sec_08 {display:flex;align-items:center;justify-content:center;flex-direction:column;height:100vh;max-height:1080px;background:url('img/sec_08_bg.jpg') no-repeat center/cover}
.sec_08 img {width:100%;max-width:414px;margin-top:60px}

.sec_09 {background:url('img/sec_09_bg.jpg') no-repeat center/cover;padding:var(--sec-padding) 0;color:#ffffff}
.sec_09 .title_box .tit {color:#F59603}
.sec_09 .title_box p {color:#919191}
.sec_09 .list {display:flex;align-items:flex-start;justify-content:space-between;gap:20px;text-align:center;}
.sec_09 .item {width:100%;max-width:400px}
.sec_09 .item .top img {width:80px}
.sec_09 .item .top .tit {display:block;font-size:34px;font-weight:700;color:#FFD9BA;margin-top:24px}
.sec_09 .item .arrow {margin:20px 0}
.sec_09 .item .txt_wrap {font-size:18px;color:#f3f3f3}
.sec_09 .item .txt_wrap strong {display:block;margin-bottom:10px;font-size:1.1em}

.sec_system {padding:var(--sec-padding) 0 calc(var(--sec-padding)/2)}
.sec_system .color {display:flex;margin-top:30px;border-radius:10px;overflow:hidden}
.sec_system .color .tit {width:45%;background:#D9EED6 url('img/color_bg.svg') no-repeat left bottom/50%;height:1080px;text-align:center;padding-top:var(--sec-padding)}
.sec_system .color .tit span {font-size:54px;font-weight:700;color:#31915D}
.sec_system .color {display:flex}
.sec_system .color > div {flex:1;height:350px;display:flex;align-items:flex-end;padding:70px;font-size:20px}
.sec_system .color .info > div + div {margin-top:10px}
.sec_system .color .info > div {display:flex;align-items:center;color:rgba(255,255,255,.8)}
.sec_system .color .info > div span {display:flex;align-items:center;font-weight:700;color:rgba(255,255,255,1)}
.sec_system .color .info > div span::after {content:'';display:block;width:1px;height:16px;background:#ffffff;margin:0 16px}
.sec_system .color .item_01 {background:#FE7901}
.sec_system .color .item_02 {background:#F59603}
.sec_system .color .item_03 {background:#F9F8F7}
.sec_system .color .item_03 .info > div {color:rgba(86,86,86,.8)}
.sec_system .color .item_03 .info > div span {color:#565656}
.sec_system .color .item_03 .info > div span::after {background:#565656}
.sec_system .font {display:flex;align-items:center;justify-content:space-between;border:solid 1px #D4D4D4;border-radius:10px;padding:80px 60px}
.sec_system .font .right {display:flex;align-items:center;gap:0 16px;}
.sec_system .font .right p {font-size:26px}
.sec_system .font .tit {display:block;font-size:34px;font-weight:600}



@media (hover: hover) {}

@media all and (max-width: 1199px) {
    .title_box {margin-bottom:42px}

    .sec_hero .txt_wrap .logo {max-width:200px}

    .sec_03 .over_view {margin-top:80px}
    .sec_07 {height:600px}
    .sec_08 {height:600px}
    .sec_08 img {max-width:250px;margin-top:30px}

    .sec_system .color > div {height:250px;padding:40px 30px;font-size:17px}
    .sec_system .font {padding:65px 40px}
    .sec_system .font .tit {font-size:26px}
    .sec_system .font .right p {font-size:20px}

    .sec_09 .item .top img {width:70px}
    .sec_09 .item .top .tit {font-size:25px;margin-top:16px}
    .sec_09 .item .arrow {margin:14px 0}
    .sec_09 .item .txt_wrap {font-size:15px;}
}

@media all and (max-width: 1023px) {
    .sec_07 {background-color:#F9F8F7;background-size:100%;background-position:bottom center}
    .sec_09 .list {flex-direction:column;align-items:center;}
    .sec_09 .item .top .tit br {display:none}
}

@media all and (max-width: 767px) {
    .title_box {margin-bottom:24px}
    
    .sec_hero .txt_wrap .logo {max-width:143px}

    .sec_03 .over_view {margin-top:48px}

    .sec_05 .list > div {gap:10px}
    .sec_05 .list > div + div {margin-top:15px}
    .sec_05 .list > div > div {border-radius:5px}

    .sec_07 {height:auto;padding:80px 0 185px}
    .sec_07 .title_box {text-align:left;padding:0}

    .sec_08 {height:auto;padding:88px 0}
    .sec_08 img {max-width:137px;margin-top:10px}
    
    .sec_system .color {flex-direction:column;gap:20px;border-radius:0}
    .sec_system .color > div {width:100% !important;height:150px;padding:40px 20px;font-size:14px;border-radius:10px 0 0 10px}
    .sec_system .font .right {gap:4px 8px;flex-wrap:wrap;justify-content:center;text-align:center}
    .sec_system .color .right > div {padding:40px 20px;font-size:14px}
    .sec_system .color .right .info > div span::after {height:12px;margin:0 10px}
    .sec_system .font {padding:48px 20px;flex-direction:column;gap:16px 0}
    .sec_system .font .tit {font-size:18px}
    .sec_system .font .right p {font-size:14px}
    
    .sec_09 .item .top img {width:60px}
    .sec_09 .item .top .tit {font-size:18px;margin-top:10px}
    .sec_09 .item .arrow {margin:8px 0;width:24px}
    .sec_09 .item .txt_wrap {font-size:13px;}
}