@charset "UTF-8";

/**********************************************/
section h2{ text-align: left; color: #232323; font-weight: 700; font-size: 1.875rem; }

/**********************************************/
/* === sSlider === */
#sSlider{ position: relative; overflow: hidden; }
#sSlider::before, #sSlider::after{
    position: absolute; z-index: 5; top: 0;
    display: block; height: 100%;
    content: ''; background: #FDEDB8;  
}
#sSlider::before{ left: 0; }
#sSlider::after{ right: 0; }

#sSlider .swiper-slide{ 
    display: flex; flex-flow: column nowrap; 
    background: rgba(255, 255, 255, 0.7); cursor: pointer;
}
#sSlider .swiper-slide video{ position: relative; width: 100%; object-fit: contain; background: #000}


/* body.active #player, body.active .bg_player{
    display: block;
} */
#player, #thumImg{
    position: fixed; z-index: 200;  left: 10vw; top: 20vh; 
    display: none; width: 80vw; height: 60vh; object-fit: contain; background: #000
}
.bg_player, .bg_thum{
    position: fixed; z-index: 150; left: 0; top: 0; 
    display: none; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    content: '';
}
.bg_player:after, .bg_thum:after{
    position: absolute; top: 10vh; right: 5vw; 
    display: flex; align-items: center; justify-content: center;;
    width: 40px; height: 40px;
    border: 4px solid #fff; border-radius: 50%;
    font-size: 28px; content: '⨉'; color: #fff; font-weight: bolder;
    cursor: pointer;
}


#sSlider .swiper-slide p{ display: flex;  align-items: center; justify-content: center; }

#sSlider .swiper-button-prev, #sSlider .swiper-button-next{ 
    width: 16px; height: 33px; padding: 8.5px 12px; box-sizing: content-box;
}

#sSlider .swiper-button-prev{ left: 0; }
#sSlider .swiper-button-next{ right: 0; }

#sSlider .swiper-button-prev:after, #sSlider .swiper-button-next:after{ position: relative; color: #000; font-size: 24px; font-weight: 900;}

/**********************************************/
/* === slideToggle === */
.slideToggle > li button{ display: flex; align-items: center; width: 100%; }
.slideToggle > li button:after{ 
    display: inline-block; background-size: contain !important;
    content: ''; transform-origin: 50% 55%; 
}
.slideToggle > li button.active:after{ transform: rotate(180deg); }

.slideToggle > li > div{ display: none; }
.slideToggle > li button.active + div{ display: block; }

/**********************************************/
/* ========================== responsive */
@media screen and (min-width: 1025px){
    .wrap{
        width: 100%; max-width: 1290px;
        margin: 0 auto;
    }

    /* === nav_side === */
    #nav_side{ 
        position: fixed; z-index: 100; left: 3%;
        display: flex; flex-flow: column nowrap; 
        width: 18vw; max-width: 270px;
    }
    #nav_side > *{ box-shadow: 0 0 10px rgba(68, 133, 236, 0.25); }
    #nav_side p{
        display: block; width: 100%; margin-bottom: 18px; padding-left: 18px; 
        background: #FFE58B; line-height: 88px; color: #232323; font-size: 1.5rem; 
    }
    #nav_side p div{ display: none;}
    #nav_side ul{ 
        display: flex; flex-flow: column nowrap; flex: 1; background: #FFF;       
    }
    #nav_side li{ display: flex; cursor: pointer; transition: all .15s ease-in; }
    #nav_side li:not(#btn_top, #btn_bottom){ 
        flex: 1; align-items: center; text-indent: 18px;
        font-weight: 600; font-size: 1.375rem;
    }
    #nav_side li:not(#btn_top, #btn_bottom):hover{ background: rgba(89, 89, 89,.7); color: #FFF; }
    #nav_side li.active{ background: #595959 !important; color: #FFF;}

    #btn_top, #btn_bottom{ justify-content: center; }
    #btn_bottom{ align-items: flex-end;}

    /* === sSlider === */
    #sSlider{ width: 70%;  margin-right: 10%; padding: 0 50px; }
    #sSlider::before, #sSlider::after{ width: 50px; }

    #sSlider .swiper-wrapper{ height: 460px; }
    #sSlider .swiper-slide video{ height: 364px; }

    #sSlider .swiper-slide:after{ height: 364px; }
    #sSlider .swiper-slide p{ flex: 1; }

    #sSlider .swiper-slide:after{
        position: absolute; left: 0; right: 0; 
        display: block; opacity: 0; width: 100%; content: ''; 
        background: rgba(255, 255, 255, 0.7) no-repeat center;
        background-image: url('/img//user/sub/ico_play.svg'); 
        transition: all 0.15s ease-in; 
    }
    #sSlider .swiper-slide:hover:after{ opacity: 1; }
    /* #sSlider .swiper-slide.active:after{ background-image: url('/img//user/sub/ico_pause.svg'); } */

    #sSlider .swiper-button-prev:after, #sSlider .swiper-button-next:after{ top: 50px; }

}
/* ========================== */
@media screen and (max-width: 1920px){
    #sSlider{ width: 70%; max-width: 1347px; margin-right: 5%; }
}
@media screen and (max-width: 1600px){
    .wrap{ width: 75vw; }

    /* === nav_side === */
    #nav_side p{ font-size: 1.375rem; }
    #nav_side li:not(#btn_top, #btn_bottom){ font-size: 1.25rem; }

}
@media screen and (max-width: 1024px){
    .wrap{ width: 100%; }

    /* player */
    .bg_player:after{ display: none;}

    /* === nav_side === */
    #nav_side{ display: none; }

    /* === sSlider === */
    #sSlider{ width: 100%; margin: 0 auto; padding: 0 50px; }
    #sSlider::before, #sSlider::after{ width: 50px;}
    #sSlider .swiper-slide p{ height: 80px; }
    #sSlider .swiper-button-prev:after, #sSlider .swiper-button-next:after{ top: 25px; }
}
@media screen and (max-width: 560px){
    /* === sSlider === */
    #sSlider{ padding: 0 75px; }
    #sSlider::before, #sSlider::after{ width: 75px;}

    #sSlider .swiper-button-prev, #sSlider .swiper-button-next{ width: 75px; height: 75px; padding: 0; 
    }
    #sSlider .swiper-button-prev:after, #sSlider .swiper-button-next:after{ font-size: 20px;}
}
@media screen and (max-width: 375px){
    /* === sSlider === */
    #sSlider{ padding: 0 50px; }
    #sSlider::before, #sSlider::after{ width: 50px;}
    #sSlider .swiper-button-prev,  #sSlider .swiper-button-next{ width: 50px; 
    }
}
@media screen and (max-width: 320px){
    /* === sSlider === */
    #sSlider{ padding: 0 20px; }
    #sSlider::before, #sSlider::after{ width: 20px;}
    #sSlider .swiper-button-prev, #sSlider .swiper-button-next{ width: 20px; 
    }
}



#sec_02 .btn_quote + input {
border: none;
box-shadow: none;
text-align: center;
font-size: 16px;
outline: none;
width: 80%;
}