
@charset "UTF-8"; :root {
    --color-1: rgb(8,222,152);
    /*rgb(95,57,255);*/
    --color-1-hover: rgba(8,222,152,.3);
    --color-1-focus: rgba(8,222,152,.8);
    --color-1-element_focus: rgb(224, 241, 236);
    /*rgb(218, 209, 255);*/
    --color-2: rgba(77, 34, 255, 1);
    --color-3: rgba(255, 90, 90, 1);
    --color-border: #d7d7d7;
    --global_width_size: 1320px;
    --content_width_size: calc(var(--global_width_size) - 610px - 30px - 30px);
    --font: 'SUIT', sans-serif;
    --font-title: 'HSSanTokki20-Regular', sans-serif;
    --font-weight-1: 400;
    --font-weight-2: 700;
    --font-weight-3: 800;
    --transition: all 0.2s ease-in-out;
}



.pkg_b_itemsContainer .pkg_b_wrapper {
    margin: 12px 0;
}

.pkg_b_itemsContainer .pkg_b_wrapper b {
    font-weight: normal;
    display: inline-block;
    width: calc(10% - 7.2px);
    height: 55px;
    line-height: 55px;
    border-radius: 5px;
    text-align: center;
    font-size: 20px;
    overflow: hidden;
    vertical-align: middle;
    color: #000;
    background: #F9F9F9;
    /*box-shadow:inset 0px 4px 4px #E6E6E6;*/
    border: 1px solid #DDD;
    text-decoration: none;
    cursor: pointer;
    margin-right: 8px;
    margin-bottom: 8px;
    transition: all 0.1s ease-in-out;
}

.pkg_b_itemsContainer .pkg_b_wrapper b:nth-child(10n) {
    margin-right: 0;
}

.pkg_b_itemsContainer .pkg_b_wrapper b:hover {
    color: var(--color-1);
    background: #FFF;
    border: 2px solid var(--color-1);
    transform: scale(150%);
    box-shadow: 0 0 15px rgba(0,0,0,.15);
}

.pkg_b_itemsContainer .pkg_b_wrapper b:active {
    background: var(--color-1-element_focus) !important;
    box-shadow: 0 0 4px rgba(0,0,0,.15);
}

.pkg_pre_itemsContainer_fSpe {
    padding: 0 0 20px 0;
    margin: 0 0 12px 0;
}

.pkg_pre_itemsContainer_fSpe pre {
    font-weight: normal;
    display: inline-block;
    width: calc(10% - 8px);
    height: 55px;
    line-height: 55px;
    border-radius: 5px;
    text-align: center;
    font-size: 20px;
    overflow: hidden;
    vertical-align: middle;
    color: #000;
    box-shadow: inset 4px 6px 5px #EEE;
    text-decoration: none;
    cursor: pointer;
    margin-right: 8px;
    margin-bottom: 8px;
    transition: all 0.1s ease-in-out;
}

.pkg_pre_itemsContainer_fSpe pre:hover {
    transform: scale(150%);
    color: var(--color-1);
    background: #FFF;
    box-shadow: inset 0 0 0 2px var(--color-1);
}

.pkg_pre_itemsContainer_fSpe pre:active {
    background: var(--color-1-element_focus) !important;
    box-shadow: 0 0 4px rgba(0,0,0,.15), inset 0 0 0 2px var(--color-1);
}

#copyModule {
    position: fixed;
    left: 50%;
    bottom: 40px;
    z-index: 1;
    width: 100%;
    max-width: 1000px;
    font-size: 0;
    transform: translateX(-50%);
    opacity: .8;
    transition: var(--transition);
}

#copyModule:hover {
    opacity: 1;
    transition: var(--transition);
}

#copyModule #controlArea {
    display: table;
    width: 100%;
    height: 52px;
    background: #FFF;
    box-shadow: 0px 0px 52px rgba(0,0,0,.15);
    border-radius: 25px;
    overflow: hidden;
}

#copyModule #controlArea #cM_L, #copyModule #controlArea #cM_C, #copyModule #controlArea #cM_R {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    height: 100%;
}

#copyModule #controlArea #cM_L {
    width: auto;
    position: relative;
}

#copyModule #controlArea #cM_L input {
    width: 100%;
    height: 100%;
    border: 0;
    -webkit-appearance: none;
    font-size: 18px;
    text-align: center;
    padding: 0 20px;
    font-family: Arial,sans-serif;
    border-radius: 0;
    box-shadow: none;
}

#copyModule #controlArea #cM_C {
    width: 170px;
}

#copyModule #controlArea #cM_C button {
    font-family: var(--font);
    width: 100%;
    height: 100%;
    border: 0;
    font-size: 15px;
    -webkit-appearance: none;
    color: var(--color-1);
    background: #FFF;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid #FFF;
    cursor: pointer;
}

#copyModule #controlArea #cM_C button span {
    margin-right: 5px;
    margin-bottom: 1px;
}

#copyModule #controlArea #cM_R {
    width: 170px;
}

#copyModule #controlArea #cM_R button {
    font-family: var(--font);
    width: 100%;
    height: 100%;
    border: 0;
    font-size: 15px;
    -webkit-appearance: none;
    color: #FFF;
    background: var(--color-1);
    cursor: pointer;
}

#copyModule #controlArea #cM_R button span {
    margin-right: 5px;
    margin-bottom: 1px;
}




* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}


#textStore { width:1px; height:1px; resize:none; border:none; position:fixed; left:0; top:60%;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

.confirmation { font-family:var(--font); font-weight:var(--font-weight-1); background:var(--color-1); color:#FFF; padding:10px 15px; border-radius:5px; display:none; position:fixed; z-index:999; top:50%; left:50%; transform:translate(-50%, -50%); }


.wrapcus {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border: 2px solid #4c9ac0;
  border-radius: 20px;
}

