@charset "utf-8";
/* loading */
div.loading { width: 100%; position: fixed; top: 0; left: 0; z-index: 10000; background-color: rgba(0, 0, 0, .85); color: #FFFFFF; font-size: 14px; text-align: center; height: 100%; font-weight: bold; letter-spacing: 0; }
div.loading .puzzle-loading { margin-top: 280px; }
div.loading .puzzle-loading .puzzle-ico {  -moz-animation: loading 4s ease infinite; -webkit-animation: loading 4s ease infinite; animation: loading 4s ease infinite; margin-bottom: 25px; width: 70px; height: 70px; }

@keyframes 'loading' {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes 'loading' {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-moz-keyframes 'loading' {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@media all and (min-width:2000px)
{
	div.loading { font-size: 17px; }
	div.loading .puzzle-loading .puzzle-ico { width: 85px; height: 85px; margin-bottom: 35px; }
}
@media all and (min-width:1700px) and (max-width:1999px)
{
	div.loading { font-size: 16px; }
	div.loading .puzzle-loading .puzzle-ico { width: 80px; height: 80px; margin-bottom: 30px; }
}
@media all and (min-width:1300px) and (max-width:1699px)
{
	div.loading { font-size: 15px; }
	div.loading .puzzle-loading .puzzle-ico { width: 75px; height: 75px; margin-bottom: 30px; }
}

/* scenario editor */
html, body { min-width: 300px; }
.view-container { width: 100%; height: 100%; }
.view-container .editor-t-bar { height: 41px; background: linear-gradient(to top,#1a2232,#182033); position: fixed; z-index: 1001; width: 100%; left: 0; top: 0; border-bottom: 1px solid #2c313c; padding-right: 10px; min-width: 300px; }

.view-container .editor-t-bar .sc-logo-area { float: left; }
.view-container .editor-t-bar .sc-logo-area a  { display: block; height: 40px; padding: 11px 20px 0; margin-right: 15px; border-right: 1px solid #2c313c; }
.view-container .editor-t-bar .sc-logo-area a img { width: 80px; }

.view-container .editor-t-bar .title { font-size: 13px; color: #ffffff; display: inline-block; line-height: 40px; font-weight: 100; position: relative; cursor: default; float: left; display: block; max-width: calc(100% - 820px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.view-container .editor-t-bar .scenario-info-change-btn { display: inline-block; height: 25px; color: #fff; font-family: 'dotum','Arial'; font-size: 11px; border: 1px solid #9B9EA8; border-radius: 3px; line-height: 23px; padding-right: 9px; position: relative; padding-left: 9px; opacity: 0.8; transition: all 0.2s ease; margin-top: 8px; margin-left: 20px;  }
.view-container .editor-t-bar .scenario-info-change-btn:hover { opacity: 1; background: #0058E8; border-color: #0058E8; }
.view-container .editor-t-bar .scenario-info-change-btn .ico { width: 13px; height: 13px; display: inline-block; background: url("../img/scenario-editor/svg/edit_ico.svg") no-repeat; margin-right: 5px; margin-top: 5px; }
.view-container .editor-t-bar .sc-stats { display: inline-block; line-height: 40px; margin-left: 20px; cursor: default; }
.view-container .editor-t-bar .sc-stats .stats { font-family: 'Dotum','Arial'; font-size: 11px; }
.view-container .editor-t-bar .sc-stats .circle { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-top: 16px; margin-right: 3px; }
.view-container .editor-t-bar .editing .circle { background: #f9b234;  }
.view-container .editor-t-bar .editing .stats { color: #f9b234; }
.view-container .editor-t-bar .complete .circle { background: #1bc04a;  }
.view-container .editor-t-bar .complete .stats { color: #1bc04a; }

.view-container .editor-t-bar #m_tool_toggle + label { display: none; }
.view-container .editor-t-bar #m_tool_toggle + label:before { display: none; }

.view-container .editor-t-bar .sc-tools { float: right; }
.view-container .editor-t-bar .sc-tools.m-tool { display: none; }
.view-container .editor-t-bar .sc-tools .cal { color: #cfcecf; font-family: 'Arial'; letter-spacing: 0; font-size: 11px; line-height: 40px; display: inline-block; margin-right: 20px; cursor: default; }
.view-container .editor-t-bar .sc-tools .tool-wrap { display: inline-block; margin-top: 7px; }
.view-container .editor-t-bar .sc-tools .tool-wrap ul li { display: inline-block; margin-right: 2px; }
.view-container .editor-t-bar .sc-tools .tool-wrap ul li:last-child { margin-right: 0; }
.view-container .editor-t-bar .sc-tools .tool-wrap ul li a { display: block; height: 25px; color: #fff; font-family: 'dotum','Arial'; font-size: 11px; border: 1px solid #9B9EA8; border-radius: 3px; line-height: 23px; padding-right: 9px; position: relative; padding-left: 25px; opacity: 0.8; transition: all 0.2s ease; }
.view-container .editor-t-bar .sc-tools .tool-wrap ul li a:hover { opacity: 1; background: #0058E8; border-color: #0058E8; }
.view-container .editor-t-bar .sc-tools .tool-wrap ul .t-save a { padding-left: 27px; }
.view-container .editor-t-bar .sc-tools .tool-wrap ul li a:before { width: 16px; height: 16px; position: absolute; content: ''; left: 7px; top: 3px; }
.view-container .editor-t-bar .sc-tools .tool-wrap ul .reset a:before { background: url("../img/scenario-editor/svg/reset_ico.svg"); }
.view-container .editor-t-bar .sc-tools .tool-wrap ul .t-save a:before { background: url("../img/scenario-editor/svg/t_save_ico.svg"); }
.view-container .editor-t-bar .sc-tools .tool-wrap ul .save a:before { background: url("../img/scenario-editor/svg/save_ico.svg"); }
.view-container .editor-t-bar .sc-tools .tool-wrap ul .end a:before { background: url("../img/scenario-editor/svg/exit_ico.svg"); }
.view-container .editor-t-bar .sc-tools .tool-wrap ul .crawling a:before { background: url("../img/scenario-editor/svg/crawling_ico.svg"); }

@media all and (max-width: 960px)
{
	.view-container .editor-t-bar .sc-logo-area a { background: url("../img/scenario-editor/logo_p.svg"); width: 15px; height: 40px; background-repeat: no-repeat; background-size: 14px 17px; background-position: center; transition: background 0s ease; }
	.view-container .editor-t-bar .sc-logo-area a:hover { background: url("../img/scenario-editor/logo_p.svg"); width: 15px; height: 40px; background-repeat: no-repeat; background-size: 14px 17px; background-position: center; }
	.view-container .editor-t-bar .sc-logo-area a img { display: none; }
	
	.view-container .editor-t-bar .title { max-width: calc(100% - 100px); }
	.view-container .editor-t-bar .sc-tools.pc-tool { display: none; }
	.view-container .editor-t-bar .sc-tools.m-tool { display: block; position: absolute; right: 0; width: 100%; background: rgba(26,23,25,0.90); top: -300px; padding: 0px 10px 10px; opacity: 0; transition: top .35s ease,opacity .35s ease; z-index: 2; }
	.view-container .editor-t-bar>.scenario-info-change-btn { display: none; }
	.view-container .editor-t-bar>.sc-stats { display: none; }
	.view-container .editor-t-bar #m_tool_toggle + label { width: 40px; height: 40px; display: block; position: absolute; padding: 0; text-align: center; right: 0; top: 0; z-index: 3; }
	.view-container .editor-t-bar #m_tool_toggle + label img { width: 24px; display: inline-block; margin-top: 8px; }
	.view-container .editor-t-bar #m_tool_toggle + label:before { display: none; }
	
	.view-container .editor-t-bar #m_tool_toggle:checked ~ .sc-tools.m-tool { right: 0; top: 0; opacity: 1; }
	.view-container .editor-t-bar #m_tool_toggle ~ .sc-tools.m-tool .scenario-info-change-btn { margin-left: 0; transition: background .25s ease; }
	.view-container .editor-t-bar #m_tool_toggle ~ .sc-tools.m-tool .step-control-wrap { margin-top: 8px; }
	.view-container .editor-t-bar #m_tool_toggle ~ .sc-tools.m-tool .cal { line-height: 25px; margin: 8px 5px 0; opacity: .7; }
	.view-container .editor-t-bar #m_tool_toggle ~ .sc-tools.m-tool .sc-stats { line-height: 25px; margin-top: 8px; margin-left: 10px; }
	.view-container .editor-t-bar #m_tool_toggle ~ .sc-tools.m-tool .sc-stats .circle { margin-top: 9px; }
}

/* 뷰 셀렉트 */
.view-select-wrap { background: linear-gradient(to top,#1a2232,#182033); position: fixed; width: 100%; top: 41px; height: 35px; min-width: 300px; }
.view-select-wrap ul { padding: 0 19px; }
.view-select-wrap ul li { float: left; margin-right: 5px; padding-top: 5px; }
.view-select-wrap ul li a { display: block; color: #fff; letter-spacing: 0.5px; height: 25px; line-height: 25px; font-weight: 300; font-size: 11px; opacity: .5; padding: 0 10px; border-radius: 3px; transition: color .25s ease, background .25s ease, opacity .25s ease; }
.view-select-wrap ul li a:hover { opacity: 0.9; background: #404450; color: #EFEEFF; }
.view-select-wrap ul li.select a { color: #fff; opacity: 1; background: #0058E8; }

.view-select-wrap ul li.console { position: relative; }
.view-select-wrap ul li.console .console-menu { position: absolute; left: calc( 100% + 10px ); top: 0; white-space: nowrap; display: none; }
.view-select-wrap ul li.select.console .console-menu { display: block; }
.view-select-wrap ul li.console .console-menu button.reset { background: rgba(216,216,216,0.2); border: none; outline: 0; font-size: 1.1rem; margin-top: 8px; color: #fff; opacity: .9; font-weight: 300; font-family: 'dotum','Arial'; border-radius: 3px; padding: 3px 8px; opacity: .7; transition: background .25s ease,opacity .25s ease; }
.view-select-wrap ul li.console .console-menu button.reset:hover { background: #DF1417; opacity: 1; }

.step-control-wrap { min-width: 300px; height: 40px; background: #2C313C; overflow: hidden; z-index: 1004; }
.step-control-wrap .r-bar-toggle { width: 31px; display: block; float: left; height: 40px; text-align: center; transition: background 0.2s ease; }
.step-control-wrap .r-bar-toggle:nth-child(1) { border-right: 1px solid #3D434F; }
.step-control-wrap .r-bar-toggle:nth-child(2) { border-left: 1px solid #242933; border-right: 1px solid #3D434F; }
.step-control-wrap .r-bar-toggle:hover { background: #303239; }
.step-control-wrap .r-bar-toggle .open { width: 5px; height: 8px; display: inline-block; background: url(../../img/scenario-editor/btn-ico.png) no-repeat; background-position: -16px -35px; margin-top: 16px; }
.step-control-wrap .r-bar-toggle .close { width: 5px; height: 8px; display: inline-block; background: url(../../img/scenario-editor/btn-ico.png) no-repeat; background-position: -4px -35px; margin-top: 16px;  }
.step-control-wrap .btn-wrap { height: 40px; border-right: 1px solid #252222; float: left; position: relative; top: auto; right: auto; background: none; box-shadow: none; border-radius: 0; border-right: none; width: auto; display: block; }
.step-control-wrap ul { height: 40px; display: inline-block; }
.step-control-wrap ul li { float: left; display: block; height: 40px; width: 50px; }
.step-control-wrap ul li a { color: #fff; font-family: 'Dotum','Arial'; font-size: 11px; display: block; text-align: center; height: 40px; letter-spacing: 0; border-left: 1px solid #242933; border-right: 1px solid #3A404D; padding-top: 5px; transition: all 0.2s ease; }
.step-control-wrap ul li a:hover { background: #303239; }
.step-control-wrap ul li a .tool-name { display: block; }
.step-control-wrap ul li a .ico { display: inline-block; width: 14px; height: 14px;  }
.step-control-wrap ul .play a .ico { background: url(../img/scenario-editor/svg/play_ico.svg) no-repeat; }
.step-control-wrap ul .play a .tool-name { color: #0dd83d; }
.step-control-wrap ul .t-stop a .ico { background: url(../img/scenario-editor/svg/t_save_ico.svg) no-repeat; }
.step-control-wrap ul .stop a .tool-name { color: #ef3939; }
.step-control-wrap ul .stop a .ico { background: url(../img/scenario-editor/svg/stop_ico.svg) no-repeat; }
.step-control-wrap ul .pre a .ico { background: url(../img/scenario-editor/svg/post_ico.svg) no-repeat; }
.step-control-wrap ul .post a .ico { background: url(../img/scenario-editor/svg/next_ico.svg) no-repeat; }
.step-control-wrap ul .pre a .tool-name,
.step-control-wrap ul .post a .tool-name { color: #cccccc; }
.step-control-wrap .step-control-btn { float: left; } .step-control-wrap .step-layer-btn { float: right; padding: 6px 5px; }
.step-control-wrap .step-layer-btn a { display: inline-block; width: 25px; height: 25px; padding: 5px; border-radius: 3px; transition: background .25s ease; float: left; margin-left: 2px; }
.step-control-wrap .step-layer-btn a:hover { background: #404450; }
.step-control-wrap .step-layer-btn a.select { background: #0058E8; }
.view-select-wrap.scenario-reduction-view .step-control-wrap { float: right; background: none; }
.view-select-wrap.scenario-reduction-view>ul { float: left; }
.view-select-wrap.scenario-reduction-view .step-control-wrap ul { padding: 0; height: 100%; }
.view-select-wrap.scenario-reduction-view .step-control-wrap ul li  { margin-right: 0; margin-left: 0; height: 100%; }
.view-select-wrap.scenario-reduction-view .step-control-wrap ul li a { line-height: 12px; opacity: 1; height: 100%; border-right: 1px solid #2c313c; border-left: none; }
.view-select-wrap.scenario-reduction-view .step-control-wrap .r-bar-toggle { height: 35px; border-right: 1px solid #2c313c; border-left: 1px solid #2c313c; }
.view-select-wrap.scenario-reduction-view .step-control-wrap .r-bar-toggle:nth-child(2) { border-left: none; border-right: 1px solid #2c313c; }
.view-select-wrap.scenario-reduction-view .step-control-wrap .r-bar-toggle .open,
.view-select-wrap.scenario-reduction-view .step-control-wrap .r-bar-toggle .close { margin-top: 14px; }
.view-select-wrap.scenario-reduction-view .step-control-wrap .btn-wrap { height: 35px; }
.view-select-wrap.scenario-reduction-view .step-control-wrap .step-layer-btn { padding: 5px 10px; }

.view-container .editor-s-bar { background: #25282f; }
.view-container .scenario-admin-wrap { padding: 10px; height: calc(100% - 25px); position: relative; overflow: hidden; }
.view-container .scenario-admin-wrap .scenario-wrap { padding: 20px 60px; border-radius: 3px; height: 100%; display: block; transition: width 0.4s ease; overflow: hidden; overflow-y: auto; -ms-overflow-style: none; width: 100%; }
.view-container .scenario-admin-wrap .scenario-wrap::-webkit-scrollbar { display: none; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list { display: block; margin: 0 auto; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .box { position: relative; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .box a { position: absolute; z-index: 5; width: 100%; top: 0; left: 0; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .box:before,
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .box:after { content: ''; position: absolute; z-index: 4; width: 12px; height: 11px; border-radius: 5px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .box:after { bottom: -8px; left: 50%; margin-left: -6px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .box:before { top: -8px; left: 50%; margin-left: -6px; }

.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .normal-box { width: 100%; height: 35px; }

.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .normal-box>a { border-radius: 4px; display: block; height: 35px; text-align: center; line-height: 35px; background: #fff; letter-spacing: 0; font-size: 12px; text-overflow: ellipsis; padding: 0 5px; white-space: nowrap; overflow: hidden; background: #426290; color: #fff; transition: background 0.2s ease; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .normal-box>a:hover { background: #32527F; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .normal-box:hover>a { background: #32527F; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .normal-box:after { background: #426290; transition: background 0.2s ease;  }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .normal-box:before { background: #426290; transition: background 0.2s ease;  }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .normal-box:hover:after,
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .normal-box:hover:before { background: #32527F; }

.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .start-box>a { background: #0058e8; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .start-box:hover>a { background: #004FD0;  }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .start-box:after { background: #0058e8; transition: background 0.2s ease; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .start-box:hover:after { background: #004FD0; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .start-box:before { display: none; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .end-box:after { display: none; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .normal-box>a:hover {  }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .hidden-box { width: 100%; height: 20px; margin: 3px 0; overflow: hidden; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .hidden-box>a {background: #555; border-radius: 4px; display: block; height: 20px; transition: background 0.25s ease; position: relative; z-index: 2; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .hidden-box:after,
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .hidden-box:before { z-index: 3; width: 18px; height: 18px; background: #3a3a3a; border-radius: 8px; left: 50%; margin-left: -9px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .hidden-box:before { top: -10px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .hidden-box:after { bottom: -10px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .hidden-box>a:hover { background: #7F7F7F; }

.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .hidden-box>a span { font-size: 11px; font-family: 'Dotum','Arial'; color: #fff; text-align: right;  width: 100%; display: block; padding-right: 12px; line-height: 20px; opacity: 0; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .hidden-box>a:hover span { opacity: 1; }

.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .hidden-box.hidden-box-mid:after,
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .hidden-box.hidden-box-mid:before { display: none; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .hidden-box.hidden-box-top:before { display: none; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .hidden-box.hidden-box-bottom:after { display: none; }

.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap { position: relative; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.loop-header-area { height: 35px; background: #9000ff; border-radius: 4px; text-align: center; border: 1px solid #9000ff; position: relative; margin-bottom:  3px; transition: background .15s ease; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.loop-header-area:before { z-index: 3; width: 12px; height:11px; border-radius: 5px; left: 50%; margin-left: -6px; top: -10px; background: #9000ff; position: absolute; content: ''; transition: background .15s ease; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.loop-header-area:hover{ background: #8400EB; border-color: #8400EB; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.loop-header-area:hover:before { background: #8400EB;  }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.loop-header-area .loop-header { position: absolute; z-index: 4; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.loop-header-area .loop-header .subject { font-family: 'Arial'; font-size: 11px; color: #ffffff; line-height: 35px; display: inline-block; font-weight: 700; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.loop-header-area .loop-header input[type=text] { height: 18px; border-style: none; border-radius: 3px; background: #f8f8f8; margin-top: 7px; width: 45px; text-align: center; color: #9000ff; font-family: 'Arial'; font-size: 11px; letter-spacing: 0; font-weight: 700; margin-left: 10px; outline: 0; }

.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.loop-header-area .loop-header .btn-wrap { position: absolute; top: 0; right: 0; width: 32px; height: 33px; border-left: 1px solid #8400EB; z-index: 6; display: block; background: none; border-radius: 0; box-shadow: none; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.loop-header-area:hover .loop-header .btn-wrap { border-left: 1px solid #7B00DB; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.loop-header-area .loop-header .btn-wrap button { border-style: none; display: block;  height: 50%;transition: background .15s ease, border .15s ease; width: 32px; background-color: transparent; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.loop-header-area .loop-header .btn-wrap .up-btn { position: relative; border-top-right-radius: 4px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.loop-header-area .loop-header .btn-wrap .down-btn { border-top: 1px solid #8400EB; position: relative; border-bottom-right-radius: 4px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.loop-header-area:hover .loop-header .btn-wrap .down-btn { border-top: 1px solid #7B00DB; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.loop-header-area .loop-header .btn-wrap .up-btn:after { content: ''; position: absolute; z-index: 4; width: 0; height: 0; border-bottom: 3px solid #f8f8f8; border-left: 3px solid transparent; border-right: 3px solid transparent; left: 50%; margin-left: -3px; top: 6px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.loop-header-area .loop-header .btn-wrap .down-btn:after { content: ''; position: absolute; z-index: 4; width: 0; height: 0; border-top: 3px solid #f8f8f8; border-left: 3px solid transparent; border-right: 3px solid transparent; left: 50%; margin-left: -3px; top: 5px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.loop-header-area .loop-header .btn-wrap button:hover { background: #7700D5; border-color: #7B00DB; }

.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.selection-box .loop-header .subject { font-family: 'Arial'; font-size: 11px; color: #1b8294; line-height: 31px; display: inline-block; font-weight: 700; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.selection-box .loop-header input[type=text] { height: 18px; border-style: none; border-radius: 3px; background: #dcdcdc; margin-top: -4px; width: 45px; text-align: center; color: #9000ff; font-family: 'Arial'; font-size: 11px; letter-spacing: 0; font-weight: 700; margin-left: 10px; outline: 0; }

.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.selection-box .loop-header .btn-wrap { height: 30px; border-left: 1px solid #1b8294; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.selection-box:hover .loop-header .btn-wrap { border-left: 1px solid #1b8294; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.selection-box .loop-header .btn-wrap button {  height: 50%; border-left: 1px solid #1b8294; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.selection-box:hover .loop-header .btn-wrap button { border-left: 1px solid #1b8294; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.selection-box .loop-header .btn-wrap .up-btn { border-bottom: 1px solid #1b8294; position: relative; border-top-right-radius: 0px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.selection-box:hover .loop-header .btn-wrap .up-btn { border-bottom: 1px solid #1b8294; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.selection-box .loop-header .btn-wrap .down-btn { border-top: 1px solid #1b8294; position: relative; border-bottom-right-radius: 0px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.selection-box:hover .loop-header .btn-wrap .down-btn { border-top: 1px solid #1b8294; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.selection-box .loop-header .btn-wrap .up-btn:after { content: ''; position: absolute; z-index: 4; width: 0; height: 0; border-bottom: 3px solid #1b8294; border-left: 3px solid transparent; border-right: 3px solid transparent; left: 50%; margin-left: -4px; top: 6px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.selection-box .loop-header .btn-wrap .down-btn:after { content: ''; position: absolute; z-index: 4; width: 0; height: 0; border-top: 3px solid #1b8294; border-left: 3px solid transparent; border-right: 3px solid transparent; left: 50%; margin-left: -4px; top: 5px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.selection-box .loop-header .btn-wrap button:hover { background: #1b8294; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.selection-box .loop-header .btn-wrap button:hover:after { border-top-color: #fff; border-bottom-color: #fff; }

.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.loop-box { width: 100%; height: 35px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.loop-box>a { border-radius: 4px; display: block; height: 35px; text-align: center; line-height: 35px; background: #fff; letter-spacing: 0; font-size: 12px; text-overflow: ellipsis; padding: 0 5px; white-space: nowrap; overflow: hidden; background: #1bc04a; color: #fff; transition: background .2s ease; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.loop-box:hover>a { background: #00AA1F; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.loop-box:after,
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.loop-box:before { background: #1bc04a; transition: background .2s ease; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.loop-box:hover:after,
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.loop-box:hover:before { background: #00AA1F; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.loop-foot-area { height: 15px; background: #9000ff; border-radius: 4px; text-align: center; border: 1px solid #9000ff; position: relative; margin-top:  10px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.loop-foot-area:after { z-index: 4; width: 12px; height:11px; background: #f8f8f8; border-radius: 5px; left: 50%; margin-left: -6px; bottom: -9px; background: #9000ff; position: absolute; content: ''; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap .l-chain { width: 30px; padding: 16px 0 7px 15px; position: absolute; top: 0; left: -30px; height: 100%; overflow: hidden }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap .r-chain { width: 30px; padding: 16px 15px 7px 0; top: 0; right: -30px; height: 100%; position: absolute; overflow: hidden; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap .l-chain .chain { width: 800%; height: 100%; border-top-left-radius: 4px; border-bottom-left-radius: 4px; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%), linear-gradient(175deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%), linear-gradient(175deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%), linear-gradient(90deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%); animation: loop 15s linear infinite; background-position: top, left, right, bottom; background-repeat: repeat-x, repeat-y, repeat-y, repeat-x; background-size: 8px 1px, 1px 8px, 0 0, 8px 1px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap .r-chain .chain { width: 800%; height: 100%; border-top-right-radius: 4px; border-bottom-right-radius: 4px; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%), linear-gradient(175deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%), linear-gradient(175deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%), linear-gradient(90deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%); animation: loop 15s linear infinite; background-position: top, left, right, bottom; background-repeat: repeat-x, repeat-y, repeat-y, repeat-x; background-size: 8px 1px, 0 0, 1px 8px, 8px 1px; float: right; }

@keyframes loop {
    0% {background-position: 0 0, 0 0, 100% 0, 0 100%;}
  100% {background-position: 100% 0, 0 -100%, 100% 100%, -100% 100%;}
}

.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .division-box { width: 100%; height: auto; min-height: 34px; position: relative; text-align: center; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .division-box .l-box,
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .division-box .r-box { width: calc(50% - 21px); height: 34px; position: relative; overflow: hidden; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .division-box .l-box { float: left; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .division-box .r-box { float: right; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .division-box .m-box { width: 36px; height: 34px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .division-box .l-box a,
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .division-box .r-box a { background: #ff5e5d; display: block;  height: 35px; border-radius: 4px; text-align: center; line-height: 35px; font-size: 12px; color: #fff; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; transition: background .2s ease; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .division-box .l-box a:hover,
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .division-box .r-box a:hover { background: #D44C4B; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .division-box .l-box:before { position: absolute; content: ''; width: 18px; height: 18px; background: #3a3a3a; border-radius: 8px; z-index: 3; right: -9px; top: 8px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .division-box .r-box:before { position: absolute; content: ''; width: 18px; height: 18px; background: #3a3a3a; border-radius: 8px; z-index: 3; left: -9px; top: 8px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .division-box .m-box { position: relative; display: inline-block; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .division-box .m-box:after { content: ''; position: absolute; z-index: 4; width: 12px; height: 11px; border-radius: 5px; background: #ff5e5d; left: 50%;  bottom: -8px; margin-left: -6px; z-index: 4; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .division-box .m-box:before { content: ''; position: absolute; z-index: 4; width: 12px; height: 11px; border-radius: 5px; background: #ff5e5d; left: 50%;  top: -8px; margin-left: -6px; z-index: 4; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .division-box .m-box .m-box-area { background: #ff5e5d; height: 100%; border-radius: 3px; position: relative; text-align: center; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .division-box .m-box .m-box-area img { margin-top: 12px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .division-box .m-box .m-box-area:after { content: ''; position: absolute; z-index: 4; width: 11px; height: 12px; border-radius: 5px; background: #ff5e5d; right: -9px; top: 11px; z-index: 4; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .division-box .m-box .m-box-area:before { content: ''; position: absolute; z-index: 4; width: 11px; height: 12px; border-radius: 5px; background: #ff5e5d; left: -9px; top: 11px; z-index: 4; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .division-box .error:before { border: 1.5px solid #e40040; background: #f8f8f8; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .division-box .error a { color: #e40040; line-height: 30px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .division-box .error:hover:before { background: #f8f8f8; }

.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .division-box .error-message-box { position: absolute; background: #fff7f7; z-index: 8; width: 100%; border: 1px solid #e40040; text-align: center; font-family: 'Dotum','Arial'; color: #e40040; font-size: 11px; padding: 17px 15px; line-height: 17px; bottom: 100%; margin-bottom: 7px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .division-box .error-message-box> .close-btn { width: 8px; height: 8px; position: absolute; display: block; background: url(../img/scenario-editor/btn-ico.png) no-repeat; background-position: -55px -34px; top: 7px; left: 92%; transition: opacity .2s ease; opacity: 0.5; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .division-box .error-message-box> .close-btn:hover { opacity: 1; }

.view-container .scenario-admin-wrap .division-box-detail-wrap { position: relative; padding-top: 70px; }
.view-container .scenario-admin-wrap .division-box-detail-wrap .back-btn-header { position: absolute; top: 0; left: 0; height: 40px; background: #808080; width: 100%; border-top-left-radius: 2px; border-top-right-radius: 2px; padding: 11px; }
.view-container .scenario-admin-wrap .division-box-detail-wrap .back-btn-header .scenario-back-btn { color: #fff; font-size: 12px; padding: 5px; border-radius: 3px; font-weight: 300; }
.view-container .scenario-admin-wrap .division-box-detail-wrap .back-btn-header .scenario-back-btn .ico { width: 11px; height: 11px; display: inline-block; margin-top: 4px;  margin-right: 6px; background: url(../img/scenario-editor/btn-ico.png) no-repeat; background-position: -42px -57px; }

.view-container .scenario-admin-wrap .division-box-detail-wrap  .scenario-list .pre-step,
.view-container .scenario-admin-wrap .division-box-detail-wrap  .scenario-list .post-step { width: 85%; margin-left: 7.5%; opacity: 0.3; }
.view-container .scenario-admin-wrap .division-box-detail-wrap  .scenario-list .boundary-line { margin: 20px 0; height: 2px; border-top: 2px dashed #dcdcdc; }
.view-container .scenario-admin-wrap .division-box-detail-wrap  .scenario-list .division-box .l-box,
.view-container .scenario-admin-wrap .division-box-detail-wrap  .scenario-list .division-box .r-box { opacity: 0.4; transition: opacity .25s ease; }
.view-container .scenario-admin-wrap .division-box-detail-wrap  .scenario-list .division-box .l-box:hover,
.view-container .scenario-admin-wrap .division-box-detail-wrap  .scenario-list .division-box .r-box:hover,
.view-container .scenario-admin-wrap .division-box-detail-wrap  .scenario-list .division-box .select-box{ opacity: 1; }

.view-container .scenario-admin-wrap .division-box-detail-wrap .scenario-list .division-normal-box { width: 100%; height: 35px; }
.view-container .scenario-admin-wrap .division-box-detail-wrap .scenario-list .division-normal-box>a { border-radius: 4px; display: block; height: 35px; text-align: center; line-height: 35px; background: #fff; letter-spacing: 0; font-size: 12px; text-overflow: ellipsis; padding: 0 5px; white-space: nowrap; overflow: hidden; background: #ff5e5d; color: #fff; transition: background 0.2s ease; position: relative; }
.view-container .scenario-admin-wrap .division-box-detail-wrap .scenario-list .division-normal-box>a:hover { background: #D44C4B; }
.view-container .scenario-admin-wrap .division-box-detail-wrap .scenario-list .division-normal-box:hover>a { background: #D44C4B; }
.view-container .scenario-admin-wrap .division-box-detail-wrap .scenario-list .division-normal-box:after { background: #ff5e5d; transition: background 0.2s ease;  }
.view-container .scenario-admin-wrap .division-box-detail-wrap .scenario-list .division-normal-box:before { background: #ff5e5d; transition: background 0.2s ease;  }
.view-container .scenario-admin-wrap .division-box-detail-wrap .scenario-list .division-normal-box:hover:after,
.view-container .scenario-admin-wrap .division-box-detail-wrap .scenario-list .division-normal-box:hover:before { background: #D44C4B; }
.view-container .scenario-admin-wrap .division-box-detail-wrap .scenario-list .division-l-box>a:after { position: absolute; content: ''; width: 0; height: 0; border-right: 5px solid #f8f8f8; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; left: 5px; top: 13px; }
.view-container .scenario-admin-wrap .division-box-detail-wrap .scenario-list .division-r-box>a:after { position: absolute; content: ''; width: 0; height: 0; border-left: 5px solid #f8f8f8; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; right: 5px; top: 13px; }
.view-container .scenario-admin-wrap .division-box-detail-wrap .scenario-list .error>a:after { border-right-color: #ff5e5d; border-left-color: #ff5e5d; }

.view-container.wide-scenario-view #block_area { padding-top: 0; }
.view-container.wide-scenario-view #block_area #tree { padding-left: 0; -ms-display: block; display: block; flex: none; width: 100%; }
.view-container.wide-scenario-view #block_area .scenario-admin-wrap {  }

.view-container .target-web-area { display: none; }
.view-container.web-on .target-web-area { display: block; }
.view-container.web-on .target-setting-info { display: block; }
.view-container .target-web-area .target-web { width: 100%; height: 100%; padding-top: 32px; overflow-x: auto; }
.view-container .target-web-area .target-web iframe { width: 100%; height: 100%; border: none; min-width: 1200px; }

.view-container .close-r-bar { width: 150px; }
.view-container .close-r-bar .step-control-wrap ul li a { padding-top: 15px; }
.view-container .close-r-bar .step-control-wrap ul li a .tool-name { display: none; }

.view-container .scenario-admin-wrap .detail-set-wrap { width: 100%; position: absolute;  right: -100%; top: 0; height: calc(100% - 40px); transition: right .45s ease; z-index: 10; }

.view-container .selected-step-wrap .detail-set-wrap { right: 0; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set { height: 100%; width: 100%; float: left; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-title { height: 40px; background: #0058E8; display: block; padding: 0 10px; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-title .ico { display: inline-block; width: 15px; height: 15px; background: url(../img/scenario-editor/btn-ico.png); background-position: -68px -21px; margin-top: 12px; margin-right: 1%; animation: rotate 2.5s infinite linear; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-title .title { font-size: 16px; color: #ffffff; font-weight: 600; letter-spacing: 0; line-height: 36px; width: 90%; display: inline-block; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set { width: 100%; height: 100%; background: #25282F; padding: 15px 10px; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box { width: 100%; margin-bottom: 20px; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .subject { font-size: 12px; font-family: 'Arial'; color: #f8f8f8; letter-spacing: 0; font-weight: bold; display: block; margin-bottom: 12px; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .event-select-btn { width: 100%; height: 35px; border: 1px solid #6f6f6f; display: block; color: #ffffff; text-align: center; letter-spacing: 0; font-weight: 300; line-height: 31px; position: relative; border-radius: 3px; transition: background .2s ease;  }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .event-select-btn:before { position: absolute; content: ''; width:  14px; height: 10px; background: url(../img/scenario-editor/btn-ico.png); background-position: -4px -44px; left: 8px; top: 11px; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .event-select-btn:hover { background: #0058E8; border-color: #0058E8;  }

.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .event-txt-input { width: 100%; height: 35px; background: #f8f8f8; border-radius: 3px; border-style: none; box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2) inset; -webkit-box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2) inset; font-family: 'Arial'; font-size: 12px; color: #585858; transition: background .2s ease; outline: 0; padding: 0 10px; letter-spacing: 0; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .event-txt-input:focus { background: #fff; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .event-selector-input { width: calc(100% - 85px); height: 35px; background: #fffacb; border-radius: 3px; border-style: none; box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2) inset; -webkit-box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2) inset; font-family: 'Arial'; font-size: 12px; color: #585858; outline: 0; padding: 0 10px; letter-spacing: 0;  }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .event-selector-input:focus { background: #fff; transition: background .2s ease; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .selector-btn { border: 1px solid #6f6f6f; color: #fff; font-family: 'Dotum','Arial'; font-size: 11px; color: #fff; height: 35px; line-height: 33px; display: inline-block; padding-right: 10px; border-radius: 3px; position: relative; padding-left: 21px; transition: background .2s ease; float: right; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .selector-btn:before { content: ''; position: absolute; width: 11px; height: 11px; background: url(../img/scenario-editor/btn-ico.png); background-position: -20px -44px; left: 6px; top: 11px; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .selector-btn:hover { background: #ffa300; border-color: #ffa300; }
.view-container .scenario-admin-wrap .detail-set-wrap .btn-wrap { display: block; background: none; box-shadow: none; border-radius: 0; width: 100%; position: relative; right: auto; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .row { margin-bottom: 15px; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .row .float { float: left; width: calc(50% - 8px); margin-right: 15px; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .row .float.right { margin-right: 0; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .btn-area { text-align: right; clear: both; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .btn-area a { display: inline-block; margin-left: 5px; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .btn-area a img { width: 22px; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .btn-area a:hover { opacity: .7; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .replace-content { position: relative; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .replace-content .event-txt-input { padding-right: 80px; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .replace-btn { position: absolute; top: 0; right: 0; height: 35px; line-height: 33px; font-size: 12px; border: 0; border-radius: 0 2px 2px 0; padding: 0 10px; background: #0058e8; color: #fff; transition: background .25s;}
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .replace-btn:hover { background: #004cc7; }

@keyframes rotate {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

/* 웹뷰 개체 이벤트 정보 보기 */
.view-container .target-web-area .target-web { position: relative; }
.target-setting-info { background: #2c313c; position: absolute; width: 100%; top: 0; left: 0; padding: 10px 19px 3px; z-index: 1003; display: none; }
.target-setting-info .info-section { float: left; margin-right: 20px; margin-bottom: 7px; }
.target-setting-info .info-section .info-name { color: #fff; font-size: 1.1rem; font-family: 'Arial','Dotum','돋움'; letter-spacing: 0; font-weight: normal; opacity: .4; float: left; vertical-align: top; cursor: default; line-height: 18px; margin-right: 8px; }
.target-setting-info .info-section .cont { float: left; vertical-align: top; font-family: 'Arial','Dotum','돋움'; font-size: 1.1rem; letter-spacing: 0; color: #D4D4D4; cursor: default; }
.target-setting-info .info-section .cont.label { background: #1A1719; padding: 3px 10px; border-radius: 20px; min-height: 19px; }
.target-setting-info .info-section .cont.text { padding: 2px 0 0; border-bottom: 1px solid #d4d4d4; min-height: 19px; }
.target-setting-info.input-text .info-section .cont.label { background: #0058e8; }
.target-setting-info.click .info-section .cont.label { background: #1bc04a; }
.target-setting-info .info-section .cont.option-list .option { display: inline-block; background: #404450; padding: 3px 10px; border-radius: 20px; min-height: 19px; }

/* 셀렉트커스텀 */
.selectbox { position: relative; border-style: none;  z-index: 1; display: inline-block; border: 1px solid #6f6f6f; height: 35px; width: 100%; border-radius: 3px; cursor: pointer; transition: border-color .25s ease; }
.selectbox:hover { border-color: #dcdcdc; }
.selectbox:before { content: "";  position: absolute; top: 15px; right: 15px; width: 0; height: 0; margin-top: -1px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid #6f6f6f; transition: border-top 0.25s ease; }
.selectbox:hover:before { border-top: 6px solid #dcdcdc; }
.selectbox label { position: absolute; top: 0px; left: 5px; color: #FFFFFF;  z-index: -1;  /* IE8에서 label이 위치한 곳이 클릭되지 않는 것 해결 */ font-size: 12px; line-height: 32px; text-align: left; width: 80%; padding-left: 10px; }
.selectbox select { width: 100%; line-height: normal;  /* line-height 초기화 */ font-family: inherit; border: 0; opacity: 0;  /* 숨기기 */  filter:alpha(opacity=0);  /* IE8 숨기기 */ -webkit-appearance: none; /* 네이티브 외형 감추기 */  -moz-appearance: none; appearance: none; margin-left: 0; height: 35px; cursor: pointer; }
.selectbox select option { font-size: 12px; }

.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .check-wrap .check-box { display: inline-block; margin-right: 10px; margin-bottom: 5px; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .check-wrap input[type=radio],
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .check-wrap input[type=checkbox] { display: none; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .check-wrap input[type=radio] + label,
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .check-wrap input[type=checkbox] + label { display: inline-block; cursor: pointer; position: relative; padding-left: 25px; font-size: 12px; font-weight: 300; color: #acacac; height: 14px;  line-height: 16px; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .check-wrap input[type=radio]+ label:before,
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .check-wrap input[type=checkbox]+ label:before{ content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 10px; position: absolute;  background: url(../img/scenario-editor/detail-set-radio.png) no-repeat; background-position: 0 0; left: 5px; top: 2px; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .check-wrap input[type=radio]:checked + label,
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .check-wrap input[type=checkbox]:checked + label { color: #FFFFFF; font-weight: 500;  }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .check-wrap input[type=radio]:checked + label:before,
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .check-wrap input[type=checkbox]:checked + label:before { background-position: 0 -14px; } 

.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .btn-wrap { height: 80px; padding-top: 40px; top: 0; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .btn-wrap a { color: #fff; font-size: 13px; font-weight: 300; border: 1px solid #6f6f6f; height: 40px; display: block; text-align: center; line-height: 34px; width: 49%; border-radius: 3px; transition: background .2s ease, border-color .2s ease, font-weight .2s ease;}
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .btn-wrap a:first-child { float: left; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .btn-wrap a:last-child { float: right; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .btn-wrap a:hover { background: #0058E8; border-color: #0058E8; }

/* 웹뷰 하단 메뉴 */
.view-container .target-web-area .target-web .target-menu { height: 40px; background: #3a3a3a; position: fixed; width: 100%; left: 0;  bottom: 0; }
.view-container .target-web-area .target-web .target-menu .back-btn { height: 100%; display: inline-block; background: none; border: none; font-size: 12px; color: #fff; margin: 0;  border-right: 1px solid #3D3D3D; border-radius: 0; font-weight: 100; padding: 0 20px 0 15px; width: auto; }
.view-container .target-web-area .target-web .target-menu .select-btn { height: 100%; display: inline-block; background: none; border: none; font-size: 12px; color: #fff; margin: 0;  border-left: 1px solid #3D3D3D; border-radius: 0; font-weight: 100; padding: 0 30px 0 25px; width: auto; float: right; background: #1850E9; font-size: 13px; outline: 0; }
.view-container .target-web-area .target-web .target-menu .select-btn:hover { background: #0C44DD; }
.view-container .target-web-area .target-web .target-menu .select-btn img { width: 20px; margin: 0px 3px 0 0; }
.view-container .target-web-area .target-web .target-menu .back-btn:after { display: none; }
.view-container .target-web-area .target-web .target-menu .back-btn:hover { background: #363134; }
.view-container .target-web-area .target-web .target-menu .back-btn img { width: 15px; margin: 2px 3px 0 0; }
.view-container .target-web-area .target-web .unit-mask { background: #0099ff; position: absolute; opacity: 0.5; z-index: 998; }

.view-container .target-web-area .target-web .unit-contact-menu { width:  150px; position: absolute; background: #25262C; min-height: 130px; border-radius: 4px; box-shadow: 1px 1px 7px 0px rgba(0, 0, 0, 0.3); z-index: 999; }
.view-container .target-web-area .target-web .unit-contact-menu ul { border-radius: 4px; overflow: hidden; }
.view-container .target-web-area .target-web .unit-contact-menu ul li { display: block; width: 100%; height: 32px; border-bottom: 1px solid #121010; border-top: 1px solid #3f3f3f; transition: background .15s ease;  }
.view-container .target-web-area .target-web .unit-contact-menu ul li:hover { background: #494949;  }
.view-container .target-web-area .target-web .unit-contact-menu ul li:first-child { border-top: none; }
.view-container .target-web-area .target-web .unit-contact-menu ul li:last-child { border-bottom: none; }
.view-container .target-web-area .target-web .unit-contact-menu ul li a { color: #f5f5f5; font-family: 'Dotum','Arial'; font-size: 11px; padding-left: 10px; padding-top: 10px; display: block; height: 30px; line-height: 11px; }

.view-container .target-web-area .target-web .select-unit-content { position: absolute; background: rgba(0,88,232,0.9); border-radius: 4px; box-shadow: 1px 1px 7px 0px rgba(0, 0, 0, 0.5); z-index: 999; padding: 5px 10px; color: #fff; letter-spacing: 0; border: 1px solid #004FD0; font-size: 1.2rem; font-weight: normal; font-family: 'Arial,Malgun gothic'; display: block; max-width: 800px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 콘솔 */
.view-container .console-area { position: fixed; z-index: 1004; width: 100%; top: 76px; background: #25282f; height: calc(100% - 77px); padding: 15px 20px; }
.view-container .console-area p { font-size: 1.2rem; letter-spacing: 0; color: #BBBBBB; font-family: 'Arial'; margin-bottom: 3px; }

/* 리절트 */
.view-container .result-area { position: fixed; z-index: 1004; width: 100%; top: 76px; background: #f8f8f8; height: calc(100% - 77px); padding: 15px 20px; }
.view-container .result-area table { width: 100%; border: 1px solid #ddd; font-size: 13px; letter-spacing: 0; }
.view-container .result-area .table-resizable.resizing, .table-resizable th:before { cursor: col-resize; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.view-container .result-area .table-resizable th { position: relative; border-bottom: 2px solid #ddd; padding: 10px; font-weight: bold; border-right: 1px solid #ddd; font-size: 13px; }
.view-container .result-area .table-resizable th::before { content: ""; display: block; height: 100%; position: absolute; right: 0; top: 0; width: 1em; }
.view-container .result-area .table-resizable th:last-of-type::before { display: none; }
.view-container .result-area .table-resizable td { max-width: 0;  overflow: hidden; border-bottom: 1px solid #ddd; padding: 5px 10px; border-right: 1px solid #ddd; }
.view-container .result-area table tbody tr:nth-child(2n-1) { background: #F0F0F0; }

/* event select pop */
.pop-up-layer .event-select,
.pop-up-layer .cycle-set { width: 700px; margin-left: -350px; top: 300px; padding: 20px 20px 70px; }

.pop-up-layer .event-select .event-select-area { overflow: hidden; }
.pop-up-layer .event-select .event-select-area .event-search-area { float: left; width: 50%; height: 350px; }
.pop-up-layer .event-select .event-select-area .event-detail-intro-area { float: right; width: 50%; height: 350px; border: 1px solid #dee3eb; background: #f1f4f8;   }

.pop-up-layer .event-select .event-select-area .event-search-area .search-box-area { height: 45px; width: 100%; background: #F1F4F8; border: 1px solid #dee3eb; border-right: none; padding: 8px;  }
.pop-up-layer .event-select .event-select-area .event-search-area .search-box-area .search-box { width: 100%; height: 100%; position: relative; }
.pop-up-layer .event-select .event-select-area .event-search-area .search-box-area .search-box input[type=text] { width: 100%; height: 100%; border: 1px solid #dee3eb; border-radius: 3px; font-size: 12px; line-height: 25px; outline: 0; padding-left: 25px; font-weight: 300; }
.pop-up-layer .event-select .event-select-area .event-search-area .search-box-area .search-box .search-ico { width: 11px; height: 11px; display: inline-block; background: url(../img/scenario-editor/btn-ico.png) no-repeat; background-position: -35px -44px; position: absolute; top: 8px; left: 8px; }

.pop-up-layer .event-select .event-select-area .event-search-area .event-list { width: 100%; max-height: 295px; overflow-y: auto; margin-top: 10px; }
.pop-up-layer .event-select .event-select-area .event-search-area .event-list>ul { font-size: 14px; letter-spacing: 0;  }
.pop-up-layer .event-select .event-select-area .event-search-area .event-list>ul .l-category { display: block; }
.pop-up-layer .event-select .event-select-area .event-search-area .event-list>ul .l-category>a { height: 28px; display: block; background: #1e53a9; padding-left: 25px; color: #fff; line-height: 28px; font-weight: 300; transition: background .2s ease; position: relative; font-family: 'Arial'; font-size: 13px; }
.pop-up-layer .event-select .event-select-area .event-search-area .event-list>ul .l-category>a:hover { background: #154A9F; }
.pop-up-layer .event-select .event-select-area .event-search-area .event-list>ul .l-category>a:after { width: 10px; height: 10px; position: absolute; content:''; background: url(../img/scenario-editor/btn-ico.png) no-repeat; background-position: -50px -44px; top: 8px; right: 20px; }
.pop-up-layer .event-select .event-select-area .event-search-area .event-list>ul .open>a:after {  background-position: -50px -44px; }
.pop-up-layer .event-select .event-select-area .event-search-area .event-list>ul .close>a:after {  background-position: -65px -44px; }
.pop-up-layer .event-select .event-select-area .event-search-area .event-list>ul .close>ul { display: none; }
.pop-up-layer .event-select .event-select-area .event-search-area .event-list>ul .l-category>ul>.s-category { height: 28px; display: block; }
.pop-up-layer .event-select .event-select-area .event-search-area .event-list>ul .l-category>ul>.s-category:nth-child(2n-1) { background: #f8f8f8; }
.pop-up-layer .event-select .event-select-area .event-search-area .event-list>ul .l-category>ul>.s-category>a { display: block; height: 28px; line-height: 28px; font-weight: 300; padding-left: 35px; transition: background .2s ease; position: relative; color: #585858; font-family: 'Arial'; font-size: 12px; }
.pop-up-layer .event-select .event-select-area .event-search-area .event-list>ul .l-category>ul>.s-category>a:hover { background: #B2CDF8; }
.pop-up-layer .event-select .event-select-area .event-search-area .event-list>ul .l-category>ul>.select>a { background: #cadeff; color: #1e53a9; font-weight: bold; }
.pop-up-layer .event-select .event-select-area .event-search-area .event-list>ul .l-category>ul>.s-category>a:before { width: 2px; height: 2px; background: #acacac; position: absolute; content: ''; left: 26px; top: 13px; }
.pop-up-layer .event-select .event-select-area .event-search-area .event-list>ul .l-category>ul>.s-category>a .star-btn { display: inline-block; width: 16px; height: 16px; position: absolute; right: 17px; left: auto; top: 0; }
.pop-up-layer .event-select .btn-area .default-btn.bttn-fill { background: #0058E8; border-color: #004FD0; }
.pop-up-layer .pop-up .pop-close-btn { top: 20px; right: 20px; }
.pop-up-layer .pop-up .pop-up-title { margin-bottom: 10px; }
.pop-up-layer .event-select .btn-area { right: 20px; bottom: 20px; }

/*라디오박스 커스텀 (수집주기) */
input[type=radio],
input[type=checkbox] { display: none; }
input[type=radio] + label,
input[type=checkbox] + label { display: inline-block; cursor: pointer; position: relative; padding-left: 30px; font-size: 15px; font-weight: 400; color: #585858; height: 14px;  line-height: 18px; }
input[type=radio]+ label:before,
input[type=checkbox]+ label:before{ content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 10px; position: absolute;  background: url(../img/scenario-editor/radio.png) no-repeat; background-position: 0 0; left: 5px; top: 2px; }
input[type=radio]:checked + label,
input[type=checkbox]:checked + label { color: #24a3b9; font-weight: 500;  }
input[type=radio]:checked + label:before,
input[type=checkbox]:checked + label:before { background-position: 0 -14px; } 

/* 즐겨찾기 버튼 */
.star-btn input[type=checkbox] { display: none; }
.star-btn input[type=checkbox] + label { display: inline-block; cursor: pointer; position: relative; width: 16px; height: 16px; }
.star-btn input[type=checkbox]+ label:before { content: ""; display: inline-block; width: 16px; height: 16px; position: absolute;  background: url(../img/common/tool_ico.png) no-repeat; background-position: -107px -5px; left: 0;  top: -1px; }
.star-btn input[type=checkbox]:checked + label:before { background-position: -107px -25px; } 

.pop-up-layer .event-select .event-select-area .event-detail-intro-area { padding: 20px; text-align: center; overflow-y: auto;  }
.pop-up-layer .event-select .event-select-area .event-detail-intro-area .event-name { display: block; width: 100%; font-size: 20px; font-weight: bold; text-align: center; letter-spacing: 0; margin-bottom: 15px; }
.pop-up-layer .event-select .event-select-area .event-detail-intro-area .event-thumbnail { width: 250px; height: 250px; background: #dcdcdc; display: inline-block; }
.pop-up-layer .event-select .event-select-area .event-detail-intro-area .event-thumbnail img { width: 100%; height: 100%; }
.pop-up-layer .event-select .event-select-area .event-detail-intro-area .explanation { font-size: 12.5px; letter-spacing: 0; margin-top: 10px; font-weight: 300; }

.pop-up-layer .cycle-set .cycle-set-area { overflow: hidden; }
.pop-up-layer .cycle-set .cycle-set-area p { font-size: 14px; font-weight: 300; }
.pop-up-layer .cycle-set .cycle-set-area .activation { margin-top: 15px; overflow: hidden; margin-bottom: 15px; }
.pop-up-layer .cycle-set .cycle-set-area .activation .title,
.pop-up-layer .cycle-set .cycle-set-area .extraction .title { font-size: 16px; font-weight: 500; display: inline-block; float: left; width: 80px; }
.pop-up-layer .cycle-set .cycle-set-area .activation .activation-select { float: left; }
.pop-up-layer .cycle-set .cycle-set-area .activation .activation-select li { display: inline-block; margin-right: 20px; }

.pop-up-layer .cycle-set .cycle-set-area .extraction { overflow: hidden; }
.pop-up-layer .cycle-set .cycle-set-area .extraction .extraction-select { float: left; width: calc(100% - 80px); }
.pop-up-layer .cycle-set .cycle-set-area .extraction .extraction-select>li { float: left; display: inline-block; width: 80px; }
.pop-up-layer .cycle-set .cycle-set-area .extraction .extraction-select>li>a { font-size: 14px; display: block; height: 35px; text-align:  center; line-height: 33px; letter-spacing: 0; padding: 0 20px; border: 1px solid #dcdcdc; border-right: none; }
.pop-up-layer .cycle-set .cycle-set-area .extraction .extraction-select>li:last-child>a { border-right: 1px solid #dcdcdc; }
.pop-up-layer .cycle-set .cycle-set-area .extraction .extraction-select>.select>a { background: #24a3b9; border-color: #24a3b9; color: #fff; font-weight: 400; }

@media all and (max-width: 740px)
{
	.pop-up-layer .event-select,
	.pop-up-layer .cycle-set { width: calc(100% - 40px); margin-left: 0; left: 20px; }
	.pop-up-layer .cycle-set .cycle-set-area .extraction .extraction-select>li { width: 33.33%; }
	.pop-up-layer .cycle-set .cycle-set-area .extraction .extraction-select>li:nth-child(1) a,
	.pop-up-layer .cycle-set .cycle-set-area .extraction .extraction-select>li:nth-child(2) a,
	.pop-up-layer .cycle-set .cycle-set-area .extraction .extraction-select>li:nth-child(3) a { border-bottom: none; }
	.pop-up-layer .cycle-set .cycle-set-area .extraction .extraction-select>li:nth-child(3) a { border-right: 1px solid #dcdcdc; }
	.pop-up-layer .cycle-set .cycle-set-area .extraction .extraction-select>li:nth-child(4),
	.pop-up-layer .cycle-set .cycle-set-area .extraction .extraction-select>li:nth-child(5) { width: 50%; }
}
@media all and (max-width: 499px)
{
	.pop-up-layer .cycle-set .cycle-set-area .extraction .extraction-select>li { width: 50%; }
	.pop-up-layer .cycle-set .cycle-set-area .extraction .extraction-select>li a { border-right: 1px solid #dcdcdc; }
	.pop-up-layer .cycle-set .cycle-set-area .extraction .extraction-select>li:nth-child(2n-1) a { border-right: none; }
	.pop-up-layer .cycle-set .cycle-set-area .extraction .extraction-select>li:nth-child(3) a { border-right: none; }
	.pop-up-layer .cycle-set .cycle-set-area .extraction .extraction-select>li:last-child a { border-right: 1px solid #dcdcdc; }
}
.pop-up-layer .cycle-set .cycle-set-area .detail-set { margin-top: 15px; display: block; padding-left: 80px;  }
.pop-up-layer .cycle-set .cycle-set-area .detail-set .date-select { width: 350px; margin-bottom: 10px; }
.pop-up-layer .cycle-set .cycle-set-area .detail-set .date-select .date-selecter { width: 150px; height: 35px; position: relative; display: inline-block; margin-right: 10px; }
.pop-up-layer .cycle-set .cycle-set-area .detail-set .date-select .date-selecter input[type=text] { height: 35px; width: 100%;  border: none; background: #f8f8f8; border-radius: 3px; padding: 0 10px; padding-right: 35px; outline: 0; font-size: 13px; letter-spacing: 0; }
.pop-up-layer .cycle-set .cycle-set-area .detail-set .date-select .date-selecter input[type=text]:focus { border-radius: 0; border-bottom: 1px solid #dcdcdc; background: #fff; }
.pop-up-layer .cycle-set .cycle-set-area .detail-set .date-select .date-selecter .cal-btn { width: 20px; height: 21px; position: absolute; top: 7px; right: 8px; }
.pop-up-layer .cycle-set .cycle-set-area .detail-set .date-select .date-selecter .cal-btn .ico { display: inline-block; width: 18px; height: 19px; background: url(../img/scenario-editor/btn-ico.png) no-repeat; background-position: -4px -57px; }
.pop-up-layer .cycle-set .cycle-set-area .detail-set .date-select .set-txt { font-size: 14px; font-weight: 300; letter-spacing: 0; line-height: 35px; }

.pop-up-layer .cycle-set .cycle-set-area .detail-set .cycle { margin-bottom: 10px; }
.pop-up-layer .cycle-set .cycle-set-area .detail-set .cycle input[type=text] { height: 35px; width: 50px;  border: none; background: #f8f8f8; border-radius: 3px; padding: 0 10px; outline: 0; font-size: 13px; letter-spacing: 0; text-align: center; margin-right: 10px; }
.pop-up-layer .cycle-set .cycle-set-area .detail-set .cycle input[type=text]:focus { border-radius: 0; border-bottom: 1px solid #dcdcdc; background: #fff; }
.pop-up-layer .cycle-set .cycle-set-area .detail-set .cycle .set-txt { font-size: 14px; font-weight: 300; letter-spacing: 0; line-height: 35px; }

.pop-up-layer .cycle-set .cycle-set-area .detail-set .repetition-check { height: 35px; margin-bottom: 10px; }

.pop-up-layer .cycle-set .cycle-set-area .extraction .day-select { width: 100%; padding-left: 80px; margin-top: 10px; }

.pop-up-layer .sc-info-modify { margin-top: -258px; top: 50%; }


/* 시나리오 오버롤 */

.pop-up-layer .scenario-overall { width: 900px; margin-left: -450px; top: 5%; margin-top: 0; height: 90%; }
.pop-up-layer .scenario-overall  .scenario-wrap { padding: 20px 30px; background: #f8f8f8; border-radius: 3px; box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.1) inset; -webkit-box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.1) inset; height: 100%; display: block; transition: height 0.3s ease; overflow: hidden; overflow-y: auto; -ms-overflow-style: none; text-align: center; }
.pop-up-layer .scenario-overall .scenario-wrap::-webkit-scrollbar { display: none; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list { display: inline-block; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .box { position: relative; width: 220px; margin-bottom: 4px; cursor: default; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .box a { width: 100%; position: relative; overflow: hidden; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .box:after { content: ''; position: absolute; z-index: 7; width: 12px; height: 11px; border-radius: 5px; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .box a:before { content: ''; position: absolute; z-index: 6; width: 20px; height: 20px; background: #f8f8f8; top: -12px; border-radius: 8px; left: 50%; margin-left: -10px; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .box:after { bottom: -8px; left: 50%; margin-left: -6px; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .normal-box {  height: 35px; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .normal-box>a { border-radius: 4px; display: block; height: 35px; text-align: center; line-height: 35px; background: #fff; letter-spacing: 0; font-size: 12px; text-overflow: ellipsis; padding: 0 5px; white-space: nowrap; overflow: hidden; background: #426290; color: #fff; transition: background 0.2s ease; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .normal-box:after { background: #426290; transition: background 0.2s ease;  }

.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .start-box>a { background: #0088e8; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .start-box:after { background: #0088e8; transition: background 0.2s ease; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .start-box:before { display: none; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .start-box>a:before { display: none; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .end-box:after { display: none; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .loop-wrap { position: relative; margin-bottom: 5px; max-width: 500px; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .loop-wrap>ul>.loop-header-area { height: 35px; background: #9000ff; border-radius: 4px; text-align: center; position: relative; margin-bottom:  10px; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .loop-wrap>ul>.loop-header-area .loop-header { position: relative; z-index: 4; width: 100%; height: 100%; overflow: hidden; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .loop-wrap>ul>.loop-header-area .loop-header:before { content: ''; position: absolute; z-index: 6; width: 20px; height: 20px; background: #f8f8f8; top: -12px; border-radius: 8px; left: 50%; margin-left: -10px;  }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .loop-wrap>ul>.loop-header-area .loop-header .subject,
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .loop-wrap>ul>.loop-header-area .loop-header .count { font-family: 'Arial'; font-size: 12px; color: #ffffff; line-height: 35px; display: inline-block; font-weight: 700; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .loop-wrap>ul>.loop-header-area .loop-header .ico { display: inline-block; width: 16px; height: 12px; background: url(../img/scenario-editor/btn-ico.png)no-repeat; background-position: -57px -57px; margin: 11px 2px; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .loop-wrap>ul>.loop-header-area .loop-header input[type=text] { height: 18px; border-style: none; border-radius: 3px; background: #f8f8f8; margin-top: 7px; width: 45px; text-align: center; color: #9000ff; font-family: 'Arial'; font-size: 11px; letter-spacing: 0; font-weight: 700; margin-left: 50px; outline: 0; }

.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .loop-wrap { display: inline-block; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .loop-wrap>ul>.loop-box { width: 100%; height: 35px; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .loop-wrap>ul>.loop-box a { border-radius: 4px; display: block; height: 35px; text-align: center; line-height: 35px; background: #fff; letter-spacing: 0; font-size: 12px; text-overflow: ellipsis; padding: 0 5px; white-space: nowrap; overflow: hidden; background: #1bc04a; color: #fff; transition: background .2s ease; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .loop-wrap>ul>.loop-box:after { background: #1bc04a; transition: background .2s ease; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .loop-wrap>ul>.loop-foot-area { height: 15px; background: #9000ff; border-radius: 4px; text-align: center; border: 1px solid #9000ff; position: relative; margin-top:  10px; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .loop-wrap>ul>.loop-foot-area:after { z-index: 7; width: 12px; height:11px; background: #f8f8f8; border-radius: 5px; left: 50%; margin-left: -6px; bottom: -9px; background: #9000ff; position: absolute; content: ''; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .loop-wrap .l-chain { width: 30px; padding: 16px 0 7px 15px; position: absolute; top: 0; left: -30px; height: 100%; overflow: hidden }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .loop-wrap .r-chain { width: 30px; padding: 16px 15px 7px 0; top: 0; right: -30px; height: 100%; position: absolute; overflow: hidden; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .loop-wrap .l-chain .chain { width: 800%; height: 100%; border-top-left-radius: 4px; border-bottom-left-radius: 4px; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%), linear-gradient(175deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%), linear-gradient(175deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%), linear-gradient(90deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%); animation: loop 15s linear infinite; background-position: top, left, right, bottom; background-repeat: repeat-x, repeat-y, repeat-y, repeat-x; background-size: 8px 1px, 1px 8px, 0 0, 8px 1px; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .loop-wrap .r-chain .chain { width: 800%; height: 100%; border-top-right-radius: 4px; border-bottom-right-radius: 4px; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%), linear-gradient(175deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%), linear-gradient(175deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%), linear-gradient(90deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%); animation: loop 15s linear infinite; background-position: top, left, right, bottom; background-repeat: repeat-x, repeat-y, repeat-y, repeat-x; background-size: 8px 1px, 0 0, 1px 8px, 8px 1px; float: right; }

@keyframes loop {
    0% {background-position: 0 0, 0 0, 100% 0, 0 100%;}
  100% {background-position: 100% 0, 0 -100%, 100% 100%, -100% 100%;}
}
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .paging-wrap { position: relative; margin-bottom: 5px; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .paging-wrap>ul>.paging-header-area { height: 35px; background: #00C0B7; border-radius: 4px; text-align: center; position: relative; margin-bottom:  100px; overflow: hidden; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .paging-wrap>ul>.paging-header-area:before { content: ''; position: absolute; z-index: 6; width: 20px; height: 20px; background: #f8f8f8; top: -12px; border-radius: 8px; left: 50%; margin-left: -10px;  }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .paging-wrap>ul>.paging-header-area .paging-header { position: absolute; z-index: 4; width: 100%; height: 100%; top: 0; left: 0; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .paging-wrap>ul>.paging-header-area .paging-header .subject { font-family: 'Arial'; font-size: 12px; color: #ffffff; line-height: 35px; display: inline-block; font-weight: 700; letter-spacing: 0; }

.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .paging-wrap>ul>.paging-box { width: 100%; height: 35px; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .paging-wrap>ul>.paging-box>a { border-radius: 4px; display: block; height: 35px; text-align: center; line-height: 35px; background: #fff; letter-spacing: 0; font-size: 12px; text-overflow: ellipsis; padding: 0 5px; white-space: nowrap; overflow: hidden; background: #007b7c; color: #fff; transition: background .2s ease; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .paging-wrap>ul>.paging-box:hover>a { background: #207A72; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .paging-wrap>ul>.paging-box:after,
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .paging-wrap>ul>.paging-box:before { background: #007b7c; transition: background .2s ease; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .paging-wrap>ul>.paging-box:hover:after,
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .paging-wrap>ul>.paging-box:hover:before { background: #207A72; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .paging-wrap>ul>.paging-foot-area { height: 15px; background: #00C0B7; border-radius: 4px; text-align: center; border: 1px solid #00C0B7; position: relative; margin-top:  10px; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .paging-wrap>ul>.paging-foot-area:after { z-index: 7; width: 12px; height:11px; border-radius: 5px; left: 50%; margin-left: -6px; bottom: -9px; background: #00C0B7; position: absolute; content: ''; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .paging-wrap .l-chain { width: 30px; padding: 16px 0 7px 15px; position: absolute; top: 0; left: -30px; height: 100%; overflow: hidden }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .paging-wrap .r-chain { width: 30px; padding: 16px 15px 7px 0; top: 0; right: -30px; height: 100%; position: absolute; overflow: hidden; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .paging-wrap .l-chain .chain { width: 800%; height: 100%; border-top-left-radius: 4px; border-bottom-left-radius: 4px; background-image: -webkit-linear-gradient(left, rgba(0, 192, 183, 1) 50%, rgba(0, 0, 0, 0.0) 50%), -webkit-linear-gradient(85deg, rgba(0, 192, 183, 0.0) 50%, rgba(0, 192, 183, 1) 50%), -webkit-linear-gradient(85deg, rgba(0, 192, 183, 1) 50%, rgba(0, 0, 0, 0.0) 50%), -webkit-linear-gradient(left, rgba(0, 192, 183, 1) 50%, rgba(0, 0, 0, 0.0) 50%); background-image: -o-linear-gradient(left, rgba(0, 192, 183, 1) 50%, rgba(0, 0, 0, 0.0) 50%), -o-linear-gradient(85deg, rgba(0, 192, 183, 0.0) 50%, rgba(0, 192, 183, 1) 50%), -o-linear-gradient(85deg, rgba(0, 192, 183, 1) 50%, rgba(0, 0, 0, 0.0) 50%), -o-linear-gradient(left, rgba(0, 192, 183, 1) 50%, rgba(0, 0, 0, 0.0) 50%); background-image: linear-gradient(to right, rgba(0, 192, 183, 1) 50%, rgba(0, 0, 0, 0.0) 50%), linear-gradient(175deg, rgba(0, 192, 183, 0.0) 50%, rgba(0, 192, 183, 1) 50%), linear-gradient(175deg, rgba(0, 192, 183, 1) 50%, rgba(0, 0, 0, 0.0) 50%), linear-gradient(to right, rgba(0, 192, 183, 1) 50%, rgba(0, 0, 0, 0.0) 50%); animation: loop 15s linear infinite; background-position: top, left, right, bottom; background-repeat: repeat-x, repeat-y, repeat-y, repeat-x; background-size: 8px 1px, 1px 8px, 0 0, 8px 1px; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .paging-wrap .r-chain .chain { width: 800%; height: 100%; border-top-right-radius: 4px; border-bottom-right-radius: 4px; background-image: linear-gradient(90deg, rgba(0, 192, 183, 1) 50%, rgba(0, 0, 0, 0.0) 50%), linear-gradient(175deg, rgba(0, 192, 183, 1) 50%, rgba(0, 0, 0, 0.0) 50%), linear-gradient(175deg, rgba(0, 192, 183, 1) 50%, rgba(0, 0, 0, 0.0) 50%), linear-gradient(90deg, rgba(0, 192, 183, 1) 50%, rgba(0, 0, 0, 0.0) 50%); animation: loop 15s linear infinite; background-position: top, left, right, bottom; background-repeat: repeat-x, repeat-y, repeat-y, repeat-x; background-size: 8px 1px, 0 0, 1px 8px, 8px 1px; float: right; }

.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .paging-wrap .loop-wrap { width: 90%; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .paging-wrap .loop-wrap .l-chain { width: 30px; padding: 16px 0 7px 15px; position: absolute; top: 0; left: -30px; height: 100%; overflow: hidden }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .paging-wrap .loop-wrap .r-chain { width: 30px; padding: 16px 15px 7px 0; top: 0; right: -30px; height: 100%; position: absolute; overflow: hidden; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .paging-wrap .loop-wrap .l-chain .chain { width: 800%; height: 100%; border-top-left-radius: 4px; border-bottom-left-radius: 4px; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%), linear-gradient(175deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%), linear-gradient(175deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%), linear-gradient(90deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%); animation: loop 15s linear infinite; background-position: top, left, right, bottom; background-repeat: repeat-x, repeat-y, repeat-y, repeat-x; background-size: 8px 1px, 1px 8px, 0 0, 8px 1px; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .paging-wrap .loop-wrap .r-chain .chain { width: 800%; height: 100%; border-top-right-radius: 4px; border-bottom-right-radius: 4px; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%), linear-gradient(175deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%), linear-gradient(175deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%), linear-gradient(90deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%); animation: loop 15s linear infinite; background-position: top, left, right, bottom; background-repeat: repeat-x, repeat-y, repeat-y, repeat-x; background-size: 8px 1px, 0 0, 1px 8px, 8px 1px; float: right; }

.pop-up-layer .replace-select .pop-up-title span { font-size: 13px; vertical-align: middle;display: inline-block; margin-left: 5px; color: #8a8a8a; font-weight: 300; }
.pop-up-layer .replace-select .event-select-area .event-search-area {border: 1px solid #dee3eb; border-right: 0;}
.pop-up-layer .replace-select .event-select-area .event-search-area .event-list { max-height: 100%; height: 100%; margin-top: 0; }
.pop-up-layer .replace-select .event-select-area .event-search-area .event-list>ul .open>a:after { display: none; }
.pop-up-layer .replace-select .event-select-area .event-detail-intro-area { padding: 0; }
.pop-up-layer .replace-select .event-select-area .event-detail-intro-area ul li { height: 28px; display: block; text-align: left; position: relative;}
.pop-up-layer .replace-select .event-select-area .event-detail-intro-area ul li:nth-child(2n) { background: #f8f8f8; }
.pop-up-layer .replace-select .event-select-area .event-detail-intro-area ul li>a { display: block; height: 28px; line-height: 28px; font-weight: 300; padding-left: 20px; transition: background .2s ease; position: relative; color: #585858; font-family: 'Arial'; font-size: 12px; }
.pop-up-layer .replace-select .event-select-area .event-detail-intro-area ul li>a:hover { background: #B2CDF8; }
.pop-up-layer .replace-select .event-select-area .event-detail-intro-area ul li .selc-btn { position: absolute; top: 3px; right: 0; background: #fff; padding: 0 10px; height: 22px; line-height: 20px; border: 0; font-size: 12px; border: 1px solid #0058e8; border-radius: 3px; color: #0058e8; transition: background .25s; }
.pop-up-layer .replace-select .event-select-area .event-detail-intro-area ul li .selc-btn:hover { background: #0058e8; color: #fff; } 




/* 페이징 스텝 */
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap { position: relative; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.paging-header-area { height: 35px; background: #00C0B7; border-radius: 4px; text-align: center; position: relative; margin-bottom:  3px; transition: background .15s ease, border-color .15s ease; color: #ffffff; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.paging-header-area:hover { background: #00B0A8; border-color: #00B0A8; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.paging-header-area:before { z-index: 3; width: 12px; height:11px; border-radius: 5px; left: 50%; margin-left: -6px; top: -8px; background: #00C0B7; position: absolute; content: '';  transition: background .15s ease; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.paging-header-area:hover:before { background: #00B0A8; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.paging-header-area .paging-header { position: absolute; z-index: 4; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.paging-header-area .paging-header .subject { font-family: 'Arial'; font-size: 12px; display: inline-block; font-weight: 700; letter-spacing: 0; color: #fff; line-height: 35px; }

.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.paging-box { width: 100%; height: 35px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.paging-box>a { border-radius: 4px; display: block; height: 35px; text-align: center; line-height: 35px; background: #fff; letter-spacing: 0; font-size: 12px; text-overflow: ellipsis; padding: 0 5px; white-space: nowrap; overflow: hidden; background: #007b7c; color: #fff; transition: background .2s ease; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.paging-box:hover>a { background: #207A72; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.paging-box:after,
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.paging-box:before { background: #007b7c; transition: background .2s ease; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.paging-box:hover:after,
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.paging-box:hover:before { background: #207A72; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.paging-foot-area { height: 15px; background: #00C0B7; border-radius: 4px; text-align: center; border: 1px solid #00C0B7; position: relative; margin-top:  10px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.paging-foot-area:after { z-index: 4; width: 12px; height:11px; border-radius: 5px; left: 50%; margin-left: -6px; bottom: -9px; background: #00C0B7; position: absolute; content: ''; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap .l-chain { width: 30px; padding: 16px 0 7px 15px; position: absolute; top: 0; left: -30px; height: 100%; overflow: hidden }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap .r-chain { width: 30px; padding: 16px 15px 7px 0; top: 0; right: -30px; height: 100%; position: absolute; overflow: hidden; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap .l-chain .chain { width: 800%; height: 100%; border-top-left-radius: 4px; border-bottom-left-radius: 4px; background-image: -webkit-linear-gradient(left, rgba(0, 192, 183, 1) 50%, rgba(0, 0, 0, 0.0) 50%), -webkit-linear-gradient(85deg, rgba(0, 192, 183, 0.0) 50%, rgba(0, 192, 183, 1) 50%), -webkit-linear-gradient(85deg, rgba(0, 192, 183, 1) 50%, rgba(0, 0, 0, 0.0) 50%), -webkit-linear-gradient(left, rgba(0, 192, 183, 1) 50%, rgba(0, 0, 0, 0.0) 50%); background-image: -o-linear-gradient(left, rgba(0, 192, 183, 1) 50%, rgba(0, 0, 0, 0.0) 50%), -o-linear-gradient(85deg, rgba(0, 192, 183, 0.0) 50%, rgba(0, 192, 183, 1) 50%), -o-linear-gradient(85deg, rgba(0, 192, 183, 1) 50%, rgba(0, 0, 0, 0.0) 50%), -o-linear-gradient(left, rgba(0, 192, 183, 1) 50%, rgba(0, 0, 0, 0.0) 50%); background-image: linear-gradient(to right, rgba(0, 192, 183, 1) 50%, rgba(0, 0, 0, 0.0) 50%), linear-gradient(175deg, rgba(0, 192, 183, 0.0) 50%, rgba(0, 192, 183, 1) 50%), linear-gradient(175deg, rgba(0, 192, 183, 1) 50%, rgba(0, 0, 0, 0.0) 50%), linear-gradient(to right, rgba(0, 192, 183, 1) 50%, rgba(0, 0, 0, 0.0) 50%); animation: loop 15s linear infinite; background-position: top, left, right, bottom; background-repeat: repeat-x, repeat-y, repeat-y, repeat-x; background-size: 8px 1px, 1px 8px, 0 0, 8px 1px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap .r-chain .chain { width: 800%; height: 100%; border-top-right-radius: 4px; border-bottom-right-radius: 4px; background-image: linear-gradient(90deg, rgba(0, 192, 183, 1) 50%, rgba(0, 0, 0, 0.0) 50%), linear-gradient(175deg, rgba(0, 192, 183, 1) 50%, rgba(0, 0, 0, 0.0) 50%), linear-gradient(175deg, rgba(0, 192, 183, 1) 50%, rgba(0, 0, 0, 0.0) 50%), linear-gradient(90deg, rgba(0, 192, 183, 1) 50%, rgba(0, 0, 0, 0.0) 50%); animation: loop 15s linear infinite; background-position: top, left, right, bottom; background-repeat: repeat-x, repeat-y, repeat-y, repeat-x; background-size: 8px 1px, 0 0, 1px 8px, 8px 1px; float: right; }

.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap .loop-wrap { width: calc(100% - 32px); margin-left: 16px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap .loop-wrap { width: calc(100% - 32px); margin-left: 16px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap .loop-wrap .l-chain { width: 30px; padding: 16px 0 7px 15px; position: absolute; top: 0; left: -30px; height: 100%; overflow: hidden }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap .loop-wrap .r-chain { width: 30px; padding: 16px 15px 7px 0; top: 0; right: -30px; height: 100%; position: absolute; overflow: hidden; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap .loop-wrap .l-chain .chain { width: 800%; height: 100%; border-top-left-radius: 4px; border-bottom-left-radius: 4px; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%), linear-gradient(175deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%), linear-gradient(175deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%), linear-gradient(90deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%); animation: loop 15s linear infinite; background-position: top, left, right, bottom; background-repeat: repeat-x, repeat-y, repeat-y, repeat-x; background-size: 8px 1px, 1px 8px, 0 0, 8px 1px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap .loop-wrap .r-chain .chain { width: 800%; height: 100%; border-top-right-radius: 4px; border-bottom-right-radius: 4px; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%), linear-gradient(175deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%), linear-gradient(175deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%), linear-gradient(90deg, rgba(255, 255, 255, 0.6) 50%, #3a3a3a 50%); animation: loop 15s linear infinite; background-position: top, left, right, bottom; background-repeat: repeat-x, repeat-y, repeat-y, repeat-x; background-size: 8px 1px, 0 0, 1px 8px, 8px 1px; float: right; }

.pop-up-layer .scenario-overall .scenario-wrap .scenario-list { text-align: center; max-width: 600px; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .box { display: inline-block; width: 350px; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .division-box { width: 500px; height: auto; min-height: 34px; margin-bottom: 5px; display: inline-block; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .division-box .l-box,
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .division-box .r-box { width: 225px; min-height: 34px; float: left; position: relative; overflow: hidden; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .division-box .m-box { width: 44px; height: 34px; float: left; margin: 0 3px; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .division-box .l-box>a,
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .division-box .r-box>a { background: #ff5e5d; display: block;  height: 35px; border-radius: 4px; text-align: center; line-height: 35px; font-size: 12px; color: #fff; position: relative; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; transition: background .2s ease; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .division-box .l-box>a:before { position: absolute; content: ''; width: 18px; height: 18px; background: #f8f8f8; border-radius: 8px; z-index: 3; right: -9px; top: 8px; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .division-box .r-box>a:before { position: absolute; content: ''; width: 18px; height: 18px; background: #f8f8f8; border-radius: 8px; z-index: 3; left: -9px; top: 8px; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .division-box .l-box>a:after,
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .division-box .r-box>a:after { content: ''; position: absolute; z-index: 4; width: 12px; height: 11px; border-radius: 5px; background: #ff5e5d; left: 50%;  bottom: -8px; margin-left: -6px; z-index: 4; transition: background .2s ease; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .division-box .m-box { position: relative; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .division-box .m-box:after { content: ''; position: absolute; z-index: 2; width: 11px; height: 12px; border-radius: 5px; background: #ff5e5d; right: -9px; top: 11px; z-index: 4;; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .division-box .m-box:before { content: ''; position: absolute; z-index: 2; width: 11px; height: 12px; border-radius: 5px; background: #ff5e5d; left: -9px; top: 11px; z-index: 4; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .division-box .m-box .m-box-area { background: #ff5e5d; height: 100%; border-radius: 3px; position: relative; text-align: center; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .division-box .m-box .m-box-area img { margin-top: 12px; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .division-box .m-box .m-box-area:after { content: ''; position: absolute; z-index: 4; width: 12px; height: 11px; border-radius: 5px; background: #ff5e5d; left: 50%;  bottom: -8px; margin-left: -6px; z-index: 7; display: none; }
.pop-up-layer .scenario-overall .scenario-wrap .scenario-list .division-box .m-box .m-box-area:before { content: ''; position: absolute; z-index: 4; width: 20px; height: 9px; border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; background: #f8f8f8; left: 50%;  top: 0; margin-left: -10px; z-index: 4; }

.pop-up-layer .scenario-overall .division-box-detail-wrap { position: relative; padding-top: 70px; }
.pop-up-layer .scenario-overall .division-box-detail-wrap .back-btn-header { position: absolute; top: 0; left: 0; height: 40px; background: #808080; width: 100%; border-top-left-radius: 2px; border-top-right-radius: 2px; padding: 11px; }
.pop-up-layer .scenario-overall .division-box-detail-wrap .back-btn-header .scenario-back-btn { color: #fff; font-size: 12px; padding: 5px; border-radius: 3px; font-weight: 300; }
.pop-up-layer .scenario-overall .division-box-detail-wrap .back-btn-header .scenario-back-btn .ico { width: 11px; height: 11px; display: inline-block; margin-top: 4px;  margin-right: 6px; background: url(../img/scenario-editor/btn-ico.png) no-repeat; background-position: -42px -57px; }

.pop-up-layer .scenario-overall .scenario-wrap  .scenario-list .division-box-detail { overflow: hidden; width: 500px; display: inline-block; }
.pop-up-layer .scenario-overall .scenario-wrap  .scenario-list .division-box-detail .l-box-detail { width: 50%; float: left; padding-right: 25px; }
.pop-up-layer .scenario-overall .scenario-wrap  .scenario-list .division-box-detail .r-box-detail { width: 50%; float: right; padding-left: 25px; }
.pop-up-layer .scenario-overall .scenario-wrap  .scenario-list .division-box-detail .box-detail ul .box { width: 100%; height: 35px; }
.pop-up-layer .scenario-overall .scenario-wrap  .scenario-list .division-box-detail .box-detail ul .box a { width: 100%; height: 35px; display: block; border-radius: 4px; background: #ff5e5d; line-height: 35px; font-size: 12px; color: #fff; letter-spacing: 0; padding: 0 5px; text-overflow: ellipsis; overflow: hidden; }
.pop-up-layer .scenario-overall .scenario-wrap  .scenario-list .division-box-detail .box-detail ul .box a:before { display: none; }
.pop-up-layer .scenario-overall .scenario-wrap  .scenario-list .division-end { height: 15px; width: 100%; display: block; background: #ff5e5d; border-radius: 4px; position: relative; margin-bottom: 5px; max-width: 500px; display: inline-block; }
.pop-up-layer .scenario-overall .scenario-wrap  .scenario-list .division-end:after { content: ''; position: absolute; z-index: 7; width: 12px; height: 11px; border-radius: 5px; bottom: -8px; left: 50%; margin-left: -6px; background: #ff5e5d; }

/* 스텝상태 */
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .active>a { border: 1.5px solid #00a0e9; line-height: 30px; font-weight: bold; color: #00a0e9; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .active>a:hover { border: 1.5px solid #00a0e9; line-height: 30px; font-weight: bold; color: #00a0e9; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .error { position: relative; background: #fff; border-radius: 6px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .error:hover { background: #fff; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .error>a { border: 1.5px solid #e40040; line-height: 30px; font-weight: bold; color: #e40040; background: #fff!important; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .error>a:hover { border: 1.5px solid #e40040; line-height: 30px; font-weight: bold; color: #e40040; background: #fff; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .error:after,
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .error:before { background: #e40040; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .error:hover:after,
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .error:hover:before { background: #e40040; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .error .error-message-box { position: absolute; background: #fff7f7; z-index: 8; width: 100%; border: 1px solid #e40040; text-align: center; font-family: 'Dotum','Arial'; color: #e40040; font-size: 11px; padding: 17px 0; line-height: 17px; bottom: 100%; margin-bottom: 7px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .error .error-message-box> .close-btn { width: 8px; height: 8px; position: absolute; display: block; background: url(../img/scenario-editor/btn-ico.png) no-repeat; background-position: -55px -34px; top: 7px; left: 92%; transition: opacity .2s ease; opacity: 0.5; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .error .error-message-box> .close-btn:hover { opacity: 1; }

.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.error>a { border: 1.5px solid #e40040; line-height: 30px; font-weight: bold; color: #e40040; background: #fff!important; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.error:before,
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.error:after { background: #e40040; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.error:hover:before,
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.error:hover:after { background: #e40040; }

.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.error>a { border: 1.5px solid #e40040; line-height: 30px; font-weight: bold; color: #e40040; background: #fff!important; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.error:before,
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.error:after { background: #e40040; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.error:hover:before,
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.error:hover:after { background: #e40040; }

.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .selection-box>a {  line-height: 28px; font-weight: bold; background: #fff; border: 2px solid #1b8294; color: #1b8294; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .selection-box>a:hover { background: #fff; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .selection-box:after,
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .selection-box:before { background: #1b8294; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .selection-box:hover:after,
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .selection-box:hover:before { background: #1b8294; }

.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.selection-box a { line-height: 28px; font-weight: bold; background: #fff; border: 2px solid #1b8294; color: #1b8294; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.selection-box:hover a { background: #fff; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.selection-box:after,
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.selection-box:before { background: #1b8294; transition: background .2s ease; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.selection-box:hover:after,
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.selection-box:hover:before { background: #1b8294; }

.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.selection-box a { line-height: 28px; font-weight: bold; background: #fff; border: 2px solid #1b8294; color: #1b8294; border-radius: 4px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.selection-box:hover a { background: #fff; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.selection-box:after,
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.selection-box:before { background: #1b8294; transition: background .2s ease; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.selection-box:hover:after,
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.selection-box:hover:before { background: #1b8294; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.selection-box .paging-header .subject { line-height: 31px; color: #1b8294; }

.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.error>a { line-height: 28px; font-weight: bold; background: #fff; border: 2px solid #e40040; color: #e40040; border-radius: 4px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.error:hover a { background: #fff; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.error:after,
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.error:before { background: #e40040; transition: background .2s ease; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.error:hover:after,
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.error:hover:before { background: #e40040; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .paging-wrap>ul>.error .paging-header .subject { line-height: 31px; color: #e40040; }

.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .division-box .selection-box:before { border: 1.5px solid #1b8294; background: #fff; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .division-box .selection-box a { color: #1b8294; line-height: 30px; background: #fff; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .division-box .selection-box:hover:before { background: #f8f8f8; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .division-box .selection-box:hover:a { background: #fff; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .division-box .selection-box a:hover { background: #fff; }

.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.error { border: none; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.error .loop-header { border-radius: 3px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.error .loop-header .subject { font-family: 'Arial'; font-size: 11px; color: #e40040; line-height: 31px; display: inline-block; font-weight: 700; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.error .loop-header input[type=text] { height: 18px; border-style: none; border-radius: 3px; background: #dcdcdc; margin-top: -4px; width: 45px; text-align: center; color: #9000ff; font-family: 'Arial'; font-size: 11px; letter-spacing: 0; font-weight: 700; margin-left: 10px; outline: 0; }

.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.error .loop-header .btn-wrap { height: 33px; border-left: 1px solid #e40040; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.error:hover .loop-header .btn-wrap { border-left: 1px solid #e40040; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.error .loop-header .btn-wrap button {  height: 50%; border-left: 1px solid #e40040; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.error:hover .loop-header .btn-wrap button { border-left: 1px solid #e40040; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.error .loop-header .btn-wrap .up-btn { border-bottom: 1px solid #e40040; position: relative; border-top-right-radius: 0px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.error:hover .loop-header .btn-wrap .up-btn { border-bottom: 1px solid #e40040; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.error .loop-header .btn-wrap .down-btn { border-top: 1px solid #e40040; position: relative; border-bottom-right-radius: 0px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.error:hover .loop-header .btn-wrap .down-btn { border-top: 1px solid #e40040; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.error .loop-header .btn-wrap .up-btn:after { content: ''; position: absolute; z-index: 4; width: 0; height: 0; border-bottom: 3px solid #e40040; border-left: 3px solid transparent; border-right: 3px solid transparent; left: 50%; margin-left: -4px; top: 6px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.error .loop-header .btn-wrap .down-btn:after { content: ''; position: absolute; z-index: 4; width: 0; height: 0; border-top: 3px solid #e40040; border-left: 3px solid transparent; border-right: 3px solid transparent; left: 50%; margin-left: -4px; top: 5px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.error .loop-header .btn-wrap button:hover { background: #e40040; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .loop-wrap>ul>.error .loop-header .btn-wrap button:hover:after { border-top-color: #fff; border-bottom-color: #fff; }

/* 스텝컨택트메뉴 */
.view-container .scenario-admin-wrap .box-contact-menu { z-index: 999; position: absolute; width: 130px; left: 50%; background: #fff; border-radius: 4px; border: 1px solid #dcdcdc; box-shadow: 3px 3px 7px 0px rgba(0, 0, 0, 0.3); top: 17px; }
.view-container .scenario-admin-wrap .box-contact-menu>ul { overflow: hidden; }
.view-container .scenario-admin-wrap .box-contact-menu>ul>li { display: block; height: 30px; width: 100%; }
.view-container .scenario-admin-wrap .box-contact-menu>ul>li>a { display: block;  height: 30px; width: 100%; position: relative; font-size: 11px; font-family: 'Dotum','Arial'; padding-left: 10px; border-bottom: 1px solid #dcdcdc; line-height: 30px; transition: background .2s ease; }
.view-container .scenario-admin-wrap .box-contact-menu>ul>li:last-child>a { border-bottom: none; }
.view-container .scenario-admin-wrap .box-contact-menu>ul>li>a:hover { background: #dcdcdc; }
 
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .box .box-contact-menu { z-index: 999; position: absolute; width: 130px; left: 50%; background: #fff; border-radius: 4px; border: 1px solid #dcdcdc; box-shadow: 3px 3px 7px 0px rgba(0, 0, 0, 0.3); top: 17px; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .box .box-contact-menu>ul { overflow: hidden; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .box .box-contact-menu>ul>li { display: block; height: 30px; width: 100%; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .box .box-contact-menu>ul>li>a { display: block;  height: 30px; width: 100%; position: relative; font-size: 11px; font-family: 'Dotum','Arial'; padding-left: 10px; border-bottom: 1px solid #dcdcdc; line-height: 30px; transition: background .2s ease; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .box .box-contact-menu>ul>li:last-child>a { border-bottom: none; }
.view-container .scenario-admin-wrap .scenario-wrap .scenario-list .box .box-contact-menu>ul>li>a:hover { background: #dcdcdc; }

/* 에러페이지 */
.view-container  .target-web-area .target-web .error-page {  text-align: center; width: 100%; position: relative; height: 100%; }
.view-container  .target-web-area .target-web .error-page .error { position: absolute; width: 100%; top: 50%; margin-top: -200px; }
.view-container  .target-web-area .target-web .error-page .error .img-area { position: relative; display: inline-block; border-radius: 18px;  box-shadow: 0px 25px 20px -10px rgba(0,0,0,0.15); margin-bottom: 35px; width: 220px; }
.view-container  .target-web-area .target-web .error-page .error .img-area img { width: 100%; }
.view-container  .target-web-area .target-web .error-page .error .img-area .error-message { font-size: 1.8rem; color: #D0D3D7; font-weight: 300; letter-spacing: 0; position: absolute; left: 0; top: 70px; width: 100%; z-index: 1; }
.view-container  .target-web-area .target-web .error-page .error .img-area .error-message span { font-size: 4rem; font-weight: 800; display: block; }
.view-container  .target-web-area .target-web .error-page .txt-area .main-title { font-size: 2.5rem; letter-spacing: -1px; color: #222; margin-bottom: 10px; }
.view-container  .target-web-area .target-web .error-page .txt-area .sub-title { font-size: 1.5rem; letter-spacing: -1px; color: #666; line-height: 23px; font-weight: 300; }

/* 진행중 */

.proceeding { position: absolute; z-index: 7; width: 42px; height: 26px; background: #00A3FF; top: 5px; left: -50px; border-radius: 20px; animation: proceeding 1.25s infinite ease-in-out; text-align: center; }
.proceeding>div { padding: 10px 10px; display: block; height: 100%; height: 100%; position: relative; }
.proceeding>div .tail { position: absolute; border-left: 8px solid #00A3FF; border-top: 4px solid transparent; border-bottom: 4px solid transparent; right: -7px; top: 50%; margin-top: -4px; }
@keyframes proceeding{
	0%   { left: -50px; }
	50%  {  left: -55px; }
	100% { left: -50px; }
} 
.proceeding .circle { opacity: 1; -webkit-animation-name: preloader; -webkit-animation-duration: 1.25s; -webkit-animation-iteration-count: 1; animation-name: preloader; animation-duration: 1.25s; animation-iteration-count: infinite; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #fff; float: left; margin-right: 2px; }
.circle2 { -webkit-animation-delay: .15s; animation-delay: .15s; }
.circle3 { -webkit-animation-delay: .3s; animation-delay: .3s; margin-right: 0; }
 @keyframes preloader {
    50% { opacity: 0; }
    100% { opacity: 1; }
  }

/* 웹뷰 로딩 */
.web-view-loading { width: 100%; height: 100%; overflow: hidden; }
.web-view-loading .rolling { width: 100%; height: 100%;  background: url(../img/scenario-editor/web-view.png); background-repeat: repeat-y; background-size: cover; animation: bg-ani 20s linear infinite;  text-align: center; padding: 300px 0; font-size: 1.5rem; font-weight: bold; }

@keyframes bg-ani {
	0% { background-position: center top; }
	100% { background-position: center bottom; }
}

/* 웹뷰 이벤트 선택 컨택스트 */

.event-detail-set-layer { position: absolute; border-radius: 4px; box-shadow: 1px 1px 7px 0px rgba(0, 0, 0, 0.3); overflow: hidden; width: 300px; }
.event-detail-set-layer .event-title { height: 33px; background: #0058E8; display: block; padding: 0 10px; }
.event-detail-set-layer .event-title .ico { display: inline-block; width: 15px; height: 15px; background: url(../img/scenario-editor/btn-ico.png); background-position: -68px -21px; margin-top: 12px; margin-right: 1%; animation: rotate 2.5s infinite linear; }
.event-detail-set-layer .event-title .title { font-size: 13px; color: #ffffff; font-weight: 500; letter-spacing: 0; line-height: 32px; width: 90%; display: inline-block; }
.event-detail-set-layer .event-set { width: 100%; height: 100%; background: #25282F; padding: 15px 10px; }
.event-detail-set-layer .event-set .event-set-box { width: 100%; margin-bottom: 8px; }
.event-detail-set-layer .event-set .event-set-box .subject { font-size: 11px; font-family: 'Arial'; color: #f8f8f8; letter-spacing: 0; display: block; margin-bottom: 3px; }
.event-detail-set-layer .event-set .event-set-box .event-select-btn { width: 100%; height: 30px; border: 1px solid #6f6f6f; display: block; color: #ffffff; text-align: center; letter-spacing: 0; font-weight: 300; line-height: 28px; position: relative; border-radius: 3px; transition: background .2s ease; font-size: 11px; }
.event-detail-set-layer .event-set .event-set-box .event-select-btn:before { position: absolute; content: ''; width:  14px; height: 10px; background: url(../img/scenario-editor/btn-ico.png); background-position: -4px -44px; left: 8px; top: 9px; }
.event-detail-set-layer .event-set .event-set-box .event-select-btn:hover { background: #0058E8; border-color: #0058E8;  }
.event-detail-set-layer .event-set .event-set-box .event-txt-input { width: 100%; height: 30px; background: #f8f8f8; border-radius: 3px; border-style: none; box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2) inset; -webkit-box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2) inset; font-family: 'Arial'; font-size: 11px; color: #585858; transition: background .2s ease; outline: 0; padding: 0 10px; letter-spacing: 0; line-height: 30px; }
.event-detail-set-layer .event-set .event-set-box .event-txt-input:focus { background: #fff; }
.event-detail-set-layer .event-set .event-set-box .event-selector-input { width: calc(100% - 85px); height: 30px; background: #fffacb; border-radius: 3px; border-style: none; box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2) inset; -webkit-box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2) inset; font-family: 'Arial'; font-size: 11px; color: #585858; outline: 0; padding: 0 10px; letter-spacing: 0;  }
.event-detail-set-layer .event-set .event-set-box .event-selector-input:focus { background: #fff; transition: background .2s ease; line-height: 30px; }
.event-detail-set-layer .event-set .event-set-box .selector-btn { border: 1px solid #6f6f6f; color: #fff; font-family: 'Dotum','Arial'; font-size: 11px; color: #fff; height: 30px; line-height: 28px; display: inline-block; padding-right: 10px; border-radius: 3px; position: relative; padding-left: 21px; transition: background .2s ease; float: right; }
.event-detail-set-layer .event-set .event-set-box .selector-btn:before { content: ''; position: absolute; width: 11px; height: 11px; background: url(../img/scenario-editor/btn-ico.png); background-position: -20px -44px; left: 6px; top: 8px; }
.event-detail-set-layer .event-set .event-set-box .selector-btn:hover { background: #ffa300; border-color: #ffa300; }
.event-detail-set-layer .event-set .event-set-box .selectbox { height: 30px; }
.event-detail-set-layer .event-set .event-set-box .selectbox:before { top: 12px; }
.event-detail-set-layer .event-set .event-set-box .selectbox select { height: 28px; }
.event-detail-set-layer .event-set .event-set-box .selectbox label { height: 29px; line-height: 28px; left: 0; font-size: 11px; font-weight: 300; }

.event-detail-set-layer .event-set .event-set-box .check-wrap .check-box { display: inline-block; margin-right: 10px; margin-bottom: 5px; }
.event-detail-set-layer .event-set .event-set-box .check-wrap input[type=radio],
.event-detail-set-layer .event-set .event-set-box .check-wrap input[type=checkbox] { display: none; }
.event-detail-set-layer .event-set .event-set-box .check-wrap input[type=radio] + label,
.event-detail-set-layer .event-set .event-set-box .check-wrap input[type=checkbox] + label { display: inline-block; cursor: pointer; position: relative; padding-left: 20px; font-size: 11px; font-weight: 300; color: #acacac; height: 14px;  line-height: 17px; }
.event-detail-set-layer .event-set .event-set-box .check-wrap input[type=radio]+ label:before,
.event-detail-set-layer .event-set .event-set-box .check-wrap input[type=checkbox]+ label:before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 10px; position: absolute;  background: url(../img/scenario-editor/detail-set-radio.png) no-repeat; background-position: 0 0; left: 0; top: 2px; }
.event-detail-set-layer .event-set .event-set-box .check-wrap input[type=radio]:checked + label,
.event-detail-set-layer .event-set .event-set-box .check-wrap input[type=checkbox]:checked + label { color: #FFFFFF;  }
.event-detail-set-layer .event-set .event-set-box .check-wrap input[type=radio]:checked + label:before,
.event-detail-set-layer .event-set .event-set-box .check-wrap input[type=checkbox]:checked + label:before { background-position: 0 -14px; } 

.event-detail-set-layer .btn-wrap { display: block; background: none; box-shadow: none; border-radius: 0; width: 100%; position: relative; right: auto; top: 0; margin-top: 20px; }
.event-detail-set-layer .btn-wrap a { color: #fff; font-size: 11px; font-weight: 300; border: 1px solid #6f6f6f; height: 30px; display: block; text-align: center; line-height: 28px; width: 49%; border-radius: 3px; transition: background .2s ease, border-color .2s ease, font-weight .2s ease; }
.event-detail-set-layer .btn-wrap a:nth-child(1) { float: left; }
.event-detail-set-layer .btn-wrap a:nth-child(2) { float: right; }
.event-detail-set-layer .btn-wrap a:hover { background: #0058E8; border-color: #0058E8; }

/* 테이블 추출 */
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .table-type-select button { width: 49%; height: 40px; border: 1px solid #6f6f6f; display: block; color: #ffffff; text-align: center; letter-spacing: 0; font-weight: 300; line-height: 31px; position: relative; border-radius: 3px; transition: background .2s ease,border-color .2s ease; background: none; font-size: 13px; outline: 0; line-height: 38px; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .table-type-select button.select,
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .table-type-select button:hover { background: #0058E8; border-color: #0058E8; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .table-type-select button.h-table { float: left; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .table-type-select button.v-table { float: right; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .table-type-select button img { width: 14px; margin-top: 12px; margin-right: 5px; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .table-area { width: 100%; max-height: 250px; background: #fff; overflow: auto; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .table-area::-webkit-scrollbar { display: block; width: 8px; height: 8px; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .table-area::-webkit-scrollbar-thumb { background: #BCBCBC; border-radius: 8px; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .table-area::-webkit-scrollbar-track { background: #EBEBEB; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .table-area.no-table { background: #3C3E46; border-radius: 3px; text-align: center; color: rgba(255,255,255,0.5); font-weight: 100; letter-spacing: 0; padding: 40px 10px; font-size: 12px; line-height: 26px; cursor: default; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .table-area.no-table span { display: inline-block; border: 1px solid rgba(255,255,255,0.3); padding: 0 6px; border-radius: 3px; line-height: 25px; margin: 0 5px; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .table-area table { min-width: 100%; font-size: 12px; letter-spacing: 0; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .table-area table tr { border-bottom: 1px solid #ddd; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .table-area table tr th { font-weight: bold; border-right: 1px solid #ccc; min-width: 150px; position: relative; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .table-area table.v-table tr th { border-right: 3px solid #ccc; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .table-area table.h-table tr th { border-bottom: 3px solid #ccc; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .table-area table tr td { border-right: 1px solid #ddd; width: 150px; padding: 7px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .table-area table tr td span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .table-area table tr th input[type=text] { font-size: 12px; letter-spacing: 0; outline: 0; border: none; height: 100%; font-weight: bold; padding: 7px 25px 7px 7px; transition: background .25s ease; background: #F6F9FF; width: 100%; color: #222; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .table-area table tr th input[type=text]:hover { background: #E9EFFB; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .table-area table tr th .remove-extract-header-btn { background: #dd1f28; border: 1px solid #ef3840; position: absolute; right: 5px; top: 50%; margin-top: -8px; width: 16px; height: 16px; padding: 3px; border-radius: 3px; opacity: .7; transition: opacity .25s ease; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .table-area table tr th .remove-extract-header-btn:hover { opacity: 1; }
.view-container .scenario-admin-wrap .detail-set-wrap .detail-set .event-set .event-set-box .table-area table tr th .remove-extract-header-btn img { width: 8px; height: 8px; }

.event-detail-set-layer .event-set .event-set-box .table-type-select button { width: 49%; height: 30px; border: 1px solid #6f6f6f; display: block; color: #ffffff; text-align: center; letter-spacing: 0; font-weight: 300; line-height: 31px; position: relative; border-radius: 3px; transition: background .2s ease,border-color .2s ease; background: none; font-size: 11px; outline: 0; line-height: 28px; }
.event-detail-set-layer .event-set .event-set-box .table-type-select button.select,
.event-detail-set-layer .event-set .event-set-box .table-type-select button:hover { background: #0058E8; border-color: #0058E8; }
.event-detail-set-layer .event-set .event-set-box .table-type-select button.h-table { float: left; }
.event-detail-set-layer .event-set .event-set-box .table-type-select button.v-table { float: right; }
.event-detail-set-layer .event-set .event-set-box .table-type-select button img { width: 14px; margin-top: 7px; margin-right: 5px; }
.event-detail-set-layer .event-set .event-set-box .table-area { width: 100%; max-height: 100px; background: #fff; overflow: auto; }
.event-detail-set-layer .event-set .event-set-box .table-area::-webkit-scrollbar { display: block; width: 5px; height: 5px; }
.event-detail-set-layer .event-set .event-set-box .table-area::-webkit-scrollbar-thumb { background: #BCBCBC; border-radius: 8px; }
.event-detail-set-layer .event-set .event-set-box .table-area::-webkit-scrollbar-track { background: #EBEBEB; }
.event-detail-set-layer .event-set .event-set-box .table-area table { min-width: 100%; font-size: 11px; letter-spacing: 0; }
.event-detail-set-layer .event-set .event-set-box .table-area table tr { border-bottom: 1px solid #ddd; }
.event-detail-set-layer .event-set .event-set-box .table-area table tr th { font-weight: bold; border-right: 1px solid #ccc; min-width: 150px; position: relative; }
.event-detail-set-layer .event-set .event-set-box .table-area table.v-table tr th { border-right: 2px solid #ccc; }
.event-detail-set-layer .event-set .event-set-box .table-area table.h-table tr th { border-bottom: 2px solid #ccc; }
.event-detail-set-layer .event-set .event-set-box .table-area table tr td { border-right: 1px solid #ddd; width: 150px; padding: 5px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.event-detail-set-layer .event-set .event-set-box .table-area table tr td span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-detail-set-layer .event-set .event-set-box .table-area table tr th input[type=text] { font-size: 11px; letter-spacing: 0; outline: 0; border: none; height: 100%; font-weight: bold; padding: 5px 25px 5px 5px; transition: background .25s ease; background: #F6F9FF; width: 100%; color: #222; }
.event-detail-set-layer .event-set .event-set-box .table-area table tr th input[type=text]:hover { background: #E9EFFB; }
.event-detail-set-layer .event-set .event-set-box .table-area table tr th .remove-extract-header-btn { background: #dd1f28; border: 1px solid #ef3840; position: absolute; right: 5px; top: 50%; margin-top: -7px; width: 14px; height: 14px; padding: 3px; border-radius: 3px; opacity: .7; transition: opacity .25s ease; }
.event-detail-set-layer .event-set .event-set-box .table-area table tr th .remove-extract-header-btn:hover { opacity: 1; }
.event-detail-set-layer .event-set .event-set-box .table-area table tr th .remove-extract-header-btn img { width: 6px; height: 6px; }
.event-detail-set-layer .event-set .event-set-box .table-area.no-table { background: #3C3E46; border-radius: 3px; text-align: center; color: rgba(255,255,255,0.5); font-weight: 100; letter-spacing: 0; padding: 15px 10px; font-size: 11px; line-height: 23px; cursor: default; }
.event-detail-set-layer .event-set .event-set-box .table-area.no-table span { display: inline-block; border: 1px solid rgba(255,255,255,0.3); padding: 0 6px; border-radius: 3px; line-height: 23px; margin: 0 5px; }