@media only screen and (min-width: 0) {
    div.contentTempContents_odd div.content {
        width           : calc(100% + 10px);
        position        : relative;
        background-color: white;
        margin-left     : -5px;
    }

    div.content>div {
        width           : calc(100% - 10px);
        max-width       : calc(100% - 10px) !important;
        padding-left    : 5px;
        padding-right   : 5px;
        float           : left;
        position        : relative;
        background-color: white;
        word-break : break-all;
    }

    div.content>div[data-demo] * {
        display: none;
    }

    div.content>div[data-demo]::before {
        content          : "";
        display          : block;
        width            : 60px;
        height           : 60px;
        background-repeat: no-repeat;
        background-size  : 100% 100%;
        border           : 1px solid #AAA;
        border-radius    : 5px;
        overflow         : hidden;
    }

    div.content>div[data-demo=""]::before {
        background-image: url("/oddi_src/img/temp.png");
    }

    div.content>div[data-demo="ol"]::before {
        background-image: url("/oddi_src/icon/_template/ol.png");
    }

    div.content>div[data-demo="ul"]::before {
        background-image: url("/oddi_src/icon/_template/ul.png");
    }

    div.content>div[data-demo="file"]::before {
        background-image: url("/oddi_src/icon/_template/file.png");
    }

    div.content>div[data-demo="link"]::before {
        background-image: url("/oddi_src/icon/_template/link.png");
    }

    div.content>div[data-demo="img"]::before {
        background-image: url("/oddi_src/icon/_template/img.png");
    }

    div.content>div[data-demo="p"]::before {
        background-image: url("/oddi_src/icon/_template/paragraph.png");
    }

    div.content>div[data-demo="doc"]::before {
        background-image: url("/oddi_src/icon/_template/pdf.png");
    }

    div.content>div[data-demo="video"]::before {
        background-image: url("/oddi_src/icon/_template/video.png");
    }

    div.content>div[data-demo="video_Upload"]::before {
        background-image: url("/oddi_src/icon/_template/video_Upload.png");
    }

    div.content>div[data-demo="table"]::before {
        background-image: url("/oddi_src/icon/_template/table.png");
    }

    div.content>div[data-demo="title"]::before {
        background-image: url("/oddi_src/icon/_template/title.png");
    }

    div.content>div[data-demo="free"]::before {
        background-image: url("/oddi_src/icon/_template/free.png");
    }

    div.content>div[data-demo="hr"]::before {
        background-image: url("/oddi_src/icon/_template/hr.png");
    }

    div.content ol,
    div.content ul {
        /* padding   : reverse;
        list-style: reverse; */
        list-style-position:  inside;
    }
}

@media only screen and (min-width: 1000px){
    div.content[data-width="2"]>div {
        width       : calc(50% - 20px);
        margin-left : 5px;
        margin-right: 5px;
    }

    div.content[data-width="3"]>div {
        width       : calc(33% - 20px);
        margin-left : 5px;
        margin-right: 5px;
    }
}

@media only screen and (min-width: 0) {
    ul.warehouse_odd>li div.content>div {
        padding: 0;
        width  : auto;
    }

    div.content_banner {}

    div.content_banner ul {
        width: 100%;
    }

    div.content_banner ul li {
        width   : 100%;
        position: relative;
    }

    div.content_banner ul li:before {
        content    : "";
        padding-top: 40%;
        display    : block;
    }

    div.content_banner ul li span.backgroundImg {
        width                : 100%;
        height               : 100%;
        z-index              : -3;
        background-attachment: fixed;
        background-repeat    : no-repeat;
        background-size      : 100%;
        background-position  : top;
        background-image     : url("/oddi_src/icon/img.png");
        position             : absolute;
        top                  : 0;
        left                 : 0;
    }

    div.content_banner ul li div {
        max-width       : 45%;
        position        : absolute;
        top             : 4em;
        left            : 2em;
        background-color: rgba(255, 255, 255, .8);
        border-radius   : 3px;
        padding         : 2em;
    }

    div.content_text {}

    div.content_text img,
    div.content_text video,
    div.content_text iframe {
        max-width: 100% !important;
    }

    div.content_free {
        display: block;
        padding:16px;
        margin:16px;
    }
    
    div.content_free li > ul {
        padding:32px;
    }

    div.content_free img,
    div.content_free video,
    div.content_free iframe {
        max-width: 100% !important;
    }

    div.content_table {
        padding-bottom: .5em;
        text-align    : center;
    }

    div.content_table * {
        text-align: left !important;
    }

    div.content_table ol,div.content_table ul {
        margin-left: auto !important;
    }

    div.content_media {
        padding-bottom: .5em;
        text-align    : center;
    }

    div.content_media div.media {}

    div.content_media div.media img {
        max-width : 100%;
        max-height: 100%;
    }

    div.content_video {
        padding-bottom: .5em;
        text-align    : center;
        width         : 100%;
    }

    div.content_video div.video {
        width   : 100%;
        position: relative;
    }

    div.content_video div.video::before {
        content    : "";
        display    : block;
        padding-top: 56.25%;
    }

    div.content_video div.video iframe,
    div.content_video div.video video {
        width   : 100%;
        height  : 100%;
        position: absolute;
        top     : 0;
        left    : 0;
    }

    .paragraph_odd {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }
    .paragraph_odd a {
        word-break: break-all;
        -ms-word-break: break-all;
    }
    .paragraph_odd ul, .paragraph_odd ol {
        display: block;
        list-style-position: outside;
        margin-block-start: .25em;
        margin-block-end: .25em;
        margin-inline-start: 20px;
        margin-inline-end: 0px;
        padding-inline-start: 0px;
    }
    .paragraph_odd ul > li, .paragraph_odd ol > li {
        
        padding-left: 16px;
        word-break: break-all;
        -ms-word-break: break-all;
    }
    .paragraph_odd ol ul, .paragraph_odd ul ol{
        display: block;
        list-style-position: outside;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 8px;
        margin-inline-end: 0px;
        padding-inline-start: 16px;
        
    }
    
    div.paragraph_odd ul ul {
        padding-inline: revert;
    }

    div.paragraph_odd[data-content] a[href] {
        text-decoration: underline;
    }

    div.paragraph_odd img,
    div.paragraph_odd table {
        max-width: 100% !important;
        height   : auto !important;
    }
}