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

section.top-banner {background-image: url('../images/play-kamco-banner.png');}
@media (max-width:734px) {
    section.top-banner {background-image: url('../images/play-kamco-banner-s.png');}
}

section.more-content {background-image: url('../images/kiumi-and-banner-L@2x.png');}
@media (max-width:734px) {
    section.more-content {background-image: url('../images/kiumi-and-banner-s@2x.png');}
}

section.video {margin: 80px 0;}
section.video .box-video {max-width: 1400px;border-radius: 24px;overflow: hidden;margin:0 auto;}
section.video video {width: 100%;display: block;}

@media (max-width:734px) {
    section.video .box-video {border-radius: 8px;}
    section.video {margin: 32px 0 24px}
}

section.layout01 {background: #E9F4D1;border-radius: 32px;margin:56px 0;padding:56px 50px;}
section.layout01 .inner {max-width: 1408px;margin: 0 auto;}
section.layout01 h3 {font-size: 40px;color:#1f1c1d;font-weight: 600;line-height: 130%;}
section.layout01 h3 span.serif {font-size: 28px;font-weight: 700;color:#373737;letter-spacing: -0.48px;line-height: 150%;
    vertical-align: text-top;display: inline-block;}
section.layout01 .box-content {margin-top: 50px;}
section.layout01 h3 + .box-content {margin-top: 0;}
section.layout01 .image {max-width: 520px;border-radius: 24px;overflow: hidden;}
section.layout01 .desc h4 {font-size: 20px;}
section.layout01 .desc p {font-size: 18px;font-weight: 500;line-height: 168%;}

@media(min-width:1100px) {
    section.layout01 .box-content {display: flex;gap:40px;align-items: flex-end;}
    section.layout01 h3 {position: relative;max-width: 591px;margin-bottom: 35px;}
    section.layout01 .desc {max-width: 512px;padding-bottom: 15px;}
}

@media(min-width:735px) {
    section.layout01 .image {margin-bottom: 20px;}
}

@media (max-width:734px) {
    section.layout01 {border-radius: 16px;margin:24px 0;padding:16px 10px 30px;}
    section.layout01 h3 {font-size: 20px;margin-bottom:16px;}
    section.layout01 h3 span.serif {font-size: 16px;line-height: 130%;margin-bottom: 4px;display: block;}
    section.layout01 .desc h4 {font-size: 17px;}
    section.layout01 .box-content {margin-top: 16px;}
    section.layout01 .image {border-radius: 12px;}
    section.layout01 .desc {margin-top:12px;}
    section.layout01 .desc p {font-size: 16px;line-height:160%;}
    section.layout01 .desc h4 + p {margin-top:5px;}
}

section.layout02 {background: #E5F0FB;border-radius: 32px;margin:56px 0;padding:48px 50px;}
section.layout02 .inner {max-width: 1145px;margin:0 auto;}
section.layout02 .box-img {border-radius: 24px;overflow: hidden;margin-bottom: 16px;}
section.layout02 .box-text .title {font-size: 20px;color:#1f1c1d;font-weight: 600;}
section.layout02 .box-text .desc {max-width: 640px;font-size: 16px;font-weight: 500;line-height: 168%;color:#373737;margin-top: 4px;}

@media(min-width:735px) {
    section.layout02 .box-img {max-width: 565px;}
    section.layout02 .box-text {display: flex;justify-content: flex-end;}
}

@media (max-width:734px) {
    section.layout02 {border-radius: 16px;margin:24px 0;padding:10px 10px 40px;}
    section.layout02 .box-img {margin-bottom: 12px;border-radius: 12px;}
    section.layout02 .box-text {padding:0 24px;}
    section.layout02 .box-text .desc {margin-top:2px;}
}

section.layout03 h3 {font-size: 40px;font-weight: 600;line-height: 130%;color:#1f1c1d}
section.layout03 .list {margin:calc(var(--spacing) * -1) 0;--spacing:8px;}
section.layout03 .list li {background: #E5F0FB;border-radius: 24px;padding:32px 48px;font-family: 'Noto Serif KR', serif;
    font-weight: 700;font-size: 18px;color:#373737;display: flex;align-items: center;gap:10px;margin:var(--spacing) 0;}
section.layout03 .list li span {width:32px;display: inline-flex;}
section.layout03 .list li span img {width: 100%;}
section.layout03 .box-content .sub {font-size: 20px;color:#989898;font-weight: 600;margin-top: 24px;}

@media(min-width:1068px) {
    section.layout03 .box-content .inner {margin-right:160px;}
    section.layout03 .box-content {display: flex;justify-content: flex-end;}
}

@media (max-width:734px) {
    section.layout03 h3 {font-size: 20px;}
    section.layout03 .list {--spacing:6px;margin-top:12px;}
    section.layout03 .list li {padding:24px 16px;font-size: 16px;line-height: 148%;gap:12px;}
    section.layout03 .list li span {width:20px;}
    section.layout03 .box-content .sub {font-size: 18px;line-height: 140%;margin-top: 12px;}
}

section.layout04 {margin:56px 0;}
section.layout04 .wrap-item {display: flex;max-width: 1456px;margin:0 auto;gap:22px;}
section.layout04 .wrap-item .item {width:32%;}
section.layout04 .wrap-item:nth-child(2) {justify-content: flex-end;margin-top: 40px;}
section.layout04 .wrap-item:nth-child(2) .item:first-child {display: none;}
section.layout04 .item .image {border-radius: 24px;overflow: hidden;}
section.layout04 .item .text {margin-top: 16px;}
section.layout04 .item .text .name {font-family: 'Noto Serif KR', serif;font-size: 18px;color:#1f1c1d;font-weight: 700;}
section.layout04 .item .text .info {font-size: 16px;font-weight: 500;line-height: 168%;margin-top: 4px;}

@media(min-width:1068px) {
    section.layout04 .wrap-item .item {max-width: 274px;}
}

@media (max-width:734px) {
    section.layout04 .wrap-item {gap:12px 10px;flex-wrap: wrap;justify-content: center;max-width:550px}
    section.layout04 .wrap-item .item {width:calc(50% - 5px);}
    section.layout04 .wrap-item:nth-child(1) .item:last-child {display: none;}
    section.layout04 .wrap-item:nth-child(2) {justify-content: flex-start;margin-top:12px}
    section.layout04 .wrap-item:nth-child(2) .item:first-child {display: block;}
}

@media (max-width:734px) {
    section.layout04 {margin:24px 0}
    section.layout04 .item .text {margin-top: 10px;}
    section.layout04 .item .text .name {font-size: 16px;}
    section.layout04 .item .text .info {font-size: 15px;}
}