@charset "UTF-8";

/* 공통 */
.title h1{font-size: 3.7vw; color: #fff;}
.title p{font-size: 0.95vw; color: #fff;}

.btn{background: #fff; padding: 0.5vw 0.75vw; margin-top: 2vw; width: 30%; box-sizing: border-box; max-width: 180px; height: auto !important;}
.btn a{display: flex; justify-content: space-between; align-items: center;}
.btn a span{font-size: 0.9vw; font-weight: 600 !important; color: #151515;}
.btn a .arrow{max-width: 16px; width: 0.85vw;}
.btn a .arrow img{width: 100%;}

/* 메인 */
main{background: url(../image/main/main_bg.jpg) no-repeat center / cover; width: 100%; height: 100vh; box-sizing: border-box; position: relative;}
main .con_wrap{position: absolute; top: 25%; right: 12.5%; color: #fff;}
main .con_wrap .text h2{font-size: 2.5vw; font-weight: bold; letter-spacing: -2px; line-height: 1;}
main .con_wrap .text h2 span{line-height: 1;}
main .con_wrap .text h2 .arrow{width: clamp(25px, 2.34375vw, 40px); margin-left: 10px;}
main .con_wrap .text p{font-size: 1.3vw; font-weight: 400; opacity: 0.9;}
main .con_wrap .text h1{font-size: 3.5vw; font-weight: 800; letter-spacing: -4px; line-height: 1; margin: 20px 0 10px;}
main .con_wrap .text h1 span{color: #156aff; line-height: 1.2;}
main .con_wrap .text h3{margin-bottom: 15px;width:70vh;}
main .con_wrap .text h3 > img {width: 100%;object-fit: cover;}
main .con_wrap .btn_wrap{display: flex;}
main .con_wrap .btn_wrap .btn{max-width: 250px; width: 40%; padding: 0.75vw;}
main .con_wrap .btn_wrap .btn:nth-child(1){background: #fff;}
main .con_wrap .btn_wrap .btn:nth-child(2){background: #111; margin-left: 3%;}
main .con_wrap .btn_wrap .btn:nth-child(2) a span{color: #fff; font-weight: 400 !important;}

/* 메인 하단 */
#main_bt ul{display:flex; max-width: 1600px; width: 100%; justify-content: space-between; margin: 0 auto; padding: 2.5vw 0; text-align: center;}
#main_bt ul li{border-right: 1px solid rgba(0, 0, 0, 0.3); width: 25%; box-sizing: border-box;}
#main_bt ul li:last-child{border: none;}
#main_bt ul li .icon{max-width: 61px; margin: 0 auto;}
#main_bt ul li .icon img{width: 100%;}
#main_bt ul li h3{display: inline-block; margin: 0.25vw 0;}
#main_bt ul li h3 a{display: flex; align-items: center;}
#main_bt ul li h3 a span{font-size: 0.9vw; margin-right: 1vw;}
#main_bt ul li h3 a img{max-width: 6px; width: 100%;}
#main_bt ul li p{font-size: 0.8vw; font-weight: 500; opacity: 0.7;}

/* 이벤트 */
#event{background: url(../image/main/event_bg.jpg) no-repeat center / cover; width: 90vw; margin: 0 auto; text-align: center; padding: 10vw 5vw 7.5vw;
	   box-sizing: border-box;}
#event .title{margin-bottom: 2vw;}
#event .event_swiper{width: 60vw; padding-bottom: 5vw;;}
#event .event_swiper .swiper-wrapper .swiper-slide{display: flex;}
#event .event_swiper .swiper-wrapper .swiper-slide .img{background: #303543; width: 60%; height: 22vw; background-size: cover; background-position: center;
														background-repeat: no-repeat;}

#event .event_swiper .swiper-wrapper .swiper-slide .text{background: #303543; text-align: left; width: 40%; display:flex; flex-direction: column;
														 justify-content: center; padding: 0 2.5vw; box-sizing: border-box; height: 22vw; color: #fff;}
#event .event_swiper .swiper-wrapper .swiper-slide .text h1{font-size: 2.2vw; line-height: 1; font-weight: 600;}
#event .event_swiper .swiper-wrapper .swiper-slide .text h1 span{display: block;}
#event .event_swiper .swiper-wrapper .swiper-slide .text p{font-size: 0.9vw; margin-top: 0.5vw; line-height: 1.8; font-weight: 300; opacity: 0.7;}
#event .event_swiper .swiper-wrapper .swiper-slide .text .btn{background: #fff; width: 40%; margin-top: 1.5vw;}
#event .event_swiper .swiper-wrapper .swiper-slide .text .btn a span{color: #303543;}
.swiper-pagination .swiper-pagination-bullet{background: #fff; width: 30px; height: 4px; border-radius: 5px;}

/* 서비스 */
#service{padding: 0 10vw; margin: 7.5vw 0;}
#service .title h1{color: #151515; line-height: 1.2;}
#service .title p{color: #151515;}
#service .title{margin-bottom: 2vw;}
#service .service_wrap{display: flex; justify-content: space-between; width: 100%; margin: 0 auto;}
#service .service_wrap li{background: #121212; color: #fff; width: 49%; padding: 3vw 2.5vw 10vw 4vw; box-sizing: border-box;}
#service .service_wrap li:nth-child(1){background: url(../image/main/service_img01.jpg) no-repeat center / cover;}
#service .service_wrap li:nth-child(2){background: url(../image/main/service_img02.jpg) no-repeat center / cover;}
#service .service_wrap li h2{font-size: 2.5vw;}
#service .service_wrap li p{font-size: 0.95vw; font-weight: 400;}

/* 베이스캠프 */
#base{position: relative;}
#base .con_wrap{position: absolute; top: 20%; left: 17%; z-index: 1;}
#base .con_wrap .title h2{font-size: 1.3vw; color: #fff; font-weight: 500;}
#base .con_wrap .title h1{line-height: 1.4;}
#base .con_wrap .title p{font-weight: 300; opacity: 0.9;}
#base .con_wrap .btn{background: rgba(0, 0, 0, 0); border: 1px solid rgba(255, 255, 255, 0.25); width: 46%;}
#base .con_wrap .btn a span{font-weight: 400 !important; color: #fff;}
#base .base_swiper{width: 100%; height: 95vh;}
#base .base_swiper .swiper-wrapper .base_bg01{background: url(../image/main/base_bg01.jpg) no-repeat right / cover;}
#base .base_swiper .swiper-wrapper .base_bg02{background: url(../image/main/base_bg02.jpg) no-repeat right / cover;}
#base .base_swiper .swiper-wrapper .base_bg03{background: url(../image/main/base_bg03.jpg) no-repeat right / cover;}










/* 반응형 */
@media all and (min-width:1921px){
.title h1{font-size: 70px;}
.title p{font-size: 18px;}
.btn a span{font-size: 17px;}

main .con_wrap .text h2{font-size: 48px;}
main .con_wrap .text p{font-size: 25px;}
main .con_wrap .text h1{font-size: 87px;}
main .con_wrap .text h3{font-size: 48px;}
main .con_wrap .btn_wrap .btn a span{font-size: 17px;}

#main_bt ul li h3 a span{font-size: 16px;}
#main_bt ul li p{font-size: 14px;}

#event .event_wrap .swiper-wrapper .swiper-slide .text h3{font-size: 24px;}
#event .event_wrap .swiper-wrapper .swiper-slide .text p{font-size: 16px;}
#event .event_wrap .swiper-wrapper .swiper-slide .text p a span{font-size: 18px;}

#service .service_wrap li h2{font-size: 40px;}
#service .service_wrap li p{font-size: 18px;}
}



@media all and (max-width:1024px){
.title h1{font-size: 6.5vw; color: #fff;}
.title p{font-size: 1.8vw; color: #fff;}

.btn{padding: 1.25vw 1.5vw; margin-top: 3vw; width: 30%;}
.btn a span{font-size: 1.7vw;}
.btn a .arrow{width: 1.7vw;}
.btn a .arrow img{width: 100%;}

main .con_wrap{top: 17%; right: 7.5%; text-align: right;}
main .con_wrap .text {display: flex;flex-direction: column;align-items: flex-end;}
main .con_wrap .text h2{font-size: 4.5vw;}
main .con_wrap .text p{font-size: 2.1vw;}
main .con_wrap .text h1{font-size: 8.5vw;}
main .con_wrap .text h3{width:50vh;}
main .con_wrap .btn_wrap{justify-content: flex-end;}
main .con_wrap .btn_wrap .btn{width: 35%; padding: 1.25vw;}
main .con_wrap .btn_wrap .btn a span{font-size: 1.6vw;}

#main_bt ul{padding: 3.5vw 0;}
#main_bt ul li .icon{max-width: 55px; margin: 0 auto;}
#main_bt ul li h3{display: inline-block; margin: 0.25vw 0;}
#main_bt ul li h3 a span{font-size: 1.8vw; margin-right: 1.5vw;}
#main_bt ul li p{display: none;}

#event{padding: 12.5vw 5vw 10vw;}
#event .title{margin-bottom: 3.5vw;}
#event .event_swiper{width: 70vw; padding-bottom: 7.5vw;}
#event .event_swiper .swiper-wrapper .swiper-slide{flex-direction: column;}
#event .event_swiper .swiper-wrapper .swiper-slide .img{width: 100%; height: 40vw;}
#event .event_swiper .swiper-wrapper .swiper-slide .text{width: 100%; padding: 3vw 0 4vw 5vw; height: 40vw;}
#event .event_swiper .swiper-wrapper .swiper-slide .text h1{font-size: 4.6vw;}
#event .event_swiper .swiper-wrapper .swiper-slide .text p{font-size: 2.1vw;}
#event .event_swiper .swiper-wrapper .swiper-slide .text p br:nth-child(odd){display: none;}

#service{padding: 0 10vw; margin: 10vw 0;}
#service .title{margin-bottom: 2vw;}
#service .service_wrap{flex-direction: column;}
#service .service_wrap li{width: 100%; padding: 5vw 5vw 12.5vw 5vw; margin-top: 1vw;}
#service .service_wrap li h2{font-size: 4.5vw;}
#service .service_wrap li p{font-size: 1.8vw;}

#base .base_swiper{height: 90vh;}
#base .con_wrap{top: 15%; left: 12%;}
#base .con_wrap .title h2{font-size: 2.1vw;}
#base .con_wrap .btn{width: 46%;}
}



@media all and (max-width:768px){
.title h1{font-size: 8vw; color: #fff;}
.title p{font-size: 2.2vw; color: #fff;}

.btn{padding: 1.5vw 2vw; margin-top: 5vw; width: 35%;}
.btn a span{font-size: 2.1vw;}
.btn a .arrow{width: 2.1vw;}

main .con_wrap{top: 17%; right: 10%;}
main .con_wrap .text h2{font-size: 5vw; margin-bottom: 0.75vw;}
main .con_wrap .text p{font-size: 2.8vw;}
main .con_wrap .text h1{font-size: 9vw; margin: 1.5vw 0 0.75vw 0;}
main .con_wrap .btn_wrap .btn{width: 45%; padding: 1.5vw 2.5vw; margin-top: 3.5vw;}
main .con_wrap .btn_wrap .btn a span{font-size: 2.2vw;}

#main_bt ul{padding: 5vw 0;}
#main_bt ul li .icon{max-width: 50px; margin: 0 auto;}
#main_bt ul li h3{display: inline-block; margin: 0.25vw 0;}
#main_bt ul li h3 a span{font-size: 2.5vw; margin-right: 1.5vw;}
#main_bt ul li h3 a img{max-width: 5px;}

#event{padding: 15vw 10vw 12.5vw;}
#event .title{margin-bottom: 3.5vw;}
#event .event_swiper{width: 75vw; padding-bottom: 10vw;}
#event .event_swiper .swiper-wrapper .swiper-slide{flex-direction: column;}
#event .event_swiper .swiper-wrapper .swiper-slide .img{width: 100%; height: 45vw;}
#event .event_swiper .swiper-wrapper .swiper-slide .text{width: 100%; padding: 5vw; height: 45vw;}
#event .event_swiper .swiper-wrapper .swiper-slide .text h1{font-size: 5.6vw;}
#event .event_swiper .swiper-wrapper .swiper-slide .text p{font-size: 2.5vw; margin-top: 1vw;}
#event .event_swiper .swiper-wrapper .swiper-slide .text .btn{width: 40%;}
.swiper-pagination .swiper-pagination-bullet{width: 20px; height: 3px;}

#service{padding: 0 7.5vw; margin: 15vw 0;}
#service .service_wrap li{width: 100%; padding: 7.5vw 7.5vw 12.5vw 7.5vw; margin-top: 2vw;}
#service .service_wrap li h2{font-size: 5.5vw;}
#service .service_wrap li p{font-size: 2.2vw;}

#base .base_swiper{height: 85vh;}
#base .con_wrap{top: 12%; left: 10%;}
#base .con_wrap .title h2{font-size: 3.5vw;}
}

@media all and (max-width:500px){
.title h1{font-size: 10vw; color: #fff;}
.title p{font-size: 3.5vw; color: #fff;}

.btn{width: 40%;}
.btn a span{font-size: 2.8vw;}

main .con_wrap{top: 15%; right: 10%;}
main .con_wrap .text h2{font-size: 7vw; margin-bottom: 1vw;}
main .con_wrap .text p{font-size: 3.5vw;}
main .con_wrap .text h1{font-size: 8vw; margin: 2.5vw 0 1vw 0; letter-spacing: -2px;}
main .con_wrap .text h3{width:100%;}
main .con_wrap .btn_wrap .btn{padding: 2.5vw; margin-top: 5.5vw;}
main .con_wrap .btn_wrap .btn a span{font-size: 2.5vw;}

#event .event_swiper .swiper-wrapper .swiper-slide .img{height: 50vw;}
#event .event_swiper .swiper-wrapper .swiper-slide .text{height: 50vw;}
#event .event_swiper .swiper-wrapper .swiper-slide .text h1{font-size: 6.5vw;}
#event .event_swiper .swiper-wrapper .swiper-slide .text p{font-size: 2.8vw; margin-top: 1vw;}

#service .service_wrap li h2{font-size: 7vw;}
#service .service_wrap li p{font-size: 3vw;}

#main_bt ul li .icon{max-width: 45px;}
#main_bt ul li h3 a img{max-width: 4px; width: 100%; margin-bottom: 1px;}

#event{padding: 12.5vw 5vw 12.5vw;}
#event .event_wrap .swiper-wrapper .swiper-slide .text p a img{max-width: 6px;}

#base .con_wrap{top: 12%; left: 5%;}
#base .base_swiper{height: 70vh;}
#base .con_wrap .btn{width: 35%;}
#base .base_swiper .swiper-wrapper .base_bg01{background: url(../image/main/base_bg01.jpg) no-repeat -110vw / cover;}
#base .base_swiper .swiper-wrapper .base_bg02{background: url(../image/main/base_bg02.jpg) no-repeat -60vw / cover;}
#base .base_swiper .swiper-wrapper .base_bg03{background: url(../image/main/base_bg03.jpg) no-repeat -90vw / cover;}
}

