/* @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&family=Noto+Sans+KR:wght@300;400;500;700;900&family=Roboto:ital,wght@0,300;0,400;0,500;0,900;1,700&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gaegu:wght@300;400;700&family=Hi+Melody&family=Nanum+Brush+Script&family=Nanum+Gothic:wght@400;700;800&family=Noto+Sans+KR:wght@300;400;500;700;900&family=Roboto:ital,wght@0,300;0,400;0,500;0,900;1,700&family=Sunflower:wght@300;500;700&display=swap');

/**
 * Font
 */
@font-face {
    font-family: 'acc';
    src: url('/assets/fonts/acc.ttf') format('woff');
    /* src: url('/assets/fonts/AAC어린이하늘맑은체.woff2') format('woff2'); */
    font-weight: 400;
}
@font-face {
    font-family: 'hs';
    src: url('/assets/fonts/hs.ttf') format('woff');
    /* src: url('/assets/fonts/HS유지체.woff2') format('woff2'); */
    font-weight: 400;
}
@font-face {
    font-family: 'imcre';
    src: url('/assets/fonts/ImcreSoojin.ttf') format('woff');
    font-weight: 400;
}
@font-face {
    font-family: 'jeju';
    src: url('/assets/fonts/JejuHallasan.ttf') format('woff');
    font-weight: 400;
}
@font-face {
    font-family: 'knps';
    src: url('/assets/fonts/KNPSKkomi.ttf') format('woff');
    font-weight: 400;
}
@font-face {
    font-family: 'kohib';
    src: url('/assets/fonts/KOHIBaeum.ttf') format('woff');
    font-weight: 400;
}
@font-face {
    font-family: 'mapo';
    src: url('/assets/fonts/MapoGoldenPier.ttf') format('woff');
    font-weight: 400;
}
@font-face {
    font-family: 'onem';
    src: url('/assets/fonts/ONEMobilePOP.ttf') format('woff');
    font-weight: 400;
}
@font-face {
    font-family: 'roomno';
    src: url('/assets/fonts/RoomNo703.ttf') format('woff');
    font-weight: 400;
}
@font-face {
    font-family: 'sdsam';
    src: url('/assets/fonts/SDSamliphopangcheTTFOutline.ttf') format('woff');
    font-weight: 400;
}
@font-face {
    font-family: 'sfsnow';
    src: url('/assets/fonts/sfsnow.ttf') format('woff');
    /* src: url('/assets/fonts/SF함박눈.woff2') format('woff2'); */
    font-weight: 400;
}
@font-face {
    font-family: 'design';
    src: url('/assets/fonts/designhouseBold.ttf') format('woff');
    font-weight: 400;
}
@font-face {
    font-family: 'kangw';
    src: url('/assets/fonts/kangwon.ttf') format('woff');
    /* src: url('/assets/fonts/강원교육새음.woff2') format('woff2'); */
    font-weight: 400;
}
@font-face {
    font-family: 'nat';
    src: url('/assets/fonts/nat.ttf') format('woff');
    /* src: url('/assets/fonts/국립박물관문화재단클래식B.woff2') format('woff2'); */
    font-weight: 400;
}
@font-face {
    font-family: 'happy';
    src: url('/assets/fonts/happy.ttf') format('woff');
    /* src: url('/assets/fonts/행복고흥B.woff2') format('woff2'); */
    font-weight: 400;
}


body {
    background-color: #21253D;
    font-weight: normal;
    color: #FFF;
}

* {
    word-break:keep-all!important;
}

.white-skin .navbar,
.white-skin .card {
    background-color: #21253D;
}

.card {
    box-shadow: none;
}

.btn.btn-outline-myfacade {
    border: solid 2px #F38181!important;  
    color: #F38181!important;
}

.btn.btn-myfacade {
    background-color: #F38181!important;
}


.white-skin .side-nav {
    background-color: #f2f2f2;
}

.side-nav .collapsible a {
    font-size: 1em;
    padding-top: 8px;
    height: 48px;
}

.artbox {
    position:relative;
    background-color: #FFF;
    /*
    width: 100%;
    height: 55vh;
    */
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    box-shadow: 0 3px 15px 0 rgba(0,0,0,.3),0 2px 10px 0 rgba(0,0,0,.12)!important;
}

.artbox div > div {
    position: absolute;
}

.artbox.hover-on div.selectable:hover {
    outline: solid 1px #00dcf0; 
}

#handler-layer {
    position: relative;
    /* border: solid 2px #00dcf0; */
    outline: solid 3px #00dcf0;
    background: rgba(0,0,0,0,0);
}


.ui-resizable-handle {
    position: absolute;
    width: 128px;
    height: 128px;
    background-color: #FFF;
    border: solid 3px #00dcf0; 
    border-radius: 50%;
}

.resizable-wrapper {
  width: 36px;
  height: 36px;
  border-radius: 25%;
}

.l {
  left: -12px;
  top: calc(50% - 27px);
  width: 24px;
  height: 54px;
}

.r {
  right: -24px;
  top: calc(50% - 48px);
  width: 48px;
  height: 96px;
}

.t {
  top: -18px;
  left: calc(50% - 18px);
  width: 54px;
  height: 36px;
}

.b {
  bottom: -18px;
  left: calc(50% - 18px);
  width: 54px;
  height: 36px;
}

.tl {
  left: -64px;
  top: -64px;
}

.tr {
  right: -18px;
  top: -18px;
}

.bl {
  left: -18px;
  bottom: -18px;
}

.br {
  right: -64px;
  bottom: -64px;
}

.buttonbox a {
    color: #FFF;
    font-size: 1.2em;
}
.buttonbox i {
    color: #FFF;
    font-size: 2em;
}

.btn-group-vertical .btn-myfacade {
    background-color: #FFAAAA!important;
    color: #eee;
}

.white-skin .btn-myfacade:not([disabled]):not(.disabled).active {
    background-color: #F38181!important;
    color: #FFF;
}


.modal .modal-body div {
    color: #000;
}

.modal.bottom {
    max-width: 100%;
    top:unset;
    bottom:0px;
}

.modal.bottom .modal-dialog {
    margin: 0px;
    max-width: 100%;
}

#modalBottomText, #modalBottomText .modal-body {
    height: 100%;
}

#modalBottomImage, #modalBottomImage .modal-body {
    height: 72px;
}

#modalBottomIcon, #modalBottomIcon .modal-body {
    height: 72px;
}

#modalBottomBackground, #modalBottomBackground .modal-body {
    height: 256px;
}

#modalBottomEffect, #modalBottomEffect .modal-body {
    height: 256px;
}

#background-box {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.template-title {
    position: absolute;
    background-color: rgb(0, 0, 0, .5);
    padding: 4px 8px;
    color: #FFF;
    font-size: 0.8em;
    border-radius: 10%;
}

/**
 * artbox 디바이스별 사이즈
 */
/* Small devices (landscape phones, 414 and down) */

@media (max-width: 280px) {
    .wrap, .buttonbox {
        width:252px;
    }
}

@media (min-width: 280px) {
    .wrap, .buttonbox {
        width:252px;
    }
}

@media (min-width: 360px) {
    .wrap, .buttonbox {
        width:334px;
    }
}

@media (min-width: 415px) {
    .wrap, .buttonbox {
        width:380px;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .wrap, .buttonbox {
        width:548px;
    }

    /*
    #modalBottomText, #modalBottomText .modal-body {
        height: 72px;
    }
    */
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .wrap, .buttonbox {
        width:760px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    .wrap, .buttonbox {
        width:984px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .wrap, .buttonbox {
        width:1192px;
    }
}

/*****************************************
 * Stepper
 ****************************************/
.join-process {
    position: relative;
    display: flex;
    display: -webkit-flex;
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    justify-content: center;
    -webkit-justify-content: center;
    margin-bottom: 48px;
}
.join-process li {
    position: relative;
    width: 240px;
    text-align: center;
    list-style: none;
}
.join-process li.on em {
    color: #fff;
    background-color: #F38181;
}
.join-process li em {
    display: inline-block;
    margin: 0 auto;
    width: 36px;
    line-height: 36px;
    font-family: 'NotoKrR';
    font-size: 1.1em;
    font-weight: bold;
    color: #fff;
    background-color: #707589;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    transform: translateY(4px);
}
.join-process li.on span {
    color: #FFF;
}

.join-process li span {
    display: inline-block;
    padding-left: 8px;
    text-align: left;
    font-family: 'NotoKrR';
    font-size: 0.9em;
    color: #777;
    vertical-align: middle;
    font-weight: normal;
}