@charset "utf-8";

/**
 * Created by shin on 2015-06-22.
 * 화면 ui 구성 파일
 * 라리브러리 스타일 override
 */

/* fonts */
@font-face {
    font-family: 'Nanum Gothic';
    src: url('../fonts/NanumGothicCompact.eot');  /* IE6-8 */
    src: local('☺'),
    url('../fonts/NanumGothicCompact.woff') format('woff'),  /* FF3.6, IE9 */
    url('../fonts/NanumGothicCompact.ttf') format('truetype');  /* Saf3+,Chrome,FF3.5,Opera10+ */
}

/* for html5 elements */
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var, b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {margin:0; padding:0; border:0; outline:0; background:transparent;}
article, aside,details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:normal; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted;cursor:help; }

/* global */
body, html {}
body, div, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button { margin:0; padding:0; }
body { font-family:"Nanum Gothic","돋움",dotum,Apple SD Gothic Neo, AppleGhothic; color:#000; font-size:12px; -webkit-text-size-adjust:none; }
table, table td, input, select, textarea{ font-size:12px; font-family:"Nanum Gothic","돋움",dotum,Apple SD Gothic Neo, AppleGhothic; }
ul, ol, li { list-style:none; }
li { vertical-align:top; }
div {box-sizing: border-box;}
fieldset,form, button { font-family:"Nanum Gothic","돋움",dotum,Apple SD Gothic Neo, AppleGhothic; }
img { border:0; }
hr, legend { display:none; }
em, address { font-style:normal; }
table { border-collapse:collapse; }
textarea  { overflow:auto;  font-size:12px; color:#000; border:1px solid #d2d2d2; resize:none; font-family:"Nanum Gothic","돋움",dotum,Apple SD Gothic Neo, AppleGhothic; }
a { color:#0000cc; text-decoration:none; cursor: pointer;}
a:hover, a:active, a:focus { text-decoration:underline; }

/* layout */
html {height: 100%;}
body {background: #fff; position: relative; min-height: 100%;}

#nav {position: absolute; top: 0; left: 0; width: 100px; min-height: 100%; z-index: 10; background: #2a2d30;}
#nav h1 {cursor: pointer;}
#nav ul {overflow: hidden; position: relative;}
#nav li a {display: block; position: relative; height: 26px; padding-top: 44px; border-bottom: 1px solid #1885a4; border-right: 1px solid #1692b5; background: url("../img/bg_nav.gif") 0 0 #13a0c7; color: #fff; text-align: center; font-size: 14px; font-weight: bold; text-decoration: none; cursor: pointer; }
#nav li.bout a { background-position:  0 0; }
#nav li.map a { background-position:  0 -71px; }
#nav li.chart a { background-position:  0 -142px; }
#nav li.table a { background-position:  0 -213px; }
#nav li.dashboard a { background-position:  0 -284px; }
#nav li.contact a { background-position:  0 100%; }

#nav li.selected a,
#nav li a:hover {background-position-x:-100px; color: #13a0c7; border-right: 1px solid #e6e6e7;}

#snb { position: absolute; top: 0; left: 0; width: 200px; min-height: 100%; background: #ebebeb; padding: 50px 20px 0 20px; }

#wrapper{position: absolute; top: 0; left: 0; min-width: 100%; min-height: 100%;}

#main_container {position: relative; margin-left: 100px; min-height: 1000px;}

.visual1 {position: absolute; top: 28%; left: 0; width: 24%; max-width: 306px;}
.visual2 {position: absolute; bottom: 0; right: 0; width: 35%; max-width: 445px;}
.visual3 {position: absolute; top: 0; right: 0; width: 17%; max-width: 215px;}
.visual img {width: 100%;}

.main_chart {position: absolute; width: 100%; height: 100%; background: url("../img/@visual.png") no-repeat 50% 50%;}

.main_txt {position: absolute; top: 50%; left: 0; width: 100%; text-align: center; font-size: 16px; color: #898989; line-height: 28px; margin-top: -164px;}
.main_txt p {padding-bottom: 24px;}
.main_txt a {display: block; width: 120px; margin: 32px auto 0 auto;}

#sub_container {position: relative; margin-left: 100px; min-height: 1000px; padding:0 30px 0 30px;}
#sub_container h2 {font-size: 24px; font-weight: bold; color: #333; border-bottom: 1px solid #bfbfbf; padding: 50px 0 22px 0; }
#sub_container.chart_container {padding-left: 230px;}

.list_wrapper ul {position: relative; overflow: hidden; padding-top: 30px;}
.list_wrapper li {position: relative; float: left; width: 360px; height: 220px;  border: 1px solid #d8d9da; margin: 0 24px 24px 0; border-radius: 5px; overflow: hidden; cursor: pointer;}
.list_wrapper li em {-webkit-transition: all 300ms linear; transition: all 300ms linear;}
.list_wrapper li .thumb {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: 100% auto; background-position: 50% 50%; background-repeat: no-repeat; -webkit-transition: all 200ms linear; transition: all 200ms linear;   border-radius: 5px;}
.list_wrapper li .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #13a0c7; opacity: 0; border-radius: 5px; padding:50px;}
.list_wrapper li .bg p {opacity: 1; font-size:13px; line-height:24px; color:#fff;}
.list_wrapper li em {display: block; box-sizing: border-box; position: absolute; bottom: 0; left: 0; width: 100%; background: #f3f4f5; font-size: 13px; font-weight: bold; color: #4088c7; height: 40px; line-height: 40px; padding-left: 8px; white-space: nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -ms-text-overflow:ellipsis; overflow:hidden; word-break:keep-all; word-wrap:normal;}

.chat_all_wrapper {position: relative; padding-bottom: 20px;}
.chat_all_wrapper h3 {font-size: 18px; color: #333; font-weight: bold; padding: 26px 0 0 0;}
/*.chat_all_wrapper .list_wrapper ul {padding-top: 16px;}*/
/*.chat_all_wrapper .list_wrapper li { width: 140px; height: 87px; margin: 0 10px 10px 0; }*/
/*.chat_all_wrapper .list_wrapper li div {font-size: 11px; height: 24px; line-height: 24px; padding-left: 4px;}*/

.list_wrapper li.active{-webkit-box-shadow: 0px 0px 19px 0px rgba(0,0,0,.5);
    -moz-box-shadow: 0px 0px 19px 0px rgba(0,0,0,.5);
    box-shadow: 0px 0px 19px 0px rgba(0,0,0,.5);}
.list_wrapper li.active em { color: #fff; background: rgba(19,160,199,1); }
/*.list_wrapper li:hover .bg {opacity: .6}*/
.list_wrapper li.active .thumb {width: 120%; height: 120%; margin: -10% 0 0 -10%; -webkit-transform: rotate(20deg); transform: rotate(20deg);}

.menu_list {position: relative; padding: 60px 0 0 0;}
.menu_list h3 {font-size: 18px; font-weight: bold; color: #333; padding-bottom: 4px;}
.menu_list li a {line-height: 27px; font-size: 14px; color: #333; font-weight: bold;}
.menu_list li.selected a {color: #13a0c7; text-decoration: underline;}


.serach_box { position: relative; border: 1px solid #d3d4d6; border-radius: 5px; background: #fff; height: 30px;}
.serach_box input[type=text] {width: 116px; height: 28px; line-height: 28px; margin-left: 4px; border: 0px none;}
.serach_box a {position: absolute; top: 0; right: 4px;}

.keyword {color: #f9731a}

.overlay {position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: url("../img/bg_overlay.png"); z-index: 1000;}
.overlay .inner_contents {position: absolute; top: 2%; bottom:2%; left: 2%; right: 2%; background: #fff; border-radius: 20px; -webkit-box-shadow: 0px 0px 19px 0px rgba(255,255,255,.5);
    -moz-box-shadow: 0px 0px 19px 0px rgba(255,255,255,.5);
    box-shadow: 0px 0px 19px 0px rgba(255,255,255,.5);}
.overlay .iframe_wrapper {position: absolute; top: 0px; bottom:0px; left: 0px; right: 0px; border-radius: 20px; overflow: hidden;}
.overlay .inner_contents iframe {width: 100%; height: 100%; order-radius: 20px;}
.overlay .detail_close {position: absolute; top: 40px; right: 40px; z-index: 10;}

.empty {text-align: center; font-size: 14px; font-weight: bold;}

.txt_contact {position: relative; font-size: 18px; line-height: 30px; color: #333; padding: 16px 0 35px 5px;}

#map {position: relative; width: 100%; height: 400px;}