/**********top배너**********/
.contest-banner {
  display: block;
  position: relative;
  width: 100%;
  height: 620px;
  background: #d0c7f0 url("https://igdevice.speedgabia.com/main/img/contest/raspberry_top_ban_bg.jpg") center fixed;
  background-repeat: no-repeat;
  text-align: center;
}
.contest-banner h1 {
  font-size: 78px;
  font-weight: bold;
  color: #000;
  display: inline-block;
  margin: 0;
  letter-spacing: -1px;
}
.contest-banner .logo_title {
  display: inline-block;
  width: 1020px;
  height: 570px;
  background: url("https://igdevice.speedgabia.com/main/img/contest/raspberry_top_ban_title.png") no-repeat;
  font-size: 0;
  line-height: 0;
}
/**********내용**********/
.overview_content {
  margin-top: 20px;
}
/**********본문**********/
.intro p {
  font-size: 18px !important;
  color: #222;
  letter-spacing: -0.5px;
  line-height: 28px;
}
.intro-visual {
  min-height: 310px;
  border-radius: 25px;
  display: grid;
  place-items: center;
  position: relative
}
/*브랜드 바로가기 버튼*/
.brand_btn {
  display: inline-block;
}
.brand_btn a {
  display: block;
  font-family: "graphie", 'Noto Sans KR', sans-serif;
  width: 260px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  font-size: 17px;
  background: #c51e4b;
  border-radius: 10px;
  margin-top: 10px;
}
.brand_btn a:hover {
  background: #000000;
}
.info_warp a {
  text-decoration: none;
}
.info_warp h1, h2, h3, p {
  margin-top: 0
}
.info_warp p {
  color: #2a2a2a;
  font-size: 17px;
  letter-spacing: -0.5px;
}
.info_warp h2 {
  font-size: 38px;
  line-height: 1.4;
  margin-bottom: 24px;
  font-weight: bold;
}
.info_warp h3 {
  font-size: 23px;
  font-weight: bold;
  letter-spacing: -1px;
}
.info_warp dl {
  font-weight: bold;
  font-size: 16px;
}
.info_warp dd {
  margin-left: 20px;
  font-weight: 400;
  font-size: 16px;
}
.contest {
  width: 100%;
  overflow: hidden
}
.container {
  width: 96%;
  max-width: 1020px;
  margin: 0 auto
}
.info_warp .section {
  padding: 50px 0;
  width: 1020px !important;
}
.section-soft {
  background: #fff;
}
.hero {
  background: #75102e;
  color: white;
  padding: 75px 0 85px
}
.hero-grid:after, .intro-grid:after, .two-grid:after, .three-grid:after, .award-grid:after, .criteria-grid:after, .step:after, .schedule > div:after {
  content: "";
  display: block;
  clear: both
}
.hero-grid > div:first-child {
  float: left;
  width: 55%
}
.hero-grid > .hero-art {
  float: right;
  width: 41%
}
.hero .eyebrow {
  color: #ffd8e3;
  font-size: 14px;
  font-weight: bold
}
.hero-brand {
  font-size: 11px;
  letter-spacing: 1px;
  color: #f7c2d0
}
.hero-brand img {
  width: 54px;
  height: 65px;
  vertical-align: middle;
  margin-right: 14px
}
.hero-year {
  font-size: 24px;
  font-weight: bold;
  color: #ffb6c9;
  margin: 24px 0 4px
}
.hero h1 {
  font-size: 54px;
  line-height: 1.25;
  margin-bottom: 18px
}
.hero h1 em {
  font-style: normal;
  color: #ffc6d5
}
.hero-topic {
  display: inline-block;
  padding: 7px 18px;
  border: 1px solid #eaa6bb;
  border-radius: 25px;
  color: white;
  font-weight: bold
}
.hero-copy {
  font-size: 19px;
  color: #ffe2ea;
  margin: 23px 0
}
.hero-copy strong {
  color: white
}
.hero-dates {
  margin-bottom: 25px
}
.hero-dates span {
  display: inline-block;
  font-size: 13px;
  padding: 9px 13px;
  margin: 0 7px 8px 0;
  border: 1px solid #b96680;
  border-radius: 7px;
  color: white
}
.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin: 0 8px 8px 0
}
.btn-white {
  background: white;
  color: #75102e
}
.btn-primary {
  background: #c51e4b;
  color: #fff !important;
}
.btn-outline {
  border: 1px solid #c51e4b;
  color: #c51e4b;
  background: white
}
.hero-art {
  height: 410px;
  position: relative
}
.glow {
  position: absolute;
  width: 300px;
  height: 300px;
  left: 12%;
  top: 10%;
  background: #a92a4c;
  border-radius: 50%
}
.board {
  width: 300px;
  height: 260px;
  border: 12px solid #397e57;
  border-radius: 19px;
  background: #27754c;
  box-shadow: 15px 20px 35px #3b1024;
  position: absolute;
  top: 80px;
  left: 12%;
  transform: rotate(-10deg)
}
.board-label {
  position: absolute;
  left: 18px;
  top: 15px;
  color: #c5ffda;
  font-weight: bold
}
.chip {
  position: absolute;
  left: 88px;
  top: 67px;
  width: 112px;
  height: 112px;
  background: #19212a;
  border: 8px solid #293440;
  border-radius: 9px;
  text-align: center;
  padding-top: 16px;
  font-weight: bold;
  font-size: 38px;
  line-height: 1.1;
  color: white
}
.chip small {
  font-size: 13px
}
.ports {
  position: absolute;
  right: -17px;
  top: 32px
}
.ports i {
  display: block;
  width: 36px;
  height: 31px;
  margin-bottom: 12px;
  background: #d3d7d8;
  border: 5px solid #8c9599
}
.pins {
  position: absolute;
  left: 20px;
  bottom: 13px;
  width: 230px;
  height: 13px;
  background: repeating-linear-gradient(90deg, #e2c26d 0 7px, transparent 7px 13px)
}
.voice {
  position: absolute;
  bottom: 45px;
  left: 0;
  height: 60px;
  white-space: nowrap
}
.voice span {
  display: inline-block;
  width: 7px;
  height: 30px;
  margin-right: 5px;
  vertical-align: middle;
  background: #ffbad0;
  border-radius: 8px
}
.voice span:nth-child(2n) {
  height: 54px
}
.voice span:nth-child(3n) {
  height: 18px
}
.bubble {
  position: absolute;
  right: 0;
  top: 23px;
  background: white;
  color: #75102e;
  padding: 13px 19px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: bold
}
.intro-grid > div {
  float: left;
  width: 50%
}
.two-grid > div {
  float: left;
}
.two-grid > div:first-child {
  margin-right: 4%;
  padding-left: 20px;
}
.intro h2 span {
  color: #c51e4b
}
.intro p {
  font-size: 15px
}
.text-link {
  color: #c51e4b;
  font-weight: bold;
  border-bottom: 1px solid #c51e4b
}
.note {
  display: block;
  color: #888;
  font-size: 11px;
  margin-top: 12px
}
.intro-visual {
  min-height: 310px;
  background: #fff;
  text-align: center;
  position: relative
}
.icon-circle {
  font-size: 95px
}
.mini-card {
  position: absolute;
  bottom: -25px;
  left: 8%;
  width: 84%;
  padding: 18px 22px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 25px #d9a6b7;
  text-align: left
}
.mini-card b {
  font-size: 12px;
  color: #c51e4b
}
.mini-card span {
  font-size: 12px;
  color: #777
}
.soundwave {
  color: #c51e4b;
  font-size: 24px;
  letter-spacing: 7px
}
.section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 45px
}
.section-head h2 {
  margin-bottom: 10px
}
.three-grid, .award-grid, .criteria-grid {
  font-size: 0
}
.three-grid > .feature, .award-grid > .award, .criteria-grid > article {
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  width: 25%;
  margin: 0 3% 20px 0
}
.three-grid > .feature:nth-child(3n), .award-grid > .award:nth-child(3n), .criteria-grid > article:nth-child(3n) {
  margin-right: 0
}
.feature {
  min-height: 220px;
  background: white;
  padding: 25px 25px;
  border: 1px solid #eee1e6;
  border-radius: 15px
}
.feature-icon {
  width: 52px;
  height: 52px;
  line-height: 52px;
  text-align: center;
  border-radius: 30px;
  background: #fff5f7;
  color: #c51e4b;
  font-weight: bold;
  margin-bottom: 15px
}
.feature p {
  font-size: 16px;
  margin-bottom: 0;
  line-height: 24px;
  margin-top: 10px;
}
.step {
  padding: 30px 30px 20px;
  margin-bottom: 18px;
  border: 1px solid #eee1e6;
  border-radius: 15px;
  background: white
}
.step-number {
  float: left;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  border-radius: 50%;
  background: #c51e4b;
  color: white;
  font-weight: bold
}
.step > div:nth-child(2) {
  margin-left: 80px;
  margin-right: 40px
}
.step-label {
  font-size: 12px;
  color: #c51e4b;
  font-weight: bold;
  margin-bottom: 3px
}
.step h3 {
  margin-bottom: 9px
}
.step p {
  font-size: 16px;
  margin-bottom: 10px;
}
.step p strong {
  color: #c51e4b;
  font-size: 18px;
}
.step ul {
  padding-left: 19px;
  font-size: 14px;
  color: #555
}
.date-chip {
  float: right;
  background: #fff5f7;
  color: #75102e;
  border-radius: 30px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap
}
.step-highlight {
  display: inline-block;
  background: #45b57c;
  color: #fff;
  padding: 10px 15px;
  border-radius: 7px;
  font-size: 14px
}
.step-highlight strong {
  color: #f9ff00
}
.footnote {
  font-size: 12px;
  color: #827780;
  margin-top: 20px
}
.awards-section {
  background: #3b1024;
  color: white
}
.awards-section .section-head h2 {
  color: white
}
.awards-section .kicker {
  color: #ff9ab8
}
.award {
  background: white;
  border-radius: 15px;
  text-align: center;
  padding: 30px 15px;
  color: #211b25
}
.award-first {
  background: #ffe0e9
}
.medal {
  font-size: 45px
}
.award p {
  font-weight: bold;
  margin: 12px 0 0
}
.award strong {
  font-size: 48px;
  color: #c51e4b;
  line-height: 1.5
}
.award small {
  font-size: 20px
}
.benefit {
  margin-top: 35px;
  border: 1px solid #a46b80;
  padding: 30px;
  border-radius: 15px;
  text-align: center
}
.benefit span {
  font-size: 12px;
  color: #ff9ab8;
  font-weight: bold
}
.benefit h3 {
  font-size: 25px;
  margin: 10px 0
}
.benefit p {
  color: #f5dbe3;
  margin: 0
}
.awards-section .footnote {
  color: #dfb9c7
}
.check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 30px
}
.check-list li {
  padding: 12px 0 12px 32px;
  position: relative;
  border-bottom: 1px solid #eee1e6;
  font-size: 16px;
}
.check-list li:before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #c51e4b;
  font-weight: bold
}
.link-stack .btn {
  margin-bottom: 10px
}
#apply {
  background: #f9f9f9;
}
.apply-box {
  /*background: #fff;*/
  /*border-radius: 18px;*/
  /*padding: 38px*/
  border-left: 1px solid #dddddd;
  padding-left: 40px;
}
.apply-box ol {
  padding-left: 23px;
  line-height: 27px;
  font-size: 16px;
}
.file-info {
  font-size: 14px;
  margin: 18px 0 22px;
  letter-spacing: -0.5px;
}
.criteria-grid article {
  background: white;
  border: 1px solid #eee1e6;
  padding: 30px;
  min-height: 200px;
  border-radius: 13px
}
.criteria-grid span {
  color: #c51e4b;
  font-size: 12px;
  font-weight: bold
}
.criteria-grid h3 {
  margin: 8px 0
}
.criteria-grid p {
  font-size: 16px;
  letter-spacing: -0.8px;
  margin: 0;
  line-height: 24px;
}
.schedule {
  border-top: 2px solid #211b25
}
.schedule > div {
  padding: 22px 15px;
  border-bottom: 1px solid #eee1e6;
  font-size: 17px;
}
.schedule span {
  float: left;
  width: 8%;
  color: #c51e4b;
  font-weight: bold;
}
.schedule div > div {
  float: left;
  width: 52%
}
.schedule strong {
  float: right;
  width: 40%;
  font-size: 18px;
  text-align: right
}
.notice-section {
  background: #f7f5f6
}
.notice-section h2 {
  font-size: 27px
}
.notice-list {
  padding-left: 22px;
  color: #635c64;
  font-size: 16px;
  line-height: 24px;
}
.footer {
  text-align: center;
  background: #75102e;
  padding: 90px 0 50px;
  color: white
}
.footer .kicker {
  color: #ffc0d2
}
.footer h2 {
  color: white;
  font-size: 40px
}
.footer p {
  color: #ffe2ea
}
.footer .btn {
  margin: 20px 0 48px
}
.contact {
  border-top: 1px solid #a46b80;
  padding-top: 27px;
  color: #f5cfdb;
  font-size: 13px
}
.contact > * {
  display: inline-block;
  margin: 0 12px 8px
}


/*참가신청서 다운버튼*/
.cont_btn {
  margin: 6px auto 0px;
  position: relative;
  text-align: center;
}
.cont_btn .btn1, .cont_btn .btn2 {
  display: inline-block;
}
.cont_btn .btn1 a, .cont_btn .btn2 a {
  display: block;
  font-family: "graphie", 'Noto Sans KR', sans-serif;
  line-height: 64px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  background: #c51e4b;
  padding: 6px 30px;
  margin: 20px 20px 40px 0;
  border-radius: 15px;
}
.cont_btn .btn1 a:hover, .cont_btn .btn2 a:hover {
  background: #000000;
}



/*모바일*/
@media screen and (max-width:850px) {
  .hero-grid > div:first-child, .hero-grid > .hero-art, .intro-grid > div, .two-grid > div {
    float: none;
    width: 100%;
    margin-right: 0
  }
  .hero-art {
    height: 330px
  }
  .intro-grid > div, .two-grid > div {
    margin-bottom: 45px
  }
  .section {
    padding: 70px 0
  }
  .step > div:nth-child(2) {
    margin-right: 0
  }
  .date-chip {
    float: none;
    display: inline-block;
    margin: 12px 0 0 80px
  }
  .criteria-grid > article {
    width: 48%;
    margin-right: 4%
  }
  .criteria-grid > article:nth-child(3n) {
    margin-right: 4%
  }
  .criteria-grid > article:nth-child(2n) {
    margin-right: 0
  }
}

@media screen and (max-width:600px) {
  .container {
    width: 92%
  }
  .hero {
    padding: 45px 0 55px
  }
  .hero h1 {
    font-size: 38px
  }
  .hero-copy {
    font-size: 16px
  }
  .hero-art {
    height: 285px
  }
  .board {
    top: 30px;
    left: 4%;
    transform: rotate(-10deg) scale(.75);
    transform-origin: top left
  }
  .bubble {
    right: 0;
    top: 4px
  }
  .voice {
    bottom: 10px
  }
  .three-grid > .feature, .award-grid > .award, .criteria-grid > article, .three-grid > .feature:nth-child(3n), .award-grid > .award:nth-child(3n), .criteria-grid > article:nth-child(3n) {
    display: block;
    width: 100%;
    margin: 0 0 18px
  }
  .section {
    padding: 55px 0;
  }
  .section-head {
    margin-bottom: 30px
  }
  .feature, .criteria-grid article {
    padding: 23px;
    min-height: 0
  }
  .step {
    padding: 20px 15px
  }
  .step-number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 13px
  }
  .step > div:nth-child(2) {
    margin-left: 55px
  }
  .date-chip {
    margin-left: 55px;
    white-space: normal
  }
  .schedule span {
    width: 35px
  }
  .schedule div > div {
    width: calc(100% - 35px)
  }
  .schedule strong {
    float: none;
    display: block;
    clear: both;
    width: auto;
    text-align: left;
    padding-left: 35px;
    font-size: 16px
  }
  .apply-box {
    padding: 26px
  }
  .footer h2 {
    font-size: 29px
  }
  .contact > * {
    display: block
  }
}