body {
      width: 100%;
      overflow-x: hidden;
      position: unset !important;
}

#ModelArea {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      width: unset !important;
      height: unset !important;
      position: relative !important;
      margin: 0 auto;
}

/* 확장메뉴 아톰들은 z-index값 2로 주고 있음 */
.Atom:not(.WebMenuAtom, .WebQuickLinkAtom, .FloatingBarAtom) {
      z-index: 1;
}

/*================= 블럭에 속하지 않은 아톰은 화면감춤 =================*/
#ModelArea
      .Atom:not(
            .dynamic-grid-replace-block .Atom,
            .dynamic-grid-block .Atom,
            .WebQuickLinkAtom,
            .WebQuickLinkAtom .Atom,
            .FloatingBarAtom
      ) {
      display: none;
}

.dynamic-grid-row,
.dynamic-grid-background-color {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 100%;
}

body.center .dynamic-grid-row {
      margin: 0 auto;
}

body.center .dynamic-grid-replace-block[data-row='0'][data-col='0'] {
      margin: 0 auto;
}

#ModelArea.show-block-line .dynamic-grid-block,
#ModelArea.show-block-line .dynamic-grid-replace-block {
      /*box-shadow: 0 0 0 0.5px #000 inset; /* 반응형 웹 블럭 선 보이기 */
      outline: skyblue dashed 0.5px;
}

.dynamic-grid-block,
.dynamic-grid-replace-block {
      position: relative;
}

.dynamic-grid-inner-block {
      position: relative;
}

.dynamic-grid-block.expand {
      width: 100% !important;
}

.dynamic-grid-block .Atom,
.dynamic-grid-replace-block .Atom {
      position: absolute;
}

/*
.dynamic-grid-block .WebHtmlTagAtom:not(.static) {
    height: unset !important;
}
*/

/*===================== 중앙부분표시 =====================*/
.Image-Type-Atom[data-content-display='0'] > div {
      background-repeat: no-repeat;
      background-position: center;
}

.dynamic-grid-block .Image-Type-Atom[data-content-display='0'] > div,
.dynamic-grid-replace-block.pc .Image-Type-Atom[data-content-display='0'] > div {
      background-size: var(--originWidth) var(--originHeight);
}

.dynamic-grid-replace-block:not(.pc) .Image-Type-Atom[data-content-display='0'] > div {
      background-size: 100% 100%;
}

/*===================== 좌측부분표시 =====================*/
.Image-Type-Atom[data-content-display='1'] > div {
      background-repeat: no-repeat;
      background-position: left;
}

.dynamic-grid-block .Image-Type-Atom[data-content-display='1'] > div,
.dynamic-grid-replace-block.pc .Image-Type-Atom[data-content-display='1'] > div {
      background-size: var(--originWidth) var(--originHeight);
}

.dynamic-grid-replace-block:not(.pc) .Image-Type-Atom[data-content-display='1'] > div {
      background-size: 100% 100%;
}

/*===================== 우측부분표시 =====================*/
.Image-Type-Atom[data-content-display='2'] > div {
      background-repeat: no-repeat;
      background-position: right;
}

.dynamic-grid-block .Image-Type-Atom[data-content-display='2'] > div,
.dynamic-grid-replace-block.pc .Image-Type-Atom[data-content-display='2'] > div {
      background-size: var(--originWidth) var(--originHeight);
}

.dynamic-grid-replace-block:not(.pc) .Image-Type-Atom[data-content-display='2'] > div {
      background-size: 100% 100%;
}

.Image-Type-Atom[data-content-display='3'] {
      /* 블록크기 맞춤 */
      left: 0px !important;
      right: unset !important;
      top: 0px !important;
      bottom: unset !important;
      width: 100% !important;
      height: 100% !important;
}

.Image-Type-Atom[data-content-display='3'] > div {
      background-repeat: no-repeat;
      background-size: 100% 100%;
}

.Image-Type-Atom[data-content-display='4'] > div {
      /* 그림비율맞춤 */
      background-repeat: no-repeat;
      background-size: 100% 100%;
}

.Image-Type-Atom[data-content-display='5'] > div {
      /* 원본유지표시 */
      background-size: var(--originWidth) var(--originHeight);
      background-repeat: no-repeat;
}

/*===================== 여기서 부터 새로 작업한 부분 =====================*/

.dynamic-grid-block.display-flex {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
}

.dynamic-grid-block:not(.display-flex),
.dynamic-grid-block > .dynamic-grid-inner-block,
.dynamic-grid-replace-block {
      height: var(--height);
}

.dynamic-grid-replace-block.tablet,
.dynamic-grid-replace-block.phone {
      width: 100%; /* 탭에서 2칸이든 폰에서 1칸이든 어짜피 둘다 가로 100%와 같음. */
}

.dynamic-grid-block[data-col-span='1'].expand > .dynamic-grid-inner-block {
      width: 100%;
}

.dynamic-grid-block[data-col-span='2'].expand > .dynamic-grid-inner-block {
      width: 50%;
}

.dynamic-grid-block[data-col-span='3'].expand > .dynamic-grid-inner-block {
      width: 33.3%;
}

/*================= PC =================*/
@media screen and (min-width: 1024px) {
      .dynamic-grid-replace-block.tablet,
      .dynamic-grid-replace-block.phone {
            display: none;
      }

      .dynamic-grid-block[data-col-span='1'],
      .dynamic-grid-replace-block.pc[data-col-span='1'] {
            width: 33.3%;
      }

      .dynamic-grid-block[data-col-span='2'],
      .dynamic-grid-replace-block.pc[data-col-span='2'] {
            width: 66.6%;
      }

      .dynamic-grid-block[data-col-span='3'],
      .dynamic-grid-replace-block.pc[data-col-span='3'] {
            width: 99.9%;
      }

      .dynamic-grid-block[data-col-span='1']:not(.expand) > .dynamic-grid-inner-block {
            width: 99.9%;
      }

      .dynamic-grid-block[data-col-span='2']:not(.expand) > .dynamic-grid-inner-block {
            width: 50%;
      }

      .dynamic-grid-block[data-col-span='3']:not(.expand) > .dynamic-grid-inner-block {
            width: 33.3%;
      }

      /*================= 표시영역 속성(확장메뉴, 로그인) =================*/
      .dynamic-grid-block.expand .WebMenuAtom[data-vertical-gravity='middle'],
      .dynamic-grid-block.expand .WebLoginAtom[data-vertical-gravity='middle'] {
            bottom: unset !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
      }

      .dynamic-grid-block.expand[data-atom-count='1'] .WebMenuAtom[data-horizontal-gravity='left'],
      .dynamic-grid-block.expand[data-atom-count='1'] .WebLoginAtom[data-horizontal-gravity='left'] {
            right: unset !important;
            left: calc(var(--LeftMargin, 0) * 1px) !important;
      }

      .dynamic-grid-block.expand[data-atom-count='1'] .WebMenuAtom[data-horizontal-gravity='center'],
      .dynamic-grid-block.expand[data-atom-count='1'] .WebLoginAtom[data-horizontal-gravity='center'] {
            right: unset !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
      }

      .dynamic-grid-block.expand[data-atom-count='1'] .WebMenuAtom[data-horizontal-gravity='right'],
      .dynamic-grid-block.expand[data-atom-count='1'] .WebLoginAtom[data-horizontal-gravity='right'] {
            left: unset !important;
            right: calc(var(--RightMargin, 0) * 1px) !important;
      }

      /*================= 객체확대(이미지) =================*/
      /* 비율 확대 */
      /*
    .Image-Type-Atom[data-object-style="2"][data-size-style="0"] {
    */

      .dynamic-grid-block .Image-Type-Atom[data-object-style='2'] {
            width: 99vw !important;
            left: calc(-1 * var(--left)) !important;
      }

      .dynamic-grid-block .Image-Type-Atom[data-object-style='2'] > div {
            background-size: 100% !important;
            background-position-y: center;
      }

      .dynamic-grid-replace-block .Image-Type-Atom[data-object-style='2'] {
            width: 99vw !important;
            left: calc(-1 * var(--left)) !important;
      }

      .dynamic-grid-replace-block .Image-Type-Atom[data-object-style='2'] > div {
            background-size: 100% !important;
            background-position-y: center;
      }

      .WebHtmlTagAtom .dbr {
            display: table;
      }

      .only-mobile {
            display: none;
      }

      .FB-Mobile-Model,
      .FB-Mobile-Close-Btn {
            display: none;
      }

      body.center .FloatingBarAtom[data-pc-side='L'] {
            left: calc(50% - calc(var(--pcLeft) * 0.5px));
      }

      .FloatingBarAtom[data-pc-side='L'] {
            transform: translateX(-100%);
      }

      body.center .FloatingBarAtom[data-pc-side='R'] {
            left: calc(50% + calc(var(--pcLeft) * 0.5px));
      }

      .FloatingBarAtom[data-pc-tb='T'] {
            position: fixed !important;
            top: unset !important;
            top: calc(var(--top) * 1px) !important;
      }

      .FloatingBarAtom[data-pc-side='R'] {
            left: calc(var(--pcLeft) * 1px);
      }

      .WebScrollAtom .scroll_content {
            overflow-x: hidden;
      }
      .WebScrollAtom .Row {
            overflow-x: hidden;
      }

      .FloatingBarAtom {
            z-index: 9999;
      }

      .CarouselImageAtom ul {
            width: 100% !important;
      }

      .CarouselImageAtom li {
            width: 100% !important;
      }
}

/*================= TAB =================*/
@media screen and (min-width: 768px) and (max-width: 1023px) {
      .dynamic-grid-replace-block.pc[data-replace-tablet='true'],
      .dynamic-grid-replace-block.phone {
            display: none;
      }

      /*================= 1칸짜리 블럭 =================*/
      .dynamic-grid-row[data-col-count='3'] > .dynamic-grid-block[data-col-span='1'],
      .dynamic-grid-row[data-col-count='3'] > .dynamic-grid-replace-block.pc[data-col-span='1'],
      .dynamic-grid-row[data-col-count='2'] > .dynamic-grid-replace-block.pc[data-col-span='1'] {
            width: 50%;
      }

      .dynamic-grid-row[data-col-count='1'] > .dynamic-grid-block[data-col-span='1'],
      .dynamic-grid-row[data-col-count='2'] > .dynamic-grid-block[data-col-span='1'] {
            width: 100%;
      }

      .dynamic-grid-block[data-col-span='1']:not(.expand) > .dynamic-grid-inner-block {
            width: 100%;
      }

      /*================= 2칸짜리 블럭 =================*/
      .dynamic-grid-block[data-col-span='2'],
      .dynamic-grid-replace-block.pc[data-col-span='2'] {
            width: 100%;
      }

      .dynamic-grid-block[data-col-span='2']:not(.expand) > .dynamic-grid-inner-block {
            width: 50%;
      }

      /*================= 3칸짜리 블럭 =================*/
      .dynamic-grid-block[data-col-span='3'],
      .dynamic-grid-replace-block.pc[data-col-span='3'] {
            width: 100%;
      }

      .dynamic-grid-block[data-col-span='3']:not(.expand) > .dynamic-grid-inner-block {
            width: 50%;
      }

      /*================= 표시영역 속성 =================*/
      /*
    .Atom[data-vertical-gravity="top"] {
        bottom: unset !important;
        top: calc(var(--TopMargin, 0)*1px);
    }

    .Atom[data-vertical-gravity="middle"] {
        bottom: unset !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .Atom[data-vertical-gravity="bottom"] {
        top: unset !important;
        bottom: calc(var(--BottomMargin, 0)*1px);
    }

    [data-horizontal-gravity="left"] {
        right: unset !important;
        left: calc(var(--LeftMargin, 0)*1px);
    }

    [data-horizontal-gravity="center"] {
        right: unset !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    [data-horizontal-gravity="right"] {
        left: unset !important;
        right: calc(var(--RightMargin, 0)*1px);
    }
*/

      /*================= 빈셀 감춤 =================*/
      .dynamic-grid-block[data-atom-count='0'],
      .dynamic-grid-replace-block[data-atom-count='0'] {
            display: none;
      }

      /*================= 텍스트 아톰 - 글꼴크기 속성 - 장치비례(태블릿) =================*/
      .Text-Type-Atom[data-font-size-option='1'],
      .Text-Type-Atom[data-font-size-option='1'] * {
            font-size: calc(var(--FontSize) * 0.95) !important;
      }

      /*================= 객체확대(이미지) =================*/
      .dynamic-grid-replace-block .Image-Type-Atom[data-object-style='2'] {
            width: 100% !important;
            /*left: calc(-1 * var(--left)) !important;*/
      }

      .dynamic-grid-replace-block .Image-Type-Atom[data-object-style='2'] > div {
            background-position-y: center;
      }

      .WebHtmlTagAtom .tbr {
            display: table;
      }

      .only-mobile {
            display: none;
      }

      .FB-PC-Model {
            display: none;
      }

      .FloatingBarAtom[data-mobile-side='L'] {
            left: 0px;
      }

      .FloatingBarAtom[data-mobile-side='R'] {
            right: 0px;
      }

      .FloatingBarAtom {
            position: fixed !important;
            top: unset !important;
            bottom: calc(var(--bottom) * 1px) !important;
      }

      .dynamic-grid-replace-block,
      .dynamic-grid-block {
            order: var(--orderIndex);
      }

      .dynamic-grid-block.only-text {
            display: flex;
            flex-direction: column;
      }

      .dynamic-grid-block.only-text > .Atom {
            position: relative;
            margin-top: 10px;
            width: 90%;
      }
      .WebScrollAtom .scroll_content {
            overflow-x: scroll;
      }
      .WebScrollAtom .Row {
            overflow-x: visible;
      }

      .CarouselImageAtom ul {
            width: 100% !important;
      }

      .CarouselImageAtom li {
            width: 100% !important;
      }
}

/*================= PHONE =================*/
@media screen and (max-width: 767px) {
      .dynamic-grid-replace-block.pc[data-replace-phone='true'],
      .dynamic-grid-replace-block.tablet {
            display: none;
      }

      .dynamic-grid-block,
      .dynamic-grid-replace-block,
      .dynamic-grid-block:not(.expand) > .dynamic-grid-inner-block {
            width: 100%;
      }

      /*================= 표시영역 속성 =================*/
      .Atom[data-vertical-gravity='top'] {
            bottom: unset !important;
            top: calc(var(--TopMargin, 0) * 1px);
      }

      .Atom[data-vertical-gravity='middle'] {
            bottom: unset !important;
            top: 50% !important;
            transform: translateY(-50%);
      }

      .Atom[data-vertical-gravity='bottom'] {
            top: unset !important;
            bottom: calc(var(--BottomMargin, 0) * 1px);
      }

      [data-horizontal-gravity='left'] {
            right: unset !important;
            left: calc(var(--LeftMargin, 0) * 1px);
      }

      [data-horizontal-gravity='center'] {
            right: unset !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
      }

      [data-horizontal-gravity='right'] {
            left: unset !important;
            right: calc(var(--RightMargin, 0) * 1px);
      }

      /*================= 빈셀 감춤 =================*/
      .dynamic-grid-block[data-atom-count='0'],
      .dynamic-grid-replace-block[data-atom-count='0'] {
            display: none;
      }

      /*================= 텍스트 아톰 - 글꼴크기 속성 - 장치비례(폰) =================*/
      .Text-Type-Atom[data-font-size-option='1'],
      .Text-Type-Atom[data-font-size-option='1'] * {
            font-size: calc(var(--FontSize) * 0.75) !important;
      }

      /*================= 객체확대(이미지) =================*/
      .dynamic-grid-replace-block .Image-Type-Atom[data-object-style='2'] {
            width: 100% !important;
            /*left: calc(-1 * var(--left)) !important;*/
      }

      .dynamic-grid-replace-block .Image-Type-Atom[data-object-style='2'] > div {
            /*background-size: 100% 100% !important;*/
            background-position-y: center;
      }

      .WebHtmlTagAtom .mbr {
            display: table;
      }

      .FB-PC-Model {
            display: none;
      }

      .FloatingBarAtom[data-mobile-side='L'] {
            left: 0px;
      }

      .FloatingBarAtom[data-mobile-side='R'] {
            right: 0px;
      }

      .FloatingBarAtom {
            position: fixed !important;
            top: unset !important;
            bottom: calc(var(--bottom) * 1px) !important;
            z-index: 9999;
      }

      .FloatingBarAtom[data-mobile-tb='T'] {
            position: fixed !important;
            top: unset !important;
            top: calc(var(--bottom) * 1px) !important;
      }

      .dynamic-grid-replace-block,
      .dynamic-grid-block {
            order: var(--orderIndex);
      }

      .dynamic-grid-block.only-text {
            display: flex;
            flex-direction: column;
      }

      .dynamic-grid-block.only-text > .Atom {
            position: relative;
            margin-top: 10px;
            width: 90%;
      }

      .WebScrollAtom .scroll_content {
            overflow-x: scroll;
      }
      .WebScrollAtom .Row {
            overflow-x: visible;
      }
}

/*================= 텍스트 아톰 - 글꼴크기 속성 - 영역맞춤 =================*/
.dynamic-grid-replace-block.phone .ButtonAtom[data-font-type='ratio'] {
      font-size: calc(var(--width-ratio) * var(--FontSize)) !important;
}

.Text-Type-Atom[data-font-size-option='2'] * {
      font-size: calc(var(--width-ratio) * var(--FontSize)) !important;
}

.WebHtmlTagAtom[data-font-size-option='2'] > .wrapper {
      padding: calc(var(--width-ratio) * var(--paddingTop)) calc(var(--width-ratio) * var(--paddingLeft)) !important;
}

/*================= 스크롤은 높이 고정 x =================*/
/*2023.07.19 김현준 웹스크롤은 핸드폰, 탭화면에서도 높이 고정 안하고 가변적이게... 문제될시 삭제 후 다른 로직 으로 대체 */
.dynamic-grid-block .WebScrollAtom,
.dynamic-grid-replace-block.pc .WebScrollAtom,
.dynamic-grid-replace-block.phone .WebScrollAtom,
.dynamic-grid-replace-block.tablet .WebScrollAtom {
      height: unset !important;
}
/*================= 스크롤Row는 넓이 고정 x ==================*/
.dynamic-grid-block .WebScrollAtom .Row,
.dynamic-grid-replace-block .WebScrollAtom .Row {
      width: 100% !important;
}

/*
.Hamburger-Button[data-menu-active="false"]
{
	background-image: var(--bgUrl1);
}

.Hamburger-Button:not([data-menu-active="false"] )
{
	background-image: var(--bgUrl2);
}
*/

.Hamburger-Button {
      background-image: url(/sys/img/menu/Hamburger.gif);
      background-size: 100% 100%;
      width: 65px;
      height: 65px;
      z-index: 3;
      position: absolute;
}

.__WEBBOARD_HEADER_NBODY_ {
      width: unset !important;
}

.StraightLineAtom[data-direction='H'] {
      height: 0px !important;
}

.StraightLineAtom[data-direction='V'] {
      width: 0px !important;
}

.FloatingBarAtom iframe {
      border: none;
}

.FB-Mobile-Close-Btn {
      width: 16px;
      height: 16px;
      position: absolute;
      right: 0px;
      top: 0px;
      background-image: url('/sys/img/close_icon.png');
}

/*================= 뷰 아톰 =================*/
@media (max-width: 768px) {
      .ScrollViewAtom::-webkit-scrollbar {
            display: none;
      }
      .ScrollViewAtom {
            -ms-overflow-style: none;
            scrollbar-width: none;
      }
}