@charset "utf-8";

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

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

.sec_info {background:var(--primary)}

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

.sec_04 {background:url('img/sec_04_bg.jpg') no-repeat center/cover;padding:var(--sec-padding) 0}
.sec_04 .list {display:flex;gap:40px}
.sec_04 .list .item {width:100%;background:#006D4D;color:#ffffff;text-align:center;padding:80px 40px}
.sec_04 .list .item img {width:100px}
.sec_04 .list .item .tit {display:block;font-size:24px;font-weight:700;margin-top:24px}
.sec_04 .list .item p {font-size:18px;font-weight:500;line-height:1.5;margin-top:20px}

.marquee {background:#000000;padding:50px 0;display:flex;align-items:center;justify-content:center;gap:0 50px}
.marquee div {display:flex;align-items:center;gap:0 50px;;animation:sliding 10s linear infinite both}
.marquee div span {display:block;width:325px}
.marquee div span img {width:100%}
@keyframes sliding {
    from {transform:translateX(0)}
    to {transform:translateX(-100%)}
}

.sec_05 {background:url('img/sec_05_bg.jpg') no-repeat center/cover}
.sec_05 .right {padding:var(--sec-padding) 20px;margin-left:60%;color:#ffffff}
.sec_05 .title_box p {color:rgba(255,255,255,.6)}
.sec_05 .list > div {display:flex;align-items:center;width:100%;max-width:470px;height:150px;padding:0 40px;font-size:24px;color:#ffffff;background:#005F2E}
.sec_05 .list > div + div {margin-top:20px}
.sec_05 .list .item_02 {background:#006D4D}
.sec_05 .list .item_03 {background:#00E09E;color:#000000}

.sec_06 {background:#000000}

.sec_07 {background:#000000 url('img/sec_07_bg.png') no-repeat center bottom/100%;color:#ffffff}
.sec_07 .title_box p {color:rgba(255,255,255,.6)}
.sec_07 .list > div {overflow:hidden}
.sec_07 .list > div img {transform:scale(1.004);}

.sec_08 {position:relative}
.sec_08 .title_box {width:100%;position:absolute;top:36%;left:0;transform:translateY(-50%);z-index:3;color:#ffffff}
.sec_08 .title_box .tit {margin-top:-100px}
.sec_08 .title_box img {width:255px}
.sec_08 .title_box p {color:rgba(255,255,255,.6)}
.sec_08 .banner_img {background:#003E2C}

.sec_09 {position:relative}
.sec_09 .img_wrap {width:50%;max-width:680px;padding:20px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}

@media (hover: hover) {}

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

    .sec_hero .txt_wrap .logo {max-width:330px}
    .sec_03 .over_view {margin-top:80px}
    .sec_04 .list {gap:20px}
    .sec_04 .list .item {padding:40px 30px}
    .sec_04 .list .item img {width:80px}
    .sec_04 .list .item .tit {font-size:20px;margin-bottom:16px}
    .sec_04 .list .item p {font-size:16px}

    .sec_05 .right {margin-left:50%}
    .sec_05 .list > div {height:100px;font-size:20px}
}

@media all and (max-width: 1023px) {
    .sec_04 .list {flex-direction:column;max-width:400px;margin:0 auto;}
    .sec_08 .title_box {position:initial;transform:none;color:#000000;padding:80px 0 24px;margin:0}
    .sec_08 .title_box img {width:112px;position:absolute;bottom:0;left:0}
    .sec_08 .title_box .tit {margin:0}
    .sec_08 .title_box p {color:#565656}
}

@media all and (max-width: 767px) {
    .title_box {margin-bottom:24px}
    
    .sec_hero .txt_wrap .logo {max-width:215px}
    .sec_03 .over_view {margin-top:48px}
    .sec_04 .list .item .tit {font-size:18px;margin-bottom:10px}
    .sec_04 .list .item p {font-size:14px}

    .sec_05 {background:#000000}
    .sec_05 .right {margin-left:0}
    .sec_05 .list > div {font-size:14px}
    .sec_05 .list > div {max-width:100%;padding:0 30px}
    
    .sec_06 .banner_img {overflow:hidden}
    .sec_06 .banner_img img {width:120%;margin-left:-10%;max-width:initial}

    .sec_09 .img_wrap {width:80%}
    
    .marquee {padding:28px 0;gap:0 30px}
    .marquee div {gap:0 30px}
    .marquee div span {width:190px}
}