body {
    padding: 0px;
    margin: 0px;
    /*background-color:#000;*/
    background-color:rgb(233,231,216);
}

body.mobile {    
    /*position: absolute;*/    
}

/* 모바일 터치 하이라이트 제거 */
* {
    -webkit-tap-highlight-color: transparent;
}
/* 포커스 시 배경 제거 */
.no-highlight:focus {
    outline: none;
}

.main-root {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    display: flex;
    justify-content: center;
}

.fdbc-contents {    
    position: absolute;
    background-repeat: no-repeat;
    background-position: 0% 0%;
    background-size: 100%;
    /*background-image: url('/Images/bg/fdbc-p1-main2.jpg');*/
    /*background-image: url('/Images/bg/fdbc-p1-main2.jpg');*/
}
.fdbc-contents.active {
    z-index:5;
}

.fdbc-contents.main-page {
    background-image: url('/Images/bg/fdbc-p1-main2.jpg');
}

.fdbc-contents.sub-page.pg2 {
    background-image: url('/Images/bg/fdbc-p2-subp2.jpg');
}

.fdbc-contents.sub-page.pg3 {
    background-image: url('/Images/bg/fdbc-p3-subp2.jpg');
}

.fdbc-contents.sub-page.pg4 {
    background-image: url('/Images/bg/fdbc-p4-subp2.jpg');
}

.fdbc-contents.sub-page.pg.byregion {
    background-image: url('/Images/bg/fdbc-p-byregion2-fp.jpg');
}
.fdbc-contents.sub-page.pg.byitem {
    background-image: url('/Images/bg/fdbc-p-byitem2-fp.jpg');
}

/*.fdbc-contents.sub-page.pg.byregion-details {
    background-image: url('/Images/bg/fdbc-p-byregion-fp-details1.jpg');
}*/

.fdbc-contents.disabled {
    display: none;
}

.fdbc-bg-ctn {
    width: 100%;
    height: 100%;
    text-align: center;
    position: absolute;
}
.fdbc-bg-ctn.disabled {
    visibility:hidden;
}
.main-root img.fdbc-bg {
    /*position: absolute;*/
    height: 100%;
    width: auto;
}

.fdbc-contents .fdbc-cms {
    width: 2.8%;
    height: 2.8%;
    position: absolute;
    left: auto;
    right: 3.4%;
    top: 1%;
    background-position: 100% 0%;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../Images/icon/fdbc-cms.svg);
    z-index: 1;
    opacity: 0.9;
    cursor: pointer;
}

.main-root .label-button,
.fdbc-contents .label-button {
    position: absolute;
    width: 20.3%;
    height: 6%;
    /*background-color: rgba(63, 137, 241, 0.2);*/
    z-index: 1;
    cursor: pointer;
}

.fdbc-contents .btn-p1-forest {
    width: 8%;
    height: 4%;
    top: 6.2%;
    right: 19%;
    left: auto;
    bottom: auto;
}
.fdbc-contents .btn-p1-kofpi {
    width: 8.6%;
    height: 4%;
    top: 6.2%;
    right: 8.6%;
    left: auto;
    bottom: auto;
}

.fdbc-contents .btn-p1-soopfood {
    width: 15%;
    height: 3.5%;
    top: 12.6%;
    right: 9.0%;
    left: auto;
    bottom: auto;
}

.fdbc-contents .btn-p1-byregion {
    width: 10%;
    height: 4.5%;
    left: 9.2%;
    bottom: 13.8%;
    top: auto;
}
.fdbc-contents .btn-p1-byitem {
    width: 10%;
    height: 4.5%;
    left: 19.5%;
    bottom: 13.8%;
    top: auto;
}

/*.main-root .btn-p2-regionforestp {
    width: 6.3%;
    height: 4%;
    left: 23.3%;
    bottom: 14.6%;
    top: auto;
}*/
/*.main-root .btn-p2-itemforestp {
    width: 6.3%;
    height: 4%;
    left: 33.6%;
    bottom: 14.6%;
    top: auto;
}*/

.fdbc-contents .btn-p1-view {
    left: 9.2%;
    bottom: 6.7%;
    top: auto;
}
.fdbc-contents .btn-p1-brandstep {
    left: 29.6%;
    bottom: 6.7%;
    top: auto;
}
.fdbc-contents .btn-p1-efficacy {
    left: 50%;
    bottom: 6.7%;
    top: auto;
}
.fdbc-contents .btn-p1-viewall {
    left: 70.5%;
    bottom: 6.7%;
    top: auto;
}


.div-introduction {
    height: 51.5%;
    width: 100%;
    position: absolute;
    top: 24.5%;
    background-color: rgba(0, 0, 0, 0);
}

.marquee-viewport {
    /*width: 50%;*/
    height:100%;
    
    display:flex;
    align-items:center;
    justify-content:center;
    
    /*padding:6%;
    padding-top: 7.4%;*/    

    font-size: 250%;
    line-height: 210%;
    font-weight: 100;
    
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    background: rgba(0,0,0,0);
    
    box-sizing: border-box;
    font-family: "Noto Sans KR", sans-serif;
    color: #fff;
}

.marquee-viewport .ic-soopfood {
    /*position: absolute;*/
    /*top: -15.2%;*/
    /*top:0%;
    left: 0%;*/
    display:inline-block;
    width: 280px;
    height: 180px;
    background-color: rgba(0, 0, 0, 0);
    background-repeat:no-repeat;
    background-position:50% 50%;
    background-size:100%;
    background-image:url('../Images/icon/icon-soopfood.png');
}

.marquee-text {
    position:relative;
    opacity: 0;
    transform: translateY(200%);
    animation: slideUpOnce 10s cubic-bezier(.22,.9,.12,1) forwards;
}

.ctn-text.textdata1 .cd-text {
    display:inline-block;
}

@keyframes slideUpOnce {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

/*지역별 임산물 버튼*/
.fdbc-contents .btn-p-regionforestp {
    width: 14.5%;
    height: 4.9%;
    top: 7.3%;
    bottom: auto;
    right: 21.6%;
    left: auto;
}
/*품목별 임산물 버튼*/
.fdbc-contents .btn-p-itemforestp {
    width: 14.5%;
    height: 4.9%;
    top: 7.3%;
    bottom: auto;
    right: 7.0%;
    left: auto;
}
/*브랜드 소개 오른쪽버튼*/
.fdbc-contents .btn-right-brandintro {
    width: 3.8%;
    height: 14.5%;
    top: 18.3%;
    bottom: auto;
    right: 3%;
    left: auto;
}
/*지정절차 오른쪽버튼*/
.fdbc-contents .btn-right-brandstep {
    width: 3.8%;
    height: 14.7%;
    top: 34.5%;
    bottom: auto;
    right: 3%;
    left: auto;
}
/*임산물 효능효과 오른쪽버튼*/
.fdbc-contents .btn-right-efficacy {
    width: 3.8%;
    height: 14.5%;
    top: 50.8%;
    bottom: auto;
    right: 3%;
    left: auto;
}
/*지배목록 전체보기 오른쪽버튼*/
.fdbc-contents .btn-right-viewall {
    width: 3.8%;
    height: 14.5%;
    top: 67%;
    bottom: auto;
    right: 3%;
    left: auto;
}
/*자료실 오른쪽버튼*/
.fdbc-contents .btn-right-dataroom {
    width: 3.8%;
    height: 6.4%;
    top: 83.2%;
    bottom: auto;
    right: 3%;
    left: auto;
}

.fdbc-contents.byitem .btn-right-brandintro,
.fdbc-contents.byregion .btn-right-brandintro,
.fdbc-contents.viewall .btn-right-brandintro {
    top: 18%;
}
.fdbc-contents.byitem .btn-right-brandstep,
.fdbc-contents.byregion .btn-right-brandstep,
.fdbc-contents.viewall .btn-right-brandstep {
    top: 34.3%;
}
.fdbc-contents.byitem .btn-right-efficacy,
.fdbc-contents.byregion .btn-right-efficacy,
.fdbc-contents.viewall .btn-right-efficacy {
    top: 50.7%;
}
.fdbc-contents.byitem .btn-right-viewall,
.fdbc-contents.byregion .btn-right-viewall,
.fdbc-contents.viewall .btn-right-viewall {
    top: 66.7%;
}
.fdbc-contents.byitem .btn-right-dataroom,
.fdbc-contents.byregion .btn-right-dataroom,
.fdbc-contents.viewall .btn-right-dataroom {
    top: 82.9%;
}

/*신청요건*/
.fdbc-contents.pg2 .btn-p2-it2,
.fdbc-contents.pg2 .btn-p2-it3,
.fdbc-contents.pg2 .btn-p2-it4,
.fdbc-contents.pg2 .btn-p2-it5,
.fdbc-contents.pg2 .btn-p2-it6,
.fdbc-contents.pg2 .btn-p2-it7,
.fdbc-contents.pg2 .btn-p2-it9,
.fdbc-contents.pg2 .btn-p2-it10 {
    width: 5.7%;
    height: 9.2%;
    top: 28.3%;
    left: 26.5%;
}
.fdbc-contents.pg2 .btn-p2-it3 {
    left: 42.2%;
}
.fdbc-contents.pg2 .btn-p2-it3 .i-child {
    display: inline-block;
    width: 100%;
    height: 100%;
}

.fdbc-contents.pg2 .btn-p2-it4 {    
    left: 58%;
}
.fdbc-contents.pg2 .btn-p2-it5 {
    left: 73.8%;
}
.fdbc-contents.pg2 .btn-p2-it6 {
    left: 73.8%;
    top: 60%;
}
.fdbc-contents.pg2 .btn-p2-it7 {
    left: 58%;
    top: 60%;
}
.fdbc-contents.pg2 .btn-p2-it9 {
    top: 60%;
}
.fdbc-contents.pg2 .btn-p2-it10 {
    left: 10.8%;
    top: 60%;
}

.fdbc-contents.pg2 .cover-p2-popbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 0%;
    background-color: rgba(0, 0, 0, 0.1);
    z-index:100;
}

.fdbc-contents.pg2 .popbox {
    position:relative;
    width: 80%;
    height: 80%;
    display: inline-block;
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: top;
    background-size:contain;
}

.fdbc-contents.pg2 .popbox.it02 {    
    background-image:url("../Images/ux/p2_it02.svg");
}
.fdbc-contents.pg2 .popbox.it04 {
    width: 50%;
    background-image:url("../Images/ux/p2_it04.svg");
}
.fdbc-contents.pg2 .popbox.it05 {
    width: 54%;
    background-image:url("../Images/ux/p2_it05.svg");
}
.fdbc-contents.pg2 .popbox.it06 {
    width: 56%;
    background-image:url("../Images/ux/p2_it06.svg");
}
.fdbc-contents.pg2 .popbox.it07 {
    width: 43%;
    background-image:url("../Images/ux/p2_it07.svg");
}
.fdbc-contents.pg2 .popbox.it09 {
    width: 56%;
    background-image:url("../Images/ux/p2_it09.svg");
}
.fdbc-contents.pg2 .popbox.it10 {
    width: 42%;
    background-image:url("../Images/ux/p2_it10.svg");
}

.fdbc-contents.pg2 .popbox .btn-close {
    position:absolute;
    top: 4%;
    right: 3%;
    width: 4.2%;
    height: 5.3%;
    cursor: pointer;
    background-color:rgba(255, 106, 0, 0);
}
.fdbc-contents.pg2 .popbox.it04 .btn-close {
    top: 5.3%;
    right: 6%;
}
.fdbc-contents.pg2 .popbox.it05 .btn-close {
    right: 5.2%;
}
.fdbc-contents.pg2 .popbox.it06 .btn-close {
    right: 8%;
}
.fdbc-contents.pg2 .popbox.it07 .btn-close {
    top: 5.3%;
    right: 8%;
    width: 5%;
}
.fdbc-contents.pg2 .popbox.it09 .btn-close {
    right: 6.9%;
}
.fdbc-contents.pg2 .popbox.it10 .btn-close {
    top: 3.6%;
    right: 5.7%;
    width: 5%;
}

/*서식받기 버튼*/
.fdbc-contents .btn-p2-docdownload {
    width: 7.7%;
    height: 3.2%;
    top: 46.3%;
    bottom: auto;
    right: auto;
    left: 30.3%;
}
/*다운로드 버튼*/
.fdbc-contents .btn-p3-download {
    width: 8%;
    height: 3.2%;
    top: auto;
    bottom: 12%;
    right: 18%;
    left: 24.4%;
    display:none;
}

.fdbc-contents .label-button.disabled {
    display: none;
}

.fdbc-contents .btn-p2-docdownload-close {
    width:8%;
    height:8%;    
}

.fdbc-contents.sub-page.step .popupbox-root {
    position: absolute;
    top: 17.4%;
    right: 9.6%;
    width: 60%;
    height: 59%;
    background-color: rgba(0, 0, 0, 0);
}
.fdbc-contents.sub-page.step .popupbox-ctn {
    width: 100%;
    height: 100%;
    position: relative;
}
.fdbc-contents.sub-page.step .popupbox-ctn .btn-close {
    position: absolute;
    width: 6.4%;
    height: 7.4%;
    position: absolute;
    top: 0%;
    right: 0%;
}

.fdbc-contents .lstp4-btn {
    position: absolute;
    top: 0%;
    left: 17.9%;
    width: 12.5%;
    height: 5.2%;
}
.fdbc-contents .byitem.lstp4-btn {
    position: absolute;
    width: 12.5%;
    height: 5.2%;
    left: 17.9%;
}

.btn-p4-lst1.byregion.lstp4-btn {    
    top: 22.1%;
}
.btn-p4-lst2.byregion.lstp4-btn {    
    top: 29%;
}
.btn-p4-lst3.byregion.lstp4-btn {
    top: 35.8%;
}
.btn-p4-lst4.byregion.lstp4-btn {
    top: 42.8%;
}
.btn-p4-lst5.byregion.lstp4-btn {
    top: 49.6%;
}
.btn-p4-lst6.byregion.lstp4-btn {
    top: 56.5%;
}
.btn-p4-lst7.byregion.lstp4-btn {
    top: 63.3%;
}
.btn-p4-lst8.byregion.lstp4-btn {
    top: 70.2%;
}
.btn-p4-lst9.byregion.lstp4-btn {
    top: 77%;
}

.btn-p4-lst-it1.byitem.lstp4-btn {
    top: 29.7%;
}
.btn-p4-lst-it2.byitem.lstp4-btn {
    top: 36.7%;
}
.btn-p4-lst-it3.byitem.lstp4-btn {
    top: 43.7%;
}
.btn-p4-lst-it4.byitem.lstp4-btn {
    top: 50.7%;
}
.btn-p4-lst-it5.byitem.lstp4-btn {
    top: 57.7%;
}
.btn-p4-lst-it6.byitem.lstp4-btn {
    top: 64.7%;
}
.btn-p4-lst-it7.byitem.lstp4-btn {
    top: 71.7%;
}

/*지역별 임산물 재배 리스트 버튼*/
.pg4 .btn-p4-byregion-list {
    width: 10.2%;
    height: 5.3%;
    top: 22.1%;
    left: 5.6%;
}
/*품목별 임산물 재배 리스트 버튼*/
.pg4 .btn-p4-byitem-list {
    width: 10.2%;
    height: 5.3%;
    top: 29.7%;
    left: 5.6%;
}

.fdbc-contents .layout-lst-ctn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 57.6%;
    height: 68.5%;
    right: 9.4%;
    left: auto;
    top: 20%;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('../Images/bg/fdbc-normal.jpg');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    opacity: 0.6;
}
.layout-lst-ctn .ctn-lst-data {
    width: 80%;
}
.layout-lst-ctn .ctn-lst-data img{
    width: 100%;
    height: auto;
}

.layout-lst-ctn .ctn-lst-data .message {
    font-size:320%;
    color:#a0a0a0;
    text-align:center;
}

.fdbc-contents.byregion .ctn-map {
    position: absolute;
    top: 32.8%;
    left: 0.7%;
    width: 28.5%;
    /*background-color:rgba(128, 128, 128,0.3);*/
}

.ctn-map svg .byregion {
    cursor:pointer;
}

.fdbc-contents.byregion .btn-region {
    position: absolute;
    top: 0%;
    left: 18.4%;
    width: 5%;
    height: 2.8%;
}
.byregion .btn-region.lst1 {
    top: 49.8%;
    left: 9%;
}
.byregion .btn-region.lst2 {
    top: 42.8%;
    left: 14.3%;
}
.byregion .btn-region.lst3 {
    top: 54.7%;
    left: 11.6%;
}
.byregion .btn-region.lst4 {
    top: 59.5%;
    left: 6%;
}
.byregion .btn-region.lst5 {
    top: 69.7%;
    left: 7.8%;
}
.byregion .btn-region.lst6 {
    top: 79.3%;
    left: 5.8%;
}
.byregion .btn-region.lst7 {
    top: 62%;
    left: 18.2%;
}
.byregion .btn-region.lst8 {
    top: 73.1%;
    left: 15.9%;
}
.byregion .btn-region.lst9 {
    top: 86.2%;
    left: 23%;
}

.fdbc-contents.byitem .btn-item {
    position: absolute;
    top: 0%;
    left: 3.3%;
    width: 23.7%;
    height: 8%;
}
.byitem .btn-item.its1 {
    top: 27.9%;
}
.byitem .btn-item.its2 {
    top: 37.2%;
}
.byitem .btn-item.its3 {
    top: 46.3%;
}
.byitem .btn-item.its4 {
    top: 55.5%;
}
.byitem .btn-item.its5 {
    top: 64.7%;
}
.byitem .btn-item.its6 {
    top: 73.9%;
}
.byitem .btn-item.its7 {
    top: 83%;
}

.fdbc-contents.byitem .frame-byitem-ctn,
.fdbc-contents.byregion .frame-byregion-ctn {
    width: 63.5%;
    height: 73.8%;
    position: absolute;
    top: 17.5%;
    right: 6.8%;
    background-color: rgba(255,255,255,0);
    /*background-image: url(../ux_page/images/pattern-1.png);*/
}
.fdbc-contents.byregion .frame-byregion-ctn.active {
    background-image: url(../ux_page/images/pattern-1.png);
}

.frame-byitem-ctn iframe,
.frame-byregion-ctn iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.fdbc-contents.byitem .its-data {
    position: relative;
    display: inline-flex;
    width: 33.3%;
    height: 33%;
    padding: 10px;
    border: 0px solid #555;
    box-sizing: border-box;
}
.fdbc-contents.byitem .its-data .thumb {
    width:100%;
    height:100%;
    position: relative;
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
}

.its-data .thumb .f-name {
    position: absolute;
    left: 5%;
    bottom: 5%;
    font-size: 350%;
    font-weight: 600;
    color: #fff;
}

.fdbc-contents.byitem .its-data.active {
    z-index: 2;
}

/*.fdbc-contents.byitem .its-data.r1c1 {
    top: 20%;
    left: 34.7%;
}
.fdbc-contents.byitem .its-data.r1c2 {
    top: 20%;
    left: 49.2%;
}
.fdbc-contents.byitem .its-data.r1c3 {
    top: 20%;
    left: 63.7%;
}
.fdbc-contents.byitem .its-data.r1c4 {
    top: 20%;
    left: 78.2%;
}*/

/*.fdbc-contents.byitem .its-data.r2c1 {
    top: 37.5%;
    left: 34.7%;
}
.fdbc-contents.byitem .its-data.r2c2 {
    top: 37.5%;
    left: 49.2%;
}
.fdbc-contents.byitem .its-data.r2c3 {
    top: 37.5%;
    left: 63.7%;
}
.fdbc-contents.byitem .its-data.r2c4 {
    top: 37.5%;
    left: 78.2%;
}*/

/*.fdbc-contents.byitem .its-data.r3c1 {
    top: 55%;
    left: 34.7%;
}
.fdbc-contents.byitem .its-data.r3c2 {
    top: 55%;
    left: 49.2%;
}
.fdbc-contents.byitem .its-data.r3c3 {
    top: 55%;
    left: 63.7%;
}
.fdbc-contents.byitem .its-data.r3c4 {
    top: 55%;
    left: 78.2%;
}*/

/*.fdbc-contents.byitem .its-data.r4c1 {
    top: 72.5%;
    left: 34.7%;
}
.fdbc-contents.byitem .its-data.r4c2 {
    top: 72.5%;
    left: 49.2%;
}*/

.fdbc-contents.byitem .its-data .megbox {
    position:absolute;
    width:704px;
    height:442px;
    display:inline-block;
    margin-top: -20%;
    margin-left: -20%;
    background-repeat:no-repeat;
    background-position:0% 0%;
    background-size:100%;
    background-image:url('../Images/ux/byitem_megbox2.png');
}

/*.its-data .megbox .title {
    position: absolute;
    width: 76%;
    height: 17%;
    top: 12%;
    left: 11.2%;
    border-radius: 0%;
    background-color: rgb(99, 81, 66);
    display: inline-flex;
    align-items: center;
    font-size: 240%;
    color: #fff;
    font-weight: 700;
}*/

.its-data .megbox .title {
    font-size: 240%;
    color: #fff;
    font-weight: 700;
    padding: 0% 9%;
    padding-top: 9%;
}

.its-data .megbox .efficacy {
    height: 40%;
    font-size: 180%;
    color: #fff;
    word-break:keep-all;
    padding: 0% 9%;
    padding-top: 2%;
    background-color: rgba(0, 0, 0, 0);
}

..fdbc-contents.byregion-details.active {
    z-index:5;
}
.fdbc-contents.byregion-details .btn-close {
    top: 0%;
    right: 0%;
    height: 7%;
    width: 5%;
}

.fdbc-contents.byregion-details .ctn-board-pannel {
    position: absolute;
    top: 19.7%;
    right: 6.1%;
    width: 44.5%;
    height: 62.0%;
    background-color: rgba(63, 137, 241, 0.2);
    z-index: 1;
}
.fdbc-contents.byregion-details .ctn-board-pannel .board-pannel {
    width: 100%;
    height: 76%;
    background-color: rgba(255, 255, 255, 1);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
}
.fdbc-contents.byregion-details .ctn-board-pannel .pannel-items {
    width: 100%;
    height: 24%;
    display: flex;    
    background-color: rgba(255,255,255,1);
    padding-top: 2.8%;
    box-sizing: border-box;
}
.pannel-items .data-item {
    width: 25%;
    height: 100%;
    padding-right: 7px;
    border: 0px solid #333;
    box-sizing: border-box;
}
.pannel-items .data-item.act {
    cursor: pointer;
}
.pannel-items .data-item.dt4 {
    padding-right: 0px;
}

.pannel-items.dlength5 .data-item {
    width: 20%;
}
.pannel-items.dlength5 .data-item.dt4 {
    padding-right: 7px;
}
.pannel-items.dlength5 .data-item.dt5 {
    padding-right: 0px;
}

.pannel-items .data-item .d-item {
    width: 100%;
    height: 100%;
    display: inline-grid;
    /*background-color: #ee5b1a;*/
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;    
}

.fdbc-contents.byregion-details .ctn-boutton-list {
    width: 33%;
    height: 6.2%;
    position: absolute;
    left: 16.2%;
    bottom: 9.9%;
    /*background-color: rgba(63, 137, 241, 0.2);*/
}
.fdbc-contents.byregion-details .ctn-boutton-list .button-list {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
}
.ctn-boutton-list .button {
    width: 11.8%;
    height: 100%;
    margin-right: 4.8%;
    /*background-color: rgba(235, 64, 25, 0.5);*/
    cursor: pointer;
}
.ctn-boutton-list .button.instagram {
    margin-right: 4%;
}
.ctn-boutton-list .button .phone {
    width:100%;
    height:100%;
    display: inline-block;
}
.ctn-boutton-list .button.disabled {
    display: none;
}

.root-datalist {
    width: 63.4%;
    height: 73.5%;
    position: absolute;
    top: 17.7%;
    right: 6.84%;
    box-sizing: border-box;
    background-color: rgba(255,255,255,1);
    background-image: url('../ux_page/images/pattern-1.png');
}    
.root-table {
    width: 56.4%;
    height: 68%;
    position: absolute;
    top: 20.5%;
    right: 10%;    
    padding-top: 5%;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0);
}

.root-datalist .ctn-datalist,
.root-table .ctn-table {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;    
    box-sizing: border-box;
}
.root-table .ctn-table {
    border-top: 1px solid #c0c0c0;
    background-color: #fff;
}

.root-datalist .ctn-datalist {
    padding: 6%;
}
.root-datalist .ctn-datalist.co-info {
    padding: 2%;
}

.root-datalist .ctn-datalist.co-info .ctn-board {
    width:33.3%;
    height:33%;
    display:inline-table;
    padding:0.6%;
    border:0px solid #888;
    box-sizing:border-box;
}

.ctn-board .region {
    height: 22%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 120%;
    background-repeat:no-repeat;
    background-position: 50%;
}
.ctn-board .region .logo {
    display:inline-block;
    height: 75%;
    width: 100%;
    box-sizing: border-box;
    background-repeat:no-repeat;
    background-position: 50%;
    background-size: contain;
    /*background-color:antiquewhite;*/
}

.ctn-board .region .i-logo {
    height: 75%;
    width: auto;
}

.ctn-board .board {
    height: 78%;
    position: relative;
    padding: 15px;
    box-sizing: border-box;
    background-size: contain;
    background-image: url('../ux_page/images/pattern-bd1.jpg');
    border: 1px solid #c0c0c0;
    font-size: 200%;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}
.ctn-board .board .co-name {
    font-size: 140%;
    font-weight: 700;
    letter-spacing: -5px;
    margin-bottom:10px;
}
.ctn-board .board .president {
    font-size: 110%;
    letter-spacing: -2px;
    /*padding-right: 20%;*/
    box-sizing:border-box;
}
.ctn-board .board .f-items {
    font-size: 110%;
    letter-spacing: -2px;
    /*padding-right: 36%;*/
    box-sizing:border-box;
    word-break:keep-all;
    line-height: 1.2;
}

.ctn-board .board .ctn-mark {
    width: 100%;
    height: 32%;
    display: flex;
    align-items:center;
    justify-content:flex-end;
    position:absolute;
    left: 0%;
    bottom: 0%;
    padding: 2.3%;
    box-sizing: border-box;
    /*background-color:rgba(0,0,0,0.2);*/
}
.ctn-mark .i-cet {
    height: 96%;
    width: auto;
    margin: 0px 8px;
}

.root-datalist .ctn-datalist.loader,
.root-table .ctn-table.loader {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 4%;
    background-image: url('../Images/loder/loading_2.gif');
}

.root-datalist .ctn-title {
    width: 17%;
    height: 5%;
    display: inline-flex;
    align-items: center;    
    position: absolute;
    top: -5%;
    left: 2%;
    font-size: 200%;
    color: #fff;
    background-color: rgb(146, 117, 73);
    padding: 0px 20px;
    border-radius: 10px;
}
.root-datalist .ctn-title.item {
    justify-content: center;
    background-color: rgb(76, 126, 69);
} 
.root-datalist .ctn-title .title .byitem {
    color: rgba(255,255,255,0.5);
    margin-right: 10px;
}

.root-table .ctn-title {
    width: 100%;
    position: absolute;
    top:0%;    
    font-size: 360%;
    font-weight: 600;
    color: #505050;
    padding: 15px;
}

.root-table table {
    width: 100%;
    border-collapse: collapse;
    /*background-color: #fff;*/
    font-size: 180%;
    border-top: 2px solid #8fae96; /* 상단 진한 초록색 라인 */
    border-bottom: 5px solid #8fae96; /* 하단 진한 초록색 라인 */
}
.root-table table td {
    border: 1px solid #e0e0e0;       /* 연한 회색 구분선 */
    padding: 12px 8px;
    text-align: center;
    vertical-align: middle;
    color: #333;
    line-height: 1.4;
}

.root-table.region table tr.tr-group1 td:nth-child(1) {
    /*첫번째 td*/
    width: 9%;
}
.root-table.region table tr.tr-group1 td:nth-child(2) {
    /*두번째 td*/
    width: 30%;
}
.root-table.region table tr.tr-group1 td:nth-child(3) {
    /*세번째 td*/
    width: 9%;
}

.root-table table .tr-group1 td {
    background-color: #8fae96;
    color: #fff;
}

/* 지역명 컬럼 스타일 (1열) */
.root-table .region-cell {
    font-weight: bold;
    color: #ff6b6b; /* 이미지의 붉은색 */
    /*font-size: 16px;*/
    background-color: #fff;
    width: 100px;
}

/* 상품명 컬럼 스타일 (마지막 열) - 텍스트가 길 경우를 대비 */
.root-table .item-cell {
    text-align: center; /* 이미지상 가운데 정렬 */
    word-break: keep-all; /* 단어 단위 줄바꿈 */
}