/* 공통항목에서 이동 */
@font-face {
 font-family: "Malgun Gothic", "Nanum Gothic", "돋움", Dotum, Helvetica, Verdana, Arial, sans-serif;
 src:url('../fonts/NanumGothic.eot');
 src:url('../fonts/NanumGothic.eot?#iefix') format('embedded-opentype'),  url('../fonts/NanumGothic.woff') format('woff'),  url('../fonts/NanumGothic.ttf') format('truetype');
 url('../fonts/NanumGothic.svg#NanumGothic') format('svg')  src:local(※), url('../fonts/NanumGothic.woff') format('woff');
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;

  }
  to {
    opacity: 0;
  }
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, 	sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: middle;
}
HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
	display: block;
}


body {
	font-size:0.9em;
	color: #3e454c;
	background-color: #f3f3f3;
	font-family:"Malgun Gothic","Nanum Barun Gothic", Arial, Helvetica, sans-serif, 'Font Awesome 5 Free';
	
}
img { vertical-align:middle;}

input, select, textarea{ 
	vertical-align:middle;
    padding: 6px 12px;
    font-size: 16px;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}
input[type="file"]{
	padding: 0 6px !important;
}


input.readonly {background:#f2f2f2;}

body::after {
	clear: both;
	content: "";
	display: table;
}
ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a { text-decoration: none; color: #FFFFFF;}
a:visited{text-decoration:none; color: #FFFFFF;}
a:hover{text-decoration:none; color: #FFFFFF;}
a:active{text-decoration:none; color: #FFFFFF;}

a.on{color: #d7ff47;}

input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
 display: none;
}


h4{font-weight:bold; font-size:17px; padding:0 0 0 0; line-height: 25px !important; }
h4 i{line-height: 25px !important;}

h5{font-weight:bold; font-size:15px; padding:0 0 0 0; line-height: 20px !important; }
h5 i{line-height: 20px !important;vertical-align: middle;display:contents; }

p i{margin-bottom: 5px;}


/** 로그인 */ 
.loginBox{position:fixed;left:50%;
top:50%;
overflow:hidden;width:800px;height:500px;margin-left:-400px;margin-top:-250px !important;
background: url(../../images/cupangFlex/loginBg.png) 100% !important;
}
.loginDiv{
	margin-left:420px; 
	margin-top: 200px;
	background: #fff;
    border: 1px solid #dfdfdf;
    padding: 10px;
}


/*** Header ***/
.main-header {background:#334655; text-shadow:none; -webkit-text-shadow:none; border:0;z-index: 1000;position: fixed;width: 100%;top: 0}
.main-header h1 {text-align:center; margin:0; padding:15px 0 0 0; color:#fff; margin:0;font-size: 100%; font-size:18px; }
.main-header .topDiv{height: 50px;}
.main-header .subTopMenu{background-color: #15232e;}
.main-header .subTopMenu .on{color: #67e5fc !important;}
.main-header .subTopMenu div{color: #FFFFFF;height: 30px;line-height: 30px;text-align: center;}

.main-header .all_menu {display:block; padding:0; border:0; width:50px; height:50px; 
font-size:1.5em;line-height:50px;text-align:center;
margin:0; right:0; top:0;position: absolute;}

.main-header .home_btn {display:block; padding:0; border:0; width:50px; height:50px;
font-size:1.5em;line-height:50px;text-align:center; 
margin:0; left:0; top:0;position: absolute;}

.ui-header .ui-title, .ui-footer .ui-title{
	font-size: 1em;
    min-height: 1.1em;
    text-align: center;
    display: block;
    margin: 0 30%;
    padding: .7em 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    outline: 0 !important;
}


.ui-panel {height:100%; position:fixed; border:0; background:none !important;}
.ui-panel:before {content:""; display:block; width:100%; height:100%; position:absolute; left:0; top:0; z-index:5; background:url(../../images/opinion/common/panel_bg.png) no-repeat left bottom; background-size:70% auto;}
.ui-panel:after {content:""; display:block; width:100%; height:100%; position:absolute; left:0; top:0; z-index:1; background:#001221; opacity:0.95; -webkit-opacity:0.95;}
.ui-panel-inner {background:none; padding:1.5em; position:relative; z-index:5; text-shadow:none; -webkit-text-shadow:none; border:0;;}
.ui-panel-inner ul {padding-top:8vw;}
.ui-panel-inner ul li {border-bottom:1px solid #374551;}
.ui-panel-inner ul li a {display:block; color:#fff !important; font-weight:normal; font-size:3.8vw; padding:2vw 1vw 1.8vw 1vw;}
.ui-panel-inner .close_btn {position:absolute; left:1.5em; top:1.5em; display:block; width:6vw; height:6vw; background:url(../../images/opinion/common/panel_close.png) no-repeat center 50%; background-size:100% auto;}


.main-content {padding:60px 10px 120px 10px;}
.main-content {-webkit-text-shadow:none; text-shadow:none;}

.main-footer{background:#334655;left: 0;bottom: 0;width: 100%;z-index: 1000;position: fixed;color: #FFFFFF;text-align: center;}
.main-footer .footMenu{height: 50px;}
.main-footer .footMenu div{padding-top:5px;}
.main-footer .footMenu div i{width: 100%;height: 24px;line-height: 24px;}
.main-footer .footMenu div span{width: 100%;height: 24px;line-height: 24px;}
.main-footer .buttonDiv{background-color: #a8b2ba;height: 40px;}
.main-footer .buttonDiv a{height: 40px;line-height: 40px;}

/* 컨텐츠 관련 */
.centent_box{background-color: #FFFFFF;padding: 10px;border: 1px solid #dfdfdf; border-radius: 10px;}
.info_1{font-weight:600; font-size:17px; padding-left:25px; color:#333;
line-height: 20px;border-bottom: 1px solid #dfdfdf;}

.info_1:before {
  position: absolute;
  content: "\f00c";
  display: block;
  color: #E34724;
  text-indent: 0;
  font-family: 'Font Awesome 5 Free';
  height: 20px;
  width: 25px;
  line-height: 20px;
  margin-left: -25px;
}



.dot_bul{background:url(../../images/common/dot_bul.gif) no-repeat 2px 10px; padding-left:10px;}


.box {background:#fff; border:1px solid #dfdfdf; padding: 5px !important;}
.box2 {background:#fff; border:1px solid #dfdfdf; padding: 10px !important;box-shadow: 10px 10px 25px #d6d8db;}
.boxR {background:#fff; border:0; padding: 10px !important;border-radius: 20px;box-shadow: 5px 5px 15px #5b788f;}

.boxRad {background:#fff; border:1px solid #b2b2b3; padding: 5px !important;border-radius: 10px;}
.boxRad2 {background:#fff; border:1px solid #b2b2b3; padding: 5px !important;border-radius: 20px;}

.box.title{background-color: #3f6bad;color: #FFFFFF;border: 1px solid #3f6bad;}
.box .boxBody{background-color: #e3e3e3;color: #4b4b4b;border: 1px solid #3f6bad;}

.box_ty1 {background:#fff; border-radius:1vw; padding:1.5em; position:relative; z-index:10;}
.box_ty2 {background:#fff; border-radius:1vw; padding:1.5em; position:relative; z-index:10;}

.boxSm1{padding: 1px 2px ;border-radius: 3px;background-color: #5093e2;color: #FFFFFF;display: inline-block;}

.shadow{box-shadow: 10px 10px 25px #d6d8db;}


.boxTitle{
	display: block;
    margin-top: -30px;
    margin-bottom: 10px;
    text-align: center;
}
.boxTitle span{
	display: inline-block;
    padding: 10px 20px;
    background-color: #657176;
    color: #FFFFFF;
}



/* 정보작성 */
.info_form {padding:4vw 0; }
.info_form.first {padding-top:2vw; border:0;}
.info_form.last {padding-bottom:0;}
.info_form li {position:relative; padding:0 0 0 80px; margin-top:1vw;min-height: 2.1em}
.info_form li:first-child {margin-top:0;}
.info_form li strong {display:inline-block; position:absolute; left:0; top:2vw; font-size:3.2vw;}
.info_form li span {display:block; position:relative;}
.info_form li span:after {content:""; display:block; clear:both;}
.info_form li span.radio {padding:1.9vw 0;}
.info_form li span.ty1 {width:95%;padding-left: 5%;}
.info_form li span.ty2 {width:100%;}
.info_form li span.ty3 {width:100%;}
.info_form li span.ty4 {width:50%;}
.info_form li div.ty1 {width:95%;padding-left: 5%;}
.info_form li div.ty2 {width:100%;}
.info_form li div.ty3 {width:100%;}
.info_form li div.ty4 {width:50%;}

.info_form2{padding:4vw 0;}


.info_form li span select {border:1px solid #afafaf; height:2.5em; font-size:3.2vw; box-sizing:border-box; padding:0.3vw 1.5em 0 0.6em; display:block; width:100%; border-radius:1vw; -webkit-border-radius:1vw;
-webkit-appearance:none; -moz-appearance:none; appearance:none; background:#fff url(../../images/opinion/common/select_ico.png) no-repeat right 50%; background-size:auto 25%;}

.info_form li .confirm_btn {background:#475666; color:#fff; font-weight:normal; display:block; width:20%; height:8.2vw; position:absolute; right:0; top:0; padding:0; margin:0; border:0; text-align:center; border-radius:1vw; line-height:8.3vw; font-size:3vw;}

.searchDay{
	width: 500px;
	font-size: 12px;
	float: right;
}

.searchDay a,.searchDay span{
	color: #6c6565;font-weight: 600;display: block;
}

.searchDay .beforeDay{
	background-color: #FFFFFF;border: 1px solid #dfdfdf;
}
.searchDay .toDay{
	background-color: #FFFFFF;border-top: 1px solid #dfdfdf;border-bottom:1px solid #dfdfdf; 
}
.searchDay .afterDay{
	background-color: #FFFFFF;border: 1px solid #dfdfdf;
}
.searchDay .searchIcon{
	background-color: #FFFFFF;border: 1px solid #dfdfdf;
}

.searchDay .searchIcon {
	background-color: #FFFFFF;
	color: #4326cc;
}


.priceInfo{
	border: 1px solid #dfdfdf; padding: 10px;background-color: #FFFFFF;
	box-shadow :10px 10px 25px #d6d8db;
}

.priceInfo .type{font-size: 16px; }
.priceInfo .col-3{padding: 5px 5px 5px 5px !important; }
.priceInfo .col-4{padding: 5px 5px 5px 5px !important; }
.priceInfo .col-8{padding: 5px 5px 5px 5px !important; }
.priceInfo .col-9{padding: 5px 5px 5px 5px !important; }
.priceInfo .dataInfo{background-color: #dfdfdf;font-weight: 600;}
.priceInfo .dataInfo2{background-color: #96c7ed;font-weight: 600;}
.priceInfo .final{background-color: #64937f;color: #FFFFFF;font-weight: 600; padding: 5px 5px 5px 5px !important;text-align: center;font-size: 16px;line-height: 30px;border-radius: 10px; }
.priceInfo a{color: #dfdfdf;}

.priceInfo .detail{background-color: #595959;color: #FFFFFF;}
.priceInfo .detail div span{line-height: 30px;height: 30px;display: block;}
.priceInfo .detail div a{line-height: 30px;height: 30px;display: block;background-color: #334655;border-radius: 5px;}
.priceInfo .timeDiv{font-size: 12px;margin-left: 10px;font-weight: 400;padding-top: 2px;}
.priceInfo .detail h6{color: #222222;}

.bbc{
	border-bottom: 1px solid #b2b2b3;
}
.btc{
	border-top: 1px solid #b2b2b3;
}
.blc{
	border-left: 1px solid #b2b2b3;
}
.brc{
	border-right: 1px solid #b2b2b3;
}





.lockPassword{
	font-size: 20px;
	padding: 10px 20px;
	background: #2425ab;
	color: #FFFFFF;
	display: inline-block;
	border-radius: 10px;
}
.lockPasswordImg{
	display:block;
	border: 1px solid #2425ab;max-height: 400px;
}
.lockPasswordImg img{
	max-width:100%;
	max-height: 400px;
	
}

.swiper-container {
  width: 100%;
  padding-bottom: 30px;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 100%;
}



/** MainLayout Start */
.page-container { float: left; min-height: 100%; position: relative; background: #F1F4F7;width: 100%; }
.page-container .page-content-wrap .page-content { float: left; }
.page-container .page-content-wrap .page-content-margin {margin : 20px 80px 50px 80px;}
.page-container .page-content-wrap { min-height: 100%; margin-left: 250px; padding: 120px 0 0 0; position: relative;  zoom: 1; background-color: #F1F4F7;}
.page-zns-nav-toggled .page-content-wrap .page-content-margin {margin : 30px 100px 30px 100px;}
/** MainLayout End */


/** Top 영역 Start */
.head-top .head-top-left {float:left;display: inline-block;  top: 0; color: #e1e1e1; font-size: 12px; font-weight: 300; line-height: 60px; overflow: hidden;padding-left: 10px;padding-right: 30px; }
.head-top .head-top-left a{line-height: 70px;}
.head-top .head-top-right{float: right;display: inline-block;padding-right:20px;}
.head-top .head-top-right a{margin-top:20px;}
.head-top { position: fixed; left: 0; top: 0; width: 100%; height: 70px; padding: 0; margin: 0;z-index: 10;border-bottom: 1px solid #999999; background-color: #FFFFFF; }
.head-top .logo { padding: 0; margin: 0; float: left; }
.head-top .logo a { display: block; font-size: 24px; color: #fff; width: 60px; height: 70px; line-height: 70px; text-align: center; overflow: hidden; background-size: 173px 36px }
.head-top .head-icon-btn { position: relative; display: block; float: left; width: 60px; height: 70px; overflow: hidden; color: #232323; background: #FFFFFF; text-indent: -9999px;}
.head-top .head-icon-btn:hover {background: #0080ff; color: #000000;}
.head-icon-btn:before { position: absolute; top: 0; left: 0; display: block; width: 60px; text-align: center; line-height: 70px; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 16px; text-indent: 0;}
.head-icon-btn.sidebar-toggle { position: relative; display: block; float: left; width: 60px; height: 50px;line-height:50px ; overflow: hidden;text-indent: -9999px;}
.head-icon-btn.sidebar-toggle:hover{color: #000000;}
.head-icon-btn.sidebar-toggle:before { content: "\f03b"; font-weight: 900; line-height:50px ;}

.head-top .head-icon-btn.head-top-logout { top: 0; border-left: solid 1px #999999;border-bottom: solid 1px #999999; }
.head-top .head-icon-btn.head-top-logout:before { content: "\f023"; font-weight: 900; color: #524e4e;}
.head-top .head-icon-btn.head-top-alert { top: 0; border-left: solid 1px #999999;border-bottom: solid 1px #999999; }
.head-top .head-icon-btn.head-top-alert:before { content: "\f0f3"; font-weight: 900; color: #524e4e;}
.head-top .head-icon-btn.head-top-alert .notification-cnt{text-indent: 0;position: absolute;top:15px;right: 10px;display: block; min-width: 15px;height: 15px;color: #FFFFFF;background-color: #007bff;font-size: 10px;overflow: hidden;text-align: center;line-height:15px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; }
.head-top .head-icon-btn.home-btn { border-right: solid 1px #999999;border-bottom: solid 1px #999999; }
.head-top .head-icon-btn.home-btn:before { content: "\f015"; font-weight: 900; }
.head-top .head-top-user { position: absolute; right: 60px; top: 0; color: #333333; font-size: 12px; overflow: hidden;margin-right: 20px;margin-top: 15px; }
.head-top .head-top-user strong { font-size: 14px; font-weight: 400 }
.head-top .topmenu{ float: left; }
.head-top .topmenu ul{ display: inline-block; margin-left: 130px;}
.head-top .topmenu ul li{ float: left; font-size: 1.0em; height: 70px; line-height: 70px; }
.head-top .topmenu ul li i{ margin-right: 5px;  }
.head-top .topmenu ul li.active a{border-bottom: 3px solid #5289ca;color: #5289ca;height: 58px;}
.head-top .topmenu ul li a{ display:inline-block; padding: 0 15px 0 15px; font-weight: 600; color: #222222; font-size: 15px;}
.head-top .topmenu ul li a:hover { color: #0080ff; }

.head-top .head-top-right-btn{ float: right; }
.head-top .head-icon-btn.head-top-default { top: 0; border-left: solid 1px #999999;border-bottom: solid 1px #999999; text-indent: 0; width: auto;text-align: center;color: #524e4e; }
.head-top .head-icon-btn.head-top-default i{ display: inline-block; width: 100%; text-align: center; font-size: 40px; margin-top: 5px; }
.head-top .head-icon-btn.head-top-default span{ color: #524e4e;font-weight: 800; }
.head-top .head-icon-btn img{ margin-left: 20px; margin-right: 20px; height: 30px; width: 25px; }

.header-nav-container { float: left; z-index: 110; }
.header-nav-container .header-nav-wrap { padding: 0; margin: 0; display: block; white-space: nowrap; }
.header-nav-container .header-nav-wrap > li {position: relative; padding: 0; margin: 0; display: inline-block; }
.header-nav-container .header-nav-wrap > li > a { display: block; min-width: 80px; height: 70px; text-align: center; padding: 12px 10px 0 10px; font-size: 12px; line-height: 16px; color: #333; font-weight: 600; text-decoration: none; border: solid 1px transparent; }
.header-nav-container .header-nav-wrap > li > a:hover > .material-icons,
.header-nav-container .header-nav-wrap > li > a.active > .material-icons { font-family: 'Material Icons'; color: #fff; }
.header-nav-container .header-nav-wrap > li.active > a:hover,
.header-nav-container .header-nav-wrap > li > a:hover,
.header-nav-container .header-nav-wrap > li > a.active { color: #FFFFFF; border-bottom: 5px solid #0064D4; background-color: #0375F4;}
.header-nav-container .header-nav-wrap > li > a > i { display: block; height: 28px; margin-bottom: 5px; font-size: 26px; margin-top: 2px; }

.header-nav-container .header-nav-wrap > li.active > a { color: #5289ca; border-bottom: 5px solid #0064D4; }
.header-nav-container .header-nav-wrap > li.active > a > i { color: #000000; }
.header-nav-container .header-nav-wrap > li > ul { display: none; padding: 0; margin: 0; position: absolute; top: 69px; z-index: 111; border: 1px solid #999999; }
.header-nav-container .header-nav-wrap > li > ul > li { position: relative; display: block; padding: 0; margin: 0; border-top: solid 1px #999999; background-color: #fff; }
.header-nav-container .header-nav-wrap > li > ul > li:first-child { border: 0; }
.header-nav-container .header-nav-wrap > li > ul > li > a { display: block; height: 50px; text-align: left; padding: 0 36px 0 20px; font-size: 13px; line-height: 50px; color: #333; font-weight: 600; text-decoration: none; }
.header-nav-container .header-nav-wrap > li > ul > li > a:hover { border-left: solid 3px #0064D4; background-color: #F7F8F9; }
.header-nav-container .header-nav-wrap > li > ul > li > ul { display: none;border: 1px solid #999999; }

.header-nav-container .header-nav-wrap > li > ul > li:hover > ul { display: block; padding: 0; margin: 0; position: absolute; left: 100%; top: -1px; z-index: 112; border: 1px solid #999999; }
.header-nav-container .header-nav-wrap > li > ul > li:hover > ul > li { display: block; padding: 0; margin: 0; border-top: solid 1px #999999; background-color: #fff; }
.header-nav-container .header-nav-wrap > li > ul > li:hover > ul > li:first-child { border: 0; }
.header-nav-container .header-nav-wrap > li > ul > li:hover > ul > li > a { display: block; width: 160px; height: 50px; text-align: left; padding: 0 16px; font-size: 13px; line-height: 50px; color: #333; font-weight: 600; text-decoration: none; }
.header-nav-container .header-nav-wrap > li > ul > li:hover > ul > li > a:hover { border-left: solid 3px #0064D4; background-color: #F7F8F9; }
.header-nav-container .header-nav-wrap > li > ul > li.xn-openable > a { position: relative; }
.header-nav-container .header-nav-wrap > li > ul > li.xn-openable > a:before { position: absolute; font-family: "Font Awesome 5 Free"; content: "\f105"; font-size: 14px; line-height: 50px; display: block; width: 20px; height: 50px; text-align: center; right: 0px; cursor: pointer; }

.header-nav-container .header-nav-wrap > li.xn-openable:hover > ul { display: block; }
.header-nav-container .header-nav-wrap:before, .header-nav-container .header-nav-wrap:after { content: " "; display: block; }
.header-nav-container .header-nav-wrap:after { clear: both; }
.header-nav-container .header-nav-wrap .nav-icon { display: block; margin: 0 auto; margin-bottom: 5px; width: 24px; height: 24px; background-repeat: no-repeat; background-size: 24px 24px; background-position: 50% 50%; background-color: transparent; }
/** Top 영역 End */

/** Top 아래 Start */

.page-container.page-zns-nav-toggled .sidebar-toggle:before { content: "\f03c"; }
.page-container.page-zns-nav-toggled .page-sidebar { width: 60px !important; }
.page-container.page-zns-nav-toggled .page-sidebar span{display: none;}
.page-container.page-zns-nav-toggled .page-content-wrap { margin-left: 60px; }

.page-content-wrap-top{
	background-color: #e0e4ef; border-bottom: solid 1px #D1D8E3; height: 50px; margin-bottom: 20px;
	width: 100%;
	position: fixed;
	margin-top : 70px;
	z-index: 7;
	margin-left: 0;
}
.page-content-wrap-top a {color: #535362 !important;};

.page-container.page-zns-nav-toggled .page-content-wrap-top{
margin-left: 0;
z-index: 7;

}


.breadcrumb {
/*   width:calc(100% - 250px); */
  width:100%;
  display: block;
  padding: 0 30px 0 270px;
  background-color: #e0e4ef;
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  margin-bottom: 20px;
  height: 50px;
  border-bottom: solid 1px #D1D8E3;
}

.page-zns-nav-toggled .breadcrumb {
	padding: 0 100px 0 160px;
}

.page-container.page-zns-nav-toggled .breadcrumb {
/* 	width:calc(100% - 60px); */
	width:100% ;
}
 

.breadcrumb .home {
	float: left;
	width: 60px;
}
.breadcrumb > li {
  display: block;
  position: relative;
  float: left;
  font-size: 14px;
  height:50px;
  line-height: 50px;
  padding: 0 10px 0 36px;;
  background: url(http://mylovejs2.cdn3.cafe24.com/cupangFlex/etc/breadcrumb_arrow.png) no-repeat 0 0 transparent;
}
.breadcrumb > li:first-child {
  padding: 0;
  background: none;
}
.breadcrumb > li:before {
  padding: 0;
  content: '';
}
.breadcrumb > li.home > a {
  display: block;
  width: 60px;
  height: 50px;
  font-size: 0;
  text-indent: -9999px;
  background: url(http://mylovejs2.cdn3.cafe24.com/cupangFlex/etc/home.png) no-repeat 50% 50% transparent;
  background-size: 24px 24px;
  float: right;
}
.breadcrumb > li.open {
  display: block;
}
.breadcrumb > li.open > ul {
  display: block;
}
.breadcrumb > li ul {
  padding: 0;
  margin: 0;
}
.breadcrumb > li > ul {
  display: none;
  position: absolute;
  left: -1px;
  top: 49px;
  z-index: 102;
  border: solid 1px #d6dbe1;
}
.breadcrumb > li > ul > li {
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
  border-top: solid 1px #d6dbe1;
  background-color: #fff;
}
.breadcrumb > li > ul > li:first-child {
  border: 0;
}
.breadcrumb > li > ul > li > a {
  display: block;
  width: 219px;
  height: 50px;
  text-align: left;
  padding: 0 16px;
  font-size: 13px;
  line-height: 50px;
  color: #333;
  font-weight: 700;
  text-decoration: none;
}
.breadcrumb > li > ul > li > a:hover {
  background-color: #F7F8F9;
}
.breadcrumb > li > ul > li.active > a {
  background-color: #74a5df;
  color: #fff;
}
.breadcrumb > li > ul > li > ul {
  display: none;
}
.breadcrumb > li > ul > li:hover > ul {
  display: block;
  padding: 0;
  margin: 0;
  position: absolute;
  left: 100%;
  top: 0;
  z-index: 112;
  border: 1px solid #d6dbe1;
}
.breadcrumb > li > ul > li:hover > ul > li {
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
  border-top: solid 1px #d6dbe1;
  background-color: #fff;
}
.breadcrumb > li > ul > li:hover > ul > li:first-child {
  border: 0;
}
.breadcrumb > li > ul > li:hover > ul > li > a {
  display: block;
  width: 200px;
  height: 50px;
  text-align: left;
  padding: 0 12px;
  font-size: 13px;
  line-height: 50px;
  color: #333;
  font-weight: 700;
  text-decoration: none;
}
.breadcrumb > li > ul > li:hover > ul > li > a:hover {
  background-color: #F7F8F9;
}
.breadcrumb > li > ul > li:hover > ul > li.active > a {
  background-color: #74a5df;
  color: #fff;
}
.breadcrumb > li > ul > li:hover > ul > li > ul {
  display: none;
}
.breadcrumb > li > ul > li:hover > ul > li:hover > ul {
  display: block;
  padding: 0;
  margin: 0;
  position: absolute;
  left: 100%;
  top: 0;
  z-index: 112;
  border: 1px solid #d6dbe1;
}
.breadcrumb > li > ul > li:hover > ul > li:hover > ul > li {
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
  border-top: solid 1px #d6dbe1;
  background-color: #fff;
}
.breadcrumb > li > ul > li:hover > ul > li:hover > ul > li:first-child {
  border: 0;
}
.breadcrumb > li > ul > li:hover > ul > li:hover > ul > li > a {
  display: block;
  width: 160px;
  height: 50px;
  text-align: left;
  padding: 0 16px;
  font-size: 12px;
  line-height: 50px;
  color: #333;
  font-weight: 700;
  text-decoration: none;
}
.breadcrumb > li > ul > li:hover > ul > li:hover > ul > li > a:hover {
      background-color: #F7F8F9;
}
.breadcrumb > li > ul > li:hover > ul > li:hover > ul > li.active > a {
  background-color: #74a5df;
  color: #fff;
}
.breadcrumb > li > ul .xn-openable > a {
  position: relative;
}
.breadcrumb > li > ul .xn-openable > a:before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  font-size: 14px;
  line-height: 20px;
  display: block;
  width: 20px;
  height: 20px;
  text-align: center;
  right: 0px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  cursor: pointer;
}
.breadcrumb > li.right-btn {
  float: right;
  background: none;
  padding: 0 3px 0 0;
  width: auto;
  border: 0;
}
.breadcrumb > li.right-btn .btn {
  font-size: 14px;
  background-color: #f6f9fc;
  border:1px solid #d6dbe1;
  display: inline-block;
  margin-left: 2px;
  overflow: hidden;
  color: #444 !important;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.breadcrumb > li.right-btn .btn .material-icons {
  color: #808080;
}
.breadcrumb > li.right-btn .btn:hover,
.breadcrumb > li.right-btn .btn.active {
  color: #222;
}
.breadcrumb .nowSel {
  display: block;
  text-decoration: none;
  color: #000;
}
.breadcrumb .nowSel .material-icons {
  /* color: #909191; */
}
.breadcrumb:before,
.breadcrumb:after {
  content: " ";
  display: block;
}
.breadcrumb:after {
  clear: both;
}

.breadcrumb .btn{
  margin-top: 5px;
}
/** Top 아래 End */




/* Left 메뉴 Start */
.page-container .page-sidebar { width: 250px; float: left; position: relative; z-index: 6; -webkit-transition: all 200ms ease;}
.page-container .page-sidebar.page-sidebar-fixed { position: fixed; left: 0; top: 0; height: 100%; background: #f9f9f9;border-right: 1px solid #999999; }

.zns-nav-container { float: left; padding-top: 120px; padding-bottom: 90px; width: 100% }
.zns-nav, .zns-nav ul { width: 100%; padding: 0; margin: 0; float: left; list-style: none; display: block; z-index: 3 }
.zns-nav { background: #f9f9f9 }
.zns-nav li { float: left; display: block; width: 100%; padding: 0; margin: 0; position: relative; border-bottom: 1px solid #d3d3d3; }
.zns-nav li>a { display: block; float: left; width: 100%; line-height: 18px;padding: 15px 0 10px 0; color: #464343; font-size: 14px; font-weight: 600; text-decoration: none; vertical-align: text-bottom }
.zns-nav li>a span{position: fixed;max-width: 180px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.zns-nav li>a .fa, .zns-nav li>a .glyphicon { color: #000; text-align: center; width: 20px; margin-right: 10px; }
.zns-nav li>a:hover { background: #e0e0e0; }
.zns-nav li>a:hover .fa, .zns-nav li>a:hover .glyphicon { color: 0 }
.zns-nav li>a>i{color: #464343;width: 60px !important; text-align: center;}

.zns-nav li>ul { max-height: 0; -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; overflow: hidden }
.zns-nav li>ul li>a { color: #4A4A4A; font-size: 14px; line-height: 20px; font-weight: 400; padding: 14px 10px;  background: #eaeaea }
.zns-nav li>ul li>a span{position: fixed;}
.zns-nav li>ul li>a:hover { background: #e0e0e0; color: #000 }
.zns-nav li>ul li.active>a { background: #e0e0e0; color: #4990E2; font-weight: bolder; }
.zns-nav li.xn-openable:before { position: absolute; font-family: 'Font Awesome 5 Free'; content: "\f107"; font-weight: 900; font-size: 14px; width: 20px; height: 20px; color: #000; right: 0; top: 10px; cursor: pointer; }
.zns-nav li.xn-openable>.informer { right: 25px }
.zns-nav li.xn-openable  ul{display: none;}
.zns-nav li.active.xn-openable:before { content: "\f106" }
.zns-nav li.active>a { background: #f1f1f1; -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; color: #4990E2 }
.zns-nav li.active>a .fa, .zns-nav li.active>a .glyphicon { color: #4990E2 }
.zns-nav li.active>ul { max-height: 1200px;display: inline-block; }
.zns-nav li.xn-title { padding: 20px 10px 10px; line-height: 20px; font-weight: 300; font-size: 16px; color: #999; border-bottom: 1px solid #2f3c48 }
.zns-nav li.xn-banner { padding: 10px }
.zns-nav li.xn-banner>a { background: #fea223; color: #fff }
.zns-nav li.xn-banner>a .fa, .zns-nav li.xn-banner>a .glyphicon { color: #fff }
.zns-nav>li>ul>li>a { padding-left: 25px }
.zns-nav>li>ul>li>a:hover { padding-left: 30px }
.zns-nav>li>ul>li.active>a { padding-left: 30px }
.zns-nav>li>ul>li>ul>li>a { padding-left: 40px }
.zns-nav>li>ul>li>ul>li>a:hover { padding-left: 45px }
.zns-nav>li>ul>li>ul>li.active>a { padding-left: 45px }
.zns-nav>li>ul>li>ul>li>ul>li>a { padding-left: 50px }
.zns-nav>li>ul>li>ul>li>ul>li>a:hover { padding-left: 55px }
.zns-nav>li>ul>li>ul>li>ul>li.active>a { padding-left: 55px }
.zns-nav>li>ul>li>ul>li>ul>li>ul>li>a { padding-left: 60px }
.zns-nav>li>ul>li>ul>li>ul>li>ul>li>a:hover { padding-left: 65px }
.zns-nav>li>ul>li>ul>li>ul>li>ul>li.active>a { padding-left: 65px; }
.page-container.page-zns-nav-toggled .sidebar-toggle:before { content: "\f03c"; }
.page-container.page-zns-nav-toggled .page-sidebar { width: 60px !important; }
.page-container.page-zns-nav-toggled .page-sidebar span{display: none;}
.page-container.page-zns-nav-toggled .page-content-wrap { margin-left: 60px; }
.page-content-wrap-top{
	background-color: #e0e4ef; border-bottom: solid 1px #D1D8E3; height: 50px; margin-bottom: 20px;
	width: 100%;
	position: fixed;
	margin-top : 70px;
	z-index: 7;
/* 	margin-left: 250px; */
	margin-left: 0;
}
.page-container.page-zns-nav-toggled .page-content-wrap-top{
margin-left: 0;
z-index: 7;

}

.page-container.page-zns-nav-toggled .footer { width: 100%; padding: 0 10px }
.page-container.page-zns-nav-toggled .footer .make { float: right; padding: 8px; font-size: 12px; }
.page-container.page-zns-nav-toggled .footer .desc { float: left; color: #e1e1e1; }

.page-container.page-zns-nav-toggled .zns-nav li.xn-openable:before {top: 27px;left: 45px;right: auto;}
.page-container.page-zns-nav-toggled .zns-nav li>ul li>a{padding: 15px 0 10px 0;}
.page-container.page-zns-nav-toggled .zns-nav li>ul li>a>i{color: #464343;width: 60px !important; text-align: center;}
/* Left 메뉴 End */