@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%;}
}

/* 전자해도 > 범례 */
.encWrap .btnMapEnc {position:absolute; right:.5%; top:80px; z-index:10; display:flex; flex-direction: column; gap:.2rem; align-items: center; justify-content: center; padding:8px 5px; width:45px; min-height:40px; font-size:14px; background-color:#fff; border:1px solid #AAA; border-radius:4px; transition: transform 0.2s ease, box-shadow 0.2s ease; transition: all 0.3s ease;}
.encWrap .btnMapEnc:hover {transform: translateY(-2px); box-shadow: 0 6px 10px rgb(49 51 52 / 20%);}
.encWrap .btnMapEnc .icon{display:block; width:100%; height:20px; background:url(../../../../images/upa/com/ship/icon_btn_map_enc.svg) no-repeat center center; background-size: contain;}
.encWrap .btnMapEnc.active {background-color:#3463FC; color:#fff; border-color:#1042E8;}
.encWrap .btnMapEnc.active .icon{background-image:url(../../../../images/upa/com/ship/icon_btn_map_enc_active.svg);}
.encWrap .btnClose{display:block; position:fixed; right:.5%; top:2%; z-index:1; width:45px; height:45px; background:url(../../../../images/upa/com/ship/icon_enc_close.svg) no-repeat center center; background-size:60%; transition:all .3s;}
.encWrap .btnClose:hover{border-radius:50%; background-color:rgb(255 255 255 / 72%); transform: rotate(90deg);}
/* #encLegend{ position:absolute; top:150px; right:.5%; z-index:1; width:760px; padding:40px; border-radius:16px; overflow:hidden; background-color:#fff; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1); opacity: 0; transform: translateX(0%); pointer-events: none; animation: slideOutRight 0.4s ease-in forwards;}
#encLegend.active{display:block; opacity: 1; transform: translateX(0); pointer-events: auto; animation: slideInRight 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;}   
#encLegend .tit{display:flex; justify-content:space-between; padding-bottom:20px; font-weight:800; font-size:22px;}
#encLegend .tit .close{display:none; position:relative; width:30px; height:30px; background:url(../../../../images/upa/com/ship/icon_enc_close.svg) no-repeat center center; background-size:contain;}
#encLegend img{width:100%;} */
.legend_list { position: absolute; top: 65px; left: 380px; z-index: 10; display: flex; flex-direction: row; align-items: center; gap:3px; width: auto; height: 35px; padding: 5px 12px; background: #ffffff; border-radius: 3px; box-shadow: 1px 1px 3px rgba(0, 0, 0, .2); cursor: pointer; transition:all .3s;}
.legend_list .text{display:block; text-align: center; font-size: 15px; font-weight: 500; letter-spacing: -0.45px; tansition:all .3s;}
.legend_list .icon{display:flex; width:16px; height:16px; background:url(../../../../images/upa/com/ship/icon_btn_map_enc.svg) no-repeat center center; transition:all .1s;}
.legend_list:hover .text{opacity:.8;}
.legend_list.active{background-color:#3396FF;}
.legend_list.active .text{color:#fff;}
.legend_list.active .icon{background-image:url(../../../../images/upa/com/ship/icon_btn_map_enc_active.svg);}
.popup_legend{display:none; z-index: 10; position: relative; width: 740px; top: 64px; left: 460px; padding: 30px 40px; border-radius: 8px; background-color: #fff; transition:all .3s;}
.popup_legend img{width:100%;}
.popup_legend.active{display:block;}
@media screen and (max-width: 1240px) {
	.popup_legend{top:110px; left:50px;}
}
@media screen and (max-width: 812px) {
	.popup_legend{width:90%;}
}
@media screen and (max-width: 787px) {
	#encLegend{top:initial; right:initial; bottom:0; width:100%; padding: 40px 20px 20px; border-bottom-left-radius:0; border-bottom-right-radius:0; animation: slideOutBottom 0.4s ease-in forwards;}
	#encLegend.active{animation: slideInBottom 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;}
	.encWrap .btnClose{height:90px; background-position:center 60%;}
	.encWrap .btnMapEnc{top:98px;}
	.popup_legend{padding:20px 20px; width:86%;}
}
@media screen and (max-width: 520px) {
	.legend_list{top: 110px; left:46px;}
	.popup_legend{top:158px}
}
@media screen and (max-width: 450px) {
	.shipList{top:106px;}
}
@media screen and (max-width: 370px) {
    #map .toggleBtn.electronicChart{top:106px; left:46px; right:initial;}
    #map .toggleBtn.electronicChart.active{top:106px;}
    .legend_list{left: 168px; top: 106px;}
}
@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);}
/* Map 검색박스 */
.sidenav_btn{display:inline-block; position:absolute; top:50%; transform:translateY(-50%); width:20px; height:50px; background:#ffffff; border-radius:0 5px 5px 0; box-shadow:5px 1px 5px 0 rgba(0,0,0,0.15); z-index:10}
.sidenav_btn:after{content:""; display:inline-block;  width: 0px; margin-left:2px; margin-top:3px; height: 0px; border-left: 6px solid #007BF5; border-top: 6px solid transparent; border-bottom: 6px solid transparent;}
.sidenav{height: 100%; width:400px; position: absolute; z-index: 1; top: 0; left:-450px; background-color: #ffffff; transition: 0.25s; padding:0; box-shadow:5px 3px 10px 0 rgba(0,0,0,0.15); z-index:11}
.sidenav .sidenav-con{height:100%; overflow-y:auto; width:100%}
.sidenav .tlt{font-size:1.125rem; font-weight:500; /*height:40px;*/ line-height:38px; border-bottom:1px solid #EFEFEF; padding:5px 20px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; align-items:center}
.sidenav .tlt.shipTlt, .sidenav .tlt.filterTlt {background:#f7f9fc}
.sidenav .tlt.shipTlt:before{content:""; display:inline-block; width:20px; height:15px; background: url('../../../../images/upa/com/boxDetail.png') no-repeat center; background-size:15px 15px; margin-right:5px}
.sidenav .tlt.filterTlt:before{content:""; display:inline-block; width:20px; height:15px; background: url('../../../../images/upa/com/filter.png') no-repeat center; background-size:18px 12.5px; margin-right:5px}
.sidenav .btnWrap {display: flex; justify-content: space-between; width: 100%}
.sidenav .btnWrap button {height: 35px; width: calc(50% - 5px)}
.sidenav .cts{padding:15px 20px; }
/* .sidenav .cts.cts_check {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: space-between;} */
.sidenav .cts .inputWrap {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: space-between;}
.sidenav .cts .input_box{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; justify-content:space-between; align-items:center; padding-bottom:7px;}
.sidenav .cts .input_box input[type=text]{width:200px}
.sidenav .cts .input_box input[type=checkbox]{margin-right:5px; margin-top:2px}
.sidenav .cts.cts_check .input_box{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; justify-content:flex-start; align-items:flex-start; padding-bottom: 10px;}
.sidenav .cts.cts_check .input_box > label {max-width: 150px; overflow: hidden; text-overflow: ellipsis; font-size: .825rem}
.sidenav .cts.cts_check .input_box > label > span.ko {display: block}
.sidenav .closebtn { position: absolute; top: 50%; right: -20px; transform: translateY(-50%); font-size:26px; width:20px; height:50px; border-radius:0px 5px 5px 0px; background:#ffffff; line-height:43px; text-align:center; box-shadow:1px 3px 5px 0 rgba(0,0,0,0.06); transition:all .15s}
.sidenav .closebtn:hover{background:#cacaca; color:#ffffff}

/* 맵 선그리기 */
.dot {overflow:hidden;float:left;width:12px;height:12px;background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/mini_circle.png');}    
.dotOverlay {position:relative;bottom:10px;border-radius:6px;border: 1px solid #ccc;border-bottom:2px solid #ddd;float:left;font-size:12px;padding:5px;background:#fff;}
.dotOverlay:nth-of-type(n) {border:0; box-shadow:0px 1px 2px #888;}    
.number {font-weight:bold;color:#ff2424;}
.dotOverlay:after {content:'';position:absolute;margin-left:-6px;left:50%;bottom:-8px;width:11px;height:8px;background:url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white_small.png')}
.distanceInfo {position:relative;top:5px;left:5px;list-style:none;margin:0;}
.distanceInfo .label {display:inline-block;}
.distanceInfo:after {content:none;}

.ship1Legend {margin-top: 3px; background: #FF5F5F; display: inline-block; height:11px; position: relative; width: 10px; top: 5px}
.ship1Legend: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;}
.ship2Legend {margin-top: 3px; background: #43B61A; display: inline-block; height:11px; position: relative; width: 10px; top: 5px}
.ship2Legend: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;}

.cogLegend {margin-top: 3px; margin-left: 2px; width: 7px; height: 7px; position: absolute; margin-bottom: 30px;}
.cogLegend:before, .cogLegend:after {content: ""; position: absolute; transform: rotate(45deg);}
.cogLegend:before {width:100%; height:100%; border: 1px solid #0BF0FF; border-right:0; border-bottom:0;}
.cogLegend:after {width:15px; height: 1px; background-color: #0BF0FF; transform: rotate(90deg) translate(7px, 4px);}

.singapuraLegend {margin-top: 3px; background: #fff; border: 1px solid #ed2839; display: inline-block; height:10px; position: relative; width: 8px; top: 3px; left: 1px;}
.singapuraLegend:before {border-bottom: 8px solid #ed2839; border-left: 5px solid transparent; border-right: 5px solid transparent; content: ""; height: 0; left: -2px; position: absolute; top: -6px; width: 0;}

.sizeRange {padding: 10px; position: absolute; z-index: 11; top: 117px; right: 0; min-width: 380px; display: none;}
.sizeRange > table {font-size: .825rem;}
.sizeRange > table tr:first-child {height: 30px;}
.sizeRange > table td:first-child {width: 40px;}
.sizeRange > table td {padding: 5px; vertical-align: middle;}

.shipDetail {background-color: #fff; border-radius: 2px; border: 1px solid #ddd; width: 350px; position: absolute; z-index: 99;}
.arrivalVassel { right: 10px; top: 100px }
.shipInfo {display: flex; align-items: center; border-bottom: 1px solid #ddd;}
.nationality {width: 50px; height: 50px; text-align: center; line-height: 11px; }
.nationality > img {margin: 5px 0px; width: 40px}
.nationality > span {display: inline-block; width: 45px; text-overflow: ellipsis; overflow: hidden}
.close { width: 50px; height: 50px; font-size: 1.2rem; border: none; background-color: #fff; color: #aaa; cursor: pointer; transition: all .2s;}
.close:hover {background-color: #efefef;}

.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; }
.voyageStatus {padding: 10px 20px;}
.voyageStatusText {display: flex; justify-content: space-between; text-align: center; align-items: center; margin: 0 auto 5px;}
.voyageStatusText > p {font-size: 1rem; width: 48%; overflow: hidden; text-overflow: ellipsis}
.voyageStatusText > p#departure {text-align: left}
.voyageStatusText > p#destination {text-align: right}
.voyageStatusProgress {width: 100%; height: 10px; margin: 0 auto; border-radius: 10px;}
.voyageStatusProgressInner {appearance: none; width:100%; height: 100%; border-radius: 10px; position: relative;}
.voyageStatusProgressInner::-webkit-progress-bar {background-color: #ddd; border-radius: 10px;}
.voyageStatusProgressInner::-webkit-progress-value {background-color: #007BF5; border-radius: 10px;}
.voyageTime {margin-top: 10px; font-size: .825rem; display: flex; justify-content: space-between;}
.shipStatus {padding: 0px 10px}
.shipStatus > table {width: 100%; min-height: 80px;  border-collapse: collapse; border-top: 1px solid #ddd; table-layout: fixed;}
.shipStatus > table tr {display: flex; height: 80px;}
.shipStatus > table td {padding: 10px; width: 33.33%; height: 100%; display: flex; flex-direction: column; border-bottom: 1px solid #ddd !important;}
.shipStatus > table td > span {text-align: left}
.shipStatus > table td > p {margin-top: 10px; word-wrap: break-word; /* Internet Explorer 5.5+ */ white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-break:break-all;}
.shipStatus > table td > p#navStatus { font-size: 1rem; font-weight: 600; margin-top: 20px }
.shipStatus > table td > p#sog, .shipStatus > table td > p#cog { font-size: 2rem }
.shipStatus > table td > p#cog > span { position: absolute }
.shipDetail .update { display: inline-block; width: 100%; text-align: right }
.timeInfo { padding: 0px 20px; align-items: flex-start; font-size: .9rem }
.timeInfo > p:nth-child(even) { margin-left: auto }
.shipDetailBtn {padding: 5px 10px 10px; display: flex; justify-content: space-between}
.shipDetailBtn > button {width: calc(100% - 0px); height: 30px; margin: 0 2px; }

/* 대기 시간 예측 */
.popWaitingTimeBtn { padding: 1px 5px;border-radius: 5px;position: relative;right: -105px;top: 0px;border: 1px solid #555; transition: 0.3s; }
.popWaitingTimeBtn:hover { background: #555; color: #fff; }

/* 배, 방향 아이콘 */
.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::after { content: ""; width: 100%; height: 50%; max-width: 15px; max-height: 15px; position: absolute; left: 50%; top: 97%; transform: translate(-50%, 0%); border-radius: 40%; }


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



/* 사고상황정보, 싱가포르항 */
.accidentInfo {  z-index: 99; display: inline-block; height:12px; width: 9px; opacity: 0.7; border-style: solid; border-width: 0px 10px 17px 10px; border-color: transparent transparent #fee800 transparent; }
.accidentInfo::after {
	content: "!";
    color: #000;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}



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




/* 부두 아이콘 */
/* .ulsanPort, .ulsanPort1 {display: inline-block; width: 12px; height: 12px; border-radius: 10px; background-color: #17317A; z-index: 1; position: absolute;} */
.portLegend p span {
	display: inline-block;
	width: 16px;
	height: 17px;
	z-index: 1; 
	position: absolute;
}
.ulsanPort1 {
	background: url(../../../../images/upa/com/icon/map_btn_cont_04.svg);
}
/* .mipoPort, .mipoPort1 {display: inline-block; width: 0px; height: 0px; border: 7px solid transparent; border-bottom-color: #F7B966; z-index: 1; position: absolute;} */
.mipoPort1 {
	background: url(../../../../images/upa/com/icon/map_btn_cont_07.svg);
}
/* .mipoPort:after, .mipoPort1:after {content: ''; position: absolute; left: -7px; top: 7px; width: 0; height: 0; border: 7px solid transparent; border-top-color: #F7B966;} */
/* .onsanPort, .onsanPort1 {display: inline-block; width: 10px; height: 10px; background-color: #9D50FF; z-index: 1; position: absolute} */
.onsanPort1 {
	background: url(../../../../images/upa/com/icon/map_btn_cont_05.svg);
}
/* .uNewPort, .uNewPort1 {display: inline-block; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 12px solid #2FD8CE; position: absolute; z-index: 1;} */
.uNewPort1 {
	background: url(../../../../images/upa/com/icon/map_btn_cont_06.svg);
}

.portLegend {padding: 10px 20px; min-width: 140px; border-radius: 3px; background-color: #FFF; box-shadow: 1px 1px 3px rgba(0,0,0,.2); position: absolute; right: 10px; bottom: 160px; z-index: 10; line-height: 25px; font-size: .875rem; display:none}
.portLegend .ulsanPort1, .portLegend .mipoPort1, .portLegend .onsanPort1, .portLegend .uNewPort1 {top:3px; position: relative; left: auto; margin-right: 10px}
/* .portLegend .mipoPort1 {top: -5px; left: -2px; margin-right: 7px}
.portLegend .uNewPort1 {top: 2px; margin-right: 8px} */

.portName {padding: 5px; background-color: #FFF; border-radius: 2px; border: 1px solid #EFEFEF; box-shadow: 1px 1px 10px 0px rgba(0,0,0,0.1); z-index: 9; font-size: .825rem}
.portName span {color: #222}

.portLegend p.disable {opacity: 0.3}

.watermark { display: block; z-index: 9; position: absolute; width: 130px; bottom: 25px; left: 10px;  }

.routeInfoText {position: absolute; background-color: #FFF; border-radius: 2px; border: 1px solid #EFEFEF; box-shadow: 1px 1px 3px rgba(0,0,0,.2); z-index: 9; padding: 5px 10px; top: 10%; left: 20%;}
.routeInfoText > p {display: inline-block; }

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

/* 모바일 세로 (해상도 ~ 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; }



/* 선박에 추가 부두 레이아웃 */
.shipDetailAnchor { width: 350px; height: 100%; z-index: -1; }

.shipDetailAnchor .anchorTabWrap { transition: 0.3s; position: absolute; top: 50%; left: 349px; width: 300px; min-width: auto; height: 100%; transform: translate( 0%, -50%); border-radius: 0; background: #fff; border: 1px solid #ddd; border-left: none; }

/* .shipDetailAnchor .shipDetailAnchorTab { text-align: center; font-size: 0; position: absolute; left: 650px; top: 50%; transform: translate( 0%, -50%); z-index: 11; }
.shipDetailAnchor .shipDetailAnchorTab button { display: block; padding: 7px 5px; color: #777; font-size: 13px; font-weight: bold; border: 1px solid #aaa; border-left: none; margin: 3px 0px; border-radius: 0 7px 7px 0; background: #fff; transition: 0.3s; }
.shipDetailAnchor .shipDetailAnchorTab button:hover , .shipDetailAnchorTab button.on { background: #007bf5; color: #fff; border: 1px solid #007bf5; } */

.shipDetailAnchor .anchorIcon { left: 0px; top: -8px; width: 21px; }
.shipDetailAnchor .anchorImg { height: 136px; margin: 0 auto; border-bottom: 1px solid #ddd; width: calc(100% - 0px); padding: 10px 10px 10px; box-sizing: border-box; background: #e2f7ff; }

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


/* 선박에서 검색 후 부두 레이아웃 */
.shipDetail.shipDetailAnchorDetail { left: 349px; border-radius: 10px; }
.shipDetail.shipDetailAnchorDetail .shipDetailAnchor { width: 350px; height: 100%; z-index: -1; }
.shipDetail.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;
}
.shipDetail.shipDetailAnchorDetail .shipDetailAnchor .anchorIcon { left: -17px; top: -21px; width: 31px; }
.shipDetailAnchor.popAnchorWrap h1 span:last-child { position: absolute; right: 0px; top: 50%; transform: translate( 0%, -50%); padding: 0 17px; font-size: 17px; color: #006edb; }

/* 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; }

/* 저속운항 위반 로그 마커 */
#todayLog {
	display: inline-block;
    width: 15px;
    height: 15px;
    background: #ff0000;
    border-radius: 20px;
    border: 1px solid #fff;
}

#otherLog {
	display: inline-block;
    width: 15px;
    height: 15px;
    background: #00c0dd;
    border-radius: 20px;
    border: 1px solid #fff;
}


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