@charset "utf-8";
/*防止选取 <div> 元素的文本*/
*{ -moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;-khtml-user-select: none;}
input{ -moz-user-select: auto;-webkit-user-select: auto;-ms-user-select: auto;-khtml-user-select: auto;}
html{width: 100%; background-color: #fff;}
body{ width: 100%;  position: relative; background: #fff;  overflow: hidden}
html,body{ 
    /*font-family: "source-han-serif-sc", serif;*/ font-weight: 400; font-style: normal;
    scrollbar-width:none!important; 
    overflow:-moz-scrollbars-none!important;
    -ms-overflow-style: none!important;
    scrollbar-color: transparent transparent;
    scrollbar-track-color: transparent;
    -ms-scrollbar-track-color: transparent;
}
body::-webkit-scrollbar { width: 0px!important;}
img.lazy {opacity: 0;transition: opacity 300ms;}
img.lazy.loaded {opacity: 1;}
.onloadshow{ visibility: hidden;}
.onloadshowbox .onloadshow{ visibility: visible;}

h3,h2,h1{ font-family: "Playfair Display", Georgia, serif; }


.casebox{width: 100%; height: 100vh; position: relative;}
.casebox>.case-about-box,.casebox>.case-photo-box{ width: 50%; height: 100%; position: relative; float: left; overflow: hidden;}
.casebox>.case-photo-box{ background-color: #282c35; }
.casebox>.case-point{ display: block; width: 80px; height: 80px; line-height: 80px; text-align: center; background-color: #fff; position: absolute; top:50%; margin-top: -40px; left: 50%; margin-left: -8px; transform: rotate(45deg); border-radius: 20%;}
.casebox>.case-point>i{ font-size: 12px; transform: rotate(-225deg) translate(32px,0); display: block; font-weight: 200; color: #ccc;}
.casebox>.case-about-box{ z-index: 2; float: right;}
.casebox>.case-about-box>div{ margin: auto; padding: 0 10%;}
.casebox>.case-about-box .case-info{ text-align: left;}
.casebox>.case-about-box .case-info h2{font-size: 40px; font-weight: 700; letter-spacing: 2px;}
.casebox>.case-about-box .case-info p{margin-bottom: 1.5em; font-weight: 400; color: gray; font-size: 16px}
.btn-view{font-size: 13px;letter-spacing: 2px;color: #000;text-transform: uppercase;border: 1px solid #000;padding: 7px;text-decoration: none; display: inline-block; margin-bottom: 5px;}
a:hover{ color: #000;}

.bold {position: absolute; top: 3%; left: 5%; font-size: 13vw; color: #f0f0f0;font-weight: 700; opacity: .4; z-index: -1;}

.casebox .case-info{ text-align: right;}
.outer-swiper>.swiper-wrapper>.swiper-slide:nth-child(odd)>.casebox .case-info{ text-align: right;}
.outer-swiper>.swiper-wrapper>.swiper-slide:nth-child(odd)>.casebox >.case-about-box{ float: left;}
.outer-swiper>.swiper-wrapper>.swiper-slide:nth-child(odd)>.casebox >.case-point{ margin-left: -72px;}
.outer-swiper>.swiper-wrapper>.swiper-slide:nth-child(odd)>.casebox >.case-point>i{ transform: rotate(-45deg) translate(28px,0);}
.outer-swiper>.swiper-wrapper>.swiper-slide:nth-child(odd)>.casebox .bold{ left: 5%; }

.swiper { width: 100%;  height: 100vh;}
.swiper-slide { position: relative;}
.swiper-pagination-bullet {
  width: 20px;
  height: 3px;
  display: inline-block;
  border-radius: 0;
  background: #000;
  opacity: .2;
}
.swiper-pagination-bullet-active{opacity: 1; background-color: #000;}
.inner-swiper-pagination{ margin-top: 6%;}
.inner-swiper{ display: none;}

.case-photo-box>div{ width: 100%; height: 100%;}
.case-photo-box .swiper{ width:40%; height: auto; margin-left: 30%;}
.case-photo-box .swiper-wrapper{ width:100%; height: auto;}
.case-photo-box .swiper-slide{ width: 100%; height: auto;}
.case-photo-box .swiper-slide img{ display: block; margin: 0; padding: 0; width: 100%; margin: auto; height: auto; position: relative;}
.case-photo-box .swiper-slide img.imgshow{ position: absolute; top:0; left: 0;}
.case-photo-box .swiper-slide img.imgbox{ z-index: 2;}
.caseh5show{ width: 100%; height: auto; position: absolute; z-index: 1; bottom:0; left: 0;}
.caseh5show>img{ display: block; position: relative; z-index: 2; margin: 0; padding: 0; width: 100%; height: auto; float: left;}
.caseh5show>iframe{ display: block; width: 100%; height: 100%; border: 0; position: absolute; bottom:0; left: 0; z-index: 0; line-height:normal; visibility: hidden;}
.caseh5show>i{ display: block; background-color: rgb(0, 0, 0,.5); position: absolute; bottom:10px; right:10px; z-index: 3; color: #fff; font-size: 12px; font-style: initial; padding: 5px 10px; border-radius: 5px; opacity: .6;}

.header{ position: absolute; top:0; left: 0; width: 100%; z-index: 3; text-align: left; box-sizing: border-box; padding: 10px 5%;}
.header .colorlib-logo {
    font-size: 24px;
    text-transform: uppercase;
    color: #000;
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    letter-spacing: 10px;
    display: inline-block;
    text-align: left;  padding: 30px 10px; opacity: .9;
}
.footer{ position: absolute; bottom:0; left: 0; width: 100%; z-index: 3; text-align: left; box-sizing: border-box; padding: 10px 5%; font-size: 13px; color: gray;}
.footer a{  color: gray;}

.footerbox{ width: 100%; height: 100%; text-align: center; position: relative;}
.footerbox>div{width: 100%; height: 100%;  position: relative;}
.footer-about{ width: 100%; top:50%; position: absolute; margin-top: -200px;}
.footer-about>h2{ font-weight: 700; font-size: 40px;}
.footer-about>p{color: gray;}
.footer-bq{color: #1a1a1a;font-size: 14px; line-height: 1.8;}    
.footer-bq a{ color: #1a1a1a;}
.footer-container{ width: 100%; max-width: 1600px; margin: auto; margin-bottom: 100px;}
.footer-container h2{color: #000;letter-spacing: 1px;margin-bottom: 2em; font-weight: 700;font-size: 18px;text-transform: uppercase;}
.footer-container a{color: #1a1a1a;}
.footer-cqq{ width: 100%; position: absolute; left: 0; bottom:4%}
.colorlib-social-icons i.iconfont{ display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; border: 1px solid #000; border-radius: 100%; font-size: 24px;}
.colorlib-social-icons i.iconfont:hover{ background-color: #000; color: #fff;}

/*===================================*/
@media screen and (max-width: 1780px){
}
@media screen and (max-width: 1680px){
}
@media screen and (max-width: 1600px){
}
@media screen and (max-width: 1445px){
}
@media screen and (max-width: 1366px){
}
@media screen and (max-width: 1280px){
}
@media screen and (max-width: 1080px){ /*ipad*/
}
@media screen and (max-width: 1024px){
}
@media screen and (max-width: 800px){
}