@charset "utf-8";

@import url("./reset.css");
@import url("./common.css");
@import url("./component.css");
@import url("./util.css");


.main-sc__inner{padding-block: var(--space-100);  margin: 0 auto; min-height: 100vh;}
.main-section__header{display: flex; flex-direction: column; align-items: center;  gap: var(--space-24);}
.main-section__heading{text-align: center; position: relative; }
.border{display: inline-block; width: 50px; height: 2px; background-color: #3BB2FF; opacity: 0.25;}
.main-section__eyebrow{color: #2EDBFF; font-weight: 600; margin-bottom: var(--space-12); display: inline-block;}
.main-section__title{color: #E4E7EC; line-height: 1.3; font-weight: 600; font-size: 1.75rem;}
.main-section__desc{text-align: center; color: var(--color-text-inverse); font-weight: 300; line-height: 1.7; font-size: 1rem;}

@media (min-width:1080px){

.main-section__eyebrow{font-size: 1.375rem;}
.main-section__title{font-size: 2.75rem }
.main-section__desc{font-size: 1.25rem}
} 

/* quick-menu */
.quick-menu { display: flex; flex-direction: column; gap: var(--space-4); background:rgba(7,32,67,.7) ; visibility: hidden; opacity: 0;  padding: 6px 8px; border-radius: var(--radius-md); backdrop-filter: blur(10px); position: fixed; z-index: 10; right: 16px; top: 50%; transform: translateY(-50%); box-shadow: 0 0 0px rgba(60, 166, 255, 0.3), 0 0 30px rgba(60, 166, 255, 0.15);}
.quick-menu::before{content:"";position:absolute;inset:0; z-index: 5; padding:1px;border-radius:inherit;background:linear-gradient( 120deg,rgba(46,219,255,.3),rgba(60,166,255,.25)); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;}
.quick-menu__item { display: flex; align-items: center; gap: var(--space-8);height: 40px; border-radius: var(--radius-md);color: #D5ECFF; font-size: 0.75rem; line-height: 1; text-decoration: none;padding-inline: 8px; border: 1px solid transparent;transition: all 0.25s ease;}
.quick-menu__item .icon{width: 24px; height: 24px; }
.quick-menu__item .icon-download-doc{width: 26px; height: 26px;}
.quick-menu .border{width: 100%; height: 1px; opacity: 0.1;}
 


@media (min-width:768px){
.quick-menu{gap: 0; right: 20px;}
.quick-menu__item {line-height: 1.4; font-size: 0.9375rem;padding: 20px 16px;  height: auto; flex-direction: column;}
.quick-menu__item .icon{width: 32px; height: 32px; }
.quick-menu__item .icon-download-doc{width: 36px; height: 36px;}
.quick-menu .border{width: 88%; margin: 0 auto;}
}
@media (min-width:1080px){
  .quick-menu{ right: 40px;}
}


/* video */
.video{
background:#081A33;height:100vh; position: relative;
.video__wrap{position:relative; overflow:hidden;height:100%;}
.video__media{display:block;width:100%;height: calc(100% - var(--nav-height));position: absolute;left: 0; right: 0; bottom: 0;object-fit:cover;}
.video__hero{position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); z-index: 1; display:flex;flex-direction:column;align-items:center;justify-content:center;}
.video__media{filter: brightness(0.7);}
.badge{display:inline-flex;align-items:center; justify-content:center;position: relative; padding-inline: var(--space-12); height:36px; border-radius:999px; background:rgba(11,27,49,0.9); margin-bottom: var(--space-24);}
.badge::before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(135deg,#0082EE 1%,#2c9cb3 2%,rgba(24, 79, 90, 0.5) 100%);z-index:-1;}
.badge > span{font-size: 1rem;font-weight: 700; font-family: var(--ff-secondary);background:linear-gradient(90deg, #0082EE, #2EDBFF 65%, #00A5C7 );-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.badge > span.only-pc{font-size: 1.25rem; line-height: 100%;}
.badge .dash{  display:inline-block; margin-inline:-1px; padding-inline: 4px;}
.badge__subtext{font-weight: 400 !important; margin-left: 4px; font-size: 0.9375rem !important; line-height: 100%;}
.video__actions{position: absolute; bottom: -36px; transform: translateY(100%); z-index: 5; width: 100%; justify-content: center;}
.video__btn{position: relative; white-space: noWrap; min-width: 170px; background-color: rgba(11,27,49,.85); backdrop-filter: blur(10px);  box-shadow: 0 0 0px rgba(60, 166, 255, 0.3), 0 0 30px rgba(60, 166, 255, 0.15);}
.video__btn::before{content:"";position:absolute;inset:0; z-index: 5; padding:1px;border-radius:inherit;background:linear-gradient( 120deg,rgba(46,219,255,.3),rgba(60,166,255,.25)); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;}

@media (min-width:1080px){
.badge{height: 42px; margin-bottom: 32px; padding-inline: 20px;}
.video__btn{min-width: 200px; width: 100%;}
.video__btn .icon{width: 28px; height: 28px;}

}
}
.video::after{content: ""; position: absolute; inset: 0; background-color: #0A1729; opacity: 0.65;}



/* intro */
.intro{
background:linear-gradient(#081A33,#071A33); position: relative;
.main-sc__inner{min-height: 100vh;}    
.intro__header{z-index: 1; position: relative; margin-top: var(--space-50);}
}
.intro::after{ content:""; position:absolute; left:50%; bottom:-150px;transform:translateX(-50%); width:100%; height:690px; opacity: 0.3; background:url(../images/intro-bg-mo.png) no-repeat 55% center/cover;pointer-events:none;}
@media (min-width:768px){
.intro::after{ height:100%; width: 100%; filter: brightness(0.45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transform:translateX(0%); content:""; position:absolute; inset:0; transform:translateY(100px); background:url(../images/intro-bg-pc.png) no-repeat 52% 30% / cover;-webkit-mask-image: linear-gradient(to bottom, transparent 0%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 80%, transparent 100%); mask-image: linear-gradient(  to bottom, transparent 0%,  rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%,transparent 100%); opacity: 0.65;}
.intro__img{width: 280px;}
.intro__header{margin-top: var(--space-100);}
}
@media (min-width:1080px){
.intro__img{width: auto}
.intro::after{ height:1450px; transform:translateY(-60px); background-size: 110%; background-position:calc(50% - 24px) 30%; }
}

/* report */
.report{
background: linear-gradient(#071A33, #061326);
.sc__content{position: relative; z-index: 1;}
.report__list {display: grid; grid-template-columns: repeat(2, 1fr);gap: var(--space-8); margin-top: 60px; }
.report__item {aspect-ratio: 1/1;color: var(--color-white);position:relative;border-radius: var(--radius-md);background: rgba(8, 35, 66, 0.15);box-shadow: inset 0 0 24px rgba(70, 130, 190, 0.08);display: flex;flex-direction: column;align-items: center;justify-content: center; gap: var(--space-12);}
.report__num{font-variant-numeric:normal; font-size: clamp(2rem, 3.3vw, 3rem); font-weight: 600; line-height: 100%;}
.report__label{color: var(--color-text-inverse); font-size: clamp(0.875rem,1.25vw,1.125rem); font-weight: 300; text-align: center; line-height: 1.4;}

@media (min-width:576px){
.report__list{grid-template-columns: repeat(3, 1fr);}
}
@media (min-width:768px){
.report__item {aspect-ratio: auto; padding: 20px;}
.report__list{grid-template-columns: repeat(3, 1fr);}
}
@media (min-width:1080px){
.sc__content{display: grid; grid-template-columns: repeat(2,1fr); gap: 20px;}
.main-sc__inner{display: flex; align-items: center;}
.report__item{padding: 32px;}
.report__list{grid-template-columns: repeat(2, 1fr); gap: 24px;}
.report__header{align-items:flex-start; margin-top: 0;}
.report__heading{text-align: start;}
.report__desc{text-align: start; width: 90%;}
}
}

/* why */
.why{
  background: #081A33 ;

.why__list{margin-top: var(--space-50); display: grid; gap: var(--space-8);}
.why__item{position: relative;}
.why-item-text{padding-block: var(--space-16); overflow: hidden;  z-index:1; position: relative; width: 100%;}
.why-item__title{margin-bottom: var(--space-8); font-size: clamp(1.25rem,1.94vw,1.75rem); font-weight: 600; color: #E4E7EC;}
.why-item__desc{color: var(--color-white); opacity: 0.8; font-size: clamp(1rem,1.38vw, 1.0625rem); line-height: 1.5; font-weight: 300;}
.img__cover{border-radius: var(--radius-md); overflow: hidden; height: auto; aspect-ratio: 3/2;}
.why-item__img{ background-color: #061C3A; font-weight: 300;  transform: scale(1);filter: brightness(.8); opacity: 0.9;transition:transform .5s ease, filter .5s ease,opacity .5s ease;  display:block;width:100%;height:100%; object-fit:cover;}
.why__item:nth-of-type(2) .why-item__img{opacity: 0.8;}
.why-item-text::before{content:""; position:absolute;inset: 0;display: inline-block; background:linear-gradient(180deg,rgb(6, 20, 40, 0.5),rgb(6, 20, 40, 0.25) );border-radius: 0 0 var(--radius-md) var(--radius-md) ;opacity:0;transform:translateY(8px);transition:.35s ease; z-index:-1;
}
@media (hover:hover) {
.why__item:hover .why-item__img{transform: scale(1.06);filter: brightness(1);opacity:1;}
.why__item:hover .why-item-text::before{ opacity:1;  transform:none;}
.why__item:hover .why-item__desc{opacity: 1;}
.why__item:hover .why-item__title{color: var(--color-white);}
}
@media (min-width:768px){
.why__inner{display: flex; justify-content: center;}
.why__list{grid-template-columns: repeat(3,1fr); gap: 28px;}
.img__cover{aspect-ratio: 500/640;}
.why-item-text{position: absolute; bottom: 0; padding: 16px; min-height: 135px;}

}
@media (min-width:1080px){
background:#081A33 url("../images/why-bg.png") no-repeat center/cover;
.why-item-text{padding:32px;}
}
}

/* highlights */
.highlights{
background-color: #061326;
.sc__content{margin-top: var(--space-50);}
.main-sc__inner{min-height: fit-content;}
.highlightsSwiper{overflow:hidden;}
.swiper-wrapper{cursor: pointer;}
.highlights__img{aspect-ratio:3/2;overflow:hidden;border-radius:var(--radius-md);}
.highlights__progress{position: relative; flex:1;height:2px;background: rgba(255,255,255,.1);overflow:hidden;}
.highlights-swiper__controls{display: flex; align-items: center; position: relative; z-index: 0; margin-top: var(--space-12);}
.highlights__progress .swiper-pagination-progressbar-fill{background:#547792;}
.highlights__progress.swiper-pagination-lock +.highlights__nav {display: none;}
.highlights__nav{display:flex;gap:var(--space-4);  transform: translateX(var(--space-12));}
.highlights__btn{width:40px;height:40px;border:0;background:none;cursor:pointer;position:relative; display: flex;align-items: center;justify-content: center;}
.highlights__btn::before{content:"";position:absolute;background-position: center;width:16px;height:16px;background-repeat:no-repeat;background-position:center;background-size:contain;}
.highlights-swiper__btn--prev::before{background-image: url(../images/icon/arrow-blue-perv.svg);}
.highlights-swiper__btn--next::before{background-image: url(../images/icon/arrow-blue-next.svg);}
.btn__highlights{background-color: transparent;  border: 1px solid var(--color-tertiary);}
.btn__highlights .icon{width: 20px; height: 20px; opacity: 0.8;}

@media (min-width:1080px){
.highlights-swiper__controls{width: 50%; margin: 0 auto; margin-top: 32px;}
.highlights__btn{width: 70px; height: 70px;}
.highlights__btn::before{width: 20px; height: 20px;}
.btn__highlights .icon{width: 24px; height: 24px;}
}
}


/* venue */
.venue{
background-color: #07172E;
.venue__header{margin-bottom: var(--space-50);}
.venue__map{width:100%;height:100%;border:0;aspect-ratio:3/2; border-radius: var(--radius-md);}
.btn__venue { background-color: var(--navy-800);}
.btn__venue .icon{width: 20px; height: 20px; opacity: 0.7;}
@media (min-width:768px){
.venue__inner{display: flex;flex-direction: column;justify-content: center;}
.venue__header{align-items: flex-start;}
.main-section__desc{text-align: start; width: 90%;}
.venue__content{display: grid; grid-template-columns: 40% 60%; gap: 20px;}
.venue__map{width: calc(100% - 20px);}
.btn__venue .icon{width: 24px; height: 24px;}
}
}

/* engagement */
.engagement{
background: linear-gradient(180deg,#081A33 0%,#061326 100%);
.engagement__inner {margin: 0 auto;padding-bottom:150px;}
.sc__content{display: flex; gap: var(--space-12);}
.engagement__card {padding: var(--space-32) var(--space-16);border-radius: var(--radius-md); background-color: #0A2140;}
.engagement__title {text-align: center;margin-bottom: var(--space-12); font-size: clamp(1.375rem,2.22vw, 2rem);}
.engagement__desc {font-size: clamp(0.9375rem,1.18vw, 1.0625rem)}
.engagement__aside{ grid-area:aside;}
.engagement__visual{display: none;}
.engagement__visual .img{filter: brightness(0.75); border-radius: var(--radius-md); object-fit: cover;}

/* subscribe */
.subscribe{grid-area:subscribe}
.subscribe__header{margin-bottom: var(--space-24);}
.input__label{color: var(--color-text-inverse);}
.input__field + .input__field{margin-top: var(--space-20);}
.agreement__checkbox{margin-top: var(--space-16);}
.checkbox__label{color: var(--color-text-inverse);}
.subscribe__btn{max-width: fit-content;margin-left: auto;}

/* follow */
.social__link{display: inline-block; width: 40px; height: 40px; background-position: center; background-repeat: no-repeat; background-size: contain; }
.social__group{display: flex; justify-content: center; gap: var(--space-12); margin-top: var(--space-16);}
.social__item:nth-child(1) .social__link{background-image:url("../images/icon/facebook.svg");}
.social__item:nth-child(2) .social__link{ background-image:url("../images/icon/linked.svg");}
.social__item:nth-child(3) .social__link{background-image:url("../images/icon/instagram.svg");}
.social__item:nth-child(4) .social__link{background-image:url("../images/icon/youtube.svg");}
.follow__title{text-align: center;}


@media (min-width:768px){
.sc__content{display: grid; grid-template-columns:1fr 1fr;grid-template-areas:"aside subscribe"; gap: 28px;}
.engagement__inner{display: flex; align-items: center;}
.engagement__visual{position: relative; border-radius: var(--radius-md); flex: 1; display: block;}
.engagement__card{padding: 40px 36px ;}
.engagement__aside{display: flex;flex-direction: column; gap: 24px;}
.follow__title{text-align: start;}
.follow__desc{text-align: start;}
.social__group{justify-content: flex-start;}
.subscribe__btn{max-width: none; width: 100%;}

}
}