@charset "UTF-8";







#map {width: 100%; height: 100%; box-sizing: border-box; position:relative; overflow:hidden; }


/* #map .mapOption { position:absolute; top: 62px; left:120px; display:flex; flex-direction:row; flex-wrap:nowrap; width:calc(100% - 125px); justify-content:space-between} */


.filterWrap { width: auto; left: auto; top: 60px; right: 134px; transform: translate( 0%, 0%); }

.unitWrap { 
	position: absolute; left: 50%; top: 39px; z-index: 15; transform: translate( -50%, 0%);
	width: calc(100% + 10px); padding: 5px; border-radius: 3px; box-sizing: border-box;
    background: rgba(255, 255, 255, .75);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .07);
}
.unitWrap span { font-weight: bold; }
.unitWrap span, .unitWrap div { display: inline-block; font-size: 14px; vertical-align: middle; }

.unitWrap div input, .unitWrap div label, .unitWrap div select { display: inline-block; vertical-align: middle; }
.unitWrap div .searchCargo,
.unitWrap div select { width: calc(100% - 61px); }

.unitWrap div input { margin: 0; padding: 0; top: 0; }




#map .toggleBtn{ 
	position:absolute; left:120px; top: 63px; z-index:10; 
	padding:3px 5px; border-radius:3px; background:#ffffff; box-shadow:1px 1px 3px rgba(0,0,0,.2); height:36px; width:130px; flex-shrink:0
}

#map .toggleBtn.electronicChart {display:flex; gap:5px; align-items:center; width: auto; height:initial; padding: 9px 14px; top:64px; left: 260px; color:#fff; font-size:14px; font-wieght:600; background: linear-gradient(135deg, #D3940B, #0063CD, #D3940B, #0063CD); background-size: 400% 400%; animation: gradient-btn 8s ease infinite; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 4px 15px rgba(0, 99, 205, 0.3); transition:all .3s;} 
#map .toggleBtn.electronicChart:before { display:block; content:""; margin:0; width:15px; height:12px; background:url(../../../../images/upa/com/ship/icon_enc.svg) no-repeat center center;}
#map .toggleBtn.electronicChart:after{opacity:0; content:""; width:0; height:16px; margin-top:2px; background:#202020 url(../../../../images/upa/com/ship/btn_close.svg) no-repeat center center; border-radius:3px; transition:all .3s;}
#map .toggleBtn.electronicChart:hover {transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 99, 205, 0.4);}
#map .toggleBtn.electronicChart.active{background:#3b3b3b; box-shadow:none;}
#map .toggleBtn.electronicChart.active:after{opacity:1; width:16px;}
@keyframes gradient-btn {
	0% {background-position: 0% 50%;}
	50% {background-position: 100% 50%;}
	100% {background-position: 0% 50%;}
}


@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(40px);
    }
}

@keyframes slideInBottom {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideOutBottom {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(40px);
    }
}



































.positionInfo{position:absolute; right:10px; bottom:10px; padding:10px; display:inline-block; border-radius:5px; background:rgba(0,0,0,.2); color:#ffffff; font-size:.75rem; z-index:10; min-width:140px; line-height:1.3}
.shipHover {font-size: .825rem; background-color: #fff; border: 1px solid #ddd; border-radius: 2px; min-width: 320px; width: auto; padding: 5px; text-align: center;}


#map .toggleBtn:before{content:attr(data-content); display:inline-block; margin-top:7px; font-size:.8125rem; padding:0 5px; font-weight:500}



/* #map .mapOption-r{z-index:99; display:flex; flex-direction:column; align-items:flex-end; margin-left:10px;} */


#map .mapCheckbox-wrap {position:absolute; display:flex; right:155px; bottom:10px; width:calc(100% - 340px); z-index:10; justify-content:flex-end}
#map .mapCheckbox{padding:8px 10px; border-radius:3px; background:rgba(255,255,255,.75); box-shadow:1px 1px 3px rgba(0,0,0,.07); display: flex; justify-content: flex-start; align-items: center; font-size:.75rem; flex-wrap:wrap}
#map .mapCheckbox > div{margin:4px 10px 4px 0; display:flex; align-items:center}
#map .mapCheckbox > div:last-child{margin-right:0}
#map .mapCheckbox label {font-size:.75rem; font-weight:500; margin-left: 3px;}	

#map .mapOption .mapZoomBox {
	background: url(../../../../images/upa/com/zoom-in.png) no-repeat center;
	width: 34px;
	height: 37px;
	position: absolute;
	left: 137px;
    z-index: 10;
    top: 2px;
    cursor: pointer;
}

#map .mapOption .mapZoomOutBox {
    background: url(../../../../images/upa/com/zoom-out.png) no-repeat center;
   	width: 34px;
	height: 37px;
	position: absolute;
	left: 137px;
    z-index: 10;
    top: 2px;
    cursor: pointer;
}

.waterDepth {font-size: .825rem; font-weight: 300;}
.tlSailer {width: 10px; height: 10px; border-radius: 50%; border: 10px solid rgba(255, 230, 0, 0.4);}

.shipNameType {width: calc(100% - 0px); padding-left: 10px; border-left: 1px solid #ddd;}
.detailShipName {display: flex; align-items: center}
.detailShipName > span {font-size: .8rem;}
.detailShipName > .fa-star {margin-right: 5px;}
.detailShipType {font-size: .825rem;}
.shipImg {padding: 10px; background-color: #1B2750; color: #fff; position: relative}
.arrivalVassel .shipImg { background-color: #D7D7D7; color: #222; }
.shipImg img {display: block; margin: 20px auto; width: 170px; padding-top: 10px; border-top: 1px dashed #FFF} 
.arrivalVassel .shipImg img { border-top: 1px dashed #222; }
.shipImgWrap:before {content: ''; display: block; width: 100%; height: 40px; background-color: rgba(108, 185, 255, 0.5); position: absolute; bottom: 0; left: 0;}
.shipImgWrap:after {content:''; display: block; width: 20px; height: 1px; background-color: #FFF; position: absolute; bottom: 56px; right: 50px; transform: rotate(-45deg)}
.arrivalVassel .shipImgWrap:after { background-color: #222; }
.shipSpecification {display: flex; width: 100%; flex-direction: column; text-align: center; position: absolute;}
.shipSpecification:nth-child(2) {left: 10px; top: 50%; transform: translateY(-50%); width: 10%; align-items: flex-start; text-align: left}
.shipSpecification:nth-child(3) {right: 10px; top: 50%; transform: translateY(-50%); width: 10%; align-items: flex-end;  text-align: right}
.shipSpecification > p {font-size: 1rem;}
.shipSpecification > p span {font-size: .825rem;}
.length:before {content: ''; width: 100%; border-top: 1px dashed #FFF; display: block}
.arrivalVassel .length:before { border-top: 1px dashed #222; }
.draught:before {content: ''; width: 23px; height: 5px; background-color: rgba(108, 185, 255, 0.5); display: block}
.width:before {content: ''; width: 100%; border-top: 1px solid #FFF; display: block}
.arrivalVassel .width:before { border-top: 1px dashed #222; }



/* 배, 방향 아이콘 */
.ulsan-xs {z-index: 99; background: #FF5F5F; display: inline-block; height:11px; width: 8px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.ulsan-xs:before {border-bottom: 5px solid #FF5F5F; border-left: 4px solid transparent; border-right: 4px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -5px; width: 0;}
.other-xs {z-index: 99; background: #43B61A; display: inline-block; height:11px; width: 8px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.other-xs:before {border-bottom: 5px solid #43B61A; border-left: 4px solid transparent; border-right: 4px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -5px; width: 0;}
.cog-xs {width: 5px; height: 5px; position: absolute; margin-bottom: 30px; z-index: 99; top: -1px; left: 1px;}
.cog-xs:before, .cog-xs:after {content: ""; position: absolute; transform: rotate(45deg);}
.cog-xs:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cog-xs:after {width:11px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(5px, 2.5px);}

.ulsan-s {z-index: 99; background: #FF5F5F; display: inline-block; height:13px; width: 12px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.ulsan-s:before {border-bottom: 7px solid #FF5F5F; border-left: 6px solid transparent; border-right: 6px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -7px; width: 0;}
.other-s {z-index: 99; background: #43B61A; display: inline-block; height:13px; width: 12px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.other-s:before {border-bottom: 7px solid #43B61A; border-left: 6px solid transparent; border-right: 6px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -7px; width: 0;}
.cog-s {width: 7px; height: 7px; position: absolute; margin-bottom: 30px; z-index: 99; top: -1px; left: 1.5px;}
.cog-s:before, .cog-s:after {content: ""; position: absolute; transform: rotate(45deg);}
.cog-s:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cog-s:after {width:15px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(7px, 4px);}

.ulsan-m {z-index: 99; background: #FF5F5F; display: inline-block; height:18px; width: 16px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.ulsan-m:before {border-bottom: 10px solid #FF5F5F; border-left: 8px solid transparent; border-right: 8px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -10px; width: 0;}
.other-m {z-index: 99; background: #43B61A; display: inline-block; height:18px; width: 16px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.other-m:before {border-bottom: 10px solid #43B61A; border-left: 8px solid transparent; border-right: 8px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -10px; width: 0;}
.cog-m {width: 9px; height: 9px; position: absolute; margin-bottom: 30px; z-index: 99; top: -3px; left: 2.5px;}
.cog-m:before, .cog-m:after {content: ""; position: absolute; transform: rotate(45deg);}
.cog-m:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cog-m:after {width:20px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(9px, 5px);}

.ulsan-l {z-index: 99; background: #FF5F5F; display: inline-block; height:23px; width: 20px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.ulsan-l:before {border-bottom: 12px solid #FF5F5F; border-left: 10px solid transparent; border-right: 10px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -12px; width: 0;}
.other-l {z-index: 99; background: #43B61A; display: inline-block; height:23px; width: 20px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.other-l:before {border-bottom: 12px solid #43B61A; border-left: 10px solid transparent; border-right: 10px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -12px; width: 0;}
.cog-l {width: 11px; height: 11px; position: absolute; margin-bottom: 30px; z-index: 99; top: -3px; left: 4px;}
.cog-l:before, .cog-l:after {content: ""; position: absolute; transform: rotate(45deg);}
.cog-l:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cog-l:after {width:26px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(11px, 7px);}

.ulsan-xl {z-index: 99; background: #FF5F5F; display: inline-block; height:29px; width: 28px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.ulsan-xl:before {border-bottom: 15px solid #FF5F5F; border-left: 14px solid transparent; border-right: 14px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -15px; width: 0;}
.other-xl {z-index: 99; background: #43B61A; display: inline-block; height:29px; width: 28px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.other-xl:before {border-bottom: 15px solid #43B61A; border-left: 14px solid transparent; border-right: 14px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -15px; width: 0;}
.cog-xl {width: 11px; height: 11px; position: absolute; margin-bottom: 30px; z-index: 99; top: -5px; left: 8px;}
.cog-xl:before, .cog-xl:after {content: ""; position: absolute; transform: rotate(45deg);}
.cog-xl:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cog-xl:after {width:32px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(15px, 10px);}

.ulsan-xxs-4 {z-index: 99; background: #FF5F5F; display: inline-block; height:10px; width: 5.5px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.ulsan-xxs-4:before {border-bottom: 4px solid #FF5F5F; border-left: 3px solid transparent; border-right: 3px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -4px; width: 0;}
.other-xxs-4 {z-index: 99; background: #43B61A; display: inline-block; height:10px; width: 5.5px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.other-xxs-4:before {border-bottom: 4px solid #43B61A; border-left: 3px solid transparent; border-right: 3px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -4px; width: 0;}
.cog-xxs-4 {width: 5px; height: 5px; position: absolute; margin-bottom: 30px; z-index: 99; top: -1px; left: 0px; transform: scale(0.5);}
.cog-xxs-4:before, .cog-xxs-4:after {content: ""; position: absolute; transform: rotate(45deg);}
.cog-xxs-4:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cog-xxs-4:after {width:11px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(5px, 2.5px);}

.ulsan-xs-4 {z-index: 99; background: #FF5F5F; display: inline-block; height:7px; width: 9px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.ulsan-xs-4:before {border-bottom: 5px solid #FF5F5F; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -5px; width: 0;}
.other-xs-4 {z-index: 99; background: #43B61A; display: inline-block; height:7px; width: 9px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.other-xs-4:before {border-bottom: 5px solid #43B61A; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -5px; width: 0;}
.cog-xs-4 {width: 5px; height: 5px; position: absolute; margin-bottom: 30px; z-index: 99; top: -1px; left: 0px; transform: scale(0.5);}
.cog-xs-4:before, .cog-xs-4:after {content: ""; position: absolute; transform: rotate(45deg);}
.cog-xs-4:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cog-xs-4:after {width:11px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(5px, 2.5px);}

.ulsan-xs-4 {z-index: 99; background: #FF5F5F; display: inline-block; height:7px; width: 9px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.ulsan-xs-4:before {border-bottom: 5px solid #FF5F5F; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -5px; width: 0;}
.other-xs-4 {z-index: 99; background: #43B61A; display: inline-block; height:7px; width: 9px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.other-xs-4:before {border-bottom: 5px solid #43B61A; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -5px; width: 0;}
.cog-xs-4 {width: 5px; height: 5px; position: absolute; margin-bottom: 30px; z-index: 99; top: -1px; left: 0px; transform: scale(0.5);}
.cog-xs-4:before, .cog-xs-4:after {content: ""; position: absolute; transform: rotate(45deg);}
.cog-xs-4:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cog-xs-4:after {width:11px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(5px, 2.5px);}

.ulsan-s-4 {z-index: 99; background: #FF5F5F; display: inline-block; height:20px; width: 13.8px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.ulsan-s-4:before {border-bottom: 8px solid #FF5F5F; border-left: 7px solid transparent; border-right: 7px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -8px; width: 0;}
.other-s-4 {z-index: 99; background: #43B61A; display: inline-block; height:20px; width: 13.8px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.other-s-4:before {border-bottom: 8px solid #43B61A; border-left: 7px solid transparent; border-right: 7px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -8px; width: 0;}
.cog-s-4 {width: 7px; height: 7px; position: absolute; margin-bottom: 30px; z-index: 99; top: -1px; left: 2.5px;}
.cog-s-4:before, .cog-s-4:after {content: ""; position: absolute; transform: rotate(45deg);}
.cog-s-4:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cog-s-4:after {width:16px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(7px, 4px);}

.ulsan-m-4 {z-index: 99; background: #FF5F5F; display: inline-block; height:28px; width: 24px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1); transform: scale(0.959);}
.ulsan-m-4:before {border-bottom: 12px solid #FF5F5F; border-left: 12px solid transparent; border-right: 12px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -11.5px; width: 0;}
.other-m-4 {z-index: 99; background: #43B61A; display: inline-block; height:28px; width: 24px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1); transform: scale(0.959);}
.other-m-4:before {border-bottom: 12px solid #43B61A; border-left: 12px solid transparent; border-right: 12px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -11.5px; width: 0;}
.cog-m-4 {width: 9px; height: 9px; position: absolute; margin-bottom: 30px; z-index: 99; top: -2px; left: 7px; transform: scale(1.3);}
.cog-m-4:before, .cog-m-4:after {content: ""; position: absolute; transform: rotate(45deg);}
.cog-m-4:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cog-m-4:after {width:20px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(9px, 5px);}

.ulsan-l-4 {z-index: 99; background: #FF5F5F; display: inline-block; height:33px; width: 32.2px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.ulsan-l-4:before {border-bottom: 15px solid #FF5F5F; border-left: 16px solid transparent; border-right: 16px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -15px; width: 0;}
.other-l-4 {z-index: 99; background: #43B61A; display: inline-block; height:33px; width: 32.2px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.other-l-4:before {border-bottom: 15px solid #43B61A; border-left: 16px solid transparent; border-right: 16px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -15px; width: 0;}
.cog-l-4 {width: 11px; height: 11px; position: absolute; margin-bottom: 30px; z-index: 99; top: -3px; left: 9px; transform: scale(1.5);}
.cog-l-4:before, .cog-l-4:after {content: ""; position: absolute; transform: rotate(45deg);}
.cog-l-4:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cog-l-4:after {width:26px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(11px, 7px);}

.ulsan-xl-4 {z-index: 99; background: #FF5F5F; display: inline-block; height:45px; width: 37px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.ulsan-xl-4:before {border-bottom: 22px solid #FF5F5F; border-left: 19px solid transparent; border-right: 19px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -22px; width: 0;}
.other-xl-4 {z-index: 99; background: #43B61A; display: inline-block; height:45px; width: 37px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.other-xl-4:before {border-bottom: 22px solid #43B61A; border-left: 19px solid transparent; border-right: 19px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -22px; width: 0;}
.cog-xl-4 {width: 11px; height: 11px; position: absolute; margin-bottom: 30px; z-index: 99; top: -5px; left: 14px; transform: scale(1.5);}
.cog-xl-4:before, .cog-xl-4:after {content: ""; position: absolute; transform: rotate(45deg);}
.cog-xl-4:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cog-xl-4:after {width:32px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(14px, 10px);}

.ulsan-xxs-3 {z-index: 99; background: #FF5F5F; display: inline-block; height:10px; width: 10px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.ulsan-xxs-3:before {border-bottom: 6px solid #FF5F5F; border-left: 5px solid transparent; border-right: 5px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -6px; width: 0;}
.other-xxs-3 {z-index: 99; background: #43B61A; display: inline-block; height:10px; width: 10px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.other-xxs-3:before {border-bottom: 6px solid #43B61A; border-left: 5px solid transparent; border-right: 5px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -6px; width: 0;}
.cog-xxs-3 {width: 5px; height: 5px; position: absolute; margin-bottom: 30px; z-index: 99; top: -1px; left: 2px; transform: scale(0.8);}
.cog-xxs-3:before, .cog-xxs-3:after {content: ""; position: absolute; transform: rotate(45deg);}
.cog-xxs-3:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cog-xxs-3:after {width:11px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(5px, 2.5px);}

.ulsan-xs-3 {z-index: 99; background: #FF5F5F; display: inline-block; height:15px; width: 18.4px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.ulsan-xs-3:before {border-bottom: 9px solid #FF5F5F; border-left: 9px solid transparent; border-right: 9px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -9px; width: 0;}
.other-xs-3 {z-index: 99; background: #43B61A; display: inline-block; height:15px; width: 18.4px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.other-xs-3:before {border-bottom: 9px solid #43B61A; border-left: 9px solid transparent; border-right: 9px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -9px; width: 0;}
.cog-xs-3 {width: 5px; height: 5px; position: absolute; margin-bottom: 30px; z-index: 99; top: 0px; left: 1.5px;}
.cog-xs-3:before, .cog-xs-3:after {content: ""; position: absolute; transform: rotate(45deg);}
.cog-xs-3:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cog-xs-3:after {width:11px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(5px, 2.5px);}

.ulsan-s-3 {z-index: 99; background: #FF5F5F; display: inline-block; height:29px; width: 27.6px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.ulsan-s-3:before {border-bottom: 14px solid #FF5F5F; border-left: 14px solid transparent; border-right: 14px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -14px; width: 0;}
.other-s-3 {z-index: 99; background: #43B61A; display: inline-block; height:29px; width: 27.6px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.other-s-3:before {border-bottom: 14px solid #43B61A; border-left: 14px solid transparent; border-right: 14px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -14px; width: 0;}
.cog-s-3 {width: 7px; height: 7px; position: absolute; margin-bottom: 30px; z-index: 99; top: -1px; left: 9px; transform: scale(1.8);}
.cog-s-3:before, .cog-s-3:after {content: ""; position: absolute; transform: rotate(45deg);}
.cog-s-3:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cog-s-3:after {width:16px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(7px, 4px);}

.ulsan-m-3 {z-index: 99; background: #FF5F5F; display: inline-block; height:50px; width: 46px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.ulsan-m-3:before {border-bottom: 21px solid #FF5F5F; border-left: 23px solid transparent; border-right: 23px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -21px; width: 0;}
.other-m-3 {z-index: 99; background: #43B61A; display: inline-block; height:50px; width: 46px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.other-m-3:before {border-bottom: 21px solid #43B61A; border-left: 23px solid transparent; border-right: 23px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -21px; width: 0;}
.cog-m-3 {width: 9px; height: 9px; position: absolute; margin-bottom: 30px; z-index: 99; top: 3px; left: 16px; transform: scale(2.2);}
.cog-m-3:before, .cog-m-3:after {content: ""; position: absolute; transform: rotate(45deg);}
.cog-m-3:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cog-m-3:after {width:20px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(9px, 5px);}

.ulsan-l-3 {z-index: 99; background: #FF5F5F; display: inline-block; height:67px; width: 64.4px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.ulsan-l-3:before {border-bottom: 29px solid #FF5F5F; border-left: 32px solid transparent; border-right: 32px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -29px; width: 0;}
.other-l-3 {z-index: 99; background: #43B61A; display: inline-block; height:67px; width: 64.4px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.other-l-3:before {border-bottom: 29px solid #43B61A; border-left: 32px solid transparent; border-right: 32px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -29px; width: 0;}
.cog-l-3 {width: 11px; height: 11px; position: absolute; margin-bottom: 30px; z-index: 99; top: 0px; left: 25px; transform: scale(2.5);}
.cog-l-3:before, .cog-l-3:after {content: ""; position: absolute; transform: rotate(45deg);}
.cog-l-3:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cog-l-3:after {width:26px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(11px, 7px);}

.ulsan-xl-3 {z-index: 99; background: #FF5F5F; display: inline-block; height:85px; width: 73.6px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1); transform: scale(1.01);}
.ulsan-xl-3:before {border-bottom: 40px solid #FF5F5F; border-left: 37px solid transparent; border-right: 37px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -40px; width: 0;}
.other-xl-3 {z-index: 99; background: #43B61A; display: inline-block; height:85px; width: 73.6px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1); transform: scale(1.01);}
.other-xl-3:before {border-bottom: 40px solid #43B61A; border-left: 37px solid transparent; border-right: 37px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -40px; width: 0;}
.cog-xl-3 {width: 11px; height: 11px; position: absolute; margin-bottom: 30px; z-index: 99; top: 0px; left: 33px; transform: scale(3);}
.cog-xl-3:before, .cog-xl-3:after {content: ""; position: absolute; transform: rotate(45deg);}
.cog-xl-3:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cog-xl-3:after {width:32px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(14px, 10px);}

.ulsan-xxs-2 {z-index: 99; background: #FF5F5F; display: inline-block; height:25px; width: 20px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.ulsan-xxs-2:before {border-bottom: 11px solid #FF5F5F; border-left: 10px solid transparent; border-right: 10px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -11px; width: 0;}
.other-xxs-2 {z-index: 99; background: #43B61A; display: inline-block; height:25px; width: 20px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.other-xxs-2:before {border-bottom: 11px solid #43B61A; border-left: 10px solid transparent; border-right: 10px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -11px; width: 0;}
.cog-xxs-2 {width: 5px; height: 5px; position: absolute; margin-bottom: 30px; z-index: 99; top: -1px; left: 6px; transform: scale(1.3);}
.cog-xxs-2:before, .cog-xxs-2:after {content: ""; position: absolute; transform: rotate(45deg);}
.cog-xxs-2:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cog-xxs-2:after {width:11px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(5px, 2.5px);}

.ulsan-xs-2 {z-index: 99; background: #FF5F5F; display: inline-block; height:15px; width: 37px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.ulsan-xs-2:before {border-bottom: 19px solid #FF5F5F; border-left: 19px solid transparent; border-right: 19px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -19px; width: 0;}
.other-xs-2 {z-index: 99; background: #43B61A; display: inline-block; height:15px; width: 37px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.other-xs-2:before {border-bottom: 19px solid #43B61A; border-left: 19px solid transparent; border-right: 19px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -19px; width: 0;}
.cog-xs-2 {width: 5px; height: 5px; position: absolute; margin-bottom: 30px; z-index: 99; top: 0px; left: 5px; transform: scale(1.5);}
.cog-xs-2:before, .cog-xs-2:after {content: ""; position: absolute; transform: rotate(45deg);}
.cog-xs-2:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cog-xs-2:after {width:11px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(5px, 2.5px);}

.ulsan-s-2 {z-index: 99; background: #FF5F5F; display: inline-block; height:29px; width: 56px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.ulsan-s-2:before {border-bottom: 27px solid #FF5F5F; border-left: 28px solid transparent; border-right: 28px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -27px; width: 0;}
.other-s-2 {z-index: 99; background: #43B61A; display: inline-block; height:29px; width: 56px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.other-s-2:before {border-bottom: 27px solid #43B61A; border-left: 28px solid transparent; border-right: 28px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -27px; width: 0;}
.cog-s-2 {width: 7px; height: 7px; position: absolute; margin-bottom: 30px; z-index: 99; top: -1px; left: 22px; transform: scale(2.6);}
.cog-s-2:before, .cog-s-2:after {content: ""; position: absolute; transform: rotate(45deg);}
.cog-s-2:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cog-s-2:after {width:16px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(7px, 4px);}

.ulsan-m-2 {z-index: 99; background: #FF5F5F; display: inline-block; height:50px; width: 93px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.ulsan-m-2:before {border-bottom: 44px solid #FF5F5F; border-left: 46px solid transparent; border-right: 46px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -44px; width: 0;}
.other-m-2 {z-index: 99; background: #43B61A; display: inline-block; height:50px; width: 93px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.other-m-2:before {border-bottom: 44px solid #43B61A; border-left: 46px solid transparent; border-right: 46px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -44px; width: 0;}
.cog-m-2 {width: 9px; height: 9px; position: absolute; margin-bottom: 30px; z-index: 99; top: -1px; left: 39px; transform: scale(3.5);}
.cog-m-2:before, .cog-m-2:after {content: ""; position: absolute; transform: rotate(45deg);}
.cog-m-2:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cog-m-2:after {width:20px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(9px, 5px);}

.ulsan-l-2 {z-index: 99; background: #FF5F5F; display: inline-block; height:67px; width: 130.2px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.ulsan-l-2:before {border-bottom: 59px solid #FF5F5F; border-left: 65px solid transparent; border-right: 65px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -59px; width: 0;}
.other-l-2 {z-index: 99; background: #43B61A; display: inline-block; height:67px; width: 130.2px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.other-l-2:before {border-bottom: 59px solid #43B61A; border-left: 65px solid transparent; border-right: 65px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -59px; width: 0;}
.cog-l-2 {width: 11px; height: 11px; position: absolute; margin-bottom: 30px; z-index: 99; top: 0px; left: 57px; transform: scale(4);}
.cog-l-2:before, .cog-l-2:after {content: ""; position: absolute; transform: rotate(45deg);}
.cog-l-2:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cog-l-2:after {width:26px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(11px, 7px);}

.ulsan-xl-2 {z-index: 99; background: #FF5F5F; display: inline-block; height:85px; width: 148.8px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.ulsan-xl-2:before {border-bottom: 70px solid #FF5F5F; border-left: 75px solid transparent; border-right: 75px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -70px; width: 0;}
.other-xl-2 {z-index: 99; background: #43B61A; display: inline-block; height:85px; width: 148.8px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.other-xl-2:before {border-bottom: 70px solid #43B61A; border-left: 75px solid transparent; border-right: 75px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -70px; width: 0;}
.cog-xl-2 {width: 11px; height: 11px; position: absolute; margin-bottom: 30px; z-index: 99; top: 0px; left: 74px; transform: scale(5);}
.cog-xl-2:before, .cog-xl-2:after {content: ""; position: absolute; transform: rotate(45deg);}
.cog-xl-2:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cog-xl-2:after {width:32px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(14px, 10px);}

.ulsan-xxs-1 {z-index: 99; background: #FF5F5F; display: inline-block; height:25px; width: 53px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.ulsan-xxs-1:before {border-bottom: 25px solid #FF5F5F; border-left: 26px solid transparent; border-right: 26px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -25px; width: 0;}
.other-xxs-1 {z-index: 99; background: #43B61A; display: inline-block; height:25px; width: 53px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.other-xxs-1:before {border-bottom: 25px solid #43B61A; border-left: 26px solid transparent; border-right: 26px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -25px; width: 0;}
.cog-xxs-1 {width: 5px; height: 5px; position: absolute; margin-bottom: 30px; z-index: 99; top: -1px; left: 22px; transform: scale(2.5);}
.cog-xxs-1:before, .cog-xxs-1:after {content: ""; position: absolute; transform: rotate(45deg);}
.cog-xxs-1:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cog-xxs-1:after {width:11px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(5px, 2.5px);}

.ulsan-xs-1 {z-index: 99; background: #FF5F5F; display: inline-block; height:15px; width: 76px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.ulsan-xs-1:before {border-bottom: 38px solid #FF5F5F; border-left: 39px solid transparent; border-right: 39px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -38px; width: 0;}
.other-xs-1 {z-index: 99; background: #43B61A; display: inline-block; height:15px; width: 76px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.other-xs-1:before {border-bottom: 38px solid #43B61A; border-left: 39px solid transparent; border-right: 39px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -38px; width: 0;}
.cog-xs-1 {width: 5px; height: 5px; position: absolute; margin-bottom: 30px; z-index: 99; top: 0px; left: 15px; transform: scale(3);}
.cog-xs-1:before, .cog-xs-1:after {content: ""; position: absolute; transform: rotate(45deg);}
.cog-xs-1:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cog-xs-1:after {width:11px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(5px, 2.5px);}

.ulsan-s-1 {z-index: 99; background: #FF5F5F; display: inline-block; height:29px; width: 114px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.ulsan-s-1:before {border-bottom: 53px solid #FF5F5F; border-left: 57px solid transparent; border-right: 57px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -52px; width: 0;}
.other-s-1 {z-index: 99; background: #43B61A; display: inline-block; height:29px; width: 114px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.other-s-1:before {border-bottom: 53px solid #43B61A; border-left: 57px solid transparent; border-right: 57px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -52px; width: 0;}
.cog-s-1 {width: 7px; height: 7px; position: absolute; margin-bottom: 30px; z-index: 99; top: -1px; left: 50px; transform: scale(5);}
.cog-s-1:before, .cog-s-1:after {content: ""; position: absolute; transform: rotate(45deg);}
.cog-s-1:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cog-s-1:after {width:16px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(7px, 4px);}

.ulsan-m-1 {z-index: 99; background: #FF5F5F; display: inline-block; height:50px; width: 190px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.ulsan-m-1:before {border-bottom: 83px solid #FF5F5F; border-left: 95px solid transparent; border-right: 95px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -82px; width: 0;}
.other-m-1 {z-index: 99; background: #43B61A; display: inline-block; height:50px; width: 190px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.other-m-1:before {border-bottom: 83px solid #43B61A; border-left: 95px solid transparent; border-right: 95px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -82px; width: 0;}
.cog-m-1 {width: 9px; height: 9px; position: absolute; margin-bottom: 30px; z-index: 99; top: -1px; left: 85px; transform: scale(6.5);}
.cog-m-1:before, .cog-m-1:after {content: ""; position: absolute; transform: rotate(45deg);}
.cog-m-1:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cog-m-1:after {width:20px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(9px, 5px);}

.ulsan-l-1 {z-index: 99; background: #FF5F5F; display: inline-block; height:67px; width: 266px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.ulsan-l-1:before {border-bottom: 120px solid #FF5F5F; border-left: 133px solid transparent; border-right: 133px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -119px; width: 0;}
.other-l-1 {z-index: 99; background: #43B61A; display: inline-block; height:67px; width: 266px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.other-l-1:before {border-bottom: 120px solid #43B61A; border-left: 133px solid transparent; border-right: 133px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -119px; width: 0;}
.cog-l-1 {width: 11px; height: 11px; position: absolute; margin-bottom: 30px; z-index: 99; top: 0px; left: 122px; transform: scale(8);}
.cog-l-1:before, .cog-l-1:after {content: ""; position: absolute; transform: rotate(45deg);}
.cog-l-1:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cog-l-1:after {width:26px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(11px, 7px);}

.ulsan-xl-1 {z-index: 99; background: #FF5F5F; display: inline-block; height:85px; width: 304px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.ulsan-xl-1:before {border-bottom: 150px solid #FF5F5F; border-left: 152px solid transparent; border-right: 152px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -149px; width: 0;}
.other-xl-1 {z-index: 99; background: #43B61A; display: inline-block; height:85px; width: 304px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);}
.other-xl-1:before {border-bottom: 150px solid #43B61A; border-left: 152px solid transparent; border-right: 152px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -149px; width: 0;}
.cog-xl-1 {width: 11px; height: 11px; position: absolute; margin-bottom: 30px; z-index: 99; top: 0px; left: 157px; transform: scale(10);}
.cog-xl-1:before, .cog-xl-1:after {content: ""; position: absolute; transform: rotate(45deg);}
.cog-xl-1:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cog-xl-1:after {width:32px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(14px, 10px);}

.area {margin: 0 auto; border: 10px solid rgba(237, 33, 217, 0.4); border-radius: 50%;}


.speed.normal::after { background: #1e00ff; animation: jaehee 1s ease-in Infinite; animation-duration:0.7s; }
@-webkit-keyframes jaehee {
	0% {
		top: 97%;
	  	opacity: 0.8;
	}
	100% {
		top: 120%;
		opacity: 0;
	}
}

.speed.danger::after { background: #d30000; animation: jaehee02 1s ease-in Infinite; animation-duration:0.4s; }
@-webkit-keyframes jaehee02 {
	0% {
		top: 97%;
	  	opacity: 0.8;
	}
	100% {
		top: 120%;
		opacity: 0;
	}
}



/* 싱가포르항 */

.singapore { z-index: 99; background: #fff; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1); border: 1px solid #ed2839; }
.singapore::after { 
	content: "";
    background: url(../../../../images/upa/com/upa_singaporeMapIcon.png) no-repeat top center;
    background-size: 100% 100%;
    max-height: 17px;
    height: 60%;
    left: 50%;
    transform: translate(-50%, 0%);
    position: absolute;
    top: auto; bottom: 100%;
    width: 100%;
    border-bottom: 0px solid #FF5F5F;
    border-left: 0px solid transparent;
    border-right: 0px solid transparent;
 }
.singapore:before {
    content: "";
    background: url(../../../../images/upa/com/upa_singaporeMapIcon.png) no-repeat top center;
    background-size: 100% 100%;
    max-height: 17px;
    height: 60%;
    left: 50%;
    transform: translate(-50%, 0%);
    position: absolute;
    top: auto; bottom: 100%;
    width: 100%;
    border-bottom: 0px solid #FF5F5F;
    border-left: 0px solid transparent;
    border-right: 0px solid transparent;
}



.mapVideoWrap { position: relative; width: 640px; height: 360px; }
.mapVideoMobileWrap { position: relative; width: 285px; height: 150px; }
.close { position: absolute; right: 0; top: 0; z-index: 10; width: 37px; height: 37px; }





/* ------------------------- 반응형 ------------------------- */

/* 모바일 세로 (해상도 ~ 479px)*/
@media all and (max-width:479px) {
	.sidenav { width: auto; }
	.sidenav .closebtn { top: 24px; right: 40px; width: 30px; height: 30px; line-height: 30px; border-radius: 5px }
}




/* 맵 웹, 모바일 레이아웃 추가 */
.toggleBtn { position: relative; }

.popAnchorWrap { min-width: 349px; background: #fff; position: absolute; left: 0; top: 0; z-index: 10; border: 1px solid #ddd; border-radius: 7px; }
.popAnchorWrap .anchorIcon { position: absolute; left: -17px; top: -20px; width: 33px; }
.popAnchorWrap .close { position: absolute; right: 0; top: 0; z-index: 10; border-left: 1px solid #ddd; border-radius: 0 7px 0 0; border-bottom: 1px solid #ddd; }
.popAnchorWrap h1 { position: relative; border-bottom: 1px solid #ddd; line-height: 50px; box-sizing: border-box; left: 0; height: 50px; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.popAnchorWrap h1.anchorSearchBtnTit { width: calc(100% - 50px); }
.popAnchorWrap h1 span { font-size: 19px; font-weight: bold; background: #fff; padding: 0px; color: #006edb; box-sizing: border-box; }
.popAnchorWrap h1 span:first-child { padding: 0 10px 0 10px; }
.popAnchorWrap h1 span:last-child { /* position: absolute; right: 50px; top: 50%; transform: translate( 0%, -50%); padding: 0 5px; font-size: 17px; color: #006edb; */ display: none; }
.popAnchorWrap h1::before { content:""; width: 100%; height: 1px; background: #c2e1ff; position: absolute; right: 0; top: 50%; transform: translate( 0%, -50%); z-index: -1; }

.popAnchorWrap .anchorTab { text-align: center; font-size: 0; margin-top: -25px; }
.popAnchorWrap .anchorTab button { display: inline-block; padding: 5px 7px; color: #777; font-size: 13px; font-weight: bold; border: 1px solid #aaa; border-bottom: none; margin: 0 2px; border-radius: 7px 7px 0 0; background: #fff;}
.popAnchorWrap .anchorTab button.on { background: #007bf5; color: #fff; border: none; }

.popAnchorWrap h5 { position: relative; font-size: 15px; font-weight: bold; margin: 15px 0 0 15px; }
.popAnchorWrap h5>span { border: 2px solid #777; width: 20px; height: 20px; border-radius: 20px; display: block; position: absolute; right: 10px; top: 50%; transform: translate( 0%, -50%); z-index: 10; text-align: center; }
.popAnchorWrap h5>span>span { display: none; border: 1px solid #777; background: #fff; position: absolute; right: -7px; top: -30px; font-size: 13px; padding: 3px 5px; border-radius: 10px; color: #777; }
.popAnchorWrap h5>span:hover>span { display: block; }

.popAnchorWrap .anchorImg { padding: 10px; box-sizing: border-box; background: #e2f7ff; border-bottom: 1px solid #ddd; width: calc(100% - 0px); }
.popAnchorWrap .anchorImg img { max-width: 100%; }
.popAnchorWrap .anchorList { margin-top: 10px; border-radius: 0 0 7px 7px; border-top: 1px solid #ddd; }
.popAnchorWrap .anchorList caption { text-indent: -9999px; position: absolute; top: -1000em; left: 0;}

.popAnchorWrap .anchorList th { font-weight: bold; }
.popAnchorWrap .anchorList.shipDetailTableList th { padding: 9px 5px; }
.popAnchorWrap .anchorList td { position: relative; text-align: left; padding: 0 57px 0 10px; box-sizing: border-box; white-space: nowrap; }

.popAnchorWrap .anchorList td span { position: absolute; right: 10px; top: 50%; transform: translate( 0%, -50%); border: 1px solid #006edb; color: #006edb; font-size: 13px; padding: 2px 3px; display: inline-block; }
.popAnchorWrap .anchorList td span.defer { border: 1px solid #999; color: #999; }

.popAnchorWrap .clear { text-align: right; padding: 7px 7px 7px 7px; }
.popAnchorWrap .clear span { display: block; padding: 5px 0px; font-size: 13px; color: #3396ff; white-space: break-spaces; text-align: left; }


/* 부두 검색 */
.anchorSearchBtn { position: absolute; right: 10px; bottom: 88px; z-index: 15; width: auto; font-size: 13px; padding: 7px 10px; background: #fff; box-shadow: 1px 1px 3px rgba(0, 0, 0, .07); border-radius: 3px; transition: 0.3s; border: 1px solid #fff; }
.anchorSearchBtn:hover, .anchorSearchBtn.on { background: #3396ff; border: 1px solid #2d86e5; color: #fff; }

.anchorSearch { display: none; width: auto; left: auto; top: auto; bottom: 123px; right: 10px; transform: translate( 0%, 0%); background: rgba(255, 255, 255, .85); }
.anchorSearch.on { display: block; }
.anchorSearch span { display: block; margin: 5px 0 10px; text-align: center; }

.anchorSearch .searchResultList ul { max-width: 270px; max-height: 270px; min-width: 200px; min-height: 100px; overflow-y: auto; border-radius: 5px; }
.anchorSearch .searchResultList ul li { padding: 5px 10px; box-sizing: border-box; border-bottom: 1px solid #ddd; background: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; transition: 0.3s; }
.anchorSearch .searchResultList ul li:hover { background: #f0f0f0; }
.anchorSearch .searchResultList ul li:last-child { border-bottom: none; }
.anchorSearch .searchResultList .closePrev { width: 33px; height: 37px; position: absolute; left: 0; top: 0; background: url(../../../../images/egovframework/com/cmm/btn/btn_prev.png) no-repeat center; }

.anchorSearch .close { position: absolute; right: 5px; top: 5px; display:inline-block; vertical-align: middle; width: 30px; height: 30px; background: none; font-size: 0; }
.anchorSearch .close .x-mark { display:inline-block; vertical-align: middle; width: 30px; height: 30px; margin: 0; }
.anchorSearch .close .x-mark:after { display:inline-block; vertical-align: middle; font-size: 23px; line-height: 25px; font-weight: normal; color: #909090; }

.anchorSearch div { display: block; margin: 3px 0; }

/* 250211 kakim (입항 예정 선박 팝업) */
.arrivalDetail.shipDetailAnchorDetail { left: 349px; border-radius: 10px; }
.arrivalDetail.shipDetailAnchorDetail .shipDetailAnchor { width: 350px; height: 100%; z-index: -1; }
.arrivalDetail.shipDetailAnchorDetail .shipDetailAnchor .anchorTabWrap { 
	transition: 0.3s; position: absolute; top: 50%; left: -349px;
	width: 349px; min-width: auto; height: 100%; transform: translate( 0%, -50%); border-radius: 0; background: #fff; border: 1px solid #ddd; border-left: none;
}
.arrivalDetail.shipDetailAnchorDetail .shipDetailAnchor .anchorIcon { left: -17px; top: -21px; width: 31px; }

/* 저속운항 위반 로그 마커 */


@media all and (max-width:780px){
	#map { border:1px solid #e9e9e7; box-sizing:border-box; position:relative; overflow:hidden; }
	
	#map .mapCheckbox-wrap {
	    position: absolute;
	    display: flex;
	    right: 10px;
	    bottom: auto;
	    top: 50%; transform: translate( 0, -50%);
	    width: 97px;
	    max-height: calc(100% - 200px);
	    z-index: 10;
	    justify-content: flex-end;
	}
	#map .mapCheckbox { overflow-y: auto; }
	
	.filterWrap { width: auto; left: 5px; top: auto; right: auto; bottom: 52px; transform: translate( 0%, 0%); }
}




@media all and (max-width:490px){
	/* #map { height: calc(100% - 60px); } */
	#map .mapOption-r { position: absolute; top: 0px; right: 0px; margin: 0; z-index: 5; }
	#map .mapCheckbox-wrap { top: calc(50% + 30px); max-height: calc(100% - 220px); right: 5px; }
}