@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.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: #F4EDD1;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: 24px;}
section.layout01 .image {max-width: 700px;border-radius: 24px;overflow: hidden;}
section.layout01 .desc {font-size: 18px;font-weight: 500;line-height: 168%;}

@media(min-width:735px) {
    section.layout01 .box-content {display: flex;flex-direction: row-reverse;justify-content: space-between;gap:30px;align-items: flex-start;}
    section.layout01 h3 {position: relative;max-width: 591px;}
    section.layout01 .desc {max-width: 512px;}
}

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

section.layout02 {background: #FBE5E9;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: #FBE5E9;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:nth-child(1) .item:last-child {display: none;}
section.layout04 .wrap-item:nth-child(2) {justify-content: flex-end;margin-top: 40px;}
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:1067px) {
    section.layout04 .wrap-item {gap:12px 10px;flex-wrap: wrap;justify-content: center;}
    section.layout04 .wrap-item .item {width:calc(50% - 5px);}
    section.layout04 .wrap-item:nth-child(1) .item:last-child {display: block;}
    section.layout04 .wrap-item:nth-child(2) .item:first-child {display: none;}
}

@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;}
}