@import "../vendor/swiper/swiper-bundle.min.css";
@import "../vendor/fancybox/fancybox.css";
@import "../vendor/lobibox/lobibox.min.css";
@import "variables.css";
@import "grids.css";
@import "global.css";

#header{position:fixed; top:48px; left:48px; right:48px; height:calc(130px - 48px - 48px); max-width:100%;}
#header .header-logo{height:100%; width:auto; float:left; max-width:100%}
#header .header-logo img{height:100%; width:auto; object-fit: contain; max-width:100%;}
#main-stage{position:fixed; top:130px; left:48px; right:48px; bottom:48px;}

#stage-1{position:absolute; top:0; left:0; right:0; bottom:0; background:#11069a;}
#stage-1 .container{height:100%;}
#stage-1 .row{height:100%;}
#stage-1 .row .col-6{height:100%; position:relative}
#stage-1 .row .col-6:first-child{padding-right:0}
#stage-1 .row .col-6:last-child{padding-left:0}
#stage-1-logo{position:absolute; top:50%; left:0; transform:translateY(-50%); background:#fff}
#stage-1-logo .thumbnail{line-height:0; margin-bottom: -7px;}
#stage-1-logo img{height:130px; object-fit:contain}

#slideshow-stage-1{width:100%; height:100%;}
#slideshow-stage-1 .thumbnail{width:100%; height:100%;}
#slideshow-stage-1 .thumbnail img{width:100%; height:100%; object-fit: cover}

#stage-2{position:absolute; top:0; left:0; right:0; bottom:0;}
#stage-2 .container{height:100%;}
#stage-2 .row{height:100%; padding:0}
#stage-2 .row .col-6{height:100%; position:relative}
#stage-2 .row .col-6:last-child{padding-left:0; background:#11069a;}
#stage-2 .row .col-6:first-child{padding-left:0;}

#stage-2 .stage-wrapper{height:100%}
#stage-2 .stage-wrapper .text-wrapper{height:calc(33.33% * 2)}
#stage-2 .stage-wrapper .text-wrapper .box{padding:24px; border-top:6px solid #11069a; background:#f5f6f6; height:50%; }
#stage-2 .stage-wrapper .text-wrapper .box-header{font-weight:bold; font-size:20px; line-height:24px; letter-spacing:0.5px; margin-bottom:12px; color:#11069a}

#stage-2 .box-stage{height:calc(100% - 24px); color:#11069a}
#stage-2 .box-stage .swiper{
    height:100%;
}
#stage-2 .box-stage .swiper-slide{
    height:auto; text-align:justify; padding-left:24px;
}
#stage-2 .box-stage .swiper-scrollbar-lock ~ .swiper-wrapper .swiper-slide{
    padding-left:0;
}
#stage-2 .swiper-scrollbar.swiper-scrollbar-vertical,
#stage-2 .swiper-vertical>.swiper-scrollbar{right:auto; left:0}

#stage-2-logo{position:absolute; top:50%; left:50%; transform:translateY(-50%) translateX(-50%); background:#fff}
#stage-2-logo .thumbnail{line-height:0; margin-bottom: -7px;}
#stage-2-logo img{height:130px; object-fit:contain}

#stage-2 .stage-wrapper .contact-wrapper{background:#11069a; height:33.33%; padding:24px; display:flex}
#stage-2 .stage-wrapper .contact-wrapper .contact-map{height:100%; aspect-ratio: 595/497}
#stage-2 .stage-wrapper .contact-wrapper .contact-map img{height:100%; object-fit: cover}
#stage-2 .stage-wrapper .contact-wrapper .contact-address{flex-grow: 1; margin-right:24px; margin-left: 24px; color:#fff; font-style: normal; line-height:30px;}
#stage-2 .stage-wrapper .contact-wrapper .contact-address:before{content:"Address:"; font-weight:bold; display:table; width:100%; margin-bottom:8px}
#stage-2 .stage-wrapper .contact-wrapper .contact-email{flex-grow:1; color:#fff; line-height:30px;}
#stage-2 .stage-wrapper .contact-wrapper .contact-email a{color:#fff;}
#stage-2 .stage-wrapper .contact-wrapper .contact-email:before{content:"Contact Us:"; font-weight:bold; display:table; width:100%; margin-bottom:8px;}
#footer{position:fixed; bottom:18px; font-size:10px; line-height:14px; left:48px; right:48px; color:#11069a}

@media screen and (max-width:980px) {
    #stage-2 .row .col-6:first-child{width:100%; padding-right:0}
    #stage-2 .row .col-6:last-child{display:none}
}
@media screen and (max-width:750px) {
    #header{height:50px; top:24px; right:24px; left:24px;}
    #main-stage{top:100px; right:24px; left:24px;}


    #stage-1 .row .col-6:first-child{width:100%; padding-right:var(--gap)}
    #stage-1 .row .col-6:last-child{display:none;}

    #stage-2 .box-stage .swiper-slide{text-align:start}
    #stage-2 .stage-wrapper .contact-wrapper{}
    #stage-2 .stage-wrapper .contact-wrapper .contact-address{margin-right:0;  font-size:16px; line-height:24px;}
    #stage-2 .stage-wrapper .contact-wrapper .contact-email{display:none}

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