@charset "utf-8";
/* 사용 color 수정 */
:root {
    --primary: #00A876;
    --primary-hover: #0cc28c;
    --secandary: #f4fffa;
;}

/* 사용 color 수정 */

/*
01 에메랄드 그린
:root {
    --primary: #00A876;
    --primary-hover: #0cc28c;
    --secandary: #f4fffa;
;}

02 선샤인 오렌지
:root {
    --primary: #ff9d00;
    --primary-hover: #ffba4c;
    --secandary: #fffaf1;
;}

03 코발트 블루
:root {
    --primary: #207FFC;
    --primary-hover: #4A98FF;
    --secandary: #f3f9ff;
;}

04 라벤터 퍼블
:root {
    --primary: #814cff;
    --primary-hover: #996eff;
    --secandary: #f2edff;
;}

05 버건디 레드
:root {
    --primary: #ff4e48;
    --primary-hover: #ff6b66;
    --secandary: #fff4f4;
;}

/* 2025-12-15 법인컨설팅 페이지 추가 */
#mainPage .visual.type03 .thumbnail::before {background: rgba(0, 0, 0, 0.2);}
#mainPage .visual .inner .visualTop .left .txtArea .pointColor {color: #008d63 !important}

#corporation section .inner, #corporation footer .inner {max-width: 104rem; padding-left: 0; padding-right: 0;}
#corporation section .inner .areaTxt .sectionTit {margin-top: 1.2rem; margin-bottom: 2rem;}
#corporation section .inner .areaTxt .graysubTit {font-size: 2.4rem; font-weight: 600;}

.corpVisual {background-image: url(../images/bg/corporation_visual.png); background-repeat: no-repeat; background-position: center; background-size: cover; margin-top: 5rem; padding: 19rem 0; display: flex; align-items: center; justify-content: center; position: relative;}
.corpVisual .bgShadow {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(255, 255, 255, 0.45);}
.corpVisual .corpVisualTitWrap {z-index: 1; display: flex; flex-direction: column; align-items: center;}
.corpVisual .corpVisualTit {font-size: 6.6rem; font-weight: 700; text-align: center; z-index: 1; margin-bottom: 2rem;}
.corpVisual .corpVisualTitWrap .headingBtn {width: fit-content;}

.corpGuide .inner {text-align: center;}
.corpGuide .inner .sectionTit {margin-bottom: 2rem; font-size: 3.8rem;}
.corpGuide .inner .graysubTit {margin-bottom: 1rem;}
.corpGuide .inner .graysubTit:last-child {margin-bottom: 0;}
.corpGuide .inner .sectionTit .space {display: none;}

.corpService .inner {display: flex; justify-content: space-between; gap: 4rem;}
.corpService .inner .areaCont {display: flex; gap: 1.6rem;}
.corpService .inner .areaCont .corpServiceBox {display: flex; flex-direction: column; gap: 2rem; border: 2px solid #eeeeee; border-radius: 2rem; align-items: center; justify-content: center; width: 26rem; background-color: #fff;}
.corpService .inner .areaCont .corpServiceBox p {color: #485261; font-size: 2rem; font-weight: 700; text-align: center;}

.corpProcess {overflow: hidden;}
.corpProcess .inner {display: flex; flex-direction: column; gap: 7rem;}
.corpProcess .inner .areaBox {display: flex; flex-direction: column; gap: 4rem;}
.corpProcess .inner .areaCont .areaContBoxWrap {gap: 1.2rem; align-items: stretch;}
.corpProcess .inner .areaCont .swiper-slide {display: flex; max-width: 25rem;}
.corpProcess .inner .areaCont.corpConsultingSwiper .swiper-slide {display: flex; max-width: 33.9rem;}
.corpProcess .inner .areaCont .areaContBox {display: flex; gap: 2rem; padding: 3rem 2rem; border-radius: 2.4rem; box-shadow: 5px 4px 24px 0 rgba(119, 119, 119, 0.08); background-color: #fff; flex-direction: column; width: 100%; height: 100%; border: 1px solid #F2F4F7;}
.corpProcess .inner .areaCont .areaContBox .areaContBoxTit {display: flex; align-items: center; gap: 2.4rem;}
.corpProcess .inner .areaCont .areaContBox .areaContBoxTit .areaNum {background-color: var(--secandary); font-size: 2rem; padding: 0.2rem 1.2rem; color: var(--primary); border-radius: 0.6rem;}
.corpProcess .inner .areaCont .areaContBox .areaContBoxTit .areaTit {font-size: 2.4rem; font-weight: 700;}
.corpProcess .inner .areaCont .areaContBox .areaContBoxTxt {font-size: 1.6rem; color: #667085;}

.corpYoutube .inner {display: flex; flex-direction: column; gap: 8rem;}
.corpYoutube .inner .sectionTit {text-align: center;}
.corpYoutube .inner .youtubeGrid {display: grid; gap: 2.6rem; grid-template-columns: repeat(3, minmax(0, 1fr));}
.corpYoutube .inner .youtubeGrid .youtubeItem .youtubeCard {display: block;}
.corpYoutube .inner .youtubeGrid .youtubeItem .youtubeCard .thumb {aspect-ratio: 320 / 192; border-radius: 0.9rem; border: 1px solid #f1f1f1; background-color: #000; margin-bottom: 1.2rem; position: relative; overflow: hidden;}
.corpYoutube .inner .youtubeGrid .youtubeItem .youtubeCard .thumb img {object-fit: cover; display: block; transition: all 0.25s; width: 100%; height: 100%;}
.corpYoutube .inner .youtubeGrid .youtubeItem .youtubeCard .thumb:hover .playBtn {scale: 1.2; transition: 0.25s;}
.corpYoutube .inner .youtubeGrid .youtubeItem .youtubeCard .thumb .playBtn {background: url(../images/ico/ico_play.svg) no-repeat center 100%; width: 3.2rem; height: 3.2rem; position: absolute; bottom: 1.8rem; right: 2rem;}
.corpYoutube .inner .youtubeGrid .youtubeItem .youtubeCard .title {color: #667085; font-size: 1.6rem; font-weight: 600; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; white-space: initial; overflow:hidden; text-align: left; line-height: 2.5rem;}

.corpModal {position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 1000; display: flex; align-items: center; justify-content: center; min-height: 90rem;}
.corpModal[hidden] {display: none;}
.corpModal .corpModalWrap {border-radius: 2.4rem; background-color: #fff; box-shadow: 0 0.4rem 2.4rem 0 rgba(0, 0, 0, 0.08);}
.corpModal .corpModalInner {display: flex; flex-direction: column; align-items: flex-start;}
.corpModal .corpModalInner .corpModalHeader {display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 4rem 4rem 1.6rem 4rem;}
.corpModal .corpModalInner .corpModalHeader h2 {font-size: 2.4rem; font-weight: 700;}
.corpModal .corpModalInner .corpModalHeader .close {background: url(../images/ico/ico_close.svg) no-repeat 100%; width: 2.4rem; height: 2.4rem; padding: 2rem; background-position: center;}
.corpModal .corpModalInner .corpModalHeader .close:hover {background-color: rgba(0, 0, 0, 0.05); border-radius: 50%;  transition: background-color 0.25s;}
.corpModal .corpModalInner .corpModalBody {padding: 1.6rem 4rem;}
.corpModal .corpModalInner .corpModalBody iframe {width: 64rem; height: 38.4rem; margin-bottom: 1.2rem; border-radius: 2.4rem; border: 1px solid #D0D5DD; background-color: #F9FAFB;}
.corpModal .corpModalInner .corpModalBody .corpModalContTit {width: 64rem; font-size: 2.4rem; font-weight: 600; color: #667085; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; white-space: initial; overflow: hidden; height: 7.2rem;}
.corpModal .corpModalInner .corpModalBtnWrap {display: flex; align-items: center; justify-content: end; width: 100%; gap: 1.2rem; padding: 1.6rem 4rem 4rem 4rem;}
.corpModal .corpModalInner .corpModalBtnWrap .prevBtn, .corpModal .corpModalInner .corpModalBtnWrap .nextBtn {padding: 1.8rem 2rem; border-radius: 1.2rem; font-size: 2rem; font-weight: 600; width: 12rem;}
.corpModal .corpModalInner .corpModalBtnWrap .prevBtn {background-color: #F2F4F7; color: #667085;}
.corpModal .corpModalInner .corpModalBtnWrap .nextBtn {background-color: var(--primary); color: #fff;}
.corpModal .corpModalInner .corpModalBtnWrap .prevBtn:hover {background-color: rgb(226, 226, 226); transition: 0.25s;}
.corpModal .corpModalInner .corpModalBtnWrap .nextBtn:hover {background-color: var(--primary-hover); transition: 0.25s;}

.corpFaq .inner {display: flex; flex-direction: column; gap: 8rem;}
.corpFaq .inner .sectionTit {text-align: center;}
.corpFaq .inner .corpFaqListWrap {display: flex; flex-direction: column; gap: 1.2rem;}
.corpFaq .inner .corpFaqListWrap .corpFaqList {width: 100%; padding: 2.4rem 3.6rem; border: 1px solid #F2F4F7; background-color: #F9FAFB; border-radius: 2.4rem;}
.corpFaq .inner .corpFaqListWrap .corpFaqList .corpFaqListBtn {display: flex; gap: 1.2rem; align-items: center; justify-content: space-between; width: 100%;}
.corpFaq .inner .corpFaqListWrap .corpFaqList .corpFaqListBtn p {font-size: 2.4rem; font-weight: 700; line-height: 4.2rem; transition: 0.2s;}
.corpFaq .inner .corpFaqListWrap .corpFaqList .corpFaqListBtn:hover p {color: #485261; transition: 0.2s;}
.corpFaq .inner .corpFaqListWrap .corpFaqList .corpFaqCont {display: none; margin-top: 1.6rem;}
.corpFaq .inner .corpFaqListWrap .corpFaqList .corpFaqCont p {color: #667085; font-size: 1.6rem; font-weight: 500; line-height: 2.4rem;}
.corpFaq .inner .corpFaqListWrap .corpFaqList .corpFaqListBtn img {transform: rotate(0); transition: 0.2s;}
.corpFaq .inner .corpFaqListWrap .corpFaqList.active .corpFaqListBtn img {transform: rotate(180deg); transition: 0.2s;}
.corpFaq .inner .areaBtn {text-align: center;}

@media screen and (max-width: 1440px) {
    .corpVisual {padding: 10rem 0;}
}
@media screen and (max-width: 1140px) {
    #corporation section .inner {max-width: 100%; padding-left: 4rem; padding-right: 4rem;}
    .corpProcess .inner .areaCont .areaContBoxWrap {gap: 0;}
    .corpProcess .inner .areaCont .swiper-slide {max-width: 100%;}
}
@media screen and (max-width: 1023px) {
    #corporation section .inner, #corporation footer .inner {padding: 12rem 4rem;}

    .corpVisual {background-image: url(../images/bg/corporation_m_visual.png); justify-content: start;}
    .corpVisual .corpVisualTit {font-size: 4.2rem; text-align: left; padding-left: 4rem;}

    .corpGuide .inner .sectionTit {font-size: 3.2rem;}

    .corpService .inner {flex-direction: column; gap: 4rem;}
    .corpService .inner .areaTxt .sectionTit br {display: none;}
    .corpService .inner .areaTxt .graysubTit br {display: none;}
    .corpService .inner .areaCont {justify-content: center;}
    .corpService .inner .areaCont .corpServiceBox {padding: 2rem;}

    .corpProcess .inner .areaCont .areaContBoxWrap {gap: 0;}
    .corpProcess .inner .areaCont .areaContBox .areaContBoxTit .areaTit {font-size: 2rem;}
    .corpProcess .inner .areaCont .swiper-slide {flex: 0 0 auto; max-width: 100%;}

    .corpFaq .inner {gap: 4rem;}
}
@media screen and (max-width: 767px) {
    #corporation section, #corporation footer {min-width: 32rem;}
    #corporation section .inner {padding: 6rem 2rem;}
    #corporation section .inner .pointLabel, #corporation section .inner .areaTxt .graysubTit {font-size: 1.6rem;}
    #corporation section .inner .areaTxt .sectionTit {margin-bottom: 0.4rem;}
    
    .corpVisual .corpVisualTitWrap {align-items: start; padding-left: 2rem;}
    .corpVisual .corpVisualTit {font-size: 2.8rem; padding-left: 0;}

    .corpGuide .inner .sectionTit {font-size: 2.1rem;}
    .corpGuide .inner .graysubTit {font-size: 1.5rem;}

    .corpProcess .inner {gap: 4rem;}
    .corpProcess .inner .areaBox {gap: 2rem;}
    .corpProcess .inner .areaTxt .sectionTit p {display: flex; gap: 0.6rem;}
    .corpProcess .inner .areaCont .areaContBox {gap: 1.2rem; padding: 2.2rem 1.6rem; border-radius: 1.6rem;}
    .corpProcess .inner .areaCont .areaContBox .areaContBoxTit {gap: 1.6rem;}
    .corpProcess .inner .areaCont .areaContBox .areaContBoxTit .areaNum {font-size: 1.4rem;}
    .corpProcess .inner .areaCont .areaContBox .areaContBoxTit .areaTit {font-size: 1.8rem;}
    .corpProcess .inner .areaCont .areaContBox .areaContBoxTxt {font-size: 1.4rem;}

    .corpYoutube .inner {gap: 4rem; align-items: center;}
    .corpYoutube .inner .youtubeGrid {grid-template-columns: 1fr;}
    .corpYoutube .inner .youtubeGrid .youtubeItem {max-width: 42rem;}
    .corpYoutube .inner .youtubeGrid .youtubeItem .youtubeCard {width: 100%;}

    .corpModal {min-height: auto;}
    .corpModal .corpModalInner .corpModalHeader {padding: 2rem 2rem 0.8rem 2rem;}
    .corpModal .corpModalInner .corpModalHeader h2 {font-size: 1.6rem;}
    .corpModal .corpModalInner .corpModalHeader .close {width: 1.6rem; height: 1.6rem; background-size: 1.6rem; padding: 1.2rem;}
    .corpModal .corpModalInner .corpModalBody {padding: 0.8rem 2rem}
    .corpModal .corpModalInner .corpModalBody iframe {width: 28rem; height: 19.8rem; border-radius: 1rem;}
    .corpModal .corpModalInner .corpModalBody .corpModalContTit {width: 28rem; font-size: 1.7rem; height: 5.1rem;}
    .corpModal .corpModalInner .corpModalBtnWrap {justify-content: start; padding: 0.8rem 2rem 2rem 2rem; gap: 0.8rem;}
    .corpModal .corpModalInner .corpModalBtnWrap .prevBtn, .corpModal .corpModalInner .corpModalBtnWrap .nextBtn {width: 100%;}

    .corpFaq .inner .corpFaqListWrap .corpFaqList {padding: 1.2rem 2rem; border-radius: 1.2rem;}
    .corpFaq .inner .corpFaqListWrap .corpFaqList .corpFaqListBtn p {font-size: 1.8rem;}
    .corpFaq .inner .corpFaqListWrap .corpFaqList .corpFaqCont {margin-top: 0.4rem;}
    .corpFaq .inner .corpFaqListWrap .corpFaqList .corpFaqCont p br {display: none;}
}
@media screen and (max-width: 570px) {
    .corpService .inner .areaCont {flex-direction: column; align-items: center;}
}
@media screen and (max-width: 400px) {
    .corpGuide .inner .sectionTit .space {display: block;}
}
@media screen and (max-width: 380px) {
    .corpProcess .inner .areaCont .areaContBox {min-height: 14.8rem;}

    .corpFaq .inner .corpFaqListWrap .corpFaqList {padding: 1.2rem;}
    .corpFaq .inner .corpFaqListWrap .corpFaqList .corpFaqListBtn p {font-size: 1.6rem;}
    .corpFaq .inner .corpFaqListWrap .corpFaqList .corpFaqListBtn img {width: 1.6rem; height: 1.6rem;}
    .corpFaq .inner .corpFaqListWrap .corpFaqList .corpFaqCont p {font-size: 1.4rem;}
}