:root {
  --black: rgb(0 0 0);
  --dark-navy: rgb(26 28 60);
  --navy: rgb(45 54 77);
  --navy-bg: rgb(86 94 115);
  --gray: rgb(167 167 167);
  --white: rgb(255 255 255);
  --yellow: rgb(255 181 0);
  --light-yellow: rgb(255 209 98);
}

@keyframes rotate {
  0% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(-20%);
  }

  50% {
    transform: translateY(-40%);
  }

  75% {
    transform: translateY(-60%);
  }

  100% {
    transform: translateY(-80%);
  }
}

.intro {
  text-align: center;
}

.type {
  font-size: 24px;
  line-height: 2em;
  height: 2em;
  overflow: hidden;
}

.type_list {
  animation: rotate 14s infinite;
  list-style: none;
}

#navbar {
	margin : 0;
  	color : white;
}

.mainImg {
	margin : auto;
	text-align : center;
}

#contact_details {
	color : white;
	padding : 10px;
	background-color : #444;
}

.text-center a {
	background-color : transparent;
    border : none;
  	border-radius : 10px;
}

.주문하기 {
	font-size : 38px;
	font-family: 'Dongle', sans-serif;
	text-align : center;
	width : 100%;
    height : 40px;
  	padding : 10px;
  	margin-bottom : 0px;
}

.주문하기p {
    font-size : 20px;
	font-family: 'Dongle', sans-serif;
	text-align : center;
  	margin : 0px;
}

.검색하기 {
	width : 100%;
}

.서비스가격표Btn {
	width : 80%;
  	margin-bottom : 15px;
    border-radius: 6px;
    border: solid 1px rgba(0,0,0,.15);
    background-color: #03c75a;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	text-decoration:none;
	text-shadow:0px 1px 0px #5b8a3c;
}

.addfundForm {
	text-align : center;
}

.methodCustomLabel {
	font-size : 15px;
  	text-align : center;
  	margin : 10px;
}

.충전하기 {
	width : 100%;
	text-align : center;
  	display: block;
    padding: 10px 0 10px;
    border-radius: 6px;
    border: solid 1px rgba(0,0,0,.15);
    background-color: #fee500;
    font-size: 14px;
    font-weight: 400;
    line-height: 13px;
    color: black;
}

.login창 {
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    padding : 10px;
    box-sizing: border-box;
    padding: 24px 24px 0 24px;
}
.login창id, .login창pw {
	position: relative;
    display: block;
    height: 100%;
    border: 1px solid #dadada;
    padding: 17px 18px 17px 19px;
    border-radius: 6px;
    box-sizing: border-box;
    text-align: left;
}

.login버튼 {
	display: block;
    width: 100%;
    padding: 17px 0 15px;
    border-radius: 6px;
    border: solid 1px rgba(0,0,0,.15);
    background-color: #fee500;
    font-size: 22px;
    font-weight: 400;
    line-height: 26px;
    color: black;
}

.test로그인 {
	display: block;
    width: 100%;
    margin-bottom : 10px;
    padding: 10px;
    border-radius: 6px;
    border: solid 1px rgba(0,0,0,.15);
    background-color: #fee500;
    font-size: 15px;
    font-weight: 400;
    color: black;
}

.loginBox {
	display : flex;
  	justify-content: space-between;
}

.package_details {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    font-size: 10px;
    opacity: 1;
    text-align : center;
}
.package_heading {
	padding: 3px;
    font-weight: bold;
    color: #000;
}
.package_body {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 8px;
    color: #FFF;
}
.package_body img {
	width : 30px;
    height : 30px;
}
@media (min-width: 768px){
.package_details {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    font-size: 12px;
    opacity: 1;
    text-align : center;
}
.package_heading {
	padding: 10px;
    font-weight: bold;
    color: #000;
}
.package_body img {
	width : 50px;
    height : 50px;
}
}

.계좌번호복사 {
	border: solid 1px rgba(0,0,0,.15);
    background-color: #fee500;
    text-align: center;
}

/* .tpt {
	font-family: 'Dongle', sans-serif;
    font-size: 20px;
    font-weight: bolder;
} */


/* 문의하기 */
/*.sketchy {
	margin-top: 10px;
    padding: 5px;
    display: inline-block;
    border: 3px solid #f9f9f929;
    font-size: 12px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3ch;
    background: #ffffff00;
    position: relative;
} */
    
.serviceAllButton {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='-39 1 511 511.99897' xmlns='http://www.w3.org/2000/svg' fill='rgb(26,28,60)'%3E%3Cdefs/%3E%3Cpath d='M396.367188 369.371094c-20.109376-12.152344-48.074219-22.054688-80.933594-28.683594-22.523438-29.804688-58.25-49.101562-98.402344-49.101562s-75.878906 19.300781-98.402344 49.101562c-32.820312 6.625-60.757812 16.507812-80.863281 28.644531-2.296875 1.386719-4.445313 2.78125-6.476563 4.183594V210.027344l154.289063-78.820313c5.148437-2.628906 8.390625-7.925781 8.390625-13.707031s-3.242188-11.078125-8.390625-13.707031L31.289062 24.972656v-9.578125C31.289062 6.890625 24.394531 0 15.894531 0S.5 6.890625.5 15.394531v405c0 .097657.011719.191407.015625.289063C.507812 421.023438.5 421.359375.5 421.691406c0 26.851563 24.519531 50.773438 69.046875 67.355469C109.285156 503.847656 161.664062 512 217.03125 512c31.320312 0 64.132812-2.898438 92.390625-8.164062 77.734375-14.472657 124.144531-45.183594 124.144531-82.144532 0-13.613281-6.453125-33.738281-37.199218-52.320312zm6.410156 52.320312c0 3.476563-1.605469 7.300782-4.746094 11.277344-13.730469-11.992188-33.550781-22.308594-58.3125-30.285156-.878906-8.914063-2.714844-17.550782-5.398438-25.8125 45.046876 12.789062 68.457032 31.183594 68.457032 44.820312zm-64.121094 13.167969c13.710938 5.011719 25.171875 10.796875 33.773438 17.015625-11.59375 5.933594-26.414063 11.558594-44.304688 16.261719 5.058594-10.535157 8.621094-21.746094 10.53125-33.277344zM99.746094 376.867188c-2.6875 8.265624-4.523438 16.910156-5.402344 25.832031-24.761719 7.980469-44.699219 18.347656-58.421875 30.375-3.019531-3.890625-4.632813-7.734375-4.632813-11.382813-.003906-13.644531 23.40625-32.035156 68.457032-44.824218zM144.738281 117.5L31.289062 175.457031V59.542969zM61.496094 452.019531c8.648437-6.277343 20.171875-12.105469 33.878906-17.128906 1.90625 11.59375 5.457031 22.804687 10.535156 33.332031-9.0625-2.371094-17.632812-5.050781-25.617187-8.023437-6.894531-2.570313-13.179688-5.320313-18.796875-8.179688zm86.757812 24.554688c-15.300781-17.03125-23.726562-38.859375-23.726562-61.695313 0-51.007812 41.496094-92.503906 92.503906-92.503906s92.503906 41.496094 92.503906 92.503906c0 21.027344-7.304687 41.636719-20.570312 58.035156-.859375 1.0625-1.539063 2.210938-2.070313 3.402344-22.210937 3.140625-46.835937 4.898438-69.863281 4.898438-23.90625 0-47.125-1.59375-68.777344-4.640625zm0 0'/%3E%3Cpath d='M254.625 413.472656c-.558594-.042968-1.085938-.242187-1.535156-.574218-.394532-.296876-.707032-.6875-.910156-1.132813-3.507813-7.746094-12.628907-11.183594-20.375-7.675781-7.742188 3.507812-11.179688 12.628906-7.671876 20.375 2.335938 5.160156 5.96875 9.683594 10.503907 13.078125 5.164062 3.867187 11.292969 6.160156 17.730469 6.632812.382812.027344.765624.042969 1.144531.042969 7.988281 0 14.738281-6.171875 15.335937-14.265625.625-8.480469-5.742187-15.855469-14.222656-16.480469zm0 0M203.050781 376.625c-.558593-.039062-1.089843-.238281-1.53125-.570312-.398437-.296876-.710937-.6875-.914062-1.132813-3.507813-7.746094-12.625-11.183594-20.375-7.675781-7.742188 3.503906-11.179688 12.625-7.671875 20.371094 2.335937 5.160156 5.964844 9.683593 10.503906 13.082031 5.164062 3.867187 11.296875 6.160156 17.726562 6.632812.386719.027344.765626.042969 1.148438.042969 7.988281 0 14.738281-6.171875 15.335938-14.265625.625-8.480469-5.746094-15.859375-14.222657-16.484375zm0 0M255.039062 358.859375c-.558593-.039063-1.089843-.238281-1.535156-.574219-.394531-.292968-.707031-.6875-.910156-1.132812-3.507812-7.746094-12.628906-11.179688-20.375-7.675782-7.742188 3.507813-11.179688 12.628907-7.671875 20.375 2.335937 5.160157 5.96875 9.683594 10.503906 13.078126 5.164063 3.867187 11.292969 6.160156 17.726563 6.632812.386718.027344.765625.042969 1.144531.042969 7.988281 0 14.742187-6.171875 15.335937-14.265625.625-8.480469-5.742187-15.855469-14.21875-16.480469zm0 0'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 609.629 609.629' xmlns='http://www.w3.org/2000/svg' fill='rgb(26,28,60)' %3E%3Cdefs/%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath d='M579.142 419.214V354.96c.034-9.059-3.988-17.659-10.963-23.44l-47.967-40.042c-5.481-4.551-12.383-7.039-19.508-7.031h-5.69l-54.185-162.566h16.389c16.834 0 30.481-13.647 30.481-30.481s-13.647-30.481-30.481-30.481H101.604c-22.446 0-40.642 18.196-40.642 40.642 0 11.223 9.098 20.321 20.321 20.321h10.16v81.283h-20.32c-16.834 0-30.481 13.647-30.481 30.481v83.153c-12.135 4.29-20.267 15.741-20.321 28.612v12.03C8.186 361.729.053 373.18 0 386.051v60.962c0 16.834 13.647 30.481 30.481 30.481 0 39.28 31.843 71.123 71.123 71.123s71.123-31.843 71.123-71.123h294.651c-.041 33.771 23.671 62.914 56.744 69.741s66.388-10.545 79.722-41.571 3.011-67.152-24.702-86.45zm-104.52-131.719c-9.312 4.468-15.72 13.356-17.019 23.603l-82.543-82.533 18.218-18.218c3.85-3.987 3.795-10.324-.124-14.243s-10.256-3.974-14.243-.124l-50.802 50.802c-2.641 2.551-3.701 6.329-2.771 9.881s3.704 6.327 7.256 7.256c3.552.93 7.33-.129 9.881-2.771l18.218-18.218 96.524 96.524v46.595c0 11.223-9.098 20.321-20.321 20.321h-81.283c-11.223 0-20.321-9.098-20.321-20.321v-60.962c0-22.446-18.196-40.642-40.642-40.642h-81.283c-5.611 0-10.16-4.549-10.16-10.16v-60.962c0-16.834-13.647-30.481-30.481-30.481h-20.321V121.88H419.42zm-261.254 17.273h81.283c11.223 0 20.321 9.098 20.321 20.321v18.492l-162.566-27.098V203.164h20.321c5.611 0 10.16 4.549 10.16 10.16v60.962c0 16.835 13.647 30.482 30.481 30.482zM81.283 101.56c0-11.223 9.098-20.321 20.321-20.321h355.613c5.611 0 10.16 4.549 10.16 10.16s-4.549 10.16-10.16 10.16H81.283zm50.802 20.321v193.047h-20.321V121.881zM60.962 233.645c0-5.611 4.549-10.16 10.16-10.16h20.321v20.321H60.962zm0 30.481h30.481v50.802H60.962zm-20.32 81.283c0-5.611 4.549-10.16 10.16-10.16h90.6l173.57 28.927v21.875c.042 7.156 1.992 14.17 5.649 20.321H202.395c-14.788-.024-28.494-7.757-36.161-20.402-5.531-9.3-13.411-16.982-22.851-22.272-9.395-5.322-20.008-8.122-30.806-8.128H40.642zm60.962 182.887c-28.057 0-50.802-22.745-50.802-50.802s22.745-50.802 50.802-50.802 50.802 22.745 50.802 50.802c-.034 28.043-22.759 50.768-50.802 50.802zm368.822-71.123H169.678c-9.078-30.003-36.729-50.524-68.075-50.524s-58.996 20.522-68.075 50.524H30.48c-5.611 0-10.16-4.549-10.16-10.16v-60.962c0-5.611 4.549-10.16 10.16-10.16h82.096c7.293.009 14.46 1.899 20.808 5.487 6.359 3.556 11.668 8.725 15.393 14.987 11.35 18.778 31.675 30.274 53.616 30.329h234.502c22.446 0 40.642-18.196 40.642-40.642v-71.123c0-5.611 4.549-10.16 10.16-10.16h13.005c2.367 0 4.66.819 6.492 2.317l48.008 40.073c2.326 1.918 3.656 4.788 3.617 7.803v54.46c-18.055-5.412-37.521-3.419-54.104 5.539-16.582 8.957-28.919 24.145-34.289 42.212zm68.074 71.123c-28.057 0-50.802-22.745-50.802-50.802s22.745-50.802 50.802-50.802 50.802 22.745 50.802 50.802c-.034 28.043-22.759 50.768-50.802 50.802z'/%3E%3Cpath d='M538.5 447.013c-16.834 0-30.481 13.647-30.481 30.481s13.647 30.481 30.481 30.481 30.481-13.647 30.481-30.481-13.647-30.481-30.481-30.481zm0 40.641c-5.611 0-10.16-4.549-10.16-10.16s4.549-10.16 10.16-10.16 10.16 4.549 10.16 10.16-4.549 10.16-10.16 10.16zM101.604 447.013c-16.834 0-30.481 13.647-30.481 30.481s13.647 30.481 30.481 30.481 30.481-13.647 30.481-30.481-13.647-30.481-30.481-30.481zm0 40.641c-5.611 0-10.16-4.549-10.16-10.16s4.549-10.16 10.16-10.16 10.16 4.549 10.16 10.16-4.549 10.16-10.16 10.16z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(0% - 100px), calc(100% - 12px);
  background-color: var(--light-yellow);
  color: var(--dark-navy);
  cursor: pointer;
  display: block;
  position: relative;
  border: 2px solid var(--light-yellow);
  border-radius: 10px;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 12px 24px 12px 12px;
  width: 100%;
  text-align: center;
  overflow: hidden;
  letter-spacing: 0.08em;
  text-shadow: 0 0 1px rgb(0 0 0 / 20%), 0 1px 0 rgb(0 0 0 / 20%);
  white-space: nowrap;
  transition: background-position 2s ease;
  text-decoration : none;
}
.serviceAllButton:hover {
	background-position: calc(25% - 30px), calc(100% + 100px);
    text-decoration : none;
    color : black;
}
    
/* 네비게이션 메뉴 a 태그 호버 시 색상 및 배경 변화 없애기 */
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
  color: inherit !important;           /* 기존 텍스트 색상을 유지 */
  background-color: transparent !important; /* 배경색 제거 */
  text-decoration: none !important;    /* 밑줄 등 효과 없애기 */
}
    
.login-links {
  display: flex;
  justify-content: flex-end;  /* 오른쪽 정렬 */
  gap: 12px;                   /* 링크 사이 간격 */
  margin-bottom: 12px;         /* 버튼 위 여백 */
}
.login-links a {
  display: inline-block;
  text-decoration: none;
}
    
  #tv {
  text-align : center;
  padding: 5px 10px;
  margin:auto;
  position: relative;
  width: 100%;
  background: rgba(0, 0, 0, .075);
  border-radius: 3px;
  color: black;
  box-shadow: 5px 5px rgba(0,0,0,.15);
  transition: all .4s ease;
  }}
}



/* 네비바와 배너를 한 장의 사진으로 연결 */
body:has(.seamless-banner) .navbar-default {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  margin-bottom: 0;
}

.seamless-banner {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

.seamless-banner::before {
  content: "";
  position: absolute;
  top: -66px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;

  background-image: url("https://i.ibb.co/PwVCvzm/banner.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* 모바일 메뉴를 열면 네비바 전체를 단색으로 표시 */
@media (max-width: 767px) {

  body:has(.seamless-banner)
  .navbar-default:has(#navbar.in),

  body:has(.seamless-banner)
  .navbar-default:has(#navbar.collapsing) {
    background: #333947 !important;
  }

  body:has(.seamless-banner) #navbar.in,
  body:has(.seamless-banner) #navbar.collapsing {
    background: #333947 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
  }

  body:has(.seamless-banner) #navbar .navbar-nav > li > a {
    color: #ffffff !important;
    background: transparent !important;
    padding: 12px 15px !important;
  }

  body:has(.seamless-banner) #navbar .navbar-nav > li > a:hover,
  body:has(.seamless-banner) #navbar .navbar-nav > li > a:focus {
    color: #FEE500 !important;
    background: rgba(255, 255, 255, 0.06) !important;
  }
}

/* 점보트론이 없는 페이지의 네비바 */
body:not(:has(.seamless-banner)) .navbar-default {
  background: #ffffff !important;
  border-bottom: 1px solid #e8ebef !important;
  box-shadow: 0 2px 8px rgba(20, 30, 50, 0.06);
}

/* 메뉴 글자 */
body:not(:has(.seamless-banner))
.navbar-default .navbar-nav > li > a {
  color: #263047 !important;
}

/* 로고가 글자인 경우 */
body:not(:has(.seamless-banner))
.navbar-default .navbar-brand {
  color: #263047 !important;
}

/* 마우스를 올렸을 때 */
body:not(:has(.seamless-banner))
.navbar-default .navbar-nav > li > a:hover,
body:not(:has(.seamless-banner))
.navbar-default .navbar-nav > li > a:focus {
  color: #111827 !important;
  background: #fff3b8 !important;
}

/* 모바일 햄버거 선 */
body:not(:has(.seamless-banner))
.navbar-default .navbar-toggle .icon-bar {
  background-color: #263047 !important;
}

/* 모바일 메뉴를 열었을 때 */
@media (max-width: 767px) {
  body:not(:has(.seamless-banner)) #navbar {
    background: #ffffff !important;
    border-top: 1px solid #e8ebef !important;
  }
}

/* 메뉴가 두 줄이 되는 중간 화면 */
@media (min-width: 768px) and (max-width: 1199px) {
  .seamless-banner::before {
    top: -170px;
  }
}


/* 3카드 style.css 시작 */
.sns-services {
  padding: clamp(52px, 7vw, 88px) 0;
  background: #e8eff5;
  color: #121a2b;
  font-family: "Noto Sans KR", sans-serif;
}

.sns-services__header {
  max-width: 680px;
  margin: 0 auto clamp(28px, 4vw, 46px);
  padding: 0 15px;
  text-align: center;
}

.sns-services__eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  color: #2764df;
  font-size: clamp(11px, 1.3vw, 13px);
  font-weight: 800;
  letter-spacing: 0.16em;
}

.sns-services__header h2 {
  margin: 0 0 12px;
  color: #111827;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.04em;
}

.sns-services__header p {
  margin: 0;
  color: #657087;
  font-size: clamp(14px, 2vw, 17px);
  line-height: 1.7;
  word-break: keep-all;
}

.sns-services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 24px);
}

.sns-service-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 420px;
  padding: clamp(24px, 3vw, 32px);
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #dde3ec;
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(24, 35, 55, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sns-service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 42px rgba(24, 35, 55, 0.12);
}

.sns-service-card__icon {
  display: inline-flex;
  width: 62px;
  height: 62px;
  margin-bottom: 24px;
  align-items: center;
  justify-content: center;
  background: #f2f4f8;
  border-radius: 17px;
  font-size: 29px;
}

.sns-service-card--youtube .sns-service-card__icon {
  color: #ff0033;
}

.sns-service-card--instagram .sns-service-card__icon {
  color: #e1306c;
}

.sns-service-card--tiktok .sns-service-card__icon {
  color: #111111;
}

.sns-service-card h3 {
  margin: 0 0 14px;
  color: #111827;
  font-size: clamp(21px, 2.5vw, 26px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.035em;
}

.sns-service-card__summary {
  min-height: 50px;
  margin: 0 0 19px;
  color: #657087;
  font-size: 14px;
  line-height: 1.75;
  word-break: keep-all;
}

.sns-service-card ul {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.sns-service-card li {
  position: relative;
  margin-bottom: 11px;
  padding-left: 23px;
  color: #39455a;
  font-size: 14px;
  line-height: 1.55;
}

.sns-service-card li::before {
  content: "\2713";
  position: absolute;
  top: 0;
  left: 0;
  color: #3478f6;
  font-weight: 900;
}

.sns-service-card__link {
  display: inline-flex;
  margin-top: auto;
  align-items: center;
  gap: 7px;
  color: #1e63dc;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none !important;
}

.sns-service-card__link:hover,
.sns-service-card__link:focus {
  color: #114db5;
}

.sns-service-card__link span {
  transition: transform 0.2s ease;
}

.sns-service-card__link:hover span,
.sns-service-card__link:focus span {
  transform: translateX(4px);
}

.sns-service-card--featured {
  background: linear-gradient(145deg, #111a2d 0%, #1d2940 100%);
  border-color: transparent;
  box-shadow: 0 16px 38px rgba(17, 26, 45, 0.22);
}

.sns-service-card--featured .sns-service-card__icon {
  background: rgba(255, 255, 255, 0.1);
  color: #fee500;
}

.sns-service-card--featured h3,
.sns-service-card--featured .sns-service-card__summary,
.sns-service-card--featured li {
  color: #ffffff;
}

.sns-service-card--featured .sns-service-card__summary {
  color: #c6cfdf;
}

.sns-service-card--featured li::before,
.sns-service-card--featured .sns-service-card__link {
  color: #fee500;
}

.sns-service-card__badge {
  position: absolute;
  top: 22px;
  right: 22px;
  padding: 6px 10px;
  background: #fee500;
  border-radius: 999px;
  color: #171717;
  font-size: 11px;
  font-weight: 800;
}

@media (max-width: 991px) {
  .sns-services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sns-service-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .sns-services {
    padding-right: 15px;
    padding-left: 15px;
  }

  .sns-services__grid {
    grid-template-columns: 1fr;
  }

  .sns-service-card,
  .sns-service-card:last-child {
    min-height: 0;
    grid-column: auto;
  }

  .sns-service-card__summary {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sns-service-card,
  .sns-service-card__link span {
    transition: none;
  }
}
/* style.css 끝 */


/* FAQ 전체 영역 */
.faq-section {
  width: 100%;
  background: #f9f9f9;
  border-top: 1px solid #E3E9F0;
  border-bottom: 1px solid #E3E9F0;
}

.faq-section > .container {
  padding-top: clamp(35px, 5vw, 60px) !important;
  padding-bottom: clamp(40px, 6vw, 70px) !important;
}

/* FAQ 제목 */
.faq-section h3 {
  color: #263047 !important;
  font-size: clamp(34px, 5vw, 48px);
  font-weight: 700;
  line-height: 1;
  margin: 0 !important;
}

/* 제목 아래 구분선 */
.faq-section .container > hr {
  width: 44px;
  height: 4px;
  margin: 14px auto 28px;
  background: #FEE500;
  border: 0;
  border-radius: 10px;
}

/* 질문 카드 간격 */
.faq-section details {
  width: 100%;
  margin: 0 0 12px;
}

/* 질문 부분 */
.faq-section details > summary {
  position: relative;
  background: #FFFFFF;
  color: #263047;
  padding: 18px 58px 18px 22px;
  border: 1px solid #DFE6EE;
  border-radius: 10px;
  outline: none;
  cursor: pointer;
  list-style: none;
  text-align: left !important;
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 700 !important;
  line-height: 1.5;
  box-shadow: 0 4px 14px rgba(38, 48, 71, 0.05);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.faq-section details > summary:hover {
  border-color: #B9C6D4;
  box-shadow: 0 7px 18px rgba(38, 48, 71, 0.09);
  transform: translateY(-1px);
}

/* 기본 화살표 제거 */
.faq-section summary::-webkit-details-marker {
  display: none;
}

.faq-section summary::marker {
  display: none;
  content: "";
}

/* 기존 🔻 문자를 + 버튼으로 변경 */
.faq-section summary span {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  float: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #FEE500;
  border-radius: 50%;
  color: transparent;
  font-size: 0;
}

.faq-section summary span::before {
  content: "+";
  color: #263047;
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.faq-section details[open] summary span::before {
  content: "−";
}

/* 펼쳐진 질문 */
.faq-section details[open] > summary {
  border-color: #CAD5E1;
  border-radius: 10px 10px 0 0;
  box-shadow: none;
}

/* 답변 부분 */
.faq-section .tpt {
  background: #FFFFFF;
  color: #4B5565;
  margin: 0 0 12px;
  padding: 20px 22px;
  border: 1px solid #CAD5E1;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  line-height: 1.75;
  box-shadow: 0 8px 20px rgba(38, 48, 71, 0.06);
}

.faq-section .tpt p {
  margin: 0 0 8px;
}

.faq-section .tpt p:last-child {
  margin-bottom: 0;
}

.faq-section .tpt h4 {
  color: #263047;
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 700;
  margin: 12px 0 6px;
}

/* 펼쳐지는 효과 */
.faq-section details[open] > summary ~ * {
  animation: faqReveal 0.3s ease;
}

@keyframes faqReveal {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 모바일 */
@media (max-width: 767px) {
  .faq-section > .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .faq-section details > summary {
    padding: 15px 52px 15px 16px;
  }

  .faq-section summary span {
    right: 14px;
  }

  .faq-section .tpt {
    padding: 17px 16px;
    font-size: 14px;
  }
}
/* FAQ 전체 영역 끝 */



/* 포스팅 영역 시작 */
.posting-title {
  font-family: 'Dongle', sans-serif;
  font-size: clamp(34px, 5vw, 46px);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: #263047;
  background: #F3F6FA;
  margin: 0;
  padding: clamp(38px, 5vw, 58px) 20px 32px;
}

.posting-title::after {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  background: #FEE500;
  border-radius: 10px;
  margin: 14px auto 0;
}

/* 카드 전체 영역 */
.container1 {
  width: 100%;
  margin: 0;
  padding: 0 24px clamp(45px, 6vw, 70px);
  background: #F3F6FA;
  box-sizing: border-box;
  color: #263047;
  font-family:
    Pretendard,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.container1 > .col-12 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 20px;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0;
  float: none;
}

/* 카드 기본 디자인 */
.container1 .card1 {
  display: flex;
  flex-direction: column;
  width: auto !important;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 !important;
  float: none;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid #E1E7EE;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(38, 48, 71, 0.08);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

/* 플랫폼별 상단 포인트 */
.container1 .card1:nth-child(1) {
  border-top: 4px solid #F77737;
}

.container1 .card1:nth-child(2) {
  border-top: 4px solid #FF0033;
  box-shadow: 0 12px 30px rgba(255, 0, 51, 0.12);
}

.container1 .card1:nth-child(3) {
  border-top: 4px solid #25C9D0;
}

.container1 .card1:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 34px rgba(38, 48, 71, 0.14);
}

/* 이미지 영역 */
.container1 .card-header1 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(200px, 22vw, 250px);
  padding: 24px;
  background: #FFFFFF;
  border-bottom: 1px solid #EDF1F5;
  box-sizing: border-box;
}

.container1 .card-header1 img {
  display: block;
  width: auto;
  max-width: 88%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

/* 카드 본문 */
.container1 .card-body1 {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 250px;
  padding: 24px 22px 22px;
  box-sizing: border-box;
}

/* 카드 제목 */
.container1 .card-body1 h4 {
  color: #263047;
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 700 !important;
  line-height: 1.4;
  margin: 0 0 17px;
}

/* 포스팅 목록 */
.container1 .card-body1 p {
  color: #566174 !important;
  font-size: clamp(13px, 1.3vw, 14px);
  font-weight: 600 !important;
  line-height: 1.55;
  margin: 0 0 9px;
  word-break: keep-all;
}

/* 포스팅 보기 버튼 */
.container1 .card-body1 a {
  display: block;
  width: 100%;
  margin-top: auto;
  padding: 11px 14px !important;
  background: #263047 !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
  font-size: 14px;
  font-weight: 700 !important;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

/* 유튜브 버튼 강조 */
.container1 .card-body1 a {
  display: block;
  width: 100%;
  margin-top: auto;
  padding: 11px 14px !important;
  background-color: #263047 !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
  font-size: 14px;
  font-weight: 700 !important;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.container1 .card-body1 a:hover {
  background: #182033 !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

/* 태블릿 */
@media (max-width: 991px) {
  .container1 > .col-12 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .container1 .card1:nth-child(3) {
    grid-column: 1 / -1;
    width: 100% !important;
    max-width: 550px;
    justify-self: center;
  }
}

/* 모바일 */
@media (max-width: 767px) {
  .posting-title {
    padding: 34px 20px 25px;
  }

  .container1 {
    padding: 0 18px 45px;
  }

  .container1 > .col-12 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .container1 .card1:nth-child(3) {
    grid-column: auto;
    max-width: none;
  }

  .container1 .card-header1 {
    height: 210px;
    padding: 22px;
  }

  .container1 .card-body1 {
    min-height: 235px;
    padding: 21px 18px 19px;
  }
}
/* 포스팅 영역 끝 */