* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}
body {
    /* background-color: #5454;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: space-around;
    justify-content: center;
    flex-direction: column;
     */
}

.testWrapper {
    width: 500px;
    height: 150px;
    display: none;
}
.newContainerWrapper {
    width: 500px;
    height: 150px;
    position: relative;
    /* opacity: 0.5; */
}
.halfContainerWrapper {
    width: 250px;
    height: 150px;
    position: relative;
    /* opacity: 0.5; */
}
.newContainerWrapper .rightDoorWrapper {
    width: 20px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    /* border: 1px solid black; */
    z-index: 2;
    /* background-color: rgb(215, 64, 64); */

    border-bottom: 25px solid transparent; 
    border-right: 35px solid rgba(94, 6, 6, 0.3);
    border-top: 25px solid transparent;
    height: 150px;
    width: 0;
}
.newContainerWrapper .leftDoorWrapper {
    display: none;
    width: 20px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    /* border: 1px solid black; */
    z-index: 2;
    /* background-color: rgb(215, 64, 64); */

    border-bottom: 25px solid transparent; 
    border-left: 35px solid rgba(94, 6, 6, 0.3);
    border-top: 25px solid transparent;
    height: 150px;
    width: 0;
}
.halfContainerWrapper .rightDoorWrapper {
    width: 20px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    /* border: 1px solid black; */
    z-index: 2;
    /* background-color: rgb(215, 64, 64); */

    border-bottom: 25px solid transparent; 
    border-right: 35px solid rgba(94, 6, 6, 0.3);
    border-top: 25px solid transparent;
    height: 150px;
    width: 0;
}
.halfContainerWrapper .leftDoorWrapper {
    display: none;
    width: 20px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    /* border: 1px solid black; */
    z-index: 2;
    /* background-color: rgb(215, 64, 64); */

    border-bottom: 25px solid transparent; 
    border-left: 35px solid rgba(94, 6, 6, 0.3);
    border-top: 25px solid transparent;
    height: 150px;
    width: 0;
}
.rightDoorWrapper {
    width: 20px;
    height: 100% !important;
    position: absolute;
    right: 0;
    top: 0;
    /* border: 1px solid black; */
    z-index: 2;
    /* background-color: rgb(215, 64, 64); */

    border-bottom: 15px solid transparent; 
    border-right: 35px solid rgba(94, 6, 6, 0.3);
    border-top: 15px solid transparent;
    height: 150px;
    width: 0;
}
.leftDoorWrapper {
    display: none;
    width: 20px;
    height: 100% !important;
    position: absolute;
    left: 0;
    top: 0;
    /* border: 1px solid black; */
    z-index: 2;
    /* background-color: rgb(215, 64, 64); */

    border-bottom: 15px solid transparent; 
    border-left: 35px solid rgba(94, 6, 6, 0.3);
    border-top: 15px solid transparent;
    height: 150px;
    width: 0;
}


.cWrapper {
    /* width: 232.94px;
    height: 62.46px; */
    width: 100%;
    height: 100%;
    /* border: 1px solid black; */
    position: relative;
    /* box-shadow: 0 5px 5px -5px #333; */
}
.cWrapper.rColor {
    background: linear-gradient(to right, #e54646, #e24848);
    box-shadow: inset 0px 2px 15px -6px #333,
                inset 0px -2px 10px -10px #333;
}
.cWrapper.yColor {
    background: linear-gradient(to right, #E5B546, #E2B348);
    box-shadow: inset 0px 2px 15px -6px #333,
                inset 0px -2px 10px -10px #333;
}
.cWrapper.gColor {
    background: linear-gradient(to right, #e54646, #e24848);
    box-shadow: inset 0px 2px 15px -6px #333,
                inset 0px -2px 10px -10px #333;
    background: linear-gradient(to right, #46e546, #48e248);
}
.cWrapper .upperFrame {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 5px;
    /* border: 1px solid black; */
    /* background-color: #E1B24A; */
    z-index: 1;
}
.cWrapper2 .upperFrame {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 8%;
    background-color: orange;
    /* border: 1px solid black; */
    /* background-color: #E1B24A; */
    z-index: 1;
}
.cWrapper .upperFrame.rColor {
    border: 0.5px solid #b13c3c;
    background: linear-gradient(#e54646, #e54646);
}
.cWrapper .upperFrame.yColor {
    border: 0.5px solid #b18c3c;
    background: linear-gradient(#E5B546, #E5B546);
}
.cWrapper .upperFrame.gColor {
    border: 0.5px solid #3cb13c;
    background: linear-gradient(#46e546, #46e546);
}
.cWrapper .bottomFrame {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    /* border: 1px solid black; */
    /* background-color: #E1B24A; */
    z-index: 1;
}
.cWrapper2 .bottomFrame {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 8%;
    /* border: 1px solid black; */
    /* background-color: #E1B24A; */
    background-color: orange;
    z-index: 1;
}
.cWrapper .bottomFrame.rColor {
    border: 0.5px solid #b13c3c;
    background: linear-gradient(to top,#c74242, #e54646);
}
.cWrapper .bottomFrame.yColor {
    border: 0.5px solid #b18c3c;
    background: linear-gradient(to top,#c79d42, #E5B546);
}
.cWrapper .bottomFrame.gColor {
    border: 0.5px solid #3cb13c;
    background: linear-gradient(to top,#44c742, #46e546);
}

.cWrapper .leftFrame {
    position: absolute;
    left: 0;
    top: 5px;
    width: 5px;
    height: 85%;
    border-top: none;
    border-bottom: none;
    z-index: 1;
}
.cWrapper2 .leftFrame {
    position: absolute;
    left: 0;
    top: 7%;
    width: 2.15%;
    height: 85%;
    background-color: orange;
    border-top: none;
    border-bottom: none;
    z-index: 1;
}
.cWrapper .leftFrame.rColor {
    border: 0.5px solid #b13c3c;
    background: linear-gradient(to right,#e54646, #e54646);
}
.cWrapper .leftFrame.yColor {
    border: 0.5px solid #b18c3c;
    background: linear-gradient(to right,#E5B546, #E5B546);
}
.cWrapper .leftFrame.gColor {
    border: 0.5px solid #3cb13c;
    background: linear-gradient(to right,#46e546, #46e546);
}
.cWrapper .rightFrame {
    position: absolute;
    right: 0;
    top: 4px;
    width: 5px;
    height: 86%;
    /* border: 1px solid black; */
    /* background-color: #E1B24A; */
    border-top: none;
    border-bottom: none;
    z-index: 1;
}
.cWrapper2 .rightFrame {
    position: absolute;
    right: 0;
    top: 7%;
    width: 2.15%;
    height: 86%;
    /* border: 1px solid black; */
    /* background-color: #E1B24A; */
    background-color: orange;
    border-top: none;
    border-bottom: none;
    z-index: 1;
}

.cWrapper3 .upperFrame {height: 12px;}
.cWrapper3 .bottomFrame {height: 12px;}
.cWrapper3 .rightFrame { width: 12px; top: 11px;}
.cWrapper3 .leftFrame { width: 12px; top: 11px;}

.cWrapper .rightFrame.rColor {
    border: 0.5px solid #b13c3c;
    background: linear-gradient(to left,#e54646, #e54646);
}
.cWrapper .rightFrame.yColor {
    border: 0.5px solid #b18c3c;
    background: linear-gradient(to left,#E5B546, #E5B546);
}
.cWrapper .rightFrame.gColor {
    border: 0.5px solid #3cb13c;
    background: linear-gradient(to left,#46e546, #46e546);
}

.cWrapper .cPatternColumn {
    position: absolute;
    top: 0;
    width: 8px;
    height: 100%;
    /* border: 1px solid; */
    background-color: orange;
}
.cWrapper2 .cPatternColumn-2 {
    position: absolute;
    top: 0;
    width: 3.435%;
    height: 100%;
    /* border: 1px solid; */
    background-color: orange;
}
.cWrapper3 .cPatternColumn-3 {
    width: 6.87%;
}
.cWrapper .cPatternColumn.rColor {
    background: linear-gradient(to right, #e14a4a, #e34444);
}
.cWrapper .cPatternColumn.yColor {
    background: linear-gradient(to right, #E1B24A, #E3B244);
}
.cWrapper .cPatternColumn.gColor {
    background: linear-gradient(to right, #4ae14d, #44e344);
}

.cWrapper .cPatternColumn:before {
    content: "";
    width: 1.7px;
    height: 100%;
    /* background-color: green; */
    position: absolute;
    left: 0;
    top: 0;
}
.cWrapper .cPatternColumn.rColor:before {
    background: linear-gradient(to right, #ee6b6b, #ee6b6b);
}
.cWrapper .cPatternColumn.yColor:before {
    background: linear-gradient(to right, #EEC56B, #EEC56B);
}
.cWrapper .cPatternColumn.gColor:before {
    background: linear-gradient(to right, #74ee6b, #6bee6d);
}

.cWrapper .cPatternColumn:after {
    content: "";
    width: 1.5px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
}
.cWrapper .cPatternColumn.rColor:after {
    background: linear-gradient(to right, #cb2b2b, #cb2b2b);
}
.cWrapper .cPatternColumn.yColor:after {
    background: linear-gradient(to right, #CB952B, #CB952B);
}
.cWrapper .cPatternColumn.gColor:after {
    background: linear-gradient(to right, #2bcb33, #30cb2b);
}

.cWrapper .cPatternColumn1 {
    left: 10px;
}

.cWrapper .cPatternColumn2 {
    left: 22px;
}
.cWrapper .cPatternColumn3 {
    left: 34px;
}
.cWrapper .cPatternColumn4 {
    left: 46px;
}
.cWrapper .cPatternColumn5 {
    left: 58px;
}
.cWrapper .cPatternColumn6 {
    left: 70px;
}
.cWrapper .cPatternColumn7 {
    left: 82px;
}
.cWrapper .cPatternColumn8 {
    left: 94px;
}
.cWrapper .cPatternColumn9 {
    left: 106px;
}
.cWrapper .cPatternColumn10 {
    left: 118px;
}
.cWrapper .cPatternColumn11 {
    left: 130px;
}
.cWrapper .cPatternColumn12 {
    left: 142px;
}
.cWrapper .cPatternColumn13 {
    left: 154px;
}
.cWrapper .cPatternColumn14 {
    left: 166px;
}
.cWrapper .cPatternColumn15 {
    left: 178px;
}
.cWrapper .cPatternColumn16 {
    left: 190px;
}
.cWrapper .cPatternColumn17 {
    left: 202px;
}
.cWrapper .cPatternColumn18 {
    left: 214px;
}


/* 실적용 컨테이너 40자 */
.cWrapper2 .cPatternColumn1
{
    left: 4.2%;
}
.cWrapper2 .cPatternColumn2
{
    left: 9.4%;
}
.cWrapper2 .cPatternColumn3
{
    left: 14.6%;
}
.cWrapper2 .cPatternColumn4
{
    left: 19.8%;
}
.cWrapper2 .cPatternColumn5
{
    left: 25%;
}
.cWrapper2 .cPatternColumn6
{
    left: 30.2%;
}
.cWrapper2 .cPatternColumn7
{
    left: 35.4%;
}
.cWrapper2 .cPatternColumn8
{
    left: 40.6%;
}
.cWrapper2 .cPatternColumn9
{
    left: 45.8%;
}
.cWrapper2 .cPatternColumn10
{
    left: 51%;
}
.cWrapper2 .cPatternColumn11
{
    left: 56.2%;
}
.cWrapper2 .cPatternColumn12
{
    left: 61.4%;
}
.cWrapper2 .cPatternColumn13
{
    left: 66.6%;
}
.cWrapper2 .cPatternColumn14
{
    left: 71.8%;
}
.cWrapper2 .cPatternColumn15
{
    left: 77%;
}
.cWrapper2 .cPatternColumn16
{
    left: 82.2%;
}
.cWrapper2 .cPatternColumn17
{
    left: 87.4%;
}
.cWrapper2 .cPatternColumn18
{
    left: 92.6%;
}

/* 20자 컨테이너 */
.cWrapper3 .cPatternColumn1
{
    left: 8.4%;
}
.cWrapper3 .cPatternColumn2
{
    left: 18.8%;
}
.cWrapper3 .cPatternColumn3
{
    left: 29.2%;
}
.cWrapper3 .cPatternColumn4
{
    left: 39.6%;
}
.cWrapper3 .cPatternColumn5
{
    left: 50%;
}
.cWrapper3 .cPatternColumn6
{
    left: 60.4%;
}
.cWrapper3 .cPatternColumn7
{
    left: 70.8%;
}
.cWrapper3 .cPatternColumn8
{
    left: 81.2%;
}
.cWrapper3 .cPatternColumn9
{
    left: 91.6%;
}



/* deprecated... */
/* container door css */

.dWrapper {
    /* width: 23.29px;
    height: 62.46px; */
    width: 100%;
    height: 100%;
    /* border: 1px solid black; */
    position: relative;
    /* box-shadow: 1px 2px 2px 1px #fff; */
    /* margin-right: 100px; */
}
.dWrapper2 {}

.dWrapper .upperFrame {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 5px;
    /* border: 1px solid black; */
    background-color: #9B9C95;
    background: linear-gradient(to right, #e54646, #e24848);
    border: 0.5px solid #b13c3c;
    z-index: 1;
}
.dWrapper.dWrapper2 .upperFrame {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 8%;
    /* border: 1px solid black; */
    background-color: #9B9C95;
    /* background: linear-gradient(to right, #e54646, #e24848); */
    border: 0.5px solid #b13c3c;
    z-index: 1;
}
.dWrapper .bottomFrame {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    /* border: 1px solid black; */
    background-color: #9B9C95;
    background: linear-gradient(to top,#c74242, #e54646);
    border: 0.5px solid #b13c3c;
    z-index: 1;
}
.dWrapper.dWrapper2 .bottomFrame {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 8%;
    /* border: 1px solid black; */
    background-color: #9B9C95;
    background: linear-gradient(to top,#c74242, #e54646);
    border: 0.5px solid #b13c3c;
    z-index: 1;
}
.dWrapper .doorElWrapper {
    width: 100%;
    height: 100%;
    display: flex;
}
.dWrapper .leftElDoor {
    /* position: absolute; */
    /* left: 0; */
    /* bottom: 0; */
    width: 30%;
    height: 100%;
    /* border: 1px solid black; */
    background-color: #D3D5D4;
    background: linear-gradient(to right, #ea4444, #EE6B6B);
}
.dWrapper.dWrapper2 .leftElDoor {
    /* position: absolute; */
    /* left: 0; */
    /* bottom: 0; */
    width: 30%;
    height: 100%;
    /* border: 1px solid black; */
    background-color: #D3D5D4;
    background: linear-gradient(to right, #ea4444, #EE6B6B);
}
.dWrapper .rightElDoor {
    width: 20%;
    height: 100%;
    /* border: 1px solid black; */
    background-color: #939795;
    background: linear-gradient(to right, #ca3f3f, #ad3838);
    
}
.dWrapper .backDoor {
    width: 50%;
    height: 100%;
    /* border: 1px solid black; */
    background-color: #C2C6C5;
    background: linear-gradient(to right, #E24848, #E24848);
    position: relative;
    
}
.dWrapper .backDoor .bdDeco {
    position: absolute;
}
.dWrapper .backDoor .doorHole1 { 
    width: 3px;
    height: 3px;
    border: 0.5px solid rgba(0, 0, 0, .55);
    background-color: #313B4B;
    left: 1px;
    bottom: 7px;
    border-radius: 50%;
}
.dWrapper.dWrapper2 .backDoor2 .doorHole1 { 
    width: 30%;
    height: 5%;
    /* border: 0.5px solid rgba(0, 0, 0, .55); */
    background-color: #313B4B;
    left: 10%;
    bottom: 20%;
    border-radius: 50%;
}
.dWrapper .backDoor .doorHole2 {
    width: 3px;
    height: 3px;
    border: 0.5px solid rgba(0, 0, 0, .55);
    background-color: #313B4B;
    left: 1px;
    bottom: 12px;
    border-radius: 50%;
}
.dWrapper.dWrapper2 .backDoor2 .doorHole2 {
    width: 30%;
    height: 5%;
    border: 0.5px solid rgba(0, 0, 0, .55);
    background-color: #313B4B;
    left: 10%;
    bottom: 12%;
    border-radius: 50%;
}
.dWrapper .backDoor .doorHandle1 {
    width: 3.5px;
    height: 6px;
    background-color: #c12626;
    border: 0.5px solid #B13C3C;
    border-right: none;
    right: 0;
    top: 30%;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}
.dWrapper.dWrapper2 .backDoor2 .doorHandle1 {
    width: 30%;
    height: 10%;
    background-color: #c12626;
    border: 0.5px solid #B13C3C;
    border-right: none;
    right: 0;
    top: 30%;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}
.dWrapper .backDoor .doorHandle2 {
    width: 3.5px;
    height: 6px;
    background-color: #c12626;
    border: 0.5px solid #B13C3C;
    right: 0;
    top: 65%;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}
.dWrapper.dWrapper2 .backDoor2 .doorHandle2 {
    width: 30%;
    height: 10%;
    background-color: #c12626;
    border: 0.5px solid #B13C3C;
    right: 0;
    top: 65%;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}


@media only all and (min-width: 860px) {
    .cWrapper.rColor {
        background: linear-gradient(to right, #e54646, #e24848);
        box-shadow: inset 0px 2px 15px 1px #333,
                    inset 0px 1px 10px -1px #333;
    }
    
  }