@charset "UTF-8";
/* html{overflow:hidden !important;} */
.teaser2{background:#000; height:100vh;}
.teaser2.ready {display: none;}

.teaser2 .section{position:relative; height:100vh; overflow:hidden;}
.teaser2 .section .img{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); height:100vh; width:100%; overflow:hidden;}
.teaser2 .t2_con1{/* position:fixed; */ width:100%; height:100vh; overflow:hidden;}
.teaser2 .t2_con1 #what-wedo-video {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: auto; height: auto; min-width: 100%; min-height: 100%;}
.teaser2 .t2_con1 #what-wedo-video-m {position: absolute; left: 0; top: 0;}
.teaser2 .t2_con1 .img {background: url(../images/t2-mainimg.jpg) center center/cover no-repeat;}
.teaser2 .t2_con1 .img{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); height:100vh; width:100%; overflow:hidden;}
.teaser2 .t2_con1 .txt{/*position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width: 80%;*/ padding-top:300px; color:#fff; z-index:2; opacity: 1;}
.teaser2 .t2_con1 .txt .txt1{position:relative; /* transform:translate(0, 100px); */ top: 150px; opacity:0; font-size:120px; font-family: 'neue-haas-unica', sans-serif; font-weight: 600;}
.teaser2 .t2_con1 .txt .txt2{position:relative; /* transform:translate(0, 100px); */ top: 150px; opacity:0; margin-top:20px; font-size:20px; font-family: 'neue-haas-unica', sans-serif; font-weight: 300;}
.teaser2 .t2_con1 a{position:absolute; bottom:60px; left:50%; transform:translate(-50%, 0%);} 
.teaser2 .swiper-slide {height: 100% !important;}
.teaser2 .swiper-slide .txt{position:absolute; top:50%; left:18%; transform:translate(0%, -50%); color:#fff; z-index:2;}
.teaser2 .swiper-slide .txt .txt1{position:relative; transform:translate(0, 100px); opacity:0; font-size:100px; font-family: 'neue-haas-unica', sans-serif; font-weight: 600; line-height:110px;text-shadow: 0 0 5px rgba(0,0,0,0.3);}
.teaser2 .swiper-slide .txt .txt2{position:relative; transform:translate(0, 100px); opacity:0; margin-top:35px; font-family: 'spoqa_regular', sans-serif; font-size:16px; /* font-weight:400; */ line-height:26px;text-shadow: 0 0 5px rgba(0,0,0,0.3);}

/* .teaser2 .swiper-container .number{position:absolute; bottom:60px; left:50%; transform:translate(-50%, 0%); width:138px; height:24px; z-index:10}
.teaser2 .swiper-container .number p{position:absolute; top:0px; left:0px; opacity:0;} */
.teaser-outer-swiper .teaser2 .swiper-pagination{display:block; position:relative; bottom:60px; font-size:0px;}
.teaser-outer-swiper .teaser2 .swiper-pagination:after{content:""; position:absolute; top:9px; left:50%; transform:translateX(-50%); width:60px; height:1px; background:#fff;}
.teaser-outer-swiper .teaser2 .swiper-pagination .swiper-pagination-current{position:relative; padding-left:10px; color:#fff; font-size:16px; line-height:1; font-family: 'neue-haas-unica', sans-serif; font-weight: 600;}
.teaser-outer-swiper .teaser2 .swiper-pagination .swiper-pagination-current:before{content:"0"; position:absolute; top:50%; left:0; transform:translateY(-50%);}
.teaser-outer-swiper .teaser2 .swiper-pagination .swiper-pagination-total{position:relative; margin-left:100px; padding-left:10px; color:#fff; font-size:16px; line-height:1; font-family: 'neue-haas-unica', sans-serif; font-weight: 600;}
.teaser-outer-swiper .teaser2 .swiper-pagination .swiper-pagination-total:before{content:"0"; position:absolute; top:50%; left:0; transform:translateY(-50%);}
.teaser2 .swiper-container{position:absolute; top:100vh; left:0; width:100%;}
.teaser2 .swiper-container .number{position:absolute; bottom:60px; left:50%; transform:translate(-50%, 0%); width:138px; height:24px; z-index:10}
.teaser2 .swiper-container .number p{position:absolute; top:0px; left:0px; opacity:0;}
.teaser2 .swiper-container .next{position:absolute; bottom:60px; left:5%; width:18px; height:108px; z-index:10;}
.teaser2 .swiper-container .next .txt{position:absolute; top:13px; left:0; width:18px; height:82px; overflow:hidden;}
.teaser2 .swiper-container .next .txt img{position:absolute; top:-102px; left:-1px;}
.teaser2 .swiper-container .next {position:absolute; bottom:60px; left:5%; width:18px; height:108px; z-index:10;}
.teaser2 .swiper-container .next .txt {position:absolute; top:13px; left:0; width:18px; height:82px; writing-mode: vertical-rl; overflow:hidden;}
.teaser2 .swiper-container .next .txt span {display: block; position:absolute; top:-102px; left:-1px; height: 65px; font-family: "spoqa_bold", sans-serif; /* font-weight: bold; */ font-size: 14px; color: #fff;}

.teaser2 .swiper-cover{display:none; position:absolute; bottom:0; left:0; width:100%; height:100vh; z-index:10;}


@media all and (max-width:1023px) {
    .teaser2 {height: auto;}
    .teaser2 .swiper-container {position: static; height: 0; overflow:hidden;}

    .teaser2 .t2_con1 {position: relative;}
    .teaser2 .t2_con1 a {display: none;}
    .teaser2 .t2_con1 .img {background: url(../images/t2-mainimg-mobile.jpg) center center/cover no-repeat;}
    .teaser2 .t2_con1 .txt {padding-top:180px; width: 100%;}
    .teaser2 .t2_con1 .txt .txt1 {font-size:84px;}
    .teaser2 .t2_con1 .txt .txt2 {}
    .teaser2 .swiper-slide .txt {left: 0; padding: 0 5%; width: 100%;}
    .teaser2 .swiper-slide .txt .txt1 {font-size:68px; line-height:74px;}
    .teaser2 .swiper-slide .txt .txt2 {margin-top: 30px; font-size: 16px; line-height: 26px;}
    .teaser2 .swiper-slide .txt .txt2 br {display: none;}
    .teaser2 .swiper-container .next {display: none;}
    .teaser-outer-swiper .teaser2 .swiper-pagination{bottom: 40px; opacity:0.6}
    .teaser-outer-swiper .teaser2 .swiper-pagination:after{top:7px; width:12px; height:1px;}
    .teaser-outer-swiper .teaser2 .swiper-pagination .swiper-pagination-current{padding-left:9px; font-size:14px;}
    .teaser-outer-swiper .teaser2 .swiper-pagination .swiper-pagination-total{margin-left:32px; padding-left:9px; font-size:14px;}

    /* .teaser2 .t2_con1 #what-wedo-video {display:none;}
    .teaser2 .t2_con1 #what-wedo-video-m {display:block;} */
    .teaser2 .t2_con1 #what-wedo-video-m {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: auto; height: auto; min-width: 100%; min-height: 100%;}

}

@media all and (max-width:767px){
	.teaser2 .t2_con1 .txt .txt1{font-size:48px;}
	.teaser2 .swiper-slide .txt .txt1{font-size:36px; line-height:40px;}
}