.wow-alert-overlay { 
    position:fixed;
    top:0;
    left:0;
    background:rgba(0, 0, 0, 0.6);
    z-index:500;
    width:100%;
    height:100%;
    z-index: 999999;
}
.wow-alert-content {
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    background:#FFF;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -khtml-border-radius:3px;
    position:fixed;
    z-index:99999999;
    min-width:200px;
    min-height:50px;
    max-width:75%;
    padding: 15px 20px;
    left: 50%;
    top: 50%;
}
.wow-alert-content p {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #333;
    margin: 10px 0 20px 0;
    font-weight: bold;
    text-align: center;
}
.wow-alert-content a {
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    font-family: Helvetica, Arial, sans-serif;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -khtml-border-radius:3px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 11px;
    text-align: center;
    margin: 10px;
    color: #F6FAF7;
    display: block;
    margin: 0 auto;
    width: 100px;
    background: #579959;
    text-decoration: none;
    height: 30px;
    line-height: 30px;
}
.wow-alert-content a:hover {
    background: #477F4A;
}


.sp_modal_bg{position:fixed;z-index:20000;left:0;top:0;width:100%;height:100%;min-height:800px;background:rgba(0,0,0,.7);}
.sp_popup{position:fixed;visibility:hidden;z-index:20001;left:50%;top:-9999px;border-radius:5px;background:#f9f9f9;box-shadow:0 0 20px #555;}
.sp_popup.s260{width:260px;}
.sp_popup.s400{width:400px;}
.sp_popup.s490{width:490px;}
.sp_popup.s520{width:520px;}
.sp_popup.s560{width:560px;}
.sp_popup.s620{width:620px;}
.sp_popup.s700{width:700px;}
.sp_popup.s750{width:750px;}
.sp_popup.s760{width:760px;}
.sp_popup.s820{width:820px;}
.sp_popup.s1000{width:1000px;}
.sp_popup .sp_pop_header{margin-top:4px;padding-left:10px;height:45px;line-height:45px;font-size:18px;font-weight:bold;border-radius:5px 5px 0 0;background:#f1f3f4;border-bottom:1px solid #cccfd3;}
.sp_popup .sp_pop_container{padding:20px; background:#fff; border-radius:0 0 5px 5px;}
.sp_popup .sp_pop_container .customer_tab:first-child {margin-top:20px;}
.sp_popup .sp_pop_con_scroll{padding-bottom:0 !important;max-height:500px;overflow-y:auto;}
.sp_popup .sp_pop_con_scroll .foot_btn{padding-bottom:25px;}
.sp_popup .sp_popup_close{overflow:hidden;text-indent:-9999px;width:49px;height:49px;display:block;z-index:3200;position:absolute;right:0;top:0;cursor:pointer;background:url(images/btn_pop_close.png) no-repeat 50% 50%;}
.sp_popup .txt_dialog{text-align:center;padding:25px 0 25px 0;font-size:16px;color:#333;line-height:20px;font-weight:bold;}
.sp_popup .foot_btn{font-size:0;line-height:0;padding-top:20px;text-align:center;max-width:100%;}
.sp_popup .btn_n{display:inline-block;width:100px;height:38px;line-height:38px;font-size:14px;font-weight:bold;text-align:center;color:#fff;border-radius:4px;border-bottom:2px solid #eee;font-size:14px; padding:0;}
.sp_popup .foot_btn .btn_n + .btn_n {margin-left:10px;}
.sp_popup .bg_red{border-color:#d52929;background:#fb3939;}
.sp_popup .bg_orange{border-color:#bf8053;background:#fd9850;}
.sp_popup .bg_gray{border-color:#727272;background:#8e8e94;}

.ajax_loader{position:relative;width:50px;height:50px;margin:0 auto;}
.ajax_loader .circularG{position:absolute;background-color:#FB3939;width:11px;height:11px;-moz-border-radius:8px;-moz-animation-name:bounce_circularG;-moz-animation-duration:1.04s;-moz-animation-iteration-count:infinite;-moz-animation-direction:normal;-webkit-border-radius:8px;-webkit-animation-name:bounce_circularG;-webkit-animation-duration:1.04s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:normal;-ms-border-radius:8px;-ms-animation-name:bounce_circularG;-ms-animation-duration:1.04s;-ms-animation-iteration-count:infinite;-ms-animation-direction:normal;-o-border-radius:8px;-o-animation-name:bounce_circularG;-o-animation-duration:1.04s;-o-animation-iteration-count:infinite;-o-animation-direction:normal;border-radius:8px;animation-name:bounce_circularG;animation-duration:1.04s;animation-iteration-count:infinite;animation-direction:normal;}
.ajax_loader #circularG_1{left:0;top:20px;-moz-animation-delay:0.39s;-webkit-animation-delay:0.39s;-ms-animation-delay:0.39s;-o-animation-delay:0.39s;animation-delay:0.39s;}
.ajax_loader #circularG_2{left:5px;top:5px;-moz-animation-delay:0.52s;-webkit-animation-delay:0.52s;-ms-animation-delay:0.52s;-o-animation-delay:0.52s;animation-delay:0.52s;}
.ajax_loader #circularG_3{top:0;left:20px;-moz-animation-delay:0.65s;-webkit-animation-delay:0.65s;-ms-animation-delay:0.65s;-o-animation-delay:0.65s;animation-delay:0.65s;}
.ajax_loader #circularG_4{right:5px;top:5px;-moz-animation-delay:0.78s;-webkit-animation-delay:0.78s;-ms-animation-delay:0.78s;-o-animation-delay:0.78s;animation-delay:0.78s;}
.ajax_loader #circularG_5{right:0;top:20px;-moz-animation-delay:0.91s;-webkit-animation-delay:0.91s;-ms-animation-delay:0.91s;-o-animation-delay:0.91s;animation-delay:0.91s;}
.ajax_loader #circularG_6{right:5px;bottom:5px;-moz-animation-delay:1.04s;-webkit-animation-delay:1.04s;-ms-animation-delay:1.04s;-o-animation-delay:1.04s;animation-delay:1.04s;}
.ajax_loader #circularG_7{left:20px;bottom:0;-moz-animation-delay:1.17s;-webkit-animation-delay:1.17s;-ms-animation-delay:1.17s;-o-animation-delay:1.17s;animation-delay:1.17s;}
.ajax_loader #circularG_8{left:5px;bottom:5px;-moz-animation-delay:1.3s;-webkit-animation-delay:1.3s;-ms-animation-delay:1.3s;-o-animation-delay:1.3s;animation-delay:1.3s;}

a, a:visited, a:hover, a:active {
    text-decoration: none;
}











// Imports
// --------------------------------------
@import 'https://fonts.googleapis.com/css?family=Noto+Sans';
// Variables
// --------------------------------------
$scrollbar-width: 5px;
$chat-thread-bgd-color: rgba(25, 147, 147, 0.2);
$chat-thread-msg-arrow-size: 10px;
$chat-thread-avatar-size: 25px;
$chat-thread-offset: #{$chat-thread-avatar-size + 20px};
$default-shadow-color: rgb(0, 0, 0);
// Mixins
// --------------------------------------
@mixin fancy-background() {
    background: -moz-linear-gradient(-45deg, #183850 0, #183850 25%, #192C46 50%, #22254C 75%, #22254C 100%);
    background: -webkit-linear-gradient(-45deg, #183850 0, #183850 25%, #192C46 50%, #22254C 75%, #22254C 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

@mixin fancy-scrollbar() {
    &::-webkit-scrollbar {
        width: $scrollbar-width;
    }
    &::-webkit-scrollbar-track {
        border-radius: $scrollbar-width;
        background-color: rgba(25, 147, 147, 0.1);
    }
    &::-webkit-scrollbar-thumb {
        border-radius: $scrollbar-width;
        background-color: $chat-thread-bgd-color;
    }
}

@mixin scrolling-shadows($background-color: transparent, $shadow-intensity: 0.5, $shadow-color: $default-shadow-color, $cover-size: 40px, $shadow-size: 14px) {
    // Shadow covers
    background: linear-gradient($background-color 30%, rgba($background-color, 0)), linear-gradient(rgba($background-color, 0), $background-color 70%) 0 100%, radial-gradient(50% 0, farthest-side, rgba($shadow-color, $shadow-intensity), rgba($shadow-color, 0)), radial-gradient(50% 100%, farthest-side, rgba($shadow-color, $shadow-intensity), rgba($shadow-color, 0)) 0 100%;
    background: linear-gradient($background-color 30%, rgba($background-color, 0)), linear-gradient(rgba($background-color, 0), $background-color 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba($shadow-color, $shadow-intensity), rgba($shadow-color, 0));
    // also add button shadow:
    //radial-gradient(farthest-side at 50% 100%, rgba($shadow-color,$shadow-intensity), rgba($shadow-color,0)) 0 100%;
    background-repeat: no-repeat;
    background-color: $background-color;
    background-size: 100% $cover-size, 100% $cover-size, 100% $shadow-size, 100% $shadow-size;
    // Opera doesn't support this in the shorthand
    background-attachment: local, local, scroll, scroll;
}

* {
    box-sizing: border-box;
}
/*
body {
    background: skyblue;
    font: 12px/16px 'Noto Sans', sans-serif;
}
*/
.floating-chat {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    transform: translateY(70px);
    transition: all 250ms ease-out;
    border-radius: 50%;
    opacity: 0;
    @include fancy-background;
    &.enter:hover {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
        opacity: 1;
    }
    &.enter {
        transform: translateY(0);
        opacity: 0.6;
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.14);
    }
    &.expand {
        width: 250px;
        max-height: 400px;
        height: 400px;
        border-radius: 5px;
        cursor: auto;
        opacity: 1;
    }
    :focus {
        outline: 0;
        box-shadow: 0 0 3pt 2pt rgba(#0EC879, 0.3);
    }
    button {
        background: transparent;
        border: 0;
        color: white;
        text-transform: uppercase;
        border-radius: 3px;
        cursor: pointer;
    }
    .chat {
        display: flex;
        flex-direction: column;
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        border-radius: 50%;
        transition: all 250ms ease-out;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        &.enter {
            opacity: 1;
            border-radius: 0;
            margin: 10px;
            width: auto;
            height: auto;
        }
        .header {
            flex-shrink: 0;
            padding-bottom: 10px;
            display: flex;
            background: transparent;
            .title {
                flex-grow: 1;
                flex-shrink: 1;
                padding: 0 5px;
            }
            button {
                flex-shrink: 0;
            }
        }
        .messages {
            padding: 10px;
            margin: 0;
            list-style: none;
            overflow-y: scroll;
            overflow-x: hidden;
            flex-grow: 1;
            border-radius: 4px;
            background: transparent;
            @include fancy-scrollbar;
            li {
                position: relative;
                clear: both;
                display: inline-block;
                padding: 14px;
                margin: 0 0 20px 0;
                font: 12px/16px 'Noto Sans', sans-serif;
                border-radius: 10px;
                background-color: $chat-thread-bgd-color;
                word-wrap: break-word;
                max-width: 81%;
                &:before {
                    position: absolute;
                    top: 0;
                    width: $chat-thread-avatar-size;
                    height: $chat-thread-avatar-size;
                    border-radius: $chat-thread-avatar-size;
                    content: '';
                    background-size: cover;
                }
                &:after {
                    position: absolute;
                    top: $chat-thread-msg-arrow-size;
                    content: '';
                    width: 0;
                    height: 0;
                    border-top: $chat-thread-msg-arrow-size solid $chat-thread-bgd-color;
                }
            }
            li.other {
                animation: show-chat-odd 0.15s 1 ease-in;
                -moz-animation: show-chat-odd 0.15s 1 ease-in;
                -webkit-animation: show-chat-odd 0.15s 1 ease-in;
                float: right;
                margin-right: $chat-thread-offset;
                color: #0AD5C1;
            }
            li.other:before {
                right: -$chat-thread-offset;
                // Placeholder avatar 1
                background-image: url(https://github.com/Thatkookooguy.png);
            }
            li.other:after {
                border-right: $chat-thread-msg-arrow-size solid transparent;
                right: -$chat-thread-msg-arrow-size;
            }
            li.self {
                animation: show-chat-even 0.15s 1 ease-in;
                -moz-animation: show-chat-even 0.15s 1 ease-in;
                -webkit-animation: show-chat-even 0.15s 1 ease-in;
                float: left;
                margin-left: $chat-thread-offset;
                color: #0EC879;
            }
            li.self:before {
                left: -$chat-thread-offset;
                // Placeholder avatar 2
                background-image: url(https://github.com/ortichon.png);
            }
            li.self:after {
                border-left: $chat-thread-msg-arrow-size solid transparent;
                left: -$chat-thread-msg-arrow-size;
            }
        }
        .footer {
            flex-shrink: 0;
            display: flex;
            //flex-direction: row-reverse;
            padding-top: 10px;
            max-height: 90px;
            background: transparent;
            .text-box {
                border-radius: 3px;
                background: $chat-thread-bgd-color;
                min-height: 100%;
                width: 100%;
                margin-right: 5px;
                color: #0EC879;
                overflow-y: auto;
                padding: 2px 5px;
                @include fancy-scrollbar;
            }
        }
    }
}

// Animation
// --------------------------------------
@keyframes show-chat-even {
    0% {
        margin-left: -480px;
    }
    100% {
        margin-left: 0;
    }
}

@-moz-keyframes show-chat-even {
    0% {
        margin-left: -480px;
    }
    100% {
        margin-left: 0;
    }
}

@-webkit-keyframes show-chat-even {
    0% {
        margin-left: -480px;
    }
    100% {
        margin-left: 0;
    }
}

@keyframes show-chat-odd {
    0% {
        margin-right: -480px;
    }
    100% {
        margin-right: 0;
    }
}

@-moz-keyframes show-chat-odd {
    0% {
        margin-right: -480px;
    }
    100% {
        margin-right: 0;
    }
}

@-webkit-keyframes show-chat-odd {
    0% {
        margin-right: -480px;
    }
    100% {
        margin-right: 0;
    }
}



/*
플로팅 버튼
*/

#floating-button{
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: #db4437;
  position: fixed;
  bottom: 30px;
  right: 30px;
  cursor: pointer;
  box-shadow: 0px 2px 5px #666;
}

.plus{
  color: white;
  position: absolute;
  top: 0;
  display: block;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0;
  margin: 0;
  line-height: 55px;
  font-size: 38px;
  font-family: 'Roboto';
  font-weight: 300;
  animation: plus-out 0.3s;
  transition: all 0.3s;
}

#container-floating{
  position: fixed;
  width: 55px;
  height: 55px;
  bottom: 30px;
  right: 30px;
  z-index: 50px;
  z-index: 100;
}

#container-floating.is-opened .plus{
  animation: plus-in 0.15s linear;
  animation-fill-mode: forwards;
}

.close{
  position: absolute;
  top: 0;
  display: block;
  bottom: 0;
  left: 0;
  display: block;
  right: 0;
  padding: 0;
  opacity: 0;
  margin: auto;
  line-height: 65px;
  transform: rotateZ(-70deg);
  transition: all 0.3s;
  animation: close-out 0.3s;
}

#container-floating.is-opened .close{
  animation: close-in 0.2s;
  animation-delay: 0.1s;
  animation-fill-mode: forwards;
}

@keyframes close-in{
  from {opacity: 0; transform: rotateZ(-70deg);}
  to {opacity: 1; transform: rotateZ(0deg);}
}

@keyframes close-out{
  from {opacity: 1; transform: rotateZ(0deg);}
  to {opacity: 0; transform: rotateZ(-70deg);}
}

@keyframes plus-in{
  from {opacity: 1; transform: rotateZ(0deg);}
  to {opacity: 0; transform: rotateZ(180deg);}
}

@keyframes plus-out{
  from {opacity: 0; transform: rotateZ(180deg);}
  to {opacity: 1; transform: rotateZ(0deg);}
}

.nds{
  width: 40px;
  height: 40px;
  border-radius: 20px;
  position: fixed;
  z-index: 300;
  transform:  scale(0);
  transition: width .25s;
  cursor: pointer;
}

.nds.is-opened,
.nds.is-always-opened {
  width: 150px;
}

.nd1{
  background: #d3a411;
  right: 40px;
  bottom: 100px;
  animation-delay: 0.2s;
  animation: bounce-out-nds 0.3s linear;
  animation-fill-mode:  forwards;
}

.nd2{
  background: #3c80f6;
  right: 40px;
  bottom: 150px;
  animation-delay: 0.15s;
  animation: bounce-out-nds 0.15s linear;
  animation-fill-mode:  forwards;
}

.nd3{
  background: #ba68c8;
  right: 40px;
  bottom: 200px;
  animation-delay: 0.1s;
  animation: bounce-out-nds 0.1s linear;
  animation-fill-mode:  forwards;
}

.nd4{
  background: #d3a411;
  right: 40px;
  bottom: 250px;
  animation-delay: 0.08s;
  animation: bounce-out-nds 0.1s linear;
  animation-fill-mode:  forwards;
}

@keyframes bounce-nds{
  from {opacity: 0;}
  to {opacity: 1; transform: scale(1);}
}

@keyframes bounce-out-nds{
  from {opacity: 1; transform: scale(1);}
  to {opacity: 0; transform: scale(0);}
}

#container-floating.is-opened .nds{

  animation: bounce-nds 0.1s linear;
  animation-fill-mode:  forwards;
}

#container-floating.is-opened .nd2{
  animation-delay: 0.08s;
}
#container-floating.is-opened .nd3{
  animation-delay: 0.15s;
}
#container-floating.is-opened .nd4{
  animation-delay: 0.2s;
}

.reminder{
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
  line-height: 40px;
}