* {
	font-family: 'NotoSansKR';
	font-weight: 400;
}

html,body{
	height:100%;
 }
.wrap{
	width:100%;
 	height:100%;
 	overflow:hidden;
 	background-color:#fff;
 	background-color:#24272f;
 	margin:0 auto;
 	max-width:700px;
}
.wrap > div#wrap-color{
	width:100%;
	height:100%;

	transform: rotate(0) scaleX(1) translate3d( 0, 0, 0 );
	transition: transform .3s;
	transition-duration:.5s;
	transform-origin:left;
	-webkit-transform: rotate(0) scaleX(1) translate3d( 0, 0, 0 );
	-webkit-transition: transform .3s;
	-webkit-transition-duration:.5s;
	-webkit-transform-origin:left;
}
.wrap.blue > div#wrap-color{
	background-color: #6fc2c9;
}
.wrap.green > div#wrap-color{
	background-color: #7ccb8c;
}
.wrap.yellow > div#wrap-color{
	background-color: #dabf6d;
}
.wrap.red > div#wrap-color{
	background-color: #c77171;
}
.wrap > div#wrap-color.white{
	background:white!important;
}
.wrap > #wrap-color.left{
	transform: rotate(0) scaleX(1) translate3d( 160px, 0, 0 );
	transition: transform .3s;
	transition-duration:.5s;
	transform-origin:left;
	-webkit-transform: rotate(0) scaleX(1) translate3d( 160px, 0, 0 );
	-webkit-transition: transform .3s;
	-webkit-transition-duration:.5s;
	-webkit-transform-origin:left;
}
.wrap > div#wrap-color > div.black{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	background-color:rgba(0,0,0,.6);
	z-index:2;
	display:none;
}
.wrap > div#wrap-color.left > div.black{
	display:block;
}
#wrap > div#left{
	width:160px;
	height:100%;
	background-color:#fff;
	position:absolute;
	transform: rotate(0) scaleX(1) translate3d( -160px, 0, 0 );
	transition: transform .3s;
	transition-duration:.5s;
	transform-origin:left;
	-webkit-transform: rotate(0) scaleX(1) translate3d( -160px, 0, 0 );
	-webkit-transition: transform .3s;
	-webkit-transition-duration:.5s;
	-webkit-transform-origin:left;
	border-left:1px solid #eee;
}
#wrap > div#left.left{
	transform: rotate(0) scaleX(1) translate3d( 0, 0, 0 );
	transition: transform .3s;
	transition-duration:.5s;
	transform-origin:left;
	-webkit-transform: rotate(0) scaleX(1) translate3d( 0, 0, 0 );
	-webkit-transition: transform .3s;
	-webkit-transition-duration:.5s;
	-webkit-transform-origin:left;
}
#wrap > div#left h1 {
	display:block;
	text-align:center;
	width:100%;
    padding: 30px 0;
}
#wrap > div#left h1 a{
	display: block;
}

/* 20220428 방현우 : Dreams 로고 너무 작게 뜸 */
#wrap > div#left h1 img{
	height: 25px;
/* 	height: 20px;
 */}

#wrap > div#left div.user{
	padding:15px 15px;
  text-align:center;
  /* border-top:1px solid #ddd; */
  /* border-bottom:1px solid #ddd; */
}
#wrap > div#left div.user .thum{
	display:inline-block;
	width:50px;
	height:50px;
	border-radius:50px;
	background-size:cover;
	vertical-align:middle;
  background-image: url(../img/user.png);
}

#wrap > div#left div.user blockquote{
	border:0;
	display:inline-block;
	vertical-align:middle;
	text-align:center;
}
#wrap > div#left div.user blockquote strong{
	font-size:.7em;
	color:rgba(0,0,0,.8);
	line-height:130%;
}
#wrap > div#left div.user blockquote p{
	font-size:.7em;
	color:#aaa;
	line-height:130%;
}
#wrap > div#left div.user blockquote a{
  background-color: #6fc2c9;
  width: 70px;
  text-align: center;
  color:#fff;
  border-radius: 20px;
  font-size: 10px;
  padding: 5px 10px;
  margin-top: 5px;
  display: block;
}

/* .green#wrap.plus-wrap .arrow-section .main-arr.right-arr.only-arr button.co-green, */
.green#wrap > div#left div.user blockquote a{
  background-color:#84CE8D!important;
}
/* .yellow#wrap.plus-wrap .arrow-section .main-arr.right-arr.only-arr button.co-yellow, */
.yellow#wrap > div#left div.user blockquote a{
  background-color:#dabf6d!important;
}
/* .red#wrap.plus-wrap .arrow-section .main-arr.right-arr.only-arr button.co-red, */
.red#wrap > div#left div.user blockquote a{
  background-color:#c77171!important;
}


ul.nav {
	padding:0;
	margin-top:0px;
}
ul.nav li a{
	color:#999;
	padding:15px 15px;
	vertical-align:top;
	line-height:18px;
}
ul.nav li a span{
  font-size:12px;
  transform: scaleX(.9);
	transition: transform .3s;
	transition-duration:.5s;
	transform-origin:center;
	-webkit-transform: scaleX(.9);
	-webkit-transition: transform .3s;
	-webkit-transition-duration:.5s;
	-webkit-transform-origin:center;
  vertical-align: middle;
}
ul.nav li a i{
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 10px;
  background-color: #999;
  vertical-align: middle;
  margin-right: 5px;
}

.blue.plus-wrap .co-blue,
.blue.plus-wrap .arrow-section .main-arr button.co-blue,
ul.nav li a.ac span{
	color:#6fc2c9;
}
.green.plus-wrap .co-green,
.green.plus-wrap .arrow-section .main-arr button.co-green,
.green#wrap ul.nav li a.ac span{
  color:#84CE8D;
}
.yellow.plus-wrap .co-yellow,
.yellow.plus-wrap .arrow-section .main-arr button.co-yellow,
.yellow#wrap ul.nav li a.ac span{
  color:#dabf6d;
}
.red.plus-wrap .co-red,
.red.plus-wrap .arrow-section .main-arr button.co-red,
.red#wrap ul.nav li a.ac span{
  color:#c77171;
}


ul.nav li a.ac i{
  background-color:#6fc2c9;
}
.green#wrap ul.nav li a.ac i{
  background-color:#83C5CE;
}
.yellow#wrap ul.nav li a.ac i{
  background-color:#dabf6d;
}
.red#wrap ul.nav li a.ac i{
  background-color:#c77171;
}


ul.nav li{
	border-bottom:1px solid rgba(0,0,0,.05);
}
ul.nav li:first-child{
	border-top:1px solid rgba(0,0,0,.05);
}
ul.nav li.active a{
  background: linear-gradient(to right, #8285ff, #5defec);
	background: -webkit-linear-gradient(to right, #8285ff, #5defec);
	background: -moz-linear-gradient(to right,  #8285ff, #5defec);
	background: -o-linear-gradient(to right,  #8285ff, #5defec);
	background:#8285ff;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    font-weight: 900;
}

#wrap > div#left .log{

	bottom:0;
	width:100%;
	border-bottom:2px solid #ddd;
	border-top:1px solid #ddd;
}
#wrap > div#left .log ul {
	width:100%;
}
#wrap > div#left .log ul li{
	width:50%;
	float:left;
}
#wrap > div#left .log ul li a{
	display:block;
	font-size:.7em;
	text-align:center;
	color:#999;
	padding:15px 0;
}


.header{
	height:60px;
	position:absolute;
	top:0;
	width:100%;
	z-index:1;
}

.header div.bars{
	display:inline-block;
	width:12px;
	height:12px;
	margin:22px 15px;
	position: relative;

}
.header div.bars > span.circle{
	display:block;
	margin-top:0px;
	background-color:#fff;
	width:4px;
	height:4px;
	border-radius: 10px;
	position: absolute;
}
.header div.bars > span.topleft{
	left: 0;
	top:0;
}
.header div.bars > span.topright{
	right: 0;
	top:0;
}
.header div.bars > span.bottomleft{
	left: 0;
	bottom:0;
}
.header div.bars > span.bottomright{
	right: 0;
	bottom:0;
}
.header div.bars.active1 {
  animation: bars 4s;
 	animation-iteration-count: infinite;
  animation-delay: 1s;
}
@keyframes bars {
  0% {
    transform: rotate(0deg);
  	transition: transform .3s;
  	transition-duration:.5s;
  	transform-origin:center;
  	-webkit-transform: rotate(0deg);
  	-webkit-transition: transform .3s;
  	-webkit-transition-duration:.5s;
  	-webkit-transform-origin:center;
  }
  25% {
    transform: rotate(45deg);
  	transition: transform .3s;
  	transition-duration:.5s;
  	transform-origin:center;
  	-webkit-transform: rotate(45deg);
  	-webkit-transition: transform .3s;
  	-webkit-transition-duration:.5s;
  	-webkit-transform-origin:center;
  }
  50% {
    transform: rotate(90deg);
  	transition: transform .3s;
  	transition-duration:.5s;
  	transform-origin:center;
  	-webkit-transform: rotate(90deg);
  	-webkit-transition: transform .3s;
  	-webkit-transition-duration:.5s;
  	-webkit-transform-origin:center;
  }
  75% {
    transform: rotate(135deg);
  	transition: transform .3s;
  	transition-duration:.5s;
  	transform-origin:center;
  	-webkit-transform: rotate(135deg);
  	-webkit-transition: transform .3s;
  	-webkit-transition-duration:.5s;
  	-webkit-transform-origin:center;
  }
  100% {
    transform: rotate(180deg);
  	transition: transform .3s;
  	transition-duration:.5s;
  	transform-origin:center;
  	-webkit-transform: rotate(180deg);
  	-webkit-transition: transform .3s;
  	-webkit-transition-duration:.5s;
  	-webkit-transform-origin:center;
  }
}


.header div.bars.active1 > span.topleft{
  left: 0;
	top:0;
  animation: bars-ac 2s;
 	animation-iteration-count: infinite;
  animation-delay: 2s;
}
@keyframes bars-ac {

}
.header div.bars.active1 > span.topright{
  right: 0;
	top:0;
  animation: bars-ac2 2s;
 	animation-iteration-count: infinite;
  animation-delay: 2s;
}
@keyframes bars-ac2 {

}
.header div.bars.active1 > span.bottomleft{
  left: 0;
	bottom:0;
  animation: bars-ac3 2s;
 	animation-iteration-count: infinite;
  animation-delay: 2s;
}
@keyframes bars-ac3 {

}
.header div.bars.active1 > span.bottomright{
  right: 0;
	bottom:0;
  animation: bars-ac4 2s;
 	animation-iteration-count: infinite;
  animation-delay: 2s;
}
@keyframes bars-ac4 {

}

.header h2{
	color:#fff;
	font-size:16px;
	margin:23px 0px;
	font-weight:500;
}
.wrap > div#wrap-color.white .header{
	background-color:#6fc2c9!important;
}

.green#wrap > div#wrap-color.white .header{
  background-color:#83C5CE!important;
}
.yellow#wrap > div#wrap-color.white .header{
  background-color:#dabf6d!important;
}
.red#wrap > div#wrap-color.white .header{
  background-color:#c77171!important;
}



.wrap > div#wrap-color.white .header div.bars > span.line{

	background: linear-gradient(to right, #8285ff, #5defec);
	background: -webkit-linear-gradient(to right, #8285ff, #5defec);
	background: -moz-linear-gradient(to right,  #8285ff, #5defec);
	background: -o-linear-gradient(to right,  #8285ff, #5defec);
	background:#8285ff;
}

.wrap > div#wrap-color.white .header ul li{
	display:inline-block;
	position:relative;
}
.wrap > div#wrap-color.white .header ul li a{
	height:60px;
	line-height:60px;
	font-size:14px;
	width:100px;
	display:block;
	color:#fff;
	font-weight:500;
	text-align:center;
  transform: scaleX(.9);
	transition: transform .3s;
	transition-duration:.5s;
	transform-origin:center;
	-webkit-transform: scaleX(.9);
	-webkit-transition: transform .3s;
	-webkit-transition-duration:.5s;
	-webkit-transform-origin:center;
}
.wrap > div#wrap-color.white .header ul li.ac a span{
  display: block;
  border: 1px solid #fff;
  border-radius: 300px;
  line-height: 30px;
  vertical-align: middle;
  background-color: rgba(255,255,255,.1)
}
.header a.refresh{
	width:14px;
	height:14px;
  border-radius: 14px;
  border: 3px solid #fff;
  display: inline-block;
  margin: 23px 12px;
  /*animation: refresh 2s;
 	animation-iteration-count: infinite;
  animation-delay: 2s;*/
}
@keyframes refresh {
  0% {
    transform: scale(1);
    transition: transform .3s;
    transition-duration:.5s;
    transform-origin:center;
    -webkit-transform: scale(1);
    -webkit-transition: transform .3s;
    -webkit-transition-duration:.5s;
    -webkit-transform-origin:center;
  }
  20% {
    transform: scale(1);
    transition: transform .3s;
    transition-duration:.5s;
    transform-origin:center;
    -webkit-transform: scale(1);
    -webkit-transition: transform .3s;
    -webkit-transition-duration:.5s;
    -webkit-transform-origin:center;
  }
  30% {
    transform: scale(.6);
    transition: transform .3s;
    transition-duration:.5s;
    transform-origin:center;
    -webkit-transform: scale(.6);
    -webkit-transition: transform .3s;
    -webkit-transition-duration:.5s;
    -webkit-transform-origin:center;
    border: 2.5px solid #fff;
    background-color: transparent;
  }
  31% {
    border: 6px solid #fff;
    background-color: #fff;
  }
  70% {
    transform: scale(.6);
    transition: transform .3s;
    transition-duration:.5s;
    transform-origin:center;
    -webkit-transform: scale(.6);
    -webkit-transition: transform .3s;
    -webkit-transition-duration:.5s;
    -webkit-transform-origin:center;
    border: 5px solid #fff;
  }
  90% {
    transform: scale(1.1);
    transition: transform .3s;
    transition-duration:.5s;
    transform-origin:center;
    -webkit-transform: scale(1.1);
    -webkit-transition: transform .3s;
    -webkit-transition-duration:.5s;
    -webkit-transform-origin:center;
  }
  100% {
    transform: scale(1);
    transition: transform .3s;
    transition-duration:.5s;
    transform-origin:center;
    -webkit-transform: scale(1);
    -webkit-transition: transform .3s;
    -webkit-transition-duration:.5s;
    -webkit-transform-origin:center;
  }
}

.contents{
	padding-top:56px;
	overflow:auto;
	height:100%;
	width:100%;
	position:relative;
}
.contents.sub{
	background-color:#6fc2c9;
	padding-top:0;
	position:relative
}

.green#wrap .contents.sub{
  background-color:#83C5CE!important;
}
.yellow#wrap .contents.sub{
  background-color:#dabf6d!important;
}
.red#wrap .contents.sub{
  background-color:#c77171!important;
}


.contents.sub h3{
	color:#fff;
	text-align:center;
	font-size:14px;
	font-weight:400;
}
.contents.sub .graph-overflow{
	margin-top:8%;
	position:relative;
}
.contents.sub .graph-overflow > div{
	width:100%;
	height:100%;

	overflow-x:scroll;
	position:relative;
	padding:0 0px;
}
.contents.sub .graph-overflow > div .x-num{
	border-top:1px solid rgba(255,255,255,.8);
	width:1000px;
	margin-top:-29px;
	position:absolute;
	z-index:1;
	padding-left:10px;
}

.contents.sub .graph-overflow > div .x-num span:last-child{
	margin-right:0px;
}
.contents.sub .graph-overflow .left-num{
	position:absolute;
	left:0;
	top:0;
	background: linear-gradient(to left, transparent 1%, #6fc2c9);
	background: -webkit-linear-gradient(to left, transparent 1%, #6fc2c9);
	background: -moz-linear-gradient(to left, transparent 1%, #6fc2c9);
	background: -o-linear-gradient(to left, transparent 1%, #6fc2c9);
	width:20%;
	padding-left:2.5%;
	z-index:2;
	overflow:hidden
}
.contents.sub .graph-overflow .right-num{
	position:absolute;
	right:0;
	top:0;
	background: linear-gradient(to right, transparent 1%, #6fc2c9);
	background: -webkit-linear-gradient(to right, transparent 1%, #6fc2c9);
	background: -moz-linear-gradient(to right, transparent 1%, #6fc2c9);
	background: -o-linear-gradient(to right, transparent 1%, #6fc2c9);
	width:20%;
	z-index:2;
	overflow:hidden
}

.contents.sub #info-view-3{position:relative;}
.contents.sub #info-view-3 .left-num{
	position:absolute;
	left:0;
	top:0;
	background: linear-gradient(to left, transparent 1%, #6fc2c9);
	background: -webkit-linear-gradient(to left, transparent 1%, #6fc2c9);
	background: -moz-linear-gradient(to left, transparent 1%, #6fc2c9);
	background: -o-linear-gradient(to left, transparent 1%, #6fc2c9);
	width:35%;
	padding-left:5%;
	z-index:2;
	min-height:400px;
	overflow:hidden
}
.contents.sub #info-view-3 .right-num{
	position:absolute;
	right:0;
	top:0;
	background: linear-gradient(to right, transparent 5%, #6fc2c9);
	background: -webkit-linear-gradient(to right, transparent 5%, #6fc2c9);
	background: -moz-linear-gradient(to right, transparent 5%, #6fc2c9);
	background: -o-linear-gradient(to right, transparent 5%, #6fc2c9);
	width:35%;
	z-index:2;
	min-height:400px;
	overflow:hidden
}


.contents.sub .graph-overflow .left-num p{
	color:rgba(255,255,255,.7);
	height:33.4px;
	font-size:11px;
}

.info-view{
 	display:none;
}
.info-view.active{
	display:block;
}
.contents.main{
	overflow:hidden;
}
.contents.main#main1{
  background-image: url(../img/earth.gif);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 400px;
}
.green .contents.main#main1{
  background-image: url(../img/earth-green.gif);
}
.red .contents.main#main1{
  background-image: url(../img/earth-red.gif);
}
.yellow .contents.main#main1{
  background-image: url(../img/earth-yellow.gif);
}


.contents.main div.notify{
  color:#fff;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  margin: 20px 0 0 0;
}
.contents.main div.notify.absolute{
  position: absolute;
  top:calc(50% + 120px);
  width: 100%;
}
.contents.main-black{
	background-color:rgba(0,0,0,.3);

}

.contents div.main-circle{
	position:absolute;
	right:-85%;
	width:120%;
	top:50%;

}
.contents div.main-circle-graph{
	transform:rotate(-360deg);
	transition: transform .3s;
	transition-duration:.5s;
	transform-origin:center;
	-webkit-transform: rotate(-360deg);
	-webkit-transition: transform .3s;
	-webkit-transition-duration:.5s;
	-webkit-transform-origin:center;
	width:100%;

}
.contents div.main-circle-graph img{
	width:100%;
	display:none;
}
.wrap > div#wrap-color.blue .contents div.main-circle-graph img.blue{
	display:block;
}
.wrap > div#wrap-color.green .contents div.main-circle-graph img.green{
	display:block;
}
.wrap > div#wrap-color.yellow .contents div.main-circle-graph img.yellow{
	display:block;
}

.wrap > div#wrap-color.red .contents div.main-circle-graph img.red{
	display:block;
}

.contents > div.row{

}
.contents > div.row div.today *,
.contents > div.row div.currently *{
	color:#fff;
  text-align: center;
}
.contents > div.row div.today p{
	font-size:1em;
	margin-bottom:3%;
	font-weight:900;
}
.contents > div.row div.today p.date{
  color:#6fc2c9;

}
.contents > div.row div.today p.date span{
  background-color: #fff;
  padding: 6px 14px;;
  color:#83C5CE;
  border-radius: 20px;
  font-size: 11px;
  line-height: 11px;
}
.green .contents > div.row div.today p.date span{
  color:#84CE8D;
}
.yellow .contents > div.row div.today p.date span{
  color:#dabf6d;
}
.red .contents > div.row div.today p.date span{
  color:#c77171;
}





.contents > div.row div.today p.title{
	font-size:1.2em;
	font-weight:600;
}
.contents > div.row div.today p.title img{
  width: 150px;
}
.contents > div.row div.today{
	position:absolute;
	top:20%;
  width: 100%;
	margin-top:-50px;
}
.contents.sub div.today{
	position:absolute;
	top:25%;
	margin-top:-50px;
	left:9%;
}
.contents.sub div.today *,
.contents.sub div.currently *{
	color:#fff;
}
.contents.sub div.today p{
	font-size:1em;
	margin-bottom:3%;
	font-weight:normal;
}
.contents.sub div.today p.title{
	font-size:1.2em;
	font-weight:600;
	margin-bottom:8%;
}
.contents > div.row div.today2{
	position:absolute;
	top:30%;
	margin-top:-50px;
	right:8%;
}
.contents > div.row div.today2 i{
	color:#fff;
}

.contents > div.row div.today2 .temp{
	font-size:5em;
	float:left;
	position:relative;
	}
.contents > div.row div.today2 .temp p{
	letter-spacing:-2px;
	font-weight:100;
}
.contents > div.row div.today2 .temp span{
	display:block;
	position:absolute;
	top:1px;
	right:-8px;
	border:3px solid #fff;
	border-radius:10px;
	width:10px;
	height:10px;
}
.contents > div.row div.today2 .highlow{
	float:left;
	padding-top:48px;
	margin-left:10px;
}

.contents > div.row div.currently{
	position:absolute;
	top:50%;
	margin-top:-35px;
  width: 100%;
}
.contents > div.row div.currently p{
	font-size:18px;
	font-weight: 600;
	margin-bottom:1%;
}
.contents > div.row div.currently p.title{
	font-size:40px;
	font-weight:900;
	margin-bottom:2%;

}
.contents p.alert{
	padding:0;
	font-size:17px;
	margin-top:3%;
	color:#fff;
	text-align:center;
}


.contents.sub div.currently{
	position:absolute;
	top:20%;
	margin-top:-50px;
	left:9%;
}

.contents.sub div.currently.statu{
  background-image: url(../img/earth.gif);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 300px;
  top:0;
  left: 0;
  right:0;
  height: 200px;
  margin-top: 100px;
  position: relative;
}

.green .contents.sub div.currently.statu{
  background-image: url(../img/earth-green.gif);
}
.red .contents.sub div.currently.statu{
  background-image: url(../img/earth-red.gif);
}
.yellow .contents.sub div.currently.statu{
  background-image: url(../img/earth-yellow.gif);
}
.contents.sub div.currently.statu p.title{
  text-align: center;
  padding-top: 60px;
}
.notify.statu{
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  margin: 20px 0;
}
.contents.sub div.currently p{
	font-size:1em;
	margin-bottom:1%;
}
.contents.sub div.currently p.title{
	font-size:40px;
	font-weight:500;
	margin-bottom:2%;

}
.contents.sub div.currently p.title span{
	font-size:.25em;
	margin-left:10px;
	font-weight:500;
}



.contents > div.row span.circle-small-graph{
	display:block;
	width:100%;
	position:relative;
}
.contents > div.row span.circle-small-graph img{
	width:100%;
	max-height:100px;
	max-width:100px;
	display:none;
}
.wrap > div#wrap-color.blue .contents > div.row span.circle-small-graph img.blue{display:inline-block}
.wrap > div#wrap-color.green .contents > div.row span.circle-small-graph img.green{display:inline-block}
.wrap > div#wrap-color.yellow .contents > div.row span.circle-small-graph img.yellow{display:inline-block}
.wrap > div#wrap-color.red .contents > div.row span.circle-small-graph img.red{display:inline-block}


.contents > div.row span.circle-small-graph > div{
	width:100%;
	display:table-cell;
	position:absolute;
	left:0;
	top:50%;
	height:70px;
	margin-top:-35px;
}

.contents > div.row span.circle-small-graph .main-circle-dot{
	width:100%;
	position:absolute;
	height:12px;
	top:50%;
	margin-top:-6px;
	transform:rotate(90deg);
	transition: transform .3s;
	transition-duration:3s;
	transform-origin:center;
	-webkit-transform: rotate(90deg);
	-webkit-transition: transform .3s;
	-webkit-transition-duration:3s;
	-webkit-transform-origin:center;
	margin-left:-50%;
	left:50%;
	text-align:center;

}
.contents > div.row span.circle-small-graph .main-circle-dot > span{
	width:100px;
	display:inline-block;
	height:120px;
}
.contents > div.row span.circle-small-graph .main-circle-dot.ac9{
	transform:rotate(410deg);
	transition: transform .3s;
	transition-duration:1s;
	transform-origin:center;
	-webkit-transform: rotate(410deg);
	-webkit-transition: transform .3s;
	-webkit-transition-duration:1s;
	-webkit-transform-origin:center;
}
.contents > div.row span.circle-small-graph .main-circle-dot.ac8{
	transform:rotate(370deg);
	transition: transform .3s;
	transition-duration:1s;
	transform-origin:center;
	-webkit-transform: rotate(370deg);
	-webkit-transition: transform .3s;
	-webkit-transition-duration:1s;
	-webkit-transform-origin:center;
}
.contents > div.row span.circle-small-graph .main-circle-dot.ac7{
	transform:rotate(330deg);
	transition: transform .3s;
	transition-duration:1s;
	transform-origin:center;
	-webkit-transform: rotate(330deg);
	-webkit-transition: transform .3s;
	-webkit-transition-duration:1s;
	-webkit-transform-origin:center;
}
.contents > div.row span.circle-small-graph .main-circle-dot.ac6{
	transform:rotate(290deg);
	transition: transform .3s;
	transition-duration:1s;
	transform-origin:center;
	-webkit-transform: rotate(290deg);
	-webkit-transition: transform .3s;
	-webkit-transition-duration:1s;
	-webkit-transform-origin:center;
}
.contents > div.row span.circle-small-graph .main-circle-dot.ac5{
	transform:rotate(250deg);
	transition: transform .3s;
	transition-duration:1s;
	transform-origin:center;
	-webkit-transform: rotate(250deg);
	-webkit-transition: transform .3s;
	-webkit-transition-duration:1s;
	-webkit-transform-origin:center;
}
.contents > div.row span.circle-small-graph .main-circle-dot.ac4{
	transform:rotate(210deg);
	transition: transform .3s;
	transition-duration:1s;
	transform-origin:center;
	-webkit-transform: rotate(210deg);
	-webkit-transition: transform .3s;
	-webkit-transition-duration:1s;
	-webkit-transform-origin:center;
}
.contents > div.row span.circle-small-graph .main-circle-dot.ac3{
	transform:rotate(170deg);
	transition: transform .3s;
	transition-duration:1s;
	transform-origin:center;
	-webkit-transform: rotate(170deg);
	-webkit-transition: transform .3s;
	-webkit-transition-duration:1s;
	-webkit-transform-origin:center;
}
.contents > div.row span.circle-small-graph .main-circle-dot.ac2{
	transform:rotate(130deg);
	transition: transform .3s;
	transition-duration:1s;
	transform-origin:center;
	-webkit-transform: rotate(130deg);
	-webkit-transition: transform .3s;
	-webkit-transition-duration:1s;
	-webkit-transform-origin:center;
}






.contents > div.row span.circle-small-graph .main-circle-dot img{
	height:12px;
	width:12px;
	display:block;
	margin-left:-4px;
}

.contents > div.row span.circle-small-graph > div *{
	color:#fff;
}
.contents > div.row.circle-small {
	position:absolute;
	width:100%;
	top:50%;
	margin-top:-50px;
	}
.contents > div.row.circle-small > div{
	margin:0;
}
.contents > div.row.circle-small p.title{
	color:#fff;
	font-size:.75em;
	text-align:center!important;
	width:100%;
	margin-bottom:15px;
	font-weight:600;
	display:inline-block;
}

.contents > div.row span.circle-small-graph p{
	text-align:center;
}
.contents > div.row span.circle-small-graph p.num{
	font-size:1.9em;
	text-align:center;

}
.contents > div.row span.circle-small-graph p.num-small{
	font-size:.9em;
}
.contents > div.row span.circle-small-graph p.info{
	font-size:.8em;
	margin-top:4px;
}
.contents > div.row.weather {
	position:absolute;
	width:100%;
	bottom:2%;
}
.contents > div.row.weather div.round{
	border-radius:8px;
	border:1px solid rgba(255,255,255,.4);
	background-color:rgba(255,255,255,.1);
	padding:3%;
}
.contents > div.row.weather div.round *{
	color:#fff;
	text-align:center;
	margin:5px 0;
}
.contents > div.row.weather div.round i{
	font-size:1.4em;
}
.contents #average{
	width: 1px ;
	height: 100%;
	display: block;
	position: absolute;
	z-index: 3;
	background-color: #01a3c1;
	left: calc(50% + 20px);
	opacity: 0;
}
.contents #average.active{
	opacity: 1;
	transition: all 1s;
}
.contents #average i{
	background-color: #01a3c1;;
	color:#fff;
	font-size: 10px;
	text-shadow: 1px 1px 1px rgba(0,0,0,.2);
	min-width: 50px;
	text-align: center;
	padding: 5px;
	display: block;
	white-space: nowrap;
	border-radius: 0 5px 5px 0;
}
.contents .graph-1{
	position:relative;
	height:100%;
}
.contents .graph-1 > div{
	height:100%;

}

.contents .graph-1 > div > div{
	padding:0;
}

.contents .graph-1 .group{
	position:absolute;
	top:0;
	left:0;
	z-index:2;
	width:100%;
	height:100%;
}
.contents.sub .graph-1 .group{
	height:80%;
}
.contents .graph-1 .group span.line{
	display:block;
	width:12.5%;
	height:100%;
	float:left;
	position:relative;
	text-align:right;

}
.contents .graph-1 .group span.line > span{
	background-color:rgba(255,255,255,.3);
	width:1px;
	display:inline-block;
	height:100%;
	min-height:100px;
}
.wrap > div#wrap-color.blue .contents .graph-1 .group span.line > span{
	background-color:rgba(255,255,255,.3);
}


.contents .graph-1 .group span.line:first-child{
	margin-left:0;
}
.contents .graph-1 .group span.line i{
	position:absolute;
	color:#fff;
	line-height:30px;
	font-size:12px;
	bottom:-25px;
	right:-3px;
	font-weight:bold;
}
.wrap > div#wrap-color.blue .contents .graph-1 .group span.line i{
	color:#fff;
}
.contents .graph-1 .line-graph{
	height:4.1%;
	margin-bottom:0px;
	overflow:hidden;
	transform: rotate(0) scaleX(.00000) translate3d( 0px, 0, 0 );
	transition: transform .3s;
	transition-duration:.5s;
	-webkit-transform: rotate(0) scaleX(.00000) translate3d( 0px, 0, 0 );
	-webkit-transition: transform .3s;
	-webkit-transition-duration:.5s;
	-webkit-transform-origin:left;
}
.contents.sub .graph-1 .line-graph{
	height:6.5%;
}
.contents .graph-1 .line-graph.active{
	transform: rotate(0) scaleX(1) translate3d( 0px, 0, 0 );
	transition: transform .3s;
	transition-duration:.5s;
	-webkit-transform: rotate(0) scaleX(1) translate3d( 0px, 0, 0 );
	-webkit-transition: transform .3s;
	-webkit-transition-duration:.5s;
	-webkit-transform-origin:left;
}

.contents .graph-1 .line-graph.wid2{
	width:12.5%;
}
.contents .graph-1 .line-graph.wid3{
	width:25%;
}
.contents .graph-1 .line-graph.wid4{
	width:37.5%;
}
.contents .graph-1 .line-graph.wid5{
	width:50%;
}
.contents .graph-1 .line-graph.wid6{
	width:62.5%;
}
.contents .graph-1 .line-graph.wid7{
	width:75%;
}
.contents .graph-1 .line-graph.wid8{
	width:87.5%;
}
.contents .graph-1 .line-graph.wid9{
	width:100%;
}

.contents .graph-1 .line-graph:last-child{
	min-height:11px;
}
.contents .graph-1 .line-graph span{
	display:block;
	float:left;
	height:10%;

	width:100px;
}
.contents .graph-1 .line-graph span.bg-1{
  background: linear-gradient(to right, transparent 5%, #fff, #fff);
	background: -webkit-linear-gradient(left, transparent 5%, #fff, #fff);
	background: -moz-linear-gradient(to right, transparent 5%, #fff, #fff);
	background: -o-linear-gradient(to right, transparent 5%, #fff, #fff);
	width:100%;
	height:50%;
	font-size:11px;
	line-height:12px;
	transform: rotate(0) scaleX(1) translate3d( 0px, 0, 0 );
	transition: transform .3s;
	transition-duration:.5s;
	-webkit-transform: rotate(0) scaleX(1) translate3d( 0px, 0, 0 );
	-webkit-transition: transform .3s;
	-webkit-transition-duration:.5s;
	-webkit-transform-origin:left;
	padding-left:5px;
  color:#fff;
  font-weight: 700;
}

.wrap > div#wrap-color.blue .contents .graph-1 .line-graph span.bg-1{
	background: linear-gradient(to right, transparent 5%, #fff, #fff);
	background: -webkit-linear-gradient(left, transparent 5%, #fff, #fff);
	background: -moz-linear-gradient(to right, transparent 5%, #fff, #fff);
	background: -o-linear-gradient(to right, transparent 5%, #fff, #fff);
	color:#fff;
  font-weight: bold;
}

.contents .graph-1 .line-graph span.bg-1.active{
	transform: rotate(0) scaleX(1) translate3d( 0px, 0, 0 );
	transition: transform .3s;
	transition-duration:.5s;
	transform-origin:left;
	-webkit-transform: rotate(0) scaleX(1) translate3d( 0px, 0, 0 );
	-webkit-transition: transform .3s;
	-webkit-transition-duration:.5s;
	-webkit-transform-origin:left;
}

.contents.sub .search-bottom{
	position:absolute;
	width:90%;
	left:5%;
	bottom:0;
	background-color:rgba(255,255,255,1);
	height:75px;
	border-radius:5px 5px 0 0;
	z-index:3;
	box-shadow:0 0 5px rgba(0,0,0,.4)
}
.contents.sub .search-bottom.active{
	height:auto;
}

.contents.sub .search-bottom p.to-link{
	width:100%;
	display:block;
	background-color:rgba(0,0,0,.05);
	height:25px;
	text-align:center;
}
.contents.sub .search-bottom p.to-link a{
	width:15px;
	display:inline-block;
	padding:7px 0;
}
.contents.sub .search-bottom p.to-link span{
	display:block;
	width:15px;
	height:1px;
	background-color:rgba(0,0,0,.2);
	margin:2px auto;

}

.contents.sub .search-bottom ul {
	margin-bottom:0;
	margin-top:0;
  padding: 0 20px;
}
.contents.sub .search-bottom ul li{
	display:block;
	width:33.33333333%;
	float:left;
}
.contents.sub .search-bottom ul li a{
	height:30px;
	line-height:30px;
	display:block;
	font-size:12px;
	color:#999;
	text-align:center;
	text-decoration:none;
	cursor:pointer;
	margin-top:15px;
	margin-bottom:15px;
	vertical-align:top;
  transform: scaleX(.9);
	transition: transform .3s;
	transition-duration:.5s;
	transform-origin:center;
	-webkit-transform: scaleX(.9);
	-webkit-transition: transform .3s;
	-webkit-transition-duration:.5s;
	-webkit-transform-origin:center;
}
.contents.sub .search-bottom ul li a.active{
	color:#454754;
	font-weight:bold;
}
.contents.sub .search-bottom ul li a i{
	font-size:16px;
	margin-right:4px;
	vertical-align:middle;
}
.contents.sub .search-bottom .search-view{
	display:none;
}
.contents.sub .search-bottom .search-view.active{
	display:block;
}
.contents.sub .search-bottom .search-view.month{
	padding: 0 20px 20px 20px;
}
.contents.sub .search-bottom .search-view.month input[type=radio] + label{
  padding-right: 0px!important;
}

.contents.sub .search-bottom .search-view#search-view-2,
.contents.sub .search-bottom .search-view#search-view-3{
  padding: 0 10px;
}

.contents.sub .search-bottom .search-view input[type=radio] {
	display: none;
	}
.contents.sub .search-bottom .search-view input[type=radio] + label{
	display: inline-block;
	cursor: pointer;
	position: relative;
	font-size: 14px;
	/* vertical-align:; */
	color:#fff;
	line-height: 40px;
	margin-bottom: 5px;
  padding-right: 20px;
	border-bottom: 0px solid #fff;
	width: 100%;
	background-color:#ccc;
	text-align:right;
  border-radius: 50px;
}
.contents.sub .search-bottom .search-view input[type=radio] + label:before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 10px;
  margin-left: 13px;
	vertical-align:middle;
	border-radius: 100px;
	float:left;
	margin-top:13px;
  border: 0;
	}
.contents.sub .search-bottom .search-view input[type=radio]:checked + label:before {
	content: "";
	font-size: 16px;
	color: #ccc;
  background-color: #fff;
	font-weight:bold;
  border: 0;
	}
.contents.sub .search-bottom .search-view input[type=radio]:checked + label{
	color:#fff;
 	background-color: #6fc2c9;
 	}
.contents.sub .search-bottom .search-view#search-view-1.month p
{
	width: 33.333333333333%;
	float:left;
}
.contents.sub .search-bottom .search-view#search-view-1.month input[type=radio] + label{
	text-align:center;
	border:1px solid rgba(255,255,255,.1)
}
.contents.sub .search-bottom .search-view#search-view-1.month input[type=radio] + label:before {
	display:none;
	}


	
/***** 22.03.07 박유빈 수정 & 추가 */
.contents .main-arr{
	/* position:absolute;
	bottom:3%;
	width:100%;
	text-align:center;
	z-index:2;
  color:rgba(255,255,255,.5);
  font-size: 12px;
  padding-bottom: 80px; */
	position: relative;
    width: 80px;
	word-break: keep-all;
	line-height: 15px;
}

.arrow-section{
	position:absolute;
	bottom:3%;
	width:100%;
	text-align:center;
	z-index:2;
	color:rgba(255,255,255,.5);
	font-size: 12px;

	padding: 0 20px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
}
.right-arr > i{
	left: 50%;
}
.left-arr > i{
	left: 50%;
}

.contents .main-arr.left-arr div.arrows{
	animation: arrowup 6s;
	animation-iteration-count: infinite;
	animation-delay: 2s;

}
.contents .main-arr.right-arr div.arrows{
	animation: arrowdown 6s;
	animation-iteration-count: infinite;
	animation-delay: 2s;

}
.contents .main-arr div.arrows{
	display: inline-block;
	width: 40px;
	height: 40px;
	background-color: #fff;
	border-radius: 25px;
	margin-top: 40px;
	/* position: absolute;
	bottom: 0;
	left: 50%; */
	/* margin-left: -20px; */
}
@keyframes arrowdown {
  0% {
    transform: scale(1);
    transition: transform .3s;
    transition-duration:.5s;
    transform-origin:center;
    -webkit-transform: scale(1);
    -webkit-transition: transform .3s;
    -webkit-transition-duration:.5s;
    -webkit-transform-origin:center;
  }
  50% {
    transform: scale(.9);
    transition: transform .3s;
    transition-duration:.5s;
    transform-origin:center;
    -webkit-transform: scale(.9);
    -webkit-transition: transform .3s;
    -webkit-transition-duration:.5s;
    -webkit-transform-origin:center;
  }
  100% {
    transform: scale(1);
    transition: transform .3s;
    transition-duration:.5s;
    transform-origin:center;
    -webkit-transform: scale(1);
    -webkit-transition: transform .3s;
    -webkit-transition-duration:.5s;
    -webkit-transform-origin:center;
  }
}
.contents .main-arr i{
  position:absolute;
  /* left: 50%;
  bottom:30%; */
  width: 6px;
  height: 45px;
  background-image: url(../img/ico-nextarr.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: bottom;
  display: block;
  z-index: 2;
  margin-left: -3px;
  animation: arr 1s;
  animation-iteration-count: infinite;
  animation-delay: 1s;
}

.green .contents .main-arr i{
  background-image: url(../img/ico-nextarr-green.png);
}
.red .contents .main-arr i{
  background-image: url(../img/ico-nextarr-red.png);
}
.yellow .contents .main-arr i{
  background-image: url(../img/ico-nextarr-yellow.png);
}
@keyframes arr {
  0% {
    bottom:30%;
  }
  50% {
    bottom:15%;
  }
  100% {
    bottom:30%;
  }
}
.contents .main-arr.left-arr i{
  transform: rotate(180deg);
  transition: transform .3s;
  transition-duration:.5s;
  transform-origin:center;
  -webkit-transform: rotate(180deg);
  -webkit-transition: transform .3s;
  -webkit-transition-duration:.5s;
  -webkit-transform-origin:center;
}
.contents .main-arr.right-arr.up i{
  transform: rotate(180deg);
  transition: transform .3s;
  transition-duration:.5s;
  transform-origin:center;
  -webkit-transform: rotate(180deg);
  -webkit-transition: transform .3s;
  -webkit-transition-duration:.5s;
  -webkit-transform-origin:center;
}
/* .contents .main-arr.up{
	position:absolute;
	bottom:-2%;
	width:100%;
	text-align:center;
	z-index:2;
  color:rgba(255,255,255,.5);
  font-size: 12px;

  transform: rotate(180deg);
  transition: transform .3s;
  transition-duration:.5s;
  transform-origin:center;
  -webkit-transform: rotate(180deg);
  -webkit-transition: transform .3s;
  -webkit-transition-duration:.5s;
  -webkit-transform-origin:center;
}

.contents .main-arr.up div.arrows{
  margin-top: 0;
}
.contents .main-arr.up i{
  height: 30px;
  bottom:30%;
} */

/* 유빈 추가 *****/
.contents .main-arr2{
	position:absolute;
	top:15%;
	width:20%;
	text-align:center;
	left:40%;
	transform: rotate(180deg) scaleX(1) translate3d( 0px, 0%, 0 );
	-webkit-transform: rotate(180deg) scaleX(1) translate3d( 0px, 0%, 0 );
	z-index:2;
}
.contents .main-arr.main-4{
	transform: rotate(180deg) scaleX(1) translate3d( 0px, 0%, 0 );
	transition: transform .3s;
	transition-duration:.5s;
	-webkit-transform: rotate(180deg) scaleX(1) translate3d( 0px, 0%, 0 );
	-webkit-transition: transform .3s;
	-webkit-transition-duration:.5s;
	-webkit-transform-origin:center;

}

.contents .main-arr span{
	margin-top:-7px;
	display:block;
	opacity:.75;
}
.contents .main-arr img{
	width:60%;
	max-width:60px;
}
.contents .main-arr span:nth-child(3){	opacity:.65;}
.contents .main-arr span:nth-child(2){	opacity:.45;}
.contents .main-arr span:nth-child(1){	opacity:.25;}


#wrap-color #main1,
#wrap-color #main2,
#wrap-color #main3,
#wrap-color #main4{
	transform: rotate(0) scaleX(1) translate3d( 0px, 0%, 0 );
	transition: transform .3s;
	transition-duration:.5s;
	-webkit-transform: rotate(0) scaleX(1) translate3d( 0px, 0%, 0 );
	-webkit-transition: transform .3s;
	-webkit-transition-duration:.5s;
	-webkit-transform-origin:left;
}
#wrap-color.main-2 #main1,
#wrap-color.main-2 #main2,
#wrap-color.main-2 #main3,
#wrap-color.main-2 #main4{
	transform: rotate(0) scaleX(1) translate3d( 0px, -100%, 0 );
	transition: transform .3s;
	transition-duration:.5s;
	-webkit-transform: rotate(0) scaleX(1) translate3d( 0px, -100%, 0 );
	-webkit-transition: transform .3s;
	-webkit-transition-duration:.5s;
	-webkit-transform-origin:left;
}
#wrap-color.main-3 #main1,
#wrap-color.main-3 #main2,
#wrap-color.main-3 #main3,
#wrap-color.main-3 #main4{
	transform: rotate(0) scaleX(1) translate3d( 0px, -200%, 0 );
	transition: transform .3s;
	transition-duration:.5s;
	-webkit-transform: rotate(0) scaleX(1) translate3d( 0px, -200%, 0 );
	-webkit-transition: transform .3s;
	-webkit-transition-duration:.5s;
	-webkit-transform-origin:left;
}
#wrap-color.main-4 #main1,
#wrap-color.main-4 #main2,
#wrap-color.main-4 #main3,
#wrap-color.main-4 #main4{
	transform: rotate(0) scaleX(1) translate3d( 0px, -300%, 0 );
	transition: transform .3s;
	transition-duration:.5s;
	-webkit-transform: rotate(0) scaleX(1) translate3d( 0px, -300%, 0 );
	-webkit-transition: transform .3s;
	-webkit-transition-duration:.5s;
	-webkit-transform-origin:left;
}

table.normal{
	width:100%;
	height:100%;
	overflow:hidden;
	table-layout: auto;
}
table.normal th{
	font-size:10px;
	color:#999;
	text-align:center;
	border-bottom:1px solid rgba(1,1,1,.2);
	border-top:1px solid rgba(1,1,1,.2);
	height:20px;
	vertical-align:700;
	background-color:rgba(255,255,255,.05);
  	padding:3px;
 	font-weight: 700;
}
table.normal td{
	font-size:10px;
	color:#999;
	padding:3px;
	text-align:center;
	border-bottom:1px solid rgba(1,1,1,.1);
	vertical-align:middle;
	font-weight:700;
/* 	display : inline-block !important;
 */}
table.normal tr:hover td{
	background-color:rgba(255,255,255,.1)
}
table td .color{
	font-weight:600;
}
table td .color.i-blue{
	color:rgba(60,185,238,1);
}
table td .color.i-green{
	color:rgba(117,207,134,1);
}
table td .color.i-yellow{
	color:rgba(250,175,76,1);
}
table td .color.i-red{
	color:rgba(216,87,85,1);
}
table td .bg-blue{
	border:1px solid rgba(60,185,238,1);
	color:rgba(60,185,238,1);
	border-radius:10px;
	box-sizing: border-box;
	font-size:10px;
	width:50px;
	display:inline-block
}
table td .bg-green{
	border:1px solid rgba(117,207,134,1);
	color:rgba(117,207,134,1);
	border-radius:10px;
	box-sizing: border-box;
	font-size:10px;
	width:50px;
	display:inline-block
}
table td .bg-yellow{
	border:1px solid rgba(250,175,76,1);
	color:rgba(250,175,76,1);
	
	border-radius:10px;
	box-sizing: border-box;
	font-size:10px;
	width:50px;
	display:inline-block
}
table td .bg-red{
	border:1px solid rgba(216,87,85,1);
	color:rgba(216,87,85,1);
	
	border-radius:10px;
	box-sizing: border-box;
	font-size:10px;
	width:50px;
	display:inline-block
}




.header .nav{
	float:left;
	}
.header .nav ul li{
	float:left;
}
.header .nav ul li a{
	line-height:70px;
	height:70px;
	margin:0 8px;
	padding:0 15px;
	font-size:14px;
	cursor:pointer;
	display:block;
	color:rgba(255,255,255,.7);
	text-decoration:none;
	font-family:"play","NanumSquareRound";
}
.header .nav ul li a:hover{
	background-color:rgba(255,255,255,.05);
	font-weight:bold;
	border-bottom:1px solid #8285ff;
}
.header .nav ul li.active a{
	color:#8285ff;
	font-weight:900;
	border-bottom:2px solid #8285ff;
}
.header .today-info{
	float:left;
	display:block;
	color:#fff;
	padding-left:25px;
	font-family:"play","NanumSquareRound";
	font-size:14px;
	line-height:70px;
	font-weight:600;
}
.header span.title{
	float:left;
	line-height:40px;
	font-size:20px;
	color:#999;
	font-weight:bold;
	font-family: 'NanumSquare', sans-serif !important;
	border-bottom:1px solid #999;
	margin-top:30px;
	margin-left:10px;
}
.header span.sub-title{
	float:left;
	line-height:40px;
	font-size:20px;
	color:#999;
	font-weight:bold;
	font-family: 'NanumSquare', sans-serif !important;
	border-bottom:0px solid #999;
	margin-top:30px;
	margin-left:10px;
}

.header .user{
	padding:10px 0;
    text-align:right;
}
.header .user .thum{
	display:inline-block;
	width:50px;
	height:50px;
	border-radius:50px;
	background-size:cover;
	vertical-align:middle;
}

.header .user blockquote{
	border:0;
	display:inline-block;
	padding:0;
	margin:0 0 0 10px;
	vertical-align:middle;
	min-width:150px;
	text-align:left;
}
.header blockquote strong{
	font-size:13px;
	color:rgba(255,255,255,.8);
	font-family: 'NanumSquareRound';
	line-height:50px;
}
.header blockquote p{
	font-size:11px;
	font-family:"dotum";
	color:#aaa;
}
.header .top-btn{
	position:absolute;
	right:-1px;
	top:0;
}
.header .top-btn a{
	display:inline-block;
	width:70px;
	height:100px;
	padding-top:30px;
	text-align:center;
	cursor:pointer
}
.header .top-btn a.logout{
	border-radius:0 5px 0 0;
	background-color:#babdc7;
	width:100px;
	margin-left:20px;
}


.contents .contents-header .round{
	background-color:#44464c;
	border:1px solid #4e4f54;
	font-size:11px;
	font-family:"play","NanumSquareRound";
	font-size:14px;;
	font-weight:600;
	color:#fff;
	height:56px;
	line-height:56px;
}
.contents .contents-header .round span.title{
	display:block;
	width:30%;
	float:left;

}
.contents .contents-header .round .txt{
	background-color:#37393e;
	display:block;
	float:left;
	width:70%;
	border-radius:0 5px 5px 0;
	margin-top:-1px;
	border-top:1px solid #4e4f54;
	border-bottom:1px solid #4e4f54;
	height:56px;
	padding:0 30px;
}
.contents .contents-header .round .txt ul{
	margin-bottom:0;
}
.contents .contents-header .round .txt .i-span{
	display:inline-block;
	padding:4px 5px;
	line-height:11px;
	font-size:11px;
	color:#fff;
	font-family:"dotum";
	border-radius:2px;
	margin-right:5px;
}
.contents .contents-header .round .txt .i-blue{
	background-color:#258bc4;
}
.contents .contents-header .round .txt .i-green{
	background-color:#30b433;
}
.contents .contents-header .round .txt .i-yellow{
	background-color:#ffc000;
}
.contents .contents-header .round .txt .i-red{
	background-color:#ff0000;
}
.contents .contents-header .round .txt .i-num{
	float:right;
	line-height:19px;
	display:inline-block;
	font-weight:900;
	font-size:14px;
	margin-top:15px;
	margin-right:30px;
	width:16px;
	text-align:center;
	padding:0;
	font-family:"play","NanumSquareRound";
}
.contents .contents-header .round .txt .i-num-blue{
	color:#258bc4;
	border-bottom:2px solid #258bc4;
}
.contents .contents-header .round .txt .i-num-green{
	color:#30b433;
	border-bottom:2px solid #30b433;
}
.contents .contents-header .round .txt .i-num-yellow{
	color:#ffc000;
	border-bottom:2px solid #ffc000;
}
.contents .contents-header .round .txt .i-num-red{
	color:#ff0000;
	border-bottom:2px solid #ff0000;
}



.contents .contents-header .round.weather-ico{
	border:1px solid rgba(255,255,255,.1)
}
.contents .contents-header .round.weather-ico.w-blue{
	background: #278ec7; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(left, #278ec7 , #2679cc); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, left, #278ec7 , #2679cc); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, left, #278ec7 , #2679cc); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, #278ec7 , #2679cc); /* Standard syntax */
}
.contents .contents-header .round.weather-ico.w-gray{
	background: #b0b0b0; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(left, #b0b0b0 , #b2b2b2);
	background: -o-linear-gradient(right, #b0b0b0, #b2b2b2);
	background: -moz-linear-gradient(right, #b0b0b0, #b2b2b2);
	background: linear-gradient(to right, #b0b0b0 , #b2b2b2);
}
.contents .contents-header .round.weather-ico.w-yellow{
	background: #db910b; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(left, #db910b , #dea90a);
	background: -o-linear-gradient(right, #db910b, #dea90a);
	background: -moz-linear-gradient(right, #db910b, #dea90a);
	background: linear-gradient(to right, #db910b, #dea90a);
}
.contents .contents-header .round.weather-ico div.swiper-slide > div{
	float:left;
	padding-left:15px;
	width:75%;
	text-align:left;
	text-overflow:ellipsis;
	white-space:nowrap;
	word-wrap:normal;
	overflow:hidden;
}
.contents .contents-header .round.weather-ico > div span.line{
	display:inline-block;
	width:1px;
	height:8px;
	background-color:rgba(255,255,255,.2);
	margin:0 10px;
}
.contents .contents-header .round.weather-ico div.swiper-slide i{
	font-size:40px;
	margin-top:7px;
	margin-left:30px;
	float:left;
}
.contents .contents-header .round.weather-ico .xi-sun-o{
	color:#ffc000;
}
.contents .contents-header .round.weather-ico .xi-full-moon{
	color:#ffe400;
}
.contents .contents-header .round.weather-ico .xi-half-moon{
	color:#ffe400;
}
.contents .contents-header .round.weather-ico .xi-xi-crescent{
	color:#ffe400;
}
.contents .contents-header .round.weather-ico .xi-moon{
	color:#ffe400;
}
.contents .contents-header .round.weather-ico .xi-snow-crystal{
	color:#fff;
}
.contents .contents-header .round.weather-ico .xi-cloudy{
	color:#eee;
}
.contents .contents-header .round.weather-ico .xi-fog{
	color:rgba(255,255,255,.3);
}
.contents .contents-header .round.weather-ico .xi-lightning{
	color:#ffe400;
}
.contents .contents-header .round.weather-ico .xi-partly-cloudy{
	color:#fff;
}
.contents .contents-body{
	margin-top:20px;
}
.contents .contents-body .round{
	background-color:#373c46;
	border:1px solid rgba(255,255,255,.1);
	padding:25px;
}
.contents .contents-body .round h3.title{
	font-size:14px;
	color:rgba(255,255,255,.7);
	line-height:14px;
	margin:0;
	margin-bottom:20px;
	width:50%;
	float:left;
	font-family:"play","NanumSquareRound";
}
.contents .contents-body .round h3.title a{
	cursor:pointer;
	text-decoration:none;
	vertical-align:top;
}
.contents .contents-body .round h3.title i{
	margin-left:15px;
	color:rgba(255,255,255,.3);
	font-size:18px;
	line-height:14px;
}
.contents .contents-body .round h3.title i span{
	font-size:12px;
	vertical-align:top;
	padding-left:5px;
}
.contents .contents-body .round.graph-line{
	padding:0;
	height:245px;
	position:relative;
	background-color:#2c3137;
}
.contents .contents-body .round .graph-line-back{
	position:absolute;
	width:100%;
	z-index:0;
	right:0;
}
.contents .contents-body .round .graph-line-back p{
	width:100%;
	margin-top:1px;
	margin-bottom:0;
	line-height:40px;
	height:40px;
	text-align:right;
	opacity:.9;
	transform: rotate(0) scaleX(0) translate3d( 0px, 0, 0 );
	transition: transform .3s;
	transition-duration:.5s;
	transform-origin:right;
	-webkit-transform: rotate(0) scaleX(0) translate3d( 0px, 0, 0 );
	-webkit-transition: transform .3s;
	-webkit-transition-duration:.5s;
	-webkit-transform-origin:right;
}
.contents .contents-body .round .graph-line-back p.active{
	transform: rotate(0) scaleX(1) translate3d( 0px, 0, 0 );
	transition: transform .3s;
	transition-duration:.5s;
	transform-origin:right;
	-webkit-transform: rotate(0) scaleX(1) translate3d( 0px, 0, 0 );
	-webkit-transition: transform .3s;
	-webkit-transition-duration:.5s;
	-webkit-transform-origin:right;
}
.contents .contents-body .round .graph-line-back p:first-child{
	border-radius:5px 5px 0 0;
	margin-top:0;
}
.contents .contents-body .round .graph-line-back p:last-child{
	border-radius: 0 0 5px 5px;
}
.contents .contents-body .round .graph-line-back p.red-1{
	/*background: #c81b1b;  For browsers that do not support gradients */
	background: -webkit-linear-gradient(left, transparent 65%, #ff3639, #c81b1b); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, left, transparent 65%, #ff3639, #c81b1b); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, left, transparent 65%, #ff3639, #c81b1b); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, transparent 65%, #ff3639, #c81b1b); /* Standard syntax */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c3137', endColorstr='#c81b1b',GradientType=1 ); /* IE6-9 */

}
.contents .contents-body .round .graph-line-back p.red-2{
	/*background: #ff0000;  For browsers that do not support gradients */
	background: -webkit-linear-gradient(left, transparent 65%, #ff5254, #ff0000); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, left, transparent 65%, #ff5254, #ff0000); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, left, transparent 65%, #ff5254, #ff0000); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, transparent 65%, #ff5254, #ff0000); /* Standard syntax */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c3137', endColorstr='#ff0000',GradientType=1 ); /* IE6-9 */
}
.contents .contents-body .round .graph-line-back p.red-3{
	/*background: #ff5050;  For browsers that do not support gradients */
	background: -webkit-linear-gradient(left, transparent 65%, #ff7d7f, #ff5050); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, left, transparent 65%, #ff7d7f, #ff5050); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, left, transparent 65%, #ff7d7f, #ff5050); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, transparent 65%, #ff7d7f, #ff5050); /* Standard syntax */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c3137', endColorstr='#ff5050',GradientType=1 ); /* IE6-9 */
}
.contents .contents-body .round .graph-line-back p.red-4{
	/*background: #ff6d50;  For browsers that do not support gradients */
	background: -webkit-linear-gradient(left, transparent 65%, #ffb0a1, #ff6d50); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, left, transparent 65%, #ffb0a1, #ff6d50); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, left, transparent 65%, #ffb0a1, #ff6d50); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, transparent 65%, #ffb0a1, #ff6d50); /* Standard syntax */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c3137', endColorstr='#ff6d50',GradientType=1 ); /* IE6-9 */
}
.contents .contents-body .round .graph-line-back p.yellow-1{
	/*background: #ff7800;  For browsers that do not support gradients */
	background: -webkit-linear-gradient(left, transparent 65%,#ffa556, #ff7800); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, left, transparent 65%,#ffa556, #ff7800); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, left, transparent 65%,#ffa556, #ff7800); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, transparent 65%,#ffa556, #ff7800); /* Standard syntax */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c3137', endColorstr='#ff7800',GradientType=1 ); /* IE6-9 */
}
.contents .contents-body .round .graph-line-back p.yellow-2{
	/*background: #ff9000;  For browsers that do not support gradients */
	background: -webkit-linear-gradient(left, transparent 65%,#ffb352, #ff9000); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, left, transparent 65%,#ffb352, #ff9000); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, left, transparent 65%,#ffb352, #ff9000); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, transparent 65%,#ffb352, #ff9000); /* Standard syntax */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c3137', endColorstr='#ff9000',GradientType=1 ); /* IE6-9 */
}
.contents .contents-body .round .graph-line-back p.yellow-3{
	/*background: #ffc000; For browsers that do not support gradients */
	background: -webkit-linear-gradient(left, transparent 65%,#ffb14c, #ffc000); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, left, transparent 65%,#ffb14c, #ffc000); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, left, transparent 65%,#ffb14c, #ffc000); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, transparent 65%,#ffb14c, #ffc000); /* Standard syntax */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c3137', endColorstr='#ffc000',GradientType=1 ); /* IE6-9 */
}
.contents .contents-body .round .graph-line-back p.yellow-4{
	/*background: #ffe400;  For browsers that do not support gradients */
	background: -webkit-linear-gradient(left, transparent 65%,#ffdb6a, #ffe400); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, left, transparent 65%,#ffdb6a, #ffe400); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, left, transparent 65%,#ffdb6a, #ffe400); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, transparent 65%,#ffdb6a, #ffe400); /* Standard syntax */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c3137', endColorstr='#ffe400',GradientType=1 ); /* IE6-9 */
}
.contents .contents-body .round .graph-line-back p.green-4{
	/*background: #b5bd35; For browsers that do not support gradients */
	background: -webkit-linear-gradient(left, transparent 65%,#cbd555, #b5bd35); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, left, transparent 65%,#cbd555, #b5bd35); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, left, transparent 65%,#cbd555, #b5bd35); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, transparent 65%,#cbd555, #b5bd35); /* Standard syntax */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c3137', endColorstr='#b5bd35',GradientType=1 ); /* IE6-9 */
}
.contents .contents-body .round .graph-line-back p.green-3{
	/*background: #75bd35;  For browsers that do not support gradients */
	background: -webkit-linear-gradient(left, transparent 65%,#8dd650, #75bd35); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, left, transparent 65%,#8dd650, #75bd35); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, left, transparent 65%,#8dd650, #75bd35); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, transparent 65%,#8dd650, #75bd35); /* Standard syntax */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c3137', endColorstr='#75bd35',GradientType=1 ); /* IE6-9 */
}
.contents .contents-body .round .graph-line-back p.green-2{
	/*background: #30b433; For browsers that do not support gradients */
	background: -webkit-linear-gradient(left, transparent 65%,#48cb4e, #30b433); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, left, transparent 65%,#48cb4e, #30b433); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, left, transparent 65%,#48cb4e, #30b433); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, transparent 65%,#48cb4e, #30b433); /* Standard syntax */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c3137', endColorstr='#30b433',GradientType=1 ); /* IE6-9 */
}
.contents .contents-body .round .graph-line-back p.green-1{
	/*background: #35bd8f;  For browsers that do not support gradients */
	background: -webkit-linear-gradient(left, transparent 65%,#4dd8ac, #35bd8f); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, left, transparent 65%,#4dd8ac, #35bd8f); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, left, transparent 65%,#4dd8ac, #35bd8f); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, transparent 65%,#4dd8ac, #35bd8f); /* Standard syntax */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c3137', endColorstr='#35bd8f',GradientType=1 ); /* IE6-9 */
}
.contents .contents-body .round .graph-line-back p.blue-1{
	/*background: #3c39c8; For browsers that do not support gradients */
	background: -webkit-linear-gradient(left, transparent 65%,#514fd6, #3c39c8); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, left, transparent 65%,#514fd6, #3c39c8); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, left, transparent 65%,#514fd6, #3c39c8); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, transparent 65%,#514fd6, #3c39c8); /* Standard syntax */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c3137', endColorstr='#3c39c8',GradientType=1 ); /* IE6-9 */
}
.contents .contents-body .round .graph-line-back p.blue-2{
	/*background: #3969c8;  For browsers that do not support gradients */
	background: -webkit-linear-gradient(left, transparent 65%,#4d7eda, #3969c8); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, left, transparent 65%,#4d7eda, #3969c8); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, left, transparent 65%,#4d7eda, #3969c8); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, transparent 65%,#4d7eda, #3969c8); /* Standard syntax */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c3137', endColorstr='#3969c8',GradientType=1 ); /* IE6-9 */
}
.contents .contents-body .round .graph-line-back p.blue-3{
	/*background: #3f97ff;  For browsers that do not support gradients */
	background: -webkit-linear-gradient(left, transparent 65%,#4fa0ff, #3f97ff); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, left, transparent 65%,#4fa0ff, #3f97ff); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, left, transparent 65%,#4fa0ff, #3f97ff); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, transparent 65%,#4fa0ff, #3f97ff); /* Standard syntax */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c3137', endColorstr='#3f97ff',GradientType=1 ); /* IE6-9 */
}
.contents .contents-body .round .graph-line-back p.blue-4{
	/*background: #39c5d6;  For browsers that do not support gradients */
	background: -webkit-linear-gradient(left, transparent 65%,#4dd2e5, #39c5d6); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, left, transparent 65%,#4dd2e5, #39c5d6); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, left, transparent 65%,#4dd2e5, #39c5d6); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, transparent 65%,#4dd2e5, #39c5d6); /* Standard syntax */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c3137', endColorstr='#39c5d6',GradientType=1 ); /* IE6-9 */
}
.contents .contents-body .round .graph-line-back p span{
	display:inline-block;
	font-size:11px;
	width:90px;
	text-align:right;
	color:rgba(255,255,255,.7);
	font-family:"play","NanumSquareRound";
	font-weight:600;
}
.contents .contents-body .round .graph-line-back p strong{
	display:inline-block;
	font-size:14px;
	width:90px;
	text-align:left;
	padding-left:10px;
	color:#fff;
	font-family:"play","NanumSquareRound";
	font-weight:600;
}
.contents .contents-body .round .graph-line-front{
	position:absolute;
	z-index:1;
	width:100%;
	right:0;
	height:245px;
}
.contents .contents-body .round .graph-line-front .alert{
	position:absolute;
	color:#fff;
	top:98px;
	width:50%;
	left:33%;
}
.contents .contents-body .round .graph-line-front .alert strong{
	font-weight:900;
	font-size:16px;
	font-family:"play","NanumSquareRound";
	margin-bottom:5px;
	display:block
}
.contents .contents-body .round .graph-line-front .alert p{
	font-weight:600;
	font-size:13px;
	font-family:"play","NanumSquareRound";
}
@media (max-width: 1670px){
	.contents .contents-body .round .graph-line-front .alert{
		position:absolute;
		color:#fff;
		top:110px;
		width:50%;
		left:48%;
	}
	.contents .contents-body .round .graph-line-front .alert p{
		display:none;
	}
}


.contents .contents-body .round .graph-line-front a{
	color:#fff;
}
.contents .contents-body .round .graph-line-front a.refresh{
	position:absolute;
	bottom:20px;
	cursor:pointer;
}


.contents .round.chart-total p{
	text-align:center;
	margin-top:60px;
	font-weight:bold;
	font-size:14px;
	color:#b3b6c1;
	letter-spacing:2px;
	margin-bottom:0;
}

.contents .round.total div.score{
	border-radius:100px;
	background-color:rgba(255,255,255,.2);
	height:30px;
	min-height:60px;
	margin:10px auto 0 auto;
	padding-top:12px;
	width:90%;
	text-align:center;
}
.contents .round.total div.score a{
	display:inline-block;
	width:28%;
	font-size:24px;
	color:#fff;
	text-align:center;
	text-decoration:none;
	font-weight:500;
}
.contents .round.total div.score a span{
	font-size:11px;
	color:#fff;
	display:block;
	width:100%;
	margin-bottom:0;
	font-weight:normal;
	line-height:11px;
}
.contents .new-currently{
	width:100%;
	height:54px;
	margin-bottom:10px;
}
.contents .new-currently span.thum{
	width:54px;
	height:54px;
	display:block;
	background-size:cover;
	border-radius:3px 0 0 3px;
	float:left;
}
.contents .new-currently .name blockquote{
	float:left;
}
.contents .new-currently .name blockquote strong{
	font-size:14px;
	line-height:14px;
	font-weight:600;
}
.contents .new-currently .name blockquote p{
	letter-spacing:0;
	line-height:11px;
}
.contents .new-currently > div div{
	float:left;
	width:10%;
}
.contents .new-currently > div div.name{
	width:27%;
}
.contents .new-currently > div div.btn{
	width:13%;
}
.contents .new-currently > div div blockquote{
	border-left:1px solid #ddd;
	margin-bottom:0;
	padding:9px 20px;
}
.contents .new-currently > div div blockquote strong{
	font-size:12px;
	padding:0;
	margin:0;
	font-family:"dotum";
	font-weight:normal;
	letter-spacing:-0.5px;
	line-height:12px;
	}
.contents .new-currently > div div blockquote p{
	font-size:11px;
	padding:0;
	margin:0;
	font-family:"dotum";
	font-weight:normal;
	color:#999;
	letter-spacing:-0.5px;
	line-height:11px;
}
.contents .total.round > div {

	background: linear-gradient(to bottom, #4884dc, #46bae3);
	background: -webkit-linear-gradient(top, #4884dc, #46bae3);
	background: -moz-linear-gradient(top, #4884dc, #46bae3 );
	background: -o-linear-gradient(top, #4884dc, #46bae3 );
	min-height:300px;
	padding:30px 20px;
}


.contents .round > div h3{
	font-size:18px;
	font-weight:600;
	letter-spacing:-1px;
	padding:0;
	margin:0;
	}
.contents .round.chart > div.view{
	padding:10px 0px 10px 20px;
	min-height:300px;
}
.contents .round.chart > div.category-right{
	width:50%;
	float:left;
	text-align:right;
	margin-top:-12px;
}
.contents .round.chart > div.category-right span{
	display:inline-block;
	color:#fff;
	font-size:11px;
	font-family:"dotum";
	margin-top:-10px;
	margin-left:2px;
}
.contents .round.chart > div.category-right span i{
	width:100%;
	display:block;
	height:4px;
	margin-top:3px;
}
.contents .round.chart > div.category-right span i.l-1{
	border: 1px solid rgba(94,166,255,1);
    background-color: rgba(94,166,255,.7);
}
.contents .round.chart > div.category-right span i.l-2{
	border: 1px solid rgba(61,88,255,1);
    background-color: rgba(61,88,255,.7);
}
.contents .round.chart > div.category-right span i.l-3{
	border: 1px solid rgba(107,61,255,1);
    background-color: rgba(107,61,255,.7);
}
.contents .round.chart > div h3{color:#777;}
.chart-view{
	position:relative!important;
	height:248px
	}
.contents .round.chart div.chart-view div.group{
	position:absolute;
	z-index:0;
	width:100%;
}
.contents .round.chart div.chart-view div.group span.line{
	width:3.33%;
	height:250px;
	background-color:rgba(0,0,0,.1);
	display:block;
	float:left;
	margin-right:3.33%;
}
.contents .round.chart div.chart-view.outdoor div.group span.line{
	width:14.28%;
	margin-right:14.28%;
}
.contents .round.chart div.chart-view.outdoor div.group span.line:last-child{
	margin-right:0%;
}
.contents .round.chart.blue div.chart-view div.group span.line{
	margin-left:62px;
}
.contents .round.chart.bora div.chart-view div.group span.line{
	margin-left:54px;
}
.contents .round.chart div.chart-view div.group-x {
	position:absolute;
	top:0;
	z-index:0;
	width:100%;
}
.contents .round.chart div.chart-view div.group-x span.line-x{
	width:100%;
	height:1px;
	background-color:rgba(255,255,255,.1);
	display:block;
	margin-bottom:30px;
}
.contents .round.chart div.chart-view div.group-x span.line-x i{
	position:absolute;
	left:-25px;
	font-size:12px;
	color:#aaa;
	margin-top:-6px;
	text-align:right;
	width:20px;
	display:block;
	font-family: 'Play', sans-serif;
	font-weight:600;

}
.contents .round.chart div.chart-view div.group-x span.line-x-dot{
	border-bottom:1px dotted rgba(255,255,255,.2);
}

.chart-graph {
	position:absolute;
	bottom:0;
	width:100%;
}
.chart-graph .line-area{
	width:3.33%;
	background-color:rgba(0,0,0,.0);
	display:block;
	float:left;
	margin-right:0px;
	text-align:center;
	vertical-align:bottom;
	height:250px;
	position:relative
	}
.chart-view.outdoor .chart-graph .line-area{
	width:14.28%;
}


.blue .chart-graph .line-area{
	margin-right:17px;
	}
.bora .chart-graph .line-area{
	margin-right:9px;
	}
.chart-graph .line-area span{
	display:block;
	vertical-align:bottom;
	position:absolute;
	bottom:0;
	background-color:#fff;
	width:5px;
	cursor:pointer
}
.chart-view.outdoor .chart-graph .line-area span{
	width:10%;
}


.chart-graph .line-area > span{
	transform: rotate(0) scaleY(0) translate3d( 0px, 0, 0 );
	transition: transform .3s;
	transition-duration:.5s;
	transform-origin:bottom;
	-webkit-transform: rotate(0) scaleY(0) translate3d( 0px, 0, 0 );
	-webkit-transition: transform .3s;
	-webkit-transition-duration:.5s;
	-webkit-transform-origin:bottom;
}
.chart-graph.last .line-area span.l-1{
	left:24%;
}
.chart-graph.last .line-area span.l-2{
	left:42%;
}
.chart-graph.last .line-area span.l-3{
	left:60%;
}

.chart-graph .line-area > span.active{
	transform: rotate(0) scaleY(1) translate3d( 0px, 0, 0 );
	transition: transform .3s;
	transition-duration:.5s;
	transform-origin:bottom;
	-webkit-transform: rotate(0) scaleY(1) translate3d( 0px, 0, 0 );
	-webkit-transition: transform .3s;
	-webkit-transition-duration:.5s;
	-webkit-transform-origin:bottom;

}
.chart-graph .line-area span.l-1{
	border:1px solid rgba(94,166,255,1);
	background-color:rgba(94,166,255,.7);
	left:28%;
}

.chart-view.outdoor.area-check .chart-graph .line-area span.l-1{
	left:45%;
}

.chart-graph .line-area span.l-2{
	border:1px solid rgba(61,88,255,1);
	background-color:rgba(61,88,255,.7);
	left:45%;
}
.chart-graph .line-area span.l-3{
	border:1px solid rgba(107,61,255,1);
	background-color:rgba(107,61,255,.7);
	left:62%;
}
.chart-graph .line-area span div.comment span.shape{
	display:block;
	height:5px;
	width:5px;
	transform: rotate(45deg) scaleY(1) translate3d( 0px, 0, 0 );
	-webkit-transform: rotate(45deg) scaleY(1) translate3d( 0px, 0, 0 );
	position:absolute;
	bottom:-3px;
}
.chart-graph .line-area span.l-1 div.comment{
	border:1px solid rgba(94,166,255,1);
	background-color:rgba(94,166,255,.7);
}
.chart-graph .line-area span.l-2 div.comment{
	border:1px solid rgba(61,88,255,1);
	background-color:rgba(61,88,255,.7);
}
.chart-graph .line-area span.l-3 div.comment{
	border:1px solid rgba(107,61,255,1);
	background-color:rgba(107,61,255,.7);
}
.chart-graph .line-area span.l-1 div.comment span.shape{
	border:1px solid rgba(94,166,255,1);
	background-color:rgba(94,166,255,.7);
}
.chart-graph .line-area span.l-2 div.comment span.shape{
	border:1px solid rgba(61,88,255,1);
	background-color:rgba(61,88,255,.7);
}
.chart-graph .line-area span.l-3 div.comment span.shape{
	border:1px solid rgba(107,61,255,1);
	background-color:rgba(107,61,255,.7);
}


.chart-graph .line-area div.comment{
	position:absolute;
	font-family: 'Play', sans-serif;
	color:#fff;
	font-size:11px;
	position:absolute;
	top:-30px;
	display:none;
	left:-8px;
	padding:3px 5px;
	z-index:200;
}

.chart-view.outdoor .chart-graph .line-area div.comment{
	left:-1px;
}


.blue .chart-graph .line-area div.comment{
	border:1px solid rgba(61,129,214,1);
	background-color:rgba(61,129,214,.7);
	color:#fff;
}
.bora .chart-graph .line-area div.comment{
	border:1px solid rgba(97,61,214,1);
	background-color:rgba(97,61,214,.7);
	color:#fff;
}


/*
.chart-graph .line-area:hover{
	background-color:rgba(61,193,214,.3);
}
.blue .chart-graph .line-area:hover{
	background-color:rgba(61,129,214,.3);
}
.bora .chart-graph .line-area:hover{
	background-color:rgba(97,61,214,.3);
}
.chart-graph .line-area:hover > span{
	background: linear-gradient( to top, #97f4f8, #3dc1d6);
	background: -webkit-linear-gradient(top, #97f4f8, #3dc1d6);
	background: -moz-linear-gradient(top, #97f4f8, #3dc1d6 );
	background: -o-linear-gradient(top, #97f4f8, #3dc1d6 );

}
.blue .chart-graph .line-area:hover > span{
	background: linear-gradient( to top, #97e9f8, #3d81d6);
	background: -webkit-linear-gradient(top, #97e9f8, #3d81d6);
	background: -moz-linear-gradient(top, #97e9f8, #3d81d6 );
	background: -o-linear-gradient(top, #97e9f8, #3d81d6 );
}
.bora .chart-graph .line-area:hover > span{
	background: linear-gradient(to top, #9960ee, #613dd6);
	background: -webkit-linear-gradient(top, #9960ee, #613dd6);
	background: -moz-linear-gradient(top, #9960ee, #613dd6 );
	background: -o-linear-gradient(top, #9960ee, #613dd6 );
}
*/
.chart-graph .line-area span:hover div.comment{
	display:block;
}
.chart-graph .line-area > i{
	position:absolute;
	font-size:11px;
	width:50px;
	bottom:-20px;
	display:block;
	font-family: 'Play', sans-serif;
	font-weight:600;
	color:#999;
	letter-spacing:-1px;
	left:50%;
	margin-left:-25px;
}
.chart-view.outdoor .chart-graph .line-area > i{
	width:100%;
	left:0;
	margin-left:0;
}
.login-section{
	width:370px;
	height:630px;
	display:inline-block;
	border-radius:5px;
	margin-top:100px;
	background:url(../../img/hrm/bg-login.jpg) #24272f;
}
.login-section .head{
	padding-top:140px;
	padding-bottom:100px;
}
.login-section .body{
	padding:0 20px;
}
.login-section .body p{
	width:100%;
	margin-bottom:2px;
	position:relative;

}
.login-section .body p input[type=text],.login-section .body p input[type=password]{
	width:100%;
	background-color:rgba(255,255,255,.1);
	border:0;
	height:56px;
	padding-left:35px;
	color:#fff;
	font-size:12px;
	font-family: 'Play', sans-serif;
}
.login-section .body p input[type=submit]{
	background: linear-gradient(to bottom, #e56a68, #d2403e);
	background: -webkit-linear-gradient(top, #e56a68, #d2403e);
	background: -moz-linear-gradient(top, #e56a68, #d2403e );
	background: -o-linear-gradient(top, #e56a68, #d2403e );

	border:0;
	width:100%;
	height:56px;
	line-height:56px;
	border-radius:0 0 3px 3px;
	box-shadow:inset 0px -3px 0px rgba(0,0,0,.3);
	color:#fff!important;
	text-shadow: 0px 1px 0px rgba(0,0,0,.5);
	font-size:16px;
}
.login-section .body p input[type=submit].gray{

	background: linear-gradient(to bottom, #999, #666);
	background: -webkit-linear-gradient(top, #999, #666);
	background: -moz-linear-gradient(top, #999, #666 );
	background: -o-linear-gradient(top, #999, #666 );

	color:rgba(255,255,255,.5)!important;
}
.login-section .body p input[type=submit].black{
	background: linear-gradient(to bottom, #666, #333);
	background: -webkit-linear-gradient(top, #666, #333);
	background: -moz-linear-gradient(top, #666, #333 );
	background: -o-linear-gradient(top, #666, #333 );
	color:rgba(255,255,255,.5)!important;
}
.login-section .body p i{
	position:absolute;
	height:56px;
	line-height:56px;
	color:rgba(255,255,255,.3);
	font-size:20px;
	left:10px
}


.sub-menu{
	width:160px;
	position:absolute;
	left:100px;
	top:0;
	min-height:100px;
	background-color:#000;
	z-index:100;
	border-radius:0 5px 5px 0;
	display:none;
}


/*�떖�젰*/
.picker-container {
  position: absolute;
  z-index: 99;
}
.tab {
	margin-bottom:0;
	margin-top:0;
	background-color:#fff;
}
.tab li{
	display:block;
	width:33.3333333%;
	float:left;
  	padding: 0 15px;
}
.tab li a{
	height:56px;
	line-height:56px;
	display:block;
	font-size:14px;
	color:rgba(0,0,0,.3);
	text-align:center;
	text-decoration:none;
	cursor:pointer;
  transform: scaleX(.9);
	transition: transform .3s;
	transition-duration:.5s;
	transform-origin:center;
	-webkit-transform: scaleX(.9);
	-webkit-transition: transform .3s;
	-webkit-transition-duration:.5s;
	-webkit-transform-origin:center;
}
.tab li a.active{
	border-bottom:10px solid #6fc2c9;
	color:#6fc2c9;
	font-weight:bold;
}
.green#wrap .tab li a.active{
  border-bottom:10px solid #84CE8D;
	color:#84CE8D;
}
.yellow#wrap .tab li a.active{
  border-bottom:10px solid #dabf6d;
	color:#dabf6d;
}
.red#wrap .tab li a.active{
  border-bottom:10px solid #c77171;
	color:#c77171;
}



.cal {
	background-color: #fff;
	display: block;
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	min-height:240px;
	height:auto;
  margin-bottom: 20px;
}

.cal a {
	text-decoration: none;
}
.cal thead{
	margin-top:15px;
}
.cal thead,.cal tbody,.cal tr{
	width:100%;
	display:block;
}
.cal thead,
.cal tbody{
  padding: 0 20px;
}
.cal tr{clear:left;}
.cal tr, .cal th, .cal td {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
.cal th{
  padding: 10px 0;
}

.cal caption {
	line-height: 45px;
	height:45px;
	font-weight: bold;
	color: #fff;
	text-align: center;
	display:block;
	background-color:#6fc2c9;
	padding:0;
  border-radius: 30px;
  margin: 0 15px;
}
.cal caption a {
	display: block;
	line-height: 45px;
	padding: 0 10px;
	font-size: 15px;
	color: #fff;
	text-decoration:none;
}
.cal caption a i{
	color:rgba(255,255,255,.5);
	font-size:20px;
	line-height:45px;
}
.cal caption a:hover i{
	color:rgba(255,255,255,1);
}
.cal caption .month{
	font-size:15px;
	border-bottom:2px solid rgba(255,255,255,1);
	padding-bottom:5px;
	line-height:15px;
	padding-top:10px;
	font-family:"play";
	vertical-align:top;
	display:inline-block;

}
.cal caption a:hover {
	color: white;
}
.cal caption .prev {
	float: left;
}
.cal caption .next {
	float: right;
}
.cal th, .cal td {
	width: 14%;
	text-align: center;
	display:inline-block;

}
.cal th:first-child, .cal td:first-child {
	border-left: 0;
}
.cal th {
	line-height: 20px;
	font-size: 13px;
	color: #696969;
	text-transform: uppercase;
	font-family:"play","NanumSquareRound";
	font-weight:400;
}

.jquery-month .cal td {
	width:30%;
	height:50px;
	line-height:50px;
}
.cal td {
	font-size: 11px;
	font-weight: bold;
	display:inline-block;
	line-height:31px;
	text-align:center;
}
.cal td a {
	clear: both;
	position: relative;
	width: 60%;
	line-height: 20px;
	color: rgba(0,0,0,.4);
	font-family:"play";
	font-size:12px;
  font-weight: 400;
}
.cal td.off a {
	color: rgba(0,0,0,.1);
}
.cal td.active a, .cal td a:active {
	margin: -1px;
	color: #6fc2c9;
  font-weight: 700;
	-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
}
.cal td.active:first-child a, .cal td:first-child a:active {
	border-left: 0;
	margin-left: 0;
}
.cal td.active:last-child a, .cal td:last-child a:active {
	border-right: 0;
	margin-right: 0;
}
.cal tr:last-child td.active a, .cal tr:last-child td a:active {
	border-bottom: 0;
	margin-bottom: 0;
}

.cal-view{display:none;}
.cal-view.active{display:block;}
.select-area {
	padding:0 15px;
	margin-top:20px;
	margin-bottom:15px;
	clear:left;
}
.select-area select{
	width:100%;
	margin-bottom:10px;
	background-color:#25252b;
	border-radius:3px;
	border:1px solid rgba(35,153,242,.1);
	color:rgba(255,255,255,.7);
	font-size:13px;
	padding:10px;
	font-family:"play","NanumSquareRound";
	height:39px;
	line-height:39px;
}
.select-area input[type="submit"]{
	width:100%;
	background-color:#269bf3;
	color:#fff;
	border:0;
	border-radius:3px;
	font-size:12px;
	line-height:39px;
	height:36px;
	font-family:"play","NanumSquareRound";
}



@keyframes arrows {
  0% {
    border-left: 3.66667px solid transparent;
    border-bottom: 3.66667px solid transparent;
    transform: translate(-13.33333px, -10.33333px) rotate(-45deg);
    transform-origin:center;
  }
  10%, 90% {
    border-left: 3.66667px solid transparent;
    border-bottom: 3.66667px solid transparent;
  }
  50% {
    border-left: 3.66667px solid rgba(255, 255, 255, 0.7);
    border-bottom: 3.66667px solid rgba(255, 255, 255, 0.7);
    transform: translate(-13.33333px, 0px) rotate(-45deg);
    transform-origin:center;
  }
  100% {
    border-left: 3.66667px solid transparent;
    border-bottom: 3.66667px solid transparent;
    transform: translate(-13.33333px, 10.33333px) rotate(-45deg);
    transform-origin:center;
  }
}

.hand-on{
	position:absolute!important;
	width:100% !important;
	top:0% !important;
	text-align:center;
	color:#00c0ff;
	height:100%!important;
	font-size:.8em;
	background-color:rgba(0,0,0,.8);
	z-index:4;
	padding-top:55%;
	display:none;
}
.hand-on i{
	font-size:4em;
	margin-bottom:20px;
}

.weather-info {
  width: 100%;
  text-align: center;
}
.weather-info > div.weather{
  width: 200px;
  margin: 30px auto 20px;
  height: 80px;
}
.weather-info > div.weather > div{
  width: 45%;
  display: inline-block;
  height: 30px;
  vertical-align: top;
}
.weather-info > div.weather .icon img{
  height:50px;
}
.weather-info > div.weather .icon p{
  font-size: 16px!important;
  font-weight: 900!important;
  margin-top: 10px;
}
.weather-info > div.weather .temporary p{
  font-size: 40px!important;
  font-weight: 900!important;
  position: relative;
  display:inline-block;
  min-width: 50px;
  padding: 0 10px;
  line-height: 50px;
  margin-bottom: 10px!important;

}
.weather-info > div.weather .temporary .temp p span{
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  display: block;
  border: 3px solid #fff;
  right:0px;
  top:0;
}
.weather-info > div.weather .temporary .highlow span{
  font-size: 16px!important;
  font-weight: 900!important;
  margin-top: 10px;
}
.weather-info > div.weather .temporary .highlow i{
  vertical-align: sub;
  font-size: 14px;
}
.weather-info > div.weather .temporary .highlow i.xi-caret-up-min{
  color:#1c7adb
}
.weather-info > div.weather .temporary .highlow i.xi-caret-down-min{
  color:#dc6464
}

.weather-info .dust {
  background-color: #fff;
  border-radius: 20px;
  width: 300px;
  margin: 0 auto;
  min-height: 195px;
}



.w730 .contents > div.row div.today {
  transform: scale(.9);
  transition: transform .3s;
  -webkit-transform: scale(.9);
  -webkit-transition: transform .3s;
  margin-top: -20px;
}
.w730 #main2.contents > div.row div.today {
  margin-top: -80px;
}


.w650 .contents > div.row div.today {
  transform: scale(.8);
  transition: transform .3s;
  -webkit-transform: scale(.8);
  -webkit-transition: transform .3s;
  margin-top: -20px;
}
.w650 #main2.contents > div.row div.today {
  margin-top: -100px;
}

.w600 .contents > div.row div.today {
  transform: scale(.7);
  transition: transform .3s;
  -webkit-transform: scale(.7);
  -webkit-transition: transform .3s;
  margin-top: -20px;
}
.w600 #main2.contents > div.row div.today {
  margin-top: -110px;
}



.weather-info .dust > div{
  display: inline-block;
  width: 30%;
  padding: 25px 0;
  vertical-align: top;
}
.weather-info .dust > div p{
  color:#2aa5c0!important;
  font-size: 12px!important;
}

.green .weather-info .dust > div p{
  color:#84CE8D!important;
}
.yellow .weather-info .dust > div p{
  color:#dabf6d!important;
}
.red .weather-info .dust > div p{
  color:#c77171!important;
}


.weather-info .dust > div p.title{
  font-weight: normal!important;
}
.weather-info .dust > div p.value{
  font-size: 30px!important;
  font-weight: 900!important;
  line-height: 30px;
  margin-top: 20px;
}
.weather-info .dust > div p.summary{
  letter-spacing: 0;
  font-weight: 900!important;
}
.weather-info .dust > div p.value.margin{
  line-height: 40px!important;
  margin-bottom: 15px!important;
}
.weather-info .dust > div strong{
  letter-spacing: 0;
  font-weight: 900!important;
  color:#2aa5c0!important;
  margin-top: 10px!important;
  width: 100%;
  display: block;
}

.green .weather-info .dust > div strong{
  color:#84CE8D!important;
}
.yellow .weather-info .dust > div strong{
  color:#dabf6d!important;
}
.red .weather-info .dust > div strong{
  color:#c77171!important;
}
.weather-info .dust img{
  height: 25px;
  margin-top: 15px;
}
.weather-info .water > div{
  display: inline-block;
  width: 30%;
  padding: 25px 0;
  vertical-align: top;
}

.weather-info .water > div .ico{
  width: 100%;
  height: 40px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 15%;
  margin-bottom: 5px;

}
.weather-info .water > div .ico.u{
  background-image: url(../img/ico-1.png)
}
.weather-info .water > div .ico.w{
  background-image: url(../img/ico-2.png);
  background-size: 12%;
}
.weather-info .water > div .ico.d{
  background-image: url(../img/ico-3.png)
}

.white-table{
  background-color: #fff;
  width: 100%;
  border-radius: 15px;
  padding:20px 15px;
}


/********************************************* 22.03.07 박유빈 추가 */
/************ login */
.login_back{
	position: relative;
}
.login{
	position: absolute;
	top: calc(50% - 150px);
	/* left: calc(50% - 100px); */
	width: 100%;
	padding: 0 15%;
	text-align: center;
}
.login .top{
	margin-bottom: 50px;
}
.login-input{
    margin-top: 30px;
}
.login-input > input{
    box-sizing: border-box;
    background-color: transparent;
    padding-left: 15px;
    padding-right: 15px;
    border: solid #ffffff 1px;
	background-color: rgba(255,255,255, 0.15);
	border-radius: 30px;
    width: 100%;
    height: 40px;
    color: #ffffff;
	font-family: 'NotoSansKR';
	font-weight: 900;
    font-size: 14px;
	letter-spacing: 1px;
	margin-bottom: 15px;
}
.login-input > input::placeholder{
	text-align: left;
    color: #ffffff;
    font-size: 14px;
}
.auto-login{
	text-align: left;
}

.login .chk input[type="checkbox"]{
  position:absolute;
  width: 20px;
  height: 20px;
  padding:0;
  overflow:hidden; 
  clip:rect(0,0,0,0); 
  border: 0;
  margin: -13px;
  display: none;  
} 
.login .chk input[type="checkbox"] + label{ 
  display:inline-block; 
  position:relative; 
  padding-left:26px; 
  cursor:pointer; 
} 
.login .chk input[type="checkbox"] + label:before{ 
  content: ''; 
  position: absolute; 
  left: -5px;
  top: 3px;
  width: 20px;
  height: 20px; 
  border-radius: 10px;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid #fff; 
  box-sizing: border-box;
}
.login .chk input[type="checkbox"]:checked + label:after{ 
  content: ''; 
  position:absolute; 
  left: 0px;
  top: 1px;
  width: 20px;
  height: 20px; 
  border-radius: 10px;
  background-color: #FFFFFF;
  border: 5px solid #CCCCCC;
  box-sizing: border-box;
}
.login .chk span{
  font-family: '';
  font-size: 14px;
  line-height: 25px;
  color: #ffffff;
  padding-left: 5px;
}

.btn-section{
	width: 100%;
	box-sizing: border-box;
	margin-top: 25px;
}
.full-btn{
    width: 100%;
    height: 40px;
    border: none;
    background-color: #ffffff;
	font-family: 'NotoSansKR';
	font-weight: 800;
    font-size: 14px;
	line-height: 30px;
    margin-top: 7px;
	display: inline-block;
	border-radius: 30px;
}
.login .full-btn{
    color: #6fc2c9;
}
.add-explain{
	font-family: 'NotoSansKR';
	font-weight: 700;
	font-size: 10px;
	line-height: 17px;
	color: #ffffff;
	text-align: left;
	opacity: 0.5;
	margin-top: 30px;
	word-break: keep-all;
}

/*** index */
.express-data{
	text-align: center;
	
	width:50%;
}
#main4 .express-data{
	width: 100%;
}
.data-num.title{
	font-size: 40px;
    font-weight: 900;
    margin-bottom: 5%;
	color: #ffffff;
}
.data-name > span{
	/* background-color: #fff;
    border-radius: 20px;
    padding: 6px 14px;
    color: #6fc2c9; */
	color: #ffffff;
    font-size: 15px;
}
.plus-wrap #main2 .dis-absl{
    width: 100%;
	height: 100%;
	padding: 5%;
}
.plus-wrap .white-table{
	height: auto;
	border-radius: 15px ;
}
#main2 .plus-wrap .white-table,
#main4 .plus-wrap .white-table{	
	max-height: calc(100% - 220px);
}

.plus-wrap .white-table table,
.plus-wrap .white-table table.normal{
	min-width: 100%;
	width: auto;
	height: auto;
}
.plus-wrap .white-table table th,
.plus-wrap .white-table table.normal th,
.plus-wrap .white-table table td,
.plus-wrap .white-table table.normal td{
	height: 30px;
	/* min-width: 100px; */
	width: auto;
	white-space: nowrap;
	font-size: 12px;
	line-height: 17px;
	padding: 0 10px;
}
.plus-wrap #main2 span.letter1{
	color: #6fc2c9;
}
/*** 0010 */
.plus-wrap .contents.sub .graph-overflow{
	margin: 0 0;
}
.plus-wrap .showbox-data{
	width: 100%;
	/* height: 50px; */
	border: 1px solid #ffffff;
	background-color: rgba(255,255,255,.15);
	color: #ffffff;
	border-radius: 15px;
	font-size: 16px;
	line-height: 40px;
	padding: 5px 15px;
}
.plus-wrap .sub-tilte{
	color: #fff;
	text-align: left;
	width: 100%;
	margin-bottom: 15px;
	font-size: 14px;
	font-weight: 500;
}
.plus-wrap .showbox-data i{
	font-size: 20px;
	color: #ffffff;
}
.plus-wrap .tab li{
	width: 50%;
}
/*** 0020 */
.plus-wrap .flex-css{
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-evenly;
	align-items: center;
	height: 150px;
}
.plus-wrap .flex-css .letter1{
	margin-top: 10px;
    background-color: #fff;
    padding: 6px 14px;
    color: #83C5CE;
    border-radius: 20px;
    font-size: 11px;
	box-sizing: border-box;
	display: block;
}
.plus-wrap .white-table table.normal{
	overflow: auto;
	min-width: 100%;
	width: auto;
}
/*** 0050 */
.plus-wrap .tab.seacrh-tab{
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-evenly;
	align-items: center;
	width: 100%;
	height: 112px;
}
.plus-wrap div.seacrh-tab p{
	/* color: #83C5CE; */
}
.plus-wrap div.seacrh-tab .dis-flex {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	width: 65%;

}
.plus-wrap div.seacrh-tab .dis-flex input[type=text]{
	border: 1px solid #83C5CE!important;
	border-right: 0;
	border-radius: 4px 0 0 4px;
	height: 32px;
	width: auto;
	min-width: calc(100% - 48px);
	font-size: 14px;
	background-image: url("../img/calendar.png");
	background-repeat: no-repeat;
	background-position: calc(100% - 10px);
	background-size: 14px;
}
.plus-wrap div.seacrh-tab .dis-flex input:focus {
	 outline: none; 
	}
.plus-wrap div.seacrh-tab .search-btn{
	/* border: 1px solid #83C5CE; */
	border: none;
	background-color: #83C5CE;
	color: #ffffff;
	border-radius:  0 4px 4px 0;
}
.plus-wrap div.seacrh-tab .search-btn:focus{
	outline: none;
}
/*** 0060 */
.plus-wrap .info-part .white-table{
	margin: 10px 0;
	padding: 20px 10px;
}
.plus-wrap .info-part .info-part-title{
	margin: 30px 5px 15px;
	font-size: 15px;
	color: #ffffff;
}
.plus-wrap .info-part .white-table table{
	width: 100%;
}
.plus-wrap .info-part .white-table table tr{
	border-bottom: 1px solid rgba(118, 118, 118, 0.3);
}
.plus-wrap .info-part .white-table table tr:last-child{
	border-bottom: none;
}
.plus-wrap .info-part .white-table table tr th{
	font-size: 14px;
	line-height: 20px;
	height: 50px;
	width: 80px;
	padding: 0 5px 0 10px;
}
.plus-wrap .info-part .white-table table tr td{
	font-size: 14px;
	line-height: 20px;
	height: 50px;
}
.plus-wrap .info-part .white-table table input,
.plus-wrap .info-part .white-table table select{
	width: 100%;
	height: 35px;
	font-size: 14pxs;
	line-height: 20px;
	letter-spacing: 2px;
	border: 1px solid #bbb;
	border-radius: 4px;
	padding-left: 10px;
}
.plus-wrap .info-part .white-table.plus-info table select,
.plus-wrap .info-part .white-table.plus-info table input{
	width: 100px;
}
.plus-wrap .info-part .white-table.plus-info table .birthday-info td p{
	width: calc(23% - 10px);
}
.plus-wrap .info-part .white-table.plus-info table .birthday-info td p input{
	width: 100%;
}

.plus-wrap .ovflw-auto{
	overflow: auto;
}
.plus-wrap .info-view{
	position: relative;
}
.plus-wrap .info-view.ovflw-auto{
	overflow: auto;
	height: calc(100% - 112px);
	padding: 5%;
}
.plus-wrap .info-view.ovflw-auto .white-table{
	height: auto;
}
.plus-wrap .dis-flex{
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}
.plus-wrap .white-table table.normal thead tr,
.plus-wrap .white-table table.normal tbody tr:nth-child(even){
	background-color: rgba(0, 0, 0, 0.03);
}

.plus-wrap .white-table table.normal .total_bg th{
	background-color: rgba(113,183,192,.2);
	color: rgba(113,183,192,1);
	border-bottom: 1px solid rgba(113,183,192,1);
}
.plus-wrap .white-table table.normal .total_bg {
	border-top: 1px solid rgba(113,183,192,1);
	border-bottom: 1px solid rgba(113,183,192,1);
}
/******************************* 22.03.10 박유빈 추가 */


/* 20220428 방현우 : Dreams 로고 너무 작게 뜸 */
/* .top .logo{
	height: 26px;
} */


.plus-wrap .arrow-section .right-arr.only-arr{
	width: 100%;	
}
.plus-wrap .arrow-section .right-arr.only-arr > button{
	width: 80%;
	height: 40px;
	border-radius: 30px;
	/* color: #6fc2c9; */
	background-color: #ffffff;
	font-size: 16px;
	font-weight: 600;;
}
.plus-wrap .arrow-section .right-arr.only-arr > button svg,
.plus-wrap .arrow-section .left-arr > button svg,
.plus-wrap .arrow-section .right-arr > button svg{
	margin-right: 5px;
}
.plus-wrap .arrow-section .left-arr,
.plus-wrap .arrow-section .right-arr{
	width: 50%;
}
.plus-wrap .arrow-section .left-arr > button,
.plus-wrap .arrow-section .right-arr > button{
	width: calc(100% - 10px);
	height: 40px;
	border-radius: 30px;
	color: #6fc2c9;
	background-color: #ffffff;
	font-size: 16px;
	font-weight: 600;
}
.plus-wrap .contents.main#main2 .row{
	height: 100%;
}

.scroll-tab{
	overflow-y: scroll;
	height: calc(100% - 30px);
}

#main3 > div,
#main4 > div{
	height: calc(100% - 120px);
	padding: 20px 23px 0 20px;
}
#main3 .arrow-section,
#main4 .arrow-section {
	position: absolute;
	top:calc(100% - 100px);
	height: 80px;
	
}
.plus-wrap .srch-tab-title{
	font-weight: 400;
	font-size: 14px;
}


/********************************* 22.03.16 박유빈 추가 */
.pop-wrap{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2);
    /* backdrop-filter: blur(5px); */
    text-align: center;
    width: 100%;
    height: 100%;
    z-index: 100;
    /* display: none; */
}
.pop-wrap > div{
    position: relative;
    width: 100%;
    height: 100%;
}
.pop-wrap .pop-basic{
    position: absolute;
    box-sizing: border-box;
    width: calc(100% - 60px);
	min-height: 200px;
	height: auto;
	top: calc(50% - 100px);
    left: 30px;
    right: 30px;
    margin: 0 auto;
	padding: 30px;
	background-color: #ffffff;
	border-radius: 15px;
	max-width: 400px;
}
.pop-wrap .pop-basic .pop-icon{
	width: 100%;
	margin-bottom: 5%;
}
.pop-wrap .pop-basic > p {
	font-size: 18px;
	line-height: 25px;
	font-weight: 600;
	word-break: keep-all;
	text-align: center;
	display: block;
	margin-bottom: 20px;
	color: #666;
}
.pop-wrap .pop-basic .pop-btn-section{
	width: 100%;
}
.pop-wrap .pop-basic .pop-btn-section .pop-btn{
	width: 100%;
	background-color: #83C5CE;
	color: #ffffff;
    height: 40px;
    border-radius: 30px;
    font-size: 16px;
	line-height: 24px;
    font-weight: 600;
}


.plus-wrap .tab.tab3 li{
	width: 33.33333%;
}

.plus-wrap .date-section{
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	margin: 3% 0 30px;
	padding: 10px;

}
.plus-wrap .date-section .date-arrow{
	background-color: transparent;
	fill: #999;
	width: 40px;
	height: 40px;
}
.plus-wrap .date-section > p{
	color: #999;
	font-size: 16px;
	line-height: 19px;
	font-weight: 700;
	display: block;
}

.ask-part{
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 3% 2% 5%;
}
.survey-tab .ask-part:first-of-type{
	margin-top: 10px;
}
.ask-part .ask-title{
	display: block;
	width: 100%;
	margin-bottom: 10px;
	font-size: 14px;
	line-height: 20px;
}
.ask-part .ask-check-part{
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 1fr;
	grid-row: 1 / 2;
	grid-column: 1 / 4;
	gap: 5px;
}
.ask-part .ask-check-part.flex-btwn{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;	
}
.ask-part .ask-check-part.time-select,
.ask-part .ask-check-part.time-select i{
	font-size: 14px;
}
.ask-part .ask-check-part input,
.ask-part .ask-check-part.time-select select{
	font-size: 14px;
	border-radius: 4px;
    border: 1px solid #bbb;
	height: 30px;
	padding: 0 5px;
}

.survey-btn-section{
	width: 100%;
	margin-top: 5%;
}
.survey-btn-section .btn{
	width: 100%;
	height: 40px;
	background-color: #83C5CE;
	border-radius: 30px;
	color: #ffffff;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}

.survey-sel{
	width: 100%;
	height: 40px;
	box-sizing: border-box;
	margin-bottom: 10px;
    border-radius: 10px;
	font-size: 14px;
	line-height: 30px;
}
.ask-check-part.column-option{
	display: block;
}
.ask-check-part.column-option > div{
	margin: 2% 0;
}


.lsp-select-section{
	width: 100%;
	margin: 3% 0 5%;
}
.lsp-select-section > select{
	width: 100%;
	height: 40px;
	box-sizing: border-box;
	border-radius: 10px;
	padding: 0 15px;
	color: #666;
	font-size: 15px;
	line-height: 30px;
	border: 1px solid #fff;
}
.ask-check-part.time-select > select{
	width: 35%;
	height: 30px;
	font-size: 16px;
	line-height: 30px;
	
}

.survey-tab > input.datepicker{
	border: 1px solid #83C5CE!important;
    border-right: 0;
    height: 40px;
    width: 100%;
    background-image: url(../img/calendar.png);
    background-repeat: no-repeat;
    background-position: calc(100% - 10px);
    background-size: 14px;
    box-sizing: border-box;
    margin-bottom: 10px;
    border-radius: 10px;
    font-size: 14px;
}

.contents.srvey-pop-content{
	padding-top: 56px;
}
.contents.srvey-pop-content > div{
	height: 100%!important;
}
.survey-pop .header{
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	padding: 0 5%;
}
.survey-pop .header .srvy-pop-title .letter1{
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	padding-top: 5px;
}
.survey-pop .header .exit-pop-btn{
	width: 60px;
	height: 60px;
	display: inline-block;
	text-align: center;
	position: relative;
}
.survey-pop .header .exit-pop-btn > svg{
	position: absolute;
	top: calc(50% - 7px);
	left: calc(50% - 7px);
}



/* 20222-03-23 : 설문지 뒤로가기  */
.header a.backspace {
	display: inline-block;
	width:20px;
	height:20px;
	font-size:20px;
	color:#fff;
	margin:20px 15px
}


/* 2022-03-23 : table.normal -> table.basic */
/* : normal 클래스 <script src="resources/plugin/jquery-3.6.0.js"></script> 에 있는듯 -> 명칭 겹쳐서 table 내용 안쓰게 만듦.
 */
/* 나중에 igp랑 얘기해서 normal-> basic 클래스명 바꿔두는게 나을 듯 함
 */

table.basic{
	width:100%;
	height:100%;
	overflow:hidden;
	table-layout: auto;
}

table.basic th{
	font-size:10px;
	color:#999;
	text-align:center;
	border-bottom:1px solid rgba(1,1,1,.2);
	border-top:1px solid rgba(1,1,1,.2);
	height:20px;
	vertical-align:700;
	background-color:rgba(255,255,255,.05);
  	padding:3px;
 	font-weight: 700;
}
table.basic td{
	font-size:10px;
	color:#999;
	padding:3px;
	text-align:center;
	border-bottom:1px solid rgba(1,1,1,.1);
	vertical-align:middle;
	font-weight:700;
/* 	display : inline-block !important;
 */}
table.basic tr:hover td{
	background-color:rgba(255,255,255,.1)
}

.plus-wrap .white-table table.basic {
	width:100%;
	height:100%;
	overflow:hidden;
}

.plus-wrap .white-table table.basic th {
	font-size:13px;
	color:#999;
	text-align:center;
	border-bottom:1px solid rgba(1,1,1,.2);
	border-top:1px solid rgba(1,1,1,.2);
	height:30px;
	background-color:rgba(255,255,255,.05);
	padding:3px;
	font-weight: 700;
}


.plus-wrap .white-table table.basic td {
	font-size:13px;
	color:#999;
	padding:3px;
	text-align:center;
	border-bottom:1px solid rgba(1,1,1,.1);
	vertical-align:middle;
	font-weight:700;
}


.plus-wrap .white-table table.basic tr:hover td  {
	background-color:rgba(255,255,255,.1)
}

.plus-wrap .white-table table.basic thead tr,
.plus-wrap .white-table table.basic tbody tr:nth-child(even){
	background-color: rgba(0, 0, 0, 0.03);
}

/* 2022-04-04 : 방현우 추가 */
.plus-wrap .white-table table.basic .total_bg th{
	background-color: rgba(113,183,192,.2);
	color: rgba(113,183,192,1);
	border-bottom: 1px solid rgba(113,183,192,1);
}
.plus-wrap .white-table table.basic .total_bg {
	border-top: 1px solid rgba(113,183,192,1);
	border-bottom: 1px solid rgba(113,183,192,1);
}


.link-btn {
	display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
	background-color: #6fc2c9;
    text-align: center;
	color: #fff;
    border-radius: 20px;
    font-size: 12px;
    padding: 2px 6px 2px 11px;
    margin-top: 2px;
	margin-bottom: 2px;
}

.link-btn:hover, .link-btn:focus {
    color: #fff;
}

/*************** 220425 박유빈 수정 */
table i.small{
	font-size: 10px;
}

@media screen and (max-width: 360px) {
	.white-table{
		padding: 13px!important;
	}
	table.normal{
		width: 100%!important;
		table-layout: fixed;
	}
	table.normal th,
	table.normal td{
		padding: 0 8px!important;
		font-size: 11px!important;
	}
	
/* 	20220427 방현우 추가
 */	table.basic{
		width: 100%!important;
		table-layout: fixed;
	}
	table.basic th,
	table.basic td{
		padding: 0 8px!important;
		font-size: 11px!important;
	}
}