.left-index { padding:24px; width:172px; position:fixed; top:72px; height:auto; background:#fff; border-radius:0px 16px 16px 0; box-shadow:0px 2px 20px rgba(0,0,0,0.15);}
.left-index > h5 { font-size:12px; font-weight:600; color:#868686; margin-bottom:16px;}
.left-index > h5 > a { display:block; color:#E51111; font-weight:600; font-size:11px; margin-bottom:8px;}
.left-index > ul { display:inline-block; width:100%; height:auto;}
.left-index > ul > hr { border:1px solid #e9e9e9;}
.left-index > ul li a { color:#565656; font-size:12px; line-height:24px;}
.left-index > ul li a span { margin-right:8px; font-weight:400; display:inline-block; width:30px; height:16px; background:#a6a6a6; text-align:center; border-radius:50vh; line-height:16px; color:#fff; font-size:10px; }
.left-index > ul li a:hover { color:#e51111;  }
.left-index > ul li a:hover span { background:#e51111;}

.tag-info { margin:16px 8px 40px;}
.tag-info > h6 { font-size:13px; font-weight:500; color:#565656; margin-bottom:8px; }
.tag-info > em { display:block; font-size:12px; color:#868686; margin-bottom:10px;}
.tag-info > p { font-size:13px; line-height:1.8; color:#565656;}
.tag-info > p:before { display:inline-block; content:''; width:4px; height:4px; border-radius:50vh; background-color:#ff7131; margin-bottom:2px; margin-right:8px; vertical-align:middle;}
.tag-info > p > strong { font-size:13px; color:#1F9F6C; margin-right:16px;}

.wrapper { padding:60px 60px 200px 210px; }

.lu-component { display:inline-block; width:100%; height:auto; margin-bottom:100px;}
.lu-component > h1 { font-weight:600; display:inline-block; font-size:32px; margin-bottom:24px;}
.lu-component > h1 > span { width:32px; height:32px; font-size:13px; line-height:32px; text-align:center; border-radius:16px; display:inline-block; vertical-align:middle; color:#fff; background:#161616; margin-right:8px; margin-bottom:6px;}
.lu-component .ex-block {  padding:24px; background:#f9f9f9; border-radius:16px; margin-bottom:16px;}
.lu-component .ex-block > h4 { font-weight:600; font-size:16px; color:#161616; }
.lu-component .ex-block > p { font-size:13px; margin-top:8px; margin-bottom:24px; color:#565656;}

/*■■■탈부착식 CSS 컴포넌트 모음*/


/*■■■필수 탈부착식*/
/*theme-color Setting*/
/*블루*/
.theme1-c-btn { background-color: #387df7 !important; color: #fff !important; border: 1px solid #387df7 !important; }
.theme1-c-btn:not(.btn-switch):hover { background-color: #fff !important; color: #387df7 !important; border: 1px solid #387df7 !important; }
.theme1-c-btn.line { background-color: #fff !important; color: #387df7 !important; border: 1px solid #387df7 !important; }
.theme1-c-btn.line:hover { background-color: #387df7 !important; color: #fff !important; border: 1px solid #387df7 !important; }
.theme1-c-font { color: #387df7 !important;}
.theme1-c-bg { background-color: #387df7 !important;}
.theme1-c-line { border-color: #387df7 !important;}


/*86*/
.theme2-c-btn { background-color: #868686 !important; color: #fff !important; border: 1px solid #868686 !important; }
.theme2-c-btn:not(.btn-switch):hover { background-color: #fff !important; color: #868686 !important; border: 1px solid #868686 !important; }
.theme2-c-btn.line { background-color: #fff !important; color: #868686 !important; border: 1px solid #868686 !important; }
.theme2-c-btn.line:hover { background-color: #868686 !important; color: #fff !important; border: 1px solid #868686 !important; }
.theme2-c-font { color: #868686 !important;}
.theme2-c-bg { background-color: #868686 !important;}
.theme2-c-line { border-color: #868686 !important;}


/*둥근 모서리 border-raidus*/
.radius4  { border-radius:4px!important; }
.radius8  { border-radius:8px!important; }
.radius12  { border-radius:12px!important; }
.radius16 { border-radius:16px!important; }
.radius24 { border-radius:24px!important; }
.radius32 { border-radius:32px!important; }
.radius-half { border-radius:50vh!important; }

/*버튼 분할 방식 .btn-split*/
.btn-split2 { float:left; width:calc(50% - 8px)!important; margin:0 4px;}
.btn-split3 { float:left; width:calc(33.3333% - 6px)!important; margin:0 3px;}
.btn-split4 { float:left; width:calc(25% - 4px)!important; margin:0 2px;}

/*100%width 가변형 flexible*/
.flexible  { width:100%!important; }



/*그레이스케일 컬러*/
.gray-f9-font { color:#f9f9f9!important; }
.gray-f9-bg { background-color:#f9f9f9!important; }
.gray-f9-line { border-color:#f9f9f9!important; }

.gray-f6-font { color:#f6f6f6!important; }
.gray-f6-bg { background-color:#f6f6f6!important; }
.gray-f6-line { border-color:#f6f6f6!important; }

.gray-e9-font { color:#e9e9e9!important; }
.gray-e9-bg { background-color:#e9e9e9!important; }
.gray-e9-line { border-color:#e9e9e9!important; }

.gray-e6-font { color:#e6e6e6!important; }
.gray-e6-bg { background-color:#e6e6e6!important; }
.gray-e6-line { border-color:#e6e6e6!important; }

.gray-d6-font { color:#d6d6d6!important; }
.gray-d6-bg { background-color:#d6d6d6!important; }
.gray-d6-line { border-color:#d6d6d6!important; }

.gray-b6-font { color:#b6b6b6!important; }
.gray-b6-bg { background-color:#b6b6b6!important; }
.gray-b6-line { border-color:#b6b6b6!important; }

.gray-a6-font { color:#a6a6a6!important; }
.gray-a6-bg { background-color:#a6a6a6!important; }
.gray-a6-line { border-color:#a6a6a6!important; }

.gray-86-font { color:#868686!important; }
.gray-86-bg { background-color:#868686!important; }
.gray-86-line { border-color:#868686!important; }

.gray-56-font { color:#565656!important; }
.gray-56-bg { background-color:#565656!important; }
.gray-56-line { border-color:#565656!important; }

.gray-16-font { color:#161616!important; }
.gray-16-bg { background-color:#161616!important; }
.gray-16-line { border-color:#161616!important; }



/*width사이즈 8의 배수*/
.width8 { width:8px!important;}
.width16 { width:16px!important;}
.width24 { width:24px!important;}
.width32 { width:32px!important;}
.width40 { width:40px!important;}
.width48 { width:48px!important;}
.width56 { width:56px!important;}
.width64 { width:64px!important;}
.width72 { width:72px!important;}
.width80 { width:80px!important;}
.width88 { width:88px!important;}
.width96 { width:96px!important;}
.width104 { width:104px!important;}
.width112 { width:112px!important;}
.width120 { width:120px!important;}
.width128 { width:128px!important;}
.width136 { width:136px!important;}
.width144 { width:144px!important;}
.width152 { width:152px!important;}
.width160 { width:160px!important;}

/*width사이즈 8의 배수*/
.height8 { height:8px!important;}
.height16 { height:16px!important;}
.height24 { height:24px!important;}
.height32 { height:32px!important;}
.height40 { height:40px!important;}
.height48 { height:48px!important;}
.height56 { height:56px!important;}
.height64 { height:64px!important;}
.height72 { height:72px!important;}
.height80 { height:80px!important;}
.height88 { height:88px!important;}
.height96 { height:96px!important;}
.height104 { height:104px!important;}
.height112 { height:112px!important;}
.height120 { height:120px!important;}
.height128 { height:128px!important;}
.height136 { height:136px!important;}
.height144 { height:144px!important;}
.height152 { height:152px!important;}
.height160 { height:160px!important;}



/*폰트 사이즈 font-size*/
.font-size10 { font-size:10px!important; }
.font-size11 { font-size:11px!important; }
.font-size12 { font-size:12px!important; }
.font-size13 { font-size:13px!important; }
.font-size14 { font-size:14px!important; }
.font-size15 { font-size:15px!important; }
.font-size16 { font-size:16px!important; }
.font-size17 { font-size:17px!important; }
.font-size18 { font-size:18px!important; }
.font-size19 { font-size:19px!important; }
.font-size20 { font-size:20px!important; }
.font-size21 { font-size:21px!important; }
.font-size22 { font-size:22px!important; }
.font-size23 { font-size:23px!important; }
.font-size24 { font-size:24px!important; }
.font-size25 { font-size:25px!important; }
.font-size26 { font-size:26px!important; }
.font-size27 { font-size:27px!important; }
.font-size28 { font-size:28px!important; }
.font-size29 { font-size:29px!important; }
.font-size30 { font-size:30px!important; }
.font-size31 { font-size:30px!important; }
.font-size32 { font-size:32px!important; }
.font-size33 { font-size:32px!important; }
.font-size34 { font-size:34px!important; }
.font-size35 { font-size:34px!important; }
.font-size36 { font-size:36px!important; }
.font-size37 { font-size:36px!important; }
.font-size38 { font-size:36px!important; }
.font-size39 { font-size:36px!important; }
.font-size40 { font-size:40px!important; }

/*폰트 굵기 font-weight*/
.font-weight300 { font-weight:300!important; }
.font-weight400 { font-weight:400!important; }
.font-weight500 { font-weight:500!important; }
.font-weight600 { font-weight:600!important; }

/*마진 auto margin*/
.margin-auto { margin:0 auto!important;}

/*마진 ALL margin*/
.margin-a0 { margin:0!important;}
.margin-a2 { margin:2px!important;}
.margin-a4 { margin:4px!important;}
.margin-a6 { margin:6px!important;}
.margin-a8 { margin:8px!important;}
.margin-a10 { margin:10px!important;}
.margin-a12 { margin:12px!important;}
.margin-a16 { margin:16px!important;}
.margin-a20 { margin:20px!important;}
.margin-a24 { margin:24px!important;}
.margin-a32 { margin:32px!important;}

/*마진 Top margin*/
.margin-t0 { margin-top:0!important;}
.margin-t2 { margin-top:2px!important;}
.margin-t4 { margin-top:4px!important;}
.margin-t6 { margin-top:6px!important;}
.margin-t8 { margin-top:8px!important;}
.margin-t10 { margin-top:10px!important;}
.margin-t12 { margin-top:12px!important;}
.margin-t16 { margin-top:16px!important;}
.margin-t20 { margin-top:20px!important;}
.margin-t24 { margin-top:24px!important;}
.margin-t32 { margin-top:32px!important;}

/*마진 left margin*/
.margin-l0 { margin-left:0!important;}
.margin-l2 { margin-left:2px!important;}
.margin-l4 { margin-left:4px!important;}
.margin-l6 { margin-left:6px!important;}
.margin-l8 { margin-left:8px!important;}
.margin-l10 { margin-left:10px!important;}
.margin-l12 { margin-left:12px!important;}
.margin-l16 { margin-left:16px!important;}
.margin-l20 { margin-left:20px!important;}
.margin-l24 { margin-left:24px!important;}
.margin-l32 { margin-left:32px!important;}

/*마진 right margin*/
.margin-r0 { margin-right:0!important;}
.margin-r2 { margin-right:2px!important;}
.margin-r4 { margin-right:4px!important;}
.margin-r6 { margin-right:6px!important;}
.margin-r8 { margin-right:8px!important;}
.margin-r10 { margin-right:10px!important;}
.margin-r12 { margin-right:12px!important;}
.margin-r16 { margin-right:16px!important;}
.margin-r20 { margin-right:20px!important;}
.margin-r24 { margin-right:24px!important;}
.margin-r32 { margin-right:32px!important;}

/*마진 bottom margin*/
.margin-b0 { margin-bottom:0!important;}
.margin-b2 { margin-bottom:2px!important;}
.margin-b4 { margin-bottom:4px!important;}
.margin-b6 { margin-bottom:6px!important;}
.margin-b8 { margin-bottom:8px!important;}
.margin-b10 { margin-bottom:10px!important;}
.margin-b12 { margin-bottom:12px!important;}
.margin-b16 { margin-bottom:16px!important;}
.margin-b20 { margin-bottom:20px!important;}
.margin-b24 { margin-bottom:24px!important;}
.margin-b32 { margin-bottom:32px!important;}

/*패딩 ALL padding*/
.padding-a0 { padding:0!important;}
.padding-a2 { padding:2px!important;}
.padding-a4 { padding:4px!important;}
.padding-a6 { padding:6px!important;}
.padding-a8 { padding:8px!important;}
.padding-a10 { padding:10px!important;}
.padding-a12 { padding:12px!important;}
.padding-a16 { padding:16px!important;}
.padding-a20 { padding:20px!important;}
.padding-a24 { padding:24px!important;}
.padding-a32 { padding:32px!important;}

/*패딩 Top padding*/
.padding-t0 { padding-top:0!important;}
.padding-t2 { padding-top:2px!important;}
.padding-t4 { padding-top:4px!important;}
.padding-t6 { padding-top:6px!important;}
.padding-t8 { padding-top:8px!important;}
.padding-t10 { padding-top:10px!important;}
.padding-t12 { padding-top:12px!important;}
.padding-t16 { padding-top:16px!important;}
.padding-t20 { padding-top:20px!important;}
.padding-t24 { padding-top:24px!important;}
.padding-t32 { padding-top:32px!important;}

/*패딩 left padding*/
.padding-l0 { padding-left:0!important;}
.padding-l2 { padding-left:2px!important;}
.padding-l4 { padding-left:4px!important;}
.padding-l6 { padding-left:6px!important;}
.padding-l8 { padding-left:8px!important;}
.padding-l10 { padding-left:10px!important;}
.padding-l12 { padding-left:12px!important;}
.padding-l16 { padding-left:16px!important;}
.padding-l20 { padding-left:20px!important;}
.padding-l24 { padding-left:24px!important;}
.padding-l32 { padding-left:32px!important;}

/*패딩 right padding*/
.padding-r0 { padding-right:0!important;}
.padding-r2 { padding-right:2px!important;}
.padding-r4 { padding-right:4px!important;}
.padding-r6 { padding-right:6px!important;}
.padding-r8 { padding-right:8px!important;}
.padding-r10 { padding-right:10px!important;}
.padding-r12 { padding-right:12px!important;}
.padding-r16 { padding-right:16px!important;}
.padding-r20 { padding-right:20px!important;}
.padding-r24 { padding-right:24px!important;}
.padding-r32 { padding-right:32px!important;}

/*패딩 bottom padding*/
.padding-b0 { padding-bottom:0!important;}
.padding-b2 { padding-bottom:2px!important;}
.padding-b4 { padding-bottom:4px!important;}
.padding-b6 { padding-bottom:6px!important;}
.padding-b8 { padding-bottom:8px!important;}
.padding-b10 { padding-bottom:10px!important;}
.padding-b12 { padding-bottom:12px!important;}
.padding-b16 { padding-bottom:16px!important;}
.padding-b20 { padding-bottom:20px!important;}
.padding-b24 { padding-bottom:24px!important;}
.padding-b32 { padding-bottom:32px!important;}



/*사진선택, 파일선택형 img-type , file-type*/
.btn-small.img-type:before { vertical-align:middle; margin-bottom:2px; margin-left:-4px; margin-right:4px; display:inline-block; content:''; width:20px; height:20px; background:url(../images/component/icon_fileupload_img.png) center center no-repeat; background-size: contain;}
.btn-regular.img-type:before { vertical-align:middle; margin-bottom:2px; margin-left:-4px; margin-right:4px; display:inline-block; content:''; width:24px; height:24px; background:url(../images/component/icon_fileupload_img.png) center center no-repeat; background-size: contain;}
.btn-medium.img-type:before { vertical-align:middle; margin-bottom:2px; margin-left:-4px; margin-right:6px; display:inline-block; content:''; width:28px; height:28px; background:url(../images/component/icon_fileupload_img.png) center center no-repeat; background-size: contain;}
.btn-large.img-type:before { vertical-align:middle; margin-bottom:2px; margin-left:-4px; margin-right:8px; display:inline-block; content:''; width:32px; height:32px; background:url(../images/component/icon_fileupload_img.png) center center no-repeat; background-size: contain;}


.btn-small.file-type:before { vertical-align:middle; margin-bottom:2px; margin-left:-4px; margin-right:4px; display:inline-block; content:''; width:20px; height:20px; background:url(../images/component/icon_fileupload_file.png) center center no-repeat; background-size: contain;}
.btn-regular.file-type:before { vertical-align:middle; margin-bottom:2px; margin-left:-4px; margin-right:4px; display:inline-block; content:''; width:24px; height:24px; background:url(../images/component/icon_fileupload_file.png) center center no-repeat; background-size: contain;}
.btn-medium.file-type:before { vertical-align:middle; margin-bottom:2px; margin-left:-4px; margin-right:6px; display:inline-block; content:''; width:28px; height:28px; background:url(../images/component/icon_fileupload_file.png) center center no-repeat; background-size: contain;}
.btn-large.file-type:before { vertical-align:middle; margin-bottom:2px; margin-left:-4px; margin-right:8px; display:inline-block; content:''; width:32px; height:32px; background:url(../images/component/icon_fileupload_file.png) center center no-repeat; background-size: contain;}


/*input + 버튼 조합형*/
.input-small + .btn-small { margin-left:4px; }
.input-regular + .btn-regular { margin-left:4px; }
.input-medium + .btn-medium { margin-left:4px; }
.input-large + .btn-large { margin-left:4px; }




/*■■■버튼*/
.btn-small { display: inline-block; min-width: 44px; height: 28px; padding:0 16px; border: solid 1px #d6d6d6; background-color: #ffffff; font-size: 12px;  letter-spacing: -0.5px; text-align: center; color: #565656; line-height: 28px;  transition:all 0.5s; font-weight:600; }
.btn-regular { display: inline-block; min-width: 64px; height: 35px; padding:0 16px; border: solid 1px #d6d6d6; background-color: #ffffff; font-size: 12px; letter-spacing: -0.5px; text-align: center; color: #565656; line-height: 35px;  transition:all 0.5s; font-weight:600; }
.btn-medium { display: inline-block; min-width: 80px; height: 44px; padding:0 16px; border: solid 1px #d6d6d6; background-color: #ffffff; font-size: 13px;letter-spacing: -0.5px; text-align: center; color: #565656; line-height: 44px; transition:all 0.5s; font-weight:600; }
.btn-large { display: inline-block; min-width: 96px; height: 50px; padding:0 16px; border: solid 1px #d6d6d6; background-color: #ffffff; font-size: 15px;letter-spacing: -0.5px; text-align: center; color: #565656; line-height: 50px;  transition:all 0.5s; font-weight:600;}

/*버튼 색상*/
.btn-small.disabled, .btn-regular.disabled, .btn-medium.disabled, .btn-large.disabled { border: solid 1px #d6d6d6; background-color: #d6d6d6; color: #ffffff; cursor:not-allowed;}
.btn-small.gray, .btn-regular.gray, .btn-medium.gray, .btn-large.gray { border: solid 1px #a6a6a6; background-color: #a6a6a6; color: #ffffff; }
.btn-small.black, .btn-regular.black, .btn-medium.black, .btn-large.black { border: solid 1px #161616; background-color: #161616; color: #ffffff; }

.btn-small.gray.line, .btn-regular.gray.line, .btn-medium.gray.line, .btn-large.gray.line { border: solid 1px #a6a6a6; background-color: #fff; color: #868686; }
.btn-small.black.line, .btn-regular.black.line, .btn-medium.black.line, .btn-large.black.line { border: solid 1px #161616; background-color: #fff; color: #161616; }

.btn-small:not(.btn-switch):hover, .btn-regular:not(.btn-switch):hover, .btn-medium:not(.btn-switch):hover, .btn-large:not(.btn-switch):hover { border: solid 1px #d6d6d6; background-color: #f6f6f6; color: #565656; }
.btn-small.disabled:not(.btn-switch):hover, .btn-regular.disabled:not(.btn-switch):hover, .btn-medium.disabled:not(.btn-switch):hover, .btn-large.disabled:not(.btn-switch):hover { border: solid 1px #d6d6d6; background-color:#d6d6d6; color:#fff;}
.btn-small.gray:not(.btn-switch):hover, .btn-regular.gray:not(.btn-switch):hover, .btn-medium.gray:not(.btn-switch):hover, .btn-large.gray:not(.btn-switch):hover { border: solid 1px #a6a6a6; background-color: #ffffff; color: #a6a6a6; }
.btn-small.black:not(.btn-switch):hover, .btn-regular.black:not(.btn-switch):hover, .btn-medium.black:not(.btn-switch):hover, .btn-large.black:not(.btn-switch):hover  { border: solid 1px #161616; background-color: #ffffff; color: #161616; }

.btn-small.disabled.line:hover .btn-regular.disabled.line:hover, .btn-medium.disabled.line:hover, .btn-large.disabled.line:hover { border: solid 1px #d6d6d6; background-color: #d6d6d6; color: #ffffff; cursor:no-drop;}
.btn-small.gray.line:hover, .btn-regular.gray.line:hover, .btn-medium.gray.line:hover, .btn-large.gray.line:hover { border: solid 1px #a6a6a6; background-color: #a6a6a6; color: #ffffff; }
.btn-small.black.line:hover, .btn-regular.black.line:hover, .btn-medium.black.line:hover, .btn-large.black.line:hover { border: solid 1px #161616; background-color: #161616; color: #ffffff; }



/*■■■인풋*/
.input-small { display: inline-block; min-width: 200px; height: 28px; padding:0 10px; border: solid 1px #e9e9e9; background-color: #ffffff; font-size: 12px; font-weight: 400; letter-spacing: -0.5px; text-align: left; color: #565656; line-height: 28px;  transition:all 0.5s; font-weight:400; }
.input-regular { display: inline-block; min-width: 200px; height: 35px; padding:0 12px; border: solid 1px #e9e9e9; background-color: #ffffff; font-size: 13px; font-weight: 400; letter-spacing: -0.5px; text-align: left; color: #565656; line-height: 35px;  transition:all 0.5s; font-weight:400; }
.input-medium { display: inline-block; width: 200px; height: 44px; padding:0 16px; border: solid 1px #e9e9e9; background-color: #ffffff; font-size: 14px; font-weight: 400; letter-spacing: -0.5px; text-align: left; color: #565656; line-height: 44px; transition:all 0.5s; font-weight:400; }
.input-large { display: inline-block; width: 200px; height: 50px; padding:0 16px; border: solid 1px #e9e9e9; background-color: #ffffff; font-size: 16px; font-weight: 400; letter-spacing: -0.5px; text-align: left; color: #565656; line-height: 52px;  transition:all 0.5s; font-weight:400;}




input[disabled] { background: #f6f6f6; cursor:not-allowed; color:#565656;}
.input-small.active, .input-small:focus { border-color: #161616; }

/*■■■인풋checkbox*/
input[type="checkbox"] { display: inline-block; width: 20px; height: 20px; vertical-align: middle; -webkit-appearance: none;  cursor: pointer; border-radius: 2px; border: 1px solid #d6d6d6; background: #fff; }
input[type="checkbox"]:checked { background:#161616 url(../images/component/icon_check.png) center center no-repeat; background-size: contain; border:1px solid #161616; }
input[type="checkbox"]:disabled { background:#f6f6f6; cursor:not-allowed;}


/*■■■인풋radio*/
input[type="radio"] { position:relative; display: inline-block; width: 20px; height: 20px; vertical-align: middle; text-align: center; -webkit-appearance: none; cursor: pointer; border-radius: 50%; background: #fff; border: 1px solid #d6d6d6; }
input[type="radio"]:checked { background: #fff; border: 1px solid #d6d6d6; }
input[type="radio"]:checked:before { content: ''; display: inline-block; width: 10px; height: 10px; background: #161616; border-radius:50vh; vertical-align: middle; margin-top: -5px; position:absolute; top:50%; left:50%; margin-left:-5px; }
input[type="radio"]:disabled { background:#f6f6f6; cursor:not-allowed;}


/*■■■인풋search*/
.search-small {  position:relative; display:inline;  }
.search-small > .btn-small { position:absolute; display:inline-block; width:20px; height:20px; text-indent:-9999px; padding:0 0 0 0; min-width:auto; border:0; top:50%; margin-top:-8px; right:8px; background:url(../images/component/icon_search.png) no-repeat 0 0; background-size:contain;}
.search-small > input[type='search']::-webkit-search-cancel-button{ width:20px; height:20px; margin-right:16px;}

.search-regular {  position:relative; display:inline; }
.search-regular > .btn-regular { position:absolute; display:inline-block; width:24px; height:24px; text-indent:-9999px; padding:0 0 0 0; min-width:auto; border:0; top:50%; margin-top:-10px; right:10px; background:url(../images/component/icon_search.png) no-repeat 0 0; background-size:contain;}
.search-regular > input[type='search']::-webkit-search-cancel-button{ margin-right:20px;}

.search-medium {  position:relative; display:inline; }
.search-medium > .btn-medium { position:absolute; display:inline-block; width:32px; height:32px; text-indent:-9999px; padding:0 0 0 0; min-width:auto; border:0; top:50%; margin-top:-14px; right:8px; background:url(../images/component/icon_search.png) no-repeat 0 0; background-size:contain;}
.search-medium > input[type='search']::-webkit-search-cancel-button{ margin-right:24px;}


/*■■■셀렉트박스*/
select { background:url(../images/component/icon_select_arrow.png) no-repeat right center; background-size:24px; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
select::-ms-expand {display: none; }


/*■■■페이지네이션*/
.paginate-area { text-align: center; }
.paginate-area:after { content: ''; display: block; clear: both; }
.paginate-area ul { display: inline-block; }
.paginate-area ul li { float: left; margin: 0 2px; }
.paginate-area ul li a { display: inline-block; width: 28px; height: 28px; border-radius:2px; line-height: 26px; text-align: center; padding: 0; vertical-align: middle; text-decoration: none; transition: all 0.5s;font-size: 13px; color: #999; font-weight: 400; }
.paginate-area ul .dir.prev a { background: url(../images/component/icon_pagination_prev.png) center center no-repeat; background-size: contain;}
.paginate-area ul .dir.next a { background: url(../images/component/icon_pagination_next.png) center center no-repeat; background-size: contain; }
.paginate-area ul .dir.start a { background: url(../images/component/pagination-start.png) center center no-repeat; background-size: contain;}
.paginate-area ul .dir.end a { background: url(../images/component/pagination-end.png) center center no-repeat; background-size: contain;}
.paginate-area ul .dir.prev a:hover { background:#e9e9e9 url(../images/component/icon_pagination_prev.png) center center no-repeat; background-size: contain;}
.paginate-area ul .dir.next a:hover { background:#e9e9e9 url(../images/component/icon_pagination_next.png) center center no-repeat; background-size: contain;}
.paginate-area ul .dir.start a:hover { background:#e9e9e9 url(../images/component/pagination-start.png) center center no-repeat; background-size: contain;}
.paginate-area ul .dir.end a:hover { background:#e9e9e9 url(../images/component/pagination-end.png) center center no-repeat; background-size: contain;}
.paginate-area ul li.on a { font-weight: 400; background: #161616; color: #fff; border: 1px solid #161616; border-radius: 2px; }
.paginate-area ul li.on a:hover { background: #161616; color: #fff; border: 1px solid #161616; }
.paginate-area ul li a:hover { background: #e9e9e9; }


/*■■■파일업로드*/
.file-upload .gallery { display:block;}
.file-upload .gallery:after { display:block; content:''; display:block; clear:both;}
/*.file-upload .gallery .img-thumb  { float:left; position:relative; width:100px; height:100px; margin-bottom:8px; margin-right:8px; border-radius:8px; overflow:hidden; background:url(../images/component/bg_upload_img_default.png) no-repeat 0 0; background-size:contain; }*/
.file-upload .gallery .img-thumb  { float:left; position:relative; width:100px; height:100px; margin-bottom:8px; margin-right:8px; border-radius:8px;  background:url(../images/component/bg_upload_img_default.png) no-repeat 0 0; background-size:contain; }
.file-upload .gallery .delete { width:32px; height:32px; position:absolute; top:0; right:0; cursor:pointer; z-index:1;background:url(../images/component/icon_file_upload_delete.png) no-repeat 0 0; background-size:contain;}
/*.file-upload .gallery img { object-fit:cover; width:100%; height:100%; }*/
.file-upload .gallery img { object-fit:cover; width:100%; height:100%;  border-radius: 50%; }
.file-upload .gallery .file-thumb  { float:left; position:relative; width:100px; height:100px; margin-bottom:8px; margin-right:8px; border-radius:8px;overflow:hidden; background:url(../images/component/bg_upload_file_default.png) no-repeat 0 0; background-size:contain; }
.file-upload .gallery .file-thumb .name {display:block; text-align:center; position:absolute; width:80px; left:50%; margin-left:-40px; top:56px; font-size:11px; color:#868686; letter-spacing:-1px;  max-width: 80px;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap:normal }
.file-upload .gallery .file-thumb .size{ display:block; text-align:center; position:absolute; width:80px; left:50%; margin-left:-40px; top:76px; font-size:10px; color:#a6a6a6; }
.file-upload .upload { cursor:pointer; display:inline; position:relative; }
.file-upload .upload > input { display:inline-block; cursor:pointer; position:absolute; top:0; left:0; opacity:0; width:100%; height:100%;}
::-webkit-file-upload-button { cursor:pointer; }


/*■■■탭메뉴*/

.tab-menu { width:100%; height:auto; display:block; }
.tab-menu .inner-wrap { width:100%; height:auto; display:block; }
.tab-menu .inner-wrap .tab-header { display:table; width:100%; table-layout:fixed; height:44px; background:#fff; border:1px solid #d6d6d6; }
.tab-menu .inner-wrap .tab-header li {transition:all 0.5s; display:table-cell; border-left:1px solid #d6d6d6; color:#161616; font-size:13px; vertical-align:middle; text-align:center; cursor:pointer;}
.tab-menu .inner-wrap .tab-header li:first-child { border-left:none;}
.tab-menu .inner-wrap .tab-header li:hover { background:#f6f6f6;}
.tab-menu .inner-wrap .tab-header li.active { background:#161616; color:#fff; border:1px solid #161616;}
.tab-menu .inner-wrap .tab-header li.active:hover { background:#161616; color:#fff; border:1px solid #161616;}

.tab-menu .inner-wrap .tab-content { width:100%; height:400px; background:#fff; margin-top:16px; border:1px solid #d6d6d6; padding:24px;}
.tab-menu .inner-wrap .tab-content > div { display:none; font-size:13px;}
.tab-menu .inner-wrap .tab-content > div.active { display:block;}


/*■■■별점후기*/
.star-rating-small {  }
.star-rating-small ul { display:inline-block; }
.star-rating-small ul li { margin-right:-3px; display:inline-block; width:12px; height:12px; background:url(../images/component/icon_star_rating_n.png) no-repeat 0 0; background-size:contain; }
.star-rating-small ul li.active { background:url(../images/component/icon_star_rating_s.png) no-repeat 0 0; background-size:contain;  }
.star-rating-small .star-score { padding-top:5px; display:inline-block; height:100%; vertical-align:top; margin-left:4px; font-size:11px;  color:#565656; font-weight:500;}

.star-rating-regular {  }
.star-rating-regular ul { display:inline-block; }
.star-rating-regular ul li { margin-right:-4px; display:inline-block; width:16px; height:16px; background:url(../images/component/icon_star_rating_n.png) no-repeat 0 0; background-size:contain; }
.star-rating-regular ul li.active { background:url(../images/component/icon_star_rating_s.png) no-repeat 0 0; background-size:contain;  }
.star-rating-regular .star-score { padding-top:2px; display:inline-block; height:100%; vertical-align:top; margin-left:6px; font-size:12px;  color:#565656; font-weight:500;}

.star-rating-medium {  }
.star-rating-medium ul { display:inline-block; }
.star-rating-medium ul li { margin-right:-5px; display:inline-block; width:24px; height:24px; background:url(../images/component/icon_star_rating_n.png) no-repeat 0 0; background-size:contain; }
.star-rating-medium ul li.active { background:url(../images/component/icon_star_rating_s.png) no-repeat 0 0; background-size:contain;  }
.star-rating-medium .star-score { padding-top:4px; display:inline-block; height:100%; vertical-align:top; margin-left:6px; font-size:13px;  color:#565656; font-weight:500;}

.star-rating-large {  }
.star-rating-large ul { display:inline-block; }
.star-rating-large ul li { margin-right:-6px; display:inline-block; width:40px; height:40px; background:url(../images/component/icon_star_rating_n.png) no-repeat 0 0; background-size:contain; }
.star-rating-large ul li.active { background:url(../images/component/icon_star_rating_s.png) no-repeat 0 0; background-size:contain;  }
.star-rating-large .star-score { padding-top:10px; display:inline-block; height:100%; vertical-align:top; margin-left:8px; font-size:16px;  color:#565656; font-weight:500;}


.star-rating-insert {  }
.star-rating-insert ul { display:inline-block; }
.star-rating-insert ul li { cursor:pointer; margin-right:-6px; display:inline-block; width:40px; height:40px; background:url(../images/component/icon_star_rating_n.png) no-repeat 0 0; background-size:contain; }
.star-rating-insert ul li.active { background:url(../images/component/icon_star_rating_s.png) no-repeat 0 0; background-size:contain;  }



/*■■■아코디언*/
.accordion { width:328px; height:auto; display:block; }
.accordion .inner-wrap { width:100%; height:auto; display:block; }
.accordion .inner-wrap > ul { width:100%; display:inline-block; border-top:1px solid #e9e9e9; }
.accordion .inner-wrap > ul > li { width:100%; display:inline-block;}
.accordion .inner-wrap > ul > li .accordion-header { width:100%; height:44px; cursor:pointer; position:relative; background:#fff; border-bottom:1px solid #e9e9e9;}
.accordion .inner-wrap > ul > li .accordion-header > p { font-size:14px; line-height:44px; padding-left:16px;}
.accordion .inner-wrap > ul > li .accordion-header > p:after { display:block; content:''; width:24px; height:24px; background:red; position:absolute; right:10px; top:50%; margin-top:-12px; background:url(../images/component/icon_accordion_arrow_down.png) no-repeat 0 0; background-size:contain; }
.accordion .inner-wrap > ul > li .accordion-content { display:none; background:#fff; width:100%; min-height:200px;  border-bottom:1px solid #e9e9e9;}
.accordion .inner-wrap > ul > li .accordion-content > p { padding:16px; font-size:13px; color:#565656; }
.accordion .inner-wrap > ul > li.active .accordion-header > p:after { background:url(../images/component/icon_accordion_arrow_up.png) no-repeat 0 0; background-size:contain;}

.accordion.box-type { width:328px; height:auto; display:block; }
.accordion.box-type .inner-wrap { width:100%; height:auto; display:block; }
.accordion.box-type .inner-wrap > ul { width:100%; display:inline-block; border-top:none;}
.accordion.box-type .inner-wrap > ul > li { width:100%; display:inline-block; border-top:1px solid #e9e9e9;}
.accordion.box-type .inner-wrap > ul > li .accordion-header { width:100%; height:44px; cursor:pointer; position:relative; background:#fff;  border-left:1px solid #e9e9e9; border-right:1px solid #e9e9e9; border-bottom:none; }
.accordion.box-type .inner-wrap > ul > li .accordion-header > p { font-size:14px; line-height:44px; padding-left:16px;}
.accordion.box-type .inner-wrap > ul > li .accordion-header > p:after { display:block; content:''; width:24px; height:24px; position:absolute; right:10px; top:50%; margin-top:-12px; background:url(../images/component/icon_accordion_arrow_down.png) no-repeat 0 0; background-size:contain; }
.accordion.box-type .inner-wrap > ul > li .accordion-content { display:none; width:100%; background:#fff; min-height:200px; margin-bottom:8px;  cursor:pointer; border:1px solid #e9e9e9;}
.accordion.box-type .inner-wrap > ul > li .accordion-content > p { padding:16px; font-size:13px; color:#565656; }
.accordion.box-type .inner-wrap > ul > li.active .accordion-header > p:after { background:url(../images/component/icon_accordion_arrow_up.png) no-repeat 0 0; background-size:contain;}

.accordion.box-type .inner-wrap > ul > li:last-child .accordion-header { border-bottom:1px solid #e9e9e9;}
.accordion.box-type .inner-wrap > ul > li:last-child .accordion-content { border-top:none;}


/*■■■모달레이어*/

/*
.popup {display:inline-block;  display:none; min-width:420px; background:#fff; box-shadow:0px 2px 12px rgba(0,0,0,0.1); overflow:hidden;}
.popup .inner-wrap { display:inline-block; width:100%; height:100%; padding:32px 24px 24px; position:relative;}
.popup .inner-wrap .popup-header { font-size:20px; text-align:center; color:#161616; font-weight:bold; margin-bottom:24px;}
.popup .inner-wrap .popup-content { width:100%; margin-bottom:24px;}
.popup .inner-wrap .popup-close { cursor:pointer; position:absolute; top:16px; right:16px; width:32px; height:32px; opacity:0.8; background:url(../images/component/icon_modal_close.png) no-repeat 0 0; background-size:contain;}
.popup .inner-wrap .popup-close:hover {opacity:1; }
*/


/*■■■슬라이더*/
.slider { width:100%; height:auto;}
.slider .swiper-container { width:100%; height:400px; }
.slider .swiper-container .swiper-wrapper { width:100%; height:100%; position:relative;}
.slider .swiper-container .swiper-wrapper .swiper-slide { width:100%; height:100%;  }
.slider .swiper-container .swiper-wrapper .swiper-slide img { width:100%; height:100%; object-fit:cover;}
.slider .slider-btn-prev { z-index:10;	position:absolute; width:60px; height:60px; cursor:pointer; top:50%; margin-top:-30px; left:32px; background:url(../images/component/icon_slider_prev.png) no-repeat 0 0; background-size:contain;}
.slider .slider-btn-next { z-index:10;	position:absolute; width:60px; height:60px; cursor:pointer; top:50%; margin-top:-30px; right:32px; background:url(../images/component/icon_slider_next.png) no-repeat 0 0; background-size:contain;}
.swiper-container-horizontal >.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom:24px; }
.swiper-pagination-bullet.swiper-pagination-bullet-active { background:#fff; }

.swiper-pagination.swiper-pagination-fraction { font-weight:300; border-radius:50vh; font-size:12px; color:#fff; left:50%; bottom:24px; margin-left:-32px; width:64px; height:24px; line-height:24px; display:inline-block!important; background:rgba(0,0,0,0.4);}
.swiper-pagination.swiper-pagination-fraction > span { font-size:12px; color:#fff; font-weight:300;}

.slider .swiper-container.thumb-type { width:100%; height:100%; margin-top:8px; }
.slider .swiper-container.thumb-type .swiper-slide { width:100px!important; height:100px!important; cursor:pointer;}


/*■■■카테고리 슬라이더*/
.category-slider { padding-left:16px; width:600px; height:40px; background:#fff; border:1px solid #e9e9e9;}
.category-slider .swiper-container { width:100%; height:100%; }
.category-slider .swiper-container .swiper-wrapper { width:100%; height:100%; position:relative;}
.category-slider .swiper-container .swiper-wrapper .swiper-slide { width:auto!important;}
.category-slider .swiper-container .swiper-wrapper .swiper-slide .category { font-size:13px; color:#868686; line-height:40px; padding:0 4px; margin:0 8px; }
.category-slider .swiper-container .swiper-wrapper .swiper-slide .category.active { font-weight:600; color:#161616;}



/*■■■말줄임/줄단위자르기*/
.shortening { width:400px; height:200px; border:2px solid #e9e9e9; background:#fff; }
.shortening .inner-wrap { display:inline-block; width:100%; height:auto; padding:24px; }


/*■■■이미지줌*/
.img-popup img { width:400px;}


/*■■■스위치버튼*/
.btn-switch { width:52px!important; height:32px!important; border:1px solid #d6d6d6; background:#d6d6d6; position:relative; border-radius:16px;}
.btn-switch:after { transition:all 0.5s; display:block; width:28px; height:28px; box-shadow:0 1px 8px rgba(0,0,0,0.1); background:#fff; content:''; border-radius:14px; position:absolute; top:50%; margin-top:-14px; right:2px;}
.btn-switch:hover:after { box-shadow:0 1px 12px rgba(0,0,0,0.3);  }
.btn-switch.inactive { background:#d6d6d6!important; border:1px solid #d6d6d6!important;}
.btn-switch.inactive:after { left:auto!important; left:2px!important; right:auto!important;}