@charset "utf-8";
/* --------------------------------------------------
GATE PAGE
2026.06.18
IR PLUS HSG
----------------------------------------------------- */
@font-face {
    font-family: 'PreGOV_ExtraLi';
    src: url('../font/PretendardGOV-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'PreGOV_SemiBo';
    src: url('../font/PretendardGOV-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
#container { position: relative; width: 100%; height: 100vh; background: url(../img/main_bg_pc.jpg) no-repeat center / cover; overflow: hidden; }
#container::after { position: absolute; content: ""; top: 0; left: 0; display: block; margin: 0; inset: 0; background-color: #000; pointer-events: none; transition: opacity 4s ease; }
#container.active::after { opacity: .5; }
#container .ls01 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 435px; opacity: 0; animation: logoIntro 4s ease forwards; animation-delay: 2s; z-index: 100; }
#container .bxWrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-start; width: 100%; max-width: 1300px; z-index: 100; }
#container .bxWrap .bx { width: 299px; text-align: center; }
#container .bxWrap .bx figure {  margin-bottom: 35px; }
#container .bxWrap h2 { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-size: 28px; font-family: 'PreGOV_Bo'; font-weight: 700; color: #fff; text-align: center; opacity: 0; animation: txt 1s ease forwards; animation-delay: 6s; }
#container .bxWrap h2 span { font-family: 'PreGOV_Li'; font-weight: 300; }
#container .bxWrap h2 br { display: none; }
#container .bxWrap .marine { opacity: 0; animation: bxmarine 1s ease forwards; animation-delay: 4.2s; }
#container .bxWrap .marine figure { width: 100%; text-align: center; }
#container .bxWrap .marine figure img { width: 100%; max-width: 299px; }
#container .bxWrap .buildwin { opacity: 0; animation: bxbuild 1s ease forwards; animation-delay: 4.2s; }
#container .bxWrap .buildwin figure { width: 100%; text-align: center; }
#container .bxWrap .buildwin figure img { width: 100%; max-width: 206px; }
#container .bxWrap .bx a { display: inline-block; color: #fff; text-align: center; width: 40px; height: 40px; line-height: 40px; background-color: #e6003e; border-radius: 50%; opacity: 0; animation: btn 1s ease forwards; animation-delay: 5.5s; }
#container .bxWrap .bx a i { font-size: 20px; }
/* box ani */
@keyframes logoIntro {
    0% { top: 47%; left: 50%; transform: translate(-50%, -50%) scale(1); opacity: 0; }
    50% { top: 47%; left: 50%; transform: translate(-50%, -50%) scale(1); opacity: 1; }
    75% { top: 47%; left: 50%; transform: translate(-50%, -50%) scale(.5); opacity: 1; }
    100% { top: 80px; left: 50%; transform: translate(-50%, 0) scale(.365); opacity: 1; }
}
@keyframes bxmarine {
    0% { opacity: 0; transform: translateX(50%); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes bxbuild {
    0% { opacity: 0; transform: translateX(-50%); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes btn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes txt {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
/* cover 공통 */
#container .cover { position: absolute; display: flex; justify-content: center; align-items: center; top: 0; left: 0; width: 100%; height: 100vh; background-color: #fff; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s ease, visibility .4s ease; z-index: 1000; }
#container .cover.active { opacity: 1; visibility: visible; pointer-events: auto; }
#container .cover button { position: absolute; top: 50%; left: 50px; display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; background-color: rgba(0,0,0,.5); border-radius: 50%; cursor: pointer; z-index: 1500; }
#container .cover button i { color: #e6003e; font-size: 30px; font-weight: 500; opacity: 1; }
#container .cover .outer { position: relative; display: flex; flex-flow: column; margin-top: 110px; width: 100%; max-width: 1300px; z-index: 2000; }
#container .cover .outer figure { display: inline-block; margin-bottom: 20px; }
#container .cover .outer figure img { height: auto; }
#container .cover .outer h3 { font-size: 60px; font-family: 'PreGOV_SemiBo'; font-weight: 600; color: #fff; letter-spacing: -0.045em; line-height: 1.1; }
#container .cover .outer h3 span { display: block; font-family: 'PreGOV_ExtraLi'; font-weight: 200; color: #fff; }
#container .cover .outer .linkBtn { margin-top: 30px; font-size: 22px; font-family: 'PreGOV_SemiBo'; font-weight: 600; color: #fff; text-align: center; line-height: 45px; background-color: rgba(0,0,0,.5); width: 196px; border-radius: 45px; }
#container .cover .outer .linkBtn i { display: inline-block; margin-left: 10px; transform: translateY(1px); }
/* LS마린솔루션 */
#container .cover.marinecover { background: url(../img/hover_marine_bg01.jpg) no-repeat center / cover; }
#container .cover.marinecover .outer figure img { width: 299px; }
#container .cover.marinecover .outer { align-items: flex-end; padding-right: 45px; border-right: 1px solid rgba(255,255,255,.5); }
/* LS빌드윈 */
#container .cover.buildwincover { background: url(../img/hover_buildwin_bg.jpg) no-repeat center / cover; }
#container .cover.buildwincover .outer { align-items: flex-start; padding-left: 45px; border-left: 1px solid rgba(255,255,255,.5); }
#container .cover.buildwincover .outer figure img { width: 207px; }
@media all and (max-width: 1376px){
    #container .bxWrap { padding: 0 20px; }
    @keyframes logoIntro {
        0% { top: 47%; left: 50%; transform: translate(-50%, -50%) scale(.8); opacity: 0; }
        50% { top: 47%; left: 50%; transform: translate(-50%, -50%) scale(.8); opacity: 1; }
        75% { top: 47%; left: 50%; transform: translate(-50%, -50%) scale(.5); opacity: 1; }
        100% { top: 80px; left: 50%; transform: translate(-50%, 0) scale(.365); opacity: 1; }
    }
}
@media all and (max-width: 1200px){
    #container .bxWrap h2 br { display: inline; }
}
@media all and (max-width: 1032px){
    #container .cover { display: none !important; }
    #container .bxWrap h2 { transform: translateX(-50%) translateY(-18vh); }
    #container .bxWrap .bx { width: 240px; }
    #container .bxWrap .buildwin figure img { max-width: 68.89%; }
}
@media all and (max-width: 960px){
    #container { background: url(../img/main_bg_mo.jpg) no-repeat center 80% / cover; }
    #container .bxWrap h2 { width: 100%; }
}
@media all and (max-width: 768px){
    #container .bxWrap .bx { width: 200px; }
    @keyframes logoIntro {
        0% { top: 47%; left: 50%; transform: translate(-50%, -50%) scale(.5); opacity: 0; }
        50% { top: 47%; left: 50%; transform: translate(-50%, -50%) scale(.5); opacity: 1; }
        75% { top: 47%; left: 50%; transform: translate(-50%, -50%) scale(.35); opacity: 1; }
        100% { top: 80px; left: 50%; transform: translate(-50%, 0) scale(.3); opacity: 1; }
    }
}
@media all and (max-width: 599px){
    #container .bxWrap { top: 60vh; transform: translate(-50%, 0); }
    #container .bxWrap .bx { width: 150px; }
    #container .bxWrap h2 { transform: translateX(-50%) translateY(-30vh); font-size: 23px; }
    #container .bxWrap .bx figure { margin-bottom: 20px; }
    #container .bxWrap .bx a { width: 35px; height: 35px; line-height: 35px; }
    @keyframes logoIntro {
        0% { top: 47%; left: 50%; transform: translate(-50%, -50%) scale(.3); opacity: 0; }
        50% { top: 47%; left: 50%; transform: translate(-50%, -50%) scale(.3); opacity: 1; }
        100% { top: 0; left: 50%; transform: translate(-50%, 0) scale(.2); opacity: 1; }
    }
}