@charset "utf-8";

/*상단_타이틀및검색*/
.dm_intro {text-align:center;}
.dm_ttl {display:inline-block; position:relative; padding-right:30px; font-size:63px;}
.dm_ttl:after {content:""; position:absolute; right:-5px; bottom:10px; width:18px; height:18px; border-radius:50%; background:#0099ff;}
.dm_sttl {margin-top:60px; font-size:24px; color:#0099ff; font-weight:500;}
.dm_txt {margin-top:20px; color:#444; font-size:15px; font-weight:500; letter-spacing:-.5px;}

.dm_search {width:320px; max-width:90%; margin:60px auto 0; border-bottom:3px solid #0099ff;}
.dm_search input[type=text] {width:calc(100% - 40px); padding:15px 0; border:0; background:none;}
.dm_search input[type=submit] {width:35px; height:35px; text-indent:-100%; font-size:0; color:#f5f5f5; overflow:hidden; border:0; background:#f5f5f5 url('/open_content/theme/share/img/ic_search.gif') no-repeat center center;}
.dm_search input[type=submit]:hover {cursor:pointer}

/*0.첫화면_하단라운드링크*/
/* .dm_link {position:absolute; top:670px; width:100%; padding-top:400px;} */
.dm_link {position:relative; margin-top:200px; padding-top:400px;}
.dm_link>div>a {display:block; position:absolute; top:0; text-align:center; width:57%; height:400px; font-weight:600; color:#fff; font-size:40px;}
#dm_link01>a {right:46.5%; padding-right:8%; border-radius:0 400px 400px 0; background:#0093f5;}
#dm_link02>a {left:46.5%; padding-left:8%; border-radius:400px 0 0 400px; background:rgba(0,39,137,.8);}
.dm_link>div>a>span {position:relative; top:44%; transform:translateY(-50%);}
.dm_link>div>a.on:after {display:block; content:""; position:absolute; bottom:0; margin-left:-55px; width:115px; height:44px; background:url('../../dementia/img/dementia_link_on.png') no-repeat center bottom;}
#dm_link01>a.on:after {left:42%;}
#dm_link02>a.on:after {left:58%;}

/*1.치매환자에요_contents_박스링크*/
.dm_link_con {position:relative; display:none; margin:0 auto;}
#dm_link01 .dm_link_con {max-width:880px;}
#dm_link02 .dm_link_con {max-width:630px;}
/* .dm_link_con:before {content:""; position:absolute; top:-44px; width:115px; height:44px; background:url('../../dementia/img/dementia_link_on.png') no-repeat center bottom;}
#dm_link01 .dm_link_con:before {right:90%;}
#dm_link02 .dm_link_con:before {left:90%;} */
.dm_link_con>ul {display:flex; justify-content:center; flex-wrap:wrap; padding:60px 0;}
.dm_link_con>ul>li {flex:1 1 25%; padding:20px 0;}
.dm_link_con>ul>li>a {position:relative; display:block; width:160px; height:160px; margin:0 auto; padding-top:70px; padding-left:35px; font-size:19px; font-weight:500; color:#111;}
.dm_link_con>ul>li>a:before {content:""; position:absolute; left:0; top:0; right:0; bottom:0; border-radius:60px; background:#f5f5f5; box-shadow:10px 10px 15px #eaeaea, -5px -10px 15px #fff; z-index:-1;}
.dm_link_con>ul>li>a:hover,
.dm_link_con>ul>li.on>a {color:#fff; z-index:1;}
#dm_link01 .dm_link_con>ul>li>a:hover:before,
#dm_link01 .dm_link_con>ul>li.on>a:before {background:linear-gradient(#0090f3,#007ce5);}
#dm_link02 .dm_link_con>ul>li>a:hover:before,
#dm_link02 .dm_link_con>ul>li.on>a:before {background:linear-gradient(#3052a8,#233e91);}

/*박스링크 아이콘적용*/
a[class*=ic_is]:after {content:""; position:absolute; right:20px; top:25px; width:50px; height:50px; background-image:url('/open_content/theme/share/img/ic_is.png'); background-repeat:no-repeat; transition:.4s;}
.ic_is1_01:after {background-position:left top;}
.ic_is1_02:after {background-position:-50px top;}
.ic_is1_03:after {background-position:-100px top;}
.ic_is1_04:after {background-position:-150px top;}
.ic_is1_05:after {background-position:-200px top;}
.ic_is1_06:after {background-position:-250px top;}
.ic_is1_07:after {background-position:-300px top;}
.ic_is1_08:after {background-position:-350px top;}
.on .ic_is1_01:after, .ic_is1_01:hover:after {background-position:left -50px;}
.on .ic_is1_02:after, .ic_is1_02:hover:after {background-position:-50px -50px;}
.on .ic_is1_03:after, .ic_is1_03:hover:after {background-position:-100px -50px;}
.on .ic_is1_04:after, .ic_is1_04:hover:after {background-position:-150px -50px;}
.on .ic_is1_05:after, .ic_is1_05:hover:after {background-position:-200px -50px;}
.on .ic_is1_06:after, .ic_is1_06:hover:after {background-position:-250px -50px;}
.on .ic_is1_07:after, .ic_is1_07:hover:after {background-position:-300px -50px;}
.on .ic_is1_08:after, .ic_is1_08:hover:after {background-position:-350px -50px;}
.ic_is2_01:after {background-position:left -100px;}
.ic_is2_02:after {background-position:-50px -100px;}
.ic_is2_03:after {background-position:-100px -100px;}
.ic_is2_04:after {background-position:-50px -100px;}
.on .ic_is2_01:after, .ic_is2_01:hover:after {background-position:left -150px;}
.on .ic_is2_02:after, .ic_is2_02:hover:after {background-position:-50px -150px;}
.on .ic_is2_03:after, .ic_is2_03:hover:after {background-position:-100px -150px;}

/*2.리스트선택형*/
.select_list {display: none; position:absolute; left:20px; right:20px; margin-top:30px;}
.select_list>ul>li {margin-top:10px;}
.select_list>ul>li>a {position:relative; display:block; padding:12px 30px; font-size:17px; color:#3153aa; font-weight:500; border:3px solid #3153aa; border-radius:30px 0 30px 30px; background:#fff;}
.select_list>ul>li>a:before,
.select_list>ul>li>a:after {content:""; position:absolute; right:30px; top:50%; transition:.5s;}
.select_list>ul>li>a:before {width:25px; height:2px; background:#3153aa;}
.select_list>ul>li>a:after {margin-top:-3px; width:8px; height:8px; border-right:2px solid #3153aa; border-bottom:2px solid #3153aa; transform:rotate(-45deg);}
.select_list>ul>li>a:hover:before {width:15px;}
.select_list>ul>li>a .num {display:inline-block; margin-right:15px; font-size:14px; color:#666;}

/*환자에요 List*/
.select_list_sub {display: none; justify-content: center; padding-bottom: 10%;}
.select_list_sub>ul>li {margin-top:10px;}
.select_list_sub>ul>li>a {position:relative; display:block; padding:12px 30px; font-size:17px; color:#3153aa; font-weight:500; border:3px solid #3153aa; border-radius:30px 0 30px 30px; background:#fff;}
.select_list_sub>ul>li>a:before,
.select_list_sub>ul>li>a:after {content:""; position:absolute; right:30px; top:50%; transition:.5s;}
.select_list_sub>ul>li>a:before {width:25px; height:2px; background:#3153aa;}
.select_list_sub>ul>li>a:after {margin-top:-3px; width:8px; height:8px; border-right:2px solid #3153aa; border-bottom:2px solid #3153aa; transform:rotate(-45deg);}
.select_list_sub>ul>li>a:hover:before {width:15px;}
.select_list_sub>ul>li>a .num {display:inline-block; margin-right:15px; font-size:14px; color:#666;}

#map2{
	width: auto; 
	height: 300px; 
	margin-top: 20px; 
	margin-bottom: 20px;
}

.roadSerch {
  	width: 100px;
    height: 30px;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 500;
    color: #000;
    background-color: skyblue;
    border: none;
    border-radius: 45px;
    box-shadow: 0px 8px 15px rgb(0 0 0 / 10%);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
  }

.roadSerch:hover {
  background-color: #2EE59D;
  box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
  color: #fff;
  transform: translateY(-7px);
}

.dropdown {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 28px;
  width: 150px;
  background: #f2f2f2;
  border: 1px solid;
  border-color: white #f7f7f7 whitesmoke;
  border-radius: 3px;
  background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
  background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
  background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.06));
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  float: right;
}

.dropdown:before, .dropdown:after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 9px;
  right: 10px;
  width: 0;
  height: 0;
  border: 4px dashed;
  border-color: #888888 transparent;
}

.dropdown:before {
  border-bottom-style: solid;
  border-top: none;
}

.dropdown:after {
  margin-top: 7px;
  border-top-style: solid;
  border-bottom: none;
}

.dropdown-select {
  position: relative;
  width: 130%;
  margin: 0;
  padding: 6px 8px 6px 10px;
  height: 28px;
  line-height: 14px;
  font-size: 12px;
  color: #62717a;
  text-shadow: 0 1px white;
  background: #f2f2f2; /* Fallback for IE 8 */
  background: rgba(0, 0, 0, 0) !important; /* "transparent" doesn't work with Opera */
  border: 0;
  border-radius: 0;
  -webkit-appearance: none;
}

.dropdown-select:focus {
  z-index: 3;
  width: 100%;
  color: #394349;
  outline: 2px solid #49aff2;
  outline: 2px solid -webkit-focus-ring-color;
  outline-offset: -2px;
}

.dropdown-select > option {
  margin: 3px;
  padding: 6px 8px;
  text-shadow: none;
  background: #f2f2f2;
  border-radius: 3px;
  cursor: pointer;
}

.dropdown-dark {
  background: #444;
  border-color: #111111 #0a0a0a black;
  background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
  background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
  background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4));
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);
}

.dropdown-dark:before {
  border-bottom-color: #aaa;
}

.dropdown-dark:after {
  border-top-color: #aaa;
}

.dropdown-dark .dropdown-select {
  color: #aaa;
  text-shadow: 0 1px black;
  background: #444;  /* Fallback for IE 8 */
}

.dropdown-dark .dropdown-select:focus {
  color: #ccc;
}

.dropdown-dark .dropdown-select > option {
  background: #444;
  text-shadow: 0 1px rgba(0, 0, 0, 0.4);
}

.survey_radio {
  display: block;
  cursor: pointer;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}
.survey_radio input {
  display: none;
}
.survey_radio input + span {
  line-height: 22px;
  padding-left: 22px;
  display: block;
  position: relative;
}
.survey_radio input + span:not(:empty) {
  padding-left: 30px;
}
.survey_radio input + span:before, .survey_radio input + span:after {
  content: '';
  width: 22px;
  height: 22px;
  display: block;
  border-radius: 50%;
  left: 0;
  top: 0;
  position: absolute;
}
.survey_radio input + span:before {
  background: #D1D7E3;
  transition: background 0.2s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2);
}
.survey_radio input + span:after {
  background: #fff;
  transform: scale(0.78);
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.4);
}
.survey_radio input:checked + span:before {
  transform: scale(1.04);
  background: #5D9BFB;
}
.radio input:checked + span:after {
  transform: scale(0.4);
  transition: transform 0.3s ease;
}
.survey_radio input + span:before {
  transform: scale(0.92);
}
.survey_radio input + span:after {
  transform: scale(0.74);
}
.survey_radio input:checked + span:after {
  transform: scale(0.4);
}

.total_score{
	font-weight: 700 !important;
    color: #222 !important;
}

.resultPop_Y{
	background: linear-gradient( #F95656 50%, #fff 50% ) !important;;
	height: 50% !important;
	top: 25% !important;
}

.resultPop_N{
	background: linear-gradient( #47c9a2 50%, #fff 50% ) !important;;
	height: 50% !important;
	top: 25% !important;
}

.resultPop_footer{
	height: 50px !important;
    line-height: 50px !important;
}

.fa-check-circle{
	color: white;
    font-size: 150px;   
    text-align: center;
}

.fa-exclamation{
	color: white;
    font-size: 150px;   
    text-align: center;
}

.inp {
  position: relative;
  margin: auto;
  width: 100%;
  border-radius: 3px;
  overflow: hidden; }
  .inp .label {
    position: absolute;
    top: 20px;
    left: 12px;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 500;
    transform-origin: 0 0;
    transform: translate3d(0, 0, 0);
    transition: all .2s ease;}
  .inp .focus-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left; }
  .inp input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    border: 0;
    font-family: inherit;
    padding: 16px 12px 0 12px;
    height: 56px;
    font-size: 16px;
    font-weight: 400;
    background: rgba(0, 0, 0, 0.02);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    color: #000;
    transition: all .15s ease; }
    .inp input:not(:placeholder-shown) + .label {
      color: rgba(0, 0, 0, 0.5);
      transform: translate3d(0, -12px, 0) scale(0.75); }
    .inp input:focus {
      background: rgba(0, 0, 0, 0.05);
      outline: none;
      box-shadow: inset 0 -2px 0 #0077FF; }
      .inp input:focus + .label {
        color: #0077FF;
        transform: translate3d(0, -12px, 0) scale(0.75); }
        .inp input:focus + .label + .focus-bg {
          transform: scaleX(1);
          transition: all .1s ease; }
          
.cbx1, .cbx2, .cbx3 {
  position: relative;
  top: 1px;
  width: 17px;
  height: 17px;
  border: 1px solid #c8ccd4;
  border-radius: 3px;
  vertical-align: middle;
  transition: background 0.1s ease;
  cursor: pointer;
}
.cbx1:after, .cbx2:after, .cbx3:after {
  content: '';
  position: absolute;
  top: 1px;
  left: 5px;
  width: 5px;
  height: 11px;
  opacity: 0;
  transform: rotate(45deg) scale(0);
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transition: all 0.3s ease;
  transition-delay: 0.15s;
}
.lbl1, .lbl2, .lbl3 {
  margin-right: 25px;
  vertical-align: middle;
  cursor: pointer;
}
#cbx1:checked ~ .cbx1, #cbx2:checked ~ .cbx2, #cbx3:checked ~ .cbx3{
  border-color: transparent;
  background: #6871f1;
  animation: jelly 0.6s ease;
}
#cbx1:checked ~ .cbx1:after, #cbx2:checked ~ .cbx2:after, #cbx3:checked ~ .cbx3:after{
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

@keyframes jelly {
  from {
    transform: scale(1, 1);
  }
  30% {
    transform: scale(1.25, 0.75);
  }
  40% {
    transform: scale(0.75, 1.25);
  }
  50% {
    transform: scale(1.15, 0.85);
  }
  65% {
    transform: scale(0.95, 1.05);
  }
  75% {
    transform: scale(1.05, 0.95);
  }
  to {
    transform: scale(1, 1);
  }
}

.progressbar-wrapper {
      background: #fff;
      width: 100%;
      padding-top: 10px;
      padding-bottom: 5px;
}

.progressbar li {
      list-style-type: none;
      width: 100%;
      float: left;
      font-size: 12px;
      position: relative;
      text-align: center;
      text-transform: uppercase;
      color: #7d7d7d;
}        

.progressbar li:before {
    width: 60px;
    height: 60px;
    content: "";
    line-height: 60px;
    border: 2px solid #7d7d7d;
    display: block;
    text-align: center;
    margin: 0 auto 3px auto;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    background-color: #fff;
}
.progressbar li:after {
     width: 100%;
     height: 2px;
     content: '';
     position: absolute;
     background-color: #7d7d7d;
     top: 30px;
     left: -50%;
     z-index: 0;
}
.progressbar li:first-child:after {
     content: none;
}

.progressbar li.active {
    color: green;
    font-weight: bold;  
}
.progressbar li.active:before {
    border-color: #55b776;
    background: green;
 }
.progressbar li.active + li:after {
    background-color: #55b776;
}

.progressbar li.active:before {
    background: #55b776  url(user.svg) no-repeat center center;
    background-size: 60%;
}
.progressbar li::before {
    background: #fff url(user.svg) no-repeat center center;
    background-size: 60%;
}

.progressbar {
    counter-reset: step;
}
.progressbar li:before {
    content: counter(step);
    counter-increment: step; 
}
.footer_toggle{display:none;}

/*tank 추가 (2021/10/20*/
/*박스클릭후_2,3단계//체크박스리스트선택*/
.checkbox_list li {margin-top:15px; overflow:hidden;}
.checkbox_list label {position:relative; display:block; width:100%; padding:13px 25px; font-size:20px; color:#999; font-weight:500; border-radius:60px; border:3px solid transparent;}
.checkbox_list label:before {content:""; position:absolute; right:20px; top:10px; width:32px; height:32px; border-radius:50%; border:2px solid #3c3b49; background:linear-gradient(to bottom, #1a1b2b, #26283a);}
.checkbox_list input[type=checkbox],
.checkbox_list input[type=radio]{position:absolute; left:-100%;}
.checkbox_list input[type=checkbox]:checked + label,
.checkbox_list input[type=radio]:checked + label {color:#fff; border-color:#0093f5; background:#31509f;}
.checkbox_list input[type=checkbox]:checked + label:before,
.checkbox_list input[type=radio]:checked + label:before {border-color:#fff; background:#fff;}
.checkbox_list input[type=checkbox]:checked + label:after,
.checkbox_list input[type=radio]:checked + label:after {content:""; position:absolute; right:22px; top:5px; width:17px; height:28px; border-right:5px solid #0093f5; border-bottom:5px solid #0093f5; border-radius:0 4px 0 4px; transform:rotate(45deg);}
.width_50{
	width:49%
}
.result_score{
/* 	padding : 1rem 0; */
	text-align : center;
	margin: 1rem;
}
.fs-20{
	font-size:20px;
}
.layerpop_con.hidden,
.layerpop_result_con.hidden {
	display: none;
}

.layer-title {
    width: 100%;
    padding: 12px 30px 14px;
    color: #fff;
    font-size: 1rem;
    border-radius: 0 30px 30px 30px;
    background: #0093f5;
}

.dementia_question_list > li {
	margin: 1rem 0;
}

.dementia_question_list {
	padding: 1rem 0;
}

.dementia_question_list .question {
	font-size: 1rem;
    color: #0093f5;
    line-height: 24px;
    margin: 0 10px 0 0;
	font-weight: 600;
}

.dementia_question_list .question::before {
    font-size: .9rem;
    background-color: #0093f5;
    content: 'Q';
    width: 24px;
    height: 24px;
    display: inline-block;
    margin-right: 10px;
    background-position: -154px -340px;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    font-weight: 400;
}




/****************************/
@media screen and (max-width:1024px) {
	body {padding-bottom:100px;}
	#contents {padding-top:13.5%;}
}

@media screen and (max-width:800px) {
	.dm_link>div>a>span {top:35%;}
	.dm_link_con>ul>li>a {width:130px; height:130px; padding-left:25px; padding-top:55px;}
	.dm_link_con>ul>li>a:before {border-radius:20px;}
}


@media screen and (max-width:640px) {
	.dm_ttl {padding-right:15px; font-size:6.5vw;}
	.dm_ttl:after {bottom:5px; width:9px; height:9px;}
	.dm_sttl {margin-top:2.5%; font-size:3.3vw; letter-spacing:-.5px;}
	.dm_txt {display:none;}

	.dm_search {margin-top:10%; border-bottom-width:2px;}

	.dm_link {margin-top:18%; padding-top:200px;}
	.dm_link>div>a {height:200px; font-size:5vw; font-weight:500;}

	.dm_link_con>ul {justify-content:flex-start; padding:5% 0;}
	.dm_link_con>ul>li {flex:0 0 33%;}
	.dm_link_con>ul>li>a {text-align:center; width:100%; height:auto; padding-top:80px; padding-left:0; color:#111 !important;}
	.dm_link_con>ul>li>a br {display:none;}
	.dm_link_con>ul>li>a:before {width:70px; height:70px; margin:0 auto;}
	a[class*=ic_is]:after {right:50%; top:13px; margin-right:-26px;}

	.select_list>ul>li>a {font-size:4vw;}
	.select_list>ul>li>a .num {display:none;}
	
	/*tank 추가 (2021.10.20*/
	.checkbox_list li {margin-top:0;}
	.checkbox_list label { font-size:4vw; border:0;}
	.checkbox_list label:before {width:28px; height:28px;}
	.checkbox_list input[type=checkbox]:checked + label {background:none;}
	.checkbox_list input[type=radio]:checked + label {padding-left:1rem;}
	.fs-20{	font-size:16px;}
	
	.fa-exclamation{font-size: 70px;}
	.fa-check-circle{font-size: 70px;}
	.bl_m{margin-top: 60px !important;}
	.con_m{overflow-y: hidden;}
}


@media screen and (max-width:480px) {
	.dm_link_con>ul>li>a {font-size:3.5vw;}
}