* {
    margin: 0;
    padding: 0;
    border: 0;
}

html, body {
    overflow-y:auto;

    height:100%;

    background-image:url(https://d2q63o9r0h0ohi.cloudfront.net/images/the-witchwood/bg/intro-flat-bg-78c6a564d8405438aee572679ffb54b9dbcc3938f760e4da48c13a328d6f4cef15db8b5299d26434120feabf0cfd8182cea20cceac01adda96c7e146102d21c2.jpg);
        background-repeat:no-repeat;
        background-position:50% 50%;
        background-size:110% auto;
}

#wrapper {
    overflow:hidden;
    position: relative;

    margin: 0 auto;
    padding: 5px 40px;
    width:1100px;
    height:100%;

    background: white;
    border-left: 1px black solid;
    border-right: 1px black solid;
    box-sizing: border-box;
}

h1 {
    position:relative;
    font-size:40px;
    text-align:center;
}

.column {overflow:hidden;height:calc(100% - 70px);float:left;}
    .column1 {width:250px;}
    .column2 {margin-left:5px;width:750px;}

.class {
    overflow:hidden;
    margin-bottom:10px;
    width: 100%;
    height: 300px;

    border:1px black solid;
    box-sizing: border-box;

    font-size:20px;
    text-align:center;
}
    #chooseother {
        height:30px;
        border:1px black solid;
        box-sizing: border-box;

        font-size:20px;
    }
    #otherclass {
        display:inline-block;
        width:100%;
        height:calc(100% - 30px);

        background-repeat:no-repeat;
        background-position:50% -30px;
        background-size:250px auto;
    }
        .class_전사 {background-image:url(http://static.inven.co.kr/image_2011/hs/dataninfo/card/render/7.jpg)}
        .class_주술사 {background-image:url(http://static.inven.co.kr/image_2011/hs/dataninfo/card/render/1066.jpg)}
        .class_도적 {background-image:url(http://static.inven.co.kr/image_2011/hs/dataninfo/card/render/930.jpg)}
        .class_성기사 {background-image:url(http://static.inven.co.kr/image_2011/hs/dataninfo/card/render/671.jpg)}
        .class_사냥꾼 {background-image:url(http://static.inven.co.kr/image_2011/hs/dataninfo/card/render/31.jpg)}
        .class_드루이드 {background-image:url(http://static.inven.co.kr/image_2011/hs/dataninfo/card/render/274.jpg)}
        .class_흑마법사 {background-image:url(http://static.inven.co.kr/image_2011/hs/dataninfo/card/render/893.jpg)}
        .class_그마법사 {background-image:url(http://static.inven.co.kr/image_2011/hs/dataninfo/card/render/637.jpg)}
        .class_사제 {background-image:url(http://static.inven.co.kr/image_2011/hs/dataninfo/card/render/813.jpg)}

.thief {
    overflow:hidden;
    margin-bottom:10px;
    padding:5px;
    width: 100%;
    height: calc(100% - 310px);
        min-height:250px;

    border:1px black solid;
    box-sizing: border-box;
}
    #stole {
        width:100%;
        height:50px;

        background:#2196f3;
        border:1px black solid;
        box-sizing: border-box;
        transition:box-shadow 0.2s;

        font-size:30px;
    }
        #stole:hover {
            cursor:pointer;
            background:#4daaf6;
            box-shadow:0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #228DFF, 0 0 7px #228DFF, 0 0 8px #228DFF, 0 0 10px #228DFF, 0 0 15px #228DFF;
        }
        #stole:active {
            background:#d2eafd;
        }
    #reset {
        margin-top:50px;
        width:100%;
        height:50px;

        background:yellow;
        border:1px black solid;
        box-sizing: border-box;
        transition:box-shadow 0.2s;

        font-size:30px;
    }
        #reset:hover {
            cursor:pointer;
            background:orange;
            box-shadow:0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #228DFF, 0 0 7px #228DFF, 0 0 8px #228DFF, 0 0 10px #228DFF, 0 0 15px #228DFF;
        }
        #reset:active {
            background:red;
        }


.tag {
    width:100%;
    height:30px;

    background:#C0C0C0;
    border:1px black solid;
        border-bottom:0;
    box-sizing: border-box;

    font-weight:bold;
    font-size:20px;
    line-height:30px;
    text-align:center;
}

.created {
    overflow-y:scroll;
    margin-bottom:10px;
    width:100%;
    height: calc(100% - 30px);

    border:1px black solid;
    box-sizing: border-box;
}

.card {
    position:relative;

    float:left;
    width:140px;
    height:200px;

    background-repeat:no-repeat;
    background-position:50% 50%;
    background-size:contain;
}
    .card .count {
        position:absolute;
        right:0;bottom:0;
        width:60px;
        height:30px;

        background:blue;
            border-radius:15px;

        color:white;
        font-weight:bold;
        font-size:20px;
        line-height:30px;
        text-align:center;
    }

.tess {
    overflow-y:scroll;
    margin-bottom:10px;
    width:100%;
    height: auto;
    border:1px black solid;
}