@charset "utf-8";

#main{height: 100%; background: #f3f3f3; /* overflow:hidden; */}

/* 공통 */
.contents{text-align: center; background: #f3f3f3;}
.contents h2{padding-top: 73px; font-family: "GmarketSans"; font-weight: 500; font-size: 36px; color: #000; line-height: 1;}
.contents button.btn1{width: 404px; height: 52px; background: #0d34cd; border: 1px solid #bfbfbf; color: #fff; font-weight: 500; font-size: 18px; font-family:'Noto Sans KR', AppleSDGothicNeo-Regular, sans-serif; }
.contents button.btn2{width: 319px; height: 47px; background: #0d34cd; border-radius: 5px; color: #fff; font-weight: 500; font-size: 18px;}
.contents button.btn3{width: 153px; height: 47px; color: #fff; font-size: 18px; background: #2a2a2a; border: 1px solid #000; border-radius: 5px;}
.contents span.info{font-size: 14px; color: #f85d09; font-weight: 400;}
.contents input[readonly]{background: #a0a0a0;}
.contents input{padding-left: 10px;}

/* 라이프로그_로그인 */
.contents .login{width: 404px; margin: 0 auto;}
.contents .login h2{margin-bottom: 40px;}
.contents .login input{padding-left:10px; width: 100%; margin-bottom: 11px; height: 52px; border: 1px solid #bfbfbf; background: #fff;}
.contents .login input:focus{background:#fff;}
.contents .login a{display: block; margin-top: 36px; line-height: 1; font-weight: 300; font-size: 17px; color: #414141; text-decoration: none;}
.contents .login a:hover{text-decoration: underline;}

/* 라이프로그_회원가입 */
.contents .join{width: 727px; height: 644px; margin: 0 auto;}
.contents .join h2{margin-bottom: 24px;}
.contents .join h2 + span{display: block; margin-bottom: 65px; font-family: "GmarketSans"; font-weight: 300; color: #000; font-size: 24px; line-height: 1;}
.contents .join .join_conts_box{margin-bottom: 56px; padding-bottom: 57px; border-bottom: 1px solid #bfbfbf; text-align: left;}
.contents .join .join_conts{float: left; width: 324px; margin-right: 79px; line-height: 1;}
.contents .join .join_conts:nth-of-type(2){margin-right: 0; float: right;}
.contents .join .join_conts_area{position: relative; margin-bottom: 19px; font-size: 0; overflow: hidden;}
.contents .join .join_conts_area .area{display: inline-block; width: 153px;}
.contents .join .join_conts_area .area:nth-of-type(2){float: right;}
.contents .join .join_conts_area .area input{padding-right: 12px; font-size: 17px;  font-weight: 300;}
.contents .join .join_conts_area .area input::placeholder{color:#747474;}
.contents .join .join_conts_area .area input::-webkit-input-placeholder{color:#747474;}
.contents .join .join_conts_area .area input::-moz-placeholder{color:#747474;}
.contents .join .join_conts_area .area input::-ms-input-placeholder{color:#747474;}
.contents .join .join_conts_area .area input{width: 100%;}
.contents .join .join_conts_area span.tit{display: block; margin-bottom: 12px; color: #414141; font-size: 17px; font-weight: 500;}
.contents .join .join_conts_area span.info{position: absolute; top:2px; right:0;}
.contents .join .join_conts_area label{display: block; margin-bottom: 12px; color: #414141; font-size: 17px; font-weight: 500;}
.contents .join .join_conts_area input{width: 324px; height: 45px; border: 1px solid #bfbfbf; background: #fff;}
.contents .join .join_conts_area input[type="radio"]{position: absolute; opacity: 0;}
.contents .join .join_conts_area label.radio{float: left; margin-bottom: 0; width: 153px; height: 45px; line-height: 43px; background: #fff; border: 1px solid #bfbfbf; font-size: 17px; color:#747474; font-weight: 300; text-align: center; cursor: pointer; font-family: 'NotoSansCJKkr', sans-serif; transform: skew(-0.03deg);}
.contents .join .join_conts_area label.radio:nth-of-type(2){float: right;}
.contents .join .join_conts_area input[type="radio"]:checked + label{background: #eeeeee;}

/* 라이프로그_시연통계 */
.contents .statistics{padding: 0 85px;}
.contents .statistics h2{display: inline-block; margin: 0 auto; padding: 0 34px 0; height: 53px; line-height: 53px; background: #fff ;border: 1px solid #a6a6a6; border-radius: 53px; text-align: center; color: #000; font-weight: 500; font-size: 24px;}
.contents .statistics #section1{padding: 57px 0 119px; height: 350px}
.contents .statistics #section1 .box1{margin-top: 64px; line-height: 1; }
.contents .statistics #section1 .box1 div{float: left; width: 236px; margin-right: 28px;}
.contents .statistics #section1 .box1 div:nth-child(4){margin-right: 0;}
.contents .statistics #section1 .box1 div span{display: inline-block; margin-right: 31px; color: #000; font-size: 24px; font-weight: 500; vertical-align: middle; }
.contents .statistics #section1 .box1 div span br{opacity: 0;}
.contents .statistics #section1 .box1 div > em{font-family: "GmarketSans"; font-size: 60px; color: #000; vertical-align:middle; letter-spacing: -1px; }
.contents .statistics #section1 .box1 div span em{font-size: 24px; font-weight: 700;}
.contents .statistics #section1 .box1 div.user span{padding: 18px 0; border-top: 1px solid #a6a6a6; border-bottom: 1px solid #a6a6a6; }
.contents .statistics #section1 .box1 div:not(.user) span{font-size: 18px; font-weight: 300; color: #000;}
.contents .statistics #section1 .box1 div:not(.user) span em{display: inline-block; margin-top: 9px;}
.contents .statistics #section1 .box1 div.good > em{font-family: "GmarketSans"; font-size: 50px; color: #00c1d8; vertical-align:middle; letter-spacing: -1px; }
.contents .statistics #section1 .box1 div.good span em{color: #00c1d8;}
.contents .statistics #section1 .box1 div.caution > em{font-family: "GmarketSans"; font-size: 50px; color: #ff7e00; vertical-align:middle; letter-spacing: -1px; }
.contents .statistics #section1 .box1 div.caution span em{color: #ff7e00;}
.contents .statistics #section1 .box1 div.danger > em{font-family: "GmarketSans"; font-size: 50px; color: #fe5858; vertical-align:middle; letter-spacing: -1px; }
.contents .statistics #section1 .box1 div.danger span em{color: #fe5858;}

.contents .statistics #section2{position: relative; /*padding-top: 175px;*/ height: 474px;}
.contents .statistics #section2::after{content: ""; width: 200%; height: 100%; position: absolute; top:0; left: 50%; transform: translateX(-50%); background: #fff;}
.contents .statistics #section2 h2{position: absolute; top: -26px; left:50%; transform: translateX(-50%); z-index: 1;}
.contents .statistics #section2 img{position: relative; z-index: 1;}
.contents .statistics #section2 ul.element{position: relative; z-index: 1; padding: 61px 0 0 15px; margin: 0 auto 101px; line-height: 1; text-align: center; font-size: 0;}
.contents .statistics #section2 ul.element li{position: relative; display: inline-block; margin-right: 34px; font-size: 14px; font-weight: 300; color: #000;}
.contents .statistics #section2 ul.element li::before{content: ""; width: 11px; height: 11px; position: absolute; top: 55%; left:-22px; transform: translateY(-50%);}
.contents .statistics #section2 ul.element li.bmi::before{background: #c3c3c3;}
.contents .statistics #section2 ul.element li.smoking::before{background: #ff9000;}
.contents .statistics #section2 ul.element li.drinking::before{background: #317cbf;}
.contents .statistics #section2 ul.element li.disease::before{background: #183b63;}
.contents .statistics #section2 ul.element li:last-child{margin-right: 0;}
.contents .statistics #section2 ul.statistics_list{position: relative; z-index: 1; margin: 0 -25px; line-height: 1;}
.contents .statistics #section2 ul.statistics_list li{float: left; width: 12%; margin: 0 25px;}
.contents .statistics #section2 ul.statistics_list li .img{margin-bottom: 41px;}
.contents .statistics #section2 ul.statistics_list li span{color: #000; font-weight: 500; font-size: 24px;}

.contents .statistics #section3{position: relative;  padding: 73px 0 92px;}
.contents .statistics #section3 h2{position: absolute; top: -26px; left:50%; transform: translateX(-50%); z-index: 1;}
.contents .statistics #section3 h3{display: inline-block; position: relative; margin-bottom: 33px; font-weight: 500; line-height: 1; color: #000; font-size: 18px;}
.contents .statistics #section3 h3::after{content:""; position: absolute; bottom: -9px; left:0; right:0; width: 100%; height: 1px; background: #717171;}
.contents .statistics #section3 .box{text-align: left;}
.contents .statistics #section3 .box:nth-of-type(1){margin-bottom: 76px;}
.contents .statistics #section3 .box:nth-of-type(1) div{float: left; width: 517px}
.contents .statistics #section3 .box:nth-of-type(1) div:nth-child(2){float: right; width: 361px;}
.contents .statistics #section3 .box:nth-of-type(2) div{margin-bottom: 24px; width: 685px;}
.contents .statistics #section3 .box:nth-of-type(2) table th:first-child{color: #fff; font-size: 20px; font-weight: 500;}

.contents .statistics #section3 table{width: 100%; height: 100%; border: 1px solid #bcbcbc; border-radius: 5px; text-align: center; line-height: 1;
    box-shadow: 1px 1px 5px rgba(0,0,0,.2);
    -moz-box-shadow: 1px 1px 5px rgba(0,0,0,.2);
    -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,.2);}
.contents .statistics #section3 table th{width: 88px; padding: 13px 0; color: #000; font-size: 14px; font-weight: 300; border-right: 1px solid #bcbcbc; border-bottom:1px solid #bcbcbc; background: #dedede; }
.contents .statistics #section3 table td{width: 88px; padding: 15px 0; color: #000; font-size: 14px; font-weight: 300; border-right: 1px solid #bcbcbc; border-bottom:1px solid #bcbcbc; background: #fff;}
.contents .statistics #section3 div.good table th:first-child{background: #00c1d8}
.contents .statistics #section3 div.caution table th:first-child{background: #ff7e00}
.contents .statistics #section3 div.danger table th:first-child{background: #fe5858}

/* 라이프로그_정보입력(회원)*/
.contents .information_input.v2 input{padding-left: 0;}
.contents .information_input.v2 td span{font-size: 15px; color: #000; font-weight: 700;}
.contents .information_input.v2 td{padding: 0!important; line-height: 42px;}
.contents .information_input.v2 tr:nth-child(7) td,
.contents .information_input.v2 tr:nth-child(8) td,
.contents .information_input.v2 tr:nth-child(9) td{line-height: 1;}
.contents .information_input.v2 td input{margin: 7px auto; width: 90%!important; height: 30px!important;}
.contents .information_input.v2 > div:nth-child(2) .text p em{color: #ff0000; font-weight: 500}
.contents .information_input.v2 span.info{display: block; margin: 14px 0; text-align: right; line-height: 1;}
.contents .information_input.v2 input#bloodsugar{margin: 7px auto; width: 90%; height: 30px; line-height: 24px; font-size: 17px; font-weight: 500; text-align: center; background: #fff;}
.contents .information_input.v2 > div:nth-child(2){/*padding: 56px 0 0;*/ height: auto;}
.contents .information_input.v2 input.input_result{color: #ff0000; border: 1px solid #ff0000;}

/* 라이프로그_정보입력(비회원) */
.contents .information_input{display: flex; padding-top: 53px;}
.contents .information_input > div{/* height: 622px; */}
.contents .information_input > div:nth-child(1){/*width: 35%;*/ /* width: 320px; */ margin-right: 33px;}
.contents .information_input div .input_text_box{margin-bottom: 17px;  width: 320px; }
.contents .information_input div .input_text_box > span{position: relative; float: left; display:inline-block; margin: 0 0 -1px 0; padding: 22px 30px 11px 25px; height: 50px; background: #fff; color: #000; border-radius: 5px 5px 0 0; border: 1px solid #d9d9d9; border-width: 1px 1px 0 1px; font-weight: 500; font-size: 17px; line-height: 1; text-align: left; border-radius: 5px 5px 0 0;}
.contents .information_input span.info{display: block; margin: 14px 0; text-align: right; line-height: 1;}
.contents .information_input div .input_text{padding: 16px 16px 0 15px; width: 100%; background: #fff; border: 1px solid #d9d9d9; border-radius: 0 5px 5px 5px; clear: both; }
.contents .information_input div .input_text span.input_tit{display: block; margin-bottom: 13px; height: 32px; line-height: 30px; background: #f4f4f4; font-size: 14px; color: #000; font-weight: 100;}
.contents .information_input div .input_text table{width: 100%; text-align: center; line-height: 1; border: 1px solid #e7e7e7;}
.contents .information_input div .input_text table tr:last-child th,
.contents .information_input div .input_text table tr:last-child td{border-bottom: none;}
.contents .information_input div .input_text table th{width: 50%; height: 44px; padding: 15px 0; font-size: 15px; font-weight: 100; color: #000; border-right: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; text-align: center;}
.contents .information_input div .input_text table td{height: 44px; padding: 5px 8px; border-bottom: 1px solid #dfdfdf;}
.contents .information_input div .input_text table td input{width: 100%; height: 32px; border: 1px solid #bfbfbf;}
.contents .information_input div .input_text table td .area{float: left; width: 48.4%; height: 32px; margin-right: 4px;}
.contents .information_input div .input_text table td .area:nth-child(2){float: right; margin-right: 0;}
.contents .information_input div .input_text table td .area input{width: 100%;}
.contents .information_input div .input_text table td input[type="radio"]{position: absolute; opacity: 0;width: 0;}
.contents .information_input div .input_text table td label.radio{float: left; width: 48.4%; margin-bottom: 0; height: 32px; line-height: 31px; background: #fff; border: 1px solid #bfbfbf; font-size: 15px; color:#5f5f5f; font-weight: 100; text-align: center; cursor: pointer;}
.contents .information_input div .input_text table td label.radio:nth-of-type(2){float: right;}
.contents .information_input div .input_text table td input[type="radio"]:checked + label{background: #eeeeee;}
.contents .information_input div span.red{color:red;}
.contents .information_input div button.btn2{float: left;}
.contents .information_input > div:nth-child(2){/*width: 847px;*/ /*padding: 56px 0 0;*/ width: 85%;text-align:center;}
.contents .information_input > div:nth-child(2) button{float:initial;}
.contents .information_input > div:nth-child(2) img{display: block; margin:0 auto;}
.contents .information_input > div:nth-child(2) .text{width: 100%; margin-top: 40px; line-height: 1; color: #000; font-size: 22px; font-weight: 500; font-family:'Noto Sans KR', AppleSDGothicNeo-Regular, sans-serif; }
.contents .information_input > div:nth-child(2) .text > span:nth-child(1){display: block; margin-bottom: 31px;}
.contents .information_input > div:nth-child(2) .text p{line-height: 30px; font-size: 18px; font-weight: 300;}
.contents .information_input > div:nth-child(2) .text p span{color:#0d34cd; font-weight: 500;}
.contents .information_input > div:nth-child(2) .text p em{color: #000; font-weight: 500;}
.contents .information_input > div:nth-child(2) ul.tab{position: relative; height: 49px; margin-bottom: 54px; overflow: hidden; border-bottom: 1px solid #d9d9d9;}
.contents .information_input > div:nth-child(2) ul.tab li{position: relative; float: left; height: 100%; line-height: 1;}
.contents .information_input > div:nth-child(2) ul.tab li.active::after{content: ""; background: url(../images/sub/icon.png)no-repeat; width: 11px; height: 8px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.contents .information_input > div:nth-child(2) ul.tab li.active a{color: #0349b8; font-weight: 500;}
.contents .information_input > div:nth-child(2) ul.tab li.active{border-bottom: 3px solid #01b8e1;}
.contents .information_input > div:nth-child(2) ul.tab li:last-child{margin-right: 0;}
.contents .information_input > div:nth-child(2) ul.tab li a{display: block; padding: 12px 22px 20px; font-size: 17px; color: #000; letter-spacing: -1px; font-weight: 100;}
.contents .information_input > div:nth-child(2) .tab_wrap{margin-left: 26px;}
.contents .information_input > div:nth-child(2) .tab_wrap .tab_box h2{margin-bottom: 30px; padding: 0; font-family: 'Noto Sans KR', sans-serif; color: #000; font-size: 24px; font-weight: 500; text-align: left; letter-spacing: -1px;}
.contents .information_input > div:nth-child(2) .tab_wrap .tab_box .chart{margin-top: 94px;}
.contents .information_input > div:nth-child(2) .tab_wrap .prediction{margin-top: 39px; padding: 37px 0 44px; width: 824px; height: 325px; background: url(../images/sub/bg.png)no-repeat;}
.contents .information_input > div:nth-child(2) .tab_wrap .prediction > div{margin-bottom: 13px; height: 38px; line-height: 38px; text-align: left;}
.contents .information_input > div:nth-child(2) .tab_wrap .prediction > div > span{padding-left: 24px; float: left; width: 135px; font-weight: 100;}
.contents .information_input > div:nth-child(2) .tab_wrap .prediction > div .percent{position: relative; float: left; width: 687px; height: 100%; border: 1px solid #dadada; box-shadow: 5px 5px 5px rgb(0 0 0 / 3%);}
.contents .information_input > div:nth-child(2) .tab_wrap .prediction > div .percent::after{content: ""; position: absolute; top:0; left:0; right:0; bottom: 0; box-shadow: 0 5px 5px rgb(0 0 0 / 3%) inset;}
.contents .information_input > div:nth-child(2) .tab_wrap .prediction > div .percent span{display: block; padding-right: 10px;  height: 100%; line-height: 34px; color:#fff; font-weight: 500; text-align: right;}

/* 라이프로그_결과 */
.contents .information_input h3{display: inline-block; position: relative; margin-bottom: 75px; font-size: 24px; color: #000; font-weight: 300;}
.contents .information_input h3 span{font-weight: 500;}
.contents .information_input h3::after{content: ""; position: absolute; bottom: -12px; left:0; right:0; width: 100%; height: 1px; background:#d3d3d3; }
.contents .information_input .chart_box{margin-bottom: 59px; text-align: center; font-size: 0;}
.contents .information_input .chart_box div{float: left; width: 28%; margin-right: 57px; line-height: 1;}
.contents .information_input .chart_box div:last-child{margin-right: 0;}
.contents .information_input .chart_box div span{display: block; margin: 23px 0 15px; font-size: 18px; color: #000; white-space: nowrap;}
.contents .information_input .chart_box div span em:nth-child(1){color:#000; font-weight: 800;}
.contents .information_input .chart_box div ul{padding: 5px 19px; width: 186px; height: 66px; margin: 0 auto; border: 1px solid #96979a; border-radius: 5px; text-align: left;}
.contents .information_input .chart_box div ul li{position: relative; font-size: 13px; color: #909090; font-weight: 300; line-height: 18px;}
.contents .information_input .chart_box div ul li::before{content: ""; position: absolute; top:50%; left:-8px; transform: translateY(-50%); width: 3px; height: 3px; border-radius: 50%; background: #adadaf;}
.contents .information_input .chart_box div.danger span em:nth-child(2){color:#fe5858; font-weight: 800;}
.contents .information_input .chart_box div.caution span em:nth-child(2){color:#ff7e00; font-weight: 800;}
.contents .information_input .chart_box div.good span em:nth-child(2){color:#00c1d8; font-weight: 800;}
.contents .information_input .result{padding-bottom: 37px; border-bottom: 1px solid #b7b7b7;}
.contents .information_input .result .result_text{line-height: 1; text-align: left;}
.contents .information_input .result .result_text span{display: block; margin:14px 0 13px; font-size: 18px; color: #000; font-weight: 500;}
.contents .information_input .result .result_text p{line-height: 20px; font-size: 14px; font-weight: 300; color: #333;}
.contents .information_input .result .good .result_text span em{color: #00c1d8;}
.contents .information_input .result .caution .result_text span em{color: #ff7e00;}
.contents .information_input .result .caution .result_text{text-align: center;}
.contents .information_input .result .danger .result_text span em{color: #fe5858;}
.contents .information_input .result .danger .result_text{text-align: right;}
.contents .information_input button{float: none; margin-top: 30px;}