/* common */
.stroke{-webkit-text-stroke: 1px #c8c8c8; font-weight: 900; color:transparent;}
.fade_in{animation-name:fadeIn; animation-duration:0.3s; animation-fill-mode: forwards;}
.fade_out{animation-name:fadeOut; animation-duration:0.3s; animation-fill-mode:forwards;}
.sticker{width:5.2vw; height:5.2vw; padding:0.52vw; position:fixed; right:0; bottom:0; font-size:0.72vw; display:flex; align-items:end; justify-content:end; font-family:"Poppins"; font-weight:600; line-height:1.2;}
.sticker::before{content:''; display:block; border-bottom:5.2vw solid #3fbab9; border-left:5.2vw solid transparent; position:absolute; bottom:0; right:0; z-index:-1;}

.btn_chatbot{width:5.2vw; padding:0.52vw; position:fixed; right:1vw; bottom:1vw; font-size:0.72vw; display:flex; flex-direction:column; align-items:center; font-family:"Poppins"; font-weight:600; line-height:1.2;}
.btn_chatbot img{margin-bottom:0.3125vw;}

/* layout */
header{padding:1vw 2.083vw 1.5625vw; position:fixed; top:0; left:0; width:100%; z-index:1; background:rgba(0,0,0,0.6)}
header h1{width:8.33vw;}
header h1 a{display:block;}
header h1 a img{display:block;}


.contents{height:100%;}
.wrap{width:1280px; padding-left:40px; padding-right:40px; max-width:100%; margin-left: auto; margin-right: auto; }


/* main */
section{height:100%; min-height:fit-content; padding:8rem 0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.visual_txt{font-size:10.41vw; line-height:1; font-family:"Poppins"; font-weight: 900;}
.visual_txt span{color:#3fbab9;}
.visual_txt.stroke span{-webkit-text-stroke: 1px #3fbab9; color:transparent;}
.card_wrap{display:flex; gap:4vw; justify-content:center;}
.card{aspect-ratio:5398/8560; width:15.625vw; border-radius:0.83vw; background:#c8c8c8; overflow:hidden;}
.card img{object-fit:cover; height:100%; width:100%; filter:grayscale(1); transition:0.3s}
.card.on img{filter:grayscale(0)}
.section02 {background:url(../img/bg_computer.jpg) no-repeat center / cover; position:relative;}
.section02::before{content:''; display:block; width:100%; height:100%; background:linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0.3), rgba(0,0,0,1)); position:absolute; top:0; left:0; z-index:0;}
.section02 .text_wrap{padding-top:4vw;}
.section02 .text_wrap p{font-size:1.875vw;}
.section02 .text_wrap .tit{font-family:"Poppins"; font-size:5.2vw; font-weight:900;}
.section03{display:flex; flex-direction:column;}
.section03 a{width:100%; height:calc(100% / 3); background-color:#666}
.section03 a:nth-child(2n){background-color:#a0a0a0}
.section03 a .wrap{display:flex; height:100%; flex-direction:column; align-items:start; justify-content:center;}
.section03 a p{padding-top:0.52vw; font-size:1.041vw;}
.section03 a .tit{font-size:3.02vw; font-family:"Poppins", "Pretendard"; font-weight:900}
.section04 .text_wrap p{font-size:1.25vw;}
.section04 .text_wrap .tit{line-height:1; font-family:"Poppins"; font-size:5.2vw; font-weight:900; margin-bottom:0.52vw;}
.section04 .text_wrap .sub_tit{ margin-bottom:1.04vw; line-height:1; font-family:"Poppins"; font-size:3.64vw; font-weight:600; color:#c8c8c8}

.icon_wrap{margin-top:5.2vw; display:flex; gap:2.08vw; justify-content:center; align-items:start;}
.icon div{width:6.35vw; border-radius:0.52vw;}
.icon div img{width:5.2vw}
.icon span{margin-top:0.52vw; display:block; font-size:0.83vw; color:#c8c8c8}

.section05{background:url(../img/bg_sea.jpg) no-repeat center / cover; padding-top:0; padding-bottom:0;}
.section05 .banner{width:100%; height:100%; min-height:fit-content; background:rgba(0,0,0,0.8); display:flex; flex-direction:column; align-items:center; justify-content:center; padding-top:8rem; padding-bottom:8rem;}
.section05 .banner p{margin-top:3.75vw; font-size:1.25vw;}
.section05 .banner .tit{line-height:1; font-family:"Poppins"; font-size:5.2vw; font-weight:900;}
.section05 .banner .sub_tit{margin-bottom:2.5vw; line-height:1; font-family:"Poppins"; font-size:3.64vw; font-weight:600; color:#c8c8c8}
.section05 .banner .btn{min-width:10.41vw; margin-top:3.75vw; font-size:1.45vw; padding:0.52vw 1.5625vw; border:1px solid #c8c8c8; border-radius:100vw; font-family:"Poppins", "Pretendard"; }

.main footer{height:100%; min-height:fit-content; padding-top:8rem; padding-bottom:8rem; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.main footer p{margin-top:2.083vw; font-size: 2.08vw; font-weight:600;}
.main footer ul{margin-top:2.083vw;}
.main footer ul li{font-size: 0.9375vw; color:#c8c8c8;}
.main footer img{width:10.41vw;}
.main footer .copyright{font-size: 0.9375vw; color:#666; font-weight:400;}


@keyframes fadeIn{
	from {
		opacity:0;
	}
	to {
		opacity:1;
	}
}

@keyframes fadeOut{
	from {
		opacity:1;
	}
	to {
		opacity:0;
	}
}

@media(max-width:1280px){
	.sticker{font-size:1.09375vw;}
	.sticker::before{border-bottom-width:7.8125vw; border-left-width:7.8125vw;}
	header h1{width:10.41vw;}
	.section03 a p{font-size: 1.875vw;}
	.section04 .text_wrap p{font-size: 1.875vw;}
	.section05 .banner p{font-size: 1.875vw;}
	.section05 .banner .btn{font-size:1.875vw}
	.main footer img{width:15.625vw; }
	.main footer ul li{font-size: 1.5625vw;}
	.main footer .copyright{font-size: 1.5625vw;}

}

@media(max-width:768px){
	header h1{width:10rem;}
	.visual_txt{font-size:8rem}
	.card_wrap{width: 90vw; flex-wrap:wrap; margin-left:auto; margin-right:auto;}
	.card_wrap .card{width:calc((100% - 16vw) / 5)}
	.icon_wrap{width: 90vw; flex-wrap:wrap; margin-left:auto; margin-right:auto; margin-top:6rem; gap:8vw;}
	.icon_wrap .icon{width:calc((100% - 40vw) / 5)}
	.icon_wrap .icon div{width:100%; border-radius:1.4vw;}
	.icon_wrap .icon div img{width:100%;}
	.icon_wrap .icon span{font-size:1.4rem;}
	.section02 .text_wrap{padding-top: 6rem;}
	.section02 .text_wrap p{font-size:2rem;}
	.section04 .text_wrap p{font-size:1.6rem;}
	.section04 .text_wrap .tit{font-size:3.8rem; margin-bottom:1rem;}
	.section05 .banner p{font-size:1.6rem; margin-top:3rem;}
	.section05 .banner .tit{font-size:3.8rem;}
	.section05 .banner .sub_tit{font-size:2.4rem; margin-bottom:3rem;}
	.section05 .banner .btn{margin-top:6rem; font-size:1.6rem; padding:0.6rem 2.4rem;}
	.main footer p{margin-top:3rem; font-size:2rem}
	.main footer img{width:14rem;}
	.main footer ul {margin-top:3rem;}
	.main footer ul li{font-size:1.4rem;}
	.main footer .copyright{margin-top:1rem; font-size:1.4rem;}
	.main footer .btn_chatbot{bottom:1rem; right:1rem; width: 6.4rem; height:6.4rem; background:#000; border-radius:1rem;  font-size: 1.2rem;}
	.main footer .btn_chatbot img{width:4rem;}
}


@media(max-width:480px){
	header{padding-top:1rem; padding-bottom:1.6rem}
	section{height:auto; padding:12rem 6vw; }
	.card_wrap{display:none;}
	.icon_wrap{}
	.icon_wrap .icon{width:calc((100% - 16vw) / 3)}
	.visual_txt{font-size:6rem;}
	.section01{padding-top:14rem; padding-bottom:14rem;}
	.section02 .text_wrap p br{display:none; word-break:keep-all;}
	.section05{height:100%; padding:0;}
	.section05 .banner{padding:12rem 6vw}
	.section05 .banner .tit{ word-break:keep-all; line-height:1.4;}
	.main footer {height:100%; padding:12rem 6vw; }
	.main footer p{word-break:keep-all; }
}