@charset "utf-8";

::selection {background-color:#F08300;color:#fff}
::-webkit-scrollbar {width:4px; height:4px;}
::-webkit-scrollbar-thumb {background-color:#ddd;}
::-webkit-scrollbar-track {background-color:transparent;}

@keyframes overCircle{
	0%{
		-webkit-transform:scale(1);
		transform:scale(1);
		opacity:.5
	}
	50%{
		opacity:1
	}
	100%{
		-webkit-transform:scale(1.5);
		transform:scale(1.5);
		opacity:0
	}
}
@keyframes move-arrow{
	50%{
		transform:translate(-100%,100%);
	}
	100%{
		transform:translate(0,0);
	}
}
@keyframes txt-ani1{ 
	0%{
		-webkit-transform:translateX(0);
		transform:translateX(0)}
	50%{
		-webkit-transform:translateX(-100%);
		transform:translateX(-100%)}
	50.01%{
		-webkit-transform:translateX(100%);
		transform:translateX(100%)}
	100%{
		-webkit-transform:translateX(0);
		transform:translateX(0)}
}
@keyframes txt-ani2{
	0%{
		-webkit-transform:translateX(0);
		transform:translateX(0)
	}
	100%{
		-webkit-transform:translateX(-200%);
		transform:translateX(-200%)
	}
}

body {font-family:'Paperlogy', sans-serif;}

.intro-wrap {display:flex; align-items:center; justify-content:center; width:100%; min-height:100dvh; padding:30px;}
.intro-wrap .container {width:100%; max-width:1680px; margin:0 auto;}

.intro-top {display:flex; gap:20px; margin-bottom:20px;}

.intro-visual {flex:1 1 auto; min-width:0; width:1%; aspect-ratio:16/9; position:relative; overflow:hidden; border-radius:32px;}
.intro-visual video {width:100%; height:100%; object-fit:cover;}

.intro-quick {display:flex; flex-direction:column; gap:20px; width:380px;}
.intro-quick .link-item {position:relative; display:block; width:100%; height:40%; color:#fff;}

.intro-quick .link-item .item-inner {position:relative; display:flex; align-items:center; width:100%; height:100%; padding:55px 40px 37px; border-radius:32px; mask-image:url('images/mask.png'); -webkit-mask-image:url('images/mask.png'); -webkit-mask-position:top right; mask-position:top right; mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat; mask-size:cover; -webkit-mask-size:cover; transition:.6s;}
.intro-quick .link-item .image {position:absolute; top:0; left:0; width:100%; height:100%; background:url('images/quick1-off.jpg') 50% 50%/cover no-repeat; transition:.35s;}
.intro-quick .link-item .image.hover {background-image:url('images/quick1-on.jpg'); opacity:0;}
.intro-quick .link-item .quick-con {position:relative; width:100%; z-index:1;}
.intro-quick .link-item .quick-con .num {display:inline-block; margin-bottom:14px; padding:0 8px; background:#F08300; border-radius:8px; font-size:18px; font-weight:600; line-height:37px; letter-spacing:-.03em;}
.intro-quick .link-item .quick-con .tit {font-size:34px; font-weight:700; line-height:1.3em; letter-spacing:-.03em;}
.intro-quick .link-item .quick-con .tit small {font-size:14px; margin-left:2px;}
.intro-quick .link-item .quick-con .line {height:1px; margin:25px 0 13px; background:rgba(255, 255, 255, 0.20);}
.intro-quick .link-item .quick-con .scroll-txt-wrap {display:flex; width:100%; overflow:hidden;}
.intro-quick .link-item .quick-con .scroll-txt {display:inline-flex; color:#ccc; white-space:nowrap; font-size:20px; font-weight: 600; line-height:1.3em; letter-spacing:-.03em; -webkit-animation:txt-ani1 30s linear infinite; animation:txt-ani1 30s linear infinite;}
.intro-quick .link-item .quick-con .scroll-txt > span {display:flex; align-items:center; padding:0 5px;}
.intro-quick .link-item .quick-con .scroll-txt > span > span {color:#2CD3C2;}
.intro-quick .link-item .quick-con .scroll-txt.clone {-webkit-animation:txt-ani2 30s linear infinite; animation:txt-ani2 30s linear infinite;}


.intro-quick .link-item .more-btn {position:absolute; top:0; right:0; width:80px; height:80px; border-radius:100%;}
.intro-quick .link-item .more-btn:before,
.intro-quick .link-item .more-btn:after {content:''; display:none; position:absolute; top:0; left:0; z-index:-1; width:100%; height:100%; background:rgba(26, 38, 74, .3); border-radius:100%; animation: overCircle 1.5s cubic-bezier(1,2,.66,3) infinite;}

.intro-quick .link-item .more-btn .inner {position:relative; z-index:2; width:100%; height:100%; border-radius:100%; overflow:hidden;}
.intro-quick .link-item .more-btn .inner .ico {position:absolute; top:0; left:0; width:100%; height:100%; background:url('images/arrow-white.svg') 50% 50% no-repeat; transition:.35s;}

.intro-quick .link-item.n1 .more-btn .inner {background:#1A264A;}
.intro-quick .link-item.n2 .more-btn .inner {background:#443F6A;}
.intro-quick .link-item.n2 .more-btn:before,
.intro-quick .link-item.n2 .more-btn:after {background:rgba(68, 63, 106, .3);}
.intro-quick .link-item.n2 .image {background-image:url('images/quick2-off.jpg');}
.intro-quick .link-item.n2 .image.hover {background-image:url('images/quick2-on.jpg');}

.intro-quick .link-item:hover .more-btn:before {display:block; z-index:1; animation-delay:.5s}
.intro-quick .link-item:hover .more-btn:after {display:block; z-index:1;}
.intro-quick .link-item:hover .more-btn .inner .ico {animation:move-arrow .35s linear forwards;}
.intro-quick .link-item:hover .item-inner {border-radius:60px;}
.intro-quick .link-item:hover .image.hover {opacity:1;}
.intro-quick .link-item:hover .quick-con .scroll-txt {color:#fff;}

.intro-quick .link-brochure {position:relative; display:flex; align-items:center; width:100%; height:30%; padding:30px 20px 30px 40px; border-radius:32px; overflow:hidden; color:#fff; transition:.6s;}
.intro-quick .link-brochure .image {position:absolute; top:0; left:0; width:100%; height:100%; background:url('images/quick3-off.jpg') 50% 50%/cover no-repeat; transition:.35s;}
.intro-quick .link-brochure .image.hover {background-image:url('images/quick3-on.jpg'); opacity:0;}
.intro-quick .link-brochure .cont {position:relative; z-index:1; display:flex; align-items:center; gap:10px; width:100%;}
.intro-quick .link-brochure .cont .txt {flex:1 1 auto; min-width:0; width:1%; display:flex; flex-direction:column; align-items:flex-start; gap:15px;}
.intro-quick .link-brochure .cont .txt strong {font-size:28px; font-weight:700; line-height:1.3em; letter-spacing:-.03em;}
.intro-quick .link-brochure .cont .txt span {display:inline-flex; border:1px solid #fff; border-radius:8px; padding:0 8px; font-size:14px; font-weight:600; line-height:30px; letter-spacing:-.03em; transition:.35s;}
.intro-quick .link-brochure .cont .img {width:88px;}
.intro-quick .link-brochure:hover .image.hover {opacity:1;}
.intro-quick .link-brochure:hover .cont .txt span {background:#fff; color:#F08300;}

.intro-bottom {display:flex; align-items:center; width:100%; border:1px solid #eee; border-radius:32px;}
.intro-bottom .link-item {flex:1; display:flex; justify-content:center; align-items:center; gap:20px; padding:20px;}
.intro-bottom .link-item .img {width:80px; transition:.2s;}
.intro-bottom .link-item .txt {display:flex; flex-direction:column; gap:1px;}
.intro-bottom .link-item .txt strong {margin-left:-5px; padding:1px 5px; font-size:24px; font-weight:700; line-height:1.3em; letter-spacing:-.03em; color:#2c2c2c; border-radius:0px; transition:.2s;}
.intro-bottom .link-item .txt span {font-size:16px; font-weight:400; line-height:1.3em; letter-spacing:-.03em; color:#505050;}
.intro-bottom .link-item:hover .img {transform:scale(1.05);}
.intro-bottom .link-item:hover .txt strong {color:#fff; background:#1A264A; border-radius:4px;}

.intro-popup { max-height:73vh; padding:30px; overflow:auto; color:#505050; line-height:1.625em; letter-spacing:-0.03em;}
.intro-popup h2 {margin-bottom:20px; color:#F08300; font-size:24px; line-height:1.3em; letter-spacing:-0.03em;}
.intro-popup .text-top {margin-bottom:40px;}
.intro-popup .text-top p.tt {margin-bottom:10px; font-size:20px; line-height:1.38em; letter-spacing:-.03em; color:#2c2c2c;}
.intro-popup .text-top p.tt strong {font-weight:600;}
.intro-popup .info:not(:last-child) {margin-bottom:40px;}
.intro-popup .info h3 {position:relative; display:flex; align-items:flex-start; gap:5px; margin-bottom:15px; font-size:16px; line-height:1.1em; letter-spacing:-.03em; color:#2c2c2c;}
.intro-popup .info h3:before {content:''; width:13px; height:16px; background:url('images/bullet.svg') 0 50%/contain no-repeat;}
.intro-popup .info img {display:block; width:100%;}
.intro-popup .map-img {margin-bottom:20px;}
.intro-popup .map-img img {display:block; width:100%;}
.intro-popup .map-info {display:flex; flex-direction:column; gap:20px;}
.intro-popup .map-info > div {display:flex; flex-direction:column; gap:8px;}
.intro-popup .map-info > div h3 {font-size:16px; line-height:110%; letter-spacing:-.03em; color:#2c2c2c;}
.intro-popup .map-info > div p {font-size:13px; line-height:153.846%; letter-spacing:-.03em;}

.modal {width:100%; max-width:600px; border-radius:24px; padding:10px;}
.modal a.close-modal {top:-32px; right:-32px; background:url('images/close.svg') 50% 50%/contain no-repeat; width:64px; height:64px;}
.modal a.close-modal:hover {transform:scale(0.9);}

@media (max-width:1600px) {
	.intro-wrap .container {max-width:1260px;}
	.intro-quick {width:260px; gap:15px;}
	.intro-quick .link-item .item-inner {padding:25px 30px 20px;}
	.intro-quick .link-item .quick-con .num {margin-bottom:10px; padding:0 6px; font-size:15px; line-height:28px;}
	.intro-quick .link-item .quick-con .tit {font-size:22px;}
	.intro-quick .link-item .quick-con .tit small {font-size:12px;}
	.intro-quick .link-item .quick-con .line {margin:15px 0 10px;}
	.intro-quick .link-item .quick-con .scroll-txt {font-size:15px;}
	.intro-quick .link-item .more-btn {width:62px; height:62px;}

	.intro-quick .link-brochure {padding:20px 15px 20px 30px;}
	.intro-quick .link-brochure .cont .txt {gap:10px;}
	.intro-quick .link-brochure .cont .txt strong {font-size:20px;}
	.intro-quick .link-brochure .cont .txt span {padding:0 6px; font-size:12px; line-height:26px;}
	.intro-quick .link-brochure .cont .img {width:58px;}

	.intro-bottom .link-item .img {width:58px;}
	.intro-bottom .link-item .txt strong {font-size:20px;}
	.intro-bottom .link-item .txt span {font-size:14px;}

	.intro-popup {padding:20px; font-size:14px;}
	.intro-popup h2 {margin-bottom:16px; font-size:20px;}
	.intro-popup .text-top {margin-bottom:24px;}
	.intro-popup .text-top p.tt {margin-bottom:8px; font-size:16px;}
	.intro-popup .info:not(:last-child) {margin-bottom:32px;}
	.intro-popup .info h3 {margin-bottom:10px; font-size:15px;}
	.intro-popup .info h3:before {width:10px; height:13px; margin-top:1px;}
	.intro-popup .map-info > div h3 {font-size:15px;}

	.modal {max-width:500px;}
	.modal a.close-modal {top:-24px; right:-24px; width:48px; height:48px;}
}

@media (max-width:1024px) {
	.intro-wrap .container  {max-width:930px;}
	.intro-top {flex-direction:column; gap:20px;}
	

	.intro-visual {width:100%; border-radius:24px;}

	.intro-quick {width:100%; flex-wrap:wrap; flex-direction:row; justify-content:space-between; gap:20px;}
	.intro-quick .link-item {width:calc(50% - 10px); height:220px;}
	.intro-quick .link-item .more-btn {width:20%; height:auto; aspect-ratio:1/1;}

	.intro-quick .link-brochure {height:auto; padding:25px 30px; border-radius:24px;}
	.intro-quick .link-brochure .cont .txt {gap:10px;}
	.intro-quick .link-brochure .cont .txt strong {font-size:20px;}
	.intro-quick .link-brochure .cont .txt span {padding:0 6px; font-size:12px; line-height:26px;}
	.intro-quick .link-brochure .cont .img {width:62px;}

	.intro-bottom .link-item .img {width:58px;}
	.intro-bottom .link-item .txt strong {font-size:20px;}
	.intro-bottom .link-item .txt span {font-size:14px;}

	.intro-popup {padding:20px; font-size:14px;}
	.intro-popup h2 {margin-bottom:16px; font-size:20px;}
	.intro-popup .text-top {margin-bottom:24px;}
	.intro-popup .text-top p.tt {margin-bottom:8px; font-size:16px;}
	.intro-popup .info:not(:last-child) {margin-bottom:32px;}
	.intro-popup .info h3 {margin-bottom:10px; font-size:15px;}
	.intro-popup .info h3:before {width:10px; height:13px; margin-top:1px;}
	.intro-popup .map-info > div h3 {font-size:15px;}


	.modal {max-width:500px;}
	.modal a.close-modal {top:-24px; right:-24px; width:48px; height:48px;}
    .blocker {padding:16px;}
	
}

@media (max-width:760px) {
	.intro-wrap {padding:24px 16px;}
	.intro-top {flex-direction:column; gap:15px;}
	

	.intro-visual {width:100%; border-radius:20px;}

	.intro-quick { gap:15px;}
	.intro-quick .link-item {width:100%; height:170px;}
	.intro-quick .link-item .item-inner {border-radius:20px; padding:40px 20px 20px; mask-image:url('images/mask-m.png'); -webkit-mask-image:url('images/mask-m.png');}
	.intro-quick .link-item .more-btn {width:17%;}

	.intro-quick .link-brochure {padding:20px; border-radius:20px;}

	

	.intro-bottom {flex-direction:column; padding:10px 16px; border-radius:20px;}
    .intro-bottom .link-item {width:100%; justify-content:flex-start; padding:15px;}
	.intro-bottom .link-item .img {width:50px;}
	.intro-bottom .link-item .txt strong {font-size:18px;}
	.intro-bottom .link-item .txt span {font-size:13px;}

	.intro-popup {padding:10px;}

	.modal {border-radius:20px;}
    .modal a.close-modal {top:-10px; right:-10px; width:38px; height:38px;}
	
}