@charset "UTF-8";

/* port_main */
.port_main_sec1{width: 100%;position: relative;}
.port_main_sec1_swi_group{width: 100%;position: relative;}
/* .port_main_sec1_swi_group .swiper-slide{height: 100%;} */
.port_main_sec1_swi .swiper-wrapper{height: auto;}
 .port_main_sec1_swi_group img{width: 100%;aspect-ratio: 5/1;object-fit: cover;}
.port_main_sec1_swi_pag{position: absolute;bottom: 30px !important;left: 50% !important;right: auto !important;top: auto !important; transform: translateX(-50%);z-index: 99;width: max-content;display: flex;gap: 25px;justify-content: center;}
.port_main_sec1_swi_pag .swiper-pagination-bullet{background-color: transparent;border: 1px solid #fff;transition: 0.6s;}
.port_main_sec1_swi_pag .swiper-pagination-bullet-active{background-color: #fff;}
.port_main_sec1_swi_pag {}

.port_main_sec1_swi_group .swi_ab_cat_group{overflow: hidden; width: max-content;left: 50%;transform: translateX(-50%); position: absolute;z-index: 6;top: 30px;display: flex;gap: 0px;padding: 0px 0px;border-radius: 50px;background-color: #ffffff38;}
.swi_ab_cat{font-weight: 500; cursor: pointer; transition: 0.4s; color: #ffffff9a;font-size: 18px;text-align: center;padding: 10px 25px;}
.swi_ab_cat:hover, .swi_ab_cat.on{background-color: #fff;color: #222;}

.port_main_sec3{}
.port_main_sec3 img{width: 100%;aspect-ratio: 3.5/1;object-fit: cover;}



/* port_detail */
.sub_sec2_1_1{font-family: 'Gotham Black';font-size: 55px;line-height: 1.2;width: 450px;}
.sub_sec2_1_1_1{color: transparent;-webkit-text-stroke: 1px #fff;}
.sub_sec2_1_1_2{}


.pt87{height: 87px;}
.sub_sec1{height: calc(100vh - 87px);position: relative;}
.sub_sec1_bg{position: relative;z-index: 0;width: 100%;height: 100%;}
.sub_sec1_bg img,.sub_sec1_bg video{width: 100%;height: 100%;object-fit: cover;}
.sub_sec1_filter{position: absolute;top: 0;right: 0;bottom: 0;left: 0;background-color: #00000060;}

.sub_sec1_txt{height: max-content; color: #fff;left: 50%;transform: translateX(-50%); position: absolute;top: 30px;display: flex;flex-direction: column;align-items: center;gap: 30px;}
.sub_sec1_txt1{font-family: 'Afacad', sans-serif;width: 220px;height: 35px;display: flex;align-items: center;justify-content: center;font-size: 20px;border: 1px solid #fff;border-radius: 50px;}
.sub_sec1_txt2{ font-family: 'Gotham Bold', sans-serif; font-size: 60px;letter-spacing: 0.4em;}

.sub_sec2{display: flex;align-items: center; height: auto;background-color: #1d1d1d;color: #fff;}
.sub_sec2_con{padding: 50px 0; width: 80%; margin: 0 auto;gap: 50px; display: flex;justify-content: space-between;}
.sub_sec2_con>div{width: calc(100% / 3);}
.sub_sec2_1_2{margin-top: 15px; font-size: 18px; font-family: 'Gotham Bold', sans-serif; letter-spacing: 0.2em;}

.sub_sec2_2{display: flex;gap: 15px;width: 800px;flex-direction: column;}
.sub_sec2_2_1{  font-family: 'Gotham Black'; line-height: 25px;}
.sub_sec2_2_2{line-height: 25px;font-size: 18px;}
.bold{font-weight: 600;}

.sub_sec2_3{display: flex;gap: 30px;flex-direction: column;}
.sub_sec2_3_1{  line-height: 25px;display: flex;gap: 30px;}
.sub_sec2_3_1_1{ font-family: 'Gotham Black';width: 78px;}
.sub_sec2_3_1_2{font-size: 20px;}

.sub_sec3_group{display: grid;grid-template-columns: repeat(2,1fr);}
.sub_sec3_list{aspect-ratio: 16/9;overflow: hidden;}
.sub_sec3_list img{width: 100%;height: 100%;object-fit: cover;transition: 0.4s;}
.sub_sec3_list:hover img{transform: scale(1.1);}
.sec2_grid_group{z-index: 10; display: grid;position: relative; grid-template-columns: repeat(4,1fr);background-color: #222;}
.sec2_list{cursor: pointer; overflow: hidden;aspect-ratio: 1/1;}
.sec2_list img{width: 100%;height: 100%; aspect-ratio: 1/1;object-fit: cover;transition: 0.6s;}
.sec2_list:hover img{transform: scale(1.1);}


.port_main_sec2{position: relative;}
.sec2_grid_more_btn{z-index: 5;cursor: pointer; width: 150px; position: absolute;bottom: 0; transform: translate(-50%, 50%);left: 50%;}
 


@media screen and (max-width: 1250px) {
    .sec2_grid_group{grid-template-columns: repeat(2,1fr);}
    .sub_sec3_list{aspect-ratio: 1/1;}
    .sub_sec1_txt1{font-size: 16px;width: 135px;height: 30px;}
    .sub_sec1{height: 350px;}
    .sub_sec1_txt{gap: 200px;}
    .sub_sec1_txt2{font-size: 25px;}

    .sub_sec2_con{width: 90%;flex-direction: column;gap: 10px;padding: 20px 0;}
    .sub_sec2_con>div{width: 100%;}
    .sub_sec2{height: auto;padding: 40px 0 48px;}
    .sub_sec2_2{flex-direction: column;gap: 20px;margin-top: 50px;}
    .sub_sec2_2_2{font-size: 14px;}
    .sub_sec2_3{flex-direction: row;margin-top: 50px;}
    .sub_sec2_3_1{flex-direction: column;gap: 0px;}
    .sub_sec2_3_1_2{font-size: 12px;}


}

@media screen and (max-width: 769px) {
    .pt87{height: 59px;}

    .port_main_sec1_swi_group img{aspect-ratio: 2/1;}
    .port_main_sec3 img{aspect-ratio: 2/1;}
    .port_main_sec1_swi_pag{gap: 20px;bottom: 20px !important;}
    .port_main_sec1_swi_pag .swiper-pagination-bullet{margin: 0 !important;padding: 0 !important;}
    
    .sub_sec1{height: 300px;}
    .sub_sec1_txt2{font-size: 20px;}
    .sub_sec1_txt{gap: 0px;}
    .sub_sec2_1_1{font-size: 35px;width: 100%;}
    .sub_sec2_1_1_1{}
    .sub_sec2_1_1_2{}
    .sub_sec2_2{margin-top: 25px;}
    .port_main_sec1_swi_group .swi_ab_cat_group{top: 15px;width: max-content;max-width: 90%; display: flex;align-items: center;justify-content: center;}
    .swi_ab_cat:hover{background-color: transparent;color: #fff;}
    .swi_ab_cat_group{}
    .swi_ab_cat{height: 35px;display: flex;align-items: center;justify-content: center; padding: 5px 15px;font-size: 12px;line-height: 1.3;}
}

@media screen and (max-width: 380px) {
    .swi_ab_cat{padding: 5px 15px;font-size: 10px;}
    .port_main_sec1_swi_group .swi_ab_cat_group{max-width: 100%;}
}