/* banner */
.project_wrap main .banner { padding-top:0; }
.project_wrap main .banner .main_banner_pagination { width:1280px; margin-left:calc((100% - 1280px) / 2); bottom:60px; display:flex; }
.project_wrap main .sub_banner .sub_banner_swiper .sub_banner_pagination { width:490px; margin-left:calc((100% - 1280px) / 2); bottom:60px; display:flex; }
.project_wrap main .banner .swiper-pagination-bullet { height:3px; margin:0; border-radius:0; background:#000; opacity:1; }
.project_wrap main .banner .swiper-pagination-bullet-active { background:#fff; }
.project_wrap main .banner .swiper-wrapper .swiper-slide { position:relative; }
.project_wrap main .banner .swiper-wrapper .swiper-slide img { cursor:pointer; width:100%;}
.project_wrap main .banner .swiper-wrapper .swiper-slide .detail_btn { font-size:17px; font-weight:700; border:0; position:absolute; bottom:120px; left:calc((100% - 1280px) / 2); background:none; }
/* cont */

.project_wrap main section:not(.banner) h3 { font-size:34px; line-height:40px; }
.project_wrap main section:not(.banner) h3 span { font-weight:700; }
.project_wrap main .cont .swiper { margin-top:60px; }
.swiper-area{
	max-width:1280px;
	margin:0 auto;
	padding:45px 0;
}
.project_wrap main .cont .swiper-pagination {
    width: 100%;
    max-width: 1280px;
    height: 70px;
    top: 0;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.project_wrap main .cont .swiper-pagination-bullet {
    width: auto;
    min-width: 40px;
    flex: 1 1 0;
    height: 3px;
    border-radius: 0;
    margin: 0 2px;
    background: #c3c3c3;
    opacity: 1;
    transition: width 0.2s;
    display: inline-block;
}
.project_wrap main .cont .swiper-pagination-bullet-active { background:#000; }
.project_wrap main .cont .swiper-pagination-bullet span { width:100%; padding-top:15px; font-size:19px; color:#c3c3c3; display:inline-block; }
.project_wrap main .cont .swiper-pagination-bullet-active span { font-weight:700; color:#000; }

.project_wrap main .cont .cont1_swiper .swiper-pagination-bullet {background: #fff;}
.project_wrap main .cont .cont1_swiper .swiper-pagination-bullet-active { background:#ffcccc; }
.project_wrap main .cont .cont1_swiper .swiper-pagination-bullet span { color:#fff;}
.project_wrap main .cont .cont1_swiper .swiper-pagination-bullet-active span {color:#ffcccc; }

.project_wrap main .cont .cont2_swiper .swiper-pagination-bullet {background: #000;}
.project_wrap main .cont .cont2_swiper .swiper-pagination-bullet-active { background:#fff; }
.project_wrap main .cont .cont2_swiper .swiper-pagination-bullet span { color:#000;}
.project_wrap main .cont .cont2_swiper .swiper-pagination-bullet-active span {color:#fff; }

.project_wrap main .cont .swiper-wrapper .swiper-slide { margin-top:80px; position:relative; }
.project_wrap main .cont .swiper-wrapper .swiper-slide img { width:1280px;}


.project_wrap main .cont .swiper-wrapper .swiper-slide .text_box { position:absolute; top:60%; left:60px; transform:translateY(-50%); }
.project_wrap main .cont .swiper-wrapper .swiper-slide .text_box P.cont_tit { font-size:37px; font-weight:700; color:#000; }
.project_wrap main .cont .swiper-wrapper .swiper-slide .text_box P { margin-top:10px; font-size:17px; font-weight:700; color:#9A9A9A; }
.project_wrap main .cont .swiper-wrapper .swiper-slide .text_box button { margin-top:10px; border:0; font-size:17px; font-weight:700; color:#F77474; background:none; }
/* instagram */
.project_wrap main .instagram .instagram_top { display:flex; align-items:flex-end; }
.project_wrap main .instagram .instagram_top .more_btn { margin-left:120px; border:0; font-size:19px; font-weight:700; line-height:30px; background:none; }
.project_wrap main .instagram .instagram_btm { margin-top:60px; }
.project_wrap main .instagram .instagram_btm .swiper .swiper-wrapper .swiper-slide .image { height:0; padding-top:56.25%; position:relative; border-radius:12px; overflow:hidden; }
.project_wrap main .instagram .instagram_btm .swiper .swiper-wrapper .swiper-slide .image iframe { width:100%; height:100%; position:absolute; top:0; left:0; }
.project_wrap main .instagram .instagram_btm .swiper .swiper-wrapper .swiper-slide p.title { font-size:18px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; }
/* instagram feed style - pretty & responsive */
.project_wrap main .instagram .instagram_btm .swiper .swiper-wrapper .swiper-slide {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    background: #fff;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.project_wrap main .instagram .instagram_btm .swiper .swiper-wrapper .swiper-slide a {
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
    background: #f7f7f7;
}
.project_wrap main .instagram .instagram_btm .swiper .swiper-wrapper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 16px 16px 0 0;
    aspect-ratio: 1/1;
    max-width: 100%;
    max-height: 100%;
}
.project_wrap main .instagram .instagram_btm .swiper .swiper-wrapper .swiper-slide .caption {
    padding: 10px 12px;
    font-size: 0.95em;
    color: #333;
    background: #fff;
    min-height: 40px;
    border-top: 1px solid #eee;
    box-sizing: border-box;
    word-break: break-all;
}
.popup .nav.nav-tabs {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #ddd;
    padding: 0;
    margin: 0;
}
.popup .nav.nav-tabs li[role="presentation"] {
    flex: 1 1 0;
    text-align: center;
    margin: 0;
    padding: 0;
}
.popup .nav.nav-tabs li[role="presentation"] a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 0;
    border: none;
    background: none;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    border-radius: 0;
    height: 100%;
	line-height:16px;
	word-break: keep-all;
	overflow: hidden;
	text-overflow: clip;
}
.popup .nav.nav-tabs li.active a,
.popup .nav.nav-tabs li[role="presentation"].active a {
    color: #F77474;
    border-bottom: 2px solid #F77474;
    background: #fff;
}
.popup .btm {
    background: #000;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px 18px 28px;
    box-sizing: border-box;
    position: relative;
}
.popup .btm .left_box {
    display: flex;
    align-items: center;
}
.popup .btm .left_box label {
    color: #fff;
    font-size: 16px;
    margin-left: 8px;
    cursor: pointer;
}
.popup .btm .right_box {
    display: flex;
    align-items: center;
}
.popup .btm .close_btn_btm {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
}
.popup .btm .close_btn_btm img {
    width: 24px;
    height: 24px;
    filter: invert(1);
}
.content1{
	background-color:#cc3333;
}
.content2{
	background-color:#ced4d2;
}

.tab-content .tab-pane { display:none; }
.tab-content .tab-pane.active { display:block; }

@media only screen and (max-width:768px){
    /* banner */
    .project_wrap main .banner .main_banner_pagination { width:90%; margin-left:5%; bottom:25px; }
    .project_wrap main .sub_banner .sub_banner_swiper .sub_banner_pagination { width:90%; margin-left:5%; bottom:25px; }
    .project_wrap main .banner .swiper-wrapper .swiper-slide { height:100%; }
    .project_wrap main .banner .swiper-wrapper .swiper-slide .detail_btn { font-size:12px; bottom:40px; left:50%; transform:translateX(-50%); display:none; }
    .project_wrap main .banner .swiper-pagination-bullet { height:2px; display:inline-block; }
    /* cont */
    .project_wrap main section:not(.banner) { padding:70px 0 70px 5%; }
    .project_wrap main section:not(.banner) h3 { font-size:18px; line-height:20px; text-align:center; }
    .project_wrap main .cont .swiper { margin-top:20px; }
    .project_wrap main .cont .swiper-pagination { width:95%; height:40px; }
    .project_wrap main .cont .swiper-pagination-bullet { height:2px; }
    .project_wrap main .cont .swiper-pagination-bullet span { padding-top:10px; font-size:14px; }
    .project_wrap main .cont .swiper-wrapper .swiper-slide { margin-top:50px; }
    .project_wrap main .cont .swiper-wrapper .swiper-slide img { width:100%; }
    .project_wrap main .cont .swiper-wrapper .swiper-slide .text_box { left:20px; bottom:10px; top:auto; transform:none; }
    .project_wrap main .cont .swiper-wrapper .swiper-slide .text_box P.cont_tit { font-size:16px; }
    .project_wrap main .cont .swiper-wrapper .swiper-slide .text_box P { font-size:12px; margin-top:5px; line-height:14px; }
    .project_wrap main .cont .swiper-wrapper .swiper-slide .text_box button { font-size:12px; margin-top:3px; }
    .project_wrap main .cont.content1 .swiper-pagination-bullet:nth-child(1) { width:25%; }
    .project_wrap main .cont.content1 .swiper-pagination-bullet:nth-child(2) { width:30%; }
    .project_wrap main .cont.content1 .swiper-pagination-bullet:nth-child(3) { width:20%; }
    .project_wrap main .cont.content1 .swiper-pagination-bullet:nth-child(4) { width:25%; }
    .project_wrap main .cont.content2 .swiper-pagination-bullet:nth-child(1) { width:35%; }
    .project_wrap main .cont.content2 .swiper-pagination-bullet:nth-child(2) { width:20%; }
    .project_wrap main .cont.content2 .swiper-pagination-bullet:nth-child(3) { width:20%; }
    .project_wrap main .cont.content2 .swiper-pagination-bullet:nth-child(4) { width:25%; }
    /* instagram */
    .project_wrap main section.instagram { padding-top:0; }
    .project_wrap main .instagram .instagram_top { position:relative; justify-content:center; }
    .project_wrap main .instagram .instagram_top .more_btn { margin-left:0; font-size:12px; line-height:15px; position:absolute; bottom:0; right:5%; }
    .project_wrap main .instagram .instagram_btm .swiper .swiper-wrapper .swiper-slide .video { border-radius:5px; }
    .project_wrap main .instagram .instagram_btm .swiper .swiper-wrapper .swiper-slide p.title {font-size:14px;}
    .project_wrap main .instagram .instagram_btm { margin-top:30px; }    
}

.popup-background-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

.popup-background-mask.active {
    opacity: 1;
    visibility: visible;
}

.popup {
    position: fixed;
    z-index: 9999;
    transition: all 0.3s ease;
}

body.popup-open {
    overflow: hidden;
}

body.popup-open main {
    filter: blur(3px);
    transition: filter 0.3s ease;
}

body.popup-open main * {
    pointer-events: none;
}