@font-face{
	font-family:open-sans;
	src:url(./fonts/OpenSans.woff);
}

@font-face{
	font-family:open-sans;
	src:url(./fonts/OpenSans-Semibold.woff);
	font-weight:600;
}

@font-face{
	font-family:open-sans;
	src:url(./fonts/OpenSans-Bold.woff);
	font-weight:700;
}

@font-face{
	font-family:NanumSquareNeo;
	src:url(./fonts/NanumSquareNeoTTF-bRg.woff);
}

@font-face{
	font-family:NanumSquareNeo;
	src:url(./fonts/NanumSquareNeoTTF-cBd.woff);
	font-weight:700;
}

@font-face{
	font-family:NanumSquareNeo;
	src:url(./fonts/NanumSquareNeoTTF-dEb.woff);
	font-weight:800;
}

html, body{
	width:100%;
	height:100%;
	padding:0;
	margin:0 auto;
	overflow:hidden;
	font-family:open-sans, NanumSquareNeo, Arial;
}

div, span, ul, li{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

li{
	list-style:none;	
}

a{
	text-decoration:none;
}

.wrapper{
	height:100%;
	user-select:none;
	border-right:solid 1px #E3E8ED;
}

.sample_divide{
	margin:23px 0;
	border-bottom:solid 1px #E3E8ED;
}

.properties_menu{
	border-left:solid 1px #E3E8ED;
}

.title{
	display:inline-block;
	color:#3B454E;
	font-size:19px;
	font-weight:700;/*bold*/
	padding-top:7px;
	padding-left:11px;
	background:url(./Images/logo.png) no-repeat;
}

.titleArea{
	display:block;
	width:100%;
	height:65px;
	
	padding-top:16px;
	padding-left:29px;
	box-sizing:border-box;
}

.sample_menus{
	width:322px;
	height:52px;
	font-size:13px;
	
	border-top:1px solid #E3E8ED;
}

.sample_menus > span{
	float:left;
	width:49.5%;
	height:100%;
	padding-top:16px;
	cursor:pointer;
	color:#828589;
	font-size:15px;
	font-weight:700;/*bold*/
	text-align:center;
	letter-spacing:0;
	background-color:#F7F9FB;
	border-bottom:solid 1px #e8e8e8;
}

.sample_menus > span.sample_menus_active{
	color:#505459;
	border-bottom:none;
	background-color:#fff;
}

.sample_menus span.expand:hover{
	color:#ff0000;
}

.sample_lists{
	padding:20px 11px 20px 20px;
	height:calc(100% - 272px);
	overflow:auto;
	position:relative;
	
	cursor:pointer;
}

.sample_lists > div > div{
	overflow:hidden;
}

.sample_lists span{
	font-size:14px;
	font-weight:600;/*semiBold*/
	color:#57616B;
	
	display:inline-block;
	position:relative;
	padding:7px 0;
	padding-left:10px;
	
	width:100%;
	height:35px;
	
	border-radius:5px;
}

.sample_lists span:hover,
.sample_lists .list_active{
	background-color:#F0F3F8;
}

.sample_lists .properties_list{
	display:none;
	color:#57616B;
}

.sample_lists .properties_list li{
	letter-spacing:-0.02em;
}

.sample_lists .list_active::before{
	content:"";
	position:absolute;
	width:10px;
	height:6px;
	top:15px;
	right:11px;
	background:url(./Images/downArrow.png) no-repeat;
}

.sample_lists ul{
	transition:height 0.5s;
	padding:17.5px 0;
}

.sample_lists li{
	height:36px;
	margin-left:15px;
	border-left:1px solid #DFE7EF;
}

.sample_lists li a{
	display: block;
	height: 100%;
	padding:9px 0 9px 12px;
	
	color:#57616B;
	font-size:13px;
	line-height:1.3;
	box-sizing:border-box;
}

.sample_lists li.item_active{
	border-color:#24292F;
}

.sample_lists li.item_active a{
	color:#24292F;
	font-weight:600;/*semiBold*/
}

.footer{
	height:155px;
	font-size:11px;
	color:#737E88;
	background-color:#F0F3F8;
	
	padding-left:30px;
}

.footer div{
	display:inline-block;
	
	margin:20px 0 9px 0;
	margin-left:-4px;
}

.footer div a{
	display:block;
	position:relative;
	
	float:left;
	margin:4px;
	
	width:116px;
	height:31px;
	
	color:#57616B;
	background-color:#fff;
	
	border-radius:5px;
	
	font-size:12px;
	font-weight:600;/*semiBold*/

	padding-top:7px;
	padding-left:35px;
	box-sizing:border-box;
}

.footer div a::before{
	content:"";
	position:absolute;
	
	left:0;
	top:8px;
}

.footer > span{
	display:block;
	margin-bottom:1px;
}

.footer a#API::before{
	width:35px;
	height:15px;
	background:url(./Images/api.png) no-repeat;
}

.footer a#MANUAL::before{
	width:35px;
	height:15px;
	background:url(./Images/manual.png) no-repeat;
}

.footer a#PDF::before{
	width:35px;
	height:15px;
	background:url(./Images/pdf.png) no-repeat;
}

.footer a#TUTORIAL::before{
	width:35px;
	height:15px;
	background:url(./Images/tutorial.png) no-repeat;
}

::-webkit-scrollbar {
	width:18px;
	height:18px;
	background-color: #FAFBFD;
}

::-webkit-scrollbar-thumb{
	border:6px solid transparent;
	border-radius:16px;
	background-clip:padding-box;
	background-color:rgba(232,235,239,.75);
}

::-webkit-scrollbar-thumb:hover{
	background-color:rgba(232,235,239,1);
}

::-webkit-scrollbar-thumb:active{
	background-color:#bdbdbd;
}