@charset "utf-8";

/*common*/
img{border:0}
*{margin:0;padding:0;}

li{list-style:none}
hr{display:none}
em{font-style:normal}
th{text-align:left;font-weight:normal;}
fieldset{border:none}
legend{
display:none;}
input{
padding:3px;}


.u, a.u:link, a.u:visited, a.u:hover, a.u:active{text-decoration:underline}
.nu, a.nu:link, a.nu:visited, a.nu:hover, a.nu:active{text-decoration:none}
.b, a.b:link, a.b:visited, a.b:hover, a.b:active{font-weight:bold}
.nor{font-weight:normal !important}

.ls{letter-spacing:-1px} 
.ls0{letter-spacing:0px}

/*Link Css */
a:link,  a:visited,  a:active {color:#676767 ;text-decoration:none;}
a:hover{color:#676767 ;text-decoration:underline}

.type1 .al{text-align:left; padding-left:8px; }
.hide{display:none; }

/* navigation */
.left ul{padding:0; width:100%; }
.left li{padding:0 0 13px 0; margin:0; }
.left li a{display:block; padding:4px 0 4px 17px; text-decoration:none; }
.left li a:hover{color:#000;}
.left .tit{display:block; padding:8px 0 4px 0px; margin-bottom:10px; text-decoration:none; border-bottom:1px solid #e3e3e3; color:#0c4da2; font-weight:bold;  background:#f3f2f2}
.left .tit a{color:#0c4da2}
.left .tit a:hover{color:#e12c76}


/* table */
.type1{width:100%; border-collapse:collapse; }
.type1 th{background:#f6f7f8; border-top:1px solid #000000; border-bottom:1px solid #e2e2e2; border-right:1px solid #e2e2e2; padding:8px 0; text-align:center; font-family:gulim; }
.type1 th a:hover{color:#666666; text-decoration:underline; }
.type1 td{border-right:1px solid #e2e2e2; border-bottom:1px solid #e2e2e2; padding:8px 0; text-align:center; }
.type1 .none{border-right:none; }
.type1 .b{font-weight:bold; color:#000000; }
.type1 .f01{color:#000000;}
.type1 .f01 a{color:#000000;}

.type2{width:100%; border-collapse:collapse; }
.type2 th{background:#f6f7f8; border-top:1px solid #000000; border-bottom:1px solid #e2e2e2; border-right:1px solid #e2e2e2; padding:8px 0; text-align:center; font-family:gulim; }
.type2 th a:hover{color:#666666; text-decoration:underline; }
.type2 td{border-right:1px solid #e2e2e2; border-bottom:1px solid #e2e2e2; padding:8px 3px; text-align:center; line-height:16px; }
.type2 .none{border-right:none; }
.type2 .b{font-weight:bold; color:#000000; }
.type2 .f01{color:#000000; text-align:left; padding-left:10px;}
.type2 .f01 a{color:#000000;}
.type2 tr:nth-child(even){background:#fbfafa;}
.type2 td img,input,select{vertical-align:middle; }
.type3 td img,input,select{vertical-align:middle; }

.type3{width:100%; border-collapse:collapse; }
.type3 th{background:#f6f7f8; border-bottom:1px solid #e2e2e2; border-right:1px solid #e2e2e2; padding:8px 0; text-align:center; font-family:gulim; }
.type3 .line{border-top:1px solid #000000;}
.type3 th a:hover{color:#666666; text-decoration:underline; }
.type3 td{border-right:1px solid #e2e2e2; border-bottom:1px solid #e2e2e2; padding:8px 0 8px 8px; }
.type3 .none{border-right:none; }
.type3 .b{font-weight:bold; color:#000000; }
.type3 .f01{color:#000000;}
.type3 .f01 a{color:#000000;}
.type3 inupt,checkbox{vertical-align:middle; }
.type3 textarea{width:500px; padding:2px; height:125px; }
.type3 .lbtn{padding: 20px 0 0 190px; }
.btnarea{padding: 20px 0; text-align:center; }
.type3 td em{font-size:11px; font-weight:bold; }
.btnlr{padding: 20px 0; text-align:right; width:100%; position:relative; }
.btnlr span input{position:absolute; left:0; top:20px;}

.view{width:360px; background:#f7f7f7; border:1px solid #999999; height:260px; padding:15px 25px 15px 15px; position:absolute; left:33px; top:5px; overflow:auto; }
.view .view_txt{width:340px; }
.view .view_txt th{border:0; padding-bottom:20px; text-align:left; color:#333333; line-height:18px; }
.view .view_txt td{border:0; text-align:left; line-height:18px; padding:0; color:#333333; }
.view .view_txt .date{text-align:right; vertical-align:top; }

.mt{margin-top:40px;}
.pl{padding-left:3px;}

.box{width:515px; float:left; margin-right:25px;}
.box h6{font-size:14px; border-bottom:1px solid #e3e3e3; border-top:1px solid #e3e3e3; padding:7px 5px 5px 5px; margin-bottom:10px; font-weight:normal; color:#000; position:relative;}
.box h6 a{position:absolute; right:5px; top:7px; font-size:11px;}
.box h6 span{font-size:12px; color:#666666; padding-left:10px;}
.box h6 span em{color:#E12C76; font-weight:bold; }
.box_list:after{clear: both; content: "."; display: block; font-size: 0; height: 0; line-height: 0; visibility: hidden;}
.box_list dt{background:url(../dearflorist/images/bg_dot02.gif) 3px 9px no-repeat; padding-left:10px; float:left; width:435px; line-height:25px;}
.box_list dd{width:50px; float:left; line-height:25px;}

.graff{float:left; padding:30px 0 10px 0; border-bottom:1px solid #e3e3e3; }
.graff li{float:left; width:50px; text-align:center;}
.graff li span{display:block;}
.graff li .gage{height:30px; position:relative;}
.graff li .gage img{position:absolute; bottom:5px; left:20px}
.graff li .date{color:#eb7d12;}

.bbs_viewlist{border-bottom: 2px solid #CFCFCF; border-top: 1px solid #CFCFCF; width: 100%;}
.bbs_viewlist:after{clear: both; content: "."; display: block; font-size: 0; height: 0; line-height: 0; visibility: hidden;}
.bbs_viewlist dt{float: left; font-size: 12px; font-weight: bold; padding:0; text-align: center; width:114px; line-height:37px; color:#7C378A;}
.bbs_viewlist dd{float: left; font-size: 14px; width: 966px; padding:0; line-height:37px; }
.bbs_viewlist dd a{color:#666666; text-decoration:none;}
.bbs_viewlist .lin{border-bottom: 1px solid #EDEDED;}

/*page*/
.page_position{text-align:center;clear:both;margin:19px 0 0px 0}
.pagination a,
.pagination strong,
.pagination span {
	font-size:12px;font-family:돋움;	
	padding:0 9px 0 9px;
	text-decoration:none;
	color:#5F5F5F;
	font-weight:bold;
	display:inline-block; /*ie전용*/
	background:url(http://www.afreeca.com/images/board/bar_page.gif) left 1px no-repeat;
	margin-left:-5px;
	}
.pagination span {font-weight:normal !important}
.pagination img {vertical-align:middle}
.pagination .pre,
.pagination .first,
.pagination .next {background:none;}
.pagination .pre, .pagination .next{padding:0 0 1px 0}
.page_position .pagination strong {color:#FF4C4C !important}
.page_position .pagination a:hover {color:#FF4C4C;text-decoration:underline}

.star{padding: 10px 0 0 0; line-height:16px; }

#footer{width:100%; color:#FFFFFF; border-top:1px solid #d1d1d1; height:60px; font-size:11px; text-align:center; padding-top:10px;}
.right h5{padding:10px; color:#000; margin-bottom:10px; border:1px solid #e3e3e3; text-align:center; font-size:14px;}

/* login */
#login{width:500px;margin:0 auto;position:relative;}
#login input{border:none;}
#login .id{margin-top:20px;width:286px; height:38px; padding-left:10px;background:url(/dearflorist/images/bg_logintxt.gif) 10px -1px no-repeat #ffffff;}
#login .pw{margin-top:12px;width:286px; height:38px; padding-left:10px;background:url(/dearflorist/images/bg_logintxt.gif) 10px -37px no-repeat #ffffff;}
#login .log_btn{position:absolute; left:305px; top:112px; width:143px; height:100px;background:#cccccc;}
#login .logo{position:absolute;left:0;top:-220px;font-size:30px;font-weight:bold;}
#login .login_title{padding-top:38px;}
#login .login_text{margin-top:16px;}
.vcenter{width:100%;height:300px;position:absolute;left:0;top:50%;}
.login_wrap{width:100%;height:300px;background-color:#e2e2e2;position:absolute;left:0;top:-50%;}
.w80 {width:80px;}
#loading{
	top:0px;
	left:0px;
	width:100vw;
	height:100vh;
	position:fixed;
	background:#000000AA;
	color:#FFFFFF;
	z-index:1000;
}
#loading div{
	position:absolute;
	top:48%;
	text-align:center;
	width:100%;
}

/* page layout */
.toc.fixedMenu {
  position: fixed;
  z-index: 1;
  background-color: #1b1c1d;
  width: 250px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.toc.fixedMenu .ui.menu {
  border-radius: 0;
  border-width: 0 1px 0 0;
  box-shadow: none;
  margin: 0;
  width: inherit;
  overflow: hidden;
  will-change: transform;
  max-height: 100vh;
  min-height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.topMenu{
	background-color: #1b1c1d;
	position: fixed;
    width: 100%;
    overflow: hidden;
    z-index: 100;
	display:none;
}
.topMenu .toc.item{
	color:#ffffff;
	margin: 15px;
}
.article {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0px;
  margin-left: 250px;
}

.toc.fixedMenu .ui.menu::-webkit-scrollbar {
  -webkit-appearance: none;
}
.toc.fixedMenu .ui.menu::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0);
}
.toc.fixedMenu .ui.menu::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0);
}

.toc.fixedMenu .ui.menu:hover::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.1);
}
.toc.fixedMenu .ui.menu:hover::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.25);
}

> .pusher > .footer,
.article > .footer {
  border-top: 1px solid #DDDDDD;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.08) inset;
  background-color: #FAFAFA;
  padding-top: 2em;
}

/*--------------
   Page Headers
---------------*/

.masthead.segment {
  position: relative;
  z-index: 3;
  margin: 0em;
  padding: 3em 0em;
  background-color: #FFFFFF;
  border-bottom: 1px solid #DDDDDD;
  box-shadow: none;
}

.masthead .introduction {
  display: block;
}
.masthead .introduction:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.masthead.segment h1 {
  margin: 0em;
}

.masthead iframe.github {
  width: 101px !important;
}
.masthead iframe {
  margin-left: 5px;
  float: right;
}

/* Align with buttons */
.masthead .main.menu {
  margin-top: -2px;
  min-height: 0em;
}
.masthead .main.menu > .item {
  padding-top: 0.785714em;
  padding-bottom: 0.785714em;
}


/*******************************
          Responsive
*******************************/

/* Defaults */
.masthead > .container,
.main.container,
.fixed.menu > .container {
  margin-left: 3em !important;
  margin-right: 3em !important;
  width: auto !important;
}

/* Rail Default */
.main.container > .right.rail,
.main.container > .tab > .examples > .right.rail,
.main.container > .tab > .right.rail {
  margin-left: 3em;
  padding-top: 2em;
  width: 319px;
}

.masthead .advertisement {
  margin-left: 3em;
  padding: 0em 1.25em;
  width: 342px;
}

/* Absolute Ad */
.masthead .introduction {
  display: block;
}
.masthead .advertisement {
  position: absolute;
  left: 100%;
  bottom: -2px;
}

.item.logo{
	text-align:center;
}

.sidebar .menu .item.logo{
	display:none;
}
.ui.logo.image{
	margin:15px 0px;
}
.item .menu{
    margin-left: 0.5em!important;
}


/*******************************
      Definition Container
*******************************/

.pusher > .footer {
  clear: both;
}

.fixed.menu > .container,
.main.container,
.masthead > .container,
.footer > .container {
  position: relative;
}

.main.container {
  padding: 2em 0em 7em;
}
.wide.main.container {
  width: 80%;
  margin: 0 auto;
  max-width: 1140px;
}

.main.container > .right.rail .sticky,
.main.container > .tab > .examples > .right.rail .sticky,
.main.container > .tab > .right.rail .sticky {
  padding-bottom: 2em;
}

.following.menu .menu .active.item {
  font-weight: bold;
}

/* Remove Overview from pages with Examples */
@media only screen and (max-width: 1500px) {

  .fixed.column {
    right: auto;
    left: 100%;
    margin-left: 4.5em;
    width: 300px;
  }
  .fixed.column + .examples {
    margin-right: 0px;
  }
  .fixed.column + .examples .right.rail {
    display: none;
  }

}


.regist {
  margin: 2em 0em;
  padding: 2em 0em;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
/* Header */
.regist > h4:first-child {
  font-size: 18px;
  margin: 0em 0em 0em;
}
.main.container .introduction p,
.main.container .tab > p,
.regist > p,
.main.container > p {
  font-size: 16px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.8);
}

#semantic-sponsor {
  min-height: 40px;
  border-bottom: solid 1px #dddddd;
}
.regist .sub-segment{
    margin-top: 0.5em !important;
    margin-bottom: 2.5em !important;
    margin-left: 1.5em !important;
}
.regist .sub-segment:last-child{
    margin-bottom: 0 !important;
}
.ui.message .list:not(.ui) li:last-child {
  margin-bottom: 0em;
}

.secondary.pointing.menu .toc.item {
	display: none;
}

.ui.secondary.inverted.pointing.menu{
	background: #1B1C1D;
}
.ui.left.sidebar{
	width:250px;
}
table.dataTable.nowrap th, table.dataTable.nowrap td {
	white-space: normal;
}
@media only screen and (max-width: 900px) {
	.following {
		display: none !important;
	}
	.fixedMenu {
		display: none;
	}
	.topMenu {
		display: block;
	}
	.article{
		margin-left:0px;
	}
	.secondary.pointing.menu .logo.item {
		display: block;
	}
	.masthead h1.ui.header {
		font-size: 2em;
		margin-top: 1.5em;
	}
	.masthead h2 {
		margin-top: 0.5em;
		font-size: 1.5em;
	}
	.ui.vertical.menu{
		width:250px;
	}
}