@charset "utf-8";
@import 'font.css';


/*메인슬라이드 애니*/
.compV .swiper-slide:not(.swiper-slide-active) [data-aos]:not(.aos-animate) { opacity: 0 !important; transform: translate3d(0,100px,0) !important; }
.compV .swiper-slide.swiper-slide-active [data-aos].aos-animate { opacity: 1 !important; transform: translateZ(0) !important; }

/*서브상단비주얼*/
.compVT-wrap { position: absolute;left: 13%;top: 50%; transform: translate( 0, -50%); }
.compVT-wrap h3 { font-size: 65px;color: #fff;text-transform: uppercase;font-family: 'Paperlogy';}
.compVT-h3 { font-size: 20px;color: rgba(255,255,255,0.6);text-transform: uppercase;font-family: 'Paperlogy';}
.compVT-wrap .compVT-title { font-size: 60px;color: #fff;padding-top: 100px;}
.compVT-wrap .compVT-title span { display: block;}
.compVT-txt { font-size: 20px;color: rgba(255,255,255,0.8);margin-top: 10px;line-height: 150%;}
.compV img { width: 100%;height: 100%;} img { width: 100%;height: 100%;}



/* about */
.compVision-wrap { clear: both;}
.about-dot { text-align: center; position: relative;}
.about-dotline { width: 2px;height: 80px;;background:linear-gradient(rgba(57,214,109,1), rgba(57,214,109,0.0));margin: 0 auto;}
.adot-main { font-size: 24px; color: #39D66D;font-weight: 700;padding-top: 10px;padding-bottom: 30px;font-family: 'Paperlogy';/*text-transform: uppercase;*/}
.adot-sub { font-size: 60px; color: #000;font-weight: 700;}
.adot-sub span.light { font-weight: 300;}
.about-tlogo { margin: 100px 0;position: relative;display: flex;align-items: center;justify-content: center;}
.about-tlogo p { text-align: left;}
.about-tlogo p:first-child { font-size: 24px;}
.about-tlogo p:first-child span { font-size: 24px; font-weight: 700;}
.about-tlogo p:last-child { font-size: 50px;}
.about-tlogo p:last-child span { font-size: 50px; font-weight: 700;}
.uriwon-logo { margin-right: 20px;}
.aboutTop-idea { clear: both;}
.aboutTop-idea .container { display: flex;justify-content: space-between;}
.aboutTop-idea .container .left, .aboutTop-idea .container .right { width: 50%;}
.aboutTop-idea .container .left .idea-ttl { font-size: 28px; color: #000;font-weight: 300;padding-top: 60px;padding-bottom: 20px;}
.aboutTop-idea .container .left .idea-ttl p { line-height: 110%;}
.aboutTop-idea .container .left .idea-txt { font-size: 40px; color: #000;font-weight: 300;padding-bottom: 30px;}
.aboutTop-idea .container .left .idea-txt p { display: block; line-height: 140%;}
.aboutTop-idea .container .left .idea-txt span { font-size: 45px; color: #111;font-weight: 700;}

.aboutTop-idea .container .right { display: flex;justify-content: flex-end;gap: 20px;}
.aboutTop-idea .container .right span { display: flex;flex: 0 0 calc((100% - 1 * 20px) / 2);}
.aboutTop-idea .container .right .idea-img { display: inline-block;}
.aboutTop-idea .container .right .idea-img img { border-radius: 20px;box-shadow: 5px 7px 18px rgba(0, 77, 26, 0.3); width: 90%;height: auto;}
.ideaPosi-1 { width: 95%;}
.ideaPosi-2 { margin-top: 20%; width: 95%;}

.about-mission { background: url(../../../../img/about-back1.png) center bottom no-repeat;background-size: cover; min-height: 750px; padding-bottom: 200px;margin-top: -50px;}
.about-mission .container { display: flex;justify-content: space-between;}
.about-mission .container .left { width: 50%; padding-top: 100px;}
.about-mission .container .right { width: 50%;padding-top: 50px;}
.about-mission .container .right .mission .img { display: flex;justify-content: flex-end;gap: 50px;}
.about-mission .container .right .mission .img span { display: flex;flex: 0 0 calc((100% - 1 * 30px) / 2);}
.about-mission .container .right .mission .img .mission-img { display: inline-block;}
.about-mission .container .right .mission .img .mission-img img { border-radius: 20px;box-shadow: 5px 7px 18px rgba(0, 77, 26, 0.3); width: 100%;}
.ideaPosi-3 { margin-top: 35%; width: 95%;}
.ideaPosi-4 { margin-top: 10%; width: 95%;}
.mission-ttl, .vistion-ttl { font-size: 50px;font-weight: 700;color: #fff;position: relative;font-family: 'Paperlogy';}
.mission-txt,
.vistion-txt { font-size: 28px; color: #fff;padding-top: 30px;}
.mission-txt p,
.vistion p { line-height: 140%;font-weight: 200;}
.mission-txt p span,
.vistion-txt p span { font-weight: 600;}
.vistion { padding-top: 60px;}
.mission-ttl span, .vistion-ttl span { position: relative;width: 12px;height: 12px;background: #fff;border-radius: 100%;display: inline-block;vertical-align: middle; margin-left: 10px;}
.mission-ttl span::before, .vistion-ttl span::before { content: ''; position: absolute;left: 0;top: 5px;min-width: 500px; width: 100%;height: 2px;background:linear-gradient(to right, rgba(255,255,255,0.4), rgba(255,255,255,0.0));}

/*타이틀*/
.comp-txt { font-size: 50px;font-weight: 700;color: #111;}
.comp-txt span { font-weight: 300;}

/**가치*/
.compValue-wrap { clear: both; position: relative;background: url(../../../../img/comp-outbaci1.png) center no-repeat;}
.comparison-container { display: flex; width: 100%; min-height: 500px; position: relative; background-color: transparent; margin: 75px 0 150px;align-items: flex-end;} 
.side { display: flex; align-items: center; padding: 60px; box-sizing: border-box; }
.comparisonL-side { position: absolute; left: 0; bottom: 0;width: 70%;height: 100%; background: url(../../../../img/comparisonL-back.png) left center no-repeat;background-size: contain; color: #fff; z-index: 2; border-radius: 20px; margin-right: -60px;}
.comparisonL-side .description { float: left;padding-bottom: 100px;}
.comparisonR-side { position: absolute; right: 0; bottom: 0;width: 53%;height: calc(100% - 80px);top: 80px; background: url(../../../../img/comparisonR-back.png) left center no-repeat; background-size: cover;color: #666; z-index: 1; border-radius: 20px; text-align: right;}
.comparisonR-side.side {justify-content: flex-end;}
.comparisonR-side.side .title { font-size: 28px;}
.comparisonR-side .tag-group { justify-content: flex-end;}
.comparison-conts { max-width: 500px; }
.title { font-size: 2.5rem; margin-bottom: 20px; }
.description { line-height: 130%; margin-bottom: 30px; font-size: 16px;width: 80%;float: right;}
.tag-group { clear: both;display: flex; flex-wrap: wrap; gap: 10px;}
.tag-group p { line-height: 130%;display: inline-flex;gap: 10px;}
.tag { padding: 10px 20px; border-radius: 50px; font-weight: 400; } 
/* 왼쪽 스타일 */
.grad-green { background: #111; color: #39D66D; }
.outline-white { background: #fff; color: #39D66D; }
.white-bg { background: white; color: #333; }
.solid-green { background: #39D66D; color: #111; }
.black-bg { background: #111; color: #39D66D; } 
/* 오른쪽 스타일 */
.gray-dark { background: #666666; color: #eee; } 
/* 중앙 VS 텍스트 */
.vs-badge {width: 284px; height: 284px; position: absolute; left: 55%; top: 57%; transform: translate(-50%, -50%); background: url(../../../../img/vs-ci.png) center no-repeat;
    text-indent: -9999px; z-index: 3;animation: fadeInUp 0.5s ease-out forwards;}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        /* 기존 위치에서 살짝 아래(10px) 위치하고, 크기를 0.8배로 시작 */
        transform: translate(-50%, -45%) scale(0.8);
    }
    100% {
        opacity: 1;
        /* 원래 위치로 돌아오고 정사이즈(1배)가 됨 */
        transform: translate(-50%, -50%) scale(1);
    }
}

/*compWhat-wrap What We Do*/
.compWhat-wrap { clear: both;background: #111;}
.compWhat-wrap .adot-sub { color: #fff;}
.compWhat-body { clear: both;}
.compWhat-body { display: flex; gap: 20px; padding: 100px 0 150px; /*background-color: #0b0b0b;*/ justify-content: center;}
.compWhat-item {flex: 1; max-width: 380px; text-align: center;}
.compWhat-subject { height: 65px;line-height: 65px; border-radius: 20px; font-weight: 700; font-size: 28px;font-family: 'Paperlogy';}
.compWhat-box { position: relative; height: 280px; padding: 40px 30px; border-radius: 20px; overflow: hidden; margin-bottom: 20px;}
.compWhat-box dl { text-align: left;}
.compWhat-box dt { font-size: 24px; font-weight: 700; margin-bottom: 15px; word-break: keep-all; position: relative; z-index: 2;}
.compWhat-box dd { font-size: 16px;line-height: 1.2;color: #666; word-break: keep-all; position: relative; z-index: 2;}
/* PLAN */
.plan .compWhat-subject { background-color: #e5e5e5; color: #000; }
.plan .compWhat-box {  background: #fff url(../../../../img/boximg-1.png) right bottom no-repeat; }
.plan .compWhat-box dt { color: #000; }
/* DESIGN */
.design .compWhat-subject { background-color: #38c467; color: #000; }
.design .compWhat-box { background: #39D66D url(../../../../img/boximg-2.png) right bottom no-repeat;; }
.design .compWhat-box dt { color: #fff; }
.design .compWhat-box dd { color: rgba(255,255,255,0.8); }
/* CONTENT */
.content .compWhat-subject { background-color: #555; color: #000; }
.content .compWhat-box { background: #666 url(../../../../img/boximg-3.png) right bottom no-repeat;; }
.content .compWhat-box dt { color: #fff; }
.content .compWhat-box dd { color: rgba(255,255,255,0.7); }
.compWhat-txt { color: #fff;font-size: 18px; font-weight: 600;}


.comp-oneUriwon { background: #39D66D url(../../../../img/ourser-back-comp.png) center 60% no-repeat;margin-bottom: 0; padding-bottom: 150px;}
.comp-oneUriwon .mcontent-title span { color: #fff;}
.comp-oneUriwon ul.tabs-market li.active {background: #fff;}
.comp-oneUriwon ul.tabs-market li.active span { color: #39D66D;}

/*compProduct-wrap*/
.compProduct-wrap { clear: both;background: #fff;padding-bottom: 100px;}
.compPro-container { clear: both;}

.slide-horizontal { margin: 80px auto; padding: 0 20px;}
.slideH-accordion { display: flex; width: 100%;height: 500px; gap: 15px;margin-top: 60px;}
.section-item { position: relative; flex: 1; /* 기본적으로 동일한 너비 */ height: 100%; border-radius: 20px; overflow: hidden; transition: all 0.5s ease-in-out; cursor: pointer; background-size: cover; background-position: center;}
/* 첫 번째 아이템(s1)의 초기 상태를 확장된 상태(flex: 3)로 고정 */
.section-item:first-child { flex: 3;background: url('../../../../img/slide-himg1.png') center/cover no-repeat !important;}
.section-item:first-child::before { background: rgba(0, 0, 0, 0);}
.section-item:first-child .item-description { display: block; opacity: 1;}
.slideH-accordion:hover .section-item:first-child { flex: 1; }
.slideH-accordion:hover .section-item:first-child::before { content: ''; background: #F5F5F5 url(../../../../img/slide-himg1-back.png) left bottom no-repeat;background-size: cover;transition: background 0.3s;}
.slideH-accordion:hover .section-item:first-child .item-description { display: none; opacity: 0;}
.section-item:hover { flex: 3 !important; }
.section-item:hover::before { background: rgba(0, 0, 0, 0.3) !important;}
.section-item::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #F5F5F5; transition: background 0.3s;}
.item-content { position: absolute; left: 30px;top: 50px; width: calc(100% - 60px); color: #fff; z-index: 2;}
.item-content h3 { font-size: 40px; color: #666; font-weight: 800; transition: 0.3s; }
/*활성화시 br태그*/
.item-content h3 br {display: block;}
.section-item:hover h3 br { display: none;}
.section-item:first-child h3 br { display: none; }
.slideH-accordion:hover .section-item:first-child h3 br { display: block;}
.section-item:hover h3 br { display: none !important;}
.section-item:hover h3 { white-space: nowrap; }

.item-content h3 span { display: block; font-size: 16px; color: #fff; font-weight: 600; width: 40px; height: 40px; line-height: 40px; text-align: center; background: #666;    border-radius: 100%; margin-bottom: 10px; transition: 0.3s;}
.section-item:first-child h3 { font-size: 32px; color: #fff; font-weight: 700;}
.section-item:first-child h3 span { background: #fff; color: #111; }
.slideH-accordion:hover .section-item:first-child h3 { font-size: 40px; color: #7E7E7E; font-weight:800;}
.slideH-accordion:hover .section-item:first-child h3 span { background: #666; color: #fff;}
.section-item:hover h3 { font-size: 40px !important; color: #fff !important; font-weight: 700 !important;}
.section-item:hover h3 span { background: #fff !important; color: #111 !important;}
.item-description { display: none; opacity: 0; transition: 0.3s; }
.section-item:hover .item-description { display: block !important; opacity: 1 !important;}
.section-item:hover .item-description h3 br { display: block;}
.item-description ul { margin-top: 15px;}
.item-description ul li:nth-child(1) { font-size: 24px; font-weight:500;padding: 2px 0;color: rgba(255,255,255,0.75);}
.item-description ul li:nth-child(2) { font-weight: 200;padding: 5px 0;color: rgba(255,255,255,0.75);}
.item-description ul li.list { text-align: left; font-size: 16px; white-space: nowrap; background: rgba(255,255,255,0.9); border-radius: 12px; box-shadow: 5px 7px 18px rgba(0, 77, 26, 0.3); padding: 20px; display: inline-block; position: relative; padding-left: 30px;}
.item-description ul li.list::before { content: '';position: absolute;left: 20px;width: 2px;height: 73%;background: #111;}
.item-description ul li.list span { display: block;font-size: 20px;color: #111;font-weight: 600;margin: 3px 0;}
.item-description .link a { display: inline-block; color: #fff; text-decoration: none; background: #39D66D;height: 40px;line-height: 40px;text-align: center;font-weight: 600;display:block; border-radius: 30px;color: #fff;margin: 20px 0 30px;}
.section-item.s1 .link a { width: 165px;color: #111;}
.section-item.s2 .link a { width: 210px;color: #111;}
.section-item.s3 .link a { width: 125px;color: #111;}
.section-item.s4 .link a { width: 125px;color: #111;}


/* 각 섹션별 가상 배경색 (실제 이미지 경로로 대체 가능) 
.section-item.s1::before { content: ''; background: #F5F5F5 url(../../../../img/slide-himg1-back.png) left top no-repeat;background-size: contain; }*/
.section-item.s2::before { content: ''; background: #F5F5F5 url(../../../../img/slide-himg2-back.png) left bottom no-repeat;background-size: cover; }
.section-item.s3::before { content: ''; background: #F5F5F5 url(../../../../img/slide-himg3-back.png) left bottom no-repeat;background-size: cover; }
.section-item.s4::before { content: ''; background: #F5F5F5 url(../../../../img/slide-himg4-back.png) left bottom no-repeat;background-size: cover; }
.section-item.s1:hover { background: url(../../../../img/slide-himg1.png) center no-repeat; }
.section-item.s2:hover { background: url(../../../../img/slide-himg2.png) center no-repeat; }
.section-item.s3:hover { background: url(../../../../img/slide-himg3.png) center no-repeat; }
.section-item.s4:hover { background: url(../../../../img/slide-himg4.png) center no-repeat; }

/*compMember-wrap*/
.compMember-wrap { clear: both;}
.compMember-container { clear: both;}
.compMember-container { display: flex; gap: 24px; padding: 60px 20px; justify-content: center;}
.compMember-box { flex: 1; display: flex; flex-direction: column; align-items: center; transition: transform 0.3s ease;}
.compMember-box:hover { transform: translateY(-10px);}
.compMember-box:hover .img-wrap img { transform: scale(1.03);}
.img-wrap { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 20px; margin-bottom: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);}
.img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block;transition: transform 0.3s ease;}
.info-wrap { text-align: center;}
.info-wrap span { display: block;}
.category { font-size: 24px; color: #666; margin-bottom: 5px; font-weight: 500;}
.years {font-size: 28px; color: #000;}
.years strong { font-weight: 800;font-family: 'Paperlogy' !important;}

/*Collaboration Framework*/
.fancy-box-background { position: relative; z-index: 1;overflow: hidden;margin-top: 100px;}
.fancy-top { position: absolute;left: 250px;top: 100px;}
.fancy-top .aboutNet-no {font-weight: 700;}
.fancy-top .aboutNet-no span { display: block;  font-size: 24px; font-weight: 700; color: #39D66D;font-family: 'Paperlogy' !important;}
.fancy-top .aboutNet-ttl { font-size: 55px;padding: 30px 0 20px;}
.fancy-top .aboutNet-ttl span { font-weight: 700;}
.fancy-top .aboutNet-txt { font-size: 16px;margin-top: 10px;}
.fancy-top ul li:first-child {font-size: 24px; color: rgba(0, 0, 0, 0.7); font-weight: 700;}
.fancy-top ul li:last-child {font-size: 18px; color: #777; margin-top: 10px;}
.fancy-box-background .fancy-box-item { position: static; overflow: hidden;}
.fancy-box-background .fancy-box-item:hover .bg-banner-image { opacity: 1; visibility: visible;}
.bg-red { background-color:#058CE7; }
.bg-navy { background-color:#7B0598; }
.bg-black { background-color:#2BB077; }
.btn.btn-kiram-purple { background: #361f75; border-color: #361f75; color: #ffffff; }
.h-800px { height: 800px;}
.fancy-box-background:after {height: 100%; width: 100%; top: 0; left: 0;content: ""; z-index: 1; position: absolute;}
.fancy-text-content h6 { color: #fff;font-size: 36px;font-weight: 700;text-align: center;margin-top: 100%;}
.fancy-text-content h6 span { opacity: 0;}
.bg-banner-image { position: absolute; top: 0; left: 0; opacity: 0; height: 100%; width: 100%; z-index: 1; visibility: hidden; transition: all 0.5s ease-in-out;  background-size: cover;}
.h6-txt { opacity: 0;text-align: center;color: #fff;font-size: 20px;font-weight: 200;}

.fancy-text-box-style-03 { position: relative; overflow: hidden;}
.fancy-text-box-style-03 * { transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out;}
.fancy-text-box-style-03 .fancy-text-content { position: absolute; width: 100%; left: 0px; top: auto; z-index: 9; bottom: 0px; height: auto; transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px);}
.fancy-text-box-style-03:hover .fancy-text-content,
.fancy-text-box-style-03:focus .fancy-text-content { transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px);}
.fancy-text-box-style-03:hover .fancy-text-content .feature-box-overlay { opacity: 1;}
.fancy-text-box-style-03:hover .fancy-text-content .fancy-hover-top { opacity: 1; position: absolute;left: 0px;top: 0px;}
.fancy-text-box-style-03:hover .fancy-text-content .text-link { margin-bottom: 20px;}
.fancy-text-box-style-03:hover .fancy-text-content h6 { padding-top: 100px;}
.fancy-text-box-style-03:hover .fancy-text-content .h6-txt { opacity: 1;text-align: center;color: #fff;font-size: 20px;}
.fancy-text-box-style-03:hover .fancy-text-content .h6-img {margin-top: -250px;}
.fancy-text-box-style-03:hover h6 { margin-top: 55%;}
.fancy-text-box-style-03:hover .fancy-text-content h6 span { opacity: 1;}
.fancy-text-box-style-03:hover .text-link { opacity: 1;}
.feature-box-overlay { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: -1; opacity: 0;}
.row {display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px;}
.row-cols-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
.row-cols-xl-3>*{-ms-flex:0 0 33.33%;flex:0 0 33.33%;max-width:33.33%;}
.fancy-hover-top { color: #fff;opacity: 0;margin: 100px 0 0 100px;opacity: 0;}
.fancy-hover-top p:first-child { font-size: 24px;font-weight: 200;padding-bottom: 5px;}
.fancy-hover-top p:last-child { font-size: 22px;font-weight: 700;line-height: 130%;}
.text-link { opacity: 0; background: rgba(255,255,255,0.2);border: 1px solid rgba(255,255,255,0.8);border-radius: 30px;width: 300px;height: 55px;line-height: 52px;position: absolute;  left: 50%; bottom:20px;  transform: translate(-50%, -20%);text-align: center;}
.text-link a { color: #fff;font-size: 20px;}

/*인증서*/
.compCertifi-wrap { clear: both;background: #F5F5F5; padding-bottom: 100px;}
.compCertifi-swiper { position: relative; width: 100%; margin: 0 auto; padding: 50px 0; overflow: hidden; }
.swiper-wrapper { display: flex !important; flex-wrap: nowrap !important; align-items: stretch;}
.swiper-slide { height: auto; display: flex; justify-content: center;}
.compCertifi-box { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px;}
.img-cert { width: 100%; max-width: 200px; aspect-ratio: 1 / 1.4; background: #fff; border: 1px solid #e5e5e5;box-shadow: 0 4px 12px rgba(0,0,0,0.08); margin-bottom: 15px;
    display: flex;align-items: center; justify-content: center;  overflow: hidden; transition: transform 0.3s ease;border-radius: 7px;}
.img-cert img { width: 100%; height: 100%; object-fit: contain; display: block;}
.compCertifi-box:hover .img-cert { transform: translateY(-8px);}
.txt-cert { width: 100%; min-height: 50px; }
.txt-cert span { display: block; color: #111; word-break: keep-all;}
.txt-cert span:first-child { font-weight: 700;}
.swiper-button-next { color: #ccc; transition: 0.3s;margin-right: -60px;margin-top: 90px;}
.swiper-button-prev { color: #ccc; transition: 0.3s;margin-left: -60px;margin-top: 90px;}
.swiper-button-next:after, 
.swiper-button-prev:after { font-size: 24px;}
.swiper-button-next:hover, 
.swiper-button-prev:hover { color: #111;}
.compCertifi-swiper .swiper-button-prev, .compCertifi-swiper .swiper-container-rtl .swiper-button-next { background: rgba(255, 255, 255, 1) url(../../../../img/mainV-left.png) center no-repeat !important;}





/* 반응형 처리 */
@media (max-width: 1024px) {
    .compWhat-body { flex-direction: column; align-items: center; }
    .compWhat-item { width: 100%; }
    
    .comparison-container { flex-direction: column; }
    .left-side { clip-path: none; }
    .right-side { padding-left: 60px; }
    .vs-badge { font-size: 4rem; }
}




@media (max-width: 768px) {
    
    .compMember-container { display: grid; grid-template-columns: repeat(2, 1fr); }

}