@charset "UTF-8";
/********** 1_제품  **********/
#pdtSnb {
  position: absolute;
  left: 0;
  top: 30px;
  width: 210px;
}
#pdtSnb h1 {
  line-height: 36px;
  font-size: 24px;
  font-weight: 600;
}
#pdtSnb ul {
  padding: 20px 10px 10px;
  border-bottom: 1px solid #ddd;
}
#pdtSnb ul li {
  padding-bottom: 5px;
  font-size: 18px;
  margin-bottom: 15px;
}
#pdtSnb ul li a {
  position: relative;
  display: inline-block;
  line-height: 28px;
}
#pdtSnb ul li.on {
  font-weight: 600;
}
#pdtSnb ul li.on a:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  right: 0;
  height: 2px;
  background: #111;
}

.pdtListHead {
  position: relative;
  height: 45px;
  font-size: 0;
  text-align: right;
}
.pdtListHead .total {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 16px;
  line-height: 40px;
  font-weight: 600;
}
.pdtListHead .total .colorA {
  font-family: "Roboto";
}
.pdtListHead .sort {
  position: relative;
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}
.pdtListHead .sort .eui_defaultSelect .euiSelectMain {
  height: 40px;
  padding-left: 10px;
  border: 0;
}
.pdtListHead .sort .eui_defaultSelect .euiSelectMain .euiSelectTitle {
  line-height: 38px;
  color: #111;
  font-size: 14px;
}
.pdtListHead .sort .eui_defaultSelect .euiSelectList {
  top: 40px;
  max-height: 500px;
}
.pdtListHead .sort .eui_defaultSelect .euiSelectList li a {
  padding: 0 10px;
  line-height: 40px;
}
.pdtListHead .viewNum {
  position: relative;
  display: inline-block;
  margin-left: 20px;
  padding-left: 51px;
  vertical-align: middle;
  text-align: left;
  background: url(/static/images/icon/ic_thumbnail.png) no-repeat 21px 50%;
}
.pdtListHead .viewNum:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 8px;
  margin-top: -4px;
  background: #ddd;
}
.pdtListHead .viewNum button {
  display: inline-block;
  margin-left: 16px;
  font-size: 16px;
  line-height: 23px;
  color: #888;
  text-align: left;
  font-family: "Roboto";
}
.pdtListHead .viewNum button.on {
  font-weight: 600;
  color: #111;
  border-bottom: 2px solid #111;
}

.pdtList {
  padding-top: 15px;
}
.pdtList li {
  float: left;
  width: 330px;
  height: 590px;
  margin-left: 20px;
}
.pdtList li .thumb {
  overflow: hidden;
  position: relative;
  width: 330px;
  height: 330px;
  margin: 0 0 16px;
  border-radius: 10px;
  background: #f5f5f5;
}
.pdtList li .thumb .icon {
  position: absolute;
  left: 16px;
  top: 16px;
}
.pdtList li .thumb > a {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.pdtList li .thumb .btn {
  overflow: hidden;
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 40px;
  height: 40px;
}
.pdtList li .thumb .btn img {
  margin-top: -40px;
}
.pdtList li .thumb .btn:hover img {
  margin-top: -80px;
}
.pdtList li .tit {
  max-height: 54px;
  margin-bottom: 4px;
  font-size: 18px;
  line-height: 27px;
  font-weight: 600;
}
.pdtList li .srmy {
  margin-bottom: 10px;
  max-height: 48px;
  line-height: 24px;
}
.pdtList li .srmy a {
  color: #888;
}
.pdtList li .discount {
  display: inline-block;
  font-family: "Roboto";
  line-height: 24px;
}
.pdtList li .original {
  display: inline-block;
  margin-left: 2px;
  font-family: "Roboto";
  line-height: 24px;
  color: #bbb;
  text-decoration: line-through;
}
.pdtList li .priceArea {
  font-size: 0;
}
.pdtList li .priceArea .price {
  display: inline-block;
  font-size: 16px;
  line-height: 29px;
}
.pdtList li .priceArea .price span {
  font-size: 22px;
  font-family: "Roboto";
}
.pdtList li .priceArea .sub {
  display: inline-block;
  padding-left: 15px;
  margin-left: 11px;
  font-size: 14px;
  color: #ff5a00;
  line-height: 29px;
  background: url(/static/images/icon/ic_sub.png) no-repeat 0 50%;
}
.pdtList li .notLogin {
  margin-bottom: 10px;
  font-size: 0;
}
.pdtList li .notLogin .text {
  position: relative;
  display: inline-block;
  font-size: 14px;
  line-height: 14px;
}
.pdtList li .notLogin .text:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  height: 8px;
  border-radius: 4px;
  background: #eee;
}
.pdtList li .notLogin .sub {
  display: inline-block;
  padding-left: 15px;
  margin-left: 11px;
  font-size: 14px;
  color: #ff5a00;
  line-height: 18px;
  background: url(/static/images/icon/ic_sub.png) no-repeat 0 50%;
}
.pdtList li .tag {
  overflow: hidden;
  max-height: 44px;
  margin-top: 5px;
  line-height: 22px;
}
.pdtList li .tag a {
  margin-left: 0;
  margin-right: 4px;
}
.pdtList li .recommend {
  padding-left: 15px;
  margin-top: 10px;
  font-family: "Roboto";
  color: #aaa;
  font-size: 12px;
  line-height: 15px;
  background: url(/static/images/icon/ic_recommend.png) no-repeat 0 0;
}
.pdtList li .recommend:before {
  display: none;
}
.pdtList li.soldout .thumb:before {
  content: "일시품절";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  border-radius: 10px;
  text-align: center;
  font-weight: 600;
  color: #fff;
  font-size: 18px;
  line-height: 330px;
  background: rgba(0, 0, 0, 0.4);
}
.pdtList li.soldout .discount, .pdtList li.soldout .original, .pdtList li.soldout .priceArea, .pdtList li.soldout .notLogin, .pdtList li.soldout .tag {
  opacity: 0.5;
}
.pdtList li.soldout .soldText {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1em;
  font-weight: 600;
  color: #e01846;
}
.pdtList li:nth-child(3n+1) {
  margin-left: 0;
}
.pdtList:after {
  content: "";
  display: block;
  clear: both;
}
.pdtList.typeB li {
  width: 305px;
}
.pdtList.typeB li .thumb {
  width: 305px;
  height: 305px;
}
.pdtList.typeB li:nth-child(3n+1) {
  margin-left: 20px;
}
.pdtList.typeB li:nth-child(4n+1) {
  margin-left: 0;
}

.pdtArea {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 0 60px 780px;
}
.pdtArea .thumbArea {
  position: absolute;
  left: 0;
  top: 0;
  width: 760px;
  height: 760px;
  padding: 85px 0 0 85px;
}
.pdtArea .thumbArea .thumb {
  position: relative;
}
.pdtArea .thumbArea .thumb :not(.icon) img {
  width: 590px;
}
.pdtArea .thumbArea .thumb .icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
}
.pdtArea .thumbArea .thumb .icon img + img {
  margin-top: 10px;
}
.pdtArea .thumbArea ul {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 50%;
  transition: opacity 0.2s;
}
.pdtArea .thumbArea ul li {
  overflow: hidden;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  background: #fff;
}
.pdtArea .thumbArea ul li + li {
  margin-top: 10px;
}
.pdtArea .thumbArea ul li img {
  width: 100%;
}
.pdtArea .thumbArea ul.on {
  opacity: 1;
}
.pdtArea .thumbArea.fix {
  position: fixed;
  left: 50%;
  top: 0;
  margin-left: -640px;
}
.pdtArea .thumbArea.fixBottom {
  top: initial;
  bottom: 60px;
}
.pdtArea .mainInfo {
  position: relative;
}
.pdtArea .mainInfo > .wrap {
  padding: 40px 20px 30px;
  border-radius: 10px;
  background: #fff;
}
.pdtArea .mainInfo > .wrap .share {
  position: absolute;
  right: 20px;
  top: 40px;
}
.pdtArea .mainInfo > .wrap h1 {
  margin-right: 50px;
  font-size: 34px;
  font-weight: 600;
  line-height: 44px;
}
.pdtArea .mainInfo > .wrap .srmy {
  margin-top: 8px;
  font-size: 16px;
  line-height: 26px;
  color: #666;
}
.pdtArea .mainInfo > .wrap .priceArea {
  position: relative;
  margin-top: 30px;
}
.pdtArea .mainInfo > .wrap .priceArea .price {
  display: inline-block;
  font-size: 16px;
  line-height: 24px;
}
.pdtArea .mainInfo > .wrap .priceArea .price strong {
  font-size: 24px;
  font-family: "Roboto";
}
.pdtArea .mainInfo > .wrap .priceArea .original {
  display: inline-block;
  margin-left: 20px;
  text-decoration: line-through;
  color: #bbb;
  font-size: 12px;
  line-height: 24px;
}
.pdtArea .mainInfo > .wrap .priceArea .original span {
  font-size: 16px;
  line-height: 24px;
  font-family: "Roboto";
}
.pdtArea .mainInfo > .wrap .priceArea .discount {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 18px;
  line-height: 24px;
  color: #e01846;
  font-family: "Roboto";
  font-weight: 500;
}
.pdtArea .mainInfo > .wrap .priceArea.soldout .price, .pdtArea .mainInfo > .wrap .priceArea.soldout .original, .pdtArea .mainInfo > .wrap .priceArea.soldout .discount {
  color: #888;
}
.pdtArea .mainInfo > .wrap .notLogin {
  height: 28px;
  margin-top: 30px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}
.pdtArea .mainInfo > .wrap .tag {
  margin-top: 4px;
  font-size: 0;
}
.pdtArea .mainInfo > .wrap .tag a {
  display: inline-block;
  height: 32px;
  padding: 0 14px;
  margin: 6px 6px 0 0;
  border: solid 1px #ddd;
  border-radius: 16px;
  font-size: 14px;
  color: #888;
  line-height: 30px;
}
.pdtArea .mainInfo > .wrap dl {
  position: relative;
  padding: 40px 0 20px;
}
.pdtArea .mainInfo > .wrap dl dt {
  position: absolute;
  left: 0;
  color: #888;
  line-height: 20px;
}
.pdtArea .mainInfo > .wrap dl dd {
  padding-left: 100px;
  margin-bottom: 13px;
  text-align: right;
  font-size: 16px;
}
.pdtArea .mainInfo > .wrap .delivery {
  margin-bottom: 20px;
  border-top: 1px solid #f5f5f5;
}
.pdtArea .mainInfo > .wrap .delivery > li {
  position: relative;
  margin-top: 20px;
}
.pdtArea .mainInfo > .wrap .delivery > li input[type=radio] {
  position: absolute;
  left: -10000px;
  top: -10000px;
}
.pdtArea .mainInfo > .wrap .delivery > li label {
  position: relative;
  display: inline-block;
  padding-left: 28px;
  font-size: 16px;
  line-height: 20px;
}
.pdtArea .mainInfo > .wrap .delivery > li label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background: url(/static/images/icon/ic_radio.png) no-repeat 0 0;
}
.pdtArea .mainInfo > .wrap .delivery > li input[type=radio]:checked + label:before {
  background-position-y: -20px;
}
.pdtArea .mainInfo > .wrap .delivery > li .cautionLayer {
  position: relative;
  display: inline-block;
  margin-left: 4px;
  line-height: 20px;
  vertical-align: middle;
}
.pdtArea .mainInfo > .wrap .delivery > li .cautionLayer .deliCaution {
  display: none;
  position: absolute;
  left: 0;
  top: 26px;
  z-index: 10;
  width: 195px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.pdtArea .mainInfo > .wrap .delivery > li .cautionLayer .deliCaution h3 {
  font-weight: 600;
  line-height: 1em;
}
.pdtArea .mainInfo > .wrap .delivery > li .cautionLayer .deliCaution .txt {
  margin-top: 10px;
  font-size: 12px;
  line-height: 20px;
}
.pdtArea .mainInfo > .wrap .delivery > li .cautionLayer .deliCaution .txt2 {
  margin-top: 6px;
  font-size: 12px;
  line-height: 20px;
  color: #888;
}
.pdtArea .mainInfo > .wrap .delivery > li .cautionLayer .deliCaution .close {
  position: absolute;
  right: 15px;
  top: 15px;
}
.pdtArea .mainInfo > .wrap .delivery > li .price {
  display: inline-block;
  margin-left: 15px;
  line-height: 20px;
}
.pdtArea .mainInfo > .wrap .delivery > li .price span {
  font-family: "Roboto";
  font-size: 16px;
}
.pdtArea .mainInfo > .wrap .delivery > li .storage {
  padding-left: 20px;
  margin: 10px 0 0 28px;
  line-height: 16px;
  background: url(/static/images/icon/ic_frozen.png) no-repeat 0 0;
}
.pdtArea .mainInfo > .wrap .delivery > li .storage em {
  color: #4279be;
}
.pdtArea .mainInfo > .wrap .delivery > li .text {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 12px;
  color: #888;
  line-height: 20px;
}
.pdtArea .mainInfo > .wrap .delivery > li input[type=radio]:checked ~ .text {
  font-size: 14px;
  color: #111;
  font-weight: 600;
}
.pdtArea .mainInfo > .wrap .delivery > li .pickupCaution {
  display: none;
  position: relative;
  margin: 10px 0 0 28px;
}
.pdtArea .mainInfo > .wrap .delivery > li .pickupCaution h3 {
  padding-top: 5px;
  font-size: 12px;
  line-height: 1em;
}
.pdtArea .mainInfo > .wrap .delivery > li .pickupCaution ul {
  margin-top: 15px;
}
.pdtArea .mainInfo > .wrap .delivery > li .pickupCaution ul li {
  position: relative;
  padding-left: 10px;
  margin-top: 10px;
  color: #888;
}
.pdtArea .mainInfo > .wrap .delivery > li .pickupCaution ul li:before {
  content: "-";
  position: absolute;
  left: 0;
  top: 0;
}
.pdtArea .mainInfo > .wrap .delivery > li .pickupCaution a {
  position: absolute;
  right: 0;
  top: 0;
  padding-right: 10px;
  font-weight: 600;
  line-height: 1em;
  background: url(/static/images/icon/ic_arrow5.png) no-repeat 100% 50%;
}
.pdtArea .mainInfo > .wrap .delivery > li .pickupCaution a span {
  text-decoration: underline;
}
.pdtArea .mainInfo > .wrap .delivery > li input[type=radio]:checked ~ .pickupCaution {
  display: block;
}
.pdtArea .mainInfo > .wrap .option {
  padding-top: 21px;
  border-top: 1px solid #f5f5f5;
}
.pdtArea .mainInfo > .wrap .option ul {
  margin-top: 20px;
}
.pdtArea .mainInfo > .wrap .option ul li {
  position: relative;
  margin-top: 10px;
  padding: 20px 15px 20px 20px;
  border-radius: 10px;
  background: #f5f5f5;
}
.pdtArea .mainInfo > .wrap .option ul li .tit {
  margin: 0 20px 20px 0;
  font-size: 16px;
  line-height: 22px;
}
.pdtArea .mainInfo > .wrap .option ul li .opt {
  margin: -20px 0 20px 0;
}
.pdtArea .mainInfo > .wrap .option ul li .price {
  position: absolute;
  right: 15px;
  bottom: 20px;
  font-size: 12px;
  line-height: 16px;
}
.pdtArea .mainInfo > .wrap .option ul li .price span {
  font-family: "Roboto";
  font-size: 16px;
}
.pdtArea .mainInfo > .wrap .option ul li .del {
  position: absolute;
  right: 15px;
  top: 20px;
}
.pdtArea .mainInfo > .wrap .total {
  position: relative;
  padding-top: 21px;
  margin-top: 20px;
  border-top: 1px solid #111;
  font-size: 16px;
  line-height: 34px;
}
.pdtArea .mainInfo > .wrap .total .price {
  position: absolute;
  right: 0;
  bottom: 0;
}
.pdtArea .mainInfo > .wrap .total .price strong {
  font-size: 34px;
  font-weight: 600;
  font-family: "Roboto";
}
.pdtArea .mainInfo > .wrap .notLoginTotal {
  width: 100%;
  height: 60px;
  position: relative;
  padding-top: 21px;
  margin-top: 20px;
  border-top: 1px solid #111;
  font-size: 16px;
  line-height: 34px;
}
.pdtArea .mainInfo > .wrap .notLoginTotal .price {
  position: absolute;
  right: 0;
  bottom: 0;
}
.pdtArea .mainInfo > .wrap .notLoginTotal .price strong {
  font-size: 34px;
  font-weight: 600;
  font-family: "Roboto";
}
.pdtArea .mainInfo > .wrap .btn {
  display: table;
  width: calc(100% + 5px);
  margin: 30px 0 0 -5px;
  table-layout: fixed;
}
.pdtArea .mainInfo > .wrap .btn span {
  display: table-cell;
  padding-left: 5px;
}
.pdtArea .mainInfo > .wrap .btn span button {
  width: 100%;
  min-width: auto;
  padding: 0;
}
.pdtArea .mainInfo > .wrap .btn .subdivision {
  width: 70px;
}
.pdtArea .mainInfo > .wrap .quickOrderCont.on {
  position: fixed;
  left: 50%;
  top: 106px;
  z-index: 10;
  width: 500px;
  padding: 20px 10px 20px 20px;
  margin-left: 140px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.pdtArea .mainInfo > .wrap .quickOrderCont.on .wrap {
  overflow-y: auto;
  padding-right: 10px;
}
.pdtArea .mainInfo > .wrap .quickOrderCont.on .wrap .delivery {
  border-top: 0;
  margin-top: 0;
}
.pdtArea .mainInfo .banner {
  overflow: hidden;
  position: relative;
  margin-top: 30px;
}
.pdtArea .mainInfo .banner .nav {
  position: absolute;
  left: 20px;
  bottom: 16px;
  height: 10px;
  z-index: 10;
  font-size: 0;
}
.pdtArea .mainInfo .banner .nav li {
  width: 10px;
  height: 10px;
  margin: 0 10px 0 0;
  background: #fff;
}
.pdtArea .mainInfo .banner .nav li.on {
  opacity: 1;
}

.relativeArea {
  max-width: 1280px;
  padding: 40px 0 70px;
  margin: 0 auto;
}
.relativeArea .section {
  position: relative;
  float: left;
  width: 590px;
}
.relativeArea .section .head {
  float: left;
  width: 250px;
  padding-top: 30px;
}
.relativeArea .section .head h2 {
  padding: 0 2px;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.relativeArea .section .head h2 span {
  position: relative;
}
.relativeArea .section .head h2 span:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  height: 10px;
  border-radius: 5px;
  background: #ddd;
}
.relativeArea .section .head p {
  font-size: 28px;
  line-height: 38px;
}
.relativeArea .section .list {
  float: left;
  width: 340px;
  height: 226px;
  margin-top: 10px;
}
.relativeArea .section .list li {
  position: relative;
  height: 113px;
  padding: 25px 0 0 110px;
  border-bottom: 1px solid #ddd;
}
.relativeArea .section .list li .thumb {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  background: #eee;
}
.relativeArea .section .list li .tag {
  overflow: hidden;
  height: 16px;
  color: #888;
  line-height: 16px;
}
.relativeArea .section .list li .tit {
  margin: 10px 50px 0 0;
  font-size: 16px;
  line-height: 22px;
}
.relativeArea .section .list li .price {
  position: absolute;
  right: 0;
  bottom: 25px;
  font-size: 12px;
  line-height: 14px;
}
.relativeArea .section .list li .price span {
  font-size: 14px;
}
.relativeArea .section .controls {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 0;
}
.relativeArea .section .controls .prev, .relativeArea .section .controls .next {
  overflow: hidden;
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  border: solid 1px #111;
  border-radius: 30px;
  text-align: center;
  vertical-align: top;
  white-space: nowrap;
  text-indent: 100%;
  background: #fff;
}
.relativeArea .section .controls .prev:before, .relativeArea .section .controls .next:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 9px;
  margin: -5px 0 0 -3px;
  background: url(/static/images/icon/ic_pn.png) no-repeat 0 0;
}
.relativeArea .section .controls .prev.next:before, .relativeArea .section .controls .next.next:before {
  background-position-x: -6px;
}
.relativeArea .section .controls .page {
  display: inline-block;
  width: auto;
  margin: 0 10px;
  vertical-align: top;
  font: 600 15px/30px "Roboto";
}
.relativeArea:after {
  content: "";
  display: block;
  clear: both;
}

.detailArea .tabArea {
  position: relative;
  height: 96px;
  padding-top: 35px;
  border-bottom: 1px solid #ddd;
}
.detailArea .tabArea .tab {
  width: 1280px;
  height: 24px;
  margin: 0 auto;
}
.detailArea .tabArea .tab li {
  position: relative;
  float: left;
  margin-right: 40px;
  font-size: 16px;
  line-height: 24px;
}
.detailArea .tabArea .tab li .num {
  position: relative;
  left: 5px;
  top: -5px;
  font-size: 12px;
}
.detailArea .tabArea .tab li.on {
  font-weight: 600;
}
.detailArea .tabArea .tab li.on:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: #111;
}
.detailArea .tabArea .tab:after {
  content: "";
  display: block;
  clear: both;
}
.detailArea .tabArea .quickOrderArea {
  display: none;
  position: absolute;
  left: 50%;
  top: 20px;
  width: 640px;
  padding-left: 41px;
  text-align: right;
}
.detailArea .tabArea .quickOrderArea .pdt {
  position: absolute;
  left: 41px;
  top: 0;
  width: 300px;
  min-height: 56px;
  padding: 0;
}
.detailArea .tabArea .quickOrderArea .pdt .thumb {
  top: 0;
  width: 56px;
  height: 56px;
}
.detailArea .tabArea .quickOrderArea .pdt .content {
  padding-left: 66px;
  text-align: left;
}
.detailArea .tabArea .quickOrderArea .priceArea {
  display: inline-block;
  padding-top: 6px;
  margin-right: 20px;
  vertical-align: top;
}
.detailArea .tabArea .quickOrderArea .priceArea .original {
  font-family: "Roboto";
  font-size: 12px;
  line-height: 16px;
  color: #bbb;
  text-decoration: line-through;
}
.detailArea .tabArea .quickOrderArea .priceArea .original span {
  font-size: 16px;
}
.detailArea .tabArea .quickOrderArea .priceArea .price {
  margin-top: 6px;
  font-family: "Roboto";
  font-size: 16px;
  line-height: 22px;
  color: #111;
}
.detailArea .tabArea .quickOrderArea .priceArea .price strong {
  font-size: 22px;
}
.detailArea .tabArea .quickOrderArea .btnTypeA {
  width: 148px;
  padding: 0;
  vertical-align: top;
  color: #fff !important;
}
.detailArea .tabArea .quickOrderArea .btnTypeA .icoFold {
  padding-right: 22px;
}
.detailArea .tabArea .quickOrderArea .btnTypeA .icoFold:before, .detailArea .tabArea .quickOrderArea .btnTypeA .icoFold:after {
  width: 8px;
  margin-top: -3px;
  background: #fff !important;
  transition-timing: 0;
}
.detailArea .tabArea .quickOrderArea .btnTypeA .icoFold:before {
  right: 3px;
}
.detailArea .tabArea .quickOrderArea:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 40px;
  margin-top: -20px;
  background: #ddd;
}
.detailArea .tabArea .quickOrderArea.on .btnTypeA {
  border-color: #ddd;
  background: #ddd;
}
.detailArea .pdtDetail {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 1px;
  padding-bottom: 80px;
}
.detailArea .pdtDetail#detail1 {
  padding-top: 80px;
}
.detailArea .pdtDetail .banner {
  margin-bottom: 20px;
  text-align: center;
}
.detailArea .pdtDetail .detail {
  margin-top: 80px;
  text-align: center;
}
.detailArea .pdtDetail h2 {
  height: 65px;
  margin-top: 160px;
  font-size: 28px;
  line-height: 1em;
  font-weight: 600;
}
.detailArea .pdtDetail h2:first-child {
  margin-top: 80px;
}
.detailArea .pdtDetail .target {
  position: relative;
  padding-left: 17px;
  background: url(/static/images/icon/ic_target.png) no-repeat 0 100%;
}
.detailArea .pdtDetail .target li {
  position: relative;
  float: left;
  width: calc(25% - 100px);
  min-height: 104px;
  padding-left: 40px;
  margin-left: 100px;
  font-size: 18px;
  line-height: 28px;
}
.detailArea .pdtDetail .target li span {
  position: absolute;
  left: 0;
  top: 0;
  color: #888;
  font-style: italic;
}
.detailArea .pdtDetail .target:after {
  content: "";
  display: block;
  clear: both;
}
.detailArea .pdtDetail .dose li {
  position: relative;
  float: left;
  width: 165px;
  text-align: center;
  font-size: 16px;
  line-height: 22px;
  color: #666;
}
.detailArea .pdtDetail .dose li span {
  overflow: hidden;
  display: block;
  width: 165px;
  height: 130px;
  padding-top: 29px;
  margin-bottom: 10px;
  border-radius: 10px;
  text-align: center;
  background: #f5f5f5;
}
.detailArea .pdtDetail .dose li + li {
  margin-left: 20px;
}
.detailArea .pdtDetail .dose li:nth-child(7n+1) {
  margin-left: 0;
}
.detailArea .pdtDetail .dose li:nth-child(7) ~ li {
  margin-top: 20px;
}
.detailArea .pdtDetail .dose:after {
  content: "";
  display: block;
  clear: both;
}
.detailArea .pdtDetail .listHead {
  position: relative;
  margin-top: 160px;
  border-bottom: 2px solid #111;
}
.detailArea .pdtDetail .listHead h2 .num {
  position: relative;
  left: 5px;
  top: -15px;
  font-size: 16px;
  line-height: 1em;
  color: #ff5a00;
}
.detailArea .pdtDetail .listHead .btn {
  position: absolute;
  right: 0;
  top: -15px;
}
.detailArea .pdtDetail .listHead .btn .txt {
  display: inline-block;
  margin-right: 20px;
  font-size: 16px;
  color: #888;
  line-height: 56px;
  vertical-align: middle;
}
.detailArea .pdtDetail .listHead:after {
  content: "";
  display: block;
  clear: both;
}
.detailArea .pdtDetail .listHead:first-child {
  margin-top: 80px;
}
.detailArea .pdtDetail .reviewTotal {
  overflow: hidden;
  margin: 30px 0 20px;
}
.detailArea .pdtDetail .reviewTotal li {
  position: relative;
  float: left;
  font-size: 16px;
  line-height: 22px;
}
.detailArea .pdtDetail .reviewTotal li a {
  color: #888;
}
.detailArea .pdtDetail .reviewTotal li.on a {
  color: #111;
  font-weight: 500;
  text-decoration: underline;
}
.detailArea .pdtDetail .reviewTotal li + li {
  padding-left: 11px;
  margin-left: 10px;
}
.detailArea .pdtDetail .reviewTotal li + li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 8px;
  margin-top: -4px;
  background: #ddd;
}
.detailArea .pdtDetail .photoReview {
  position: relative;
  overflow: hidden;
  padding: 30px 0 20px;
  border-top: 1px solid #ddd;
}
.detailArea .pdtDetail .photoReview ul {
  overflow: hidden;
}
.detailArea .pdtDetail .photoReview ul li {
  float: left;
  overflow: hidden;
  width: 151px;
  height: 151px;
  border-radius: 10px;
}
.detailArea .pdtDetail .photoReview ul li img {
  width: 100%;
}
.detailArea .pdtDetail .photoReview ul li + li {
  margin-left: 10px;
}
.detailArea .pdtDetail .photoReview ul li:nth-child(8) ~ li {
  display: none;
}
.detailArea .pdtDetail .photoReview .more {
  position: absolute;
  right: 2px;
  top: 30px;
}
.detailArea .pdtDetail .photoReview .more a {
  display: block;
  width: 151px;
  height: 151px;
  border-radius: 10px;
  text-align: center;
  font: 600 24px/151px "Roboto";
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
}
.detailArea .pdtDetail .reviewList {
  border-bottom: 1px solid #ddd;
}
.detailArea .pdtDetail .reviewList li {
  position: relative;
  padding: 40px 150px 40px 20px;
  border-top: 1px solid #ddd;
}
.detailArea .pdtDetail .reviewList li .head {
  margin-bottom: 20px;
  line-height: 15px;
}
.detailArea .pdtDetail .reviewList li .head .status {
  display: inline-block;
  margin-right: 30px;
  font-size: 16px;
  line-height: 15px;
  color: #aaa;
  font-weight: 600;
  vertical-align: middle;
}
.detailArea .pdtDetail .reviewList li .head .tag {
  display: inline-block;
  height: 32px;
  padding: 0 15px;
  margin-right: 10px;
  border-radius: 16px;
  line-height: 32px;
  color: #fff;
  font-weight: 600;
  font-family: "Roboto";
  vertical-align: middle;
  background: #e01846;
}
.detailArea .pdtDetail .reviewList li .head .recommend {
  display: inline-block;
  margin-right: 30px;
  font: 600 16px/15px "Roboto";
  vertical-align: middle;
}
.detailArea .pdtDetail .reviewList li .head .recommend:before {
  margin-right: 10px;
}
.detailArea .pdtDetail .reviewList li .head .uid {
  display: inline-block;
  font: 400 16px/15px "Roboto";
  color: #aaa;
  vertical-align: middle;
}
.detailArea .pdtDetail .reviewList li .head .date {
  position: relative;
  display: inline-block;
  margin-left: 5px;
  padding-left: 10px;
  font: 400 16px/15px "Roboto";
  vertical-align: middle;
}
.detailArea .pdtDetail .reviewList li .head .date:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 8px;
  margin-top: -4px;
  background: #ddd;
}
.detailArea .pdtDetail .reviewList li .head .report {
  position: relative;
  display: inline-block;
  margin-left: 5px;
  padding-left: 10px;
  font: 400 13px/15px "Roboto";
  color: #aaa;
  vertical-align: middle;
}
.detailArea .pdtDetail .reviewList li .head .report:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 8px;
  margin-top: -4px;
  background: #ddd;
}
.detailArea .pdtDetail .reviewList li .more {
  position: absolute;
  right: 20px;
  top: 40px;
}
.detailArea .pdtDetail .reviewList li .more .icoFold {
  overflow: hidden;
  display: inline-block;
  width: 23px;
  padding: 0;
  text-indent: 100%;
  white-space: nowrap;
}
.detailArea .pdtDetail .reviewList li .photo {
  display: none;
  overflow: hidden;
}
.detailArea .pdtDetail .reviewList li .photo p {
  float: left;
  overflow: hidden;
  width: 228px;
  height: 228px;
  border-radius: 10px;
}
.detailArea .pdtDetail .reviewList li .photo p img {
  width: 100%;
}
.detailArea .pdtDetail .reviewList li .photo p + p {
  margin-left: 10px;
}
.detailArea .pdtDetail .reviewList li .photoNumArea {
  position: absolute;
  right: 98px;
  bottom: 40px;
  overflow: hidden;
  width: 72px;
  height: 72px;
  border-radius: 10px;
}
.detailArea .pdtDetail .reviewList li .photoNumArea .photoNum {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  text-align: center;
  line-height: 28px;
  color: #fff;
  font-family: "Roboto";
  background: rgba(0, 0, 0, 0.6);
}
.detailArea .pdtDetail .reviewList li .tit {
  margin-top: 30px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}
.detailArea .pdtDetail .reviewList li .cont {
  margin-top: 10px;
  font-size: 16px;
  line-height: 24px;
  color: #888;
}
.detailArea .pdtDetail .reviewList li .cont > * {
  font-size: 16px;
  line-height: 24px;
  color: #888;
}
.detailArea .pdtDetail .reviewList li .reply {
  display: none;
  padding: 30px 40px 30px 120px;
  margin-top: 40px;
  border-radius: 10px;
  font-size: 16px;
  line-height: 26px;
  background: #f5f5f5 url(/static/images/common/logo2.png) no-repeat 30px 30px;
}
.detailArea .pdtDetail .reviewList li .reply .date {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1px;
  color: #888;
}
.detailArea .pdtDetail .reviewList li .secret {
  padding-left: 24px;
  margin-top: 10px;
  font-size: 18px;
  line-height: 21px;
  background: url(/static/images/icon/ic_lock.png) no-repeat 0 0;
}
.detailArea .pdtDetail .reviewList li.on {
  padding-right: 0;
}
.detailArea .pdtDetail .reviewList li.on .photo {
  display: block;
}
.detailArea .pdtDetail .reviewList li.on .photoNumArea {
  display: none;
}
.detailArea .pdtDetail .reviewList li.on .reply {
  display: block;
}
.detailArea .pdtDetail .reviewList li.noImg {
  padding-right: 0;
}
.detailArea .pdtDetail .paging {
  margin-bottom: 0;
}
.detailArea.fix {
  padding-top: 96px;
}
.detailArea.fix .tabArea {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 10;
  background: #fff;
}
.detailArea.fix .quickOrderArea {
  display: block;
}

.bestReview {
  position: relative;
  margin-top: -2px;
  background: #fff;
}
.bestReview li {
  float: left;
  position: relative;
  width: 413px;
  height: 280px;
  padding: 50px 30px 30px;
  border-radius: 10px;
  background: #f5f5f5;
}
.bestReview li .tag {
  position: absolute;
  left: 0;
  top: 0;
  height: 38px;
  padding: 0 15px;
  border-radius: 10px 0;
  line-height: 38px;
  color: #fff;
  font-weight: 600;
  font-family: "Roboto";
  background: #ff44c4;
}
.bestReview li .head {
  position: relative;
  padding-left: 110px;
  margin-bottom: 15px;
  text-align: right;
  line-height: 15px;
}
.bestReview li .head .recommend {
  position: absolute;
  left: 0;
  top: 0;
  font: 600 16px/15px "Roboto";
}
.bestReview li .head .recommend:before {
  margin-right: 10px;
}
.bestReview li .head .uid {
  display: inline-block;
  font: 400 16px/15px "Roboto";
  color: #aaa;
}
.bestReview li .head .date {
  position: relative;
  display: inline-block;
  margin-left: 5px;
  padding-left: 10px;
  font: 400 16px/15px "Roboto";
}
.bestReview li .head .date:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 8px;
  margin-top: -4px;
  background: #ddd;
}
.bestReview li .tit {
  font-size: 18px;
  max-height: 48px;
  line-height: 24px;
  font-weight: 600;
}
.bestReview li .cont {
  margin-top: 5px;
  max-height: 48px;
  font-size: 16px;
  line-height: 24px;
  color: #888;
}
.bestReview li .cont > * {
  font-size: 16px;
  line-height: 24px;
  color: #888;
}
.bestReview li .photo {
  overflow: hidden;
  position: absolute;
  left: 30px;
  bottom: 25px;
}
.bestReview li .photo p {
  overflow: hidden;
  float: left;
  width: 62px;
  height: 62px;
  border-radius: 8px;
  background: #eee;
}
.bestReview li .photo p img {
  width: 100%;
}
.bestReview li .photo p + p {
  margin-left: 10px;
}
.bestReview li + li {
  margin-left: 20px;
}
.bestReview:after {
  content: "";
  display: block;
  clear: both;
}

.shareLayer {
  width: 350px;
}
.shareLayer .content {
  text-align: center;
}
.shareLayer .content .thumb {
  width: 218px;
  height: 218px;
  padding: 20px;
  margin: 0 auto;
  border-radius: 100%;
  background: #f5f5f5;
}
.shareLayer .content .tag {
  margin: 15px 0 5px;
  color: #888;
  line-height: 20px;
}
.shareLayer .content .tag span {
  display: inline-block;
}
.shareLayer .content .tit {
  font-size: 16px;
  line-height: 26px;
}
.shareLayer .content .btn {
  padding-top: 20px;
  margin-top: 30px;
  border-top: 1px solid #ddd;
  font-size: 0;
}
.shareLayer .content .btn button {
  display: inline-block;
  margin: 0 10px;
}

.specialList {
  overflow: hidden;
}
.specialList li {
  float: left;
  width: 620px;
  min-height: 470px;
  padding-bottom: 15px;
}
.specialList li .thumb img {
  width: 100%;
  height: 366px;
  border-radius: 10px;
}
.specialList li .tit {
  margin: 20px 10px 10px;
  font-size: 26px;
}
.specialList li .date {
  margin: 10px 10px 0;
  color: #666;
}
.specialList li:nth-child(2n+1) {
  margin-right: 40px;
}
.specialList li:nth-child(2) ~ li {
  margin-top: 40px;
}

/* 검색 */
.searchField {
  width: 680px;
  margin: 0 auto 100px;
}
.searchField fieldset {
  position: relative;
  padding: 0 50px 10px;
  margin: 60px 0 20px;
  border-bottom: 2px solid #111;
}
.searchField fieldset input {
  width: 100%;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  line-height: 40px;
  font-size: 28px;
  font-weight: 600;
}
.searchField fieldset img {
  position: absolute;
  right: 0;
  top: 7px;
}
.searchField .recommendWord {
  padding: 0 60px;
  text-align: center;
}
.searchField .recommendWord h2 {
  display: inline-block;
  width: 100px;
  font-size: 16px;
  line-height: 30px;
  font-weight: 600;
  vertical-align: top;
  text-align: left;
}
.searchField .recommendWord .tag {
  display: inline-block;
  max-width: 440px;
  vertical-align: top;
  text-align: left;
}
.searchField .recommendWord .tag a {
  margin: 0 4px 4px 0;
}

.searchResult {
  padding-top: 40px;
}
.searchResult .pdtList, .searchResult .magazineList, .searchResult .reviewListTypeB {
  padding-top: 0;
  margin-top: 0;
}

/********** 2_주문  **********/
.cartWrap {
  position: relative;
  padding-right: 345px;
}
.cartWrap > h2:first-child {
  padding-top: 0;
}
.cartWrap .counselBooking {
  padding: 80px 0;
  border-bottom: 1px solid #ddd;
  text-align: center;
}
.cartWrap .counselBooking h2 {
  font-size: 24px;
}
.cartWrap .counselBooking .text {
  font-size: 16px;
}
.cartWrap .counselBooking .text img {
  margin: 30px 0 20px;
}
.cartWrap .counselBooking .btnArea {
  display: table;
  width: 500px;
  margin: 40px auto 0;
  table-layout: fixed;
}
.cartWrap .counselBooking .btnArea span {
  display: table-cell;
  padding-left: 5px;
}
.cartWrap .counselBooking .btnArea span a {
  width: 100%;
}
.cartWrap .counselBooking .btnArea span:first-child {
  width: 185px;
  padding-left: 0;
  padding-right: 5px;
}
.cartWrap .cartHead {
  margin-top: 65px;
  text-align: right;
}
.cartWrap .cartHead .fl {
  position: relative;
  text-align: left;
}
.cartWrap .cartHead .fl label {
  font-size: 18px;
}
.cartWrap .cartHead .fl .message {
  position: absolute;
  left: calc(100% + 20px);
  top: -10px;
  height: 38px;
  padding: 0 19px 0 11px;
  border: 1px solid #ddd;
  border-radius: 10px;
  vertical-align: middle;
  font-size: 16px;
  line-height: 36px;
  white-space: nowrap;
}
.cartWrap .cartHead .fl .message strong {
  text-decoration: underline;
}
.cartWrap .cartHead .fl .message:before {
  content: "";
  position: absolute;
  left: -9px;
  bottom: 9px;
  width: 9px;
  height: 10px;
  background: url(/static/images/icon/ic_balloon.png) no-repeat 0 0;
}
.cartWrap .cartList {
  margin-top: 30px;
  border-top: 2px solid #bbb;
}
.cartWrap .cartList h2 {
  padding: 20px 0 0 10px;
  font-size: 24px;
  line-height: 1em;
}
.cartWrap .cartList h2 img {
  position: relative;
  top: -3px;
}
.cartWrap .cartList .del {
  position: absolute;
  right: 0;
  top: 20px;
}
.cartWrap .cartList .orderPdtList tr:last-child {
  border: 0;
}
.cartWrap .cartList .total {
  height: 48px;
  padding-right: 20px;
  border-radius: 10px;
  text-align: right;
  line-height: 48px;
  background: #f5f5f5;
}
.cartWrap .cartList.soldoutList {
  margin-top: 50px;
}
.cartWrap .drpackPeriod {
  position: relative;
  padding: 30px 30px 30px 170px;
  border-top: 1px solid #ddd;
  background: #f5f5f5;
}
.cartWrap .drpackPeriod h3 {
  position: absolute;
  left: 30px;
  top: 30px;
  font-size: 16px;
}
.cartWrap .drpackPeriod .chk {
  overflow: hidden;
  display: inline-block;
  border-radius: 10px;
}
.cartWrap .drpackPeriod .chk label {
  float: left;
}
.cartWrap .drpackPeriod .chk label span {
  display: inline-block;
  width: 110px;
  height: 48px;
  text-align: center;
  font-size: 16px;
  line-height: 48px;
  color: #888;
  background: #fff;
}
.cartWrap .drpackPeriod .chk label span:before {
  display: none;
}
.cartWrap .drpackPeriod .chk label input:checked + span {
  color: #fff;
  background: #111;
}
.cartWrap .drpackPeriod .caution {
  margin-top: 20px;
}
.cartWrap .drpackPeriod .caution li {
  color: #666;
}
.cartWrap .reCounsel {
  margin-top: 30px;
  text-align: right;
}
.cartWrap .reCounsel .text {
  display: inline-block;
  line-height: 48px;
  font-size: 16px;
  color: #888;
  vertical-align: top;
}
.cartWrap .reCounsel .btnTypeB {
  width: 160px;
  margin-left: 30px;
  vertical-align: top;
}
.cartWrap .recommendArea .pdtList li {
  width: 218px;
}
.cartWrap .recommendArea .pdtList li .thumb {
  width: 218px;
  height: 218px;
}
.cartWrap .recommendArea .pdtList li + li {
  margin-left: 21px;
}
.cartWrap .paymentType {
  margin: 30px -5px 0;
}
.cartWrap .paymentType li {
  float: left;
  width: 20%;
  padding: 5px 5px;
}
.cartWrap .paymentType li label {
  overflow: hidden;
}
.cartWrap .paymentType li label input {
  position: absolute;
  left: -100px;
  top: -100px;
}
.cartWrap .paymentType li label span {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 10px;
  line-height: 54px;
  color: #888;
  font-size: 16px;
  text-align: center;
  background: #fff;
}
.cartWrap .paymentType li label span:before {
  display: none;
}
.cartWrap .paymentType li label span em {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  white-space: nowrap;
  text-indent: 100%;
}
.cartWrap .paymentType li label.nPay em {
  width: 56px;
  height: 22px;
  background: url(/static/images/icon/ic_naverpay_off.svg) no-repeat 50% 50%;
}
.cartWrap .paymentType li label.kPay em {
  width: 54px;
  height: 17px;
  background: url(/static/images/icon/ic_kakaopay_off.svg) no-repeat 50% 50%;
}
.cartWrap .paymentType li label.cPay em {
  width: 76px;
  height: 26px;
  background: url(/static/images/icon/ic_chaipay_off.png) no-repeat 50% 50%;
  background-size: contain;
}
.cartWrap .paymentType li label.dPay em {
  width: 76px;
  height: 26px;
  background: url(/static/images/icon/ic_paycoin_off.png) no-repeat 50% 50%;
  background-size: contain;
}
.cartWrap .paymentType li label input:checked + span {
  border-color: #111;
  color: #111;
}
.cartWrap .paymentType li label.nPay input:checked + span em {
  background-image: url(/static/images/icon/ic_naverpay_on.svg);
}
.cartWrap .paymentType li label.kPay input:checked + span em {
  width: 75px;
  height: 31px;
  background-image: url(/static/images/icon/ic_kakaopay_on.svg);
}
.cartWrap .paymentType li label.cPay input:checked + span em {
  background-image: url(/static/images/icon/ic_chaipay_on.png);
}
.cartWrap .paymentType li label.dPay input:checked + span em {
  background-image: url(/static/images/icon/ic_paycoin_on.png);
}
.cartWrap .paymentType:after {
  content: "";
  display: block;
  clear: both;
}
.cartWrap .escrow {
  position: relative;
  padding-left: 130px;
  margin-top: 30px;
}
.cartWrap .escrow label {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 16px;
  font-weight: 600;
}
.cartWrap .escrow dt span {
  position: relative;
}
.cartWrap .escrow dt span:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  height: 10px;
  border-radius: 3px;
  background: #ddd;
}
.cartWrap .escrow dd {
  position: relative;
  padding-left: 10px;
  margin-top: 6px;
  color: #888;
}
.cartWrap .escrow dd:before {
  content: "-";
  position: absolute;
  left: 0;
  top: 0;
}
.cartWrap .escrow dd + dt {
  margin-top: 20px;
}
.cartWrap .credit_card {
  margin-top: 30px;
}
.cartWrap .credit_card dd {
  padding-left: 10px;
  color: #888;
}
.cartWrap .orderSrmyArea {
  position: absolute;
  right: 0;
  top: 0;
  width: 305px;
}
.cartWrap .orderSrmyArea .content {
  padding: 30px 20px;
  border-radius: 10px;
  border: solid 1px #ddd;
}
.cartWrap .orderSrmyArea .content h2 {
  padding-bottom: 15px;
  border-bottom: 2px solid #bbb;
  font-size: 24px;
  line-height: 1em;
}
.cartWrap .orderSrmyArea .content dl {
  position: relative;
  padding: 25px 0 5px;
}
.cartWrap .orderSrmyArea .content dl dt {
  position: absolute;
  left: 0;
  line-height: 1em;
}
.cartWrap .orderSrmyArea .content dl dd {
  margin-bottom: 20px;
  text-align: right;
  line-height: 1em;
}
.cartWrap .orderSrmyArea .content dl dd span {
  font-size: 18px;
  font-family: "Roboto";
}
.cartWrap .orderSrmyArea .content dl.totalArea {
  padding-top: 30px;
  border-top: 1px solid #ddd;
}
.cartWrap .orderSrmyArea .content dl.totalArea dt.total {
  padding-top: 5px;
  font-size: 16px;
  line-height: 28px;
}
.cartWrap .orderSrmyArea .content dl.totalArea dd.total {
  font-size: 16px;
  line-height: 28px;
}
.cartWrap .orderSrmyArea .content dl.totalArea dd.total span {
  font-size: 28px;
  font-weight: 600;
}
.cartWrap .orderSrmyArea .content dl.totalArea dd.total .txt {
  margin-top: 5px;
  font-size: 12px;
  color: #888;
  line-height: 1em;
}
.cartWrap .orderSrmyArea .message {
  float: right;
  position: relative;
  height: 38px;
  padding: 0 15px;
  margin-top: 12px;
  border-radius: 10px;
  line-height: 38px;
  background: #eee;
}
.cartWrap .orderSrmyArea .message:before {
  content: "";
  position: absolute;
  right: 14px;
  top: -7px;
  width: 10px;
  height: 7px;
  background: url(/static/images/icon/ic_balloon2.png) no-repeat 0 0;
}
.cartWrap .orderSrmyArea .agree {
  clear: both;
  padding-top: 30px;
}
.cartWrap .orderSrmyArea .agree .tit {
  position: relative;
  padding-top: 20px;
  border-top: 1px solid #ddd;
}
.cartWrap .orderSrmyArea .agree .tit .icoFold {
  position: absolute;
  right: 10px;
  top: 37px;
}
.cartWrap .orderSrmyArea .agree .tit .icoFold:before, .cartWrap .orderSrmyArea .agree .tit .icoFold:after {
  width: 8px;
}
.cartWrap .orderSrmyArea .agree .tit .icoFold:before {
  right: 3px;
}
.cartWrap .orderSrmyArea .agree .cont {
  display: none;
  padding: 20px;
  margin-top: 20px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 22px;
  background: #f5f5f5;
}
.cartWrap .orderSrmyArea .agree .cont label {
  font-size: 14px;
  line-height: 26px;
}
.cartWrap .orderSrmyArea .agree .cont label span {
  position: relative;
  padding-left: 34px;
}
.cartWrap .orderSrmyArea .agree .cont label span:before {
  position: absolute;
  left: 0;
  top: 0;
}
.cartWrap .orderSrmyArea .agree .cont .text {
  padding: 15px 0;
  margin-top: 20px;
  border-top: 1px solid #ddd;
  color: #666;
  font-size: 12px;
  line-height: 22px;
}
.cartWrap .orderSrmyArea .btnTypeA {
  clear: both;
  width: 100%;
  margin-top: 30px;
}
.cartWrap .orderSrmyArea .noCartBtn {
  clear: both;
  width: 100%;
  height: 66px;
  margin-top: 30px;
  border-radius: 10px;
  text-align: center;
  color: #fff;
  line-height: 66px;
  font-size: 18px;
  font-weight: 600;
  background: #bbb;
}
.cartWrap .orderSrmyArea .bann {
  margin-top: 20px;
}
.cartWrap .orderSrmyArea .caution {
  margin-top: 30px;
}
.cartWrap .orderSrmyArea.fix {
  position: fixed;
  left: 50%;
  top: 40px;
  margin-left: 335px;
}
.cartWrap .orderSrmyArea.fix.fix2 {
  top: initial;
  bottom: 20px;
}
.cartWrap .orderSrmyArea.fixBottom {
  top: initial;
  bottom: 0;
}
.cartWrap .formTypeA .caution {
  margin-top: 15px;
}
.cartWrap .formTypeA .caution li {
  font-size: 16px;
}

.recommendArea {
  margin-top: 100px;
}
.recommendArea .head h2 {
  padding: 0 2px;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.recommendArea .head h2 span {
  position: relative;
}
.recommendArea .head h2 span:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  height: 10px;
  border-radius: 5px;
  background: #ddd;
}
.recommendArea .head p {
  font-size: 28px;
  line-height: 38px;
}
.recommendArea .pdtList li {
  width: 305px;
}
.recommendArea .pdtList li .thumb {
  width: 305px;
  height: 305px;
}
.recommendArea .pdtList li:nth-child(3n+1) {
  margin-left: 20px;
}
.recommendArea .pdtList li:nth-child(4n+1) {
  margin-left: 0;
}

.noDelivery {
  border-radius: 10px;
  margin-top: 30px;
  background: #f5f5f5;
}
.noDelivery a {
  display: block;
  padding: 35px 30px;
  font-size: 16px;
  line-height: 28px;
  color: #888;
}
.noDelivery a:before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 28px;
  margin: -6px 10px 0 0;
  vertical-align: middle;
  background: url(/static/images/icon/ic_location.png) no-repeat 0 0;
}
.noDelivery a strong {
  color: #111;
  font-size: 18px;
}

.orderComplete {
  padding: 60px 0;
  margin-top: 60px;
  border-radius: 10px;
  text-align: center;
  background: #f5f5f5;
}
.orderComplete .txt {
  padding-top: 70px;
  font-size: 26px;
  line-height: 1em;
  background: url(/static/images/icon/ic_check3.png) no-repeat 50% 0;
}
.orderComplete .detail {
  margin: 25px 0 40px;
  font-size: 0;
}
.orderComplete .detail p {
  display: inline-block;
  font-size: 16px;
  color: #888;
  line-height: 1em;
}
.orderComplete .detail p em {
  margin-left: 20px;
  color: #111;
  font-family: "Roboto";
}
.orderComplete .detail p + p {
  position: relative;
  margin-left: 30px;
  padding-left: 31px;
}
.orderComplete .detail p + p:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -5px;
  width: 1px;
  height: 10px;
  background: #aaa;
}
.orderComplete .btn a {
  width: 250px;
  margin: 0 3px;
}

/* 정기배송 */
.regularCycle {
  position: relative;
  padding: 30px 0 30px 120px;
  border-bottom: 1px solid #bbb;
  text-align: left;
}
.regularCycle h2 {
  position: absolute;
  left: 0;
  top: 30px;
  font-size: 16px;
}
.regularCycle h3 {
  margin-bottom: 10px;
  font-size: 16px;
}
.regularCycle > div.fl, .regularCycle > div.fr {
  width: 50%;
}
.regularCycle .calendar {
  width: 350px;
  margin-bottom: 20px;
}
.regularCycle:after {
  content: "";
  display: block;
  clear: both;
}
.regularCycle.bn {
  padding-bottom: 0;
}

.regularCycleCheck {
  position: relative;
  padding: 30px 0;
  border-bottom: 1px solid #bbb;
  text-align: left;
}
.regularCycleCheck h2 {
  padding-left: 30px;
  font-size: 18px;
  line-height: 22px;
  background: url(/static/images/icon/ic_calendar.png) no-repeat 0 0;
}
.regularCycleCheck h2 span {
  position: relative;
}
.regularCycleCheck h2 span:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  height: 10px;
  border-radius: 3px;
  background: #ddd;
}
.regularCycleCheck dl {
  margin: 20px 0 0 30px;
}
.regularCycleCheck dl dt {
  position: relative;
  display: inline-block;
  font-size: 16px;
  color: #666;
}
.regularCycleCheck dl dd {
  display: inline-block;
  margin-left: 6px;
  font-size: 16px;
}
.regularCycleCheck dl dd + dt {
  margin-left: 20px;
  padding-left: 21px;
}
.regularCycleCheck dl dd + dt:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 8px;
  margin-top: -4px;
  background: #ddd;
}
.regularCycleCheck .detail {
  padding: 20px;
  margin-top: 30px;
  border: 1px solid #ddd;
  border-radius: 10px;
}
.regularCycleCheck .detail h3 {
  margin: 0 10px;
}
.regularCycleCheck .detail h3 button {
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
}
.regularCycleCheck .detail h3 button:before, .regularCycleCheck .detail h3 button:after {
  width: 12px;
  margin-top: -5px;
}
.regularCycleCheck .detail h3 button:before {
  right: 5px;
}
.regularCycleCheck .detail .list {
  margin-top: 20px;
}
.regularCycleCheck .detail .list .listTypeC td {
  font-size: 14px;
}
.regularCycleCheck .detail .list .listTypeC td .num, .regularCycleCheck .detail .list .listTypeC td.num {
  font-size: 16px;
}
.regularCycleCheck .detail .list .listTypeC td strong.num {
  font-size: 18px;
}
.regularCycleCheck .detail .list .listTypeC td .btn {
  position: relative;
  width: auto;
}
.regularCycleCheck .detail .list .listTypeC td .btn .setDate {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0 !important;
  width: 100%;
  height: 100%;
}
.regularCycleCheck .detail:first-child {
  margin-top: 0;
}

/* 픽업 */
.pickupAddr .noAddr {
  border-radius: 10px;
  margin-top: 30px;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  background: #f5f5f5;
}
.pickupAddr .noAddr a {
  display: block;
  padding: 35px 0 35px 30px;
}
.pickupAddr .noAddr a:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: -5px 10px 0 0;
  vertical-align: middle;
  background: url(/static/images/icon/ic_find.png) no-repeat 0 0;
}
.pickupAddr table {
  width: 100%;
  table-layout: fixed;
}
.pickupAddr table th {
  padding: 30px 0;
  border-bottom: 1px solid #ddd;
  font-size: 16px;
  color: #666;
  font-weight: 400;
  text-align: left;
  line-height: 1em;
  vertical-align: top;
}
.pickupAddr table td {
  position: relative;
  padding: 30px 0;
  border-bottom: 1px solid #ddd;
  font-size: 16px;
  line-height: 1em;
}
.pickupAddr table td span.tel {
  margin-left: 20px;
}
.pickupAddr table td .addr {
  margin-top: 10px;
  font-size: 16px;
}
.pickupAddr table td .date {
  display: inline-block;
  padding-left: 28px;
  line-height: 19px;
  font-size: 16px;
  background: url(/static/images/icon/ic_calendar2.png) no-repeat 0 0;
}
.pickupAddr table td .time {
  position: relative;
  display: inline-block;
  padding-left: 50px;
  margin-left: 20px;
  line-height: 19px;
  font-size: 16px;
  background: url(/static/images/icon/ic_time.png) no-repeat 21px 0;
}
.pickupAddr table td .time:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 8px;
  margin-top: -4px;
  background: #ddd;
}
.pickupAddr table td .date input, .pickupAddr table td .time input {
  width: 90px;
  height: auto;
  padding: 0;
  border: 0;
  font-size: 16px;
  line-height: 19px;
  font-family: "Roboto";
  background: none;
}
.pickupAddr table td .txtBtn {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -7px;
  line-height: 14px;
}
.pickupAddr table td .txtBtn a {
  color: #888;
}
.pickupAddr table td .txtBtn a:before, .pickupAddr table td .txtBtn a:after {
  margin-top: 0;
  background: #888;
}
.pickupAddr table td .txtBtn a span {
  text-decoration: underline;
}

/********** 4_마이페이지 **********/
#contArea.mypage {
  min-height: 764px;
  padding-top: 60px;
}

/* 인덱스 */
.mySrmy .head {
  overflow: hidden;
  padding-bottom: 20px;
}
.mySrmy .head .welcome {
  float: left;
  font-size: 24px;
  line-height: 28px;
}
.mySrmy .head .welcome strong {
  font-size: 28px;
}
.mySrmy .head .line {
  float: left;
  margin: 1px 0 0 15px;
  color: #aaa;
  line-height: 28px;
}
.mySrmy .head .status {
  position: relative;
  float: right;
}
.mySrmy .head .status img {
  float: right;
  margin-top: 4px;
}
.mySrmy .head .status .message {
  float: right;
  height: 32px;
  padding: 0 13px;
  margin-right: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  line-height: 30px;
}
.mySrmy ul {
  overflow: hidden;
  height: 115px;
  padding: 28px 0 27px;
  border-radius: 10px;
  background: #f5f5f5;
}
.mySrmy ul li {
  float: left;
  width: 25%;
  text-align: center;
}
.mySrmy ul li em {
  display: block;
  margin-bottom: 10px;
  font-size: 34px;
  line-height: 1em;
}
.mySrmy ul li span {
  color: #888;
}
.mySrmy ul li span:before, .mySrmy ul li span:after {
  background: #888;
}
.mySrmy ul li + li {
  border-left: 1px solid #ddd;
}

.myClinic {
  overflow: hidden;
  padding: 30px 0;
  border-top: 2px solid #bbb;
  border-bottom: 1px solid #ddd;
}
.myClinic .name {
  float: left;
  font-size: 18px;
  font-weight: 600;
  line-height: 18px;
}
.myClinic .name a:after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 16px;
  margin: -4px 0 0 6px;
  vertical-align: middle;
  background: url(/static/images/icon/ic_location4.png) no-repeat 0 0;
}
.myClinic .addr {
  float: left;
  margin-left: 10px;
  line-height: 18px;
}
.myClinic .tel {
  float: left;
  margin-left: 15px;
  font-family: "Roboto";
  line-height: 18px;
}
.myClinic .tel a {
  padding-left: 16px;
  color: #666;
  background: url(/static/images/icon/ic_tel.png) no-repeat 0 0;
}
.myClinic .chat {
  float: left;
  margin-left: 35px;
  font-size: 16px;
  line-height: 18px;
}
.myClinic .chat a {
  position: relative;
  padding-left: 20px;
  background: url(/static/images/icon/ic_kakao7.png) no-repeat 0 50%;
}
.myClinic .chat a:before {
  content: "";
  position: absolute;
  left: -5px;
  right: -5px;
  bottom: 0;
  z-index: -1;
  height: 10px;
  border-radius: 5px;
  background: #ffeb3b;
}
.myClinic .line {
  float: right;
  color: #aaa;
}

.healthTestBann {
  height: 186px;
  padding: 40px 0 0 20px;
  margin-top: 40px;
  border-radius: 10px;
  background: #d0eaf4 url(/static/images/common/bg_clinic.png) no-repeat calc(100% - 109px) 100%;
}
.healthTestBann .tit {
  font-size: 24px;
  line-height: 1em;
}
.healthTestBann .text {
  margin: 30px 0 10px;
  font-size: 18px;
  line-height: 1em;
}
.healthTestBann .go {
  padding-right: 46px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1em;
  background: url(/static/images/icon/ic_arrow9.png) no-repeat 100% 50%;
}

.titHead {
  margin: 60px 0 20px;
  overflow: hidden;
}
.titHead h2.typeC {
  float: left;
  padding: 0;
}
.titHead .text {
  float: left;
  margin: 1px 0 0 10px;
  color: #888;
}
.titHead .icoGo {
  float: right;
  margin-top: 5px;
  color: #888;
}
.titHead .icoGo:before, .titHead .icoGo:after {
  background: #888;
}

.orderStatus {
  width: 100%;
  margin-top: 60px;
  text-align: center;
  font-size: 0;
}
.orderStatus li {
  display: inline-block;
  width: 118px;
  text-align: center;
  color: #888;
  font-size: 14px;
}
.orderStatus li em {
  display: block;
  width: 118px;
  height: 118px;
  margin: 0 auto 10px;
  border-radius: 100%;
  font-size: 34px;
  line-height: 118px;
  color: #111;
  background: #f5f5f5;
}
.orderStatus li + li {
  position: relative;
  margin-left: 60px;
}
.orderStatus li + li:before {
  content: "";
  position: absolute;
  left: -60px;
  top: 59px;
  width: 60px;
  height: 1px;
  background: #ddd;
}
.orderStatus.typeB li:before {
  display: none;
}

.boardArea .listHead {
  position: relative;
  margin: 60px 0 20px;
}
.boardArea .listHead h2 {
  padding: 0;
}
.boardArea .listHead a {
  position: absolute;
  right: 0;
  bottom: 0;
  color: #aaa;
}
.boardArea .qna {
  float: left;
  width: 495px;
}
.boardArea .qna .list {
  height: 308px;
  padding: 0 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
}
.boardArea .qna .list li {
  position: relative;
  padding: 22px 100px 22px 0;
}
.boardArea .qna .list li .type {
  color: #888;
}
.boardArea .qna .list li .type .date:before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 8px;
  margin: -2px 10px 0 6px;
  vertical-align: middle;
  background: #ddd;
}
.boardArea .qna .list li .tit {
  margin-top: 10px;
  font-size: 16px;
}
.boardArea .qna .list li .status {
  position: absolute;
  right: 0;
  top: calc(50% - 9px);
  padding-left: 24px;
  color: #888;
  line-height: 18px;
  background: url(/static/images/icon/ic_wait.png) no-repeat 0 50%;
}
.boardArea .qna .list li .status.complete {
  color: #4279be;
  background-image: url(/static/images/icon/ic_check10.png);
}
.boardArea .qna .list li + li {
  border-top: 1px solid #eee;
}
.boardArea .review {
  float: right;
  width: 495px;
}
.boardArea .review .list {
  height: 308px;
  padding: 0 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
}
.boardArea .review .list li {
  position: relative;
  height: 102px;
  padding: 25px 110px 20px 82px;
}
.boardArea .review .list li .thumb {
  position: absolute;
  left: 0;
  top: 20px;
  width: 62px;
  height: 62px;
  padding: 5px;
  border-radius: 10px;
  background: #eee;
}
.boardArea .review .list li .thumb img {
  width: 100%;
  height: 100%;
}
.boardArea .review .list li .tit {
  overflow: hidden;
  font-size: 16px;
}
.boardArea .review .list li .info {
  margin-top: 5px;
  color: #888;
}
.boardArea .review .list li .info .date:before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 8px;
  margin: -2px 10px 0 6px;
  vertical-align: middle;
  background: #ddd;
}
.boardArea .review .list li .recommend {
  position: absolute;
  right: 0;
  top: calc(50% - 9px);
}
.boardArea .review .list li .recommend span {
  display: block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
.boardArea .review .list li + li {
  border-top: 1px solid #eee;
}
.boardArea:after {
  content: "";
  display: block;
  clear: both;
}

/* 주문조회 */
.orderMore {
  margin-top: -66px;
  height: 66px;
  text-align: right;
  font-size: 16px;
}

.orderSrch {
  padding: 20px;
  margin-bottom: 30px;
  border-radius: 10px;
  background: #f5f5f5;
}
.orderSrch .field {
  position: relative;
  height: 48px;
  margin-bottom: 20px;
  border-radius: 10px;
  background: #fff;
}
.orderSrch .field input[type=text] {
  width: 100%;
  border: 0;
}
.orderSrch .period {
  overflow: hidden;
  float: left;
  width: 330px;
  border-radius: 10px;
}
.orderSrch .period input {
  position: absolute;
  left: -100px;
  top: -100px;
  opacity: 0;
  z-index: -1;
}
.orderSrch .period label {
  float: left;
  width: 110px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  font-size: 16px;
  color: #888;
  cursor: pointer;
  background: #fff;
}
.orderSrch .period label ~ label {
  border-left: 1px solid #ddd;
}
.orderSrch .period input:checked + label {
  color: #fff;
  background: #aaa;
}
.orderSrch .calendarArea {
  float: right;
}
.orderSrch .calendarArea .calendar {
  float: left;
  width: 247px;
  border: 0;
  background-color: #fff;
}
.orderSrch .calendarArea span {
  float: left;
  width: 20px;
  line-height: 48px;
  text-align: center;
  font-family: "Roboto";
  font-size: 16px;
}
.orderSrch .calendarArea .btnTypeI {
  float: left;
  margin-left: 10px;
}
.orderSrch:after {
  content: "";
  display: block;
  clear: both;
}

.tabInit + .orderSrch {
  margin-top: 30px;
}

.myOrderList .head {
  overflow: hidden;
  margin-top: 40px;
}
.myOrderList .head .fl {
  color: #888;
}
.myOrderList .head .fl a, .myOrderList .head .fl span {
  margin-left: 6px;
  font-size: 18px;
}
.myOrderList .head .fr {
  color: #888;
}
.myOrderList .head .fr span {
  margin-left: 6px;
}
.myOrderList .head .fr p {
  display: inline-block;
  color: #888;
}
.myOrderList .head .fr p + p:before {
  content: "";
  display: inline-block;
  margin: -3px 20px 0;
  width: 1px;
  height: 10px;
  vertical-align: middle;
  background: #ddd;
}
.myOrderList .head.first {
  margin-top: 0;
}
.myOrderList .orderPdtList {
  margin-top: 15px;
  border-top: 2px solid #bbb;
}
.myOrderList .orderPdtList .deliType {
  margin-left: 6px;
  color: #888;
  font-size: 14px;
}
.myOrderList .orderPdtList .deliType.ice:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: -4px 4px 0 0;
  vertical-align: middle;
  background: url(/static/images/icon/ic_frozen.png) no-repeat 0 0;
}
.myOrderList .orderPdtList .btn {
  width: 110px;
  padding: 0;
}
.myOrderList .orderPdtList .routineSrmy {
  margin-top: 10px;
}
.myOrderList .orderPdtList .routineSrmy p {
  display: inline-block;
  color: #888;
}
.myOrderList .orderPdtList .routineSrmy p + p:before {
  content: "";
  display: inline-block;
  margin: -3px 20px 0;
  width: 1px;
  height: 10px;
  vertical-align: middle;
  background: #bbb;
}
.myOrderList + .caution {
  margin-top: 30px;
}

.processInfo {
  padding: 30px 20px;
  margin-top: 100px;
  border-radius: 10px;
  background: #f5f5f5;
}
.processInfo h2 {
  font-size: 20px;
  line-height: 1em;
}
.processInfo li {
  position: relative;
  padding-left: 110px;
  margin-top: 15px;
  color: #666;
}
.processInfo li em {
  position: absolute;
  left: 0;
  top: 2px;
  width: 110px;
  font-size: 16px;
  color: #111;
}

.myListArea .caution:first-child {
  margin-top: 30px;
}

.payInfo {
  padding: 30px 0;
  border-bottom: 1px solid #ddd;
}
.payInfo table {
  float: left;
  width: 610px;
  border: 0;
}
.payInfo table tr {
  border: 0;
}
.payInfo table th {
  padding-top: 0;
}
.payInfo table td {
  position: relative;
  padding-top: 0;
}
.payInfo table td .btn {
  position: absolute;
  right: 0;
  top: 0;
}
.payInfo .priceArea {
  float: right;
  width: 390px;
  padding-left: 30px;
  border-left: 1px solid #ddd;
}
.payInfo .priceArea dl {
  position: relative;
}
.payInfo .priceArea dl dt {
  position: absolute;
  left: 0;
  font-size: 16px;
  line-height: 1em;
}
.payInfo .priceArea dl dt.total {
  padding-top: 30px;
  margin-top: 30px;
}
.payInfo .priceArea dl dt.totalPrice {
  margin-top: 30px;
}
.payInfo .priceArea dl dd {
  padding-left: 150px;
  line-height: 1em;
  text-align: right;
}
.payInfo .priceArea dl dd span {
  font-size: 16px;
}
.payInfo .priceArea dl dd span.pdtPrice {
  font-size: 18px;
}
.payInfo .priceArea dl dd ~ dt, .payInfo .priceArea dl dd ~ dd {
  margin-top: 20px;
}
.payInfo .priceArea dl dd.total {
  padding-top: 30px;
  margin-top: 30px;
  border-top: 1px solid #ddd;
}
.payInfo .priceArea dl dd.totalPrice {
  margin-top: 30px;
  font-size: 16px;
}
.payInfo .priceArea dl dd.totalPrice span {
  font-size: 28px;
  font-weight: 600;
}
.payInfo:after {
  content: "";
  display: block;
  clear: both;
}

.addCaution {
  position: relative;
  padding-left: 200px;
  margin-top: 20px;
}
.addCaution h2 {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  font-size: 16px;
}
.addCaution p, .addCaution li {
  position: relative;
  padding-left: 10px;
  color: #888;
}
.addCaution p:before, .addCaution li:before {
  content: "-";
  position: absolute;
  left: 0;
  top: 0;
}

.formTypeA td.pickupClinic {
  position: relative;
  padding-right: 400px;
}
.formTypeA td.pickupClinic .name {
  margin-bottom: 10px;
  font-size: 24px;
}
.formTypeA td.pickupClinic .name a:after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 16px;
  margin: -2px 0 0 10px;
  background: url(/static/images/icon/ic_location4.png) no-repeat 0 0;
}
.formTypeA td.pickupClinic .addr {
  display: inline-block;
  margin: 0;
  vertical-align: top;
  font-size: 16px;
  color: #888;
}
.formTypeA td.pickupClinic .tel {
  display: inline-block;
  margin-left: 30px;
  vertical-align: top;
  font-family: "Roboto";
  font-size: 16px;
  color: #888;
}
.formTypeA td.pickupClinic .tel a {
  padding-left: 22px;
  color: #888;
  background: url(/static/images/icon/ic_tel.png) no-repeat 0 0;
}
.formTypeA td.pickupClinic .detail {
  position: absolute;
  right: 0;
  top: 30px;
  width: 300px;
}
.formTypeA td.pickupClinic .detail p {
  float: left;
  width: 50%;
  color: #888;
}
.formTypeA td.pickupClinic .detail p em {
  display: block;
  margin-top: 10px;
  font-family: "Roboto";
  font-size: 24px;
  color: #111;
}

/* 쿠폰 */
.myCouponArea > .btn {
  margin-top: 40px;
  text-align: right;
}
.myCouponArea > .btn a {
  padding-left: 30px;
  font-size: 16px;
  line-height: 1em;
  background: url(/static/images/icon/ic_coupon.png) no-repeat 0 50%;
}
.myCouponArea .btn ~ .couponList {
  margin-top: 30px;
}

.couponList {
  margin-top: 60px;
}
.couponList li {
  position: relative;
  float: left;
  width: 497px;
  height: 260px;
  padding: 20px 130px 0 30px;
  background: url(/static/images/common/bg_coupon.png) no-repeat 0 0;
}
.couponList li h2 {
  font-size: 20px;
  font-weight: 600;
}
.couponList li h2 span {
  position: relative;
}
.couponList li h2 span:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0.1;
  height: 10px;
  border-radius: 5px;
  background: #111;
}
.couponList li .num {
  position: absolute;
  right: 130px;
  top: 20px;
  color: #888;
}
.couponList li .tit {
  margin-top: 20px;
  font-size: 18px;
}
.couponList li .srmy, .couponList li .date {
  color: #888;
}
.couponList li .discount {
  position: absolute;
  left: 30px;
  bottom: 30px;
  font-size: 44px;
  font-weight: 500;
}
.couponList li:after {
  content: "";
  position: absolute;
  right: 40px;
  top: 87px;
  width: 21px;
  height: 86px;
  background: url(/static/images/common/logo4.png) no-repeat 0 0;
}
.couponList li:nth-child(2n) {
  margin-left: 36px;
}
.couponList li:nth-child(2n) ~ li {
  margin-top: 36px;
}
.couponList.downList li .btn {
  position: absolute;
  right: 20px;
  top: 85px;
  width: 62px;
  text-align: center;
  font-size: 16px;
}
.couponList.downList li .btn:before {
  content: "";
  display: block;
  width: 62px;
  height: 62px;
  margin-bottom: 5px;
  border-radius: 100%;
  background: #111 url(/static/images/icon/ic_download.png) no-repeat 50% 50%;
}
.couponList.downList li:after {
  display: none;
}
.couponList:after {
  content: "";
  display: block;
  clear: both;
}

/* 포인트 */
.myPoint {
  margin-bottom: 40px;
  position: relative;
}
.myPoint > .btn {
  margin-top: 40px;
  text-align: right;
}
.myPoint > .btn a {
  padding-left: 30px;
  font-size: 16px;
  line-height: 1em;
  background: url(/static/images/icon/ic_coupon.png) no-repeat 0 50%;
}
.myPoint .srmy {
  overflow: hidden;
  padding: 30px 0;
  margin-bottom: 10px;
  border-radius: 10px;
  background: #f5f5f5;
}
.myPoint .srmy p {
  position: relative;
  float: left;
  width: 50%;
  padding: 0 40px;
  line-height: 45px;
  font-size: 16px;
  color: #666;
}
.myPoint .srmy p .num {
  position: absolute;
  right: 30px;
  top: 0;
  font-size: 28px;
}
.myPoint .srmy p .num em {
  font-size: 34px;
}
.myPoint .srmy p + p {
  border-left: 1px solid #ddd;
}
.myPoint .coop_btn_p {
  position: absolute;
  top: 95px;
  width: 100%;
  text-align: right;
  margin-top: 20px;
}
.myPoint .coop_btn_p a img {
  width: 170px;
  object-fit: contain;
}

.pointList .pointTypeA, .pointList .pointTypeB {
  width: 54px;
  height: 54px;
  margin: 0 auto;
  border-radius: 100%;
  border: 1px solid #4279be;
  text-align: center;
  line-height: 52px;
  color: #4279be;
}
.pointList .pointTypeB {
  border-color: #ddd;
  color: #aaa;
}

/* 리뷰 */
.myReviewHead {
  overflow: hidden;
  position: relative;
  padding: 30px 40px;
  margin: 40px 0 60px;
  border-radius: 10px;
  background: #f5f5f5;
}
.myReviewHead .text {
  float: left;
  margin-top: 13px;
  font-size: 16px;
}
.myReviewHead .text em {
  display: block;
  margin-top: 10px;
  font-size: 20px;
}
.myReviewHead ul {
  float: right;
}
.myReviewHead ul li {
  float: left;
  margin-left: 30px;
  color: #666;
  text-align: center;
}
.myReviewHead ul li em {
  display: block;
  color: #111;
  font-size: 16px;
}
.myReviewHead ul li:before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  background: url(/static/images/icon/ic_text.png) no-repeat 50% 0;
}
.myReviewHead ul li.type2:before {
  background-image: url(/static/images/icon/ic_photo.png);
}
.myReviewHead ul li.type3:before {
  background-image: url(/static/images/icon/ic_text2.png);
}
.myReviewHead ul li.type4:before {
  background-image: url(/static/images/icon/ic_photo2.png);
}
.myReviewHead ul li.type5:before {
  background-image: url(/static/images/icon/ic_best.png);
}

.myReviewList {
  margin-top: 40px;
}
.myReviewList > li {
  padding: 0 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
}
.myReviewList > li .headArea .head {
  position: relative;
  min-height: 97px;
  border-bottom: 1px solid #ddd;
  text-align: right;
}
.myReviewList > li .headArea .head a {
  display: block;
  min-height: 96px;
  padding: 30px 70px 0 0;
}
.myReviewList > li .headArea .head a .pdt {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 400px;
  min-height: 56px;
  padding: 0;
  text-align: left;
}
.myReviewList > li .headArea .head a .pdt .thumb {
  top: 0;
  width: 56px;
  height: 56px;
}
.myReviewList > li .headArea .head a .pdt .content {
  padding-left: 68px;
}
.myReviewList > li .headArea .head a .type {
  display: inline-block;
  height: 32px;
  padding: 0 15px;
  margin-right: 10px;
  border-radius: 16px;
  line-height: 32px;
  color: #fff;
  font-weight: 600;
  font-family: "Roboto";
  vertical-align: middle;
  background: #e01846;
}
.myReviewList > li .headArea .head a .recommend {
  display: inline-block;
  font-size: 18px;
  line-height: 32px;
  font-weight: 600;
  font-family: "Roboto";
  vertical-align: middle;
}
.myReviewList > li .headArea .head a .recommend:before {
  margin-right: 10px;
}
.myReviewList > li .headArea .head a .date {
  position: relative;
  display: inline-block;
  padding-right: 20px;
  margin-left: 20px;
  font-size: 16px;
  line-height: 32px;
  vertical-align: middle;
}
.myReviewList > li .headArea .head a .date:after {
  content: "";
  position: absolute;
  right: 0;
  top: calc(50% - 8px);
  width: 1px;
  height: 16px;
  background: #ddd;
}
.myReviewList > li .headArea .head a:before {
  right: 26px;
}
.myReviewList > li .headArea .head a:after {
  right: 20px;
}
.myReviewList > li .contentArea .srmyArea {
  position: relative;
  min-height: 112px;
  padding: 50px 112px 0 20px;
}
.myReviewList > li .contentArea .srmyArea .photoList {
  display: none;
  overflow: hidden;
  margin: 0 -5px 20px 0;
}
.myReviewList > li .contentArea .srmyArea .photoList li {
  float: left;
  overflow: hidden;
  width: 190px;
  height: 190px;
  border-radius: 10px;
}
.myReviewList > li .contentArea .srmyArea .photoList li img {
  width: 100%;
}
.myReviewList > li .contentArea .srmyArea .photoList li + li {
  margin-left: 10px;
}
.myReviewList > li .contentArea .srmyArea .tit {
  overflow: hidden;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}
.myReviewList > li .contentArea .srmyArea .tit .type {
  float: left;
  height: 24px;
  padding: 0 8px;
  margin-right: 10px;
  border: 1px solid #ff5a00;
  border-radius: 12px;
  text-align: center;
  line-height: 22px;
  font-size: 12px;
  color: #ff5a00;
}
.myReviewList > li .contentArea .srmyArea .photo {
  position: absolute;
  right: 20px;
  top: 20px;
  overflow: hidden;
  width: 72px;
  height: 72px;
  border-radius: 10px;
}
.myReviewList > li .contentArea .srmyArea .photo .num {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  text-align: center;
  line-height: 28px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
}
.myReviewList > li .contentArea .srmyArea.noImg {
  padding-right: 20px;
}
.myReviewList > li .contentArea .content {
  display: none;
  padding: 20px 20px 30px;
  font-size: 16px;
  color: #666;
}
.myReviewList > li .contentArea .content .myBtn {
  margin-top: 40px;
}
.myReviewList > li .contentArea .content .myBtn .modify {
  display: inline-block;
  padding-left: 28px;
  line-height: 20px;
  background: url(/static/images/icon/ic_edit.png) no-repeat 0 50%;
}
.myReviewList > li .contentArea .content .myBtn .delete {
  display: inline-block;
  padding-left: 28px;
  margin-left: 20px;
  line-height: 20px;
  color: #aaa;
  background: url(/static/images/icon/ic_del2.png) no-repeat 0 50%;
}
.myReviewList > li .contentArea .content .reply {
  padding: 30px 40px 30px 120px;
  margin-top: 40px;
  border-radius: 10px;
  font-size: 16px;
  line-height: 26px;
  background: #f5f5f5 url(/static/images/common/logo2.png) no-repeat 30px 30px;
}
.myReviewList > li .contentArea .content .reply .date {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1px;
  color: #888;
}
.myReviewList > li.on .srmyArea .photoList {
  display: block;
}
.myReviewList > li.on .srmyArea .photo {
  display: none;
}
.myReviewList > li + li {
  margin-top: 20px;
}

/* 문의내역 */
.qnaListHead {
  position: relative;
  text-align: right;
}
.qnaListHead .btn {
  height: 70px;
  margin-top: -70px;
}
.qnaListHead .btn a {
  padding-left: 20px;
  font-size: 16px;
  line-height: 20px;
  background: url(/static/images/icon/ic_qnaList2.png) no-repeat 0 0;
}

.qnaList > li {
  border: 1px solid #ddd;
  border-radius: 10px;
}
.qnaList > li > a {
  position: relative;
  display: block;
  padding: 20px 220px 20px 30px;
}
.qnaList > li > a .type {
  color: #888;
}
.qnaList > li > a .type span:before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 8px;
  margin: -2px 10px 0;
  vertical-align: middle;
  background: #ddd;
}
.qnaList > li > a .tit {
  margin-top: 15px;
  font-size: 16px;
}
.qnaList > li > a .status {
  position: absolute;
  right: 100px;
  top: calc(50% - 9px);
  padding-left: 24px;
  color: #888;
  line-height: 18px;
  background: url(/static/images/icon/ic_wait.png) no-repeat 0 50%;
}
.qnaList > li > a .status.complete {
  color: #4279be;
  background-image: url(/static/images/icon/ic_check10.png);
}
.qnaList > li > a.icoFold:before {
  width: 10px;
  right: 34px;
  background: #666;
}
.qnaList > li > a.icoFold:after {
  width: 10px;
  right: 30px;
  background: #666;
}
.qnaList > li > .content {
  padding: 20px 10px;
  margin: 0 20px;
  border-top: 1px solid #ddd;
  color: #666;
}
.qnaList > li > .content .pdtBox {
  width: 590px;
  padding: 0 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  background: #f5f5f5;
}
.qnaList > li > .content .pdtBox .thumb {
  background: #fff;
}
.qnaList > li > .content .photoList {
  overflow: hidden;
  margin: 0 -5px 20px 0;
}
.qnaList > li > .content .photoList li {
  float: left;
  overflow: hidden;
  width: 190px;
  height: 190px;
  border-radius: 10px;
}
.qnaList > li > .content .photoList li img {
  width: 100%;
}
.qnaList > li > .content .photoList li + li {
  margin-left: 10px;
}
.qnaList > li > .content .myBtn {
  margin-top: 30px;
}
.qnaList > li > .content .myBtn .delete {
  display: inline-block;
  padding-left: 28px;
  line-height: 20px;
  color: #aaa;
  background: url(/static/images/icon/ic_del2.png) no-repeat 0 50%;
}
.qnaList > li > .content .reply {
  padding: 30px 40px 30px 120px;
  margin-top: 30px;
  border-radius: 10px;
  font-size: 16px;
  line-height: 26px;
  background: #f5f5f5 url(/static/images/common/logo2.png) no-repeat 30px 30px;
}
.qnaList > li > .content .reply .date {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1px;
  color: #888;
}
.qnaList > li + li {
  margin-top: 20px;
}

/* 비밀번호확인 */
.pwdCheck {
  border-top: 2px solid #bbb;
  padding-top: 40px;
}
.pwdCheck .text {
  font-size: 24px;
}
.pwdCheck .text2 {
  font-size: 16px;
}
.pwdCheck .text2 + .text {
  margin-top: 30px;
}
.pwdCheck fieldset {
  display: block;
  padding: 40px 0;
  border-bottom: 1px solid #ddd;
}
.pwdCheck fieldset label {
  display: inline-block;
  width: 140px;
  font-size: 16px;
  line-height: 48px;
  color: #888;
}
.pwdCheck fieldset input {
  display: inline-block;
  width: 356px;
}
.pwdCheck .certify {
  padding: 30px 0;
  margin-top: 30px;
  text-align: center;
  line-height: 24px;
  font-size: 20px;
  background: #f5f5f5;
}
.pwdCheck .certify img {
  vertical-align: middle;
  margin: -3px 14px 0 0;
}

/* 회원정보수정 */
.modifyArea h2 {
  height: 50px;
  margin-top: 60px;
  font-size: 24px;
  line-height: 1em;
}
.modifyArea h2:first-child {
  margin-top: 0;
}
.modifyArea .fieldArea .field {
  float: left;
  width: 50%;
  padding-right: 20px;
}
.modifyArea .fieldArea .field:nth-child(2n) {
  padding-left: 20px;
  padding-right: 0;
}
.modifyArea .fieldArea .field:nth-child(2) {
  padding-top: 10px;
}
.modifyArea .fieldArea .btnTypeG {
  width: 100%;
}
.modifyArea .fieldArea:after {
  content: "";
  display: block;
  clear: both;
}
.modifyArea .agree {
  padding-top: 15px;
  margin-top: 30px;
  border-top: 1px solid #ddd;
}
.modifyArea .agree .tit {
  float: left;
  color: #e01846;
}
.modifyArea .agree .tit strong {
  color: #111;
  font-size: 16px;
}
.modifyArea .agree label {
  margin-left: 40px;
}
.modifyArea .agree label span {
  font-size: 16px;
}
.modifyArea .agree:after {
  content: "";
  display: block;
  clear: both;
}
.modifyArea .snsLogin {
  padding: 30px 0;
  border-top: 2px solid #bbb;
}
.modifyArea .snsLogin p {
  position: relative;
  float: left;
  width: 495px;
  height: 56px;
  padding: 0 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  line-height: 54px;
  font-size: 16px;
}
.modifyArea .snsLogin p img {
  margin: -2px 20px 0 0;
  vertical-align: middle;
}
.modifyArea .snsLogin p a {
  position: absolute;
  right: 20px;
  top: 15px;
  overflow: hidden;
  width: 42px;
  height: 24px;
  border-radius: 12px;
  background: #ddd;
  text-indent: 100%;
  white-space: nowrap;
}
.modifyArea .snsLogin p a:before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: #fff;
}
.modifyArea .snsLogin p a:after {
  content: "";
  position: absolute;
  right: 2px;
  top: 2px;
  width: 18px;
  height: 20px;
  background: url(/static/images/icon/ic_check9.png) no-repeat 50% 50%;
}
.modifyArea .snsLogin p a.connect {
  background: #ff5a00;
}
.modifyArea .snsLogin p a.connect:before {
  left: initial;
  right: 2px;
}
.modifyArea .snsLogin p a.connect:after {
  left: 2px;
  right: initial;
  background-image: url(/static/images/icon/ic_cancel.png);
}
.modifyArea .snsLogin p:nth-child(2n) {
  float: right;
}
.modifyArea .snsLogin:after {
  content: "";
  display: block;
  clear: both;
}
.modifyArea .secedeIntro {
  position: relative;
  padding-top: 20px;
  border-top: 1px solid #ddd;
}
.modifyArea .secedeIntro p {
  display: inline-block;
}
.modifyArea .secedeIntro .tit {
  width: 120px;
  font-size: 16px;
  color: #666;
}
.modifyArea .secedeIntro a {
  position: absolute;
  right: 0;
  top: 20px;
  text-decoration: underline;
}

/* 회원탈퇴 */
.secedeArea {
  margin-top: 20px;
}
.secedeArea .myPoint {
  overflow: hidden;
}
.secedeArea .myPoint p {
  position: relative;
  float: left;
  width: 495px;
  height: 105px;
  padding: 30px;
  border-radius: 10px;
  line-height: 45px;
  font-size: 16px;
  color: #666;
  background: #f5f5f5;
}
.secedeArea .myPoint p strong {
  position: absolute;
  right: 30px;
  top: 30px;
  font-size: 34px;
  color: #111;
}
.secedeArea .myPoint p:nth-child(2n) {
  float: right;
}
.secedeArea h2 {
  padding: 60px 0 20px;
  border-bottom: 2px solid #bbb;
  font-size: 24px;
}
.secedeArea h3 {
  margin: 30px 0 10px;
  font-size: 16px;
  color: #666;
}
.secedeArea .txtArea {
  height: 120px;
}
.secedeArea .agreeTxt {
  margin-top: 30px;
  font-size: 16px;
}

/* 닥터팩관리 */
.drpackHead {
  margin-bottom: 30px;
}
.drpackHead .btn {
  height: 88px;
  margin-top: -88px;
  text-align: right;
}

.myDrpackList .head {
  overflow: hidden;
  margin: 40px 0 15px;
}
.myDrpackList .head .fl, .myDrpackList .head .fr {
  color: #888;
}
.myDrpackList .head .fl strong, .myDrpackList .head .fr strong {
  margin-right: 20px;
  font-size: 16px;
  color: #111;
}
.myDrpackList .head .fl .fontA, .myDrpackList .head .fr .fontA {
  margin-left: 10px;
}
.myDrpackList .head .fl .fontA + .fontA:before, .myDrpackList .head .fr .fontA + .fontA:before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 10px;
  margin: -2px 10px 0 0;
  vertical-align: middle;
  background: #ddd;
}
.myDrpackList .head .fr:before {
  content: "";
  display: inline-block;
  width: 19px;
  height: 19px;
  margin: -5px 4px 0 0;
  vertical-align: middle;
  background: url(/static/images/icon/ic_calendar2.png) no-repeat 0 0;
}
.myDrpackList .orderPdtList {
  border-top: 2px solid #bbb;
}

.drpackProcess h2 {
  font-size: 20px;
}
.drpackProcess ol li {
  position: relative;
  float: left;
  width: 32%;
  height: 92px;
  padding: 12px 0 0 122px;
  margin-top: 80px;
}
.drpackProcess ol li .tit {
  position: absolute;
  left: -2px;
  top: -50px;
  font-size: 30px;
  font-weight: 600;
  color: #eee;
}
.drpackProcess ol li em {
  font: 600 16px/1em "Roboto";
}
.drpackProcess ol li strong {
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1em;
}
.drpackProcess ol li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 92px;
  height: 92px;
  border-radius: 10px;
  background: #f5f5f5 url(/static/images/drpack/ic_useInfo1.png) no-repeat 50% 50%;
}
.drpackProcess ol:after {
  content: "";
  display: block;
  clear: both;
}
.drpackProcess ol li:nth-child(3n+1) {
  width: 36%;
}
.drpackProcess ol li:nth-child(4) {
  margin-left: 0;
}
.drpackProcess ol li:nth-child(3) ~ li {
  margin-bottom: 0;
}
.drpackProcess ol li:nth-child(2):before {
  background-image: url(/static/images/drpack/ic_useInfo2.png);
}
.drpackProcess ol li:nth-child(3):before {
  background-image: url(/static/images/drpack/ic_useInfo3.png);
}
.drpackProcess ol li:nth-child(4):before {
  background-image: url(/static/images/drpack/ic_useInfo4.png);
}
.drpackProcess ol li:nth-child(5):before {
  background-image: url(/static/images/drpack/ic_useInfo5.png);
}
.drpackProcess ol li:nth-child(6):before {
  background-image: url(/static/images/drpack/ic_useInfo6.png);
}

/********** 5_병의원안내 (회원가입-마이클리닉설정에서 같이사용) **********/
.clinic .tit {
  font-weight: 600;
  line-height: 1em;
}
.clinic .tit > button, .clinic .tit > img {
  margin-left: 8px;
  vertical-align: middle;
}
.clinic .addr {
  margin-top: 7px;
  font-size: 12px;
}
.clinic .tel {
  padding-left: 20px;
  margin-top: 7px;
  font-size: 12px;
  line-height: 17px;
  background: url(/static/images/icon/ic_tel.png) no-repeat 0 0;
}
.clinic .tel a {
  color: #666;
}
.clinic .tag {
  margin-top: 20px;
}
.clinic .tag span {
  display: inline-block;
  height: 28px;
  padding: 0 8px;
  margin-left: 4px;
  border-radius: 14px;
  line-height: 28px;
  color: #888;
  font-size: 12px;
  background: #f5f5f5;
}

.clinicList .btn {
  position: relative;
  padding: 0 10px 13px 0;
  text-align: right;
}
.clinicList .btn a {
  padding-right: 22px;
  color: #aaa;
  line-height: 16px;
  background: url(/static/images/icon/ic_filter.png) no-repeat 100% 50%;
}
.clinicList .btn .filterLayer {
  display: none;
  position: absolute;
  right: -55px;
  top: 30px;
  z-index: 110;
  width: 160px;
  padding: 20px 10px 20px 20px;
  margin: 0 !important;
  border: 1px solid #666;
  border-radius: 10px;
  text-align: left;
  background: #fff;
}
.clinicList .btn .filterLayer ul {
  border: 0;
}
.clinicList .btn .filterLayer ul li {
  width: 100%;
}
.clinicList .btn .filterLayer ul li + li {
  margin-top: 10px;
}
.clinicList .btn .filterLayer:before {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  width: 7px;
  height: 5px;
  background: url(/static/images/icon/ic_balloon3.png) no-repeat 0 0;
}
.clinicList .list {
  overflow-y: auto;
  position: relative;
  max-height: 324px;
  border-top: 2px solid #bbb;
  border-bottom: 1px solid #bbb;
}
.clinicList .list .clinic {
  padding: 20px 10px;
}
.clinicList .list .clinic + .clinic {
  border-top: 1px solid #eee;
}
.clinicList .list .empty {
  text-align: center;
  padding: 50px 0;
}
.clinicList .list .empty .warning {
  display: inline-block;
  color: #888;
}

.clinicArea {
  position: relative;
}
.clinicArea .mapArea {
  height: auto;
  margin: 0;
}
.clinicArea .searchArea {
  position: absolute;
  left: 50%;
  top: 40px;
  z-index: 1;
  width: 350px;
  margin-left: -640px;
}
.clinicArea .searchArea fieldset {
  position: relative;
  width: 350px;
  height: 56px;
  padding: 16px 60px 16px 20px;
  border-radius: 10px;
  box-shadow: 3px 3px 3px #ddd;
  background: #fff;
}
.clinicArea .searchArea fieldset input[type=text] {
  width: 100%;
  height: 24px;
  line-height: 24px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: none;
}
.clinicArea .searchArea fieldset button {
  position: absolute;
  right: 20px;
  top: 16px;
}
.clinicArea .searchArea .my {
  width: 350px;
  padding: 20px;
  margin-top: 10px;
  border: 1px solid #ddd;
  border-radius: 10px 10px 0 0;
  background: #fff;
}
.clinicArea .searchArea .my h2 button {
  width: 100%;
  text-align: left;
  font-weight: 600;
  color: #4279be;
  line-height: 1em;
}
.clinicArea .searchArea .my h2 button:before, .clinicArea .searchArea .my h2 button:after {
  width: 8px;
  margin-top: -4px;
}
.clinicArea .searchArea .my h2 button:before {
  right: 3px;
}
.clinicArea .searchArea .my .clinic {
  margin-top: 20px;
}
.clinicArea .searchArea .my .clinic .tit {
  font-size: 20px;
}
.clinicArea .searchArea .my .clinic .addr {
  font-size: 14px;
}
.clinicArea .searchArea .my .clinic .tel {
  font-size: 14px;
}
.clinicArea .searchArea .clinicList {
  width: 350px;
  padding: 10px 20px;
  border-radius: 0 0 10px 10px;
  background: #f5f5f5;
}
.clinicArea .searchArea .clinicList .btn {
  border-bottom: 1px solid #bbb;
  padding: 0 0 11px;
}
.clinicArea .searchArea .clinicList > ul {
  overflow-y: auto;
  margin-right: -15px;
  padding-right: 15px;
  border: 0;
  transition: all 0.2s;
}
.clinicArea .searchArea .clinicList > ul li .tag span {
  background: #fff;
}
.clinicArea .clinicDetail {
  position: relative;
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 40px;
  bottom: 20px;
  z-index: -1;
  width: 350px;
  padding-bottom: 86px;
  margin-left: -640px;
  border-radius: 10px;
  box-shadow: 3px 3px 10px #ddd;
  background: #fff;
}
.clinicArea .clinicDetail .wrap {
  overflow-y: auto;
  transform: translateX(100%);
  transition: all 0.2s ease-in-out;
}
.clinicArea .clinicDetail .wrap .goList {
  position: absolute;
  left: 20px;
  top: 20px;
  padding-left: 20px;
  font-size: 16px;
  line-height: 18px;
  color: #fff;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}
.clinicArea .clinicDetail .wrap .goList:before {
  content: "";
  position: absolute;
  left: -9px;
  top: -6px;
  width: 28px;
  height: 37px;
  background: url(/static/images/icon/ic_arrow7.png) no-repeat 0 0;
}
.clinicArea .clinicDetail .wrap .thumb {
  overflow: hidden;
  height: 150px;
}
.clinicArea .clinicDetail .wrap .thumb img {
  width: 100%;
}
.clinicArea .clinicDetail .wrap .head {
  padding: 20px 20px 0;
}
.clinicArea .clinicDetail .wrap .head h2 {
  margin-top: 30px;
  font-size: 24px;
  font-weight: 600;
}
.clinicArea .clinicDetail .wrap .head .goBtn {
  margin-top: 10px;
  color: #888;
}
.clinicArea .clinicDetail .wrap .head .tag {
  margin-top: 10px;
}
.clinicArea .clinicDetail .wrap .head .tag span {
  display: inline-block;
  height: 28px;
  padding: 0 8px;
  margin-left: 4px;
  border-radius: 14px;
  line-height: 28px;
  color: #888;
  font-size: 12px;
  background: #f5f5f5;
}
.clinicArea .clinicDetail .wrap .head .btns {
  overflow: hidden;
  margin-top: 20px;
  border-top: 1px solid #eee;
}
.clinicArea .clinicDetail .wrap .head .btns li {
  position: relative;
  float: left;
  width: 50%;
  padding: 20px 0;
}
.clinicArea .clinicDetail .wrap .head .btns li button {
  position: relative;
  width: 100%;
  padding-top: 35px;
  line-height: 1em;
  text-align: center;
}
.clinicArea .clinicDetail .wrap .head .btns li button:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 35px;
}
.clinicArea .clinicDetail .wrap .head .btns li button.reser:before {
  background: url(/static/images/icon/ic_reser.png) no-repeat 50% 0;
}
.clinicArea .clinicDetail .wrap .head .btns li button.qna:before {
  top: 3px;
  background: url(/static/images/icon/ic_qna.png) no-repeat 50% 0;
}
.clinicArea .clinicDetail .wrap .head .btns li button.counsel:before {
  top: 3px;
  background: url(/static/images/icon/ic_kakao3.png) no-repeat 50% 0;
}
.clinicArea .clinicDetail .wrap .head .btns li + li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 40px;
  margin-top: -20px;
  background: #eee;
}
.clinicArea .clinicDetail .wrap .detail {
  padding: 20px;
  border-top: 10px solid #f5f5f5;
}
.clinicArea .clinicDetail .wrap .detail > p {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  line-height: 26px;
}
.clinicArea .clinicDetail .wrap .detail > p.addr:before {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  width: 15px;
  height: 20px;
  background: url(/static/images/icon/ic_location3.png) no-repeat 0 0;
}
.clinicArea .clinicDetail .wrap .detail > p.tel {
  background: none;
}
.clinicArea .clinicDetail .wrap .detail > p.tel:before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 21px;
  height: 21px;
  background: url(/static/images/icon/ic_tel2.png) no-repeat 0 0;
}
.clinicArea .clinicDetail .wrap .detail > p + p {
  margin-top: 10px;
}
.clinicArea .clinicDetail .wrap .detail .part {
  position: relative;
  padding-left: 30px;
  margin-top: 10px;
}
.clinicArea .clinicDetail .wrap .detail .part:before {
  content: "";
  position: absolute;
  left: 3px;
  top: 2px;
  width: 14px;
  height: 18px;
  background: url(/static/images/icon/ic_list.png) no-repeat 0 0;
}
.clinicArea .clinicDetail .wrap .detail .part h3 {
  color: #888;
}
.clinicArea .clinicDetail .wrap .detail .part p {
  margin-top: 5px;
  font-size: 16px;
  line-height: 26px;
}
.clinicArea .clinicDetail .wrap .detail .time {
  position: relative;
  padding-left: 30px;
  margin-top: 10px;
}
.clinicArea .clinicDetail .wrap .detail .time:before {
  content: "";
  position: absolute;
  left: 1px;
  top: 2px;
  width: 19px;
  height: 19px;
  background: url(/static/images/icon/ic_time.png) no-repeat 0 0;
}
.clinicArea .clinicDetail .wrap .detail .time p {
  font-size: 16px;
  line-height: 26px;
}
.clinicArea .clinicDetail .wrap .detail .time p + p {
  margin-top: 5px;
}
.clinicArea .clinicDetail .wrap .detail .text {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #ddd;
  font-size: 14px;
  line-height: 22px;
  color: #888;
}
.clinicArea .clinicDetail .btn {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 20px;
  background: #fff;
}
.clinicArea .clinicDetail .btn a {
  width: 100%;
}
.clinicArea .clinicDetail.on {
  z-index: 1;
}
.clinicArea .clinicDetail .wrap.on {
  transform: translateX(0);
}
.clinicArea .clinicDetail.noImg .goList {
  color: #888;
  text-shadow: none;
}
.clinicArea .clinicDetail.noImg .goList:before {
  left: 0;
  top: 0;
  width: 10px;
  height: 19px;
  background: url(/static/images/icon/ic_arrow8.png) no-repeat 0 0;
}
.clinicArea .clinicDetail.noImg .head {
  padding-top: 64px;
}

.clinicInfo {
  width: 1280px;
  padding: 100px 0;
  margin: 0 auto;
}
.clinicInfo > .head {
  position: relative;
  padding-bottom: 32px;
  margin-bottom: 17px;
  border-bottom: 2px solid #ddd;
}
.clinicInfo > .head h2 {
  font-size: 34px;
  font-weight: 600;
}
.clinicInfo > .head .tag {
  margin-top: 15px;
}
.clinicInfo > .head .tag span {
  display: inline-block;
  height: 28px;
  padding: 0 8px;
  margin-left: 4px;
  border-radius: 14px;
  line-height: 28px;
  color: #888;
  font-size: 12px;
  background: #fff;
}
.clinicInfo > .head .btns {
  position: absolute;
  right: 0;
  bottom: 30px;
  overflow: hidden;
  width: 206px;
}
.clinicInfo > .head .btns li {
  position: relative;
  float: left;
  width: 50%;
}
.clinicInfo > .head .btns li button {
  position: relative;
  width: 100%;
  padding-top: 35px;
  line-height: 1em;
  text-align: center;
}
.clinicInfo > .head .btns li button:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 35px;
}
.clinicInfo > .head .btns li button.reser:before {
  background: url(/static/images/icon/ic_reser.png) no-repeat 50% 0;
}
.clinicInfo > .head .btns li button.qna:before {
  top: 3px;
  background: url(/static/images/icon/ic_qna.png) no-repeat 50% 0;
}
.clinicInfo > .head .btns li button.counsel:before {
  top: 3px;
  background: url(/static/images/icon/ic_kakao3.png) no-repeat 50% 0;
}
.clinicInfo > .head .btns li + li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 40px;
  margin-top: -20px;
  background: #eee;
}
.clinicInfo .warning {
  float: left;
}
.clinicInfo .sns {
  float: right;
  text-align: right;
  font-size: 0;
}
.clinicInfo .sns li {
  display: inline-block;
  margin-left: 20px;
  line-height: 19px;
}
.clinicInfo .sns li img {
  vertical-align: middle;
}
.clinicInfo .content {
  position: relative;
  clear: both;
  min-height: 510px;
  padding: 40px 550px 0 0;
}
.clinicInfo .content .srmy {
  width: 620px;
}
.clinicInfo .content .srmy .tel {
  position: relative;
  padding-left: 133px;
  background: url(/static/images/icon/ic_tel3.png) no-repeat 0 0;
}
.clinicInfo .content .srmy .part {
  position: relative;
  padding-left: 133px;
  margin-top: 30px;
  background: url(/static/images/icon/ic_list2.png) no-repeat 0 0;
}
.clinicInfo .content .srmy .time {
  position: relative;
  padding-left: 133px;
  margin-top: 30px;
  background: url(/static/images/icon/ic_time2.png) no-repeat 0 0;
}
.clinicInfo .content .srmy h3 {
  position: absolute;
  left: 28px;
  top: 0;
  font-size: 16px;
  line-height: 26px;
  color: #888;
}
.clinicInfo .content .srmy p {
  font-size: 16px;
  line-height: 26px;
}
.clinicInfo .content .srmy .cont {
  width: 470px;
  height: 130px;
  font-size: 16px;
  line-height: 26px;
  column-count: 2;
}
.clinicInfo .content .thumbArea {
  position: absolute;
  right: 106px;
  top: 40px;
  width: 420px;
}
.clinicInfo .content .thumbArea ul img {
  border-radius: 10px;
}
.clinicInfo .content .thumbArea .controls {
  margin-top: 16px;
  text-align: center;
}
.clinicInfo .content .thumbArea .controls .prev, .clinicInfo .content .thumbArea .controls .next {
  overflow: hidden;
  position: relative;
  opacity: 0.4;
  display: inline-block;
  width: 30px;
  height: 30px;
  border: solid 1px #111;
  border-radius: 30px;
  text-align: center;
  vertical-align: top;
  white-space: nowrap;
  text-indent: 100%;
}
.clinicInfo .content .thumbArea .controls .prev:before, .clinicInfo .content .thumbArea .controls .next:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 9px;
  margin: -5px 0 0 -3px;
  background: url(/static/images/icon/ic_pn.png) no-repeat 0 0;
}
.clinicInfo .content .thumbArea .controls .prev.next:before, .clinicInfo .content .thumbArea .controls .next.next:before {
  background-position-x: -6px;
}
.clinicInfo .content .thumbArea .controls .page {
  display: inine-block;
  padding: 0 4px;
  color: #888;
  font-size: 15px;
  line-height: 30px;
}
.clinicInfo .content:first-child {
  padding-top: 23px;
}
.clinicInfo .content:first-child .thumbArea {
  top: 23px;
}
.clinicInfo .content.noImg {
  min-height: auto;
  padding-right: 0;
}
.clinicInfo .content.noImg .srmy {
  overflow: hidden;
  width: 100%;
}
.clinicInfo .content.noImg .srmy .division {
  float: left;
  width: 620px;
}
.clinicInfo .content.noImg .srmy .time {
  float: right;
  width: 620px;
  margin: 0;
}
.clinicInfo .director {
  overflow: hidden;
}
.clinicInfo .director .thumb {
  float: left;
  width: 620px;
}
.clinicInfo .director .fr {
  width: 620px;
  margin: 40px 0 0 40px;
}
.clinicInfo .director .fr h3 {
  font-size: 28px;
}
.clinicInfo .director .fr .cont {
  margin: 10px 40px 30px 0;
  font-size: 16px;
  line-height: 26px;
  color: #666;
}
.clinicInfo .director .fr .history {
  position: relative;
  padding: 20px 0 0 110px;
  border-top: 2px solid #bbb;
  font-size: 16px;
  line-height: 36px;
}
.clinicInfo .director .fr .history h4 {
  position: absolute;
  left: 0;
  top: 20px;
  font-weight: 600;
  font-size: 16px;
  line-height: 36px;
}
.clinicInfo .director.noImg .fr {
  width: 100%;
  margin: 0;
}
.clinicInfo .director.noImg .fr .division {
  float: left;
  width: 620px;
  margin-right: 40px;
}
.clinicInfo .director.noImg .fr .history {
  float: right;
  width: 620px;
}
.clinicInfo .location {
  margin-top: 100px;
}
.clinicInfo .location h3 {
  margin-bottom: 15px;
  font-size: 28px;
  line-height: 1em;
  font-weight: 600;
}
.clinicInfo .location .addr {
  padding-left: 25px;
  margin-bottom: 30px;
  font-size: 16px;
  line-height: 20px;
  background: url(/static/images/icon/ic_location3.png) no-repeat 0 0;
}

.areaTypeA .clinicInfo {
  padding-top: 60px;
}

/********** 6_스토리 **********/
/* story */
.story {
  overflow: hidden;
}
.story .part1 {
  position: relative;
  overflow: hidden;
  padding: 80px 0 100px;
}
.story .part1 .wrap {
  position: relative;
  width: 1280px;
  height: 360px;
  padding-top: 40px;
  margin: 0 auto;
}
.story .part1 .wrap .tit {
  font-size: 60px;
  line-height: 78px;
  font-weight: 600;
  opacity: 0;
  transform: translateX(-50px);
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.story .part1 .wrap .text {
  margin-top: 30px;
  font-size: 20px;
  opacity: 0;
  transform: translateX(50px);
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.4s;
}
.story .part1 .wrap .thumb {
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  width: 640px;
  height: 360px;
  border-radius: 10px;
}
.story .part1 .wrap .thumb img {
  transition: all 4s cubic-bezier(0.16, 1, 0.3, 1);
}
.story .part1 .typo {
  margin-top: 100px;
}
.story .part1 .typo p {
  font: 600 120px/1.15em arial;
  color: #eee;
}
.story .part1 .typo p > span {
  overflow: hidden;
  display: inline-block;
}
.story .part1 .typo p > span span {
  display: block;
  transform: translateX(100%);
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.6s;
}
.story .part1 .typo p + p {
  text-align: right;
}
.story .part1 .typo p + p > span span {
  transform: translateX(-100%);
}
.story .part1 .typo p.show span {
  transform: translateX(0);
}
.story .part1.show .thumb img {
  transform: scale(1.05);
}
.story .part2 {
  background: url(/static/images/story/bg2.png) no-repeat center;
  background-size: contain;
}
.story .part2 .wrap {
  width: 1130px;
  height: 700px;
  position: relative;
}
.story .part2 .wrap .text {
  position: absolute;
  top: 50px;
  left: 60px;
}
.story .part2 .wrap .text h1 {
  font-weight: bold;
  font-size: 48px;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.story .part2 .wrap .text p {
  margin-bottom: 20px;
  font-size: 18px;
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.story .part2 .wrap .text p + p {
  transition-delay: 0.4s;
}
.story .part2 .wrap .text.fr {
  padding-top: 115px;
}
.story .part2 .wrap .text.show h1 {
  opacity: 1;
  transform: translateY(0);
}
.story .part2 .wrap .text.show p {
  opacity: 1;
  transform: translateY(0);
}
.story .part3 {
  position: relative;
  width: 1280px;
  padding-top: 140px;
  margin: 0 auto;
}
.story .part3 .cont {
  float: left;
  width: 330px;
}
.story .part3 .cont .thumb {
  height: 272px;
  line-height: 272px;
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.story .part3 .cont .thumb img {
  vertical-align: middle;
}
.story .part3 .cont .tit {
  margin-top: 60px;
  font-size: 24px;
  line-height: 34px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.story .part3 .cont .text {
  margin-top: 30px;
  font-size: 16px;
  line-height: 26px;
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.story .part3 .cont.cont2 {
  margin: 0 145px;
}
.story .part3:after {
  content: "";
  display: block;
  clear: both;
}

/* 원료이야기 */
.baseList li {
  position: relative;
  float: left;
  margin-left: 20px;
  border-radius: 10px;
  background: #f5f5f5;
}
.baseList li a {
  display: block;
  width: 305px;
  height: 305px;
}
.baseList li a .icon {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 160px;
  height: 160px;
}
.baseList li a .tit {
  position: absolute;
  left: 30px;
  bottom: 78px;
  width: 120px;
  font-size: 24px;
  line-height: 32px;
  word-wrap: initial;
  overflow-wrap: initial;
}
.baseList li a .tit span {
  position: relative;
  word-wrap: initial;
  overflow-wrap: initial;
}
.baseList li a .tit span:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  opacity: 0.1;
  width: 0;
  height: 16px;
  border-radius: 8px;
  background: #111;
  transition: all 0.2s;
}
.baseList li a:before {
  content: "";
  position: absolute;
  left: 30px;
  bottom: 30px;
  opacity: 0.4;
  width: 30px;
  height: 11px;
  background: url(/static/images/icon/ic_arrow9.png) no-repeat 0 0;
}
.baseList li a:hover:before {
  opacity: 1;
}
.baseList li a:hover .tit span:before {
  left: 0;
  width: 100%;
}
.baseList li:nth-child(4n+1) {
  margin-left: 0;
}
.baseList li:nth-child(4n) ~ li {
  margin-top: 80px;
}
.baseList:after {
  content: "";
  display: block;
  clear: both;
}

/* 리뷰 */
.reviewListTypeB {
  width: 1280px;
  margin: 80px auto 0;
  font-size: 0;
}
.reviewListTypeB li {
  display: inline-block;
  position: relative;
  width: 305px;
  min-height: 600px;
  padding-bottom: 122px;
  margin-left: 20px;
  vertical-align: top;
}
.reviewListTypeB li a .thumb {
  overflow: hidden;
  width: 305px;
  height: 305px;
  border-radius: 10px;
  background: #f5f5f5;
}
.reviewListTypeB li a .thumb img {
  width: 100%;
}
.reviewListTypeB li .titArea {
  height: 106px;
  margin: 20px 10px;
}
.reviewListTypeB li .titArea .tit {
  height: 48px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}
.reviewListTypeB li .titArea .cont {
  height: 48px;
  margin-top: 10px;
  font-size: 16px;
  line-height: 24px;
  color: #888;
}
.reviewListTypeB li .titArea .cont > * {
  font-size: 16px;
  line-height: 24px;
  color: #888;
}
.reviewListTypeB li .info {
  position: relative;
  padding-left: 110px;
  margin: 0 10px;
  text-align: right;
  line-height: 15px;
}
.reviewListTypeB li .info .recommend {
  position: absolute;
  left: 0;
  top: 0;
  font: 600 16px/15px "Roboto";
}
.reviewListTypeB li .info .recommend:before {
  margin-right: 10px;
}
.reviewListTypeB li .info .uid {
  display: inline-block;
  font: 400 16px/15px "Roboto";
  color: #aaa;
}
.reviewListTypeB li .info .date {
  position: relative;
  display: inline-block;
  margin-left: 5px;
  padding-left: 10px;
  font: 400 16px/15px "Roboto";
}
.reviewListTypeB li .info .date:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 8px;
  margin-top: -4px;
  background: #ddd;
}
.reviewListTypeB li .pdt {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  width: 285px;
  border-top: 1px solid #ddd;
}
.reviewListTypeB li .pdt .thumb {
  width: 68px;
  height: 68px;
}
.reviewListTypeB li:nth-child(4n+1) {
  margin-left: 0;
}
.reviewListTypeB li:nth-child(4n) ~ li {
  margin-top: 100px;
}
.reviewListTypeB:after {
  content: "";
  display: block;
  clear: both;
}

/* 리뷰상세팝업이랑 같이 사용 */
.reviewDetail {
  position: relative;
  height: 622px;
  padding-left: 570px;
}
.reviewDetail .thumbArea {
  position: absolute;
  left: 0;
  top: 0;
}
.reviewDetail .thumbArea .thumb {
  overflow: hidden;
  width: 540px;
  height: 540px;
  border-radius: 10px;
  text-align: center;
}
.reviewDetail .thumbArea .thumb img {
  border-radius: 10px;
}
.reviewDetail .thumbArea ul {
  margin-top: 20px;
  text-align: center;
  font-size: 0;
}
.reviewDetail .thumbArea ul li {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 62px;
  height: 62px;
  margin: 0 5px;
  border-radius: 10px;
}
.reviewDetail .thumbArea ul li button {
  width: 100%;
  height: 100%;
}
.reviewDetail .thumbArea ul li img {
  width: 100%;
  opacity: 0.6;
}
.reviewDetail .thumbArea ul li.on img {
  opacity: 1;
}
.reviewDetail .thumbArea ul li.on button:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border: 2px solid #ff5a00;
  border-radius: 10px;
}
.reviewDetail .pdt {
  min-height: 92px;
  padding-top: 0;
  border-bottom: 1px solid #ddd;
}
.reviewDetail .pdt .thumb {
  top: 0;
}
.reviewDetail .contArea {
  overflow-y: auto;
  max-height: 510px;
  margin-top: 20px;
  padding: 10px 20px 20px 10px;
}
.reviewDetail .contArea .head {
  position: relative;
  height: 32px;
  margin-bottom: 15px;
  text-align: right;
}
.reviewDetail .contArea .head .pa {
  position: absolute;
  left: 0;
  top: 0;
}
.reviewDetail .contArea .head .pa .type {
  display: inline-block;
  width: 60px;
  height: 32px;
  margin: -2px 6px 0 0;
  border-radius: 16px;
  text-align: center;
  line-height: 32px;
  color: #fff;
  font-weight: 600;
  font-family: "Roboto";
  vertical-align: middle;
  background: #e01846;
}
.reviewDetail .contArea .head .pa .recommend {
  display: inline-block;
  font: 600 16px/15px "Roboto";
}
.reviewDetail .contArea .head .pa .recommend:before {
  margin-right: 10px;
}
.reviewDetail .contArea .head .uid {
  display: inline-block;
  margin-top: 8px;
  font: 400 16px/15px "Roboto";
  color: #aaa;
}
.reviewDetail .contArea .head .date {
  position: relative;
  display: inline-block;
  margin-left: 5px;
  margin-top: 8px;
  padding-left: 10px;
  font: 400 16px/15px "Roboto";
}
.reviewDetail .contArea .head .date:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 8px;
  margin-top: -4px;
  background: #ddd;
}
.reviewDetail .contArea .tit {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}
.reviewDetail .contArea .tit .type {
  display: inline-block;
  width: 60px;
  height: 24px;
  margin: -2px 6px 0 0;
  border: 1px solid #ff5a00;
  border-radius: 12px;
  text-align: center;
  font-size: 12px;
  line-height: 22px;
  color: #ff5a00;
  vertical-align: middle;
}
.reviewDetail .contArea .cont {
  margin-top: 10px;
  font-size: 16px;
  line-height: 24px;
  color: #888;
}
.reviewDetail .contentArea {
  height: 540px;
}
.reviewDetail .contentArea .contArea {
  max-height: 377px;
}

.bestReviewArea {
  position: relative;
  width: 1280px;
  padding: 80px 0;
  margin: 0 auto;
}
.bestReviewArea h2 {
  margin-bottom: 30px;
  font-size: 30px;
  font-weight: 600;
}
.bestReviewArea .nav {
  position: absolute;
  right: 0;
  top: 80px;
}
.bestReviewArea .nav .prev, .bestReviewArea .nav .next {
  overflow: hidden;
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  border: solid 1px #111;
  border-radius: 30px;
  text-align: center;
  vertical-align: top;
  white-space: nowrap;
  text-indent: 100%;
}
.bestReviewArea .nav .prev:before, .bestReviewArea .nav .next:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 9px;
  margin: -5px 0 0 -3px;
  background: url(/static/images/icon/ic_pn.png) no-repeat 0 0;
}
.bestReviewArea .nav .prev.next:before, .bestReviewArea .nav .next.next:before {
  background-position-x: -6px;
}
.bestReviewArea .nav .page {
  display: inline-block;
  width: 56px;
  text-align: center;
  line-height: 30px;
  font-weight: 600;
}
.bestReviewArea .list li {
  opacity: 0.6;
}
.bestReviewArea .list li.on {
  opacity: 1;
}
.bestReviewArea .list li .reviewDetail {
  height: 540px;
}
.bestReviewArea .list li .reviewDetail .thumbArea .num {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  text-align: center;
  color: #fff;
  line-height: 28px;
  background: rgba(0, 0, 0, 0.6);
}
.bestReviewArea .list li .reviewDetail .contentArea {
  padding: 30px;
  border-radius: 10px;
  background: #fff;
}

.bestReviewArea .nav .page-number {
    cursor: pointer;
}

/* 매거진 */
.sortList {
  height: 60px;
  margin-top: -60px;
  text-align: right;
}
.sortList a {
  margin-left: 16px;
  color: #888;
  font-size: 16px;
}
.sortList a.on {
  color: #111;
  font-weight: 500;
  text-decoration: underline;
}

/* 메인에서 같이사용 */
.magazineList {
  overflow: hidden;
}
.magazineList li {
  float: left;
  width: 413px;
  margin-left: 20px;
}
.magazineList li .thumb {
  position: relative;
  height: 232px;
  overflow: hidden;
  border-radius: 10px;
}
.magazineList li .thumb img {
  width: 100%;
}
.magazineList li .thumb.movie a:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.magazineList li .thumb.movie a:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  background: url(/static/images/icon/ic_play3.png) no-repeat 0 0;
}
.magazineList li .tit {
  margin: 20px 10px 0;
  font-size: 24px;
}
.magazineList li .cont {
  margin: 10px 10px 0;
  font-size: 16px;
}
.magazineList li .cont a {
  color: #888;
}
.magazineList li:nth-child(3n+1) {
  margin-left: 0;
}
.magazineList li:nth-child(3n) ~ li {
  margin-top: 100px;
}

/* 메인에서 같이사용 */
.movieLayer {
  width: 1080px;
  height: 690px;
}
.movieLayer .share {
  position: absolute;
  left: 30px;
  top: 30px;
  overflow: hidden;
}
.movieLayer .share li {
  float: left;
  margin-right: 25px;
}
.movieLayer .content {
  padding: 86px 30px 0;
}
.movieLayer .content iframe {
  width: 100%;
  height: 573px;
}

.magazineView {
  margin-top: 60px;
}
.magazineView .head {
  position: relative;
  overflow: hidden;
  padding-right: 250px;
  margin-bottom: 30px;
}
.magazineView .head h1 {
  margin-bottom: 20px;
  font-size: 34px;
  font-weight: 600;
}
.magazineView .head .share {
  position: absolute;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.magazineView .head .share li {
  float: left;
  margin-right: 25px;
}
.magazineView .content {
  padding: 60px 0 40px;
  border-top: 2px solid #bbb;
  border-bottom: 1px solid #ddd;
  font-size: 16px;
}
.magazineView .content iframe {
  border-radius: 10px;
}
.magazineView .content .file {
  margin-top: 40px;
}
.magazineView .content .file a {
  padding-left: 22px;
  margin-right: 20px;
  line-height: 15px;
  color: #888;
  text-decoration: underline;
  background: url(/static/images/icon/ic_file.png) no-repeat 0 50%;
}

.magazineRelative .pdtList {
  margin-bottom: 80px;
}
.magazineRelative .pdtList li {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 305px;
  padding: 30px 0 0 335px;
  margin: 0 0 40px;
}
.magazineRelative .pdtList li .thumb {
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 305px;
  height: 305px;
}
.magazineRelative .pdtList li .tit {
  font-size: 24px;
  line-height: 1.6em;
}
.magazineRelative .pdtList li .srmy {
  font-size: 16px;
  line-height: 1.6em;
}

/********** 7_고객센터 **********/
/* faq */
.customerNav {
  width: 1280px;
  margin: 0 auto;
  font-size: 0;
  margin: 60px auto 50px;
}
.customerNav li {
  position: relative;
  display: inline-block;
  margin-right: 60px;
  font-size: 34px;
  font-weight: 600;
  line-height: 1em;
}
.customerNav li a {
  color: #bbb;
}
.customerNav li.on a {
  color: #111;
}
.customerNav li.on a:before {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -6px;
  z-index: -1;
  height: 20px;
  border-radius: 10px;
  background: #ddd;
}

.faqSearch {
  height: 233px;
  background: #e2f6fe url(/static/images/common/bg_faq.png) no-repeat 50% 0;
}
.faqSearch h2 {
  padding: 55px 0 25px;
  text-align: center;
  font-size: 24px;
}
.faqSearch .srchArea {
  width: 640px;
  height: 66px;
  padding-top: 20px;
  padding-bottom: 20px;
  border: 0;
}

.faqList li {
  position: relative;
  border: 1px solid #ddd;
  border-radius: 10px;
}
.faqList li .question a {
  display: block;
  padding: 20px 30px 20px 160px;
  font-size: 16px;
}
.faqList li .question a em {
  position: absolute;
  left: 0;
  top: 20px;
  width: 160px;
  text-align: center;
  color: #666;
}
.faqList li .question a:hover {
  text-decoration: underline;
}
.faqList li .question a:hover em {
  text-decoration: none;
}
.faqList li .question a:before {
  right: 25px;
  width: 12px;
  background: #666;
}
.faqList li .question a:after {
  right: 20px;
  width: 12px;
  background: #666;
}
.faqList li.on .question a, .faqList li.on .question a em {
  color: #4279be;
}
.faqList li + li {
  margin-top: 20px;
}
.faqList li .answer {
  display: none;
  padding: 30px 30px 40px 160px;
  font-size: 16px;
  background: #f5f5f5;
}

.faqFoot {
  overflow: hidden;
  padding: 40px 60px;
  background: #f5f5f5;
}
.faqFoot .center {
  float: left;
  width: 50%;
  padding: 0 60px;
}
.faqFoot .center .text {
  font-size: 16px;
  line-height: 26px;
  color: #666;
}
.faqFoot .center .text span {
  position: relative;
  color: #111;
}
.faqFoot .center .text span:before {
  content: "";
  opacity: 0.2;
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -2px;
  height: 10px;
  border-radius: 3px;
  background: #ff5a00;
}
.faqFoot .center .tel {
  position: relative;
  margin-top: 20px;
  padding-left: 21px;
  line-height: 17px;
}
.faqFoot .center .tel:before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 17px;
  height: 17px;
  background: url(/static/images/icon/ic_tel4.png) no-repeat 0 0;
}
.faqFoot .center .tel a {
  position: relative;
  bottom: -2px;
  margin-left: 40px;
  font-size: 24px;
  font-family: "Roboto";
  color: #ff5a00;
}
.faqFoot .center .time {
  margin-top: 10px;
  color: #666;
}
.faqFoot .center .time span + span {
  margin-left: 15px;
}
.faqFoot .center ul {
  margin-top: 47px;
}
.faqFoot .center ul li {
  display: inline-block;
  margin-right: 40px;
  font-size: 16px;
  line-height: 19px;
}
.faqFoot .center ul li:before {
  content: "";
  display: inline-block;
  width: 19px;
  height: 19px;
  margin: -2px 4px 0 0;
  vertical-align: middle;
  background: url(/static/images/icon/ic_kakao4.png) no-repeat 0 50%;
}
.faqFoot .center ul li.qna:before {
  width: 23px;
  background-image: url(/static/images/icon/ic_qna2.png);
}
.faqFoot .center ul li.myQna:before {
  width: 16px;
  background-image: url(/static/images/icon/ic_qnaList.png);
}
.faqFoot .center + .center {
  border-left: 1px solid #ddd;
}

.qnaHead {
  position: relative;
  padding-bottom: 17px;
  border-bottom: 2px solid #bbb;
  text-align: right;
}
.qnaHead .warning {
  position: absolute;
  left: 0;
  top: 0;
  color: #888;
  font-size: 14px;
  background-image: url(/static/images/icon/ic_warning3.png);
}
.qnaHead .btn {
  display: inline-block;
}
.qnaHead .btn a {
  padding-left: 20px;
  font-size: 16px;
  line-height: 20px;
  background: url(/static/images/icon/ic_qnaList2.png) no-repeat 0 0;
}

.qnaBtns {
  margin-top: 15px;
}
.qnaBtns a {
  width: 250px;
  margin-right: 6px;
}

.myProduct.pdt {
  position: relative;
  display: table;
  width: 510px;
  min-height: 112px;
  margin-top: 20px;
  border-radius: 10px;
  background: #f5f5f5;
}
.myProduct.pdt .thumb {
  overflow: hidden;
  position: absolute;
  left: 20px;
  top: 20px;
  overflow: hidden;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  vertical-align: top;
}
.myProduct.pdt .content {
  display: table-cell;
  width: 100%;
  padding: 0 120px 0 112px;
  vertical-align: middle;
}
.myProduct.pdt .content .srmy {
  margin-bottom: 5px;
  font-size: 12px;
  color: #888;
}
.myProduct.pdt .content .srmy em + em:before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 8px;
  margin-left: 10px;
  margin-right: 10px;
  background: #bbb;
}
.myProduct.pdt .content .tit {
  font-size: 16px;
}
.myProduct.pdt .content .btnTypeG {
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -16px;
  color: #aaa;
  background: #fff;
}

/* 공지사항 */
.boardView {
  margin-top: 60px;
}
.boardView .head {
  position: relative;
  overflow: hidden;
  padding-right: 150px;
  margin-bottom: 30px;
}
.boardView .head .type {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 16px;
  color: #ff5a00;
}
.boardView .head h1 {
  font-size: 34px;
  font-weight: 600;
}
.boardView .head .date {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 16px;
  color: #888;
}
.boardView .content {
  padding: 60px 0 100px;
  border-top: 2px solid #bbb;
  border-bottom: 2px solid #ddd;
}

.commentForm h2 {
  border: 0;
  font-size: 28px;
  font-weight: 600;
}
.commentForm fieldset {
  overflow: hidden;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
}
.commentForm fieldset textarea {
  width: 100%;
  height: 120px;
  margin-bottom: 20px;
  border: 0;
  padding: 0;
}
.commentForm fieldset .byte {
  float: left;
  margin-top: 15px;
  color: #aaa;
  font-family: "Roboto";
  line-height: 1em;
}
.commentForm fieldset .btns {
  float: right;
}
.commentForm fieldset .btns a {
  width: 84px;
  padding: 0;
  margin-left: 6px;
}

.commentList {
  margin-top: 20px;
}
.commentList li {
  padding: 30px 0;
  border-bottom: 1px solid #ddd;
}
.commentList li .uid {
  color: #aaa;
  font-size: 16px;
  line-height: 1em;
}
.commentList li .date {
  font-size: 16px;
  line-height: 1em;
}
.commentList li .date:before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 8px;
  margin: -2px 10px 0;
  vertical-align: middle;
  background: #ddd;
}
.commentList li .cont {
  margin: 20px 0;
  font-size: 16px;
  line-height: 26px;
  color: #666;
}
.commentList li .modify {
  padding-left: 20px;
  color: #aaa;
  line-height: 16px;
  background: url(/static/images/icon/ic_edit2.png) no-repeat 0 0;
}
.commentList li .del {
  padding-left: 20px;
  margin-left: 20px;
  color: #aaa;
  line-height: 16px;
  background: url(/static/images/icon/ic_del4.png) no-repeat 0 50%;
}

.pvnt {
  overflow: hidden;
  padding: 30px 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.pvnt .prev {
  float: left;
  width: 50%;
}
.pvnt .next {
  float: right;
  width: 50%;
}
.pvnt .tit {
  float: left;
  width: 116px;
  padding-top: 2px;
  color: #888;
  padding-left: 50px;
  background: url(/static/images/icon/ic_prev4.png) no-repeat 0 50%;
}
.pvnt .cont {
  float: left;
  width: calc(100% - 146px);
  font-size: 18px;
}
.pvnt .next {
  text-align: right;
}
.pvnt .next .tit {
  float: right;
  padding-left: 0;
  padding-right: 50px;
  background: url(/static/images/icon/ic_next4.png) no-repeat 100% 50%;
}
.pvnt .next .cont {
  float: right;
}

.specialView {
  margin-top: 60px;
}
.specialView .head {
  position: relative;
  overflow: hidden;
  padding-right: 500px;
  margin-bottom: 30px;
}
.specialView .head h1 {
  font-size: 34px;
  font-weight: 600;
}
.specialView .head .info {
  position: absolute;
  right: 0;
  bottom: 0;
}
.specialView .head .info .status {
  display: inline-block;
  height: 32px;
  padding: 0 14px;
  margin-right: 6px;
  border-radius: 16px;
  font-size: 14px;
  color: #fff;
  line-height: 32px;
  background: #ff5a00;
}
.specialView .head .info .date {
  display: inline-block;
  font-size: 16px;
  color: #888;
  line-height: 32px;
}
.specialView .head .info .share {
  display: inline-block;
}
.specialView .head .info .share li {
  display: inline-block;
  line-height: 32px;
}
.specialView .head .info .share li img {
  vertical-align: middle;
}
.specialView .head .info .share li + li {
  margin-left: 24px;
}
.specialView .head .info .share:before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 8px;
  margin: -2px 30px 0 26px;
  vertical-align: middle;
  background: #ddd;
}
.specialView .content {
  padding-bottom: 100px;
  border-bottom: 2px solid #ddd;
}

/********** 8_마이헬스체크 **********/
.healthCheckIndex {
  position: relative;
  height: 353px;
  background: url(/static/images/healthCheck/bg_index.png) no-repeat calc(50% + 30px) 100%;
}
.healthCheckIndex h1 {
  padding: 90px 0 20px;
  font-size: 34px;
}
.healthCheckIndex .text {
  font-size: 16px;
  line-height: 26px;
}
.healthCheckIndex .text strong {
  position: relative;
}
.healthCheckIndex .text strong:before {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0;
  z-index: -1;
  height: 10px;
  border-radius: 3px;
  background: #ddd;
}
.healthCheckIndex .btn {
  position: absolute;
  left: 0;
  bottom: 0;
}
.healthCheckIndex .srmy {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 452px;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 3px 30px 0 rgba(0, 0, 0, 0.08);
  background: #fff;
}
.healthCheckIndex .srmy .name {
  margin-bottom: 30px;
  font-size: 18px;
}
.healthCheckIndex .srmy .name strong {
  font-size: 28px;
}
.healthCheckIndex .srmy .modify {
  position: absolute;
  right: 30px;
  top: 30px;
  color: #aaa;
  text-decoration: underline;
}
.healthCheckIndex .srmy .body {
  float: left;
  width: 55%;
}
.healthCheckIndex .srmy .body p {
  float: left;
  width: 55%;
  font-size: 16px;
  color: #888;
}
.healthCheckIndex .srmy .body p em {
  display: block;
  margin-top: 15px;
  color: #111;
}
.healthCheckIndex .srmy .body p em strong {
  font-size: 40px;
}
.healthCheckIndex .srmy .body p + p {
  width: 45%;
}
.healthCheckIndex .srmy .birth {
  position: relative;
  float: right;
  width: 45%;
  padding-left: 30px;
}
.healthCheckIndex .srmy .birth p {
  position: relative;
  font-size: 16px;
  color: #888;
}
.healthCheckIndex .srmy .birth p em {
  position: absolute;
  right: 0;
  top: 0;
  color: #111;
}
.healthCheckIndex .srmy .birth p + p {
  margin-top: 20px;
}
.healthCheckIndex .srmy .birth:before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(50% - 25px);
  width: 1px;
  height: 50px;
  background: #ddd;
}
.healthCheckIndex .srmy:after {
  content: "";
  display: block;
  clear: both;
}
.healthCheckIndex:after {
  content: "";
  display: block;
  clear: both;
}
.healthCheckIndex + .info {
  margin-top: 80px;
  padding: 30px;
  margin-bottom: 100px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 16px;
  line-height: 26px;
  color: #666;
}
.healthCheckIndex + .info .impor {
  position: relative;
}
.healthCheckIndex + .info .impor:before {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0;
  z-index: -1;
  height: 10px;
  border-radius: 3px;
  background: #ddd;
}
.healthCheckIndex + .info h2 {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
}

.healthCheckList {
  width: 1280px;
  margin: 0 auto -140px;
  padding: 60px 0 90px;
}
.healthCheckList .total {
  height: 40px;
  font-size: 18px;
  line-height: 1em;
}
.healthCheckList .list li {
  position: relative;
  float: left;
  width: 413px;
  padding: 20px 30px;
  margin-right: 20px;
  border-radius: 10px;
  background: #fff;
}
.healthCheckList .list li .date {
  display: inline-block;
  color: #888;
}
.healthCheckList .list li .step {
  display: inline-block;
  margin-left: 10px;
  color: #666;
  font-weight: 500;
  font-size: 12px;
}
.healthCheckList .list li .btn {
  position: absolute;
  right: 30px;
  top: 20px;
  color: #aaa;
  text-decoration: underline;
}
.healthCheckList .list li .result {
  position: relative;
  width: 250px;
  height: 38px;
  margin-top: 15px;
  border: 1px solid #ddd;
  border-radius: 5px 0 5px 5px;
  line-height: 36px;
  text-align: center;
}
.healthCheckList .list li .result .bmi {
  position: relative;
  color: #888;
  margin-left: 10px;
  padding-left: 11px;
}
.healthCheckList .list li .result .bmi strong {
  font-size: 18px;
  color: #111;
}
.healthCheckList .list li .result .bmi:before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(50% - 4px);
  width: 1px;
  height: 8px;
  background: #ddd;
}
.healthCheckList .list li .result:before {
  content: "";
  position: absolute;
  right: -7px;
  top: -1px;
  width: 7px;
  height: 11px;
  background: url(/static/images/icon/ic_balloon6.png) no-repeat 0 0;
}
.healthCheckList .list li dl {
  width: 250px;
  margin-top: 15px;
  font-size: 0;
}
.healthCheckList .list li dl dt {
  display: inline-block;
  width: 25%;
  margin-top: 10px;
  color: #888;
}
.healthCheckList .list li dl dd {
  display: inline-block;
  width: 25%;
  margin-top: 10px;
  text-align: right;
}
.healthCheckList .list li dl dt:nth-child(3), .healthCheckList .list li dl dt:nth-child(7) {
  padding-left: 25px;
}
.healthCheckList .list li .subject {
  position: relative;
  padding: 15px 0 0 80px;
  margin-top: 15px;
  border-top: 1px solid #ddd;
}
.healthCheckList .list li .subject em {
  position: absolute;
  left: 0;
  top: 15px;
  color: #888;
}
.healthCheckList .list li:after {
  content: "";
  position: absolute;
  right: 30px;
  top: 60px;
  width: 79px;
  height: 100px;
  background: url(/static/images/healthCheck/ic_body1.png) no-repeat 0 0;
}
.healthCheckList .list li.grade2:after {
  background-image: url(/static/images/healthCheck/ic_body2.png);
}
.healthCheckList .list li.grade3:after {
  background-image: url(/static/images/healthCheck/ic_body3.png);
}
.healthCheckList .list li.grade4:after {
  background-image: url(/static/images/healthCheck/ic_body4.png);
}
.healthCheckList .list li.grade5:after {
  background-image: url(/static/images/healthCheck/ic_body5.png);
}
.healthCheckList .list li:nth-child(3n) {
  margin-right: 0;
}
.healthCheckList .list li:nth-child(3n) ~ li {
  margin-top: 20px;
}
.healthCheckList .list:after {
  content: "";
  display: block;
  clear: both;
}

.resultSrmy {
  margin-top: 60px;
  background: #fff5f0;
}
.resultSrmy .wrap {
  position: relative;
  width: 1200px;
  padding: 80px 85px;
  margin: 0 auto;
}
.resultSrmy .wrap h1 {
  font-size: 34px;
  line-height: 48px;
}
.resultSrmy .wrap h1 img {
  margin-top: -5px;
}
.resultSrmy .wrap .warning {
  margin-top: 20px;
  font-size: 13px;
  color: #888;
}
.resultSrmy .wrap .oh {
  margin-top: 40px;
  padding: 30px 40px;
  border-radius: 10px;
  background: #fff;
}
.resultSrmy .wrap .oh .srmy {
  float: left;
  width: 570px;
  border-right: 1px solid #ddd;
}
.resultSrmy .wrap .oh .srmy h2 {
  font-size: 18px;
}
.resultSrmy .wrap .oh .srmy .text {
  margin-top: 15px;
  color: #666;
}
.resultSrmy .wrap .oh .srmy .body, .resultSrmy .wrap .oh .srmy .birth {
  overflow: hidden;
  width: 460px;
}
.resultSrmy .wrap .oh .srmy .body p, .resultSrmy .wrap .oh .srmy .birth p {
  position: relative;
  float: left;
  width: 50%;
  font-size: 16px;
  color: #888;
}
.resultSrmy .wrap .oh .srmy .body p em, .resultSrmy .wrap .oh .srmy .birth p em {
  position: absolute;
  left: 60px;
  top: 0;
  color: #111;
}
.resultSrmy .wrap .oh .srmy .body p em strong, .resultSrmy .wrap .oh .srmy .birth p em strong {
  font-size: 20px;
}
.resultSrmy .wrap .oh .srmy .body p + p em, .resultSrmy .wrap .oh .srmy .birth p + p em {
  left: 90px;
}
.resultSrmy .wrap .oh .srmy .body {
  margin-top: 40px;
}
.resultSrmy .wrap .oh .srmy .birth {
  margin-top: 15px;
}
.resultSrmy .wrap .oh .subject {
  float: left;
  width: 340px;
  padding-left: 40px;
  margin-left: -1px;
  border-left: 1px solid #ddd;
}
.resultSrmy .wrap .oh .subject h2 {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
}
.resultSrmy .wrap .oh .subject h2 span {
  position: relative;
}
.resultSrmy .wrap .oh .subject h2 span:before {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0;
  height: 10px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.1);
}
.resultSrmy .wrap .oh .subject > span {
  display: inline-block;
  height: 46px;
  margin: 10px 10px 0 0;
  padding: 0 14px;
  line-height: 46px;
  border-radius: 23px;
  background: #f5f5f5;
}
.resultSrmy .wrap:after {
  content: "";
  position: absolute;
  right: 0;
  top: 60px;
  width: 383px;
  height: 324px;
  background: url(/static/images/healthCheck/bg_result.png) no-repeat 0 0;
}

.healthRecommend {
  position: relative;
  width: 1030px;
  margin: 60px auto 80px;
}
.healthRecommend h2 {
  margin-bottom: 40px;
  font-size: 32px;
  line-height: 32px;
}
.healthRecommend h2 .sub {
  font-size: 24px;
}
.healthRecommend .slideCont {
  overflow: hidden;
}
.healthRecommend .slideCont .swiper-wrapper li {
  float: left;
  width: 330px;
}
.healthRecommend .slideCont .swiper-wrapper li .thumb {
  position: relative;
  overflow: hidden;
  width: 330px;
  height: 330px;
  border-radius: 10px;
  background: #f5f5f5;
}
.healthRecommend .slideCont .swiper-wrapper li .thumb .icon {
  position: absolute;
  left: 10px;
  top: 10px;
}
.healthRecommend .slideCont .swiper-wrapper li .tit {
  margin: 10px 10px 0;
  font-size: 18px;
  font-weight: 600;
}
.healthRecommend .slideCont .swiper-wrapper li .tit span:not([class]) {
  margin-right: 6px;
}
.healthRecommend .slideCont .swiper-wrapper li .tit .division {
  display: inline-block;
  padding-left: 16px;
  line-height: 18px;
  color: #ff5a00;
  font-size: 14px;
  font-weight: 500;
  background: url(/static/images/icon/ic_sub.png) no-repeat 0 50%;
}
.healthRecommend .slideCont .swiper-wrapper li .srmy {
  margin: 10px;
  font-size: 16px;
}
.healthRecommend .slideCont .swiper-wrapper li .info {
  margin: 0 10px;
}
.healthRecommend .prev {
  position: absolute;
  left: -125px;
  top: 215px;
}
.healthRecommend .next {
  position: absolute;
  right: -125px;
  top: 215px;
}
.healthRecommend .nav {
  margin-top: 40px;
  text-align: center;
}
.healthRecommend .nav li {
  width: 8px;
  height: 8px;
  margin: 0 8px;
  background: #111;
}
.healthRecommend .nav li.on {
  opacity: 1;
}

.previewStep2 {
  padding: 60px 0 80px;
  text-align: center;
}
.previewStep2 h2 {
  margin-bottom: 60px;
  font-size: 24px;
}
.previewStep2 .thumb {
  position: relative;
}
.previewStep2 .thumb .btnTypeA {
  position: absolute;
  left: calc(50% - 235px);
  top: calc(50% - 48px);
  width: 470px;
  height: 95px;
  line-height: 95px;
  font-size: 27px;
}

.resultStep2Srmy {
  padding: 60px 0;
  margin-top: 60px;
}
.resultStep2Srmy .wrap {
  width: 1280px;
  margin: 0 auto;
}
.resultStep2Srmy .wrap h1 {
  margin-bottom: 30px;
  font-size: 34px;
  line-height: 44px;
}
.resultStep2Srmy .wrap h1 span {
  position: relative;
}
.resultStep2Srmy .wrap h1 span:before {
  content: "";
  opacity: 0.2;
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 2px;
  height: 20px;
  border-radius: 10px;
}
.resultStep2Srmy .wrap .caution {
  margin-bottom: 30px;
}
.resultStep2Srmy .wrap .caution li {
  font-size: 16px;
}
.resultStep2Srmy .wrap .caution li em {
  color: #111;
}
.resultStep2Srmy .wrap .mySrmy {
  float: right;
  width: 550px;
  padding: 30px;
  border-radius: 10px;
  background: #fff;
}
.resultStep2Srmy .wrap .mySrmy h2 {
  margin-bottom: 20px;
  text-align: center;
  font-size: 28px;
  line-height: 28px;
}
.resultStep2Srmy .wrap .mySrmy h2 .fontA {
  position: relative;
  top: -4px;
  font-size: 16px;
  color: #666;
}
.resultStep2Srmy .wrap .mySrmy h2 strong {
  font-size: 30px;
}
.resultStep2Srmy .wrap .mySrmy h2 em {
  font-weight: 600;
}
.resultStep2Srmy .wrap .mySrmy .graph .bar {
  overflow: hidden;
  height: 30px;
  border-radius: 18px;
  background: #f5f5f5;
}
.resultStep2Srmy .wrap .mySrmy .graph .bar span {
  float: left;
  width: 20%;
  height: 30px;
  text-align: center;
  color: #888;
  line-height: 30px;
}
.resultStep2Srmy .wrap .mySrmy .graph .bar span.on {
  color: #fff;
}
.resultStep2Srmy .wrap .mySrmy .graph .line {
  overflow: hidden;
  margin: 2px 49px 0;
}
.resultStep2Srmy .wrap .mySrmy .graph .line span {
  float: left;
  width: 25%;
  text-align: center;
  color: #666;
}
.resultStep2Srmy .wrap .mySrmy .srmy {
  position: relative;
  overflow: hidden;
  padding: 30px 0;
  border-bottom: 1px solid #ddd;
}
.resultStep2Srmy .wrap .mySrmy .srmy .body, .resultStep2Srmy .wrap .mySrmy .srmy .birth {
  float: left;
  width: 50%;
  padding: 0 50px 0 40px;
}
.resultStep2Srmy .wrap .mySrmy .srmy .body p, .resultStep2Srmy .wrap .mySrmy .srmy .birth p {
  position: relative;
  color: #888;
  font-size: 16px;
}
.resultStep2Srmy .wrap .mySrmy .srmy .body p em, .resultStep2Srmy .wrap .mySrmy .srmy .birth p em {
  position: absolute;
  left: 50%;
  top: 0;
  width: 80px;
  color: #111;
  text-align: right;
}
.resultStep2Srmy .wrap .mySrmy .srmy .body p + p, .resultStep2Srmy .wrap .mySrmy .srmy .birth p + p {
  margin-top: 10px;
}
.resultStep2Srmy .wrap .mySrmy .srmy .birth {
  padding: 0 40px 0 50px;
}
.resultStep2Srmy .wrap .mySrmy .srmy:after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(50% - 20px);
  width: 1px;
  height: 40px;
  background: #ddd;
}
.resultStep2Srmy .wrap .mySrmy .text {
  margin-top: 20px;
  font-size: 16px;
}
.resultStep2Srmy .wrap .mySrmy .text2 {
  margin-top: 15px;
  color: #666;
}
.resultStep2Srmy .wrap:after {
  content: "";
  display: block;
  clear: both;
}

.nutrient {
  width: 1280px;
  padding-top: 60px;
  margin: 0 auto;
}
.nutrient h2 {
  height: 172px;
  padding: 122px 0 0 90px;
  font-size: 24px;
  background: url(/static/images/healthCheck/thumb_nutrient1.png) no-repeat 0 0;
}
.nutrient h2 strong {
  position: relative;
}
.nutrient h2 strong:before {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0;
  z-index: -1;
  height: 16px;
  border-radius: 10px;
}
.nutrient .list > li {
  position: relative;
  padding: 45px 30px 30px;
  border: 1px solid #ddd;
  border-radius: 10px;
}
.nutrient .list > li .head {
  min-height: 90px;
}
.nutrient .list > li .head .icon {
  position: absolute;
  left: 20px;
  top: 30px;
  width: 90px;
  height: 90px;
  text-align: center;
  line-height: 90px;
}
.nutrient .list > li .head .icon:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 90px;
  height: 90px;
  border-radius: 100%;
  background: #fff7ec;
}
.nutrient .list > li .head .icon img {
  position: relative;
  vertical-align: middle;
}
.nutrient .list > li .head > .tit {
  margin-left: 110px;
  font-size: 24px;
}
.nutrient .list > li .head .text {
  margin: 10px 0 0 110px;
  font-size: 16px;
  color: #666;
}
.nutrient .list > li .head .text em {
  margin-left: 10px;
}
.nutrient .list > li .pdtBox {
  overflow: hidden;
  margin-bottom: 30px;
}
.nutrient .list > li .pdtBox .controls {
  margin-bottom: 20px;
  text-align: right;
  font-size: 0;
}
.nutrient .list > li .pdtBox .controls .prev, .nutrient .list > li .pdtBox .controls .next {
  overflow: hidden;
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  border: solid 1px #111;
  border-radius: 30px;
  text-align: center;
  vertical-align: top;
  white-space: nowrap;
  text-indent: 100%;
}
.nutrient .list > li .pdtBox .controls .prev:before, .nutrient .list > li .pdtBox .controls .next:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 9px;
  margin: -5px 0 0 -3px;
  background: url(/static/images/icon/ic_pn.png) no-repeat 0 0;
}
.nutrient .list > li .pdtBox .controls .prev.next:before, .nutrient .list > li .pdtBox .controls .next.next:before {
  background-position-x: -6px;
}
.nutrient .list > li .pdtBox .controls .page {
  display: inline-block;
  width: 60px;
  font: 600 15px/30px "Roboto";
  text-align: center;
  vertical-align: middle;
}
.nutrient .list > li .pdtBox ul li {
  float: left;
  position: relative;
  width: 396px;
  padding: 0;
  margin-top: 30px;
  border-radius: 10px;
  background: #f5f5f5;
}
.nutrient .list > li .pdtBox ul li > a {
  display: table;
  width: 100%;
  height: 112px;
}
.nutrient .list > li .pdtBox ul li .thumb {
  left: 30px;
  top: 20px;
  background: #fff;
}
.nutrient .list > li .pdtBox ul li .content {
  padding: 0 20px 0 122px;
}
.nutrient .list > li .pdtBox ul li .content .srmy {
  margin-top: 5px;
  line-height: 14px;
  color: #888;
}
.nutrient .list > li .more, .nutrient .list > li .hidden {
  margin-top: 20px;
  text-align: right;
  font-size: 16px;
}
.nutrient .list > li .more a, .nutrient .list > li .hidden a {
  padding-right: 22px;
  color: #666;
}
.nutrient .list > li .more a:before, .nutrient .list > li .more a:after, .nutrient .list > li .hidden a:before, .nutrient .list > li .hidden a:after {
  width: 8px;
  margin-top: -4px;
  background: #aaa;
}
.nutrient .list > li .more a:before, .nutrient .list > li .hidden a:before {
  right: 3px;
}
.nutrient .list > li .detail dt {
  margin-top: 30px;
  font-size: 18px;
}
.nutrient .list > li .detail dt span {
  position: relative;
}
.nutrient .list > li .detail dt span:before {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0;
  height: 10px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.1);
}
.nutrient .list > li .detail dd {
  position: relative;
  padding-left: 10px;
  margin-top: 5px;
  font-size: 16px;
}
.nutrient .list > li .detail dd:before {
  content: "-";
  position: absolute;
  left: 0;
  top: 0;
}
.nutrient .list > li .detail dd.file {
  padding: 0;
  margin-top: 15px;
  font-size: 14px;
}
.nutrient .list > li .detail dd.file:before {
  display: none;
}
.nutrient .list > li .detail dd.file a {
  margin-right: 15px;
  color: #888;
  line-height: 15px;
  text-decoration: underline;
}
.nutrient .list > li .detail dd.file a:before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 15px;
  margin: -2px 6px 0 0;
  vertical-align: middle;
  background: url(/static/images/icon/ic_file.png) no-repeat 0 0;
}
.nutrient .list > li + li {
  margin-top: 30px;
}
.nutrient .list > li.empty {
  padding: 30px;
  font-size: 18px;
}
.nutrient .btnArea .btnTypeA {
  width: 400px;
  height: 76px;
  margin: 0 13px;
  line-height: 76px;
  font-size: 22px;
  font-weight: 600;
}

.exclude {
  width: 1280px;
  padding-top: 60px;
  margin: 0 auto;
}
.exclude h2 {
  height: 172px;
  padding-top: 122px;
  font-size: 24px;
  background: url(/static/images/healthCheck/thumb_exclude.png) no-repeat 100% 0;
}
.exclude h2 strong {
  position: relative;
}
.exclude h2 strong:before {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0;
  z-index: -1;
  height: 16px;
  border-radius: 10px;
  background: #ddd;
}
.exclude dl {
  padding: 0 30px 30px;
  border-radius: 10px;
  border: 1px solid #ddd;
}
.exclude dl dt {
  margin-top: 30px;
  font-size: 18px;
}
.exclude dl dt span {
  position: relative;
}
.exclude dl dt span:before {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0;
  height: 10px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.1);
}
.exclude dl dd {
  position: relative;
  padding-left: 10px;
  margin-top: 5px;
  font-size: 16px;
}
.exclude dl dd:before {
  content: "-";
  position: absolute;
  left: 0;
  top: 0;
}

.nutrientChart {
  width: 1280px;
  padding-top: 60px;
  margin: 0 auto;
}
.nutrientChart h2 {
  margin-bottom: 20px;
  font-size: 24px;
}
.nutrientChart .text {
  margin-top: -40px;
  height: 40px;
  text-align: right;
  color: #888;
}
.nutrientChart .empty {
  padding: 30px;
  font-size: 18px;
  border-radius: 10px;
  border: 1px solid #ddd;
}
.nutrientChart .chartArea {
  border-radius: 10px;
  border: 1px solid #ddd;
}
.nutrientChart .chartArea h3 {
  margin: 30px 0;
  text-align: center;
  font-size: 18px;
}
.nutrientChart .chartArea .chart {
  padding: 0 20px;
}
.nutrientChart .chartArea .chart ul {
  position: relative;
  width: 1183px;
  background: url(/static/images/healthCheck/bg_chart2.png) repeat-y 100% 0;
}
.nutrientChart .chartArea .chart ul li {
  position: relative;
  height: 32px;
  padding-left: 105px;
}
.nutrientChart .chartArea .chart ul li em {
  position: absolute;
  left: 0;
  top: 0;
  line-height: 32px;
}
.nutrientChart .chartArea .chart ul li .num {
  position: absolute;
  left: 120px;
  top: 0;
  line-height: 32px;
  color: #888;
}
.nutrientChart .chartArea .chart ul li .num strong {
  font-size: 18px;
  color: #111;
}
.nutrientChart .chartArea .chart ul li p {
  width: 539px;
  height: 32px;
  white-space: nowrap;
  font-size: 0;
}
.nutrientChart .chartArea .chart ul li p span {
  display: inline-block;
  height: 32px;
}
.nutrientChart .chartArea .chart ul li p span:nth-child(1) {
  border-radius: 10px 0 0 10px;
}
.nutrientChart .chartArea .chart ul li p span:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.nutrientChart .chartArea .chart ul li + li {
  margin-top: 20px;
}
.nutrientChart .chartArea .chart ul:after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  bottom: -2px;
  height: 2px;
  background: url(/static/images/healthCheck/bg_chart.png) no-repeat 100% 100%;
}
.nutrientChart .chartArea .chart .info {
  overflow: hidden;
  width: 1350px;
  margin: 5px 0 30px -30px;
  text-align: center;
}
.nutrientChart .chartArea .chart .info p {
  float: left;
  width: 20%;
  color: #888;
  font-family: "Roboto";
}
.nutrientChart .chartArea .warning {
  padding: 30px;
  background: #f5f5f5;
}
.nutrientChart .chartArea .warning li + li {
  margin-top: 10px;
}

.solution {
  padding: 60px 0 80px;
  margin-top: 80px;
}
.solution > .wrap {
  width: 1280px;
  margin: 0 auto;
}
.solution > .wrap h2 {
  font-size: 44px;
  text-align: center;
}
.solution > .wrap h2 span {
  position: relative;
}
.solution > .wrap h2 span:before {
  content: "";
  opacity: 0.2;
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 2px;
  height: 30px;
  border-radius: 10px;
}
.solution > .wrap .total {
  margin: 30px 0 20px;
  font-size: 16px;
}
.solution > .wrap .listArea {
  background: #fff;
}
.solution > .wrap .listArea .list {
  padding: 0 40px;
}
.solution > .wrap .listArea .list > li {
  position: relative;
  padding: 30px 0;
}
.solution > .wrap .listArea .list > li .wrap {
  position: relative;
  display: block;
  min-height: 250px;
  padding-left: 280px;
  margin-top: 20px;
}
.solution > .wrap .listArea .list > li .wrap .thumb {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  width: 250px;
  height: 250px;
  border-radius: 10px;
  background: #f5f5f5;
}
.solution > .wrap .listArea .list > li .wrap .thumb .icon {
  position: absolute;
  left: 16px;
  top: 16px;
}
.solution > .wrap .listArea .list > li .wrap .tit {
  font-size: 18px;
  font-weight: 600;
}
.solution > .wrap .listArea .list > li .wrap .tit .division {
  display: inline-block;
  margin-left: 6px;
  padding-left: 16px;
  line-height: 18px;
  color: #ff5a00;
  font-size: 14px;
  font-weight: 500;
  background: url(/static/images/icon/ic_sub.png) no-repeat 0 50%;
}
.solution > .wrap .listArea .list > li .wrap .srmy {
  margin-top: 10px;
  font-size: 16px;
}
.solution > .wrap .listArea .list > li .wrap .info {
  margin-top: 5px;
}
.solution > .wrap .listArea .list > li .wrap .price {
  position: absolute;
  right: 0;
  top: 0;
}
.solution > .wrap .listArea .list > li .wrap .price .original {
  display: inline-block;
  line-height: 28px;
  font-size: 16px;
  color: #888;
  text-decoration: line-through;
}
.solution > .wrap .listArea .list > li .wrap .price .discount {
  display: inline-block;
  margin-left: 10px;
  line-height: 28px;
  font-size: 16px;
}
.solution > .wrap .listArea .list > li .wrap .price .discount strong {
  font-size: 28px;
}
.solution > .wrap .listArea .list > li .wrap .dose {
  margin: 30px 0 0 -5px;
}
.solution > .wrap .listArea .list > li .wrap .dose li {
  position: relative;
  float: left;
  width: 60px;
  text-align: center;
  font-size: 12px;
  line-height: 16px;
  color: #666;
}
.solution > .wrap .listArea .list > li .wrap .dose li span {
  display: block;
  overflow: hidden;
  width: 50px;
  height: 50px;
  margin: 0 auto 10px;
}
.solution > .wrap .listArea .list > li .wrap .dose li + li {
  margin-left: 20px;
}
.solution > .wrap .listArea .list > li .wrap .dose:after {
  content: "";
  display: block;
  clear: both;
}
.solution > .wrap .listArea .list > li + li {
  border-top: 1px solid #ddd;
}
.solution > .wrap .listArea .list > li.empty {
  padding: 30px;
  margin: 0 -40px;
  font-size: 18px;
}
.solution > .wrap .listArea .btnArea {
  margin: 0 40px;
  padding: 60px 0;
  border-top: 1px solid #ddd;
}
.solution > .wrap > .btnArea a {
  width: 400px;
  height: 76px;
  margin: 0 13px;
  line-height: 76px;
  font-size: 22px;
  font-weight: 600;
}
.solution:last-child {
  padding-bottom: 140px;
  margin-bottom: -140px;
}

.drpackInfo {
  width: 1280px;
  padding: 60px 0 140px;
  margin: 0 auto -140px;
}
.drpackInfo h2 {
  text-align: center;
  font-size: 32px;
}
.drpackInfo > .text {
  margin-top: 10px;
  text-align: center;
  font-size: 16px;
  color: #666;
}
.drpackInfo .recommendInfo {
  margin-top: 40px;
}
.drpackInfo .recommendInfo h3 {
  text-align: center;
  font-size: 24px;
}
.drpackInfo .recommendInfo .cont {
  position: relative;
  width: 600px;
  padding-left: 210px;
  margin: 20px auto 0;
  background: url(/static/images/healthCheck/ic_drpack.png) no-repeat 0 50%;
}
.drpackInfo .recommendInfo .cont li {
  padding-left: 36px;
  font-size: 16px;
  line-height: 20px;
  background: url(/static/images/healthCheck/ic_check.png) no-repeat 0 50%;
}
.drpackInfo .recommendInfo .cont li span {
  position: relative;
}
.drpackInfo .recommendInfo .cont li span:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  height: 7px;
  border-radius: 5px;
  background: #ddd;
}
.drpackInfo .recommendInfo .cont li + li {
  margin-top: 10px;
}
.drpackInfo .recommendInfo .cont .text {
  margin-top: 20px;
  font-size: 18px;
}
.drpackInfo .recommendInfo .cont .text strong {
  position: relative;
}
.drpackInfo .recommendInfo .cont .text strong:before {
  content: "";
  opacity: 0.1;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 10px;
  border-radius: 5px;
  background: #111;
}
.drpackInfo .useInfo {
  width: 1030px;
  padding-top: 80px;
  margin: 80px auto 0;
  border-top: 1px solid #ddd;
}
.drpackInfo .useInfo h3 {
  margin-bottom: 60px;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
}
.drpackInfo .useInfo ol {
  margin-bottom: 60px;
  background: url(/static/images/healthCheck/bg_useInfo.png) no-repeat 50% calc(50% - 6px);
}
.drpackInfo .useInfo ol li {
  position: relative;
  float: left;
  width: 290px;
  height: 176px;
  padding: 30px 30px 0;
  margin-bottom: 90px;
  border: 2px solid #ddd;
  border-radius: 10px;
  background: #f5f5f5;
}
.drpackInfo .useInfo ol li .tit {
  position: absolute;
  left: -2px;
  top: -40px;
  font-size: 24px;
  font-weight: 600;
  color: #bbb;
}
.drpackInfo .useInfo ol li em {
  display: block;
  margin-bottom: 20px;
  font: 600 20px/1em "Roboto";
  color: #666;
}
.drpackInfo .useInfo ol li strong {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1em;
}
.drpackInfo .useInfo ol li:before {
  content: "";
  position: absolute;
  right: 20px;
  top: 20px;
  width: 82px;
  height: 70px;
  background: url(/static/images/healthCheck/ic_useInfo1.png) no-repeat 100% 0;
}
.drpackInfo .useInfo ol:after {
  content: "";
  display: block;
  clear: both;
}
.drpackInfo .useInfo ol li + li {
  margin-left: 80px;
}
.drpackInfo .useInfo ol li:nth-child(4) {
  margin-left: 0;
}
.drpackInfo .useInfo ol li:nth-child(3) ~ li {
  margin-bottom: 0;
}
.drpackInfo .useInfo ol li:nth-child(2):before {
  background-image: url(/static/images/healthCheck/ic_useInfo2.png);
}
.drpackInfo .useInfo ol li:nth-child(3):before {
  background-image: url(/static/images/healthCheck/ic_useInfo3.png);
}
.drpackInfo .useInfo ol li:nth-child(4):before {
  background-image: url(/static/images/healthCheck/ic_useInfo4.png);
}
.drpackInfo .useInfo ol li:nth-child(5):before {
  background-image: url(/static/images/healthCheck/ic_useInfo5.png);
}
.drpackInfo .useInfo ol li:nth-child(6):before {
  background-image: url(/static/images/healthCheck/ic_useInfo6.png);
}
.drpackInfo .warning {
  width: 670px;
  margin: 0 auto;
}
.drpackInfo .warning li {
  color: #666;
}
.drpackInfo .btnArea a {
  width: 400px;
  height: 76px;
  margin: 0 13px;
  line-height: 76px;
  font-size: 22px;
  font-weight: 600;
}

.bmiStep1 .resultStep2Srmy, .bmiStep1 .solution {
  background: #f3f9ff;
}
.bmiStep1 h1 span:before, .bmiStep1 .graph .bar .on, .bmiStep1 .solution h2 span:before {
  background: #4279be;
}
.bmiStep1 .nutrient h2 strong:before {
  background: #cce6ff;
}
.bmiStep1 .bmiColor {
  color: #4279be;
}
.bmiStep1 .nutrient h2 {
  background-image: url(/static/images/healthCheck/thumb_nutrient1.png);
}
.bmiStep1 .nutrientChart .chartArea .chart li .gage span:nth-child(1) {
  background: #ddeeff;
}
.bmiStep1 .nutrientChart .chartArea .chart li .gage span:nth-child(2) {
  background: #add1f6;
}
.bmiStep1 .nutrientChart .chartArea .chart li .gage span:nth-child(3) {
  background: #4279be;
}

.bmiStep2 .resultStep2Srmy, .bmiStep2 .solution {
  background: #f1fcf2;
}
.bmiStep2 h1 span:before, .bmiStep2 .graph .bar .on, .bmiStep2 .solution h2 span:before {
  background: #27993a;
}
.bmiStep2 .nutrient h2 strong:before {
  background: #bee6c5;
}
.bmiStep2 .bmiColor {
  color: #27993a;
}
.bmiStep2 .nutrient h2 {
  background-image: url(/static/images/healthCheck/thumb_nutrient2.png);
}
.bmiStep2 .nutrientChart .chartArea .chart li .gage span:nth-child(1) {
  background: #e3f6e6;
}
.bmiStep2 .nutrientChart .chartArea .chart li .gage span:nth-child(2) {
  background: #bee6c5;
}
.bmiStep2 .nutrientChart .chartArea .chart li .gage span:nth-child(3) {
  background: #72cc82;
}

.bmiStep3 .resultStep2Srmy, .bmiStep3 .solution {
  background: #fefaed;
}
.bmiStep3 h1 span:before, .bmiStep3 .graph .bar .on, .bmiStep3 .solution h2 span:before {
  background: #f5ac00;
}
.bmiStep3 .nutrient h2 strong:before {
  background: #ffeeaa;
}
.bmiStep3 .bmiColor {
  color: #f5ac00;
}
.bmiStep3 .nutrient h2 {
  background-image: url(/static/images/healthCheck/thumb_nutrient3.png);
}
.bmiStep3 .nutrientChart .chartArea .chart li .gage span:nth-child(1) {
  background: #fef198;
}
.bmiStep3 .nutrientChart .chartArea .chart li .gage span:nth-child(2) {
  background: #fef198;
}
.bmiStep3 .nutrientChart .chartArea .chart li .gage span:nth-child(3) {
  background: #ffc300;
}

.bmiStep4 .resultStep2Srmy, .bmiStep4 .solution {
  background: #fff2eb;
}
.bmiStep4 h1 span:before, .bmiStep4 .graph .bar .on, .bmiStep4 .solution h2 span:before {
  background: #ff5a00;
}
.bmiStep4 .nutrient h2 strong:before {
  background: #ffd1b7;
}
.bmiStep4 .bmiColor {
  color: #ff5a00;
}
.bmiStep4 .nutrient h2 {
  background-image: url(/static/images/healthCheck/thumb_nutrient4.png);
}
.bmiStep4 .nutrientChart .chartArea .chart li .gage span:nth-child(1) {
  background: #ffece2;
}
.bmiStep4 .nutrientChart .chartArea .chart li .gage span:nth-child(2) {
  background: #ffd7c1;
}
.bmiStep4 .nutrientChart .chartArea .chart li .gage span:nth-child(3) {
  background: #ff5a00;
}

.bmiStep5 .resultStep2Srmy, .bmiStep5 .solution {
  background: #fff2f5;
}
.bmiStep5 h1 span:before, .bmiStep5 .graph .bar .on, .bmiStep5 .solution h2 span:before {
  background: #e01846;
}
.bmiStep5 .nutrient h2 strong:before {
  background: #ffcad6;
}
.bmiStep5 .bmiColor {
  color: #e01846;
}
.bmiStep5 .nutrient h2 {
  background-image: url(/static/images/healthCheck/thumb_nutrient5.png);
}
.bmiStep5 .nutrientChart .chartArea .chart li .gage span:nth-child(1) {
  background: #fcdee5;
}
.bmiStep5 .nutrientChart .chartArea .chart li .gage span:nth-child(2) {
  background: #ffc1c1;
}
.bmiStep5 .nutrientChart .chartArea .chart li .gage span:nth-child(3) {
  background: #e01846;
}

/********** 9_etc **********/
.agreeText {
  font-size: 16px;
  line-height: 28px;
}
.agreeText .menu {
  position: relative;
  height: 95px;
  margin-top: -95px;
  text-align: right;
}

.errorPage {
  margin-top: 250px;
  text-align: center;
}
.errorPage .text {
  padding-top: 60px;
  font-size: 24px;
  background: url(/static/images/icon/ic_warning.png) no-repeat 50% 0;
}
.errorPage .text2 {
  margin-top: 10px;
  font-size: 16px;
  color: #666;
}
.errorPage .btn {
  margin-top: 40px;
}
.errorPage .btn a {
  width: 250px;
  margin: 0 3px;
}

.companyPage article {
  position: relative;
  overflow: hidden;
}
.companyPage article .hide {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
  width: 1px;
  height: 1px;
}
.companyPage article .articleWrap {
  display: flex;
  width: 1280px;
  margin: 0 auto;
}
.companyPage article .articleWrap > strong, .companyPage article .articleWrap > .textCont {
  position: relative;
  width: 50%;
}
.companyPage article .articleWrap strong {
  font-size: 28px;
  font-weight: normal;
  line-height: 1.5;
}
.companyPage article .articleWrap strong.gcLogo:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 320px;
  height: 54px;
  background: url(/static/images/icon/gcLogo.png) no-repeat 0 0;
}
.companyPage article .articleWrap .textCont {
  padding-left: 20px;
  box-sizing: border-box;
}
.companyPage article .articleWrap .textCont p {
  font-size: 16px;
  line-height: 1.63;
}
.companyPage article .articleWrap .textCont strong {
  display: block;
  margin-bottom: 21px;
}
.companyPage article > span {
  position: absolute;
  left: calc(50% + 10px);
  bottom: 0;
  width: 2100px;
  height: 145px;
  -webkit-text-stroke: 1px #ddd;
  font-size: 100px;
  font-weight: bold;
  font-style: normal;
  line-height: 145px;
  color: #fff;
  z-index: -1;
}
.companyPage article.topArea {
  height: 375px;
  margin-bottom: 59px;
}
.companyPage article.topArea .articleWrap {
  padding-top: 30px;
  border-top: 2px solid #bbb;
}
.companyPage .imgArea {
  width: 1280px;
  margin: 0 auto 60px;
}

.guidePage {
  padding-top: 60px;
}
.guidePage .titleArea {
  padding-bottom: 40px;
  margin-bottom: 60px;
  border-bottom: 1px solid #ddd;
}
.guidePage .titleArea h2 {
  margin-bottom: 11px;
  font-size: 24px;
  font-weight: bold;
}
.guidePage .titleArea ol li, .guidePage .titleArea p {
  font-size: 16px;
  line-height: 1.6;
}
.guidePage section .flexArea {
  display: flex;
  justify-content: space-between;
}
.guidePage section .procedure > li {
  position: relative;
  padding-left: 120px;
  margin-bottom: 40px;
  min-height: 80px;
}
.guidePage section .procedure > li > strong {
  display: block;
  margin-bottom: 7px;
  font-size: 24px;
  font-weight: normal;
  line-height: 1.17;
}
.guidePage section .procedure > li p {
  font-size: 16px;
  line-height: 1.63;
}
.guidePage section .procedure > li p em {
  font-weight: bold;
}
.guidePage section .procedure > li span, .guidePage section .procedure > li > ul {
  margin-top: 10px;
}
.guidePage section .procedure > li > ul > li {
  color: #ff5a00;
  line-height: 1.71;
}
.guidePage section .procedure > li .boxArea {
  margin-top: 20px;
}
.guidePage section .procedure > li .boxArea span {
  display: block;
  margin-bottom: 20px;
  margin-top: 0;
}
.guidePage section .procedure > li .boxArea ul {
  width: 850px;
  padding: 30px;
  border-radius: 6px;
  border: solid 1px #ddd;
}
.guidePage section .procedure > li .boxArea ul li {
  position: relative;
  padding-left: 170px;
  margin-bottom: 30px;
}
.guidePage section .procedure > li .boxArea ul li strong {
  position: absolute;
  width: 140px;
  left: 0;
  top: 0;
}
.guidePage section .procedure > li .boxArea ul li p {
  font-size: 14px;
}
.guidePage section .procedure > li .boxArea ul li:last-of-type {
  margin-bottom: 0;
}
.guidePage section .procedure > li .caution {
  display: block;
  padding-left: 22px;
  color: #666;
  line-height: 1.86;
  background: url(/static/images/icon/ic_caution2.png) no-repeat 0 3px;
}
.guidePage section .procedure > li:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 80px;
  height: 80px;
  background-image: url(/static/images/icon/ic_guide1.png);
  background-repeat: no-repeat;
}
.guidePage section .procedure > li:last-of-type {
  margin-bottom: 0;
}
.guidePage section .procedure.procedure1 li:nth-of-type(1)::after {
  background-image: url(/static/images/icon/ic_guide1.png);
}
.guidePage section .procedure.procedure1 li:nth-of-type(2)::after {
  background-image: url(/static/images/icon/ic_guide2.png);
}
.guidePage section .procedure.procedure1 li:nth-of-type(3)::after {
  background-image: url(/static/images/icon/ic_guide3.png);
}
.guidePage section .procedure.procedure1 li:nth-of-type(4)::after {
  background-image: url(/static/images/icon/ic_guide4.png);
}
.guidePage section .procedure.procedure2 li:nth-of-type(1)::after {
  background-image: url(/static/images/icon/ic_guide5.png);
}
.guidePage section .procedure.procedure2 li:nth-of-type(2)::after {
  background-image: url(/static/images/icon/ic_guide6.png);
}
.guidePage section .procedure.procedure2 li:nth-of-type(3)::after {
  background-image: url(/static/images/icon/ic_guide7.png);
}
.guidePage section dl {
  width: 396px;
  height: 558px;
  padding: 30px 30px 0;
  border-radius: 6px;
  background: #f5f5f5 url(/static/images/etc/definition.png) no-repeat 50% 100%;
}
.guidePage section dl dt {
  margin-bottom: 21px;
  font-size: 28px;
  font-weight: bold;
}
.guidePage section dl dd p {
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 1.75;
  color: #666;
}
.guidePage section dl dd p em {
  position: relative;
  color: #111;
}
.guidePage section dl dd p em:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 11px;
  background: rgba(255, 90, 0, 0.2);
}
.guidePage section dl dd p:last-of-type {
  margin-bottom: 0;
}
.guidePage section .textWrap strong {
  display: block;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.75;
}
.guidePage section .textWrap li, .guidePage section .textWrap p {
  font-size: 16px;
  line-height: 1.75;
}
.guidePage section .textWrap article {
  margin-bottom: 60px;
}
.guidePage section .textWrap article h3 {
  font-size: 16px;
  margin-bottom: 30px;
  font-weight: bold;
}
.guidePage section .textWrap article > ol > li {
  margin-bottom: 30px;
}
.guidePage section .textWrap article > ol > li:last-of-type {
  margin-bottom: 0;
}
.guidePage section .textWrap article > ul > li {
  margin-bottom: 30px;
}
.guidePage section .textWrap article > ul > li h3 {
  margin-bottom: 0;
}
.guidePage section .textWrap article > ul > li:last-of-type {
  margin-bottom: 0;
}
.guidePage .btnCont {
  padding-top: 80px;
  margin-top: 60px;
  text-align: center;
  border-top: 1px solid #ddd;
}

@media all and (-ms-high-contrast: none) {
  .companyPage article > span {
    color: #eee;
  }
}
/********* 10_닥터팩안내 *********/
.drpackIntro .intro {
  position: relative;
  width: 1497px;
  height: 440px;
  padding-top: 252px;
  margin: 0 auto;
  background: url(/static/images/drpack/thumb_intro.png) no-repeat 100% 176px;
}
.drpackIntro .intro h2 {
  font-size: 44px;
  line-height: 58px;
}
.drpackIntro .intro .text {
  margin-top: 20px;
  font-size: 22px;
  line-height: 32px;
  color: #666;
}
.drpackIntro .intro .text2 {
  position: absolute;
  right: 0;
  bottom: 40px;
  font-size: 12px;
  color: #aaa;
}
.drpackIntro .recommend {
  width: 1280px;
  padding: 150px 0;
  margin: 0 auto;
}
.drpackIntro .recommend h2 {
  font-size: 34px;
  line-height: 44px;
}
.drpackIntro .recommend ul {
  overflow: hidden;
  margin-top: 50px;
}
.drpackIntro .recommend ul li {
  float: left;
  width: 305px;
  font-size: 18px;
  line-height: 26px;
}
.drpackIntro .recommend ul li img {
  display: block;
  margin-bottom: 20px;
}
.drpackIntro .recommend ul li + li {
  margin-left: 20px;
}
.drpackIntro .point {
  overflow: hidden;
  width: 1280px;
  padding: 150px 0;
  margin: 0 auto;
}
.drpackIntro .point li {
  position: relative;
  float: left;
  width: 293px;
  padding-top: 50px;
  font-size: 16px;
  line-height: 26px;
}
.drpackIntro .point li img {
  position: absolute;
  right: 0;
  top: 0;
  width: 140px;
  object-fit: contain;
}
.drpackIntro .point li .tit {
  position: relative;
  margin-bottom: 20px;
  font-size: 28px;
  line-height: 38px;
  font-weight: 700;
}
.drpackIntro .point li + li {
  margin-left: 200px;
}
.drpackIntro .point li:nth-child(3) img {
  top: 10px;
}
.drpackIntro .info {
  width: 1280px;
  padding: 100px 0 70px;
  margin: 0 auto;
}
.drpackIntro .info h2 {
  text-align: center;
  font-size: 44px;
  line-height: 58px;
}
.drpackIntro .info .drpack_info_bg {
  width: 1280px;
  height: 792px;
  background: url("/static/images/drpack/drpack_info.png") no-repeat center;
  background-size: cover;
}
.drpackIntro .info .useInfo {
  width: 1280px;
  padding-top: 206px;
}
.drpackIntro .info .useInfo ol {
  margin-bottom: 60px;
  background: url(/static/images/drpack/bg_useInfo.png) no-repeat 50% calc(50% + 5px);
}
.drpackIntro .info .useInfo ol li {
  position: relative;
  float: left;
  width: 350px;
  height: 170px;
  padding: 45px 30px 0;
  margin-bottom: 246px;
  border: 1px solid #111;
  border-radius: 10px;
  font-size: 16px;
  line-height: 24px;
  background: #fff;
}
.drpackIntro .info .useInfo ol li .tit {
  position: absolute;
  left: -1px;
  top: -140px;
  font-size: 100px;
  line-height: 1em;
  font-weight: 700;
  color: #eee;
}
.drpackIntro .info .useInfo ol li em {
  position: absolute;
  left: 20px;
  top: -20px;
  padding: 0 10px;
  font: 700 30px/1em "Roboto";
  color: #ff5a00;
  background: #fff;
}
.drpackIntro .info .useInfo ol li strong {
  display: block;
  margin-bottom: 15px;
  font-weight: 700;
  font-size: 22px;
  line-height: 1em;
}
.drpackIntro .info .useInfo ol li:before {
  content: "";
  position: absolute;
  right: 30px;
  top: calc(50% - 32px);
  width: 70px;
  height: 64px;
  background: url(/static/images/drpack/ic_useInfo1_2.png) no-repeat 100% 50%;
}
.drpackIntro .info .useInfo ol:after {
  content: "";
  display: block;
  clear: both;
}
.drpackIntro .info .useInfo ol li + li {
  margin-left: 80px;
}
.drpackIntro .info .useInfo ol li:nth-child(4) {
  margin-left: 70px;
}
.drpackIntro .info .useInfo ol li:nth-child(3) ~ li {
  margin-bottom: 0;
}
.drpackIntro .info .useInfo ol li:nth-child(2):before {
  background-image: url(/static/images/drpack/ic_useInfo2_2.png);
}
.drpackIntro .info .useInfo ol li:nth-child(3):before {
  background-image: url(/static/images/drpack/ic_useInfo3_2.png);
}
.drpackIntro .info .useInfo ol li:nth-child(4):before {
  background-image: url(/static/images/drpack/ic_useInfo4_2.png);
}
.drpackIntro .info .useInfo ol li:nth-child(5):before {
  background-image: url(/static/images/drpack/ic_useInfo5_2.png);
}
.drpackIntro .info .useInfo ol li:nth-child(6):before {
  background-image: url(/static/images/healthCheck/ic_useInfo6.png);
}
.drpackIntro .info .go {
  margin-top: 80px;
  text-align: center;
  font-size: 24px;
}
.drpackIntro .info .go .icoGo:before, .drpackIntro .info .go .icoGo:after {
  width: 9px;
  height: 2px;
  border-radius: 1px;
}
.drpackIntro .pointWord {
  width: 100%;
  height: 600px;
  background-color: #f5f5f5;
}
.drpackIntro .pointWord .pointWord_bg {
  max-width: 1920px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: url(/static/images/drpack/bg_word.png) no-repeat center;
  background-size: cover;
}
.drpackIntro .pointWord ul {
  width: 1280px;
  padding: 150px 0;
  margin: 0 auto;
  text-align: center;
  font-size: 0;
}
.drpackIntro .pointWord ul li {
  display: inline-block;
  width: 298px;
  height: 298px;
  padding-top: 100px;
  margin: 0 44px;
  text-align: center;
  font-size: 34px;
  line-height: 48px;
  border-radius: 50%;
  vertical-align: top;
  background: #fff;
}
.drpackIntro .storeArea {
  width: 1280px;
  padding-top: 170px;
  margin: 0 auto;
}
.drpackIntro .storeArea h2 {
  margin-bottom: 40px;
  font-size: 34px;
  line-height: 44px;
}
.drpackIntro .storeArea .store {
  position: relative;
  min-height: 470px;
  padding-left: 735px;
}
.drpackIntro .storeArea .store .map {
  position: absolute;
  left: 0;
  top: 0;
}
.drpackIntro .storeArea .store h3 {
  font-size: 24px;
  font-weight: 700;
}
.drpackIntro .storeArea .store .tag {
  margin-top: 10px;
}
.drpackIntro .storeArea .store .tag span {
  display: inline-block;
  height: 28px;
  padding: 0 8px;
  margin-left: 4px;
  border-radius: 14px;
  line-height: 28px;
  color: #888;
  font-size: 12px;
  background: #f5f5f5;
}
.drpackIntro .storeArea .store .detail {
  padding-top: 15px;
  margin-top: 30px;
  border-top: 2px solid #bbb;
}
.drpackIntro .storeArea .store .detail dl {
  position: relative;
  margin-top: 40px;
}
.drpackIntro .storeArea .store .detail dl dt {
  position: absolute;
  left: 0;
  padding-left: 28px;
  font-size: 16px;
  color: #888;
}
.drpackIntro .storeArea .store .detail dl dt.location:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 28px;
  background: url(/static/images/icon/ic_location6.png) no-repeat 0 0;
}
.drpackIntro .storeArea .store .detail dl dt.tel {
  background: none;
}
.drpackIntro .storeArea .store .detail dl dt.tel:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  background: url(/static/images/icon/ic_tel6.png) no-repeat 0 0;
}
.drpackIntro .storeArea .store .detail dl dt.time:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  background: url(/static/images/icon/ic_time3.png) no-repeat 0 0;
}
.drpackIntro .storeArea .store .detail dl dd {
  padding-left: 138px;
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 24px;
}
.drpackIntro .storeArea .store .detail dl dd ul {
  overflow: hidden;
}
.drpackIntro .storeArea .store .detail dl dd ul li {
  float: left;
  width: 50%;
  margin-bottom: 20px;
}
.drpackIntro .storeArea .store .detail dl dd ul li .tit {
  margin-bottom: 5px;
  font-weight: 700;
}
.drpackIntro .storeArea .store .detail dl dd ul li .tit .drpack {
  padding-left: 17px;
  margin-left: 10px;
  color: #ff5a00;
  background: url(/static/images/icon/ic_drpack.png) no-repeat 0 50%;
}
.drpackIntro .storeArea .store .detail dl dd ul li p:not([class]) {
  position: relative;
  padding-left: 70px;
  font-family: "Roboto";
}
.drpackIntro .storeArea .store .detail dl dd ul li p:not([class]) span {
  position: absolute;
  left: 0;
  top: 0;
  font-family: "Assistant", "Noto";
}
.drpackIntro .storeArea .btnArea {
  margin: 150px 0;
}
.drpackIntro .storeArea .btnArea a {
  height: 76px;
  font-size: 22px;
  line-height: 76px;
}
.drpackIntro .storeArea .warningInfo {
  padding: 30px;
  border-radius: 10px;
  background: #f5f5f5;
}
.drpackIntro .storeArea .warningInfo h3 {
  font-size: 18px;
}
.drpackIntro .storeArea .warningInfo h3 span {
  position: relative;
}
.drpackIntro .storeArea .warningInfo h3 span:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 10px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.1);
}
.drpackIntro .storeArea .warningInfo ul {
  margin-top: 10px;
}
.drpackIntro .storeArea .warningInfo ul li {
  position: relative;
  padding-left: 10px;
  color: #666;
  line-height: 24px;
}
.drpackIntro .storeArea .warningInfo ul li:before {
  content: "-";
  position: absolute;
  left: 0;
  top: 0;
}
.drpackIntro .storeArea .warningInfo ul + h3 {
  margin-top: 40px;
}

/*# sourceMappingURL=content.css.map */