:root{
  /* --visual-nav-top:var(--vw-25);
  --visual-nav-bottom:var(--vw-70);
  --visual-nav-textwarp-bottom:calc( var(--visual-nav-top) + var(--visual-nav-bottom) + 30px ) */
}

/* common:banner */
[class*="banner"] .text-wrap .desc{margin-top:16px}
[class*="banner"] .text-wrap .btn{margin-top:24px}
@media(min-width:768px){
  [class*="banner"] .text-wrap .btn{margin-top:40px}
}


/* visual ======================================== */
.visual{overflow:hidden}
.visual .item{padding-top:var(--unit-15x); padding-bottom:100px; position:relative; display:flex; flex-direction:column; justify-content:flex-end}
.visual .item .photo + .container{position:relative}
.visual .text-wrap *{max-width:360px}
.visual .text-wrap *:not(:first-child){margin-top:var(--unit-2x)}
.visual .text-wrap .sub-title{color:var(--white-80)}
.visual .text-wrap .desc{color:var(--white-70)}
.visual .text-wrap .btn-filled{margin-top:var(--unit-5x)}
.visual .visual-carousel,
.visual .item{min-height:640px; height:auto}
.visual-carousel .photo::before{content:''; background:linear-gradient(270deg, rgba(24, 24, 24, 0.36) 40.94%, rgba(24, 24, 24, 0.63) 53.89%, rgba(24, 24, 24, 0.72) 68.21%, rgba(24, 24, 24, 0.85) 78%); opacity:1; position:absolute; inset:0; z-index:1}
.visual .item[data-visual="video"]::after{content:''; background:linear-gradient(180deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.0) 100%); position:absolute; top:0; left:0; right:0; height:240px; z-index:2; pointer-events:none}
.visual-carousel .photo.video .thum-video{width:100%; height:100%; object-fit:cover}
.visual-carousel .photo.video{background-color:#000}
.visual-carousel .photo::before,
.visual .item[data-visual="video"]::after{
-webkit-transform:translateZ(0);
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  will-change:opacity, transform;
}


/* thum-poster */
.visual-carousel .photo.video .thum-poster{position:absolute; opacity:1; width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover; transition:opacity .8s ease}
.visual-carousel .photo.video .thum-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s ease}
.visual-carousel .photo.video.is-video-ready .thum-video{opacity:1}
.visual-carousel .photo.video.is-video-played .thum-poster{opacity:0}
.visual-carousel .photo.video.is-video-played .thum-video{opacity:1; transition:none}
.visual-carousel .photo.video.is-video-played .thum-poster{transition:none}

@media(max-width:1070px){
  .visual *{margin-left:auto; margin-right:auto; text-align:center}
}
@media(min-width:768px){
  .visual .text{max-width:600px}
  .visual .item .caption{right:var(--container-w-pd)}
}
@media(min-width:1070px){
  .visual .visual-carousel,
  .visual .item{height:auto; min-height:1000px}
  .visual .item{padding-top:var(--header-height-desktop); justify-content:center}
  .visual .text-wrap *{max-width:600px}
  .visual .text-wrap .desc .br-fix{display:none}
  .visual .text-wrap .btn-filled{margin-top:var(--unit-4x)}
  .visual .owl-carousel.overlay-dots .owl-dots{bottom:30px}
}
@media(min-width:2000px){
  .visual .visual-carousel,
  .visual .item{height:1050px}
}

/* visual-carousel - dots */
.visual-carousel.owl-theme .owl-dots{max-width:var(--container); padding-left:var(--container-w-pd); padding-right:var(--container-w-pd); position:absolute; left:50%; bottom:40px; transform:translateX(-50%); display:flex; align-items:center; gap:0; border-radius:999px}
.visual-carousel.owl-theme .owl-dots .owl-dot span{width:6px; height:6px; background-color:var(--white-50)}
.visual-carousel.owl-theme .owl-dots .owl-dot.active span{width:20px; background-color:var(--white)}

@media(min-width:1070px){
  .visual-carousel.owl-theme .owl-dots{width:100%; bottom:200px; justify-content:flex-start}
  .visual-carousel.owl-theme .owl-dots::before{content:attr(data-counter); font-size:12px; color:var(--white-70); margin-right:var(--unit-2x)}
}


/* story ======================================== */
.story{padding-top:var(--unit-10x); padding-bottom:var(--unit-5x)}
.story-carousel{margin-top:var(--unit-5x)}
.story-carousel .item{position:relative; width:100%; padding-top:66.666%; overflow:hidden}
.story-carousel .item img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.story-carousel.owl-theme .owl-nav.disabled + .owl-dots{margin-top:12px}
@media (min-width:1070px){
  .story{padding-top:150px; padding-bottom:150px}
  .story-gallery{max-width:var(--container); margin-top:var(--unit-8x); margin-left:auto; margin-right:auto; padding-left:var(--container-w-pd); padding-right:var(--container-w-pd)}
  .story-carousel{max-width:var(--container); margin-left:auto; margin-right:auto; padding-left:var(--container-w-pd); padding-right:var(--container-w-pd)}
  .story-carousel:not(.owl-loaded){display:grid; grid-template-columns:1fr 2fr 1fr; gap:var(--unit-4x); align-items:center}
  .story-carousel .item:nth-child(1),
  .story-carousel .item:nth-child(3){height:440px}
  .story-carousel .item:nth-child(2){height:590px}
}


/* news ======================================== */
.news{padding-top:var(--unit-5x); padding-bottom:var(--unit-5x)}
.news .latest-news{margin-top:var(--unit-5x); overflow:hidden}

.news-carousel.owl-theme .owl-nav.disabled + .owl-dots{margin-top:12px}

@media (max-width:1069px){
  .news .latest-news .lists.owl-carousel .owl-stage{display:flex}
  .news .latest-news .lists.owl-carousel .owl-stage-outer{overflow:visible}
  .news .latest-news .lists.owl-carousel > [class*="col-"]{padding-left:0; padding-right:0}
}
@media (min-width:1070px){
  .news{padding-top:0; padding-bottom:200px}
  .news .latest-news{margin-top:var(--unit-8x)}
  .news .latest-news .lists{row-gap:var(--unit-4x)}
}

/* hover */
@media (hover:hover) and (pointer:fine){
  .news .list-item:hover .btn-txt.line::before{transform:scaleX(0); transition:transform .32s ease}
  .news .list-item:hover .btn-txt.line::after{transform:scaleX(1); transition:transform .32s ease .28s}
}


/* media ======================================== */
.media{padding-top:var(--unit-20x); padding-bottom:var(--unit-10x); background-color:var(--black); position:relative}
.media::before{content:''; position:absolute; inset:0; z-index:0; height:200px; background-image:linear-gradient(180deg,rgba(0,0,0,0.20) 0,rgba(0,0,0,0.50) 40%, #000 85%), url('../images/home/home_media.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat}
.media > *{position:relative; z-index:1}
.media .media-head{display:flex; align-items:flex-end; justify-content:space-between}
.media .media-head .section-title{width:100%; text-align:center}
.media .media-head .desc{color:var(--white-70)}
.media .media-head .btn-txt{display:none}
.media .video-list{margin-top:var(--unit-6x)}
.media .video-list .lists{row-gap:var(--unit-4x)}
.media .video-list .lists .media-right-grid{display:grid; grid-template-columns:repeat(2,1fr); row-gap:var(--unit-4x); column-gap:var(--unit-2x)}
.media .video-list .lists .media-right-grid .list-item:nth-child(n+5){display:none}
.media .btn-wrap{display:flex; justify-content:center}
@media (min-width:768px){
  .media .video-list .lists .media-right-grid{column-gap:var(--unit-3x)}
}
@media (min-width:1070px){
  .media{padding-top:350px; padding-bottom:200px}
  .media::before{height:480px}
  .media .media-head .section-title{width:auto; text-align:left}
  .media .media-head .btn-txt{display:flex; flex-shrink:0}
  .media .video-list{margin-top:var(--unit-8x)}
  .media .video-list .lists{flex-wrap:nowrap}
  .media .video-list .lists .media-right-grid .list-item:nth-child(n+5){display:block}
  .media .btn-wrap{display:none}
  .media .media-left .list-item.highlight{position:sticky; top:calc(var(--header-height-desktop) + 24px)}
}
@media (min-width:1400px){
  .media .video-list .lists .media-right-grid{row-gap:var(--unit-5x); column-gap:var(--unit-4x)}
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi){
.media::before{background-image:linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.50) 33.48%, #000 85%), url('../images/home/home_media@2x.jpg')}
}

/* hover */
@media (hover:hover) and (pointer:fine){
  .media-grid .list-link{position:relative; overflow:hidden}
  .media-grid .list-link::after{content:''; position:absolute; inset:-40% -60%; background:linear-gradient(120deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.10) 50%,rgba(255,255,255,0) 60%); transform:translateX(-30%); opacity:0; transition:opacity .2s ease, transform .6s ease; pointer-events:none}
  .media-grid .list-item:hover .list-link{transform:scale(1.03)}
  .media-grid .list-item:hover .list-link::after{opacity:1; transform:translateX(30%)}
  .media-grid .list-item .info .title{transition:all .3s ease}
  .media-grid .list-item:hover .info .title{color:var(--white)}
}

/* media animated */
.media-right-grid.sm-set > .sm-item:nth-child(1){animation-delay:0.05s}
.media-right-grid.sm-set > .sm-item:nth-child(2){animation-delay:0.1s}
.media-right-grid.sm-set > .sm-item:nth-child(3){animation-delay:0.15s}
.media-right-grid.sm-set > .sm-item:nth-child(4){animation-delay:0.2s}
.media-right-grid.sm-set > .sm-item:nth-child(5){animation-delay:0.25s}
.media-right-grid.sm-set > .sm-item:nth-child(6){animation-delay:0.3s}
.media-right-grid.sm-set > .sm-item:nth-child(7){animation-delay:0.35s}
.media-right-grid.sm-set > .sm-item:nth-child(8){animation-delay:0.4s}


/* Award ======================================== */
.award{padding-top:var(--unit-10x); padding-bottom:var(--unit-10x)}
.awards-carousel{margin-top:var(--unit-4x)}
.awards-carousel .list-item .list-link{display:block}
.awards-carousel .list-item .thum{padding:var(--unit-5x); background-color:var(--black-5)}
.awards-carousel .list-item .thum .thum-img{width:100%; padding-bottom:68%; background-repeat:no-repeat; background-position:50% 50%; background-size:contain}
.awards-carousel .list-item .info{margin-top:var(--unit-3x); padding-left:var(--unit-2x); padding-right:var(--unit-2x)}
.awards-carousel .list-item .info > *:not(:first-child){margin-top:var(--unit-1x)}
.awards-carousel .list-item .country{font-size:var(--typo-paragraph-5); font-weight:500; color:var(--primary)}
.awards-carousel .list-item .title{font-size:17px; line-height:1.5; font-weight:600}
.awards-carousel .list-item .awarder span{font-size:var(--typo-paragraph-5); line-height:1.5; color:var(--text-gray-dark)}
.awards-carousel .list-item .awarder span::after{content:''; width:2px; height:2px; display:inline-block; background-color:var(--text-gray-dark); border-radius:999px; vertical-align:middle; margin-left:6px; margin-right:4px}
.awards-carousel .list-item .awarder span:last-child::after{display:none}
.awards-carousel .list-item .btn-txt{margin-top:var(--unit-3x); width:100%; justify-content:center}
.awards-carousel.owl-theme .owl-nav.disabled + .owl-dots{margin-top:var(--unit-3x)}
@media (min-width:1070px){
.awards-carousel{margin-top:var(--unit-8x); padding-left:var(--container-w-pd); padding-right:var(--container-w-pd); max-width:var(--container-xxl); margin-left:auto; margin-right:auto}
.awards-carousel.owl-theme .owl-nav.disabled + .owl-dots{margin-top:var(--unit-8x)}
}

/* hover */
.awards-carousel .list-item .thum-img{transition:transform .3s ease}
@media (hover:hover) and (pointer:fine){
  .awards-carousel .list-item:hover .thum-img{transform:scale(1.04)}
}



/* Press ======================================== */
.press{padding-top:var(--unit-10x); padding-bottom:var(--unit-10x); background-color:var(--black-4)}
.press .section-title > *{margin-left:auto; margin-right:auto}
.press-list .press-item:first-child .press-link{padding-top:0}
.press-list .press-item:not(:last-child){border-bottom:1px solid var(--black-7)}
.press-list .press-link{display:block; padding-right:var(--unit-2x); padding-top:var(--unit-3x); padding-bottom:var(--unit-3x)}
.press-list .press-text{transition:transform .3s ease}
.press-list .title{font-size:var(--typo-paragraph-1); line-height:1.5; overflow:hidden}
.press-list .title.is-link::after{content:''; display:inline-block; width:18px; height:18px; margin-top:-2px; margin-left:4px; background-image:url('../images/ui/ico_open_in_new_b.svg'); vertical-align:middle; opacity:.7}
.press-meta{margin-top:var(--unit-1x); display:flex; align-items:center; flex-wrap:wrap}
.press-meta > *{display:inline-flex; align-items:center; font-size:var(--typo-paragraph-5); color:var(--text-gray)}
.press-meta > *:not(:first-child)::before{content:''; width:2px; height:2px; background-color:var(--text-gray); flex-shrink:0; margin:0 6px}
.press-meta .source{color:var(--primary)}
@media (min-width:1070px){
  .press-inner{flex-direction:row; align-items:flex-start}
  .press .section-title .btn-txt{justify-content:inherit}
  .press-list{flex:1; margin-top:0}
  .press-list .title::after{margin-left:6px}
}

/* hover */
@media (hover:hover) and (pointer:fine){
  .press-list .press-item:hover .press-text{transform:translateX(16px)}
}
