@charset "utf-8";

/*-------------------------------------------------------------------
	@ Layout
-------------------------------------------------------------------*/
/* header */
header{display: flex; align-items: center; position: fixed; left: 0; top: 0; width: 100%; height: 100px; z-index: 9000;}
header > div{display: flex; justify-content: space-between; align-items: center; width: 1280px; margin: 0 auto;}
header h1 a{display: block; width: 97px; height: 52px; background: url('../images/common/logo.svg') left center / 96px 40px no-repeat; text-indent: -9999em;}
header .nav{display: flex; gap: 60px;}
header .nav li a{display: block; color: #fff; font-size: 18px; font-weight: 700; line-height: 52px; letter-spacing: -0.36px;}
header.scroll{background: #fff; transition: background 0.3s ease;}
header.scroll h1 a{background-image: url('../images/common/logo_on.svg');}
header.scroll .nav li a{color: #101010;}

/* main */
main{position: relative;}

/* footer */
footer{padding: 60px 0; background: #101010;}
footer > div{display: flex; justify-content: space-between; align-items: center; width: 1280px; margin: 0 auto; color: #fff;}
footer .info-box .sg{color: #FFF; font-family: Poppins; font-size: 24px; font-weight: 700; line-height: 150%; letter-spacing: -0.48px;}
footer .info-box .info{display: flex; margin-top: 24px;}
footer .info-box .info li{position: relative; padding: 0 9px 0 8px; color: #FFF; font-size: 14px; line-height: 20px; letter-spacing: -0.28px;}
footer .info-box .info li::after{position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background: #fff; opacity: 0.2; content: "";}
footer .info-box .info li:first-child{padding-left: 0;}
footer .info-box .info li:last-child::after{display: none;}
footer .info-box .email{margin-top: 8px; color: #FFF; font-size: 14px; line-height: 20px;}
footer .info-box .email a{color: #fff; vertical-align: top;}
footer .info-box .copyright{margin-top: 24px; color: #7E7E7E; font-size: 14px; line-height: 20px; letter-spacing: -0.28px;}
.btn-top{position: fixed; left: 50%; bottom: 40px; margin-left: 580px; z-index: 10000;}
.btn-top #btnTop{width: 60px; height: 60px; border: 1px solid #CCC; border-radius: 100%; background: url('../images/common/ico_top.svg') center no-repeat #fff; transform: translateY(20px); opacity: 0; transition: all 0.4s ease;}
.btn-top.on #btnTop{transform: translateY(0); opacity: 1;}


/*-------------------------------------------------------------------
	@ Componets
-------------------------------------------------------------------*/
/* button */
.btn-group{margin-top: 60px;}
.btn-primary{display: inline-flex; justify-content: center; align-items: center; width: 160px; height: 48px; border-radius: 50px; border: 1px solid #63C6A0; background: none; color: #63C6A0; font-size: 16px; font-weight: 700; letter-spacing: -0.32px; box-sizing: border-box;}
.btn-primary.w{border-color: #fff; color: #fff;}

/* fade-up */
.fade-up{transform: translateY(60px); opacity: 0; transition: all 1.0s ease;}
.fade-up.on{transform: translate(0, 0); opacity: 1;}
.fade-up[data-delay="0.1"] { transition-delay: 0.1s; }
.fade-up[data-delay="0.2"] { transition-delay: 0.2s; }
.fade-up[data-delay="0.3"] { transition-delay: 0.3s; }
.fade-up[data-delay="0.4"] { transition-delay: 0.4s; }

.fade-left{transform: translateX(100px); opacity: 0; transition: all 1.0s ease;}
.fade-left.on{transform: translate(0, 0); opacity: 1;}
.fade-left[data-delay="0.1"] { transition-delay: 0.1s; }
.fade-left[data-delay="0.2"] { transition-delay: 0.2s; }
.fade-left[data-delay="0.3"] { transition-delay: 0.3s; }
.fade-left[data-delay="0.4"] { transition-delay: 0.4s; }


/*-------------------------------------------------------------------
	@ Pages
-------------------------------------------------------------------*/
/* main */
.main h2{display: inline-block; position: relative; color: #101010; font-size: 40px; font-weight: 700; line-height: 52px; letter-spacing: -0.8px;}
.main h2::after{position: absolute; right: -20px; bottom: 12px; width: 12px; aspect-ratio: 1/1; border-radius: 100%; background: #63C6A0; content: "";}
.main h2 + p{margin-top: 12px; color: #5A5A5A; font-size: 24px; line-height: 32px; letter-spacing: -0.48px;}
.main .m-visual{position: relative; width: 100%; background: #999;}
.main .m-visual .swiper-container{overflow: hidden;}
.main .m-visual .swiper-slide{position: relative; height: 100vh; }
.main .m-visual .swiper-slide img{width: 100%; height: 100%; object-fit: cover;}
.main .m-visual .swiper-slide .in{position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; text-align: center; z-index: 10;}
.main .m-visual .swiper-slide .in strong{display: inline-block; position: relative; color: #FFF; font-size: 80px; font-weight: 700; line-height: 100%; letter-spacing: -1.6px;}
.main .m-visual .swiper-slide .in strong::after{position: absolute; right: -26px; bottom: 12px; width: 16px; aspect-ratio: 1/1; border-radius: 100%; background: #63C6A0; content: "";}
.main .m-visual .swiper-slide .in a{margin-top: 80px;}
.main .m-visual .indicator{position: absolute; left: 40px; top: 50%; transform: translateY(-50%); z-index: 10;}
.main .m-visual .indicator li{position: relative; text-align: left;}
.main .m-visual .indicator li::after{position: absolute; left: 8px; top: 16px; width: 1px; height: 44px; background: #fff; opacity: 0.2; content: "";}
.main .m-visual .indicator li:last-child::after{display: none;}
.main .m-visual .indicator li button{display: block; position: relative; padding-left: 21px; background: none; color: #FFF; font-size: 14px; font-weight: 700; letter-spacing: -0.28px; opacity: 0.2; transition: all 0.7s ease;}
.main .m-visual .indicator li button::before{position: absolute; left: 0; top: 0; width: 15px; height: 15px; border: 1px solid #fff; border-radius: 100%; content: ""; box-sizing: border-box;}
.main .m-visual .indicator li button::after{position: absolute; left: 5px; top: 5px; width: 5px; height: 5px; border-radius: 100%; background: #fff; content: ""; box-sizing: border-box;}
.main .m-visual .indicator li + li{margin-top: 44px;}
.main .m-visual .indicator li.on button{opacity: 1;}
.main .m-business{padding: 185px 0; background: #F8FBFF; text-align: center;}
.main .m-business .items{display: inline-flex; gap: 60px; margin-top: 80px;}
.main .m-business .items li{position: relative; width: 280px; height: 312px; padding-top: 220px; border: 1px solid #E4E4E4; border-radius: 24px; background: #FFF; color: #101010; font-size: 18px; font-weight: 700; line-height: 26px; letter-spacing: -0.36px; box-sizing: border-box;}
.main .m-business .items li img{position: absolute; left: 60px; top: 40px; z-index: 10;}
.main .m-business .items li span{position: absolute; left: 0; top: 0; width: 58px; height: 58px; border-radius: 100%; background: #BBF9E1; transform: scale(0); transition: all 0.7s cubic-bezier(0.34, 1.96, 0.64, 1);;}
.main .m-business .items li.on span{transform: scale(1);}
.main .m-business .items li.item1 span{left: 142px; top: 79px;}
.main .m-business .items li.item2 span{left: 143px; top: 132px;}
.main .m-business .items li.item3 span{left: 87px; top: 80px;}
.main .m-business .txt{margin-top: 60px; color: #101010; font-size: 18px; line-height: 26px; letter-spacing: -0.36px;}
.main .m-projects{padding: 260px 0 0; text-align: center;}
.main .m-projects .album-slider{position: relative; width: 100%; height: 493px; padding-top: 0; margin-top: 120px; overflow: hidden; user-select: none; -webkit-user-select: none;}
.main .m-projects .album-slider .slider-track{position: relative; width: 100%;}
.main .m-projects .album-slider .slide{position: absolute; top: 50%; left: 50%; width: 324px; height: 324px; margin: 0 0 0 -162px; border-radius: 28px; overflow: hidden; background: #ddd; opacity: 0; pointer-events: none; will-change: transform, opacity; transition: transform .7s ease, opacity .7s ease, filter .7s ease;}
.main .m-projects .album-slider .slide.is-out-prev{opacity: 0; z-index: 1; transform: translate(-1170px, 450px) rotate(-45deg);}
.main .m-projects .album-slider .slide.is-out-next{opacity: 0; z-index: 1; transform: translate(1170px, 450px) rotate(45deg);}
.main .m-projects .album-slider .slide.is-active{opacity: 1; z-index: 7; pointer-events: auto; transform: translate(0, 0) rotate(0deg) scale(1);}
.main .m-projects .album-slider .slide.is-prev{opacity: 1; z-index: 6; transform: translate(-400px, 120px) rotate(-15deg);}
.main .m-projects .album-slider .slide.is-prev2{opacity: 1; z-index: 5; transform: translate(-790px, 290px) rotate(-30deg);}
.main .m-projects .album-slider .slide.is-prev3{opacity: 1; z-index: 4; transform: translate(-1170px, 450px) rotate(-45deg);}
.main .m-projects .album-slider .slide.is-next{opacity: 1; z-index: 6; transform: translate(400px, 120px) rotate(15deg);}
.main .m-projects .album-slider .slide.is-next2{opacity: 1; z-index: 5; transform: translate(790px, 290px) rotate(30deg);}
.main .m-projects .album-slider .slide.is-next3{opacity: 1; z-index: 4; transform: translate(1170px, 450px) rotate(45deg);}
.main .m-projects .album-slider .slide img{display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; pointer-events: none;}
.main .m-projects .album-slider .slide .info{display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); opacity: 0; transition: all 0.3s ease;}
.main .m-projects .album-slider .slide .info p{color: #FFF; text-align: center; font-size: 18px; font-weight: 700; line-height: 26px; letter-spacing: -0.36px;}
.main .m-projects .album-slider .slide:hover .info{opacity: 1;}
.main .m-projects .album-slider .progress{position: relative; width: 260px; height: 4px; margin: 372px auto 0; background: #F4F7FA; border-radius: 10px; overflow: hidden;}
.main .m-projects .album-slider .progress .bar{position: absolute; left: 0; top: 0; width: 20%; height: 100%; background: #63C6A0; border-radius: 10px; transition: width .7s ease;}
.main .m-partners{padding: 230px 0; background: #F8FBFF; text-align: center;}
.main .m-partners .list{position: relative; margin-top: 80px;}
.main .m-partners .list .box{width: max-content; text-align: center; will-change: transform;}
.main .m-partners .list .box ul{display: inline-flex; gap: 24px;}
.main .m-partners .list .box ul li{border-radius: 12px; overflow: hidden;}
.main .m-partners .list .box div + div{margin-top: 24px;}
.main .m-contact{position: relative; text-align: center; overflow: hidden;}
.main .m-contact .info{position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; z-index: 10;}
.main .m-contact .info h2{color: #fff;}
.main .m-contact .info p{color: #fff;}
.main .m-contact .swiper-slide{height: 600px;}
.main .m-contact .swiper-slide img{width: 100%; height: 100%; object-fit: cover;}

/* 서브 */
.sub .visual{position: relative; width: 100%; height: 480px; padding-top: 208px; background-repeat: no-repeat; background-position: center; background-size: cover; text-align: center; box-sizing: border-box;}
.sub .visual strong{display: inline-block; position: relative; color: #FFF; font-size: 40px; font-weight: 700; line-height: 52px; letter-spacing: -0.8px;}
.sub .visual strong::after{position: absolute; right: -17px; bottom: 12px; width: 12px; aspect-ratio: 1/1; border-radius: 100%; background: #63C6A0; content: "";}
.sub .visual p{margin-top: 12px; color: #FFF; font-size: 24px; line-height: 32px; letter-spacing: -0.48px;}
.sub .content{padding: 120px 0 200px;}
.sub .head{margin-bottom: 120px; text-align: center;}
.sub .head h2{display: block; font-size: 60px; font-weight: 700; line-height: 76px; letter-spacing: -1.2px;}
.sub .head h2 + p{margin-top: 24px; color: #5A5A5A; font-size: 18px; line-height: 26px; letter-spacing: -0.36px;}
.sub h3{display: block; text-align: center; font-size: 40px; font-weight: 700; line-height: 52px; letter-spacing: -0.8px;}
.sub h3 + span{display: block; margin-top: 8px; text-align: center; font-size: 32px; line-height: 32px; letter-spacing: -0.64px;}
.sub h3 + p{margin-top: 12px; color: #5A5A5A; font-size: 18px; line-height: 26px; letter-spacing: -0.36px; text-align: center;}
.sub .quote{margin-top: 60px; text-align: center; font-size: 24px; line-height: 32px; letter-spacing: -0.48px;}

/* 서브페이지 하단 공통 */
.inquiry-cta{height: 400px; padding-top: 160px; background: url('../images/common/bg_inquiry_cta.jpg') center / cover no-repeat; text-align: center; box-sizing: border-box;}
.inquiry-cta p{color: #FFF; font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: -0.48px;}
.inquiry-cta .btn-group{display: inline-flex; gap: 12px; margin-top: 40px;}

/* ABOUT */
.about .visual{background-image: url('../images/about/visual.jpg');}
.about .intro{padding-bottom: 200px;}
.about .intro .txt{margin-top: 40px; color: #5A5A5A; text-align: center; font-size: 18px; line-height: 26px; letter-spacing: -0.36px;}
.about .partnership{display: flex; align-items: center; justify-content: center; width: 100%; height: 800px; background: url('../images/about/bg_partnership.jpg') center / cover no-repeat;}
.about .partnership h3{color: #fff;}
.about .partnership h3 + span{color: #fff;}
.about .partnership .quote{color: #fff;}
.about .partnership .txt{margin-top: 40px; color: #fff; text-align: center; font-size: 18px; line-height: 26px; letter-spacing: -0.36px;}
.about .standards{padding: 200px 0; text-align: center;}
.about .standards .info{display: inline-flex; margin-top: 80px;}
.about .standards .info li{padding: 0 80px 26px; border-left: 1px solid #E4E4E4;}
.about .standards .info li:first-child{border-left: 0;}
.about .standards .info li h4{display: block; margin-top: 40px; font-size: 18px; font-weight: 700; line-height: 26px; letter-spacing: -0.36px;}
.about .standards .info li p{margin-top: 12px; color: #5A5A5A; font-size: 16px; line-height: 24px; letter-spacing: -0.32px;}
.about .esg{width: calc(100% - 120px); margin: 0 auto; text-align: center;}
.about .esg .bg{height: 600px; border-radius: 24px; background: url('../images/about/bg_esg.jpg') center / cover no-repeat; overflow: hidden;}
.about .esg .box{display: inline-block; padding: 60px 80px 0; margin-top: -160px; border-radius: 24px; background: #fff; text-align: left;}
.about .esg .box *{text-align: left;}
.about .esg .box .txt{margin-top: 40px; color: #5A5A5A; text-align: center; font-size: 18px; line-height: 26px; letter-spacing: -0.36px;}

/* BUSINESS */
.business .visual{background-image: url('../images/business/visual.jpg');}
.business .capability .box{padding: 80px 0; margin-top: 80px; background: url('../images/business/bg_capability.jpg') center / cover no-repeat; text-align: center;}
.business .capability .box .info{display: inline-grid; grid-template-columns: repeat(2, 1fr); gap: 28px;}
.business .capability .box .info li{width: 517px; min-height: 190px; padding: 40px 0 0; border-radius: 24px; background: rgba(0, 0, 0, 0.40); backdrop-filter: blur(6px); box-sizing: border-box;}
.business .capability .box .info li h4{display: block; color: #FFF; font-size: 18px; font-weight: 700; line-height: 26px; letter-spacing: -0.36px;}
.business .capability .box .info li p{margin-top: 12px; color: #FFF; font-size: 16px; line-height: 24px; letter-spacing: -0.32px;}
.business .strengths{padding: 200px 0; text-align: center;}
.business .strengths .info{display: inline-grid; grid-template-columns: repeat(2, 1fr); gap: 80px 28px; margin-top: 80px;}
.business .strengths .info li{width: 626px; padding-top: 40px; padding-left: 24px; border-top: 2px solid #101010; text-align: left; box-sizing: border-box;}
.business .strengths .info li.item1{background: url('../images/business/ico_strength01.svg') right 24px top 40px no-repeat;}
.business .strengths .info li.item2{background: url('../images/business/ico_strength02.svg') right 24px top 40px no-repeat;}
.business .strengths .info li.item3{background: url('../images/business/ico_strength03.svg') right 24px top 40px no-repeat;}
.business .strengths .info li.item4{background: url('../images/business/ico_strength04.svg') right 24px top 40px no-repeat;}
.business .strengths .info li h4{display: block; font-size: 18px; font-weight: 700; line-height: 26px; letter-spacing: -0.36px;}
.business .strengths .info li p{margin-top: 12px; color: #5A5A5A; font-size: 16px; line-height: 24px; letter-spacing: -0.32px;}
.business .services{padding: 200px 0; background: #F8FBFF; text-align: center;}
.business .services .box{position: relative; margin-top: 80px;}
.business .services .box .info{display: inline-flex; position: relative; z-index: 10;}
.business .services .box .info li{width: 360px;}
.business .services .box .info li h4{display: inline-block; border: 10px solid #E9F1FB; border-radius: 100%; background: #fff;}
.business .services .box .info li h4 span{display: flex; align-items: center; justify-content: center; width: 220px; aspect-ratio: 1/1; border: 1px solid #ccc; border-radius: 100%; font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: -0.48px; box-sizing: border-box;}
.business .services .box .info li p{margin-top: 24px; color: #5A5A5A; font-size: 16px; line-height: 24px; letter-spacing: -0.32px;}
.business .services .box .line{position: relative; width: 1200px; height: 280px; margin: -192px auto 0; border-radius: 999px; border: 1px dashed #AAA;}
.business .services .box .line p{display: inline-flex; align-items: center; justify-content: center; position: absolute; bottom: -25px; transform: translateX(-50%); height: 50px; padding: 0 40px; border-radius: 99px; background: #101010; color: #FFF; font-size: 18px; font-weight: 700; line-height: 26px; letter-spacing: -0.36px;}
.business .infra{padding: 200px 0 0; text-align: center;}
.business .infra h4{display: block; text-align: center; font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: -0.48px;}
.business .infra h4 + p{margin-top: 24px; color: #5A5A5A; text-align: center; font-size: 16px; line-height: 24px; letter-spacing: -0.32px;}
.business .infra h3 + p + h4{margin-top: 80px;}
.business .infra .list{display: inline-flex; gap: 28px; margin-top: 60px;}
.business .infra .list li{width: 300px; aspect-ratio: 1/1; border-radius: 24px; overflow: hidden;}
.business .infra .list li img{width: 100%; height: 100%; object-fit: cover;}
.business .infra .list + h4{margin-top: 120px;}

/* PROJECT */
.project .visual{background-image: url('../images/project/visual.jpg');}
.project .tab{text-align: center;}
.project .tab ul{display: inline-flex; gap: 24px; padding: 10px; border: 1px solid #E4E4E4; border-radius: 50px; box-sizing: border-box;}
.project .tab ul li a{display: flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px; border-radius: 30px; background: #fff; font-size: 16px;}
.project .tab ul li a.on{background: #63C6A0; color: #fff; font-weight: 700;}
.project .project-list{margin-top: 60px; text-align: center;}
.project .project-list .list{display: inline-grid; grid-template-columns: repeat(4, 1fr); gap: 80px 28px; margin: 0 auto;}
.project .project-list .list li{width: 300px;}
.project .project-list .list li button{background: none;}
.project .project-list .list li button .thum{width: 100%; aspect-ratio: 1/1; border-radius: 24px; overflow: hidden;}
.project .project-list .list li button .thum img{width: 100%; height: 100%; object-fit: cover;}
.project .project-list .list li button .info{padding: 24px 12px 0; text-align: left;}
.project .project-list .list li button .info .label{display: inline-flex; align-items: center;height: 32px; padding: 0 16px; border-radius: 20px; background: #F4F7FA; color: #878787; font-size: 14px; font-weight: 500; letter-spacing: -0.28px;}
.project .project-list .list li button .info .artist{display: block; margin-top: 12px; font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: -0.48px;}
.project .project-list .list li button .info .title{display: block; margin-top: 12px; font-size: 14px; font-weight: 700; line-height: 20px; letter-spacing: -0.28px;}
.project .project-list .list li button .info .meta{display: block; margin-top: 4px; color: #5A5A5A; font-size: 14px; line-height: 20px; letter-spacing: -0.28px;}
.project .project-list .btn-group{margin-top: 80px;}
.modal-project{display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 10000;}
.modal-project > div{display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4);}
.modal-project .content{position: relative; width: 536px; padding: 60px; border-radius: 40px; background: #fff; text-align: center;}
.modal-project .btn-close{position: absolute; right: 0; top: 0; width: 80px; height: 80px; background: url('../images/common/ico_close.svg') center no-repeat;}
.modal-project .gallery{position: relative; width: 400px; margin: 0 auto;}
.modal-project .gallery .swiper-container{border-radius: 24px; overflow: hidden;}
.modal-project .gallery .swiper-button-prev{left: -68px; top: 50%; width: 48px; height: 48px; margin:0; margin-top: -24px; border: 1px solid #CCC; border-radius: 100%; background:url('../images/project/btn_prev.svg') center no-repeat; box-sizing: border-box;}
.modal-project .gallery .swiper-button-prev::after{display: none;}
.modal-project .gallery .swiper-button-next{right: -68px; top: 50%; width: 48px; height: 48px; margin:0; margin-top: -24px; border: 1px solid #CCC; border-radius: 100%; background:url('../images/project/btn_next.svg') center no-repeat; box-sizing: border-box;}
.modal-project .gallery .swiper-button-next::after{display: none;}
.modal-project .gallery .swiper-scrollbar{position: relative; left: auto; top: auto; bottom: auto; width: 260px !important; height: 4px; margin: 20px auto 0; border-radius: 10px; background: #F4F7FA; font-size: 0; line-height: 0; overflow: hidden;}
.modal-project .gallery .swiper-scrollbar .swiper-pagination-progressbar-fill{background: #63C6A0 !important;}
.modal-project .info{margin-top: 40px;}
.modal-project .info .label{display: inline-flex; align-items: center;height: 32px; padding: 0 16px; border-radius: 20px; background: #F4F7FA; color: #878787; font-size: 14px; font-weight: 500; letter-spacing: -0.28px;}
.modal-project .info .artist{display: block; margin-top: 12px; font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: -0.48px;}
.modal-project .info .title{display: block; margin-top: 12px; font-size: 14px; font-weight: 700; line-height: 20px; letter-spacing: -0.28px;}
.modal-project .info .meta{display: block; margin-top: 4px; color: #5A5A5A; font-size: 14px; line-height: 20px; letter-spacing: -0.28px;}

/* PROCESS */
.process .visual{background-image: url('../images/process/visual.jpg');}
.process .step{display: inline-flex; margin-top: 80px;}
.process .step li{position: relative; width: 268px; text-align: center;}
.process .step li::after{position: absolute; right: -16px; top: 94px; width: 32px; height: 32px; background: url('../images/process/ico_arw.svg') center no-repeat; content: "";}
.process .step li:last-child::after{display: none;}
.process .step li h4{display: inline-flex; align-items: center; justify-content: center; width: 200px; aspect-ratio: 1/1; border: 10px solid #E4E4E4; border-radius: 100%; background: #101010; text-align: center;}
.process .step li h4 strong{display: block; width: 120px; margin: 0 auto; color: #FFF; font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: -0.48px;}
.process .step li h4 .txt{display: block; padding-top: 8px; margin-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.20); color: #FFF; font-size: 18px; line-height: 26px; letter-spacing: -0.36px; font-weight: 400;}
.process .step li p{margin-top: 16px; color: #5A5A5A; font-size: 16px; line-height: 24px; letter-spacing: -0.32px;}
.process .album{padding-bottom: 200px; text-align: center;}
.process .md{position: relative; width: calc(100% - 120px); margin: 0 auto; text-align: center;}
.process .md .tit{position: absolute; left: 0; top: 200px; width: 100%;}
.process .md .tit h3{color: #fff;}
.process .md .tit h3 + p{color: #fff;}
.process .md .bg{height: 600px; border-radius: 24px; background: url('../images/process/bg_md.jpg') center / cover no-repeat; overflow: hidden;}
.process .md .box{width: 1000px; padding: 0 0 0; margin: -160px auto 0; border-radius: 60px; background: #fff;}

/* CONTACT */
.contact .visual{background-image: url('../images/contact/visual.jpg');}
.contact .map{text-align: center;}
.contact .map img{border: 1px solid #E4E4E4; border-radius: 24px; overflow: hidden;}
.contact .info{margin-top: 40px; text-align: center;}
.contact .info strong{display: block; color: #000; font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: -0.48px;}
.contact .info p{margin-top: 24px; font-size: 18px; line-height: 26px; letter-spacing: -0.36px;}
.contact .info ul{display: inline-flex; margin-top: 4px;}
.contact .info ul li{position: relative; padding: 0 8px; color: #5A5A5A; font-size: 16px; line-height: 24px; letter-spacing: -0.32px;}
.contact .info ul li::after{position: absolute; left: 0; top: 50%; width: 1px; height: 12px; margin-top: -6px; background: rgba(0, 0, 0, 0.20); content: "";}
.contact .info ul li:first-child::after{display: none;}
.contact .form{width: 480px; padding-top: 24px; margin: 80px auto 0; border-top: 4px solid #101010;}
.contact .form .group input[type=text]{width: 100%; height: 48px; padding: 0 16px; border: 1px solid #CCC; border-radius: 4px; color: #5A5A5A; font-size: 16px; letter-spacing: -0.32px; box-sizing: border-box;}
.contact .form .group input[type=text]::placeholder{color: #ACACAC;}
.contact .form .group textarea{width: 100%; height: 240px; padding: 12px 16px; border: 1px solid #CCC; border-radius: 4px; color: #5A5A5A; font-size: 16px; letter-spacing: -0.32px; line-height: 160%; box-sizing: border-box;}
.contact .form .group textarea::placeholder{color: #ACACAC;}
.contact .form .group + .group{margin-top: 12px;}
.contact .form .agree{margin-top: 24px; text-align: center;}
.contact .form .agree input[type=checkbox]{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; clip: rect(0, 0, 0, 0); overflow: hidden;}
.contact .form .agree label{display: inline-block; position: relative; padding-left: 32px; cursor: pointer; color: #5A5A5A; font-size: 16px; line-height: 24px; letter-spacing: -0.32px;}
.contact .form .agree label::before{position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background: url('../images/common/checkbox.svg') no-repeat center / contain; content: "";}
.contact .form .agree label u{text-underline-offset: 4px;}
.contact .form .agree input[type=checkbox]:checked + label::before{background-image: url('../images/common/checkbox_on.svg');}
.contact .form .btn-group{margin-top: 40px;}
.contact .form .btn-group .btn-submit{display: flex; align-items: center; justify-content: center; width: 100%; height: 60px; border: 1px solid #63C6A0; border-radius: 99px; background: #FFF; color: #63C6A0; font-size: 18px; font-weight: 700; line-height: 26px; letter-spacing: -0.36px; box-sizing: border-box;}
.modal-alert{display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 10000;}
.modal-alert > div{display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4);}
.modal-alert .content{position: relative; width: 320px; border-radius: 12px; background: #fff; text-align: center; overflow: hidden;}
.modal-alert .content p{padding: 32px; color: #5A5A5A; text-align: center; font-size: 16px; line-height: 24px; letter-spacing: -0.32px;}
.modal-alert .content button{display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; background: #63C6A0; color: #FFF; font-size: 16px; font-weight: 700; line-height: 24px; letter-spacing: -0.32px;}