@charset "UTF-8";

.unitTxt {font-size: .825rem; display: block;}
.update {text-align: right}

.circumstance { display: flex; justify-content: center; padding: 15px 0px; background-color: #1D7759; border-radius: 6px; color: #FFF }
.circumstance > .info { display: flex; justify-content: space-between; align-items: center; border-right: 1px solid #348B61; } 
.circumstance > .info:first-child { padding-right: 60px }
.circumstance > .info:last-child { border-right: none; padding-left: 60px }
.circumstance > .info > .ico { width: 40px; height: 40px; line-height: 40px; border-radius: 50%; background-color: #FFF; text-align: center } 
.circumstance > .info > .ico > img { width: 18px; vertical-align: middle; }
.circumstance > .info > .month, .volume > .info > .year { display: flex; align-items: center; }
.circumstance > .info .infoItem { display: flex; align-items: center }
.circumstance > .info .infoItem > p:first-child { font-size: 1rem }
.circumstance > .info .infoItem > .infoStatus { font-size: .875rem; line-height: .875rem; padding: 3px 10px; color: #FFF; border-radius: 30px; }

.rankingWrap {display: flex; justify-content: space-between; flex-wrap: wrap}
.rankingBox {width: calc(33.33% - 6.66px); border: 1px solid #bfe6d3; border-radius: 2px; padding: 20px}
.rankingBox > p {font-size: 1rem; font-weight: 500;}
.rankingBox > div {display: flex; justify-content: space-between; align-items: flex-end}
.rankingBox > div > * {width: 50%}
.rankingBox > div > p {font-size: 1rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis}
.rankingBox > div span {display: block; font-size: .825rem}
.rankingBox .entryChart {height: 79px}

#facilityUsageGrid { min-height: 384px }

.statusEntryExit .box-round-tlt { display: flex; align-items: center; justify-content: space-between; height: 40px; border-radius: 50px; padding: 0px 10px 0px 5px }
.statusEntryExit .box-round-tlt .point { width: 45px; height: 30px; display: inline-block; font-size: .875rem; text-align: center; line-height: 30px; border-radius: 50px; }
.statusEntryExit .equalParts > p { width: calc(33.33% - 3.33px) }

/*swiper slide*/
.atmospheric-info > .swiper-slide {padding:0 20px} 
.swiper-button-next, .swiper-button-prev{height:20px; width:12px; background-size:12px 20px; margin-top:0; filter:invert(25%) sepia(89%) saturate(3255%) hue-rotate(146deg) brightness(92%) contrast(81%)}
.swiper-button-next { right:5px; bottom:30px} 
.swiper-button-prev { left:5px; bottom:30px} 
.atmospheric-info>.swiper-slide>.atmospheric-items{display:flex; justify-content:space-around}

.atomsphereBox{position:relative; border-top:1px solid #EFEFEF; border-bottom:1px solid #EFEFEF; padding:10px 0px;}
.atmospheric-items>div.box-blue{border: none; border-radius:5px; background:#F7F9FC; height:75px; display:flex; width:calc(16.667% - 10px); padding:15px; flex-direction:column; justify-content:center}
.atmospheric-items>div.box-blue p:first-child{font-size:.875rem; text-align: center }
.atmospheric-items>div.box-blue p:last-child{ border-radius:4px; height: 20px; width: 70px; text-align: center; font-size:.875rem; background-color: #fff; margin: 5px auto 0px;}

.alarmWrap { display: flex; align-items: center }
.alarmTitle { background-color: #ECF9F3; width: 200px; height: 180px; padding: 20px; border-radius: 6px; display: flex; flex-direction: column; justify-content: space-between }
.alarmTitle > div > p:first-child { width: 50px; height: 20px; text-align: center; border-radius: 10px; background-color: #1D7759; color: #FFF } 
.alarmTitle > div > p:last-child { color: #1D7759; }
.alarmTitle > .circle { margin-left: auto; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; background-color: #FFF; text-align: center; }
.alarmTitle > .circle > img { width: 20px; vertical-align: middle }
.alarmList { margin-left: 40px; position: relative; }
.alarmList > .line { width: 1px; height: 70%; display: block; position: absolute; left: 2px; top: 29px; background-color: #DBDBDB; }
.list-txt { position: relative; padding-left: 20px; font-size: 1rem } 
.list-txt:before { content: ""; width: 5px; height: 5px; border-radius: 5px; display: block; position: absolute; left: 0; top: 8px; background-color: #DBDBDB } 
.list-txt > .date { color: #767676; font-size: .875rem; padding-bottom:1px} 
.list-txt>b { font-weight: normal } 

.tideBox, .seaFogBox { height: 183px }

.tide-con{display:flex; align-items:center; justify-content:space-between; flex-direction: column;}
.tide-con .tide-box{width: 100%; display:flex; height:40px}
.tide-con .tide-box .tide-tlt{width:50px; flex-shrink:0; line-height:40px; font-size:.875rem; text-align:center}
.tide-con .tide-box .tide-info{flex-grow:1; display:flex; align-items:center; justify-content:center}
.tide-con .tide-box .tide-info > *{margin:0 3px}
.tide-con .tide-box .tide-info .time { color: #767676; min-width:36px; text-align:center }
.tide-con .tide-box .tide-info .box-round-tlt { min-width: 92px; height: 35px; border-radius: 30px; display: flex; align-items: center }
.tide-con .tide-box .tide-info .point{width:20px; height:20px; display: inline-block; font-size:.75rem; text-align:center; line-height:20px; border-radius:50%; margin-right: 7px }
.tide-con .tide-box .tide-info>span{width:1px; height:15px; background:#EFEFEF; display:block}

.seaFog{display:flex; align-items:center; justify-content:center; margin-top:8px}
.seaFog dl{flex-grow:1; display:flex; align-items:center; justify-content:center; position:relative; flex-direction: column; }
.seaFog dl:last-child:after{width:0}
.seaFog dl dt{width:65px; height:50px; background:url('../../../../images/ygpa/com/seafog.png') no-repeat center / contain; text-align:center; line-height:40px; font-size:.875rem; flex-shrink:0; margin-right:10px; padding-top: 5px}


/* 반응형 */
/* 모바일  세로 (해상도 ~ 479px)*/
@media all and (max-width:479px) {
	.circumstance, .alarmWrap { flex-direction: column; }
	.circumstance > .info { flex-wrap: wrap; padding: 0px 20px !important }
	.circumstance > .info > .txt_mid { margin-right: auto; }
	.circumstance > .info > div:last-child { width: 100%; align-items: flex-start; margin: 0px !important; flex-wrap: wrap; }
	.circumstance > .info .infoItem { width: 50%; margin: 10px 0px 0px !important; }
	.circumstance > .info:last-child { margin-top: 10px }
	
	.statusEntryExit .box-round-tlt { height: 35px }
	.statusEntryExit .box-round-tlt .point { font-size: .75rem; width: 35px; height: 25px; line-height: 25px; }
	.statusEntryExit .box-round-tlt > span { font-size: .75rem }
	
	.atmospheric-info>.swiper-slide>.atmospheric-items { flex-wrap: wrap; margin-top: 0px !important; }
	.atmospheric-items>div.box-blue { width: 30%; margin-top: 10px; padding: 0px }
	.atmospheric-items>div.box-blue p:last-child { width: 60px }
	
	.tabBtn { margin: 10px 0px 0px !important; }
	.tabNav button { margin-right: 10px }
	.weather-info { flex-wrap: wrap; justify-content: flex-start; margin-top: 0px !important; }
	.weather-info dl { width: 50%; margin-top: 10px }
	
	.grp_currentInfo > div { flex-wrap: wrap; font-size: .75rem; margin-left: 0 !important; }
	
	.alarmTitle { width: 100%; height: 110px; position: relative }
	.alarmTitle > .circle { position: absolute; right: 20px; bottom: 20px; width: 30px; height: 30px; line-height: 27px; }
	.alarmTitle > .circle > img { width: 15px }
	.alarmList { margin-left: 0px }
	.alarmList > .line { height: 66%; top: 20px }
	.list-txt { font-size: .85rem; margin-top: 10px !important }
	.list-txt > .date { font-size: .7rem }
	
	.tideBox, .seaFogBox { height: auto }
	.tide-con .tide-box .tide-tlt { width: 35px }
	#fogForecastingUpdate { font-size: .7rem }
}