.content_wrap { padding:20px; }
.bon-tab-bar {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 100;
background-color: #ffffff;
border-bottom: 1px solid #eeeeee;
width: 100%;
}
/* ¾ÈÂÊ ÅÇ ¸®½ºÆ® */
ul.bon-tab-list {
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 0;
display: flex;
justify-content: space-around;
list-style: none;
}
ul.bon-tab-list li {
display: flex;
justify-content: center;
align-items: center;
font-size: 15px;
height: 50px;
cursor: pointer;
position: relative;
width: 100%; /* ¸ð¹ÙÀÏ¿¡¼­ 3µîºÐ ²Ë Â÷°Ô */
}
/* ÅÇ ¾ÈÀÇ ¸µÅ©°¡ ¿µ¿ª ÀüÃ¼¸¦ Â÷ÁöÇÏµµ·Ï ¼³Á¤ */
ul.bon-tab-list li a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-decoration: none;
font-weight: 500;
}
/* È°¼ºÈ­ »óÅÂ (±âÁ¸ li.on¿¡¼­ a ÅÂ±× »ö»ó º¯°æÀ¸·Î ÀüÈ¯) */
ul.bon-tab-list li.on a { font-weight: bold; }
.content_wrap { }
.bon-area { }
.bon-area__margin {
margin-bottom:50px !important; /* ´ÙÀ½ ÄÁÅÙÃ÷¿ÍÀÇ °Å¸® Á¶Àý */
overflow:hidden;
}
.bon-area h3 {
font-size: 22px;
margin-bottom:40px;
text-align: center;
}
.bon-area__intro,
.bon-area__services,
.bon-area__contact {
margin-top: 50px;        /* [µðÀÚÀÎ] Æò¼Ò ±×³É ½ºÅ©·Ñ ÇÒ ¶§ À§ ±¸¿ª°úÀÇ ½Ã¿øÇÑ ¿©¹é */
scroll-margin-top: 130px; /* [±â´É] ¸Þ´º Å¬¸¯ÇØ¼­ ¼ø°£ ÀÌµ¿ÇÒ ¶§ ¸ØÃß´Â ¿©À¯·Î¿î À§Ä¡ */
margin-bottom: 50px;     /* ¾Æ·¡ÂÊ ¿©¹éÀº ±âÁ¸ ±×´ë·Î À¯Áö */
}
/* ¾÷Ã¼ ¼Ò°³ ¿µ¿ª µðÀÚÀÎ ¹®±¸ Á¤µ· */
.bon-area__intro {
text-align: center;
/*background-image: url(/img/bon_data_2.png);*/
background-size:300px;
background-repeat: no-repeat;
background-position: center 150px;
transition: background-position 0.4s ease;
}
.bon-area__intro h3 {
font-size:20px;
color:#a37453;
margin-bottom: 10px;
}
.bon-area__intro h2 {
font-size: 28px;
line-height: 1.4;
margin-bottom: 30px;
}
.intro-text { margin: 30px auto 50px; }
.intro-text p {
font-size: 15px;
line-height: 1.6;
word-break: keep-all;
margin: 0 0 15px 0;
}
.intro-features {
padding: 20px;
background-color: #f4efeb;
border-radius: 10px;
text-align: left;
max-width: 500px;
margin: 0 auto;
}
.intro-features li {
	display: flex;
line-height: 1.6;
margin-bottom: 12px;
}
.intro-features li:last-child { margin-bottom: 0; }
.intro-features li strong {
color:#a37453;
display: inline-block;
min-width: 130px;
}
.bon-area__services { }
.bon-area__services .service-intro {
font-size: 14px;
color: #666666;
text-align: center;
line-height: 1.6;
margin-bottom: 30px;
word-break: keep-all;
}
.service-text-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px 12px;
}
.service-text-list li {
display: flex;
align-items: center;
background-color: #f8f9fa;
border: 1px solid #eaeaea;
border-radius: 6px;
height: 50px;
padding: 0 15px;
box-sizing: border-box;
}
.service-text-list li span {
font-size: 14px;
color: #333333;
}
/* ½º¿ÍÀÌÇÁ */
.service-list {
width: 100%;
overflow: hidden;
margin:20px auto;
}
.service-list ul.swiper-wrapper {
margin: 20px auto;
padding: 0;
list-style: none;
}
.service-list .swiper-slide { text-align: center; }
.service-list .service-img img {
width: 100%;
max-width: 400px;
height: auto;
border-radius: 15px;
}
.service-list .service-title {
display: block;
font-size: 16px;
font-weight: bold;
margin: 15px auto 0;
padding: 8px 15px;
max-width: 180px;
border-radius: 4px;
text-align: center;
}
/* ÀÌ¿ë¾È³»ÁÖÀÇ»çÇ× ¿µ¿ª */

.bon-area__contact { }
.notice-list { margin-bottom: 40px; }
.notice-list li {
font-size: 14px;
line-height: 1.6;
color: #444;
margin-bottom: 14px;
position: relative;
padding-left: 12px;
word-break: keep-all;
}
.notice-list li::before {
 content: '';
position: absolute;
left: 0;
top: 9px;
 width: 4px;
height: 4px;
background-color: #333;
border-radius: 50%;
}
.notice-list li strong {
color: #111;
font-weight: 600;
}
.map-area {margin:30px auto; }
.map-area h4 {
font-size:18px;
margin:30px auto;
}
.map-area img {
width:350px;
border-radius: 20px;
transition: width 0.4s ease;
}
.contact-info-block {
}
.contact-info-block ul {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 16px;
}
.contact-info-block li {
display: flex;
align-items: flex-start;
position: relative;
padding-left: 15px;
}
 .contact-info-block li::before {
 content: '';
 position: absolute;
 left: 2px;
 top: 7px;
 width: 3px;
 height: 3px;
 background-color: #333;
 border-radius: 50%;
}
.contact-info-block li strong {
display: inline-block;
width: 70px;
color: #111;
font-weight:bold;
flex-shrink: 0;
}
.contact-buttons {
display: flex;
gap: 40px;
justify-content: center;
margin:40px auto 0;
}
.contact-buttons img { width:40px; }
.footer_each button img {
width:25px;
margin-right:10px;
}

/* @media */
@media screen and (min-width:800px) {
 .content_wrap {
width:80%;
}
 .bon-area__intro h3 {
 font-size: 24px;
 color: #a37453;
 margin-bottom: 10px;
}
.bon-area__intro h2 {
 font-size: 40px;
 line-height: 1.4;
}
.bon-area__intro {
 background-size: 400px;
 background-position: center 200px;
}
.intro-text {
}
 .intro-features {
 padding: 30px;
 max-width: 600px;
}
.intro-features li strong {
 min-width: 150px;
}
 .service-list {
 overflow: hidden; 
}
 .service-list .service-img img {
 max-width: 100%;
 transition: transform 0.3s ease;
}

 .service-list .service-title {
 font-size: 16px;
 margin-top: 20px;
 padding: 10px 25px;
 max-width: 200px;
}
 .notice-wrap {
 padding: 40px 35px;
}
 .notice-wrap h3 {
 font-size: 24px;
}
 .notice-list li {
 font-size: 15px;
}
.map-area img {
width:500px;
}
}
