/* ----------------------------------------------
LAYOUT
------------------------------------------------*/
/* UI - accessibility
------------------------------------------------*/
#skipToContent {position:relative; z-index:1000; width:100%; overflow:hidden;}
#skipToContent a {display:block; width:1px; height:1px; margin:0 -1px -1px 0; overflow:hidden; font-size:0; line-height:0; text-align:center; background:#b30044; color:#fff; position:fixed; top:0; left:0;}
#skipToContent a:focus {width:100%; height:auto; margin:0; padding:8px 0; font-size:12px; line-height:1;}

body.fr {float: none !important;}

/* skipToContent hidden */
body.ovh #skipToContent {display:none;}

/* header */
header {width:100%; height:90px; position:relative; background:#000000;}
header .sta {width:260px; height:45px;}
header .sta .title {margin:0 15px;}
header .sta .title .mobileNavi {font-size:0; color:#fff; width:40px; height:40px; background:url(/ssw/images/svg/menu.svg) no-repeat center;}
header .sta .title h1 {}
header .sta .title h1 a,
header .sta .title h1 strong {display:block; width:228px; height:24px; text-indent:-999em; background:url(/ssw/images/svg/logo.svg) no-repeat; background-size:contain; color:#fff;}
header .sta .title h1 .oled_logo {background:url(/ssw/images/oled_only/logo.png) no-repeat;}
header .sta .title h1 .master_logo {background:url(/ssw/images/svg/logo_master.svg) no-repeat;}

header .lnb {width:calc(100% - 0px); height:45px;}
header .lnb .lnbHeader {height:60px; background:#1d1d1d; display:none;}
header .lnb .lnbHeader .mNaviClose {font-size:0; width:40px; height:40px; margin:10px; background:url(/ssw/images/svg/close.svg) no-repeat center;}
header .lnb nav {}
header .lnb nav ul {}
header .lnb nav ul li {position:relative; box-sizing:border-box; border-bottom:2px solid transparent; height:45px; display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:center; align-items:center;-webkit-justify-content:center; -webkit-align-items:center; -ms-flex-pack:center; -ms-flex-align:center;}
header .lnb nav ul li.active {border-bottom:2px solid #e2105f; }
header .lnb nav ul li.active a {color:#ff0060}
header .lnb nav ul li.active a:hover {border-bottom:2px solid transparent;}
header .lnb nav ul li strong {display:block; text-align:center; color:#fff; font-size:17px; font-weight:bold;}
header .lnb nav ul li a {display:block; min-width:30px; padding:2px 0; text-align:center; color:#fff; font-size:17px; font-weight:bold; margin:0 14px; line-height:16px; border-bottom:2px solid transparent; word-break:break-all;}
header .lnb nav ul li:hover {border-bottom:2px solid #fff;}
header .lnb nav ul li a:active {color:#e2105f;}

/* header .lnb nav ul li a.active::after {content:''; position:absolute; bottom:0; left:50%; transform: translate(-50%, 0%); display:block; width:30px; height:11px; background:url(/ssw/images/common/header_icon_arrow.png) no-repeat center bottom;} */
header .lnb nav ul li a.active_one {color:#e2105f;}

header .lnb .tools {white-space:nowrap; position:absolute; top:0; right:0; height:45px;}
/*
header .lnb .account .user {display: inline-block; vertical-align:top; text-align: left;}
header .lnb .account .user strong {display:block; width:137px; height:30px; line-height:30px; color:#6b6b6b; margin:0 15px; font-size:15px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap}
header .lnb .account .user span {display:block;width:137px;color:#6b6b6b;margin:0 15px;font-weight:normal;font-size:15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
*/
header .lnb .tools .set_menu { position:absolute; top:82px; right:15px; z-index:999; background:#434343; border-radius:2px; min-width:206px; text-align:center;}
header .lnb .tools .set_menu:before {content:"";position:absolute;top:-10px;left: 50%;margin-left: -5px;border-bottom:10px solid #434343;border-left: 10px solid transparent;border-right: 10px solid transparent;}
header .lnb .tools .set_menu li {}
header .lnb .tools .set_menu li a {display:block; color:#fff; font-size:14px; margin:7px; background:#434343; text-align:left; padding:10px 0 10px 10px;}
header .lnb .tools .set_menu li a:hover {background:#cf0652;}
header .lnb .tools .set_menu li a:active {background:#530221;}

header .lnb .tools .toplink {display:flex; margin:0 8px;}
header .lnb .tools .toplink button {margin:0 4px;}

header .lnb .tools .sessionTime {display:inline-block; vertical-align:middle; padding:0 20px; border-left:1px solid #424242; border-right:1px solid #424242;}
header .lnb .tools .sessionTime .time {display:inline-block; vertical-align:middle; line-height:26px; font-size:15px; color:#fff; margin:0 10px 0 0;}
header .lnb .tools .sessionTime .time::before {content:''; display:inline-block; vertical-align:middle; margin-right:10px; width:26px; height:26px; background:url(/ssw/images/svg/icon_time.svg) no-repeat;}
header .lnb .tools .sitemap {display:inline-block; vertical-align:middle; margin:0 20px;}
header .lnb .tools .sitemap a {display:block; line-height:26px; font-size:15px; color:#fff;}
header .lnb .tools .sitemap a:hover {color:#fff; text-decoration:underline;}

header .lnb .tools .user {display:inline-block; height:40px; cursor:pointer;}
header .lnb .tools .user:hover strong {color:#fff; text-decoration:underline;}
header .lnb .tools .user:before {content:''; display:inline-block; vertical-align:middle; width:40px; height:40px; background:url(/ssw/images/svg/btnUser.svg) no-repeat center; transform: scale(0.7); filter:brightness(0.5);}
header .lnb .tools .user:after {content:''; display:inline-block; vertical-align:middle; width:14px; height:8px; background:url(/ssw/images/svg/btn_filter_arrow.svg) no-repeat center; filter:grayscale(1) brightness(2);}
header .lnb .tools .user strong {display:inline-block; vertical-align:middle; font-size:15px; color:#fff; font-weight:400; pointer-events:none;}
header .lnb .tools .user.active {}
header .lnb .tools .user.active strong {}
header .lnb .tools .user.active:after {transform: rotate(180deg);}
header .lnb .tools .user.active ~ .userTools {display:block;}
header .lnb .tools .btnNotify.active ~ .userNotify {display:block;}

header .lnb .tools .userTools {display:none; background:#fff; overflow:hidden; border-radius:10px; box-shadow:0 8px 8px rgba(0, 0, 0, 0.2); position:fixed; top:50px; right:4px; z-index:9999; animation:userToolsShow 0.3s; max-width:200px; min-width:120px; padding:6px; text-align:center;}
header .lnb .tools .userTools button {width:calc(100% - 4px);}
header .lnb .tools .userTools .userInfo {padding:4px; text-align:center; color:#464646; font-size:14px;}
header .lnb .tools .userTools .userInfo strong {display:block; padding:6px 0;  white-space:normal; word-break:break-word;}
header .lnb .tools .userTools .userInfo p {display:block; padding:4px 0;  white-space:normal; word-break:break-word;}

/* ---- userNotify ----*/
.userNotify {display:none; position:fixed; top:50px; right:4px; z-index:9999; width:316px; color:#464646; background:#fff; overflow:hidden; border-radius:10px; box-shadow:0 8px 8px rgba(0, 0, 0, 0.2); animation:userToolsShow 0.3s; box-sizing:border-box;}
.userNotify .userNotifyHeader {border-bottom:1px solid #ccc; padding:4px; margin:10px 10px 0;}
.userNotify .userNotifyHeader h2 {font-size:16px; font-weight:normal; white-space:normal;}
.userNotify .userNotifyBody {padding:0 10px 10px; overflow:auto; max-height:580px;}
.userNotify .userNotifyBody ul {padding:4px; box-sizing:border-box;}
.userNotify .userNotifyBody ul li {padding:10px 0; border-bottom:1px solid #ddd; text-align:left;}
.userNotify .userNotifyBody ul li .message {font-size:12px; color:#000; font-weight:bold; white-space:normal; text-align:left;}
.userNotify .userNotifyBody ul li .info {font-size:12px; margin-top:10px;}
.userNotify .userNotifyBody ul li .info .time {}
.userNotify .userNotifyBody ul li .info .catagory {}

@keyframes userToolsShow {
	0% {opacity:0; transform:translate3d(0, -30px, 0);}
	100% {opacity:1; transform:translate3d(0, 0, 0);}
}

header .lnb .vrUpdate {text-align:center; line-height:30px; display:none;}
header .lnb .vrUpdate #mSWVersion {display:block; width:100%; font-size:12px; color:#c4c4c4;}


#container_wrap { position:relative; height:calc(100% - 90px); z-index:1;}

/* *************** left_side *************** */
#container_wrap #left_side {float:left; width:260px; background:#292929; height:100%; overflow:hidden; position:relative;}
#container_wrap #left_side .btnFilter {height:50px; width:100%; padding:0 16px; box-sizing:border-box; text-align:left; background:#333; display:none;}
#container_wrap #left_side .btnFilter:focus {outline-offset:-2px;}
#container_wrap #left_side .btnFilter strong {font-size:16px; font-weight: normal; color:#ccc; margin-bottom:6px;}
#container_wrap #left_side .btnFilter strong::before {content:''; display:inline-block; vertical-align:text-bottom; width:22px; height:22px; background:url(/ssw/images/svg/icon_filter.svg)no-repeat; margin:0 10px; filter:brightness(10);}
#container_wrap #left_side .btnFilter span {color:#464646; font-size:0; display:block; width:15px; height:8px; background:url(/ssw/images/svg/btn_filter_arrow.svg)no-repeat; background-size:cover; filter:brightness(100); margin:0 14px;}
#container_wrap #left_side .btnFilter:hover span {filter:grayscale(0);}
#container_wrap #left_side.active .btnFilter span {transform:rotate(180deg);}

#container_wrap #left_side .filter_box {margin:70px 10px 0 10px;}
#container_wrap #left_side .filter_box h2 {margin:0 0 0 5px; padding:0px; font-size:14px; color:#e2e6ea; display:block; height:20px; vertical-align:top; font-weight:normal;}
#container_wrap #left_side .filter_box span {display:block; position:relative; width:100%;}
#container_wrap #left_side .filter_box span input[type=text] {color:#868686; width:240px; padding-right:36px; height:34px; font-size:14px; line-height:34px; border-radius:16px;}
#container_wrap #left_side .filter_box span input[type=text]:focus {color:#464646;}
#container_wrap #left_side .filter_box span input[type=submit] { position:absolute; width:18px; height:18px; top:8px; right:14px; background:url(/ssw/images/svg/btnSearch.svg) no-repeat; filter:grayscale(1); cursor:pointer;}
#container_wrap #left_side .filter_box span input[type=submit]:hover {filter:grayscale(0);}
#container_wrap #left_side .filter_box span input[type=submit]:active {filter:grayscale(0.5);}
#container_wrap #left_side nav {overflow-y:scroll; overflow-x:hidden; margin:10px 0 20px 0; height:calc(100% - 200px);}
#container_wrap #left_side nav ul {width:235px; margin-top: 27px;}
#container_wrap #left_side nav ul li {position:relative;}
#container_wrap #left_side nav ul li:first-child {border-top:1px solid #4a4a4a;}
#container_wrap #left_side nav ul li ul li:first-child {border-top:0;}
#container_wrap #left_side nav > ul > li.active > a {border-left:5px solid #cf0652; font-weight:bold;}
#container_wrap #left_side nav > ul > li.active > a > span {margin-left:-5px;} 
#container_wrap #left_side nav > ul > li.active > a,
#container_wrap #left_side nav > ul > li.active > a:hover,
#container_wrap #left_side nav > ul > li.active > a:focus  {background:#000; color:#FFF;}
#container_wrap #left_side nav > ul > li.active > a > span:after,
#container_wrap #left_side nav > ul > li.active > a:hover > span:after,
#container_wrap #left_side nav > ul > li.active > a:focus > span:after {transform:rotate(180deg);}
#container_wrap #left_side nav > ul > li.active > ul {display:block; padding-bottom:10px;}
#container_wrap #left_side nav ul li a {display:block; height:38px; line-height:38px; color:#fff; text-indent:24px; font-size:15px; border-bottom:1px solid #4a4a4a;}
#container_wrap #left_side nav ul li a:hover {color:#FFF; text-decoration:underline; font-weight:bold;}
#container_wrap #left_side nav ul li a:active {background:#000; color:#FFF;}
#container_wrap #left_side nav ul li a span {}
#container_wrap #left_side nav ul li a span:after {content:''; display:inline-block; vertical-align:middle; width:20px; height:20px; background:url(/ssw/images/svg/btn_filter_arrow.svg) no-repeat center; filter:brightness(100);}

#container_wrap #left_side nav ul li ul {display:none; padding:0; margin:0; border-bottom:1px solid #353535;}
#container_wrap #left_side nav ul li ul#platformList1 li {background:none;}
#container_wrap #left_side nav ul li ul#platformList1 li ul li.active {background:#000;}
#container_wrap #left_side nav ul li ul#platformList1 > li.active > span:after {content:""; display:block; width:21px; height:17px; position:absolute; top:6px; right:0px; background:url(/ssw/images/bullet/filter_check.png) no-repeat;}

#container_wrap #left_side nav ul li .button {}
#container_wrap #left_side nav ul li .button a {color:#fff; background:#000; font-size:14px; text-decoration:none; text-align:center; display:inline-block; height:30px; line-height:26px; padding:0 14px; font-weight:normal; box-sizing:border-box; border:2px solid transparent; text-indent:0px; margin:6px 0;}
#container_wrap #left_side nav ul li .button a:hover {background:#ce0a51; border:2px solid #ce0a51; color:#FFF; font-weight:bold; border-radius:18px; box-sizing:border-box; text-align:center;}
#container_wrap #left_side nav ul li ul li a {font-weight:normal; color:#919191; border-bottom:0px; padding-left:30px;}
#container_wrap #left_side nav ul li ul li a:hover {background:none; color:#fff;}
#container_wrap #left_side nav ul li ul li a:active {color:#cf0652;}
#container_wrap #left_side nav ul li ul li a span {padding-right:20px; background:none; display:block; width:175px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; background: url(/ssw/images/bullet/icon_folder_s.png) no-repeat left center !important;}

#container_wrap #left_side nav > ul > li[data-type="folder"] {}
#container_wrap #left_side nav > ul > li[data-type="folder"] > ul > li.active {background:#000;}
#container_wrap #left_side nav > ul > li[data-type="folder"] > ul > li > ul {}
/* #container_wrap #left_side nav > ul > li[data-type="folder"] > ul > li > ul > li.active {background:#000;} */
#container_wrap #left_side nav > ul > li > ul > li {}
#container_wrap #left_side nav > ul > li > ul > li > span {color:#cf0652; margin-left:20px; padding-left:12px; display:block; text-overflow:ellipsis; overflow:inherit; white-space:nowrap; cursor:pointer; background: url(/ssw/images/bullet/icon_folder_s.png) no-repeat left center;}
#container_wrap #left_side nav > ul > li > ul > li > span.folder {background: url(/ssw/images/bullet/icon_folder_plus.png) no-repeat left center;}
#container_wrap #left_side nav > ul > li > ul > li > span.folder input[readonly] {font-weight:bold;}
#container_wrap #left_side nav > ul > li > ul > li > span.plus {background: url(/ssw/images/bullet/icon_plus.png) no-repeat left center;}
#container_wrap #left_side nav > ul > li > ul > li > span > input {padding-left:0px; width:170px;}
#container_wrap #left_side nav > ul > li > ul > li > span > input[type=text] {margin-left:10px; text-indent:10px; position:relative; z-index:1;}
#container_wrap #left_side nav > ul > li > ul > li > span > input[readonly] {text-indent:0px;}
#container_wrap #left_side nav > ul > li > ul > li > span > input[readonly]:hover {background:none; color:#fff;}
#container_wrap #left_side nav > ul > li > ul > li.active > span input[readonly] {color:#fff; font-weight:bold;}
#container_wrap #left_side nav > ul > li > ul > li.active > ul {display:block;}
/*
#container_wrap #left_side nav > ul > li > ul > li.active:before {content:""; display:block; width:21px; height:17px; position:absolute; top:6px; right:0px; background:url(/ssw/images/bullet/filter_check.png) no-repeat;}
*/
#container_wrap #left_side nav > ul > li > ul > li.active > input[readonly] {color:#fff; font-weight:bold;}

#container_wrap #left_side nav > ul > li > ul > li > ul > li {font-weight:normal; color:#919191; border-bottom:0px; padding-left:38px; background:url(/ssw/images/bullet/line_folder_open_01.png) no-repeat 27px 0px;}
#container_wrap #left_side nav > ul > li > ul > li > ul > li > span > input {padding-left:0px; width:168px;}
#container_wrap #left_side nav > ul > li > ul > li > ul > li > span {display:block; background:url(/ssw/images/bullet/icon_folder_s.png) no-repeat 6px 8px; padding-left:20px;}
#container_wrap #left_side nav > ul > li > ul > li > ul > li > span.folder {background: url(/ssw/images/bullet/icon_folder_plus.png) no-repeat 6px 8px;}
#container_wrap #left_side nav > ul > li > ul > li > ul > li > span.none {background:none; padding-left:0;}
#container_wrap #left_side nav > ul > li > ul > li > ul > li > span > input[type=text] {margin-left:8px; text-indent:10px; position:relative; z-index:1;}
#container_wrap #left_side nav > ul > li > ul > li > ul > li > span > input[readonly] {text-indent:0px; width:146px;}
#container_wrap #left_side nav > ul > li > ul > li > ul > li > span > input[readonly]:hover {background:none; color:#fff;}
#container_wrap #left_side nav > ul > li > ul > li > ul > li.active > span input[readonly] {color:fff; font-weight:bold;}
#container_wrap #left_side nav > ul > li > ul > li > ul > li.active:before {content:""; display:block; width:21px; height:17px; position:absolute; top:6px; right:0px; background:url(/ssw/images/bullet/filter_check.png) no-repeat;}
#container_wrap #left_side nav > ul > li > ul > li > ul > li.active > ul {display:block;}
#container_wrap #left_side nav > ul > li > ul > li > ul > li:last-child {background:url(/ssw/images/bullet/line_folder_open_02.png) no-repeat 27px 0px;}
#container_wrap #left_side nav > ul > li > ul > li:last-child > ul > li:last-child {background:url(/ssw/images/bullet/line_folder_open_02.png) no-repeat 27px 0px;}
#container_wrap #left_side nav > ul > li > ul > li:last-child > ul > li:last-child ul {background:none;}

#container_wrap #left_side nav > ul > li > ul > li > ul > li > ul {display:none; background: url(/ssw/images/bullet/line_folder_dot.png) repeat-y 10px 0px;padding-left: 20px;position: relative;margin-left: -21px;}
#container_wrap #left_side nav > ul > li > ul > li > ul > li:last-child > ul:last-child {background:none;}
#container_wrap #left_side nav > ul > li > ul > li > ul > li > ul > li {font-weight:normal; color:#919191; border-bottom:0px; padding-left:22px; background:url(/ssw/images/bullet/line_folder_open_01.png) no-repeat 12px 0px;}
#container_wrap #left_side nav > ul > li > ul > li > ul > li > ul > li > span > input {padding-left:0px; width:146px;}
#container_wrap #left_side nav > ul > li > ul > li > ul > li > ul > li > span {display:block; background:url(/ssw/images/bullet/icon_folder_s.png) no-repeat 6px 8px; padding-left:20px;}
#container_wrap #left_side nav > ul > li > ul > li > ul > li > ul > li > span > input[type=text] {margin-left:8px; text-indent:10px; position:relative; z-index:1;}
#container_wrap #left_side nav > ul > li > ul > li > ul > li > ul > li > span > input[readonly] {text-indent:0px; width:120px; padding:0px;}
#container_wrap #left_side nav > ul > li > ul > li > ul > li > ul > li > span > input[readonly]:hover {background:none; color:#fff;}
#container_wrap #left_side nav > ul > li > ul > li > ul > li > ul > li.active > span input[readonly] {color:#cf0652;}
#container_wrap #left_side nav > ul > li > ul > li > ul > li > ul > li.active:before {content:""; display:block; width:21px; height:17px; position:absolute; top:6px; right:38px; background:url(/ssw/images/bullet/filter_check.png) no-repeat;}
#container_wrap #left_side nav > ul > li > ul > li > ul > li > ul > li:last-child {background:url(/ssw/images/bullet/line_folder_open_02.png) no-repeat 12px 0px;}
#container_wrap #left_side nav > ul > li > ul > li > ul > li > ul > li .close {right:38px;}

#container_wrap #left_side nav ul li .close {width:24px; height:24px; text-indent:-999em; display:block; position:absolute; top:2px; right:2px; background:url(/ssw/images/button/btn_close_01_n.png)#292929 no-repeat; color:#fff; cursor:pointer; border-radius:50%;}
#container_wrap #left_side nav ul li .close:hover  {background:url(/ssw/images/button/btn_close_01_f.png) no-repeat;}
#container_wrap #left_side nav ul li .close:active {background:url(/ssw/images/button/btn_close_01_p.png) no-repeat;}
#container_wrap #left_side nav .keyword_wrap {margin:10px;}
#container_wrap #left_side nav .keyword_wrap .keyword_box {position:relative;}
#container_wrap #left_side nav .keyword_wrap .keyword_box .keyword {display:block; width:100%; text-align:left; background:#676767; padding:7px 14px; box-sizing:border-box; font-size:12px; color:#FFF; font-weight:normal; margin-bottom:5px; position:relative; overflow:hidden;}
#container_wrap #left_side nav .keyword_wrap .keyword_box .keyword:hover {background:#777;}
#container_wrap #left_side nav .keyword_wrap .keyword_box .keyword:active {background:#555; box-shadow:inset 0 0 0px 3px #cf0652;}
#container_wrap #left_side nav .keyword_wrap .keyword_box .keyword p {display:block; margin:10px 0;}
#container_wrap #left_side nav .keyword_wrap .keyword_box .keyword p strong {color:#fff; word-break:break-all; display:block;}
#container_wrap #left_side nav .keyword_wrap .keyword_box .btnClose_s {display:block; position:absolute; top:0px; right:0px; border-radius:6px; z-index:9;}
#container_wrap #left_side nav .keyword_wrap .keyword_box .btnClose_s:before {filter:brightness(10);}
#container_wrap #left_side nav .keyword_wrap .keyword_box .btnClose_s:hover {background:none;}
#container_wrap #left_side nav .search_list {}
#container_wrap #left_side nav .search_list ul {border-bottom:1px solid #353535; padding-bottom:10px;}
#container_wrap #left_side nav .search_list ul li {display:block; height:30px; line-height:30px; text-indent:20px;}
#container_wrap #left_side nav .search_list ul li a { font-weight:normal; color:#919191; border-bottom:0px; background:none; height:30px; line-height:30px; margin-right:30px;}
#container_wrap #left_side nav .search_list ul li a:hover,
#container_wrap #left_side nav .search_list ul li a:active { background:none;}
#container_wrap #left_side nav .search_list ul li .close {top:3px;}

#container_wrap #left_side nav > ul li ul#platformList1 li span input {text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}

/* left_side input*/
#container_wrap #left_side nav ul li ul li input {font-weight:normal; text-align:left; color:#ce0a51; border:0px; margin-left:20px; width:160px; background:#fff; height:30px; line-height:30px; padding:0 5px; border-radius:20px; cursor:text;}
#container_wrap #left_side nav ul li ul li input[readonly] {font-weight:normal; color:#fff; border:0px; background:transparent; height:30px; line-height:30px; cursor:pointer; text-overflow:ellipsis; overflow:hidden; box-shadow:none; white-space:nowrap;}
#container_wrap #left_side nav ul li ul li input[readonly]:hover {color:#fff; text-decoration:underline;}
#container_wrap #left_side nav > ul > li > ul > li.active {background:#000;}
#container_wrap #left_side nav > ul > li > ul > li.active input[readonly] {}
#container_wrap #left_side nav ul li ul li input[disabled] {font-weight:normal; color:#919191; border:0px; margin-left:10px; margin-right:30px; width:200px; background:transparent; height:30px; line-height:30px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; cursor:pointer;}
#container_wrap #left_side nav ul li ul li input[disabled]:hover {text-indent:6px; background:none; color:#fff;}
#container_wrap #left_side nav > ul > li > ul > li.active input[disabled] {color:#cf0652;}

/* left_side input edit*/
#container_wrap #left_side nav ul li ul.edit li input[readonly]:hover {background:#3d3d3d; cursor:text;}
#container_wrap #left_side nav ul li ul.edit li input[disabled]:hover {background:#3d3d3d; cursor:text;}
#container_wrap #left_side nav ul li ul li ul {border-top:0; border-bottom:0; display:none;}

#container_wrap #left_side .analytics_navi {padding:57px 0 0 24px;}
#container_wrap #left_side .analytics_navi a {display:block; font-size:18px; font-weight:bold; margin-bottom:26px; color:#CCC;}
#container_wrap #left_side .analytics_navi a:hover {color:#fff;}
#container_wrap #left_side .analytics_navi a:focus {color:#e2105f;}
#container_wrap #left_side .analytics_navi a.active { padding-left:20px; background:url(/ssw/images/bullet/icon_dot_n.png) no-repeat left center;}
#container_wrap #left_side .dashboard_side {padding:57px 15px 0 15px; height:calc(100% - 200px); overflow:auto; padding-bottom:20px;}
#container_wrap #left_side .dashboard_side h2 {display:block; font-size:14px; color:#e2e6ea; font-style:italic;}
#container_wrap #left_side .dashboard_side ul {display:block; padding-bottom:9px; border-bottom:1px solid #353535;}
#container_wrap #left_side .dashboard_side ul li {display:block; margin-top:18px;}
#container_wrap #left_side .dashboard_side ul li .comp_box {overflow:hidden; display:block; font-size:0; white-space: nowrap;}
#container_wrap #left_side .dashboard_side ul li .comp_box img {display:inline-block; vertical-align:middle; width:80px; height:45px; background:#FFF; border:1px solid #737373; box-sizing:border-box;}
#container_wrap #left_side .dashboard_side ul li .comp_box span {display:inline-block; vertical-align:middle; padding-left:10px; font-size:12px; line-height:20px; color:#cccccc; width:140px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
#container_wrap #left_side .dashboard_side ul li .comp_box span strong {display:block; width:140px; font-weight:bold; color:#919191; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
#container_wrap #left_side .dashboard_side .goto_editor { display:block; font-size:14px; color:#CCC; padding:10px 0; margin-top:10px; background:url(/ssw/images/svg/icon_open_window.svg) no-repeat right center;}
#container_wrap #left_side .dashboard_side .goto_editor:hover {color:#e2105f;}
#container_wrap #left_side .vr_update { text-align:center; width:100%; font-size:12px; color:#c4c4c4; line-height:30px; background:#292929;}
#container_wrap #left_side .vr_update .button a {color:#fff;}
#container_wrap #left_side .vr_update .privacyPolicy {white-space:nowrap; padding:0 10px;}
#container_wrap #left_side .vr_update .privacyPolicy:after {content:''; display:inline-block; vertical-align:middle; width:14px; height:14px; margin:0 6px; background:url(/ssw/images/svg/icon_open_window.svg) no-repeat; }
#container_wrap #left_side .vr_update .privacyPolicy:hover:after {filter:brightness(10);}

/* contents */
#container_wrap .contents_wrap  {position:relative; background:#cdcdcd; overflow:hidden; height:100%; display:flex; flex-direction:column;}
#container_wrap .contents_wrap .snb {height:57px; background:#525252; padding:0 10px; white-space: nowrap; order:-1;}
#container_wrap .contents_wrap .snb ul:empty {display:none !important;}
#container_wrap .contents_wrap .snb ul {overflow:hidden; padding:0 2px 0 0px; white-space:nowrap; display:block;}
#container_wrap .contents_wrap .snb ul > li {display:inline-block; position:relative;}
#container_wrap .contents_wrap .snb ul > li a {display:block; color:#FFF; height:27px; line-height:27px; padding:0 12px; border:3px solid transparent; border-radius:18px; position:relative; z-index:999;}
#container_wrap .contents_wrap .snb ul > li a:hover {border:3px solid #ff0060; background:#ff0060; padding:0 12px; box-shadow:2px 2px 5px -2px #000;}
#container_wrap .contents_wrap .snb ul > li a:active {border:3px solid #cf0652; background:#4d4d4d; color:#b5b5b5; padding:0 12px; box-shadow:2px 2px 5px -2px #000;}
#container_wrap .contents_wrap .snb ul > li a.disable {color:#bcbcbc; cursor:default; background:none; border:none; padding:0 15px; box-shadow:0px 0px 0px 0px #000;}
#container_wrap .contents_wrap .snb ul > li a.active {border:3px solid #ff0060; background:#ff0060; padding:0 12px; box-shadow:2px 2px 5px -2px #000;}
#container_wrap .contents_wrap .snb ul > li > ul {display:none; position:fixed; top:140px; left:274px; background:#525252; z-index:990; padding:10px; border-radius:0 0 4px 4px; box-shadow:2px 4px 6px -1px rgba(0,0,0,0.3); animation:showDropDown 0.3s;}
#container_wrap .contents_wrap .snb ul > li #btnContentCreate.active ~ ul {display:block;}
#container_wrap .contents_wrap .snb ul > li.active ul {display:block;}
#container_wrap .contents_wrap .snb ul > li > ul > li {display:block; margin:0;}
#container_wrap .contents_wrap .snb ul > li > ul > li .btn {display:block; margin:4px 0;}
#container_wrap .contents_wrap .snb ul > li > ul > li a.btn {height:30px; padding:0 15px; border:2px solid transparent;}
#container_wrap .contents_wrap .snb ul > li > ul > li a.btn:hover {background:none; border:none; box-shadow:none; text-decoration:underline; border:2px solid transparent;}
#container_wrap .contents_wrap .snb ul > li > ul > li a.btn:active {color:#fff; border:2px solid #fff; background:none; box-shadow:none; outline:-webkit-focus-ring-color auto 1px;}
#container_wrap .contents_wrap .snb ul > li > ul > li .btn.icoNwin:after {filter:brightness(10);}

#container_wrap .contents_wrap .snb .okayNav {display:flex; display:-webkit-flex; justify-content:flex-start;align-items:center;-webkit-justify-content:flex-start; -webkit-align-items:center; position:relative;}

#container_wrap .contents_wrap .snb .tools {margin:0 4px; height:46px; clear:both;}
#container_wrap .contents_wrap .snb .tools .total {display:flex; display:-webkit-flex; height:46px; color:#FFF; font-size:12px; margin:0 10px; justify-content:flex-end; align-items:center;-webkit-justify-content:flex-end; -webkit-align-items:center;}
#container_wrap .contents_wrap .snb .tools .total .selectNum {font-size:12px; white-space:nowrap; text-align:right;}
#container_wrap .contents_wrap .snb .tools .total .selectNum .selected:after {content:'/'; margin:0 4px;}

@keyframes showDropDown {
	0% {opacity:0; transform:translate3d(0, -20px, 0);}
	100% {opacity:1; transform:translate3d(0, 0, 0);}
}

#container_wrap .contents_wrap .snb .btn_videowall {}
#container_wrap .contents_wrap .snb .btn_videowall a {text-indent:inherit; width:auto; height:auto; padding:0 12px; border:3px solid #4d4d4d; background:#4d4d4d; border-radius:20px;}
#container_wrap .contents_wrap .snb .btn_videowall a:hover {background:#cf0652; border:3px solid #cf0652;}
#container_wrap .contents_wrap .snb .btn_videowall a:active,
#container_wrap .contents_wrap .snb .btn_videowall a.active {background:#4d4d4d; border:3px solid #cf0652; box-sizing:border-box;}
#container_wrap .contents_wrap .snb .btn_videowall a.active:before {filter:contrast(4); -webkit-filter:contrast(4);}
#container_wrap .contents_wrap .snb .btn_videowall a:before,
#container_wrap .contents_wrap .snb .btn_videowall a:after {display:inline-block; vertical-align:middle;}
#container_wrap .contents_wrap .snb .btn_videowall a:before {content:''; width:18px; height:18px;}
#container_wrap .contents_wrap .snb .btn_videowall a:hover:before {filter:contrast(4); -webkit-filter:contrast(4);}
#container_wrap .contents_wrap .snb .btn_videowall a:after {content:attr(title); color:#fff; margin:0 4px; font-size:12px;}
#container_wrap .contents_wrap .snb .btn_videowall .videowall,
#container_wrap .contents_wrap .snb .btn_videowall .list {padding:0 20px 0 10px;}
#container_wrap .contents_wrap .snb .btn_videowall .videowall:before {background:url(/ssw/images/button/btn_videowall_a.png) no-repeat;}
#container_wrap .contents_wrap .snb .btn_videowall .list:before {background:url(/ssw/images/button/btn_list_a.png) no-repeat;}

#container_wrap .contents_wrap #navSnb {float:left; white-space:nowrap;}
/* #container_wrap .contents_wrap .snb ~ .content_wrap {height:calc(100% - 87px);} */


/*
 * We are hiding the invisible nav outside the screen
 * so we need to avoid the horizontal scroll
 */
body.okayNav-loaded {overflow-x:hidden;}
.okayNav-header {display:-webkit-flex; display:-ms-flexbox; display:flex; position:fixed; top:0; width:100%; padding:0 15px; flex-direction:row; align-items:center; justify-content:space-between;-webkit-align-items:center; -webkit-flex-direction:row; -webkit-justify-content:space-between; -ms-flex-align:center; -ms-flex-direction:row; -ms-flex-pack:justify;}
.okayNav:not(.loaded) {visibility:hidden; user-select:none;-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;}
.okayNav ul {float:left; /* We want two navigations - one hidden and one visible */}
.okayNav a {position:relative; z-index:1;}
.okayNav__nav--visible {overflow:hidden; white-space:nowrap;}
.okayNav__nav--visible li {display:inline-block;}
.okayNav__nav--visible a {display:block; padding:15px 15px; transition:color 200ms cubic-bezier(0.55, 0, 0.1, 1);/* Link styling for the visible part of the nav */}
.okayNav__nav--visible:empty ~ .okayNav__menu-toggle {top:0;}
/* Link styling for the off-screen part of the nav */
/*
.okayNav__nav--invisible {position:absolute; top:50px; z-index:999; overflow-y:scroll; background:#7e7e7e; padding:0px 10px 10px !important; line-height:40px; border-radius:0 0 4px 4px; box-shadow: 2px 4px 6px -1px rgba(0,0,0,0.3);}
*/
@keyframes showNavi {
	0% {opacity:0; transform:translate3d(0, -60px, 0);}
	100% {opacity:1; transform:translate3d(0, 0, 0);}
}
@-webkit-keyframes showNavi {
	0% {opacity:0; -webkit-transform:translate3d(0, -60px, 0);}
	100% {opacity:1; -webkit-transform:translate3d(0, 0, 0);}
}

.okayNav__nav--invisible {position:absolute; top:50px; z-index:9; background:#7e7e7e; overflow:hidden; border-radius:10px; box-shadow:0 8px 8px rgba(0, 0, 0, 0.2);  padding:10px !important; display:none !important; animation:showNavi 0.3s; -webkit-animation:showNavi 0.3s;}

.okayNav__nav--invisible li {display:block !important;}
.okayNav__nav--invisible li button {height:36px; font-size:14px !important;}
.okayNav__nav--invisible a {display:block; width:240px; padding:15px; margin:4px 0;}
[dir=rtl] .okayNav__nav--invisible a:first-child {margin-right: 0px !important;}
.okayNav__nav--invisible.nav-left {left:0; transform:translateX(-100%);-webkit-transform:translateX(-100%);}
.okayNav__nav--invisible.nav-right {right:0px;}
[dir=rtl] .okayNav__nav--invisible.nav-left {left:auto; right:0px;}
[dir=rtl] .okayNav__nav--invisible.nav-right {left:0; right:auto; transform:translateX(-100%); -webkit-transform:translateX(-100%);}
.okayNav__nav--invisible.transition-enabled {}
.okayNav__nav--invisible.nav-open {display:block !important;}

/* Kebab icon */
.okayNav__menu-toggle {position:relative; z-index:1; float:left; width:30px; height:30px; border-radius:50%; cursor:pointer; transition:-webkit-transform 400ms cubic-bezier(0.55, 0, 0.1, 1); transition:transform 400ms cubic-bezier(0.55, 0, 0.1, 1); transition:transform 400ms cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 400ms cubic-bezier(0.55, 0, 0.1, 1);}
.okayNav__menu-toggle:after {content:''; display:block; width:30px; height:30px; background:url(/ssw/images/svg/icon_more.svg)no-repeat; background-size:cover; filter:brightness(10);}
.okayNav__menu-toggle:hover {background:#cf0652;}
.okayNav__menu-toggle:active {box-shadow:inset 0 0 0px 3px #cf0652; background:#4d4d4d;}
.okayNav__menu-toggle.okay-invisible {display:none; opacity:0; user-select:none; pointer-events:none;-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;}

.okayNav__menu-toggle.icon--active {transform:rotate(90deg); -webkit-transform:rotate(90deg); box-shadow:inset 0 0 0px 3px #cf0652; background:#4d4d4d;}

/* contents catagory wrap */
#container_wrap .contents_wrap .content_wrap {height:calc(100% - 87px); padding:14px;}
#container_wrap .contents_wrap .content_wrap_sub {height:100%; padding:0px 0px 14px 0px;}
#container_wrap .contents_wrap .content_list {background:#FFF; height:calc(100% - 42px); border-bottom:1px solid #828282; position:relative;}
#container_wrap .contents_wrap .content_analytics {background:#FFF; height:calc(100% - 185px); border-bottom:1px solid #828282;}
#container_wrap .contents_wrap .content_dashboard {background:#FFF; height:calc(100% + 60px); border-bottom:1px solid #828282;}
#container_wrap .contents_wrap .content_analytics_detail {height:calc(100% - 132px);}

.footer_paging {height:57px;}
.footer_paging .select_item {color:#4d4d4d; font-size:13px; width:20%;}

.footer_paging .paging_wrap {width:20%; height:25px; text-align:right; white-space: nowrap;}
.footer_paging .paging_wrap .dropdown_box {color:#666; float:none !important;}
.footer_paging .paging_wrap .dropdown_box span {display:inline-block; vertical-align:middle; color:#464646; font-size:12px; margin:0 10px;}
.footer_paging .paging_wrap .dropdown_box .page_num .select_list {width:88px; text-align:left;}

/* ----------------------------------------------
OLED //
------------------------------------------------*/
header .h_close {display:block; width:50px; height:50px; text-indent:-999em; position:absolute; top:20px; right:20px; border-radius:50%; background:url(/ssw/images/button/h_btn_close_n.png) no-repeat;}
header .h_close:hover {background:url(/ssw/images/button/h_btn_close_f.png) no-repeat;}
header .h_close:active {background:url(/ssw/images/button/h_btn_close_p.png) no-repeat;}