@charset "utf-8";

/*General Information*/
.general_info .cts p{padding-bottom:7px; font-size:.875rem}
.pdB15 { padding-bottom: 14px }
.general_info .cts p > strong{color:#007BF5; font-weight:normal}

.txt_tlt_b{font-size:1.125rem; display:flex; justify-content:space-between; align-items:center; font-weight:700}
.tab_btnWrap{display:flex; flex-wrap:nowrap}
.tab_btnWrap button{flex-grow:1; font-size:1rem; color:#007bf5; text-align:center; height:40px; border:1px solid #dddddd; margin-left:-1px}
.tab_btnWrap button:hover, .tab_btnWrap button:focus, .tab_btnWrap button.active{color:#ffffff; background:#007bf5}

.mapApi_box{width:100%; height:666px; box-shadow:1px 1px 10px 0 rgba(0,0,0,0.15); position:relative; background:#f5f5f5; overflow:hidden}

#shipDateils { min-height: 394px }

.ship-tableInfo{display:flex; flex-wrap:nowrap; justify-content:space-between}
.ship-tableInfo .tableInfo{width:calc(50% - 10px); position:relative;}
.tableInfo{position:relative}
.tableInfo .table-con{height:291px; overflow-y:auto}
.tableInfo table th{position:sticky; top:0; padding:8px 5px}

.map-controls {
    top: 0px !important;
}

.toggleBtn {
	top: 3px !important;
}

@media (max-width: 780px) {
   .map-controls {
       top: 0px !important;
   }
}
    
/* .modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transform: scale(1.1); transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s; z-index:99}
.modal-content { position: absolute; top: 50%; width: 80%; height: 80%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 1rem 1.5rem; border-radius: 0.5rem;}
.modalMap {width: 100%; height: calc(100% - 44px);}
.close-button { float: right; width: 1.5rem; line-height: 1.5rem; text-align: center; cursor: pointer; border-radius: 0.25rem; background-color: lightgray;}
.close-button:hover { background-color: darkgray;}
.show-modal { opacity: 1; visibility: visible; transform: scale(1.0); transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;}
.modal_open{border-radius:5px 0 5px 5px; position:absolute; right:0; top:0; width:40px; height:40px; display:block; cursor:pointer; z-index:10}
 */
.box_inTop{display:flex; align-items:center; justify-content: space-between; }
.box_inTop .txt_tlt{margin-right:5px; display: inline-block}
.rBtn{margin-left:auto}
.monitor_ship_progress .monitor_ship_area, .monitor_ship_progress .monitor_ship_time{display:flex; justify-content:space-between; align-items: center}
/* .monitor_ship_progress .monitor_ship_time  {display:flex; justify-content:flex-end; align-items: center} */
.monitorShipBar {width: 80%; height: 5px; background-color: #efefef; position: relative; overflow: hidden}
.animationBar {display: none; position: absolute; height: 5px; width: 30%; background: linear-gradient(90deg, rgba(0, 123, 245, 0) 0%, #007BF5 50%, rgba(0, 123, 245, 0) 100%);}
.monitorShipBar.sailing > .animationBar {display: inline-block; animation: sailing 4s 0s infinite none;}
@keyframes sailing{
    0% {
        left: -10%;
    }
    100% {
    	left: 100%;
    }
}
.monitorShipBar.arrival {background-color: #007BF5;}
.monitorShipBar.error {background-color: #ff2424;}
.monitor_shipTable table{border-top:1px solid #EFEFEF; border-bottom:1px solid #EFEFEF; table-layout: fixed;}
.monitor_shipTable table td {width: 20%;}
.monitor_shipTable table td p{text-align:left; font-size:.875rem; color:#888888}
.monitor_shipTable table tr td p:last-child{text-align:right; padding-top:2.5px; color:#1a1a1a; word-wrap: break-word;}
.monitor_shipTable table tr:last-child td {border-bottom: none;}
.monitor_shipTable table tr:last-child td:last-child {border-right: 1px solid #EFEFEF;}
.monitor_ship_graph{height:335px; margin-top:10px}

.mapApi_open{background: url('../../../../images/upa/com/boxDetail.png') no-repeat center #efefef; background-size:15px 15px}

.shipHover {
	font-size: .825rem;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 2px;
    min-width: 320px;
    width: auto;
    padding: 5px;
    text-align: center;
/*     position: absolute; */
/*     top: 30%; */
/*     left: 50%; */
}

.portTxt { display: inline-block; background-color: #E0EEFC; color: #005db9; border-radius: 5px; font-size: .9rem; text-align: center; padding: 3px 7px; margin-left: 5px; font-weight: 400 }

/*튜토리얼*/
.tutorial_wrap{position:fixed; left:0; top:0; right:0; bottom:0; width:100%; height:100%; background-color:rgba(0,0,0,.65); z-index:999}
.tutorial__container{height:100%; overflow-y:auto}
.tutorial__container .swiper{height:100%;}
.tutorial_wrap .swiper-button-next, .swiper-button-prev{top:30px; width:auto; height:40px; color:#ffffff; text-align:center; border-radius:50%; /* background-color:#ffffff */}
.tutorial_wrap .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#3c9eff}
.tutorial_wrap .swiper-horizontal>.swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal{height:6px}
.tutorial_wrap .swiper-button-next:after, .tutorial_wrap .swiper-rtl .swiper-button-prev:after, .tutorial_wrap .swiper-button-prev:after, .tutorial_wrap .swiper-rtl .swiper-button-next:after{color:#ffffff; margin-left:7px}
.tutorial_wrap .swiper-button-next.swiper-button-disabled, .tutorial_wrap .swiper-button-prev.swiper-button-disabled{opacity:0}
.tutorial_wrap .swiper-button-next, .tutorial_wrap .swiper-rtl .swiper-button-prev{right:30px}
.tutorial_wrap .swiper-button-prev, .tutorial_wrap .swiper-rtl .swiper-button-next{left:70px}
.swiper-button-prev > .txt{position:absolute; left:15px; width:50px}
.tutorial_title{position:absolute; left:50%; transform:translateX(-50%); top:30px; font-size:1.25rem; color:#ffffff}
.torial_ex_txt{color:#ffffff; font-size:.875rem; line-height:1.4; word-break:keep-all}
.torial_ex_txt .tlt{color:#87D4FF; padding-bottom:6px; font-weight:500; font-size: 1rem}
.tutorial_pointer i{display:block; width:10px; height:10px; border-radius:50%; background-color:#87D4FF; position:relative}
.tutorial_pointer i:before{position:absolute; content:''; left:-5px; top:-5px; display:block; width:20px; height:20px; border-radius:50%; background:rgba(135,212,255,.35)}
.gudie-num{ width:25px; height:25px; background:#006edb; color:#ffffff; line-height:22px; font-size:.9125rem; font-weight:600; text-align:center; border-radius:50%; z-index:99; border:2px solid #ffffff; box-shadow:1px 3px 3px rgba(0,0,0,.08)}
.gudie-num-pst{position:absolute; left:-10px; top:-10px;}
.box-trnasparent:before{content:''; width:100%; height:100%; position:absolute; left:0 ; top:0; background:rgba(0,0,0,.6); z-index:99}
.box.box-trnasparent{border:0}

/*튜토리얼*/
.tutorial__port{padding:100px 15px 0 75px;  position:relative;  overflow-y:auto}
.tutorial__port.port2{padding-top:55px;}
.tutorial__port .tutorial__port_in{margin-bottom:0; /* border:2px dashed #87D4FF; */ padding:10px;}
.tutorial__port .tutorial_ex{ position:relative; margin:-6px 0 0 200px}
.tutorial__port .tutorial_ex .pointer_start:after{display:block; content:''; position:absolute; top:5px; left:4px; height:80px; width:2px; background-color:#87D4FF;}
.tutorial__port .tutorial_ex .pointer_end{position:absolute; top:80px; left:80px}
.tutorial__port .tutorial_ex .pointer_end:after{display:block; content:''; position:absolute; top:3px; left:-75px; width:75px; height:2px; background-color:#87D4FF;}
.tutorial__port .tutorial_ex .torial_ex_txt{position:absolute; top:77px;  left:105px; }
.tutorial__port__tab{padding:20px; border:2px dashed #87D4FF; margin-top:50px}
.tutorial__port__tab .tab_btnWrap{background:#ffffff}
.tutorial__port .resp-table{overflow-x:auto}
.tutorial__port .resp-table table{width:900px}
.tutorial__port .mapApi_box{background:url('../../../../images/upa/com/cmm/map-api-bg.jpg') no-repeat center top; height:150px}
.tutorial__port .tutorial_ex2{position:relative}
.tutorial__port .tutorial_ex2 .torial_ex_txt{padding:0 70px 30px 0; text-align:right}
.tutorial__port .tutorial_ex2 .pointer_start{position:absolute; right:20px; bottom:-15px; z-index:99}
.tutorial__port .tutorial_ex2 .pointer_start:after{display:block; content:''; position:absolute; bottom:5px; left:4px; height:78px; width:2px; background-color:#87D4FF;}
.tutorial__port .tutorial_ex2 .pointer_end{position:absolute; right:50px; top:6px}
.tutorial__port .tutorial_ex2 .pointer_end:after{display:block; content:''; position:absolute; top:3px; left:0; width:36px; height:2px; background-color:#87D4FF;}

.tutorial__port .tutorial_ex3{position:relative}
.tutorial__port .tutorial_ex3 .torial_ex_txt{padding:30px 0px 30px 70px; text-align:left}
.tutorial__port .tutorial_ex3 .pointer_start{position:absolute; left:20px; top:-5px; z-index:99}
.tutorial__port .tutorial_ex3 .pointer_start:after{display:block; content:''; position:absolute; top:5px; left:4px; height:41px; width:2px; background-color:#87D4FF;}
.tutorial__port .tutorial_ex3 .pointer_end{position:absolute; left:50px; top:35px}
.tutorial__port .tutorial_ex3 .pointer_end:after{display:block; content:''; position:absolute; top:4px; left:-24px; width:26px; height:2px; background-color:#87D4FF;}

.monitor_ship_info  p.gudie-num{position:absolute;}
.monitor_ship_info  p.gudie-num:first-child{left:280px; top:2px;}
.monitor_ship_info  p.gudie-num:nth-child(2){left:100px; top:76px;}

.torial_ex_num{display:flex; gap:10px}
.torial_ex_num .gudie-num{flex-shrink:0}
.torial_ex_num > div{flex-grow:1}

.close_tutorial{position:absolute; right:20px; top:30px;  z-index:999; display:flex; align-items:center; color:#ffffff}
.close_tutorial button{margin-left:15px; border:0; color:#87D4FF; display:flex; align-items:center; font-size:1.125rem}
.close_tutorial button i{display:inline-block; width:30px; height:30px; border-radius:50%; line-height:32px}

/* 2026.03.09 GIS 기반 항만 모니터링 > 항만 상세보기 수정  */
@media screen and (max-width: 767px) {
	.box.noticeBox02 {flex-wrap: wrap;}
	.noticeBox02 ul{width:70%;}
	.noticeBox02 ul li h3{text-align:center; margin-rigth:0;}
	.noticeBox02 > p {min-width:16%;}
}