@charset "UTF-8";


/* #boxWrap{ height:calc(100vh - 0px); } */


.mapApiBox {height:calc(100vh - 0px); overflow:hidden; position:relative}


#sContents { position: absolute; left: 50%; top: 50%; transform:translate( -50%, -50%); z-index: 10; background: #fff; padding: 20px; }


#sContents .searchInput {
	position: relative;
	display: inline-block;
	width: 100%; height: 53px;
	border-radius: 51px;
	text-align: left;
	border: 2px solid #006edb;
	background: #fff; 
} 
#sContents .searchInput.businessInput::after { height: 216px; }
#sContents .searchInput>a {
	display: block; width: 77px; height: 51px;
	position: absolute; right: -1px; top: -1px;
	font-size:0; text-align: center;
	background: #006edb;
	border-radius: 51px;
}
#sContents .searchInput>a img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#sContents .searchInput .search {
	width: calc(100% - 75px); height: 51px; line-height: 51px;
	background: none; border-radius: 51px; border: none;
	font-size: 17px; color: #555; font-weight: 600; padding: 3px 25px 0; box-sizing: border-box;
	ime-mode: active;
}
#sContents .searchInput .search::placeholder {
	color: #888;
	font-weight: bold;
}

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



#sContents .searchResult.upaData { 
	width: 100%; height: 100%;  
}
#sContents .searchResult:after { display: none; }
#sContents .searchResult .resultCard {
	margin: 20px auto 0;
	width: calc(100% - 20px); text-align: left;
}
#sContents .searchResult .resultCard .item {
	position: relative;
	display: inline-block;
	width: calc(50% - 14px);
	font-size: 0; background-color: #fff; 
	border: 1px solid #acc0fe; border-left: 2px solid #acc0fe;
	padding: 10px 10px 10px; margin: 0 5px 20px; box-sizing: border-box;
    border-radius: 0px;
    transition: 0.3s;
}
#sContents .searchResult .resultCard .item:hover {
	background-color: #fff; box-shadow: 3px 3px 13px rgb(0, 110, 219, 0.3); border: 1px solid #006edb; border-left: 2px solid #006edb;
}
#sContents .searchResult .resultCard .item>.bookmark {
	position: absolute; top: 23px; left: 15px; width: 14px; height: 21px; text-indent: -5000px;
	background: url(../../images/busan/icon/ico_bookmark.svg) no-repeat center; 
}
#sContents .searchResult .resultCard .item>.bookmark.on {background: url(../../images/busan/icon/ico_bookmarkOn.svg) no-repeat center; background-color: #fff;}
#sContents .searchResult .resultCard .item>.pointStar {
	position: absolute; bottom: 13px; right: 15px;
	font-size: 14px; letter-spacing: -1.2px; vertical-align: middle; line-height: 20px;
}
#sContents .searchResult .resultCard .item>.pointStar img { vertical-align: middle; margin: -2px 3px 0 0;}
#sContents .searchResult .resultCard .item .categoryItem { text-align: left; }
#sContents .searchResult .resultCard .item .categoryItem span {
	display: inline-block; padding: 2px 5px 2px; margin:0 2px;
	border: 1px solid #777; border-radius: 7px;
	font-size: 14px; color: #333;
}

#sContents .searchResult .resultCard .item .contTitle {
	position: relative; display: block; width: 100%; height: 57px;
	margin-top: 10px; cursor: pointer; 
	font-size: 17px; font-weight: bold; text-align: center; background: #f3faff; border: 1px solid #acc0fe; transition: 0.3s;
}
#sContents .searchResult .resultCard .item .contTitle div {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	display: block; width: 100%; height: auto; font-size: 18px; font-weight: bold; text-align: left; color: #000;
	padding: 0 10px; box-sizing: border-box;
	text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; transition: 0.3s;
}
#sContents .searchResult .resultCard .item .contTitle:hover { border: 1px solid #006edb; }
#sContents .searchResult .resultCard .item .contTitle:hover div {
	color: #006edb; 
	text-decoration: underline;
}
#sContents .searchResult .resultCard .item .contSubTitle {
	font-size: 14px; color: #333; font-weight: bold; padding: 5px 10px 5px 5px; box-sizing: border-box; border-bottom: 1px solid #acc0fe; line-height: 30px;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

#sContents .searchResult .resultCard .item .contInfo {
	margin-top: 10px; font-size: 0; text-align: left;
}
#sContents .searchResult .resultCard .item .contInfo h5 {
	position: relative; display: inline-block; width: auto;
	font-size: 14px; color: #555; text-align: left; font-weight: bold;
	box-sizing: border-box; padding-left: 17px; margin-left: 10px;
}
#sContents .searchResult .resultCard .item .contInfo h5:first-child { margin-left: 0; }
#sContents .searchResult .resultCard .item .contInfo h5:last-child { width: 100%; font-size: 0px; margin: 10px 0 0 0; margin-left: 0; text-align: center; border-top: 1px solid #ddd; padding-top: 10px; }
#sContents .searchResult .resultCard .item .contInfo h5:last-child span { 
	/* display: block; width: 100%; top: 50%; right: auto; left: 50%; transform:translate(-50%, -50%); color: #555; text-align: center; */ 
	text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
#sContents .searchResult .resultCard .item .contInfo h5:last-child span a { display: inline-block; margin: 0 7px; font-weight: normal; cursor: pointer; }
#sContents .searchResult .resultCard .item .contInfo h5:last-child span a:hover { color: #333;}
#sContents .searchResult .resultCard .item .contInfo h5:last-child::before { display: none; }
#sContents .searchResult .resultCard .item .contInfo h5::before {
	content: "";
	position: absolute; left: 7px; top: 50%; transform:translate(0%, -50%);
	width: 4px; height: 4px; background: #757575; border-radius: 4px;
}
#sContents .searchResult .resultCard .item .contInfo h5 span {
	/* position: absolute; right: 7px; top: 50%; transform:translate(0%, -50%); */
	font-size: 13px; font-weight: normal; margin-left: 5px;
}
#sContents .searchResult .resultCard .item .file {
	position: absolute; right: 10px; top: 13px; text-align: center;
}
#sContents .searchResult .resultCard .item .file a {
	display: inline-block; padding: 1px 10px 1px; margin:0 0px 0px 5px;
	border: 1px solid #ccc;
	font-size: 13px; color: #757575;
}
#sContents .searchResult .resultCard .item .downBtn {
	margin-top: 10px; text-align: center; font-size: 0;
}
#sContents .searchResult .resultCard .item .downBtn button {
	padding: 8px 10px; margin: 0 3px 0px;
	border-radius: 14px; background: #757575;
	font-size: 15px; color: #fff;
	transition: 0.3s;
}
#sContents .searchResult .resultCard .item .downBtn button:hover {background: #006edb}






.category {
	display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; align-content: center;
	width: calc(100% - 27px); height: auto; margin: 0 auto; overflow: hidden; background: #f3faff;
	padding: 20px 20px 20px; box-sizing: border-box; border-radius: 10px; border: none; border: 1px solid #acc0fe;
	transition: 0.3s;
}
.category .categoryCont {
	display: inline-block; position: relative;
	width: calc(33.3% - 10px); margin: 0 0px;
	padding: 10px 10px 10px; box-sizing: border-box;
	border: 1px solid #acc0fe;
	background: #fff;
    border-radius: 7px;
    text-align: left;
}
.category .categoryCont:last-child { margin-bottom: 0; }

.category .categoryCont h5 {
	display: block; text-align: center; border-bottom: 1px solid #ddd;
	font-size: 16px; font-weight: bold; text-align: center;
	padding-bottom: 10px; margin-bottom: 10px;
}
.category .categoryCont div {
	height: 145px; font-size: 0;
	overflow: hidden; overflow-y: auto;
}
.category .categoryCont div::-webkit-scrollbar {
    width: 4px; border-radius: 40px; 
}
.category .categoryCont div::-webkit-scrollbar-thumb {
    background: #acc0fe;
    border-radius: 40px; 
}
.category .categoryCont div::-webkit-scrollbar-track {
    background: #ddd;
    border: none;
    border-radius: 40px;
}
.category .categoryCont div button {
	width: calc(50% - 4px); height: 25px;
	font-size: 15px; font-weight: bold;
	padding: 0 5px; margin: 2px 2px;	
	background: #fff url('../../../../images/upa/com/icon/ico_checkbox02.svg') no-repeat left top 3px; color: #333;
	border-radius: 7px;
	transition: 0.3s; letter-spacing: 0;
	text-align: left; padding-left: 25px; box-sizing: border-box;
}
.category .categoryCont div button.on { background: #fff url('../../../../images/upa/com/icon/ico_checkboxOn02.svg') no-repeat left top 3px;; color: #514ecd; font-weight: bold;}
.category .categoryCont div button img {display: inline-block; vertical-align: middle; margin-right: 10px; }











/* 입항, 예정 선박 */
/* .shipList {
	position: absolute; right: 10px; top: 70px; z-index: 100;
}
.shipList .icoSearchWrap { position: relative; z-index: 10; width: 57px; height: 59px; transition: 0.3s; background: none; overflow: hidden; }
.shipList .icoSearchWrap.active { 
	width: 370px; height: 59px; background: #fff;
	border: 1px solid #006edb; border-radius: 57px; 
}

.shipList .icoSearchWrap .search { 
	display: none; position: absolute; right: 0; top: 0; z-index: 9;
	width: 0; height: 57px; padding-left: 0px; box-sizing: border-box; font-size: 16px; font-weight: bold; 
	transition: 0.3s;
}
.shipList .icoSearchWrap .search.active { width: calc(100% - 107px); left: 57px; display: block; }

.shipList .icoSearchWrap .icoSearch { 
	position: absolute; left: 0; top: 0; z-index: 10; display: block; width: 57px; height: 57px; font-size: 0; border-radius: 57px;
	background: #006edb url('../../../../images/upa/com/icon/ico_subSearch.svg') no-repeat center;
	transition: 0.3s; border: 1px solid #fff;
}
.shipList .icoSearchWrap .icoSearch:hover {
	background: #fff url('../../../../images/upa/com/icon/ico_subSearchOn.svg') no-repeat center;
	transition: 0.3s; border: 1px solid #006edb;
}
.shipList .icoSearchWrap .icoSearch.active:hover { border: 1px solid #fff; }
.shipList .icoSearchWrap .icoSearch.active { background: #fff url('../../../../images/upa/com/icon/ico_subSearchOn.svg') no-repeat center; } 

.shipList .icoSearchWrap .searchClose { 
	display: none; position: absolute; right: 0; top: 0; z-index: 11; width: 57px; height: 57px; font-size: 0;
	background: url('../../../../images/upa/com/icon/contNavClose.png') no-repeat center; 
}
.shipList .icoSearchWrap .searchClose.active { display: block; }


.shipList .icoSearchWrap .searchFilter { 
	display: none; position: absolute; right: 50px; top: 50%; transform:translate( 0%, -50%); z-index: 9;
	height: 27px; line-height: 27px; padding: 0 5px; background: #757575; color: #fff; font-size: 13px; border-radius: 7px;
}
.shipList .icoSearchWrap .searchFilter.active { display: block; }
.shipList .icoSearchWrap .searchFilter.on { background: #006eda; }


.shipList .shipListWrap { width: 0; position: absolute; top: 17px; right: 0; overflow: hidden; opacity: 0; transition: 0.3s; }
.shipList .shipListWrap.active {
  width: 370px; height: auto; max-height: calc(100vh - 95px); overflow-y: auto; background: rgba(255, 255, 255, 0.35); backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px); border-radius: 17px; border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 14px 7px rgba(255, 255, 255, 0.7);
  position: absolute; padding: 50px 10px 0; box-sizing: border-box;
  top: 17px; right: 0; opacity: 1; transition: 0.3s; 
}
.shipList .shipListWrap.active::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
}
.shipList .shipListWrap.active::after {
  content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8),
    transparent,
    rgba(255, 255, 255, 0.3)
  );
}
.shipList .shipListWrap::-webkit-scrollbar {
    width: 3px; height: 3px; border-radius: 40px; 
}
.shipList .shipListWrap::-webkit-scrollbar-thumb {
    background: #006edb;
    border-radius: 40px; 
}
.shipList .shipListWrap::-webkit-scrollbar-track {
    background: #dbf0ff;
    border: none;
    border-radius: 40px;
}



.shipList .shipListWrap li { 
	position: relative; background: #fff; margin-bottom: 10px; padding: 0px 0 10px 10px;
	border-radius: 7px 7px 13px 13px; border: 1px solid #d4eaff; height: 97px;
}
.shipList .shipListWrap li::after { 
	content:""; position: absolute; left: -1px; top: -1px; z-index: 1;
	width: 7px; height: 7px; border-radius: 7px;
}

.shipList .shipListWrap li.red { border-top: 2px solid #ffd4d4; }
.shipList .shipListWrap li.red::after { background: #ff5f5f; }
.shipList .shipListWrap li.green { border-top: 2px solid #cdecc2; }
.shipList .shipListWrap li.green::after { background: #43b61a; }

.shipList .shipListWrap li h3 { width: calc(100% - 77px); font-size: 17px; font-weight: bold; transition: 0.3s;}
.shipList .shipListWrap li h3 a { 
	width: 100%; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; padding: 8px 0 0px; line-height: 37px;
    -webkit-box-orient: vertical; -webkit-line-clamp: 1; transition: 0.3s;
}
.shipList .shipListWrap li h3:hover a { color: #006edb; text-decoration: underline; }

.shipList .shipListWrap li h5 { font-size: 15px; margin-bottom: 0px; }
.shipList .shipListWrap li span { font-size: 13px; color: #555; }
.shipList .shipListWrap li span span { font-weight: bold; }

.shipList .shipListWrap li>div { position: absolute; right: 7px; top: 50%; transform:translate( 0%, -50%); width: 65px; text-align: right; }
.shipList .shipListWrap li>div button { display: inline-block; border: 1px solid #d4eaff; border-radius: 7px; padding: 2px 7px; margin: 2px 0; font-size: 12px; }
.shipList .shipListWrap li>div button:focus-visible { outline: solid 2px #000; border-radius: 1%; }

.shipList .shipListWrap li>div button:first-child { 
	width: 19px; height: 19px; font-size: 0; border: 1px solid #aaa; 
	background: #fff url('../../../../images/upa/com/icon/shipListStar.png') no-repeat center;
}
.shipList .shipListWrap li>div button:first-child.on { 
	border: 1px solid #006edb;
	background: #fff url('../../../../images/upa/com/icon/shipListStarOn.png') no-repeat center;
}

.shipList .shipListWrap li>div button img { margin: 0px 0 0 -5px; }
.shipList .shipListWrap li>div button.on { border: 1px solid #006edb; color: #006edb; }
 */






























/* 
.txt_tlt_b {
	font-size: 1.125rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 700;
	min-height:25px;
	flex-wrap:wrap
}

.mainSec-container {
	display: flex;
	justify-content: space-between;
	height: calc(100vh - 0px);
}

.mainSec-container .mainSec1 {
	width: calc(100% - 0px);
	height: calc(100vh - 0px);
	background: #fff;
	position: relative;
	overflow: hidden;
}
.mainSec-container .mainSec1.zoomInMap {
	width: 100%;
	height: calc(100vh - 100px);	
}
*/




/*
.mainSec-container .mainSec2 {
	width: calc(30% - 5px); height:100%;
}

.search-container {width: 40%;}

.mainSec1 .mapPop-info {
	position: absolute;
	left: 20px;
	bottom: 20px;
	width: 350px;
	z-index: 9
}

.mainSec1 .mapPop-info ul {
	padding-top: 7px
}

.mainSec1 .mapPop-info ul li:first-child {
	border-top: 1px solid #dddddd
}

.mainSec1 .mapPop-info ul li {
	border-bottom: 1px solid #dddddd;
	padding: 7px
}

250312 height 길이 변경 smchoi
.ship-list{max-height: 870px; overflow-y:auto; height: calc(100% - 110px)}

.ship-list > span {display: inline-block; width: 100%; text-align: right; margin-bottom: 5px}

.tableTopBar {display: flex; justify-content: space-between; align-items: center;}

.ship-list table tr td:first-child {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100px
}

.ship-list table tr td:nth-child(3) {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width:160px
}

.ship-list table tr td:nth-child(2) {
	min-width: 150px
}

.ship-list table thead{position:sticky; top:0; z-index:99}

#vesselListTable{border-collapse: separate; border-spacing:0}
#vesselListTable th {position: relative; border-left: 1px solid #FFF}
#vesselListTable thead > tr:first-child > th { border-bottom: 1px solid #FFF }
#vesselListTable thead > tr:first-child > th:last-child { border-bottom:0; }

#vesselListTable tr:hover, #vesselListTable tr.on {
	background-color: #E6F2FE;
	cursor: pointer;
}

#vesselListTable tbody tr:nth-child(even)  { border-bottom: 1px solid #AAA; }
#vesselListTable tbody tr:nth-child(odd) td:last-child { border-bottom: 1px solid #AAA; }
#vesselListTable tbody tr:nth-child(even) td  { border-bottom: 1px solid #aaaaaa; }

#vesselListTable tr.portMis {
	background-color: #d7ffe6;
}

#vesselListTable td { height: 37px }

#toUlsan .modal-content {width: 90%; max-width: 1800px}

@media all and (max-width:1440px){
	.mainSec-container{display:block; width:100%}
	.mainSec-container .mainSec1{width:100%; height:600px}
	.mainSec-container .mainSec2{width:100%; margin-top:10px; height:500px}
	.mapApiBox{min-height:auto}
	#boxWrap{height:auto}
	}

#vesselModal tr:hover{
	background-color: #E6F2FE;	
	cursor: pointer;
} */

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

.tutorial__weather{padding:70px 15px 0 75px;  position:relative}
.tutorial__weather .weather_box{margin-bottom:0; border:2px dashed #87D4FF; padding:10px;}

.tutorial__weather .tutorial_ex{position:absolute; top:117px; left:50%; transform:translateX(-50%); height:200px position:relative; margin:-6px 0 0 200px}
.tutorial__weather .pointer_start:after{display:block; content:''; position:absolute; top:5px; left:4px; height:80px; width:2px; background-color:#87D4FF;}
.tutorial__weather .pointer_end{position:absolute; top:80px; left:80px}
.tutorial__weather .pointer_end:after{display:block; content:''; position:absolute; top:3px; left:-75px; width:75px; height:2px; background-color:#87D4FF;}
.tutorial__weather .torial_ex_txt{position:absolute; top:77px;  left:105px;}


.tutorial__notice{padding:187px 15px 0 75px;  position:relative}
.tutorial__notice .tutorial__notice_in{margin-bottom:0; border:2px dashed #87D4FF; padding:10px;}
.tutorial__notice .tutorial_ex{ position:relative; margin:-6px 0 0 200px}
.tutorial__notice .pointer_start:after{display:block; content:''; position:absolute; top:5px; left:4px; height:80px; width:2px; background-color:#87D4FF;}
.tutorial__notice .pointer_end{position:absolute; top:80px; left:80px}
.tutorial__notice .pointer_end:after{display:block; content:''; position:absolute; top:3px; left:-75px; width:75px; height:2px; background-color:#87D4FF;}
.tutorial__notice .torial_ex_txt{position:absolute; top:77px;  left:105px; }

.tutorial__mapApi{padding:293px 42px 0 93px;  position:relative; display:flex; height:calc(100% - 30px); justify-content:space-between; overflow-y:auto}
.tutorial__mapApi .tutorial__mapApi_in{width:calc(70% - 5px); height:100%; min-height:583px; margin-bottom:0; border:2px dashed #87D4FF; padding:10px;}
.tutorial__mapApi .tutorial_ex{position:relative; width:calc(30% - 5px); height:100%}
.tutorial__mapApi .mapApi-con{width:100%; height:100%; border:1px solid #e9e9e7; box-sizing:border-box; position:relative} */

/* 
.mapApi-con{background:url('../../../../images/upa/com/cmm/map-api-bg.jpg') no-repeat left top}
.mapApi-con .mapOption{position:absolute; top:4px; left:5px; display:flex; flex-direction:row; flex-wrap:nowrap; width:calc(100% - 10px)}
.mapApi-con .mapMode > div{position:relative;}
.mapApi-con .toggleBtn{position:relative; z-index:10; padding:3px 5px; border-radius:3px; background:#ffffff; box-shadow:1px 1px 3px rgba(0,0,0,.2); height:36px; width:128px; flex-shrink:0; margin-left:5px}
.mapApi-con .toggleBtn:before{content:attr(data-content); display:inline-block; margin-top:7px; font-size:.8125rem; padding:0 5px; font-weight:500}
.mapApi-con .mapOption-r{position:relative; z-index:99; margin-left:auto;}
.mapApi-con .mapCheckbox-wrap {position:absolute; display:flex; right:155px; bottom:10px; width:auto; z-index:10; justify-content:flex-end}
.mapApi-con .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}
.mapApi-con .mapCheckbox > div{margin:4px 10px 4px 0; display:flex; align-items:center}
.mapApi-con .mapCheckbox > div:last-child{margin-right:0}
.mapApi-con .mapCheckbox label {font-size:.75rem; font-weight:500; margin-left: 3px;}	
.mapApi-con .sidenav_box{position:absolute; top:50%; transform:translateY(-50%); z-index:10; height:50px;}
.mapApi-con .sidenav_btn{display:inline-block; position:relative; top:auto; transform:none; 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}

.tutorial__mapApi .tutorial__mapApi_in.mapApi_in-ship{min-height:650px}
.mapApi-con.mapApi-ship{background:url('../../../../images/upa/com/cmm/map-api-bg.jpg') no-repeat center top}
.mapApi-con__ship{position:absolute; left:50%; transform:translateX(-50%); top:100px}
.mapApi-con__ship p.gudie-num{position:absolute;}
.mapApi-con__ship p.gudie-num:first-child{left:-71px; top:226px;}
.mapApi-con__ship p.gudie-num:nth-child(2){left:64px; top:-15px;}
.mapApi-con__ship p.gudie-num:nth-child(3){left:-9px; top:201px;}
.mapApi-con__ship p.gudie-num:nth-child(4){left:0px; top:438px;}
.mapApi-con__ship p.gudie-num:nth-child(5){right:0px; top:438px;}
 */
 
 /* 
.tutorial__ApiVessel{padding:278px 27px 0 85px;  position:relative; display:flex; height:100%; justify-content:space-between; overflow-y:auto}
.tutorial__ApiVessel .tutorial_ex{width:calc(70% - 5px); height:100%; margin-bottom:0; text-align:right; padding-right:20px}
.tutorial__ApiVessel .tutorial__ApiVessel_in{position:relative; width:calc(30% - 5px); height:fit-content; border:2px dashed #87D4FF; padding:15px;}
.tutorial__ApiVessel .mapApi-con{width:100%; height:100%; border:1px solid #e9e9e7; box-sizing:border-box; position:relative}
.tutorial__ApiVessel_in .tableInfo{background:#ffffff}
.tutorial__ApiVessel_in p.gudie-num{position:absolute; z-index:999}
.tutorial__ApiVessel_in p.gudie-num:first-child{left:5px; top:12px}
.tutorial__ApiVessel_in p.gudie-num:nth-child(2){left:5px; top:73px}
.tutorial__ApiVessel_in p.gudie-num:nth-child(3){left:5px; top:150px}
.tutorial__ApiVessel_in p.gudie-num:nth-child(4){left:5px; top:185px}

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

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


/* 모바일 레이아웃 추가 */

/* 
@media all and (max-width:1440px){
	
	.mobileBoxWrap { margin-top: 60px !important; padding: 0 !important; }
	 
	.dashboardWeatherWrap { position: relative; height: 35px; border: 1px solid #ddd; border-bottom: none; background: #fff; overflow: hidden; cursor: pointer; transition: 0.3s; margin-bottom: 0 !important; }
	.dashboardWeatherWrap::before { content:"해양, 육상 기상 보기"; display: block; width: 100%; height: 35px; text-align: center; line-height: 35px; font-size: 15px; font-weight: bold; }
	.dashboardWeatherWrap.on { height: auto; background: #fff; }
	.dashboardWeatherWrap.on::before { content:"닫기"; width: auto; position: absolute; right: -1px; top: -1px; z-index: 10; background: #777; color: #fff; padding: 0px 3px; border-radius: 7px; font-size: 13px; height: 27px; line-height: 27px; } 
	
	.dashboardWeatherWrap>div .box { height: 96px; }
	.dashboardWeatherWrap .weather-info .tlt { margin-bottom: 0; }
	.dashboardWeatherWrap .weather-info .tlt h2 { padding: 5px 0px 5px 13px; }
	
	.dashboardNoticeWrap { position: relative; height: 35px; border: 1px solid #ddd; background: #fff; overflow: hidden; cursor: pointer; transition: 0.3s; }
	.dashboardNoticeWrap::before { content:"공지사항, 행상운임지수, 국제유가 보기"; display: block; width: 100%; height: 35px; text-align: center; line-height: 35px; font-size: 15px; font-weight: bold; }
	.dashboardNoticeWrap.on { height: auto; background: #fff; }
	.dashboardNoticeWrap.on::before { content:"닫기"; width: auto; position: absolute; right: -1px; top: -1px; z-index: 10; background: #777; color: #fff; padding: 0px 3px; border-radius: 7px; font-size: 13px; height: 27px; line-height: 27px; } 
	
	.dashboardMapWrap { margin-top: 0 !important; }
	.mainSec-container .mainSec1 { width:100%; height: calc(100vh - 140px); }
	.mainSec-container .mainSec1 .mapApiBox { height: calc(100% - 70px); }
	.dashboardMapCont { padding: 10px !important; }
	.arrivalStatusAggregateMobile { border: 1px solid #f0f0f0; margin: 5px 0 0 0 !important; padding: 5px; width: 100%; overflow-x: auto; white-space: nowrap; }
	
	#map .mapOption .mapZoomBox { display: none; }
	
}
 */