@charset "utf-8";

/* 모바일 터치 피드백 효과 삭제 */
* {-webkit-tap-highlight-color: transparent;}

/***************************************************************************/
/*				           데스크톱/Large Devices (992px 이상)		                 /
/***************************************************************************/
html {font-size: 17px;}
body {font-size: 1rem;line-height: 1.6;overflow-x: hidden;} 

/* 위로가기 버튼 */
#scrollToTopBtn{position:fixed;bottom:20px;right:10px;z-index:99;border:none;outline:none;display: flex;justify-content: center;align-items: center;text-align: center;background-color:#494b53;color:white;font-weight:600;cursor:pointer;width:50px;height:50px;border-radius: 50%;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);font-size:16px;display:none;opacity:0;transition:opacity 0.3s, transform 0.3s;transform:translateY(10px);}
#scrollToTopBtn.show{display:block;opacity:1;transform:translateY(0);}

/* 컨텐츠 */
section {width:100%;border-bottom: 1px dotted rgba(0,0,0,0.07);}
section:nth-child(odd) {background-color: #f8f9fa;}
section:nth-child(3) {background-color: #fff9fb;}

.logo {width:350px;margin:-30px auto 60px;}
.logo img {width:100%;}
.main-img {width:60%;margin:0 auto;text-align:center;}
.main-img img {width:100%;}

.common-box {width:100%;max-width:1300px;margin:0 auto;padding:120px 15px;}
.common-box h1 {font-size:3rem;text-align:center;font-family:"Paperozi", sans-serif;}
.common-box h2 {font-size:3rem;text-align:center;font-family:"Paperozi", sans-serif;}
.common-box h3 {font-size:3rem;text-align:center;font-family:"Paperozi", sans-serif;}
.common-box .txtsub {margin-top:30px;font-size:1.05rem;color:#666;text-align:center;}
.cred {color:#d90429;}

.grid-container1 {margin-top:40px;display:grid;width:100%;grid-template-columns:repeat(3,1fr);gap:40px;padding:10px 0;}
.grid-item1 {display:flex;flex-direction:column;align-items:center;text-align:center;}
.grid-item1 img {width:100%;height:auto;border:1px solid #efefef;aspect-ratio:4/3;object-fit:cover;border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,0.03);}
.grid-item1 p {margin-top:15px;font-size:1.2rem;font-weight:600;}

.grid-container2 {margin-top:30px;display:grid;width:100%;grid-template-columns:repeat(5,1fr);gap:50px 20px;padding:10px 0;}
.grid-item2 {display:flex;flex-direction:column;align-items:center;text-align:center;}
.grid-item2 img {width:100%;height:auto;border:1px solid #efefef;aspect-ratio:1/1;object-fit:cover;border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,0.03);}
.grid-item2 p {margin-top:15px;font-size:1rem;line-height:1.3;font-weight:400;}

.btn-more {display: block; margin:10px auto 0;padding:8px 28px; background-color: #d90429; color: #ffffff; border: none; font-size:0.9rem;border-radius: 50px;font-weight: 600; cursor: pointer; transition: background 0.3s, transform 0.2s; box-shadow: 0 4px 6px rgba(0,0,0,0.1);}
.btn-more:hover {background-color: #ef233c; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.1);}
.btn-more:active {transform: translateY(-1px);}

.notice-box {width:100%;max-width:1000px;margin:0 auto;}
.notice-box h4 {margin-top:60px;font-size:1.6rem;font-family:"Paperozi", sans-serif;}
.notice-box .tip {margin-top:10px;font-size:1.05rem;color:#666;}

.purchase-btn {display:block;width:300px;height:80px;color:#fff;border-radius:999px;font-weight:700;background-color:#d90429;font-size:2rem;margin:50px auto 0;padding:8px 28px;text-align:center;line-height:68px;transition:background 0.3s, transform 0.2s;}
.purchase-btn:active {transform:translateY(-1px);}
.purchase-btn:hover {background-color:#ef233c;transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,.1);}
.desc-img {width:60%;margin:0 auto;text-align:center;}
.desc-img img {width:100%;}

.thumbnail {width:100%;max-width:1000px;margin:50px auto 0;}
.thumbnail img {width:100%;height:auto;border:1px solid #efefef;aspect-ratio:4/3;object-fit:cover;border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,0.03);}
.thumbnail p {margin-top:20px;font-size:1.8rem;font-weight:600;text-align:center;}

footer {width:100%;background:#d3d6d9;padding:50px 0;text-align:center;}


/***************************************************************************/
/*				        모바일/Small Devices (991px 이하)	    	                     /
/***************************************************************************/
@media (max-width: 991px) {

.common-box {padding:40px 15px;}
.common-box h1 {font-size:2rem;}
.common-box h2 {font-size:1.7rem;}
.common-box h3 {font-size:1.7rem;}
.common-box .txtsub {margin-top:20px;font-size:0.86rem;line-height:1.4;text-align:left;}

.grid-container1 {margin-top:20px;grid-template-columns:repeat(2,1fr);gap:20px;}
.grid-item1 p {margin-top:10px;font-size:0.9rem;}

.grid-container2 {margin-top:20px;grid-template-columns:repeat(3,1fr);gap:20px 10px;}
.grid-item2 p {margin-top:10px;font-size:0.8rem;line-height:1.3;}

.btn-more {margin:6px auto 0;padding:6px 15px;font-size:0.7rem;}
.btn-more:hover {transform: translateY(0);}
.btn-more:active {transform: translateY(0);}

.notice-box h4 {margin-top:20px;font-size:1.1rem;}
.notice-box .tip {margin-top:10px;font-size:0.86rem;line-height:1.4;}

.thumbnail {margin:20px auto 0;}
.thumbnail p {margin-top:15px;font-size:1.1rem;}

footer {padding:20px 0;font-size:0.8rem;}

}