@charset "utf-8";

/**** Grid ****/
body { padding:80px 0 0 0; }
.contents { clear:both; margin:0; padding:0 30px 0 30px; }
.contents:after { content:''; display:block; clear:both; }
.contents > .layout-full {}
.contents > .layout-overflow { overflow-x:visible; }
.contents > .layout-center { margin:0 auto 0 auto; }
.contents > .layout-two-columns { display:table; width:100%; text-align:left; vertical-align:top; }
.contents > .layout-two-columns > .left { display:table-cell; width:50%; padding:0 20px 0 0; }
.contents > .layout-two-columns > .right { display:table-cell; width:50%; padding:0 0 0 20px; }
.contents > .layout-three-columns { display:table; width:100%; text-align:left; vertical-align:top; }
.contents > .layout-three-columns > .left { display:table-cell; width:33%; padding:0 13px 0 0; }
.contents > .layout-three-columns > .center { display:table-cell; width:34%; padding:0 7px 0 7px; }
.contents > .layout-three-columns > .right { display:table-cell; width:33%; padding:0 0 0 13px; }
.contents > .layout-four-columns { display:table; width:100%; text-align:left; vertical-align:top; }
.contents > .layout-four-columns > .col1 { display:table-cell; width:25%; padding:0 15px 0 0; }
.contents > .layout-four-columns > .col2 { display:table-cell; width:25%; padding:0 10px 0 5px; }
.contents > .layout-four-columns > .col3 { display:table-cell; width:25%; padding:0 5px 0 10px; }
.contents > .layout-four-columns > .col4 { display:table-cell; width:25%; padding:0 0 0 15px; }
.contents > .layout-menu-right { display:table; width:100%; text-align:left; vertical-align:top; }
.contents > .layout-menu-right > .main { display:table-cell; padding:0 30px 0 0; }
.contents > .layout-menu-right > .menu { display:table-cell; padding:0; }
.contents > .layout-menu-left { display:table; width:100%; text-align:left; vertical-align:top; }
.contents > .layout-menu-left > .menu { display:table-cell; padding:0; }
.contents > .layout-menu-left > .main { display:table-cell; padding:0 0 0 30px; }

/**** Icons ****/
.icon-slide-picture:before { content:"\eaac"; }
.icon-slide-picture_with_guide:before { content:"\eaac"; }
.icon-slide-picture_with_guide:before { content:"\eaac"; }
.icon-home-based:before { content:"\ea83"; }
.piece-icon-noted:before { display:inline-block; content:"\e937"; font-family:"icon"; font-size:9px; line-height:11px; opacity:0.5; margin-right:4px; }
.piece-icon-noted:after  { display:inline-block; content:""; width:11px; }
.piece-icon-locked:before { display:inline-block; content:"\ebe4"; font-family:"icon"; font-size:10px; line-height:12px; opacity:0.5; margin-right:3px; }
.piece-icon-locked:after  { display:inline-block; content:""; width:12px; }
.piece-icon-caution:before { display:inline-block; content:"\ec6d"; font-family:"icon"; font-size:10px; line-height:12px; opacity:0.5; margin-right:5px; position:relative; top:1px; }
.piece-icon-caution:after  { display:inline-block; content:""; width:16px; }
.piece-icon-question:before { display:inline-block; content:"\e9b8"; font-family:"icon"; font-size:11px; line-height:13px; opacity:0.75; margin-right:5px; }
.piece-icon-question:after  { display:inline-block; content:""; width:16px; }

/**** Header ****/
header { width:100%; height:50px; position:fixed; top:0; left:0; z-index:1000; background-color:#333333; }
header > .title { width:200px; height:50px; background-color:#1b1b1b; position:absolute; top:0; left:0; }
/* clock */
header > .title .clock { display:inline-block; margin:0 0 0 30px; }
header > .title .clock i.icon-clock { color:#dddddd; font-size:10px; line-height:50px; vertical-align:middle; }
header > .title .clock > span { color:#dddddd; font-size:12px; line-height:50px; vertical-align:middle; }
header > .title .notification { display:inline-block; margin:0 0 0 10px; position:relative; }
header > .title .notification > a { outline:none; }
header > .title .notification > a > i.badge { display:inline-block; min-width:12px; height:13px; color:#ffffff; font-size:9px; line-height:13px; padding:1px 1px 0 1px; text-align:center; vertical-align:middle; background-color:#ee3344; border:1px solid #ee5566; font-weight:bold; white-space:nowrap; }
header > .title .notification > a > i.badge:hover { opacity:0.95; }
header > .title .notification > a > i.icon-info2 { color:#888888; font-size:12px; }
header > .title .notification > a > i.icon-info2:hover { opacity:0.75; }
header > .title .notification .notifications { position:absolute; left:-20px; top:27px; background:#ffffff; border:1px solid #c7cad3; box-shadow:0 0 2px 1px rgba(0,0,0,0.1); }
header > .title .notification .notifications:after { content:''; position:absolute; top:-9px; left:20px; border-bottom:10px solid #ffffff; border-right:5px solid transparent; border-left:5px solid transparent; }
header > .title .notification .notifications:before { content:''; position:absolute; top:-10px; left:20px; border-bottom:10px solid #c7cad3; border-right:5px solid transparent; border-left:5px solid transparent; }
header > .title .notification .notifications > .none { width:200px; color:#999999; font-size:12px; line-height:100px; text-align:center; vertical-align:middle; }
header > .title .notification .notifications > .progress { width:200px; height:100px; position:relative; }
header > .title .notification .notifications > .progress .indicator { position:absolute; top:50px; left:100px; }
header > .title .notification .notifications > a.more { display:block; text-align:center; background:#f9f9f9 url("../../images/common/bg.dotted.png") top left repeat; border-top:1px solid #eeeeee; font-size:12px; line-height:22px; vertical-align:middle; }
header > .title .notification .notifications > .container > ul.list { max-height:300px; overflow-x:hidden; overflow-y:auto; }
header > .title .notification .notifications > .container > ul.list > li { width:280px; line-height:1.5; cursor:pointer; }
header > .title .notification .notifications > .container > ul.list > li.unread { background-color:#def0e4; }
header > .title .notification .notifications > .container > ul.list > li.unread div { font-weight:bold; }
/* navication */
header > ul.navigations { display:table; height:50px; width:100%; }
header > ul.navigations > li { display:table-cell; width:1%; white-space:nowrap; padding:0 9px 0 9px; line-height:50px; vertical-align:middle; }
header > ul.navigations > li:first-child { padding-left:217px; }
header > ul.navigations > li > a { color:#bbbbbb; text-decoration:none; }
header > ul.navigations > li > a [class^="icon-"] { color:#aaaaaa; }
header > ul.navigations > li > a:hover, header > ul.navigations > li > a:hover [class^="icon-"] { color:#078d34; }
/* search box */
header > ul.navigations > li.search { width:auto; text-align:right; padding-right:10px; position:relative; }
header > ul.navigations > li.search > .search-keyword { display:inline-block; position:relative; cursor:pointer; height:23px; font-size:13px; line-height:23px; text-align:left; background-color:#666666; border:none; border-radius:4px 0 0 4px; vertical-align:middle; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; user-select:none; -moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; }
header > ul.navigations > li.search > .search-keyword > label { display:block; padding-left:20px; height:23px; line-height:23px; font-size:13px; color:#aaaaaa; position:relative; top:1px; vertical-align:middle; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-text-overflow:ellipsis; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
header > ul.navigations > li.search > .search-keyword > input[type="text"] { border:none; padding-left:20px; height:23px; font-size:13px;line-height:23px; border:none; border-radius:4px 0 0 4px; background-color:#ffffff; color:#222222; }
header > ul.navigations > li.search > .search-keyword > input[type="text"]:focus { background-color:#ffffff; color:#222222; }
header > ul.navigations > li.search > .search-keyword:after { content:"\ebdb"; display:inline-block; position:absolute; top:1px; left:5px; font-family:"icon"; color:#aaaaaa; font-size:10px; }
header > ul.navigations > li.search > .search-keyword > a.clear { display:none; }
header > ul.navigations > li.search > .search-keyword > a.clear:after { display:none; }
header > ul.navigations > li.search > .search-keyword > div { position:absolute; top:26px; left:0; z-index:1; min-width:140px; max-height:250px; overflow-x:hidden; overflow-y:auto; background:#ffffff; border-bottom:1px solid #c7cad3; box-shadow:rgba(0,0,0,0.25) 0 0 5px 0; }
header > ul.navigations > li.search > .search-keyword > div > button { display:block; width:100%; color:#333333; border-bottom:1px solid #c7cad3; padding:0 30px 0 8px; line-height:30px; font-size:12px; font-weight:normal; text-align:left; vertical-align:middle; white-space:nowrap; }
header > ul.navigations > li.search > .search-keyword > div > button.selected,
header > ul.navigations > li.search > .search-keyword > div > button:hover { background-color:#f0f0f0; color:#000000; }
header > ul.navigations > li.search > .search-keyword > div > button:active { color:inherit; }
header > ul.navigations > li.search > .search-keyword > div > button .label { color:#bbbbbb; border-color:#bbbbbb; }
header > ul.navigations > li.search > .search-target { display:inline-block; position:relative; left:-5px; cursor:pointer; padding:0 20px 0 0; height:23px; line-height:23px; font-size:11px; color:#cccccc; text-align:left; vertical-align:middle; border:1px solid #666666; border-radius:0 4px 4px 0; background:#333333; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; user-select:none; -moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; }
header > ul.navigations > li.search > .search-target:hover { background-color:#3a3a3a; color:#eeeeee; }
header > ul.navigations > li.search > .search-target > label { display:block; padding:0 0 0 10px; line-height:23px; font-size:11px; vertical-align:middle; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-text-overflow:ellipsis; }
header > ul.navigations > li.search > .search-target > a.carret { outline:none; position:absolute; top:0; right:4px; }
header > ul.navigations > li.search > .search-target > a.carret:after { content:"\e950"; font-family:"icon"; display:inline-block; font-size:11px; line-height:21px; text-align:center; vertical-align:middle; color:#cccccc; opacity:0.75; }
header > ul.navigations > li.search > .search-target > div { display:none; position:absolute; top:21px; right:-1px; z-index:2; width:80px; overflow-x:hidden; overflow-y:auto; background:#ffffff; border-bottom:1px solid #666666; background-color:#333333; }
header > ul.navigations > li.search > .search-target > div > button { display:block; width:100%; border:1px solid #666666; border-bottom:none; padding:0 0 0 10px; line-height:23px; font-size:11px; color:#cccccc; font-weight:normal; text-align:left; vertical-align:middle; white-space:nowrap; }
header > ul.navigations > li.search > .search-target > div > button:hover { background-color:#3a3a3a; color:#eeeeee; }
header > ul.navigations > li.search > .search-target > div > button:active { color:inherit; }
/* my account */
header > ul.navigations > li.account { padding-right:15px; text-align:right; }
header > ul.navigations > li.account img { width:26px; height:26px; border-radius:13px; vertical-align:middle; }
header > ul.navigations > li.account a:hover img { opacity:0.85; }
/* background */
.header-background { position:fixed; top:0; left:0; z-index:999; width:100%; height:100%; background-color:#000000; opacity:0.25; }

/**** SideMenu ****/
#side-menu { width:200px; height:100%; position:fixed; top:50px; left:0; z-index:1000; background-color:#333333; padding:0 0 40px 0; overflow-x:hidden; overflow-y:auto; }
#side-menu .content {}
#side-menu .content > h2 { position:relative; padding:0 0 0 10px; line-height:40px; vertical-align:middle; color:#bbbbbb; border-bottom:1px solid #444444; user-select:none; -moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; }
#side-menu .content > h2:after { content:"\e92a"; display:block; position:absolute; top:0; right:6px; font-family:"icon"; font-size:12px; color:#bbbbbb; line-height:40px; vertical-align:middle; opacity:0.75; }
#side-menu .content > h2:hover { background-color:#3c3c3c; cursor:pointer; }
#side-menu .content.open > h2:after { content:"\e928"; right:9px; }
#side-menu .content > ul { border-bottom:1px solid #444444; }
#side-menu .content > ul > li { position:relative; display:block; }
#side-menu .content > ul > li > a,#side-menu .content > ul > li > span { display:block; padding:0 0 0 30px; line-height:40px; font-size:12px; color:#a0a0a0; vertical-align:middle; text-decoration:none; white-space:nowrap; overflow:hidden; position:relative; }
#side-menu .content > ul > li > a:after,#side-menu .content > ul > li > span:after { display:inline-block; content:"└"; position:absolute; top:0; left:10px; opacity:0.5; }
#side-menu .content > ul > li + li > a { border-top:1px solid #444444; }
#side-menu .content > ul > li.add > a:after { content:"\e9f8"; font-family:"icon"; left:14px; }
#side-menu .content > ul > li:hover > a { background-color:#3c3c3c; }
#side-menu .content > ul > li.focus > a { background-color:#444444; color:#cccccc; }
#side-menu .content > ul > li.indent > a { padding-left:42px; opacity:0.75; line-height:30px; font-size:11px; }
#side-menu .content > ul > li.indent > a:after { left:22px; }
#side-menu .content > ul > li.indent > .searchbox { padding:0 0 4px 26px; position:relative; }
#side-menu .content > ul > li.indent > .searchbox > input { border:none; padding-left:20px; width:150px; height:23px; font-size:12px; line-height:23px; border:none; border-radius:4px; background-color:#666666; color:#222222; }
#side-menu .content > ul > li.indent > .searchbox > input:focus { background-color:#ffffff; color:#222222; }
#side-menu .content > ul > li.indent > .searchbox:after { content:"\ebdb"; display:inline-block; position:absolute; top:5px; left:30px; font-family:"icon"; color:#aaaaaa; font-size:10px; }
#side-menu .content > ul > li + li.indent > a { border-top:1px dotted #444444; }
#side-menu .all { margin:10px; }
#side-menu .all > a { font-size:11px; color:#666666; }
#side-menu .all > a:hover { color:#bbbbbb; }


/**** Heading ****/
h1.heading { margin:0 0 20px 30px; color:#414756; font-size:17px; font-weight:bold; vertical-align:middle; }
.contents h1.heading { margin:0; }
h1.heading a { color:#414756; text-decoration:none; }
h2.heading { color:#555553; font-size:15px; font-weight:bold; vertical-align:middle; }
h2.heading a { color:#555553; text-decoration:none; }
h3.heading { color:#555553; font-size:14px; font-weight:bold; vertical-align:middle; }
h3.heading a { color:#555553; text-decoration:none; }
h4.heading { color:#222222; font-size:13px; font-weight:normal; vertical-align:middle; }
h4.heading a { color:#222222; text-decoration:none; }
h1.heading a:hover,h2.heading a:hover,h3.heading a:hover,h4.heading a:hover { color:#777777; }
div.heading { color:#999999; font-size:14px; font-weight:bold; }
/* bread-crumb */
h1.heading > ul,
h2.heading > ul { display:inline-block; margin-left:3px; vertical-align:middle; position:relative; top:-1px; }
h1.heading > ul > li,
h2.heading > ul > li { display:inline-block; vertical-align:middle; }
h1.heading > ul > li > a, h1.heading > ul > li > span,
h2.heading > ul > li > a, h2.heading > ul > li > span { padding-left:6px; font-size:14px; opacity:0.75; }
h1.heading > ul > li:before,
h2.heading > ul > li:before { display:inline-block; content:"\e92a"; font-family:"icon"; font-size:10px; opacity:0.5; vertical-align:middle; }
h1.heading > ul > li + li,
h2.heading > ul > li + li { margin-left:2px; }


/**** Navigation Tabs ****/
ul.navigation-tabs { display:block; border-bottom:1px solid #c7cad3; margin:0 30px 30px 30px; padding-left:22px; font-size:0; vertical-align:bottom; position:relative; }
ul.navigation-tabs > li { display:inline-block; position:relative; top:1px; }
ul.navigation-tabs > li > a { display:block; min-width:40px; border:1px solid #c7cad3; border-left:none; background:#f9f9f9 url("../../images/common/bg.dotted.png") top left repeat; padding:1px 20px 0 20px; line-height:28px; font-size:11px; color:#777777; text-align:center; vertical-align:middle; }
ul.navigation-tabs > li:first-child > a { border-left:1px solid #c7cad3; }
ul.navigation-tabs > li > a:hover { color:#078d34; }
ul.navigation-tabs > li.active > a { color:#444444; font-weight:bold; border-bottom:1px solid #f3f3f3; background:#f3f3f3; padding-top:5px; }
ul.navigation-tabs > li.active > a:after { display:block; content:""; width:1px; height:15px; background:#c7cad3; position:absolute; top:0; left:-1px; }
ul.navigation-tabs > li:first-child > a:after { display:none; }
ul.navigation-tabs > li.active > a:hover { color:#078d34; }
ul.navigation-tabs > li.link { display:inline-block; position:absolute; top:0; right:10px; }
ul.navigation-tabs > li.link > a { display:block; min-width:auto; border:none; background:transparent; padding:0; font-size:11px; color:#078d34; text-align:right; vertical-align:bottom; }
ul.navigation-tabs > li.link > a:hover { color:#31bc60; }
ul.navigation-tabs.reverse { border-bottom:none; border-top:1px solid #c7cad3; margin:30px 30px 30px 30px; vertical-align:top; }
ul.navigation-tabs.reverse > li { top:-1px; }
ul.navigation-tabs.reverse > li.active > a { border-bottom:1px solid #c7cad3; border-top:1px solid #f3f3f3; padding-top:0px; padding-bottom:6px; }
ul.navigation-tabs.reverse > li.active > a:after { top:auto; bottom:0; }
.contents ul.navigation-tabs { margin-left:0; margin-right:0; }
ul.navigation-tabs.light > li.active > a { background:#f9f9f9; }
ul.navigation-tabs.border-bottom-none { border-bottom:none; }

/**** Status ****/
ul.status {}
ul.status > li { color:#999999; font-size:12px; }
ul.status > li + li { margin-top:2px; }
ul.status.right-side > li { text-align:right; }
ul.status.left-side > li { text-align:left; }

/**** Foot Mark ****/
ul.footmark {}
ul.footmark > li { color:#bbbbbb; font-size:11px; }
ul.footmark > li + li { margin-top:2px; }
ul.footmark.right-side > li { text-align:right; }
ul.footmark.left-side > li { text-align:left; }

/**** Pager ****/
.pager-total { display:inline-block; height:32px; line-height:32px; /*vertical-align:bottom;*/ vertical-align:middle; margin-right:20px; font-size:13px; }
.pager-total em { font-size:20px; font-weight:bold; position:relative; top:-3px; }
ul.pager { display:inline-block; letter-spacing:-.40em; height:32px; line-height:32px; vertical-align:middle; }
ul.pager > li { display:inline-block; letter-spacing:normal; line-height:32px; vertical-align:middle; margin-right:4px; }
ul.pager > li > a,
ul.pager > li > span { display:inline-block; padding:0 3px 0 3px; height:32px; line-height:32px; text-align:center; vertical-align:middle; font-size:13px; color:#333333; }
ul.pager > li > a, ul.pager > li > a:hover { color:#078d34; }
ul.pager > li.current > span, ul.pager > li.current > a { color:#333333; font-weight:bold; }
ul.pager > li.disabled > a,
ul.pager > li.disabled > span { color:#999999; }


/**** Form Layout ****/
dl.form-field { display:table; width:100%; }
dl.form-field.border-top { border-top:1px solid #e1e1e1; }
dl.form-field.border-bottom { border-bottom:1px solid #e1e1e1; }
dl.form-field.border-left { border-left:1px solid #e1e1e1; }
dl.form-field.border-right { border-right:1px solid #e1e1e1; }
dl.form-field.border { border:1px solid #e1e1e1; }
dl.form-field.border-none { border:none; }
dl.form-field + dl.form-field { border-top:1px solid #e1e1e1; }
dl.form-field.border-top-double { border-top:3px double #e1e1e1 !important; }
dl.form-field > dt { display:table-cell; width:160px; padding:8px 20px 8px 8px; text-align:right; vertical-align:top; line-height:32px; background:#f9f9f9; border-right:1px solid #e1e1e1; position:relative; color:#888888; font-size:12px; }
dl.form-field > dt:before { content:""; display:block; position:absolute; top:0; left:0; width:100%; height:1px; border-top:1px solid #ffffff; }
dl.form-field > dt.required:after { content:"\e937"; display:inline-block; font-family:"icon"; font-size:11px; line-height:32px; color:#bbbbbb; vertical-align:middle; position:absolute; top:8px; left:8px; }
dl.form-field > dd { display:table-cell; padding:8px; text-align:left; vertical-align:top; position:relative;  }
dl.form-field > dd + dt { border-left:1px solid #e1e1e1; }
dl.form-field > dd + dd { border-left:1px solid #e1e1e1; }
dl.form-field > dd + dd.no-border { border-left:none; }
dl.form-field > dd.min { width:1%; white-space:nowrap; }
dl.form-field > dd.list { padding:0; }
dl.form-field > dd.list > div.inner { padding:8px; }
dl.form-field > dd.list > div.inner + div.inner { border-top:1px solid #e1e1e1; }
dl.form-field > dd.list > dl.inner { display:table; width:100%; }
dl.form-field > dd.list > dl.inner + dl.inner { border-top:1px solid #e1e1e1; }
dl.form-field > dd.list > dl.inner > dt,
dl.form-field > dd.list > dl.inner > dd { display:table-cell; padding:8px; line-height:32px; vertical-align:middle; }
dl.form-field > dd.list > dl.inner > dd { border-left:1px solid #e1e1e1; }
dl.form-field > dd.list > dl.inner > dd.min { width:1%; white-space:nowrap; }
dl.form-field > dd.list.inverse > div.inner { border-bottom:1px solid #e1e1e1; }
dl.form-field > dd.list.inverse > div.inner + div.inner { border-top:none; }
dl.form-field > dd.list.inverse > div.inner:last-child { border-bottom:none; }
dl.form-field > dd.list.inverse > div.inner.border-bottom-none { border-bottom:none; }
.bg-form-field { background:#f9f9f9 !important; }
.text-form-field { color:#888888 !important; }

dl.form-field > dd p.warning { color:#ee0000; margin-top:5px; }
.form-buttons { border-top:1px solid #e1e1e1; }
.form-buttons.border-top { border-top:1px solid #e1e1e1; }
.form-buttons.border-bottom { border-bottom:1px solid #e1e1e1; }
.form-buttons.border-left { border-left:1px solid #e1e1e1; }
.form-buttons.border-right { border-right:1px solid #e1e1e1; }
.form-buttons.border { border:1px solid #e1e1e1; }
.form-buttons.border-none { border:none; }
.form-error { padding:12px; }
.form-error.border-bottom { border-bottom:1px solid #e1e1e1; }

.search-fields { display:inline-block; vertical-align:top; }
.search-fields + .search-fields { margin-left:20px; }
table.search-fields { display:table; }
table.search-fields > tbody > tr > td { padding:10px 10px 10px 20px; }
table.search-fields > tbody > tr + tr.border-top > td { padding-top:10px; border-top:1px solid #e1e1e1; }
.search-fields + table.search-fields { margin-left:0; }
dl.search-field { display:table; }
dl.search-field > dt { display:table-cell; width:120px; padding:8px 20px 8px 0; text-align:left; vertical-align:top; line-height:32px; position:relative; color:#888888; font-size:12px; }
dl.search-field > dd { display:table-cell; padding:8px 8px 8px 0; text-align:left; vertical-align:top; position:relative; }
dl.search-field > dt:after { display:inline-block; content:":"; padding:8px 0 8px 0; text-align:left; vertical-align:top; line-height:32px; color:#bbbbbb; position:absolute; top:0; right:8px; }
table.search-field { display:table; }
table.search-field > tbody > tr > th { width:80px; padding:8px 20px 8px 0; text-align:left; vertical-align:top; line-height:32px; position:relative; white-space:nowrap; color:#888888; }
table.search-field > tbody > tr > td { padding:8px 8px 8px 0; text-align:left; vertical-align:top; position:relative; white-space:nowrap; }
table.search-field > tbody > tr > td.wrap { white-space:normal; }
table.search-field > tbody > tr > th:after { display:inline-block; content:":"; padding:8px 0 8px 0; text-align:left; vertical-align:top; line-height:32px; color:#bbbbbb; position:absolute; top:0; right:8px; }
.search-buttons { border-top:1px solid #e1e1e1; }
.search-buttons.border-top { border-top:1px solid #e1e1e1; }
.search-buttons.border-bottom { border-bottom:1px solid #e1e1e1; }
.search-buttons.border-left { border-left:1px solid #e1e1e1; }
.search-buttons.border-right { border-right:1px solid #e1e1e1; }
.search-buttons.border { border:1px solid #e1e1e1; }
.search-buttons.border-none { border:none; }


/**** Button ****/
.btn { display:inline-block; margin:0; padding:0 8px 0 8px; font-size:13px; font-weight:normal; line-height:1; cursor:pointer; outline:0; text-decoration:none; text-align:center; vertical-align:middle; white-space:nowrap; overflow:hidden; border-radius:5px; position:relative; -moz-appearance:none; -webkit-appearance:none; appearance:none; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.btn:hover { text-decoration:none; }
.btn { font-size:13px; line-height:30px; }
.btn.small { font-size:12px; line-height:26px; }
.btn.xsmall { font-size:11px; line-height:22px; }
.btn.disabled { cursor:default; opacity:0.5; }
.btn.prev { padding-left:20px; }
.btn.prev:after { content:"\e929"; font-family:"icon"; position:absolute; top:0; left:0; opacity:0.75; height:100%; vertical-align:middle; padding:0 10px 0 10px; border-right:1px solid #cccccc; box-shadow:rgba(255,255,255,0.3) -1px 0 0 0 inset; -webkit-box-shadow:rgba(255,255,255,0.3) -1px 0 0 0 inset; -moz-box-shadow:rgba(255,255,255,0.3) -1px 0 0 0 inset; }
.btn.next { padding-right:20px; }
.btn.next:after { content:"\e92a"; font-family:"icon"; position:absolute; top:0; right:0; opacity:0.75; height:100%; vertical-align:middle; padding:0 10px 0 10px; border-left:1px solid #cccccc; box-shadow:rgba(255,255,255,0.3) 1px 0 0 0 inset; -webkit-box-shadow:rgba(255,255,255,0.3) 1px 0 0 0 inset; -moz-box-shadow:rgba(255,255,255,0.3) 1px 0 0 0 inset; }
.btn.submit.prev:after,.btn.submit.next:after, .btn.green.prev:after,.btn.prev.next:after { border-color:#078d34; }
.btn.alert.prev:after,.btn.alert.next:after, .btn.red.prev:after,.btn.red.next:after { border-color:#d94d38; }
.btn.default.prev:after,.btn.default.next:after, .btn.gray.prev:after,.btn.gray.next:after { border-color:#c7cad3; }
.btn > [class^="icon-"]:before { color:#ffffff; }
.btn.gray > [class^="icon-"]:before { color:#868c9f; }
.btn.default > [class^="icon-"]:before { color:#666666; }

.btn.submit,.btn.submit.disabled,.btn.submit.disabled:hover,
.btn.green,.btn.green.disabled,.btn.green.disabled:hover {
    color:#ffffff; border:1px solid #319a60;
    background: #51b67e;
    background: -moz-linear-gradient(top, #51b67e 0%, #319a60 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#51b67e), color-stop(100%,#319a60));
    background: -webkit-linear-gradient(top, #51b67e 0%,#319a60 100%);
    background: -o-linear-gradient(top, #51b67e 0%,#319a60 100%);
    background: -ms-linear-gradient(top, #51b67e 0%,#319a60 100%);
    background: linear-gradient(to bottom, #51b67e 0%,#319a60 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#51b67e', endColorstr='#319a60',GradientType=0 );
    box-shadow:rgba(255,255,255,0.2) 0px 0px 1px 1px inset;
    -webkit-box-shadow:rgba(255,255,255,0.2) 0px 0px 1px 1px inset;
    -moz-box-shadow:rgba(255,255,255,0.2) 0px 0px 1px 1px inset;
}
.btn.submit:hover, .btn.green:hover {
    background: #4caa76;
    background: -moz-linear-gradient(top, #4caa76 0%, #319a60 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4caa76), color-stop(100%,#319a60));
    background: -webkit-linear-gradient(top, #4caa76 0%,#319a60 100%);
    background: -o-linear-gradient(top, #4caa76 0%,#319a60 100%);
    background: -ms-linear-gradient(top, #4caa76 0%,#319a60 100%);
    background: linear-gradient(to bottom, #4caa76 0%,#319a60 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4caa76', endColorstr='#319a60',GradientType=0 );
    box-shadow:none; -webkit-box-shadow:none; -moz-box-shadow:none;
}
.btn.alert,.btn.alert.disabled,.btn.alert.disabled:hover,
.btn.red,.btn.red.disabled,.btn.red.disabled:hover {
    color:#ffffff; border:1px solid #d94d38;
    background: #d87568;
    background: -moz-linear-gradient(top, #d87568 0%, #d94d38 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d87568), color-stop(100%,#d94d38));
    background: -webkit-linear-gradient(top, #d87568 0%,#d94d38 100%);
    background: -o-linear-gradient(top, #d87568 0%,#d94d38 100%);
    background: -ms-linear-gradient(top, #d87568 0%,#d94d38 100%);
    background: linear-gradient(to bottom, #d87568 0%,#d94d38 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d87568', endColorstr='#d94d38',GradientType=0 );
    box-shadow:rgba(255,255,255,0.2) 0px 0px 1px 1px inset;
    -webkit-box-shadow:rgba(255,255,255,0.2) 0px 0px 1px 1px inset;
    -moz-box-shadow:rgba(255,255,255,0.2) 0px 0px 1px 1px inset;
}
.btn.alert:hover, .btn.red:hover {
    background: #d6685c;
    background: -moz-linear-gradient(top, #d6685c 0%, #d94d38 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d6685c), color-stop(100%,#d94d38));
    background: -webkit-linear-gradient(top, #d6685c 0%,#d94d38 100%);
    background: -o-linear-gradient(top, #d6685c 0%,#d94d38 100%);
    background: -ms-linear-gradient(top, #d6685c 0%,#d94d38 100%);
    background: linear-gradient(to bottom, #d6685c 0%,#d94d38 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6685c', endColorstr='#d94d38',GradientType=0 );
    box-shadow:none; -webkit-box-shadow:none; -moz-box-shadow:none;
}
.btn.default,.btn.default.disabled,.btn.default.disabled:hover,
.btn.gray,.btn.gray.disabled,.btn.gray.disabled:hover {
    color:#666666; border:1px solid #c7cad3;
    background: #f6f6f6;
    background: -moz-linear-gradient(top, #f6f6f6, #e6e6e6);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#f6f6f6), to(#e6e6e6));
    background: -webkit-linear-gradient(top, #f6f6f6, #e6e6e6);
    background: -o-linear-gradient(top, #f6f6f6, #e6e6e6);
    background: -ms-linear-gradient(top, #f6f6f6, #e6e6e6);
    background: linear-gradient(to bottom, #f6f6f6, #e6e6e6);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e6e6e6',GradientType=0 );
    box-shadow:rgba(255,255,255,0.2) 0px 0px 1px 1px inset;
    -webkit-box-shadow:rgba(255,255,255,0.2) 0px 0px 1px 1px inset;
    -moz-box-shadow:rgba(255,255,255,0.2) 0px 0px 1px 1px inset;
}
.btn.default:hover, .btn.gray:hover {
    background: #e6e6e6;
    background: -moz-linear-gradient(top, #eeeeee, #e6e6e6);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#e6e6e6));
    background: -webkit-linear-gradient(top, #eeeeee, #e6e6e6);
    background: -o-linear-gradient(top, #eeeeee, #e6e6e6);
    background: -ms-linear-gradient(top, #eeeeee, #e6e6e6);
    background: linear-gradient(to bottom, #eeeeee, #e6e6e6);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#e6e6e6',GradientType=0 );
    box-shadow:none; -webkit-box-shadow:none; -moz-box-shadow:none;
}
.btn.panel { width:120px; height:120px; text-align:center; margin:0 20px 20px 0; }
.btn.panel > [class^="icon-"] { display:block; margin:32px 0 12px 0; font-size:30px; opacity:0.75; }
.btn.panel > strong { display:block; font-style:normal; font-size:16px; line-height:18px; }

.btn.panel.size-S { width:90px; height:90px; text-align:center; margin:0 15px 15px 0; }
.btn.panel.size-S > [class^="icon-"] { margin:22px 0 1px 0; font-size:20px; }
.btn.panel.size-S > strong { font-size:13px; line-height:18px; }


.btns.fixed { position:fixed; bottom:0; left:0; width:100%; padding:12px; text-align:center; background:#f9f9f9 url("../../images/common/bg.dotted.png") top left repeat; border-top:1px solid #c7cad3; z-index:100; }


/**** Message ****/
#message { position:fixed; top:50px; left:0; z-index:20; width:100%; background:transparent; overflow:hidden; }
#message > .inner { position:relative; z-index:21; padding:25px; font-size:16px; font-weight:bold; color:#ffffff; text-align:center; vertical-align:middle; }
#message > .inner a.close { color:#ffffff; margin-left:10px; }
#message > .inner a.close > .icon-close { font-size:14px; font-weight:normal; margin-left:10px; }
#message > .inner a:hover > .icon-close { opacity:0.8; }
#message:before { content:""; position:absolute; top:0; left:0; z-index:20; width:100%; height:100%; background:#ced96c; opacity:0.9; }
#message.alert > .inner { color:#ee0000; }
#message.alert > .inner a.close { color:#ee0000; opacity:0.5; }
#message.alert:before { background:#ffcccc; }


/**** Dialog ****/
.page-dialog-preview { background-color:#555555; padding:40px; }
.page-dialog-preview > .dialog { margin:0 auto 0 auto; }
.dialog { position:relative; background:#ffffff; border-radius:5px; box-shadow:0 0 2px 2px rgba(0,0,0,0.2); -moz-box-shadow:0 0 2px 2px rgba(0,0,0,0.2); -webkit-box-shadow:0 0 2px 2px rgba(0,0,0,0.2); }
.dialog > .close { cursor:pointer; position:absolute; top:-7px; right:-7px; z-index:10; width:18px; height:18px; border-radius:9px; background:#565656; box-shadow:0 0 0 2px rgba(255,255,255,1),0 0 2px 2px rgba(0,0,0,0.2); -moz-box-shadow:0 0 0 2px rgba(255,255,255,1),0 0 2px 2px rgba(0,0,0,0.2); -webkit-box-shadow:0 0 0 2px rgba(255,255,255,1),0 0 2px 2px rgba(0,0,0,0.2); }
.dialog > .close:before { content:"\ed14"; font-family:"icon"; display:block; position:absolute; top:0; left:0; width:18px; height:18px; line-height:18px; font-size:10px; color:#ffffff; text-align:center; vertical-align:middle; }
.dialog > .close:hover { background:#777777; }
.dialog > .header { position:absolute; top:0; left:0; z-index:0; border-bottom:1px solid #e1e1e1; background:#ffffff; width:100%; height:55px;line-height:55px; color:#333333; text-align:center; vertical-align:middle; border-radius:5px 5px 0 0; }
.dialog > .header:after { content:""; display:block; position:absolute; bottom:1px; left:0; z-index:0; width:100%; height:27px;
    background:#ffffff;
    background:-moz-linear-gradient(top,#ffffff 2%,#f2f2f2 99%);
    background:-webkit-gradient(linear,left top,left bottom,color-stop(2%,#f2f2f2),color-stop(99%,#f2f2f2));
    background:-webkit-linear-gradient(top,#ffffff 2%,#f2f2f2 99%);
    background:-o-linear-gradient(top,#ffffff 2%,#f2f2f2 99%);
    background:-ms-linear-gradient(top,#ffffff 2%,#f2f2f2 99%);
    background:linear-gradient(to bottom,#ffffff 2%,#f2f2f2 99%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#f2f2f2',GradientType=0);
}
.dialog > .header > strong { position:relative; z-index:1; font-weight:bold; font-size:16px; }
.dialog > .footer { position:absolute; bottom:0; left:0; z-index:0; border-top:1px solid #e1e1e1; background-color:#f9f9f9; width:100%; height:55px;line-height:55px; color:#333333; text-align:center; vertical-align:middle; border-radius:0 0 5px 5px; }
.dialog > .content { position:absolute; top:0; left:0; padding:55px 0 55px 0; width:100%; height:100%; overflow:hidden; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.dialog > .content > .inner { padding:20px; width:100%; height:100%; overflow-x:hidden; overflow-y:auto; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.dialog > .error { position:absolute; top:0; left:0; width:100%; height:100%; text-align:center; background:rgba(0,0,0,0.2); }
.dialog > .error > .inner { display:inline-block; width:320px; background:#ffffff; color:#d94d38; padding:20px 30px 20px 30px; border:1px solid #d94d38; border-radius:4px; position:absolute; top:50%; left:50%; }
.dialog > .error > .inner > strong { display:block; font-weight:bold; }
.dialog > .error > .inner > div { font-size:11px; margin-top:4px; }
.dialog > .error > .inner > .close { cursor:pointer; position:absolute; top:-7px; right:-7px; width:18px; height:18px; border-radius:9px; background:#d94d38; box-shadow:0 0 0 2px rgba(255,255,255,1),0 0 2px 2px rgba(0,0,0,0.2); -moz-box-shadow:0 0 0 2px rgba(255,255,255,1),0 0 2px 2px rgba(0,0,0,0.2); -webkit-box-shadow:0 0 0 2px rgba(255,255,255,1),0 0 2px 2px rgba(0,0,0,0.2); }
.dialog > .error > .inner > .close:before { content:"\ed14"; font-family:"icon"; display:block; position:absolute; top:0; left:0; width:18px; height:18px; line-height:18px; font-size:10px; color:#ffffff; text-align:center; vertical-align:middle; }
.dialog.confirm > .header { height:30px; line-height:30px; }
.dialog.confirm > .header:after { height:15px; }
.dialog.confirm > .content { padding-top:30px; }
.dialog.simple > .content { position:relative; padding-top:0; padding-bottom:45px; border-radius:3px 3px 0 0; }
.dialog.simple > .content > .inner { padding:0; }
.dialog.simple > .footer { height:45px;line-height:45px; background:#f9f9f9 url("../../images/common/bg.dotted.png") top left repeat !important; border-radius:0 0 3px 3px; }
.dialog.picture > .content { position:relative; padding-top:0; padding-bottom:0; border-radius:3px; }
.dialog.picture > .content > .inner { padding:0; }

.dialog > .prev { cursor:pointer; position:absolute; bottom:-40px; left:0; z-index:10; width:30px; height:30px; line-height:30px; border-radius:15px; background:#565656; color:#ffffff; font-size:16px; text-align:center; vertical-align:middle; }
.dialog > .prev:before { content:"\ed45"; font-family:"icon"; position:relative; left:-1px; }
.dialog > .prev.disabled { cursor:default; }
.dialog > .prev.disabled:before { opacity:0.5; }
.dialog > .next { cursor:pointer; position:absolute; bottom:-40px; right:0; z-index:10; width:30px; height:30px; line-height:30px; border-radius:15px; background:#565656; color:#ffffff; font-size:16px; text-align:center; vertical-align:middle; }
.dialog > .next:before { content:"\ed41"; font-family:"icon"; position:relative; left:1px; }
.dialog > .next.disabled { cursor:default; }
.dialog > .next.disabled:before { opacity:0.5; }




/**** .radar-chart ****/
.radar-chart { position:relative; }
.radar-chart > svg { display:block; width:100px; margin:0 auto 0 auto; position:relative; z-index:0; }
.radar-chart > svg > circle.center { fill:#a9d6c3; stroke:none; stroke-width:0; opacity:0.75; }
.radar-chart > svg > polygon.guide { fill:none; stroke:#a9d6c3; stroke-width:1px; opacity:0.5; }
.radar-chart > svg > line.axis { fill:none; stroke:#a9d6c3; stroke-width:1px; opacity:0.5; stroke-dasharray:2px }
.radar-chart > svg > polygon.score { fill:#239765; stroke:none; stroke-width:0; opacity:0.8; }
.radar-chart > span { position:absolute; z-index:1; white-space:nowrap; }