/* layout-popup */

.layout-popup {z-index:1000; font-size:0; line-height:0; display:none; position:absolute; border-radius:5px;}
.layout-popup:before {z-index:-1; display:block; content:''; position:absolute; left:0; top:0; width:100%; height:calc(100% - 10px);  box-shadow:0 5px 5px 5px #000000; opacity:0.2; border-radius:5px;}
.layout-popup.mode1:before {top:10px;}
.layout-popup.mode2:before {top:0; height:100%;}
.layout-popup .body {position:relative; background-color:#ffffff; border-radius:5px;}
.layout-popup .img img {width:100%; border-radius:5px 5px 0 0;}
.layout-popup .content {padding:10px;}
.layout-popup .content .text {font-weight:400; line-height:18px; font-size:13px; color:#000000;}
.layout-popup .btn {position:relative; padding:10px;}
.layout-popup .btn .checkbox {position:relative; display:inline-block; vertical-align:middle;}
.layout-popup .btn .checkbox input {position:absolute; left:0; top:0; width: 100%; height:100%; opacity: 0;}
.layout-popup .btn label {display:inline-block; vertical-align:middle; cursor:pointer;}
.layout-popup .btn label {font-weight:400; line-height:20px; font-size:13px; color:#6c7174;}
.layout-popup .btn label:hover {text-decoration:underline; color:#1e2631;}
.layout-popup .btn label svg:nth-child(1) {display:block;}
.layout-popup .btn label svg:nth-child(2) {display:none;}
.layout-popup .btn label.focus svg:nth-child(1) {display:none;}
.layout-popup .btn label.focus svg:nth-child(2) {display:block;}
.layout-popup .btn .close {display:block; position:absolute; right:5px; top:6px; background-color:#6c7174; padding:4px 12px 4px 12px; border-radius:4px; cursor:pointer;}
.layout-popup .btn .close {font-weight:400; line-height:20px; font-size:13px; color:#ffffff;}
.layout-popup .btn .close:hover {background-color:#1e2631;}
.layout-popup .btn .close {font-weight:400; line-height:20px; font-size:13px; color:#ffffff;}
.layout-popup.type-banner .body a {z-index:100; display:block; position:absolute; left:0; top:0; width:100%; height:calc(100% - 40px);}
.layout-popup.type-banner .body img,
.layout-popup.type-banner .body video,
.layout-popup.type-banner .body iframe {border-radius:5px 5px 0 0;}

.layout-popup.ty-1 {
    top: 0;
    left: 0;
    opacity: 0;
}

.layout-popup.ty-2 {
    left: 0;
    top: 0;
}

.layout-popup.ty-3 {
    right: 0;
    top: 0;
}

.layout-popup.ty-4 {
    left: 0;
    bottom: 60px;
}

.layout-popup.ty-5 {
    right: 0;
    bottom: 60px;
}

/* main */

.l-main .l-wrap {max-width:100% !important;}

/*
#md-container {display:table; width:100%;}
*/

.md-section {text-align:center;}

.md-section a:hover {text-decoration:none;}

.md-section .md-item {z-index:1; position:relative; display:block; vertical-align:top; margin:0 auto; text-align:left;}

/* md-insert */

body:not(.sst-active) .md-insert {
    display: none;
}

.md-insert {
    margin:0 auto;
    width: calc(100% - 4px);
    height: 60px;
    background-color: #fff;
    border:2px dashed #ccc;
}

.md-insert:hover {
    background-color: #ebf3fe;
    border-color: #388cf1;
}

.md-insert ul {
    position: relative;
    padding-top: 10px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.md-insert li {
    background-color: #cccccc;
    padding: 1px 7px 0 7px;
    height: 19px;
    text-align: left;
    cursor: pointer;
}

.md-insert li:nth-child(n+2) {
    margin-left:4px;
}

.md-insert:hover li {
    background-color: #388cf1;
}

.md-insert .text {
    display: inline-block;
    position: relative;
    line-height: 19px;
    font-family: 'dotum', sans-serif;
    font-size: 11px;
    color: #fff;
}

.md-insert .arrow {
    transform: rotate(-90deg);
    position: absolute;
    left: calc(50% - 3px);
    top: -12px;
    width: 6px;
    height: 8px;
}

.md-insert .msg {
    margin-top:8px;
    text-align: center;
    line-height: 1.4;
    font-family: 'dotum', sans-serif;
    font-size: 11px;
    color: #999;
}

.md-insert li:not(:hover) .arrow {
    display: none;
}

/* sst-help */

.md-insert li:not(:hover) .help {
    display: none;
}

.md-insert .help {
    z-index: 10000;
    position: absolute;
    width: calc(100% - 20px);
    left: 10px;
    right: 10px;
    bottom: 30px;
    text-align: center;
}

.md-insert .help .wrap {
    text-align: left;
    display: block;
    position: relative;
    border-radius: 3px;
    padding: 8px 9px 6px 9px;
    background-color: #000000;
    font-family: 'dotum',sans-serif;
    font-size: 11px;
    line-height: 1.5;
    color: #fff;
}