@charset "utf-8";

/* reset */
@font-face {font-family: 'Pretendard'; font-weight: 400; src: url(../font/Pretendard-Regular.woff2) format('woff2');}
@font-face {font-family: 'Pretendard'; font-weight: normal; src: url(../font/Pretendard-Medium.woff2) format('woff2');}
@font-face {font-family: 'Pretendard'; font-weight: 600; src: url(../font/Pretendard-SemiBold.woff2) format('woff2');}
@font-face {font-family: 'Pretendard'; font-weight: bold; src: url(../font/Pretendard-Bold.woff2) format('woff2');}

html {position:relative;height:100%; scroll-behavior: auto}
html,body {font-family:'Pretendard'; color:#111; font-weight:normal; -webkit-text-size-adjust:none;-moz-text-size-adjust:none; -ms-text-size-adjust:none; -webkit-tap-highlight-color:transparent; line-height: 1.5; font-size: 15px; }
html,body,div,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,input,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:none; -webkit-touch-callout:none; -webkit-font-smoothing:antialiased; word-break: keep-all}
body,button,h1,h2,h3,h4,h5,input,select,table,textarea {font-family:'Pretendard'; margin:0; padding:0}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,select,input,textarea,p,blockquote,th,td,menu,button,a,span,strong,label,header,footer,section,article,aside,nav,hgroup,details,figure,figcaption {word-break:break-word; box-sizing:border-box;-moz-box-sizing:border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; word-break: keep-all} /* 여백을 포함한 사이즈 설정*/ 
h1,h2,h3,h4,h5,h6,input,select,textarea,button,option {color:inherit; font-family:'Pretendard'; font-size:100%; font-weight:normal; word-break: keep-all}
h1,h2,h3,h4,h5,h6,strong,b,th {font-weight:bold}
em,var,address,i {font-style:normal}
ul,ol,li {list-style:none}
legend,fieldset,button,img {border:0}
img {max-width:100%; vertical-align:top}
input,select,textarea,button,label,strong,a,time {vertical-align:inherit}
input,select,textarea,button,option {font-family:inherit; font-weight:inherit}
input,select,textarea {appearance:none; -webkit-appearance:none; border-radius: 0; border: none}
input:focus, textarea:focus {outline-style: none; box-shadow: none; border: 0px}
textarea {resize:none; border: none}
button,select,option {color:inherit; text-transform:none} 
table {table-layout:fixed; width:100%; border-collapse:collapse; border-spacing:0} 
button {background:none; cursor:pointer; white-space: nowrap; overflow:visible}
a {color:inherit; font-size: inherit; text-decoration:none}

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

/* container */
.container {padding-top: 78px;}
.inner {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;}

/* header */
.header {position: fixed; left: 0; width: 100%; z-index: 100; background: #fff; border-bottom: 1px solid #e4e7ec;}
.header .inner {position: relative; display: flex; justify-content: space-between; align-items: center; height: 78px; padding: 10px 20px; margin: 0 auto;}
.header .inner .left {display: flex; justify-content: space-between; align-items: center;}
.header .inner .left h1 a {display: flex; align-items: center;}
.header .inner .left h1 a img {max-height: 40px;}
.header .inner nav .gnb {display: flex; align-items: center; height: 60px; gap: 14px;}
.header .inner nav .gnb > li a {height: 40px; padding: 7px 17px; border-radius: 8px; font-size: 16px; transition: .25s;}
.header .inner .utilArea a {display: block; height: 42px; line-height: 42px; padding: 0 24px; background: #1D2939; border-radius: 8px; color: #fff;}
.header .inner .utilArea a + a {margin-left: 2px;}
.header .inner .trigger {display: none; width: 40px; height: 40px; padding: 10px 8px;}
.header .inner .trigger .triggerInner {position: relative; height: 100%;}
.header .inner .trigger span {position: absolute; left: 0; display: inline-block; width: 100%; height: 3px; background: #101828; border-radius: 3px; transition: .25s;}
.header .inner .trigger span:nth-child(1) {top: 0;}
.header .inner .trigger span:nth-child(2) {top: 50%; transform: translateY(-50%);}
.header .inner .trigger span:nth-child(3) {bottom: 0;}
.header .inner.active .trigger span:nth-child(1) {top: 50%; transform: translateY(-50%) rotate(45deg);}
.header .inner.active .trigger span:nth-child(2) {opacity: 0; visibility: hidden;}
.header .inner.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 {display: flex; flex-direction: column; justify-content: center; align-items: center; height: calc(100vh - 79px); text-align: center;}
.visual .inner .areaTitle {margin-bottom: 60px;}
.visual .inner .areaTitle h2 {margin-top: 40px; font-size: 56px;}
.visual .inner .areaTitle h2 span {display: block;}
.visual .inner .areaBtn {display: flex; align-items: center; justify-content: center; max-width: 330px; gap: 10px;}
.visual .inner .areaBtn .primaryBtn {display: flex; align-items: center; justify-content: center; height: 50px; padding: 0 24px; background: #1D2939; border-radius: 8px;}
.visual .inner .areaBtn .primaryBtn span {font-size: 16px; font-weight: bold; color: #fff;}
.visual .inner .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 .areaBtn .moveDemo span {font-size: 16px; font-weight: bold;}

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

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

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

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

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

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

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

/* Frame 1000007027 - 최상위 이벤트 박스 */
.insRatePlan .inner .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 .rateFeatures .item .eventBox .eventTop {display: flex; height: 88px; justify-content: space-between; align-items: flex-start; align-self: stretch;}

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

/* Frame 1000007162 - 오픈이벤트 배경 박스 */
.insRatePlan .inner .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 .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 .rateFeatures .item .eventBox .eventContent {display: flex; height: 87px; align-items: center; gap: 48px;}

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

/* 이벤트 텍스트 (월정료, 구축비) */
.insRatePlan .inner .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 .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 .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 {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 .inner nav {display: none; position: absolute; top: 60px; left: 0; width: 100%; background: #fff;}
  .header .inner nav .gnb {position: static; display: block; padding: 30px 0 20px; height: auto; transform: initial;}
  .header .inner nav .gnb > li {padding: 0 17px;}
  .header .inner nav .gnb > li + li {margin-top: 12px;}
  .header .inner nav .gnb > li a {width: 100%; justify-content: start;}
  .header .inner .right {display: none; position: absolute; top: 135px; left: 0; width: 100%; padding: 0 20px 20px; background: #fff; border-bottom: 1px solid #EFEFF1;}
  .header .inner .right .utilArea a {width: fit-content;}
  .header .inner .trigger {display: block;}
  .header .inner.active nav {display: block;}
  .header .inner.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;}

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

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

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

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

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

  /* insRatePlan */
  .insRatePlan .inner .rateFeatures .item .rateBox {flex-direction: column;}
  .insRatePlan .inner .rateFeatures .item .eventBox .bottom .left p {font-size: 14px;}
  .insRatePlan .inner .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;}
}