@charset "utf-8";



/* 그래프 애니메이션*/
@-webkit-keyframes animate-width {
  0% {
    width: 0;
  }
  100% {
    visibility: visible;
  }
}
@-moz-keyframes animate-width {
  0% {
    width: 0;
  }
  100% {
    visibility: visible;
  }
}
@keyframes animate-width {
  0% {
    width: 0;
  }
  100% {
    visibility: visible;
  }
}
@-webkit-keyframes animate-height {
  0% {
    height: 0;
  }
  100% {
    visibility: visible;
  }
}
@-moz-keyframes animate-height {
  0% {
    height: 0;
  }
  100% {
    visibility: visible;
  }
}
@keyframes animate-height {
  0% {
    height: 0;
  }
  100% {
    visibility: visible;
  }
}

@-webkit-keyframes animate-rotate {
  0% {
    transform: rotate(270deg);
	visibility: hidden;
  }
   10% {
    transform: rotate(270deg);
  }
  100% {
    visibility: visible;
  }
}
@-moz-keyframes animate-rotate {
  0% {
    transform: rotate(270deg);
	visibility: hidden;
  }
   10% {
    transform: rotate(270deg);
  }
  100% {
    visibility: visible;
  }
}
@keyframes animate-rotate {
  0% {
    transform: rotate(270deg);
	visibility: hidden;
  }
   10% {
    transform: rotate(270deg);
  }
  100% {
    visibility: visible;
  }
}

/* CSS Document */
.factcheck-wrap {}
.article-body.type02 .article-text .text .template-box .bubble .text { width:auto;}
.template-box {margin:40px 0 20px; text-align:left; padding:20px; border-bottom:1px solid #e5e5e5;  border-top:1px solid #e5e5e5; background-color:#eff1f6; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius: 8px; cursor:pointer;}
.template-box .template-box-in {position: relative; clear:both; display:table; width:100%;text-align:left; min-height:170px; }
.template-box .template-box-in:after{ content:" "; display:block; clear:both; }    
.template-box .title-box { position:absolute; top:-40px; display:inline-block; padding:10px 20px 10px;border-radius: 20px; border:1px solid #e5e5e5; background-color:#fff; font-weight:bold; font-size:15px; line-height:1.5em; }

.template-box .info-box { display:table-cell;padding-top:20px; }
.template-box .info {position:relative; overflow:hidden; width:100%;  }
.template-box .info-box  .photo {float:left;  width:80px; text-align:center; margin-right:15px;}
.template-box .info-box  .photo .profile{ display: inline-block;  width: 80px; height: 80px;  background-size: 135px 80px;  background-position: center top;  background-repeat: no-repeat; border-radius: 50%; vertical-align: top;margin-right: 8px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='',sizingMethod='scale');  -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='',sizingMethod='scale');}
.template-box .info-box .photo .name { display:block; font-size:13px; text-align:center; padding-top:5px;}
.template-box .bubble  {float:left; position: relative;max-width:70%; min-height:90px; background: #fff;-webkit-border-radius:  0 15px 15px 15px;-moz-border-radius: 0 15px 15px 15px;border-radius:  0 15px 15px 15px;border: #dbdddd solid 1px;}
.template-box .bubble:after {content: ''; position: absolute;width: 0; height: 0;  border: 20px solid #fff;border-left-width: 0; border-top-width: 0; border-bottom-color: transparent;z-index: 0;left: -15px;top: 0px;}
.template-box .bubble:before {content: ''; position: absolute;width: 0; height: 0;  border: 22px solid #dbdddd;border-left-width: 0; border-top-width: 0; border-bottom-color: transparent;z-index: 0;left: -17px;top: -1px;}
.template-box .bubble .text { font-size:15px; line-height:1.6em; color:#000; min-width:150px; max-width:100%; cursor:pointer;padding: 20px; margin:0; }

.template-box .appraise-box {display:table-cell;width:210px; height:170px; vertical-align:middle;  }
.template-box .appraise-box  .appraise-all-reviewer {display:table; width:210px; text-align:center;  margin-bottom:10px; }
.template-box .appraise-box  .appraise-all-reviewer .appraise-all-in { display:table-cell;width: 210px; height:130px; vertical-align:middle; text-align:center;}
.template-box .appraise-box  .appraise-all-reviewer .bg-star {  display: block; height: 37px;background-position: 0 -116px;}
.template-box .appraise-box  .appraise-all-reviewer .item-star { display:inline-block;  width: 210px; height: 37px; background-position: 0 -70px;}
.template-box .appraise-box  .appraise-all-reviewer .item-text { font-size:17px; padding:10px 0 0;}
.template-box .appraise-box  .appraise-all-reviewer .item-text strong { font-size:20px;}
.template-box .appraise-box  .appraise-all-netizen {display:table; width:210px; text-align:center; background-color:#e3e5e9; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius: 15px; height:35px; }
.template-box .appraise-box  .appraise-all-netizen .appraise-all-in {display:table-cell; vertical-align:middle; text-align:center; }
.template-box .appraise-box  .appraise-all-netizen .item-o-n { height:16px; width:91px; background-size: 91px 16px; vertical-align:middle;}
.template-box .appraise-box  .appraise-all-netizen .item-text { display:inline-block; line-height:1.2em; height:middle; font-size:13px;}
.template-box .appraise-box  .appraise-all-netizen .item-color .bg-text { padding-left:0; }


/*평점 아이템*/
.template-box .inner-txt {overflow: hidden; font-size: 0;line-height: 0; text-indent: -9999px;}
.template-box .item-star, 
.template-box .bg-star { display: block; background: url(http://img.hani.co.kr/section-image/17/news/fact/images/bg_star.png) no-repeat 0 0;}
.template-box .bg-star {animation-delay: 0.8s; -webkit-animation-delay: 0.8s;}

.template-box .item-fact {display: inline-block;  background:url(http://img.hani.co.kr/section-image/17/news/fact/images/bg_fact.png) no-repeat 0 0; width:170px; height:132px; text-align:center;}
.template-box .item-faked { display:inline-block; background:url(http://img.hani.co.kr/section-image/17/news/fact/images/bg_faked.png) no-repeat 0 0; width:170px;height:132px;}
.template-box .item-color{  display:inline-block; width:100px; color:#fff; height:15px; background-color:#333;}
.template-box .item-color.fact { background-color:#257cd9;}
.template-box .item-color.faked { background-color:#fa3525;}
.template-box .item-color.meter1 { background-color:#01ab00;}
.template-box .item-color.meter2 { background-color:#7fd502;}
.template-box .item-color.meter3 { background-color:#ffef01; color:#333;}
.template-box .item-color.meter4 { background-color:#fb7e00;}
.template-box .item-color.meter5 { background-color:#fb3525;}
.template-box .item-color .bg-text { padding-left:5px; line-height:1.2em;}

.template-box .item-o { position:relative; display:inline-block;  width:204px;height:101px; background:url(http://img.hani.co.kr/section-image/17/news/fact/images/bg_meter.png) no-repeat 0 0;}
.template-box .item-o  .bg-meter { display: block; height: 60%; left: 0; margin:0 auto; position: absolute;right: 0; top: 30px; transform-origin: bottom center;transform: rotate(270deg); }
.template-box .item-o.meter1 .bg-meter{transform: rotate(288deg);}
.template-box .item-o.meter2 .bg-meter{transform: rotate(324deg);}
.template-box .item-o.meter3 .bg-meter{transform: rotate(360deg);}
.template-box .item-o.meter4 .bg-meter{transform: rotate(396deg);}
.template-box .item-o.meter5 .bg-meter{transform: rotate(442deg);}


.template-box .tBar-ani{

 -webkit-animation: animate-rotate;
  -moz-animation: animate-rotate;
  animation: animate-rotate;
  animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
  -webkit-animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
  -moz-animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
  animation-duration: 2s;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}
.template-box .hBar-ani{
 visibility: hidden;
  width:0;
 -webkit-animation: animate-height;
  -moz-animation: animate-height;
  animation: animate-height;
  animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
  -webkit-animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
  -moz-animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
  animation-duration: 0.7s;
  -webkit-animation-duration: 0.7s;
  -moz-animation-duration: 0.7s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}
.template-box .wBar-ani{
 visibility: hidden;
  width:0;
 -webkit-animation: animate-width;
  -moz-animation: animate-width;
  animation: animate-width;

  animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
  -webkit-animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
  -moz-animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
  animation-duration: 0.7s;
  -webkit-animation-duration: 0.7s;
  -moz-animation-duration: 0.7s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}





/*type2*/
.factcheck-wrap { min-width:600px;}
.article-body.type02 .article-text .text .template-box2 .bubble .text { width:auto;}
.template-box2 {margin:40px 0 20px; text-align:left; padding:20px 20px 10px; border-bottom:1px solid #e5e5e5;  border-top:1px solid #e5e5e5; background-color:#eff1f6; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius: 8px; cursor:pointer;}
.template-box2 .template-box-in {position: relative; clear:both; display:table; width:100%;text-align:left; min-height:170px; }
.template-box2 .template-box-in:after{ content:" "; display:block; clear:both; }    
.template-box2 .title-box { position:absolute; top:-40px; display:inline-block; padding:10px 20px 10px;border-radius: 20px; border:1px solid #e5e5e5; background-color:#fff; font-weight:bold; font-size:15px; line-height:1.5em; }

.template-box2 .box-table { display:table;padding-top:20px; width:100%;}
.template-box2 .info-box { display:table-cell; }
.template-box2 .info {position:relative; overflow:hidden; width:100%;  }
.template-box2 .info-box  .photo {float:left;  width:80px; text-align:center; margin-right:15px;}
.template-box2 .info-box  .photo .profile{ display: inline-block;  width: 80px; height: 80px;  background-size: 135px 80px;  background-position: center top;  background-repeat: no-repeat; border-radius: 50%; vertical-align: top;margin-right: 8px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='',sizingMethod='scale');  -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='',sizingMethod='scale');}
.template-box2 .info-box .photo .name { display:block; font-size:13px; text-align:center; padding-top:5px;}
.template-box2 .bubble  {float:left; position: relative;max-width:70%; min-height:90px; background: #fff;-webkit-border-radius:  0 15px 15px 15px;-moz-border-radius: 0 15px 15px 15px;border-radius:  0 15px 15px 15px;border: #dbdddd solid 1px;}
.template-box2 .bubble:after {content: ''; position: absolute;width: 0; height: 0;  border: 20px solid #fff;border-left-width: 0; border-top-width: 0; border-bottom-color: transparent;z-index: 0;left: -15px;top: 0px;}
.template-box2 .bubble:before {content: ''; position: absolute;width: 0; height: 0;  border: 22px solid #dbdddd;border-left-width: 0; border-top-width: 0; border-bottom-color: transparent;z-index: 0;left: -17px;top: -1px;}
.template-box2 .bubble .text { font-size:15px; line-height:1.6em; color:#000; min-width:150px; max-width:100%; cursor:pointer;padding: 20px; margin:0; }

.template-box2 .appraise-all-reviewer {display:table-cell; width:200px; vertical-align:middle;text-align:center;  }
.template-box2 .appraise-all-reviewer .appraise-all-in {}
.template-box2 .appraise-all-reviewer .item-text { font-size:15px; padding:5px 0 0;}
.template-box2 .appraise-all-reviewer .item-text strong { font-size:18px;}

.template-box2 .appraise-all-netizen { display:block; width:100%; text-align:left;}
.template-box2 .appraise-all-netizen .appraise-all-in { display:block; di width:100%;  border-top:1px dashed #b9bfcd; padding-top:10px; margin-top:20px;} 
.template-box2 .appraise-all-netizen .item-o-n { height:16px; width:91px; vertical-align:middle;}
.template-box2 .appraise-all-netizen .item-text { display:inline-block; font-size:13px; padding: 0 10px; color:#000;}
.template-box2 .appraise-all-netizen .item-text .count {}
.template-box2 .appraise-all-netizen .item-text .count em {}
.template-box2 .appraise-all-netizen .item-text .score {}
.template-box2 .appraise-all-netizen .item-text .bar { color:#bdbec2; padding: 0 6px;}
.template-box2 .appraise-all-netizen .item-color .bg-text { padding-left:0; }


/*평점 아이템*/
.template-box2 .inner-txt {overflow: hidden; font-size: 0;line-height: 0; text-indent: -9999px;}

.template-box2 .item-star, 
.template-box2 .bg-star { display: block; background: url(http://img.hani.co.kr/section-image/17/news/fact/images/bg_star.png) no-repeat 0 0; background-size: 180px 315px;}

.template-box2 .bg-star {  display: block; height: 29px; background-position: 0 -87px;}
.template-box2 .item-star { display:inline-block;  width: 158px; height: 29px; background-position: 0 -52px;}

.template-box2 .item-fact {display: inline-block;  background:url(http://img.hani.co.kr/section-image/17/news/fact/images/bg_fact.png) no-repeat 0 0; width:170px; height:132px; text-align:center;}
.template-box2 .item-faked { display:inline-block; background:url(http://img.hani.co.kr/section-image/17/news/fact/images/bg_faked.png) no-repeat 0 0; width:170px; height:132px; }
.template-box2 .item-dispute { display:inline-block; background:url(http://img.hani.co.kr/section-image/17/news/fact/images/bg_dispute.png) no-repeat 0 0; width:180px;height:77px;}
.template-box2 .item-color{  display:inline-block; width:100px; color:#fff; height:20px; background-color:#333; font-size:13px;}
.template-box2 .item-color .bg-text { padding-left:5px; line-height:1.5em;}

.template-box2 .item-o { position:relative; display:inline-block; background:url(http://img.hani.co.kr/section-image/17/news/fact/images/bg_meter_kisa.png) no-repeat 0 0;  width:200px;height:99px;background-size:200px 99px; }
.template-box2 .item-o  .bg-meter img { width:20px; height:61px;}
.template-box2 .item-o  .bg-meter { display: block; height: 50%; left: 0; margin:0 auto; position: absolute; right: 0; top: 42px; transform-origin: bottom center;transform: rotate(278deg); }
.template-box2 .item-o.meter1 .bg-meter{transform: rotate(278deg);}
.template-box2 .item-o.meter2 .bg-meter{transform: rotate(320deg);}
.template-box2 .item-o.meter3 .bg-meter{transform: rotate(360deg);}
.template-box2 .item-o.meter4 .bg-meter{transform: rotate(405deg);}
.template-box2 .item-o.meter5 .bg-meter{transform: rotate(445deg);}
.template-box2 .item-o.item-dispute {display:inline-block; background:url(http://img.hani.co.kr/section-image/17/news/fact/images/bg_dispute.png) no-repeat 0 0; width:180px;height:77px;}
.template-box2 .item-o.item-dispute  .bg-meter { display:none;}



/* 메인, 리스트 별점 공통 */
.template-box2 { cursor:pointer;}
.template-box2 .appraise-all-reviewer  span.item-text { position:absolute; bottom:30px; display:block;}
.template-box2 .appraise-all-netizen .item-text .item-color { width:auto;background-color:transparent; color:#666; }
.template-box2 .appraise-all-netizen .item-text .item-color.meter1:before,
.template-box2 .appraise-all-netizen .item-text .item-color.meter2:before,
.template-box2 .appraise-all-netizen .item-text .item-color.meter3:before,
.template-box2 .appraise-all-netizen .item-text .item-color.meter4:before,
.template-box2 .appraise-all-netizen .item-text .item-color.meter5:before { content: "● "; font-size:11px;  font-weight: normal; vertical-align:baseline; }
.template-box2 .appraise-all-netizen .item-text .item-color.meter1 { color:#049e05;}
.template-box2 .appraise-all-netizen .item-text .item-color.meter2 { color:#71be04;}
.template-box2 .appraise-all-netizen .item-text .item-color.meter3 { /*color:#ffef01;*/ color:#b5ab1c;}
.template-box2 .appraise-all-netizen .item-text .item-color.meter4 { color:#fb7e00;}
.template-box2 .appraise-all-netizen .item-text .item-color.meter5 { color:#fb3525;}
.template-box2 .appraise-all-netizen .item-text .item-color.dispute:before,
.template-box2 .appraise-all-netizen .item-text .item-color.fact:before,
.template-box2 .appraise-all-netizen .item-text .item-color.faked:before { content: "■ ";}
.template-box2 .appraise-all-netizen .item-text .item-color.fact { background-color:transparent; color:#257cd9;}
.template-box2 .appraise-all-netizen .item-text .item-color.faked { background-color:transparent; color:#fa3525;}
.template-box2 .appraise-all-netizen .item-text .item-color.dispute { color:#000;}
.template-box2 .appraise-all-netizen .item-text .item-color.star { color:#000;}




.template-box2 .tBar-ani{

 -webkit-animation: animate-rotate;
  -moz-animation: animate-rotate;
  animation: animate-rotate;
  animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
  -webkit-animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
  -moz-animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
  animation-duration: 2s;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}
.template-box2 .hBar-ani{
 visibility: hidden;
  width:0;
 -webkit-animation: animate-height;
  -moz-animation: animate-height;
  animation: animate-height;
  animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
  -webkit-animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
  -moz-animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
  animation-duration: 0.7s;
  -webkit-animation-duration: 0.7s;
  -moz-animation-duration: 0.7s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}
.template-box2 .wBar-ani{
 visibility: hidden;
  width:0;
 -webkit-animation: animate-width;
  -moz-animation: animate-width;
  animation: animate-width;

  animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
  -webkit-animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
  -moz-animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
  animation-duration: 0.7s;
  -webkit-animation-duration: 0.7s;
  -moz-animation-duration: 0.7s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

