@charset "utf-8";


/* common */
.taCenter {text-align: center !important;}
.taLeft {text-align: left !important;}
.taRight {text-align: right !important;}

/* container */
/*.container {padding-top: 78px;}*/
.inner-inst {max-width: 1000px; margin: 0 auto; padding: 160px 20px;}

/* text 정의 */
.sectionTit {font-size: 40px; font-weight: bold; color: #344054;}
.graysubTit {color: #98a2b3; font-size: 20px; font-weight: 600;}

.sectionTit p {font-size: 40px;}

/* header */
.header-inst {position: fixed; left: 0; width: 100%; z-index: 100; background: #fff; border-bottom: 1px solid #e4e7ec; padding-top:78px;}
.header-inst .inner-inst {position: relative; display: flex; justify-content: space-between; align-items: center; height: 78px; padding: 10px 20px; margin: 0 auto;}
.header-inst .inner-inst .left {display: flex; justify-content: space-between; align-items: center;}
.header-inst .inner-inst .left h1 a {display: flex; align-items: center;}
.header-inst .inner-inst .left h1 a img {max-height: 40px;}
.header-inst .inner-inst nav .gnb {display: flex; align-items: center; height: 60px; gap: 14px;}
.header-inst .inner-inst nav .gnb > li a {height: 40px; padding: 7px 17px; border-radius: 8px; font-size: 16px; transition: .25s;}
.header-inst .inner-inst .utilArea a {display: block; height: 42px; line-height: 42px; padding: 0 24px; background: #1D2939; border-radius: 8px; color: #fff;}
.header-inst .inner-inst .utilArea a + a {margin-left: 2px;}
.header-inst .inner-inst .trigger {display: none; width: 40px; height: 40px; padding: 10px 8px;}
.header-inst .inner-inst .trigger .triggerinner-inst {position: relative; height: 100%;}
.header-inst .inner-inst .trigger span {position: absolute; left: 0; display: inline-block; width: 100%; height: 3px; background: #101828; border-radius: 3px; transition: .25s;}
.header-inst .inner-inst .trigger span:nth-child(1) {top: 0;}
.header-inst .inner-inst .trigger span:nth-child(2) {top: 50%; transform: translateY(-50%);}
.header-inst .inner-inst .trigger span:nth-child(3) {bottom: 0;}
.header-inst .inner-inst.active .trigger span:nth-child(1) {top: 50%; transform: translateY(-50%) rotate(45deg);}
.header-inst .inner-inst.active .trigger span:nth-child(2) {opacity: 0; visibility: hidden;}
.header-inst .inner-inst.active .trigger span:nth-child(3) {top: 50%; bottom: unset; transform: translateY(-50%) rotate(-45deg);}

/* visual */
.visual {display: block; background: linear-gradient(0deg,rgba(245, 250, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);}
.visual .inner-inst {display: flex; flex-direction: column; justify-content: center; align-items: center; height: calc(100vh - 79px); text-align: center;}
.visual .inner-inst .areaTitle {margin-bottom: 60px;}
.visual .inner-inst .areaTitle h2 {margin-top: 40px; font-size: 56px;}
.visual .inner-inst .areaTitle h2 span {display: block;}
.visual .inner-inst .areaBtn {display: flex; align-items: center; justify-content: center; max-width: 330px; gap: 10px;}
.visual .inner-inst .areaBtn .primaryBtn {display: flex; align-items: center; justify-content: center; height: 50px; padding: 0 24px; background: #1D2939; border-radius: 8px;}
.visual .inner-inst .areaBtn .primaryBtn span {font-size: 16px; font-weight: bold; color: #fff;}
.visual .inner-inst .areaBtn .moveDemo {display: flex; align-items: center; justify-content: center; height: 50px; padding: 0 24px; border-radius: 8px; color: #1D2939; border: 1px solid #1D2939; font-size: 16px; font-weight: bold;}
.visual .inner-inst .areaBtn .moveDemo span {font-size: 16px; font-weight: bold;}

/* visual.rate */
.visual.rate .inner-inst {height: auto; padding: 138px 0;}
.visual.rate .inner-inst .graysubTit {margin-top: 20px; font-size: 24px;}

/* insSalesCompare */
.insSalesCompare .inner-inst .areaTit {margin-bottom: 60px;}
.insSalesCompare .inner-inst .areaTit .sectionTit {margin-bottom: 6px;}
.insSalesCompare .inner-inst .areaImg {text-align: center;}
.insSalesCompare .inner-inst .areaImg img {width: 100%;}

/* upgrade */
.upgrade {background: #F9FAFB;}
.upgrade .inner-inst .areaTit {margin-bottom: 60px;}
.upgrade .inner-inst .upgradeBox {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;}
.upgrade .inner-inst .upgradeBox .item {display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 50px 60px; background: #fff; border-radius: 24px;}
.upgrade .inner-inst .upgradeBox .item .left strong {font-size: 32px; font-weight: 600;}
.upgrade .inner-inst .upgradeBox .item .left p {margin-top: 20px;}
.upgrade .inner-inst .upgradeBox .item .left p span {display: block; font-size: 24px; font-weight: 600; color: #667085;}

/* insCheck */
.insCheck .inner-inst .areaTit {margin-bottom: 60px;}
.insCheck .inner-inst .checkPointBox {padding: 40px; background: #F9FAFB; border: 1px solid #E4E7EC; border-radius: 32px;}
.insCheck .inner-inst .checkPointBox .label {width: fit-content; padding: 12px 20px; margin-bottom: 32px; background: #17BF98; border-radius: 38px;}
.insCheck .inner-inst .checkPointBox .label span {font-size: 24px; font-weight: 600; color: #fff;}
.insCheck .inner-inst .checkPointBox .checkList > li {display: flex; align-items: center; gap: 10px;}
.insCheck .inner-inst .checkPointBox .checkList > li + li {margin-top: 14px;}
.insCheck .inner-inst .checkPointBox .checkList > li svg path {stroke: #17BF98;}
.insCheck .inner-inst .checkPointBox .checkList > li p {font-size: 20px; font-weight: 600; color: #4e5968;}

/* insService */
.insService {background: #F9FAFB;}
.insService .inner-inst .areaTit {margin-bottom: 60px;}
.insService .inner-inst .areaTit .sectionTit {margin-bottom: 12px;}
.insService .inner-inst .areaTit p span {display: block;}
.insService .inner-inst .areaTit p span em {color: #12998B;}
.insService .inner-inst .serviceFeatures .item + .item {margin-top: 60px;}
.insService .inner-inst .serviceFeatures .featureTit {display: block; font-size: 24px; font-weight: bold;}
.insService .inner-inst .serviceFeatures .featureList {margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 16px;}
.insService .inner-inst .serviceFeatures .featureList > li {flex: 1;}
.insService .inner-inst .serviceFeatures .featureList > li .featureBox {padding: 36px; background: #fff; border-radius: 20px;}
.insService .inner-inst .serviceFeatures .featureList > li .featureBox .label {width: 47px; height: 30px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; font-size: 20px; font-weight: bold; color: #17bf98; background: #f3fcfa; border-radius: 6px;}
.insService .inner-inst .serviceFeatures .featureList > li .featureBox .featureName {display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 22px; font-weight: 600;}
.insService .inner-inst .serviceFeatures .featureList > li .featureBox .featureName span {color: #98a2b3; font-size: 24px; font-weight: 600;}
.insService .inner-inst .serviceFeatures .featureList > li .featureBox p span {display: block; font-size: 15px; color: #667085;}

/* insStatus */
.insStatus .inner-inst {max-width: 1015px;}
.insStatus .inner-inst .areaTit {margin-bottom: 32px;}
.insStatus .inner-inst .areaTit .statusSummaryWrap {display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;}
.insStatus .inner-inst .areaTit .statusSummaryWrap .statusSummary {display: flex; align-items: center; gap: 8px;}
.insStatus .inner-inst .areaTit .statusSummaryWrap .statusSummary .label {display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; background: #f2f4f7; border-radius: 10px;}
.insStatus .inner-inst .areaTit .statusSummaryWrap .statusSummary .label span,
.insStatus .inner-inst .areaTit .statusSummaryWrap .statusSummary .label em {font-size: 15px; font-weight: bold; color: #667085;}
.insStatus .inner-inst .statusTable {max-height: 648px; border: 1px solid #E4E7EC; border-radius: 12px; overflow: auto;}
.insStatus .inner-inst .statusTable table th {padding: 12px 9px; border-bottom: 1px solid #EFEFF1; background: #fbfbfb; font-size: 13px; font-weight: 600;}
.insStatus .inner-inst .statusTable table th.product {background: #F2F4F7;}
.insStatus .inner-inst .statusTable table th + th {border-left: 1px solid #EFEFF1;}
.insStatus .inner-inst .statusTable table td {height: 43px; padding: 12px 9px;}
.insStatus .inner-inst .statusTable table td:not(:last-child) {border-right: 1px solid #EFEFF1;}
.insStatus .inner-inst .statusTable table td div {font-size: 12px;}
.insStatus .inner-inst .statusTable table td div.name {display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.insStatus .inner-inst .statusTable table td div.wait {color: #98A2B3;}
.insStatus .inner-inst .statusTable table td div.ing {color: #12998B;}
.insStatus .inner-inst .statusTable table td div.done {color: #1D2939;}
.insStatus .inner-inst .statusTable table td div .moveLink {color: #667085; font-weight: 600; text-decoration: underline;}
.insStatus .inner-inst .statusTable table tr + tr {border-top: 1px solid #EFEFF1;}

/* insApply */
.insApply {background: #F9FAFB;}
.insApply .inner-inst .applyBox {padding: 50px 40px; background: #1d2939; border-radius: 24px;}
.insApply .inner-inst .applyBox .sectionTit {margin-bottom: 32px; text-align: center;}
.insApply .inner-inst .applyBox .sectionTit p {color: #fff;}
.insApply .inner-inst .applyBox .applyBtn {display: block; margin: 0 auto; width: fit-content; height: 64px; line-height: 64px; padding: 0 46px; border-radius: 10px; background: #fff; color: #1d2939; font-size: 20px; font-weight: bold;}

/* insRatePlan */
.insRatePlan .inner-inst .rateFeatures .item + .item {margin-top: 80px;}
.insRatePlan .inner-inst .rateFeatures .item .areaTit {display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;}
.insRatePlan .inner-inst .rateFeatures .item .areaTit .rateTit {display: block; font-size: 36px; font-weight: bold;}
.insRatePlan .inner-inst .rateFeatures .item .areaTit .refer {font-size: 18px; color: #98a2b3;}
.insRatePlan .inner-inst .rateFeatures .item .rateBox {display: flex; justify-content: space-between; gap: 20px; margin-bottom: 20px;}
.insRatePlan .inner-inst .rateFeatures .item .rateBox .feature {flex: 1; padding: 24px 40px; background: #fcfcfd; border: 1px solid #F2F4F7; border-radius: 12px;}
.insRatePlan .inner-inst .rateFeatures .item .rateBox .feature .rateTop {display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 8px;}
.insRatePlan .inner-inst .rateFeatures .item .rateBox .feature .rateTop .plan {font-size: 24px; font-weight: 600;}
.insRatePlan .inner-inst .rateFeatures .item .rateBox .feature .rateTop .count {padding: 7px 10px; font-size: 14px; font-weight: 600; color: #98a2b3; border-radius: 8px;}
.insRatePlan .inner-inst .rateFeatures .item .rateBox .feature .rateTop .count.basic {background: #f3fcfa; color: #17bf98;}
.insRatePlan .inner-inst .rateFeatures .item .rateBox .feature .rateTop .count.premium {background: #F1F5FD; color: #207FFC;}
.insRatePlan .inner-inst .rateFeatures .item .rateBox .feature .rateBottom {display: flex; align-items: center; justify-content: space-between; gap: 20px;}
.insRatePlan .inner-inst .rateFeatures .item .rateBox .feature .rateBottom .pricing {font-size: 36px; font-weight: bold;}
.insRatePlan .inner-inst .rateFeatures .item .rateBox .feature .rateBottom .info { text-align: right;}
.insRatePlan .inner-inst .rateFeatures .item .rateBox .feature .rateBottom .info p {font-size: 18px; color: #98a2b3;}
.insRatePlan .inner-inst .rateFeatures .item .rateBox .feature .rateBottom .info span {font-size: 14px; color: #98a2b3;}

/* Frame 1000007027 - 최상위 이벤트 박스 */
.insRatePlan .inner-inst .rateFeatures .item .eventBox {display: flex; padding: 24px 40px; flex-direction: column; align-items: flex-start; gap: 10px; align-self: stretch; border-radius: 12px; border: 2px dashed rgba(255, 76, 169, 0.80); background: rgba(255, 76, 169, 0.03);}

/* Frame 1000007159 - 상단 영역 */
.insRatePlan .inner-inst .rateFeatures .item .eventBox .eventTop {display: flex; height: 88px; justify-content: space-between; align-items: flex-start; align-self: stretch;}

/* Frame 1000007128 - 오픈이벤트 라벨 영역 */
.insRatePlan .inner-inst .rateFeatures .item .eventBox .eventLabelContainer {display: flex; align-items: center; gap: 60px; align-self: stretch;}

/* Frame 1000007162 - 오픈이벤트 배경 박스 */
.insRatePlan .inner-inst .rateFeatures .item .eventBox .eventLabelBox {display: flex; padding: 8px 16px; justify-content: center; align-items: center; gap: 10px; border-radius: 30px; background: rgba(255, 76, 169, 0.95);}

/* 오픈 이벤트 텍스트 */
.insRatePlan .inner-inst .rateFeatures .item .eventBox .eventLabel {color: #FFF; text-align: center; font-family: Pretendard; font-size: 20px; font-style: normal; font-weight: 700; line-height: 32px; letter-spacing: -1.2px;}

/* Frame 1000007156, 1000007157 - 이벤트 컨텐츠 */
.insRatePlan .inner-inst .rateFeatures .item .eventBox .eventContent {display: flex; height: 87px; align-items: center; gap: 48px;}

/* Frame 1000007156, 1000007157 - 각 이벤트 아이템 */
.insRatePlan .inner-inst .rateFeatures .item .eventBox .eventItem {display: flex; height: 87px; align-items: center; gap: 30px;}

/* 이벤트 텍스트 (월정료, 구축비) */
.insRatePlan .inner-inst .rateFeatures .item .eventBox .eventText {color: #98A2B3; text-align: center; font-family: Pretendard; font-size: 34px; font-style: normal; font-weight: 500; line-height: 40px; letter-spacing: -0.4px;}

/* 이벤트 가격 (무료, 10만원) */
.insRatePlan .inner-inst .rateFeatures .item .eventBox .eventPrice {color: #101828; text-align: center; font-family: Pretendard; font-size: 34px; font-style: normal; font-weight: 700; line-height: 40px; letter-spacing: -0.4px;}
.insRatePlan .inner-inst .rateFeatures .ps {margin-top: 40px; font-size: 18px; font-weight: 600; color: #344054;}

/* applyCont */
.applyCont {display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: 80px 20px; background: #f9fafb;}
.applyCont .applyInner {display: flex; gap: 60px;}
.applyBoxWrap {position: relative; padding: 44px 30px; box-shadow: 5px 4px 24px rgba(0,0,0,0.08); background: #fff; border-radius: 36px; margin-bottom: 80px;}
.applyBoxWrap .areaTit {text-align: center;}
.applyBoxWrap .areaTit h2 {margin-top: 10px; font-size: 23px; font-weight: bold;}
.applyBoxWrap .corp {position: absolute; top: calc(100% + 60px); left: 0; right: 0; text-align: center; font-size: 12px; font-weight: bold; color: #98A2B3;}
.applyCont .applyInner .proccess .proccessTit {font-size: 24px; font-weight: bold;}
.applyCont .applyInner .proccess .processList {margin-top: 40px;}
.applyCont .applyInner .proccess .processList > li + li {margin-top: 20px;}
.applyCont .applyInner .proccess .processList > li .order {display: flex; align-items: center;}
.applyCont .applyInner .proccess .processList > li .order .num {display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: 20px; border-radius: 50%; background: #f2f4f7; color: #475467; font-size: 24px; font-weight: 600;}
.applyCont .applyInner .proccess .processList > li .order .proccessName {margin-right: 20px; font-size: 24px; font-weight: bold;}
.applyCont .applyInner .proccess .processList > li .order .label {padding: 4px 7px; border-radius: 4px; font-size: 14px;font-weight: bold;}
.applyCont .applyInner .proccess .processList > li .order .label.ing {background: #17bf98; color: #fff;}
.applyCont .applyInner .proccess .processList > li .order .label.wait {background: #E4E7EC; color: #98a2b3;}
.applyCont .applyInner .proccess .processList > li .proccessInfo {position: relative; padding-left: 56px; margin-top: 16px;}
.applyCont .applyInner .proccess .processList > li .proccessInfo::before {content: ''; position: absolute; left: 14px; top: -6px; bottom: -6px; width: 8px; border-radius: 4px; background: #F2F4F7;}
.applyCont .applyInner .proccess .processList > li .proccessInfo p {font-size: 18px; font-weight: 600; color: #98a2b3;}
.dmInquiryBox .applyBox {margin-top: 16px;}
.dmInquiryBox .applyBox .inputWrap {margin-top: 8px;}
.dmInquiryBox .applyBox .inputWrap .item {display: flex; gap: 8px; min-width: 420px;}
.dmInquiryBox .applyBox .inputWrap .item + .item {margin-top: 8px;}
.dmInquiryBox .applyBox .inputWrap .item .col {flex: 1;}
.dmInquiryBox .applyBox .inputWrap .item .col input {width: 100%; height: 38px; padding: 0 14px; border-radius: 6px; border: 1px solid #efeff1; font-size: 13px; font-weight: 600; color: #242a30;}
.dmInquiryBox .applyBox .inputWrap .item .col input:not([name='PROD_CGNT_PATH']):read-only {background: #f2f4f7; border: 1px solid #EFEFF1; color: #8d96a1;}
.dmInquiryBox .applyBox .inputWrap .item .col input::placeholder {color: #8D96A1;}
.dmInquiryBox .applyBox .inputWrap .item .col input:not(:read-only):focus {border-color: #17bf98;}
.dmInquiryBox .applyBox .inputWrap .item .col .dropdownBox {position: relative;}
.dmInquiryBox .applyBox .inputWrap .item .col .dropdownBox label {position: relative; display: block;}
.dmInquiryBox .applyBox .inputWrap .item .col .dropdownBox label::after {content: ''; position: absolute; right: 11px; top: 11px; width: 16px; height: 16px; background: url(../img/ico_ts_down_gray.svg) no-repeat center / 16px; pointer-events: none;}
.dmInquiryBox .applyBox .inputWrap .item .col .dropdownBox label input {padding-right: 40px; cursor: pointer;}
.dmInquiryBox .applyBox .inputWrap .item .col .dropdownBox .dropdownList {display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; box-shadow: 0 4px 24px 0px rgba(0, 0, 0, 0.08); border: 1px solid #EFEFF1; border-radius: 4px; z-index: 1;}
.dmInquiryBox .applyBox .inputWrap .item .col .dropdownBox .dropdownList > li button {width: 100%; height: 28px; padding: 0 8px; text-align: left; font-size: 13px;}
.dmInquiryBox .applyBox .inputWrap .item .col .dropdownBox .dropdownList > li.selected button {padding-right: 43px; background: url(../img/ico_check_blue.svg) no-repeat center right 15px / 18px; color: #17bf98;}
.dmInquiryBox .applyBox .inputWrap .item .col .dropdownBox .dropdownList > li button:hover {background-color: #f2f4f7;}
.dmInquiryBox .applyBox .inputWrap .item .col .dropdownBox.active .dropdownList {display: block;}
.dmInquiryBox .applyBox .inputWrap .item .col textarea {display: block; width: 100%; height: 86px; padding: 12px; border-radius: 6px; border: 1px solid #EFEFF1; font-size: 13px; font-weight: 600; color: #242a30;}
.dmInquiryBox .applyBox .inputWrap .item .col textarea::placeholder {color: #8d96a1;}
.dmInquiryBox .applyBox .inputWrap .item .col textarea:focus {border-color: #17bf98;}
/* 주소 */
.dmInquiryBox .applyBox .inputWrap .item.addr .col input {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.dmInquiryBox .applyBox .inputWrap .item.addr .col input:read-only {cursor: pointer; padding-right: 30px; background: url(../img/ico_search.svg) no-repeat center right 14px / 16px; background-color: #fafafa;} 
/* 이용동의 */
.dmInquiryBox .applyBox .inputWrap .agreeWrap {display: flex; justify-content: space-between; align-items: center; margin-top: 24px;}
.dmInquiryBox .applyBox .inputWrap .agree {display: flex; justify-content: center; align-items: center;}
.dmInquiryBox .applyBox .inputWrap .agree input {width: 16px; height: 16px; border-radius: 4px; border: 1px solid #D0D5DD;}
.dmInquiryBox .applyBox .inputWrap .agree input[type="checkbox"]:checked {background: url(../img/ico_bg_check_square_on.png) no-repeat center / 16px; border-color: transparent;}
.dmInquiryBox .applyBox .inputWrap .agree span {padding-left: 6px; font-size: 12px; font-weight: 600; color: #8d96a1; cursor: pointer;}
.dmInquiryBox .applyBox .inputWrap .agreeWrap .detailView {padding-right: 22px; font-size: 12px; font-weight: 600; color: #8d96a1; background: url(../img/ico_ts_right_gray.svg) no-repeat center right / 16px;}
.dmInquiryBox .applyBox .inputWrap .agreeWrap .detailView:hover {text-decoration: underline;}
.dmInquiryBox .applyBox .inputWrap .infoBox {background: #F9FAFB; padding: 20px; border-radius: 12px;}
.dmInquiryBox .applyBox .inputWrap .infoBox p {color: #475467; font-size: 15px;}
.dmInquiryBox .applyBox .inputWrap .infoBox p em {font-weight: bold; color: #475467;}
.dmInquiryBox .applyBox .inputWrap .infoBox {background: #fff; border: 1px solid #EFEFF1;}
.dmInquiryBox .applyBox .inputWrap .btnArea {margin-top: 24px;}
.dmInquiryBox .applyBox .inputWrap .btnArea button {width: 100%; height: 56px; font-size: 18px; background: #17bf98; border-radius: 10px; color: #fff;}

/* footer */
.footer {background: #343f55}
.footer .inner-inst {padding: 42px 20px}
.footer .footerTop {display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px}
.footer .footerTop .logo {width: 120px}
.footer .footerTop .snsList li {display: inline-block}
.footer .footerTop .snsList li + li {margin-left: 8px}
.footer .footerTop .snsList li a {display: block; opacity: .6; transition: .35s}
.footer .footerTop .snsList li:hover a {opacity: 1} 
.footer .infoWrap .info {font-size: 1.2rem}
.footer .infoWrap .divide {margin: 0 5px}
.footer .areaInfo :is(.info, .divide, .copyright) {color: #949eb2}
.footer .areaInfo .copyright {font-size: 1.2rem}
.footer .footerBottom {display: flex; align-items: center; justify-content: space-between; margin-top: 40px;}
.footer .footerBottom .footerFamilysite {display: flex; align-items: center;}
.footer .footerBottom .footerFamilysite strong {margin-right: 40px; font-size: 18px; color: #949eb2;}
.footer .footerBottom .familysiteList {display: flex; align-items: center; color: #949eb2;}
.footer .footerBottom .familysiteList li + li {margin-left: 40px;}
.footer .footerBottom .familysiteList li a {padding: 8px; margin: -8px; font-size: 16px; transition: .35s;}
.footer .footerBottom .familysiteList li a:hover {opacity: .5;}
.footer .areaTerms {color: #949eb2; font-size: 1.2rem}
.footer .areaTerms button {transition: .35s}
.footer .areaTerms button:hover {opacity: .5}
.footer .areaTerms .divide {margin: 0 6px}
.footer .areaTerms .terms02 {color: #fff; font-weight: 600}

@media (max-width: 767px) {
  /* text 정의 */
  .sectionTit {font-size: 28px;}
  .sectionTit span {display: block;}
  .graysubTit {font-size: 15px;}
  .graysubTit span {display: block;}

  /* header */
  .header-inst .inner-inst nav {display: none; position: absolute; top: 60px; left: 0; width: 100%; background: #fff;}
  .header .inner-inst nav .gnb {position: static; display: block; padding: 30px 0 20px; height: auto; transform: initial;}
  .header .inner-inst nav .gnb > li {padding: 0 17px;}
  .header .inner-inst nav .gnb > li + li {margin-top: 12px;}
  .header .inner-inst nav .gnb > li a {width: 100%; justify-content: start;}
  .header .inner-inst .right {display: none; position: absolute; top: 135px; left: 0; width: 100%; padding: 0 20px 20px; background: #fff; border-bottom: 1px solid #EFEFF1;}
  .header .inner-inst .right .utilArea a {width: fit-content;}
  .header .inner-inst .trigger {display: block;}
  .header .inner-inst.active nav {display: block;}
  .header .inner-inst.active .right {display: block;}

  /* container */
  .inner {padding: 80px 20px;}

  /* visual */
  .visual .inner .areaTitle h2 {font-size: 44px;}

  /* visual.rate */
  .visual.rate .inner .graysubTit {font-size: 18px;}
  .visual.rate .inner .graysubTit span {display: block;}

  /* upgrade */
  .upgrade .inner .upgradeBox {grid-template-columns: 1fr;}
  .upgrade .inner .upgradeBox .item .left strong {font-size: 24px;}
  .upgrade .inner .upgradeBox .item .left p span {font-size: 17px;}
  .upgrade .inner .upgradeBox .item .right {width: 80px;}

  /* insCheck */
  .insCheck .inner .checkPointBox {padding: 0; background: none; border: none;}
  .insCheck .inner .checkPointBox .label {padding: 10px 20px;}
  .insCheck .inner .checkPointBox .label span {font-size: 20px;}
  .insCheck .inner .checkPointBox .checkList > li {align-items: start;}
  .insCheck .inner .checkPointBox .checkList > li svg {margin-top: 4px; flex: 0 0 24px;}

  /* insService */
  .insService .inner .areaTit .sectionTit span {display: block;}
  .insService .inner .serviceFeatures .featureTit {font-size: 20px;}
  .insService .inner .serviceFeatures .featureList {flex-direction: column;}
  .insService .inner .serviceFeatures .featureList > li {width: 100%;}
  .insService .inner .serviceFeatures .featureList > li .featureBox {padding: 20px;}
  .insService .inner .serviceFeatures .featureList > li .featureBox .label {width: 40px; height: 24px; font-size: 16px;}
  .insService .inner .serviceFeatures .featureList > li .featureBox .featureName {font-size: 24px;}
  .insService .inner .serviceFeatures .featureList > li .featureBox .featureName span {font-size: 24px;}
  .insService .inner .serviceFeatures .featureList > li .featureBox p span {font-size: 15px;}

  /* insSalesCompare */
  .insSalesCompare .inner .areaTit .sectionTit span {display: block;}
  .insSalesCompare .inner .areaTit .graysubTit span {display: block;}

  /* insStatus */
  .insStatus .inner .areaTit .statusSummaryWrap {display: block;}
  .insStatus .inner .areaTit .statusSummaryWrap .statusSummary {margin-top: 20px;}
  
  /* insRatePlan */
  .insRatePlan .inner .rateFeatures .item .areaTit .rateTit {font-size: 24px;}
  .insRatePlan .inner .rateFeatures .item .areaTit .refer {font-size: 15px;}
  .insRatePlan .inner .rateFeatures .item .rateBox .feature .rateTop .plan {font-size: 18px;}
  .insRatePlan .inner .rateFeatures .item .rateBox {flex-direction: column;}
  .insRatePlan .inner .rateFeatures .item .rateBox .feature .rateBottom {flex-direction: column; gap: 8px; align-items: flex-start;}
  .insRatePlan .inner .rateFeatures .item .rateBox .feature .rateBottom .info {text-align: left;}
  .insRatePlan .inner .rateFeatures .item .eventBox {padding: 20px;}
  .insRatePlan .inner .rateFeatures .item .eventBox .eventTop {height: auto; flex-direction: column; gap: 16px;}
  .insRatePlan .inner .rateFeatures .item .eventBox .eventLabelContainer {gap: 0;}
  .insRatePlan .inner .rateFeatures .item .eventBox .eventLabelBox {padding: 6px 12px;}
  .insRatePlan .inner .rateFeatures .item .eventBox .eventLabel {font-size: 16px;}
  .insRatePlan .inner .rateFeatures .item .eventBox .eventContent {display: flex; align-items: flex-start; gap: 16px; align-self: stretch; padding-left: 8px;}
  .insRatePlan .inner .rateFeatures .item .eventBox .eventItem {display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: 1 0 0;}
  .insRatePlan .inner .rateFeatures .item .eventBox .eventText {font-size: 24px;}
  .insRatePlan .inner .rateFeatures .item .eventBox .eventPrice {font-size: 28px;}
  .insRatePlan .inner .rateFeatures .ps {font-size: 14px; margin-top: 20px;}

  .applyBoxWrap {background: none; box-shadow: none; padding: 0;}
  .applyCont .applyInner {flex-direction: column; flex: 1;}
  .applyCont .applyInner .proccess .proccessTit {display: block; text-align: center;}
  .applyCont .applyInner .proccess .processList > li .proccessInfo {display: none;}
  

  .dmInquiryBox {display: block; border-radius: 0; box-shadow: none;}
  .dmInquiryBox .left {width: fit-content; margin: 0 auto 60px;}
  .dmInquiryBox .applyBox .inputWrap .item {display: block; min-width: auto;}
  .dmInquiryBox .applyBox .inputWrap .item .col + .col {margin-top: 8px;}
  /* 주소 */
  .dmInquiryBox .applyBox .inputWrap .item.addr {display: block;}
  .dmInquiryBox .applyBox .inputWrap .item.addr .col + .col {margin-top: 8px;}
  .dmInquiryBox .applyBox .inputWrap .infoBox {background: #fff; border: 1px solid #EFEFF1;}
  .dmInquiryBox .applyBox .inputWrap .btnArea button {width: 100%;}

  /* footer */
  .footer .infoWrap .info {display: block; font-size: 16px}
  .footer .infoWrap .divide {display: none}
  .footer .footerTop {flex-direction: column; gap: 20px; align-items: flex-start;}
  .footer .footerBottom .familysiteList {display: block}
  .footer .footerBottom .familysiteList li + li {margin-left: 0; margin-top: 15px}
  .footer .footerBottom {display: block}
  .footer .footerBottom .footerFamilysite {display: block}
  .footer .footerBottom .familysiteList {margin: 20px 0 40px;}
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* text 정의 */
  .sectionTit {font-size: 28px;}
  .graysubTit {font-size: 18px;}
  
  
  .sectionTit p {font-size: 28px;}

  /* header */
  .header-inst .inner-inst nav {display: none; position: absolute; top: 60px; left: 0; width: 100%; background: #fff;}
  .header-inst .inner-inst nav .gnb {position: static; display: block; padding: 30px 0 20px; height: auto; transform: initial;}
  .header-inst .inner-inst nav .gnb > li {padding: 0 17px;}
  .header-inst .inner-inst nav .gnb > li + li {margin-top: 12px;}
  .header-inst .inner-inst nav .gnb > li a {width: 100%; justify-content: start;}
  .header-inst .inner-inst .right {display: none; position: absolute; top: 135px; left: 0; width: 100%; padding: 0 20px 20px; background: #fff; border-bottom: 1px solid #EFEFF1;}
  .header-inst .inner-inst .right .utilArea a {width: fit-content;}
  .header-inst .inner-inst .trigger {display: block;}
  .header-inst .inner-inst.active nav {display: block;}
  .header-inst .inner-inst.active .right {display: block;}

  /* container */
  .inner-inst {padding: 80px;}

  /* visual */
  .visual .inner-inst .areaTitle h2 {font-size: 44px;}

  /* upgrade */
  .upgrade .inner-inst .upgradeBox {grid-template-columns: 1fr;}

  /* insService */
  .insService .inner-inst .serviceFeatures .featureList {flex-direction: column;}
  .insService .inner-inst .serviceFeatures .featureList > li {width: 100%;}

  /* insRatePlan */
  .insRatePlan .inner-inst .rateFeatures .item .rateBox {flex-direction: column;}
  .insRatePlan .inner-inst .rateFeatures .item .eventBox .bottom .left p {font-size: 14px;}
  .insRatePlan .inner-inst .rateFeatures .item .eventBox .bottom .left p span {display: block;}

  .applyCont .applyInner {flex-direction: column;}
  .applyCont .applyInner .proccess .processList > li .proccessInfo {display: none;}

  /* footer */
  .footer .footerBottom {display: block}
  .footer .footerBottom .footerFamilysite {display: block}
  .footer .footerBottom .familysiteList {margin: 20px 0 40px;}
}