@charset "UTF-8";

.txt_tlt_b{font-size:1.25rem; display:flex; justify-content:space-between; align-items:center; font-weight:700}

.searchBar_type2{width:100%; max-width:400px; display:flex; flex-wrap:nowrap}
.searchBar_type2 > input{height:40px; width:100%; border:1px solid #dddddd; border-radius:5px}
.btn_sty2{width:90px; height:40px; line-height:40px; text-align:center; margin-left:10px}

.steps {list-style: none; margin: 0; padding: 0;display: flex; width: 100%; min-height: 100px; align-items: center; justify-content:space-between}
.steps  .step {position: relative; text-align: left; flex-grow:1; width:calc(100% / 6)}
.steps  .step p{/* width:90px; */width:100%; text-align:center; margin-left:auto; /* font-size:1.125rem; */font-size:.9rem; font-weight:500}
.steps  .step span { word-break: break-word; font-weight: 400; display: block; margin-top: 5px; min-height: 32px }  
.steps  .step:before {content:''; display: block; margin-left:auto; /* margin-right:20px; */margin-right:auto; background: #ffffff; border:2px solid #92D050; color:#92D050; width:30px; height:30px; text-align: center; line-height:38px; border-radius: 100%; position: relative; z-index: 1; font-weight:700; margin-bottom:10px; margin-top: 5px; z-index: 2;}
.steps  .step:after {content: ''; position: absolute; display: block; background:#e6e6e6; width: 100%; height:15px; top:13px; /* left:-30px */ left:-50%}
.steps  .step:first-child:after {display: none;}
.steps  .step.is-complete {/*color:#92D050;*/}
.steps  .step.is-complete > .progressdefault { display: none }
.steps  .step.is-complete:before {content:''; color: #ffffff; background:#92D050; border:2px solid #92D050;}
.steps  .step.is-complete:after {background:#007BF5;}
.steps  .step.is-active {font-size:1rem;}
.steps  .step.is-active:before{color: #FFF; border:2px solid #92D050; background: #92D050; margin-bottom:10px}
/* .steps  .step:first-child{width:80px; flex-shrink:0; flex-grow:inherit} */
/* .steps  .step:last-child:after { display: none } */
.steps .step .progressdefault { position: absolute; display: block; background:#e6e6e6; width: 100%; height:15px; top:13px; left:-50%; z-index: 1 }
.steps .step .progressdefault progress { width: 90% }

.ship_staWrap{display:flex; justify-content:space-between; flex-wrap:wrap}
.ship_staWrap > div{border-top:1px solid #DDDDDD; padding:20px 0; position:relative}
.ship_staWrap > div:nth-child(2n-1):after{content:""; width:1px; height:calc(100% - 40px); background:#dddddd; position:absolute; right:0; top:20px}
.ship_staWrap > div:nth-child(2n-1){width:50%; padding-right:2%;}
.ship_staWrap > div:nth-child(2n){width:50%; padding-left:2%}
.ship_staInfo {/* display:flex; flex-wrap:wrap; */}
.ship_staInfo2 {display: flex; flex-direction: column; }	
.ship_staInfo2 table {height: 100%}
/* .ship_staInfo dl{padding:9px 0; display:flex; align-items:center}
.ship_staInfo dl:nth-child(1){width:40%; max-width:400px; min-width:310px}
.ship_staInfo dl:nth-child(2){width:60%;}
.ship_staInfo dl:nth-child(3), .ship_staInfo dl:nth-child(4){width:100%;}
.ship_staInfo dl dt{position:relative; padding-left:10px; font-size:1.125rem; font-weight:700; margin-right:40px }
.ship_staInfo dl dt:before{content:""; width:5px; height:5px; position:absolute; left:0; top:9px; background:#000000; display:block; border-radius:50%}
.ship_staInfo dl dd{display:flex; align-items:center}
.ship_staInfo dl:nth-child(4){flex-direction:column; align-items:flex-start}
.ship_staInfo dl:nth-child(4) dd{width:100%} */
.ship_staWrap > div.voyageInfo {width: 100%}
.voyageInfo:after {display: none}

.ship_staInfo__top{display:flex; justify-content: space-between; align-items: center; background:#3c9eff; border:1px solid #f1f1f1; padding:15px; border-radius:6px; color:#ffffff}
.ship_staInfo__top__state{display:flex; align-items:center}
.ship_staInfo__top__state > p{font-size:1rem; font-weight:600; margin-right:10px; }
.ship_staInfo__top__state > div{border-radius:6px; text-align:center; font-size:.8rem; font-weight:500; padding: 5px 10px;}
.ship_staInfo__top__state2:fisrt-child{width: calc(40% - 10px)}
.ship_staInfo__top__state2:last-child{width: calc(60% - 10px)}
.ship_staInfo__top__state2 dl{display:flex}
.ship_staInfo__top__state2 dl dt{flex-shrink:0; width:100px; font-size:.875rem; margin-right: 10px !important; } /* margin-right: 10px !important; 김규아 추가*/
.ship_staInfo__top__state2 dl dd{display:flex; font-weight:500; font-size:1rem; align-items: center; }
.ship_staInfo2__info{display:flex; flex-wrap:wrap; gap:10px}
.ship_staInfo2__info > div{padding:20px 15px; text-align:left; border-radius:6px; width:calc(100% / 3 - 10px); border:1px solid #f1f1f1}
.ship_staInfo2__info > div p{font-size:1rem}
.ship_staInfo2__info > div p:first-child{font-size:.875rem; color:#767676; padding-bottom:5px}
.ship_staInfo2__info > div:nth-child(even){background:#f7f9f9; border:1px solid #f7f9f9}

.ship_staInfo__top__state .icon {width:40px; height:40px; border-radius:50%; margin-right:10px; }
.ship_staInfo__top__state .icon.icon1 { background:url('../../../../images/upa/com/cmm/ship-blue.png') no-repeat center #b5e4ff; background-size:40px 40px }
.ship_staInfo__top__state .icon.icon2 { background:url('../../../../images/upa/com/cmm/nav6_blue.png') no-repeat center #b5e4ff; background-size:40px 40px }
.ship_staInfo__table__tlt{font-size:}

#loadedCargoInformation {/* overflow-y: auto; */ display:flex; align-items:center; justify-content:center; flex-flow:wrap; height:265px}

.pgs_bar .txt_guide{display:flex; justify-content:space-between; padding:3px}
.progressdefault{width:100%}
.progressdefault progress {background-color: #ffffff; border: 0; width: 100%; height: 15px; border-radius:20px;}
.progressdefault progress::-webkit-progress-bar {background-color: #EFEFEF; border-radius: 15px; position:relative}
.progressdefault progress::-webkit-progress-value {background: #007BF5;border-radius: 15px;}
.progressdefault progress::-moz-progress-bar {background: #EFEFEF; border-radius: 15px;}
.progressdefault progress::-webkit-progress-value:after{width:13px; height:13px; content:""; display:block; background:#007BF5; position:absolute; right:0; top:-4px; border-radius:50%}

.infoWrap > div {width: 30%}
.infoWrap > span {display: block; width: 1px; height: 120px; background-color: #EFEFEF;}

/* .generalInfo { line-height: 2rem }
.generalInfo span { font-weight: 600 } */

.box-unit-row { display:flex; align-items:flex-start; flex-wrap:wrap; background:#f4f9fa; padding:6px 0; border-radius:6px}
.box-unit-row p{position:relative; font-size:.75rem; color: #006EDB; display:flex; flex-direction: column; padding:0 35px; margin:10px 0}
/* .generalInfo p:first-child{padding-left:0} */
.box-unit-row p:after{content:''; position:absolute; right:0; top:0; display:block; width:1px; height:100%; background:#E7E7E7}
.box-unit-row p:last-child:after{display:none}
.box-unit-row p > span{font-size:1rem; font-weight:500; color:#222222; margin-top:5px}

.shipDetail_work{display:flex;}
.shipDetail_work > div{position:relative}
.shipDetail_work > div:nth-child(2n-1):after{content:""; width:1px; height:100%; background:#dddddd; position:absolute; right:0; top:0px}
.shipDetail_work > div:nth-child(2n-1){width:50%; padding-right:2%;}
.shipDetail_work > div:nth-child(2n){width:50%; padding-left:2%}

.shipSummary {display: block; margin-bottom: 5px; border-bottom:1px solid #dddddd; padding-bottom:5px; font-size:1rem; font-weight:500; color:#222222}
.placeInfo {display: flex; justify-content: space-between; flex-direction: column; height: 93%;}
.mapApi{background:#f5f5f5; height:250px; overflow:hidden; position:relative}
.mapPoint{position:}
.mapApi__info{font-size:.875rem; color:#767676; line-height:1.5}

#map {width: 100%; height: 100%; border:1px solid #e9e9e7; box-sizing:border-box; margin-top:-1px}

.detailShip {z-index: 99; background: #9747FF; display: inline-block; height:30px; width: 20px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.detailShip:before {border-bottom: 12px solid #9747FF; border-left: 10px solid transparent; border-right: 10px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -12px; width: 0;}
.stopShip {z-index: 99; background: #FF2424; display: inline-block; height: 20px; width: 20px; border-radius: 50%; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}

.portLegend {position:absolute; right:10px; top:10px; padding:10px; display: flex; justify-content: space-between; flex-direction: column; border-radius:5px; background:#fff; font-size:.875rem; z-index:10}
.detailShipLegend {margin-top: 3px; background: #9747FF; display: inline-block; height:15px; position: relative; width: 10px;}
.detailShipLegend:before {border-bottom: 6px solid #9747FF; border-left: 5px solid transparent; border-right: 5px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -5.5px; width: 0;}
.stopShipLegend {margin-top: 3px; background: #FF2424; display: inline-block; height:10px; position: relative; width: 10px; border-radius: 50%;}

/*common*/
.tlt-dot{position:relative; padding-left:10px; font-size:1.125rem; font-weight:700; margin-right:0px }
.tlt-dot:before{content:""; width:5px; height:5px; position:absolute; left:0; top:9px; background:#000000; display:block; border-radius:50%}
.txtInfo-box p{margin-top:10px; font-size: .875rem}
.half-box{height:100%}
table td, table th{vertical-align:middle}
table th { border-bottom: 1px solid #fefefe; }

#portFacilitiesUseT tr:first-child td, #vesselBerthAllocationStatus tr:first-child td { border-top: 1px solid #E0E8F1 }
#portFacilitiesUseT, #vesselBerthAllocationStatus { border-right: 1px solid #efefef }
#portFacilitiesUseT th, #vesselBerthAllocationStatus th { background-color: #E3EbF5 ; color: #222222 }

#gridDangerousGoods { height: 150px }

@media all and (max-width:1440px){
	.ship_staWrap > div:nth-child(2n-1), .ship_staWrap > div:nth-child(2n){width:100%; padding-right:0; padding-left:0;}
	.ship_staWrap > div:nth-child(2n-1):after{width:0}
}

.vesselSta-step{display:flex; gap:40px; position:relative}
.vesselSta-step::after{content:""; position:absolute; width:80%; left:0; top:25px; background-color:#D7D7D7; height:2px; z-index:1}
.vesselSta-step__con{width:calc(100% / 6); position:relative}
.vesselSta-step__item{position:relative}
.vesselSta-step__name{width:100%; background:#D7D7D7; color:#222222; line-height:50px; border-radius:2px; text-align:center; position:relative; z-index:2}
.vesselSta-step__con .vesselSta-step__item:not(:first-child)::after{content:""; position:absolute; width:2px; height:100%; top:-20px; left:50%; transform:translateX(-50%);  background-color:#D7D7D7;}
.vesselSta-step__name.ongoing, .vesselSta-step__name.complete{color:#000}
.vesselSta-step__item-last{margin-top:70px}
.vesselSta-step__item-last::after{content:""; position:absolute; width:50px; height:2px; top:50%; left:-50px;  background-color:#D7D7D7;}

/* 범례 */
span.ongoing, span.complete{display: inline-block; width: 15px; height: 15px; border-radius:2px}
.ongoing {background-color: #b0d6ff; color:#ffffff}
.complete {background-color: #bae58d; color:#ffffff}

/*튜토리얼*/
.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__vessel{padding:100px 15px 0 75px;  position:relative;  overflow-y:auto}
.tutorial__vessel .searchBar_type2, .tutorial__vessel .tutorial__vessel__danger{margin-bottom:0; border:2px dashed #87D4FF; padding:10px; height:fit-content}
.tutorial__vessel.vessel3{padding-top:75px;}
.tutorial__vessel .tutorial__port_in{margin-bottom:0; /* border:2px dashed #87D4FF; */ padding:10px;}
.tutorial__vessel .tutorial_ex{ position:relative; margin:-6px 0 0 200px}
.tutorial__vessel.vessel3 .tutorial_ex{ position:relative; margin:0 0 0 500px}
.tutorial__vessel .tutorial_ex .pointer_start:after{display:block; content:''; position:absolute; top:5px; left:4px; height:80px; width:2px; background-color:#87D4FF;}
.tutorial__vessel .tutorial_ex .pointer_end{position:absolute; top:80px; left:80px}
.tutorial__vessel .tutorial_ex .pointer_end:after{display:block; content:''; position:absolute; top:3px; left:-75px; width:75px; height:2px; background-color:#87D4FF;}
.tutorial__vessel .tutorial_ex .torial_ex_txt{position:absolute; top:77px;  left:105px; }

.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;}

.ship_staInfo2__info-tt{display:flex; flex-wrap:wrap; gap:10px}
.ship_staInfo2__info-tt > div{padding:16px 15px; text-align:left; border-radius:6px; width:calc(100% / 4 - 10px); border:1px solid #f1f1f1}
.ship_staInfo2__info-tt > div p{font-size:1rem}
.ship_staInfo2__info-tt > div p:first-child{font-size:.875rem; color:#767676; padding-bottom:5px}
.ship_staInfo2__info-tt > div:nth-child(even){background:#f7f9f9; border:1px solid #f7f9f9}

.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}