@charset "utf-8";
*{-webkit-tap-highlight-color: transparent;}
:root {
  --main-font: "pretendard", sans-serif;
  --main-1: #5B9CFF;
  --main-2: #84AFFF;
  --main-3: #A9C7FF;
  --main-4: #CEE2FF;
  --main-5: #E0EBFF;
  --main-6: #EFF8FF;
  --grayscale-1: #101010;
  --grayscale-2: #252525;
  --grayscale-3: #454545;
  --grayscale-4: #5D5F62;
  --grayscale-5: #83878B;
  --grayscale-6: #9CA2A8;
  --grayscale-7: #BAC0C5;
  --grayscale-8: #D5D9DD;
  --grayscale-9: #E5EAEF;
  --grayscale-10: #F0F3F6;
  --white: #fff;
  --mainfont-color: #2079ff;
  --bg-color: #F6FAFD;
  --main-gradi: linear-gradient(90deg, rgba(124, 176, 255, 1) 0%, rgba(87, 154, 255, 1) 100%);
}

/*공통*/
/*
h2: 25px SB
h3: 22px SB
h4: 20px SB
p1: 18px SB
p2
p4: 14px M

타이틀 - H2
서브타이틀(탭)  - H3
인풋박스타이틀 - H4
하단네비 - 12px
버튼 - 18px /  버튼박스 - 252px 48px / 버튼 두개있는거 - 갭 12px / 가로는 콘텐츠에따라 
인풋 - 18px
*/

/* 하단바 */
.bi-projector-fill{
  color: var(--main-1);
}
.gnb-list > div:first-child ul li:last-child {
  color: var(--main-1);
}

/* 타이틀 탭 */
#wrap {
  overflow: hidden; /*그림자 튀어나옴 방지*/
}
.head3 {
  z-index: 999;
  
}
.head3 ul .head-util {
  gap: 20px;
}

.head3 ul .head-util .sensor-search img {
  height: 20px;
}

.head3 ul .head-util .sensor-more img {
  height: 20px;
}

.head3 .inner {
  position: relative;
  background-color: #fff;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.02);
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 1px solid var(--grayscale-10);
}


.tab-menu {
  display: flex;
  gap: 16px;
  width: 100%;
  height: 52px;
  align-items: center;
  padding: 0 16px;
  margin-top: 12px;
  margin-bottom: 0;
  margin-left: -15px;
  border-bottom: none;
  box-sizing: border-box;
}

.tab {
  font-size: 22px;
  font-weight: 600;
  color: var(--grayscale-7);
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
  padding-bottom: 4px;
  height: 100%;
  line-height: 52px;
  box-sizing: border-box;
  position: relative;
  border-bottom: 3px solid transparent;
}

.tab.active {
  border-bottom-color: var(--main-1);
  color: var(--grayscale-2);
}


@media (max-width: 375px){
  .tab{
    font-size: 20px;
  }
}




/* cont */
.cont-sensor{
  padding-top: 165px;
}


/* 더보기 */
#wrap{
  position: relative;
}
/* wrap에 menu 고정 */
.more-menu{
  position: absolute;
  right: 6%;
  top: 100px;
  background-color: red;
  z-index: 9999999;
  border-radius: 13px;
  background-color: var(--white);
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.08);
}

.more-menu ul li a{
  font-size: 1.6rem;
  color: var(--grayscale-2);
  font-weight: 500;
  padding: 7px 25px;
  display: block;
  border-bottom: 0.35px solid rgba(0, 0, 0, 0.05);
}
.more-menu ul li:last-child a{
  border: none;
}

.more-menu ul li:first-child a:active {
  background-color: var(--grayscale-10);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

.more-menu ul li:last-child a:active {
  background-color: var(--grayscale-10);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

/* 중간 아이템 클릭 시 배경색만 변경 */
.more-menu ul li:not(:first-child):not(:last-child) a:active {
  background-color: var(--grayscale-10);
}



/* 허브 */
.cont-sensor .hub{
  border-bottom: 6px solid var(--grayscale-9);
  padding: 15px 0 25px;
}
.cont-sensor .hub .inner{
  display: flex;
  gap: 16px;
}

.cont-sensor .hub-connect{
  /* background-color: var(--main-1); */
  background: radial-gradient(circle,rgba(91, 156, 255, 0.89) 0%, rgba(91, 156, 255, 1) 100%);
  width: 167px;
  height: 95px;
  border-radius: 15px;
  padding: 15px;
  color: #fff;
  position: relative;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05);
  z-index: 1;
}
.cont-sensor .hub-connect:active{
  background: radial-gradient(circle,rgba(91, 156, 255, 2) 0%, rgba(91, 156, 255, 3) 100%);
}
.cont-sensor .hub-connect p{
  font-size: 1.8rem;
  font-weight: 500;
}

.cont-sensor .hub-connect span{
  position: absolute;
  bottom: 15px;
  font-size: 1.4rem;
  opacity: 0.9;

}
.cont-sensor .hub-connect i{
  color: #fff;
  font-size: 2.6rem;
  position: absolute;
  top: 8px;
  right: 15px;
  opacity: 0.9;
}

.cont-sensor .hub-plus {
  width: 95px;
  height: 95px;
  background-color: var(--grayscale-10);
  text-align: center;
  border-radius: 18px;
  /* SVG를 배경으로 넣어서 점선 간격/길이 조절 */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><rect x='1.5' y='1.5' width='92' height='92' rx='15' ry='15' fill='none' stroke='%23AAAAAA' stroke-width='1' stroke-dasharray='6 4'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.cont-sensor .hub-plus p{
  font-size: 1.6rem;
  color: var(--grayscale-6);
  font-weight: 500;
  padding: 12px 0 6px;
}
.cont-sensor .hub-plus:active{
  background-color: var(--grayscale-9);
}

/* tab-con */
.cont-sensor .tab-con ul{
  padding: 30px 0;
}
.cont-sensor .tab-con ul li > div{
  width: 100%;
  padding: 17px;
  border-radius: 15px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 16px;
}
.cont-sensor .tab-con ul li > div:last-child{
  margin-bottom: 100px;
}



.cont-sensor .dev-stat{
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 500;
  background-color: var(--grayscale-9);
  color: var(--grayscale-5);
  border-radius: 8px;
  padding: 5px 12px;
  margin-bottom: 13px;
}
.cont-sensor .stat-color{
  background-color: var(--main-5);
  color: #2079FF;

}
.cont-sensor .device-tit{
  display: flex;
  gap: 20px;
  border-bottom: 1px solid var(--grayscale-9);
  padding-bottom: 15px;
}

.cont-sensor .device-icon{
  background-color: var(--main-6);
  border-radius: 18px;
  width: 56px;
  height: 56px;
  position: relative;
  z-index: -1;
}
.cont-sensor .device-icon img{
  line-height: 45px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 28px;
}

.cont-sensor .device-sub{
  font-size: 1.6rem;
  color: var(--grayscale-4);
  font-weight: 500;
}
.cont-sensor .device-main{
  font-size: 2.0rem;
  color: var(--grayscale-2);
  font-weight: 600;
}
.cont-sensor .device-main .bi{
  color: var(--grayscale-6);
  padding-left: 10px;
}
.cont-sensor .device-bottom .dev-elec{
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 0 6px;
} 
.cont-sensor .device-bottom .dev-id{
  display: flex;
  gap: 32px;
  align-items: center;
  padding-bottom: 12px;
}

.battery img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cont-sensor .elec-sub{
  display: flex;
  gap: 4px;
  align-items: center;
}
.cont-sensor .elec-sub img{
  width: 16px;
  height: 16px;
}
.cont-sensor .elec-sub p{
  color: var(--grayscale-4);
  font-size: 1.4rem;
  padding-left: 4px;
  font-weight: 500;
}

.cont-sensor .de-tit{
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--grayscale-3);
}
.cont-sensor .de-tit img{
  padding-top: 7px;
}

.cont-sensor .btn-midbox > button{
  width: calc(50% - 8px);
}



/* sensor-search-page */
.sensor-search-page {
  position: fixed;
  top: 0;        /* 꼭 추가 */
  left: 0;       /* 꼭 추가 */
  width: 100vw;  /* 화면 가로 크기 */
  height: 100vh; /* 화면 세로 크기 */
  background-color: #fff;
  z-index: 9999999;
}
.sensor-search-page-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  margin-top: 58px;
}
.sensor-search-page-top .field02 .input-icon span img{
  margin-top: 5px;
}
.sensor-search-page .sensor-search-page-top .field02{
  width: 85%;
}
.sensor-search-page .sensor-search-page-top a{
  width: 10%;
  color: var(--main-1);
  text-align: center;
  margin-top: -12px;
}

.sensor-search-history{
  margin-top: 30px;
}
.sensor-search-history h2{
  font-size: 2.0rem;
  padding-bottom: 12px;
}
.sensor-search-history ul{
  display: flex;
  gap: 10px;
}

.sensor-search-history ul li{
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border: 1px solid var(--grayscale-9);
  border-radius: 8px;
  gap: 12px;
}

.sensor-search-history ul li p{
  cursor: pointer;
}

.sensor-search-keyboard{
  width: 100%;
  position: fixed;
  bottom: 0;
}

.sensor-search-keyboard img{
  object-fit: cover;
  width: 100%;
}



/* cont-sensor-02 */

.sensor-device-setting .inner{
  box-shadow: none;
  border: none;
}
.head3 ul li:first-child{
  display: flex;
  align-items: center;
  gap: 10px;
}

.cont-sensor-02, .cont-sensor-03{
  padding-top: 120px;
}
.cont-sensor-02 h3, .cont-sensor-03 h3{
  font-size: 2.2rem;
  color: var(--grayscale-2);

}

.cont-sensor-02 .place{
  padding-top: 100px;
}
.cont-sensor-02 .place-top{
  display: flex;
  justify-content: space-between;
  position: relative;
  top: 8px;
}
.cont-sensor-02 .place-top h4{
  color: var(--grayscale-3);
  font-size: 1.8rem;
  padding-bottom: 10px;
  
}

.cont-sensor-02 button{
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 5px;
}
.btn-place-button{
  position: fixed;
  bottom: 28px;
  width: 100%;
  left: 50%;
}
.cont-sensor-02 button img{
  width: 20px;
}


.sensor02-keyboard-place{
  width: 100%;
  position: fixed;
  bottom: 0;

}

.sensor02-keyboard-place img{
  object-fit: cover;
  width: 100%;
}




/* 기기 등록 */
.cont-sensor-03 .dev-ill{
  width: 178px;
  display: block;
  margin: 60px auto;
}

.cont-sensor-03 .sensor-guide{
  background-color: var(--main-6);
  display: flex;
  gap: 20px;
  padding: 20px 25px;
  border-radius: 15px;
  align-items: center;
  margin-bottom: 20px;
}
.cont-sensor-03 .sensor-num{
  background-color: var(--main-1);
  border-radius: 4px;
  color: #fff;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  font-size: 1.4rem;
}
.cont-sensor-03 .sensor-g-txt{
  font-size: 1.6rem;
  color: var(--grayscale-3);
  width: 83%;
  font-weight: 500;
}
.cont-sensor-03 .sensor-g-txt strong{
  color: var(--mainfont-color);
}

.sensor-led{
  font-size: 1.4rem;
  color: var(--grayscale-6);
  margin-left: 5px;
}
.sensor-led i{
  padding-right: 6px;
}    

.cont-sensor-03 .btn-big-01{
  position: fixed;
  bottom: 28px;
  width: 90%;
}


.sensor-find{
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999;
}

.sensor-find-box{
  width: 100%;
  height: 234px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  border-radius: 16px 16px 0 0;
}
.sensor-find  p{
  font-size: 2.0rem;
  font-weight: 600;
  color: var(--grayscale-2);
  text-align: center;
  margin-top: 50px;
}
.sensor-find .btn-midbox{
  bottom: 28px;
  width: 90%;
  position: absolute;

}


/* 허브등록 */
.cont-sensor-04 strong.st-purple{
  color: #6A00FF;
}

.cont-sensor-04 .dev-ill{
  margin-top: 40px;
  margin-bottom: 35px;
}

.sensor-wifi{
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999;
}

.sensor-wifi-box{
  width: 100%;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  border-radius: 16px 16px 0 0;
  padding: 40px 0 115px;
}
.sensor-wifi-box h3{
  text-align: center;
  padding-bottom: 45px;
}
.sensor-chowifi{
  display: flex;
  gap: 12px;
  padding: 15px;
  border-radius: 16px;
  transition: background-color 0.3s ease;
}
.sensor-chowifi.active{
  background-color: var(--main-5);
}
.sensor-chowifi img:last-child{
  margin: 0 5px 0 auto;
}
.sensor-chowifi p{
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--grayscale-2);
}


.sensor-wifi-modal{
  position: fixed;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 294px;
  height: 268px;
  background-color: #fff;
  z-index: 9999;
  border-radius: 15px;
  text-align: center;
  padding: 12px;
}

.sensor-wifi-modal .btn-big-01{
  position: absolute;
  bottom: 8px;
}

.sensor-wifi-modal img{
  width: 60px;
  margin-top: 40px;
  margin-bottom: 20px;
}
.sensor-wifi-modal h2{
  font-size: 2.0rem;
  color: var(--grayscale-2);
}


/* 버튼 상태가 이상해져서 임시방편.. */
.btn-big-01 {
  width: 90%;
  left: 50%;
  transform: translateX(-50%);  
  box-sizing: border-box;
}


.sensor-place-wrap{
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  z-index: 999;
}

.sensor-place-modal{
  position: fixed;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 294px;
  height: 268px;
  background-color: #fff;
  z-index: 9999;
  border-radius: 15px;
  text-align: center;
  padding: 12px;
}

.sensor-place-modal .btn-big-01{
  position: absolute;
  bottom: 8px;
}

.sensor-place-modal img{
  width: 60px;
  margin-top: 40px;
  margin-bottom: 20px;
}
.sensor-place-modal h2{
  font-size: 2.0rem;
  color: var(--grayscale-2);
}


.e-find-a{
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999;
}

.e-find-a-box{
  width: 100%;
  height: 234px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  border-radius: 16px 16px 0 0;
}
.e-find-a  p{
  font-size: 2.0rem;
  font-weight: 600;
  color: var(--grayscale-2);
  text-align: center;
  margin-top: 50px;
}
.e-find-a .btn-midbox{
  bottom: 28px;
  width: 90%;
  position: absolute;
}


.sensor-find-a, .sensor-find-b{
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999;
}

.sensor-find-a-box{
  width: 100%;
  height: 234px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  border-radius: 16px 16px 0 0;
}
.sensor-find-a  p, .sensor-find-b p{
  font-size: 2.0rem;
  font-weight: 600;
  color: var(--grayscale-2);
  text-align: center;
  margin-top: 50px;
}
.sensor-find-a .btn-midbox, .sensor-find-b .btn-midbox{
  bottom: 28px;
  width: 90%;
  position: absolute;
}


.registration-wifi{
  position: fixed;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 294px;
  height: 268px;
  background-color: #fff;
  z-index: 9999;
  border-radius: 15px;
  text-align: center;
  padding: 12px;
}

.registration-wifi .btn-big-01{
  position: absolute;
  bottom: 8px;
}

.registration-wifi img{
  width: 60px;
  margin-top: 40px;
  margin-bottom: 20px;
}
.registration-wifi h2{
  font-size: 2.0rem;
  color: var(--grayscale-2);
}



/* none 처리 */
.sensor-search-keyboard, .sensor02-keyboard-place, .sensor-find, .sensor-wifi,  .sensor-find-a, .sensor-find-b, .sensor-place-wrap {
  display: none;
}