#gcsContent{
    background-image: url("../img/gcs/G_C_S.jpg");
    background-position: center;
    background-size: cover;
}

#g-c-s-1{
    width:fit-content ;
    height:auto ;
    line-height:20px ;
    right: 63%;
    top: 15%;
    display: block;
}
#g-c-s-2{
    position: absolute;
    width:fit-content ;
    height:auto ;
    top: 38%;
    left: 78%;
    display: block;
}
#g-c-s-3{
    position: absolute;
    width:fit-content ;
    height:auto ;
    top: 45%;
    right: 76.5%;
    display: block;
}
#g-c-s-4{
    position: absolute;
    width:fit-content ;
    height:auto ;
    top: 73.5%;
    right: 71%;
    display: block;
}
/*---------------------------------------*/
/*zoom1*/
#g-c-s-1-circle{
    left: 40.3%;
    top: 29.4%;
    z-index: 3;
}
#g-c-s-1-circle:hover{
    width: 200px;
    height: 200px;
    background-image: url("../img/gcs/Valve-zoom.png");
}
/*zoom2*/
#g-c-s-2-circle{
    right: 43.85%;
    top: 32.2%;
    z-index: 3;
}
#g-c-s-2-circle:hover{
    width: 200px;
    height: 200px;
    background-image: url("../img/gcs/Detail.02_prev_ui.png");
}
/*zoom3*/
#g-c-s-3-circle{
    left: 27.95%;
    top: 40.9%;
    z-index: 3;
}
#g-c-s-3-circle:hover{
    width: 200px;
    height: 200px;
    background-image: url("../img/gcs/RGas-zoom.png");
}
/*zoom4*/
#g-c-s-4-circle{
    left: 28.05%;
    top: 51.4%;
    z-index: 3;
}
#g-c-s-4-circle:hover{
    width: 300px;
    height: 157px;
    background-image: url("../img/gcs/Detail.01-300x157.jpg");
}
/*------------------------*/
/*  --------------------  */
#first-modal-1{
    top: 5%;
    right: 38%;
    width: 330px;
    height: 150px;
}
#first-modal-1-text{
    width: 300px;
    height: 140px;
    margin: 15px auto 0 auto;
}
#first-modal-2{
    top: 56%;
    right: 2%;
    width: 285px;
    height: 260px;

}
#first-modal-2-text{
    width: 255px;
    height: 250px;
    margin: 15px auto 0 auto;
}
#first-modal-3{
    top: 12%;
    left: 2%;
    width: 330px;
    height: 210px;
}
#first-modal-3-text{
    width: 300px;
    height: 200px;
    margin: 15px auto 0 auto;

}
#first-modal-4{
    bottom: 2%;
    right: 38%;
    width: 480px;
    height: 230px;
}
#first-modal-4-text{
    width: 450px;
    height: 220px;
    margin: 15px auto 0 auto;
}
.modal-title{
    position: absolute;
    transition: all  .5s;
    text-align: justify;
    background-color:#0033a1;
    color: #ffffff;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    font-weight: lighter;
}
.more{
    color: #ffffff;
    font-size: 1.5em;
    position: absolute;
    bottom: 0;
    left: 10px;
    cursor: pointer;
}
.more:hover{
    color: #c5343b;
}
#triangle-left-1 {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-right: 7px solid #0033a1;
    border-bottom: 5px solid transparent;
    position: absolute;
    left: -9px;
    top: 50%;
}
#triangle-left-2{
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 7px solid #0033a1;
    position: absolute;
    left: 10%;
    top: -9px;
}
#triangle-left-3{
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #0033a1;
    position: absolute;
    bottom: -9px;
    right: 20%;
}
#triangle-left-4{
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-right: 7px solid #0033a1;
    border-bottom: 5px solid transparent;
    position: absolute;
    left: -9px;
    top: 7%;
}

/*SLIDER*/
#SliderPicture-gcs-panel{
    background-image: url("../img/gcs/panel/1.jpg");
}
#SliderPicture-gcs-arGas{
    background-image: url("../img/gcs/arGas/1.jpg");
}
#SliderPicture-gcs-valveBox{
    background-image: url("../img/gcs/valveBox/1.jpg");
}
#SliderPicture-gcs-pointOfUse{
    background-image: url("../img/gcs/pointOfUse/1.jpg");
}