@import url('./page.css');

section.top-banner {background-image: -webkit-image-set(url('../images/together-esg-banner.png') 1x, url('../images/together-esg-banner@2x.png') 2x);
    background-image: image-set(url('../images/together-esg-banner.png') 1x, url('../images/together-esg-banner@2x.png') 2x);}
@media (max-width:734px) {
    section.top-banner {background-image: -webkit-image-set(url('../images/together-esg-banner-s.png') 1x, url('../images/together-esg-banner-s@2x.png') 2x);
        background-image: image-set(url('../images/together-esg-banner-s.png') 1x, url('../images/together-esg-banner-s@2x.png') 2x);}
}

section.more-content {background-image: -webkit-image-set(url('../images/event-banner.png') 1x, url('../images/event-banner@2x.png') 2x);
    background-image: image-set(url('../images/event-banner.png') 1x, url('../images/event-banner@2x.png') 2x);}
@media (max-width:734px) {
    section.more-content {background-image: -webkit-image-set(url('../images/event-banner-s.png') 1x, url('../images/event-banner-s@2x.png') 2x);
        background-image: image-set(url('../images/event-banner-s.png') 1x, url('../images/event-banner-s@2x.png') 2x);}
}

/* section01 */
.section01 {padding:24px;margin:56px 0;}
.section01 .section-item {margin:64px 0;}

.section01 h2 {font-size: 48px;color:#1f1c1d;line-height: 130%;font-weight: 700;max-width: 896px;
    margin:72px auto;padding:0 20px}

.layout01 .wrap-flex {justify-content: space-between;align-items: center;gap:5%;}
.layout01 .box-img {max-width:360px;}
.layout01 .box-text {max-width: 650px;}
.layout01 p {font-size: 18px;}

.layout02 .wrap-flex {justify-content: space-between;align-items: center;gap:5%}
.layout02 .box-img {max-width: 565px;}
.layout02 .box-text {max-width: 720px;}

.layout03 {display: flex;align-items: flex-start;justify-content: flex-start;gap:24px;}
.layout03 .wrap-img {display: flex;align-items: flex-start;gap:12px;}
.layout03 .wrap-img .box-img:nth-child(1) {max-width: 565px;}
.layout03 .wrap-img .box-img:nth-child(2) {max-width: 274px;}
.layout03 .box-text {max-width: 719px;}
.layout03 p {font-size: 16px;color:#373737;font-weight: 500;line-height: 168%;}

@media(min-width:1400px) {
    .layout01 .box-text {margin-right: 140px;}
}

@media(min-width:1101px) {
    .section01 .layout-inner {padding:0 6px}

    .section01 .layout01 .box-img {min-width: 200px;}
    .section01 .layout02 .box-img {min-width: 308px;}
    .section01 .layout03 .wrap-img {margin-top: 162px;}
    .section01 .layout03 .wrap-img .box-img:nth-child(1) {min-width: 308px;}
    .section01 .layout03 .wrap-img .box-img:nth-child(2) {min-width: 200px;margin-top: 168px;}
}

@media (max-width:1100px) {
    .section01 {padding:10px 10px 30px; margin:32px 0 24px;}
    .section01 .section-item {margin:24px 0}
    .section01 h2 {font-size: 36px;line-height: 145%;}
    .section01 h3 {margin-bottom: 12px;}

    .layout01 .wrap-flex {gap:16px;}
    .layout01 .box-text {padding:0 10px 0 28px;}
    .section01 .layout01 .box-img {max-width: 200px;}
    
    .layout02 .wrap-flex {justify-content: center;gap:16px}
    .layout02 .box-text {padding:0 18px 0 10px;}
    .section01 .layout02 .box-img {max-width: 308px;}

    .layout03 {flex-wrap: wrap;gap: 12px;justify-content: center;}
    .layout03 .wrap-img .box-img:nth-child(2) {display: none;}
    .layout03 .inner {display: grid;gap:12px;}
    .layout03 .box-text {padding:0 18px 0 10px;}
    .layout03 .box-img.mo-visible {justify-self: flex-end;}

    .section01 .layout03 .box-img.mo-visible {max-width: 200px;}
}

@media (max-width:734px) {
    .section01 h2 {font-size: 20px;margin:24px auto;padding:0 10px;}
    .layout01 p {font-size: 16px;}
    .section01 .layout03 {justify-content: flex-start;}
}

/* section02 */
.section02 {margin:56px 0;}
.section02 .section-item {margin:24px 0}
/* .section02 .layout04 .box-img {max-width: 320px;} */
.section02 .full-img {max-width: 1144px;margin:40px auto 0;}

.layout04 {display: flex;}
.layout04 .box-text {max-width: 640px;}

@media(min-width:1101px) {
    .section02 .section-item {margin:24px 0}
    .section02 .layout03 .wrap-img .box-img:nth-child(1) {min-width: 320px;}
    .section02 .layout03 .wrap-img .box-img:nth-child(2) {min-width: 236px;margin-top: 168px;}
    .section02 .layout03 .wrap-img .box-img:nth-child(3) {min-width: 161px;margin-top: 76px;}

    .layout04 .spacing-item {width:800px}
}

@media (max-width:1100px) {
    .section02 {margin:24px 0;}
    .section02 h3 {max-width: 640px;margin-left:auto;margin-right:auto;}

    .layout04 .inner {display: grid;}
    .section02 .section-item {justify-content: center;}
    .section02 .layout04 .wrap-img {display: grid;}
    .section02 .layout04 .wrap-img .box-img {max-width: 320px;margin:0;width:50%;}
    .section02 .layout04 .wrap-img .box-img:last-of-type {justify-self: flex-end;}
    .section02 .layout04:last-child {justify-content: center;}
    .section02 .layout04 .box-img {margin:12px 0}
    .section02 .full-img {margin-top: 12px;}
}

@media (max-width:734px) {
    .section02 .section-item {margin:12px 0}
    .section02 .layout03 {justify-content: flex-start;}
    .section02 .layout03 .wrap-img .box-img:nth-child(1) {max-width: 263px;}
    .section02 .layout04 .wrap-img .box-img {margin:6px 0;}
}

/* section03 */
.section03 {margin:56px 0;padding:48px;}
.section03 .section-inner {max-width: 1145px;margin:0 auto;display: flex;flex-wrap: wrap;}
.section03 .section-item {margin:16px 0}

@media (max-width:1100px) {
    .section03 {margin:24px 0;padding:10px 10px 40px;}
    .section03 .section-inner {justify-content: center;}
}

@media(min-width:735px) {
    .section03 .box-img {max-width: 565px;}
}

@media (max-width:734px) {
    .section03 .section-item {margin:12px 0}
    .section03 .layout04 .box-text {padding:0 14px;}
}

/* section04 */
.section04 {margin:56px 0;}
@media (max-width:1100px) {
    .section04 {margin:24px 0;}
}