.app {padding: 0 0;}
body {margin: 0 0; color: #5e5e5e;}

.header-logo {
  margin: 0 auto;	
	border: 0px red solid;
	padding: 15px 0 15px 0;
  width: 640px;
  text-align: left;
}

.img-section {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.com-section {
	text-align: center;
  width: 100%;
  max-width: 640px;
  margin: 10px auto;
}
.com-section .com-nm span {
  /*font-size: 3vw;*/ /* 브라우저 너비의 3% */
  font-weight: bold;
  color: #6573ee;
  font-size: clamp(22px, 3vw, 27px); /* 최소 22px, 브라우저 너비의 3%, 최대 27px */
}
.com-section .highlight-msg span {
	color: #ff8696;
  font-size: clamp(15px, 3vw, 19px);
}

.price-section {
  width: 100%;
  max-width: 640px;
  margin: 20px auto;
  text-align: center;  
}
.price-section .price-title span {
	font-weight: bold;
	font-size: clamp(15px, 3vw, 19px);
}

.addimg-section {
  width: 100%;
  max-width: 640px;
  margin: 20px auto;
  text-align: center;  
}

.qrcode-section {
	text-align: center;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}
.qrcode-section .flex {
  display: flex;  /* div가로 나열 */
  justify-content: center;  /* 가운데 정렬 */
  gap: 80px; /* 간격 */
}
.qrcode-section .qr-img {
	display: flex; justify-content: center;
}

.cs-section {
  text-align: center;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.btn-section {
	text-align: center;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}
.btn-section .goLink {
  margin: 0px 0px 0px 0px;
  background-color: navy;
  padding: 10px;
}
.btn-section .goLink a {
  display: block;
  color: #ffffff;
  font-size: 18px;
  text-decoration: none; 
}

.outline {
  display: block;
  width: 100%;
  height: 100%;
  /*color: #6573ee;*/
  border-radius: 5px;
  border: 1px solid #b1b5cd;
  box-sizing: border-box;
}

div.com-name{
  clear: both;
  width: 100%;
  position: relative;
  box-sizing: border-box;
}
/* 업체명 양쪽 라인 */
p.com-name::after {
  position: absolute;
  left: 0;
  top: 19px;
  content: "";
  display: block;
  clear: both;
  width: 257px;
  border-top: 1px solid #6573ee;
  box-sizing: border-box;
}
p.com-name::before {
  position: absolute;
  right: 0;
  top: 19px;
  content: "";
  display: block;
  clear: both;
  width: 257px;
  border-top: 1px solid #6573ee;
  box-sizing: border-box;
}

/** 텍스트 그라데이션 효과 **/
.txt-gradient {
  padding-top: 10px;
  margin: 13px auto 0;
  font-family: NotoSansKR-Regular;
  background: linear-gradient(to right, #ff9900, #ff66cc); /* 가로 그라데이션 적용 */
  -webkit-background-clip: text; /* 텍스트에 배경 클리핑 */
  background-clip: text;
  color: transparent; /* 텍스트 투명하게 설정하여 배경이 텍스트로 보이도록 함 */
}

#toTop {
  z-index: 480;
  display: inline;
  position: fixed;
  right: 4%;
  bottom: 20px;
  width: 52px;
  cursor: pointer;
}

#toTop img {
  width: 100%;
}

/** 모바일 사이즈 **/
@media screen and (min-width: 640px) {
}

@media screen and (max-width: 640px) {
  ._modis {
    display: none;
  }

  ._mshow {
    display: inline-block;
  }
  
  .header-logo {
    width: auto;
  }  
  .header-logo img {width: 150px;}
  
  .com-section div {
    /*font-size: 80%;*/
  }

  .qrcode-section .flex {
	  display: block;  /* div가로 나열 해제 */
	}
}