@charset "UTF-8"; 

.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 } 
.pd15{padding:15px !important}
.pdT1 { padding-top: 1px !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-4 { margin-top: 40px !important; *padding: 40px 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 }
.ml-05 { margin-left: 5px !important; } 
.ml-1 { margin-left: 10px !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; } 
.mb-2 { margin-bottom: 10px !important; } 
.mr-05 { margin-right: 5px !important; } 
.mr-1 { margin-right: 10px !important; } 
.mr-70 { margin-right: 70px !important; }
.ml-auto { margin-left: auto } 
.mr-auto { margin-right: auto } 
.mt-auto { margin-top: auto } 
.mb-auto { margin-bottom: auto } 
.m-auto { margin : 0 auto }
.dib { display: inline-block; vertical-align: top; } 
.db { display: block }
.db-import { display: block !important; }
.ovf { overflow: hidden; } 
.w100 { width: 100% !important; } 
.w70 { width: 70% !important; } 
.w50 { width: 50% !important; } 
.w20 { width: 20% !important; } 
.boxH100 { height: calc( 100vh - 250px ); }
.mo { display: none; } 
.flex-row { display: flex; flex-direction: row; align-items: center; } 
.flex-column { display: flex; flex-direction: column; align-items: center; }
.flex-between{display: flex; justify-content:space-between; align-items:center}
.flex-end{display: flex; justify-content:flex-end; align-items:center}
.flex-center{display: flex; justify-content:center; align-items: center}
.flex-align-end{display: flex; align-items:flex-end}
.flex-align-start{display: flex; align-items:flex-start}
.flex-align-center{display: flex; align-items:center}
.topCts-margin{margin-top:-20px}
.z9 { z-index: 9; }

*,:after,:before { box-sizing: border-box; vertical-align: top; }
.txt_3xs { font-size: .625rem }
.txt_xxs { font-size: .75rem }
.txt_xs { font-size: .865rem } 
.txt_s { font-size: .925rem }
.txt_dft { font-size: 1rem }
.txt_mid { font-size: 1.125rem }
.txt_lg { font-size: 1.25rem } 
.txt_xl { font-size: 1.5rem } 
.bold-dft { font-weight: 400; }
.bold-mid { font-weight: 500; } 
.bold-bold { font-weight: 600; } 
.bold-heavy { font-weight: 700; } 

p {line-height: 1.5; font-size:.875rem; word-break: keep-all } 

.bg-white{ background-color: #ffffff}
.bg-light-blue { background-color: #dae3f3 } 
.bg-light-green { background-color: #e2f0d9 } 
.bg-light-org { background-color: #fff2cc } 
.bg-light-red { background-color: #fddfdf } 
.bg-blue { background-color: #007BF5 } 
.bg-green { background-color: #469F74 }
.bg-deepgreen { background-color: #1D7759 }
.bg-org { background-color: #F29A42 } 
.bg-red { background-color: #F94054 } 
.bg-darkgray { background-color: #727272 } 
.bg-lightgray { background-color: #EFEFEF } 
.bg-greengray { background-color: #E9EEEA } 
.bg-purple { background-color: #8284F6 } 
.bg-box-blue { background-color: #E6F2FE }
.bg-primary { background-color: #188752 }

.bg-title-blue { background-color: #DFE8FA }
.bg-title-yellow { background-color: #F6F5D3 }
.bg-title-purple { background-color: #E1DCFD }
.bg-title-pink { background-color: #FFF3F3 }
.bg-title-green { background-color: #DEF2C8 }
.bg-title-org { background-color: #FBDBB6 }
.bg-rdbox-blue{background: #F1F6FA}
.bg-rdbox-green{background: #F2FAF1}
.bg-rdbox-yellow{background: #FFFAEC}
.bg-rdbox-red{background: #FAF1F1}

.box-green { border: 1px solid #92D050} 
.box-green dt { background: #92D050 } 
.box-org { border: 1px solid #FFC000} 
.box-org dt { background: #FFC000 } 
.box-red { border: 1px solid #FF2424} 
.box-red dt { background: #FF2424 }
.box-blue { border: 1px solid #007BF5 } 
.box-blue dt { background: #007BF5 } 

.c-wh { color: #ffffff }
.c-dft { color: #222 !important; } 
.c-green { color: #93C75D }
.c-deepgreen { color: #1D7759 }
.c-org { color: #FFC000 } 
.c-red { color: #FF2424 } 
.c-blue { color: #007BF5 } 
.c-gray { color: #767676 } 
.c-greengray { color: #7C8678 } 
.c-lightgray { color: #E7E7E7 } 
.c-primary { color: #188752}
.c-yellow { color: #FF9900 }
.c-green2 { color: #279E77 } 
.c-blue2 { color: #4C99E4 }
.c-red2 { color: #F94054 } 
.c-org2 { color: #F29A42 }

.boxRd-color { border-radius: 5px; overflow: hidden; text-align: center; margin: 0 20px 10px } 
.boxRd-color dt { color: #ffffff; height: 30px; line-height: 28px } 
.boxRd-color dd { height: 40px; line-height: 38px } 
.box-bg-blue { background-color: #E6F2FE } 
.box-round { border-radius: 5px; padding: 20px; position: relative; }
.box-round-tlt{display:inline-block; height:20px; line-height:20px; padding:0 10px; border-radius:15px }
.box-padding { margin: 20px 40px } 

.txt_tlt { font-size: 1.125rem; font-weight: 600; display: flex; align-items: center  }
.txt_tlt_b { font-size: 1.125rem; display: flex; justify-content: space-between; align-items: center; font-weight: 600 } 
.txt_title { display: flex; justify-content: space-between; align-items: center; }
.subHeading {font-size: 1rem; font-weight: 600}

.bluePoint { background: #007BF5; padding: 2px 7px; border-radius: 2px; color: #ffffff; font-weight: normal; font-size: .875rem } 
.orgPoint { background: #F57600; padding: 2px 7px; border-radius: 2px; color: #ffffff; font-weight: normal; font-size: .875rem } 
.grnPoint { background: #92D050; padding: 2px 7px; border-radius: 2px; color: #ffffff; font-weight: normal; font-size: .875rem } 
.redPoint { background: #FF2424; padding: 2px 7px; border-radius: 2px; color: #ffffff; font-weight: normal; font-size: .875rem }
.grayPoint { background: #727272; padding: 2px 7px; border-radius: 2px; color: #ffffff; font-weight: normal; font-size: .875rem }

.box-circle { display: inline-block; width: 40px; height: 40px; border-radius: 50%; line-height: 40px; text-align: center; margin-right: 10px  }
.box-circle > img { vertical-align: middle; }
.btn-circle{width:40px; height: 40px; background:#727272; border-radius:50%; cursor: pointer}
.btn-circle.btn-reset{background:url(../../../../images/ygpa/com/cmm/icon_reset.png) center no-repeat #F94054; background-size:100% auto;}
.btn-circle.btn-lock{display: none; background:url(../../../../images/ygpa/com/cmm/icon_lock.png) center no-repeat #727272; background-size:100% auto;}
.btn-circle.btn-unlock{background:url(../../../../images/ygpa/com/cmm/icon_unlock.png) center no-repeat #727272; background-size:100% auto;}
.btn-circle.btn-zoom{background:url(../../../../images/ygpa/com/cmm/icon_zoom.png) center no-repeat #727272; background-size:100% auto;}
.btn-circle.btn-zoomIn{background:url(../../../../images/ygpa/com/cmm/icon_zoomIn.png) center no-repeat #727272; background-size:100% auto;}
.btn-circle.btn-zoomOut{background:url(../../../../images/ygpa/com/cmm/icon_zoomOut.png) center no-repeat #727272; background-size:100% auto;}

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

.item-box .bt-line { padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #EFEFEF }

.moodify-open {
	display: block;
  width: 25px;
  height: 25px;
  cursor: pointer;
  background: url(../../../../images/ygpa/com/cmm/edit.png) no-repeat center;
  background-size: 25px 25px;
  margin: 0 auto;
  /*
  border-radius: 2px;
  border: 1px solid #dddddd;
  box-shadow: 1px 1px 5px rgba(0,0,0,.15); 
  */
}

.more-view {
	display: block;
  width: 25px;
  height: 25px;
  cursor: pointer;
  background: url(../../../../images/ygpa/com/cmm/moreViewBtn.png) no-repeat center;
  background-size: 25px 25px;
  margin: 0 auto;
  /*
  border-radius: 2px;
  border: 1px solid #dddddd;
  box-shadow: 1px 1px 5px rgba(0,0,0,.15);
  */
}

/*테이블스타일*/
table {border-collapse:collapse;border-spacing:0; border: 1px solid #F1F1FA; }
table caption{display:none}
table th{border-left: 1px solid #e1e9ea; border-right: 1px solid #e1e9ea;  border-bottom: 1px solid #e1e9ea;}
table th { background: #F1F1FA; color: #1a1a1a; text-align: center;  font-size: .875rem; padding:10px; font-weight: 500; vertical-align:middle; line-height:1.2} 
table td{border-left: 1px solid #efefef; border-right: 1px solid #efefef;}
table td { height:40px; padding: 7px 5px; font-size: .875rem; text-align: center; border-bottom: 1px solid #EFEFEF; vertical-align:middle; color:#767676} 
table th:first-child, table td:first-child { border-left: none; }
table th:last-child, table td:last-child { border-right: none; }
.rowspanTd { border-right: 1px solid #EFEFEF; vertical-align: middle; } 
.totalTr>td:not(.rowspanTd) { background-color: #ddd; } 
/* table tr:last-child td:not(thead td){ border-bottom: 1px solid #279E77 } */
table.tableSty2 th{background:#279E77; border-left: none;}
table.tableSty2 td{border-left: none;}
/* table.tableSty3 th{background:#f5f5f5; border-left: none; border-bottom:1px solid #949494; color: #111111; border-top:1px solid #949494; color: #111111;}
table.tableSty3 td{border-left: none; border-bottom:1px solid #bebebe}
table.tableSty3 tr:last-child td { border-bottom: 1px solid #bebebe } */
table.tableSty4 th{background:#f1f3f0; border-bottom:1px solid #eaeaea;  border-top:1px solid #eaeaea; color: #1a1a1a; padding:7px 10px; }
table.tableSty4 td{background:#ffffff; padding:7px; color:#666666}
table.tableSty4.sty4-2 th{background:#f1f1fa;}
table.tableSty4 tr:last-child td { border-bottom: 1px solid #eaeaea }
table.line-none th { border-left: none } 
table.line-none td { border-left: none } 
table.rowTable .thPoint {background-color: #EDF9F3}
/* table.rowTable th {border-bottom: 1px solid #EFEFEF} */
table tr.sub-tit { background: #f9f9ff;}
table.tit-size th { width: 10%;}

/*//테이블스타일*/

.half-box, .half-boxS { display: flex; flex-wrap: wrap; justify-content: space-between } 
.half-box>div, .half-boxS>div { width: calc(50% - 10px); } 

.pageTlt { display: flex; justify-content: space-between; padding-bottom: 20px; align-items: flex-end } 
.pageTlt > h2 { font-size: 1.5rem; color: #222222; font-weight: bold; } 
.pageTlt ul { font-size: 0 } 
.pageTlt ul li { display: inline-block; font-size: .825rem; color: #9a9a9a; padding: 0 7px; position: relative } 
.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 } 

/* searchBar */
.searchBar { display: flex; justify-content: center; align-items: center; z-index: 9; } 
.searchBar>* { margin: 0px 10px; } 
.searchBar>*:first-child{margin-left:0}
.searchBar>select { width: 150px; } 
.searchBar>button { min-width: 80px; height: 30px; text-align: center; } 
.rList_tabNav { position: absolute; right: 0; top: 0; } 
.rList_tabNav.tabNav button { width: 100px } 
.tabNav { display: flex; flex-wrap: nowrap; } 
.tabNav button {position:relative; height: 30px; margin-right: 20px; border-bottom: 2px solid #EFEFEF; text-align: center; background: #ffffff; color: #AEB2B0}
.tabNav button:before{content:""; width: 0; left: 50%; bottom:-2px; transform:translateX(-50%); position:absolute; height: 2px; background:#1D7759; display:block; transition: all .25s;}
.tabNav button:hover, .tabNav button:focus,.tabNav button.active { color: #222222; top: 0;}
.tabNav button:hover:before, .tabNav button:focus:before,.tabNav button.active:before {width:100%} 

.tabBtn button { min-width: 90px; height: 30px; border-radius: 50px; padding: 0px 20px; text-align: center; background-color: #FFF; border: 1px solid #F1F1F5 }
.tabBtn button:hover, .tabBtn button:focus, .tabBtn button.active { color: #FFF; background-color: #1D7759; border-color: #1D7759; }

/*버튼스타일*/
.btn-area{position:relative}
.btn{padding:7px 20px; min-width:100px; text-align: center; display:inline-block; border-radius:2px; border: none;cursor: pointer; transition: all .2s; font-size:.875rem} 
.btn-s{padding:5px 8px; min-width:50px; border-radius:2px}
.btn-sSq{padding:7px; min-width:50px;}
.btn-mid{padding:7px 14px; min-width:80px;}
.btn-green { background:/*#469F74*/#279E77; color:#fff} 
.btn-green:hover {} 
.btn-lightGreen { background-color:#ECF9F3; color:#fff} 
.btn-lightGreen:hover {} 
.btn-red { background:/*#F94054*/#E34D5D ; color:#fff} 
.btn-red:hover {} 
.btn-blue { background:/*#007BF5*/#1877d3; color:#fff}
.btn-blue:hover {} 
.btn-gray { background:/*#aaaaaa*/#899791; color:#fff}
.btn-gray:hover {} 
.btn-darkgray { background:#767676; color:#fff}
.btn-darkgray:hover {}
.btn-lightgray { background:#E9EEEA; border:1px solid #E1E8E2; color:#222222}
.btn-lightgray:hover {} 
.btn-org { background:#FEAA47; color:#fff}
.btn-org:hover {} 
.btn-pink { background:#FC6261; color:#fff}
.btn-pink:hover {} 
.btn-purple { background:#8284F6; color:#fff}
.btn-purple:hover {} 
.btn-blueLine { border:1px solid #2F65FC; color:#2F65FC; background:#ffffff}
.btn-blueLine.active{background:#2F65FC; color:#fff}
.btn-blueLine:hover {background:#2F65FC; color:#fff}
.btn-blue2 { background: #007BF5; border-radius: 5px; color: #fff; font-family: 'Pretendard Medium'; border: none; font-size: 1rem; cursor: pointer; transition: all .2s; padding: 5px 15px; font-weight: normal; } 
.btn-full { width: 100%; padding: 5px 0; text-align: center } 
.btn-modify {border-radius: 2px; width: 25px; height: 25px; cursor: pointer; background: url(../../../../images/ygpa/com/cmm/edit.png) no-repeat center; background-size: 25px 25px}
.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;*/
	background:#F94054 ;
	color:#fff
}

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

.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;*/
	background:#007BF5;
	color:#fff
}

/*.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: #aaaaaa;
	border-radius: 5px;
	color: #fff;
	border: none;
	font-size: .875rem;
	cursor: pointer;
	transition: all .2s;
	border:2px solid transparent;*/
	background:#aaaaaa;
	color:#fff
}
.btn-sqr{width:24px; height:24px; /*border:1px solid #aaaaaa;*/ color:#767676; text-align:center; line-height:24px; display:block; border-radius:2px; box-sizing:border-box; background-position:center center;}
.btn-sqr-mid{width:30px; height:30px; line-height:30px; display:block}
.icon-plus{background-image:url(../../../../images/ygpa/com/cmm/btn_plus.png); background-repeat:no-repeat; background-size:24px 24px;}
.icon-minus{background-image:url(../../../../images/ygpa/com/cmm/btn_minus.png); background-repeat:no-repeat; background-size:24px 24px;}
.icon-multiplication{background-image:url(../../../../images/ygpa/com/cmm/btn_multiplication.png); background-repeat:no-repeat; background-size:24px 24px;}
.icon-division{background-image:url(../../../../images/ygpa/com/cmm/btn_division.png); background-repeat:no-repeat; background-size:24px 24px;}
.icon-pl_l{background-image:url(../../../../images/ygpa/com/cmm/btn_pl_l.png); background-repeat:no-repeat; background-size:24px 24px;}
.icon-pl_r{background-image:url(../../../../images/ygpa/com/cmm/btn_pl_r.png); background-repeat:no-repeat; background-size:24px 24px;}
/*--------------------------토글----------------------------*/
.switch { position: relative; display: inline-block; width: 55px; height: 28px; 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: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } 
input:checked+.slider { background-color: #007BF5; } 
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: flex; justify-content: center; } 
#paging>ul>li { width: 30px; height: 30px; line-height: 29px; text-align: center; background-color: #fff; border: 1px solid #43C3864D; margin-left:-1px} 
#paging>ul>li.prev {border-radius: 5px 0px 0px 5px}
#paging>ul>li.next {border-radius: 0px 5px 5px 0px}
#paging>ul>li>a { display: inline-block; width: 100%; height: 100%; color: #279E77; font-size: .875rem; } 
#paging>ul>li.on { background-color: #279E77 } 
#paging>ul>li.on a {color: #fff}
#boxWrap { width: 100%; position: relative; padding: 20px 40px 40px; }

.box {position: relative; background: #FFF; border:1px solid #F1F1F5;  border-radius: 6px; padding: 20px; /* box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.02); */ }

/* 공통 레이아웃 */
.inner-con{width:100%; max-width:1640px; box-sizing: border-box; padding: 0 20px; margin: 0 auto;}

/* --------------------------header------------------------- */
header{position:relative}
.logo{background:url('../../../../images/ygpa/com/cmm/logo_on.png') center no-repeat #ffffff; background-size:175px 25px; width:175px; height:60px; cursor: pointer}
.header-top .r-top{font-size:.75rem}
.header-top .r-top .btn-login{display:flex; flex-direction:row; align-items:center}
.header-top .r-top .btn-login:before{content:""; display:block; background:url('../../../../images/ygpa/com/cmm/icon_login.png') center no-repeat #ffffff; background-size:10px 12px; width:10px; height:12px; margin-right:5px}
.header-top .r-top .btn-login:after{content:""; width: 1px; height:10px; background:#DADADA; margin:0 6px;}
.header-top .r-top .btn-sitemap{margin-left:20px; display:flex; align-items:center; border:1px solid #1D7759; color:#1D7759; height:28px; padding:5px 14px; border-radius:15px}
.header-top .r-top .btn-sitemap i{width:10px; height:1px; display:block; border-radius:3px; background-color:#1D7759; margin-right:5px}
.header-top .r-top .btn-sitemap i:before, .header-top .r-top .btn-sitemap i:after{content:""; width:10px; height:1px; display:block; border-radius:3px; background-color:#1D7759;}
.header-top .r-top .btn-sitemap i:before{margin-top:-4px}
.header-top .r-top .btn-sitemap i:after{margin-top:7px}
.header-top{width:100%; background:#ffffff;}
.page-tlt{background:#34433F; width: 100%; height:90px; padding-top:20px}
.page-tlt h2{font-size:1.25rem; color: #ffffff}
.page-tlt ul{display:flex; align-items:center; margin-top:3px}
.page-tlt ul li{color: #A4AC9C; font-size:.875rem; display:flex; align-items:center; cursor: default; font-weight:300}
.page-tlt ul li:after{content:"›"; display:block; margin:0 5px; font-size:1.2rem; margin-top:-3px}
.page-tlt ul li:last-child:after{display:none}
.unit-wrap label{color:#ffffff; font-size:12px}
.unit-wrap .unit-box{width:90px; height:30px; background:url('../../../../images/ygpa/com/cmm/selectDownArrowGray.png') right 10px center no-repeat #ffffff; border-radius:15px; border:1px solid #F1F1F5; color:#767676; margin-left:10px 	}

.dimmed { position: fixed; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .4); z-index: 1; display: none; } 
.dimmed.active { display: block } 
nav:after { content: ''; position: fixed; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .4); z-index: 1; display: none; }

#container { display:flex; } 
#contents { width:calc(100% - 60px); position:relative; margin-left:auto } 
.container{position:relative; top:-25px}

.moTop{display:none}
.mBurger {position: absolute; right: 20px; top: 13px; z-index: 100; display: none;  width: 30px; height: 30px; text-align: right; display: none; z-index:99; cursor:pointer;} 
.mBurger>div { width: 30px; height: 3px; border-radius:10px; background-color: #1B2750; margin: 0 auto; position:absolute; transition: all .25s; right:0} 
.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); } 
.mBurger>div.active{background-color:#ffffff}
.mBurger:hover>div:nth-child(2) {width:20px} 
.mBurger:hover>div:nth-child(3) {width:25px} 
.mBurger:hover>div.active:nth-child(3) {width:30px} 

h1 a { display: inline-block; width: 100%; height: 100%; line-height: 60px; } 
h1 img { width: 120px; display: inline-block; vertical-align: middle; } 

.topBar { position: fixed; top: 0; left: 0; margin-bottom: 40px; display: flex; height: 60px; width: 100%; justify-content: space-between; align-items: center; background-color: #fff; padding: 0px 40px 0px 150px; z-index: 9; } 
.topBar>h2 { font-size: 1.5rem; font-weight: bold } 
.topRightBox { 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/ygpa/com/cmm/search.png'); background-repeat: no-repeat; background-position: 7px center; padding-left: 37px !important; margin-right: 20px; font-family: 'Pretendard Regular'; } 

.option { width: 150px; position: absolute; top: 35px; right: 0px; background: #FFF; border-radius: 5px; text-align: center}
.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; } 

.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/ygpa/com/boxDetail.png') no-repeat center #efefef; background-size: 15px 15px } 

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

#map1 { width: 100%; height: 100%; } 

/* 모달 */
.modal, #nodeModal, #MD_0002_0001, #MD_0002_0002, #MD_0002_0003, #MD_0002_0004, #MD_0002_0005, #MD_0002_0006, #MD_0002_0007, #MD_0002_0008, #MD_0002_0009, #MD_0002_0010, #MD_0002_0011, #MD_0002_0012, #MD_0002_0013, #MD_0002_0014, #MD_0002_0015, #MD_0002_0016, #MD_0002_0017, #MD_0002_0018, #MD_0002_0019, #MD_0002_0020, #MD_0002_0021, #MD_0003_0001, #MD_0003_0002, #MD_0002_0022{ display: none; } 
.modal.on, #nodeModal.on, #MD_0002_0001.on, #MD_0002_0002.on, #MD_0002_0003.on, #MD_0002_0004.on, #MD_0002_0005.on, #MD_0002_0006.on, #MD_0002_0007.on, #MD_0002_0008.on, #MD_0002_0009.on, #MD_0002_0010.on, #MD_0002_0011.on, #MD_0002_0012.on, #MD_0002_0013.on, #MD_0002_0014.on, #MD_0002_0015.on, #MD_0002_0016.on, #MD_0002_0017.on, #MD_0002_0018.on, #MD_0002_0019.on, #MD_0002_0020.on, #MD_0002_0021.on, #MD_0003_0001.on, #MD_0003_0002.on, #MD_0002_0022.on { display: block } 
.modal-container { position: fixed; z-index: 100; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, .4); 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%; min-width: 450px; 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 } 
.modal-content.type-s{padding: 20px; border-radius: 5px;}
#nodeModal, #MD_0002_0001, #MD_0002_0002, #MD_0002_0003, #MD_0002_0004, #MD_0002_0005, #MD_0002_0006, #MD_0002_0007, #MD_0002_0008, #MD_0002_0009, #MD_0002_0010, #MD_0002_0011, #MD_0002_0012, #MD_0002_0013, #MD_0002_0014, #MD_0002_0015, #MD_0002_0016, #MD_0002_0017, #MD_0002_0018, #MD_0002_0019, #MD_0002_0020, #MD_0002_0021, #MD_0003_0001, #MD_0003_0002, #MD_0002_0022 { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4) }
.modalWrap {width: 1240px;  height: 700px; position: fixed; z-index: 9999; top: 50%; left: 50%; transform:translate(-50%, -50%)}
#nodeModal > .modalWrap, #MD_0002_0001 > .modalWrap, #MD_0002_0002 > .modalWrap, #MD_0002_0003 > .modalWrap, #MD_0002_0004 > .modalWrap, #MD_0002_0005 > .modalWrap, #MD_0002_0006 > .modalWrap, #MD_0002_0007 > .modalWrap, #MD_0002_0008 > .modalWrap, #MD_0002_0009 > .modalWrap, #MD_0002_0010 > .modalWrap, #MD_0002_0011 > .modalWrap, #MD_0002_0012 > .modalWrap, #MD_0002_0013 > .modalWrap, #MD_0002_0014 > .modalWrap, #MD_0002_0015 > .modalWrap, #MD_0002_0016 > .modalWrap, #MD_0002_0017 > .modalWrap, #MD_0002_0018 > .modalWrap, #MD_0002_0019 > .modalWrap, #MD_0002_0020 > .modalWrap, #MD_0002_0021 > .modalWrap, #MD_0003_0001 > .modalWrap, #MD_0003_0002 > .modalWrap, #MD_0002_0022 > .modalWrap { height: 920px }
#MD_0002_0013 > .modalWrap { height: 820px }
.modal-node {background-color: #FFF; width: 100%; height: 100%; overflow-y: scroll; position: absolute; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.15); border-radius: 6px; padding: 90px 20px 0px}
.modal-node > div.bt-line { padding-bottom: 10px; border-bottom: 1px solid #EFEFEF; align-items: center; background-color: #FFF; position: fixed; top: 0; left:0; padding: 20px 20px 10px; z-index: 99; width: 100%; border-top-left-radius: 6px; border-top-right-radius: 6px } 
.multiSelectBox {align-items: center; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #EFEFEF; }
.fromBox, .toBox {height: 200px; width: 40%; background: #FFF; font-size:.75rem}
.fromBox > option, .toBox > option {padding: 5px}
.multiSelectBox button {width: 35px; height: 35px; border-radius: 50%; background-color: #fff; border: 1px solid #469F74; font-size: 1.5rem; color: #469F74; margin: 5px}
.multiSelectBox button:hover {background-color: #469F74; color: #FFF}
.addCondition > .btnWrap button {width: calc(50% - 5px)}
.colBox {margin-top: 10px}
.colSelect {display: flex; align-items: center}
.colSelect > select {width: 160px}
.colSelect > div {display: flex; align-items: center; flex-grow:1}
.colSelect > div > * {margin-left: 10px; flex-grow:1}
.colSelect > div > *:first-child, .colSelect > div > .dateStart {margin-left: 0px;}
.colSelect .fixTxt{width:80px; flex-shrink:0; flex-grow:0; text-align:right}
.colSelect .dateDiv{width:20px; flex-shrink:0; flex-grow:0; text-align:center}
#inequalitySign {width: 50px}
.dataNodeBtn { display: flex; justify-content: flex-end; position: absolute; bottom: 20px; right: 20px }
#preView { height: 60px; background-color: #EFEFEF }

/*nodeModal*/
.nodeM-select{flex-grow:1}
.nodeM-table{width:100%; margin-top:-10px; flex-shrink:0; background:#f7f9fc; height:100%; padding:10px 12px}
.nodeM-table .rspTable{max-height:222px}

@-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-box{position: absolute; right: 20px; top: 10px;}
.type-s .close-modal-box{top: 30px;right: 50px;}
.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/ygpa/com/cmm/btn_close.png') no-repeat center #cccccc; background-size: 20px 20px } 
.close-modal:hover,
.close-modal:focus { color: #000; text-decoration: none; cursor: pointer; } 
/* //모달 */

/* --------------------------서브공통사항-------------------------- */
.topinfo_box { display: flex; justify-content: space-between } 
.topinfo_box .topinfo_cts { width:25%; margin-right:20px; border: 1px solid #bfe6d3; background:#ffffff; border-radius:5px; padding: 20px;} 
.topinfo_box .topinfo_cts:last-child{margin-right:0}
.topinfo_box .topinfo_cts .tlt {text-align: left; font-size: .875rem; color:#7C8678 } 
.topinfo_box .topinfo_cts .info { display: flex; justify-content: space-between; align-items:flex-end} 
.topinfo_box .topinfo_cts .info .qty { font-size: 1.25rem; font-weight: 500 } 
.topinfo_box .topinfo_cts .info .rdc,
.topinfo_box .topinfo_cts .info .ics { font-size: 1.25rem; font-weight: 500; padding-left: 5px; display: flex; align-items: center } 
.topinfo_box .topinfo_cts .info .ics { color: #FF2424; } 
.topinfo_box .topinfo_cts .info .rdc { color: #007BF5; } 
.topinfo_box .topinfo_cts .info .rdc:after { content: ""; display: inline-block; width: 18px; height: 18px; margin-left: 5px; background: url('../../../../images/ygpa/com/cmm/downArrow.png') no-repeat center; background-size: 18px 18px } 
.topinfo_box .topinfo_cts .info .ics:after { content: ""; display: inline-block; width: 18px; height: 18px; margin-left: 5px; background: url('../../../../images/ygpa/com/cmm/upArrow.png') no-repeat center; background-size: 18px 18px } 
.topinfo_box .topinfo_cts .info .r_vrat { position: relative; display: flex; align-items: flex-end; text-align:right; flex-wrap:wrap; justify-content:flex-end} 
.topinfo_box .topinfo_cts .info .r_vrat p:first-child{margin-bottom:3px}
.topinfo_box .topinfo_cts .info .r_vrat>button { } 
.topinfo_box .topinfo_cts .info .r_vrat>div.info { display: flex; align-items: flex-end; text-align:right; flex-wrap:wrap; justify-content:flex-end} 
.topinfo_box .topinfo_cts .info .r_vrat:hover .infoMore,
.topinfo_box .topinfo_cts .info .r_vrat:focus .infoMore { display: block }

.infoMore { display: none; position: absolute; top: 28px; right: 0; width: 270px; z-index: 2; padding: 10px; font-size: .875rem } 
.infoMore>div { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #DDDDDD } 
.infoMore>div:last-child { border-bottom: none } 
.infoMore .sTlt { font-size: 1rem; padding-bottom: 5px; font-weight: 500 }

.weather-info{display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; justify-content:space-around}
.weather-info dl{position:relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; width:20%; align-items:center}
.weather-info dl dt{display:block; width:60px; height:60px; border-radius:50%}
.weather-info dl dd{font-size:.825rem; color:#aaaaaa; margin-left: 10px}
.weather-info dl dd span{display:block; font-size:1rem; padding-top:5px; color:#222222}
.weather-info dl dd span > span{font-size:.875rem; display:inline-block}

.weather-info dl.direcition dt{background:url('../../../../images/ygpa/com/cmm/windDirection.png') no-repeat center #ecf9f3; background-size:60px 60px}
.weather-info dl.temp dt{background:url('../../../../images/ygpa/com/cmm/temp.png') no-repeat center #ecf9f3; background-size:60px 60px}
.weather-info dl.speed dt{background:url('../../../../images/ygpa/com/cmm/windSpeed.png') no-repeat center #ecf9f3; background-size:60px 60px}
.weather-info dl.rainfall dt{background:url('../../../../images/ygpa/com/cmm/precipitation.png') no-repeat center #ecf9f3; background-size:60px 60px}
.weather-info dl.maxWave dt{background:url('../../../../images/ygpa/com/cmm/maximumWaveHeight.png') no-repeat center #ecf9f3; background-size:60px 60px}
.weather-info dl.wave dt{background:url('../../../../images/ygpa/com/cmm/significanceWaveHeight.png') no-repeat center #ecf9f3; background-size:60px 60px}
.weather-info dl.atmosPrs dt{background:url('../../../../images/ygpa/com/cmm/icon_atmos-prs.png') no-repeat center #ecf9f3; background-size:60px 60px}
.weather-info dl.heightWater dt{background:url('../../../../images/ygpa/com/cmm/icon_height-water.png') no-repeat center #ecf9f3; background-size:60px 60px}
.weather-info dl.waterTemp dt{background:url('../../../../images/ygpa/com/cmm/icon_water-temp.png') no-repeat center #ecf9f3; background-size:60px 60px}
.weather-info dl.humidity dt{background:url('../../../../images/ygpa/com/cmm/icon_humidity.png') no-repeat center #ecf9f3; background-size:60px 60px}
.weather-info dl.salt dt{background:url('../../../../images/ygpa/com/cmm/icon_salt.png') no-repeat center #ecf9f3; background-size:60px 60px}
.weather-info dl.visibility dt{background:url('../../../../images/ygpa/com/cmm/visibility.png') no-repeat center #ecf9f3; background-size:60px 60px}
  
/* --------------------------//서브공통사항-------------------------- */

.contentItem-btn { position: absolute; right: 20px; top: 29px }
.contentItem-btn>button{background:#F1F1F5; cursor: pointer; width: 24px; height: 24px; border: none; border-radius: 5px; display: flex; justify-content: center; align-items: center}
/* .contentItem-btn>button:hover { background-color: #ccc; }  */
.contentItem-btn>button:after { content: ''; display: block; width: 24px; height: 24px; background: url(../../../../images/ygpa/com/cmm/icon-open-arrow.png) center 50% no-repeat; background-size: 12px 12px; transform: rotate(0); transform-origin: center; } 
.contents-container.close .contentItem-btn>button:after { transform: rotate(180deg) } 
.contentsItem { padding: 0; overflow: hidden; max-height: fit-content } 
.contents-container.close .contentsItem { max-height: 0 }
.contentItem-btn.topNone{top:0; right:0}

.chartTop-info { display: flex; justify-content: space-between; color: #767676; width: 100%; } 
.box-title { position: relative } 
.popupView-btn { position: absolute; right: 30px; top: 9px; }
.popupView-btn>button {background: #ECF9F3; cursor: pointer; width: 24px; height: 24px; border: none; border-radius: 5px; display: flex; justify-content: center; align-items: center }  
.popupView-btn>button:after { content: ''; display: block; width: 24px; height: 24px; background: url(../../../../images/ygpa/com/cmm/icon-zoom-green.png) center 50% no-repeat; background-size: 12px 12px; } 
.circle-items { width: 90px; height: 90px; border-radius: 50%; color: #ffffff; display: flex; align-items: center; justify-content: center } 
.grp_currentInfo { height: 25px; line-height: 25px; color: #767676; text-align: center; display: flex; flex-wrap: nowrap; border-radius: 5px; overflow: hidden; font-size:.875rem} 
.grp_currentInfo > div { flex-grow: 1; display: flex; align-items: center } 
.grp_currentInfo > div > span { display: inline-block; width: 15px; height: 2px; border-radius: 5px; margin-right: 10px }

.boxTypeTitle { position: relative; }
.boxTypeTitle .popupView-btn { right: 40px; top: -35px }
.boxTypeTitle .contentItem-btn { right: 10px; top: -35px }

.ics_sty2 { color: #FF2424; } 
.ics_sty2:before { content: ""; display: inline-block; width: 0px; height: 0px; margin: 6px 3px 0 0; border-bottom: 6px solid #FF2424; border-left: 4px solid transparent; border-right: 4px solid transparent; } 
.rdc_sty2 { color: #007BF5; } 
.rdc_sty2:before { content: ""; display: inline-block; width: 0px; height: 0px; margin: 6px 3px 0 0; border-top: 6px solid #007BF5; border-left: 4px solid transparent; border-right: 4px solid transparent; } 

.list-txt { position: relative; padding-left: 40px; font-size: 1rem } 
.list-txt>.date { display: block } 
.list-txt:before { content: ""; width: 30px; height: 30px; display: block; position: absolute; left: 0; top: -4px; background: url('../../../../images/ygpa/com/cmm/alarm.png') no-repeat center; background-size: 18px 18px } 
.list-txt>b { font-weight: normal } 

.box-line { background: #FFF; border: 1px solid #DDD; box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.06); padding: 0px; position: relative; height: 60px } 
.box-item-gray { border: 1px solid #CCCCCC; width: 100% } 
.box-item-gray dt { background: #EFEFEF; height: 40px; line-height: 38px; padding: 0 20px; border-bottom: 1px solid #CCCCCC; } 
.box-item-gray dd { padding: 15px; font-size:.875rem } 

table.line-none th { border-left: none } 
table.line-none td { border-left: none } 

.pointer { border-radius: 5px; font-size: 1rem; padding: 5px 10px; position: absolute; display: inline-block; } 

/*datepicker*/
.datepicker{max-width:120px;}
.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 } 

/*form*/
.formInput div.form-item{  display:flex; align-items:center; padding:10px 0;}
.formInput div.form-item input, .formInput div.form-item select, .formInput div.form-item textarea{width:100%}
h3.bt-line{padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #EFEFEF}

/*0309추가*/
.box-top-search{display:flex; align-items:center; justify-content:center; flex-wrap:wrap}
.box-top-search .search-box{display:flex; align-items:center}
.box-top-search .search-box label{flex-shrink:0; padding-right:10px}
.box-top-search .search-box .search-input{max-width:250px; width:100%; position:relative; overflow:hidden}
.box-top-search .search-box input[type="text"], .box-top-search .search-box select{max-width:250px; min-width:100px; width:100%; position:relative}
.box-top-search .search-box input[type="text"].detail { max-width: 300px; width: 300px; }
.box-top-search .search-box .search-input > input{ border: none; height: auto; width: calc(100% - 63px);}
.box-top-search .search-box .search-input > button{position:absolute; right:-1px; top:-1px; width: 60px; font-size:.875rem; height: 30px; border-radius: 2px; line-height:30px; color:#ffffff; background:#727272}
select.select-sm{min-width:80px}


/*파일찾기*/
.mds-search { flex-basis:200px; flex-grow:1; max-width:250px } 
.mds-search.detail { max-width: 410px }
.mds-search.filebox-wrap {max-width:337px} 
.filebox { display:flex; align-items:center } 
.filebox .upload-name { display: inline-block; height: 30px; padding: 0 10px; vertical-align: middle; border: 1px solid #dddddd; color: #999999; border-radius:2px } 
.box-top-search .search-box .filebox label { display: inline-block; padding: 0 20px; line-height:30px; color: #fff; background-color: #208453; cursor: pointer; height: 30px; margin-left: 10px; border-radius:2px; font-size: .875rem } 
.filebox input[type="file"] { position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0; }

/* ------------------------------------------------반응형-------------------------------------------- */
@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 } 
 }

@media screen and (max-width:1200px){
  .moTop{display:block; width:100%; position:relative; background:#ffffff; height: 60px; width:100%; border-bottom:1px solid #efefef}
  .moTop .logo{background:url('../../../../images/ygpa/com/cmm/logo_on.png') center no-repeat #ffffff; background-size:175px 25px; width:175px; height:60px; margin-left:20px}
  .mBurger { display: block } 
  #contents{width: 100%}
  #boxWrap{padding:20px}
  nav.full-active:after { display: block; } 
  nav.full-active { left: 0; width: 80%; } 
  nav.full-active>#gnb { width: 100%; } 
  /* nav .navText{opacity:1; padding-left:20px} */
  nav .logo{background:url('../../../../images/ygpa/com/cmm/logo_on.png') no-repeat #ffffff; background-size:175px 25px; background-position:20px 50%;}
}

/* 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 }  
  /* header:hover { overflow: unset; }  */
  #gnb>li { margin: 10px 0px; position: relative; height: 40px; } 
  .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 70px; 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 } 
  /* 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; } 
  .topBar { padding: 0px 20px 0px 70px; margin-bottom: 20px; } 
  h2 { font-size: 1.3rem; } 
  .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%; }
  table.tit-size th { width: auto;}
 }

/* 모바일 세로 (해상도 ~ 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 { position: relative; left: 190px; top: -50px; padding: 10px; background-color: #1B2750; } 
  .dep2>li>a { padding: 0px 0px 0px 10px; } 
  h1 { left: 15px; } 
  h1 img { width: 30px; } 
  h1 a { line-height: 60px; } 
  .topBar { padding: 0px 20px 0px 70px; 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%; } 
 }

/* 23-03-22 추가 */
.topinfo_boxType2 { display: flex; justify-content: space-between } 
.topinfo_boxType2 .topinfo_cts { display:flex; flex-wrap:nowrap; width:33.33%; margin-right:20px; background:#ffffff; border-radius:5px; padding: 20px;} 
.topinfo_boxType2 .topinfo_cts:last-child{margin-right:0}
.topinfo_boxType2 .topinfo_cts .info .tlt {font-size: .875rem; color:#787B86 }
.topinfo_boxType2 .topinfo_cts .info .data {font-size: 1.25rem; color:#222222 }
.topinfo_boxType2 .topinfo_cts .info {width:50%; position:relative; text-align:center} 
.topinfo_boxType2 .topinfo_cts .info:first-child:after{content:""; width:1px; height:100%; position:absolute; right:0; top:0; display:block; background:#EFEFEF}
.topinfo_boxType2 .topinfo_cts:first-child{border:1px solid rgba(67, 103, 195, 0.3)}
.topinfo_boxType2 .topinfo_cts:nth-child(2){border:1px solid rgba(195, 67, 67, 0.3)}
.topinfo_boxType2 .topinfo_cts:last-child{border:1px solid rgba(67, 195, 134, 0.3)}

.btLine{border-bottom:1px solid #efefef; padding-bottom:20px}
.box-con{position:relative}

/* 모달 */
#quantity-year table, #quantity-month table {min-width: 1250px}
#quantity-month .currentStatus {padding-top: 10px; border-top: 1px solid #efefef; }
#quantity-year .chartWrap, #quantity-month .chartWrap {display: flex; justify-content: space-between; width: 100%;}
#quantity-month .chartWrap > div {width: calc(25% - 7.5px); padding: 20px; border: 1px solid #bfe6d3; border-radius: 2px}
#quantity-year .chartWrap > div {width: calc(20% - 8px); padding: 20px; border: 1px solid #bfe6d3; border-radius: 2px}


#vesselEntry-year .chartWrap {width: 1250px; display: flex; justify-content: space-between; flex-wrap: wrap;}
#vesselEntry-year .chartWrap > div {width: calc(33.33% - 6.66px); padding: 20px; border: 1px solid #bfe6d3; border-radius: 2px; margin-top: 10px}

#volumeFlow-year .modal-content{min-width:1200px}
#volumeFlow-year .half-box > div{position:relative}
#volumeFlow-year .half-box > div:first-child:after{content:""; height:100%; width:1px; background:#efefef; position:absolute; right:-10px; top:0}

/*23-04-13추가*/
.c-darkgray{color:#6a6a6a;}
table.th_line th {border-left: 1px solid rgba(255,255,255,.4); border-bottom: 1px solid rgba(255,255,255,.4);}

/*loader*/
.lds-ring{display:none; position:fixed; width:100%; height:100%;  left:0; top:0; bottom:0; right:0; z-index:999; }
.modal .lds-ring {display:none; position: absolute; width:100%; height:100%;  left:0; top:0; bottom:0; right:0; z-index:999;}
.lds-ring .lds-ring-item { position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index:100;  }
.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)}
.modal .lds-ring:after{content:""; display:block; position: absolute; width:100%; left:0; top:0; bottom:0; right:0; height:100%; 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);
  }
}
.modal-loader-wrap { position: absolute; min-height: 500px; width: 830px; bottom:10px; left: 10px; }

/*툴팁 style*/
.ui-tooltip {padding: 5px 20px;	color: #ffffff; border-radius: 6px; background:#767676; border:1px solid #dadada; box-shadow:1px 3px 5px rgba(0,0,0,.07); line-height:1.3; font-size:13px}
.ui-tooltip:after{content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-5px; display:block; height: 0;border-top: 7px solid;  border-left: 5px solid rgba(0, 0, 0, 0); border-right: 5px solid rgba(0, 0, 0, 0); color: #767676;}
.basic-tooltip{position:relative; display: inline-block; cursor:pointer;}
.basic-tooltip .tooltiptext { display: none; width: max-content; font-size:.875rem; font-weight:300; max-width: 400px; background-color: #34433F; color: #fff; text-align: center; border-radius: 6px; padding: 5px 10px; position: absolute;z-index: 1; bottom:150%; left: 50%; transform:translateX(-50%); }
.basic-tooltip:hover .tooltiptext { display: block; bottom:130%; }
.basic-tooltip .tooltiptext::after { content: " "; position: absolute; top: 100%;  left: 50%;margin-left: -5px; border-width: 5px;border-style: solid; border-color: #34433F transparent transparent transparent;} 
.modal-tooltip:after { content: "i"; font-size: .7rem; color: #DDD; border: 1px solid #DDD; border-radius: 50%; width: 15px; height: 15px; display: inline-block; text-align: center; margin-left: 5px } 
/*툴팁 오른쪽으로 배치*/
.basic-tooltip .tooltiptext.rightTt{bottom:auto; left:calc(100% + 15px); top: -5px; transform:inherit;}
.basic-tooltip:hover .tooltiptext.rightTt{bottom:auto; left:calc(100% + 5px)}
.basic-tooltip .tooltiptext.rightTt::after{top: 10px;  left: -5px;margin-left: -5px; border-width: 5px; border-color: transparent #34433F transparent transparent;}

.column-tooltip{position:relative}
.column-tooltip .tooltiptext { display: none; width: max-content; font-size:.875rem; font-weight:300; max-width: 400px; background-color: #34433F; color: #fff; text-align: center; border-radius: 6px; padding: 5px 10px; position: absolute;z-index: 100; bottom:150%; left: 50%; transform:translateX(-50%); }
.column-tooltip:hover .tooltiptext { display: block; bottom:90%; }
.column-tooltip .tooltiptext::after { content: " "; position: absolute; top: 100%;  left: 50%;margin-left: -5px; border-width: 5px;border-style: solid; border-color: #34433F transparent transparent transparent;} 

.addDatabaseBtn {min-width: 50px; padding: 7px 0px}
#groupSelect > div > div > div:nth-child(2) {display: flex; justify-content: center; align-items: center}
#groupSelect > div > div > button {position: relative; left: 100%; transform: translateX(-100%);}

/*추가 2023-05-09 */
.cts-box{padding:10px; background:#f1f3f0; border:1px solid #eaeaea;}
.input_xs{width:50px}
.input_s{width:100px}
.input_mid{width:200px}

/*글줄임 툴팁*/
.ellipsis{position: relative; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; word-break:break-all}
.selected .ellipsis{text-overflow:initial; white-space:wrap; overflow:auto}
/*top버튼*/
.top_btn{position:fixed; z-index:999; right:15px; bottom:15px; width:40px; height:40px; background:#cccc; border-radius:20px; box-shadow:1px 5px 5px rgba(0,0,0,.06); border:0; background:url('../../../../images/ygpa/com/cmm/btn-top.png') no-repeat center center #ECF9F3}
.top_btn:hover{box-shadow:1px 5px 10px rgba(0,0,0,.1); background:url('../../../../images/ygpa/com/cmm/btn-top.png') no-repeat center center #ffffff}
.top_btn:active{top:unset}

/*스크롤상단고정*/
.box-search-fixed.fixed{position:fixed; top:0; left:50%; transform:translateX(-50%); width:100%; max-width:1600px; padding:10px; z-index:998; box-shadow:1px 5px 5px rgba(0,0,0,.06)}
.box-search-fixed.fixed .box-top-search{padding-right:140px }
#mdsChangeBtn.fixed{position:fixed; top:10px; left:calc(50% + 710px); z-index:999; transform:translate(-50%);  z-index:999}

/*테이블 haad 고정*/
.table-sticky{border-collapse:separate; border-spacing:0}
.table-sticky thead{position:sticky; top:0; z-index:99;}
.table-sticky thead tr:first-child th{border-top:1px solid #eaeaea}
.table-sticky th, table.tableSty4.table-sticky th{border-top:0; border-right:0}
.table-sticky td{border-right:0}

/* 통계 lnb */
#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: 532.33px; text-align:center; font-size:1rem}
#lnb>ul>li.nav-item .dropdown { top: 40px }

.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:#279E77}
#lnb>ul>li.nav-item:hover>.nav-link{color:#ffffff}
#lnb>ul>li.nav-item.active{background:#279E77}
#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; } 

.tlt-dot{position:relative; padding-left:10px; font-size:1rem; 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%}

.equal73, .equalParts  {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap:wrap;  justify-content:space-between}
.equal73 > div:first-child { width: calc(70% - 5px); }
.equal73 > div:last-child { width: calc(30% - 5px); }
.equalParts > div { width: calc(33.33% - 6.66px) }

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

.tui-grid-content-area { z-index: 1; }
.tui-grid-layer-state { z-index: 1 !important; }

.detailShipLegend {margin-top: 3px; background: #43B61A; display: inline-block; height:15px; position: absolute; width: 10px; z-index: 9}
.detailShipLegend:before {border-bottom: 6px solid #43B61A; border-left: 5px solid transparent; border-right: 5px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -5.5px; width: 0;}
.stopShipLegend {margin-top: 3px; background: #FF2424; display: inline-block; height:10px; position: absolute; width: 10px; border-radius: 50%; z-index: 9}

.datepicker-cell { position: relative; }
.tui-datepicker { right: -34px; top: 15px }
.tui-datepicker-input.tui-has-focus { height: 30px }

#container-flow-chart { height: calc(100% - 37px ) }
#container-flow-chart > .noData { height: 100% }


/* 반응형 */
@media all and (max-width:479px) {
	.logo { width : 130px; background-size: 130px 19px; }
	.page-tlt h2 { font-size: 1.1rem }
	.page-tlt ul li { font-size: .75rem }
	.box { padding: 15px }
	.popupView-btn { top: 10px; left: 100%; transform: translateX(-55px) }
	.contentItem-btn { top: 25px; right: 15px }
	.txt_xxs { font-size: .7rem }
	.txt_xs { font-size: .75rem }
	.txt_s { font-size: .8rem }
	.txt_tlt { flex-wrap: wrap; }
	.m-direction, .equal73, .equalParts { flex-direction: column }
	.m-direction > div, .equal73 > div, .equalParts > div { width: 100% !important; }
	.equal73 > div:not(div:first-child), .equalParts > div:not(div:first-child) { margin-top: 10px }
	.chartTop-info > p { font-size: .7rem }
	
	.m-tableWrap { width: 100%; overflow-x: auto; }
	.m-tableWrap > table { width: 900px; }
	
	.searchBar.m-direction > div { margin: 0px 0px 10px !important; flex-wrap: wrap; }
	.searchBar.m-direction > div > label { width: 15%; }
	.searchBar.m-direction > div.directInput { margin: 10px 0px !important }
	.searchBar.m-direction > div.directInput > label { width: 90% }
	.searchBar.m-direction > div.directInput .tui-datetime-input { margin-top: 10px; width: 148px }
	.box.m-direction > button { margin-left: auto !important }
	.half-box > div:last-child { margin-top: 10px }
	
	.excelBtn { display: none; }
	
	.modal-content { min-width: 300px }
	
	.volumeTableInfo, .volumeTableInfo > * { font-size: .7rem }
	.volumeTableInfo > span:first-child { display: block }
}

/* 추가 */
/* 터미널 정보조회 */
.cnt-list { text-align: center; }
.cnt-list h3 { padding: 0 50px; position: relative; }
.cnt-list h3::after { content:""; position: absolute; left: calc(50% - 27px); top: -7px; width: 10px; height: 10px; background: #279E77; border-radius: 50%; }
.cnt-list .smooth { color: #279E77; }
.cnt-list .smooth::after { background: #279E77; }
.cnt-list .crowded { color: #EFA760; }
.cnt-list .crowded::after { background: #EFA760; }
.cnt-list .pileup { color: #e35b5b; }
.cnt-list .pileup::after { background: #e35b5b; }
.cnt-list ul li { padding: 5px 0 5px 25px; border-left:1px solid #ddd; font-weight: normal; }

.boxWrap { padding: 20px !important; }
.flex-between #gridBerthSchedule.table-width { width:100%;}
.flex-between #gridVesselStatus.table-width { width:100%;}

/* 대시보드 > 터미널 현황 */
.tit_btn { font-size: 0; margin: 4px 0 0 14px; }
.tit_btn button {
	background: #ccc;
	padding: 7px 10px;
	margin: 0 5px;
	min-width:124px;
	color: #fff;
}
.tit_btn button:hover {
	background: #899791;
}
.tit_btn button.on {
	background: #899791;
}



.flex-between #gridVesselLoadList.table-width, #gridCllYard.table-width, #gridNotGateIn.table-width, #gridOverGateIn.table-width, #gridGateIO.table-width,
			#gridGateIOStatus.table-width, #gridOverGateIn.table-width, #gridOverDayStatus.table-width, #gridContainerLoc.table-width, #gridBookingList.table-width,
			#gridTerminalShipCode.table-width, #gridCopinoList.table-width, #gridDangerContainerList.table-width, #gridTmlCongestionStatus.table-width,
			#gridAnnouncement.table-width
			 { width:100%;}


.searchBar_kitl{ gap:0px !important;}
.searchBar_kitl > div{flex-grow:1}
.searchBar_kitl label{ min-width: 60px; flex-shrink:0; padding-right:5px; display:inline-block; text-align:right; margin-left: 10px;}
.searchBar_kitl .flex-row label:first-child { margin-left:0; }
.searchBar_kitl *{margin:0}
.searchBar_kitl input{max-width:150px; min-width: 60px; width:100%; }
.searchBar_kitl .widthAuto{width:auto}
.searchBar_kitl>button { position: static; }

@media screen and (max-width:1200px){
	.searchBar_kitl .flex-row {
	    overflow: scroll;
	    max-width: 60%;
	}
}
@media all and (max-width:479px) {
	.tit_btn {width: 100%;text-align: center;margin: 10px 0;}
	.tit_btn button {
		min-width:auto;
		text-align: center;
		color: #fff;
	}
}