html,
body {
	width: 765px;
}

body {
	height: calc(100% - 20px);
	width: 745px;
	margin: 0;
	padding: 10px;
	background: #d9d9d9;
	color: rgba(0, 0, 0, .87);
	@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 300;
}

.box {
	width: 100%;
	height: 185px;
	background: #00b3b0 url("image/top5.png") 50% 50% no-repeat;
}

.box h1 {
	@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 900;
	font-size: 26px;
	padding: 20px 0 0 20px;
	color: #ffdd00;
}

.box h2 {
	padding: 7px 0 0 21px;
	color: #fff;
	line-height: 23px;
	@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 300;
	font-size: 17px;
}

.box h2 span {
	@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 700;
	color: #ffdd00;
	text-decoration: underline;
	text-underline-position: under;
}




.drawer {
	width: 100%;
	border-top: 1px solid #E0E0E0;
	border-radius: 3px;
}

.accordion-item {
	border-bottom: 1px solid #E0E0E0;
}

.accordion-item-active .accordion-header {
	background: #888;
	transition: .25s;
}

.accordion-item-active .accordion-header-icon {
	color: #fff;
}

.accordion-item-active .accordion-header h1 {
	color: #fff;
}

.accordion-header {
	background: #f7f7f7;
	padding: 18.5px 20px;
	cursor: pointer;
	border-right: 1px solid #E0E0E0;
	border-left: 1px solid #E0E0E0;
	min-height: 25px;
	transition: .25s;
}

.accordion-header h1 {
	float: left;
	font-size: 19px;
	font-weight: normal;
	margin: 0;
	line-height: 1.3em;
	color: #212121;
}

.accordion-content {
	border-left: 1px solid #E0E0E0;
	border-right: 1px solid #E0E0E0;
	border-top: 1px solid #E0E0E0;
	display: none;
	padding: 25px;
	color: #212121;
	background: #fff;
	font-size: 15px;
	line-height: 1.45em;
}

.accordion-content p {
	margin: 0;
	margin-bottom: 3px;
}


.accordion-content h3 {
	color: #646464;
	font-size: 18.5px;
	padding-bottom: 10px;
	@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 700;
}

.accordion-content h4 {
	color: #6f6f6f;
	@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 400;
	font-size: 17px;
	padding-bottom: 18px;
	line-height: 28px;
}

.accordion-content h4 span {
	font-size: 16px;
	@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 300;
	padding-left: 11px;
}

.accordion-content .bolder {
	color: #00b3b0;
	padding-top: 7px;
}

.accordion-content h5 {
	@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 400;
	font-size: 16.5px;
	line-height: 26px;
	padding: 0px 23px;
}

.accordion-content h5 span {
	font-size: 16px;
	@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 300;
	color: #646464;
	letter-spacing: -1px;
}


/*\특이사항*/
/*
.accordion-content h3.short {
	padding: 0;
}
*/

.accordion .line {
	width: 100%;
	height: 30px;
	border-top: 1px dashed #939393;
}



.accordion span.red,
.accordion span.blue {

	@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 400;
	font-size: 17px;
	letter-spacing: 0px;
}

.accordion span.red {
	color: red;
}

.accordion span.blue {
	color: #00a651;
}













/*이미지*/
.accordion ul.sshot,
.accordion ul.pop,
.accordion ul.noedge,
.accordion ul.ebook {
	overflow: hidden;
	width: 100%;
	padding-top: 14px;
	text-align: center;
}


.accordion ul.sshot {
	height: 390px;
}

.accordion ul.sshot li {
	float: left;
}

.accordion ul.sshot li.sshot1,
.accordion ul.sshot li.sshot3 {
	width: 326px;
	height: 388px;
	border: 2px solid #e8e8e8;
	box-sizing: border-box;
}

.accordion ul.sshot li.sshot2 {
	width: 33px;
	height: 100%;
	line-height: 386px;
}

.accordion ul.sshot li.sshot1 {
	background-image: url("image/ho1.png");
	background-position: right top;
	background-repeat: no-repeat;
}

.accordion ul.sshot li.sshot3 {
	background-image: url("image/ho2.png");
	background-position: 70% top;
	background-repeat: no-repeat;
}




.accordion ul.hh {
	height: auto;
	padding-top: 15px;
}

.accordion ul.hh li {
	width: 100%;
}

.accordion ul.hh li.hh1,
.accordion ul.hh li.hh3,
.accordion ul.hh li.hh5,
.accordion ul.hh li.hh6,
.accordion ul.hh li.hh8,
.accordion ul.hh li.hh10 {
	height: 504px;
	/* border: 2px solid #e8e8e8;
	box-sizing: border-box; */
}

.accordion ul.hh li.hh2,
.accordion ul.hh li.hh4,
.accordion ul.hh li.hh7,
.accordion ul.hh li.hh9 {
	height: 50px;
	line-height: 50px;
	text-align: center;
}

.accordion ul.hh li.hh1 {
	background-image: url("image/pu1.png");
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.accordion ul.hh li.hh3 {
	background-image: url("image/pu5.png");
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.accordion ul.hh li.hh5 {
	background-image: url("image/pu6.png");
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.accordion ul.hh li.hh6 {
	background-image: url("image/active1.png");
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.accordion ul.hh li.hh8 {
	background-image: url("image/active2.png");
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.accordion ul.hh li.hh10 {
	background-image: url("image/active3.png");
	background-position: 50% 50%;
	background-repeat: no-repeat;
}



.accordion ul.pop {
	height: auto;
}

.accordion ul.pop li {
	width: 99%;
}

.accordion ul.pop li.pop1 {
	height: 504px;
	border: 2px solid #e8e8e8;
	box-sizing: border-box;
}

.accordion ul.pop li.pop1 {
	background-image: url("image/popupx.png");
	background-position: 50% 50%;
	background-repeat: no-repeat;
}






.accordion ul.noedge li.edgex {
	width: 100%;
	height: 239px;
	background-image: url("image/edgexx.png");
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.accordion ul.noedge10 li.edgey {
	width: 100%;
	height: 402px;
	background-image: url("image/edgey.png");
	background-position: 50% 50%;
	background-repeat: no-repeat;
    border: 2px solid #e8e8e8;
	box-sizing: border-box;
}






.accordion .error-img {
	width: 693px;
	height: 465px;
	padding-top: 10px;
	padding-bottom: 20px;
	background-image: url("image/img_12_1.png");
	background-position: 50% 50%;
	background-repeat: no-repeat;
}



.accordion ul.ebook li.ebook2,
.accordion ul.ebook li.ebook4,
.accordion ul.ebook li.ebook6,
.accordion ul.ebook li.ebook8 {
	margin: 20px 0 40px;
}

.accordion ul.ebook li.ebook2 {
	width: 100%;
	height: 335px;
	/* border: 1px solid #898989;
	box-sizing: border-box; */
	background-image: url("image/img_12_2.png");
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.accordion ul.ebook li.ebook4 {
	width: 100%;
	height: 307px;
	background-image: url("image/img_12_3.png");
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.accordion ul.ebook li.ebook6 {
	width: 100%;
	height: 366px;
	background-image: url("image/img_12_4.png");
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.accordion ul.ebook li.ebook8 {
	width: 100%;
	height: 523px;
	background-image: url("image/img_12_5.png");
	background-position: 50% 50%;
	background-repeat: no-repeat;
}




/*
.accordion .mon {
	background-image: url("image/monitor2.png");
	background-position: 92% 60%;
	background-repeat: no-repeat;
}
*/

.accordion ul.edge{
	overflow: hidden;
	width: 100%;
	padding-top: 14px;
	text-align: center;
}


.edge1 {
	width: 100%;
	height: 418px;
	background-image: url("image/6.png");
    background-position: 50% 50%;
	background-repeat: no-repeat;
	border: 1px solid #898989;
	box-sizing: border-box;
	margin-bottom: 40px;
}

.edge2 {
	width: 100%;
	height: 418px;
	background-image: url("image/7.png");
    background-position: 50% 50%;
	background-repeat: no-repeat;
	border: 1px solid #898989;
	box-sizing: border-box;
	margin-bottom: 40px;
}

.edge3 {
	width: 100%;
	height: 418px;
	background-image: url("image/8.png");
    background-position: 50% 50%;
	background-repeat: no-repeat;
	border: 1px solid #898989;
	box-sizing: border-box;
	margin-bottom: 40px;
}

.edge4 {
	width: 100%;
	height: 418px;
	background-image: url("image/9.png");
	background-position: 50% 50%;
	background-repeat: no-repeat;
	border: 1px solid #898989;
	box-sizing: border-box;
	margin-bottom: 40px;
}
.edge h5{
	margin-top: 325px;
}















.accordion-header-icon {

	@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 300;
	float: right;
	color: #888;
	font-size: 13px;
	/* vertical-align: middle; */
	position:relative;
	top:4px;
}

.accordion-header-icon.accordion-header-icon-active {
	transform: rotate(180deg);
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
	/* 0=0, 1=90, 2=180, 3=270 */
	color: #fff;
}