@charset "utf-8";

:root {
    --primary: #74BC1F;
}
.title_box {margin-bottom:60px}
.title_box .tit {text-transform:capitalize;}
.title_box p {color:#565656}

.sec_hero .txt_wrap .logo {max-width:590px}
.sec_hero .txt_wrap .tit .color {color:var(--primary)}
.sec_hero .view_more .round {background:var(--primary)}

.sec_info {background:#31915D}

.sec_03 .list {display:flex;gap:6px}
.sec_03 .list .item {width:100%;position:relative}
.sec_03 .list .item .img_wrap img {width:100%;height:100%;object-fit:cover;}
.sec_03 .list .item .txt_wrap {width:100%;padding:52px 46px;position:absolute;bottom:0;left:0;color:#ffffff}
.sec_03 .list .item .txt_wrap span {display:block;font-size:32px;font-weight:700}

.sec_04 {padding:var(--sec-padding) 0}
.sec_04 .over_view {margin-top:120px}
.desktop_view .cont img {animation:desktopView 20s linear infinite}
.over_view {margin-top:var(--sec-padding)}
.over_view .swiper + .swiper {margin-top:60px}

.sec_system .title_box .wrapper {max-width:980px}
.sec_system .list {display:flex;align-items:center;justify-content:center;gap:40px}
.sec_system .list .item {display:flex;align-items:center;justify-content:center;flex-direction:column;width:440px;height:440px;background:#74BC1F;border-radius:400px;color:#ffffff}
.sec_system .list .item strong {font-size:40px;font-weight:700;text-transform:capitalize;}
.sec_system .list .item span {font-size:24px;margin-top:10px}
.sec_system .list .item:nth-child(2) {background:rgba(224,224,224,.4);color:var(--primary)}
.sec_system .list .item:nth-child(3) {background:rgba(116,188,31,.3);color:var(--primary)}

.sec_system .color {display:flex;margin-top:var(--sec-padding)}
.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 .right {width:55%;display:flex;flex-direction:column;}
.sec_system .color .right > div {flex:1;color:var(--white);display:flex;align-items:flex-end;padding:70px;font-size:20px}
.sec_system .color .right .info > div + div {margin-top:10px}
.sec_system .color .right .info > div {display:flex;align-items:center;color:rgba(255,255,255,.8)}
.sec_system .color .right .info > div span {display:flex;align-items:center;font-weight:700;color:rgba(255,255,255,1)}
.sec_system .color .right .info > div span::after {content:'';display:block;width:1px;height:16px;background:#ffffff;margin:0 16px}
.sec_system .color .item_01 {background:#018C3B}
.sec_system .color .item_02 {background:#FF8C27}

.sec_06 {padding:var(--sec-padding) 0;background:#F3F3F3 url('img/sec_06_bg.svg') no-repeat right bottom/40%}
.sec_06 .list {display:flex;align-items:flex-start;gap:0 35px;}
.sec_06 .list > div {flex:1}
.sec_06 .list img {display:block;width:100%;box-shadow:0 4px 20px rgba(0,0,0,.15)}
.sec_06 .list img + img {margin-top:35px}

.sec_08 {padding:var(--sec-padding) 0;}
.sec_08 .wrapper {max-width:1430px}
.sec_08 .list {display:flex;align-items:flex-start;justify-content:space-between;}
.sec_08 .list > div {width:100%;max-width:375px;}
.sec_08 .list > div:not(:nth-child(2)) {margin-top:-140px}
.sec_08 .list > div img {display:block;width:100%;box-shadow:0 4px 20px rgba(0,0,0,.15);border-radius:20px}
.sec_08 .list > div img + img {margin-top:60px}

.sec_09 {background:url('img/sec_09_01.png') no-repeat center/cover;height:800px;padding-top:220px}
.sec_09 .title_box .sub {font-size:30px;color:#222}
.sec_09 .title_box .tit .green {background:#018C3B;color:#ffffff;padding:2px 14px}



@media (hover: hover) {}

@media all and (max-width: 1499px) {
    .sec_system .list .item {width:350px;height:350px}

    .sec_system .color .tit {height:800px}
}
@media all and (max-width: 1299px) {
    .sec_08 .list > div {max-width:360px}
}
@media all and (max-width: 1199px) {
    .title_box {margin-bottom:42px}

    .sec_04 .over_view {margin-top:80px}

    .sec_03 .list .item .txt_wrap {padding:30px}
    .sec_03 .list .item .txt_wrap span {font-size:24px}
    .over_view .swiper + .swiper {margin-top:40px}

    .sec_system .list {gap:30px}
    .sec_system .list .item {width:280px;height:280px}
    .sec_system .list .item strong {font-size:30px}
    .sec_system .list .item span {font-size:18px}
    
    .sec_system .color .tit {height:500px}
    .sec_system .color .tit span {font-size:40px}
    .sec_system .color .right > div {padding:50px;font-size:17px}

    .sec_08 .list {gap:0 20px}
    .sec_08 .list > div:not(:nth-child(2)) {margin-top:0}
    .sec_08 .list > div {max-width:initial;width:100%}

    .sec_09 {height:700px;padding-top:180px}
    .sec_09 .title_box .sub {font-size:27px}
    /*
    */
}

@media all and (max-width: 1023px) {
    .sec_system .list .item {width:220px;height:220px}
    .sec_system .list .item strong {font-size:22px}
    .sec_system .list .item span {font-size:15px}
}

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

    .sec_hero .txt_wrap .logo {max-width:246px}
    .sec_04 .over_view {margin-top:48px}

    .sec_03 .list {flex-direction:column;}
    .sec_03 .list .item .txt_wrap {height:100%;display:flex;align-items:center;padding:20px}
    .sec_03 .list .item .txt_wrap span {font-size:18px}
    .over_view .swiper + .swiper {margin-top:20px}
    
    .sec_system .list {flex-direction:column;gap:20px}
    .sec_system .list .item {width:245px;height:245px}
    .sec_system .list .item strong {font-size:18px}
    .sec_system .list .item span {font-size:13px}
    
    .sec_system .color {flex-direction:column}
    .sec_system .color > div {width:100% !important;}
    .sec_system .color .tit {display:flex;align-items:flex-end;height:136px;text-align:left;padding:20px;background-size:170px}
    .sec_system .color .tit span {font-size:24px}
    .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_06 .list {gap:0 10px}
    .sec_06 .list img + img {margin-top:15px}
    
    .sec_08 .title_box {text-align:left}
    .sec_08 .list > div img {border-radius:10px}
    .sec_08 .list > div img + img {margin-top:15px}
    
    .sec_09 {height:620px;background-image:url('img/sec_09_01_mb.png');padding-top:80px}
    .sec_09 .title_box {text-align:center}
    .sec_09 .title_box .sub {font-size:24px}
    .sec_09 .title_box .tit {font-size:35px}
}