.wrap{margin-top: var(--mt);}
.wrap .mv{position:relative; height: calc(100vh - var(--mt)); overflow: hidden;}
.wrap .mv .bg{height: 100%; width: 100%; background:url(/img/main/mv01.png) 50% 50% /cover no-repeat; animation:zoomOut 2s both}
.wrap .mv .txt{position:absolute; top: 0; left: 0; width: 100%; padding-left: 160px; margin-top: 155px;}
.wrap .mv .txt p{font-weight:300; font-size:19px; color: #fff; margin-bottom:25px;}
.wrap .mv .txt h2{font-weight:300; font-size:75px; color: #fff;}
.wrap .mv .txt h2 span{font-weight:600;}
.wrap .mv .scroll{position:absolute; bottom: 0; left: 50%; transform:translateX(-50%); width: 1px; height: 80px; background: rgba(255, 255, 255, 0.2);}
.wrap .mv .scroll::after{content:""; position:absolute; top: 0; left: 0; width: 1px; height: 30px; background: #fff; animation:scrollMove 1.5s infinite alternate}


@keyframes scrollMove{
	0%{top: 0px;}
	100%{top: 50px}
}

@keyframes zoomOut{
	0%{transform:scale(1.3);}
	100%{transform:scale(1);}
}


.wrap .sec .m_tit{text-align: center;}
.wrap .sec .m_tit h2{font-family: var(--enF); font-weight:700; font-size:60px; color: #000;}
.wrap .sec .m_tit p{font-size:20px; color: #666; margin-top: 40px;}
.wrap .sec .m_tit.l{text-align: left;}
.wrap .sec .m_tit.c h2{color: #fff;}
.wrap .sec .m_tit.c p{color: #fff;}

.wrap .sec01{padding-top: 240px;}
.wrap .sec01 .fbox{flex-wrap:wrap; gap:26px; margin-top: 60px;}
.wrap .sec01 .fbox .item{position:relative; width: calc((100% - 52px) / 3); overflow: hidden;}
.wrap .sec01 .fbox .item::after{content:""; position:absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.00) 75.3%); z-index: 1; transition:0.6s}
.wrap .sec01 .fbox .item::before{content:""; position:absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(153deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 100%); transition:0.6s; opacity: 0;}
.wrap .sec01 .fbox .item a{position:absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;}
.wrap .sec01 .fbox .item figure{position:relative; z-index: 1; transition:0.6s}
.wrap .sec01 .fbox .item figure img{}
.wrap .sec01 .fbox .item .txt{position:absolute; bottom: -177px; left: 0; width: 100%; padding: 0 30px; z-index: 3; transition:0.6s}
.wrap .sec01 .fbox .item .txt h3{font-weight:700; font-size:32px; color: #fff;}
.wrap .sec01 .fbox .item .txt > p{font-size:17px; line-height: 1.6em; color: #fff; opacity: 0.8; margin: 15px 0 55px; height: 4.8em;}
.wrap .sec01 .fbox .item .txt .link_btn{position:relative; z-index: 1; display:flex;}
.wrap .sec01 .fbox .item .txt .link_btn p{position:relative; height: 45px; font-family: var(--enF); font-weight:600; font-size:14px; color: #fff; line-height: 45px;}
.wrap .sec01 .fbox .item .txt .link_btn p::after{content:""; position:absolute; top: 0; right: -20px; width: 45px; height: 45px; background: var(--mainC); border-radius:50%; z-index: -1;}

.wrap .sec02{padding-top: 235px;}
.wrap .sec02 .gsap_box{margin-top: 100px; overflow: hidden;}
.wrap .sec02 .gsap_box .item{position:relative; align-items:center; background: #fff;}
.wrap .sec02 .gsap_box .item::after{content:""; position:absolute; bottom: -62px; right: -105px; background:url(/img/main/main_bg.png) 50% 50% /cover no-repeat; width: 565px; height: 478px; z-index: 1}
.wrap .sec02 .gsap_box .item figure{width: 50%;}
.wrap .sec02 .gsap_box .item .txt{position:relative; width: 50%; padding: 0 158px 0 110px; z-index: 2;}
.wrap .sec02 .gsap_box .item .txt .tit{margin-bottom:90px;}
.wrap .sec02 .gsap_box .item .txt .tit p{font-family: var(--enF); font-size:17px; color: var(--mainC);}
.wrap .sec02 .gsap_box .item .txt .tit h3{font-weight:700; font-size:70px; color: #000; margin-top: 20px;}
.wrap .sec02 .gsap_box .item .txt .p_list h4{position:relative; font-weight:600; font-size:26px; color: #000; margin-bottom:32px; }
.wrap .sec02 .gsap_box .item .txt .p_list h4 span{position:relative; z-index: 10;background: #fff; padding-right: 15px;}
.wrap .sec02 .gsap_box .item .txt .p_list h4::after{content:""; position:absolute; top: 13px; left: 0; width: 100%; height: 1px; background: #EBEBEB;}
.wrap .sec02 .gsap_box .item .txt .p_list ul li{position:relative; display:flex; align-items:center; border-radius: 10px; background: #FFF; box-shadow: 5px 4px 20px 0px rgba(0, 0, 0, 0.07); height: 80px; margin-bottom:30px; padding: 0 30px; font-size:18px; color: #000;}
.wrap .sec02 .gsap_box .item .txt .p_list ul li:last-of-type{margin-bottom:0;}
.wrap .sec02 .gsap_box .item .txt .p_list ul li a{position:absolute; top: 0; left: 0; width: 100%; height: 100%;}
.wrap .sec02 .gsap_box .item .txt .p_list ul li span:not(.link_icon){margin-right: 20px;}
.wrap .sec02 .gsap_box .item .txt .p_list ul li .link_icon{position:absolute; right: 30px; display:flex; align-items:center; width: 35px; height: 35px; background: var(--mainC); color: #fff; font-family: var(--enF); border-radius:20px; white-space: nowrap; transition:0.3s}
.wrap .sec02 .gsap_box .item .txt .p_list ul li .link_icon i{position:absolute; right: 8px; margin-top: -1px; transition:0.3s}
.wrap .sec02 .gsap_box .item .txt .p_list ul li .link_icon em{font-size:14px; opacity: 0; width: 0%; overflow: hidden; transition:0.3s}

.wrap .sec02 .gsap_box .item.left .txt{order:-1; padding: 0 110px 0 158px;}
.wrap .sec02 .gsap_box .item.left::after{right: auto; left: -105px;}

.wrap .sec03{background: #000; padding-top: 260px;}
.wrap .sec03 .fbox{}
.wrap .sec03 .fbox .m_tit{width: 360px; margin-top: 21px;}
.wrap .sec03 .circle_list{display:flex; width: calc(100% - 360px); flex-wrap:wrap;}
.wrap .sec03 .circle_list .item{position:relative; width: 28.62903225806452%; border:1px solid rgba(255, 255, 255, 0.2); border-radius:200px; padding-bottom:28.62903225806452%; background: transparent;}
.wrap .sec03 .circle_list .item::after{content:""; position:absolute; top: 16px; right: 33px; background:url(/img/main/icon_arrow.svg) 50% 50% /cover no-repeat; width: 58px; height: 58px; opacity: 0; transition:0.3s}
.wrap .sec03 .circle_list .item a{position:absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius:200px;}
.wrap .sec03 .circle_list .item.w2{width: 42.74193548387097%;}
.wrap .sec03 .circle_list .item .img{position:absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;transition:0.6s; border-radius:200px;}
.wrap .sec03 .circle_list .item .img01{background:url(/img/main/main11.png) 50% 50% / cover no-repeat;}
.wrap .sec03 .circle_list .item .img02{background:url(/img/main/main12.png) 50% 50% / cover no-repeat;}
.wrap .sec03 .circle_list .item .img03{background:url(/img/main/main13.png) 50% 50% / cover no-repeat;}
.wrap .sec03 .circle_list .item .img04{background:url(/img/main/main14.png) 50% 50% / cover no-repeat;}
.wrap .sec03 .circle_list .item .img05{background:url(/img/main/main15.png) 50% 50% / cover no-repeat;}
.wrap .sec03 .circle_list .item .img06{background:url(/img/main/main16.png) 50% 50% / cover no-repeat;}

.wrap .sec03 .circle_list .item .txt{position:absolute; top: 50%; left: 0; width: 100%;  text-align: center; transform:translateY(-50%);}
.wrap .sec03 .circle_list .item .txt h3{font-weight:600; font-size:28px; color: #fff;}
.wrap .sec03 .circle_list .item .txt h4{font-family: var(--enF); font-size:14px; opacity: 0.4; color: #fff; margin-top: 10px;}
.wrap .sec03 .circle_list .item .txt p{display:none; font-size:16px; line-height: 1.6em; color: #fff; opacity: 0.7; margin-top: 30px;}

.wrap .sec04{position:relative; background: #000; padding: 220px 0 210px;}
.wrap .sec04 .map_bg{position:absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.4; display:none; z-index: 1; }
.wrap .sec04 .svg_box{position:relative; margin-top: 14px; text-align: right;}
.wrap .sec04 .svg_box .in{position:absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;opacity: 0; visibility:hidden}
.wrap .sec04 .svg_box > div svg{width: 100%; height: 100%; max-width: 1280px;}
.wrap .sec04 .svg_box .in svg > g > g{display:none; }
.wrap .sec04 .svg_box .in svg > g > g .close{cursor: pointer;}
.wrap .sec04 .svg_box .out svg > g > g:not(#map){cursor: pointer;}
.wrap .sec04 .map_bg.on{display:block; }
.wrap .sec04 .svg_box .in.on{opacity: 1; visibility:visible}
.wrap .sec04 .svg_box .in svg > g > g .pin circle{transform-box: content-box; transform-origin: center}
.wrap .sec04 .svg_box .in svg > g > g .pin circle:nth-of-type(1){animation:pin 1s infinite}
.wrap .sec04 .svg_box .in svg > g > g .pin circle:nth-of-type(2){animation:pin 1s infinite}

.wrap .sec04 .mobile_list{display:none; flex-wrap:wrap; gap:20px}
.wrap .sec04 .mobile_list .item{width: calc(50% - 10px); border:1px solid var(--mainC); border-radius:14px; padding: 20px; box-shadow: 0px 0px 10px 0px rgba(255, 0, 0, 0.75);}
.wrap .sec04 .mobile_list .item h3{font-family: var(--enF); font-size:24px; color: #fff;}
.wrap .sec04 .mobile_list .item h3 img{transform:translateY(5px); margin-right: 15px;}
.wrap .sec04 .mobile_list .item ul{margin-top: 15px;}
.wrap .sec04 .mobile_list .item ul li{position:relative; font-family: var(--enF); font-size:15px; color: #fff; padding-left: 16px; margin-bottom:12px;}
.wrap .sec04 .mobile_list .item ul li:last-of-type{margin-bottom:0;}
.wrap .sec04 .mobile_list .item ul li::before{content:""; position:absolute; top: 7px; left: 0; width: 4px; height: 4px; border-radius:50%; background: #fff;}

@keyframes pin{
	0%{transform:scale(0);}
	100%{transform:scale(1);}

}

@media (hover: hover){
	.wrap .sec01 .fbox .item:hover::after{ opacity: 0;}
	.wrap .sec01 .fbox .item:hover::before{opacity: 1;}
	.wrap .sec01 .fbox .item:hover .txt{bottom: 30px;}

	.wrap .sec02 .gsap_box .item .txt .p_list ul li:hover .link_icon{width: 177px; padding: 0 20px;}
	.wrap .sec02 .gsap_box .item .txt .p_list ul li:hover .link_icon i{right: 20px;}
	.wrap .sec02 .gsap_box .item .txt .p_list ul li:hover .link_icon em{width: 100%; opacity: 1;}
	
	.wrap .sec03 .circle_list .item:hover{box-shadow: 0px 0px 35px 0px rgba(225, 0, 18, 0.25); border-color:rgba(225, 0, 18, 0.30);}
	.wrap .sec03 .circle_list .item:hover::after{opacity: 1;}
	.wrap .sec03 .circle_list .item:hover .img{opacity: 1;}
}

@media (max-width: 1800px){
	.wrap .sec02 .gsap_box .item.left .txt,
	.wrap .sec02 .gsap_box .item .txt{padding: 0 50px;}
	.wrap .sec02 .gsap_box .item .txt .tit h3{font-size:60px;}
}

@media (max-width: 1600px){
	.wrap .sec .m_tit h2{font-size:54px;}

	.wrap .mv .txt{padding-left: 60px;}
	.wrap .mv .txt h2{font-size:60px;}
	.wrap .sec01 .fbox .item .txt{bottom: -156px;}
	.wrap .sec01 .fbox .item .txt h3{font-size:27px;}
	.wrap .sec01 .fbox .item .txt > p{margin: 15px 0 30px;}

	.wrap .sec02 .gsap_box .item .txt .tit{margin-bottom:50px;}
	.wrap .sec02 .gsap_box .item .txt .tit h3{font-size:50px; margin-top: 10px;}
	.wrap .sec02 .gsap_box .item .txt .p_list h4{font-size:21px;}
	.wrap .sec02 .gsap_box .item .txt .p_list ul li{height: 60px; margin-bottom:15px; padding: 0 16px;}
	.wrap .sec02 .gsap_box .item .txt .p_list ul li:hover .link_icon{width: 177px;}
	.wrap .sec02 .gsap_box .item .txt .p_list ul li .link_icon{right: 16px;}
	.wrap .sec02 .gsap_box .item .txt .p_list ul li .link_icon em{font-size:14px;}
	.wrap .sec02 .gsap_box .item .txt .p_list ul li span:not(.link_icon){margin-right: 10px;}
	
	.wrap .sec03 .fbox .m_tit{width: 280px;}
	.wrap .sec03 .circle_list{width: calc(100% - 280px);}
}

@media (max-width: 1400px){
	.wrap .sec .m_tit h2{font-size:48px;}
	
	.wrap .sec03,
	.wrap .sec02,
	.wrap .sec01{padding-top: 150px;}
	.wrap .sec01 .fbox{flex-wrap:wrap;}
	.wrap .sec01 .fbox .item{width: calc(50% - 13px);}
	.wrap .sec01 .fbox .item figure img{width: 100%;}
	.wrap .sec01 .fbox .item .txt{bottom: -180px;}
	.wrap .sec01 .fbox .item .txt h3{font-size:34px;}
	.wrap .sec01 .fbox .item .txt > p{margin: 15px 0 55px;}

	.wrap .sec02 .gsap_box .item.left .txt,
	.wrap .sec02 .gsap_box .item .txt{padding: 0 20px;}
	.wrap .sec02 .gsap_box .item .txt .tit h3{font-size:40px;}

	.wrap .sec03 .fbox{flex-wrap:wrap;}
	.wrap .sec03 .fbox .m_tit{width: 100%; margin-bottom:50px;}
	.wrap .sec03 .fbox .m_tit h2 br{display:none; }
	.wrap .sec03 .circle_list{width: 100%;}

	.wrap .sec04{padding: 150px 0;}
}


@media (max-width: 1200px){
	.wrap .sec .m_tit h2{font-size:40px;}
	.wrap .sec .m_tit p{margin-top: 20px;}
	
	.wrap .sec03,
	.wrap .sec02,
	.wrap .sec01{padding-top: 100px;}
	.wrap .sec01 .fbox{margin-top: 40px;}

	.wrap .mv .txt{padding-left: 16px;}
	.wrap .mv .txt h2{font-size:54px;}

	.wrap .sec02 .gsap_box{margin-top: 50px;}
	.wrap .sec02 .gsap_box .item{flex-wrap:wrap; padding-bottom:60px;}
	.wrap .sec02 .gsap_box .item .txt{width: 100%; margin-top: 40px;}
	.wrap .sec02 .gsap_box .item figure{height: 300px; width: 100%; overflow: hidden;}
	.wrap .sec02 .gsap_box .item figure img{object-fit:cover; height: 100%; width: 100%;}
	.wrap .sec02 .gsap_box .item.left .txt{order:3; }
	.wrap .sec02 .gsap_box .item.left::after{right: -105px; left: auto;}
	
	.wrap .sec03 .fbox .m_tit{margin-top: 0; margin-bottom:30px;}
	.wrap .sec03 .circle_list .item.w2,
	.wrap .sec03 .circle_list .item{width: 100%; border-radius:50px; padding-bottom:240px; margin-bottom:30px;}
	.wrap .sec03 .circle_list .item .img{opacity: 1; border-radius:50px}
	.wrap .sec03 .circle_list .item:hover,
	.wrap .sec03 .circle_list .item{box-shadow: 0px 0px 15px 0px rgba(225, 0, 18, 0.25); border-color: rgba(225, 0, 18, 0.30);}
	.wrap .sec03 .circle_list .item .txt p{display:block !important; }
	.wrap .sec03 .circle_list .item::after{opacity: 1; top: -18px; right: -13px;}

	.wrap .sec04{padding: 100px 0;}


}

@media (max-width: 1024px){
	.wrap .sec01 .fbox{gap:40px 26px}
	.wrap .sec01 .fbox .item::after,
	.wrap .sec01 .fbox .item::before{display:none; }
	.wrap .sec01 .fbox .item .txt{position:static; padding: 0; margin-top: 20px;}
	.wrap .sec01 .fbox .item .txt h3{color: #000; font-size:24px;}
	.wrap .sec01 .fbox .item .txt > p{color: #000; height: auto;}
	.wrap .sec01 .fbox .item .txt .link_btn p{color: #000;}

	.wrap .sec .m_tit p{margin-top: 10px;}
	
	.wrap .sec04{margin-top: -1px;}
	.wrap .sec04 .svg_box{margin-top: 30px;}
	.wrap .sec04 .mobile_list{display:flex; margin-top: 40px;}

	.wrap .sec04 .map_bg{display:none !important; }
	.wrap .sec04 .svg_box .in,
	.wrap .sec04 .svg_box .in.on{display:none; }
	.wrap .sec04 .svg_box .out > *{pointer-events: none;}
}

@media (max-width: 800px){
	.wrap .mv{height: calc(80vh - var(--mt));}
	.wrap .mv .txt{margin-top: 100px;}
	.wrap .mv .txt h2{font-size:44px;}
	.wrap .mv .txt p{margin-bottom: 15px;}

	.wrap .sec01 .fbox .item{width: 100%;}
	.wrap .sec01 .fbox .item .txt > p{margin: 10px 0 30px;}
	
	.wrap .sec02 .gsap_box .item{overflow: hidden;}
	.wrap .sec02 .gsap_box .item .txt .tit h3{font-size:32px;}
	.wrap .sec02 .gsap_box .item::after,
	.wrap .sec02 .gsap_box .item.left::after{right: -300px; bottom: -300px;}
	.wrap .sec02 .gsap_box .item figure{height: 240px;}

	.wrap .sec04 .mobile_list .item h3{font-size:18px;}
	.wrap .sec04 .mobile_list .item h3 img{transform:translateY(2px);}
}