@charset "utf-8";
/* 사용 color 수정 */
:root {
    --primary: #207FFC;
    --primary-hover: #4A98FF;
    --secandary: #f3f9ff;
;}

/* 사용 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-10 무료법인설립 페이지 추가 */
#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: 16rem 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 .corpVisualTit {font-size: 6.6rem; font-weight: 700; text-align: center; z-index: 1;}

.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 #F2F4F7; border-radius: 2rem; align-items: center; justify-content: center; width: 26rem;}
.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: 4rem;}
.corpProcess .inner .areaCont .areaContBoxWrap {gap: 1.2rem; align-items: stretch;}
.corpProcess .inner .areaCont .swiper-slide {display: flex; max-width: 25rem;}
.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%;}
.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;}

.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;}

    .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 .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 .corpVisualTit {font-size: 3.6rem; padding-left: 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;}

    .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: 380px) {
    .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;}
}