@charset "UTF-8";


.flex-row { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;} 
.flex-column { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;}
.flex-between{display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;-webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;}
.flex-between p { width: calc(100% -10px); overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.flex-between p.new{display:flex;}
.flex-between p.new .txt_tlt{display:block; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.flex-between p.new button{padding:2px 4px;}
.flex-end{display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -moz-box-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end}
.flex-center{display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-justify-content: center; -ms-flex-pack: center; justify-content: center;}
.flex-align-end{display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -moz-align-items: flex-end; -ms-flex-align: end; align-items: flex-end;}
.flex-align-start{display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -moz-align-items: flex-start; -ms-flex-align: start; align-items: flex-start !important;}
.flex-align-center{display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;}
.flex-wrap{-webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}

.txt_ss{ font-size:.865rem !important;}
.txt_s{ font-size:.925rem !important;}
.txt_dft{ font-size:1rem !important;}
.txt_tlt{font-size:1.125rem !important;}
.txt_m{font-size:1.125rem !important;}
.txt_lg{font-size:1.25rem !important;}
.t_bold{font-weight:400; }
.t_bold2{font-weight:600; }
.t_bold3{font-weight:700; }


.wordBreak { word-break: keep-all; width: 280px }

/*컬러공통*/
.c-wh{color:#ffffff !important;}
.c-green{color:#92D050 !important;}
.c-org{color:#FFC000 !important;}
.c-red{color:#ed0000 !important;}
.c-blue{color:#006edb !important;}
.c-grey {color: #757575 !important;}
.c-defalut {color: #222 !important;}
.c-ulsan { color: #FF5F5F !important; }
.c-other { color: #43B61A !important; }

.x-mark {display: inline-block}
.x-mark:after {display: inline-block; content: "\00d7"; font-size: 2rem; color: #aaa}

.circle { width: 10px; height: 10px; border-radius: 50%; display: inline-block }

table{border-collapse: collapse} 



table th{background:#f6faff; color:#ffffff; padding:10px 5px; text-align:center;  border-left:1px solid #ffffff; font-size:.825rem; font-weight:normal}


table td{padding:10px 5px; font-size:.825rem; text-align:center; border-bottom: 1px solid #EFEFEF; border-left: 1px solid #EFEFEF}
table th:first-child, table td:first-child {border-left: none;}
.rowspanTd {border-right: 1px solid #EFEFEF; vertical-align: middle;}
.totalTr > td:not(.rowspanTd) {background-color: #ddd;}
table tr:last-child td, table tr:last-child th{border-bottom: 1px solid #005EBC} */
table.line-none th{border-left:none}
table.line-none td{border-left:none}
/* table tbody th{border-bottom:1px solid #c9d9e9; background:#e4ecf5; ;color:#1a1a1a;} */

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

/* .ascIco {position: absolute; top:50%; right: 5px; transform: translateY(-50%); display:inline-block; width: 0px; height: 0px; border-bottom: calc( 4px * 1.732 ) solid #fff; border-left: 4px solid transparent; border-right: 4px solid transparent;}
.descIco {position: absolute; top:50%; right: 5px; transform: translateY(-50%); display:inline-block; width: 0px; height: 0px; border-top: calc( 4px * 1.732 ) solid #fff; border-left: 4px solid transparent; border-right: 4px solid transparent;}
.sortIco {position: absolute; top:50%; right: 5px; transform: translateY(-50%); display: flex; flex-direction: column;}
.sortIco:before {margin-bottom: 3px; content: ""; display:inline-block; width: 0px; height: 0px; border-bottom: calc( 4px * 1.732 ) solid #fff; border-left: 4px solid transparent; border-right: 4px solid transparent;}
.sortIco:after {content: ""; display:inline-block; width: 0px; height: 0px; border-top: calc( 4px * 1.732 ) solid #fff; border-left: 4px solid transparent; border-right: 4px solid transparent;}

.half-box, .half-boxS, .equal3, .equal73 {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap:wrap;  justify-content:space-between}
.half-box > div, .half-boxS > div{width:calc(50% - 5px);}
.half-box > div.one-box{width:calc(50% - 10px)}
.equal3 > div { width: calc(33.33% - 3.33px); }
.equal73 > div:first-child { width: calc(70% - 5px); }
.equal73 > div:last-child { width: calc(30% - 5px); } */


table.common {
    width: 100%;
    border-top: 2px solid #006edb;
    margin: 0px 0 0px;
    table-layout: fixed;
}
table.common th { font-weight: bold; }



#skip_menu a{position:absolute;opacity:0;top:0}
#skip_menu a:focus{display:inline-block;padding:10px;background:#000;font-size:15px;color:#fff;opacity:1;z-index:9999}

/* 기상 정보 박스 */
/* 
.weather_box h2{font-size:1rem; font-weight:bold}
.weather_box p{font-size:0.8125rem; color:#aaaaaa; font-weight:300}

.weather_box>div{position:relative; min-height:85px; height: 85px; }
.weather_box>div .box { padding: 0px 17px; height: 85px; box-sizing: border-box; align-items: center; }

.weather-info{display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; height:100%; align-items:flex-start; }
.weather-info.sea-weather:hover{position:absolute; width:100%; height:auto; top:0; left:0; z-index:99}
.weather-info .hidden{display:none; margin:5px 0; width:100%;  justify-content:space-between}
.weather-info:hover .hidden{display:flex; }

.weather-info { overflow: hidden; }
.weather-info .tlt { display: flex; justify-content:center; align-items: center; position: relative; }

.weather-info .tlt h2 { position: relative; display: block; padding: 10px 0px 10px 13px; transition: 0.3s; flex-shrink:0; }
.weather-info .tlt h2:before { content: ''; width: 3px; height: 15px; background-color: #006edb; position: absolute; top: 50%; left: 0px; transform: translate( 0%, -50%); }

.weather-info .tlt>div { display: block; position: absolute; left: -20px; top: 50%; transform: translate( 0%, -50%); z-index: 10; width: 137px; text-align: left; background: #fff; box-shadow: 1px 1px 10px rgba(14, 79, 179, 0.3); color: #0364c5; font-size: 12px; letter-spacing: -0.7px; padding: 7px 10px; border-radius: 20px; opacity: 0; transition: 0.3s;}
.weather-info .tlt>div p { color: #0364c5; font-size: 12px; font-weight: bold; } 
.weather-info .tlt:hover>div { left: -10px; opacity: 1; }


.weather-info .info{width:calc(100% - 150px); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; justify-content:space-between; flex-wrap:wrap; }
 */

/* 
.weather-info .info dl{position:relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; width:25%; justify-content:center; align-items: center; margin: 5px 0; }
.weather-info .info dl dt{display:block; width:50px; height:50px; border-radius:50%; margin-right:10px}
.weather-info .info dl:after{content:""; display:block; position:absolute; left: auto; right:0px; top:0px; height:50px; width:1px; background:#dddddd}
.weather-info .info dl:nth-child(4n):after{width:0}
.weather-info .info dl dd{font-size:.825rem; color:#aaaaaa; padding:10px 0;}
.weather-info .info dl dd span{font-size:1.125rem; font-weight:bold; padding-top:5px; color:#222222}
.weather-info .info dl dd span.unit {font-size: .825rem; font-weight: 500}
.weather-info .info dl dd span > span{font-size:.875rem; display:inline-block}
.weather-info .info dl.direcition dt{background:url('../../../../images/upa/com/cmm/windDirection.png') no-repeat center #E6F2FE; background-size:24px 25px}
.weather-info .info dl.speed dt{background:url('../../../../images/upa/com/cmm/windSpeed.png') no-repeat center #E6F2FE; background-size:31.5px 23.5px}
.weather-info .info dl.waterTemp dt{background:url('../../../../images/upa/com/cmm/icon_water-temp.png') no-repeat center #E6F2FE; background-size:26px 24px}
.weather-info .info dl.sky dt{background:url('../../../../images/upa/com/cmm/sky.png') no-repeat center #E6F2FE; background-size:28px 18px}
.weather-info .info dl.temp dt{background:url('../../../../images/upa/com/cmm/temp.png') no-repeat center #E6F2FE; background-size:10px 29px}
.weather-info .info dl.prbblPrcpt dt{background:url('../../../../images/upa/com/cmm/prbblPrcpt.png') no-repeat center #E6F2FE; background-size:18px 27px}
.weather-info .info dl.flurryWind dt{background:url('../../../../images/upa/com/cmm/flurryWind.png') no-repeat center #E6F2FE; background-size:19.5px 29.5px}
.weather-info .info dl.maxWave dt{background:url('../../../../images/upa/com/cmm/maximumWaveHeight.png') no-repeat center #E6F2FE; background-size:31px 19px}
.weather-info .info dl.precipitation dt{background:url('../../../../images/upa/com/cmm/precipitation.png') no-repeat center #E6F2FE; background-size:18px 27px}
.weather-info .info dl.atmosPrs dt{background:url('../../../../images/upa/com/cmm/icon_atmos-prs.png') no-repeat center #E6F2FE; background-size:26px 26px}
.weather-info .info dl.heightWater dt{background:url('../../../../images/upa/com/cmm/icon_height-water.png') no-repeat center #E6F2FE; background-size:28px 22px}
.weather-info .info dl.prbblType dt{background:url('../../../../images/upa/com/cmm/prbblType.png') no-repeat center #E6F2FE; background-size:23px 24px}
.weather-info .info dl.salt dt{background:url('../../../../images/upa/com/cmm/icon_salt.png') no-repeat center #E6F2FE; background-size:21px 33px}
.weather-info .info dl .more-info{display:none; padding:20px; position:absolute; right:0; top:60px; width: 250px; background:#ffffff; border-radius:5px; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.15); z-index:99}
.weather-info .info dl .more-info p > span {font-size: 1rem; font-weight: 500}
.weather-info .info dl:hover .more-info{display:block;}
.weather-info .info dl:hover .more-info li{display:flex; color:#222222; padding:5px 0; align-items:center}
.weather-info .info dl:hover .more-info li p{color:#222222; font-size:1rem}
.weather-info .info dl:hover .more-info li p.tlt{width:120px; flex-shrink:0; font-size:.75rem; color:#aaaaaa}

.weather-info .swiper-slide{display: flex; justify-content:space-between; flex-wrap:wrap; align-items: center; }

.weather-info .weatherSwiper{width:100%; height:68px; overflow: visible; }
.weather-info .swiper-button-prev{left:auto; right:0px; top:auto; bottom:25px; transform:rotate(180deg)}
.weather-info .swiper-button-next{left:auto; right:0px; top:auto; bottom:3px}
.weather-info .swiper-button-prev:after, .weather-info .swiper-button-next:after{content:''; width:20px; height:20px; background:url('../../../../images/upa/com/cmm/slider_btn.png') no-repeat center; background-size:20px 20px }
 */

/* 공지사항 */
/* .noticeWrpa { display: flex; justify-content: space-between; } */

/* 공지사항 슬라이드 박스 */
/* .noticeBox { width: calc(33.3% - 5px); position: relative; }
.noticeBox p { display: inline-block; vertical-align: middle; }
.noticeBox>div { margin: 0 0 0 20px; display: inline-block; vertical-align: middle; width: calc(100% - 150px); }
.noticeBox > p:after {content: ''; width: 1px; height: 15px; background-color: #DDD; margin-left: 20px; display: inline-block;}
.noticeBox > button { position: absolute; width: 25px; height: 25px; right: 20px; top: 50%; font-size: 1.5rem; line-height: 1.5rem; transform: translate( 0%, -50%); }
.noticeBox .swiper-slide { cursor:pointer }
.noticeSwiper .swiper-wrapper { transition-timing-function: linear; } */

/* 해상 운임자수 추가 */
/* .box.noticeBox02 { display: flex; justify-content: space-between; align-items: center; padding: 0 20px 0 10px; }
.noticeBox02 > p { min-width: 117px; position: relative; display: block; padding: 10px 0 10px 13px; transition: 0.3s; }
.noticeBox02 > p:after { position: absolute; right: -20px; top: 50%; transform: translate( 0%, -50%); margin-left: 0; }
.noticeBox02 > p:before { top: 50%; transform: translate( 0%, -50%); }


.noticeBox02 > p > span { display: block; position: absolute; left: 50%; top: 5px; transform: translate( -50%, 0%); width: 200px; text-align: center; background: #fff; box-shadow: 1px 1px 10px rgba(14, 79, 179, 0.3); color: #0364c5; font-size: 12px; letter-spacing: -0.7px; padding: 3px 7px; border-radius: 20px; opacity: 0; transition: 0.3s;} 
.noticeBox02 > p:hover > span { top: -15px; opacity: 1; }


.noticeBox02 ul { width: 570px; margin-left: 7px; display: flex; justify-content: space-between; align-items: center; position: relative; right: 0; font-size: 0; }

.noticeBox02 ul li { position: relative; width: calc(33.3% - 10px); margin: 0 5px; display: flex; justify-content: center; align-items: center; font-size: 21px; font-weight: bold; box-sizing: border-box; color: #007bf5; text-align: center; }
.noticeBox02 ul li>span { padding-left: 10px; box-sizing: border-box; }
.noticeBox02 ul li h3 { font-size: 19px; color: #555; font-weight: bold; text-align: right; }


.noticeBox02 ul li h3 span { display: block; position: absolute; left: 50%; top: 5px; transform: translate( -50%, 0%); width: 120px; text-align: center; background: #fff; box-shadow: 1px 1px 10px rgba(14, 79, 179, 0.3); color: #0364c5; font-size: 12px; letter-spacing: -0.7px; padding: 3px 7px; border-radius: 20px; opacity: 0; transition: 0.3s;} 
.noticeBox02 ul li:hover h3 span { top: -20px; opacity: 1; }


.noticeBox02 > button { position: static; right: auto; top: auto; transform: translate( 0%, 0%); width: 25px; height: 25px; font-size: 1.5rem; line-height: 1.5rem; }
 */



/* 
@media all and (max-width:1676px){
	.noticeWrpa { display: block; }
	.noticeBox { width: 100%; margin: 5px 0;}
	.noticeBox02 ul li { padding: 5px 0 5px 0; }
}
@media all and (max-width:560px){
	.noticeBox02 ul li { display: block; width: calc(100% + 20px); font-size: 19px; }
	.noticeBox02 ul li h3 { font-size: 17px; margin-right: 10px; }
}
 */






/* searchBar */

.searchBar { 
	/* display: -webkit-box; display: -moz-box; display: -ms-flexbox;
	display: -webkit-box; display: -ms-flexbox;
	display: flex; -webkit-box-pack: center; -moz-box-justify-content: center; -ms-flex-pack: center; 
	justify-content: center; -webkit-box-align: center;  -moz-align-items: center; -ms-flex-align: center; align-items: center; */
} 
/* .searchBar * {margin-left: 10px;} */
.searchBar *:first-child {margin-left: 0;}
.searchBar select {width: 150px; height: 35px;}
.searchBar input[type="text"], .searchBar select {height: 40px;}
.searchBar button {text-align: center;}
.searchBar input[type="radio"] {height: 16px; top: 5px;}


.rList_tabNav{position:absolute; right:0; top:0;}
.rList_tabNav.tabNav button{width:100px; font-size:.875rem}
.tabNav{display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap:nowrap; }
.tabNav button{flex-grow:1; height:30px; margin-left:-1px; border:1px solid #EFEFEF; text-align:center; background:#ffffff}
.tabNav button:hover, .tabNav button:focus, .tabNav button.active{color:#ffffff; background:#007bf5}











.greenBtn {
	/* background: linear-gradient(94.01deg, #8ce131 0%, #65C300 100%); */
	background: #107c41;
	border-radius: 5px;
	color: #fff;
	border: none;
	font-size: 14px; font-weight: bold;
	cursor: pointer;
	transition: all .2s;
	border:2px solid transparent;
}

.greenBtn:hover {
	background: #00662e;
	/* background: linear-gradient(0deg, #fff 0%, #fff 100%) padding-box, linear-gradient(270deg, #B4EA7C 0%, #65C300 100%) border-box;
	color: #159700; */
}

.redBtn {
	background: linear-gradient(94.01deg, #FF6868 0%, #FF2424 100%);
	border-radius: 5px;
	color: #fff;
	border: none;
	font-size: 14px; font-weight: bold;
	cursor: pointer;
	transition: all .2s;
	border:2px solid transparent;
}

.redBtn:hover {
	background: #FFFFFF;
	background: linear-gradient(0deg, #fff 0%, #fff 100%) padding-box, linear-gradient(270deg, #FF6868 0%, #FF2424 100%) border-box;
	color: #ed0000;
}

.blueBtn {
	/* background:linear-gradient(94.01deg, #47A3FF 0%, #007BF5 100%); */
	background: #004ba8;
	border-radius: 5px;
	color: #fff;
	border: none;
	font-size: 14px; font-weight: bold;
	cursor: pointer;
	transition: all .2s;
	border:2px solid transparent;
}

.blueBtn:hover {
	background: #00469c;
	/* background: linear-gradient(0deg, #fff 0%, #fff 100%) padding-box, linear-gradient(270deg, #47A3FF 0%, #007BF5 100%) border-box; */
}

.greyBtn {
	background: linear-gradient(94.01deg, #CCCCCC 0%, #AAAAAA 100%);
	border-radius: 5px;
	color: #fff;
	border: none;
	font-size: .875rem;
	cursor: pointer;
	transition: all .2s;
	border:2px solid transparent;
}

.whBtn {
	background: linear-gradient(94.01deg, #ffffff 0%, #f2f2f2 100%);
	border-radius: 5px;
	color: #676767;
	font-size: .875rem;
	cursor: pointer;
	transition: all .2s;
	border:2px solid #eaeaea;
}

.greyBtn:hover {
	background: #FFFFFF;
	background: linear-gradient(0deg, #fff 0%, #fff 100%) padding-box, linear-gradient(270deg, #CCCCCC 0%, #AAAAAA 100%) border-box;
	color: #AAAAAA;
}

.update {
	font-size: .875rem;
}

.blueBtn2 {
	background:#006edb;
	border-radius: 5px;
	color: #fff;
	border: none;
	font-size: .875rem;
	cursor: pointer;
	transition: all .2s;
	padding:5px 15px;
	font-weight:normal;
	
}

.fullBtn{width:100%; padding:5px 0; text-align:center; font-size:.875rem}

.btn_sm{padding:2px 15px; font-size:.75rem}
.btn_mid{padding:5px 20px; font-size:1rem}
.btn{padding:7.5px 17px; font-size:.875rem}
.btnPos .updateBtn{ position: relative; left: 100%; transform: translateX(-100%);}

.refreshBtn {
	background:url('../../../../images/upa/com/cmm/icon_refresh.png') no-repeat center / contain #ffffff;
	background-size:35px 35px;
	border-radius: 5px;
	border: none;
	font-size: .875rem;
	cursor: pointer;
	transition: all .2s;
	width:35px;
	height:35px;
	border:1px solid #d7d7d7
}

.delBtn { position: relative; }
.delBtn:hover { background: linear-gradient(94.01deg, #f0f0f0 0%, #ddd 100%); border: 2px solid #ddd; }
.delBtn::before {
	content:""; position: absolute; right: -3px; top: -3px; width: 11px; height: 11px;
	background:url('../../../../images/upa/com/cmm/ico_btnDel.png') no-repeat center;
}

/*--------------------------토글----------------------------*/


.switch {
	position: relative;
	display: inline-block;
	width: 55px;
	height: 26px;
	vertical-align:middle;
}
.switch input {display:none;}


.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 20px;
	width: 20px;
	left: 4px;
	bottom: 3px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked + .slider {
    background-color: #3396ff;
}

input:focus + .slider {
    box-shadow: 0 0 1px #007BF5;
}

input:checked + .slider:before {
    -webkit-transform: translateX(27px);
    -ms-transform: translateX(27px);
    transform: translateX(27px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}





















#boxWrap_LContWrap {
	width: 100%;
	position: relative; 
	padding: 0px 0px 0px;
}

.box {
	background: #FFF;
	border: 1px solid #E7E7E7;
	border-radius: 5px;
	padding: 15px 20px;
	position:relative
}

/*페이징*/
/* 
#paging {
	margin-top: 20px;
}

#paging > ul {
	display: -webkit-box; 
	display: -moz-box; 
	display: -ms-flexbox; 
	display: flex; 
	justify-content: center;
}

#paging > ul > li {
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background-color: #1B2750;
	border-radius: 50px;
	margin: 0px 5px;
}

#paging > ul > li > a {
	display: inline-block;
	width: 100%;
	height: 100%;
	color: #fff;
	font-size: .875rem;
}


#paging > ul > li.on {
	background-color: #007BF5;
}


 */
 
 








#container {
	display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;
}

#container .zoomInContainer {
	display: block;
}

#contents {
	width: calc(100% - 0px);
	position: relative;
	margin-left:auto;
}

/* .topBar {
    position: absolute;
    top: 0;
    left: 0;
    display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;
    height: 60px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 0px 30px 0px 0px;
    z-index: 100;
    border-bottom:1px solid #efefef;
    border-radius: 0 0 17px 17px;
} */

.topBar .logo > h2{font-size:1.25rem; font-weight:bold}






.topRightBox {
	display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;
}









.searchBox {
	background-color: #efefef !important;
	border: 1px solid #E9E9E9;
	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.15);
	border-radius: 10px;
	width: 250px;
	height: 35px;
	background-image: url('../../../../images/upa/com/cmm/search.png');
	background-repeat: no-repeat;
	background-position: 7px center;
	padding-left: 37px !important;
	margin-right: 20px;
	font-family: 'Pretendard Regular';
}

.user {
	width: 150px;
	height: 35px;
	line-height: 35px;
	background: #006edb;
	border-radius: 10px;
	box-shadow: 1px 1px 10px rgba(14, 79, 179, 0.3);
	color: #fff;
	padding: 0px 5px;
	font-size: .9rem;
	cursor: pointer;
	display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}

.user.logOut {
	width: 150px;
	height: 35px;
	line-height: 35px;
	background: #FFF;
	border-radius: 10px;
	box-shadow: 1px 1px 10px rgba(14, 79, 179, 0.3);
	color: #0364c5;
	padding: 0px 5px;
	font-size: .9rem;
	cursor: pointer;
	display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}

/* 알람 추가 */
.alarmWrap { position: relative; }

.alarmWrap>button {
	position: relative; display: block; width: 37px; height: 37px !important; border-radius: 37px; box-shadow: 1px 1px 10px rgba(14, 79, 179, 0.3); text-align: center;
	margin-right: 20px; box-sizing: border-box; background: #fff !important;
}
.alarmWrap:last-child>button { margin-right: 0; }
.alarmWrap>button>img { width: 17px; margin-top: 2px; }
.alarmWrap>button span { position: absolute; right: -13px; top: -7px; font-size: 13px; display: inline-block; background: #3C9EFF; color: #fff; width: 22px; height: 22px; border-radius: 22px; line-height: 21px; }
.alarmWrap>button span>img { margin-top: 3px; }

/* 
.alarmWrap .alarmBtn, .alarmWrap .noticeBtn {
	position: relative; display: block; width: 35px; height: 35px; border-radius: 35px;
	background: #fff; box-shadow: 1px 1px 10px rgba(14, 79, 179, 0.3); text-align: center;
	margin-right: 27px; box-sizing: border-box;
}
.alarmWrap .alarmBtn>span, .alarmWrap .noticeBtn>span { 
	position: absolute; right: -13px; top: -5px; font-size: 13px; display: inline-block; background: #3C9EFF; color: #fff; width: 22px; height: 22px; border-radius: 22px; line-height: 23px;
}
 */


.alarmWrap .alarmPop {
	opacity: 0;
	position: absolute; right: -30px; top: 57px; transform: translate( 0%, 0%); background: #fff; border: none;
	width: 370px; height: 0; max-height: calc(100vh - 107px); box-shadow: 3px 3px 6px rgba(0, 0, 0, .2);
	transition: 0.3s; overflow: hidden;
}
.alarmWrap .alarmPop.active { opacity: 1; right: -10px; width: 370px; height: auto; overflow-y: auto; border: 1px solid #ddd; transition: 0.3s; }

.alarmWrap .alarmPop .close { position: absolute; right: 0; top: 0; width: 45px; height: 50px; font-weight: normal; line-height: 50px; }
.alarmWrap .alarmPop .close .x-mark:after { color: #555; }
.alarmWrap .alarmPop h1 { font-size: 17px; vertical-align: middle; font-weight: bold; padding: 15px 15px 15px; box-sizing: border-box; border-bottom: 1px solid #ddd; }
.alarmWrap .alarmPop h1 button { margin: -4px 0 0 5px; }
.alarmWrap .alarmPop .alarmList { position: relative; display: block; width: 100%; padding: 10px 37px 10px 17px; box-sizing: border-box; border-bottom: 1px solid #ddd; color: #555; font-size: 15px; transition: 0.3s; }
.alarmWrap .alarmPop .alarmList:last-child { border-bottom: none; }
.alarmWrap .alarmPop .alarmList:hover { background: #f7f7f7; }
.alarmWrap .alarmPop .alarmList span.listTit { font-weight: bold; color: #333; position: relative; }
.alarmWrap .alarmPop .alarmList span.listTit::before { content:""; width: 4px; height: 4px; background: #3c9eff; position: absolute; left: -10px; top: -2px;  border-radius: 5px; }
.alarmWrap .alarmPop .alarmList span.minute { display: block; color: #999; font-size: 13px; margin-top: 4px; }

.alarmWrap .alarmPop .alarmList.off { background: #f0f0f0; color: #999; }
.alarmWrap .alarmPop .alarmList.off span.listTit::before { background: #aaa; }
.alarmWrap .alarmPop .alarmList.off span.listTit { color: #777; }

.alarmWrap .alarmPop .alarmList .listClose { width: 20px; height: 20px; position: absolute; right: 10px; top: 50%; transform: translate(0%, -50%);}
.alarmWrap .alarmPop .alarmList .listClose .x-mark { line-height: 20px; font-weight: normal; }
.alarmWrap .alarmPop .alarmList .listClose .x-mark:after { font-size: 1.3rem; color: #999; }

.alarmWrap .alarmPop .alarmList.no { font-size: 15px; font-weight: bold; text-align: center; line-height: 70px; color: #777; cursor: default; padding: 10px 17px; }
.alarmWrap .alarmPop .alarmList.no:hover { background: #fff; }

.alarmWrap .alarmPop .allDel { display: block; padding: 4px 10px; line-height: normal; position: absolute; right: 47px; top: 12px; border-radius: 25px; background: #999; color: #fff; font-size: 13px; }
.alarmWrap .alarmPop .allDel.on { background: #007bf5; }

.liveAlarm { position: fixed; z-index: 1000; right: 27px; bottom: 0px; opacity: 0; background: #fff; border: 1px solid #ddd; border-top: 2px solid #007bf5; width: 370px; height: auto; box-shadow: 3px 3px 6px rgba(0, 0, 0, .2); transition: 0.3s; }
.liveAlarm.on { bottom: 27px; opacity: 1; }
.liveAlarm .alarmList { position: relative; display: block; width: 100%; padding: 10px 37px 10px 17px; box-sizing: border-box; border-bottom: 1px solid #ddd; color: #555; font-size: 15px; transition: 0.3s; }
.liveAlarm .alarmList:last-child { border-bottom: none; }
.liveAlarm .alarmList:hover { background: #f7f7f7; }

.liveAlarm .alarmList span.listTit { font-weight: bold; color: #333; position: relative; }
.liveAlarm .alarmList span.listTit::before { content:""; width: 4px; height: 4px; background: #3c9eff; position: absolute; left: -10px; top: -2px;  border-radius: 5px; }
.liveAlarm .alarmList span.minute { display: block; color: #999; font-size: 13px; margin-top: 4px; }
.liveAlarm .alarmList .listClose { width: 20px; height: 20px; position: absolute; right: 10px; top: 50%; transform: translate(0%, -50%); }
.liveAlarm .alarmList .listClose .x-mark { line-height: 20px; }
.liveAlarm .alarmList .listClose .x-mark:after { font-size: 1.3rem; color: #999; }

@media all and (max-width:1240px){
	.alarmWrap .alarmPop h1 button{height:22px;}
	.alarmWrap .alarmPop h1 button a{line-height:1;}
}



/* 알림 설정 팝업 레이아웃 */
.anarmSetWrap { 
	position: fixed; left: 0; top: 0; z-index: 9999; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.7); 
	display: flex; justify-content: center; flex-wrap: wrap; align-items: center;
 }
.anarmSetWrap .popupCont { position: relative; margin: 0 10px; min-width: 970px; min-height: auto; max-width: calc(50% - 40px); background: #fff; border-top: 2px solid #007bf5; }

.anarmSetWrap .popupCont .popupContent { display: block; margin: 0; font-size: 0; min-height: 300px; white-space: normal; padding: 15px 15px; font-size: 15px; }
.anarmSetWrap .popupCont .popupContent .popTitle { font-size: 19px; font-weight: bold; padding-bottom: 10px; }
.anarmSetWrap .popupCont .popupContent h5 { font-size: 15px; font-weight: bold; padding: 10px 0 7px; margin: 13px 0 5px; color: #555; text-align: center; border-top: 2px solid #aaa; border-bottom: 1px solid #ddd; background: #f2f9ff; }
.anarmSetWrap .popupCont .popupContent .anarmSetList caption { text-indent: -9999px; position: absolute; top: -1000em; left: 0;}
.anarmSetWrap .popupCont .popupContent .popClose .listClose { position: absolute; right: 15px; top: 5px; }
.anarmSetWrap .popupCont .popupContent .anarmSettingList ul li { display: inline-block; }

.anarmSetWrap .popupCont .popupContent ul li input { vertical-align: middle; }
.anarmSetWrap .popupCont .popupContent ul li label { margin-right: 17px; vertical-align: middle; }


.anarmSetWrap .popupCont .popupContent .alarmListChoice { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
.anarmSetWrap .popupCont .popupContent .alarmListChoice>li { width: calc(20% - 5px); border: 1px solid #aaa; border-top: none; }
.anarmSetWrap .popupCont .popupContent .alarmListChoice>li>h5 { margin: 0 0 0px; border-top: 2px solid #aaa; }

.anarmSetWrap .popupCont .popupContent .alarmListChoice>li>div { height: 100px; overflow-y: auto; padding: 5px; box-sizing: border-box; }
.anarmSetWrap .popupCont .popupContent .alarmListChoice>li>div>span { font-size: 12px !important; display: block; background: #f0f0f0; margin-bottom: 5px; padding: 5px; box-sizing: border-box; }
.anarmSetWrap .popupCont .popupContent .alarmListChoice>li>div>ul>li { display: block; }

.anarmSetWrap .popupCont .popupContent .alarmPopBtn { text-align: right; }





@media all and (max-width:780px){
	.anarmSetWrap .popupCont { min-width: auto; min-height: auto; max-width: calc(100% - 40px); max-height: calc(100vh - 40px); }
}
@media all and (max-width:560px){
	
}



/* 대시보드 팝업 */
.wrapPopup { position: fixed; z-index: 1100; width: 410px; height: 519px; background: #fff; border-top: 2px solid #1B2750; top: 310px; right: 27px; }
.wrapPopup .popupCont { box-shadow: 0px 0px 10px rgba(0, 0, 0, .7); font-size: 0; }
.wrapPopup .popupCont .popClose { position: relative; background: #1B2750; color: #fff; font-size: 15px; padding: 13px 10px; }
.wrapPopup .popupCont .popClose::before { 
	content:""; position: absolute; left: 50%; bottom: 44px; transform: translate(-50%, 0%); z-index: 5;
	width: calc(100% + 0px); padding: 30px 0; 
	background: linear-gradient(
        0deg,
        rgba(27, 39, 80, 0.8) 40%,
        rgba(255, 255, 255, 0) 100%
    );
}

.wrapPopup .popupCont .popClose input, .wrapPopup .popupCont .popClose lavel { vertical-align: middle; }
.wrapPopup .popupCont .popClose .listClose { position: absolute; padding: 0 13px; right: 0; line-height: 30px; top: 50%; transform: translate(0%, -50%); }
.wrapPopup .popupCont .popClose .listClose .x-mark:after { color: #fff; }

.wrapPopup .popupCont .swiperArrow { bottom: 0px; top: auto; z-index: 20; }

.wrapPopup .popupCont .swiper-pagination { 
	padding: 30px 0 17px; bottom: -1px;
	/* background: linear-gradient(
        0deg,
        rgba(27, 39, 80, 0.8) 40%,
        rgba(255, 255, 255, 0) 100%
    ); */
}
.wrapPopup .popupCont .swiper-pagination-bullet { background: #3C9EFF; width: 7px; height: 7px; opacity: 1; }
.wrapPopup .popupCont .swiper-pagination-bullet-active { background: #fff; }

.wrapPopup .popupCont .btn_pause { width: 20px; height: 25px; position: absolute; right: 37px; bottom: 7px; z-index: 30; background: url('../../../../images/upa/com/cmm/ico_stop.png') no-repeat center; cursor: pointer; }
.wrapPopup .popupCont .btn_pause.on { background: url('../../../../images/upa/com/cmm/ico_play.png') no-repeat center; }

.wrapPopup .popupCont .popSwiper { height:518px; }
.swiper-wrapper img { width: 100%; }





/* 설문팝업 */ 
.wrapPopup.popSurveyWrap { z-index: 1000; width: 727px; height: auto; background: #fff; border-top: 2px solid #1B2750; top: 240px; right: 27px; }
.wrapPopup.popSurveyWrap .popupCont { height: auto; box-shadow: 0px 0px 10px rgba(0, 0, 0, .7); font-size: 0; }
.wrapPopup.popSurveyWrap .popupCont .popSwiper { height: 577px; }
.wrapPopup.popSurveyWrap .popupCont iframe { width: calc(100% + 20px); height: 707px; padding-bottom: 37px; box-sizing: border-box; }

.highlight .write-item input { width: 100%; }

.wrapPopup.popSurveyWrap.popSurveyWrap02 { z-index: 900; top:270px; right: 57px; }
.wrapPopup.popSurveyWrap.popSurveyWrap03 { z-index: 800; top:300px; right: 87px; }

 

/* 팝업 아이프레임 수정 */
.wrapPopup .popupCont iframe { width: calc(100% + 20px); height: 100%; position: absolute; left: 50%; top: -77px; transform: translate(-50%, 0%); }
.highlight { padding: 0 20px 57px !important; top: 0px !important;}

/* 팝업 공지사항 */
.noticePopWrap { position: relative; width: 100%; }
.noticePopWrap .noticePopTit h1 { position: relative; background: #1b2750; padding: 15px 15px 15px 25px; box-sizing: border-box; color: #fff; font-size: 21px; font-weight: bold; }
.noticePopWrap .noticePopTit h1::before { content:""; width: 3px; height: 15px; background: #b0d6ff; position: absolute; left: 13px; top: 50%; transform: translate(0%, -50%); border-radius: 3px; }
.noticePopWrap .noticePopTit h5 { height: 435px; overflow-y: auto; font-size: 15px; padding: 17px; background: #f5faff; line-height: 23px; }
.noticePopWrap .noticePopTit h5 .popDate { width: 100%; padding: 10px 17px; background: #f0f0f0; margin-top: 10px; }
.noticePopWrap .noticePopTit h5 .popDate p { margin: 0px 0; font-size: 13px; color: #555; font-weight: bold; }
.noticePopWrap .noticePopTit h5 .popDate p span { display: inline-block; width: 100px; margin-left: 10px; }

/* 싱가포르 btn */
.singapuraBtn { display: inline-block; padding: 2px 8px; margin-top: -5px; background: #f0f0f0; border: 1px solid #ddd; border-radius: 7px; cursor: pointer; transition: 0.3s; }
.singapuraBtn:hover { background: #fff; color: #333; border: 1px solid #aaa; }

.carUnload { display: inline-block; padding: 2px 8px; margin-top: -5px; background: #f0f0f0; border: 1px solid #ddd; border-radius: 7px; cursor: pointer; transition: 0.3s; position: absolute; right: 20px; top: 50px; }


@media all and (max-width:1892px){
	.singapuraBtn { float: inherit; display: inline-block; margin-top: 0px; }
}

@media all and (max-width:1024px){
	.wrapPopup { top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); max-height: calc(100vh - 40px); max-width: calc(100% - 40px); }
	.noticePopWrap .noticePopTit h1 { left: 0; }
	.wrapPopup.popSurveyWrap { top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); max-height: calc(100vh - 40px); max-width: calc(100% - 40px); }
	
	.carUnload { position: static; margin: 5px 0 0 0; }
}


.userFace {
	width: 25px;
	height: 25px;
	line-height: 25px;
	background: #3C9EFF;
	border-radius: 7px;
	text-align: center;
	display: inline-block; vertical-align: middle;
}

.user.logOut .userFace {
	color: #FFF
}

.user span{line-height:35px; padding-left:5px}
.user > i{position:absolute; right:15px; top:10px}

.option {
	width: 150px;
	position: absolute;
	top: 35px;
	right: 0px;
	background: #FFF;
	border-radius: 5px;
	text-align: center;
	box-shadow: 1px 1px 10px rgba(14, 79, 179, 0.3);
	display: none;
}

.option > a {
	display: block;
	height: 40px;
	width: 100%;
	line-height: 40px;
	transition: all .2s;
	padding: 0px 10px;
}

.option > a:first-child {
	border-bottom: 1px solid #EFEFEF;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.option > a:last-child {
	border-bottom-left-radius: 5px; 
	border-bottom-right-radius: 5px;
}

.option > a:hover {
	background-color: #007BF5;
	color:  #fff;
}

.mBurger {
	width: 30px;
	height: 30px;
	position: relative;
	text-align: right;
	display: none;
	cursor:pointer
}

.mBurger>div {
	width: 30px;
	height: 3px;
	border-radius: 10px;
	background-color: #1B2750;
	margin: 0 auto;
	position: absolute;
	transition: all .4s;
}

.mBurger > div:first-child {
    top: 4px;
}

.mBurger > div:nth-child(2) {
    top: 14px;
}

.mBurger > div:nth-child(3) {
    top: 24px;
}

.mBurger > div:first-child.active {
	transform: translateY(10px) rotate(45deg);
}

.mBurger > div:nth-child(2).active {
	opacity: 0;
}

.mBurger > div:nth-child(3).active {
	transform: translateY(-10px) rotate(-45deg);
}



/*datepicker*/
.ui-widget-header { border: 0px solid #dddddd; background: #fff; } 
.ui-datepicker-calendar>thead>tr>th { font-size: 14px; background: #f7f9fc; color: #333333; line-height: 30px } 
.ui-datepicker .ui-datepicker-header { position: relative; padding: 10px 0; } 
.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default,.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active { border: 0px solid #c5c5c5; background-color: transparent; font-weight: normal; color: #454545; text-align: center; padding: 5px 0 } 
.ui-datepicker .ui-datepicker-title { margin: 0 0em; line-height: 16px; text-align: center; font-size: 14px; padding: 0px; font-weight: bold; } 
.ui-datepicker { display: none; background-color: #fff; border-radius: 4px; margin-top: 0px; margin-left: 0px; margin-right: 0px; padding: 20px; padding-bottom: 10px; width: 300px; box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.1); } 
.ui-widget.ui-widget-content { border: 1px solid #eee; } 
#datepicker:focus>.ui-datepicker { display: block; } 
.ui-datepicker-prev, .ui-datepicker-next { cursor: pointer; } 
.ui-datepicker-next { float: right; } 
.ui-state-disabled { cursor: auto; color: hsla(0, 0%, 80%, 1) } 
.ui-datepicker-title { text-align: center; padding: 10px; font-weight: 100; font-size: 20px; } 
.ui-datepicker-calendar { width: 100%; } 
.ui-datepicker-calendar>thead>tr>th { padding: 5px; font-size: 14px; font-weight: 400; } 
.ui-datepicker-calendar>tbody>tr>td>a { color: #000; font-size: 12px !important; font-weight: bold !important; text-decoration: none; } 
.ui-datepicker-calendar>tbody>tr>.ui-state-disabled:hover { cursor: auto; background-color: #fff } 
.ui-datepicker-calendar>tbody>tr>td { border-radius: 100%; width: 44px; height: 30px; cursor: pointer; padding: 5px; font-weight: 100; text-align: center; font-size: 12px; } 
.ui-datepicker-calendar>tbody>tr>td:hover { background-color: transparent; opacity: 0.6; } 
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus { border: 0px solid #cccccc; background-color: transparent; font-weight: normal; color: #2b2b2b; } 
.ui-widget-header .ui-icon { background-image: url('../../../../images/ygpa/com/cmm/selectDownArrowGray.png') } 
.ui-icon-circle-triangle-e { background-position: center; background-size: 15px; transform: rotate(-90deg) } 
.ui-icon-circle-triangle-w { background-position: center; background-size: 15px; transform: rotate(90deg) } 
.ui-datepicker-calendar>tbody>tr>td:first-child a { color: red !important; } 
.ui-datepicker-calendar>tbody>tr>td:last-child a { color: #0099ff !important; } 
.ui-datepicker-calendar>thead>tr>th:first-child { color: red !important; } 
.ui-datepicker-calendar>thead>tr>th:last-child { color: #0099ff !important; } 
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight { border: 0px; background: #f1f1f1; border-radius: 5px; padding: 5px 0; display: inline-block; width: 100%; } 
table.ui-datepicker-calendar tr:last-child td { border-bottom: none } 

/*loader*/
.lds-ring{display:none; position:fixed; width:100%; height:100%;  left:0; top:0; bottom:0; right:0; z-index:9999; }
.lds-ring .lds-ring-item { position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index:9999;  }
.lds-ring:after{content:""; display:block; position:fixed; width:100%; height:100%; left:0; top:0; bottom:0; right:0; background:rgba(0,0,0,.4)}
.lds-ring .lds-ring-item div { box-sizing: border-box; display: block; position: absolute; top:0px; left:20px;  width: 49px; height: 49px; margin: 6px; border: 6px solid #ffffff; border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #ffffff transparent transparent transparent;}
.lds-ring .lds-ring-item div:nth-child(1) { animation-delay: -0.45s;}
.lds-ring .lds-ring-item div:nth-child(2) {animation-delay: -0.3s;}
.lds-ring .lds-ring-item div:nth-child(3) { animation-delay: -0.15s;}
.lds-ring .lds-ring-item p{position:absolute; top:65px; left:50%; transform:translate(-50%); font-size:.875rem; color:#ffffff; width:100px; text-align:center;}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


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

@media all and (min-width: 1441px) and (max-width:1560px){
	/*.weather-info .weatherSwiper{height:70px;}*/
	.weather-info .info{align-items:flex-start}
}

@media all and (max-width:1440px){
	.half-box > div{width:100%;}
	.weather_box .weather-info:nth-child(2){margin-top:20px}
	.reverseItems{flex-direction:column-reverse}
	.weather_box>div{margin-bottom:10px}
	}

@media all and (max-width:1023px){
	/* .mBurger {display: block;}
	.topRightBox{display:none}
	nav{left:-60px}
	#contents{width:100%}
	#gnb > li {margin: 10px 0px; position: relative; height: 40px; height:auto; width:100%; background-color: rgba(44, 60, 115, 0.5);}
	nav .mo-option{display:block; display:flex; margin:10px; justify-content:space-between; gap:10px}
	nav .mo-option a{display:block; text-align:center; padding:10px 0; color:#ffffff; width:50%; border:1px solid rgba(255,255,255,.2); background:rgba(0,0,0,.1); border-radius:5px; font-size:.875rem}
	#gnb > li.sitemap-nav{position:relative; left:auto; bottom:auto;}
	#gnb > li.anonymity-nav{position:relative; left:auto; bottom:auto;}
	#gnb > li.notice-nav{position:relative; left:auto; bottom:auto;}
	.weather-info:hover .hidden{display:none; }
	.weather-info:hover{position:relative; width:auto; height:auto; top:auto; left:auto; z-index:99}
	.weather_box .weather-info{flex-wrap:wrap}
	.weather_box .weather-info .tlt{width:100%; padding-right:0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-bottom:10px}
	.weather_box .weather-info .tlt p{margin-top:5px; margin-left:5px;}
	.weather-info .info{width:100%}
	.weather-info .weatherSwiper{height:88px;} */
}

/* PC 2 */
@media all and (min-width: 1201px) and (max-width: 1919px) {
	.searchBox {width: 200px;}
}

/* PC , 테블릿 가로 (해상도 1024px ~ 1200px)*/
@media all and (min-width:1024px) and (max-width: 1200px) {
	.searchBox {width: 200px;}
	.user {width: 120px;}
	.option {width: 120px;}
}

/* 테블릿 가로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) {
	body{font-size:15px}
	#boxWrap{padding:0 20px 20px}
	header:hover {overflow: unset;}
	
	
	
	.dep2 {
	
		position: relative;
	    /*left: 250px;
	    top: -50px;*/
	    padding: 10px;
	    background-color: #1B2750;
    }
    
	h1 {left: 15px;}
	/* h1 img {width: 30px;} */
	h1 a {line-height: 60px;}

	.topBar {padding: 0px 20px 0px 10px; margin-bottom: 20px;}
	.topBar .searchBox {display: none;}
	.user {width: 120px;}
	.option {width: 120px;}
	#BoxWrap {top: 80px; padding: 0px 20px 20px;}
	.half-boxS > div{width:100%;}
	
	
}

/* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/ 
@media all and (min-width:480px) and (max-width:767px) {
	body{font-size:14px}
	#boxWrap{padding:0 20px 20px}
	header:hover {overflow: unset; width: 220px;}
	/*#gnb > li {margin: 10px 0px; position: relative; width: 200px; height: 40px;}*/
	
	.dep2 {
		position: relative;
    /*left: 210px;
    top: -50px;*/
    padding: 5px;
    background-color: #1B2750;
    }
    
     .dep2 > li > a {
    	padding: 0px 0px 0px 10px;
    }
	
	h1 {left: 15px;}
	h1 img {width: 30px;}
	h1 a {line-height: 60px;}
	h2 {font-size: 1.3rem;}
	
	.topBar {padding: 0px 20px 0px 10px; margin-bottom: 20px;}
	.topBar .searchBox {display: none;}
	.user {width: 60px;}
	.user span {display: none;}
	.option {width: 100px;}
	#BoxWrap {top: 80px; padding: 0px 20px 20px;}
	.box * {font-size: .9rem;}
	.half-boxS > div{width:100%;}
	
	.weather_box .weather-info{flex-wrap:wrap}
	.weather_box .weather-info .tlt{width:100%; padding-right:0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-bottom:10px; flex-wrap:wrap}
	.weather_box .weather-info .tlt p{margin-top:5px; margin-left:0px;}
	.weather_box .weather-info .info dl dt{display:none}
	.weather_box h2{width:100%}
}

/* 모바일  세로 (해상도 ~ 479px)*/
@media all and (max-width:479px) {
	body{font-size:14px}
	#boxWrap{padding:0 20px 20px}
	header:hover {overflow: unset; width: 200px;}
	/*#gnb > li {margin: 10px 0px; position: relative; width: 180px; height: 40px;}
	#gnb > li > a > p {margin-left: 10px;}*/
	#gnb a {font-size: .9rem;}
	.dep2 {padding: 10px;}
	h1 {left: 15px;}
	h1 img {width: 30px;}
	h1 a {line-height: 60px;}
	
	.topBar {padding: 0px 20px 0px 10px; margin-bottom: 20px;}
	h2 {font-size: 1.2rem;}
	.topBar .searchBox {display: none;}
	.user {width: 60px;}
	.user span {display: none;}
	.option {width: 100px;}
	#BoxWrap {top: 80px; padding: 0px 20px 20px;}
	.box * {font-size: .85rem;}
	.half-boxS > div{width:100%;}
	
	.weather_box .weather-info{flex-wrap:wrap}
	.weather_box .weather-info .tlt{width:100%; padding-right:0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-bottom:10px; flex-wrap:wrap}
	.weather_box .weather-info .tlt p{margin-top:5px; margin-left:0px;}
	.weather_box .weather-info .info dl dt{display:none}
	.weather_box h2{width:100%}
	
	.datepicker { width: 90%; }
}

.progress{background-color: #EFEFEF; border-radius: 20px; position: relative; margin: 15px 0; height: 25px; width: 100%;}
.progress.progressThin{height:5px; background:#ffffff}
.progress.progressThin .progress-done:after{width:13px; height:13px; content:""; display:block; background:#007BF5; position:absolute; right:0; top:-4px; border-radius:50%}
.progress-done {background:#007BF5; border-radius: 20px; color: #fff; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; display: -webkit-box; display: -ms-flexbox; align-items: center; justify-content: flex-end; height: 100%; width: 0; opacity: 0; transition: 1s ease 0.3s; padding:0 10px; position:relative}

.bluePoint{background:#007BF5; padding:2px 7px; border-radius:2px; color:#ffffff; font-weight:normal; font-size:.875rem}
.orgPoint{background:#ffb36d; padding:2px 7px; border-radius:2px; color:#222; font-weight:normal; font-size:.875rem}
.grnPoint{background:#b3dd86; padding:2px 7px; border-radius:2px; color:#222; font-weight:normal; font-size:.875rem}
.redPoint{background:#ed0000; padding:2px 7px; border-radius:2px; color:#ffffff; font-weight:normal; font-size:.875rem}

.moreView_Btn{border-radius:5px 0 5px 5px; position:absolute; right:0; top:0; width:40px; height:40px; display:block; cursor:pointer; background: url('../../../../images/upa/com/boxDetail.png') no-repeat center #efefef; background-size:15px 15px}

.floatingBox {position: absolute; width: 70px; text-align: center; border-radius: 5px;}

/* .searchResult:after {content: ""; display: inline-block; width: 100%; height: 100%; border-radius: 50%; transform: translateY(-5px); animation: scaleAnimation 3s infinite;}
@keyframes scaleAnimation {
	0% {box-shadow: 0 0 0 0px rgba(53, 53, 53, 0.7);}
	50% {box-shadow: 0 0 0 10px rgba(53, 53, 53, 0.2);}
	100%{box-shadow: 0 0 0 0px rgba(53, 53, 53, 0);}
} */

/* 모달 */
.modal{display:none;  }
.modal.on{display:block}
.modal-container{position:fixed; z-index:999; left:0; top:0; right:0; bottom:0; width:100%; height:100%; overflow:auto; background-color:rgba(0,0,0,.4); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; justify-content:center; align-items:center}
.modal-container.fullModal{left:60px; top:60px; width:calc(100% - 60px); height:calc(100% - 60px); padding:0}
.modal-content{position:relative; max-width:90%; width:60%; max-height:calc(100vh - 100px); height:auto; padding:20px; background-color:#ffffff; margin:auto; overflow-y:auto; box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); -webkit-animation-name:animatetop; -webkit-animation-duration:0.4s; animation-name:animatetop; animation-duration:0.4s; border-radius:6px}
.modal-container.fullModal .modal-content{position:relative;  max-width:100%; width:100%; height:100%; max-height:100vh; border-top:1px solid #dddddd; padding:40px 20px; background-color:#ffffff; margin:auto; box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); -webkit-animation-name:animatetop; -webkit-animation-duration:0.4s; animation-name:animatetop; animation-duration:0.4s; overflow-y:auto; border-radius:0}
@-webkit-keyframes animatetop{
     from{opacity:0; scale:.95}
     to{opacity:1; scale:1}
}
@keyframes animatetop{
    from{opacity:0; scale:.95}
     to{opacity:1; scale:1}
}
.close-modal{color: #ffffff; font-size: 28px; font-weight: bold; width: 30px; height: 30px; text-align: center; line-height: 30px; border-radius: 5px; overflow: hidden; background: url(../../../../images/upa/com/cmm/btn_close.png) no-repeat center #cccccc; background-size: 20px 20px; position: absolute; right: 20px; top: 17px} 
.close-modal:hover,.close-modal:focus{text-decoration:none; cursor:pointer; }
/* //모달 */

/* 사이트맵 */
.siteMap-container h2{font-size:1.5rem; font-weight:600; color:#222222}
.siteMap-container ul{padding:20px}
.siteMap-container ul li{padding:10px 0; color:#222222}
.siteMap-container ul li .tlt{border-bottom:2px solid #222222; font-size:1.25rem; font-weight:600; padding:10px 0; margin-bottom:5px}
.siteMap-container ul li a{color:#007BF5; font-size:1.125rem; font-weight:500; padding:5px 0; display:block}
.siteMap-container ul li .depth2_tlt{color:#007BF5; font-size:1.125rem; font-weight:500; padding:10px 0; display:block}
.siteMap-container ul li > ul{display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; padding:0}
.siteMap-container ul li > ul > li{padding:0 50px 0 0}
.siteMap-container ul li > ul > li > a{color:#222; padding:5px 0}
.siteMap-container ul li > ul > li > a.disable {color: #aaa;}

.bg-light-blue { background-color: #dae3f3 } 
.bg-light-green { background-color:#e2f0d9 } 
.bg-light-org { background-color:#fff2cc } 
.bg-light-red { background-color:#fbe5d6 }
.bg-light-sky { background-color: #80BDFA } 
.bg-sky { background-color: #3B9EFF } 
.bg-blue { background-color: #006edb } 
.bg-green { background-color:#92D050 } 
.bg-org { background-color:#F57600 } 
.bg-red { background-color:#ed0000 } 
.bg-box-blue { background-color:#E6F2FE }
.bg-wh { background-color: #FFF }

/* 즐겨찾기 버튼 */
.markBtn {
	position: relative
}

.markBtn i {
	display: block;
	margin: 5px;
	position: relative;
	display: block;
	color: #D9D9D9;
	width: 0px;
	height: 0px;
	border-right: 10px solid transparent;
	border-bottom: 8px solid #D9D9D9;
	border-left: 10px solid transparent;
	transform: rotate(35deg);
	border-radius: 2px
}

.markBtn i:before {
	border-bottom: 8px solid #D9D9D9;
	border-left: 3.5px solid transparent;
	border-right: 3.5px solid transparent;
	position: absolute;
	height: 0;
	width: 0;
	top: -5px;
	left: -7.5px;
	display: block;
	content: '';
	transform: rotate(-35deg);
	border-radius: 2px
}

.markBtn i:after {
	position: absolute;
	display: block;
	color: #D9D9D9;
	top: 0px;
	left: -11px;
	width: 0px;
	height: 0px;
	border-right: 10px solid transparent;
	border-bottom: 8px solid #D9D9D9;
	border-left: 10px solid transparent;
	transform: rotate(-70deg);
	content: '';
	border-radius: 2px
}

.markBtn.active i, .markBtn.active i:before, .markBtn.active i:after,
.markBtn:hover i, .markBtn:hover i:before, .markBtn:hover i:after{
	border-bottom-color: #FFC000;
}

/*searchBox*/
.search-container{height:30px; border:1px solid #eaeaea; background:#f7f9fc; border-radius:6px; box-shadow:1px 1px 5px rgba(0,0,0,0.06);}
.search-container input[type="text"]{border:none; width:100%; background:transparent; font-weight:normal; font-size:.875rem; line-height:30px; padding:2px 10px; height:30px; border-sizing:border-box}
.search-container button.search-btn{background: url('../../../../images/upa/com/cmm/search.png') center no-repeat; width:25px; height:25px; border-radius:6px; background-size:15px 15px}





/*datepicker*/
.datepicker{ background:url('../../../../images/upa/com/Period_light.png') 97% 50% no-repeat; background-size:16px 16px; }
.ui-datepicker-calendar>thead>tr>th {font-size:14px; background:#f7f9fc; color:#333333; line-height:30px}
.ui-datepicker .ui-datepicker-header {position:relative;padding:10px 0;border:0px solid #dddddd;background:#fff; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {border:0px solid #c5c5c5;background-color:transparent;font-weight:normal;color:#454545;text-align:center; padding:5px 0 }
.ui-datepicker .ui-datepicker-title {margin:0 0em;line-height:16px;text-align:center;font-size:14px;padding:0px;font-weight:bold; }
.ui-datepicker {display:none;background-color:#fff;border-radius:4px;margin-top:0px;margin-left:0px;margin-right:0px;padding:20px;padding-bottom:10px;width:300px;box-shadow:10px 10px 40px rgba(0,0,0,0.1); }
#datepicker:focus>.ui-datepicker {display:block; }
.ui-datepicker-prev, .ui-datepicker-next {cursor:pointer; }
.ui-datepicker-next {float:right; }
.ui-state-disabled {cursor:auto;color:hsla(0, 0%, 80%, 1)}
.ui-datepicker-title {text-align:center;padding:10px;font-weight:100;font-size:20px; }
.ui-datepicker-calendar {width:100%; }
.ui-datepicker-calendar>thead>tr>th {padding:5px;font-size:14px;font-weight:400; }
.ui-datepicker-calendar>tbody>tr>td>a {color:#000;font-size:12px !important;font-weight:bold !important;text-decoration:none; }
.ui-datepicker-calendar>tbody>tr>.ui-state-disabled:hover {cursor:auto;background-color:#fff}	
.ui-datepicker-calendar>tbody>tr>td {border-radius:100%;width:44px;height:30px;cursor:pointer;padding:5px;font-weight:100;text-align:center;font-size:12px; }	
.ui-datepicker-calendar>tbody>tr>td:hover {background-color:transparent;opacity:0.6; }
.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus,.ui-button:hover,.ui-button:focus {border:0px solid #cccccc;background-color:transparent;font-weight:normal;color:#2b2b2b; }
.ui-widget-header .ui-icon {background-image:url('../../../../images/upa/com/cmm/selectDownArrowGray.png')}
.ui-icon-circle-triangle-e {background-position:center;background-size:15px; transform:rotate(-90deg) }
.ui-icon-circle-triangle-w {background-position:center;background-size:15px; transform:rotate(90deg) }	
.ui-datepicker-calendar>tbody>tr>td:first-child a{color:red !important; }	
.ui-datepicker-calendar>tbody>tr>td:last-child a{color:#0099ff !important; }	
.ui-datepicker-calendar>thead>tr>th:first-child {color:red !important; }	
.ui-datepicker-calendar>thead>tr>th:last-child {color:#0099ff !important; }
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {border:0px;background:#f1f1f1;border-radius:5px;padding:5px 0; display:inline-block;width:100%; }
table.ui-datepicker-calendar tr:last-child td{border-bottom:none}


/* -------------------------------------------------------------------------------------- */
/* .tui-grid-cell-header { background-color: #006edb !important; }
.tui-grid-row-odd > td { background-color: #FFF !important; }
.tui-grid-row-even > td { background-color: #EEE !important; }
.tui-grid-cell { border-color: #AAA !important; } */

/* .tui-grid-cell-header { background-color: #2C3C73 !important; }
.tui-grid-cell { border-color: #AAA !important; } */

.tui-grid-cell-header { background-color: #E3EbF5 !important; border-color:#cedae9 !important; color: #222 !important; /*border-left-width: 0px !important;*/ border-right-width: 0px !important; }
.tui-grid-header-area { border-color: #FFF !important }
/*.tui-grid-cell { border-color: #AAA !important; } */
.tui-grid-row-odd > td { background-color: #FFF !important; }
.tui-grid-row-even > td { background-color: #F6F8FB !important; }
.tui-grid-cell { border-top-width: 0px !important; /* border-bottom-width: 0px !important; */ }

.tui-grid-lside-area .tui-grid-cell-header{border-right-width: 1px !important;}
.tui-grid-lside-area .tui-grid-cell{ border-top-width: 1px !important}








/* table th { background-color: #f6faff; color: #222; border-bottom:1px solid #d6ecfe; }
table tr:last-child td, table tr:last-child th { border-bottom: 1px solid #E0E8F1 border-bottom: 1px solid #efefef }
table tr:last-child { border-bottom: 1px solid #E0E8F1border-bottom: 1px solid #efefef  }
table th{border-left:0} */


/* .table_type2 table{width:100%; text-align:center; border-top:1px solid #dddddd; border-bottom:1px solid #dddddd;}
.table_type2 table tr:last-child td{border-bottom:none}
.table_type2 table th{background:#005EBC; width:160px; border-bottom:1px solid #dddddd;} */

.table_type2 table th { background: #006edb; border-bottom:1px solid #fefefe; color: #FFF }
.table_type2 table tr:last-child th { border-color: #ddd }

.txt_tlt_b, .txt_tlt {padding-left: 10px; position: relative}
.txt_tlt_b:before, .txt_tlt:before { content: ''; width: 3px; height: 15px; background-color: #006edb; position: absolute; left: 0px; top: 5px }
.txt_tlt:before { top: 3px }



#lnb {width:100%; position: relative; margin-bottom:10px; /* margin-top: 100px;  */} 
#lnb>ul{display:flex; flex-wrap:wrap}
#lnb>ul>li.nav-item{height:40px; line-height:40px; border-right: 1px solid #EFF2EE; background: #ffffff;}
#lnb>ul>li.nav-item:last-child{border-right:0}
#lnb>ul>li.nav-item>a{padding:0 80px; min-width:240px; text-align:center; font-size:1rem}

.navbar-nav .nav-link {display: block; text-decoration: none; font-size: .875rem; font-weight: 400;  transition: .25 ease; } 
.navbar-nav .nav-item { margin: 0; position: relative; } 
.navbar-nav>.nav-item:after { content: ""; position: absolute; width: 100%; height: 2px; background: #ffffff; bottom: 0px; transition: 400ms ease; transform: scaleX(.5); opacity: 0; } 
#lnb>ul>li.nav-item:hover{background:#006EDB}
#lnb>ul>li.nav-item:hover>.nav-link{color:#ffffff}
#lnb>ul>li.nav-item.active{background:#006EDB}
#lnb>ul>li.nav-item.active>.nav-link{color:#ffffff}
#lnb>ul>li.nav-item:hover:after, #gnb>ul>li.nav-item:focus:after { transform: scaleX(1); opacity: 1; } 

/* Dropdown CSS */
.nav-item .dropdown { width: 100%; display: block; position: absolute; top: 40px; transition: .15s; padding: 10px; opacity: 0; visibility: hidden; transform: translateY(5px); border: 1px solid #e7e7e7; background: #fff; z-index: 999; box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.06); } 
.nav-item .dropdown .nav-link { color: #636363; } 
.nav-item .dropdown .dropdown { top: 0; left: calc(100% + 10px); border-top: 0} 
.nav-item .dropdown .dropdown:before { top: 10px; left: -10px; border: 5px solid transparent; border-right-color: #000; } 
.nav-item .dropdown:before { content: ""; position: absolute; top: -10px; left: 10px; border: 5px solid transparent; border-bottom-color: #000; display: none; } 
.nav-item .dropdown .nav-item:not(:last-child) { margin-bottom: 5px; } 
.nav-item .dropdown>.nav-item:hover>.nav-link { color: #006EDB } 
.nav-item:hover>.dropdown { opacity: 1; visibility: visible; transform: translateY(0px); } 
.nav-item:focus { background:#ffffff; color:#aaa } 

.tlt-dot{position:relative; padding-left:10px; font-size:1.125rem; font-weight:500; margin-right:40px }
.tlt-dot:before{content:""; width:5px; height:5px; position:absolute; left:0; top:9px; background:#000000; display:block; border-radius:50%}


.h400 { max-height: 400px; overflow-y: auto; }

.h400 > table thead { position: sticky; top: 0; }

.mh400 { min-height: 400px; }

.chartArea { min-height: 400px; }

.noData { width: 100%; height: 100%; line-height: 100%; padding: 10px 0px; background-color: #efefef; font-size: .825rem; display: flex; align-items: center; justify-content: center; }

.carrierFacilityUsage-table{max-height:407px; overflow-y:auto}
.carrierFacilityUsage-table table thead{position:sticky; top:0}

#slowOperatorShip-chart-pie, #slowOperatorShip-chart-bar { height: 100%; }
#arrivalShip_chart1, #arrivalShip_chart2, #arrivalShip_chart3, #volumn_chart1, #volumn_chart2, #volumn_chart3, #volumn_chart4, .hPx { height: calc(100% - 31px); }

.half-box{margin-top:10px;}
.equalParts, .equalParts2 { width: 100%; display: flex; justify-content: space-between; }


.equalParts > div { width: calc(33.33% - 6.66px) }
.equalParts2 > div:first-child { width: calc(25% - 6.66px) }
.equalParts2 > div:nth-child(2), .equalParts2 > div:last-child { width: calc(37.5% - 6.66px) }
.equalParts2 > div:nth-child(2) > .half-box > div:first-child , .equalParts2 > div:last-child > .half-box > div:first-child { border-right: 1px solid #EFEFEF }



.tui-datepicker-input { height: 37px !important; border: none !important  }
.tui-datepicker-input>input { padding: 0px 10px !important; border: 1px solid #d9d9d9 !important; }
.tui-datepicker-input>input:read-only { background-color: #ddd !important }
.datepicker-cell { position: relative; }
.tui-datepicker { /* right: -24px; */ top: 20px; z-index: 99; }
.tui-calendar-header-info { margin-left: 0 !important }

.tui-grid-layer-selection { background-color: #2C3C73 !important; opacity: .3 !important;  }

@media screen and (max-width: 767px) {
	.half-box{margin-top:5px;}
	.equalParts2{flex-direction: column; gap:5px;}
	.equalParts2 > div.box.general_info {width:100%;}
	.equalParts2 > div.box.general_info .cts{display:flex; gap:10px 20px; flex-wrap:wrap;}
}



/* 설문 추가 스타일 */
.qustnrQestnList { border-bottom: 1px solid #eaeaea; }
.qustnrQestnList .tip { font-size: 13px; color: #cc0101; }
.qustnrQestnList input { margin-left: 27px; }


/* 설문 결과 스타일 */
.srvDetailResult .srvDetailCont label { color: #0c419a; }
.srvDetailResult .srvDetailCont .surveyCont label { color: #555; }

.surveyTit { display: block; font-size: 21px; font-weight: bold; text-align: center; padding: 20px 0; margin-top: 20px; border-bottom: 1px solid #1b2750; border-top: 1px solid #1b2750; }

.surveyCont { border-bottom: 1px solid #aaa; padding: 20px; box-sizing: border-box; }
.surveyCont h5 { border: 1px solid blue; border: 1px solid red; }


/* paging */
.pagination {clear:both;overflow:hidden;margin:0 auto;padding:20px 0;font-size:0;text-align:center;}
.pagination>button {display:inline-block;overflow:hidden;width:35px;height:35px;color:#999;font-size:14px;line-height:35px;vertical-align:top;}
.pagination>button>span {display:block;width:35px;height:35px;box-sizing:border-box;border:1px solid #ddd;background-repeat:no-repeat;background-position:50% 50%;text-indent:-999px;}
.pagination>button.btn_prev {margin-right:10px;margin-left:-1px;}
.pagination>button.btn_next {margin-left:10px;margin-right:-1px;}

.pagination>button.btn_first>span {background: url('../../../../images/upa/com/cmm/pagingFirst_icon.png') no-repeat center;}
.pagination>button.btn_prev>span {background: url('../../../../images/upa/com/cmm/pagingPrev_icon.png') no-repeat center;}
.pagination>button.btn_next>span {background: url('../../../../images/upa/com/cmm/pagingNext_icon.png') no-repeat center;}
.pagination>button.btn_end>span {background: url('../../../../images/upa/com/cmm/pagingEnd_icon.png') no-repeat center;}

.pagination .paging {display:inline-block;height:35px;font-size:0;text-align:center; }
.pagination .paging>li {display:inline-block;color:#999; margin-right: -1px;}
.pagination .paging>li>button {position: relative; display:inline-block;overflow:hidden;width:35px;height:35px;border:1px solid #ddd;box-sizing:border-box;line-height:35px;}
.pagination .paging>li>button:hover,
.pagination .paging>li>button.on {border:1px solid #006edb;color:#006edb; z-index: 10;}
.pagination .paging>li>a {display:inline-block;overflow:hidden;width:35px;height:35px;border:1px solid #ddd;box-sizing:border-box;line-height:35px;}
.pagination .paging>li>a:hover,
.pagination .paging>li>a.on {border:1px solid #4c4496; color:#555; z-index: 10;}


/* 화물통관 진행정보(관세청) */
.retrieveCargCsclPrgsInfoContList>div { 
	border-top: 2px solid #aaa;
    margin: 20px 0 10px;
    padding: 10px 10px;
    box-sizing: border-box;
    background: #f3f9ff;
}
.retrieveCargCsclPrgsInfoContList>div>div {
	padding: 5px 0;
}

.inputDownBox input { border: 1px solid #ddd; }
.popContDownLink { position: relative; border-top: 2px solid #aaa; border: 1px solid #ddd; padding: 10px 0 10px 10px; }
.popContDownLink a { position: absolute; right: 10px; top: 50%; transform: translate( 0%, -50%); padding: 3px 10px; float:right; vertical-align: middle; }


.pdfDownBtn { position: absolute; right: 13px; top: 13px; }


/* 톻계 리포팅 */
.ofHidden { overflow: hidden !important; }
.page-break-before {page-break-before: always; }

#pdfArea {
	width: 794px;
    display: block;
}



.retrieveCargCsclPrgsInfoTable { border-top: 1px solid #ddd; }
.retrieveCargCsclPrgsInfoTable tr th { font-weight: bold; }
.retrieveCargCsclPrgsInfoTable tr td { text-align: left; }


.retrieveCargCsclPrgsInfoTable02 { border-top: 1px solid #ddd; }
.retrieveCargCsclPrgsInfoTable02 tr th { background: #f0f0f0; font-weight: bold; }
.retrieveCargCsclPrgsInfoTable02 tr td { text-align: left; }










legend, caption {
    display: none;
}

































/* GNB */
.topBar>.logo {
	height: 59px; transition: all .2s;
	transition-timing-function: linear; transition-delay: .1s;
	display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;
	align-items:center;
}

.topBar>.logo>a {
	display: inline-block;
	padding:0 10px
}

.topBar>.logo>a>img {
	width: 120px;
	display: inline-block;
	vertical-align: middle;
}
/* .topBar .logo a:last-child img {
	width: auto;
} */









/* 팝업 */
#pop_dim { 
	position: fixed; top: 0; left: 0; 
	width: 100%; height: 100%; background: #000; 
	visibility: hidden; opacity: 0.5; z-index: 3700; transition: 0.3s;
}
#pop_dim.on {visibility:visible;opacity:0.67;z-index: 3700;}


#nav_dim { 
	position: fixed; top: 0; left: 0; 
	width: 100%; height: 100%; background: #000; 
	visibility: hidden; opacity: 0.5; z-index: 3700; transition: 0.3s;
}
#nav_dim.on {visibility:visible;opacity:0.67;z-index: 3700;}












/*** Component ***/
.bgFFF { background: #fff !important; }
.bR0 { border-radius: 0 !important; }
.border-6ecfe { border: 1px solid #d6ecfe !important; }
.border-top-006edb { border-top: 2px solid #006edb !important; }

.txtL {text-align:left !important;}
.txtC {text-align:center !important;}
.txtR {text-align:right !important;}

.cBlue {color: #0188cc !important;}
.cRed {color: #cc0101 !important;}
.cGreen {color: #01cc31 !important;}
.cYellow {color: #cca801 !important;}
.cGray {color: #555 !important;}

.fL {float:left !important;}
.fR {float:right !important;}
.cB {clear:both !important;}
.cB::after{content:"";display: block;clear: both;}

.fwB { font-weight: bold;}
.dbN { display: none !important; }
.bTnone { border-top: none !important; }
.bBnone { border-bottom: none !important; }
.bRnone { border-right: none !important; }
.bLnone { border-left: none !important; }
.bT2px { border-top: 2px solid #514ecd !important; }
.dpIb { display: inline-block !important; }
.dpb { display: block !important; }
.vtAM { vertical-align: middle !important; }
.shadowVisual { box-shadow: 2px 2px 14px rgb(91, 176, 255, 0.14) !important; }

.wA { width: auto !important; }
.fs0 {font-size: 0px !important;}
.fs13 {font-size: 13px !important;}

.mT0 {margin-top:0px !important;} .mT1 {margin-top:1px !important;} .mT2 {margin-top:2px !important;} .mT3 {margin-top:3px !important;} .mT4 {margin-top:4px !important;} .mT5 {margin-top:5px !important;} .mT6 {margin-top:6px !important;} .mT7 {margin-top:7px !important;} .mT8 {margin-top:8px !important;} .mT9 {margin-top:9px !important;} .mT10 {margin-top:10px !important;} .mT-10 {margin-top:-10px !important;} .mT11 {margin-top:11px !important;} .mT12 {margin-top:12px !important;} .mT13 {margin-top:13px !important;} .mT14 {margin-top:14px !important;} .mT15 {margin-top:15px !important;} .mT16 {margin-top:16px !important;} .mT17 {margin-top:17px !important;} .mT18 {margin-top:18px !important;} .mT19 {margin-top:19px !important;} .mT20 {margin-top:20px !important;} .mT21 {margin-top:21px !important;} .mT22 {margin-top:22px !important;} .mT23 {margin-top:23px !important;} .mT24 {margin-top:24px !important;} .mT25 {margin-top:25px !important;} .mT26 {margin-top:26px !important;} .mT27 {margin-top:27px !important;} .mT28 {margin-top:28px !important;} .mT29 {margin-top:29px !important;} .mT30 {margin-top:30px !important;} .mT35 {margin-top:35px !important;} .mT40 {margin-top:40px !important;} .mT45 {margin-top:45px !important;} .mT50 {margin-top:50px !important;} .mT70 {margin-top:70px !important;} .mT90 {margin-top:90px !important;} .mT100 {margin-top:100px !important;} 
.mR0 {margin-right:0px !important;} .mR1 {margin-right:1px !important;} .mR2 {margin-right:2px !important;} .mR3 {margin-right:3px !important;} .mR4 {margin-right:4px !important;} .mR5 {margin-right:5px !important;} .mR6 {margin-right:6px !important;} .mR7 {margin-right:7px !important;} .mR8 {margin-right:8px !important;} .mR9 {margin-right:9px !important;} .mR10 {margin-right:10px !important;} .mR11 {margin-right:11px !important;} .mR12 {margin-right:12px !important;} .mR13 {margin-right:13px !important;} .mR14 {margin-right:14px !important;} .mR15 {margin-right:15px !important;} .mR16 {margin-right:16px !important;} .mR17 {margin-right:17px !important;} .mR18 {margin-right:18px !important;} .mR19 {margin-right:19px !important;} .mR20 {margin-right:20px !important;} .mR21 {margin-right:21px !important;} .mR22 {margin-right:22px !important;} .mR23 {margin-right:23px !important;} .mR24 {margin-right:24px !important;} .mR25 {margin-right:25px !important;} .mR26 {margin-right:26px !important;} .mR27 {margin-right:27px !important;} .mR28 {margin-right:28px !important;} .mR29 {margin-right:29px !important;} .mR30 {margin-right:30px !important;} .mR35 {margin-right:35px !important;} .mR40 {margin-right:40px !important;} .mR45 {margin-right:45px !important;} .mR50 {margin-right:50px !important;} 
.mB0 {margin-bottom:0px !important;} .mB1 {margin-bottom:1px !important;} .mB2 {margin-bottom:2px !important;} .mB3 {margin-bottom:3px !important;} .mB4 {margin-bottom:4px !important;} .mB5 {margin-bottom:5px !important;} .mB6 {margin-bottom:6px !important;} .mB7 {margin-bottom:7px !important;} .mB8 {margin-bottom:8px !important;} .mB9 {margin-bottom:9px !important;} .mB10 {margin-bottom:10px !important;} .mB11 {margin-bottom:11px !important;} .mB12 {margin-bottom:12px !important;} .mB13 {margin-bottom:13px !important;} .mB14 {margin-bottom:14px !important;} .mB15 {margin-bottom:15px !important;} .mB16 {margin-bottom:16px !important;} .mB17 {margin-bottom:17px !important;} .mB18 {margin-bottom:18px !important;} .mB19 {margin-bottom:19px !important;} .mB20 {margin-bottom:20px !important;} .mB21 {margin-bottom:21px !important;} .mB22 {margin-bottom:22px !important;} .mB23 {margin-bottom:23px !important;} .mB24 {margin-bottom:24px !important;} .mB25 {margin-bottom:25px !important;} .mB26 {margin-bottom:26px !important;} .mB27 {margin-bottom:27px !important;} .mB28 {margin-bottom:28px !important;} .mB29 {margin-bottom:29px !important;} .mB30 {margin-bottom:30px !important;} .mB35 {margin-bottom:35px !important;} .mB40 {margin-bottom:40px !important;} .mB45 {margin-bottom:45px !important;} .mB50 {margin-bottom:50px !important;} .mB70 {margin-bottom:70px !important;} .mB100 {margin-bottom:100px !important;} 
.mL0 {margin-left:0px !important;} .mL1 {margin-left:1px !important;} .mL2 {margin-left:2px !important;} .mL3 {margin-left:3px !important;} .mL4 {margin-left:4px !important;} .mL5 {margin-left:5px !important;} .mL6 {margin-left:6px !important;} .mL7 {margin-left:7px !important;} .mL8 {margin-left:8px !important;} .mL9 {margin-left:9px !important;} .mL10 {margin-left:10px !important;} .mL11 {margin-left:11px !important;} .mL12 {margin-left:12px !important;} .mL13 {margin-left:13px !important;} .mL14 {margin-left:14px !important;} .mL15 {margin-left:15px !important;} .mL16 {margin-left:16px !important;} .mL17 {margin-left:17px !important;} .mL18 {margin-left:18px !important;} .mL19 {margin-left:19px !important;} .mL20 {margin-left:20px !important;} .mL21 {margin-left:21px !important;} .mL22 {margin-left:22px !important;} .mL23 {margin-left:23px !important;} .mL24 {margin-left:24px !important;} .mL25 {margin-left:25px !important;} .mL26 {margin-left:26px !important;} .mL27 {margin-left:27px !important;} .mL28 {margin-left:28px !important;} .mL29 {margin-left:29px !important;} .mL30 {margin-left:30px !important;} .mL35 {margin-left:35px !important;} .mL40 {margin-left:40px !important;} .mL-40 {margin-left:-40px !important;} .mL45 {margin-left:45px !important;} .mL50 {margin-left:50px !important;} 

.pT0 {padding-top:0px !important;} .pT1 {padding-top:1px !important;} .pT2 {padding-top:2px !important;} .pT3 {padding-top:3px !important;} .pT4 {padding-top:4px !important;} .pT5 {padding-top:5px !important;} .pT6 {padding-top:6px !important;} .pT7 {padding-top:7px !important;} .pT8 {padding-top:8px !important;} .pT9 {padding-top:9px !important;} .pT10 {padding-top:10px !important;} .pT11 {padding-top:11px !important;} .pT12 {padding-top:12px !important;} .pT13 {padding-top:13px !important;} .pT14 {padding-top:14px !important;} .pT15 {padding-top:15px !important;} .pT16 {padding-top:16px !important;} .pT17 {padding-top:17px !important;} .pT18 {padding-top:18px !important;} .pT19 {padding-top:19px !important;} .pT20 {padding-top:20px !important;} .pT21 {padding-top:21px !important;} .pT22 {padding-top:22px !important;} .pT23 {padding-top:23px !important;} .pT24 {padding-top:24px !important;} .pT25 {padding-top:25px !important;} .pT26 {padding-top:26px !important;} .pT27 {padding-top:27px !important;} .pT28 {padding-top:28px !important;} .pT29 {padding-top:29px !important;} .pT30 {padding-top:30px !important;} .pT35 {padding-top:35px !important;} .pT40 {padding-top:40px !important;} .pT45 {padding-top:45px !important;} .pT50 {padding-top:50px !important;} 
.pR0 {padding-right:0px !important;} .pR1 {padding-right:1px !important;} .pR2 {padding-right:2px !important;} .pR3 {padding-right:3px !important;} .pR4 {padding-right:4px !important;} .pR5 {padding-right:5px !important;} .pR6 {padding-right:6px !important;} .pR7 {padding-right:7px !important;} .pR8 {padding-right:8px !important;} .pR9 {padding-right:9px !important;} .pR10 {padding-right:10px !important;} .pR11 {padding-right:11px !important;} .pR12 {padding-right:12px !important;} .pR13 {padding-right:13px !important;} .pR14 {padding-right:14px !important;} .pR15 {padding-right:15px !important;} .pR16 {padding-right:16px !important;} .pR17 {padding-right:17px !important;} .pR18 {padding-right:18px !important;} .pR19 {padding-right:19px !important;} .pR20 {padding-right:20px !important;} .pR21 {padding-right:21px !important;} .pR22 {padding-right:22px !important;} .pR23 {padding-right:23px !important;} .pR24 {padding-right:24px !important;} .pR25 {padding-right:25px !important;} .pR26 {padding-right:26px !important;} .pR27 {padding-right:27px !important;} .pR28 {padding-right:28px !important;} .pR29 {padding-right:29px !important;} .pR30 {padding-right:30px !important;} .pR35 {padding-right:35px !important;} .pR40 {padding-right:40px !important;} .pR45 {padding-right:45px !important;} .pR50 {padding-right:50px !important;}
.pB0 {padding-bottom:0px !important;} .pB1 {padding-bottom:1px !important;} .pB2 {padding-bottom:2px !important;} .pB3 {padding-bottom:3px !important;} .pB4 {padding-bottom:4px !important;} .pB5 {padding-bottom:5px !important;} .pB6 {padding-bottom:6px !important;} .pB7 {padding-bottom:7px !important;} .pB8 {padding-bottom:8px !important;} .pB9 {padding-bottom:9px !important;} .pB10 {padding-bottom:10px !important;} .pB11 {padding-bottom:11px !important;} .pB12 {padding-bottom:12px !important;} .pB13 {padding-bottom:13px !important;} .pB14 {padding-bottom:14px !important;} .pB15 {padding-bottom:15px !important;} .pB16 {padding-bottom:16px !important;} .pB17 {padding-bottom:17px !important;} .pB18 {padding-bottom:18px !important;} .pB19 {padding-bottom:19px !important;} .pB20 {padding-bottom:20px !important;} .pB21 {padding-bottom:21px !important;} .pB22 {padding-bottom:22px !important;} .pB23 {padding-bottom:23px !important;} .pB24 {padding-bottom:24px !important;} .pB25 {padding-bottom:25px !important;} .pB26 {padding-bottom:26px !important;} .pB27 {padding-bottom:27px !important;} .pB28 {padding-bottom:28px !important;} .pB29 {padding-bottom:29px !important;} .pB30 {padding-bottom:30px !important;} .pB35 {padding-bottom:35px !important;} .pB40 {padding-bottom:40px !important;} .pB45 {padding-bottom:45px !important;} .pB50 {padding-bottom:50px !important;}
.pL0 {padding-left:0px !important;} .pL1 {padding-left:1px !important;} .pL2 {padding-left:2px !important;} .pL3 {padding-left:3px !important;} .pL4 {padding-left:4px !important;} .pL5 {padding-left:5px !important;} .pL6 {padding-left:6px !important;} .pL7 {padding-left:7px !important;} .pL8 {padding-left:8px !important;} .pL9 {padding-left:9px !important;} .pL10 {padding-left:10px !important;} .pL11 {padding-left:11px !important;} .pL12 {padding-left:12px !important;} .pL13 {padding-left:13px !important;} .pL14 {padding-left:14px !important;} .pL15 {padding-left:15px !important;} .pL16 {padding-left:16px !important;} .pL17 {padding-left:17px !important;} .pL18 {padding-left:18px !important;} .pL19 {padding-left:19px !important;} .pL20 {padding-left:20px !important;} .pL21 {padding-left:21px !important;} .pL22 {padding-left:22px !important;} .pL23 {padding-left:23px !important;} .pL24 {padding-left:24px !important;} .pL25 {padding-left:25px !important;} .pL26 {padding-left:26px !important;} .pL27 {padding-left:27px !important;} .pL28 {padding-left:28px !important;} .pL29 {padding-left:29px !important;} .pL30 {padding-left:30px !important;} .pL35 {padding-left:35px !important;} .pL40 {padding-left:40px !important;} .pL45 {padding-left:45px !important;} .pL50 {padding-left:50px !important;} .pL60 {padding-left:60px !important;}

.p20 { padding: 20px !important; }
.p10 { padding: 10px !important; }




.mo {display: none; }



/*컬러공통*/
.c-wh{color:#ffffff !important;}
.c-green{color:#92D050 !important;}
.c-org{color:#FFC000 !important;}
.c-red{color:#ed0000 !important;}
.c-blue{color:#006edb !important;}
.c-grey {color: #757575 !important;}
.c-defalut {color: #222 !important;}
.c-ulsan { color: #FF5F5F !important; }
.c-other { color: #43B61A !important; }



.bgyellow { background: #feffa1 url('../../../images/abs/icon/select_arrow.png') no-repeat center right 7px; }
.bgyellowInput { background: #feffa1; }
.bgddd { background: #eee; }
.bgd8edfc { background: #d8edfc; }
.bgfff6de { background: #fff6de; }

.bottomDouble { border-bottom: 3px double #ccc !important; }



.x-mark {display: inline-block}
.x-mark:after {display: inline-block; content: "\00d7"; font-size: 2rem; color: #aaa}

.circle { width: 10px; height: 10px; border-radius: 50%; display: inline-block }

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

/* GNB */
.topBar>.logo {height: 59px; transition: all .2s; transition-timing-function: linear; transition-delay: .1s; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; align-items:center;}
/* 상단 셀렉트박스 */
.topBar>.logo>a {display: inline-block; padding:0 10px}
.topBar>.logo>a>img {width: 120px; display: inline-block; vertical-align: middle;}
.topBar>.logo>.logoWrap {position: relative; width: auto; min-width: 210px; transition: 0.3s; margin-left: 5px; color: #fff; font-size: 14px; font-weight: bold; }
.topBar>.logo>.logoWrap.active {width:210px; }
.topBar>.logo>.logoWrap img {display: inline-block; vertical-align: middle; width: 22px; margin: 0 0 0 0; }
.topBar>.logo>.logoWrap span {display: inline-block; vertical-align: middle; color: #fff; font-size: 14px; font-weight: bold; }
.topBar>.logo>.logoWrap .logoList li a img { margin: 0 8px 0 0; }
.topBar>.logo>.logoWrap .logoTit {min-width: 170px; padding: 10px 17px 10px 20px; cursor: pointer; background: #1b2750; border-radius: 50px; transition:all .3s;}
.topBar>.logo>.logoWrap .logoTit .icon {position: absolute; right: 15px; top: 53%; transform: translate( 0%, -53%) rotate(0deg); width: 12px; transition: 0.3s;}
.topBar>.logo>.logoWrap.active .logoTit .icon {transform: translate( 0%, -53%) rotate(180deg);}
.topBar>.logo>.logoWrap .logoList {position: absolute; left: 50%; top: 34px; opacity:0; transform: translate( -50%, 0%); transition:all .3s; width: 100%; height: 0; overflow: hidden; background: #1b2750; border-radius: 17px; transition: 0.3s; padding: 0px; }
.topBar>.logo>.logoWrap.active .logoList {height:auto; top:44px; opacity:1;}
.topBar>.logo>.logoWrap .logoList li { border-bottom: 1px solid #34416d; }
.topBar>.logo>.logoWrap .logoList li:last-child { border-bottom: none; }
.topBar>.logo>.logoWrap .logoList a {display: flex; justify-content: flex-start; flex-wrap: nowrap; align-items: center; color: #fff; font-size: 13px; font-weight: bold; padding: 14px 22px 12px; background: url('../../../images/abs/icon/logoMoveIcon.svg') no-repeat center right 13px; transition:all .3s;}
.topBar>.logo>.logoWrap .logoList a:hover{background-color:#2d4183;}

@media all and (max-width:1240px){
	.topBar>.logo { height: 50px; }
	.topBar>.logo>.logoWrap{min-width:180px;}
	.topBar>.logo>.logoWrap span { font-size: 13px; }
	.topBar>.logo>.logoWrap .logoTit { padding: 5px 17px 6px 20px; }
	.topBar>.logo>.logoWrap .logoTit .icon { margin-left: 2px; }
	.topBar>.logo>.logoWrap.active .logoList{top:36px; width:210px;}
}
@media all and (max-width:767px){
	.topBar>.logo>.logoWrap img{width:18px;}
}

@media all and (max-width:420px){
	.topBar>.logo>.logoWrap .logoTit{min-width:130px; padding:6px 10px 6px 14px;}
	.topBar>.logo>.logoWrap.active{width:180px;}
	.topBar>.logo>.logoWrap .logoList a{padding:14px 15px 12px;}
	.topBar>.logo>.logoWrap img{width:15px;}
}

@media all and (max-width:370px){
	.topBar>.logo>.logoWrap{min-width:150px; margin:0;}
	.topBar>.logo>.logoWrap.active{width:150px;}
	.topBar>.logo>.logoWrap .logoTit{min-width:initial; padding:4px 4px 6px 10px;}
	.topBar>.logo>.logoWrap .logoTit .icon{margin-left:0; width:8px;}
	.topBar>.logo>.logoWrap.active .logoList{top:34px;}
	.topBar>.logo>.logoWrap .logoList a{background-size:13px; padding:13px 10px 11px 10px; background-size:96% center; background:none;}
	.topBar>.logo>.logoWrap .logoList li a img{margin-right:4px;}
}
@media all and (max-width:336px){
	.topBar>.logo>.logoWrap{min-width:132px;}
	.topBar>.logo>.logoWrap.active{width:132px;}
}
/* //상단 셀렉트박스 */

















#container {
	/* border: 1px solid red; */
	display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;
}

#container .zoomInContainer {
	display: block;
}

#contents {
	width: calc(100% - 0px);
	position: relative;
	margin-left:auto;
}

.hidden {
    overflow: hidden;
    width: 0;
    height: 0;
    left: -9999px;
}

.hidden-tag {
	display: none;
}


section {
    width: 100%;
    /* margin-top: 50px; */
    overflow: hidden;
}

section > div {
    width: 100%;
    display: block;
}

.main {
    width: 100%;
    height: 100%;
}

.main .top_con {
    width: 1200px;
    height: 100%;
    background: #fff;
    padding-bottom: 50px;
    margin: 0 auto;
}

section h2 {
    font-size: 1.6em;
    color: #000;
    font-weight: 500;
    position: relative;
    padding-left: 12px;
}


/*  타이틀 아이콘
section h2::before {
    content: "";
    display: block;
    height: 21px;
    width: 6px;
    position: absolute;
    top: 1px;
    left: 0;

    background: #015eea;
    Old browsers
    background: linear-gradient(to bottom, #015eea 0%, #00baf9 100%);
    W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+
    IE6-9

}
 */


/*--------------------------토글----------------------------*/
/* portwise map */

.switch {
	position: relative;
	display: inline-block;
	width: 55px;
	height: 26px;
	vertical-align:middle;
}
.switch input {display:none;}


.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 20px;
	width: 20px;
	left: 4px;
	bottom: 3px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked + .slider {
    background-color: #3396ff;
}

input:focus + .slider {
    box-shadow: 0 0 1px #007BF5;
}

input:checked + .slider:before {
    -webkit-transform: translateX(27px);
    -ms-transform: translateX(27px);
    transform: translateX(27px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* 검색 정리 */

.search-box {
    width: 100%; max-width: 1240px; margin: 10px auto 0;
    padding: 5px 87px 5px 13px;
    background: #fff;
    text-align: left;
    border: 1px solid #d6ecfe;
    position: relative;
    box-sizing:border-box;
    border-radius: 7px;
    
}
.search-box-wfix{width:1200px !important; margin:0 auto;}

.search-box.label-not {
	height: 35px;
	padding-top:13px;
}

.search-box.label-not input {
	height: 30px;
	margin-left: 0;
}
/* 
.search-box button {
	height: 40px;
	line-height: 40px;
}
 */
.search-box form {
	display: block; width:100%;
}

.search-box form > label{
	width: auto;
	margin:0 20px;
}

.search-box form > input{
	margin-right: 5px;
}

.search-box form table{
	width: 100%;
    border: 0;
    table-layout: fixed;
    box-sizing: border-box;
}

.search-box form table tbody{
	width:100%;
}

/* .searchResult:after {
	content: ""; display: inline-block; width: 110%; height: 110%; border-radius: 37%; transform: translateY(-5px) translateX(-1px); animation: scaleAnimation 0.7s infinite;
}
@keyframes scaleAnimation {
	0% {box-shadow: 0 0 0 7px rgba(0, 0, 0, 1);}
	50% {box-shadow: 0 0 0 27px rgba(0, 0, 0, 0.5);}
	100%{box-shadow: 0 0 0 7px rgba(0, 0, 0, 0);}
} */




/* 검색 타이틀 단 나누기 */
.search-box form ul { display: flex; justify-content: flex-start; align-items: flex-end; flex-wrap: wrap; margin-bottom: 0; }
.search-box form ul:last-child { margin-bottom: 0; }

.search-box form ul li { width: auto; display: inline-block; vertical-align: middle; margin: 5px 5px; }
.search-box form ul li:first-child { margin-left: 0; }

/* 
.search-box form ul.sh1cont li { width: calc(100% - 30px); margin: 0 5px; }
.search-box form ul.sh2cont li { width: calc(50% - 25px); margin: 0 5px; }
.search-box form ul.sh3select { align-items: flex-end; }
.search-box form ul.sh4cont li { width: calc(25% - 17px); margin: 0 5px; }
 */

.search-box form ul li .w2 { width: 200px; }
.search-box form ul li .w8 { width: calc(100% - 215px); margin-left: 10px; }




.search-box form ul li.txtAreaWrap { width: calc(100% - 200px); }
.search-box form ul li textarea { max-height: 40px; width: 100%; max-width: 100%; padding: 7px 10px; box-sizing: border-box; border: 1px solid #bbb; }




/* 검색 타이틀 */
.type_tit{ 
	display: block; width: 100%; margin-bottom: 5px;
    font-size: 15px; color: #333; font-weight: 600;
    position: relative; padding-left: 8px; box-sizing: border-box;
}
.type_tit::before{
	content: ""; position: absolute; left: -3px; top: calc(50% + 1px); transform: translate( 0%, -50%);
	width: 7px; height: 11px; background: url('../../../images/abs/icon/ico_searchTit.png') no-repeat center;
}


/* 검색 폼 */
.searchBtnWrap {
	position: absolute; right: 10px; top: 50%; transform: translate( 0%, -50%);
	height: calc(100% - 20px);
}
.searchBtnWrap .search { height: 100%; }

.search-box input {
    width: 137px; height: 40px; line-height: 40px;
    border: 1px solid #ddd; box-sizing: border-box;
    margin-top: 0px; padding: 0 12px 0 12px;
}
.search-box select{
    width: 127px; height: 40px; line-height: 40px;
    border: 1px solid #ddd; box-sizing: border-box;
    margin-top: 0px; padding: 0 27px 0 7px;
}

.search-box .wid03 { width: auto; max-width: 127px; }


/* 검색 달력 */
.datepicker {
	display: flex; justify-content: space-between; flex-wrap: wrap;
}
.datepicker input { width: 125px; 
	cursor : pointer; text-align: left;
	background: #f9f9f9 url('../../../images/upa/cal_icon.png') no-repeat center right 10px !important;
	background-size: 17px!important;
}

/* 금색 인풋 */
.datepicker.dateFull input { width: 100%; }
.datepicker span { line-height: 40px; height: 40px; margin: 0 3px; }

.shIpBtn input { width: calc(100% - 77px); }
.shIpBtn button { padding: 0 7px; background: #f6faff; color: #555; border: 1px solid #aaa; box-sizing: border-box; margin-left: 5px; border-radius: 0; }




.datetimepicker {
	display: inline-block;
	width: auto; min-width: calc(50% - 50px);
	text-align: left;
	cursor : pointer;
	background: #f9f9f9 url('../../../images/upa/cal_icon.png') no-repeat center right 10px !important;
	background-size: 17px!important;
}

.datetimepicker + img{
	padding-left: 0px !important;
	margin-right:0;
}

/* input[type='date']::-webkit-calendar-picker-indicator {
  opacity: 0;
} */

 
/* button */
.btnArea { position: relative; font-size:0; text-align:center !important; max-width: 1240px; margin: 10px auto 0; padding-right: 5px; }

.btnArea .warningTxt { 
	position: absolute; left: 0; top: 50%; transform: translate( 0%, -50%); 
	display: inline-block; max-width: calc(100% - 295px); 
	font-size: 14px; color: #bd0000; text-align: left; line-height: 18px; letter-spacing: -1px;
	background: #fffce6; padding: 3px 10px 3px 55px; border-radius: 7px;
}
.btnArea .warningTxt span { position: absolute; left: 10px; top: 50%; transform: translate( 0%, -50%); padding-right: 10px; border-right: 1px solid #ff0000; font-weight: bold; color: #ff0000; } 


.btnArea .warningTxt.serachWTxt { position: inherit; transform: translate( 0%, 0%); display: block; }









/* 콘텐츠 테이블 사이즈 */
.board-list .scr { overflow-x: auto; }
.board-list .scr.sTWrap { cursor: grab; user-select: auto; }
.board-list .scr.dragging { cursor: grabbing; }

.board-list .scr::-webkit-scrollbar { width: 5px; height: 5px; border-radius: 40px; }
.board-list .scr::-webkit-scrollbar-thumb { background: #7bb1e7; border-radius: 40px; }
.board-list .scr::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 1);
    border: 1px solid #7bb1e7;
    border-radius: 40px;
}
.board-list .scr .scrollTable { width: 100%; min-width: 1440px; }
.board-list .scr .scrollTable tbody tr { cursor: grab; }


/* 호버 선택 테이블 */
table.common.table-hover thead tr { background: #fff; }
table.common.table-hover thead tr th { cursor: default; }

.board-list .scr .table-hover tr { background: #fff; }
.board-list .scr .table-hover tr:hover { background: #f6fffc; transition: 0.3s; cursor: pointer; }

table.common.table-hover tbody tr td { background: none; }



/* 테이벌 색상 */
.tableColor thead tr th:nth-child(6),
.tableColor thead tr th:nth-child(7) {
    background-color: #4fb6c5b3;
}

.tableColor thead tr th:nth-child(15) {
    background-color: #ff010194;
}
.tableColor tbody tr td:nth-child(6),
.tableColor tbody tr td:nth-child(7) {
    color: #0100ff;
    background-color:#4fb6c529
}
.tableColor tbody tr td:nth-child(15) {
    color: #c30000;
    background-color:#ffeaea
}



/* paging */
.pagination {clear:both;overflow:hidden;height:35px;margin:0 auto;padding:15px 0 0;font-size:0;text-align:center;}
.pagination>button {display:inline-block;overflow:hidden;width:35px;height:35px;color:#999;font-size:14px;line-height:35px;vertical-align:top; padding: 0; border-radius: 0; }

.pagination>button>span {
	display: block; width: 35px; height: 35px; box-sizing: border-box; border: 1px solid #ddd;
	background-repeat: no-repeat; background-position: 50% 50%; text-indent: -999px;
}

.pagination>button.btn_prev {margin-right:10px;margin-left:-1px;}
.pagination>button.btn_next {margin-left:10px;margin-right:-1px;}

.pagination>button.btn_first>span { background: #fff url(../../../images/abs/icon/pagingFirst_icon.svg) no-repeat center; background-size: 15px; }
.pagination>button.btn_prev>span { background: #fff url(../../../images/abs/icon/pagingPrev_icon.svg) no-repeat center; background-size: 15px; }
.pagination>button.btn_next>span { background: #fff url(../../../images/abs/icon/pagingNext_icon.svg) no-repeat center; background-size: 15px; }
.pagination>button.btn_end>span { background: #fff url(../../../images/abs/icon/pagingEnd_icon.svg) no-repeat center; background-size: 15px; }

.pagination .paging {display:inline-block;height:35px;font-size:0;text-align:center; }
.pagination .paging>li {display:inline-block;color:#999; margin-right: -1px;}

.pagination .paging>li>button {
	position: relative; display:inline-block; overflow:hidden; background: #fff; font-weight: 500;
	width: 35px; height: 35px; border:1px solid #ddd; box-sizing: border-box; line-height: 30px; color: #000; margin: 0 -1px; padding: 0; border-radius: 0;
}
.pagination .paging>li>button:hover,
.pagination .paging>li>button.on {
	border: 1px solid #00164d; color: #00164d; z-index: 10; font-weight: 600;
}

.pagination .paging>li>a { display: inline-block; overflow: hidden; width: 35px; height: 35px; border: 1px solid #ddd; box-sizing: border-box; line-height: 35px; }
.pagination .paging>li>a:hover,
.pagination .paging>li>a.on { border:2px solid #2c48a5; color:#2c48a5; z-index: 10;}




/* 팝업 */
#pop_dim { 
	position: fixed; top: 0; left: 0; 
	width: 100%; height: 100%; background: #000; 
	visibility: hidden; opacity: 0.5; z-index: 3700; transition: 0.3s;
}
#pop_dim.on {visibility:visible;opacity:0.67;z-index: 3700;}


#nav_dim { 
	position: fixed; top: 0; left: 0; 
	width: 100%; height: 100%; background: #000; 
	visibility: hidden; opacity: 0.5; z-index: 3700; transition: 0.3s;
}
#nav_dim.on {visibility:visible;opacity:0.67;z-index: 3700;}



.popLayout {
	display: none;
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999;
	max-width: calc(100% - 60px); max-height: calc(100vh - 60px); height: auto;
	background: #fff;
}
.popLayout.active { display: block; }


.popLayout .popTit { 
	position: relative; width: 100%; height: 57px; line-height: 51px; 
    padding-left: 30px; box-sizing: border-box;
    border: 1px solid #d6ecfe; border-top: 3px solid #006edb;
    font-size: 22px; font-weight: bold;
    color: #006edb; background: #f1f8ff;
}
.popLayout .popTit::after {
    content: ""; position: absolute; left: 15px; top: 50%; transform: translate(0%, -50%);
    width: 6px; height: 6px; background: #006edb; border-radius: 50%;
}
.popLayout .popClose {
	position: absolute; right: 10px; top: calc(50% + 2px); transform: translate(0%, -50%);
	width: 37px; height: 37px; font-size: 0;
	background: url('../../../images/abs/icon/contNavClose.png') no-repeat center;
}
.popLayout .popClose img { width: 100%; }


.popLayout .popCont {
	max-width: calc(1240px - 200px);
	max-height: calc(100vh - 200px);
	overflow: auto;
	padding: 10px;
}















.topRightBox {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}



/* 알람 추가 */
.alarmWrap { position: relative; }

.alarmWrap>button {
	position: relative; display: block; width: 37px; height: 37px !important; border-radius: 37px; box-shadow: 1px 1px 10px rgba(14, 79, 179, 0.3); text-align: center;
	margin-right: 20px; box-sizing: border-box; background: #fff !important;
}
.alarmWrap:last-child>button { margin-right: 0; }
.alarmWrap>button img { width: 17px; margin-top: 0px; }
.alarmWrap>button span { position: absolute; right: -13px; top: -7px; font-size: 13px; display: inline-block; background: #3C9EFF; color: #fff; width: 22px; height: 22px; border-radius: 22px; line-height: 21px; }

/* 
.alarmWrap .alarmBtn, .alarmWrap .noticeBtn {
	position: relative; display: block; width: 35px; height: 35px; border-radius: 35px;
	background: #fff; box-shadow: 1px 1px 10px rgba(14, 79, 179, 0.3); text-align: center;
	margin-right: 27px; box-sizing: border-box;
}
.alarmWrap .alarmBtn>span, .alarmWrap .noticeBtn>span { 
	position: absolute; right: -13px; top: -5px; font-size: 13px; display: inline-block; background: #3C9EFF; color: #fff; width: 22px; height: 22px; border-radius: 22px; line-height: 23px;
}
 */


.alarmWrap .alarmPop {
	opacity: 0;
	position: absolute; right: -30px; top: 57px; transform: translate( 0%, 0%); background: #fff; border: none;
	width: 370px; height: 0; max-height: calc(100vh - 107px); box-shadow: 3px 3px 6px rgba(0, 0, 0, .2);
	transition: 0.3s; overflow: hidden;
}
.alarmWrap .alarmPop.active { opacity: 1; right: -10px; width: 370px; height: auto; overflow-y: auto; border: 1px solid #ddd; transition: 0.3s; }

.alarmWrap .alarmPop .close { position: absolute; right: 0; top: 0; width: 45px; height: 50px; font-weight: normal; line-height: 50px; }
.alarmWrap .alarmPop .close .x-mark:after { color: #555; }
.alarmWrap .alarmPop h1 { font-size: 17px; vertical-align: middle; font-weight: bold; padding: 15px 15px 15px; box-sizing: border-box; border-bottom: 1px solid #ddd; }

.alarmWrap .alarmPop h1 button { margin: 0px 0 0 5px; display: inline-block; vertical-align: middle; }
.alarmWrap .alarmPop h1 button img{width:20px;}
.alarmWrap .alarmPop .alarmList { position: relative; display: block; width: 100%; padding: 10px 37px 10px 17px; box-sizing: border-box; border-bottom: 1px solid #ddd; color: #555; font-size: 15px; transition: 0.3s; }
.alarmWrap .alarmPop .alarmList:last-child { border-bottom: none; }
.alarmWrap .alarmPop .alarmList:hover { background: #f7f7f7; }
.alarmWrap .alarmPop .alarmList span.listTit { font-weight: bold; color: #333; position: relative; }
.alarmWrap .alarmPop .alarmList span.listTit::before { content:""; width: 4px; height: 4px; background: #3c9eff; position: absolute; left: -10px; top: -2px;  border-radius: 5px; }
.alarmWrap .alarmPop .alarmList span.minute { display: block; color: #999; font-size: 13px; margin-top: 4px; }

.alarmWrap .alarmPop .alarmList.off { background: #f0f0f0; color: #999; }
.alarmWrap .alarmPop .alarmList.off span.listTit::before { background: #aaa; }
.alarmWrap .alarmPop .alarmList.off span.listTit { color: #777; }

.alarmWrap .alarmPop .alarmList .listClose { width: 20px; height: 20px; position: absolute; right: 10px; top: 50%; transform: translate(0%, -50%);}
.alarmWrap .alarmPop .alarmList .listClose .x-mark { line-height: 20px; font-weight: normal; }
.alarmWrap .alarmPop .alarmList .listClose .x-mark:after { font-size: 1.3rem; color: #999; }

.alarmWrap .alarmPop .alarmList.no { font-size: 15px; font-weight: bold; text-align: center; line-height: 70px; color: #777; cursor: default; padding: 10px 17px; }
.alarmWrap .alarmPop .alarmList.no:hover { background: #fff; }

.alarmWrap .alarmPop .allDel { display: block; padding: 4px 10px; line-height: normal; position: absolute; right: 47px; top: 12px; border-radius: 25px; background: #999; color: #fff; font-size: 13px; }
.alarmWrap .alarmPop .allDel.on { background: #007bf5; }

.liveAlarm { position: fixed; z-index: 1000; right: 27px; bottom: 0px; opacity: 0; background: #fff; border: 1px solid #ddd; border-top: 2px solid #007bf5; width: 370px; height: auto; box-shadow: 3px 3px 6px rgba(0, 0, 0, .2); transition: 0.3s; }
.liveAlarm.on { bottom: 27px; opacity: 1; }
.liveAlarm .alarmList { position: relative; display: block; width: 100%; padding: 10px 37px 10px 17px; box-sizing: border-box; border-bottom: 1px solid #ddd; color: #555; font-size: 15px; transition: 0.3s; }
.liveAlarm .alarmList:last-child { border-bottom: none; }
.liveAlarm .alarmList:hover { background: #f7f7f7; }

.liveAlarm .alarmList span.listTit { font-weight: bold; color: #333; position: relative; }
.liveAlarm .alarmList span.listTit::before { content:""; width: 4px; height: 4px; background: #3c9eff; position: absolute; left: -10px; top: -2px;  border-radius: 5px; }
.liveAlarm .alarmList span.minute { display: block; color: #999; font-size: 13px; margin-top: 4px; }
.liveAlarm .alarmList .listClose { width: 20px; height: 20px; position: absolute; right: 10px; top: 50%; transform: translate(0%, -50%); }
.liveAlarm .alarmList .listClose .x-mark { line-height: 20px; }
.liveAlarm .alarmList .listClose .x-mark:after { font-size: 1.3rem; color: #999; }



/* 알림 설정 팝업 레이아웃 */
.anarmSetWrap { 
	position: fixed; left: 0; top: 0; z-index: 9999; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.7); 
	display: flex; justify-content: center; flex-wrap: wrap; align-items: center;
 }
.anarmSetWrap .popupCont { position: relative; margin: 0 10px; min-width: 970px; min-height: auto; max-width: calc(50% - 40px); background: #fff; border-top: 2px solid #007bf5; }

.anarmSetWrap .popupCont .popupContent { display: block; margin: 0; font-size: 0; min-height: 300px; white-space: normal; padding: 15px 15px; font-size: 15px; }
.anarmSetWrap .popupCont .popupContent .popTitle { font-size: 19px; font-weight: bold; padding-bottom: 10px; }
.anarmSetWrap .popupCont .popupContent h5 { font-size: 15px; font-weight: bold; padding: 10px 0 7px; margin: 13px 0 5px; color: #555; text-align: center; border-top: 2px solid #aaa; border-bottom: 1px solid #ddd; background: #f2f9ff; }
.anarmSetWrap .popupCont .popupContent .anarmSetList caption { text-indent: -9999px; position: absolute; top: -1000em; left: 0;}
.anarmSetWrap .popupCont .popupContent .popClose .listClose { position: absolute; right: 15px; top: 5px; }
.anarmSetWrap .popupCont .popupContent .anarmSettingList ul li { display: inline-block; }

.anarmSetWrap .popupCont .popupContent ul li input { vertical-align: middle; }
.anarmSetWrap .popupCont .popupContent ul li label { margin-right: 17px; vertical-align: middle; }


.anarmSetWrap .popupCont .popupContent .alarmListChoice { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
.anarmSetWrap .popupCont .popupContent .alarmListChoice>li { width: calc(20% - 5px); border: 1px solid #aaa; border-top: none; }
.anarmSetWrap .popupCont .popupContent .alarmListChoice>li>h5 { margin: 0 0 0px; border-top: 2px solid #aaa; }

.anarmSetWrap .popupCont .popupContent .alarmListChoice>li>div { height: 100px; overflow-y: auto; padding: 5px; box-sizing: border-box; }
.anarmSetWrap .popupCont .popupContent .alarmListChoice>li>div>span { font-size: 12px !important; display: block; background: #f0f0f0; margin-bottom: 5px; padding: 5px; box-sizing: border-box; }
.anarmSetWrap .popupCont .popupContent .alarmListChoice>li>div>ul>li { display: block; }

.anarmSetWrap .popupCont .popupContent .alarmPopBtn { text-align: right; }








.nomalCheck { display: inline-block;}
.nomalCheck span { position: relative; }
.nomalCheck input { 
	position: absolute;
    margin: 0px;
	padding-inline: 8px; padding-block: 12px;
}
.nomalCheck input[type="checkbox"]{ appearance: none; }
.nomalCheck input:focus-visible {
	outline: solid 2px #0f59d9;
	border-radius: 1%;
}

.nomalCheck input[type="checkbox"] + label{
	display: inline-block;
	background: url('../../../images/abs/icon/checkbox_icon.png') no-repeat left center; background-size: 15px;
	padding-left: 20px; line-height: 20px; font-size: 13px;
    margin: 0 0px 0 0; letter-spacing: -1px;
    cursor: pointer;
}
.nomalCheck input[type="checkbox"]:checked + label{
	background: url('../../../images/abs/icon/checkboxOn_icon.png') no-repeat left center; background-size: 15px;
}


.mapBtnCont .nomalCheck input[type="checkbox"] + label{
	display: inline-block;
	background: url('../../../images/abs/icon/checkbox_mIcon.png') no-repeat left center; background-size: 15px;
	padding-left: 20px; line-height: 20px; font-size: 13px;
    margin: 0 0px 0 0; letter-spacing: -1px;
    cursor: pointer;
}
.mapBtnCont .nomalCheck input[type="checkbox"]:checked + label{
	background: url('../../../images/abs/icon/checkboxOn_mIcon.png') no-repeat left center; background-size: 15px;
}












/* 마이페이지 */
.myPageWrap { padding: 20px; box-sizing: border-box; min-height: 350px; background: #f6fff5; border-radius: 17px 0 17px 7px; }

.contTitWrap { 
	position: relative; max-width: 1240px;
	font-size: 20px; font-weight:bold; background: #fff; border: 1px solid #d6ecfe; border-left: 3px solid #006edb; color: #006edb;
	padding: 11px 0 11px 13px; box-sizing: border-box; margin: 15px auto 10px;
}

.myPageMoveCont { display: flex; justify-content: center; align-items: center; margin-top: 30px; }
.myPageMoveCont li { width: calc(33.3% - 5px); margin: 0 5px;}


/* top 마이페이지 버튼 리스트 */
.alarmWrap.myIconWrap .myList { position: absolute; right: 20px; top: 35px; width: 157px; height: 0; opacity: 0; border: none; overflow: hidden; transition: 0.3s; }
.alarmWrap.myIconWrap .myList li { display: block; line-height: 33px; background: #fff; border-radius: 7px; margin: 3px 0; border: 1px solid #d6ecfe; }
.alarmWrap.myIconWrap .myList li a { display: block; line-height: 30px; border-bottom: 1px solid #ddd; padding: 0 0 0 10px; font-size: 14px; font-weight: bold; transition: 0.3s; }
.alarmWrap.myIconWrap .myList li a:hover { color: #006edb; }
.alarmWrap.myIconWrap .myList li:last-child a { border-bottom: none; }
.alarmWrap.myIconWrap:hover .myList { width: 157px; height: auto; opacity: 1; padding: 15px 0 0 0; transition: 0.3s; } 



/* 로그인 통합 */
.unitedLoginWrap { padding: 100px 0;}


.unitedLoginCont { width: 500px; margin: 0 auto; padding: 20px; box-sizing: border-box; background: #fff; border-top: 2px solid #006edb; }
.unitedLoginCont>h3 { text-align: center; color: #fff; background: #006edb; border-radius: 7px; padding: 10px 0; font-size: 21px; font-weight: bold; }
.unitedLoginCont>h4 { text-align: center; color: #006edb; font-size: 17px; font-weight: bold; margin-top: 10px; }
.unitedLoginCont>h5 { font-size: 15px; font-weight: bold; margin-top: 15px; }
.unitedLoginCont .unitedLoginTxt { border: 1px solid #d6ecfe; background: #f6faff; color: #333; padding: 10px; border-radius: 7px; box-sizing: border-box; margin: 10px 0 10px; font-size: 13px; }
.unitedLoginCont .unitedLoginTxt>span { font-weight: bold; font-size: 14px; color: #00164d; }
.unitedLoginCont table.common { margin-bottom: 20px; }





.vsslName { font-size: 12px; font-weight: bold; letter-spacing: -1px;
	position: absolute;
    left: 10%;
    top: 50%; transform: translate( 0%, -50%); z-index: 3333;
    text-shadow: 
	    -1px 0px #fff, 
	    0px 1px #fff, 
	    1px 0px #fff, 
	    0px -1px #fff;
}













/* 항만 상세보기 */
.noticeBox{width:initial; flex:1; margin:0 5px;}
.noticeBox02 > p:after{right:0 !important;}
.box.noticeBox02{flex-wrap: wrap; flex-direction: row; padding:10px 10px 10px 20px;}
.box.noticeBox02 ul{flex:1; margin-right:10px; gap:10px; flex-wrap:wrap;}
.box.noticeBox02 ul li{width:calc(32% - 10px); margin:0; gap:0 10px;}
.box.noticeBox > button{right:10px;}
.box.noticeBox>div{margin:0;}
.box.noticeBox p{min-width:116px;}
.box.noticeBox02 > p{min-width:116px; margin-right:10px; padding:10px 10px 10px 13px;}
.box.noticeBox02 ul li>span{padding-left:0;}

@media screen and (max-width: 1676px) {	
	.box.noticeBox02 ul li{justify-content: flex-start;}
}
@media screen and (max-width: 767px){
	.box.noticeBox02 ul{margin-right:0px;}
	.box.noticeBox02 ul li{flex: 1; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: 2px; padding:0;}
	.box.noticeBox02 ul li h3{width:100%; margin:0;}
	.half-box .txt_tlt_b{align-items: flex-start; flex-direction: column;}
	.half-box .txt_tlt_b .txt_s{padding-top:5px;}
}

/* 테이블 스타일 추가 */
table.common.width1240, .width1240 { max-width: 1240px; margin: 0 auto 0; }








/*** Component ***/
.txtL {text-align:left !important;}
.txtC {text-align:center !important;}
.txtR {text-align:right !important;}

.cBlue {color: #0188cc !important;}
.cRed {color: #cc0101 !important;}
.cGreen {color: #01cc31 !important;}
.cYellow {color: #cca801 !important;}
.cGray {color: #555 !important;}

.fL {float:left !important;}
.fR {float:right !important;}
.cB {clear:both !important;}
.cB::after{content:"";display: block;clear: both;}

.fwB { font-weight: bold;}
.dbN { display: none !important; }
.bTnone { border-top: none !important; }
.bBnone { border-bottom: none !important; }
.bT2px { border-top: 2px solid #514ecd !important; }
.dpIb { display: inline-block !important; }
.dpb { display: block !important; }
.vtAM { vertical-align: middle !important; }
.shadowVisual { box-shadow: 2px 2px 14px rgb(91, 176, 255, 0.14) !important; }

.ofH { overflow: hidden; }

.wA { width: auto !important; }
.fs0 {font-size: 0px !important;}
.fs13 {font-size: 13px !important;}

.thead-hidden {
    position: absolute;
    width:0;
    height: 0;
    overflow: hidden;
}

.mT-10 {margin-top:-10px !important;}
.mT0 {margin-top:0px !important;}
.mT1 {margin-top:1px !important;}
.mT2 {margin-top:2px !important;}
.mT3 {margin-top:3px !important;}
.mT4 {margin-top:4px !important;}
.mT5 {margin-top:5px !important;}
.mT6 {margin-top:6px !important;}
.mT7 {margin-top:7px !important;}
.mT8 {margin-top:8px !important;}
.mT9 {margin-top:9px !important;}
.mT10 {margin-top:10px !important;}
.mT11 {margin-top:11px !important;}
.mT12 {margin-top:12px !important;}
.mT13 {margin-top:13px !important;}
.mT14 {margin-top:14px !important;}
.mT15 {margin-top:15px !important;}
.mT16 {margin-top:16px !important;}
.mT17 {margin-top:17px !important;}
.mT18 {margin-top:18px !important;}
.mT19 {margin-top:19px !important;}
.mT20 {margin-top:20px !important;}
.mT21 {margin-top:21px !important;}
.mT22 {margin-top:22px !important;}
.mT23 {margin-top:23px !important;}
.mT24 {margin-top:24px !important;}
.mT25 {margin-top:25px !important;}
.mT26 {margin-top:26px !important;}
.mT27 {margin-top:27px !important;}
.mT28 {margin-top:28px !important;}
.mT29 {margin-top:29px !important;}
.mT30 {margin-top:30px !important;}
.mT35 {margin-top:35px !important;}
.mT40 {margin-top:40px !important;}
.mT45 {margin-top:45px !important;}
.mT50 {margin-top:50px !important;}
.mT70 {margin-top:70px !important;}
.mT90 {margin-top:90px !important;}
.mT100 {margin-top:100px !important;}

.mR0 {margin-right:0px !important;}
.mR1 {margin-right:1px !important;}
.mR2 {margin-right:2px !important;}
.mR3 {margin-right:3px !important;}
.mR4 {margin-right:4px !important;}
.mR5 {margin-right:5px !important;}
.mR6 {margin-right:6px !important;}
.mR7 {margin-right:7px !important;}
.mR8 {margin-right:8px !important;}
.mR9 {margin-right:9px !important;}
.mR10 {margin-right:10px !important;}
.mR11 {margin-right:11px !important;}
.mR12 {margin-right:12px !important;}
.mR13 {margin-right:13px !important;}
.mR14 {margin-right:14px !important;}
.mR15 {margin-right:15px !important;}
.mR16 {margin-right:16px !important;}
.mR17 {margin-right:17px !important;}
.mR18 {margin-right:18px !important;}
.mR19 {margin-right:19px !important;}
.mR20 {margin-right:20px !important;}
.mR21 {margin-right:21px !important;}
.mR22 {margin-right:22px !important;}
.mR23 {margin-right:23px !important;}
.mR24 {margin-right:24px !important;}
.mR25 {margin-right:25px !important;}
.mR26 {margin-right:26px !important;}
.mR27 {margin-right:27px !important;}
.mR28 {margin-right:28px !important;}
.mR29 {margin-right:29px !important;}
.mR30 {margin-right:30px !important;}
.mR35 {margin-right:35px !important;}
.mR40 {margin-right:40px !important;}
.mR45 {margin-right:45px !important;}
.mR50 {margin-right:50px !important;}

.mB0 {margin-bottom:0px !important;}
.mB1 {margin-bottom:1px !important;}
.mB2 {margin-bottom:2px !important;}
.mB3 {margin-bottom:3px !important;}
.mB4 {margin-bottom:4px !important;}
.mB5 {margin-bottom:5px !important;}
.mB6 {margin-bottom:6px !important;}
.mB7 {margin-bottom:7px !important;}
.mB8 {margin-bottom:8px !important;}
.mB9 {margin-bottom:9px !important;}
.mB10 {margin-bottom:10px !important;}
.mB11 {margin-bottom:11px !important;}
.mB12 {margin-bottom:12px !important;}
.mB13 {margin-bottom:13px !important;}
.mB14 {margin-bottom:14px !important;}
.mB15 {margin-bottom:15px !important;}
.mB16 {margin-bottom:16px !important;}
.mB17 {margin-bottom:17px !important;}
.mB18 {margin-bottom:18px !important;}
.mB19 {margin-bottom:19px !important;}
.mB20 {margin-bottom:20px !important;}
.mB21 {margin-bottom:21px !important;}
.mB22 {margin-bottom:22px !important;}
.mB23 {margin-bottom:23px !important;}
.mB24 {margin-bottom:24px !important;}
.mB25 {margin-bottom:25px !important;}
.mB26 {margin-bottom:26px !important;}
.mB27 {margin-bottom:27px !important;}
.mB28 {margin-bottom:28px !important;}
.mB29 {margin-bottom:29px !important;}
.mB30 {margin-bottom:30px !important;}
.mB35 {margin-bottom:35px !important;}
.mB40 {margin-bottom:40px !important;}
.mB45 {margin-bottom:45px !important;}
.mB50 {margin-bottom:50px !important;}
.mB70 {margin-bottom:70px !important;}
.mB100 {margin-bottom:100px !important;}

.mL0 {margin-left:0px !important;}
.mL1 {margin-left:1px !important;}
.mL2 {margin-left:2px !important;}
.mL3 {margin-left:3px !important;}
.mL4 {margin-left:4px !important;}
.mL5 {margin-left:5px !important;}
.mL6 {margin-left:6px !important;}
.mL7 {margin-left:7px !important;}
.mL8 {margin-left:8px !important;}
.mL9 {margin-left:9px !important;}
.mL10 {margin-left:10px !important;}
.mL11 {margin-left:11px !important;}
.mL12 {margin-left:12px !important;}
.mL13 {margin-left:13px !important;}
.mL14 {margin-left:14px !important;}
.mL15 {margin-left:15px !important;}
.mL16 {margin-left:16px !important;}
.mL17 {margin-left:17px !important;}
.mL18 {margin-left:18px !important;}
.mL19 {margin-left:19px !important;}
.mL20 {margin-left:20px !important;}
.mL21 {margin-left:21px !important;}
.mL22 {margin-left:22px !important;}
.mL23 {margin-left:23px !important;}
.mL24 {margin-left:24px !important;}
.mL25 {margin-left:25px !important;}
.mL26 {margin-left:26px !important;}
.mL27 {margin-left:27px !important;}
.mL28 {margin-left:28px !important;}
.mL29 {margin-left:29px !important;}
.mL30 {margin-left:30px !important;}
.mL35 {margin-left:35px !important;}
.mL40 {margin-left:40px !important;}
.mL45 {margin-left:45px !important;}
.mL50 {margin-left:50px !important;}

.mL-40 {margin-left:-40px !important;}

.pT0 {padding-top:0px !important;}
.pT1 {padding-top:1px !important;}
.pT2 {padding-top:2px !important;}
.pT3 {padding-top:3px !important;}
.pT4 {padding-top:4px !important;}
.pT5 {padding-top:5px !important;}
.pT6 {padding-top:6px !important;}
.pT7 {padding-top:7px !important;}
.pT8 {padding-top:8px !important;}
.pT9 {padding-top:9px !important;}
.pT10 {padding-top:10px !important;}
.pT11 {padding-top:11px !important;}
.pT12 {padding-top:12px !important;}
.pT13 {padding-top:13px !important;}
.pT14 {padding-top:14px !important;}
.pT15 {padding-top:15px !important;}
.pT16 {padding-top:16px !important;}
.pT17 {padding-top:17px !important;}
.pT18 {padding-top:18px !important;}
.pT19 {padding-top:19px !important;}
.pT20 {padding-top:20px !important;}
.pT21 {padding-top:21px !important;}
.pT22 {padding-top:22px !important;}
.pT23 {padding-top:23px !important;}
.pT24 {padding-top:24px !important;}
.pT25 {padding-top:25px !important;}
.pT26 {padding-top:26px !important;}
.pT27 {padding-top:27px !important;}
.pT28 {padding-top:28px !important;}
.pT29 {padding-top:29px !important;}
.pT30 {padding-top:30px !important;}
.pT35 {padding-top:35px !important;}
.pT40 {padding-top:40px !important;}
.pT45 {padding-top:45px !important;}
.pT50 {padding-top:50px !important;}

.pR0 {padding-right:0px !important;}
.pR1 {padding-right:1px !important;}
.pR2 {padding-right:2px !important;}
.pR3 {padding-right:3px !important;}
.pR4 {padding-right:4px !important;}
.pR5 {padding-right:5px !important;}
.pR6 {padding-right:6px !important;}
.pR7 {padding-right:7px !important;}
.pR8 {padding-right:8px !important;}
.pR9 {padding-right:9px !important;}
.pR10 {padding-right:10px !important;}
.pR11 {padding-right:11px !important;}
.pR12 {padding-right:12px !important;}
.pR13 {padding-right:13px !important;}
.pR14 {padding-right:14px !important;}
.pR15 {padding-right:15px !important;}
.pR16 {padding-right:16px !important;}
.pR17 {padding-right:17px !important;}
.pR18 {padding-right:18px !important;}
.pR19 {padding-right:19px !important;}
.pR20 {padding-right:20px !important;}
.pR21 {padding-right:21px !important;}
.pR22 {padding-right:22px !important;}
.pR23 {padding-right:23px !important;}
.pR24 {padding-right:24px !important;}
.pR25 {padding-right:25px !important;}
.pR26 {padding-right:26px !important;}
.pR27 {padding-right:27px !important;}
.pR28 {padding-right:28px !important;}
.pR29 {padding-right:29px !important;}
.pR30 {padding-right:30px !important;}
.pR35 {padding-right:35px !important;}
.pR40 {padding-right:40px !important;}
.pR45 {padding-right:45px !important;}
.pR50 {padding-right:50px !important;}

.pB0 {padding-bottom:0px !important;}
.pB1 {padding-bottom:1px !important;}
.pB2 {padding-bottom:2px !important;}
.pB3 {padding-bottom:3px !important;}
.pB4 {padding-bottom:4px !important;}
.pB5 {padding-bottom:5px !important;}
.pB6 {padding-bottom:6px !important;}
.pB7 {padding-bottom:7px !important;}
.pB8 {padding-bottom:8px !important;}
.pB9 {padding-bottom:9px !important;}
.pB10 {padding-bottom:10px !important;}
.pB11 {padding-bottom:11px !important;}
.pB12 {padding-bottom:12px !important;}
.pB13 {padding-bottom:13px !important;}
.pB14 {padding-bottom:14px !important;}
.pB15 {padding-bottom:15px !important;}
.pB16 {padding-bottom:16px !important;}
.pB17 {padding-bottom:17px !important;}
.pB18 {padding-bottom:18px !important;}
.pB19 {padding-bottom:19px !important;}
.pB20 {padding-bottom:20px !important;}
.pB21 {padding-bottom:21px !important;}
.pB22 {padding-bottom:22px !important;}
.pB23 {padding-bottom:23px !important;}
.pB24 {padding-bottom:24px !important;}
.pB25 {padding-bottom:25px !important;}
.pB26 {padding-bottom:26px !important;}
.pB27 {padding-bottom:27px !important;}
.pB28 {padding-bottom:28px !important;}
.pB29 {padding-bottom:29px !important;}
.pB30 {padding-bottom:30px !important;}
.pB35 {padding-bottom:35px !important;}
.pB40 {padding-bottom:40px !important;}
.pB45 {padding-bottom:45px !important;}
.pB50 {padding-bottom:50px !important;}

.pL0 {padding-left:0px !important;}
.pL1 {padding-left:1px !important;}
.pL2 {padding-left:2px !important;}
.pL3 {padding-left:3px !important;}
.pL4 {padding-left:4px !important;}
.pL5 {padding-left:5px !important;}
.pL6 {padding-left:6px !important;}
.pL7 {padding-left:7px !important;}
.pL8 {padding-left:8px !important;}
.pL9 {padding-left:9px !important;}
.pL10 {padding-left:10px !important;}
.pL11 {padding-left:11px !important;}
.pL12 {padding-left:12px !important;}
.pL13 {padding-left:13px !important;}
.pL14 {padding-left:14px !important;}
.pL15 {padding-left:15px !important;}
.pL16 {padding-left:16px !important;}
.pL17 {padding-left:17px !important;}
.pL18 {padding-left:18px !important;}
.pL19 {padding-left:19px !important;}
.pL20 {padding-left:20px !important;}
.pL21 {padding-left:21px !important;}
.pL22 {padding-left:22px !important;}
.pL23 {padding-left:23px !important;}
.pL24 {padding-left:24px !important;}
.pL25 {padding-left:25px !important;}
.pL26 {padding-left:26px !important;}
.pL27 {padding-left:27px !important;}
.pL28 {padding-left:28px !important;}
.pL29 {padding-left:29px !important;}
.pL30 {padding-left:30px !important;}
.pL35 {padding-left:35px !important;}
.pL40 {padding-left:40px !important;}
.pL45 {padding-left:45px !important;}
.pL50 {padding-left:50px !important;}
.pL60 {padding-left:60px !important;}