.header {background:rgba(255,255,255,0); filter: invert(1);}
.headroom--not-top {background:#fff; filter:invert(0);}
.wid {max-width:1700px; margin:0 auto; padding:0 60px;}
.header .logo img {filter:brightness(0);}
.headroom--not-top .logo img {filter:initial;}

@media screen and (max-width:1200px) {
	.wid {padding:0 25px;}
}

.main .sec1 {width:100%; height:100vh; min-height:850px; position: relative; overflow: hidden;}
.main .sec1 .down_arrow {position: absolute; left:0; bottom:0; border:none; background:none; z-index: 2;}
.main .sec1 .down_arrow img {width:45px;}
.main .sec1 .swiper {width:100%; height:100%; }
/*.main .sec1 .swiper:after {content:''; position: absolute; right:30%; height:100%; width:1px; background:rgba(255,255,255,.15); z-index: 1; top:0;}*/
.main .sec1 .swiper:before {content:''; position: absolute; left:0; width:100%; height:1px; background:rgba(255,255,255,.15); bottom:210px; z-index: 2;}
.main .sec1 .swiper .swiper-slide {width:100%; height:100%; position: relative;}
.main .sec1 .swiper .swiper-slide .img {position: absolute; left:0; top:0; transform:scale(1); width:100%; height:100%; transition: transform 4s ease;}
.main .sec1 .swiper .swiper-slide-active .img,
.main .sec1 .swiper .swiper-slide-duplicate-active .img {transform:scale(1.15);}
.main .sec1 .posi {max-width:1700px; padding:0 60px; position: absolute; left:50%; top:260px; transform: translate(-50%,0); z-index: 1; width:100%; height:calc(100% - 250px);}
.main .sec1 .posi h2 {font-size:58px; color:#fff; font-weight:700; height:138px; padding-top:138px; animation: txtfade 1.5s ease-in-out forwards; overflow: hidden;}
.main .sec1 .posi h2 .mo {display: none;}
@keyframes txtfade {
  0% {
    padding-top:138px;
  }
  100%{
    padding-top:0;
  }
}

.main .sec1 .posi p {margin-top:30px; font-size:18px; color:#fff; font-weight:200; line-height:1.55em; padding-left:2px; animation: txtfade2 1.5s ease-in-out forwards; overflow: hidden; height:56px; padding-top:56px; animation-delay:1s}
@keyframes txtfade2 {
  0% {
    padding-top:56px;
  }
  100%{
    padding-top:0;
  }
}

.main .sec1 .posi .page_box {position: relative; width:255px; height:60px; padding:28px 40px; margin-top:35px; opacity: 0;  animation: opacfade 1.0s ease-in-out forwards; animation-delay:2.2s}
@keyframes opacfade {
  0% {
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
.main .sec1 .swiper-pagination {position: relative !important; height:2px; background:rgba(255,255,255,.2); bottom:0 !important; top:0 !important}
.main .sec1 .swiper-pagination-bullet {float:left !important; margin:0 !important; width:calc(100% / 3) !important; height:2px !important; background:rgba(255,255,255,0) !important; border-radius:0 !important; transition: .5s;}
.main .sec1 .swiper-pagination-bullet-active {background:#fff !important; opacity:1 !important; }
.main .sec1 .posi .page_box .first_txt {position: absolute; left:3px; top:19px; font-size:17px; color:#fff; font-weight:300;}
.main .sec1 .posi .page_box .last_txt {position: absolute; right:3px; top:19px; font-size:17px; color:#fff; font-weight:300;}

.main .sec1 .posi .quick {position: absolute; left:60px; bottom:0px; max-width:calc(70vw - 140px); width:100%; /*animation: quickfade 1.5s ease-in-out forwards; animation-delay:2.5s*/}
@keyframes quickfade {
  0% {
    bottom:-220px;
  }
  100%{
    bottom:0;
  }
}
.main .sec1 .posi .quick button {height:220px; border:none; background:url('../img/quick_bt.svg')no-repeat center right 60px; text-align: left; width:50%; float:left; border-left:1px solid rgba(255,255,255,.15); color:#fffffff0; font-size:15px; letter-spacing: .3px; font-weight:200; padding-left:60px; padding-bottom:5px; transition: .5s;}
.main .sec1 .posi .quick button:hover {background:url('../img/quick_bt.svg')no-repeat center right 60px rgba(0,0,0,.3);}
.main .sec1 .posi .quick button b {font-size:20px; color:#fff; font-weight:600; margin-bottom:12px; display: inline-block; width:100%;}
.main .sec1 .posi .quick button:last-child {border-right:1px solid rgba(255,255,255,.15);}



.main .sec1 .scroll {position: absolute; left:30px; bottom:30px; height:60px; border-left:3px solid rgba(255,255,255,.22); z-index: 1;}
.main .sec1 .scroll span {position: absolute; left:-3px; top:0; width:3px; height:20px; background:#fff; animation: scrollMove 2.5s ease-in-out infinite;}
.main .sec1 .scroll p {padding-left:12px; font-size:10px; color:#fff; font-weight:300; padding-top:33px; letter-spacing: .3px;}
@keyframes scrollMove {
  0% {
    top:0;
  }
  10% {
  }
  50% {
    top:40px;
  }
  90%{
  }
  100%{
    top:0;
  }
}

.main .sec1 .qna_bt {position: absolute; right:-70px; bottom:0; z-index: 1; border:none; background:none; animation: btfade 1.0s ease-in-out forwards;}
@keyframes btfade {
  0% {
    right: -70px;
  }
  100%{
    right:0;
  }
}








.sec2 {background:url('../img/sec2_bg.png')no-repeat top center; background-size:cover;  padding:140px 0 100px 0; position: relative;}
.sec2 h1 {font-size:165px; color:#f6f6f6; top:15px; left:50%; transform: translate(-50%,0); position: absolute; z-index: -1;}
.sec2 h2 {font-size:50px; color:#111; font-weight:300;  text-align: center;}
.sec2 h2 b {font-weight:700;}
.sec2 h3 {font-size:18px; text-align: center; color:#222; margin-top:25px; line-height:1.4em; font-weight:300; position: relative;}
.sec2 h3:after {content:''; position: absolute; left:50%; width:68px; height:4px; background:#efefef; transform: translate(-50%,0); bottom:-37px;}
.sec2 h3:before {content:''; position: absolute; left:calc(50% - 17px); width:34px; height:4px; background:#222;  transform: translate(-50%,0); bottom:-37px; z-index: 1;}

.sec2 .box {margin-top:80px;}
.sec2 .box:after {content:''; clear:both; display: table}
.sec2 .box div {float:left ; height:245px; border-radius:20px; width:calc((100% - 75px) / 4); margin-right:25px; margin-bottom:25px; background:url('../img/sec2_img5.jpg')no-repeat top right; background-size:cover; padding:35px; position: relative;}
.sec2 .box div:nth-child(4n) {margin-right:0;}
.sec2 .box div.img1 {background:url('../img/sec2_img1.jpg')no-repeat center ;background-size:cover;}
.sec2 .box div.img2 {background:url('../img/sec2_img2.jpg')no-repeat center ;background-size:cover;}
.sec2 .box div.img3 {background:url('../img/sec2_img3.jpg')no-repeat center ;background-size:cover;}
.sec2 .box div.img4 {background:url('../img/sec2_img4.jpg')no-repeat center ;background-size:cover;}

.sec2 .box div span {display: inline-block; width:100%; font-size:15px; color:#ccc;}
.sec2 .box div b {display: inline-block; width:100%; margin-top:6px; color:#222; font-weight:600; font-size:21px;}
.sec2 .box div p {position: absolute; left:35px; bottom:35px; width:calc(100% - 70px); font-size:15px; color:#555; font-weight:400; line-height:1.4em;}










.sec3 {position: relative; margin-bottom:85px;}
.sec3:after {content:''; clear:both; display: table;}
.sec3 .box1 {float:left; width:750px; height:450px; margin-right:-150px; border-radius:0 45px 0 0; background:url('../img/sec3_img.jpg')no-repeat center; background-size:cover; position: relative; z-index: 1;}
.sec3 .box1 .posi {width:215px; height:93px; border-radius:0 0 15px 15px; background:#111; color:#fff; line-height:90px; text-align: center;  font-size:13px;  font-weight:500; letter-spacing:1.2px; position: absolute; right:150px; bottom:-92px;}
.sec3 .box2 {float:right; width:calc(100% - 600px); background:#f5f5f5; padding:72px 0 75px 240px; margin-top:60px; position: relative;}
.sec3 .box2 .cont {max-width:700px; width:100%; position: relative;}
.sec3 .box2 .cont:after {content:''; position: absolute; right:0; bottom:-75px; height:calc(100% + 100px); width:1px; background:#ebebeb;}
.sec3 .box2 h3 {font-size:20px; color:#222; font-weight:800;}
.sec3 .box2 h2 {font-size:42px; color:#111; margin-top:17px; font-weight:300; line-height:1.2em; margin-left:-2px;}
.sec3 .box2 h2 b {font-weight:700;}
.sec3 .box2 p {font-size:16px; color:#222; margin-top:20px; line-height:1.45em;}
.sec3 .box2 span {position: absolute; right:0; top:-42px; font-size:13px; color:#111; font-weight:600; right:35px;}
.sec3 .box2 span:after {content:''; position: absolute; right:-50px; top:-50px;width:32px; height:66px; border:5px solid #111;}
.sec3 .box2 .bt_box {max-width:360px; width:100%; margin-top:30px; margin-left:-3px;}
.sec3 .box2 .bt_box:after {content:''; clear:both; display: table;}
.sec3 .box2 .bt_box button {float:left; width:calc((100% - 10px) / 2); height:42px; border-radius:50px; border:1px solid #111; background:none; font-size:15px; color:#111; padding:0 13px 0 17px; text-align: left; font-weight:500;}
.sec3 .box2 .bt_box button:last-child {margin-left:10px;}
.sec3 .box2 .bt_box button img {margin:-2px 0 0 10px;}







@media screen and (max-width:1500px) {
	.main .sec1 .swiper:before {bottom:150px;} 
	.main .sec1 .posi .quick {max-width:initial; width:calc(100% - 70px); left:0;}
	.main .sec1 .posi .quick button {height:160px;}

	.sec2 {padding:110px 0 80px 0; }
	.sec2 h1 {font-size:135px;}
	.sec2 h2 {font-size:45px;}
	.sec2 h3 {margin-top:20px;}
	.sec2 .box div p br {display: none;}

	.sec3 .box1 {width:560px;}
	.sec3 .box2 {width:calc(100% - 410px);}
	.sec3 .box2 span {right:85px; }
}

@media screen and (max-width:1280px) {
	.main .sec1 .posi p br {display: none;}

	.sec2 .box {max-width:850px; margin:80px auto 0 auto;}
	.sec2 .box div:nth-child(1), .sec2 .box div:nth-child(3), .sec2 .box div:nth-child(6), .sec2 .box div:nth-child(8) {display: none;}
	.sec2 .box div {width:calc((100% - 30px) / 2); margin-right:30px;}
	.sec2 .box div:nth-child(4), .sec2 .box div:nth-child(7) {margin-right:0;}


	.sec3 {margin-bottom:0;}
	.sec3 .box1 {width:90%;  height:250px; margin-right:0;}
	.sec3 .box1 .posi {left:0; bottom:0; border-radius:0 20px 0 0;}
	.sec3 .box2 {width:100%; margin-top:-170px; padding:230px 0 75px 80px; border-radius:0;}
	.sec3 .box2 span {right:85px;}
	.sec3 .box2 .cont {max-width:initial;}
}

@media screen and (max-width:1024px) {
	.main .sec1 .swiper:before {bottom:140px;} 
	.main .sec1 .posi {top:170px; height:calc(100% - 170px)}
	.main .sec1 .posi h2 {font-size:44px; height:105px}
	.main .sec1 .posi p {margin-top:22px;}
	.main .sec1 .posi .page_box {margin-top:25px;}

	.main .sec1 .posi .quick {width:calc(100% - 55px);}
	.main .sec1 .posi .quick button {height:140px; padding-left:40px; font-size:14px; background-size:35px; background-position: center right 30px;}
	.main .sec1 .posi .quick button b {font-size:18px; margin-bottom:9px;}

	.main .sec1 .qna_bt img {width:55px;}


	.sec2 h3 {font-size:15px;}
}

@media screen and (max-width:767px) {
	.main .sec1 {min-height:680px; height:100svh;}
	.main .sec1 .posi {top:115px; height:calc(100% - 115px); padding:0 30px;}
	.main .sec1 .posi h2 {font-size:29px;}
	.main .sec1 .posi h2 .mo {display: block;}
	.main .sec1 .posi p {margin-top:17px; font-size:14px; height:60px;}
	.main .sec1 .posi .page_box {margin-top:10px;}
	.main .sec1 .posi .page_box .first_txt {font-size:15px;}
	.main .sec1 .posi .page_box .last_txt {font-size:15px;}
	.main .sec1 .posi .page_box {padding:27px 40px;}
	.main .sec1 .swiper .swiper-slide:nth-child(2) .img {background-position: center right -360px !important;}

	.main .sec1 .swiper:before {content:none;} 
	.main .sec1 .posi .quick {width:calc(100% - 45px);}
	.main .sec1 .posi .quick button {width:100%; border:none; border-top:1px solid rgba(255,255,255,.15); height:130px; font-size:12px; height:90px; padding-bottom:0; padding-left:30px; background-size:25px; background-position: center right 20px;}
	.main .sec1 .posi .quick button b {font-size:15px; margin-bottom:6px;}
	.main .sec1 .qna_bt {animation: none; right:0;}

	.main .sec1 .qna_bt img {width:45px;}

	.sec2 {padding-top:69px; padding-bottom:35px;}
	.sec2 h1 {font-size:75px;}
	.sec2 h2 {font-size:27px;}
	.sec2 h3 {font-size:13px; margin-top:15px;}
	.sec2 h3:after {bottom:-27px;}
	.sec2 h3:before {bottom:-27px;}
	.sec2 .box {margin-top:53px;}
	.sec2 .box div {width:calc((100% - 10px) / 2); margin-right:10px; margin-bottom:10px; padding:20px; height:185px;}
	.sec2 .box div span {font-size:12px;}
	.sec2 .box div b {font-size:15px;}
	.sec2 .box div p {left:20px; bottom:20px; font-size:13px; width:calc(100% - 40px);}

	.sec3 .box1 {height:150px; border-radius:0 25px 0 0;}
	.sec3 .box1 .posi {width:155px; height:66px; font-size:11px; line-height:68px;}
	.sec3 .box2 {padding:151px 25px 50px 30px; margin-top:-110px;}
	.sec3 .box2 span {display: none;}
	.sec3 .box2 h3 {font-size:16px;}
	.sec3 .box2 h2 {font-size:27px; margin-top:8px;}
	.sec3 .box2 p br {display: none;}
	.sec3 .box2 p {font-size:14px;  margin-top:35px; letter-spacing: -.3px; position: relative;}
	.sec3 .box2 p:after {content:''; position: absolute; left:1px; top:-18px; width:30px; height:2px; background:#111;}
	.sec3 .box2 .bt_box {margin-top:22px;}
	.sec3 .box2 .bt_box button img {display: none;}
	.sec3 .box2 .bt_box button { padding:0; text-align: center; font-size:14px; height:38px; }
	.sec3 .box2 .cont:after {content:none;}
}