@charset "utf-8";

:root {
  color-scheme: only light;
  --text: #1B1B1B;/*191C1E*/
  --theme: #029CEB;
  --theme-light: #00A0F0;
  --icon-circle: #E0F0FF;
  --res: max(100px, 5.20833vw);
}

@media screen and (max-width:1919px) {
  :root {
    --res: 100px;
  }
}
@media screen and (max-width:1279px) {
  :root {
    --res: 13.333vw;
  }
}


/* default */

* {
  text-rendering: optimizeLegibility;
  font-family: 'Noto Sans KR', sans-serif;
  font-style: normal;
  font-weight: 400;
  word-wrap: break-word;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: var(--text);
  font-size: var(--res);
  background:#F5F8FB
}

div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
table,
th,
td,
span,
small,
strong,
form,
fieldset,
legend,
select,
button,
input,
textarea,
figure,
figcaption {
  margin: 0;
  margin-block: 0;
  padding: 0;
  font-size:0;
  line-height:0;
  font-weight: inherit;
  font-style: inherit;
  color: inherit
}

fieldset,
li,
img {
  border: 0;
  vertical-align: baseline;
}

ul,
ol {
  list-style: none;
}

input,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

button {
  box-shadow: none;
  outline: 0;
  border: 0 none;
  background: transparent;
  cursor: pointer;
}

button::-moz-focus-inner {
  padding: 0;
}

a,
a:focus,
a:active,
a:hover {
  outline: none;
  box-shadow: none;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
a{display:inline-block}

select::-ms-expand {
  display: none;
}

select {
  -o-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0 none;
  outline: 0 none;
}

img,
video,
svg {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.screen-out,
.skip-link {
  position: absolute;
  display: block;
  right: 100%;
  bottom: 100%;
  width: 1px;
  height: 1px;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}

[data-title="true"]{
  font-family:'Black Han Sans', sans-serif !important;
}
[data-handwrite="true"]{
  font-family:'Nanum Pen Script', sans-serif !important;
}


/* common */
body {
  overflow-x: clip
}

section {
  display: block;
  position: relative;
  height: auto;
  z-index:1;
  overflow-x:hidden;
}
.section-bg{
  position:absolute;left:0;z-index:-1;
  left:0;top:0;bottom:0;right:0;width:100%;height:100%;
}

.section-inner {
  height: auto;
  z-index:1;
}

.section-inner,
.header-inner,
.footer-inner{
  position: relative;
  width: 100%;  
  margin: 0 auto;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
}


.floater{position:fixed;z-index:15;left:50%;bottom:0;transform:translate3d(-50%, 0, 0);pointer-events:none}
.floating-btn{position:absolute;pointer-events:auto;left:100%;bottom:.48rem;width:1.28rem;height:auto;}
.floating-btn p{position:absolute;bottom:0;transform:translate3d(-50%, 25%, 0);left:50%;text-align:center;color:#fff;font-weight:400;font-size:.12rem;line-height:.16rem;padding:.04rem .09rem;border-radius:.12rem;background:var(--theme-light);white-space:nowrap;width:fit-content}

@media (min-width:1280px) {  
  .section-inner,
  .header-inner,
  .footer-inner{max-width:14.4rem;padding:0 1.2rem}
  .floater{max-width:14.4rem;width:calc(100% - 2.4rem)}
  .floating-btn{margin-left:-.64rem}
  
  .mo-only {display:none}
  .pc-only {display:block}
}
@media (max-width:1279px) {  
  .header-inner,
  .footer-inner{padding:0 .64rem}
  .section-inner{padding:.64rem}
  .floater{width:calc(100% - 1.28rem)}
  .floating-btn{margin-left:-.8rem}

  .mo-only {display:block}
  .pc-only {display:none}
}

.ci{display:flex;align-items:center;justify-content:flex-start}
.ci svg:nth-child(1){fill:var(--theme)}
.ci > svg{display:block;flex:none}

main .content-container{display:flex;width:100%;align-items:center;justify-content:space-between;position:relative;}
main .content-container > .content{flex:none;width:fit-content;}
main .content-container > .blank{flex:1;position:relative;}
main .content-container > .blank .kv{position:absolute}

.btn{display:flex;position:relative;align-items:center;justify-content:center;z-index:1}
.btn::before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:var(--theme);z-index:-1}
.btn:hover::before{background:var(--theme-light)}
.btn:active::before{transform:scale3d(.98,.98,1)}
.btn .txt{flex:none;font-size:.24rem;font-weight:700;line-height:1.25;color:#fff;}
.btn .icon{flex:none;fill:#fff;transform:translate3d(0, 10%, 0)}

.btn.min{padding:.13rem .4rem;width:fit-content;gap:.13rem;}
.btn.min::before{border-radius:.1rem}
.btn.min .txt{font-size:.16rem}
.btn.min .icon{width:.13rem}

.description{font-weight:500;letter-spacing:-.03em;line-height:1.5}
.description > strong{font:inherit;letter-spacing:inherit;color:var(--theme);font-weight:700}
.sec-title{font-weight:400;letter-spacing:-.025em;line-height:1.1;color:var(--text);margin-bottom:-.25em}
.sec-title > strong{font:inherit;letter-spacing:inherit;color:var(--theme)}
.sub-title{color:var(--text);font-weight:400;letter-spacing:-.01em;line-height:1}

.section-inner .video{background:rgba(0,0,0,.2);border-radius:.12rem;overflow:clip;position:relative}
.section-inner .video::before{content:"";display:block;width:100%;padding-top:56.25%}
.section-inner .video .btn-play{position:absolute;left:-1px;width:calc(100% + 2px);top:-1px;height:calc(100% + 2px);background-repeat:no-repeat;background-size:cover;background-position:center}
.section-inner .video .btn-play > img{width:100%;height:100%;object-fit:fill}
.section-inner .video .btn-play .icon{position:absolute;top:50%;left:50%;width:.6rem;height:.6rem;transform:translate3d(-50%, -50%, 0);background:var(--theme);border-radius:100%}
.section-inner .video .btn-play .icon > svg{fill:#fff;width:30%;position:absolute;top:50%;left:54%;transform:translate3d(-50%, -50%, 0)}


#doc_main .swiper-pagination{top:auto;bottom:0}
#doc_main .swiper-pagination-bullet{width:.12rem;height:.12rem;margin-left:.06rem;margin-right:.06rem;opacity:1;background:#d9d9d9}
#doc_main .swiper-pagination-bullet-active{background:var(--theme)}

#doc_main .swiper-button-prev{top:46%;left:.2rem}
#doc_main .swiper-button-next{top:46%;right:.2rem}
#doc_main .swiper-button-prev > svg,
#doc_main .swiper-button-next > svg{width:.15rem;fill:var(--theme);position:absolute;top:50%;left:50%;}
#doc_main .swiper-button-prev > svg{transform:translate3d(-55%, -50%, 0) rotate3d(0,0,1,180deg)}
#doc_main .swiper-button-next > svg{transform:translate3d(-45%, -50%, 0)}
#doc_main .swiper-button-prev:after,
#doc_main .swiper-button-next:after{content:"";padding:0;margin:0;background:#fff;width:100%;top:0;left:0;height:100%;border-radius:100%;box-shadow:0 .04rem .04rem 0 rgba(0,0,0,.25)}


@media (min-width:1280px) {
  .description{font-size:.24rem}
  .sec-title{font-size:.72rem}
  .sub-title{font-size:.4rem}
  #doc_main .swiper-button-prev,
  #doc_main .swiper-button-next{width:.45rem;height:.45rem}
  .btn{padding:.22rem 0;gap:.2rem}
  .btn::before{border-radius:.14rem}
  .btn .txt{font-size:.24rem}
  .btn .icon{width:.2rem}
}
@media (max-width:1279px) {
  .description{font-size:.2rem}
  .sec-title{font-size:.48rem}
  .sub-title{font-size:.28rem}
  #doc_main .swiper-button-prev,
  #doc_main .swiper-button-next{width:.4rem;height:.4rem}
  .btn{padding:.16rem 0;gap:.1rem}
  .btn::before{border-radius:.07rem}
  .btn .txt{font-size:.14rem}
  .btn .icon{width:.13rem}
}


/* header */
header{position:fixed;top:0;left:0;width:100%;z-index:10;background-color:#fff;}
.header-inner{display:flex;align-items:center;}
.site-name{width:1.3rem;flex:none}
.site-name a{padding:.06rem 0 .05rem}
.site-name svg{fill:var(--theme)}

@media (min-width:1280px) {   
  .header-inner{height:.8rem;justify-content:space-between}
  .header-inner nav{flex:1}
  .header-inner nav ul{width:100%;display:flex;justify-content:flex-end;gap:.48rem}
  .header-inner nav li{flex:none;font-size:0;line-height:0}
  .header-inner nav a{font-size:.16rem;line-height:1.2;display:inline-block;padding-bottom:.2em;letter-spacing:-.015em;color:#9f9f9f;position:relative;}
  .header-inner nav a::before{
    content:"";display:block;position:absolute;bottom:0;left:50%;height:1px;background:var(--theme);transform:translateX(-50%);will-change:width;transition:width .3s ease-in-out;width:0
  }

  .header-inner nav a:hover,
  .header-inner nav a.active,
  .header-inner nav a[aria-current="page"] {
    color: var(--theme);
    font-weight: 700;
  }
  .header-inner nav a.active::before,
  .header-inner nav a[aria-current="page"]::before{width:106%;}
}
@media (max-width:1279px) {  
  .header-inner{height:.64rem;justify-content:flex-end}
  header nav{display:none}
}


/* footer */
footer{background:#3D4148}
.footer-inner{padding-top:1.2rem;padding-bottom:1.2rem}
.company-info .ci{gap:.12rem}
.company-info .ci svg:nth-child(2){fill:#fff}
.company-info address{padding-bottom:.05rem}
.company-info address p{display:block;font-weight:500;font-size:.16rem;opacity:.7;line-height:1.5;color:#fff}
.company-info .connect-title{color:#028AE6;font-size:.12rem;font-weight:700;line-height:.2rem;text-indent:.5em;padding-top:.24rem}
.channel-links{padding-top:.16rem}
.channel-links > li{font-size:0;line-height:0;padding:.05rem 0}
.channel-links a{width:fit-content;display:flex;height:.3rem;align-items:center;justify-content:flex-start}
.channel-links a > i{display:block;flex:none}
.channel-links a > span{color:#fff;font-size:.16rem;opacity:.7;line-height:1.5;flex:1;font-weight:400}

.company-legal{position:relative;width:100%;padding-top:.32rem}
.company-legal::before{content:"";display:block;opacity:.1;height:1px;position:absolute;background:#fff;top:0;left:50%;transform:translateX(-50%)}

.company-legal .policy-links{display:flex;align-items:center;justify-content:flex-start}
.company-legal .policy-links > li{display:block;width:fit-content;flex:none;font-size:0;line-height:0}
.company-legal .policy-links a,
.company-legal .copyright{font-weight:500;font-size:.16rem;line-height:.2rem;color:#fff;opacity:.5}


@media (min-width:1280px) {  
  .company-info{display:flex;align-items:flex-start;justify-content:space-between;height:2.96rem;}
  .company-info > section{flex:none;width:fit-content}
  .company-info .ci{height:.7rem;margin-bottom:.3rem}
  .company-info .ci svg:nth-child(1){width:.7rem}
  .company-info .ci svg:nth-child(2){width:.8rem}
  .channel-links{width:2.78rem}
  .channel-links a{gap:.08rem}
  .channel-links a > i{width:.3rem}

  .company-legal{display:flex;align-items:flex-start;justify-content:space-between;height:.2rem}
  .company-legal::before{width:calc(100% + 1.2rem)}  
  .company-legal .policy-links{width:2.72rem;gap:.34rem}
}

@media (max-width:1279px) {  
  .company-info{padding-bottom:.58rem}
  .company-info > section{width:100%}
  .company-info .ci{height:1.1rem;margin-bottom:.32rem}
  .company-info .ci svg:nth-child(1){width:1.1rem}
  .company-info .ci svg:nth-child(2){width:1.24rem}
  .channel-links a{gap:.05rem}
  .channel-links a > i{width:.25rem}

  .company-legal::before{width:100%}
  .company-legal .policy-links{width:100%;gap:.21rem;padding-top:.36rem}
}


/* Main */
#Main .section-bg{background:url(img/main-kv.jpg) no-repeat center center}
#Main .content-container{height:8.3rem;justify-content:flex-start}
#Main .cmp-title{color:var(--theme);font-weight:900;font-size:.2rem;line-height:.95;letter-spacing:-.01em}
#Main .sec-title{letter-spacing:-.02em;line-height:.95;margin-bottom:-.175em}
#Main .description{color:#46768E}


@media (min-width:1280px) {  
  #Main .section-bg{background-size:cover}
  #Main .cmp-title{font-size:.24rem;padding-bottom:.6rem;padding-top:.98rem}
  #Main .sec-title{font-size:.96rem}
  #Main .description{padding:.6rem 0;font-size:.2rem}
}
@media (max-width:1279px) {
  #Main .section-inner{padding-top:0;padding-bottom:0}
  #Main .section-bg{background-size:max(8.6rem, 100%) auto}
  #Main .cmp-title{font-size:.2rem;padding-bottom:.16rem}
  #Main .sec-title{font-size:.64rem}
  #Main .description{padding:.3rem 0;font-size:.16rem}
}



#Main .cmp-title,
#Main .sec-title,
#Main .description,
#Main .btn{opacity:0;transform:translate3d(.2rem, 0, 0);will-change:opacity, transform;transition:opacity .3s ease-out, transform .5s ease-out}

#Main .in-view .cmp-title,
#Main .in-view .sec-title,
#Main .in-view .description,
#Main .in-view .btn{opacity:1;transform:translate3d(0,0,0)}

#Main .in-view .cmp-title{transition-delay:.25s}
#Main .in-view .sec-title{transition-delay:.35s}
#Main .in-view .description{transition-delay:.5s}
#Main .in-view .btn{transition-delay:.65s}


/* Organization */
#Organization .sec-title{letter-spacing:-.02em;line-height:1.1}
#Organization .ci > svg:nth-child(2){fill:var(--text)}
#Organization .content.video::before{padding-top:68.5%}
#Organization .description + .description{margin-top:1.4em}

@media (min-width:1280px) {  
  #Organization .section-inner{height:8.8rem;display:flex;flex-direction:column;justify-content:center;align-items:start}
  #Organization .sec-title{font-size:.72rem}
  #Organization .ci{height:1.87rem;gap:.41rem;margin-top:.58rem}
  #Organization .ci > svg:nth-child(1){width:1.6rem}
  #Organization .ci > svg:nth-child(2){width:2.07rem}
  #Organization .content-container{margin-top:-.8rem;align-items:flex-end;flex-direction:row-reverse;gap:.3rem}
  #Organization .content.video{flex:1;max-width:5.12rem}
  #Organization .content:not(.video){padding-top:1.15rem}
  #Organization .description{font-size:.2rem}
}
@media (max-width:1279px) {  
  #Organization .sec-title{font-size:.44rem;float:left;padding-top:.16rem}
  #Organization .content-container{clear:both;display:block;padding-top:.4rem;padding-bottom:.12rem}
  #Organization .ci{height:.82rem;gap:.08rem;float:right;margin-top:.18rem}
  #Organization .ci > svg:nth-child(1){width:.68rem}
  #Organization .ci > svg:nth-child(2){width:.87rem}
  #Organization .content.video{width:100%;margin-bottom:.36rem}
  #Organization .description{font-size:.21rem;width:108%}
}


#Organization .sec-title,
#Organization .ci,
#Organization .video,
#Organization .description{opacity:0;will-change:opacity, transform;transition:opacity .3s ease-out, transform .5s ease-out}

@media (min-width:1280px) {  
  #Organization .sec-title,
  #Organization .ci,
  #Organization .description{transform:translate3d(.2rem, 0, 0);}
  #Organization .video{transform:translate3d(-.2rem, 0, 0)}
  #Organization .in-view .sec-title{transition-delay:.25s}
  #Organization .in-view .ci{transition-delay:.35s}
}
@media (max-width:1279px) {  
  #Organization .sec-title,
  #Organization .ci,
  #Organization .description{transform:translate3d(0, .2rem, 0);}
  #Organization .video{transform:translate3d(0, .2rem, 0)}
  #Organization .in-view .sec-title,
  #Organization .in-view .ci{transition-delay:.3s}
}

#Organization .in-view .sec-title,
#Organization .in-view .ci,
#Organization .in-view .video,
#Organization .in-view .description{opacity:1;transform:translate3d(0,0,0)}

#Organization .in-view .sec-title{transition-delay:.25s}
#Organization .in-view .ci{transition-delay:.35s}
#Organization .in-view .video{transition-delay:.5s}
#Organization .in-view .description:nth-child(1){transition-delay:.6s}
#Organization .in-view .description:nth-child(2){transition-delay:.65s}




/* Story */
#Story .sec-title,
#Story .description{text-align:center;}
#Story .description{letter-spacing:-.03em;padding:.3rem 0}
#Story .video{margin:0 auto;border-radius:.16rem}
#Story .video .btn-play .icon{width:.8rem;height:.8rem}

@media (min-width:1280px) {  
  #Story .section-inner{height:8rem;display:flex;flex-direction:column;justify-content:center;align-items:center}
  #Story .content.video{width:8.4rem}
}
@media (max-width:1279px) {  
  #Story .content.video{width:100%}
  #Story .description{width:116%;margin-left:-8%}
}


#Story .sec-title,
#Story .video,
#Story .description{opacity:0;transform:translate3d(0, .2rem, 0);will-change:opacity, transform;transition:opacity .3s ease-out, transform .5s ease-out}

#Story .in-view .sec-title,
#Story .in-view .video,
#Story .in-view .description{opacity:1;transform:translate3d(0,0,0)}

#Story .in-view .sec-title{transition-delay:.25s}
#Story .in-view .description{transition-delay:.35s}
#Story .in-view .video{transition-delay:.5s}



/* Archive */
#Archive .description{letter-spacing:-.03em;padding:.4rem 0;line-height:1.6}
#Archive .swiper{margin:0 auto;padding-bottom:.5rem;position:relative;overflow:visible;}
#Archive .swiper-slide{border-radius:.16rem;position:relative;overflow:clip;transform-origin:center center;will-change:opacity, transform, transform-origin}
#Archive .swiper-slide::before{content:"";display:block;width:100%;padding-top:56.25%}
#Archive .swiper-slide > img{width:100%;height:100%;object-fit:cover;position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0)}
#Archive .swiper-slide:not(.swiper-slide-active){transform:scale3d(.775,.775,1);opacity:.4}
#Archive .swiper-slide.swiper-slide-prev{transform-origin:90% center}
#Archive .swiper-slide.swiper-slide-next{transform-origin:10% center}

.init #Archive .swiper-slide.swiper-slide-prev,
.init #Archive .swiper-slide.swiper-slide-next,
.init #Archive .swiper-slide.swiper-slide-active{transition:all .4s ease-in-out}

@media (min-width:1280px) {  
  #Archive .section-inner{height:9.2rem;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
  #Archive .swiper{width:8.4rem;}
}
@media (max-width:1279px) {  
  #Archive .swiper{width:100%}
}


#Archive .sec-title,
#Archive .description,
#Archive .swiper{opacity:0;transform:translate3d(0, .2rem, 0);will-change:opacity, transform;transition:opacity .3s ease-out, transform .5s ease-out}

#Archive .in-view .sec-title,
#Archive .in-view .description,
#Archive .in-view .swiper{opacity:1;transform:translate3d(0,0,0)}

#Archive .in-view .sec-title{transition-delay:.25s}
#Archive .in-view .description{transition-delay:.35s}
#Archive .in-view .swiper{transition-delay:.5s}




/* Situation */
#Situation .description + .description{margin-top:1.6em}
#Situation .swiper{width:100%;border-radius:.12rem;box-shadow:0 0 .3rem 0 rgba(0,0,0,.1);}
#Situation .swiper-slide{position:relative;overflow:clip}
#Situation .swiper-slide::before{content:"";display:block;width:100%;padding-top:33.334%}
#Situation .swiper-slide .box{position:absolute;left:0;top:0;width:100%;height:100%;background:#fff;display:flex;align-items:stretch;justify-content:center}
#Situation .swiper-slide .thumbnail{flex:0.425;overflow:hidden;position:relative}
#Situation .swiper-slide .thumbnail > img{width:100%;height:100%;object-fit:cover;position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0)}
#Situation .swiper-slide .detail{flex:0.575;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 .3rem;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
#Situation .statistics-controls{display:block;width:100%;height:.42rem;position:relative;}
#doc_main #Situation .swiper-button-prev{top:auto;transform:translate3d(-100%, 0, 0)}
#doc_main #Situation .swiper-button-next{top:auto;transform:translate3d(100%, 0, 0)}

#Situation .detail .title{flex:none;display:flex;width:100%;font-weight:500;align-items:center;border-bottom:.01rem solid rgba(217, 217, 217, .2)}
#Situation .detail .title > i{display:block;color:#fff;flex:none;text-align:center}
#Situation .detail .title > span{display:block;flex:1;text-align:left;letter-spacing:-.03em;}

#Situation .detail ul{flex:none;display:flex;width:100%;}
#Situation .detail ul > li{flex:auto;width:fit-content;display:flex;align-items:flex-start;justify-content:space-between;flex-direction:column;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#Situation .detail ul > li + li{position:relative;}
#Situation .detail ul > li + li::before{content:"";display:block;position:absolute;top:0;left:0;width:.01rem;height:100%;background:rgba(217, 217, 217, .2)}
#Situation .detail .item-name,
#Situation .detail .item-name small{display:block;flex:none;font-weight:500}
#Situation .detail .item-stats{display:block;flex:none;display:flex;align-items:flex-end;justify-content:flex-start;}
#Situation .detail .item-stats small{flex:1;padding-bottom:.25em;line-height:1.25}
#Situation .detail .item-stats strong{flex:none;width:fit-content;font-weight:700;letter-spacing:-.015em;line-height:1.25}

#Situation .detail.no-1 .item-stats strong{color:#00A0F0}
#Situation .detail.no-2 .item-stats strong,
#Situation .detail.no-2 .item-name small{color:#34C759}
#Situation .detail.no-3 .item-stats strong{color:#FFB800}
#Situation .detail.no-1 .title > i{background:#00A0F0}
#Situation .detail.no-2 .title > i{background:#34C759}
#Situation .detail.no-3 .title > i{background:#FFB800}


@media (min-width:1280px) {  
  #Situation .section-inner{height:10.3rem;display:flex;flex-direction:column;justify-content:center;align-items:center}
  #Situation .content-container{align-items:stretch;gap:.4rem}
  #Situation .sub-title{padding-bottom:.1rem;padding-top:.15em}
  #Situation .description{font-size:.24rem}
  #Situation .swiper{margin-top:.6rem}
  #Situation .swiper-slide{gap:.2rem}
  #doc_main #Situation .swiper-button-prev{bottom:min(2.2rem, 15.2778vw);left:-.2rem}
  #doc_main #Situation .swiper-button-next{bottom:min(2.2rem, 15.2778vw);right:-.2rem}
  #Situation .detail{gap:.2rem}
  #Situation .detail .title{gap:.16rem;padding-bottom:.2rem}
  #Situation .detail .title > i{width:.55rem;border-radius:.08rem;font-size:.18rem;line-height:.21rem;padding:.08rem 0 .11rem}
  #Situation .detail .title > span{line-height:.42rem;font-size:.28rem}
  #Situation .detail ul{padding-top:.2rem;gap:.5rem} 
  #Situation .detail li+li{padding-left:.5rem} 
  #Situation .detail .item-stats{gap:.13rem}
  #Situation .detail .item-stats strong{font-size:.64rem}
  #Situation .detail .item-stats small{font-size:.18rem}
  #Situation .detail.no-1 ul{height:1.22rem}
  #Situation .detail.no-2 ul{height:1.78rem;gap:.16rem}
  #Situation .detail.no-2 li+li{padding-left:.16rem;}
  #Situation .detail.no-3 ul{height:1.52rem}
  #Situation .detail .item-name{line-height:.26rem}
  #Situation .detail .item-name small{font-size:.11rem;line-height:.14rem;padding-top:.1rem}
  #Situation .detail.no-1 .item-name{font-size:.24rem}
  #Situation .detail.no-2 .item-name{font-size:.18rem}
  #Situation .detail.no-3 .item-name{font-size:.2rem}
}
@media (max-width:1279px) {  
  #Situation .content-container{display:block;}
  #Situation .sub-title{padding-top:.4rem;padding-bottom:.24rem}
  #Situation .swiper{margin-top:.4rem}
  #doc_main #Situation .swiper-button-prev{bottom:max(1.25rem, 16.667vw);left:-.1rem}
  #doc_main #Situation .swiper-button-next{bottom:max(1.25rem, 16.667vw);right:-.1rem}
  #Situation .detail .title{gap:.15rem;padding-bottom:.12rem}
  #Situation .detail .title > i{width:.35rem;border-radius:.04rem;font-size:.12rem;line-height:.15rem;padding:.04rem 0 .05rem}
  #Situation .detail .title > span{line-height:.2rem;font-size:.16rem}  
  #Situation .detail ul{padding-top:.12rem;gap:.25rem;height:.95rem} 
  #Situation .detail li+li{padding-left:.25rem} 
  #Situation .detail .item-stats{gap:.06rem}
  #Situation .detail .item-stats strong{font-size:.32rem}
  #Situation .detail .item-stats small{font-size:.14rem}
  #Situation .detail.no-2 ul{gap:.1rem}
  #Situation .detail.no-2 li+li{padding-left:.1rem}
  #Situation .detail .item-name small{font-size:.06rem;line-height:.07rem;padding-top:.05rem}
  #Situation .detail.no-1 .item-name{font-size:.14rem;line-height:.2rem}
  #Situation .detail.no-2 .item-name{font-size:.1rem;line-height:.14rem}
  #Situation .detail.no-3 .item-name{font-size:.12rem;line-height:.16rem}
}



#Situation .sec-title,
#Situation .sub-title,
#Situation .description,
#Situation .swiper,
#Situation .statistics-controls{opacity:0;will-change:opacity, transform;transition:opacity .3s ease-out, transform .5s ease-out}
#Situation .swiper,
#Situation .statistics-controls{transform:translate3d(0, .2rem, 0);}


@media (min-width:1280px) {
  #Situation .sec-title,
  #Situation .sub-title,
  #Situation .description{transform:translate3d(.2rem, 0, 0);}
}
@media (max-width:1279px) {
  #Situation .sec-title,
  #Situation .sub-title,
  #Situation .description{transform:translate3d(0, .2rem, 0);}
}

#Situation .in-view .sec-title,
#Situation .in-view .sub-title,
#Situation .in-view .description,
#Situation .in-view .swiper,
#Situation .in-view .statistics-controls{opacity:1;transform:translate3d(0,0,0)}

#Situation .in-view .sec-title{transition-delay:.25s}
#Situation .in-view .sub-title{transition-delay:.3s}
#Situation .in-view .description{transition-delay:.45s}
#Situation .in-view .swiper{transition-delay:.6s}
#Situation .in-view .statistics-controls{transition-delay:.65s}



/* Graduate */
#Graduate .sec-title{margin-bottom:-.25em}  
#Graduate .sub-title{letter-spacing:-.03em;margin-bottom:1em}  
#Graduate .blank{letter-spacing:-.03em;z-index:-1;overflow:visible} 
#Graduate .description{line-height:1.5}  
#Graduate .description + .description{margin-top:1.5em}
#Graduate .kv{position:absolute;left:0;top:0;height:100%;width:100%;border-radius:5.22rem 0 0 4.88rem;overflow:clip}
#Graduate .kv > img{width:100%;height:100%;object-fit:cover;left:0;top:0;position:absolute}
#Graduate .notice-box{background:#fff;border-radius:.2rem;box-shadow:0 .14rem .34rem 0 rgba(0,0,0,.1);position:absolute;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} 
#Graduate .notice-box small{color:#555;display:block;line-height:1.5}
#Graduate .notice-box p{position:relative;width:100%}
#Graduate .notice-box p > span{font-weight:500;line-height:1.6;letter-spacing:-.015em;padding:.15em 0}
#Graduate .notice-box .icon{background:var(--icon-circle);border-radius:100%;position:absolute;right:100%;top:50%;transform:translate3d(0, -50%, 0)}
#Graduate .notice-box .icon > svg{fill:var(--theme);position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}
@media (min-width:1280px) {  
  #Graduate .section-inner{height:10.8rem;display:flex;flex-direction:column;justify-content:center;align-items:center}
  #Graduate .content-container{gap:.4rem}
  #Graduate .blank{height:6.78rem}
  #Graduate .sec-title{padding-bottom:.6rem}  
  #Graduate .sub-title{font-size:.32rem}  
  #Graduate .description{font-size:.2rem}
  #Graduate .kv{width:9rem}
  #Graduate .notice-box{padding:.26rem .76rem;right:-1.2rem;bottom:-.93rem;width:6.53rem} 
  #Graduate .notice-box small{font-size:.15rem;margin-top:.07rem}
  #Graduate .notice-box p > span{font-size:.19rem}
  #Graduate .notice-box .icon{width:.34rem;height:.34rem;margin-right:.14rem}
  #Graduate .notice-box .icon > svg{width:.2rem}  
}
@media (max-width:1279px) {  
  #Graduate .content-container{height:4.82rem;align-items:stretch;gap:.28rem}
  #Graduate .sec-title{padding-bottom:.4rem}  
  #Graduate .sub-title{font-size:.2rem}  
  #Graduate .description{font-size:.16rem}
  #Graduate .kv{width:6.1rem;height:4.6rem;margin-left:-.28rem}
  #Graduate .notice-box{bottom:-.22rem;padding:.21rem .58rem;width:4.8rem;right:-.64rem} 
  #Graduate .notice-box small{font-size:.12rem;margin-top:.12rem}
  #Graduate .notice-box p > span{font-size:.14rem}
  #Graduate .notice-box .icon{width:.22rem;height:.22rem;margin-right:.1rem}
  #Graduate .notice-box .icon > svg{width:.14rem}  
}



#Graduate .sec-title,
#Graduate .sub-title,
#Graduate .description,
#Graduate .kv,
#Graduate .notice-box{opacity:0;will-change:opacity, transform;transition:opacity .3s ease-out, transform .5s ease-out}
#Graduate .sec-title,
#Graduate .sub-title,
#Graduate .description{transform:translate3d(0, .2rem, 0);}
#Graduate .kv,
#Graduate .notice-box{transform:translate3d(.2rem, 0, 0);}

#Graduate .in-view .sec-title,
#Graduate .in-view .sub-title,
#Graduate .in-view .description,
#Graduate .in-view .kv,
#Graduate .in-view .notice-box{opacity:1;transform:translate3d(0,0,0)}

#Graduate .in-view .sec-title{transition-delay:.35s}
#Graduate .in-view .sub-title{transition-delay:.4s}
#Graduate .in-view .description{transition-delay:.5s}
#Graduate .in-view .description + .description{transition-delay:.55s}
#Graduate .in-view .kv{transition-delay:.35s}
#Graduate .in-view .notice-box{transition-delay:.65s}



/* event */
.event-title{
  display:flex;width:fit-content;margin:0 auto;background:#e0f0ff;align-items:center;justify-content:center;
  box-shadow: 0 .1rem .15rem -.03rem rgba(0, 0, 0, 0.1), 0 .04rem .06rem -.04rem rgba(0, 0, 0, 0.1);gap:.12rem;
}
.event-title > .icon{display:block;flex:none;}
.event-title > .icon svg{fill:var(--theme-light)}
.event-title > span{display:block;flex:none;color:var(--theme-light);line-height:.28rem;letter-spacing:-.045em;font-weight:700}

.event-sub-title{text-align:center;display:flex;color:var(--theme-light);gap:.24rem;align-items:center;justify-content:center;margin:0 auto;margin-bottom:.25rem}
.event-sub-title::before,
.event-sub-title::after{content:"";display:block;flex:none;height:.01rem;width:.96rem;background:#CBD5E1}
.event-sub-title > strong{font-weight:700;position:relative;position:relative;line-height:.24rem}


.event-content-box{display:flex;width:100%;align-items:stretch;justify-content:center;gap:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;background:#f0f7ff;box-shadow: 0 .08rem .32rem 0 rgba(31, 38, 135, 0.07)}
.event-content-box .event-content::after{content:"";display:block;position:absolute;right:0;width:.01rem;background: linear-gradient(180deg, rgba(209, 213, 219, 0.00) 0%, #D1D5DB 50%, rgba(209, 213, 219, 0.00) 100%);top:0;height:100%;}
.event-content-box .event-content{flex:1;position:relative}
.event-content-box .event-link{flex:none;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}
.event-content-box .event-cnt-head,
.event-content-box .official-channel{width:100%;display:flex;align-items:center;justify-content:flex-start}
.event-content .box-icon{background:#fff;border-radius:100%;flex:none;display:block;width:fit-content;box-shadow:0 .04rem .15rem 0 rgba(0, 145, 255, 0.15);}
.event-content .box-icon > svg{fill:var(--theme-light)}
.event-cnt-title{flex:1;display:block}
.event-cnt-title span{display:block;width:fit-content;background:var(--theme-light);color:#fff;font-weight:500;letter-spacing:.025em}
.event-cnt-title span > i{display:inline-block;transform:translate3d(0,-5%, 0)}
.event-cnt-title p{display:block;color:#111827;font-weight:500;line-height:1.3;letter-spacing:-.075em}
.event-cnt-title p > strong{font:inherit;font-weight:700;color:var(--theme-light)}
.event-content > p{color:#4B5563;font-weight:500;letter-spacing:-.125em;line-height:1.6}
.event-content > p > small,
.event-content > p > strong{font:inherit;letter-spacing:inherit;font-weight:700;color:var(--theme-light)}
.event-link .box-icon{flex:none;background:#fff;display:block;width:fit-content;box-shadow:0 .04rem .15rem 0 rgba(0, 145, 255, 0.15);}
.event-link .box-icon > svg{fill:#EC4899}
.event-link .official-channel,
.event-link .btn{flex:none;width:100%}
.event-link .btn{gap:.08rem;padding-left:0;padding-right:0}
.event-link .btn .txt{font-weight:500;line-height:1.2}
.event-link .official-channel p{flex:1}
.event-link .official-channel p > small,
.event-link .official-channel p > strong,
.event-link .official-channel p > span{display:block;letter-spacing:0}
.event-link .official-channel p > small{color:var(--text);font-weight:500;line-height:1.2}
.event-link .official-channel p > strong{color:var(--theme-light);font-weight:700;line-height:1.4}
.event-link .official-channel p > span{color:#555;font-weight:500;line-height:1.2}

@media (min-width:1440px) {
  .event-cnt-title p{letter-spacing:-.05em}
  .event-content > p{letter-spacing:-.075em}
}
@media (min-width:1280px) {  
  .event-title{border-radius:.36rem;padding:.21rem .47rem}
  .event-title > .icon{padding:.03rem}
  .event-title > .icon svg{width:.2rem}
  .event-title > span{font-size:.24rem;}
  .event-cnt-title p{letter-spacing:-.05em}
  .event-content > p{letter-spacing:-.075em}
  .event-sub-title{height:.33rem}
  .event-sub-title > strong{font-size:.22rem}  
  .event-content-box{padding:.48rem .44rem;border-radius:.32rem;margin-top:.4rem}
  .event-content-box .event-link{padding-left:.26rem}
  .event-content .box-icon{padding:.16rem}
  .event-content .box-icon > svg{width:.32rem}
  .event-content .event-cnt-head{gap:.2rem}  
  .event-cnt-title span{font-size:.2rem;line-height:1.2;padding:.06rem .18rem .08rem .2rem;border-radius:.19rem}
  .event-cnt-title p{padding-top:.08rem;font-size:.28rem}
  .event-content > p{font-size:.2rem;margin-top:.24rem;padding-right:.3rem}
  .event-content > p > small{font-size:.16rem}
  .event-link{width:3.72rem}
  .event-link .official-channel{gap:.16rem}
  .event-link .box-icon{padding:.2rem;border-radius:.24rem}
  .event-link .box-icon > svg{width:.6rem}
  .event-link .official-channel p > small{font-size:.16rem}
  .event-link .official-channel p > strong{font-size:.2rem;padding:.02rem 0 .1rem}
  .event-link .official-channel p > span{font-size:.18rem}
  .event-link .btn{padding-top:.16rem;padding-bottom:.16rem}
  .event-link .btn::before{border-radius:.16rem}
  .event-link .btn .txt{font-size:.2rem}
  .event-link .btn .icon{width:.2rem}
}
@media (max-width:1279px) {    
  .event-title{border-radius:.25rem;padding:.15rem .32rem}
  .event-title > .icon{padding:.02rem}
  .event-title > .icon svg{width:.16rem}
  .event-title > span{font-size:.2rem}
  .event-sub-title{height:.24rem}
  .event-sub-title > strong{font-size:.18rem}
  .event-content-box{padding:.2rem;border-radius:.16rem;margin-top:.5rem}
  .event-content-box .event-content{padding-right:.15rem}
  .event-content-box .event-link{padding-left:.15rem}
  .event-content .box-icon{padding:.08rem}
  .event-content .box-icon > svg{width:.24rem}
  .event-content .event-cnt-head{gap:.15rem}
  .event-cnt-title span{font-size:.1rem;line-height:1.2;padding:.03rem .09rem .04rem .1rem;border-radius:.1rem}
  .event-cnt-title p{padding-top:.06rem;font-size:.16rem}
  .event-content > p{font-size:.14rem;margin-top:.1rem}
  .event-content > p > small{font-size:.12rem}
  .event-link{width:1.8rem}
  .event-link .official-channel{gap:.1rem}
  .event-link .box-icon{padding:.09rem;border-radius:.12rem}
  .event-link .box-icon > svg{width:.32rem}
  .event-link .official-channel p{padding-top:.04rem}
  .event-link .official-channel p > small{font-size:.1rem}
  .event-link .official-channel p > strong{font-size:.12rem;padding-bottom:.06rem;padding-top:.06rem}
  .event-link .official-channel p > span{font-size:.1rem}
  .event-link .btn{padding-top:.1rem;padding-bottom:.1rem}
  .event-link .btn::before{border-radius:.07rem}
  .event-link .btn .txt{font-size:.1rem}
  .event-link .btn .icon{width:.1rem}
}


/* Recipe */
#Recipe .sec-title,
#Recipe .description{text-align:center}
#Recipe .description{line-height:1.6;position:relative;z-index:2;margin-bottom:.4rem}
#Recipe .description .highlight{display:inline-block;font:inherit;letter-spacing:inherit;position:relative;z-index:-1}
#Recipe .description .highlight::before{
  content:"";display:block;position:absolute;top:18%;left:-.2em;right:-.2em;bottom:10%;z-index:-1;background:#e0f0ff
}
#Recipe .sec-title strong{position:relative;z-index:2}
#Recipe .sec-title strong::before{content:"";display:block;position:absolute;z-index:-1;background:url(img/recipe-kv.png) no-repeat center;background-size:contain;transform: rotate(14.371deg);aspect-ratio: 121/70;opacity:.26;}
.recipe-list > li{background: #fff;box-shadow: 0 .1rem .15rem -.03rem rgba(0, 0, 0, 0.0), 0 .04rem .06rem -.04rem rgba(0, 0, 0, 0.1);-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;border:.01rem solid #c0c7d5}
.recipe-name{display:block;width:100%;text-align:center;font-size:0;line-height:0}
.recipe-name > span,
.recipe-name > strong{color:#fff;line-height:.28rem}
.recipe-name > span{font-weight:400;font-size:.22rem;padding:0 .07rem}
.recipe-name > strong{font-weight:700;font-size:.2rem}
.recipe-list > li:nth-child(1) .recipe-name{background:#00A0F0}
.recipe-list > li:nth-child(2) .recipe-name{background:#006D37}
.recipe-list > li:nth-child(3) .recipe-name{background:#944600}

@media (min-width:1280px) {  
  #Recipe .section-inner{height:10.8rem;display:flex;flex-direction:column;justify-content:center;align-items:center}
  #Recipe .sec-title{font-size:.64rem;padding-top:.56rem;padding-bottom:.44rem}
  #Recipe .sec-title strong::before{width:54%;top:-75%;left:52%;}
  .recipe-list{display:flex;align-items:stretch;justify-content:center;gap:.32rem;width:100%}
  .recipe-list > li{flex:1;border-radius:.32rem;padding:.32rem}
  .recipe-list > li .video{border-radius:.14rem}
  .recipe-name{border-radius:.14rem;padding:.05rem 0;margin-top:.24rem}
  .recipe-name > span,
  .recipe-name > strong{display:block}
  /*
  .recipe-name{border-radius:.14rem;padding:.05rem 0;margin-top:.3rem}
  .recipe-list > li{flex:1;border-radius:.4rem;padding:.4rem}
  .recipe-list > li .video::before{padding-top:100%}*/
}
@media (max-width:1279px) {  
  #Recipe .sec-title{font-size:.44rem;padding-top:.4rem;padding-bottom:.32rem}
  #Recipe .event-sub-title{margin-bottom:.45rem}
  #Recipe .sec-title strong::before{width:34%;top:-32%;left:60%}
  .recipe-list{width:5.38rem;margin:0 auto;}
  .recipe-list > li{flex:none;width:100%;border-radius:.2rem;padding:.2rem}
  .recipe-list > li + li{margin-top:.08rem}
  .recipe-list > li .video{border-radius:.12rem}
  .recipe-name{border-radius:.12rem;padding:.1rem 0;margin-top:.08rem}
  .recipe-name > span,
  .recipe-name > strong{display:inline-block;vertical-align:middle}
}


#Recipe .event-title,
#Recipe .sec-title,
#Recipe .description,
#Recipe .event-sub-title,
#Recipe .recipe-list > li{opacity:0;transform:translate3d(0, .2rem, 0);will-change:opacity, transform;transition:opacity .3s ease-out, transform .5s ease-out}

#Recipe .in-view .event-title,
#Recipe .in-view .sec-title,
#Recipe .in-view .description,
#Recipe .in-view .event-sub-title,
#Recipe .in-view .recipe-list > li{opacity:1;transform:translate3d(0,0,0)}

#Recipe .in-view .event-title{transition-delay:.3s}
#Recipe .in-view .sec-title{transition-delay:.35s}
#Recipe .in-view .description{transition-delay:.45s}
#Recipe .in-view .event-sub-title{transition-delay:.55s}
#Recipe .in-view .recipe-list > li:nth-child(1){transition-delay:.65s}
#Recipe .in-view .recipe-list > li:nth-child(2){transition-delay:.7s}
#Recipe .in-view .recipe-list > li:nth-child(3){transition-delay:.75s}


/* Upload */
#Upload .sec-title,
#Upload .description{text-align:center}
#Upload .description{line-height:1.6;position:relative;z-index:2;margin-bottom:.4rem}

.howto-steps{display:flex;width:100%;align-items:stretch;justify-content:center}
.howto-steps > li{flex:1;background:#fff;box-shadow: 0 .1rem .3rem 0 rgba(0, 93, 170, 0.08);-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;position:relative;}
.howto-steps > li .step-img{border-radius:.16rem;display:block;width:100%;height:auto;overflow:clip}
.howto-steps > li .step-no{position:absolute;border-radius: 100%;background:var(--theme-light);text-align:center;color:#fff;font-weight:500;box-shadow: 0 .1rem .15rem -.03rem rgba(0, 0, 0, 0.10), 0 .04rem .06rem -0.04rem rgba(0, 0, 0, 0.1);}
.howto-steps > li > p{color:#000;text-align: center;font-weight: 500;line-height:1.2;letter-spacing:-.015em}
.howto-steps > li > p strong{font:inherit;letter-spacing:inherit;color:var(--theme-light)}
.howto-steps > li > p small{display:block;color:#3F4851;font-size:0.667em;line-height:1.5;margin-top:0.5em;font-weight:400}

@media (min-width:1280px) {  
  #Upload .section-inner{height:15.7rem;display:flex;flex-direction:column;justify-content:center;align-items:center}
  #Upload .sec-title{font-size:.64rem;padding-top:.56rem;padding-bottom:.44rem}
  .howto-steps{gap:.48rem;}
  .howto-steps > li{padding:.48rem;border-radius:.32rem}
  .howto-steps > li .step-no{font-size:.2rem;line-height:.24rem;padding:.12rem 0;width:.48rem;left:.32rem;top:.32rem}
  .howto-steps > li .step-img{margin-bottom:.4rem}
  .howto-steps > li > p{font-size:.24rem}
}
@media (max-width:1279px) {  
  #Upload .sec-title{font-size:.44rem;padding-top:.5rem;padding-bottom:.32rem}
  .howto-steps{gap:.24rem}
  .howto-steps > li{padding:.24rem;border-radius:.16rem}
  .howto-steps > li .step-no{font-size:.12rem;line-height:.16rem;padding:.04rem 0;width:.24rem;left:.16rem;top:.16rem}
  .howto-steps > li .step-img{margin-bottom:.2rem}
  .howto-steps > li > p{font-size:.14rem}
  .howto-steps > li > p small{margin-bottom:-1em}
}


#Upload .event-title,
#Upload .sec-title,
#Upload .description,
#Upload .event-sub-title,
#Upload .howto-steps > li,
#Upload .event-content-box{opacity:0;transform:translate3d(0, .2rem, 0);will-change:opacity, transform;transition:opacity .3s ease-out, transform .5s ease-out}

#Upload .in-view .event-title,
#Upload .in-view .sec-title,
#Upload .in-view .description,
#Upload .in-view .event-sub-title,
#Upload .in-view .howto-steps > li,
#Upload .in-view .event-content-box{opacity:1;transform:translate3d(0,0,0)}

#Upload .in-view .event-title{transition-delay:.25s}
#Upload .in-view .sec-title{transition-delay:.35s}
#Upload .in-view .description{transition-delay:.45s}
#Upload .in-view .event-sub-title{transition-delay:.55s}
#Upload .in-view .howto-steps > li:nth-child(1){transition-delay:.65s}
#Upload .in-view .howto-steps > li:nth-child(2){transition-delay:.7s}
#Upload .in-view .event-content-box{transition-delay:.8s}


/* Cheering */
#Cheering .sec-title,
#Cheering .description{text-align:center}
#Cheering .description{line-height:1.6;position:relative;margin-bottom:.4rem}
#Cheering .btn{margin:0 auto}
#Cheering .kv{position:relative;z-index:-1;pointer-events:none;height:0;width:100%;}
#Cheering .kv::before{content:"";display:block;position:absolute;background:url(img/cheering-kv.svg) no-repeat center;background-size:contain;opacity:.2}

.cheering-list{display:grid;width:100%;grid-template-columns:1fr 1fr 1fr;grid-auto-rows:fit-content;align-items:stretch;justify-content:center;gap:.16rem}
.cheering-list > li{background:#fff;box-shadow: 0 .04rem .12rem 0 rgba(0, 160, 233, 0.08);display:flex;align-items:center;justify-content:center;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box}
.cheering-list .msg{text-align:left;flex:1;display:block;line-height:1.2;letter-spacing:-.05em;font-weight:900;position:relative;color:var(--theme-light);padding-left:.6em;margin-left:-.25em;padding-right:.2em}
.cheering-list .msg::before,
.cheering-list .msg::after{font:inherit;color:inherit}
.cheering-list .msg::before{content:"“";left:0;top:0;display:block;position:absolute}
.cheering-list .msg::after{content:"”";display:inline-block;margin-right:-.2em}
.cheering-list .dog{flex:none}
#Cheering .section-inner > .btn .txt i{display:inline-block;margin-right:.25em;transform:translate3d(0, -5%, 0) rotate3d(0, 1, 0, -180deg)}

@media (min-width:1280px) {  
  #Cheering .section-inner{height:14rem;display:flex;flex-direction:column;justify-content:center;align-items:center}
  #Cheering .sec-title{font-size:.64rem;padding-top:.56rem;padding-bottom:.44rem}  
  .cheering-list{gap:.24rem;margin-bottom:.5rem}
  .cheering-list > li{padding:.4rem .24rem;border-radius:.12rem}
  .cheering-list .dog{width:.8rem}
  .cheering-list .msg{font-size:.3rem}
  #Cheering .section-inner > .btn{width:5.86rem}
  #Cheering .kv::before{width:3.5rem;height:3.4rem;left:-1.8rem;top:-1.4rem}
}
@media (max-width:1279px) {  
  #Cheering .sec-title{font-size:.44rem;padding-top:.5rem;padding-bottom:.32rem}
  .cheering-list{gap:.13rem;margin-bottom:.4rem}
  .cheering-list > li{padding:.26rem .14rem;border-radius:.06rem}
  .cheering-list .dog{width:.34rem}
  .cheering-list .msg{font-size:.17rem}
  #Cheering .section-inner > .btn{width:2.7rem}
  #Cheering .kv::before{width:2.15rem;height:2.1rem;left:-.92rem;top:-1rem}
}




#Cheering .event-title,
#Cheering .sec-title,
#Cheering .description,
#Cheering .cheering-list > li,
#Cheering .section-inner > .btn,
#Cheering .event-content-box{opacity:0;transform:translate3d(0, .2rem, 0);will-change:opacity, transform;transition:opacity .3s ease-out, transform .5s ease-out}

#Cheering .in-view .event-title,
#Cheering .in-view .sec-title,
#Cheering .in-view .description,
#Cheering .in-view .cheering-list > li,
#Cheering .section-inner.in-view > .btn,
#Cheering .in-view .event-content-box{opacity:1;transform:translate3d(0,0,0)}

#Cheering .in-view .event-title{transition-delay:.25s}
#Cheering .in-view .sec-title{transition-delay:.35s}
#Cheering .in-view .description{transition-delay:.45s}
#Cheering .in-view .cheering-list > li:nth-child(n - 3){transition-delay:.5s}
#Cheering .in-view .cheering-list > li:nth-child(n + 3){transition-delay:.6s}
#Cheering .section-inner.in-view > .btn{transition-delay:.7s}
#Cheering .in-view .event-content-box{transition-delay:.8s}





/* Invitation */
#Invitation .kv{position:absolute;left:0;top:0;height:100%;width:100%;border-radius:6rem 0 0 3rem;overflow:clip;z-index:-1}
#Invitation .kv > img{object-fit:cover;right:0;bottom:0;position:absolute;}
#Invitation .popup-zone{display:flex;align-items:stretch;justify-content:center}
#Invitation .popup-zone > li{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;box-shadow: 0 .01rem .015rem 0 rgba(0, 0, 0, 0.05);}
#Invitation .popup-zone .icon{display:block;flex:none;margin:0 auto}
#Invitation .popup-zone .icon> svg{fill:var(--theme-light)}
#Invitation .popup-zone p{display:block;text-align:center;flex:none}
#Invitation .popup-zone .name{font-weight:400;color:var(--theme-light);line-height:1}
#Invitation .popup-zone .desc{font-weight:400;line-height:1.6;letter-spacing:-.03em}
#Invitation .popup-zone .desc > small{display:block;color:#5B5F62;font-size:.8em;line-height:1.6;margin-top:.7em}
#Invitation .popup-information > li{display:flex;align-items:center;justify-content:flex-start;gap:.16rem}
#Invitation .popup-information .icon{flex:none;display:block;position:relative}
#Invitation .popup-information .icon::before{content:"";display:block;padding-top:100%}
#Invitation .popup-information .icon > svg{position:absolute;left:50%;top:50%;transform:translate3d(-50%, -50%, 0);fill:var(--theme-light)}
#Invitation .popup-information li + li{margin-top:.2rem}
#Invitation .popup-information li > strong{display:block;flex:none;font-weight:700;line-height:.28rem}
#Invitation .popup-information li > small,
#Invitation .popup-information li > span{flex:1;font-weight:400;line-height:.28rem}
#Invitation .popup-information li > strong,
#Invitation .popup-information li > span{font-size:.2rem}

#Invitation .popup-information .location-box{display:flex;align-items:stretch;justify-content:center;gap:.16rem;background:#fff;box-shadow:0 .04rem .1rem 0 rgba(0, 0, 0, 0.05);-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

#Invitation .popup-information .location-box .preview{flex:none;overflow:clip}
#Invitation .popup-information .location-box .details{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
#Invitation .popup-information .location-box .details p{display:block;flex:none;}
#Invitation .popup-information .location-box .name .icon{text-align:center;display:inline-block;vertical-align:middle}
#Invitation .popup-information .location-box .name strong{display:inline-block;vertical-align:middle;font-weight:700;margin-top:-.1em}
#Invitation .popup-information .location-box .address{color:#555;font-weight:500}
#Invitation .popup-information .location-box .address small{display:block;color:#909090}
#Invitation .popup-information .location-box .btn{gap:.07rem}
#Invitation .popup-information .location-box .btn::before{border:.01rem solid var(--theme-light);background-color:#fff}
#Invitation .popup-information .location-box .btn .txt{font-weight:500;color:var(--theme-light)}
#Invitation .popup-information .location-box .btn svg{fill:var(--theme-light)}
#Invitation .popup-information .location-box .btn .icon{width:.17rem;transform: translate3d(0, 0, 0)}

@media (min-width:1280px) {  
  #Invitation {padding-top:1.8rem;padding-bottom:1.8rem}
  #Invitation .section-inner{height:10.8rem;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0}
  #Invitation .sec-title{font-size:.64rem;padding-bottom:.5rem}  
  #Invitation .blank{height:7.3rem}
  #Invitation .kv{width:76.5625%;min-width:9.6rem;left:-1.6rem}
  #Invitation .kv > img{width:100%;height:auto;min-width:100%}
  #Invitation .content > .btn{width:5.86rem}
  #Invitation .popup-zone{width:7.7rem;gap:.11rem;height:2.17rem}
  #Invitation .popup-zone > li{border-radius:.23rem;padding:.3rem 0}
  #Invitation .popup-zone .icon{width:.36rem}
  #Invitation .popup-zone .name{font-size:.28rem;margin-top:.22rem}
  #Invitation .popup-zone .desc{font-size:.13rem;margin-top:.1rem}
  #Invitation .popup-information{padding:.5rem 0 .2rem;width:5.86rem}  
  #Invitation .popup-information .icon{width:.5rem}
  #Invitation .popup-information li:not(.location-box){height:.5rem}
  #Invitation .popup-information li > small{font-size:.18rem}
  #Invitation .popup-information > li:nth-child(1) .icon svg{width:.22rem}
  #Invitation .popup-information > li:nth-child(2) .icon svg{width:.25rem}
  #Invitation .popup-information > li:nth-child(4) .icon svg{width:.19rem}

  #Invitation .popup-information .location-box{width:100%;border-radius:.18rem;padding:.24rem .22rem}
  #Invitation .popup-information .location-box .preview{width:3rem;border-radius:.18rem} 
  #Invitation .popup-information .location-box .btn{padding:.13rem 0;width:1.98rem} 
  #Invitation .popup-information .location-box .btn .txt{font-size:.17rem}
  #Invitation .popup-information .location-box .btn .icon{width:.13rem}
  #Invitation .popup-information .location-box .name strong{font-size:.17rem;line-height:.24rem}
  #Invitation .popup-information .location-box .name .icon{width:.24rem}
  #Invitation .popup-information .location-box .name .icon > svg{width:.17rem}
  #Invitation .popup-information .location-box .address{font-size:.15rem;line-height:.21rem;padding-top:.07rem;padding-bottom:.13rem;padding-left:.05rem}
  #Invitation .popup-information .location-box .address > small{font-size:.12rem;line-height:.17rem;padding:.05rem 0}
}
@media (max-width:1279px) {  
  #Invitation .sec-title{font-size:.44rem;padding-bottom:.25rem}  
  #Invitation .content{flex:1}
  #Invitation .blank{flex:0;height:4.2rem}
  #Invitation .kv{width:3rem;left:-1.35rem;top:.5rem}
  #Invitation .kv > img{min-width:100%;width:auto;height:100%}
  #Invitation .content  > .btn{width:100%}
  #Invitation .popup-zone{width:5.78rem;height:1.6rem;gap:.05rem}
  #Invitation .popup-zone > li{border-radius:.12rem;padding:.26rem 0}
  #Invitation .popup-zone .icon{width:.24rem}
  #Invitation .popup-zone .name{font-size:.19rem;margin-top:.12rem}
  #Invitation .popup-zone .desc{font-size:.11rem;margin-top:.08rem}
  #Invitation .popup-information{padding:.25rem 0;width:5.18rem}  
  #Invitation .popup-information .icon{width:.3rem}
  #Invitation .popup-information li:not(.location-box){height:.28rem}
  #Invitation .popup-information li > small{font-size:.16rem}
  #Invitation .popup-information > li:nth-child(1) .icon svg{width:.14rem}
  #Invitation .popup-information > li:nth-child(2) .icon svg{width:.16rem}
  #Invitation .popup-information > li:nth-child(4) .icon svg{width:.16rem}

  #Invitation .popup-information .location-box,
  #Invitation .popup-information .location-box + li{margin-top:.25rem}
  #Invitation .popup-information .location-box{width:5.2rem;border-radius:.08rem;padding:.2rem}
  #Invitation .popup-information .location-box .preview{width:2.65rem;border-radius:.18rem} 
  #Invitation .popup-information .location-box .btn{padding:.13rem 0;width:1.86rem} 
  #Invitation .popup-information .location-box .btn .txt{font-size:.14rem}
  #Invitation .popup-information .location-box .btn .icon{width:.17rem}
  #Invitation .popup-information .location-box .name strong{font-size:.17rem;line-height:.24rem}
  #Invitation .popup-information .location-box .name .icon{width:.24rem}
  #Invitation .popup-information .location-box .name .icon > svg{width:.17rem}
  #Invitation .popup-information .location-box .address{font-size:.14rem;line-height:.21rem;padding-top:.07rem;padding-bottom:.13rem;padding-left:.05rem}
  #Invitation .popup-information .location-box .address > small{font-size:.1rem;line-height:.17rem;padding:.05rem 0}
}



#Invitation .sec-title,
#Invitation .popup-zone,
#Invitation .popup-information > li,
#Invitation .content > .btn,
#Invitation .kv{opacity:0;will-change:opacity, transform;transition:opacity .3s ease-out, transform .5s ease-out}

#Invitation .sec-title,
#Invitation .popup-zone,
#Invitation .popup-information > li,
#Invitation .content > .btn{transform:translate3d(0, .2rem, 0)}
#Invitation .kv{transform:translate3d(.2rem, 0, 0)}

#Invitation .in-view .sec-title,
#Invitation .in-view .popup-zone,
#Invitation .in-view .popup-information > li,
#Invitation .in-view .content> .btn,
#Invitation .in-view .kv{opacity:1;transform:translate3d(0,0,0)}

#Invitation .in-view .sec-title{transition-delay:.25s}
#Invitation .in-view .popup-zone{transition-delay:.35s}
#Invitation .in-view .kv{transition-delay:.55s}
#Invitation .in-view .popup-information > li:nth-child(1){transition-delay:.4s}
#Invitation .in-view .popup-information > li:nth-child(2){transition-delay:.5s}
#Invitation .in-view .popup-information > li:nth-child(3){transition-delay:.6s}
#Invitation .in-view .popup-information > li:nth-child(4){transition-delay:.7s}
#Invitation .in-view .content> .btn{transition-delay:.8s}





/* Vision */
#Vision .content-container{align-items:stretch}
#Vision .sec-title{font-weight:700;letter-spacing:-.02em;line-height:1.6}
#Vision .description{letter-spacing:-.01em;line-height:1.6}
#Vision .description + .description{margin-top:1.6em}
#Vision .description > strong{color:var(--theme-light)}
#Vision .symbol > svg{fill:#009CEB;width:.77rem}
#Vision .kv{right:0;transform:translate3d(50%, -50%, 0)}
#Vision .kv > svg{fill:#3399FFB2;opacity:.2;transform:rotate3d(0, 0, 1, -20deg)}

@media (min-width:1280px) {  
  #Vision .section-inner{height:10.26rem;display:flex;flex-direction:column;justify-content:center;align-items:center}
  #Vision .sec-title{font-size:.4rem;padding-bottom:.1rem;padding-top:.6rem}
  #Vision .description{font-size:.26rem}
  #Vision .content{padding-bottom:1.15rem}
  #Vision .kv{width:6.36rem;top:50%}
}
@media (max-width:1279px) {  
  #Vision .sec-title{font-size:.28rem;padding-bottom:.1rem;padding-top:.3rem}
  #Vision .description{font-size:.2rem}
  #Vision .content{padding-bottom:.47rem}
  #Vision .symbol{padding-top:.04rem}
  #Vision .kv{width:3.75rem;top:57.5%}
}

  #Vision .symbol,
  #Vision .sec-title,
  #Vision .description,
  #Vision .blank{opacity:0;will-change:opacity, transform;transition:opacity .3s ease-out, transform .5s ease-out}
  
  #Vision .symbol,
  #Vision .sec-title,
  #Vision .description{transform:translate3d(0, .2rem, 0)}
  #Vision .blank{transform:translate3d(.2rem, 0, 0)}

  #Vision .in-view .symbol,
  #Vision .in-view .sec-title,
  #Vision .in-view .description,
  #Vision .in-view .blank{opacity:1;transform:translate3d(0,0,0)}


  #Vision .in-view .symbol{transition-delay:.25s}
  #Vision .in-view .sec-title{transition-delay:.35s}
  #Vision .in-view .blank{transition-delay:.55s}
  #Vision .in-view .description:nth-of-type(1){transition-delay:.4s}
  #Vision .in-view .description:nth-of-type(2){transition-delay:.45s}
  #Vision .in-view .description:nth-of-type(3){transition-delay:.55s}
  #Vision .in-view .description:nth-of-type(4){transition-delay:.6s}


/* Layers */
#layers {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  pointer-events: none;
}

#dimed {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  background:fixed rgba(0, 0, 0, .75);
  backdrop-filter: blur(.1rem);
  z-index:99;
}

.layer {
  position: fixed;
  left: 50%;
  top: 50%;
  height:auto;
  max-height: calc(100vh - .2rem);
  transform: translate3d(-50%, -50%, 0);
  pointer-events: auto;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius:.36rem;
  box-shadow:0 .22rem .44rem -.1rem rgba(0,0,0,.25);
  display:none;
  z-index:-10;
  background:#fff;
  flex-direction:column;
}


.layer input::-webkit-outer-spin-button,
.layer input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0
}


.layer.is-open{
  z-index:99;display:flex;
}

.layer .icon.btn-close{position:absolute;right:.24rem;top:.24rem;display:block}
.layer .icon.btn-close svg{display:block;width:.24rem;fill:#6B7280}

.layer-head{flex:none;width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding:.2rem .32rem;}

.layer-body{overflow-y:auto}
.layer-body::-webkit-scrollbar {
  background: rgba(255, 255, 255, .1);
  width: 5px;
  height: 5px
}
.layer-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .3)
}
.layer-body::-webkit-scrollbar-corner {
  background: rgba(255, 255, 255, .3)
}
.layer-body::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  background: rgba(0, 0, 0, .3)
}
.layer-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, .4)
}


.layer[data-name="video-play"]{border-radius:0;width:min(100vw, calc(calc(100vh - 1.2rem)*1.775), 12.8rem);overflow:visible}
.layer[data-name="video-play"] .btn-close{right:0;top:auto;bottom:100%;}
.layer[data-name="video-play"] .btn-close svg{width:.32rem;fill:#fff}
.layer[data-name="video-play"] .layer-body{overflow:clip;position:relative;width:100%;padding:0}
.layer[data-name="video-play"] .layer-body::before{content:"";display:block;width:100%;padding-top:56.25%}
.layer[data-name="video-play"] .layer-body > div,
.layer[data-name="video-play"] .layer-body iframe{
  border:0 none;outline:none;position:absolute;width:calc(100% + 2px);height:calc(100% + 2px);top:-1px;left:-1px;object-fit:cover
}


.layer .layer-foot{display:flex;width:100%;height:.99rem;align-items:center;justify-content:center}
.layer .layer-foot > *{flex:none;}

.layer.has-doc .layer-body{background:#F7F9FB;}
.layer.has-doc .layer-head{border-bottom:1px solid #BEC8D2;}
.layer.has-doc .layer-foot{border-top:1px solid #BEC8D2}

.layer.has-form .layer-body{padding:.24rem .58rem .58rem}

.layer[data-name="alert"]{border-radius:.24rem}
.layer[data-name="alert"] .layer-body{background:#F7F9FB;display:flex;align-items:center;justify-content:center}
.layer[data-name="alert"] .layer-body > p{line-height:1.6;padding:0 .58rem;text-align:center}

.layer-foot .btn-close,
.layer .btn-submit,
.layer .btn-download{text-align:center;background:var(--theme-light);color:#fff;}
.layer-foot .btn-close{font-size:.16rem;padding:.12rem .48rem .14rem;border-radius:.25rem;line-height:1.5}

.layer-head .ci{height:.45rem;margin:0 auto;width:fit-content;margin-bottom:.03rem;gap:.1rem}
.layer-head .ci svg:nth-child(1){width:.38rem}
.layer-head .ci svg:nth-child(2){width:.49rem}
.layer.has-doc .sub-title{text-align:center;font-weight: 500;line-height:1.5;font-size:.2rem}
.layer.has-doc .layer-title{text-align:center;font-weight:400;line-height:1;font-size:.32rem;margin-top:.02rem;margin-bottom:-.02rem}
.layer.has-doc .description{text-align:center;font-size:.16rem;letter-spacing:-.0625em;line-height:1.6}
.layer.has-doc .doc-tb{border: .01rem solid #BEC8D2;border-radius:.08rem;display:flex;align-items:stretch;justify-content:space-evenly;margin:.24rem auto .12rem;width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.layer.has-doc .doc-tb .col,
.layer.has-doc .doc-tb .row{display:flex;align-items:center;justify-content:flex-start;flex-direction:column;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.layer.has-doc .doc-tb .col{flex:auto;min-width:27%}
.layer.has-doc .doc-tb .tbody{flex:1;padding:.24rem 0}
.layer.has-doc .doc-tb .thead{flex:none;height:.41rem;border-bottom:.01rem solid #BEC8D2;background: rgba(205, 230, 246, 0.30);justify-content:center;width:100%}
.layer.has-doc .doc-tb .thead p,
.layer.has-doc .doc-tb .tbody p{display:block;flex:none}
.layer.has-doc .doc-tb .thead p{color:#506875;font-weight:500;line-height:1.2;font-size:.14rem;padding-top:.02rem;}
.layer.has-doc .doc-tb .tbody p{font-weight:500;font-size:.12rem;line-height:1.2}
.layer.has-doc .doc-tb .tbody p strong{font:inherit;color:var(--theme-light)}

.layer .btn-submit,
.layer .btn-download{display:flex;width:100%;;align-items:center;justify-content:center;border-radius:.14rem;gap:.1rem;height:.6rem}
.layer .btn-submit .txt,
.layer .btn-download .txt{display:block;flex:none;font-weight:500;line-height:.25rem}
.layer .btn-submit .icon,
.layer .btn-download .icon{display:block;flex:none}
.layer .btn-submit .icon{width:.24rem}
.layer .btn-submit .icon > svg{fill:#fff}


.layer.has-form .layer-head{padding-top:.57rem;padding-bottom:0}
.layer.has-form .layer-title{text-align:center;color:var(--theme)}
.layer.has-form .layer-title .icon{display:block;margin:0 auto .14rem}
.layer.has-form .layer-title .icon > svg{fill:var(--theme)}
.layer.has-form .layer-title > strong,
.layer.has-form .layer-title > small{display:block}
.layer.has-form .notice{display:block;color:#707785;font-weight:400;text-align:center;}


.rewards-box{background:#F0F7FF;border-radius:.2rem;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding:.24rem .32rem}
.rewards-box .gift{display:block;}
.rewards-box .detail .title{display:block;color:var(--theme);font-weight:700;line-height:.21rem;padding:.07rem .16rem}
.rewards-box .detail .title > i{display:inline-block;transform:translate3d(0, -5%, 0);margin-right:.12rem}
.rewards-box .detail .description{padding-left:.3rem;display:block;position:relative;font-weight:500;line-height:.2rem}
.rewards-box .detail .description i{position:absolute;left:0;top:50%;transform:translate3d(0, -50%, 0);display:block;width:.2rem}
.rewards-box .detail .description i > svg{fill:var(--theme-light);width:.16rem;position:absolute;left:50%;top:50%;transform:translate3d(-50%, -50%, 0)}
.rewards-box .detail .description + .description{color:#666}
.rewards-box .detail .description > strong{color:var(--theme);font-weight:inherit}

@media (min-width:1280px) {
  .layer.has-form .layer-title .icon{width:.4rem}
  .layer.has-form .layer-title > strong{font-size:.27rem;line-height:.32rem}
  .layer.has-form .layer-title > small{font-size:.2rem;line-height:.32rem}
  .layer.has-form .notice{font-size:.14rem;line-height:.18rem;padding:.3rem 0 .25rem}
  
  .rewards-box{display:flex;align-items:center;justify-content:space-between;gap:.2rem;padding:.24rem .32rem}
  .rewards-box .gift{flex:none;width:1.7rem}  
  .rewards-box .detail{flex:1;}
  .rewards-box .detail .title{font-size:.16rem}
  .rewards-box .detail .description{font-size:.14rem;margin-top:.05rem}
  .rewards-box .detail .description + .description{margin-top:.1rem}  
}

@media (max-width:1279px) {  
  .layer.has-form .layer-title .icon{width:.4rem}
  .layer.has-form .layer-title > strong{font-size:.32rem;line-height:.32rem}
  .layer.has-form .layer-title > small{font-size:.24rem;line-height:.32rem}
  .layer.has-form .notice{font-size:.16rem;line-height:.18rem;padding:.3rem 0 .45rem}

  .rewards-box .gift{width:2.33rem;margin:.13rem auto 0}
  .rewards-box .detail .title{font-size:.2rem}
  .rewards-box .detail .description{font-size:.16rem;margin-top:.05rem}
  .rewards-box .detail .description + .description{margin-top:.14rem}  
}

.layer form,
.layer fieldset{display:block;width:100%}

.layer .form-group{overflow-x:clip}
.layer .form-group > label{display:block;font-weight:400;line-height:1.5;color:#404753;margin-bottom:.08rem}

.layer .form-group > input[type="text"],
.layer .form-group > input[type="tel"],
.layer .form-group > textarea{
  width:100%;
  display:block;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;  
  border: .01rem solid #C0C7D5;
  background: #FFF;
  color:#6B7280;
  font-weight: 400;
  resize:none;
  padding:0 .14rem;
}

.layer .form-group > input:focus,
.layer .form-group > textarea:focus{
  outline:none;
  border-color:var(--theme);
  background:inset 0 0 0 9999px #fff;
}


.layer .form-group > input[type="checkbox"]{font-size:1px;line-height:1px;border:0 none;position:absolute;height:1px;right:100%;border:0 none;outline:none;}
.layer .form-group.chk{display:flex;align-items:center;justify-content:flex-start}
.layer .form-group.chk label{display:block;flex:none;width:fit-content;position:relative;padding-left:.25rem;margin-bottom:0}
.layer .form-group.chk label::before{
  content:"";display:block;left:0;background:url(img/input-checkbox.svg) no-repeat center center;position:absolute
}
.layer .form-group > input[type="checkbox"]:checked + label::before{background-image:url(img/input-checkbox-checked.svg)}
.layer .form-group.chk .inline-btn{display:block;flex:none;color:var(--theme);font-weight:500;position:relative;line-height:1.5;margin-left:.1em}
.layer .form-group.chk .inline-btn::before{content:"";display:block;position:absolute;bottom:0;left:0;width:100%;height:.01rem;background:var(--theme)}

@media (min-width:1280px) {     
  .layer.has-form,
  .layer.has-doc,
  .layer.alarm{width:8rem}
  .layer.has-doc .layer-body{padding:.24rem .9rem}

  .layer[data-name="alert"]{width:6.4rem}
  .layer[data-name="alert"] .layer-body{height:2.4rem;padding-top:.15rem}
  .layer[data-name="alert"] .layer-body > p{font-size:.24rem}

  .layer .btn-submit .txt,
  .layer .btn-download .txt{font-size:.2rem}  

  .layer .pc-flx-box{display:block;display:flex;align-items:stretch;justify-content:flex-start;gap:.14rem;width:100%}  
  .layer .pc-flx-box .form-group{flex:1;}  
  .layer fieldset > .form-group + .form-group{margin-top:.14rem}
  .layer .form-group > label{font-size:.14rem}    
  .layer .form-group > input[type="text"],
  .layer .form-group > input[type="tel"],
  .layer .form-group > textarea{
    font-size:.14rem;
    line-height:.4rem;
    border-radius: .11rem;
  }
  .layer .form-group.chk label{padding-left:.25rem;margin-top:.34rem;margin-bottom:.34rem}  
  .layer .form-group.chk label::before{width:.18rem;height:.18rem;top:.02rem}
  .layer .form-group .inline-btn{font-size:.14rem}
}

@media (max-width:1279px) { 
  .layer.has-form,
  .layer.has-doc,
  .layer.alarm{width:6.22rem}
  .layer.has-doc .layer-body{padding:.24rem .32rem}

  .layer[data-name="alert"]{width:4.8rem}
  .layer[data-name="alert"] .layer-body{height:2rem;padding-top:.12rem}
  .layer[data-name="alert"] .layer-body > p{font-size:.2rem}

  .layer .btn-submit .txt,
  .layer .btn-download .txt{font-size:.24rem} 
  .layer .form-group + .form-group{margin-top:.14rem}
  .layer .form-group > label{font-size:.16rem} 
  .layer .form-group > input[type="text"],
  .layer .form-group > input[type="tel"],
  .layer .form-group > textarea{
    font-size:.18rem;
    line-height:.45rem;
    border-radius: .14rem;
  }
  .layer .form-group > input[type="checkbox"] + label{padding-left:.32rem;margin-top:.36rem;margin-bottom:.36rem;font-size:.18rem;font-weight:500}  
  .layer .form-group > input[type="checkbox"] + label::before{width:.22rem;height:.22rem;top:.04rem}
  .layer .form-group .inline-btn{font-size:.18rem}
}




.msg-box-title{display:flex;margin:0 auto;text-align:center;background:var(--theme);color:#fff;width:fit-content;height:.52rem;border-radius:.26rem;align-items:center;justify-content:center;padding:0 .4rem;gap:.08rem}
.msg-box-title .icon,
.msg-box-title .txt{flex:none;display:block;}
.msg-box-title .txt{font-weight:700;line-height:1.4}
.msg-box-title .icon svg{fill:#fff}

.my-msg .msg-box-title{margin-top:.48rem}
.layer.has-form .box-sub-title{display:block;text-align:center;color:#404753;font-weight:400;line-height:.22rem}
.layer.has-form textarea::placeholder{color:rgba(107, 114, 128, .4);text-align:right}

.layer.has-form .privacy-btn{display:flex;height:.52rem;border-radius:.11rem;border: .01rem solid #C0C7D5;background:rgba(255, 255, 255, .5);gap:.07rem;align-items:center;justify-content:center;padding:0 .14rem;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;margin:.14rem 0}
.layer.has-form .privacy-btn i{display:block;flex:none}
.layer.has-form .privacy-btn .icon{width:.2rem}
.layer.has-form .privacy-btn .icon svg{fill:#006D37}
.layer.has-form .privacy-btn .arrow{width:.12rem}
.layer.has-form .privacy-btn .arrow svg{fill:#707785}
.layer.has-form .privacy-btn span{flex:1;display:block;text-align:left;line-height:1.5;font-weight:400}


.layer-body.my-msg + .layer-foot,
.layer-foot.share-msg,
.layer-foot.for-instagram{padding:0 .12rem .12rem;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;height:1.44rem}
.layer-body.my-msg + .layer-foot::before,
.layer-foot.share-msg::before,
.layer-foot.for-instagram::before{display:block;content:"";position:absolute;top:0;left:.12rem;right:.12rem;height:.04rem;background:#DBEAFE;opacity:.5}

.layer-foot .btn-download{box-shadow: 0 .1rem .15rem -.03rem #BFDBFE, 0 .04rem .06rem -.04rem #BFDBFE;height:.72rem;gap:.12rem;width:5.52rem;margin:0 auto}
.layer-foot .btn-download .txt{font-size:.2rem;line-height:.27rem;padding-bottom:.01rem;letter-spacing:-.025em;font-weight:700}
.layer-foot .btn-download::before{border-radius:.2rem}
.layer-foot .btn-download .icon{background:#fff;border-radius:100%;position:relative;width:.32rem;top:.01rem}
.layer-foot .btn-download .icon::before{content:"";display:block;padding-top:100%}
.layer-foot .btn-download .icon > svg{width:.2rem;position:absolute;left:50%;top:50%;transform:translate3d(-50%, -50%, 0);fill:var(--theme-light);}

.my-msg .dog{flex:none;width:1rem;height:auto;display:block;margin:0 auto}
.my-msg .msg{display:block;text-align:center}
.my-msg .msg > p{position:relative;text-align:center;display:block;color:var(--theme-light);font-weight:900;line-height:1.2;letter-spacing:-.06em;width:fit-content;margin:0 auto;word-break:break-word;word-wrap:break-word}
.my-msg .msg > p::before,
.my-msg .msg > p::after{font:inherit;color:inherit}
.my-msg .msg > p::before{content:"“";display:inline-block;position:relative;left:-.15em}
.my-msg .msg > p::after{content:"”";display:inline-block;position:relative;left:.15em}
.my-msg .msg .msg-area{margin-top:.2rem}
.my-msg .name{width:fit-content;margin:0 auto;display:block;color:var(--text);font-weight:700;line-height:1.2;padding-top:.25rem;position:relative}
.my-msg .name::before{content:"";display:block;position:absolute;height:.02rem;background:#F3F4F6;left:0;top:0;width:100%}
.my-msg .name span{font:inherit}
.my-msg .description{display:block;font-weight:400;color:#4B5563;line-height:1.3;padding-top:.25rem}
.my-msg .description > strong{font:inherit;font-weight:500;color:var(--theme-light);}

.layer-body.my-msg + .layer-foot.share-msg{padding-bottom:0}
.layer-foot.share-msg .description{text-align:center}
.layer-foot.share-msg + .layer-foot .btn-download .icon{background:transparent}
.layer-foot.share-msg + .layer-foot .btn-download .icon > svg{fill:#fff}

.layer-foot.for-instagram .btn-download .txt{font-size:.28rem;line-height:.3rem}
.layer-foot.for-instagram .btn-download .paw-1{left:5%;top:20%;transform:rotate(-7.5deg);width:.18rem;}
.layer-foot.for-instagram .btn-download .paw-2{left:75%;top:0%;transform:rotate(-7.5deg);width:.14rem;}

@media (min-width:1280px) {
  .layer .msg-box-title .txt{font-size:.2rem}
  .layer .msg-box-title .icon{width:.2rem}
  .layer.has-form .box-sub-title{font-size:.16rem;padding:.12rem 0 .08rem}
  .layer.has-form textarea{height:1.09rem}
  .layer.has-form .privacy-btn{gap:.07rem}
  .layer.has-form .privacy-btn span{font-size:.14rem}
  .layer[data-name="cheering-msg"] form fieldset{margin-bottom:.15rem}

  .layer-body.my-msg .msg-area{display:flex;align-items:center;justify-content:space-between;margin-top:.3rem;margin-bottom:.45rem;position:relative;gap:.2rem}  
  .layer-body.my-msg .name{position:relative;margin:0;font-size:.32rem}
  .layer-body.my-msg .description{font-size:.2rem}

  .layer-body.my-msg .msg-area .msg{flex:1;margin:0}
  .layer-body.my-msg .msg-area .msg p{flex:none;margin:0 auto;font-size:.48rem;text-align:center;}
}
@media (max-width:1279px) { 
  .layer .msg-box-title .txt{font-size:.22rem}
  .layer .msg-box-title .icon{width:.22rem}
  .layer.has-form .box-sub-title{font-size:.18rem;padding:.12rem 0 .2rem}
  .layer.has-form textarea{height:1.69rem}
  .layer.has-form textarea::placeholder{font-size:.9em;}
  .layer.has-form .privacy-btn{gap:.1rem}
  .layer.has-form .privacy-btn span{font-size:.16rem}
  .layer.has-form .layer-body.my-msg{padding-bottom:.4rem}
  .layer[data-name="cheering-msg"] form fieldset{margin-bottom:.3rem}

  .layer .my-msg .msg{margin-top:.3rem;margin-bottom:.3rem}
  .layer .my-msg .msg-area{margin-bottom:.3rem}
  .layer .my-msg .name{font-size:.3rem}
  .layer .my-msg .description{text-align:center}
  .layer .my-msg .msg > p{font-size:.4rem}
}

#downloadStage .my-msg{display:flex;flex-direction:column;align-items:center;justify-content:center;width:1280px;height:1280px}
#downloadStage .my-msg > *{flex:none;width:fit-content}
#downloadStage .my-msg .msg-box-title{height:104px;border-radius:52px;padding:0 80px;gap:16px;font-size:0;line-height:0;margin-top:0}
#downloadStage .my-msg .msg-box-title .txt{font-size:44px;display:block;line-height:44px;margin:0;padding:0;flex:none;margin-bottom:-.6em}
#downloadStage .my-msg .msg-box-title .icon{width:44px;height:44px;background:url(img/icon-paw.png) no-repeat center / contain;display:block;flex:none}
#downloadStage .my-msg .msg-box-title .icon svg{display:none}
#downloadStage .my-msg .msg-area{display:block;flex-direction:column;max-width:80%;margin:80px auto 40px}
#downloadStage .my-msg .dog{flex:none;width:200px;padding-top:10px}
#downloadStage .my-msg .msg{display:block;width:100%}
#downloadStage .my-msg .msg p{font-size:85px}
#downloadStage .my-msg .name{font-size:60px;padding-top:60px}
#downloadStage .my-msg .name::before{height:2px;}
#downloadStage .my-msg .description{font-size:48px;text-align:center;padding-top:50px}



.layer.alarm .layer-head,
.layer.alarm .layer-body{
  display:flex;flex-direction:column;width:100%;padding:0;align-items:center;justify-content:center
}
.layer.alarm .layer-head{height:1.92rem;background:#F0F7FF;}
.layer.alarm .layer-body{height:4.08rem}
.layer.alarm .layer-head .icon{background:#fff;display:block;flex:none;border-radius:.24rem;box-shadow: 0 .01rem .02rem 0 rgba(0, 0, 0, 0.05);padding:.2rem;width:fit-contento}
.layer.alarm .layer-head .icon svg{fill:#028AE6;width:.62rem}
.layer.alarm .layer-body .layer-title{display:block;flex:none;text-align:center;letter-spacing:-.02em;font-weight:400;line-height:.42rem;font-size:.35rem;padding-bottom:.36rem;position:relative;}
.layer.alarm .layer-body .layer-title::before{content:"";display:block;position:absolute;left:50%;bottom:0;width:.4rem;border-radius:.015em;height:.03rem;background:#D1E9FF;transform:translate3d(-50%, 0,0)}
.layer.alarm .layer-body .layer-title > strong{font:inherit;color:#028AE6}
.layer.alarm .layer-body .description{font-weight:400;text-align:center;display:block;padding:.32rem 0;font-size:.2rem;line-height:.32rem;flex:none}
.layer.alarm .layer-body .footprint{display:block;width:.3rem;margin:0 auto;flex:none;margin-top:.16rem}
.layer.alarm .layer-body .footprint svg{fill:#B3DDFB;}