#FRONT-MENU{
	display : grid;
	grid-template-columns : repeat( 4, 1fr );
	grid-gap : 12px;
	margin-top : 16px;
}
#FRONT-MENU > a{
	padding : 24px 0;
	background-color : #3F97CD;
	border-radius : 5px;
	color : #FFF;
	text-align : center;
	font-family : 'Nanum Gothic';
	font-weight : 600;
	font-size : 15px;
	transition :
		background-color .25s ease-in-out,
		color .25s ease-in-out;
}
#FRONT-MENU > a:hover{
	background-color : #FFF;
	color : #1F77BD;
}

#FRONT-BOARD{
	display : grid;
	grid-template-columns : 1fr 1fr;
	grid-gap : 32px 16px;
	margin : 48px 0;
}
#FRONT-BOARD > article{
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	align-items : flex-start;
}
#FRONT-BOARD > article > h3{
	padding : 0;
	margin : 0;
	color : #333;
	font-family : 'Noto Sans KR';
	font-weight : 500;
	font-size : 18px;
}
#FRONT-BOARD > article > .MORE{ font-size : 11px; }
#FRONT-BOARD > article > .CONTENT{
	width : 100%;
	height : 290px;
	padding : 0;
	margin : 8px 0 0 0;
	border-top : solid 3px #CCC;
}
#FRONT-BOARD > article > .CONTENT > li{
	display : flex;
	justify-content : space-between;
	list-style : none;
	height : 19px;
	padding : 8px;
	border-bottom : solid 1px #DDD;
	line-height : 19px;
}
#FRONT-BOARD > article > .CONTENT > li > .SUBJECT{
	flex-grow : 1;
	font-size : 12px;
	overflow : hidden;
	text-overflow : ellipsis;
}
#FRONT-BOARD > article > .CONTENT > li.SECRET > .SUBJECT::before{
	content : '\1F513';
}
#FRONT-BOARD > article > .CONTENT > li > .SAVEDATE{
	flex-grow : 0;
	width : 72px;
	text-align : right;
	font-size : 11px;
}

#FRONT-BOARD > article#FRONT-FAQ > .CONTENT > li > .SUBJECT::before{
	content : "[" attr(data-category) "]";
	margin-right : 8px;
	color : #666;
	font-size : 12px;
}
#FRONT-BOARD > article#FRONT-QNA > .CONTENT > li > .STATE{
	flex-grow : 0;
	width : 72px;
	color : #666;
	font-size : 12px;
}


/* 문서 */
#DOC-SUBJECT{
	padding : 0;
	margin : 48px 0 0 0;
	text-align : center;
	font-family : 'Noto Sans KR';
	font-weight : 500;
	font-size : 30px;
}
#DOC-CONTENT{
	padding : 48px;
	font-family : normal;
	font-size : .75rem;
	line-height : 1.5rem;
}
#DOC-CONTENT img{ max-width : 100%; }


/* 아이디/비밀번호 찾기 */
#FIND-TAP{
	width : 768px;
	margin : 48px auto 8px auto;
	text-align : center;
	font-size : 0;
}
#FIND-TAP > a{
	display : inline-block;
	width : 200px;
	padding : 16px 0;
	margin : 0 8px;
	border : solid 1px #DDD;
	color : #666;
	font-size : 14px;
}

#FIND-IDPW{
	width : 702px;
	padding : 32px;
	margin : 0 auto 48px auto;
	border : solid 1px #DDD;
}
#FIND-IDPW > .FIND-MSG{
	padding : 0;
	margin : 0;
	text-align : center;
	color : #06C;
	font-size : 14px;
}
#FIND-IDPW > form{
	width : 384px;
	margin : 32px auto 0 auto;
}
#FIND-IDPW > form > div{
	margin-bottom : 16px;
	font-size : 0;
}
#FIND-IDPW > form > div > label{
	display : block;
	margin-bottom : 4px;
	color : #666;
	font-size : 12px;
}
#FIND-IDPW > form > div > input[type="text"],
#FIND-IDPW > form > div > select{
	height : 38px;
	padding : 0 12px;
	margin : 0;
	border : solid 1px #BBB;
	outline : 0;
	font-size : 12px;
	box-sizing : border-box;
	vertical-align : top;
}
#FIND-IDPW > form > div > input[type="text"][readonly],
#FIND-IDPW > form > div > select[readonly]{
	background-color : #F9F9F9;
	color : #666;
}
#FIND-IDPW > form > div > #MBR-NAME{ width : 100%; }
#FIND-IDPW > form > div > #MBR-MOBILE1{ width : 100px; }
#FIND-IDPW > form > div > #MBR-MOBILE2,
#FIND-IDPW > form > div > #MBR-MOBILE3{
	width : 132px;
	margin-left : 10px;
	text-align : center;
}
#FIND-IDPW > form > div > #MBR-MAIL1{ width : 132px; margin-right : 10px; }
#FIND-IDPW > form > div > #MBR-MAIL2{ width : 132px; }
#FIND-IDPW > form > div > #MBR-MAIL-SELECT{ width : 110px; border-left : 0; }

#FIND-IDPW > form > #FIND-RESULT{
	padding : 0;
	margin : 0;
	text-align : center;
	font-size : 14px;
	line-height : 24px;
}
#FIND-IDPW > form > #FIND-RESULT > strong{ color : #395FC5; }

#FIND-IDPW > form > .BUTTONS{
	margin-top : 48px;
	text-align : center;
	font-size : 0;
}
#FIND-IDPW > form > .BUTTONS > button{
	padding : 16px 0;
	border : 0;
	color : #FFF;
	font-family : 'Noto Sans KR';
	font-size : 14px;
}
#FIND-IDPW > form > .BUTTONS > #GOTO-LOGIN{
	background-color : #999;
	width : 120px;
	margin-right : 16px;
}
#FIND-IDPW > form > .BUTTONS > #FIND-EXEC{
	width : 248px;
	background-color : #395FC5;
}

#FIND-IDPW > form > div > #MBR-MOBILE,
#FIND-IDPW > form > div > #MBR-MOBILE-AUTH-NUMB{
	width : 240px;
	margin-right : 10px;
}
#FIND-IDPW > form > div > #MBR-MOBILE + button,
#FIND-IDPW > form > div > #MBR-MOBILE-AUTH-NUMB + button{
	width : 134px;
	height : 38px;
	background-color : #FFF;
	border : solid 1px #CCC;
	color : #444;
	font-size : 12px;
	cursor : pointer;
}

/* 커스텀 테이블 */
.TABLE{
	border-top : solid 1px #999;
	overflow : hidden;
}
.TABLE > .THEAD{
	display : flex;
	padding : 12px 0;
	margin : 0;
	background-color : #F9F9F9;
	border-bottom : solid 1px #CCC;
	font-size : 0;
}
.TABLE > .THEAD > span{
	text-align : center;
	font-weight : bold;
	font-size : 12px;
}
.TABLE > .THEAD > span.NUMBER{ width : 80px; flex-grow : 0; }
.TABLE > .THEAD > span.SUBJECT{ flex-grow : 1; }
.TABLE > .THEAD > span.SAVEDATE{ width : 120px; flex-grow : 0; }

.TABLE > .TBODY{
	padding : 0;
	margin : 0;
}
.TABLE > .TBODY > li{
	list-style : none;
	display : flex;
	padding : 0;
	border-bottom : solid 1px #CCC;
	font-size : 0;
}
.TABLE > .TBODY > li > div{
	height : 40px;
	font-size : 13px;
	line-height : 40px;
	vertical-align : top;
}
.TABLE > .TBODY > li > div.NUMBER{ width : 80px; flex-grow : 0; text-align : center; }
.TABLE > .TBODY > li > div.SUBJECT{ flex-grow : 1; }
.TABLE > .TBODY > li > div.SAVEDATE{ width : 120px; flex-grow : 0; text-align : center; }

.TABLE > .TBODY > li > div.CONTENT{
	display : block;
	height : auto;
	padding : 32px;
	background-color : #F9F9F9;
	border-top : dashed 1px #DDD;
}
.TABLE > .TBODY > li.NORECORD{
	padding : 48px 0;
	color : #999;
	text-align : center;
	font-size : 14px;
}

.TABLE > .TBODY > li.SECRET > div.SUBJECT:before{
	content : '';
	display : inline-block;
	width : 12px;
	height : 12px;
	margin-top : -3px;
	margin-right : 4px;
	background-image : url("/images/icon-black-lock.png");
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
	vertical-align : middle;
}

.TABLE.VIEW > .THEAD{
	display : flex;
	flex-wrap : wrap;
	padding : 16px;
	background-color : #FFF;
}
.TABLE.VIEW > .THEAD > .NUMBER{
	width : 100%;
	color : #888;
	text-align : left;
	font-size : 12px;
}
.TABLE.VIEW > .THEAD > .NUMBER:before{ content : 'No. '; }
.TABLE.VIEW > .THEAD > .SUBJECT{
	flex-grow : 1;
	text-align : left;
	font-family : 'Noto Sans KR';
	font-weight : 400;
	font-size : 19px;
	line-height : 22px;
}
.TABLE.VIEW > .THEAD > .SAVEDATE{
	flex-grow : 0;
	width : 160px;
	color : #666;
	font-weight : normal;
	font-size : 12px;
}
.TABLE.VIEW > .THEAD > .WRITER{
	margin-top : 8px;
}
.TABLE.VIEW > .THEAD > .WRITER:before{
	content : '작성자 : ';
	color : #666;
	font-weight : normal;
}
.TABLE.VIEW > .TBODY{
	padding : 48px 32px;
	border-bottom : solid 1px #DDD;
	font-size : 14px;
	overflow : hidden;
}
.TABLE.VIEW > .TBODY img{ max-width : 100%; }

.TABLE + .BUTTONS{
	display : flex;
	justify-content : space-between;
	margin-top : 16px;
	margin-bottom : 48px;
}
.TABLE + .BUTTONS button{
	height : 36px;
	padding : 0 16px;
	background-color : #FFF;
	border : solid 1px #CCC;
	color : #555;
}
.TABLE + .BUTTONS > .FL > button{ margin-right : 8px; }
.TABLE + .BUTTONS > .FR > button{ margin-left : 8px; }


/* FAQ */
#FAQ-CATEGORIES{
	display : grid;
	grid-template-columns: repeat( 5, 1fr );
	grid-gap : 4px;
	margin-bottom : 8px;
}
#FAQ-CATEGORIES > a{
	height : 42px;
	border : solid 1px #DDD;
	text-align : center;
	font-family : 'Noto Sans KR';
	font-weight : 400;
	font-size : 12px;
	line-height : 42px;
}
#FAQ-CATEGORIES > a.ON{
	border-color : #3F577D;
	background-color : #3F577D;
	color: #FFF;
}
#FAQ-LIST.TABLE > .TBODY > li > .CATEGORY{
	flex-grow : 0;
	width : 192px;
	text-align : center;
	font-size : 12px;
}


/* Q&A */
#QNA-LIST > .THEAD > .CATEGORY{ flex-grow : 0; width : 140px; }
#QNA-LIST > .THEAD > .STATE{ flex-grow : 0; width : 100px; }
#QNA-LIST > .THEAD > .WRITER{ flex-grow : 0; width : 120px; }
#QNA-LIST > .TBODY > li > .CATEGORY{
	flex-grow : 0;
	width : 140px;
	text-align : center;
	font-size : 12px;
}
#QNA-LIST > .TBODY > li > .STATE{
	flex-grow : 0;
	width : 100px;
	text-align : center;
}
#QNA-LIST > .TBODY > li > .STATE > .NOANSWER{ color : #999; }
#QNA-LIST > .TBODY > li > .STATE > .ANSWERED{ color : #F60; font-weight : bold; }
#QNA-LIST > .TBODY > li > .SUBJECT .GOODS_TITLE{ color : #06C; }
#QNA-LIST > .TBODY > li > .SUBJECT a:hover{ text-decoration : underline; }
#QNA-LIST > .TBODY > li > .WRITER{ flex-grow : 0; width : 120px; text-align : center; }

#QNA-VIEW > .TBODY > .ANSWER{
	position : relative;
	margin-top : 64px;
	padding : 24px;
	background-color : #F9FAFF;
	border : solid 3px #1F375D;
	border-radius : 8px;
	color : #1F375D;
	font-size : 13px;
	line-height : 20px;
	box-sizing : border-box;
}
#QNA-VIEW > .TBODY > .ANSWER:before{
	content : '관리자 답변';
	position : absolute;
	top : -15px;
	width : 92px;
	height : 24px;
	background-color : #FFF;
	border : solid 3px #1F375D;
	border-radius : 8px;
	color : #1F375D;
	text-align : center;
	font-weight : bold;
	line-height : 24px;
}


/* REVIEW */
#REVIEW-LIST > .TBODY > li > p.GOODS-TITLE{
	flex-grow : 0;
	width : 240px;
	color : #06C;
	font-size : 12px;
	overflow : hidden;
	text-overflow : ellipsis;
	white-space : nowrap;
}
#REVIEW-LIST > .TBODY > li > div.GOODS-MARK{
	flex-grow : 0;
	width : 90px;
	text-align : center;
	font-size : 0;
}
#REVIEW-LIST > .TBODY > li > div.GOODS-MARK::after{
	content : '☆☆☆☆☆';
	width : 72px;
	color : #F60;
	font-size : 14px;
}
#REVIEW-LIST > .TBODY > li > div.GOODS-MARK.STEP1::after{ content : '★☆☆☆☆'; }
#REVIEW-LIST > .TBODY > li > div.GOODS-MARK.STEP2::after{ content : '★★☆☆☆'; }
#REVIEW-LIST > .TBODY > li > div.GOODS-MARK.STEP3::after{ content : '★★★☆☆'; }
#REVIEW-LIST > .TBODY > li > div.GOODS-MARK.STEP4::after{ content : '★★★★☆'; }
#REVIEW-LIST > .TBODY > li > div.GOODS-MARK.STEP5::after{ content : '★★★★★'; }
#REVIEW-LIST > .TBODY > li > p.CONTENT{
	flex-grow : 1;
	max-width : 514px;
	font-size : 12px;
}
#REVIEW-LIST > .TBODY > li > p.WRITER{
	flex-grow : 0;
	width : 100px;
	font-size : 12px;
}
#REVIEW-LIST > .TBODY > li > p.WRITER.NP:before{
	content : '';
	display : inline-block;
	width : 38px;
	height : 15px;
	margin-top : -4px;
	margin-right : 3px;
	background-image : url("/images/logo-npay.png");
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
	vertical-align : middle;
}
#REVIEW-LIST > .TBODY > li > p.SAVEDATE{
	flex-grow : 0;
	width : 80px;
	text-align : center;
	font-size : 12px;
}



#REVIEW-LIST > .TBODY > li > div.PICTURES{
	position : absolute;
	top : 10px;
	right : 170px;
	width : 109px;
	height : 109px;
	padding : 0;
	margin : 0;
	text-align : left;
}
#REVIEW-LIST > .TBODY > li > div.PICTURES > i{
	display : inline-block;
	width : 50px;
	height : 50px;
	margin : 2px;
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
	vertical-align : top;
}
#REVIEW-LIST > .TBODY > li:hover{
	cursor : pointer;
}
#REVIEW-LIST > .TBODY > li:hover > p.GOODS-TITLE{
	color : #000;
}


/* 비밀번호 입력 폼 */
.PASSWORD-FORM{
	display : none;
	position : fixed;
	top : 0;
	left : 0;
	right : 0;
	bottom : 0;
	background-color : rgba( 0, 0, 0, .5 );
	z-index : 10000;
}
.PASSWORD-FORM > .WRAPPER{
	position : absolute;
	top : 100%;
	left : 50%;
	width : 416px;
	height : 112px;
	padding : 32px;
	background-color : #FFF;
	border : solid 1px #DDD;
	border-radius : 3px;
	opacity : 0;
	overflow : hidden;
	box-shadow : 2px 2px 3px rgba( 0, 0, 0, .15 );
	transform :
		translateX( -50% )
		translateY( -50% );
	transition :
		opacity .25s ease-in-out,
		top .25s ease-in-out;
}
.PASSWORD-FORM > .WRAPPER > p{
	padding : 0;
	margin : 0;
	color : #444;
	text-align : center;
	font-size : 12px;
}
.PASSWORD-FORM > .WRAPPER > div{
	margin-top : 8px;
}
.PASSWORD-FORM > .WRAPPER > div > input#INPUT-PASSWORD{
	display : block;
	width : 160px;
	height : 30px;
	padding : 0 8px;
	margin : 16px auto;
	border : solid 1px #CCC;
	text-align : center;
	box-sizing : border-box;
}
.PASSWORD-FORM > .WRAPPER > div.BUTTONS{
	text-align : center;
	font-size : 0;
}
.PASSWORD-FORM > .WRAPPER > div.BUTTONS > button{
	height : 28px;
	padding : 0 12px;
	margin : 0 8px;
	background-color : #FFF;
	border : solid 1px #CCC;
	color : #666;
	font-size : 12px;
	cursor : pointer;
}
.PASSWORD-FORM > .WRAPPER > div.BUTTONS > button.T1{
	background-color : #1F375D;
	border-color : #1F375D;
	color : #FFF;
}
.PASSWORD-FORM.ON{
	display : block;
}
.PASSWORD-FORM.ON > .WRAPPER{
	top : 50%;
	opacity : 1;
}


/*
#NOTICE-LIST.TABLE > .THEAD > .NUMBER{ width : 128px }
#NOTICE-LIST.TABLE > .THEAD > .SUBJECT{ width : 864px }
#NOTICE-LIST.TABLE > .THEAD > .SAVEDATE{ width : 160px }
#NOTICE-LIST.TABLE > .TBODY > li > .NUMBER{ width : 128px; text-align : center; }
#NOTICE-LIST.TABLE > .TBODY > li > .SUBJECT{ width : 864px }
#NOTICE-LIST.TABLE > .TBODY > li > .SUBJECT > a:hover{
	cursor : pointer;
	text-decoration : underline;
}
#NOTICE-LIST.TABLE > .TBODY > li > .SAVEDATE{ width : 160px; text-align : center; }

#INSTALL-LIST.TABLE > .THEAD > .NUMBER{ width : 128px; }
#INSTALL-LIST.TABLE > .THEAD > .STATE{ width : 128px; }
#INSTALL-LIST.TABLE > .THEAD > .SUBJECT{ width : 576px; }
#INSTALL-LIST.TABLE > .THEAD > .WRITER{ width : 160px; }
#INSTALL-LIST.TABLE > .THEAD > .SAVEDATE{ width : 160px; }
#INSTALL-LIST.TABLE > .TBODY > li > .NUMBER{ width : 128px; text-align : center; }
#INSTALL-LIST.TABLE > .TBODY > li > .STATE{ width : 128px; text-align : center; }
#INSTALL-LIST.TABLE > .TBODY > li > .STATE > .ANSWERED{ color : #06C; }
#INSTALL-LIST.TABLE > .TBODY > li > .STATE > .NOANSWER{ color : #999; }
#INSTALL-LIST.TABLE > .TBODY > li > .SUBJECT{ width : 576px; }
#INSTALL-LIST.TABLE > .TBODY > li > .SUBJECT > a:hover{
	text-decoration : underline;
	color : #06C;
}
#INSTALL-LIST.TABLE > .TBODY > li > .WRITER{ width : 160px; text-align : center; }
#INSTALL-LIST.TABLE > .TBODY > li > .SAVEDATE{ width : 160px; text-align : center; }
*/



/* 글쓰기/수정 폼 */
.REGIST-FORM{
	width : 880px;
	margin : 32px auto;
}
.REGIST-FORM > div{
	margin-bottom : 4px;
	overflow : hidden;
}
.REGIST-FORM > div > .LABEL{
	float : left;
	width : 84px;
	height : 28px;
	padding : 0 8px;
	color : #333;
	font-size : 12px;
	line-height : 28px;
}
.REGIST-FORM > div > .VALUE{
	margin-left : 100px;
	min-height : 28px;
	font-size : 12px;
	line-height : 28px;
}
.REGIST-FORM > div > .VALUE > input[type="text"],
.REGIST-FORM > div > .VALUE > input[type="password"],
.REGIST-FORM > div > .VALUE > input[type="number"]{
	padding : 0 8px;
	height : 28px;
	border : solid 1px #CCC;
	font-size : 12px;
	box-sizing : border-box;
	vertical-align : top;
}
.REGIST-FORM > div > .VALUE > input[readonly]{
	background-color : #F9F9F9;
	color : #666;
}
.REGIST-FORM > div > .VALUE > input[type="checkbox"]{
	margin : -2px 4px 0 0;
	vertical-align : middle;
}
.REGIST-FORM > div > .VALUE > input[type="checkbox"] + label{
	color : #555;
}
.REGIST-FORM > div > .VALUE > button{
	height : 28px;
	padding : 0 12px;
	background-color : #FFF;
	border : solid 1px #CCC;
	color : #444;
	font-size : 11px;
	vertical-align : top;
	cursor : pointer;
}

.REGIST-FORM + .BUTTONS{
	margin-bottom : 32px;
	text-align : center;
}
.REGIST-FORM + .BUTTONS > button{
	height : 36px;
	padding : 0 16px;
	margin : 0 4px;
	background-color : #FFF;
	border : solid 1px #CCC;
	color : #555;
	cursor : pointer;
}
.REGIST-FORM + .BUTTONS > button.T1{
	background-color : #1F375D;
	border-color : #1F375D;
	color : #FFF;
}

#INSTALL-NAME{ width : 120px; }
#INSTALL-PHONE{ width : 180px; }
#INSTALL-ADDRESS1{ width : 280px; }
#INSTALL-ADDRESS2{ width : 180px; }
#INSTALL-PW{ width : 180px; }
#INSTALL-SUBJECT{ width : 780px; }


#COMP-INFO-TAB > .WRAPPER{
	position : relative;
	height : 775px;
	margin : 32px auto;
}
#COMP-INFO-TAB > .WRAPPER > div{
	position : absolute;
	top : 0;
	right : 0;
	left : 0;
	height : 650px;
	padding : 32px;
	border : solid 1px #DDD;
	border-top : 0;
	margin-top : 60px;
	z-index : 1;
}
#COMP-INFO-TAB > .WRAPPER > div > h3{
	width : 574px;
	height : 58px;
	padding : 0;
	margin : -92px 0 0 -33px;
	border : solid 1px #FFF;
	border-bottom-color : #06C;
	background-color : #F6F6F6;
	color : #666;
	text-align : center;
	font-family : 'Noto Sans KR';
	font-weight : normal;
	font-size : 15px;
	line-height : 58px;
	cursor : pointer;
}
#COMP-INFO-TAB > .WRAPPER > div:nth-child(2) > h3{
	margin-left : 543px;
}
#COMP-INFO-TAB > .WRAPPER > div > div{
	display : none;
	height : 650px;
	margin-top : 60px;
	background-color : #FFF;
	border-top : 0;
	overflow : hidden;
}

#COMP-INFO-TAB > .WRAPPER > div.ON{
	z-index : 10;
}
#COMP-INFO-TAB > .WRAPPER > div.ON > h3{
	background-color : #FFF;
	color : #047;
	border-color : #06C;
	border-bottom-color : #FFF;
}
#COMP-INFO-TAB > .WRAPPER > div.ON > h3 > a{
	display : block;
	height : 100%;
}
#COMP-INFO-TAB > .WRAPPER > div.ON > div{
	display : block;
}

#COMP-INFO-SLIDE > .SLIDE-WRAP{
	width : 1086px;
	height : 650px;
	overflow : hidden;
}
#COMP-INFO-SLIDE > .SLIDE-WRAP > .SLIDES{
	width : auto;
	height : 650px;
	font-size : 0;
	white-space : nowrap;
}
#COMP-INFO-SLIDE > .SLIDE-WRAP > .SLIDES > div{
	display : inline-block;
	width : 1086px;
	height : 650px;
}
#COMP-INFO-SLIDE > button{
	position : absolute;
	width : 64px;
	height : 64px;
	top : 50%;
	background-color : transparent;
	background-image : url("/images/icon-black-arrow.png");
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
	border : 0;
	outline : 0;
	font-size : 0;
	opacity : .25;
}
#COMP-INFO-SLIDE > button:hover{
	cursor : pointer;
	opacity : .5;
}
#COMP-INFO-SLIDE > button[name="SLIDE-PREV"]{
	left : 0;
	transform : rotateY( 180deg );
}
#COMP-INFO-SLIDE > button[name="SLIDE-NEXT"]{
	right : 0;
}



#REVIEW-VIEW{
	display : none;
	position : fixed;
	top : 0;
	left : 0;
	right : 0;
	bottom : 0;
	background-color : rgba( 0, 0, 0, .5 );
	z-index : 10002;
}
#REVIEW-VIEW > .WRAPPER{
	position : absolute;
	left : 50%;
	top : 50%;
	width : 860px;
	height : 560px;
	background-color : #FFF;
	border-radius : 3px;
	overflow : hidden;
	box-shadow : 2px 2p 3px rgba( 0, 0, 0, .5 );
	transform :
		translateX( -50% )
		translateY( -50% );
}
#REVIEW-VIEW > .WRAPPER > .REVIEW-PICTURES{
	position : absolute;
	top : 0;
	bottom : 0;
	right : 300px;
	left : 0;
	background-color : #E9E9E9;
	overflow : hidden;
	white-space : nowrap;
}
#REVIEW-VIEW > .WRAPPER > .REVIEW-PICTURES > .PICRURES-WRAP{
	width : auto;
	height : 560px;
	font-size: 0;
	white-space : nowrap;
}
#REVIEW-VIEW > .WRAPPER > .REVIEW-PICTURES > .PICTURES-WRAP > i{
	display : inline-block;
	width : 560px;
	height : 560px;
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
	vertical-align : top;
}
#REVIEW-VIEW > .WRAPPER > .REVIEW-PICTURES > .PICTURES-WRAP > i.NOIMAGE{
	display : block;
	position : relative;
	width : 300px;
	height : 300px;
	margin : 150px auto 110px auto;
	opacity : .75;
}
#REVIEW-VIEW > .WRAPPER > .REVIEW-PICTURES > .PICTURES-WRAP > i.NOIMAGE:before{
	content : '해당상품의 리뷰에 등록된 이미지가 없습니다';
	display : block;
	position : absolute;
	top : -36px;
	left : 0;
	right : 0;
	color : #666;
	text-align : center;
	font-style : normal;
	font-size : 12px;
}
#REVIEW-VIEW > .WRAPPER > .REVIEW-PICTURES > button{
	position : absolute;
	top : 256px;
	width : 48px;
	height : 48px;
	background-color : transparent;
	background-image : url("/images/icon-white-arrow.png");
	background-repeat : no-repeat;
	background-position : center;
	background-size : 40px;
	border : 0;
	outline : 0;
	font-size : 0;
	cursor : pointer;
	opacity : .5;
}
#REVIEW-VIEW > .WRAPPER > .REVIEW-PICTURES > button[name="PREV"]{
	left : 0;
	transform : rotateY( 180deg );
}
#REVIEW-VIEW > .WRAPPER > .REVIEW-PICTURES > button[name="NEXT"]{
	right : 0;
}
#REVIEW-VIEW > .WRAPPER > .REVIEW-PICTURES > button:hover{
	opacity : 1;
}
#REVIEW-VIEW > .WRAPPER > .REVIEW-CONTENTS{
	position : absolute;
	top : 0;
	bottom : 0;
	right : 0;
	left : 560px;
	padding : 16px;
	overflow : auto;
}
#REVIEW-VIEW > .WRAPPER > .REVIEW-CONTENTS > .GOODS-INFO{
	padding : 12px;
	border : solid 1px #DDD;
	overflow : hidden;
}
#REVIEW-VIEW > .WRAPPER > .REVIEW-CONTENTS > .GOODS-INFO > .THUMBNAIL{
	float : left;
	width : 72px;
	height : 72px;
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
}
#REVIEW-VIEW > .WRAPPER > .REVIEW-CONTENTS > .GOODS-INFO > .TITLE{
	height : 72px;
	padding : 0;
	margin : 0 0 0 84px;
	font-size : 12px;
	line-height : 18px;
	overflow : hidden;
}
#REVIEW-VIEW > .WRAPPER > .REVIEW-CONTENTS > .REVIEW-INFO{
	padding : 16px;
	margin-top : 32px;
}
#REVIEW-VIEW > .WRAPPER > .REVIEW-CONTENTS > .REVIEW-INFO > .REVIEW-MARK{
	display : block;
	width : 80px;
	height : 16px;
	margin-top : 4px;
	background-image : url("/images/icon-mark.png");
	background-repeat : no-repeat;
	background-size : 80px auto;
	font-size : 0;
}
#REVIEW-VIEW > .WRAPPER > .REVIEW-CONTENTS > .REVIEW-INFO > .REVIEW-MARK.STEP1{
	background-position-y : -64px;
}
#REVIEW-VIEW > .WRAPPER > .REVIEW-CONTENTS > .REVIEW-INFO > .REVIEW-MARK.STEP2{
	background-position-y : -48px;
}
#REVIEW-VIEW > .WRAPPER > .REVIEW-CONTENTS > .REVIEW-INFO > .REVIEW-MARK.STEP3{
	background-position-y : -32px;
}
#REVIEW-VIEW > .WRAPPER > .REVIEW-CONTENTS > .REVIEW-INFO > .REVIEW-MARK.STEP4{
	background-position-y : -16px;
}
#REVIEW-VIEW > .WRAPPER > .REVIEW-CONTENTS > .REVIEW-INFO > .REVIEW-MARK.STEP5{
	background-position-y : 0;
}
#REVIEW-VIEW > .WRAPPER > .REVIEW-CONTENTS > .REVIEW-INFO > .REVIEW-DATE{
	margin-top : 4px;
	font-size : 12px;
}
#REVIEW-VIEW > .WRAPPER > .REVIEW-CONTENTS > .REVIEW-INFO > .REVIEW-DATE:before{
	content : '작성일자 : ';
}
#REVIEW-VIEW > .WRAPPER > .REVIEW-CONTENTS > .REVIEW-INFO > .REVIEW-CONT{
	margin-top : 16px;
	font-size : 14px;
}
#REVIEW-VIEW > .WRAPPER > .REVIEW-CONTENTS > .BUTTONS{
	margin-top : 32px;
	text-align : right;
}
#REVIEW-VIEW > .WRAPPER > .REVIEW-CONTENTS > .BUTTONS > button{
	padding : 8px 12px;
	background-color : #FFF;
	border : solid 1px #DDD;
	color : #666;
	font-size : 12px;
}
#REVIEW-VIEW > .WRAPPER > .REVIEW-CONTENTS > .BUTTONS > button:hover{
	cursor : pointer;
	border-color : #AAA;
	color : #000;
}

body.REVIEW-VIEW{
	overflow : hidden;
}
body.REVIEW-VIEW > #REVIEW-VIEW{
	display : block;
}


/* IE 전용 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){

	#FRONT-MENU{ display : block; font-size : 0; }
	#FRONT-MENU > a{
		display : inline-block;
		width : 248px;
		margin : 4px;
	}
	#FRONT-MENU > a:hover{
		background-color : #FFF;
		color : #1F77BD;
	}

}

/* 모바일 세팅 */
@media( max-width : 480px ){

	#FRONT-MENU{
		grid-template-columns : repeat( 2, 1fr );
		grid-gap : .5rem;
		margin : 0;
		padding : .5rem;
	}
	#FRONT-MENU > a{
		padding : 1rem 0;
		font-size : .85rem;
	}

	#FRONT-BOARD{
		grid-template-columns : 1fr;
		grid-gap : 1rem;
		margin : 1rem;
	}

}