@charset "utf-8";

.main {padding:0 0 130px; overflow:hidden; background:url('/common/img/main/mainBg.jpg')no-repeat; background-position:center; background-size:cover;}
/*============================================================================================================
    파킹 페이지
============================================================================================================*/
.main .parking {position:relative; width:100%; height:auto; min-height:1015px;}
.main .parking .bgBox {position:absolute; top:0; left:0; width:100%; height:100%; background:url('/common/img/main/section01_bg.jpg')no-repeat center/cover;}
.main .parking .textBox {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; text-align:center;}
.main .parking .textBox .inner {max-width:100%; padding:0 94px;}
.main .parking .textBox h2 {font-size:165px; color:#fff; font-weight:400; font-family:'LAB디지털'; text-shadow:1px 1px 12px beige; margin:0 0 60px;}
.main .parking .textBox p {font-size:42px; color:#fff; font-family:'LAB디지털'; line-height:1.4;}

@media all and (max-width:1024px){
    .main {padding:0 0 80px;}
	.main .parking {height:calc(100vh - 70px); min-height:calc(100vh - 70px);}
	.main .parking .textBox .inner {padding:0 50px;}
	.main .parking .textBox h2 {font-size:130px; margin:0 0 45px;}
	.main .parking .textBox p {font-size:32px;}
}

@media all and (max-width:768px){
    .main {padding:0 0 8vw;}
	.main .parking .textBox .inner {padding:0 50px;}
	.main .parking .textBox h2 {font-size:20vw; margin:0 0 8vw;}
	.main .parking .textBox p {font-size:5vw;}
}


/*============================================================================================================
    파킹 페이지 - 영상
============================================================================================================*/
.video {height:100vh;}
.video video {width:100%; height:100vh; object-fit:cover;}

.maintit h5 {font-size:26px;}
.maintit h2 {font-size:65px;}

.main a.mainBtn {position:relative; display:inline-block; margin:55px 0 100px; padding:20px 75px; font-size:18px; color:#fff; border:1px solid rgba(255,255,255,0.4);}
.main a.mainBtn:before {content:''; position:absolute; top:-2px; left:-2px; display:block; width:13px; height:13px; border-top:3px solid #fff; border-left:3px solid #fff;}
.main a.mainBtn:after {content:''; position:absolute; bottom:-2px; right:-2px; display:block; width:13px; height:13px; border-bottom:3px solid #fff; border-right:3px solid #fff;}

@media all and (max-width:1200px){
    .video {padding:90px 0 0; height:100vh;}
    .video video {height:calc(100vh - 90px);}
}

@media all and (max-width:768px){
    .main a.mainBtn {margin:10vw 0 20vw; padding:3vw 10vw; font-size:3vw;}
    .main a.mainBtn:before {top:-2px; left:-2px; width:2.2vw; height:2.2vw;}
    .main a.mainBtn:after {bottom:-2px; right:-2px; width:2.2vw; height:2.2vw;}
}

/* section01 */
.section01 {padding:115px 0; text-align:center;}
.section01 .txtArea {margin-top:50px;}
.section01 .txtArea p {font-size:20px; line-height:1.65; color:#fff;}

.section01 .imginner {position:relative;}
.section01 .imgfloat ul:after {content:''; display:block; clear:both;}
.section01 .imgfloat ul li {float:left;}
.section01 .imgfloat ul li:first-child {width:calc(62.5% - 50px);}
.section01 .imgfloat ul li:last-child {width:37.5%; margin:115px 0 0 50px;}
.section01 .imgfloat ul li img {width:100%;}

.section01 .imgAb {position:absolute;}
.section01 .imgAb.imgAb01 {top:-390px; right:-460px;}
.section01 .imgAb.imgAb02 {bottom:-250px; left:-570px;}

@media all and (max-width:1300px){
    .section01 {padding:100px 0;}
    .section01 .txtArea {margin-top:50px;}
    .section01 .txtArea p {font-size:17px; line-height:1.8;}

    .section01 .imgfloat ul li:last-child {margin:80px 0 0 50px;}
    
    .section01 .imgAb {position:absolute;}
    .section01 .imgAb.imgAb01 {top:-30vw; right:-400px; width:70vw;}
    .section01 .imgAb.imgAb02 {bottom:-280px; left:-520px; width:83vw;}
}

@media all and (max-width:1024px){
    .section01 .imgfloat ul li:last-child {margin:50px 0 0 50px;}

    .section01 .imgAb {position:absolute;}
    .section01 .imgAb.imgAb01 {top:-26vw; right:-24vw; width:65vw;}
    .section01 .imgAb.imgAb02 {bottom:-18vw; left:-32vw; width:75vw;}
}

@media all and (max-width:768px){
    .section01 {padding:12vw 0;}
    .section01 .maintit img {width:50vw; max-width:330px;}
    .section01 .txtArea {margin-top:6vw;}
    .section01 .txtArea p {font-size:3vw;}
    .section01 .imgfloat ul li {float:left; width:auto;}
    .section01 .imgfloat ul li:first-child {width:calc(65% - 3vw);}
    .section01 .imgfloat ul li:last-child {width:35%; margin:10vw 0 0 3vw;}

}

/* section02 */
.section02 {padding:35px 0; text-align:center;}
.section02 .maintit {margin:0 0 50px;}
.section02 .pclist {display:block;}
.section02 .mobileSwiper {display:none;}

.section02 ul:after {content:''; display:block; clear:both;}
.section02 ul li {position:relative; float:left; width:30%; margin-right:5%; height:620px;}
.section02 ul li:last-child {margin-right:0;}
.section02 ul li .bg {width:100%; height:100%;}
.section02 ul li .bg img {width:100%; height:100%;}

.section02 ul li .imgBox {position:absolute; top:95px; right:-16px; left:0; text-align:center;}
.section02 ul li:first-child .imgBox {left:-50px;}
.section02 ul li .txtBox {position:absolute; top:390px; left:0; right:0;}

.main .section02 a.mainBtn {margin:90px 0 0;}

@media all and (max-width:1480px){
    .section02 ul li {height:auto;}
    .section02 ul li .imgBox {top:10%; right:10px; left:20px;}
    .section02 ul li:first-child .imgBox {left:20px;}
    .section02 ul li:nth-child(2) .imgBox img {width:60%;}

    .section02 ul li .txtBox {top:56%; left:20px; right:20px;}
}

@media all and (max-width:768px){
    .section02 {padding:2vw 0 6vw;}
    .section02 .maintit img {width:60vw; max-width:437px;}
    .section02 .maintit {margin:0 0 6vw;}
    .section02 .pclist {display:none;}
    .section02 .mobileSwiper {display:block;}
    .section02 ul li .imgBox {top:14%; bottom:42%; right:0; left:0;}
    .section02 ul li:nth-child(2) .imgBox img {width:100%;}
    .section02 ul li .imgBox img {height:auto; width:100%;}
    .section02 ul li .imgBox.small img {height:auto; width:60%;}
    .section02 ul li .txtBox {top:56%; left:5vw; right:5vw;}

    .main .section02 a.mainBtn {margin:8vw 0 0;}
}

/* section03 */
.section03 {padding:145px 0 0; text-align:center;}
.section03 .floatBox {margin:65px 0 0; height:690px;}
.section03 .floatBox:after {content:''; display:block; clear:both;}
.section03 .floatBox > div {float:left; width:calc(50% - 10px); margin-right:20px;}
.section03 .floatBox .rightBox {margin:0; height:100%;}

.section03 .floatBox .leftBox {height:100%;}
.section03 .floatBox .leftBox .bg {position:relative; width:100%; height:100%; overflow:hidden;}
.section03 .floatBox .leftBox .bg img {position:absolute; height:100%; max-width:none; left:50%; transform:translate(-50%,0);}
.section03 .floatBox .leftBox a {display:block; width:100%; height:100%;}
.section03 .floatBox .leftBox .textBox {position:absolute; bottom:60px; left:65px; text-align:left; color:#fff;}
.section03 .floatBox .leftBox .textBox p {font-size:18px;}
.section03 .floatBox .leftBox .textBox h2 {font-size:50px; font-weight:400;}

.section03 .floatBox .rightBox .board {width:100%; height:338px; padding:28px 40px 50px; text-align:left; background:#121212;}
.section03 .floatBox .rightBox .board ul li {margin:0 0 6px; border-bottom:1px solid #898989;}
.section03 .floatBox .rightBox .board ul li:after {content:''; display:block; clear:both;}
.section03 .floatBox .rightBox .board ul li:last-child {margin:5px 0 0;}
.section03 .floatBox .rightBox .board ul li a {display:block; line-height:58px; font-size:17px; color:#fff;}
.section03 .floatBox .rightBox .board ul li a span.subtit {display:inline-block; margin:0 15px 0 0; font-weight:600; color:#cda96e;}
.section03 .floatBox .rightBox .board ul li a span.day {float:right; font-family:'Montserrat'; font-size:15px; color:#8c8c8c;}

.section03 .floatBox .rightBox .ytView {margin:14px 0 0; width:100%; height:338px;}

@media all and (max-width:1350px){
    .section03 .floatBox > div {width:auto; margin-right:20px;}
    .section03 .floatBox .leftBox {width:calc(45% - 20px); height:100%;}
    .section03 .floatBox .rightBox {width:55%;}

    .section03 .floatBox .leftBox .textBox {bottom:40px; left:45px;}
    .section03 .floatBox .rightBox .board {padding:28px 20px 50px;}
    .section03 .floatBox .rightBox .board ul li a {font-size:15px;}
    .section03 .floatBox .rightBox .board ul li a span.day {font-size:13px;}
}

@media all and (max-width:1024px){
    .section03 {padding:100px 0 0;}
    .section03 .floatBox {margin:50px 0 0; height:auto;}
    .section03 .floatBox > div {width:auto; margin-right:0;}
    .section03 .floatBox .leftBox {width:100%; height:570px;}
    .section03 .floatBox .leftBox .bg img {position:absolute; height:auto; width:100%; max-width:100%; left:50%; transform:translate(-50%,0);}
    .section03 .floatBox .rightBox {width:100%; height:auto; margin:20px 0 0;}
    .section03 .floatBox .rightBox .board {height:auto;}
    .section03 .floatBox .rightBox .ytView {margin:20px 0 0; width:100%; height:338px;}
}

@media all and (max-width:768px){
    .section03 {padding:8vw 0 0;}
    .section03 .maintit img {width:33vw; max-width:248px;}
    .section03 .floatBox {margin:6vw 0 0;}
    .section03 .floatBox .leftBox {width:100%; height:auto;}
    .section03 .floatBox .leftBox .bg {position:relative; width:100%; overflow:hidden;}
    .section03 .floatBox .leftBox .bg img {position:static; width:100%; height:auto; left:0; transform:translate(0);}
    .section03 .floatBox .leftBox .textBox {bottom:5vw; left:6vw;}
    .section03 .floatBox .leftBox .textBox p {font-size:3.2vw;}
    .section03 .floatBox .leftBox .textBox h2 {font-size:6vw;}

    .section03 .floatBox .rightBox {margin:3vw 0 0;}
    .section03 .floatBox .rightBox .board {padding:4vw 4vw 6vw;}
    .section03 .floatBox .rightBox .board ul li {margin:0;}
    .section03 .floatBox .rightBox .board ul li:last-child {margin:0;}
    .section03 .floatBox .rightBox .board ul li a {line-height:10vw; font-size:2.8vw;}
    .section03 .floatBox .rightBox .board ul li a span.subtit {margin:0 1.5vw 0 0;}
    .section03 .floatBox .rightBox .board ul li a span.day {font-size:2.4vw;}
    .section03 .floatBox .rightBox .ytView {margin:3vw 0 0; height:50vw;}

}