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

#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-side="R"]
    {
        left: calc(var(--pcLeft) * 1px);
    }
}

/*================= 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-size: 100% 100% !important;*/ /* 2022.09.23.정희찬 마켓 때문에 지움. 왜 이거 설정했는지 기억 안나서 혹시 문제 생기면 되돌리기. https://smartmaker.market/SMmarket/A00Introduction.html */ 
        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%;
    }
}

/*================= 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;
    }

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

/*================= 텍스트 아톰 - 글꼴크기 속성 - 영역맞춤 =================*/
.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');
}