/* Base */
:root {
  --container: 1400px;
  --cubic-1 : cubic-bezier(0.34, 1.56, 0.64, 1)
}

img {width: 100%; object-fit: cover; }
main {overflow: hidden; }
strong,b {font-weight:700;}

@keyframes floating-ani {
  0% {transform: translate(-50%,0);}
  100% {transform: translate(-50%,20px);}
}
@keyframes character-ani {
  0% {transform:rotate(0deg)}
  100% {transform:rotate(-5deg)}
}
@keyframes character-deco {
  0% {transform:rotate(0deg)}
  100% {transform:rotate(10deg)}
}
@keyframes floating-ani-sm {
  0%   { transform: translate(-30px,0) rotate(30deg); }
  100% { transform: translate(-30px,10px) rotate(30deg); }
}

@keyframes floating-crayon-ani {
  0% {transform: translateY(0) rotate(-3deg) scale(1);  }
  25% {transform: translateY(-12px) rotate(2deg) scale(1.03);  }
  50% {transform: translateY(0) rotate(-2deg) scale(0.98);  }
  75% {transform: translateY(8px) rotate(1deg) scale(1.01);  }
  100% {transform: translateY(0) rotate(-3deg) scale(1);  }
}


.container {width: min(var(--container ), calc(100% - 40px)); margin:0 auto;}
.m-br {display: none;}
.link-button {max-width:clamp(180px, calc(346 / 1399 * 100vw), 346px);width:100%;height:clamp(40px, calc(81 / 1399 * 100vw), 81px);border-radius:68px;padding:.3rem 1rem;gap:10px;display:flex;align-items:center;justify-content:center;color:#fff;line-height:28px;letter-spacing:-0.6px;font-weight:700;font-size:clamp(16px, calc(28 / 1399 * 100vw), 28px);line-height:100%;letter-spacing:-3%;background:var(--point-color);}
.link-button.transparent {max-width:clamp(100px, calc(156 / 1399 * 100vw), 156px);height:clamp(32px, calc(41 / 1399 * 100vw), 41px);width:100%;font-weight:700;font-size:clamp(12px, calc(18 / 1399 * 100vw), 18px);line-height:100%;letter-spacing:-3%;color:var(--green-color);border:1px solid var(--green-color);background:transparent;margin:0 auto;}


/* 고정 배너 */
.floating-inner {width:100%; max-width: 1400px; margin: 0 auto; display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:30px;position:fixed;left:50%; bottom:30px;z-index:9; transition: .3s var(--cubic-1); transform:translate(-50%, 200%);}
.floating-inner .info-content {border-radius:100px;background:#FFF;box-shadow:0 2px 20px 0 rgba(0,0,0,0.12);display:flex;position:relative;max-width:clamp(300px, calc(1100 / 1399 * 100vw), 1100px);width:auto;padding-block:20px;padding-inline:clamp(100px, calc(208 / 1399 * 100vw), 208px) clamp(20px, calc(60 / 1599 * 100vw), 60px);}
.floating-inner .info-content.hidden {display: none;}
.floating-inner .info-content .info-img {position:absolute;bottom:0;left:32px;}
.floating-inner .info-content .info-img img {width:clamp(100px, calc(164 / 1399 * 100vw), 164px);}
.floating-inner .info-content .content {display:flex;width:100%;max-width:1037px;align-items:center;}
.floating-inner .info-content .content .contest-head {display:flex;flex-direction:column;gap:10px;justify-content:center;}
.floating-inner .info-content .content .contest-head .contest-title {color:#000;font-size:clamp(13px,calc(22 / 1399 * 100vw),22px);font-style:normal;font-weight:600;line-height:1;letter-spacing:-0.66px; display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
.floating-inner .info-content .divide {width:1px;height:60px;background:#ddd;margin:0 clamp(10px, calc(20 / 1599 * 100vw), 30px);}
.floating-inner .info-content .info-links {display:flex;align-items:center;gap:clamp(10px, calc(25 / 1399 * 100vw), 32px); flex-shrink: 0;}
.floating-inner .info-content .info-link-item {display:flex;align-items:center;gap:8px;}
.floating-inner .info-content .info-link-item > img {width:clamp(50px,calc(72 / 1599 * 100vw),72px);}
.floating-inner .info-content .info-link-item .info-link-txt {font-size:clamp(12px,calc(20 / 1399 * 100vw),20px);font-weight:600;color:var(--font-color);line-height:1.4;letter-spacing:-0.6px; transition: .2s ease;}
.floating-inner .info-content .info-link-item.is-winners {display:none;}
.floating-inner .info-content .info-link-item .btn-arrow {transition: .2s ease;}
.floating-inner .info-content .info-link-item .btn-arrow img {width: 5px; }
.info-content .contest-meta .contest-status {width:max-content}

.main-init .floating-inner {transform:translate(-50% , 0);}

/* 상태별 구조 */
.contest-meta {display: flex; align-items: center; gap: 10px;}
.contest-meta .contest-period {color:var(--green-color); font-size: clamp(14px,calc(18 / 1399 * 100vw),18px); font-style: normal; font-weight: 600; line-height: 24px; letter-spacing: -0.54px; flex-shrink: 0;}
.contest-meta .contest-message {color: #666;  font-size: clamp(14px, calc(18 / 1399 * 100vw), 18px);  font-weight: 600; line-height: 1.33; letter-spacing: -0.54px; display: none;}

/* 접수중 상태 */
.info-content.status-open .contest-meta .contest-status {background: var(--green-color);}

/* 접수 대기 상태 */
.info-content.status-waiting .contest-meta .contest-status {background: #EF6250;}
.info-content.status-waiting .contest-meta .contest-period {color:#666;}
.info-content.status-waiting .info-link-item.is-apply {display: none;}

/* 접수 종료 상태*/
.info-content.status-closed .contest-meta .contest-status {background: #BBBBBB;}
.info-content.status-closed .contest-meta .contest-period {font-weight: 500; color:#666;}
.info-content.status-closed .info-link-item.is-apply {display: none;}

/* 수상작 발표 상태 */
.info-content.status-result .contest-meta .contest-status {background: var(--green-color);}
.info-content.status-result .info-link-item.is-apply {display: none;}
.info-content.status-result .info-link-item.is-winners {display: flex;}

/* coming soon 상태 */
.info-content.status-coming-soon .contest-meta .contest-status,
.info-content.status-coming-soon .contest-meta .contest-period {display: none;}
.info-content.status-coming-soon .contest-meta .contest-message {display: block;}
.info-content.status-coming-soon .info-link-item.is-winners {display: flex;}
.info-content.status-coming-soon .info-link-item.is-guide,
.info-content.status-coming-soon .info-link-item.is-apply {display: none;}


@media (hover:hover) {
  .floating-inner .info-content .info-link-item:hover .btn-arrow {transform: translate(4px, 0px);}
}

@media screen and (max-width: 1399px) {
  .info-content .contest-meta .contest-status {font-size:clamp(9px,calc(16 / 1399 * 100vw),16px);}

}
@media screen and (max-width: 1024px) {
  .container {width:100%; padding-inline: 16px;}
  .floating-inner .info-content { width: auto; padding: clamp(6px, calc(10 / 1024 * 100vw), 10px) clamp(8px, calc(10 / 1024 * 100vw), 10px) clamp(6px, calc(10 / 1024 * 100vw), 10px) clamp(14px, calc(20 / 1024 * 100vw), 20px); max-width:clamp(350px, calc(700 / 1024 * 100vw), 800px);}
  .floating-inner .info-content .content {justify-content: space-between; gap: 10px;}
  .floating-inner .info-content .content .contest-head {flex-direction: row-reverse; justify-content: flex-end; gap: clamp(4px, 1.11vw ,10px); align-items: center;}
  .floating-inner .info-content .info-link-item {gap: clamp(4px, calc(6 / 1024 * 100vw) ,6px); border-radius: 50px; padding-inline:5px 10px;}
  .floating-inner .info-content .info-link-item > img {width: clamp(24px, calc(40 / 1024 * 100vw), 40px)}
  .floating-inner .info-content .info-link-item.is-apply {background: #F0F9E5;}
  .floating-inner .info-content .info-link-item.is-winners {background: #F0F9E5;}
  .floating-inner .info-content .divide {display: none;}
  .floating-inner .info-content .info-img {display: none;}
  .floating-inner .info-content .info-img {bottom:6px;}
  .contest-meta .contest-period {display: none;}
  .floating-inner .info-content { min-height: 44px;}
  .floating-inner .info-content.status-open .info-link-item.is-guide {display: none;}
  .floating-inner .info-content.status-result .info-link-item.is-guide {display: none;}
  .floating-inner .info-content.status-coming-soon {padding-right: 30px;}
  .floating-inner .info-content.status-coming-soon .info-link-item.is-winners {display: none;}
  .floating-inner .info-content.status-coming-soon .contest-meta .contest-message {display: none;}
  .floating-inner .info-content.status-coming-soon .info-img {display: flex; width: 57px; left:auto; right:4px; overflow: hidden; height: 48px; bottom:0;}
  .floating-inner .info-content.status-coming-soon .info-img img {position: absolute;top:0;}
  .floating-inner .info-content.status-coming-soon .content {padding-left: 60px; justify-content: flex-start;}
  .floating-inner .info-content .info-link-item .btn-arrow {background:url('/atp_gcontest/front/assets/images/common/info-arrow-green.svg') no-repeat center center / contain; width:10px; height:auto; margin-left: 5px;}
  .floating-inner .info-content .info-link-item .btn-arrow img {display: none;}
  .floating-inner .info-content .info-link-item.is-apply .info-link-txt {color:var(--point-color);}
  .floating-inner .info-content .info-link-item.is-winners .info-link-txt {color:var(--point-color);}
  .floating-inner .info-content .info-link-item.is-guide .info-link-txt {color:#93561E;}
  .floating-inner .info-content .info-link-item.is-guide {background: #FFF9E0;}
  .floating-inner .info-content .info-link-item.is-guide .btn-arrow {background:url('/atp_gcontest/front/assets/images/common/info-arrow-brown.svg') no-repeat center center / contain; }
  .floating-inner {max-width: 800px;}
  .floating-inner .info-content.status-coming-soon .content {padding-right: 30px; padding-left: 0;}
}

@media screen and (max-width: 768px) {
  .floating-inner {padding-inline: 10px; bottom:50px;}
  .info-content.status-coming-soon { min-height: 44px;}
  .floating-inner .info-content .info-link-item {min-height: 30px;}
  .m-br {display: block;}

}
@media screen and (max-width: 599px) {

}
@media screen and (max-width: 360px) {
  .floating-inner .info-content {max-width: 100%;}
  .info-content .info-link-item .btn-arrow {margin-left: 0; width: 8px;}
}
@media screen and (max-width: 320px) {
  .floating-inner .info-content .info-link-item > img {width: 18px;}
  .info-content .contest-meta .contest-status {font-size: 8px;}
  .floating-inner .info-content {padding-left: 10px;}
  .floating-inner .info-content .info-link-item {padding-inline: 3px;}
  .floating-inner .info-content .info-link-item .info-link-txt {font-size: 11px;}
  .floating-inner .info-content .content .contest-head .contest-title {font-size: 11px;}
}
@media screen and (max-width:299px) {
  .floating-inner .info-content .info-link-item {padding-inline: 7px;}
  .info-content.status-coming-soon {padding-right:20px}
}


/* visual */
.main-hero {width:100%; position:relative;aspect-ratio: 16 / 10;  min-height: 450px; }
.main-hero .main-visual-img {width:100%;height:100%;}
.main-hero .main-visual-img img {width:100%;height:100%;object-fit:cover; object-position: center; transform:scale(1.1); transition: transform .5s ease;}
.main-init .main-hero .main-visual-img img {transform:scale(1)}


@media screen and (max-width: 1024px){
  .main-hero {margin-top: 56px;}
}
@media screen and (max-width: 768px){
  .main-hero {aspect-ratio: 4 / 5;}
}


/* contents */
.contest-section {width: 100%; position: relative;  z-index: 2; will-change:transform; width: 100% !important;  max-width: 100% !important;}
.pin-spacer {max-width: 100% !important; width: 100% !important;}
.contest-hill {position: absolute; width: 100%; top: clamp(80px,calc(200 / 1599 * 100vw),200px); height: 100%; }
.contest-hill img { width: 100%; height: 100%; object-fit: cover;}

.section-title {position: relative; width: clamp(100px,calc(170 / 1599 * 100vw),200px); height: auto; aspect-ratio: 200 / 80 ; display: flex;align-items: center; justify-content: center; margin: 0 auto; margin-bottom: clamp(14px,calc(24 / 1024 * 100vw),28px);}
.section-title .section-title-icon {position: absolute; top: 0; left: 0;}
.section-title .section-title-icon > img {width: 100%; }
.section-title .section-title-text {color: var(--green-color); font-size: clamp(12px,calc(16 / 1599 * 100vw),20px); font-weight: 700; line-height: 1; letter-spacing: -0.6px; position: relative; padding-top:2%;}

.section .container {display: flex; flex-direction: column; align-items: center; justify-content: center;}
.section .header-wrap {display: flex; flex-direction: column; align-items: center; justify-content: center;}

@media screen and (min-width:2599px){
  .contest-hill img {margin-top: clamp(-200px,calc(-250 / 2599 * 100vw),-250px);}
}
@media screen and (min-width:2399px){
  /* .contest-hill {top:0;} */
  .contest-hill img {height: auto;}
}

@media screen and (max-width:1199px){
  .contest-hill {top:clamp(80px, calc(140 / 1199 * 100vw), 140px);}
}
@media screen and (max-width: 768px){
  .contest-hill {top:clamp(310px, calc(320 / 768 * 100vw), 320px);}
}


/* about */
@keyframes decoAni {

}

.about { position: relative;}
.about .container {position: relative; }
.about .about-deco-icon {position: absolute; top: 50%; left: calc(50% + clamp(80px,calc(400 / 1499 * 100vw),400px)); max-width:229px; width:clamp(100px,calc(229 / 1599 * 100vw),229px); height: auto; aspect-ratio: 229 / 194; animation: floating-ani 1.5s linear infinite alternate;}
.about .contest-sky { width: 100%; position: relative;  z-index: -1;}
.about .contest-sky .back-sky {position: absolute; background: linear-gradient(180deg, #FFEC83 40.93%, rgba(255, 236, 131, 0.2) 77.17%); width: 100%; height: 250%;  pointer-events: none;}
.about-scroll-wrap {position: relative; width: 100%; padding-top: clamp(80px,calc(160 / 1399 * 100vw), 100px);}
.about-scroll-wrap .header-wrap {width: 100%; max-width: 1400px; margin: 0 auto;}
.about-scroll-wrap .title-wrap {height:100%; overflow: hidden; width: 100%;position: relative; display: flex; align-items: center; justify-content: center; }
.about-scroll-wrap .section-title-text {position: absolute; width: 100%;   text-align: center;}
.about-scroll-wrap .about-logo { min-height: clamp(80px,calc(150 / 1599 * 100vw), 200px); width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: clamp(30px,calc(40 / 1599 * 100vw),62px); position: relative;}
.about-scroll-wrap .about-logo-img {position: absolute;}
.about-scroll-wrap .about-logo-img.about-logo-1 {width:clamp(147px,calc(240 / 1599 * 100vw),324px)}
.about-scroll-wrap .about-logo-img.about-logo-2 {width:clamp(197px,calc(320 / 1599 * 100vw),457px)}
.about-scroll-wrap .about-desc-wrap {min-height: clamp(100px,calc(150 / 1399 * 100vw), 150px);  width: 100%; display: flex; align-items: center; justify-content: center;  position: relative; }
.about-scroll-wrap .about-desc {position: absolute; color: var(--font-color); text-align: center; font-size: clamp(14px,calc(24 / 1399 * 100vw),28px); line-height: 1.57; letter-spacing: -0.84px; top:0;}
.about-scroll-wrap .ani-1 {opacity: 1; transform: translateY(0);  transition: transform 0.5s linear, opacity .2s ;}
.about-scroll-wrap .ani-2 {opacity: 0; transform: translateY(30px);  transition: transform 0.5s linear, opacity .2s ;}
.about .contest-visual-wrap {position: relative; width: 100%; height: 100%; padding-top: clamp(100px,calc(170 / 1399 * 100vw),170px);}
.about .about-visual-wrap {position: relative;width:clamp(260px,calc(967 / 1599 * 100vw ),967px); height: clamp(140px,calc(519 / 1599 * 100vw),519px); margin: 0 auto; display: flex; align-items: flex-end; }
.about .about-visual-bg {margin-left: -6%;  object-fit: cover; object-position: center; }
.about .about-visual-character-wrap {position: absolute; }
.about .about-visual-character-wrap.wrap-1 {top:clamp(50px, calc(157 / 1599 * 100vw),157px); left:clamp(2px,calc(120 / 1599 * 100vw),120px); width: clamp(68px,calc(270 / 1599 * 100vw ),270px); height: clamp(68px,calc(270 / 1599 * 100vw ),270px); display: flex; align-items: center;justify-content: center;}
.about .about-visual-character-wrap.wrap-1 .about-visual-character-1 {animation: character-ani 1s ease-in-out infinite alternate; transform-origin: bottom; }
.about .about-visual-character-wrap .img-shadow {position: absolute; bottom:0; left:50%; transform:translate(-50%,0); }
.about .about-visual-character-wrap.wrap-1 .img-shadow {max-width:162px; width: 60%; transform:translate(-37%,0); }

.about .about-visual-character-wrap.wrap-2 { top: 0; left: calc(50% - clamp(40px, calc(130 / 1599 * 100vw), 130px)); width: clamp(73px, calc(257 / 1599 * 100vw), 257px); height: clamp(105px, calc(362 / 1599 * 100vw), 362px); }
.about .about-visual-character-wrap.wrap-2 .about-visual-character-2 {animation:character-ani 1s ease-in-out infinite alternate-reverse; transform-origin:bottom;}
.about .about-visual-character-wrap.wrap-2 .img-deco {width: clamp(20px,calc(82 / 1399 * 100vw), 82px); position: absolute;top:60%; right:calc(-12 / 1399 * 100vw); animation: character-deco .8s ease-in-out .5s infinite alternate; transform-origin: top;}
.about .about-visual-character-wrap.wrap-2 .img-shadow { width: 55%; max-width: 145px;}



@media screen and (min-width:3000px){
  .about .contest-visual-wrap {padding-top:clamp(200px,calc(250 / 3000 * 100vw), 300px) }
}

@media screen and (min-width:1300px) and (max-height:920px) {
  .about-scroll-wrap {padding-top:100px; }
  .floating-inner {bottom:20px;}
  .about-scroll-wrap .about-logo {min-height:clamp(80px,calc(120 / 1599 * 100vw), 160px);}

}

@media screen and (max-width: 1299px) {
  .about-scroll-wrap .about-logo { min-height: clamp(80px,calc(110 / 1299 * 100vw), 160px);}
}

@media screen and (max-width: 768px) {
  .about .about-deco-icon {display: none;}
}

@media screen and (max-width: 499px){
  .about .about-visual-wrap {margin-top: 0;}
}

/* guide */
.guide {position: relative;}
.guide .section-title {width: clamp(100px,calc(180 / 1199 * 100vw),180px); height: auto; aspect-ratio: 180 / 72;}
.guide .desc {color: var(--point-color); text-align: center; font-size: clamp(10px,calc(20 / 1399 * 100vw ),20px); font-weight: 500; line-height: 1.6; letter-spacing: -0.6px; padding-top: 33px;}
.guide .container {position: relative; padding-block: clamp(90px,calc(140 / 1024 * 100vw),140px);}
.guide-logo {width: clamp(244px,calc(610 / 1399 * 100vw),610px); height: auto; aspect-ratio: 610 / 72;}
.guide .guide-container {padding-bottom: 60px; position: relative; max-width: 1160px;width:clamp(240px,calc(1160 / 1499 * 100vw), 1160px);  margin: 0 auto ; margin-top: clamp(30px,calc(84 / 1499 * 100vw),84px);}
.guide .guide-container .particles {position: absolute; top:120px; width: 459px; height: 187px;}
.guide .guide-container .particles-left {right: 100%;}
.guide .guide-container .particles-right {left: 100%;}


.guide .guide-crayon-wrap {width: 1840px; height: 590px; position: absolute; top:414px; left:50%; transform: translateX(-50%);}
.guide .guide-crayon-wrap img {width: auto; position: absolute;}
.guide .guide-crayon-wrap .guide-crayon-1 {width:154px; height:149px; left:0; top:125px; animation: floating-crayon-ani 4s linear infinite alternate;}
.guide .guide-crayon-wrap .guide-crayon-2 {width:167px; height:149px; right:90px; animation: floating-crayon-ani 3s linear infinite alternate;}
.guide .guide-crayon-wrap .guide-crayon-3 {width:183px; height:130px; right:calc(100% - 50px); top:460px; animation: floating-crayon-ani 2.5s linear infinite alternate;}

.grass-wrap {position: absolute; top:-24%; left:0; width: 100%; height: clamp(80px,calc(337 / 1599 * 100vw),337px); z-index: 2; pointer-events: none;}
.grass-wrap img {position: absolute; bottom:0; max-width: 692px; height: auto; width: clamp(163px,calc(692 / 1599 * 100vw),692px); aspect-ratio:  692 / 338;}
.grass-wrap .grass-left {left:0; transform:translateX(-100%)}
.grass-wrap .grass-right {right:0; transform:translateX(100%)}

.guide .guide-container .guide-thumb {max-width: 560px; width: 100%; height: auto; aspect-ratio: 560 / 784; position: relative; border:10px solid #fff;}
.guide .guide-container .guide-thumb .coming-soon-wrap {position: absolute; top:0; left:0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; display: none;}
.guide .guide-container .guide-thumb .coming-soon-wrap .dimmer {position: absolute; top:0; left:0; width: 100%; height: 100%; background: #04160C; opacity: 0.65; mix-blend-mode: multiply;}
.guide .guide-container .guide-thumb .coming-soon-wrap .coming-soon-text {color:#fff; letter-spacing: -3%; text-align: center; position: relative; display: flex; flex-direction: column; align-items: center;}
.guide .guide-container .guide-thumb .coming-soon-wrap .coming-soon-text .tit { font-weight: 700; font-size: clamp(16px,calc(32 / 1399 * 100vw),32px); line-height: 1.37;  padding-bottom: 20px;}
.guide .guide-container .guide-thumb .coming-soon-wrap .coming-soon-text .sub-tit { font-size: clamp(12px,calc(24 / 1399 * 100vw),24px); line-height: 1.3; }
.guide .guide-container .guide-content {max-width: 560px; width: 100%; height: auto; aspect-ratio: 560 / 784;  position: relative; display: flex;align-items: center;justify-content: center; padding: clamp(10px,calc(64 / 1399 * 100vw),64px) clamp(10px, calc(40 / 1300 * 100vw),40px) ;}
.guide .guide-container .guide-content .guide-content-bg {position: absolute;top:0; left:0; width: 100%; height: 100%; object-fit: cover; }
.guide .guide-container .guide-content .guide-content-img {position: relative;}

.guide .guide-container .guide-thumb .thumb {width: 100%; height: 100%;}
.guide .guide-container .guide-thumb picture {width: 100%; height: 100%;}
.guide .guide-container .guide-thumb picture img {width: 100%; height: 100%;}

/* coming soon 상태 */
.guide .guide-container.status-coming-soon .guide-thumb .coming-soon-wrap {display: flex;}
.guide .guide-container.status-coming-soon ~ .link-button {opacity: 0; width: 0; pointer-events: none;}


/* 반응형 슬라이드 작업 */
.guide-swiper .swiper-wrapper {display: flex;  gap: clamp(0px, calc(40 / 1160 * 100vw), 40px);}
.guide-swiper .swiper-navigation {display: none;}


@media screen and (max-width: 1499px){
  .guide-swiper .swiper-wrapper {display: grid; grid-template-columns: repeat(2,1fr);}
}


@media screen and (max-width: 768px){
  .grass-wrap {top:-13%;}
  body:has(.guide-container.status-coming-soon) .grass-wrap {top:-18%;}
  .guide .guide-crayon-wrap {display: none;}
  .guide .container {padding-inline: clamp(5px,calc(20 / 360 * 100vw),20px); padding-block: 90px; width: 100%;}
  .guide .desc {padding-top: 16px; line-height: 1.8; font-size: clamp(12px,calc(14 / 768 * 100vw),14px);}
  .guide .guide-container {margin-top: 30px; padding-bottom: 20px;}
  .guide .guide-container .particles {display: none;}
  .guide-swiper {overflow: hidden;}
  .guide-swiper .swiper-wrapper {display: flex;  gap: 0;}
  .guide-swiper .swiper-slide { flex: 0 0 auto; }
  .guide-swiper .swiper-wrapper .swiper-slide {width: 100%; height: auto; max-width: 100%;}
  .guide-container.status-coming-soon .guide-swiper .swiper-navigation {display: none;}
  .guide-swiper .swiper-navigation {width: 100%; display: flex; align-items: center; justify-content: space-between; position: absolute; height: 40px; top: calc(100% + 2px)}
  .guide-swiper .swiper-navigation .btn {width: clamp(30px,calc(40 / 360 * 100vw),40px); height: clamp(30px,calc(40 / 360 * 100vw),40px); background: var(--green-color); border-radius: 50%; display: flex;align-items: center;justify-content: center; }
  .guide-swiper .swiper-navigation .swiper-button-prev {left:0;}
  .guide-swiper .swiper-navigation .swiper-button-next {right:0;}
  .guide-swiper .swiper-navigation .btn img {width: 9px;}
  .guide-swiper .btn.swiper-button-disabled {background: #DDDDDD; opacity: 1;}
}

@media screen and (max-width:360px){
  .link-button {font-size:14px; max-width: clamp(130px, calc(180 / 360 * 100vw), 180px); height:clamp(30px, calc(40 / 360 * 100vw), 40px); width: ;}
  .guide .guide-container {padding-bottom: 0;}
  .guide-swiper .swiper-navigation {height: 30px; top:calc(100% + 8px)}
  .guide .desc {word-break: keep-all;}
  .guide .desc br {display: none; }
}

/* gallery */
.gallery {padding-block: clamp(80px,calc(180 / 1399 * 100vw),180px) clamp(40px,calc(150 / 1399 * 100vw),150px); position: relative; background-color: #FFF6D9; margin-top: -1px; z-index: 3;}
.gallery .gallery-logo {padding-bottom: 34px;}
.gallery .header-wrap {padding-bottom: 80px; }
.gallery .container {position: relative;z-index: 8;}
.gallery-bg {position: absolute; top:0; left:0; width: 100%; height: 100%;}
.gallery-award-bg {position: absolute; top:0; left:0; width: 100%; height: 100%; object-fit: cover;}
.gallery-back-deco {position: absolute; top:0; left:0; width: 100%; height: 100%; object-fit: cover;}
.gallery-back-deco-left {position: absolute; top:clamp(40px, calc(100 / 1399 * 100vw), 100px); object-fit: cover; width:clamp(100px,calc(345 / 1599 * 100vw),395px); aspect-ratio: 395 / 311; left:5%; animation: floating-ani 1s linear infinite alternate;}
.gallery-back-deco-right {position: absolute; top:clamp(0px,calc(50 / 1399 * 100vw),30px); object-fit: cover; width: clamp(60px,calc(250 / 1599 * 100vw),308px); height:auto; aspect-ratio: 308 / 298; right:-10%;  animation: floating-ani 1.5s linear infinite alternate;}
.gallery-container {position: relative;width: 100%; height: clamp(300px,calc(600 / 1024 * 100vw),600px)}
.gallery-container .gallery-award-wing {position: absolute; top:-60px; left:50%; transform: translateX(-50%); z-index: 0; width: 720px;}
.gallery-container .gallery-award-wing img {transition: transform .3s ease;}

.gallery-container .gallery-swiper { width: 100%; height: 100%;}
.gallery-container .gallery-swiper .swiper-wrapper {display: flex;align-items: center; width: 100%; height: 100%;}
.gallery-container .gallery-item.award-grand {--award-theme: #FFB200;}
.gallery-container .gallery-item.award-silver {--award-theme: #AFAFAF;}
.gallery-container .gallery-item.award-bronze {--award-theme: #D39F3C;}
.gallery-container .gallery-item.award-green-painter {--award-theme: #69BA5F;}
.gallery-container .gallery-item.award-imagination {--award-theme: #F4A69A;}
.gallery-container .gallery-item .card .award-caption { display: flex; align-items: flex-start; max-width:380px; opacity: 0; transition: .3s ease; position: relative;}
.gallery-container .gallery-item .card .award-caption .txt-box {display: flex; align-items: center; padding-block:20px; width: 100%;}
.gallery-container .gallery-item .card .award-caption .award {padding: .3rem 1rem; background-color:var(--award-theme); font-weight: 700; color:#fff; border-radius: 50px; margin-right: 10px; flex-shrink: 0;}
.gallery-container .gallery-item .card .award-caption .tit {font-size: clamp(20px,calc(24 / 1599 * 100vw),24px); font-family: 'IsYun'; line-height: 1.2; letter-spacing: -0.72px; overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; width: 59%;}
.gallery-container .gallery-item .card .award-caption .award-icon {width: 56px; flex-shrink: 0; position: absolute; right:2px; top:-20px;}
.gallery-container .gallery-item .card .award-caption .award-icon img {flex-shrink: 0;}
.gallery-container .gallery-item .card picture img {width: 388px; border:6px solid #fff; height: 288px; object-fit: cover; object-position: center; border-radius: 6px; overflow: hidden;}
.gallery-container .gallery-item { width: auto; height:auto; display: flex; align-items: center; justify-content: center; flex-shrink: 0;   will-change:transform;}
.gallery-container .gallery-item .gallery-inner { padding:0px clamp(5px,calc(20 / 768 * 100vw),20px); transform:scale(1); border-radius: 6px; position: relative;display: flex;flex-direction: column; transform-origin: center center;  justify-content: center; transition: .5s ease;}
.gallery-container .gallery-item .gallery-inner .card {border-radius: 6px; position: relative;display: flex;flex-direction: column; transform-origin: center center;  justify-content: center; transition: .5s ease;}
.gallery-container .gallery-item.swiper-slide-active {border-radius: 6px; position: relative; }
.gallery-container .gallery-item.swiper-slide-active .gallery-inner { transform:scale(1.2); transition: transform .6s ease; }
.gallery-container .gallery-item.swiper-slide-active .card picture img {border:none;}
.gallery-container .gallery-item.swiper-slide-active .card .award-caption {opacity: 1; transition: .5s ease .4s; }

.gallery-container .swiper-navigation {max-width: 680px; width: 100%; height: 60px;position: absolute; top:50%; left:50%; transform: translate(-50%,-100%); display: flex; align-items: center;justify-content: space-between; z-index: 9;}
.gallery-container .swiper-navigation .btn {width: 60px; height: 60px; background: var(--green-color); border-radius: 50%; display: flex;align-items: center;justify-content: center; }
.gallery-container .swiper-navigation .btn img {width: 14px;}

.gallery-container .gallery-item.swiper-slide-prev .gallery-inner {transform: translateX(-60px) scale(1);}
.gallery-container .gallery-item.swiper-slide-next .gallery-inner {transform: translateX(60px) scale(1);}



@media screen and (min-width: 1921px) {
  .gallery-back-deco-left { left:calc(50% - 900px); }
  .gallery-back-deco-right { left:calc(50% + 900px);}
}

@media screen and (max-width: 1399px) {
  .gallery .gallery-logo {width: clamp(200px,55vw,742px)}
}

@media screen and (max-width: 1024px){
  .gallery-container .gallery-award-wing { width: 650px; top:50%;transform:translate(-50%,-61%);}
  .gallery-container .gallery-item.swiper-slide-active .gallery-inner { transform:scale(1.1)}
  .gallery-container .gallery-item .card .award-caption .tit {font-size: clamp(12px,calc(20 / 1024 * 100vw),20px); width: 60%;}
  .gallery-container .gallery-item .card .award-caption .award {font-size: clamp(10px,1.56vw,16px ); padding: .3rem .5rem}
  .gallery-container .gallery-item .card .award-caption .txt-box {padding-block: 10px;}

  .gallery-container .swiper-navigation {max-width: 650px;}
  .gallery-container .swiper-navigation .btn {width: 40px; height: 40px;}
  .gallery-container .swiper-navigation .btn img {width: 10px;}

}

@media screen and (max-width: 768px){
  .gallery {padding-block: clamp(80px,calc(100 / 768 * 100vw),100px) clamp(50px,calc(60 / 768 * 100vw),60px);}
  .gallery-container .gallery-item .gallery-inner {padding: 0;}
  .gallery-back-deco-right {top:120px;}
  .gallery-container {height: clamp(250px,calc(400 / 768 * 100vw),400px)}
  .gallery-container .swiper-navigation {display: none;}
  .gallery .gallery-logo {padding-bottom: 16px; width: 200px;}
  .gallery .header-wrap {padding-bottom:30px;}
  .gallery-container .gallery-item.swiper-slide-active .gallery-inner {transform:scale(1);}
  .gallery-container .gallery-item .card .award-caption {max-width: 240px;}
  .gallery-container .gallery-item .card .award-caption .award-icon {width: 30px;}
  .gallery-back-deco-left { animation-name: floating-ani-sm; }
  .gallery-container .gallery-award-wing {width:329px; height: 285px; aspect-ratio: 329 / 285;transform:translate(-50%,-61%); }
  .gallery-container .gallery-item .card picture img {width: 240px; height: 180px;}
  .gallery-container .gallery-item.swiper-slide-prev .gallery-inner {transform: translateX(0px);}
  .gallery-container .gallery-item.swiper-slide-next .gallery-inner {transform: translateX(0px);}
}


/* community */
.community {position: relative; z-index: 4;}
.community .container {padding-block:clamp(60px,calc(170 / 1024 * 100vw),170px) clamp(120px, calc(277 / 1024 * 100vw),277px);}
.community .header-wrap {padding-bottom: 80px; position: relative; width: 100%;}
.community .header-wrap .floating-box {position: absolute; width: 100%; height: 100%;top: 0;}
.community .header-wrap .floating-box .icon {position: absolute; width: auto;}
.community .header-wrap .floating-box .icon-1 {top: -92px; left: -2%; animation:floating-ani 1.5s linear infinite alternate; width: clamp(35px,calc(116 / 1599 * 100vw),116px); aspect-ratio: 116 / 150;}
.community .header-wrap .floating-box .icon-2 {top: 0; left: 9.43%; animation:floating-ani 2s linear infinite alternate; width: clamp(24px,calc(77 / 1599 * 100vw),77px); aspect-ratio: 77 / 100;}
.community .header-wrap .floating-box .icon-3 {top: 8px; right: 3.5%; animation:floating-ani 2.5s linear infinite alternate; width: clamp(68px,calc(242 / 1599 * 100vw),242px); aspect-ratio: 242 / 140;}
.community .header-wrap .desc {padding-top: 29px; font-size: 20px; color:var(--point-color); text-align: center; font-weight: 500; line-height: 1.6; letter-spacing: -0.6px;}
.community .community-background {position: absolute; top:0; left:0; width: 100%; height: 100%; object-fit: cover ; }
.community .community-background img {width: 100%; height: 100%; object-fit: cover; object-position: center;}
.community .community-ls {display: flex; flex-direction: column; gap: 40px; width: 100%; position: relative;}
.community .community-ls .title { font-weight: 700; font-size: 24px; line-height: 20px; color:#111;}
.community .community-ls .latest-content {width: 100%; border-radius: 12px;  background: #FFF; border:1px solid #DDDDDD;  margin-top: 20px; overflow: hidden; height: auto;padding: 24px 32px; }
.community .community-ls .latest-content .latest-wrap {overflow: hidden; height: 32px;}
.community .community-ls .latest-content .latest-list {transition: 1s ease;}
.community .community-ls .latest-content .link { width: 100%; display: flex; justify-content: space-between; transition: .2s ease; gap: 1rem;}
.community .community-ls .latest-content .link .text {font-size: 20px;font-weight: 500; line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.community .community-ls .latest-content .link .date {font-weight: 500; font-size: 18px; line-height: 1.7; color:var(--font-color-9); white-space: nowrap;}
.community .community-ls .item-ls {display: flex;gap: 40px;}
.community .community-ls .item-ls .item {width: 100%; padding: 32px 32px 40px 40px; border-radius: 12px;transition: .3s ease;}
.community .community-ls .item-ls .item:nth-child(1) {background: #FFCF1A; }
.community .community-ls .item-ls .item:nth-child(2) {background: #67C55C;}
.community .community-ls .item-ls .item > a {width: 100%;}
.community .community-ls .item-ls .item .head {display: flex; justify-content: space-between; padding-bottom: 39px;}
.community .community-ls .item-ls .item .head .title {color:#fff; padding-top: 6px; font-size: 28px;}
.community .community-ls .item-ls .item .head .btn-arrow img {width: 7px;}
.community .community-ls .item-ls .item .content {display: flex; justify-content: space-between; align-items: flex-end;}
.community .community-ls .item-ls .item .content .text {color:#fff; font-size: 20px; line-height: 1.6; font-weight: 500;}
.community .community-ls .item-ls .item .content .icon {padding-right: 25px;}

@media (hover:hover) {
  .community .community-ls .item-ls .item:hover {transform:translateY(-5px);}
  .community .community-ls .latest-content:hover .link {color:var(--font-color-6);}
}

@media screen and (min-width: 2399px ){
  .community .container {padding-block:270px 350px;}
}
@media screen and (max-width: 1399px){
  .community .community-ls .item-ls .item .content .text {font-size:clamp(10px, 1.95vw, 20px);}
  .community .header-wrap .floating-box .icon-1 {left:5%}
  .community .header-wrap .floating-box .icon-2 {left:13.3%;}
}
@media screen and (max-width: 1024px){
  .community .community-ls {gap:clamp(12px, 3.91vw, 40px);}
  .community .community-ls .title {font-size:clamp(14px, 2.34vw, 24px);}
  .community .community-ls .item-ls {flex-direction: column; gap:clamp(12px, 3.91vw, 40px);}
  .community .community-ls .item-ls .item {padding:clamp(12px,2.93vw, 30px) clamp(10px,1.95vw, 20px ); border-radius: 6px;}
  .community .community-ls .item-ls .item .head {padding-bottom:clamp(14px, 4.69vw, 39px);}
  .community .community-ls .item-ls .item .head .title {font-size:clamp(14px, 2.34vw, 24px); padding-top: 0;}
  .community .community-ls .item-ls .item .content .text {font-size:clamp(12px, 1.95vw, 20px);}
  .community .community-ls .latest-content {padding:16px;}
  .community .community-ls .latest-content .latest-wrap {height:24px;}
  .community .community-ls .latest-content .link .text {font-size:clamp(12px, 1.95vw, 20px); }
  .community .community-ls .latest-content .link .date {font-size:clamp(12px, 1.95vw, 18px); }
  .community .header-wrap {padding-bottom: clamp(40px, 10.94vw, 80px);}
  .community .header-wrap .desc {font-size:clamp(12px, 2.34vw, 20px); padding-top:clamp(14px, 2.8vw ,29px)}
  .community .header-wrap .floating-box .icon-1 {width: clamp(35px, 9.72vw, 116px);top: clamp(-92px, -8.89vw, -32px);}
  .community .header-wrap .floating-box .icon-2 {width: clamp(25px, 6.94vw, 77px);top: clamp(-12px, -1.39vw, -5px);left: 14.43%;}
  .community .header-wrap .floating-box .icon-3 {width: clamp(69px, 19.17vw, 242px);top: 30%; right: -10%;}
}

@media screen and (max-width: 768px){
  .community .community-ls {flex-direction: column; gap: 12px;}
  .community .community-ls .latest-content {border-radius: 6px; padding:12px; margin-top: 8px;}
  .community .community-ls .latest-content .latest-wrap {height:18px;}
  .community .community-ls .item-ls {gap: 12px;}
  .community .community-ls .item-ls .item .content .icon {padding-right: 0; }
  .community .community-ls .item-ls .item .content .icon img {width: 50px;}
  .community .community-ls .item-ls .item .head .btn-arrow img {width: 4px;}
  .community .section-logo {width: 112px;}
  .community .header-wrap .floating-box {height: 140px;}
  .section.community {background: linear-gradient(to bottom, #fff 0%,#EEFBFF 100%);}
  .community .community-background::before {content:""; position: absolute; background-image: url('/atp_gcontest/front/assets/images/main/commu-bg2.png?ver=1'); bottom:-10px;left:-10px;  width:100%; height: auto; aspect-ratio: 360 / 183; background-size: cover;}
  .community .community-background img {display: none;}
}

/* 메인 이벤트 팝업 */
.main-event-popup {background-color: rgba(0, 0, 0, 0.7);}
.main-event-popup .modal-wrap { width: 560px; max-width: 94vw;  opacity: 1;}
.main-event-popup .modal-cont { padding: 0;  overflow: visible; }
.main-event-popup-content { position: relative; }
.main-event-popup-counter { position: absolute; top: 16px; right: 100px; padding: 4px 10px; border-radius: 20px; font-size: 12px; color: #C8CCCF; box-shadow: 0 1px 4px rgba(0,0,0,0.08); z-index: 999; background: #758086;}
.main-event-popup-counter-current {color: #fff;}
.main-event-popup-carousel { position: relative; display: flex; align-items: center; gap: 20px; }
.main-event-popup-arrow { flex-shrink: 0; width: 60px; height: 60px;  display: flex; align-items: center; justify-content: center; cursor: pointer; }
.main-event-popup-arrow img {width: 23px;}
.main-event-popup-track { overflow: hidden; width: 400px; height: 460px; position: relative;}
.main-event-popup-slide {  width: 100%; height: 100%; pointer-events: none; transition: .3s ease; overflow: hidden; border-radius: 10px;}
.main-event-popup-slide picture {width: 100%; height: 100%;}
.main-event-popup-img { max-width: 100%; height: 100%; object-fit: cover; object-position: center;}
.main-event-popup-footer {display: flex; align-items: center; justify-content: space-between; max-width: 400px; width: 100%; margin: 0 auto; padding: 12px .5rem}
.main-event-popup-checkbox { display: flex; align-items: center; gap: 8px; margin: 0; color: #fff; cursor: pointer; }
#eventPopupHideToday { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 2px solid #ccc; border-radius: 4px; cursor: pointer;}
.main-event-popup-close { font-size: 16px; color: #fff;  border: none; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: .5rem;}
.main-event-popup-close img {width: 20%;}

@media screen and (max-width: 768px) {
  .main-event-popup .modal-wrap { max-width: calc(100vw - 24px); }
  .main-event-popup-carousel { gap: 8px; }
  .main-event-popup-arrow { width: 32px; height: 32px; }
  .main-event-popup-arrow img { width: 12px; }
  .main-event-popup-track { width: calc(100vw - 88px); height: auto; aspect-ratio: 400 / 460; }
  .main-event-popup-counter { top: 10px; right: 52px; font-size: 11px; padding: 3px 8px; }
  .main-event-popup-footer { max-width: calc(100vw - 110px); padding: 10px 0; width: calc(100% - 100px);}
  .main-event-popup-checkbox { font-size: 13px; }
  .main-event-popup-close { font-size: 14px; }
}


/* button blob custom */
.blob-btn {color: var(--btn-text-color, #fff); border-radius:var(--btn-border-radius, 68px);  z-index: 1; position: relative;  outline: none; border: none; transition: color 0.5s; cursor: pointer; }
.blob-btn:before { border-radius: var(--btn-border-radius, 68px);  border: var(--btn-border-width, 1px) solid var(--btn-back-color, var(--green-color));  content: ""; z-index: 1; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.blob-btn .blob-btn__inner { background: var(--btn-back-color, transparent); border-radius:var(--btn-border-radius, 68px);  z-index: -1; overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.blob-btn .blob-btn__blobs { position: relative; display: block; height: 100%; filter: url("#goo"); }
.blob-btn .blob-btn__blob { position: absolute; top: 2px; width: 25%; height: 100%; background: var(--blob-color,#fff); border-radius: 100%; transform: translate3d(0, 150%, 0) scale(1.7); transition: transform 0.45s; }
.blob-btn .blob-btn__blob:nth-child(1) { left: 0%; transition-delay: 0s; }
.blob-btn .blob-btn__blob:nth-child(2) { left: 30%; transition-delay: 0.08s; }
.blob-btn .blob-btn__blob:nth-child(3) { left: 60%; transition-delay: 0.16s; }
.blob-btn .blob-btn__blob:nth-child(4) { left: 90%; transition-delay: 0.24s; }


@supports (filter: url("#goo")) {
  .blob-white .blob-btn__blob { transform: translate3d(0, 150%, 0) scale(1.4); }
}

/* 테마별 */
.blob-btn.white {--btn-back-color: var(--point-color); --hover-text-color: var(--point-color); --blob-color: #fff; --btn-border-width:2px;}
.blob-btn.green {--blob-color: var(--green-color); --hover-text-color: #fff;}

@media (hover:hover) {
  .blob-btn:hover {color: var(--hover-text-color, var(--green-color));  }
  .blob-btn:hover .blob-btn__blob { transform: translateZ(0) scale(1.7); }
  @supports (filter: url("#goo")) {
    .blob-white:hover .blob-btn__blob { transform: translateZ(0) scale(1.4); }
  }
}
@media screen and (max-width: 1399px){
  .blob-btn .blob-btn__inner  {display: none;}
  .blob-btn:before {display: none;}
}