265 lines
11 KiB
CSS
265 lines
11 KiB
CSS
|
/* 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%;
|
||
|
|
}
|
||
|
|
.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;
|
||
|
|
}
|