﻿
/*심뇌혈관질환이란?*/
.disease_wrap .des_list { margin: 30px 0; display: table; table-layout: fixed; width: 100%; border: 1px solid #e5e5e5; }
.disease_wrap .des_list li { position: relative; display: table-cell; padding: 40px 25px; text-align: center; border-right: 1px solid #e5e5e5; word-break: keep-all; }
.disease_wrap .des_list li:last-child { border-right: 0; }
.disease_wrap .des_list li.icon1 { background:url('/nanum/site/builder/dir/jbccvc/img/menu3424/dis_icon01.png')no-repeat 50% 45%; }
.disease_wrap .des_list li.icon2 {background:url('/nanum/site/builder/dir/jbccvc/img/menu3424/dis_icon02.png')no-repeat 50% 45%;}
.disease_wrap .des_list li.icon3 {background:url('/nanum/site/builder/dir/jbccvc/img/menu3424/dis_icon03.png')no-repeat 50% 45%; }
.disease_wrap .des_list li .tit { font-size: 20px; color: #111; font-family: "Lato","NotoKrB", sans-serif; }
.disease_wrap .des_list li .tit strong { font-family: font-family: "Lato","NotoKrB", sans-serif; }
.disease_wrap .des_list li p { padding-top: 110px; color: #333; font-size:15px; font-family: 'NotoKrR',sans-serif;}

/*예방관리수칙*/
.rule_wrap .rule_list {border-top:2px solid #000; font-size:0; line-height:0;}
.rule_wrap .rule_list > li {padding: 32px 32px 32px 200px; border-bottom:1px dashed #ddd; background-position:5% 50%; background-repeat:no-repeat; font-size:15px; line-height:1; word-break:keep-all; }
.rule_wrap .rule_list > li .tit {font-size:20px; color:#222; font-family:'NotoKrB', sans-serif; line-height:1; margin-bottom:22px;  word-break:keep-all;}
.rule_wrap .rule_list > li .tit span {min-width:50px; text-align:center; display:inline-block; padding:8px 20px; background:url('/nanum/site/builder/dir/jbccvc/img/menu3424/rule_bg.png')no-repeat 0% 0%; background-size:cover; font-size:14px; font-family:'NotoKrB',sans-serif; color:#fff; border-radius:50px; margin-right:15px;}
.rule_wrap .rule_list > li > ul > li {line-height:1.4; margin:4px 0; background:url('/nanum/site/builder/dir/jbccvc/img/menu3424/bul_02.png')no-repeat 0% 6px; padding-left:15px;}
.rule_wrap .rule_list li.icon01 {background-image:url('/nanum/site/builder/dir/jbccvc/img/menu3424/rule_ico01.png');}
.rule_wrap .rule_list li.icon02 {background-image:url('/nanum/site/builder/dir/jbccvc/img/menu3424/rule_ico02.png');}
.rule_wrap .rule_list li.icon03 {background-image:url('/nanum/site/builder/dir/jbccvc/img/menu3424/rule_ico03.png');}
.rule_wrap .rule_list li.icon04 {background-image:url('/nanum/site/builder/dir/jbccvc/img/menu3424/rule_ico04.png');}
.rule_wrap .rule_list li.icon05 {background-image:url('/nanum/site/builder/dir/jbccvc/img/menu3424/rule_ico05.png');}
.rule_wrap .rule_list li.icon06 {background-image:url('/nanum/site/builder/dir/jbccvc/img/menu3424/rule_ico06.png');}
.rule_wrap .rule_list li.icon07 {background-image:url('/nanum/site/builder/dir/jbccvc/img/menu3424/rule_ico07.png');}
.rule_wrap .rule_list li.icon08 {background-image:url('/nanum/site/builder/dir/jbccvc/img/menu3424/rule_ico08.png');}
.rule_wrap .rule_list li.icon09 {background-image:url('/nanum/site/builder/dir/jbccvc/img/menu3424/rule_ico09.png');}

/*위험인자*/
.disease_wrap .danger_wrap {width:100%; background:#eaeffa; margin:20px 0;}
.disease_wrap .inner {text-align:center; padding:30px;}
.disease_wrap .danger_wrap ul {display:inline-block; background:url('/nanum/site/builder/dir/jbccvc/img/menu3424/border_line.png')repeat-x 0 50%;}
.disease_wrap .danger_wrap ul.mar0 {margin:0 30px 30px 30px;}
.disease_wrap .danger_wrap ul li {float:left;  margin-left:20px; text-align:center;  font-family:'NotoKrM',sans-serif; }
.disease_wrap .danger_wrap ul li:first-child {margin-left:0;}
.disease_wrap .danger_wrap ul li span {display:inline-block; width:100px; height:100px; line-height:100px; background:#fff; border-radius:100px; border:2px solid #4b85bd; box-shadow:5px 5px 0 #fff; color:#0c76b9;}

.disease_wrap .danger_wrap ul li.no1 span {border-color: #34b0ff; color:#2096d5;}
.disease_wrap .danger_wrap ul li.no2 span {border-color: #0baaff; color:#2096d5;}
.disease_wrap .danger_wrap ul li.no3 span {border-color: #2a89e0; color:#2a89e0;}
.disease_wrap .danger_wrap ul li.no4 span {border-color: #1880e3; color:#1880e3;}
.disease_wrap .danger_wrap ul li.no5 span {border-color: #0c76b9; color:#0c76b9;}
.disease_wrap .danger_wrap ul li.no6 span {border-color: #404793; color:#404793;}

/******************************1024******************************/
@media all and (max-width:1024px){

/*심뇌혈관질환이란?*/
.disease_wrap .des_list li {padding: 30px 25px;}
.disease_wrap .des_list li .tit { font-size: 18px;}
.disease_wrap .des_list li p { padding-top: 110px; font-size:14px;}

/*예방관리수칙*/
.rule_wrap .rule_list > li {font-size:14px;}
.rule_wrap .rule_list > li .tit {font-size:20px; }
.rule_wrap .rule_list > li .tit span {font-size:14px;}


}



/******************************900******************************/
@media all and (max-width:900px){

/*위험인자*/
.disease_wrap .inner {padding:20px;}
.disease_wrap .danger_wrap ul {display:inline-block; background:none;}
.disease_wrap .danger_wrap ul.mar0 {margin:0 20px 20px 20px;}
.disease_wrap .danger_wrap ul li {float:none; display:inline-block; margin:5px 5px auto;}


}


/******************************767******************************/
@media all and (max-width:767px){

/*심뇌혈관질환이란?*/
.disease_wrap .des_list  {margin-bottom:20px;}
.disease_wrap .des_list li {display:inline-block; box-sizing:border-box; width:100%; padding: 30px 25px 30px 90px; border-right:0; border-top:1px solid #e5e5e5;}
.disease_wrap .des_list li:first-child {border:0;}
.disease_wrap .des_list li .tit { font-size: 16px;text-align:left;}
.disease_wrap .des_list li p { padding-top: 0; font-size:13px; text-align:left;}
.disease_wrap .des_list li.icon1,
.disease_wrap .des_list li.icon2,
.disease_wrap .des_list li.icon3 {background-position:5% 50%; background-size:50px auto;}

/*예방관리수칙*/
.rule_wrap .rule_list > li {padding: 120px 10px 32px 10px; font-size:13px; border-bottom:1px dashed #ddd; background-position:50% 10%; background-size:85px auto;}
.rule_wrap .rule_list > li .tit {font-size:18px; margin-bottom:16px; line-height:1.3; text-align:center;}
.rule_wrap .rule_list > li .tit span {width:50px; padding:6px 10px; font-size:13px; display:block; margin:15px auto; }

/*위험인자*/
.disease_wrap .danger_wrap ul li span {width: 80px; height: 80px; line-height: 80px;}

}

