.title-how { width: 100%; height: 300px; background-image: url('/img/bg-how.jpg'); background-size: cover; background-color: #E9E9E9;  border-radius: 15px; background-position: center; background-repeat: no-repeat; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 20px; }

.title-how h3 { font-size: 1.6rem; margin:0 0 15px; padding: 0;  font-weight: 700; color: #29a9c6; }
.title-how h3 br {display: none;}
.title-how h4 { font-size: 1.1rem; font-weight: 400; margin: 0; padding: 0; }

.how-to-use { max-width: 900px; margin: 50px auto;}
.how-to-use h3{ text-align: center; font-size: 1.5rem; margin-bottom: 80px;}
.how-to-use ul { list-style: none; padding: 0; }
.how-to-use ul li.step { display: flex; align-items: center; justify-content: space-between; background: white; padding: 0; margin-bottom: 30px; border-radius: 10px; }
.how-to-use ul li.step .text { width: 50%; }
.how-to-use ul li.step .text h5 { font-size: 1.3rem; color: #333; margin: 0; }
.how-to-use ul li.step .text p { font-size: 1rem; color: #666; margin: 5px 0 0; }
.how-to-use ul li.step .image { width: 40%; }
.how-to-use ul li.step .image img { width: 100%; border-radius: 10px; }

/* 홀수 단계: 왼쪽 글, 오른쪽 이미지 */
.how-to-use ul li.step-odd .text { order: 1; }
.how-to-use ul li.step-odd .image { order: 2; }

/* 짝수 단계: 왼쪽 이미지, 오른쪽 글 */
.how-to-use ul li.step-even .image { order: 1; }
.how-to-use ul li.step-even .text { order: 2; }

/* 모바일 화면 대응 (모든 단계: 상단 이미지, 하단 텍스트) */
@media (max-width: 768px) {
.title-how { width: 100%; height: 200px; background-image: url('/img/bg-how.jpg'); background-size: cover; background-color: #E9E9E9;  border-radius: 0; background-position: center; background-repeat: no-repeat; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 20px; }

.title-how h3 { font-size: 1.4rem; margin:0 0 15px; padding: 0;  font-weight: 700; color: #29a9c6; }
.title-how h3 br {display: block;}
.title-how h4 { font-size: 1rem; font-weight: 400; margin: 0; padding: 0; }	
.how-to-use h3{ text-align: center; font-size: 1.5rem; margin-bottom: 40px;}
.how-to-use ul li.step  { flex-direction: column; text-align: center; border-bottom: 1px dotted var(--line-color); padding-bottom: 30px;} 
.how-to-use ul li.step  .image { order: 1; width: 100%; } 
.how-to-use ul li.step  .text { order: 2; width: 100%; margin-top: 15px; } 
}

.why-tourbridge { padding: 60px 20px; text-align: center; }
.why-tourbridge h2 { font-size: 1.5rem; margin-bottom: 40px; font-weight: 700; }
.reason-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.reason-box { flex: 1 1 calc(25% - 20px); background-color: #fff; padding: 30px 15px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); display: flex; flex-direction: column; align-items: center; }
.icon img {width: 60px; margin-bottom: 10px; }
.reason-box p { font-size: 16px; line-height: 1.4; font-weight: 500; }
/* 반응형 */
@media (max-width: 1024px) {
  .reason-box { flex: 1 1 calc(50% - 20px); }
}

@media (max-width: 600px) {
  .reason-box { flex: 1 1 100%; }
}


.title-coupon { width: 100%; height: 300px; background-image: url('/img/bg-coupon.jpg'); background-size: cover; background-color: #E9E9E9;  border-radius: 15px; background-position: center; background-repeat: no-repeat; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 20px; }

.title-coupon h3 { font-size: 1.6rem; margin:0 0 15px; padding: 0;  font-weight: 700; color: #fff; }
.title-coupon h3 br {display: none;}
.title-coupon h4 { font-size: 0.9rem; font-weight: 400; margin: 0; padding: 0; color: #3b6775; }
.coupon-h3 {text-align: center; font-size: 2.5rem; margin-bottom: 40px;}
.coupon-container {display: flex; flex-wrap: wrap; gap: 20px; max-width: 1200px; margin: 0 auto; padding: 20px 0; justify-content: space-between;}
.coupon {flex: 1 1 calc(50% - 20px); display: flex; border: 2px solid #ff4b27; border-radius: 8px; overflow: hidden;}
.coupon ul{margin: 10px 0 0 0px; padding: 8px 8px 8px 18px; border-top: 1px dashed #ddd;}
.coupon ul li{font-size: 0.75rem;}
.coupon-placeholder {visibility: hidden;}
.coupon-container h3{ text-align: center; font-size: 1.5rem; margin-bottom: 40px;}
.coupon.blue {border-color: #3498db;}
.coupon.while {border-color: #FFFFFF;}
.coupon.gray {border-color: #ADADAD;}
.coupon.dark {border-color: #dbdde1;}
.coupon.gray2 {border-color: #ADADAD;opacity: 0.5;}

.coupon.gray2 .coupon-right {
    border-left-color: #ADADAD;
}

.coupon-left {flex: 2; padding: 20px; display: flex; flex-direction: column; justify-content: center;}
.coupon-icon {width: 40px; height: 40px; margin-bottom: 10px;}
.coupon-title {font-size: 18px; font-weight: bold; margin-bottom: 8px;}
.coupon-code {font-size: 0.7rem; margin-bottom: 5px;}
.coupon-info {font-size: 0.75rem; color: #666;}

.coupon-etc { 
	font-size: 13px; color: #666;
	padding: 10px 0px 5px;
    border-top: 1px dashed #ddd;

}


.coupon-info strong{color:#000;}
.coupon-right {flex: 1; display: flex; align-items: center; justify-content: center; border-left: 2px dashed #ff4b27; background: #fff;}
.coupon-down {cursor: pointer;}
.coupon.blue .coupon-right {border-left-color: #3498db;}
.coupon.gray .coupon-right {border-left-color: #ADADAD;}
.coupon.dark .coupon-right {border-left-color: #dbdde1;}
.coupon.dark .coupon-title, .coupon.dark .coupon-code, .coupon.dark .coupon-info {color: #dbdde1;}
.download-icon svg {width: 32px; height: 32px; fill: #ff4b27;}
.coupon.blue .download-icon svg {fill: #3498db;}
.coupon.gray .download-icon svg {fill: #ADADAD;}
.coupon_notice{}
.coupon_notice h5{font-size: 1.1rem;}
.coupon_notice ul li{font-size: 0.85rem; margin-bottom: 5px;}


@media (max-width: 768px) {
.title-coupon { width: 100%; height: 200px; background-image: url('/img/bg-coupon.jpg'); background-size: cover; background-color: #E9E9E9;  border-radius: 0; background-position: center; background-repeat: no-repeat; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 20px; }	
  .coupon {flex: 1 1 100%;}
.coupon-h3 {text-align: center; font-size: 1.5rem; margin-bottom: 20px;}
.title-coupon h3 { font-size: 1.4rem; margin:0 0 15px; padding: 0;  font-weight: 700; color: #fff; }
.title-coupon h3 br {display: none;}
.title-coupon h4 { font-size: 0.8rem; font-weight: 400; margin: 0; padding: 0; color: #3b6775; }
}





.terms-container { max-width: 1000px; margin: 0 auto; background-color: #fff; font-size: 0.9rem;   }
.terms-container .header { text-align: center; margin-bottom: 30px; padding-bottom: 20px;  }
.terms-container .header h1 { font-size: 1.5rem; font-weight: bold; color: var(--point-color); }
.terms-container .chapter { margin-bottom: 30px; }
.terms-container .chapter-title { font-size: 1.1rem; font-weight: bold; color: var(--point-color); margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #e0e0e0; }
.terms-container .article { margin-bottom: 20px; padding: 0 10px; }
.terms-container .article-title { font-size: 1rem; font-weight: bold; margin-bottom: 10px; color: #333; }
.terms-container .article-content { padding-left: 15px; }
.terms-container .article-content p { margin-bottom: 10px; }
.terms-container .article-content ol, .terms-container .article-content ul { padding-left: 20px; margin: 10px 0; }
.terms-container .article-content li { margin-bottom: 5px; }
.terms-container .article-content .item-title { font-weight: bold; }

.privacy-container { max-width: 1000px; margin: 0 auto; padding: 40px 20px; background-color: #fff; font-size: 0.9rem;  }
.privacy-header { margin-bottom: 30px; text-align: center; }
.privacy-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 20px; color: var(--point-color); }
.privacy-intro { font-size: 1rem; margin-bottom: 30px; line-height: 1.8; }
.privacy-section { margin-bottom: 40px; }
.section-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 15px; color: var(--point-color); border-bottom: 1px solid #eaeaea; padding-bottom: 10px; }
.section-content { font-size: 0.9rem; margin-bottom: 15px; }
.item-list { padding-left: 20px; margin: 10px 0 15px; }
.sub-title { font-weight: 700; margin: 15px 0 5px; }
.sub-list { padding-left: 20px; margin: 5px 0 10px; }
.emphasis { font-weight: 700; }