@charset "utf-8";
.WordB { word-break: keep-all; }
.marBott20 { margin-bottom: 20px; }
.marBott30 { margin-bottom: 30px; }
.btn-wrap { text-align: center; clear: both; overflow: hidden; margin: 30px 0 50px; }
.box-line { overflow: hidden; padding: 40px 0px 0px; border-top: 1px solid #ddd; background: #fff; }
button, select { width: auto; border: 1px solid #dfdfdf; height: 40px; line-height: 40px; padding: 0 5px; appearance: none; -webkit-appearance: none; -moz-appearance: none; -o-oppearance: none; border-radius: 0; font-size: 1.0em; vertical-align: middle; color: #777; }
.search-select { display: inline-block; padding: 0px 35px 0px 15px; padding /*\**/: 0 0 0 5px\9; background: url("../img/Content/self-arr.png") no-repeat center right; font-size: 15px; }
.search-input { border: 1px solid #dfdfdf; height: 40px; line-height: 40px; display: inline-block; font-size: 15px; box-sizing: border-box; }
select::-ms-expand {
display: none;
}

/* =====================================
   self-wrap 자가진단
===================================== */
.self-wrap { line-height: 1.5em; }
.self-wrap h4 { position: relative; font-size: 18px; line-height: 28px; padding: 10px 0 20px 0; letter-spacing: -1px; color: #333; font-weight: 500; }
.self-wrap h5 { font-size: 16px; padding: 0 0 10px 0; letter-spacing: -1px; font-weight: 500; color: #333; }
.self-wrap h5:before { content: ""; display: block; float: left; width: 8px; height: 20px; border-radius: 4px; background: #5bbfce; margin-top: 3px; margin-right: 1%; }
.self-wrap h6 { font-size: 16px; margin-bottom: 10px; font-weight: 400; color: #333; }
.box-dash { border: 3px dashed #ededed; padding: 40px 20px; }
.box-solid { border: 1px solid #ededed; padding: 25px 20px; border-radius: 10px; font-size: 16px; font-weight: 700; color: #777; line-height: 30px; background-color: #fafafa; }
/* =====================================
   self-top
===================================== */
.self-top { overflow: hidden; border: 1px solid #ddd; }
.self-top dl { width: 33.3%; float: left; padding: 0 15px; height: 120px; min-height: 100px; border-right: 1px solid #ddd; box-sizing: border-box; }
.self-top dl:hover { background: #fafafa; }
.self-top dl dt { padding: 15px 0; font-size: 18px; font-weight: 400; border-bottom: 1px solid #555; color: #000 }
.self-top dl dd { padding: 15px 0; }
.self-top dl:nth-child(3n) { border-right: none; }
/* =====================================
   self-area
===================================== */
.self-area { overflow: hidden; position: relative; display: block; cursor: pointer; }
.self-area li { margin: 0.3em; padding: 2px 0; }
.self-area li label { display: inline-block; width: 100%; }
.self-area input[type="radio"] { opacity: 0; position: absolute; top: 0; left: 0; cursor: pointer; }
.self-area span { position: relative; padding: 2px 0 2px 25px; }
.self-area span:before { content: ''; display: inline-block; height: 10px; position: absolute; top: 0; left: 0; width: 10px; border-radius: 100%; text-align: center; margin-right: 2px; transition: all 0.3s ease-out; }
.self-area input + span:before { color: #fff; border: 5px solid #dfdfdf; background-color: #FFF; }
.self-area input:checked + span:before { color: #fff; background-color: #FFF; border: 5px solid #00a1df; }
.self-area > input:disabled + span:before { color: #fff; background-color: #ddd; }
.self-area > input:disabled:checked + span:before { color: #fff; }
/* =====================================
   self-table
===================================== */

.self-table { transition: all 0.3s ease-out; width: 100%; overflow: hidden; text-align: center; }
.self-table thead th { color: #fff; background-color: #9cbe3c; line-height: 1.3em; height: 50px; font-weight: 700; border-top: 1px solid #9cbe3c; border-bottom: 1px solid #9cbe3c; }
.self-table tbody th { transition: all 0.3s ease-out; color: #000; padding: 5px; height: 35px; border-bottom: 1px solid #ddd; font-size: 17px; font-family: Roboto }
.self-table tbody td { color: #333; border-bottom: 1px solid #ddd; vertical-align: middle; padding: 20px 15px; font-size: 17px; line-height: 28px; }
.self-table .bg01 { background: #fafafa }
.self-table .tl { text-align: left; }
.self-table .RNone { border-right: none; }
.self-table .ba { vertical-align: baseline; }
.self-table th.bg01 { background: #f6bd90 !important; color: #333; }
.self-table th.bg02 { background: #f6bd90 !important; color: #333; }
.self-table th.bg03 { background: #f6bd90 !important; color: #333; }
/* =====================================
   self-list
===================================== */

.self-list { position: relative; display: block; cursor: pointer; }
.self-list li { margin: 0.3em; padding: 2px 0; }
.self-list li label { display: inline-block; width: 100%; }
.self-list input[type="radio"] { opacity: 0; position: absolute; top: 0; left: 0; cursor: pointer; }
.self-list span { position: relative; padding: 2px 0 2px 25px; }
.self-list span:before { content: ''; display: inline-block; position: absolute; top: 2px; left: 0; height: 25px; width: 25px; border-radius: 100%; font-size: 12px; text-align: center; margin-right: 2px; transition: all 0.3s ease-out; }
.self-list input + span:before { color: #fff; border: 1px solid #ddd; background: #ddd url('../img/Content/self-ico-check.png') center no-repeat }
.self-list input:checked + span:before { color: #fff; background-color: #9cbe3c; border: 1px solid #9cbe3c; }
.self-list.type li { margin: 0.3em 0; padding: 2px 0 2px 15px; }
.self-list.type span { color: #333; position: relative; padding: 0 0 0 15px; font-size: 16px; }
.self-list.type span:before { top: 1px; left: -25px; }



.self-list span { color: transparent; font-size:1px;  }
.self-list span:before { top: 0 !important; margin-right: 0; }
/* =====================================
   result-table
===================================== */

.result-table { position: relative; width: 100%; border-collapse: collapse; text-align: center; }
.result-table:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: #63605e; }
.result-table caption { position: static; }
.result-table thead { background: #fafafa; }
.result-table thead th { border-bottom: 1px solid #63605e; background-color: #f8f8f8; background-image: url(../images/cont/th_bg.png); }
.result-table th, .result-table td { padding: 20px 5px; border: 1px solid #ccc; vertical-align: middle; }
.result-table td .tl { text-align: left; }
.result-table th:first-child, .result-table td:first-child { border-left: none; }
.result-table th:last-child, .result-table td:last-child { border-right: none; }
.result-table th { text-align: center; letter-spacing: -1px; }
.result-table .tl { text-align: left; }
.result-table tfoot th, .result-table tfoot td { border-top: none; }
.result-table td img { vertical-align: middle; }
.result-table .list th { padding: 12px 20px; }
.result-table .list td { padding: 12px 20px; }
.result-table .list th { background-color: #f8f8f8; background-image: url(../images/cont/th_bg.png); }
.result-table .list.TDL td { text-align: left !important; }

/* =====================================
   결과
===================================== */

#st_result { display: none; padding: 70px 20px 100px 20px; border:1px solid #000; background: url('') 50% 10px no-repeat; }
.SelfBasic h4.re_tit { width: 50%; margin: 0 auto; color: #fff; padding: 10px 0; border-radius: 50px; font-size: 32px; background: #5c7ab7; }
.re_cont { overflow: hidden; }
.re_cont div { transition: all 0.3s ease-out; min-height: auto; padding: 14px; min-height: 50px; margin: 0 auto; color: #777; box-sizing: border-box; background: #fafafa; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.re_cont div dl dt { position: relative; transition: all 0.3s ease-out; background: #fff; font-weight: 600; padding: 10px 0; font-size: 16px; width: 50%; height: 50%; margin: 0 auto; border: 1px solid #eee; }
.re_cont div dl dd { padding: 10px; font-size: 14px; }
.re_cont div dl strong { font-size: 18px; display: block; margin: 20px 0; font-weight: 600 }

.AT01 { background: #fffedf !important; color: #333 !important; }
.AT02 { background: #84dbe7 !important; color: #333 !important; }
.AT03 { background: #c5d5f6 !important; color: #333 !important; }
.AT04 { background: #ffeec8 !important; color: #333 !important; }
.AT05 { background: #ffdde3 !important; color: #333 !important; }
.AT01 dt { background: #9cbe3c !important; color: #fff !important; box-shadow: #f3f3f3 0 0 0 inset !important; border: 1px solid #9cbe3c !important; }
.AT02 dt { background: #5dc2d0 !important; color: #fff !important; box-shadow: #f3f3f3 0 0 0 inset !important; border: 1px solid #5dc2d0 !important; }
.AT03 dt { background: #5686eb !important; color: #fff !important; box-shadow: #f3f3f3 0 0 0 inset !important; border: 1px solid #5686eb !important; }
.AT04 dt { background: #ffa734 !important; color: #fff !important; box-shadow: #f3f3f3 0 0 0 inset !important; border: 1px solid #ffa734 !important; }
.AT05 dt { background: #ff5775 !important; color: #fff !important; box-shadow: #f3f3f3 0 0 0 inset !important; border: 1px solid #ff5775 !important; }




@media only screen and (min-width:1200px) {
.re_cont div { width: 46.5%; float: left; padding: 14px; border-bottom: none; border-right: 1px solid #ddd; }
.re_cont div:last-child { border-right: none; }
.re_cont.w3 div { width: 33.33333%; }
.re_cont div dl dt { border-radius: 0%; padding: 30px 0; height: 20px; width: 80px; font-size: 18px; }
.re_cont.type div dl dt { border-radius: 0%; padding: 30px 0; width: 100%; font-size: 16px; }


.self-wrap h4 { font-size: 22px; padding: 20px 0 30px 0; }
.self-wrap h5 { font-size: 20px; padding: 0 0 20px 0; }
.self-wrap h6 { font-size: 20px; }
.self-top dl { width: 33.3%; float: left; padding: 0 15px; min-height: 100px; border-right: 1px solid #ddd; box-sizing: border-box; }
.self-top dl dt { font-size: 16px; }
.self-top dl:nth-child(2) { border-right: 1px solid #ddd; }
.self-top dl:nth-child(3) { border-right: none; }
.self-top.second dl { width: 24%; float: left; padding: 0 15px; min-height: 100px; border-right: 1px solid #ddd; }
.self-top.second dl:nth-child(3) { border-right: 1px solid #ddd; }
.self-top.second dl:nth-child(4) { border-right: none; }
.self-area li { padding: 0 }
.self-area span { color: #333; position: relative; padding: 3px 0 2px 25px; letter-spacing: 0; }
.self-area span:before { top: 3px !important; }
.self-area.type li { float: left; width: 10%; }
.self-area.type2 li { float: left; width: 20%; }
.self-area.type3 li { float: left; width: 48%; }
.self-area.type4 li { float: left; width: 30%; }
.result-top ul.caution { text-align: center; font-size: 18px; line-height: 28px; }
}

 @media only screen and (max-width:767px) {
.self-top dl { width: 100%; padding: 0 15px; box-sizing: border-box; border-right: none; }
.self-table.mobile thead { display: none; }
.self-table.mobile tbody { text-align: left; }
.self-table.mobile tbody, .self-table.mobile tbody tr, .self-table.mobile tbody tr td { display: block; float: left; clear: left; width: 100%; box-sizing: border-box; border: none; }
.self-table.mobile tr:nth-child(odd) { background-color: #fafafa; }
.self-table.mobile tbody tr { padding-top: 14px; padding-bottom: 14px; /*border-right:1px solid #c6c6c6;*/ }
.self-table.mobile tbody tr:last-child { border-bottom: 1px solid #c6c6c6; }
.self-table.mobile tbody tr th { padding: 0 20px; border-top-width: 0; background-color: transparent; text-align: left; border: transparent; }
.self-table.mobile tbody tr td { border-top-width: 0; text-align: left; padding: 0 20px; }
.self-table.mobile tbody tr th:before, .self-table.mobile tbody tr td:before { color: #333; /*content:attr(data-cell-header);*/ }
.self-table.mobile tbody tr td.name { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.self-table.mobile tbody tr td dl dt.name { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.self-table.mobile tbody tr td.mh45 { min-height: 45px; }
.self-table.mobile label { display: block; font-size: 14px; padding: 0 10px; line-height: 22px; }
.self-table.mobile .inp { margin-bottom: 20px; }
.self-list li { margin: 0; padding: 0; }
.self-list span { color: transparent; font-size: 1px; letter-spacing: -10px; }
.self-list span:before { top: 0 !important; margin-right: 0; }
.self-list.type span { font-size: 16px; letter-spacing: 0; }
.self-list.type span:before { top: 0px !important; }
.result-table { position: relative; width: 100%; margin: 5px 0 10px; border-collapse: collapse; text-align: center; }
.result-table.mobile tbody, .result-table.mobile tbody tr, .result-table.mobile tbody tr td { display: block; float: left; clear: left; width: 100%; box-sizing: border-box; border: none; }
.result-table.mobile tbody tr { padding-top: 14px; padding-bottom: 14px; border-bottom: none; border-left: none; border-right: none; }
.result-table.mobile tbody tr:first-child { border-top-width: 0; }
.result-table.mobile tbody tr:last-child { border-bottom: 1px solid #c6c6c6; }
.result-table.mobile tr:nth-child(odd) { background-color: #fafafa; }
.result-table.mobile tbody tr td:last-child { border-bottom: transparent; }
.result-table.mobile tbody tr th { padding: 5px 20px; border-top-width: 0; background-color: transparent; background: none; border: transparent; }
.result-table.mobile tbody tr td { border-top-width: 0; text-align: left; padding: 0 20px; border-bottom: 1px solid #c6c6c6; }
.self-area li { float: left; width: 40%; }

.re_cont div dl dt { position: relative; transition: all 0.3s ease-out; background: #fff; font-weight: 600; padding: 10px 0; font-size: 16px; width: 100%; height: 50%; margin: 0 auto; border: 1px solid #eee; }
.re_cont.type div dl  .tit02{ border-radius: 0%; padding: 20px 0; width: 100%; font-size: 16px; height:60px; }
.result-top ul.caution { text-align: center; font-size: 14px; line-height: 20px; }





.box-solid { padding: 15px 15px; font-size: 13px; font-weight: 600; color: #777; line-height: 24px;  }
.self-top dl dt { padding: 15px 0; font-size: 15px; font-weight: 400; border-bottom: 1px solid #555; color: #000 }
.self-table tbody td { color: #333; border-bottom: 1px solid #ddd; vertical-align: middle; padding: 20px 15px; font-size: 15px; line-height: 28px; }

}



.btn-a { font-size: 16px; border-radius: 0px !important; padding: 15px 50px; border: 1px solid #4868e1; background-color: #4868e1; color: #fff; cursor: pointer; outline: none; text-decoration: none; text-align: center; }
.btn-a:active { border: 1px solid #4868e1; background: #4868e1; }
.btn-a:hover { border: 1px solid #4868e1; background-color: #fff; color: #4868e1; }

.btn-b { font-size: 16px; border-radius: 0px !important; padding: 15px 50px; border: 1px solid #33539e; background-color: #33539e; color: #fff; cursor: pointer; outline: none; text-decoration: none; text-align: center; }
.btn-b:active { border: 1px solid #33539e; background: #33539e; }
.btn-b:hover { border: 1px solid #33539e; background-color: #fff; color: #33539e; }

.btn-c { font-size: 16px; border-radius: 0px !important; padding: 15px 50px; border: 1px solid #aaa; background-color: #fff; color: #777; cursor: pointer; outline: none; text-decoration: none; text-align: center; }
.btn-c:active { border: 1px solid #dfdfdf; background: #f2f2f2; }
.btn-c:hover { border: 1px solid #000; background-color: #fff; color: #000; }
.result-check { overflow: hidden; box-sizing: border-box; }
.result-top { margin-bottom: 20px; }

.result-top ul.caution strong { }
.result-box { text-align: center; }
.result-box .tit { display: inline-block; width: 30%; font-size: 20px; background: #555; color: #fff; padding: 20px 20px; border-radius: 0px; margin-bottom: 50px; font-weight: 600; }
.result-box ul li strong { font-size: 20px; }
.h350 { height: 350px !important; }
















/* =====================================
  도박중독 약물중독
===================================== */


.self-list { position: relative; display: block; cursor: pointer; }
.self-list li { margin: 0px; padding: 2px 0; }
.self-list li label { display: inline-block; width: 100%; }
.self-list input[type="radio"] { opacity: 0; position: absolute; top: 0; left: 0; cursor: pointer; }

.self-list span { position: relative; padding: 0px; }
.self-list span:before { content: ''; display: inline-block; position: absolute; top: 2px; left: 0; height: 25px; width: 25px; border-radius: 100%; font-size: 12px; text-align: center; margin-right: 2px; transition: all 0.3s ease-out; }
.self-list input + span:before { color: #fff; border: 1px solid #ddd; background: #ddd url('../img/Content/self-ico-check.png') center no-repeat }

.self-list input:checked + span:before { color: #fff; background-color: #9cbe3c; border: 1px solid #9cbe3c; }

.self-list.type li { margin: 0.3em 0; padding: 2px 0 2px 15px; }
/*.self-list.type span { color: #333; position: relative; padding: 0 0 0 10px; font-size:12px; }*/
.self-list.type span:before { top: 1px; left: -25px; }



.self-list span { color: transparent; font-size:1px;  }
.self-list span:before { top: 0 !important; margin-right: 0; }
/* =====================================
   result-table
===================================== */

.result-table { position: relative; width: 100%; border-collapse: collapse; text-align: center; }
.result-table:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: #63605e; }
.result-table caption { position: static; }
.result-table thead { background: #fafafa; }
.result-table thead th { border-bottom: 1px solid #63605e; background-color: #f8f8f8; background-image: url(../images/cont/th_bg.png); }
.result-table th, .result-table td { padding: 20px 5px; border: 1px solid #ccc; vertical-align: middle; }
.result-table td .tl { text-align: left; }
.result-table th:first-child, .result-table td:first-child { border-left: none; }
.result-table th:last-child, .result-table td:last-child { border-right: none; }
.result-table th { text-align: center; letter-spacing: -1px; font-weight:700 }
.result-table .tl { text-align: left; }
.result-table tfoot th, .result-table tfoot td { border-top: none; }
.result-table td img { vertical-align: middle; }
.result-table .list th { padding: 12px 20px; }
.result-table .list td { padding: 12px 20px; }
.result-table .list th { background-color: #f8f8f8; background-image: url(../images/cont/th_bg.png); }
.result-table .list.TDL td { text-align: left !important; }


@media only screen and (min-width:1200px) {
.re_cont div { width: 46.5%; float: left; padding: 14px; border-bottom: none; border-right: 1px solid #ddd; }
.re_cont div:last-child { border-right: none; }
.re_cont.w3 div { width: 33.33333%; }
.re_cont div dl dt { border-radius: 0%; padding: 30px 0; height: 20px; width: 80px; font-size: 18px; }
.re_cont.type div dl dt { border-radius: 0%; padding: 30px 0; width: 100%; font-size: 16px; }
.re_cont.type div dl  .tit02{ border-radius: 0%; padding: 20px 0; width: 100%; font-size: 16px; height:60px; }
}
@media only screen and (min-width:1200px) {
.self-wrap h4 { font-size: 22px; padding: 20px 0 30px 0; }
.self-wrap h5 { font-size: 20px; padding: 0 0 20px 0; }
.self-wrap h6 { font-size: 20px; }
.self-top dl { width: 33.3%; float: left; padding: 0 15px; min-height: 100px; border-right: 1px solid #ddd; box-sizing: border-box; }
.self-top dl dt { font-size: 16px; }
.self-top dl:nth-child(2) { border-right: 1px solid #ddd; }
.self-top dl:nth-child(3) { border-right: none; }
.self-top.second dl { width: 24%; float: left; padding: 0 15px; min-height: 100px; border-right: 1px solid #ddd; }
.self-top.second dl:nth-child(3) { border-right: 1px solid #ddd; }
.self-top.second dl:nth-child(4) { border-right: none; }
.self-area li { padding: 0 }
.self-area span { color: #333; position: relative; padding: 3px 0 2px 25px; letter-spacing: 0; }
.self-area span:before { top: 3px !important; }
.self-area.type li { float: left; width: 10%; }
.self-area.type2 li { float: left; width: 20%; }
.self-area.type3 li { float: left; width: 48%; }
.self-area.type4 li { float: left; width: 30%; }

}
@media only screen and (max-width:767px) {
.self-top dl { width: 100%; padding: 0 15px; box-sizing: border-box; border-right: none; }

.self-table.mobile thead { display: none; }
.self-table.mobile tbody { text-align: left; }
.self-table.mobile tbody, .self-table.mobile tbody tr, .self-table.mobile tbody tr td { display: block; float: left; clear: left; width: 100%; box-sizing: border-box; border: none; }
.self-table.mobile tr:nth-child(odd) { background-color: #fafafa; }
.self-table.mobile tbody tr { padding-top: 14px; padding-bottom: 14px; /*border-right:1px solid #c6c6c6;*/ }
.self-table.mobile tbody tr:last-child { border-bottom: 1px solid #c6c6c6; }
.self-table.mobile tbody tr th { padding: 0 20px; border-top-width: 0; background-color: transparent; text-align: left; border: transparent; }
.self-table.mobile tbody tr td { border-top-width: 0; text-align: left; padding: 0 20px; }
.self-table.mobile tbody tr th:before, .self-table.mobile tbody tr td:before { color: #333; /*content:attr(data-cell-header);*/ }
.self-table.mobile tbody tr td.name { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.self-table.mobile tbody tr td dl dt.name { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.self-table.mobile tbody tr td.mh45 { min-height: 45px; }
.self-table.mobile label { display: block; font-size: 14px; padding: 0 10px; line-height: 22px; }
.self-table.mobile .inp { margin-bottom: 20px; }

.self-list li { margin: 0; padding: 5px 0px; }
.self-list span { color: #000; font-size: 14px;letter-spacing: -0.5px; padding: 0px 0 0px 30px }
.self-list span:before { top: 0 !important; margin-right: 0; }

.self-list.type span { font-size: 15px; letter-spacing: 0; }
.self-list.type span:before { top: 0px !important; }

.self-list.mobile label {
    display: block;
    font-size: 14px;
    padding: 0px;
    line-height: 22px;

.self-list span:before { content: ''; display: inline-block; position: absolute; top: 2px; left: 0; height: 15px; width: 15px; border-radius: 100%; font-size: 12px; text-align: center; margin-right: 2px; transition: all 0.3s ease-out; }
}


.result-table { position: relative; width: 100%; margin: 5px 0 10px; border-collapse: collapse; text-align: center; }
.result-table.mobile tbody, .result-table.mobile tbody tr, .result-table.mobile tbody tr td { display: block; float: left; clear: left; width: 100%; box-sizing: border-box; border: none; }
.result-table.mobile tbody tr { padding-top: 14px; padding-bottom: 14px; border-bottom: none; border-left: none; border-right: none; }
.result-table.mobile tbody tr:first-child { border-top-width: 0; }
.result-table.mobile tbody tr:last-child { border-bottom: 1px solid #c6c6c6; }
.result-table.mobile tr:nth-child(odd) { background-color: #fafafa; }
.result-table.mobile tbody tr td:last-child { border-bottom: transparent; }
.result-table.mobile tbody tr th { padding: 5px 20px; border-top-width: 0; background-color: transparent; background: none; border: transparent; }
.result-table.mobile tbody tr td { border-top-width: 0; text-align: left; padding: 0 20px; border-bottom: 1px solid #c6c6c6; }
.self-area li { float: left; width: 40%; }


}

.result-check { overflow: hidden; box-sizing: border-box; }
.result-top { margin-bottom: 20px; }

.result-top ul.caution strong { }
.result-box { text-align: center; }
.result-box .tit { display: inline-block; width: 30%; font-size: 20px; background: #9cbe3c; color: #fff; padding: 20px 20px; border-radius: 0px; margin-bottom: 50px; font-weight: 600; }
.result-box ul li strong { font-size: 20px; }
.h350 { height: 350px !important; }
.h380 { height: 380px !important; }





.self-list02 {position: relative;display: block; cursor: pointer;}
.self-list02 li {margin:0.3em; padding:2px 0;}
.self-list02 input[type="checkbox"] {opacity: 0;position: absolute;	top: 0;left: 0;cursor: pointer;}
.self-list02 li label {display:inline-block; width:100%;}
.self-list02 span {position: relative;padding:2px 0 2px 25px;}
.self-list02 span:before {
	content: '';
	display: inline-block;position: absolute;top: 2px;left: 0;
	height: 20px;
	width: 20px;
	border-radius: 2%;
	font-size: 12px;text-align:center;margin-right:2px;transition:all 0.3s ease-out;
  }

.self-list02 input + span:before {color: #fff;border: 1px solid #ddd;background:#ddd url('../img/Content/self-ico-check.png') center no-repeat}
.self-list02 input:checked + span:before {color: #fff;background-color:#5bbfce ;border: 1px solid #5bbfce ;}


.self-list02.type li {margin:0.3em 0; padding:2px 0 2px 15px;}
.self-list02.type span {color:#333;position: relative;padding:0 0 0 10px;}
.self-list02.type span:before {top: 1px;left: -28px;}


@media only screen and (min-width:767px) {
	.self-list02 li {margin:0; padding:0;}
	.self-list02 span {color:transparent;font-size:1px;letter-spacing:-10px;}
	.self-list02 span:before {top:0 !important;margin-right:0;}

	.self-list02.type li {margin:0.3em;;}
	.self-list02.type span {color:#333;position: relative;font-size:16px;letter-spacing:0;}
	.self-list02.type span:before {top:5px !important;}
    
}

@media only screen and (max-width:480px)  {
.result-top ul.caution { text-align: center; font-size: 14px; line-height: 20px; }
/*br {display:none;}*/
}