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

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

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

/* common */
.box-text p.sub {font-size: 15px;color:#989898;font-weight: 500;}
.box-text .box-sub {text-align: right;margin-top: 16px;}
.box-text .box-sub .small {font-size: 16px;font-weight: 500;}
.box-text .box-sub p {font-size: 20px;font-weight: 600;line-height: 140%;}

@media (max-width:734px) {
    .box-text .box-sub .small {font-size: 15px;}
    .box-text .box-sub p {font-size: 18px;}
}

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

.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: flex-start;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:64px;}
.layout03 .wrap-img {display: flex;align-items: flex-start;gap:12px;}
.layout03 .wrap-img .box-img {max-width: 800px;}
.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: 100px;}
    .section01 .layout03 .wrap-img .box-img {min-width: 308px;}
}

@media (max-width:1100px) {
    .section01 {padding:10px 10px 30px; margin:32px 0 24px;}
    .section01 .section-item {margin:24px 0}

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

    .layout03 {flex-wrap: wrap;gap: 12px;justify-content: center;}
    .layout03 .inner {display: grid;gap:12px;}
    .layout03 .box-text {padding:0 18px 0 10px;}
}

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

/* section02 */
.section02 {margin:56px 0;}
.section02 .section-item {margin:56px 0}

@media (max-width:1100px) {
    .section02 {margin:24px 0;}
    .section02 .section-item {margin:24px 0}
}

/* layout04 */
.layout04 {display: flex;}
.layout04 .box-text {max-width: 575px;}
@media(min-width:1101px) {
    .layout04 .spacing-item {width:876px}
}
@media (max-width:1100px) {
    .layout04 .inner {display: grid;}
    .layout04 .inner .box-img {justify-self: flex-end;}
}

/* layout05 */
.layout05 .spacing-item {width:876px}
.layout05 .wrap-content {display: flex;gap:56px;flex-direction: column;}

@media(min-width:1101px) {
    .layout05 .box-text {max-width: 565px;}
}

@media (max-width:1100px) {
    .layout05 .wrap-content {flex-direction: column-reverse;gap:12px;}
}

/* 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 20px;}
}

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