.mainBg {
	background: #1147b6;
}

.salinityInfo {
	margin-top: 20px;
}
.salinityInfo ul {
	display: flex;
}
.salinityInfo ul li {
	width:33.33%;
	text-align: center;
	border-right: 1px solid rgba(255,255,255,0.2);
}
.salinityInfo ul li:last-child {
	border-right: 0;
}
.salinityInfo ul li h2 {
	font-size: 1.7rem;
}
.salinityInfo ul li em {
	font-size: 1.9rem;
	font-family: 'GmarketSansBold';
	letter-spacing: -1px;
}
.salinityInfo ul li.low h2, .salinityInfo ul li.low em {
	color: #fff;
}
.salinityInfo ul li.normal h2, .salinityInfo ul li.normal em {
	color: #50ffdc;
}
.salinityInfo ul li.high h2, .salinityInfo ul li.high em {
	color: #ff9494;
}

.chlorineInfo {
	margin-top: 20px;
}
.chlorineInfo ul {
	display: flex;
}
.chlorineInfo ul li {
	width:33.33%;
	text-align: center;
	border-right: 1px solid rgba(255,255,255,0.2);
}
.chlorineInfo ul li:last-child {
	border-right: 0;
}
.chlorineInfo ul li h2 {
	font-size: 1.5rem;
}
.chlorineInfo ul li em {
	font-size: 1.9rem;
	font-family: 'GmarketSansBold';
	letter-spacing: -1px;
}
.chlorineInfo ul li.low h2, .chlorineInfo ul li.low em {
	color: #fff;
}
.chlorineInfo ul li.normal h2, .chlorineInfo ul li.normal em {
	color: #50ffdc;
}
.chlorineInfo ul li.high h2, .chlorineInfo ul li.high em {
	color: #ff9494;
}

.salinityNum {
}

.salinityGauge {
	width: 100%;
	padding: 50px 10px 0;
	/* height: 250px; */
	margin-bottom: 20px;
}
.salinityGauge {
	text-align: center;
	position: relative;
}
#progressbar {
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 280px;
}
#progressbar span.per0 {
	position: absolute;
	bottom: -25px;
	left: 0;
	color:#fff;
}
#progressbar span.per30 {
	position: absolute;
	bottom: -25px;
	right: 0px;
	color:#ff9494;
}
.gaugetime {
	color: rgba(255,255,255,0.8);
	font-size: 2rem;
    font-family: 'GmarketSansLight';
	position: absolute;
	/* top: 45%; */
	bottom: 32%;
	left: 50%;
	transform: translate(-50%, 0);
}
.gaugeStep {
	color: #fff;
	font-size: 3.5rem;
	font-family: 'GmarketSansBold';
	position: absolute;
	/* top: 50%; */
	bottom: 10%;
	left: 50%;
	transform: translate(-50%, 0);
}

.salinityPoint {
	line-height: 70px;
	text-align: center;
	display: flex;
	gap: 10px;
}
.salinityPoint b {
	width: 65px;
	font-size: 2.2rem;
	text-align: right;
}
.salinityPoint em {
	min-width: 145px;
	font-size: 5.4rem;
	font-family: 'GmarketSansBold';
	letter-spacing: -2px;
	padding-top: 2px;
}
.salinityPoint span {
	font-size: 2rem;
	text-align: left;
}

.sensorTitle {
	font-size: 2.2rem;
	color: #fff;
}

.chlorinePoint {
	text-align: center;
}
.chlorinePoint b {
	width: 65px;
	font-size: 2.2rem;
	display: inline-block;
}
.chlorinePoint em {
	width: 175px;
	font-size: 6.3rem;
	font-family: 'GmarketSansBold';
	letter-spacing: -2px;
	display: inline-block;
}
.chlorinePoint span {
	width: 40px;
	font-size: 2rem;
	text-align: left;
	display: inline-block;
}


.temPoint {
	text-align: center;
	background-color: rgba(0,0,0,0.1);
	border-radius: 10px;
	padding: 10px 20px;
	margin-top: 20px;
	opacity: 0.7;
	filter: alpha(opacity=70); /* For IE8 and earlier */
}
.temPoint b {
	width: 50px;
	font-size: 2rem;
	display: inline-block;
}
.temPoint em {
	width: 160px;
	font-size: 3rem;
	font-family: 'GmarketSansBold';
	letter-spacing: -1px;
	display: inline-block;
}
.temPoint span {
	width: 40px;
	font-size: 2rem;
	text-align: right;
	display: inline-block;
}

.salinityNum .salinityGo {
	display: none;
}

.salinityNum.imgLow {
	color: #fff;
}
.salinityNum.ingNormal {
	color: #50ffdc;
}
.salinityNum.ingHigh {
	color: #ff9494;
}
.salinityNum.imgNone .salinityGo {
	text-align: center;
	font-size: 4rem;
	color: #fff;
	padding-top: 160px;
	display: block;
}
.salinityNum.imgNone .salinityGauge, .salinityNum.imgNone .salinityPoint {
	display: none;
}

.temPoint.errorTem {
	opacity: 1;
	filter: alpha(opacity=100); /* For IE8 and earlier */
}
.temPoint.redC {
	color: #ff9494;
}
.temPoint.whiteC {
	color: #fff;
}




/* 인트로 */
.introBg {
	background-color: #222c34;
}
.introTitle {
	height: calc(20vh - 30px);
	text-align: center;
}
.introTitle img {
	height: 30px;
	margin: 0 auto;
	padding-bottom: 5px;
	display: block;
}
.introTitle span {
	background: -webkit-linear-gradient(70deg, #1dfdc2, #f5ff00);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 3.4rem;
	font-family: 'GmarketSansBold';
	letter-spacing: -1.5px;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.3);
}

.introBtn {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;	
}
.introBtn a {
	width: calc(50% - 10px);
	height: calc(80vh / 4 - 20px);
	font-size: 1.8rem;
	font-family: 'GmarketSansMedium';
	letter-spacing: -1px;
	color: #fff;
	text-align: center;
	border-radius: 25px;
	background-image: radial-gradient(100% 100% at 100% 0, #1dfdc2 0, #2b67e4 100%);
	box-shadow: rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, rgba(58, 65, 111, .5) 0 -3px 0 inset;
    transition: box-shadow .15s,transform .15s;
	/*border: 1px solid rgba(89, 244,184,0.1);*/
	text-shadow: 2px 2px 2px rgba(0,0,0,0.1);
	display: block;
}
.introBtn a:focus {
    box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
    transform: translateY(-2px);
}
.introBtn a span {
	height: 40px;
	margin-top: 25px;
	margin-bottom: 5px;
	display: block;
}
.introBtn a span.salinityBtn {
	background: url('/res/images/safety_icon01.png') no-repeat center 0;
	background-size: auto 30px;
}
.introBtn a span.chlorineBtn {
	background: url('/res/images/safety_icon02.png') no-repeat center 0;
	background-size: auto 33px;
}
.introBtn a span.phBtn {
	background: url('/res/images/safety_icon03.png') no-repeat center 0;
	background-size: auto 30px;
}
.introBtn a span.coffeeBtn {
	background: url('/res/images/safety_icon04.png') no-repeat center 0;
	background-size: auto 35px;
	margin-top: 20px;
	margin-bottom: 10px;
}
.introBtn a span.sugarBtn {
	background: url('/res/images/safety_icon05.png') no-repeat center 0;
	background-size: auto 35px;
}
.introBtn a span.detergentBtn {
	background: url('/res/images/safety_icon06.png') no-repeat center 0;
	background-size: auto 30px;
}
.introBtn a span.tdsBtn {
	background: url('/res/images/safety_icon07.png') no-repeat center 0;
	background-size: auto 35px;
}
.introBtn a span.probesetBtn {
	background: url('/res/images/safety_icon08.png') no-repeat center 0;
	background-size: auto 35px;
}
.introBtn a.disable {
	line-height: calc(80vh / 4 - 20px);
	background: radial-gradient(100% 100% at 100% 0, #284e56 0, #263740 100%);
    box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #12191f 0 -3px 0 inset;
	color: rgba(255,255,255,0.3);
}
.introBtn a.disable span {
	display: none;
}



/* 영문버전 */
body.engVer .salinityInfo ul li h2 {
	line-height: 1;
	font-size: 1.6rem;
	padding-bottom: 10px;
}
body.engVer .salinityInfo ul li em {
	font-size: 1.4rem;	
	font-family: 'GmarketSansMedium';
}
body.engVer .gaugetime {
	color: rgba(255,255,255,0.8);
	font-size: 2rem;
    font-family: 'GmarketSansLight';
	position: absolute;
	/* top: 45%; */
	bottom: 32%;
	left: 50%;
	transform: translate(-50%, 0);
}
body.engVer .gaugeStep {
	font-size: 2rem;
}
body.engVer .salinityPoint b {
	min-width: 90px;
	font-size: 1.6rem;
}
body.engVer .salinityPoint em {
	font-size: 4.2rem;
}
body.engVer .salinityPoint span {
}
body.engVer .chlorinePoint b {
	font-size: 1.6rem;
}
body.engVer .chlorinePoint em {
	font-size: 4.2rem;
}

body.engVer .temPoint b {
	width: 100px;
	font-size: 1.6rem;
	letter-spacing: -1px;
}
body.engVer .temPoint em {
	width: 120px;
	font-size: 2.6rem;
	padding-left: 20px;
}
body.engVer .temPoint span {
	width: 30px;
	font-size: 2rem;
}
body.engVer .salinityNum.imgNone .salinityGo {
	font-size: 4rem;
	padding-top: 160px;
}

body.engVer .introBtn a {
	letter-spacing: -1px;
	font-size: 1.4rem;
}


/* 시리얼 넘버 체크 */
.saveFrm p {
	font-size: 2.6rem;
	font-family: 'GmarketSansMedium';
	text-align: center;
	padding-bottom: 10px;
}
.saveFrm input {
	width: 100%;
	height: 65px;
	line-height: 65px;
	text-align: center;
	padding-top: 10px;
	font-size: 3.6rem;
	font-family: 'GmarketSansBold';
	border: 0;
}
.saveSerialImg {
	background-color: #fff;
	text-align: center;
	padding: 20px;
	margin-top: 20px;
}
.saveSerialImg img {
	width: 100%;
}