#main { position: relative; } 
#section1 { overflow: hidden; } 
.msec1 { position: relative; } 
.msec1 .swiper-slide { overflow:hidden } 
.msec1 .swiper-slide .slogan { position:absolute; z-index:10; top:30%; left:50%; transform: translateX(-50%); width:100%; padding:0 2rem; max-width:var(--container); } 
.msec1 .swiper-slide .slogan p { color:#fff; font-weight: bold; position: relative; text-shadow: 0 0 0.5rem rgba(0,0,0,0.1); text-align: center; } 
.msec1 .swiper-slide .slogan .text1 { top:0; opacity:0; font-size: 8rem; text-transform: uppercase; font-family: var(--font-eng); transition:0.5s 0.5s }
.msec1 .swiper-slide .slogan .text2 { top:0; opacity:0; font-size:8rem; filter: blur(10px); text-transform: uppercase; font-family: var(--font-eng);  transition:0.5s 1s } 
.msec1 .swiper-slide .slogan .text3 { top:0px; opacity:0; filter: blur(10px); font-size:2rem; transition:0.5s 1s } 


.msec1 .swiper-slide .bg { transform:scale(1.1); transition:10s; height:96rem; position: relative; } 
.msec1 .swiper-slide .bg::before { content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; } 
.msec1 .swiper-slide .bg img { width:100%; height: 100%; object-fit: cover; } 

.msec1 .swiper-slide-active .bg { transform:scale(1) } 
.msec1 .swiper-slide-active .slogan .text1 { top:0; opacity:1; letter-spacing:normal; } 
.msec1 .swiper-slide-active .slogan .text2 { top:0rem; opacity:1; filter:blur(0) } 
.msec1 .swiper-slide-active .slogan .text3 { top:0rem; opacity:1; filter:blur(0); margin-top: 5rem; } 

/*swiper*/

.swiper_navi{max-width: 1500px; width: 100%; left: 50%; transform: translateX(-50%); bottom: 30rem; z-index: 9; position: absolute; display: flex; justify-content: space-between;}
.msec1 .swiper-button-prev,
.msec1 .swiper-button-next { width: 5rem; height: 5rem; color:#fff; background: none; bottom:0; top:auto; font-size: 5rem; } 

.msec1 .swiper-button-prev { left:auto; left:0; } 
.msec1 .swiper-button-next { left:auto; left:18rem; right:0 } 
.msec1 .swiper-pagination { max-width:var(--container); font-weight: bold; padding:0 2rem; color:#fff; text-align: left; position: absolute; left: 50%; transform: translate(-50%); bottom: 10rem; } 

.swiper_navi ul{display: flex; gap:2rem}
.swiper_navi ul li a{display: flex; align-items: center; gap:1rem; width: 32rem; padding: 1rem 0 1rem 2.8rem; background:rgba(255,255,255,0.3); border-radius:1rem; font-weight: bold; backdrop-filter:blur(10px); color:#fff;}
.swiper_navi ul li:last-child a{background-color: rgba(58,187,28,0.5);}

.msec1 .swiper-progress-bar { position: absolute; left:0; display: block; z-index: 1; height:.5rem; } 
.msec1 .swiper-progress-bar .slide_progress-bar { position: absolute; height: .3rem; background:#fff; width:12rem; clear: both; opacity:1; bottom: 0; left: 3rem; top: 3.5rem; } 
.msec1 .swiper-progress-bar .slide_progress-bar:after { position: absolute; top: 0; left: 0; background:var(--sub_color); height: 100%; width: 0; content: ""; transition: 0.1s width linear; } 
.msec1 .swiper-progress-bar.active .slide_progress-bar { opacity: 1; } 
.msec1 .swiper-progress-bar.animate .slide_progress-bar:after { transition: width linear; transition-delay: unset; width: 100%; transition-duration: 5s; } 
.scrolldown{position: absolute; top: 70rem; left: 50%; transform: translateX(-50%); z-index: 9;}

/* About */
.main_about{display: flex; gap:16.3rem}
.main_about p{}
.about_wrap{width: 83.7rem; margin-top: 11.8rem;}
.about_wrap dl{margin-bottom: 7.3rem;}
.about_wrap dl dt{font-family: var(--font-eng); font-size: 4.5rem; font-weight: bold; margin-bottom: 3rem;}
.about_wrap dl dt span{display: block; font-size: 1.6rem; text-transform: uppercase; color:var(--main_color)}
.about_wrap ul{display: flex; gap:2.4rem}
.about_wrap ul li a{display: flex; justify-content: space-between; align-items: center; background: var(--main_color); color:#fff; font-weight: bold; font-size: 1.7rem; width: 18.4rem; height: 5.5rem; padding:1rem 2rem; border-radius: 100px;}
.about_wrap ul li:last-child a{background: #fff; border:1px solid var(--main_color); color:var(--main_color)}



/* Why */
.main_why{padding: 12rem 0; background: url(../images/main/why_bg.jpg) no-repeat; color: #fff;}
.why_title{display: flex; gap:14.5rem; align-items: end; margin-bottom: 8rem;}
.why_title dt{font-weight: bold; font-family: var(--font-eng); font-size: 4.5rem}
.why_title dt span{display: block; font-size: 1.6rem; color: var(--main_color); margin-bottom: 2.8rem;}
.why_title dd{font-size: 1.7rem;}

.why_box{display: flex; gap:4.7rem; height: 21.6rem; }
.box_large{flex:2; position: relative;}
.box_large a{display: flex; background: #9a3130; height: 100%; color:#fff; padding:3rem}
.box_large dl dt{font-family: var(--font-eng); font-weight: bold; font-size: 2rem; margin-bottom: 3.8rem;}
.box_large dl dd{font-size:1.7rem}
.box_large i{position: absolute; top:2.4rem; right:2.4rem}

.box{flex:1; background: #555555; position: relative; font-family: var(--font-eng); font-weight: bold; padding:2.4rem; display: flex; align-items: end;}
.box i{position: absolute; top:2.4rem; right:2.4rem}


.materials-section {width: 100%; padding: 100px 20px;background: #fff;box-sizing: border-box;color: #222;}
.materials-inner {max-width: 1400px; margin: 0 auto;display: grid;grid-template-columns: 1.15fr 1fr;gap: 8%;align-items: center;}
.materials-left {min-width: 0;}
.materials-label {
    display: block;
    margin-bottom: 32px;
    color: #d71920;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
}

.materials-left h2 {margin: 0 0 26px; font-size: 4.5rem; font-family: var(--font-eng); font-weight: bold;}
.materials-desc {font-size: 1.7rem}

.materials-list {
    margin-top: 60px;
    border-top: 1px solid #d9d9d9;
}

.materials-item {
    position: relative;
    display: grid;
    grid-template-columns: 26px minmax(155px, 1fr) minmax(180px, 1.2fr) 42px;
    gap: 15px;
    align-items: start;
    padding: 34px 0;
    border-bottom: 1px solid #d9d9d9;
    cursor: pointer;
    color: #888;
    transition: color .3s ease;
}

.materials-item.active {
    color: #222;
}

.materials-num {
    font-size: 16px;
    font-weight: 700;
    padding-top: 2px;
}

.materials-title {
    font-size: 19px;
    font-weight: 750;
    line-height: 1.5;
    letter-spacing: -.4px;
}

.materials-detail {
    margin: 0;
    font-size: 14px;
    line-height: 2;
    color: #333;
    display: none;
    word-break: keep-all;
}

.materials-item.active .materials-detail {
    display: block;
}

.materials-arrow {
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d71920;
    color: #fff;
    font-size: 22px;
    line-height: 42px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .3s, transform .3s;
}

.materials-item.active .materials-arrow {
    opacity: 1;
    transform: translateY(0);
}

/* RIGHT SWIPER */
.materials-right {
    width: 100%;
    min-width: 0;
    position: relative;
}

.materialsSwiper {
    width: 100%;
    overflow: hidden;
}

.materialsSwiper .swiper-slide {
    width: 100%;
    height: 640px;
    overflow: hidden;
    background: #f3f4f5;
}

.materialsSwiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}

.materialsSwiper .swiper-slide-active img {
    transform: scale(1.02);
}

/* PROGRESS */
.materials-progress {
    width: 100%;
    height: 2px;
    margin-top: 20px;
    background: #e7e7e7;
    overflow: hidden;
}

.materials-progress-bar {
    display: block;
    width: 33.333%;
    height: 100%;
    background: #d71920;
    transition: transform .4s ease;
}

/* TABLET */
@media (max-width: 1100px) {
    .materials-inner {
        grid-template-columns: 1fr 0.85fr;
        gap: 5%;
    }

    .materials-item {
        grid-template-columns: 25px 1fr 35px;
        gap: 12px;
    }

    .materials-detail {
        grid-column: 2 / 3;
        margin-top: 8px;
    }

    .materials-arrow {
        grid-column: 3;
        grid-row: 1;
        width: 35px;
        height: 35px;
        line-height: 35px;
    }

    .materialsSwiper .swiper-slide {
        height: 520px;
    }
}

/* MOBILE */
@media (max-width: 767px) {
    .materials-section {
        padding: 60px 20px;
    }

    .materials-inner {
        display: flex;
        flex-direction: column;
        gap: 35px;
    }

    .materials-left,
    .materials-right {
        width: 100%;
    }

    .materials-label {
        margin-bottom: 20px;
        font-size: 12px;
    }

    .materials-left h2 {
        font-size: 30px;
        line-height: 1.4;
        letter-spacing: -1px;
    }

    .materials-desc {
        font-size: 13px;
        line-height: 1.8;
    }

    .pc-only {
        display: none;
    }

    .materials-list {
        margin-top: 35px;
    }

    .materials-item {
        grid-template-columns: 25px minmax(0, 1fr) 35px;
        padding: 23px 0;
        gap: 10px;
    }

    .materials-title {
        font-size: 16px;
    }

    .materials-num {
        font-size: 14px;
    }

    .materials-detail {
        font-size: 12px;
        line-height: 1.8;
    }

    .materialsSwiper .swiper-slide {
        height: auto;
        aspect-ratio: 4 / 5;
    }

    .materials-progress {
        margin-top: 14px;
    }
}

/* Contact */
.main_contact{display: flex;}
.contact_img{width: 50%; background: url(../images/main/brumby_img.jpg) no-repeat; background-size:cover}
.contact_wrap{width: 50%; background: #8B0000; color:#fff; padding: 10rem 8rem;}
.contact_title dl{margin-bottom: 4rem;}
.contact_title dl dt{font-family: var(--font-eng); font-weight: bold; font-size: 4.5rem; margin-bottom: 4rem;}
.contact_title dl dt span{display: block; font-size: 1.6rem; margin-bottom: 2.8rem;}

.contact_form dl{padding-bottom: 2rem;}
.contact_form input{background:#800000; border:1px solid rgba(255,255,255,0.5); padding: 1rem 2rem; border-radius: 3px; width: 100%; color:#fff;}
.contact_form textarea{background:#800000; border:1px solid rgba(255,255,255,0.5); padding: 1rem 2rem; border-radius: 3px; color:#fff;}
.contact_form dl dt{font-size: 1.4rem; font-weight: bold;}
.short_wrap{display:flex; gap:3rem}
.input_short{flex:1}

.input_long input,
.input_long textarea{width: 100%; }
.btn_send{background: none; border:1px solid #fff; color:#fff; font-weight: bold; display: flex; gap:2rem; align-items: center; padding: 1rem 2rem; border-radius: 100px; font-size:1.7rem; margin-top: 4rem;}