@charset "utf-8";


dl{ margin:0; padding:0;}
dt{}
dd{margin:0 0 12px; padding:0 0 0 32px;}

.read{font-size:1.2em; text-align:center; margin:30px auto;}


div.qr_payment{width:80%; margin:0 auto;}

div.flowF{padding:12px; border:2px solid #CCCCCC; text-align:center;}
ol.flow{counter-reset:num; list-style-type: none; padding:0;  margin:12px auto;}
ol.flow strong{font-size:1.2em;}
ol.flow li{display:inline-block; margin-bottom:12px;
  background-color:#F0D78A;
  line-height:1.8em;
  padding:1em 1em 1em 0.6em; order-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px;
  -webkit-clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
  clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
}
ol.flow li:before {
  counter-increment: num; display:block;
  content: counter(num);
  vertical-align:middle;
  color:#666600;
  font-family: 'Arial',sans-serif;
  font-weight:bold;
  font-size:1.6em;
  text-align: center;
}
ol.flow li:last-child{clip-path:none;}



p.notes{font-size:0.9em; margin:0; padding:0; color:#333333;}

ul.qr_list{margin:30px 0; font-size:1.2em; list-style:none;}
ul.qr_list li{padding:6px 0;}
ul.qr_list li:before{content:"●"; border:none;}

dl.qr_pay{margin:50px 0; font-size:1.3em;}
dl.qr_pay dt{float:left; width:100px; text-align:center; border:1px solid #E6CBCA; color:#990000; padding:0 6px;}
dl.qr_pay dd{margin-left:128px; padding:0;}
dl.qr_pay span{margin-left:4px;}

div.medical{ padding:12px 18px 0; background-color:#EEEEEE; margin:22px 0; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
div.medical p{margin:0; padding:0;}
div.medical strong{ color:#666600; font-size:1em;}
div.medical ol{margin:8px 0; padding:0; counter-reset:nums; list-style:none;}
div.medical ol li{padding:0 0 0.5em 0.6em; background:none; font-weight:bold; position: relative; padding-left: 30px; line-height:1.8em;}
div.medical ol li p{font-size:0.9em; font-weight:normal;}
div.medical ol li:before {
  position: absolute;
  counter-increment: nums;
  content: counter(nums);
  display:inline-block;
  background:#666666;
  color: #FFF;
  font-family: 'Arial',sans-serif;
  font-weight:bold;
  font-size:1.2em;
  border-radius: 50%;
  left: 0;
  width:1.2em;
  height:1.2em;
  line-height:1.3em;
  text-align: center;
  top:3%;
}


@media screen and (max-width:1120px) {
div.qr_payment{width:90%; margin:0 auto;}
}


@media screen and (max-width:1030px) {
div.qr_payment{width:auto; margin:0 auto;}
}

@media screen and (max-width:920px) {
ol.flow{text-align:left;}
}

@media screen and (max-width:660px) {
ul.qr_list{font-size:1em;}
dl.qr_pay{margin:50px 0; font-size:1.1em;}
dl.qr_pay dt, dl.qr_pay dd{float:none; margin:12px 0;}
.read{font-size:1.2em; text-align:left;}

ol.flow li{display:block; margin-bottom:12px; text-align:center; position:relative; margin-bottom:30px;
  background-color:#F0D78A;
  line-height:1.8em;
  padding:1em 1em 1em 1em; order-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px;
  -webkit-clip-path:none;
  clip-path:none;
}

ol.flow li:after{content:""; position:absolute; top:107%; left:46%;
border-style: solid;
border-width:19px;
border-color: #F0D78A transparent transparent transparent;
}
ol.flow li:last-child:after{border:none;}
}

@media screen and (max-width:480px) {
dl.qr_pay span{display:block;}
}