@charset "UTF-8";

.area_cont {margin: 0; display: block; text-align: center;}
a {cursor: pointer;display: inline-block;}
.fs_light {font-weight: 400;}

.promotion .content_head {margin: 0 auto; text-align:center; width:100%;}
.promotion img {margin:0 auto; display:block; max-width:100%;}
.promotion .area_cont {padding:100px 0; text-align: center;}
.promotion .area_head .desc {margin-top: 16px; font-size: 18px; color: #888;}
.promotion .purple {color:#8E4DFF;}

/* ✅ PC 배경 설정 */
.promotion .area1 {background:linear-gradient(to top, #DCCAFF, #9F6BFF); padding:100px 0 0;}
.promotion .area2 {background: #5424AD;}
.promotion .area3 {background: #300877;}
.promotion .area4 {background: #F4F8FF;}
.promotion .area5 {background: #47199B;}
.promotion .area6 {background: #300877;}
.promotion .area7 {background: #F4F8FF;}
.promotion .area8 {background: #F4F8FF; padding:0 0 100px;}

.promotion .btn_wrap a {padding:0;}
.promotion .cont_wrap {margin-top:64px;}
.promotion .btn_wrap_link {padding:8px 20px; border-radius:40px; background-color:#af99f8; margin-top:24px;}
.promotion .btn_wrap_link:hover {background-color: #a388fd;}
.promotion .btn_wrap_link span {display:flex; flex-direction:row; color:#fff; font-weight:400;}
.promotion .btn_wrap_link span img {position:relative; top:1px; margin-left:4px;}

.promotion .area2 .box_grid {display:grid; grid-template-columns:repeat(3,1fr); width:100px; gap:24px;}
.promotion .area2 .box_grid .box {width:384px; padding:40px 32px; box-sizing:border-box; background:linear-gradient(to top, #8c8cff, #5326c3); border:1px solid #947cff; border-radius:40px; box-shadow:0px 4px 12px 0px #0000003b;}
.promotion .area2 .box_grid .box_cont {display:flex; flex-direction:column; gap:30px;}
.promotion .area2 .box_grid .box .title {text-align:left;}
.promotion .area2 .box_grid .box .title h3 {font-size:24px; color:#fff; font-weight:600; text-align:left;}
.promotion .area2 .box_grid .box .title .desc {font-size:20px; color:#E7D5FF; font-weight:400; margin-top:8px;}
.promotion .area2 .box_grid .box img {display:flex;}

.promotion .area4 .box {height:240px; box-sizing:border-box; background:#fff; border-radius:40px; padding:0; border:none;}
.promotion .area4 .box_cont {display:flex; flex-direction:row; justify-content:space-between; border-radius:40px; box-shadow:0px 2px 13px 0px #6055A214;}
.promotion .area4 .box_grid {display:flex; flex-direction:column; gap:24px;}
.promotion .area4 .box_grid .box .title_wrap {text-align:left; padding:40px 60px;}
.promotion .area4 .box_grid .box .num {font-size:24px; font-weight:500;}
.promotion .area4 .box_grid .box .title_wrap h3 {font-size:28px; color:#333; font-weight:600; text-align:left; margin-top:20px;}
.promotion .area4 .box_grid .box .title_wrap .desc {font-size:24px; color:#888; font-weight:400; margin-top:4px;}
.promotion .area4 .box_grid .box img {display:flex;}

.promotion .area5 .title h3 {color:#fff;}
.promotion .area5 .box_grid {display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.promotion .area5 .box_grid .box {width:100%; padding:40px 32px; box-sizing:border-box; background:linear-gradient(to top, #8c8cff, #5326c3); border:1px solid #947cff; border-radius:40px; box-shadow:0px 4px 12px 0px #0000003b;}
.promotion .area5 .box_grid .box {text-align:left;}
.promotion .area5 .box_grid .box h3 {font-size:24px; color:#fff; font-weight:600; text-align:left; line-height:160%;}
.promotion .area5 .box_grid .box .desc {font-size:20px; color:#E7D5FF; font-weight:400; margin-top:8px;}

.promotion .area7 .cont_wrap {margin:64px 0 80px;}
.promotion .area7 .btn_wrap {margin-bottom:0;}

.promotion .area8 .title_wrap {text-align:left; margin-bottom:12px;}
.promotion .area8 .title {font-size:24px; font-weight:600; color:#6E7683;}
.promotion .area8 .desc {font-size:18px; color:#939AA7; text-align:left;}
.promotion .area8 .desc li {margin-bottom:4px;}


/*** ✅ Responsive layout ***/
@media all and (max-width: 959px) {
  img {width: 100%; /* max-width:320px; */}
  .inner {padding: 0 6%;}
  
  .promotion .content_head .area_cont {padding:64px 0 0;}
  .promotion img {width: 100%; max-width:320px;}
  .promotion .area_cont {padding: 64px 0; text-align:center;}
  .promotion h4 {font-size: 20px;}
  .promotion .content_head {padding:0 !important;}
  .promotion .area_head .desc {font-size: 15px;}
  .promotion .btn_wrap_link span img {width:24px; height:24px;}

  .promotion .area1 .btn_wrap img.mo,
  .promotion .area7 .btn_wrap img.mo {width:198px; height:53px;}
  .promotion .area2 .box_grid {display:flex; flex-direction:column; width:100%;}
  .promotion .area2 .box_grid .box {width:auto;}
  .promotion .area2 .box_grid .box .title h3 {font-size:18px;}
  .promotion .area2 .box_grid .box .title .desc {font-size:16px;}
  .promotion .area3 .desc {font-size: 14px;}
  .promotion .area4 h3,
  .promotion .area5 h3,
  .promotion .area7 h3 {font-size:28px;}
  .promotion .area4 .box {height:auto;}
  .promotion .area4 .num {font-size:16px;}
  .promotion .area4 .box_cont {display:flex; flex-direction:column;}
  .promotion .area4 .box_grid .box .title_wrap {padding:28px 40px 28px; font-size:16px;}
  .promotion .area4 .box_grid .box .title_wrap h3 {font-size:18px; margin-top:12px;}
  .promotion .area4 .box_grid .box .title_wrap .desc {font-size:16px;}
  .promotion .area4 .box_grid .box img {max-width:100%;}
  .promotion .area5 .box_grid {display:flex; flex-direction:column;}
  .promotion .area5 .box_grid .box h3 {font-size:18px;}
  .promotion .area5 .box_grid .box .desc {font-size:16px;}
  .promotion .area7 img.mo {width:200px;}
  .promotion .area8 {padding:0 0 64px;}
  .promotion .area8 .title {font-size:16px;}
  .promotion .area8 .desc {font-size:13px;}
}