@charset "UTF-8";
.pT0 { padding-top: 0px !important; }
.pR0 { padding-right: 0px !important; }
.pB0 { padding-bottom: 0px !important; }
.pL0 { padding-left: 0px !important; }

.pT10 { padding-top: 10px !important; }
.pT20 { padding-top: 20px !important; }
.pT40 { padding-top: 40px !important; }

.pB10 { padding-bottom: 10px !important; }
.pB20 { padding-bottom: 20px !important; }
.pB40 { padding-bottom: 40px !important; }

.pL5 { padding-left: 5px !important; }
.pL10 { padding-left: 10px !important; }

.mL5 { margin-left: 5px !important; }
.mL10 { margin-left: 10px !important; }
.mL20 { margin-left: 20px !important; }
.mL30 { margin-left: 30px !important; }

.mT5 { margin-top: 5px !important; }
.mT10 { margin-top: 10px !important; }
.mT20 { margin-top: 20px !important; }
.mT30 { margin-top: 30px !important; }

.mB5 { margin-bottom: 5px !important; }
.mB10 { margin-bottom: 10px !important; }
.mB20 { margin-bottom: 20px !important; }

.dpB { display: block !important; }
.dpIB { display: inline-block !important; }

.fwB { font-weight: bold !important; }
.txtC { text-align: center !important; }
.txtR { text-align: right !important; }

.bBn { border-bottom: none !important; }

.fR { float: right !important; }

.cRed {color: #cc0101 !important; }
.f13 { font-size: 13px !important; }


.blind {position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0.1; font-size: 0; line-height: 0; text-indent: -9999px; }
.cursorp{cursor:pointer; }
.t_left {text-align:left !important}
.t_center {text-align:center !important}
.t_right {text-align:right !important}
.f_left {float:left !important}
.f_right {float:right !important}
.pdT1{padding-top:1px !important; }
.pd20 {padding: 20px !important;}
.mt-0{margin-top:0 !important; }
.mt-05{margin-top:5px !important; }
.mt-1{margin-top:10px !important; }
.mt-2{margin-top:20px !important; }
.mt-3{margin-top:30px !important; *padding:30px 0 0 0}
.mt-5{margin-top:50px !important; *padding:50px 0 0 0}
.mt-8{margin-top:80px !important; *padding:80px 0 0 0}
.mb-2{margin-bottom:20px !important; }
.mb-05{margin-bottom:5px !important; }
.ml-1{margin-left:10px !important; }
.ml-05{margin-left:5px !important; }
.ml-2{margin-left:20px !important; }
.ml-4{margin-left:40px !important; }
.ml-5{margin-left:50px !important; }
.ml-15{margin-left:150px !important; }
.mr-05 { margin-right: 5px !important; }
.mr-1 { margin-right: 10px !important; }
.center{width:1000px; margin:0 auto; }
.ml-auto { margin-left: auto } 
.mr-auto { margin-right: auto } 
.mt-auto { margin-top: auto } 
.mb-auto { margin-bottom: auto } 
.center{width:1000px; margin:0 auto; }
.dib{display:inline-block; vertical-align:top; }
.ovf {overflow: hidden; }
.fullCts{width:100%}
.w50 {width: 50% !important; }
.w70 {width: 70% !important; }
.w80 {width: 80% !important; }
.w90 {width: 90% !important; }
.w100 {width: 100% !important; }
.h100 { height: 100% !important; }
.mo {display: none !important; }
.clear{content:""; display:block; clear:both}
*, :after, :before {box-sizing: border-box;}
.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% - 37px); overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

.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:#005EBC; 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); }

.pageTlt{display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; justify-content:space-between; padding-bottom:10px; align-items:flex-end}
.pageTlt h2{font-size:1.25rem; color:#1b1a1a; font-weight:bold; padding-left:3px}
.pageTlt ul{font-size:0}
.pageTlt ul li{display:inline-block; font-size:.825rem; color:#6c6c6c; padding:0 7px; position:relative; /* cursor: pointer */}
.pageTlt ul li:last-child{padding-right:0}
.pageTlt ul li:after{content:""; width:1px; height:14px; background:#cacaca; position:absolute; right:-1px; top:0}
.pageTlt ul li:last-child:after{width:0px}
.box-item-top{display:flex; justify-content:space-between; align-items:center}

/* 기상 정보 박스 */
.weather_box{display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; justify-content:space-between; position:relative; margin-bottom: 10px}
.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: 5px; 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; }
.noticeBox02 > p { /* min-width: 117px; */ min-width:22%; 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; */ width:100%; gap:.5rem; 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 .tui-datepicker {right: -24px;}
.searchBar *:first-child {margin-left: 0;}
.searchBar select {width: 150px; height: 35px;}
.searchBar input[type="text"], .searchBar select {height: 35px;}
.searchBar button {text-align: center;     word-break: keep-all;}
.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%);
	border-radius: 5px;
	color: #fff;
	border: none;
	font-size: .875rem;
	cursor: pointer;
	transition: all .2s;
	border:2px solid transparent;
}

.greenBtn:hover {
	background: #FFFFFF;
	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: .875rem;
	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%);
	border-radius: 5px;
	color: #fff;
	border: none;
	font-size: .875rem;
	cursor: pointer;
	transition: all .2s;
	border:2px solid transparent;
}

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

.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; white-space : nowrap; }
.btnPos .updateBtn{ position: relative; left: 100%; transform: translateX(-100%); display: none }

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

/*페이징*/
#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;
}

#boxWrap {
	width: 100%;
	position: relative; 
	margin-top:80px;
	padding: 0px 25px 25px;
	height: calc(100vh - 80px); overflow-y: auto;
}

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

/* --------------------------header------------------------- */

/* nav {
    background-color: #1B2750;
    height: calc(100vh - 60px);
    width: 60px;
    position: fixed;
    top:60px;
    left:0;
    z-index: 999;
    transition: width .2s;
    transition-timing-function: linear;
    transition-delay:0;
    overflow-x: hidden;
    overflow-y:auto
}
nav.active{width:260px;}
nav.full-active{left:0; width:100%;}
nav .mo-option{display:none}

nav:hover {
	width: 260px;
	box-shadow: 1px 0px 5px rgba(14, 79, 179, 0.3);
}

#gnb {
    padding: 0px 10px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    height:100%
    
}

#gnb > li {
    width: 240px;
    height: auto;
    margin: 10px 0px;
    border-radius: 10px;
    color:  #fff;
    font-weight: 600;
    transition: background-color .2s;
    transition: all .2s;
    transition-timing-function: linear;
    transition-delay: .1s;
}

nav:hover #gnb > li {
	background-color: rgba(44, 60, 115, 0.5);
}

nav:hover #gnb > li.active .navIcon {
	background-color: unset;
}

#gnb > li.active .navIcon {
	background-color:  #3c9eff;
}

.navIcon {
	width: 40px;
	height:40px;
	border-radius: 10px;
	background-color: rgba(44, 60, 115, 0.5);
	transition: background-color .2s;
}

#gnb > li > a:hover .navIcon {
	background-color: unset;
}

#gnb > li > a > p {
    margin-left: 20px;
    color: #fff;
}

#gnb > li > a {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	height: 40px;
	transition: all .2s;
	border-radius: 10px;
}

#gnb > li:hover > a {
	background-color: #3c9eff;
}

#gnb li a.disable {color: #959595; background-color: transparent}

#gnb > li.sitemap-nav{position:absolute; left:10px; bottom:20px;}
#gnb > li.anonymity-nav{position:absolute; left:10px; bottom:80px;}
#gnb > li.notice-nav{position:absolute; left:10px; bottom:140px;}
#gnb > li.notice-nav{margin-top:auto}

.navIcon > div { 
	width: 25px; height: 25px; margin: 7.5px auto;
}

.navIcon1 {
    background: url('../../../../images/upa/com/cmm/nav1.png') no-repeat center / contain;
}

.navIcon2 {
    background: url('../../../../images/upa/com/cmm/nav2.png') no-repeat center / contain;
}

.navIcon3 {
    background: url('../../../../images/upa/com/cmm/nav3.png') no-repeat center / contain;
}

.navIcon4 {
    background: url('../../../../images/upa/com/cmm/nav4.png') no-repeat center / contain;
}

.navIcon5 {
	background: url('../../../../images/upa/com/cmm/nav6.png') no-repeat center / contain;
    
}

.navIcon6 {
    background: url('../../../../images/upa/com/cmm/nav8.png') no-repeat center / contain;
}

.navIcon7 {
    background: url('../../../../images/upa/com/cmm/nav7.png') no-repeat center / contain;
}

.navIcon8 {
	background: url('../../../../images/upa/com/cmm/nav5.png') no-repeat center / contain;
}

#gnb > li:hover .navIcon1, #gnb > li.active .navIcon1 {
    background: url('../../../../images/upa/com/cmm/nav1-active.png') no-repeat center / contain;
}

#gnb > li:hover .navIcon2, #gnb > li.active .navIcon2 {
    background: url('../../../../images/upa/com/cmm/nav2-active.png') no-repeat center / contain;
}

#gnb > li:hover .navIcon3, #gnb > li.active .navIcon3 {
    background: url('../../../../images/upa/com/cmm/nav3-active.png') no-repeat center / contain;
}

#gnb > li:hover .navIcon4, #gnb > li.active .navIcon4 {
    background: url('../../../../images/upa/com/cmm/nav4-active.png') no-repeat center / contain;
}

#gnb > li:hover .navIcon5, #gnb > li.active .navIcon5 {
    background: url('../../../../images/upa/com/cmm/nav6-active.png') no-repeat center / contain;
}

#gnb > li:hover .navIcon6, #gnb > li.active .navIcon6 {
    background: url('../../../../images/upa/com/cmm/nav8-active.png') no-repeat center / contain;
}

#gnb > li:hover .navIcon7, #gnb > li.active .navIcon7 {
    background: url('../../../../images/upa/com/cmm/nav7-active.png') no-repeat center / contain;
}

#gnb > li:hover .navIcon8, #gnb > li.active .navIcon8 {
    
    background: url('../../../../images/upa/com/cmm/nav5-active.png') no-repeat center / contain;
}


.sitemapIcon {
    background: url('../../../../images/upa/com/cmm/siteMap.png') no-repeat center / contain;
}

.anonymityIcon {
    background: url('../../../../images/upa/com/cmm/anonymityIcon.png') no-repeat center / contain;
}

.noticeIcon {
    background: url('../../../../images/upa/com/cmm/notice.png') no-repeat center / contain;
}

#gnb > li:hover .anonymityIcon, #gnb > li.active .anonymityIcon {
	background: url('../../../../images/upa/com/cmm/anonymityIcon-active.png') no-repeat center / contain;
}

#gnb > li:hover .noticeIcon, #gnb > li.active .noticeIcon {
	background: url('../../../../images/upa/com/cmm/notice-active.png') no-repeat center / contain;
}

.dep2 {
	display:none;
	width: 100%;
	padding: 10px;
	height: auto !important;
}

.dep2 > li {
	width: 100%;
	border-radius: 50px;
}

.dep2 > li > a {
	display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;
  justify-content: space-between;
  align-items: center;
	width: 100%;
	height: 40px;
	border-radius: 50px;
	line-height: 40px;
	padding: 0px 20px; 
	color: #fff;
}

.dep2 > li:hover > a {
	background-color: #3c9eff; 
}

.dep3 {
	display: none;
	width: 100%;
	padding: 10px;
}

.dep3 > li {
	width: 100%;
	height: 35px;
	border-radius: 50px;
}

.dep3 > li > a {
	display: inline-block;
	width: 100%;
	height: 100%;
	line-height: 35px;
	padding-left: 20px;
	color: #fff;
}

.dep3 > li:hover {
	background-color: #3c9eff; 
} */

/* --------------------------topbar------------------------- */
/* .topBar .logo {
	background-color: #fff;
	height: 59px;
	text-align: center;
	line-height: 60px;
	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;
}

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

#container .zoomInContainer {
	display: block;
}

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

.topBar {
    position: fixed;
    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
}
.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 .alarmBtn {
	position: relative; display: block; width: 35px; height: 35px; border-radius: 35px; box-shadow: 1px 1px 10px rgba(14, 79, 179, 0.3); text-align: center;
	margin-right: 20px; padding-top: 7px; box-sizing: border-box;
}
.alarmWrap .alarmBtn>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: 22px;
}
.alarmWrap .alarmPop {
	position: absolute; left: 50%; top: 57px; transform: translate( -50%, 0%); background: #fff; border: 1px solid #ddd;
	width: 370px; height: auto; max-height: calc(100vh - 107px); box-shadow: 3px 3px 6px rgba(0, 0, 0, .2);
	overflow-y: auto;	
}
.alarmWrap .alarmPop .close { position: absolute; right: 0; top: 0; width: 45px; height: 45px; }
.alarmWrap .alarmPop .close .x-mark:after { color: #555; }
.alarmWrap .alarmPop h1 { font-size: 17px; font-weight: bold; padding: 14px 15px 9px; box-sizing: border-box; border-bottom: 1px solid #ddd; }
.alarmWrap .alarmPop h1 a { display: inline-block; vertical-align: middle; margin-left: 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; }
.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; }
.alarmWrap .alarmPop .alarmList.no:hover { background: #fff; }

.alarmWrap .alarmPop .allDel { display: block; padding: 4px 10px; position: absolute; right: 52px; top: 12px; border-radius: 25px; background: #999; color: #fff; }
.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; overflow-y: auto; }

.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; margin-bottom: 3px; }

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

/* 알림설정 */
.alarmWharfBtn { position: relative; display: inline-block; vertical-align: middle; width: 35px; height: 20px; border: 1px solid #aaa; border-radius: 40px; margin-right: 5px; cursor: pointer; }
.alarmWharfBtn span { position: absolute; left: 3px; top: 3px; display: inline-block; vertical-align: middle; width: 12px; height: 12px; border-radius: 15px; background: #aaa; }
.alarmWharfBtn.active { border: 1px solid #007bf5; }
.alarmWharfBtn.active span { left: auto; right: 3px; background: #007bf5; }




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

@media all and (max-width:1024px){
	.wrapPopup.popSurveyWrap { top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); max-height: calc(100vh - 130px); max-width: calc(100% - 40px); }
	.wrapPopup.popSurveyWrap .popupCont iframe { height: calc(100vh - 150px); padding: 0; }
	.wrapPopup.popSurveyWrap .popupCont .popSwiper { height: calc(100vh - 200px); }
}


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

.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%}
	
	
	
	
	.alarmWrap .alarmPop h1 button a { line-height: normal; }
	.alarmWrap .alarmPop h1 button a img { width: auto !important; }
	
	
	
}

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

.searchResultAnimation {
    position: relative;
    width: 100%;
    height: 100%;
}
.searchResultAnimation:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 228, 0, 0.6);
    border-radius: 50%;
    animation: scaleAnimationRed 3s infinite;
    animation-delay: 0.5s;
}

.searchResultAnimation:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 228, 0, 0.3);
    border-radius: 50%;
    animation: scaleAnimationRed 3s infinite;
    animation-delay: 1s;
}

@keyframes scaleAnimationRed {
    0% {
        box-shadow: 0 0 0 0px rgba(255, 228, 0, 0.7);
    }
    50% {
        box-shadow: 0 0 0 25px rgba(255, 228, 0, 0.15);
    }
    100% {
        box-shadow: 0 0 0 0px rgba(255, 228, 0, 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: 1240px; width:100%; top:20px; 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; }

@media all and (max-width:1240px){
	.modal-content { max-width: calc(100% - 40px); }
}

/* //모달 */

/* 사이트맵 */
.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; max-width: 270px; display: inline-block; }
.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); }	
.ui-widget.ui-widget-content {border:1px solid #eee; z-index:99 !important }
#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: #E0E8F1; color: #222; border-bottom:1px solid #efefef }
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 #E0E8F1 */border-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  */} 
#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); }

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




/* 설문 추가 스타일 */
.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; }



/* 선박위치기반 데이터 */

.popup{
	position: absolute;
    top: 70px;
    right: 390px;
    min-width: 46rem;
    max-height: 430px;
    padding:3rem;
    z-index: 100;
    border-radius: 0.75rem;
	background: #FFF;
	box-shadow: 3px 6px 4px 0 rgba(0, 0, 0, 0.18);
    z-index: 3700;
    box-sizing: border-box;
}
.popup .title{
	position:relative;
	display: flex;
    align-items: center;
    gap: 10px;
	padding-bottom:20px;
	font-size:18px;
	font-weight:800;
}
.popup .title .close{
	position:absolute;
	right:0;
	top:0;
	width:28px;
	height:28px;
	background:url(../../../../images/upa/icon_popup_close.svg) no-repeat center center;
	background-size: cover;
}
.popup .title:before{
	content:"";
	display:block;
	width: 3.055px;
	height: 14.867px;
	background: #006EDB;
}
.popup .tbWrap{
	overflow-y: scroll;
    max-height: 310px;
}
.popup table{
	border-collapse: separate;
	border-radius: 0.375rem 0.375rem 0.375rem 0.375rem;
	overflow:hidden;
}
.popup table thead{
	border-radius: 0.375rem 0.375rem 0 0;
}
.popup table th{
	padding:15px 10px;
	border-bottom: 1px solid #000B31;	
	background: #1B2751;
	color: #BBC0D0;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.01875rem;
}
.popup table tr{
	background: #F6F9FE;
}
.popup table tbody tr:nth-child(even) {
    background: #E5EBF6;
}
.popup table td{
	text-align:center;
	padding:15px 10px;
	color: #202020;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: -0.3px;
}
@media (max-width: 560px) {
	.popup{
		top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    min-width:92%;
	    padding:2rem;
	    border:1px solid #007BF5;
	}
	.tbWrap{
		width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; 
	}
	.popup table{
		table-layout: fixed;
	    width: 100%;
	    min-width: 600px;
        border-collapse: collapse;
	}
	.popup table td, 
    .popup table th {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
	
}