
.gsp_container{    padding: 0;    margin: 0;  }
/*
.gsp_container--pa{ }
.gsp_container--pb{}
.gsp_container--pc{}
.gsp_container--pd{}*/
 .trigger-a{ background-color: red;  }
 .trigger-b{ background-color: yellow; }
 .trigger-c{ background-color: green; }
.trigger-d{ background-color: blue;  }
.trigger-e{ background-color: pink; }
.trigger-f{ background-color:aqua; }
.trigger-g{ background-color: red;  }
.trigger-h{ background-color: yellow; }
.trigger-i{ background-color: green; }
.trigger-j{ background-color: green;}
.trigger-k{ background-color: blue; } 
.trigger-l{ background-color: pink;  }

.trigger{     display: block;   width: 0px;    height: 100vh; }
.trigger-a{  height: 50vh;}
.trigger-b{  height: 100vh;}
.trigger-c{  height: 10vh;}

.trigger-d{  height: 50vh;}
.trigger-e{  height: 130vh;}
.trigger-f{  height: 20vh;}

    
.trigger-g{  height: 100vh;}
.trigger-h{  height:70vh;}
.trigger-i{  height: 80vh;}

.trigger-j{  height: 100vh; }

.trigger-k{  height: 100vh;}
.trigger-l{  height: 10vh;}


/*
.gsp_container__model{background-color: rgba(255,0,0,0.5); }
*/
.gsp_container__model{
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 250px;
   }
.gsp_container__model>img{ 
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);  } 
.gsp_container__txt{    display: block;    position: fixed;    width: 100%;    height: 100%;    } /*오류 수정중 */
.gsp_container__txt.gsp_container__txt-g-outer{   background-color: rgba(255, 0, 0, 0.0); transform: translateY(1000px); } /*오류 수정중 */ 
.gsp_container__model.gsp_container__model-g-outer{ background-color: rgba(255, 0, 0, 0.0); transform: translateY(1000px);  }/*오류 수정중 */ 
.gsp_container__model.gsp_container__model-j-outer{ background-color: rgba(15, 146, 3, 0.0); transform: translateY(1000px);  }/*오류 수정중 */ 
.gsp_container__txt.gsp_container__txt-j-outer{   background-color: rgba(0, 160, 13, 0.0); transform: translateY(1000px); } /*오류 수정중 */ 

.gsp_container__txt *{transition: all 0.5s ease; }
.gsp_container__txt--button{    width: 200px;     height: 386px;   }
.gsp_container__txt--button svg{    
    width: 100%;    
    height: 100%;  
    position: relative;    
    transform: scale(0.2,1); 
    transform: scale(0.8,1);  }
    a:hover .gsp_container__txt--button svg{ transform: scale(0.9,1); } 
.gsp_container__txt--button span{
    color: var(--ho-white);
    position: relative;    
    display: block;    box-sizing: border-box;    margin: 0 auto;   
    overflow: hidden; font-weight: 600; text-align: center;
    width: 50%; width: 43%;
    top: -50%;     }
    a:hover .gsp_container__txt--button span{width: 50%; }
@media screen and (max-width: 960px) {
    .gsp_container__txt--button svg{ transform: scale(0.6,1); } 
    .gsp_container__txt--button span{width: 26%;  }
    
}
.gsp_container__txt--button a span{color: var(--ho-white);}
.gsp_container__txt h4{font-size: 1.8rem; letter-spacing: 0.1em; font-weight: 400;  -transition: all 2s;}
.gsp_container__txt h2{ font-size: 6rem; letter-spacing: 0.4em;  -transition: all 2s;}
.gsp_container__txt h5{font-size: 1rem;  letter-spacing: 0.1em; font-weight: 600; -transition: all 2s;}
.gsp_container__txt a:hover  h4{ letter-spacing: 0.2em; } 
.gsp_container__txt a:hover h2{ letter-spacing: 0.5em; }
.gsp_container__txt a:hover h5{ letter-spacing: 0.2em; }
@media screen and (max-width: 960px) {
    .gsp_container__txt h4{font-size: 1rem; letter-spacing: 0.1em; font-weight: 600;}
    .gsp_container__txt h2{ font-size: 3rem; letter-spacing: 0.4em; }
    .gsp_container__txt h5{font-size: 1rem;  letter-spacing: 0.1em; font-weight: 400;}
}

/*pa*/
div.gsp_container__model-line-a{ 
    display: block;
    position: absolute; 
    top: 50%;
    left: 0;   transform: translate(-0%,-50%); 
    overflow: hidden;
    height: 100%;
    width: 100%;     }
    div.gsp_container__model-line-a img{ 
        display: block;
        position: absolute;
        top: 50%;
        left: 0;   transform: translate(-0%,-50%);  }
        @media screen and (max-width: 960px) {
            div.gsp_container__model-line-a img{ 
                left: -90%;   
            }


        }
    div.gsp_container__model-line-a{
        width: 0%;  
        animation-duration: 2s; 
        animation-iteration-count: 1; 
        animation-fill-mode:forwards;
        animation-name: lineend_focus_aa;  
        }@keyframes lineend_focus_aa {  
            100% {  width: 100%;  }   
        } 
img.gsp_container__model-a{ max-width: 400px;  width: 73vw;}
img.gsp_container__model-b{ max-width: 460px;  width: 75vw;}
img.gsp_container__model-c{ max-width: 400px;  width: 73vw;}  
img.gsp_container__model-a{  top: 36%; left:76%;}
img.gsp_container__model-b{ top: 46%; left: 50%; }  
img.gsp_container__model-c{ top: 70%; left:26%;}  
@media screen and (max-width: 960px) {
    img.gsp_container__model-a{  top: 21%; left:72%;}
    img.gsp_container__model-b{top: 54%;     left: 53%; }  
    img.gsp_container__model-c{ top: 36%;   left:26%;}  
}
.gsp_container--pa .gsp_container__txt--sub,
.gsp_container--pa .gsp_container__txt--title,
.gsp_container--pa .gsp_container__txt--button{ 
    position: absolute; top: 0;  left: 0;   transform: translate(0%,-50%);        }
.gsp_container--pa .gsp_container__txt--sub{  top: 50%;  left: 0;}
.gsp_container--pa .gsp_container__txt--title{ top: 50%;  left: 0;}
.gsp_container--pa .gsp_container__txt--button{ top: 50%;  left:-100px;}
.gsp_container--pa .gsp_container__txt--button span{  transform: translate(50%, -65%);  left: 0px;   }
.gsp_container--pa .gsp_container__txt h4{ top: 25%;    left: 5.5%}
.gsp_container--pa .gsp_container__txt h2{  top: 33%;   left: 5%} 
.gsp_container--pa .gsp_container__txt h5{ top: 43%;    left: 5.5%}
@media screen and (max-width: 960px) {
.gsp_container--pa .gsp_container__txt h4{ top: 78%; width: 100%;    left: 50%; transform: translateX(-50%);}
.gsp_container--pa .gsp_container__txt h2{  top: 80%; width: 100%;   left: 52%; transform: translateX(-50%);}
.gsp_container--pa .gsp_container__txt h5{ top: 86%;    left: 8%}
}
/*//pa*/
/*pc*/
div.gsp_container__model-line-g{ 
    display: block;
    position: absolute; 
    top: 50%;                                           
    right: 0;   transform: translate(-0%,-50%); 
    overflow: hidden;
    height: 100%;
    width: 100vw;     }
    div.gsp_container__model-line-g img{ 
        display: block;
        position: absolute;
        width: 1920px;
        top: 50%;   
        right: 0;   transform: translate(-0%,-50%);  }
        @media screen and (max-width: 960px) { 
            div.gsp_container__model-line-g{ }
            div.gsp_container__model-line-g img{ right: -120%; }
        }/*
        .gsp_container--pc:hover div.gsp_container__model-line{
            width: 0%;  
            animation-duration: 2s; 
            animation-iteration-count: 1; 
            animation-fill-mode:forwards;
            animation-name: lineend_focus_ac;  
            }@keyframes lineend_focus_ac{  
                100% {  width: 100%;  }   
            } */
img.gsp_container__model-g{ max-width: 760px;  width: 143vw;}  
img.gsp_container__model-g{  top: 50%; left:28%;  }
@media screen and (max-width: 960px) {
    img.gsp_container__model-g{  top: 41%; left:52%;     }  }
.gsp_container--pc .gsp_container__txt--sub,
.gsp_container--pc .gsp_container__txt--title,
.gsp_container--pc .gsp_container__txt--button{            
    position: absolute; top: 0;  right: 0;   transform: translate(0%,50%);  text-align: right;       } 
@media screen and (max-width: 960px) { 
    .gsp_container--pc .gsp_container__txt--sub,
    .gsp_container--pc .gsp_container__txt--title{ text-align: center; } }   

.gsp_container--pc .gsp_container__txt--sub{  top: 50%;  right: 5%;   }
.gsp_container--pc .gsp_container__txt--title{ top: 50%;  right: 5%;  }
.gsp_container--pc .gsp_container__txt--button{ top: 10%;  right:-100px;    }
.gsp_container--pc .gsp_container__txt--button span{  transform: translate(-50%, -65%);  right: 0px;  }
.gsp_container--pc .gsp_container__txt h4{ top: 25%;    right: 8.5%;  }
.gsp_container--pc .gsp_container__txt h2{  top: 23%;   right: 5.0%; } 
.gsp_container--pc .gsp_container__txt h5{ top: 43%;    right: 8.5%;  }
@media screen and (max-width: 960px) {
.gsp_container--pc .gsp_container__txt h4{  top: 70%;    line-height: 1.2;    right: 50%; width: 80%; transform: translateX(50%);}
.gsp_container--pc .gsp_container__txt h2{  top: 74.5%;   right: 50%; width: 80%; transform: translateX(50%);}
.gsp_container--pc .gsp_container__txt h5{  top: 83.5%;    line-height: 1.2;     right: 50%; width: 80%; transform: translateX(50%);}
}
/*//pc*/
/*pd*/
div.gsp_container__model-line-j{ 
    display: block;
    position: absolute; 
    top: 50%; 
    left: 0;   transform: translate(-0%,-50%); 
    overflow: hidden;
    height: 100%;
    width: 100%;     }
    div.gsp_container__model-line-j img{ 
        display: block;
        position: absolute; width: 1920px;
        top: 50%;
        left: 0%;   transform: translate(-0%,-50%);     
        }
        @media screen and (max-width: 960px) {
            div.gsp_container__model-line-j img{ 
                left: -80%;   
            }


        }
img.gsp_container__model-j{ max-width: 860px;   width:152vw;}
img.gsp_container__model-j{  top: 53%; left:60%;   }
@media screen and (max-width: 960px) {
    img.gsp_container__model-j{  top: 40%; left:24.01%;    }
}
.gsp_container--pd .gsp_container__txt--sub,
.gsp_container--pd .gsp_container__txt--title,
.gsp_container--pd .gsp_container__txt--button{ 
    position: absolute; top: 0;  left: 0;   transform: translate(0%,-50%);        }
.gsp_container--pd .gsp_container__txt--sub{  top: 50%;  left: 0;}
.gsp_container--pd .gsp_container__txt--title{ top: 50%;  left: 0;}
.gsp_container--pd .gsp_container__txt--button{ top: 50%;  left:-100px; }
.gsp_container--pd .gsp_container__txt--button span{  transform: translate(50%, -65%);  left: 0px;   }
.gsp_container--pd .gsp_container__txt h4{ top: 25%;    left: 5.5%; }
.gsp_container--pd .gsp_container__txt h2{  top: 33%;   left: 5%;    } 
.gsp_container--pd .gsp_container__txt h5{ top: 43%;    left: 5.5%;  }
@media screen and (max-width: 960px) {
.gsp_container--pd .gsp_container__txt h4{ top: 63%;  line-height: 1.2;   left: 50%; width: 80%; transform: translateX(-50%);}
.gsp_container--pd .gsp_container__txt h2{  top: 68%;   line-height: 1.0;   left: 50%; width: 80%; transform: translateX(-50%);}
.gsp_container--pd .gsp_container__txt h5{ top: 83%;   line-height: 1.2;    left: 50%; width: 80%; transform: translateX(-50%);}
}


/*//pd*/ 






/* BANNER PHOTO WIDE PE-M10  */
.gsp_container--pb *{ transition: all 1s ease;}
    a .gsp_container_banner--title{ color:var(--ho-white) ;}
.gsp_container_banner-photo{
    display: block;
    position:absolute; position: fixed;
    top: 50%; top:calc(50% + 1000px) ;
    left: 50%;
    width: 96%;
    height: 600px;
    transform: translate(-50%, -50%);
    overflow: hidden;  background-color: rgb(7, 7, 7);   } 
    .gsp_container_banner-photo img{
        display: block;
        position:absolute; position: fixed;
        top: -250px;
        left: 50%;
        width: 100%;
        transform: translateX(-50%);      } 
    @media screen and (max-width: 960px) {
        .gsp_container_banner-photo img{
            top: -0px;
            width: 260%;     }    }
.gsp_container_banner-line{
    display: block;
    position:absolute; position: fixed;
    left: 50%;
    top: calc(500px + 1000px); 
    width: 96%;
    transform: translate(-50%,-50%);
        }
    @media screen and (max-width: 960px) {
        .gsp_container_banner-line{      
            width: 100%; 
            top: calc(400px + 1000px);        
        }  }
    .gsp_container_banner-line img{ width: 100%;}
.gsp_container_banner--title{
    display: block;
    position:absolute; position: fixed;
    left: 50%;
    width: 130%;
    transform: translate(-50%,-50%); 
    top: calc(500px + 1000px); 
    letter-spacing: 1em; 
    }
    @media screen and (max-width: 960px) { 
        .gsp_container_banner--title{ 
            top: calc(400px + 1000px); 
            letter-spacing: 0.7em; 
            font-size: var( --ho-display-5);
            left: 54%;
        }
    }
/* //BANNER PHOTO WIDE PE-M10  */


.gsp_container__model img,
.gsp_container__txt *{z-index: 10;}

