html {overflow: hidden;}

.guideMain {background: var(--Semantic-White, #FFF); overflow: auto; height: calc(100vh - 64px);}

/* 페이지 */
.guidePage {width: 768px; margin: 0 auto;}

.guidePage .pageInner {display: flex;width: 768px;flex-direction: column;align-items: flex-start;gap: 40px;}

.guidePage .pageHead {width: 100%; display: flex;padding-bottom: var(--Spacing-LG, 24px);flex-direction: column;align-items: flex-start;gap: var(--Spacing-MD, 16px);align-self: stretch; border-bottom: 1px solid var(--Neutral-200, #E9ECEF);}
.guidePage .pageHead .pageHeadInfo {width: 100%; display: flex;flex-direction: column;align-items: flex-start;gap: var(--Spacing-XL, 32px);align-self: stretch;}
.guidePage .pageHead .pageHeadInfo .pageHeadLocation {display: flex;align-items: center;gap: 6px;align-self: stretch;}
.guidePage .pageHead .pageHeadInfo .pageHeadLocation > span {display: flex;flex-direction: column;align-items: flex-start; color: var(--Neutral-600, #868E96);font-size: 12px;font-weight: 600;}
.guidePage .pageHead .pageHeadInfo .pageHeadLocation > span:last-child {color: var(--Neutral-700, #495057);}
.guidePage .pageHead .pageHeadInfo .pageHeadLocation > svg {width: 11px;height: 11px;}
.guidePage .pageHead .pageHeadInfo .pageHeadTitle {display: flex;flex-direction: column;align-items: flex-start;gap: var(--Spacing-XS, 4px);align-self: stretch;}
.guidePage .pageHead .pageHeadInfo .pageHeadTitle > dt {display: flex;flex-direction: column;align-items: flex-start;align-self: stretch; color: var(--Neutral-900, #212529);font-size: 32px;font-weight: 700;line-height: 130%;letter-spacing: -0.32px;}
.guidePage .pageHead .pageHeadInfo .pageHeadTitle > dd {display: flex;flex-direction: column;align-items: flex-start;align-self: stretch; color: var(--Neutral-600, #868E96);font-size: 14px;line-height: 160%;}

.guidePage .pageHead .pageHeadDate {width: 100%; display: flex;align-items: center;gap: 20px;align-self: stretch;}
.guidePage .pageHead .pageHeadDate > dl {display: flex;align-items: center;gap: var(--Spacing-XS, 4px);}
.guidePage .pageHead .pageHeadDate > dl > dt {display: flex;flex-direction: column;align-items: flex-start; color: var(--Neutral-900, #212529);font-size: 14px;font-weight: 700;line-height: 160%;}
.guidePage .pageHead .pageHeadDate > dl > dd {color: var(--Neutral-700, #495057);font-size: 14px;font-weight: 400;line-height: 160%;}
.guidePage .pageHead .pageHeadDate > dl > dd select {width: max-content; display: flex;padding: var(--Spacing-XS, 4px) 24px var(--Spacing-XS, 4px) var(--Spacing-SM, 8px);align-items: center; border-radius: var(--Radius-SM, 4px);border: 1px solid var(--Neutral-200, #E9ECEF);background: var(--Semantic-White, #FFF) url('../../images/video/index/i_select.svg') no-repeat top 50% right 8px; color: var(--Neutral-700, #495057);font-size: 14px;font-weight: 400;line-height: 160%;}


.guidePage .pageBody {width: 100%; display: flex;flex-direction: column;align-items: flex-start;gap: 80px;}
.guidePage .pageBody .pageBodyRow {width: 100%; display: flex;flex-direction: column;align-items: flex-start;gap: var(--Spacing-LG, 24px);}
.guidePage .pageBody .pageBodyRow .pTit {width: 100%; display: flex;align-items: center;gap: 10px;align-self: stretch; color: var(--Neutral-900, #212529);font-size: 24px;font-weight: 700;line-height: 140%;letter-spacing: -0.24px;}
.guidePage .pageBody .pageBodyRow .pCont {width: 100%; display: flex; gap: var(--Spacing-MD, 16px);flex-direction: column;align-items: flex-start;align-self: stretch; color: var(--Neutral-700, #495057);font-size: 16px;font-weight: 400;line-height: 160%; word-break: keep-all;}
.guidePage .pageBody .pageBodyRow .pCont > p {width: 100%; display: flex; gap: var(--Spacing-MD, 16px);flex-direction: column;align-items: flex-start;align-self: stretch; color: var(--Neutral-700, #495057);font-size: 16px;font-weight: 400;line-height: 160%; word-break: keep-all;}

.guidePage .pageBody .pageBodyRow .pItem {width: 100%; display: flex;align-items: flex-start;gap: 16px;align-self: stretch;}
.guidePage .pageBody .pageBodyRow .pItem > label {display: block; color: var(--Neutral-700, #495057);font-size: 16px;font-weight: 400;line-height: 160%;}
.guidePage .pageBody .pageBodyRow .pItem > p {display: flex;flex-direction: column;align-items: flex-start;flex: 1 0 0; color: var(--Neutral-700, #495057);font-size: 16px;font-weight: 400;line-height: 160%; word-break: keep-all;}
.guidePage .pageBody .pageBodyRow .pItem > p > b {color: var(--Neutral-700, #495057);font-size: 16px;font-weight: 500;line-height: 160%;}
.guidePage .pageBody .pageBodyRow .pItem > p > a {color: var(--Neutral-700, #495057);font-size: 16px;font-weight: 500;line-height: 160%;}

.guidePage .pageBody .pageBodyRow .pSubTit {width: 100%; color: var(--Neutral-900, #212529);font-size: 18px;font-weight: 700;line-height: 160%;}
.guidePage .pageBody .pageBodyRow .pSubList {width: 100%; width: 100%; display: flex; gap: var(--Spacing-MD, 16px);flex-direction: column;align-items: flex-start;align-self: stretch; color: var(--Neutral-700, #495057);font-size: 16px;font-weight: 400;line-height: 160%; word-break: keep-all; padding-left: var(--Spacing-MD, 16px);}


.guidePage .introBody {width: 100%; display: flex;flex-direction: column;align-items: flex-start;gap: 48px;flex-shrink: 0;align-self: stretch;}
.guidePage .introBody .introMove {width: 100%; height: 394px;  position: relative; border-radius: 14px;border: 1px solid #E2E8F0;background: #0F172B;}
.guidePage .introBody .introMove .introMoveBg {width: 100%; height: 100%; border-radius: 14px; background: linear-gradient(45deg, rgba(49, 44, 133, 0.20) 0%, rgba(0, 0, 0, 0.00) 100%);}
.guidePage .introBody .introMove .introMoveInfo {width: 320px;height: 140px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center;}
.guidePage .introBody .introMove .introMoveImg {display: flex;width: 64px;height: 64px;padding: 0 16px; margin: 0 auto 16px;justify-content: center;align-items: center; border-radius: 100%;background: #6C5CE7;box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);}
.guidePage .introBody .introMove .introMoveTit {display: inline-flex;justify-content: center;align-items: center;gap: 10px; color: #FFF;text-align: center;font-size: 24px;font-weight: 700;line-height: 32px; margin: 0 0 8px;}
.guidePage .introBody .introMove .introMoveSub {display: inline-flex;justify-content: center;align-items: center;gap: 10px; color: #CAD5E2;text-align: center;font-size: 14px;font-weight: 400;line-height: 20px;}

.guidePage .introBody .introRow {width: 100%; display: flex;flex-direction: column;align-items: flex-start;gap: 20px;align-self: stretch;}
.guidePage .introBody .introRow .introRowTit {width: 100%; display: flex;height: 32px;align-items: center;gap: 12px;}
.guidePage .introBody .introRow .introRowTit > dt {display: flex;width: 32px;height: 32px;justify-content: center;align-items: center;flex-shrink: 0; border-radius: 8px;background: #F1F5F9; color: #45556C;font-size: 16px;font-weight: 700;line-height: 24px;}
.guidePage .introBody .introRow .introRowTit > dd {display: flex;align-items: center; color: #0F172B;font-size: 24px;font-weight: 700;line-height: 32px;}

.guidePage .introBody .introRow .introRowTxt {width: 100%; display: flex;justify-content: center;align-items: center;gap: 10px;align-self: stretch; color: #45556C;font-size: 16px;font-weight: 400;line-height: 26px;}

.guidePage .introBody .introRow .introRowStep {width: 100%; display: flex;align-items: center;gap: 16px;}
.guidePage .introBody .introRow .introRowStepItem {display: flex;width: calc((100% - 16px) / 2);height: 94px;padding: 17px 17px 1px 17px;flex-direction: column;align-items: flex-start;gap: 4px; border-radius: 10px;border: 1px solid #F1F5F9;background: #F8FAFC;}
.guidePage .introBody .introRow .introRowStepItem > label {display: flex;height: 16px;align-items: center;flex-shrink: 0;align-self: center; color: #6C5CE7;text-align: center;font-size: 12px;font-weight: 700;line-height: 16px;}
.guidePage .introBody .introRow .introRowStepItem > p {display: flex;justify-content: center;align-items: center;align-self: center; color: #0F172B;text-align: center;font-size: 14px;font-weight: 700;line-height: 20px;}
.guidePage .introBody .introRow .introRowStepItem > span {display: flex;height: 16px;align-items: center;flex-shrink: 0;align-self: center; color: #62748E;text-align: center;font-size: 12px;font-weight: 400;line-height: 16px;}


.guidePage .introBody .introEquipment {width: 100%; display: grid;height: 94px;row-gap: 16px;column-gap: 16px;flex-shrink: 0;align-self: stretch;grid-template-rows: repeat(1,minmax(0,1fr));grid-template-columns: repeat(2,minmax(0,1fr));}
.guidePage .introBody .introEquipmentRow {display: flex;padding: 24px 0 0 24px;align-items: flex-start;gap: 16px;align-self: stretch;justify-self: stretch; border-radius: 14px;border: 1px solid #E2E8F0;}
.guidePage .introBody .introEquipmentRow .introEquipmentRowImg {display: flex;width: 44px;height: 44px;padding: 12px 12px 0 12px;flex-direction: column;align-items: flex-start; border-radius: 10px;}
.guidePage .introBody .introEquipmentRow .introEquipmentRowImg.purple {background: #F2F1FD;}
.guidePage .introBody .introEquipmentRow .introEquipmentRowImg.green {background: #ECFDF5;}
.guidePage .introBody .introEquipmentRow .introEquipmentRowTxt {display: flex;height: 40px;flex-direction: column;align-items: flex-start;gap: 4px;}
.guidePage .introBody .introEquipmentRow .introEquipmentRowTxt > dt {display: flex;align-items: center;align-self: stretch; color: #0F172B;font-size: 14px;font-weight: 700;line-height: 20px;}
.guidePage .introBody .introEquipmentRow .introEquipmentRowTxt > dd {display: flex;height: 16px;align-items: flex-start;flex-shrink: 0;align-self: stretch; color: #62748E;font-size: 12px;font-weight: 400;line-height: 16px;}





/* ***** PAD ***** */
@media screen and (max-width:1280px) {
    .guideHeader {display: none;}
    .guideBody {min-height: 100vh;}

    .guideSidebar {display: none;}
    .guideMain {height: 100vh;}

    .guidePage {max-width: 768px; width: 100%;}
    .guidePage .pageInner {width: 100%;}
}