/* header */
#header{width:100%;height:68px; border-bottom:1px solid #ccc; margin:0 auto;background-color: #fff;}
#header .inner{position:relative;margin:0 auto;height:68px; border-bottom:1px solid #ccc;}
#header .inner h1{position:absolute;top:50%;transform:translateY(-50%);left:30px;}
#header .inner .login_wrap{position:relative;float:right;top:50%;transform:translateY(-50%);right:5px;}
#header .inner .login_wrap_after{position:relative;float:right;top:50%;transform:translateY(-50%);}
#header .inner .login_wrap_after p{position:relative;font-size:13px;float:left;font-family: 'Roboto', sans-serif;font-weight:bold;line-height:34px;padding-right:17px;}
#header .inner .login_wrap_after p span{vertical-align:middle;font-size:34px;padding-right:5px;}
#header .inner .gnb_btn{/*width:76px;*/ min-width: 65px;line-height:32px;vertical-align:middle;border:1px solid #ccc;display:inline-block;text-align:center;color:#666;font-size:13px;margin-right:3px;padding:0px 8px;}

#gnb .inner{height:51px;margin:0 auto;}
#gnb .inner > ul > li{position:relative;display:inline-block;width:275px;line-height:51px;text-align:center;float:left;}
#gnb .inner > ul > li > a{padding:13px 0;font-size:17px;font-family: 'Roboto', sans-serif;color: #333;}
#gnb .inner > ul > li > a:hover{color: #335c95;border-bottom:4px solid #335c95;text-decoration: none;}
#gnb .inner > ul > li > a.on{color: #335c95;border-bottom:4px solid #335c95;}
#gnb .inner > ul > li > a.on_menu{color: #335c95;border-bottom:4px solid #335c95;}
#gnb .inner .depth{position:absolute;top:51px;left:59px;width: 152px;height:96px;background:#fff;display:none;z-index:99;}
#gnb .inner .depth li{text-align:left;padding:11px 21px 0 21px;line-height:24px;}
#gnb .inner .depth li:before{content:"·"; padding-right:5px;font-size:14px;}
#gnb .inner .depth li a{vertical-align:middle;font-weight:500;}
#gnb .inner .depth li a:hover{color: #335c95;font-weight:bold;}

/* container */
#container{position:relative;height:767px;margin:0 auto;-webkit-background-size:cover;
background-size:cover;background-image:url("../images/main_bg.jpg");background-position:top center;background-repeat:no-repeat;}
#container .conwrap{position:relative;height:767px;margin:0 auto;}
#container .conwrap .search{position:absolute;top:220px;left:50%;transform:translateX(-50%);padding:7px;width:543px;height:64px;background:rgba(0, 0, 0, 0.2);}
#container .conwrap .search .src_bg{position:relative;border:1px solid #002554;background:#fff;width:465px;height:62px;float:left;}
#container .conwrap .search input{position:absolute;width:400px;left:32px;top:50%;transform:translateY(-50%);border:0;font-family:'Roboto', sans-serif;color: #333;font-size:18px;font-weight:300;outline: none;}
#container .conwrap .search button{width:76px;height:64px;background:#041327;border:0;float:left;background-image:url("../images/src_btn.gif");background-repeat:no-repeat;background-position:center;}
#container .src_tit{position:absolute;width:802px;height:41px;top:329px;left:50%;transform:translateX(-50%);}
#container .week_inner{position:relative;top:396px;width:802px;height:149px;margin:0 auto;}
#container .week_inner ul li{display:block;position:relative;float:left;padding-right:16px;}
#container .week_inner ul li button{background:none;border:0;}
#container .week_inner ul li.none{padding-right:0;}
#container .week_inner ul li img.on { position:absolute;opacity:0;top:0;left:0;}


/* footer */
#sitemap{width:100%;height:234px;background:#3f4a59;margin:0 auto;}
#sitemap .inner{height:234px;margin:0 auto;}
#sitemap .inner .list{position:relative;padding-top:34px;}
#sitemap .inner .list .info{float:left;padding-left:7px;width:158px;height:200px;}
#sitemap .inner .list .com{float:left;padding-left:40px;width:186px;height:200px;}
#sitemap .inner .list .custom{float:left;padding-left:23px;width:135px;height:200px;}
#sitemap .inner .list .mem{float:left;padding-left:30px;width:151px;height:200px;}
#sitemap .inner .list > div > p{font-size:14px;color:#fff;padding:7px 0;}
#sitemap .inner ul li{line-height:18px;}
#sitemap .inner ul li a{color:#9b9d9a;font-size:12px;}
#sitemap .inner .line{float:left;width:1px;height:184px;background:#777f8a;}
#sitemap .inner .etc{float:left;position:relative;width:368px;height:184px;}
#sitemap .inner .etc dl{margin-left:52px;background-size:52px 52px;padding-left:60px;padding-top:7px;height:72px;background-repeat:no-repeat;background-position:left center;}
#sitemap .inner .etc dl:last-child{margin-top:7px;}
#sitemap .inner .etc dt{color: #fff;font-weight:500;}
#sitemap .inner .etc dd{color:#9b9d9a;font-size:12px;}
#sitemap .inner .etc .add_img{background-image:url("../images/add_img.gif");}
#sitemap .inner .etc .call_img{background-image:url("../images/call_img.gif");}
                                   
#footer{width:100%;height:34px;background:#101922;margin:0 auto;}
#footer .inner{margin:0 auto;}
#footer .inner p{text-align:center;color: #fff;font-size:12px;line-height:34px;}
#footer .inner a{text-align:center;color: #fff;font-size:12px;line-height:34px;padding: 0px 10px;}
#footer .inner a:hover{ text-decoration: none; }


.ol-box{box-sizing:border-box;border-radius:2px;border:2px solid #00f}
/*.ol-mouse-position{top:8px;right:8px;position:absolute}*/
.ol-scale-line{background:rgba(0,60,136,.5);border-radius:4px;bottom:8px;left:8px;padding:2px;position:absolute}
.ol-scale-line-inner{border:1px solid #eee;border-top:none;color:#eee;font-size:10px;text-align:center;margin:1px;will-change:contents,width}
.ol-overlay-container{will-change:left,right,top,bottom}
.ol-unsupported{display:none}
.ol-unselectable,.ol-viewport{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.ol-selectable{-webkit-touch-callout:default;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}
.ol-grabbing{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}
.ol-grab{cursor:move;cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}
.ol-control{position:absolute;background-color:rgba(255,255,255,.4);border-radius:4px;padding:2px}
.ol-control:hover{background-color:rgba(255,255,255,.6)}
/*.ol-zoom{bottom:.3em;left:.5em}*/
.ol-rotate{top:.5em;right:.5em;transition:opacity .25s linear,visibility 0s linear}
.ol-rotate.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}
.ol-zoom-extent{top:4.643em;left:.5em}
.ol-full-screen{right:.5em;top:.5em}
@media print{ 
    .ol-control{display:none}
}
.ol-control button{display:block;margin:1px;padding:0;color:#fff;font-size:1.14em;font-weight:700;text-decoration:none;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:rgba(0,60,136,.5);border:none;border-radius:2px}
.ol-control button::-moz-focus-inner{border:none;padding:0}
.ol-zoom-extent button{line-height:1.4em}
.ol-compass{display:block;font-weight:400;font-size:1.2em;will-change:transform}
.ol-touch .ol-control button{font-size:1.5em}
.ol-touch .ol-zoom-extent{top:5.5em}
.ol-control button:focus,.ol-control button:hover{text-decoration:none;background-color:rgba(0,60,136,.7)}
.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}
.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}
.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em)}
.ol-attribution ul{margin:0;padding:0 .5em;font-size:.7rem;line-height:1.375em;color:#000;text-shadow:0 0 2px #fff}
.ol-attribution li{display:inline;list-style:none;line-height:inherit}
.ol-attribution li:not(:last-child):after{content:" "}
.ol-attribution img{max-height:2em;max-width:inherit;vertical-align:middle}
.ol-attribution button,.ol-attribution ul{display:inline-block}
.ol-attribution.ol-collapsed ul{display:none}
.ol-attribution:not(.ol-collapsed){background:rgba(255,255,255,.8)}
.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0;height:1.1em;line-height:1em}
.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}
.ol-attribution.ol-uncollapsible button{display:none}
.ol-zoomslider{top:4.5em;left:.5em;height:200px}
.ol-zoomslider button{position:relative;height:10px}
.ol-touch .ol-zoomslider{top:5.5em}
.ol-overviewmap{left:.5em;bottom:.5em}
.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}
.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button{display:inline-block}
.ol-overviewmap .ol-overviewmap-map{border:1px solid #7b98bc;height:150px;margin:2px;width:150px}
.ol-overviewmap:not(.ol-collapsed) button{bottom:1px;left:2px;position:absolute}
.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button{display:none}
.ol-overviewmap:not(.ol-collapsed){background:rgba(255,255,255,.8)}
.ol-overviewmap-box{border:2px dotted rgba(0,60,136,.7)}
.ol-overviewmap .ol-overviewmap-box:hover{cursor:move}
    /*# sourceMappingURL=ol.css.map */
.ol-zoom{ left: 8px; bottom: 33px; }
.ol-mouse-position{ font-size: 12px;background: rgba(0,60,136,.5);bottom: 34px;left: 40px;padding: 4px 5px;position: absolute;font-weight: bold;line-height: 1.2;border: 2px solid rgba(255,255,255,.7);border-radius: 2px;color: #eee;}
.marker-properties,.metadata {border-collapse:collapse;font-size:11px;width:100%;overflow:auto;/*border-bottom:1px solid #ccc;*//* Equal to 6 rows *//*max-height:189px;*/}
.marker-properties {display:block;}
.metadata {display:table;}
.marker-properties th {width:33.3333%;min-width:100px;white-space:nowrap;border:1px solid #ccc;text-align:left;padding:2px;padding-left:10px;}
.marker-properties td { border:1px solid #ccc;width:60%;padding:2px;padding-left:10px;}
.marker-properties.display td,.marker-properties.display th {padding:5px 10px;}
.marker-properties tr:last-child td,.marker-properties tr:last-child th {border-bottom:none;}
.marker-properties tr:nth-child(even) th,.marker-properties tr:nth-child(even) td,.metadata tr:nth-child(even) td {background-color:#f7f7f7;}
.gm-style-iw-c{ max-height:187px !important; }
.gm-style-iw-d{ max-height:175px !important; }
#port_container{width:100% !important;}
.inner_main{ margin: 0 auto; }
.src_area{ position: absolute;border: 1px solid #ccc;background: #969696;padding: 12px 0;width: 378px;/*left: 50%;margin-left: -178;*/ }

/*right panel*/
#rinfo {opacity: 0.9;position:fixed;top:44px;right:-350px;bottom:0;height: calc(100vh - 78px);width:350px;background:#fff;z-index:1010;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#rinfo.shadow {box-shadow:-2px 0px 35px rgba(0,0,0,.65);}
#rinfo #ajaxcontents {position:relative;height:100%;padding:0;z-index:100}
#rinfo a.btnright {display: none;width: 45px;height: 49px;position: absolute;text-align: center;line-height: 42px;top:0px;left: -45px;background: #1581a8;color: #fff;font-size: 16px;z-index: 0;border-radius: 10px 0px 0px 10px;}
#rinfo a.btnright i{margin-top: 15px;}

/*left panel*/
#linfo {opacity:0.9;position:fixed;top:44px;left:-800px;bottom:0;height: calc(100vh - 78px);width:800px;background:#fff;z-index:1010;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#linfo.shadow {box-shadow:-2px 0px 35px rgba(0,0,0,.65);}
#linfo #ajaxcontents {position:relative;height:100%;padding:0;z-index:100}
#linfo a.btnleft {text-decoration: none;width:173px;padding: 0px 20px;position:absolute;text-align:center;line-height:42px;top:0px;right:-173px;background:#1581a8;color:#fff;font-size:16px;z-index:0;border-radius: 0px 10px 10px 0px;}
#linfo a.btnleft:hover{ text-decoration: none; }
#linfo a.btnleft i{margin-top: 15px;margin-left: 15px;}
#linfo a .linfotext{ float:left; }

/*left2 panel*/
#l2info {opacity:0.9;position:fixed;top:44px;left:-800px;bottom:0;height: calc(100vh - 78px);width:800px;background:#fff;z-index:1010;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#l2info.shadow {box-shadow:-2px 0px 35px rgba(0,0,0,.65);}
#l2info #ajaxcontents {position:relative;height:100%;padding:0;z-index:100}
#l2info a.btnleft {text-decoration: none;width:173px;padding: 0px 20px;position:absolute;text-align:center;line-height:42px;top:50px;right:-173px;background:#1581a8;color:#fff;font-size:16px;z-index:0;border-radius: 0px 10px 10px 0px;}
#l2info a.btnleft:hover{ text-decoration: none; }
#l2info a.btnleft i{margin-top: 15px;margin-left: 15px;}
#l2info a .l2infotext{ float:left; }

/*popup*/
#l2info a.btn_pop{display: inline-block; position: absolute; width: 24px; height: 42px; top: 50px; right: -197px; font-size: 0; z-index: 0; background-repeat: no-repeat; background-position: right center; background-image: url(../images/common/btn_pop.png);}
#l3info a.btn_pop{display: inline-block; position: absolute; width: 24px; height: 42px; top: 100px; right: -197px; font-size: 0; z-index: 0; background-repeat: no-repeat; background-position: right center; background-image: url(../images/common/btn_pop.png);}

.popup_layer{display: none; position: absolute; top: 94px; left: 220px; background-color: #fff; border: 1px solid #eaeaea; z-index: 9999;}
.popup_layer .pop_header{position: relative; padding: 25px 40px 0;}
.popup_layer .pop_header h2{margin: 0; padding-bottom: 16px; border-bottom: 1px solid #666; font-size: 24px; line-height: 30px; color: #444; font-weight: 500;}
.popup_layer .pop_header .close{width: 24px; height: 24px; font-size: 0; position: absolute;top: 19px; right: 19px; background-repeat: no-repeat; background-image: url(../images/common/pop_close.png); padding: 0; opacity: 1;}
.popup_layer .pop_body{padding: 34px 30px 25px; overflow-y: auto; max-height: 660px;}

/*left3 panel*/
#l3info {opacity:0.9;position:fixed;top:44px;left:-800px;bottom:0;height: calc(100vh - 78px);width:800px;background:#fff;z-index:1010;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#l3info.shadow {box-shadow:-2px 0px 35px rgba(0,0,0,.65);}
#l3info #ajaxcontents {position:relative;height:100%;padding:0;z-index:100}
#l3info a.btnleft {text-decoration:none;width:173px;padding: 0px 20px;position:absolute;text-align:center;line-height:42px;top:100px;right:-173px;background:#1581a8;color:#fff;font-size:16px;z-index:0;border-radius: 0px 10px 10px 0px;}
#l3info a.btnleft:hover{ text-decoration: none; }
#l3info a.btnleft i{margin-top: 15px;margin-left: 15px;}
#l3info a .l3infotext{ float:left; }
/*#l3info .tit_area{ background: #1581a8;height: 24px; }*/
/*left4 panel*/
#l4info {opacity:0.9;position:fixed;top:44px;left:-500px;bottom:0;height: calc(100vh - 78px);width:500px;background:#fff;z-index:1010;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#l4info.shadow {box-shadow:-2px 0px 35px rgba(0,0,0,.65);}
#l4info #ajaxcontents {position:relative;height:100%;padding:0;z-index:100}
#l4info a.btnleft {text-decoration:none;width:173px;padding: 0px 20px;position:absolute;text-align:center;line-height:42px;top:150px;right:-173px;background:#1581a8;color:#fff;font-size:16px;z-index:0;border-radius: 0px 10px 10px 0px;}
#l4info a.btnleft:hover{ text-decoration: none; }
#l4info a.btnleft i{margin-top: 15px;margin-left: 15px;}
#l4info a .l4infotext{ float:left; }

.viewheader{ overflow-y:scroll;height:100vh; }
.fa-pulse{ margin-left: 350px;margin-top: 150px;position: absolute;color: #1581a8; }

.info_tit_long{ width:100% !important;color:#fff;text-align:center; }
.info_tit{ background: #1581a8;height: 20px;border-radius: 3px;color:#fff;}
#linfo .tse-content,#l2info .tse-content, #l3info .tse-content{ margin:5px; }
.l1infotext,.l2infotext, .l3infotext{ display:inline-block; }
#daterange{ width: 100%;margin-top: 4px;font-size: 14px;color: #666;height: 34px;padding-left: 10px; }
.info_sub{ width:100%; display:inline-block;/*margin-right:2%;*/margin-top: 5px;color:#fff;text-align:center; }
.flatpickr-months .flatpickr-month,.flatpickr-current-month .flatpickr-monthDropdown-months,span.flatpickr-weekday, .flatpickr-weekdays { background:#1581a8 !important; }
span.flatpickr-weekday{ color:#fff !important; }
.flatpickr-day.selected
, .flatpickr-day.startRange
, .flatpickr-day.endRange
, .flatpickr-day.selected.inRange
, .flatpickr-day.startRange.inRange
, .flatpickr-day.endRange.inRange
, .flatpickr-day.selected:focus
, .flatpickr-day.startRange:focus
, .flatpickr-day.endRange:focus
, .flatpickr-day.selected:hover
, .flatpickr-day.startRange:hover
, .flatpickr-day.endRange:hover
, .flatpickr-day.selected.prevMonthDay
, .flatpickr-day.startRange.prevMonthDay
, .flatpickr-day.endRange.prevMonthDay
, .flatpickr-day.selected.nextMonthDay
, .flatpickr-day.startRange.nextMonthDay
, .flatpickr-day.endRange.nextMonthDay{ background:#1581a8 !important; border-color: #1581a8 !important; }
/*.btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open>.dropdown-toggle.btn-primary{ background-color:#1581a8 !important; }*/
/*#map {
  position: relative;
}*/

#info { position: absolute;height: 1px;width: 1px;z-index: 100;}
.tooltip.in { opacity: 1; filter: alpha(opacity=100);}
.tooltip.top .tooltip-arrow { border-top-color: white;}
.tooltip-inner { border: 2px solid white;}

#searchform {z-index:1;top:0px;position:absolute;left:50%;margin-left: -197px;padding:4px;width:394px;height:42px;border-radius:5px;background:rgba(0, 0, 0, 0.2);}
#searchform .search .src_bg{position:relative;border:1px solid #002554;background:#fff;width:345px;height:34px;float:left;border-radius: 0px 5px 5px 0px;}
#searchform .search input{position:absolute;width:320px;left:12px;top:50%;transform:translateY(-50%);border:0;font-family:'Roboto', sans-serif;color: #333;font-size:14px;font-weight:300;outline: none;}
#searchform .search button{text-indent: -10000%;border-radius: 5px 0px 0px 5px;width:40px;height:34px;background:#041327;border:0;float:left;background-image:url("../images/src_btn.gif");background-repeat:no-repeat;background-position:center;}

.result-wrap {position:absolute;left:0;width:400px;left:50%;margin-left:-200px;max-height:400px;box-shadow:7px 7px 20px rgba(0,0,0,.28);z-index:9999;}

#resulttop {max-height:360px;overflow-y:auto;background: rgba(255, 255, 255, 0.75);}
#resulttop .sitem {border-bottom:1px #ddd solid;padding:8px 10px;height:45px;white-space: nowrap;text-overflow: ellipsis;overflow:hidden;line-height:1.2}
#resulttop .sitem:hover {background:rgba(188,188,188,0.6);}
#resulttop .sitem:after {content:""; display:block;float:none;clear:both;} 
#resulttop .sitem .img-thumbnail {float:left;margin-right:5px;padding:0px;border-radius:0px;margin-top: -3px;width: 50px;height: 35px;border: none;}
#resulttop .sitem .typeicon { margin:-4px 5px 0px 0px; width:35px;}
#resulttop .sitem .flags { margin-right:10px; }
#resulttop .sitem .cright {cursor:pointer;width:230px;float:left;}
#resulttop .sitem .cright .cpath {color:#3EA9CD;margin:0px;font-size:14px;font-weight:bold;}
#resulttop .sitem .cright .sbjval {font-size:9px; margin:0px;}
#resulttop .sitem .clink {width: 40px;float: right;}
.closebtn{position: absolute;right: -43px;top:0px;padding: 16px;cursor: pointer;background-color: #1581a8;border-radius: 0px 5px 5px 0px;color: #fff; }

.rpclosebtn{ float: left;cursor:pointer; }
.rpclosebtn i{ padding:10px; }

/*scroll*/
/*.tse-scrollable {position: relative;overflow: hidden;height: calc(100vh - 77px);}*/
/*.tse-scrollable .tse-scroll-content {overflow-y: scroll;}*/
/*.tse-scrollable .tse-scroll-content::-webkit-scrollbar {width: 0;height: 0;}*/
/*.tse-scrollbar {z-index: 99;position: absolute;top: 0;right: 0;bottom: 0;width:4px;}
.tse-scrollbar .drag-handle {position: absolute;right:0px;min-height: 10px;width:4px;opacity: 0;-webkit-transition: opacity 0.2s linear;-moz-transition: opacity 0.2s linear;-o-transition: opacity 0.2s linear;-ms-transition: opacity 0.2s linear;transition: opacity 0.2s linear;background:#0066cc;-webkit-background-clip: padding-box;-moz-background-clip: padding;}
.tse-scrollbar:hover .drag-handle {opacity: 0.7;-webkit-transition: opacity 0 linear;-moz-transition: opacity 0 linear;-o-transition: opacity 0 linear;-ms-transition: opacity 0 linear;transition: opacity 0 linear;}
.tse-scrollbar .drag-handle.visible {opacity:0.9;}
.scrollbar-width-tester::-webkit-scrollbar {width: 0;height: 0;}
.tse-scrollable.horizontal .tse-scroll-content {overflow-x: scroll;overflow-y: hidden;}
.tse-scrollable.horizontal .tse-scroll-content::-webkit-scrollbar,.tse-scrollable.horizontal .tse-scroll-content::scrollbar {width: auto;height: 0;}
.tse-scrollable.horizontal .tse-scrollbar {top: auto;left: 0;width: auto;height: 11px;}
.tse-scrollable.horizontal .tse-scrollbar .drag-handle {right:auto;top:0px;height:7px;min-height:0;min-width:4px;width: auto;}
*/
/*선박정보*/
/*#vessel_view{width:100%;border-top:1px solid #ccc;/*background:#e4ebf1;*//*padding-bottom:100px;}*/
#vessel_view .inner{padding-bottom:50px;background: #fff;}
#vessel_view .inner .tit_area{position:absolute;background:#1581a8;height:49px;width:350px;top:0px;}
#vessel_view .inner .tit_area h2{position:absolute;margin:0px;left:10px;display:inline-block;line-height:49px;background-image:url("../images/sub/vessel_ico.png");background-repeat:no-repeat;background-position:left center;}
#vessel_view .inner .tit_area h2.port{position:absolute;margin:0px;left:10px;display:inline-block;line-height:49px;background-image:url("../images/sub/anchor_white.png");background-repeat:no-repeat;background-position:left center;}
#vessel_view .inner .tit_area h2 span{display:block;padding-left:45px;font-size:24px;font-weight:300;color: #fff;overflow: hidden;height: 49px;}
#vessel_view .inner .tit_area .state{position:absolute;top:50%;transform:translateY(-50%);right:20px;padding:5px 20px;font-size:14px;color: #fff;border-radius:10px;background:#085c7c;}
#vessel_view .inner .con_area{padding:0 10px;margin:50px 0px;}
#vessel_view .inner .con_area .table_box{}
#vessel_view .inner .con_area .table_box table{font-size:12px;}
#vessel_view .inner .con_area .table_box th{border:1px solid #ccc;width:109px;text-align:left;padding-left:6px;line-height:18px;font-weight:bold;color: #666;}
#vessel_view .inner .con_area .table_box td{border:1px solid #ccc;width:100%;padding-left:6px;line-height:18px;}
#vessel_view .inner .con_area .box{margin-top:40px;}
#vessel_view .inner .con_area .con_tit{font-size:18px;font-weight:bold;color: #1581a8;margin:0px;padding:10px;cursor:pointer;border-bottom: 1px solid;}
#vessel_view .inner .con_area .box .info_area{border:1px solid #ccc;padding:24px 30px;height:117px;}
#vessel_view .inner .con_area .box .info_area .loca_area{position:relative;float:left;width:545px;height:120px;}
#vessel_view .inner .con_area .box .info_area .loca_area .grap{position:relative;width:545px;height:70px;background:url("../images/sub/grap_bg.jpg")no-repeat;}
#vessel_view .inner .con_area .box .info_area .loca_area .grap_posi{position:absolute;top:39px;left:38px;width:466px;height:8px;}
#vessel_view .inner .con_area .box .info_area .loca_area .grap_posi .s_circle{position:absolute;width:18px;height:18px;top:-5px;left:-2px;background:#666161;border-radius:18px;}
#vessel_view .inner .con_area .box .info_area .loca_area .grap_posi .l_circle{position:absolute;width:18px;height:18px;top:-5px;right:0;background:#0577a1;border-radius:18px;}
#vessel_view .inner .con_area .box .info_area .loca_area .s_area{position:absolute;bottom:0;left:0;}
#vessel_view .inner .con_area .box .info_area .loca_area .ss_area{position:absolute;bottom:0;right:0;text-align:right;}
#vessel_view .inner .con_area .box .info_area .loca_area ul li{font-size:20px;line-height:16px;}
#vessel_view .inner .con_area .box .info_area .loca_area .s_name{font-weight:400}
#vessel_view .inner .con_area .box .info_area .loca_area .s_time{font-size:14px;}
#vessel_view .inner .con_area .box .info_area .loca_area .l_name{font-weight:400;color: #999;}
#vessel_view .inner .con_area .box .info_area .loca_area .l_time{font-size:14px;color: #999;}
#vessel_view .inner .con_area .box .info_area .loca_area .l_time strong{color: #000;}
#vessel_view .inner .con_area .box .info_area .line{float:left;width:1px; height:100%;background:#ccc;margin-left:40px;}
#vessel_view .inner .con_area .box .info_area .txt_area{position:relative;float:right;width:380px;height:100%;background:#ebebeb;}
#vessel_view .inner .con_area .box .info_area .txt_area ul{position:absolute;top:16px;left:10px;}
#vessel_view .inner .con_area .box .info_area .txt_area li{font-size:14px;line-height:20px;}
#vessel_view .inner .con_area .box .info_area .txt_area li:before{content:"·";font-size:15px;padding-right:3px;color: #666;}
#vessel_view .inner .con_area .box .info_area .txt_area li em{display:inline-block;width: 245px;color: #666;}
#vessel_view .inner .con_area .box .info_area .txt_area li span{display:inline-block;}
#vessel_view .inner .con_area .box .la_area{position:relative;border:1px solid #ccc;padding:24px 30px;height:202px;}
#vessel_view .inner .con_area .box .la_area ul{position:absolute;top:50%;transform:translateY(-50%);}
#vessel_view .inner .con_area .box .la_area li{font-size:15px;color: #666;line-height:30px;}
#vessel_view .inner .con_area .box .la_area li:before{content:"·";font-size:15px;padding-right:5px;color: #666;}
#vessel_view .inner .con_area .box .la_area .map_area{position:absolute;top:50%;transform:translateY(-50%);right:30px;width:473px;height:184px;background:url("../images/sub/infomap.jpg")no-repeat;}
#vessel_view .inner .con_area .box2{margin-top:40px;/*width:540px;*//*float:left;*/margin-bottom:20px;}
#vessel_view .inner .con_area .box2 table{margin-top:30px;}
#vessel_view .inner .con_area .box2 th{border:1px solid #ccc;height:49px;border-top:1px solid #969696;}
#vessel_view .inner .con_area .box2 td{border:1px solid #ccc;height:35px;}
#vessel_view .inner .con_area .box3{display:none;margin-top:40px;width:482px;float:right;}

.sel{ background-color:#bfdfff; }

.vesselinport{margin-right: -4px;cursor:pointer;border: 1px solid;text-align: center;float: right;margin-top: -30px;padding: 8px;border-radius: 7px;background: #1581a8;color: #fff;}

/*#linfo,#l2info{ display:none; }*/

#company{ float: right;text-align: center;color: #fff;font-size: 12px;line-height: 34px;padding: 0px 10px; }
#contactinfo{ float: right;text-align: center;color: #fff;font-size: 12px;line-height: 12px;padding: 5px 10px; }
#contactinfo a{ line-height:0px !important; padding:0px !important; }

#header, #header .inner{ height:43px; }
#header .inner h1{ margin:0px;top: 0%;transform: inherit;    margin-left: 20px; }
#footer{width:100%;height:34px;background:#101922;margin:0 auto;    bottom: 0px;position:fixed;z-index:10000;}

.tooltip { z-index:11 !important; }
#maintop_banner{ display:none; }

/*@media ( max-width: 1500px ) {
}
@media ( max-width: 1400px ) {
}
@media ( max-width: 1300px ) {
}
*/
/* Landscape mode */
@media only screen and (orientation: landscape) {
	#main_fullbg .main-search {padding-top:9vw;}
}
 
/* Portrait mode */
@media only screen and (orientation: portrait) {
}

.mainport{ display: inline-block;position: absolute;font-size: 10px;line-height: 16px;z-index: 1;left: 50%;transform: translateX(-50%); }
.mainport div{border: 1px solid #ccc;border-radius: 5px;width: 75px;padding: 0px 4px;margin-bottom: 1px;cursor:pointer;float: left;margin-left: 2px;background-color:#fff;text-align: center;}

/*#search_input{ -webkit-ime-mode:disabled; -moz-ime-mode:disabled; -ms-ime-mode:disabled; ime-mode:disabled; } */
.btn{ padding: 6px 11px !important; border-top:none !important;border-radius: unset !important; }
.aistable{ width: 100%; }
.aistable td { border:1px solid #ccc;padding:2px; text-align:center; }
.aistable.display td,.aistable.display th {padding:5px 10px;}
.aistable tr:last-child td,.aistable tr:last-child th {border-bottom:none;}
.aistable tr:nth-child(even) th,.aistable tr:nth-child(even) td,.metadata tr:nth-child(even) td {background-color:#f7f7f7;}

.minict_wrapper{ color: #1581a8 !important;margin-top:3px;width:100% !important;height:4rem !important; }
.minict_wrapper span{ border-radius:3px;background-color: #1581a8 !important;color: #fff !important;font-size:1.8rem !important;height:4rem !important;line-height:3rem !important;padding:4px 3.4rem 0 1.4rem !important; }
.minict_wrapper ul{ top:4rem !important;max-height:30rem !important; }
.minict_wrapper:after,.minict_wrapper:before { line-height:4rem !important;color: #fff !important; }
.minict_wrapper ul li{ height:2.5rem !important;font-size:1.3rem !important;line-height:1.1rem !important; }
.minict_wrapper ul li.minict_group{ background:#d6d6d6 !important;height:3rem !important;line-height: 3rem!important; }
.minict_wrapper  span:empty:before { color: #fff !important; }

#zz{ margin:0px;width: 100%; }
#zz td > div{position:relative}
#zz td{ padding:0px 6px; }

.irs--big .irs-bar,.irs--big .irs-line { top: 27px !important; }
.irs--big .irs-handle{ top: 20px !important;width: 25px !important;height: 25px !important; }
.irs{ font-size:10px !important; }



.button_base {
    margin: 0;
    border: 0;
    font-size: 14px;
    /*position: relative;*/
	display: inline-block;
    /*top: 50%;
    left: 50%;*/
    margin-top: 12px;
    /*margin-left: -100px;*/
    /*width: 37%;*/
    /*height: 30px;*/
    text-align: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
/*    -webkit-user-select: none;*/
    cursor: default;
}

.button_base:hover {
    cursor: pointer;
}

/* ### ### ### 05 */
.b05_3d_roll {
    perspective: 500px;
    -webkit-perspective: 500px;
    -moz-perspective: 500px;
}

.b05_3d_roll div {
    /*position: absolute;*/
    text-align: center;
    /*width: 100%;
    height: 50px;*/
    padding: 5px;
    border: #000000 solid 1px;
    pointer-events: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.b05_3d_roll div:nth-child(1) {
    color: #000000;
    background-color: #000000;
    transform: rotateX(90deg);
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform-origin: 50% 50% -18px;
    -webkit-transform-origin: 50% 50% -18px;
    -moz-transform-origin: 50% 50% -18px;
}

.b05_3d_roll div:nth-child(2) {
    margin-top: -37px;
    color: #000000;
    background-color: #ffffff;
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform-origin: 50% 50% -18px;
    -webkit-transform-origin: 50% 50% -18px;
    -moz-transform-origin: 50% 50% -18px;
}

.b05_3d_roll:hover div:nth-child(1) {
    color: #ffffff;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
}

.b05_3d_roll:hover div:nth-child(2) {
    background-color: #000000;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform: rotateX(-90deg);
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
}


@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);

/* General Buttons */
button.site,button.back { 
  font-size: 14px !important;
  width: 130px;
  height: 40px;
  background: linear-gradient(to bottom, #4eb5e5 0%,#389ed5 100%); /* W3C */
  border: none;
  border-radius: 5px;
  position: relative;
  border-bottom: 4px solid #2b8bc6;
  color: #fff;
  font-weight: 600;
  font-family: 'Open Sans', sans-serif;
  text-shadow: 1px 1px 1px rgba(0,0,0,.4);
  font-size: 15px;
  text-align: left;
  text-indent: 5px;
  box-shadow: 0px 3px 0px 0px rgba(0,0,0,.2);
  cursor: pointer;

/* Just for presentation */  
  display: block;
  margin: 0 auto;
  margin-bottom: 20px;
}
button.site:active,button.back:active {
  box-shadow: 0px 2px 0px 0px rgba(0,0,0,.2);
  /*top: 1px;*/
}

button.site:after,button.back:after {
  content: "";
  width: 0;
  height: 0;
  display: block;
  border-top: 20px solid #187dbc;
  border-bottom: 20px solid #187dbc;
  border-left: 16px solid transparent;
  border-right: 20px solid #187dbc;
  position: absolute;
  opacity: 0.6; 
  right: 0;
  top: 0;
  border-radius: 0 5px 5px 0;  
}

/* Button pointing left */

button.back {
  text-align: right;
  padding-right: 12px;
  box-sizing: border-box;
}
button.back:after {
  content: "";
  width: 0;
  height: 0;
  display: block;
  border-top: 20px solid #187dbc;
  border-bottom: 20px solid #187dbc;
  border-right: 16px solid transparent;
  border-left: 20px solid #187dbc;
  position: absolute;
  opacity: 0.6; 
  left: 0;
  top: 0;
  border-radius: 5px 0 0 5px;    
}

/* Single buttons */

button.site {
  /*width: 40px;*/
  color: #fff;
  text-align: center;
  text-indent: 0;
}
button.site:after{
  display: none;
}





/* Presentation stuff */
.holder {
  width: 400px;
  background: #efefef;
  padding: 30px 10px;
  box-sizing: border-box;
  margin: 0 auto;
  margin-top: 20px;  
  text-align: center;
}

h1 {
  font: 400 16px 'Open Sans';
  text-transform: uppercase;
  color: #fff;
  text-shadow: 1px 1px 1px #fff;
  margin-bottom: 30px;
} 


/*************/
#pnn{ position: absolute;bottom: -40px;border-radius: 5px;color: #fff;width: 100%; }
#pnn .prev{ display: inline-block;padding: 10px;cursor: pointer;background-color: #1581a8;position: absolute;left: 0px;border-radius: 5px; }
#pnn .next{ display: inline-block;padding: 10px;cursor: pointer;background-color: #1581a8;position: absolute;right: 0px;border-radius: 5px; }
#pnn .pagenum{text-align: center;font-size: 24px;padding: 3px;background-color: #1581a8;border-radius: 0px 0px 5px 5px; }

.bootstrap-select{ width:100% !important;display:block !important; }
.sfb_select{ width: 243px;margin-top: 3px;padding: 8px;font-size: 12px;border:1px solid #a9a9a9;color: #454545; }

/*.tooltip.top{ transform: translate(30px, 7px) !important; }*/

.titlehead{ text-decoration: none;padding: 5px 20px;line-height: 42px;background: #1581a8;color: #fff;font-size: 2em;z-index: 0; }
.titlefoot{ text-decoration: none;padding: 5px 20px;line-height: 42px;background: #1581a8;color: #fff;font-size: 1.2em;z-index: 0; }
.signupbtn{ /*margin-left:-100px;*/margin-top:15px;text-decoration: none !important;width: 200px;padding: 11px 100px;/*position: absolute;*/text-align: center;line-height: 42px;background: #15a872;color: #fff !important;font-size: 16px;border-radius: 20px;cursor:pointer; }
.signupbtn:hover{ text-decoration: none;color:#fff; }


#yinfo{ opacity: 0.9;position: fixed;top: 244px; }
#yinfo a{ text-decoration: none;width: 173px;padding: 0px 20px;position: absolute;text-align: center;line-height: 42px;right: -173px;background: rgba(168, 21, 21, 0.7);color: #fff;font-size: 16px;z-index: 0;border-radius: 0px 10px 10px 0px; }
.swal-overlay { background-color: rgba(43, 103, 165, 0.74);}

#shoppinfo{ opacity: 0.9;position: fixed;top: 294px; }
#shoppinfo a{ text-decoration: none;width: 173px;padding: 0px 20px;position: absolute;text-align: center;line-height: 42px;right: -173px;background: rgba(168, 21, 21, 0.7);color: #fff;font-size: 16px;z-index: 0;border-radius: 0px 10px 10px 0px; }

#blprinter{ opacity: 0.9;position: fixed;top: 344px; }
#blprinter a{ text-decoration: none;width: 173px;padding: 0px 20px;position: absolute;text-align: center;line-height: 42px;right: -173px;background: #1581a8;color: #fff;font-size: 16px;z-index: 0;border-radius: 0px 10px 10px 0px; }