@charset "utf-8";

:root{
   /* var color : fluenC */
   --brand-gradient-1:linear-gradient(141deg, #8C30D4 0.71%, #6D38D0 100%); 
   --brand-color-1:var(--vivid-pink); --brand-color-2:var(--dark-lavender); --brand-color-3:var(--lavender-normal); --brand-color-4:var(--lavender-light); --brand-color-5:var(--lavender-soft);
}


/*####################
Layout
######################*/
#wrap{display:flex; flex-direction:column; align-items:center;}
#header{display:flex; flex-direction:column; align-items:center; position:sticky; z-index:100; top:0; width:100%; background-color:#fff; background:var(--brand-gradient-1); box-shadow:0 0 16px rgb(0 0 0 / 24%);}
#container{display:flex; padding:0; width:100%;}
.contents-page{flex-grow:1; display:flex; flex-direction:column; gap:0; margin-bottom:24px;}
/* detail contents */
.detail-page{flex-grow:1; display:flex; flex-direction:column; position:relative; width:100%; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; transition:all 0.2s;}
.detail-page-wrapper{display:flex; flex-direction:column;  position:relative; width:100%;}
.detail-page-header{flex-shrink:0; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; position:sticky; z-index:2; top:0; left:0; gap:16px; background-color:var(--lightgray-bg);}
.detail-page-component{flex-grow:1; display:flex; flex-direction:column; align-items:center; gap:40px; position:relative; z-index:1;}
/* section */
.section{display:flex; flex-direction:column; gap:16px; width:100%;}
.section h2{font-size:40px;}
.section h3{font-size:32px;}
.section h4{font-size:24px;}
.section h5{font-size:18px;}
.section h6{font-size:16px;}
.section :is(h2, h3, h4, h5, h6){color:#333; font-weight:600; word-break:keep-all;}
.section :is(h2, h3, h4, h5, h6)>b{font-weight:500;}
.section :is(h2, h3, h4, h5, h6)>span{font-weight:400;}
.section :is(h2, h3, h4, h5, h6)>em{font-weight:300; font-style:normal;}
.section-header{display:flex; gap:16px; padding:0 4px; font-family:var(--font-poppins);}
.modal-wrapper .section-header{padding:0;}
.section-header.column{flex-direction:column; align-items:baseline; gap:8px;}
.section-header.align-center{justify-content:center;}
.section-header>em{color:#7b7b7b; font-size:15px; font-style:normal;}
.section-header>span{color:#777; font-size:13px;}
.section-header>span.date-info{padding-left:16px; border-left:1px solid #ccc;}
.section-header>.function{flex-grow:1; display:flex; justify-content:flex-end; align-items:flex-end;}
.section-items{display:flex; flex-direction:column; gap:16px; position:relative;}
.section-items:empty{align-items:center; gap:4px; padding:40px 0; border-radius:16px; border:1px dashed rgb(0 0 0 / 10%); background-color:rgb(255 255 255 / 50%); white-space:pre-line;}
.section-items[data-title]:empty::before{content:attr(data-title); color:var(--brand-color-3); font-size:18px; white-space:pre-line; text-align:center;}
.section-items[data-empty]:empty::after{content:attr(data-empty); color:#777; font-size:18px;}
.section-items[data-title]:empty::after{font-size:15px;}
.section-items.zero-gap{gap:0;}
.section-items>h6{display:flex; align-items:center; gap:4px; color:#333; font-size:15px; font-weight:400;}
.section-items>h6.emphasis{color:var(--brand-color-1);}



/*####################
Navigation
######################*/
.nav-bar{display:flex; align-items:center; column-gap:24px; padding:0 32px; max-width:1280px; width:100%; height:64px;}
.nav-mh{display:flex; justify-content:center; align-items:center; gap:8px;}
.logo{width:112px; height:32px; background-image:url(https://static.gofluenc.com/assets/img/logo-fluenc.png); background-repeat:no-repeat; background-size:contain; background-position:center;}
.logo.white{background-image:url(https://static.gofluenc.com/assets/img/logo-fluenc-white.png);}
.nav-bar>h3{flex-grow:1; display:flex; justify-content:center; align-items:center; padding-right:120px; color:rgb(255 255 255 / 80%); font-size:18px; font-weight:400; word-break:keep-all;}
.nav-bar>h3>br{display:none;}


/*####################
Hero Module
######################*/
.hero-module{display:flex; justify-content:center; position:relative;}
.hero-module::before{content:''; display:flex; width:100%; background-image:url(../img/hero-image-teaser.jpg); background-repeat:no-repeat; background-position:top center; background-size:cover; aspect-ratio:16 / 9; animation: glowBackground 10s ease-in-out infinite;}
@keyframes glowBackground { 0%, 100% {filter: brightness(0.3);} 50% {filter: brightness(1);} }
/* tick counter */
.tick-flip, .tick-text-inline{font-size:2.4em;}
.tick-flip:nth-last-child(3n+4){margin-right:14px;}
.tick-flip:nth-last-child(3n+4)::before{content:','; position:absolute; right:-20px; display:inline-flex;}
.tick-countdown{gap:40px;}
.tick-group{display:flex; flex-direction:column; gap:8px; }
.tick-countdown .tick-flip{box-shadow: 0 0 40px rgb(0 0 0 / 40%); font-size:6em;}
.tick-group>span[data-view]{font-size:1.6em; text-align:center; opacity:0.5;}
/* tick counter - box */
.counter-box{display:flex; justify-content:center; align-items:center; width:100%;}
.counter-item{display:flex; align-items:center; gap:8px; color:#fff;}
.counter-item>p{line-height:1; font-size:15px; white-space:nowrap;}
#countdown-counter{flex-direction:column; gap:8px; position:absolute; inset:5% 0; margin:0 auto; padding:0 32px; width:100%; max-width:1280px;}
#countdown-counter .counter-item{background-color:transparent;}
#countdown-counter .teaser-btn{flex-grow:1; display:flex; align-items:center;}
#countdown-counter .teaser-btn .play-btn{width:160px; height:160px; background-image:url(../img/btn-play.png); background-size:contain; background-repeat:no-repeat; opacity:0.5;}


/*####################
contents page
######################*/
#container .section{row-gap:56px; align-items:center; padding:104px 0;}
#container .section-header{flex-direction:column; padding:0 32px; width:100%; max-width:1280px; text-align:center;}
#container .section-header h2>b{display:inline-block;}
#container .section-items{align-items:center; row-gap:40px; padding:0 32px; width:100%; max-width:1280px;}
.section :is(h2, h3, h4, h5, h6){text-align:center;}

/* promotion info */
.promotion-info{display:flex; flex-direction:column; gap:16px; position:relative; padding:24px 24px 32px 24px; border-radius:16px; border:1px solid #ddd; background-color:#f5f7f9;}
.promotion-info::before{content:''; position:absolute; inset:80px auto 24px 184px; border-left:1px solid #ddd;}
.promotion-info>h4{margin-bottom:16px;}
.promotion-item-row{display:grid; grid-template-columns:0.5fr 1fr; gap:40px; color:#333; font-size:18px;}
.promotion-item-row>b{font-weight:500;}
.promotion-item-row>span{font-weight:300;}

button.govisioncamp{background:var(--brand-gradient-1); color:#fff;}



/*####################
Screen size
######################*/
@media (max-height: 768px) {
   .modal-layer.audio .modalwrap-panel{max-width:880px;}
}
/* ##Device = Tablets, Ipads (portrait), ##Screen = B/w Less than 1024px */
@media (max-width: 1024px) {

   .tick-flip:nth-last-child(3n+4){margin-right:12px;}
   .tick-flip:nth-last-child(3n+4)::before{right:-16px;}
   .tick-flip, .tick-text-inline{font-size:2.0em;}
   .tick-countdown{gap:24px;}
   .tick-countdown .tick-flip{font-size:5.2em;}
   .nav-bar>h3{font-size:16px;}

}
/* ##Device = Tablets, Ipads (portrait), ##Screen = B/w Less than 768px */
@media (max-width: 768px) {

   .tick-flip:nth-last-child(3n+4){margin-right:8px;}
   .tick-flip:nth-last-child(3n+4)::before{right:-12px;}
   .counter-item>p{font-size:12px;}
   .tick-flip, .tick-text-inline{font-size:1.6em;}
   .tick-countdown{gap:16px;}
   .tick-countdown .tick-flip{font-size:3em;}
   .tick-group>span[data-view]{font-size:1.2em;}
   #countdown-counter{padding:0 16px;}
   #countdown-counter .teaser-btn .play-btn{width:120px; height:120px;}
   .nav-bar{height:48px;}
   .nav-bar>h3{padding-right:0; font-size:14px;}
   .section h2{font-size:32px;}
   .section h3{font-size:24px;}
   .section h4{font-size:18px;}
   .section h5{font-size:16px;}
   .section h6{font-size:14px;}
   #container .section{row-gap:40px; padding:64px 0;}
   #container .section-header,
   #container .section-items{padding:0 16px;}
   .hero-module::before{height:400px; aspect-ratio:auto;}
   .promotion-item-row{gap:24px; font-size:16px;}
   .promotion-info{gap:16px;}
   .promotion-info::before{content:none;}
   
}

/* ##Device = Most of the Smartphones Mobiles (Portrait), ##Screen = B/w 320px to 479px */
@media (max-width: 480px) {

   .nav-mh>.logo{width:88px; height:24px;}
   .tick-countdown{gap:8px;}
   .tick-countdown .tick-flip{font-size:2.4em;}
   .tick-group>span[data-view]{font-size:1em;}
   #countdown-counter{padding:0 8px;}
   #countdown-counter .teaser-btn .play-btn{width:80px; height:80px;}
   .nav-bar>h3{font-size:12px;}
   .nav-bar>h3>br{display:block;}
   .section h2{font-size:24px;}
   .section h3{font-size:20px;}
   .section h4{font-size:16px;}
   .section h5{font-size:14px;}
   .section h6{font-size:12px;}
   #container .section{row-gap:32px; padding:48px 0;}
   #container .section-header,
   #container .section-items{padding:0 12px;}
   #container .section-items{row-gap:24px;}
   .hero-module::before{height:360px;}
   .promotion-item-row{gap:0; font-size:13px;}
   .promotion-info{gap:8px; padding:16px 16px 24px 16px;}
   button[type=button].large{height:48px;}
   button[type=button].large>span{font-size:16px;}
   

}