@charset "utf-8";
/*@import url(reset.css);*/
@import url(fonts.css);
@import url(common.css);


body {
    margin: 0;
    padding:0;
    font-size: 16px;
    line-height: 1.2;
    font-family: 'Pretendard';
    word-break: keep-all;
	text-align:justify;
	font-weight:400;
}

.icon-arrow {background: url('../renewal_images/icon-shutdown.png') no-repeat center/cover; width: 8px; height: 13px; filter: invert(1);}
.icon-top {background: url('../renewal_images/icon-top.png') no-repeat center / cover; width:22px; height: 40px; display: inline-block; transition: all .3s ease;}

.top-btn {display: flex; flex-direction: column; align-items: center; justify-content: center; gap:5px; border:2px solid #b3b3b3; border-radius: 50%; overflow: hidden;background-color: #fff; position: fixed; right:50px; bottom: 50px; z-index: 2; width: 64px; height: 64px;  transition: all .3s ease; opacity: 0; visibility: hidden;}
.top-btn.show {opacity: 1; visibility: visible;}

/* header */
/*header {position: fixed; top:0; left:0; background-color: #fff; z-index: 10; width:100%;}
.header-wrap {width:100%; max-width:1240px; height:85px; padding:0 20px; margin:0 auto; display:flex; align-items: center; position: relative;}
h1 {width:150px; position: absolute; top: 15px; left: 0;}
.gnb {width:100%;}
.gnb ul {display:flex; align-items: center; justify-content: center; justify-content: center; gap:20px;}
.gnb ul li {padding:0 20px;}*/

/* section1 */
.section1 {height: 100vh;}
.swiper {width: 100%; height:100%; overflow: hidden;}
.swiper-slide {background-position: center; background-size: 110% 110%; background-repeat: no-repeat;}
.slide-1 {background-image: url('../renewal_images/slide-bg.jpg');}
.slide-2 {background-image: url('../renewal_images/slide-bg1.jpg');}
.slide-3 {background-image: url('../renewal_images/slide-bg2.jpg');}

.swiper-slide-active {animation: swiper-active-effect 3.5s ease forwards;}
@keyframes swiper-active-effect {
    0% {background-size: 110% 110%;}
    100% {background-size: 100% 100%;}
}

.slide-content {position: absolute; left:250px; top:335px; color:#fff;}
.slide-content .slide-title {font-size: var(--fz60); font-weight: 600; display:inline-block; margin-bottom:50px;}
.slide-content p {font-size: var(--fz24); margin-bottom: 20px;}
.shutdown-btn {padding:10px 18px; background-color: #004F9F; gap:10px;  border-radius: 99px;}
.shutdown-btn span a {font-size: 16px !important; color:#fff !important; font-size: 16px; line-height: 1.2;}

.slide-function {box-sizing: border-box; width: 100%; display:flex; flex-direction: column; align-items: start; gap:40px; width: 600px;}
.slide-function > * {position: absolute;}
.swiper-pagination {bottom: 10% !important;}
.swiper-pagination-bullet {width: 10px; height: 10px;}
.swiper-pagination-bullet-active {background-color: #fff !important;}

.swiper-button-next,.swiper-button-prev {top:calc(50% + 85px) !important; transform: translateY(-50%) !important;
background-repeat: no-repeat !important; background-position: center !important; background-size: cover !important; width: 60px !important; height: 60px !important;}
.swiper-button-prev {background-image: url('../renewal_images/icon-prev.png') !important; left:3%;}
.swiper-button-next {background-image: url('../renewal_images/icon-next.png') !important; right:3%;}
.swiper-button-next:after, .swiper-button-prev:after {display: none !important;}



/* fixed form */
#form-box {position: fixed; left:50%; top:100%; transform: translateX(-50%); width:100%; max-width: 1440px; border-radius: 20px; z-index: 10; background-color: #fff; padding:40px 50px; border:2px solid #004F9F; transition: all 1s ease;}
#form-box.active {top:50%; transform: translate(-50%,-50%);}
#form-box .consulting-name {font-size: 28px; font-weight: 700; color:#004F9F; margin-bottom:24px; display: block;}

#form-box .input-wrap {display: grid; grid-template-columns: repeat(3, 1fr); gap:16px; width: 100%; margin-bottom:16px;}

.field-group {display: flex; flex-direction: column; gap:6px;}
.field-group.full-width {margin-bottom:0;}
.field-group.span-2 {grid-column: span 2;}
.field-group > label {font-size: 13px; font-weight: 600; color:#004F9F;}
.field-group:has(:required) > label::after {content: " *"; color: #e53e3e;}

#form-box input:not([type="checkbox"]), #consulting {width: 100%; height: 44px; border:1.5px solid #e0e0e0; border-radius: 8px; padding:0 14px; font-size: 14px; font-family: 'Pretendard'; background-color: #f9fafb; box-sizing: border-box; transition: border-color 0.2s, background-color 0.2s;}
#form-box input:not([type="checkbox"]):focus, #consulting:focus {border-color: #004F9F; background-color: #fff; outline: none;}
input::-webkit-inner-spin-button {-webkit-appearance: none;}
input::-webkit-outer-spin-button {-webkit-appearance: none; margin: 0;}
#form-box input::placeholder {font-size: 14px; font-weight: 400; color:#bbb;}

#consulting {appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23004F9F' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer;}
#consulting option {color:#2d2d2d;}

.form-bottom {display: flex; align-items: center; justify-content: space-between; margin-top: 4px;}
.agree {display: flex; align-items: center; gap:8px;}
.agree input {width: 18px; height: 18px; accent-color: #004F9F; cursor: pointer; flex-shrink: 0;}
.agree label {font-size: 14px; cursor: pointer; color:#424242;}

.formdown-btn {position: absolute; left:50%; transform: translateX(-50%); cursor: pointer; top:-40px;  border-radius: 10px 10px 0 0; background-color: #004F9F; width: 180px; height: 40px; color:transparent; opacity:0; pointer-event:none; cursor:auto; }
.formdown-btn::after {content: "기업의뢰 서비스 열기"; display:block; position: absolute;  left:50%; top:50%; transform: translate(-50%, -50%);  z-index: 1; transition: all 1s ease; text-wrap:nowrap; font-size: 16px; color:#fff;}
#form-box.active .formdown-btn::after {content:"기업의뢰 서비스 닫기";}

.submit-btn {height: 44px; padding:0 28px; border-radius:10px; background-color: #004F9F; font-size: 16px; font-weight: 600; color:#fff; white-space: nowrap; flex-shrink: 0;}


/* notice */
/* .notice-wrap span {font-size: 48px; font-weight: 600; margin-bottom: 40px; display: inline-block; line-height: 1; color:#fff;} 
.article-wrap {display:flex; align-items: center; gap:32px;}
.article-wrap article {width: 280px;}
.article-wrap article .img-wrap{width: 100%; height:180px; margin-bottom:10px; overflow: hidden;}
.article-wrap article .img-wrap img{transition: all .3s ease;}
.article-wrap article p{width: 100%; text-wrap:nowrap; text-overflow: ellipsis; overflow: hidden; color:#fff; line-height: 1.2;} */


/* section2 */
.business-wrap {display:flex; align-items: center; justify-content:space-between; gap:10px;}

.business-item {height: 450px; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important; border-radius: 20px; width: 100%; display: block; position: relative; transition: all 0.3s ease; flex: 1; border:1px solid #0000002a; overflow: hidden;}
.business-item.active {flex: 2;}
.business-item:first-child {background-image: url('../renewal_images/business-img.png');}
.business-item:nth-child(2) {background-image: url('../renewal_images/business-img1.png');}
.business-item:nth-child(3) {background-image: url('../renewal_images/business-img2.png');}
.business-item:nth-child(4) {background-image: url('../renewal_images/business-img3.png');}
.business-item:last-child {background-image: url('../renewal_images/business-img4.png');}
.business-item .item-desc {position: absolute; bottom:60px; left:50%; transform: translateX(-50%); text-wrap:nowrap; color:#fff; z-index: 2; font-size: var(--fz24); display: flex; align-items: center; gap:10px; transition: all 0.3s ease;}
.business-item.active .item-desc {left:40px; font-size: 40px; left:40px; transform: none; }
.business-item::before {content:""; position: absolute; width: 100%; height: 100%; backdrop-filter: blur(2px); z-index: 1; transition: all .3s ease;}
.business-item.active::before {backdrop-filter: brightness(.5);}

.business-item .item-desc i {display:none; background: url('../renewal_images/icon-businessShutdown.png') no-repeat center / cover; width: 30px; height: 30px;}
.business-item.active .item-desc i {display:block;}

/* section3 */
.section3 h2 span {color:#004F9F; font-weight: 600; }
.section3 .content > div {display:flex; align-items: flex-start; justify-content: space-between;}
.chart-wrap {margin-bottom: 60px;}
.chart {width: 100%; max-width:900px; height: 400px; background: #fff; position: relative; display: flex; flex-direction: column; align-items: stretch; border-radius: 16px; padding:24px 20px 16px; box-shadow: 0 4px 24px rgba(0, 79, 159, 0.1); border: 1px solid #e8f0fb;}
.chart-name {display: flex; align-items: center; gap:6px; width: 100%; padding-left:4px; color: #aaa; font-size: 12px; margin-bottom:8px;}
.chart-name::before {content:""; display:inline-block; width:3px; height:12px; background-color:#004F9F; border-radius:2px;}
#myChart {flex:1; min-height:0;}

.number-wrap {display:flex; align-items: center; justify-content: space-between; padding-inline: 30px; width: 100%; max-width: 900px;}
.number-wrap > div {display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding:0 20px; gap:40px; width: calc(100% / 3);}
.number-wrap > div::before {content:""; position: absolute; top:50%; right:0; transform: translateY(-50%); background-color: #004F9F; width: 2px; height: 130px;}
.number-wrap > div:nth-child(2) > span {display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.number-wrap > div:last-child:before {display:none;}
.number-wrap > div > span {position: relative; z-index: 1; text-align: center;}
.number-wrap > div > span:first-child {font-size: 20px;}
.number-wrap > div > span:first-child > span {font-size: 14px;}
.number-wrap > div > span:last-child {font-weight: 600; color:#004F9F; font-size: 40px;}
.number-wrap > div::after {content:""; background-position: center; background-repeat: no-repeat; background-size: cover; width:80px; height: 80px; opacity: .25; position: absolute;}
.number-wrap > div:first-child::after {background-image: url('../renewal_images/icon-people.png');}
.number-wrap > div:nth-child(2)::after {background-image: url('../renewal_images/icon-document.png');}
.number-wrap > div:last-child::after {background-image: url('../renewal_images/icon-client.png');}


/* section4 */
.section4 {background: url('../renewal_images/trust-bg.png') no-repeat center/cover;}
.section4 h2 {color:#004F9F; margin-bottom: 20px; font-weight: 600; }
.trust-desc {font-size: var(--fz24); margin-bottom: 60px;}
.trust-wrap {width:100%; display:flex; gap:50px;}
.trust-card {flex:1; padding:30px 20px; border-radius: 20px; background-color: #ffffffaf; box-shadow: 4px 4px 4px 0 #00000025; display:grid; gap:10px; grid-template-columns: 1fr; height: 260px;}
.trust-card p:first-child {text-align: center; font-size: 24px; font-weight: 600; color:#004F9F; }
.trust-card p:first-child span{font-size: 16px; color:#424242; font-weight: 400;}
.trust-card p:nth-child(2) {font-weight: 600; font-size: 20px;}





/* hover 효과 */
@media (hover:hover) {
    .top-btn:hover {background-color: #b3b3b3; color:#fff;}
    .top-btn:hover .icon-top {background-image: url('../renewal_images/icon-top-hover.png')}
    article:hover p {text-decoration: underline;}
    article:hover img {transform: scale(1.1);}
    .shutdown-btn:hover {background-color: #002c58;}
    .family ul li:hover {background-color: #002c58;}
    .family ul li:hover a {color:#fff;}
}

/* 반응형 */
@media screen and (max-width:1440px) {
    #form-box {width: 80%; padding:32px 40px;}
    #form-box.active {top:50%; transform: translate(-50%, -50%);}
}

@media screen and (max-width:900px) {
    #form-box {width: 90%; padding:28px 28px;}
    #form-box .input-wrap {grid-template-columns: repeat(2, 1fr);}
}

@media screen and (max-width:600px) {
    #form-box {width: 94%; padding:24px 20px;}
    #form-box .input-wrap {grid-template-columns: 1fr;}
	.field-group.span-2 {grid-column: span 1;}
    .form-bottom {flex-direction: column; align-items: flex-start; gap:16px;}
    .submit-btn {width: 100%;}
}



@media screen and (max-width:1280px) {
    /* Main slide */
    .swiper-button-next, .swiper-button-prev {width: 40px; height: 40px;}
    .slide-content {left:50%; top:50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; text-align: center;}
    /* section2 */
    .business-item.active {flex:1;}
    .business-item::before {filter:brightness(.5);}
    .business-item.active .item-desc {left:50%; transform: translateX(-50%); font-size: 24px;}
    .business-item.active .item-desc i {display: none;}

    /* section3 */
    .section3 .content > div {flex-direction: column;}
    .chart {max-width: none;}
    .chart::before {max-width: none;}
    .number-wrap {max-width: none;}
}

@media screen and (max-width:1023px) {
    /* Main slide */
    .slide-content .slide-title {margin-bottom: 32px;text-wrap:nowrap;}
    .slide-content p {line-height: 1.4;}

    /* section2 */
    .business-wrap { display:grid; grid-template-columns: 1fr 1fr;}
    .business-item { width: 100%; height: 200px;}
    .business-item .item-desc, .business-item.active .item-desc { top:50%; transform: translate(-50%, -50%);}
    .business-item .item-desc span {font-size: 28px;}
    .number-wrap > div::before {height: 80px;}

    /* section3 */
    .chart-wrap {margin-bottom: 48px;}
    .number-wrap {padding:0;}
    .number-wrap > div {gap:24px;}
    .number-wrap > div > span:last-child {font-size: 32px;}
    .number-wrap > div::after

    /* section4 */
    .trust-card p:first-child {font-size: 22px;}
    .trust-card p:first-child span {font-size: 14px;}
    .trust-card p:nth-child(2) {font-size: 18px;}
    
}

@media screen and (max-width:768px){
    /* section3 */
    .chart-wrap {margin-bottom: 28px;} 
    .service-wrap {padding-bottom: 20px;}
    .number-wrap > div {padding:0 12px; justify-content: space-between; height: 80px;}
    .number-wrap > div:nth-child(2) {gap:8px;}
    .number-wrap > div > span:first-child {font-size: 18px;}
    .number-wrap > div > span:last-child {font-size: 24px;}
    .number-wrap > div > span:first-child > span {font-size: 13px;}
    .number-wrap > div::before {height: 60px;}
    .number-wrap > div::after {width: 60px; height: 60px;}
    /* section4 */
    .trust-desc {margin-bottom: 20px;}
    .trust-card {gap:20px; padding: 24px 18px;}
    .trust-wrap {flex-direction: column; gap:20px;}
    .trust-card p:first-child {text-align: left;}
}

@media screen and (max-width:500px) {
    /* section2 */
    .business-wrap {display:flex; flex-direction: column; gap:10px;}
    .business-item.active, .business-item {flex:none; height: 100px;}

    /* section3 */
    .chart {height: 300px;}
    .number-wrap > div {padding:0 6px; height: auto;}
    .number-wrap > div > span:first-child {font-size: 12px;}
    .number-wrap > div > span:first-child > span {font-size: 10px;}
    .number-wrap > div > span:last-child {font-size: 16px;}
    .number-wrap > div::after {width: 40px; height: 40px;}


    /* section4 */
    .trust-card p:first-child {font-size: 20px;}
    .trust-card p:first-child span {font-size: 12px;}
    .trust-card p:nth-child(2) {font-size: 16px;}
    .trust-card p:nth-child(3) {font-size: 14px;}
}