/* SUDS.css */

#SUDS_control_Container {
	position: relative;
	width: 90%;
	max-width: 500px;
	height: 85px;
	overflow: hidden;
	/*top: 10vh;*/
	margin: 20px auto;
}

#SUDS_control {
	position: relative;
	overflow: hidden;
	width: 90%;
	max-width: 500px;
	-ms-user-select: none;
	-moz-user-select: -moz-none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	user-select: none;
}

#SUDS_control_Scale {
	position: relative;
	top: 5px;
	left: 0;
	width: 1040px;
	height: 85px;
}

#SUDS_control_Scale_ruler {
	position: absolute;
	top: 35px;
	left: 0px;
	width: 1040px;
	height: 50px;
	background-image: url('../images/ruller.png');
	background-size: cover;
}

#SUDS_control_Refer {
	position: absolute;
	left: 0;
	top: 0;
	height: 90px;
}

#SUDS_control_note {
	position: absolute;
	left: -80px;
	top: -5px;
}

	#SUDS_control_note > div {
		display:inline-block;
		position: absolute;
		text-align: center;
		font-size: 9pt;
		width: 200px;
		color: #979797;
	}

#suds_note_1 {
	top: -10px;
	left: 0px;
	background-image: url('../images/suds_note1.png');
	background-size: cover;
	height: 50px;
	width: auto;
}

#suds_note_2 {
	top: -10px;
	left: 250px;
	background-image: url('../images/suds_note2.png');
	background-size: cover;
	height: 50px;
	width: auto;
}

#suds_note_3 {
	top: -10px;
	left: 500px;
	background-image: url('../images/suds_note3.png');
	background-size: cover;
	height: 50px;
	width: auto;
}

#suds_note_4 {
	left: 750px;
	top: -10px;
	background-image: url('../images/suds_note4.png');
	background-size: cover;
	height: 50px;
	width: auto;
}

#suds_note_5 {
	left: 1000px;
	top: -10px;
	background-image: url('../images/suds_note5.png');
	background-size: cover;
	height: 50px;
	width: auto;
}

#dummy_for_ios {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.ui-content {
	/*height: calc(100vh - 64px) !important;*/
}

.suds_title {
	font-size: 1rem;
	display: block;
	color: #434343;
	font-family: KoPubWorldBatang_Pro !important;
	font-weight: normal !important;
	letter-spacing: -1.6px;
	color: #5A5A5A;
	text-align: center;
	margin-top: 5px;
	margin-bottom: 20px
}

.suds_sub_title {
	font-size: 1rem;
	display: block;
	color: #434343;
	font-weight: bold !important;
	font-family: SpoqaHanSans-Regular;
	letter-spacing: -0.8px;
	color: #434343;
	text-align: center;
	line-height: 24px;
	margin-top: 10px;
}

.thermometerwrap {
	width: 81px;
	height: 197px;
	margin: auto;
	position: relative
}

.thermometer {
	background-image: url(../images/common/thermometer.png);
	background-size: cover;
	width: 81px;
	height: 197px;
	background-position: center;
	margin-left: auto;
	margin-right: auto;
	position: absolute;
	top: 0px;
	left: 0px;
	/*z-index: 10;*/
}

/*컨트롤 위치*/
.numtable_position {
	position: relative;
	/*top: 4vh !important;*/
	margin: 20px auto;
	width: 90%;
	max-width: 300px;
}
/*아이콘 이미지변경*/
.ui-icon-info:after {
	background-image: url(../images/common/explanation.png);
	background-size: cover;
	width: 22px !important;
	height: 22px !important;
	background-position: center;
}

/*온도계 input ui- class 삭제 예정*/
/*
.ui-input-text input, .ui-input-search input {
	margin: 0;
	min-height: 59px;
	width: 93px;
	text-align: center;
	border: 0;
	background: transparent none;
	-webkit-appearance: none;
	-webkit-border-radius: inherit;
	border-radius: 10px;
	background: #F5F5F5;
	font-size: 50px;
	color: #5A5A5A;
	font-weight: bold;
	padding: 0px;
	line-height: 0px;
	
}
	*/
/*input 크기조정 input ui-class 삭제 예정
.ui-body-a, .ui-page-theme-a .ui-body-inherit, html .ui-bar-a .ui-body-inherit, html .ui-body-a .ui-body-inherit, html body .ui-group-theme-a .ui-body-inherit, html .ui-panel-page-container-a {
	background-color: #fff;
	border-color: #ddd;
	color: #333;
	width: 91px;
	margin-left: auto;
	margin-right: auto;
	border: none;
	position: relative;
}
*/

/*온도계 input*/
.numtable_position > div > input {
	margin: 0;
	min-height: 59px;
	width: 93px;
	text-align: center;
	border: 0;
	background: transparent none;
	-webkit-appearance: none;
	-webkit-border-radius: inherit;
	border-radius: 10px;
	background: #F5F5F5;
	font-size: 50px;
	color: #5A5A5A;
	font-weight: bold;
	padding: 0px;
	line-height: 0px;
}
/*input 크기 조절*/
.numtable_position > div {
	background-color: #fff;
	border-color: #ddd;
	color: #333;
	width: 91px;
	margin-left: auto;
	margin-right: auto;
	border: none;
	position: relative;
}

/*shadow reset*/
.ui-shadow-inset {
	-webkit-box-shadow: inset 0 0px 0px rgba(0,0,0,.0);
	-moz-box-shadow: inset 0 0px 0px rgba(0,0,0,.0);
	box-shadow: inset 0 0px 0px rgba(0,0,0,.0);
}

.suds_left_arrow {
	position: absolute;
	top: 5px;
	left: 8px;
	background-color: #FFFFFF !important;
	float: left;
}

.suds_prev {
	background: url(../images/common/suds_prev.png) no-repeat;
	background-size: cover;
	width: 49px !important;
	height: 49px;
	border: none;
}

.suds_right_arrow {
	position: absolute;
	top: 5px;
	left: 160px;
	background-color: #FFFFFF !important;
	float: left;
}

.suds_next {
	background: url(../images/common/suds_next.png) no-repeat;
	background-size: cover;
	width: 49px !important;
	height: 49px;
	border: none;
}

.width50 {
	width: 50% !important;
	margin-left: auto;
	margin-right: auto;
}

/*집중도 css*/
.popup_li {
	font-family: SpoqaHanSans-Regular;
	text-align: left;
	font-size: 0.875rem;
	letter-spacing: -1px;
	color: #3E3E3E;
	margin-bottom: 1.5rem;
	line-height: 1.5rem;
	font-weight: 700;
	word-spacing: -1px;
}

.header_border {
	border-bottom: 1px solid #E6E6E6 !important;
	height: 55px;
}

.suds_textarea {
	background-color: #F9F9F9 !important;
	border-color: #D2D2D2 !important;
	border: 1px solid #D2D2D3 !important;
	color: #919191 !important;
	width: 88% !important;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	height: 22vh !important;
	font-size: 14px;
	padding: 10px !important;
	letter-spacing: -0.7px;
	max-height: 145px;
}

.height443px {
	height: 443px !important;
}

.suds_btn {
	background: #C3E5E2 !important;
	color: #00332e !important;
	font-size: 20px !important;
	letter-spacing: -0.9px;
	line-height: 32px !important;
	height: 60px;
	display: block;
	position: absolute;
	width: 100%;
	bottom: 0em;
	margin: 0em;
	/*padding-left: 0em;*/
	text-shadow: none !important;
	font-weight: bold !important;
	text-align: center;
	border-radius: 0em !important;
	border: none !important;
	font-family: SpoqaHanSans-Rugular;
}

.suds_btn_after {
	background: red !important;
	color: #00332e !important;
	font-size: 20px !important;
	letter-spacing: -0.9px;
	line-height: 32px !important;
	height: 60px;
	display: block;
	position: absolute;
	width: 100%;
	bottom: 0em;
	margin: 0em;
	/*padding-left: 0em;*/
	text-shadow: none !important;
	font-weight: bold !important;
	text-align: center;
	border-radius: 0em !important;
	border: none !important;
	font-family: SpoqaHanSans-Rugular;
}

/*radio button*/
.form_radio_group {
	display: inline-block;
	overflow: visible;
	margin-left: 7%;
}

.form_radio_group-item {
	display: inline-block;
	float: left;
	max-width: 120px;
}

.form_radio_group input[type=radio] {
	display: none;
}

.form_radio_group label {
	display: inline-block;
	cursor: pointer;
	padding: 10px 5vh;
	line-height: 22px;
	border: 1px solid #D2D2D2;
	border-right: none;
	user-select: none;
}

.form_radio_group .form_radio_group-item:last-child label {
	border-right: 1px solid #D2D2D2;
}

.form_radio_group input[type=radio]:checked + label {
	background: #C3E5E2;
}
/*hovoer*/
.form_radio_group label:hover {
	color: #555;
}

.background5A5A5A {
	background: #5A5A5A !important;
}

/*gage*/
.gage {
	width: 75px;
	height: 50%;
	background: #75DED4;
	position: absolute;
	/*z-index: 1;*/
	bottom: 2px;
	left: 50%;
	transform: translateX(-50%);
	display: none;
}

	.gage.bg {
		width: 80px;
		height: 100%;
		max-height: 194px;
		background: #eee;
		position: absolute;
		/*z-index: 0;*/
	}

#mark {
	position: absolute;
	width: 4px;
	height: 25px;
	background-color: rgba(220, 20, 60, 1);
	/*z-index: 1;*/
	left: 49.68%;
	transform: translateY(-50%);
	top: 60px;
	border-radius: 4px;
}

.width216px {
	width: 216px !important;
	position: relative;
	padding-bottom: 10px;
}

/*온도계 좌우 버튼 active 효과*/
#bt_decrease_suds:active{opacity:0.5;}
#bt_increase_suds:active{opacity:0.5;}
/*320px*/
@media all and (max-width:320px) {
	.ui-content {
		/*height: 110vh !important;*/
	}

	.suds_title {
		font-size: 1rem;
		display: block;
		color: #434343;
		font-family: KoPubWorldBatang_Pro !important;
		font-weight: normal !important;
		letter-spacing: -1.6px;
		color: #5A5A5A;
		text-align: center;
	}

	.form_radio_group {
		display: inline-block;
		overflow: hidden;
		margin-left: 13%;
	}

	.height74vh {
		height: 74vh !important;
	}

	.popup_li {
		font-family: SpoqaHanSans-Regular;
		text-align: left;
		font-size: 0.813rem;
		letter-spacing: -1px;
		color: #3E3E3E;
		margin-bottom: 1.5rem;
		line-height: 1.5rem;
		font-weight: bold;
	}
}

@media all and (max-width:375px) {

	#SUDS_control_Container {
		position: relative;
		width: 90%;
		max-width: 500px;
		height: 85px;
		overflow: hidden;
		/*top: 7vh;*/
		margin: 20px auto;
	}

	.numtable_position {
		position: relative;
		/*top: 2vh !important;*/
		margin: 20px auto;
		width: 90%;
		max-width: 500px;
	}

	.suds_title.width88 {
		margin-bottom: 9px
	}
}

 @media (min-width:1300px) and (min-height:700px) {

	#SUDS_page_title {
		margin: 20px auto;
		font-size: 27px
	}

	#SUDS_guide_text {
		margin: 20px auto;
		font-size: 16px;
		font-weight: 600;
		font-family: SpoqaHanSans-Regular !important;
		line-height: 24px
	}

    .common_btn.heightAuto{width: 90%;max-width: 1100px;position: relative;margin: auto;bottom: 100px;}
/*    body{overflow-y:hidden }*/
    .suds_title.width88:nth-child(1){margin-top: 80px!important}
    .__web_header.s .wcenter{margin-top:4px!important}
   

}