/* Setting */ section{overflow:hidden;line-height:1.5;position:relative;padding:100px 0;word-break:keep-all} section .section_fix{width:calc(100% - 40px);margin:0 auto;overflow:hidden;max-width:1600px;} section .section_title{margin:0 auto 60px;overflow:hidden;} section .section_title h3{font-size:40px;font-weight:700;position:relative;display:block;} section .section_title p{font-size:50px;line-height:1.2} section .section_title span{font-size:20px;display:inline-block;padding:0 20px;color:#fff;font-weight:bold;line-height:35px;border-radius:35px;background:#B03CCC;margin-bottom:20px;} section .section_body{overflow:hidden;} .header .header_top .logo{background:url('../img/logo_b.png') no-repeat center;background-size:contain} .header .header_top .gnb>li a{color:#000} .header .header_top .gnb>li a.on{color:#B03CCC} .header .header_top .gnb>li:hover a{color:#B03CCC} .header .header_top .sns_link img.hover_img{display:none} .header .header_top .sns_link img.normal_img{display:block} .m_header .m_logo{background:url('../img/logo_b.png') no-repeat center;background-size:contain;} .m_header .m_gnb a{color:#000;} .m_header .m_gnb a span{background:#000} /* Modal */ .modal-area{height: 100%;left: 0;position: fixed;top: 0;width: 100%;z-index: 2000;align-items: center;background-color: #202020e6;display: flex;justify-content: center;padding:20px;box-sizing:border-box;gap:20px;opacity:0;pointer-events: none;cursor: pointer;word-break:keep-all} .modal-area.on{opacity:1;pointer-events: auto;} .modal-area .modal-fix{width:100%;height:100%;max-width:1600px;max-height:700px;overflow:auto;box-sizing:border-box;border-radius:20px;background:#fff;display:flex;transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s;transform: translateX(0);opacity: 1;cursor: default;} .modal-area .modal-fix.exit-left {transform: translateX(50%);opacity: 0;} .modal-area .modal-fix.enter-right {transition: none;transform: translateX(-50%);opacity: 0;} .modal-area .modal-fix.exit-right {transform: translateX(-50%);opacity: 0;} .modal-area .modal-fix.enter-left {transition: none;transform: translateX(50%);opacity: 0;} .modal-area .modal-fix.exit_center{transform: translateY(50%);opacity: 0;} .modal-area .modal-fix.enter-center{transform: translateY(50%);opacity: 0;} .modal-area .modal-fix .padding_box{padding:0px 80px;box-sizing:border-box;width:100%;height:100%;display:flex;} .modal-area .modal-fix .padding_box .left{width:calc(100% - 650px);box-sizing:border-box;padding:80px 20px 80px 0px;} .modal-area .modal-fix .padding_box .left .left-content{flex: 1;display: flex;flex-direction: column;justify-content: space-between;height:100%;} .modal-area .modal-fix .padding_box .left .left-content .top h3 {font-size: 55px;margin-bottom: 20px;} .modal-area .modal-fix .padding_box .left .left-content .top p {font-size: 20px;line-height: 1.5;margin-bottom: 30px;} .modal-area .modal-fix .padding_box .left .left-content .top .yellow{color: #E9C66D;font-weight: bold;font-size:18px;} .modal-area .modal-fix .padding_box .left .left-content .top .blue {color: #88BFD2;font-weight: bold;font-size:18px;} .modal-area .modal-fix .padding_box .left .left-content .bottom .process-badge{display:inline-block;background: #373737;color: #fff;line-height:27px;border-radius:30px;padding:0 20px;font-size:16px;margin-bottom:20px;} .modal-area .modal-fix .padding_box .left .left-content .bottom .steps {display: flex;align-items: flex-start;} .modal-area .modal-fix .padding_box .left .left-content .bottom .step {text-align: center;flex: 1;} .modal-area .modal-fix .padding_box .left .left-content .bottom .step img {width: 100%;display: block;margin: 0 auto 10px;max-width:100px;mix-blend-mode: luminosity;} .modal-area .modal-fix .padding_box .left .left-content .bottom .step span {font-size: 16px;font-weight: 600;line-height:1.2;min-height: 2.4em;display:flex;flex-flow: wrap;place-content: center;} .modal-area .modal-fix .padding_box .left .left-content .bottom .arrow {width:10px;height:18px;background:url('../img/03_service/arrow.png') no-repeat center;background-size:contain;margin:41px 16px;} .modal-area .modal-fix .padding_box .right{width:630px;overflow-x:hidden;overflow-y:auto;padding:80px 0px 80px 20px;} .modal-area .modal-fix .padding_box .right img{width:100%;} .modal-area .modal-fix .padding_box .right ul{width:100%;} .modal-area .modal-fix .padding_box .right ul li{width: calc(50% - 5px);margin-bottom: 10px;float: left;} .modal-area .modal-fix .padding_box .right ul li.all{width:100%} .modal-area .modal-fix .padding_box .right ul li img{border-radius: 10px;} .modal-area .modal-fix .padding_box::-webkit-scrollbar{width: 6px;} .modal-area .modal-fix .padding_box::-webkit-scrollbar-button:vertical:start:decrement{display:block;height:20px;} .modal-area .modal-fix .padding_box::-webkit-scrollbar-button:vertical:end:decrement{display:block;height:20px;} .modal-area .modal-fix .padding_box::-webkit-scrollbar-thumb {height: 10%;border-radius: 10px;background: #B03CCC;} .modal-area .modal-fix .padding_box .right::-webkit-scrollbar{width: 6px;} .modal-area .modal-fix .padding_box .right::-webkit-scrollbar-button:vertical:start:decrement{display:block;height:80px;} .modal-area .modal-fix .padding_box .right::-webkit-scrollbar-button:vertical:end:decrement{display:block;height:80px;} .modal-area .modal-fix .padding_box .right::-webkit-scrollbar-thumb {height: 10%;border-radius: 10px;background: #B03CCC;} .modal-area .modal-fix .btn_close{position: absolute;top: 40px;right: 40px;display: block;width: 24px;height: 24px;z-index: 10;} .modal-area .modal-fix .btn_close:before, .modal-area .modal-fix .btn_close:after{content: '';position: absolute;top: 50%;left: 50%;width: 30px;height: 3px;background: #9F9F9F;border-radius: 2px;backface-visibility: hidden;transition: transform 0.3s ease, background 0.3s;} .modal-area .modal-fix .btn_close:before {transform: translate(-50%, -50%) rotate(45deg);} .modal-area .modal-fix .btn_close:after {transform: translate(-50%, -50%) rotate(-45deg);} .modal-area .modal-fix .btn_close:hover:before, .modal-area .modal-fix .btn_close:hover:after{background: #B03CCC;} .modal-area>a{width:100%;max-width:82px;} .modal-area>a img{width:100%} .modal-area>a img.hover {display: none;} .modal-area>a:hover img.default {display: none;} .modal-area>a:hover img.hover {display: block;} /* Section01 */ #section01{background:url('../img/03_service/01/page_top-1.jpg') no-repeat center bottom;background-size:cover;padding:150px 0 800px;z-index:1;} #section01:after{content:'';width:100%;height:50px;background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));position:absolute;left:0;bottom:0;z-index:-1;} #section01 .section_body{overflow:visible;z-index:2} #section01 .section_body .textbox{text-align:center;overflow:visible;} #section01 .section_body .textbox span{display:block;font-size:18px;font-weight:600;margin:0 auto 40px;background:#B03CCC;color:#fff;width:140px;line-height:30px;border-radius:30px;overflow:visible;} #section01 .section_body .textbox h3{display:block;font-size:70px;line-height:1.1;color:#B03CCC;margin-bottom:40px;} #section01 .section_body .textbox b{font-size:35px;line-height:1.2;display:block;margin:0 auto 40px;} #section01 .section_body .textbox p{font-size:24px;} #section01 .section_body.mobile{display:none} #section01 .section_body.mobile .textbox.top{background:url('../img/03_service/01/page_top-1-m.jpg') no-repeat center top;background-size:cover;padding:60px 0 200px;margin:40px auto 20px;} #section01 .section_body.mobile .textbox b{font-size:18px;margin-bottom:5px;} #section01 .section_body.mobile .textbox p{font-size:14px;} /* Section02 */ #section02{z-index:10;padding:80px 0 0px;} #section02 .section_body{padding:25px;} #section02 .section_body .item{width:calc(25% - 20px);margin:0 10px;float:left;box-shadow:0 0 25px rgba(0,0,0,0.2);overflow:hidden;border-radius:15px;transition:0.5s;position:relative;} #section02 .section_body .item>a{position:absolute;width:100%;height:100%;top:0;left:0;} #section02 .section_body .item .imgbox{position:relative;width:100%;height:250px;overflow:hidden;} #section02 .section_body .item .imgbox .thumb{width:100%;position:absolute;top:0;left:0;height:100%;transition:0.5s;} #section02 .section_body .item .imgbox .icobox{position:absolute;bottom:20px;left:40px;} #section02 .section_body .item .imgbox .icobox img{height:26px;margin-right:8px;} #section02 .section_body .item .textbox{padding:40px} #section02 .section_body .item .textbox h3{font-size:45px;line-height:1.2;display:block;margin:0 auto 0px;} #section02 .section_body .item .textbox p{font-size:25px;margin:0 auto 40px;font-weight:600} #section02 .section_body .item .textbox a{display:block;width:100%;line-height:60px;font-size:20px;background:#343434;color:#fff;border-radius:30px;text-align:center;} #section02 .section_body .item:hover .textbox a{background:#B03CCC} #section02 .section_body .item:hover{box-shadow:0 0 25px rgba(0,0,0,0.5);} #section02 .section_body .item:hover .imgbox .thumb{transform:scale(1.2);} /* Section03 */ #section03 .section_fix{max-width:1200px;} #section03 .section_body .textarea{text-align:center;margin:0 auto 100px;} #section03 .section_body .textarea h3{font-size:50px;display:block;margin:0 auto 20px;} #section03 .section_body .textarea p{font-size:24px;line-height:1.5} #section03 .section_body .imgarea{position:relative;z-index:1} #section03 .section_body .imgarea .textbox{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100% + 30px);z-index:100} #section03 .section_body .imgarea .textbox ul{width:100%;display:block;} #section03 .section_body .imgarea .textbox ul li{width:calc(100% / 3);float:left;text-align:center;position:relative;padding-bottom:calc(100% / 3);} #section03 .section_body .imgarea .textbox ul li .text{content:'';position:absolute;width:calc(100% - 100px);height:calc(100% - 100px);border:1px solid #9D9ACB;border-radius:100%;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;justify-content: center;align-items: center;flex-direction: column} #section03 .section_body .imgarea .textbox ul li .text b{display:block;font-size:30px;} #section03 .section_body .imgarea .textbox ul li .text p{font-size:16px;} #section03 .section_body .imgarea .imgbox{aspect-ratio:1820/720;display: flex;justify-content: center;align-items: center;position: relative;overflow:hidden;} #section03 .section_body .imgarea .imgbox .bg01{position:absolute;width:100%;height:100%;top:0;left:0;background:url('../img/03_service/01/arrow_01.png') no-repeat center;background-size:cover;opacity:0.6} #section03 .section_body .imgarea .imgbox .bg01:after {content: "";position: absolute;top: 50%;left: 150%;width: 5%;height: 200%;background: rgba(255,255,255,0.7);transform:translate(-50%,-50%) rotate(20deg) ;animation: shimmer-arrow 12s ease-in-out infinite;filter: blur(30px);mix-blend-mode: screen;z-index:1;} #section03 .section_body .imgarea .imgbox .bg02{position:absolute;width:100%;height:100%;top:0;left:0;background:url('../img/03_service/01/arrow_02.png') no-repeat center;background-size:cover;opacity:0.6} #section03 .section_body .imgarea .imgbox .bg02:after {content: "";position: absolute;top: 50%;left: -50%;width: 5%;height: 200%;background: rgba(255,255,255,0.7);transform:translate(-50%,-50%) rotate(20deg);animation: shimmer-arrow2 12s ease-in-out infinite;filter: blur(30px);mix-blend-mode: screen;z-index:1;} /* Section04 */ #section04 .section_fix{max-width:1200px;} #section04 .slidebox{display: flex;white-space: nowrap;width: max-content;will-change: transform;gap:0px;animation: scrollLeft 170s linear infinite;align-items: center;padding:10px 0;animation-play-state: paused;} #section04 .slidebox .item{flex-shrink: 0;overflow:hidden;border-radius:20px;box-shadow:0 0 5px #aaa;margin-right: 30px; } #section04 .slidebox .item.vertical{width:320px;aspect-ratio:3/4} #section04 .slidebox .item.horizontal{width:480px;aspect-ratio:5/3} #section04 .slidebox .item img{width:100%;height:100%;object-fit:cover;} #section04 .slidebox .item.is-odd {margin-bottom: 100px;} #section04 .slidebox .item.is-even {margin-top: 100px;} @keyframes scrollLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } /* 이미지 한 세트만큼 이동 */ } @keyframes shimmer-arrow { 0% {left: 150%;} 50% {left: -50%;} 100%{left: -50%;} } @keyframes shimmer-arrow2 { 0% {left: -50%;} 50% {left: -50%;} 100% {left: 150%;} } @keyframes shimmer-arrow-vertical { 0% { top: -50%; } 50% { top: -50%; } 100% { top: 150%; } } @keyframes shimmer-arrow2-vertical { 0% { top: 150%; } 50% { top: -50%; } 100% { top: -50%; } } /* Responsive */ @media all and (max-width:1600px){ #section02 .section_body .item .textbox h3{font-size:42px} #section02 .section_body .item .textbox p{font-size:23px;} #section02 .section_body .item .textbox a{font-size:18px;line-height:54px;} .modal-area .modal-fix .padding_box{padding:0 60px} .modal-area .modal-fix .padding_box .left{width:50%} .modal-area .modal-fix .padding_box .left .left-content .top h3{font-size:50px} .modal-area .modal-fix .padding_box .left .left-content .top p{font-size:18px;} .modal-area .modal-fix .padding_box .right{width:50%} } @media all and (max-width:1440px){ #section01{padding:150px 0 600px;} #section01 .section_body .textbox h3{font-size:64px;} #section01 .section_body .textbox b{font-size:32px;} #section01 .section_body .textbox p{font-size:22px;} #section02 .section_body .item .textbox h3{font-size:36px} #section02 .section_body .item .textbox p{font-size:21px;} #section02 .section_body .item .textbox a{font-size:17px;} #section03 .section_body .textarea h3{font-size:45px;} #section03 .section_body .textarea p{font-size:21px;} .modal-area .modal-fix .padding_box .left .left-content .top h3{font-size:42px} .modal-area .modal-fix .padding_box .left .left-content .top p{font-size:16px;} .modal-area .modal-fix .padding_box .left .left-content .bottom .step span{font-size:14px;} .modal-area .modal-fix .padding_box .left .left-content .bottom .arrow{margin:41px 12px;} } @media all and (max-width:1240px){ #section02 .section_body .item{width:calc(50% - 20px);margin:0 10px 30px;} #section03{padding:0 0 100px;} .modal-area .modal-fix{border-radius:16px;padding:60px;} .modal-area .modal-fix .padding_box{flex-direction: column;overflow-y:auto;padding:0;} .modal-area .modal-fix .padding_box .left{width:100%;padding:20px 0 80px;height:auto;flex-shrink: 0;} .modal-area .modal-fix .padding_box .left .left-content{gap:60px} .modal-area .modal-fix .padding_box .right{width:100%;padding:0px 0 20px;overflow:hidden;height:auto;flex-shrink: 0;} .modal-area .modal-fix .btn_close{right:30px;top:30px;} .modal-area>a{max-width:72px;} } @media all and (max-width:1024px){ section{padding:80px 0} section .section_title h3{font-size:32px;} #section01 .section_body .textbox span{font-size:16px;line-height:27px;width:130px;margin:0 auto 30px;} #section01 .section_body .textbox h3{font-size:56px;margin-bottom:30px;} #section01 .section_body .textbox b{font-size:28px;margin-bottom:30px;} #section01 .section_body .textbox p{font-size:20px;} #section03 .section_body .textarea h3{font-size:40px;} #section03 .section_body .textarea p{font-size:19px;} #section04 .slidebox .item{border-radius:16px;margin-right: 20px; } #section04 .slidebox .item.vertical{width:270px;} #section04 .slidebox .item.horizontal{width:420px;} #section04 .slidebox .item.is-odd {margin-bottom: 80px;} #section04 .slidebox .item.is-even {margin-top: 80px;} .modal-area .modal-fix .padding_box .left .left-content .top h3{font-size:32px} .modal-area .modal-fix .padding_box .left .left-content .top p{font-size:15px;} .modal-area .modal-fix .padding_box .left .left-content .top .yellow{font-size:16px;} .modal-area .modal-fix .padding_box .left .left-content .top .blue{font-size:16px;} .modal-area .modal-fix .padding_box .left .left-content .bottom .step span{font-size:13px;} .modal-area .modal-fix .padding_box .left .left-content .bottom .arrow{margin:41px 12px;} } @media all and (max-width:900px){ #section03 .section_body .imgarea .imgbox{aspect-ratio: 720 / 1820;max-width:400px;margin:0 auto;} #section03 .section_body .imgarea .textbox{width:100%;max-width:340px;} #section03 .section_body .imgarea .textbox ul li{width:100%;padding-bottom:100%;} #section03 .section_body .imgarea .imgbox .bg01{background:url('../img/03_service/01/arrow_01_v.png') no-repeat center;background-size:cover;} #section03 .section_body .imgarea .imgbox .bg01:after {top: -50%; left: 50%;width: 200%; height: 10%; transform: translate(-50%, -50%) rotate(10deg); animation: shimmer-arrow-vertical 12s ease-in-out infinite;} #section03 .section_body .imgarea .imgbox .bg02{background:url('../img/03_service/01/arrow_02_v.png') no-repeat center;background-size:cover;} #section03 .section_body .imgarea .imgbox .bg02:after {top: 150%; left: 50%;width: 200%; height: 10%; transform: translate(-50%, -50%) rotate(10deg); animation: shimmer-arrow2-vertical 12s ease-in-out infinite;} .modal-area{gap:10px} .modal-area .modal-fix{border-radius:12px;padding:40px;} .modal-area .modal-fix .padding_box{flex-direction: column;overflow-y:auto;padding:0;} .modal-area .modal-fix .padding_box .left{width:100%;padding:20px 0 80px;height:auto;flex-shrink: 0;text-align:center;} .modal-area .modal-fix .padding_box .left .left-content{gap:60px} .modal-area .modal-fix .padding_box .left .left-content .bottom .arrow{height:14px;margin:43px 8px;} .modal-area .modal-fix .padding_box .right{width:100%;padding:0px 0 20px;overflow:hidden;height:auto;flex-shrink: 0;} .modal-area .modal-fix .btn_close{right:20px;top:20px;} .modal-area>a{max-width:62px;} } @media all and (max-width:768px){ section{padding:60px 0} section .section_title{text-align:center} section .section_title h3{font-size:30px;} #section01{padding:120px 0 480px} #section01 .section_body .textbox span{font-size:14px;line-height:24px;width:120px;} #section01 .section_body .textbox h3{font-size:54px;} #section01 .section_body .textbox b{font-size:24px;} #section01 .section_body .textbox p{font-size:18px;} #section02 .section_body .item .textbox{padding:30px} #section02 .section_body .item .textbox h3{font-size:32px} #section02 .section_body .item .textbox p{font-size:19px;margin-bottom:20px;} #section02 .section_body .item .textbox a{font-size:15px;line-height:48px;} #section03 .section_body .textarea h3{font-size:35px;} #section03 .section_body .textarea p{font-size:17px;} .modal-area{padding:20px 10px} .modal-area>a{max-width:42px;} .modal-area .modal-fix .padding_box .left .left-content .top p br{display:none} } @media all and (max-width:640px){ #section01 .section_body .textbox h3{font-size:48px;} #section01 .section_body .textbox b{font-size:21px;} #section01 .section_body .textbox p{font-size:16px;} #section02 .section_body{padding:20px} #section02 .section_body .item{width:calc(100% - 20px);} #section03 .section_body .textarea h3{font-size:30px;} #section03 .section_body .imgarea .imgbox{max-width:320px;} #section03 .section_body .imgarea .textbox{max-width:280px;} #section03 .section_body .imgarea .textbox ul li .text b{font-size:24px;} #section04 .slidebox .item{border-radius:12px;margin-right: 10px; } #section04 .slidebox .item.is-odd {margin-bottom: 50px;} #section04 .slidebox .item.is-even {margin-top: 50px;} .modal-area .modal-fix{padding:40px 20px} .modal-area .modal-fix .padding_box .left .left-content .top h3{font-size:27px} .modal-area .modal-fix .padding_box .left .left-content .bottom{display:none} .modal-area .modal-fix .btn_close{right:10px;top:20px;} } @media all and (max-width:480px){ section .section_title h3{font-size:25px;} #section01{padding:0px 0 0px;background:none;} #section01 .section_body.pc{display:none} #section01 .section_body.mobile{display:block} #section01 .section_body .textbox span{margin:0 auto 20px;} #section01 .section_body .textbox h3{font-size:40px;margin-bottom:20px;} #section01 .section_body .textbox b{margin-bottom:20px;} #section02{padding:20px 0 0} #section02 .section_body{padding:25px 10px} #section02 .section_body .item .imgbox{height:180px;} #section02 .section_body .item .imgbox .icobox{left:50%;transform:translateX(-50%);} #section02 .section_body .item .textbox{padding:15px;text-align:center;} #section02 .section_body .item .textbox h3{font-size:25px;} #section02 .section_body .item .textbox p{font-size:15px;margin-bottom:10px;} #section02 .section_body .item .textbox a{font-size:13px;line-height:30px;width:150px;margin:0 auto;} #section03 .section_body .textarea h3{font-size:20px;} #section03 .section_body .textarea p{font-size:14px;} #section03 .section_body .imgarea .textbox ul li .text b{font-size:16px} #section03 .section_body .imgarea .textbox ul li .text p{font-size:14px} .modal-area{padding:20px 5px;gap:5px;} .modal-area>a{max-width:32px;} .modal-area .modal-fix .padding_box .left{padding:20px 0} .modal-area .modal-fix .padding_box .left .left-content .top h3{font-size:25px;} .modal-area .modal-fix .padding_box .left .left-content .top p{font-size:12px;margin-bottom:20px;} .modal-area .modal-fix .padding_box .left .left-content .top .yellow{font-size:14px;} }