@charset "UTF-8";
@import url('./user.common.css');
@import url('https://fonts.googleapis.com/css2?family=Oranienbaum&display=swap');

/**************************************************/
/* ================================= common */
section span{  color: #999;  font-weight: 300; }
.btn_viewMore{ background: #fff; text-align: center;}

/**************************************************/
/* ================================= layout */
/* --- sec_0 */
#sec_0.bn_main{ border-bottom: 1px solid #ddd;}
#sec_0.bn_main .swiper-slide{ position: relative; }
#sec_0.bn_main .wrap{ 
    top: 50%; left: 50%;  
    transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%);  
    cursor: default;
}
#sec_0.bn_main .wrap > *{ text-align: center; cursor: default;}

#sec_0 .swiper-pagination-bullet{ box-shadow: 0 0 5px 3px #0000001a; }
#sec_0 .swiper-pagination-bullet:hover{ filter: brightness(112%); -webkit-filter: brightness(112%); }

/* --- sec_1 */
#sec_1{ position: relative; width: 100%; }
#sec_1 img{ width: 100%; }
#sec_1 .wrap{
    position: absolute; z-index: 1; left: 50%; 
    color: #fff; text-align: center; color: #fff;
    transform: translate(-50%, 0); 
    -webkit-transform: translate(-50%, 0); 
    -moz-transform: translate(-50%, 0); 
    -ms-transform: translate(-50%, 0); 
    -o-transform: translate(-50%, 0); 
}
#sec_1 .btn_viewMore{ display: block; background: transparent;  border: 1px solid #fff; color: #fff;}
#sec_1 .btn_viewMore:hover{ filter: none; }

/* --- sec_2 */
#sec_2{ width: 100%; overflow: hidden; }
#sec_2 .wrap{ text-align: center;  color: #333; }
#sec_2 .wrap p{ color: #333; font-weight: 300;}

#sec_2 .col_12 > *{ height: 100%; }
#sec_2 .col_3{ display: flex; flex-flow: column nowrap; }
#sec_2 .col_3 p{  color: #333; }

#sec_2 .col_9 img{ width: 100%; height: 100%; object-fit: cover;}

/* --- sec_3 */
#sec_3{ display: flex; flex-flow: column nowrap;}
#sec_3 p{ color: #333;}

/* --- sec_4 */
#sec_4{ background-color: #F5F5F5; text-align: center;}
#sec_4 .swiper-slide{ position: relative;}
#sec_4 .swiper-slide img{ width: 100%; height: 100%; object-fit: cover;}
#sec_4 .swiper-slide:after{ 
    position: absolute; z-index: 1; left:0; 
    width: 100%; content: attr(title); text-align: center; color: #fff;
}
#sec_4 .swiper-slide:nth-of-type(3):after{ color: #333;}

#sec_4 .btn_viewMore{ background: #F5F5F5; }
/**************************************************/
/* ================================= responsive */
@media screen and (min-width: 1025px){
    h4{ font-size: 40px; }
    section span{ margin-bottom: 22px; font-size: 18px; }

    .btn_viewMore{ width: 130px; height: 40px; line-height: 38px;}

    /* --- sec_0 */
    /* #sec_0.bn_main{ aspect-ratio: 32/15; } */
    #sec_0.bn_main .wrap{ bottom: unset; font-size: 50px;}
    #sec_0.bn_main h4{ font-size: 100px; }
    #sec_0 .swiper-pagination{ margin-bottom: 30px;}
    #sec_0 .swiper-pagination-bullet{ width: 14px; height: 14px;}

    /* --- sec_1 */
    #sec_1{ padding-top: 165px; }
    #sec_1 .wrap{ bottom: 50px; font-size: 25px; }
    #sec_1 .btn_viewMore{ margin: 25px auto 0;  }

    /* --- sec_2 */
    #sec_2 .wrap{ padding: 262px 20px 268px;   font-size: 40px; }
    #sec_2 .wrap p{ margin: 44px 0 0 0; font-size: 25px; }
    #sec_2 .col_12 { max-width: 1750px; aspect-ratio: 1/0.51;}
    #sec_2 .col_3 {  justify-content: center;}
    #sec_2 .col_3 p{ margin-bottom: 46px; font-size: 22px;}

    #sec_2 .col_12:nth-of-type(1){ margin-right: auto;}
    #sec_2 .col_12:nth-of-type(1) .col_3{ padding-left: 60px;}

    #sec_2 .col_12:nth-of-type(2){ margin-left: auto;}
    #sec_2 .col_12:nth-of-type(2) .col_3{ padding-right: 60px; text-align: right;}
    #sec_2 .col_12:nth-of-type(2) .btn_viewMore{ margin-left: auto;}

    #sec_2 .bn_img{ margin-top: 180px;}

    /* --- sec_3 */
    #sec_3{ gap: 210px 0; padding: 178px 0 130px;}
    #sec_3 p{ margin: 30px 0 50px; font-size: 18px; font-weight: 300; }

    #sec_3 .swiper { padding-bottom: 40px;}
    #sec_3 .swiper-slide{ aspect-ratio: 1/1.41;}
   
    #sec_3 > .col_12{ max-width: 1750px;}
    #sec_3 > .col_12:nth-of-type(1){ margin-left: auto;}
    #sec_3 > .col_12:nth-of-type(1) .col_4{ padding-left: 20px;}
    #sec_3 > .col_12:nth-of-type(2) .col_4{ padding-right: 20px; text-align: right;}

    /* --- sec_4 */
    #sec_4{ padding: 108px 0 248px;}
    #sec_4 .swiper-wrapper{ margin: 90px 0 50px; }
    #sec_4 .swiper-slide{ aspect-ratio: 1/1.1875; }
    #sec_4 .swiper-slide:after{ bottom: 50px;}
}
@media screen and (max-width: 1680px){

}
@media screen and (max-width: 1024px){
    h4{ font-size: 1.57rem} 
    section span{ font-size: 0.85rem; }

    /* --- sec_0 */
    #sec_0.bn_main .swiper-slide{ aspect-ratio: 1/1.16; overflow: hidden;}
    #sec_0 .swiper-pagination{ margin-bottom: 14px;}
    #sec_0 .swiper-pagination-bullet{ width: 10px; height: 10px;}

    /* --- sec_1 */
    #sec_1{ padding: 40px 30px 0 !important; }
    #sec_1 .wrap{ 
        width: calc(100% - 76px); bottom: 12px; 
        line-height: 1.45; font-size: 1.28rem;
    }
    #sec_1 .btn_viewMore{ width: 100%; height: 38px; margin-top: 14px; line-height: 36px;}
    #sec_1 img{ max-height: 500px; object-fit: cover;}

    /* --- sec_2 */
    #sec_2 .wrap{ padding: 44px 30px 40px; line-height: 1.38; font-size: 1.28rem; }
    #sec_2 .wrap p{ margin: 15px 0 0 0; }


    /* --- sec_3 */
    #sec_2 > .wrap_col { padding: 0 30px; gap: 42px; }
    #sec_2 .col_12{ position: relative; width: calc(50% - 21px); }
    #sec_2 .col_3{ position: absolute; width: 100%; height: 100%; padding: 34px 16px 8px;}
    #sec_2 .col_3 p{ margin-top: 18px; color: #fff; }
    #sec_2 .btn_viewMore{ 
        position: relative; left: -8px; 
        width: calc(100% + 16px); height: 40px; margin: auto auto 0; 
        background: transparent;
        color: #fff; border-color: #fff; line-height: 38px;
    }

    #sec_2 .maxWidth2{ padding: 16px 0 58px !important; max-height: 600px; object-fit: cover; object-position: top;}

    /* --- sec_3 */
    #sec_3 .swiper{ padding-bottom: 8px;}
    #sec_3 .swiper-scrollbar { bottom: 0; opacity: 1 !important; background-color: #ccc; }
    #sec_3 .swiper-scrollbar-drag{ background-color: #333; }

    #sec_3 .col_4{ order: 2; padding: 26px 15px 70px; text-align: center;}
    #sec_3 h4{ margin: 25px 0 15px;}
    #sec_3 p{ font-size: 0.85rem;}
    #sec_3 .btn_viewMore{ width: 100%; height: 42px; margin-top: 22px; line-height: 40px;}

    /* --- sec_4 */
    #sec_4{padding: 40px 0 92px;}
    #sec_4 h4{ margin: 15px 0 32px;}
    #sec_4 .swiper{ padding-bottom: 32px;}
    #sec_4 .swiper-slide:after{ bottom: 20px; font-size: 1rem;}
    #sec_4 .swiper-pagination{ bottom: 90px !important}

    #sec_4 .btn_viewMore{ width: 100%; height: 42px; margin-top: 42px; line-height: 40px;}
}
@media screen and (max-width: 640px){
    /* --- sec_2 */
    #sec_2 .col_12{ position: relative; width: 100%; }
    #sec_2 .col_12:nth-of-type(2){ text-align: right;}
}