/*

[ 기준 색상 코드 ]
주조색(보라)
	배경 : #4b3863
	텍스트 : #765d95
보조색(민트)
	배경 : #00becc
	텍스트 : #00becc
hover 연한 배경색 : #f6f6f6, #f1f1f1
line : #ddd, #ccc

*/

/* ----- S : layout ----- */
#wrap, header, #header, #container, gnb, #gnb, main, #main, aside, #aside, footer, #footer { box-sizing: border-box; }
#wrap { position: relative; width: 100%; min-width: 768px; height: 100%; overflow: hidden; overflow-x: auto; opacity: 0.4; }
#wrap.fadein { opacity: 1; transition: ease-in-out 0.3s; }

/* header */
header, #header { position: relative; height: 60px; line-height: 60px; color: #fff; background: #4b3863; z-index: 30; }

logo, #logo { float:left; width: 230px; height: 60px; text-align: center; transition: width 0.1s; }
#logo a { display: inline-block; width: 100px; height: 18px; margin-bottom: 3px; vertical-align: middle; }
#logo a > span { display: block; width: 100px; height: 18px; background: url('html_analysis/images/logo.svg') left top no-repeat; transition: background 0.1s; }
.gnb_blind logo, .gnb_blind #logo { width: 55px; transition: 0.1s; }
.gnb_blind logo a, .gnb_blind #logo a { width: 24px; height: 24px; }
.gnb_blind logo a > span, .gnb_blind #logo a > span { width: 24px; height: 24px; background-image: url('/html_analysis/images/e_logo.svg'); transition: background-image 0.1s; }

#container { position: absolute; top: 60px; bottom: 35px; left: 0; right: 0; margin: 0; background-color: #fff; z-index: 20; }

/* gnb */
gnb, #gnb { position: absolute; top: 0; left: 0; bottom: 0; width: 230px; line-height: normal; background: #f1f1f1; border-right: 1px solid #dddddd; box-shadow: 1px 0 3px 1px #eee; /* overflow: hidden; overflow-y:auto; */ z-index: 20; }
nav { height: 100%; }
.gnb_scroll { height: calc(100% - 67px); overflow: hidden; }
/* S : hover scroll bar */
.gnb_scroll:hover { overflow-y: auto; }
.gnb_scroll::-webkit-scrollbar { width: 8px; }
.gnb_scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); }
.gnb_scroll > div, .gnb_scroll > h2 { width: 229px; box-sizing: border-box; }
/* E : hover scroll bar */
.gnb_blind gnb, .gnb_blind #gnb { width: 55px; overflow: hidden; background: #777; }
.gnb_blind gnb h2, .gnb_blind #gnb h2 { margin-top: 0; }

/* main */
main, #main { position: absolute; left: 230px; right: 450px; top: 0; bottom: 0; transition: 0.1s; }
main.ahide, #main.ahide { right: 0; overflow-y: auto; }
main.ahide #btn_aside, #main.ahide #btn_aside { display: none; }
.gnb_blind main, .gnb_blind #main { left: 55px; }
.aside_blind main, .aside_blind #main { right: 0; transition: 0.1s; }

.main_top { position: relative; z-index: 10; }
.main_body { position: relative; width: 100%; height: 100%; padding-top: 20px; box-sizing: border-box; }
.main_body.pt0 { padding-top: 0; }
.js_list_detail.main_body { position: relative; height: calc(100% - 54px); }
.js_list_detail.main_body > form { height: 100%; }
.scrollarea { position: relative; height: 100%; }
.scrollarea.ttab { height: calc(100% - 55px); }
.scrollarea.list1 { height: calc(100% - 147px); }
.scrollarea.list2 { height: calc(100% - 187px); }
.scrollarea.dictionary { height: calc(100% - 283px); }
.wrap_scroll { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 20px 30px 50px; overflow: hidden; overflow-y: auto; }
.wrap_visual { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; overflow-y: auto; }


/* aside */
aside, #aside { position: absolute; top: 0; right: 0; bottom: 0; width: 450px; background: #f1f1f1; border-left: 1px solid #dddddd; box-shadow: -1px 0 3px 1px #eee; overflow: hidden; overflow-y: auto; z-index: 20; transition: opacity 0.4s; }
.aside_blind aside, .aside_blind #aside { width: 0; opacity: 0; transition: opacity 0.1s; }

/* footer */
footer, #footer { position: absolute; bottom: 0; right: 0; width: 100%; height: 35px; line-height: 34px; color: #8a8a8a; background: #fff; padding:0 30px; font-size: 11px; letter-spacing: 0; border-top: 1px solid #dddddd; z-index: 30; }
fnb, #fnb { float: right; }

/* layout btn flexible */
#btn_gnb { float:left; width: 60px; height: 60px; color: #efe8f7; background: #4b3863; text-align: center; border-right: 1px solid #5d4c73; box-shadow: 1px 0 3px 1px #423258 inset; cursor: pointer; }
#btn_gnb:hover { color: #fff; background: #3d2d51; }
#btn_aside { position: absolute; top: 30px; right: 0; line-height: 0; background: #fff; padding: 9.5px 6px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd; border-top-left-radius: 3px; border-bottom-left-radius: 3px; cursor: pointer; z-index: 30; }
#btn_gnb span, #btn_aside span { display: none; overflow: hidden; text-indent: -9999px; font-size: 0px; }

/* ----- E : layout ----- */






/* heading */
h1 { /* header title */ }
h2 { /* gnb wrap */ }
h3 { color: #333; padding-bottom: 24px; font-size: 18px; font-family: 'NanumSquareRound'; font-weight: 700; }
h3 em { color: #777; font-size: 16px; font-weight: 400; }
.wrap_aside h3 { padding-bottom: 0; border-bottom: 0; }
h4 { padding-bottom: 10px; font-size: 15px; font-weight: 700; }
h5 { float: left; width: 110px; font-size: 14px; font-weight: 700; }
h6 { display: inline-block; position: relative; width: 285px; line-height: 20px; color: #765d95; margin-left: 12px; padding: 7px 0 0 8px; font-size: 15px; font-family: 'NanumSquareRound'; font-weight: 700; }
h6::before { content: ''; position: absolute; left: 0; top: 13px; width: 4px; height: 7px; background: url('/html_analysis/images/common.png') -82px top no-repeat; }
h6 em { font-size: 13px; font-weight: 400; }



/* header */
.wrap_headerl { display: inline-block; width: calc(100% - 430px); }
h1 { display: inline-block; margin-left: 20px; font-size: 19px; font-family: 'NanumSquareRound'; font-weight: 700; letter-spacing: 0; }
.util { float: right; width: 400px; color: #efe8f7; margin-right: 30px; text-align: right; }
.util a.adddata { color: #00becc; margin-right: 16px; text-decoration: underline; font-weight: 700; }
.util > span,
.util > i.fa-user-circle { cursor: pointer; }
.util > span:hover,
.util > i.fa-user-circle:hover { color: #fff; }
.util em { display: inline-block; width: auto; max-width: 130px; height: 60px; text-align: right; vertical-align: top; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; }
.util i { vertical-align: middle; }
.util .fa-angle-down { color: #999; padding: 0 8px; }

.pop_util { display: none; position: absolute; top: 55px; right: 30px; width: 330px; color: #777; background: #fff; line-height: 20px; border-radius: 3px; box-shadow: 1px 1px 3px 1px #777; }
.pop_util::before { content: ''; position: absolute; top: -12px; right: 7px; margin-left: -6px; border-width: 6px; border-style: solid; border-color: transparent transparent #fff transparent ; }
.pop_util .info { padding: 26px 30px; border-bottom: 1px solid #ddd; }
.pop_util .info > span { display: inline-block; width: 65%; word-break: break-all; letter-spacing: 0; }
.pop_util .info > span strong { color: #333; font-weight: 800; }
.pop_util .info a { float: right; margin-top: 3px; }
.pop_util .data { padding: 20px 30px 30px 30px; }
.pop_util .data > dl { line-height: 28px; margin-bottom: 10px; }
.pop_util .data dt { float: left; }
.pop_util .data dd { text-align: right; }
.pop_util .data dd strong { color: #00becc; font-size: 15px; font-weight: 800; }
.pop_util .list_util { width: 100%; }
.pop_util .list_util > li { border-top: 1px solid #ddd; }
.pop_util .list_util a { display: block; line-height: 50px; color: #777; padding:0 30px; font-weight: 700; }
.list_util a:hover { background: #f6f6f6; }
.list_util a i { margin-right: 10px; }


/* gnb */
.btnarea_collect { margin-bottom: 20px; padding: 18px 30px; border-bottom: 1px solid #ddd; }
#gnb .btn_violet_round.on { color: #01d6e6; }
h2 { display: inline-block; width: 100%; }
h2 > a { display: block; color: #777; padding: 0 30px; line-height: 50px; font-size: 16px; font-family: 'NanumSquareRound'; font-weight: 700; }
h2 > a i { font-size: 12px; margin-right: 10px; }
h2 > a span { position: relative; color: #777; }
h2 > a span::after { content: ''; display: inline-block; position: absolute; top: -2px; right: -12px; width: 6px; height: 6px; background: #00becc; border-radius: 6px; }
h2 > a.on { color: #fff; background: #00becc; }
h2 > a.on span { color: #fff; }
h2 > a.on span::after { background: #fff; }
h2 > a .fa-angle-down { float: right; line-height: 50px; margin-right: 0; }
.smenu { display: block; margin: 6px 30px 14px 52px; }
.smenu a { display: block; line-height: 36px; color: #777; font-size: 15px; font-family: 'NanumSquareRound'; font-weight: 700; border-top: 1px solid #ddd; cursor: pointer; }
.smenu a.on { color: #00becc; font-weight: 800; }
.smenu li:first-child a { border-top: none; }
.smenu a i { display: none; }
#gnb .btnarea_stickyb { position: sticky; left: 0; right: 0; bottom: 35px; background: #f1f1f1; padding: 16px 30px 16px 30px; border-top: 1px solid #ddd; }
#gnb .btnarea_stickyb .btn { width: 100%; border-radius: 38px; box-sizing: border-box; }
/* gnb hover */
h2 > a:hover, h2 > a:hover span { color: #333; background: #ebebeb; }
h2 > a.on:hover, h2 > a.on:hover span { color: #fff; background: #00becc; }
.smenu a:hover { color: #333; }
.smenu a.on:hover { color: #00becc; }
/* gnb closed */
.gnb_blind #gnb nav,
.gnb_blind #gnb .btnarea_collect,
.gnb_blind #gnb .smenu,
.gnb_blind #gnb .smenu a { display: inline-block; border-top: 0; }
.gnb_blind #gnb .btnarea_collect { float: left; }
.gnb_blind #gnb .btn_violet_round.collect i,
.gnb_blind #gnb .btnarea_stickyb a i,
.gnb_blind #gnb a.not_smenu,
.gnb_blind #gnb .smenu,
.gnb_blind #gnb .smenu i { margin: 0; }

.gnb_blind #gnb .btnarea_collect,
.gnb_blind #gnb .btnarea_collect a,
.gnb_blind #gnb .btnarea_stickyb,
.gnb_blind #gnb .btnarea_stickyb a,
.gnb_blind #gnb a.not_smenu,
.gnb_blind #gnb .smenu a { line-height: 0; margin: 0; padding: 0; font-size: 0; border: 0; border-radius: 0; }
.gnb_blind #gnb h2 > a { display: none; }

.gnb_blind #gnb .btnarea_collect a,
.gnb_blind #gnb .btnarea_stickyb a,
.gnb_blind #gnb a.not_smenu,
.gnb_blind #gnb .smenu a { float:left; width: 55px; color: #fff; background: #777; text-align: center; border-bottom: 1px solid #888; }
.gnb_blind #gnb .btnarea_collect i,
.gnb_blind #gnb .btnarea_stickyb i,
.gnb_blind #gnb a.not_smenu i,
.gnb_blind #gnb .smenu i { display: block; line-height: 15px; padding: 22px 0; font-size: 15px; }

.gnb_blind #gnb .btnarea_collect a:hover,
.gnb_blind #gnb a.not_smenu:hover,
.gnb_blind #gnb .smenu a:hover { color: #01d6e6; background: none; }
.gnb_blind #gnb .btnarea_collect a.on,
.gnb_blind #gnb .smenu a.on { color: #fff; background: #00becc; }

.gnb_blind #gnb .btnarea_stickyb { position: absolute; bottom: 0; background: none; }
.gnb_blind #gnb .btnarea_stickyb a { background: rgba(255,255,255,.2); }
.gnb_blind #gnb .btnarea_stickyb a:hover { color: #01d6e6; background: rgba(255,255,255,.1); }

.gnb_blind .gnb_scroll { height: calc(100% - 60px); }
.gnb_blind .gnb_scroll > div, .gnb_blind .gnb_scroll > h2 { width: 55px; }



/* footer */
footer {font-family: 'Nanum Gothic';}
footer p, #footer p { float: left;}
footer p a, #footer p a { color: #f58220; font-weight: 700; }
footer p a:hover, #footer p a:hover { text-decoration: underline; }
fnb a, #fnb a { color: #777; }
fnb a:hover, #fnb a:hover { color: #333; text-decoration: underline; }
fnb a.red, #fnb a.red { color: #e74a2b; font-weight: 700; }
fnb a strong, #fnb a strong { color: #00becc; font-weight: 700; }
fnb a:hover strong, #fnb a:hover strong { text-decoration: underline; }
i.line { display: inline-block; width: 1px; height: 8px; background: #ddd; margin: 0 12px; vertical-align: middle; }



/* common */
.wrapper { width: 100%; max-width: 1170px; margin: 0 auto; box-sizing: border-box; }

.searcharea { padding: 30px 30px 0 30px; }
.search_input { display: inline-block; width: 460px; }
.search_input > input[type="text"],
.paylist .search_input > span input[type="text"] { float: left; width: 200px; border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; font-weight: 400; }
.search_input > a,
.paylist .search_input > span a { float: left; line-height: 32px; color: #ccc; padding: 0 10px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.search_input > a i,
.paylist .search_input > span a i { font-size: 1.143em; }
.search_input span { float: left; line-height: 34px; color: #333; margin-left: 10px; font-weight: 700; }
.search_input span b { color: #00becc; margin-left: 8px; font-weight: 800; }
.search_input span b::after { content: '/'; display: inline-block; color: #ccc; padding: 0 3px 0 6px; font-weight: 400; }
.searcharea.paylist { padding: 20px 30px 0; }
.paylist .search_input { display: inline-block; width: calc(100% - 100px); }
.paylist .search_input input#sword { width: 160px; margin-left: 20px; border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.paylist .search_input .termarea { float: left; }
.paylist .search_input .termarea input[type="text"] { width: 110px; }
.paylist .search_input em { line-height: 34px; }
.paylist .search_input > span { margin-left: 0; }
.list_view { float: right; }
.list_view .fa-bars { float: left; line-height: 34px; margin-right: 6px; vertical-align: middle; }
.list_view select { float: left; }

.datasearcharea { overflow:hidden;}
.datasearcharea h3 { float: left; }
.datasearch_r { float: right; }
.datasearch_r form[name="selectChannel"] { float: left; }
.datasearch_r .datasearchbox { float: left; margin-right: 4px; }
.datasearch_r form[name="sfrm"] { float: left; }
.datasearch_r .search_input { float: left; width: 237px; }


.boxcont { position: relative; float: left; width: 100%; line-height: 34px; padding: 30px 0; border-top: 1px solid #aaa; }
.boxcont.tline { border-top: 2px solid #765d95; }
.boxcont.noline { margin-bottom: 50px; }
.boxcont.mb0 { margin-bottom: 0; }
.wrap_boxcont { float: left; width: calc(100% - 110px); vertical-align: top; }
.wrap_boxcont .rtop { position: absolute; top: 30px; right: 0; }
.wrap_boxcont ul li { float: left; margin-right: 30px; line-height: 24px; }
.wrap_boxcont ul li:last-of-type { margin-right: 0; }
.wrap_boxcont ul li.line { line-height: 36px; }
.wrap_boxcont .detail { display: inline-block; width: 100%; }
.wrap_boxcont .detail ul { float: left; width: calc(50% - 30px); margin-top: 12px; padding-top: 12px; border-top: 1px dashed #eee; }
.wrap_boxcont .detail ul:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.wrap_boxcont .detail ul:nth-of-type(even) { clear: both; }
.wrap_boxcont .detail ul:nth-of-type(2n+3) { padding-left: 60px; }
.wrap_boxcont .detail ul.w100p { float: none; width: 100%; }
.wrap_boxcont .detail ul li:first-child { width: 100%; }
.wrap_boxcont .detail ul li:first-child h6 { width: 100%; margin-left: 0; padding: 0 0 0 12px; box-sizing: border-box; }
.wrap_boxcont .detail ul li:first-child h6::before { top: 5px; }
.wrap_boxcont .detail ul li label { padding-left: 22px; text-indent: -22px; line-height: 20px; }
.wrap_boxcont .keyword_input input[type="text"] { display: block; width: 50%; margin-bottom: 4px; vertical-align: top; }
.wrap_boxcont .keyword_input input[type="text"]:first-of-type { display: inline-block; }
.wrap_boxcont #seldict { display: block; width: 100%; padding-top: 5px; clear: both; }
.wrap_boxcont #seldict > .disinblock { width: 70%; }
.wrap_boxcont #seldict select { width: 100%; margin-top: 5px; vertical-align: inherit; box-sizing: border-box; }
.boxcont_input { display: inline-block; float: left; }
.boxcont_input input[type="radio"] + label,
.boxcont_input.checkbtn input[type="checkbox"] + label { float: left; width: 100px; line-height: 32px; background: #f6f6f6; text-align: center; border: 1px solid #ddd; }
.boxcont_input input[type="radio"] + label:hover,
.boxcont_input.checkbtn input[type="checkbox"] + label:hover { color: #765d95; background: #f1f1f1; }
.boxcont_input input[type="radio"]:checked + label,
.boxcont_input input[type="radio"]:checked + label:hover,
.boxcont_input.checkbtn input[type="checkbox"]:checked + label,
.boxcont_input.checkbtn input[type="checkbox"]:checked + label:hover { color: #fff; background: #765d95; border-color: #4b3863; }
.boxcont_input input[type="radio"] + label span,
.boxcont_input.checkbtn input[type="checkbox"] + label span { display: none; }
.boxcont_input input.first + label { border-top-left-radius: 3px; border-bottom-left-radius: 3px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.boxcont_input input.last + label { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.boxcont_input input.alone + label { margin-right: 10px; border-radius: 3px; }
.boxcont_input.checkbtn input[type="checkbox"]:disabled + label { opacity: 0.8; }
.boxcont_input.pay_period { margin: 5px 31px 0 0; }
.boxcont_input.pay_period input[type="radio"] + label { width: 58.5px; line-height: 40px; }
.boxcont_cont { clear: both; padding-top: 10px; }
.boxcont_cont .keyword { display: inline-block; width: 50%; }
.boxcont_cont .option { display: inline-block; width: 30%; min-width: 100px; }

.btnarea_mainb { display: inline-block; width: 100%; padding: 80px 0 30px; text-align: center; border-top: 2px solid #765d95; }
.btnarea_mainb .guide { text-align: left; }
.btnarea_mainb .btn_violet_round { display: inline-block; width: 40%; min-width: 360px; }

.nonedata { color: #a9a6be; background: #f4f4f4; padding: 80px 30px; text-align: center; letter-spacing: 0; box-sizing: border-box; }
.nonedata i.bg { color: #e7e6f1; margin-bottom: 12px; font-size: 80px; }
.nonedata i.sm { font-size: 60px; }

.disapprove { position: relative; }
.disapprove::after { content: '승인 후 이용 가능합니다.'; position: absolute; left: 0; bottom: 0; width: 100%; color: #444; background: rgba(241,241,241,.6); font-size: 16px; font-weight: 700; box-sizing: border-box; text-align: center; line-height: 24px; }
.disapprove a:not(.active > a) { opacity: 0.6; pointer-events: none; cursor: default; }
#gnb .disapprove::after { height: calc(100% - 92px); padding: 230px 20px; }
.aside_stickyb.disapprove::after { height: 100%; padding: 30px; line-height: 38px; }


/* chatbot */
.chatbot .disnone { display: none; }
.chatbot { position: absolute; left: 30px; bottom: 64px; min-width: 68px; min-height: 38px; z-index: 100; transition: left .2s; }
.gnb_blind .chatbot { left: 85px; }
.chatbot .btn.btn_ctb { position: absolute; left: 0; bottom: 0; height: 36px; background: #3d2d51; line-height: 36px; font-weight: 700; box-shadow: 0px 0px 8px rgba(0,0,0,0.2); }
.chatbot .btn.btn_ctb:hover { color: #01d6e6; background: #302144; }
.widget { display: none; position: fixed; top: 50%; transform: translateY(-50%); width: 320px; height: 640px; background: #fff; border-radius: 3px; box-shadow: 0px 0px 8px rgba(0,0,0,0.2); }
.wdg_tit { height: 48px; color: #fff; background: #4b3863; padding-left: 16px; line-height: 48px; font-size: 15px; font-family: 'NanumSquareRound'; font-weight: 700; border-radius: 3px 3px 0 0; }
.wdg_tit > a { float: right; width: 48px; color: #fff; text-align: center; }
.wdg_body { height: calc(100% - 48px); }
.wdg_body > div { border-width: 1px 1px 0 1px; border-style: solid; border-color: #ccc; box-sizing: border-box; }

.wdg_body .dialog { height: calc(100% - 89px); background: #f6f6f6; padding: 16px; overflow: hidden; overflow-y: auto; }
.wdg_body .dialog div { margin-top: 16px; }
.wdg_body .dialog div:first-of-type { margin-top: 0; }
.wdg_body .dialog .chat_t { padding-left: 16%; }
.wdg_body .dialog .chat_t i { float: left; width: 34px; height: 34px; background: #765d95; margin-left: -19%; line-height: 34px; 
text-align: center; vertical-align: top; border-radius: 40px; }
.wdg_body .dialog div[class *="chat_"] span { display: inline-block; max-width: 84%; margin-top: 4px; padding: 8px 14px; line-height: 20px; box-sizing: border-box; word-break: keep-all; }
.wdg_body .dialog div[class *="chat_"] span:first-of-type { margin-top: 0; }
.wdg_body .dialog .chat_t span { color: #333; background: #fff; border: 1px solid #ddd; border-radius: 18px; }
.wdg_body .dialog .chat_t span:first-of-type { border-top-left-radius: 3px; }
.wdg_body .dialog .chat_i { text-align: right; }
.wdg_body .dialog .chat_i span { color: #fff; background: #765d95; text-align: left; border-radius: 18px 18px 3px 18px; }

.wdg_body .recommend { position: relative; line-height: 40px; background: #f1f1f1; }
.wdg_body .recommend::before{ content:''; position:absolute; z-index:1; top:0; bottom:0; left:0; width: 16px;
	background: -webkit-linear-gradient(90deg, #f1f1f1 0%, transparent 100%);
	background: -o-linear-gradient(90deg, #f1f1f1 0%, transparent 100%);
	background: linear-gradient(90deg, #f1f1f1 0%, transparent 100%); }
.wdg_body .recommend::after{ content:''; position:absolute; z-index:1; top:0; bottom:0; right:0; width: 16px;
	background: -webkit-linear-gradient(90deg, transparent 0%, #f1f1f1 100%);
	background: -o-linear-gradient(90deg, transparent 0%, #f1f1f1 100%);
	background: linear-gradient(90deg, transparent 0%, #f1f1f1 100%); }
.wdg_body .recommend .wrap_rc { display: flex; padding: 2px 16px; overflow: hidden; overflow-x: auto; }
/* S : hover scroll bar */
.wdg_body .recommend .wrap_rc:hover { overflow-x: auto; }
.wdg_body .recommend .wrap_rc::-webkit-scrollbar { height: 3px; }
.wdg_body .recommend .wrap_rc::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); }
/* E : hover scroll bar */
.wdg_body .recommend .wrap_rc > span { display: inline-block; position: relative; color: #fff; background: #aaa; margin: 2px 4px 2px 0; padding: 0 16px; line-height: 32px; word-break: keep-all; border-radius: 30px; cursor: pointer; transition: .3s; }
.wdg_body .recommend .wrap_rc > span:hover { background: #00becc; }
.wdg_body .recommend .wrap_rc > span:last-of-type::after { content: ''; position: absolute; right: -16px; width: 16px; height: 100%; }

.wdg_body .message { height: 48px; border-width: 1px 1px 1px 1px; border-radius: 0 0 3px 3px; }
.wdg_body .message > input { width: calc(100% - 48px); height: 46px; padding: 0 16px; line-height: 46px; border: 0; }
.wdg_body .message > a { float: right; width: 48px; height: 46px; color: #01d6e6; background: #fff; line-height: 46px; text-align: center; font-size: 18px; }



/* collect */
.wrap_boxcont .list_ch li { margin-right: 0; }
#unit_collect.user_disabled h5,
#unit_collect.user_disabled .boxcont_input,
#unit_collect.user_disabled .boxcont_cont { opacity: 0.5; }
#unit_collect.user_disabled span.guide { color: #e74a2b; }
.list_ch { width: 100%; }
.list_ch li { width: 100%; padding: 20px 0; border-bottom: 1px solid #ddd; }
.list_ch li img { vertical-align: top; margin-right: 16px; }
.list_ch li.alone { float: left; width: 25%; box-sizing: border-box; }
.list_ch li.alone span input[type="checkbox"] + label { min-width: 116px; }
.list_ch li.empty { line-height: 36px; }
.list_ch li .ch_child_wrap { display: inline-block; }
.list_ch li span.ch_child { display: inline-block; margin-left: 50px; }
.list_ch li span.ch_child input + label { margin-right: 30px; }
.list_ch li span.disable_span { display: inline; }
.list_ch li span.disable_span input + label { margin-right: 30px; }
.list_ch li span.guide { margin-left: 135px; }
/* .list_ch.costom li { width: calc(100% + 110px); } */
.list_ch.costom li span.guide { margin-left: 0; padding: 10px 30px; }
.list_ch.costom li span.ch_child { width: calc(100% - 150px); margin-left: 14px; }
.list_ch.costom li:last-child { border-bottom: 0; }
.termarea i { float: left; line-height: 34px; color: #aaa; margin-right: 10px; font-size: 19px; }
.termarea input[type="text"] { float: left; width: 20%; margin-bottom: 4px; }
.termarea em { float: left; color: #aaa; padding: 0 10px; }
.termarea span { display: inline-block; margin-left: 4px; }
/* sentiment */
#sentiment .btnarea_float.count3_space a[onclick ="return false;"] { color: #bbb; background: #f6f6f6; border-color: #ddd; cursor: default; }
/* matrix */
#matrix .btnarea_result.count2 a[onclick ="return false;"] { color: #bbb; background: #f6f6f6; border-color: #ddd; cursor: default; }
/* concor */
#concor .btnarea_result.count2 a[onclick ="return false;"] { color: #bbb; background: #f6f6f6; border-color: #ddd; cursor: default; }
/* Visualization */
.tab01.visual .tooltip_info { float: right; margin-top: 15px; }
.visualarea { margin-bottom: 60px; padding: 30px 0 60px; border-top: 2px solid #765d95; border-bottom: 1px solid #aaa; }
.visualarea .info { display: inline-block; width: 190px; padding-right: 30px; }
.visualarea .info h3 { padding: 20px 0 0 0; }
.visualarea .info .file_input { width: 100%; margin-bottom: 4px; }
.visualarea .info a { margin-bottom: 4px; }
.visualarea .sample { display: inline-block; width: calc(100% - 256px); padding-left: 30px; vertical-align: top; border-left: 1px dashed #ddd; }
.visualarea .sample .w100p { width: 100%; max-width: 891px; }
.visualarea .sample .file_input_route { width: 100%; max-width: 891px; }
.visualarea .info img { width: 186px; height: 158px; border: 1px solid #ddd; box-sizing: border-box; }
.visualarea .sample img { width: 100%; max-width: 893px; border: 1px solid #ddd; box-sizing: border-box; }
.list_dl { line-height: 24px; margin: 10px 0 20px 0; }
.list_dl dt { float: left; width: 44px; font-weight: 700; }
.list_dl dt::after { content: ':'; float: right; margin-right: 10px; }
.wrap_scroll_l { float: left; width: calc(100% - 451px); height: 100%; padding: 30px; overflow: hidden; overflow-y: auto; box-sizing: border-box; }
.visual_ahide .wrap_scroll_l { width: 100%; }
.wrap_scroll_r { float: right; width: 450px; height: 100%; background: #f1f1f1; border-left: 1px solid #dddddd; overflow: hidden; overflow-y: auto; box-sizing: border-box; z-index: 20; }
.wrap_scroll_r .wrap_aside { height: 100%; box-sizing: border-box; }

/* dictionary */
.changearea { line-height: 34px; background: #f6f6f6; padding: 20px 30px; border-top: 1px solid #ddd; border-bottom: 1px solid #ccc; clear: both; }
.wrap_change { width: 80%; margin: 0 auto; text-align: left; }
.wrap_change .left { display: inline-block; width: 50%; }
.wrap_change .right { float: right; width: 50%; }
.changearea input[type="text"] { width: 70%; vertical-align: top; }
.changearea .fa-long-arrow-alt-right { width: calc(30% - 6px); color: #765d95; text-align: center; vertical-align: middle; font-size: 22px; }
.changearea a.add { display: inline-block; line-height: 32px; color: #aaa; background: #f1f1f1; margin-left: 4px; padding: 0 10px; vertical-align: top; border: 1px solid #ddd; border-radius: 3px; }
.changearea .violet { width: calc(30% - 6px); margin-left: 4px; box-sizing: border-box; }
/* pay */
.pay h3 { padding-bottom: 15px; font-size: 16px; }
.pay h3 em {float: none; color: #777; padding-left: 0; font-size: 18px; font-family: 'Nanum Gothic'; font-weight: 400; }
.box_pay { display: inline-block; position: relative; width: 49%; background: #f6f6f6; padding: 20px; border: 1px solid #ddd; border-radius: 3px; box-sizing: border-box; }
.box_pay h1 { color: #333; margin: 0; font-size: 20px; }
.box_pay h1 strong { font-weight: 800; }
.box_pay h1 em { display: block; color: #777; margin-top: 14px; font-size: 13px; font-family: 'Nanum Gothic'; font-weight: 400; }
.box_pay h1 b { display: block; color: #777; margin-bottom: 14px; font-size: 13px; font-family: 'Nanum Gothic'; font-weight: 400; }
.box_pay .btn_pay { position: absolute; bottom: 20px; right: 20px; }
.box_pay .btn_pay { display: inline-block; width: 80px; line-height: 52px; color: #fff; background: #00becc; text-align: center; font-weight: 700; border-radius: 3px; }
.box_pay .btn_pay.violet { color: #fff; background: #765d95; }
.box_pay .btn_pay.grey { color: #fff; background: #777; }
.box_pay .btn_pay:hover { background: #00b6c3; }
.box_pay .btn_pay.violet:hover { background: #684e89; }
.box_pay .btn_pay.grey:hover { background: #6c6c6c; }
.box_pay .price { display: block; float: right; margin-right: 100px; text-align: right; }
.box_pay .price em { display: block; margin-bottom: 6px; font-size: 18px; text-decoration: line-through; }
.box_pay .price i { color: #fff; background: #aaa; margin-right: 6px; padding: 5px 8px 5px 12px; font-size: 15px; font-style: normal; border-radius: 30px; }
.box_pay .price i.fa-long-arrow-alt-down { font-size: 13px; padding: 0 0 0 2px; }
.box_pay .price strong { font-size: 24px; font-weight: 800; }
.box_pay .price strong.notsale { display: block; line-height: 52px; }
/*.box_pay.costom { width: 32%; } 기존 주석 풀지X*/
.bg_pay { width: calc(100% + 60px); height: 177px; background: #ede7f9 url('/html_analysis/images/pay_bg.jpg') no-repeat top; margin: -40px 0 0 -30px; }
.wrap_pinput { overflow: hidden; width: 90%; max-width: 660px; margin: auto; padding-top: 37px; font-family: 'NanumSquareRound'; }
.wrap_pinput > div { float: left; overflow: hidden; width: calc(100% - 146px); }
.wrap_pinput > div > div { overflow: hidden; }
.wrap_pinput h3 { float: left; color: #777; padding-bottom: 0; line-height: 48px; }
.wrap_pinput h3 > i { margin-right: 4px; }
.wrap_pinput h3 em { color: #333; font-size: 20px; font-weight: 700; }
.wrap_pinput h3 span { font-weight: 400; }
.wrap_pinput .btn_pay { float: right; width: 116px; height: 100px; background: #aaa; margin-top: 3px; line-height: 100px; }
.pay_input { display: inline-block; text-align: center; width: 242px; background: #fff; font-size: 22px; border-radius: 2px ; box-shadow: -1px 0 3px 1px #eee; padding: 7px 0; }
.pay_input input { border: none; width: calc(100% - 99px); border-right: 1px solid #ddd; border-left: 1px solid #ddd; text-align: center; color: #000; font-weight: 700; }
.pay_input a { color: #765d95; padding: 10px 18px; vertical-align: middle; font-size: 14px; font-weight: 800; }
.pay_input a:hover { color: #00becc; }
.pay_input + span { display: inline-block; width: 28px; text-align: right; }

/* .pricearea { overflow: hidden; }
.pricecover{ display: block; width: 100%; margin: auto; } */
.wrapper .price { float: left; width: 50%; text-align: right; padding-left: 60px; font-family: 'NanumSquareRound'; box-sizing: border-box; }
.wrapper .price:first-of-type { padding-left: 0; padding-right: 60px; border-right: 1px solid #ddd; }
.wrapper .price span.sale { display: block; clear: both; color: #fff; background: #aaa; margin-top: 24px; padding: 5px 16px; text-align: center; font-size: 14px; font-weight: 700; border-radius: 50px; }
.wrapper .price input { width: 80%; text-align: right; border: none; }
.wrapper .price .floatl { width: 40%; text-align: left; }
.wrapper .price .floatr { width: 60%; line-height: 42px; }
.wrapper .price .floatr input { text-decoration: line-through; }
.wrapper .lprice { float: right; width: 60%; color: #765d95; margin-top: 50px; }
.wrapper .lprice input { font-size: 35px; font-weight: 700; }

.calcarea { position: relative; z-index: 100; font-family: 'NanumSquareRound'; }
.calcarea .btn_calc { display: none; position: absolute; top: 21px; right: -30px; background: #765d95; color: #fff; padding: 10px 20px 10px 12px; border-top-left-radius: 50px; border-bottom-left-radius: 50px; box-shadow: 0 0 4px 0 rgba(0,0,0,.2); }
.calcarea .btn_calc i { display: inline-block; margin: 0 8px 0 4px; vertical-align: middle; }
.calcarea .btn_calc span { display: inline-block; margin: 3px 0; vertical-align: middle; line-height: 18px; font-weight: 700; }
.calcarea .calc { position: absolute; top: 28px; right: -3px; }
.calcarea .btn_close { position: absolute; top: -10px; right: -10px; }
.calcarea .btn_close i { font-size: 26px;right: 0;color: #765d97; }
.calcarea .box_calc { background: #f6f6f6; text-align: center; padding: 20px 24px; border: 1px solid #ddd; box-shadow: 0 0 4px -1px rgba(0,0,0,.1); }
.calcarea .box_calc > input { width: 120px; color: #00a1ad; text-align: right; font-weight: 700; }
.calcarea .box_calc > div { margin-top: 15px; line-height: 24px; }
.calcarea .box_calc ul { width: 100%; text-align: left; letter-spacing: 0; }
.calcarea .box_calc li { cursor: pointer; }
.calcarea .box_calc li:hover { color: #333; }
.calcarea .box_calc i { padding-right: 4px; font-size: 12px; }
.calcarea .box_calc .select,
.calcarea .box_calc .select:hover,
.calcarea .box_calc .select i { color: #00a1ad; }

.pay .guide em { display: block; padding-left: 20px; text-indent: 4px; }
.pay .guide em::before { content: 'ㆍ'; display: inline-block; margin-left: -20px;}
.pay .guide b { display: inline-block; }




/* aside */
.wrap_aside { padding: 30px; box-sizing: border-box; }
.wrap_aside .file_input label { background: #fff; border-radius: 0; }
.wrap_aside .file_input label:hover { background: #f9f9f9; }
.wrap_aside .file_input label.first { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.wrap_aside .file_input label.last { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.wrap_aside .file_input_route { float: left; width: 100%; }
.wrap_aside .tab02_cont .file_input label { background: #f6f6f6; }
.wrap_aside .tab02_cont .file_input label:hover { background: #f1f1f1; }

.aside_stickyb { position: sticky; right: 0; bottom: 0; background: #f1f1f1; padding: 30px; border-top: 1px solid #ddd; }
.resultarea {  }
.resultarea .state { line-height: 21px; }
.boxresult h4{ display: inline-block; width: 49%; padding: 0 0 8px 0; }
.boxresult h6 { width: 49%; color: #777; margin-left: 0; padding: 0 0 8px 10px; vertical-align: middle; font-family: 'Nanum Gothic'; letter-spacing: 0; box-sizing: border-box; }
.boxresult h6::before { top: 7px; background-position: -87px top; }
.boxresult h6.w100p { width: 100%; }
.boxresult.btnbig h4,
.boxresult.btnbig h6 { width: 37%; }
.boxresult ul { display: block; }
.boxresult ul li { display: inline-block; width: 100%; padding-top: 10px; }
.boxresult ul li:first-child { padding-top: 0; }
.btnarea_result { display: inline-block; width: 50%; vertical-align: middle; }
.btnarea_result a { float: left; line-height: 32px; color: #777; background: #fff; text-align: center; border: 1px solid #ddd; box-sizing: border-box; }
.btnarea_result a:hover { color: #765d95; background: #f9f9f9; }
.btnarea_result a.on { color: #fff; background: #765d95; border-color: #4b3863; }
.btnarea_result a.first { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.btnarea_result a.last { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.btnarea_result a.alone { width: 100%; border-radius: 3px; }
.boxresult.btnbig .btnarea_result { width: 61%; }
.btnarea_result.count2 a { width: 50%; }
.btnarea_result.count3 a { width: 33%; }
.btnarea_result.count3 a:nth-child(2) { width: 34%; }
.btnarea_float.count3_space a,
.btnarea_result.count3_space a { width: 32%; }
.btnarea_float.count3_space .alone,
.btnarea_result.count3_space .alone { width: 31%; margin-left: 10px; padding: 0; }
.btnarea_float.count3_keyword .alone { width: 31%; margin-left: 10px; padding: 0; }

/* .boxresult .topic li { padding-bottom: 10px; border-top: 1px solid #ddd; }
.boxresult .topic li:first-child { border-top: 0; } */
.boxresult .topic li.line { border-top: 1px solid #ddd; }
.boxresult .topic li > span,
.boxresult li > span.topic { display: inline-block; width: 61%; }
.boxresult .topic li > span input[type="text"],
.boxresult li > span.topic input[type="text"] { width: calc(100% - 18px); text-align: right; }
.boxresult .topic li > span.guide { float: right; width: 61%; }
.boxresult .topic .boxcont_input { float: none; width: 61%; vertical-align: middle; }
.boxresult .topic .boxcont_input input[type="radio"] + label,
.boxresult .topic .boxcont_input.checkbtn input[type="checkbox"] + label { width: 50%; box-sizing: border-box; }
.boxresult .topic .boxcont_input input[type="radio"]:checked + label,
.boxresult .topic .boxcont_input input[type="radio"]:checked + label:hover,
.boxresult .topic .boxcont_input.checkbtn input[type="checkbox"]:checked + label,
.boxresult .topic .boxcont_input.checkbtn input[type="checkbox"]:checked + label:hover { background: #999; border-color: #999; }

.btnarea_sample { display: block; }
.btnarea_sample.disinblock { display: inline-block; }
.btnarea_sample a { color: #777; font-size: 13px; }
.btnarea_sample a:hover { color: #765d95; text-decoration: underline; }
.btnarea_sample a:before { content: ','; padding-right: 10px; }
.btnarea_sample a:first-of-type:before { display: none; }
.btnarea_sample i.fas { margin-right: 4px; }





/* chart */
.visual_grapharea { position: relative; height: calc(100% - 92px); min-height: 600px; margin-top: 20px; }
#graph1 { height: 100%; }
#graph1.h_btnhave { height: calc(100% - 64px); }
#graph1.h_btnhave2 { height: calc(100% - 34px); }
#wordtree_basic { width: 1210px; margin: 10px auto 0; }
#wordtree_basic div[id *="top"] { background: #f6f6f6; padding: 24px; border: 1px solid #ddd; box-sizing: border-box; }
#wordtree_basic div[id *="top"] > div { float: none !important; background-color: #f6f6f6 !important; margin: 0 !important; vertical-align: middle; }
/* 색상선택 */
.colorchoicearea { overflow:hidden; width: 100%; }
.color_left { float: left; margin-bottom: 4px; }
.color_right { float: left; }
.choicebox {  float: left; margin-right: 10px; }
.choicebox.floatn { float: none; }
.color_left .choicebox { padding-top: 3px; }
.choicebox svg { cursor: pointer; }
.choicebox a {  float: left; width: 20px; height: 20px; margin-right: 1px; border-radius:20px; background: #fff; }

.choicebox span {float: left; margin-right: 6px; line-height: 24px; }
.choicebox button {float: left; width: 24px; height: 24px; margin-right: 2px; border-radius:24px; background: #fff;  font-size: 11px; border: 1px solid #ddd; }


/* 키워드선정 버튼 */
.visualcon_input { overflow: hidden; }
.visualcon_input > div { float: left; width: calc(50% - 2px); margin-bottom: 4px; overflow: hidden; }
.visualcon_input > div:first-child { margin-right: 4px; }

.visualcon_input input[type="radio"] + label { float: left; width: 50%; border:1px solid #ddd; font-size: 12px; line-height: 22px; background: #fff; text-align: center; box-sizing: border-box; }
.visualcon_input input[type="radio"] + label span { display: none; }
.visualcon_input input[type="radio"]:checked + label, .visualcon_input input[type="radio"]:checked + label:hover { color: #fff; background: #765d95; border-color:#4b3863; }

.visualcon_input input.first + label { border-top-left-radius:3px; border-bottom-left-radius:3px; border-top-right-radius:0; border-bottom-right-radius:0; }
.visualcon_input input.last + label { border-top-left-radius:0; border-bottom-left-radius:0; border-top-right-radius:3px; border-bottom-right-radius:3px; }

.visualcon_btn { overflow: hidden; }
.visualcon_btn a { float: left; background: #fff; margin-left: 4px; padding: 0 12px; line-height: 22px; font-size: 12px; box-sizing: border-box; transition: .2s; }
.visualcon_btn a.btn { color: #777; border: 1px solid #ddd; }
.visualcon_btn a.grey { color: #fff; padding: 0 12px; }
.visualcon_btn a.grey i.fa-eye-slash::before { content: "\f06e"; }
.visualcon_btn a:first-child { margin-left: 0; }
.visualcon_btn .btn_basic:hover { color: #765d95; border-color: #ccc; }
.visualcon_btn .btn_basic:hover:active,
.visualcon_btn .btn_basic[class *="-hover"],
.visualcon_btn .btn_basic[class *="-hover"]:hover { color: #fff; background: #765d95; border-color: #4b3863; }

.visualcon_btn[class *="count"] a { padding: 0; }
.visualcon_btn.count2 a { width: calc(50% - 2px); }
.visualcon_btn.count3 a { width: calc(33.33% - 2.66px); }
.visualcon_btn.count4 a { width: calc(25% - 3px); }



/* 키워드 리스트 */
.keywordlist { overflow-y:scroll; height: calc(100% - 62px); min-height: 306px; max-height: 500px; margin-top: 10px; }
table[class *="keywordlist_tbl"] { float: left; width: calc(50% - 9px); margin-right: 14px; }
table[class *="keywordlist_tbl"]:last-child { margin-right: 4px; }
table[class *="keywordlist_tbl"] th { line-height: 40px; font-size: 15px; font-weight: 700; border-bottom:1px dashed #ddd; }
table[class *="keywordlist_tbl"] td { padding: 5px 0; font-size: 12px; word-break: break-all; border-bottom:1px dashed #ddd; }
table[class *="keywordlist_tbl"] td input[type="checkbox"] + label span { margin-right: 0; }
table[class *="keywordlist_tbl"] td:nth-child(1) { width: 24px; }
table[class *="keywordlist_tbl"] td:nth-child(2) { width: calc(76% - 24px); text-align: left; }
table[class *="keywordlist_tbl"] td:nth-child(3) { width: 24%; text-align: right; }
table[class *="keywordlist_tbl"].column4 { width: 100%; margin-right: 0; }
table[class *="keywordlist_tbl"].column4 td:nth-child(2),
table[class *="keywordlist_tbl"].column4 td:nth-child(3) { width: calc(42% - 12px); text-align: left; }
table[class *="keywordlist_tbl"].column4 td:nth-child(4) { width: 16%; padding-right: 8px; text-align: right; }

.keywordlist_box { float: left; width: calc(50% - 9px); padding: 5px 0; font-size: 12px; border-top:1px dashed #ddd; border-bottom:1px dashed #ddd; }
.keywordlist_box:nth-of-type(2n-1) { margin-right: 18px; }
.keywordlist_box p { display: inline-block; margin: 0; padding: 2px 0 1px 0px; vertical-align: middle; }
.keywordlist_box p:nth-of-type(2) { width: 65%; text-align: left; }
.keywordlist_box p:nth-of-type(3) { width: 20%; text-align: right;}





/* area */
.cont_info { display: block; clear: both; line-height: 20px; font-size: 13px; }
.cont_info strong { color: #765d95; font-weight: 700; }
.guide { display: block; clear: both; color: #00a1ad; line-height: 20px; font-size: 13px; letter-spacing: 0; }
.guide.red { color: #e74a2b; }
.guide span { color: #333; font-weight: 700; }
.guide em { color: #777; }
.guide b { text-decoration: underline; font-weight: 400; font-style: normal; }
.guide strong { text-decoration: underline; font-weight: 800; }
.guide strong.more { font-size: 13px; font-weight: 800; }
.pay .guide i { color: #ed1c24; font-weight: 700; font-style: normal; }
.wrap_aside .guide { color: #00a1ad; }
.state { display: inline-block; float: right; color: #765d95; font-size: 13px; }
.state.tac { float: none; display: block; margin: 0 auto; }
.state.tac .loader { right: auto; }
.topic .state { float: none; margin-right: 6px; line-height: 34px; vertical-align: bottom; }
.state.preview { display: block; float: none; padding: 48px 0; text-align: center; }




/* box */
.box_basic { display: block; width: 100%; background: #f6f6f6; padding: 20px; line-height: 26px; border: 1px solid #ddd; border-radius: 3px; box-sizing: border-box; }
.box_basic .alink { color: #777; padding: 3px 7px; font-weight: 700; }
.box_basic .alink:hover { text-decoration: underline; }
.choice_all { display: block; line-height: 34px; margin: 20px 0 10px 0; }
.boxchoice { line-height: 34px; margin-bottom: 4px; padding: 20px; background: #fff; border: 1px solid #ddd; border-radius: 3px; }
.boxchoice dt label { float: left; }
.boxchoice dd a { float: right; color: #777; text-decoration: underline; }
.boxchoice dd a:hover { color: #765d95; font-weight: 700; }
.boxchoice dd input[type="text"] { width: 100%; box-sizing: border-box; }
.boxchoice.preview { margin: 20px 0 0; padding: 4px 20px 8px; }
.boxchoice.preview h6 { display: block;width: 100%; margin-left: 0; box-sizing: border-box; }
.boxchoice.preview h6 a { display: inline-block; margin-left: 6px; }
.boxchoice.preview h6 a .fa-chart-line,
.storage_view + a .fa-chart-bar { color: #777; }
.boxchoice.preview h6 a:hover .fa-chart-line,
.storage_view + a:hover .fa-chart-bar { color: #333; }
.boxchoice.preview span { display: block; padding: 2px 0 0 8px; line-height: 20px; box-sizing: border-box; }

.box_blet_violet { display: block; position: relative; color: #765d95; background: #f6f6f6; padding: 10px 20px 10px 30px; border: 1px solid #ddd; border-radius: 3px; letter-spacing: 0; }
.box_blet_violet strong { font-size: 14px; font-weight: 800; }
.box_blet_violet em { color: #777; }
.box_blet_violet::before { content: ''; position: absolute; left: 20px; top: 23px; width: 4px; height: 7px; background: url('/html_analysis/images/common.png') -82px top no-repeat; }



/* btn wrap */
.btnarea_float { display: inline-block; width: 100%; }
.btnarea_float a { float: left; line-height: 32px; color: #777; background: #fff; text-align: center; border: 1px solid #ddd; box-sizing: border-box; }
.btnarea_float a:hover { color: #765d95; background: #f9f9f9; }
.btnarea_float a.first { border-top-left-radius: 3px; border-bottom-left-radius: 3px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btnarea_float a.last { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.btnarea_float a.alone { border-radius: 3px; }
.btnarea_float a.violet { color: #efe8f7; background: #765d95; border: 1px solid #4b3863; }
.btnarea_float a em { vertical-align: bottom; }
.btnarea_float.count2 a { width: 50%; }
.btnarea_float.count2 a.w100p { width: 100%; }
.btnarea_float.count3 a { width: 33%; }
.btnarea_float.count3 a:nth-child(2) { width: 34%; }
.btnarea_float.count3_space a { width: 33%; }
.btnarea_float.count3_space a.alone { width: calc(34% - 10px); }
.btnarea_float.count3_keyword a { width: 33%; }
.btnarea_float.count3_keyword a.alone { width: calc(34% - 10px); }
.btnarea_float[class *="count"] .boxcont_input { width: 100%; }
/* .btnarea_float[class *="count"] .boxcont_input input[type="radio"] + label { background: #fff; box-sizing: border-box; }
.btnarea_float[class *="count"] .boxcont_input input[type="radio"] + label:hover { background: #f9f9f9; }
.btnarea_float[class *="count"] .boxcont_input input[type="radio"]:checked + label { background: #765d95; } */
.btnarea_float.count2 .boxcont_input input[type="radio"] + label { width: 50%; }
.btnarea_float.count4 .boxcont_input input[type="radio"] + label { width: 25%; }

/* sentiment tab  box */
.sentiment_tab { overflow: hidden; }
.sentiment_tab a.last { border-bottom: 1px solid #ccc; }
.sentiment_tab .tab02 a.on { border-bottom: 1px solid #fff; }
.sentiment_tab .tab02 a.on.first { border-bottom: 1px solid #765d95; }
.sentiment_box { overflow: hidden; width: 100%;  margin-top: -1px; padding: 20px;  background: #fff; border: 1px solid #765d95; box-sizing: border-box;  }
/* .sentiment_box.state_tac .state { float: none; text-align: center; } */

.senti_fileup_wrap { overflow: hidden; width: 100%; }
/* .senti_fileup_wrap a { width: 100%;  } */
/* .senti_fileup_wrap h4 { float: left; width: 100px; margin-right: 10px; line-height: 34px; } */
.senti_fileup_wrap .file_input_route { float:  left; width: calc(100% - 90px); }
.senti_fileup_wrap .fileup_box { overflow: hidden; }




.tab02_cont .btnarea_float a { background: #f6f6f6; }
.tab02_cont .btnarea_float a:hover { background: #f1f1f1; }
.tab02_cont .btnarea_float a.violet { background: #765d95; }
.tab02_cont .btnarea_float a.violet:hover { background: #684e89; }
.btnarea_nav { text-align: right; }
.btnarea_nav a i { margin: 0; padding: 0 5px; vertical-align: middle; font-size: 14px; }
.btnarea_nav a em { font-size: 0; text-indent: -9999px; }



/* tab */
.wrap_atab { position: sticky; top: 0; padding: 30px 0 0 0; background: #f1f1f1; z-index: 30; }
.tab01 { position: relative; line-height: 50px; background: #f6f6f6; padding: 0 30px; border-top: 1px solid #ddd; border-bottom: 1px solid #ccc; z-index: 10; }
.wrap_atab .tab01 { background: #fff }
.tab01 a { display: inline-block; position: relative; color: #777; margin-right: 30px; padding: 0 1px; font-size: 15px; font-family: 'NanumSquareRound'; }
.tab01 a:last-of-type { margin-right: 0; }
.tab01 a:hover { color: #00a1ad; }
.tab01 a.on { color: #333; font-weight: 700; border-bottom: 2px solid #00becc; }
.tab01 a.accent::after { content: ''; display: inline-block; position: absolute; top: 10px; right: -10px; width: 6px; height: 6px; background: #00becc; border-radius: 6px; }
.wrap_aside .tab01 { background: #fff; }
.tab02 { float: left; width: 100%; }
.tab02 a { float: left; color: #777; background: #f6f6f6; padding: 11px 30px; text-align: center; font-size: 14px; font-family: 'NanumSquareRound'; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc;  box-sizing: border-box; }
.tab02 a:first-of-type { border-top-left-radius: 3px; }
.tab02 a:last-of-type { border-top-right-radius: 3px; }
.tab02 a.on { position: relative; color: #765d95; background: #fff; font-weight: 700; border-color: #765d95; }
.tab02 a:hover { color: #765d95; background: #f1f1f1; }
.tab02 a.on:hover { background: #fff; }
.wrap_aside .tab02 a:hover { background: #f9f9f9; }
.wrap_aside .tab02 a.on:hover { background: #fff; }
.tab02.count2 a { width: 50%; }
.tab02_cont { display: none; float:left; width: 100%; background: #fff; margin-top: -1px; padding: 20px; border: 1px solid #765d95; box-sizing: border-box; }
.tab02_cont.on { display: block; }

.tab01_cont { display: none; width: 100%; box-sizing: border-box; }
.tab01_cont.on { display: inline-block; }
.tab01_cont.pt0 { padding-top: 0; }



/* table */
.tbl01 { width: 100%; border-top: 2px solid #765d95; }
.tbl01 input[type="checkbox"] + label span { margin: 0; }
.tbl01 th { line-height: 14px; background: #fff; padding: 10px; text-align: center; font-weight: 700; border-bottom: 1px solid #aaa; }
.tbl01 th em { font-size: 11px; font-weight: 400; }
.tbl01 td { line-height: 20px; background: #fff; padding: 6px 10px; word-break: break-all; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; }
.tbl01 td:last-child { border-right: 0; }
.tbl01 td a { color: #777; }
.tbl01 td a:hover { text-decoration: underline; }
.tbl01 tr:hover td { background: #f6f6f6; }
.tbl01 tr.checked td { background: #f1f1f1; border-top: 1px solid #765d95; border-bottom: 1px solid #765d95; }
.tbl01 tr.checked td:first-child { border-left: 1px solid #765d95; }
.tbl01 tr.checked td:last-child { border-right: 1px solid #765d95; }
.tbl01 td.no_list { width: 100%; background: #f6f6f6; padding: 40px 10px; text-align: center; }


/* collecting list */
.tbl01.storage td.ing { color: #00a1ad; }
.tbl01.storage th:nth-child(1) { width: 6%; }
.tbl01.storage td:nth-child(1) { width: 6%; text-align: center; } /* checkbox */
.tbl01.storage th:nth-child(2) { width: 18%; }
.tbl01.storage td:nth-child(2) { width: 18%; color: #765d95; font-weight: 700; } /* keyword */
.tbl01.storage th:nth-child(3),
.tbl01.storage td:nth-child(3) { width: 36%; } /* channel */
.tbl01.storage th:nth-child(4),
.tbl01.storage td:nth-child(4) { width: 18%; text-align: center; } /* term */
.tbl01.storage th:nth-child(5) { width: 12%; }
.tbl01.storage td:nth-child(5) { width: 12%; text-align: center; } /* date */
.tbl01.storage th:nth-child(6) { width: 10%; }
.tbl01.storage td:nth-child(6) { width: 10%; text-align: right; } /* volume */
.tbl01.storage.complete th:nth-child(3),
.tbl01.storage.complete td:nth-child(3) { width: 26%; } /* channel */
.tbl01.storage.complete th:nth-child(7) { width: 10%; }
.tbl01.storage.complete td:nth-child(7) { width: 10%; text-align: right; } /* state */
.tbl01.storage td:nth-child(2) i[class *="fa-folder"] { color: #aaa; margin-right: 8px; }
.tbl01.storage tr.merge td { padding: 9px 10px; background: #f6f6f6; }
.tbl01.storage tr.merge td:nth-child(2) { width: 74%; color: inherit; font-weight: normal; }
.tbl01.storage tr.merge td:nth-child(3) { width: 10%; text-align: right; }
.tbl01.storage tr.merge td:nth-child(4) { width: 10%; text-align: right; }
.tbl01.storage2 th:nth-child(1),
.tbl01.storage2 td:nth-child(1) { width: 6%; text-align: center; } /* checkbox */
.tbl01.storage2 th:nth-child(2),
.tbl01.storage2 td:nth-child(2) { width: 80%; } /* group name */
.tbl01.storage2 th:nth-child(3),
.tbl01.storage2 td:nth-child(3) { width: 14%; text-align: center; } /* edit */
.tbl01.u_storage th:nth-child(1),
.tbl01.u_storage td:nth-child(1) { width: 6%; text-align: center; } /* checkbox */
.tbl01.u_storage th:nth-child(2) { width: 48%; }
.tbl01.u_storage td:nth-child(2) { width: 48%; color: #765d95; font-weight: 700; } /* keyword */
.tbl01.u_storage th:nth-child(3),
.tbl01.u_storage td:nth-child(3) { width: 18%; text-align: center; } /* date */
.tbl01.u_storage th:nth-child(4) { width: 14%; }
.tbl01.u_storage td:nth-child(4) { width: 14%; text-align: right; } /* volume */
.tbl01.u_storage th:nth-child(5) { width: 14%; }
.tbl01.u_storage td:nth-child(5) { width: 14%; text-align: right; } /* state */
/* collecting list aside */
.tbl01.storage_view td:nth-last-child(4) { width: 20%; text-align: center; } /* channel */
.tbl01.storage_view td:nth-last-child(3) { width: 30%; text-align: center; } /* section */
.tbl01.storage_view td:nth-last-child(2) { width: 25%; text-align: right; } /* collect */
.tbl01.storage_view td:nth-last-child(1) { width: 25%; text-align: right; } /* volume */
.tbl01.storage_view td:nth-last-child(1) a { color: #777; text-decoration: underline; }
.tbl01.storage_view td:nth-last-child(1) a:hover { color: #765d95; font-weight: 700; }
.tbl01.storage_view tr.line td,
.tbl01.storage_view td[rowspan] { border-bottom: 1px solid #aaa; }
.tbl01.storage_view td[rowspan] img { width: 70px; }
.tbl01.storage_view td[rowspan] em.ch { display: block; color: #aaa; margin-top: 5px; font-size: 12px; }
.tbl01.storage_view tr:hover td { background: #fff; }
/*.tbl01.storage_view td[rowspan],
.tbl01.storage_view td[rowspan]:hover ~ td { background: #fff; cursor: inherit; }*/
.tbl01.storage_view td[rowspan] a.amount { display: inline-block; padding: 3px 5px 0 5px; }
.tbl01.storage_view td[rowspan] a.amount .fa-chart-bar { color: #aaa; font-size: 15px; }
.tbl01.storage_view td[rowspan] a.amount:hover .fa-chart-bar { color: #333; }
.tbl01.u_storage_view td:nth-last-child(3) { width: 45%; } /* name */
.tbl01.u_storage_view td:nth-last-child(2) { width: 30%; text-align: center; } /* date */
.tbl01.u_storage_view td:nth-last-child(1) { width: 25%; text-align: right; } /* volume */
.tbl01.u_storage_view td:nth-last-child(1) a { color: #777; text-decoration: underline; }
.tbl01.u_storage_view td:nth-last-child(1) a:hover { color: #765d95; font-weight: 700; }
.tbl01.u_storage_view tr.line td,
.tbl01.u_storage_view td[rowspan] { border-bottom: 1px solid #aaa; }
.tbl01.u_storage_view td[rowspan] img { width: 70px; }
.tbl01.u_storage_view td[rowspan] em.ch { display: block; color: #aaa; margin-top: 5px; font-size: 12px; }
.tbl01.u_storage_view tr:hover td { background: #fff; }
/* analysis list */
.tbl01.analysis td { padding: 0 10px; }
.tbl01.analysis th:nth-child(1) { width: 8%; }
.tbl01.analysis td:nth-child(1) { width: 8%; text-align: center; }
.tbl01.analysis th:nth-child(2) { width: 42%; }
.tbl01.analysis td:nth-child(2) { width: 42%; color: #765d95; font-weight: 700; border-right: 0; } /* name */
.tbl01.analysis td:nth-child(2) input[type="text"] { width: 100%; }
.tbl01.analysis td:nth-child(2) input[type="text"]:disabled { border: 0; background-color:transparent }
.tbl01.analysis th:nth-child(3) { width: 6%; }
.tbl01.analysis td:nth-child(3) { width: 6%; text-align: center; } /* edit */
.tbl01.analysis th:nth-child(4) { width: 24%; }
.tbl01.analysis td:nth-child(4) { width: 24%; text-align: center; } /* date */
.tbl01.analysis th:nth-child(5) { width: 20%; }
.tbl01.analysis td:nth-child(5) { width: 20%; text-align: right; } /* volume */
/* visual list */
.tbl01.visual td { padding: 8px 10px; }
.tbl01.visual th:nth-child(1) { width: 50%; }
.tbl01.visual td:nth-child(1) { width: 50%; color: #765d95; font-weight: 700; } /* name */
.tbl01.visual th:nth-child(2) { width: 30%; }
.tbl01.visual td:nth-child(2) { width: 30%; text-align: center; } /* date */
.tbl01.visual th:nth-child(3) { width: 20%; }
.tbl01.visual td:nth-child(3) { width: 20%; text-align: right; } /* volume */
/* mypage */
.tbl01.mypage th { border-bottom: 1px solid #ddd; }
.tbl01.mypage th { width: 11%; background: #f6f6f6; } /* title */
.tbl01.mypage td { width: 22%; border-right: 0; } /* text */
.tbl01.mypage td input,
.tbl01.mypage td textarea { width: 100%; resize: none; box-sizing: border-box; }
.tbl01.mypage td a { color: #765d95; }
.tbl01.mypage tr:hover td { background: #fff; }
.tbl01.mypage_edit th:nth-child(1) { width: 20%; }
.tbl01.mypage_edit td:nth-child(1) { width: 20%; } /* title */
.tbl01.mypage_edit th:nth-child(2) { width: 80%; }
.tbl01.mypage_edit td:nth-child(2) { width: 80%; } /* text */
.tbl01.mypage_edit td.tdw20 input { width: 20%; }
.tbl01.mypage_edit td.tdw30 input { width: 30%; }
.tbl01.mypage_edit td.address input.w50p { float: left; width: calc(50% - 1.5px); }
.tbl01.mypage_edit span.post { display: inline-block; width: 100%; margin-bottom: 3px; }
.tbl01.mypage_edit span.post input { width: 19.8%; }
.tbl01.mypage_edit span.post em { display: inline-block; width: 15px; text-align: center; }
.tbl01.mypage_edit span.post a { width: 118px; color: #fff; vertical-align: middle; box-sizing: border-box; }
.tbl01.mypage_edit span.post a:hover { text-decoration: none; }
/* pay list */
.tbl01.paylist td { text-align: center;  }
.tbl01.paylist td:nth-child(1) { width: 10%; } /* num */
.tbl01.paylist td:nth-child(2) { width: 15%; } /* way */
.tbl01.paylist td:nth-child(3) { width: 15%; } /* price */
.tbl01.paylist td:nth-child(4) { width: 17%; } /* item */
.tbl01.paylist td:nth-child(5) { width: 17%; } /* payment date */
/* dictionary list */
.tbl01.dictionary td { color: #aaa; }
.tbl01.dictionary td:nth-child(1) { width: 6%; text-align: center; } /* checkbox */
.tbl01.dictionary td:nth-child(2) { width: 15%; text-align: center; } /* num */
.tbl01.dictionary td:nth-child(3) { width: 25%; } /* change word */
.tbl01.dictionary td:nth-child(4) { width: 25%; } /* word */
.tbl01.dictionary td:nth-child(5) { width: 19%; text-align: center; } /* date */
.tbl01.dictionary td:nth-child(6) { width: 10%; text-align: center; padding: 13px 0 10px 0; } /* used */
.tbl01.dictionary td i { color: #ccc; font-size: 24px; cursor: pointer; }
.tbl01.dictionary tr.used td { color: #333; }
.tbl01.dictionary tr.used td i { color: #00becc; }
.tbl01.dictionary tr.checked td { background: #f6f6f6; border-top: 0; border-bottom: 1px solid #ddd; }
.tbl01.dictionary tr.checked td:first-child { border-left: 0; }
.tbl01.dictionary tr.checked td:last-child { border-right: 0; }
.tbl01.dictionary tr.checked:hover td { background: #f1f1f1; }
.tbl01.dictionary_group td { line-height: 34px; padding: 5px 10px; border-right: 0; }
.tbl01.dictionary_group td:nth-child(1) { width: 6%; text-align: center; } /* checkbox */
.tbl01.dictionary_group td:nth-child(2) { width: 80%; } /* group name */
.tbl01.dictionary_group td:nth-child(3) { width: 14%; text-align: center; } /* edit */
.tbl01.dictionary_group td input[type="text"] { width: 100%; }
.tbl01.dictionary_group td input[type="text"]:disabled { background: none; padding: 0; border: 0; }
.tbl01.dictionary_group tr.checked td { background: #f6f6f6; border-top: 0; border-bottom: 1px solid #ddd; }
.tbl01.dictionary_group tr.checked td input[type="text"] { background: #f6f6f6; }
.tbl01.dictionary_group tr.checked td:first-child { border-left: 0; }
.tbl01.dictionary_group tr.checked td:last-child { border-right: 0; }
.tbl01.dictionary_group tr.checked:hover td { background: #f1f1f1; }
.tbl01.dictionary_group td a { color: #aaa; }
.tbl01.dictionary_group td a:hover { color: #765d95; }
.tbl01.dictionary_group td a i { font-size: 16px; }
/* mypage customiz list */
.tbl01.customizlist td:nth-child(1) { width: 6%; text-align: center; } /* checkbox */
.tbl01.customizlist td:nth-child(2) { width: 25%; color: #765d95; font-weight: 700; } /* channel name */
.tbl01.customizlist td:nth-child(3) { width: 39%; } /* URL */
.tbl01.customizlist td:nth-child(4) { width: 15%; text-align: center; } /* date */
.tbl01.customizlist td:nth-child(5) { width: 15%; text-align: center; } /* used */
.tbl01.customizlist tr.checked td { background: #f6f6f6; border-top: 0; border-bottom: 1px solid #ddd; }
.tbl01.customizlist tr.checked td:first-child { border-left: 0; }
.tbl01.customizlist tr.checked td:last-child { border-right: 0; }
.tbl01.customizlist tr.checked:hover td { background: #f1f1f1; }
.tbl01.customizlist_add th { border-bottom: 1px solid #ddd; }
.tbl01.customizlist_add td:nth-child(1) { width: 20%; text-align: center; } /* title */
.tbl01.customizlist_add td:nth-child(2) { width: 80%; } /* input */
.tbl01.customizlist_add td input,
.tbl01.customizlist_add td textarea { width: 100%; resize : none; box-sizing: border-box; }
.tbl01.customizlist_add tr:hover td { background: #fff; }
/* nodata */
.tbl01 td:nth-child(1).nodata { width: 100%; color: #777; background: #f6f6f6; padding: 30px 10px; text-align: center; font-weight: 400; }

/* sentiment model  */
.tbl01.sentiment tbody th { border-right: 1px solid #ccc; }
.tbl01.sentiment tbody td { text-align: right; border-bottom: 1px solid #aaa;  }
.tbl01.sentiment.datan tbody td { text-align: left; }
.tbl01.sentiment tr:hover td { background: #fff; }

.tbl02 { width: 100%; text-align: center; border-top: 1px solid #aaa; }
.tbl02 th { line-height: 14px;background: #f9f9f9;padding: 10px;font-weight: 700;border-bottom: 1px solid #aaa;  }
.tbl02 td { padding: 20px 10px;border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.tbl02 td:first-of-type { font-weight: 700; }
.tbl02 td:last-of-type { border-right: none; }



.tbl03 { width: 100%; text-align: center; border-top: 1px solid #aaa; font-size: 14px; }
.tbl03 th { line-height: 14px; background: #f6f6f6; padding: 10px; font-weight: 700; border-bottom: 1px solid #aaa; }
.tbl03 th:first-child { border-left: 1px solid #aaa; }
.tbl03 th:last-child { border-right: 1px solid #aaa; }
.tbl03 th em { font-size: 11px; font-weight: 400; }
.tbl03 td { line-height: 14px; background: #fff; padding: 10px; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; }
.tbl03 td:first-child { border-left: 1px solid #ddd; color: #765d95; font-weight:700; }
.tbl03 td strong { color: #00becc; font-weight: 800; }
.tbl03 td strong.red { color: #e74a2b; font-weight: 700; }
.tbl03 td strong.blue { color: #0a75de; font-weight: 700; }
.tbl03 tr.bgcolor td { background: #f6f6f6; }

.tbl03.column3 td:nth-child(1) { width: 46%; }
.tbl03.column3 td:nth-child(2),
.tbl03.column3 td:nth-child(3) { width: 27%; }


/* paging */
main .paging,
#main .paging { position: absolute; left: 0; right: 0; bottom: 0; }
.paging { height: 31px; line-height: 31px; background: #f6f6f6; text-align: center; border-top: 1px solid #ddd; }
.wrap_page { display: inline-block; }
.paging a,
.paging strong { float: left; display: inline-block; width: 35px; height: 31px; color: #777; background: url('/html_analysis/images/common.png') no-repeat; vertical-align: middle; border-right: 1px solid #ddd; }
.paging a.first { background-position: -81px -22px; border-left: 1px solid #ddd; border-right: 0; }
.paging a.last { background-position: -46px -22px; }
.paging a.pre { width: 100px; background: none; border-left: 1px solid #ddd; border-right: 0; }
.paging a.next { width: 100px; background: none; }
.paging a.pre .arrowl_grey { display: inline-block; width: 12px; height: 9px; margin-right: 8px; background: url('/html_analysis/images/common.png') -58px -12px no-repeat; }
.paging a.next .arrowr_grey { display: inline-block; width: 12px; height: 9px; margin-left: 8px; background: url('/html_analysis/images/common.png') -46px -12px no-repeat; }
.paging span.num { float: left; border-left: 1px solid #ddd; }
.paging span.num > a,
.paging span.num > strong { background: none; }
.paging span.num > strong { height: 29px; color: #333; background-color: #fff; font-weight: 700; border-bottom: 2px solid #00becc; }
.paging a:hover,
.paging strong:hover,
.paging span.num > a:hover,
.paging span.num > strong:hover { background-color: #fff; }

#main .paging.nonebg { position: relative; background: none; border-top: 0; }
.paging.nonebg .wrap_page { background: #f6f6f6; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.paging.nonebg a.pre,
.paging.nonebg a.next { background: #fff; }
.paging.nonebg a.pre:hover,
.paging.nonebg a.next:hover { text-decoration: underline; }




/* btn */
a > em { color: #00becc; font-size: 13px; letter-spacing: 0; }
.btn_basic { display: inline-block; line-height: 32px; color: #777; background: #f6f6f6; padding: 0px 12px; text-align: center; border: 1px solid #ddd; border-radius: 3px; }
.wrap_aside .btn_basic { background: #fff; }
.btn_basic:hover { color: #765d95; background: #f1f1f1; }
.wrap_aside .btn_basic:hover { background: #f9f9f9; }
.btn_basic i,
.btn i { margin-right: 6px; font-size: 12px; }
.btn_basic i.mr0,
.btn i.mr0 { margin-right: 0; }
.btn { display: inline-block; line-height: 32px; padding: 0px 30px; text-align: center; border-radius: 3px; }
.btn.violet { color: #efe8f7; background: #765d95; padding: 0 20px; border: 1px solid #4b3863; }
.btn.violet:hover { color: #fff; background: #684e89; }
.btn.grey { color: #fff; background: #aaa; padding: 0 20px; border: 1px solid #999; }
.btn.grey:hover { background: #999; }
.btn.light_grey { color: #777; background: #f6f6f6; padding: 0 20px; border: 1px solid #ddd; }
.btn.light_grey:hover { color: #765d95; background: #f1f1f1; }
.btnh_txtgrey:hover { color: #999; }
.btn_disable { opacity: 0.7; }
.btn_disable:hover { cursor: not-allowed; }
.btn.disblock { display: block; }
.wrap_boxcont .btn_popch { position: absolute; top: 71px; left: 0; width: 60px; padding: 5px 6px; line-height: 16px; font-size: 13px; }

/* small */
.btn.sm { line-height: 22px; padding: 0 10px; }
.btn.sm i { font-size: 10px; }

/* btn custom */
.btn_violet_round { display: block; color: #efe8f7; background: #3d2d51; padding: 10px 0; text-align: center; font-size: 16px; font-family: 'NanumSquareRound'; font-weight: 700; border-radius: 38px; }
.btn_violet_round i { font-size: 14px; }
.btn_violet_round:hover { color: #fff; background: #302144; }
.btn_violet_round.collect i { margin-right: 8px; }
.btn_violet_round.link_aside { font-weight: 400; }
.btn_violet_round.link_aside i { font-size: 12px; }
/* .btn_pay { display: inline-block; width: 80px; line-height: 52px; color: #fff; background: #00becc; text-align: center; font-weight: 700; border-radius: 3px; } */
.btn_pay { display: inline-block; width: 192px; line-height: 52px; color: #fff; background: #00becc; text-align: center; font-size: 18px; font-weight: 700; font-family: 'NanumSquareRound'; border-radius: 3px; }
.btn_pay:hover { background: #00b6c3; }
.refresh { position: absolute; top: 0px; right: 0px; }

/* btn blet */
a i.arrowr_white { display: inline-block; width: 17px; height: 11px; background: url('/html_analysis/images/common.png') -64px top no-repeat; margin-left: 8px; vertical-align: middle; }
a:hover i.arrowr_white,
a:focus i.arrowr_white { background-position: -46px top; transition: 0.4s; }




/* tooltip */
.tooltip { position: relative; }
.tooltip span { display: none; position: absolute; top: 33px; left: 0; line-height: 20px; color: #777; background: #f6f6f6; padding: 20px; text-align: left; border: 1px solid #ddd; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; box-shadow: 1px 1px 3px 0px #ddd; cursor: text; white-space: nowrap; z-index: 30; }
.tooltip span strong { display: block; }
.tooltip span em { display: block; color: #00a1ad; padding-top: 10px; }
.tooltip span em b { font-weight: 700; text-decoration: underline; }

.tooltip .move { width: 240px; max-height: 300px; padding: 0; background: #fff; overflow: hidden; overflow-y: auto; }
.tooltip .move ul { width: 100%; }
.tooltip .move li { line-height: 36px; padding: 0 20px; border-top: 1px solid #ddd; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; cursor: pointer; }
.tooltip .move li:first-child { border-top: 0; }
.tooltip .move li.select { color: #765d95; font-weight: 700; }
.tooltip .move li:hover { background: #f6f6f6; }

.tooltip_info { display: inline-block; position: relative; color: #aaa; line-height: 22px; font-size: 22px; }
.tooltip_info:hover span { display: block; }
.tooltip_info span { display: none; position: absolute; top: 28px; line-height: 20px; color: #777; background: #f6f6f6; padding: 20px; text-align: left; font-size: 13px; border: 1px solid #ddd; box-shadow: 1px 1px 3px 0px #ddd; cursor: text; white-space: nowrap; z-index: 30; }
.tooltip_info span::after { content: ''; position: absolute; top: -12px; margin-left: -6px; border-width: 6px; border-style: solid; border-color: transparent transparent #ddd transparent ; }
.tooltip_info span.left { left: 0; }
.tooltip_info span.left::after { left: 9px; }
.tooltip_info span.right { right: 0; }
.tooltip_info span.right::after { right: 3px; }
.tooltip_info span strong { font-weight: 700; }
.tooltip_info span strong.tit { color: #765d95; margin-bottom: 5px; }


/* loading */
.loader { display: inline-block; position: relative; top: 0; right: 30px; width: 5px; height: 5px; border-radius: 50%; animation: loader 1s linear alternate infinite; }
.state.preview .loader { right: auto; width: 8px; height: 8px; margin-bottom: 16px; animation: loader02 1s linear alternate infinite; }

@keyframes loader {
  0% {
    box-shadow: -20px 0 0 2px #01d6e6, -10px 0 0 0 rgba(0, 194, 236, 0.2), 0 0 0 0 rgba(0, 194, 236, 0.2), 10px 0 0 0 rgba(0, 194, 236, 0.2), 20px 0 0 0 rgba(0, 194, 236, 0.2); }
  25% {
    box-shadow: -20px 0 0 0 rgba(0, 194, 236, 0.2), -10px 0 0 2px #01d6e6, 0 0 0 0 rgba(0, 194, 236, 0.2), 10px 0 0 0 rgba(0, 194, 236, 0.2), 20px 0 0 0 rgba(0, 194, 236, 0.2); }
  50% {
    box-shadow: -20px 0 0 0 rgba(0, 194, 236, 0.2), -10px 0 0 0 rgba(0, 194, 236, 0.2), 0 0 0 2px #01d6e6, 10px 0 0 0 rgba(0, 194, 236, 0.2), 20px 0 0 0 rgba(0, 194, 236, 0.2); }
  75% {
    box-shadow: -20px 0 0 0 rgba(0, 194, 236, 0.2), -10px 0 0 0 rgba(0, 194, 236, 0.2), 0 0 0 0 rgba(0, 194, 236, 0.2), 10px 0 0 2px #01d6e6, 20px 0 0 0 rgba(0, 194, 236, 0.2); }
  100% {
    box-shadow: -20px 0 0 0 rgba(0, 194, 236, 0.2), -10px 0 0 0 rgba(0, 194, 236, 0.2), 0 0 0 0 rgba(0, 194, 236, 0.2), 10px 0 0 0 rgba(0, 194, 236, 0.2), 20px 0 0 2px #01d6e6; }
}

@keyframes loader02 {
  0% {
    box-shadow: -32px 0 0 2px #01d6e6, -16px 0 0 0 rgba(0, 194, 236, 0.2), 0 0 0 0 rgba(0, 194, 236, 0.2), 16px 0 0 0 rgba(0, 194, 236, 0.2), 32px 0 0 0 rgba(0, 194, 236, 0.2); }
  25% {
    box-shadow: -32px 0 0 0 rgba(0, 194, 236, 0.2), -16px 0 0 2px #01d6e6, 0 0 0 0 rgba(0, 194, 236, 0.2), 16px 0 0 0 rgba(0, 194, 236, 0.2), 32px 0 0 0 rgba(0, 194, 236, 0.2); }
  50% {
    box-shadow: -32px 0 0 0 rgba(0, 194, 236, 0.2), -16px 0 0 0 rgba(0, 194, 236, 0.2), 0 0 0 2px #01d6e6, 16px 0 0 0 rgba(0, 194, 236, 0.2), 32px 0 0 0 rgba(0, 194, 236, 0.2); }
  75% {
    box-shadow: -32px 0 0 0 rgba(0, 194, 236, 0.2), -16px 0 0 0 rgba(0, 194, 236, 0.2), 0 0 0 0 rgba(0, 194, 236, 0.2), 16px 0 0 2px #01d6e6, 32px 0 0 0 rgba(0, 194, 236, 0.2); }
  100% {
    box-shadow: -32px 0 0 0 rgba(0, 194, 236, 0.2), -16px 0 0 0 rgba(0, 194, 236, 0.2), 0 0 0 0 rgba(0, 194, 236, 0.2), 16px 0 0 0 rgba(0, 194, 236, 0.2), 32px 0 0 2px #01d6e6; }
}




/* calendar */
#ui-datepicker-div { background-image: none; background-color: #fff; box-shadow: 0px  1px  3px rgba(0,0,0,0.2); }
#ui-datepicker-div .ui-datepicker-header { color: #777; background-image: none; background-color: #f6f6f6; border: 1px solid #ddd; }
#ui-datepicker-div .ui-datepicker-prev { top: 50%; left: 4px; color: #765d95; margin-top: -.9em; }
#ui-datepicker-div .ui-datepicker-next { top: 50%; right: 4px; color: #765d95; margin-top: -.9em; }
#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover { background-image: none; background-color: #fff; border: 1px solid #ddd; }
#ui-datepicker-div .ui-datepicker-prev span { background-image: url('/html_analysis/images/common.png'); background-position: -107px 0; }
#ui-datepicker-div .ui-datepicker-next span { background-image: url('/html_analysis/images/common.png'); background-position: -91px 0; }
#ui-datepicker-div select { color: #765d95; }
#ui-datepicker-div select.ui-datepicker-year { width: 40%; margin-right: 4px; font-size: 14px; letter-spacing: -0.5px; }
#ui-datepicker-div select.ui-datepicker-month { width: 38%; margin-left: 15px; font-size: 14px; letter-spacing: -0.5px; }
#ui-datepicker-div .ui-datepicker-calendar th { color: #777; }
#ui-datepicker-div .ui-datepicker-other-month .ui-priority-secondary { color: #3d2d51; background-image: none; background-color: #f6f6f6; border: 1px solid #cac3d2; }
#ui-datepicker-div .ui-state-default { color: #765d95; background-image: none; background-color: #eeebf2; border: 1px solid #bdb4c8; }
#ui-datepicker-div .ui-state-highlight { color: #00a1ad; background-image: none; background-color: #ddf2f4; border: 1px solid #3fc9d3; }
#ui-datepicker-div .ui-corner-all { font-size: 14px; border-radius: 2px; }
#ui-datepicker-div .ui-datepicker-calendar .ui-state-default { padding: .3em; border: 0; }




.custom_info { height: 124px; background:#f2eff9 url('/html_analysis/images/img/bg_custom.jpg')no-repeat center top; display:block; margin-top:-20px;}
.custom_info p {font-size:20px; color:#61428a; text-align:center; padding-top: 40px; }
.custom_info p span {font-size:14px; color:#777; padding-bottom:10px; display:block;}




/* popup zone */
.pop_area { width:100%; margin:0 auto; }
.pop_area .inner { position:relative; margin:0 auto; }
.pop_area .inner:after { display:block; content:''; clear:both; }

#popupZone { position:relative; left:0; top:0; width:100%; }
#popupZone:after { display:block; content:''; clear:both; }
#popupZone > a { float: left; width: 100%; height: 100px; background-repeat: no-repeat; background-position: center center; }
.popup_box01 { background-color: #080f2d; background-image: url('/home/images/popup_hd/popup_hdbanner.jpg'); }

a.todayClose { position: absolute; right: 65px; bottom: calc(50% - 30px); color: rgba(255,255,255,.7); transition: .2s; }
.todayClose:hover { color: #fff; text-decoration: underline; }
.btn_top_close { position: absolute; right: 20px; bottom: calc(50% - 19px); width: 38px; height: 38px; line-height: 38px; text-align: center; }
.btn_top_close img { opacity: .7; transition: .2s; }
.btn_top_close:hover img { opacity: 1; }

.pop_area .bx-prev,
.pop_area .bx-next { display: block; position: absolute; width: 36px; height: 36px; background-repeat: no-repeat; margin-top: -60px; /* text-indent:-9000px; */ }
.pop_area .bx-prev { left: calc(50% - 600px); background-image: url('../images/btn/btn_arrow3_l.png'); }
.pop_area .bx-next { left: calc(50% + 600px); background-image: url('../images/btn/btn_arrow3_r.png'); }






	/* wide */
@media all and (min-width: 1600px) {
	main, #main { right: 500px; }
	aside, #aside { width: 500px; }
	h6 { width: 335px; }
	.wrap_scroll_l { width: calc(100% - 500px); }
	.wrap_scroll_r { width: 500px; }
}
	/* Desktop */
@media all and (min-width: 1280px) and (max-width: 1399px) {
	logo, #logo,
	gnb, #gnb { width: 210px; }
	.gnb_scroll > div, .gnb_scroll > h2 { width: 209px; }
	main, #main { left: 210px; right: 400px; }
	aside, #aside { width: 400px; }

	h6 { width: 235px; }
	.boxresult.btnbig h6 { width: 100%; }
	.boxresult.btnbig .topic h6 { width: 45%; }
	.boxresult.btnbig .btnarea_result { width: 100%; }
	.boxresult .topic li > span,
	.boxresult .topic .boxcont_input { width: 53%; }
	.boxresult .topic li > span,
	.boxresult li > span.topic { width: 100%; }
	.boxresult .topic li > span.guide { float: none; width: 100%; margin-bottom: 12px; }
	.topic li > span.state { width: auto; }

	.btn_basic,
	.btn.grey,
	.btn.violet { padding: 0 10px; }
	select { padding: 0 22px 0 8px; }
	.fzselect { padding: 0 28px 0 8px; }
	.wrap_boxcont .btn_popch { padding: 5px 6px; }

	#gnb .btnarea_stickyb .btn { padding: 0 10px; }
	
	.wrap_scroll_l { width: calc(100% - 400px); }
	.wrap_scroll_r { width: 400px; }

	.tbl01.storage_view td[rowspan] img { width: 50px; }

	.calc { right: -14px; }
	.box_calc { padding: 16px; }
	.box_calc h3 { padding-bottom: 12px; font-size: 15px; letter-spacing: -1px; }
	.box_calc > input { width: 105px; }
	.box_calc > div { margin-top: 10px; line-height: 22px; }
}
	/* pc + Tablet */
@media screen and (max-width: 1279px) {
	logo, #logo,
	gnb, #gnb { width: 210px; }
	.gnb_scroll > div, .gnb_scroll > h2 { width: 209px; }
	main, #main { left: 210px; right: 0; }
	aside, #aside { width: 400px; }
	#btn_aside { right: 400px; }
	.aside_blind #btn_aside { right: 0; }

	h6 { width: 235px; }
	.boxresult.btnbig h6 { width: 100%; }
	.boxresult.btnbig .topic h6 { width: 45%; }
	.boxresult.btnbig .btnarea_result { width: 100%; }
	.boxresult .topic li > span,
	.boxresult .topic .boxcont_input { width: 53%; }
	.boxresult .topic li > span,
	.boxresult li > span.topic { width: 100%; }
	.boxresult .topic li > span.guide { float: none; width: 100%; margin-bottom: 12px; }
	.topic li > span.state { width: auto; }
	
	#gnb .btnarea_stickyb .btn { padding: 0 10px; }

	.list_ch li .ch_child_wrap { display: block; margin-left: 135px; }
	.list_ch li span.ch_child { margin-left: 0; }
	/* .list_ch.costom li span.ch_child { display: inline-block; } */
	div.term span input[type="radio"] + label { width: 60px; }

	.boxcont_input input[type="radio"] + label,
	.boxcont_input.checkbtn input[type="checkbox"] + label { width: 80px; }

	#pay_normal .box_pay h1 { width: 100%; }
	#pay_bigdata .box_pay { width: 100%; }
	
	.scrollarea.visual_scroll { height: auto; min-height: 100%; }
	.scrollarea.visual_scroll .wrap_visual { overflow: visible; overflow-y: visible; }
	.wrap_scroll_l { float: none; width: 100%; /* height: auto; */}
	/* .wrap_scroll_r { float: none; width: calc(100% + 60px); height: auto; margin-top: 20px; margin-bottom: 0; border-top: 1px solid #ddd; border-left: 0; } */
	.wrap_scroll_r { float: none; width: 100%; height: auto; margin-top: 20px; margin-bottom: 0; border-top: 1px solid #ddd; border-left: 0; }
	.visualarea .sample .w50p,
	.visualarea .sample .file_input_route { width: 100%; }
	.visualcon_input input[type="radio"] + label,
	.visualcon_btn a { line-height: 30px; }
	table[class *="keywordlist_tbl"] td { padding: 13px 0; }

	.tab01.visual a { margin-right: 16px; font-size: 14px; }
	.tab01.visual a:last-of-type { margin-right: 0; }

	.tbl01.storage_view td[rowspan] img { width: 50px; }

	.calcarea .btn_calc { display: block; }
	.calcarea .calc { display: none; }
	.wrapper .price .floatl { width: 46%; }
	.wrapper .price .floatr { width: 54%; line-height: 34px; }
	.wrapper .price .floatr input.fs22 { font-size: 18px; }
	.wrapper .price .floatr input.fs26 { font-size: 20px; }
	.wrapper .price span.sale { margin-top: 12px; font-size: 13px; }
	.wrapper .lprice { width: 54%; margin-top: 38px; line-height: 34px; }
	.wrapper .lprice input { font-size: 26px; }
	.wrapper .lprice span.fs26 { font-size: 20px; }
	
}
@media screen and (min-width: 992px) and (max-width: 1100px) {
	.visualcon_input input[type="radio"] + label,
	.visualcon_btn a { line-height: 30px; }
	table[class *="keywordlist_tbl"] td { padding: 13px 0; }

	.termarea input[type="text"] { width: 18%; }
	.boxcont_input .termarea input[type="radio"] + label,
	.boxcont_input.checkbtn .termarea input[type="checkbox"] + label { width: 65px; }
	.boxcont_input.pay_period input[type="radio"] + label { width: 45.5px; }

	.wrap_pinput { max-width: 520px; }
	.wrap_pinput h3 { font-size: 15px; letter-spacing: -1px; }
	.wrap_pinput h3 em { font-size: 18px; }
	.wrap_pinput h3 span { display: none; }
	.pay_input { width: 190px; }
	.wrapper .price { float: none; overflow: hidden; width: 90%; max-width: 520px; margin: 0 auto; padding: 0; }
	.wrapper .price:first-of-type { margin-bottom: 20px; padding: 0 0 30px 0; border-right: 0; border-bottom: 1px solid #ddd; }
	.wrapper .price .floatl { width: 40%; }
	.wrapper .price .floatr { width: 60%; }
}
	/* Tablet */
@media screen and (max-width: 991px) {
	
	.wrap_headerl { width: calc(100% - 180px); }
	.util { width: 150px; }
	.util span { display: none; }

	.search_input { width: 400px; }
	.search_input input[placeholder="데이터명검색"] { width: 160px; }

	.visualarea .sample { width: 100%; padding-left: 0; border-left: 0; margin-top: 30px; padding-top: 30px; border-top: 1px solid #ddd; }
	.visualarea .info { width: 100%; }
	.visualarea .info > span { display: block; margin-left: 218px; }
	.visualarea .info h3 { padding: 0; }
	.visualarea .info img { float: left; }

	.wrap_boxcont ul li { margin-right: 18px; }
	.wrap_boxcont ul li.line { display: none; }
	.wrap_boxcont .keyword_input input[type="text"],
	.wrap_boxcont .keyword_input input[type="text"]:first-of-type { display: block; width: 76%; }
	.wrap_boxcont .keyword_input a { width: calc(38% - 44px); margin-bottom: 4px; }
	.wrap_boxcont .keyword_input a.rtop { width: auto; }
	.wrap_boxcont .keyword_input input.keyw_input_preview[type="text"] { display: inline-block; width: calc(100% - 71px); }
	.wrap_boxcont .keyword_input input.keyw_input_preview + a { width: auto; }
	.wrap_boxcont input[type="text"].w50p,
	.wrap_boxcont textarea.w50p { width: 100%; }
	.wrap_boxcont #keyword_filtering input[type="text"].w50p { width: 50%; }

	.list_ch li.alone { width: 50%; }
	
	div.term { width: 76%; }
	div.term i { width: 4%; }
	div.term input[type="text"] { width: calc(45% - 20px); }
	div.term em { width: 2%; }
	div.term span { width: 100%; margin-left: 0; }
	div.term span input[type="radio"] + label { width: 33.3%; box-sizing: border-box; }

	.termarea { width: 76%; }
	.termarea span { width: 100%; margin-left: 0; }
	.termarea input[type="text"] { width: calc(50% - 42px); }
	.boxcont_input .termarea input[type="radio"] + label,
	.boxcont_input.checkbtn .termarea input[type="checkbox"] + label { width: 33%; box-sizing: border-box; }
	.boxcont_input.pay_period input[type="radio"] + label { width: 45.5px; }
	.paylist .termarea { width: auto; margin-right: 20px; }
	.paylist .search_input input#sword { margin-left: 0; }

	
	.paging a,
	.paging strong { float: left; display: inline-block; width: 30px; }
	.paging a.pre,
	.paging a.next { width: 80px; }

	.box_pay { width: 100%; margin-bottom: 4px; }
	#pay_normal .box_pay h1 { width: auto; }
	/*.box_pay.costom h1 { width: 100%; }
	.box_pay.costom .btn_pay { position: static; width: 100%; margin-top: 10px; box-sizing: border-box; }*/

	.tab01.visual a { margin-right: 30px; font-size: 15px; }
	
	/* .wrap_pinput { float: left; width: 60%; max-width: none; margin-left: 30px; } */
	.wrap_pinput h3 { font-size: 13px; letter-spacing: -1px; }
	.wrap_pinput h3 em { font-size: 15px; }
	.wrap_pinput h3 span { display: none; }
	.pay_input { width: 190px; }
	.wrapper .price { float: none; overflow: hidden; width: 100%; margin: 0 auto; padding: 0; }
	.wrapper .price:first-of-type { margin-bottom: 20px; padding: 0 0 30px 0; border-right: 0; border-bottom: 1px solid #ddd; }
	.wrapper .price .floatl { width: 40%; }
	.wrapper .price .floatr { width: 60%; }
}



/* mobile footer */
	/* Mobile */
@media screen and (max-width:950px){
	#container { bottom: 70px; }
	footer, #footer { height: 70px; text-align: center; line-height: 28px; }
	footer p, #footer p { float: none; margin-top: 6px; }
	fnb, #fnb { float: none; }
}
@media screen and (max-width:768px){
	#login_wrap footer, #login_wrap #footer {padding:12px 0 10px 0; height:auto; line-height:22px;}
	#login_wrap fnb, #login_wrap #fnb { float: none; text-align:center; display:block;}
	#login_wrap footer p, #login_wrap #footer p { float: none; text-align:center; display:block;}
	#login_wrap footer p, #login_wrap #footer p span {display:none;}
}

	/* gnb */
@media screen and (max-height:859px){
	#gnb .btnarea_stickyb { box-shadow: 0 -1px 6px rgba(0,0,0,.1); }
}

	/* chatbot */
@media screen and (max-height:768px){
	.widget { height: 70%; }
}




/* ----- S : member ----- */
/* member */
#login_wrap {width:100%; height:100%; background:#F4F4F6 url("/home/layouts/images/common2/bg_patten.png") no-repeat center top; background-size:contain; overflow-y:scroll;}
#login_wrap .top_area {float:right; margin:20px 15px 0 0;}
.bg_wrap {transition:all 0.5s cubic-bezier(0.785, 0.135, 0.150, 0.860); animation-duration: 1s; animation-name: login_bg;}
.login_effect {transition:all 0.5s cubic-bezier(0.785, 0.135, 0.150, 0.860); animation-duration: 1s; animation-name: login_box;}
   @keyframes login_bg {
    from { background-position:center -140px;}
   to {  background-position:center top; }
   }
      @keyframes login_box {
    from { opacity:0; margin-top:140px;}
   to { opacity:1; margin-top:120px; }
   }
.login {width:480px; height:auto; margin:120px auto 160px auto; color:#363636;}
.login h1 {display:block; text-align:center; padding:0; margin-left: 0; margin-bottom:55px; }
.login h1 p {font-weight:400; font-size:18px; padding-top:25px;}
.login .inp_login input[type=text],
.login .inp_login input[type=password] { float: left; width:100%; padding:0; padding-left: 16px; height: 50px; line-height: 50px; background:#fff; font-size:16px; border:1px solid #363636; margin: 8px 0 24px 0; box-sizing: border-box; }
.login .inp_login input[type=text].w70p,
.login .inp_login input[type=password].w70p {width:70%; margin-right: 2%; }
.login .inp_login input[type=text].w42p {width:42%; min-width:auto;}
.login .inp_login input[type=date] { display: inline-block; width:100%; padding-left: 16px; padding-right: 10px; height:56px; line-height:56px; background:#fff; font-size:16px; border:1px solid #363636; margin: 8px 0; box-sizing: border-box; }
.login .inp_login input[type=date].w50p {width: calc(50% - 18px);}
.login .inp_login input[type=date] + span.inp_date_wave { display: inline-block; width: 24px; padding: 0 4px; text-align: center; line-height: 74px; }
.login .inp_login select {width:100%; padding:0; margin: 8px 0 16px 0; padding-left: 24px; height:50px; line-height:50px; font-size:16px; border:1px solid #363636; box-sizing: border-box;}
.login .inp_login .multi input[type=text],
.login .inp_login .multi select,
.login .inp_login .multi span { float: left; min-width: auto; }
.login .inp_login .multi input[type=text] { width: 24%; }
.login .inp_login .multi select { width: 24%; }
.login .inp_login .multi span { margin: 8px 0 24px 0; padding: 0 8px; line-height: 56px; }
.login .inp_login .multi span.mr15 { margin: 8px 15px 24px 0; }
.login .inp_login .join_btn { margin-bottom: 20px; }
.login .inp_login .join_btn input[type=text] { width: calc(100% - 145px); margin-right: 10px; margin-bottom: 0;  }
.login .inp_login .multi.email { overflow: hidden; }
.login .inp_login .multi.email input[type=text] { width: calc(50% - 16px); margin-bottom: 0; }
.login .inp_login .multi.email select { width: calc(50% - 16px); margin-bottom: 0; }
.login .inp_login .multi.email span { width: 16px; text-align: center; margin-bottom: 0; }
.login .inp_login label {display:block; clear: both; font-size:18px; font-weight:600; cursor: auto; }
.login .inp_login label span { margin-left: 8px; color: #777; font-family: 'NanumGothic'; font-size: 14px; font-weight: 400; }

.join_btn.code { position: relative; }
.code_time { position: absolute; left: 280px; top: 24px; color: red; }
.join_guide { margin-top: 10px; color: red; font-size: 15px; }

.login .inp_login .btn_pop {width:28%; display:inline-block; text-align:center; color:#fff; font-size:16px; height: 50px; line-height:50px; font-family:'Nanum Gothic', 'sans-serif'; box-sizing: border-box; clear: both; margin-top: 8px;}
.login .inp_login ul {margin:10px 0; overflow: hidden; }
.login .inp_login ul li { float: left; width:20%; box-sizing: border-box; }
.login .inp_login ul li label {display:inline-block; font-weight:400; font-family:'Nanum Gothic', 'sans-serif'; font-size:16px;}
.login .inp_login .comment {width:100%; padding:12px 24px; margin-bottom: 24px; border:1px solid #ddd; background:#FAF9F9; font-family:'Nanum Gothic', 'sans-serif'; font-size:14px; line-height:20px; box-sizing: border-box;}
.login .inp_login .comment span {display:block;}
.login .check_area {padding:14px 0 30px 0;}
.login .find_area {width:82%; margin:55px auto 0 auto;}
.btn_login {width:99.3%; height:60px; background:#3d2d51; border:1px solid #3d2d51; text-align:center; font-size:20px; color:#fff; display:block;}
.btn_login2 {width:99.3%; height:60px; background:#49C4D8; border:1px solid #49C4D8; text-align:center; font-size:20px; color:#fff; display:block;}
a.btn_login {width:99.3%; height:60px; line-height:60px; background:#3d2d51; border:1px solid #3d2d51; text-align:center; font-size:20px; color:#fff; display:block;}
.btn_find {width:166px; height:25px; background:url("/static/home/images/common2/btn_join.png") no-repeat right top 4px; display:inline-block; position:relative;}
.btn_find::after {content: " "; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#363636; }
.btn_find:hover {color:#926cc1;}
a.btn_home { font-size:16px; padding:8px 18px 9px 40px; color:#fff;	display:inline-block; background: #a0a0a0 url('/home/images/main2/ico_version.png') no-repeat left 18px center;	background-size:16px; border-radius:50px; }
a.btn_home:hover { background-color: #888; }
.login_chrome { position: fixed; bottom: 35px; width: 100%; background: #fff; padding: 10px 0; text-align: center; font-size: 15px; letter-spacing: 0; }

.input_wrap { display: flex; gap: 10px; width: 100%; }
.login .inp_login .input_wrap select,
.login .inp_login .input_wrap input[type=text] { margin-bottom: 10px; }

/* id password */
.id_find {position:relative;}
.id_find .cont {width:100%; position:absolute; top:90px; left:0;}
.tab_idpw {width:100%; height:52px; margin:0 auto; border-bottom:1px solid #765B93; z-index:10;}
.tab_idpw > li.tab { float:left; width:50%; display:inline-block;}
.tab_idpw > li.tab > a { display:block; background:#EEEEF1; height:51px; line-height:51px; border:1px solid #ccc; border-bottom:0 solid #ccc; font-size:18px; font-weight:600; color:#999; text-align:center; transition:all 200ms;}
.tab_idpw > li.tab > a.active  { background:#F4F4F6; border:1px solid #765B93; border-bottom:1px solid #F4F4F6; color:#765B93; position:relative; z-index:11;}
.inp_login { overflow: hidden; }

/* join */
.join_wrap {width:100%; position:relative;}
.join_wrap .iframe_wrap { width:100%; height:280px; border:1px solid #e1e1e1; background:#f6f6f6; margin:10px 0 30px 0; overflow:auto; -webkit-overflow-scrolling:touch;}
.join_wrap > .btn_wrap > .btn_board {width:48.6%;}
.join_wrap h4 {font-size:28px; text-align:center; line-height:38px;}
.join_wrap p.txt {display:block; font-size:18px; text-align:center; line-height:26px; padding:20px 0 40px 0; border-bottom:1px solid #d1d1d1; font-family:'Nanum Gothic', 'sans-serif'}
.join_wrap p span { display: inline-block; font-size: 15px; }

.agreement_box { padding:10px; font-size:13px; color:#888; line-height:20px; font-family:'Nanum Gothic', 'sans-serif';}
.agreement_h2 { font-size:16px; font-weight:600; color:#222; line-height:22px; padding-bottom:20px;}
.agreement_h3 { font-size:14px; font-weight:600; color:#555; padding-bottom:8px;}
.file_join {display:block; position:relative; overflow: hidden; }
.file_join .file_route {width:70% !important;}
.file_join label {
    position:absolute;
	right:0;
	top:8px;
    cursor:pointer;
    display:inline-block;
    vertical-align:middle;
    overflow:hidden;
    width:28%;
    height:58px;
    line-height:58px;
    background:#3d2d51;
    color:#fff;
    text-align:center;
	font-size:16px !important;
	font-family:'Nanum Gothic', 'sans-serif';
	padding:0 !important;
	font-weight:400 !important;
}
.file_join label input {
    position:absolute;
    width:0;
    height:0;
    overflow:hidden;
}


	/* Desktop */
@media screen and (max-width:1360px){
	.login h1 {margin-bottom:45px;}
	.login h1 img {width:160px}
	.login h1 p {font-size:16px; padding-top:20px;}
	.login .inp_login input[type=text],
	.login .inp_login input[type=password] {height:46px; line-height:46px;}
	.login .inp_login input[type=text].w42p {width:41.7%; min-width:auto;}
	.login .inp_login select  {height:48px; line-height:48px;}
	.login .inp_login .btn_pop {height:46px; line-height:46px;}
	.login .inp_login label {display:block; font-size:17px;}
	.login .check_area {padding:12px 0 20px 0;}
	.login .find_area {width:98%; margin:40px auto 60px auto;}
	.btn_login {height:50px; font-size:18px;}
	.btn_login2 {height:50px; font-size:18px;}
	a.btn_login {height:50px; line-height:50px; font-size:18px; margin-bottom:110px;}

	.id_find .cont {position:absolute; top:70px; left:0;}
	.tab_idpw {height:48px;}
	.tab_idpw > li.tab > a {height:47px; line-height:47px; font-size:16px;}

	.join_wrap > .btn_wrap > .btn_board {padding:13px 0;}
	.file_join label {height:48px;line-height:48px;}
}

	/* Tablet */
@media screen and (max-width:1024px){
	.wrap_headerl { width: calc(100% - 170px) }
	.util { width: 140px; }
	.util span { display: none; }
}


	/* Mobile */
@media screen and (max-width:768px){

	#login_wrap {min-width:320px; background-size:200%;}
	#login_wrap .top_area {float:right; margin:12px 15px 0 0;}
	.login {transition:all 0.5s cubic-bezier(0.785, 0.135, 0.150, 0.860);animation-duration: 1s;animation-name: login_box;}
	   @keyframes login_bg {
		from { background-position:center -95px;}
	   to {  background-position:center top; }
	   }
		  @keyframes login_box {
		from { opacity:0; margin-top:95px;}
	   to { opacity:1; margin-top:75px; }
	   }
	.login {width:90%; margin:75px auto 115px auto;}
	.login h1 {margin-bottom:25px;}
	.login h1 img {width:136px;}
	.login h1 p {font-size:15px; padding-top:18px;}
	.login .inp_login input[type=text],
	.login .inp_login input[type=password] {height:47px; line-height:47px; font-size:14px;}
	.login .inp_login .btn_pop { font-size:14px;}
	.login .inp_login ul {margin:10px 0;}
	.login .inp_login .comment span {display:inline-block; margin-left:0;}
	.login .inp_login label {display:none;}
	.login .join_wrap label {display:block;}
	.login .find_area {margin:40px auto 60px auto;}
	.btn_find {width:136px; font-size:13px; background-size:20px; height:22px;}
	a.btn_home {
		font-size:14px; 
		padding:7px 15px 7px 34px;
		background:#a0a0a0 url("/static/home/images/main2/ico_version.png") no-repeat left 15px center; 
		background-size:13px;
	}
	a.btn_home span {display:none;}

	.login_chrome {display:none;}

	.id_find {min-height:315px;}

	.join_wrap > .btn_wrap {margin-bottom:0;}
	.join_wrap > .btn_wrap > .btn_board {width:47.8%; font-size:18px;}
	.join_wrap h4 {font-size:22px; line-height:30px;}
	.join_wrap h4 br {display:none;}
	.join_wrap p.txt br {display:none;}

}

/* ----- E : member ----- */


/* css_design_sh */
.choicebox.bar > div{ float: left; margin-right: 10px; }

.choicebox.bar p { display: inline-block; margin: 0 2px 0 5px; }
.choicebox.bar > div span:nth-of-type(1) { background: #411676;display:inline-block; width:40px; height: 8px; margin-top: 4px; border-radius: 10px; }
.choicebox.bar.mat { margin-right: 0; width: 100%; }

.visualcon_button { overflow:hidden; }
.visualcon_button button { float: left; width: calc((100% - 4px) / 3); margin-right: 2px; padding: 5px 7px; border: 1px solid #C7C3C8; font-size: 11px; font-weight: bold; }
.visualcon_button button:nth-of-type(1){ background: #B4AFB4; color: #F5F2F3; }
.visualcon_button button:nth-of-type(2){ background: #B4AFB4; color: #F5F2F3; }
.visualcon_button button:nth-of-type(3){ margin-right: 0; background: #FFFFFF; color: #A494AC; }

.choicebox3 { display:block; width: 100%; overflow: hidden; padding-bottom: 6px; }
/* .choicebox3 button { width: calc((100% - 54px) / 5); font-size: 13px; line-height: 24px; text-align: center; margin-right: 2px; background: #fff; border-radius: 3px; border: 1px solid #ddd; cursor: pointer; } */
.choicebox3 button { background: #fff; margin-right: 2px; padding: 0 8px; line-height: 24px; text-align: center; font-size: 14px; border: 1px solid #ddd; border-radius: 28px; cursor: pointer; }
.choicebox3 span { width: 12%; margin-right: 6px;}

.choicebox3.count2 div {float: left; width: 50%; }
.choicebox3.count3 div {float: left; width: 58%; margin-right: 12px; }
.choicebox3.count3 div:last-of-type { float: right; width: calc(42% - 12px); margin-right: 0; }
.choicebox3.count3 button { float: left; width: calc(33.33% - 2px); }
.fzselect { height: 28px; line-height: 27px; }

.choicebox4 { display: inline-block; }
.choicebox4 > input[type="radio"] { margin-top: 8px; }
/* .choicebox4 > input[type="radio"] + label span[id *="graph1-top-label-svg"] { width: auto; height: auto; background: none; margin: 0 2px; } */
/* .choicebox4 > label > span > img { padding: 7px 0; vertical-align: middle; } */
input[type="radio"] + label span[id *="graph1-top-label-svg"] { width: auto; height: auto; background: #fff; margin: 0; padding: 0 8px; line-height: 24px; text-align: center; font-size: 14px; border: 1px solid #ddd; border-radius: 28px; cursor: pointer; transition: .2s; }
input[type="radio"]:checked + label span[id *="graph1-top-label-svg"] { color: #fff; background: #aaa; }
.color_left button { float: left; font-size: 13px; line-height: 24px; text-align: center; padding: 0 15px; cursor: pointer;  }
.arrowarea { float: left; width: calc(100% - 110px); margin-left: 4px; }

.choicebox_wordt.color_right button { display: inline-block; padding: 5px 6px; border-radius: 2px; font-size: 11px; width: inherit; height: inherit; }

.btnarea_float.count1 a { width: 100%; }