@charset "utf-8";
body {overflow-x: hidden;}
/* COMMON */
a {text-decoration: unset; color:#000;cursor: pointer;}
a:hover {color: #000;}
button {border: 0; background: none; cursor: pointer;}
.bg-black {background: #000;}
/* FONT SIZE */
.t14 {font-size: 14px;}
.t15 {font-size: 15px;}
.t16 {font-size: 16px;}
.t18 {font-size: 18px;}
 
/* FLEX */
.flex-center {display:flex; align-items: center; justify-content: center;}
.center-between {display:flex; align-items: center; justify-content: space-between;}

/* POSITION */
.absolute-top-start {position: absolute; top: 0; left: 0;}
.absolute-bottom-center {position: absolute; bottom:0; left: 50%; transform: translateX(-50%);}
.absolute-bottom-start {position: absolute !important; left: 0; bottom: 0;}

/* GAP */
.column-8 {display: flex; column-gap: 8px;}
.column-10 {display: flex; column-gap: 10px;}
.column-12 {display: flex; column-gap: 12px;}
.column-20 {display: flex; column-gap: 20px;}

.row-20 {display: flex; flex-direction: column; row-gap: 20px;}
.row-34 {display: flex; flex-direction: column; row-gap: 34px;}


/* MOVING */
.top {opacity: 0; top: 50px; transition: 1s ease;}
.top.active {opacity: 1; top: 0;}
.opacity {opacity: 0; transition: 1s ease; transition-delay: .5s;}
.opacity.active {opacity: 1;}
.flash.active { -webkit-animation-name: flash; animation-name: flash; animation-duration: 1s;}
.lightSpeedInRight {opacity: 0;}
.lightSpeedInRight.active {-webkit-animation-name: lightSpeedInRight; animation-name: lightSpeedInRight; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1;}
.fadeInLeftBig {opacity: 0;}
.fadeInLeftBig.active {-webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; opacity: 1;}

.bounceIn.active {-webkit-animation-duration: .75s; animation-duration: .75s; -webkit-animation-duration: calc(var(--animate-duration)*.75); animation-duration: calc(var(--animate-duration)*.75); -webkit-animation-name: bounceIn; animation-name: bounceIn;}


/* HEADER */
#header {z-index: 9; padding: 32px 20px; background: linear-gradient(180deg, #0E0000 0%, #0E0000 0.01%, rgba(0, 0, 0, 0.00) 100%); position: fixed; left: 50%; transform: translateX(-50%);}
#header .center-between {max-width: 1200px; width: 100%; margin: 0 auto;}
#header .max-50 {width:100%; max-width:50px;}
#header .max-140 {width:100%; max-width:140px;}
#header .t16 {background: #AB261A; height: 50px; padding: 12px 24px; pointer-events: none;}

/* FOOTER */
#footer .row-34 {width: 100%; max-width: 1240px; padding: 40px 20px; margin: 0 auto; justify-content: center;}
#footer .t16 {line-height: 30px; opacity: .7;}
#footer .t16 br {display: none;}
#footer .t15 {font-weight: 500; color: #857662; line-height: 30px;}
#footer .t14 {color: #828282;}
#footer #call {position: fixed; right:20px; bottom:217px; z-index: 3; display: none;}
#footer .max-50 {width: 100%; max-width: 50px;}


/* FORM */
#request {position: sticky; left: 0; bottom: 0; width: 100%; z-index: 3; display: none;}
#request {display: none; background: #604C2B;}
#request .contents {max-width: 1240px; width:100%; margin:0 auto; padding: 24px 20px;}
#request .column-20 {align-items: flex-end; justify-content: space-between; row-gap: 26px;}
#request input {border-radius: 6px; height: 48px; padding: 0 20px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.10);}
#request input::placeholder {color:#FFF;}
#request select {border-radius: 6px; height: 48px; padding: 0 20px; border: 1px solid rgba(255, 255, 255, 0.15); outline: none;-o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background:rgba(255, 255, 255, 0.10) url('../img/icon-select.png')no-repeat right 20px center; background-size: 24px;}
#request select::-ms-expand {display: none;}
#request .column-20 .text-white {flex: 1;}
#request .bg-black {height: 48px; border: 0; border-radius: 6px; flex: 1;font-weight: 500;}
#request .column-8 {min-width:100%;}
#request .column-8 .column-10 {cursor: pointer; align-items: center;}
#request .column-8 .d-block {min-width: 26px; height: 26px; background: url('../img/check-off.png')no-repeat center; background-size: contain;}
#request .column-8 input:checked + .column-10 .d-block {background: url('../img/check-on.png')no-repeat center; background-size: contain;}
#request .column-8 .t16 {text-decoration-line: underline; white-space: nowrap;}


/* MAIN */
#main .mo {display: none;}

#main .sect4 .top {z-index: 2; pointer-events: none;}
#main .sect4 .mySwiper1 {position: absolute; width: 26%; left: 50%; transform: translateX(-50%); bottom: 16.666%; z-index: 3; padding: 0 2.5%;}
#main .sect4 .mySwiper1::before {content: ''; display: block; width: 100%; height: 3.2%; background-color: #6F503E; position: absolute; left: 0; top: 5.2%;}
#main .sect4 .mySwiper1 .swiper-slide {background: #3D3C3B; cursor: pointer;}
#main .sect4 .mySwiper1 .swiper-slide-thumb-active {background: #721313;}

#main .sect7 .absolute-bottom-center {max-width: 62.5%; width: calc(100% - 40px); bottom: 8.5%;}
#main .sect7 .absolute-bottom-center .h-100 {position: relative; padding-bottom: 56.25%;  aspect-ratio: 16 / 9;}
#main .sect7 .absolute-bottom-center .absolute-top-start {width: 100%; height: 100%; object-position: center; object-fit: cover;}
#main .sect7 .opacity:not(.absolute-bottom-center) {transition-delay: 1s;}


@media (max-width:1024px) {
    #footer .column-20 {flex-direction: column-reverse; align-items: flex-start; row-gap: 16px;}
    #footer .text-end {display: flex; align-items: center; justify-content: flex-start; column-gap: 32px;}
}

@media (max-width:768px) {

    #header {background: linear-gradient(180deg, #0E0000 -84.72%, #0E0000 -84.7%, rgba(0, 0, 0, 0.00) 100%); padding: 12px 20px;}
    #header .column-12 {column-gap: 10px;}
    #header .column-20 {column-gap: 16px;}
    #header .max-140 {max-width: 80px;}
    #header .max-50 {max-width: 32px;}
    #header .t16 {font-size: 14px; height: 32px; width: 120px; padding: 0; pointer-events: painted;}
    #header .t16 span {display: none;}

    #footer .row-34 {row-gap: 16px;}
    #footer .me-auto {max-width: 98px;}
    #footer .me-auto img {width: 100%;}
    #footer .t15, #footer .t16 {font-size: 14px; line-height: 20px;}
    #footer .t16 .d-flex {flex-direction: column;}
    #footer .t16 br {display: block; height: 8px; content: ""; width: 100%;}
    #footer .t14 {font-size: 12px; line-height: 16px;}

    #main .pc {display: none;}
    #main .mo {display: block;}
    

    #request .contents {padding: 20px; row-gap: 12px;}
    #request .column-20 {column-gap: 16px; row-gap: 10px;}
    #request .column-20 .text-white:first-of-type,
    #request .column-20 .text-white:nth-of-type(2) {min-width: calc(50% - 8px);}
    #request .column-20 * {font-size: 13px; height: 38px;}
    #request .bg-black {min-width: 100%; font-size: 15px; height: 38px;}
    #request .column-8 {font-size: 13px;}
    #request .column-8 .d-block {min-width: 16px; height: 16px;}
    #request .column-8 .t16 {font-size: 13px;}


    #main .sect4 .mySwiper1 {width: 71.111%; bottom: 45%; padding: 0 6.666%; height: 20%;}


    #main .sect6 .swiper {position: absolute; left: 0; bottom: 14.5%; max-width: 100%; padding: 0 20px;}
    #main .sect6 .opacity {z-index: 2; pointer-events: none;}

    #main .sect7 .absolute-bottom-center {max-width: unset; bottom: 28%;}



}