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

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

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

/* section01 */
.section01 {padding:24px;margin:56px 0;}

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

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

@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;}
    .section01 .layout01 .box-img {max-width: 200px;}

    .layout01 .wrap-flex {gap:16px;}
    .layout01 .box-text {padding:0 10px 0 28px;}
}

@media (max-width:734px) {
    .layout01 p {font-size: 15px;}
}

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

@media(min-width:1101px) {
    .layout04 .spacing-item {width:800px}
}

@media (max-width:1100px) {
    .layout04 .inner {display: grid;}
}

/* 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}
.section03 .section-item.layout04 {margin-top:0;}
.section03 .section-item .title {font-size: 20px;color:#373737;font-weight: 600;line-height: 140%;margin-bottom: 16px;}

.section03 .wrap-flex {gap: 64px;align-items: center;}
.section03 .wrap-flex .list li {font-size: 24px;font-family: 'Noto Serif KR', serif;line-height: 168%;font-weight: 700;color:#373737}

@media (max-width:1100px) {
    .section03 {margin:24px 0;padding:10px 10px 40px;}
    .section03 .section-inner {justify-content: center;}
    .section03 .wrap-flex {gap: 12px;}
    .section03 .wrap-flex .list li {padding:0 14px;}
    .section03 .layout04 .box-text {padding:0 14px;}
}

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

@media (max-width:734px) {
    .section03 .section-item {margin:12px 0}
    .section03 .section-item .title {font-size: 18px;margin-bottom: 12px;}
    .section03 .wrap-flex .list li {font-size: 18px;}
}

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

/* slide */