/* style css */
body, html {
	height: 100%;
	min-width:1340px;
	background-color:#F5F7FA;
	-ms-overflow-style: none;

}


/* 스크롤바 디자인변경 */

body::-webkit-scrollbar {
    width: 10px;
}
body::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    border-radius: 10px;
}
body::-webkit-scrollbar-track {
    background-color: #eee;
}

a {
	font-family:'NotoSansKR-Regular'
}

::selection {
   background: #252525;
   color: #fff
}

::-moz-selection {
   background: #252525;
   color: #fff
}


::-webkit-selection {
    background: #252525;
   color: #fff
}


.flex {
	display: -webkit-flex;
	display: flex
}

.flex-v {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center; 
	align-items: center
}
table{
	table-layout: fixed;
}

body {
	-webkit-font-smoothing: antialiased;
	color:#333
}

.row {
	max-width:1300px;
	margin: auto
}

/* 헤더 */
.header {
	background-color:#161425;
	position:fixed;
	top: 0;
	left: 0;
	right: 0;
	text-align:center;
	z-index: 2;
	color:#fdfdfd;
	display: block;
	padding: 20px;
	padding-left: 270px;
	height: 80px;
	transition: padding 300ms;
}

.close .header {
	padding-left: 50px;
}

.header a {
	color:#fdfdfd;
}

.header .title .user {
	display:inline-block;
	width: 40px;
	height: 40px;
	line-height:40px;
	border-radius:50%;
	background: #345175;
    color: #6283ad;
	vertical-align:top;
	margin-right: 10px;
}
.header .title .user i{line-height: 42px;}
.side-menu .toggle-btn i{
	line-height: 27px;
	height: 20px;
}
.header .title strong {
	font-size:25px;
	margin-right: 10px
}

.header .title .welcome {
	display:inline-block;
	line-height:40px;
	font-size:15px;
	color: #5b7392;
	vertical-align:top
}


.header .right-menu {
	line-height:40px;
}

.header .right-menu .top-menu{
	display: flex;
	height: 40px;
}

.header .right-menu .top-menu button {
	vertical-align:top
}

.header .right-menu .top-menu li {
	font-size:14px;
	margin-left: 15px;
	line-height: 38px;
}

.header .right-menu .top-menu li p.shop{
	line-height: 42px;
}
.header .right-menu .top-menu li a,
.header .right-menu .top-menu li button {
	color:#5b7392;
	line-height: 40px;
}

.header .right-menu .top-menu li a.homepage {
	color:#7D99BB
}

.header .right-menu .top-menu li a:hover,
.header .right-menu .top-menu li button:hover {
	color:#fff
}

/* 사이드메뉴 */
.side-menu {
	width: 250px;
	position:fixed;
	z-index: 3;
	height: 100%;
	background-color:#fdfdfd;
	border-right:1px solid #efefef;
	-webkit-transform: translate3d(0,0,0);
	 -moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	-webkit-transition-duration: 300ms;
	transition-duration: 300ms;
}

.close .side-menu {
	-webkit-transform: translate3d(-220px,0,0);
	 -moz-transform: translate3d(-220px,0,0);
	transform: translate3d(-220px,0,0);
	padding-right: 30px
}

.side-menu .toggle-btn {
	position:absolute;
	top: 10px;
	right: 10px;
	cursor:pointer;
	color:#999;
	height: 20px;
	display: block;
}

.close .side-menu .toggle-btn {
	right: -22px;
}

.side-menu .toggle-btn:hover {
	color:#222
}

.side-menu .logo-wrap {
	padding: 40px 20px;
	text-align:center;
	border-bottom:1px solid #efefef;
}
.side-menu .logo-wrap img {
	max-height:45px
}

/* 스크롤바 디자인변경 */

.side-menu .menu-wrap::-webkit-scrollbar {
    width: 5px;
}
.side-menu .menu-wrap::-webkit-scrollbar-thumb {
    background-color: #dfdfdf;
	border-radius: 5px;
}
.side-menu .menu-wrap::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}
.side-menu .menu-wrap > li i {
	display:inline-block;
	margin-right: 15px;
	text-align: center;
	width: 25px;
}

.side-menu .menu-wrap > li a {
	display:block;
	padding: 15px 40px;
	cursor:pointer;
	color:#999
}

.side-menu .menu-wrap > li a:hover,
.side-menu .menu-wrap > li.active a {
	
	color:#222
}

.side-menu .menu-wrap .submenu {
	display:none;
	padding: 15px 40px;
	background-color:#161425
}

.side-menu .menu-wrap .submenu.active {
	display:block
}

.side-menu .menu-wrap .submenu li {
	font-size:14px;
	padding: 5px 10px;
}

.side-menu .menu-wrap .submenu a {
	color: #7D99BB;
}

.side-menu .menu-wrap .submenu a.active,
.side-menu .menu-wrap .submenu a:hover {
	color:#fff
}

.container {
	padding: 100px 10px 20px 260px;
	transition: padding 300ms
}

.close .container {
	padding-left: 50px
}

.container > .title {
	font-size:22px;
	padding-left: 10px;
	margin-bottom: 10px;
}





@media(min-width:992px) {
	.pc {
		display:block !important
	}

	.mobile {
		display:none !important
	}
}

@media(max-width:991px) {

	.pc {
		display:none !important
	}

	.mobile {
		display:block !important
	}

	

}


.container .btn, .container button {
	display:inline-block;
	padding: 0 15px;
	height: 30px;
	background-color:#fff;
	border:1px solid #d5d5d5;
	font-size:14px;
	line-height:28px;
	border-radius:5px;
}
.btn:hover, .container button:hover {
	border-color:#222
}
button.pink{
	background-color: #F34E56;
	color: #fff;
}
.btn-box .pink a{color:#fff}
.btn-box .pink:hover{
	border-color:#eba5a8
}



table.hovering tr:hover {
	border-color: #1D8DF3
	
}

table.hovering tr:hover td {
	background-color:#E3F1FF
}


.important::before {
    content: '*';
    color: #FF9BA1;
    font-weight: bold;
    vertical-align: top;
    padding-right: 5px;
}


table th.important::before {
    content: '*';
    color: #FF9BA1;
    font-weight: bold;
    vertical-align: top;
    padding-right: 5px;
}
.important_input{
	font-size:12px;
	color: #aaa;
	padding-left: 5px;

}

.important_input strong{
	color:#FF9BA1;
}

/* 넓이 클래스 */
.w1{width: 1%;}
.w2{width: 2%;}
.w3{width: 3%;}
.w4{width: 4%;}
.w5{width: 5%;}
.w6{width: 6%;}
.w7{width: 7%;}
.w8{width: 8%;}
.w9{width: 9%;}
.w10{width: 10%;}
.w11{width: 11%;}
.w12{width: 12%;}
.w13{width: 13%;}
.w14{width: 14%;}
.w15{width: 15%;}
.w16{width: 16%;}
.w17{width: 17%;}
.w18{width: 18%;}
.w19{width: 19%;}
.w20{width: 20%;}
.w25{width: 25%;}
.w30{width: 30%;}
.w35{width: 35%;}
.w40{width: 40%;}
.w45{width: 45%;}
.w50{width: 50%;}
.w55{width: 55%;}
.w60{width: 60%;}
.w65{width: 65%;}
.w70{width: 70%;}
.w75{width: 75%;}
.w80{width: 80%;}
.w85{width: 85%;}
.w90{width: 90%;}
.w95{width: 95%;}
.w100{width: 100%;}
.T-left{text-align: left !important;}
.T-right{text-align: right !important;}

table td{
	vertical-align: middle;
}

.btn-box button{
	border-radius: 5px;
	border: 1px solid #d5d5d5;
}

.phrases {
    font-size: 12px;
    color: #adadad;
    margin: 10px 0;
}
.phrases strong{
	color: #FF9BA1;
}
.h-scroll{
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}
.h-scroll::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera*/
}

.Elli{
	overflow: hidden;
	white-space:nowrap;
	word-wrap: normal;
	-webkit-line-clamp: 1;
	vertical-align:middle;
	text-overflow: ellipsis;
}
table.Elli{
	overflow: hidden;
	white-space:nowrap;
	word-wrap: break-word;
	-webkit-line-clamp: 1;
	text-overflow: ellipsis;
}




/* 사용여부 토글 버튼 */
.toggle p.shop{
	display: inline-block;
	margin-right: -5px;
}
/* The switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	width: 90px;
	height: 30px !important;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
	opacity: 0;
	width: 0;
	height: 0;
  }
  
  /* The slider */
  .slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
	height: 28px !important;
  }
  
  .slider:before {
	position: absolute;
	content: "";
	height: 22px;
	width: 22px;
	left: 4px;
	bottom: 3px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
  }
  
  input:checked + .slider {
	background-color: #82aeff;
  }
  
  input:focus + .slider {
	box-shadow: 0 0 1px #82aeff;
  }
  
  input:checked + .slider:before {
	-webkit-transform: translateX(61px);
	-ms-transform: translateX(61px);
	transform: translateX(61px);
  }
  
  /* Rounded sliders */
  .slider.round {
	border-radius: 28px;
  }
  
  .slider.round:before {
	border-radius: 50%;
  }
  .offtxt{
	  color: #777;
	  font-size: 13px;
	  width: 100%;
	  position: absolute;
	  right: 14px;
	  top: 4px;
	  text-align: right;
	  display: inline-block;
	  transition: .4s;
  }
  .ontxt{
	  color: #fff;
	  font-size: 13px;
	  top: 4px;
	  width: 100%;
	  position: absolute;
	  left: 14px;
	  text-align: left;
	  display: none;
	  height: 10px;
	  transition: .4s;
  }
  input:checked ~ .offtxt{
	  display: none;
  }
  
  input:checked ~ .ontxt{
	display: inline-block;
}



@media screen and (max-width: 1600px){
	.header {
		padding: 20px;
		padding-left: 270px;
		height: 70px !important;
		padding:15px
	}

		

	.header .title .user {
		width: 35px !important;
		height: 35px !important;
		line-height:35px !important;
	}
	.header .title .user i{line-height: 33px;}
	
	.header .title strong {
		font-size:22px;
	}

}