.mainvisualArea { width:100%; height:calc(100vh - 60px); background:url(../images/web/mainbg_1.jpg) center center no-repeat; background-size:cover; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center;} .mainvisualArea a.btn_smartfarm { display: inline-flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: space-between; align-items: center;padding:0px 40px 0px 48px;line-height:78px; font-weight:500; font-size:24px; color:#fff; background:var(--green); border:1px solid var(--green); border-radius:40px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);} .mainvisualArea a.btn_smartfarm span {display:inline-flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center;margin-left:45px;} .mainvisualArea a.btn_smartfarm:hover {background:var(--green-hover); border-color:var(--green-hover); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.5); } .subcontents .scontent .card {width:100%;background:#fff; border-radius:15px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08); margin-top:25px;} .subcontents .scontent .card:first-child{ margin-top:0px; } .subcontents .scontent .card .card_head{ width:100%; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: space-between; align-items: flex-start;border-bottom:1px solid rgba(126, 132, 163, 0.3); } .subcontents .scontent .card .card_head h3 {padding:21px 40px;color: var(--dark); font-size:22px; font-weight:500; } .subcontents .scontent .card .card_body{position:relative; width:100%; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; } .subcontents .scontent .card .card_body.dashboard {justify-content: space-between;} .subcontents .scontent .card .card_body.dashboard:before {position:absolute; top:0px; right:350px; width:1px; height:100%; content:''; display:block; background-color: rgba(126, 132, 163, 0.3); } .subcontents .scontent .card .card_body.dashboard .left {width:calc(100% - 350px); height:600px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; } .subcontents .scontent .card .card_body.dashboard .left .section {width:100%; position:relative;} .subcontents .scontent .card .card_body.dashboard .left .section.sensor{border-top:1px solid rgba(126, 132, 163, 0.3);} .subcontents .scontent .card .card_body.dashboard .left .section .sect_title {padding:20px 45px 0; } .subcontents .scontent .card .card_body.dashboard .left .section .sect_title span {color: var(--dark); padding-bottom:6px; font-size:20px; display:inline-flex; position:relative;} .subcontents .scontent .card .card_body.dashboard .left .section .sect_title span:after {position:absolute; bottom:0px; left:0px; width:100%; height:2px; background:var(--green); content:''; display:block;} .subcontents .scontent .card .card_body.dashboard .left .section .sect_body {padding:5px 45px 35px; width:100%;display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; } .subcontents .scontent .card .card_body.dashboard .left .section .sect_body .house_cover {padding-top:5px;width:383px;display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: space-between; align-items: flex-end; } .subcontents .scontent .card .card_body.dashboard .left .section .sect_body .house_cover .cover_left {width:116px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: flex-end;} .subcontents .scontent .card .card_body.dashboard .left .section .sect_body .house_cover .cover_top{width:126px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center; flex-direction:column;} .subcontents .scontent .card .card_body.dashboard .left .section .sect_body .house_cover .cover_right {width:116px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: flex-end;} .subcontents .scontent .card .card_body.dashboard .left .section .sect_body .house_device {padding-top:5px;width:307px; height:197px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: space-between; align-items: flex-end; } .subcontents .scontent .card .card_body.dashboard .left .section .sect_body .house_device .device {height:134px;display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: space-between; align-items: center; flex-direction:column;} .subcontents .scontent .card .card_body.dashboard .left .section .sect_body .house_cctv {position:relative;} .subcontents .scontent .card .card_body.dashboard .left .section .sect_body .house_cctv .cctv_img {width:302px; height:201px; overflow:hidden;} .subcontents .scontent .card .card_body.dashboard .btn_normal {width:116px; height:35px; border-radius:5px;font-size:16px; font-weight:300; background:var(--dusk); color:#fff; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center; } .subcontents .scontent .card .card_body.dashboard .btn_normal img {display:inline-flex; margin-right:7px;} .subcontents .scontent .card .card_body.dashboard .left .section .sect_body .house_cover .cover_top .btn_normal {margin-bottom:10px;} .subcontents .scontent .card .card_body.dashboard .left .section .sect_body .house_device .btn_normal{ background:var( --bluey-grey);} .subcontents .scontent .card .card_body.dashboard .left .section .sect_body .house_cctv .btn_normal{ position:absolute; top:10px; left:13px; background:var( --bluey-grey);} .subcontents .scontent .card .card_body.dashboard .left .section .sect_body .sensor_left {width:calc(100% - 320px);display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; } .subcontents .scontent .card .card_body.dashboard .left .section .sect_body .sensor_right {width:320px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-end; align-items: flex-start; } .subcontents .scontent .card .card_body.dashboard .left .section .sect_body .sensorinfo .btn_normal {width:200px; height:35px; border-radius:5px;font-size:16px; font-weight:300; background:var(--green); color:#fff; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center; } .subcontents .scontent .card .card_body.dashboard .left .section .sect_body .sensorinfo .btn_normal img {display:inline-flex; margin-right:7px;} .subcontents .scontent .card .card_body.dashboard .left .section .sect_body .sensor_left .sensorinfo {width:100%; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; } .subcontents .scontent .card .card_body.dashboard .left .section .sect_body .sensor_left .sensorinfo li{width:30%; margin:12px 0 12px 5%;} .subcontents .scontent .card .card_body.dashboard .left .section .sect_body .sensor_left .sensorinfo li:first-child, .subcontents .scontent .card .card_body.dashboard .left .section .sect_body .sensor_left .sensorinfo li:nth-child(3n+1) {margin-left:0px;} .subcontents .scontent .card .card_body.dashboard .left .section .sect_body .sensor_right .sensorinfo {width:200px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; } .subcontents .scontent .card .card_body.dashboard .left .section .sect_body .sensor_right .sensorinfo li{padding-bottom:4px;} .subcontents .scontent .card .card_body.dashboard .left .section .sect_body .sensor_right .sensorinfo li:first-child {padding-top:12px; padding-bottom:0px;} .subcontents .scontent .card .card_body.dashboard .left .section .sect_body .sensorinfo .info {margin-top:3px;width:200px; height:48px; line-height:28px;font-weight:500; padding:0px 20px;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15); border: solid 1px rgba(126, 132, 163, 0.7); background-color: #fff; border-radius:5px;font-size:18px; color: var(--dark); display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: space-between; align-items: center; } .subcontents .scontent .card .card_body.dashboard .left .section .sect_body .sensorinfo .info .ic {} .subcontents .scontent .card .card_body.dashboard .left .section .sect_body .sensorinfo .info .txt strong {font-size:23px; font-weight:500; display:inline-flex; margin:0px 4px;} .subcontents .scontent .card .card_body.dashboard .left .section.sensor .sect_title { padding-top:22px;} .subcontents .scontent .card .card_body.dashboard .left .section.sensor .sect_body { padding-bottom:25px;} .subcontents .scontent .card .card_body.dashboard .left .section .sect_body .sensorinfo .warning .btn_normal {background:var(--pinkish-red);} .subcontents .scontent .card .card_body.dashboard .right {width:350px; height:600px; padding:60px 40px 50px;display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; flex-direction:column;} .subcontents .scontent .card .card_body.dashboard .right .houseinfo {width:100%; height:490px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; flex-direction:column; } .subcontents .scontent .card .card_body.dashboard .right .houseinfo li {width:100%;height:86px;display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: space-between; align-items: flex-start;} .subcontents .scontent .card .card_body.dashboard .right .houseinfo li .ic {width:86px; height:86px; background:var(--pale-grey-two); border-radius:5px;display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center; } .subcontents .scontent .card .card_body.dashboard .right .houseinfo li .info {width:calc(100% - 91px); display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: flex-start; flex-direction:column; } .subcontents .scontent .card .card_body.dashboard .right .houseinfo li .info .tt {width:100%; height:35px; border-radius:5px;font-size:16px; background:var(--dusk); color:#fff; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center; } .subcontents .scontent .card .card_body.dashboard .right .houseinfo li .info .txt {margin-top:3px;width:100%; height:48px; line-height:28px;font-weight:500;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15); border: solid 1px rgba(126, 132, 163, 0.7); background-color: #fff; border-radius:5px;font-size:18px; color: var(--dark); display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center; } .subcontents .scontent .card .card_body.dashboard .right .houseinfo li .info .txt strong {font-size:23px; font-weight:500; display:inline-flex; margin:0px 4px;} .subcontents .scontent .card .card_body.housecontrol {justify-content: space-between;} .subcontents .scontent .card .card_body.housecontrol:before {position:absolute; top:0px; right:285px; width:1px; height:100%; content:''; display:block; background-color: rgba(126, 132, 163, 0.3); } .subcontents .scontent .card .card_body.housecontrol .left {width:calc(100% - 284px); padding:0px 26px 0px 26px; height:570px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: center; } .subcontents .scontent .card .card_body.housecontrol .right {width:284px; height:570px; padding:60px 25px 0px;display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; flex-direction:column;} .subcontents .scontent .card .card_body.housecontrol .btn_default {width:116px; height:35px; border-radius:5px;font-size:16px; font-weight:300; background:var(--bluey-grey); color:#fff; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);display: inline-flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center; } .subcontents .scontent .card .card_body.housecontrol .btn_default img {display:inline-flex; margin-right:7px;} .subcontents .scontent .card .card_body.housecontrol .btn_normal {width:116px; height:35px; border-radius:5px;font-size:16px; font-weight:300; background:var(--dusk); color:#fff; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);display: inline-flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center; } .subcontents .scontent .card .card_body.housecontrol .btn_normal img {display:inline-flex; margin-right:7px;} .subcontents .scontent .card .card_body.housecontrol .btn_control {margin-left:5px; padding:0px 15px; height:35px; line-height:35px;border-radius:5px;font-size:16px; font-weight:300; background:var(--sky-blue); border:none;color:#fff; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);display: inline-flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center; } .subcontents .scontent .card .card_body.housecontrol .btn_control:hover {background:var(--sky-blue-hover);} .subcontents .scontent .card .card_body.housecontrol .btn_detview { padding:0px 15px; height:35px; line-height:35px;border-radius:5px;font-size:16px; font-weight:300; background:var(--sky-blue); border:none;color:#fff; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);display: inline-flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center; } .subcontents .scontent .card .card_body.housecontrol .btn_detview:hover {background:var(--sky-blue-hover);} .subcontents .scontent .card .card_body.housecontrol .device_img {width:116px; padding:12px 20px 0; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: flex-start; } .subcontents .scontent .card .card_body.housecontrol .device_img img {width:100%; height:auto;} .subcontents .scontent .card .card_body.housecontrol .right .cctvlist li{padding-top:38px;} .subcontents .scontent .card .card_body.housecontrol .right .cctvlist li:first-child {padding-top:0px;} .subcontents .scontent .card .card_body.housecontrol .right .cctvlist li .cctv_img{border-radius:5px; overflow:hidden; margin-top:3px;} .subcontents .scontent .card .card_body.housecontrol .right .cctvlist li .btn_normal {width:100%;} .subcontents .scontent .card .card_body.housecontrol .left .control_device {width:calc(100% - 250px); height:506px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: center; } .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_gate {width:116px;height:400px; padding-bottom:180px;background:url(../images/web/bg_housegate.png) right center no-repeat;display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: center; } .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control {width:calc(100% - 116px); display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: center; } .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control .house_top {width:100%;padding-bottom:15px; padding-left:32px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: center; } .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control .house_body {width:100%; height:400px; border: solid 10px var(--pale-grey-two); display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: center; } .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control .house_bottom {width:100%;padding-top:15px; padding-left:32px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: center; } .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control .house_body .infovalue {width:116px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: flex-start; flex-direction:column; } .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control .house_body .infovalue .tt {width:100%; height:35px; font-weight:300; border-radius:5px;font-size:16px; background:var(--dusk); color:#fff; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center; } .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control .house_body .infovalue .tt img {display:inline-flex; margin-right:7px;} .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control .house_body .infovalue .txt {position:relative; margin-top:2px;width:100%; height:35px; line-height:33px;font-weight:500;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15); border: solid 1px rgba(126, 132, 163, 0.7); background-color: #fff; border-radius:5px;font-size:16px; color: var(--dark); display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center; } .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control .house_body .infovalue .txt .unit {font-weight:200; font-size:0.85em; display:inline-flex; margin:0px 4px;} .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control .house_body .infovalue .txt .st_temp {position:absolute; top:50%; left:0px; width:15px; height:15px; border-radius:8px; margin:-8px 0px 0px -8px;display:block; background:var(--green); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);} .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control .house_body .infovalue .txt .st_humi {position:absolute; top:50%; right:0px; width:15px; height:15px; border-radius:8px; margin:-8px -8px 0px 0px;display:block; background:var(--green); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);} .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control .house_body .infovalue .txt .st_temp.normal, .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control .house_body .infovalue .txt .st_humi.normal {background:var(--green);} .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control .house_body .infovalue .txt .st_temp.danger, .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control .house_body .infovalue .txt .st_humi.danger{background:var(--pinkish-red);} .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control .house_body .housed_left {width:160px; padding:22px;display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: flex-start; } .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control .house_body .housed_left .spcoolerA {padding-top:20px;} .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control .house_body .housed_left .infovalue {padding-top:84px;} .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control .house_body .housed_right {width:calc(100% - 160px); padding-right:12px;} .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control .house_body .housed_right .housed_top {padding:23px 14px;background-color: rgba(4, 166, 77, 0.1); display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: center;} .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control .house_body .housed_right .infograph {position:relative;width:calc(100% - 394px); height:72px; background:#fff; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.16);} .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control .house_body .housed_right .infograph img {width:100%; height:72px;} .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control .house_body .housed_right .infograph .btn_detview { position:absolute; top:0px; left:0px; border-radius:0px 5px 5px 5px; } .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control .house_body .housed_right .infovalue.wide {width:162px;padding-right:14px; } .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control .house_body .housed_right .infovalue.temp { width:130px;padding-left:14px; } .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control .house_body .housed_right .housed_mid { width:100%; padding-top:23px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-end; align-items: center;} .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control .house_body .housed_right .housed_mid .infovalue { width:130px;padding-right:14px; } .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control .house_body .housed_right .housed_mid .ventilatorA {width:130px; padding-left:14px; margin-top:-30px;} .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control .house_body .housed_right .housed_bot {margin-top:25px; padding:23px 14px;background-color: rgba(4, 166, 77, 0.1); display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: center;} .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control .house_body .housed_right .housed_bot .infovalue.temp { width:162px;padding-left:32px;padding-right:14px; } .subcontents .scontent .card .card_body.housecontrol .left .control_device .house_control .house_body .housed_right .housed_bot .infovalue.wide {width:162px;padding-right:0px;padding-left:14px; } .subcontents .scontent .card .card_body.housecontrol .left .control_else {width: 250px; padding-left:26px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: center; flex-direction:column;} .subcontents .scontent .card .card_body.housecontrol .left .control_else .controlinfo {width:100%; height:320px;display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; flex-direction:column; } .subcontents .scontent .card .card_body.housecontrol .left .control_else .controlinfo li {width:100%;height:72px;display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: space-between; align-items: flex-start;} .subcontents .scontent .card .card_body.housecontrol .left .control_else .controlinfo li .ic {width:72px; height:72px; padding:12px;background:var(--pale-grey-two); border-radius:5px;display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center; } .subcontents .scontent .card .card_body.housecontrol .left .control_else .controlinfo li .ic img{width:100%; height:auto;} .subcontents .scontent .card .card_body.housecontrol .left .control_else .controlinfo li .info {width:calc(100% - 75px); display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: flex-start; flex-direction:column; } .subcontents .scontent .card .card_body.housecontrol .left .control_else .controlinfo li .info .tt {width:100%; height:35px; font-weight:300; border-radius:5px;font-size:16px; background:var(--dusk); color:#fff; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center; } .subcontents .scontent .card .card_body.housecontrol .left .control_else .controlinfo li .info .tt img {display:inline-flex; margin-right:7px;} .subcontents .scontent .card .card_body.housecontrol .left .control_else .controlinfo li .info .txt {margin-top:2px;width:100%; height:35px; line-height:33px;font-weight:500;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15); border: solid 1px rgba(126, 132, 163, 0.7); background-color: #fff; border-radius:5px;font-size:16px; color: var(--dark); display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center; } .subcontents .scontent .card .card_body.houseinfotbl {padding:0px 30px;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house {position:relative; width:100%; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house:after {position:absolute; left:50%; bottom:0px; width:calc(100% - 26px); height:1px; background: rgba(0, 0, 0, 0.1); display:block; content:''; -webkit-transform: translate(-50%,0); -ms-transform: translate(-50%,0); transform: translate(-50%,0);} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house.sensorctrnode:after {display:none;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list{position:relative; max-width:calc(100% - 270px); display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .housewr{position:relative;width:250px; height:400px; margin:0px 13px;padding:30px 0;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .senrelaywr{position:relative;width:250px; height:292px; margin:0px 13px;padding:30px 0;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .senctrnodewr{position:relative;width:250px; min-height:322px; margin:0px 13px;padding:30px 0;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .hastreeline {position:absolute; top:-1px; left:138px; width:276px; height:2px; background:var(--dusk); display:block; content:''; z-index:3;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .onhorline {display:none;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .item_name{ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15); background-color: #979cb5; font-size:16px; color:#fff; padding:0px 18px; line-height:40px; border-radius:10px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: center; overflow:hidden;text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap:break-word !important; word-break:break-all !important;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .item_info {margin-top:2px;border-radius:10px; height:150px; padding:14px 18px 10px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15); border: solid 1px rgba(126, 132, 163, 0.5); background-color: var(--pale-grey);} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .senrelaywr .item_info {height:190px; } .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .senctrnodewr .item_info {height:220px; } .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .tree .item_name {background-color: var(--dusk);} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .tree .item_info {background-color: #fff; border: solid 1px rgba(126, 132, 163, 0.7); } .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .on .item_name {background-color: var(--dusk);} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .on .item_info {background-color: #fff; border: solid 2px var(--dusk);padding:13px 17px 9px; } .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .item_info li {width:100%; padding:4px 0; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: space-between; align-items: center;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .item_info li .tt { color: var(--blue-grey); letter-spacing:-0.5px;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .item_info li .txt { color: var(--dark); text-align:right; text-overflow: ellipsis; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-end; align-items: center; overflow:hidden;display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap:break-word !important; word-break:break-all !important;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .item_info li.name .tt {width:74px;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .item_info li.name .txt {width:calc(100% - 74px);} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .item_info li.addr .tt {width:42px;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .item_info li.addr .txt {width:calc(100% - 42px);} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .item_info li.btn {padding-top:8px; width:100%; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: space-between; align-items: center; } .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .item_info li.btn .btn_item_add {width:100%; border-radius:5px; background:var(--dusk); border:none; color:#fff; line-height:33px; display:flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center; } .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .item_info li.btn .btn_item_add:hover {background:var(--dusk-hover); } .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .item_info li.btn .btn_item_modify {width:100%; border-radius:5px; background:var(--sky-blue); border:none; color:#fff; line-height:33px; display:flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center; } .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .item_info li.btn .btn_item_modify:hover {background:var(--sky-blue-hover); } .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .item_info li.btn .btn_item_del {width:100%; border-radius:5px; background:var(--bluey-grey); border:none; color:#fff; line-height:33px; display:flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center; } .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .item_info li.btn .btn_item_del:hover {background:var(--charcoal-grey); } .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .senctrnodewr .item_info li.btn button{width:33%;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .senctrnodewr .sensinfolist {position:relative;padding-top:40px;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .senctrnodewr .sensinfolist:before {position:absolute; top:0px; left:50%; width:2px; height:40px; margin-left:-1px; background:var(--dusk); display:block; content:''; z-index:2;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .senctrnodewr .sensinfolist .item_name {background-color: var(--steel);} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .senctrnodewr .sensinfolist .sens_info {width:100%; margin-top:2px;border-radius:10px; padding:14px 18px 14px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15); border: solid 1px rgba(126, 132, 163, 0.5); background-color:#fff; display:flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: spce-between; align-items: center;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .senctrnodewr .sensinfolist li {margin-bottom:10px;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .senctrnodewr .sensinfolist .sens_info .ic {width: 58px; height: 58px; padding:6px; background: var(--pale-grey-two); border-radius: 5px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .senctrnodewr .sensinfolist .sens_info .ic img{width:100%; height:auto;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .senctrnodewr .sensinfolist .sens_info .sinfo {width:calc(100% - 58px); padding-left:15px;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .senctrnodewr .sensinfolist .sens_info .sinfo li { margin-bottom:0px; width:100%; padding:4px 0; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: center;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .senctrnodewr .sensinfolist .sens_info .sinfo li .tt { width:58px;color: var(--blue-grey); letter-spacing:-0.5px;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .senctrnodewr .sensinfolist .sens_info .sinfo li .txt { width:calc(100% - 58px);color: var(--dark); text-align:right; text-overflow: ellipsis; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-end; align-items: center; overflow:hidden;display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap:break-word !important; word-break:break-all !important;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .on:before {position:absolute; top:0px; left:50%; width:2px; height:30px; margin-left:-1px; background:var(--dusk); display:block; content:''; z-index:2;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .on:after {position:absolute; bottom:0px; left:50%; width:2px; height:30px; margin-left:-1px; background:var(--dusk); display:block; content:''; z-index:2;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .on .onhorline {position:absolute; bottom:-1px; left:50%; width:278px; height:2px; margin-left:-277px; background:var(--dusk); display:block; content:''; z-index:3;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .tree:before {position:absolute; top:0px; left:50%; width:2px; height:30px; margin-left:-1px; background:var(--dusk); display:block; content:''; z-index:2;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .house_list .tree.on:after {position:absolute; bottom:0px; left:50%; width:2px; height:30px; margin-left:-1px; background:var(--dusk); display:block; content:''; z-index:2;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house:first-child .house_list .on:before {display:none;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .additemwr {width:250px; margin-left:13px; padding-top:30px;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .additemwr .btn_infoadd {width:100%;color: var(--bluey-grey); background-color: rgba(230, 233, 244, 0.7); border:none; border-radius:10px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center; flex-direction:column;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .additemwr .btn_infoadd.house {height:400px;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .additemwr .btn_infoadd.sensor_relay {height:232px;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .additemwr .btn_infoadd.sensor_node {height:262px;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .additemwr .btn_infoadd span{ font-size:24px; width:46px; height:46px; border-radius:23px; background-color: rgba(145, 150, 175, 0.6); color:#fff; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .additemwr .btn_infoadd p {display:block; margin-top:15px; font-size:16px;} .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .additemwr .btn_infoadd:hover {background:var(--bluey-grey); color:#fff; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25); } .subcontents .scontent .card .card_body.houseinfotbl .hinfo_house .additemwr .btn_infoadd:hover span {background:#fff;color:var(--bluey-grey); } .subcontents .scontent .scont_txtbox {font-size: 1.2rem; line-height:1.7; font-weight:300; color:var(--dark); word-break: keep-all; -webkit-text-size-adjust: 100%;width:1480px; padding:40px 40px;margin:0 auto;display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start;} .scont_txtbox div {width:100%;} .scont_txtbox .ptitle1 {width:100%;text-align:center; font-size:2rem;line-height:1.4; font-weight:500; color:var(--dark); padding:20px 0;} .scont_txtbox .ptitle1 .logoimg {padding-bottom:30px;} .scont_txtbox .ptitle1 strong {color:#3570cf; font-weight:700;} .scont_txtbox .ptitle2 {width:100%; font-size:1.6rem;line-height:1.4; font-weight:500; color:var(--dark); padding:10px 0 20px;} .scont_txtbox .ptitle3{width:100%; font-size:1.3rem;line-height:1.7; font-weight:400; color:var(--dark); padding:10px 0 20px;} .scont_txtbox .spimgbox { margin-top:50px; width:100%; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; justify-content: space-between; align-items: center; } .scont_txtbox .spimgbox .in3img {width:32%;border-radius:15px; box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.12); overflow:hidden; } .scont_txtbox .spimgbox .in3img img {width:100%; height:auto;} .subcontents .scontent .card.intro_system {padding:30px; text-align:center;} .subcontents .scontent .card.intro_system img {width:100%; height:auto;} .subcontents .scontent .intro_spec {width:100%; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: space-between; align-items: flex-start;} .subcontents .scontent .intro_spec .left {width:48%; padding:35px 40px; align-items: flex-start;} .subcontents .scontent .intro_spec .right {width:48%; padding:35px 40px;align-items: flex-start;} .subcontents .scontent .intro_spec .card {margin:0px;position:relative; min-height:470px; margin-top:25px;} .subcontents .scontent .intro_spec .card .absimg {position:absolute; bottom:30px; right:40px; width:auto; } .subcontents .scontent .scont_txtbox .introtxtimg {padding:40px 60px 60px;width:100%; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: space-between; align-items: flex-end;} .subcontents .scontent .scont_txtbox .introtxtimg .left { width:calc(100% - 480px); display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start;} .subcontents .scontent .scont_txtbox .introtxtimg .right { width:420px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start;} .subcontents .scontent .scont_txtbox .introtxtimg .right .spimgbox { margin-top:0px; width:100%; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; flex-direction:column; } .subcontents .scontent .scont_txtbox .introtxtimg .right .spimgbox .inimg {margin-top:10px;width:100%;border-radius:15px; box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.12); overflow:hidden; } .subcontents .scontent .scont_txtbox .introtxtimg .right .spimgbox .inimg img {width:100%; height:auto;} .subcontents .scontent .scont_txtbox .top_product {padding:60px 60px 70px; margin-bottom:20px; background:url(../images/web/product/pro_topint.png) right top no-repeat #fff; background-size:36% auto;} .subcontents .scontent .bul {margin-top:5px;} .subcontents .scontent .bul li {position:relative; padding:5px 0 5px 18px; line-height:1.5;} .subcontents .scontent .bul li:before {position:absolute; top:14px; left:2px; width:5px; height:5px; border-radius:2px; content:''; display:block; background:var(--bluey-grey);} .subcontents .scontent .product_intro {width:100%; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: space-between; align-items: flex-start;} .subcontents .scontent .product_intro .productint {width:30%; margin-top:25px; padding:35px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center;} .subcontents .scontent .product_intro .productint .primg {width:250px; height:250px;} .subcontents .scontent .product_intro .productint .prname {text-align:center; margin-top:25px; font-size:22px; font-weight:500;} .subcontents .scontent .productexp {padding:40px; width:100%; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: space-between; align-items: center;} .subcontents .scontent .productexp .proimg {width:40%; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center;} .subcontents .scontent .productexp .proexp {width:60%; padding:20px 0;display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: center;} .subcontents .scontent .productexp .proexp ul li {position:relative;padding:8px 0px 8px 20px; font-weight:400; } .subcontents .scontent .productexp .proexp ul li:before {position:absolute; top:19px; left:0px; width:8px; height:8px; content:''; background:var(--sky-blue);} .subcontents .scontent .productexp .proexp ul li li {position:relative;padding:3px 0 3px 20px; font-weight:300; } .subcontents .scontent .productexp .proexp ul li li:before {position:absolute; top:16px; left:1px; width:8px; height:2px; content:''; background:var(--sky-blue);} .subcontents .scontent .tbl_normal {text-align:center; padding:40px;} .subcontents .scontent .tbl_normal thead th { font-size:20px; text-align:center; font-weight:400; color: var(--dark); padding:20px 10px; border-left:1px solid rgba(0,0,0,0.07);border-top:1px solid rgba(0,0,0,0.07); border-bottom:1px solid rgba(0,0,0,0.07); background:#e6e9f4;} .subcontents .scontent .tbl_normal thead tr th:first-child{border-left:none;} .subcontents .scontent .tbl_normal tbody th { font-size:20px; text-align:center; font-weight:400; color: var(--blue-grey); padding:20px 10px; border-bottom:1px solid var(--pale-grey-line);} .subcontents .scontent .tbl_normal tbody td { font-size:20px; text-align:center; font-weight:400; color: var(--dark); padding:20px 10px; border-left:1px solid var(--pale-grey-line); border-bottom:1px solid var(--pale-grey-line);} .subcontents .scontent .tbl_normal tbody td .small{width:auto;display:inline-flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: flex-end; } .subcontents .scontent .tbl_normal tbody td .small .sm {font-size:0.6em; margin-bottom:2px; display:inline-flex; margin-left:2px; font-weight:700;} .subcontents .scontent .tbl_normal tbody th.bl { border-left:1px solid var(--pale-grey-line); } .subcontents .scontent .tbl_normal tbody strong {font-weight:500;} .subcontents .scontent .pro_sensorlist {width:100%; padding:20px 40px 40px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: space-between; align-items: flex-start;} .subcontents .scontent .pro_sensorlist .prosswr {width:24%; margin-top:20px; padding:30px 30px;background:#e6e9f4; border-radius:10px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center;} .subcontents .scontent .pro_sensorlist .prosswr .prssimg { width:100%;display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-end; align-items: flex-end;} .subcontents .scontent .pro_sensorlist .prosswr .prssimg img{width:140px; height:auto;} .subcontents .scontent .pro_sensorlist .prosswr .prssname { margin-bottom:25px; font-size:20px; font-weight:500;} .int_sysimg { margin-top:50px;width:100%; padding:60px 20px; border-radius:20px;background:#f8f8f8;display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center; } /* 폼 스타일 공용*/ select {padding-right:30px; appearance: none; -webkit-appearance: none; -moz-appearance: none; background:url(../images/web/bg_arrdown.png) right 10px center no-repeat;} select option {font-size:14px; } .frm_normal { font-size:16px;color: var(--dark); width:100%; height: 38px; padding-left:10px; border-radius: 5px; border: solid 1px #d5d7e3; background-color: #fff;display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: center; } .frm_normal.required {border-color:#ff94a1; background-color: #fff6f6; } .frm_normal.required:focus { border-color:var(--pinkish-red); background-color:#ffdddd;} .frm_normal.txtCen {text-align:center !important; padding-left:0px !important;} .chk_box {position:relative; } .chk_box input[type="radio"] { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; } .chk_box input[type="radio"] + label {padding-left:28px;color: var(--dark);cursor:pointer; line-height:24px; font-size:16px; } .chk_box input[type="radio"] + label span {position:absolute;top:2px;left:0;width:20px;height:20px;display:block;background:#fff; border: solid 1px #d5d7e3;border-radius:50%;cursor:pointer;} .chk_box input[type="radio"] + label:hover{color:var(--sky-blue);} .chk_box input[type="radio"] + label:hover span {border-color:var(--sky-blue);} .chk_box input[type="radio"]:checked + label {color:var(--green); } .chk_box input[type="radio"]:checked + label span {background:#fff;border:6px solid var(--green);border-radius:50%} /* 레이어 팝업 공용*/ .popup_wrap {display:none; z-index:999990; position:absolute; top:50%; left:50%; overflow-y:auto; background:#fff; border: solid 1px var(--dusk); box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.25); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .popup_wrap .popup_head {position:relative; padding:0px 30px; border-bottom:1px solid var(--pale-grey-line); background-color: var(--pale-grey);} .popup_wrap .popup_head .head_title {color: var(--dark); } .popup_wrap .popup_head .head_title h3 {font-weight:500; font-size:18px;line-height:56px; } .popup_wrap .popup_head .btn_popupclose {position:absolute; top:0px; right:0px; font-size:1.4em;padding-right:30px; width:70px; height:56px; color: var(--dark); cursor:pointer;display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-end; align-items: center; } .popup_wrap .popup_head .btn_popupclose:hover {color:var(--blue-grey);} .popup_wrap .popup_btn {border-top:1px solid #e0e3ec; padding:27px 30px;width:100%; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center; } .popup_wrap .popup_btn .btn_cancel {width:190px; height:54px; margin:0px 10px; background-color: #e3e7ed; border:none; color: #484b5a; font-size:16px; border-radius:5px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center;} .popup_wrap .popup_btn .btn_cancel:hover{background:var(--steel); color:#fff;} .popup_wrap .popup_btn .btn_submit {width:190px; height:54px;margin:0px 10px; background-color: var(--dusk); border:none; color: #fff; font-size:16px; border-radius:5px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center;} .popup_wrap .popup_btn .btn_submit:hover {background:var(--dusk-hover);} .popup_wrap .popup_btn .btn_else {width:190px; height:54px;margin:0px 10px; background-color: var(--bluey-grey); border:none; color: #fff; font-size:16px; border-radius:5px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center;} .popup_wrap .popup_btn .btn_else:hover {background:var(--steel);} /* 레이어 팝업 컨텐츠*/ .popup_wrap .pop_control_cont {width:100%;padding:35px;display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: space-between; align-items: center;} .popup_wrap .pop_control_cont .btn_control_open { width:160px; height:160px; background:var(--green); border:none; border-radius:15px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); color:#fff; font-size:24px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center; flex-direction:column;} .popup_wrap .pop_control_cont .btn_control_open span {display:block; margin-top:5px; } .popup_wrap .pop_control_cont .btn_control_open:hover {background:var(--green-hover); } .popup_wrap .pop_control_cont .btn_control_close { width:160px; height:160px; background:var(--blue-grey); border:none; border-radius:15px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); color:#fff; font-size:24px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center; flex-direction:column;} .popup_wrap .pop_control_cont .btn_control_close span {display:block; margin-top:5px; } .popup_wrap .pop_control_cont .btn_control_close:hover {background:var(--dusk); } .popup_wrap .form_edit { position:relative; width:100%; padding:20px 0;} .popup_wrap .form_edit.jc_spbet {display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: space-between; align-items: flex-start;} .popup_wrap .form_edit.jc_spbet:before {position:absolute; top:0px; left:50%; width:1px; height:100%; display:block; content:""; background:var(--pale-grey-line);} .popup_wrap .form_edit.jc_spbet .left {width:50%; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; flex-direction:column; } .popup_wrap .form_edit.jc_spbet .right {width:50%; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; flex-direction:column; } .popup_wrap .form_edit .frmtitle {padding:0px 30px 15px;} .popup_wrap .form_edit .frmtitle h4{ font-size:16px; color: var(--dark); font-weight:500;} .popup_wrap .form_edit .rowwr {width:100%; padding:5px 30px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start;} .popup_wrap .form_edit .rowwr .frmtt { width:118px; font-size:15px; color: var(--blue-grey); height:46px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: center;} .popup_wrap .form_edit .rowwr .frmtxt {width:calc(100% - 118px);display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start;} .popup_wrap .form_edit .rowwr.wide .frmtt { width:128px; } .popup_wrap .form_edit .rowwr.wide .frmtxt {width:calc(100% - 128px);} .popup_wrap .form_edit .rowwr .frmtt .required {color:var(--pinkish-red); line-height:20px; display:inline-flex; margin:6px 0px 0px 4px;} .popup_wrap .form_edit .rowwr .frmtxt .group {display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start;} .popup_wrap .form_edit .rowwr .frmtxt .unit {line-height:46px; margin:0px 4px; color: var(--bluey-grey);} .popup_wrap .form_edit .rowwr .valuett { font-size:15px; color: var(--blue-grey); padding:0px 0 6px;} .popup_wrap .form_edit .rowwr .valuetxt {font-size:18px; color: var(--black);} .popup_wrap .form_edit .rowwr .frm_normal {height: 46px; padding-left:15px;} .popup_wrap .form_edit .rowwr .frmexp { width:100%;margin-top:6px; font-size:13px; color: var(--bluey-grey);} .popup_wrap .form_edit .rowwr .alerttxt { width:100%;margin-top:6px; font-size:13px; color: var(--green);} .popup_wrap .form_edit .rowwr .btnschhas {display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: space-between; align-items: center;} .popup_wrap .form_edit .rowwr .btnschhas .frm_normal {width:calc(100% - 100px);} .popup_wrap .form_edit .rowwr .btnschhas .btn_side {width:94px; height: 46px;border: none; background-color: #b5b9cb; color:#fff; border-radius:5px; font-size:16px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center;} .popup_wrap .form_edit .rowwr .btnschhas .btn_side:hover {background-color: var(--dusk);} .popup_wrap .form_edit .rowwr .location_map {position:relative;margin-top:4px;width:100%; max-height:250px; overflow:hidden; border-radius:5px;display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center;} .popup_wrap .form_edit .rowwr .location_map img {width:100%; height:auto;} .popup_wrap .form_edit .rowwr .location_map:before {position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid rgba(0,0,0,0.08);border-radius:5px; content:''; display:block;} .popup_wrap .form_edit .rowwr .inline { width:100%; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start;} .popup_wrap .form_edit .rowwr .inline.half li {width:48%; margin:12px 0 14px 4%;} .popup_wrap .form_edit .rowwr .inline.half li:first-child, .popup_wrap .form_edit .rowwr .inline.half li:nth-child(2n+1) {margin-left:0px;} .popup_wrap .form_edit .rowwr .inline.half li .optimg {margin-top:5px;position:relative;width:100%; height:140px; border-radius:5px; overflow:hidden; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center;} .popup_wrap .form_edit .rowwr .inline.half li .optimg:before {position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid rgba(0,0,0,0.08);border-radius:5px; content:''; display:block;} .popup_wrap .form_edit .rowwr .inline.half li .optimg img {max-width:100%; height:auto; object-fit:cover;} .popup_wrap .form_edit .rowwr .housemovelement {position:relative;margin-top:40px;width:100%; height:180px; background:url(../images/web/bg_house.png) center center no-repeat; background-size:cover; } .popup_wrap .form_edit .rowwr .housemovelement .mpointer {position:absolute; } /* 우측 슬라이드 레이어 팝업 공용*/ .slidewin_wrap { position:fixed; z-index:9990; top:100px; right:0px; width:470px; height:calc(100vh - 100px); display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-end; align-items: flex-start; -webkit-transform: translateX(540px); transform: translateX(540px); transition: all 0.5s; } .slidewin_wrap.active { -webkit-transform: translateX(0);transform: translateX(0); } .slidewin_wrap .btn_slideclose { width:70px; height:80px; font-size:2em;color: var(--dark);background:transparent; cursor:pointer; text-shadow:0px 0px 3px rgba(255,255,255,0.3); -moz-text-shadow: 0px 0px 3px rgba(255,255,255,0.3); -webkit-text-shadow: 0px 0px 3px rgba(255,255,255,0.3); display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center; } .slidewin_wrap .btn_slideclose:hover {color:var(--blue-grey); } .slidewin_wrap .slide_wrap {width:400px; height:calc(100vh - 100px); overflow-y:auto; background:#fff; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } .slidewin_wrap .slide_head { position:relative; padding:0px 30px; height:80px; background: var(--pale-grey); display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: space-between; align-items: center;} .slidewin_wrap .slide_head:before {position:absolute; bottom:0px; left:0px; width:100%; height:1px; content:''; display:block; background: var(--pale-grey-line);} .slidewin_wrap .slide_head .head_left h3 {font-size:22px; color: var(--dark); font-weight:500; } .slidewin_wrap .slide_head .roundboxtxt {padding:0px 20px; border-radius:22px; line-height:44px; font-size:20px; font-weight:500; background:var(--green); color:#fff; display:inline-flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center; } /* 우측 슬라이드 레이어 팝업 컨텐츠*/ .slidewin_wrap .slide_body .area_graph {padding:30px;} .slidewin_wrap .slide_body .area_graph .graphbox {background:#fff; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.16);} .slidewin_wrap .slide_body .area_data {padding:0px 30px;} .slidewin_wrap .slide_body .area_data .inlinelist { width:100%; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start;} .slidewin_wrap .slide_body .area_data .inlinelist li {width:50%; padding:5px 2px 40px; } .slidewin_wrap .slide_body .area_data .inlinelist li.full {width:100%; } .slidewin_wrap .slide_body .area_data .inlinelist li .tt{ font-size:16px; color: var(--blue-grey); margin-bottom:10px; } .slidewin_wrap .slide_body .area_data .inlinelist li .txt{ font-size:24px; color: var(--black); font-weight:400; } .slidewin_wrap .slide_body .area_data .inlinelist li .txt .unit {font-size:20px; display:inline-block; margin:0px 5px;} /* ===== login ===== */ .scontent .loginWrap { margin: 0 auto; } .scontent .loginWrap .logintitle { margin: 0 auto; font-size: 36px; padding: 50px 0 70px; color: #121212; font-weight: 100; line-height: 150%; text-align: center; } .scontent .loginWrap .loginwr { width: 100%; padding: 10px 0 50px; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; box-shadow:none; border-radius:0px; } .scontent .loginWrap .loginwr .con_left { flex: 1; padding-right: 70px; position: relative; } .scontent .loginWrap .loginwr .con_right { flex: 1; position: relative; padding-left: 70px; display: flex; -ms-flex-flow: column wrap; flex-flow: column wrap; justify-content: flex-start; align-items: flex-start; } .scontent .loginWrap .loginwr .con_right::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: #ddd; } .scontent .loginWrap .loginwr.joinwr .con_right::after, .scontent .loginWrap .loginwr.findwr .con_right::after { display: none; } .scontent .loginWrap .loginwr.joinwr .con_left::after, .scontent .loginWrap .loginwr.findwr .con_left::after { content: ""; position: absolute; right: 0; top: 0; width: 1px; min-height: 366px; height:100%; background: #ddd; } .scontent .loginWrap .inpst { display: block; width: 100%; padding: 0 20px; height: 60px; border: 1px solid #d5d7e3; background: #fff; border-radius: 10px; font-size: 18px; color: var(--dark); line-height: 60px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .scontent .loginWrap .inpst::placeholder { color: rgba(102,102,102,0.5); font-size: 16px; } .scontent .loginWrap .inpst:focus { border-color: var(--we-main) !important; background-color: #fff !important; } .scontent .loginWrap .inpst:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #e6e9f4 inset; -webkit-text-fill-color: #333; } .scontent .loginWrap .inpst:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 30px #fff inset; } .scontent .loginWrap .inpst:-webkit-autofill, .scontent .loginWrap .inpst:-webkit-autofill:hover, .scontent .loginWrap .inpst:-webkit-autofill:focus, .scontent .loginWrap .inpst:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; } .scontent .loginWrap .input_row { width: 100%; margin: 10px 0; } .scontent .loginWrap .input_row:nth-of-type(1) { margin: 0; } .scontent .loginWrap .input_row:nth-of-type(2) { margin-bottom: 0; } .scontent .loginWrap .joinwr .input_row { padding: 0px 0; min-height: 97px; } .scontent .loginWrap .joinwr .input_row:nth-of-type(1) { margin-top: 0; } .scontent .loginWrap .joinwr .input_row.agree { margin-top: 10px; min-height: auto; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; justify-content: flex-start; align-items: center; } .scontent .loginWrap .chk_box input[type="radio"], .scontent .loginWrap .chk_box input[type="checkbox"] { position: absolute; left: -9999%; width: 0; height: 0; font-size: 0; line-height: 0; } .scontent .loginWrap .chk_box label { display: block; position: relative; padding-left: 35px; font-size: 16px; color: #666; line-height: 27px; cursor: pointer; } .scontent .loginWrap .chk_box label::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; background-color: #fff; border: 1px solid #ddd; } .scontent .loginWrap .chk_box input[type="checkbox"]:checked + label::before { border-color: var(--dusk); background: url(/assets/images/web/ic_checkbox_on.png) no-repeat center var(--dusk); } .scontent .loginWrap .chk_box.type-radio label::before { border-radius: 50%; } .scontent .loginWrap .chk_box input[type="radio"]:checked + label::before { border-color: var(--dusk); background: url(/assets/images/web/ic_radio_on.png) no-repeat center var(--dusk); } .scontent .loginWrap .btn_submit { margin-top: 28px; display: block; width: 100%; height: 60px; border-radius: 10px; border: 1px solid var(--we-main); background: var(--we-main) !important; font-size: 18px; color: #fff; line-height: 58px; font-weight: 400; letter-spacing: 0; box-shadow: none !important; -webkit-appearance: none; appearance: none; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .scontent .loginWrap .btn_submit:hover { background-color: transparent !important; color: var(--we-main-hover) !important; } .scontent .loginWrap .login_verify_message { padding: 30px 0; } .scontent .loginWrap .login_etc { padding: 60px 0px 0px 0px; width: 100%; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: space-between; align-items: flex-end; } .scontent .loginWrap .login_etc:first-child { padding: 0px; } .scontent .loginWrap .login_formA {padding:0px;} .scontent .loginWrap .login_etc h3 { font-size: 18px; color: #121212; font-weight: 500; line-height: 30px; } .scontent .loginWrap .login_etc p { padding: 0; margin: 15px 0 0px; border: none; font-size: 15px; color: #666666; letter-spacing: -0.5px; word-break: keep-all; } .scontent .loginWrap .login_etc .btn_line { display: block; position: relative; border: 1px solid var(--pale-grey-two); font-size: 15px; color: #333; line-height: 40px; margin-bottom: 5px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; text-align: center; background:var(--pale-grey-two); cursor:pointer; } .scontent .loginWrap .login_etc .btn_line:hover { background: #7e84a3; border-color: #7e84a3; color: #fff; } .scontent .loginWrap .login_etc:first-child .btn_line { border-color: var(--pale-grey-two); color: var(--dark); } .scontent .loginWrap .login_etc:first-child .btn_line:hover { background: #7e84a3; border-color: #7e84a3; color: #fff; } .scontent .loginWrap .login_etc .txt { flex: 0.5; } .scontent .loginWrap .login_etc a { flex: 0.45; } .scontent .loginWrap .verify_message { padding: 4px 15px 5px; display: inline-block; color: var(--green); font-size:16px; } .scontent .loginWrap .verify_message#lb_verify_phone_cert { color: #ff6c00; } .scontent .loginWrap .resultalertA { padding: 10px 21px 10px; display: block; color: var(--green); } .scontent .loginWrap .pos_rel { position: relative; } .scontent .loginWrap .joinwr .btn_smbtn { position: absolute; right: 0px; top: 0px; padding: 0px; width: 130px; text-align: center; height: 60px; line-height: 60px; background: #979cb5; border: 1px solid #979cb5; color: #fff; font-size: 15px; border-radius:0px 10px 10px 0; } .scontent .loginWrap .joinwr .btn_smbtn:hover { background: #fff; border-color: #979cb5; color: #555474; } .scontent .loginWrap .joinwr .lb_remain_timer { position: absolute; right: 146px; top: 0px; padding: 0px; height: 60px; line-height: 60px; color: #ff6c00; font-size: 15px; } /* .scontent .loginWrap .snslogin { margin: 20px 0 30px; } .scontent .loginWrap .snslogin ul.snslist { display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: space-between; align-items: center; } .scontent .loginWrap .snslogin ul.snslist li { width: 48%; } .scontent .loginWrap .snslogin ul.snslist li a { border: 1px solid #d9d9d9; color: #333; font-size: 16px; width: 100%; padding: 10px 0; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center; } .scontent .loginWrap .snslogin ul.snslist li a img { width: 36px; height: 36px; } .scontent .loginWrap .snslogin ul.snslist li a span { display: inline-block; margin-left: 14px; } .scontent .loginWrap .snslogin ul.snslist li a:hover { border-color: #555; } */ .scontent .loginWrap .findwr h3 { font-size: 18px; color: #121212; font-weight: 500; line-height: 30px; } .scontent .loginWrap .findwr p { min-height: 45px; padding: 0; margin: 10px 0 15px; border: none; font-size: 15px; color: #666666; letter-spacing: -0.5px; word-break: keep-all; } .scontent .loginWrap .loginwr.findwr .con_right .login_formA { width: 100%; margin: 0px; padding: 0px; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; } .scontent .loginWrap .findwr .input_row { margin: 0px 0; min-height: auto; } .scontent .loginWrap .findwr #finduid_list, .scontent .loginWrap .findwr #wrap_findupw_result { background-color: var(--pale-grey-two); padding: 12px 20px; display: block; color: var(--dusk); width: 100%; border-radius:10px; font-size:16px; } .scontent .loginWrap .findwr .btn_submit { margin-top: 0px; } .scontent .loginWrap .loginwr.joinwr { margin-top:0px;} .scontent .loginWrap .loginwr.joinwr .input_row {margin:0px;} .scontent .loginWrap .loginwr.joinwr .verify_message {font-size:0.85em; padding:2px 15px 5px;} .scontent .loginWrap .loginwr.joinwr .con_left:after {display:none;} .scontent .loginWrap .loginwr.joinwr .con_right:before { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: #ddd;} .loginWrap .loginwr .snslogin { display:block;} .loginWrap .loginwr .snslogin li { padding:10px 0;} .loginWrap .loginwr .snslogin li:first-child {padding-top:0px;} .loginWrap .loginwr .snslogin li a {position:relative; width:100%; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: flex-start; align-items: center; line-height:62px; height:64px; border:1px solid #707070; color: var(--dark); border-radius:4px;} .loginWrap .loginwr .snslogin li a p { width:100%;font-size:18px;display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center; } .loginWrap .loginwr .snslogin li a span { position:absolute; top:0px; left:0px;width:80px;height:64px; text-align:center; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center;} .loginWrap .loginwr .snslogin li a span img{ max-width:100%; max-height:100%; object-fit: contain;} .loginWrap .loginwr .snslogin li a.kakao {background:#FEE500; border-color:#FEE500; } .loginWrap .loginwr .snslogin li a.naver {background:#03c75a; border-color:#03c75a; color:#fff;} .loginWrap .loginwr .snslogin li a.facebook {background:#3b5999; border-color:#3b5999; color:#fff;} .loginWrap .loginwr .snslogin li a.apple {background:#000; border-color:#000; color:#fff;} .loginWrap .loginwr .snslogin li a:hover { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.3); opacity:0.7;} .loginWrap .loginwr .snslogin.logsnsbtn {padding:10px 0 15px;} .loginWrap .loginwr .snslogin.logsnsbtn li{padding-top:2px;} .loginWrap .loginwr .snslogin.logsnsbtn li a {height:52px; line-height:50px;} .loginWrap .loginwr .snslogin.logsnsbtn li a p{font-size:16px;} .loginWrap .loginwr .snslogin.logsnsbtn li a span {width:70px; height:52px;} .subcontents .scontent .memberscont .card {margin-top:0px; padding:60px 70px 30px;} .scontents .pagetitle { margin: 0 auto; font-size: 36px; padding: 40px 0 50px; color: #121212; font-weight: 100; line-height: 150%; text-align: center;} .scontents .pagesubtitle { margin: 0 auto; font-size: 28px; padding: 0px 0 30px; color: #121212; font-weight: 100; line-height: 100%; text-align: center;} .scontents .ctitle3 { font-size: 18px; color: #121212; font-weight: 400; margin-top:10px; margin-bottom: 10px; } .wrap.pop {width:100%;color:#666; line-height:1.8} .privacy {padding:0 20px; margin:0 auto; } .privacy .subwr {padding:5px 0px 0px 15px;} .privacy .subwr li{padding:5px 0;} .privacy .subwr .st2 {padding-left:15px;} .privacy .subwr .st3 {padding-left:22px;} .privacy ul.in {padding:8px 0px 8px 15px;} .subcontents .scontent .scont_txtbox.simplecont {padding:70px 150px;} .subcontents .scontent .scont_txtbox.simplecont .stitle{font-size:24px;} .scontent .loginWrap .joincombtn .btn_submit {max-width:60%; margin:70px auto 70px auto;} .topsmimgA {padding:30px 0; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center;} .topsmimgA .box {width:180px; height:180px; padding:30px; background-color: var(--pale-grey-two); border-radius:15px;display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; justify-content: center; align-items: center; } .topsmimgA .box img {width:100%; height:auto;} .txt .danger {color:var(--pinkish-red) !important;} .jc_spbet { justify-content: space-between !important;} .lh180 {line-height:180% !important;} .lh200 {line-height:200% !important;} .wid10 {width:10px !important;} .wid20 {width:20px !important;} .wid30 {width:30px !important;} .wid40 {width:40px !important;} .wid50 {width:50px !important;} .wid60 {width:60px !important;} .wid70 {width:70px !important;} .wid80 {width:80px !important;} .wid90 {width:90px !important;} .wid100 {width:100px !important;} .wid115 {width:115px !important;} .widp49 {width:49% !important;} .widp50 {width:50% !important;} .pl0{ padding-left:0px !important;} .pl30{ padding-left:30px !important;} .pt0{ padding-top:0px !important;} .pt10{ padding-top:10px !important;} .pt20{ padding-top:20px !important;} .pb100{ padding-bottom:100px !important;} .p40{ padding:40px !important;}