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

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

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

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

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

.wrap-content section {margin:56px 0;}
.wrap-content section.bg-section {padding:24px;}
.wrap-content section .section-item {margin:64px 0;}
.wrap-content section h3 {margin-bottom: 30px;}

@media (max-width:1100px) {
    .box-img.small {width:50%;max-width: 300px;}
}

@media (max-width:734px) {
    .wrap-content section {margin:32px 0;}
    .wrap-content section.bg-section {padding:10px;}
    .wrap-content section .section-item {margin:24px 0;}
    .wrap-content section h3 {margin-bottom: 12px;}
}

/* section01 */
section.section01 .layout02 .wrap-flex {gap:63px;align-items: flex-start;justify-content: space-between;}
section.section01 .layout02 .box-img {display: flex;align-items: flex-start;gap:17px;justify-content: flex-start;flex:1;}
section.section01 .layout02 .box-img img {border-radius: 24px;overflow: hidden;}
section.section01 .layout02 .box-img img:nth-child(1) {max-width: 565px;}
section.section01 .layout02 .box-img img:nth-child(2) {max-width: 274px;margin-top:219px;flex:1;}
section.section01 .box-video {margin-top:-34px;}

@media(min-width:1701px) {
    section.section01 .layout02 .box-img {margin-right: -60px;}
}

@media(max-width:1700px) {
    section.section01 .layout02 .wrap-flex {gap:3%;}
}

@media(min-width:1231px) {
    section.section01 .layout02 .box-img {margin-top: 54px;margin-bottom: -54px;}
}

@media(max-width:1230px) {
    section.section01 .layout02 .wrap-flex {flex-wrap: wrap;gap:10px;}
    section.section01 .layout02 .box-img {justify-content: flex-end;}
}

@media(max-width:1100px) {
    section.section01 .layout02 .layout-inner {display: flex;flex-direction: column;align-items: flex-start;}
    section.section01 .layout02 .box-img {margin:12px 0;}
    section.section01 .layout02 .box-img img {border-radius: 12px;}
    section.section01 .layout02 .box-img.small {align-self: flex-end;}
}

@media(min-width:1101px) {
    section.section01 .layout02 .box-img {min-width:587px;}
    section.section01 .layout02 .box-img img:nth-child(1) {min-width:400px;}
    section.section01 .layout02 .box-img img:nth-child(2) {min-width: 153px;}
}

@media(max-width:734px) {
    section.section01 .layout01 .box-text {padding-right: 8px;}
    section.section01 .layout02 h3 {margin-bottom: 0;}
    section.section01 .layout02 .box-text {padding:0 10px;}
    section.section01 .box-video {margin-top:-7px;}
}


/* section02 */
section.section02 .section-item {margin:30px 0;}
section.section02 .section-item.layout03 {margin-top: 45px;}
section.section02 .layout02 {gap:70px;align-items: flex-start;}
section.section02 .layout02 .wrap-img {max-width: 855px;align-items: flex-end;gap:16px;}
section.section02 .layout02 .wrap-img .box-img:nth-child(1) {max-width: 565px;}
section.section02 .layout02 .wrap-img .box-img:nth-child(2) {max-width: 274px;margin-bottom: -120px;}
section.section02 .layout03 .subtit {font-size: 18px;font-weight: bold;text-align: center;}
section.section02 .layout03 .wrap-table {margin-top:20px;}
section.section02 .layout03 .wrap-table table {margin: auto;}


@media(min-width:735px) {
    section.section02 .layout02 .wrap-img {min-width: 550px;flex: 1;}
}

@media(max-width:734px) {
    section.section02 .section-item {margin:12px 0;}
    section.section02 .section-item.layout03 {margin-top: 12px;}
    section.section02 .layout02 {gap: 12px;}
    section.section02 .layout03 .subtit {font-size: 15px;text-align: left;}
    section.section02 .layout03 .wrap-table {margin-top:12px;}
}


/* section03 */
section.section03 {padding: 48px;}
section.section03 .layout-inner {max-width: 1145px;}
section.section03 .section-item {margin:30px 0;}
section.section03 .layout01 .wrap-flex {gap:30px;flex-direction: column;}
section.section03 .layout02 .wrap-flex {justify-content: flex-end;}

@media(max-width:734px) {
    section.section03 {padding: 20px 10px;}
    section.section03 .section-item {margin:12px 0;}
    section.section03 .box-text {padding:0 14px;}
    section.section03 .layout01 .wrap-flex {gap:12px;}
}